/* Layout: one phone-shaped stage centred in a dark cinema; wide screens add a live "engine" rail beside it.
   Single dark theme on purpose: FOBO lives at 9pm. */
:root{
  color-scheme: dark;
  --night:#09090D;
  --deep:#0F0F15;
  --raise:#15151C;
  --raise-2:#1E1E28;
  --hair:rgba(241,240,247,.07);
  --hair-2:rgba(241,240,247,.14);
  --ink:#F1F0F7;
  --ink-2:#D7D6E0;
  --muted:#9C9BAB;
  --gold:#D6FF5C;   /* lime: the one primary (kept the old token name so every rule follows) */
  --rose:#B9A6FF;
  --violet:#B9A6FF; /* lilac: "you" (your night, your saves) */
  --mint:#D6FF5C;
  --coral:#FF7AB8;  /* flamingo: no / not tonight */
  --on-lens:#0B0B10;
  --lens:#D6FF5C;
  --ring:linear-gradient(135deg,#D6FF5C 0%,#B9A6FF 100%);
  --f-display:"Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{display:block;-webkit-user-drag:none;user-select:none}
canvas{display:block}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{height:100%;display:flex;align-items:center;justify-content:center;gap:28px;padding-inline:16px;padding-block:16px;
  background:radial-gradient(60% 50% at 50% 0%, rgba(185,166,255,.10), transparent 70%), var(--night)}
.stage{position:relative;width:390px;max-width:100%;height:min(844px,100%);border-radius:44px;background:var(--deep);overflow:hidden;
  box-shadow:0 0 0 1px var(--hair-2), 0 30px 80px rgba(0,0,0,.55);isolation:isolate;flex:none;overflow:clip}
@media (max-width:560px){
  .shell{padding:0;gap:0}
  .stage{width:100%;height:100%;border-radius:0;box-shadow:none}
}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;transition:opacity 600ms ease;
  background:radial-gradient(42% 32% at 50% 38%, hsla(20,70%,62%,.20), transparent 70%)}

/* ---------- top bar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0;z-index:20;
  transition:opacity 200ms var(--ease-out), translate 200ms var(--ease-out)}
.stage[data-chrome="off"] .topbar{opacity:0;translate:0 -6px;pointer-events:none}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair)}
.iconbtn svg{width:18px;height:18px}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.10);position:relative;overflow:hidden}
.dots i::after{content:"";position:absolute;inset:0;background:var(--gold);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out)}
.dots i.on::after{transform:scaleX(1)}

/* ---------- press feedback (individual `scale` so it never fights other transforms) ---------- */
.press{transition:scale 140ms var(--ease-out), opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease}
.press:active{scale:.97}

/* ---------- buttons ---------- */
.btn{height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:650;font-size:16px;letter-spacing:-.005em;width:100%;
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair)}
.btn-lens{background:var(--lens);color:var(--on-lens);box-shadow:0 10px 30px -12px rgba(214,255,92,.6)}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink)}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn svg{width:18px;height:18px}
.linkbtn{color:var(--muted);font-size:14px;font-weight:550;padding:10px 8px;border-radius:12px}
@media (hover:hover) and (pointer:fine){
  .btn-lens:hover{filter:brightness(1.05) saturate(1.05)}
  .btn-ghost:hover,.btn:not(.btn-lens):hover{background-color:var(--raise-2)}
  .linkbtn:hover{color:var(--ink)}
  .iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.07)}
}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:72px 22px 22px;
  opacity:0;pointer-events:none;translate:0 10px;filter:blur(4px);
  transition:opacity 160ms var(--ease-out), translate 160ms var(--ease-out), filter 160ms var(--ease-out)}
.screen.is-active{opacity:1;pointer-events:auto;translate:0 0;filter:none;z-index:1;
  transition:opacity 300ms var(--ease-out), translate 300ms var(--ease-out), filter 300ms var(--ease-out)}
.screen.is-leaving{translate:0 -8px}
.screen [data-s]{opacity:0;translate:0 8px;transition:opacity 260ms var(--ease-out), translate 260ms var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + 70ms)}
.screen.is-active [data-s]{opacity:1;translate:0 0}
.screen:not(.is-active) [data-s]{transition-duration:120ms;transition-delay:0ms}
.scroll{overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

.eyebrow{color:var(--gold)}
.q{font-family:var(--f-display);font-weight:700;font-size:34px;line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance;font-variation-settings:"opsz" 72}
.sub{color:var(--ink-2);margin:10px 0 0;font-size:15px;max-width:30ch}
.grow{flex:1;min-height:0}

/* ---------- home ---------- */
.home-top{display:flex;justify-content:space-between;align-items:center}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted)}
.lensring{position:relative;width:min(208px,54vw);aspect-ratio:1;border-radius:50%;padding:2px;background:var(--lens);margin:16px auto 18px;max-width:100%}
.lensring>div{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 45%, #17171F, #09090D 70%);overflow:hidden}
.lensring canvas{width:100%;height:100%}
.home-cta{display:grid;gap:10px;margin-top:22px}
.prefs{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.prefs .mono{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:34px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair)}
.chip[aria-pressed="true"]{color:var(--on-lens);background:var(--gold);box-shadow:none}
.chip .tick{width:0;overflow:hidden;opacity:0;transition:width 200ms var(--ease-out), opacity 200ms ease}
.chip[aria-pressed="true"] .tick{width:12px;opacity:1}
.chip-time{color:var(--ink);font-variant-numeric:tabular-nums}
.chip-time span{display:inline-block;transition:opacity 160ms ease, filter 160ms ease, translate 160ms var(--ease-out)}
.chip-time span.swap{opacity:0;filter:blur(3px);translate:0 -4px}
.quick{display:flex;align-items:center;gap:12px;padding:10px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);text-align:left;margin-top:16px;width:100%}
.quick .thumb{width:44px;height:62px;border-radius:9px;overflow:hidden;flex:none;position:relative}
.quick b{display:block;font-size:15px}
.quick small{color:var(--muted);font-size:13px}

/* ---------- tune ---------- */
.pad{position:relative;flex:1;min-height:0;margin:14px -22px 0;touch-action:none;cursor:grab}
.pad:active{cursor:grabbing}
.pad canvas{position:absolute;inset:0;width:100%;height:100%}
.pad .grid{position:absolute;inset:8% 10%;border-radius:28px;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 100%);mask-image:radial-gradient(closest-side, #000 40%, transparent 100%)}
.glyph{position:absolute;color:var(--muted);opacity:.7;pointer-events:none}
.glyph svg{width:20px;height:20px}
.g-top{top:4%;left:50%;translate:-50% 0}.g-bot{bottom:4%;left:50%;translate:-50% 0}
.g-left{left:16px;top:50%;translate:0 -50%}.g-right{right:16px;top:50%;translate:0 -50%}
.tune-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;min-height:64px}
.presets{display:flex;gap:8px}
.preset{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.preset canvas{width:100%;height:100%}
.locked{display:flex;align-items:center;gap:8px;color:var(--gold);opacity:0;translate:0 6px;transition:opacity 200ms var(--ease-out), translate 200ms var(--ease-out)}
.locked.on{opacity:1;translate:0 0}
.locked svg{width:18px;height:18px}
.tune-hint{color:var(--muted);font-size:13px;transition:opacity 200ms ease}

/* ---------- choices ---------- */
.choices{display:grid;gap:12px;margin-top:26px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{position:relative;border-radius:24px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;font-weight:650;font-size:15px;min-height:150px;
  transition:scale 140ms var(--ease-out), opacity 220ms ease, box-shadow 200ms ease, background-color 200ms ease}
.choice:active{scale:.97}
.choice img{width:64px;height:64px}
.choice.row{flex-direction:row;justify-content:flex-start;gap:16px;min-height:112px;padding:18px 20px;font-size:18px;font-family:var(--f-display);font-weight:650;letter-spacing:-.01em}
.choice.row img{width:72px;height:72px}
.choice.sel{box-shadow:inset 0 0 0 2px var(--gold);background:var(--raise-2)}
.choices.decided .choice:not(.sel){opacity:.35}
@media (hover:hover) and (pointer:fine){.choice:hover{background:var(--raise-2)}}
.labtag{display:inline-flex;align-items:center;gap:6px;color:var(--mint);padding:5px 9px;border-radius:999px;background:rgba(214,255,92,.10);box-shadow:inset 0 0 0 1px rgba(214,255,92,.25);width:max-content}
.fruits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.fruits .choice{min-height:96px;padding:10px}
.fruits .choice img{width:54px;height:54px}
.foot-note{color:var(--muted);font-size:13px;margin-top:14px;max-width:34ch}

/* ---------- duel ---------- */
.duel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ticks{display:flex;gap:4px;padding-bottom:6px}
.ticks i{width:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.ticks i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
.ticks i.on::after{transform:scaleX(1)}
.stills{flex:1;min-height:0;display:grid;grid-template-rows:1fr 1fr;gap:10px;margin-top:16px;touch-action:none}
.still{position:relative;border-radius:22px;overflow:hidden;background:#0E0E14;box-shadow:inset 0 0 0 1px var(--hair);
  transition:scale 140ms var(--ease-out), translate 260ms var(--ease-out), opacity 220ms var(--ease-out), filter 220ms ease}
.still svg{position:absolute;inset:0;width:100%;height:100%}
.still:active{scale:.985}
.still.chosen{scale:1.02;z-index:2;box-shadow:0 0 0 2px var(--gold)}
.still.gone{opacity:0;translate:0 0;filter:blur(6px)}
.still.enter{opacity:0;translate:0 16px}
.still .hold{position:absolute;inset:0;background:rgba(9,9,13,.78);display:grid;place-items:center;color:var(--ink);font-weight:650;
  clip-path:inset(100% 0 0 0);transition:clip-path 180ms var(--ease-out)}
.still.holding .hold{clip-path:inset(0 0 0 0);transition:clip-path 600ms linear}
.still .hold span{display:flex;align-items:center;gap:8px}
.duel-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px}

/* ---------- loading ---------- */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.loadblob{width:220px;height:220px}
.loadline{margin-top:6px;color:var(--muted);height:20px;transition:opacity 160ms ease, filter 160ms ease}
.loadline.swap{opacity:0;filter:blur(3px)}

/* ---------- poster ---------- */
.poster{position:relative;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 24px 60px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06)}
.poster svg{position:absolute;inset:0;width:100%;height:100%}
.poster .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%)}
.poster .ptitle{position:absolute;left:10%;right:10%;bottom:8%;font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:.92;color:#fff;text-transform:uppercase;text-wrap:balance}
.poster .pmark{position:absolute;top:7%;left:10%;font-family:var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.75)}

/* ---------- reveal ---------- */
.reveal{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-height:0}
.poster-wrap{perspective:900px;margin-top:4px}
#rvPoster{width:clamp(150px,43vw,190px);aspect-ratio:2/3;max-width:100%}
#rvPoster .ptitle{font-size:24px}
#rvPoster .pmark{font-size:8px}
.rv-body{transition:opacity 160ms ease, filter 160ms ease, scale 160ms var(--ease-out)}
.rv-body.swap{opacity:0;filter:blur(6px);scale:.98}
.rv-kicker{color:var(--gold);margin-top:16px}
.rv-title{font-family:var(--f-display);font-weight:750;font-size:28px;letter-spacing:-.025em;line-height:1.02;margin:6px 0 0;text-wrap:balance}
.rv-meta{color:var(--muted);font-size:13.5px;margin-top:6px}
.rv-why{color:var(--ink-2);font-size:14.5px;margin:10px auto 0;max-width:32ch}
.whybtn{color:var(--gold);font-size:13px;font-weight:650;margin-top:6px;padding:6px 8px;border-radius:10px}
.rv-actions{width:100%;margin-top:auto;display:grid;gap:8px;padding-top:12px}
.aff{color:var(--muted);font-size:10px;height:12px}
.quiet{display:flex;justify-content:space-around}
.quiet button{color:var(--ink-2);font-size:14px;font-weight:600;padding:10px 10px;border-radius:12px}
.quiet button[disabled]{opacity:.35}
.avatars{display:flex;justify-content:center;margin-top:12px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--on-lens);box-shadow:0 0 0 2px var(--deep);margin-left:-6px}
.av:first-child{margin-left:0}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);pointer-events:none;left:50%;top:30%}

/* ---------- done ---------- */
.doneblob{width:200px;height:200px}
.done-q{font-family:var(--f-display);font-weight:750;font-size:40px;letter-spacing:-.03em;line-height:1;margin:6px 0 0}
.mini{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);text-align:left;margin-top:22px;width:100%}
.mini .thumb{width:40px;height:56px;border-radius:8px;overflow:hidden;position:relative;flex:none}
.mini .thumb .ptitle{display:none}
.checkin{margin-top:18px;width:100%;text-align:left}
.checkin .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.checkin .row3 .btn{height:48px;font-size:14px}
.checkin .row3 .btn.sel{background:var(--gold);color:var(--on-lens)}

/* ---------- room ---------- */
.codecard{margin-top:18px;border-radius:24px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);padding:16px;display:flex;gap:14px;align-items:center}
.code{font-family:var(--f-mono);font-size:26px;letter-spacing:.14em;font-weight:500;white-space:nowrap}
.qr{width:78px;height:78px;border-radius:12px;background:#F1F0F7;padding:6px;flex:none}
.qr canvas{width:100%;height:100%;image-rendering:pixelated}
.copy{margin-top:8px;display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:13.5px;font-weight:650;padding:6px 0}
.copy svg{width:15px;height:15px}
.people{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.person{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair);
  transition:opacity 320ms var(--ease-out), translate 320ms var(--ease-out)}
.person.pre{opacity:0;translate:0 10px}
.person .av{width:34px;height:34px;margin:0;box-shadow:none;font-size:13px}
.person b{font-weight:650}
.person .state{margin-left:auto;color:var(--muted)}
.person .state.ready{color:var(--mint)}
.waitmsg{color:var(--muted);margin-top:14px;font-size:14px;min-height:20px}

.finalists{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.fin{display:flex;align-items:center;gap:12px;padding:10px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);position:relative;
  transition:box-shadow 200ms ease, opacity 220ms ease, scale 140ms var(--ease-out)}
.fin .thumb{width:52px;height:74px;border-radius:10px;overflow:hidden;position:relative;flex:none}
.fin .thumb .ptitle{display:none}
.fin .t{min-width:0;flex:1;text-align:left}
.fin .t b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.fin .t small{color:var(--muted);font-size:12.5px}
.fin .votes{display:flex;margin-top:6px;min-height:22px}
.fin .votes .av{width:22px;height:22px;font-size:10px;margin-left:-4px;box-shadow:0 0 0 2px var(--raise)}
.fin .votes .av:first-child{margin-left:0}
.vote-in{animation:none}
.approve{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--hair-2);color:transparent;flex:none;
  transition:background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, scale 140ms var(--ease-out)}
.approve svg{width:18px;height:18px}
.approve[aria-pressed="true"]{background:var(--gold);color:var(--on-lens);box-shadow:none}
.approve:active{scale:.92}
.veto{font-size:12px;color:var(--muted);font-weight:650;padding:6px 4px}
.fin.vetoed{opacity:.4}
.fin .strike{position:absolute;left:14px;right:14px;top:50%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
.fin.vetoed .strike{transform:scaleX(1)}
.fin.win{box-shadow:inset 0 0 0 2px var(--gold)}
.count{position:absolute;inset:0;display:grid;place-items:center;z-index:30;pointer-events:none;font-family:var(--f-display);font-weight:800;font-size:120px;letter-spacing:-.04em;color:var(--ink)}

/* ---------- profile ---------- */
.artist{height:40px;padding:0 14px;font-size:14px}
.counter{color:var(--muted);white-space:nowrap;flex:none}
.scare{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.scare .choice{flex-direction:row;justify-content:flex-start;min-height:62px;padding:8px 16px;gap:14px;font-size:15px;border-radius:18px}
.scare .choice img{width:44px;height:44px}
.scare.decided .choice.after{opacity:.32}
.pocket{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.pocket .choice{min-height:104px;font-size:14px}
.pocket svg{width:34px;height:34px;color:var(--gold)}
.fcard{margin-top:16px;border-radius:28px;padding:22px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, rgba(185,166,255,.22), transparent 60%), var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2)}
.fcard .lensring{width:150px;margin:10px auto 12px}
.fcard h3{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;margin:0}
.fcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:left;margin:16px 0 0;font-size:14px}
.fcard dt{color:var(--muted)}
.fcard dd{margin:0;font-weight:600}

/* ---------- toasts ---------- */
.toasts{position:absolute;top:12px;left:68px;right:68px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{padding:10px 14px;border-radius:14px;background:rgba(30,30,40,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px var(--hair-2);
  font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;max-width:100%;text-align:center;line-height:1.3;
  opacity:0;translate:0 -110%;transition:opacity 260ms var(--ease-out), translate 300ms var(--ease-out)}
.toast.in{opacity:1;translate:0 0}
.toast.out{opacity:0;translate:0 -40%;transition-duration:160ms}
.toast i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- sheet ---------- */
.backdrop{position:absolute;inset:0;background:rgba(4,4,8,.55);opacity:0;pointer-events:none;transition:opacity 260ms ease;z-index:40}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;background:var(--raise);border-radius:28px 28px 0 0;box-shadow:0 -1px 0 var(--hair-2), 0 -20px 60px rgba(0,0,0,.4);
  padding:10px 22px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform 420ms var(--ease-drawer);max-height:86%;display:flex;flex-direction:column}
.sheet.on{transform:translateY(0)}
.sheet.dragging{transition:none}
.handle{width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.18);margin:0 auto 14px;flex:none}
.handlezone{padding:6px 0 4px;margin:-10px -22px 0;touch-action:none;cursor:grab}
.sheet h4{font-family:var(--f-display);font-weight:750;font-size:24px;letter-spacing:-.02em;margin:0}
.sheet p{color:var(--ink-2);margin:8px 0 0}
.field{margin-top:16px;display:flex;gap:8px}
.field input{flex:1;min-width:0;height:52px;border-radius:16px;border:0;background:var(--deep);color:var(--ink);padding:0 16px;font:inherit;font-size:15px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.field input::placeholder{color:var(--muted)}
.field .btn{width:auto;padding:0 20px;height:52px}
.sheet .divider{height:1px;background:var(--hair-2);margin:18px 0}
.whyrows{display:grid;gap:10px;margin-top:14px}
.whyrow{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:14px;align-items:baseline}
.whyrow span:first-child{color:var(--muted)}
.meter{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--lens);transform-origin:left;transition:transform 300ms var(--ease-out)}

/* ---------- engine rail ---------- */
.rail{overflow-x:hidden;width:340px;height:min(844px,100%);display:flex;flex-direction:column;gap:14px;flex:none;overflow-y:auto;scrollbar-width:none;padding-right:2px}
.rail::-webkit-scrollbar{display:none}
@media (max-width:980px){.rail{display:none}}
.rail-head{display:flex;align-items:center;justify-content:space-between}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--mint)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(214,255,92,.15)}
.rail h1{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.03em;margin:0;line-height:1}
.rail p{color:var(--muted);margin:0;font-size:13.5px}
.rblock{border-radius:20px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--hair);padding:14px}
.rblock .mono{color:var(--muted);display:block;margin-bottom:10px}
.tg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.tg div{font-size:12.5px;color:var(--ink-2)}
.tg b{font-family:var(--f-mono);font-weight:500;color:var(--ink);float:right;font-variant-numeric:tabular-nums}
.gates{display:flex;flex-wrap:wrap;gap:6px}
.gates span{font-size:12px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-2)}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.rank li{display:grid;grid-template-columns:18px 1fr 44px;gap:8px;align-items:center;font-size:12.5px}
.rank li .n{color:var(--muted);font-family:var(--f-mono)}
.rank li .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank li .bar{grid-column:2 / 3;height:3px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:-3px}
.rank li .bar i{display:block;height:100%;background:var(--gold);transform-origin:left;transition:transform 300ms var(--ease-out)}
.rank li .sc{font-family:var(--f-mono);text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rank li.out{opacity:.35}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2)}
.log li b{color:var(--gold);font-weight:600}
.rail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rail-actions .btn{height:44px;font-size:14px}

@media (prefers-reduced-motion: reduce){
  .screen,.screen.is-active{translate:none!important;filter:none!important}
  .screen [data-s]{translate:none!important}
  .still,.toast,.person{translate:none!important}
  .sheet{transition:transform 200ms ease}
}

[hidden]{display:none!important}
#sheetBody{min-height:0}
[data-screen="home"]{padding-top:26px}
.screen.scroll{overflow-x:hidden}

/* ================= v2 additions ================= */
.setup{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair);text-align:left}
.setup-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.setup b{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup small{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.setup-edit{color:var(--gold);font-weight:650;font-size:14px;flex:none}
@media (hover:hover) and (pointer:fine){.setup:hover{background:rgba(255,255,255,.05)}}

.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--deep);border-radius:14px;padding:4px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.seg button{position:relative;z-index:1;height:40px;border-radius:10px;font-weight:650;font-size:14px;color:var(--ink-2);transition:color 200ms ease}
.seg button[aria-checked="true"]{color:var(--on-lens)}
.seg .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:10px;background:var(--gold);transition:transform 280ms var(--ease-out)}
.seg.small button{height:32px;font-size:12.5px}
.sheet-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:18px 0 8px}
.sheet-lbl .mono{color:var(--muted)}
.doneby{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:opacity 140ms ease, filter 140ms ease}
.doneby.swap{opacity:0;filter:blur(3px)}

