:root{color-scheme:light;--paper:#f3efae;--ink:#11110d;font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}main{height:100svh;min-height:400px;overflow:hidden;position:relative;isolation:isolate}
button{-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}button{touch-action:manipulation}
.scene{position:absolute;inset:0 0 21%;width:100%;height:79%;padding:0;border:0;background:transparent;cursor:crosshair;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#object{z-index:1}
.controls{position:absolute;z-index:4;top:max(28px,env(safe-area-inset-top));right:max(30px,env(safe-area-inset-right));display:flex;gap:12px}
.control{width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.control:hover{background:#fffacb;transform:rotate(-8deg)}.control svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sound-on,.play{display:none}#sound[aria-pressed=true] .sound-on{display:block}#sound[aria-pressed=true] .sound-off{display:none}#motion[aria-pressed=true] .pause{display:none}#motion[aria-pressed=true] .play{display:block}.pause{stroke-width:3.5}.play{fill:currentColor;stroke:none}
footer{position:absolute;inset:auto 2.5vw 2.4vw;display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;pointer-events:none;z-index:3}
h1{font-size:19.8vw;line-height:.78;letter-spacing:-1.55vw;font-weight:900;margin:0 0 0 -.7vw;white-space:nowrap;user-select:none}
#renew{pointer-events:auto;background:none;border:0;padding:0;width:5vw;height:5vw;min-width:44px;min-height:44px;cursor:pointer;flex-shrink:0;transition:transform .3s}#renew:hover{transform:translate(3px,-3px)}#renew svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.touch-ring{position:absolute;width:32px;height:32px;border:1px solid var(--ink);border-radius:50%;opacity:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%)}.touch-ring.pulse{animation:pulse .9s ease-out}
@keyframes pulse{0%{opacity:.6;scale:.4}100%{opacity:0;scale:4}}
@media(max-width:600px){main{min-height:360px}.scene{inset:6% 0 15%;height:79%}.controls{top:max(20px,env(safe-area-inset-top));right:20px;gap:10px}.control{width:42px;height:42px}footer{bottom:max(28px,env(safe-area-inset-bottom));left:5vw;right:5vw;gap:0}h1{font-size:19vw;letter-spacing:-1.6vw}#renew{min-width:30px;min-height:30px;width:6vw;height:6vw;margin-bottom:-2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}