:root{
  --ink:#f2f5f9;
  --ink-dim:rgba(242,245,249,.72);
  --ink-faint:rgba(242,245,249,.48);
  /* smoked, not clear: the chrome has to stay legible over Sunlit and
     Snowdrift as well as over the dark scenes */
  --glass:rgba(9,13,20,.46);
  --glass-hi:rgba(255,255,255,.13);
  --edge:rgba(255,255,255,.18);
  --edge-soft:rgba(255,255,255,.11);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* the frost axis — driven by the Look panel, remembered per scene */
  --frost:9px; --frost-far:36px;
  --bloom-x:70%; --bloom-y:24%;
  --bloom-c:120,150,190; --bloom-a:.0;
  --grade-c:90,120,160; --grade-a:.10;
  /* TV mode is opt-in. The script selects one of three deliberately mild
     SDR compensation profiles and writes the active values here. */
  --tv-brightness:.88; --tv-contrast:.99; --tv-saturation:.86;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#05070c}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* ─────────────────────────  THE WINDOW  ───────────────────────── */
#stage{
  position:fixed;inset:0;overflow:hidden;z-index:0;
  transition:filter .55s var(--ease);
}
/* One final transform covers both WebGL renderers and every DOM grade without
   touching the white UI. Mirroring reports the sender's display, not the TV,
   so this is enabled only by the explicit control in the Look panel. */
html.tv-mode #stage{
  filter:brightness(var(--tv-brightness)) contrast(var(--tv-contrast))
    saturate(var(--tv-saturation));
}

/* the world outside — rendered sharp, diffused by CSS so drop lenses can
   sample the untouched pixel data underneath */
#sky{
  /* overscan: keeps the blur's own soft edge off screen even at the top
     of the frost range. Must stay in step with PAD in the script. */
  position:absolute;left:-96px;top:-96px;
  width:calc(100% + 192px);height:calc(100% + 192px);
  display:block;
}
#sky{filter:blur(var(--frost)) saturate(1.06)}
/* The renderers are allocated on demand and dissolve between each other
   by opacity once both exist — cutting one with display:none is what made
   leaving Rainfall snap. #rfx starts transparent and the frame loop sets it. */
#gl,#rfx{position:absolute;inset:0;width:100%;height:100%;display:block}
#rfx{opacity:0}

/* The 2D buffers still do all the scene drawing, they are just never
   shown: the shaders read them as textures. */
#sky,#grain,#vignette{display:none}
/* The homepage does not allocate the unrelated custom GL renderer just to
   cover RFX startup. Show the already-drawn 2D plate until the first Rain
   frame is complete. */
html.rfx-pending #sky{display:block}

/* the near face: sheen, smudges, and what the room throws back at you */
#surface{
  position:absolute;inset:0;pointer-events:none;opacity:var(--surface-a,.55);
  mix-blend-mode:screen;transition:opacity 1.2s var(--ease);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

#grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-repeat:repeat;background-size:140px 140px;pointer-events:none;
}
#bloom{
  position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;
  opacity:var(--bloom-mul,1);
  background:radial-gradient(circle 46vmax at var(--bloom-x) var(--bloom-y),
    rgba(var(--bloom-c),var(--bloom-a)) 0%,rgba(var(--bloom-c),0) 62%);
  transition:background 2.6s var(--ease);
}
#grade{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  opacity:var(--grade-mul,1);
  background:rgba(var(--grade-c),var(--grade-a));
  transition:background 2.6s var(--ease);
}
/* window bevel: you are behind the glass, not in front of it */
#bezel{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -120px 160px -110px rgba(0,0,0,.75),
    inset 0 130px 150px -110px rgba(255,255,255,.06);
}
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 92% 86% at 50% 46%,transparent 44%,rgba(0,0,0,.58) 100%);
}

/* ─────────────────────────  CHROME  ───────────────────────── */
#ui{
  position:fixed;inset:0;z-index:10;pointer-events:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
body.idle #ui{opacity:0;transform:translateY(6px)}
body.hidden-ui #ui{opacity:0}
#ui > *{pointer-events:auto}
body.hidden-ui #ui,body.hidden-ui #ui *{pointer-events:none}

/* top left identity */
/* these sit straight on the scene, so they carry their own legibility */
#mark,#clock,#hint{
  text-shadow:0 1px 14px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.45);
}
#mark{
  position:absolute;top:34px;left:38px;
  display:flex;align-items:baseline;gap:14px;
}
#mark .wm{
  font-size:13px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink);text-indent:.42em;
}
#mark .sep{width:16px;height:1px;background:var(--edge);align-self:center}
#scene-name{
  font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-dim);transition:opacity .5s var(--ease);
}

