*{box-sizing:border-box}body{margin:0;background:#eee9df;color:#302e29;font-family:system-ui,sans-serif}header{padding:22px 5%;display:flex;justify-content:space-between}a{color:inherit}header a:first-child{font-size:25px;font-weight:700;text-decoration:none}main{max-width:1440px;margin:auto;padding:0 3% 25px}.intro{padding:12px 0 24px}h1{font-size:clamp(23px,3vw,38px);margin:8px 0}p{line-height:1.8;margin:0}.eyebrow{font-size:11px;letter-spacing:.22em;color:#8e724e}.viewer{height:65svh;min-height:330px;max-height:850px;position:relative;overflow:hidden;background:#342c23;border-radius:8px}#stage{position:absolute;inset:0;overflow:hidden;outline-offset:-4px}#stage.active{cursor:grab;touch-action:none}#stage.active:active{cursor:grabbing}#scene{position:absolute;left:50%;top:50%;max-width:none;user-select:none;pointer-events:none;transform-origin:center;will-change:transform}.status{position:absolute;top:16px;left:16px;color:white;background:#29231ab8;border-radius:20px;padding:8px 14px;font-size:12px;pointer-events:none}.controls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;white-space:nowrap;background:#fffdf3f2;padding:6px;border-radius:30px}.controls[hidden]{display:none}button{border:0;border-radius:25px;background:transparent;color:#41392e;padding:10px 13px;cursor:pointer;font:inherit;font-size:13px}button:hover{background:#ded3bc}button:focus-visible{outline:3px solid #a97b37;outline-offset:2px}.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 28px;background:#fffdf3f5;box-shadow:0 8px 30px #0004;font-weight:700;font-size:17px;white-space:nowrap}.start span{display:block;font-size:11px;font-weight:400;margin-top:5px;letter-spacing:.1em}.note{font-size:12px;color:#776e60;margin-top:12px}.viewer:fullscreen{height:100vh;max-height:none;border-radius:0}.embedded header,.embedded .intro,.embedded .note{display:none}.embedded main{padding:0;max-width:none}.embedded .viewer{height:100svh;max-height:none;min-height:0;border-radius:0}@media(max-width:600px){header{padding:15px 5%}.viewer{height:62svh}.controls{gap:0}.controls button{padding:10px}.status{font-size:11px;left:10px;top:10px}}

canvas{width:100%;height:100%;display:block;cursor:default}canvas.active{cursor:grab;touch-action:none}canvas.active:active{cursor:grabbing}canvas:focus-visible{outline:3px solid #e3b45f;outline-offset:-4px}#fallback{position:absolute;inset:0;background:#eee9df;overflow:auto}#fallback img{width:100%;display:block}#fallback p{padding:12px;font-size:12px}.controls button[aria-pressed=true]{background:#ded3bc}@media(max-width:450px){.controls{gap:0;padding:4px}.controls button{padding:10px 8px;font-size:12px}}

@media(max-width:550px){.controls{max-width:96%;flex-wrap:wrap;justify-content:center;border-radius:15px;width:max-content}.controls button{padding:9px 7px;font-size:11px}}