:root{--bg:#0a0a0a;--fg:#f2f2f0;--dim:#f2f2f099;--line:#f2f2f02e;--accent:#ff6a1a;--mono:ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--sans);margin:0;overflow:hidden}#app{background:#000;width:100vw;height:100dvh;position:relative}#stage{position:absolute;inset:0}#mirror{position:absolute;inset:0;transform:scaleX(-1)}#camera,#overlay{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}#camera{background:#000}#overlay{pointer-events:none}#hud-text{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;inset:0}.onboarding{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20;background:#0000008c;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.onboarding-hidden{opacity:0;pointer-events:none}.onboarding-card{border:1px solid var(--line);background:#0a0a0af2;width:min(600px,92vw);max-height:92vh;padding:28px 26px;overflow-y:auto}.onboarding-card h1{font-family:var(--mono);letter-spacing:.28em;color:var(--accent);margin:0 0 8px;font-size:15px}.onboarding-sub{color:var(--dim);max-width:46ch;margin:0 0 24px;font-size:13px;line-height:1.5}.hand-guide{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;display:grid}.hand-guide-col h2{flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:600;display:flex}.hand-guide-col ol{counter-reset:step;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.hand-guide-col li{counter-increment:step;color:var(--dim);gap:10px;font-size:13px;line-height:1.4;display:flex}.hand-guide-col li:before{content:counter(step);border:1px solid var(--accent);width:18px;height:18px;color:var(--accent);font-family:var(--mono);flex:none;justify-content:center;align-items:center;font-size:10px;display:flex}.hand-guide-col li:last-child{color:var(--fg)}.onboarding-card .tag{font-family:var(--mono);letter-spacing:.08em;color:var(--fg);border:1px solid var(--line);padding:2px 6px;font-size:10px;display:inline-block}.onboarding-card button{width:100%;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#0a0a0a;cursor:pointer;border:none;padding:14px;font-size:12px}.onboarding-card button:hover{filter:brightness(1.08)}.controls{z-index:15;border:1px solid var(--line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0a0a8c;flex-direction:column;gap:8px;width:260px;max-height:calc(100dvh - 36px);padding:10px;display:flex;position:absolute;bottom:18px;right:18px;overflow-y:auto}.controls-collapsed #controls-body{display:none}.collapse-btn{font-family:var(--mono);letter-spacing:.08em;color:var(--dim);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;gap:6px;padding:4px 2px;font-size:10px;display:flex}.collapse-btn:hover{color:var(--fg)}.collapse-icon{transition:transform .15s}.controls-collapsed .collapse-icon{transform:rotate(-90deg)}.controls-row{align-items:center;gap:8px;display:flex}.controls label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);flex-direction:column;gap:3px;font-size:9px;display:flex}.controls select{font-family:var(--mono);color:var(--fg);border:1px solid var(--line);background:#141414;min-width:84px;padding:5px 4px;font-size:11px}.slider-label{flex:1;min-width:180px}.slider-row{align-items:center;gap:8px;display:flex}.slider-row input[type=range]{accent-color:var(--accent);flex:1;height:4px}.slider-value{font-family:var(--mono);color:var(--fg);text-align:right;min-width:3ch;font-size:10px}.file-btn{font-family:var(--mono);color:var(--fg);border:1px solid var(--line);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:#141414;flex:1;padding:6px 8px;font-size:10px;overflow:hidden}.file-btn:hover{border-color:var(--fg)}.file-input-hidden{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}#btn-backing-toggle:disabled{opacity:.35;cursor:not-allowed}.help-btn{font-family:var(--mono);color:var(--dim);border:1px solid var(--line);cursor:pointer;background:0 0;align-self:flex-end;width:34px;height:34px;font-size:13px;line-height:1}.help-btn:hover{color:var(--fg);border-color:var(--fg)}.record-btn{font-family:var(--mono);letter-spacing:.08em;color:var(--fg);border:1px solid var(--line);cursor:pointer;background:0 0;align-self:flex-end;align-items:center;gap:6px;min-height:34px;padding:8px 12px;font-size:11px;display:inline-flex}.record-btn .rec-dot{background:#666;border-radius:50%;width:8px;height:8px}.record-btn.recording{border-color:var(--accent);color:var(--accent)}.record-btn.recording .rec-dot{background:var(--accent)}.rec-dot.blink{animation:1s step-end infinite blink}@keyframes blink{50%{opacity:.15}}.status{z-index:25;font-family:var(--mono);border:1px solid var(--line);text-align:center;background:#0a0a0ad9;max-width:min(480px,86vw);padding:10px 16px;font-size:12px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.status-error{border-color:var(--accent);color:var(--accent)}.status-info{color:var(--dim)}@media (width<=640px){.controls{flex-direction:column;width:auto;max-height:calc(100dvh - 24px);bottom:12px;left:12px;right:12px}.controls-row{flex-wrap:wrap}.controls select{flex:1;min-width:72px}.record-btn,.help-btn{justify-content:center;align-self:stretch;width:auto;min-height:44px}.onboarding-card{padding:22px 18px}.hand-guide{grid-template-columns:1fr;gap:22px}}