*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:#111318;color:#e6e8ee;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app{height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.screen h1{font-size:20px;font-weight:600}.screen p{color:#9aa0ae;font-size:14px;line-height:1.6}button.primary{appearance:none;border:none;border-radius:10px;background:#3b6cf5;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;cursor:pointer}button.primary:disabled{background:#2a3348;color:#6b7285}button.ghost{appearance:none;border:1px solid #2a3348;border-radius:10px;background:transparent;color:#9aa0ae;font-size:13px;padding:8px 16px;cursor:pointer}input.field{appearance:none;border:1px solid #2a3348;border-radius:10px;background:#1a1e27;color:#e6e8ee;font-size:18px;padding:12px 16px;width:min(320px,80vw);text-align:center;letter-spacing:2px}.status{font-size:13px;color:#9aa0ae;min-height:1.4em}.status.error{color:#f56c6c}.viewer{position:fixed;inset:0;background:#000;display:flex}.viewer video{width:100%;height:100%;object-fit:contain;touch-action:none}.viewer .hud{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;pointer-events:none}.viewer .hud>*{pointer-events:auto}.viewer .hud .status{background:#111318b3;border-radius:8px;padding:4px 10px}.viewer .hud .status:empty{display:none}.surface{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}.kbd{position:absolute;left:0;right:0;bottom:0;background:#111318eb;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:8px}.kbd.hidden{display:none}.kbd-bar{display:flex;gap:6px;overflow-x:auto}.kbd-bar button{appearance:none;border:1px solid #2a3348;border-radius:8px;background:#1a1e27;color:#e6e8ee;font-size:14px;padding:8px 12px;white-space:nowrap;cursor:pointer}.kbd-bar button.active{background:#3b6cf5;border-color:#3b6cf5}.kbd-field{appearance:none;border:1px solid #2a3348;border-radius:8px;background:#1a1e27;color:#e6e8ee;font-size:16px;padding:10px 12px;width:100%}