:root{color-scheme:dark;font-family:'Helvetica Neue',Arial,sans-serif;color:#edf0ef;background:#111c29}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:23px 4vw;border-bottom:1px solid #304156}.brand{font-size:13px;font-weight:700;letter-spacing:.2em}.brand span{font-size:10px;color:#a9b6c2;font-weight:400;letter-spacing:.12em}.song-label{display:flex;gap:12px;align-items:center;font-size:12px;color:#a9b6c2}select,button{font:inherit;color:inherit}select{border:1px solid #40536a;background:#1c2b3c;padding:9px 28px 9px 12px;border-radius:5px}main{max-width:1500px;margin:auto;padding:28px 4vw 20px}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.eyebrow{font:10px monospace;letter-spacing:.15em;color:#a9b6c2;margin:0 0 9px}h1{font:42px Georgia,serif;margin:0;line-height:1.1}.heading>p{font-size:12px;color:#a9b6c2}.viewport{position:relative;aspect-ratio:16/9;background:#09121c;border:1px solid #344357;border-radius:7px;overflow:hidden}.viewport:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}canvas{width:100%;height:100%;display:block}.camera-bug,.time-bug{position:absolute;top:20px;font:10px monospace;letter-spacing:.1em;background:#111b29b0;padding:8px 10px;border:1px solid #a9b6c244}.camera-bug{left:20px;display:flex;gap:8px;align-items:center}.camera-bug i{width:6px;height:6px;border-radius:50%;background:#ee665c}.time-bug{right:20px}.caption{position:absolute;bottom:16px;left:20px;font:10px monospace;color:#c7d0da;background:#111b29a0;padding:6px}#fullscreen{position:absolute;right:14px;bottom:12px;font-size:23px;padding:2px 10px;background:#111b29a0}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#111c29d0;font-size:15px}button{background:#223348;border:1px solid #40536a;border-radius:5px;padding:11px 16px;cursor:pointer;transition:background .15s}button:hover{background:#34495f}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ffd59a;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.primary{background:#e9ede9;color:#142131;border-color:#e9ede9;min-width:126px;font-weight:600}.primary:hover{background:#fff}.transport{display:flex;gap:16px;align-items:center;padding:20px 0;font:12px monospace}.transport input[type=range]{flex:1;min-width:30px;accent-color:#ffd59a}.loop{display:flex;gap:6px;align-items:center}.cameras{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.cameras button{text-align:left;padding:14px 12px;background:#192839}.cameras b{font:10px monospace;letter-spacing:.08em;color:#a9b6c2;display:block;margin-bottom:9px}.cameras span{font-size:12px}.cameras button[aria-pressed=true]{border-color:#ffd59a;background:#2e3b47}.cameras button[aria-pressed=true] b{color:#ffd59a}.session-tools{display:flex;gap:20px;align-items:center;padding:24px 0;font-size:12px;color:#a9b6c2}.session-tools label{display:flex;align-items:center;gap:10px}.session-tools>span{margin-right:auto;font:11px monospace}.session-tools button{font-size:12px;color:#edf0ef}details{border-top:1px solid #304156;padding:18px 0;font-size:12px;color:#a9b6c2;line-height:1.7}summary{cursor:pointer;color:#d2dbe3}details p{max-width:850px}#status{font-size:12px;color:#ffd59a} @media(max-width:700px){header{padding:16px}.brand span{display:none}main{padding:20px 12px}h1{font-size:32px}.heading{margin-bottom:15px}.heading>p{max-width:135px;text-align:right;font-size:10px}.cameras{grid-template-columns:repeat(3,1fr)}.transport{gap:8px}.primary{min-width:102px;padding:10px}.session-tools{flex-wrap:wrap;gap:12px}.session-tools>span{order:3;width:100%}.session-tools button{margin-left:auto}.camera-bug,.time-bug{top:10px;font-size:8px;padding:5px}.camera-bug{left:10px}.time-bug{right:10px}.caption{font-size:8px;left:8px;bottom:7px}.loop{font-size:10px}}

body.player-scroll-locked{position:fixed;overflow:hidden;width:100%;overscroll-behavior:none}
.viewport.mobile-fullscreen{position:fixed;inset:0;z-index:10000;width:100%;height:100vh;height:var(--player-height,100dvh);max-width:none;aspect-ratio:auto;border:0;border-radius:0}
.viewport:fullscreen{border:0;border-radius:0;height:100dvh}
.viewport:-webkit-full-screen{width:100%;height:100%;border:0;border-radius:0;aspect-ratio:auto}
#fullscreen{min-width:44px;min-height:44px;touch-action:manipulation;z-index:5}
.player-expanded #fullscreen{right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));background:#111b29e8}
.player-expanded .camera-bug{left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top))}
.player-expanded .time-bug{right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.player-expanded .caption{bottom:max(12px,env(safe-area-inset-bottom))}

/* Fit the camera frame within the screen; never crop it for phone orientation. */
.viewport{display:grid;place-items:center;background:#04080d}
.viewport.player-expanded{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.viewport canvas{max-width:100%;max-height:100%;min-width:0;min-height:0}
@media(orientation:portrait){.player-expanded .camera-bug{max-width:calc(100% - 105px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:8px}.player-expanded .caption{max-width:calc(100% - 80px);font-size:8px}}