:root{--bg-0: #060911;--bg-1: #0f1b2b;--surface: rgba(12, 22, 38, .72);--surface-border: rgba(116, 215, 255, .25);--text: #e7f8ff;--muted: #b6d7e4;--accent: #52e7ff;--accent-strong: #ffc56f;--danger: #ff8a76}*{box-sizing:border-box}html,body,#app{width:100%;height:100dvh;min-height:100dvh;margin:0;overflow:hidden;background:radial-gradient(circle at 20% 20%,#1a2f48 0%,var(--bg-0) 58%);color:var(--text);font-family:Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif}.app-shell{position:relative;width:100%;height:100dvh;min-height:100dvh;isolation:isolate}.app-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 18%,rgba(68,208,255,.17),transparent 38%),radial-gradient(circle at 82% 78%,rgba(255,182,110,.15),transparent 44%);pointer-events:none;z-index:1}.camera-video,.scene-canvas,.debug-canvas{position:absolute;inset:0;width:100%;height:100%}.camera-video{object-fit:cover;transform:scaleX(-1);filter:saturate(1.22) contrast(1.04) brightness(.9);z-index:0}.scene-canvas{z-index:2;pointer-events:none}.debug-canvas{z-index:3;pointer-events:none;mix-blend-mode:screen}.hidden{display:none!important}.ui-layer{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr;gap:.85rem;padding-top:calc(.85rem + env(safe-area-inset-top));padding-right:calc(.85rem + env(safe-area-inset-right));padding-bottom:calc(.85rem + env(safe-area-inset-bottom));padding-left:calc(.85rem + env(safe-area-inset-left));z-index:5;pointer-events:none}.panel{background:linear-gradient(130deg,#091321d1,#12223699);border:1px solid var(--surface-border);border-radius:14px;box-shadow:0 20px 34px #0000004d,inset 0 0 20px #41c5ff0f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls-panel{display:flex;flex-direction:column;gap:.5rem;padding:.65rem;pointer-events:auto;min-width:176px}.consent-note{margin:0;font-size:.75rem;line-height:1.35;color:#e0f3ffd1}.status-panel{padding:.65rem .85rem;pointer-events:auto;align-self:start}.ui-button{border:1px solid rgba(118,216,255,.42);background:linear-gradient(150deg,#2b749947,#283d515c);color:var(--text);border-radius:10px;padding:.58rem .72rem;font-size:.85rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.ui-button:hover{transform:translateY(-1px);border-color:#a1e9ffb3;background:linear-gradient(150deg,#4091bc54,#274f6c6b)}.ui-button:active{transform:translateY(0)}.ui-button:disabled{opacity:.55;cursor:wait}.status-line{margin:.2rem 0;font-size:.84rem;color:var(--muted);font-family:Consolas,SFMono-Regular,Menlo,Monaco,monospace}.status-line:first-child{color:var(--text)}.fps-pill{position:absolute;right:calc(.9rem + env(safe-area-inset-right));bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:6;padding:.45rem .6rem;border-radius:999px;border:1px solid rgba(106,228,255,.42);background:#0c1d2dbd;color:var(--accent-strong);font-family:Consolas,SFMono-Regular,Menlo,Monaco,monospace;font-size:.78rem;letter-spacing:.03em}.error-banner{position:absolute;left:50%;bottom:calc(.95rem + env(safe-area-inset-bottom));transform:translate(-50%);z-index:6;max-width:min(90vw,640px);border-radius:12px;border:1px solid rgba(255,133,109,.5);background:#3f0f0dcc;color:#ffd4cb;padding:.58rem .88rem;font-size:.84rem;text-align:center}@media(max-width:900px){.ui-layer{grid-template-columns:1fr;gap:.65rem;padding:.65rem}.controls-panel{flex-direction:row;flex-wrap:wrap;min-width:0}.ui-button{flex:1;min-width:108px;padding:.62rem .72rem;font-size:.8rem}.status-panel{width:100%}}