:root{color:#f4f7fb;background:#101418;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}.app-shell{background:linear-gradient(135deg,#2c5d634d,#0000 38%),#101418;min-height:100vh;padding:24px}.viewer-shell{background:#101418;min-height:100vh;padding:18px}.centered{place-items:center;display:grid}.placeholder-panel,.workspace,.viewer-layout{width:min(560px,100%)}.placeholder-panel,.control-panel{background:#101418d6;border:1px solid #f4f7fb29;border-radius:8px;padding:28px}.workspace{gap:20px;margin:0 auto;display:grid}.viewer-layout{gap:14px;width:min(1180px,100%);margin:0 auto;display:grid}.page-heading{padding-top:8vh}.eyebrow{color:#78d6c6;letter-spacing:0;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:700}h1{margin:0 0 12px;font-size:clamp(2rem,6vw,4rem);line-height:1}p{color:#c8d2dc;margin:0;line-height:1.6}.control-panel{gap:18px;display:grid}.viewer-topbar{justify-content:space-between;align-items:end;gap:16px;display:flex}.viewer-topbar h1{font-size:clamp(1.8rem,4vw,3rem)}.status-pill{color:#d5dde5;text-align:center;background:#ffffff0f;border:1px solid #f4f7fb29;border-radius:999px;max-width:280px;padding:8px 12px;font-size:.9rem;font-weight:800}.status-pill[data-state=watching]{color:#071311;background:#78d6c6}.viewer-stage{aspect-ratio:16/9;background:#050708;border:1px solid #f4f7fb24;border-radius:8px;min-height:260px;position:relative;overflow:hidden}.viewer-stage video{object-fit:contain;background:#050708;width:100%;height:100%;display:block}.waiting-overlay{color:#c8d2dc;text-align:center;background:linear-gradient(135deg,#78d6c614,#0000 42%),#050708e6;place-items:center;padding:24px;font-size:clamp(1rem,3vw,1.5rem);font-weight:800;display:grid;position:absolute;inset:0}.viewer-controls{background:#101418d6;border:1px solid #f4f7fb29;border-radius:8px;grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:14px;padding:16px;display:grid}.viewer-controls .status-row,.viewer-controls .error-message,.viewer-controls .actions{grid-column:1/-1}.field{color:#e8eef5;gap:8px;font-size:.92rem;font-weight:700;display:grid}.field input{color:#f4f7fb;width:100%;min-height:44px;font:inherit;background:#ffffff0f;border:1px solid #f4f7fb2e;border-radius:6px;padding:10px 12px}.field input:disabled{color:#9aa7b3;cursor:not-allowed}.status-row,.link-row{color:#9fb0bd;grid-template-columns:112px minmax(0,1fr);align-items:baseline;gap:12px;font-size:.92rem;display:grid}.status-row strong{color:#f4f7fb}.status-row strong[data-state=sharing]{color:#78d6c6}.link-row a{color:#91c9ff;overflow-wrap:anywhere;min-width:0}.preset-group{gap:14px;display:grid}.preset-section{gap:8px;display:grid}.preset-section>p{color:#78d6c6;text-transform:uppercase;font-size:.78rem;font-weight:800}.preset-option{color:#dce5ec;cursor:pointer;background:#ffffff0a;border:1px solid #f4f7fb24;border-radius:6px;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:10px;display:grid}.preset-option:has(input:checked){background:#78d6c61a;border-color:#78d6c6c2}.preset-option input{accent-color:#78d6c6;margin-top:4px}.preset-option input:disabled{cursor:not-allowed}.preset-option strong,.preset-option small{display:block}.preset-option small{color:#9fb0bd;margin-top:3px;font-size:.82rem;line-height:1.35}.error-message{color:#ffc2c2;background:#ff75751a;border:1px solid #ff757557;border-radius:6px;padding:10px 12px}.success-message{color:#bcfff3;background:#78d6c61a;border:1px solid #78d6c652;border-radius:6px;padding:10px 12px}.actions{flex-wrap:wrap;gap:12px;display:flex}button{min-height:44px;font:inherit;cursor:pointer;border:0;border-radius:6px;padding:0 16px;font-weight:800}button:disabled{cursor:not-allowed;opacity:.52}.primary-button{color:#071311;background:#78d6c6}.secondary-button{color:#f4f7fb;background:#f4f7fb1f}@media (width<=520px){.app-shell{padding:16px}.viewer-shell{padding:12px}.placeholder-panel,.control-panel{padding:20px}.viewer-topbar{flex-direction:column;align-items:start}.status-pill{width:100%;max-width:none}.viewer-stage{min-height:220px}.viewer-controls{grid-template-columns:1fr;padding:14px}.status-row,.link-row{grid-template-columns:1fr;gap:4px}}
