/* Night Shift v3. The desktop is one 900px-tall scene scaled to the window height and stretched to its width. */
:root{--pink:#ff3fa4;--cash:#7dff8f;--lcd:#3df0ff;--amb:#ffb347;--cy:#3df0ff;--mg:#ff4fa3;--ink:#07040d}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{color:#f4ecff;font-family:"Inter Tight",sans-serif;overflow-x:hidden;background:var(--ink)}
.still.v-d body{overflow:hidden;height:100vh}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
.mono{font-family:"Chakra Petch",sans-serif;letter-spacing:.14em;text-transform:uppercase}

.stage{position:relative;width:100vw;height:100vh;min-height:520px;overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;background:url(../../neon-coast.webp) 50% 30%/cover;filter:saturate(1.15);z-index:-2;transition:transform .9s cubic-bezier(.3,.7,.2,1),filter .9s}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,4,13,.55) 0%,rgba(7,4,13,.15) 22%,rgba(7,4,13,.4) 38%,rgba(7,4,13,.7) 45%)}
.zoomed .bg{transform:scale(1.12);filter:saturate(1.15) blur(6px) brightness(.6)}
.world{--W:1600px;position:absolute;left:0;top:0;width:var(--W);height:940px;transform-origin:0 0;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
/* the dashboard photo sits behind the three units */
/* the stitched leather panel is 9-sliced: its stitching runs round the monitor, radio and glove box at any width */
.dashband{position:absolute;left:4px;right:4px;top:322px;bottom:4px;border-style:solid;border-width:56px 32px 40px 32px;border-image:url(img/dash-stitch.webp) 112 64 80 64 fill stretch;box-shadow:-600px 0 0 #0d0d0e,600px 0 0 #0d0d0e;filter:drop-shadow(0 -14px 36px rgba(0,0,0,.8));transition:filter .9s}
.zoomed .dashband{filter:brightness(.55) blur(2px)}
.dashband:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,transparent 55%,rgba(0,0,0,.3))}

