/* ideas.fumbleupon v1.0: the room, the set, and the big screen.
 *
 * The brand's own tokens ("Digital Quartz"), its components (.fu-btn, the
 * gold metal buttons, the periwinkle pill, .fu-card, .fu-plate, the trail),
 * and its ideals: one room and one light, the window on the right and the
 * shadows falling left; ink only on the layer above (cards, buttons, signs
 * get the black line and the hard shadow); one periwinkle action on a
 * screen; objects work when touched; nothing breaks.
 *
 * Over everything, YouTube's rule for its player: nothing in front of any
 * part of it, nothing cut from it. The set's scanlines, roll, channel number
 * and caption are on the still only, and gone whenever a player is up.
 */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(fonts/brand/nunito-latin.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url(fonts/brand/cormorant-garamond-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(fonts/brand/big-shoulders-stencil-latin.woff2) format('woff2'); }

:root {
  --fu-paper: #EDF4FC; --fu-cream: #E6F0FA; --fu-platinum: #D5E2EE;
  --fu-ink: #141A24; --fu-ink-soft: #364454; --fu-steel: #A9B4BF;
  --fu-sky: #D6EAFB; --fu-sky-deep: #8CC8F2; --fu-mint: #DDF5E3; --fu-butter: #F3E6CB;
  --fu-blush: #FFE3DD; --fu-lilac: #EFE4FF; --fu-sea: #D7F7F3;
  --fu-red: #6C5BF0; --fu-lamp: #E6CDA0; --fu-orange: #9B8CFF; --fu-blue: #2F6FC4;
  --fu-s1: #FF4D3D; --fu-s2: #FF8A1F; --fu-s3: #E6CDA0; --fu-s4: #3FD36B; --fu-s5: #3B8BFF; --fu-s6: #9B5CFF;
  --fu-font-display: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fu-font-voice: 'Cormorant Garamond', Garamond, Georgia, serif;
  --fu-font-label: 'Big Shoulders Stencil', Impact, 'Arial Narrow', sans-serif;
  --fu-mono: 'Courier New', ui-monospace, monospace;
  --fu-line: 3px; --fu-line-bold: 4px;
  --fu-shadow: 4px 4px 0 var(--fu-ink); --fu-shadow-lift: 7px 7px 0 var(--fu-ink);
  --fu-radius-s: 8px; --fu-radius-m: 14px; --fu-radius-pill: 999px;
  --fu-spring: cubic-bezier(.34, 1.56, .64, 1); --fu-ease: cubic-bezier(.4, 0, .2, 1);
  --fu-fast: 120ms; --fu-mid: 260ms; --fu-slow: 650ms;
  /* the always-black line and shadow of the metal buttons and plates */
  --ink-hard: #141A24;
  --gold: linear-gradient(180deg, #FFF3D6 0%, #F2D9A6 38%, #E2C083 62%, #C9A35E 100%);
  --gold-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(120,90,40,.25), 3px 3px 0 var(--ink-hard);
  --tube: #0E121C;
  --tv-glow: #998269;
  --star: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  color-scheme: light;
}
.fu-night {
  --fu-paper: #0F1522; --fu-cream: #1A2232; --fu-platinum: #222B3D;
  --fu-ink: #E6F0FA; --fu-ink-soft: #B7C7D6;
  --fu-sky: #1C2B45; --fu-mint: #17302A; --fu-butter: #33301C; --fu-blush: #3A2426;
  --fu-lilac: #2A2340; --fu-sea: #15322F; --fu-blue: #8CC8F2;
  --fu-shadow: 4px 4px 0 #05080E; --fu-shadow-lift: 7px 7px 0 #05080E;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fu-paper); transition: background-color .6s; }
html.lock-scroll { overflow: hidden; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100svh; background: var(--fu-paper); color: var(--fu-ink); font: 600 16px/1.45 var(--fu-font-display); transition: background-color .6s, color .6s; overflow-x: hidden; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--fu-orange); }
h1, h2 { font-family: var(--fu-font-display); font-weight: 900; letter-spacing: -.03em; }
:focus-visible { outline: 3px dashed var(--fu-blue); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.icon .fill, symbol .fill { fill: currentColor; stroke: none; }
.icon.heart { color: #FF6B8B; width: 15px; height: 15px; }
kbd { font: 800 .72em/1 var(--fu-mono); padding: 3px 6px; border-radius: 5px; border: 2px solid currentColor; opacity: .7; }
[hidden] { display: none !important; }
.fu-voice { font-family: var(--fu-font-voice); font-style: italic; font-weight: 500; }
.lbl { font-family: var(--fu-font-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- brand components */
.fu-btn {
  font: 900 16px/1.1 var(--fu-font-display); color: var(--ink-hard);
  background: var(--fu-butter) var(--gold); border: var(--fu-line) solid var(--ink-hard); border-radius: var(--fu-radius-s);
  padding: 10px 16px; min-height: 44px; box-shadow: var(--gold-shadow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; position: relative;
  transition: transform var(--fu-fast) var(--fu-ease), box-shadow var(--fu-fast) var(--fu-ease), filter var(--fu-fast);
}
.fu-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(120,90,40,.25), 4px 4px 0 var(--ink-hard); }
.fu-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 var(--ink-hard); }
.fu-btn:disabled { filter: grayscale(.6) opacity(.6); }
.fu-btn kbd { border-color: rgba(20,26,36,.45); opacity: .8; }
.fu-btn.small { min-height: 38px; padding: 6px 13px; font-size: 14px; }
.fu-btn--primary {
  color: #F7FAFE; background: var(--fu-red) linear-gradient(180deg, #8E80FF 0%, #6C5BF0 55%, #5847D8 100%);
  border-radius: var(--fu-radius-pill); border-color: var(--ink-hard);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35), 0 5px 0 var(--ink-hard);
}
.fu-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35), 0 6px 0 var(--ink-hard); }
.fu-btn--primary:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 1px 0 var(--ink-hard); }
.fu-btn--primary kbd { border-color: rgba(247,250,254,.6); }
/* the sparkle a primary button catches when the pointer comes */
.fu-btn--primary::after { content: ''; position: absolute; right: -7px; top: -8px; width: 15px; height: 15px; background: #FFF6DA; clip-path: var(--star); opacity: 0; transform: scale(0); transition: all .25s var(--fu-spring); pointer-events: none; filter: drop-shadow(0 0 3px #FF8FB1); }
.fu-btn--primary:hover:not(:disabled)::after { opacity: 1; transform: scale(1) rotate(45deg); }
.fu-card, .vcard { background: var(--fu-cream); color: var(--fu-ink); border: var(--fu-line) solid var(--fu-ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--fu-ink); }
.fu-night .vcard { box-shadow: 5px 5px 0 #05080E; border-color: #3A4860; }
.fu-trail { display: block; border: 0; height: 18px; margin: 40px auto; width: min(320px, 60%); border-radius: 2px; background: linear-gradient(var(--fu-s1), var(--fu-s1)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--fu-s2), var(--fu-s2)) 0 3px / 100% 2px no-repeat, linear-gradient(var(--fu-s3), var(--fu-s3)) 0 6px / 100% 2px no-repeat, linear-gradient(var(--fu-s4), var(--fu-s4)) 0 9px / 100% 2px no-repeat, linear-gradient(var(--fu-s5), var(--fu-s5)) 0 12px / 100% 2px no-repeat, linear-gradient(var(--fu-s6), var(--fu-s6)) 0 15px / 100% 2px no-repeat, var(--fu-ink); }
.text-button { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text-button:hover { text-decoration-color: var(--fu-orange); }

/* ---------------------------------------------------------------- the room */
/* The room's box; machine.js sets --s (the plate's scale) and --ox, --oy
 * (where its corner lands), and every prop is placed in plate pixels. */
.room { position: relative; width: 100%; height: clamp(540px, min(100svh, 55.84vw), 1120px); overflow: hidden; background: #DCD6CF; isolation: auto; --s: 1; --ox: 0px; --oy: 0px; }
.fu-night .room { background: #141B2A; }
.plate { position: absolute; left: var(--ox); top: var(--oy); width: calc(1440px * var(--s)); height: calc(804px * var(--s)); max-width: none; user-select: none; pointer-events: none; transition: opacity .55s ease, transform .65s var(--fu-ease), filter .65s var(--fu-ease); transform-origin: calc(875px * var(--s)) calc(380px * var(--s)); }
/* The camera: the plates and the set's glow, which the view pushes into on
 * the way to the big screen. While the big screen is up (and on the way to
 * and from it) it is pinned over the room's own box, free to grow past it. */
.camera { position: absolute; inset: 0; overflow: hidden; }
.camera.pinned { position: fixed; inset: auto; z-index: 7; will-change: transform; }
.plate.dk { opacity: 0; }
.fu-night .plate.dk { opacity: 1; }
.tvglow { position: absolute; left: calc(var(--ox) + 368px * var(--s)); top: calc(var(--oy) + 76px * var(--s)); width: calc(1003px * var(--s)); height: calc(728px * var(--s)); pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .6s, background .4s; background: radial-gradient(ellipse 46% 60% at 50% 72%, var(--tv-glow) 0, rgba(0,0,0,0) 70%); }
.fu-night .tvglow { opacity: .55; animation: tv-flick 2.3s steps(6) infinite; }
@keyframes tv-flick { 0%, 100% { filter: brightness(1); } 20% { filter: brightness(.82); } 45% { filter: brightness(1.08); } 70% { filter: brightness(.9); } }

/* The masthead stands on the wall, top left; the wall is plain there. */
.masthead { position: absolute; inset: 0 0 auto 0; padding: clamp(14px, calc(18px * var(--s)), 30px) clamp(16px, calc(62px * var(--s)), 80px) 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "sub friends"; align-items: start; gap: 6px 24px; z-index: 8; pointer-events: none; color: #141A24; transition: color .5s; }
.masthead > * { pointer-events: auto; }
.fu-night .masthead { color: #EAF2FB; }
.brand-heading { grid-area: brand; margin: 0; font-size: clamp(46px, min(calc(84px * var(--s)), 12.6vw), 118px); line-height: 1; letter-spacing: 0; }
.sub { grid-area: sub; margin: -.1em 0 0 .25em; font-size: clamp(18px, calc(23px * var(--s)), 28px); line-height: 1.3; color: #33414F; transition: color .5s; }
.fu-night .sub { color: #B7C7D6; }
.site-nav { grid-area: nav; display: flex; gap: 10px; justify-self: end; }
.chip { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.chip .count { font: 800 12px/1 var(--fu-mono); background: #141A24; color: #F3E6CB; border-radius: 999px; padding: 3px 7px; }
.partners { grid-area: friends; justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.partner-label { font-family: var(--fu-font-voice); font-style: italic; font-size: 17px; opacity: .8; }
.partner { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; text-decoration: none; background: rgba(237,244,252,.72); border: 2px solid currentColor; border-radius: 999px; padding: 3px 10px; }
.fu-night .partner { background: rgba(15,21,34,.6); }
.partner:hover { text-decoration: underline; }
.sticker { display: block; width: 46px; transform: rotate(6deg); transition: transform var(--fu-mid) var(--fu-spring); }
.sticker:hover { transform: rotate(-4deg) scale(1.12); }
.sticker-art { display: block; width: 100%; height: auto; filter: drop-shadow(2px 3px 0 rgba(20,26,36,.35)); }

/* the wordmark */
.fu-wordmark { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.fu-wordmark__lead { font-family: var(--fu-font-voice); font-style: italic; font-weight: 500; font-size: .32em; letter-spacing: .01em; padding-left: .2em; margin-bottom: .04em; }
.fu-wordmark__row { display: inline-flex; align-items: flex-end; }
.wmbtn { display: inline-flex; cursor: pointer; color: inherit; }
.fu-wordmark__main { position: relative; display: inline-flex; font-family: var(--fu-font-display); font-weight: 900; letter-spacing: -.045em; line-height: .86; text-shadow: .045em .045em 0 #9B8CFF, .085em .085em 0 #FF8FB1; transition: text-shadow .4s; }
/* a press of fumble tints the shadow through the trail, and thirty seconds still turns it back */
body[data-word="1"] .fu-wordmark__main { text-shadow: .045em .045em 0 var(--fu-s5), .085em .085em 0 var(--fu-s4); }
body[data-word="2"] .fu-wordmark__main { text-shadow: .045em .045em 0 var(--fu-s2), .085em .085em 0 var(--fu-s1); }
body[data-word="3"] .fu-wordmark__main { text-shadow: .045em .045em 0 var(--fu-s6), .085em .085em 0 var(--fu-s3); }
.fu-wordmark__main::after, .fu-wordmark__main::before { content: ''; position: absolute; clip-path: var(--star); pointer-events: none; animation: fu-glint 3.2s ease-in-out infinite; }
.fu-wordmark__main::after { right: -.12em; top: -.06em; width: .2em; height: .2em; background: #F6D486; filter: drop-shadow(0 0 .04em #fff); }
.fu-wordmark__main::before { right: .32em; top: -.16em; width: .1em; height: .1em; background: #FF8FB1; animation-delay: 1.1s; }
@keyframes fu-glint { 0%, 62%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 70% { transform: scale(1.25) rotate(45deg); opacity: 1; } 82% { transform: scale(.9) rotate(90deg); opacity: 1; } 92% { transform: scale(0) rotate(135deg); opacity: 0; } }
.fu-l { display: inline-block; transform-origin: 50% 90%; }
/* each letter hops on its own, as the pointer passes it (machine.js) */
.fu-l.hop { animation: fu-hop .5s var(--fu-ease); }
@keyframes fu-hop { 30% { transform: translateY(-.14em) rotate(-4deg); } 55% { transform: translateY(0) scale(1.06, .92); } 75% { transform: translateY(-.03em) rotate(2deg); } }
@keyframes fu-jiggle { 30% { transform: rotate(-6deg) translateY(-.04em); } 60% { transform: rotate(4deg); } }
.fu-wordmark__tail { font-family: var(--fu-font-display); font-weight: 900; font-size: .42em; display: inline-flex; align-items: flex-end; gap: .02em; padding-bottom: .12em; }
.wm13 .fu-wordmark__tail { font-size: .5em; padding-bottom: .1em; gap: 0; letter-spacing: -.01em; }
.wm13 .fu-wordmark__tail .fu-l:nth-child(2) { font-size: .96em; transform: translateY(.02em) rotate(4deg); }
.wm13 .fu-wordmark__tail .fu-l:nth-child(3) { font-size: .9em; transform: translateY(.04em) rotate(-5deg); }
.wm13 .fu-wordmark__tail .fu-l:nth-child(4) { font-size: .84em; margin-left: -.03em; transform: translateY(.06em) rotate(7deg); }
.tw { position: relative; display: inline-flex; align-items: flex-end; margin-left: .08em; }
.uponbox { display: inline-flex; align-items: flex-end; max-width: 2.2em; overflow: visible; transition: max-width .8s cubic-bezier(.6,0,.3,1), opacity .6s; }
.g-idea.ph-fade .uponbox, .g-idea.ph-done .uponbox { max-width: 0; opacity: 0; }
.g-idea.ph-back .uponbox { transition: max-width .6s, opacity .6s .1s; }
.dotideas { position: relative; font-family: var(--fu-font-display); font-weight: 900; font-size: .5em; letter-spacing: -.02em; padding-bottom: .1em; margin-left: .04em; transition: margin .8s, font-size .8s; }
.g-idea.ph-fade .dotideas, .g-idea.ph-done .dotideas { margin-left: 0; font-size: .62em; }
.ii { position: relative; display: inline-block; }
.ii .idot { position: absolute; left: 50%; bottom: .79em; width: .21em; height: .21em; margin-left: -.105em; border-radius: 50%; background: currentColor; transition: transform .25s cubic-bezier(.5,0,.75,0), opacity .25s; }
.g-idea.ph-pop .idot, .g-idea.ph-on .idot, .g-idea.ph-fade .idot, .g-idea.ph-done .idot { transform: scale(0) translateY(.1em); opacity: 0; }
.bulb2 { position: absolute; left: 50%; bottom: .5em; width: .36em; height: .65em; margin-left: -.18em; transform: scale(0); transform-origin: 50% 100%; transition: transform .42s cubic-bezier(.34,1.7,.64,1) .08s; pointer-events: none; z-index: 20; }
.bulb2 img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.bulb2 .on { opacity: 0; transition: opacity .2s; }
.g-idea.ph-pop .bulb2, .g-idea.ph-on .bulb2, .g-idea.ph-fade .bulb2, .g-idea.ph-done .bulb2 { transform: scale(1); }
.g-idea.ph-back .bulb2 { transition: transform .3s cubic-bezier(.5,0,.75,0); }
.g-idea.ph-on .bulb2 .on, .g-idea.ph-fade .bulb2 .on, .g-idea.ph-done .bulb2 .on { opacity: 1; filter: drop-shadow(0 0 .08em #E6CDA0) drop-shadow(0 0 .25em #C8AF80); }
.g-idea.ph-on .bulb2, .g-idea.ph-fade .bulb2, .g-idea.ph-done .bulb2 { animation: bulb-buzz 2.4s steps(1) 1; }
@keyframes bulb-buzz { 0% { filter: brightness(1); } 6% { filter: brightness(.5); } 9% { filter: brightness(1.1); } 12% { filter: brightness(.7); } 15%, 100% { filter: brightness(1); } }
/* the stars that catch the light now and then, and all at once on a fumble */
.twinkle { position: absolute; left: var(--x); top: var(--y); width: .16em; height: .16em; pointer-events: none; color: #F6D486; opacity: 0; transform: scale(0); }
.twinkle .icon { width: 100%; height: 100%; filter: drop-shadow(0 0 .03em #fff); }
.twinkle.on { animation: twinkle .9s ease-out; }
@keyframes twinkle { 0% { opacity: 0; transform: scale(0) rotate(0); } 35% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0) rotate(120deg); } }

/* the note above the set */
.peek { position: absolute; left: calc(var(--ox) + 780px * var(--s)); top: calc(var(--oy) + 172px * var(--s)); width: calc(180px * var(--s)); text-align: center; white-space: nowrap; font: italic 600 clamp(14px, calc(18px * var(--s)), 22px) var(--fu-font-voice); opacity: .85; pointer-events: none; color: #141A24; z-index: 7; transition: opacity .4s, color .5s; }
.fu-night .peek { color: #EAF2FB; }
.big .peek { opacity: 0; }

/* the lamp: its pull-chain is the switch */
.lamp { position: absolute; left: calc(var(--ox) + 212px * var(--s)); top: calc(var(--oy) + 180px * var(--s)); width: calc(124px * var(--s)); height: calc(272px * var(--s)); z-index: 6; border-radius: 14px; }
.lamp:focus-visible { outline-offset: 4px; }
.pull { position: absolute; left: calc(100px * var(--s)); top: calc(73px * var(--s)); width: calc(11px * var(--s)); height: calc(87px * var(--s)); transform-origin: 50% 0; transition: transform .12s cubic-bezier(.3,.7,.4,1.4); }
.pull img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .55s; }
.pull .dk { opacity: 0; }
.fu-night .pull .dk { opacity: 1; }
.lamp.tug .pull { transform: scaleY(1.16); }
.lamp:hover .pull { animation: pl-sway 1.2s ease-in-out infinite; }
@keyframes pl-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
.tip { position: absolute; left: calc(var(--ox) + 330px * var(--s)); top: calc(var(--oy) + 320px * var(--s)); z-index: 7; font: italic 600 clamp(15px, calc(19px * var(--s)), 22px) var(--fu-font-voice); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: all .2s; pointer-events: none; color: #141A24; }
.fu-night .tip { color: #EAF2FB; }
.lamp:hover + .tip, .lamp:focus-visible + .tip { opacity: 1; transform: none; }
.room.no-lamp .lamp, .room.no-lamp .tip { display: none; }
.lights-chip { display: none; }
.room.no-lamp .lights-chip { display: inline-flex; }

/* the set's two dials */
.knob { position: absolute; width: calc(54px * var(--s)); height: calc(54px * var(--s)); border-radius: 50%; z-index: 6; transition: box-shadow .2s, transform .2s var(--fu-spring); }
.knob-big { left: calc(var(--ox) + 1044px * var(--s)); top: calc(var(--oy) + 250px * var(--s)); }
.knob-sound { left: calc(var(--ox) + 1044px * var(--s)); top: calc(var(--oy) + 311px * var(--s)); }
.knob:hover { box-shadow: 0 0 0 3px rgba(140,200,242,.7), 0 0 18px rgba(140,200,242,.9); transform: rotate(25deg); }
.knob:active { transform: rotate(60deg) scale(.96); }

/* the fumble, on the floor by the set */
.goo { position: absolute; left: calc(var(--ox) + 560px * var(--s)); top: calc(var(--oy) + 676px * var(--s)); width: calc(84px * var(--s)); height: calc(84px * var(--s)); z-index: 6; cursor: pointer; transition: filter .6s; }
.goo .bob { width: 100%; height: 100%; animation: goo-watch 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes goo-watch { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97) translateY(1px); } }
.fu-night .goo { filter: brightness(.75) saturate(.8) drop-shadow(6px -2px 10px rgba(150,190,255,.45)); }
.gshadow { position: absolute; left: calc(var(--ox) + 552px * var(--s)); top: calc(var(--oy) + 748px * var(--s)); width: calc(100px * var(--s)); height: calc(18px * var(--s)); border-radius: 50%; background: radial-gradient(ellipse, rgba(40,25,10,.38), rgba(40,25,10,0) 70%); z-index: 5; }
.fu-blob { display: block; width: 100%; height: 100%; line-height: 0; }
.fu-blob-svg { width: 100%; height: 100%; overflow: visible; }
.fu-blob-body, .fu-blob-drop, .fu-blob-face, .fu-blob-eyes { transform-box: fill-box; }
.fu-blob-body { transform-origin: 50% 100%; animation: fu-breathe 2.8s ease-in-out infinite; transition: d .35s var(--fu-ease); }
@keyframes fu-breathe { 50% { transform: scale(1.04, .95); } }
.fu-blob-eyes { transform-origin: 50% 50%; animation: fu-blink 4.6s steps(1) infinite; }
@keyframes fu-blink { 0%, 96% { transform: none; } 97%, 99% { transform: scaleY(.15); } }
.goo:hover .fu-blob-body { animation: fu-wobble .55s var(--fu-spring); }
@keyframes fu-wobble { 30% { transform: scale(1.12, .86); } 60% { transform: scale(.94, 1.08); } }
.fu-blob.is-splat .fu-blob-body { animation: fu-splat 1.4s var(--fu-ease); }
@keyframes fu-splat { 12% { transform: scale(1.55, .32); } 55% { transform: scale(1.35, .45); } 85% { transform: scale(.95, 1.06); } }
.fu-blob.is-splat .fu-d1 { animation: fu-d1 1.4s var(--fu-ease); }
.fu-blob.is-splat .fu-d2 { animation: fu-d2 1.4s var(--fu-ease); }
.fu-blob.is-splat .fu-d3 { animation: fu-d3 1.4s var(--fu-ease); }
@keyframes fu-d1 { 15% { transform: translate(-50px, 4px); } 55% { transform: translate(-56px, 6px); } 90%, 100% { transform: none; } }
@keyframes fu-d2 { 15% { transform: translate(50px, 4px); } 55% { transform: translate(58px, 6px); } 90%, 100% { transform: none; } }
@keyframes fu-d3 { 15% { transform: translate(0, -46px); } 40% { transform: translate(6px, -54px); } 85%, 100% { transform: none; } }
.fu-blob.is-splat .fu-blob-face { animation: fu-face 1.4s var(--fu-ease); }
@keyframes fu-face { 8%, 55% { transform: translateY(16px) scale(1.12, .72); } 100% { transform: none; } }
.fu-mood { display: none; }
.fu-blob:not([data-fu-mood]) .fu-mood--content,
.fu-blob[data-fu-mood="content"] .fu-mood--content, .fu-blob[data-fu-mood="curious"] .fu-mood--curious,
.fu-blob[data-fu-mood="delighted"] .fu-mood--delighted, .fu-blob[data-fu-mood="startled"] .fu-mood--startled,
.fu-blob[data-fu-mood="dizzy"] .fu-mood--dizzy, .fu-blob[data-fu-mood="sheepish"] .fu-mood--sheepish,
.fu-blob[data-fu-mood="determined"] .fu-mood--determined, .fu-blob[data-fu-mood="cheeky"] .fu-mood--cheeky { display: inline; }
.fu-blob[data-fu-mood="curious"] .fu-blob-body { d: path("M70 38 C92 42 104 72 102 94 C101 109 84 113 60 113 C36 113 18 108 19 92 C21 64 48 35 70 38 Z"); }
.fu-blob[data-fu-mood="delighted"] .fu-blob-body { d: path("M62 48 C90 48 106 74 106 94 C106 109 86 113 60 113 C34 113 14 109 14 94 C14 72 36 48 62 48 Z"); }
.fu-blob[data-fu-mood="startled"] .fu-blob-body { d: path("M61 30 C84 32 98 66 98 90 C98 108 82 113 60 113 C38 113 22 108 22 90 C22 62 40 28 61 30 Z"); }
.fu-blob[data-fu-mood="dizzy"] .fu-blob-body { d: path("M56 42 C82 38 100 66 103 93 C104 109 82 112 61 113 C38 114 17 107 18 90 C19 70 34 45 56 42 Z"); }
.fu-blob[data-fu-mood="sheepish"] .fu-blob-body { d: path("M60 42 C84 44 100 72 100 93 C100 108 83 113 60 113 C37 113 20 108 20 93 C20 70 38 41 60 42 Z"); }
.fu-blob[data-fu-mood="determined"] .fu-blob-body { d: path("M62 42 C88 40 103 68 102 92 C102 108 84 113 60 113 C36 113 18 108 18 92 C17 68 38 44 62 42 Z"); }
.fu-blob[data-fu-mood="cheeky"] .fu-blob-body { d: path("M54 38 C72 35 99 64 101 92 C102 108 84 113 60 113 C36 113 19 109 18 94 C16 72 28 42 54 38 Z"); }
.fu-blob-drip { r: 0px; transition: r .4s var(--fu-spring); }
.fu-blob[data-fu-mood="dizzy"] .fu-blob-drip { r: 6px; }

/* the remote is the button */
.remote { position: absolute; left: calc(var(--ox) + 1095px * var(--s)); top: calc(var(--oy) + 642px * var(--s)); width: calc(173px * var(--s)); height: calc(142px * var(--s)); z-index: 7; border-radius: 12px; }
.remote .rc { position: absolute; left: calc(14px * var(--s)); top: calc(14px * var(--s)); width: calc(145px * var(--s)); height: calc(122px * var(--s)); max-width: none; transition: transform .08s; }
.remote .rc.dk { opacity: 0; transition: transform .08s, opacity .55s; }
.fu-night .remote .rc.dk { opacity: 1; }
.remote.press .rc, .remote:active .rc { transform: translateY(2px) scaleY(.97); }
.remote .bglow { position: absolute; left: calc(47px * var(--s)); top: calc(56px * var(--s)); width: calc(60px * var(--s)); height: calc(40px * var(--s)); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,70,50,.95), rgba(255,70,50,0) 65%); mix-blend-mode: screen; opacity: 0; transition: opacity .3s; }
.remote:hover .bglow { opacity: .45; }
.remote.press .bglow { opacity: 1; transition: none; }
.dymo { position: absolute; left: calc(37px * var(--s)); top: calc(99px * var(--s)); padding: 1px 5px 0; background: linear-gradient(180deg, #E8412F, #C7301F); color: #FFF4EE; font: 900 max(9px, calc(12px * var(--s)))/1.25 var(--fu-font-label); letter-spacing: .16em; border-radius: 1px; transform: rotate(-2.5deg) skewX(-6deg); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.call { position: absolute; left: calc(var(--ox) + 1176px * var(--s)); top: calc(var(--oy) + 536px * var(--s)); z-index: 7; pointer-events: none; color: #141A24; transition: color .5s, opacity .4s; }
.fu-night .call { color: #EAF2FB; }
.call .t { display: block; font: 900 clamp(18px, calc(26px * var(--s)), 32px)/1 var(--fu-font-label); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
.call .s { display: block; font: italic 500 clamp(15px, calc(19px * var(--s)), 23px) var(--fu-font-voice); margin-top: 2px; transform: rotate(-3deg); }
.call svg { position: absolute; left: calc(-30px * var(--s)); top: calc(48px * var(--s)); width: calc(120px * var(--s)); height: calc(110px * var(--s)); overflow: visible; }
.room.no-remote .remote, .room.no-remote .call { display: none; }
.room-fumble { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9; display: none; font-size: 18px; padding: 12px 24px; }
.room-fumble:hover:not(:disabled) { transform: translateX(-50%) translateY(-1px); }
.room-fumble:active:not(:disabled) { transform: translateX(-50%) translateY(4px); }
.room.no-remote .room-fumble { display: inline-flex; }
.big .room-fumble, .big .remote, .big .call, .big .lamp, .big .tip, .big .knob { visibility: hidden; }

/* ---------------------------------------------------------------- the set */
.console { position: absolute; z-index: 4; left: calc(var(--ox) + 753px * var(--s)); top: calc(var(--oy) + 243px * var(--s)); width: calc(255px * var(--s)); height: calc(239px * var(--s)); display: flex; flex-direction: column; }
.console-bar, .transport, .status-bar { display: none; }
.screen { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: transparent; contain: layout paint; }
/* At rest the screen is the glass of the tube, masked to its keyed shape. */
body:not(.big) .screen { -webkit-mask-image: url(room/screen-mask.png); mask-image: url(room/screen-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; cursor: zoom-in; }
.deck { position: absolute; inset: 0; contain: paint; background: #000; }
.slot { position: absolute; inset: 0; }
.slot > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.slot .short-card { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.slot .short-card iframe { display: block; }
.slot[data-kind="instagram"] { background: var(--tube); }
.screen[data-frame=portrait] .slot { left: var(--band-w, 0); right: var(--band-w, 0); }
/* In the room nothing plays: a build left paused there shows its still. */
body:not(.big) .deck { visibility: hidden; }
body:not(.big).deck-up .poster[hidden] { display: block !important; }
.band { position: absolute; top: 0; bottom: 0; width: var(--band-w, 0px); display: block; pointer-events: none; background: var(--tube) no-repeat 0 0 / 100% 100%; }
.band-left { left: 0; } .band-right { right: 0; width: var(--band-r, var(--band-w, 0px)); }
/* The glass: everything of the page's own on the screen (the still, the
 * bands, the set's overlays, its messages), shaped to the glass it shows on.
 * The player is not in it: it stands whole inside the glass (--play-*). */
.glass { position: absolute; inset: 0; pointer-events: none; }
.glass > :is(.poster, .video-error, .empty-state, .opening) { pointer-events: auto; }
.screen[data-frame=wide] .band { display: none; }
body:not(.big) .band { display: none; }
.poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--tube); overflow: hidden; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.screen[data-frame=portrait] .poster { background: transparent; }
.screen[data-frame=portrait] .poster img { left: var(--band-w, 0); width: calc(100% - 2 * var(--band-w, 0px)); object-fit: cover; }
body:not(.big) .poster { background: transparent; }
body:not(.big) .poster img, body:not(.big) .screen[data-frame=portrait] .poster img { left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: saturate(.95) contrast(1.1) brightness(1.06); opacity: .82; animation: tv-kb 9s ease-in-out infinite alternate; transition: opacity .6s ease; }
@keyframes tv-kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-2%, 1.5%); } }
/* hover the glass to peek inside: the picture thins and the garden in the set shows through */
body:not(.big) .screen:hover .poster img { opacity: .1; }
body:not(.big) .screen:hover :is(.cap, .roll) { opacity: 0; }
.screen.loading .poster { cursor: progress; }
.play-disc { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); font: 900 17px/1 var(--fu-font-display); color: var(--ink-hard); background: var(--fu-butter) var(--gold); border: 3px solid var(--ink-hard); border-radius: 999px; padding: 12px 20px 12px 16px; box-shadow: var(--gold-shadow); transition: transform .2s var(--fu-spring); }
.poster:hover .play-disc { transform: translate(-50%, -52%) scale(1.05); }
.screen.loading .play-disc { display: none; }
/* in the room the play button waits for the pointer, small, low on the glass */
body:not(.big) .play-disc { top: auto; bottom: 14%; font-size: 13px; padding: 7px 12px 7px 10px; opacity: 0; transform: translate(-50%, 6px) scale(.9); transition: opacity .25s, transform .3s var(--fu-spring); }
body:not(.big) .screen:hover .play-disc, body:not(.big) .poster:focus-visible .play-disc { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (hover: none) { body:not(.big) .play-disc { opacity: 1; transform: translate(-50%, 0) scale(1); } .peek-hover { display: none; } .fu-btn--primary::after { display: none; } }
@media (hover: hover) { .peek-touch { display: none; } }
/* the set's own glass, over the still only */
.scan, .roll, .osd, .cap { position: absolute; pointer-events: none; }
.scan { inset: 0; z-index: 4; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.1), rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); transition: opacity .6s; }
body:not(.big) .screen:hover .scan { opacity: .25; }
.big .scan { background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.05), rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%); }
.roll { left: 0; right: 0; height: 30%; top: -30%; z-index: 3; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.07), rgba(255,255,255,0)); animation: tv-roll 5.5s linear infinite; transition: opacity .4s; }
@keyframes tv-roll { to { top: 100%; } }
.osd { right: 9%; top: 8%; z-index: 6; font: 700 clamp(14px, calc(22px * var(--s)), 30px)/1 var(--fu-mono); color: #7CFF8A; text-shadow: 0 0 6px rgba(124,255,138,.8); opacity: 0; transition: opacity .2s; }
.osd.on { opacity: 1; }
.big .osd { font-size: 30px; right: 4%; top: 5%; }
.cap { left: 8%; right: 22%; top: 8%; /* clear of the fern and the moss in front of the glass */ z-index: 6; font: 12px/1.25 var(--fu-mono); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,.8); transition: opacity .4s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.big .cap { display: none; }
.deck-up .screen :is(.scan, .roll, .osd, .cap) { display: none !important; }
.saver, .reveal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }
.hello { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; place-items: center; background: var(--tube); color: #D6EAFB; font: italic 500 clamp(18px, calc(30px * var(--s)), 40px) var(--fu-font-voice); text-shadow: 0 0 10px rgba(140,200,242,.6); }
.crt-pending .hello { display: grid; }
.crt-pending .play-disc { visibility: hidden; }
.noscript { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: #EDF4FC; background: var(--tube); }
.video-error, .empty-state, .opening { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 18px; text-align: center; color: #EDF4FC; background: radial-gradient(ellipse at 50% 40%, #222B3D, var(--tube) 70%); }
.video-error h2, .empty-state h2 { margin: 0; font-size: clamp(18px, 2.2vw, 28px); }
.video-error p, .empty-state p, .opening p { margin: 0; max-width: 34ch; font-weight: 600; color: #B7C7D6; }
.video-error > div, .empty-state > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.opening p { font: italic 500 22px var(--fu-font-voice); color: #D6EAFB; }
.empty-mark { width: 36px; height: 36px; color: #F6D486; }
body:not(.big) :is(.video-error, .empty-state) { padding: 8px; gap: 4px; font-size: 12px; }
body:not(.big) :is(.video-error, .empty-state) h2 { font-size: 14px; }
body:not(.big) :is(.video-error, .empty-state) p, body:not(.big) :is(.video-error, .empty-state) > div { display: none; }

/* ---------------------------------------------------------------- the big screen */
.theater-shade { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 40%, rgba(15,21,34,.42), rgba(15,21,34,.82)); transition: opacity .65s var(--fu-ease); }
.big .theater-shade { opacity: 1; pointer-events: auto; }
.big .masthead { opacity: 0; transition: opacity .3s; }
.big.leaving .masthead { opacity: 1; transition: opacity .5s .2s; }
.big .goo, .big .gshadow { opacity: 0; transition: opacity .3s; }
.theater { position: fixed; inset: 0; z-index: 32; pointer-events: none; overflow: hidden auto; overscroll-behavior: contain; }
.big .theater { pointer-events: auto; }
.big.leaving .theater { opacity: 0; transition: opacity .2s; pointer-events: none; }
.big.leaving .theater-shade { opacity: 0; }
/* The set up close: the same television, square to the camera, its casing,
 * plants and dials all round the big screen and never over it. machine.js
 * lays it so its glass is the screen's own place (--set-*). */
.set-plate { position: fixed; z-index: 31; left: var(--set-x); top: var(--set-y); width: var(--set-w); height: var(--set-h); pointer-events: none; visibility: hidden;
  /* where a window outruns the plate, its edge melts into the dimmed room */
  --feather: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: var(--feather); -webkit-mask-composite: source-in; mask-image: var(--feather); mask-composite: intersect; }
.big .set-plate { visibility: visible; }
.set-plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .55s ease; }
.set-plate .dk { opacity: 0; }
.fu-night .set-plate .dk { opacity: 1; }
.theater-card { position: absolute; left: var(--card-x); top: var(--card-top); width: var(--card-w); padding-bottom: 40px; }
.theater-card:empty { display: none; }
.big .console {
  position: fixed; z-index: 40; left: var(--tv-x); top: var(--tv-y); width: var(--tv-w); height: var(--tv-h);
  padding: 0 var(--bezel) var(--bezel); gap: var(--set-gap, 8px);
}
/* the controls on the set: strips of frosted clear plastic, fixed to its casing */
.big :is(.console-bar, .transport, .status-bar) { background: rgba(236,246,255,.64); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border: 2px solid rgba(255,255,255,.75); box-shadow: inset 0 -2px 0 rgba(70,120,170,.18), 0 3px 0 rgba(20,26,36,.28); border-radius: 16px; }
.fu-night .big :is(.console-bar, .transport, .status-bar) { background: rgba(196,224,248,.5); border-color: rgba(214,234,251,.55); box-shadow: inset 0 -2px 0 rgba(20,40,70,.25), 0 3px 0 rgba(0,0,0,.4); }
.big .console-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; padding: 0 6px 0 8px; color: var(--ink-hard); }
.big .transport, .big .status-bar { display: flex; }
.big .console.flying :is(.console-bar, .transport, .status-bar) { opacity: 0; pointer-events: none; }
.big .console:not(.flying) :is(.console-bar, .transport, .status-bar) { animation: chin-in .4s var(--fu-ease) both; }
@keyframes chin-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.station { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 800; font-size: 15px; }
.station #window-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-plate { font: 700 13px/1 var(--fu-mono); background: #141A24; color: #7CFF8A; padding: 5px 7px; border-radius: 5px; text-shadow: 0 0 5px rgba(124,255,138,.6); flex-shrink: 0; }
.title-buttons { display: flex; gap: 6px; flex-shrink: 0; }
.title-button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink-hard); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 2px 2px 0 var(--ink-hard); color: var(--ink-hard); transition: transform var(--fu-fast) var(--fu-ease), box-shadow var(--fu-fast); }
.title-button:hover { transform: translate(-1px, -1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 3px 3px 0 var(--ink-hard); }
.title-button:active { transform: translate(2px, 2px); box-shadow: none; }
.title-button .icon { width: 18px; height: 18px; stroke-width: 2.4; }
#title-max .glyph-max { display: none; }
.title-exit { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 8px; border-radius: 999px; font: 800 13px/1 var(--fu-font-display); white-space: nowrap; }
#title-max[aria-pressed="false"] .glyph-max { display: block; } #title-max[aria-pressed="false"] .glyph-restore { display: none; }
.big .screen { flex: 0 0 var(--scr-h); height: var(--scr-h); background: transparent; }
.big .glass { -webkit-mask: url(room/set-glass.png) no-repeat; mask: url(room/set-glass.png) no-repeat; -webkit-mask-size: var(--glass-w) var(--glass-h); mask-size: var(--glass-w) var(--glass-h); -webkit-mask-position: var(--glass-x) var(--glass-y); mask-position: var(--glass-x) var(--glass-y); }
/* the player sits square inside the rounded glass, clear of its corners */
.big .deck, .big .poster, .big .saver, .big .reveal { inset: 0; width: auto; height: auto; }
.big .deck { background: transparent; }
/* the player, and the still in its place: the largest picture of its shape
 * the glass holds whole (app.js frameFor, machine.js playerBox) */
.big .screen[data-frame] .slot { left: var(--play-x); top: var(--play-y); width: var(--play-w); height: var(--play-h); right: auto; bottom: auto; background: #000; }
.big .screen[data-frame] .poster img { left: var(--play-x); top: var(--play-y); width: var(--play-w); height: var(--play-h); object-fit: cover; }
/* the bands keep their own width: they stand either side of a portrait
   build's column and never reach into it */
.big .band { top: 0; bottom: 0; height: auto; }
.big .band-left { left: 0; right: auto; } .big .band-right { right: 0; left: auto; }
.transport { align-items: center; gap: 12px; padding: 7px 10px; min-height: 64px; position: relative; color: var(--ink-hard); }
.playback-tools { display: flex; gap: 8px; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: var(--fu-line) solid var(--ink-hard); box-shadow: var(--gold-shadow); color: var(--ink-hard); transition: transform var(--fu-fast) var(--fu-ease), box-shadow var(--fu-fast); }
.icon-button:hover:not(:disabled) { transform: translate(-1px, -1px) rotate(-8deg); }
.icon-button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.icon-button:disabled { opacity: .45; cursor: default; }
.icon-button .icon { width: 20px; height: 20px; stroke-width: 2.3; }
.icon-button[aria-pressed="true"]:not(.sound-button) { background: linear-gradient(180deg, #DDF5E3, #A9E3BA); }
.cc-button span { font: 900 13px/1 var(--fu-font-display); letter-spacing: .02em; }
.autoplay-control { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 800 14px/1 var(--fu-font-display); cursor: pointer; white-space: nowrap; }
.autoplay-control input, .keys-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 42px; height: 24px; border-radius: 999px; background: #A9B4BF; border: 2px solid var(--ink-hard); position: relative; transition: background .2s; flex-shrink: 0; }
.switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #F7FAFE; border: 2px solid var(--ink-hard); transition: transform .25s var(--fu-spring); }
input:checked + .switch-track { background: #6C5BF0; }
input:checked + .switch-track::after { transform: translateX(18px); }
input:focus-visible + .switch-track { outline: 3px dashed var(--fu-blue); outline-offset: 2px; }
.fumble-button { font-size: 19px; padding: 11px 22px; min-height: 50px; }
.fumble-button .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.fumble-button.fumbling .icon { animation: fumble-spin .5s var(--fu-spring); }
@keyframes fumble-spin { from { transform: rotate(-180deg) scale(.6); } }
.status-bar { align-items: center; gap: 8px; height: 38px; padding: 0 4px; font: 700 13px/1 var(--fu-font-display); color: var(--ink-hard); overflow: hidden; }
.status-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; background: rgba(255,255,255,.45); border: 2px solid rgba(20,26,36,.35); border-radius: 999px; padding: 4px 10px; }
.status-cell.signal { flex: 1 1 auto; overflow: hidden; }
.status-cell.signal #playback-status { overflow: hidden; text-overflow: ellipsis; }
#signal-dot { width: 9px; height: 9px; border-radius: 50%; background: #A9B4BF; box-shadow: 0 0 0 2px rgba(20,26,36,.4); flex-shrink: 0; }
.signal.playing #signal-dot { background: #3FD36B; box-shadow: 0 0 0 2px rgba(20,26,36,.4), 0 0 8px #3FD36B; animation: on-air 1.6s ease-in-out infinite; }
@keyframes on-air { 50% { opacity: .55; } }
.progress-track { display: block; width: 112px; height: 8px; border-radius: 999px; background: rgba(20,26,36,.18); overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--fu-s1), var(--fu-s2), var(--fu-s3), var(--fu-s4), var(--fu-s5), var(--fu-s6)); transition: width .2s; }
.status-cell.time { font-family: var(--fu-mono); font-variant-numeric: tabular-nums; }
.status-cell.found { cursor: pointer; }
.status-cell.found:hover, .status-cell.maker:hover { background: rgba(255,255,255,.75); }
.status-cell.maker { text-decoration: none; max-width: 30%; overflow: hidden; }
#status-maker-name { overflow: hidden; text-overflow: ellipsis; }
.status-cell.zone .icon { width: 15px; height: 15px; }
.balloon { position: absolute; right: 0; top: calc(100% + 12px); z-index: 45; max-width: 280px; padding: 10px 14px; border-radius: 14px; background: #F7FAFE; color: var(--ink-hard); border: 3px solid var(--ink-hard); box-shadow: 4px 4px 0 var(--ink-hard); font: 800 15px/1.3 var(--fu-font-display); cursor: pointer; animation: balloon-in .45s var(--fu-spring) both, balloon-bob 2.4s ease-in-out .45s 2; }
.balloon::after { content: ''; position: absolute; right: 60px; bottom: 100%; width: 16px; height: 16px; margin-bottom: -8px; background: #F7FAFE; border: solid var(--ink-hard); border-width: 3px 0 0 3px; transform: rotate(45deg); }
@keyframes balloon-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes balloon-bob { 50% { transform: translateY(-4px); } }
.balloon.hint { animation: balloon-in .3s var(--fu-spring) both; }
#balloon-text { display: flex; align-items: center; gap: 7px; }

/* ---------------------------------------------------------------- the card */
.info { max-width: 1320px; margin: 0 auto; padding: 34px clamp(16px, 4.3vw, 62px) 10px; }
.info-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.now-playing { position: relative; padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: 22px; animation: v-in .5s ease both; transition: background-color .6s; }
@keyframes v-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.video-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.now-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 13px/1.2 var(--fu-mono); }
.now-eyebrow .ch { font-weight: 700; }
.meta-dot { opacity: .6; }
#duration-label:empty, .meta-dot:has(+ #duration-label:empty) { display: none; }
.new-tag, .platform-tag:not(:empty) { font: 800 12px/1 var(--fu-font-label); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 5px; border: 2px solid var(--fu-ink); }
.new-tag { background: #FFE3DD; color: #141A24; border-color: #141A24; animation: new-pop .6s var(--fu-spring) both; }
@keyframes new-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.platform-tag:empty { display: none; }
body[data-platform="tiktok"] .platform-tag { background: #141A24; color: #F7FAFE; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; border-color: #141A24; }
body[data-platform="instagram"] .platform-tag { background: linear-gradient(135deg, #FEDA75, #FA7E1E 35%, #D62976 65%, #962FBF); color: #fff; border-color: #141A24; }
.now-playing h2 { margin: 0; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.video-description { margin: 0; font-size: 16px; color: var(--fu-ink-soft); }
.parts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; }
.parts .icon { color: var(--fu-blue); }
.parts-label { font-weight: 800; }
.parts-list a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; color: var(--fu-blue); }
.parts-dot { opacity: .5; }
.parts-where { font-family: var(--fu-font-voice); font-style: italic; font-size: 17px; }
.maker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.maker-actions .fu-btn { min-height: 42px; padding: 6px 14px; font-size: 15px; }
.save-current[aria-pressed="true"] .icon { color: #C7301F; }
.save-current[aria-pressed="true"] { animation: saved-pop .5s var(--fu-spring); }
@keyframes saved-pop { 40% { transform: scale(1.08) rotate(-3deg); } }
.maker-block { display: flex; flex-direction: column; gap: 12px; border-left: 2px dashed rgba(100,120,140,.5); padding-left: 20px; min-width: 0; }
.maker-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.maker-initial { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--fu-ink); box-shadow: 3px 3px 0 #9B8CFF; display: grid; place-items: center; background: var(--fu-sky); font: 900 34px/1 var(--fu-font-display); color: var(--fu-ink); }
.maker-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.maker-id .lbl { font-size: 13px; opacity: .8; }
.made-by { font-size: 13px; color: var(--fu-ink-soft); }
#maker-link { font-size: 20px; font-weight: 900; text-decoration: none; overflow-wrap: anywhere; }
#maker-link:hover { text-decoration: underline; text-decoration-color: var(--fu-orange); }
.maker-more { text-align: left; font: italic 500 19px/1.3 var(--fu-font-voice); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.maker-more:hover { text-decoration-color: var(--fu-orange); }
/* the card on the big screen: beside the set, then under it */
.theater .now-playing { grid-template-columns: 1fr; background: var(--fu-cream); animation: card-up .55s var(--fu-spring) .6s both; }
.big-side .theater .now-playing { animation-name: card-in; }
@keyframes card-in { from { opacity: 0; transform: translateX(28px) rotate(1.5deg); } }
@keyframes card-up { from { opacity: 0; transform: translateY(24px); } }
.theater .maker-block { border-left: 0; padding-left: 0; border-top: 2px dashed rgba(100,120,140,.5); padding-top: 14px; }
.big-phone .theater-card { padding: 0 12px 40px; }

/* ---------------------------------------------------------------- the channels */
.tuning { display: flex; flex-direction: column; gap: 10px; }
.tuning-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tuning-heading .lbl { font-size: 19px; }
#filter-summary { font: italic 500 17px var(--fu-font-voice); }
.browse-tabs { display: flex; gap: 8px; }
.browse-tabs [role=tab] { font: 800 14px/1 var(--fu-font-display); padding: 9px 14px; border-radius: 999px; border: 2px solid var(--fu-ink); background: transparent; transition: background .2s, transform .2s var(--fu-spring); }
.browse-tabs [role=tab][aria-selected="true"] { background: var(--gold); color: var(--ink-hard); border-color: var(--ink-hard); box-shadow: var(--gold-shadow); }
.browse-tabs [role=tab]:hover { transform: translateY(-1px); }
.topic-toolbar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.topic-toolbar p, .mood-note { margin: 0; font-size: 18px; }
.topic-toolbar div { display: flex; gap: 6px; font-size: 14px; }
.topics-news { margin: 0; font-weight: 800; color: var(--fu-blue); }
.category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.category-choice { display: flex; align-items: center; gap: 8px; background: var(--fu-paper); border: 2px solid var(--fu-ink); border-radius: 8px; padding: 7px 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .2s var(--fu-spring), background .2s, opacity .2s; }
.category-choice:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--fu-ink); }
.category-choice input { accent-color: #6C5BF0; width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
.category-choice:has(input:not(:checked)) { opacity: .62; }
.category-choice:has(input:focus-visible) { outline: 3px dashed var(--fu-blue); outline-offset: 2px; }
.topic-glyph { position: relative; display: grid; flex-shrink: 0; }
.topic-glyph .icon { width: 18px; height: 18px; }
.category-new { position: absolute; top: -6px; right: -7px; width: 12px; height: 12px; color: #FF8A1F; pointer-events: none; animation: fresh 1.8s ease-in-out infinite; }
.category-new .icon { width: 12px; height: 12px; }
@keyframes fresh { 50% { transform: scale(1.3) rotate(30deg); } }
.category-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-count { margin-left: auto; font: 12px var(--fu-mono); font-variant-numeric: tabular-nums; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.topic-list .topic { display: inline-flex; align-items: center; gap: 7px; font: 800 14px/1 var(--fu-font-display); padding: 9px 13px; border-radius: 8px; border: 2px solid var(--fu-ink); background: var(--fu-paper); transition: transform .2s var(--fu-spring); }
.topic-list .topic:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--fu-ink); }
.topic-list .topic.active { background: var(--gold); color: var(--ink-hard); border-color: var(--ink-hard); box-shadow: var(--gold-shadow); }
.mood-detail { margin: 4px 0 0; color: var(--fu-ink-soft); }
body.playing .tuning, body.playing footer { transition: opacity 1.4s; }

/* ---------------------------------------------------------------- the welcome and the footer */
.intro { max-width: 760px; margin: 0 auto; text-align: center; }
.intro p { margin: 0; font: italic 500 clamp(19px, 1.7vw, 23px)/1.45 var(--fu-font-voice); color: var(--fu-ink-soft); }
.essay-link { position: relative; font-weight: 600; color: var(--fu-ink); }
.essay-card { position: absolute; left: 50%; bottom: calc(100% + 12px); width: 260px; transform: translateX(-50%) translateY(6px) rotate(-2deg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--fu-spring); background: var(--fu-cream); border: 3px solid var(--fu-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--fu-ink); overflow: hidden; z-index: 5; }
.essay-link:hover .essay-card, .essay-link:focus-visible .essay-card { opacity: 1; transform: translateX(-50%) rotate(-2deg); }
.essay-link[data-room=none] .essay-card { display: none; }
.essay-card img { display: block; width: 100%; height: auto; }
.essay-caption { display: flex; flex-direction: column; padding: 8px 10px; font-style: normal; text-align: left; }
.essay-from { font: 800 11px/1.2 var(--fu-font-label); letter-spacing: .08em; text-transform: uppercase; }
.essay-title { font: 800 14px/1.2 var(--fu-font-display); }
footer { max-width: 1320px; margin: 30px auto 0; padding: 26px clamp(16px, 4.3vw, 62px) 40px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; border-top: 2px dashed rgba(100,120,140,.45); }
.footer-whisper { font-size: 24px; }
.badges { display: flex; gap: 10px; justify-self: end; }
.badge { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 6px 12px; line-height: 1.1; }
.badge b { font: 900 14px/1.1 var(--fu-font-label); letter-spacing: .06em; }
.badge i { font: italic 600 14px/1.1 var(--fu-font-voice); }
.coffee-badge { flex-direction: row; align-items: center; gap: 8px; }
.coffee-badge span { display: flex; flex-direction: column; }
.footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; }
.counter { display: inline-flex; align-items: baseline; gap: 6px; font: 700 14px var(--fu-font-display); }
#build-count { font: 700 15px var(--fu-mono); background: #141A24; color: #7CFF8A; padding: 3px 7px; border-radius: 5px; letter-spacing: .08em; text-shadow: 0 0 5px rgba(124,255,138,.5); }
.credit { margin: 0; font-size: 14px; }
.footer-friends { margin: 0; font-size: 14px; font-weight: 800; }
.footer-friends a { text-decoration-thickness: 2px; }
.footer-credit { justify-self: end; }
.updated { grid-column: 1 / -1; margin: 0; font: italic 500 16px var(--fu-font-voice); opacity: .8; }

/* ---------------------------------------------------------------- dialogs and the toast */
dialog { width: min(560px, calc(100vw - 28px)); max-height: min(720px, calc(100svh - 28px)); padding: 0; color: var(--fu-ink); background: var(--fu-cream); border: 3px solid var(--fu-ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--fu-ink); overflow: hidden; }
.fu-night dialog { box-shadow: 7px 7px 0 #05080E; border-color: #3A4860; }
dialog[open] { display: flex; flex-direction: column; animation: dialog-in .35s var(--fu-spring); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
dialog::backdrop { background: rgba(15,21,34,.55); backdrop-filter: blur(3px); }
.dialog-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; }
.dialog-title { display: inline-flex; align-items: center; gap: 9px; font: 900 20px/1 var(--fu-font-label); letter-spacing: .08em; text-transform: uppercase; }
.dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 20px; overflow: auto; min-height: 0; }
.dialog-body p { margin: 0; }
.dialog-tabs { display: flex; gap: 8px; }
.dialog-tabs [role=tab] { font: 800 14px/1 var(--fu-font-display); padding: 9px 14px; border-radius: 999px; border: 2px solid var(--fu-ink); }
.dialog-tabs [role=tab][aria-selected="true"] { background: var(--gold); color: var(--ink-hard); border-color: var(--ink-hard); box-shadow: var(--gold-shadow); }
.tab-frame { border: 2px solid var(--fu-ink); border-radius: 12px; background: var(--fu-paper); min-height: 220px; max-height: 46svh; overflow: auto; }
.list-box { padding: 6px; }
.list-group { font: 800 13px/1 var(--fu-font-label); letter-spacing: .1em; text-transform: uppercase; padding: 10px 8px 4px; opacity: .8; }
.saved-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.saved-row:hover { background: var(--fu-sky); }
.saved-thumb { width: 100%; height: 48px; object-fit: cover; border-radius: 6px; border: 2px solid var(--fu-ink); background: var(--tube); }
.saved-thumb.portrait { width: 30px; justify-self: center; }
.saved-open { text-align: left; font: 800 14px/1.3 var(--fu-font-display); }
.saved-open:hover { text-decoration: underline; text-decoration-color: var(--fu-orange); }
.saved-meta { display: block; font-size: 12px; color: var(--fu-ink-soft); margin-top: 2px; }
.saved-remove { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--fu-ink); }
.saved-remove:hover { background: var(--fu-blush); }
.saved-remove .icon { width: 14px; height: 14px; }
.saved-empty { display: grid; justify-items: center; gap: 4px; padding: 34px 12px; text-align: center; }
.saved-empty .icon { width: 30px; height: 30px; color: #F6D486; }
.saved-empty p { font-weight: 900; font-size: 17px; }
.saved-empty span { font: italic 500 17px var(--fu-font-voice); }
.dialog-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.dialog-status { margin-right: auto; font: italic 500 16px var(--fu-font-voice); }
.about-head h2 { margin: 4px 0; font-size: 34px; }
.dialog-eyebrow { font-size: 14px; }
.about-found { font-weight: 800; color: var(--fu-blue); }
.shortcut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; }
.shortcut-list kbd { display: inline-block; min-width: 46px; text-align: center; margin-right: 6px; }
.option { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.touch-note { display: none; }
@media (pointer: coarse) { .touch-note { display: block; } .shortcut-list, .keys-option, kbd { display: none; } }
.about-dialog small { font-size: 13px; color: var(--fu-ink-soft); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 999px; background: #141A24; color: #F7FAFE; font: 800 15px/1.3 var(--fu-font-display); border: 3px solid #141A24; box-shadow: 4px 4px 0 #9B8CFF; transition: opacity .2s, transform .35s var(--fu-spring); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.top { top: 22px; bottom: auto; }

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1099px) {
  .info-grid { grid-template-columns: 1fr; }
  .partners { display: none; }
}
@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr; grid-template-areas: "nav" "brand" "sub"; gap: 4px; padding-top: 12px; }
  .site-nav { justify-self: start; }
  .chip { min-height: 38px; font-size: 14px; }
  .partners { display: none; }
  .sub { font-size: 17px; }
  .now-playing { grid-template-columns: 1fr; padding: 16px 18px; }
  .maker-block { border-left: 0; padding-left: 0; border-top: 2px dashed rgba(100,120,140,.5); padding-top: 14px; }
  .category-list { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .badges, .footer-credit { justify-self: start; }
  .peek, .call, .tip { display: none; }
}
@media (max-width: 699px) {
  .room { height: min(86svh, 760px); min-height: 520px; }
  .big .console-bar { height: 44px; }
  .station { font-size: 14px; }
  .transport { flex-wrap: wrap; gap: 8px; min-height: 0; padding: 8px 0 4px; }
  .playback-tools { gap: 6px; }
  .icon-button { width: 38px; height: 38px; }
  .autoplay-control span:first-child { font-size: 13px; }
  .fumble-button { flex: 1 0 100%; order: 3; }
  .fumble-button kbd { display: none; }
  .tb-label { display: none; }
  .title-exit { width: 34px; padding: 0; justify-content: center; }
  .status-bar { height: 34px; font-size: 12px; }
  .status-cell.zone, .status-cell.found { display: none; }
  .balloon { right: 50%; transform: translateX(50%); }
}

/* ---------------------------------------------------------------- quieter */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body:not(.big) .poster img, .roll, .tvglow, .goo .bob, .pull, .fu-blob-body, .fu-blob-eyes { animation: none !important; }
  .fu-wordmark__main::after, .fu-wordmark__main::before { animation: none; opacity: 0; }
}
/* a short's drawn still already carries its title */
body:not([data-platform="youtube"]) .cap { display: none; }

/* a phone on its side: the screen the whole height, the controls in a rail */
.big.big-rail .console { display: grid; grid-template-columns: var(--scr-w) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--bezel); row-gap: 6px; padding: var(--bezel); }
.big.big-rail .console-bar { grid-column: 2; grid-row: 1; height: auto; padding: 4px; justify-content: center; }
.big.big-rail .station { display: none; }
.big.big-rail .tb-label { display: none; }
.big.big-rail .title-exit { width: 34px; padding: 0; justify-content: center; }
.big.big-rail .screen { grid-column: 1; grid-row: 1 / span 3; flex: none; height: var(--scr-h); }
.big.big-rail .transport { grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: nowrap; min-height: 0; padding: 6px 0; }
.big.big-rail .playback-tools { flex-wrap: wrap; justify-content: center; gap: 6px; }
.big.big-rail .icon-button { width: 36px; height: 36px; }
.big.big-rail .autoplay-control { margin: 0 auto; font-size: 13px; }
.big.big-rail .fumble-button { order: 0; flex: none; font-size: 17px; padding: 9px 14px; }
.big.big-rail .fumble-button kbd { display: none; }
.big.big-rail .status-bar { grid-column: 2; grid-row: 3; height: 30px; font-size: 12px; }
.big.big-rail .status-cell:not(.signal) { display: none; }
.big.big-rail .theater { display: none; }