:root{--ink:#151923;--muted:#596273;--bg:#eef2f6;--panel:#fff;--soft:#f8fafc;--line:#d8dee8;--dark:#111827;--dark2:#1f2937;--accent:#c2410c;--green:#166534;--blue:#1d4ed8;--yellow:#fbbf24}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.66}a{color:inherit}.container{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
header{background:var(--dark);color:#fff;border-bottom:4px solid var(--accent)}.nav{min-height:70px;display:flex;justify-content:space-between;align-items:center;gap:24px}.logo{font-size:26px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;text-decoration:none;color:#fff}.logo span{color:var(--yellow)}
.nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px}.nav-links a{color:#cbd5e1;text-decoration:none;font-size:14px}.nav-links a:hover{color:#fff}
.hero{background:radial-gradient(circle at 18% 0%,rgba(251,191,36,.18),transparent 34%),linear-gradient(180deg,var(--dark2),#111827);color:#fff}.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:36px;padding-top:56px;padding-bottom:50px;align-items:start}
.eyebrow{margin:0 0 12px;color:var(--yellow);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}h1{margin:0 0 18px;max-width:960px;font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.05em}.hero-copy{margin:0 0 22px;max-width:780px;color:#dbe4ef;font-size:18px}
.hero-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px;max-width:780px}.hero-point{border:1px solid rgba(203,213,225,.28);background:rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;color:#e5edf7;font-size:14px}
.search-card{background:#fff;color:var(--ink);border:1px solid #cbd5e1;border-radius:12px;padding:20px;box-shadow:0 16px 30px rgba(0,0,0,.22)}.search-card h2{margin:0 0 10px;font-size:19px}.search-card p{margin:0 0 14px;color:var(--muted);font-size:14px}
.search-row{display:flex;gap:8px;margin-bottom:14px}.search-row input{width:100%;min-width:0;border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:13px 12px;font-size:14px}.search-row button{border:0;border-radius:8px;padding:13px 16px;background:var(--accent);color:#fff;font-weight:800;cursor:pointer;white-space:nowrap}
.quick-links{display:flex;flex-wrap:wrap;gap:8px}.quick-links a{display:inline-block;border:1px solid #d7dde6;background:#eef2f7;color:#334155;border-radius:999px;padding:6px 10px;font-size:13px;text-decoration:none}
main{padding-top:34px;padding-bottom:54px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:13px;margin:0 0 18px}.section-heading h2{margin:0;font-size:28px;letter-spacing:-.03em}.section-heading p{margin:0;max-width:720px;color:var(--muted);font-size:14px}
.browse-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.index-panel,.reference-card,.notice-card,.case-card,.page-card,.page-hero{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}.index-panel h3{margin:0 0 12px;font-size:18px;color:#111827}.index-list{margin:0;padding:0;list-style:none}.index-list li{border-top:1px solid #edf0f5}.index-list li:first-child{border-top:0}
.index-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;color:#273449;font-size:14px;text-decoration:none}.index-list a:hover{color:var(--accent)}.count{color:#64748b;font-size:12px;white-space:nowrap}.status-live{color:var(--green)}.status-build{color:var(--blue)}.status-plan{color:#8a4b0b}
.reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}.reference-card{background:var(--soft)}.reference-card h3{margin:0 0 8px;font-size:17px}.reference-card p{margin:0;color:var(--muted);font-size:14px}
.case-section{margin-top:34px}.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.case-card h3{margin:0 0 8px;font-size:19px}.case-card p{margin:0 0 14px;color:var(--muted);font-size:14px}.case-flow{margin:12px 0 0;padding:12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#334155;white-space:pre-line}
.entry-table{width:100%;margin-top:34px;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.entry-table caption{text-align:left;padding:0 0 12px;font-size:24px;font-weight:800;color:var(--ink)}.entry-table th,.entry-table td{padding:12px 14px;border-bottom:1px solid #e7ebf1;text-align:left;font-size:14px;vertical-align:top}.entry-table th{background:#f1f5f9;color:#334155;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.entry-table tr:last-child td{border-bottom:0}.entry-table a{color:#1f2937;font-weight:800;text-decoration:none}.entry-table a:hover{color:var(--accent)}
.tag{display:inline-block;min-width:86px;text-align:center;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:800;background:#e8f5ee;color:var(--green);white-space:nowrap}.tag.build{background:#eaf1ff;color:var(--blue)}.tag.plan{background:#fff7ed;color:#9a3412}
.notice-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:34px}.notice-card h2,.notice-card h3{margin:0 0 10px}.notice-card p,.notice-card li{color:var(--muted);font-size:14px}.notice-card ul{margin:10px 0 0;padding-left:18px}
footer{background:var(--dark);color:#cbd5e1;margin-top:0}.footer-grid{display:grid;grid-template-columns:1.2fr .75fr .85fr 1fr;gap:22px;padding-top:34px;padding-bottom:26px}.footer-col h3{margin:0 0 10px;color:#fff;font-size:15px}.footer-col p,.footer-col li{font-size:13px;color:#aab6c5;margin:0 0 8px}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col a{color:#cbd5e1;text-decoration:none}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:14px 20px;text-align:center;color:#94a3b8;font-size:12px}
.hidden{display:none!important}.page-main{padding-top:28px}.breadcrumb{color:#64748b;font-size:13px}.page-hero{margin-bottom:16px;background:linear-gradient(180deg,#fff,#f8fafc)}.page-hero h1{color:var(--ink);font-size:clamp(32px,4vw,48px)}.page-hero p{color:var(--muted);font-size:17px;max-width:900px}.page-card{margin-top:14px}.page-card h2{margin:0 0 10px}.page-card h3{margin:16px 0 8px}.page-card p,.page-card li{color:var(--muted)}.page-card a{color:var(--accent);font-weight:700;text-decoration:none}
.flow{padding:14px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;color:#334155;white-space:pre-line;overflow:auto}.data-table{width:100%;border-collapse:collapse;margin-top:10px}.data-table th,.data-table td{border:1px solid #e2e8f0;padding:9px;text-align:left;vertical-align:top;font-size:14px}.data-table th{background:#f8fafc}
.diagram{display:grid;gap:10px;margin-top:12px}.diagram .box{border:1px solid #d8dee8;background:#f8fafc;border-radius:10px;padding:10px 12px;font-weight:700;color:#334155}.diagram .arrow{text-align:center;color:#94a3b8;font-weight:800}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.note{border-left:4px solid var(--accent);background:#fff7ed;padding:12px;border-radius:8px;color:#7c2d12}
@media(max-width:980px){.hero-grid,.notice-grid,.footer-grid,.two-col{grid-template-columns:1fr}.browse-grid,.reference-grid,.case-grid{grid-template-columns:1fr}.hero-points{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.nav{flex-direction:column;align-items:flex-start}.nav-links{justify-content:flex-start}.search-row{flex-direction:column}.search-row button{width:100%}.entry-table{display:block;overflow-x:auto}}


/* v1.4 lesson diagram additions */
.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lesson-card{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:14px}
.lesson-card h3{margin:0 0 8px;color:#111827}
.clean-diagram{display:grid;gap:10px;margin:12px 0}
.clean-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.clean-box{background:#ffffff;border:1px solid #d8dee8;border-radius:12px;padding:12px;color:#334155;font-weight:700;box-shadow:0 1px 0 rgba(15,23,42,.03)}
.clean-box.warn{border-color:#fdba74;background:#fff7ed;color:#9a3412}
.clean-box.ok{border-color:#86efac;background:#f0fdf4;color:#166534}
.clean-box.bad{border-color:#fca5a5;background:#fef2f2;color:#991b1b}
.clean-arrow{text-align:center;color:#94a3b8;font-weight:900}
@media(max-width:760px){.lesson-grid,.clean-row{grid-template-columns:1fr}}


.redrawn-figure{margin:16px 0;border:1px solid #d8dee8;border-radius:14px;background:#fff;padding:12px}
.redrawn-figure img{width:100%;height:auto;display:block;border-radius:10px}
.redrawn-figure figcaption{font-size:13px;color:#64748b;margin-top:8px}


/* v1.6 SEO repair cluster */
.cluster-card{border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:16px;margin:12px 0}
.cluster-card h3{margin:0 0 8px;color:#111827}.cluster-card p{margin:0;color:#596273}
.faq-block details{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:12px 14px;margin:10px 0}.faq-block summary{font-weight:800;color:#111827;cursor:pointer}.faq-block p{margin:8px 0 0;color:#596273}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.path-card{border:1px solid #d8dee8;border-radius:12px;background:#fff;padding:12px}.path-card strong{display:block;color:#111827;margin-bottom:6px}.path-card span{font-size:13px;color:#596273}
.svg-wide{margin:16px 0;border:1px solid #d8dee8;border-radius:14px;background:#fff;padding:12px}.svg-wide img{width:100%;height:auto;display:block}.svg-wide figcaption{font-size:13px;color:#64748b;margin-top:8px}
@media(max-width:850px){.path-grid{grid-template-columns:1fr}}


/* v1.7 user-facing service cluster */
.service-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.service-summary .mini{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px}.service-summary .mini strong{display:block;color:#111827;margin-bottom:4px}.service-summary .mini span{color:#64748b;font-size:14px}.service-alert{border-left:4px solid #c2410c;background:#fff7ed;color:#7c2d12;border-radius:10px;padding:12px;margin:12px 0}.redrawn-figure{margin:16px 0;border:1px solid #d8dee8;border-radius:14px;background:#fff;padding:12px}.redrawn-figure img{width:100%;height:auto;display:block;border-radius:10px}.redrawn-figure figcaption{font-size:13px;color:#64748b;margin-top:8px}.step-list{counter-reset:step;list-style:none;padding-left:0}.step-list li{counter-increment:step;margin:10px 0;padding:12px 12px 12px 48px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;position:relative}.step-list li:before{content:counter(step);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:999px;background:#c2410c;color:#fff;text-align:center;font-weight:800;line-height:24px}.faq-item{border-top:1px solid #e2e8f0;padding:12px 0}.faq-item:first-child{border-top:0}.faq-item h3{font-size:17px;margin:0 0 6px}.faq-item p{margin:0;color:#596273}.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.component-grid .component{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px}.component-grid .component h3{margin:0 0 6px}.component-grid .component p{margin:0;color:#64748b}.redrawn-note{font-size:13px;color:#64748b;margin-top:6px}.path-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.path-links a{display:block;border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:11px;text-decoration:none;color:#1f2937}.path-links a:hover{border-color:#c2410c;color:#c2410c}
@media(max-width:820px){.service-summary,.component-grid,.path-links{grid-template-columns:1fr}}