*{box-sizing:border-box}html,body{color:#e6e9f5;background:#0f1917;height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#app canvas{touch-action:none;display:block;position:absolute;inset:0}#grain{pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#hint{text-align:center;pointer-events:none;width:calc(100vw - 32px);max-width:720px;transition:opacity .4s;animation:.7s cubic-bezier(.2,.8,.3,1.2) .3s backwards hint-pop;position:fixed;top:14%;left:50%;transform:translate(-50%,-50%)}#hint p{margin:0}#hint .hint-main{letter-spacing:.01em;color:#e6e9f5;text-shadow:0 0 24px #8cc4e473;font-size:clamp(22px,4vw,34px);font-weight:600}#hint .hint-sub{color:#e6e9f5b3;margin-top:10px;font-size:clamp(16px,2.4vw,20px)}#hint .hint-sub strong{color:#8cc4e4}#hint.started .hint-main{display:none}#hint.started{opacity:.45}@keyframes hint-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}#controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#121e1bb8;border:1px solid #ffffff14;border-radius:14px;gap:12px;padding:10px;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}#controls button{min-width:96px;font:inherit;color:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff24;border-radius:10px;padding:10px 18px;font-size:15px;font-weight:600}#controls button:hover:not(:disabled){background:#ffffff29}#controls button:disabled{opacity:.4;cursor:default}#controls .toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:0 8px;font-size:15px;display:flex}#controls .toggle input{accent-color:#8cc4e4;cursor:pointer;width:16px;height:16px;margin:0}#info-dialog{color:#e6e9f5;background:#101a18f5;border:1px solid #ffffff1f;border-radius:16px;width:min(640px,100vw - 32px);max-height:min(80vh,760px);padding:0;line-height:1.55;box-shadow:0 24px 64px #00000080}#info-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#050a0999}.dialog-body{padding:24px 28px 28px}.dialog-body>:last-child{margin-bottom:0}#info-dialog h2{color:#8cc4e4;margin-top:4px;margin-bottom:12px;font-size:22px}#info-dialog h3{margin-top:22px;margin-bottom:8px;font-size:16px}#info-dialog p,#info-dialog ul{color:#e6e9f5d9;font-size:15px}#info-dialog ul{padding-left:20px}#info-dialog li+li{margin-top:8px}#info-dialog strong{color:#e6e9f5}.dialog-close{float:right;margin:-12px -16px 0 12px;position:sticky;top:0}.dialog-close button{width:36px;height:36px;color:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff24;border-radius:50%;font-size:24px;line-height:1}.dialog-close button:hover{background:#ffffff29}#controls #sway[aria-pressed=true]{color:#1a252a;background:linear-gradient(#efe690,#c3c236);border-color:#e3da6e}#controls #play{background:#8cc4e438;border-color:#8cc4e480}#perf{color:#e6e9f5d9;pointer-events:none;z-index:10;background:#0c141499;border-radius:6px;padding:4px 8px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;position:fixed;top:12px;left:12px}#legend{color:#e6e9f5bf;pointer-events:none;background:#121e1ba6;border:1px solid #ffffff14;border-radius:10px;width:160px;padding:8px 10px;font-size:12px;position:fixed;top:24px;right:32px}#legend .bar{border-radius:5px;height:10px;margin:4px 0}#legend .labels{justify-content:space-between;display:flex}#info-dialog kbd{font:inherit;border:1px solid #ffffff40;border-radius:4px;padding:1px 5px;font-size:13px}.pad{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-user-select:none;user-select:none;background:#121e1bb8;border:1px solid #ffffff14;border-radius:16px;grid-template-rows:18px repeat(3,52px);grid-template-columns:repeat(3,52px);gap:6px;padding:10px;display:grid;position:fixed;bottom:28px}#move-pad{left:28px}#rotate-pad{right:28px}.pad-label{text-align:center;letter-spacing:.08em;text-transform:uppercase;color:#e6e9f599;grid-area:1/1/auto/4;font-size:12px}.pad button{color:#d8e6ea;cursor:pointer;touch-action:none;background:linear-gradient(#3a4d56,#22303a);border:1px solid #8fa4aa59;border-radius:12px;place-items:center;padding:0;display:grid}.pad button svg{fill:currentColor;width:26px;height:26px}.pad button svg .arc{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round}.pad button:hover{border-color:#8fa4aab3}.pad button.active{color:#1a252a;background:linear-gradient(#d8d45a,#8ea331);border-color:#e3da6e}.pad .up{grid-area:2/2}.pad .left{grid-area:3/1}.pad .right{grid-area:3/3}.pad .down{grid-area:4/2}.pad .spin-left{grid-area:4/1}.pad .spin-right{grid-area:4/3}@media (width<=900px){.pad{grid-template-rows:16px repeat(3,44px);grid-template-columns:repeat(3,44px);gap:5px;padding:8px;bottom:110px}#move-pad{left:16px}#rotate-pad{right:16px}}@media (width<=720px){#controls{flex-wrap:wrap;justify-content:center;width:calc(100vw - 32px)}}@media (width<=480px){#controls{gap:8px;padding:8px;bottom:16px}#legend{width:130px;top:12px;right:16px}#controls button{min-width:0;padding:9px 12px}.dialog-body{padding:20px 18px 22px}}