*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#101820;color:#edf0f1;font-family:Arial,Helvetica,sans-serif}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff19}header a{font-size:18px;font-weight:700;text-decoration:none;color:inherit;letter-spacing:.04em}header a span{font-size:12px;color:#9aa5ae;margin-left:10px}.preview,.eyebrow{font-size:11px;letter-spacing:.16em;color:#ed923d}main{max-width:1560px;margin:auto;padding:38px 5vw 28px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{margin:0 0 12px}h1{font-size:clamp(32px,4.4vw,64px);font-weight:500;letter-spacing:-.055em;margin:0}.intro>p{color:#acb7c0;font-size:15px;line-height:1.65}.workcell{position:relative;background:#101923;overflow:hidden;border-radius:3px;aspect-ratio:1.95}canvas{width:100%;height:100%;display:block;touch-action:pan-y}.scene-header,.scene-footer{position:absolute;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:#dce5ec;z-index:1;font-size:10px;letter-spacing:.14em}.scene-header{top:22px}.scene-header i{display:inline-block;width:6px;height:6px;background:#c86922;border-radius:50%;margin-right:8px}.scene-footer{bottom:20px}.scene-footer #phase{font-size:19px;letter-spacing:-.02em;font-weight:600}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#101923;color:#dce5ec}#loading[hidden]{display:none}.timeline{display:flex;gap:5px;padding-top:18px}.timeline span{flex:1;border-top:2px solid #36424d;color:#778591;padding:12px 0;font-size:11px}.timeline b{font-weight:400;margin-left:7px}.timeline .active{border-color:#ed923d;color:#f6b16f}.controls{display:flex;justify-content:space-between;gap:15px;padding:9px 0 20px;border-bottom:1px solid #ffffff19}.controls>div{display:flex;gap:8px}button{font:inherit;font-size:12px;padding:12px 16px;color:#dce1e5;border:1px solid #52606c;background:transparent;cursor:pointer;border-radius:3px;min-height:44px}button:hover,button:focus-visible{border-color:#f0a05b;background:#ffffff09}button:focus-visible{outline:2px solid #f0a05b;outline-offset:3px}button[aria-pressed=true]{border-color:#f0a05b;color:#ffc28d}.note{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#a5b1bb;font-size:12px}.note span{font-size:10px;color:#82909c}@media(max-width:600px){header{height:60px;padding:0 20px}.preview{display:none}main{padding:26px 16px}.intro{align-items:start;margin-bottom:22px}.intro>p{display:none}.workcell{aspect-ratio:.91;margin:0 -16px;border-radius:0}.scene-header,.scene-footer{left:18px;right:18px}.scene-header{font-size:8px;top:18px}.scene-footer #phase{font-size:16px}.scene-footer #direction{font-size:8px}.timeline{gap:4px}.timeline span{font-size:9px}.timeline b{display:block;margin:6px 0 0;font-size:10px}.controls{flex-direction:column;gap:10px}.controls>div{display:flex}.controls button{flex:1;padding:10px 8px}.note{align-items:start;flex-direction:column;gap:0;line-height:1.6}.note p{margin-bottom:6px}}

canvas{cursor:grab}canvas.dragging{cursor:grabbing}canvas:focus-visible{outline:2px solid #ed923d;outline-offset:-3px}

/* Babylon assigns touch-action inline; preserve vertical page scrolling. */
canvas{touch-action:pan-y!important}