/* top right clock */
#clock{
  position:absolute;top:30px;right:38px;text-align:right;
}
#clock .t{
  font-size:26px;font-weight:200;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1;
}
#clock .d{
  font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:5px;
}

/* bottom dock */
#dock{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:calc(100vw - 48px);
}

.pill{
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--edge);
  box-shadow:0 24px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16);
  border-radius:999px;
}

#bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
}

.iconbtn{
  width:40px;height:40px;flex:0 0 auto;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.iconbtn:hover{background:rgba(255,255,255,.11)}
.iconbtn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.iconbtn svg{width:17px;height:17px;fill:currentColor;display:block}
#play{width:44px;height:44px;background:rgba(255,255,255,.13)}
#play:hover{background:rgba(255,255,255,.22)}
#play svg{width:15px;height:15px;margin-left:1px}
#play.on svg{margin-left:0}

.divider{width:1px;height:22px;background:var(--edge-soft);margin:0 5px;flex:0 0 auto}

/* scene selector */
#scenes{display:flex;align-items:center;gap:2px;position:relative}
.scene-btn{
  position:relative;border:0;background:transparent;cursor:pointer;
  color:var(--ink-faint);
  font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 15px 11px;border-radius:999px;
  transition:color .3s var(--ease);white-space:nowrap;
}
.scene-btn:hover{color:var(--ink-dim)}
.scene-btn[aria-selected="true"]{color:var(--ink)}
.scene-btn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px}
.scene-btn .dot{
  position:absolute;left:50%;bottom:5px;width:3px;height:3px;margin-left:-1.5px;
  border-radius:50%;background:currentColor;opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.scene-btn[aria-selected="true"] .dot{opacity:1;transform:scale(1)}

/* volume */
#volwrap{display:flex;align-items:center;gap:2px;padding-right:4px}
#volslot{
  width:0;overflow:hidden;transition:width .42s var(--ease),opacity .3s var(--ease);
  opacity:0;display:flex;align-items:center;
}
#volwrap:hover #volslot,#volwrap:focus-within #volslot,#volslot.pinned{width:92px;opacity:1}

input[type=range]{
  -webkit-appearance:none;appearance:none;background:transparent;
  width:84px;height:22px;cursor:pointer;margin:0 4px;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,rgba(255,255,255,.85) var(--fill,60%),rgba(255,255,255,.18) var(--fill,60%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#fff;margin-top:-4px;box-shadow:0 1px 6px rgba(0,0,0,.5);
  transition:transform .18s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.85)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
input[type=range]:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px;border-radius:999px}

/* disclosure panels */
#mixer,#look{
  width:min(420px,calc(100vw - 48px));
  padding:0 20px;border-radius:20px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),padding .5s var(--ease);
}
#mixer.open{max-height:340px;opacity:1;padding:16px 20px 18px}
#look.open{max-height:min(72vh,540px);opacity:1;padding:16px 20px 18px;overflow-y:auto}
#tune{width:min(460px,calc(100vw - 48px));padding:0 20px;border-radius:20px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),padding .5s var(--ease)}
#tune.open{max-height:min(62vh,560px);opacity:1;padding:16px 20px 18px;overflow-y:auto}
#tn-list .grp{
  margin:12px 0 5px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);border-top:1px solid var(--edge-soft);padding-top:10px;
}
#tn-list .grp:first-child{margin-top:0;border-top:0;padding-top:0}
#tn-list .knob label{flex:0 0 92px;font-size:11px}
#tn-list .knob output{flex:0 0 52px}
#tn-reset{padding:4px 10px;font-size:9px}

