:root{color-scheme:light}html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.aquarium{position:relative;width:100vw;height:100vh;background:radial-gradient(ellipse at 50% -10%,#cdeeff,#69b8e6 35%,#1f5f8c 80%,#0f3656);overflow:hidden}.aquarium:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 80px);pointer-events:none;mix-blend-mode:overlay}.swim{position:absolute;top:0;left:0;will-change:translate;animation:move 18s ease-in-out infinite}.goldfish{display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:face 18s steps(1,end) infinite;transform-origin:50% 50%}.tail{transform-origin:40px 60px;transform-box:fill-box;animation:wiggle-tail .35s ease-in-out infinite alternate}.fin-top{transform-origin:100px 38px;transform-box:fill-box;animation:wiggle-fin 1.1s ease-in-out infinite alternate}.fin-bottom{transform-origin:102px 84px;transform-box:fill-box;animation:wiggle-fin 1.4s ease-in-out infinite alternate-reverse}@keyframes move{0%{translate:5vw 25vh}22%{translate:35vw 18vh}45%{translate:82vw 32vh}50%{translate:84vw 34vh}72%{translate:45vw 60vh}95%{translate:4vw 48vh}to{translate:5vw 25vh}}@keyframes face{0%,49.9%{scale:1 1}50%,99.9%{scale:-1 1}to{scale:1 1}}@keyframes wiggle-tail{0%{rotate:-14deg}to{rotate:14deg}}@keyframes wiggle-fin{0%{rotate:-6deg}to{rotate:6deg}}.bubbles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.bubble{position:absolute;bottom:-40px;left:var(--left);width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffffff2,#fff3 55%,#fff0 70%);border:1px solid rgba(255,255,255,.45);animation:bubble-rise var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}@keyframes bubble-rise{0%{transform:translate(0);opacity:0}8%{opacity:.85}90%{opacity:.7}to{transform:translate(var(--drift),-110vh);opacity:0}}