/* Lifted verbatim from the deployed RYVIA site (public/index.html) — do not restyle. */
:root{--void:#040405;--line:rgba(255,255,255,.13);--line-soft:rgba(255,255,255,.07);--white:#f0f2f4;--dim:#a8acb3;   /* was #797d84 — 4.96:1, below the mark */--glow:#e9ebed;
  /* the one colour on the site — phosphor amber, kept under 1% of the surface */
  --signal:#ffb000;
  /* ---- the tube, as tuned in the design file ---- */
  --tv-ar:1.26;
  --w:200px; --h:159px;      /* per-set, written by script; a floor only */
  --lip:6px; --hd:87px; --dbody:80px;
  --lipv:6px; --radius:14px;
  --halo:70px; --tube-glow:rgba(206,222,242,.36);
  --scan:.26; --scan-speed:1.6s;
  --snow:.07; --snow-speed:.09s;
  --bloom-op:.16; --curve-op:.62;
  --pic-filter:brightness(1.18) contrast(1.06) saturate(1.04);
  --look:none;
  --case-1:#75787c; --case-2:#585b5f; --case-3:#3a3d41;
  --ink-case:rgba(238,242,246,.72);
  --wear:.16; --key:.10;
  --bulge:26;
  --dvd-size:20;
  --chin:17.5; --grain:.11;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");          /* the drifting mark, as a percentage of the tube */--mark:"Jost",system-ui,sans-serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--bar:58px}
.pools{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.contact{position:absolute;pointer-events:none;background:radial-gradient(ellipse 46% 44% at 50% 40%,rgba(0,0,0,.8),rgba(0,0,0,.3) 44%,transparent 74%);transition:opacity .8s}
.pool{position:absolute;pointer-events:none;background:radial-gradient(ellipse 56% 48% at 50% 30%,rgba(230,233,236,.26),rgba(186,190,195,.07) 42%,transparent 72%);transition:opacity .8s}
.tv{position:absolute;transform-style:preserve-3d;cursor:pointer;transition:opacity .8s,filter .8s}
.tv .face{position:absolute}
.tv .bk,.tv .lf,.tv .rt,.tv .tp,.tv .bt{backface-visibility:hidden}
.tv .bk{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);background:radial-gradient(circle at 8% 8%,rgba(255,255,255,.18) 0 1.2px,transparent 1.6px),radial-gradient(circle at 92% 8%,rgba(255,255,255,.18) 0 1.2px,transparent 1.6px),radial-gradient(circle at 8% 92%,rgba(255,255,255,.18) 0 1.2px,transparent 1.6px),radial-gradient(circle at 92% 92%,rgba(255,255,255,.18) 0 1.2px,transparent 1.6px),repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 2px,transparent 2px 11px),linear-gradient(155deg,#191b1e,#0d0e10 70%)}
.tv .lf{background:repeating-linear-gradient(rgba(0,0,0,.32) 0 1px,transparent 1px 8px),linear-gradient(100deg,#2a2c30,#131417 58%,#0a0b0c)}
.tv .rt{background:repeating-linear-gradient(rgba(0,0,0,.32) 0 1px,transparent 1px 8px),linear-gradient(100deg,#15171a,#0d0e10 58%,#070809)}
.tv .tp{background:linear-gradient(#32353a,#1a1c1f);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.tv .bt{background:#060607}
.tv .tp::after{content:"";position:absolute;inset:14% 10% 20%;opacity:.6;background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 2px,transparent 2px 8px)}
.tv .fr{border-radius:13px;background:radial-gradient(ellipse 120% 90% at 28% 8%,rgba(255,255,255,.10),transparent 52%),linear-gradient(158deg,#33363b 0%,#232529 26%,#16181b 62%,#0e0f11 100%);box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    inset 0 -20px 26px -20px rgba(0,0,0,.85),
    0 20px 32px -18px rgba(0,0,0,.9);}
.tv .fr::before{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;opacity:var(--wear,.22);mix-blend-mode:overlay;background-size:90px 90px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E")}
/* One black veil carries the key light, the moulding variance and the dimming
   of an unfocused set. Compositing an opacity costs a fraction of re-running a
   brightness filter over the whole face. */
.tv .fr::after{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;
background:#000;transition:opacity .25s linear;
opacity:calc(var(--sh,0) + var(--lipdark,0) + var(--dimv,0))}
.bezel{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.hood{position:relative;flex:1;border-radius:8px;padding:4.2%;background:linear-gradient(168deg,#5a5e64 0%,#42454a 30%,#2c2e32 68%,#1d1f22 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.06),0 -1px 0 rgba(0,0,0,.6)}
.hood::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;background:linear-gradient(200deg,rgba(255,255,255,.10),transparent 38%)}
/* A tube's whole charm is that it emits. The screen is the brightest thing in
   the frame, phosphor spills a hair past the glass, and the wall behind picks
   up a wash of it. */
.tube{position:relative;width:100%;height:100%;border-radius:7%/10%;overflow:hidden;background:#050505;contain:paint;contain:paint;box-shadow:inset 0 0 0 2px rgba(0,0,0,.98),inset 0 0 26px 10px rgba(0,0,0,.85),0 0 var(--halo,36px) rgba(214,228,244,.42),
    0 0 calc(var(--halo,36px) * 2.4) rgba(150,180,214,.16),
    inset 0 0 12px rgba(198,220,246,.10),
    0 2px 5px rgba(0,0,0,.9)}
.tube::before{content:"";position:absolute;inset:-5px;border-radius:8%/11%;pointer-events:none;z-index:6;box-shadow:inset 0 3px 6px rgba(0,0,0,.95),inset 0 -2px 4px rgba(255,255,255,.10)}
.scr{position:absolute;inset:0}
.scr img,.scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:contrast(1.04) brightness(.98) saturate(1.02);transition:filter .9s,opacity .9s}
.scr .bloom{position:absolute;inset:0;mix-blend-mode:screen;opacity:.17;transition:opacity .85s cubic-bezier(.2,.8,.3,1);background:radial-gradient(ellipse at 50% 44%,rgba(246,247,249,.97) 0%,rgba(228,230,233,.9) 46%,rgba(200,203,207,.72) 78%,rgba(163,166,171,.5) 100%)}
.scr .roll{position:absolute;left:0;right:0;height:20%;top:0;z-index:3;pointer-events:none;will-change:transform;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));animation:roll 7.5s steps(180) infinite}
@keyframes roll{from{transform:translate3d(0,-120%,0)}to{transform:translate3d(0,560%,0)}}
.scr .lines{position:absolute;inset:0;z-index:4;mix-blend-mode:multiply;opacity:.6;background:repeating-linear-gradient(rgba(0,0,0,.34) 0 1px,transparent 1px 3px)}
.scr .curve{position:absolute;inset:0;z-index:5;background:radial-gradient(ellipse at 28% 12%,rgba(255,255,255,.20),transparent 38%),radial-gradient(circle at 0% 0%,rgba(0,0,0,.85),transparent 38%),radial-gradient(circle at 100% 0%,rgba(0,0,0,.85),transparent 38%),radial-gradient(circle at 0% 100%,rgba(0,0,0,.85),transparent 38%),radial-gradient(circle at 100% 100%,rgba(0,0,0,.85),transparent 38%),radial-gradient(ellipse at 50% 50%,transparent 54%,rgba(0,0,0,.5) 100%)}
.scr .glass{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.5;background:linear-gradient(112deg,transparent 12%,rgba(255,255,255,.16) 25%,rgba(255,255,255,.04) 33%,transparent 45%),linear-gradient(88deg,transparent 58%,rgba(255,255,255,.05) 66%,transparent 74%)}
.chin{position:relative;height:15%;min-height:13px;display:flex;align-items:center;gap:3.5%;padding:0 4%;margin-top:3%;border-top:1px solid rgba(255,255,255,.07)}
.chin .grille{flex:1.5;height:52%;border-radius:1px;background:repeating-linear-gradient(rgba(255,255,255,.13) 0 1px,rgba(0,0,0,.7) 1px 3px);box-shadow:inset 0 0 3px rgba(0,0,0,.9)}
.chin .knob{border-radius:50%;flex:none;background:radial-gradient(circle at 34% 26%,#53575d,#191b1e 74%);box-shadow:0 1px 0 rgba(255,255,255,.16),inset 0 -1px 3px rgba(0,0,0,.85)}
.chin .led{width:4px;height:4px;border-radius:50%;flex:none;background:#e9ebed;box-shadow:0 0 5px 1px rgba(233,235,238,.7)}
.chin .badge{font-family:var(--mark);font-weight:300;color:rgba(255,255,255,.34);letter-spacing:.3em;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.85)}
.tv.on .scr .bloom{opacity:.03}
.tv.on .fr::after{opacity:0}
.tv.on .scr img,.tv.on .scr video{filter:contrast(1.1) brightness(1.08) saturate(1.1);
image-rendering:auto}
.tv.on .scr .lines{opacity:.2}
.tv.on .scr .curve{opacity:.66}
.tv.blank .scr img{display:none}
.tv.blank .scr .bloom{mix-blend-mode:normal;opacity:1}
/* Dim by darkening the face rather than by going transparent, so the room's
   ambient glow can never show through a television. */
.tv.dimmed{--dimv:.62}
.tv.dimmed .scr{filter:blur(1.4px)}
.tv.dimmed .bk,.tv.dimmed .lf,.tv.dimmed .rt,.tv.dimmed .tp{opacity:.42}
/* the focused set runs hotter still */
.tv.on .tube{box-shadow:inset 0 0 0 2px rgba(0,0,0,.98),inset 0 0 26px 10px rgba(0,0,0,.7),
0 0 calc(var(--halo,36px) * 1.7) rgba(220,234,250,.55),
0 0 calc(var(--halo,36px) * 3.4) rgba(150,180,214,.22),
inset 0 0 14px rgba(198,220,246,.14),0 2px 5px rgba(0,0,0,.9)}
.scr .dvd.held{transition:none}
/* ================= the tube, second pass =================
   Carried over from the design file: a warmer moulding, a picture that is
   graded rather than shown flat, drifting scan lines that flicker, and a light
   fall of snow. Every one of them reads from a variable, so the studio can turn
   them without the stylesheet being touched. */
.tv .face{background:linear-gradient(150deg,var(--case-1),var(--case-2) 42%,var(--case-3))}
.tv .bk,.tv .lf,.tv .rt,.tv .tp,.tv .bt{
  background:linear-gradient(160deg,var(--case-2),var(--case-3))}
.tv .badge{color:var(--ink-case)}
/* the picture is graded, and the chosen look sits on top of the grade */
.scr img,.scr video{filter:var(--pic-filter) var(--look)}
/* scan lines drift and breathe rather than sitting still */
.scr .lines{opacity:var(--scan);
  background:repeating-linear-gradient(rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
  animation:ry-scandrift var(--scan-speed) linear infinite,
            ry-flicker 3.7s ease-in-out infinite}
/* a light fall of snow over everything */
.scr .snow{position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:var(--snow);mix-blend-mode:screen;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ry-snow var(--snow-speed) steps(2) infinite}
@keyframes ry-snow{
  0%{background-position:0 0}   20%{background-position:-38px 14px}
  40%{background-position:26px -30px}  60%{background-position:-14px 34px}
  80%{background-position:34px 8px}   100%{background-position:0 0}}
/* the whole picture drifts a hair now and then, the way a weak signal does */
.tv .scr{animation:ry-jitter 9s steps(1) infinite}
.scr .bloom{opacity:var(--bloom-op)}
.scr .curve{opacity:var(--curve-op)}
/* ================= the cabinet, third pass =================
   Lifted wholesale from the design file: vented flanks with a moulded port,
   a ribbed top, a chin with milled knobs and a pilot lamp, and a front face
   whose glass has its own specular sheet. The measurements are all relative to
   the set's own width, so one number scales the lot. */
.tv .face.lf,.tv .face.rt,.tv .face.tp,.tv .face.bt,.tv .face.bk{
  background:linear-gradient(160deg,var(--case-2),var(--case-3));
  box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.tv .face.tp{background:linear-gradient(160deg,var(--case-1),var(--case-2) 55%,var(--case-3));
  box-shadow:inset 0 0 40px rgba(0,0,0,.4)}
/* every cabinet face carries the same moulding grain */
.tv .face::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noise);background-size:150px;
  mix-blend-mode:overlay;opacity:.09}
/* the flanks are vented, and the left one carries a port */
.tv .vent{position:absolute;pointer-events:none;opacity:.9;
  background-image:radial-gradient(ellipse 2.4px 1.1px at 50% 50%,rgba(0,0,0,.5) 0 100%,transparent 100%);
  background-size:11px 9px}
.tv .port{position:absolute;border-radius:3px;background:#0d0e10;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.14)}
/* the front */
.tv .fr{background:linear-gradient(155deg,var(--case-1),var(--case-2) 44%,var(--case-3));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -22px 26px -20px rgba(0,0,0,.88),
    0 22px 34px -18px rgba(0,0,0,.92)}
.tv .fr::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--wear);mix-blend-mode:overlay;background-image:none;
  background:
    radial-gradient(120% 80% at 18% 12%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(90% 70% at 82% 88%,rgba(0,0,0,.6),transparent 62%)}
.bezel{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(var(--w) * .019) calc(var(--w) * .019) calc(var(--w) * .016)}
/* the surround the tube is set into */
.hood{position:relative;flex:1;border-radius:calc(var(--w) * .02);
  background:linear-gradient(158deg,var(--case-1),var(--case-2) 46%,var(--case-3));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.24),inset 0 -2px 4px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.5);
  padding:calc(var(--w) * .036) calc(var(--w) * .034) calc(var(--w) * .04)}
.tube{position:relative;width:100%;height:100%;border-radius:7%/9%;
  overflow:hidden;background:#050505;contain:paint;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.98),
    inset 0 0 26px 10px rgba(0,0,0,.85),
    0 0 var(--halo) var(--tube-glow),
    0 0 calc(var(--halo) * 2.4) rgba(148,178,212,.14),
    inset 0 0 12px rgba(198,220,246,.09),
    0 2px 5px rgba(0,0,0,.9)}
.scr{position:absolute;inset:0;overflow:hidden;background:#07080a}
/* a second, slower bar drifting the other way */
.scr .roll2{position:absolute;left:0;right:0;top:0;height:34%;z-index:5;
  pointer-events:none;opacity:calc(var(--scan) * .5);mix-blend-mode:multiply;
  background:linear-gradient(transparent,rgba(0,0,0,.55) 55%,transparent);
  animation:roll 13s linear infinite reverse}
/* the glass itself, over everything */
.scr .sheet{position:absolute;inset:0;z-index:8;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 calc(var(--w) * .03) rgba(0,0,0,.75),
    inset 0 1px 1px rgba(255,255,255,.16);
  background:
    radial-gradient(115% 100% at 50% 50%,transparent 58%,rgba(140,160,180,.10) 86%,rgba(196,214,232,.16)),
    radial-gradient(58% 42% at 27% 16%,rgba(255,255,255,.10),transparent 72%),
    linear-gradient(155deg,rgba(255,255,255,.05) 6%,transparent 26%)}
/* the chin */
.chin{position:relative;height:15%;display:flex;align-items:center;
  gap:calc(var(--w) * .015);padding:0 calc(var(--w) * .022);
  border-radius:calc(var(--w) * .005);
  background:linear-gradient(180deg,#4b4e52,#33363a 60%,#292c30);
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.07),
    0 1px 0 rgba(255,255,255,.1)}
.chin .scanlbl{display:grid;gap:.14em;flex:none;text-align:right;line-height:1.1;
  font-size:calc(var(--w) * .0118);letter-spacing:.06em;color:rgba(232,238,244,.46)}
.chin .knob{position:relative;flex:none;border-radius:50%;
  width:calc(var(--w) * .05);height:calc(var(--w) * .05);
  background:conic-gradient(from 0deg,#eceef0,#9ea2a5 11%,#e6e8ea 24%,#a5a9ac 36%,
    #f0f2f3 49%,#9ea2a5 61%,#e6e8ea 74%,#a5a9ac 86%,#eceef0);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.6)}
.chin .knob::before{content:"";position:absolute;inset:19%;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#f4f6f7,#c9cdd0 46%,#95999c);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.45)}
.chin .knob::after{content:"";position:absolute;left:50%;top:8%;width:1.5px;height:32%;
  transform:translateX(-50%);background:rgba(26,28,30,.88);border-radius:1px}
.chin .keys{flex:1;display:flex;align-items:flex-end;justify-content:flex-end;
  gap:calc(var(--w) * .014);padding-bottom:calc(var(--w) * .004)}
.chin .key{width:calc(var(--w) * .046);height:calc(var(--w) * .019);border-radius:2px;
  background:linear-gradient(180deg,#5a5e63,#3a3d41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.6)}
.chin .led{width:calc(var(--w) * .0105);aspect-ratio:1;border-radius:50%;
  margin-bottom:calc(var(--w) * .005);background:var(--signal);
  box-shadow:0 0 7px var(--signal)}
@keyframes ry-roll{from{transform:translate3d(0,-120%,0)}to{transform:translate3d(0,560%,0)}}
@keyframes ry-snow{
  0%{background-position:0 0} 20%{background-position:-38px 14px}
  40%{background-position:26px -30px} 60%{background-position:-14px 34px}
  80%{background-position:34px 8px} 100%{background-position:0 0}}
@keyframes ry-on{
  0%{transform:scale(1.3,.0035);filter:brightness(3.4);opacity:.9}
  16%{transform:scale(1.28,.004);filter:brightness(3.6)}
  34%{transform:scale(1.1,.02);filter:brightness(2.4)}
  58%{transform:scale(1.01,.5);filter:brightness(1.5)}
  100%{transform:scale(1,1);filter:brightness(1);opacity:1}}
@keyframes ry-off{
  0%{transform:scale(1,1);filter:brightness(1);opacity:1}
  38%{transform:scale(1.02,.06);filter:brightness(2.6)}
  70%{transform:scale(1.24,.0035);filter:brightness(3.2);opacity:.85}
  100%{transform:scale(.6,.0025);filter:brightness(.6);opacity:0}}
@keyframes ry-flash{0%{opacity:0} 8%{opacity:.85} 26%{opacity:.10} 100%{opacity:0}}
/* ================= plastic =================
   Injection-moulded ABS from the eighties is not a smooth surface. It has a
   fine speckle through the pigment, a shallow orange-peel from the mould, and a
   directional sheen from the way it was drawn out. Three tiled layers, none of
   them expensive, and together they take the plastic off the screen and into
   the room. */
.plastic{
  background-image:
    /* the speckle in the pigment */
    var(--noise),
    /* orange peel: two offset dot fields that never quite line up */
    radial-gradient(rgba(255,255,255,.10) .6px, transparent .7px),
    radial-gradient(rgba(0,0,0,.16) .5px, transparent .6px),
    /* the draw marks */
    repeating-linear-gradient(97deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(7deg,
      rgba(0,0,0,.045) 0 1px, transparent 1px 5px);
  background-size:64px 64px, 5px 5px, 7px 7px, auto, auto;
  background-position:0 0, 0 0, 2px 3px, 0 0, 0 0;
  mix-blend-mode:overlay;
  opacity:calc(var(--grain) * 5.2)}
/* the same grain, at a coarser scale, over the whole cabinet — a mould leaves
   its texture on every face, not only the front */
.tv .face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) .55px, transparent .65px),
    radial-gradient(rgba(0,0,0,.14) .5px, transparent .6px);
  background-size:6px 6px, 9px 9px;
  background-position:0 0, 3px 4px;
  mix-blend-mode:overlay;opacity:calc(var(--grain) * 3.4)}
/* ================= the mark, on ridged film =================
   Not a rainbow. A bright silver mark cut from the wordmark, ridged vertically
   the way lenticular film is, with the red and blue records pulled slightly
   apart — which is what a tube does to a bright edge, and what the reference
   frame shows. The separation widens as it travels, so the fringe breathes
   without ever becoming colourful. */
.scr .dvd{opacity:0}

/* ================= fourth pass: the product shot =================
   The lighting itself lives in tv-set.js, where the cabinet's faces are
   authored inline. Only the values the set reads are set here: a darker
   cabinet, so it reads as an object, and a hotter tube, so the picture is the
   brightest thing in the frame. */
:root{
  --case-1:#5c6064; --case-2:#42454a; --case-3:#25272a;
  --pic-filter:brightness(1.34) contrast(1.1) saturate(1.06);
  --tube-glow:rgba(206,222,242,.46);
  --key:.16;
}

/* ================= the photographed cabinet =================
   The five walls are plates cut from the reference sheet, so the moulding, the
   vents and the chin furniture drawn underneath them are covered. Only two
   things still have to be drawn: the tube's phosphor spill, which sits over the
   plate so it can fall on the bezel, and the veil that dims an unfocused set.
   That veil takes the plate's own alpha as its mask — opaque exactly where the
   cabinet is, clear exactly where the screen is — so dimming the set never
   dims the picture. No filters and no blend modes on a plate: those are what
   made the wall flicker. */
.tv .fr::before{display:none}
.tv .fr::after{z-index:13;border-radius:var(--radius);
  -webkit-mask-image:url(./tv-front.webp);mask-image:url(./tv-front.webp);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tv .halo{box-shadow:0 0 var(--halo) var(--tube-glow),
  0 0 calc(var(--halo) * 2.2) rgba(148,178,212,.13);transition:box-shadow .55s}
.tv.on .halo{box-shadow:0 0 calc(var(--halo) * 1.7) rgba(220,234,250,.5),
  0 0 calc(var(--halo) * 3.2) rgba(150,180,214,.2)}

/* ================= fifth pass: what the flicker actually was =================
   Every cabinet carried a dozen blend-mode layers — noise and grain over each
   of the five faces — and a black veil masked by the photographed front plate.
   A blend mode makes the compositor read back what is behind it, and a mask
   makes it re-rasterize whenever the layer's scale changes; eight cabinets of
   them inside one scrolling 3D scene is what shimmered on the way down and up.
   The faces keep their moulding gradients and their lighting; only the two
   near-invisible grain passes come off (nine and three percent opacity), and
   the veil now paints only when a set is actually dimmed. */
.tv .face::before,.tv .face::after{display:none}
.tv .fr{backface-visibility:hidden}