@font-face{font-family:"Archivo";src:url("./fonts/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("./fonts/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrainsMono";src:url("./fonts/jbmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Tokens read as a rack in a studio: anodized surfaces, engraved silk labels,
   one lamp colour. The accent is a tally lamp, so it is rationed to live state
   and the single primary action. */
:root{
  --rack:#0b0b0d;
  --bench:#0e0e11;
  --panel:#131316;
  --panel-2:#17171b;
  --panel-3:#1d1d22;
  --silk:#eae6dc;
  --silk-2:#c6c2ba;
  --engrave:#b0ada5;
  --engrave-2:#98958e;
  --line:rgba(234,230,220,.085);
  --line-2:rgba(234,230,220,.15);
  --line-3:rgba(234,230,220,.26);
  --lamp:#e8a13c;
  --live:#cf4436;
  --ok:#5a9d84;
  --r-xs:4px; --r-sm:7px; --r-md:11px; --r-lg:15px; --r-xl:20px;
  --u:4px;
  --f-sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrainsMono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,.68,0,1);
  --gutter:22px;
}
html[data-theme="paper"]{
  --rack:#e8e6e0;
  --bench:#eeece7;
  --panel:#f7f6f2;
  --panel-2:#fbfaf7;
  --panel-3:#efeee8;
  --silk:#191919;
  --silk-2:#4a4945;
  --engrave:#52504c;
  --engrave-2:#69675f;
  --line:rgba(25,25,25,.10);
  --line-2:rgba(25,25,25,.17);
  --line-3:rgba(25,25,25,.29);
  --lamp:#8f5a0c;
  --live:#a8342a;
  --ok:#2f6b55;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--rack);color:var(--silk);
  font-family:var(--f-sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
  letter-spacing:-.004em;
}
h1,h2,h3,p,dl,dd,ol,ul{margin:0;padding:0}
h2{font-size:12.5px;font-weight:500;letter-spacing:.015em}
a{color:inherit}
code{font-family:var(--f-mono);font-size:.86em;background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;color:var(--silk-2)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:8px}
.skip:focus{left:8px;z-index:60;background:var(--lamp);color:#17140e;padding:8px 12px;border-radius:var(--r-sm);font-size:13px}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

/* ---------- deck ---------- */
.deck{min-height:100dvh}


.deck{min-width:0;display:flex;flex-direction:column}

.strip{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;
  height:52px;padding:0 var(--gutter);
  background:color-mix(in srgb,var(--rack) 93%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.strip-left{display:flex;align-items:center;gap:11px;min-width:0}
.onair{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;
  color:var(--engrave);border:1px solid var(--line-2);border-radius:var(--r-xs);
  padding:3px 7px;
}
.onair-dot{width:6px;height:6px;border-radius:50%;background:var(--engrave-2)}
.onair[data-state="running"]{color:var(--live);border-color:color-mix(in srgb,var(--live) 45%,transparent)}
.onair[data-state="running"] .onair-dot{background:var(--live);animation:breathe 2.4s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}
.strip-name{font-size:10.5px;letter-spacing:.2em;color:var(--silk-2);white-space:nowrap}

.feedtag{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--engrave);white-space:nowrap}
.feedtag-dot{width:6px;height:6px;border-radius:50%;background:var(--engrave-2);flex:0 0 auto}
.feedtag[data-state="live"]{color:var(--silk-2)}
.feedtag[data-state="live"] .feedtag-dot{background:var(--ok)}
.feedtag[data-state="stale"]{color:var(--lamp)}
.feedtag[data-state="stale"] .feedtag-dot{background:var(--lamp)}
.feedtag[data-state="error"]{color:var(--live)}
.feedtag[data-state="error"] .feedtag-dot{background:var(--live)}
.strip-right{display:flex;align-items:center;gap:12px}
.stamp{font-size:10px;color:var(--engrave-2);white-space:nowrap}

main{flex:1 0 auto;padding:24px var(--gutter) 0;max-width:1280px;width:100%;margin:0 auto}

/* one page: every section stacked, separated by a hairline */
.sec{padding:34px 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec:first-of-type{padding-top:26px}
.sec:last-of-type{padding-bottom:40px}

.sechead{margin-bottom:18px;max-width:72ch}
.sechead h1,.sechead h2{font-size:clamp(19px,2.3vw,25px);font-weight:500;letter-spacing:-.028em;line-height:1.1;margin-bottom:7px}
.sechead p{font-size:12.5px;color:var(--silk-2);line-height:1.6}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;min-width:0}
.panel.wide{margin-top:16px}
.panel-lede{font-size:11.5px;color:var(--silk-2);line-height:1.55;margin-bottom:11px;max-width:72ch}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

.runs.tall li{padding:8px 0;font-size:12.5px}

.gapcells{display:flex;gap:3px;height:16px;margin-bottom:8px}
.gapcells span{flex:1 1 0;border-radius:2px;background:var(--panel-3);transition:background .3s var(--ease)}
.gapcells span.closed{background:var(--silk-2)}
.gapcells span.open{background:var(--lamp)}
.gaplegend{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--engrave);flex-wrap:wrap}
.gaplegend .warn{color:var(--lamp)}

.srclist{list-style:none;display:grid;gap:0}
.srclist li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--silk-2)}
.srclist li:last-child{border-bottom:0}
.srclist .mono{color:var(--engrave);font-size:10px}

/* lab */
.labrow{display:grid;grid-template-columns:118px 1fr 82px;gap:10px;align-items:center;margin-bottom:11px}
.labrow label{font-size:11px;color:var(--silk-2)}
.labrow output{font-size:11px;color:var(--silk);text-align:right}
.labrow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}
.labrow input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--panel-3);border-radius:2px}
.labrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:var(--lamp);border:0}
.labrow input[type=range]::-moz-range-track{height:3px;background:var(--panel-3);border-radius:2px}
.labrow input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--lamp)}

