/*
  justincook.dev · home B · THE TELEVISION (styles)
  Include:  <link rel="stylesheet" href="tv/tv.css">  with  <script src="tv/tv.js"></script>
  tv.js builds the DOM on first open. The set is drawn in DESIGN UNITS (1520 x 880 for the code-built cabinet, or the
  commissioned image's natural size) and scaled as one piece to fill the viewport to within 3 percent on the tight axis.
  Code-built cabinet, in design units:
    lid 0,0 1520x28 · body 10,24 1500x802 · kick strip 44,826 · legs 832..880
    bezel 44,46 1176x756 with a chrome trim ring · glass 72,74 1120x700 (16:10, radius 20)
    control panel 1252,46 230x756: brand plate, channel dial (centre 1367,226 d118), back dial (1367,428 d86),
    power key (1367,566 66x34) with its pilot lamp, speaker grille
  Every overlay on the glass has pointer-events none, so the room underneath takes the wheel, clicks and keys.
*/
.tv{
  --tv-night:#0E1220; --tv-ink:#14161C; --tv-ivory:#EDE4CC; --tv-ivory-2:rgba(237,228,204,.62);
  --tv-osd:#7CFF6B; --tv-coral:#FF6B4A;
  --tv-mono:'IBM Plex Mono',ui-monospace,monospace; --tv-disp:'Bricolage Grotesque',system-ui,sans-serif;
  /* walnut veneer, one 1600 x 880 sheet (larger than the cabinet, so it never repeats): wavy dark figure lines and pale
     ray streaks (turbulence pushed through a low-frequency displacement map), a blotchy heart-tone layer, two scales of
     repeating grain lines, a top-to-bottom tone shift and a lacquer sheen */
  --tv-grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='880'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0014 0.009' numOctaves='2' seed='5' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0010 0.24' numOctaves='4' seed='9' result='g'/%3E%3CfeDisplacementMap in='g' in2='w' scale='44' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 0.08 0 0 0 0 0.03 0 0 0 0 0.008 2.3 0 0 0 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tv-grain-pale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='880'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0017 0.010' numOctaves='2' seed='7' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0007 0.11' numOctaves='3' seed='3' result='g'/%3E%3CfeDisplacementMap in='g' in2='w' scale='52' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.7 0 0 0 0 0.45 1.15 0 0 0 -0.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tv-grain-tone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='880'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.01' numOctaves='2' seed='2' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.007' numOctaves='2' seed='12' result='g'/%3E%3CfeDisplacementMap in='g' in2='w' scale='40' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeColorMatrix in='d' type='matrix' values='0 0 0 0 0.14 0 0 0 0 0.06 0 0 0 0 0.02 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tv-wood:
    linear-gradient(180deg,rgba(255,214,160,.10) 0%,rgba(255,214,160,0) 24%,rgba(0,0,0,0) 52%,rgba(18,8,2,.26) 100%),
    linear-gradient(112deg,rgba(255,226,190,0) 30%,rgba(255,226,190,.07) 42%,rgba(255,226,190,0) 56%),
    radial-gradient(90% 55% at 28% 0%,rgba(255,206,150,.08),rgba(255,206,150,0) 70%),
    var(--tv-grain-pale),
    var(--tv-grain-dark),
    var(--tv-grain-tone),
    repeating-linear-gradient(179.6deg,rgba(38,16,4,.07) 0 1px,rgba(0,0,0,0) 1px 4px,rgba(255,214,170,.025) 4px 5px,rgba(0,0,0,0) 5px 9px),
    repeating-linear-gradient(178.9deg,rgba(0,0,0,0) 0 40px,rgba(46,20,6,.09) 54px,rgba(0,0,0,0) 70px,rgba(255,208,160,.035) 90px,rgba(0,0,0,0) 112px),
    linear-gradient(90deg,#4f301b 0%,#5e3b21 30%,#633f23 55%,#56361e 80%,#472a16 100%);
  position:fixed;inset:0;z-index:2000;overflow:hidden;visibility:hidden;contain:strict;
  -webkit-font-smoothing:antialiased;
}
.tv[hidden]{display:none}
.tv *{box-sizing:border-box;margin:0;padding:0}
.tv-scrim{position:absolute;inset:0;background:var(--tv-night);opacity:0}
.tv-rig{position:absolute;left:0;top:0;transform-origin:50% 100%}
.tv-set{position:absolute;left:0;top:0;transform-origin:0 0;outline:none}
.tv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tv-trap{position:absolute;width:1px;height:1px;overflow:hidden;outline:none}

/* ---------- the hard shadow (lands last) ---------- */
.tv-shadow{position:absolute;left:10px;top:12px;width:1500px;height:818px;border-radius:12px 12px 18px 18px;background:rgba(3,5,11,.82);opacity:0}
.tv-art-on .tv-shadow{left:0;top:0;border-radius:0;-webkit-mask:var(--tv-art-url) 0 0/100% 100% no-repeat;mask:var(--tv-art-url) 0 0/100% 100% no-repeat}

/* ---------- the code-built cabinet ---------- */
.tv-body{position:absolute;left:0;top:0;width:1520px;height:880px}
.tv-art-on .tv-body{display:none}
.tv-leg{position:absolute;top:830px;width:36px;height:50px;clip-path:polygon(0 0,100% 0,74% 100%,26% 100%);
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 22%),
    linear-gradient(90deg,#2e1c10 0%,#6e4527 34%,#7b4f2d 46%,#5a381f 66%,#2a190d 100%)}
.tv-leg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;
  background:linear-gradient(90deg,#5d4a1f 0%,#c9ab62 30%,#f3dd9a 44%,#a8883f 70%,#4f3d18 100%);box-shadow:inset 0 1px 0 rgba(255,244,210,.6)}
.tv-leg.l1{left:66px}.tv-leg.l4{left:1418px}
.tv-leg.b{top:828px;height:42px;filter:brightness(.52) saturate(.8)}
.tv-leg.l2{left:206px}.tv-leg.l3{left:1278px}

.tv-lid{position:absolute;left:0;top:0;width:1520px;height:28px;border-radius:12px 12px 6px 6px;background:var(--tv-wood);
  box-shadow:inset 0 2px 0 rgba(255,228,190,.34),inset 0 -2px 0 rgba(20,8,2,.45),inset 3px 0 0 rgba(255,220,180,.08),inset -3px 0 0 rgba(0,0,0,.3),0 4px 0 rgba(10,4,0,.32);z-index:2}
.tv-cab{position:absolute;left:10px;top:24px;width:1500px;height:802px;border-radius:0 0 18px 18px;background:var(--tv-wood);background-position:0 -40px;
  box-shadow:inset 0 10px 10px -6px rgba(10,4,0,.6),inset 3px 0 0 rgba(255,222,184,.10),inset -4px 0 0 rgba(10,4,0,.32),inset 0 -5px 0 rgba(10,4,0,.36),inset 0 -8px 12px -6px rgba(0,0,0,.35)}
/* the veneer wraps round the cabinet's vertical edges: a lit left roundover and a shaded right one */
.tv-cab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,4,0,.42) 0,rgba(255,222,186,.16) 5px,rgba(255,222,186,.04) 12px,rgba(0,0,0,0) 22px,rgba(0,0,0,0) calc(100% - 24px),rgba(255,222,186,.05) calc(100% - 12px),rgba(10,4,0,.5) 100%)}
.tv-lid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:0 0 6px 6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,226,190,.14),rgba(10,4,0,.34))}
.tv-kick{position:absolute;left:46px;top:824px;width:1428px;height:12px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#140b05,#2a190e 70%,#3a2415);box-shadow:inset 0 3px 4px rgba(0,0,0,.7)}

/* bezel and panel sit in brushed chrome trim rings */
.tv-trim{position:absolute;background:linear-gradient(180deg,#f2ecdf 0%,#bdb4a2 22%,#8d8472 48%,#d8d0bf 56%,#a39a87 78%,#5f5748 100%);
  box-shadow:0 -1px 0 rgba(20,8,2,.5),0 2px 0 rgba(255,226,190,.16),0 0 0 1px rgba(20,8,2,.45)}
.tv-trim.bz{left:38px;top:40px;width:1188px;height:768px;border-radius:36px}
.tv-trim.pn{left:1246px;top:40px;width:242px;height:768px;border-radius:20px}
.tv-bezel{position:absolute;left:44px;top:46px;width:1176px;height:756px;border-radius:30px;
  background:
    radial-gradient(80% 60% at 22% 0%,rgba(255,255,255,.075),rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg,#2a2622 0%,#1b1916 45%,#121110 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.13),inset 0 -4px 4px rgba(0,0,0,.7),inset 3px 0 3px rgba(255,255,255,.04),inset -3px 0 3px rgba(0,0,0,.5)}
/* the stepped chamfer the glass sits in */
.tv-well{position:absolute;left:64px;top:66px;width:1136px;height:716px;border-radius:26px;
  background:linear-gradient(180deg,#0a0908,#16130f 60%,#221e1a);box-shadow:inset 0 3px 5px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07),0 -1px 0 rgba(0,0,0,.6)}

.tv-panel{position:absolute;left:1252px;top:46px;width:230px;height:756px;border-radius:14px;
  background:
    radial-gradient(130% 50% at 30% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,0) 1px 2px,rgba(0,0,0,.05) 2px 3px),
    linear-gradient(180deg,#2c2925 0%,#1d1b18 50%,#141311 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.12),inset 0 -4px 4px rgba(0,0,0,.65),inset 2px 0 2px rgba(255,255,255,.04),inset -2px 0 2px rgba(0,0,0,.5)}
/* brand plate: brushed brass, engraved small caps, two screws */
.tv-plate{position:absolute;left:55px;top:22px;width:120px;height:40px;border-radius:4px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,0) 1px 3px,rgba(90,60,10,.08) 3px 4px),
    linear-gradient(180deg,#f4e2a8 0%,#d4b263 38%,#b08a3c 62%,#d9bc72 100%);
  box-shadow:0 0 0 1px #3d2c0e,0 2px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,250,225,.8),inset 0 -1px 0 rgba(90,60,10,.5);
  display:flex;align-items:center;justify-content:center}
.tv-plate b{font:800 22px/1 var(--tv-disp);font-variant-caps:all-small-caps;letter-spacing:.34em;margin-right:-.34em;color:#4a340c;
  text-shadow:0 1px 0 rgba(255,246,210,.75),0 -1px 0 rgba(60,38,4,.35)}
.tv-plate i{position:absolute;top:15px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff6d8,#b89a52 55%,#6b5423);box-shadow:inset 0 0 0 1px rgba(60,40,8,.5)}
.tv-plate i::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:rgba(60,40,8,.7);transform:rotate(-35deg)}
.tv-plate i:first-of-type{left:8px}.tv-plate i:last-of-type{right:8px}

/* printed dial rings */
.tv-ring{position:absolute;border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(237,228,204,0) 87.5%,rgba(237,228,204,.3) 88.5%,rgba(237,228,204,.3) 90%,rgba(237,228,204,0) 91%)}
.tv-ring.ch{left:30px;top:95px;width:170px;height:170px}
.tv-ring.bk{left:50px;top:317px;width:130px;height:130px}
.tv-num{position:absolute;width:28px;margin:-8px 0 0 -14px;text-align:center;font:500 13px/16px var(--tv-mono);color:var(--tv-ivory);letter-spacing:0}
.tv-num.dim{color:rgba(237,228,204,.38)}
.tv-tick{position:absolute;width:2px;height:7px;margin:-3.5px 0 0 -1px;border-radius:1px;background:rgba(237,228,204,.5)}
.tv-lbl{position:absolute;left:0;width:230px;text-align:center;font:500 10.5px/1 var(--tv-mono);letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--tv-ivory-2)}
.tv-lbl.ch{top:298px}.tv-lbl.bk{top:462px}.tv-lbl.pw{top:564px}
/* sockets the dials and the key sit in */
.tv-sock{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 40%,#0b0a09,#1d1a17 70%,#2c2824);box-shadow:inset 0 3px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.08)}
.tv-sock.ch{left:44px;top:109px;width:142px;height:142px}
.tv-sock.bk{left:62px;top:329px;width:106px;height:106px}
.tv-sock.pw{left:74px;top:500px;width:82px;height:48px;border-radius:10px}
.tv-lampwell{position:absolute;left:168px;top:512px;width:22px;height:22px;border-radius:50%;background:#0b0a09;box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1)}
/* speaker grille: fine horizontal slots behind a brushed frame */
.tv-grille{position:absolute;left:24px;top:598px;width:182px;height:134px;border-radius:8px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(180deg,#050505 0 2.5px,#403b35 2.5px 3.5px,#24211d 3.5px 6px);
  box-shadow:inset 0 4px 6px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 3px #1a1815,0 0 0 4px rgba(255,255,255,.07)}

/* ---------- the commissioned image, when it loads ---------- */
.tv-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.tv-art[hidden]{display:none}

/* ---------- the glass ---------- */
.tv-glass{position:absolute;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 70% 70% at 50% 46%,#1c2322 0%,#0d1110 62%,#050606 100%);
  box-shadow:0 0 0 3px #050505,0 0 0 4px rgba(255,255,255,.07)}
.tv-art-on .tv-glass{box-shadow:none;background:#050606}
.tv-pic{position:absolute;inset:0;transform-origin:50% 50%;opacity:0}
.tv-roll{position:absolute;inset:0;opacity:0;pointer-events:none}
.tv-frame{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;background:#050606}
.tv-frame iframe{position:absolute;inset:0;width:1280px;height:800px;border:0;display:block;background:transparent}
.tv-hold{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.tv-raster{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,#f4fbff 0%,#cfe1ea 55%,#8fa7b4 100%)}
.tv-static{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.tv-osd{position:absolute;right:46px;top:36px;text-align:right;pointer-events:none;visibility:hidden;
  font:500 50px/1 var(--tv-mono);letter-spacing:.06em;color:var(--tv-osd);
  text-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 4px rgba(124,255,107,.85),0 0 16px rgba(124,255,107,.45),0 0 34px rgba(124,255,107,.2)}
.tv-osd b{display:block;font-weight:500}
.tv-osd span{display:block;margin-top:12px;font-size:23px;letter-spacing:.14em}
/* the scroll cue: the display's green on a dark plate at the foot of the glass, drawn in room pixels (tv.js gives
   .tv-cuebox the frame's own offset and scale). data-state: off, bob (first showing, three bobs), rest (70 percent) */
.tv-cuebox{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;pointer-events:none}
.tv-cue{position:absolute;left:50%;bottom:22px;width:150px;height:34px;margin-left:-75px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;gap:13px;background:rgba(0,0,0,.58);opacity:0;transition:opacity .2s linear;
  font:500 17px/1 var(--tv-mono);letter-spacing:.16em;color:var(--tv-osd);
  text-shadow:1px 1px 0 rgba(0,0,0,.6),0 0 3px rgba(124,255,107,.75),0 0 10px rgba(124,255,107,.3)}
/* a stage room keeps its topic bar (bottom 26 px) and, on its title card, a hint line (y 711 to 730) at the foot of the
   stage: NEXT sits clear above both */
.tv-cue.is-stage{bottom:98px}
.tv-cue span{margin-right:-.16em}
.tv-cue i{display:block;width:10px;height:10px;margin-top:-5px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);filter:drop-shadow(0 0 2px rgba(124,255,107,.7))}
.tv-cue i,.tv-cue span{transition:opacity .6s ease-out}
.tv-cue[data-state="bob"]{opacity:1;transition:opacity .3s ease-out}
.tv-cue[data-state="bob"] i{animation:tv-cue-bob 1.6s cubic-bezier(.37,0,.63,1) 3}
/* at rest the green drops to 70 percent and the plate holds, so the word still reads over a white room */
.tv-cue[data-state="rest"]{opacity:1;transition:opacity .3s ease-out}
.tv-cue[data-state="rest"] i,.tv-cue[data-state="rest"] span{opacity:.7}
@keyframes tv-cue-bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(4px) rotate(45deg)}}
.tv-cue.is-still,.tv-cue.is-still[data-state],.tv-cue.is-still i,.tv-cue.is-still span{transition-duration:.1s}
.tv-cue.is-still i{animation:none}
.tv-cue.is-review,.tv-cue.is-review[data-state],.tv-cue.is-review i,.tv-cue.is-review span{transition:none}
.tv-scan,.tv-vig,.tv-glare,.tv-edge,.tv-beam,.tv-dot{position:absolute;pointer-events:none}
.tv-scan{inset:0;opacity:.06;background:repeating-linear-gradient(180deg,#000 0 1px,rgba(0,0,0,0) 1px 3px)}
.tv-vig{inset:0;background:radial-gradient(ellipse 75% 75% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.26) 100%)}
.tv-glare{inset:0;
  background:
    linear-gradient(116deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.075) 24%,rgba(255,255,255,.028) 34%,rgba(255,255,255,0) 42%),
    radial-gradient(55% 42% at 26% 16%,rgba(255,255,255,.065),rgba(255,255,255,0) 72%),
    radial-gradient(110% 26% at 50% -4%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)}
.tv-edge{inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 16px 3px rgba(0,0,0,.5),inset 0 10px 40px rgba(0,0,0,.2)}
.tv-beam{left:0;right:0;top:50%;height:2.4px;margin-top:-1.2px;background:#fff;opacity:0;transform:scaleX(0);
  box-shadow:0 0 6px 2px rgba(214,236,255,.95),0 0 26px 7px rgba(150,200,255,.5)}
.tv-dot{left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 10px 4px rgba(222,240,255,.95),0 0 34px 12px rgba(150,200,255,.45)}

/* ---------- controls: real buttons ---------- */
.tv-btn{all:unset;position:absolute;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tv-btn:focus-visible{outline:3px solid var(--tv-ivory);outline-offset:5px}
.tv-dial{border-radius:50%;box-shadow:0 8px 12px rgba(0,0,0,.55),0 3px 0 rgba(0,0,0,.75)}
.tv-dial>span{position:absolute;border-radius:50%;pointer-events:none}
.tv-skirt{inset:0;background:
  repeating-conic-gradient(from 0deg,#161617 0deg 2.2deg,#4b4b4e 2.2deg 3.4deg,#2a2a2c 3.4deg 5deg)}
.tv-shade{inset:0;background:
  radial-gradient(circle at 34% 26%,rgba(255,255,255,.26),rgba(255,255,255,0) 42%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 58%,rgba(0,0,0,.5) 100%)}
.tv-cap{inset:17%;background:
  radial-gradient(circle at 40% 34%,rgba(255,255,255,.6),rgba(255,255,255,0) 38%),
  conic-gradient(from 18deg,#d0d0d0,#8a8a8a 12%,#efefef 25%,#8b8b8b 38%,#d4d4d4 50%,#878787 62%,#f1f1f1 75%,#8b8b8b 88%,#d0d0d0);
  box-shadow:0 0 0 2px rgba(0,0,0,.5),0 3px 4px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.35)}
/* the pointer: a notch cut through the skirt and a coral line inlaid in the cap; it turns with the knob */
.tv-ptr{inset:0}
.tv-ptr::before{content:"";position:absolute;left:50%;top:1%;width:8px;height:17%;margin-left:-4px;border-radius:0 0 3px 3px;background:#0b0b0b;box-shadow:inset 0 -1px 0 rgba(255,255,255,.2)}
.tv-ptr::after{content:"";position:absolute;left:50%;top:19%;width:5px;height:27%;margin-left:-2.5px;border-radius:3px;background:linear-gradient(180deg,#FF7B5C,#E4502F);box-shadow:inset 0 1px 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.5)}
.tv-dial:active .tv-shade{background:
  radial-gradient(circle at 34% 26%,rgba(255,255,255,.18),rgba(255,255,255,0) 42%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}

.tv-power{border-radius:7px;
  background:linear-gradient(180deg,#f6f0e2 0%,#e2d8c1 52%,#c8bc9f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.12),0 3px 0 #756b56,0 5px 0 #231f19,0 7px 10px rgba(0,0,0,.55);
  transition:transform .06s linear,box-shadow .06s linear}
.tv-power::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;margin:-1.5px 0 0 -9px;border-radius:2px;background:#8f846c;box-shadow:0 1px 0 rgba(255,255,255,.7)}
.tv-power:active,.tv-power.is-down{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.12),0 1px 0 #756b56,0 2px 0 #231f19,0 3px 5px rgba(0,0,0,.5)}
.tv-lamp{position:absolute;left:171px;top:515px;width:16px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 34%,#7a2a18,#3a0f07 70%,#1c0703)}
.tv-lamp i{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 40% 34%,#fff4cc 0%,#ffbd4a 34%,#e0621d 78%,#9b3410 100%);
  box-shadow:0 0 8px 2px rgba(255,160,60,.75),0 0 22px 6px rgba(255,120,40,.3)}

/* art mode: the buttons go invisible over the painted controls; a small indicator shows the dial's turn */
.tv-art-on .tv-dial{box-shadow:none}
.tv-art-on .tv-skirt,.tv-art-on .tv-shade,.tv-art-on .tv-cap,.tv-art-on .tv-ptr::before{display:none}
.tv-art-on .tv-ptr::after{top:10%;width:4px;height:30%;margin-left:-2px;background:rgba(245,238,220,.9);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.tv-art-on .tv-power{background:none;box-shadow:none}
.tv-art-on .tv-power::before{display:none}
.tv-art-on .tv-power:focus-visible,.tv-art-on .tv-dial:focus-visible{outline-color:var(--tv-ivory)}

/* motion: still, the power key stops travelling (everything else is timeline driven and already instant) */
html[data-motion="still"] .tv-power{transition:none}