/* ================= The request line, Tesla style (r15, David 31 Oct) =================
   One component (built by night-shift-v3.js, buildRequestLine), two layouts:
   - the request-line column (desktop dash, phone panels, landscape): bar with Back and STEP n/4, thin coloured step
     bars, a one-line summary (phones), the current step, What you get and Continue;
   - the zoomed desktop (html.tz-full): the monitor grows into a two-column view, the request building up live on the
     left (headline, your words, timeline, tuning dial) and the same form on the right.
   Hustle MM touches: neon edges, coloured step bars, the gradient "your DJ", chips with coloured borders (--c), Tap to
   add, What you get and a shimmering Continue. Motion is short and eased; prefers-reduced-motion turns it all off.
   r16 (David, 31 Oct): the chrome gold logo top left on every layout, an opening screen with the request line's tagline,
   no "one quick thing" note, glass chips with a neon selection flare, a cross-fade with a light sweep and neon bloom
   between steps (about 350 ms), and "Your request so far" as plain label / value rows that flare as they fill in. */
:root { --tz-ease: cubic-bezier(.2, .8, .2, 1); --tz-ease2: cubic-bezier(.22, .61, .36, 1); }

#monitor .tz {
  --f: 14px; --sp: 14px; --spt: 10px;
  --g1: #b6b0c8; --g2: #7b7590; --g3: rgba(255,255,255,.12); --line: rgba(255,255,255,.09); --surf: rgba(13,11,28,.92);
  padding: 0; overflow: hidden; position: relative;
  font: 500 var(--f)/1.35 "Inter Tight", system-ui, sans-serif; color: #fff; letter-spacing: 0; text-shadow: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,45,170,.07), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.93), rgba(3,2,10,.97));
}
#monitor .pane.tz.on { display: flex; flex-direction: row; }
/* the neon edge round the screen: pink, with a cyan line along the bottom */
#monitor .tz::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 18px / 22px;
  box-shadow: inset 0 0 0 1px rgba(255,45,170,.55), inset 0 0 24px rgba(255,45,170,.16), inset 0 -2px 0 rgba(61,240,255,.45); }
html.phone-panels.lens #monitor.lens-on .tz::before { border-radius: 0; }
#monitor .scr.tz-on .rlbar { display: none !important; }
#monitor .scr.tz-on::after { opacity: .25; }
#monitor .tz :focus-visible { outline: 2px solid #3df0ff; outline-offset: 2px; }
:where(#monitor .tz) :is(h2, p) { margin: 0; }
#monitor .tz button { font-family: "Inter Tight", system-ui, sans-serif; }

/* ---------- the panel: bar, step bars, summary, words, steps, foot ---------- */
#monitor .tz-stage { display: none; }
#monitor .tz-panel { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* the bar: the logo top left, STEP n/4 on the right (clear of the zoom button); Back sits with Continue in the foot */
#monitor .tz-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: calc(var(--f) * 3.1); padding: 4px 52px 0 var(--sp); }
#monitor .tz-logo { display: block; flex: none; line-height: 0; }
#monitor .tz-logo img { display: block; width: auto; height: var(--logo-h, 20px); max-width: none; filter: drop-shadow(0 0 6px rgba(255, 196, 96, .22)); }
#monitor .tz-bar .tz-logo { --logo-h: calc(var(--f) * 1.45); }
#monitor .tz-back { position: relative; overflow: hidden; --c: #d9d3ea; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); font: 600 var(--f)/1 "Inter Tight"; color: #ebe6f6; transition: background .2s, border-color .2s, opacity .25s; }
#monitor .tz-back:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); }
#monitor .tz-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#monitor .tz-back.off { display: none; }
#monitor .tz-count { margin-left: auto; font: 700 calc(var(--f) * .8)/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--g1); white-space: nowrap; }
#monitor .tz-count b { color: #fff; }

/* coloured step bars: each fills as its step is done, the current one part-way, with a bright neon tip where it ends */
#monitor .tz-prog { flex: none; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 2px var(--sp) 0; }
#monitor .tz-prog li { min-width: 0; font: 600 calc(var(--f) * .74)/1.2 "Inter Tight"; color: var(--g2); white-space: nowrap; transition: color .3s; }
#monitor .tz-prog li span { display: block; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-prog i, #monitor .tz-line .tz-fill { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--g3); }
#monitor .tz-prog i { margin: 3px 4px 5px 0; }
#monitor .tz-prog i b, #monitor .tz-line .tz-fill b { position: relative; display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); box-shadow: 0 0 8px var(--c); transition: width .7s var(--tz-ease), opacity .3s; }
#monitor .tz-prog li.cur i b::after, #monitor .tz-line li.cur .tz-fill b::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px var(--c), 0 0 14px 3px color-mix(in srgb, var(--c) 55%, transparent); animation: tzTip 2.4s ease-in-out infinite; }
@keyframes tzTip { 50% { box-shadow: 0 0 3px 1px var(--c), 0 0 8px 1px color-mix(in srgb, var(--c) 35%, transparent); } }
#monitor .tz-prog li.cur { color: #fff; }
#monitor .tz-prog li.done { color: var(--g1); }
#monitor .tz-prog li.seen b, #monitor .tz-line li.seen .tz-fill b { opacity: .45; }

/* the request in one line (phones, the column of the scaled dash); the desktop column has the summary screen beside it */
#monitor .tz-sum { flex: none; margin: 9px var(--sp) 0; font: 800 calc(var(--f) * 1.08)/1.3 "Inter Tight"; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.desktop-radio #monitor .tz-sum { display: none; }
/* cross-fade: the old words (.tz-ghost) fade and lift away over the new ones (.tz-new) */
#monitor .tz-x { position: relative; }
#monitor .tz-new { animation: tzXin .45s var(--tz-ease); }
#monitor .tz-ghost { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; animation: tzGhost .45s var(--tz-ease) forwards; }
@keyframes tzXin { from { opacity: 0; filter: blur(3px); } }
@keyframes tzGhost { to { opacity: 0; filter: blur(3px); transform: translateY(-.3em); } }

/* your words: a small card that opens on tap (the tray of everything picked) */
#monitor .tz-words { flex: none; margin: 8px var(--sp) 0; border: 1px solid rgba(255,210,63,.38); border-radius: 12px; background: rgba(255,210,63,.05); box-shadow: 0 0 14px rgba(255,210,63,.08); }
#monitor .tz-words[hidden] { display: none; }
#monitor .tz-words.tz-bump { animation: tzBump .7s ease-out; }
@keyframes tzBump { 0% { box-shadow: 0 0 0 0 rgba(255,210,63,.7), 0 0 22px rgba(255,210,63,.5); } 100% { box-shadow: 0 0 0 8px rgba(255,210,63,0), 0 0 14px rgba(255,210,63,.08); } }
#monitor .tz-wbtn { --c: #ffd23f; position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 12px; text-align: left; font: 500 calc(var(--f) * .86)/1.25 "Inter Tight"; color: #e6e1f2; }
#monitor .tz-wbtn b { flex: none; font: 700 calc(var(--f) * .7)/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #ffd23f; }
#monitor .tz-wbtn > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-wbtn em { flex: none; font-style: normal; color: #ffd23f; transition: transform .3s var(--tz-ease); }
#monitor .tz-words.open .tz-wbtn em { transform: rotate(180deg); }
#monitor .tz-wbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--tz-ease); }
#monitor .tz-words.open .tz-wbody { grid-template-rows: 1fr; }
#monitor .tz-wbody > div { min-height: 0; overflow: hidden; }
#monitor .tz .tray { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px !important; overflow-y: auto; padding: 2px 10px 10px; align-content: flex-start; scrollbar-width: thin; }
#monitor .tz .tray .chip { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 32px; max-width: 100%; padding: 3px 2px 3px 11px; border-radius: 999px; border: 1px solid rgba(255,210,63,.5); background: rgba(255,210,63,.08); font: 500 calc(var(--f) * .86)/1.25 "Inter Tight"; color: #fff; }
#monitor .tz .tray .chip small { font: 700 calc(var(--f) * .66)/1.2 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: #ffd23f; opacity: 1; margin-right: 4px; }
#monitor .tz .tray .chip button { flex: none; display: grid; place-items: center; width: 30px; min-width: 30px; height: 28px; border-radius: 999px; color: #fff; font-size: 12px; opacity: .75; }
#monitor .tz .tray .chip button:hover { opacity: 1; background: rgba(255,255,255,.1); }
#monitor .tz .tray .empty { color: var(--g2); font: 500 calc(var(--f) * .86)/1.3 "Inter Tight"; padding: 4px 0; }
#monitor .tz-wbody .fhint { margin: 0 10px 6px; }

/* the steps: one on screen. Between steps (r16) the old one fades out as the new one fades up out of a soft blur, and a
   light sweep in the new step's colour crosses the panel with a neon bloom from the top (.tz-sweep), about 350 ms */
#monitor .tz-steps { flex: 1 1 0; min-height: 0; position: relative; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--spt) var(--sp) 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
#monitor .tz-step[hidden] { display: none; }
#monitor .tz-step.tz-in { animation: tzFadeIn .35s var(--tz-ease2) both; }
#monitor .tz-step.tz-out { position: absolute; left: var(--sp); right: var(--sp); top: var(--spt); pointer-events: none; animation: tzFadeOut .3s var(--tz-ease2) both; }
@keyframes tzFadeIn { from { opacity: 0; filter: blur(5px) brightness(1.5); transform: translateY(6px); } 60% { filter: blur(0) brightness(1.08); } }
@keyframes tzFadeOut { to { opacity: 0; filter: blur(5px); transform: translateY(-4px); } }
@keyframes tzInR { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } }
#monitor .tz-sweep { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; border-radius: inherit; visibility: hidden; }
#monitor .tz-sweep.go, #monitor .tz-sweep.back { visibility: visible; }
#monitor .tz-sweep::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c, #ff2daa) 14%, transparent) 32%, rgba(255,255,255,.13) 50%, color-mix(in srgb, var(--c, #ff2daa) 14%, transparent) 68%, transparent);
  transform: translateX(-110%) skewX(-14deg); }
