:root{color-scheme:dark;font-family:system-ui,Segoe UI,sans-serif}*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:transparent;user-select:none;-webkit-user-select:none}
body{display:grid;place-items:center}
.fixture{position:relative;width:min(100%,calc((100vh - 150px)*1.78 + 54px));height:100%;padding:17px 27px 33px;display:flex;flex-direction:column;justify-content:center;filter:drop-shadow(0 17px 16px #000a)}
.canopy{height:56px;flex:none;position:relative;z-index:4;border:1px solid #59606a;border-bottom:4px solid #131d27;border-radius:6px 5px 0 0;background:linear-gradient(90deg,#333b45,#18232e 9%,#313c48 22%,#1b2530 64%,#3d4751 95%,#141c24);box-shadow:inset 0 1px #c6d3df7a,inset 0 -4px 7px #080c12,0 -1px 1px #dcecf273;-webkit-app-region:drag;app-region:drag}
.canopy::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg,#a1d6e38c,#e6e7d2c0 48%,#b1ecff91);filter:blur(2px);opacity:.85;pointer-events:none}
.canopy-top{position:absolute;left:1%;right:1%;top:-9px;height:9px;border-radius:5px 5px 0 0;background:linear-gradient(#606d78,#323d48 60%,#27313b);transform:skewX(-16deg);box-shadow:inset 0 1px #b7d1dc9c}
.vents{position:absolute;left:5%;top:17px;width:38%;height:10px;border-radius:2px;background:repeating-linear-gradient(90deg,#070d13 0 3px,#687a875e 3px 4px,transparent 4px 8px);box-shadow:inset 0 2px 3px #000a;opacity:.86}
.lamp{position:absolute;bottom:-6px;height:3px;border-radius:4px;pointer-events:none}.lamp.warm{left:8%;width:26%;background:#ffe2ae;box-shadow:0 1px 7px #ffe3a8,0 2px 12px #ffe0a080}.lamp.cool{left:45%;right:8%;background:#dcf9ff;box-shadow:0 1px 7px #a7eeff,0 2px 12px #a6e8ff80}
.window-tools{position:absolute;z-index:8;right:11px;top:9px;display:flex;gap:4px;-webkit-app-region:no-drag;app-region:no-drag}.window-tools button{width:34px;height:31px;border:1px solid #62717d77;border-radius:4px;background:linear-gradient(#44505d99,#15212d77);color:#e7f5f7;font:21px/27px Segoe UI,Arial;cursor:pointer;box-shadow:inset 0 1px #ffffff25}.window-tools button:hover{background:#647989;color:white}.window-tools button:focus-visible{outline:2px solid #a3ecff;outline-offset:2px}.window-tools #close:hover{background:#aa4650}
.glass-box{position:relative;flex:none;padding-right:16px;background:#091826;border-left:7px solid #27323b;border-right:2px solid #475965;border-top:7px solid #131a24;box-shadow:inset 1px 0 #9db9c3a0,inset -2px 0 #89b8c893,0 2px #080d13}
.depth-side{position:absolute;z-index:2;right:-2px;top:0;bottom:0;width:18px;background:linear-gradient(100deg,#274553e0,#081521e8 30%,#3e657078 82%,#0b131c);box-shadow:inset 1px 0 #d7f8fa7a,inset -2px 0 #d6edf844;pointer-events:none}
.world{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#062237;touch-action:none;cursor:default;border-left:1px solid #92c9ce9c;border-right:2px solid #3a7283;box-shadow:inset 0 0 13px #00111c}
.world::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:transparent;transition:background 1.2s ease}
.reef-photo,#surface-ripple,#water-light,.glass-glow,.glass-sheen,#reef-3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.reef-photo{background:url('./assets/reef.png') center/100% 100% no-repeat;filter:saturate(1.03) contrast(1.03)}
#surface-ripple{z-index:1;height:15%;opacity:.92;mask-image:linear-gradient(#000 0%,#000 62%,transparent 100%)}
#water-light{z-index:2;mix-blend-mode:screen;opacity:.9;image-rendering:auto}
#reef-3d{z-index:3;display:block}
.feed-button{position:absolute;z-index:8;right:208px;top:12px;height:27px;padding:0 12px;border:1px solid #91adad8c;border-radius:13px;background:linear-gradient(#4c696f,#233b46);box-shadow:inset 0 1px #e9ffff50,0 1px 4px #0007;color:#e6f8ef;font:700 10px/24px Segoe UI,Arial,sans-serif;letter-spacing:.15em;cursor:pointer;-webkit-app-region:no-drag;app-region:no-drag}.feed-button span{font-size:18px;vertical-align:-2px;color:#b7e8d0}.feed-button:hover{background:linear-gradient(#6c8a8a,#315a62)}.feed-button:disabled{opacity:.45;cursor:default}
.window-tools #audio[aria-pressed="false"]{color:#a3b2bd}.window-tools #audio[aria-pressed="true"]{color:#aaf1de;text-shadow:0 0 6px #7efbd3}
:root[data-light="dusk"] .reef-photo{filter:brightness(.70) saturate(.88) sepia(.14)}
:root[data-light="dusk"] .world::after{background:#311e1936}
:root[data-light="dusk"] #water-light{opacity:.48}
:root[data-light="dusk"] .lamp.cool{background:#f1c491;box-shadow:0 1px 8px #eaa36b,0 2px 13px #ef9a5070}
:root[data-light="dusk"] .lamp.warm{background:#f6ba84;box-shadow:0 1px 8px #ffc58b,0 2px 13px #f9a96880}
:root[data-light="moon"] .reef-photo{filter:brightness(.40) saturate(.72) hue-rotate(9deg)}
:root[data-light="moon"] .world::after{background:#071b3278}
:root[data-light="moon"] #water-light{opacity:.27}
:root[data-light="moon"] #surface-ripple{opacity:.58}
:root[data-light="moon"] .lamp{background:#8cbce7;box-shadow:0 1px 7px #8ec9ff,0 2px 13px #82c5ff50}
:root[data-light="moon"] .power-dot{background:#76c0e9;box-shadow:0 0 7px #91dbff}
.glass-glow{z-index:5;box-shadow:inset 2px 0 3px #d5faff9a,inset -3px 0 5px #e2f8ff69,inset 0 2px 3px #ebffffa8,inset 0 -3px 5px #bbdef889, inset 0 0 21px #70cdec26;border:1px solid #cefbff34}
.glass-sheen{z-index:6;background:linear-gradient(109deg,transparent 4%,#ffffff0b 5%,#d5fdff06 10%,transparent 17%,transparent 72%,#d9ffff08 74%,transparent 79%);mix-blend-mode:screen}
.cabinet-base{height:31px;flex:none;position:relative;z-index:3;border:1px solid #65727c;border-top:3px solid #1b2833;border-bottom:2px solid #060a0e;border-radius:0 0 5px 5px;background:linear-gradient(100deg,#48545d,#1a2833 9%,#293742 35%,#14222e 80%,#424d57);box-shadow:inset 0 1px #a4b6c079,inset 0 -2px #060b0f,0 5px 7px #0009}
.screw{position:absolute;top:12px;left:14px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#c2ced2,#0b1620 45%,#82919a 66%,#14191d);box-shadow:0 0 1px #dcecf5}.screw.right{left:auto;right:14px}.power-dot{position:absolute;left:29px;top:12px;width:4px;height:4px;border-radius:50%;background:#8cf1c8;box-shadow:0 0 7px #a0fcd8,0 0 15px #79ffd8}
.feet{position:relative;z-index:0;flex:none;width:76%;margin:-1px auto 0;display:flex;justify-content:space-between;pointer-events:none}.feet i{width:55px;height:13px;background:linear-gradient(90deg,#0b1219,#343d46 22%,#0a1018);border-bottom:3px solid #06090d;border-radius:0 0 4px 4px}.floor-shadow{position:absolute;z-index:-1;left:8%;right:8%;bottom:12px;height:20px;border-radius:50%;background:#0008;filter:blur(11px);pointer-events:none}

/* Furniture aquarium: a cherry cabinet, chamfered glass, and neutral daylight. */
:root{--cabinet-wood:url('./assets/cabinet-walnut.png')}
.fixture{width:min(96vw,calc((100vh - 54px)*1.02));height:auto;padding:18px 20px 24px;container-type:inline-size;filter:drop-shadow(0 13px 16px #0009)}
.canopy{height:13cqw;min-height:76px;border:0;border-bottom:9px solid #26170e;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#160b078c,transparent 12%,#e3a77612 48%,#0004 95%),var(--cabinet-wood) center/cover;box-shadow:inset 0 2px #ba875763,inset 0 -5px 5px #130a09,0 4px 4px #0008}
.canopy::before{content:"";position:absolute;inset:12px 5.5% 17px;border:1px solid #28160e;box-shadow:inset 0 2px 5px #1d100f9c,0 1px #d49b5b30;background:linear-gradient(#00000017,#f0b87308)}
.canopy::after{bottom:-10px;height:3px;opacity:.50;background:#e1e9dd}
.canopy-top{left:-1%;right:-1%;top:-10px;height:15px;transform:none;border-radius:3px;background:linear-gradient(#94643e,#462919 24%,#321d13 72%,#916039);box-shadow:0 2px 3px #1d0d09,inset 0 1px #d7a87975}
.vents{left:7%;top:auto;bottom:8px;width:26%;height:5px;opacity:.42;background:repeating-linear-gradient(90deg,#100b08 0 3px,#986c4140 3px 4px,transparent 4px 8px)}
.window-tools{top:auto;bottom:10px;right:20px;gap:3px}
.window-tools button{width:29px;height:27px;font-size:18px;line-height:22px;border-color:#b4976a42;color:#e4d8c2;background:linear-gradient(#684a36bb,#291c14c9);box-shadow:inset 0 1px #e6bf8330}
.window-tools button:hover{background:#95714b}.feed-button{top:auto;bottom:11px;right:186px;height:25px;line-height:22px;background:linear-gradient(#775a3e,#3b2d21);border-color:#c4a57766;color:#f1e3cb}.feed-button:hover{background:linear-gradient(#92724c,#503b27)}
.glass-box{padding:0 5.2%;border:0;border-top:6px solid #191a17;border-bottom:6px solid #191a17;background:#151b18;box-shadow:0 0 0 1px #0e1210,inset 0 0 5px #000}
.world{border-left:3px solid #172325;border-right:3px solid #172325;box-shadow:inset 1px 0 #b9d4cf77,inset -1px 0 #d5dfd255}
.depth-side{width:5.2%;right:0;z-index:7;top:0;bottom:0;background:linear-gradient(90deg,#a2b3a236,#103f505c),url('./assets/reef.png') right center/auto 100%;filter:saturate(.48) brightness(.82);border-right:3px solid #151b18;box-shadow:inset 2px 0 #d0e4d885,inset -2px 0 #82a9ac55;clip-path:polygon(0 0,100% 3%,100% 97%,0 100%)}
.depth-side.left{left:0;right:auto;background-position:left center;border-right:0;border-left:3px solid #151b18;clip-path:polygon(0 3%,100% 0,100% 100%,0 97%);box-shadow:inset -2px 0 #d0e4d885,inset 2px 0 #82a9ac55}
.reef-photo{filter:saturate(.62) brightness(1.08) contrast(.96)}
#reef-3d{filter:saturate(.82)}#surface-ripple{filter:saturate(.58);opacity:.76}#water-light{opacity:.52;filter:saturate(.5)}
.world::after{background:#b7d1b714}
.cabinet-base{height:32cqw;min-height:160px;border:0;border-top:15px solid #4a2d1b;border-bottom:12px solid #352014;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#1d100987,transparent 8%,transparent 92%,#180d0970),var(--cabinet-wood) center/cover;box-shadow:inset 0 3px #b9844c62,inset 0 -3px #c9924d32,0 -4px #1d130d,0 -7px #92613c,0 5px 7px #0008}
.cabinet-base::before,.cabinet-base::after{content:"";position:absolute;top:0;bottom:0;width:5.2%;background:linear-gradient(90deg,#0d080a66,#b18b5330,#0005);box-shadow:inset 1px 0 #d8b68133,inset -1px 0 #150e09}
.cabinet-base::before{left:0}.cabinet-base::after{right:0;transform:scaleX(-1)}
.cabinet-doors{position:absolute;inset:10px 7% 8px;display:flex;gap:12px}
.cabinet-door{position:relative;flex:1;border:9px solid #53351f;border-top-color:#745032;border-bottom-color:#352215;background:linear-gradient(90deg,#130d0926,#d2a16c10 42%,#1b110a32),var(--cabinet-wood) center/cover;box-shadow:0 0 0 1px #1b110c,inset 0 3px 9px #160b09a3,inset 0 -1px #d49d5f6b}
.cabinet-door::before{content:"";position:absolute;left:48%;top:0;bottom:0;width:6px;background:linear-gradient(90deg,#312013,#785333 55%,#2e2017);box-shadow:2px 0 3px #1c120752}
.cabinet-door i{position:absolute;right:9px;top:40%;width:4px;height:28px;border-radius:3px;background:linear-gradient(90deg,#170f0b,#b79a6a,#30251b);box-shadow:2px 2px 3px #150a08}
.cabinet-door:last-child i{left:9px;right:auto}
.cabinet-base .power-dot{left:6%;top:3px;width:3px;height:3px;opacity:.7}
.feet{width:86%;margin:0 auto}.feet i{width:12%;height:8px;background:linear-gradient(#3c281a,#160f0c);border:0}
.lamp.warm,.lamp.cool{background:#e6ead6;box-shadow:0 1px 5px #f2f2dc66}
:root[data-light="dusk"] .reef-photo{filter:brightness(.76) saturate(.54) sepia(.12)}
:root[data-light="moon"] .reef-photo{filter:brightness(.48) saturate(.48)}
@media(max-width:600px){.vents{display:none}.window-tools{right:12px}.feed-button{right:178px}.cabinet-doors{gap:9px}.cabinet-door{border-width:6px}}

/* Website controls: scrolling remains available on touchscreens. */
.world{touch-action:pan-y}.canopy{-webkit-app-region:no-drag;app-region:no-drag}
.window-tools{right:12px;bottom:9px;gap:5px}.window-tools button{width:42px;height:42px;line-height:36px;font-size:22px}
.feed-button{right:158px;bottom:9px;min-height:42px;padding:0 12px;font-size:11px;line-height:38px}
.feed-button:focus-visible{outline:3px solid #a3ecff;outline-offset:3px}
button:disabled{opacity:.45;cursor:default}
#reef-status{position:fixed;left:8%;right:8%;top:42%;margin:0;padding:12px 16px;background:#101b27e8;color:#f4f4f4;border:1px solid #a8c6c0;border-radius:8px;text-align:center;font:14px/1.5 system-ui;pointer-events:none;z-index:10}
#reef-status:empty{display:none}
@media(max-width:380px){.fixture{padding-inline:10px}.feed-button{right:154px;padding-inline:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}