:root{--color-bg: #0f0f0f;--color-surface: #1a1a1a;--color-surface-translucent: rgba(0, 0, 0, .6);--color-text: #e2e8f0;--color-text-dim: #94a3b8;--color-accent: #3b82f6;--color-success: #22c55e;--color-danger: #ef4444;--color-border: #334155;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2rem;--radius: .375rem}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.4}#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}button{font-family:inherit;font-size:.875rem;font-weight:500;padding:var(--space-2) var(--space-3);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:background .15s}button:hover{background:#2a2a2a}button:active{background:#333}button.primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}button:disabled{opacity:.4;cursor:not-allowed}select,input{font-family:inherit;font-size:.875rem;padding:var(--space-2);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius)}ul{margin:0;padding:0;list-style:none}.btn-load-image{font-size:.875rem;font-weight:500;padding:var(--space-2) var(--space-3);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer}.btn-load-image:hover{background:#2a2a2a}.record-elapsed{color:var(--color-text-dim);font-variant-numeric:tabular-nums}@media print{body *{visibility:hidden}.print-target,.print-target *{visibility:visible}.print-target{position:absolute;top:0;left:0}@page{margin:0}}.screen.practice{position:relative;height:100%}.target-viewport{position:absolute;top:0;right:0;bottom:0;left:0;background:#1e293b;display:flex;align-items:center;justify-content:center;overflow:hidden}.target-canvas{width:100%;height:100%;display:block}.lost-indicator{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172ad9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-4);color:var(--color-text);pointer-events:none}.lost-banner{color:#f59e0b;font-size:1.75rem;font-weight:700;margin-bottom:var(--space-2);letter-spacing:.05em}.lost-indicator p{margin:0;color:var(--color-text-dim)}.calibration-status{position:absolute;z-index:10;top:max(var(--space-3),env(safe-area-inset-top));left:50%;transform:translate(-50%);margin:0;padding:var(--space-1) var(--space-3);background:var(--color-surface-translucent);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);text-align:center;max-width:min(90vw,32rem)}.practice-source-mount{position:absolute;z-index:10;top:max(var(--space-3),env(safe-area-inset-top));left:max(var(--space-3),env(safe-area-inset-left));max-width:min(320px,90vw)}.practice-right-panels{position:absolute;z-index:10;top:max(var(--space-3),env(safe-area-inset-top));right:max(var(--space-3),env(safe-area-inset-right));display:flex;flex-direction:column;gap:var(--space-2);max-width:min(320px,90vw)}.debug-panel{background:var(--color-surface-translucent);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text)}.debug-panel-summary{padding:var(--space-2) var(--space-3);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dim);cursor:pointer}.debug-panel-body{padding:0 var(--space-3) var(--space-3);max-height:70vh;overflow-y:auto}.debug-live-preview{display:flex;align-items:center;justify-content:center;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:4 / 3;margin-bottom:var(--space-2)}.live-canvas{width:100%;height:100%;object-fit:cover}.source-panel-controls{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.debug-panel-rows{display:flex;flex-direction:column;gap:var(--space-2);font-size:.875rem;-webkit-user-select:text;user-select:text}.debug-row{display:flex;justify-content:space-between;gap:var(--space-2)}.debug-row-label{color:var(--color-text-dim)}.debug-row-value{font-family:monospace;font-weight:500}.debug-row-value.success{color:var(--color-success)}.debug-row-value.warning{color:#f59e0b}.debug-row-value.paused{color:var(--color-text-dim)}.practice-control-bar{position:absolute;z-index:10;bottom:max(var(--space-4),env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:var(--space-2);padding:var(--space-2);background:var(--color-surface-translucent);border:1px solid var(--color-border);border-radius:999px}.practice-control-bar button{border-radius:999px;padding:var(--space-2) var(--space-3)}@media(max-width:600px){.practice-control-bar{gap:var(--space-1);padding:var(--space-1)}.practice-control-bar button{padding:var(--space-1) var(--space-2);font-size:.8125rem}}