:root{
  --bg:#000;
  --elev:#1c1c1e;
  --elev2:#2c2c2e;
  --ink:#f5f5f7;
  --mute:#a1a1a6;
  --faint:#6e6e73;
  --line:rgba(255,255,255,.08);
  --pink:#fa243c;
  --pink-2:#ff3752;
  --rail:240px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.47;letter-spacing:-.011em;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:40;background:var(--elev);padding:.4rem .8rem;border-radius:8px}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--pink)}
.mono{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
.shell{width:min(1080px,100% - 3rem);margin-inline:auto}

.app{
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  min-height:100vh;
}
.rail{
  position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.15rem .85rem 1.2rem;
  background:#000;
  border-right:1px solid var(--line);
  z-index:20;
}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);padding:.15rem .45rem .85rem}
.wordmark svg{width:28px;height:28px;display:block;flex:none}
.wordmark b{font-weight:700;font-size:1.12rem;letter-spacing:-.035em}
.rail-nav{display:flex;flex-direction:column;gap:.15rem}
.rail-link{
  display:flex;align-items:center;gap:.7rem;
  color:var(--mute);text-decoration:none;font-weight:600;font-size:.94rem;
  padding:.55rem .7rem;border-radius:8px;
}
.rail-link svg{width:18px;height:18px;flex:none;opacity:.9}
.rail-link:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.rail-link.on,.rail-link[aria-current="page"]{color:var(--pink)}
.rail-account{
  margin-top:auto;display:flex;flex-direction:column;gap:.35rem;
  padding:.75rem .5rem 0;border-top:1px solid var(--line);
}
.rail-account a{color:var(--mute);text-decoration:none;font-weight:600;font-size:.9rem;padding:.25rem .2rem}
.rail-account a:hover{color:var(--ink)}
.nav-cta{
  background:var(--pink)!important;color:#fff!important;border-radius:980px;
  padding:.42rem .85rem!important;text-align:center;
}
.nav-form{margin:0}
.nav-form button{border:0;background:none;font:inherit;font-weight:600;color:var(--mute);padding:.25rem 0}