#monitor .tz-sweep::after { content: ""; position: absolute; left: 6%; right: 6%; top: -32%; height: 64%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #ff2daa) 34%, transparent), transparent); }
#monitor .tz-sweep.go::before { animation: tzSweep .42s var(--tz-ease2) both; }
#monitor .tz-sweep.back::before { animation: tzSweepBack .42s var(--tz-ease2) both; }
#monitor .tz-sweep.go::after, #monitor .tz-sweep.back::after { animation: tzBloom .5s ease-out both; }
@keyframes tzSweep { from { transform: translateX(-110%) skewX(-14deg); } to { transform: translateX(260%) skewX(-14deg); } }
@keyframes tzSweepBack { from { transform: translateX(260%) skewX(-14deg); } to { transform: translateX(-110%) skewX(-14deg); } }
@keyframes tzBloom { 30% { opacity: 1; } to { opacity: 0; } }
/* from the opening screen into step 1: the whole panel blooms up out of the dark */
#monitor .pane.tz.tz-arrive { animation: tzArrive .38s var(--tz-ease2) both; }
@keyframes tzArrive { from { opacity: 0; filter: blur(6px) brightness(1.6); } }
#monitor .tz-kick { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font: 700 calc(var(--f) * .72)/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
#monitor .tz-kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
#monitor .tz-h { margin-bottom: 12px; font: 800 calc(var(--f) * 1.9)/1.05 "Inter Tight"; letter-spacing: -.03em; color: #fff; text-wrap: balance; outline: none; }
#monitor .tz-lab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 14px 0 7px; font: 700 calc(var(--f) * .72)/1.25 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--g1); }
#monitor .tz-lab span { color: var(--g2); letter-spacing: .06em; }
#monitor .tz-lab #roastnote.set { color: #3df0ff; }
#monitor .tz-sub { margin: -4px 0 10px; font: 500 calc(var(--f) * .9)/1.4 "Inter Tight"; color: var(--g1); }
#monitor .tz-sub b { display: block; margin-top: 4px; font-weight: 600; color: #ffb347; }
#monitor .tz-hint { margin: 6px 0 0; font: 500 calc(var(--f) * .8)/1.35 "Inter Tight"; color: var(--g2); }
#monitor .tz-hint.asking { color: var(--c); }
#monitor .tz-note { margin: 6px 0 0; font: 500 calc(var(--f) * .8)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .tz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 7px; }
#monitor .tz-row .tz-lab { margin: 0; }
#monitor .tz .fhint { margin: 8px 0 0; padding: 7px 10px; border-left: 3px solid #ffb347; border-radius: 6px; background: rgba(255,179,71,.1); font: 500 calc(var(--f) * .86)/1.3 "Inter Tight"; color: #ffd9a0; animation: tzInR .3s var(--tz-ease); }
#monitor .tz .fhint::before { content: "☞ "; color: #ffb347; }

/* chips (r16): quiet glass with a hairline in their colour (--c); picked, they light up from inside with a neon edge.
   A tap draws a ripple from the finger and a selection flare: a glow ring and a streak of light along the bottom edge */
#monitor .tz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#monitor .tz-c { --c: #ff2daa; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 38px; padding: 6px 13px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 52%, rgba(255,255,255,.1)); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--c) 6%, var(--surf)); color: #f3f0fa; text-align: left;
  font: 600 var(--f)/1.15 "Inter Tight"; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .12s, opacity .2s; }
