/* Artwork, titles and the analyser form an asymmetric but centered stage. */
.av-now{display:none;flex:1;grid-template-columns:minmax(280px,.92fr) minmax(0,1.15fr);align-items:center;gap:clamp(44px,7vw,110px);width:min(1320px,100%);margin:44px auto 32px}
.is-visual-live .av-now{display:grid}
.av-art-column{min-width:0;max-width:540px}
.av-art-orbit{position:relative;padding:38px;animation:av-float 8s ease-in-out infinite;animation-play-state:paused}
.av-art-orbit::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--av-accent) 22%,transparent),transparent 67%);pointer-events:none}
.av-orbit-ring{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--av-line) 60%,transparent);border-radius:50%;pointer-events:none;animation:av-orbit 32s linear infinite;animation-play-state:paused}
.av-orbit-ring::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 25deg,transparent 8%,var(--av-accent) 20%,transparent 34%,transparent 57%,var(--av-highlight) 69%,transparent 83%);mask-image:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));opacity:.8}
.av-orbit-ring::after{content:"";position:absolute;left:14%;top:14%;width:7px;height:7px;border-radius:50%;background:var(--av-highlight);box-shadow:0 0 20px var(--av-highlight)}
.av-cover{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;border:1px solid color-mix(in srgb,var(--av-accent) 36%,transparent);background:radial-gradient(circle at 28% 24%,#7ab7a5,#375e6b 68%,#193b4b);box-shadow:0 26px 60px rgba(9,20,39,.32),0 0 28px color-mix(in srgb,var(--av-accent) 12%,transparent);contain:paint}
.av-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.17),transparent 34%,transparent 76%,rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.av-cover img{display:block;width:100%;height:100%;object-fit:cover}
.av-cover-placeholder{display:grid;place-items:center;position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 8px,rgba(216,247,227,.08) 9px 10px)}
.av-cover-placeholder span{font-size:80px;color:#e1f0d8;text-shadow:0 3px 40px rgba(192,226,190,.3)}
.av-track{min-width:0}
.av-track h2{margin:0 0 22px;font-size:clamp(38px,5.1vw,76px);font-weight:650;line-height:1.06;letter-spacing:-.045em;overflow-wrap:anywhere;color:var(--av-ink)}
.av-track p{margin:0;font-size:19px;color:var(--av-muted);overflow-wrap:anywhere}
.av-track-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.av-sample-rate{display:inline-flex;align-items:center;min-height:26px;padding:2px 9px;border:1px solid var(--av-line);border-radius:20px;color:var(--av-muted);font:12px ui-monospace,monospace}
.av-spectrum{position:relative;height:clamp(220px,27vh,310px);margin:36px 0 14px}
.av-canvas{position:absolute;inset:0;width:100%;height:100%;contain:strict}
.is-playing :is(.av-art-orbit,.av-orbit-ring){animation-play-state:running;will-change:transform}
.is-playing .av-cover{will-change:transform}
@keyframes av-orbit{to{transform:rotate(360deg)}}
@keyframes av-float{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(0,-7px,0) rotate(1deg)}}
@media(max-width:900px){
  .av-now{grid-template-columns:minmax(0,1fr);gap:28px;margin:28px auto}
  .av-art-column{width:min(370px,85%);margin:0 auto}
  .av-art-orbit{padding:28px}
  .av-track{text-align:center}
  .av-track-meta{justify-content:center}
  .av-track h2{font-size:clamp(30px,6vw,48px);margin:0 0 18px}
  .av-spectrum{height:220px;margin:24px 0 14px}
  .av-source-panel{min-height:300px}
  .av-source-options{gap:10px}
  .av-source-choice{min-height:120px;padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .audio-visualizer-page .av-stage *{animation:none!important;transition:none!important}
  .av-cover,.av-art-orbit{transform:none!important}
}
@media(max-width:360px){
  .av-controls{gap:4px}
}