/* C / Director: an Overhub production monitor, with scroll-driven physical presence. */
:root{--ice:#a9ced5;--steel:#72929f}
:root[data-theme=light]{--ice:#3b7483;--steel:#608691}
body{background:radial-gradient(ellipse 950px 850px at calc(50% + 450px) 1050px,#6b473832,transparent 100%),radial-gradient(ellipse 1100px 950px at calc(50% - 450px) 1100px,#31576b55,transparent 100%),var(--bg-base)}
[data-theme=light] body{background:radial-gradient(ellipse 1000px 900px at calc(50% + 400px) 1050px,#c99c7438,transparent 100%),radial-gradient(ellipse 1200px 1000px at calc(50% - 450px) 1100px,#8fbcc84d,transparent 100%),var(--bg-base)}
.director-scroll{position:relative;margin-top:35px;--director-top:90px;--director-scale:1;--director-x:0deg;--director-y:0deg;--director-z:0deg;--director-lift:0px;--handoff:1;--handoff-lift:0px}
.director-sticky{position:relative;perspective:1800px;perspective-origin:50% 43%}
.monitor-assembly.studio-monitor{position:relative;isolation:auto;perspective:1800px;scale:1;transform:translateY(var(--director-lift)) rotateY(var(--director-y)) rotateZ(var(--director-z)) scale(var(--director-scale));transform-origin:50% 46%;width:100%;max-width:1230px;padding:0 28px;margin:0 auto;will-change:transform;opacity:var(--director-alpha,1)}
.monitor-assembly.studio-monitor:before,.monitor-assembly.studio-monitor:after,.studio-monitor .signal-path,.studio-monitor .monitor-mount{display:none!important}
.monitor-assembly.studio-monitor .hero-program{position:relative;padding:0 15px;border:1px solid #56636b;border-radius:9px;background:linear-gradient(110deg,#242c32,#141c22 48%,#202930);box-shadow:inset 0 2px 1px #c7d2db29,inset 0 -2px #05090c,0 0 0 3px #080f15,0 0 0 4px #4a5962,0 24px 42px -22px #000c;transform:none;overflow:visible}

.monitor-assembly.studio-monitor .monitor-bar{display:flex;justify-content:space-between;height:37px;padding:0 9px;background:none;border:0;font-family:var(--font-sans);font-size:14px!important;color:#b9c9d1;letter-spacing:.07em}
.monitor-assembly.studio-monitor .monitor-bar:after{display:none}
.monitor-wordmark{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:18px;letter-spacing:.06em}.monitor-wordmark b{font-family:var(--font-sans);font-size:14px;font-weight:400;color:#8da2af;letter-spacing:.06em;margin-left:8px}
.studio-monitor .monitor-bar>span.monitor-tally{display:flex;align-items:center;gap:9px;font-size:14px;color:#ccd9dd}.monitor-tally .live-dot{width:7px;height:7px;background:#ff6868;box-shadow:0 0 14px #ff545465}
.monitor-assembly.studio-monitor .hero-screen{border:1px solid #52616b;border-radius:var(--r-xs);box-shadow:0 0 0 4px #050a0e,0 0 0 5px #46535c70;aspect-ratio:16/9}
.chassis-screw{position:absolute;top:14px;width:5px;height:5px;border-radius:50%;background:linear-gradient(140deg,#82939d,#14222c);box-shadow:0 0 0 2px #070d12}.screw-tl{left:7px}.screw-tr{right:7px}
.studio-chin{height:69px;padding:0 8px;display:flex;align-items:center;gap:23px;color:#c6d4db}.chassis-mark{font-family:'Saira Condensed',sans-serif;font-size:24px;font-weight:600;letter-spacing:.02em;display:flex;align-items:baseline;gap:14px}.chassis-mark>span{font-family:var(--font-sans);font-size:14px;font-weight:400;letter-spacing:.1em;color:#8296a3}.chassis-keys{display:flex;align-items:center;gap:13px;margin-left:auto}.chassis-keys>i{display:block;width:30px;height:12px;border:1px solid #71838b;border-bottom:3px solid #0c141b;border-radius:var(--r-xs);background:linear-gradient(#36474f,#1c2830);box-shadow:0 2px 2px #0009}.chassis-keys>i:first-child{border-top-color:var(--cta)}.chassis-dial{width:30px;height:30px;border-radius:50%;background:repeating-conic-gradient(#283740 0deg 8deg,#172129 8deg 16deg);border:3px solid #36464e;box-shadow:0 0 0 1px #10171c,3px 3px 5px #0009;position:relative}.chassis-dial:after{content:"";position:absolute;top:2px;left:10px;height:6px;width:2px;background:#c2d3da}.chassis-power{width:9px;height:9px;background:#adcabe;border-radius:50%;box-shadow:0 0 0 8px #1d2b33,0 0 0 9px #4d606a;margin:0 7px 0 4px}

.director-support{height:70px;position:relative;width:64%;margin:auto;z-index:-1}.director-support:before,.director-support:after{content:"";position:absolute;bottom:15px;width:18px;height:118px;background:linear-gradient(90deg,#141e26,#536975 40%,#293841 70%,#101a23);border:1px solid #5b6c76;transform-origin:bottom}.director-support:before{left:14%;transform:skewX(-19deg)}.director-support:after{right:14%;transform:skewX(19deg)}.director-support>i{display:block;position:absolute;left:8%;right:8%;bottom:8px;height:14px;background:linear-gradient(#3d505c,#1a2932);border:1px solid #647681;border-radius:4px 4px 2px 2px;box-shadow:0 5px 1px #080f14}.director-support>b{position:absolute;bottom:-8px;left:-4%;right:-4%;height:24px;border-radius:50%;background:#0007;filter:blur(13px)}
.studio-monitor .cue-deck{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:7px 6% 0;padding:0;gap:12px;border:0;box-shadow:none;border-radius:0;overflow:visible;background:none;transform:none;opacity:1}
.studio-monitor .cue-deck button{border:1px solid #52707e;border-bottom:3px solid #10212d;border-radius:var(--r-xs);background:linear-gradient(140deg,#253d49,#142730);color:#dbe5e7;padding:15px 20px;box-shadow:inset 0 1px #abc4ce1c}.studio-monitor .cue-deck button>strong{font-size:25px}.studio-monitor .cue-deck button>i{right:14px;bottom:13px;color:#a0c2ce}.studio-monitor .cue-deck button:hover{border-color:#a3c4ce;background:#314c59}.studio-monitor .cue-deck .cue-take-inline{background:linear-gradient(130deg,#ffd0a0,#f1b278);border-color:#d9a371;border-bottom-color:#925b32;color:#2f2117}.studio-monitor .cue-deck .cue-take-inline>i{color:inherit}[data-theme=light] .studio-monitor .cue-deck .cue-take-inline{color:#2f2117}
.director-handoff{text-align:center;margin:65px auto 0;max-width:1000px;opacity:var(--handoff);transform:translateY(var(--handoff-lift))}
.director-handoff .scroll-statement{font-size:clamp(31px,3.8vw,57px);padding:0;margin:auto;line-height:1.16}.director-next{display:grid;place-items:center;width:48px;height:48px;margin:22px auto 0;border:1px solid var(--line);border-radius:50%;color:var(--cta-text);font-size:28px}.director-next:hover{background:var(--surface);border-color:var(--cta-text)}
.director-scroll+.compatibility{margin-top:46px}
@media(min-width:761px) and (min-height:680px){
 :is([data-motion=on],[data-director=on]) .director-scroll{height:calc(100svh - var(--director-top) + 1300px);margin-top:22px;--handoff:0}
 :is([data-motion=on],[data-director=on]) .director-sticky{position:sticky;top:var(--director-top);height:calc(100svh - var(--director-top) - 16px);display:flex;align-items:center;justify-content:center}
 :is([data-motion=on],[data-director=on]) .monitor-assembly.studio-monitor{max-width:min(1190px,calc((100svh - 330px)*1.77778));flex-shrink:0}
 :is([data-motion=on],[data-director=on]) .director-handoff{display:none}
 :is([data-motion=on],[data-director=on]) .director-handoff .director-next{pointer-events:auto}
}
@media(max-width:1050px){.chassis-keys{gap:9px}.chassis-keys>i{width:20px}.chassis-mark{font-size:23px;gap:10px}.studio-chin{gap:18px}.studio-monitor .cue-deck button{padding:13px 10px}.studio-monitor .cue-deck button>strong{font-size:23px}}
@media(max-width:760px){.monitor-assembly.studio-monitor{transform:none;max-width:100%;padding-inline:18px;will-change:auto}.director-handoff{margin-top:45px}.director-support{height:50px}.studio-monitor .cue-deck{margin-inline:2%}.director-scroll{margin-top:32px}}
@media(max-width:760px){body{background:radial-gradient(ellipse 450px 600px at 80% 750px,#6b473832,transparent 100%),radial-gradient(ellipse 500px 700px at 10% 850px,#31576b45,transparent 100%),var(--bg-base)}[data-theme=light] body{background:radial-gradient(ellipse 450px 600px at 80% 750px,#c99c7438,transparent 100%),radial-gradient(ellipse 500px 700px at 10% 850px,#8fbcc83b,transparent 100%),var(--bg-base)}
 .monitor-assembly.studio-monitor{padding-inline:7px}.monitor-assembly.studio-monitor .hero-program{padding:0 7px;border-radius:6px;box-shadow:inset 0 1px #c7d2db29,0 0 0 2px #080f15,0 0 0 3px #4a5962,0 16px 30px -15px #0008}.monitor-assembly.studio-monitor .monitor-bar{height:32px;padding:0 3px}.monitor-wordmark{font-size:16px}.monitor-wordmark b{display:none}.studio-monitor .monitor-bar>span.monitor-tally{font-size:13px}.chassis-screw{display:none}.monitor-assembly.studio-monitor .hero-screen{box-shadow:0 0 0 2px #050a0e}.studio-chin{height:43px;gap:13px;padding:0 3px}.chassis-mark{font-size:20px}.chassis-mark>span{display:none}.chassis-keys{gap:7px}.chassis-keys>i{width:14px;height:8px;border-bottom-width:2px}.chassis-keys>i:nth-child(n+4){display:none}.chassis-dial{width:22px;height:22px;border-width:2px}.chassis-dial:after{left:8px;height:5px}.chassis-power{width:6px;height:6px;box-shadow:0 0 0 5px #1d2b33,0 0 0 6px #4d606a;margin-right:4px}.director-support{height:43px;width:70%}.director-support:before,.director-support:after{width:12px;height:72px}.director-support>i{height:9px;bottom:9px}.studio-monitor .cue-deck{margin:4px 0 0;gap:6px}.studio-monitor .cue-deck button{padding:12px 6px}.studio-monitor .cue-deck button>strong{font-size:20px}.monitor-assembly.studio-monitor .mobile-play{background:transparent;color:#cad9df;min-height:43px!important;margin-top:5px;border:0;font-size:14px!important}.director-handoff .scroll-statement{font-size:30px}.director-scroll+.compatibility{margin-top:35px}}
[data-motion=off]:not([data-director=on]) .monitor-assembly.studio-monitor{transform:none;will-change:auto}

/* A real front, rear and thickness; only the monitor head turns on its horizontal axis. */
.director-flip{position:relative;transform-style:preserve-3d;transform:rotateX(var(--director-x));transform-origin:50% 50%;will-change:transform}
.monitor-assembly.studio-monitor .director-flip .hero-program{transform:translateZ(18px);backface-visibility:hidden}
.director-rear{position:absolute;inset:0;container-type:size;border:2px solid #52626d;border-radius:9px;backface-visibility:hidden;transform:rotateX(180deg) translateZ(18px);background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(135deg,#2b3b44,#101a22 45%,#20313c);box-shadow:inset 0 0 0 7px #0a131b,inset 0 0 0 8px #5a6b76,inset 0 0 0 10px #13212b,inset 0 18px 35px #0005;overflow:hidden}
.rear-grille{position:absolute;inset:8% 9% 70%;display:flex;justify-content:space-evenly;border-radius:var(--r-xs);background:repeating-linear-gradient(0deg,#060d13 0 4px,#354957 4px 5px,#15232b 5px 10px);border:1px solid #415561;box-shadow:inset 0 3px 7px #000b,0 1px #8aa2ae22}
.rear-grille span{width:5px;height:100%;background:linear-gradient(90deg,#0c1720,#4a5e6a 55%,#14222a);box-shadow:3px 0 7px #0008}
.rear-mount{position:absolute;inset:36% 20% 30%;display:grid;place-items:center;border-radius:6px;border:1px solid #4a626f;background:linear-gradient(120deg,#243844,#15232d 55%,#1d303b);box-shadow:inset 0 1px #8ba5b533,0 3px 0 #09131b,0 7px 13px #0005}
.rear-mark{display:flex;align-items:center;justify-content:center;gap:2.4cqw;color:#dce5e6;text-shadow:0 2px #03080d;font-family:'Saira Condensed',sans-serif;line-height:1}
.rear-mark img{width:7.8cqw;height:7.8cqw;opacity:1;filter:drop-shadow(0 3px 5px #0007)}
.rear-mark strong{display:block;font-size:6.8cqw;font-weight:700;letter-spacing:.055em}
.rear-mount>i,.rear-rim-screws i{position:absolute;width:1.15cqw;height:1.15cqw;border-radius:50%;background:linear-gradient(135deg,#a4b7c1,#3c515e 65%);border:2px solid #0a131a;box-shadow:0 0 0 1px #526774,1px 2px 3px #0009}
.rear-mount>i:after,.rear-rim-screws i:after{content:"";position:absolute;inset:24%;background:linear-gradient(transparent 40%,#111d26 40% 60%,transparent 60%),linear-gradient(90deg,transparent 40%,#111d26 40% 60%,transparent 60%);transform:rotate(22deg)}
.rear-mount>i:nth-child(1){top:8%;left:4%}.rear-mount>i:nth-child(2){top:8%;right:4%}.rear-mount>i:nth-child(3){bottom:8%;left:4%}.rear-mount>i:nth-child(4){bottom:8%;right:4%}
.rear-rim-screws i:nth-child(1){top:4%;left:3%}.rear-rim-screws i:nth-child(2){top:4%;right:3%}.rear-rim-screws i:nth-child(3){bottom:4%;left:3%}.rear-rim-screws i:nth-child(4){bottom:4%;right:3%}
.rear-ports{position:absolute;bottom:8%;left:15%;right:15%;height:16%;display:grid;place-items:center;padding:0 1%;border:1px solid #4b6473;background:linear-gradient(#070f16,#11202a);box-shadow:inset 0 5px 10px #000b,0 1px #9cb2bc22;border-radius:var(--r-xs)}
.rear-ports svg{display:block;width:100%;height:100%;overflow:visible}
.director-edge{position:absolute;left:0;right:0;height:36px;background:repeating-linear-gradient(90deg,#1e2e39 0 7px,#0a141c 7px 10px);border:1px solid #71828d;transform:translateY(-50%) rotateX(90deg);backface-visibility:visible}.edge-top{top:0}.edge-bottom{top:100%}
/* Four physical faces share the front/rear depth; no offset decorative side panel. */
.monitor-assembly.studio-monitor .hero-program:before{content:none;display:none}
.director-edge.edge-left,.director-edge.edge-right{top:0;bottom:0;right:auto;width:36px;height:auto;transform:translateX(-50%) rotateY(90deg);background:repeating-linear-gradient(0deg,#1e2e39 0 7px,#0a141c 7px 10px)}
.director-edge.edge-left{left:0}.director-edge.edge-right{left:100%}
.studio-monitor .director-support,.studio-monitor .cue-deck{opacity:var(--hardware-alpha,1)}
#workflow>.compatibility{margin-top:56px}
@media(min-width:761px) and (min-height:680px){
 :is([data-motion=on],[data-director=on]) #workflow{position:relative;z-index:2;margin-top:-85svh;opacity:var(--workflow-arrival,0);transform:translateY(var(--workflow-rise,60px))}
}
@media(max-width:760px),(max-height:679px){.director-flip{transform:none;will-change:auto}.director-rear,.director-edge{display:none}.monitor-assembly.studio-monitor .director-flip .hero-program{transform:none}}
[data-motion=off]:not([data-director=on]) .director-flip{transform:none;will-change:auto}
[data-motion=off]:not([data-director=on]) :is(.director-rear,.director-edge){display:none}
[data-motion=off]:not([data-director=on]) .monitor-assembly.studio-monitor .director-flip .hero-program{transform:none}
.director-prep-preview{position:absolute;inset:0;display:grid;grid-template-columns:40% 60%;align-items:center;padding:5%;background:radial-gradient(ellipse at 85% 40%,#27404e,#111c25 72%);visibility:hidden;pointer-events:none}
.director-prep-copy{position:relative;z-index:1;color:#eeeee6}.director-prep-copy>span{display:block;font:500 14px var(--font-sans);letter-spacing:.07em;color:var(--cta);margin-bottom:23px}.director-prep-copy>strong{display:block;font:600 clamp(34px,4.4vw,66px)/.98 'Saira Condensed',sans-serif;letter-spacing:-.025em}
.director-prep-visual{position:relative;height:100%;min-width:0;--muted2:rgba(176,192,218,.82);--text:#f4f8ff;--cta-text:#ffb070;--cta:#ffb070}.director-prep-visual .w5-stage{position:absolute;left:0;top:0;width:760px;height:560px;transform:scale(var(--prep-scale,.7));transform-origin:top left}.director-prep-preview .w5-panel{display:block}
.director-scroll[data-next-scene=true] .director-prep-preview{visibility:visible}
.director-scroll[data-next-scene=true] #hero-root,.director-scroll[data-next-scene=true] .hero-poster,.director-scroll[data-next-scene=true] .hero-mobile-scene{visibility:hidden}