#monitor .tz-c:hover { border-color: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 14px color-mix(in srgb, var(--c) 32%, transparent); }
#monitor .tz-c:active { transform: scale(.97); }
#monitor .tz-c.on { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 55%), color-mix(in srgb, var(--c) 26%, #0b0918); border-color: var(--c); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 14px color-mix(in srgb, var(--c) 30%, transparent), 0 0 16px color-mix(in srgb, var(--c) 45%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
#monitor .tz-c.off, #monitor .tz-c.capped { opacity: .32; filter: grayscale(1); cursor: not-allowed; }
#monitor .tz-c > i { font-style: normal; font-weight: 800; color: var(--c); }
#monitor .tz-c small { font: 500 calc(var(--f) * .78)/1.2 "Inter Tight"; opacity: .8; }
#monitor .tz-more { border-style: dashed; color: var(--g1); }
#monitor .tz-more small { font: 700 calc(var(--f) * .7)/1 "JetBrains Mono", monospace; opacity: .9; }
/* the selection flare: on chips (found again after a redraw), Continue, Back, Add, Listen, the small pills and Start */
#monitor :is(.tz-c, .tz-go, .tz-back, .tz-add, .tz-play, .tz-mini, .tz-tab, .tz-wbtn, .tz-istart).tz-glow { animation: tzGlow .75s ease-out; }
#monitor :is(.tz-c, .tz-go, .tz-back, .tz-add, .tz-play, .tz-mini, .tz-tab, .tz-istart)::after { content: ""; position: absolute; left: -45%; bottom: 0; width: 45%; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--c, #fff) 30%, #fff 50%, var(--c, #fff) 70%, transparent); filter: drop-shadow(0 0 4px var(--c, #fff)); }
#monitor :is(.tz-c, .tz-go, .tz-back, .tz-add, .tz-play, .tz-mini, .tz-tab, .tz-istart).tz-glow::after { animation: tzStreak .65s var(--tz-ease2) both; }
@keyframes tzGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 85%, transparent), 0 0 26px var(--c); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent), 0 0 0 transparent; } }
@keyframes tzStreak { 15% { opacity: 1; } to { opacity: 0; transform: translateX(330%); } }
#monitor .tz-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 3; }
#monitor .tz-fxc { position: absolute; overflow: hidden; pointer-events: none; }
#monitor .tz-fxc > i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%); transform: scale(0); animation: tzRip .6s var(--tz-ease) forwards; }
@keyframes tzRip { 60% { opacity: 1; } to { transform: scale(1); opacity: 0; } }
/* step 1: occasions open into a scrolling grid; the roast level is one row of five */
#monitor #occ.open { max-height: min(46vh, 230px); overflow-y: auto; padding: 2px 4px 2px 0; scrollbar-width: thin; }
#monitor .tz-roast { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
#monitor .tz-roast .tz-c { justify-content: center; padding: 6px 4px; font-size: calc(var(--f) * .86); }
/* step 3: prompt chips and the rest under MORE IDEAS */
#monitor .tz-ask small { flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-ask.on { flex-wrap: wrap; }
#monitor .tz-ask.now { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
#monitor .tz-ideas { margin-top: 4px; padding-top: 2px; animation: tzInR .3s var(--tz-ease); }
#monitor .tz-ideas[hidden] { display: none; }
#monitor .tz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
#monitor .tz-tab { position: relative; overflow: hidden; min-height: 30px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); font: 700 calc(var(--f) * .7)/1.1 "JetBrains Mono", monospace !important; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
#monitor .tz-tab.on { background: color-mix(in srgb, var(--c) 24%, #0b0918); border-color: var(--c); color: #fff; box-shadow: inset 0 0 10px color-mix(in srgb, var(--c) 30%, transparent), 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
#monitor .tz-tab em { font-style: normal; margin-left: 4px; opacity: .8; }
#monitor .tz-compose { display: flex; gap: 8px; align-items: stretch; }
#monitor .tz-compose .in { flex: 1; min-width: 0; }
#monitor .tz-compose.full .in { opacity: .45; }
#monitor .tz-add { position: relative; overflow: hidden; flex: none; min-width: 64px; padding: 0 14px; border-radius: 12px; background: var(--c); color: #140e00; font: 800 var(--f)/1 "Inter Tight"; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); transition: opacity .2s, box-shadow .2s; }
#monitor .tz-add:disabled { opacity: .3; box-shadow: none; cursor: not-allowed; }
#monitor .tz-qs { margin-left: auto; color: var(--g2); }
#monitor .tz-qs.full { color: #ffb347; }
#monitor .tz-se { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed rgba(61,240,255,.55); border-radius: 12px; background: rgba(61,240,255,.05); }
#monitor .tz-se.shut { display: flex; align-items: center; gap: 10px; border-style: solid; }
#monitor .tz-se.shut p { flex: 1; min-width: 0; font: 500 calc(var(--f) * .86)/1.3 "Inter Tight"; color: var(--g1); }
#monitor .tz-se.shut b { color: #3df0ff; font-weight: 700; }
#monitor .tz-se-h { margin-bottom: 4px !important; font: 700 calc(var(--f) * .72)/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #3df0ff; }
#monitor .tz-se-q { margin: 8px 0 6px !important; font: 700 calc(var(--f) * .9)/1.3 "Inter Tight"; color: #fff; }
#monitor .tz-se-q b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 4px; border-radius: 50%; background: #3df0ff; color: #03161a; font-size: .8em; }
#monitor .tz-se-q i { font-style: normal; color: #3df0ff; }
#monitor .tz-se-q span { font-weight: 500; color: var(--g2); }
#monitor .tz-se-near { margin: 8px 0 4px !important; font: 500 calc(var(--f) * .8)/1.35 "Inter Tight"; color: #7dff8f; }
#monitor .tz-se-near b { color: #fff; }
#monitor .tz-se .tz-chips .tz-c { min-height: 34px; padding: 4px 11px; font-size: calc(var(--f) * .88); }
/* step 4: the gradient "your DJ", station chips, the vibe, the email, Listen */
#monitor .tz-yd { background: linear-gradient(90deg, #ff2daa, #ffb347 45%, #3df0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#monitor .tz-djline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 6px; font: 600 calc(var(--f) * .88)/1.2 "Inter Tight"; color: var(--g1); }
#monitor .tz-djline .tz-yd { font: 800 calc(var(--f) * 1.05)/1 "Inter Tight"; letter-spacing: -.01em; }
#monitor .tz-djline .cset { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--sc); color: #fff; font: 700 calc(var(--f) * .82)/1.1 "Inter Tight"; letter-spacing: .02em; box-shadow: 0 0 12px color-mix(in srgb, var(--sc) 35%, transparent); }
#monitor .tz-djline .cset i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 6px var(--sc); }
#monitor .tz-stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#monitor .tz-stn { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; min-height: 48px; padding: 6px 10px; }
#monitor .tz-stn b { grid-row: 1 / 3; min-width: 2.7em; font: 700 calc(var(--f) * .86)/1 "JetBrains Mono", monospace; color: var(--c); }
#monitor .tz-stn span { min-width: 0; font: 700 calc(var(--f) * .86)/1.15 "Inter Tight"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-stn small { min-width: 0; font: 500 calc(var(--f) * .72)/1.2 "Inter Tight"; color: var(--g1); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-stn.on small { color: #e9e4f6; }
#monitor .tz-stations .tz-more { grid-column: 1 / -1; justify-content: center; }
#monitor #snd.off .tz-stn { opacity: .35; }
#monitor .tz-mini { --c: #3df0ff; position: relative; overflow: hidden; flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #3df0ff; color: #3df0ff; font: 700 calc(var(--f) * .74)/1 "JetBrains Mono", monospace !important; letter-spacing: .06em; transition: background .2s, color .2s; }
#monitor .tz-mini:hover, #monitor .tz-mini.on, #monitor .tz-mini[aria-pressed="true"] { background: #3df0ff; color: #03161a; }
#monitor .tz-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; font: 600 calc(var(--f) * .86)/1.2 "Inter Tight"; color: var(--g1); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.3); }
#monitor .tz-link:hover { color: #fff; text-decoration-color: var(--c, #fff); }
#monitor .tz-vbtn { margin-top: 10px; }
#monitor .tz-vibe { margin-top: 4px; animation: tzInR .3s var(--tz-ease); }
#monitor .tz-vibe[hidden] { display: none; }
#monitor .tz-vrow { display: flex; gap: 8px; align-items: stretch; }
#monitor .tz-vrow .in { flex: 1; min-width: 0; }
#monitor .tz-vrow .nost { align-self: center; }
#monitor .tz-listen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
#monitor .tz-play { --c: #7dff8f; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px 0 6px; border-radius: 999px; border: 1.5px solid #7dff8f; color: #fff; font: 600 calc(var(--f) * .9)/1.1 "Inter Tight"; box-shadow: 0 0 14px rgba(125,255,143,.18); transition: background .2s, box-shadow .2s; }
#monitor .tz-play:hover { box-shadow: 0 0 18px rgba(125,255,143,.4); }
#monitor .tz-play > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7dff8f; color: #062a10; font-style: normal; font-size: 12px; }
#monitor .tz-play.on { background: rgba(125,255,143,.12); }
#monitor .tz-play.on > i { animation: tzBeat 1.1s ease-in-out infinite; }
@keyframes tzBeat { 50% { box-shadow: 0 0 0 6px rgba(125,255,143,0), 0 0 14px #7dff8f; } 0%, 100% { box-shadow: 0 0 0 0 rgba(125,255,143,.6); } }
#monitor .tz-play b { font-weight: 800; }

/* fields: the CRT boxes are restyled as quiet dark fields with a neon focus ring in the step's colour */
#monitor .tz .in { display: flex; position: relative; align-items: flex-start; gap: 0; min-height: 0; padding: 9px 12px; border: 1.5px solid rgba(255,255,255,.16); border-radius: 12px; background: var(--surf); color: #fff; font: 500 var(--f)/1.35 "Inter Tight"; transition: border-color .2s, box-shadow .25s; }
#monitor .tz .in:focus-within { border-color: var(--c, #3df0ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #3df0ff) 22%, transparent), 0 0 18px color-mix(in srgb, var(--c, #3df0ff) 30%, transparent); }
#monitor .tz .in textarea { all: unset; flex: 1; min-width: 0; min-height: calc(var(--f) * 2.7); font: inherit; line-height: 1.35; color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
#monitor .tz .in textarea::placeholder { color: #5f5975; }
#monitor .tz .roll { left: 12px; right: 12px; top: 9px; height: calc(var(--f) * 2.7); font: inherit; line-height: 1.35; color: #6c6683; }
#monitor .tz .roll span.first { color: #9690ab; }
#monitor .tz-big { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 2px 0 8px; border-bottom: 2px solid rgba(255,255,255,.45); font: 800 calc(var(--f) * 1.75)/1.2 "Inter Tight"; letter-spacing: -.02em; color: #fff; caret-color: var(--c); transition: border-color .2s, box-shadow .25s; }
#monitor .tz-big:focus { border-color: var(--c); box-shadow: 0 10px 14px -12px var(--c); }
#monitor .tz-in { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid rgba(255,255,255,.16); border-radius: 12px; background: var(--surf); font: 500 calc(var(--f) * 1.02)/1 "Inter Tight"; color: #fff; caret-color: var(--c); transition: border-color .2s, box-shadow .25s; }
#monitor .tz-in:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
#monitor .tz-big::placeholder, #monitor .tz-in::placeholder { color: #5f5975; }
#monitor .tz .tk.edit { display: flex; flex: 1 1 100%; }
#monitor .tz .tk.edit input { all: unset; box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1.5px solid #3df0ff; background: #0d0b1e; font: 600 var(--f)/1 "Inter Tight"; color: #fff; box-shadow: 0 0 14px rgba(61,240,255,.3); }

/* What you get, then Back and Continue side by side: Continue is greyed out until the step is ready, then a slow shimmer */
#monitor .tz-foot { flex: none; padding: 9px var(--sp) 12px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5,4,14,.6), rgba(3,2,10,.96)); }
#monitor .tz-get { margin-bottom: 8px !important; font: 500 calc(var(--f) * .8)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .tz-get b { color: #fff; font-weight: 700; }
/* connect-r50: the free preview could not be sent (or refused): a plain message above the buttons, the answers kept.
   The foot is a flex column (night-shift-v3.css), so the message takes a row of its own and never sits beside the
   buttons; hidden it takes no space. The desktop gives every button a 44px floor with !important
   (night-shift-desktop.css); the message keeps the hint's own size, and only while it shows (a 44px floor on it hidden
   still wins the required-field fade). */
#monitor .tz-foot .tz-sendfail { margin: 0 0 10px; flex: 1 0 100%; }
#monitor .tz-sendfail:not([hidden]) { min-height: 0 !important; }
#monitor .tz-acts { display: flex; gap: 8px; }
#monitor .tz-acts .tz-back { flex: none; }
/* the desktop sets every button to a 44px floor with !important (night-shift-desktop.css); these keep their own height */
#monitor .tz-acts :is(.tz-go, .tz-back) { min-height: var(--goh, 48px) !important; }
.tz-full #monitor .tz-acts { --goh: 58px; }
#monitor .tz-go { --c: #ff2daa; position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; width: auto; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 50%), linear-gradient(90deg, #ff2daa, #ff5cc4 55%, #ff2daa); color: #14010c; font: 800 calc(var(--f) * 1.12)/1 "Inter Tight" !important; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 22px rgba(255,45,170,.45), 0 8px 22px -10px rgba(255,45,170,.8); transition: background .3s, color .3s, box-shadow .3s, transform .1s; }
#monitor .tz-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--tz-ease); }
#monitor .tz-go:hover svg { transform: translateX(3px); }
#monitor .tz-go:active { transform: scale(.99); }
#monitor .tz-go[aria-disabled="true"] { background: #1c1928; color: #6e6884; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#monitor .tz-go[aria-disabled="true"] svg { transform: none; }
/* love-r25 (David, 2 Nov): Continue stays plain: no shimmer or pulse once it can go (the must-fill fields pulse instead) */
@keyframes tzShine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
#monitor .tz-go > * { position: relative; }

/* ---------- the zoomed desktop: two columns, the request building up live on the left ---------- */
.tz-full #monitor { left: 56px; top: 40px; width: 1328px; height: 820px; z-index: 41; }
.tz-full #monitor .mframe { border-width: 12px 14px; }
.tz-full #monitor.tz-in { animation: tzZoomIn .44s var(--tz-ease) both; transform-origin: var(--tz-o, 50% 50%); }
.tz-full #monitor.tz-out { animation: tzZoomOut .25s cubic-bezier(.5, 0, .75, 0) both; transform-origin: var(--tz-o, 50% 50%); }
@keyframes tzZoomIn { from { opacity: 0; transform: scale(.42); filter: blur(10px); } }
@keyframes tzZoomOut { to { opacity: 0; transform: scale(.42); filter: blur(10px); } }
.tz-full #monitor .tz { --f: 16px; --sp: 34px; --spt: 16px; }
.tz-full #monitor .pane.tz.on { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.tz-full #monitor .tz-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 34px 48px 30px; border-right: 1px solid var(--line);
  background: radial-gradient(80% 60% at 15% 35%, rgba(255,45,170,.11), transparent 62%), radial-gradient(60% 50% at 95% 95%, rgba(61,240,255,.08), transparent 60%); }
.tz-full #monitor .tz-prog, .tz-full #monitor .tz-sum { display: none; }
.tz-full #monitor .tz-bar { min-height: 66px; padding: 8px 64px 0 var(--sp); }
/* zoomed, the logo heads the left-hand column (.tz-brand), so the form's bar keeps just the step count */
.tz-full #monitor .tz-bar .tz-logo { display: none; }
.tz-full #monitor .tz-h { font-size: 36px; margin-bottom: 16px; }
.tz-full #monitor .tz-foot { padding: 16px var(--sp) 26px; }
#monitor .tz-st-top { display: flex; justify-content: space-between; align-items: center; }
#monitor .tz-brand { display: flex; align-items: center; gap: 10px; font: 800 16px/1 "Inter Tight"; letter-spacing: .16em; }
#monitor .tz-brand .tz-logo { --logo-h: 34px; } /* Hustle MM chrome gold logo (David, 1 Nov), 200px wide */
#monitor .tz-brand span { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--g2); }
#monitor .tz-live { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; color: var(--g2); transition: color .3s, border-color .3s, box-shadow .3s; }
#monitor .tz-live i { width: 7px; height: 7px; border-radius: 50%; background: #3a3550; transition: background .3s; }
#monitor .tz-live.on { color: #fff; border-color: #ff2daa; box-shadow: 0 0 14px rgba(255,45,170,.35); }
#monitor .tz-live.on i { background: #ff2daa; box-shadow: 0 0 8px #ff2daa; animation: tzBlink 1.2s steps(2, start) infinite; }
@keyframes tzBlink { 50% { opacity: .25; } }
#monitor .tz-st-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
#monitor .tz-req { font: 800 64px/1.06 "Inter Tight"; letter-spacing: -.04em; color: #fff; }
#monitor .tz-slot { color: #4a4462; text-decoration: underline 4px transparent; text-underline-offset: .14em; transition: color .4s, text-decoration-color .4s; }
#monitor .tz-slot.f { color: #fff; }
#monitor .tz-slot.a { text-decoration-color: var(--c); }
#monitor .tz-slot.tz-dj { background: linear-gradient(90deg, #ff2daa, #ffb347 45%, #3df0ff); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .45; transition: opacity .4s, text-decoration-color .4s; }
#monitor .tz-slot.tz-dj.f { opacity: 1; }
#monitor .tz-slot.tz-dj .tz-ghost { color: #4a4462; }
#monitor .tz-quote { margin-top: 26px; max-width: 34em; font: 500 19px/1.45 "Inter Tight"; color: var(--g1); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#monitor .tz-quote.empty { color: #4f4967; }
#monitor .tz-quote .tz-ghost { right: 0; white-space: normal; }
#monitor .tz-line { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 30px; padding: 0; }
#monitor .tz-line li { min-width: 0; }
#monitor .tz-line button { position: relative; display: block; width: 100%; padding: 0; text-align: left; cursor: default; }
#monitor .tz-line li.done button { cursor: pointer; }
#monitor .tz-line .tz-fill { margin-bottom: 14px; }
#monitor .tz-line .k { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--g2); transition: color .3s; }
#monitor .tz-line .t { display: block; margin-top: 8px; font: 700 16px/1.2 "Inter Tight"; color: var(--g2); transition: color .3s; }
#monitor .tz-line .v { display: block; min-height: 1.35em; margin-top: 3px; font: 500 14px/1.35 "Inter Tight"; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-line li.done .t, #monitor .tz-line li.cur .t { color: #fff; }
#monitor .tz-line li.done .v { color: var(--g1); }
#monitor .tz-line li.cur .k { color: var(--c); }
#monitor .tz-line li.done button:hover .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c); }
#monitor .tz-dial { position: relative; flex: none; height: 46px; }
#monitor .tz-ticks { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, #3d3853 0 1px, transparent 1px 1%); }
#monitor .tz-ticks::after { content: ""; position: absolute; inset: 0 0 -6px; background: repeating-linear-gradient(90deg, #8d87a3 0 1px, transparent 1px 20%); }
#monitor .tz-scale { position: absolute; left: 0; right: 0; top: 26px; font: 500 11px/1 "JetBrains Mono", monospace; color: var(--g2); }
#monitor .tz-scale span { position: absolute; transform: translateX(-50%); }
#monitor .tz-scale span:first-child { transform: none; }
#monitor .tz-scale span:last-child { transform: translateX(-100%); }
#monitor .tz-needle { position: absolute; top: -8px; left: 6%; width: 2px; height: 30px; background: #ff2daa; box-shadow: 0 0 10px #ff2daa; transition: left .9s var(--tz-ease); }
#monitor .tz-read { position: absolute; right: 0; top: -30px; font: 700 13px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: #fff; }
#monitor .tz-read.dim { color: var(--g2); }
/* the zoom layer fades in and out with the request line */
html.lens .zoomveil:not([hidden]) { animation: tzVeil .38s ease both; }
.zoomveil.tz-out { animation: tzVeilOut .25s ease both !important; }
@keyframes tzVeil { from { opacity: 0; } }
@keyframes tzVeilOut { to { opacity: 0; } }

/* ---------- phones: portrait panel, full screen when zoomed, and landscape ---------- */
html.phone-panels #monitor .tz { --f: 13px; --sp: 12px; --spt: 8px; }
html.phone-panels.lens #monitor.lens-on .tz { --f: 15px; --sp: 18px; --spt: 12px; }
html.phone-panels.lens #monitor.lens-on:has(.scr.tz-on) .mframe { border-width: 0; border-image: none; border-radius: 0; filter: none; }
html.phone-panels.lens #monitor.lens-on .scr.tz-on { border-radius: 0; }
html.phone-panels.lens #monitor.lens-on .tz-bar { min-height: 58px; padding: 6px 62px 0 var(--sp); }
html.phone-panels.lens #monitor.lens-on .tz-bar .tz-logo { --logo-h: 22px; }
html.phone-panels.lens #monitor.lens-on .tz-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
html.phone-panels.lens #monitor.lens-on .tz-acts { --goh: 54px; }
html.phone-panels.lens #monitor.lens-on.tz-in { animation: tzPop .34s var(--tz-ease) both; }
html.phone-panels.lens #monitor.lens-on.tz-out { animation: tzUnpop .25s ease-in both; }
@keyframes tzPop { from { opacity: 0; transform: scale(.93); filter: blur(8px); } }
@keyframes tzUnpop { to { opacity: 0; transform: scale(.95); filter: blur(8px); } }
@media (max-width:1000px) and (orientation:landscape) {
  /* the four steps work with the phone either way up: no "turn your phone upright" over them, and the request line
     takes the panel's full width (the DJ script editor, a side trip from step 4, keeps the old upright note) */
  html.phone-landscape.rl-tz .phone-panel #monitor { visibility: visible; width: 100%; }
  html.phone-landscape.rl-tz .rl-upright { display: none; }
  html.phone-landscape.rl-tz.lens .phone-panel #monitor.lens-on { left: 0; right: 0; }
  html.phone-landscape.rl-tz.lens #monitor.lens-on > .mzoom { display: block !important; }
  html.phone-landscape.rl-tz.rl-typing .phone-panel #monitor { left: 0; width: 100%; }
  html.phone-landscape #monitor .tz, html.phone-panels.phone-landscape.lens #monitor.lens-on .tz { --f: 13px; --sp: 16px; --spt: 8px; }
  html.phone-landscape #monitor .tz-bar { min-height: 42px; padding: 2px 14px 0 var(--sp); }
  html.phone-landscape #monitor .tz-bar .tz-logo, html.phone-landscape.lens #monitor.lens-on .tz-bar .tz-logo { --logo-h: 18px; }
  html.phone-landscape.lens #monitor.lens-on .tz-bar { min-height: 50px; padding-right: 62px; }
  /* the summary sits in the bar's own row, between the logo (106px at 18px tall) and the step count */
  html.phone-landscape #monitor .tz-sum { position: absolute; top: 2px; left: calc(var(--sp) + 120px); right: 104px; margin: 0; height: 40px; line-height: 40px; text-align: center; }
  html.phone-landscape.lens #monitor.lens-on .tz-sum { right: 150px; height: 48px; line-height: 48px; }
  html.phone-landscape #monitor .tz-prog li { font-size: 0 !important; line-height: 0; }
  html.phone-landscape #monitor .tz-prog i { margin-bottom: 0; }
  html.phone-landscape #monitor .tz-words { margin-top: 6px; }
  html.phone-landscape #monitor .tz-foot { display: flex; align-items: center; gap: 14px; padding: 7px var(--sp) calc(8px + env(safe-area-inset-bottom)); }
  html.phone-landscape #monitor .tz-get { flex: 1; min-width: 0; margin: 0 !important; }
  html.phone-landscape #monitor .tz-acts { flex: 0 0 52%; }
  html.phone-landscape #monitor .tz-acts { --goh: 44px; }
  html.phone-landscape #monitor .tz-h { font-size: calc(var(--f) * 1.6); margin-bottom: 8px; }
}

/* ---------- reduced motion: no sweeps, blooms, ripples, flares, shimmer, cross-fades or zoom animation ---------- */
@media (prefers-reduced-motion: reduce) {
  #monitor .tz, #monitor .tz *, #monitor .tz *::before, #monitor .tz *::after, #monitor .tz-ip *, #monitor .tz-ip *::before, #monitor .tz-ip *::after,
  #rlside .rs *, #rlside .rs *::before, #rlside .rs *::after, #monitor.tz-in, #monitor.tz-out, .zoomveil { animation: none !important; transition: none !important; }
  #monitor .tz-fx, #monitor .tz-ghost, #monitor .tz-sweep, #monitor .tz-fxc { display: none !important; }
}
.still #monitor .tz, .still #monitor .tz *, .still #monitor .tz *::before, .still #monitor .tz *::after, .still #monitor .tz-ip *, .still #monitor .tz-ip *::before, .still #monitor .tz-ip *::after,
.still #rlside .rs *, .still #rlside .rs *::before, .still #rlside .rs *::after { animation: none !important; transition: none !important; }

/* ---------- the opening screen (r16, David 31 Oct): a clear start, not a form ----------
   The logo top left and FREE PREVIEW, then the request line's own tagline as the first line, with the occasion, the
   someone and the DJ underlined in their step colours (the zoomed desktop's headline), one line on what happens, the
   four steps lighting up in turn, and Start. Same box on every layout: the desktop column, the phone panel and zoom. */
#monitor .scr.boot::after { opacity: .25; }
#monitor .pane.tz-ip { --f: 14px; --sp: 18px; position: relative; overflow: hidden; padding: 0; flex-direction: column; color: #fff; text-shadow: none; letter-spacing: 0;
  font: 500 var(--f)/1.35 "Inter Tight", system-ui, sans-serif;
  background: radial-gradient(90% 55% at 10% 32%, rgba(255,45,170,.17), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(61,240,255,.12), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.95), rgba(3,2,10,.98)); }