.tap-hint{font-size:13px;color:var(--muted);margin-top:6px}
.edge{position:absolute;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);opacity:.32;pointer-events:none;font-family:var(--f-mono)}
.e-top{top:4px;left:50%;translate:-50% 0}
.e-bot{bottom:52px;left:50%;translate:-50% 0}
.e-left{left:12px;top:50%;translate:0 -50%;writing-mode:vertical-rl;rotate:180deg}
.e-right{right:12px;top:50%;translate:0 -50%;writing-mode:vertical-rl}
.readout{position:absolute;left:50%;bottom:8px;translate:-50% 0;padding:8px 14px;border-radius:999px;background:rgba(9,9,13,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:13.5px;font-weight:650;white-space:nowrap;pointer-events:none}
.readout span{display:inline-block;transition:opacity 140ms ease, filter 140ms ease}
.readout span.swap{opacity:0;filter:blur(3px)}
.finger{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);box-shadow:0 0 0 1.5px rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.35);pointer-events:none;opacity:0}
.pad:focus-visible{outline:2px solid var(--gold);outline-offset:-8px;border-radius:28px}
.tune-foot{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding-top:10px;min-height:0}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset{width:auto;height:auto;border-radius:16px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:650;color:var(--ink-2);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair);overflow:visible}
.preset canvas{width:38px;height:38px}
.preset[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--ink)}
#lockBtn.done{background:var(--mint)}

.ask{margin-top:16px;width:100%;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border-radius:20px;text-align:left;position:relative;
  background:linear-gradient(135deg, rgba(214,255,92,.10), rgba(185,166,255,.12));box-shadow:inset 0 0 0 1px var(--hair-2)}
.ask .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--gold)}
.ask .ic svg{width:20px;height:20px}
.ask b{display:block;font-size:15px;padding-right:26px}
.ask small{color:var(--ink-2);font-size:13px;display:block;margin-top:2px}
.ask .ask-actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:8px}
.ask .ask-actions .btn{height:44px;font-size:14px}
.ask .ask-actions .linkbtn{padding:0 12px}
.ask .x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.ask .x svg{width:14px;height:14px}

.authbtns{display:grid;gap:8px;margin-top:16px}
.authbtns .btn{background:var(--ink);color:#09090D;box-shadow:none}
.authbtns .btn.alt{background:var(--raise-2);color:var(--ink)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair-2)}
.fine{font-size:12px;color:var(--muted);margin-top:12px}
.steps{display:grid;gap:10px;margin-top:14px;counter-reset:s}
.steps div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:14px}
.steps div::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--raise-2);font-weight:700;font-size:13px}

.sharecard{margin-top:14px;border-radius:24px;padding:14px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair)}
.sharethumb{width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;position:relative;margin-bottom:12px;max-width:100%}
.sharethumb svg{position:absolute;inset:0;width:100%;height:100%}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair);flex:none}
.tabs button{height:34px;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--muted);transition:background-color 180ms ease,color 180ms ease}
.tabs button[aria-selected="true"]{background:var(--raise-2);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.tabs button:hover{color:var(--ink)}}
.railpanel{display:flex;flex-direction:column;gap:12px}
.sl{display:grid;gap:4px}
.sl .row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-2)}
.sl .row b{font-family:var(--f-mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sl small{font-size:11.5px;color:var(--muted)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);margin-top:-7px;box-shadow:0 0 0 4px rgba(214,255,92,.18);transition:scale 140ms var(--ease-out)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--gold)}
input[type=range]:active::-webkit-slider-thumb{scale:1.15}
.labnote{font-size:12.5px;color:var(--muted);margin:0}
.minirank{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.minirank li{display:grid;grid-template-columns:16px 1fr 40px;gap:8px;font-size:12.5px;align-items:center}
.minirank .n{color:var(--muted);font-family:var(--f-mono)}
.minirank .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minirank .sc{font-family:var(--f-mono);text-align:right;color:var(--ink-2)}
.minirank li.out{opacity:.35}
.vec{display:grid;grid-template-columns:72px 1fr 32px;gap:6px 8px;font-size:11.5px;align-items:center;color:var(--ink-2)}
.vec .b{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.vec .b i{display:block;height:100%;background:var(--lens);transform-origin:left}
.vec .v{font-family:var(--f-mono);text-align:right}
.rule{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px;padding:9px 0;border-top:1px solid var(--hair)}
.rule:first-of-type{border-top:0;padding-top:0}
.rule b{font-weight:650;color:var(--ink)}
.rule small{grid-column:1 / -1;color:var(--muted);font-size:11.5px}
.st{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:999px;align-self:start;white-space:nowrap}
.st.ok{background:rgba(214,255,92,.12);color:var(--mint)}
.st.wait{background:rgba(255,255,255,.05);color:var(--muted)}
.st.done{background:rgba(214,255,92,.14);color:var(--gold)}
.entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.entry .btn{height:auto;min-height:52px;padding:8px 12px;font-size:12.5px;border-radius:14px;line-height:1.25;text-align:left;display:grid;justify-items:start;align-content:center;gap:2px;min-width:0}
.entry .btn .labnote{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:12.5px;color:var(--ink-2)}
.kv b{font-family:var(--f-mono);font-weight:500;color:var(--ink);text-align:right}
.codebox{font-family:var(--f-mono);font-size:10.5px;line-height:1.5;background:var(--deep);border-radius:12px;padding:10px;box-shadow:inset 0 0 0 1px var(--hair);white-space:pre-wrap;color:var(--ink-2);max-height:150px;overflow:auto;margin:0}
.input-row{display:flex;gap:6px}
.input-row input{flex:1;min-width:0;height:40px;border-radius:12px;border:0;background:var(--deep);color:var(--ink);padding:0 12px;font:inherit;font-size:13.5px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.input-row .btn{width:auto;height:40px;padding:0 14px;font-size:13px;flex:none}
.rblock .btn.sm{height:40px;font-size:13px}
.thinking{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--gold);animation:spin .6s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.keyrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:12.5px;padding:8px 0;border-top:1px solid var(--hair)}
.keyrow:first-of-type{border-top:0}
.keyrow code{font-family:var(--f-mono);font-size:11.5px;color:var(--gold)}
.keyrow small{grid-column:1 / -1;color:var(--muted);font-size:11.5px}
.keyrow a{color:var(--ink);font-weight:600;font-size:12px}
.lab-sheet .rblock{background:rgba(255,255,255,.02)}
.pill{cursor:pointer}
@media (hover:hover) and (pointer:fine){.pill:hover{color:var(--ink)}}

/* ================= v3 additions ================= */
.choices.six{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);flex:1;min-height:0;margin-top:18px;gap:10px}
.choices.six .choice{min-height:0;padding:12px 10px;gap:8px;font-size:14.5px;line-height:1.2}
.choices.six .choice img{width:58px;height:58px}
.choices.four{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;flex:1;min-height:0;margin-top:18px;gap:10px}
.choices.four .choice{min-height:0;gap:6px;padding:14px 10px}
.choices.four .choice img{width:72px;height:72px}
.choices.four .choice small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
.choices.four .choice b{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em}

.labhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.labhead .linkbtn{padding:6px 4px}
.labgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:10px;margin-top:16px}
.labtile{position:relative;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, hsla(var(--h),70%,60%,.30), hsla(var(--h),50%,30%,.14) 60%, rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--hair);
  transition:scale 140ms var(--ease-out), opacity 220ms ease, filter 220ms ease, box-shadow 200ms ease}
