:root{color-scheme:dark;--ink:#0d1b2a;--deep:#1b263b;--paper:#e2dcc8;--coral:#b66449;--soft:#e6a08b;--muted:#a7b3bd;--line:rgba(226,220,200,.22)}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--soft)}button{font:inherit;cursor:pointer;background:transparent;color:inherit;border:1px solid var(--line);padding:11px 15px;min-height:44px}button:hover{background:var(--deep)}button:disabled{opacity:.4;cursor:wait}:focus-visible{outline:2px solid var(--soft);outline-offset:3px}[hidden]{display:none!important}.topbar{min-height:60px;padding:8px 3vw;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);font-size:12px}.topbar a{min-height:44px;display:flex;align-items:center}.brand{font-weight:650;letter-spacing:.09em}.brand span{margin-left:20px;font-size:10px;color:var(--muted);font-weight:400}main{max-width:1800px;margin:auto;padding:24px 3vw 0}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin:0 0 10px}h1{font-size:clamp(34px,4vw,62px);font-weight:350;line-height:1.08;letter-spacing:-.045em;margin:0}.intro>p{font-size:13px;color:var(--muted)}.intro>p span{display:block;font-size:11px;margin-top:8px}.scene-frame{border:1px solid var(--line);background:var(--ink)}.stage{position:relative;height:clamp(330px,calc(100svh - 300px),800px)}canvas{display:block;width:100%;height:100%;touch-action:none}.scene-meta{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);pointer-events:none}.scene-meta span:first-child{padding:8px 11px;background:var(--ink);border-left:2px solid var(--coral);color:var(--paper)}.attribution{position:absolute;left:20px;bottom:12px;margin:0;font-size:10px;color:var(--muted);pointer-events:none;background:var(--ink);padding:4px 0}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink);margin:0}.toolbar{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}.modes,.tools{display:flex;gap:0}.modes button{min-height:56px;border:0;border-right:1px solid var(--line)}.modes button[aria-pressed=true]{background:var(--deep);box-shadow:inset 0 -3px var(--coral)}.tools{align-items:center;padding:6px;gap:8px}.tools button,.tools a{font-size:12px;border-color:transparent;min-height:44px;padding:11px 12px;display:flex;align-items:center}.walk-help{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:24px 0}.walk-help h2{font-size:27px;font-weight:400;letter-spacing:-.03em;margin:0 0 12px}.walk-help p:not(.eyebrow){font-size:14px;line-height:1.6;max-width:640px;margin:0}.walk-help #walk-status{font-size:12px;color:var(--soft);min-height:20px;margin-top:4px}.walk-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:48px 48px;gap:6px;flex-shrink:0}.walk-pad button{font-size:21px;touch-action:none;user-select:none}.walk-pad button:first-child{grid-column:2}.walk-pad button:nth-child(2){grid-column:1}.walk-pad button.is-held{background:var(--coral)}.model-info{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{padding:20px 0;cursor:pointer;font-size:14px}summary span{float:right;font-size:11px;color:var(--muted)}.model-info>div{padding:0 24px 24px;max-width:850px;font-size:13px;line-height:1.7;color:var(--muted)}.model-info a{color:var(--paper);display:inline-block;padding:12px 0}footer{display:flex;justify-content:space-between;gap:24px;padding:28px 0;color:var(--muted);font-size:11px}#twin-error{border:1px solid var(--coral);padding:16px;line-height:1.6}.scene-frame:fullscreen{display:flex;flex-direction:column}.scene-frame:fullscreen .stage{flex:1;height:auto}.scene-frame:fullscreen .toolbar{flex-shrink:0}
@media(max-width:800px){.toolbar{flex-wrap:wrap;gap:0}.modes{flex:1}.modes button{flex:1}.tools{margin-left:auto}.walk-help{align-items:start}.brand span{display:none}}
@media(max-width:600px){.topbar{padding:6px 18px;font-size:11px}main{padding:20px 16px 0}.intro{margin-bottom:18px;gap:12px}.intro .eyebrow{font-size:10px}.intro>p{font-size:11px}.stage{height:clamp(280px,calc(100svh - 350px),470px)}.modes{width:100%;flex-basis:100%}.modes button{min-height:48px;font-size:13px}.tools{width:100%;justify-content:space-between;border-top:1px solid var(--line);gap:0;padding:4px}.tools button,.tools a{font-size:10px;padding:8px 5px}.walk-help{gap:12px;padding:20px 0}.walk-help h2{font-size:23px}.walk-help p:not(.eyebrow){font-size:12px}.walk-pad{grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:4px}.walk-pad button{padding:6px}.walk-help>div:first-child{min-width:0}.scene-meta{left:12px;right:12px;top:12px;font-size:10px}.attribution{left:12px;font-size:9px}footer span{max-width:140px;text-align:right}.model-info>div{padding:0 0 20px}}

.stage .walk-pad{position:absolute;right:20px;bottom:42px;z-index:2}.stage .walk-pad button{background:var(--ink)}.stage .walk-pad button.is-held{background:var(--coral)}@media(max-width:600px){.stage .walk-pad{right:12px;bottom:40px}}

.desktop-controls{position:absolute;left:20px;right:20px;bottom:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.desktop-controls span{font-size:12px;padding:9px 12px;background:var(--ink);border-left:2px solid var(--coral)}.desktop-controls button{font-size:12px;background:var(--ink);pointer-events:auto}.walk-crosshair{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--paper);font-size:20px;pointer-events:none}.scene-frame[data-pointer-locked=true] .walk-crosshair{display:block}canvas.is-walking{cursor:grab}canvas.is-walking:active{cursor:grabbing}
