styles.css

:root{color-scheme:dark;--bg:#050b13;--bg2:#081421;--panel:#0a1928f2;--text:#edf7ff;--muted:#b4c5d4;--faint:#8198ab;--line:#244258;--cyan:#63e7ff;--magenta:#ff79d8;--yellow:#ffd77d;--content:790px;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:Consolas,"Liberation Mono",monospace}html[data-theme=light]{color-scheme:light;--bg:#edf5f8;--bg2:#fff;--panel:#f8fcfdf5;--text:#0a1b27;--muted:#3f5667;--faint:#627988;--line:#bfd0da;--cyan:#006f86;--magenta:#9d176f;--yellow:#775800}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:radial-gradient(circle at 70% -10%,#1db9df29,transparent 32rem),linear-gradient(var(--bg2),var(--bg));color:var(--text);font:17px/1.72 var(--sans)}a{color:var(--cyan)}.skip{position:fixed;top:-5rem;left:1rem;z-index:100;background:var(--cyan);color:#001117;padding:.7rem 1rem}.skip:focus{top:1rem}#progress{position:fixed;z-index:100;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--magenta),var(--cyan));box-shadow:0 0 14px var(--cyan)}header{position:sticky;z-index:40;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:.65rem .8rem;background:#050b13e8;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}html[data-theme=light] header{background:#edf5f8e8}button{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}header button{width:42px;height:42px}.brand{display:flex;flex-direction:column;color:var(--text);text-decoration:none;line-height:1;letter-spacing:.12em}.brand b{font-size:.78rem}.brand small{margin-top:.3rem;color:var(--faint);font-size:.55rem}#nav{position:fixed;z-index:60;inset:0 auto 0 0;width:min(88vw,340px);padding:1.1rem;background:var(--panel);border-right:1px solid var(--line);transform:translateX(-105%);transition:.2s;overflow:auto}#nav.open{transform:none}#shade{position:fixed;z-index:50;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#000b;opacity:0;pointer-events:none}#shade.open{opacity:1;pointer-events:auto}.navHead{display:flex;align-items:center;justify-content:space-between;color:var(--cyan);font:700 .75rem var(--mono);letter-spacing:.12em}.navHead button{width:40px;height:40px;font-size:1.5rem}input{width:100%;height:44px;margin-top:1rem;padding:0 .8rem;border:1px solid var(--line);border-radius:10px;background:#0002;color:var(--text);font:inherit}#toc{margin-top:1rem}#toc a{display:block;padding:.45rem .6rem;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.84rem;line-height:1.35}#toc .h1{margin-top:.45rem;color:var(--text);font-weight:800}#toc .h2{padding-left:1.1rem}#toc .h3{padding-left:1.8rem;font-size:.78rem}#toc a:hover,#toc a.active{color:var(--cyan);border-color:var(--cyan);background:#63e7ff10}.hero{position:relative;min-height:calc(100svh - 64px);display:grid;align-content:center;padding:4rem 1.2rem;overflow:hidden;border-bottom:1px solid var(--line)}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#24425844 1px,transparent 1px),linear-gradient(90deg,#24425844 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(#000,transparent)}.eyebrow{color:var(--cyan);font:700 .72rem var(--mono);letter-spacing:.14em}.hero h1{max-width:850px;margin:.8rem 0 1rem;font-size:clamp(2.7rem,12vw,6.5rem);line-height:.94;letter-spacing:-.06em}.hero h1 span{display:block;color:transparent;-webkit-text-stroke:1px var(--cyan)}.hero>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:1.15rem}.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}.actions a{padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);text-decoration:none;font-weight:800}.actions a:first-child{background:var(--cyan);color:#001218}.map{display:grid;grid-template-columns:1fr 1fr;gap:1px;max-width:650px;margin-top:2.5rem;border:1px solid var(--line);background:var(--line)}.map span{padding:.75rem;background:var(--panel);color:var(--muted);font-size:.8rem}.map b{margin-right:.5rem;color:var(--magenta);font-family:var(--mono)}.tools{position:sticky;z-index:30;top:64px;display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:#050b13e8;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}html[data-theme=light] .tools{background:#edf5f8e8}.tools input{max-width:600px;margin:0}.tools button{padding:.55rem}.tools span{color:var(--faint);font-size:.8rem;white-space:nowrap}article{width:min(calc(100% - 2rem),var(--content));margin:auto;padding:4rem 0 6rem}article h1,article h2,article h3{scroll-margin-top:125px}article h1{margin:5rem 0 1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:clamp(2rem,8vw,3.6rem);line-height:1.05;letter-spacing:-.045em}article h1:first-child{display:none}article h1:before{content:"//";display:block;color:var(--magenta);font:700 .78rem var(--mono)}article h2{margin:3rem 0 1rem;font-size:clamp(1.4rem,5vw,2rem);line-height:1.2}article h2:before{content:"◇";margin-right:.55rem;color:var(--cyan)}article h3{margin:2rem 0 .6rem;color:var(--cyan);font-size:1.1rem}article p,article li{color:var(--muted)}article strong{color:var(--text)}article ul,article ol{padding-left:1.25rem}article li{margin:.28rem 0}article li::marker{color:var(--magenta)}blockquote{margin:1.5rem 0;padding:1rem;border:1px solid var(--line);border-left:4px solid var(--magenta);background:#ff79d80c}blockquote p{margin:0;color:var(--text)}pre{overflow:auto;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#02070c;color:#d8f6ff;font:500 .78rem/1.5 var(--mono)}code{font-family:var(--mono)}hr{height:1px;margin:4rem 0;border:0;background:linear-gradient(90deg,transparent,var(--line),transparent)}mark{background:var(--yellow);color:#151000}footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem 1rem 4rem;border-top:1px solid var(--line);color:var(--faint);font-size:.82rem}:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}@media(min-width:900px){header{padding:0 1.5rem}#menu,#close,#shade{display:none}body{display:grid;grid-template-columns:300px 1fr;grid-template-rows:64px auto}header{grid-column:1/-1}#nav{position:sticky;top:64px;z-index:20;grid-column:1;grid-row:2;width:300px;height:calc(100vh - 64px);transform:none}main{grid-column:2;grid-row:2;min-width:0}.hero{min-height:760px;padding:7rem 5vw}.map{grid-template-columns:repeat(4,1fr)}.map span{display:grid}.tools{padding-left:max(2rem,calc((100% - var(--content))/2));padding-right:max(2rem,calc((100% - var(--content))/2))}}@media(max-width:480px){body{font-size:16px}.actions a{width:100%;text-align:center}.tools span{display:none}article{width:calc(100% - 1.3rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{header,#nav,#shade,.tools,#progress,.actions{display:none!important}body{display:block;background:#fff;color:#000;font-size:11pt}.hero{min-height:auto;padding:1rem 0}.hero:before{display:none}article{width:100%;padding:0}article p,article li{color:#222}article h1{break-before:page}}