:root { --bg: #0d0f14; --card: #181b23; --fg: #e8eaf0; --muted: #9aa0ad; --accent: #4f8cff; --danger: #e5484d; --line: #2a2f3a; }* { box-sizing: border-box; }[hidden] { display: none !important; }html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }button, select, input { font: inherit; color: inherit; }button { background: var(--accent); border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; }button.ghost { background: transparent; border: 1px solid var(--line); }button.danger { background: var(--danger); }.gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }.card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; text-align: left; }.card h1 { margin: 0; font-size: 21px; }.card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }.card input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px; font-size: 16px; }.muted { color: var(--muted); margin: 0; }.error { color: #ff8a8d; margin: 0; }#wait { align-items: center; text-align: center; }.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }#stage { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; background: #000; }#view { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }#video { display: block; width: 100%; height: 100%; background: #000; pointer-events: none; }#cursor { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; pointer-events: none; opacity: 0.55; }#kbd { position: fixed; left: -1000px; bottom: 0; width: 10px; height: 10px; opacity: 0; font-size: 16px; }#stats { position: fixed; left: 8px; top: calc(8px + env(safe-area-inset-top)); background: rgba(0,0,0,0.65); border-radius: 8px; padding: 6px 10px; font: 12px/1.45 ui-monospace, monospace; white-space: pre; pointer-events: none; }#bar { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; max-width: calc(100vw - 20px); }#bar .round { width: 46px; height: 46px; border-radius: 50%; padding: 0; background: rgba(30,34,44,0.85); border: 1px solid var(--line); font-size: 20px; }#tools { display: flex; gap: 6px; overflow-x: auto; background: rgba(20,23,30,0.92); border: 1px solid var(--line); border-radius: 14px; padding: 6px; scrollbar-width: none; }#tools[hidden] { display: none; }#tools button, #tools select { flex: none; padding: 8px 11px; border-radius: 9px; background: #262b36; border: 0; white-space: nowrap; }#tools button.on { background: var(--accent); }#tools .danger { background: var(--danger); }#keys { position: fixed; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(14,16,22,0.95); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }#keys[hidden] { display: none; }#keys .row { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }#keys button { flex: none; min-width: 44px; padding: 9px 10px; border-radius: 8px; background: #262b36; font-size: 14px; }#keys button.mod.on { background: var(--accent); }#keys button.mod.lock { background: #c77d1a; }body.keys-open #bar { bottom: calc(108px + env(safe-area-inset-bottom)); }#toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); background: rgba(20,23,30,0.94); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; font-size: 14px; max-width: calc(100vw - 32px); }