/* The set: one world's page. A room further in, an old television, and their real site playing inside it.
   Loaded only on /w/<slug>. Every size on the set is in --u, so the whole thing scales as one object. */
.page-set { --cap: 150px; overflow-x: clip; }
.room {
  /* the shape of each set, in units of --u. Console: a walnut cabinet. Portable: a cream handset. */
  --tw: 74; --th: 46.25; --pw: 20; --gap: 2; --edge: 2.8; --top: 7.5; --legs: 4.4;
  --cabw: calc(var(--edge) * 2 + var(--tw) + var(--gap) + var(--pw));
  --cabh: calc(var(--top) + var(--edge) * 2 + var(--th) + var(--legs));
  --u: min(calc((100vw - var(--pad) * 2) / var(--cabw)), calc((100svh - var(--bar) - var(--cap) - 44px) / var(--cabh)));
  --wood-1: #6a4128; --wood-2: #4b2c19; --wood-3: #2c180d;
  --cream-1: #efe7d6; --cream-2: #d9ccb4; --cream-3: #b9a98d;
  --bake: #17120e; --brass: #c9a86a; --chrome: #cfcac0;
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: calc(var(--bar) + 6px) var(--pad) 28px; isolation: isolate;
}
.room[data-mode="portable"] { --tw: 20; --th: 43.28; --pw: 8.6; --gap: 1.6; --edge: 2.4; --legs: 0; }

/* the room: the screen's light spills onto the wall, and the set stands on a floor */
.room__glow { position: absolute; z-index: -1; left: 50%; top: 42%; width: min(110vw, 1500px); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent); }
.room__glow img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.15); transform: scale(.8); }
.room.is-lit .room__glow { opacity: .3; }
.room__floor { position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 100%, rgba(255, 91, 46, .05), transparent 70%), linear-gradient(transparent 60%, rgba(0, 0, 0, .35)); }

/* ---------- the set ---------- */
.set { position: relative; padding-top: calc(var(--top) * var(--u)); margin-bottom: calc(var(--legs) * var(--u)); transform-origin: 50% 50%;
  transition: margin .7s var(--ease); flex: none; }
.set::before { /* the floor line the set stands on, across the whole room */
  content: ""; position: absolute; left: -100vw; right: -100vw; top: calc(100% + var(--legs) * var(--u)); height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent); transition: top .7s var(--ease); }
.set::after { /* its shadow on the floor */
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; height: calc(var(--u) * 3); top: calc(100% + var(--legs) * var(--u) - var(--u) * 1.5);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); transition: top .7s var(--ease); }

