:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#172a43}body{font-family:"Songti TC","Noto Serif TC",serif}#room{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}#room.dragging{cursor:grabbing}#room:focus-visible{outline:2px solid #fff0b8;outline-offset:-5px}#still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 50%;image-rendering:pixelated}canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}#sparkles{pointer-events:none}.controls{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:3}.controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffecc751;background:#1f253a80;color:#fff0cb;backdrop-filter:blur(8px);border-radius:8px;cursor:pointer;transition:background .2s}.controls button:hover,.controls button:focus-visible{background:#2c2d43dd;outline:2px solid #ffe3a1;outline-offset:3px}.controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}.hint{position:fixed;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:10px 16px;color:#fff3d5;background:#1422399c;border:1px solid #f8e6bc30;font-size:14px;letter-spacing:.12em;white-space:nowrap;border-radius:4px;pointer-events:none;transition:opacity 1s;z-index:2}.hint.hidden{opacity:0}.mobile-hint{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){.desktop-hint{display:none}.mobile-hint{display:inline}.hint{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 58px);font-size:14px;letter-spacing:.06em}.controls{gap:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}