/* Compact mobile rhythm. Keep inputs at 16px to avoid iPhone focus zoom. */
@media(max-width:760px){
html{scroll-padding-top:94px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body:not(.display){font-size:14px;line-height:1.5;min-width:0}
body:not(.display) main{width:100%;min-width:0;padding:24px max(16px,env(safe-area-inset-left)) 40px;box-sizing:border-box}
body:not(.display) header{padding:8px max(16px,env(safe-area-inset-left));gap:10px;box-sizing:border-box;min-width:0;flex-wrap:wrap}
body:not(.display) header .brand{width:84px;flex-shrink:0}
body:not(.display) header .brand span{font-size:7px;letter-spacing:2px}
body:not(.display) header nav{gap:4px 12px;flex-wrap:wrap;align-items:center}
body:not(.display) header nav a{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
body:not(.display) .connection{font-size:9px;margin-left:auto}
body:not(.display) header nav{margin-left:auto}
body:not(.display) .guest-grid{grid-template-columns:minmax(0,1fr);gap:20px}
body:not(.display) .guest-grid>*,body:not(.display) .panel{min-width:0}
body:not(.display) .panel{padding:18px;margin-bottom:16px}
body:not(.display) .intro h1{font-size:38px;letter-spacing:-2px;margin:14px 0}
body:not(.display) .intro h1.hero-logo{margin:4px 0 12px}
body:not(.display) .hero-logo img{max-width:240px;width:75%;height:auto}
body:not(.display) .intro>p{font-size:14px;max-width:100%;margin:10px 0}
body:not(.display) .now{margin:18px 0;padding-left:14px}
body:not(.display) .now h2{font-size:23px}
body:not(.display) .rules{margin-top:20px;padding-top:14px;gap:12px;flex-wrap:wrap}
body:not(.display) .panel h2{font-size:24px;margin:16px 0;line-height:1.15}
body:not(.display) .genre-banner{padding:13px;margin:12px 0}
body:not(.display) .genre-banner strong{font-size:23px;margin-top:6px}
body:not(.display) .genre-banner p{font-size:12px;margin:6px 0 0}
body:not(.display) label{margin:12px 0;font-size:12px}
body:not(.display) input:not([type=checkbox]),body:not(.display) select,body:not(.display) textarea{font-size:16px;min-height:44px;max-width:100%;box-sizing:border-box}
body:not(.display) button,body:not(.display) .button,body:not(.display) .payment-link{min-height:44px;touch-action:manipulation}
body:not(.display) button{font-size:12px;padding:11px 14px}
body:not(.display) .chosen-track .large-cover{width:64px;height:64px;flex-basis:64px}
body:not(.display) .catalog-result{flex-wrap:wrap;padding:12px 0;gap:10px}
body:not(.display) .catalog-result .result-info{flex:1 1 150px}
body:not(.display) .catalog-result .pick-song{margin-left:auto}
body:not(.display) .commerce{margin-top:18px}
body:not(.display) .commerce summary{font-size:17px}
body:not(.display) footer{padding:20px 16px max(24px,env(safe-area-inset-bottom));font-size:9px;gap:12px;flex-wrap:wrap}
/* Event site and standalone pages */
body.immersive main{padding:0 18px 32px}
body.immersive header{padding:5px 16px;gap:8px;flex-wrap:nowrap}
body.immersive header .wordmark,body.explore header .wordmark{width:66px;max-width:66px;height:46px;flex:0 0 66px}
body.immersive header .wordmark img{width:112px;height:auto}
body.immersive header nav{gap:0 10px;justify-content:flex-end}
body.immersive header nav a{font-size:10px;min-height:36px}
body.immersive .motion-toggle{font-size:8px;padding:5px;min-height:36px}
body.immersive .hero{padding:32px 0 52px;gap:12px;min-height:0}
body.immersive .hero h1{font-size:clamp(34px,8.3vw,58px);margin:18px 0;line-height:.98}
body.immersive .hero .intro{font-size:14px;line-height:1.6}
body.immersive .eyebrow{font-size:9px;letter-spacing:2px}
body.immersive .button{padding:12px 18px;font-size:13px;margin-top:10px}
body.immersive .meta{font-size:9px;padding:14px 0;gap:15px;flex-wrap:wrap}
body.immersive .art{min-height:240px;max-width:340px}
body.immersive .art img{max-height:215px;object-fit:contain}
body.immersive .art .chrome-logo img{max-height:215px}
body.immersive .art p{font-size:8px;letter-spacing:2px}
body.immersive .equalizer{height:25px;margin:8px auto}
body.immersive .section{padding:38px 0}
body.immersive .section h2,body.immersive #tickets h2{font-size:clamp(30px,8vw,42px);letter-spacing:-1.5px;margin:12px 0 20px}
body.immersive .steps{margin-top:26px}
body.immersive .steps article{padding:18px}
body.immersive .steps article h3{font-size:22px}
body.immersive .steps p{font-size:13px}
body.immersive .sound-options{gap:8px;margin:20px 0}
body.immersive .sound-options button{min-width:88px;padding:10px 15px}
body.immersive .mood-line{font-size:16px}
body.immersive .notice,body.immersive .legal{font-size:12px}
body.immersive .posh-checkout{margin-top:18px;height:650px}
body.immersive .split{gap:24px}
body.immersive form{gap:10px}
body.immersive form label{margin:0}
body.immersive input[type=checkbox]{width:20px;height:20px}
body.explore .page-intro{padding:32px 0 24px}
body.explore .page-intro h1{font-size:clamp(34px,8.5vw,54px);letter-spacing:-.055em;margin:16px 0;line-height:1}
body.explore .intro{font-size:14px;line-height:1.6}
body.explore .challenge{gap:24px;padding:0 0 36px}
body.explore .music-search{padding:13px;gap:10px}
body.explore .card-area{max-width:420px;margin-inline:auto;width:100%}
body.explore .card-actions{gap:8px;margin-top:12px}
body.explore .page-outro{padding:32px 0 40px}
body.explore .page-outro h2{font-size:34px}
body.explore .night-steps article{padding:28px 0;grid-template-columns:36px minmax(0,1fr);gap:12px}
body.explore .night-steps article>span{font-size:29px;letter-spacing:-1px}
body.explore .night-steps h2{font-size:29px}
body.explore .night-steps p{font-size:13px}
body.explore .faqs summary{font-size:16px;min-height:44px;display:flex;align-items:center}
body.explore .faqs details{padding:10px 0}
}
@media(max-width:374px){body.immersive header{flex-wrap:wrap}body.immersive .motion-toggle{margin-left:auto}body:not(.display) .hero-logo img{max-width:200px}}
@media(max-width:760px){body.immersive .art{overflow:clip}body.immersive .art::before{display:none}body.immersive .ticker{margin-inline:-18px}}