:root{color:#edf0eb;font-synthesis:none;background:#0c0e0f;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#trace-app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#0c0e0f}canvas{cursor:crosshair;display:block;position:fixed;inset:0}button{font:inherit}.story{z-index:2;pointer-events:none;position:fixed;top:max(62px,clamp(22px,4vw,52px));left:clamp(22px,4.5vw,68px)}.brand{color:#f3f4ef;letter-spacing:.3em;margin-bottom:20px;font-size:13px;font-weight:760}.brand span{color:#ddff68}.story h1{letter-spacing:-.045em;max-width:410px;margin:0;font-size:clamp(27px,3.6vw,54px);font-weight:350;line-height:.98}.story p{color:#929b99;letter-spacing:.025em;margin:14px 0 0;font-size:13px}.demo-switcher{pointer-events:auto;gap:7px;width:min(330px,72vw);margin-top:24px;display:grid}.demo-switcher a{color:#8b9692;background:#0c0e0f66;border-left:1px solid #ffffff1c;gap:3px;padding:8px 10px;text-decoration:none;display:grid}.demo-switcher a:hover,.demo-switcher a:focus-visible,.demo-switcher a.active{color:#f1f4ef;border-left-color:#ddff68;outline:none}.demo-switcher strong{letter-spacing:.12em;font-size:10px;font-weight:500}.demo-switcher span{color:#68716f;letter-spacing:.02em;font-size:10px}.demo-switcher a:hover span,.demo-switcher a:focus-visible span,.demo-switcher a.active span{color:#aab4ad}.input-status{z-index:2;color:#cbd1cd;letter-spacing:.1em;pointer-events:none;align-items:flex-start;gap:10px;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex;position:fixed;top:max(62px,clamp(24px,4vw,52px));right:clamp(22px,4.5vw,68px)}.input-status strong,.input-status small{display:block}.input-status small{color:#69716f;letter-spacing:.04em;margin-top:3px;font-size:9px}.input-status [data-position-source],.input-status [data-orientation-source]{color:#a5b4b0;letter-spacing:.08em;font-size:8px}.status-light{background:#ddff68;border-radius:50%;width:6px;height:6px;margin-top:4px;box-shadow:0 0 12px #ddff68aa}.input-status[data-state=connecting] .status-light{background:#79e7ff;box-shadow:0 0 12px #79e7ffaa}.input-status[data-state=error] .status-light{background:#ff9d73;box-shadow:0 0 12px #ff9d73aa}.signal-flow{z-index:2;color:#5f6866;letter-spacing:.12em;pointer-events:none;width:225px;font:9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:fixed;bottom:clamp(25px,4vw,48px);right:clamp(22px,4.5vw,68px)}.signal-flow div{border-top:1px solid #ffffff12;align-items:center;padding:10px 0;transition:color .18s;display:grid}.signal-flow [data-signal=input]{grid-template-columns:1fr 32px 1fr}.signal-flow [data-signal=haptic]{grid-template-columns:1fr 26px .7fr 64px}.signal-flow i{color:#46504d;text-align:center;font-style:normal;transition:color .18s,transform .18s}.signal-flow strong{font-weight:550}.signal-flow b{color:#46504d;opacity:.28;font-weight:500;transition:color .18s,opacity .18s,transform .18s}.signal-flow .active{color:#eaff91}.signal-flow .active i{color:#ddff68;transform:translate(3px)}.signal-flow .active b{color:#ddff68;opacity:1;transform:translate(3px)}.pressure{z-index:2;color:#a8b4aa;letter-spacing:.1em;pointer-events:none;background:linear-gradient(90deg,#1b2220d9,#111615a6);border-left:1px solid #60705d;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;width:258px;padding:12px 14px 14px;font:10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:fixed;bottom:clamp(25px,4vw,48px);left:clamp(22px,4.5vw,68px)}.pressure-track{background:#354039;grid-column:1/-1;height:8px;overflow:hidden}.pressure-track i{background:#ddff68;width:42%;height:100%;transition:width .12s;display:block;box-shadow:0 0 10px #ddff6877}.pressure strong{color:#eaff9a;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:22px;font-weight:500}.haptic-status{z-index:3;color:#65706e;letter-spacing:.13em;pointer-events:none;background:linear-gradient(90deg,#182022cc,#0000);border-left:1px solid #496164;min-width:148px;padding:11px 13px;font:8px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:fixed;top:50%;right:clamp(22px,4.5vw,68px);transform:translateY(-50%)}.haptic-status strong{color:#b7c0bc;font-size:13px;font-weight:500}.haptic-status small{color:#4f5957;font-size:7px}.haptic-status[data-event=contact] strong{color:#efffaf}.haptic-status[data-event=snap] strong{color:#b7f5ff;font-size:11px}.haptic-status.pulse{animation:.7s ease-out status-pulse}@keyframes status-pulse{0%{background:linear-gradient(90deg,#66752fcc,#0000);border-color:#ddff68;transform:translateY(-50%)translate(-5px)}to{border-color:#496164}}.controls{z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;background:#111415b8;border:1px solid #ffffff1a;border-radius:2px;justify-items:center;gap:11px;min-width:610px;padding:18px 24px 16px;transition:opacity .5s,padding .5s,background .5s;display:grid;position:fixed;bottom:clamp(66px,9vw,112px);left:50%;transform:translate(-50%);box-shadow:0 12px 50px #0004}.instruction-title{color:#f0f3ea;letter-spacing:.14em;font:550 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.instruction-detail{color:#8c9692;letter-spacing:.08em;flex-wrap:wrap;justify-content:center;gap:9px 18px;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}.instruction-detail span{white-space:nowrap}.compact-guide{grid-template-columns:repeat(4,auto);gap:22px;display:none}.compact-guide span{color:#68716f;white-space:nowrap;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.compact-guide b{color:#aeb6b2;letter-spacing:.11em;margin-bottom:4px;font-size:7px;font-weight:500;display:block}.controls.completed{opacity:.28;background:#1114158c;min-width:0;padding:10px 14px}.controls.completed .instruction-title,.controls.completed .instruction-detail{display:none}.controls.completed .compact-guide{display:grid}.clear-button,.device-controls{z-index:4;position:fixed;bottom:116px;right:clamp(22px,4.5vw,68px)}.device-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px;max-width:560px;display:flex;bottom:150px}.webcam-status{color:#858e8a;letter-spacing:.12em;align-items:center;gap:6px;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}.webcam-status i{background:#58605d;border-radius:50%;width:6px;height:6px}.webcam-status b{font-weight:500}.webcam-status[data-state=searching] i{background:#ffcf73;box-shadow:0 0 9px #ffcf7388}.webcam-status[data-state=tracking]{color:#eaff9a}.webcam-status[data-state=tracking] i{background:#ddff68;box-shadow:0 0 10px #ddff68aa}.webcam-preview{z-index:3;pointer-events:none;background:#090b0c;border:1px solid #ddff6855;width:192px;height:144px;position:fixed;inset:auto clamp(22px,4.5vw,68px) 205px auto;transform:scaleX(-1);box-shadow:0 10px 32px #0008}.webcam-preview[hidden]{display:none}.input-modes{z-index:2;color:#5f6866;letter-spacing:.08em;text-align:right;pointer-events:none;gap:5px;font:7px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:fixed;bottom:184px;right:clamp(22px,4.5vw,68px)}.input-modes span{justify-content:flex-end;gap:9px;display:flex}.input-modes strong{color:#aab2ae;font-weight:500}.clear-button,.device-controls button{color:#aab2ae;letter-spacing:.14em;cursor:pointer;background:#111415a8;border:1px solid #fff2;border-radius:2px;padding:7px 10px;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.clear-button:hover,.clear-button:focus-visible,.device-controls button:hover,.device-controls button:focus-visible{color:#efffbd;border-color:#ddff6877;outline:none}.device-controls button:disabled{color:#626a67;cursor:default;border-color:#ffffff12}.device-controls button[hidden]{display:none}.mode-label{z-index:2;color:#59615f;letter-spacing:.12em;pointer-events:none;font:8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;position:fixed;top:50%;left:clamp(22px,4.5vw,68px)}.scene-label{z-index:2;color:#68716f;letter-spacing:.13em;pointer-events:none;font:7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;position:fixed}.scene-label span{color:#414947;margin-top:5px;display:block}.object-label{top:31%;left:69%}.plane-label{bottom:18%;left:53%}@media (width<=720px){.story h1{max-width:260px}.input-status small,.scene-label,.mode-label{display:none}.controls{gap:9px;min-width:calc(100% - 44px);padding:14px 12px;bottom:74px}.instruction-title{font-size:10px}.instruction-detail{flex-wrap:wrap;justify-content:center;gap:8px 12px;font-size:7px}.compact-guide{grid-template-columns:repeat(2,auto);gap:10px 24px}.signal-flow{width:190px}.pressure{width:220px;padding:10px 12px 12px}.haptic-status{top:auto;bottom:150px;right:22px;transform:none}.haptic-status.pulse{border-color:#ddff68;animation:none}.clear-button{bottom:206px}.device-controls{bottom:240px}.input-modes{bottom:274px;right:22px}}