:root{--bg: #05060a;--surface: #0f1218;--surface-2: #171b23;--border: #262b35;--text: #e7ebf2;--text-dim: #8b93a3;--accent: #3ad6c2;--accent-dim: #1f8f81;--danger: #e5484d;--radius: 10px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}#camera-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.app{height:100%;width:100%}.viewport{position:relative;height:100vh;width:100vw;overflow:hidden;background:#000}#output-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}#output-canvas.mirrored{transform:scaleX(-1)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#05060aeb;z-index:50;text-align:center;padding:24px}.overlay[hidden]{display:none}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.banner{position:absolute;top:calc(var(--safe-top) + 12px);left:12px;right:12px;background:var(--danger);color:#1a0505;border-radius:var(--radius);padding:10px 14px;display:none;align-items:center;justify-content:space-between;gap:10px;font-size:14px;z-index:60;font-weight:600}.banner.visible{display:flex}.banner button{background:none;border:none;color:inherit;font-size:18px;cursor:pointer;line-height:1}.hud{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;z-index:20;pointer-events:none}.hud-top{top:0;padding-top:calc(var(--safe-top) + 10px);background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}.hud-bottom{bottom:0;padding-bottom:calc(var(--safe-bottom) + 14px);background:linear-gradient(to top,rgba(0,0,0,.65),transparent);flex-wrap:wrap;gap:10px}.hud *{pointer-events:auto}.brand{font-weight:700;font-size:15px;letter-spacing:.02em}.brand span{color:var(--accent)}.hud-readouts{display:flex;gap:10px;align-items:center}.readout{font-variant-numeric:tabular-nums;font-size:12px;background:#0f1218bf;border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text-dim)}.readout.fps-low{color:var(--danger);border-color:var(--danger)}.mode-selector{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 92px);display:flex;gap:6px;overflow-x:auto;padding:0 12px;z-index:20;scrollbar-width:none}.mode-selector::-webkit-scrollbar{display:none}.mode-btn{flex:0 0 auto;background:#0f1218cc;border:1px solid var(--border);color:var(--text-dim);padding:7px 13px;border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap}.mode-btn.active{border-color:var(--accent);color:var(--accent);background:#3ad6c21f}.capture-controls{display:flex;align-items:center;gap:20px}.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#0f1218cc;color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.capture-btn{width:62px;height:62px;border-radius:50%;border:3px solid var(--text);background:transparent;cursor:pointer;position:relative}.capture-btn:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:var(--text)}.record-btn{color:var(--danger)}.record-btn.recording{background:var(--danger);color:#fff;animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.colorize-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);cursor:pointer}.settings-panel{position:absolute;top:0;right:0;height:100%;width:min(320px,86vw);background:var(--surface);border-left:1px solid var(--border);padding:calc(var(--safe-top) + 20px) 18px 20px;transform:translate(100%);transition:transform .22s ease;z-index:40;overflow-y:auto}.settings-panel.open{transform:translate(0)}.settings-panel h2{font-size:15px;margin:0 0 18px;color:var(--text)}.control-row{display:grid;grid-template-columns:84px 1fr 46px;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;color:var(--text-dim)}.control-row input[type=range]{width:100%;accent-color:var(--accent)}.control-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}.disclaimer{margin-top:22px;font-size:11.5px;line-height:1.5;color:var(--text-dim);border-top:1px solid var(--border);padding-top:14px}@media (min-width: 900px){.settings-panel{width:340px}}