/* Ask Magic Mic (tools/build_picker.py). Nocturne tokens from docs/DESIGN-
   SYSTEM.md that the shared sheet doesn't carry; --dim is the mockup's
   --faint (the shared sheet's --faint is a lighter, different token). The
   site's gels are --gel-a pink, --gel-b amber and --accent blurple. */
:root{--card:#120f1e; --deep:#07050d; --line:#2e2644; --chip-line:#332c47; --control-line:#3a3152;
  --dash:#4a3f66; --soft:#d7d1ea; --secondary:#b3abcc; --kicker:#a49dbb;
  --tertiary:#8f88a8; --dim:#807998; --tube-b:#b5abfc; --pink-fill:#ffe3f1; --pink-label:#ffd0e7;
  --amber-fill:#fff1dc; --amber-label:#ffe7c7; --blurple-fill:#f3efff;
  --amber-text:#e8c193; --sign-off:#4a4262; --mic-bubble:rgba(28,14,34,.92);
  --hunt-a:#2a1838; --hunt-b:#1b1230;
  --neon-pk:0 0 3px #fff,0 0 10px #e0559b,0 0 24px #e0559b,0 0 50px rgba(224,85,155,.5);
  --neon-ak:0 0 3px #fff,0 0 10px #e8a24a,0 0 24px #e8a24a,0 0 50px rgba(232,162,74,.45);
  --snap:cubic-bezier(.25,.8,.3,1); --stage-h:clamp(540px, calc(100svh - 150px), 620px)}
[hidden]{display:none!important}
.col{width:min(100% - 36px, 600px); margin-inline:auto}
.ico{width:1em; height:1em; display:inline-block; vertical-align:-.12em; fill:currentColor; flex:none}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.needs-js{display:none}
.js .needs-js{display:block}
.js .nojs-only{display:none}

/* ---- the hub's hero (build_sing_pages.build_hub) ---- */
.phero{border-bottom:0}
.phero .wrap.col{padding:16px 0 30px}
.phero .crumb{margin:0 0 12px}
.phero .beam.b1{left:-14%; top:10%; width:70%; height:80%;
  background:radial-gradient(closest-side,rgba(145,132,217,.13),transparent)}
.phero .beam.b2{right:-10%; top:30%; width:60%; height:70%;
  background:radial-gradient(closest-side,rgba(232,162,74,.08),transparent)}
.phero h1{line-height:1}
.phero h1 .k{display:block; font-family:var(--body); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; font-weight:500; color:var(--accent-400);
  text-shadow:0 0 8px rgba(145,132,217,.6); margin:0 0 10px; line-height:1.5}
.phero h1 .big{display:block; font-size:clamp(38px,7vw,64px); line-height:1.05;
  color:var(--pink-fill); text-shadow:var(--neon-pk)}
.phero .dek{color:#e9e5ff; font-size:clamp(15.5px,2vw,18px); line-height:1.5;
  margin:12px 0 0; max-width:40ch}

/* ==== Ask Magic Mic ======================================================
   The app's Magic Mic sheet: one screen at a time on a phone (a fixed-height
   device with a scrolling body and a pinned footer), side by side when the
   container is 900px or wider. Laid out by the width it is given (a container
   query), so the picker page's stage and the hub's column each get the right
   one. Only transforms and opacity animate. */
.sw{container-type:inline-size; font-size:15px; line-height:1.5; touch-action:manipulation}
.sw *{box-sizing:border-box}
.sw button{font:inherit; color:inherit}
.stage{width:min(100% - 24px,1180px); margin:0 auto; position:relative; z-index:2}
.sw .sw-head{display:flex; align-items:center; gap:10px; padding:12px 6px 10px}
.sw .sw-head .mic{width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--tube-p); color:var(--pink-fill);
  background:radial-gradient(circle at 50% 40%,rgba(224,85,155,.5),rgba(20,14,34,.95)); box-shadow:0 0 14px rgba(224,85,155,.5)}
.sw .sw-head .mic .ico{width:17px; height:17px}
.sw .sw-head .ht{flex:1; min-width:0; margin:0; line-height:1; font-size:inherit; text-shadow:none}
.sw .sw-head .ht .k{display:block; font:500 10.5px/1.4 var(--body); letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-400); text-shadow:0 0 8px rgba(145,132,217,.6); margin-bottom:3px}
.sw .sw-head .ht .big{display:block; font:400 clamp(20px,5vw,26px)/1.08 var(--display); color:var(--pink-fill); text-shadow:var(--neon-pk)}

/* neon tubes: colour is role. Pink is the screen's one go-moment */
.sw .tube{display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; min-height:52px; padding:0 20px;
  border-radius:999px; border:2px solid var(--edge); background:rgba(var(--gl),.12); color:var(--fill); font:400 19px var(--display);
  text-shadow:0 0 6px rgba(var(--gl),.7); box-shadow:0 0 12px rgba(var(--gl),.55),0 0 28px rgba(var(--gl),.28);
  cursor:pointer; text-decoration:none; width:100%; transition:transform .12s, box-shadow .12s}
.sw .tube.pink{--edge:var(--tube-p); --gl:224,85,155; --fill:var(--pink-fill)}
/* a working action beside the go-moment: the app link on the "Looking for the one?" card */
.sw .tube.blurple{--edge:var(--tube-b); --gl:145,132,217; --fill:var(--blurple-fill)}
.sw .tube.neutral{--edge:var(--control-line); --gl:0,0,0; --fill:var(--secondary); border-width:1px; background:none; box-shadow:none;
  text-shadow:none; font:500 14px var(--body); min-height:44px; width:auto; padding:0 14px}
/* sharing is amber (the singer's own spotlight, sharing, topping up): a small
   tube beside Listen and Lyrics, icon over nothing louder than a 13px label */
.sw .tube.amber{--edge:var(--tube-a); --gl:232,162,74; --fill:var(--amber-fill)}
.sw .slrow{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.sw .slrow .sl{margin:0}
.sw .tube.share{width:auto; min-height:44px; padding:0 14px 0 11px; gap:7px; border-width:1.5px; font:500 13px/1 var(--body);
  letter-spacing:.02em; text-shadow:none; box-shadow:0 0 8px rgba(var(--gl),.45),0 0 18px rgba(var(--gl),.2)}
.sw .tube.share .ico{width:21px; height:21px; filter:drop-shadow(0 0 4px rgba(232,162,74,.7))}
.sw .tube.share:hover{background:rgba(var(--gl),.2)}
.sw .sharest{margin:2px 0 0; min-height:0; font:500 12.5px/1.4 var(--body); color:var(--amber-fill)}
.sw .sharest:empty{display:none}
/* a shared link: the pick that was sent, and the way to your own */
.sw .sent{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:10px 0 0;
  padding:10px 12px 10px 14px; border-radius:14px; border:1px solid rgba(232,162,74,.4); background:rgba(232,162,74,.07)}
.sw .sent[hidden]{display:none}
.sw .sent p{display:flex; align-items:center; gap:8px; margin:0; font:500 14px/1.35 var(--body); color:var(--amber-fill); flex:1 1 200px}
.sw .sent p .ico{width:22px; height:22px; flex:none; color:var(--tube-a)}
.sw .sent .tube.find{width:auto; min-height:44px; padding:0 16px; font:400 17px var(--display)}
.sw .tube:active{transform:scale(.97)}
.sw .tube:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.sw .tube .ico{width:18px; height:18px}

/* the booth: one screen at a time, like the app's sheet */
.sw .booth{position:relative; height:var(--stage-h); border-radius:22px; background:var(--card); border:1.5px solid var(--line);
  overflow:hidden; isolation:isolate; box-shadow:0 30px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.015)}
