:root { --panel: rgba(13, 18, 22, 0.88); --line: #26313a; --text: #d7e1e8; --muted: #8798a6; --accent: #3dff6e; --err: #ff6b6b; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font: 16px/1.4 system-ui, sans-serif; touch-action: manipulation; }
[hidden] { display: none !important; }
#camera, #hud { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
#camera { object-fit: cover; background: #000; }
button, a.round { font: inherit; color: var(--text); background: rgba(29, 38, 46, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 10px 14px; min-height: 44px; }
button.primary { background: var(--accent); color: #062b12; border-color: var(--accent); font-weight: 700; }
.muted { color: var(--muted); font-size: 14px; }
.toast { position: fixed; left: 12px; right: 70px; top: calc(12px + env(safe-area-inset-top)); margin: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; z-index: 7; }
.error { color: var(--err); font-size: 14px; }
#controls { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#controls > * { pointer-events: auto; }
.round { position: absolute; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px; text-decoration: none; }
#calBtn { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
#controls a.round { top: calc(66px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
.dpad { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template: repeat(3, 46px) / repeat(3, 46px); gap: 4px; opacity: 0.85; }
.dpad button { padding: 0; min-height: 0; font-size: 16px; }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dpad .ok { grid-area: 2 / 2; color: var(--accent); }
.dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.panel { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; z-index: 6; }
.panel h2 { margin: 0 0 8px; font-size: 16px; }
.panel label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.panel input[type=range] { width: 100%; accent-color: var(--accent); }
.panel output { float: right; color: var(--text); font-family: ui-monospace, monospace; }
.panel .chk { display: flex; gap: 8px; align-items: center; }
.panel p { margin: 6px 0 10px; }