.labtoggles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:13px 0 10px}
.labtg{
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--silk-2);
  border-radius:var(--r-sm);padding:8px 6px;font-size:11px;cursor:pointer;
  font-family:var(--f-sans);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.labtg:hover{border-color:var(--line-3);color:var(--silk)}
.labtg[data-on="1"]{background:var(--lamp);border-color:var(--lamp);color:#17140e;font-weight:500}
.labnote{font-size:10.5px;color:var(--engrave);line-height:1.5;margin-top:2px}

.labcheck{list-style:none;display:grid;gap:0}
.labcheck-row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:11px}
.labcheck-row:last-child{border-bottom:0}
.labcheck-id{font-size:9.5px;color:var(--engrave-2)}
.labcheck-claim{color:var(--silk-2);min-width:0}
.labcheck-got{font-size:10px;color:var(--engrave);text-align:right}
.labcheck-row[data-ok="1"] .labcheck-got{color:var(--ok)}
.labcheck-row[data-ok="0"] .labcheck-got{color:var(--live)}
.labfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.labverdict{font-size:10px;color:var(--engrave);text-transform:uppercase;letter-spacing:.06em}
.labverdict[data-tone="pass"]{color:var(--ok)}
.labverdict[data-tone="fail"]{color:var(--live)}
.labverdict[data-tone="run"]{color:var(--lamp)}

/* overlay preview mirrors live state */
.ov-mock-foot{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:var(--engrave);padding-top:4px}

@media (max-width:1060px){
  .twocol{grid-template-columns:1fr}
}

.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.panel-head.tight{margin-top:22px}
.panel-note{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--engrave);white-space:nowrap}

/* ---------- program monitor ---------- */
.monitor-wrap{display:flex;flex-direction:column;min-width:0}
.program{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(272px,.8fr);gap:18px;align-items:stretch}

.monitor-shell{
  padding:6px;border-radius:var(--r-xl);
  background:var(--bench);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(234,230,220,.045);
}
.monitor-core{
  border-radius:calc(var(--r-xl) - 6px);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(234,230,220,.05);
  overflow:hidden;
}