.sw .cone{position:absolute; left:0; right:0; top:0; height:62%; pointer-events:none; z-index:0;
  background:linear-gradient(to bottom,rgba(224,85,155,.17),rgba(224,85,155,0)); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); filter:blur(14px)}
.sw .screen{position:absolute; inset:0; z-index:1; display:grid; grid-template-rows:auto minmax(0,1fr) auto; transform:translateX(100%);
  opacity:0; visibility:hidden; transition:transform .32s var(--snap), opacity .28s, visibility 0s .32s}
.sw .screen.on{transform:none; opacity:1; visibility:visible; transition-delay:0s}
.sw .screen.left{transform:translateX(-36%)}
.sw .screen.reading, .sw .screen.wait{transform:none; grid-template-rows:minmax(0,1fr) auto}
.sw .screen .top{display:flex; align-items:center; min-height:48px; padding:4px 6px 0}
.sw .screen .body{overflow:auto; -webkit-overflow-scrolling:touch; padding:0 12px 10px; scrollbar-width:thin}
/* On touch, a drag inside a long screen stays in the screen. A wheel or a
   trackpad is left to chain: it scrolls the screen while there is more of it,
   then the page, and the page at once when the screen fits (owner bug, 2026-10-08). */
@media (pointer:coarse){.sw .screen .body{overscroll-behavior:contain}}
.sw .screen .foot{padding:6px 12px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center;
  background:linear-gradient(to bottom,rgba(18,15,30,0),var(--card) 28%)}

/* the sign: a bulb-framed marquee, the app's reveal and reading hero */
.sw .sign{position:relative; margin:6px 2px 0; padding:22px 28px 20px; text-align:center; border-radius:18px; background:var(--card);
  border:2px solid var(--tube-a); box-shadow:0 0 14px rgba(232,162,74,.38),0 0 36px rgba(232,162,74,.16); min-height:142px;
  display:flex; flex-direction:column; justify-content:center}
.sw .bulbs{pointer-events:none; display:flex; justify-content:space-between; gap:0; margin:0; padding:0}
.sw .sign .bulbs{position:absolute}
.sw .sign .bulbs.t, .sw .sign .bulbs.b{left:14px; right:14px; height:6px}
.sw .sign .bulbs.t{top:7px} .sw .sign .bulbs.b{bottom:7px}
.sw .sign .bulbs.l, .sw .sign .bulbs.r{top:22px; bottom:22px; width:6px; flex-direction:column}
.sw .sign .bulbs.l{left:7px} .sw .sign .bulbs.r{right:7px}
.sw .bulb{width:6px; height:6px; border-radius:50%; background:var(--b); box-shadow:0 0 8px var(--g); opacity:.85; flex:none}
.sw .bulb.g0{--b:var(--tube-b); --g:var(--accent)} .sw .bulb.g1{--b:var(--tube-a); --g:var(--gel-b)} .sw .bulb.g2{--b:var(--tube-p); --g:var(--gel-a)}
/* the one ambient loop on the reading: the frame's light travels slowly */
.sw .sign.hero .bulb{animation:breathe 5s ease-in-out infinite; animation-delay:calc(var(--i) * -.11s)}
@keyframes breathe{0%,100%{opacity:.45} 50%{opacity:.95}}
.sw.idle .sign.hero .bulb{animation-play-state:paused}
.sw .billing{margin:0; font:500 10.5px/1.3 var(--body); letter-spacing:.3em; text-transform:uppercase; color:var(--tube-a);
  text-shadow:0 0 6px rgba(232,162,74,.6),0 0 16px rgba(232,162,74,.4)}
.sw .sign .title{font:400 28px/1.1 var(--display); color:var(--pink-fill); text-shadow:var(--neon-pk); margin:9px 0 8px; overflow-wrap:anywhere}
.sw .sign .title:focus{outline:none}
.sw .sign .title.long{font-size:23px} .sw .sign .title.xlong{font-size:19px}
.sw .sign .title .w{white-space:nowrap}
.sw .sign .title .ch{display:inline-block; position:relative; animation:lit .16s ease-out both; animation-delay:calc(var(--d) + var(--lead,0ms))}
.sw .sign .title .ch i{position:absolute; left:50%; top:50%; width:.26em; height:.26em; margin:-.13em 0 0 -.13em; border-radius:50%;
  background:var(--b); box-shadow:0 0 6px var(--g); animation:dotout .18s ease-out both; animation-delay:calc(var(--d) + var(--lead,0ms))}
@keyframes lit{from{opacity:0; transform:scale(.72)} to{opacity:1; transform:none}}
@keyframes dotout{from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(2.2)}}
.sw .sign .art{position:relative; min-height:16px}
.sw .sign .art .an{display:block; color:var(--amber-fill); letter-spacing:.2em; font-size:12px}
.sw .sign .art .sy{display:none; position:absolute; inset:0}
/* the reveal: the frame is dark while the letters flare from their bulbs,
   the artist replaces STARRING YOU, then the frame snaps on with a bloom */
.sw .sign.revealing .bulb{animation:none; opacity:.12; transition:opacity .25s}
.sw .sign.revealing .art .sy{display:block; transition:opacity .3s}
.sw .sign.revealing .art .an{opacity:0; transition:opacity .3s}
.sw .sign.revealing.named .art .sy{opacity:0}
.sw .sign.revealing.named .art .an{opacity:1}
.sw .sign.revealing.bloom .bulb{animation:bloom .4s ease-out both}
@keyframes bloom{0%{opacity:.12} 55%{opacity:1} 100%{opacity:.85}}
.sw .sign.skip .ch, .sw .sign.skip .ch i{animation-duration:0s!important; animation-delay:0s!important}
.sw .sign.skip .bulb{transition:none}
.sw .after{animation:land .3s ease-out both; animation-delay:var(--d,0ms)}
@keyframes land{from{opacity:0} to{opacity:1}}
.sw .rest, .sw .screen.reading .foot{transition:opacity .4s ease-out, transform .4s ease-out}
.sw .screen.reading.revealing .rest, .sw .screen.reading.revealing .foot{opacity:0; transform:translateY(12px)}

/* the Magic Mic says / sing this tonight */
.sw .says{display:flex; align-items:center; gap:10px; margin:12px 2px 0}
.sw .says .mic{width:26px; height:40px; color:var(--tube-p); filter:drop-shadow(0 0 6px rgba(224,85,155,.6)); transform:rotate(-8deg); flex:none; fill:currentColor}
.sw .says .k{display:block; font:500 10px/1.3 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--tube-a); text-shadow:0 0 8px rgba(232,162,74,.5)}
.sw .says .h{display:block; font:400 22px/1.05 var(--display); color:var(--pink-fill); text-shadow:var(--neon-pk)}

