.noise-scenes{padding:95px 0 75px;background:#fff;scroll-margin-top:0}
.scene-heading{text-align:center;margin-bottom:48px}.scene-heading .section-label{font-size:13px;color:var(--muted);font-weight:400;margin-bottom:18px}.scene-heading h2{font-size:clamp(40px,4.3vw,64px);line-height:1.08;margin:0 auto 22px;max-width:900px}.scene-heading>p:last-child{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.scene-rail-shell{max-width:1600px;margin:auto}.scene-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;padding:4px var(--gutter) 8px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}.scene-rail::-webkit-scrollbar{display:none}.scene-rail:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.noise-card{position:relative;isolation:isolate;height:clamp(380px,35vw,530px);min-width:0;border-radius:28px;overflow:hidden;background:var(--ink);color:white;scroll-snap-align:start}.noise-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.noise-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b142155,transparent 30%,transparent 45%,#0b1421c9 100%);pointer-events:none}.noise-card h3{position:absolute;inset:30px 15px auto;text-align:center;font-size:21px;font-weight:400;letter-spacing:-.025em;line-height:1.25;margin:0;text-shadow:0 1px 14px #08132266}.noise-card[data-scene=pet]>img{object-position:51% center}
.scene-card-bottom{position:absolute;bottom:24px;left:22px;right:22px}.scene-caption{font-size:11px;text-align:left;color:#e4eaf3;margin-bottom:16px;line-height:1.5;min-height:17px;transition:color .2s}.noise-card.has-ambience .scene-caption{color:#fff}.scene-card-controls{display:flex;justify-content:space-between;gap:10px;align-items:center}.scene-play{position:relative;flex:0 0 44px;width:44px;height:44px;border:1px solid #ffffff20;border-radius:50%;background:#fff3;backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;transition:background .2s}.scene-play:hover{background:#fff5}.scene-play svg{width:19px;height:19px}.scene-play-icon{fill:currentColor;stroke:none;margin-left:2px}.scene-play .scene-pause-icon{display:none;stroke-width:3}.noise-card.is-playing .scene-play{background:var(--blue);border-color:transparent}.noise-card.is-playing .scene-play-icon{display:none}.noise-card.is-playing .scene-pause-icon{display:block}.scene-loader{display:none;width:18px;height:18px;border:2px solid #fff5;border-top-color:#fff;border-radius:50%;animation:scene-spin .8s linear infinite}.noise-card.is-loading .scene-play svg{display:none}.noise-card.is-loading .scene-loader{display:block}@keyframes scene-spin{to{transform:rotate(360deg)}}
.scene-toggle{display:flex;align-items:center;gap:8px;min-height:44px;border:0;padding:7px 10px 7px 12px;border-radius:30px;background:#ffffff1f;color:#fff;backdrop-filter:blur(16px);font-size:12px;white-space:nowrap}.scene-toggle:hover{background:#ffffff30}.scene-switch-track{position:relative;display:block;width:32px;height:21px;border-radius:22px;background:#ffffff35;transition:background .2s}.scene-switch-track>span{position:absolute;top:3px;left:3px;width:15px;height:15px;background:white;border-radius:50%;transition:transform .2s}.scene-toggle[aria-checked=true] .scene-switch-track{background:#617ee8}.scene-toggle[aria-checked=true] .scene-switch-track>span{transform:translateX(11px)}.scene-toggle-value{width:16px;text-align:left;font-size:11px}
.scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:27px}.scene-volume{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.scene-volume svg{width:17px;height:17px;flex-shrink:0}.scene-volume label{white-space:nowrap}.scene-volume input{width:100px;min-width:50px;height:28px;accent-color:var(--ink);margin:0;cursor:pointer}.scene-volume output{width:27px;font-variant-numeric:tabular-nums;font-size:10px}.scene-library-link{display:flex;align-items:center;gap:12px;font-size:12px;border-bottom:1px solid #cbd1df;padding-bottom:3px}.scene-library-link:hover{border-color:var(--ink)}.scene-library-link span{font-size:19px}
.scene-paging{display:flex;align-items:center;gap:18px;background:var(--cloud);border-radius:30px;padding:4px 8px}.scene-paging[hidden]{display:none}.scene-paging button{display:grid;place-items:center;border:0;background:transparent;border-radius:50%;width:36px;height:36px}.scene-paging button:disabled{color:#b0b8c9;cursor:default}.scene-paging svg{width:20px;height:20px}.scene-progress{width:80px;height:3px;background:#d2d8e4;border-radius:4px;overflow:hidden}.scene-progress>span{display:block;width:25%;height:100%;background:var(--ink);border-radius:4px;transform-origin:left}.scene-status:not(.sr-only){text-align:center;font-size:13px;color:#a33749;padding:20px var(--gutter) 0;margin:0}
@media(min-width:1500px){.scene-toggle{font-size:12px;padding:8px 13px;gap:10px}.scene-toggle-value{font-size:11px}.scene-play{width:50px;height:50px;flex-basis:50px}.scene-card-bottom{left:25px;right:25px;bottom:26px}.noise-card h3{font-size:24px}.scene-caption{font-size:12px}}
@media(max-width:1100px){.scene-rail{grid-auto-columns:calc((100% - 40px)/3)}.noise-card{height:420px}.scene-card-bottom{left:18px;right:18px}.scene-toolbar{flex-wrap:wrap}.scene-volume{flex:1}.scene-paging{order:3;margin:auto}.scene-library-link{margin-left:auto}}
@media(max-width:800px){.scene-rail{grid-auto-columns:calc((100% - 36px)/2.2);gap:18px}.noise-card{height:410px}.scene-heading h2{font-size:48px}.scene-heading .section-label{font-size:12px}.scene-toolbar{gap:20px}.scene-paging{order:0}.scene-library-link{font-size:11px}.scene-volume input{width:80px}.scene-volume label{display:none}}
@media(max-width:600px){.noise-scenes{padding:65px 0 50px}.scene-heading{margin-bottom:30px}.scene-heading h2{font-size:39px;line-height:1.12}.scene-heading .section-label{font-size:11px;margin-bottom:17px}.scene-heading>p:last-child{font-size:13px}.scene-rail{grid-auto-columns:calc(100% - 24px);gap:14px;padding-bottom:6px}.noise-card{height:420px;border-radius:24px}.noise-card h3{font-size:23px;top:28px}.scene-card-bottom{left:22px;right:22px;bottom:23px}.scene-caption{font-size:12px}.scene-toggle{font-size:11px;gap:8px}.scene-toolbar{margin-top:20px;gap:17px;justify-content:center}.scene-volume{flex:0 0 100%;justify-content:center}.scene-volume label{display:block}.scene-volume input{width:100px}.scene-paging{order:0;gap:10px}.scene-paging button{width:30px;height:32px}.scene-progress{width:60px}.scene-library-link{font-size:10px;margin-left:0;gap:8px}.scene-library-link span{font-size:16px}}
@media(max-width:360px){.scene-heading h2{font-size:33px}.noise-card{height:385px}.noise-card h3{font-size:21px}.scene-card-bottom{left:16px;right:16px}.scene-play{width:42px;height:42px;flex-basis:42px}.scene-toggle{font-size:10px;padding:7px 8px;gap:6px}.scene-switch-track{width:30px}.scene-toggle[aria-checked=true] .scene-switch-track>span{transform:translateX(9px)}.scene-paging{gap:6px}.scene-progress{width:40px}.scene-library-link{font-size:10px}.scene-toolbar{gap:14px}.scene-card-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.noise-card *{transition:none!important}.scene-loader{animation:none}}

/* Selected Night gallery direction. */
.noise-scenes.night-gallery{background:#20283f;color:white}
.night-gallery .scene-heading>p:last-child{color:#b7c1d4}
.night-gallery .scene-rail{grid-auto-columns:calc((100% - 60px)/4)}
.night-gallery .noise-card{height:390px;border-radius:100px 100px 16px 16px;background:#303a52}
.night-gallery .noise-card>img{height:calc(100% - 74px)}
.night-gallery .noise-card:after{bottom:74px;background:linear-gradient(180deg,transparent 35%,#07101bdb)}
.night-gallery .noise-card h3{inset:auto 20px 108px;text-align:left;font-size:23px}
.night-gallery .scene-card-bottom{inset:auto 16px 15px}
.night-gallery .scene-caption{position:absolute;bottom:65px;margin:0;font-size:10px;color:#cad3e1}
.night-gallery .scene-toggle{background:transparent;padding:4px 0;gap:7px;font-size:11px}
.night-gallery .scene-play{background:#e8d7b9;color:#20283f;border:none}
.night-gallery .noise-card.is-playing .scene-play{background:#7792ef;color:white}
.night-gallery .scene-volume{color:#c4cde0}
.night-gallery .scene-volume input{accent-color:#c5d2ff}
.night-gallery .scene-paging{background:#36415a;color:white}
.night-gallery .scene-progress>span{background:#d9c7a8}

.night-gallery .scene-heading{display:flex;align-items:end;justify-content:space-between;text-align:left;gap:30px;margin-bottom:28px}
.night-gallery .scene-heading .section-label{display:none}
.night-gallery .scene-heading h2{font-size:clamp(28px,3vw,40px);max-width:none;margin:0;line-height:1.13;letter-spacing:-.04em}
.night-gallery .scene-heading>p:last-child{font-size:12px}
.night-gallery .scene-play{width:44px;height:44px;flex-basis:44px}
.night-gallery .scene-play:hover{background:#f6e8d1}
.night-gallery .noise-card.is-playing .scene-play:hover{background:#90a6ee}
.night-gallery .scene-toggle:hover{background:transparent}
.night-gallery .scene-library-link{color:#c4cde0;border-color:#64708a}
.night-gallery .scene-library-link:hover{color:white;border-color:white}
.night-gallery .scene-status:not(.sr-only){color:#ffb8bf}
.night-gallery button:focus-visible{outline:3px solid #9bb1ff;outline-offset:4px}
@media(max-width:1100px){.night-gallery .scene-rail{grid-auto-columns:calc((100% - 36px)/3);gap:18px}}
@media(max-width:800px){.night-gallery .scene-heading{display:block}.night-gallery .scene-heading>p:last-child{margin-top:14px}.night-gallery .scene-rail{grid-auto-columns:calc((100% - 18px)/2.2)}}
@media(max-width:600px){.night-gallery .scene-heading h2{font-size:30px}.night-gallery .scene-heading>p:last-child{font-size:11px}.night-gallery .scene-rail{grid-auto-columns:calc(100% - 16px);gap:14px}}

/* Keep the gallery controls comfortable at phone and tablet widths. */
.night-gallery .scene-toggle{backdrop-filter:none;-webkit-backdrop-filter:none}
.night-gallery .scene-paging button{width:44px;height:44px;flex:0 0 44px}
.night-gallery .scene-volume input{height:44px}
@media(max-width:1100px){
 .night-gallery .scene-rail{grid-auto-columns:calc((100% - 36px)/3)}
}
@media(max-width:900px){
 .night-gallery .scene-rail{grid-auto-columns:calc((100% - 18px)/2.2)}
 .night-gallery .scene-toolbar{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center}
 .night-gallery .scene-volume{justify-content:flex-start}
 .night-gallery .scene-volume label{display:block}
 .night-gallery .scene-paging{order:0;margin:0;grid-column:2;grid-row:1}
 .night-gallery .scene-library-link{grid-column:1/-1;justify-self:center;margin:0;min-height:44px;align-items:center;font-size:12px}
}
@media(max-width:600px){
 .noise-scenes.night-gallery{padding:44px 0 36px}
 .night-gallery .scene-heading{margin-bottom:24px}
 .night-gallery .scene-heading h2{font-size:clamp(26px,7.7vw,32px)}
 .night-gallery .scene-heading>p:last-child{font-size:13px;margin-top:16px}
 .night-gallery .scene-rail{grid-auto-columns:calc(100% - 16px);gap:14px}
 .night-gallery .noise-card{height:380px}
 .night-gallery .noise-card h3{font-size:22px;inset:auto 18px 112px}
 .night-gallery .scene-caption{font-size:11px;bottom:65px}
 .night-gallery .scene-toggle{font-size:12px;gap:8px}
 .night-gallery .scene-switch-track{width:34px;height:22px;flex:0 0 34px}
 .night-gallery .scene-switch-track>span{width:16px;height:16px}
 .night-gallery .scene-toggle[aria-checked=true] .scene-switch-track>span{transform:translateX(12px)}
 .night-gallery .scene-toggle-value{font-size:12px;width:20px}
 .night-gallery .scene-toolbar{gap:12px;margin-top:16px}
 .night-gallery .scene-volume{gap:8px;min-width:0}
 .night-gallery .scene-volume label{display:none}
 .night-gallery .scene-volume input{width:clamp(55px,18vw,90px);min-width:0}
 .night-gallery .scene-volume output{font-size:11px}
 .night-gallery .scene-paging{gap:5px;padding:2px 5px}
 .night-gallery .scene-progress{width:32px}
}
.night-gallery{scroll-margin-top:-24px}
@media(max-width:600px){.night-gallery{scroll-margin-top:-18px}}

/* Keep the cat's face inside the arched photo crop. */
.noise-card[data-scene="pet"]>img{object-position:center top}
