:root{
  --surface:#121417;--surface-raised:#1c1f23;--line:#2a2e34;--ink:#f2f1ec;--ink-muted:#8a9099;
  --level-orange:#ff6a1f;--on-level-orange:#121417;--level-orange-text:#ff6a1f;--level-orange-soft:#3a1c0c;--meter-empty:#8a9099;
  --stage-grid:#5c6168;--figure-far:#44484e;
  --font-display:Anton,Impact,"Arial Narrow",sans-serif;--font-sans:Barlow,"Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s16:64px;--r0:0;--rsm:2px;--rmd:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.5;
  background-image:radial-gradient(ellipse 70% 40% at 50% 18%, rgba(242,241,236,.045), transparent 70%);}
a{color:var(--level-orange-text);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
@media(min-width:720px){.wrap{padding:0 var(--s8)}}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink)}
.brand img{width:44px;height:44px;border-radius:50%}
.brand b{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.01em;line-height:1}
.brand b span{color:var(--level-orange-text)}
nav{display:flex;gap:var(--s4);font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
nav a{color:var(--ink-muted)}
nav a[aria-current]{color:var(--ink)}
nav a:hover{color:var(--ink);text-decoration:none}

/* type */
.kicker{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);display:flex;gap:var(--s2);align-items:center}
.kicker::before{content:"";width:8px;height:8px;background:var(--level-orange);display:inline-block}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;line-height:.95;text-transform:uppercase}
h1{font-size:clamp(56px,11vw,120px);letter-spacing:0}
h2{font-size:clamp(36px,6vw,64px)}
h3{font-size:28px;line-height:1.05}
.orange{color:var(--level-orange-text)}
.muted{color:var(--ink-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
p{margin:0 0 var(--s4)}
.lede{font-size:20px;line-height:1.45;max-width:560px}

/* meter */
.meter{display:inline-flex;gap:var(--s1)}
.meter i{width:26px;height:16px;border-radius:var(--r0);background:var(--meter-empty);opacity:.45}
.meter i.on{background:var(--level-orange);opacity:1}
.meter.lg i{width:36px;height:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--level-orange);color:var(--on-level-orange);font-family:var(--font-display);font-size:20px;letter-spacing:.02em;text-transform:uppercase;padding:14px 24px;border-radius:var(--rsm);border:0;cursor:pointer;line-height:1}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink-muted)}

/* hero */
.hero{display:grid;gap:var(--s8);align-items:center;padding:var(--s8) 0 var(--s16)}
@media(min-width:900px){.hero{grid-template-columns:1.05fr 1fr;padding-top:var(--s16)}}
.hero-art{position:relative;border-radius:var(--rmd);overflow:hidden;border:1px solid var(--line)}
.hero-art img{width:100%}
.hero-art .tag{position:absolute;left:var(--s4);top:var(--s4)}
.cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* sections */
section{padding:var(--s16) 0;border-top:1px solid var(--line)}
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s8)}

/* level grid */
.levels{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.levels{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.levels{grid-template-columns:repeat(5,1fr)}}
.lvl{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--rmd);overflow:hidden;color:var(--ink);display:block}
.lvl:hover{text-decoration:none;border-color:var(--ink-muted)}
.lvl img{aspect-ratio:810/600;object-fit:cover;width:100%}
.lvl .b{padding:var(--s3) var(--s4) var(--s4);display:grid;gap:6px}
.lvl .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--ink-muted)}
.lvl .t{font-family:var(--font-display);font-size:20px;line-height:1.05;text-transform:uppercase}
.lvl .c{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted)}

