.stage-frame{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.surface{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}.overlay-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.status{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translate(-50%);z-index:5;font:500 13px/1.3 var(--font-body);letter-spacing:.02em;background:#141418d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:7px 16px;border-radius:999px;max-width:88%;text-align:center}.status.recording{background:#ff3b302e;border:1px solid rgba(255,59,48,.3)}.controls{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 56px);z-index:5;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:32px;padding:0 24px}.controls.init{flex-direction:column;gap:12px}.btn,.toggle{font:600 16px/1 var(--font-body);color:#fff;padding:14px 28px;border-radius:999px;max-width:100%;background:#ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .1s cubic-bezier(.16,1,.3,1),opacity .15s,background .15s,border-color .15s}.btn{min-width:200px}.toggle{min-width:0;white-space:nowrap}.btn:active,.toggle:active{transform:scale(.95)}.btn:disabled,.toggle:disabled{opacity:.35}.btn{border:1.5px solid var(--color-accent)}.btn.secondary{border-color:#fff3}.toggle{border:1.5px solid rgba(255,255,255,.25)}.toggle[aria-pressed=true]{background:#ff6b352e;border-color:var(--color-accent)}.sound-toggle{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 16px);z-index:6;font:600 15px/1 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.25);background:#ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 18px;border-radius:999px;transition:transform .1s cubic-bezier(.16,1,.3,1),opacity .2s}.sound-toggle:active{transform:scale(.95)}.sound-toggle[aria-pressed=true]{border-color:var(--color-accent);background:#ff6b352e}.sound-toggle.hidden{opacity:0;pointer-events:none}.outline-toggle{position:absolute;top:calc(env(safe-area-inset-top,0px) + 52px);left:calc(env(safe-area-inset-left,0px) + 16px);z-index:6;font:600 15px/1 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.25);background:#ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 18px;border-radius:999px;transition:transform .1s cubic-bezier(.16,1,.3,1),opacity .2s}.outline-toggle:active{transform:scale(.95)}.outline-toggle[aria-pressed=true]{border-color:var(--color-accent);background:#ff6b352e}.outline-toggle.hidden{opacity:0;pointer-events:none}.rec-dot{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 16px);z-index:6;width:12px;height:12px;border-radius:50%;background:var(--color-danger);box-shadow:0 0 8px #ff3b3099;opacity:0;animation:pulse 1s ease-in-out infinite}.rec-dot.on{opacity:1}@keyframes pulse{50%{opacity:.3}}.rec-timer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 36px);z-index:6;display:flex;align-items:center;gap:8px;background:#141418d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:6px 14px;border-radius:999px;opacity:0;transition:opacity .2s}.rec-timer.on{opacity:1}.rec-timer-dot{width:10px;height:10px;border-radius:50%;background:var(--color-danger);box-shadow:0 0 8px #ff3b3099;animation:pulse 1s ease-in-out infinite}.rec-timer-text{font:600 14px/1 var(--font-mono);color:#fff;letter-spacing:.04em}.shutter-btn{position:relative;width:72px;height:72px;border-radius:50%;border:3px solid #fff;background:transparent;padding:0;cursor:pointer;transition:transform .1s cubic-bezier(.16,1,.3,1)}.shutter-btn:active{transform:scale(.93)}.shutter-inner{position:absolute;inset:4px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 20px #ff6b3566;transition:background .2s,box-shadow .2s}.shutter-btn.stop .shutter-inner{background:var(--color-danger);box-shadow:0 0 20px #ff3b3066;border-radius:50%}.shutter-stop-icon{display:none}.shutter-btn.stop .shutter-stop-icon{display:block;position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:4px;background:#fff}.shutter-label{position:absolute;left:50%;transform:translate(-50%);bottom:-28px;font:500 13px/1 var(--font-body);color:#fffc;white-space:nowrap}.result{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;background:#000}.result video{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;border-radius:16px}.result-meta{text-align:center;padding:12px 24px 0}.result-meta-title{font:600 15px/1.4 var(--font-headline);color:#ffffffeb}.result-meta-info{font:400 13px/1.4 var(--font-body);color:#ffffff80;margin-top:4px}.result .result-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 14px)}.result .result-actions .btn{width:100%;max-width:420px;min-width:0}.result a.btn{text-decoration:none;text-align:center}.result .result-hint{margin:0;padding:0 24px calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;font:400 13px/1.4 var(--font-body);color:#fff9}.fx-fab,.cam-flip{position:static;z-index:auto;font:600 15px/1 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.25);background:#ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 18px;border-radius:999px;transition:transform .1s cubic-bezier(.16,1,.3,1),opacity .2s}.fx-fab:active,.cam-flip:active{transform:scale(.95)}.cam-flip:disabled{opacity:.4}.controls.recording .fx-fab,.controls.recording .cam-flip{display:none}.fx-backdrop{position:absolute;inset:0;z-index:7;display:none}.fx-backdrop.open{display:block}.fx-panel{position:absolute;z-index:8;left:0;right:0;bottom:0;max-height:50dvh;display:flex;flex-direction:column;gap:12px;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:#1212168c;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,.18);border-radius:24px 24px 0 0;transform:translateY(110%);transition:transform .28s cubic-bezier(.16,1,.3,1);overflow:hidden}.fx-panel.open{transform:translateY(0)}.drag-handle{width:40px;height:4px;border-radius:2px;background:#ffffff4d;margin:4px auto 8px;flex-shrink:0}.fx-tabs{display:flex;gap:8px}.fx-tab{flex:1;position:relative;font:600 13px/1.2 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.15);background:#ffffff0f;padding:10px 6px;border-radius:999px;transition:transform .1s cubic-bezier(.16,1,.3,1),background .15s,border-color .15s}.fx-tab:active{transform:scale(.95)}.fx-tab.on{background:#ff6b3538;border-color:var(--color-accent)}.fx-count{display:inline-block;min-width:18px;margin-left:4px;padding:1px 5px;font-size:11px;border-radius:999px;background:#fff3}.fx-groups{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}.fx-group h4{margin:2px 2px 8px;font:600 12px/1 var(--font-headline);letter-spacing:.04em;color:#ffffff8c}.fx-chips{display:flex;flex-wrap:wrap;gap:8px}.fx-chip{position:relative;font:600 14px/1 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.18);background:#ffffff0f;padding:10px 14px;border-radius:999px;transition:transform .1s cubic-bezier(.16,1,.3,1),background .15s,border-color .15s}.fx-chip:active{transform:scale(.95)}.fx-chip.on{background:#ff6b3559;border-color:var(--color-accent)}.fx-order{display:inline-block;margin-left:6px;min-width:16px;padding:0 4px;font-size:11px;border-radius:999px;background:#00000059}.fx-actions{display:flex;gap:8px}.fx-btn{flex:1;font:600 14px/1 var(--font-body);color:#fff;border:1.5px solid rgba(255,255,255,.2);padding:12px;border-radius:999px;background:#ffffff14;transition:transform .1s cubic-bezier(.16,1,.3,1),background .15s}.fx-btn:active{transform:scale(.95)}.fx-btn:disabled{opacity:.4}.loading-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#000000c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:1;transition:opacity .28s ease;pointer-events:all}.loading-overlay.fade-out{opacity:0;pointer-events:none}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font:600 15px/1.4 var(--font-body);color:#ffffffeb;text-align:center;max-width:80%;padding:0 16px}.loading-bar{width:min(260px,70vw);height:6px;border-radius:999px;background:#ffffff24;overflow:hidden}.loading-bar-fill{height:100%;width:0%;border-radius:999px;background:var(--color-accent);transition:width .18s ease-out}.loading-pct{font:500 13px/1 var(--font-body);color:#ffffff8c;letter-spacing:.04em}