*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#064679;font-family:Georgia,'Times New Roman',serif;color:#fff8dc}#aquarium{position:relative;width:100%;height:100%;isolation:isolate}#backdrop{position:absolute;inset:0;background:url('assets/reef.webp') center center/cover}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}canvas:focus-visible,button:focus-visible{outline:2px solid #ffe7a0;outline-offset:5px}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #002c4938;background:linear-gradient(180deg,#002f5124,transparent 18%,transparent 80%,#012a3a55)}header,footer{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 38px;z-index:2;transition:opacity 1.1s,transform 1.1s}header{top:0;background:linear-gradient(#00325055,transparent)}.signature{display:flex;gap:10px;align-items:center;font-size:32px;font-style:italic;letter-spacing:-1px;text-shadow:0 1px 8px #00345e}.signature svg{width:28px;fill:none;stroke:#ffedb0;stroke-width:1.3}.signature .dot{color:#ffd771}.edition{font:10px/1.4 Arial,sans-serif;letter-spacing:3px;color:#f8f6d7c2}footer{bottom:0;padding-top:50px;background:linear-gradient(transparent,#002a3745)}.caption{font-size:15px;font-style:italic;display:flex;align-items:center;gap:9px;text-shadow:0 1px 7px #003e53}.live-dot{display:block;width:5px;height:5px;border-radius:50%;background:#d7f4c4;box-shadow:0 0 8px #b7ffb9}.controls{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #fff2c52e;border-radius:40px;background:#073b5380;box-shadow:0 6px 25px #0025341f;backdrop-filter:blur(14px)}button{font:12px Arial,sans-serif;color:#fff7dc;display:flex;align-items:center;gap:8px;cursor:pointer;background:transparent;border:0;border-radius:30px;padding:10px 13px;white-space:nowrap;transition:background .2s}button:hover{background:#fff7db1c}button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.separator{width:1px;height:17px;background:#ffefd329}.hint{font:9px Arial,sans-serif;letter-spacing:1.8px;color:#fff8df9c}.idle .hud{opacity:0;pointer-events:none}.idle{cursor:none}body:has(button:focus-visible) .hud{opacity:1;pointer-events:auto}.idle header{transform:translateY(-8px)}.idle footer{transform:translateY(8px)}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#0646799c;backdrop-filter:blur(8px);font-size:20px;transition:opacity 1s;z-index:4}.loading-fish{font:32px Arial;animation:turn 2s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}#loading.loaded{opacity:0;pointer-events:none}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px;border-radius:12px;background:#073b53e8;max-width:430px;line-height:1.6;z-index:5}#toast{position:absolute;left:50%;bottom:115px;transform:translateX(-50%);background:#073b53c9;backdrop-filter:blur(10px);padding:10px 20px;border-radius:25px;font:13px Arial;opacity:0;transition:opacity .4s;pointer-events:none}#toast.show{opacity:1}@media(max-width:760px){header,footer{padding:23px 22px}.edition{font-size:8px;letter-spacing:1.6px}.signature{font-size:27px}.caption,.hint{display:none}.controls{bottom:24px}button{padding:10px}.controls button span{font-size:11px}footer{height:105px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
#loading.loaded{display:none}

