:root{
  --bg:#0B0E1A; --bg2:#10142a; --panel:#14182b; --panel2:#1a1f36; --line:#2b3150; --slate:#8a93ad; --text:#E8EEF8;
  --purple:#9E5CEB; --purple-deep:#4a2a7a; --purple-mid:#6b3fb0; --cyan:#19E3FF; --yellow:#FFD23F; --green:#3DDC84; --magenta:#FF2A9D; --red:#F52C4E;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 var(--sans);min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(1100px 520px at 50% -140px,rgba(158,92,235,.20),transparent 70%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--purple)}
main{flex:1;width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--mono);line-height:1.15;margin:0}
h1{font-size:clamp(34px,7vw,64px);letter-spacing:.06em;text-transform:uppercase}
h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
p{margin:.8em 0}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--purple)}
.lede{font-size:clamp(18px,2.2vw,21px);color:#c9d2e6;max-width:44em}
.btn{display:inline-block;font:700 14px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:15px 24px;border-radius:8px;color:#fff;background:var(--purple-deep);border:1px solid var(--purple);transition:background .12s,border-color .12s,transform .12s}
.btn:hover{background:var(--purple-mid);border-color:#c49bff;color:#fff;transform:translateY(-1px)}
.btn.ghost{background:rgba(20,24,43,.7);border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--purple);background:var(--panel2)}
.btn.sm{padding:9px 14px;font-size:12px}
.btn::after{content:""}
.btn.go::after{content:"  >"}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,14,26,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .in{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.brand{font:700 19px/1 var(--mono);letter-spacing:.16em;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.brand span{color:var(--purple)}
.site-nav{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
.site-nav a{font:600 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#b9c2da;text-decoration:none;padding:9px 12px;border-radius:6px}
.site-nav a:hover{background:var(--panel2);color:#fff}
.site-nav a[aria-current="page"]{background:var(--purple-deep);color:#fff}
.hdr-right{display:flex;align-items:center;gap:14px}
.hdr-right form{margin:0}
.social{display:flex;gap:6px}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);color:#b9c2da;background:var(--panel)}
.social a:hover{color:#fff;border-color:var(--purple);background:var(--purple-deep)}
.social svg{width:17px;height:17px;fill:currentColor}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero) right 35% center/cover no-repeat;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,rgba(11,14,26,.86) 42%,rgba(11,14,26,.25) 100%),linear-gradient(0deg,var(--bg),transparent 30%)}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(64px,12vw,140px);padding-bottom:clamp(64px,10vw,120px)}
.hero h1{margin:.5em 0 .3em;text-shadow:0 0 38px rgba(158,92,235,.55)}
.hero .tag{font:500 clamp(15px,2vw,19px)/1.4 var(--mono);color:var(--cyan);letter-spacing:.04em;margin:0 0 22px}
.hero .lede{max-width:32em}
@media(max-width:700px){.hero::after{background:linear-gradient(0deg,var(--bg) 20%,rgba(11,14,26,.8))}}
section.block{padding:clamp(48px,8vw,88px) 0;border-bottom:1px solid rgba(43,49,80,.6)}
section.block>.wrap>h2{margin:.5em 0 .6em}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.card h3{margin-bottom:10px;color:var(--text)}
.card p{margin:0;color:#b9c2da;font-size:16px}
.card .n{font:700 13px var(--mono);color:var(--purple);letter-spacing:.2em;margin-bottom:12px}
.numbers{display:flex;flex-wrap:wrap;gap:12px 48px;margin:36px 0 0}
.numbers div{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.numbers b{display:block;font-size:clamp(30px,5vw,44px);letter-spacing:0;color:var(--yellow);line-height:1.1}
.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000;box-shadow:0 18px 60px rgba(0,0,0,.5),0 0 0 1px rgba(158,92,235,.12)}
.shot img{width:100%}
figure{margin:0}
figcaption{font:500 12px/1.4 var(--mono);color:var(--slate);letter-spacing:.06em;margin-top:10px}
.showcase{display:grid;gap:36px;grid-template-columns:1fr;align-items:center;margin:clamp(30px,5vw,56px) 0}
.showcase .txt p{color:#b9c2da}
@media(min-width:860px){.showcase{grid-template-columns:5fr 7fr}.showcase.flip{grid-template-columns:7fr 5fr}.showcase.flip .txt{order:2}}
.pair{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.pair{grid-template-columns:1fr 1fr}}
.closing{text-align:center}
.closing p{margin-left:auto;margin-right:auto;color:#b9c2da;max-width:36em}
.closing .btns{justify-content:center}
.page-head{padding:clamp(44px,7vw,80px) 0 28px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(30px,5.5vw,48px);margin:.4em 0 .4em}
.docs{display:grid;gap:40px;grid-template-columns:1fr;padding:40px 0 72px}
@media(min-width:900px){.docs{grid-template-columns:220px 1fr}}
.toc{align-self:start;position:sticky;top:76px;display:none}
@media(min-width:900px){.toc{display:block}}
.toc a{display:block;font:500 13px/1.3 var(--mono);color:var(--slate);text-decoration:none;padding:7px 10px;border-left:2px solid var(--line)}
.toc a:hover{color:#fff;border-left-color:var(--purple)}
.doc-section{padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid rgba(43,49,80,.6);scroll-margin-top:80px}
.doc-section:last-child{border-bottom:0}
.doc-section h2{font-size:22px;margin-bottom:.5em;color:var(--yellow)}
.doc-section p{color:#cfd7ea}
.doc-section strong{color:#fff}
.doc-section em{color:var(--cyan);font-style:normal}
.rulecards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));padding:40px 0 72px}
.rulecard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.rulecard h2{font-size:17px;color:var(--yellow);margin-bottom:12px}
.rulecard ul{list-style:none;margin:0;padding:0}
.rulecard li{position:relative;padding:7px 0 7px 22px;color:#cfd7ea;font-size:16px;border-top:1px solid rgba(43,49,80,.55)}
.rulecard li:first-child{border-top:0}
.rulecard li::before{content:">";position:absolute;left:0;color:var(--purple);font:700 14px var(--mono);top:9px}
.more{padding:0 0 72px;text-align:center}
.credits{margin:36px 0 72px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.credits div{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:16px;padding:16px 22px;border-top:1px solid var(--line)}
.credits div:first-child{border-top:0}
.credits dt{font:600 12px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
.credits dd{margin:0;color:#cfd7ea}
.dl-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:24px 0}
.dlcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;transition:border-color .12s}
.dlcard:hover{border-color:var(--purple)}
.dlcard>a{display:block;text-decoration:none;color:inherit}
.dlcard .plat{font:700 16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.dlcard .blurb{color:#b9c2da;font-size:14px;margin:8px 0 16px;min-height:44px}
.dlcard .meta{display:flex;justify-content:space-between;align-items:center}
.dlcard .dl{font:700 12px var(--mono);letter-spacing:.14em;background:var(--purple-deep);border:1px solid var(--purple);color:#fff;padding:8px 12px;border-radius:6px}
.dlcard .size{font:500 13px var(--mono);color:var(--slate)}
.dlcard .sum{margin-top:12px;font:11px var(--mono);color:var(--slate);word-break:break-all}
.dlcard .sum code{color:var(--slate);background:none;border:0;padding:0}
.rec-tag{display:none;position:absolute;top:-10px;left:16px;background:var(--purple);color:#fff;font:700 10px var(--mono);letter-spacing:.14em;padding:4px 10px;border-radius:5px}
.dlcard.recommended{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),0 12px 40px rgba(158,92,235,.18)}
.dlcard.recommended .rec-tag{display:block}
#os-pick{display:none;margin:22px 0;padding:20px 22px;background:var(--panel);border:1px solid var(--purple);border-radius:10px}
#os-pick .btn{margin-top:12px}
.notice{margin:26px 0;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:8px;background:var(--panel);color:#cfd7ea}
.older{border-collapse:collapse;width:100%;font-size:15px}
.older td{padding:10px 12px;border-top:1px solid var(--line)}
.older a{margin-right:4px}
.older .archived,.older .note{color:var(--slate)}
code,kbd{font-family:var(--mono);background:#000;padding:1px 6px;border:1px solid var(--line);border-radius:4px;color:var(--green);font-size:.88em}
.site-footer{border-top:1px solid var(--line);background:#080b16;color:var(--slate);font-size:14px;margin-top:auto}
.site-footer .in{max-width:1040px;margin:0 auto;padding:30px 20px;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.site-footer p{margin:0}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:#b9c2da;text-decoration:none;font:500 13px var(--mono);letter-spacing:.06em}
.foot-links a:hover{color:#fff}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:24px}
.center h1{margin-bottom:.3em}
.pitch{color:#b9c2da}
