:root{--bg:#071019;--panel:#0f1b28;--panel2:#0b1622;--text:#f7fafc;--muted:#c2cfdd;--line:#2b4058;--green:#78e5bd;--blue:#7fb1ff;--amber:#f7c873;--shadow:0 24px 80px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;background:radial-gradient(1000px 580px at 92% -5%,#18335a,transparent 55%),radial-gradient(680px 420px at 6% 12%,rgba(83,226,177,.08),transparent 62%),var(--bg)}a{color:inherit;text-decoration:none}.wrap{max-width:1220px;margin:auto;padding:0 24px}nav{height:76px;border-bottom:1px solid #203044;background:rgba(7,16,25,.72);backdrop-filter:blur(16px)}.navin{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:850;font-size:20px;letter-spacing:-.03em}.brand span{color:var(--green)}.back{color:var(--blue);font-size:14px}.page{padding:58px 0 92px}.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}.map{position:sticky;top:24px;border:1px solid var(--line);border-radius:20px;padding:18px;background:rgba(12,23,34,.88);box-shadow:var(--shadow)}.map h2{font-size:16px;margin:0 0 14px}.map-group{border-top:1px solid rgba(255,255,255,.08);padding:11px 0 0;margin-top:10px}.map-group:first-of-type{border-top:0;margin-top:0}.map-group strong{display:block;font-size:12px;color:#e7eff8;margin-bottom:6px}.map a{display:block;color:var(--muted);font-size:12px;padding:3px 0}.map a:hover,.map a.active{color:var(--green)}.eyebrow{color:var(--green);font-weight:850;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.hero{padding:42px 0 34px;border-bottom:1px solid rgba(255,255,255,.08)}h1{font-size:clamp(44px,7vw,82px);line-height:.98;letter-spacing:-.065em;margin:18px 0 16px;max-width:920px}.lede{font-size:20px;color:var(--muted);max-width:820px;margin:0}.content{min-width:0}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.card{border:1px solid var(--line);border-radius:22px;padding:26px;background:linear-gradient(180deg,#102032,#0b1622);box-shadow:0 12px 40px rgba(0,0,0,.14)}.wide{grid-column:1/-1}.card h2{font-size:26px;line-height:1.1;letter-spacing:-.035em;margin:0 0 12px}.card h3{font-size:16px;margin:22px 0 6px;color:#e7eff8}.muted{color:var(--muted)}.note{border-left:3px solid var(--green);padding:12px 0 12px 16px;color:#dbe7f4;background:linear-gradient(90deg,rgba(120,229,189,.06),transparent);margin-top:18px}.sample-box{border:1px solid #38516d;border-radius:15px;background:#07111a;padding:18px;margin-top:16px}.sample-box pre{white-space:pre-wrap;margin:0;color:#dce8f7;font:500 13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.step{padding:14px;border:1px solid #38516d;border-radius:14px;background:#07111a}.step b{display:block;color:#fff;font-size:13px;margin-bottom:5px}.step span{color:var(--muted);font-size:13px}.analogy{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:center}.analogy img{width:100%;display:block;border-radius:16px;border:1px solid #38516d;background:#07111a}.analogy p{margin:8px 0;color:var(--muted)}.video-card video{width:100%;display:block;border-radius:15px;background:#050b12;margin-top:16px;aspect-ratio:16/9}.caption{color:var(--muted);font-size:13px;margin:12px 0 0}.takeaway{background:linear-gradient(135deg,rgba(127,177,255,.14),rgba(120,229,189,.1));border-color:#4d6d8d}.takeaway p{font-size:20px;line-height:1.4;color:#fff;margin:0}.footer{color:#8294a8;font-size:13px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}@media(max-width:900px){.layout{grid-template-columns:1fr}.map{position:relative;top:auto}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.map-group{margin:0}.analogy{grid-template-columns:1fr 240px}}@media(max-width:680px){.page{padding-top:32px}.cards{grid-template-columns:1fr}.wide{grid-column:auto}.steps{grid-template-columns:1fr}.map-grid{grid-template-columns:repeat(2,1fr)}.analogy{grid-template-columns:1fr}.analogy img{max-width:320px}.hero{padding-top:28px}}