:root{--bg: #0a0a0a;--panel: rgba(8, 8, 8, .92);--ink: #f4f4f4;--ink-dim: #9a9a9a;--line: rgba(255, 255, 255, .55);--line-dim: rgba(255, 255, 255, .22);--ok: #45d483;--warn: #e8a33d;--bad: #e8643d;--mono: ui-monospace, "SF Mono", "IBM Plex Mono", "Roboto Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;touch-action:manipulation}#stage{position:fixed;inset:0;background:url(/assets/background-cave.webp) center 68% / cover no-repeat,var(--bg)}#stage-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.45) 100%),linear-gradient(rgba(0,0,0,.2),transparent 22%)}#puppet-track{position:absolute;bottom:4.5%;left:0;height:var(--puppet-h, 300px);aspect-ratio:var(--puppet-ar, 1.8);will-change:transform}#puppet-canvas{position:relative;width:100%;height:100%;display:block;z-index:1}#ground-shadow{position:absolute;bottom:-2.5%;left:22%;width:56%;height:7%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 45%,transparent 72%);filter:blur(2px)}#camera-card{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:10;width:clamp(208px,23vw,300px);background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 40px #00000080}#cam-header{padding:9px 12px 8px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.42em;text-indent:.42em;border-bottom:1px solid var(--line)}#cam-frame{position:relative;aspect-ratio:4 / 3;background:#000}#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}#cam.on{display:block}#cam-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff47;font-size:10px;letter-spacing:.34em;text-indent:.34em}#status-chip{position:absolute;left:6px;bottom:6px;z-index:2;display:flex;align-items:center;gap:7px;padding:4px 8px;background:#050505c7;border:1px solid var(--line-dim);font-size:9px;letter-spacing:.14em;color:var(--ink-dim);white-space:nowrap}#status-chip:before{content:"";flex:0 0 auto;width:7px;height:7px;background:#6a6f75}#status-chip[data-state=tracking]:before{background:var(--ok);box-shadow:0 0 6px #45d483b3}#status-chip[data-state=tracking]{color:var(--ink)}#status-chip[data-state=looking]:before,#status-chip[data-state=calibrating]:before,#status-chip[data-state=loading]:before{background:var(--warn);box-shadow:0 0 6px #e8a33db3}#status-chip[data-state=lost]:before,#status-chip[data-state=error]:before{background:var(--bad);box-shadow:0 0 6px #e8643db3}#ctrl-stack{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:10;display:flex;flex-direction:column;gap:8px;width:158px}.hbtn{appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-indent:.18em;padding:11px 12px;cursor:pointer;box-shadow:0 6px 24px #0006;transition:background .12s ease}.hbtn:hover{background:#ffffff24}.hbtn:active{background:#ffffff3d}.hbtn.icon{display:grid;place-items:center;padding:9px 12px;text-indent:0}.hbtn:disabled{opacity:.4;cursor:default}#btn-sound[data-on=false]{color:var(--ink-dim);border-color:var(--line-dim)}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#0000008c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.modal{width:min(560px,calc(100vw - 32px));background:#0b0b0b;border:1px solid var(--line-dim);outline:1px solid rgba(255,255,255,.08);outline-offset:-6px;padding:38px 42px 36px;box-shadow:0 24px 80px #000000a6;animation:modal-in .22s ease}@keyframes modal-in{0%{opacity:0;transform:translateY(8px)}}.modal h2{margin:0 0 22px;font-size:19px;font-weight:700;letter-spacing:.32em;color:var(--ink)}.modal p{margin:0 0 30px;font-size:12.5px;line-height:2;letter-spacing:.16em;color:var(--ink-dim)}.btn-double{appearance:none;display:block;width:100%;background:#000;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-6px;color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.3em;text-indent:.3em;padding:19px 16px;cursor:pointer;transition:background .12s ease,color .12s ease}.btn-double:hover{background:var(--ink);color:#000;outline-color:#000}#calib-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none}#calib-modal p{margin-bottom:26px;min-height:3em}#calib-bar{height:10px;border:1px solid var(--line);padding:2px;background:#000}#calib-fill{height:100%;width:0%;background:var(--ink);transition:width .18s linear}#calib-modal[data-state=hint] #calib-fill{background:var(--warn)}#calib-modal[data-state=done] #calib-fill{background:var(--ok)}#toast{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;z-index:40;padding:13px 18px;font-size:10.5px;letter-spacing:.14em;line-height:1.8;text-transform:uppercase;background:var(--panel);border:1px solid var(--line);max-width:min(540px,calc(100vw - 24px));text-align:center}#debug-panel{position:fixed;right:12px;bottom:12px;z-index:50;width:300px;max-height:72vh;overflow:auto;padding:10px;background:#080808e6;border:1px solid var(--line-dim);font-size:11px;font-family:var(--mono)}#debug-panel h3{margin:8px 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}#debug-panel .drow{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:6px;margin:3px 0}#debug-panel .drow label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#debug-panel input[type=range]{width:100%}#debug-panel .dbtns{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}#debug-panel button{font-size:10px;font-family:var(--mono);padding:4px 8px;border:1px solid var(--line-dim);background:transparent;color:var(--ink);cursor:pointer}@media(max-width:640px){#camera-card{width:clamp(150px,42vw,210px)}#cam-header{font-size:10px;padding:7px 10px 6px}#ctrl-stack{width:124px}.hbtn{font-size:8.5px;padding:9px 8px;letter-spacing:.14em;text-indent:.14em}.modal{padding:26px 22px 24px}.modal h2{font-size:15px;letter-spacing:.26em}.modal p{font-size:11px;line-height:1.9;letter-spacing:.12em}.btn-double{padding:15px 12px;font-size:11.5px}}