/* Solid, readable baseline. Backdrop blur is restricted to navigation,
   native-player control panels, and catalogue/editorial cards. */
html[data-planet] body :is(header,.recording-controls,.room-audio,.recording-choices button,.room-presets button,.resource-grid>a,.guide-directory>a){
 background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 2px),var(--theme-panel)!important;
 color:var(--text)!important;
 border-color:rgba(var(--accent-rgb),.24)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 12px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12);
}
html[data-planet] body :is(.recording-controls,.room-audio){border-radius:14px;padding:20px}
html[data-planet] body :is(.recording-choices,.room-presets) [aria-pressed=true]{border-color:var(--accent)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px var(--accent),0 8px 24px #0003}
html[data-planet] body :is(header,.recording-controls,.room-audio,.recording-choices button,.room-presets button,.resource-grid>a,.guide-directory>a) :is(p,span,small){color:var(--muted)}
/* Opaque artwork is deliberately preserved. The surrounding card surface is glass. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-planet] body :is(header,.recording-controls,.room-audio,.recording-choices button,.room-presets button,.resource-grid>a,.guide-directory>a){
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 2px),color-mix(in srgb,var(--theme-panel) 82%,transparent)!important;
  -webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%);
 }
 /* Let the backdrop reach the glass children without adding another blur layer. */
 html[data-planet] body :is(.recording-room,.preset-panel){background:transparent!important}
}
/* Reuse Batch 3's transform ownership; change its easing, not its transforms.
   The existing ::after remains dedicated to the tilt glow/shadow. */
html[data-planet] body .depth-card{transition:transform 240ms cubic-bezier(.2,.8,.25,1.12)!important}
html[data-planet] body .depth-card::after{transition:opacity 200ms ease-out}
html[data-planet] body :is(.recording-controls,.room-audio) button{transition:transform 220ms cubic-bezier(.2,.8,.25,1.12)}
html[data-planet] body :is(.recording-controls,.room-audio) button:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
 html[data-planet] body :is(.recording-controls,.room-audio) button:hover{transform:translateY(-1px)}
 html[data-planet] body :is(.recording-controls,.room-audio) button:hover:active{transform:scale(.98)}
}
@media(prefers-reduced-transparency:reduce){
 html[data-planet] body :is(header,.recording-controls,.room-audio,.recording-choices button,.room-presets button,.resource-grid>a,.guide-directory>a){background:var(--theme-panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html[data-planet] body :is(.recording-room,.preset-panel){background:var(--theme-panel)!important}
}
@media(prefers-reduced-motion:reduce){
 html[data-planet] body .depth-card,html[data-planet] body :is(.recording-controls,.room-audio) button{transform:none!important;transition:none!important}
 html[data-planet] body .depth-card::after{transition:none!important}
}
@media(forced-colors:active){
 html[data-planet] body :is(header,.recording-controls,.room-audio,.recording-choices button,.room-presets button,.resource-grid>a,.guide-directory>a){background:Canvas!important;color:CanvasText!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid CanvasText!important}
}