:root { --bg:#f4f8fb; --surface:#ffffff; --surface-alt:#e9f2f7; --text:#102434; --muted:#587080; --line:#cfdee6; --blue:#126fc7; --teal:#008f9b; --coral:#f56f57; --navy:#122f46; --shadow:0 16px 42px rgba(28,69,93,.10); }
:root[data-theme="dark"] { --bg:#0d1923; --surface:#122633; --surface-alt:#193544; --text:#eef8fb; --muted:#a7c0ca; --line:#294856; --blue:#5fb4ff; --teal:#42d4cf; --coral:#ff967f; --navy:#dff5ff; --shadow:0 16px 42px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; padding:28px 20px; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:760; letter-spacing:0; }
.brand-mark { width:29px; height:29px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:4px; background:var(--navy); border-radius:7px; }
.brand-mark i { display:block; background:var(--teal); border-radius:2px; }.brand-mark i:nth-child(2){background:var(--blue)}.brand-mark i:nth-child(3){background:var(--coral)}
.sidebar-label { margin:8px 0 28px 39px; font-size:12px; color:var(--muted); }
nav { display:grid; gap:6px; }.nav-link, .nav-group a { display:block; padding:7px 10px; border-radius:5px; color:var(--muted); font-size:14px; }.nav-link.active { background:var(--surface-alt); color:var(--text); font-weight:650; }
.nav-group { padding:11px 0 7px; }.nav-group p { margin:0 10px 5px; font-size:11px; font-weight:750; color:var(--text); text-transform:uppercase; letter-spacing:.08em; }.nav-group a { padding-left:18px; }.nav-group a:hover, .nav-link:hover { color:var(--blue); background:var(--surface-alt); }
.sidebar-footer { margin-top:auto; padding:18px 10px 3px; color:var(--muted); font-size:12px; }
main { min-width:0; }.topbar { height:73px; position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:0 clamp(20px,4vw,60px); background:color-mix(in srgb, var(--bg) 91%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.menu-button { display:none; }.search-trigger { margin-right:auto; width:min(390px,48vw); display:flex; align-items:center; justify-content:space-between; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:10px 12px; border-radius:6px; text-align:left; }.search-trigger:hover{border-color:var(--teal)} kbd { border:1px solid var(--line); padding:1px 6px; border-radius:3px; font-size:11px; color:var(--muted); }
.theme-button, .close-button { border:1px solid var(--line); background:var(--surface); color:var(--text); min-width:40px; height:40px; border-radius:6px; }.theme-button:hover,.close-button:hover{border-color:var(--teal); color:var(--teal)}
.content { width:min(1260px,100%); margin:0 auto; padding:0 clamp(20px,4vw,60px) 72px; }.hero { min-height:510px; padding:66px 0 44px; display:grid; grid-template-columns:minmax(0,.93fr) minmax(390px,1.07fr); gap:38px; align-items:center; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 11px; color:var(--teal); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }.hero h1, h2, h3, p { margin-top:0; }.hero h1 { margin-bottom:18px; font-size:clamp(42px,5vw,74px); line-height:1.02; letter-spacing:0; max-width:680px; }.lede { max-width:590px; font-size:18px; color:var(--muted); }.hero-actions { display:flex; gap:22px; align-items:center; margin-top:27px; }.primary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 16px; background:var(--blue); color:#fff; border:1px solid var(--blue); border-radius:6px; font-weight:720; }.primary-button:hover { background:var(--teal); border-color:var(--teal); }.text-button { color:var(--text); font-weight:700; }.text-button:hover { color:var(--teal); }.text-button span { color:var(--coral); }
.hero-visual { align-self:stretch; position:relative; min-height:360px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface-alt); }.hero-visual img { position:absolute; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }:root[data-theme="dark"] .hero-visual img{mix-blend-mode:screen;opacity:.86}
.visual-caption { position:absolute; left:18px; bottom:15px; display:flex; align-items:center; gap:8px; z-index:1; font-size:12px; color:var(--text); background:color-mix(in srgb,var(--surface) 84%,transparent); padding:6px 9px; border-radius:4px; }.visual-caption span{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.signal-strip { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }.signal-strip div { min-height:100px; display:flex; flex-direction:column; justify-content:center; padding:16px 0; }.signal-strip div+div{padding-left:28px;border-left:1px solid var(--line)}.signal-strip strong{font-size:26px;letter-spacing:0}.signal-strip span{font-size:13px;color:var(--muted)}
.section { padding:82px 0; border-bottom:1px solid var(--line); }.section-heading { display:flex; justify-content:space-between; gap:42px; align-items:end; margin-bottom:31px; }.section-heading h2, .split-section h2, .lab-section h2 { margin:0; font-size:clamp(28px,3.2vw,46px); line-height:1.08; }.section-heading > p { max-width:370px; margin:0; color:var(--muted); }
.domain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.domain-card { min-height:230px; display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:7px; background:var(--surface); transition:transform .16s ease, box-shadow .16s ease; }.domain-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.domain-card.network{border-top-color:var(--teal)}.domain-card.gpu{border-top-color:var(--coral)}.domain-card.platform{border-top-color:#8067cf}.domain-card.infra{border-top-color:#597086}.domain-card.labs{border-top-color:#c5961a}.card-index{font-size:12px;color:var(--muted)}.domain-card h3{margin:25px 0 8px;font-size:20px}.domain-card p{color:var(--muted);font-size:14px}.card-link{margin-top:auto;color:var(--text);font-size:13px;font-weight:700}.domain-card:hover .card-link{color:var(--teal)}
.concept-layout { display:grid; grid-template-columns:1.04fr .96fr; gap:12px; }.feature-panel,.command-panel { border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:28px; }.panel-tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-weight:780}.feature-panel h3{font-size:27px;margin-bottom:18px}.flow-list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:11px}.flow-list li{display:flex;align-items:center;gap:12px;color:var(--muted)}.flow-list span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--surface-alt);color:var(--blue);font-size:11px;font-weight:750}.panel-top{display:flex;justify-content:space-between}.panel-top span{color:var(--coral);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.command-panel pre{margin:24px 0 15px;padding:18px;background:var(--navy);color:#dff5ff;border-radius:6px;font-size:13px;line-height:1.7;overflow:auto}.command-panel p{margin:0;color:var(--muted);font-size:14px}
.topic-row { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.topic-row.three{grid-template-columns:repeat(3,1fr)}.topic-row article{min-height:183px;padding:18px;border-right:1px solid var(--line);background:var(--surface)}.topic-row article:first-child{border-left:1px solid var(--line)}.topic-row span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--teal);font-size:12px}.topic-row h3{margin:22px 0 8px;font-size:18px}.topic-row p{color:var(--muted);font-size:14px}
.split-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }.stack-list { display:grid; gap:0; border-top:1px solid var(--line); }.stack-list div { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }.stack-list span{color:var(--coral);font-size:12px;font-weight:800}.stack-list p{margin:0;color:var(--muted)}.stack-list strong{color:var(--text)}.pill-list{display:flex;flex-wrap:wrap;gap:9px;padding-top:33px}.pill-list span{padding:9px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px}.lab-section{display:flex;justify-content:space-between;gap:40px;align-items:end;border-bottom:0}.lab-section > div{max-width:700px}.lab-section > div > p:last-child{margin:15px 0 0;color:var(--muted);font-size:17px}
.search-dialog { width:min(630px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); padding:20px; box-shadow:var(--shadow); }.search-dialog::backdrop{background:rgba(7,21,31,.56);backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-header h2{margin:0;font-size:20px}.search-dialog input{width:100%;margin:18px 0 10px;padding:13px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);outline:none}.search-dialog input:focus{border-color:var(--teal)}.search-results{display:grid;gap:4px}.search-result{display:block;padding:11px;border-radius:5px}.search-result:hover{background:var(--surface-alt)}.search-result strong{display:block;font-size:14px}.search-result span{font-size:13px;color:var(--muted)}.empty-search{padding:12px;color:var(--muted);font-size:14px}
@media (max-width:940px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:12;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease;width:min(300px,86vw);box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.menu-button{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);}.topbar{justify-content:space-between}.search-trigger{margin:0;width:min(420px,55vw)}.hero{grid-template-columns:1fr;padding-top:44px}.hero-visual{min-height:290px}.domain-grid{grid-template-columns:repeat(2,1fr)}.topic-row{grid-template-columns:repeat(2,1fr)}.topic-row.three{grid-template-columns:repeat(2,1fr)}.split-section{grid-template-columns:1fr;gap:24px}}
@media (max-width:620px){.content{padding:0 18px 44px}.topbar{padding:0 18px;height:62px}.search-trigger{width:auto;flex:1}.search-trigger kbd{display:none}.hero{min-height:auto;padding:40px 0 34px;gap:26px}.hero h1{font-size:42px}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-visual{min-height:220px}.signal-strip{grid-template-columns:1fr}.signal-strip div{min-height:64px}.signal-strip div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.section{padding:58px 0}.section-heading{display:block;margin-bottom:24px}.section-heading>p{margin-top:14px}.domain-grid,.concept-layout,.topic-row,.topic-row.three{grid-template-columns:1fr}.domain-card{min-height:190px}.topic-row article,.topic-row article:first-child{border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.lab-section{display:block}.lab-section .primary-button{margin-top:24px}.feature-panel,.command-panel{padding:22px}}