:root{color-scheme:dark;--red:#ff3041;--dim:#a39c9e;--line:#393234;--panel:#191617;--led:'Menlo','SF Mono','Monaco','Consolas','DejaVu Sans Mono',monospace;font-family:var(--led);background:#0d0b0c;color:#eee9e5;font-size:13px}

*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button,select,input[type=text],input:not([type]){border:1px solid #514347;background:#231d1f;color:#f6eeee;border-radius:3px;padding:.58rem .7rem}
button{cursor:pointer;transition:transform 120ms cubic-bezier(.2,0,0,1),background 120ms}
button:hover{background:#493138;border-color:#ff6d7a}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ff6470;outline-offset:3px}
button.primary,button.active{background:#ba1227;border-color:var(--red)}
button.danger{color:#ff5968;border-color:#a62939}
button.holding{background:var(--red);color:#000}
button:disabled{opacity:.45;cursor:default}
input[type=range]{accent-color:var(--red);min-width:70px;width:100%;margin:0}
input[type=checkbox]{accent-color:var(--red)}
select{max-width:100%;min-width:0}
label{color:#c7bdbf}
h1,h2,p{margin:0}
h1{font-size:1.8rem;letter-spacing:-.07em;margin-top:.4rem}
h1 small{font-size:.65rem;letter-spacing:.16em;color:#a89b9e;margin-left:.6rem}
h2{font-size:.95rem;letter-spacing:.1em;color:#fa4254;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
h2 button{font-size:.72rem;letter-spacing:0}
.eyebrow{font-size:.7rem;letter-spacing:.14em;color:#b69b9f}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 0}
.badge{padding:.5rem .65rem;border:1px solid #336045;color:#69e49b;font-size:.75rem}
.badge.bad{background:#410d17;border-color:#ca2038;color:#ff6074}
.statusline{background:#050505;border:1px solid var(--line);padding:1rem;display:flex;justify-content:space-between;gap:1rem;color:var(--red);text-shadow:0 0 8px #f003;font-weight:bold}
#controller{padding:0 1.5rem;max-width:1760px;margin:auto}
.console-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start;margin-top:1rem}
.panel{background:var(--panel);border:1px solid var(--line);border-top:2px solid #61444a;border-radius:4px;padding:1rem;min-width:0}
.transport{grid-column:span 2}
.overlays{grid-column:1/-1}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.grow{flex:1;min-width:140px}
.grow select{display:block;width:100%;margin-top:.35rem}
.presets{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem}
.presets button{font-size:.75rem;padding:.45rem .55rem}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2rem;row-gap:.15rem}
.control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem .7rem;padding:.45rem 0;min-width:0}
.control label{font-size:.78rem}
.control output{font-size:.76rem;color:#f16f7d;font-variant-numeric:tabular-nums}
.control input[type=range]{grid-column:1/-1}
.check{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;margin:.5rem .7rem .5rem 0}
.select-control{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.45rem 0}
.select-control label{font-size:.8rem}
.tracks{height:250px;overflow:auto;border:1px solid #312b2d;background:#100e0f;margin:.8rem 0;scrollbar-color:#6c2a35 #111}
.track{display:grid;grid-template-columns:2.5rem 1fr 4rem 4.5rem;gap:.5rem;width:100%;border:0;border-bottom:1px solid #292125;border-radius:0;background:transparent;text-align:left;padding:.7rem}
.track .track-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.track .track-cache{text-align:right;color:#a28c90}
.track.active{background:#48131d;border-left:3px solid #f24}
.track.error .track-cache{color:#f65}
.track.ready .track-cache{color:#71c693}
.track small{color:#b89b9f}
.transport-buttons button{flex:1}
.scrub-label{display:flex;gap:1rem;margin:1rem 0}
.muted{color:var(--dim);font-size:.76rem;line-height:1.6;margin-top:.6rem}
.warning{background:#3a211a;color:#ffb595;padding:.65rem;font-size:.8rem;line-height:1.5;margin-bottom:.7rem}
.error{color:#ffb1bb;font-size:.82rem;line-height:1.5;margin:.6rem 0;white-space:pre-wrap}
.error:empty{display:none}
.vu{height:22px;background:#080808;border:1px solid #46393d;position:relative;overflow:hidden;margin-bottom:.3rem}
.vu span{height:100%;display:block;width:0;background:linear-gradient(90deg,#229c67,#bad05c 70%,#f22);transition:width 100ms}
.vu i{position:absolute;top:0;bottom:0;width:2px;background:white;left:0}
.hold-row button{touch-action:none;user-select:none}
.moshpro{border-top:1px solid var(--line);margin-top:1rem;padding-top:.8rem}
.moshpro h3{color:#d1b9bd;font-size:.75rem;letter-spacing:.08em;margin:0 0 .65rem}
.moshpro .row button{min-width:2.5rem}
.gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-top:.8rem}
.gif-grid button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}
.gif-grid img,.gif-grid video{width:100%;height:75px;object-fit:cover;display:block;margin-bottom:.35rem}
footer{padding:1.2rem 0 2rem;font-size:.75rem;color:#98878b;line-height:1.8}
.media-source{position:fixed;width:1px;height:1px;left:-10px;top:-10px;opacity:0;pointer-events:none}
[hidden]{display:none!important}

body.output-mode{background:#000;overflow:hidden}
#output{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#stage{--screen-x:12.962963cqw;--screen-y:6.041667cqw;--screen-w:74.074074cqw;--screen-h:41.666667cqw;--bevel:1.25cqw;--bevel-double:2.5cqw;width:min(100vw,177.777778vh);aspect-ratio:16/9;position:relative;container-type:inline-size;border-radius:2.5cqw;isolation:isolate;overflow:hidden;background:repeating-linear-gradient(0deg,#ffffff08 0 .052083cqw,#00000008 .052083cqw .104167cqw),linear-gradient(180deg,#f2f2f2 0%,#bdbdbd 29%,#8e8e8e 68%,#d6d6d6 100%);box-shadow:0 .3125cqw 0 #3e3e3e}
#stage.screen-4-3{--screen-x:22.222222cqw;--screen-w:55.555556cqw}
.bezel-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}
.skin-art{display:none;position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.skin-anim{position:absolute;z-index:4;inset:0;width:100%;height:100%;pointer-events:none}
.led{font-family:var(--led);font-weight:700;color:#ff2b2b;text-shadow:0 0 .3125cqw #ff2b2b,0 0 .729167cqw #ff000088;letter-spacing:.055em}
.station-id,#broadcast-clock,#skin-broadcast-clock,.live-blink,#marquee-title,#skin-marquee-title,.ticker-copy,.ticker-duration,.hardcore-badge span,.skin-badge span{-webkit-mask-image:radial-gradient(circle,#000 0 .052083cqw,transparent .067708cqw);-webkit-mask-size:.15625cqw .15625cqw;mask-image:radial-gradient(circle,#000 0 .052083cqw,transparent .067708cqw);mask-size:.15625cqw .15625cqw}
.skin-badge{display:none;box-sizing:border-box;position:absolute;z-index:4;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;line-height:1;pointer-events:none}
.skin-top-strip,.skin-bottom-panel{display:none}
.side-column{position:absolute;z-index:1;top:5.625cqw;width:calc(var(--screen-x) - 2.604167cqw);height:42.916667cqw;background:transparent}
.side-column:after{content:'';position:absolute;left:50%;top:50%;width:7.291667cqw;height:3.854167cqw;transform:translate(-50%,-50%);background:repeating-linear-gradient(180deg,#161616 0 .15625cqw,#eeeeee66 .15625cqw .208333cqw,transparent .208333cqw .729167cqw);filter:drop-shadow(0 .052083cqw .052083cqw #0008)}
.side-column-left{left:1.354167cqw}
.side-column-right{right:1.354167cqw}
.top-strip{box-sizing:border-box;position:absolute;z-index:4;left:6.875cqw;top:1.354167cqw;width:86.25cqw;height:3.645833cqw;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:2.5cqw;align-items:center;padding:0 1.458333cqw;background:#080808;border:.104167cqw solid #303030;border-radius:.625cqw;box-shadow:inset 0 .260417cqw .625cqw #000,0 0 0 .104167cqw #e7e7e7,0 .208333cqw .3125cqw #000a;font-size:1.875cqw;line-height:1;white-space:nowrap}
.station-id{justify-self:start}
#broadcast-clock,#skin-broadcast-clock{justify-self:center}
.live-cluster{justify-self:end;display:flex;align-items:center;gap:.78125cqw}
.live-blink{animation:liveblink 1.5s steps(2,end) infinite}
.signal-bars{display:flex;align-items:end;gap:.15625cqw;height:1.822917cqw}
.signal-bars i{display:block;width:.260417cqw;background:#ff2b2b;box-shadow:0 0 .3125cqw #ff2b2b,0 0 .729167cqw #ff000088;height:24%;transform-origin:bottom;animation:signal 650ms ease-in-out infinite alternate}
.signal-bars i:nth-child(2){height:42%;animation-delay:-.2s}
.signal-bars i:nth-child(3){height:61%;animation-delay:-.45s}
.signal-bars i:nth-child(4){height:80%;animation-delay:-.3s}
.signal-bars i:nth-child(5){height:100%;animation-delay:-.1s}
#screen-frame{box-sizing:border-box;position:absolute;z-index:2;left:calc(var(--screen-x) - var(--bevel));top:calc(var(--screen-y) - var(--bevel));width:calc(var(--screen-w) + var(--bevel-double));height:calc(var(--screen-h) + var(--bevel-double));padding:var(--bevel);border-radius:2.708333cqw;background:linear-gradient(145deg,#1a1a1a 0%,#0e0e0e 32%,#050505 100%);box-shadow:0 0 0 .15625cqw #555,0 .3125cqw .625cqw #000b,inset 0 0 .625cqw #000}
#screen{position:relative;width:100%;height:100%;border-radius:1.458333cqw;overflow:hidden;background:#000;box-shadow:inset 0 0 1.25cqw #000}
#mosh-canvas{width:100%;height:100%;display:block;object-fit:fill}
.screen-glass{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 2.083333cqw .520833cqw #0008;pointer-events:none;background:radial-gradient(ellipse 70% 24% at 50% 0%,#ffffff14 0%,#ffffff09 32%,transparent 72%),radial-gradient(ellipse at center,transparent 58%,#00000026 84%,#00000070 100%)}
.bottom-panel{box-sizing:border-box;position:absolute;z-index:4;left:6.145833cqw;top:48.645833cqw;width:87.708334cqw;height:6.25cqw;display:grid;grid-template-columns:67.083333cqw 19.0625cqw;gap:1.5625cqw;align-items:center}
.ticker-strip{box-sizing:border-box;height:4.791667cqw;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1.041667cqw;padding:0 1.041667cqw;background:#080808;border:.104167cqw solid #303030;border-radius:.625cqw;box-shadow:inset 0 .260417cqw .625cqw #000,0 0 0 .104167cqw #e7e7e7,0 .208333cqw .3125cqw #000a;font-size:1.875cqw;white-space:nowrap}
.ticker-title{min-width:0;overflow:hidden;text-align:left}
.ticker-track{display:inline-flex;align-items:center;white-space:nowrap;transform:translateX(0)}
.ticker-title span{display:inline-block;white-space:nowrap}
.ticker-copy{display:none}
.ticker-title.scrolling .ticker-track{gap:var(--ticker-gap);animation:ticker var(--ticker-duration) linear 2s infinite}
.ticker-title.scrolling .ticker-copy:not([hidden]){display:inline-block}
.hardcore-badge{border:.104167cqw solid #ff2b2b;border-radius:1.25cqw;padding:.46875cqw .833333cqw;font-size:1.041667cqw;line-height:1;box-shadow:inset 0 0 .3125cqw #ff000033,0 0 .3125cqw #ff000044}
.ticker-duration{font-size:.625cqw;color:#ff2b2b;letter-spacing:.04em}
.ticker-duration b{font-size:.833333cqw;color:#ff2b2b}
.knob-group{height:100%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center}
.knob{height:100%;background:none!important;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.260417cqw}
.knob span{font-size:.625cqw;color:#111411;font-weight:900;letter-spacing:.11em;text-shadow:0 1px #fff7}
.knob i{display:block;position:relative;width:3.854167cqw;height:3.854167cqw;border-radius:50%;background:repeating-conic-gradient(#202220 0deg 3deg,#c9cbc7 3deg 5deg,#555955 5deg 8deg);box-shadow:0 .260417cqw .3125cqw #0009,0 0 0 .104167cqw #252725,0 0 0 .208333cqw #9fa29e,inset 0 .15625cqw .104167cqw #f2f3f0}
.knob i:before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 31% 24%,#f0f1ee 0%,#b5b8b4 18%,#696e69 48%,#2c302d 82%);box-shadow:inset -.15625cqw -.15625cqw .3125cqw #000b,inset .104167cqw .104167cqw .208333cqw #fff8}
.knob i:after{content:'';position:absolute;top:14%;left:48%;height:29%;width:5%;background:#f5f4ea;box-shadow:0 0 .104167cqw #000;transform:rotate(20deg);transform-origin:50% 125%}
.knob:focus-visible i{outline:.15625cqw solid #fa2635;outline-offset:.260417cqw}
#stage.image-skin>.bezel-art,#stage.image-skin>.side-column,#stage.image-skin>.top-strip,#stage.image-skin>.second-strip,#stage.image-skin>.bottom-panel,#stage.image-skin>.hardware-row{display:none}
#stage.image-skin{background:#000}
#stage.image-skin>.skin-art{display:block}
#stage.image-skin #screen-frame{left:var(--skin-screen-x);top:var(--skin-screen-y);width:var(--skin-screen-width);height:var(--skin-screen-height);padding:0;border-radius:0;background:none;box-shadow:none}
#stage.image-skin #screen{border-radius:0;box-shadow:none}
#stage.image-skin>.skin-top-strip{box-sizing:border-box;position:absolute;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;left:var(--skin-top-x);top:var(--skin-top-y);width:var(--skin-top-width);height:var(--skin-top-height);column-gap:1.5em;padding:0 1.25cqw;overflow:hidden;font-size:var(--skin-top-font);line-height:1;white-space:nowrap}
#stage.image-skin .skin-top-strip .station-id,#stage.image-skin #skin-broadcast-clock,#stage.image-skin .skin-top-strip .live-cluster{min-width:0;max-width:100%;overflow:hidden}
#stage.image-skin>.skin-bottom-panel{box-sizing:border-box;position:absolute;z-index:4;display:block;left:var(--skin-ticker-x);top:var(--skin-ticker-y);width:var(--skin-ticker-width);height:var(--skin-ticker-height)}
#stage.image-skin .skin-ticker-strip{box-sizing:border-box;width:100%;height:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.041667cqw;padding:0 1.041667cqw;font-size:var(--skin-ticker-font);white-space:nowrap}
#stage.image-skin.has-skin-badge .skin-badge{display:flex;left:var(--skin-badge-x);top:var(--skin-badge-y);width:var(--skin-badge-width);height:var(--skin-badge-height)}
#stage.image-skin.skin-narrow-ticker .skin-bottom-panel .ticker-duration{display:none}
#stage.no-bezel{--screen-x:0cqw;--screen-y:0cqw;--screen-w:100cqw;--screen-h:56.25cqw;--bevel:0cqw;--bevel-double:0cqw;border-radius:0;background:#000}
#stage.no-bezel.screen-4-3{--screen-x:12.5cqw;--screen-w:75cqw}
#stage.no-bezel>.bezel-art,#stage.no-bezel>.skin-art,#stage.no-bezel>.skin-anim,#stage.no-bezel>.side-column,#stage.no-bezel>.top-strip,#stage.no-bezel>.skin-top-strip,#stage.no-bezel>.bottom-panel,#stage.no-bezel>.skin-bottom-panel,#stage.no-bezel>.skin-badge{display:none}
#stage.no-bezel>.skin-badge{display:none!important}
#stage.no-bezel #screen-frame{left:calc(var(--screen-x) - var(--bevel));top:calc(var(--screen-y) - var(--bevel));width:calc(var(--screen-w) + var(--bevel-double));height:calc(var(--screen-h) + var(--bevel-double));border-radius:0;background:#000;box-shadow:none}
#stage.no-bezel #screen{border-radius:0;box-shadow:none}
#stage.no-bezel .screen-glass{display:none}
#signal-start{position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#030303eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;z-index:10;font-family:var(--led);cursor:pointer}
#signal-start span{font-size:1rem;color:#7f555b;letter-spacing:.15em}
#signal-start strong{font-size:clamp(18px,3vw,44px);color:#fff}
#signal-start b{font-size:clamp(32px,6vw,90px);color:#ff263e;text-shadow:0 0 30px #ff003e66}
#signal-start small{color:#b19499}
.output-error{position:absolute;top:5%;left:4%;z-index:5;max-width:min(44rem,70%);background:#330610dc;border:1px solid #fd425b;padding:.5rem .65rem;color:#ffccd2;white-space:pre-wrap;font-size:clamp(10px,.8cqw,13px);line-height:1.35;box-shadow:0 0 1rem #000}

@keyframes liveblink{50%{opacity:.35}
}
@keyframes signal{to{transform:scaleY(.4);opacity:.6}
}
@keyframes ticker{to{transform:translateX(calc(0px - var(--ticker-step)))}
}

@media(max-width:1100px){.console-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.transport{grid-column:span 2}
.master{grid-column:auto}
.masthead{align-items:start;flex-direction:column}
}

@media(max-width:650px){#controller{padding:0 .6rem}
.console-grid{display:block}
.panel{margin-bottom:.7rem}
.controls{grid-template-columns:1fr}
.statusline{font-size:.75rem}
h1{font-size:1.4rem}
h1 small{display:block;margin:.5rem 0}
.track{grid-template-columns:1.5rem 1fr 3rem 3rem;font-size:.75rem}
}

@media(prefers-reduced-motion:reduce){#controller button{transition:none}
.signal-bars i,.live-blink,.ticker-title.scrolling .ticker-track{animation:none}
}

.gig-start{font-size:1.2rem;padding:.85rem 1.25rem}
.badge.covered{color:#ffdc70;background:#493908;border-color:#c5a340}
.statusline{flex-wrap:wrap}
.idle-settings{grid-column:1/-1}
.idle-settings>label{display:block;margin:.8rem 0}
.idle-settings input[type=text]{display:block;width:100%;margin-top:.3rem}
#idle-screen{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--idle-gap,0px);container-type:size;overflow:hidden}
#idle-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#0005 2px 3px)}
.idle-image{height:var(--idle-logo-height,38%);width:auto;max-width:90%;object-fit:contain;flex-shrink:0}
.idle-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--idle-gap,0px);flex-shrink:0;width:90%;min-width:0;text-align:center;font-size:var(--idle-line-size,0px);line-height:1.2;white-space:normal;overflow-wrap:anywhere;text-shadow:0 0 6px #ff2b2b,0 0 14px #ff000088}
.idle-clock{font-size:var(--idle-clock-size,0px)}
#idle-screen.custom-image .idle-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
#idle-screen.custom-image .idle-text{background:#0008}
#stage:fullscreen{width:min(100vw,177.777778vh);height:min(100vh,56.25vw);margin:auto}
#stage:-webkit-full-screen{width:min(100vw,177.777778vh);height:min(100vh,56.25vw);margin:auto}
#stage::backdrop{background:#000}
#black-overlay{position:fixed;inset:0;z-index:100;background:#000;pointer-events:none}
#stage.blacked-out{border-radius:0;box-shadow:none}

#output.blacked-out #signal-start{visibility:hidden}

/* Sender stays inside the current skin's screen rectangle. */
#sender-headline{position:absolute;z-index:8;bottom:0;left:0;right:0;box-sizing:border-box;padding:0 5%;color:#fff;background:rgb(0 0 0 / 70%);font-family:monospace;line-height:1.2;white-space:normal;overflow-wrap:anywhere;pointer-events:none}
#sender-headline>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.4em;overflow:hidden}
#sender-off-air{position:absolute;inset:0;z-index:7;background:linear-gradient(to bottom,transparent 70%,#111 70%,#111 80%,transparent 80%),linear-gradient(to right,#ccc 0% 14.28%,#cc0 14.28% 28.56%,#0cc 28.56% 42.84%,#0c0 42.84% 57.12%,#c0c 57.12% 71.4%,#c00 71.4% 85.68%,#00c 85.68%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;font-family:monospace;color:white}
#sender-off-air strong{background:#000;padding:.2em .5em;font-size:6cqw}#sender-off-air span{background:#000;padding:.4em;font-size:1.8cqw}
#sender-off-air[hidden],#sender-headline[hidden]{display:none}
#screen.sender-tracking #mosh-canvas{animation:sender-tracking 200ms ease-in-out 5;filter:brightness(1.25)}
@keyframes sender-tracking{0%,100%{transform:translateX(0) skewX(0)}25%{transform:translateX(1.5%) skewX(3deg)}65%{transform:translateX(-1%) skewX(-2deg)}}
@media(prefers-reduced-motion:reduce){#screen.sender-tracking #mosh-canvas{animation:none;filter:brightness(1.1)}}
#sender-headlines{max-height:18rem;overflow:auto;padding-left:1.7rem}#sender-headlines button{text-align:left;width:100%;margin:.2rem 0}#sender-feeds{flex-wrap:wrap}.sender-panel{min-width:0}

/* The zap covers the whole screen rectangle, including camera and text overlays. */
#zap-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;background:#000;image-rendering:pixelated;pointer-events:none}
#zap-canvas[hidden]{display:none}
#screen.zapping #output-error{z-index:21}

.hosted-only{display:none}
.hosted-mode .hosted-only{display:initial}
.hosted-mode .local-only,.hosted-mode [data-action="prefetch"],.hosted-mode .moshpro,.hosted-mode [data-action="refreshGifs"],.hosted-mode [data-action="gif"],.hosted-mode #gif-grid{display:none}
.hosted-mode #setting-preservesPitch{display:none}
#hosted-video-layer{position:absolute;inset:0;overflow:hidden;background:#000}
.yt-deck{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}
.yt-deck iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.hosted-mode #mosh-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
#hosted-output-tools{position:fixed;bottom:8px;left:8px;z-index:120;display:flex;align-items:center;gap:.7rem;padding:.5rem;background:#000c;color:#eee;font:12px monospace}
#hosted-output-tools[hidden]{display:none}
#web-version{margin-left:.6rem}

/* The grid and ritual always occupy the skin's screen rectangle. */
#teletext-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:12;background:#000;pointer-events:none}
#teletext-canvas[hidden]{display:none}
#sender-off-air strong{font-size:2em}#sender-off-air span{font-size:1em}
#idle-screen.signon-idle{z-index:8;overflow:hidden;background:#000}
#stage.portrait-stage{width:min(100vw,56.25vh);aspect-ratio:9/16}
#stage.portrait-stage:fullscreen,#stage.portrait-stage:-webkit-full-screen{width:min(100vw,56.25vh);height:min(100vh,177.777778vw)}
#stage.portrait-stage.no-bezel{--screen-x:0cqw;--screen-y:0cqw;--screen-w:100cqw;--screen-h:177.777778cqw}
.programme-guide{background:#000;color:#fff;font-family:LocalLED,monospace;padding:clamp(12px,3vw,40px)}
.programme-guide h1,.programme-guide h2,.programme-guide a,#guide-now{color:#f33}
#guide-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
#guide-slots section{border:1px solid #633;padding:16px}#guide-slots .current{border-color:#f33;background:#240000}
#guide-slots li{margin:.5em 0;overflow-wrap:anywhere}
@media(max-width:650px){.console-grid{grid-template-columns:1fr}.masthead{flex-wrap:wrap}.masthead .row{flex-wrap:wrap}.statusline{flex-wrap:wrap}#controller select{max-width:100%}}

/* Public television: controls belong to Regie, never to the viewer. */
.viewer-mode #controller,.viewer-mode #hosted-output-tools,.viewer-mode .knob-group{display:none!important}
.viewer-mode #signal-start{inset:0;width:100%;height:100%;max-width:none;border-radius:0}
.viewer-mode .live-active .live-blink{opacity:1;animation:none}
#viewer-count{position:fixed;bottom:4px;right:8px;color:#999;background:#000b;font:10px monospace;pointer-events:none;z-index:30}
#viewer-black{position:absolute;inset:0;background:#000;z-index:50;pointer-events:none}
#portrait-bands{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#portrait-bands[hidden],#viewer-black[hidden],#viewer-count[hidden]{display:none}
.regie-panel label{display:block;margin:.6rem 0}.regie-panel input{display:block;width:100%;margin-top:.3rem}.regie-panel .row{flex-wrap:wrap}