:root{
  --night:#170D2E;--case:#241548;--panel:#1E1240;--bone:#FFF6E6;--dusk:#B9A8D4;--line:#4A2E7F;
  --magenta:#FF3D9A;--magenta-t:#FF9BC9;--brass:#FFC94D;--brass-d:#D69A22;--brass-l:#FFEDBE;
  --violet:#B36BFF;--sky:#35E4F4;--mint:#7CFFB2;--lo:#FF7B8A;
  --foil:linear-gradient(102deg,#FF3D9A,#B36BFF 26%,#35E4F4 52%,#7CFFB2 74%,#FFC94D);
  --foil-loop:linear-gradient(102deg,#FFC94D 0%,#FF3D9A 10%,#B36BFF 20%,#35E4F4 30%,#7CFFB2 40%,
    #FFC94D 50%,#FF3D9A 60%,#B36BFF 70%,#35E4F4 80%,#7CFFB2 90%,#FFC94D 100%);
  --f-d:"Abril Fatface",Georgia,serif;--f-s:"Source Sans 3",system-ui,sans-serif;
  --f-m:"Source Code Pro",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--bone);font-family:var(--f-s);font-size:16.5px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(58% 40% at 14% 0%,rgba(255,61,154,.24),transparent 68%),
             radial-gradient(50% 36% at 88% 4%,rgba(53,228,244,.17),transparent 68%),
             radial-gradient(120% 80% at 50% -14%,#3B2270 0%,#231447 44%,#170D2E 80%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.05;mix-blend-mode:overlay}
.wrap{max-width:1000px;margin:0 auto;padding:0 26px 120px}
.kick{font-family:var(--f-m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dusk)}
.mono{font-family:var(--f-m)}.muted{color:var(--dusk)}.sm{font-size:14px}
p{margin:0}button{font:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
@keyframes sf{from{background-position:0% 0}to{background-position:100% 0}}

/* ══ HERO ══ */
.hero{text-align:center;padding:70px 0 0}
/* background-clip:text paints the gradient through the CONTENT BOX, so any glyph that overflows
   it is cut — and at line-height .9 the "y" descender of Factory hangs below. The padding gives
   the box somewhere to hold the descender; the negative margin gives the space back. */
.wordmark{font-family:var(--f-d);font-weight:400;letter-spacing:-.036em;line-height:.9;
  font-size:clamp(3rem,11vw,8.6rem);margin:26px 0 -.19em;padding-bottom:.24em;
  background-image:var(--foil-loop);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sf 6.5s linear infinite;filter:drop-shadow(0 0 46px rgba(255,61,154,.26))}
/* the global prefers-reduced-motion rule below only shortens animation-duration, which does
   nothing for an infinite animation — it just runs it ~100,000x/sec instead of stopping it. This
   one actually stops it. */
@media(prefers-reduced-motion:reduce){.wordmark{animation:none!important}}
.line{font-size:clamp(1.2rem,2.5vw,1.7rem);color:var(--bone);margin:22px 0 0;font-weight:400}
.line.after{margin:6px 0 0}
.intake{width:100%;max-width:600px;border:1px solid transparent;border-radius:9px;
  padding:18px 21px;font-family:var(--f-s);font-size:19px;color:var(--bone);resize:none;text-align:left;
  background:linear-gradient(#1E1240,#1E1240) padding-box,var(--foil) border-box;
  box-shadow:0 0 34px rgba(255,61,154,.24)}
.intake:focus{box-shadow:0 0 46px rgba(255,61,154,.38)}
.intake::placeholder{color:#9C8CB4}
.lever{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-m);font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#160516;border:0;border-radius:5px;
  padding:18px 34px;cursor:pointer;background:linear-gradient(180deg,#FF5CA5,#FF3D9A 52%,#D91E70);
  box-shadow:0 5px 0 0 #8E1249,0 12px 26px rgba(255,61,154,.3);transition:transform 90ms,box-shadow 90ms;
  text-decoration:none}
.lever:hover{transform:translateY(2px);box-shadow:0 3px 0 0 #8E1249,0 8px 18px rgba(255,61,154,.3)}
.lever:active{transform:translateY(5px);box-shadow:0 0 0 0 #8E1249}
.ghost{background:transparent;color:var(--dusk);border:1px solid var(--line);box-shadow:none;font-weight:400;
  padding:12px 20px;font-size:11px}
.ghost:hover{transform:none;border-color:var(--brass);color:var(--brass)}
.lever:disabled{opacity:.3;cursor:default;transform:none;box-shadow:0 5px 0 0 #8E1249}

/* ══ THE DEMO BOOTH ══ */
.demo{margin-top:104px;text-align:center}
.dwrap{background:linear-gradient(168deg,#291A4E,#1D1138 55%,#241748);border:1px solid #3E2A6B;
  border-radius:14px;padding:38px 40px 40px;position:relative;text-align:left;margin-top:26px;
  box-shadow:0 0 0 1px rgba(255,201,77,.09),0 34px 80px rgba(0,0,0,.5)}
.dlbl{position:absolute;top:-9px;left:32px;background:#1D1138;padding:0 11px;font-family:var(--f-m);
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.said{font-size:19px;line-height:1.5;font-style:italic;border-left:3px solid var(--brass);padding-left:18px;
  margin:4px 0 16px;max-width:62ch;transition:opacity 320ms}
.opt{display:block;width:100%;text-align:left;background:#1E1240;border:1px solid var(--line);
  border-radius:8px;padding:15px 19px;margin-bottom:9px;color:var(--bone);font-size:16px;cursor:pointer;
  transition:border-color 140ms,background 140ms,transform 90ms,opacity 320ms}
.opt:hover:not(:disabled){border-color:var(--magenta);background:rgba(255,61,154,.09);transform:translateX(3px)}
.opt:disabled{cursor:default}
.opt .lab{font-family:var(--f-m);font-size:10px;letter-spacing:.22em;color:#9C8CB4;display:block;
  margin-bottom:4px}
.opt.right{border-color:transparent;background:linear-gradient(#132C1E,#132C1E) padding-box,var(--foil) border-box}
.opt.right .lab{color:var(--mint)}
.opt.wrong{border-color:var(--lo);background:rgba(255,123,138,.09)}.opt.wrong .lab{color:var(--lo)}
.opt.dim{opacity:.35}
.verdict{border-radius:10px;padding:22px 24px;margin-top:16px;border:1px solid transparent;
  background:linear-gradient(var(--case),var(--case)) padding-box,var(--foil) border-box}
.verdict.bad{background:#2C1322;border:1px solid rgba(255,123,138,.42)}
.verdict h3{font-family:var(--f-d);font-weight:400;font-size:1.6rem;margin:0 0 8px;letter-spacing:-.02em}
.dots{display:flex;gap:7px;justify-content:center;margin-top:20px}
.dot{width:7px;height:7px;border-radius:50%;background:#3E2A6B;border:0;padding:0;cursor:pointer}
.dot.on{background:var(--magenta);box-shadow:0 0 10px 2px rgba(255,61,154,.5)}
.fade{opacity:0}
.rule{height:1px;background:var(--line);margin:0}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
h2{font-family:var(--f-d);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);letter-spacing:-.025em;margin:0}
@media(max-width:820px){.hero{padding-top:42px}.dwrap{padding:30px 22px 32px}}

/* ══ INTAKE · the three offers ══ */
.intro{max-width:62ch;margin:22px auto 0;font-size:15px;color:var(--dusk);line-height:1.6}
.lbl{display:block;text-align:left;max-width:600px;margin:0 auto 8px}
.chips{display:grid;gap:10px;margin:34px auto 0;max-width:600px;text-align:left}
.chip{font-family:var(--f-s);font-size:15px;line-height:1.45;background:#1E1240;text-align:left;
  border:1px solid var(--line);border-radius:8px;padding:14px 17px;cursor:pointer;color:var(--dusk);
  transition:border-color 140ms,color 140ms,transform 90ms}
.chip:hover{border-color:var(--magenta);color:var(--bone);transform:translateX(4px)}
.chip b{display:block;font-family:var(--f-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:#9C8CB4;font-weight:400;margin-bottom:6px}
.chip:hover b{color:var(--magenta-t)}
.dnote{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9C8CB4;
  max-width:600px;margin:16px auto 0;text-align:left}

/* ══ THE MIDWAY STRIP ══ */
.midway{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.pip{flex:1;min-width:74px;text-align:center;padding:11px 6px 9px;border:1px solid var(--line);
  border-radius:5px;background:#1E1240}
.pip .n{font-family:var(--f-m);font-size:9px;letter-spacing:.24em;color:#9C8CB4;display:block}
.pip .t{font-family:var(--f-m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#9C8CB4;display:block;margin-top:5px;font-weight:600}
.pip.now{border-color:var(--magenta);background:rgba(255,61,154,.14);box-shadow:0 0 22px rgba(255,61,154,.3)}
.pip.now .t{color:var(--magenta-t)}
.pip.free{border-color:var(--brass-d)}
.riv{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--brass-l),var(--brass-d) 70%,#6B4A0E)}
.riv.tl{left:13px;top:13px}.riv.tr{right:13px;top:13px}
.riv.bl{left:13px;bottom:13px}.riv.br{right:13px;bottom:13px}

/* ══ BOOTH ONE · SORT THE BOARD ══ */
.brief{font-size:17.5px;line-height:1.55;max-width:60ch;margin:14px 0 0;color:var(--bone)}
.brief b{color:var(--brass-l)}
.ideas{display:grid;gap:9px;margin-top:24px}
.idea{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#1E1240;
  border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--bone);font-size:16px;
  cursor:pointer;transition:border-color 140ms,background 140ms,transform 90ms}
.idea:hover:not(:disabled){border-color:var(--magenta);transform:translateX(3px)}
.idea:disabled{cursor:default}
.idea.sel{border-color:transparent;box-shadow:0 0 26px rgba(255,61,154,.22);
  background:linear-gradient(#241548,#241548) padding-box,var(--foil) border-box}
.idea .t{flex:1;line-height:1.4}
.idea .slot{font-family:var(--f-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9C8CB4;
  border:1px dashed #4A2E7F;border-radius:4px;padding:7px 9px;min-width:112px;text-align:center;flex:none}
.idea .slot.set{border-style:solid;border-color:var(--brass-d);color:var(--brass-l)}
.idea .slot.star{border-color:transparent;color:var(--bone);
  background:linear-gradient(#2A1A52,#2A1A52) padding-box,var(--foil) border-box}
.conds{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.cond{background:#1B1036;border:1px solid var(--line);border-radius:7px;padding:11px 13px;cursor:pointer;
  color:var(--bone);text-align:left;transition:border-color 140ms,background 140ms}
.cond:hover:not(:disabled){border-color:var(--brass);background:rgba(255,201,77,.08)}
.cond:disabled{opacity:.4;cursor:default}
.cond .cn{display:block;font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:3px}
.cond .cg{display:block;font-size:13px;color:var(--dusk);line-height:1.35}
/* THE UNICORN sits ABOVE the six, because it is not a seventh reason — it is the opposite kind
   of answer, and putting it under them read as an afterthought you could miss entirely. */
.winbox{margin-top:22px}
.winbox .cond{display:block;width:100%}
.cond.wide{border-color:transparent;padding:15px 17px;
  background:linear-gradient(#241548,#1E1240) padding-box,var(--foil) border-box;
  box-shadow:0 0 22px rgba(255,61,154,.14)}
.cond.wide .cn{color:var(--bone);font-size:12px;letter-spacing:.26em;margin-bottom:5px}
.cond.wide.held{background:linear-gradient(#33205E,#2A1A52) padding-box,var(--foil) border-box;
  box-shadow:0 0 34px rgba(255,61,154,.34)}
.cond.wide .who{display:block;font-size:14.5px;color:var(--brass-l);line-height:1.4;margin-top:3px;
  font-style:italic}
.condlbl{margin:20px 0 9px;color:#9C8CB4;font-size:9.5px}
.rail{font-size:15px;color:var(--brass-l);text-align:center;margin-top:22px;border-top:1px solid var(--line);
  padding-top:15px}

/* ══ THE REVEAL ══ */
@keyframes rin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rvl{opacity:0;animation:rin 420ms cubic-bezier(.2,.7,.3,1) forwards}
@keyframes uwake{0%{opacity:0;transform:translateY(12px);box-shadow:0 0 0 rgba(255,61,154,0)}
  55%{opacity:1;transform:none;box-shadow:0 0 54px rgba(255,61,154,.5)}
  100%{opacity:1;transform:none;box-shadow:0 0 26px rgba(255,61,154,.22)}}
.ubox{opacity:0;border:1px solid transparent;border-radius:11px;padding:20px 22px;margin:2px 0 20px;
  background:linear-gradient(#2A1A52,#22143F) padding-box,var(--foil) border-box;
  animation:uwake 1500ms ease-out both}
.ubox .u1{font-family:var(--f-m);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass);margin-bottom:8px}
.ubox .u2{font-family:var(--f-d);font-weight:400;font-size:clamp(1.15rem,3.6vw,1.55rem);
  letter-spacing:-.02em;line-height:1.22;color:var(--bone)}
.ubox .u3{font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,201,77,.24)}
.ubox .u3.hit{color:var(--mint)}.ubox .u3.miss{color:var(--lo)}
@media(prefers-reduced-motion:reduce){.rvl,.ubox{animation:none;opacity:1}}

@media(max-width:700px){.conds{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .idea{flex-wrap:wrap;gap:10px;padding:13px 14px;font-size:15.5px}
  .idea .t{flex:1 1 100%}
  .idea .slot{flex:1 1 100%;min-width:0;padding:8px 9px}
}
@media(max-width:430px){.conds{grid-template-columns:1fr}}

/* ══ THE BOARD ══ */
.board{width:100%;border-collapse:collapse;margin-top:4px}
.board td{padding:13px 11px;border-bottom:1px solid #33224F;vertical-align:top;font-size:15px}
.board tr:last-child td{border-bottom:0}
.board .mk{width:104px;font-family:var(--f-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;color:#9C8CB4}
.board .nm{width:36%;font-weight:600;color:#A292B8;line-height:1.4}
.board .ok{width:24px;text-align:center;font-size:15px}
.board .why{color:var(--dusk);font-size:14px}
.board tr.win td{background:rgba(124,255,178,.07)}
.board tr.win td:first-child{border-radius:6px 0 0 6px}.board tr.win td:last-child{border-radius:0 6px 6px 0}
.board tr.win .nm{color:var(--bone)}.board tr.win .why{color:#CFE9DA}.board tr.win .mk{color:var(--mint)}
.board tr.miss .mk{color:var(--lo)}
.plate{margin-top:22px;border-radius:8px;padding:18px 22px;border:1px solid transparent;text-align:center;
  background:linear-gradient(#2A1A52,#22143F) padding-box,var(--foil) border-box}
.plate .p{font-family:var(--f-m);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-l)}
.plate .n{font-family:var(--f-m);font-size:8.5px;letter-spacing:.3em;color:#9C8CB4;margin-bottom:7px}
.hd{font-family:var(--f-d);font-weight:400;font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:-.025em;
  margin:8px 0 0;line-height:1.1}

/* ══ THE DEMO, SMALL ══
   A four-column table at 360px is four crushed columns, so under 640 every row becomes a card:
   the mark and the tick ride together as a header line, the name is the heading, the why is the
   body. Same DOM, same reading order — only the shape changes. */
@media(max-width:640px){
  .demo{margin-top:64px}
  .dwrap{padding:26px 15px 28px;border-radius:11px}
  /* the notch label is a plaque on the frame at desktop width; at 390px it wraps to two lines
     and hangs off the box, so at this size it comes inside and behaves like a line of type */
  .dlbl{position:static;display:block;background:none;padding:0;font-size:8.5px;letter-spacing:.2em;
    line-height:1.7;margin-bottom:12px}
  .said{font-size:16.5px;padding-left:13px;margin-bottom:14px}
  .brief{font-size:16px}
  .midway{gap:6px;margin-bottom:20px}
  .pip{min-width:0;flex:1 1 30%;padding:9px 4px 8px}
  .pip .t{font-size:8.5px;letter-spacing:.04em}
  .riv{display:none}
  .rail{font-size:14px}
  .board,.board tbody{display:block;width:auto}
  .board tr{display:flex;flex-wrap:wrap;align-items:baseline;
    border:1px solid #33224F;border-radius:9px;padding:13px 14px;margin-bottom:10px;background:#1B1036}
  .board tr.win{border-color:transparent;
    background:linear-gradient(#22143F,#1D1138) padding-box,var(--foil) border-box}
  .board td{display:block;border-bottom:0;padding:0}
  /* the mark and the tick are one verdict, so they ride the same line — floated, the tick
     orphaned itself onto a line of its own whenever the mark was empty */
  .board .mk{order:1;flex:1 1 auto;width:auto;white-space:normal;font-size:9px;line-height:1.6;
    min-height:1em}
  .board .ok{order:2;flex:0 0 auto;width:auto;text-align:right;font-size:15px;line-height:1.6}
  .board .nm{order:3;flex:1 1 100%;width:auto;font-size:15.5px;color:var(--bone);padding-top:5px}
  .board .why{order:4;flex:1 1 100%;padding-top:7px;font-size:14px}
  .board tr.win td:first-child,.board tr.win td:last-child{border-radius:0}
  .board tr.win td{background:transparent}
  .plate{padding:15px 15px}
  .plate .p{font-size:11.5px;letter-spacing:.09em}
  .row .lever{width:100%;justify-content:center}
  #call{width:100%;justify-content:center}
  #hint{display:block;margin:11px 0 0!important;text-align:center}
}

/* ══ PRICING ══ */
.price{margin-top:120px;text-align:center}
.sub{font-family:var(--f-d);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.025em;
  margin:0;line-height:1.12}
.rungs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:stretch;margin:30px auto 0;
  max-width:760px}
.rung{flex:1;min-width:88px;background:#1B1036;border:1px solid var(--line);border-radius:6px;
  padding:13px 8px 11px}
.rung .n{display:block;font-family:var(--f-d);font-size:1.7rem;line-height:1;color:var(--brass)}
.rung .l{display:block;font-family:var(--f-m);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#9C8CB4;margin-top:7px}
.rung.free{border-color:transparent;
  background:linear-gradient(#22143F,#22143F) padding-box,var(--foil) border-box}
.rung.free .n{background-image:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.rung.free .l{color:var(--bone)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px;text-align:left}
@media(max-width:860px){.tiers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tiers{grid-template-columns:1fr}.rung{min-width:72px}}
.tier{background:linear-gradient(168deg,#291A4E,#1D1138 60%);border:1px solid #3E2A6B;border-radius:11px;
  padding:22px 20px 24px;position:relative;transition:border-color 160ms,transform 120ms}
.tier:hover{border-color:var(--brass-d);transform:translateY(-3px)}
.tier.best{border-color:transparent;
  background:linear-gradient(#22143F,#1D1138) padding-box,var(--foil) border-box;
  box-shadow:0 0 40px rgba(255,61,154,.2)}
.tier .q{display:flex;align-items:center;gap:9px;font-family:var(--f-d);font-size:2.2rem;line-height:1;
  color:var(--brass)}
.coin{width:19px;height:19px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 28%,var(--brass-l),var(--brass) 46%,var(--brass-d) 78%,#6B4A0E);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5)}
.tier .k{display:block;font-family:var(--f-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dusk);margin:9px 0 12px}
.tier .pr{display:block;font-size:26px;font-weight:700;letter-spacing:-.01em}
.tier .ea{display:block;font-family:var(--f-m);font-size:10.5px;color:var(--dusk);margin-top:3px}
.tier .d{font-size:14px;color:var(--dusk);line-height:1.5;margin-top:14px;border-top:1px solid #33224F;
  padding-top:13px}
.honest{max-width:64ch;margin:38px auto 0;font-size:15.5px;color:var(--dusk);line-height:1.65}
.honest b{color:var(--bone);font-weight:600}
.fineprint{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9C8CB4;
  margin-top:26px;line-height:2}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ══ the corner control box ══ */
.works{position:fixed;right:18px;bottom:18px;z-index:70;font-family:var(--f-m);font-size:11px;
 letter-spacing:.13em;text-transform:uppercase;color:var(--brass-l);
 border:1px solid transparent;border-radius:13px;padding:13px 15px;
 background:linear-gradient(rgba(22,13,42,.95),rgba(22,13,42,.95)) padding-box,var(--foil) border-box;
 display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);
 box-shadow:0 0 26px rgba(255,61,154,.22),0 8px 26px rgba(0,0,0,.5)}
.works .cap{font-size:9px;letter-spacing:.2em;color:#9C8CB4;margin-right:-4px}
/* A control that is DOING something should not look like one that is merely available.
   aria-pressed="true" means MUTED here, so the LIT state is the false one: a fill says "this is
   running", a dim outline says "this is off". Neither leans on colour alone — the two states
   also differ in weight and in whether there is a fill at all. */
.works button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#C9B8DE;
 background:rgba(255,255,255,.04);border:1px solid rgba(201,143,42,.4);border-radius:7px;
 padding:7px 11px;cursor:pointer;
 transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .09s}
.works button:hover{border-color:#FFC94D;background:rgba(255,201,77,.13);color:#FFE9B8}
.works button:active{transform:translateY(1px)}

/* LIT · music or sfx actually running. Deep pink→violet rather than the bright magenta: bone
   text on #FF3D9A measures 3.7:1 and fails, on this it measures 4.9:1 and passes. */
.works #w-music[aria-pressed="false"],
.works #w-sfx[aria-pressed="false"],
.works #w-spatial[aria-pressed="false"]{
 color:#FFF6E6;font-weight:700;border-color:rgba(255,155,201,.55);
 background:linear-gradient(165deg,#C42C77,#8B45D6);
 box-shadow:0 0 15px rgba(255,61,154,.34),inset 0 1px 0 rgba(255,255,255,.18)}
/* hover DEEPENS instead of brightening — the box plainly changes, and the text contrast climbs
   to 6.4:1 rather than falling, which is what lightening a lit control always costs you */
.works #w-music[aria-pressed="false"]:hover,
.works #w-sfx[aria-pressed="false"]:hover,
.works #w-spatial[aria-pressed="false"]:hover{
 background:linear-gradient(165deg,#A81F63,#6B2FB0);border-color:#FF9BC9;
 box-shadow:0 0 22px rgba(255,61,154,.52),inset 0 1px 0 rgba(255,255,255,.22)}
/* MUTED · present and legible, obviously not running */
.works button[aria-pressed="true"]{opacity:.5;color:#9C8CB4;background:transparent;
 border-color:rgba(155,140,180,.35);font-weight:400;box-shadow:none}
.works button[aria-pressed="true"]:hover{opacity:.9;border-color:#FF9BC9;
 background:rgba(255,61,154,.1);color:#FFD9EC}

/* STOP stays neutral until you reach for it, then it colours — and on the way out it wears the
   lit colour for a beat, so the click has an answer of its own. Without that the only feedback
   is two OTHER buttons going dim, which reads as nothing having happened. */
.works #w-stop:hover{border-color:#FF9BC9;background:rgba(255,61,154,.16);color:#FFD9EC;
 box-shadow:0 0 16px rgba(255,61,154,.3)}
.works #w-stop.flash{color:#FFF6E6;font-weight:700;border-color:#FF9BC9;
 background:linear-gradient(165deg,#C42C77,#8B45D6);
 box-shadow:0 0 24px rgba(255,61,154,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.works input[type=range]{width:88px;accent-color:#FF3D9A;cursor:pointer}
.works .sep{width:1px;height:20px;background:rgba(201,143,42,.32)}
.works.idle{opacity:.82}.works:hover{opacity:1}
/* blocked by the browser's autoplay policy — the panel becomes the way in */
.works.nosound{box-shadow:0 0 32px rgba(255,61,154,.45),0 8px 26px rgba(0,0,0,.5)}
.works.nosound .cap{color:#FFC94D}
.works.nosound #w-music{border-color:#FFC94D;background:rgba(255,201,77,.2);animation:wpulse 2.2s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.55}}
/* the bed is on its way up. Say so, or the six quiet seconds read as "sound is off" and the
   one button somebody reaches for is the one that turns it off for real. */
.works.arriving .cap{color:#FF9BC9}
.works.arriving #w-music{animation:warrive 1.6s ease-in-out infinite}
@keyframes warrive{0%,100%{box-shadow:0 0 15px rgba(255,61,154,.34),inset 0 1px 0 rgba(255,255,255,.18)}
  50%{box-shadow:0 0 30px rgba(255,61,154,.75),inset 0 1px 0 rgba(255,255,255,.3)}}
@media(prefers-reduced-motion:reduce){.works.arriving #w-music{animation:none}}
@media(prefers-reduced-motion:reduce){.works.nosound #w-music{animation:none}}
@media(max-width:560px){
 /* THE SLIDER STAYS. It was display:none here on the reasoning that a narrow panel had no room —
    which had it backwards. The phone is where the music is loudest and where somebody is most
    likely to be somewhere they cannot be loud, so it is the one place a volume control is not
    optional. The panel wraps to two rows instead and the separators and caption go, because those
    are the parts that are genuinely decoration. */
 .works{right:11px;left:11px;bottom:11px;padding:10px 11px;gap:8px;font-size:10px;
   flex-wrap:wrap;justify-content:flex-end}
 .works .sep,.works .cap{display:none}
 .works input[type=range]{order:2;flex:1 0 100%;width:auto;min-width:0;height:28px;margin-top:2px}
 .works button{padding:7px 10px}
 /* it is a fixed box over a page made of reading copy, and at this width it lands on top of a
    sentence rather than beside it. It gets out of the way until you reach for it — except when
    there is genuinely no sound, which is the one state it exists to report. */
 .works.idle{opacity:.4}
 .works.idle.nosound{opacity:1}
}
/* ══ THE DOOR ══
   A ghost over the midway rather than a page in front of it: the site is right there, blurred
   and dimmed, so this reads as a turnstile you step through, not a wall you are stuck behind.
   It also does real work — a browser will not start audio without a gesture, so this IS the
   gesture, which is why nothing plays until a choice is made either way. */
.door{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  padding:28px 22px;background:rgba(16,8,32,.74);backdrop-filter:blur(9px) saturate(.85);
  -webkit-backdrop-filter:blur(9px) saturate(.85);
  animation:dfade 520ms ease-out both;text-align:center}
@keyframes dfade{from{opacity:0}to{opacity:1}}
.door.gone{opacity:0;pointer-events:none;transition:opacity 620ms cubic-bezier(.4,0,.2,1)}
.door .in{max-width:520px;width:100%;animation:din 700ms 90ms cubic-bezier(.2,.7,.3,1) both}
@keyframes din{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.door .k{font-family:var(--f-m);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass)}
.door .wm{font-family:var(--f-d);font-weight:400;letter-spacing:-.035em;line-height:.94;
  font-size:clamp(2.5rem,10vw,4.1rem);margin:14px 0 -.19em;padding-bottom:.24em;   /* the y, again */
  background-image:var(--foil-loop);background-size:200% 100%;-webkit-background-clip:text;
  background-clip:text;color:transparent;animation:sf 6.5s linear infinite;
  filter:drop-shadow(0 0 40px rgba(255,61,154,.34))}
.door .tease{font-size:clamp(16px,4.4vw,19px);line-height:1.6;color:var(--bone);margin:22px auto 0;
  max-width:40ch}
.door .tease b{color:var(--brass-l);font-weight:600}
.door .tease .q{color:var(--dusk)}
.door .acts{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:15px}
.door .band{font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#9C8CB4;margin-top:-4px}
.door .quiet{background:none;border:0;color:#9C8CB4;font-family:var(--f-m);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:9px 14px;border-radius:6px;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:#5B4880}
.door .quiet:hover{color:var(--bone);text-decoration-color:var(--brass)}
.door .fine{font-family:var(--f-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:#9C8CB4;margin-top:26px;line-height:2}
body.shut{overflow:hidden}
body.shut .works{display:none}   /* the sound box has nothing to say until the choice is made */
/* the lever is focused on open so a keyboard lands on it — the global sky-blue ring fights the
   pink, so this one keeps its ring and wears brass */
.door .lever:focus-visible{outline-color:var(--brass);outline-offset:4px}
@media(max-width:560px){.door{padding:22px 18px}.door .acts .lever{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.door,.door .in{animation:none}}
/* .door .wm is the same infinite-gradient-sweep technique as .wordmark above, and the global rule
   misses it the same way — .01ms on an infinite animation is a very fast loop, not a stop. */
@media(prefers-reduced-motion:reduce){.door .wm{animation:none!important}}

/* ══ the waitlist ══ */
.wl{max-width:600px;margin:30px auto 0;border:1px solid transparent;border-radius:14px;padding:26px 24px;
 background:linear-gradient(#1E1240,#1E1240) padding-box,var(--foil) border-box;
 box-shadow:0 0 34px rgba(255,61,154,.20);text-align:left}
.wl h3{font-family:var(--f-d);font-weight:400;font-size:clamp(21px,3.2vw,27px);margin:0 0 8px;color:#FFF3D6}
.wl p{margin:0 0 16px;font-size:15px;line-height:1.55;color:#CDBEDF}
.wl .said{font-family:var(--f-m);font-size:12px;color:var(--brass-l);border-left:2px solid rgba(201,143,42,.5);
 padding-left:10px;margin:0 0 16px;line-height:1.5;word-break:break-word}
.wl form{display:flex;gap:9px;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 240px;min-width:0;font-family:var(--f-s);font-size:15px;color:#FFF3D6;
 background:#170D2E;border:1px solid rgba(201,143,42,.42);border-radius:9px;padding:12px 13px}
.wl input[type=email]:focus{border-color:#FFC94D;box-shadow:0 0 0 3px rgba(255,201,77,.22)}
.wl .msg{margin:13px 0 0;font-family:var(--f-m);font-size:12px;letter-spacing:.06em;min-height:1.2em}
.wl .msg.ok{color:#7CFFB2}.wl .msg.err{color:#FF8FB4}
.wl .fine{margin:14px 0 0;font-size:12.5px;color:#9C8CB4;line-height:1.5}

/* ══ the waitlist, as a splash over the page ══
   ONE form, moved between the section and this overlay. Two copies would mean two elements with
   the same id, and the one the script reached would be whichever the DOM handed back first. */
.wlm{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
 padding:26px 20px;background:rgba(11,5,26,.90);backdrop-filter:blur(9px) saturate(120%);
 -webkit-backdrop-filter:blur(9px) saturate(120%);overflow-y:auto}
.wlm.open{display:flex}
.wlm .in{width:100%;max-width:600px;animation:din 520ms cubic-bezier(.2,.7,.3,1) both}
.wlm .wl{margin:0}
.wlm .shut{position:absolute;top:16px;right:18px;background:none;border:0;color:#9C8CB4;
 font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
 padding:9px 12px;border-radius:6px}
.wlm .shut:hover{color:var(--bone)}
body.wlopen{overflow:hidden}
@media(prefers-reduced-motion:reduce){.wlm .in{animation:none}}

/* ══ and where it lives the rest of the time ══ */
.wlsec{max-width:760px;margin:88px auto 0;padding:0 4px;text-align:center}
.wlsec .wl{margin-top:24px}
.foot{max-width:760px;margin:64px auto 0;padding:30px 4px 54px;border-top:1px solid rgba(201,143,42,.22);
 font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9C8CB4;
 text-align:center;line-height:2.1}
/* The footer's account line. Inherits the footer register rather than inventing a second one: mono,
   uppercase, letter-spaced. The sign-out control is a real <button> (it performs an action, it is not a
   link) styled down to the surrounding text, with padding taking its target past the 24px WCAG 2.2 AA
   floor without breaking a 10px footer's rhythm. */
.foot a{color:var(--brass-l);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--brass)}
.uf-out{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;
 padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.uf-out:hover{color:var(--bone)}
.uf-dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--mint);
 vertical-align:middle;margin-right:6px}
@media (forced-colors: active){.uf-dot{background:CanvasText}.uf-out{color:LinkText}}

/* ══ forced-colors (Windows High Contrast) ══
   Every one of these marks its state with border-color:transparent plus a gradient painted into
   the border-box — forced-colors keeps transparent transparent and drops the gradient, so the
   border vanishes and the state it carries (selected, correct, best, free, win, starred) goes with
   it. Same failure for a heading painted via background-clip:text + color:transparent: the text
   itself disappears. Give both a real, forced-colors-safe value. */
@media(forced-colors:active){
  .intake,.opt.right,.verdict,.idea.sel,.idea .slot.star,.cond.wide,
  .ubox,.plate,.board tr.win,.rung.free,.tier.best,.works,.wl{border-color:CanvasText}
  .wordmark,.door .wm,.rung.free .n{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}
}