:root{color:#f5f5f5;font-synthesis:none;text-rendering:optimizelegibility;--surface:#0f0f0feb;--surface-solid:#151515;--line:#ffffff2e;--muted:#a3a3a3;--yellow:#ffd43b;--orange:#ff7a45;--red:#dc3545;--blue:#60a5fa;background:#111;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button{font:inherit}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}.app-shell,.camera-stage{width:100%;height:100%}.camera-stage{isolation:isolate;background:#111;position:relative;overflow:hidden}#camera-video,#pose-overlay{transform-origin:50%;max-width:none;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#camera-video{z-index:0;background:#090909}#pose-overlay{z-index:1;pointer-events:none}.top-bar{z-index:5;min-height:58px;padding:calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#0c0c0ce6;justify-content:space-between;align-items:center;gap:16px;display:flex;position:absolute;top:0;left:0;right:0}.brand-mark{color:#fff;letter-spacing:0;align-items:center;gap:10px;font-size:15px;font-weight:680;display:inline-flex}.brand-accent{background:var(--yellow);border-radius:1px;width:4px;height:21px}.model-status{color:#d4d4d4;white-space:nowrap;justify-content:flex-end;align-items:center;gap:8px;min-width:72px;min-height:32px;font-size:12px;display:inline-flex}.status-dot{background:#d9a514;border-radius:50%;flex:0 0 8px;width:8px;height:8px}.model-status[data-state=ready] .status-dot,.model-status[data-state=active] .status-dot{background:#39b54a}.model-status[data-state=error] .status-dot{background:var(--red)}.empty-state{z-index:3;text-align:center;flex-direction:column;align-items:center;width:min(88vw,320px);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-state h1{color:#fff;letter-spacing:0;margin:0;font-size:26px;font-weight:700;line-height:1.2}.empty-state p{color:var(--muted);margin:9px 0 22px;font-size:13px}.primary-button,.stop-button,.icon-button{cursor:pointer;border:0;border-radius:4px;transition:background-color .12s,opacity .12s}.primary-button{color:#17130a;background:var(--yellow);justify-content:center;align-items:center;gap:9px;min-width:156px;min-height:48px;padding:0 20px;font-size:14px;font-weight:720;display:inline-flex}.primary-button:hover:not(:disabled){background:#ffe16b}.stop-button:hover:not(:disabled){background:#c82f3e}.icon-button:hover:not(:disabled){background:#353535}.primary-button:disabled,.stop-button:disabled,.icon-button:disabled{cursor:wait;opacity:.42}.primary-button svg,.stop-button svg,.icon-button svg{width:19px;height:19px}.pose-readout{z-index:4;top:calc(74px + env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));border-left:4px solid var(--yellow);background:var(--surface);border-radius:2px;flex-direction:column;align-items:flex-start;gap:2px;min-width:158px;padding:10px 14px 11px;display:flex;position:absolute}.pose-readout span{color:var(--muted);font-size:11px}.pose-readout strong{color:#fff;letter-spacing:0;font-size:20px;font-weight:720}.pose-readout[data-pose=standing] strong{color:var(--yellow)}.pose-readout[data-pose=squat] strong{color:var(--orange)}.pose-readout[data-pose=hand-raised] strong{color:#fff}.error-banner{z-index:7;right:max(16px, env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));left:max(16px, env(safe-area-inset-left));border-left:4px solid var(--red);color:#fff;background:#2d1114f5;border-radius:2px;align-items:center;gap:10px;max-width:560px;min-height:44px;margin:0 auto;padding:10px 13px;font-size:13px;display:flex;position:absolute}.error-banner svg{color:#ff6b78;flex:0 0 18px;width:18px;height:18px}.control-dock{z-index:6;min-height:calc(70px + env(safe-area-inset-bottom));padding:10px max(18px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));border-top:1px solid var(--line);background:#0c0c0cf0;justify-content:space-between;align-items:center;gap:24px;display:flex;position:absolute;bottom:0;left:0;right:0}.metrics{grid-template-columns:repeat(3,minmax(58px,1fr));width:min(52vw,480px);margin:0;display:grid}.metrics div{border-right:1px solid var(--line);min-width:0;padding:0 18px}.metrics div:first-child{padding-left:0}.metrics div:last-child{border-right:0}.metrics dt{color:var(--muted);font-size:10px}.metrics dd{color:#fff;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;margin:3px 0 0;font-size:15px;overflow:hidden}.camera-controls{align-items:center;gap:8px;display:flex}.icon-button{border:1px solid var(--line);color:#fff;background:#272727;flex:0 0 44px;place-items:center;width:44px;height:44px;display:grid}.stop-button{color:#fff;background:var(--red);justify-content:center;align-items:center;gap:8px;min-width:88px;height:44px;padding:0 14px;font-size:13px;font-weight:680;display:inline-flex}@media (width<=520px){.top-bar{padding-right:max(13px, env(safe-area-inset-right));padding-left:max(13px, env(safe-area-inset-left));gap:10px}.brand-mark{font-size:14px}.model-status{min-width:0}.pose-readout{top:calc(70px + env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));min-width:142px}.pose-readout strong{font-size:18px}.control-dock{min-height:calc(72px + env(safe-area-inset-bottom));padding-right:max(12px, env(safe-area-inset-right));padding-left:max(12px, env(safe-area-inset-left));gap:8px}.metrics{flex:1;width:auto}.metrics div{padding:0 8px}.metrics dd{font-size:13px}.stop-button{width:44px;min-width:44px;padding:0}.stop-button span{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (height<=560px) and (orientation:landscape){.top-bar{min-height:50px;padding-top:max(8px, env(safe-area-inset-top));padding-bottom:8px}.pose-readout{top:calc(60px + env(safe-area-inset-top))}.control-dock{min-height:calc(62px + env(safe-area-inset-bottom));padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}