:root{--bg-0: #f5f4ee;--bg-1: #ecebe4;--ink: #171719;--ink-soft: #5e5e66;--ink-faint: #9e9ea8;--line: rgba(20, 22, 30, .08);--glass: rgba(255, 255, 255, .55);--glass-strong: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .7);--shadow-sm: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(20, 22, 30, .04);--shadow-md: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 24px rgba(20, 22, 30, .08);--accent: #1f2937;--accent-hover: #111827;--warn: #b45309;--error: #b91c1c;--radius: 14px;--radius-sm: 10px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(ellipse 90% 70% at 50% 35%,var(--bg-0) 0%,var(--bg-1) 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;user-select:none}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#three-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#cv-layer{position:absolute;right:16px;bottom:16px;width:300px;max-width:36vw;aspect-ratio:4 / 3;border-radius:var(--radius);overflow:hidden;background:#14161c0a;box-shadow:var(--shadow-md);border:1px solid var(--line);display:none;z-index:5}#cv-layer.scan-mode{width:min(420px,60vw)}#cv-layer.active{display:block}#cv-layer.ar-mode{right:16px;bottom:16px;width:320px;max-width:40vw}#cv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#cv-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mode-indicator{--mode-color: #ffffff;position:absolute;top:8px;left:8px;display:none;align-items:center;gap:8px;padding:6px 12px;background:#0009;backdrop-filter:blur(8px);border-radius:8px;border:1px solid var(--mode-color);z-index:10}.mode-indicator.active{display:flex}.mode-label{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--mode-color);text-transform:uppercase}.solver-progress-container{display:none;width:24px;height:24px}.solver-progress-container.active{display:block}.solver-progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.solver-progress-ring .progress-bg{fill:none;stroke:#a855f74d;stroke-width:3}.solver-progress-ring .progress-bar{fill:none;stroke:#a855f7;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .1s linear}#grid-overlay{position:absolute;inset:0;display:none;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:8%;pointer-events:none}#grid-overlay.active{display:grid}.grid-cell{border:1.5px solid rgba(255,255,255,.25);border-radius:6px;background:#ffffff08;transition:background .15s,border-color .15s,transform .12s}.grid-cell.highlight-row{background:#64c8ff26;border-color:#64c8ff80}.grid-cell.highlight-col{background:#ffb46426;border-color:#ffb46480}.grid-cell.pinch-active{background:#78ff9633;border-color:#78ff9699;transform:scale(.95)}#hud-root{position:absolute;inset:0;pointer-events:none;z-index:10}.hud-bar{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-md);pointer-events:auto;flex-wrap:wrap;max-width:calc(100vw - 24px);justify-content:center}.hud-stat{display:flex;flex-direction:column;align-items:flex-start;padding:4px 12px;min-width:64px}.hud-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}.hud-value{font-family:JetBrains Mono,ui-monospace,SF Mono,monospace;font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;color:var(--ink);margin-top:2px}.hud-divider{width:1px;height:24px;background:var(--line);margin:0 2px}.hud-btn{background:transparent;border:1px solid transparent;color:var(--ink);padding:8px 14px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .16s,border-color .16s,color .16s}.hud-btn:hover{background:#14161e0d;border-color:var(--line)}.hud-btn:disabled{opacity:.4;cursor:not-allowed}.hud-btn.primary{background:var(--accent);color:#fafaf7;border-color:var(--accent)}.hud-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.hud-mode{position:relative;display:flex;background:#14161e0d;border-radius:var(--radius-sm);padding:3px;gap:0}.hud-mode button{position:relative;background:transparent;border:0;color:var(--ink-soft);padding:6px 12px;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:-.01em;cursor:pointer;border-radius:8px;transition:color .16s;z-index:1}.hud-mode button.active{color:var(--ink);background:var(--glass-strong);box-shadow:0 1px 2px #14161e0f}.hud-mode button:hover:not(.active){color:var(--ink)}#scan-panel,#gesture-hint{position:absolute;left:14px;bottom:14px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:14px 16px;pointer-events:auto;display:none;max-width:320px;font-size:13px;line-height:1.5;color:var(--ink);z-index:11}#scan-panel.active,#gesture-hint.active{display:block}#scan-panel h3,#gesture-hint h3{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:-.01em}#scan-panel p,#gesture-hint p{margin:0 0 12px;color:var(--ink-soft)}#gesture-hint code{font-family:JetBrains Mono,ui-monospace,monospace;background:#14161e0f;padding:1px 5px;border-radius:4px;font-size:11px;color:var(--ink)}#scan-panel kbd{font-family:JetBrains Mono,ui-monospace,monospace;background:var(--glass-strong);border:1px solid var(--line);border-bottom-width:2px;padding:1px 6px;border-radius:4px;font-size:11px;color:var(--ink)}#scan-panel .progress{display:flex;gap:4px;margin-bottom:10px}#scan-panel .progress span{flex:1;height:4px;border-radius:2px;background:#14161e1a;transition:background .2s}#scan-panel .progress span.done{background:var(--ink)}#scan-panel .progress span.current{background:var(--accent)}#scan-panel .actions{display:flex;gap:8px}#toast{position:absolute;top:84px;left:50%;transform:translate(-50%);z-index:20;display:none;padding:10px 16px;border-radius:var(--radius-sm);background:var(--glass-strong);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--glass-border);box-shadow:var(--shadow-md);font-size:13px;font-weight:500;color:var(--ink);max-width:80vw;text-align:center;pointer-events:none}#toast.show{display:block}#toast.warn{color:var(--warn)}#toast.error{color:var(--error)}@media (max-width: 600px){.hud-bar{gap:4px;padding:6px;top:8px}.hud-stat{padding:2px 8px;min-width:0}.hud-btn{padding:6px 10px;font-size:12px}.hud-mode button{padding:5px 9px;font-size:11px}#cv-layer{width:60vw;bottom:12px;right:12px}#scan-panel,#gesture-hint{left:8px;right:8px;bottom:8px;max-width:none}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}