:root{color-scheme:dark;--bg: #0a0d13;--panel: rgba(14, 19, 28, .82);--panel-solid: #0e131c;--border: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .2);--text: #e8ecf3;--muted: #8b93a5;--faint: #5c6473;--accent: #34d399;--accent-dim: rgba(52, 211, 153, .16);--accent-ink: #04231a;--warn: #fbbf24;--warn-dim: rgba(251, 191, 36, .14);--bad: #f87171;--bad-dim: rgba(248, 113, 113, .14);--t-xs: .72rem;--t-sm: .85rem;--t-md: 1rem;--t-lg: 1.35rem;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--r: 14px;--r-sm: 9px;--blur: blur(12px) saturate(1.1);--shadow: 0 10px 40px rgba(0, 0, 0, .5);--ease-fast: 90ms cubic-bezier(.2, 0, 0, 1);--ease: .16s cubic-bezier(.2, 0, 0, 1);--ease-slow: .32s cubic-bezier(.16, 1, .3, 1);--ease-spring: .42s cubic-bezier(.34, 1.4, .64, 1)}@media (prefers-reduced-motion: reduce){:root{--ease-fast: 1ms linear;--ease: 1ms linear;--ease-slow: 1ms linear;--ease-spring: 1ms linear}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none;overflow:hidden;touch-action:manipulation;-webkit-text-size-adjust:100%}.app{position:relative;height:100%;height:100dvh;display:flex;flex-direction:column}.stage{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage canvas{pointer-events:none}.stage.calibrating{cursor:crosshair}button{font:inherit;font-size:var(--t-sm);color:var(--text);background:#ffffff12;border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;min-height:44px;transition:background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease),transform var(--ease-fast)}button:hover:not(:disabled){background:#ffffff1f;border-color:var(--border-strong)}button:active:not(:disabled){transform:scale(.97);transition-duration:40ms}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}button.primary{box-shadow:0 0 0 0 var(--accent-dim)}button.primary:hover:not(:disabled){background:#4ade80;box-shadow:0 0 0 4px var(--accent-dim)}button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.linkish{background:none;border:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:4px 0;min-height:0;font-size:var(--t-xs)}button.linkish:hover{color:var(--text);background:none}select{font:inherit;font-size:var(--t-sm);color:var(--text);background:#ffffff12;border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 10px;min-height:44px;cursor:pointer}select option{background:var(--panel-solid);color:var(--text)}input[type=file]{display:none}.panel{position:absolute;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);backdrop-filter:var(--blur);box-shadow:var(--shadow);max-width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.panel.center{top:50%;transform:translate(-50%,-50%);animation:panel-center-in var(--ease-slow) both}.panel.bottom{bottom:max(12px,env(safe-area-inset-bottom));animation:panel-bottom-in var(--ease-slow) both}@keyframes panel-center-in{0%{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes panel-bottom-in{0%{opacity:0;transform:translate(-50%) translateY(14px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.panel h1{font-size:var(--t-lg);margin-bottom:var(--s1);letter-spacing:-.01em}.panel p{color:var(--muted);font-size:var(--t-sm);line-height:1.5;margin-bottom:var(--s3)}.panel .error{color:var(--bad)}.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}.demo-link{display:inline-block;margin-top:var(--s3);color:var(--muted);font-size:var(--t-xs);text-decoration:none;border-bottom:1px solid var(--border-strong);padding-bottom:2px}.demo-link:hover{color:var(--accent);border-color:var(--accent)}.privacy-consent{display:flex;align-items:flex-start;gap:.65rem;max-width:38rem;margin:.8rem auto 0;color:var(--muted);font-size:.78rem;line-height:1.45;text-align:left}.privacy-consent input{width:1rem;height:1rem;margin-top:.08rem;accent-color:var(--accent);flex:0 0 auto}.keyboard-choice{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);margin-bottom:var(--s3);color:var(--text);font-size:var(--t-sm);font-weight:600}.wizard{position:absolute;left:50%;transform:translate(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(460px,calc(100vw - 20px));background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);backdrop-filter:var(--blur);box-shadow:var(--shadow);text-align:center;animation:panel-bottom-in var(--ease-slow) both}.steps{display:flex;align-items:center;justify-content:center;gap:var(--s1);margin-bottom:var(--s3)}.step{width:7px;height:7px;border-radius:999px;background:#ffffff2e;transition:background var(--ease),transform var(--ease)}.step.done{background:var(--accent);animation:step-pop var(--ease-spring) both}.step.now{background:var(--accent-dim);box-shadow:0 0 0 0 var(--accent)}@media (prefers-reduced-motion: no-preference){.step.now{animation:step-waiting 1.8s ease-in-out infinite}}@keyframes step-pop{0%{transform:scale(.4)}to{transform:scale(1)}}@keyframes step-waiting{0%,to{box-shadow:0 0 #34d39980}60%{box-shadow:0 0 0 5px #34d39900}}.step.now{background:var(--accent);transform:scale(1.6);box-shadow:0 0 0 4px var(--accent-dim)}.steps-count{margin-left:var(--s2);font-size:var(--t-xs);color:var(--faint);font-variant-numeric:tabular-nums}.wizard-prompt{font-size:var(--t-md);font-weight:600;line-height:1.35;margin-bottom:var(--s1);text-wrap:balance}.wizard-hint{font-size:var(--t-sm);color:var(--muted);line-height:1.45;margin-bottom:var(--s3);text-wrap:balance}.wizard-msg{font-size:var(--t-sm);color:var(--warn);background:var(--warn-dim);border-radius:var(--r-sm);padding:var(--s2) var(--s3);margin-bottom:var(--s3);line-height:1.4}.wizard-actions{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}.wizard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)}.wizard-more{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted)}.wizard-range{font-size:var(--t-xs);color:var(--faint);font-variant-numeric:tabular-nums}.kbtarget{width:100%;max-width:260px;height:auto;margin:0 auto var(--s3);display:block}.kbtarget-body{fill:#b9c2d0}.kbtarget-line{stroke:#00000040;stroke-width:1}.kbtarget-black{fill:#10141c}.kbtarget-edge{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}.kbtarget-halo{fill:var(--accent);opacity:.28}.kbtarget-dot{fill:var(--accent);stroke:var(--accent-ink);stroke-width:1.5}@media (prefers-reduced-motion: no-preference){.kbtarget-halo{animation:pulse 1.6s ease-in-out infinite}}@keyframes pulse{0%,to{opacity:.2;r:8}50%{opacity:.4;r:11}}.align{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--muted);white-space:nowrap}.align-dot{width:7px;height:7px;border-radius:999px;background:currentColor}.align-strong{color:var(--accent)}.align-usable{color:var(--warn)}.align-poor{color:var(--bad)}.align-none{color:var(--faint)}.statusbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;align-items:center;gap:var(--s3);padding:7px var(--s3);background:var(--panel);border:1px solid var(--border);border-radius:999px;backdrop-filter:var(--blur);font-size:var(--t-xs);color:var(--muted);overflow-x:auto;scrollbar-width:none}.statusbar::-webkit-scrollbar{display:none}.statusbar{animation:statusbar-in var(--ease-slow) both}@keyframes statusbar-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.statusbar .spacer{flex:1;min-width:var(--s2)}.statusbar .sep{width:1px;height:14px;background:var(--border);flex:none}.stat{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}.stat b{color:var(--accent);font-size:var(--t-sm);display:inline-block}@media (prefers-reduced-motion: no-preference){.stat b{animation:count-tick var(--ease-spring) both}}@keyframes count-tick{0%{transform:scale(1.35);color:#fff}to{transform:scale(1);color:var(--accent)}}.stat-of{color:var(--faint)}.src{color:var(--faint);white-space:nowrap;transition:color var(--ease)}.src.on{color:var(--accent);text-shadow:0 0 10px var(--accent-dim)}.src.failed{color:var(--bad);text-shadow:none}.transport{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--s2);padding:var(--s2);background:var(--panel);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:var(--blur);box-shadow:var(--shadow);max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center;transition:opacity var(--ease),transform var(--ease)}.transport.hidden{opacity:0;transform:translate(-50%) translateY(12px);pointer-events:none}.transport-more{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;width:100%;padding-top:var(--s2);border-top:1px solid var(--border)}@media (max-width: 520px),(max-height: 460px){.panel{padding:var(--s3)}.panel p,.keyboard-choice{margin-bottom:var(--s2)}.wizard{left:8px;right:8px;width:auto;transform:none;padding:10px 12px;text-align:left;animation:none}.wizard .steps{justify-content:flex-start;margin-bottom:7px}.wizard .wizard-prompt{font-size:var(--t-sm);margin-bottom:7px}.wizard .wizard-hint{margin-bottom:9px}.wizard.is-tapping .kbtarget,.wizard.is-tapping .wizard-hint{display:none}.wizard.is-tapping .wizard-actions{position:absolute;right:10px;top:9px}.wizard.is-tapping .wizard-actions button{min-height:34px;padding:5px 9px;font-size:var(--t-xs)}.wizard.is-tapping .steps,.wizard.is-tapping .wizard-prompt{max-width:calc(100% - 175px)}.wizard-actions button,.transport>button{flex:1 1 auto;min-width:0}.transport{left:8px;right:8px;transform:none;max-width:none}.transport.hidden{transform:translateY(12px)}.statusbar{gap:var(--s2);padding:6px 10px}.kbtarget{max-width:220px}}@media (max-height: 460px){.kbtarget,.wizard-hint{display:none}}.preview-frame{position:relative;height:520px;margin:0 auto 28px;max-width:900px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}.preview-label{position:absolute;z-index:5;top:0;left:0;padding:3px 9px;font-size:11px;font-family:ui-monospace,monospace;color:var(--faint);background:#000;border-bottom-right-radius:var(--r-sm)}.preview-stage{background:repeating-linear-gradient(115deg,#2a3140 0 42px,#333b4c 42px 84px),#2a3140}body:has(.preview-frame){overflow:auto;padding:28px 16px}.preview-single{position:fixed;inset:0}.partpicker{max-width:min(520px,calc(100vw - 24px))}.partlist{list-style:none;display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s3);max-height:46vh;overflow-y:auto}.partrow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:var(--s2) var(--s3);border-radius:var(--r-sm)}.partrow.selected{border-color:var(--accent);background:var(--accent-dim)}.partname{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--text)}.partrow.selected .partname{color:var(--accent)}.parttag{font-size:var(--t-xs);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px;letter-spacing:.01em}.partmeta{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}