/* look panel */
.knob{display:flex;align-items:center;gap:12px;padding:5px 0}
.knob label{
  flex:0 0 62px;font-size:11.5px;letter-spacing:.05em;color:var(--ink-dim);
}
.knob input[type=range]{flex:1;width:auto}
.knob output{
  flex:0 0 44px;text-align:right;font-size:10.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.bd{margin-top:10px;padding-top:11px;border-top:1px solid var(--edge-soft)}
.bd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bd-label{font-size:11.5px;letter-spacing:.05em;color:var(--ink-dim)}
.bd-actions{display:flex;gap:6px}
.ghost{
  border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--ink-dim);
  font:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ghost:hover{background:rgba(255,255,255,.12);color:var(--ink)}
.ghost:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.ghost.danger:hover{background:rgba(255,116,108,.20);border-color:rgba(255,140,132,.5);color:#ffd9d6}
.bd-state{
  margin-top:8px;font-size:10px;letter-spacing:.06em;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bd-thumb{
  margin-top:9px;display:block;width:132px;height:74px;border-radius:8px;
  border:1px solid var(--edge);object-fit:cover;
}

/* TV mode lives beside the Backdrop control because both affect the look of
   the whole window rather than one sound layer. */
.tv-control{margin-top:12px;padding-top:12px;border-top:1px solid var(--edge-soft)}
.tv-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tv-title{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.05em;color:var(--ink-dim);
}
.tv-help{position:relative;display:inline-flex;align-items:center}
.tv-help-btn{
  position:relative;
  width:18px;height:18px;border-radius:50%;border:1px solid var(--edge);
  background:rgba(255,255,255,.055);color:var(--ink-faint);cursor:help;
  display:grid;place-items:center;font:500 10px/1 inherit;padding:0;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tv-help-btn::before{content:'';position:absolute;inset:-8px;border-radius:50%}
.tv-help-btn:hover,.tv-help-btn:focus-visible{
  background:rgba(255,255,255,.13);color:var(--ink);border-color:rgba(255,255,255,.32);
}
.tv-help-btn:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px}
.tv-tip{
  position:absolute;left:-22px;bottom:calc(100% + 10px);z-index:4;
  width:280px;max-width:calc(100vw - 76px);padding:11px 13px;border-radius:10px;
  background:rgba(5,8,13,.94);border:1px solid var(--edge);
  box-shadow:0 16px 44px rgba(0,0,0,.48);
  color:var(--ink-dim);font-size:10.5px;font-weight:300;line-height:1.55;
  letter-spacing:.025em;text-transform:none;
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  pointer-events:none;
}
.tv-help:hover .tv-tip,.tv-help:focus-within .tv-tip{
  opacity:1;visibility:visible;transform:none;
}
.tv-switch{
  border:0;background:transparent;color:var(--ink-faint);cursor:pointer;
  display:flex;align-items:center;gap:8px;min-height:28px;
  font:500 9px/1 inherit;letter-spacing:.16em;text-transform:uppercase;
}
.tv-switch:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px;border-radius:999px}
.tv-track{
  position:relative;width:38px;height:21px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid var(--edge);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.tv-thumb{
  position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;
  background:var(--ink-faint);box-shadow:0 2px 8px rgba(0,0,0,.38);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.tv-switch[aria-checked="true"]{color:var(--ink)}
.tv-switch[aria-checked="true"] .tv-track{
  background:rgba(106,196,171,.30);border-color:rgba(152,226,205,.54);
}
.tv-switch[aria-checked="true"] .tv-thumb{transform:translateX(17px);background:#e8fff8}
.tv-strength{
  max-height:0;opacity:0;overflow:hidden;padding:0;
  transition:max-height .3s var(--ease),opacity .24s var(--ease),padding .3s var(--ease);
}
html.tv-mode .tv-strength{max-height:42px;opacity:1;padding-top:9px}
.tv-strength label{flex-basis:62px}
.tv-strength output{flex-basis:64px}
body.dragging #stage::after{
  content:'';position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  border:1.5px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.05);
}
.mx-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
}
.layer{display:flex;align-items:center;gap:12px;padding:5px 0}
.layer .nm{
  flex:0 0 108px;font-size:11.5px;font-weight:400;letter-spacing:.05em;
  color:var(--ink-dim);cursor:pointer;background:none;border:0;text-align:left;
  font-family:inherit;transition:color .2s var(--ease),opacity .2s var(--ease);
  display:flex;align-items:center;gap:7px;
}
.layer .nm:hover{color:var(--ink)}
.layer .nm .led{
  width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;
  box-shadow:0 0 7px currentColor;transition:opacity .25s var(--ease);
}
.layer.muted .nm{opacity:.34}
.layer.muted .nm .led{opacity:.2;box-shadow:none}
.layer input[type=range]{flex:1;width:auto}
.layer .cat{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  flex:0 0 auto;width:52px;text-align:right;
}
.mx-note{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--edge-soft);
  font-size:10px;font-weight:300;letter-spacing:.06em;color:var(--ink-faint);line-height:1.6;
}
[hidden]{display:none!important}

/* hint */
#hint{
  margin-top:4px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,245,249,.32);
  white-space:nowrap;transition:opacity .6s var(--ease);pointer-events:none;
}

