:root { color-scheme: dark; --bg:#05070b; --panel:#10141d; --panel-2:#171c27; --line:#293142; --text:#f7f8fb; --muted:#9aa5b6; --green:#54e6a6; --green-deep:#16a46d; --amber:#ffb557; --blue:#879bff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; overflow-x:hidden; background:radial-gradient(80% 55% at 50% -10%, #1a2437 0%, var(--bg) 60%); color:var(--text); }
button, select, input { font:inherit; } button { color:inherit; cursor:pointer; } button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.app-shell { width:min(1440px, 100%); max-width:100%; min-width:0; min-height:100svh; margin:auto; padding:clamp(14px, 2vw, 28px); display:grid; grid-template-rows:minmax(0,1fr); }
.stage { position:relative; align-self:center; min-width:0; min-height:300px; aspect-ratio:16/9; overflow:hidden; background:#020304; border:1px solid #222b3b; border-radius:24px; box-shadow:0 24px 80px #0009; isolation:isolate; }
#output { display:block; width:100%; max-width:100%; height:100%; object-fit:contain; } #camera, #demo-video { display:none; }
.stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, #0008 0%, transparent 26%, transparent 70%, #0009 100%); z-index:1; }
.stage-top, .stage-meta, .camera-prompt, .pause-label, .exit-tv, .settings-fab { position:absolute; z-index:2; }
.stage-top { top:clamp(14px,2vw,25px); left:clamp(14px,2vw,25px); right:clamp(14px,2vw,25px); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.14em; font-weight:750; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#06130d; background:var(--green); border-radius:9px; font-size:10px; letter-spacing:-.08em; }
.status-cluster { display:flex; gap:8px; align-items:center; }.status { padding:8px 10px; display:flex; align-items:center; gap:7px; border:1px solid #354050; border-radius:99px; background:#0c111acc; font-size:10px; letter-spacing:.1em; }.status i { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px #ffb55725; }.status.live i { background:var(--green); box-shadow:0 0 0 4px #54e6a625; }.icon-button { width:34px; height:34px; padding:8px; display:grid; place-items:center; border:1px solid #354050; border-radius:10px; background:#0c111acc; }.icon-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }.clip-save { min-height:34px; display:flex; align-items:center; gap:6px; padding:0 10px; border:1px solid #54e6a680; border-radius:10px; background:#0c1713e8; color:var(--green); font-size:11px; font-weight:800; white-space:nowrap; }.clip-save span { color:#ff6c7c; font-size:14px; }.clip-save:disabled { border-color:#354050; background:#0c111acc; color:#738096; cursor:not-allowed; }.clip-save:disabled span { color:#738096; }.clip-save.is-exporting { color:#ffbd73; border-color:#ffbd7380; }
.stage-meta { left:clamp(14px,2vw,25px); bottom:clamp(14px,2vw,25px); display:flex; align-items:end; gap:12px; }.delay-card, .buffer-card { padding:10px 12px; background:#0a1019c9; border:1px solid #2b3545; border-radius:12px; backdrop-filter:blur(10px); }.delay-card span, .buffer-card span { display:block; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.13em; }.delay-card strong { display:block; margin-top:2px; font-size:24px; line-height:1; letter-spacing:-.06em; }.delay-card strong span { display:inline; margin-left:3px; font-size:10px; letter-spacing:0; }.buffer-card { width:130px; }.buffer-card span { display:flex; justify-content:space-between; }.buffer-card b { color:var(--text); letter-spacing:0; }.progress { margin-top:7px; height:4px; overflow:hidden; background:#242d3b; border-radius:5px; }.progress i { display:block; width:0%; height:100%; background:var(--green); border-radius:inherit; transition:width .2s; }
.camera-prompt { top:50%; right:auto; bottom:auto; left:50%; width:min(320px, 85%); min-height:0; height:auto; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; border-radius:16px; transform:translate(-50%, -50%); text-align:center; background:#08101bc7; backdrop-filter:blur(8px); }.camera-prompt p { margin:0; font-size:15px; font-weight:650; text-shadow:0 2px 10px #000; }.camera-prompt small { color:#d6dee9; font-size:11px; }.camera-prompt[data-state="demo"] { background:transparent; backdrop-filter:none; }.camera-prompt[data-state="error"] { border:1px solid #ffb55766; background:#1e160be0; }.notice-spinner { display:none; width:28px; height:28px; border:3px solid #d6ffeb33; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }.camera-prompt[data-state="connecting"] .notice-spinner, .camera-prompt[data-state="buffering"] .notice-spinner { display:block; }.camera-prompt[data-state="connecting"] .primary, .camera-prompt[data-state="buffering"] .primary { display:none; }.primary { display:inline-flex; align-items:center; justify-content:center; flex:0 0 46px; width:auto; height:46px; min-height:46px; border:0; padding:0 20px; border-radius:13px; background:var(--green); color:#062016; font-weight:800; box-shadow:0 10px 30px #28ce8b55; }.play-symbol { margin-right:7px; font-size:11px; }.pause-label { top:50%; left:50%; translate:-50% -50%; padding:8px 13px; border:1px solid #ffb55780; border-radius:99px; background:#281b0be8; color:var(--amber); font-size:11px; font-weight:800; letter-spacing:.14em; }.exit-tv { top:20px; right:20px; padding:10px 13px; border:1px solid #405066; border-radius:10px; background:#101722e8; font-weight:700; }
.camera-prompt[hidden], .pause-label[hidden], .exit-tv[hidden] { display:none; }
.settings-fab { right:clamp(14px,2vw,25px); bottom:clamp(14px,2vw,25px); min-height:44px; padding:0 15px; border:1px solid #52e5a67a; border-radius:13px; background:#0c1713e8; color:var(--green); font-size:12px; font-weight:800; box-shadow:0 8px 24px #0007; backdrop-filter:blur(10px); }.settings-fab span { margin-right:5px; font-size:15px; }.settings-fab[aria-expanded="true"] { opacity:0; pointer-events:none; }
.control-panel { position:absolute; z-index:4; right:clamp(14px,2vw,25px); bottom:clamp(14px,2vw,25px); width:min(880px, calc(100% - 40px)); max-height:calc(100% - 32px); min-width:0; overflow:auto; padding:clamp(17px, 2vw, 25px); border:1px solid #3a475e; border-radius:20px; background:linear-gradient(135deg, #131925f7, #0d121bf7); box-shadow:0 24px 80px #000c; backdrop-filter:blur(18px); opacity:0; pointer-events:none; transform:translateY(calc(100% + 32px)); transition:transform .28s ease, opacity .18s ease; }.control-panel.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }.control-title-row { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:22px; }.panel-actions { display:flex; gap:14px; align-items:center; }.eyebrow { color:var(--green); font-size:10px; font-weight:800; letter-spacing:.16em; }.control-title-row h1 { margin:4px 0 0; font-size:clamp(17px, 2vw, 23px); letter-spacing:-.04em; }.text-button { border:0; padding:7px 0; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; }.text-button span { color:var(--green); font-size:15px; }.close-panel { color:#d6deea; }.stop-camera { color:#ffbd73; }.stop-camera:disabled { color:#657084; cursor:not-allowed; }
.primary-controls { display:grid; grid-template-columns:126px 50px 50px minmax(150px,1fr) minmax(130px,.8fr) auto; gap:10px; align-items:center; }.play-control { height:50px; display:flex; align-items:center; gap:10px; padding:0 14px; border:0; border-radius:13px; background:var(--green); color:#062016; font-size:13px; }.play-control span { font-size:18px; }.step-button { height:50px; display:grid; place-items:center; gap:0; padding:5px; border:1px solid #354052; border-radius:13px; background:#1a212e; }.step-button:disabled { opacity:.38; cursor:not-allowed; }.step-button span { font-size:27px; line-height:18px; }.step-button small { color:var(--muted); font-size:9px; }.delay-control { padding:3px 14px; }.label-row { display:flex; justify-content:space-between; gap:10px; color:#dbe2ed; font-size:11px; font-weight:700; }.label-row output { color:var(--green); }.delay-control input { width:100%; accent-color:var(--green); }.range-labels { display:flex; justify-content:space-between; color:#738096; font-size:9px; }.speed-control { display:grid; gap:7px; justify-items:end; color:var(--muted); font-size:10px; font-weight:700; }.segmented { display:flex; overflow:hidden; border:1px solid #354052; border-radius:10px; }.segmented button { min-width:54px; padding:8px 7px; border:0; border-right:1px solid #354052; background:#171e2a; color:#aeb7c7; font-size:11px; }.segmented button:last-child { border:0; }.segmented button.active { background:#274536; color:var(--green); }
.options-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; padding-top:19px; margin-top:19px; border-top:1px solid #293244; }.option, .select-option { min-width:0; min-height:69px; display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #30394a; border-radius:13px; background:#151b26; text-align:left; }.option.active { border-color:#3ca979; background:#183328; }.option:disabled { opacity:.48; cursor:not-allowed; }.option-icon { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:#252e3d; color:var(--green); font-size:17px; font-weight:800; }.grid-icon { color:#8ea0ff; }.option span:nth-child(2), .select-option span:nth-child(2) { min-width:0; display:grid; gap:2px; }.option b, .select-option b { font-size:11px; white-space:nowrap; }.option small, .select-option small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.option i { width:8px; height:8px; margin-left:auto; border-radius:50%; background:#475266; }.option.active i { background:var(--green); box-shadow:0 0 0 4px #54e6a620; }.select-option { position:relative; }.select-option select { max-width:118px; margin-left:auto; padding:6px 20px 6px 6px; border:0; border-radius:6px; background:#242d3c; color:#dbe2ed; font-size:10px; text-overflow:ellipsis; }.message { min-height:17px; margin:14px 1px 0; color:#8e9aae; font-size:11px; }
body.tv-mode { background:#000; } body.tv-mode .app-shell { padding:0; display:block; width:100vw; height:100svh; } body.tv-mode .stage { width:100%; height:100%; min-height:0; border:0; border-radius:0; } body.tv-mode .control-panel, body.tv-mode .stage-meta, body.tv-mode .camera-prompt, body.tv-mode .settings-fab { display:none; } body.tv-mode .stage-top { right:auto; } body.tv-mode .stage-top .brand, body.tv-mode .stage-top .status, body.tv-mode #tv-mode { display:none; } body.tv-mode .status-cluster { gap:0; }
html:fullscreen, html:fullscreen body { width:100%; height:100%; background:#000; } html:fullscreen .app-shell { display:block; width:100vw; max-width:none; height:100svh; min-height:0; padding:0; } html:fullscreen .stage { width:100%; height:100%; min-height:0; aspect-ratio:auto; border:0; border-radius:0; }
@media (min-width:900px) { .app-shell { max-height:100svh; } .stage { min-height:0; } }
@media (max-width:980px) { .app-shell { padding:10px; }.stage { min-height:220px; border-radius:17px; }.control-panel { right:10px; bottom:10px; width:calc(100% - 20px); max-height:calc(100% - 20px); }.settings-fab { right:10px; bottom:10px; }.primary-controls { min-width:0; grid-template-columns:minmax(0,1fr) 48px 48px; }.play-control { justify-content:center; }.delay-control { min-width:0; grid-column:1/-1; padding:6px 4px 0; }.delay-control:not(.clip-control) { grid-row:2; }.clip-control { grid-row:3; }.speed-control { grid-column:1/-1; grid-row:4; display:flex; justify-content:space-between; align-items:center; }.options-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.select-option select { max-width:104px; }.control-title-row { margin-bottom:16px; }.stage-meta { gap:7px; }.delay-card { padding:8px 10px; }.buffer-card { width:110px; padding:8px 10px; } }
@media (max-width:390px) { .brand { font-size:9px; }.brand-mark { width:26px; height:26px; }.status { padding:7px 8px; }.status b, .clip-save b { display:none; }.clip-save { width:34px; justify-content:center; padding:0; }.options-grid { gap:7px; }.option, .select-option { padding:8px; gap:7px; }.option-icon { width:24px; height:24px; }.select-option select { max-width:90px; }.control-panel { padding:15px; } }
@media (pointer:coarse) and (max-aspect-ratio:1/1) { body { padding-bottom:0; overflow:hidden; }.app-shell { display:grid; place-items:center; height:100svh; min-height:0; padding:10px; }.stage { display:block; width:100%; min-height:0; height:auto; aspect-ratio:16/9; }.stage[data-capture-orientation="portrait"] { width:auto; max-width:100%; height:100%; aspect-ratio:var(--capture-aspect, .5625); }.stage #output { height:100%; aspect-ratio:auto; }.settings-fab { position:fixed; z-index:10; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); }.control-panel { position:fixed; z-index:9; right:0; bottom:0; width:100%; max-width:none; max-height:75svh; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; transform:translateY(calc(100% + 32px)); overscroll-behavior:contain; }.control-panel::before { content:""; display:block; width:38px; height:4px; margin:0 auto 15px; border-radius:99px; background:#566176; }.control-panel.is-open { transform:translateY(0); }.control-title-row { gap:10px; }.control-title-row h1 { font-size:18px; }.panel-actions { gap:10px; }.primary-controls { grid-template-columns:minmax(0,1fr) 48px 48px; }.delay-control, .speed-control { grid-column:1/-1; }.delay-control:not(.clip-control) { grid-row:2; }.clip-control { grid-row:3; }.speed-control { grid-row:4; }.options-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.message { padding-bottom:4px; } }
@media (pointer:coarse) and (orientation:landscape) and (max-height:650px) { body { overflow:hidden; }.app-shell { height:100svh; min-height:0; padding:10px; display:block; }.stage { width:100%; height:100%; min-height:0; aspect-ratio:auto; }.control-title-row h1 { font-size:17px; }.primary-controls { grid-template-columns:1fr 43px 43px; }.delay-control, .speed-control { grid-column:1/-1; }.delay-control:not(.clip-control) { grid-row:2; }.clip-control { grid-row:3; }.speed-control { grid-row:4; }.options-grid { grid-template-columns:repeat(2,1fr); padding-top:12px; margin-top:12px; }.option, .select-option { min-height:56px; } }
@media (pointer:coarse) and (orientation:landscape) and (max-height:650px) { .control-panel { position:fixed; z-index:12; right:10px; bottom:0; left:10px; width:auto; max-height:calc(100svh - 16px); padding:14px 16px 18px; border-radius:20px 20px 0 0; }.control-title-row { position:sticky; top:0; z-index:1; padding:2px 0 12px; background:linear-gradient(135deg, #131925, #0d121b); }.control-title-row h1 { font-size:15px; }.panel-actions { gap:9px; } }
@keyframes spin { to { transform:rotate(360deg); } }