*{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{display:block;position:absolute;inset:0}#app canvas:last-child{cursor:crosshair;touch-action:none}#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:38%;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 .slider{align-items:center;gap:8px;padding:0 4px;font-size:15px;display:flex}#controls .slider input{accent-color:#8cc4e4;width:110px}#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 #play{background:#8cc4e438;border-color:#8cc4e480}#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}@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}}