.set__cab {
  position: relative; display: grid; grid-template-columns: auto auto; gap: calc(var(--gap) * var(--u)); align-items: stretch;
  padding: calc((var(--edge) - 1.2) * var(--u)); border-radius: calc(var(--u) * 1.8);
  box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 6) calc(var(--u) * -1) rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5);
  transition: padding .7s var(--ease), gap .7s var(--ease), border-radius .7s var(--ease);
}
.set__cab::before, .set__cab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; transition: opacity .7s ease; }
.set__cab::before { /* walnut, with a lacquer highlight along the top edge */
  background:
    linear-gradient(180deg, rgba(255, 226, 190, .16), transparent 6%, transparent 92%, rgba(0, 0, 0, .35)),
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 8%, transparent 92%, rgba(0, 0, 0, .3)),
    var(--wood) 0 0 / 900px 500px,
    linear-gradient(170deg, var(--wood-1), var(--wood-2) 55%, var(--wood-3));
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .25), inset 0 -2px 0 rgba(0, 0, 0, .4); }
.set__cab::after { /* cream bakelite */
  opacity: 0;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .55), transparent 55%),
    linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 10%, transparent 88%, rgba(0, 0, 0, .16)),
    linear-gradient(180deg, var(--cream-1), var(--cream-2) 70%, var(--cream-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 6px rgba(80, 60, 30, .25); }
.room[data-mode="portable"] .set__cab { border-radius: calc(var(--u) * 3.2); }
.room[data-mode="portable"] .set__cab::before { opacity: 0; }
.room[data-mode="portable"] .set__cab::after { opacity: 1; }
.page-set { --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .16' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); }

/* the bezel around the tube: dark bakelite with a brass lip (console) or a chrome one (portable) */
.set__bezel { position: relative; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.4); background: linear-gradient(160deg, #241b14, #0f0b08 60%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 2px 3px rgba(255, 220, 170, .12), 0 0 0 calc(var(--u) * .28) var(--brass), 0 0 0 calc(var(--u) * .36) rgba(0, 0, 0, .5);
  transition: box-shadow .7s, border-radius .7s var(--ease); }
.room[data-mode="portable"] .set__bezel { border-radius: calc(var(--u) * 2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 2px 3px rgba(255, 255, 255, .1), 0 0 0 calc(var(--u) * .3) var(--chrome), 0 0 0 calc(var(--u) * .4) rgba(60, 50, 40, .35); }

/* ---------- the tube ---------- */
.tube {
  position: relative; overflow: hidden; isolation: isolate; width: calc(var(--tw) * var(--u)); height: calc(var(--th) * var(--u));
  border-radius: calc(var(--u) * 2.6) / calc(var(--u) * 3); background: radial-gradient(70% 70% at 50% 45%, #1d201e, #0a0b0a);
  transition: width .7s var(--ease), height .7s var(--ease); --k: 0; --s: 1;
}
.tube__pic { position: absolute; inset: 0; transform-origin: 50% 50%; }
.tube__still { position: absolute; inset: 0; display: block; }
.tube__still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tube__live { position: absolute; inset: 0; }
.tube__live iframe { position: absolute; left: 0; top: 0; border: 0; display: block; transform: scale(var(--s)); transform-origin: 0 0; background: var(--ground-w); opacity: 0; transition: opacity .45s ease; color-scheme: normal; }
.tube.is-live .tube__live iframe { opacity: 1; }
.tube.is-live .tube__still { visibility: hidden; transition: visibility 0s .45s; }
.tube__snow { position: absolute; inset: -10px; pointer-events: none; opacity: var(--k); background: var(--grain) 0 0 / 150px, #a39e94; background-blend-mode: multiply; filter: contrast(2.3) brightness(1.02) grayscale(1); transition: opacity .35s ease; }
.tube.is-snow .tube__snow { animation: snow .36s steps(4) infinite; }
.tube.is-cut .tube__snow { transition: none; }

/* the glass: scanlines, curvature shading, a soft glare and a slow roll bar. Never catches a click. */
.tube__glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(120% 90% at 26% 6%, rgba(255, 255, 255, .13), transparent 36%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, .34) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 calc(var(--u) * 2.4) rgba(0, 0, 0, .55), inset 0 0 calc(var(--u) * .6) rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }
.tube__glass::after { /* the reflection of the room in the glass: visible when the picture is dark */
  content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .05) 42%, transparent 50%), radial-gradient(60% 40% at 70% 85%, rgba(255, 91, 46, .05), transparent); }
.tube__roll { position: absolute; left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(transparent, rgba(255, 255, 255, .035) 50%, transparent); animation: roll 9s linear infinite; opacity: 0; transition: opacity 1s; }
.set[data-power="on"] .tube__roll { opacity: 1; }
@keyframes roll { to { transform: translateY(680%); } }

/* on-screen display: a channel number, a picture bar, a set name. The old OSD, in the studio's ink. */
.tube__osd { position: absolute; z-index: 3; left: 5%; top: 6.5%; margin: 0; pointer-events: none; display: grid; gap: .35em; padding: .5em .7em .55em; border-radius: .35em; background: rgba(12, 11, 10, .76);
  font: 500 clamp(11px, calc(var(--u) * 2.2), 26px)/1 var(--mono); letter-spacing: .06em; color: #f3efe4; text-transform: uppercase;
  text-shadow: 0 0 .45em rgba(255, 91, 46, .75); opacity: 0; transition: opacity .25s; }
.room[data-mode="portable"] .tube__osd { font-size: clamp(10px, calc(var(--u) * 1.5), 18px); left: 7%; }
.tube__osd.on { opacity: 1; }
.tube__osd small { font-size: .55em; letter-spacing: .12em; color: var(--mute); text-shadow: none; }
.tube__osd .osd-bar { display: flex; gap: .18em; }
.tube__osd .osd-bar i { width: .42em; height: .8em; background: currentColor; opacity: .3; box-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 .3em rgba(255, 91, 46, .6); }
.tube__osd .osd-bar i.on { opacity: 1; }

/* the calm note when the live signal does not arrive */
.tube__note { position: absolute; z-index: 4; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(86%, 440px); padding: 12px 16px; border-radius: 12px;
  background: rgba(12, 11, 10, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--ink); font-size: 13px; line-height: 1.4; }
.tube__note[hidden] { display: none; }
.tube__note p { margin: 0 0 6px; color: var(--mute); }
.tube__note a { color: var(--signal); font: 500 12px/1.2 var(--mono); letter-spacing: .04em; text-decoration: none; overflow-wrap: anywhere; }
.tube__note a:hover { text-decoration: underline; }
.room[data-mode="portable"] .tube__note { font-size: 12px; padding: 10px 12px; }

/* touch screens: the glass first, a tap to put your hand through */
.tube__touch { position: absolute; z-index: 4; left: 50%; bottom: 6%; transform: translateX(-50%); height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(236, 232, 223, .3);
  background: rgba(12, 11, 10, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tube__touch[hidden] { display: none; }
.tube.is-guarded .tube__live { pointer-events: none; }
.tube:not(.is-guarded) .tube__touch { left: auto; right: 6%; bottom: 4%; transform: none; height: 30px; padding: 0 11px; opacity: .85; }

/* the afterglow: a bright point that lingers when the set switches off */
.tube__dot { position: absolute; z-index: 2; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; pointer-events: none; opacity: 0;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, .9), 0 0 26px 8px rgba(255, 140, 90, .5); }
.tube.is-afterglow .tube__dot { animation: afterglow 2.2s ease-out .45s both; }
@keyframes afterglow { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.4); } }

/* power. Off: the tube is dark glass. On: a dot, a line, a bloom, then the warm-up picture. */
.set[data-power="off"] .tube__pic { visibility: hidden; }
.tube__pic.turn-on { animation: tubeon 1.05s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes tubeon {
  0% { transform: scale(.004, .003); filter: brightness(9) saturate(0); }
  22% { transform: scale(.02, .004); filter: brightness(9) saturate(0); }
  42% { transform: scale(1.02, .006); filter: brightness(6) saturate(0); }
  70% { transform: scale(1, 1.04); filter: brightness(1.8) saturate(.6); }
  100% { transform: none; filter: none; }
}
.tube__pic.turn-off { animation: tubeoff2 .5s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes tubeoff2 {
  0% { transform: none; filter: none; }
  55% { transform: scale(1.02, .006); filter: brightness(6) saturate(0); }
  100% { transform: scale(0, .004); filter: brightness(9) saturate(0); }
}
.tube__pic.turn-on .tube__live iframe, .tube__pic.turn-off .tube__live iframe { transition: none; }

/* ---------- the control panel ---------- */
.panel { position: relative; width: calc(var(--pw) * var(--u)); container-type: size; display: grid; justify-items: center; align-items: center;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "badge badge" "drum drum" "ch ch" "step step" "pic power" "sizes sizes" "grille grille" "model model"; row-gap: calc(var(--u) * .9); padding: calc(var(--u) * .5) 0 calc(var(--u) * .3); color: #e9d9bd; transition: width .7s var(--ease);
  overflow: hidden; }
.panel__badge { grid-area: badge; } .drum { grid-area: drum; } .panel__knob--ch { grid-area: ch; } .panel__step { grid-area: step; }
.panel__knob--pic { grid-area: pic; } .power { grid-area: power; } .sizes { grid-area: sizes; } .grille { grid-area: grille; align-self: stretch; } .panel__model { grid-area: model; }
.room[data-mode="portable"] .panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr) auto; row-gap: calc(var(--u) * 1.1);
  grid-template-areas: "badge" "drum" "ch" "step" "pic" "power" "sizes" "grille" "model"; }
.room[data-mode="portable"] .panel { color: #4a3d2c; }
.panel__badge { margin: 0; font: italic 600 clamp(14px, 14cqw, 32px)/1 var(--display); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff6e2, #c7ad7c 55%, #8a6a3a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.panel__badge i { font-style: inherit; }
.room[data-mode="portable"] .panel__badge { background: none; color: var(--signal); filter: none; font-size: clamp(13px, 19cqw, 24px); }
.panel__label { display: block; margin-top: 5px; font: 500 clamp(8px, 5cqw, 10px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; text-align: center; }
.panel__model { margin: 0; font: 500 clamp(7px, 4.4cqw, 9px)/1 var(--mono); letter-spacing: .16em; opacity: .55; }

/* the channel drum: numbers on a lit cylinder */
.drum { position: relative; width: 56cqw; height: calc(15cqw * 1.5); font: 500 15cqw/1 var(--mono); border-radius: 6px; overflow: hidden; text-align: center;
  background: #1a0f08; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 2px 6px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 230, 190, .2); }
.drum__strip { position: absolute; left: 0; right: 0; top: .25em; transform: translateY(calc(var(--v, 0) * -1em)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); color: #5b3a24; }
.drum__strip span { display: block; height: 1em; }
.drum::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .85), transparent 30%, transparent 70%, rgba(0, 0, 0, .85)), linear-gradient(90deg, transparent 49.6%, rgba(255, 91, 46, .7) 49.6% 50.4%, transparent 50.4%) 0 0 / 100% 18%  no-repeat; }
.set[data-power="on"] .drum { background: radial-gradient(90% 120% at 50% 50%, #ffae6e, #c4521f 70%, #5a210a); }
.set[data-power="on"] .drum__strip { color: #1d0c03; }
.room[data-mode="portable"] .drum { width: 70cqw; font-size: 22cqw; height: calc(22cqw * 1.5); }
.drum.is-turning .drum__strip { transition: none; }

/* knobs: a dial of ticks around a knurled cap. Drag them round, scroll them, or use the arrow keys. */
.panel__knob { display: flex; flex-direction: column; align-items: center; }
.knob { position: relative; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; flex: none; outline-offset: 2px; }
.knob:active { cursor: grabbing; }
.knob--ch { width: min(52cqw, 24cqh); }
.knob--pic { width: min(32cqw, 14cqh); }
.room[data-mode="portable"] .knob--ch { width: min(84cqw, 15cqh); }
.room[data-mode="portable"] .knob--pic { width: min(64cqw, 11cqh); }
.knob__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob__dial line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.knob__dial text { fill: currentColor; font: 500 7.5px var(--mono); text-anchor: middle; opacity: .8; }
.knob__cap { position: absolute; inset: 20%; border-radius: 50%; transform: rotate(var(--a, 0deg)); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, .0) 53%),
    radial-gradient(70% 70% at 35% 28%, rgba(255, 240, 220, .35), transparent 60%),
    repeating-conic-gradient(from 0deg, #2b211a 0 5deg, #120d09 5deg 10deg);
  box-shadow: 0 0 0 calc(var(--u) * .22) var(--brass), 0 0 0 calc(var(--u) * .3) rgba(0, 0, 0, .55), 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(0, 0, 0, .7), inset 0 -3px 6px rgba(0, 0, 0, .6); }
.knob__cap::before { /* the flat face of the knob */
  content: ""; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(80% 80% at 38% 30%, #4a3a2e, #1a120c 70%); box-shadow: inset 0 1px 1px rgba(255, 230, 200, .25), 0 0 0 1px rgba(0, 0, 0, .5); }
.knob__mark { position: absolute; left: 50%; top: 6%; width: 9%; height: 34%; margin-left: -4.5%; border-radius: 99px; background: var(--signal); box-shadow: 0 0 6px rgba(255, 91, 46, .7); }
.knob.is-turning .knob__cap { transition: none; }
.room[data-mode="portable"] .knob__cap {
  background: radial-gradient(70% 70% at 35% 28%, rgba(255, 255, 255, .7), transparent 60%), repeating-conic-gradient(from 0deg, #e9dfcc 0 6deg, #cbbd9f 6deg 12deg);
  box-shadow: 0 0 0 calc(var(--u) * .2) #a89878, 0 calc(var(--u) * .5) calc(var(--u) * 1) rgba(60, 40, 20, .45), inset 0 -3px 6px rgba(80, 60, 30, .3); }
.room[data-mode="portable"] .knob__cap::before { background: radial-gradient(80% 80% at 38% 30%, #fbf5e9, #ddd0b6 70%); box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(80, 60, 30, .25); }

/* channel step buttons and the set chooser */
.panel__step { display: flex; gap: 8cqw; }
.kbtn { display: grid; place-items: center; width: clamp(22px, 17cqw, 36px); aspect-ratio: 1; border-radius: 50%; text-decoration: none; color: inherit; font: 500 clamp(14px, 11cqw, 20px)/1 var(--body);
  background: radial-gradient(70% 70% at 38% 30%, #3a2c22, #120d09); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 200, .2); transition: transform .1s; }
.kbtn:active { transform: translateY(1px) scale(.96); }
.kbtn:hover { color: var(--signal); }
.room[data-mode="portable"] .kbtn { width: 28cqw; background: radial-gradient(70% 70% at 38% 30%, #fffaf0, #d8cab0); box-shadow: 0 0 0 1px rgba(80, 60, 30, .35), 0 2px 3px rgba(80, 60, 30, .35); }
.room[data-mode="portable"] .panel__step { gap: 10cqw; }

.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 230, 190, .15); width: 88cqw; }
.sizes button { display: flex; align-items: center; justify-content: center; gap: 5px; height: clamp(22px, 13cqw, 30px); padding: 0 4px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer;
  font: 500 clamp(8px, 5.2cqw, 10px)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; transition: background .25s, opacity .25s, color .25s; min-width: 0; }
.sizes button i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; opacity: .4; }
.sizes button[aria-checked="true"] { opacity: 1; background: linear-gradient(#3b2c21, #21180f); box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 200, .18); }
.sizes button[aria-checked="true"] i { background: var(--signal); opacity: 1; box-shadow: 0 0 6px var(--signal); }
.room[data-mode="portable"] .sizes { grid-template-columns: 1fr; width: 96cqw; background: rgba(80, 60, 30, .22); box-shadow: inset 0 1px 3px rgba(80, 60, 30, .45); }
.room[data-mode="portable"] .sizes button { font-size: clamp(7px, 8cqw, 9px); letter-spacing: .04em; justify-content: flex-start; padding: 0 6px; }
.room[data-mode="portable"] .sizes button[aria-checked="true"] { background: linear-gradient(#fffaf0, #e3d7c0); box-shadow: 0 1px 2px rgba(80, 60, 30, .4); }

.power { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.power__btn { width: clamp(26px, 20cqw, 40px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(60% 60% at 40% 32%, #f4efe6, #a49c8e 70%, #6d665b); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 3px 0 #2b231c, 0 5px 8px rgba(0, 0, 0, .6); transition: transform .08s, box-shadow .08s; }
.power__btn[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 1px 0 #2b231c, 0 2px 4px rgba(0, 0, 0, .6); }
.room[data-mode="portable"] .power__btn { width: 34cqw; background: radial-gradient(60% 60% at 40% 32%, #ff9c76, var(--signal) 60%, #b83a14); box-shadow: 0 0 0 1px rgba(80, 30, 10, .5), 0 3px 0 #8f3214, 0 4px 6px rgba(80, 40, 20, .4); }
.room[data-mode="portable"] .power__btn[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(80, 30, 10, .5), 0 1px 0 #8f3214, 0 2px 3px rgba(80, 40, 20, .4); }
.led { position: absolute; top: 0; right: calc(-1 * clamp(12px, 9cqw, 18px)); width: 6px; height: 6px; border-radius: 50%; background: #5a1a08; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); transition: background .3s, box-shadow .3s; }
.set[data-power="off"] .led { background: #b0300f; box-shadow: 0 0 6px rgba(255, 70, 30, .55); animation: standby 3.6s ease-in-out infinite; }
.set[data-power="on"] .led { background: var(--signal); box-shadow: 0 0 9px 1px var(--signal); }
@keyframes standby { 50% { opacity: .45; } }

/* speaker: cloth behind walnut slats (console), a perforated grille (portable) */
.grille { width: 88cqw; border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .0) 0 9px, rgba(0, 0, 0, .55) 9px 10px, var(--wood-2) 10px 15px, rgba(0, 0, 0, .5) 15px 16px),
    repeating-linear-gradient(45deg, rgba(255, 220, 160, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px), #2a2018;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 230, 190, .15); }
.room[data-mode="portable"] .grille { background: radial-gradient(circle, #3a2e22 1.3px, transparent 1.8px) 0 0 / 7px 7px, linear-gradient(#e7dcc8, #d8cab0); box-shadow: inset 0 1px 3px rgba(80, 60, 30, .4); }

/* the antennas and the legs: rabbit ears and splayed legs for the console, a rod and a handle for the portable */
.set__ant { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--top) * var(--u)); pointer-events: none; }
.set__ant i { position: absolute; display: block; transition: opacity .5s ease, transform .7s var(--ease); }
.ear { left: 50%; bottom: calc(var(--u) * 1.2); width: 3px; margin-left: -1.5px; height: calc(var(--u) * 8.4); transform-origin: 50% 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6f6a62, #f1ece2 45%, #8b857b); }
.ear::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9b958a); }
.ear--l { transform: rotate(-38deg); } .ear--r { transform: rotate(31deg); }
.ear__hub { left: 50%; bottom: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 2.2); margin-left: calc(var(--u) * -3.5); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(80% 120% at 40% 20%, #4a3a2e, #120d09); box-shadow: inset 0 1px 0 rgba(255, 230, 200, .2); }
.rod { right: 18%; bottom: 0; width: 3px; height: calc(var(--u) * var(--top) * 1.45); transform-origin: 50% 100%; transform: rotate(24deg); border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, #77726a, #f6f1e8 45%, #8e887e); }
.rod::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9b958a); }
.handle { left: 22%; right: 34%; bottom: calc(var(--u) * -.8); height: calc(var(--u) * 4.4); border: calc(var(--u) * .9) solid #2b241d; border-bottom: 0; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; opacity: 0; transform: translateY(30%); }
.room[data-mode="portable"] .ear, .room[data-mode="portable"] .ear__hub { opacity: 0; transform: translateY(40%) scaleY(.4); }
.room[data-mode="portable"] .rod { opacity: 1; transform: rotate(18deg); }
.room[data-mode="portable"] .handle { opacity: 1; transform: none; }
.room[data-mode="console"] .rod { transform: rotate(18deg) scaleY(.3); }

.set__legs { position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--u) * 4.4); pointer-events: none; }
.set__legs i { position: absolute; top: 0; width: calc(var(--u) * 2); height: 100%; transform-origin: 50% 0; transition: opacity .5s, transform .7s var(--ease);
  background: linear-gradient(90deg, var(--wood-3), var(--wood-1) 45%, var(--wood-2)); clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%); }
.set__legs i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(90deg, #8a6a3a, #f0d9a8, #8a6a3a); }
.set__legs i:first-child { left: 10%; transform: rotate(9deg); } .set__legs i:last-child { right: 10%; transform: rotate(-9deg); }
.room[data-mode="portable"] .set__legs i { opacity: 0; transform: scaleY(0); }

/* switching sets: the old one powers down, the cabinet becomes the other one, the new one warms up */
.room.is-switching .set__cab { transition-duration: .7s; }

/* stepping through the glass: the set comes towards you until the picture is the room */
.set.is-through { transition: transform .85s cubic-bezier(.6, 0, .4, 1); }
.set.is-through .tube__glass, .set.is-through .tube__osd { opacity: 0; transition: opacity .4s; }

/* ---------- the caption: only what is true, from worlds.json ---------- */
.cap { width: min(100%, max(calc(var(--cabw) * var(--u)), 860px)); display: grid; grid-template-columns: minmax(270px, 1fr) minmax(0, 1.3fr) auto; gap: 14px 36px; align-items: end;
  margin-top: 22px; min-height: calc(var(--cap) - 34px); transition: width .7s var(--ease); }
.cap__ch { white-space: nowrap; }
.cap__ch { margin: 0 0 8px; color: var(--mute); }
.cap__ch [data-c="ch"] { color: var(--signal); }
.cap__name { margin: 0; font: 460 clamp(30px, 3.2vw, 50px)/.95 var(--display); letter-spacing: -.025em; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1; }
.cap__role { margin: 8px 0 0; font-size: 15px; }
.cap__world p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cap__world .cap__who { margin-top: 8px; font-size: 11px; color: var(--ink); -webkit-line-clamp: 1; }
.cap__world .cap__who[hidden] { display: none; }
.cap__go { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 290px; min-width: 0; }
.cap__ext { color: var(--mute); text-decoration: none; text-transform: none; letter-spacing: .02em; text-align: right; overflow-wrap: anywhere; line-height: 1.5; }
.cap__ext:hover { color: var(--signal); }
.cap__want { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .35em; color: var(--ink); text-decoration: none; font-size: 15px; text-align: right; line-height: 1.4; }
.cap__want span:first-of-type { white-space: nowrap; color: var(--signal); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cap__want:hover span:first-of-type { text-decoration-thickness: 2px; }
.cap.is-tuning .cap__name, .cap.is-tuning .cap__world { filter: blur(3px); opacity: .6; }
.cap__name, .cap__world { transition: filter .35s, opacity .35s; }

.foot--set { padding: 0 var(--pad) 28px; border: 0; }
.foot--set .foot__row { padding-top: 22px; }
.foot--set .foot__row a { color: var(--ink); }

/* ---------- reduced motion: no flicker, no roll, the set is simply on ---------- */
.rm .tube__pic.turn-on, .rm .tube__pic.turn-off { animation: none; }
.rm .tube.is-snow .tube__snow, .rm .led, .rm .tube__roll { animation: none; }
.rm .tube__snow { display: none; }
.rm .tube.is-afterglow .tube__dot { animation: none; }
.rm .set__cab, .rm .set__cab::before, .rm .set__cab::after, .rm .tube, .rm .panel, .rm .set, .rm .set::before, .rm .set::after, .rm .set__ant i, .rm .set__legs i,
.rm .knob__cap, .rm .drum__strip, .rm .tube__live iframe, .rm .room__glow { transition: none; }

/* ---------- without JavaScript: the still is the picture, and it opens the site ---------- */
html:not(.js) .panel .knob, html:not(.js) .sizes, html:not(.js) .power__btn { pointer-events: none; }

/* ---------- laptop heights ---------- */
@media (max-height: 760px) and (min-width: 761px) {
  .page-set { --cap: 128px; }
  .cap__world p { -webkit-line-clamp: 2; }
  .cap__name { font-size: clamp(28px, 2.8vw, 40px); }
}

/* ---------- phone: the set fills the width; the caption follows below ---------- */
@media (max-width: 760px) {
  .room { --u: min(calc((100vw - 28px) / var(--cabw)), calc((100svh - var(--bar) - 70px) / var(--cabh))); padding: calc(var(--bar) + 4px) 14px 18px; min-height: 0; justify-content: flex-start; }
  /* phone console: the controls move to a strip under the tube */
  .room[data-mode="console"] { --tw: 92; --th: 57.5; --pw: 0; --gap: 0; --edge: 2.6; --top: 8; --strip: 17;
    --cabh: calc(var(--top) + var(--edge) * 2 + var(--th) + var(--legs) + var(--strip) + 1); }
  .room[data-mode="console"] .set__cab { grid-template-columns: auto; row-gap: calc(var(--u) * 1); }
  .room[data-mode="console"] .panel { width: calc((var(--tw) + 2.4) * var(--u)); height: calc(var(--strip) * var(--u)); padding: 0 calc(var(--u) * 1);
    grid-template-columns: auto auto auto auto auto auto; grid-template-rows: auto auto; column-gap: calc(var(--u) * 2.4); row-gap: 2px; justify-content: space-between; align-content: center;
    grid-template-areas: "drum ch step pic power sizes" "model ch step pic power sizes"; }
  .room[data-mode="console"] .panel__badge, .room[data-mode="console"] .grille, .room[data-mode="console"] .panel__label { display: none; }
  .room[data-mode="console"] .drum { width: 46px; height: 30px; font-size: 20px; }
  .room[data-mode="console"] .knob--ch { width: 52px; } .room[data-mode="console"] .knob--pic { width: 40px; }
  .room[data-mode="console"] .panel__step { flex-direction: column; gap: 6px; }
  .room[data-mode="console"] .kbtn { width: 24px; font-size: 14px; }
  .room[data-mode="console"] .power__btn { width: 30px; }
  .room[data-mode="console"] .sizes { grid-template-columns: 1fr; width: 82px; }
  .room[data-mode="console"] .sizes button { height: 24px; font-size: 8px; letter-spacing: .04em; }
  .room[data-mode="console"] .led { right: -12px; }
  .room[data-mode="portable"] { --tw: 21; --th: 45.45; --pw: 7.6; --gap: 1.3; --edge: 2; --top: 5; }
  .room[data-mode="portable"] .rod { height: calc(var(--u) * var(--top) * 1.15); }
  .cap__ch { white-space: normal; }
  .cap { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; min-height: 0; }
  .cap__name { font-size: clamp(32px, 9vw, 42px); }
  .cap__go { align-items: flex-start; max-width: none; }
  .cap__ext { text-align: left; }
  .cap__want { justify-content: flex-start; text-align: left; }
  .cap__world p { -webkit-line-clamp: 4; }
  .foot--set .foot__row { flex-direction: column; align-items: center; text-align: center; }
  .tube__note { font-size: 11px; padding: 8px 10px; bottom: 4%; }
  .tube__note p { margin-bottom: 4px; }
}
@container (max-width: 96px) {
  .panel__badge, .panel__model, .panel__knob--ch .panel__label, .panel__knob--pic .panel__label { display: none; }
  .knob__dial text { display: none; }
}