@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Noto+Serif+TC:wght@300;500;700&display=swap";:root{--font-sans:"Outfit", sans-serif;--font-serif:"Noto Serif TC", serif;--bg-dark:#040b17;--glass-bg:#07142673;--glass-border:#ffffff12;--glass-hover:#ffffff1f;--cyan-glow:#00f5ff;--pink-glow:#b5179e;--purple-glow:#7209b7;--gold-glow:#ffaa3b;--shadow-subtle:0 8px 32px 0 #0000005e;--shadow-glow:0 0 20px #00f5ff26}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{background-color:var(--bg-dark);width:100%;height:100%;font-family:var(--font-sans);color:#f0f4f8;-webkit-font-smoothing:antialiased;overflow:hidden}#aquarium-canvas{z-index:0;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.glass-pane{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--shadow-subtle);z-index:10;border-radius:20px;padding:24px;transition:all .4s cubic-bezier(.16,1,.3,1)}.glass-pane:hover{border-color:#ffffff26;box-shadow:0 12px 40px #00000080,0 0 30px #64b4ff0d}header{pointer-events:auto;max-width:380px;position:absolute;top:24px;left:24px}header h1{font-family:var(--font-serif);letter-spacing:2px;background:linear-gradient(135deg,#fff 40%,#a2d2ff 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 20px #ffffff14;-webkit-background-clip:text;margin-bottom:6px;font-size:2.2rem;font-weight:500}header p{color:#ebf5ffa6;letter-spacing:.5px;font-size:.9rem;font-weight:300;line-height:1.4}.tooltip-hint{color:#00f5ffb3;align-items:center;gap:6px;margin-top:12px;font-size:.8rem;animation:2.5s ease-in-out infinite pulse-glow;display:flex}@keyframes pulse-glow{0%,to{opacity:.5;text-shadow:0 0 2px #00f5ff1a}50%{opacity:.95;text-shadow:0 0 8px #00f5ff99}}.controls-panel{flex-direction:column;gap:16px;width:340px;display:flex;position:absolute;bottom:24px;left:24px}.panel-section-title{text-transform:uppercase;letter-spacing:1.5px;color:#ffffff73;margin-bottom:12px;font-size:.9rem;font-weight:600}.theme-switcher{gap:8px;margin-bottom:16px;display:flex}.theme-btn{color:#ffffffb3;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-family:inherit;font-size:.8rem;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex}.theme-btn:hover{color:#fff;background:#ffffff1f;border-color:#fff3}.theme-btn.active{color:#00e5ff;background:#00e5ff26;border-color:#00e5ff59;box-shadow:0 0 10px #00e5ff26}.sound-mixer{flex-direction:column;gap:12px;display:flex}.mixer-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.mixer-label{color:#ffffffbf;width:90px;font-size:.85rem}.slider-container{flex-grow:1;align-items:center;gap:8px;display:flex}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:100%;height:4px;transition:background .3s}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .2s,background-color .2s;box-shadow:0 0 10px #fffc}input[type=range]::-webkit-slider-thumb:hover{background:var(--cyan-glow);box-shadow:0 0 12px var(--cyan-glow);transform:scale(1.3)}.toggle-btn{color:#ffffff80;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:1rem;transition:all .3s;display:flex}.toggle-btn:hover{color:var(--cyan-glow);background:#ffffff0d}.toggle-btn.active{color:var(--cyan-glow)}.toggle-btn .sound-icon-off{display:block}.toggle-btn .sound-icon-on,.toggle-btn.active .sound-icon-off{display:none}.toggle-btn.active .sound-icon-on{display:block}.glass-pane.left-pane{transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}.glass-pane.left-pane.collapsed{box-shadow:none;border-color:#ffffff08;transform:translate(calc(-100% - 24px))}.glass-pane.right-pane{transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}.glass-pane.right-pane.collapsed{box-shadow:none;border-color:#ffffff08;transform:translate(calc(100% + 24px))}.controls-panel .glass-pane,.right-panel .glass-pane{position:relative}.collapse-tab{cursor:pointer;color:#ffffffa6;-webkit-backdrop-filter:blur(16px);z-index:15;background:#08162ad9;border:1px solid #ffffff14;flex-direction:column;justify-content:center;align-items:center;width:36px;min-height:100px;padding:12px 0;font-size:.72rem;font-weight:500;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:2px 0 10px #0000004d}.collapse-tab:hover{color:var(--cyan-glow);background:#ffffff14;box-shadow:0 0 12px #64ffda26}.left-tab{border-left:none;border-radius:0 10px 10px 0;right:-36px}.right-tab{border-right:none;border-radius:10px 0 0 10px;left:-36px;box-shadow:-2px 0 10px #0000004d}.collapse-tab span{writing-mode:vertical-lr;text-orientation:mixed;letter-spacing:2px;align-items:center;gap:6px;display:flex}.glass-pane.collapsed .collapse-tab{color:var(--cyan-glow);background:#0a203cf2;border-color:#64ffda40}.fish-catalog{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;grid-template-columns:repeat(3,1fr);gap:8px;max-height:180px;padding-right:4px;display:grid;overflow-y:auto}.fish-catalog::-webkit-scrollbar{width:4px}.fish-catalog::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.add-fish-btn{color:#ffffffb3;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;font-size:.72rem;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex}.add-fish-btn:hover{background:var(--glass-hover);color:#fff;border-color:#fff3;transform:translateY(-2px)}.add-fish-btn svg{fill:currentColor;width:18px;height:18px}.right-panel{flex-direction:column;gap:16px;width:360px;display:flex;position:absolute;bottom:24px;right:24px}.quote-box{flex-direction:column;justify-content:center;min-height:110px;display:flex}.quote-text{font-family:var(--font-serif);color:#fffffff2;text-shadow:0 0 10px #ffffff0d;margin-bottom:8px;font-size:1.1rem;line-height:1.6}.quote-author{color:#ffffff73;align-self:flex-end;font-size:.78rem}.worry-form{gap:8px;margin-top:4px;display:flex}.worry-input{border:1px solid var(--glass-border);color:#fff;font-family:var(--font-sans);background:#00000040;border-radius:12px;outline:none;flex-grow:1;padding:10px 14px;font-size:.85rem;transition:all .3s}.worry-input:focus{background:#0006;border-color:#00f5ff66;box-shadow:0 0 10px #00f5ff1a}.worry-input::placeholder{color:#ffffff4d}.release-btn{color:#040b17;cursor:pointer;background:linear-gradient(135deg,#00f5ff 0%,#00b4d8 100%);border:none;border-radius:12px;padding:10px 16px;font-size:.85rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #00f5ff40}.release-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00f5ff73}.breathing-module{flex-direction:column;align-items:center;width:320px;padding:24px;display:flex;position:absolute;top:24px;right:24px}.breathing-container{justify-content:center;align-items:center;width:140px;height:140px;margin:16px 0;display:flex;position:relative}.breathing-ring{border:3px solid #ffffff4d;border-radius:50%;width:100%;height:100%;position:absolute;transform:scale(1);box-shadow:0 0 15px #ffffff1a}.breathing-timer{color:#fff;z-index:2;text-shadow:0 0 10px #ffffff4d;font-size:2.2rem;font-weight:300}.breathing-text{font-family:var(--font-serif);color:#fff;text-shadow:0 0 8px #fff3;height:24px;margin-top:12px;font-size:1.1rem;font-weight:500}.breathing-controls{gap:8px;width:100%;margin-top:16px;display:flex}.breathing-btn{border:1px solid var(--glass-border);color:#ffffffb3;cursor:pointer;background:#ffffff0d;border-radius:10px;flex:1;padding:8px;font-size:.8rem;transition:all .3s}.breathing-btn:hover{background:var(--glass-hover);color:#fff}.breathing-btn.active{color:var(--cyan-glow);background:#00f5ff26;border-color:#00f5ff66;box-shadow:0 0 10px #00f5ff1a}.breath-toggle-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:10px;width:100%;margin-top:12px;padding:10px;font-size:.85rem;font-weight:600;transition:all .3s}.breath-toggle-btn:hover{background:#ffffff26;border-color:#ffffff4d}.breath-toggle-btn.running{color:#ff4d6d;background:#e6394626;border-color:#e639464d}.breath-toggle-btn.running:hover{background:#e6394640}.audio-init-overlay{z-index:100;-webkit-backdrop-filter:blur(25px);text-align:center;background:#030a14cc;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;transition:opacity .8s,visibility .8s;display:flex;position:absolute;top:0;left:0}.audio-init-overlay.fade-out{opacity:0;visibility:hidden}.audio-init-box{background:#07142699;border:1px solid #ffffff14;border-radius:24px;flex-direction:column;align-items:center;max-width:420px;padding:40px 32px;display:flex;box-shadow:0 20px 50px #00000080}.audio-init-box h2{font-family:var(--font-serif);letter-spacing:2px;margin-bottom:12px;font-size:1.8rem;font-weight:500}.audio-init-box p{color:#ffffffa6;margin-bottom:24px;font-size:.92rem;line-height:1.6}.enter-btn{color:#040b17;cursor:pointer;letter-spacing:1px;background:linear-gradient(135deg,#00f5ff 0%,#00b4d8 100%);border:none;border-radius:16px;padding:16px 36px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 25px #00f5ff4d}.enter-btn:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 12px 35px #00f5ff8c}@media (width<=768px){.mobile-overlay{pointer-events:none;z-index:10;width:100%;height:100%;padding:0;position:absolute;top:0;left:0;overflow:hidden}header{pointer-events:auto;z-index:10;border-radius:12px;width:290px;max-width:calc(100% - 24px);padding:12px 16px;position:absolute;top:12px;left:12px;right:auto}header h1{letter-spacing:1px;margin-bottom:2px;font-size:1.4rem}header p{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.75rem;line-height:1.3;display:-webkit-box;overflow:hidden}.tooltip-hint{gap:4px;margin-top:4px;font-size:.7rem}.controls-panel{pointer-events:none;z-index:10;flex-direction:column;gap:12px;width:290px;max-width:calc(100% - 24px);display:flex;position:absolute;bottom:12px;left:12px}.controls-panel .glass-pane{pointer-events:auto;border-radius:16px;padding:16px}.glass-pane.left-pane.collapsed{transform:translate(calc(-100% - 12px))}.left-tab{width:36px;min-height:80px;font-size:.68rem;right:-36px}.right-panel{pointer-events:none;z-index:10;flex-direction:column;gap:12px;width:290px;max-width:calc(100% - 24px);display:flex;position:absolute;bottom:12px;right:12px}.right-panel .glass-pane{pointer-events:auto;border-radius:16px;padding:16px}.glass-pane.right-pane.collapsed{transform:translate(calc(100% + 12px))}.breathing-module{pointer-events:auto;z-index:10;border-radius:16px;width:290px;max-width:calc(100% - 24px);padding:16px;position:absolute;top:135px;right:12px}.breathing-module.right-pane.collapsed{transform:translate(calc(100% + 12px))}.right-tab{width:36px;min-height:80px;font-size:.68rem;left:-36px}.fish-catalog{grid-template-columns:repeat(3,1fr);gap:6px;max-height:140px}.add-fish-btn{gap:4px;padding:6px 2px;font-size:.68rem}.add-fish-btn svg{width:14px;height:14px}.breathing-container{width:100px;height:100px;margin:8px 0}.breathing-timer{font-size:1.8rem}.breathing-text{height:20px;margin-top:8px;font-size:.95rem}.quote-box{min-height:80px}.quote-text{font-size:.92rem;line-height:1.4}}