body{color:#e8e2d4;background:#1b2436;margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}main{max-width:40rem;margin:0 auto}a{color:#ffb454}h1{color:#f4e9d8;font-weight:600}.pond{aspect-ratio:16/10;touch-action:none;background:#1b2436;width:min(94vw,44rem);margin:2rem auto;position:relative;overflow:hidden}.ripple{opacity:0;pointer-events:none;mix-blend-mode:screen;border:2px solid #ffc87899;border-radius:50%;width:4rem;height:2.3rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.ripple-pulse{animation:1.6s ease-out ripple-expand}@keyframes ripple-expand{0%{opacity:.9;transform:translate(-50%,-50%)scale(0)}to{opacity:0;transform:translate(-50%,-50%)scale(9)}}.lily-pad,.wind-control{cursor:grab;z-index:1;background:0 0;border:none;border-radius:50%;width:3.6rem;height:3.6rem;padding:0;position:absolute;transform:translate(-50%,-50%)}.wind-control{z-index:1}.lily-pad{z-index:2}.lily-pad:active,.wind-control:active{cursor:grabbing}.lily-pad:focus-visible,.wind-control:focus-visible{outline-offset:3px;background:#ffb45426;outline:3px solid #ffb454}.lily-pad-leaving{opacity:.35}.wind-control-paused{outline-offset:4px;background:#ffb4541f;outline:2px dashed #ffb454b3}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pond-controls{flex-wrap:wrap;justify-content:space-between;gap:.75rem;width:min(94vw,44rem);margin:0 auto;display:flex}.zoom-controls,.palette{flex-wrap:wrap;gap:.5rem;display:flex}.zoom-button,.palette-button{color:#e8e2d4;cursor:pointer;background:0 0;border:1px solid #ffb45466;border-radius:999px;padding:.35rem .9rem;font-size:.85rem}.palette-button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.palette-icon{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;margin-right:.15rem;font-size:1.1em}.zoom-button:hover,.palette-button:hover{color:#ffb454;border-color:#ffb454}.zoom-button:focus-visible,.palette-button:focus-visible{outline-offset:2px;outline:3px solid #ffb454}.pond-drop-target{box-shadow:inset 0 0 0 3px #ffb454b3}.palette-ghost{pointer-events:none;z-index:10;filter:drop-shadow(0 2px 3px #00000073);font-size:1.8rem;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.palette-ghost-falling{animation:.45s ease-in forwards palette-ghost-fall}@keyframes palette-ghost-fall{0%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(-50%,calc(4rem - 50%))scale(.25)rotate(50deg)}}.pond-hint{opacity:.75;width:min(94vw,44rem);margin:.5rem auto 0;font-size:.85rem}.silent-mode-notice[hidden]{display:none}.silent-mode-notice{z-index:10;background:#2a3550;border:1px solid #ffb4544d;border-radius:999px;align-items:center;gap:.5rem;width:max-content;max-width:min(88vw,20rem);margin:0;padding:.5rem .7rem .5rem .9rem;font-size:.8rem;line-height:1.35;transition:opacity .4s ease-in,transform .4s ease-in;animation:.35s ease-out silent-mode-notice-in;display:flex;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);box-shadow:0 .35rem 1rem #00000040}.silent-mode-notice-fade{opacity:0;transform:translate(-50%,.35rem)}@keyframes silent-mode-notice-in{0%{opacity:0;transform:translate(-50%,.5rem)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1)}}.silent-mode-dismiss{color:inherit;opacity:.6;cursor:pointer;background:0 0;border:none;flex:none;padding:.15rem;font-size:1rem;line-height:1}.silent-mode-dismiss:hover{opacity:1}