/* ─────────────────────────  GATE  ───────────────────────── */
/* The gate carries its own diffusion, not the Frost axis. Whatever the
   user has dialled in applies to the window they opened — before they
   open it they are looking at closed glass, and closed glass is frosted.
   It also covers the moment the plate behind is still a 24px placeholder.
   The Rain renderer already owns the scene's diffusion; a second full-pane
   backdrop-filter here only creates another compositor surface and delays
   the text paint. */
#gate{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(4,7,12,.38),rgba(4,7,12,.78));
  transition:opacity 1.1s var(--ease);
}
#gate.gone{opacity:0;pointer-events:none}
#gate .inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 16px;
}
/* Sentence case and near-normal tracking. The wide uppercase treatment was
   built for the four-letter wordmark this replaced; on a sentence — and on
   a brand name, which people read as a word — it stops being a style and
   starts being an obstacle. */
/* The gate is the quietest moment in the piece and the type should behave
   like it — 42px was shouting over a scene whose whole point is calm.
   Sizes come from the strings: measured in Inter at weight 300 the
   longest of the five headlines is 23.3em wide at weight 200 and the
   longest line under it 38.3em, so the viewport each needs is font-size ×
   that. The caps below keep the headline to one line down to about 360px
   and the second line to one down to about 470, without either of them
   dominating a frame whose whole point is calm. */
#gate .wm{
  font-size:clamp(14px, 1.95vw, 24px);font-weight:200;letter-spacing:.012em;
  line-height:1.34;color:var(--ink);text-wrap:balance;
  animation:rise 1.3s var(--ease) both .15s;
}
#gate .tag{
  margin-top:16px;font-size:clamp(10.5px, 1.3vw, 15px);font-weight:300;
  letter-spacing:.05em;line-height:1.55;color:var(--ink-dim);text-wrap:balance;
  animation:rise 1.3s var(--ease) both .3s;
}
#enter{
  position:relative;
  margin-top:52px;width:78px;height:78px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:var(--ink);display:grid;place-items:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
  animation:rise 1.3s var(--ease) both .45s;
}
#enter:hover{transform:scale(1.07);background:rgba(255,255,255,.13);box-shadow:0 26px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3)}
#enter:active{transform:scale(1.01)}
#enter:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:5px}
#enter svg{width:19px;height:19px;fill:currentColor;margin-left:3px}
#enter::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);animation:pulse 3.4s ease-out infinite;
  pointer-events:none;
}
#gate .press{
  margin-top:30px;font-size:9.5px;font-weight:300;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(242,245,249,.28);
  animation:rise 1.3s var(--ease) both .6s;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* toast */
#toast{
  position:fixed;left:50%;top:28px;transform:translate(-50%,-16px);z-index:40;
  padding:10px 18px;border-radius:999px;font-size:11px;letter-spacing:.08em;
  background:rgba(20,24,32,.82);border:1px solid var(--edge);color:var(--ink-dim);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Six scenes still fit on a laptop, but the old desktop spacing overflowed
   narrow landscape tablets before the mobile two-row layout took over. */
@media (min-width:721px) and (max-width:1050px){
  #bar{gap:3px;padding-inline:7px}
  .scene-btn{padding:12px 9px 11px;font-size:9.5px;letter-spacing:.12em}
  .divider{margin-inline:2px}
  #volwrap:hover #volslot,#volwrap:focus-within #volslot,#volslot.pinned{width:68px}
}