.labtile:active{scale:.97}
.labtile img{width:clamp(56px,22vw,88px);height:auto;aspect-ratio:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.labtile span{font-size:13px;font-weight:650;color:var(--ink-2)}
.labgrid.decided .labtile:not(.sel){opacity:.3;filter:blur(1px)}
.labtile.sel{box-shadow:inset 0 0 0 2px var(--gold);scale:1.02}

.where-sub{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.where-sub .tap-hint{margin:0;transition:opacity 160ms ease, filter 160ms ease}
.where-sub .tap-hint.swap{opacity:0;filter:blur(3px)}
.ticks{display:flex;gap:4px}
.wheregrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;margin-top:14px}
.wtile{position:relative;border-radius:22px;overflow:hidden;background:#0E0E14;box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;
  transition:scale 140ms var(--ease-out), opacity 240ms var(--ease-out), filter 240ms ease, translate 300ms var(--ease-out)}
.wtile svg{position:absolute;inset:0;width:100%;height:100%}
.wtile:active{scale:.97}
.wtile .wl{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(9,9,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12.5px;font-weight:650;color:#fff}
.wtile.enter{opacity:0;translate:0 10px}
.wheregrid.decided .wtile:not(.sel){opacity:.15;filter:blur(4px)}
.wtile.sel{box-shadow:0 0 0 2px var(--gold);scale:1.03;z-index:2}

/* deck */
[data-screen="deck"]{padding-bottom:16px}
.deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.deck{position:relative;flex:1;min-height:0;margin-top:12px;margin-bottom:34px}
.card{position:absolute;inset:0;border-radius:28px;perspective:1400px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transform-origin:50% 90%;
  transition:transform 420ms cubic-bezier(0.34,1.4,0.64,1), opacity 260ms ease, filter 260ms ease;will-change:transform}
.card.dragging{transition:none;cursor:grabbing}
.card[data-pos="1"]{transform:translateY(14px) scale(.95);filter:brightness(.7);pointer-events:none}
.card[data-pos="2"]{transform:translateY(28px) scale(.9);filter:brightness(.5);pointer-events:none}
.card[data-pos="3"]{transform:translateY(40px) scale(.86);opacity:0;pointer-events:none}
.card-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 520ms var(--ease-in-out)}
.card.flipped .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:28px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--raise);box-shadow:0 18px 50px -18px rgba(0,0,0,.7), inset 0 0 0 1px var(--hair-2);display:flex;flex-direction:column}
.face.back{transform:rotateY(180deg);padding:18px;gap:10px;overflow:auto}
.cimg{position:relative;flex:1 1 42%;min-height:110px;overflow:hidden}
.cimg > svg{position:absolute;inset:0;width:100%;height:100%}
.cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%, var(--raise) 100%)}
.cimg .ctitle{position:absolute;left:18px;right:18px;bottom:8px;z-index:1;font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.mchip{position:absolute;left:14px;top:14px;z-index:2;padding:6px 11px;border-radius:999px;background:var(--gold);color:var(--on-lens);font-weight:750;font-size:13px;font-variant-numeric:tabular-nums;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tpill{position:absolute;right:12px;top:12px;z-index:2;height:34px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:#fff;background:rgba(9,9,13,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tpill svg{width:14px;height:14px}
.cbody{padding:4px 18px 16px;display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.cmeta{color:var(--muted);font-size:13px}
.cwhy{color:var(--ink-2);font-size:14px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.fp{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.fp .r{display:grid;gap:4px;font-size:11px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.bar{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.08)}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--lens);width:var(--v)}
.bar b{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:#fff;left:var(--t);box-shadow:0 0 0 2px rgba(9,9,13,.6)}
.avail{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}
.avail i{width:8px;height:8px;border-radius:50%;flex:none}
.avail.own{color:var(--mint)}.avail.own i{background:var(--mint)}
.avail.trial{color:var(--gold)}.avail.trial i{background:var(--gold)}
.avail.rent{color:var(--rose)}.avail.rent i{background:var(--rose)}
.fplegend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.fplegend .tk{width:2px;height:10px;background:#fff;border-radius:2px}
.members{display:flex;gap:6px;flex-wrap:wrap}
.mem{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);font-size:12px;font-weight:650;position:relative}
.mem .av{width:22px;height:22px;font-size:9px;margin:0;box-shadow:none}
.mem .pc{font-family:var(--f-mono);font-weight:500;color:var(--ink-2)}
.mem .vote{position:absolute;right:-5px;top:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#09090D;scale:0;transition:scale 260ms cubic-bezier(0.34,1.56,0.64,1)}
.mem .vote.on{scale:1}
.mem .vote.yes{background:var(--mint)}.mem .vote.no{background:var(--coral)}
.stamp{position:absolute;z-index:5;top:26px;padding:6px 12px;border:3px solid currentColor;border-radius:10px;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;opacity:0;pointer-events:none;background:rgba(9,9,13,.25)}
.st-yes{left:20px;color:var(--mint);rotate:-12deg}
.st-no{right:20px;color:var(--coral);rotate:12deg}
.st-later{left:50%;translate:-50% 0;top:auto;bottom:40%;color:var(--violet)}
.st-seen{left:50%;translate:-50% 0;color:#D7D6E0}
.back h4{font-family:var(--f-display);font-weight:750;font-size:20px;margin:0;letter-spacing:-.02em}
.back .sec{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.back .brow{display:grid;grid-template-columns:86px 1fr 34px;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.back .brow .v{font-family:var(--f-mono);text-align:right;color:var(--ink)}
.back .why{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.back .why div{display:flex;justify-content:space-between;gap:10px}
.back .why b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.flipnote{font-size:11.5px;color:var(--muted);text-align:center}
.endcard{position:absolute;inset:0;border-radius:28px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px}
.endcard img{width:80px;height:80px}
.endcard h3{font-family:var(--f-display);font-weight:750;font-size:24px;margin:0;letter-spacing:-.02em}
.endcard .btn{max-width:260px}

.actions{display:flex;align-items:center;justify-content:center;gap:18px;flex:none}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--muted);letter-spacing:.02em}
.act .ab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--raise);box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px var(--hair-2);transition:scale 140ms var(--ease-out), background-color 200ms ease}
.act .ab svg{width:22px;height:22px}
.act.big .ab{width:66px;height:66px}
.act.big .ab svg{width:28px;height:28px}
.act:active .ab{scale:.9}
.act.no .ab{color:var(--coral)}
.act.yes .ab{background:var(--lens);color:var(--on-lens)}
.act.later .ab{color:var(--violet)}
.act.seen .ab{color:#D7D6E0}
.act.trailer .ab{color:var(--ink)}
.act[disabled]{opacity:.35;pointer-events:none}

.matchov{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px;
  background:radial-gradient(80% 60% at 50% 40%, rgba(214,255,92,.20), rgba(9,9,13,.92) 70%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.matchov .big{font-family:var(--f-display);font-weight:800;font-size:44px;letter-spacing:-.035em;line-height:1}
.matchov .mthumb{width:62%;max-width:240px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.matchov .mthumb svg{position:absolute;inset:0;width:100%;height:100%}
.matchov p{color:var(--ink-2);max-width:30ch;margin:0}
.matchov .btn{max-width:300px}

.done-actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin-top:14px}
.done-actions .btn img{width:22px;height:22px}
.checkcard{margin-top:16px;padding:16px;border-radius:22px;background:linear-gradient(135deg, rgba(214,255,92,.10), rgba(185,166,255,.10));box-shadow:inset 0 0 0 1px var(--hair-2);display:grid;gap:10px}
.checkcard .top{display:flex;gap:12px;align-items:center}
.checkcard .thumb{width:40px;height:56px;border-radius:8px;overflow:hidden;position:relative;flex:none}
.checkcard b{font-size:16px}
.checkcard .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.checkcard .row3 .btn{height:46px;font-size:14px}
.checkcard .swapper{transition:opacity 180ms ease, filter 180ms ease}
.checkcard .swapper.swap{opacity:0;filter:blur(4px)}

.nickcard{margin-top:18px;padding:16px;border-radius:22px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);display:grid;gap:6px}
.nickrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nick{font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:-.03em;display:inline-block;transition:opacity 160ms ease, filter 160ms ease, translate 160ms var(--ease-out)}
.nick.swap{opacity:0;filter:blur(4px);translate:0 -6px}
.dice svg{width:20px;height:20px}
.mynick{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.mynick b{font-family:var(--f-display);font-size:20px;letter-spacing:-.02em}

.opt{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px;border-radius:18px;background:var(--deep);box-shadow:inset 0 0 0 1px var(--hair-2);margin-top:10px;text-align:left;width:100%}
.opt b{font-size:15px}
.opt small{grid-column:1;color:var(--muted);font-size:12.5px}
.opt .go{grid-row:1 / span 2;grid-column:2;height:40px;padding:0 14px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:13.5px;background:var(--raise-2)}
.opt.best{box-shadow:inset 0 0 0 1.5px var(--gold)}
.opt.best .go{background:var(--lens);color:var(--on-lens)}
.opt .tag{grid-column:1;justify-self:start;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.laterlist{display:grid;gap:8px;margin-top:14px}
.lrow{display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px;background:var(--deep);box-shadow:inset 0 0 0 1px var(--hair)}
.lrow .thumb{width:38px;height:54px;border-radius:8px;overflow:hidden;position:relative;flex:none}
.lrow .t{flex:1;min-width:0}
.lrow b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow small{color:var(--muted);font-size:12px}
.note{padding:10px 12px;border-radius:14px;background:rgba(214,255,92,.08);box-shadow:inset 0 0 0 1px rgba(214,255,92,.2);font-size:13px;color:var(--ink-2);margin-top:12px}
.tvopt{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--hair)}
.tvopt:first-of-type{border-top:0}
.tvopt .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--deep);font-weight:750}
.tvopt b{display:block;font-size:15px}
.tvopt small{color:var(--ink-2);font-size:13px;display:block;margin-top:2px}
.trailerbox{margin-top:14px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;position:relative;max-width:100%}
.trailerbox svg{position:absolute;inset:0;width:100%;height:100%}
.trailerbox .play{position:absolute;inset:0;display:grid;place-items:center}
.trailerbox .play span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:#09090D}
.blend{display:grid;gap:8px;margin-top:12px}
.blend .pct{font-family:var(--f-display);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1}
.blend .twocol{display:grid;grid-template-columns:76px 1fr 1fr;gap:6px 8px;align-items:center;font-size:12px;color:var(--ink-2)}
.tabs{grid-template-columns:repeat(5,1fr)}
.tabs button{font-size:12px}

/* ---------- v4: Lab keys, money, loop ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 .btn,.rblock>.btn.sm{height:40px;font-size:13px}
.kfield{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--hair)}
.kfield:first-of-type{border-top:0;padding-top:4px}
.kfield .kl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.kfield .kl b{font-weight:650}
.kfield .kl a{color:var(--gold);font-size:12px;font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){.kfield .kl a:hover{text-decoration:underline}}
.kfield small{color:var(--muted);font-size:11.5px;line-height:1.4}
.kfield .seg{margin:0}
.kout{font-size:12px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0}
.kout:empty{display:none}
.kout .spinner{width:12px;height:12px}
.kv .st,.kout .st{align-self:center}
.st.no{background:rgba(255,122,184,.14);color:var(--coral)}
.kstat b{text-align:right}
.loop{display:grid;gap:8px}
.loop div{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:12.5px;color:var(--ink-2);align-items:start}
.loop b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(214,255,92,.14);color:var(--gold);font-family:var(--f-mono);font-size:11px;font-weight:500}
.mlinks{display:grid;gap:10px}
.mlink{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:12.5px}
.mlink code{grid-column:1 / -1;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);word-break:break-all;line-height:1.45}
.lab-sheet .rblock{background:rgba(255,255,255,.02)}
.entry .btn:last-child:nth-child(odd){grid-column:auto}

/* ---------- v5: live-only home, private lab ---------- */
body.nolab .rail{display:none}
.homestatus{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-size:13px;color:var(--ink-2);text-align:center}
.homestatus .linkbtn{color:var(--gold);padding:4px 2px}
a.btn{text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:center}
a.pill{text-decoration:none;display:inline-flex;align-items:center}
#demoPill{color:var(--gold)}
.k-pending .note{display:grid}

/* ---------- v6: blurred peek, undo, ratings, photos, host remote ---------- */
.card-in{transition:transform 520ms var(--ease-in-out), filter 320ms ease}
.card[data-pos="1"]{transform:translateY(12px) scale(.95);filter:none}
.card[data-pos="1"] .card-in{filter:blur(18px) brightness(.5) saturate(.7)}
.card[data-pos="1"] .stamp{display:none}
.card[data-pos="2"],.card[data-pos="3"]{opacity:0}
@media (prefers-reduced-motion: reduce){.card-in{transition:none}}
.deck-head{align-items:center}
.deck-head .q{margin-right:auto}
.undo{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:650;color:var(--ink-2);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-2);transition:opacity 180ms ease, color 180ms ease}
.undo svg{width:14px;height:14px}
.undo[disabled]{opacity:.3;pointer-events:none}
@media (hover:hover) and (pointer:fine){.undo:hover{color:var(--ink)}}
.cscore{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cscore b{font-family:var(--f-mono);font-weight:500;color:var(--gold);font-size:11px;letter-spacing:.04em;margin-right:2px}
.cscore .badge{padding:2px 8px;border-radius:999px;background:rgba(185,166,255,.16);color:#D9CFFF;font-size:11px;font-weight:650}
.wtile .wphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.wtile .wl{z-index:1}
.wtile.sel .wphoto{transform:scale(1.04)}
.wcredit{font-size:10.5px;color:var(--muted);margin:0 0 6px;text-align:center;line-height:1.4}
.wcredit a{color:var(--ink-2);text-decoration:none}
.wcredit:empty{display:none}
.remote{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair-2);text-align:left;max-width:300px;width:100%}
.remote b{display:block;font-size:14px}
.remote small{color:var(--muted);font-size:12px}
.remote .av{flex:none}
[data-screen="where"] .duel-foot{flex-direction:column;justify-content:center;gap:4px}
.pbar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;background:var(--gold);transform-origin:left;transition:transform 400ms var(--ease-out)}

/* ---------- v7: pick a name, host decides ---------- */
.nickpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;transition:opacity 140ms ease}
.nickpick.swap{opacity:0}
.nickopt{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 6px;border-radius:999px;font-size:14px;font-weight:650;color:var(--ink-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair-2);transition:background-color 180ms ease, color 180ms ease, box-shadow 180ms ease}
.nickopt .av{width:30px;height:30px;font-size:11px;background:var(--raise-2);color:var(--ink)}
.nickopt[aria-pressed="true"]{color:var(--on-lens);background:var(--gold);box-shadow:none}
.nickopt[aria-pressed="true"] .av{background:rgba(0,0,0,.18);color:var(--on-lens)}
.nickshuffle{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.nickshuffle svg{width:15px;height:15px}
#lobbyTools{flex-wrap:wrap}
#lobbyPick{width:100%;margin-top:0}
.watching{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair-2)}
.watching .av{flex:none}
.watching .wt{flex:1;min-width:0}
.watching b{display:block;font-size:14px}
.watching small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.watching .act{flex:none}
.nickopt .av{margin:0;box-shadow:none}

/* ---------- v8: Logo B (two eyes) + Route 3 "After Hours" ---------- */
body{font-feature-settings:"ss01","tnum" 0}
.shell{background:radial-gradient(60% 50% at 70% 0%, rgba(185,166,255,.12), transparent 70%), var(--night)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;text-transform:none}
.edge{font-family:var(--f-body);letter-spacing:.08em}

/* logo */
.wordmark{display:inline-flex;align-items:center;gap:.08em;font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:0;line-height:1}
.eye{position:relative;display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--ink);flex:none}
.eye::after{content:"";position:absolute;width:.4em;height:.4em;border-radius:50%;background:var(--night);left:.36em;top:.14em;transition:translate 420ms var(--ease-out)}
.wordmark:hover .eye::after,.wordmark:focus-visible .eye::after{translate:-.3em .1em}
@media (prefers-reduced-motion: reduce){.eye::after{transition:none}}

/* display face: Unbounded runs wide, so every display size steps down */
.q{font-weight:700;font-size:27px;line-height:1.08;letter-spacing:-.01em;font-variation-settings:normal}
.home-q{font-size:30px}
.rv-title{font-size:23px;letter-spacing:-.01em;line-height:1.08}
.done-q{font-size:32px;letter-spacing:-.01em;line-height:1.05}
.matchov .big{font-size:34px;letter-spacing:-.01em}
.count{font-size:96px;letter-spacing:-.02em}
.nick{font-size:25px;letter-spacing:-.01em}
.fcard h3{font-size:24px;letter-spacing:-.01em}
.rail h1{font-size:24px;letter-spacing:-.01em}
.sheet h4{font-size:20px;letter-spacing:-.01em}
.fin .t b{font-size:15px;letter-spacing:0}
.choice.row{font-size:15px;letter-spacing:0}
.choices.four .choice b{font-size:14.5px;letter-spacing:0}
.endcard h3{font-size:20px;letter-spacing:-.01em}
.back h4{font-size:17px;letter-spacing:0}
.blend .pct{font-size:36px;letter-spacing:-.01em}
.mynick b{font-size:17px;letter-spacing:0}
.poster .ptitle{letter-spacing:-.01em}
.choice{font-weight:600}

/* lime stays small: buttons, chips, bars. The ring is the only gradient */
.lensring{background:var(--ring)}
.btn-lens{box-shadow:0 10px 30px -14px rgba(214,255,92,.45)}
.chip[aria-pressed="true"],.nickopt[aria-pressed="true"],.checkin .row3 .btn.sel{color:var(--on-lens)}
.avail.rent{color:var(--ink-2)}.avail.rent i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.labtag{color:var(--gold)}

/* ---------- swipe card ---------- */
[data-screen="deck"] .deck-head .q{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.deck{margin-top:10px;margin-bottom:26px}
.card[data-pos="1"]{transform:translateY(18px) scale(.94)}
.card[data-pos="1"] .card-in{filter:none}
.card[data-pos="1"] .face{background:#1C1C26}
.card[data-pos="1"] .cimg,.card[data-pos="1"] .cbody{filter:blur(12px) brightness(.6) saturate(.8)}
.cimg{flex:1 1 46%}
.cimg::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(21,21,28,.8) 75%, var(--raise) 100%)}
.cimg .ctitle{font-size:23px;font-weight:700;letter-spacing:-.01em;line-height:1.06;bottom:10px}
.mchip{font-weight:700;color:var(--on-lens)}
.cbody{gap:10px;padding:6px 18px 14px}
.cmeta{font-size:13px}
.cwhy{font-size:14.5px;color:var(--ink-2)}
.fphead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.fplegend{display:flex;align-items:center;gap:6px;font-size:11.5px}
.fplegend .lf{width:12px;height:5px;border-radius:3px;background:var(--lens)}
.fplegend .tk{width:3px;height:11px;border-radius:2px;background:var(--violet);margin-left:6px}
.fp{gap:9px 18px}
.fp .r{font-family:var(--f-body);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.bar{background:rgba(241,240,247,.09)}
.bar i{background:var(--lens)}
.bar b{width:3px;background:var(--violet);box-shadow:0 0 0 2px var(--raise)}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--hair);min-height:30px}
.cfoot .cscore{margin:0;flex-wrap:nowrap;gap:10px;font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.cfoot .cscore b{font-family:var(--f-mono);color:var(--muted);font-weight:400;font-size:12px;letter-spacing:0;margin-right:3px}
.cfoot .avail{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avail.own{color:var(--ink)}
.back .sec{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.back .brow .v,.back .why b{font-family:var(--f-mono)}
.stamp{font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.02em}
.st-later{color:var(--violet)}

/* action row: five evenly spaced, Undo at the left edge of thumb reach */
.actions{gap:12px;align-items:flex-end}
.act{font-size:11px;font-weight:600;white-space:nowrap}
.act.act-undo .ab{width:44px;height:44px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.act.act-undo .ab svg{width:18px;height:18px}
.act.big .ab{width:62px;height:62px}
.act.yes .ab{box-shadow:0 10px 28px -12px rgba(214,255,92,.55)}
.act.yes{color:var(--ink)}
.act.seen .ab{color:var(--ink-2)}
.matchov{background:radial-gradient(80% 60% at 50% 40%, rgba(214,255,92,.14), rgba(9,9,13,.94) 70%)}


/* =========================================================
   v9 · onboarding, the home choice, invites, names, share sheet
   ========================================================= */
/* home: the lens gets smaller so both choices sit above the fold */
[data-screen="home"] .lensring{width:min(150px,40vw);margin:12px auto 14px}
.home-q{text-align:center}
[data-screen="home"] > .sub{text-align:center;margin-inline:auto}
.home-cta{gap:10px;margin-top:20px}
.choicecard{width:100%;display:grid;grid-template-columns:44px 1fr 22px;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border-radius:22px;text-align:left;
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);transition:background-color 180ms ease, scale 120ms var(--ease-out), opacity 200ms ease}
.choicecard:active{scale:.98}
.choicecard .cc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(241,240,247,.06);color:var(--ink)}
.choicecard .cc-ic svg{width:22px;height:22px}
.choicecard .cc-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.choicecard .cc-t b{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.1}
.choicecard .cc-t small{font-size:13px;line-height:1.3;color:var(--muted)}
.choicecard .cc-go{width:20px;height:20px;color:var(--muted)}
.choicecard.primary{background:var(--lens);color:var(--on-lens);box-shadow:0 14px 34px -16px rgba(214,255,92,.65)}
.choicecard.primary .cc-ic{background:rgba(11,11,16,.10);color:var(--on-lens)}
.choicecard.primary .cc-t small,.choicecard.primary .cc-go{color:rgba(11,11,16,.66)}
.choicecard[disabled]{opacity:.38;pointer-events:none}
@media (hover:hover) and (pointer:fine){.choicecard:not(.primary):hover{background:var(--raise-2)}.choicecard.primary:hover{filter:brightness(1.04)}}
.howbtn{align-self:center;margin-top:6px;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:4px}

/* onboarding: three swipeable slides, one button */
[data-screen="intro"]{padding:22px 0 22px}
.intro-top{display:flex;align-items:center;justify-content:space-between;padding:6px 22px 0}
.intro-top .linkbtn{padding:8px 4px}
.slides{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 22px 4px;min-width:0}
.slide .q{font-size:30px}
.slide .sub{max-width:32ch}
.art{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-bottom:18px}
/* slide 1: a pile of titles becomes one pick */
.a1-stack{position:relative;width:180px;height:120px}
.a1-stack i{position:absolute;inset:0;border-radius:18px;background:var(--raise-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.a1-stack i:nth-child(1){rotate:-9deg;translate:-26px 8px;opacity:.5}
.a1-stack i:nth-child(2){rotate:7deg;translate:24px 4px;opacity:.7}
.a1-stack i:nth-child(3){rotate:-2deg;background:var(--raise)}
.a1-pick{margin-top:-58px;position:relative;width:min(250px,80%);padding:18px 18px 16px;border-radius:22px;background:var(--lens);color:var(--on-lens);display:grid;gap:2px;box-shadow:0 18px 40px -18px rgba(214,255,92,.7)}
.a1-pick .mono{color:rgba(11,11,16,.6)}
.a1-pick b{font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1.05}
.a1-pick small{font-size:13px;color:rgba(11,11,16,.7)}
/* slide 2: the five taps */
.steps5{list-style:none;margin:0;padding:0;width:100%;max-width:320px;display:grid;gap:8px}
.steps5 li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);font-size:15px;font-weight:550}
.steps5 li b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:600;background:var(--lens);color:var(--on-lens)}
.steps5 li:nth-child(4){color:var(--ink-2)}
.steps5 li:nth-child(4) b{background:var(--violet)}
/* slide 3: friends on their own phones, one match */
.a3-people{display:flex;justify-content:center}
.a3-people span{width:64px;height:64px;margin-left:-12px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--on-lens);font-family:var(--f-display);font-weight:800;font-size:19px;box-shadow:0 0 0 4px var(--deep)}
.a3-people span:first-child{margin-left:0}
.a3-names{color:var(--ink-2);font-size:15px;text-align:center}
.a3-names b{color:var(--ink);font-weight:650}
.a3-match{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--lens);color:var(--on-lens);font-family:var(--f-display);font-weight:800;font-size:15px}
.intro-foot{display:grid;gap:16px;padding:12px 22px 0}
.idots{display:flex;justify-content:center;gap:6px}
.idots i{width:8px;height:8px;border-radius:8px;background:rgba(241,240,247,.18);transition:width 260ms var(--ease-out), background-color 260ms ease}
.idots i.on{width:24px;background:var(--lens)}

/* lobby: WhatsApp first, then everything else */
.invite{display:grid;gap:8px;margin-top:20px}
.btn.wa{background:#25D366;color:#06210F;box-shadow:0 12px 30px -14px rgba(37,211,102,.7)}
.btn.wa svg{width:21px;height:21px}
@media (hover:hover) and (pointer:fine){.btn.wa:hover{background:#2FE072}}
.invite .row2 .btn{height:46px;font-size:14px}
.codecard{margin-top:12px;padding:12px 14px;gap:14px}
.codecard .qr{width:72px;height:72px}
.codecard .mono{display:block}
.cc-scan{display:block;font-size:15px;font-weight:650;margin-top:2px}
.codecard .code{font-size:20px;margin-top:2px}
.roomlink{display:block;color:var(--muted);text-transform:none;letter-spacing:.02em;font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seclabel{display:block;color:var(--muted);margin-top:20px}
.seclabel + .people{margin-top:8px}
#lobbyTools{display:block}

/* movie names: three tiles in one row, always */
.nickcard{gap:12px}
.nickhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nickhead .mono{color:var(--muted)}
.nickshuffle{height:32px;padding:0 10px;color:var(--ink-2);background:rgba(241,240,247,.05);box-shadow:inset 0 0 0 1px var(--hair)}
.nickpick{display:block;margin-top:0}
.nickgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;transition:opacity 140ms ease}
.nickgrid.swap{opacity:0}
.nickgrid .nickopt{height:auto;min-height:104px;padding:12px 6px 10px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;
  background:rgba(241,240,247,.04);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);min-width:0}
.nickgrid .nickopt .av{width:40px;height:40px;font-size:13px;color:var(--on-lens);flex:none}
.nickgrid .nickopt .nm{font-size:13px;font-weight:650;line-height:1.2;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nickgrid .nickopt[aria-pressed="true"]{background:var(--lens);color:var(--on-lens);box-shadow:none}
.nickgrid .nickopt[aria-pressed="true"] .av{box-shadow:0 0 0 2px var(--on-lens)}

/* share sheet: the message they'll get, WhatsApp big, the rest in a row */
.msgprev{margin-top:14px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:rgba(241,240,247,.05);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;line-height:1.45;color:var(--ink-2)}
.msgprev a{display:block;margin-top:4px;color:var(--lens);font-family:var(--f-mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .btn.wa{margin-top:14px}
.sharegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:10px}
.sharebtn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:rgba(241,240,247,.04);box-shadow:inset 0 0 0 1px var(--hair);font-size:12px;font-weight:600;color:var(--ink-2);min-width:0}
.sharebtn svg{width:22px;height:22px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.sharebtn:hover{background:var(--raise-2)}}

/* card: the match and the lane badge ride on the image, so the footer keeps room for where to watch */
.ctags{position:absolute;left:14px;top:14px;right:108px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctags .mchip{position:static}
.cbadge{padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:650;color:#fff;background:rgba(9,9,13,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);white-space:nowrap}
.cfoot .avail{flex:1 1 auto}
.cfoot .cscore{flex:none}

/* =========================================================
   v10 · blind date, and a clean card with the full read one tap away
   ========================================================= */
/* blind date: four stories, no titles */
[data-screen="where"] .duel-head{display:block}
[data-screen="where"] > .sub{margin-top:8px}
.bdates{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;margin:16px -4px 0;padding:2px 4px 8px;overflow-y:auto;overscroll-behavior:contain}
.bdate{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:16px 18px 14px;border-radius:22px;text-align:left;
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:opacity 240ms ease, filter 240ms ease, scale 140ms var(--ease-out), translate 320ms var(--ease-out), background-color 180ms ease}
.bdate.enter{opacity:0;translate:0 10px}
.bdate:active{scale:.98}
.bd-p{font-size:16.5px;line-height:1.4;font-weight:550;color:var(--ink);text-wrap:pretty;transition:opacity 150ms ease}
.bd-p::before{content:"“";font-family:var(--f-display);font-weight:800;color:var(--violet);margin-right:3px}
.bd-p::after{content:"”";font-family:var(--f-display);font-weight:800;color:var(--violet);margin-left:2px}
.bd-p.swap{opacity:0}
.bd-m{color:var(--muted);font-size:10.5px}
.bdate.sel{background:var(--lens);box-shadow:0 14px 34px -16px rgba(214,255,92,.65)}
.bdate.sel .bd-p,.bdate.sel .bd-m,.bdate.sel .bd-p::before,.bdate.sel .bd-p::after{color:var(--on-lens)}
.bdates.decided .bdate:not(.sel){opacity:.22;filter:blur(2px)}
@media (hover:hover) and (pointer:fine){.bdate:not(.sel):hover{background:var(--raise-2)}}
[data-screen="where"] .duel-foot{justify-content:center;padding-top:6px}

/* the card: the picture, the title, where to watch. Everything else is behind ⓘ (or a tap) */
.face.front{display:block}
.front .cimg{position:absolute;inset:0;min-height:0;flex:none}
.front .cimg::after{background:linear-gradient(180deg,rgba(9,9,13,.38) 0%,rgba(9,9,13,0) 20%,rgba(9,9,13,0) 44%,rgba(12,12,18,.74) 68%,rgba(15,15,21,.97) 100%)}
.ctags{z-index:3}
.cover{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px 16px;display:flex;flex-direction:column;gap:8px}
.ctrow{display:flex;align-items:flex-end;gap:12px}
.cover .ctitle{position:static;flex:1;min-width:0;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.06;letter-spacing:-.01em;text-wrap:balance;color:#fff}
.cinfo{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(241,240,247,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.cinfo svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.cinfo:hover{background:rgba(241,240,247,.24)}}
.cover .cmeta{color:rgba(241,240,247,.74);font-size:13.5px}
.cover .cfoot{border-top:1px solid rgba(241,240,247,.12);padding-top:10px;min-height:0}
.cbadge.blind{background:var(--violet);color:var(--on-lens);box-shadow:none}
.card[data-pos="1"] .cimg,.card[data-pos="1"] .cover,.card[data-pos="1"] .ctags,.card[data-pos="1"] .tpill{filter:blur(12px) brightness(.6) saturate(.8)}

/* the back: the full read, scrollable */
.face.back{padding:14px 18px 18px;gap:9px;touch-action:pan-y;overscroll-behavior:contain;cursor:default}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.bk-top .mono{color:var(--lens)}
.bk-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:rgba(241,240,247,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.bk-x svg{width:16px;height:16px}
.back h4{font-size:21px;line-height:1.1;margin-top:0;flex:none}
.bk-story{margin:0;font-size:15px;line-height:1.45;color:var(--ink);flex:none}
.bk-why{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2);padding:10px 12px;border-radius:14px;background:rgba(214,255,92,.06);box-shadow:inset 0 0 0 1px rgba(214,255,92,.16);flex:none}
.back .members{flex:none}
.bk-sec{display:flex;align-items:center;justify-content:space-between;gap:8px}
.back .brow,.back .why,.back .sec,.back .flipnote{flex:none}
.bk-top{position:sticky;top:-14px;z-index:2;margin:-14px -18px 0;padding:14px 18px 8px;background:linear-gradient(180deg,var(--raise) 78%,rgba(21,21,28,0))}
@media (max-height:780px){
  [data-screen="where"] .q{font-size:24px}
  .bdates{gap:8px;margin-top:12px}
  .bdate{padding:12px 14px 11px;gap:7px;border-radius:18px}
  .bd-p{font-size:15px;line-height:1.36}
}

/* =========================================================
   v11 · gut check: breathe, four fast rounds, a reading
   ========================================================= */
[data-screen="where"]{padding-bottom:18px}
.gut{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.gut > div{display:none;flex:1;min-height:0;flex-direction:column}
.gut[data-phase="breathe"] .gut-breathe,.gut[data-phase="round"] .gut-round,.gut[data-phase="read"] .gut-read{display:flex}
/* breathe */
.gut-breathe{align-items:center;justify-content:center;text-align:center;gap:22px;cursor:pointer}
.gb-orb{position:relative;width:min(220px,56vw);aspect-ratio:1;display:grid;place-items:center}
.gb-orb::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(214,255,92,.30),rgba(185,166,255,.14) 55%,transparent);scale:.5;opacity:.6;transition:scale 1700ms cubic-bezier(.45,0,.55,1), opacity 1700ms ease;pointer-events:none}
.gb-orb i{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F4FFD0 0%,#D6FF5C 30%,#B9A6FF 72%,#7C68E8 100%);scale:.55;transition:scale 1700ms cubic-bezier(.45,0,.55,1)}
.gut.inhale .gb-orb i{scale:1}.gut.inhale .gb-orb::before{scale:1;opacity:1}
.gut.exhale .gb-orb i{scale:.62}.gut.exhale .gb-orb::before{scale:.6;opacity:.5}
.gb-say{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.15;margin:0;min-height:2.4em}
.gb-skip{color:var(--muted);font-size:13px;margin:0}
/* rounds */
.gr-head .q{margin-top:6px;font-size:26px}
.gr-timer{height:6px;border-radius:6px;background:rgba(241,240,247,.08);margin:14px 0 14px;overflow:hidden;flex:none}
.gr-timer i{display:block;height:100%;border-radius:inherit;background:var(--lens);transform-origin:left;transform:scaleX(1)}
.gr-timer i.run{animation:grdrain linear forwards}
.gr-timer i.late{background:var(--coral)}
@keyframes grdrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.gr-art{flex:0 0 auto;height:min(30vh,210px);border-radius:22px;background:#F1F0F7;display:grid;place-items:center;margin-bottom:10px;overflow:hidden}
.gr-art svg{height:92%;width:auto}
.gr-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.gtile{position:relative;border-radius:24px;overflow:hidden;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);display:grid;place-items:center;min-height:0;
  transition:opacity 200ms ease, filter 200ms ease, scale 140ms var(--ease-out), translate 260ms var(--ease-out), box-shadow 160ms ease}
.gtile.enter{opacity:0;scale:.94}
.gtile:active{scale:.96}
.gtile > svg{width:78%;height:78%;overflow:visible}
.gtile .gt-emoji{width:58%;height:auto;max-height:70%;object-fit:contain}
.gtile .gt-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photos .gtile > svg,.gr-grid.fill .gtile > svg{position:absolute;inset:0;width:100%;height:100%}
.gt-swatch{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 25%,var(--a),var(--b));animation:gtswirl 6s ease-in-out infinite alternate}
@keyframes gtswirl{from{filter:hue-rotate(0deg) saturate(1)}to{filter:hue-rotate(18deg) saturate(1.15)}}
.gr-grid.words{flex:0 0 auto;grid-template-rows:auto auto}
.gr-grid.words .gtile{min-height:64px;padding:12px}
.gt-l{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--ink)}
.gtile.sel{box-shadow:0 0 0 3px var(--lens), 0 14px 34px -14px rgba(214,255,92,.6);scale:1.03;z-index:2}
.gtile.sel .gt-l{color:var(--lens)}
.gr-grid.decided .gtile:not(.sel){opacity:.18;filter:blur(3px)}
.gr-grid.timeout .gtile{opacity:.18;filter:blur(3px)}
/* motion tiles */
.gt-motion{position:absolute;inset:0}
.gt-motion i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lens)}
.gt-motion i:nth-child(1){left:22%;top:30%}.gt-motion i:nth-child(2){left:62%;top:22%;background:var(--violet)}.gt-motion i:nth-child(3){left:44%;top:52%;background:var(--coral)}
.gt-motion i:nth-child(4){left:70%;top:66%}.gt-motion i:nth-child(5){left:24%;top:70%;background:var(--violet)}
.gt-motion.drift i{animation:gtdrift 5s ease-in-out infinite alternate}
.gt-motion.drift i:nth-child(2n){animation-duration:6.5s;animation-direction:alternate-reverse}
@keyframes gtdrift{from{translate:-6px -8px}to{translate:8px 10px}}
.gt-motion.flicker i{animation:gtflick .6s steps(2,jump-none) infinite}
.gt-motion.flicker i:nth-child(2){animation-delay:.11s}.gt-motion.flicker i:nth-child(3){animation-delay:.23s}.gt-motion.flicker i:nth-child(4){animation-delay:.07s}.gt-motion.flicker i:nth-child(5){animation-delay:.31s}
@keyframes gtflick{from{opacity:1;scale:1}to{opacity:.25;scale:.7}}
.gt-motion.spiral{animation:gtspin 2.6s linear infinite}
.gt-motion.spiral i{transition:none}
.gt-motion.spiral i:nth-child(1){left:46%;top:14%}.gt-motion.spiral i:nth-child(2){left:72%;top:40%}.gt-motion.spiral i:nth-child(3){left:58%;top:70%}.gt-motion.spiral i:nth-child(4){left:28%;top:62%}.gt-motion.spiral i:nth-child(5){left:46%;top:44%;width:10px;height:10px}
@keyframes gtspin{to{rotate:360deg}}
.gt-motion.bounce i{animation:gtbounce .7s cubic-bezier(.3,0,.7,1) infinite alternate}
.gt-motion.bounce i:nth-child(2){animation-delay:.12s}.gt-motion.bounce i:nth-child(3){animation-delay:.24s}.gt-motion.bounce i:nth-child(4){animation-delay:.36s}.gt-motion.bounce i:nth-child(5){animation-delay:.48s}
@keyframes gtbounce{from{translate:0 0}to{translate:0 -22px}}
/* reading */
.gut-read{justify-content:center;gap:4px}
.gut-read .q{font-size:30px;margin-top:8px}
.grd-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.grd-words span{padding:8px 14px;border-radius:999px;background:rgba(185,166,255,.14);color:#DCD3FF;font-weight:650;font-size:14px;box-shadow:inset 0 0 0 1px rgba(185,166,255,.28);animation:grdin 380ms var(--ease-out) both}
.grd-words span:nth-child(2){animation-delay:80ms}.grd-words span:nth-child(3){animation-delay:160ms}.grd-words span:nth-child(4){animation-delay:240ms}
@keyframes grdin{from{opacity:0;translate:0 8px}}
.gut-read .sub{margin-top:18px}
/* wait screen: each person's gut words */
.person .pn{display:flex;flex-direction:column;min-width:0}
.gutnote{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:780px){ .gr-head .q{font-size:23px} .gr-timer{margin:10px 0} .gr-art{height:min(26vh,170px)} }
@media (prefers-reduced-motion: reduce){
  .gt-motion,.gt-motion i,.gt-swatch{animation:none!important}
  .gb-orb i{transition:none}
}

/* =========================================================
   v12 · drawn questions, the evening slider, the one-time setup, the room clock, why-it-fits lines
   ========================================================= */
/* the question timer: a line that slides away */
.qtimer{height:4px;border-radius:4px;background:rgba(241,240,247,.07);overflow:hidden;margin:-4px 0 14px;flex:none}
.qtimer i{display:block;height:100%;border-radius:inherit;background:var(--lens);transform-origin:left;transform:scaleX(1);opacity:.85}
.qtimer i.run{animation:grdrain linear forwards}
.qtimer i.late{background:var(--coral)}
/* drawn answer tiles: the picture fills the tile, one word at the bottom */
.art-grid{flex:1;min-height:0;display:grid;gap:10px;margin-top:16px}
.art-grid.six{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.art-grid.four{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.art-grid.three{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
.arttile{position:relative;min-height:0;padding:0;border-radius:22px;overflow:hidden;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);display:block;text-align:left;
  transition:opacity 200ms ease, filter 200ms ease, scale 140ms var(--ease-out), box-shadow 160ms ease}
.arttile > svg{position:absolute;inset:0;width:100%;height:100%}
.arttile:active{scale:.97}
.arttile .at-l{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(9,9,13,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:650;color:#fff}
.arttile.sel{box-shadow:0 0 0 3px var(--lens), 0 14px 34px -14px rgba(214,255,92,.6);scale:1.02;z-index:2}
.art-grid.decided .arttile:not(.sel){opacity:.2;filter:blur(3px)}
.art-grid.three .arttile .at-l{font-size:15px;left:14px;bottom:14px;padding:7px 13px}
/* how long have you got: drag along the evening */
.evening{position:relative;margin-top:22px;height:150px;border-radius:24px;overflow:visible;touch-action:none;cursor:ew-resize;--p:.5}
.ev-art{position:absolute;inset:0;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair-2)}
.ev-art svg{width:100%;height:100%;display:block}
.ev-art::after{content:"";position:absolute;inset:0;left:calc(var(--p) * 100%);background:rgba(9,9,13,.55);transition:left 60ms linear}
.ev-handle{position:absolute;top:50%;left:50%;width:4px;height:120%;translate:-50% -50%;background:var(--lens);border-radius:4px;pointer-events:none}
.ev-moon{position:absolute;left:50%;top:-14px;translate:-50% 0;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#FFFDE8,#F4EE8A);box-shadow:0 0 22px rgba(244,238,138,.7)}
.ev-ticks{position:absolute;left:0;right:0;top:calc(100% + 14px);height:16px}
.ev-ticks span{position:absolute;translate:-50% 0;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.ev-ticks span.end{translate:-100% 0}
.ev-read{margin-top:44px;text-align:center;display:grid;gap:4px}
.ev-read b{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.01em}
.ev-read small{color:var(--ink-2);font-size:15px}
[data-screen="time"] .tune-foot{margin-top:auto}
/* the speed round intro */
.gb-what{color:var(--ink-2);font-size:16px;line-height:1.45;margin:0;text-align:center}
.gut-breathe{cursor:default}
.gb-go{margin-top:6px;width:min(280px,80%)}
/* the one-time setup */
.setupflow{padding-bottom:18px}
.setup-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.setup-top .linkbtn{padding:6px 2px}
.setupflow .q{margin-top:8px}
.setup-foot{margin-top:auto;padding-top:16px}
.setup-foot.row{display:flex;align-items:center;gap:12px}
.setup-foot.row .btn{flex:1}
.setup-foot.row .linkbtn{flex:none}
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.plat{position:relative;display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;border-radius:16px;background:rgba(241,240,247,.04);box-shadow:inset 0 0 0 1px var(--hair-2);text-align:left;font-size:14px;color:var(--ink-2);transition:background-color 160ms ease, color 160ms ease}
.plat .pl-dot{width:12px;height:12px;border-radius:4px;background:var(--tint);flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.plat b{font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plat .tick{width:16px;height:16px;opacity:0;transition:opacity 160ms ease}
.plat[aria-pressed="true"]{background:color-mix(in srgb, var(--tint) 26%, var(--raise));color:var(--ink);box-shadow:inset 0 0 0 2px var(--lens)}
.plat[aria-pressed="true"] .tick{opacity:1;color:var(--lens)}
.toggle{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--ink-2);cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{width:44px;height:26px;border-radius:999px;background:rgba(241,240,247,.14);position:relative;flex:none;transition:background-color 180ms ease}
.toggle span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:translate 200ms var(--ease-out)}
.toggle input:checked + span{background:var(--lens)}
.toggle input:checked + span::after{translate:18px 0;background:var(--on-lens)}
.toggle input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.poster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.poster-grid.laugh{grid-template-columns:repeat(3,minmax(0,1fr))}
.poster{position:relative;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--raise-2);box-shadow:inset 0 0 0 1px var(--hair-2);padding:0;transition:scale 140ms var(--ease-out), box-shadow 160ms ease, opacity 160ms ease}
.poster img,.poster > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .pt-title{position:absolute;left:6px;right:6px;bottom:8px;font-family:var(--f-display);font-weight:700;font-size:12px;line-height:1.1;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.poster .pt-tag{position:absolute;left:6px;bottom:6px;padding:4px 8px;border-radius:999px;background:rgba(9,9,13,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11.5px;font-weight:650;color:#fff}
.pt-check{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--lens);color:var(--on-lens);scale:0;transition:scale 200ms cubic-bezier(0.34,1.56,0.64,1)}
.pt-check svg{width:14px;height:14px}
.poster[aria-pressed="true"],.album[aria-pressed="true"]{box-shadow:0 0 0 3px var(--lens)}
.poster[aria-pressed="true"] .pt-check,.album[aria-pressed="true"] .pt-check{scale:1}
.poster:active,.album:active{scale:.96}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.album{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;padding:0;box-shadow:inset 0 0 0 1px var(--hair-2),0 10px 24px -14px rgba(0,0,0,.7);transition:scale 140ms var(--ease-out), box-shadow 160ms ease}
.album > svg{position:absolute;inset:0;width:100%;height:100%}
.album .al-name{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 7px;background:linear-gradient(180deg,transparent,rgba(9,9,13,.78));font-size:12px;font-weight:650;color:#fff;text-align:left;line-height:1.15}
.stairs{display:grid;gap:8px;margin-top:18px}
.step{position:relative;height:58px;width:var(--w);border-radius:14px;background:var(--c);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;text-align:left;box-shadow:0 10px 24px -16px rgba(0,0,0,.8);transition:opacity 200ms ease, filter 200ms ease, scale 140ms var(--ease-out)}
.step .st-n{font-family:var(--f-mono);font-size:12px;opacity:.75}
.step .st-l{font-weight:650;font-size:15px}
.step:active{scale:.98}
.stairs .step.after{opacity:.28;filter:grayscale(.6)}
.stairs .step.sel{box-shadow:0 0 0 3px var(--coral)}
.pocket-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;flex:1;min-height:0}
.pocket-grid .pk{min-height:120px;padding:10px;gap:6px;font-size:14px}
.pocket-grid .pk svg{width:70px;height:70px}
.joinplats{margin-top:16px}
.joinplats .mono{color:var(--muted);display:block;margin-bottom:8px}
/* setup nudge on home */
.nudge{width:100%;margin-top:10px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(185,166,255,.10);box-shadow:inset 0 0 0 1px rgba(185,166,255,.28);text-align:left}
.nudge .nd-ic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--violet);color:var(--on-lens);font-size:16px;flex:none}
.nudge b{display:block;font-size:14.5px}
.nudge small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
/* Netflix import */
.steps-list{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2);font-size:14px;line-height:1.45}
.steps-list b{color:var(--ink)}
.filepick{cursor:pointer}
/* the room clock */
.cutoff{position:absolute;left:14px;right:14px;top:66px;z-index:45;padding:12px 14px 14px;border-radius:16px;background:#2A1630;box-shadow:inset 0 0 0 1px rgba(255,122,184,.5),0 14px 40px rgba(0,0,0,.5);display:grid;gap:8px;animation:cutin 260ms var(--ease-out)}
.cutoff b{font-size:14.5px;color:#FFD3E8}
.cutoff i{display:block;height:4px;border-radius:4px;background:var(--coral);transform-origin:left;animation:grdrain linear forwards}
@keyframes cutin{from{opacity:0;translate:0 -8px}}
/* why it fits: one line per part of the score */
.whys{display:grid;gap:9px;margin-top:4px;flex:none}
.wl{display:grid;grid-template-columns:1fr 44px;gap:12px;align-items:center;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.wl-m{height:5px;border-radius:5px;background:rgba(241,240,247,.09);overflow:hidden}
.wl-m i{display:block;height:100%;width:var(--v);background:var(--lens);border-radius:inherit}
.mgs{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.mgs span{padding:4px 9px;border-radius:999px;background:rgba(185,166,255,.12);color:#DCD3FF;font-size:11.5px;font-weight:600}
.bk-love{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);font-style:italic;flex:none}
@media (max-height:780px){ .evening{height:120px} .ev-read b{font-size:26px} .art-grid{gap:8px;margin-top:12px} .poster-grid{gap:6px} }
/* join: keep "Join the room" in reach when the platforms push it down */
[data-screen="join"] > div:last-child{position:sticky;bottom:-22px;margin-bottom:-22px;padding-bottom:22px;background:linear-gradient(180deg,rgba(15,15,21,0),var(--deep) 30%);z-index:2}

/* =========================================================
   v13 · full-screen questions: the mood faces, how long + films/series, the setup on one screen each,
   the scary slider, the Uber-style rating, the onboarding wall, wildcards and "Try it free"
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* a big, friendly slider */
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;--p:50%;touch-action:pan-y}
.range::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(90deg,var(--lens) 0 var(--p),rgba(241,240,247,.12) var(--p) 100%)}
.range::-moz-range-track{height:10px;border-radius:10px;background:rgba(241,240,247,.12)}
.range::-moz-range-progress{height:10px;border-radius:10px;background:var(--lens)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;margin-top:-12px;box-shadow:0 0 0 6px rgba(214,255,92,.28),0 6px 18px rgba(0,0,0,.5);transition:scale 140ms var(--ease-out)}
.range::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(214,255,92,.28)}
.range:active::-webkit-slider-thumb{scale:1.12}
.range:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:12px}
.hl-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:2px}
/* the mood tiles fill the screen */
[data-screen="end"] .art-grid{margin-top:14px}
.arttile .at-l{font-size:14px}
/* how long have you got + films / series */
.howlong{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:center;gap:6px}
.hl-big{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,17vw,84px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hl-done{color:var(--ink-2);font-size:16px;margin-bottom:18px}
.fmt-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 6px}
.fmt{display:flex;align-items:center;justify-content:space-between;gap:10px;height:64px;padding:0 18px;border-radius:18px;background:rgba(241,240,247,.04);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:17px;color:var(--ink-2);transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.fmt b{font-weight:700}
.fmt .box{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--hair-2);color:transparent;transition:background-color 160ms ease,color 160ms ease}
.fmt .box svg{width:16px;height:16px}
.fmt[aria-pressed="true"]{background:rgba(214,255,92,.08);color:var(--ink);box-shadow:inset 0 0 0 2px var(--lens)}
.fmt[aria-pressed="true"] .box{background:var(--lens);color:var(--on-lens);box-shadow:none}
[data-screen="time"] .tune-foot{margin-top:12px}
/* the one-time setup: one screen each, nothing to scroll */
.setupflow{padding-bottom:18px}
.setup-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.setup-top .eyebrow{color:var(--lens)}
/* the progress: one short segment per step */
.sdots{display:flex;gap:3px;justify-self:stretch;max-width:200px;width:100%;margin:0 auto}
.sdots i{flex:1;height:4px;border-radius:4px;background:rgba(241,240,247,.14);transition:background-color 240ms ease}
.sdots i.on{background:var(--lens)}
/* the baseline's ranges: five posters on one line, mild on the left, extreme on the right */
.brange{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:auto;padding-top:14px}
.rtile{display:grid;gap:6px;padding:0;background:none;color:var(--ink-2);border:0;font:inherit;-webkit-tap-highlight-color:transparent}
.rtile img,.rtile .rt-art{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:var(--raise-2);box-shadow:inset 0 0 0 1px var(--hair-2);transition:box-shadow 140ms ease,scale 140ms var(--ease-out),opacity 200ms ease}
.rtile .rt-art{position:relative;overflow:hidden}.rtile .rt-art svg{position:absolute;inset:0;width:100%;height:100%}
.rtile small{font-size:11px;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px}
.rtile[aria-pressed="true"] img,.rtile[aria-pressed="true"] .rt-art{box-shadow:0 0 0 3px var(--lens);scale:1.04}
.rtile[aria-pressed="true"] small{color:var(--lens);font-weight:600}
.rtile:active img{scale:.96}
.range-scale{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.range-scale i{height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(241,240,247,.14),var(--lens))}
.brange.multi + .range-scale{display:none}
/* the baseline's word buttons (your years) */
.chips-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.chips-grid .chip{height:72px;min-height:0;padding:0 14px;border-radius:18px;background:rgba(241,240,247,.04);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:20px;border:0;transition:background-color 160ms ease,box-shadow 160ms ease,scale 140ms var(--ease-out)}
.chips-grid .chip.was,.chips-grid .chip.sel{background:rgba(214,255,92,.1);box-shadow:inset 0 0 0 2px var(--lens)}
.chips-grid .chip:active{scale:.97}
.chips-grid.decided .chip:not(.sel){opacity:.35}
@media (max-height:720px){ .range{margin-top:10px} .rtile small{font-size:10px} .chips-grid .chip{height:58px;font-size:18px} }
.plat-grid{flex:1;min-height:0;grid-auto-rows:minmax(52px,1fr);align-content:stretch;margin-top:14px}
.plat{height:auto;min-height:52px;font-size:15px}
.poster-grid.fill{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);margin-top:14px}
.poster-grid.fill .poster{aspect-ratio:auto;height:100%;min-height:0}
.poster-grid.fill.laugh{grid-template-columns:repeat(2,minmax(0,1fr))}
.poster-grid.fill.laugh .poster .pt-title{font-size:15px}
.album-grid.fill{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);margin-top:14px}
.album-grid.fill .album{aspect-ratio:auto;height:100%;min-height:0}
.album .al-name{font-size:13px}
.pocket-grid{grid-auto-rows:minmax(0,1fr)}
.pocket-grid .pk{min-height:0}
/* the scary slider */
.scare{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr 1fr;align-items:center;gap:12px 14px;margin-top:10px}
.sc-face{position:relative;aspect-ratio:1;width:100%;max-height:100%;border-radius:28px;overflow:hidden;justify-self:center}
.sc-face svg{position:absolute;inset:0;width:100%;height:100%}
.sc-film{position:relative;width:100%;max-width:200px;aspect-ratio:2/3;max-height:100%;border-radius:16px;overflow:hidden;background:var(--raise-2);box-shadow:inset 0 0 0 1px var(--hair-2),0 18px 40px -18px rgba(0,0,0,.8);justify-self:center}
.sc-film img,.sc-film > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-film .pt-title{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.sc-label{grid-column:1 / -1;text-align:center;font-family:var(--f-display);font-weight:750;font-size:24px;letter-spacing:-.01em}
.sc-slider{margin-top:10px}
.fcard .fc-sub{margin:6px 0 0;color:var(--ink-2);font-size:14.5px}
/* loading: just the blob */
[data-screen="loading"] .loadblob{width:min(300px,76vw);height:min(300px,76vw);-webkit-mask-image:radial-gradient(circle,#000 48%,transparent 70%);mask-image:radial-gradient(circle,#000 48%,transparent 70%)}
.loadblob{-webkit-mask-image:radial-gradient(circle,#000 48%,transparent 70%);mask-image:radial-gradient(circle,#000 48%,transparent 70%)}
/* onboarding: a wall of posters that won't stop scrolling, then one in focus */
.ob1,.ob2{position:relative;width:100%;overflow:hidden;margin-bottom:22px}
.ob-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 4px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.ob-col{display:grid;gap:10px;align-content:start;animation:obscroll var(--d) linear infinite}
.ob-col:nth-child(2){animation-direction:reverse}
.ob-p{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--raise-2)}
.ob-p img,.ob-p > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes obscroll{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.ob-col{animation:none}}
.ob2{display:flex;align-items:center;justify-content:center}
.ob-back{position:absolute;inset:8% 4%;display:grid;grid-template-columns:1fr 1fr;gap:60px;filter:blur(6px) brightness(.45);transform:scale(.9)}
.ob-back .ob-p{aspect-ratio:2/3}
.ob-hero{position:relative;width:min(58%,220px);aspect-ratio:2/3;border-radius:20px;overflow:hidden;box-shadow:0 0 0 3px var(--lens),0 30px 70px -20px rgba(214,255,92,.45);animation:obpop 900ms var(--ease-out) both}
.ob-hero img,.ob-hero > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ob-fit{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:999px;background:var(--lens);color:var(--on-lens);font-weight:750;font-size:13px}
@keyframes obpop{from{transform:scale(.86);opacity:.2}}
.slide .q{font-size:clamp(36px,10vw,44px)}
/* the rating: full screen, five stars */
.rateov{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px 24px;background:radial-gradient(80% 60% at 50% 38%,rgba(185,166,255,.18),rgba(9,9,13,.97) 70%),var(--deep)}
.rt-in{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.rt-poster{position:relative;width:min(52vw,190px);aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:var(--raise-2);box-shadow:0 26px 60px -20px rgba(0,0,0,.9)}
.rt-poster img,.rt-poster .thumb,.rt-poster > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rt-poster .thumb svg{width:100%;height:100%}
.rt-in .q{font-size:28px}
.rt-stars{display:flex;gap:6px}
.rt-star{width:54px;height:54px;display:grid;place-items:center;border-radius:14px}
.rt-star svg{width:42px;height:42px;fill:rgba(241,240,247,.14);transition:fill 120ms ease,scale 160ms cubic-bezier(0.34,1.56,0.64,1)}
.rt-star.lit svg,.rt-star.on svg{fill:var(--gold)}
.rt-star.on svg{scale:1.08}
.rt-thanks{margin:0;color:var(--ink-2);font-size:15px;animation:cutin 240ms var(--ease-out)}
/* the card: your fit, the FOBO score, wildcards and trials */
.cbadge.wild{background:var(--violet);color:var(--on-lens)}
.cbadge.trial{background:var(--gold);color:var(--on-lens)}
.cfoot .cscore.fobo{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}
.cfoot .cscore.fobo b{color:var(--lens);font-weight:600;letter-spacing:.04em}
.tryfree{flex:1 1 auto;justify-content:flex-start;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:rgba(244,238,138,.14);box-shadow:inset 0 0 0 1px rgba(244,238,138,.45);color:var(--gold);font-size:13px;font-weight:700;white-space:nowrap}
.tryfree span{margin-left:auto}
.fs-num{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--lens);margin-left:6px;letter-spacing:0}
.wl-t small{color:var(--muted);font-size:11.5px;margin-left:4px}
.matchov .mwho{color:var(--ink-2);margin:0}
.matchov .linkbtn{color:var(--ink-2)}
@media (max-height:740px){ .hl-big{font-size:56px} .hl-done{margin-bottom:8px} .fmt{height:54px} .sc-label{font-size:20px} .rt-poster{width:min(42vw,150px)} }

/* =========================================================
   v14 · long pickers you scroll (real posters and artist photos), the emoji-only fear slider,
   "I'm flexible" first, a quiet "you're set" with the sign-up, speed-round variety
   ========================================================= */
/* setup pickers: scroll the wall, the button stays in reach */
.setupflow.scroll{overflow-y:auto;overscroll-behavior:contain}
.setup-foot.sticky{position:sticky;bottom:-18px;margin:auto -22px -18px;padding:18px 22px 18px;background:linear-gradient(180deg,rgba(15,15,21,0),var(--deep) 34%);z-index:3}
.poster-grid{grid-auto-rows:auto}
.poster-grid .poster{aspect-ratio:2/3;height:auto}
.poster-grid.laugh{grid-template-columns:repeat(3,minmax(0,1fr))}
.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.album{aspect-ratio:1;height:auto}
.album.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:saturate(1.05)}
.album.photo .al-name{padding-top:26px;font-size:12.5px}
.credit{margin:12px 0 0;font-size:11px;color:var(--muted);text-align:center}
/* how scary: just the face, big */
.scare{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:1;min-height:0;margin-top:6px}
.sc-face{width:min(72vw,300px);max-height:56vh;aspect-ratio:1;border-radius:36px}
.sc-label{font-size:28px}
/* how long: "I'm flexible" first */
.hl-set{color:var(--muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
[data-screen="time"]:not(.timed) .hl-big{color:var(--ink-2);font-size:clamp(40px,12vw,58px)}
[data-screen="time"]:not(.timed) .range::-webkit-slider-runnable-track{background:rgba(241,240,247,.12)}
.hl-foot{display:grid;gap:4px;justify-items:center}
.hl-foot .linkbtn{color:var(--ink-2);padding:8px}
/* after the setup: small, then the sign-up */
[data-screen="p-card"]{gap:14px}
.pc-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:18px}
.pc-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--lens);color:var(--on-lens);box-shadow:0 18px 40px -14px rgba(214,255,92,.6);animation:obpop 600ms cubic-bezier(0.34,1.56,0.64,1) both}
.pc-check svg{width:30px;height:30px}
.pc-done .q{font-size:32px}
.pc-done .sub{margin:0}
.pc-save{display:grid;gap:6px;padding:16px;border-radius:20px;background:rgba(185,166,255,.10);box-shadow:inset 0 0 0 1px rgba(185,166,255,.28)}
.pc-save b{font-size:16px}
.pc-save small{color:var(--ink-2);font-size:13px;line-height:1.4}
.pc-save .field{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:6px}
.pc-save input{height:48px;border-radius:14px;padding:0 14px;background:var(--deep);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--hair-2);font-size:16px;min-width:0}
.pc-save input:focus{outline:2px solid var(--lens);outline-offset:1px}
.pc-save .btn{height:48px;width:auto;padding:0 20px}
[data-screen="p-card"].just-done .fcard{display:none}
[data-screen="p-card"]:not(.just-done):not(.base-done) .pc-check{display:none}
[data-screen="p-card"].base-done .pc-done{margin-top:4px}
[data-screen="p-card"].base-done .pc-done .q{font-size:28px}
[data-screen="p-card"] .fcard{margin-top:0;text-align:left;padding:16px 18px}
[data-screen="p-card"] .fcard dl{margin:0}
.pc-foot{margin-top:auto;display:grid;gap:6px}
.pc-links{display:flex;justify-content:center;gap:18px}
.pc-links .linkbtn{color:var(--ink-2);padding:8px 4px}
/* speed round: motion dots take a fresh colour each time */
.gt-motion[style*="--mh"] i{background:hsl(calc(var(--mh) * 1deg) 85% 66%)}
.gt-motion[style*="--mh"] i:nth-child(2n){background:hsl(calc(var(--mh) * 1deg + 140deg) 80% 72%)}
.hl-foot{justify-items:stretch;grid-template-columns:minmax(0,1fr);justify-content:stretch}
.hl-foot .btn{width:100%}
.hl-foot .linkbtn{justify-self:center}
.screen.scroll.setupflow{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 66px);mask-image:linear-gradient(180deg,transparent 0,#000 66px)}
[data-screen="loading"] .loadline{margin-top:4px;color:var(--ink-2);font-size:15px;height:22px;text-align:center}
.kfield .kstatic{flex:1;align-self:center;font-size:13px;line-height:1.35;color:var(--ink)}

/* ---------- v15: launch splash (the O's look around while FOBO loads), intro sub-lines, poster fade-in ---------- */
.splash{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--deep);transition:opacity 380ms var(--ease-out),visibility 0s linear 380ms}
.splash.out{opacity:0;visibility:hidden;pointer-events:none}
.splash-mark{font-size:68px;gap:.06em;transition:opacity 220ms var(--ease-out)}
.splash-mark .eye::after{animation:eyelook 2.6s var(--ease-out) infinite}
.splash-mark .eye{animation:eyeblink 2.6s linear infinite}
.splash-line{margin:0;color:var(--ink-2);font-size:17px;font-weight:550;letter-spacing:-.01em;animation:splashin 600ms var(--ease-out) 250ms both}
@keyframes eyelook{0%,14%{translate:0 0}24%,40%{translate:-.3em .06em}50%,58%{translate:0 .02em}68%,100%{translate:-.16em .1em}}
@keyframes eyeblink{0%,80%,90%,100%{scale:1 1}85%{scale:1 .08}}
@keyframes splashin{from{opacity:0;translate:0 8px}}
@media (prefers-reduced-motion: reduce){.splash-mark .eye,.splash-mark .eye::after,.splash-line{animation:none}}
.ob-sub{margin:10px 0 0;max-width:32ch;text-align:left}
.setup-intro{margin:8px 0 14px}
.ob-p img,.ob-hero img{opacity:0;transition:opacity 420ms var(--ease-out)}
.ob-p img.ld,.ob-hero img.ld{opacity:1}

/* ---------- v16: flip without 3D back faces, pick confirm, maybes, how it works, compact card back ---------- */
.card-in,.card.flipped .card-in{transform:none;transition:filter 320ms ease}
.face.back{transform:none;visibility:hidden}
.card.flipped .face.back{visibility:visible}
.card.flipped .face.front{visibility:hidden}
/* one-screen "how it works" */
[data-screen="intro"]{padding-top:56px}
.how{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:8px 22px 0}
.how-wall{position:relative;flex:none;height:180px;margin:0 -22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.how-row{display:flex;gap:10px;width:max-content;height:100%;animation:howdrift 40s linear infinite}
.how-row .ob-p{width:120px;height:180px;flex:none;aspect-ratio:auto}
@keyframes howdrift{to{translate:calc(-50% - 5px) 0}}
@media (prefers-reduced-motion: reduce){.how-row{animation:none}}
.how .q{font-size:34px;line-height:1.04}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how-steps li{display:flex;align-items:center;gap:14px;font-size:18px}
.how-steps b{font-weight:650}
.hs-n{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--lens);color:#111;font-weight:800;font-size:15px}
.how-friends{margin:0;color:var(--ink-2);font-size:14.5px}
/* compact card back */
.bk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none}
.bk-stats span{display:grid;gap:1px;padding:8px 10px;border-radius:14px;background:var(--raise-2);font-size:11px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-stats b{font-size:19px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.bk-stats span:first-child b{color:var(--lens)}
.bk-whys{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:none}
.bk-whys li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.35}
.bk-whys svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lens)}
/* the pick confirm */
.pconf{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.pconf img,.pconf .pc-ph{width:64px;height:96px;flex:none;border-radius:12px;object-fit:cover;overflow:hidden;background:var(--raise-2)}
.pconf .pc-ph svg{width:100%;height:100%}
.pconf h4{margin:0 0 4px}
.pconf p{margin:0;color:var(--ink-2)}
.pconf-btns{display:grid;gap:8px}
/* maybes on the last card */
.maybes{display:flex;gap:10px;justify-content:center;margin:6px 0 10px}
.maybe{display:grid;gap:6px;width:84px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:12px;font-weight:600;text-align:center}
.maybe img,.maybe svg{width:84px;height:126px;border-radius:12px;object-fit:cover;background:var(--raise-2)}
.maybe span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* pictures fade in as they arrive instead of popping */
.poster img,.album.photo img{opacity:0;transition:opacity 360ms var(--ease-out)}
.poster img.ld,.album.photo img.ld{opacity:1}
/* ---------- v17: avatars, the simpler room screens ---------- */
.av.avf{background:none;box-shadow:none;border-radius:0;color:inherit;display:inline-block;flex:none}
.av.avf svg{display:block;width:100%;height:100%;overflow:visible}
.av.avf.md{width:40px;height:40px}
.av.avf.lg{width:58px;height:58px}
.av.avf.xl{width:92px;height:92px}
.avatars .av.avf{margin-left:-4px}
.crowd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;margin-top:22px}
.pal{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;min-width:0;animation:palin 420ms var(--ease-out) both}
.pal b{font-size:13.5px;font-weight:650;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal small{font-size:11.5px;color:var(--muted)}
.pal.ready small{color:var(--lens)}
.pal.me b{color:var(--lens)}
.pal.ghost{opacity:.4;animation:palwait 1.6s ease-in-out infinite}
.pal.ghost .av.avf{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(241,240,247,.35)}
.pal-shuffle,.meid-shuffle{position:absolute;top:34px;left:calc(50% + 14px);width:28px;height:28px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--raise-2);color:var(--ink);box-shadow:0 0 0 3px var(--deep);padding:0}
.pal-shuffle svg,.meid-shuffle svg{width:15px;height:15px}
.crowd .linkbtn{grid-column:1/-1;justify-self:center;font-size:13px}
@keyframes palin{from{opacity:0;scale:.6}}
@keyframes palwait{50%{opacity:.7}}
.jn-host{display:flex;justify-content:center;margin:8px 0 14px}
.jn-stack{display:flex;align-items:flex-end}
.jn-stack .av.avf.md{margin-left:-10px}
.jn-title,.jn-sub{text-align:center}
.meid{margin-top:26px;display:grid;justify-items:center;gap:10px}
.meid-l{color:var(--muted);font-size:11.5px}
.meid-row{position:relative;display:grid;justify-items:center;gap:6px;transition:opacity 140ms ease}
.meid-row.swap{opacity:0}
.meid-row b{font-size:17px}
.meid-shuffle{top:30px;left:calc(50% + 16px)}
[data-screen="lobby"] .invite{display:grid;gap:8px;margin-top:18px}
[data-screen="wait"] .waitmsg{margin-top:8px}
.qrbig{width:220px;height:220px;margin:12px auto;padding:10px;border-radius:18px;background:#F1F0F7}
.qrbig canvas{width:100%;height:100%;image-rendering:pixelated}
#sheetBody .code{text-align:center;font-family:var(--f-mono, monospace);font-size:22px;letter-spacing:.12em}

/* ---------- v18: popcorn loader ---------- */
[data-screen="loading"]{padding:0;background:radial-gradient(120% 70% at 50% 100%,rgba(255,170,80,.10),transparent 60%)}
.popcv{position:absolute;inset:0;width:100%;height:100%}
.pop-top{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 96px) 22px 0;text-align:center}
.pop-k{color:var(--lens);letter-spacing:.08em}
.pop-pct{display:flex;align-items:flex-start;font-family:var(--f-display);font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pop-pct b{font-size:88px;font-weight:800}
.pop-pct span{font-size:34px;margin-top:8px;color:var(--ink-2)}
.pop-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 78%,#FFF6DA 0,rgba(214,255,92,.85) 30%,rgba(9,9,13,0) 75%)}
.pop-flash.go{animation:popflash 700ms var(--ease-out) forwards}
@keyframes popflash{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion: reduce){.pop-flash.go{animation:none}}

/* ---------- v19: equal ways in, the upsell, intro slides, big QR, join steps, code join ---------- */
.home-cta.duo{grid-template-columns:1fr 1fr;gap:10px}
.choicecard.tile{display:grid;grid-template-columns:none;justify-items:center;align-content:center;gap:4px;min-height:150px;padding:16px 10px 14px;text-align:center;border-radius:24px;color:var(--ink)}
.choicecard.tile b{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.choicecard.tile small{font-size:12.5px;color:var(--muted)}
.choicecard.tile.solo{background:linear-gradient(160deg,rgba(214,255,92,.20),rgba(214,255,92,.05) 70%);box-shadow:inset 0 0 0 1px rgba(214,255,92,.35)}
.choicecard.tile.group{background:linear-gradient(160deg,rgba(185,166,255,.24),rgba(185,166,255,.06) 70%);box-shadow:inset 0 0 0 1px rgba(185,166,255,.4)}
.tile-art{height:62px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.tile-art .av.avf.md{width:44px;height:44px;margin-left:-12px}
.tile-art .av.avf.md:first-child{margin-left:0}
.codebtn{justify-self:center;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.codeform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.codeform input{height:52px;border-radius:14px;border:0;padding:0 16px;background:var(--raise-2);color:var(--ink);font:500 22px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;min-width:0}
.codeform input:focus{outline:2px solid var(--lens)}
.yours{margin-top:14px;padding:18px;border-radius:24px;display:grid;gap:8px;background:radial-gradient(120% 120% at 100% 0%,rgba(255,122,184,.22),transparent 55%),radial-gradient(120% 120% at 0% 100%,rgba(185,166,255,.24),transparent 60%),var(--raise);box-shadow:inset 0 0 0 1px rgba(185,166,255,.35)}
.yo-art{position:relative;width:58px;height:58px}
.yo-art i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--lens);transform:rotate(45deg);animation:yotw 2.4s ease-in-out infinite}
.yo-art i:nth-of-type(1){top:-4px;right:-8px}
.yo-art i:nth-of-type(2){bottom:2px;right:-14px;width:6px;height:6px;animation-delay:.6s;background:var(--pink)}
.yo-art i:nth-of-type(3){top:12px;left:-12px;width:5px;height:5px;animation-delay:1.2s;background:var(--lav, #B9A6FF)}
@keyframes yotw{50%{opacity:.25;transform:rotate(45deg) scale(.6)}}
.yo-t{font-family:var(--f-display);font-size:19px;font-weight:700;line-height:1.15}
.yo-p{margin:0;color:var(--ink-2);font-size:14px}
.yo-pts{display:flex;flex-wrap:wrap;gap:6px}
.yo-pts span{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(241,240,247,.07);color:var(--ink-2)}
.yo-btn{margin-top:4px;height:52px;border:0;border-radius:16px;font:700 16px var(--f-body);color:#140f1f;background:linear-gradient(100deg,#B9A6FF,#FF9FCB 60%,#FFC98A);box-shadow:0 12px 30px -14px rgba(255,122,184,.7);display:flex;align-items:center;justify-content:center;gap:8px}
.yo-btn small{font:600 11.5px var(--f-mono);opacity:.7}
@media (prefers-reduced-motion: reduce){.yo-art i{animation:none}}
/* intro slides */
[data-screen="intro"] .slides{flex:1;min-height:0}
[data-screen="intro"] .slide{justify-content:flex-end;gap:10px;padding:12px 22px 6px}
.ob-art{flex:1;min-height:0;display:grid;place-items:center}
.slide .how-wall{flex:1;max-height:260px;height:auto;align-self:stretch}
.obm-grid{display:grid;grid-template-columns:repeat(3,86px);gap:10px}
.obm{width:86px;height:86px;display:grid;place-items:center}
.obm svg{width:100%;height:100%}
.slide.in .obm{animation:obpop 520ms var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
.obg{width:min(260px,70vw);display:grid;gap:10px}
.obg-bar{display:block;height:5px;border-radius:5px;background:rgba(241,240,247,.12);overflow:hidden;position:relative}
.obg-bar::after{content:"";position:absolute;inset:0;background:var(--lens);transform-origin:left;animation:obgbar 3s linear infinite}
@keyframes obgbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.obg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.obg-t{aspect-ratio:1;border-radius:20px;background:linear-gradient(140deg,var(--a),var(--b));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.obg-t.on{box-shadow:0 0 0 3px var(--lens);animation:obgtap 3s ease-in-out infinite}
@keyframes obgtap{0%,60%{scale:1}70%{scale:.92}80%,100%{scale:1}}
.obp{position:relative;width:min(190px,48vw);aspect-ratio:2/3;border-radius:20px;overflow:hidden;box-shadow:0 0 0 3px var(--lens),0 30px 70px -20px rgba(214,255,92,.45)}
.obp img,.obp > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.obp-fit{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:var(--lens);color:#111;font-weight:700;font-size:12px}
.obp-on{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:12px;background:rgba(9,9,13,.75);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.obp-on i{width:7px;height:7px;border-radius:50%;background:var(--lens)}
.obgr{display:grid;justify-items:center;gap:14px}
.obgr > span:not(.obgr-m){display:inline-block}
.obgr{grid-template-columns:repeat(3,auto);align-items:end}
.obgr > span:nth-child(2){transform:translateY(-14px)}
.obgr-m{grid-column:1/-1;padding:8px 16px;border-radius:999px;background:var(--lens);color:#111;font-weight:700}
.slide.in .obgr > span:not(.obgr-m){animation:obpop 560ms var(--ease-out) both;animation-delay:calc(var(--i) * 120ms)}
/* lobby: the QR is the invite */
.qrhero{display:grid;justify-items:center;gap:6px;margin-top:16px}
.qrhero .qrbig{width:min(230px,62vw);height:min(230px,62vw);margin:0 auto 4px}
.qrhero .code{font-size:28px}
[data-screen="lobby"] .invite{margin-top:14px}
[data-screen="lobby"] .invite .row2 .btn{height:52px;font-size:15px}
.jn-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.jn-steps li{display:flex;align-items:center;gap:6px;padding:6px 11px 6px 6px;border-radius:999px;background:var(--raise);font-size:13px;color:var(--ink-2)}
.jn-steps b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--lens);color:#111;font-size:11px}
.codeform .btn{width:auto;height:52px;padding:0 22px}
.crowd .av.avf.lg{width:64px;height:64px}

/* =========================================================
   v20 · the blob speed round, the optional profile at the end, services with a detected country, Save this pick, the popcorn ink blot
   ========================================================= */
/* speed round: every answer is a full-bleed blob scene with a label */
.gr-grid.blob .gtile > svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.gr-grid.blob .gtile{border-radius:22px}
.gt-pill{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 10px;border-radius:999px;background:rgba(9,9,13,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:650;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtile.sel .gt-pill{background:var(--lens);color:var(--on-lens)}
.gr-grid.row2,.gr-grid.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.gr-grid.stack3,.gr-grid.n3{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
.gr-grid.grid4,.gr-grid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.gr-grid.grid8,.gr-grid.n8{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:8px}
.gr-grid.grid8 .gtile,.gr-grid.n8 .gtile{border-radius:18px}
.gr-grid.grid8 .gt-pill,.gr-grid.n8 .gt-pill{bottom:6px;left:6px;font-size:12.5px;padding:4px 9px}
.gr-grid.row2 .gtile,.gr-grid.n2 .gtile{max-height:min(46vh,380px);align-self:center;aspect-ratio:3/4;width:100%}
/* the word, and the shape to match */
.gr-art.word{background:#F1F0F7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:min(22vh,150px)}
.gr-word{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,12vw,56px);letter-spacing:.08em;color:#111018;line-height:1}
.gr-art.word small{color:#5D5B6B;font-size:13px;font-weight:600}
.gr-art.target{background:transparent;height:min(24vh,170px)}
.gr-art.target svg{height:100%;width:auto;aspect-ratio:1;border-radius:20px;box-shadow:0 0 0 2px var(--lens)}
@media (max-height:780px){ .gr-art.word{height:min(19vh,120px)} .gr-art.target{height:min(20vh,130px)} }

/* profile questions: same tiles as the moods, laid out by the questions list */
.art-grid.two,.art-grid.stack2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.art-grid.row2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.art-grid.stack3{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
.art-grid.grid4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.art-grid.grid8{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:8px}
.arttile.was{box-shadow:inset 0 0 0 2px rgba(214,255,92,.45)}
.setupflow .art-grid{margin-top:14px}
.setupflow .art-grid .arttile .at-l{font-size:14px}

/* services: the detected country, changeable */
.plat-where{margin:4px 0 0;color:var(--ink-2);font-size:14.5px}

/* the offer after a pick */
.gp-ask{margin-top:16px;width:100%;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:14px;border-radius:20px;text-align:left;
  background:linear-gradient(160deg,rgba(214,255,92,.10),rgba(185,166,255,.10));box-shadow:inset 0 0 0 1px rgba(214,255,92,.28)}
.gp-art{width:64px;height:64px;border-radius:16px;overflow:hidden;display:block}
.gp-art svg{width:100%;height:100%;display:block}
.gp-txt b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.gp-txt small{display:block;color:var(--ink-2);font-size:13.5px;margin-top:3px;line-height:1.35}
.gp-btns{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:8px}
.gp-btns .btn{height:46px;font-size:15px}
.gp-btns .linkbtn{padding:0 12px}
/* save this pick */
#saveBtn svg{flex:none}
#saveBtn.done{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
#saveBtn.done svg{fill:var(--lens);stroke:var(--lens)}
.pc-fine{color:var(--muted)!important;font-size:12.5px!important}
.pc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px;max-width:34ch}
.pc-chips span{padding:6px 12px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:13px;font-weight:600;color:var(--ink-2)}

.gr-grid.stack2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
/* the Lab: the question list */
.qs-text{width:100%;min-height:340px;margin-top:10px;padding:12px;border-radius:14px;border:0;background:var(--deep);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2);font:12px/1.5 var(--f-mono);resize:vertical;tab-size:2}
.qs-text:focus{outline:2px solid var(--lens);outline-offset:1px}
.qs-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.qs-btns .btn{width:auto;padding:0 16px}
/* popcorn: the panel stays readable while the screen fills */
[data-screen="loading"] .pop-top{width:min(300px,calc(100% - 44px));margin:calc(env(safe-area-inset-top,0px) + 84px) auto 0;padding:18px 18px 16px;border-radius:26px;background:rgba(12,11,18,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08)}

/* =========================================================
   v21 · where to watch (your services first), the end screen, one sign-up ask
   ========================================================= */
.ds{display:grid;gap:0}
.ds-sec{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 2px}
.ds-sec:first-child{margin-top:0}
.ds-row{display:grid;gap:2px}
.ds .opt{grid-template-columns:auto 1fr auto;margin-top:8px;min-height:64px}
.ds .opt .ds-dot{width:12px;height:12px;border-radius:50%;grid-row:1;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.ds .opt .ds-t{display:grid;gap:2px;min-width:0}
.ds .opt .ds-t b{font-size:15px}
.ds .opt .ds-t small{color:var(--muted);font-size:12.5px}
.ds .opt .go{grid-row:1;grid-column:3;height:40px}
.ds .opt.best{box-shadow:inset 0 0 0 2px var(--lens)}
.ds-have{justify-self:end;font-size:13px;padding:6px 4px;min-height:36px}
/* the end screen: a happy blob, how long it took, then what to do next */
.doneface{width:156px;height:156px;margin-top:2px}
.doneface svg{width:100%;height:100%;display:block;overflow:visible}
@media (prefers-reduced-motion:no-preference){.doneface svg{animation:donebob 2.6s ease-in-out infinite}}
@keyframes donebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.done-time{margin:6px 0 0;color:var(--lens);font-weight:600;font-size:15px}
.save-link{justify-self:center;display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);min-height:44px;padding:8px 14px}
.save-link.done{color:var(--lens)}
.save-link.done svg{fill:currentColor}

/* v21b · design review fixes: bigger tap targets, readable labels, names, "not this one", hints, the mascot on home */
.iconbtn{width:44px;height:44px}
.act{font-size:12px}
.homeface{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.homeface svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){.homeface svg{animation:donebob 3s ease-in-out infinite}}
.namefield{display:grid;gap:6px;width:100%;margin-top:14px;text-align:left}
.namefield span{font-size:13px;color:var(--ink-2);font-weight:600}
.namefield input{height:48px;border-radius:14px;padding:0 14px;background:var(--deep);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--hair-2);font-size:16px;min-width:0;width:100%}
.namefield input:focus{outline:2px solid var(--lens);outline-offset:1px}
.namefield input.bad{box-shadow:inset 0 0 0 1.5px var(--coral)}
.vetonote{margin:6px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,122,184,.12);color:#FFB3D9;font-size:13.5px;font-weight:600;text-align:center}
.act.veto .ab{background:var(--raise-2)}
.act.veto[disabled]{opacity:.55}
.gr-hint{margin:6px 0 0;color:var(--muted);font-size:14px}
.back .bk-h{font-family:var(--f-display);font-weight:750;font-size:21px;line-height:1.1;margin:0;letter-spacing:-.01em;flex:none}
.wait-next{display:block;margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.45}

/* v21c: services sheet extras as quiet links */
.sheet-more{display:flex;justify-content:center;gap:22px;margin-top:10px}
.sheet-more .linkbtn{color:var(--ink-2);font-size:14px;min-height:44px}

/* v22: first run, check-in, consent */
.pq-hint{margin:-6px 0 4px;color:var(--ink-2);font-size:14.5px}
.rt-yn{display:flex;gap:8px;width:100%;max-width:340px}
.rt-yn .btn{flex:1;padding-inline:10px}
.consent{display:grid;gap:12px}
.consent .btn{width:100%}
.insights{display:grid;gap:12px}
.ins-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.ins-top div{background:var(--deep);border-radius:12px;padding:10px;display:grid;gap:2px}
.ins-top b{font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums}
.ins-top small{color:var(--muted);font-size:11.5px}
.ins-funnel{display:grid;gap:4px}
.ins-funnel div{display:grid;grid-template-columns:110px 1fr 44px;gap:8px;align-items:center;font-size:12.5px}
.ins-funnel i{display:block;height:8px;border-radius:4px;background:var(--lens)}
.ins-tbl{width:100%;border-collapse:collapse;font-size:12px}
.ins-tbl td,.ins-tbl th{text-align:left;padding:5px 4px;border-bottom:1px solid var(--hair-2);font-variant-numeric:tabular-nums}
.ins-tbl th{color:var(--muted);font-weight:500;font-size:11px}
.joinfav{display:grid;gap:8px;margin-top:4px}
.jf-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.jf-row .poster{flex:0 0 72px;scroll-snap-align:start}
.jf-row .poster .pt-title{font-size:9px}

/* v23: the reading check in the Lab */
.check-list{display:grid;gap:10px;margin-top:10px}
.check-card{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:6px;font-size:13px;line-height:1.4}
.check-card p{margin:0}.check-card .muted{color:var(--muted)}
.check-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.check-h .mono{font-size:11px;color:var(--muted)}
.dials{display:grid;gap:3px;margin:2px 0}
.dial{display:grid;grid-template-columns:78px 1fr 78px;gap:6px;align-items:center;font-size:10.5px;color:var(--muted)}
.dial span:last-child{text-align:right}.dial i{position:relative;display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.dial b{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--lens);transform:translateX(-50%)}
.setup-foot .notmy{display:block;width:100%;text-align:center;margin-top:10px;color:var(--muted);font-size:14px}
.why-skip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.why-skip .linkbtn{grid-column:1/-1;margin-top:4px;color:var(--muted)}
/* v23: the speed round reworked. A row for the energy scale, six full faces, sliders for depth and time */
.gr-grid.scale4{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;gap:6px;align-items:center}
.gr-grid.scale4 .gtile{aspect-ratio:3/5;max-height:min(44vh,330px);width:100%;align-self:center;border-radius:16px}
.gr-grid.scale4 .gt-pill{left:50%;transform:translateX(-50%);bottom:6px;font-size:12px;padding:4px 8px}
.gr-grid.grid6{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
.gr-grid.grid6 .gtile{border-radius:18px}
.gr-grid.meet .gtile > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gr-grid.grid6 .gtile > svg{inset:4% 4% 14% 4%;width:92%;height:82%}
.gr-grid.scale4 .gtile > svg{inset:2% 2% 18% 2%;width:96%;height:80%}
.gr-grid.slider{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.gs{display:grid;gap:14px;justify-items:center;width:100%}
.gs-art{width:min(52vw,230px);aspect-ratio:1;border-radius:26px;overflow:hidden;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2)}
.gs-art svg{width:100%;height:100%;display:block}
.gs-label{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.01em;min-height:1.3em;text-align:center}
.gs-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0}
.gs-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.14),var(--lens))}
.gs-range::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.14),var(--lens))}
.gs-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--lens);margin-top:-12px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.gs-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--lens);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.gs-ends{display:flex;justify-content:space-between;width:100%;font-size:12.5px;color:var(--muted);margin-top:-8px}
.gs-btns{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin-top:4px}
.gs-btns:has(.gs-quick){grid-template-columns:1fr 1fr}
.gr-grid.slider.decided .gs{opacity:.35}
.how{display:grid;gap:14px}.how section{display:grid;gap:4px}.how h5{margin:0;font-family:var(--f-display);font-size:15px;font-weight:700}.how p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.why-moods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* =========================================================
   ONE QUESTION PER SCREEN (v16): the quick setup, the nightly taps, the card, friends
   Three kinds of screen: a scale (a slider; the stop you are on named in big type, one plain sentence, Next),
   pick one from a set (tap and move on; "None of these" is a full-width outlined button),
   and "most people say the same" (that answer is the big lime button, two outlined below)
   ========================================================= */
.av.avf.sm{width:26px;height:26px}
.sbar{display:flex;gap:4px;width:100%}
.sbar i{flex:1;height:4px;border-radius:4px;background:rgba(241,240,247,.14);transition:background-color .24s ease}
.sbar i.on{background:var(--lens)}
.setupflow .setup-top{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.setupflow .setup-top .eyebrow{color:var(--lens)}
.setupflow > h2.q{margin-top:20px}
/* sliders: a filled track, a big white thumb */
.yr-range,.sc-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;--p:50%;touch-action:pan-y}
.yr-range::-webkit-slider-runnable-track,.sc-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lens) var(--p),rgba(241,240,247,.16) var(--p))}
.yr-range::-moz-range-track,.sc-range::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lens) var(--p),rgba(241,240,247,.16) var(--p))}
.yr-range::-webkit-slider-thumb,.sc-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#F1F0F7;border:0;margin-top:-14px;box-shadow:0 0 0 7px rgba(214,255,92,.22),0 6px 16px rgba(0,0,0,.5)}
.yr-range::-moz-range-thumb,.sc-range::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;background:#F1F0F7;box-shadow:0 0 0 7px rgba(214,255,92,.22),0 6px 16px rgba(0,0,0,.5)}
.sc-track{position:relative;width:100%}
.sc-ticks{position:absolute;left:17px;right:17px;top:50%;height:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.sc-ticks i{width:5px;height:5px;border-radius:50%;background:rgba(15,15,21,.55)}
.sc-ends{display:flex;justify-content:space-between;width:100%;color:var(--muted);font-size:12.5px;margin-top:2px}
/* the year */
.yr{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.yr-row{display:flex;align-items:center;gap:16px}
.yr-big{font-family:var(--f-display);font-weight:800;font-size:clamp(60px,19vw,84px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;min-width:4.1ch;text-align:center}
.yr-step{width:44px;height:44px;border-radius:50%;font-size:22px;line-height:1;color:var(--ink-2);background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}
.yr-range{max-width:360px;margin-top:8px}
.yr-help{color:var(--muted);font-size:13px}
/* a scale */
.sc{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sc-art{width:min(42vw,170px);aspect-ratio:1;border-radius:50%;overflow:hidden}
.sc-art svg{width:100%;height:100%;display:block}
.sc-label{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin-top:14px}
.sc-line{color:var(--ink-2);font-size:15px;margin-top:4px;min-height:1.4em}
.sc .sc-track{margin-top:26px}
@media (max-height:700px){ .sc-art{width:120px} .sc-label{font-size:25px;margin-top:8px} .sc .sc-track{margin-top:14px} }
/* nine posters */
.g9{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:8px;margin-top:18px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:3px;margin-left:-3px;margin-right:-3px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent)}
.g9 .g9t{aspect-ratio:2/3;max-width:100%}
.g9-more{margin:6px 0 0;text-align:center;font-size:13px;color:var(--ink-2,#c9c8d4)}
.g9t{position:relative;border-radius:14px;overflow:hidden;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);padding:0;min-height:0;transition:opacity .2s ease,box-shadow .2s ease}
.g9t img,.g9-art,.g9-art svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.g9t small{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 7px;font-size:11.5px;font-weight:650;line-height:1.15;text-align:left;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.g9-check{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--lens);color:var(--on-lens);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.2s ease}
.g9-check svg{width:14px;height:14px}
.g9t[aria-pressed="true"]{box-shadow:0 0 0 3px var(--lens)}
.g9t[aria-pressed="true"] .g9-check{opacity:1;transform:none}
.g9.decided .g9t[aria-pressed="false"]{opacity:.3}
[data-screen="p-grid"] .setup-foot{padding-top:12px}
/* two big answers */
.pk{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pk-tile{display:flex;align-items:center;gap:16px;padding:20px 18px;border-radius:22px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);text-align:left;width:100%;color:var(--ink);transition:opacity .2s ease,box-shadow .2s ease}
.pk-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--on-lens)}
.pk-ic.pk-0{background:var(--lens)}
.pk-ic.pk-1{background:#FFB86B}
.pk-ic svg{width:32px;height:32px}
.pk-t b{display:block;font-size:18px;font-weight:700}
.pk-t small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.pk-tile.sel,.pk-tile.was{box-shadow:inset 0 0 0 2px var(--lens)}
.pk.decided .pk-tile:not(.sel){opacity:.35}
.pk-foot{text-align:center;color:var(--muted);font-size:13px;margin:12px 0 0}
/* All set */
.pc-cap{display:block;color:var(--muted);margin:0 0 6px}
.meter{display:inline-flex;gap:4px;vertical-align:middle}
.meter i{width:14px;height:5px;border-radius:3px;background:rgba(241,240,247,.18)}
.meter i.on{background:var(--lens)}
/* tonight */
.night-eye{color:var(--lens)}
[data-screen="end"] .night-eye + h2.q{margin-top:10px}
.gr-head .sbar{margin-bottom:12px}
.gr-head .eyebrow{color:var(--lens)}
.gr-head .q{margin-top:10px}
.gr-grid.slider{display:flex;flex-direction:column}
.gr-grid.slider .gs{flex:1;display:flex;flex-direction:column;align-items:center;gap:0}
.gr-grid.slider .gs-art{margin-top:auto;background:none;box-shadow:none;width:min(48vw,200px)}
.gr-grid.slider .gs-label{font-size:28px;margin-top:10px}
.gr-grid.slider .sc-track{margin-top:22px}
.gs-ends{display:flex;justify-content:space-between;width:100%;color:var(--muted);font-size:12.5px;margin-top:2px}
.gr-grid.slider .gs-btns{margin-top:auto;width:100%;display:grid;gap:10px;padding-top:16px}
.gr-grid.buttons{display:flex;flex-direction:column}
.gb{flex:1;min-height:0;display:flex;flex-direction:column}
.gb-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.gb-art svg{width:min(56vw,220px);height:min(56vw,220px);border-radius:50%}
.gb-btns{display:grid;gap:10px;padding-top:16px}
.gb-main{height:60px;font-size:17px;font-weight:700}
.gb-alt{display:flex;gap:10px}
.gb-alt .btn{flex:1;height:52px;font-size:15px}
.gr-grid.buttons.decided .btn:not(.sel){opacity:.35;transition:opacity .2s ease}
/* the card: undo at the top left, three buttons, Why not? above them */
.deck-head{display:flex;align-items:center;gap:10px}
.deck-head .q{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--lens);margin:0;flex:1}
.deck-undo{width:38px;height:38px;flex:none}
.deck-undo svg{width:18px;height:18px}
.deck-undo:disabled{opacity:.3}
.deck-undo[hidden]{display:none}
.whynot{position:relative;display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 8px 8px 14px;border-radius:16px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;animation:wnIn .22s ease}
.whynot[hidden]{display:none}
.wn-q{flex:1;font-weight:650;font-size:14px}
.wn-b{height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:650;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}
.wn-time{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#B9A6FF;transform-origin:left;animation:wnTime 4.2s linear forwards}
@keyframes wnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wnTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* friends */
.lb-crowd{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.lbp{display:flex;flex-direction:column;align-items:center;gap:4px}
.lbp small{font-size:12px;color:var(--muted)}
.lbp.me small{color:var(--ink-2)}
.lbp.ghost .av{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(241,240,247,.3)}
.lb-me{text-align:center;color:var(--ink-2);font-size:14px;margin-top:12px}
.lb-me .linkbtn{color:var(--lens);font-weight:650;padding:4px 2px}
#hostNameSlot{margin-top:10px}
.lb-foot{margin-top:auto;padding-top:16px;display:grid;gap:10px}
.lb-foot .btn[hidden]{display:none}
[data-screen="lobby"] .qrhero .code{display:inline;font-size:inherit;letter-spacing:.06em;color:var(--ink)}
.jn-from{display:flex;align-items:center;gap:8px;color:var(--lens)}
.jn-from .mono{color:var(--lens)}
[data-screen="join"] .jn-title{margin-top:16px}
.jn-me{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.jm-face .av.avf.xl{width:112px;height:112px}
.jm-l{color:var(--muted);font-size:13px;margin-top:8px}
.jm-n{font-family:var(--f-display);font-weight:700;font-size:26px}
.jm-btns{display:flex;gap:8px;margin-top:12px}
.pillbtn{height:38px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}
.pillbtn svg{width:15px;height:15px}
#joinNameSlot{margin-top:12px}
.jn-foot{padding-top:16px;display:grid;gap:8px;text-align:center}
.jn-foot .foot-note{margin:0 auto;color:var(--muted);font-size:12.5px}
#waitEye{color:var(--lens)}
[data-screen="wait"] h2.q{margin-top:14px}
.wlist{margin-top:22px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);padding:4px 16px}
.wrow{display:flex;align-items:center;gap:12px;padding:10px 0;box-shadow:inset 0 -1px 0 rgba(241,240,247,.07)}
.wrow:last-child{box-shadow:none}
.wrow b{flex:1;font-size:15.5px;font-weight:600}
.wrow em{font-style:normal;font-size:13px;color:var(--muted)}
.wrow.ready em{color:var(--lens)}
.wdots{flex:1;display:flex;align-items:center;justify-content:center;gap:10px}
.wdots i{width:11px;height:11px;border-radius:50%;background:var(--lens);animation:wdot 1.2s ease-in-out infinite}
.wdots i:nth-child(2){animation-delay:.15s}.wdots i:nth-child(3){animation-delay:.3s}
@keyframes wdot{0%,100%{opacity:.25}50%{opacity:1}}
.wait-next{text-align:center;color:var(--muted);font-size:14px;margin:0}
@media (prefers-reduced-motion:reduce){ .wdots i,.wn-time,.whynot{animation:none} }
.setupflow > .pq-hint{margin:10px 0 0;color:var(--ink-2);font-size:15px}
.whynot{position:absolute;left:22px;right:22px;z-index:30;margin:0;box-shadow:inset 0 0 0 1px var(--hair),0 12px 30px -10px rgba(0,0,0,.7)}
.yr-row{gap:10px}
.yr-big{font-size:clamp(56px,17vw,76px)}
.setup-top .st-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.setup-top .st-row .linkbtn{padding:4px 2px;color:var(--muted)}
[data-screen="join"] .jn-title,[data-screen="join"] .jn-sub{text-align:left;margin-left:0;margin-right:0}

/* ---------- the study (/study): "Did FOBO read you?" ---------- */
.st-eye{color:var(--lens)}
[data-screen^="st-"] h2.q{margin-top:10px}
.st-sub{max-width:34ch}
.st-note{color:var(--muted);font-size:13.5px;margin:14px 0 0;max-width:36ch}
.st-note b{color:var(--ink);font-family:var(--f-mono);letter-spacing:.08em}
.st-q{margin-top:auto;padding-top:22px;display:grid;gap:10px}
.st-welcome{flex:1;justify-content:center;align-items:center;text-align:center;gap:6px}
.st-welcome .q{font-size:34px;margin-top:6px}
.st-welcome .st-sub{max-width:320px;margin:8px auto 0;font-size:17px;line-height:1.45}
.st-welcome .st-note{max-width:300px;margin:14px auto 0;text-align:center}
.st-face{width:120px;height:120px}
.st-face svg{width:100%;height:100%;display:block}
.st-l{font-size:15px;font-weight:600}
.st-seg{display:flex;gap:8px}
.st-seg button{flex:1;height:48px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}
.st-seg button[aria-pressed="true"]{background:var(--lens);color:var(--on-lens);box-shadow:none}
.st-two{display:flex;gap:10px}
.st-two .btn{flex:1}
.st-rhead{display:flex;justify-content:space-between;align-items:center}
.st-rhead .mono:last-child{color:var(--muted)}
.st-rbar{height:4px;border-radius:4px;background:rgba(241,240,247,.12);margin-top:12px;overflow:hidden;--p:0%}
.st-rbar i{display:block;height:100%;width:var(--p);background:var(--lens);transition:width .25s ease}
.st-rcard{position:relative;flex:1;min-height:0;margin-top:16px;border-radius:24px;overflow:hidden;background:var(--raise);box-shadow:0 24px 60px -18px rgba(0,0,0,.8),inset 0 0 0 1px var(--hair)}
.st-rcard img,.st-rcard > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-rcard .rc-t{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 16px;background:linear-gradient(180deg,transparent,rgba(15,15,21,.92) 60%);display:grid;gap:3px}
.st-rcard .rc-t b{font-family:var(--f-display);font-size:24px;line-height:1.1;letter-spacing:-.02em}
.st-rcard .rc-t small{color:var(--ink-2);font-size:13.5px}
.st-rcard.in{animation:rcIn .22s ease}
@keyframes rcIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.st-rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.st-rbtns button{height:54px;border-radius:999px;font-size:15px;font-weight:650;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.st-rbtns .rb-love{background:var(--lens);color:var(--on-lens);box-shadow:none}
.st-rbtns .rb-no{color:var(--pink);box-shadow:inset 0 0 0 1.5px rgba(255,122,184,.5)}
.st-rbtns .rb-unseen{color:var(--muted)}
.st-rback{align-self:center;color:var(--muted);font-size:13px;margin-top:8px}
.st-lines{list-style:none;margin:16px 0 0;padding:16px 18px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);display:grid;gap:8px}
.st-lines li{font-size:15px;color:var(--ink-2);padding-left:18px;position:relative}
.st-lines li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--lens)}
.st-h{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.015em;margin:28px 0 0}
.st-hint{color:var(--muted);font-size:13.5px;margin:4px 0 12px}
/* the score card: first guess → second guess → tonight */
.st-deck{flex:none;max-height:none;aspect-ratio:3/3.9;margin-top:0}
.st-score{display:flex;gap:8px}
.st-score button{flex:1;height:52px;border-radius:14px;font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--ink);background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair)}
.st-score button[aria-pressed="true"]{background:var(--lens);color:var(--on-lens)}
.st-ends{display:flex;justify-content:space-between;color:var(--muted);margin-top:6px;font-size:11px}
.st-miss{display:grid;gap:6px;margin-top:22px}
.st-miss span{font-size:14px;font-weight:600}
.st-miss textarea{width:100%;border-radius:14px;border:0;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);font:inherit;font-size:15px;padding:12px 14px;resize:vertical}
.st-miss textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--lens)}
[data-screen="st-score"] .setup-foot{padding-top:22px;padding-bottom:10px}
/* one continuous progress line for the whole study */
.st-prog{position:absolute;top:0;left:0;right:0;height:3px;z-index:30;background:rgba(241,240,247,.1);--p:0%}
.st-prog i{display:block;height:100%;width:var(--p);background:var(--lens);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.st-prog[hidden]{display:none}
.st-cq{font-size:24px;margin-top:10px}
.st-rbtns.two{grid-template-columns:1fr 1fr}
.st-rback[hidden]{display:none}
.st-bridge{align-items:flex-start;text-align:left;justify-content:center;flex:1}
.st-bridge .setup-foot{width:100%}
.st-likes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.st-likes span{padding:8px 12px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);font-size:13.5px;color:var(--ink)}
.st-big{font-family:var(--f-display);font-weight:800;font-size:64px;letter-spacing:-.04em;line-height:1;margin-top:18px;font-variant-numeric:tabular-nums}
.st-doneline{font-size:18px;color:var(--ink-2);margin-top:10px;text-align:center}
[data-screen="st-done"] .center{align-items:center;text-align:center}
[data-screen="st-done"] .st-note{text-align:center}
[data-screen="st-done"] .done-actions{margin-top:26px;width:100%;display:grid;gap:10px}

/* how long: a main answer above a short / medium / long slider; new or old: two famous posters */
.gs-line{color:var(--ink-2);font-size:14.5px;text-align:center;margin-top:2px;min-height:1.4em}
.gr-grid.slider.untouched .gs-range::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(214,255,92,.12),0 6px 16px rgba(0,0,0,.5)}
.gr-grid.slider .gs-main{justify-self:center;color:var(--muted);font-size:14px;padding:4px 8px}
.gr-grid.slider .gs-main[hidden]{display:none}
.gb-len{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center}
.gb-l{display:grid;justify-items:center;gap:6px;padding:16px 6px 14px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--ink)}
.gb-la{width:min(22vw,88px);aspect-ratio:1;display:block}
.gb-la svg{width:100%;height:100%;display:block;border-radius:50%}
.gb-l b{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.01em}
.gb-l small{color:var(--muted);font-size:12.5px}
.gr-grid.buttons.decided .gb-l:not(.sel){opacity:.35;transition:opacity .2s ease}
.gb-l.sel{box-shadow:inset 0 0 0 2px var(--lens)}
.gb-tiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.gb-t{display:grid;gap:8px;padding:0;background:transparent;color:var(--ink);text-align:center}
.gb-tile{position:relative;display:block;aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:var(--raise);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 0 0 1px var(--hair);max-height:min(44vh,330px);margin:0 auto;width:100%}
.gb-tile img,.gb-tile svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gb-tile small{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-size:11.5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));text-align:left}
.gb-t b{font-size:15px;font-weight:700}
.gr-grid.buttons.decided .gb-t:not(.sel){opacity:.35;transition:opacity .2s ease}
.gr-grid.slider.untouched .gs-label,.gr-grid.slider.untouched .gs-line,.gr-grid.slider.untouched .gs-art{opacity:.55;transition:opacity .2s ease}

