:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f7fbff;background:#02070b;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#02070b}button{font:inherit;color:inherit}.view{position:fixed;inset:0}.stage{position:absolute;inset:0;background:#02070b;overflow:hidden}video,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#camera{transform:scaleX(-1)}#overlay{pointer-events:none}.app-tabs{position:fixed;z-index:50;top:max(14px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;padding:5px;gap:4px;background:#02070bb8;border:1px solid rgba(255,255,255,.14);border-radius:999px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.app-tab{border:0;border-radius:999px;padding:9px 15px;background:transparent;font-size:12px;font-weight:800;opacity:.68}.app-tab.active{opacity:1;color:#001018;background:#57d8ff}.mode-bar{position:fixed;z-index:20;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:6px;padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:25px;background:#02070bb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mode{min-width:88px;border:0;border-radius:19px;padding:10px 14px;background:transparent;display:grid;gap:2px;place-items:center;font-size:12px;font-weight:700;opacity:.7}.mode span{font-size:21px;line-height:1}.mode.active{opacity:1;background:#57d8ff2e;outline:1px solid rgba(87,216,255,.45)}.start-button{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(87,216,255,.55);background:#091d28e6;border-radius:999px;padding:15px 24px;font-weight:800}.icon-button{position:fixed;z-index:30;right:18px;top:max(72px,calc(env(safe-area-inset-top) + 70px));width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#02070b9e;font-size:28px}.fps{position:fixed;z-index:30;left:18px;top:max(72px,calc(env(safe-area-inset-top) + 70px));padding:7px 10px;border-radius:999px;background:#02070b8c;font:700 12px ui-monospace,monospace}.overlay-card{position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,390px);padding:28px 22px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:#030c12eb;text-align:center;display:grid;gap:12px}.overlay-card span{color:#a9bac6}.overlay-card button{justify-self:center;border:0;border-radius:999px;padding:11px 18px;background:#57d8ff;color:#001018;font-weight:800}.spinner{justify-self:center;width:44px;height:44px;border-radius:50%;border:5px solid rgba(87,216,255,.15);border-top-color:#57d8ff;animation:spin .8s linear infinite}#game-view{background:#071d38}#game-canvas{width:100%;height:100%;display:block}.game-hud{position:fixed;z-index:30;top:max(72px,calc(env(safe-area-inset-top) + 70px));left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none}.game-hud strong{font-size:24px;background:#0000004d;padding:8px 12px;border-radius:16px}.game-hud small{max-width:230px;text-align:right;background:#0000004d;padding:8px 12px;border-radius:16px;line-height:1.35}.camera-preview{display:none}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media(orientation:landscape){.mode-bar{left:auto;right:max(18px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}}.sandbox-score{position:fixed;z-index:31;top:max(72px,calc(env(safe-area-inset-top) + 70px));left:18px;padding:9px 13px;border-radius:16px;background:#00000061;font-size:24px;font-weight:900;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.debug-toggle{position:fixed;z-index:42;right:16px;top:max(72px,calc(env(safe-area-inset-top) + 70px));width:46px;height:46px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#02070bb8;font-size:20px}.debug-panel{position:fixed;z-index:40;right:14px;top:max(126px,calc(env(safe-area-inset-top) + 124px));width:min(330px,calc(100vw - 28px));max-height:calc(100vh - 160px);overflow:auto;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#02090ede;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:.22s ease}.debug-panel.collapsed{transform:translate(calc(100% + 28px));opacity:0;pointer-events:none}.debug-panel header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}.debug-panel header small{color:#88a0af;text-align:right}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric-grid div{min-height:68px;display:grid;gap:4px;padding:10px;border-radius:14px;background:#ffffff0e}.metric-grid span,.mapping-card span{color:#9db1bd;font-size:11px}.metric-grid strong{font-size:15px;overflow-wrap:anywhere}.debug-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.debug-actions button{border:1px solid rgba(87,216,255,.28);border-radius:13px;padding:10px;background:#57d8ff1a;font-weight:800;font-size:12px}.debug-actions button:last-child{grid-column:1/-1}.debug-actions button:disabled{opacity:.38}.debug-actions button.danger{border-color:#ff5b5b80;background:#ff5b5b26}.mapping-card,.event-card{display:grid;gap:7px;padding:12px;border-radius:15px;background:#ffffff0b;margin-top:9px}.event-card ul{list-style:none;display:grid;gap:6px;padding:0;margin:0;color:#a9bbc6;font:11px ui-monospace,monospace}.sandbox-help{position:fixed;z-index:30;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(620px,calc(100vw - 34px));padding:10px 14px;border-radius:999px;background:#00000059;text-align:center;font-size:12px;color:#d7e5ed;pointer-events:none}@media(max-width:600px){.debug-panel{width:calc(100vw - 28px)}.sandbox-help{font-size:10px;border-radius:16px}}.inspector-toggle{position:fixed;z-index:30;left:18px;top:max(112px,calc(env(safe-area-inset-top) + 110px));border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;background:#02070b9e;font-size:12px;font-weight:800}.joint-inspector{position:fixed;z-index:35;left:18px;top:max(154px,calc(env(safe-area-inset-top) + 152px));width:min(310px,calc(100vw - 36px));padding:14px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:#02090ee6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.joint-inspector header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.joint-inspector header button{border:0;background:transparent;font-size:22px}.joint-inspector label{display:grid;gap:6px;color:#9db1bd;font-size:11px}.joint-inspector select{width:100%;padding:9px;border-radius:10px;background:#0c1820;color:#fff;border:1px solid rgba(255,255,255,.15)}.joint-inspector pre{white-space:pre-wrap;margin:10px 0 0;padding:10px;border-radius:12px;background:#ffffff0d;font:11px ui-monospace,monospace;line-height:1.45}.gesture-toggle{right:118px}.gesture-inspector{max-height:min(72vh,620px);overflow:auto}.gesture-summary{display:flex;justify-content:space-between;align-items:center;padding:.65rem .75rem;border-radius:12px;background:#ffffff12;margin:.6rem 0}.gesture-summary strong{font-size:1.35rem;color:#ffd84d}.gesture-active-list{display:grid;gap:.45rem}.gesture-row{display:grid;grid-template-columns:1fr auto;gap:.2rem .7rem;padding:.55rem .65rem;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#02070b94}.gesture-row strong{text-transform:uppercase;font-size:.78rem;letter-spacing:.04em}.gesture-row small{grid-column:1/-1;opacity:.72}.gesture-pill{font-size:.69rem;border-radius:999px;padding:.18rem .45rem;background:#ffd84d24;color:#ffe47a}.gesture-timeline{margin-top:.8rem}.gesture-timeline ul{list-style:none;margin:.45rem 0 0;padding:0;display:grid;gap:.35rem}.gesture-timeline li{font-size:.74rem;padding:.4rem .5rem;border-left:2px solid #57d8ff;background:#ffffff0b}@media(max-width:520px){.gesture-toggle{right:108px}}.event-toggle{right:196px}.event-inspector{left:auto;right:18px;top:max(154px,calc(env(safe-area-inset-top) + 152px));width:min(380px,calc(100vw - 36px));max-height:70vh;overflow:auto}.event-controls{display:grid;grid-template-columns:1fr auto auto;gap:7px}.event-controls select,.event-controls button{min-width:0;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px;background:#0c1820;color:#fff;font-size:11px}.event-controls button.active{background:#ffd84d2e;border-color:#ffd84d80}.event-stats{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:10px 0;padding:9px;border-radius:11px;background:#ffffff0d;font-size:11px}.event-stats span{color:#9db1bd}.event-inspector-list{list-style:none;padding:0;margin:0;display:grid;gap:5px}.event-inspector-list li{padding:7px 8px;border-left:3px solid #57d8ff;border-radius:7px;background:#ffffff0b;font:10px ui-monospace,monospace;overflow-wrap:anywhere}.event-inspector-list li[data-kind=gesture]{border-color:#ffd84d}.event-inspector-list li[data-kind=tracking]{border-color:#7eff9c}.event-inspector-list li[data-kind=error]{border-color:#ff6969}.event-inspector-list li[data-kind=action]{border-color:#d18cff}@media(max-width:520px){.event-toggle{right:188px;padding:8px 10px}.event-inspector{right:18px}}.render-toggle{right:276px}.render-inspector{left:auto;right:18px;top:max(154px,calc(env(safe-area-inset-top) + 152px));width:min(330px,calc(100vw - 36px))}.render-inspector label{margin-bottom:8px}.render-layers{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.render-layers label{display:flex;align-items:center;gap:7px;margin:0;padding:8px;border-radius:10px;background:#ffffff0d;color:#dbe8ee}.render-layers input{accent-color:#57d8ff}.render-inspector>button{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px;background:#0c1820;color:#fff;font-weight:700}.render-inspector small{display:block;margin-top:8px;color:#9db1bd}@media(max-width:620px){.render-toggle{right:264px;padding:8px 10px}}.calibration-toggle{right:356px}.calibration-inspector{left:auto;right:18px;top:max(154px,calc(env(safe-area-inset-top) + 152px));width:min(350px,calc(100vw - 36px));max-height:72vh;overflow:auto}.calibration-score{display:flex;justify-content:space-between;align-items:end;padding:8px 0}.calibration-score span{color:#9db1bd;font-size:11px}.calibration-score strong{font-size:1.55rem;color:#ffd84d}.calibration-progress{height:7px;border-radius:999px;background:#ffffff14;overflow:hidden}.calibration-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#57d8ff,#7eff9c);transition:width .2s ease}.calibration-status{margin:9px 0;padding:9px;border-radius:10px;background:#ffffff0d;font-size:12px}.calibration-checks{list-style:none;padding:0;margin:0;display:grid;gap:6px}.calibration-checks li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:10px;background:#ffffff0b;font-size:11px}.calibration-checks li[data-status=pass]{border-left:3px solid #7eff9c}.calibration-checks li[data-status=warn]{border-left:3px solid #ffd84d}.calibration-checks li[data-status=fail]{border-left:3px solid #ff6969}.calibration-checks li[data-status=pending]{border-left:3px solid #758996}.calibration-checks small{grid-column:2/4;color:#9db1bd}.calibration-recommendations{margin-top:8px;color:#ffd9a0;font-size:11px;line-height:1.45}.calibration-actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.calibration-actions button{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px;background:#0c1820;color:#fff;font-weight:700}@media(max-width:700px){.calibration-toggle{right:344px;padding:8px 9px}}