/* the reason in a tinted well, with the signal named in a chip */
.sw .well{margin:8px 0 0; padding:9px 12px 10px; border-radius:12px; background:rgba(224,85,155,.08)}
.sw .well .rs{display:flex; gap:8px; margin:0; color:var(--text); font-size:14.5px; line-height:1.45}
.sw .well .rs .ico{width:16px; height:16px; margin-top:3px; color:var(--tube-a); filter:drop-shadow(0 0 4px rgba(232,162,74,.7))}
.sw .well .sg{display:flex; align-items:flex-start; gap:8px; margin:8px 0 0; font-size:13px; line-height:1.4; color:var(--soft)}
/* The reason's signal: a label, so plain text, no capsule (owner, 2026-10-19). */
.sw .chipk{flex:none; display:inline-block; margin-top:1px; padding:2px 0; border:0;
  color:var(--lbl); font:500 10px/1.5 var(--body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.sw .chipk.pk{--gl:255,156,204; --lbl:var(--pink-label)} .sw .chipk.bl{--gl:181,171,252; --lbl:var(--blurple-fill)} .sw .chipk.am{--gl:255,212,154; --lbl:var(--amber-label)}
.sw .chipk.guess{font-style:italic; color:var(--kicker)}

/* "Let's tune it": the fork's amber card, the second action after "Get
   another one", so it is lit as an amber neon tube that holds its own beside
   the bulb-framed sign (owner, 2026-10-08). Light, never a fill: the edge,
   its glow and a faint wash */
.sw .tunecard{display:flex; align-items:center; gap:12px; width:100%; margin:12px 0 0; padding:9px 12px 9px 10px; border-radius:18px;
  text-align:left; cursor:pointer; border:2px solid var(--tube-a);
  background:radial-gradient(120% 140% at 0% 50%,rgba(232,162,74,.12),transparent 60%),var(--card);
  box-shadow:0 0 6px rgba(255,212,154,.5),0 0 18px rgba(232,162,74,.55),0 0 42px rgba(232,162,74,.28),inset 0 0 14px rgba(232,162,74,.16);
  transition:transform .12s}
.sw .tunecard:active{transform:scale(.985)}
.sw .tunecard:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.sw .tunecard .desk{flex:none; width:64px; height:40px; border-radius:10px; background:var(--deep); border:1px solid rgba(255,212,154,.35);
  box-shadow:0 0 10px rgba(232,162,74,.25)}
.sw .tunecard .ask{display:block; font:400 13.5px/1.35 var(--body); color:var(--soft)}
.sw .tunecard .ask .k{font:500 9.5px/1.4 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--amber-text); display:block}
.sw .tunecard .ttl{display:block; margin-top:4px; font:400 18px/1.1 var(--display); color:var(--amber-fill); text-shadow:var(--neon-ak)}

/* why it's yours: every answer, and what it meant for this song */
.sw .why{margin:8px 0 0; border-top:1px solid var(--line)}
.sw .why summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; min-height:44px;
  font:500 13px var(--body); color:var(--blurple-fill)}
.sw .why summary::-webkit-details-marker{display:none}
.sw .why summary:focus-visible{outline:2px solid var(--accent-400); outline-offset:2px; border-radius:8px}
.sw .why summary .ico{width:16px; height:16px; color:var(--accent-400); transition:transform .25s var(--snap)}
.sw .why[open] summary .ico{transform:rotate(180deg)}
.sw .fits{list-style:none; margin:0; padding:0 0 4px}
.sw .fits li{display:grid; grid-template-columns:18px 1fr; gap:8px; padding:4px 0; font-size:13px; line-height:1.4; color:var(--secondary)}
.sw .fits li .ico{width:16px; height:16px; margin-top:2px; color:var(--c,var(--accent-400))}
.sw .fits li b{font-weight:500; color:var(--soft)}
.sw .fits li em{font-style:normal; color:var(--dim); font-size:12px}
.sw .why .app{display:flex; gap:8px; margin:6px 0 8px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.4; color:var(--soft);
  background:linear-gradient(120deg,rgba(224,85,155,.14),rgba(145,132,217,.1)); border:1px solid rgba(224,85,155,.35)}
.sw .why .app .ico{width:18px; height:18px; color:var(--tube-p); margin-top:1px}
.sw .why .app a{color:var(--pink-fill)}

/* the mic's line in a bubble: it answers every change; it glows, never bobs */
.sw .say{display:flex; align-items:center; gap:10px; margin:8px 0 0}
.sw .say .mic{width:22px; height:40px; flex:none; color:var(--tube-p); fill:currentColor; filter:drop-shadow(0 0 6px rgba(224,85,155,.6))}
.sw .bubble{position:relative; flex:1; min-width:0; margin:0; padding:8px 12px; border-radius:14px; background:var(--mic-bubble);
  border:1.5px solid var(--tube-p); box-shadow:0 0 10px rgba(224,85,155,.35); font:400 15px/1.3 var(--display); color:var(--pink-fill);
  text-shadow:0 0 6px rgba(224,85,155,.7)}
.sw .bubble::before{content:""; position:absolute; left:-7px; top:50%; width:11px; height:11px; margin-top:-6px; background:var(--mic-bubble);
  border-left:1.5px solid var(--tube-p); border-bottom:1.5px solid var(--tube-p); transform:rotate(45deg)}
.sw .bubble .ico{width:14px; height:14px; color:var(--tube-a); margin-right:4px; vertical-align:-2px}

/* after four "Get another one"s: a flyer under the sign, never over the song */
.sw .hunt{position:relative; margin:12px 0 0; display:grid; grid-template-columns:40px 1fr 44px; align-items:center; column-gap:10px; row-gap:8px;
  border-radius:14px; padding:8px 4px 10px 10px; background:linear-gradient(160deg,var(--hunt-a),var(--hunt-b) 60%);
  border:1px solid rgba(255,156,204,.55); box-shadow:0 0 14px rgba(224,85,155,.25); animation:land .3s ease-out both}
.sw .hunt .appicon{width:40px; height:40px; border-radius:10px; box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.sw .hunt p{margin:0; font-size:12.5px; line-height:1.35; color:var(--soft)}
.sw .hunt p b{font-weight:500; color:var(--pink-fill)}
.sw .hunt .x{width:44px; height:44px; border:0; background:none; color:var(--secondary); cursor:pointer; display:grid; place-items:center}
.sw .hunt .x .ico{width:16px; height:16px}
.sw .hunt .x:focus-visible{outline:2px solid var(--accent-400); outline-offset:-4px; border-radius:12px}
.sw .hunt .go-row{grid-column:2/4; display:flex; align-items:center; gap:10px; padding-right:6px; flex-wrap:wrap}
.sw .hunt .tube.go{min-height:44px; padding:0 16px; font:500 14.5px var(--body); width:auto; border-width:1.5px}
.sw .hunt .stores{display:none; margin:0; gap:8px; --badge:40px}

/* the steps: back, step pills, the marquee strip, the title, the mic's
   bubble, a wall of signs, and a pinned footer */
.sw .back{width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:var(--kicker); cursor:pointer; border-radius:12px}
.sw .back .ico{width:18px; height:18px}
.sw .back:focus-visible{outline:2px solid var(--accent-400)}
.sw .dots{flex:1; display:flex; justify-content:center; gap:6px}
/* a genre page's fixed shelf: a plain label, not a control */
.sw .lockg{display:flex; align-items:center; gap:8px; margin:4px 0 10px; font-size:13px; color:var(--secondary)}
.sw .lockg .ico{width:20px; height:20px; color:var(--pink-fill); filter:drop-shadow(0 0 5px rgba(224,85,155,.7))}
.sw .lockg b{font-weight:500; color:var(--pink-fill)}
.sw .dots i{width:28px; height:6px; border-radius:3px; background:var(--line)}
.sw .dots i.on{background:var(--tube-p); box-shadow:0 0 10px var(--gel-a)}
.sw .spacer{width:44px}
.sw .strip{margin:2px 2px 0; padding:7px 10px 8px; border-radius:12px; background:var(--card); border:1.5px solid rgba(255,212,154,.6);
  box-shadow:0 0 12px rgba(232,162,74,.3); text-align:center}
.sw .strip .bulbs{margin:0 4px 6px}
.sw .strip .bulb{width:4px; height:4px; box-shadow:0 0 5px var(--g)}
.sw .strip .tx{font:400 12.5px/1.35 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--amber-fill);
  text-shadow:0 0 6px rgba(232,162,74,.7),0 0 16px rgba(232,162,74,.5)}
