:root{--bg:#fff;--ink:#2b2230;--paper:#fdf6e3;--cream:#f3e9d2;--muted:#6e6474;--honey:#f2c46d;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fade:.15s}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.bar{z-index:10;pointer-events:none;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex;position:fixed;top:0;left:0;right:0}.bar>*{pointer-events:auto}.bar:before{content:"";z-index:-1;opacity:0;background:linear-gradient(#ffffffe6 40%,#fff0);transition:opacity .4s;position:absolute;top:0;bottom:-24px;left:0;right:0}body:-webkit-any([data-state=zoom-in],[data-state=play]) .bar:before{opacity:1}body:is([data-state=zoom-in],[data-state=play]) .bar:before{opacity:1}.tool{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:6px 8px;font-size:15px;text-decoration:none;transition:color .15s ease-out,background-color .15s ease-out;display:inline-flex}@media (hover:hover) and (pointer:fine){.tool:hover{color:var(--ink);background:#0000000f}}.tool:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.tool[aria-pressed=true]{color:var(--ink)}.tool .sound__on,.tool[aria-pressed=true] .sound__off{display:none}.tool[aria-pressed=true] .sound__on{display:inline}@media (max-width:520px){.bar{padding:8px}.tool{gap:6px;padding:6px;font-size:13px}}.scene{position:fixed;top:0;bottom:0;left:0;right:0}.gl,.gl canvas{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.gl{opacity:0;transition:opacity .6s}body:not([data-state=loading]) .gl{opacity:1}.placeholder{place-items:center;padding-bottom:12vh;transition:opacity .6s;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}body:not([data-state=loading]) .placeholder{opacity:0;pointer-events:none}.placeholder__body{aspect-ratio:1.077/1.782;background:linear-gradient(165deg,#3a3640,#2a2730 70%);border-radius:6% 6% 22%/4% 4% 13%;height:min(58vh,120vw);position:relative;box-shadow:0 30px 60px #00000040}.placeholder__screen{background:#121114;border-radius:4% 4% 18%;height:46%;position:absolute;top:6%;left:9%;right:9%}.placeholder__screen:after{content:"";background:#3d3240;animation:1.6s ease-in-out infinite alternate placeholder;position:absolute;top:13%;bottom:18%;left:15%;right:15%}@keyframes placeholder{to{background:#4b3f50}}.game{opacity:0;pointer-events:none;transition:opacity var(--fade) linear;background:#3d3240;border:0;display:block;position:absolute;top:0;left:0}body[data-state=play] .game{opacity:1;pointer-events:auto}body[data-state=fallback] .bar,body[data-state=fallback] .gl,body[data-state=fallback] .placeholder,body[data-state=fallback] .prompt{display:none}body[data-state=fallback] .game{opacity:1;pointer-events:auto;width:100%;height:100%;top:0;bottom:0;left:0;right:0}.prompt,.esc-hint{text-align:center;color:var(--muted);pointer-events:none;margin:0;transition:opacity .3s;position:absolute;left:0;right:0}.prompt{top:var(--prompt-y,82vh);opacity:0;font-size:18px}body[data-state=idle] .prompt{opacity:1}.esc-hint{z-index:11;opacity:0;font-size:14px;top:20px}body[data-state=play]:not(.is-touch) .esc-hint{opacity:.85}kbd{min-width:2.2em;font:inherit;color:var(--ink);background:var(--cream);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:6px;margin:0 .25em;padding:.12em .6em .18em;font-size:.85em;line-height:1.2;display:inline-block;transform:translateY(-2px)}.only-touch{display:none}body.is-touch .only-touch{display:inline}body.is-touch .only-keys{display:none}.pad{z-index:5;height:calc(164px + env(safe-area-inset-bottom));padding:10px 16px calc(34px + env(safe-area-inset-bottom));background:var(--bg);touch-action:none;border-top:1px solid #e2e2e2;justify-content:space-between;align-items:center;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 24px #0000001f}body.is-touch[data-state=play] .pad{display:flex}.pad button{font:inherit;color:var(--cream);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border:0;padding:0}.pad__dpad{flex:none;width:114px;height:114px;position:relative}.pad__dir{background:#2f2f36;width:38px;height:38px;position:absolute;box-shadow:0 3px #0e0e10}.pad__dir.is-down,.pad__btn.is-down,.pad__pill.is-down{filter:brightness(1.25);transform:translateY(2px);box-shadow:0 1px #0e0e10}.pad__dir--up{border-radius:6px 6px 0 0;top:0;left:38px}.pad__dir--down{border-radius:0 0 6px 6px;top:76px;left:38px}.pad__dir--left{border-radius:6px 0 0 6px;top:38px;left:0}.pad__dir--right{border-radius:0 6px 6px 0;top:38px;left:76px}.pad__dpad:after{content:"";pointer-events:none;background:#2f2f36;width:38px;height:38px;position:absolute;top:38px;left:38px}.pad__mid{left:50%;bottom:calc(8px + env(safe-area-inset-bottom));gap:10px;display:flex;position:absolute;transform:translate(-50%)}.pad__pill{letter-spacing:.08em;text-transform:uppercase;color:#a99db0;background:#34343a;border-radius:999px;padding:5px 12px;font-size:12px;box-shadow:0 3px #0e0e10}.pad__ab{gap:12px;padding-right:4px;display:flex;transform:rotate(-20deg)}.pad__btn{background:#a3245b;border-radius:50%;width:54px;height:54px;font-size:18px;font-weight:600;box-shadow:0 3px #5c1233}.pad__btn--b{margin-top:26px}@media (prefers-reduced-motion:reduce){.placeholder__screen:after{animation:none}}