:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f7f5f0;background:#211b18}*{box-sizing:border-box}html,body{margin:0;min-width:280px;min-height:100%}body{min-height:100dvh}button{font:inherit}.room{position:relative;width:100%;min-height:100dvh;overflow:hidden;isolation:isolate;background:#9b8270;--cabinet-surface: url(/assets/wood-walnut.webp);--cabinet-solid: #342016;--cabinet-side: #24150e;--cabinet-edge: #1d120c;--cabinet-handle: #c0aa88}.room[data-finish=black]{--cabinet-surface: linear-gradient(110deg, #252827, #161918 52%, #292c2b);--cabinet-solid: #1e2221;--cabinet-side: #111514;--cabinet-edge: #090c0c;--cabinet-handle: #858e8c}.room[data-finish=oak]{--cabinet-surface: url(/assets/wood-oak.webp);--cabinet-solid: #ba9060;--cabinet-side: #93704b;--cabinet-edge: #6f5338;--cabinet-handle: #71604d}.room__background{position:absolute;inset:-1.5%;z-index:-3;display:block;transition:opacity .9s ease;will-change:opacity}.room__background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.room__background--night{opacity:0;z-index:-2}.room[data-lighting=night] .room__background--night{opacity:1}.room__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 42% 37% at 50% 69%,rgba(87,204,213,.035),transparent 75%)}.room[data-lighting=night] .room__glow{background:radial-gradient(ellipse 48% 40% at 50% 68%,rgba(49,213,225,.18),transparent 76%)}.display{position:absolute;top:52%;left:50%;z-index:1;width:min(68vw,118dvh,1400px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 12px 15px rgba(7,18,17,.2))}.aquarium{position:relative;z-index:2;width:100%;aspect-ratio:850 / 525;overflow:hidden;touch-action:pan-y}.aquarium__fallback,.aquarium canvas{position:absolute;display:block;width:100%}.aquarium__fallback{top:-20%;height:127.05%;object-fit:fill}.aquarium.is-ready .aquarium__fallback{display:none}.aquarium canvas{inset:0;height:100%}.cabinet{position:relative;z-index:1;width:102%;aspect-ratio:850 / 144;margin-top:-.3%;perspective:900px;filter:drop-shadow(0 8px 6px rgba(17,15,12,.28))}.cabinet__top{position:absolute;top:0;left:-.6%;width:101.2%;height:13%;border-radius:2px;background:linear-gradient(180deg,#151819,#3b4542 26%,#111514 70%,#07090a);box-shadow:0 -2px 4px #7ce2e966,0 3px 2px #0007}.cabinet__front{position:absolute;top:12%;left:1.8%;width:96.4%;height:74%;display:flex;border:3px solid var(--cabinet-edge);background:var(--cabinet-solid);box-shadow:inset 0 8px 12px #0005,inset 0 -10px 14px #0004,0 3px 5px #0008;transition:background-color .45s ease,border-color .45s ease}.cabinet__door{position:relative;flex:1;background-image:var(--cabinet-surface);background-size:cover;background-position:center;border-right:2px solid var(--cabinet-edge);box-shadow:inset 4px 0 6px #fff1,inset -6px 0 9px #0003}.cabinet__door:last-child{border-right:0}.cabinet__door i{position:absolute;top:12%;right:5%;width:2px;height:27%;border-radius:2px;background:var(--cabinet-handle);box-shadow:1px 1px 2px #0008}.cabinet__left,.cabinet__right{position:absolute;top:12%;width:2.4%;height:74%;background:var(--cabinet-side);transition:background-color .45s ease}.cabinet__left{left:0;clip-path:polygon(100% 0,100% 100%,0 92%,0 7%)}.cabinet__right{right:0;clip-path:polygon(0 0,100% 7%,100% 92%,0 100%)}.cabinet__base{position:absolute;left:2.5%;right:2.5%;bottom:0;height:15%;background:linear-gradient(180deg,var(--cabinet-edge),#080a0a 85%);box-shadow:inset 0 3px 5px #0008}.cabinet__shadow{position:absolute;z-index:-1;left:-4%;bottom:-18%;width:108%;height:36%;border-radius:50%;background:radial-gradient(ellipse,#141c1ca6 0%,#141c1c55 45%,transparent 73%);filter:blur(9px)}.controls{position:absolute;z-index:5;top:clamp(12px,1.7dvh,22px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:7px 9px;border:1px solid #ffffff64;border-radius:15px;background:#132022b9;box-shadow:0 7px 28px #0004;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);white-space:nowrap}.controls__group{display:flex;align-items:center;gap:4px}.controls__group+.controls__group{padding-left:10px;border-left:1px solid #ffffff3b}.controls__label{margin:0 5px 0 3px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c6dedc}.controls button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:0;border-radius:9px;color:#e7eeee;background:transparent;cursor:pointer;font-size:12px;transition:background .16s ease,color .16s ease}.controls button:hover{background:#ffffff20}.controls button[aria-pressed=true]{color:#09202a;background:#d2eff0;box-shadow:0 1px 7px #88e5ec77}.controls button:focus-visible{outline:2px solid #b9f9ff;outline-offset:2px}.swatch{display:inline-block;width:13px;height:13px;border:1px solid #fff8;border-radius:4px;flex:none}.swatch--walnut{background:#56351f url(/assets/wood-walnut.webp) center / cover}.swatch--black{background:#1b1e1d}.swatch--oak{background:#d5ad72 url(/assets/wood-oak.webp) center / cover}.audio-controls{position:absolute;z-index:5;bottom:18px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:calc(100vw - 20px);padding:6px 8px;border:1px solid #ffffff64;border-radius:13px;color:#edf8f7;background:#132022c9;box-shadow:0 7px 28px #0004;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);white-space:nowrap}.audio-controls button,.audio-controls select{min-height:31px;border:0;border-radius:8px;color:#edf8f7;background:#ffffff13;font:inherit;font-size:12px;cursor:pointer}.audio-controls button{padding:4px 9px}.audio-controls button[aria-pressed=true]{color:#09202a;background:#d2eff0}.audio-controls select{width:136px;padding:4px 5px}.audio-controls select option{color:#10272a}.audio-controls__water{display:inline-flex;align-items:center;gap:2px;font-size:12px;cursor:pointer}.audio-controls__water input{accent-color:#a8eced;cursor:pointer}.audio-controls__volume{display:flex;align-items:center}.audio-controls__volume input{width:72px;accent-color:#a8eced;cursor:pointer}.audio-controls :is(button,select,input):focus-visible{outline:2px solid #b9f9ff;outline-offset:2px}.layout-control,.fish-panel{position:absolute;z-index:5;bottom:18px;border:1px solid #ffffff64;border-radius:13px;color:#edf8f7;background:#132022c9;box-shadow:0 7px 28px #0004;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.layout-control{left:20px;display:grid;gap:3px;width:170px;padding:7px 10px 9px}.layout-control span{color:#c6dedc;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.layout-control select{width:100%;border:0;color:#fff;background:transparent;font:inherit;font-size:13px;cursor:pointer}.layout-control select option{color:#10272a}.layout-control select:focus-visible,.fish-panel input:focus-visible,.fish-panel summary:focus-visible{outline:2px solid #b9f9ff;outline-offset:2px}.fish-panel{right:20px;width:140px}.fish-panel summary{display:flex;justify-content:space-between;gap:8px;padding:11px 12px;cursor:pointer;font-size:13px;list-style:none;white-space:nowrap}.fish-panel summary::-webkit-details-marker{display:none}.fish-panel summary:after{content:"▴";color:#b9f9ff}.fish-panel[open] summary:after{content:"▾"}.fish-panel__body{position:absolute;right:0;bottom:calc(100% + 9px);display:grid;gap:3px;width:245px;max-height:min(390px,55dvh);overflow-y:auto;padding:9px;border:1px solid #ffffff64;border-radius:13px;background:#132022ed;box-shadow:0 9px 30px #0006}.fish-panel:not([open]) .fish-panel__body{display:none}.fish-panel__row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:3px 4px;font-size:12px}.fish-panel__row+.fish-panel__row{border-top:1px solid #ffffff23}.fish-panel input{width:52px;padding:4px 5px;border:1px solid #8ab4b49a;border-radius:7px;color:#fff;background:#0b1c1fa8;font:inherit;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.display{width:min(94vw,118dvh)}.controls{flex-direction:column;align-items:stretch;gap:3px;max-width:calc(100vw - 20px);padding:6px}.controls__group{justify-content:center}.controls__group+.controls__group{padding:3px 0 0;border-left:0;border-top:1px solid #ffffff3b}.controls__label{font-size:10px}.controls button{min-height:30px;padding:5px 7px;font-size:11px}.layout-control{left:10px;bottom:10px;width:138px;padding:6px 8px}.fish-panel{right:10px;bottom:10px;width:136px}.fish-panel__body{width:min(245px,calc(100vw - 20px));max-height:42dvh}.audio-controls{top:107px;bottom:auto;width:max-content}.audio-controls button{padding:4px 7px;font-size:11px}.audio-controls select{width:114px;font-size:11px}.audio-controls__water{font-size:11px}.audio-controls__volume input{width:58px}}@media(prefers-reduced-motion:reduce){.room__background,.cabinet__front,.cabinet__left,.cabinet__right{transition-duration:0ms}}