:root{--bg: #f4f4f2;--panel: #ffffff;--panel2: #ececec;--line: #dcdcdc;--accent: #141414;--ink: #222222;--dim: #9a9a9a;--lcd-bg: #141414;--lcd-fg: #f5f5f5;--font-mono: "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:12px;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app{height:100%;height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}.device{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--accent);box-shadow:0 16px 48px #0000001a}.titlebar{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}.traffic{display:flex;gap:7px}.traffic span{width:10px;height:10px;border-radius:50%}.traffic .r{background:#c9c9c9}.traffic .y{background:#ababab}.traffic .g{background:#8a8a8a}.titlebar .path{flex:1;text-align:center;color:var(--dim);font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.titlebar .coffee-btn{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--accent);border-radius:3px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;line-height:1;padding:5px 8px;text-decoration:none;white-space:nowrap}.titlebar .coffee-btn:active{opacity:.75}.titlebar .lang-btn{appearance:none;width:44px;flex:none;border:1px solid var(--line);border-radius:3px;background:#f7f7f7;color:var(--ink);font-family:var(--font-mono);font-size:10px;line-height:1;padding:4px 0;cursor:pointer}.titlebar .lang-btn:active{background:#e4e4e4}.viewport{position:relative;background:#000;cursor:pointer;flex:none}.viewport canvas{display:block;background:#000;width:min(80vw,560px);aspect-ratio:4 / 3}.start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fffffff0;cursor:pointer;z-index:10}.start-overlay .big{font-size:15px;letter-spacing:.35em;color:var(--ink)}.start-overlay .sub{font-size:11px;color:var(--dim);letter-spacing:.08em;text-align:center;line-height:1.7;padding:0 24px;white-space:pre-line}.start-overlay .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}.start-overlay.hidden{display:none}.transport{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none;min-width:0}.transport::-webkit-scrollbar{display:none}.transport .group{display:flex;align-items:baseline;gap:6px;flex:none}.transport .label{font-size:9px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}.transport .lcd{font-size:13px;color:var(--lcd-fg);background:var(--lcd-bg);border:1px solid var(--lcd-bg);border-radius:3px;padding:3px 8px;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}.transport .lcd.small{font-size:11px}.transport button{appearance:none;border:1px solid var(--line);border-radius:3px;background:#f7f7f7;color:var(--ink);font-family:var(--font-mono);font-size:12px;line-height:1;padding:6px 10px;cursor:pointer;flex:none}.transport button:active{background:#e4e4e4}.transport button.on{background:var(--accent);color:#fff;border-color:var(--accent)}.transport .rec-btn.recording{background:var(--accent);color:#fff;border-color:var(--accent);animation:recblink 1s steps(2,jump-none) infinite}.transport .hands-btn.loading{animation:recblink .8s steps(2,jump-none) infinite}.transport .hands-btn.detect{background:var(--accent);color:#fff;border-color:var(--accent)}.transport .lcd.rec{animation:recblink 1s steps(2,jump-none) infinite}@keyframes recblink{50%{opacity:.35}}.transport .push{flex:1;min-width:6px}.debug-hud{position:fixed;top:8px;left:8px;z-index:99;margin:0;padding:6px 8px;background:#ffffffe6;border:1px solid var(--line);border-radius:3px;color:var(--ink);font-family:var(--font-mono);font-size:11px;line-height:1.5;pointer-events:none;white-space:pre}