/* Discreet population controls stay discoverable while the aquarium is idle. */
header{padding-right:108px}
#fish-menu-toggle{position:absolute;top:29px;right:34px;z-index:7;width:42px;height:42px;padding:10px;justify-content:center;border:1px solid #fff2c526;border-radius:50%;background:#073b532b;opacity:.66;transition:opacity .3s,background .3s}
#fish-menu-toggle svg{width:21px;height:21px}
#fish-menu-toggle:hover,#fish-menu-toggle:focus-visible,#fish-menu-toggle[aria-expanded="true"]{opacity:1;background:#073b53b5}
.idle #fish-menu-toggle{opacity:.2}
.idle #fish-menu-toggle:hover,.idle #fish-menu-toggle:focus-visible{opacity:1;cursor:pointer}
#fish-menu{position:absolute;top:84px;right:34px;z-index:6;width:362px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 104px);overflow-y:auto;padding:24px 23px 17px;border:1px solid #f9ecc24a;border-radius:19px;background:linear-gradient(145deg,#0c4661f2,#072f48f5);box-shadow:0 16px 60px #001f4166,inset 0 1px 0 #fff8d814;backdrop-filter:blur(22px);color:#fff4d2;scrollbar-width:thin;color-scheme:dark}
#fish-menu[hidden]{display:none}
.fish-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.menu-eyebrow{font:9px Arial,sans-serif;letter-spacing:2.4px;color:#dbd8b1a6}
#fish-menu-title{font:italic 25px/1.2 Georgia,serif;letter-spacing:-.6px;margin:8px 0 0}
#fish-menu-close{padding:8px;align-self:flex-start;margin:-4px -7px 0 0;color:#e1e8dcb0}
#fish-menu-description{font:12px/1.7 Arial,sans-serif;color:#d2e0d4c2;margin:16px 0 17px}
.fish-row{display:flex;align-items:center;gap:10px;padding:15px 0;border-top:1px solid #f4e8b71c}
.fish-thumb{flex:0 0 54px;height:51px;background-image:url('assets/fishes.webp');background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 3px 5px #001c3b66)}
.fish-name{flex:1;font:13px/1.35 Georgia,serif}
.fish-stepper{display:flex;align-items:center;gap:1px;border:1px solid #f9edc127;border-radius:10px;background:#001b3529}
.fish-stepper button{width:30px;height:35px;padding:0;justify-content:center;font:19px Arial,sans-serif;border-radius:8px}
.fish-stepper button:disabled{opacity:.25;cursor:default;background:transparent}
.fish-stepper input{width:29px;min-width:0;padding:0;border:0;outline-offset:3px;background:transparent;color:#fff3c5;text-align:center;font:13px Arial,sans-serif;appearance:textfield;-moz-appearance:textfield}
.fish-stepper input::-webkit-inner-spin-button,.fish-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fish-stepper input:focus-visible{outline:1px solid #ffe7a0;border-radius:3px}
.fish-menu-footer{border-top:1px solid #f4e8b729;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}
#fish-total{font:12px Arial,sans-serif;color:#e7edce}
#fish-reset{font:11px Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;color:#d2ddcead;padding:8px 0 8px 8px}
.fish-save-note{font:10px/1.5 Arial,sans-serif;color:#b5d1c68c;margin:12px 0 0}
#fish-menu :focus-visible{outline-color:#ffe7a0}
@media(max-width:760px){header{padding-right:76px}.edition{display:none}#fish-menu-toggle{top:20px;right:19px}#fish-menu{top:73px;right:16px;width:350px;max-height:calc(100dvh - 90px);padding:21px 20px 16px}.fish-row{padding:13px 0}}
@media(max-height:520px){#fish-menu{top:64px;max-height:calc(100dvh - 76px);padding-top:16px}.fish-row{padding:8px 0}.fish-menu-heading h1{font-size:22px}#fish-menu-description{margin:10px 0}.fish-save-note{margin-top:5px}}

#feed-guide{position:absolute;top:110px;left:50%;transform:translateX(-50%);padding:9px 15px;border-radius:24px;background:#073b5370;backdrop-filter:blur(8px);font:italic 12px Georgia,serif;white-space:nowrap;color:#fff3ce;opacity:0;pointer-events:none;transition:opacity .35s}.near-surface:not(.idle) #feed-guide{opacity:.8}.idle canvas{cursor:none!important}@media(max-width:760px){#pauseLabel,#soundLabel,#fullscreen span{display:none}.controls{gap:2px;padding:7px}.controls button{gap:6px;padding:10px}.controls .separator{margin:0 1px}#feed-guide{top:85px;font-size:11px}}
@media(max-width:1200px){.hint{display:none}}@media(max-width:980px){.caption{display:none}}