:root{ --bg:#0f1115; --surface:#131621; --text:#e6e6e6; --muted:#a8b0c0; --primary:#22c55e; --primary-600:#16a34a; --border:#202535; --focus:#60a5fa; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.container{ max-width:1100px; margin:0 auto; padding:1rem; }
.site-header{ position:sticky; top:0; z-index:20; background:color-mix(in oklab, var(--bg) 85%, black 15%); border-bottom:1px solid var(--border); backdrop-filter: blur(6px) saturate(120%); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 1rem; }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); font-weight:600; letter-spacing:.2px; }
.nav-links a{ color:var(--text); text-decoration:none; margin-left:1rem; opacity:.9; }
.nav-links a:hover{ opacity:1; }
.site-footer{ border-top:1px solid var(--border); margin-top:2rem; padding:1rem; text-align:center; color:var(--muted); }

.hero{ text-align:center; padding:2rem 1rem; }
.hero h1{ margin:0 0 .5rem; font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem); }
.hero p{ color:var(--muted); margin:0 auto 1rem; max-width:60ch; }
.cta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:center; margin-top:1rem; }

.button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border); background:linear-gradient(180deg, #171922, #11131a); color:var(--text); text-decoration:none; font-weight:600; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition:transform .08s ease, background .2s ease, border-color .2s ease; }
.button:hover{ transform:translateY(-1px); border-color:#2a3044; }
.button:active{ transform:translateY(0); }
.button.primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 92%, white 8%), var(--primary-600)); border-color: transparent; color:#08130b; }
.button.primary:hover{ filter:saturate(1.05) brightness(1.02); }

.select{ appearance:none; background:linear-gradient(180deg, #171922, #10121a); color:var(--text); border:1px solid var(--border); padding:.55rem .9rem; border-radius:10px; }

.versions-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
@media (max-width: 900px){ .versions-grid{ grid-template-columns: 1fr; } }
.card{ border:1px solid var(--border); border-radius:14px; padding:1rem; background: linear-gradient(180deg, #141720, #0f1219); }
.card h2{ margin:.2rem 0 .5rem; font-size:1.25rem; }
.card p{ margin:.2rem 0 1rem; color:var(--muted); }

.note{ color:var(--muted); background: #0c0f16; border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; }

.prose h1, .prose h2, .prose h3{ margin-top:1.25rem; margin-bottom:.5rem; }
.prose p, .prose li{ color: var(--text); line-height:1.6; }
.prose ul{ padding-left:1rem; }

.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Focus styles */
:where(a, button, select, input):focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:8px; }

/* Small quality-of-life */
img{ border-radius:8px; }