:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--text:#e7e9ea;--muted:#8b98a5;--accent:#1d9bf0;--accent-press:#1a8cd8;--danger:#f4212e;--danger-soft:#f4212e2e;--surface:#16181ceb;--border:#ffffff1a;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{min-height:100dvh;min-height:-webkit-fill-available}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;background:0 0;border:none}button:disabled{cursor:not-allowed;opacity:.4}#app{height:100svh;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);flex-direction:column;display:flex;overflow:hidden}.screen{flex-direction:column;flex:1;min-height:0;animation:.22s fade;display:flex}@keyframes fade{0%{opacity:0}to{opacity:1}}.error-banner{background:var(--danger-soft);color:#ff8a92;border:1px solid #f4212e59;border-radius:12px;flex-shrink:0;margin:.5rem .75rem 0;padding:.65rem .85rem;font-size:.9rem;line-height:1.35}.pick{text-align:center;justify-content:center;align-items:center;gap:1.5rem;padding:1.5rem 1.25rem 2rem}.pick-brand{flex-direction:column;align-items:center;gap:.75rem;display:flex}.pick-logo{background:linear-gradient(145deg,#1d9bf0,#7856ff);border-radius:18px;place-items:center;width:64px;height:64px;display:grid;box-shadow:0 12px 40px #1d9bf047}.pick-logo svg{color:#fff;width:32px;height:32px}.pick h1{letter-spacing:-.03em;margin:0;font-size:1.65rem;font-weight:800}.pick p{color:var(--muted);max-width:16rem;margin:.35rem 0 0;font-size:1rem;line-height:1.4}.pick-cta{border:1.5px dashed var(--border);background:radial-gradient(at top,#141820 0%,#0a0a0a 70%);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;width:min(100%,22rem);min-height:11rem;padding:2rem 1.25rem;transition:border-color .15s,background .15s;display:flex;position:relative}.pick-cta:active{border-color:var(--accent);background:radial-gradient(at top,#15202b 0%,#0a0a0a 70%)}.pick-cta input{opacity:0;cursor:pointer;width:100%;height:100%;font-size:1rem;position:absolute;inset:0}.pick-cta-icon{width:56px;height:56px;color:var(--accent);pointer-events:none;background:#1d9bf026;border-radius:50%;place-items:center;display:grid}.pick-cta-icon svg{width:26px;height:26px}.pick-cta strong{pointer-events:none;font-size:1.15rem;font-weight:700}.pick-cta span{color:var(--muted);pointer-events:none;font-size:.88rem}.studio{background:#000;flex:1 1 0;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);width:100%;height:100%;min-height:0;display:grid;position:relative;overflow:hidden}.studio-main{background:#000;grid-area:1/1;width:100%;min-width:0;height:100%;min-height:0;position:relative;overflow:hidden}.stage{background:#000;place-items:center;display:grid;position:absolute;inset:0}.stage #canvas-host{place-items:center;display:grid;position:absolute;inset:0}.cutout-drag{z-index:4;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;position:absolute;inset:0}.cutout-drag.dragging{cursor:grabbing;background:#1d9bf01a;animation:1.2s ease-in-out infinite move-pulse;box-shadow:inset 0 0 0 3px #1d9bf0,inset 0 0 24px #1d9bf059}@keyframes move-pulse{0%,to{box-shadow:inset 0 0 0 3px #1d9bf0,inset 0 0 18px #1d9bf047}50%{box-shadow:inset 0 0 0 4px #4db2ff,inset 0 0 32px #1d9bf080}}.cutout-drag.disabled{pointer-events:none}.move-badge{z-index:12;pointer-events:none;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#1d9bf0;border:1px solid #ffffff59;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:800;animation:.15s fade;position:absolute;top:4.25rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #1d9bf08c}.stage canvas{object-fit:contain;object-position:center center;background:#000;width:100%;max-width:100%;height:100%;max-height:100%;display:block;position:absolute;inset:0}.studio-overlay{pointer-events:none;z-index:5;position:absolute;inset:0}.studio-top{pointer-events:auto;background:linear-gradient(#0000008c,#0000);justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem .75rem;display:flex}.icon-btn{border:1px solid var(--border);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000073;border-radius:50%;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid}.icon-btn svg{width:20px;height:20px}.icon-btn:active:not(:disabled){background:#000000a6;transform:scale(.96)}.badge{border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;background:#00000080;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem .75rem;font-size:.8rem;font-weight:700;display:inline-flex}.badge.live{color:#fff}.studio-top{flex-wrap:wrap;justify-content:center;gap:.45rem}.studio-top .icon-btn{position:absolute;left:.75rem}.remaining-badge{font-variant-numeric:tabular-nums;gap:.35rem}.remaining-badge .remaining-label{opacity:.75;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600}.remaining-badge.ending-soon{color:#fff;background:#f4212ebf;border-color:#fff3;animation:.9s ease-in-out infinite remaining-pulse}.remaining-badge.clip-ended{color:#fff;background:#71767bbf;border-color:#ffffff26;animation:none}@keyframes remaining-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.badge .dot{background:var(--danger);border-radius:50%;width:8px;height:8px;animation:1.3s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #f4212e8c}70%{box-shadow:0 0 0 8px #f4212e00}to{box-shadow:0 0 #f4212e00}}.countdown{letter-spacing:-.04em;text-shadow:0 8px 30px #0000008c;z-index:6;pointer-events:none;background:#0006;place-items:center;font-size:clamp(5rem,22vw,8rem);font-weight:800;animation:.85s pop;display:grid;position:absolute;inset:0}@keyframes pop{0%{opacity:0;transform:scale(.55)}35%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}.hidden{display:none!important}.size-rail{pointer-events:auto;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20;touch-action:none;-webkit-user-select:none;user-select:none;cursor:ns-resize;background:#00000080;border-radius:999px;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem .55rem;display:flex;position:absolute;top:50%;right:.45rem;transform:translateY(-50%)}.audio-rail{pointer-events:auto;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20;touch-action:none;-webkit-user-select:none;user-select:none;background:#00000080;border-radius:999px;flex-direction:column;align-items:center;gap:.55rem;padding:.65rem .5rem;display:flex;position:absolute;top:50%;left:.45rem;transform:translateY(-50%)}.audio-mute-btn{color:#fff;border:1px solid var(--border);background:#ffffff1a;border-radius:50%;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.audio-mute-btn svg{width:20px;height:20px}.audio-mute-btn.muted{color:#ffffff8c}.audio-mute-btn:active:not(:disabled){background:#ffffff29;transform:scale(.96)}.volume-track-wrap{cursor:ns-resize;flex-direction:column;align-items:center;padding:.15rem 0;display:flex}.volume-track-wrap.disabled{opacity:.35;pointer-events:none}.volume-track-wrap .size-track{height:min(28vh,160px)}.volume-fill{background:#00ba7c!important}.volume-track-wrap .size-thumb{border-color:#00ba7c}.volume-track-wrap.dragging .size-thumb{transform:scale(1.08)}.size-rail.dragging{background:#000000b8}.size-rail-label{color:#fffc;pointer-events:none;font-size:1rem;font-weight:700;line-height:1}.size-track{box-sizing:content-box;background:padding-box content-box;border-radius:999px;flex-shrink:0;width:6px;height:min(40vh,240px);margin:0 -14px;padding:0 14px;position:relative}.size-track:before{content:"";pointer-events:none;background:#ffffff38;border-radius:999px;width:6px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.size-fill{background:var(--accent);pointer-events:none;z-index:1;border-radius:999px;width:6px;height:55%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.size-thumb{border:3px solid var(--accent);pointer-events:none;z-index:2;background:#fff;border-radius:50%;width:24px;height:24px;margin-left:-12px;position:absolute;bottom:calc(55% - 11px);left:50%;box-shadow:0 2px 12px #00000080}.studio-bottom{pointer-events:auto;background:#0a0a0a;border-top:1px solid #ffffff14;flex-direction:column;grid-area:2/1;align-items:center;gap:.45rem;padding:.55rem 1.25rem .75rem;display:flex}.status-line{color:#ffffffbf;text-align:center;min-height:1.2em;font-size:.85rem}.record-btn{background:0 0;border:4px solid #fff;border-radius:50%;flex-shrink:0;place-items:center;width:76px;height:76px;padding:0;transition:transform .12s;display:grid}.record-btn:active:not(:disabled){transform:scale(.94)}.record-btn .inner{background:var(--danger);border-radius:50%;width:58px;height:58px;transition:border-radius .15s,width .15s,height .15s}.record-btn.recording .inner{background:var(--danger);border-radius:6px;width:28px;height:28px}.record-btn:disabled{opacity:.35}.result{background:#000;flex:1 1 0;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);width:100%;height:100%;min-height:0;display:grid;overflow:hidden}.result-preview{background:#000;grid-area:1/1;width:100%;min-width:0;height:100%;min-height:0;position:relative;overflow:hidden}.result-video{object-fit:contain;object-position:center center;background:#000;border:0;width:100%;height:100%;margin:0;display:block;position:absolute;inset:0}.result-bar{z-index:5;background:#0a0a0a;border-top:1px solid #ffffff14;flex-direction:column;grid-area:2/1;gap:.35rem;width:100%;padding:.5rem .75rem .55rem;display:flex;position:relative}.btn-row{gap:.5rem;display:flex}.btn{border-radius:999px;flex:1;justify-content:center;align-items:center;gap:.35rem;min-height:40px;padding:.45rem .75rem;font-size:.9rem;font-weight:700;transition:transform .1s,background .15s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.98)}.btn svg{width:1.15em;height:1.15em}.btn-primary{background:var(--accent);color:#fff}.btn-primary:active:not(:disabled){background:var(--accent-press)}.btn-secondary{color:#fff;border:1px solid var(--border);background:#ffffff1f}.btn-ghost{color:var(--muted);background:0 0;min-height:32px;padding:.25rem .75rem;font-size:.85rem;font-weight:600}.result-bar .btn-primary{width:100%}.boot-overlay{z-index:8;color:#fff;background:#000000b8;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;font-size:.95rem;font-weight:600;display:flex;position:absolute;inset:0}.spinner{border:3px solid #fff3;border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=720px){.pick h1{font-size:2rem}.stage canvas{max-width:min(100%,720px);margin:0 auto}}
