
:root{
  --bg:#f7f7fb; --surface:#ffffff; --text:#1b1b2b; --muted:#5b5b73; --line:#e3e3ee;
  --accent:#5b3df5; --accent-text:#ffffff; --link:#4b2fe0;
  --glow1:rgba(124,92,255,.14); --glow2:rgba(34,211,238,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0e18; --surface:#161625; --text:#ececf7; --muted:#a3a3bd; --line:#2a2a40;
    --accent:#8b72ff; --accent-text:#0e0e18; --link:#a99aff;
    --glow1:rgba(124,92,255,.22); --glow2:rgba(34,211,238,.14);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  background-image:radial-gradient(60rem 30rem at 10% -10%,var(--glow1),transparent 60%),radial-gradient(50rem 28rem at 100% 0%,var(--glow2),transparent 60%);
  background-repeat:no-repeat;
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
.wrap{width:100%; max-width:62rem; margin:0 auto; padding:0 1rem}
a{color:var(--link); text-underline-offset:.15em}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-text); padding:.5rem 1rem; z-index:10}
.skip:focus{left:0}
.top{border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.bar{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; padding-top:.75rem; padding-bottom:.75rem}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.15rem; color:var(--text); text-decoration:none; letter-spacing:.01em}
nav{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem}
nav a{color:var(--muted); text-decoration:none; padding:.25rem 0; border-bottom:2px solid transparent}
nav a:hover{color:var(--text)}
nav a[aria-current=page]{color:var(--text); border-bottom-color:var(--accent)}
main{flex:1; padding-top:2.5rem; padding-bottom:3rem}
.hero{padding:2.5rem 0 2rem}
.eyebrow{margin:0 0 .5rem; color:var(--muted); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase}
.hero h1{font-size:clamp(2.5rem,8vw,4.25rem); line-height:1.05; margin:0 0 1rem; letter-spacing:-.02em;
  background:linear-gradient(100deg,#7c5cff,#22d3ee 55%,#34d399); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.2rem; max-width:40rem; color:var(--muted); margin:0 0 1.5rem}
.links{display:flex; flex-wrap:wrap; gap:.75rem; margin:0}
.btn{display:inline-block; background:var(--accent); color:var(--accent-text); padding:.65rem 1.1rem; border-radius:.6rem; font-weight:600; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-top:1rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:.9rem; padding:1.25rem}
.card h2{margin:0 0 .4rem; font-size:1.1rem}
.card p{margin:0; color:var(--muted)}
.doc{max-width:46rem}
.doc h1{font-size:clamp(2rem,6vw,2.75rem); line-height:1.15; margin:0 0 .25rem; letter-spacing:-.01em}
.doc .meta{color:var(--muted); margin:0 0 1.75rem}
.doc h2{font-size:1.3rem; margin:2.25rem 0 .5rem; line-height:1.3}
.doc h3{font-size:1.05rem; margin:1.5rem 0 .25rem}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:1.25rem}
.doc li{margin:.35rem 0}
code{background:var(--surface); border:1px solid var(--line); border-radius:.35rem; padding:.05rem .35rem; font-size:.92em}
.verify h1{background:none; color:var(--text); font-size:clamp(1.8rem,6vw,2.6rem)}
.verify ul{max-width:40rem; color:var(--muted); padding-left:1.25rem}
.fine{margin-top:1.5rem; color:var(--muted); font-size:.9rem}
.foot{border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; padding:1.25rem 0}
.foot p{margin:.2rem 0}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s,border-color .15s}}
@media print{.top,.foot,.skip{display:none} body{background:#fff; color:#000}}