/* frame chrome */
.monitor-chrome{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:8px 13px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.ch-label{font-family:var(--f-mono);font-size:9px;letter-spacing:.11em;color:var(--engrave)}
.ch-tally{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:var(--engrave)}
.ch-tally-lamp{width:7px;height:7px;border-radius:50%;background:var(--engrave-2);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.ch-tally[data-state="running"]{color:var(--live)}
.ch-tally[data-state="running"] .ch-tally-lamp{background:var(--live);box-shadow:0 0 8px rgba(207,68,54,.6)}
.ch-tally[data-state="idle"]{color:var(--silk-2)}
.ch-tally[data-state="idle"] .ch-tally-lamp{background:var(--silk-2)}
.ch-tally[data-state="stale"]{color:var(--lamp)}
.ch-tally[data-state="stale"] .ch-tally-lamp{background:var(--lamp)}
.ch-tally[data-state="offline"]{color:var(--live)}
.ch-tally[data-state="offline"] .ch-tally-lamp{background:var(--live)}
.ch-tc{font-size:10px;color:var(--engrave-2);letter-spacing:.02em}

.monitor-body{padding:20px 18px 16px}
.inst{display:grid;grid-template-columns:minmax(0,1fr) 156px;gap:18px;align-items:start}
.inst-kicker{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--engrave-2);margin-bottom:5px}
.statechip{
  display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:4px 9px 4px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--panel-2);
}
.statechip-lamp{width:7px;height:7px;border-radius:50%;background:var(--engrave-2);flex:0 0 auto;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.statechip-word{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--silk-2);transition:color .4s var(--ease);
}
.statechip-detail{font-family:var(--f-mono);font-size:9.5px;color:var(--engrave-2);letter-spacing:-.01em}
.statechip-detail::before{content:"·";margin-right:6px;color:var(--engrave-2)}
.statechip:has([data-key="running"]){border-color:color-mix(in srgb,var(--live) 42%,transparent)}
.statechip:has([data-key="running"]) .statechip-lamp{background:var(--live);box-shadow:0 0 8px rgba(207,68,54,.55)}
.statechip:has([data-key="idle"]) .statechip-lamp{background:var(--silk-2)}
.statechip:has([data-key="stale"]){border-color:color-mix(in srgb,var(--lamp) 40%,transparent)}
.statechip:has([data-key="stale"]) .statechip-lamp{background:var(--lamp)}
.statechip:has([data-key="offline"]) .statechip-lamp{background:var(--live)}
.statechip:has([data-key="running"]) .statechip-word{color:var(--silk)}

/* VU meter with a real scale and peak hold */
.vu{margin-top:14px}
.vu-bars{display:flex;gap:2px;height:26px;align-items:flex-end}
.vu-bars i{
  flex:1 1 0;display:block;height:8px;background:var(--panel-3);border-radius:1px;
  box-shadow:0 1px 0 rgba(234,230,220,.05) inset;
  transition:background .3s var(--ease),height .3s var(--ease);
}
.vu-bars i.on{background:var(--silk-2)}
.vu-bars i.hot{background:var(--lamp)}
.vu-bars i.peak{background:var(--silk)}
.vu-scale{position:relative;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:8px;color:var(--engrave);letter-spacing:.04em;margin-top:2px}
.vu-scale span{position:relative;padding-top:4px}
.vu-scale span::before{content:"";position:absolute;top:-2px;left:0;width:1px;height:3px;background:var(--line-3)}
.vu-caption{font-family:var(--f-mono);font-size:8.5px;color:var(--engrave-2);letter-spacing:.01em;margin-top:5px}
.vu-read{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.vu-num{font-size:clamp(46px,6.4vw,74px);line-height:.86;color:var(--silk);letter-spacing:-.052em}
.vu-unit{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--engrave)}
.vu-peak{margin-left:auto;font-size:9.5px;color:var(--engrave-2)}
.vu-peak[hidden]{display:none}

/* round clock, the thing an operator actually watches */
.inst-right{border-left:1px solid var(--line);padding-left:18px}
.tc{font-size:clamp(19px,2.1vw,24px);color:var(--silk-2);letter-spacing:-.04em;line-height:1.05;transition:color .4s var(--ease),font-variant-numeric .3s}
.tc[data-urgent="1"]{color:var(--lamp)}
.tc-round{font-family:var(--f-mono);font-size:10px;color:var(--engrave);margin-top:3px}
.tc-rail{height:3px;background:var(--panel-3);border-radius:2px;overflow:hidden;margin-top:11px}
.tc-fill{display:block;height:100%;width:0%;background:var(--silk-2);border-radius:2px;transition:width .9s linear}
.tc-note{font-size:9.5px;color:var(--engrave-2);margin-top:7px;letter-spacing:.02em}

