@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;color:#f2eedf;background:#142a29}*{box-sizing:border-box}body{margin:0;min-height:100svh}canvas,.shade{position:fixed;inset:0;width:100%;height:100%}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(8,24,24,.32),transparent 55%),linear-gradient(0deg,rgba(4,17,18,.55),transparent 35%)}header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:35px 5vw}.brand{font-family:'Noto Serif TC',serif;font-size:25px;color:inherit;text-decoration:none;letter-spacing:5px}.brand span{font:10px Inter,sans-serif;letter-spacing:3px;margin-left:16px;color:#c5cdbf}.live{font-size:11px;color:#d2d9c9;letter-spacing:2px}.live i{display:inline-block;background:#bdcc8b;width:6px;height:6px;border-radius:50%;margin-right:10px}main{position:relative;margin:12vh 5vw;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:4px;color:#d4d4b2}h1{font-family:'Noto Serif TC',serif;font-weight:400;font-size:clamp(32px,4vw,60px);letter-spacing:5px;margin:22px 0}.intro{font-family:'Noto Serif TC',serif;color:#d8decb;font-size:14px;line-height:2.2;letter-spacing:2px}.panel{position:absolute;right:5vw;top:23vh;width:320px;padding:24px;background:rgba(14,34,33,.74);border:1px solid #c2c8a22d;border-radius:18px;backdrop-filter:blur(22px);box-shadow:0 20px 70px #0003}.panel-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:1px}button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}button:focus-visible,input:focus-visible{outline:2px solid #e9bd7d;outline-offset:4px}.panel-top button{font-size:11px;color:#e5c69b}.modes{display:flex;margin-top:24px;background:#071c1c70;border-radius:9px;padding:4px}.modes button{width:50%;padding:10px 0;font-size:12px;border-radius:7px;color:#a6b6aa}.modes .selected{background:#c9d1ad;color:#25332d}#modeHelp,#status{color:#aebfb1;font-size:11px;line-height:1.8;min-height:38px}.events{display:flex;justify-content:space-between;margin:15px 0 24px}.events button{font-size:25px;width:46px;height:62px;border:1px solid #acbf9e30;border-radius:9px;transition:background .2s}.events button:hover,.events button.active{background:#d2b87c30}.events span{display:block;font-size:10px;margin-top:5px}.slider{display:flex;align-items:center;gap:18px;font-size:11px;color:#cad2bf;margin:16px 0}.slider input{flex:1;min-width:0;accent-color:#d1b57d;height:3px}.mic{border-top:1px solid #c2c8a220;padding-top:18px;display:flex;justify-content:space-between;font-size:11px}.mic button{color:#d9c59c}#meter{color:#627c6b;transition:color .1s}footer{position:fixed;bottom:24px;left:5vw;right:5vw;display:flex;gap:20px;align-items:center;font-size:10px;letter-spacing:2px;color:#cad5bd}footer span{margin-right:auto}footer button{font-size:10px}@media(max-width:700px){header{padding-top:24px}.live{display:none}main{margin:5vh 6vw}.panel{position:relative;top:auto;right:auto;margin:7vh 6vw 80px;width:auto;max-width:380px;padding:20px}h1{font-size:32px}footer{bottom:14px}.intro{font-size:12px}body{overflow-x:hidden}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.input-volume{margin-top:16px}.input-volume-label{display:flex;justify-content:space-between;font-size:10px;color:#bbc9b7}.input-volume-label output{font-variant-numeric:tabular-nums;color:#e7d6ae;margin-left:5px}.input-track{height:12px;position:relative;background:#071b1a;border-radius:4px;margin-top:10px;overflow:visible}#inputFill{height:100%;width:0;background:#9fb991;border-radius:4px;transition:width .07s linear}#thresholdMarker{position:absolute;left:26%;top:-4px;height:20px;width:2px;background:#efd094;box-shadow:0 0 7px #efd09455}#inputHelp{font-size:10px;color:#aebfb1;margin:8px 0 0}.input-volume.over #inputFill{background:#e7b768}.input-volume.over #inputHelp{color:#e7b768}
@media(min-width:701px){.panel{top:18vh;max-height:calc(82svh - 65px);overflow-y:auto;scrollbar-width:thin}}

.panel[hidden]{display:none}@media(max-width:700px){footer{gap:12px;letter-spacing:0}footer span{font-size:9px}}

