*{box-sizing:border-box}html,body,#app{margin:0;padding:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#0a0a12;color:#cfd8ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}#app{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app.home-mode{display:block;overflow-y:auto;padding:env(safe-area-inset-top) 0 0 0}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;font-size:12px;color:#8a92b8;letter-spacing:1px}.statusbar .name{color:#cfd8ff;font-weight:600}.statusbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8a92b8;margin-right:6px;vertical-align:middle}.statusbar.paired .dot{background:#58ff58;box-shadow:0 0 8px #58ff58}.statusbar.waiting .dot{background:#ffd84a}.statusbar.connecting .dot,.statusbar.reconnecting .dot{background:#ff8a3a}.shoulders{display:flex;justify-content:space-between;padding:0 12px;gap:6px}.shoulders .side{display:flex;gap:6px}.shoulder-btn{min-width:64px;height:36px;border-radius:6px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:#cfd8ff;font-size:12px;letter-spacing:1px;display:flex;align-items:center;justify-content:center}.shoulder-btn.pressed{background:#ffffff2e}.main{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px;min-height:0}.pane{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}.joystick{position:relative;width:100%;height:100%;min-width:0;min-height:0}.joystick .base{position:absolute;width:140px;height:140px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);transform:translate(-50%,-50%);opacity:0;transition:opacity .1s;pointer-events:none}.joystick.active .base{opacity:1}.joystick .knob{position:absolute;width:64px;height:64px;border-radius:50%;background:#ffffff38;border:2px solid rgba(255,255,255,.45);transform:translate(-50%,-50%);opacity:0;transition:opacity .1s;pointer-events:none}.joystick.active .knob{opacity:1}.dpad{position:relative;width:180px;height:180px}.dpad-btn{position:absolute;width:60px;height:60px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:#cfd8ff;font-size:20px;display:flex;align-items:center;justify-content:center;border-radius:8px}.dpad-btn.pressed{background:#ffffff2e}.dpad-btn.u{top:0;left:60px}.dpad-btn.d{bottom:0;left:60px}.dpad-btn.l{top:60px;left:0}.dpad-btn.r{top:60px;right:0}.face{position:relative;width:200px;height:200px}.face-btn{position:absolute;width:64px;height:64px;border-radius:50%;background:#ffffff0a;border:2px solid var(--colour, rgba(255,255,255,.2));color:var(--colour, #cfd8ff);font-size:22px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:.5px;text-shadow:0 0 6px var(--colour);transition:transform 60ms,background 60ms}.face-btn .label{font-size:9px;letter-spacing:1px;margin-top:2px;color:#8a92b8;text-shadow:none}.face-btn.pressed{background:color-mix(in oklab,var(--colour, white) 24%,transparent);transform:scale(.94)}.face-btn.y{top:0;left:50%;transform:translate(-50%)}.face-btn.y.pressed{transform:translate(-50%) scale(.94)}.face-btn.x{top:50%;left:0;transform:translateY(-50%)}.face-btn.x.pressed{transform:translateY(-50%) scale(.94)}.face-btn.b{top:50%;right:0;transform:translateY(-50%)}.face-btn.b.pressed{transform:translateY(-50%) scale(.94)}.face-btn.a{bottom:0;left:50%;transform:translate(-50%)}.face-btn.a.pressed{transform:translate(-50%) scale(.94)}.bottombar{display:flex;justify-content:center;gap:12px;padding:4px 12px env(safe-area-inset-bottom)}.small-btn{min-width:80px;height:28px;font-size:11px;letter-spacing:1px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#cfd8ff;display:flex;align-items:center;justify-content:center}.small-btn.pressed{background:#ffffff2e}.home{display:flex;flex-direction:column;gap:18px;padding:20px 16px max(20px,env(safe-area-inset-bottom)) 16px;width:min(520px,100%);margin:0 auto;overflow-y:auto}.home-header{text-align:center;margin-bottom:4px}.home-header h1{margin:0 0 6px;font-size:22px;letter-spacing:4px;color:#58ff58;text-shadow:0 0 12px rgba(88,255,88,.4)}.home-header p{margin:0;color:#8a92b8;font-size:13px;letter-spacing:1px}.home .card{border:1px solid rgba(207,216,255,.18);background:#ffffff08;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}.home .card-scan{border-color:#b890ff73;background:#785ac812}.home .card-code{border-color:#58ff5873;background:#58ff580f}.home .card-title{font-size:13px;letter-spacing:4px;color:#cfd8ffd9;text-align:center}.home .card-scan .card-title{color:#b48cff}.home .card-code .card-title{color:#58ff58}.home .row{display:flex;gap:10px;flex-wrap:wrap}.home .btn{flex:1;min-width:130px;background:#ffffff0a;border:2px solid rgba(255,255,255,.18);color:#cfd8ff;border-radius:10px;padding:16px 12px;font:inherit;font-size:15px;letter-spacing:2px;font-weight:600;cursor:pointer}.home .btn.primary{background:#b890ff2e;border-color:#b890ffb3;color:#cbb6ff}.home .card-code .btn.primary{background:#58ff582e;border-color:#58ff58b3;color:#58ff58}.home .btn.ghost{background:#ffffff0a;border-color:#fff3;color:#cfd8ffd9}.home .scan-host{display:flex;flex-direction:column;gap:10px}.home .scan-host video{width:100%;max-height:48vh;border-radius:8px;background:#000;object-fit:cover}.home .scan-status{margin:0;text-align:center;font-size:12px;letter-spacing:1px;color:#cfd8ffb3}.home .scan-status.err{color:#ffd84a}.home .card-code input{background:#02050db3;border:2px solid rgba(88,255,88,.4);border-radius:10px;padding:14px;font:inherit;font-size:22px;letter-spacing:4px;text-align:center;color:#ffd84a;text-transform:uppercase;outline:none}.home .card-hint{margin:0;font-size:12px;letter-spacing:1px;color:#cfd8ffa6;text-align:center}.home .card-hint.err{color:#ff8a8a}.home .card-resume{border-color:#ffd84a;background:#ffd84a12}.home .card-resume .card-title{color:#ffd84a}.home .resume-sub{text-align:center;font-size:13px;color:#cfd8ff;letter-spacing:1px}.home .resume-sub code{color:#ffd84a;background:#ffd84a1a;padding:2px 8px;border-radius:4px;letter-spacing:1.5px}.install-first{display:flex;flex-direction:column;align-items:stretch;gap:22px;width:min(520px,100%);margin:0 auto;padding:24px 18px max(24px,env(safe-area-inset-bottom)) 18px}.install-first h1{margin:0;font-size:22px;letter-spacing:5px;color:#58ff58;text-align:center;text-shadow:0 0 14px rgba(88,255,88,.45)}.install-first .subtitle{margin:0;text-align:center;font-size:14px;line-height:1.55;color:#cfd8ff}.install-first ol.steps{list-style:decimal;margin:0;color:#cfd8ff;font-size:15px;line-height:1.75;background:#ffffff0a;border:1px solid rgba(207,216,255,.18);border-radius:14px;padding:18px 24px 18px 44px}.install-first ol.steps li{margin-bottom:6px}.install-first ol.steps strong{color:#58ff58}.install-first ol.steps .share-icon{display:inline-block;border:2px solid #58ff58;border-radius:5px;padding:0 6px;margin:0 3px;color:#58ff58}.install-first .queued{background:#ffd84a12;border:1px solid rgba(255,216,74,.4);border-radius:12px;padding:14px 16px;text-align:center}.install-first .queued-title{font-size:12px;letter-spacing:4px;color:#ffd84a;margin-bottom:6px}.install-first .queued-sub{font-size:13px;color:#cfd8ff}.install-first .queued-sub code{color:#ffd84a;background:#ffd84a1f;padding:2px 8px;border-radius:4px;letter-spacing:1.5px}.install-first .btn.install{background:#58ff582e;border:2px solid #58ff58;color:#58ff58;border-radius:12px;padding:18px;font:inherit;font-size:16px;font-weight:700;letter-spacing:4px;cursor:pointer;text-shadow:0 0 12px rgba(88,255,88,.6)}.install-first .continue-anyway{text-align:center;font-size:12px;letter-spacing:1px;color:#8a92b8;text-decoration:underline;text-decoration-color:#cfd8ff40;margin-top:4px}.gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px;background:#0a0a12;color:#cfd8ff;text-align:center;z-index:50}.gate .logo{font-size:28px;letter-spacing:6px;color:#58ff58;text-shadow:0 0 14px rgba(88,255,88,.45)}.gate .session{font-size:12px;letter-spacing:2px;color:#8a92b8}.gate .session code{color:#58ff58;background:#58ff5814;padding:4px 10px;border-radius:6px;letter-spacing:1px}.gate button.go{width:min(82vw,320px);height:96px;background:#58ff581a;border:3px solid #58ff58;border-radius:18px;color:#58ff58;font:inherit;font-size:24px;letter-spacing:6px;font-weight:700;text-shadow:0 0 12px rgba(88,255,88,.6);box-shadow:0 0 24px #58ff5840;cursor:pointer}.gate button.go:active{transform:scale(.98)}.gate .tips{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:1px;color:#8a92b8;max-width:360px;line-height:1.5}.gate .tip{background:#ffffff08;border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:8px}.gate .tip strong{color:#cfd8ff}.gate .tip .share-icon{display:inline-block;border:2px solid currentColor;border-radius:4px;padding:0 4px;margin:0 2px}.gate .tip.primary{border-color:#58ff58;background:#58ff580f;padding:18px 22px;font-size:14px;color:#cfd8ff;line-height:1.6;text-align:left}.gate .tip.primary .tip-title{color:#58ff58;letter-spacing:4px;font-size:12px;margin-bottom:10px;text-shadow:0 0 8px rgba(88,255,88,.5)}.gate .tip.primary strong{color:#58ff58}.gate button.go.secondary{background:#cfd8ff0a;border-color:#cfd8ff4d;color:#8a92b8;text-shadow:none;box-shadow:none}.refocus-overlay{position:fixed;inset:0;background:#0a0a12eb;display:flex;align-items:center;justify-content:center;z-index:60;padding:24px}.refocus-card{text-align:center;border:2px solid #58ff58;background:#58ff5814;padding:22px 28px;border-radius:14px;max-width:320px}.refocus-title{color:#58ff58;font-size:18px;letter-spacing:4px;margin-bottom:10px;text-shadow:0 0 12px rgba(88,255,88,.5)}.refocus-sub{color:#cfd8ff;font-size:13px;letter-spacing:1px;line-height:1.5}.tilt{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px}.tilt .level{position:relative;width:min(220px,70%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);border:2px solid rgba(255,255,255,.18);overflow:hidden}.tilt .level .ring{position:absolute;inset:22%;border:1px dashed rgba(255,255,255,.18);border-radius:50%}.tilt .level .bubble{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;background:#58ff58a6;border:2px solid #58ff58;box-shadow:0 0 16px #58ff58cc;transition:left .12s ease,top .12s ease}.tilt .tilt-hint{font-size:11px;letter-spacing:2px;color:#8a92b8}.tilt .tilt-enable{background:#58ff5814;border:2px solid #58ff58;color:#58ff58;font:inherit;font-size:14px;letter-spacing:3px;padding:14px 22px;border-radius:10px;cursor:pointer;text-shadow:0 0 8px rgba(88,255,88,.6)}.tilt .tilt-enable:active{transform:scale(.98)}