@keyframes fish-bounce{0%{transform:translateY(-2px)}to{transform:translateY(2px)}}@keyframes water{0%{transform:rotateX(90deg) translateZ(-12px)}to{transform:rotateX(90deg) translateZ(-6px)}}@keyframes bubble-rise{0%{transform:translateY(0) scale(.8);opacity:0}20%{opacity:1}to{transform:translateY(-100vh) scale(1.2);opacity:0}}body,#container{background-color:#f1f1f1;width:100vw;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:Inter,system-ui;font-optical-sizing:auto;font-style:normal}.button-container{position:relative;width:auto;height:64px}.aquarium,.aquarium-button{color:#1b7ea6;font-family:inherit;font-size:24px;font-weight:700}.aquarium-button{color:transparent;background:transparent;height:64px;padding:0 24px;border:0;margin:0;outline:0}.aquarium-button:not(:disabled){cursor:pointer}.aquarium-button:hover:not(:disabled)+.aquarium{transform:scale(1) rotateX(-15deg) rotateY(-15deg)}.aquarium-button:active:not(:disabled)+.aquarium{transform:scale(1) rotateX(-10deg) rotateY(-10deg) translateZ(-25px) translate(-2px)}.aquarium-button:focus-visible+.aquarium .wall{border-color:#1b7ea6}.aquarium-button:disabled+.aquarium{filter:grayscale(100%)}.aquarium{width:100%;height:100%;position:absolute;top:-3px;left:3px;transform-origin:center;transform-style:preserve-3d;transition:transform 225ms ease-out;transform:scale(1) rotateX(-5deg) rotateY(-5deg);pointer-events:none;-webkit-user-select:none;user-select:none}.aquarium .interior{width:calc(100% + 1px);height:100%;bottom:0;left:0;transform-origin:center;transform-style:preserve-3d;position:absolute}.aquarium .interior.back{transform:translateZ(22.44px)}.aquarium .interior.front{transform:translateZ(44.88px)}.aquarium .water{background-color:#46b4e14d;width:5%;height:68px;transform-origin:top center;transform-style:preserve-3d;position:absolute;top:0;left:0%;animation-name:water;animation-duration:1.8s;animation-iteration-count:infinite;animation-direction:alternate}.aquarium .water.water-1{left:0%;animation-delay:0s}.aquarium .water.water-2{left:5%;animation-delay:-.15s}.aquarium .water.water-3{left:10%;animation-delay:-.3s}.aquarium .water.water-4{left:15%;animation-delay:-.45s}.aquarium .water.water-5{left:20%;animation-delay:-.6s}.aquarium .water.water-6{left:25%;animation-delay:-.75s}.aquarium .water.water-7{left:30%;animation-delay:-.9s}.aquarium .water.water-8{left:35%;animation-delay:-1.05s}.aquarium .water.water-9{left:40%;animation-delay:-1.2s}.aquarium .water.water-10{left:45%;animation-delay:-1.35s}.aquarium .water.water-11{left:50%;animation-delay:-1.5s}.aquarium .water.water-12{left:55%;animation-delay:-1.65s}.aquarium .water.water-13{left:60%;animation-delay:-1.8s}.aquarium .water.water-14{left:65%;animation-delay:-1.95s}.aquarium .water.water-15{left:70%;animation-delay:-2.1s}.aquarium .water.water-16{left:75%;animation-delay:-2.25s}.aquarium .water.water-17{left:80%;animation-delay:-2.4s}.aquarium .water.water-18{left:85%;animation-delay:-2.55s}.aquarium .water.water-19{left:90%;animation-delay:-2.7s}.aquarium .water.water-20{left:95%;animation-delay:-2.85s}.aquarium .wall{background-color:#46b4e114;border:2px solid rgba(70,180,225,.5);width:calc(100% + 1px);height:100%;position:absolute;bottom:0;left:0;transform-origin:center;transform-style:preserve-3d}.aquarium .wall.front{transform:translateZ(68px)}.aquarium .wall.back{display:flex;align-items:center;justify-content:center;flex-direction:column;filter:brightness(90%)}.aquarium .wall.left{width:68px;transform-origin:center left;transform:rotateY(-90deg)}.aquarium .wall.right{width:68px;right:0;left:auto;transform-origin:center right;transform:rotateY(90deg)}.aquarium .floor{background-color:#46b4e14d;width:100%;height:100%;position:absolute;bottom:0;left:0;transform-origin:center;transform-style:preserve-3d;transform:rotateX(90deg) translateY(50%) translateZ(-32px)}.fish-container{width:calc(100% - 24px);height:calc(100% - 24px);transform-origin:center;transform-style:preserve-3d;transition:transform 2s ease-out;position:absolute;top:0;left:0}.fish-container.fast{transition-duration:.5s}.fish-container:nth-of-type(1){filter:brightness(100%)}.fish-container:nth-of-type(2){filter:brightness(90%)}.fish-container:nth-of-type(3){filter:brightness(80%)}.fish-container .fish{width:24px;height:12px;position:absolute;top:0;left:0;animation-name:fish-bounce;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}.fish-container .fish.type-1 path{fill:color-mix(in oklch,slategrey 80%,transparent)}.fish-container .fish.type-2 path{fill:color-mix(in oklch,orangered 80%,transparent)}.fish-container .fish.type-3 path{fill:color-mix(in oklch,orange 80%,transparent)}.fish-container .fish svg{width:24px;height:12px;transition:transform 225ms ease-out}.bubble{position:absolute;bottom:-20px;background-color:#fff6;border-radius:50%;pointer-events:none;animation:bubble-rise 8s infinite ease-in}.bubble:after{content:"";position:absolute;top:15%;left:15%;width:30%;height:30%;background-color:#fff9;border-radius:50%}.bubble.small{width:10px;height:10px}.bubble.medium{width:15px;height:15px;animation-duration:10s}.bubble.large{width:20px;height:20px;animation-duration:12s}.controls{margin:20px;display:flex;flex-direction:column;gap:4px}.controls label{margin-right:4px}.controls input[type=text]{border:1px solid lightgray;border-radius:4px;padding-left:4px;padding-right:4px}