:root{color-scheme:dark;--bg: #070b12;--panel: rgba(15, 23, 42, .82);--panel-strong: rgba(15, 23, 42, .94);--border: rgba(255, 255, 255, .1);--text: #f8fafc;--muted: #94a3b8;--accent: #2dd4bf;--accent-2: #38bdf8;--ok: #22c55e;--warn: #fbbf24;--ink: #0f172a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;background:var(--bg);color:var(--text)}body{min-height:100svh;overflow-x:hidden}button{border:0;color:inherit;font:inherit;cursor:pointer}.app-shell{min-height:100svh;display:grid;grid-template-rows:52px 1fr;background:radial-gradient(circle at 10% 0%,rgba(45,212,191,.12),transparent 30%),linear-gradient(180deg,#0a1019,#070b12)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px max(14px,env(safe-area-inset-left)) 8px max(14px,env(safe-area-inset-right));background:#070b12e0;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#2563eb;color:#fff;font-size:14px;font-weight:900}.brand-copy{display:grid;gap:2px;min-width:0}.brand-copy strong{font-size:14px;line-height:1}.brand-copy small{color:var(--muted);font-size:10px;font-weight:700;line-height:1}.status-pill{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(45,212,191,.22);border-radius:999px;background:#2dd4bf1a;color:#99f6e4;padding:5px 11px;font-size:11px;font-weight:800}.stage-wrap{width:min(100%,980px);margin:0 auto;padding:10px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:9px}.camera-stage{position:relative;min-height:0;width:100%;height:100%;max-height:calc(100svh - 148px);aspect-ratio:3 / 4;justify-self:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(135deg,#0f172ae6,#020617eb),#020617;box-shadow:0 20px 50px #00000057}video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}canvas{pointer-events:none}.robot-panel,.hud{position:absolute;left:10px;right:10px;z-index:5;border:1px solid var(--border);background:var(--panel-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px #0000003d}.robot-panel{top:10px;display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:12px}.robot-guide{height:104px;border-radius:10px;background:linear-gradient(180deg,#ecfeff,#dbeafe);color:var(--ink);overflow:hidden}.robot-guide svg{display:block;width:100%;height:100%}.robot-guide .limb,.robot-guide .body,.robot-guide .head{stroke:#0f172a;stroke-linecap:round;stroke-linejoin:round}.robot-guide .limb{stroke-width:7;fill:none}.robot-guide .body{stroke-width:4;fill:#60a5fa}.robot-guide .head{stroke-width:4;fill:#f8fafc}.robot-guide .eye{fill:#0f172a}.robot-guide .motion{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 7;opacity:.9}.robot-guide.is-animated .limb-move{transform-box:fill-box;transform-origin:center;animation:guidePulse 1.15s ease-in-out infinite alternate}.mission-copy{min-width:0}.mission-count{color:#67e8f9;display:block;font-size:11px;font-weight:900;margin-bottom:3px;text-transform:uppercase}.mission-copy h1{margin:0;font-size:clamp(23px,7vw,38px);line-height:.95;letter-spacing:0}.mission-copy p{margin:6px 0 0;color:#cbd5e1;font-size:13px;font-weight:700;line-height:1.25}.hud{bottom:10px;padding:11px;border-radius:12px}.hud-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.hud-row strong{min-width:0;font-size:16px;line-height:1.1}.countdown{min-width:66px;text-align:right;color:#f8fafc;font-variant-numeric:tabular-nums;font-size:28px;font-weight:950}.progress-track{height:14px;border-radius:999px;overflow:hidden;background:#94a3b842}.progress-fill{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width 80ms linear}.hold-prompt{margin:7px 0 0;color:var(--muted);text-align:center;font-size:12px;font-weight:800}.success-flash{position:absolute;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none;background:#22c55e24}.success-flash strong{border-radius:14px;background:#fff;color:#14532d;padding:14px 22px;font-size:30px;font-weight:950;box-shadow:0 12px 34px #0000004d}.mission-strip{display:flex;justify-content:center;gap:8px}.mission-dot{width:12px;height:12px;border-radius:999px;background:#334155}.mission-dot.is-current{outline:3px solid rgba(56,189,248,.36);background:var(--accent-2)}.mission-dot.is-done{background:var(--ok)}.primary-action{width:100%;min-height:50px;border-radius:10px;background:#f8fafc;color:#020617;font-size:16px;font-weight:950;box-shadow:0 12px 34px #00000040}.primary-action:disabled{cursor:wait;opacity:.72}.privacy{margin:0;color:var(--muted);text-align:center;font-size:11px;font-weight:700}@keyframes guidePulse{0%{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(3deg)}}@media(min-width:760px){.stage-wrap{padding:18px;gap:12px}.camera-stage{max-height:calc(100svh - 174px);aspect-ratio:4 / 3}.robot-panel{width:min(520px,calc(100% - 20px));right:auto;grid-template-columns:126px minmax(0,1fr)}.robot-guide{height:116px}.hud{width:min(520px,calc(100% - 20px));left:50%;right:auto;transform:translate(-50%)}}@media(max-width:390px){.topbar{padding-left:10px;padding-right:10px}.robot-panel{grid-template-columns:92px minmax(0,1fr);gap:9px}.robot-guide{height:92px}.mission-copy h1{font-size:22px}.mission-copy p,.hold-prompt{font-size:11px}.hud-row strong{font-size:14px}.countdown{min-width:58px;font-size:24px}}