.sw .strip .tx.one{white-space:nowrap; letter-spacing:.06em}
.sw .st{font:400 27px/1.1 var(--display); color:var(--pink-fill); text-shadow:var(--neon-pk); text-align:center; margin:14px 0 10px; letter-spacing:0}
.sw .st:focus{outline:none}
.sw .step .say{margin:0 0 12px}
.sw .row{border:0; margin:12px 0 0; padding:0; min-width:0}
.sw .row legend{display:flex; align-items:center; gap:6px; padding:0; margin:0 0 6px 2px; font:500 10.5px/1.3 var(--body); letter-spacing:.18em;
  text-transform:uppercase; color:var(--lg)}
.sw .row legend.sr{position:absolute; margin:-1px; padding:0}
.sw .row legend::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--edge); box-shadow:0 0 6px rgb(var(--gl))}
.sw .row legend.sr::before{content:none}
.sw .row legend .mg{display:none; margin-left:auto; letter-spacing:0; text-transform:none; font:400 11px var(--body); color:var(--dim)}
.sw .row.guess legend .mg{display:inline}
.sw .pk{--edge:var(--tube-p); --fill:var(--pink-fill); --gl:224,85,155; --lg:#ffb3d6}
.sw .bl{--edge:var(--tube-b); --fill:var(--blurple-fill); --gl:145,132,217; --lg:#cfc8ff}
.sw .am{--edge:var(--tube-a); --fill:var(--amber-fill); --gl:232,162,74; --lg:var(--tube-a)}
.sw .wall{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.sw .wall.three{grid-template-columns:repeat(3,1fr)}
.sw .tile{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:84px;
  padding:8px 3px 7px; border-radius:12px; background:var(--surface); border:1px solid var(--chip-line); cursor:pointer; text-align:center;
  transition:transform .12s}
.sw .tile:active{transform:scale(.96)}
.sw .tile input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2}
.sw .tile .ico{width:26px; height:26px; color:var(--sign-off)}
.sw #sc-3 .tile{min-height:70px; gap:4px} .sw #sc-3 .tile .ico{width:22px; height:22px}
.sw .tile .tx{font:400 12px/1.1 var(--display); color:var(--tertiary)}
.sw .tile .bl5{height:3px; width:27px; opacity:0; background:radial-gradient(circle,var(--edge) 1.1px,transparent 1.6px) 0 0/6px 3px repeat-x;
  filter:drop-shadow(0 0 3px rgb(var(--gl)))}
.sw .tile:has(input:checked){border:1.5px solid var(--edge); background:radial-gradient(circle at 35% 30%,rgba(var(--gl),.26),rgba(20,14,34,.96) 72%);
  box-shadow:0 0 12px rgba(var(--gl),.45)}
.sw .tile:has(input:checked) .ico{color:var(--fill); filter:drop-shadow(0 0 6px rgb(var(--gl)))}
.sw .tile:has(input:checked) .tx{color:var(--fill); text-shadow:0 0 6px rgba(var(--gl),.8)}
.sw .tile:has(input:checked) .bl5{opacity:1}
/* the Magic Mic's guess: set, but dashed and half-lit until the row is yours */
.sw .row.guess .tile:has(input:checked){border-style:dashed; box-shadow:0 0 8px rgba(var(--gl),.25)}
.sw .row.guess .tile:has(input:checked) .tx, .sw .row.guess .tile:has(input:checked) .ico{opacity:.8}
.sw .tile:has(input:focus-visible){outline:2px solid var(--accent-400); outline-offset:2px}
/* the occasion: small neon signs that wrap (step 3 scrolls on a phone) */
.sw .chips{display:flex; flex-wrap:wrap; gap:8px 6px}
.sw .chip{position:relative; display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 10px; border-radius:8px;
  border:1px solid var(--chip-line); background:var(--card); cursor:pointer; font:400 12px var(--display); color:var(--soft); white-space:nowrap}
.sw .chip input{position:absolute; inset:-4px -3px; opacity:0; margin:0; cursor:pointer}
.sw .chip .ico{width:16px; height:16px; color:var(--kicker)}
.sw .chip .soon{width:5px; height:5px; border-radius:50%; background:var(--tube-a); box-shadow:0 0 5px var(--gel-b); margin-left:1px}
.sw .chip:has(input:checked){border:1.5px solid var(--edge); color:var(--fill); text-shadow:0 0 6px rgba(var(--gl),.8);
  background:radial-gradient(circle at 30% 30%,rgba(var(--gl),.3),rgba(20,14,34,.95) 70%); box-shadow:0 0 12px rgba(var(--gl),.5)}
.sw .chip:has(input:checked) .ico{color:var(--fill); filter:drop-shadow(0 0 4px rgb(var(--gl)))}
.sw .chip:has(input:focus-visible){outline:2px solid var(--accent-400); outline-offset:2px}
.sw .chip.none:has(input:checked){border:1px solid var(--dash); color:var(--soft); text-shadow:none; background:var(--surface); box-shadow:none}
.sw .chip.none:has(input:checked) .ico{color:var(--secondary); filter:none}
/* the ask rides in step 3's footer, above Hit it!, so it stays in view */
.sw .foot.ask3{flex-direction:column; align-items:stretch; gap:6px; padding-top:10px}
.sw .theask{text-align:center}
.sw .theask .k{display:block; font:500 10px/1.4 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--kicker)}
.sw .theask .q{margin:2px 0 0; font-size:14px; line-height:1.35; color:var(--soft)}

/* the wait: TONIGHT ONLY / a wave / STARRING YOU, and lines that are true */
.sw .wait .body{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding-bottom:30px}
.sw .wait .sign{width:100%; max-width:340px; margin:0}
.sw .wave{display:flex; gap:14px; justify-content:center; padding:14px 0 12px}
.sw .wave i{width:12px; height:12px; border-radius:50%; background:var(--b); box-shadow:0 0 9px var(--g); animation:wave 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .18s)}
.sw .wave i.g0{--b:var(--tube-b); --g:var(--accent)} .sw .wave i.g1{--b:var(--tube-a); --g:var(--gel-b)} .sw .wave i.g2{--b:var(--tube-p); --g:var(--gel-a)}
@keyframes wave{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1) translateY(-4px)}}
.sw .wait .say{margin:0; align-self:flex-start; padding-left:8px}
.sw .wait .bubble{flex:none; padding:12px 16px}
.sw .wait .bubble i{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--pink-fill); margin-right:7px; vertical-align:middle}
.sw .wait .bubble i:nth-child(2){opacity:.7; transform:translateY(2px)} .sw .wait .bubble i:nth-child(3){opacity:.4; transform:translateY(4px); margin:0}
.sw .hold{font:400 28px/1.1 var(--display); color:var(--pink-fill); text-shadow:var(--neon-pk); margin:0}
.sw .askq{margin:0; font-size:14px; line-height:1.4; color:var(--soft); max-width:36ch}
.sw .statusl{margin:0; min-height:22px; font-size:15px; color:var(--tube-a); transition:opacity .35s}
.sw .statusl.off{opacity:0}
.sw .desk{display:block}
.sw .tunehead{display:none}

/* scripts off: the house pick, its reasons open, the book below */
html:not(.js) .sw .needs-js{display:none!important}
.js .sw .nojs-only{display:none!important}
html:not(.js) .sw .booth{height:auto}
html:not(.js) .sw .screen{position:static; transform:none; opacity:1; visibility:visible; display:none}
html:not(.js) .sw .screen.reading{display:block}
html:not(.js) .sw .screen .body{overflow:visible; padding-bottom:14px}
html:not(.js) .sw .sign.hero .bulb{animation:none}

