:root{color-scheme:light;--ink:#213a50;--muted:#53677a;--paper:#fffdf7;--yellow:#ffdf83;--blue:#d4ebf3;--pink:#f8dfdf;--line:#cfcec3;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:#f3f0e5}*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(#8f9ba01c .6px,transparent .6px);background-size:8px 8px}main{width:min(940px,100%);margin:auto;padding:24px 20px 36px}header{padding:8px 4px 18px}h1{font-family:'Segoe Print','Comic Sans MS',cursive;font-size:clamp(2rem,6vw,3.5rem);line-height:1.2;letter-spacing:-1px;margin:8px 0 14px}h1 span{background:linear-gradient(transparent 65%,#ffdf83 65%)}h2{font-size:1.2rem;line-height:1.4;margin:8px 0 12px}p{line-height:1.6;margin:10px 0}.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:750;color:var(--muted)}.paper{background:var(--paper);border:1.5px solid var(--ink);border-radius:10px 15px 12px 6px;padding:24px;box-shadow:4px 5px 0 #213a5010}.small{font-size:.88rem;color:var(--muted)}button{font:inherit;font-weight:650;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:9px;padding:11px 16px;min-height:48px;min-width:48px;cursor:pointer}button:hover{background:var(--blue)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a54c22;outline-offset:4px}button:disabled{opacity:.48;cursor:default}button.primary{background:var(--yellow);box-shadow:2px 3px 0 var(--ink)}button[aria-pressed=true]{background:var(--blue);box-shadow:inset 0 -3px var(--ink)}.mode-buttons,.view-buttons,.lab-top,.situations{display:flex;gap:10px;flex-wrap:wrap}.mode-buttons{margin:22px 0}.lab-top{align-items:center;margin:12px 0}.lab-top strong{margin-right:auto}.lab-top button{font-size:.85rem}.situations{margin:16px 0}.situations button{flex:1;padding-inline:8px}.view-buttons{margin:12px 0}.view-buttons button{flex:1;font-size:.85rem}.task{margin:22px 0}.task>button{margin:8px 8px 12px 0}#stage{position:relative;isolation:isolate;width:100%;aspect-ratio:4/3;max-height:540px;overflow:hidden;border:2px solid var(--ink);border-radius:16px;background:#e4edf1;touch-action:pan-y}#stage canvas{position:absolute;inset:0;z-index:1;touch-action:none}#stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}#stage #tracking{position:absolute;bottom:12px;left:12px;right:12px;padding:10px 12px;border-radius:8px;background:#fffdf7ed;z-index:2;font-size:.9rem}#render-error{padding:20px}#lighting-note{font-size:.85rem;color:var(--muted)}.model-captions{display:flex;flex-direction:column;gap:5px;margin:12px 2px;font-size:.86rem}#observation{border-top:1px dashed var(--line);padding-top:12px;margin-top:10px}#explanation{background:var(--blue);padding:16px;border-radius:9px;font-size:1.05rem}.legend{font-size:.84rem;display:flex;flex-wrap:wrap;gap:12px;margin:14px 0;color:var(--muted)}details{background:#e4eddf;padding:18px;border-radius:10px;line-height:1.6;margin:16px 0}summary{cursor:pointer;font-weight:650}details svg{max-width:100%;font-size:12px;fill:var(--ink)}.quiet{background:transparent;border-style:dashed}#status{font-weight:600;min-height:1em}footer{border-top:1px solid var(--line);padding-top:16px;margin-top:28px;font-size:.85rem;color:var(--muted)}a{color:#255c77}a:hover{text-decoration-thickness:2px}[hidden]{display:none!important}@media(max-width:540px){main{padding:16px 14px 28px}.paper{padding:18px}.mode-buttons{display:grid}.lab-top{gap:6px}.lab-top strong{font-size:.85rem}.lab-top button{padding:9px}.view-buttons{gap:5px}.view-buttons button{padding:8px 5px;font-size:.78rem}#stage{max-height:48vh}.task>button{width:100%;margin-right:0}h2{font-size:1.1rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.body-label{position:absolute;z-index:2;transform:translate(-50%,-100%);font-size:14px;line-height:1.3;font-weight:700;padding:3px 8px;background:#fffdf7ed;border-radius:5px;pointer-events:none;color:#213a50;white-space:nowrap}

.demo-main{width:min(1200px,100%)}.demo-header h1{font-size:clamp(1.7rem,4vw,2.7rem);margin:4px 0 10px}.demo-header{padding-bottom:2px}.demo-header p{margin:5px 0}.demo-main #stage{max-height:60vh;min-height:290px;aspect-ratio:16/9}.demo-main .lab-top a{font-weight:650;padding:12px}.demo-caption{background:#fffdf7;border-radius:12px;padding:14px 20px;margin:12px 0}.demo-caption h2{margin:0}.demo-caption p{margin:4px 0}.demo-main #observation{border:0}.demo-main #explanation{background:transparent;padding:0;font-size:1rem}.demo-main details video{width:100%;max-height:65vh}.demo-main footer{margin-top:12px}.demo-main .situations{margin:10px 0}.demo-main .body-label{font-size:15px}@media(max-width:540px){.demo-main #stage{aspect-ratio:4/3;min-height:260px}.demo-main .lab-top a{font-size:.85rem}.demo-main .lab-top strong{width:100%}.demo-main{padding-top:10px}}

#status:not([hidden]){background:#fff3cd;border:2px solid #8b621b;border-radius:10px;padding:14px 18px;margin:12px 0;color:#49350e}#status.camera-error{background:#fff0e9;border-color:#a34426;color:#712c17}

#stage{background:#102239}#stage .camera-frame{z-index:0;touch-action:auto}#stage .model-canvas{z-index:1}#stage.ar-active{background:#122235}.demo-main #stage.ar-active{max-width:calc(60vh * 4 / 3);aspect-ratio:4/3;max-height:none;min-height:0;margin-inline:auto}.shadow-key{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;margin:8px 0;color:#46586e}.shadow-key span:before{content:'';display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px;background:#734bbb}.shadow-key span+span:before{background:#c2a9ed}@media(max-width:540px){.demo-main #stage.ar-active{max-width:100%;aspect-ratio:4/3}}