/* cards */
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--rmd);padding:var(--s6)}
.grid2{display:grid;gap:var(--s4)}
@media(min-width:800px){.grid2{grid-template-columns:1fr 1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s16);color:var(--ink-muted);font-size:14px}
footer .cols{display:grid;gap:var(--s6)}
@media(min-width:800px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer a{color:var(--ink-muted)}
footer a:hover{color:var(--ink)}
.social{display:flex;gap:var(--s4);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.fine{font-size:13px;line-height:1.5}

/* quiz */
.quiz{display:grid;gap:var(--s4)}
.opt{display:grid;grid-template-columns:120px 1fr auto;gap:var(--s4);align-items:center;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--rmd);padding:var(--s3);cursor:pointer;text-align:left;color:var(--ink);font:inherit;width:100%}
.opt img{width:120px;aspect-ratio:810/600;object-fit:cover;border-radius:var(--rsm)}
.opt:hover,.opt:focus-visible{border-color:var(--ink-muted);outline:none}
.opt.sel{border-color:var(--level-orange)}
.opt .t{font-family:var(--font-display);font-size:22px;text-transform:uppercase;line-height:1.05}
.opt .d{color:var(--ink-muted);font-size:15px}
.opt .n{font-family:var(--font-mono);font-size:14px;color:var(--ink-muted);letter-spacing:.12em}
@media(max-width:560px){.opt{grid-template-columns:88px 1fr}.opt .n{display:none}.opt img{width:88px}}
.result{display:none;margin-top:var(--s8)}
.result.show{display:block}
.big{font-family:var(--font-display);font-size:clamp(64px,14vw,140px);line-height:.9;text-transform:uppercase}
form.sub{display:grid;gap:var(--s3);max-width:520px;margin-top:var(--s6)}
form.sub input{font:inherit;font-size:17px;padding:14px 16px;border-radius:var(--rsm);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
form.sub input:focus{outline:2px solid var(--level-orange);outline-offset:0;border-color:transparent}
.ok{display:none;background:var(--level-orange-soft);color:var(--ink);padding:var(--s4);border-radius:var(--rsm);margin-top:var(--s4)}

/* gear */
.gear{display:grid;gap:var(--s4)}
.g{display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--rmd);padding:var(--s4) var(--s6);align-items:start}
.g .lv{font-family:var(--font-display);font-size:40px;line-height:1;color:var(--level-orange-text);min-width:92px}
.g .lv small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--ink-muted);margin-bottom:2px}
.g ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.g li{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:var(--s2)}
.g li:last-child{border:0}
.g li a{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.note{font-size:14px;color:var(--ink-muted)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--s4);top:var(--s4);background:var(--level-orange);color:var(--on-level-orange);padding:8px 12px;z-index:9}
/* small screens: compact header */
@media(max-width:640px){
  .top{flex-wrap:wrap;row-gap:var(--s3)}
  .brand b{font-size:18px}
  nav{width:100%;gap:var(--s4);font-size:11px;letter-spacing:.14em;border-top:1px solid var(--line);padding-top:var(--s3)}
  nav a{white-space:nowrap}
  .hero-art .tag{font-size:10px}
}
.hero>div,.card,.opt>span{min-width:0}
.meter{max-width:100%}
@media(max-width:640px){.meter.lg{display:flex;width:100%}.meter.lg i{flex:1 1 0;width:auto;height:18px}.big{font-size:clamp(56px,20vw,96px)}}
/* library */
.lib{display:grid;gap:var(--s8)}
.v{display:grid;gap:var(--s4)}
@media(min-width:900px){.v{grid-template-columns:1.4fr 1fr;align-items:start}}
.player{position:relative;aspect-ratio:9/16;max-height:720px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--rmd);overflow:hidden;justify-self:center;width:100%;max-width:405px}
.player.wide{aspect-ratio:16/9;max-width:none;justify-self:stretch}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .soon{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s3);text-align:center;padding:var(--s6)}
.player .soon img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.6}
.player.wide .soon{background:linear-gradient(180deg,rgba(18,20,23,.2),rgba(18,20,23,.75))}
.player .soon>*{position:relative}
.ladder-nav{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0 var(--s8)}
.ladder-nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);border-radius:var(--rsm);color:var(--ink-muted)}
.ladder-nav a[aria-current]{border-color:var(--level-orange);color:var(--ink)}
.ladder-nav a:hover{text-decoration:none;color:var(--ink)}
.drops form.sub{margin-top:var(--s4)}
.drops form.sub{grid-template-columns:1fr auto;align-items:start}
.drops form.sub .note{grid-column:1/-1;margin:0}
@media(max-width:560px){.drops form.sub{grid-template-columns:1fr}}
.player .soon .btn{font-size:16px;padding:10px 18px}