/* wide: the reading on the left, the three steps stacked on the right under
   "Let's tune it". Kept about a fifth shorter than the mockup (owner,
   2026-10-08): a shorter sign, smaller step headers, every wall of signs on
   one shared row height, and tighter spacing; every control and every 44px
   target stays */
@container (min-width:900px){
  .sw .sw-head{padding:14px 6px 10px} .sw .sw-head .mic{width:46px; height:46px} .sw .sw-head .mic .ico{width:24px; height:24px}
  .sw .sw-head .ht .big{font-size:40px} .sw .sw-head .ht .k{font-size:12px; margin-bottom:5px}
  .sw .booth{height:auto; display:grid; grid-template-columns:minmax(400px,440px) 1fr; column-gap:28px; padding:12px 20px 16px; overflow:visible}
  .sw .cone{height:70%}
  .sw .screen{position:static; transform:none!important; opacity:1; visibility:visible; transition:none; display:block}
  .sw .screen.reading, .sw .screen.wait{grid-column:1; grid-row:1 / span 4}
  .sw .screen.wait{display:none}
  .sw .screen.wait.on{display:flex; flex-direction:column}
  .sw .screen.wait.on .body{flex:1; gap:12px; padding:0 0 10px}
  .sw .screen.reading.off{display:none}
  .sw .screen.step{grid-column:2; display:block}
  .sw .screen .body{overflow:visible; padding:0}
  .sw .screen .top, .sw .screen.step .foot.go, .sw .screen.step .strip, .sw .screen.step .say, .sw .tunecard, .sw .why summary{display:none}
  .sw .screen.step .st{text-align:left; font-size:19px; margin:8px 0 4px; padding-left:30px; position:relative}
  .sw .screen.step .st::before{content:attr(data-n); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%;
    border:1.5px solid var(--tube-p); font:400 12px/19px var(--display); text-align:center; color:var(--pink-fill); box-shadow:0 0 8px rgba(224,85,155,.5)}
  .sw .tunehead{display:flex; align-items:center; gap:12px; margin:0}
  .sw .tunehead .ttl{margin:0; font:400 24px/1.1 var(--display); color:var(--amber-fill); text-shadow:var(--neon-ak); white-space:nowrap}
  .sw .tunehead .say{flex:1; margin:0}
  .sw .tunehead .bubble{font-size:14px; padding:6px 12px}
  .sw .row{margin-top:6px} .sw .row legend{margin-bottom:4px}
  .sw .wall{gap:6px}
  .sw .tile, .sw #sc-3 .tile{min-height:58px; gap:3px; padding:6px 3px 5px}
  .sw .tile .ico, .sw #sc-3 .tile .ico{width:22px; height:22px}
  .sw .tile .tx{font-size:11.5px}
  .sw .chips{gap:6px}
  .sw .chip{min-height:44px}
  .sw .screen.step .foot{padding:8px 0 0; background:none}
  .sw .foot.ask3{flex-direction:row; align-items:center; gap:16px; padding-top:10px}
  .sw .foot.ask3 .theask{flex:1; text-align:left}
  .sw .foot.ask3 .tube{width:auto; min-width:200px}
  .sw .screen.reading .foot{padding:10px 0 0; background:none}
  .sw .sign{padding:18px 26px 16px; min-height:128px; margin-top:4px}
  .sw .sign .title{font-size:32px; margin:6px 0 6px} .sw .sign .title.long{font-size:27px} .sw .sign .title.xlong{font-size:22px}
  .sw .says{margin-top:8px} .sw .says .mic{height:34px} .sw .says .h{font-size:20px}
  .sw .well{margin-top:6px; padding:8px 12px}
  .sw .well .sg{margin-top:6px}
  .sw .why{margin-top:6px; border-top:0}
  .sw .fits li{padding:2px 0}
  .sw .why .app{margin:4px 0 4px; padding:8px 12px}
  .sw .say{margin-top:6px}
  .sw .wait .sign{max-width:none; min-height:0}
  .sw .hunt .stores{display:flex}
  .sw .screen.left{transform:none}
}

/* reduced motion: nothing loops; the sign just changes */
@media (prefers-reduced-motion:reduce){
  .sw .sign.hero .bulb, .sw .wave i, .sw .sign.revealing.bloom .bulb{animation:none; opacity:.85}
  .sw .sign .title .ch, .sw .sign .title .ch i, .sw .after, .sw .hunt{animation:none} .sw .sign .title .ch i{opacity:0}
  .sw .screen, .sw .tile, .sw .tube, .sw .tunecard, .sw .why summary .ico, .sw .statusl, .sw .rest, .sw .screen.reading .foot,
  .sw .sign.revealing .art .sy, .sw .sign.revealing .art .an{transition:none!important}
}

/* ---- below the stage: the calm page ---- */
.picker{font-size:15px; line-height:1.5; position:relative; z-index:2}
.picker .lede{color:var(--secondary); font-size:14.5px; margin:0 0 6px; line-height:1.5}
.picker>.dek{color:#e9e5ff; font-size:clamp(15.5px,2vw,18px); line-height:1.5; margin:34px 0 0; max-width:44ch}
.advice{margin:30px 0 0}
.advice h2, .bookwrap h2.big, .picker .faq h2{font-size:30px; line-height:1.1; margin:0 0 10px; color:var(--pink-fill); text-shadow:var(--neon-pk)}
.advice p{color:var(--soft); font-size:15.5px; line-height:1.55; margin:0 0 12px}
.advice p b{font-weight:500; color:var(--text)}
.picker .picks{list-style:none; margin:0; padding:0}
.picker .pick{display:block; padding:13px 0 14px; border-top:1px solid var(--line); border-bottom:0}
.picker .pick h3, .picker .pick h4{font:500 16.5px/1.3 var(--body); margin:0; color:var(--text)}
.picker .where{display:block; font-family:var(--body); font-size:12.5px; letter-spacing:.05em; color:var(--kicker); margin-top:3px}
.picker .pick .line{color:var(--soft); font-size:14.5px; line-height:1.5; margin:7px 0 0}

/* hand-off, as the site's call to action, framed by still bulbs */
.picker .cta{margin:34px -18px 0; padding:46px 30px 40px; text-align:center;
  border:0; border-radius:0; background:none; box-shadow:none}
.picker .cta .quote{margin:0 auto 10px; font-size:14.5px; color:var(--secondary); font-style:italic; max-width:30ch}
.picker .cta h2{font-size:30px; line-height:1.1; margin:0 0 12px; color:var(--pink-fill); text-shadow:var(--neon-pk)}
.picker .cta p{color:var(--secondary); font-size:15px; margin:0 auto; max-width:34ch}
.picker .cta .stores{margin-top:22px; --badge:44px}
.picker .cta .fine{font-size:11.5px; color:var(--dim); margin-top:14px}
#app{scroll-margin-top:84px}

/* the Magic Mic's book: every visitor's to browse, and the page with scripts off */
.bookwrap{margin:44px 0 0}
.shelf{border-top:1px solid var(--line)}
.shelf:last-of-type{border-bottom:1px solid var(--line)}
.shelf summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; min-height:52px; gap:12px}
.shelf summary::-webkit-details-marker{display:none}
.shelf summary h3{font-size:22px; color:var(--pink-fill); text-shadow:var(--neon-pk); font-weight:400}
.shelf .tw::after{content:"+"; font-size:24px; color:var(--accent-400); line-height:1}
.shelf[open] .tw::after{content:"\2212"}
.shelf .picks{padding-bottom:8px}
.shelf .more{margin:0 0 14px}
.shelf .more a{display:inline-block; padding:10px 0; color:var(--accent-400); font-size:14.5px}

