/* The selected room travels with you. Native buttons keep their focus behavior. */
#tabs{position:relative;isolation:isolate}
#tabs button{position:relative;z-index:1;transition:color 180ms ease,background-color 180ms ease}
.room-tab-indicator{position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:30px;background:var(--room,#183d36);box-shadow:0 3px 10px #183d3615;transition:transform 440ms cubic-bezier(.16,1,.3,1),width 440ms cubic-bezier(.16,1,.3,1),height 440ms cubic-bezier(.16,1,.3,1),background-color 380ms ease}
#tabs[data-motion-ready=true] button.active,body:not([data-section=all]) #tabs[data-motion-ready=true] button.active{background:transparent;border-color:transparent;color:#fff}
.section-stage{margin-top:12px;transform-origin:50% 0}
.section-stage>div{position:relative;z-index:1}
.room-resonance{position:absolute;width:330px;height:330px;right:-25px;top:50%;margin-top:-165px;border:1px solid var(--room-accent);border-radius:50%;box-shadow:0 0 0 28px color-mix(in srgb,var(--room-accent) 16%,transparent),0 0 0 57px color-mix(in srgb,var(--room-accent) 8%,transparent);opacity:0;pointer-events:none;z-index:0}
#cards,.section-stage{overflow-anchor:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.stage-art>span{transition:transform 500ms cubic-bezier(.16,1,.3,1)}.section-stage:hover .stage-art>span{transform:translateY(-3px) rotate(-3deg)}body[data-section=bass] .section-stage:hover .stage-art>span{transform:scaleX(1.5) translateY(-3px)}}
@media(max-width:650px){.room-resonance{width:240px;height:240px;right:-130px;margin-top:-120px}.room-tab-indicator{box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.room-resonance{display:none}}