.logo{position:absolute;left:34px;top:18px;font-family:"Mr Dafoe",cursive;font-size:58px;line-height:.9;color:#fff;text-shadow:0 0 6px var(--pink),0 0 18px var(--pink),0 0 42px var(--pink)}
.logo small{display:block;font-family:"Big Shoulders Display";font-weight:900;font-style:italic;font-size:16px;letter-spacing:.38em;color:var(--cy);text-shadow:0 0 10px var(--cy);margin:6px 0 0 64px}
.price{position:absolute;right:34px;top:20px;text-align:right}
.cash{font-family:"Chakra Petch";font-weight:700;font-size:58px;line-height:.9;color:var(--cash);-webkit-text-stroke:2px #04140a;paint-order:stroke fill;text-shadow:0 3px 0 #04140a,0 0 22px rgba(125,255,143,.45)}
.cash s{font-size:25px;color:#e8e1f5;-webkit-text-stroke:1.5px #000;opacity:.85;margin-right:10px;text-shadow:none}
.cashnote{font-size:10.5px;color:#e8e1f5;margin-top:8px;text-shadow:0 1px 0 #000;line-height:1.45}
.stars{margin-top:6px;display:inline-flex;gap:2px}
.stars button{font-size:26px;line-height:1;padding:2px 1px;color:rgba(255,255,255,.22);text-shadow:0 2px 0 #000;transition:transform .12s,color .12s}
.stars button.on{color:#ffd23f;text-shadow:0 0 12px rgba(255,210,63,.8),0 2px 0 #000}
.stars button:hover{transform:scale(1.18)}
.starlab{font-size:9.5px;color:#e8e1f5;margin-top:2px}
.starlab b{color:#ffd23f;font-weight:700}

.hero{position:absolute;left:calc(var(--W) / 2 - 520px);width:1040px;top:40px;text-align:center}
h1{font-family:"Big Shoulders Display";font-weight:900;font-style:italic;font-size:70px;line-height:.86;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 #000}
h1 i{font-style:inherit}
h1 span{display:block;color:var(--cy);text-shadow:0 0 10px var(--cy),0 0 30px var(--cy),0 4px 0 #000}
.sub{margin:10px auto 0;max-width:720px;font-size:17px;line-height:1.42;color:#e9e1f6;text-shadow:0 1px 2px #000}
.cta{margin-top:14px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;background:var(--cash);color:#041a08;padding:11px 34px 10px;transform:skewX(-8deg);box-shadow:6px 6px 0 #000,0 0 34px rgba(125,255,155,.45);transition:transform .15s,box-shadow .15s}
.cta b{font-family:"Big Shoulders Display";font-weight:900;font-size:31px;letter-spacing:.04em;line-height:1}
.cta small{font:600 11px/1 "Chakra Petch";letter-spacing:.16em;text-transform:uppercase}
.cta:hover{transform:skewX(-8deg) translateY(-2px);box-shadow:8px 8px 0 #000,0 0 46px rgba(125,255,155,.65)}
.cta:focus-visible,.pill:focus-visible{outline:3px solid #fff;outline-offset:4px}
.paynote{margin-top:10px;font-size:13px;color:#d9d0e6;text-shadow:0 1px 2px #000}
.ai{margin-top:4px;font-size:9.5px;color:#a99fbb}

.unit{position:absolute;transition:opacity .5s,filter .5s}
.zoomed .unit:not(.focus),.zoomed .above,.zoomed .hero,.zoomed .price,.zoomed .logo{opacity:.12;filter:blur(2px);pointer-events:none}
.recess{border-radius:12px;box-shadow:0 0 0 6px #070506,0 0 0 7px #3a2d30,0 18px 30px rgba(0,0,0,.75)}
.photo{position:relative;container-type:inline-size;overflow:hidden;border-radius:inherit}
.photo>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hot{position:absolute;border-radius:6px;transition:background .12s,box-shadow .12s}
.hot:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hot:active,.hot.pressed{background:rgba(0,0,0,.35);box-shadow:inset 0 3px 8px rgba(0,0,0,.8)}
.hot:focus-visible,.knob:focus-visible{outline:2px solid var(--cy);outline-offset:2px}

/* ---------- radio (12 presets) ---------- */
.radio{left:calc(var(--W) / 2 - 290px);top:452px;width:580px}
.lcd{position:absolute;left:20.7%;top:27.3%;width:62.5%;height:19.7%;display:grid;grid-template-columns:16% 1fr;color:var(--lcd);font-family:"VT323",monospace;text-shadow:0 0 .5cqw rgba(61,240,255,.8);pointer-events:none}
.lcd .emb{position:relative;border-right:.12cqw solid rgba(61,240,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw}
.lcd .emb svg{width:7cqw;height:7cqw;fill:none;stroke:currentColor;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 .4cqw var(--lcd))}
.emb svg .f{fill:currentColor;fill-opacity:.2}.emb svg .d{fill:currentColor;stroke:none}.emb svg .k{stroke-width:8}
.lcd .air{font-family:"Chakra Petch";font-weight:700;font-size:1.3cqw;letter-spacing:.12em;background:var(--lcd);color:#021012;padding:.15cqw .7cqw;border-radius:.3cqw;text-shadow:none}
/* the status word (TUNED / ON AIR / PAUSED …) is lettered in the LCD's own font and kept inside the emblem column of the lit screen */
#radio .lcd .air{font-family:"VT323",monospace;font-weight:400;line-height:1;letter-spacing:0;padding:.1em 2px 0;border-radius:2px;max-width:calc(100% - 4px);overflow:hidden;white-space:nowrap}
.lcd .main{padding:.8cqw 1.6cqw 0 2cqw;min-width:0;display:flex;flex-direction:column}
.lcd .l1{display:flex;align-items:baseline;gap:1.4cqw;white-space:nowrap;border-bottom:.12cqw solid rgba(61,240,255,.55);padding-bottom:.3cqw}
.lcd .freq{font-size:7.2cqw;line-height:.85}.lcd .fm{font-size:2cqw}
.lcd .stn{font-size:3.5cqw;overflow:hidden;white-space:nowrap;letter-spacing:.06em;min-width:0}
.lcd .tick{font-size:2.7cqw;white-space:nowrap;overflow:hidden;margin-top:.7cqw}
/* rolling text (radio-now-playing-r81, now-playing.js roll()): the station name and the line under it stand still when
   they fit the screen; longer, they scroll right to left on a loop (two copies, the strip moves by half its width) */
.lcd .stn>span,.lcd .tick>span{display:inline-block;white-space:nowrap}
.lcd .stn[data-roll="1"]>span,.lcd .tick[data-roll="1"]>span{animation:marq var(--d,14s) linear infinite}
.still .lcd .tick>span,.still .lcd .stn>span{animation:none}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lcd .time{align-self:flex-end;font-size:2.3cqw;margin-top:auto;padding-bottom:.4cqw}
/* Radio off (offScreen in night-shift-v3.js): the LCD stays lit in neon pink over the picture's printed display and
   invites a play; the needle sweeps with the scan. Blinking stops under reduced motion (the rule further down). */
.lcd.off{--lcd:#ff4fd8;text-shadow:0 0 .5cqw rgba(255,79,216,.85)}
.lcd.off .emb{border-right-color:rgba(255,79,216,.35)}
.lcd.off .l1{border-bottom-color:rgba(255,79,216,.55)}
.lcd.off .blink,.lcd.off[data-look="prompt"] .freq,.lcd.off[data-look="prompt"] .emb svg{animation:offblink 1.1s steps(1) infinite}
@keyframes offblink{50%{opacity:.45}}
/* the default prompt: TURN ME ON on the big line, white-hot with a neon pink glow (David, 27 Oct: brighter) */
.lcd.off[data-look="prompt"] .fm{display:none}
.lcd.off[data-look="prompt"] .freq{color:#fff2fc;letter-spacing:.04em;white-space:nowrap;text-shadow:0 0 1px #fff,0 0 .5cqw #ff4fd8,0 0 1.2cqw #ff4fd8,0 0 2.6cqw rgba(255,79,216,.75)}
.lcd.off[data-look="prompt"] .emb svg{stroke:#fff2fc;filter:drop-shadow(0 0 .5cqw #ff4fd8) drop-shadow(0 0 1.2cqw #ff4fd8)}
.lcd.off[data-look="scan"]~.needle{background:#ff4fd8;box-shadow:0 0 .6cqw #ff4fd8;transition:left .09s linear}
.lcd.tuning .main,.lcd.tuning .emb svg{animation:flick .18s steps(2) infinite}
.lcd.tuning:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(61,240,255,.07) 0 2px,transparent 2px 5px),repeating-linear-gradient(0deg,rgba(61,240,255,.1) 0 1px,transparent 1px 4px)}
@keyframes flick{50%{opacity:.35}}
.needle{position:absolute;top:50.2%;height:6.4%;width:.35%;margin-left:-.17%;background:#ff3b2f;border-radius:1px;box-shadow:0 0 .6cqw #ff3b2f,0 0 1.6cqw rgba(255,59,47,.6);transition:left .7s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.needle.off{background:#4a4848;box-shadow:none}
.livebar{position:absolute;height:.8%;width:8.7%;margin-left:-4.35%;border-radius:2px;background:#ffb24a;box-shadow:0 0 .7cqw #ff9a2e,0 0 1.8cqw rgba(255,154,46,.6);transition:left .25s,top .25s;pointer-events:none}
.livebar.off{opacity:0}
.knob{position:absolute;border-radius:50%;background:url(img/radio12.webp) no-repeat;background-size:100cqw auto;transition:transform .5s cubic-bezier(.3,.7,.2,1);cursor:pointer}
.nrbadge{position:absolute;left:68.6%;top:9.4%;font:700 1.3cqw/1 "Chakra Petch";letter-spacing:.14em;color:#c9c4bc;border:.12cqw solid #8d877e;padding:.4cqw .8cqw;opacity:.85;pointer-events:none}

/* above the radio: How it works · ON AIR · My tracks */
.above{position:absolute;left:calc(var(--W) / 2 - 290px);top:388px;width:580px;height:52px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;transition:opacity .5s,filter .5s}
.onair{font-family:"Big Shoulders Display";font-weight:900;font-size:30px;line-height:1;letter-spacing:.14em;color:#ffd9d6;-webkit-text-stroke:1.2px #ff5a4e;text-shadow:0 0 6px #ff3b30,0 0 22px #ff3b30,0 0 50px #ff3b30;padding:6px 14px;border:2px solid #ff6a5f;border-radius:10px;box-shadow:0 0 12px #ff3b30,inset 0 0 10px #ff3b30;background:rgba(10,4,6,.6)}
.onair.cold{color:transparent;-webkit-text-stroke:1.2px #4a2420;text-shadow:none;border-color:#3a1714;box-shadow:none}
.pill{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid #5a4a62;background:rgba(10,7,14,.85);color:#efe6f7;font:700 12px/1 "Chakra Petch";letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .15s,border-color .15s}
.pill:hover{border-color:var(--amb)}
.pill.hot2{background:var(--amb);border-color:var(--amb);color:#1a0e00;box-shadow:0 0 18px rgba(255,179,71,.45)}
.pill em{font-style:normal;background:#1a0e00;color:var(--amb);border-radius:999px;padding:3px 7px;font-size:11px}

/* ---------- side units fill whatever width is left ---------- */
.side-unit{top:392px;width:calc((var(--W) - 580px - 136px) / 2);height:494px}
.monitor{left:44px}
.glove{left:calc(var(--W) - 44px - (var(--W) - 580px - 136px) / 2)}

/* ---------- request line monitor: the photo bezel stretches to any size ---------- */
.mframe{height:100%;border-style:solid;border-width:39px 40px 37px 35px;border-image:url(img/monitor-frame.webp) 31 32 30 28 stretch;border-radius:14px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.7))}
.scr{position:relative;height:100%;border-radius:18px/22px;overflow:hidden;container-type:inline-size;color:#f7efe0;font-family:"VT323",monospace;background:#0b0a1a url(img/monitor-screen.webp) center 30%/cover;display:flex;flex-direction:column}
.scr .veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 30%,rgba(18,14,52,.87),rgba(6,6,24,.95));backdrop-filter:blur(2px) saturate(1.2);transition:opacity .4s}
.scr:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(90% 60% at 28% 6%,rgba(255,255,255,.09),transparent 55%),radial-gradient(140% 120% at 50% 50%,transparent 60%,rgba(0,0,0,.5))}
.scr.boot .veil{opacity:0}
.scr.boot .rlbar{display:none}
.rlbar{position:relative;z-index:1;padding:2.6cqw 3.6cqw 0}
.rlhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:3.3cqw}
.rlhead .tag{justify-self:start;background:var(--cash);color:#041a08;padding:0 1.2cqw}
.rlhead h2{font-family:"Big Shoulders Display";font-weight:900;font-style:italic;font-size:5.6cqw;letter-spacing:.08em;line-height:1;color:var(--amb);text-shadow:0 0 1.6cqw rgba(255,179,71,.6)}
.rlhead .stp{justify-self:end;color:#cfc6ff}
.meter{display:flex;align-items:center;gap:1.6cqw;margin-top:1.6cqw;font-size:3cqw;color:#cfc6ff}
.meter .segs{flex:1;display:grid;grid-template-columns:repeat(20,1fr);gap:.4cqw;height:2.6cqw}
.meter .segs i{background:rgba(120,130,200,.18);border-radius:.3cqw;transition:background .3s,box-shadow .3s}
.meter .segs i.on{background:var(--c);box-shadow:0 0 1cqw var(--c)}
.meter b{font-weight:400;min-width:25cqw;text-align:right;color:var(--mc,#ff6a5f)}
.pane{display:none;position:relative;z-index:1;flex:1;min-height:0;padding:1.8cqw 3.6cqw 3cqw;flex-direction:column}
.pane.on{display:flex}
.q{font-size:5.4cqw;line-height:1;color:#fff;margin-bottom:.8cqw}
.l{font-size:3.3cqw;color:var(--amb);margin-top:1.6cqw}
.in{display:flex;align-items:center;gap:1.2cqw;border:.4cqw solid #4a5a9a;border-radius:.8cqw;padding:.2cqw 1.8cqw;background:rgba(4,6,26,.9);color:#fff;font-size:4.4cqw}
.in:focus-within{border-color:var(--cy);box-shadow:0 0 0 .5cqw rgba(61,240,255,.25)}
.in input{all:unset;flex:1;min-width:0;font:inherit;color:inherit}
.in input::placeholder{color:#6b75a8}
.list{flex:1;min-height:0;overflow-y:auto;margin-top:.8cqw;padding-right:1cqw;scroll-snap-type:y proximity;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 98%);mask-image:linear-gradient(180deg,#000 58%,transparent 98%);scrollbar-width:thin;scrollbar-color:#3a4682 transparent;overscroll-behavior:contain}
.list.end{-webkit-mask-image:none;mask-image:none}
.list button{display:flex;align-items:center;gap:1.6cqw;width:100%;text-align:left;font-family:"VT323";font-size:4.4cqw;line-height:1.05;color:#d8d4ff;padding:.7cqw 1.4cqw;border-radius:.6cqw;scroll-snap-align:start;min-height:6.8cqw}
.list button:before{content:">";color:#4a5a9a}
.list button:hover{background:rgba(61,240,255,.08);color:#fff}
.list button.on{background:var(--mg);color:#fff;box-shadow:0 0 2cqw rgba(255,79,163,.5)}
.list button.on:before{color:#fff}
.list button small{margin-left:auto;font-size:3.2cqw;color:#8f97d6;text-align:right}
.list button.on small{color:#ffe1f0}
.list .own{display:flex;align-items:center;gap:1.4cqw;padding:1cqw 1.4cqw;color:var(--cy);font-size:4cqw;white-space:nowrap}
.list .own .in{flex:1;font-size:4cqw}
.rowline{display:flex;align-items:center;gap:1.6cqw;margin-top:1cqw;font-size:3.6cqw;color:var(--cy)}
.rowline>span{flex:1;min-width:0}
.mini{min-height:6.6cqw;padding:0 2cqw;border-radius:.8cqw;border:.4cqw solid #3a4682;background:rgba(18,22,64,.9);color:#fff;font-family:"VT323";font-size:3.8cqw;white-space:nowrap}
.mini.mix{border-color:var(--amb);color:var(--amb)}
.mini.mix.on{background:var(--amb);color:#1a0e00}
.act{margin-top:1.4cqw;display:flex;gap:1.6cqw}
.act button{position:relative;flex:1;min-height:4.2cqw;padding:.2cqw 0;font-family:"VT323";font-size:3.6cqw;line-height:1;border-radius:.8cqw;background:var(--amb);color:#1a0e00;box-shadow:0 0 3cqw rgba(255,179,71,.45),inset 0 -.7cqw 0 rgba(0,0,0,.2)}
.act button:after{content:"";position:absolute;inset:-1.6cqw 0}
.act button.back{flex:0 0 13cqw;background:rgba(18,22,64,.9);border:.4cqw solid #3a4682;color:#fff;box-shadow:none}
/* boot screen */
.boot-head{position:absolute;left:0;right:0;top:7%;text-align:center}
.boot-head h2{font-family:"Big Shoulders Display";font-weight:900;font-style:italic;font-size:10cqw;line-height:.9;letter-spacing:.06em;color:#fff;text-shadow:0 0 2cqw rgba(255,179,71,.9),0 .6cqw 0 rgba(0,0,0,.6)}
.boot-head p{font-size:3.8cqw;color:#e8f6ff;text-shadow:0 0 1cqw #000;margin-top:1cqw}
.boot-note{position:absolute;left:8%;right:8%;top:25%;text-align:center;font-size:3.4cqw;line-height:1.35;color:#ffd9a0;text-shadow:0 0 1cqw #000}
.v-m .boot-note{font-size:5cqw;top:24%}
.boot-go{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);white-space:nowrap;font-family:"VT323";font-size:5.8cqw;color:#1a0e00;background:var(--amb);padding:1.4cqw 4cqw;border-radius:1cqw;box-shadow:0 0 3.4cqw rgba(255,179,71,.6),0 .8cqw 0 rgba(0,0,0,.35);animation:pulse 1.6s ease-in-out infinite}
.boot-go small{display:block;font-size:3cqw;text-align:center;opacity:.8}
.boot-check{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-size:4.6cqw;letter-spacing:.06em;color:#cfe9ff;text-shadow:0 0 1.2cqw rgba(140,200,255,.7)}
@keyframes pulse{50%{box-shadow:0 0 6cqw rgba(255,179,71,.9),0 .8cqw 0 rgba(0,0,0,.35)}}
/* the deets: teletext-style picker */
.qs{float:right;font-size:3.2cqw;color:#ffd23f;margin-top:1.4cqw}
.tt-tabs{display:flex;gap:.8cqw;overflow-x:auto;scrollbar-width:none;padding-bottom:.6cqw;margin-top:.4cqw;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.tt-tabs::-webkit-scrollbar{display:none}
.tt-tabs button{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:.2cqw;font-family:"VT323";font-size:3.8cqw;line-height:1;padding:.8cqw 1.6cqw;color:#05060a;background:color-mix(in srgb,var(--tc) 30%,#0b0d26);color:var(--tc);border:.3cqw solid var(--tc);min-height:8.4cqw}
.tt-tabs button small{font-size:2.6cqw;opacity:.8}
.tt-tabs button{position:relative}
.tt-tabs button em{position:absolute;right:.6cqw;top:.5cqw;font-style:normal;font-size:2.8cqw;background:#05060a;color:var(--tc);padding:0 .7cqw}
.tt-tabs button.on{background:var(--tc);color:#05060a;box-shadow:0 0 2cqw color-mix(in srgb,var(--tc) 60%,transparent)}
.tt-tabs button.on em{background:#05060a;color:var(--tc)}
.tt-page{margin-top:.8cqw;scroll-snap-type:none}
.tt-h{font-size:3.4cqw;color:#05060a;background:var(--tc);padding:.2cqw 1.4cqw;margin:1.2cqw 0 .8cqw;letter-spacing:.08em}
.tt-h:first-child{margin-top:0}
.tt-h.big{font-size:5cqw;padding:.6cqw 1.6cqw}
.tt-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw}
.tt-page .tk{display:flex;align-items:center;gap:1.2cqw;width:auto;min-height:7cqw;padding:.6cqw 1.2cqw;text-align:left;font-size:3.9cqw;line-height:1.05;color:#e9e4ff;background:rgba(18,22,64,.7);border:.3cqw solid #2c3670;border-radius:.4cqw}
.tt-page .tk:before{content:none}
.tt-page .tk b{font-weight:400;color:#6b75a8;font-size:4.4cqw}
.tt-page .tk:hover{border-color:var(--cy)}
.tt-page .tk.on{background:#ffd23f;border-color:#fff2b0;color:#1a1200;box-shadow:0 0 1.6cqw rgba(255,210,63,.5)}
.tt-page .tk.on b{color:#1a1200}
.pin{flex:none;margin-top:1cqw}
.own1{font-size:3.8cqw;color:var(--cy)}
.own1 input{color:#fff}
.ownrow{display:flex;gap:1.2cqw;align-items:stretch}
.ownrow .in{flex:1;font-size:3.8cqw}
.tray{display:flex;flex-wrap:wrap;gap:1cqw;margin-bottom:1cqw;max-height:12cqw;overflow-y:auto}
.tray:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.8cqw;font-family:"VT323";font-size:3.6cqw;background:#ffd23f;color:#1a1200;border-radius:.6cqw;padding:.2cqw 1.2cqw}
.chip button{color:#1a1200;font-size:3.4cqw}
.chip.own{background:var(--cy);color:#03161a}
.heat{display:flex;align-items:center;gap:1cqw;margin-top:1cqw;font-size:3.3cqw;color:var(--amb)}
.heat button{flex:1;min-height:6.4cqw;border-radius:.6cqw;border:.3cqw solid #3a4682;background:rgba(18,22,64,.9);color:#d8d4ff;font-family:"VT323";font-size:3.6cqw}
.heat button.on{background:#ffd23f;border-color:#fff2b0;color:#1a1200}
.bar{height:2.8cqw;border:.4cqw solid #3a4682;border-radius:.6cqw;margin:1.6cqw 0}
.bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--mg),var(--amb))}
.note{font-size:3.4cqw;color:#ffd23f;margin-top:1.2cqw}
.sum{font-size:3.8cqw;line-height:1.25;color:#d8d4ff}
.sum b{font-weight:400;color:#fff}

/* ---------- glove box (lid kept as it was) ---------- */
.gbox{position:relative;height:100%;overflow:hidden;border-radius:12px;container-type:inline-size}
.gimg{position:absolute;inset:0;background:url(img/glove-closed.webp) center/cover}
.gbox.open .gimg{background:url(img/glove-open.webp) 0 0/100% 100%}
.lid,.inside{position:absolute;inset:0}
.inside{display:none}
.gbox.open .inside{display:block}.gbox.open .lid{display:none}
.lockring{position:absolute;border-radius:10px;box-shadow:0 0 0 3px var(--amb),0 0 24px 4px rgba(255,179,71,.6);animation:ring 1.6s ease-in-out infinite;pointer-events:none}
@keyframes ring{50%{box-shadow:0 0 0 3px var(--amb),0 0 40px 10px rgba(255,179,71,.85)}}
.opentag{position:absolute;left:4%;right:4%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.opentag b{white-space:nowrap;font:700 3.6cqw/1 "Chakra Petch";letter-spacing:.14em;color:#1a0e00;background:var(--amb);padding:1.6cqw 3cqw;border-radius:999px;box-shadow:0 0 18px rgba(255,179,71,.5)}
.stack{position:absolute;left:calc(50% - 212px);top:37%;width:192px;cursor:zoom-in}
.pol{position:absolute;left:0;top:0;width:100%;aspect-ratio:721/1088;background:#ece6d8;box-shadow:0 2cqw 4cqw rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.pol:nth-child(1){transform:translate(9%,7%) rotate(7deg)}
.pol:nth-child(2){transform:translate(-5%,3%) rotate(-6deg)}
.pol:nth-child(3){position:relative;transform:rotate(2deg)}
.pol .frame{position:absolute;inset:0;background:center/100% 100% no-repeat;pointer-events:none}
.stack:hover .pol:nth-child(3){transform:rotate(0) scale(1.04)}
.stack.flick .pol:nth-child(3){transform:translate(130%,-20%) rotate(32deg)}
.ph{position:absolute;overflow:hidden;font-size:7cqw!important;background:radial-gradient(80% 70% at 50% 35%,color-mix(in srgb,var(--c) 35%,#151018),#0b0810);display:flex;align-items:center;justify-content:center;text-align:center;color:color-mix(in srgb,var(--c) 70%,#fff);font:500 3cqw/1.3 "Chakra Petch";letter-spacing:.14em}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:sepia(.12) saturate(1.08) contrast(1.04)}

/* David (24 Oct): these three portraits lost their faces in the closed glove box (cover crop cut the top). Keep the head in frame. */
.ph img[src*="delores-lionel"]{object-position:50% 4%}
.ph img[src*="araminta"]{object-position:50% 2%}
.ph img[src*="krystal-full"]{object-position:50% 2%}
.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.16),transparent 40%)}
.pol{container-type:inline-size}
.pol .cap{position:absolute;left:8%;right:8%;bottom:6%;font-family:"Permanent Marker";font-size:9cqw;color:#1d1a2a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pol .pin{position:absolute;left:50%;top:-4%;width:36%;height:8%;margin-left:-18%;background:rgba(240,235,200,.7);transform:rotate(-4deg);z-index:1}
.rcol{position:absolute;left:calc(50% + 14px);width:184px;top:36%;display:flex;flex-direction:column;gap:10px}
.side .lbl{display:none}
.stack:after{content:"⤢ TAP FOR DETAILS";position:absolute;z-index:2;left:50%;top:62%;transform:translateX(-50%) rotate(2deg);white-space:nowrap;font:700 10px/1 "Chakra Petch";letter-spacing:.16em;color:#fff;background:rgba(6,5,8,.75);padding:6px 9px;border-radius:99px;pointer-events:none}
.side{display:flex;flex-direction:row;align-items:center;gap:10px;font:600 10px/1.3 "Chakra Petch";letter-spacing:.12em;color:#efe6da;text-transform:uppercase;text-shadow:0 1px 0 #000}
.side .cnt{font-family:"Big Shoulders Display";font-weight:900;font-size:30px;line-height:.85;letter-spacing:0;color:#f4eee2}
.side .btns{display:flex;gap:8px;margin-left:auto}
.side .btns button{width:44px;height:44px;border-radius:50%;border:1px solid #000;background:linear-gradient(180deg,#4a413a,#2a241f);color:#efe9da;font-size:5cqw;box-shadow:0 1cqw 0 #000}
.card{container-type:inline-size;aspect-ratio:554/675;background:url(img/sticky.webp) center/100% 100% no-repeat,#ece7b8;color:#1d1a16;padding:13% 9% 4%;transform:rotate(-2.4deg);box-shadow:0 8px 16px rgba(0,0,0,.55);font-family:"Permanent Marker";overflow:hidden}
.card small{font:700 6.4cqw/1 "Chakra Petch";letter-spacing:.16em;color:#7a6f60}
.card .dj{font-family:"Permanent Marker";font-size:calc(13.5cqw * var(--cz,1));line-height:1.05;margin-top:3cqw;color:#1a1d4a}
.card .st{font-family:"Permanent Marker";font-size:calc(8.2cqw * var(--cz,1));line-height:1.3;margin-top:2cqw;color:#a3215e}
.card .mu{font-family:"Permanent Marker";font-size:calc(7.4cqw * var(--cz,1));line-height:1.25;margin-top:1.4cqw;color:#5d4a2a}
.card p{font-family:"Permanent Marker";font-size:calc(8.2cqw * var(--cz,1));line-height:1.3;margin-top:2cqw;color:#2b2a5a}
.tape{position:absolute;cursor:pointer;transition:transform .3s}
.tape:hover,.tape.sel{transform:translateY(-.8%)}
.tape.a{left:14.2%;top:46.4%;width:19.4%;height:6.8%;background:#ece6d4;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:"Permanent Marker";font-size:4.6cqw;color:#1d1a2a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.tape.b{left:11.8%;top:54.4%;width:23.4%;height:6.2%;display:flex;align-items:center;justify-content:space-between;padding:0 2%;background:#121114;font:700 3.2cqw/1 "Chakra Petch";letter-spacing:.06em;color:#e0503c}
.tape.b small{color:#8f8a84;font-size:2.8cqw}
/* tape labels never outgrow their tape (landscape boxes are wide but the picture is short): --tw is the picture width */
.tape.a{font-size:min(4.6cqw,max(12px,var(--tw,1e4px)*.0155))}
.tape.b{font-size:min(3.2cqw,max(9px,var(--tw,1e4px)*.0108))}
.tape.b small{font-size:min(2.8cqw,max(8px,var(--tw,1e4px)*.0094))}
.manual{position:absolute;left:62.4%;top:41%;width:19%;height:15.4%;transform:rotate(-1.4deg);background:linear-gradient(180deg,#311d10 0 46%,#4a2418 46% 50%,#311d10 50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.manual b{font-family:"Big Shoulders Display";font-weight:900;font-size:5cqw;letter-spacing:.14em;color:#c8b48c;line-height:1}
.manual small{font:700 2.2cqw/1 "Chakra Petch";letter-spacing:.14em;color:#b9a582}
.trk{display:none;position:absolute;z-index:2;left:4%;right:4%;top:3%;flex-direction:column;align-items:flex-start;gap:2cqw;padding:3cqw 3.4cqw;background:rgba(6,5,8,.88);border:1px solid #2c2622;border-radius:2cqw;font:600 3cqw/1.35 "Chakra Petch";letter-spacing:.08em;color:#d8cfc2}
.gbox.open .trk{display:flex}
/* beside the tapes (wide, short boxes) the list is sized to its own width, as on the desktop glove box */
.trk.beside{container-type:inline-size}
.trk h3{font:700 3.2cqw/1 "Chakra Petch";letter-spacing:.18em;color:var(--amb)}
.trk b{color:#fff;font-family:"Permanent Marker";font-weight:400;font-size:5cqw;letter-spacing:0}
.trk .btns{display:flex;gap:2cqw;flex-wrap:wrap}
.trk .btns button{min-height:40px;padding:0 3cqw;border-radius:1.2cqw;border:1px solid #000;background:#3a3a42;color:#efe9da;font:700 2.8cqw/1 "Chakra Petch";letter-spacing:.08em}
.trk .btns button.go{background:var(--cash);color:#04140a}
.gx{display:none;position:absolute;z-index:2;right:4%;bottom:4%;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(6,5,8,.88);border:1px solid #2c2622;color:#e6dccd;font:700 11px/1 "Chakra Petch";letter-spacing:.14em}
.gbox.open .gx{display:block}
.gbox.nudge{animation:nudge .5s 2}
@keyframes nudge{25%{transform:rotate(-.8deg)}75%{transform:rotate(.8deg)}}

/* zoom chrome */
.back2{position:fixed;left:50%;top:16px;transform:translate(-50%,-80px);z-index:20;min-height:44px;padding:0 22px;border-radius:999px;background:rgba(6,5,8,.9);border:1px solid #5a4a62;color:#efe6f7;font:700 12px/1 "Chakra Petch";letter-spacing:.16em;transition:transform .5s}
.zoomed .back2{transform:translate(-50%,0)}
.scrollcue{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font:600 10px/1 "Chakra Petch";letter-spacing:.2em;color:#d8cfe6;text-decoration:none;z-index:3;text-shadow:0 1px 2px #000}
.zoomed .scrollcue{opacity:0}
/* section zoom buttons (lensPlace in night-shift-v3.js): the rest of the page sits behind a dark layer blurred about 7px on screen */
.zoomveil{position:absolute;z-index:40;background:rgba(5,3,9,.62);backdrop-filter:blur(calc(7px / var(--lens-z,1)));-webkit-backdrop-filter:blur(calc(7px / var(--lens-z,1)));cursor:zoom-out}
.zoomveil[hidden]{display:none}
.lens .unit.lens-on{z-index:41}
.mzoom.nofit{display:none!important}

/* polaroid lightbox */
.lb{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(5,3,9,.82);backdrop-filter:blur(6px)}
.lb.on{display:flex}
/* a zoomed Polaroid taller than the screen (phones) scrolls from its top instead of being cut off above it */
.lb{overflow-y:auto;overscroll-behavior:contain}.lb-in{margin:auto}
.lb-in{display:flex;align-items:center;gap:min(4vw,48px);padding:20px}
.lb .pol{position:relative;width:min(60vw,52vh,480px);transform:rotate(-2deg);container-type:inline-size;cursor:default}
.lb .pol .ph{font-size:4cqw}
/* zoomed: the whole portrait, uncropped, inside the same Polaroid window */
.lb .pol .ph img{object-fit:contain;object-position:50% 50%}.lb .pol .cap{font-size:8cqw}
/* zoomed DJ with David's own Polaroid picture: that picture whole, at its own shape, instead of the drawn frame */
/* it is drawn as large as the screen allows, never cropped: the picture's own shape decides which edge limits it */
.lb .pol.own{width:auto;aspect-ratio:auto;background:none;container-type:normal;flex:none}
.lb .pol.own .own-pol{display:block;width:auto;height:auto;max-width:calc(100vw - 480px);max-height:calc(100vh - 80px)}
.lb-info{max-width:300px}
.lb-info small{font:700 11px/1 "Chakra Petch";letter-spacing:.18em;color:var(--amb)}
.lb-info h2{font-family:"Big Shoulders Display";font-weight:900;font-size:46px;line-height:.95;text-transform:uppercase;margin-top:8px}
.lb-info .st{font:700 13px/1.4 "Chakra Petch";letter-spacing:.1em;color:var(--pink);margin-top:8px}
.lb-info p{font-size:16px;line-height:1.45;color:#e6dcef;margin-top:12px}
.lb-info .tag{display:inline-block;margin-top:14px;font:600 10px/1 "Chakra Petch";letter-spacing:.16em;color:#a99fbb;border:1px solid #4a3f58;border-radius:99px;padding:6px 10px}
.lb-nav{display:flex;gap:10px;margin-top:20px}
.lb-nav button{min-width:48px;min-height:48px;border-radius:50%;border:1px solid #5a4a62;background:#140e1b;font-size:18px}
.lb-x{position:absolute;z-index:2;right:18px;top:18px;min-width:48px;min-height:48px;border-radius:50%;border:1px solid #5a4a62;background:#140e1b;font-size:20px}

/* ================= below the dash ================= */
.more{position:relative;background:radial-gradient(60% 50% at 0% 30%,rgba(255,63,164,.12),transparent 70%),radial-gradient(50% 40% at 100% 70%,rgba(61,240,255,.10),transparent 70%),var(--ink);border-top:1px solid #2a2236}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:84px 0 70px}
.step{position:relative;padding:26px 26px 24px;border-radius:14px;background:linear-gradient(180deg,#171021,#0f0a16);border:1px solid #2c2338;overflow:hidden}
.step:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.step .n{font-family:"Big Shoulders Display";font-weight:900;font-size:74px;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--c);text-shadow:0 0 22px color-mix(in srgb,var(--c) 40%,transparent)}
.step small{display:block;margin-top:16px;font:700 11px/1 "Chakra Petch";letter-spacing:.2em;color:var(--c)}
.step h3{font-size:24px;line-height:1.15;margin-top:8px}
.step p{font-size:15.5px;line-height:1.55;color:#cfc6dd;margin-top:10px}
.step p b{color:#fff}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding:64px 0 76px;border-top:1px solid #2a2236}
.faq .eb{font:700 11px/1 "Chakra Petch";letter-spacing:.2em;color:var(--pink)}
.faq h2{font-family:"Big Shoulders Display";font-weight:900;font-style:italic;font-size:62px;line-height:.9;text-transform:uppercase;margin-top:12px}
.faq h2 span{color:var(--cy);text-shadow:0 0 18px rgba(61,240,255,.5)}
.faq .lede{margin-top:16px;color:#cfc6dd;font-size:16px;line-height:1.5;max-width:380px}
.faq .lede a{color:var(--amb)}
details{border-bottom:1px solid #2a2236}
details:first-child{border-top:1px solid #2a2236}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 4px;font-size:18px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #4a3f58;font:400 22px/1 "Chakra Petch";color:var(--cy);transition:transform .25s}
details[open] summary:after{transform:rotate(45deg);border-color:var(--cy)}
details p{padding:0 50px 20px 4px;color:#cfc6dd;font-size:15.5px;line-height:1.6}
footer{border-top:1px solid #2a2236;padding:34px 0 40px}
.fwrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.fmark{font-family:"Mr Dafoe",cursive;font-size:38px;color:#fff;text-shadow:0 0 6px var(--pink),0 0 18px var(--pink)}
/* Hustle MM chrome gold logo (David, 1 Nov) in place of the "Hustle MM" script in the header and footer. Height .85em of
   the logo's font size = the old script's ink height (52px desktop: 44px; 30px phone: 26px; 38px footer: 32px).
   polish-r28 (David, 2 Nov): the logo sits level everywhere (header and footer, desktop and phone); the old script's
   tilt (-6deg header, -4deg footer and phone header) and the small line's counter-turn are gone. */
.logo-mark{display:block;line-height:0}
.logo-mark img{display:block;height:.85em;width:auto;max-width:100%}
.fnote{font-size:13.5px;line-height:1.5;color:#b8afc8;max-width:440px}
.legal{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.legal a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid #3a304a;text-decoration:none;font:700 11px/1 "Chakra Petch";letter-spacing:.16em;text-transform:uppercase;color:#e6dcef}
.legal a:hover{border-color:var(--cy);color:#fff}
.legal a.tracks{border-color:var(--amb);color:var(--amb)}
.fbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px dashed #2a2236;font:600 10.5px/1.5 "Chakra Petch";letter-spacing:.16em;text-transform:uppercase;color:#8f86a2}

/* ================= phone ================= */
.v-m .stage{width:auto;height:auto;min-height:0;overflow:clip}
.v-m .world{position:static;width:auto;height:auto;transform:none!important;padding:14px 16px 24px}
.v-m .dashband,.v-m .scrollcue,.v-m .onair,.v-m .sub,.v-m .back2{display:none}
.v-m .bg{position:absolute;inset:0 0 auto 0;height:430px;background-position:58% 30%}
.v-m .bg:after{background:linear-gradient(180deg,rgba(7,4,13,.4) 0,rgba(7,4,13,.15) 140px,rgba(7,4,13,.85) 320px,#07040d 430px)}
.v-m .tophud{display:flex;justify-content:space-between;align-items:flex-start}
.v-m .logo,.v-m .price,.v-m .hero,.v-m .unit,.v-m .above{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto}
.v-m .logo{font-size:38px}.v-m .logo small{font-size:10px;margin:4px 0 0 34px;letter-spacing:.3em;white-space:nowrap}
.v-m .cash{font-size:38px;-webkit-text-stroke:1.5px #04140a}.v-m .cash s{font-size:17px;margin-right:6px}
.v-m .cashnote{font-size:9px;letter-spacing:.06em;margin-top:5px}
.v-m .stars button{font-size:22px;min-width:26px;min-height:30px}
.v-m .starlab{font-size:8.5px;letter-spacing:.06em}
.v-m .hero{margin-top:4px}
.v-m h1{font-size:40px}.v-m h1 i{display:block}
.v-m .cta{display:flex;width:100%;margin-top:10px;padding:10px 10px 9px}.v-m .cta b{font-size:25px}
.v-m .paynote{font-size:11px;margin-top:6px}
.v-m .above{margin-top:14px;grid-template-columns:1fr 1fr;display:grid}
.v-m .radio{margin:10px -16px 0;border-radius:0;box-shadow:0 14px 30px rgba(0,0,0,.7)}
.dashpan{display:none}
.v-m .dashpan{display:block;position:relative;height:420svh;margin:20px -16px 0}
.dp-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#0b0b0d url(img/dash-stitch.webp) 50% 50%/100% 100% no-repeat}
.dp-tabs{display:flex;gap:8px;padding:10px 12px;background:rgba(7,4,13,.85)}
.dp-tabs button{flex:1;min-height:44px;border-radius:999px;border:1px solid #4a3a52;background:rgba(10,7,14,.8);color:#cfc6dd;font:700 12px/1 "Chakra Petch";letter-spacing:.14em}
.dp-tabs button.on{background:var(--amb);border-color:var(--amb);color:#1a0e00;box-shadow:0 0 16px rgba(255,179,71,.4)}
.dp-view{flex:1;min-height:0;overflow:hidden;touch-action:pan-y;padding:12px 0;position:relative}
.dp-track{display:flex;width:200%;height:100%;will-change:transform}
.dp-track.ease{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.dp-panel{width:50%;height:100%;flex:none;padding:0 10px}
.v-m .dp-panel .unit{height:100%;width:auto}
.dp-hint{text-align:center;padding:8px 0 10px;font:500 10.5px/1.3 "Chakra Petch";letter-spacing:.14em;color:#cfc6dd;text-transform:uppercase;background:rgba(7,4,13,.85)}
.v-m .mframe{border-width:26px 27px 25px 24px}
/* the phone screen is narrow and tall: larger type */
.v-m .rlbar{padding:4cqw 4.4cqw 0}
.v-m .rlhead{font-size:4.2cqw}.v-m .rlhead h2{font-size:7cqw}
.v-m .meter{font-size:4cqw;margin-top:2.4cqw}.v-m .meter .segs{height:3.6cqw}.v-m .meter b{min-width:30cqw}
.v-m .pane{padding:2.6cqw 4.4cqw 4.4cqw}
.v-m .q{font-size:7.4cqw}.v-m .l{font-size:4.6cqw;margin-top:2.6cqw}
.v-m .in{font-size:6.2cqw;border-width:.6cqw}
.v-m .list button{font-size:6.2cqw;min-height:11cqw;padding:1cqw 2cqw}.v-m .list button small{font-size:4.2cqw}
.v-m .list .own,.v-m .list .own .in{font-size:5.4cqw}
.v-m .rowline{font-size:4.8cqw}.v-m .mini{font-size:5.4cqw;min-height:10cqw}
.v-m .act button{min-height:6.5cqw;font-size:5cqw}.v-m .act button:after{inset:-2.6cqw 0}.v-m .act button.back{flex-basis:18cqw}
.v-m .tt-tabs button{font-size:5cqw;min-height:11cqw;padding:1.2cqw 2.2cqw}.v-m .tt-tabs button small{font-size:3.4cqw}
.v-m .tt-grid{grid-template-columns:1fr}
.v-m .tt-page .tk{font-size:5.4cqw;min-height:10.4cqw}.v-m .tt-page .tk b{font-size:6cqw}
.v-m .tt-h{font-size:4.4cqw}.v-m .tt-h.big{font-size:6.4cqw}
.v-m .qs{font-size:4cqw}
.v-m .own1,.v-m .ownrow .in{font-size:5.4cqw}
.v-m .chip{font-size:5cqw}.v-m .chip button{font-size:4.6cqw}.v-m .tray{max-height:18cqw}
.v-m .heat{font-size:4.2cqw;gap:1.4cqw}.v-m .heat button{font-size:4.6cqw;min-height:10cqw}
.v-m .sum{font-size:5.2cqw}.v-m .note{font-size:4.6cqw}
.v-m .boot-head h2{font-size:14cqw}.v-m .boot-head p{font-size:5.2cqw}.v-m .boot-go{font-size:7.4cqw;padding:2.4cqw 5cqw}.v-m .boot-go small{font-size:4.4cqw}.v-m .boot-check{font-size:6.6cqw}
.v-m .stack{left:5%;top:37%;width:47%}
.v-m .stack:after{display:none}
.v-m .rcol{left:auto;right:4%;width:42%;top:38%;bottom:auto}
.v-m .side{position:absolute;left:5%;right:5%;top:auto;bottom:3%;flex-direction:row;justify-content:center;gap:4cqw;align-items:center;text-align:center}
.v-m .side>span{font-size:3.4cqw}.v-m .side .lbl{display:none}
.v-m .side .cnt{display:block;font-size:12cqw}
.v-m .side .btns{flex-direction:row}.v-m .side .btns button{width:14cqw;height:14cqw}

.v-m .lb-in{flex-direction:column;gap:18px}
.v-m .lb .pol{width:min(74vw,46vh)}
/* phone: David's own Polaroid starts below the close button so its top-right corner is not covered */
.v-m .lb .pol.own{width:auto;margin-top:62px;transform:rotate(-1deg)}
.v-m .lb .pol.own .own-pol{max-width:calc(100vw - 28px);max-height:calc(100svh - 84px)}
.v-m .lb-info{text-align:center}.v-m .lb-info h2{font-size:34px}.v-m .lb-nav{justify-content:center}
.v-m .steps{grid-template-columns:1fr;padding:56px 0 40px;gap:14px}
.v-m .faq{grid-template-columns:1fr;gap:20px;padding:44px 0 50px}
.v-m .faq h2{font-size:46px}
.v-m .wrap{padding:0 18px}
.v-m details p{padding-right:4px}
.v-m .fwrap{grid-template-columns:1fr;gap:14px}
.v-m .legal{justify-content:flex-start}

/* ================= "the radio works" badge ================= */
.trybadge{position:absolute;z-index:3;left:36%;top:13.4%;transform:rotate(-3deg);text-align:center;background:#b8106a;color:#fff;font:700 11px/1.15 "Chakra Petch";letter-spacing:.12em;padding:7px 11px 6px;border-radius:6px;box-shadow:0 0 18px rgba(255,63,164,.6),3px 3px 0 #000;pointer-events:none;animation:bob 1.8s ease-in-out infinite;transition:opacity 3s ease,filter 3s ease}
.trybadge b{display:block;color:#ffe6f3;font-weight:700}
.trybadge.gone{opacity:0;filter:blur(2px)}
@keyframes bob{50%{transform:rotate(-3deg) translateY(-3px)}}
.still .trybadge{animation:none}
.v-m .trybadge{left:31%;top:11.5%;animation:none;font-size:10px;padding:5px 9px 4px}

/* ================= the making screen (after "Make my preview track for free") ================= */
.act .make{font-size:4.2cqw;background:var(--cash);box-shadow:0 0 3cqw rgba(125,255,143,.5),inset 0 -.5cqw 0 rgba(0,0,0,.2)}
.pane.press{padding:1.6cqw 3.2cqw 2.4cqw}
.scr.pressing .meter{display:none}
.pr{--pc:#ffb347;--pd:rgba(255,179,71,.16);--pk:#ff4fa3;flex:1;min-height:0;display:flex;flex-direction:column;gap:.9cqw;font-family:"Big Shoulders Display",sans-serif;font-weight:700;color:var(--pc);text-shadow:0 0 1cqw rgba(255,179,71,.45)}
.pr-top{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4.4cqw;border-bottom:.4cqw solid var(--pc);padding:0 1cqw .3cqw;font-size:5.4cqw;line-height:1;letter-spacing:.02em}
.pr-top:before,.pr-top:after{content:"";position:absolute;bottom:-.4cqw;width:.4cqw;height:1.8cqw;background:var(--pc)}
.pr-top:before{left:0}.pr-top:after{right:0}
.pr-top .sq{position:absolute;top:-1cqw;width:4cqw;height:4cqw;background:var(--pc);box-shadow:0 0 1.4cqw var(--pc)}
.pr-top .sq:first-child{left:1cqw}.pr-top .sq:last-child{right:1cqw}
.pr-top span{position:relative;padding:0 1cqw;opacity:.85}
.pr-top span.on{opacity:1;color:#fff}
.pr-top span.on:before,.pr-top span.on:after{content:"";position:absolute;top:.4cqw;bottom:-.7cqw;width:1cqw;border:.4cqw solid var(--pc);border-bottom:0}
.pr-top span.on:before{left:-.4cqw;border-right:0}.pr-top span.on:after{right:-.4cqw;border-left:0}
.pr-top span.done:after{content:" ✓"}
.pr-subtabs{display:flex;justify-content:center;gap:4cqw;font-size:4cqw;opacity:.75}
.pr-subtabs span.on{opacity:1;color:#fff}
.pr-mode{text-align:center;font-size:3.4cqw;letter-spacing:.08em;color:var(--pk);text-shadow:0 0 1cqw rgba(255,79,163,.5)}
.pr-main{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:2cqw}
.pr-list{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--pc) transparent;padding-right:.6cqw}
.pr-list p{position:relative;display:flex;gap:1.6cqw;align-items:baseline;font-size:4.3cqw;line-height:1.08;padding:.45cqw 1cqw;color:var(--pc);overflow:hidden;font-family:"Big Shoulders Display";font-weight:700}
.pr-list p b{font-size:2.6cqw;flex:none;position:relative;z-index:1}
.pr-list p span{position:relative;z-index:1}
.pr-list p .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pc);opacity:0}
.pr-list p.now .fill{opacity:.8}
.pr-list p.now{background:var(--pd);color:var(--pc)}
.pr-list p.now span,.pr-list p.now b{color:#fff;text-shadow:0 0 .6cqw #000,0 .2cqw 0 #000}
.pr-list p.done{opacity:.7}
.pr-list p.done span:after{content:" ✓";color:var(--pk)}
.pr-list.lyr p{font-size:3.7cqw}
.pr-list.lyr p.tag{color:var(--pk);font-size:3.4cqw;letter-spacing:.12em;margin-top:.6cqw}
.pr-list.lyr p.dj{color:#9fe8ff}
.pr-list p.flowin{animation:flow .9s cubic-bezier(.2,.7,.2,1)}
@keyframes flow{from{opacity:0;transform:translateY(-2.4cqw);filter:blur(2px)}}
.pr-right{display:flex;flex-direction:column;gap:1.2cqw;min-height:0}
.pr-art{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:.6cqw;background:#000}
.pr-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pr-cover{position:absolute;inset:4%;background:center/cover;border:1cqw solid #efe9da;border-bottom-width:3.6cqw;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2cqw;opacity:var(--cov,0);filter:blur(calc((1 - var(--cov,0)) * 8px)) saturate(calc(var(--cov,0) * 1.2))}
/* r168: while the tape is still being made it has no cover, so the card is the Hustle MM logo on a dark neon panel, never the stock demo picture */
.pr-cover-brand{background:url(img/logo-hustle-mm-480.png) center 38%/62% auto no-repeat,radial-gradient(ellipse at 50% 30%,rgba(255,43,214,.35),rgba(7,4,13,0) 65%),linear-gradient(180deg,#120a24,#07040d)}
.pr-cover b{font-size:6cqw;line-height:.9;text-transform:uppercase;color:#fff;font-style:italic;text-shadow:0 0 1.2cqw var(--pink),0 .3cqw 0 #000}
.pr-cover small{font:600 2cqw/1.2 "Chakra Petch";letter-spacing:.12em;color:#fff;text-transform:uppercase;text-shadow:0 1px 2px #000}
.pr-static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;mix-blend-mode:screen;pointer-events:none}
.pr-stats{width:100%;border-collapse:separate;border-spacing:.4cqw;font-size:3.8cqw}
.pr-stats th,.pr-stats td{background:var(--pd);padding:.3cqw 1cqw;line-height:1.05}
.pr-stats th{text-align:left;font-weight:700}
.pr-stats td:nth-child(2){text-align:center;width:1%}
.pr-stats td:last-child{text-align:right;width:1%;color:#fff;min-width:7cqw}
.pr-chips{display:flex;gap:1.6cqw}
.pr-chips span{font-size:3.6cqw;padding:.2cqw 1.6cqw;background:var(--pd);color:var(--pc)}
.pr-chips span.on{background:var(--pc);color:#1a0e00;text-shadow:none}
.pr-status{display:flex;align-items:center;gap:1.6cqw;font-size:3.4cqw;color:#fff}
.pr-status span{flex:none}
.pr-pbar{flex:1;height:1.8cqw;border:.3cqw solid var(--pc);display:block}
.pr-pbar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pc) 0 1.2cqw,transparent 1.2cqw 1.6cqw)}
.pr-foot{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:.6cqw;font-size:4cqw}
.pr-foot span{background:var(--pd);padding:.4cqw 1.4cqw}
.pr-foot b{color:#fff}
.pr-ready{display:none;flex-direction:column;gap:.8cqw;text-align:center;font-family:"Chakra Petch";text-shadow:none}
.pr[data-phase="done"] .pr-ready{display:flex}
.pr[data-phase="done"] .pr-status,.pr[data-phase="done"] .pr-chips{display:none}
.pr-play{min-height:6.4cqw;font:700 3.6cqw/1 "Chakra Petch";letter-spacing:.06em;border-radius:.6cqw;background:var(--cash);color:#04130a;box-shadow:0 0 3cqw rgba(125,255,143,.55)}
.pr-buy{font:600 2.9cqw/1.3 "Chakra Petch";color:#fff;background:rgba(255,79,163,.18);border:.3cqw solid var(--pk);border-radius:.6cqw;padding:1cqw 1.6cqw}
.pr-buy b{color:var(--amb)}
.pr-ph{font-size:2.4cqw;color:#ffd23f}
.pr-again{align-self:center;font:600 2.8cqw/1 "Chakra Petch";color:#cfc6ff;border:.3cqw solid #3a4682;border-radius:.6cqw;padding:.8cqw 2cqw}
/* phone */
.v-m .pr-top{font-size:6.6cqw;gap:5cqw}.v-m .pr-top .sq{width:5cqw;height:5cqw}
.v-m .pr-subtabs{font-size:4.6cqw;flex-wrap:wrap;gap:1cqw 4cqw}.v-m .pr-mode{font-size:4.2cqw}
.v-m .pr-main{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.v-m .pr-right{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:2cqw;height:40cqw}
.v-m .pr-stats{font-size:4.4cqw}
.v-m .pr-list p{font-size:6cqw}.v-m .pr-list.lyr p{font-size:5.4cqw}.v-m .pr-list p b{font-size:3.4cqw}
.v-m .pr-chips span{font-size:4.6cqw}
.v-m .pr-status{font-size:4.2cqw;flex-wrap:wrap}.v-m .pr-pbar{flex-basis:100%;height:2.6cqw}
.v-m .pr-foot{font-size:4.4cqw;grid-template-columns:1fr 1fr}.v-m .pr-foot span:last-child{grid-column:1/3}
.v-m .pr-play{font-size:5cqw;min-height:10cqw}.v-m .pr-buy{font-size:4.2cqw}.v-m .pr-ph{font-size:3.4cqw}.v-m .pr-again{font-size:4.2cqw}
.v-m .act .make{font-size:5cqw}

/* ================= request line: taller free-text boxes with rolling hints ================= */
.ownlab{margin-top:.8cqw;margin-bottom:.4cqw}
.in.own2{position:relative;align-items:flex-start;padding:.6cqw 1.8cqw;min-height:13cqw}
.in.own2 textarea{all:unset;flex:1;min-width:0;min-height:11.4cqw;font:inherit;color:#fff;line-height:1.1;white-space:pre-wrap}
.roll{position:absolute;left:1.8cqw;right:1.8cqw;top:.6cqw;height:11.4cqw;overflow:hidden;pointer-events:none;color:#7f89c0;line-height:1.1}
.roll span{display:block;animation:rollin .6s cubic-bezier(.2,.7,.2,1)}
.roll span.first{color:#b9c2f2}
@keyframes rollin{from{opacity:0;transform:translateY(80%)}}
.in.own2.typing .roll{display:none}
.still .roll span{animation:none}
.vibrow{display:flex;gap:1.2cqw;align-items:stretch}
.vibrow .in{flex:1}
.mini.nost{min-height:auto;line-height:1.05;padding:0 1.6cqw;font-size:3.4cqw;border-color:#6b75a8}
.mini.nost[aria-pressed="true"]{background:#fff;color:#0b0d26;border-color:#fff}
.list.off{opacity:.3;pointer-events:none}
/* station + DJ colour sets */
#snd button{border-left:1.2cqw solid var(--sc)}
#snd button:before{content:none}
#snd button.on{background:color-mix(in srgb,var(--sc) 85%,#000);color:#05060a;box-shadow:0 0 2cqw color-mix(in srgb,var(--sc) 60%,transparent)}
#snd button.on small{color:#05060a}
.djline{display:flex;flex-wrap:wrap;align-items:center;gap:1cqw;margin-top:1cqw;font-size:3.4cqw;color:#cfc6ff}
.cset{display:inline-flex;align-items:center;gap:.8cqw;padding:.2cqw 1.2cqw;border-radius:.6cqw;background:color-mix(in srgb,var(--sc) 22%,transparent);border:.3cqw solid var(--sc);color:#fff}
.cset i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--sc);box-shadow:0 0 1cqw var(--sc)}
.djline .mini{min-height:5cqw;font-size:3.2cqw}
/* shout-out details: picked so far, hold to edit */
.picklab{margin-top:.4cqw;margin-bottom:.6cqw}
.picklab span{color:#8f97d6}
.tray{max-height:13cqw}
.tray .chip{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform .15s}
.chip.hold{animation:holdpulse .8s linear}
@keyframes holdpulse{to{box-shadow:0 0 0 .6cqw #fff}}
.chip.edit{background:#fff;color:#0b0d26;padding:0}
.chip.edit input{all:unset;font:inherit;padding:.2cqw 1.2cqw;min-width:24cqw;color:#0b0d26}
.tray .empty{font-size:3.4cqw;color:#6b75a8}
.tt-page .tk.hold{animation:holdpulse .8s linear}
.ownrow .in.own2{min-height:11cqw}
.ownrow .in.own2 textarea{min-height:9.6cqw}
.note2{color:var(--cy);line-height:1.15}
#heat{margin-top:.4cqw}
.v-m .in.own2{min-height:17cqw}.v-m .in.own2 textarea{min-height:15cqw;font-size:5.2cqw}.v-m .roll{height:15cqw;font-size:5.2cqw}
.v-m .djline{font-size:4.4cqw}.v-m .mini.nost{font-size:4.2cqw}
.v-m .tray{max-height:20cqw}

/* monitor expand / shrink (desktop) */
.mzoom{position:absolute;z-index:4;right:8px;top:8px;width:34px;height:34px;border-radius:8px;background:rgba(10,7,14,.85);border:1px solid #5a4a62;color:#fff;font-size:18px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.mzoom:hover{border-color:var(--amb);color:var(--amb)}
.v-m .mzoom{display:none}
/* FIRST 100 SALES */
.first100{background:#ffd23f;color:#1a1200;font-weight:700;padding:1px 6px;border-radius:3px;box-shadow:0 0 12px rgba(255,210,63,.7);animation:f100 2s ease-in-out infinite}
@keyframes f100{50%{box-shadow:0 0 22px rgba(255,210,63,1)}}
.still .first100{animation:none}
.ph>span{position:relative;z-index:0}
.hl100,.step p b.hl100{color:#1a1200;background:#ffd23f;padding:0 4px;border-radius:3px}

/* picked so far: two rows on screen, scroll for more */
.tray{max-height:calc(2 * 4.8cqw + 1cqw)!important;overflow-y:auto;align-content:flex-start}
.tray .chip{height:4.8cqw;line-height:1}
.v-m .tray{max-height:calc(2 * 6.6cqw + 1cqw)!important}.v-m .tray .chip{height:6.6cqw}
/* category tabs: arrows (and wheel or drag) to see more */
.tt-wrap{display:flex;align-items:stretch;gap:.6cqw}
.tt-wrap .tt-tabs{flex:1;min-width:0;cursor:grab}
.tt-arr{flex:none;width:4.2cqw;font-family:"VT323";font-size:3.6cqw;color:#ffd23f;border:.3cqw solid #ffd23f;background:#0b0d26;margin:.4cqw 0 .6cqw}
.tt-arr:disabled{opacity:.25}
.v-m .tt-arr{width:7cqw;font-size:5.4cqw}

/* ================= the request line's own column (its text scales with this, not the whole screen) ================= */
.rlmain{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;container-type:inline-size}
.rlside{display:none}
/* desktop zoom: the monitor grows wider and taller, the request line keeps its size and a live summary fills the new space */
.monitor.big{width:1010px;height:610px;top:318px;z-index:6}
.big .scr{display:grid;grid-template-columns:450px minmax(0,1fr)}
.big .rlmain{height:100%}
.big .rlside{display:block;position:relative;z-index:1;container-type:inline-size;overflow-y:auto;scrollbar-width:thin;padding:3.2cqw 3.4cqw;border-left:2px solid rgba(120,140,255,.28);background:rgba(8,8,30,.35)}
.big .scr.boot .rlside{display:none}
.big .scr.boot{grid-template-columns:1fr}
.rlside h3{font:400 4.4cqw/1 "VT323";color:#ffd23f;letter-spacing:.06em;margin-bottom:2cqw}
.rlside .sx-row{grid-template-columns:24cqw 1fr}
.rlside .sx-row label,.rlside .sx-v{font-size:3.4cqw}
.rlside .sx-row label{font-size:2.8cqw}
.rlside .tipx{font-size:2.8cqw;color:#8d96c9;margin-top:2cqw}
/* ================= check your request ================= */
.sumx{flex:1;min-height:0;overflow-y:auto;margin-top:1cqw;padding-right:1cqw;scrollbar-width:thin}
.sx-row{display:grid;grid-template-columns:19cqw 1fr;gap:1.2cqw;align-items:start;padding:1cqw 0;border-bottom:.25cqw dashed rgba(120,140,255,.25)}
.sx-row label{font:400 2.9cqw/1.25 "VT323";color:#ffb347;letter-spacing:.08em;padding-top:.8cqw}
.sx-v{font:400 3.6cqw/1.2 "VT323";color:#fff;display:flex;flex-wrap:wrap;gap:.8cqw;align-items:center;min-width:0}
.sx-v input,.sx-v textarea{width:100%;font:400 3.6cqw/1.2 "VT323";color:#fff;background:rgba(10,12,40,.85);border:.3cqw solid #3a4682;border-radius:.6cqw;padding:.5cqw 1cqw;resize:none}
.sx-v input:focus,.sx-v textarea:focus{outline:none;border-color:var(--cy)}
.sx-v .bad{border-color:#ff5a4e}
.sx-v .chg{font:400 2.9cqw/1 "VT323";color:#05060a;background:var(--cy);border-radius:.5cqw;padding:.5cqw 1cqw;margin-left:auto}
.sx-v .chip{font-size:3.2cqw}
.sx-v .hb{font:400 3cqw/1 "VT323";padding:.6cqw 1cqw;border:.3cqw solid #ff8c1a;color:#ff8c1a;border-radius:.5cqw}
.sx-v .hb.on{background:#ff8c1a;color:#1a0e00}
.sx-v .dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--sc,#fff);box-shadow:0 0 1cqw var(--sc,#fff);flex:none}
.v-m .sx-row{grid-template-columns:24cqw 1fr}.v-m .sx-row label{font-size:4cqw}.v-m .sx-v,.v-m .sx-v input,.v-m .sx-v textarea{font-size:5cqw}
.v-m .sx-v .chg,.v-m .sx-v .hb{font-size:4.2cqw}.v-m .sx-v .chip{font-size:4.6cqw}
.sx-t{flex:1 1 0;min-width:0}
.nextx{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:2.4cqw}
.nextx li{counter-increment:n;position:relative;padding-left:7cqw;font:400 3.6cqw/1.3 "VT323";color:#d8d4ff}
.nextx li:before{content:"0" counter(n);position:absolute;left:0;top:0;font-size:4.4cqw;color:var(--cash)}
.nextx b{font-weight:400;color:#fff}

/* phone first screen: one screen tall, radio anchored to the bottom and enlarged (its outer frame trimmed) */
.v-m .firstscreen{min-height:calc(100svh - 14px);display:flex;flex-direction:column}
.v-m .firstscreen .hero{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0;padding:6px 0 10px}
.v-m .firstscreen h1{font-size:clamp(30px,5.2svh,50px)}
.v-m .firstscreen .cta{margin-top:clamp(8px,1.8svh,18px);padding:clamp(8px,1.4svh,14px) 10px}
.v-m .firstscreen .cta b{font-size:clamp(21px,3.3svh,28px)}
.v-m .firstscreen .radio{margin:0 calc(-16px - 2vw);width:auto;flex:none}
.v-m .above{margin-top:22px}
@media (max-height:680px){.v-m .firstscreen .paynote,.v-m .firstscreen .starlab{display:none}.v-m .firstscreen .logo{font-size:32px}.v-m .firstscreen .cash{font-size:32px}.v-m .firstscreen .stars button{font-size:18px;min-height:24px}}
@media (max-height:600px){.v-m .firstscreen h1{font-size:26px}.v-m .firstscreen .cta small{display:none}.v-m .firstscreen .hero{padding:2px 0 6px}}

/* phone: the hero photo reaches down to the buttons above the radio */
.v-m .bg{height:max(430px,calc(100svh - 370px))}
.v-m .bg:after{background:linear-gradient(180deg,rgba(7,4,13,.4) 0,rgba(7,4,13,.15) 32%,rgba(7,4,13,.7) 78%,#07040d 100%)}
.v-m .firstscreen .above{margin:10px 0 10px}
/* radio and glove box zoom buttons: landscape phones and tablets only */
.uz{display:none}
.radio .uz{left:8px;right:auto}
.v-land .uz{display:block}
.v-land .mzoom{width:84px;height:84px;font-size:42px;border-radius:14px;border-width:2px}
.v-land .zoomed .mzoom{display:none}
.v-land .back2{left:auto;right:12px;top:12px;width:52px;min-height:52px;padding:0;border-radius:10px;font-size:0;transform:translate(0,-90px)}
.v-land .back2:before{content:"⤡";font-size:26px;letter-spacing:0}
.v-land .zoomed .back2{transform:none}
.v-land .stage{min-height:300px}

/* song ready: the stat boxes go, the full lyrics run the width of the screen and scroll */
.pr[data-phase="done"] .pr-main{grid-template-columns:1fr;grid-template-rows:1fr}
.pr[data-phase="done"] .pr-right,.pr[data-phase="done"] .pr-foot{display:none}
.pr[data-phase="done"] .pr-list{padding-right:1.4cqw}
.pr[data-phase="done"] .pr-list.lyr p{font-size:4.2cqw;line-height:1.15}
.pr[data-phase="done"] .pr-list.lyr p.tag{font-size:3.6cqw}
.pr-playrow{display:flex;gap:1.4cqw;align-items:stretch}
.pr-playrow .pr-play{flex:1}
.pr-thumb{flex:none;width:12cqw;aspect-ratio:1;border-radius:.6cqw;background:center/cover;position:relative;overflow:hidden;box-shadow:0 0 0 .3cqw var(--pk)}
.pr-thumb b{position:absolute;left:0;right:0;bottom:0;font:700 2.2cqw/1.1 "Big Shoulders Display";color:#fff;text-transform:uppercase;padding:.4cqw;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.v-m .pr[data-phase="done"] .pr-main{grid-template-rows:1fr}
.v-m .pr[data-phase="done"] .pr-list.lyr p{font-size:5.4cqw}
.v-m .pr-thumb{width:16cqw}.v-m .pr-thumb b{font-size:3cqw}

/* ================= request line: warnings, the DJ script page, editable suggestions, static-in ================= */
/* a gentle hint under a field when Next is pressed without it: warm amber, not an alarm */
.fhint{margin-top:.8cqw;padding:.6cqw 1.4cqw;font:400 3.4cqw/1.2 "VT323";color:#ffd9a0;background:rgba(255,179,71,.12);border-left:.6cqw solid var(--amb);border-radius:.4cqw;text-shadow:none}
.fhint:before{content:"☞ ";color:var(--amb)}
.fhint[hidden]{display:none}
.v-m .fhint{font-size:4.6cqw;padding:1cqw 2cqw}
.hint2{font:400 3.2cqw/1.2 "VT323";color:#8d96c9;margin:0 0 .8cqw}
.scrollx{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable;padding-right:1cqw}
/* two by two: OCCASION | FROM, then STATION | DJ. Columns may shrink below their content, so a long FROM stays inside the panel */
.intro3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2cqw;margin-bottom:1.4cqw}
.intro3 .in{min-width:0;flex-direction:column;align-items:stretch;gap:0;padding:.6cqw 1.4cqw}
.intro3 input{width:100%;text-overflow:ellipsis}
.intro3 .fl{display:block;font:400 2.8cqw/1 "VT323";color:#ffb347;letter-spacing:.08em;margin-bottom:.4cqw}
.intro3 select{width:100%;min-width:0;text-overflow:ellipsis;font:400 3.6cqw/1.2 "VT323";color:#fff;background:rgba(10,12,40,.85);border:.3cqw solid #3a4682;border-radius:.6cqw;padding:.5cqw 1cqw}
.sitems{position:relative;display:flex;flex-direction:column;gap:.8cqw;margin-bottom:1.4cqw;min-height:6cqw}
/* a line: grip · tick · tag and text · SWAP drop-down. Kept lines glow green; left-out lines are dashed, dim and struck through */
.sitem{display:flex;align-items:center;gap:1.2cqw;padding:.9cqw 1.2cqw;border:.3cqw dashed #3a4682;background:rgba(18,22,64,.45);border-radius:.6cqw;transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .2s,box-shadow .2s,border-color .2s,background .2s}
.sitem:not(.on) .stxt{color:#8d96c9;text-decoration:line-through;text-decoration-color:rgba(141,150,201,.6)}
.sitem.on{border-style:solid;border-color:var(--cash);background:rgba(18,40,40,.55);box-shadow:inset .6cqw 0 0 var(--cash)}
.sitem .grip{flex:none;touch-action:none;cursor:grab;font-size:4.4cqw;line-height:1;color:#8d96c9;padding:.6cqw .5cqw;border-radius:.4cqw;user-select:none;-webkit-user-select:none}
.sitem .grip:hover,.sitem .grip:focus-visible{color:var(--cy);outline:.3cqw solid var(--cy)}
.sitem .tick{flex:none;font-size:4cqw;line-height:1;color:#8d96c9;min-width:4cqw;text-align:center}
.sitem.on .tick{color:var(--cash);text-shadow:0 0 1cqw rgba(125,255,143,.6)}
.sbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2cqw}
.stag{font:400 2.5cqw/1 "VT323";letter-spacing:.08em;color:#ffb347}
.sitem:not(.on) .stag{color:#8d96c9}
.swap{position:relative;flex:none;display:grid;place-items:center;font:400 2.8cqw/1 "VT323";color:var(--cy);border:.3cqw solid var(--cy);border-radius:.4cqw;padding:.6cqw .9cqw;cursor:pointer;white-space:nowrap}
.swap select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:400 3.4cqw "VT323"}
.swap:focus-within{box-shadow:0 0 0 .4cqw rgba(61,240,255,.35)}
.sempty{font:400 3cqw/1.2 "VT323";color:#8d96c9;padding:1cqw;border:.3cqw dashed #2c3670;border-radius:.6cqw}
/* dragging: the line lifts and follows the pointer; a dashed gap shows where it will land */
.sitem.lifted{z-index:20;pointer-events:none;cursor:grabbing;transition:box-shadow .15s,background .15s;transform:scale(1.03) rotate(-.6deg);box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.6),0 0 0 .4cqw var(--cy),0 0 3cqw rgba(61,240,255,.45);background:rgba(24,30,90,.97);opacity:.97}
.sgap{flex:none;border:.4cqw dashed var(--cy);border-radius:.6cqw;background:repeating-linear-gradient(135deg,rgba(61,240,255,.10) 0 1cqw,transparent 1cqw 2cqw);box-shadow:inset 0 0 2cqw rgba(61,240,255,.2)}
body.sorting,body.sorting *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.tt-why{font:400 2.7cqw/1.2 "VT323";color:#8d96c9;letter-spacing:.06em;margin:-.4cqw 0 .8cqw}
.v-m .stag{font-size:3.4cqw}.v-m .swap{font-size:3.8cqw;padding:0 1.6cqw;min-height:10cqw;min-width:12cqw}.v-m .sitem .tick{font-size:5.4cqw;min-width:8cqw;min-height:10cqw}.v-m .sitem .grip{min-height:10cqw;min-width:6cqw;display:grid;place-items:center}.v-m .sempty{font-size:4.2cqw}.v-m .tt-why{font-size:3.6cqw}
.stxt{font:400 3.6cqw/1.25 "VT323";color:#fff}
.tmore{margin-top:1cqw;font:400 3.2cqw/1 "VT323";color:#ffd23f;border:.3cqw solid #ffd23f;padding:.8cqw 1.6cqw;border-radius:.5cqw;background:transparent}
.tk.edit{padding:.3cqw;cursor:text}
.tk.edit input{width:100%;font:400 3.6cqw/1.2 "VT323";color:#fff;background:#0b0d26;border:.3cqw solid var(--cy);border-radius:.4cqw;padding:.4cqw .8cqw}
.tk.edit input:focus{outline:none;box-shadow:0 0 1.4cqw rgba(61,240,255,.4)}
.tk{user-select:none;-webkit-user-select:none}
.chip[class*="hold"],.tk.hold{box-shadow:0 0 0 .4cqw var(--amb)}
/* the DJ script page appears through static */
.pane.static-in::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),#0b0a1a;animation:staticOut .7s steps(7,end) forwards}
@keyframes staticOut{0%{opacity:1;background-position:0 0}30%{opacity:.85;background-position:0 -9px}60%{opacity:.4;background-position:0 4px}100%{opacity:0;background-position:0 0}}
.v-m .sitem .stxt{font-size:4.6cqw}.v-m .sitem .grip{font-size:5.4cqw}.v-m .intro3 .fl{font-size:3.6cqw}.v-m .intro3 select,.v-m .intro3 input{font-size:5cqw}
.still .pane.static-in::after{display:none}

/* ================= song ready: a celebration, then the play and buy row ================= */
.pr-hero{position:relative;overflow:hidden;text-align:center;padding:2.4cqw 1cqw 2cqw;border-radius:1cqw;background:radial-gradient(60% 120% at 50% 0%,rgba(255,79,163,.35),rgba(10,8,30,.2) 70%);animation:heroIn .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes heroIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pr-hero b{position:relative;display:block;font:900 7.4cqw/1 "Big Shoulders Display";letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(90deg,#ffd23f,#ff4fa3,#3df0ff,#7dff8f,#ffd23f) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 1.4cqw rgba(255,79,163,.6));animation:shine 2.4s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.pr-hero small{position:relative;display:block;margin-top:.8cqw;font:600 2.8cqw/1.2 "Chakra Petch";color:#fff;letter-spacing:.08em;text-transform:uppercase}
.pr-ring{position:absolute;left:50%;top:50%;width:70cqw;height:70cqw;margin:-35cqw 0 0 -35cqw;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,210,63,.35),transparent 40%);animation:spin 3s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.cf{position:absolute;top:-4cqw;left:var(--x);width:1.1cqw;height:2.2cqw;background:var(--c);border-radius:.3cqw;animation:fall 2.6s var(--d) linear infinite;pointer-events:none}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(34cqw) rotate(540deg);opacity:0}}
.pr-row{display:flex;gap:1.4cqw;margin-top:1.4cqw}
.pr-row .pr-play{flex:1;min-height:6.4cqw}
/* the finished screen: PLAY above BUY (round 5: BUY opens the checkout, where the consent box is) */
.pr-row-consent{flex-direction:column;gap:.8cqw}
.pr-row-consent .pr-play,.pr-row-consent .pr-buy{flex:none}
.pr-row .pr-buy{flex:1;min-height:6.4cqw;font:700 3.4cqw/1 "Chakra Petch";letter-spacing:.06em;color:#1a0e00;background:var(--amb);border:0;border-radius:.6cqw;box-shadow:0 0 3cqw rgba(255,179,71,.5);text-align:center}
.pr-info{font:400 3cqw/1.35 "Chakra Petch";color:#e6e2ff;margin-top:1.2cqw;text-shadow:none}
.pr-ready .pr-ph{margin-top:.6cqw}
.v-m .pr-hero b{font-size:10cqw}.v-m .pr-row .pr-buy,.v-m .pr-row .pr-play{font-size:4.2cqw}

/* The play screen (the cassette player on the request-line monitor) and My tracks moved to tracks.css (tracks-r18). */
.pr-ready{background:linear-gradient(180deg,rgba(12,10,36,.0),#0c0a24 18%);padding-top:1.4cqw}

/* ================= round 3 ================= */
/* one-line labels: never wrap; fitLines() in night-shift-v3.js steps the size down if a narrow screen needs it */
.one{white-space:nowrap;overflow:hidden;text-overflow:clip}
/* roast level now sits on the first page, under "Something else?" */
.roastlab{margin-top:1.2cqw;margin-bottom:.2cqw}
.roastlab span{color:#8d96c9}
.pane[data-p="1"] .heat{margin-top:.4cqw}
.pane[data-p="1"] .heat button{min-height:5.6cqw}
.v-m .pane[data-p="1"] .heat button{min-height:8.4cqw;font-size:4.2cqw}
/* details: one instruction line, the n/8 counter, greyed-out tiles once 8 are picked */
#dhint{margin-top:.8cqw;margin-bottom:.4cqw;text-transform:none}
#tcount{text-transform:none}
#tcount.full{color:#ff8f87}
.tt-page .tk.full{opacity:.32;filter:grayscale(1);cursor:not-allowed}
.tt-page .tk.full:hover{border-color:#2c3670}
.ownrow.full{opacity:.4}
#cap-hint{margin:0 0 .8cqw}
/* summary heading: "summary" and "tap anything to change it" in the same display type, on one line */
.sumq{display:flex;align-items:baseline;gap:2cqw}
.sumq .sumtap{font:inherit;color:var(--amb)}
/* summary's DJ script row: the counts and CHANGE share one line */
.sx-one{white-space:nowrap}

/* ================= the DJ script on the loading screen, in a still haze of static ================= */
/* --haze is one frame of static drawn once by night-shift-v3.js; nothing here animates */
.haze{position:relative;isolation:isolate;background:rgba(10,8,34,.82);backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1)}
.haze:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--haze) 0 0/180px auto repeat;image-rendering:pixelated;opacity:.16;mix-blend-mode:screen;border-radius:inherit}
.haze:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(4,3,16,.55))}
/* the bar sits where the footer counters were (they are decoration), so the status line always stays on screen */
.scripting .pr-foot,.scripting .pr-chips{display:none!important}
.djs-call{flex:none;margin-top:1cqw;border-radius:1cqw;border:.4cqw solid #3a4682;padding:.6cqw;text-align:center}
.djs-call[hidden]{display:none}
.djs-call button{width:100%;font:400 4cqw/1.05 "VT323";color:#cfc6ff;letter-spacing:.04em;padding:.5cqw 1cqw;border-radius:.6cqw}
.djs-call button small{display:block;font-size:2.6cqw;color:#8f97d6;margin-top:.3cqw}
.djs-call button:disabled{cursor:progress}
.djs-call.ready{border-color:#9fe8ff;box-shadow:0 0 3cqw rgba(159,232,255,.35)}
.djs-call.ready button{color:#9fe8ff;text-shadow:0 0 1cqw rgba(159,232,255,.6)}
.djs-call.ready button small{color:#d8f6ff}
.djs-call.ready button:hover{background:rgba(159,232,255,.08)}
/* while the script is written (David, 28 Oct): the label blinks as the zoomed desktop's does, and a bar fills to the
   percentage in the small line (paintScriptCall). The haze behind stays still. */
.djs-call .djs-wl{display:block;animation:djsblink 1.4s steps(2,start) infinite}
.djs-call .djs-bar{display:block;height:1.6cqw;margin:.6cqw 1cqw 0;border:.3cqw solid #8f97d6;border-radius:.4cqw;overflow:hidden}
.djs-call .djs-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#9fe8ff 0 1.2cqw,transparent 1.2cqw 1.6cqw);transition:width .2s linear}
.djs-call .djs-pct{color:#e9e4ff}
.still .djs-call .djs-wl{animation:none}
/* the script opened over the making screen (zoomed-out desktop and phone) */
.djs-view{position:absolute;inset:0;z-index:7;display:flex;padding:1.4cqw}
.djs-view[hidden]{display:none}
.djs-in{flex:1;min-height:0;display:flex;flex-direction:column;border:.4cqw solid #9fe8ff;border-radius:1cqw;padding:2.4cqw 2.8cqw;box-shadow:0 0 4cqw rgba(159,232,255,.25)}
.djs-in .djs-lines{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:1cqw}
.djs-in .act{margin-top:1.4cqw}
.djs-in .act button.back{flex:1}
.djs-h,.djs-side h3{font:400 5.4cqw/1 "VT323";color:#9fe8ff;letter-spacing:.06em;text-shadow:0 0 1.4cqw rgba(159,232,255,.6)}
.djs-who{font:400 2.8cqw/1.2 "VT323";color:#8f97d6;letter-spacing:.08em;margin:.6cqw 0 1.4cqw}
.djs-lines p{font:400 3.8cqw/1.25 "VT323";color:#e9e4ff;margin-bottom:.9cqw}
.djs-lines p b{font-weight:400;color:#9fe8ff}
.djs-lines p.tag{font-size:3.2cqw;color:#05060a;background:var(--amb);display:inline-block;padding:0 1cqw;letter-spacing:.08em;margin-top:.8cqw}
.djs-lines p.dj{color:#fff}
.djs-lines p.song{text-align:center;color:var(--pink);letter-spacing:.12em;margin:1.4cqw 0;text-shadow:0 0 1cqw rgba(255,63,164,.6)}
/* zoomed desktop: the script fills the right-hand column, so no bar or overlay there */
.big .rlside:has(.djs-side){padding:0;border-left-color:rgba(159,232,255,.35)}
.djs-side{min-height:100%;padding:3.2cqw 3.4cqw}
.djs-side h3{font-size:4.6cqw;margin-bottom:0}
.djs-wait{margin-top:3cqw;font:400 4.4cqw/1.1 "VT323";color:#cfc6ff}
.djs-wait2{margin-top:1.4cqw;font:400 3.4cqw/1.3 "VT323";color:#8f97d6}
.big .djs-call,.big .djs-view{display:none!important}
.big .scripting .pr-foot,.big .scripting .pr-chips{display:revert!important}
/* the status line: it wraps inside the screen instead of running off the right-hand edge */
.pr-status span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.v-m .djs-call button{font-size:5.2cqw}.v-m .djs-call button small{font-size:3.6cqw}
.v-m .djs-h{font-size:7cqw}.v-m .djs-who{font-size:3.8cqw}
.v-m .djs-lines p{font-size:5.2cqw}.v-m .djs-lines p.tag{font-size:4.4cqw}
/* once the song is ready the bar slims down to one line, so the lyrics keep their room */
.pane.press:has(.pr[data-phase="done"]) .djs-call small{display:none}
/* "summary" and its tap line are set in capitals like every other heading on the monitor; remove this line for lower case */
.sumq{text-transform:uppercase}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ===== 06-night-shift-v3-newmobile.html only: phones show the preview 1 radio images =====
   The page's inline script sets html.mock-p (portrait phone) or html.mock-l (landscape phone); no other page sets them,
   so the desktop and the original page are untouched. */
/* portrait: the tall radio image runs the full width of the phone (390 wide shows it 390 x 844) */
.mock-p.v-m .firstscreen .radio{margin-left:-16px;margin-right:-16px}
/* small landscape phones (700 wide or less, e.g. 667 x 375) get the phone layout: same full width, so no side is cut off */
.mock-l.v-m .firstscreen .radio{margin-left:-16px;margin-right:-16px}
/* the live LCD, needle, badge and knob images were cut to fit the original photo; on the preview 1 images they land in
   the wrong places, so they are hidden. The invisible tap areas stay. */
.mock-p #radio .nrbadge,.mock-p #radio .lcd,.mock-p #radio .needle,.mock-p #radio .livebar,
.mock-l #radio .nrbadge,.mock-l #radio .lcd,.mock-l #radio .needle,.mock-l #radio .livebar{display:none}
.mock-p #radio .knob,.mock-l #radio .knob{background:none}

/* ================= desktop: the DJ script made prominent (PR 48 dual screen + PR 50 haze, merged) ================= */
/* 1. Zoomed desktop, "your DJ script" step: the editor gets the whole monitor, the intro and outro side by side and the
      sign-off pinned at the bottom in large type, so every part of the script is on screen without scrolling.
      The request line's text scales with its column (cqw); the column is now about twice as wide, so --k brings the
      units back: calc(N * var(--k)) here is "N cqw of the old column". Lines are drawn larger than before (x1.2). */
.big .scr.s5{grid-template-columns:1fr}
.big .scr.s5 .rlside{display:none}
.big .scr.s5 .rlmain{--k:.4815}
.big .scr.s5 .rlbar{padding:calc(2.2cqw * var(--k)) calc(3.6cqw * var(--k)) 0}
.big .scr.s5 .rlhead{font-size:calc(3.3cqw * var(--k))}
.big .scr.s5 .rlhead .tag{padding:0 calc(1.2cqw * var(--k))}
.big .scr.s5 .rlhead h2{font-size:calc(5.6cqw * var(--k))}
.big .scr.s5 .meter{gap:calc(1.6cqw * var(--k));margin-top:calc(1cqw * var(--k));font-size:calc(3cqw * var(--k))}
.big .scr.s5 .meter .segs{gap:calc(.4cqw * var(--k));height:calc(2.6cqw * var(--k))}
.big .scr.s5 .meter b{min-width:calc(25cqw * var(--k))}
.big .scr.s5 .pane[data-p="5"]{padding:calc(1.4cqw * var(--k)) calc(3.6cqw * var(--k)) calc(2.4cqw * var(--k));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:calc(3cqw * var(--k))}
.big .scr.s5 .pane[data-p="5"]:not(.on){display:none}
/* the heading and its DRAG ⠿ TO REORDER tag, larger and brighter */
.big .scr.s5 .pane[data-p="5"] > .q{grid-column:1/3;display:flex;align-items:baseline;gap:calc(3cqw * var(--k));font-size:calc(6.4cqw * var(--k));margin-bottom:0}
.big .scr.s5 .pane[data-p="5"] > .q .qs{float:none;margin:0 0 0 auto;font-size:calc(4.4cqw * var(--k));color:#05060a;background:#ffd23f;padding:0 calc(1.4cqw * var(--k));border-radius:calc(.5cqw * var(--k));letter-spacing:.06em;text-shadow:none}
.big .scr.s5 .pane[data-p="5"] > .hint2{grid-column:1/3;font-size:calc(3.8cqw * var(--k));margin:calc(.4cqw * var(--k)) 0 calc(1cqw * var(--k));color:#b9c0ee}
/* the scroll box becomes a grid: fields across the top, INTRO | OUTRO, then the sign-off */
.big .scr.s5 .pane[data-p="5"] .scrollx{grid-column:1/3;grid-row:3;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto;column-gap:calc(3cqw * var(--k));overflow:visible;padding-right:0;scrollbar-gutter:auto}
.big .scr.s5 .scrollx > .l{margin-top:calc(1cqw * var(--k));font-size:calc(3.8cqw * var(--k))}
.big .scr.s5 .scrollx > .l:nth-of-type(1){grid-column:1/3;grid-row:1}
.big .scr.s5 .intro3{grid-column:1/3;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.2cqw * var(--k));margin-bottom:0}
.big .scr.s5 .intro3 .in{padding:calc(.5cqw * var(--k)) calc(1.4cqw * var(--k));font-size:calc(4.2cqw * var(--k));border-width:calc(.4cqw * var(--k));border-radius:calc(.8cqw * var(--k))}
.big .scr.s5 .intro3 .fl{font-size:calc(3cqw * var(--k));margin-bottom:calc(.3cqw * var(--k))}
.big .scr.s5 .intro3 select{font-size:calc(4cqw * var(--k));padding:calc(.3cqw * var(--k)) calc(1cqw * var(--k));border-width:calc(.3cqw * var(--k));border-radius:calc(.6cqw * var(--k))}
.big .scr.s5 .scrollx > .l:nth-of-type(2){grid-column:1;grid-row:3}
.big .scr.s5 .scrollx > .l:nth-of-type(3){grid-column:2;grid-row:3}
.big .scr.s5 #intro-list{grid-column:1;grid-row:4}
.big .scr.s5 #outro-list{grid-column:2;grid-row:4}
.big .scr.s5 .scrollx > .l:nth-of-type(4){grid-column:1/3;grid-row:5}
.big .scr.s5 .scrollx > .in:last-child{grid-column:1/3;grid-row:6}
/* the two lists: each scrolls on its own only if it is very long (eight details picked) */
.big .scr.s5 .sitems{min-height:0;overflow-y:auto;scrollbar-width:thin;align-content:start;gap:calc(.8cqw * var(--k));margin:calc(.6cqw * var(--k)) 0 0;padding:0 calc(.6cqw * var(--k)) calc(.6cqw * var(--k)) 0}
.big .scr.s5 .sitem{gap:calc(1.1cqw * var(--k));padding:calc(.7cqw * var(--k)) calc(1.1cqw * var(--k));border-width:calc(.3cqw * var(--k));border-radius:calc(.6cqw * var(--k))}
.big .scr.s5 .sitem.on{box-shadow:inset calc(.6cqw * var(--k)) 0 0 var(--cash)}
.big .scr.s5 .sitem .grip{font-size:calc(5cqw * var(--k));padding:calc(.6cqw * var(--k)) calc(.5cqw * var(--k))}
.big .scr.s5 .sitem .tick{font-size:calc(4.6cqw * var(--k));min-width:calc(4.4cqw * var(--k))}
.big .scr.s5 .stag{font-size:calc(2.8cqw * var(--k))}
.big .scr.s5 .stxt{font-size:calc(4.3cqw * var(--k));line-height:1.12}
.big .scr.s5 .swap{font-size:calc(3cqw * var(--k));padding:calc(.6cqw * var(--k)) calc(.8cqw * var(--k));border-width:calc(.3cqw * var(--k))}
.big .scr.s5 .sempty{font-size:calc(3.4cqw * var(--k));padding:calc(1cqw * var(--k))}
.big .scr.s5 .sgap{border-width:calc(.4cqw * var(--k))}
/* the sign-off: the last thing the DJ says, pinned at the bottom in large type */
.big .scr.s5 .scrollx > .l:nth-of-type(4){color:#9fe8ff;font-size:calc(4cqw * var(--k));letter-spacing:.08em}
.big .scr.s5 .scrollx > .in:last-child{font-size:calc(6cqw * var(--k));padding:calc(.6cqw * var(--k)) calc(2cqw * var(--k));border:calc(.5cqw * var(--k)) solid #9fe8ff;border-radius:calc(.8cqw * var(--k));box-shadow:0 0 calc(3cqw * var(--k)) rgba(159,232,255,.3);color:#fff}
.big .scr.s5 .pane[data-p="5"] > .act{grid-column:1/3;grid-row:4;margin-top:calc(1.4cqw * var(--k));gap:calc(1.6cqw * var(--k))}
.big .scr.s5 .pane[data-p="5"] > .act button{min-height:calc(5cqw * var(--k));font-size:calc(4cqw * var(--k));border-radius:calc(.8cqw * var(--k))}
.big .scr.s5 .pane[data-p="5"] > .act button.back{flex:0 0 calc(13cqw * var(--k));border-width:calc(.4cqw * var(--k))}

/* 2. Zoomed desktop, making screen: the right-hand YOUR DJ SCRIPT column. Larger type; the lines scroll if they must
      and the sign-off is pinned to the bottom of the panel in large, clear type, so it is always on screen. */
.big .rlside:has(.djs-side){overflow:hidden}
.big .djs-side{height:100%;min-height:0;display:flex;flex-direction:column;padding:2.6cqw 3.4cqw 2.4cqw}
.big .djs-side h3{font-size:6cqw;letter-spacing:.08em}
.big .djs-side .djs-who{font-size:3.4cqw;margin:.6cqw 0 1.2cqw;color:#aab1e8}
.big .djs-side .djs-lines{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9fe8ff transparent;padding-right:1.2cqw}
/* --dz (set by fitScriptSide) shrinks the lines until the whole intro and outro are on screen; only a script too long even
   at the smallest size scrolls, and only then does the bottom fade (.more) show */
.big .djs-side .djs-lines.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3cqw),rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 calc(100% - 3cqw),rgba(0,0,0,.35))}
.big .djs-side .djs-lines p{font-size:calc(4.3cqw * var(--dz,1));line-height:1.18;margin-bottom:calc(1cqw * var(--dz,1))}
.big .djs-side .djs-lines p.tag{font-size:calc(3.4cqw * var(--dz,1));margin-top:calc(.6cqw * var(--dz,1))}
.big .djs-side .djs-lines p.song{margin:calc(1cqw * var(--dz,1)) 0}
.djs-sign{flex:none;margin-top:1.4cqw;padding:1.4cqw 2cqw 1.6cqw;border:.5cqw solid #9fe8ff;border-radius:1cqw;background:rgba(10,14,48,.85);box-shadow:0 0 3cqw rgba(159,232,255,.3)}
.djs-sign small{display:block;font:400 3.2cqw/1 "VT323";color:#9fe8ff;letter-spacing:.08em;margin-bottom:.8cqw}
.djs-sign p{font:400 6cqw/1.1 "VT323";color:#fff;text-shadow:0 0 1.4cqw rgba(159,232,255,.55)}
.djs-sign p b{font-weight:400;color:#9fe8ff}
.big .djs-side .djs-wait{font-size:6cqw;color:#e9e4ff;animation:djsblink 1.4s steps(2,start) infinite}
.big .djs-side .djs-wait2{font-size:4.2cqw;line-height:1.3;color:#aab1e8}
@keyframes djsblink{50%{opacity:.45}}
.still .djs-wait{animation:none}

/* 3. Zoomed-out desktop: the haze button over the making screen is bigger and glows once the script is ready,
      so it is not missed. Phones (v-m) keep PR 50's button exactly as it was. */
.v-d .djs-call{border-width:.6cqw;padding:1cqw;margin-top:1.4cqw}
.v-d .djs-call button{font-size:5.6cqw;padding:1cqw 1.4cqw}
.v-d .djs-call button small{font-size:3.4cqw;margin-top:.5cqw}
.v-d .djs-call.ready{border-color:#9fe8ff;background:rgba(14,30,70,.9);animation:djsglow 1.8s ease-in-out infinite}
.v-d .djs-call.ready button{color:#fff;text-shadow:0 0 1.4cqw rgba(159,232,255,.9)}
@keyframes djsglow{50%{box-shadow:0 0 5cqw rgba(159,232,255,.75)}}
.still .djs-call.ready{animation:none}

/* phone: the radio's small labels (TUNED / ON AIR, ROAST-NR, FM) were 5-8px; 12px minimum */
.v-m .lcd .air,.v-m .nrbadge,.v-m .lcd .fm{font-size:12px}

/* portrait phone: the radio picture has its own station name and scroller printed on its screen, so the live text printed twice on top of it.
   The live screen gets a solid dark backing the size of the printed screen, and the sticker moves left, off ROAST-NR. Desktop and landscape are untouched. */
@media (max-width:600px) and (orientation:portrait){
  .v-m .lcd{left:22.5%;top:27%;width:55.5%;height:17%;background:#021518;border-radius:1.4cqw;grid-template-columns:20% 1fr}
  .v-m .lcd .main{padding:.8cqw 1.2cqw 0 1.4cqw}
  .v-m .lcd .tick{font-size:17px;line-height:1.1}
  .v-m .trybadge{left:15%}
}

/* phones: ROAST-NR sat on the cassette slot printed on the radio pictures and read "...ST-NR"; it moves left onto the plain
   strip above the screen. Portrait picture (the media query above) and landscape picture (landscape phones, v-land) each get
   their own spot. Desktop with a mouse is untouched. */
@media (max-width:600px) and (orientation:portrait){ .v-m .nrbadge{left:60%;top:5.5%} }
@media not all and (max-width:600px) and (orientation:portrait){ .v-m .nrbadge,.v-land .nrbadge{left:59%;top:4.75%} }

/* landscape phone: same fix as the portrait one above, for the wide radio picture. Its printed screen (station name and
   scroller) showed through the live text, so the name and the scroller printed twice. The live screen gets a solid dark
   backing the size of the printed screen (x 345-1545, y 254-476 of the 1846x852 picture). Landscape phones only
   (v-land and a short landscape screen); desktop, tablets and portrait are untouched. */
@media (orientation:landscape) and (max-height:540px){
  .v-land .lcd{left:18.5%;top:29.5%;width:65.5%;height:26.5%;background:#021518;border-radius:1.4cqw}
}

/* portrait phone: the whole tall radio is on the first screen, no scrolling. The heading block is tighter (smaller logo,
   price and title, one-line pay note, no line under the button) and the radio runs edge to edge, 390 wide on a 390 phone,
   sitting at the bottom of the screen with the How it works / My tracks pills just below it. If the screen is shorter
   than heading + radio, the radio shrinks to fit: --hdr is the heading height, measured by
   night-shift-v3.js. The newmobile test page (mock-p) keeps its own radio image and sizes. Desktop and landscape untouched. */
@media (max-width:600px) and (orientation:portrait){
  html:not(.mock-p).v-m .firstscreen{min-height:0}
  html:not(.mock-p).v-m .firstscreen .hero{flex:none;padding:2px 0 8px}
  html:not(.mock-p).v-m .firstscreen .logo{font-size:32px}
  html:not(.mock-p).v-m .firstscreen .logo small{font-size:9px;margin:3px 0 0 28px}
  html:not(.mock-p).v-m .firstscreen .cash{font-size:30px}
  html:not(.mock-p).v-m .firstscreen .cash s{font-size:14px;margin-right:5px}
  html:not(.mock-p).v-m .firstscreen .cashnote{font-size:8.5px;line-height:1.35;margin-top:3px}
  html:not(.mock-p).v-m .firstscreen .stars{margin-top:2px}
  html:not(.mock-p).v-m .firstscreen .stars button{font-size:19px;min-height:24px}
  html:not(.mock-p).v-m .firstscreen h1{font-size:34px}
  html:not(.mock-p).v-m .firstscreen h1 i{display:inline}
  html:not(.mock-p).v-m .firstscreen .cta{margin-top:8px;padding:8px 10px 7px}
  html:not(.mock-p).v-m .firstscreen .cta b{font-size:22px}
  html:not(.mock-p).v-m .firstscreen .cta small{display:none}
  html:not(.mock-p).v-m .firstscreen .paynote{font-size:11px;margin-top:5px}
  html:not(.mock-p).v-m .firstscreen .pn2{display:none}
  /* --spare: room left over on a tall screen; half goes above the heading, half between the heading and the radio */
  html:not(.mock-p).v-m .firstscreen{--spare:max(0px,calc(100svh - var(--hdr,240px) - 100vw * 1507 / 1044 - 6px))}
  html:not(.mock-p).v-m .firstscreen .tophud,html:not(.mock-p).v-m .firstscreen .hero{transform:translateY(calc(var(--spare) / 2))}
  html:not(.mock-p).v-m .firstscreen .radio{align-self:center;margin:var(--spare) 0 0;width:min(100vw,calc((100svh - var(--hdr,240px) - 4px) * 1044 / 1507))}
}

/* Glove box picture, every layout (David, 27 Oct, round 4; desktop too): the made-up labels printed on the two tapes
   ("Dave · 40th" on the pale label, "SHAZ · LEAVING DO" in red on the black tape) are painted over in each tape's own
   colour, measured from img/glove-open.webp (996x484: pale label text 188-274 x 234-249px, red text 156-263 x 276-284px),
   so the tapes read blank. #inside is laid over the open picture by layoutGlove, so these percentages are of the picture.
   The source picture is unchanged. The page's own tape buttons, which repeated those labels, are not shown; the
   PREVIEWS and SAVED FULL TRACKS tabs in MY TRACKS open the same lists. */
.inside .tape{display:none}
.inside::before,.inside::after{content:"";position:absolute;pointer-events:none;filter:blur(1px)}
.inside::before{left:18.37%;top:47.83%;width:9.64%;height:3.92%;background:linear-gradient(90deg,#897867,#928679)}
.inside::after{left:15.16%;top:56.3%;width:11.75%;height:3.2%;background:#0e0c0b}

/* Glove box fill, desktop (David, 27 Oct): with the tapes no longer shown, the open MY TRACKS panel covers the whole
   glove box, from 3% under its top edge down to just above CLOSE (bottom right), instead of a small box at the top whose
   set-list BUY buttons and basket line were scrolled out of view. layoutGlove (night-shift-v3.js) no longer sizes it
   here. As on the phones (night-shift-phone.css), the set list takes the panel's height with its rows scrolling inside
   it and the price / basket line at the bottom. (Round 5: no consent box in the glove box; it is at checkout.)
   The older v-m phone page keeps its own layout. */
html:not(.phone-panels):not(.v-m) .gbox.open .trk{bottom:calc(4% + 52px);max-height:none}
html:not(.phone-panels):not(.v-m) .trk-body{flex:1 1 auto;display:flex;flex-direction:column;overscroll-behavior-y:contain}
html:not(.phone-panels):not(.v-m) .trk-body>*{flex:none}
html:not(.phone-panels):not(.v-m) .trk-body>.sl{flex:1 1 0;display:flex;flex-direction:column}
html:not(.phone-panels):not(.v-m) .trk .sl-list{flex:1 1 0;min-height:64px;overflow-y:auto;overscroll-behavior-y:contain}
html:not(.phone-panels):not(.v-m) .trk .sl-note{flex:none;margin-top:auto;padding-top:1.2cqw;border-top:.2cqw solid #3a4682}

/* ===== guided details (David, 29 Oct): relation row, occasion roast note, suggested stations, START HERE page ===== */
.rellab{margin-top:1.2cqw;margin-bottom:.2cqw}.rellab span,.roastlab span{color:#8d96c9}
.relrow{display:flex;gap:.8cqw;overflow-x:auto;scrollbar-width:none;padding-bottom:.2cqw;flex:none}
.relrow::-webkit-scrollbar{display:none}
.relrow button{flex:none;min-height:5.6cqw;padding:0 1.6cqw;border-radius:.6cqw;border:.3cqw solid #3a4682;background:rgba(18,22,64,.9);color:#d8d4ff;font-family:"VT323";font-size:3.4cqw;white-space:nowrap}
.relrow button.on{background:var(--cy);border-color:#c8fbff;color:#03161a}
.v-m .relrow button{font-size:4.4cqw;min-height:8.4cqw}
#roastnote.set{color:var(--cy)}
#roastnote.bump{animation:holdpulse .8s linear}
.heat button.capped,.stars button.capped,.sx-v .hb.capped{opacity:.32;filter:grayscale(1);cursor:not-allowed}
.stnote{margin:.6cqw 0 0;color:#ffd23f}
.list button.suits small{color:#ffd23f}.list button.suits.on small{color:#fff2b0}
#dhint.asking{color:var(--cy)}
.tt-page.start{-webkit-mask-image:none;mask-image:none}
.gd-line{font:400 3.6cqw/1.15 "VT323";color:#fff;margin:0 0 .6cqw}
.gd-rule{font:400 3.2cqw/1.15 "VT323";color:#ffb347;margin:0 0 .6cqw}
.gd-rule:before{content:"✱ "}
.gd-tap{font:400 3.2cqw/1.15 "VT323";color:#8d96c9;margin:0 0 .8cqw}
.tt-page .gd-asks{display:grid;grid-template-columns:1fr;gap:.8cqw}
.tt-page .gd-ask{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.2cqw;align-items:baseline;width:100%;min-height:7cqw;padding:.6cqw 1.2cqw;text-align:left;font-family:"VT323";color:#e9e4ff;background:rgba(18,22,64,.7);border:.3cqw solid #2c3670;border-radius:.4cqw;cursor:pointer}
.tt-page .gd-ask b{font-weight:400;color:#6b75a8;font-size:4.2cqw;grid-row:1/3}
.tt-page .gd-ask .gd-l{font-size:3.9cqw;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.tt-page .gd-ask small{grid-column:2;min-width:0;font-size:3.2cqw;line-height:1.1;color:#8d96c9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-page .gd-ask:before{content:none}
.tt-page .gd-ask:hover{border-color:var(--cy)}
.tt-page .gd-ask.now{border-color:var(--cy);box-shadow:0 0 1.4cqw rgba(61,240,255,.35)}.tt-page .gd-ask.now b,.tt-page .gd-ask.now small{color:var(--cy)}
.tt-page .gd-ask.done{background:#ffd23f;border-color:#fff2b0;color:#1a1200}.tt-page .gd-ask.done b,.tt-page .gd-ask.done small{color:#1a1200}
.tt-page .gd-ask.full{opacity:.32;filter:grayscale(1);cursor:not-allowed}
.chip.ask small{font-size:.78em;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.v-m .gd-line{font-size:4.8cqw}.v-m .gd-rule,.v-m .gd-tap{font-size:4.2cqw}.v-m .tt-page .gd-ask .gd-l{font-size:5.2cqw}.v-m .tt-page .gd-ask small{font-size:4.2cqw}.v-m .tt-page .gd-ask b{font-size:5.6cqw}
/* ===== details step r14 (David, 31 Oct): prompts first, family tabs after, guided Something else ===== */
.tt-wrap[hidden]{display:none}
.tt-page .gd-sub{margin-top:1.6cqw}
.tt-page .gd-quick{margin-bottom:.4cqw}
.gd-tabs{display:flex;flex-wrap:wrap;gap:.8cqw;margin-bottom:.8cqw}
#monitor #tpage .gd-tabs button{width:auto;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:.2cqw;position:relative;font-family:"VT323";font-size:3.6cqw;line-height:1;padding:.8cqw 1.6cqw;min-height:8cqw;color:var(--tc);background:color-mix(in srgb,var(--tc) 22%,#0b0d26);border:.3cqw solid var(--tc);border-radius:0;text-align:left}
#monitor #tpage .gd-tabs button:before{content:none}
.gd-tabs button small{font-size:2.5cqw;opacity:.8}
.gd-tabs button em{position:absolute;right:.6cqw;top:.5cqw;font-style:normal;font-size:2.8cqw;background:#05060a;color:var(--tc);padding:0 .7cqw}
#monitor #tpage .gd-tabs button:hover{background:var(--tc);color:#05060a}
.gd-se{border:.3cqw dashed #3df0ff;background:rgba(6,30,44,.55);padding:1cqw 1.2cqw;margin:0 0 1.2cqw}
.gd-se.shut{display:flex;align-items:center;gap:1.2cqw;border-style:solid;padding:.6cqw 1.2cqw}
.gd-se.shut .gd-near{flex:1;margin:0}
.gd-se-h{font:400 3.4cqw/1.1 "VT323";color:var(--cy);letter-spacing:.04em;margin:0 0 .6cqw}
.gd-q{font:400 3.4cqw/1.1 "VT323";color:#fff;letter-spacing:.04em;margin:.8cqw 0 .4cqw}
.gd-q b{display:inline-block;min-width:3.4cqw;text-align:center;background:var(--cy);color:#03161a;font-weight:400;margin-right:.6cqw}
.gd-q span{color:#ffd23f}
.gd-q i{font-style:normal;color:var(--cy)}
#monitor #tpage .gd-q .gd-chg{display:inline;width:auto;min-height:0;padding:0 .4cqw;margin-left:.4cqw;border:0;background:none;color:#8d96c9;font:inherit;text-decoration:underline;scroll-snap-align:none}
#monitor #tpage .gd-q .gd-chg:before{content:none}
.gd-opts{display:flex;flex-wrap:wrap;gap:.7cqw}
.gd-opts.two{display:grid;grid-template-columns:1fr 1fr}
#monitor #tpage .gd-opts.two button{width:100%}
.gd-q:has(.gd-chg){display:flex;flex-wrap:wrap;align-items:center;column-gap:.6cqw}
#monitor #tpage .gd-opts button{width:auto;display:inline-flex;align-items:center;gap:0;scroll-snap-align:none;flex:none;min-height:5.6cqw;padding:.3cqw 1.4cqw;border-radius:.6cqw;border:.3cqw solid #3a4682;background:rgba(18,22,64,.9);color:#d8d4ff;font-family:"VT323";font-size:3.6cqw;line-height:1.05;text-align:left}
#monitor #tpage .gd-opts button:before{content:none}
#monitor #tpage .gd-opts button.on{box-shadow:none;background:var(--cy);border-color:#c8fbff;color:#03161a}
.gd-opts button.capped{opacity:.32;filter:grayscale(1);cursor:not-allowed}
.gd-near{font:400 3.2cqw/1.15 "VT323";color:#7dff8f;letter-spacing:.04em;margin:1cqw 0 .4cqw}
.gd-near b{font-weight:400;color:#fff}
#monitor #tpage .gd-se .mini{width:auto;flex:none;justify-content:center;min-height:5.4cqw;font-size:3.2cqw;padding:0 1.6cqw;border:.3cqw solid var(--cy);color:var(--cy)}
#monitor #tpage .gd-se .mini:before{content:none}
#monitor #tpage .gd-se [data-sedone]{margin-top:.4cqw}
.v-m #monitor #tpage .gd-tabs button{font-size:4.8cqw;min-height:10.4cqw;padding:1.2cqw 2.2cqw}.v-m .gd-tabs button small{font-size:3.2cqw}
.v-m .gd-se-h,.v-m .gd-q{font-size:4.6cqw}.v-m .gd-q b{min-width:4.6cqw}
.v-m #monitor #tpage .gd-opts button{font-size:4.4cqw;min-height:8.4cqw;padding:.4cqw 2cqw}
.v-m .gd-near{font-size:4.4cqw}.v-m #monitor #tpage .gd-se .mini{font-size:4.4cqw;min-height:8cqw}