.stage{
  min-width:0;
  background:
    radial-gradient(ellipse 90% 42% at 50% -8%, #3a1520 0%, transparent 62%),
    #000;
}

.hero{padding:2.2rem 0 1.2rem}
.eyebrow{
  margin:0 0 .45rem;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pink);
}
.headline{
  margin:0 0 .5rem;font-size:clamp(2.1rem,5.2vw,3.35rem);
  font-weight:700;letter-spacing:-.042em;line-height:1.05;
}
.deck{margin:0 0 1.25rem;color:var(--mute);max-width:42ch;font-size:1.05rem}
.desk{
  display:flex;gap:.45rem;align-items:center;
  background:var(--elev);border-radius:12px;
  padding:.28rem .28rem .28rem .9rem;
  max-width:40rem;
  box-shadow:inset 0 0 0 1px var(--line);
}
.desk-ico{width:18px;height:18px;flex:none;color:var(--faint)}
.field{flex:1 1 12rem;min-width:0}
.field input{
  width:100%;border:0;background:transparent;padding:.72rem 0;
  font-size:1rem;color:var(--ink);
}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none}
.press{
  border:0;background:var(--pink);color:#fff;text-decoration:none;
  font-weight:600;padding:.68rem 1.15rem;border-radius:980px;display:inline-block;
}
.press:hover{background:var(--pink-2)}
.press:disabled{opacity:.45;pointer-events:none}
.note{margin:.75rem 0 0;min-height:1.15rem;color:var(--mute);font-size:.9rem}
.alert{display:none;margin:.9rem 0 0;color:#ff8a80}
.alert.on{display:block}

.feature{
  margin-top:1.8rem;
  display:grid;gap:0;align-items:stretch;
  background:linear-gradient(160deg,#2c2c2e 0%,#161618 100%);
  border-radius:12px;overflow:hidden;
  min-height:260px;
}
@media (min-width:780px){.feature{grid-template-columns:1.05fr .95fr}}
.feature-copy{padding:1.6rem 1.5rem;display:flex;flex-direction:column;justify-content:flex-end}
.feature-copy h2{margin:.35rem 0 .45rem;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.035em}
.feature-copy p:last-child{margin:0;color:var(--mute);max-width:36ch}
.art{display:grid;place-items:center;padding:1.2rem}
.illust{display:block;width:100%;height:auto;max-width:280px;border-radius:12px}
.hero-illust{max-width:320px}
.auth-illust{max-width:220px;margin-bottom:1rem}
.split-art .illust{max-width:260px}

body.has-result .hero{padding:1.2rem 0 .6rem}
body.has-result .headline{font-size:1.55rem}
body.has-result .deck,
body.has-result .feature{display:none}

.results{padding:0 0 2rem}
.slab{background:var(--elev);border-radius:12px;padding:1.15rem 1.15rem 1.2rem;margin-bottom:1rem}
.slab-head{display:flex;gap:1.15rem;align-items:flex-start;flex-wrap:wrap}
.sleeve{flex:none;width:160px;aspect-ratio:1;position:relative}
.sleeve img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.kind{margin:0 0 .35rem}
.title{margin:0 0 .15rem;font-size:clamp(1.4rem,3vw,1.95rem);font-weight:700;letter-spacing:-.03em}
.title a{color:inherit;text-decoration:none}
.by{margin:0;color:var(--mute)}
.tally{margin:.2rem 0 0;color:var(--faint);font-size:.9rem}
.slab-actions{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
select{
  background:var(--elev2);border:0;color:var(--ink);
  padding:.5rem .7rem;border-radius:8px;
}
.ghost{
  border:0;background:var(--elev2);color:var(--ink);
  padding:.55rem 1rem;border-radius:980px;text-decoration:none;font-weight:600;
}
.ghost:hover{filter:brightness(1.08)}
.progress{height:4px;background:var(--elev2);border-radius:99px;overflow:hidden;margin-top:.85rem}
#zipfill{height:100%;width:0;background:var(--pink)}

.tracks{background:var(--elev);border-radius:12px;overflow:hidden}
.trk{
  display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:.75rem;align-items:center;
  padding:.58rem 1rem;border-bottom:1px solid var(--line);
}
.trk:last-child{border-bottom:0}
.trk:hover{background:rgba(255,255,255,.045)}
.trk .num{font-size:.85rem;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.trk .nm strong{display:block;font-weight:500}
.trk .nm em{display:block;font-style:normal;font-size:.85rem;color:var(--mute)}
.trk .len{font-size:.82rem;color:var(--faint);font-variant-numeric:tabular-nums}
.mini{border:0;background:var(--pink);color:#fff;border-radius:980px;padding:.32rem .7rem;font-weight:600}

.band{padding:1.6rem 0 2rem}
.shelf-title,.page h1,.page h2,.band h2{
  margin:0 0 1rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);
}
.shelf-title,.band h2{font-size:1.35rem}
.shelf{
  display:grid;gap:1.1rem;padding:0;margin:0 0 2rem;list-style:none;
}
@media (min-width:800px){.shelf{grid-template-columns:repeat(3,1fr)}}
.tile{min-width:0}
.tile .illust{
  width:100%;max-width:none;aspect-ratio:1;object-fit:contain;
  border-radius:8px;background:var(--elev);
  padding:.7rem;box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.tile b{display:block;margin:.65rem 0 .2rem;font-weight:600;letter-spacing:-.015em}
.tile p,.prose{margin:0;color:var(--mute);font-size:.92rem}
.fmt-grid{display:grid}
.facts{padding:0;margin:0;list-style:none}
.split{display:grid;gap:1.4rem;align-items:center;margin:1.6rem 0 2.2rem}
@media (min-width:800px){.split{grid-template-columns:.8fr 1.2fr}}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  background:var(--elev);color:var(--ink);text-decoration:none;
  padding:.42rem .8rem;border-radius:980px;font-size:.88rem;font-weight:500;
}
.chip:hover{background:var(--elev2)}
.faq{border-top:1px solid var(--line);margin:0;padding:.05rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.8rem 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 .8rem;color:var(--mute)}
.cards{display:grid;gap:.85rem}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card-link{
  background:var(--elev);border-radius:12px;padding:1rem 1.05rem;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;gap:.35rem;
}
.card-link:hover{background:var(--elev2)}
.card-link strong{letter-spacing:-.02em}

.page{padding:2.2rem 0 4rem}
.page h1{font-size:clamp(1.85rem,4vw,2.7rem);letter-spacing:-.04em}
.page.narrow{max-width:26rem}
.article-body{max-width:62ch;color:var(--mute)}
.article-body h2{color:var(--ink);margin:1.5rem 0 .5rem}
.related{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem}
.post-tease{margin-top:1rem}
.auth{display:grid;gap:.85rem;margin:1.1rem 0}
.auth label{display:grid;gap:.3rem;font-weight:600}
.auth input{background:var(--elev);border:0;border-radius:10px;padding:.8rem .9rem}
.pass{display:grid;gap:.8rem;margin:1.2rem 0 2rem}
@media (min-width:700px){.pass{grid-template-columns:repeat(3,1fr)}}
.pass div{background:var(--elev);border-radius:12px;padding:1rem}
.pass b{display:block;font-size:1.2rem;margin:.2rem 0}
.hist{width:100%;border-collapse:collapse}
.hist th,.hist td{border-bottom:1px solid var(--line);text-align:left;padding:.5rem .25rem}

.colophon{border-top:1px solid var(--line);padding:1.6rem 0 5.5rem}
.colophon .shell{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.colophon p{margin:0;font-size:.82rem;color:var(--faint);max-width:52ch}
.langs{display:flex;flex-wrap:wrap;gap:.55rem}
.langs a{color:var(--mute);text-decoration:none;font-size:.86rem}
.langs a[aria-current="true"],.langs a:hover{color:var(--ink)}

.deckbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:76px;
  background:rgba(28,28,30,.94);backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;padding:0 1.1rem;
  transform:translateY(110%);
  transition:transform .22s ease;
}
.deckbar.up{transform:none}
.nowmeta{flex:0 1 16rem;min-width:0}
.nowmeta strong,.nowmeta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowmeta span{color:var(--mute);font-size:.82rem}
#player{flex:1;min-width:8rem;height:36px;accent-color:var(--pink)}
.shut{border:0;background:none;color:var(--mute);font-size:1.1rem}
.shut:hover{color:var(--ink)}
body.has-player .colophon{padding-bottom:6.5rem}

.cvt-modal{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  padding:1rem;background:rgba(0,0,0,.62);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.cvt-modal.on{opacity:1;pointer-events:auto}
.cvt-card{
  width:min(26rem,100%);background:var(--elev);border-radius:16px;
  padding:1.45rem 1.25rem 1.25rem;text-align:center;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.cvt-x{position:absolute;top:.45rem;right:.55rem;border:0;background:none;font-size:1.4rem;color:var(--mute)}
.cvt-disc{width:52px;height:52px;margin:0 auto .85rem}
.cvt-disc svg{width:100%;height:100%}
.cvt-modal.on .cvt-disc svg{animation:spin 1.05s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cvt-kicker{margin:0 0 .3rem}
.cvt-card h2{margin:0 0 .3rem;font-size:1.2rem}
.cvt-sub,.cvt-track{margin:0 0 .5rem;color:var(--mute)}
.cvt-track{color:var(--ink);font-weight:600}
.cvt-bar{height:4px;background:var(--elev2);border-radius:99px;overflow:hidden}
.cvt-fill{height:100%;width:0;background:var(--pink);transition:width .2s linear}
.cvt-meta{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.85rem;color:var(--mute);text-align:left}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{
    position:sticky;top:0;height:auto;width:100%;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:.65rem .85rem;gap:.4rem .6rem;
    background:rgba(0,0,0,.78);backdrop-filter:saturate(180%) blur(20px);
    border-right:0;border-bottom:1px solid var(--line);
  }
  .wordmark{padding:0 .2rem 0 0}
  .rail-nav{flex-direction:row;flex:1;overflow-x:auto;gap:.1rem}
  .rail-link span{display:none}
  .rail-link{padding:.45rem}
  .rail-account{
    margin:0;padding:0;border:0;flex-direction:row;align-items:center;gap:.55rem;
  }
  .shell{width:min(1080px,100% - 1.6rem)}
  .trk{grid-template-columns:2rem 1fr auto}
  .trk .len{display:none}
  .sleeve{width:112px}
}