.nature-controls{border-top:1px solid #c2c8a220;margin-top:20px;padding-top:8px}.nature-controls p{font-size:11px;color:#e5c69b;letter-spacing:2px;margin:12px 0}.slider output{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}

.day-control{display:flex;align-items:center;gap:10px;font-size:11px;margin-top:20px;color:#cad2bf}.day-control select{flex:1;min-width:0;background:#19332f;border:1px solid #acbf9e40;border-radius:7px;padding:8px;color:#eee9d4;font:inherit}.day-control output{font-size:10px;color:#e5c69b}

.nature-controls .sound-note{font-size:10px;letter-spacing:0;line-height:1.8;color:#b6c4b4}.cricket-switch{display:flex;align-items:center;justify-content:space-between;margin:14px 0;font-size:12px}.cricket-switch button{padding:8px 14px;border:1px solid #c5d1a8;border-radius:7px;background:#c5d1a8;color:#20352b}.cricket-switch button[aria-pressed="false"]{background:transparent;color:#c5d1a8}

#thunderMarker{position:absolute;left:50%;top:-4px;height:20px;width:2px;background:#c2b6ff;box-shadow:0 0 7px #c2b6ff55}

.sound-credits{margin-top:12px;border-top:1px solid #ffffff18;padding-top:10px;font-size:10px;letter-spacing:0;color:#b6c4b4}.sound-credits summary{cursor:pointer;line-height:1.6}.sound-credits div{max-height:170px;overflow-y:auto;line-height:1.8}.sound-credits p{margin:8px 0}.sound-credits a{color:#d8d6ad;text-underline-offset:3px}

.sound-prompt{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:5;background:#d8d6ad;color:#20352b;padding:12px 22px;border-radius:24px;box-shadow:0 4px 25px #0005;white-space:nowrap;font-size:13px}.sound-prompt[hidden]{display:none}

.audio-health{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;font-size:10px;color:#c5d1a8}.audio-health button{font-size:10px;text-decoration:underline}

/* Persistent controls and a compact mobile bottom sheet. */
footer{z-index:8;background:rgba(8,25,25,.9);border:1px solid #c2c8a235;border-radius:16px;padding:8px 12px;backdrop-filter:blur(16px)}
footer button{min-height:44px;padding:8px 10px;border-radius:9px;letter-spacing:0;font-size:12px}footer button:hover{background:#d2b87c25}footer #audio{color:#efcf9e}
.control-group{border-top:1px solid #c2c8a230;margin-top:16px;padding-top:8px}.control-group>summary{cursor:pointer;padding:12px 0;font-size:12px;color:#e5c69b}.control-group .nature-controls{border:0;margin:0;padding:0}
select:focus-visible,summary:focus-visible{outline:2px solid #e9bd7d;outline-offset:3px}
.sound-prompt{bottom:100px}.panel{z-index:6}#resumeAudio{min-height:36px}
@media(max-width:700px){
body{overflow:hidden}header{padding:22px 6vw}.brand{font-size:21px}.brand span{font-size:9px;margin-left:8px}main{margin:5vh 6vw}h1{font-size:29px}
.panel{position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));top:auto;margin:0;width:auto;max-width:none;max-height:62svh;overflow-y:auto;overscroll-behavior:contain;padding:18px;border-radius:20px 20px 12px 12px;box-shadow:0 -10px 45px #0004}
footer{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));gap:2px;padding:4px;justify-content:space-between}footer span{display:none}footer button{font-size:11px;padding:8px 6px;flex:1}footer #fullscreen{flex:.8}.events button{min-height:62px}.slider{min-height:32px}.slider input{height:18px}.sound-prompt{bottom:calc(84px + env(safe-area-inset-bottom))}
}

.eco-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:12px}.control-group .sound-note{font-size:11px;line-height:1.8;color:#b6c4b4}

.about-entry{color:#e5d6b1;font-size:12px;text-decoration:none;border:1px solid #c2c8a240;border-radius:20px;padding:10px 14px;background:#122d2777;min-height:44px;display:flex;align-items:center}.live{margin-left:auto;margin-right:24px}@media(max-width:700px){header{gap:10px}.brand span{display:none}.about-entry{font-size:11px;padding:8px 11px}}

#lakeMusicToggle{padding:10px 16px;border:1px solid #c2c8a250;border-radius:8px;color:#e5c69b;font-size:12px}#lakeMusicChoice{max-width:200px}#lakeMusicValue{min-width:30px}

footer #footerMusic{color:#e5c69b}footer #footerMusic[aria-pressed="true"]{background:#d2b87c30;border-radius:7px}@media(max-width:700px){footer button{min-height:44px;padding:8px 4px;font-size:10px;white-space:nowrap}}

.interaction-card{margin-top:16px;padding:16px;background:linear-gradient(135deg,#45665c77,#132c2eaa);border:1px solid #e1c58a80;border-radius:12px}.interaction-title{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;color:#f3d79e}.interaction-title span{font-size:10px;font-weight:400;color:#cbd7c4}.interaction-card .mic{border:0;padding:12px 0 4px}.interaction-card #mic{background:#dfd5ae;color:#203c34;border-radius:8px;padding:12px;font-size:12px;font-weight:600;flex:1;text-align:center}.interaction-card #mic[aria-pressed="true"]{background:#b5d6a8}.interaction-card #meter{margin-left:12px}.interaction-card .events{margin:12px 0 0;gap:5px}.interaction-card .events button{flex:1;min-width:0}.interaction-card .sound-note{font-size:11px;line-height:1.7}#weatherPanel>.day-control{margin:12px 0}.modes{margin-top:12px}@media(max-width:700px){.interaction-card{padding:13px}.interaction-title{font-size:14px}.interaction-card .events button{min-height:56px}}

.events button:disabled{opacity:.5;cursor:wait}.events button:disabled span{font-size:10px}

.preview-sound{padding:10px 14px;border:1px solid #c2c8a250;border-radius:8px;color:#e5c69b;font-size:12px}

.guide-link{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;margin:10px 0 2px;padding:8px 12px;border:1px solid #d8c59455;border-radius:9px;background:#d8c59412;color:#ebd6aa;font-size:12px;text-decoration:none}.guide-link:hover,.guide-link:focus-visible{background:#d8c59428;outline:2px solid #d8c594;outline-offset:2px}