/* === Reset === */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{font-size:100%;font:inherit;vertical-align:baseline;border:0;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}
table{border-collapse:collapse;border-spacing:0}
button{color:inherit;font:inherit;font-size:inherit;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;background-color:transparent;border:0;padding:0;-webkit-tap-highlight-color:transparent!important}
button::-moz-focus-inner{border:0;padding:0}
button:focus,button:active{outline:0!important}
input[type=text]{font-size:inherit;background-color:transparent;border:0}

/* === Font === */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:url(assets/montserrat-regular.ttf)format('truetype')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;src:url(assets/montserrat-bold.ttf)format('truetype')}

/* === Base === */
html{background-color:#1f1e21}
html,body,#root,#App{height:100%;overflow-y:auto}
#App{color:#fff;-webkit-overflow-scrolling:touch;background-image:url(assets/bg-high-res.jpg);background-size:cover;background-position:center;background-attachment:fixed;font-family:Montserrat,sans-serif;position:relative}
h1,h2,h3,h4,h5,p{font-family:Montserrat,sans-serif}
a{color:#fff}
a,.interactive{cursor:pointer}
.hoverOpacity:hover,a:hover{opacity:.8}
.hoverOpacity:active,a:active{opacity:.5}
*{box-sizing:border-box;line-height:1.4em}
.noSelect{user-select:none}
audio{width:230px;position:absolute;left:0}

@media(max-width:512px){html{font-size:14px}}
@media(max-width:448px){html{font-size:12px}}

/* === Background === */
.Background{position:fixed;top:0;left:0;right:0;bottom:0;background:inherit;z-index:-1}

/* === Title === */
.Title{text-align:center;margin-top:4rem}
.Title h1{text-transform:uppercase;font-size:4rem;letter-spacing:.05em}
.Title p{margin-top:.5rem;font-size:1.1rem;opacity:.9}

/* === Header === */
.Header{background-color:rgba(0,0,0,.3);flex-direction:column;justify-content:flex-start;height:2.8rem;transition:height .3s;display:flex;position:fixed;top:0;left:0;right:0;z-index:100}
.Header .container{justify-content:space-between;height:2.8rem;display:flex;padding:0 1rem;align-items:center}
.Header nav,.Header .GlobalVolume{height:2.8rem}
.Header nav{flex:1;justify-content:flex-end;align-items:center;max-width:32rem;display:inline-flex;gap:.35rem;margin-left:auto}
.Header .updateButton{cursor:pointer;border-radius:4px;padding:.25rem .75rem;text-decoration:underline;transition:background-color .3s,color .3s}
.Header .updateButton.active{color:#000;background-color:#fff;text-decoration:none}

/* === Language Switcher === */
.langSwitcher{display:none}

/* === Mini Controls (Header) === */
.MiniControls{display:inline-flex;align-items:center;gap:.35rem;margin-left:1rem;height:2.8rem}
.MiniControls .mini-pb{cursor:pointer;border:1.5px solid #fff;border-radius:4px;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;transition:background .3s,opacity .2s;opacity:.85}
.MiniControls .mini-pb:hover{background:rgba(255,255,255,.25);opacity:1}
.MiniControls .mini-pb:active{background:rgba(255,255,255,.4)}
.MiniControls .mini-secondary{cursor:pointer;border:1.5px solid #fff;border-radius:50%;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;transition:background .3s,opacity .2s;opacity:.85}
.MiniControls .mini-secondary:hover{background:rgba(255,255,255,.25);opacity:1}
.MiniControls .mini-secondary:active{background:rgba(255,255,255,.4)}
.MiniControls .mini-secondary.active{background:rgba(255,255,255,.55);opacity:1}
.MiniControls .mini-secondary.active svg circle[fill="#fff"]{fill:#1f1e21}
.MiniControls .mini-secondary.active svg ellipse{stroke:#1f1e21}
.MiniControls .mini-secondary.active svg circle{fill:#1f1e21}
.MiniControls .mini-secondary.active .mini-orbit-1{animation:miniOrbitSpin 3s linear infinite}
.MiniControls .mini-secondary.active .mini-orbit-2{animation:miniOrbitSpin 4s linear infinite reverse}
.MiniControls .mini-secondary.active .mini-orbit-3{animation:miniOrbitSpin 2.5s linear infinite}
@keyframes miniOrbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.MiniControls .mini-secondary.active .mini-orbit-2{transform-origin:12px 12px}
.MiniControls .mini-secondary.active .mini-orbit-3{transform-origin:12px 12px}
.MiniControls .mini-reset.reset-active{background:rgba(255,255,255,.55);opacity:1}
@media screen and (max-width:512px){.MiniControls{margin-left:.5rem}.MiniControls .mini-pb,.MiniControls .mini-secondary{width:1.5rem;height:1.5rem}.MiniControls .mini-pb svg,.MiniControls .mini-secondary svg{width:11px;height:11px}}
.langSwitcher .lang-btn{color:rgba(255,255,255,.6);font-size:.65rem;font-weight:700;padding:.2rem .55rem;transition:all .25s;letter-spacing:.03em;text-transform:uppercase}
.langSwitcher .lang-btn:hover{color:#fff;background:rgba(255,255,255,.15)}
.langSwitcher .lang-btn.active{color:#1f1e21;background:#fff}

/* === Global Volume === */
.GlobalVolume{justify-content:space-around;align-items:center;max-width:16rem;margin-left:1rem;display:inline-flex;position:relative}
@media screen and (max-width:512px){.GlobalVolume{margin-left:0}.GlobalVolume .sliderContainer{display:none}}
.GlobalVolume .mute{text-align:center;text-transform:uppercase;border:2px solid #fff;border-radius:4px;min-width:4rem;margin-left:1rem;padding:.25rem 0;font-size:.6rem;transition:background .3s,color .3s}
.GlobalVolume .mute:hover,.GlobalVolume .mute:active{color:#1f1e21;background:#fff}
.GlobalVolume input[type=range]{-webkit-appearance:none;width:100%;margin:11px 0}
.GlobalVolume input[type=range]:focus{outline:none}
.GlobalVolume input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#fff;border:0;border-radius:255px;width:100%;height:2px;box-shadow:0 0 1px #000}
.GlobalVolume input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;background:#fff;border:1px solid #c8c8c8;border-radius:4px;width:12px;height:24px;margin-top:-11px}
.GlobalVolume input[type=range]::-moz-range-track{cursor:pointer;background:#fff;border:0;border-radius:255px;width:100%;height:2px}
.GlobalVolume input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:1px solid #c8c8c8;border-radius:4px;width:12px;height:24px}

/* === Home === */
.home{width:100%;min-height:100%;padding:56px 20px}

/* === Play Controls === */
.PlayControls{flex:1;justify-content:center;align-items:flex-start;padding:3rem 0 2rem;display:flex;gap:2rem}
.PlayControls .pb{cursor:pointer;flex-direction:column;justify-content:space-around;align-items:flex-start;width:5rem;height:5rem;display:flex}
.PlayControls .pb .first{margin-left:.25rem;transition:border .15s linear,opacity .1s}
.PlayControls .pb .first:hover{opacity:.9}
.PlayControls .pb.play .first{border:2.5rem solid transparent;border-left:4.5rem solid #fff;border-right:0;width:5rem;height:5rem}
.PlayControls .pb.stop .first{border:0 solid transparent;border-left:1.6rem solid #fff;border-right:1.6rem solid #fff;width:4.5rem;height:4.5rem}
.PlayControls .secondary{cursor:pointer;border:2px solid #fff;border-radius:50%;width:2.5rem;min-width:38px;height:2.5rem;min-height:38px;font-size:.7rem;display:flex;margin-top:1.25rem}
.PlayControls .secondary:hover{background-color:rgba(255,255,255,.4)}
.PlayControls .secondary:active{background-color:rgba(255,255,255,.6)}
.PlayControls .buttonContents{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}
/* Meander SVG icon - orbital animation */
.PlayControls .secondary.meander .buttonContents{display:flex;align-items:center;justify-content:center}
.PlayControls .secondary.meander .meander-icon{display:block}
.PlayControls .secondary.meander .meander-icon .orbit{transition:opacity .3s}
.PlayControls .secondary.meander.active{background-color:rgba(255,255,255,.6)}
.PlayControls .secondary.meander.active .meander-icon circle[cy="20"]{fill:#1f1e21}
.PlayControls .secondary.meander.active .meander-icon .orbit ellipse{stroke:#1f1e21}
.PlayControls .secondary.meander.active .meander-icon .orbit circle{fill:#1f1e21}
.PlayControls .secondary.meander.active .orbit-1{animation:orbitSpin 3s linear infinite}
.PlayControls .secondary.meander.active .orbit-2{animation:orbitSpin 4s linear infinite reverse}
.PlayControls .secondary.meander.active .orbit-3{animation:orbitSpin 2.5s linear infinite}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.PlayControls .secondary.reset .buttonContents::before{content:'↺';font-size:1.2rem;color:#fff;line-height:1}

/* === Row Controls === */
.RowControls{width:35rem;max-width:90%;margin:1rem auto 2rem;position:relative}
.RowControls .container{justify-content:space-between;align-items:flex-start;width:35rem;max-width:100%;margin:0 auto;display:flex}
.RowControls button.rowControl{text-transform:uppercase;border:2px solid #fff;border-radius:4px;width:6rem;height:2rem;padding:.25rem 0;font-size:.75rem;transition:color .4s,background-color .4s,border-color .3s,border-radius .15s;box-sizing:border-box!important}
.RowControls button.rowControl.initial:hover{color:#1f1e21;background-color:#fff}
.RowControls button.rowControl.initial:active{background-color:#c8c8c8}
.RowControls button.rowControl.expanded{color:#1f1e21;background-color:#fff}
.RowControls .controlContent{border:0 solid transparent;width:100%;margin-top:1.5rem;transition:height .3s,border .3s;position:relative;overflow:hidden}
.RowControls .controlContent.initial{height:0;margin:0}
.RowControls .controlContent.expanded{height:auto}
.RowControls .controlContent .inner{height:100%}
.RowControls .controlContent.expanded .TimerInput,.RowControls .controlContent.expanded .ShareInput,.RowControls .controlContent.expanded .MixInput{background-color:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}

/* === Timer Input === */
.TimerInput{flex:1;flex-direction:column;align-items:center;padding:1rem;display:flex}
.TimerInput select{color:#fff;font-family:inherit;font-size:inherit;line-height:inherit;background-color:transparent}
.TimerInput select option{background-color:#1f1e21;color:#fff}
.TimerInput .timerModes{justify-content:center;gap:.5rem;width:100%;margin-bottom:1rem;display:flex}
.TimerInput .timerModes button{border:2px solid #fff;border-radius:4px;flex:1;max-width:8rem;height:3em;font-size:.9rem;transition:background .3s,border .3s}
.TimerInput .timerModes button.selected{background-color:rgba(255,255,255,.4)}
.TimerInput .timerModes button.deselected{border-color:gray}
.TimerInput .timerModes button.deselected:hover{background-color:rgba(255,255,255,.2)}
.TimerInput .timePicker{justify-content:center;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}
.TimerInput .timePicker select{border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.5rem 1rem;min-height:28px}
.TimerInput .startTimerBtn{text-align:center;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);border:2px solid #fff;border-radius:4px;padding:.5rem 2rem;font-weight:700;transition:background .3s}
.TimerInput .startTimerBtn:hover{background:rgba(255,255,255,.4)}
.TimerInput .timerDisplay{justify-content:center;align-items:center;flex-direction:column;gap:.5rem;display:flex}
.TimerInput .timerDisplay .time{font-size:2.5rem;font-weight:700}
.TimerInput .timerDisplay .message{font-size:.9rem;opacity:.8}
.TimerInput .cancelTimerBtn{text-align:center;text-transform:uppercase;color:#fff;background:rgba(230,140,50,.6);border:2px solid #fff;border-radius:4px;padding:.5rem 2rem;font-weight:700;margin-top:1rem;transition:background .3s}
.TimerInput .cancelTimerBtn:hover{background:rgba(230,140,50,.8)}

/* === Mix Input === */
.MixInput{flex:1;flex-direction:column;padding:1rem;display:flex;max-height:380px;overflow-y:auto}
.MixInput .mixRow{justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex}
.MixInput .mixRow .name{flex:1}
.MixInput .mixRow button{padding:.25rem .5rem;font-size:.8rem;text-decoration:underline}
.MixInput .mixRow .delete:hover{opacity:.7}
.MixInput .addMix{justify-content:center;padding:1rem;display:flex}
.MixInput .addMix input{color:#fff;border:2px solid #fff;border-radius:4px 0 0 4px;padding:.5rem .75rem;font-size:.9rem;width:12rem}
.MixInput .addMix button{text-transform:uppercase;color:#fff;border:2px solid #fff;border-radius:0 4px 4px 0;padding:.5rem 1rem;font-size:.75rem;transition:color .4s,background-color .4s}
.MixInput .addMix button:hover{color:#1f1e21;background-color:#fff}
.MixInput .empty{text-align:center;padding:2rem;opacity:.6;font-size:.9rem}

/* === Share Input === */
.ShareInput{flex:1;flex-direction:column;align-items:center;padding:2rem;display:flex}
.ShareInput p{margin-bottom:1rem;font-size:.9rem;text-align:center}
.ShareInput .shareUrl{color:#fff;border:2px solid #fff;border-radius:4px;padding:.75rem;width:100%;max-width:30rem;font-size:.8rem;word-break:break-all}
.ShareInput .copyBtn{text-transform:uppercase;color:#fff;border:2px solid #fff;border-radius:4px;margin-top:1rem;padding:.5rem 2rem;font-size:.75rem;font-weight:700;transition:color .4s,background-color .4s}
.ShareInput .copyBtn:hover{color:#1f1e21;background-color:#fff}

/* === Sound List === */
.SoundList{flex-flow:wrap;justify-content:center;max-width:1400px;margin:0 auto;display:flex}

/* === Sound Container === */
.SoundContainer{justify-content:center;align-items:center;width:250px;height:230px;display:flex;position:relative}
@media screen and (max-width:512px) and (min-width:400px){.SoundContainer{width:50%}}
.SoundContainer .inner{flex-direction:column;align-items:center;width:150px;height:180px;display:flex}
.SoundContainer .imageContainer{cursor:pointer;width:100px;height:100px;margin-bottom:1rem;position:relative;display:flex;align-items:center;justify-content:center}

/* SVG Icon base */
.sound-icon{width:80px;height:80px;display:block;overflow:visible}
.sound-icon .icon-fill{transition:opacity .3s ease}
.sound-icon .icon-outline{opacity:.9}
.sound-icon .icon-anim{opacity:0;transition:opacity .4s ease}

/* Show animation layer when active */
.SoundContainer.active .sound-icon .icon-anim{opacity:1}

.SoundContainer .imageContainer .loadingIndicator{opacity:0;z-index:1;background-color:rgba(0,0,0,.6);border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;transition:opacity .5s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}
.SoundContainer .imageContainer .loadingIndicator.loadingGlue{opacity:1}

.SoundContainer h3{position:relative;font-size:1rem;font-weight:400}
.SoundContainer .meanderIndicator{display:inline-block;width:14px;height:14px;position:absolute;top:1px;right:-20px;background:none}
.SoundContainer .meanderIndicator::before{content:'~';color:#fff;font-size:1.1rem;line-height:1;font-weight:700;display:block;text-align:center}

/* === Sound Slider === */
.SoundSlider{flex-direction:column;flex:1;justify-content:flex-end;width:100px;display:flex}
.SoundSlider span{display:block}
.SoundSlider input[type=range]{-webkit-appearance:none;background:0 0;width:100%;margin:10px 0}
.SoundSlider input[type=range]:focus{outline:none}
.SoundSlider input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#fff;border:0;border-radius:4px;width:100%;height:8px;box-shadow:0 0 #000}
.SoundSlider input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;background:#fff;border:1px solid #d9d9d9;border-radius:14px;width:28px;height:28px;margin-top:-10px;box-shadow:1px 1px 1px rgba(0,0,0,.25)}
.SoundSlider input[type=range]::-moz-range-track{cursor:pointer;background:#fff;border:0;border-radius:4px;width:100%;height:8px}
.SoundSlider input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:1px solid #d9d9d9;border-radius:14px;width:28px;height:28px;box-shadow:1px 1px 1px rgba(0,0,0,.25)}
.SoundSlider input[type=range]::-ms-track{cursor:pointer;color:transparent;background:0 0;border-color:transparent;width:100%;height:8px}
.SoundSlider input[type=range]::-ms-fill-lower{background:#f2f2f2;border:0;border-radius:8px}
.SoundSlider input[type=range]::-ms-fill-upper{background:#fff;border:0;border-radius:8px}
.SoundSlider input[type=range]::-ms-thumb{cursor:pointer;background:#fff;border:1px solid #d9d9d9;border-radius:14px;width:28px;height:8px}

/* === Toast === */
.Toast{z-index:999;color:#000;background:rgba(20,20,20,.8);justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}
.Toast .inner{text-align:center;background:#fff;border-radius:8px;flex-direction:column;align-items:center;width:40rem;max-width:90%;padding:2rem 2rem 1rem;display:flex}
.Toast .inner p{margin-bottom:1.5rem}
.Toast .button{text-align:center;text-transform:uppercase;color:#fff;background:#000;border-radius:4px;margin:1rem 0;padding:1rem 5rem;font-weight:700}
.Toast .button:hover{background:#141414}

/* === Meander Help Text === */
.meanderHelpText{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:1rem 2rem;border-radius:4px;font-size:.9rem;z-index:50;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============================================== */
/* === SVG Icon Animations (active when sound on) === */
/* ============================================== */

/* --- Rain: drops falling --- */
.SoundContainer.active .rd{animation:rainDrop 1.2s linear infinite}
.SoundContainer.active .rd.d1{animation-delay:0s}
.SoundContainer.active .rd.d2{animation-delay:.2s}
.SoundContainer.active .rd.d3{animation-delay:.4s}
.SoundContainer.active .rd.d4{animation-delay:.1s}
.SoundContainer.active .rd.d5{animation-delay:.3s}
@keyframes rainDrop{
    0%{opacity:0;transform:translateY(-4px)}
    20%{opacity:1}
    80%{opacity:1}
    100%{opacity:0;transform:translateY(8px)}
}

/* --- Thunder: lightning flash --- */
.SoundContainer.active .al{animation:thunderFlash 4s ease-in-out infinite}
@keyframes thunderFlash{
    0%,72%,100%{opacity:0}
    76%{opacity:0}
    78%{opacity:1}
    80%{opacity:.3}
    82%{opacity:.9}
    84%{opacity:.1}
    86%{opacity:.7}
    90%{opacity:0}
}

/* --- Waves: horizontal drift --- */
.SoundContainer.active .wv.w1{animation:waveDrift1 3s ease-in-out infinite}
.SoundContainer.active .wv.w2{animation:waveDrift2 3.5s ease-in-out infinite}
.SoundContainer.active .wv.w3{animation:waveDrift3 4s ease-in-out infinite}
@keyframes waveDrift1{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes waveDrift2{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes waveDrift3{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* --- Wind: flowing lines --- */
.SoundContainer.active .wl.l1{animation:windFlow1 2.5s ease-in-out infinite}
.SoundContainer.active .wl.l2{animation:windFlow2 3s ease-in-out infinite}
.SoundContainer.active .wl.l3{animation:windFlow3 2.8s ease-in-out infinite}
@keyframes windFlow1{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(8px);opacity:.8}}
@keyframes windFlow2{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(-6px);opacity:.7}}
@keyframes windFlow3{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(7px);opacity:.8}}

/* --- Fire: flickering --- */
.SoundContainer.active .fa{animation:fireFlicker 1.5s ease-in-out infinite}
@keyframes fireFlicker{
    0%,100%{opacity:0;transform:scale(1,1)}
    25%{opacity:.6;transform:scale(1.05,.95)}
    50%{opacity:.9;transform:scale(.95,1.05)}
    75%{opacity:.4;transform:scale(1.02,.98)}
}

/* --- Birds: wing flap --- */
.SoundContainer.active .bw-anim.left-anim{animation:wingFlapL 1s ease-in-out infinite}
.SoundContainer.active .bw-anim.right-anim{animation:wingFlapR 1s ease-in-out infinite}
@keyframes wingFlapL{0%,100%{transform:scaleY(1);opacity:.3}50%{transform:scaleY(.6);opacity:.8}}
@keyframes wingFlapR{0%,100%{transform:scaleY(1);opacity:.3}50%{transform:scaleY(.6);opacity:.8}}

/* --- Crickets: blade vibration --- */
.SoundContainer.active .cb.b1{animation:cricketVib1 .15s ease-in-out infinite}
.SoundContainer.active .cb.b2{animation:cricketVib2 .15s ease-in-out infinite}
.SoundContainer.active .cb.b3{animation:cricketVib3 .15s ease-in-out infinite}
@keyframes cricketVib1{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
@keyframes cricketVib2{0%,100%{transform:translateX(1px)}50%{transform:translateX(-1px)}}
@keyframes cricketVib3{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1px)}}

/* --- Coffee Shop: steam rising --- */
.SoundContainer.active .st.s1{animation:steamRise 2s ease-out infinite}
.SoundContainer.active .st.s2{animation:steamRise 2s ease-out infinite .6s}
.SoundContainer.active .st.s3{animation:steamRise 2s ease-out infinite 1.2s}
@keyframes steamRise{
    0%{opacity:0;transform:translateY(0) scale(1)}
    30%{opacity:.8}
    100%{opacity:0;transform:translateY(-10px) scale(1.3)}
}

/* --- Singing Bowl: ripple expand --- */
.SoundContainer.active .rp.r1{animation:rippleExpand 2.5s ease-out infinite}
.SoundContainer.active .rp.r2{animation:rippleExpand 2.5s ease-out infinite .8s}
.SoundContainer.active .rp.r3{animation:rippleExpand 2.5s ease-out infinite 1.6s}
@keyframes rippleExpand{
    0%{opacity:0;transform:scale(.8)}
    30%{opacity:.8}
    100%{opacity:0;transform:scale(1.3)}
}

/* --- White Noise: dot flicker --- */
.SoundContainer.active .nd.n1{animation:dotFlicker 1.5s ease-in-out infinite}
.SoundContainer.active .nd.n2{animation:dotFlicker 1.5s ease-in-out infinite .2s}
.SoundContainer.active .nd.n3{animation:dotFlicker 1.5s ease-in-out infinite .4s}
.SoundContainer.active .nd.n4{animation:dotFlicker 1.5s ease-in-out infinite .6s}
.SoundContainer.active .nd.n5{animation:dotFlicker 1.5s ease-in-out infinite .8s}
.SoundContainer.active .nd.n6{animation:dotFlicker 1.5s ease-in-out infinite 1s}
.SoundContainer.active .nd.n7{animation:dotFlicker 1.5s ease-in-out infinite 1.2s}
.SoundContainer.active .nd.n8{animation:dotFlicker 1.5s ease-in-out infinite 1.4s}
@keyframes dotFlicker{
    0%,100%{opacity:0}
    50%{opacity:1}
}

/* === Responsive === */
@media(max-width:768px){
    .Header .updateButton{padding:.2rem .4rem;font-size:.65rem}
    .langSwitcher .lang-btn{font-size:.55rem;padding:.15rem .35rem}
}
@media(max-width:600px){
    .Title h1{font-size:3rem}
    .PlayControls{gap:1rem}
    .SoundContainer{width:50%;height:200px}
    .langSwitcher .lang-btn{font-size:.5rem;padding:.1rem .3rem}
    .Header .updateButton{padding:.15rem .3rem;font-size:.6rem}
    .Header nav{gap:.2rem}
}
@media(max-width:448px){
    .SoundContainer{width:100%;height:180px}
    .Title h1{font-size:2.5rem}
    .GlobalVolume .mute{min-width:3rem;font-size:.5rem}
}

/* === More Sounds Button === */
.MoreSoundsWrapper{text-align:center;padding:2rem 0}
.moreSoundsBtn{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:.75rem 2.5rem;font-size:.9rem;font-weight:400;transition:all .3s;cursor:pointer}
.moreSoundsBtn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}

/* === Extended Sounds === */
.ExtendedSounds{padding-bottom:2rem}
.ext-category{max-width:1400px;margin:0 auto;padding:1rem 0}
.ext-category-title{text-align:center;color:rgba(255,255,255,.6);font-size:1.1rem;font-weight:300;letter-spacing:2px;text-transform:uppercase;margin:2rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ext-sound-grid{flex-flow:wrap;justify-content:center;display:flex}

/* Extended sound containers inherit SoundContainer styles */
.SoundContainer.ext-sound{width:200px;height:200px}
.SoundContainer.ext-sound .inner{width:130px;height:160px}
.SoundContainer.ext-sound .imageContainer{width:80px;height:80px}
.SoundContainer.ext-sound .sound-icon{width:70px;height:70px}
.SoundContainer.ext-sound h3{font-size:.85rem}

/* === About Section (always visible at bottom) === */
.AboutAutoSection{width:100%;margin-top:12rem;padding-bottom:0;margin-bottom:-56px;position:relative}
.AboutAutoSection .wave-top{width:100vw;margin-left:calc(-50vw + 50%);display:block;line-height:0;height:40px}
.AboutAutoSection .wave-top svg{width:100%;height:40px;display:block}
.AboutAutoSection .inner{background:linear-gradient(#1e2832,#3c281e);width:100vw;margin-left:calc(-50vw + 50%);padding:1rem 0 56px}
.AboutAutoSection .content{width:800px;max-width:90%;margin-left:auto;margin-right:auto;padding-top:7.5rem;font-size:1.1rem;line-height:1.45}
.AboutAutoSection .content p{margin-bottom:1.5rem}
.AboutAutoSection .content h2{font-size:1.8rem;font-weight:700;margin-bottom:1rem;margin-top:.5rem}
.AboutAutoSection .content a{color:#8ab4f8;text-decoration:underline}
.AboutAutoSection .content a:hover{opacity:.8}

/* === Info Page (standalone Privacy/Contact) === */
.info-page{width:100vw;margin-left:calc(-50vw + 50%);margin-top:-56px;margin-bottom:-56px;padding:calc(2.8rem + 6rem) 0 6rem;min-height:100vh;background:linear-gradient(#1e2832,#3c281e);display:flex;flex-direction:column;justify-content:center}
.info-page .inner{width:100%;padding:0}
.info-page .content{width:800px;max-width:90%;margin-left:auto;margin-right:auto;padding-top:2rem;font-size:1.1rem;line-height:1.45}
.info-page .content p{margin-bottom:1.5rem}
.info-page .content h2{font-size:1.8rem;font-weight:700;margin-bottom:1rem;margin-top:.5rem}
.info-page .content h3{font-size:1.3rem;font-weight:700;margin-bottom:.75rem;margin-top:1.5rem}
.info-page .content a{color:#8ab4f8;text-decoration:underline}
.info-page .content a:hover{opacity:.8}
.info-page .content .policy-updated{font-size:.85rem;opacity:.55;font-style:italic;margin-bottom:1.5rem}
.info-page .back-home{text-align:center;margin-top:3rem;padding-bottom:4rem}
.info-page .back-home a{display:inline-block;color:#fff;background:rgba(255,255,255,.15);border:2px solid #fff;border-radius:6px;padding:.6rem 2rem;font-size:.85rem;text-transform:uppercase;text-decoration:none;letter-spacing:.05em;transition:background .3s,color .3s}
.info-page .back-home a:hover{color:#1f1e21;background:#fff}

/* === Extended Icon Animations === */
.SoundContainer.active .ex-sun{animation:exPulse 2s ease-in-out infinite}
.SoundContainer.active .ex-rain{animation:exRainDrop 1.5s linear infinite}
.SoundContainer.active .ex-pulse{animation:exPulse 2s ease-in-out infinite}
.SoundContainer.active .ex-light{animation:exBlink 3s ease-in-out infinite}
.SoundContainer.active .ex-dot{animation:exPulse 2s ease-in-out infinite}
.SoundContainer.active .ex-move{animation:exMove 1s linear infinite}
.SoundContainer.active .ex-rotate{animation:exRotate 4s linear infinite}
.SoundContainer.active .ex-wave{animation:exWave 2s ease-in-out infinite}

@keyframes exPulse{0%,100%{opacity:0}50%{opacity:1}}
@keyframes exRainDrop{0%{opacity:0;transform:translateY(-5px)}50%{opacity:1}100%{opacity:0;transform:translateY(5px)}}
@keyframes exBlink{0%,100%{opacity:0}50%{opacity:.8}}
@keyframes exMove{0%{opacity:0;transform:translateX(-3px)}50%{opacity:1}100%{opacity:0;transform:translateX(3px)}}
@keyframes exRotate{0%{opacity:0;transform:rotate(0deg)}50%{opacity:.6}100%{opacity:0;transform:rotate(360deg)}}
@keyframes exWave{0%,100%{opacity:0}50%{opacity:1}}

/* === Per-sound extended icon animations === */
.SoundContainer.active .sound-icon .icon-fill{opacity:1}
.SoundContainer.active .ei-flow{animation:eiFlow 3s linear infinite}
.SoundContainer.active .ei-drift{animation:eiDrift 2.5s ease-in-out infinite}
.SoundContainer.active .ei-flame{animation:eiFlame 1.2s ease-in-out infinite}
.SoundContainer.active .ei-wind{animation:eiWind 2s ease-in-out infinite}
.SoundContainer.active .ei-wind-fast{animation:eiWind 1.2s ease-in-out infinite}
.SoundContainer.active .ei-sway{animation:eiSway 2.5s ease-in-out infinite}
.SoundContainer.active .ei-fall{animation:eiFall 1.8s linear infinite}
.SoundContainer.active .ei-pulse{animation:eiPulse 2s ease-in-out infinite}
.SoundContainer.active .ei-bounce{animation:eiBounce 0.6s ease-in-out infinite}
.SoundContainer.active .ei-drop{animation:eiDrop 1.5s linear infinite}
.SoundContainer.active .ei-flash{animation:eiFlash 1s ease-in-out infinite}
.SoundContainer.active .ei-flap{animation:eiFlap 0.8s ease-in-out infinite}
.SoundContainer.active .ei-purr{animation:eiPurr 0.5s ease-in-out infinite}
.SoundContainer.active .ei-vibrate{animation:eiVibrate 0.15s ease-in-out infinite}
.SoundContainer.active .ei-wave{animation:eiWave 2s ease-in-out infinite}
.SoundContainer.active .ei-rise{animation:eiRise 2.5s ease-out infinite}
.SoundContainer.active .ei-rotate{animation:eiRotate 4s linear infinite}
.SoundContainer.active .ei-tick{animation:eiTick 1s steps(2) infinite}
.SoundContainer.active .ei-wipe{animation:eiWipe 2s ease-in-out infinite}
.SoundContainer.active .ei-move-down{animation:eiMoveDown 1.2s linear infinite}
.SoundContainer.active .ei-flash-red{animation:eiFlash 3s ease-in-out infinite}
.SoundContainer.active .ei-flash-yellow{animation:eiFlash 3s ease-in-out infinite 1s}
.SoundContainer.active .ei-flash-green{animation:eiFlash 3s ease-in-out infinite 2s}

@keyframes eiFlow{0%{opacity:0;transform:translateX(-5px)}50%{opacity:1}100%{opacity:0;transform:translateX(5px)}}
@keyframes eiDrift{0%{opacity:0;transform:translateX(-4px)}50%{opacity:1}100%{opacity:0;transform:translateX(4px)}}
@keyframes eiFlame{0%,100%{opacity:0;transform:scaleY(0.8)}50%{opacity:.8;transform:scaleY(1.1)}}
@keyframes eiWind{0%{opacity:0;transform:translateX(-6px)}50%{opacity:1}100%{opacity:0;transform:translateX(6px)}}
@keyframes eiSway{0%,100%{opacity:0;transform:rotate(-3deg)}50%{opacity:.8;transform:rotate(3deg)}}
@keyframes eiFall{0%{opacity:0;transform:translateY(-8px)}50%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@keyframes eiPulse{0%,100%{opacity:0}50%{opacity:1}}
@keyframes eiBounce{0%,100%{opacity:0;transform:translateY(-3px)}50%{opacity:.8;transform:translateY(3px)}}
@keyframes eiDrop{0%{opacity:0;transform:translateY(-5px)}50%{opacity:1}100%{opacity:0;transform:translateY(5px)}}
@keyframes eiFlash{0%,100%{opacity:0}50%{opacity:1}}
@keyframes eiFlap{0%,100%{opacity:0;transform:scaleX(0.7)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes eiPurr{0%,100%{opacity:0;transform:scale(0.95)}50%{opacity:.3;transform:scale(1.05)}}
@keyframes eiVibrate{0%,100%{opacity:0;transform:translateX(-1px)}50%{opacity:.7;transform:translateX(1px)}}
@keyframes eiWave{0%,100%{opacity:0}50%{opacity:1}}
@keyframes eiRise{0%{opacity:0;transform:translateY(8px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}
@keyframes eiRotate{0%{opacity:0;transform:rotate(0deg)}50%{opacity:.6}100%{opacity:0;transform:rotate(360deg)}}
@keyframes eiTick{0%{opacity:0}50%{opacity:.8}100%{opacity:0}}
@keyframes eiWipe{0%,100%{opacity:0;transform:rotate(-8deg)}50%{opacity:.8;transform:rotate(8deg)}}
@keyframes eiMoveDown{0%{opacity:0;transform:translateY(-6px)}50%{opacity:1}100%{opacity:0;transform:translateY(6px)}}

/* === Reduced motion === */
@media(prefers-reduced-motion:reduce){
    .SoundContainer.active .rd,
    .SoundContainer.active .al,
    .SoundContainer.active .wv,
    .SoundContainer.active .wl,
    .SoundContainer.active .fa,
    .SoundContainer.active .bw-anim,
    .SoundContainer.active .cb,
    .SoundContainer.active .st,
    .SoundContainer.active .rp,
    .SoundContainer.active .nd{animation:none}
    .SoundContainer.active [class^="ei-"]{animation:none}
    .SoundContainer.active .sound-icon .icon-anim{opacity:.5}
}

/* === Blog Page === */
.blog-page{width:100%;min-height:100%;padding:5rem 20px 3rem}
.blog-container{max-width:800px;margin:0 auto;background:rgba(0,0,0,.2);border-radius:12px;padding:2rem 2.5rem}
.blog-container .back-home{display:inline-block;margin-bottom:1.5rem;font-size:.9rem;text-decoration:none;opacity:.8;transition:opacity .3s}
.blog-container .back-home:hover{opacity:1}
.blog-container h1{font-size:2.5rem;font-weight:700;margin-bottom:2rem;text-transform:uppercase;letter-spacing:.05em}
.blog-article-list{display:flex;flex-direction:column;gap:1.5rem}
.blog-article-item{background:rgba(255,255,255,.08);border-radius:8px;padding:1.5rem;cursor:pointer;transition:background .3s,border-color .3s;border:1px solid rgba(255,255,255,.1)}
.blog-article-item:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}
.blog-article-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.blog-article-date{font-size:.85rem;opacity:.6;margin-bottom:.75rem}
.blog-article-excerpt{font-size:1rem;line-height:1.5;opacity:.85}
.blog-article-detail{font-size:1.1rem;line-height:1.6;background:rgba(255,255,255,.06);border-radius:8px;padding:2rem;margin-bottom:2rem}
.blog-article-detail-title{font-size:1.8rem;font-weight:700;margin-bottom:.5rem}
.blog-article-detail .blog-article-date{font-size:.85rem;opacity:.6;margin-bottom:1.5rem}
.blog-article-body h2{font-size:1.6rem;font-weight:700;margin:1.5rem 0 .75rem}
.blog-article-body h3{font-size:1.3rem;font-weight:700;margin:1.5rem 0 .5rem}
.blog-article-body p{margin-bottom:1rem}
.blog-article-body a{color:#8ab4f8;text-decoration:underline}
.blog-article-body a:hover{opacity:.8}
.blog-article-body code{background:rgba(255,255,255,.1);padding:.15rem .4rem;border-radius:3px;font-size:.9em;font-family:monospace}
.back-to-blog{display:inline-block;margin-top:2rem;font-size:.9rem;text-decoration:underline;opacity:.8;transition:opacity .3s;background:none;border:none}
.back-to-blog:hover{opacity:1}
.blog-not-found{text-align:center;padding:3rem;opacity:.6;font-size:1.1rem}
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap}
.blog-page-btn{min-width:2.2rem;height:2.2rem;padding:0 .6rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:rgba(255,255,255,.06);color:#fff;font-size:.9rem;cursor:pointer;transition:background .25s,border-color .25s,transform .15s;display:flex;align-items:center;justify-content:center}
.blog-page-btn:hover:not(:disabled):not(.active){background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.blog-page-btn:active:not(:disabled):not(.active){transform:scale(.94)}
.blog-page-btn.active{background:rgba(255,255,255,.85);color:#1f1e21;border-color:rgba(255,255,255,.85);font-weight:700;cursor:default}
.blog-page-btn:disabled{opacity:.35;cursor:not-allowed}
.blog-page-nav{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;padding:0 .9rem}
.blog-page-ellipsis{color:rgba(255,255,255,.4);font-size:.9rem;user-select:none;padding:0 .2rem}