@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--wall-bg:#101317;--panel-bg:#14181d;--line:#262c33;--text:#e7eaed;--text-dim:#8b939c;--tally:#ff3b30;--tally-glow:#ff3b308c;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--space-3:12px;--space-4:16px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--wall-bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}.wall{background:repeating-linear-gradient(to bottom, #ffffff03 0px, #ffffff03 1px, transparent 1px, transparent 3px), var(--wall-bg);flex-direction:column;min-height:100vh;display:flex}.wall-header{height:52px;padding:0 var(--space-4);background:var(--panel-bg);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;display:flex}.icon-hide{cursor:pointer;background:gray;border-radius:100%;justify-content:center;align-items:center;width:32px;padding:5px;display:flex}.right-box{align-items:center;gap:10px;display:flex}.cameras{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(6,1fr);gap:8px;width:100%;height:100%;display:grid}.hideit{position:fixed}.tile--cam:first-child,.tile--cam:nth-child(2),.tile--cam:nth-child(3){grid-column:span 2}.tile--cam:nth-child(4),.tile--cam:nth-child(5){grid-column:span 3}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand h1{font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.timecode{font-family:var(--font-mono);letter-spacing:.06em;color:var(--text-dim);font-variant-numeric:tabular-nums;flex:none;font-size:13px}.tally{background:var(--tally);width:8px;height:8px;box-shadow:0 0 6px var(--tally-glow);border-radius:50%;flex:none;animation:2.4s ease-in-out infinite pulse}.tally--big{width:10px;height:10px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes portrait-in{0%{opacity:0}to{opacity:1}}.wall-main{flex:auto;gap:2px;min-height:0;padding:2px;display:grid}.wall-main-with-camera{grid-template-columns:minmax(0,1fr) 260px}.rail{flex-direction:column;gap:2px;min-height:0;display:flex}.tile{border:1px solid var(--line);background:#000;position:relative;overflow:hidden}.tile--program{min-height:0}.rail .tile--cam{flex:1 1 0;min-height:0}.cam-portrait{--portrait-base-w:200vw;--portrait-base-h:125vh;--portrait-scale:.06;width:calc(var(--portrait-base-w) * var(--portrait-scale));height:calc(var(--portrait-base-h) * var(--portrait-scale));z-index:2;pointer-events:none;background:0 0;animation:2s ease-in portrait-in;position:absolute;bottom:0;overflow:hidden}.cam-portrait-scale{width:var(--portrait-base-w);height:var(--portrait-base-h);transform:scale(var(--portrait-scale));transform-origin:0 0}.cam-portrait-scale iframe{width:var(--portrait-base-w);height:var(--portrait-base-h);border:0;display:block}.tile>iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.tile-tag{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-family:var(--font-mono);letter-spacing:.08em;color:var(--text);pointer-events:none;z-index:1;background:#0a0c0eb8;border:1px solid #ffffff14;align-items:center;gap:6px;padding:3px 8px;font-size:11px;display:flex;position:absolute;bottom:8px;left:8px}.tile--program .tile-tag{padding:4px 10px;font-size:12px}.stage-switch{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1;background:#0a0c0eb8;border:1px solid #ffffff14;gap:2px;padding:2px;display:flex;position:absolute;bottom:8px;right:8px}.stage-switch span,.stage-switch a{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);padding:5px 12px;font-size:11px;text-decoration:none}.stage-switch a{cursor:pointer}.stage-switch a:hover{color:var(--text)}.stage-switch a:focus-visible{outline:2px solid var(--text);outline-offset:-2px}.stage-switch .is-active{background:var(--tally);color:#0a0c0e;font-weight:500}@media (width<=1000px){.wall-main{grid-template-columns:minmax(0,1fr) 200px}}@media (width<=720px){.wall-main{grid-template-rows:auto 1fr;grid-template-columns:1fr}.tile--program{aspect-ratio:16/9}.rail{-webkit-overflow-scrolling:touch;flex-direction:row;overflow-x:auto}.rail .tile--cam{aspect-ratio:16/9;flex:0 0 42vw}.cam-portrait{--portrait-scale:.22}.wall-header{height:46px;padding:0 var(--space-3)}.brand h1{font-size:11px}}
