*,:after,:before{box-sizing:border-box}:root{--bg-deep:#0d0f12;--bg-panel:#161a20;--border:#2a3140;--text:#e8ecf2;--muted:#8b95a8;--accent:#3dbfff;--accent-dim:#256894;--live-green:#3dcc7a;--rec-red:#e54545;--osd-bg:rgba(0,0,0,0.55);--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--hit-min:44px}html{-webkit-text-size-adjust:100%}body,html{height:100%;margin:0;font-family:Roboto,system-ui,-apple-system,sans-serif;background:var(--bg-deep);color:var(--text);-webkit-font-smoothing:antialiased}body{padding-left:var(--safe-left);padding-right:var(--safe-right)}.app{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:var(--safe-bottom)}.top-bar{justify-content:space-between;padding:max(10px,var(--safe-top)) max(16px,var(--safe-right)) 10px max(16px,var(--safe-left));background:linear-gradient(180deg,#1a1f28,#141820);border-bottom:1px solid var(--border);flex-shrink:0}.top-bar,.top-bar__left{display:flex;align-items:center;gap:12px}.top-bar__left{min-width:0}.logo-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,var(--accent) 0,var(--accent-dim) 100%);box-shadow:0 0 0 2px rgba(61,191,255,.25);flex-shrink:0}.titles{min-width:0}.cam-name{margin:0;font-size:1rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-line{margin:2px 0 0;font-size:.7rem;color:var(--muted);letter-spacing:.04em}.top-bar__center{display:flex;align-items:center;gap:10px;flex-shrink:0}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-size:.65rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--border);background:rgba(255,255,255,.04)}.pill--live{color:var(--live-green);border-color:rgba(61,204,122,.35)}.pill--rec{color:var(--rec-red);border-color:rgba(229,69,69,.4)}.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--live-green);box-shadow:0 0 8px var(--live-green);animation:pulse 1.6s ease-in-out infinite}.pill__dot--rec{background:var(--rec-red);box-shadow:0 0 8px var(--rec-red);animation:pulse-rec 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes pulse-rec{0%,to{opacity:1}50%{opacity:.35}}.top-bar__right{flex-shrink:0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hit-min);min-height:var(--hit-min);padding:0;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-size:1.1rem;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.icon-btn:hover{border-color:var(--accent-dim);color:var(--accent)}.icon-btn:active{transform:scale(.96)}.stage{flex:1 1;display:flex;align-items:center;justify-content:center;padding:12px max(12px,var(--safe-right)) 12px max(12px,var(--safe-left));background:radial-gradient(ellipse at center,#151922 0,var(--bg-deep) 70%)}.feed-frame{position:relative;width:min(1100px,100%);aspect-ratio:16/9;max-height:min(70dvh,100%);background:#000;border-radius:4px;border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden}.feed-video{display:block;width:100%;height:100%;object-fit:contain;vertical-align:middle;background:#000}.feed-video::-webkit-media-controls-panel{background:linear-gradient(transparent,rgba(0,0,0,.85))}.feed-corner{position:absolute;width:28px;height:28px;border-color:rgba(61,191,255,.35);border-style:solid;pointer-events:none;z-index:2}.feed-corner--tl{top:10px;left:10px;border-width:2px 0 0 2px}.feed-corner--tr{top:10px;right:10px;border-width:2px 2px 0 0}.feed-corner--bl{bottom:10px;left:10px;border-width:0 0 2px 2px}.feed-corner--br{bottom:10px;right:10px;border-width:0 2px 2px 0}.osd{padding:6px 10px;font-size:.75rem;font-family:ui-monospace,Cascadia Code,monospace;background:var(--osd-bg);border-radius:2px}.osd,.part-badge{position:absolute;color:#fff;z-index:3;pointer-events:none}.part-badge{top:14px;right:44px;padding:6px 12px;font-size:.72rem;font-weight:700;letter-spacing:.14em;background:rgba(61,191,255,.22);border:1px solid rgba(61,191,255,.55);border-radius:3px;text-shadow:0 1px 2px rgba(0,0,0,.6)}.osd--tl{top:14px;left:44px}.osd--br{bottom:80px;right:14px;font-size:.7rem;color:rgba(255,255,255,.9)}.bottom-bar{padding:12px max(16px,var(--safe-right)) max(18px,var(--safe-bottom)) max(16px,var(--safe-left));border-top:1px solid var(--border);background:var(--bg-panel);flex-shrink:0}.part-row{display:flex;gap:10px;margin-bottom:12px;justify-content:center;flex-wrap:wrap}.part-btn{font-family:inherit;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;min-height:var(--hit-min);min-width:104px;padding:10px 22px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.part-btn:hover{color:var(--text);border-color:var(--accent-dim)}.part-btn:active{transform:scale(.98)}.part-btn--active{color:var(--accent);border-color:rgba(61,191,255,.45);background:rgba(61,191,255,.08)}.part-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.timeline-rail{position:relative;margin-bottom:10px}.timeline-rail--interactive{cursor:pointer;touch-action:none;min-height:var(--hit-min);display:flex;align-items:center;-webkit-tap-highlight-color:transparent}.timeline-rail--interactive:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.timeline-rail-inner{position:relative;width:100%;height:12px;border-radius:6px;background:#252b36;overflow:visible}.timeline-fill{top:0;bottom:0;width:0;border-radius:6px;background:linear-gradient(90deg,var(--accent-dim),var(--accent));opacity:.92}.timeline-fill,.timeline-knob{position:absolute;left:0;pointer-events:none}.timeline-knob{top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.45);border:2px solid var(--accent)}.time-row{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:12px;font-family:ui-monospace,Cascadia Code,monospace;font-size:.78rem;color:var(--text)}.time-sep{color:var(--muted)}.scrub-hint{width:100%;font-family:Roboto,system-ui,sans-serif;font-size:.68rem;letter-spacing:.02em}.hint,.scrub-hint{text-align:center;color:var(--muted)}.hint{margin:0;font-size:.7rem;letter-spacing:.03em}.footer-legal{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);text-align:center;max-width:36rem;margin-left:auto;margin-right:auto}.footer-legal__label{margin:0 0 8px;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.footer-legal__label,.footer-legal__text{font-family:Roboto,system-ui,sans-serif;color:var(--muted)}.footer-legal__text{margin:0;font-size:.58rem;line-height:1.55;letter-spacing:.02em;opacity:.92}@media (max-width:640px){.top-bar__center{display:none}.part-badge{right:36px;top:12px;padding:5px 10px;font-size:.62rem;letter-spacing:.1em}.osd--br{bottom:76px}.osd--br,.scrub-hint{font-size:.62rem}.feed-frame{max-height:none}.footer-legal__label{font-size:.58rem}.footer-legal__text{font-size:.54rem;line-height:1.5;padding:0 4px}}