@media (max-width:720px){
  #mark{top:24px;left:22px;gap:10px}
  #mark .wm{font-size:11px}
  #scene-name{font-size:10px}
  #clock{top:20px;right:22px}
  #clock .t{font-size:21px}
  #dock{bottom:26px;gap:10px}
  /* the transport will not fit on one line — give the scenes their own row */
  #bar{flex-wrap:wrap;justify-content:center;border-radius:26px;padding:6px 12px 9px}
  #scenes{order:-1;width:100%;justify-content:center;flex-wrap:wrap}
  .scene-btn{padding:10px 9px;font-size:9.5px;letter-spacing:.11em}
  .divider{display:none}
  #volwrap{display:none}
  #hint{display:none}
  /* the dock already names the active scene, so the top rail need not */
  #scene-name,#mark .sep{display:none}
  #mixer{width:calc(100vw - 32px)}
  .layer .nm{flex:0 0 88px;font-size:11px}
  .layer .cat{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  #enter::after{display:none}
}

/* ─────────────────────────  TV / TEN-FOOT UI  ─────────────────────────
   An explicit mode rather than a viewport query: a mirrored browser cannot
   know that its pixels end up on a television. Five percent also keeps the
   chrome clear of the small amount of overscan some sets still apply. */
html.tv-mode #clock{top:max(5vh,42px);right:max(5vw,48px)}
html.tv-mode #clock .t{font-size:clamp(38px,3vw,52px);font-weight:300}
html.tv-mode #clock .d{font-size:14px;letter-spacing:.22em;margin-top:8px;color:rgba(242,245,249,.68)}
html.tv-mode #dock{bottom:max(5vh,52px);gap:16px;max-width:90vw}
html.tv-mode .pill{
  background:rgba(5,9,15,.76);
  -webkit-backdrop-filter:blur(20px) saturate(1.12);
  backdrop-filter:blur(20px) saturate(1.12);
  border-color:rgba(255,255,255,.25);
}
html.tv-mode #bar{gap:9px;padding:11px 15px;max-width:90vw}
html.tv-mode .iconbtn{width:56px;height:56px}
html.tv-mode .iconbtn svg{width:21px;height:21px}
html.tv-mode #play{width:60px;height:60px}
html.tv-mode #play svg{width:19px;height:19px}
html.tv-mode .divider{height:30px;margin-inline:7px}
html.tv-mode .scene-btn{font-size:14px;letter-spacing:.16em;padding:18px 16px 17px}
html.tv-mode .scene-btn .dot{bottom:7px;width:4px;height:4px;margin-left:-2px}
html.tv-mode #volslot,html.tv-mode #volwrap:hover #volslot,
html.tv-mode #volwrap:focus-within #volslot,html.tv-mode #volslot.pinned{
  width:118px;opacity:1;
}
html.tv-mode input[type=range]{height:30px}
html.tv-mode input[type=range]::-webkit-slider-thumb{width:15px;height:15px;margin-top:-6px}
html.tv-mode input[type=range]::-moz-range-thumb{width:15px;height:15px}
html.tv-mode #mixer,html.tv-mode #look{width:min(540px,90vw)}
html.tv-mode #mixer.open{max-height:min(62vh,460px);padding:20px 24px 22px}
html.tv-mode #look.open{max-height:min(70vh,620px);padding:20px 24px 22px}
html.tv-mode .mx-head{font-size:11px;margin-bottom:14px}
html.tv-mode .knob label,html.tv-mode .bd-label,html.tv-mode .tv-title{font-size:14px}
html.tv-mode .knob output,html.tv-mode .bd-state{font-size:12px}
html.tv-mode .tv-tip{width:340px;font-size:13px;line-height:1.6}
html.tv-mode .layer .nm{font-size:14px;flex-basis:132px}
html.tv-mode .layer .cat{font-size:11px;width:64px}
html.tv-mode .mx-note{font-size:12px;line-height:1.65}
html.tv-mode #hint{font-size:11px;color:rgba(242,245,249,.48)}
html.tv-mode .iconbtn:focus-visible,html.tv-mode .scene-btn:focus-visible,
html.tv-mode input[type=range]:focus-visible{outline-width:3px}

@media (max-width:1200px){
  html.tv-mode #bar{gap:4px;padding:8px 10px}
  html.tv-mode .iconbtn{width:50px;height:50px}
  html.tv-mode #play{width:54px;height:54px}
  html.tv-mode .scene-btn{font-size:11.5px;letter-spacing:.11em;padding:15px 10px 14px}
  html.tv-mode .divider{margin-inline:2px}
  html.tv-mode #volslot,html.tv-mode #volwrap:hover #volslot,
  html.tv-mode #volwrap:focus-within #volslot,html.tv-mode #volslot.pinned{width:78px}
}

@media (max-width:720px){
  html.tv-mode #clock{top:24px;right:24px}
  html.tv-mode #clock .t{font-size:28px}
  html.tv-mode #clock .d{font-size:10.5px;margin-top:5px}
  html.tv-mode #dock{bottom:28px;max-width:calc(100vw - 24px);gap:10px}
  html.tv-mode #bar{max-width:calc(100vw - 24px);padding:7px 10px 9px}
  html.tv-mode .iconbtn{width:46px;height:46px}
  html.tv-mode #play{width:50px;height:50px}
  html.tv-mode .scene-btn{font-size:10px;padding:10px 8px}
  html.tv-mode #volwrap{display:none}
  html.tv-mode #look,html.tv-mode #mixer{width:calc(100vw - 24px)}
  html.tv-mode #look.open{max-height:64vh;padding-inline:18px}
  html.tv-mode .knob label,html.tv-mode .bd-label,html.tv-mode .tv-title{font-size:12px}
  html.tv-mode .tv-tip{
    left:-62px;width:min(340px,calc(100vw - 54px));max-width:none;
  }
}