#monitor .pane.tz-ip::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 18px / 22px;
  box-shadow: inset 0 0 0 1px rgba(255,45,170,.55), inset 0 0 24px rgba(255,45,170,.16), inset 0 -2px 0 rgba(61,240,255,.45); }
#monitor .tz-ip :focus-visible { outline: 2px solid #3df0ff; outline-offset: 3px; }
#monitor .tz-ip > .tz-ihead { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 10px; min-height: calc(var(--f) * 3.4); padding: 6px 56px 0 var(--sp); }
#monitor .tz-ihead .tz-logo { --logo-h: 24px; }
#monitor .tz-ipill { display: flex; align-items: center; gap: 7px; height: 26px; margin: 0 0 0 auto; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(125,255,143,.45); background: rgba(125,255,143,.06);
  font: 700 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #c9ffd2; white-space: nowrap; }
#monitor .tz-ipill i { width: 6px; height: 6px; border-radius: 50%; background: #7dff8f; box-shadow: 0 0 8px #7dff8f; animation: tzPulse 2.4s ease-in-out infinite; }
@keyframes tzPulse { 50% { opacity: .35; } }
#monitor .tz-ip > .tz-imain { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px var(--sp) 8px; overflow: hidden; }
#monitor .tz-itag { margin: 0; font: 800 clamp(26px, 9.2cqw, 46px)/1.05 "Inter Tight"; letter-spacing: -.035em; color: #fff; text-wrap: balance; animation: tzArrive .6s var(--tz-ease2) .05s both; }
#monitor .tz-itag .tz-slot { color: #fff; text-decoration: underline 3px var(--c); text-underline-offset: .14em; text-decoration-skip-ink: none; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
#monitor .tz-itag .tz-slot.tz-dj { opacity: 1; color: transparent; text-shadow: none; text-decoration-color: #ffb347; }
#monitor .tz-isub { margin: 14px 0 0; max-width: 32em; font: 500 calc(var(--f) * 1.02)/1.45 "Inter Tight"; color: #b6b0c8; }
#monitor .tz-isteps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#monitor .tz-isteps li { min-width: 0; font: 600 calc(var(--f) * .78)/1.2 "Inter Tight"; color: #d9d3ea; }
#monitor .tz-isteps i { display: block; height: 3px; margin-bottom: 8px; border-radius: 3px; transform-origin: left center;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent)); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent);
  animation: tzLight .7s var(--tz-ease2) both; animation-delay: calc(.35s + var(--i, 0) * .12s); }
@keyframes tzLight { from { transform: scaleX(0); opacity: 0; } }
#monitor .tz-isteps span { display: block; margin-bottom: 4px; font: 700 calc(var(--f) * .7)/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--c); }
#monitor .tz-ip > .tz-ifoot { position: relative; z-index: 1; flex: none; padding: 10px var(--sp) 14px; }
#monitor .tz-istart { --c: #ff2daa; position: relative; overflow: hidden; width: 100%; min-height: var(--sth, 52px) !important; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 50%), linear-gradient(90deg, #ff2daa, #ff5cc4 55%, #ff2daa); color: #14010c; font: 800 calc(var(--f) * 1.2)/1 "Inter Tight"; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 26px rgba(255,45,170,.5), 0 10px 26px -12px rgba(255,45,170,.9); transition: box-shadow .3s, transform .1s; }
#monitor .tz-istart:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 34px rgba(255,45,170,.7), 0 10px 26px -12px rgba(255,45,170,.9); }
#monitor .tz-istart:active { transform: scale(.99); }
#monitor .tz-istart::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); animation: tzShine 3.2s ease-in-out 1.2s infinite; }
#monitor .tz-istart > * { position: relative; }
#monitor .tz-istart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--tz-ease); }
#monitor .tz-istart:hover svg { transform: translateX(3px); }
#monitor .tz-inote { margin: 9px 0 0; text-align: center; font: 600 calc(var(--f) * .78)/1.2 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8f88a8; }
/* phones: in the dash panel the zoom button sits over the screen's top right corner, so the head is a little smaller */
html.phone-panels #monitor:not(.lens-on) .tz-ihead .tz-logo { --logo-h: 20px; }
html.phone-panels #monitor:not(.lens-on) .tz-ipill { padding: 0 8px; gap: 6px; font-size: 10px; letter-spacing: .1em; }
/* phones: full screen when the request line is zoomed (no bezel), a touch larger */
html.phone-panels.lens #monitor.lens-on:has(.scr.boot) .mframe { border-width: 0; border-image: none; border-radius: 0; filter: none; }
html.phone-panels.lens #monitor.lens-on .scr.boot, html.phone-panels.lens #monitor.lens-on .pane.tz-ip::before { border-radius: 0; }
html.phone-panels.lens #monitor.lens-on .pane.tz-ip { --f: 15px; --sp: 22px; }
html.phone-panels.lens #monitor.lens-on .tz-ip > .tz-ihead { min-height: 58px; padding-right: 62px; }
html.phone-panels.lens #monitor.lens-on .tz-ip > .tz-ifoot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
html.phone-panels.lens #monitor.lens-on .tz-istart { --sth: 56px; }
@media (max-width:1000px) and (orientation:landscape) {
  /* landscape phones: the tagline, then Start beside the four steps; the line on what happens is left out */
  html.phone-landscape #monitor .pane.tz-ip { --f: 13px; --sp: 16px; }
  html.phone-landscape #monitor .tz-ip > .tz-ihead { min-height: 42px; padding-top: 2px; }
  html.phone-landscape #monitor .tz-ihead .tz-logo { --logo-h: 18px; }
  html.phone-landscape #monitor .tz-itag { font-size: clamp(20px, 4.4cqw, 30px); }
  html.phone-landscape #monitor .tz-isub { display: none; }
  html.phone-landscape #monitor .tz-isteps { margin-top: 12px; }
  html.phone-landscape #monitor .tz-ip > .tz-ifoot { padding: 6px var(--sp) calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; }
  html.phone-landscape #monitor .tz-istart { --sth: 46px; flex: 0 0 52%; order: 2; }
  html.phone-landscape #monitor .tz-inote { flex: 1; margin: 0; text-align: left; }
}