.monitor-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:16px;padding-top:2px}
.monitor-stats>div{padding:10px 12px 0 0;border-right:1px solid var(--line);min-width:0}
.monitor-stats>div:last-child{border-right:0;padding-right:0}
.monitor-stats dt{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--engrave);margin-bottom:3px}
.monitor-stats dd{font-size:12.5px;color:var(--silk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monitor-foot{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:8px 13px;border-top:1px solid var(--line);background:var(--panel-2);
  font-size:9.5px;color:var(--engrave-2);
}
.foot-flags{display:inline-flex;gap:10px;align-items:center}
#corepaused{color:var(--live);font-size:9px;letter-spacing:.1em}

.cues{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:auto;background:var(--line);border:1px solid var(--line);border-radius:calc(var(--r-xl) - 6px);overflow:hidden}
.cue{background:var(--panel);padding:10px 13px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.cue-id{font-size:8.5px;letter-spacing:.12em;color:var(--engrave-2)}
.cue-text{font-size:11.5px;color:var(--silk-2);line-height:1.45}
.cue[data-tone="hot"] .cue-text{color:var(--silk)}
.cue[data-tone="warn"] .cue-text{color:var(--lamp)}

/* ---------- rundown ---------- */
.rundown{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:13px;align-self:stretch;display:flex;flex-direction:column}
.runs{list-style:none;display:grid;gap:0}
.runs li{
  display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;
}
.runs li:last-child{border-bottom:0;padding-bottom:0}
.runs .rid{font-family:var(--f-mono);font-size:10px;color:var(--engrave-2)}
.runs .rlabel{color:var(--silk-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runs .rval{font-family:var(--f-mono);font-size:11px;color:var(--silk);text-align:right}
.runs li[data-flag="1"] .rval{color:var(--lamp)}

.receipts{list-style:none;display:grid;gap:0;margin-top:2px}
.receipts li{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;
}
.receipts li:last-child{border-bottom:0}
.receipts .rdg{color:var(--silk-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipts .rrt{color:var(--engrave);white-space:nowrap}
.receipts li.is-new .rdg{color:var(--silk)}
.emptyline{padding:8px 0;font-family:var(--f-mono);font-size:10.5px;color:var(--engrave-2)}

.rd-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);display:grid;gap:5px}
.rd-foot-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;min-width:0}
.rd-foot-k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--engrave);flex:0 0 auto}
.rd-foot-v{font-size:10.5px;color:var(--silk-2);min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.rd-foot-note{font-size:10px;color:var(--engrave-2);line-height:1.4;margin-top:3px}

/* ---------- rack ---------- */
.rackgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.unit{background:var(--panel);padding:12px 13px;display:flex;flex-direction:column;gap:2px;min-width:0}
.unit-k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--engrave)}
.unit-v{font-size:17px;color:var(--silk);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-sub{font-size:10px;color:var(--engrave-2);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit[data-tone="warn"] .unit-v{color:var(--lamp)}
.unit[data-tone="bad"] .unit-v{color:var(--live)}

/* ---------- overlay section ---------- */
.overlay-sec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(268px,.95fr);gap:24px;align-items:start}
.ov-copy h2{font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
.ov-copy>p{font-size:13px;color:var(--silk-2);max-width:58ch;line-height:1.62}
.ov-steps{list-style:none;display:grid;gap:7px;margin:14px 0 14px}
.ov-steps li{display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:12.5px;color:var(--silk-2);align-items:baseline}
.ov-steps .mono{color:var(--engrave-2);font-size:10px}
.ov-url{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ov-url input{
  flex:1 1 240px;min-width:0;
  background:var(--panel-3);border:1px solid var(--line);color:var(--silk-2);
  border-radius:var(--r-sm);padding:8px 10px;font-size:10.5px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--f-sans);font-size:12px;font-weight:500;
  padding:8px 15px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
  font-synthesis:none;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:7px 12px;font-size:11.5px}
.btn-quiet{background:transparent;border-color:var(--line-2);color:var(--silk-2)}
.btn-quiet:hover{border-color:var(--line-3);color:var(--silk);background:var(--panel-2)}
.btn-ghost-arrow{
  display:inline-flex;align-items:center;gap:0;margin-top:4px;
  background:transparent;border:0;padding:0;color:var(--silk);
  text-decoration:none;font-size:12.5px;font-weight:500;
}
.btn-ghost-arrow .arrow{
  display:inline-grid;place-items:center;width:22px;height:22px;margin-left:8px;
  border-radius:50%;background:var(--panel-3);border:1px solid var(--line-2);color:var(--silk-2);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.btn-ghost-arrow:hover .arrow{background:var(--lamp);color:#17140e;border-color:var(--lamp);transform:translate(1px,-1px)}
.ov-note{font-size:11px;color:var(--engrave);margin-bottom:12px}
.ov-preview{display:flex;flex-direction:column;gap:9px}
.ov-frame{
  position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,var(--panel-3),var(--bench) 72%);
  aspect-ratio:16/9;display:grid;align-items:end;justify-items:start;padding:14px;
}
.ov-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;opacity:.42;
}
.ov-mock{
  position:relative;z-index:1;display:grid;gap:6px;min-width:206px;
  padding:12px 15px;border-radius:var(--r-sm);
  background:rgba(9,9,11,.8);border:1px solid var(--line-2);
}
.ov-mock-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid rgba(234,230,220,.12)}
.ov-mock-tag{font-family:var(--f-mono);font-size:7px;letter-spacing:.16em;color:var(--lamp)}
.ov-mock-round{font-family:var(--f-mono);font-size:8px;color:var(--engrave)}
.ov-mock-state{font-size:23px;font-weight:500;letter-spacing:-.025em;color:var(--silk-2)}
.ov-mock-strip{display:flex;align-items:center;gap:8px;padding-top:5px;border-top:1px solid rgba(234,230,220,.12)}
.ov-mock-progress{flex:1;height:2px;background:rgba(234,230,220,.16);border-radius:1px;overflow:hidden}
.ov-mock-progress span{display:block;height:100%;width:38%;background:var(--silk-2)}
.ov-mock-count{font-family:var(--f-mono);font-size:8px;color:var(--engrave)}

.foot{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px var(--gutter) 28px;border-top:1px solid var(--line);
  font-size:11px;color:var(--engrave);
}
.foot p{max-width:66ch}
.foot a{color:var(--silk-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.foot a:hover{color:var(--silk)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .program{grid-template-columns:1fr}
  .overlay-sec{grid-template-columns:1fr}
  .rundown{order:2}
}
@media (max-width:860px){
  .inst{grid-template-columns:minmax(0,1fr) 132px;gap:16px}
  .inst-right{padding-left:14px}
  .monitor-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monitor-stats>div:nth-child(2n){border-right:0;padding-right:0}
  .monitor-stats>div:nth-child(n+3){border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
}
@media (max-width:720px){
  :root{--gutter:14px}
  .shell{grid-template-columns:1fr}
  .tally{width:auto;flex-direction:row;padding:5px 8px;gap:5px}
  .tally-label{font-size:8.5px;max-width:none}
  .strip{height:auto;padding:8px var(--gutter);flex-wrap:wrap;gap:8px}
  .sec{padding:26px 0}
  .strip-name{display:none}
  .monitor-body{padding:16px 13px 13px}
  .monitor-chrome{grid-template-columns:1fr auto;row-gap:4px}
  .ch-tc{grid-column:1/-1;text-align:right}
  .inst{grid-template-columns:1fr;gap:16px}
  .inst-right{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:13px}
  .tc{font-size:26px}
  .cues{grid-template-columns:1fr}
  .rackgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-v{font-size:15px}
  .monitor-shell{padding:5px;border-radius:var(--r-lg)}
  .monitor-core{border-radius:calc(var(--r-lg) - 5px)}
}
@media (max-width:430px){
  .rackgrid{grid-template-columns:1fr}
  .ov-url input{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}