:root{
  color-scheme:dark;
  --bg:#060A12;
  --panel:#0E1928;
  --text:#F5F8FC;
  --muted:#A4B1C2;
  --cyan:#36D9FF;
  --violet:#7B61FF;
  --border:rgba(90,190,255,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 10% 0%,rgba(54,217,255,.10),transparent 34%),
radial-gradient(circle at 100% 10%,rgba(123,97,255,.12),transparent 34%),
var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{padding:24px 16px 48px}
main{width:min(860px,100%);margin:0 auto}
header{margin-bottom:24px;padding:22px;border:1px solid var(--border);border-radius:24px;background:rgba(14,25,40,.88);box-shadow:0 20px 60px rgba(0,0,0,.22)}
.brand{font-weight:800;letter-spacing:.08em;color:var(--cyan);font-size:.82rem;text-transform:uppercase}
h1{font-size:clamp(1.75rem,5vw,2.6rem);line-height:1.08;margin:.5rem 0 .7rem}
.meta{color:var(--muted);margin:0}
section{padding:20px 22px;margin:14px 0;border:1px solid var(--border);border-radius:20px;background:rgba(14,25,40,.72)}
h2{font-size:1.12rem;margin:0 0 .8rem;color:#fff}
p,li{line-height:1.65;color:#D9E2EC}
ul{padding-left:1.25rem}
a{color:var(--cyan)}
code{color:#D9D3FF;background:rgba(123,97,255,.10);padding:.12rem .35rem;border-radius:.35rem}
footer{color:var(--muted);text-align:center;margin-top:28px;font-size:.9rem}
.back{display:inline-block;margin-top:12px;text-decoration:none;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,rgba(54,217,255,.12),rgba(123,97,255,.12))}
@media(max-width:520px){body{padding:14px 12px 36px}header,section{padding:18px 16px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}