/* ---------- "Your request so far" (r16): the desktop column's right-hand screen ----------
   Simple and clear at 1440x900: a short header, then one row per thing told so far, a label and the value, with a
   coloured edge that lights as the row fills in. A row that fills in (or changes pick) gets a neon flare: its edge
   flashes, a light sweep crosses it and the value glows for a moment (night-shift-v3.js, paintSide / rsFlare). */
#desktop-script #rlside:has(> .rs), .big #rlside:has(> .rs) { padding: 0; border-left-color: rgba(255,45,170,.28);
  background: radial-gradient(90% 40% at 0% 0%, rgba(255,45,170,.1), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.93), rgba(3,2,10,.97)); }
:is(#rlside.rlside, #djsview) .rs { min-height: 100%; display: flex; flex-direction: column; padding: 18px 18px 16px; color: #fff; text-shadow: none; letter-spacing: 0; font: 500 16px/1.3 "Inter Tight", system-ui, sans-serif; }
:is(#rlside.rlside, #djsview) .rs .rs-head { position: relative; padding: 0 0 12px; margin: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
:is(#rlside.rlside, #djsview) .rs .rs-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff2daa, #3df0ff); box-shadow: 0 0 10px rgba(255,45,170,.6); }
:is(#rlside.rlside, #djsview) .rs .rs-kick { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: #8f88a8; }
:is(#rlside.rlside, #djsview) .rs .rs-kick i { width: 7px; height: 7px; border-radius: 50%; background: #ff2daa; box-shadow: 0 0 8px #ff2daa; animation: tzPulse 2.4s ease-in-out infinite; }
:is(#rlside.rlside, #djsview) .rs h3.rs-h { margin: 0; font: 800 clamp(18px, 6.2cqw, 24px)/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: none; }
:is(#rlside.rlside, #djsview) .rs .rs-rows { margin: 0; }
:is(#rlside.rlside, #djsview) .rs .rs-row { position: relative; overflow: hidden; display: grid; grid-template-columns: clamp(78px, 27cqw, 104px) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 4px 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
:is(#rlside.rlside, #djsview) .rs .rs-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .3s, box-shadow .3s; }
:is(#rlside.rlside, #djsview) .rs .rs-row.f::before { background: var(--c); box-shadow: 0 0 8px var(--c); }
:is(#rlside.rlside, #djsview) .rs dt { font: 700 clamp(10px, 3cqw, 11.5px)/1.35 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8f88a8; transition: color .3s; }
:is(#rlside.rlside, #djsview) .rs .rs-row.f dt { color: #cfc9e0; }
:is(#rlside.rlside, #djsview) .rs dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font: 600 clamp(14px, 4.5cqw, 17px)/1.3 "Inter Tight", system-ui, sans-serif; color: #7a7392; overflow-wrap: anywhere; }
:is(#rlside.rlside, #djsview) .rs .rs-row.f dd { color: #fff; }
:is(#rlside.rlside, #djsview) .rs dd > span { min-width: 0; flex: 1 1 0; }
:is(#rlside.rlside, #djsview) .rs .rs-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 8px var(--dc); }
:is(#rlside.rlside, #djsview) .rs dd > .rs-chip { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,210,63,.5); background: rgba(255,210,63,.08); font: 600 clamp(12px, 3.6cqw, 13.5px)/1.25 "Inter Tight", system-ui, sans-serif; color: #fff; }
:is(#rlside.rlside, #djsview) .rs .rs-row.rs-flare::before { animation: rsEdge 1s ease-out; }
:is(#rlside.rlside, #djsview) .rs .rs-row.rs-flare::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 26%, transparent) 38%, rgba(255,255,255,.2) 50%, color-mix(in srgb, var(--c) 26%, transparent) 62%, transparent);
  transform: translateX(-100%); animation: rsSweep .9s var(--tz-ease2) forwards; }
:is(#rlside.rlside, #djsview) .rs .rs-row.rs-flare dd { animation: rsGlow 1s ease-out; }
@keyframes rsEdge { 20% { background: #fff; box-shadow: 0 0 10px 2px var(--c), 0 0 24px 4px var(--c); } }
@keyframes rsSweep { to { transform: translateX(200%); } }
@keyframes rsGlow { 25% { text-shadow: 0 0 14px var(--c), 0 0 2px #fff; } }
:is(#rlside.rlside, #djsview) .rs .rs-tip { margin: 14px 0 0; font: 500 13.5px/1.4 "Inter Tight", system-ui, sans-serif; color: #8f88a8; }
:is(#rlside.rlside, #djsview) .rs .rs-next { margin-top: 16px; }
:is(#rlside.rlside, #djsview) .rs .rs-next h4 { margin: 0 0 10px; font: 700 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #7dff8f; }
:is(#rlside.rlside, #djsview) .rs .rs-next ol { list-style: none; counter-reset: n; display: grid; gap: 9px; margin: 0; padding: 0; }
:is(#rlside.rlside, #djsview) .rs .rs-next li { counter-increment: n; position: relative; padding-left: 30px; font: 500 14px/1.4 "Inter Tight", system-ui, sans-serif; color: #cfc9e0; }
:is(#rlside.rlside, #djsview) .rs .rs-next li::before { content: "0" counter(n); position: absolute; left: 0; top: 1px; font: 700 12px/1.4 "JetBrains Mono", monospace; color: #7dff8f; }
:is(#rlside.rlside, #djsview) .rs .rs-next b { font-weight: 700; color: #fff; }

/* ================= r17 (David, 1 Nov): the occasion moulds the flow; Listen with the DJ; the confirm moment; the loading
   screen and the DJ script panel in the same style =================
   Step 1: the roast levels carry the occasion's own names, with one line for the picked level (#roastdesc).
   Step 2: the question(s) and a guide line from the occasion (RQ.flow); Company event's "What's the specific event?"
   with examples; the "your" section's line in sentence case. Step 3: a guidance line for each area (.tz-guide).
   Step 4: the DJ card (photo, name, "ready to talk") with Listen. The confirm moment lives in the panel's foot. */
#monitor .tz-lab :is(#roastq, #rel-lab) { color: inherit; letter-spacing: inherit; }
#monitor .tz-lab #rel-line { flex: 1 1 14em; font: 500 calc(var(--f) * .86)/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--g1); }
#monitor .tz-rdesc { min-height: 1.35em; margin: 8px 0 0 !important; font: 500 calc(var(--f) * .84)/1.35 "Inter Tight", system-ui, sans-serif; color: var(--g1); animation: tzInR .3s var(--tz-ease); }
#monitor .tz-rdesc b { margin-right: 4px; font-weight: 800; color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
#monitor .tz-guide { margin: -2px 0 9px !important; font: 500 calc(var(--f) * .8)/1.4 "Inter Tight", system-ui, sans-serif; color: var(--g2); }
#monitor .tz-guide[hidden] { display: none; }
#monitor .tz-sub.tz-guide { margin: -6px 0 12px !important; font-size: calc(var(--f) * .88); color: var(--g1); }
#monitor .tz-lab[hidden] { display: none; }
#monitor .tz-q2 { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#monitor .tz-q2[hidden] { display: none; }
#monitor .tz-h2b { margin: 0 0 9px; font: 800 calc(var(--f) * 1.18)/1.15 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
#monitor #evc { margin-top: 8px; }
#monitor #evc .tz-c { min-height: 34px; padding: 4px 11px; font-size: calc(var(--f) * .88); }

/* step 4 (dj-r23): "Pick your DJ", a simple list of the DJs. One row each: photo, name, and the station as a small detail;
   the clip tag on the right (a placeholder slot where a station has no audio). The picked row lights up like a picked
   chip with a tick on the photo; the row playing its clip fills a thin bar along its bottom edge (--p, 0..1).
   djstation-r26: the row is a box holding two buttons, the same look as before. .tz-djsel (photo, name, station) selects
   and its ::before stretches over the whole row, so a tap anywhere on the box selects; the clip tag is now the play
   button (.tz-djplay), above that layer. */
#monitor .tz-djlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
#monitor .tz-dj { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px 6px 6px; border-radius: 12px; cursor: pointer; }
#monitor .tz-djsel { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
#monitor .tz-djsel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
#monitor .tz .tz-djsel:focus-visible { outline: none; }
#monitor .tz-dj:has(.tz-djsel:focus-visible) { outline: 2px solid #3df0ff; outline-offset: 2px; }
#monitor .tz-djplay { position: relative; z-index: 1; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
#monitor .tz-djplay:hover { background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
#monitor .tz-djp { position: relative; flex: none; width: 44px; height: 44px; }
#monitor .tz-djp .pp { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 9px; background: color-mix(in srgb, var(--c) 30%, #0b0918);
  font: 800 15px/1 "Inter Tight", system-ui, sans-serif; color: #fff; text-shadow: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
#monitor .tz-djp .pp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#monitor .tz-dj.on .tz-djp::after { content: "✓"; position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #0b0918;
  font: 900 11px/1 "Inter Tight", system-ui, sans-serif; text-shadow: none; box-shadow: 0 0 0 2px #0b0918, 0 0 10px var(--c); }
#monitor .tz-djt { display: grid; gap: 3px; min-width: 0; }
#monitor .tz-djt b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; font: 700 var(--f)/1.15 "Inter Tight", system-ui, sans-serif; color: #fff; text-wrap: balance; }
#monitor .tz-dj .tz-djt small { min-width: 0; font: 500 calc(var(--f) * .72)/1.2 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--g2); opacity: 1; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-dj.on .tz-djt small { color: var(--g1); }
#monitor .tz-djclip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px 0 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  font: 700 calc(var(--f) * .64)/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--c); text-shadow: none; white-space: nowrap; }
#monitor .tz-djclip > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #0b0918; font-style: normal; font-size: 8px; }
#monitor .tz-djclip.now { background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
#monitor .tz-djclip.wait > i { animation: tzBlink .5s steps(2, start) infinite; }
#monitor .tz-djclip.none { max-width: 8.5em; padding: 4px 9px; border-style: dashed; border-color: rgba(255,255,255,.28); color: var(--g2); line-height: 1.2; text-align: center; white-space: normal; }
#monitor .tz-djbar { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; pointer-events: none; }
#monitor .tz-dj.playing .tz-djbar { opacity: 1; }
#monitor .tz-djlist + .tz-djc { margin-top: 12px; }

/* step 4: the DJ who will host, ready to talk. Photo, name and station, a state line, a level meter while on air */
#monitor .tz-djc { --c: #7dff8f; position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ph meta eq" "btn btn btn"; align-items: center; gap: 10px 12px;
  margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, rgba(255,255,255,.1));
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--c) 7%, var(--surf)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .3s, box-shadow .3s; }
#monitor .tz-djc.on { border-color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
#monitor .tz-djc.tz-glow { animation: tzGlow .75s ease-out; }
#monitor .tz-djph { grid-area: ph; position: relative; display: block; width: 58px; height: 58px; }
#monitor .tz-djph .pp { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, #0b0918);
  font: 800 18px/1 "Inter Tight", system-ui, sans-serif; color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
#monitor .tz-djph .pp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#monitor .tz-djm { grid-area: meta; min-width: 0; }
#monitor .tz-djst { display: flex; align-items: center; gap: 7px; margin: 0 0 5px !important; font: 700 calc(var(--f) * .68)/1.2 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
#monitor .tz-djst i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: tzPulse 2.4s ease-in-out infinite; }
#monitor .tz-djc[data-state="mic"] .tz-djst i { background: #ff2daa; box-shadow: 0 0 8px #ff2daa; animation: tzBlink 1.2s steps(2, start) infinite; }
#monitor .tz-djc[data-state="tune"] .tz-djst i { animation: tzBlink .5s steps(2, start) infinite; }
#monitor .tz-djn { margin: 0 !important; font: 800 calc(var(--f) * 1.08)/1.15 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-djs { margin: 2px 0 0 !important; font: 500 calc(var(--f) * .8)/1.25 "Inter Tight", system-ui, sans-serif; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .tz-djeq { grid-area: eq; display: flex; align-items: flex-end; gap: 3px; height: 22px; }
#monitor .tz-djeq i { width: 3px; height: 30%; border-radius: 2px; background: color-mix(in srgb, var(--c) 55%, #3a3550); transition: height .3s; }
#monitor .tz-djc.on .tz-djeq i { background: var(--c); box-shadow: 0 0 6px var(--c); animation: tzEq .9s ease-in-out infinite alternate; }
#monitor .tz-djc.on .tz-djeq i:nth-child(2) { animation-delay: -.3s; } #monitor .tz-djc.on .tz-djeq i:nth-child(3) { animation-delay: -.6s; } #monitor .tz-djc.on .tz-djeq i:nth-child(4) { animation-delay: -.15s; }
@keyframes tzEq { from { height: 20%; } to { height: 100%; } }
#monitor .tz-djc .tz-play { grid-area: btn; justify-content: center; width: 100%; }
#monitor .tz-djc + .tz-listen { margin-top: 10px; padding-top: 0; border-top: 0; }

/* the confirm moment (no pop-up): the foot asks, in the same panel, with a neon edge and a flare as it opens */
#monitor .tz-conf { position: relative; overflow: hidden; margin: 0 0 10px; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid rgba(125,255,143,.55);
  background: linear-gradient(180deg, rgba(125,255,143,.09), rgba(125,255,143,.02)); box-shadow: inset 0 0 18px rgba(125,255,143,.08), 0 0 20px rgba(125,255,143,.16); }
#monitor .tz-conf[hidden] { display: none; }
#monitor .tz-foot.confirm .tz-get { display: none; }
#monitor .tz-conf.tz-cin { animation: tzFadeIn .38s var(--tz-ease2) both; }
#monitor .tz-conf.tz-cin::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(125,255,143,.28) 45%, rgba(255,255,255,.3) 50%, rgba(125,255,143,.28) 55%, transparent); transform: translateX(-110%); animation: rsSweep .9s var(--tz-ease2) .1s forwards; }
#monitor .tz-ck { display: flex; align-items: center; gap: 7px; margin: 0 0 5px !important; font: 700 calc(var(--f) * .7)/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #7dff8f; }
#monitor .tz-ck i { width: 7px; height: 7px; border-radius: 50%; background: #7dff8f; box-shadow: 0 0 8px #7dff8f; animation: tzPulse 1.6s ease-in-out infinite; }
#monitor .tz-ct, #monitor .tz-ce { font: 500 calc(var(--f) * .86)/1.38 "Inter Tight", system-ui, sans-serif; color: #dcd7ea; }
#monitor .tz-ce { margin-top: 3px !important; color: var(--g1); }
#monitor .tz-conf b { font-weight: 700; color: #fff; }
#monitor .tz-foot.confirm .tz-go { --c: #7dff8f; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #5ff07a, #9dffae 55%, #5ff07a); color: #032a0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 24px rgba(125,255,143,.5), 0 8px 22px -10px rgba(125,255,143,.8); }

/* ================= the loading screen (the making screen, pane 7): same words, the new look =================
   Clean and clinical on a dark glass screen with a neon edge: the chrome gold logo top left, the phases as Tesla-style
   step bars that fill with a bright tip (--sp from press-room.js), clear task rows whose progress runs along a neon
   line, a thin status bar with a glowing tip, and a flare and fade each time the phase changes (.pr-flash). */
#monitor .scr.pressing .rlbar { display: none !important; }
#monitor .scr.pressing::after { opacity: .2; }
#monitor .scr.pressing > .veil { opacity: 0; }
#monitor .pane.press { --f: 14px; --line: rgba(255,255,255,.09); --g1: #b6b0c8; --g2: #7b7590; position: relative; overflow-y: auto; padding: 12px 14px 12px; color: #fff; text-shadow: none;
  font: 500 var(--f)/1.35 "Inter Tight", system-ui, sans-serif;
  background: radial-gradient(90% 50% at 15% 0%, rgba(255,45,170,.12), transparent 60%), radial-gradient(70% 45% at 100% 100%, rgba(61,240,255,.09), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.95), rgba(3,2,10,.98)); }
#monitor .scr.pressing::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,45,170,.5), inset 0 0 24px rgba(255,45,170,.14), inset 0 -2px 0 rgba(61,240,255,.45); }
html.phone-panels.lens #monitor.lens-on:has(.scr.pressing) .mframe { border-width: 0; border-image: none; border-radius: 0; filter: none; }
html.phone-panels.lens #monitor.lens-on .scr.pressing, html.phone-panels.lens #monitor.lens-on .scr.pressing::before { border-radius: 0; }
html.phone-panels.lens #monitor.lens-on .pane.press { --f: 15px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); }
#monitor .pr { --pc: #ffb347; --pk: #ff2daa; --cy: #3df0ff; position: relative; gap: 9px; font: 500 var(--f)/1.35 "Inter Tight", system-ui, sans-serif; color: #fff; text-shadow: none; }
#monitor .pr-brand { flex: none; display: flex; align-items: center; min-height: 30px; padding-right: 44px; }
#monitor .pr-brand .tz-logo { --logo-h: 20px; }
html.phone-panels.lens #monitor.lens-on .pr-brand { min-height: 44px; padding-right: 56px; }
html.phone-panels.lens #monitor.lens-on .pr-brand .tz-logo { --logo-h: 22px; }
/* the phases: step bars, the current one filling with a white tip; done ones full, with their tick */
#monitor .pr-top { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; padding: 0; border: 0; font: 700 calc(var(--f) * .8)/1.1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--g2); }
#monitor .pr-top::before, #monitor .pr-top::after, #monitor .pr-top .sq { display: none; }
#monitor .pr-top span { position: relative; min-width: 0; padding: 0 0 12px; opacity: 1; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
#monitor .pr-top span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; top: auto; width: auto; height: 3px; border: 0; border-radius: 3px; background: rgba(255,255,255,.12); }
#monitor .pr-top span.on, #monitor .pr-top span.done { color: #fff; }
#monitor .pr-top span.done::before { background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 55%, transparent), var(--pk)); box-shadow: 0 0 8px var(--pk); }
#monitor .pr-top span.on::before { background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 55%, transparent), var(--pk)) 0 0 / calc(var(--sp, 0) * 100%) 100% no-repeat, rgba(255,255,255,.12); box-shadow: 0 0 8px color-mix(in srgb, var(--pk) 60%, transparent); }
#monitor .pr-top span.on::after { content: ""; position: absolute; left: calc(var(--sp, 0) * (100% - 7px)); bottom: 1px; top: auto; right: auto; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px var(--pk), 0 0 14px 3px color-mix(in srgb, var(--pk) 55%, transparent); animation: tzTip 2.4s ease-in-out infinite; }
#monitor .pr-top span.done::after { content: " ✓"; position: static; width: auto; height: auto; border: 0; color: var(--pk); }
#monitor .pr-subtabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; opacity: 1; font: 600 calc(var(--f) * .8)/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .04em; }
#monitor .pr-subtabs span { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: var(--g1); transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
#monitor .pr-subtabs span.on { color: #fff; border-color: var(--cy); background: color-mix(in srgb, var(--cy) 14%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--cy) 35%, transparent); }
#monitor .pr-mode { display: flex; align-items: center; gap: 7px; text-align: left; font: 700 calc(var(--f) * .8)/1 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--pk); text-shadow: none; }
#monitor .pr-mode::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pk); box-shadow: 0 0 8px var(--pk); animation: tzPulse 2.4s ease-in-out infinite; }
#monitor .pr-main { gap: 10px; min-height: 120px; }
/* task rows and lyrics: label rows with a coloured edge; the one in progress lights up, its progress a neon line */
#monitor .pr-list { padding-right: 4px; scrollbar-color: rgba(255,255,255,.2) transparent; }
#monitor .pr-list p { gap: 9px; align-items: baseline; padding: 6px 8px 7px 12px; margin: 0; border-bottom: 1px solid rgba(255,255,255,.06); font: 600 calc(var(--f) * .96)/1.3 "Inter Tight", system-ui, sans-serif; color: var(--g1); background: none; }
#monitor .pr-list p::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .3s, box-shadow .3s; }
#monitor .pr-list p b { display: none; }
#monitor .pr-list p .fill { top: auto; bottom: 0; height: 2px; opacity: 0; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 40%, transparent), var(--pc)); box-shadow: 0 0 8px var(--pc); }
#monitor .pr-list p.now { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 14%, transparent), transparent 80%); }
#monitor .pr-list p.now::before { background: var(--pc); box-shadow: 0 0 10px var(--pc); }
#monitor .pr-list p.now .fill { opacity: 1; }
#monitor .pr-list p.now span, #monitor .pr-list p.now b { color: #fff; text-shadow: none; }
#monitor .pr-list p.done { opacity: 1; color: #d9d4e8; }
#monitor .pr-list p.done::before { background: var(--pk); box-shadow: 0 0 6px var(--pk); }
#monitor .pr-list p.done span::after { color: var(--pk); }
#monitor .pr-list.lyr p { font: 500 calc(var(--f) * .9)/1.35 "Inter Tight", system-ui, sans-serif; color: #e6e1f2; padding-top: 4px; padding-bottom: 5px; border-bottom-color: transparent; }
#monitor .pr-list.lyr p.tag { margin-top: 6px; font: 700 calc(var(--f) * .7)/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--pk); }
#monitor .pr-list.lyr p.tag::before { background: var(--pk); box-shadow: 0 0 6px var(--pk); }
#monitor .pr-list.lyr p.dj { color: var(--cy); }
#monitor .pr-list.lyr p.dj::before { background: var(--cy); }
#monitor .pr-list p.flowin { animation: tzFadeIn .5s var(--tz-ease2) both; }
#monitor .pr-art { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 18px rgba(255,45,170,.12); }
#monitor .pr-stats { border-spacing: 0 3px; font: 600 calc(var(--f) * .86)/1.2 "Inter Tight", system-ui, sans-serif; }
#monitor .pr-stats th, #monitor .pr-stats td { padding: 4px 7px; background: rgba(255,255,255,.04); line-height: 1.2; }
#monitor .pr-stats th { border-radius: 8px 0 0 8px; font-weight: 600; color: var(--g1); }
#monitor .pr-stats td:nth-child(2) { color: var(--pc); }
#monitor .pr-stats td:last-child { border-radius: 0 8px 8px 0; min-width: 2.6em; font: 700 calc(var(--f) * .88)/1.2 "JetBrains Mono", monospace; color: #fff; }
#monitor .pr-chips { gap: 5px; }
#monitor .pr-chips span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: none; font: 700 calc(var(--f) * .74)/1 "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--g1); transition: background .25s, color .25s, border-color .25s; }
#monitor .pr-chips span.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 18%, transparent); color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 35%, transparent); }
/* the status line: the words, then a thin bar that fills with a bright tip */
#monitor .pr-status { flex-wrap: wrap; gap: 7px 10px; font: 700 calc(var(--f) * .8)/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; color: #fff; }
#monitor .pr-status span { flex: 1 1 100%; }
#monitor .pr-pbar { position: relative; flex: 1 1 100%; height: 3px; border: 0; border-radius: 3px; background: rgba(255,255,255,.12); }
#monitor .pr-pbar i { position: relative; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--cy) 45%, transparent), var(--cy)); box-shadow: 0 0 8px var(--cy); transition: width .4s linear; }
#monitor .pr-pbar i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px var(--cy), 0 0 14px 3px color-mix(in srgb, var(--cy) 55%, transparent); }
#monitor .pr-foot { gap: 5px; font: 600 calc(var(--f) * .82)/1.2 "Inter Tight", system-ui, sans-serif; color: var(--g1); }
#monitor .pr-foot span { padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
#monitor .pr-foot b { font-family: "JetBrains Mono", monospace; color: #fff; }
/* a new phase: a light sweep in pink and a bloom from the top, then it fades */
#monitor .pr.pr-flash::after { content: ""; position: absolute; inset: -12px -14px; z-index: 6; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 30% at 50% 0%, rgba(255,45,170,.3), transparent 70%), linear-gradient(105deg, transparent 30%, rgba(255,45,170,.16) 45%, rgba(255,255,255,.14) 50%, rgba(255,45,170,.16) 55%, transparent 70%) -100% 0 / 220% 100% no-repeat;
  animation: prFlash .9s var(--tz-ease2) both; }
@keyframes prFlash { 0% { opacity: 0; background-position: 0 0, 160% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: 0 0, -60% 0; } }
/* ready: the same words, the new look */
#monitor .pr-ready { gap: 8px; padding-top: 6px; background: none; font-family: "Inter Tight", system-ui, sans-serif; }
#monitor .pr-hero { padding: 16px 10px 14px; border-radius: 14px; border: 1px solid rgba(255,45,170,.45); background: radial-gradient(70% 120% at 50% 0%, rgba(255,45,170,.22), rgba(10,8,30,.2) 70%); box-shadow: 0 0 22px rgba(255,45,170,.18); animation: tzFadeIn .5s var(--tz-ease2) both; }
#monitor .pr-hero b { font: 900 calc(var(--f) * 2)/1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; }
#monitor .pr-hero small { margin-top: 6px; font: 700 calc(var(--f) * .72)/1.3 "JetBrains Mono", monospace; letter-spacing: .1em; }
#monitor .pr-ring { opacity: .5; }
#monitor .pr-row { gap: 8px; margin-top: 4px; }
#monitor .pr-ready .pr-play { position: relative; overflow: hidden; min-height: 48px; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #5ff07a, #9dffae 55%, #5ff07a); color: #032a0c; font: 800 calc(var(--f) * .98)/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 22px rgba(125,255,143,.45); }
#monitor .pr-row .pr-buy { min-height: 46px; border-radius: 13px; border: 1px solid #ffb347; background: rgba(255,179,71,.1); color: #fff; font: 700 calc(var(--f) * .92)/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; box-shadow: 0 0 14px rgba(255,179,71,.22); }
#monitor .pr-info { margin-top: 2px; font: 500 calc(var(--f) * .82)/1.4 "Inter Tight", system-ui, sans-serif; color: var(--g1); }
#monitor .pr-ph { font: 600 calc(var(--f) * .74)/1.3 "JetBrains Mono", monospace; color: #ffd23f; }
#monitor .pr-again { min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); color: #ebe6f6; font: 600 calc(var(--f) * .9)/1 "Inter Tight", system-ui, sans-serif; }
/* feedback-r33 (David, 2 Nov): on the desktop "Your song is ready" is taller than the screen's monitor, so NEW REQUEST
   (last in the markup) was below the fold. It now sits in the top block, right above the headline, on the right. */
html.v-d:not(.phone-panels) #monitor .pr-again { align-self: flex-end; min-height: 36px; padding: 0 14px; }
html.v-d #press .pr-list.lyr { overflow-y: auto; }
html.v-d #press .pr-list.lyr p { overflow: visible; height: auto; white-space: normal; }
/* the phone's "your DJ script" call at the foot of the loading screen: a glass card, a Tesla bar, a flare when it's ready */
#monitor .djs-call { position: relative; overflow: hidden; margin-top: 10px; padding: 0; border-radius: 14px; border: 1px solid rgba(61,240,255,.4); background: linear-gradient(180deg, rgba(61,240,255,.07), rgba(61,240,255,.02)); box-shadow: none; animation: none; }
#monitor .djs-call::before, #monitor .djs-call::after { display: none; }
#monitor .djs-call button { width: 100%; min-height: 58px; padding: 10px 14px; border-radius: inherit; font: 700 calc(var(--f) * .82)/1.2 "JetBrains Mono", monospace; letter-spacing: .1em; color: #e6e1f2; text-shadow: none; }
#monitor .djs-call button small { display: block; margin-top: 6px; font: 600 calc(var(--f) * .68)/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--g1); }
#monitor .djs-call .djs-bar { position: relative; display: block; height: 3px; margin: 9px 0 0; border: 0; border-radius: 3px; overflow: visible; background: rgba(255,255,255,.12); }
#monitor .djs-call .djs-bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(61,240,255,.4), #3df0ff); box-shadow: 0 0 8px #3df0ff; }
#monitor .djs-call .djs-bar i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px #3df0ff, 0 0 12px 3px rgba(61,240,255,.5); }
#monitor .djs-call.ready { border-color: #3df0ff; background: linear-gradient(180deg, rgba(61,240,255,.16), rgba(61,240,255,.05)); box-shadow: 0 0 22px rgba(61,240,255,.3); }
#monitor .djs-call.ready button { color: #fff; }
#monitor .djs-call.ready button .djs-rl { display: block; font-size: calc(var(--f) * .9); color: #3df0ff; }
#monitor .djs-call.djs-flare::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(61,240,255,.3) 40%, rgba(255,255,255,.3) 50%, rgba(61,240,255,.3) 60%, transparent); transform: translateX(-100%); animation: rsSweep .9s var(--tz-ease2) forwards; }

/* landscape phones: the screen is short, so the logo row, the pills and the script call are compact, and the screen
   scrolls (as before) rather than letting the art and the stats run into the status line */
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape #monitor .pane.press, html.phone-panels.phone-landscape.lens #monitor.lens-on .pane.press { --f: 13px; padding: 6px 14px 8px; }
  html.phone-landscape #monitor .pr { gap: 6px; }
  html.phone-landscape #monitor .pr-brand, html.phone-landscape.lens #monitor.lens-on .pr-brand { min-height: 26px; padding-right: 56px; }
  html.phone-landscape #monitor .pr-brand .tz-logo, html.phone-landscape.lens #monitor.lens-on .pr-brand .tz-logo { --logo-h: 16px; }
  html.phone-landscape #monitor .pr-subtabs span { padding: 3px 8px; }
  html.phone-landscape #monitor .pr-main { min-height: 110px; }
  html.phone-landscape #monitor .pr-stats th, html.phone-landscape #monitor .pr-stats td { padding: 2px 6px; }
  html.phone-landscape #monitor .djs-call button { min-height: 44px; padding: 6px 12px; }
  html.phone-landscape #monitor .djs-call .djs-bar { margin-top: 6px; }
}

/* ================= your DJ script (r17): the request-so-far panel system, on the desktop's right-hand screen while the
   song is made, and over the phone's loading screen when opened. Label / line rows; they light up in turn when the
   script arrives (rs-flare with a stagger, --i) and flare again when a line changes ================= */
:is(#rlside.rlside, #djsview) .djs-rs { position: relative; font: 500 15px/1.35 "Inter Tight", system-ui, sans-serif; color: #fff; text-shadow: none; letter-spacing: 0; }
#rlside.rlside .djs-side.rs { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 18px 18px 16px; }
.big .rlside:has(> .djs-side) { padding: 0; border-left-color: rgba(255,45,170,.28); background: radial-gradient(90% 40% at 0% 0%, rgba(255,45,170,.1), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.93), rgba(3,2,10,.97)); }
:is(#rlside.rlside, #djsview) .djs-rs .rs-head { flex: none; }
:is(#rlside.rlside, #djsview) .djs-rs h3.rs-h { font: 800 clamp(18px, 6.2cqw, 24px)/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; color: #fff; text-shadow: none; margin: 0; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-who { margin: 7px 0 0; font: 700 clamp(10px, 3cqw, 11.5px)/1.35 "JetBrains Mono", monospace; letter-spacing: .1em; color: #8f88a8; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-lines { flex: 1 1 0; min-height: 0; margin: 2px 0 0; padding: 0 2px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r { grid-template-columns: clamp(58px, 18cqw, 76px) minmax(0, 1fr); padding-top: calc(7px * var(--dz, 1)); padding-bottom: calc(7px * var(--dz, 1)); }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r dd { display: block; font: 500 calc(clamp(13px, 4cqw, 15.5px) * var(--dz, 1))/1.35 "Inter Tight", system-ui, sans-serif; color: #f1eef8; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r dd b { font-weight: 700; color: var(--c); }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.sec { grid-template-columns: 1fr; padding-top: 12px; padding-bottom: 6px; border-bottom-color: transparent; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.sec::before { display: none; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.sec dt { display: none; }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.sec dd { font: 700 clamp(10px, 3cqw, 11.5px)/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--c); }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.song dd { font: 700 clamp(11px, 3.4cqw, 13px)/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; color: #ff2daa; text-shadow: 0 0 10px rgba(255,45,170,.5); }
:is(#rlside.rlside, #djsview) .djs-rs .djs-r.song dt { color: #ff2daa; }
:is(#rlside.rlside, #djsview) .djs-rs.ready .djs-r.rs-flare { animation: djsIn .5s var(--tz-ease2) both; animation-delay: calc(var(--i, 0) * 70ms); }
:is(#rlside.rlside, #djsview) .djs-rs.ready .djs-r.rs-flare::before, :is(#rlside.rlside, #djsview) .djs-rs.ready .djs-r.rs-flare::after, :is(#rlside.rlside, #djsview) .djs-rs.ready .djs-r.rs-flare dd { animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes djsIn { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } }
#rlside.rlside .djs-rs .djs-sign { flex: none; position: relative; overflow: hidden; margin-top: 10px; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid rgba(255,210,63,.5); background: linear-gradient(180deg, rgba(255,210,63,.08), rgba(255,210,63,.02)); box-shadow: 0 0 16px rgba(255,210,63,.12); --c: #ffd23f; }
#rlside.rlside .djs-rs .djs-sign small { display: block; margin: 0 0 6px; font: 700 10.5px/1.2 "JetBrains Mono", monospace; letter-spacing: .12em; color: #ffd23f; }
#rlside.rlside .djs-rs .djs-sign p { margin: 0; font: 700 17px/1.3 "Inter Tight", system-ui, sans-serif; color: #fff; text-shadow: none; }
#rlside.rlside .djs-rs .djs-sign p b { font-weight: 800; color: #ffd23f; }
#rlside.rlside .djs-rs .djs-sign.rs-flare::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(255,210,63,.3) 40%, rgba(255,255,255,.25) 50%, rgba(255,210,63,.3) 60%, transparent); transform: translateX(-100%); animation: rsSweep .9s var(--tz-ease2) forwards; }
/* while it is written: the words blink, a Tesla bar fills, and empty rows shimmer where the lines will land */
#rlside.rlside .djs-rs .djs-wbox { flex: none; margin: 14px 0 6px; }
#rlside.rlside .djs-rs .djs-wait { margin: 0; font: 700 12.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; color: #3df0ff; animation: djsblink 1.4s steps(2, start) infinite; }
#rlside.rlside .djs-rs .djs-bar { position: relative; display: block; height: 3px; margin: 10px 0 12px; border-radius: 3px; background: rgba(255,255,255,.12); }
#rlside.rlside .djs-rs .djs-bar i { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(61,240,255,.4), #3df0ff); box-shadow: 0 0 8px #3df0ff; transition: width .2s linear; }
#rlside.rlside .djs-rs .djs-bar i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px #3df0ff, 0 0 12px 3px rgba(61,240,255,.5); }
#rlside.rlside .djs-rs .djs-wait2 { margin: 0; font: 500 14px/1.45 "Inter Tight", system-ui, sans-serif; color: #b6b0c8; }
#rlside.rlside .djs-rs .djs-skel dd i { display: block; height: 10px; width: calc(92% - var(--i, 0) * 9%); border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06)) 0 0 / 200% 100%; animation: djsShim 1.6s linear infinite; animation-delay: calc(var(--i, 0) * -.2s); }
@keyframes djsShim { to { background-position: -200% 0; } }
/* the phone's opened script: the panel over the loading screen, its rows scrolling, BACK at the foot */
#monitor .djs-view { padding: 0; z-index: 8; }
#djsview .djs-in.rs { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 16px 14px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,45,170,.5), inset 0 -2px 0 rgba(61,240,255,.45);
  background: radial-gradient(90% 40% at 0% 0%, rgba(255,45,170,.12), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.97), rgba(3,2,10,.99)); animation: tzArrive .38s var(--tz-ease2) both; }
html.phone-panels.lens #monitor.lens-on #djsview .djs-in.rs { padding: 62px 18px calc(14px + env(safe-area-inset-bottom)); box-shadow: none; }
#djsview .djs-in .act { flex: none; margin-top: 12px; }
#djsview .djs-in .act button.back { flex: 1; position: relative; overflow: hidden; min-height: 48px; border-radius: 13px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #ebe6f6; font: 700 13px/1 "JetBrains Mono", monospace; letter-spacing: .08em; box-shadow: none; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #monitor .pane.press *, #monitor .pane.press *::before, #monitor .pane.press *::after, #monitor .tz-djc *, #monitor .tz-conf, #monitor .tz-conf::after,
  #djsview .rs, #djsview .rs *, #djsview .rs *::before, #djsview .rs *::after, #rlside .djs-rs, #rlside .djs-rs * { animation: none !important; transition: none !important; }
  #monitor .pr.pr-flash::after { display: none; }
}
.still #monitor .pane.press *, .still #monitor .pane.press *::before, .still #monitor .pane.press *::after, .still #djsview .rs *, .still #rlside .djs-rs * { animation: none !important; transition: none !important; }

/* ================= flow-r22 (David, 1 Nov): text that fits its box; each occasion's own step 2 =================
   The typing boxes grow to a few lines, then their font steps down (fit-text.js sets it inline), scrolling only at the
   smallest size. The big headline steps down until the stage's middle fits; a word breaks only if it is wider than the
   line. Step 1: a birthday's small age field. Step 2: what they call them (Mother's / Father's Day) as chips over the own
   words box; a couple's two names side by side; no "They're your" for those. Step 3: one line saying the suggestions are
   only suggestions. */
#monitor .tz .in textarea { overscroll-behavior: contain; }
#monitor .tz .in textarea.fit-scroll { scrollbar-width: thin; }
/* the desktop sizes its fields in cqw of the monitor (night-shift-desktop.css, 4.66cqw = about 18px in the 386px
   column); zoomed, the monitor is 1328px wide and that came out at 60px, far too big for the box. Zoomed, the fields
   follow the request line's own type size instead (about the column's 18px). */
.desktop-radio.tz-full #monitor .tz .in { font-size: calc(var(--f) * 1.12); }
#monitor .tz-req { overflow-wrap: break-word; }
#monitor .tz-st-main.fit-over { overflow: hidden; }
#monitor .tz-age { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 12px 0 2px; animation: tzInR .3s var(--tz-ease); }
#monitor .tz-age[hidden] { display: none; }
#monitor .tz-age .tz-lab { margin: 0; }
#monitor .tz-age .tz-in { width: 5.2em; min-height: 40px; padding: 0 10px; text-align: center; font-weight: 700; }
#monitor .tz-agenote { font: 500 calc(var(--f) * .8)/1.3 "Inter Tight", system-ui, sans-serif; color: var(--g2); }
#monitor .tz-call { margin: 2px 0 4px; }
#monitor .tz-call[hidden], #monitor #rel[hidden], #monitor .tz-free[hidden], #monitor .tz-names [hidden] { display: none; }
#monitor .tz-names { display: flex; align-items: flex-end; gap: 10px; }
#monitor .tz-names .tz-big { flex: 1 1 0; min-width: 0; }
#monitor .tz-amp { flex: none; padding-bottom: 10px; font: 800 calc(var(--f) * 1.5)/1 "Inter Tight", system-ui, sans-serif; color: var(--c); }
#monitor .tz-free { margin: -3px 0 9px !important; font: 600 calc(var(--f) * .84)/1.35 "Inter Tight", system-ui, sans-serif; color: #ffd23f; }
/* ================= love-r25 (David, 2 Nov): asterisks, "Optional", one item at a time, prompt labels =================
   Every must-fill field has a pink asterisk on its label (or on the step's question when that is its label); every field
   that can be skipped has a small "Optional" right under it. Step 1: the "isn't listed" line in sentence case; a
   birthday's age is must-fill, its "Needed to continue" tag just right of the short box. Step 3: "Tell us about them"
   with a sub-heading naming who; a starter prompt is a label above the box (✕ takes it away); the box takes one thing and
   pulses softly (required-field.css .rq-soft) while empty and focused; each entry is a line of its own under it. */
#monitor .tz-star { margin-left: .14em; color: #ff4fbf; font-weight: 800; text-shadow: 0 0 8px rgba(255,79,191,.55); }
#monitor .tz-lab .tz-star { letter-spacing: 0; }
#monitor .tz-opt { margin: 5px 0 0; font: 500 calc(var(--f) * .72)/1.2 "Inter Tight", system-ui, sans-serif; letter-spacing: .02em; color: var(--g2); }
#monitor .tz-opt[hidden] { display: none; }
#monitor .tz-lab.tz-ownlab { margin-top: 16px; font: 600 calc(var(--f) * .9)/1.35 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--g1); }
#monitor .tz-age #age-l, #monitor .tz-age .tz-agenote { flex: 1 0 100%; }
#monitor .tz-age .rq-req { flex: none; }
#monitor .tz-about { margin: -6px 0 8px; font: 700 calc(var(--f) * 1.12)/1.25 "Inter Tight", system-ui, sans-serif; color: var(--c); overflow-wrap: anywhere; }
#monitor .tz-q { display: flex; align-items: center; gap: 8px; margin: 2px 0 7px; font: 700 calc(var(--f) * .95)/1.3 "Inter Tight", system-ui, sans-serif; color: var(--c); animation: tzInR .25s var(--tz-ease); }
#monitor .tz-q[hidden] { display: none; }
#monitor .tz-q span { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
#monitor .tz-qx { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #fff; font-size: 12px; opacity: .6; background: rgba(255,255,255,.06); }
#monitor .tz-qx:hover { opacity: 1; background: rgba(255,255,255,.12); }
#monitor .tz-compose > .rq-req { flex: 1; min-width: 0; display: flex; }
#monitor .tz-compose > .rq-req > .in { flex: 1; min-width: 0; }
#monitor .tz-compose.full > .rq-req > .in { opacity: .45; }
#monitor .tz-entries { list-style: none; margin: 10px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#monitor .tz-entries[hidden] { display: none; }
#monitor .tz-ent { display: flex; align-items: flex-start; gap: 6px; padding: 7px 4px 7px 11px; border-left: 3px solid var(--c); border-radius: 8px; background: rgba(255,255,255,.05);
  font: 500 calc(var(--f) * .92)/1.35 "Inter Tight", system-ui, sans-serif; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; }
#monitor .tz-ent > span { flex: 1; min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
#monitor .tz-ent b { font-weight: 700; color: var(--c); }
#monitor .tz-ent button { flex: none; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 999px; color: #fff; font-size: 12px; opacity: .6; }
#monitor .tz-ent button:hover { opacity: 1; background: rgba(255,255,255,.1); }
#monitor .tz-entries .tk.edit { flex: none; }
@media (prefers-reduced-motion: reduce) { #monitor .tz-q { animation: none; } }

/* r171: the optional Pronoun choice under "Their name" */
#monitor .tz-pn { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#monitor .tz-pn .tz-pn-l { margin: 0; }
#monitor .tz-pn select, #monitor .tz-pn input { min-height: 36px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--c, #3df0ff) 60%, transparent); background: rgba(255,255,255,.04); color: inherit; font: inherit; padding: 0 10px; }
#monitor .tz-pn input { width: 9em; }
#monitor .tz-pn [hidden] { display: none; }