/* the study card: five equal answers (nothing looks chosen before you tap); "Don't know it" spans the row */
.st-chint{margin:4px 0 0}
.st-chint[hidden]{display:none}
.st-rbtns.five{grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.st-rbtns.five button{height:50px;border-radius:999px;font-size:15px;font-weight:650;color:var(--ink);background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--hair-2);transition:background .12s ease,color .12s ease}
.st-rbtns.five .st-dk{grid-column:1/-1;background:transparent;color:var(--ink-2)}
.st-rbtns.five button.hit{background:var(--lens);color:var(--on-lens);box-shadow:none}
[data-screen="st-card"] .st-rcard{margin-top:12px}
/* the break: FOBO thinks, then explains the last round */
.st-think{flex:1;justify-content:center;align-items:center;text-align:center;gap:8px}
.st-thinkface{animation:stthink 1.1s ease-in-out infinite alternate}
@keyframes stthink{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-8px) rotate(4deg)}}
.st-thinking{transition:opacity .3s ease}
.st-thinkdone{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;max-width:330px}
.st-thinkdone .q{font-size:28px}
.st-thinkdone .st-sub{margin-top:10px;font-size:16.5px;line-height:1.45}
[data-screen="st-think"].ready .st-thinkface{animation:none}
[data-screen="st-think"].ready .st-thinking{opacity:0}
[data-screen="st-think"].ready .st-thinkdone{opacity:1;transform:none}
/* the result */
.st-verdict{display:grid;justify-items:center;text-align:center;padding-top:8px}
.st-doneface{width:96px;height:96px}
.st-verdict .q{font-size:32px;margin-top:4px}
.st-verdict .sub{margin-top:4px;color:var(--ink-2)}
.st-sum{margin-top:12px;font-size:16px;line-height:1.4;max-width:320px}
.st-corners{margin-top:10px;padding:8px 14px;border-radius:999px;background:rgba(214,255,92,.12);color:var(--lens);font-size:14px;font-weight:600;max-width:340px}
.st-corners[hidden]{display:none}
.st-rh{font-family:var(--f-display);font-weight:700;font-size:16px;margin:22px 0 0}
.st-prow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.st-rt{position:relative;display:grid;gap:5px;opacity:.45}
.st-rt.yes{opacity:1}
.st-rt img,.st-rt .g9-art{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;display:block;background:var(--raise)}
.st-rt .g9-art svg{width:100%;height:100%;display:block}
.st-rt.yes img,.st-rt.yes .g9-art{box-shadow:0 0 0 2.5px var(--lens)}
.st-rt i{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--lens);color:var(--on-lens);display:none;place-items:center}
.st-rt i svg{width:15px;height:15px}
.st-rt.yes i{display:grid}
.st-rt small{font-size:11px;line-height:1.25;color:var(--ink-2)}
/* "What's this?": the card turns over to show what the title is */
.st-rcard .rc-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px 20px 20px;background:rgba(12,11,18,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.st-rcard .rc-info b{font-family:var(--f-display);font-size:24px;line-height:1.1;letter-spacing:-.02em}
.st-rcard .rc-info small{color:var(--lens);font-family:var(--f-mono,monospace);font-size:12.5px}
.st-rcard .rc-info p{color:var(--ink);font-size:16px;line-height:1.5;margin:6px 0 0}
.st-rcard.flipped .rc-info{opacity:1}
.st-rcard.flipped .rc-t{opacity:0}
.st-rbtns.five.three{grid-template-columns:1fr 1fr}
/* the end: favourites and a note, saved as you go */
.st-extra{margin-top:10px;padding-top:6px;border-top:1px solid var(--hair)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.st-chips:empty{display:none}
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--lens);color:var(--on-lens);font-size:14px;font-weight:600}
.st-chip small{opacity:.7;font-weight:500}
.st-chip i{font-style:normal;font-size:17px;line-height:1;opacity:.7;margin-left:2px}
.st-favq{width:100%;margin-top:10px;height:50px;border-radius:14px;border:0;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);font:inherit;font-size:16px;padding:0 14px}
.st-favq:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--lens)}
.st-favq:disabled{opacity:.55}
.st-sugs{display:grid;gap:6px;margin-top:8px}
.st-sug{display:grid;grid-template-columns:34px 1fr;grid-template-areas:"p t" "p s";column-gap:12px;align-items:center;text-align:left;padding:6px 10px 6px 6px;border-radius:12px;background:var(--raise);color:var(--ink)}
.st-sug img,.st-sug .g9-art,.st-sug .st-plus{grid-area:p;width:34px;height:50px;border-radius:6px;object-fit:cover;display:block;background:var(--raise-2)}
.st-sug .g9-art svg{width:100%;height:100%}
.st-sug .st-plus{display:grid;place-items:center;font-size:22px;color:var(--lens)}
.st-sug b{grid-area:t;font-size:15px;font-weight:600}
.st-sug small{grid-area:s;color:var(--muted);font-size:12.5px}
.st-note-in{width:100%;margin-top:10px;border-radius:14px;border:0;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);font:inherit;font-size:16px;padding:12px 14px;resize:none}
.st-note-in:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--lens)}
.st-saved{min-height:1.3em;margin-top:6px;font-size:12.5px;color:var(--muted);text-align:right}
.st-saved[data-state="saved"]{color:var(--lens)}
.st-saved[data-state="error"]{color:var(--pink)}
.st-code{margin-top:16px;text-align:center}
.st-actions{margin-top:16px;display:grid;gap:10px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.yr.untouched .yr-big{opacity:.35}

/* =========================================================
   THE LAB DASHBOARD (/lab): full screen, over the app. The old rail beside the phone is gone.
   ========================================================= */
.rail{display:none!important}
.dash{--d-panel:#121219;--d-panel-2:#1A1A24;--d-ok:#7FE0B5;--d-warn:#FFC56B;--d-bad:#FF7A8A;
  position:fixed;inset:0;z-index:90;background:var(--night);color:var(--ink);overflow:auto;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.45;color-scheme:dark}
.dash[hidden]{display:none}
body.dash-on .stage,body.dash-on #toasts{visibility:hidden}
.dash *{box-sizing:border-box}
.dash .num{font-variant-numeric:tabular-nums}
.dash .d-mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.d-app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100%}
.d-rail{position:sticky;top:0;height:100vh;height:100dvh;padding:22px 14px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:22px;background:var(--night)}
.d-logo{display:flex;align-items:center;gap:10px;padding:0 8px}
.d-logo b{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.d-logo span{font-family:var(--f-mono);font-size:11px;color:var(--on-lens);background:var(--lens);padding:2px 7px;border-radius:999px}
.d-nav{display:grid;gap:2px}
.d-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500}
.d-nav a:hover{background:var(--d-panel);color:var(--ink)}
.d-nav a[aria-current="page"]{background:var(--d-panel-2);color:var(--ink)}
.d-nav a i{width:8px;height:8px;border-radius:50%;background:var(--hair-2);flex:none}
.d-nav a[aria-current="page"] i{background:var(--lens)}
.d-nav a em{margin-left:auto;font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--on-lens);background:var(--lens);border-radius:999px;padding:1px 7px}
.d-nav a em[hidden]{display:none}
.d-foot{margin-top:auto;display:grid;gap:8px;padding:0 8px;color:var(--muted);font-size:12px;justify-items:start}
.d-foot b{color:var(--ink-2);font-weight:500}
.d-link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font-size:12.5px;padding:0}
.d-link:hover{color:var(--ink)}
.d-main{min-width:0;padding-block:26px 60px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.d-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.d-top h1{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin:4px 0 0;text-wrap:balance}
.d-page{display:none}
.d-page.on{display:block}
.d-grid{display:grid;gap:14px}
.d-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.d-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.d-grid.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.d-panel{background:var(--d-panel);border:1px solid var(--hair);border-radius:16px;padding:16px 18px;min-width:0}
.d-panel h2{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.01em;margin:0}
.d-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.d-sub{color:var(--muted);font-size:12.5px}
.d-gap{height:14px}
.d-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.d-lead{margin:0 0 14px;color:var(--ink-2)}
.d-lead b{color:var(--ink)}
/* buttons: the app's, at desktop size */
.dash .btn{width:auto;height:38px;padding:0 16px;font-size:13.5px;font-weight:600;background:var(--d-panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2);flex:none}
.dash .btn:hover{background:#22222E}
.dash .btn.btn-lens{background:var(--lens);color:var(--on-lens);box-shadow:none}
.dash .btn.btn-lens:hover{background:#E2FF83}
.dash .btn.sm{height:32px;padding:0 12px;font-size:12.5px}
.dash .btn[disabled]{opacity:.38;pointer-events:none}
.dash select,.dash input[type=text],.dash input[type=password]{background:var(--d-panel-2);color:var(--ink);border:1px solid var(--hair-2);border-radius:8px;height:32px;padding:0 8px;font:inherit;font-size:13px}
/* status tiles */
.d-stat{display:grid;gap:8px;align-content:start}
.d-t{display:flex;align-items:center;gap:8px}
.d-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--hair-2)}
.d-dot.ok{background:var(--d-ok);box-shadow:0 0 0 3px rgba(127,224,181,.15)}
.d-dot.warn{background:var(--d-warn);box-shadow:0 0 0 3px rgba(255,197,107,.15)}
.d-dot.bad{background:var(--d-bad)}
.d-big{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.05}
.d-big small{font-family:var(--f-body);font-weight:500;font-size:13px;color:var(--ink-2);letter-spacing:0}
.d-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.d-kv span{color:var(--muted)}
.d-kv b{font-weight:500;text-align:right}
.d-svc{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--ink-2)}
.d-svc span{display:inline-flex;align-items:center;gap:6px}
.d-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;background:linear-gradient(90deg,rgba(214,255,92,.14),rgba(214,255,92,.04));border:1px solid rgba(214,255,92,.35)}
.d-banner .d-txt{flex:1;min-width:240px}
.d-banner b{font-family:var(--f-display);font-weight:600;font-size:16px}
.d-banner p{margin:4px 0 0;color:var(--ink-2)}
/* lists */
.d-alerts{display:grid;gap:8px}
.d-alert{display:grid;grid-template-columns:4px 1fr auto;gap:12px;align-items:center;padding:10px 12px 10px 0;border-radius:10px;background:var(--d-panel-2)}
.d-alert i{align-self:stretch;border-radius:0 3px 3px 0;background:var(--hair-2)}
.d-alert.warn i{background:var(--d-warn)}.d-alert.bad i{background:var(--d-bad)}
.d-alert small{color:var(--muted);display:block}
.d-feed{display:grid}
.d-feed>div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--hair);font-size:13px}
.d-feed>div:first-child{border-top:0}
.d-feed time{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);padding-top:2px}
.d-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--d-panel-2);color:var(--muted)}
.d-pill.got,.d-pill.applied{background:rgba(214,255,92,.16);color:var(--lens)}
.d-pill.close,.d-pill.ok{background:rgba(127,224,181,.14);color:var(--d-ok)}
.d-pill.missed{background:rgba(255,122,138,.14);color:var(--d-bad)}
.d-pill.warn{background:rgba(255,197,107,.14);color:var(--d-warn)}
/* charts */
.d-duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:end}
.d-bar{height:150px;display:flex;align-items:flex-end;border-bottom:1px solid var(--hair-2);position:relative}
.d-bar i{display:block;width:100%;border-radius:10px 10px 2px 2px}
.d-ci{position:absolute;left:50%;width:2px;background:var(--ink);opacity:.6;transform:translateX(-50%)}
.d-ci::before,.d-ci::after{content:"";position:absolute;left:-6px;width:14px;height:2px;background:var(--ink)}
.d-ci::before{top:0}.d-ci::after{bottom:0}
.d-duel b{font-family:var(--f-display);font-weight:800;font-size:30px;display:block;margin-top:8px}
.d-duel small{color:var(--muted)}
.d-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:8px 0 10px;background:var(--d-panel-2)}
.d-stack i{display:block}
.d-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2)}
.d-legend span{display:inline-flex;align-items:center;gap:6px}
.d-legend i{width:10px;height:10px;border-radius:3px}
.d-hbars{display:grid;gap:7px}
.d-hbar{display:grid;grid-template-columns:150px minmax(0,1fr) 84px;gap:10px;align-items:center;font-size:13px}
.d-track{height:10px;border-radius:999px;background:var(--d-panel-2);position:relative;overflow:hidden}
.d-track i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.d-track i.a{background:var(--hair-2)}.d-track i.b{background:var(--lens)}
.d-hbar em{font-style:normal;color:var(--muted);font-size:12px;text-align:right}
/* tables */
.d-tw{overflow-x:auto}
.dash table{width:100%;border-collapse:collapse;font-size:13px}
.dash th{text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--hair-2);white-space:nowrap}
.dash td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
tr.d-person{cursor:pointer}
tr.d-person:hover td{background:rgba(241,240,247,.025)}
tr.d-more td{background:var(--d-panel-2);color:var(--ink-2);line-height:1.6}
.d-chips{display:flex;flex-wrap:wrap;gap:5px}
.d-chip{padding:2px 8px;border-radius:999px;background:var(--d-panel-2);font-size:12px;color:var(--ink-2)}
.d-chip.lens{background:rgba(214,255,92,.14);color:var(--lens)}
/* learning runs */
.d-loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.d-step{padding:12px;border-radius:12px;background:var(--d-panel-2);display:grid;gap:4px;align-content:start}
.d-step b{font-weight:600}
.d-step small{color:var(--muted)}
.d-step .st{font-family:var(--f-mono);font-size:11px;color:var(--d-ok)}
.d-step.ready{box-shadow:inset 0 0 0 1px rgba(214,255,92,.45)}
.d-step.ready .st{color:var(--lens)}
.d-diff{display:grid;gap:6px;margin-top:6px}
.d-diff div{display:grid;grid-template-columns:minmax(0,1fr) 60px 18px 60px;gap:8px;font-size:13px;align-items:center}
.d-diff .from{color:var(--muted);text-align:right}
.d-diff .to{color:var(--lens);font-weight:600;text-align:right}
.d-diff .arrow{color:var(--muted);text-align:center}
/* library */
.d-pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.d-stage{position:relative;padding:12px;border-radius:12px;background:var(--d-panel-2);display:grid;gap:6px;min-width:0;align-content:start}
.d-stage .n{font-family:var(--f-display);font-weight:600;font-size:17px}
.d-stage small{color:var(--muted);font-size:12px}
.d-stage .s{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.d-stage.warn,.d-stage.run{box-shadow:inset 0 0 0 1px rgba(255,197,107,.4)}
.d-stage.bad{box-shadow:inset 0 0 0 1px rgba(255,122,138,.4)}
.d-run{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink-2)}
.d-run .pbar{flex:1 1 200px}
.d-adv{border-top:1px solid var(--hair);margin-top:14px;padding-top:12px}
.d-adv summary{cursor:pointer;color:var(--ink-2);font-weight:500;list-style:none;display:flex;align-items:center;gap:8px}
.d-adv summary::-webkit-details-marker{display:none}
.d-adv summary::before{content:"+";font-family:var(--f-mono);color:var(--muted);width:14px}
.d-adv[open] summary::before{content:"−"}
.d-advs{display:grid;gap:10px;margin-top:12px}
.d-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--d-panel-2)}
.d-line small{display:block;color:var(--muted)}
.dash .kout:empty{display:none}
.dash .kout{margin-top:10px;font-size:13px}
/* engine and settings */
.d-try{display:flex;flex-wrap:wrap;gap:8px}
.d-try .btn{text-decoration:none}
.d-srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair);flex-wrap:wrap}
.d-srow:first-of-type{border-top:0}
.d-srow small{display:block;color:var(--muted)}
/* the Lab's own panels, reused inside: flatten their sheet look */
.d-reuse .rblock{background:transparent;border:0;padding:0;margin:0 0 14px;box-shadow:none}
.d-reuse .railpanel{margin:0}
.dash .d-keys .rblock:has(.cat-stats),.dash .d-keys .rblock:has([data-out="build"]),.dash .d-keys .rblock:has([data-out="bank"]){display:none}
.dash .d-growth .rblock:has(.entry),.dash .d-growth .rblock:has(.loop){display:none}
#dOvIns>.rblock:first-child{display:none}
.d-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--night);padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px;transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:95;max-width:calc(100vw - 32px);text-align:center}
.d-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){.d-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.d-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}.d-loop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .d-app{grid-template-columns:minmax(0,1fr)}
  .d-rail{position:sticky;top:0;height:auto;z-index:10;flex-direction:row;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-right:0;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
  .d-nav{display:flex;gap:2px}
  .d-nav a{padding:7px 10px;white-space:nowrap}
  .d-nav a i,.d-foot{display:none}
  .d-main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .d-grid.g2,.d-grid.g21{grid-template-columns:minmax(0,1fr)}
  .d-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-hbar{grid-template-columns:110px minmax(0,1fr) 72px}
}
@media (max-width:480px){.d-grid.g4,.d-loop{grid-template-columns:minmax(0,1fr)}.d-top h1{font-size:23px}}
@media (prefers-reduced-motion:reduce){.d-toast{transition:none}}
/* study answers: icon + words */
.st-rbtns button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.st-rbtns .st-ic{width:18px;height:18px;flex:none}
.st-rbtns button[data-r="loved"] .st-ic{color:var(--lens)}
.st-rbtns button[data-r="no"] .st-ic{color:var(--pink,#FF7AB8)}
.st-rbtns button[data-r="want"] .st-ic{color:var(--violet)}
.st-rbtns button.hit .st-ic{color:currentColor}

/* swipe feedback: the edge lights up in the answer's colour; a round icon and plain words */
.card .stamp{inset:0;top:0;padding:0;border:0;border-radius:inherit;background:none;rotate:none;translate:none;font:inherit;letter-spacing:0;text-transform:none;display:flex;pointer-events:none;transition:none}
.card .stamp::before{content:"";position:absolute;inset:0;border-radius:inherit}
.card .st-yes{color:var(--lens);justify-content:flex-start;align-items:flex-start}
.card .st-yes::before{background:linear-gradient(90deg,rgba(214,255,92,.42),rgba(214,255,92,0) 60%);box-shadow:inset 0 0 0 3px rgba(214,255,92,.9)}
.card .st-no{color:#FF7AB8;justify-content:flex-end;align-items:flex-start}
.card .st-no::before{background:linear-gradient(270deg,rgba(255,122,184,.42),rgba(255,122,184,0) 60%);box-shadow:inset 0 0 0 3px rgba(255,122,184,.9)}
.card .st-later{color:var(--violet);justify-content:center;align-items:flex-start}
.card .st-later::before{background:linear-gradient(180deg,rgba(185,166,255,.45),rgba(185,166,255,0) 55%);box-shadow:inset 0 0 0 3px rgba(185,166,255,.9)}
.card .st-seen{color:#F1F0F7;justify-content:center;align-items:flex-end}
.card .st-seen::before{background:linear-gradient(0deg,rgba(241,240,247,.32),rgba(241,240,247,0) 55%);box-shadow:inset 0 0 0 3px rgba(241,240,247,.7)}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin:34px 22px}
.card .st-seen .sp-in{margin-bottom:120px}
.sp-in i{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:currentColor;box-shadow:0 12px 30px -8px rgba(0,0,0,.6)}
.sp-in i svg{width:30px;height:30px;color:#0B0B10}
.sp-in b{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75);white-space:nowrap}

/* the first deck: a short, friendly how-to (a nodding blob, a card that swings), once */
.coach{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));background:rgba(9,9,13,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center;opacity:0;transition:opacity .25s var(--ease-out)}
.coach.on{opacity:1}
.coach h3{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.02em;margin:0}
.coach .co-face{width:92px;height:92px;animation:coNod 1.6s var(--ease-in-out) infinite}
@keyframes coNod{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(5px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(5px) rotate(3deg)}}
.co-demo{position:relative;width:min(300px,100%);height:150px}
.co-card{position:absolute;left:50%;top:6px;width:96px;height:136px;margin-left:-48px;border-radius:14px;background:linear-gradient(160deg,#2B2840,#15141D);box-shadow:0 14px 30px -12px rgba(0,0,0,.8),inset 0 0 0 1px var(--hair-2);animation:coSwing 3.2s var(--ease-in-out) infinite}
@keyframes coSwing{0%,12%{transform:none}30%,40%{transform:translateX(70px) rotate(10deg);box-shadow:inset 0 0 0 3px var(--lens)}55%,62%{transform:none}80%,90%{transform:translateX(-70px) rotate(-10deg);box-shadow:inset 0 0 0 3px #FF7AB8}100%{transform:none}}
.co-side{position:absolute;top:50px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:650;width:84px}
.co-side i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#0B0B10}
.co-side i svg{width:18px;height:18px}
.co-side.l{left:0;color:#FF7AB8}.co-side.l i{background:#FF7AB8}
.co-side.r{right:0;color:var(--lens)}.co-side.r i{background:var(--lens)}
.co-more{color:var(--ink-2);font-size:14px;margin:0;max-width:300px}
.coach .btn{max-width:320px}
.coach .co-never{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.coach .co-face,.co-card{animation:none}}

/* the mood pad: drag the blob; corners are moods */
.gr-grid.padq{display:flex;flex-direction:column;align-items:stretch;flex:1;min-height:0}
.mp{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;width:100%}
.mp-pad{position:relative;flex:1;min-height:300px;border-radius:28px;background:radial-gradient(70% 70% at 50% 50%,rgba(255,255,255,.035),transparent 70%),var(--deep);box-shadow:inset 0 0 0 1px var(--hair);touch-action:none;cursor:grab;overflow:hidden;outline:none}
.mp-pad:focus-visible{box-shadow:inset 0 0 0 2px var(--lens)}
.mp-pad:active{cursor:grabbing}
.mp-pad canvas{position:absolute;inset:0;width:100%;height:100%}
.mp-grid{position:absolute;inset:12%;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.mp-face{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.mp-face svg{width:100%;height:100%;display:block}
.mp-c{position:absolute;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink);opacity:.85;pointer-events:none}
.mp-c.tl{left:16px;top:14px}.mp-c.tr{right:16px;top:14px}.mp-c.bl{left:16px;bottom:14px}.mp-c.br{right:16px;bottom:14px}
.mp-ax{position:absolute;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.mp-ax.top{top:16px;left:50%;translate:-50% 0}.mp-ax.bot{bottom:16px;left:50%;translate:-50% 0}
.mp-ax.lft{left:10px;top:50%;writing-mode:vertical-rl;rotate:180deg;translate:0 -50%}.mp-ax.rgt{right:10px;top:50%;writing-mode:vertical-rl;translate:0 -50%}
.mp-word{text-align:center;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.02em;min-height:30px}
.gr-grid.padq:not(.touched) .mp-word{color:var(--muted);font-family:var(--f-body);font-weight:500;font-size:15px}
.gr-grid.padq.decided .mp{opacity:.5;transition:opacity .2s}
/* rooms: thumbs for the people watching; everyone sees them on the card */
.act.thumb{width:auto;flex:none}
.act.thumb .ab{width:48px;height:48px;background:var(--raise-2);color:var(--ink)}
.act.thumb .ab svg{width:22px;height:22px}
.act.thumb.up.on .ab{background:var(--lens);color:var(--on-lens)}
.act.thumb.no.on .ab{background:#FF7AB8;color:#0B0B10}
.watching .act.thumb + .act.thumb{margin-left:-4px}
.vetonote{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;background:rgba(255,255,255,.05);color:var(--ink)}
.vetonote .tv{display:inline-flex;align-items:center;gap:6px}
.vetonote .tv svg{width:16px;height:16px}
.vetonote .tv.up{color:var(--lens)}.vetonote .tv.no{color:#FF7AB8}
.co-card.still{animation:none}
/* smooth scale pictures: two layers crossfaded by the slider */
.sa{position:relative;will-change:transform}
.sa .sa-l{position:absolute;inset:0;display:block}
.sa .sa-l svg{width:100%;height:100%;display:block}

/* home: a slow, tilted wall of posters behind the question (like the desktop page), fading into the night */
.home-wall{position:absolute;left:0;right:0;top:0;height:min(400px,50vh);overflow:hidden;pointer-events:none;z-index:0;perspective:1200px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,#000 30%,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,#000 30%,#000 52%,transparent 100%)}
.home-wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,21,.55),rgba(15,15,21,.15) 40%,rgba(15,15,21,.65))}
.hw-tilt{position:absolute;left:-30%;right:-30%;top:-8px;display:flex;flex-direction:column;gap:12px;transform:rotateX(12deg) rotateZ(-7deg);transform-origin:50% 0}
.hw-row{display:flex;gap:12px;width:max-content;animation:hwMove 90s linear infinite}
.hw-row.r2{animation-direction:reverse;animation-duration:110s;margin-left:-60px}
@keyframes hwMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hw-p{flex:none;width:104px;height:156px;border-radius:14px;overflow:hidden;background:var(--raise-2);box-shadow:0 18px 36px -16px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.hw-p img,.hw-p svg{display:block;width:100%;height:100%;object-fit:cover}
.hw-row .hw-p:nth-child(even){transform:translateY(10px)}
.screen:not(.is-active) .hw-row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hw-row{animation:none}}
[data-screen="home"] > :not(.home-wall){position:relative;z-index:1}
[data-screen="home"] .lensring{margin-top:min(150px,17vh);box-shadow:0 18px 50px -10px rgba(0,0,0,.8)}

/* the study's voice feedback: the ask card on the thank-you screen, and the listening screen */
.st-vcard{margin:22px 0 6px;padding:20px 18px;border-radius:24px;background:linear-gradient(165deg,rgba(214,255,92,.12),rgba(214,255,92,.03) 60%),var(--raise);box-shadow:inset 0 0 0 1px rgba(214,255,92,.3);text-align:center}
.st-vface{width:84px;height:84px;margin:0 auto 6px}
.st-vh{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.15;margin:4px 0 6px}
.st-vp{display:block;margin:0 auto 14px;max-width:320px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.st-vtype{margin-top:8px}
.st-vno{margin:10px auto 0;color:var(--muted)}
.st-vdone{text-align:left}
.st-vdone .eyebrow{color:var(--lens)}
.st-vdone .st-vp{margin:0 0 8px;max-width:none}
.st-vdone textarea{min-height:110px}
.st-vdone .linkbtn{margin-top:6px}
[data-screen="st-voice"]{align-items:stretch;text-align:center;background:radial-gradient(70% 50% at 50% 55%,rgba(214,255,92,.08),transparent 70%)}
.sv-top{display:flex;justify-content:center}
.sv-rec{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(241,240,247,.06);color:var(--ink-2);font-size:12px;letter-spacing:.04em}
.sv-rec i{width:8px;height:8px;border-radius:50%;background:#FF7AB8}
.sv-rec.on i{animation:svDot 1s ease-in-out infinite}
@keyframes svDot{50%{opacity:.25}}
.sv-qs{position:relative;height:118px;margin-top:22px}
.sv-q{position:absolute;left:0;right:0;top:0;margin:0;font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.18;letter-spacing:-.01em;padding:0 6px;opacity:0;transform:translateY(22px);transition:opacity 900ms var(--ease-out),transform 1400ms var(--ease-out)}
.sv-q.in{opacity:1;transform:none}
.sv-q.out{opacity:0;transform:translateY(-26px);transition:opacity 700ms ease,transform 1200ms ease}
.sv-blob{position:relative;width:min(180px,46vw);aspect-ratio:1;margin:8px auto 0;flex:none}
.sv-face{position:relative;width:100%;height:100%}
.sv-face svg{width:100%;height:100%;display:block}
.sv-ring{position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(214,255,92,.55);opacity:0}
[data-screen="st-voice"].listening .sv-ring{animation:svRing 1.8s var(--ease-out) infinite}
[data-screen="st-voice"].listening .sv-ring.r2{animation-delay:.9s}
@keyframes svRing{0%{opacity:.6;transform:scale(.92)}100%{opacity:0;transform:scale(1.45)}}
.sv-live{flex:1;min-height:0;overflow:hidden;margin:18px 4px 10px;font-size:15px;line-height:1.5;color:var(--muted);display:flex;align-items:flex-end;justify-content:center;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.sv-live b{color:var(--ink-2);font-weight:500}
.sv-foot{display:flex;flex-direction:column;gap:6px}
@media (prefers-reduced-motion:reduce){.sv-q,.sv-q.out{transition:opacity 200ms ease;transform:none}[data-screen="st-voice"].listening .sv-ring,.sv-rec.on i{animation:none}}
/* the Lab's Voices */
.d-vo-g{display:grid;gap:6px;margin-top:12px}
.d-vo{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--d-panel-2)}
.d-vo-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(214,255,92,.14);color:var(--lens);font-weight:650;font-size:13px}
.d-vo-b b{font-weight:600}
.d-vo-b small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.d-vo-b details{margin-top:4px;font-size:12.5px;color:var(--ink-2)}
.d-vo-b details summary{cursor:pointer;color:var(--muted)}
.d-vo-b details p{margin:4px 0 0}
.d-vo.accepted{box-shadow:inset 0 0 0 1px rgba(214,255,92,.4)}
.d-vo.done,.d-vo.dismissed{opacity:.6}
.dash .btn.sm.on{background:var(--lens);color:var(--on-lens);box-shadow:none}
@media (max-width:820px){.d-vo{grid-template-columns:30px minmax(0,1fr)}.d-vo .d-row{grid-column:2}}

/* languages: hello in other scripts around a subtitled line; the "yes" answer is the main button */
.pk-art{position:relative;flex:1;min-height:120px;max-height:220px}
.pk-art>span{position:absolute;font-weight:600;font-size:15px;color:var(--ink);opacity:.28;line-height:1;font-family:var(--f-body),"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans",sans-serif}
.pk-screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(240px,86%);border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);padding:26px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-weight:600}
.pk-screen span{font-size:14px;opacity:.9}.pk-screen .pk-sub{font-size:12px;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:5px;white-space:nowrap}
.pk.pk-subs{flex:none}
.pk.pk-subs .pk-tile[data-k="0"]{background:var(--lens);color:var(--on-lens);box-shadow:none}
.pk.pk-subs .pk-tile[data-k="0"] small{color:var(--on-lens);opacity:.75}
.pk.pk-subs .pk-tile[data-k="0"] .pk-ic{background:rgba(0,0,0,.12)}
.pk.pk-subs .pk-tile[data-k="1"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hair)}
.pk.pk-subs .pk-ic{width:44px;height:44px}

/* ---------- the deck, next round: trailer bar, swipe up for details, Later button, hints on the first card, why not ---------- */
.tbar{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:9px 12px;border-radius:14px;background:rgba(241,240,247,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:14.5px;text-align:left}
.tbar i{width:28px;height:28px;border-radius:50%;background:#fff;color:#0b0b10;display:grid;place-items:center;flex:none}
.tbar i svg{width:13px;height:13px}
.cmore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:4px 0;font-size:12.5px;font-weight:600;color:var(--muted)}
.cmore svg{width:15px;height:15px}
.card[data-pos="0"]:not(.learn) .cmore svg{animation:cmUp 2.2s ease-in-out 3}
@keyframes cmUp{50%{transform:translateY(-3px)}}
.actions .act.later .ab{color:var(--sky,#7fe0ff)}
.actions{gap:10px}
.bk-trailer{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:118px;border-radius:16px;background:#2a2440 center/cover no-repeat;color:#fff;font-weight:700;font-size:14px;overflow:hidden}
.bk-trailer::before{content:"";position:absolute;inset:0;background:rgba(9,9,13,.45)}
.bk-trailer i,.bk-trailer span{position:relative}
.bk-trailer i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#0b0b10;display:grid;place-items:center}
.bk-trailer i svg{width:18px;height:18px}
/* first card: Skip and Watch on the edges, and one small wiggle */
.learn-edge{display:none}
.card.learn .learn-edge{position:absolute;top:40%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 9px;border-radius:14px;background:rgba(9,9,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:750;font-size:13px;pointer-events:none}
.card.learn .learn-edge svg{width:20px;height:20px}
.card.learn .learn-edge.l{left:10px;color:#ff8a8a}
.card.learn .learn-edge.r{right:10px;color:var(--lens)}
.card.learn .card-in{animation:learnWig 2.8s cubic-bezier(.45,0,.55,1) .4s 2}
@keyframes learnWig{0%,30%,100%{transform:none}10%{transform:translateX(-14px) rotate(-1.5deg)}20%{transform:translateX(14px) rotate(1.5deg)}}
/* why not: the next card dims behind the question */
.deck.asking .card[data-pos="0"] .card-in{filter:blur(5px) brightness(.45)}
.whynot{flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 14px}
.wn-hd{display:flex;align-items:center;gap:10px}
.wn-th{width:34px;height:50px;border-radius:7px;overflow:hidden;flex:none;box-shadow:0 0 0 1.5px rgba(255,138,138,.85)}
.wn-th img,.wn-th svg{width:100%;height:100%;object-fit:cover;display:block}
.wn-hd small{display:block;margin-top:2px;font-size:12px;color:var(--muted);font-weight:500}
.wn-q{flex:none;font-size:14.5px;line-height:1.25}
.wn-row{display:flex;flex-wrap:wrap;gap:7px}
.wn-b{height:38px}
.wn-b.main{background:#f1f0f7;color:#0b0b10;box-shadow:none}
.wn-time{animation-duration:6s}
.wn-done{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-weight:700;color:var(--lens)}
.wn-done i{width:24px;height:24px;display:grid;place-items:center}
.wn-done svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.card.learn .card-in,.cmore svg{animation:none}}

/* how it works, slide 3: the wall sleeps, one poster is awake */
.ob-gem .ob-p{filter:brightness(.35) saturate(.6)}
.ob-gem .ob-p.ob-lit{filter:none;box-shadow:0 0 0 3px var(--lens),0 24px 60px -16px rgba(214,255,92,.55);transform:scale(1.06);z-index:1}

/* ===== polish 22 Oct: the card is one scrolling box (poster first, details below), no flip ===== */
.card{touch-action:pan-y}
.card.dragging{touch-action:none}
.face.front.cs{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.cs::-webkit-scrollbar{display:none}
.cs-hero{position:relative;height:100%;overflow:hidden}
.cs-hero .cimg{transform:scale(calc(1 + var(--scr,0) * .05));opacity:calc(1 - var(--scr,0) * .55);transform-origin:50% 30%}
.ctags{right:14px}
.ctags .mchip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;padding:7px 12px}
.creason{margin:2px 0 0;font-size:14.5px;line-height:1.38;color:rgba(241,240,247,.92);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmore{min-height:44px;margin-top:2px;padding:0;font-size:13.5px;color:rgba(241,240,247,.72)}
.cmore svg{animation:cmDown 2.2s ease-in-out 1.2s 3}
@keyframes cmDown{0%,100%{transform:none}50%{transform:translateY(3px)}}
.card[data-pos="0"]:not(.learn) .cmore svg{animation:cmDown 2.2s ease-in-out 1.2s 3}
.cs-more{position:relative;padding:20px 18px 26px;display:flex;flex-direction:column;gap:14px;background:var(--raise);border-top:1px solid var(--hair)}
.cs-h{color:var(--lens);font-size:12px;letter-spacing:.1em}
.bk-score{margin:0;font-size:14px;color:var(--muted)}
.bk-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.bk-stats span{font-size:12px}
.card .stamp{z-index:6}
.card[data-pos="1"] .cs{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cs-hero .cimg{transform:none;opacity:1}.cmore svg{animation:none}}

/* ===== polish 22 Oct: home, walls, the style question, watch sheet, the receipt ===== */
.choicecard.tile.solo.primary{background:var(--lens);color:var(--on-lens);box-shadow:0 18px 40px -18px rgba(214,255,92,.7)}
.choicecard.tile.solo.primary small{color:rgba(11,11,16,.7)}
.home-q{text-wrap:balance}
.laststrip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin-top:14px;padding:10px 16px;border-radius:18px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);text-align:left;color:var(--ink)}
.laststrip small{display:block;font-size:12px;color:var(--muted)}
.laststrip b{display:block;font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.laststrip span{min-width:0}
.laststrip em{font-style:normal;font-weight:650;font-size:14px;color:var(--lens);flex:none}
.g9{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.g9t small{font-size:14px;padding:30px 10px 9px}
.brange.style{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;row-gap:14px;margin-top:22px}
.brange.style .rtile{grid-column:span 2}
.brange.style .rtile:nth-child(4){grid-column:2 / 4}
.brange.style .rtile:nth-child(5){grid-column:4 / 6}
.brange.style .rtile small{font-size:12.5px;min-height:30px}
.ds-yn{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.ds-yn .ds-yes{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:64px}
.ds-yn .ds-yes small{font-size:12.5px;font-weight:500;opacity:.75}
.ds .opt{min-height:60px}
.ds-arrow{margin-left:auto;font-size:22px;color:var(--muted);flex:none}
.ds-sec{font-size:12px}
.ds-more{display:block;width:100%;min-height:48px;margin-top:10px;text-align:center}
.done-q{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.01em;text-align:center;text-wrap:balance;margin:8px 0 0}
.done-sub{margin:6px 0 0;text-align:center;color:var(--muted);font-size:15px}
.receipt{list-style:none;margin:20px 0 0;padding:16px 18px;display:grid;gap:12px;width:100%;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair)}
.receipt li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.receipt svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--lens)}
.done-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.done-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin:4px 0 0}
.done-links .linkbtn{min-height:44px;font-size:14px;color:var(--muted)}

/* ===== polish 22 Oct: progress, bridge, mood, pad ===== */
#moodBar{margin-bottom:10px}
.mood-surprise{margin-top:12px;width:100%;min-height:52px}
.btn.waiting{opacity:.55}
.bridge{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(11,11,16,.9);opacity:0;transition:opacity .28s ease;pointer-events:none}
.bridge.on{opacity:1}
.bridge .br-face{width:96px;height:96px}
.bridge .br-face svg{width:100%;height:100%}
.bridge p{margin:0;font-family:var(--f-display);font-weight:700;font-size:20px;text-align:center;padding:0 24px;text-wrap:balance}
.mp{display:flex;flex-direction:column;flex:1;min-height:0}
.mp-pad{flex:none;width:min(100%,52vh);aspect-ratio:1/1;min-height:0;margin:auto auto 0}
.mp-word{min-height:30px}
.mp-word:empty{visibility:hidden}
.mp-ax{font-size:12px;letter-spacing:.06em}
.mp-c{font-size:15px}

/* languages: both answers look the same until one is tapped (lime would read as "the right answer") */
.pk.pk-subs .pk-tile[data-k="0"]{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.pk.pk-subs .pk-tile[data-k="0"] small{color:var(--muted);opacity:1}
.pk.pk-subs .pk-tile[data-k="0"] .pk-ic{background:rgba(214,255,92,.12)}
.pk.pk-subs .pk-tile.sel{background:var(--lens);color:var(--on-lens)}
.pk.pk-subs .pk-tile.sel small{color:var(--on-lens);opacity:.75}

/* ===== polish 22 Oct: the skip question, on the card that is leaving ===== */
.whynot{overflow:visible;padding:14px 14px 16px 112px;min-height:150px;justify-content:center}
.wn-peek{position:absolute;left:-14px;top:-34px;width:108px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;transform:rotate(-9deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.8),0 0 0 2px rgba(255,138,138,.9);animation:wnPeek .32s cubic-bezier(.2,.8,.2,1)}
.wn-peek img,.wn-peek span,.wn-peek svg{width:100%;height:100%;object-fit:cover;display:block}
@keyframes wnPeek{from{transform:translateX(-70px) rotate(-18deg);opacity:0}to{transform:rotate(-9deg);opacity:1}}
.wn-hd{display:block}
.wn-q{font-size:15.5px}
.wn-hd small{font-size:13px}
.wn-row{gap:8px}
.wn-b{height:auto;min-height:44px;padding:8px 14px;font-size:14px;line-height:1.2}
.wn-b.main{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
.wn-time{height:3px;border-radius:0 0 16px 16px}
.deck.asking .card[data-pos="0"] .card-in{filter:brightness(.55)}
@media (prefers-reduced-motion:reduce){.wn-peek{animation:none}}

/* ===== polish 22 Oct: 44 px targets, 12 px minimum text, reduced motion, small phones ===== */
#introSkip,.codebtn,.howbtn,#cHow{min-height:44px;min-width:44px}
.deck-undo{width:44px;height:44px}
.ask .x{width:44px;height:44px;top:2px;right:2px}
.pill{min-height:36px;padding-block:8px}
.act{font-size:13px}
.cbadge,.mgs span{font-size:12px}
.rtile small{font-size:12px}
.bk-stats span{font-size:12px}
@media (prefers-reduced-motion:reduce){.hw-row,.how-row,.mq{animation:none!important}}
@media (max-height:700px){
  [data-screen="home"] .lensring{width:min(104px,30vw);margin:6px auto 8px}
  .home-q{font-size:26px}
  .cover .ctitle{font-size:22px}
  .creason{-webkit-line-clamp:1}
}

.receipt li{text-align:left}
#rangeNone{width:100%}
.whynot{padding:14px 14px 16px;min-height:0}
.wn-hd{margin-left:96px;min-height:72px;display:flex;flex-direction:column;justify-content:center}
.wn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wn-row.moods{grid-template-columns:1fr 1fr}
.wn-peek{width:92px;top:-40px;left:-6px}
.deck-head .q{font-size:12px}

/* Lab: library audit */
.audit-shelves{display:grid;gap:8px;margin-top:12px}
.audit-shelf{border-radius:12px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);padding:10px 12px}
.audit-shelf summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:13.5px;min-height:28px;align-items:center}
.audit-shelf summary span{color:var(--muted);font-size:12.5px;text-align:right}
.audit-shelf ol{margin:6px 0 4px;padding-left:20px;display:grid;gap:3px;font-size:13px}
.audit-shelf ol small{color:var(--muted)}