:root { color-scheme: dark; --bg:#101117; --panel:#181b25; --text:#e9edf5; --muted:#b0bace; --line:#32394b; --cyan:#70e2f3; --violet:#b59cff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--cyan); text-underline-offset:.2em; overflow-wrap:anywhere; }
a:hover { color:var(--violet); }
a:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; border-radius:3px; }
.skip { position:absolute; left:1rem; top:-8rem; z-index:5; background:var(--panel); padding:1rem; }
.skip:focus { top:1rem; }
.nav { position:sticky; top:0; z-index:2; background:#101117f5; border-bottom:1px solid var(--line); padding:.8rem max(1rem,calc((100% - 1100px)/2)); display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; backdrop-filter:blur(8px); }
.brand { color:var(--text); text-decoration:none; font-weight:750; display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img { width:36px; height:36px; }
.nav>a:not(.brand) { font-size:.9rem; }
main { max-width:1100px; margin:auto; padding:2.5rem 1.4rem 4rem; }
.hero { padding:1rem 0 2.6rem; }
.eyebrow { margin:0 0 .5rem; color:var(--cyan); font-size:.86rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.hero h1 { font-size:clamp(2.5rem,7vw,4.8rem); line-height:1.08; letter-spacing:-.04em; margin:.4rem 0 1rem; }
.hero .lead { max-width:850px; color:var(--muted); font-size:1.2rem; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0 1rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.75rem 1.2rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); text-decoration:none; font-weight:650; }
.button.primary { background:var(--cyan); color:#0b1d28; border-color:var(--cyan); }
.button:hover { border-color:var(--violet); color:var(--text); }
.button.primary:hover { background:#a6eff9; color:#0b1d28; }
.small { font-size:.9rem; color:var(--muted); }
.credit { border:1px solid var(--line); border-left:4px solid var(--violet); border-radius:10px; padding:1.1rem 1.4rem; background:var(--panel); margin:0 0 2.5rem; }
.credit p { margin:.4rem 0; }
article { border-top:1px solid var(--line); padding-top:1.5rem; }
article h1 { font-size:2.2rem; }
article h2 { font-size:1.8rem; margin:3rem 0 1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); line-height:1.3; }
article h3 { font-size:1.25rem; color:var(--violet); margin:1.9rem 0 .5rem; }
article p, article li { max-width:100%; }
article ul, article ol { padding-left:1.7rem; }
article li { padding-left:.2rem; margin:.3rem 0; }
article img { display:block; max-width:100%; height:auto; margin:1.5rem auto; border:1px solid var(--line); border-radius:12px; }
article table { display:block; width:100%; max-width:100%; border-collapse:collapse; overflow-x:auto; margin:1.2rem 0; font-size:.94rem; }
article th, article td { border:1px solid var(--line); text-align:left; padding:.75rem .9rem; min-width:150px; vertical-align:top; }
article th { background:#22283a; }
article tr:nth-child(even) { background:#171b25; }
article pre { overflow:auto; padding:1.1rem; background:#080b11; border:1px solid var(--line); border-radius:8px; font-size:.88rem; }
article code { font-family:ui-monospace,Consolas,monospace; }
article blockquote { margin:1rem 0; padding:.2rem 1rem; border-left:3px solid var(--cyan); color:var(--muted); }
article .anchor { display:none; }
footer { border-top:1px solid var(--line); padding:2rem max(1.4rem,calc((100% - 1052px)/2)); color:var(--muted); }
@media(max-width:600px) { body { font-size:16px; } main { padding:1.5rem 1rem 3rem; } .nav { position:static; gap:.8rem; } .nav .brand { width:100%; } .actions .button { width:100%; } .credit { padding:.8rem 1rem; } article h2 { font-size:1.5rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }