:root { --bg:#050d1e; --surface:#0a1428; --line:rgba(255,255,255,.11); --text:#fff; --muted:rgba(226,236,255,.7); --faint:rgba(226,236,255,.46); --blue:#6fc3f0; --yellow:#ecff43; color-scheme:dark; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(800px 500px at 80% 0,rgba(65,156,212,.12),transparent 68%),var(--bg); }
a { color:var(--blue); }
a:focus-visible, summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.site-nav { position:sticky; top:0; z-index:10; min-height:68px; padding:0 max(18px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:rgba(5,13,30,.9); backdrop-filter:blur(16px); }
.site-nav img { width:166px; display:block; }
.site-nav div { display:flex; align-items:center; gap:20px; }
.site-nav div a { color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; }
.site-nav div a:last-child { padding:10px 14px; border-radius:7px; color:#04204f; background:var(--blue); }
.crumbs { width:min(calc(100% - 36px),920px); margin:28px auto 0; color:var(--faint); font-size:11px; }
.crumbs a { color:var(--muted); text-decoration:none; }
.guide-hero { width:min(calc(100% - 36px),920px); margin:0 auto; padding:68px 0 52px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.15em; }
.guide-hero h1 { max-width:850px; margin:14px 0 0; font-size:clamp(42px,7vw,72px); line-height:1; letter-spacing:-.06em; }
.guide-hero .dek { max-width:760px; margin:23px 0 0; color:var(--muted); font-size:clamp(16px,2vw,20px); line-height:1.65; }
.guide-meta { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--faint); font-size:11px; }
.guide-layout { width:min(calc(100% - 36px),1120px); margin:0 auto; padding:56px 0 100px; display:grid; grid-template-columns:190px minmax(0,720px); justify-content:space-between; gap:70px; }
.toc { position:sticky; top:96px; align-self:start; }
.toc strong { display:block; margin-bottom:13px; color:var(--faint); font-size:9px; letter-spacing:.13em; }
.toc a { padding:7px 0; display:block; color:var(--muted); font-size:11px; line-height:1.4; text-decoration:none; }
.toc a:hover { color:var(--text); }
.guide-body { min-width:0; }
.guide-body h2 { margin:58px 0 14px; font-size:clamp(28px,4vw,39px); line-height:1.1; letter-spacing:-.045em; scroll-margin-top:90px; }
.guide-body h2:first-child { margin-top:0; }
.guide-body h3 { margin:34px 0 10px; font-size:19px; letter-spacing:-.025em; }
.guide-body p, .guide-body li { color:var(--muted); font-size:15px; line-height:1.82; }
.guide-body p { margin:0 0 20px; }
.guide-body ul, .guide-body ol { padding-left:22px; }
.guide-body li { margin:9px 0; padding-left:5px; }
.guide-body strong { color:var(--text); }
.callout { margin:30px 0; padding:22px 24px; border:1px solid rgba(65,156,212,.35); border-radius:12px; background:rgba(65,156,212,.08); }
.callout strong { display:block; margin-bottom:8px; color:var(--blue); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.callout p:last-child { margin-bottom:0; }
.formula { margin:30px 0; padding:26px; display:grid; gap:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-family:"JetBrains Mono",monospace; text-align:center; }
.formula span { padding:13px; border:1px solid var(--line); border-radius:8px; }
.formula b { padding:13px; border-radius:8px; color:#04122f; background:var(--yellow); }
.comparison { width:100%; margin:28px 0; border-collapse:collapse; font-size:13px; }
.comparison th, .comparison td { padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison th { color:var(--faint); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.comparison td { color:var(--muted); line-height:1.5; }
.guide-cta { margin-top:58px; padding:30px; border:1px solid rgba(236,255,67,.25); border-radius:16px; background:rgba(236,255,67,.055); }
.guide-cta h2 { margin:0; }
.guide-cta p { margin-top:13px; }
.guide-cta a { padding:12px 16px; display:inline-block; border-radius:8px; color:#04122f; background:var(--yellow); font-size:12px; font-weight:800; text-decoration:none; }
.related { width:min(calc(100% - 36px),1120px); margin:0 auto 70px; padding-top:40px; border-top:1px solid var(--line); }
.related h2 { font-size:25px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.related-grid a { min-height:145px; padding:20px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:rgba(255,255,255,.02); text-decoration:none; }
.related-grid a:hover { border-color:rgba(65,156,212,.4); }
.related-grid span { display:block; color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.related-grid strong { margin-top:12px; display:block; font-size:16px; line-height:1.3; }
.site-footer { padding:34px max(18px,calc((100vw - 1120px)/2)); border-top:1px solid var(--line); color:var(--faint); font-size:11px; line-height:1.7; }
.site-footer nav { margin-bottom:12px; display:flex; flex-wrap:wrap; gap:16px; }
.site-footer a { color:var(--muted); text-decoration:none; }
@media (max-width:780px) { .site-nav div a:first-child { display:none; } .guide-layout { grid-template-columns:1fr; padding-top:38px; } .toc { display:none; } .related-grid { grid-template-columns:1fr; } .comparison { font-size:11px; } .comparison th,.comparison td { padding:11px 8px; } }
@media (max-width:440px) { .site-nav img { width:145px; } .guide-hero { padding-top:50px; } .guide-layout { gap:0; } }