.picker .faq{padding:44px 0 0}
.picker .faq summary{font-size:16px}
.picker .faq details p{font-size:15.5px}
.picker .faq a{color:var(--accent-400)}
.picker + .guides{padding-top:44px}
/* Listen and Lyrics (song_links.py): under the reason, quiet beside the tubes */
.sw .rest .sl{margin:4px 0 0}
.sw .booth.tinted .sl{--sl:var(--t); --slc:var(--tl)}
.picker .pick .sl{margin-top:2px}

.occart svg, .sw .mo svg{display:block; width:100%; height:100%; overflow:visible; fill:var(--body-fill,#1b1530); stroke:var(--tl);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(var(--t),.9)) drop-shadow(0 0 8px rgba(var(--t),.45))}
.occart svg *, .sw .mo svg *{transform-box:fill-box}
.occart svg g[transform], .sw .mo svg g[transform]{transform-box:view-box}
.occart svg .eye, .sw .mo svg .eye{fill:var(--tl); stroke:none}
.occart svg .no, .sw .mo svg .no{fill:none}
.occart svg .wash, .sw .mo svg .wash{fill:rgba(var(--t),.28)}
.occart svg .bare, .sw .mo svg .bare{stroke:none}
.occart svg .hub, .sw .mo svg .hub{stroke:none; fill:var(--body-fill,#1b1530)}
.occart svg .fac, .sw .mo svg .fac{stroke-width:1.2; opacity:.75}
.occart svg .glint, .sw .mo svg .glint{fill:#fff}
.occart svg .tip, .sw .mo svg .tip{fill:var(--tube-a)}
.occart svg .thick, .sw .mo svg .thick{stroke-width:3}
.occart svg .s0, .sw .mo svg .s0{stroke:var(--tube-b)} .occart svg .s1, .sw .mo svg .s1{stroke:var(--tube-a)}
.occart svg .s2, .sw .mo svg .s2{stroke:var(--tube-p)}
.occart.flk svg{stroke:#f3eefe} .occart.flk svg .eye{fill:#f3eefe}

/* ---- tonight's occasion: the booth in that night's light (glow, never a fill) ---- */
.sw{--body-fill:#1b1530}
.sw .booth{transition:border-color .7s, box-shadow .7s}
.sw .cone{transition:opacity .7s}
.sw .cone.tc{background:linear-gradient(to bottom,rgba(var(--t2),.24),rgba(var(--t2),0)); opacity:0}
.sw .sign{transition:border-color .7s, box-shadow .7s}
.sw .well{transition:background-color .7s}
.sw .booth.tinted{border-color:rgba(var(--t2),.62);
  box-shadow:0 0 22px rgba(var(--t2),.22),0 0 2px rgba(var(--t2),.4),0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 26px rgba(var(--t2),.06)}
.sw .booth.tinted .cone.tc{opacity:1} .sw .booth.tinted .cone:not(.tc){opacity:0}
.sw .booth.tinted .sign{border-color:var(--tl); box-shadow:0 0 14px rgba(var(--t),.45),0 0 36px rgba(var(--t),.2)}
.sw .booth.tinted .well{background-color:rgba(var(--t),.09)}
.sw .booth.tinted .chipk.am{--gl:var(--t); --lbl:var(--tl); text-shadow:0 0 8px rgba(var(--t),.45)}
.sw .booth.tinted[data-o="pride"]{border-color:rgba(255,255,255,.05)}
/* each occasion's sign in step 3 lights in its own color */
.sw .chip[data-occ]{--edge:var(--tl); --fill:var(--tl); --gl:var(--t)}

/* the moment's layers: on the sign (.fx), over the reading (.fxb), candles on the sign's top edge */
.sw .fx{position:absolute; inset:0; border-radius:16px; overflow:hidden; pointer-events:none; z-index:3; container-type:size}
.sw .screen.reading{isolation:isolate}
.sw .fxb{position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; container-type:size}
.sw .fx:empty, .sw .fxb:empty, .sw .cdls:empty{display:none}
.sw .fx>*, .sw .fxb>*{position:absolute}
.sw .mo, .sw .mdot, .sw .rice{opacity:0}
.sw .booth.play .mo{opacity:1}
.sw .booth.play .billing{opacity:.22}
.sw .billing{transition:opacity .25s}
.sw .mdot{width:6px; height:6px; border-radius:50%; background:var(--b); box-shadow:0 0 6px var(--g)}
.sw .mdot.g0{--b:var(--tube-b); --g:var(--accent)} .sw .mdot.g1{--b:var(--tube-a); --g:var(--gel-b)} .sw .mdot.g2{--b:var(--tube-p); --g:var(--gel-a)}
/* wide: the reading is a tall column; the moment keeps to the sign's end of it */
@container (min-width:900px){ .sw .screen.reading{position:relative} .sw .fxb{bottom:auto; height:min(100%,460px)} }

.sw .m-bat{left:0; top:10px; width:60px; height:40px}
.sw .play .m-bat{animation:m-bat 1.5s cubic-bezier(.45,.05,.55,.95) both}
@keyframes m-bat{0%{transform:translate(-56px,40px) rotate(10deg)} 30%{transform:translate(26cqw,4px) rotate(-6deg)}
  62%{transform:translate(58cqw,34px) rotate(8deg)} 100%{transform:translate(calc(100cqw + 8px),2px) rotate(-10deg)}}
.sw .m-bat .wl{transform-origin:100% 40%} .sw .m-bat .wr{transform-origin:0% 40%}
.sw .play .m-bat .wl, .sw .play .m-bat .wr{animation:m-flap .15s ease-in-out infinite alternate}
@keyframes m-flap{from{transform:scaleY(1)} to{transform:scaleY(.3)}}

.sw .m-turkey{left:0; bottom:9px; width:62px; height:57px}
.sw .play .m-turkey{animation:m-walk 1.7s linear both}
@keyframes m-walk{from{transform:translateX(-70px)} to{transform:translateX(calc(100cqw + 8px))}}
.sw .m-turkey .bob{transform-origin:50% 100%}
.sw .play .m-turkey .bob{animation:m-waddle .22s ease-in-out infinite alternate}
@keyframes m-waddle{from{transform:rotate(-7deg)} to{transform:rotate(6deg) translateY(-1.5px)}}
.sw .m-turkey .lg{transform-origin:50% 0}
.sw .play .m-turkey .l1{animation:m-step .22s ease-in-out infinite alternate}
.sw .play .m-turkey .l2{animation:m-step .22s ease-in-out infinite alternate-reverse}
@keyframes m-step{from{transform:rotate(-20deg)} to{transform:rotate(20deg)}}

.sw .flk svg{stroke:#f3eefe; filter:drop-shadow(0 0 3px rgba(255,255,255,.8)) drop-shadow(0 0 8px rgba(var(--t2),.6))} .sw .flk svg .eye{fill:#f3eefe}
.sw .flk{top:-30px; left:var(--x); width:var(--sz); height:var(--sz)}
.sw .play .flk{animation:m-snow 1.3s cubic-bezier(.3,.1,.6,.95) both; animation-delay:var(--dl)}
@keyframes m-snow{0%{transform:translate(0,0) rotate(0); opacity:0} 12%{opacity:1} 80%{opacity:1}
  100%{transform:translate(var(--sx),var(--fall)) rotate(150deg); opacity:0}}

.sw .m-bottle{left:50%; bottom:0; width:40px; height:80px; margin-left:-20px}
.sw .play .m-bottle{animation:m-bottle 1.6s both}
@keyframes m-bottle{0%{transform:translateY(100%); animation-timing-function:var(--snap)} 18%,70%{transform:translateY(38%); animation-timing-function:ease-in} 100%{transform:translateY(100%)}}
.sw .m-cork{left:50%; bottom:34px; width:13px; height:15px; margin-left:-6.5px}
.sw .play .m-cork{animation:m-cork 1.6s both}
@keyframes m-cork{0%{transform:translateY(50px); animation-timing-function:var(--snap)} 18%,30%{transform:translateY(0) rotate(0); animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  56%{transform:translate(22px,-130px) rotate(340deg); opacity:1} 57%,100%{transform:translate(22px,-130px); opacity:0}}
.sw .f-nye .mdot{left:50%; bottom:34px; margin-left:-3px}
.sw .play .f-nye .mdot{animation:m-burst 1.6s cubic-bezier(.2,.7,.4,1) both}
@keyframes m-burst{0%,31%{transform:translate(0,0) scale(.3); opacity:0} 34%{opacity:1}
  68%{transform:translate(var(--dx),var(--dy)) scale(1); opacity:1} 100%{transform:translate(var(--dx),calc(var(--dy) + 34px)) scale(.8); opacity:0}}

.sw .m-heart{left:50%; top:61%; width:54px; height:54px; margin-left:-27px}
.sw .play .m-heart{animation:m-heart 1.5s ease-in-out both}
@keyframes m-heart{0%{transform:translateY(40px) scale(.5); opacity:0} 14%{opacity:1} 30%{transform:translate(-10px,-40px) scale(.9) rotate(-6deg)}
  55%{transform:translate(10px,-130px) scale(1) rotate(6deg)} 80%{transform:translate(-6px,-210px) scale(1.05) rotate(-3deg); opacity:1}
  100%{transform:translate(0,-262px) scale(1.1); opacity:0}}

.sw .m-clover{left:0; bottom:10px; width:48px; height:48px}
.sw .play .m-clover{animation:m-across 1.5s linear both}
@keyframes m-across{from{transform:translateX(-46px)} to{transform:translateX(calc(100cqw + 6px))}}
.sw .m-clover .hop{width:100%; height:100%}
.sw .play .m-clover .hop{animation:m-hop .5s ease-in-out 3}
.sw .play .m-clover svg{animation:m-spin .75s linear 2}
@keyframes m-hop{0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)}}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* Pride: a rainbow runs once along the booth's edge, then rests as a soft ring */
.sw .mring{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; overflow:visible; opacity:0}
.sw .booth.tinted .mring{opacity:1}
.sw .mring rect{fill:none; stroke-linecap:round}
.sw .mring .tr{stroke-width:3.5; stroke-dasharray:7 93; stroke-dashoffset:calc(var(--o) * 1px); opacity:0; filter:drop-shadow(0 0 4px currentColor)}
.sw .mring .rs{stroke-width:1.6; stroke-dasharray:16.667 83.333; stroke-dashoffset:calc(var(--r) * 1px); opacity:.9; transition:opacity .6s .1s;
  filter:drop-shadow(0 0 3px currentColor)}
.sw .booth.play .mring .tr{animation:m-rainbow 1.6s cubic-bezier(.45,.1,.55,.9) both}
@keyframes m-rainbow{0%{stroke-dashoffset:calc(var(--o) * 1px); opacity:0} 6%{opacity:1} 88%{opacity:1}
  100%{stroke-dashoffset:calc((var(--o) - 100) * 1px); opacity:0}}
.sw .booth.play .mring .rs{opacity:0; transition:none}

/* Birthday: candles light one by one along the sign's top, and stay lit */
.sw .cdls{position:relative; height:22px; margin:6px 16px -7px; z-index:3; pointer-events:none}
.sw .cdl{position:absolute; bottom:-1px; width:10px; height:22px; margin-left:-5px; left:var(--x)}
.sw .cdl svg{width:100%; height:100%; overflow:visible; stroke-linecap:round; stroke-linejoin:round}
.sw .cdl .stick{fill:var(--body-fill); stroke:var(--b); stroke-width:1.6; filter:drop-shadow(0 0 3px var(--g))}
.sw .cdl.g0{--b:var(--tube-b); --g:var(--accent)} .sw .cdl.g1{--b:var(--tube-a); --g:var(--gel-b)} .sw .cdl.g2{--b:var(--tube-p); --g:var(--gel-a)}
.sw .cdl .fl{fill:#ffe1a6; transform-origin:50% 100%; filter:drop-shadow(0 0 3px #ffb35a) drop-shadow(0 0 7px #ff9a3c)}
.sw .booth.unlit .cdl .fl{transform:scale(0); opacity:0}
.sw .booth.play .cdl .fl{animation:m-flame .5s ease-out both; animation-delay:var(--dl)}
@keyframes m-flame{0%{transform:scale(0); opacity:0} 45%{transform:scale(1.3,1.4); opacity:1} 65%{transform:scale(.85,.9)}
  82%{transform:scale(1.1,1.08)} 100%{transform:scale(1); opacity:1}}

.sw .rice{left:var(--ox); top:60%; width:3px; height:8px; border-radius:2px; background:#fffaf0; box-shadow:0 0 5px rgba(var(--t),.9)}
.sw .play .rice{animation:m-rice 1.3s cubic-bezier(.25,.6,.5,1) both; animation-delay:var(--dl)}
@keyframes m-rice{0%{transform:translate(0,0) rotate(0); opacity:0} 8%{opacity:1}
  45%{transform:translate(calc(var(--dx) * .7),var(--dy)) rotate(200deg); animation-timing-function:ease-in; opacity:1}
  100%{transform:translate(var(--dx),calc(var(--dy) + 190px)) rotate(420deg); opacity:0}}

.sw .m-disco{left:50%; top:0; width:44px; height:58px; margin-left:-22px}
.sw .play .m-disco{animation:m-drop 1.8s both}
@keyframes m-drop{0%{transform:translateY(-72px); animation-timing-function:cubic-bezier(.3,.6,.4,1)} 26%{transform:translateY(5px)} 34%{transform:translateY(-3px)}
  42%,76%{transform:translateY(0); animation-timing-function:ease-in} 100%{transform:translateY(-74px)}}
.sw .play .m-disco .mer{animation:m-merid .45s linear infinite}
@keyframes m-merid{to{transform:translateX(-6px)}}
.sw .f-disco .mdot{left:50%; top:50%}
.sw .play .f-disco .mdot{animation:m-glint 1.8s ease-out both; animation-delay:var(--dl)}
@keyframes m-glint{0%,30%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.2)} 45%{opacity:1; transform:translate(var(--dx),var(--dy)) scale(1.1)}
  70%,100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.4)}}

.sw .m-cloud{left:0; top:8px; width:76px; height:55px}
.sw .play .m-cloud{animation:m-drift 1.8s cubic-bezier(.45,.05,.55,.95) both}
@keyframes m-drift{from{transform:translateX(-70px)} 45%,55%{transform:translateX(calc(50cqw - 38px))} to{transform:translateX(calc(100cqw + 6px))}}
.sw .m-cloud .drop{stroke:#c4d6ff}
.sw .play .m-cloud .drop{animation:m-drip .42s linear infinite; animation-delay:var(--dl)}
@keyframes m-drip{0%{transform:translateY(-3px); opacity:0} 30%{opacity:1} 100%{transform:translateY(7px); opacity:0}}

.sw .m-cap{left:50%; bottom:0; width:58px; height:48px; margin-left:-29px}
.sw .play .m-cap{animation:m-toss 1.5s both}
@keyframes m-toss{0%{transform:translateY(46px) rotate(0); animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  48%{transform:translateY(-88px) rotate(330deg); animation-timing-function:cubic-bezier(.5,0,.8,.5)} 100%{transform:translateY(50px) rotate(400deg)}}
.sw .m-cap .tas{transform-origin:0 0}
.sw .play .m-cap .tas{animation:m-swing .3s ease-in-out infinite alternate}
@keyframes m-swing{from{transform:rotate(-14deg)} to{transform:rotate(14deg)}}

.sw .m-plane{left:0; top:0; width:58px; height:39px}
.sw .play .m-plane{animation:m-plane 1.5s cubic-bezier(.4,.1,.6,.9) both}
@keyframes m-plane{0%{transform:translate(-60px,300px) rotate(-14deg)} 35%{transform:translate(32cqw,200px) rotate(-18deg)}
  60%{transform:translate(58cqw,150px) rotate(2deg)} 80%{transform:translate(78cqw,138px) rotate(-8deg)}
  100%{transform:translate(calc(100cqw + 20px),64px) rotate(-26deg)}}

.sw .m-glass{bottom:12px; width:24px; height:48px; transform-origin:50% 100%}
.sw .m-glass.L{left:0} .sw .m-glass.R{right:0}
.sw .play .m-glass.L{animation:m-clinkL 1.6s both}
.sw .play .m-glass.R{animation:m-clinkR 1.6s both}
@keyframes m-clinkL{0%{transform:translateX(-30px) rotate(-6deg); opacity:0; animation-timing-function:var(--snap)} 10%{opacity:1}
  40%{transform:translateX(calc(50cqw - 25px)) rotate(0)} 48%{transform:translateX(calc(50cqw - 22px)) rotate(10deg)}
  58%,84%{transform:translateX(calc(50cqw - 23px)) rotate(4deg); opacity:1} 100%{transform:translateX(calc(50cqw - 23px)) rotate(4deg); opacity:0}}
@keyframes m-clinkR{0%{transform:translateX(30px) rotate(6deg); opacity:0; animation-timing-function:var(--snap)} 10%{opacity:1}
  40%{transform:translateX(calc(-50cqw + 25px)) rotate(0)} 48%{transform:translateX(calc(-50cqw + 22px)) rotate(-10deg)}
  58%,84%{transform:translateX(calc(-50cqw + 23px)) rotate(-4deg); opacity:1} 100%{transform:translateX(calc(-50cqw + 23px)) rotate(-4deg); opacity:0}}
.sw .f-cheers .mdot{left:50%; bottom:58px; margin-left:-3px}
.sw .play .f-cheers .mdot{animation:m-ding 1.6s ease-out both}
@keyframes m-ding{0%,46%{opacity:0; transform:translate(0,0) scale(.3)} 52%{opacity:1}
  75%{opacity:1; transform:translate(var(--dx),var(--dy)) scale(1)} 92%,100%{opacity:0; transform:translate(var(--dx),calc(var(--dy) - 6px)) scale(.6)}}

.sw .m-ring{left:50%; bottom:10px; width:36px; height:41px; margin-left:-18px; transform-origin:50% 66%}
.sw .play .m-ring{animation:m-roll 1.5s both}
@keyframes m-roll{0%{transform:translateY(-130px); animation-timing-function:cubic-bezier(.55,0,1,.45)} 26%{transform:translateY(0); animation-timing-function:cubic-bezier(0,.55,.45,1)}
  34%{transform:translateY(-16px); animation-timing-function:cubic-bezier(.55,0,1,.45)} 42%,50%{transform:translateY(0) rotate(0); animation-timing-function:cubic-bezier(.5,0,.75,.6)}
  100%{transform:translate(calc(50cqw + 24px),0) rotate(1080deg)}}

/* reduced motion: the color only, nothing moves */
@media (prefers-reduced-motion:reduce){
  .sw .mo, .sw .mdot, .sw .rice, .sw .mring .tr{display:none!important}
  .sw .fx *, .sw .fxb *, .sw .cdls *, .sw .mring *{animation:none!important}
  .sw .booth, .sw .cone, .sw .sign, .sw .well{transition:none}
}

.sl{display:flex; flex-wrap:wrap; gap:0 8px; margin:4px 0 0; padding:0}
.sl a{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px 0 10px; color:var(--secondary,#b3abcc);
  font:500 12.5px/1 var(--body,Inter,system-ui,sans-serif); letter-spacing:.02em; text-decoration:none; position:relative}
.sl a::before{content:""; position:absolute; left:0; right:0; top:8px; bottom:8px; border-radius:999px;
  border:1px solid rgba(var(--sl,145,132,217),.38); background:rgba(var(--sl,145,132,217),.06); transition:border-color .15s, background-color .15s}
.sl a:hover::before, .sl a:focus-visible::before{border-color:rgba(var(--sl,145,132,217),.75); background:rgba(var(--sl,145,132,217),.12)}
.sl a:active::before{background:rgba(var(--sl,145,132,217),.2)}
.sl a:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:2px; border-radius:999px}
.sl a span{position:relative}
.sl .yt{position:relative; width:auto; height:17px; aspect-ratio:396/277.4; margin:0 1px; flex:none}
.sl .ly{position:relative; width:15px; height:15px; color:var(--slc,var(--accent-400,#b5abfc)); flex:none}

/* "+ Keep": the same quiet pill, the app's own verb. Kept, it lights blurple. */
.sl .kp{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px 0 10px; position:relative;
  background:none; border:0; cursor:pointer; color:var(--text,#f3eefe); font:500 12.5px/1 var(--body,Inter,system-ui,sans-serif); letter-spacing:.02em}
.sl .kp[hidden]{display:none}
.sl .kp::before{content:""; position:absolute; left:0; right:0; top:8px; bottom:8px; border-radius:999px;
  border:1px solid rgba(145,132,217,.55); background:rgba(145,132,217,.06); transition:border-color .15s, box-shadow .15s}
.sl .kp:hover::before{border-color:rgba(145,132,217,.85)}
.sl .kp[aria-pressed="true"]::before{border-color:var(--accent-400,#b5abfc); box-shadow:0 0 10px rgba(145,132,217,.5), inset 0 0 8px rgba(145,132,217,.18)}
.sl .kp:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:2px; border-radius:999px}
.sl .kp-i, .sl .kp-l{position:relative}
.sl .kp-i{width:15px; height:15px; fill:none; stroke:var(--accent-400,#b5abfc); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.sl .kp .kp-on, .sl .kp[aria-pressed="true"] .kp-add{display:none}
.sl .kp[aria-pressed="true"] .kp-on{display:block}
/* The keep bar: the install bar's place, once something is kept. Amber: the
   singer's own songs. */
.keepbar{position:fixed; left:0; right:0; bottom:0; z-index:51; display:flex; align-items:center; gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(12,10,20,.95); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--hairline,#2e2644); box-shadow:0 -12px 30px rgba(0,0,0,.45)}
.keepbar[hidden], .kl-keeping .installbar{display:none !important}
.kb-copy{flex:1; min-width:0; margin:0; font-size:13.5px; line-height:1.35; color:var(--muted,#b3abcc)}
.kb-copy b{display:block; font-size:15px; font-weight:500; color:var(--text,#f3eefe)}
.kb-list{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-go{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
  border:1.5px solid var(--tube-a,#ffd49a); color:#fff1dc; text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;
  text-shadow:0 0 6px rgba(232,162,74,.7); box-shadow:0 0 12px rgba(232,162,74,.45), inset 0 0 10px rgba(232,162,74,.14)}
.kb-go:hover{box-shadow:0 0 18px rgba(232,162,74,.65), inset 0 0 12px rgba(232,162,74,.2)}
.kb-go:focus-visible{outline:2px solid var(--accent-400,#b5abfc); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sl .kp::before{transition:none}}