:root{--bg: #0b0b10;--panel: rgba(20, 20, 28, .92);--text: #f3f1ea;--muted: #a3a1ad;--accent: #ffd166;--danger: #ff4d5e;--radius: 10px;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;flex-direction:column;height:100dvh}#stage{position:relative;flex:1;min-height:0}#camera{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}#view,#debug{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}#debug{pointer-events:none}#status{position:absolute;top:16px;left:50%;transform:translate(-50%);max-width:calc(100% - 32px);padding:8px 14px;border-radius:var(--radius);background:var(--panel);font-size:15px;text-align:center}#status:empty,#status.hidden{display:none}#status.error{background:#78101cf2}#toast{position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:6px 14px;border-radius:var(--radius);background:var(--panel);font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}#bar{display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--panel)}#bar{position:relative;z-index:10}#effects{display:flex;gap:10px;flex:1;min-width:0}.dropdown{position:relative;flex:0 1 260px;min-width:0}.dd-trigger{width:100%;min-height:52px;padding:6px 12px 6px 14px;justify-content:space-between;gap:12px;text-align:left;transition:background .15s,border-color .15s}.dropdown.open .dd-trigger{border-color:var(--accent);background:#ffffff1f}.dd-text{display:flex;flex-direction:column;gap:1px;min-width:0}.dd-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.dd-value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.dd-chevron{flex:none;width:8px;height:8px;margin:0 4px 0 0;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:translateY(2px) rotate(-45deg);transition:transform .15s,border-color .15s}.dropdown.open .dd-chevron{transform:translateY(-2px) rotate(135deg);border-color:var(--accent)}.dd-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max(100%,260px);max-width:calc(100vw - 32px);max-height:min(60vh,440px);overflow-y:auto;padding:6px;border-radius:14px;background:#191922;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 48px #0000008c;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .14s,visibility 0s .14s}.dd-menu::-webkit-scrollbar{width:4px}.dd-menu::-webkit-scrollbar-track{background:transparent;margin:8px 0}.dd-menu::-webkit-scrollbar-thumb{background:#ffffffd9;border-radius:999px}.dd-menu::-webkit-scrollbar-thumb:hover{background:#fff}.dd-menu::-webkit-scrollbar-button{display:none}@supports not selector(::-webkit-scrollbar){.dd-menu{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.85) transparent}}.dropdown.open .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .14s,transform .14s,visibility 0s}.dd-option{width:100%;min-height:40px;padding:0 10px 0 12px;justify-content:space-between;gap:24px;border:0;border-radius:8px;background:transparent;text-align:left}.dd-option:hover,.dd-option:focus-visible{background:#ffffff1a;outline:none}.dd-option.selected{background:var(--accent);color:#1a1a1a;font-weight:600}.dd-hint{flex:none;min-width:22px;padding:2px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.18);font:600 11px/1.3 ui-monospace,Cascadia Mono,Consolas,monospace;color:var(--muted);text-align:center}.dd-option.selected .dd-hint{border-color:#0000004d;color:#3a3a3a}@media(prefers-reduced-motion:reduce){.dd-menu,.dd-chevron,.dd-trigger{transition:none}}#actions{display:flex;gap:8px}button{font:inherit;color:var(--text);background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);min-height:44px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}button:hover{background:#ffffff24}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon.dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}.icon.cam{width:16px;height:12px;border-radius:3px;border:2px solid currentColor}#record.recording{border-color:var(--danger)}#record.recording .dot{background:var(--danger);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}@media(max-width:640px){#bar{flex-direction:column-reverse;align-items:stretch;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))}#actions button{flex:1;justify-content:center}.dropdown{flex:1 1 0}.dropdown:nth-child(2) .dd-menu{left:auto;right:0}}
