/* Another Arc — stylesheet entry (Phase 4 split). Import order matters. */
/* resets */
html, body, div, nav {
  margin: 0;
  padding: 0;
  /* font-size: 100%; */
}
/*
 * Cyberglass design system — raw palette + theme scopes + semantic roles.
 * Swap themes: html[data-theme="light" | "dark"]
 */
/* --- Raw palette (theme-independent) --- */
:root {
  /*
   * Color tokens: hex/solid aliases + *-rgb channel triplets for rgba().
   * In components use rgba(var(--aa-*-rgb), α) — no raw rgb/rgba for theme colors.
   */

  /* Neutrals */
  --aa-white-rgb: 255, 255, 255;
  --aa-black-rgb: 0, 0, 0;
  --aa-stroke-rgb: 10, 10, 10;

  --aa-gold-50: #fff8e0;
  --aa-gold-100: #ffe9a3;
  --aa-gold-200: #f5d050;
  --aa-gold-300: #e8b82a;
  --aa-gold-400: #d4a017;
  --aa-gold-500: #b8860b;
  --aa-gold-600: #8b6914;

  --aa-gold-rgb-bright: 255, 233, 163;
  --aa-gold-rgb: 212, 160, 23;
  --aa-gold-rgb-deep: 139, 105, 20;

  --aa-gold-bright: var(--aa-gold-100);
  --aa-gold: var(--aa-gold-400);
  --aa-gold-deep: var(--aa-gold-600);
  --aa-champagne-rgb: 255, 248, 230;

  /* Anti-corporate accent (dark theme) — deep blood red */
  --aa-blood-50: #ffe8e8;
  --aa-blood-100: #e8a8a8;
  --aa-blood-200: #c45050;
  --aa-blood-300: #9e2828;
  --aa-blood-400: #7a1616;
  --aa-blood-500: #5c0e0e;
  --aa-blood-600: #3d0606;
  --aa-blood-rgb-bright: 190, 58, 58;
  --aa-blood-rgb: 122, 24, 24;
  --aa-blood-rgb-deep: 61, 8, 8;

  /* Ink (light-theme primary) */
  --aa-ink-rgb: 26, 42, 56;
  --aa-ink-soft-rgb: 150, 133, 144;
  --aa-ink-muted-rgb: 74, 95, 112;
  --aa-ink-heading-rgb: 21, 37, 53;
  --aa-ink: rgb(var(--aa-ink-rgb));
  --aa-ink-soft: rgb(var(--aa-ink-soft-rgb));
  --aa-ink-muted: rgb(var(--aa-ink-muted-rgb));

  /* Ice (dark-theme primary) */
  --aa-ice-rgb: 90, 75, 110;
  --aa-ice-muted-rgb: 200, 220, 240;
  --aa-ice: rgb(var(--aa-ice-rgb));
  --aa-ice-soft: rgba(var(--aa-ice-rgb), 0.92);
  --aa-ice-muted: rgba(var(--aa-ice-muted-rgb), 0.78);

  /* Cyan chrome */
  --aa-cyan-rgb: 180, 200, 208;
  --aa-cyan-deep-rgb: 138, 157, 166;
  --aa-cyan: rgb(var(--aa-cyan-rgb));
  --aa-cyan-deep: rgb(var(--aa-cyan-deep-rgb));

  /* Light pane / glass (champagne–snow) */
  --aa-pane-warm-rgb: 251, 246, 240;
  --aa-pane-cool-rgb: 249, 250, 253;
  --aa-pane-blend-rgb: 252, 248, 242;
  --aa-pane-solid-rgb: 250, 247, 242;
  --aa-pane-snow-rgb: 252, 250, 254;
  --aa-pane-border-rgb: 195, 188, 178;
  --aa-pane-glow-rgb: 165, 158, 148;
  --aa-neutral-border-rgb: 190, 185, 178;
  --aa-cyan-border-rgb: 170, 178, 188;
  --aa-seeker-track-rgb: 210, 202, 192;
  --aa-control-glow-rgb: 150, 168, 182;
  --aa-control-glow-active-rgb: 130, 158, 175;
  --aa-cyan-glow-rgb: 180, 188, 198;
  --aa-content-edge-glow-rgb: 160, 185, 205;

  /* Dark pane / glass (smoky ink) */
  --aa-pane-dark-rgb: 18, 28, 38;
  --aa-pane-dark-mid-rgb: 22, 34, 46;
  --aa-pane-dark-deep-rgb: 16, 26, 36;
  --aa-sky-overlay-rgb: 168, 198, 228;
  --aa-sky-overlay-cool-rgb: 200, 225, 245;
  --aa-frost-border-rgb: 200, 220, 235;
  --aa-frost-border-muted-rgb: 196, 212, 220;

  /* Page */
  --aa-bg-page-rgb-light: 232, 238, 243;
  --aa-bg-page-rgb-dark: 10, 18, 24;
  --aa-heading-rgb-dark: 240, 248, 255;

  /* Player icon glow (smoky purple — matches content heading smoke) */
  --aa-player-icon-glow-rgb: var(--aa-smoke-purple-bright-rgb);
  --aa-player-icon-glow-far-rgb: var(--aa-smoke-purple-rgb);

  /* Smoke / outline defaults (themes override) */
  --aa-smoke-ink-rgb: 20, 35, 50;
  --aa-smoke-ink-deep-rgb: 10, 30, 50;
  --aa-smoke-dark-rgb: 8, 14, 28;
  --aa-smoke-blood-rgb: var(--aa-blood-rgb);
  --aa-smoke-blood-deep-rgb: var(--aa-blood-rgb-deep);
  --aa-smoke-blood-bright-rgb: var(--aa-blood-rgb-bright);
  --aa-smoke-gold-rgb: var(--aa-gold-rgb);
  --aa-smoke-gold-deep-rgb: var(--aa-gold-rgb-deep);
  --aa-smoke-gold-bright-rgb: var(--aa-gold-rgb-bright);
  --aa-smoke-purple-rgb: 118, 92, 132;
  --aa-smoke-purple-bright-rgb: 148, 118, 168;
  --aa-smoke-purple-deep-rgb: 88, 68, 108;
  /* Readable purple accent (light-theme prices, emphasis) */
  --aa-purple-accent: #6e5282;
  --aa-purple-accent-soft: #8a6a9e;
  --aa-outline-ink-rgb: 20, 40, 60;
  --aa-brand-insta-rgb: 225, 48, 108;
  --aa-brand-insta-mid-rgb: 193, 53, 132;
  --aa-brand-insta-far-rgb: 131, 58, 180;
  --aa-brand-fb-rgb: 24, 119, 242;
  --aa-brand-fb-far-rgb: 66, 165, 245;
  --aa-brand-twitter-rgb: 29, 161, 242;
  --aa-brand-twitter-far-rgb: 125, 211, 252;
  --aa-brand-bandcamp-rgb: 98, 154, 160;
  --aa-brand-bandcamp-far-rgb: 29, 160, 195;
  --aa-brand-spotify-rgb: 30, 215, 96;
  --aa-brand-spotify-far-rgb: 29, 185, 84;
  --aa-brand-youtube-rgb: 255, 40, 40;
  --aa-brand-youtube-mid-rgb: 255, 0, 0;
  --aa-brand-youtube-far-rgb: 255, 80, 80;
  --aa-brand-apple-rgb: 250, 36, 96;
  --aa-brand-apple-mid-rgb: 252, 60, 110;
  --aa-brand-apple-far-rgb: 255, 120, 160;

  --aa-brand-icon-stroke-filter:
    drop-shadow(0 0 0.45px rgba(var(--aa-stroke-rgb), 1))
    drop-shadow(0.85px 0 0 rgba(var(--aa-stroke-rgb), 1))
    drop-shadow(-0.85px 0 0 rgba(var(--aa-stroke-rgb), 1))
    drop-shadow(0 0.85px 0 rgba(var(--aa-stroke-rgb), 1))
    drop-shadow(0 -0.85px 0 rgba(var(--aa-stroke-rgb), 1));

  --aa-brand-insta-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-insta-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-insta-mid-rgb), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-brand-insta-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-insta-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-insta-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-insta-mid-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-insta-far-rgb), var(--aa-alpha-brand-glow-hover-far)));
  --aa-brand-fb-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-fb-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-fb-rgb), 0.6))
    drop-shadow(0 0 36px rgba(var(--aa-brand-fb-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-fb-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-fb-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-fb-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-fb-far-rgb), 0.5));
  --aa-brand-twitter-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-twitter-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-twitter-rgb), 0.6))
    drop-shadow(0 0 36px rgba(var(--aa-brand-twitter-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-twitter-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-twitter-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-twitter-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-twitter-far-rgb), 0.5));
  --aa-brand-bandcamp-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-bandcamp-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-bandcamp-rgb), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-brand-bandcamp-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-bandcamp-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-bandcamp-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-bandcamp-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-bandcamp-far-rgb), var(--aa-alpha-brand-glow-hover-far)));
  --aa-brand-spotify-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-spotify-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-spotify-rgb), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-brand-spotify-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-spotify-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-spotify-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-spotify-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-spotify-far-rgb), var(--aa-alpha-brand-glow-hover-far)));
  --aa-brand-youtube-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-youtube-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-youtube-mid-rgb), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-brand-youtube-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-youtube-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-youtube-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-youtube-mid-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-youtube-far-rgb), var(--aa-alpha-brand-glow-hover-far)));
  --aa-brand-apple-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-brand-apple-rgb), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-brand-apple-mid-rgb), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-brand-apple-far-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-apple-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-brand-apple-rgb), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-brand-apple-mid-rgb), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-brand-apple-far-rgb), 0.5));
  /* Mailing list — bright gold in both theme modes */
  --aa-brand-email-glow-filter:
    drop-shadow(0 0 10px rgba(var(--aa-gold-rgb-bright), var(--aa-alpha-brand-glow-near)))
    drop-shadow(0 0 22px rgba(var(--aa-gold-rgb-bright), var(--aa-alpha-brand-glow-mid)))
    drop-shadow(0 0 36px rgba(var(--aa-gold-rgb), var(--aa-alpha-brand-glow-far)));
  --aa-brand-email-glow-hover-filter:
    drop-shadow(0 0 14px rgba(var(--aa-gold-rgb-bright), var(--aa-alpha-brand-glow-hover-near)))
    drop-shadow(0 0 28px rgba(var(--aa-gold-rgb-bright), var(--aa-alpha-brand-glow-hover-mid)))
    drop-shadow(0 0 44px rgba(var(--aa-gold-rgb), var(--aa-alpha-brand-glow-hover-far)));

  /* Opacity scale — pair with *-rgb in theme scopes */
  --aa-alpha-pane-a: 0.84;
  --aa-alpha-pane-b: 0.78;
  --aa-alpha-pane-c: 0.86;
  --aa-alpha-pane-solid: 0.92;
  --aa-alpha-pane-border: 0.58;
  --aa-alpha-pane-glow: 0.18;
  --aa-alpha-glass: 0.42;
  --aa-alpha-glass-strong: 0.62;
  --aa-alpha-glass-cyan: 0.38;
  --aa-alpha-glass-cyan-light: 0.58;
  --aa-alpha-glass-border: 0.62;
  --aa-alpha-cyan-border: 0.52;
  --aa-alpha-inset: 0.26;
  --aa-alpha-inset-hover: 0.28;
  --aa-alpha-inset-nav: 0.22;
  --aa-alpha-inset-subtle: 0.12;
  --aa-alpha-inset-seeker: 0.15;
  --aa-alpha-inset-pane: 0.18;
  --aa-alpha-inset-pane-strong: 0.22;
  --aa-cyan-chrome-border-rgb: 175, 200, 210;
  --aa-shuffle-glow-rgb: 190, 210, 218;
  --aa-muted-inset-rgb: 187, 187, 187;
  --aa-warm-highlight-rgb: 255, 248, 220;
  --aa-alpha-text-fill-soft: 0.92;
  --aa-alpha-text-fill-muted: 0.78;
  --aa-alpha-brand-glow-near: 0.95;
  --aa-alpha-brand-glow-mid: 0.65;
  --aa-alpha-brand-glow-far: 0.4;
  --aa-alpha-brand-glow-hover-near: 1;
  --aa-alpha-brand-glow-hover-mid: 0.85;
  --aa-alpha-brand-glow-hover-far: 0.55;

  --aa-font-weight-ui: 300;
  --aa-font-weight-body: 400;
  --aa-font-weight-heading: 500;
  --aa-font-weight-strong: 600;

  --aa-font-display: system-ui, "Segoe UI", Roboto, sans-serif;
  --aa-font-body: system-ui, "Segoe UI", Roboto, sans-serif;
  /* Light landscape — WebP tiers (see npm run optimize:bg) */
  --aa-bg-image: url('/assets/landscape-2560-BxfGxJtN.webp');

  /*
   * Background framing — tune here; @media aspect-ratio rules below must use the same ratios.
   * (CSS cannot read custom properties inside @media — keep fractions in sync manually.)
   */
  --aa-bg-aspect-portrait-max: 1; /* h = width/height ≤ this → portrait tier */
  --aa-bg-aspect-wide-min: 1.6; /* h ≥ this → full art + titles centered */
  --aa-bg-zoom-medium: 1.5;
  --aa-bg-zoom: 1;
  --aa-bg-position: center center;
  --aa-bg-transform-origin: center center;

  /* Light detail pane center — gold/ice smoky off-white (content only; see light theme) */
  --aa-pane-content-mid-rgb: 236, 240, 244;

  /* Display-effect builders (outline + glow stacks) */
  --aa-outline-offset: 1px;
  --aa-outline-blur: 2px;
  --aa-glow-blur-near: 0.35rem;
  --aa-glow-blur-far: 0.9rem;
  --aa-title-gradient-angle: 105deg;

  --aa-smoke-blur-tight: 0.45rem;
  --aa-smoke-blur-wide: 1.25rem;
  --aa-smoke-alpha-tight: 0.55;
  --aa-smoke-alpha-wide: 0.35;

  /* Nav moon labels: saturated ink trace tight behind glyphs + optional accent fringe */
  --aa-nav-moon-trace-blur: 0.06rem;
  --aa-nav-moon-trace-blur-mid: 0.12rem;
  --aa-nav-moon-trace-blur-soft: 0.2rem;
  --aa-nav-moon-label-tracking: 0.11em;
  --aa-nav-moon-label-y-hidden: 58%;
  --aa-nav-moon-label-y-visible: -54%;
  --aa-nav-moon-label-slide-duration: 0.32s;
  --aa-nav-moon-label-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon SVG glow (unchanged burst stack) */
  --aa-nav-moon-buffer-blur: 0.18rem;
  --aa-nav-moon-buffer-blur-soft: 0.28rem;
  --aa-nav-moon-burst-blur-core: 0.35rem;
  --aa-nav-moon-burst-blur-near: 0.85rem;
  --aa-nav-moon-burst-blur-mid: 1.25rem;
  --aa-nav-moon-burst-blur-far: 2.35rem;
  --aa-nav-moon-burst-blur-outer: 3.5rem;

  /* Nav cluster — one sizing curve for all breakpoints; moons/orbit derive from ratios below */
  --aa-nav-vertical-scale: 1.1;
  --aa-planet-width: clamp(
    20rem,
    50vw,
    40rem
  );
  --aa-orbit-planet-ratio: 1.8;
  --aa-planet-aspect: 1 / 1;
  /* Glass disc only — logo + wordmarks use independent sizes below */
  --aa-planet-pane-ratio: 0.62;
  --aa-planet-pane-width: calc(var(--aa-planet-width) * var(--aa-planet-pane-ratio));
  --aa-logo-mark-scale: 0.88;
  --aa-logo-mark-size: calc(var(--aa-planet-width) * var(--aa-logo-mark-scale));
  --aa-logo-wordmark-size: clamp(1rem, 3.4vw, 2rem);
  --aa-logo-wordmark-weight: 700;
  --aa-logo-wordmark-tracking: 0.24em;
  --aa-logo-wordmark-line-gap: calc(var(--aa-logo-wordmark-size) * 0.12);
  /* Shift stack up so "Arc" centers on the planet; "Another" sits above */
  --aa-logo-wordmark-stack-shift: calc(
    (var(--aa-logo-wordmark-size) * 1.05 + var(--aa-logo-wordmark-line-gap)) * 0.5
  );
  --aa-orbit-duration: 44s;
  /* Trim right extent only: keep left edge at (at-x − rx), lower both rx and at-x together */
  /* Pull left arc inward: raise center + shrink rx (left edge = at-x − rx) */
  --aa-orbit-rx: 38%;
  /* Asymmetric vertical: lower center + smaller ry → back (top) arc climbs less, front stays ~28% */
  --aa-orbit-ry-base: 24%;
  --aa-orbit-ry: calc(var(--aa-orbit-ry-base) * var(--aa-nav-vertical-scale));
  --aa-orbit-at-x: 50%;
  --aa-orbit-at-y: 54%;
  /* Length tokens for var-driven orbit transforms (translate % resolves against the moon box) */
  --aa-orbit-cx: calc(var(--aa-orbit-box-size) * 0.50);
  --aa-orbit-cy: calc(var(--aa-orbit-box-size) * 0.54);
  --aa-orbit-rx-len: calc(var(--aa-orbit-box-size) * 0.38);
  --aa-orbit-ry-len: calc(var(--aa-orbit-box-size) * 0.24 * var(--aa-nav-vertical-scale));
  /* Pseudo-3D moons — asymmetric depth: +30% at bottom, −40% at top, neutral at sides */
  --aa-nav-moon-scale-near: 1.5;
  --aa-nav-moon-scale-far: 0.9;
  --aa-nav-moon-scale-mid: 1;
  --aa-nav-moon-z-front: 2;
  --aa-nav-moon-z-behind: 0;
  --aa-nav-planet-z: 1;
  /* Unitless ratios (Firefox-safe) */
  --aa-moon-planet-ratio: 0.48;
  --aa-moon-font-planet-ratio: 0.075;
  --aa-moon-pad-moon-ratio: 0.0666667;
  /* Glass face only — icons/labels use full orb box (see ::before inset) */
  --aa-nav-orb-glass-ratio: 0.72;
  --aa-nav-orb-glass-inset: calc(var(--aa-nav-orb-size) * (1 - var(--aa-nav-orb-glass-ratio)) / 2);
  --aa-nav-moon-icon-planet-ratio: calc(var(--aa-moon-planet-ratio) * 1.18);
  --aa-nav-moon-icon-length: calc(var(--aa-planet-width) * var(--aa-nav-moon-icon-planet-ratio));
  --aa-nav-moon-label-scale: 0.5;
  --aa-nav-moon-label-weight: 800;
  --aa-nav-moon-icon-top: 50%;
  --aa-nav-orb-size: calc(var(--aa-planet-width) * var(--aa-moon-planet-ratio));
  --aa-nav-orb-font: calc(var(--aa-planet-width) * var(--aa-moon-font-planet-ratio));
  --aa-nav-orb-pad: calc(var(--aa-nav-orb-size) * var(--aa-moon-pad-moon-ratio));
  --aa-orbit-box-size: min(120vw, calc(var(--aa-planet-width) * var(--aa-orbit-planet-ratio)));
  --aa-nav-cluster-lift: clamp(5rem, 10vh, 12rem);
  --aa-planet-spin-duration-light: 47s;
  --aa-planet-spin-duration-dark: 69s;
  /* 0 = paused (circular glass — spin invisible); 1 = resume when planet art is asymmetric */
  --aa-planet-spin-enabled: 0;

  /* Content panels — shared width + scroll tail */
  --aa-panel-width: min(60rem, 80vw);
  --aa-panel-max-width: 64rem;
  --aa-panel-top-inset: calc(0.5rem + env(safe-area-inset-top, 0px));
  --aa-panel-top-offset: var(--aa-panel-top-inset);
  --aa-panel-heading-pad-top: calc(2.25rem + env(safe-area-inset-top, 0px));
  /* Player band height (lg); clearance + fade ≈ band — pane may overlap player via fade */
  --aa-panel-player-band-expanded: 10.5rem;
  --aa-panel-player-band-collapsed: 6.75rem;
  --aa-panel-player-band: var(--aa-panel-player-band-expanded);
  --aa-panel-bottom-clearance-ratio: 0.38;
  --aa-panel-scroll-fade-ratio: 0.62;
  --aa-panel-bottom-reserve: calc(
    var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
  );
  --aa-panel-bottom-clearance: var(--aa-panel-bottom-reserve);
  --aa-panel-scroll-fade: calc(
    var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
  );
  --aa-panel-scroll-extra: 2rem;
  --aa-panel-scroll-end: calc(var(--aa-panel-bottom-reserve) + var(--aa-panel-scroll-extra));
  --aa-panel-scroll-pad-bottom: calc(
    var(--aa-panel-scroll-end) + var(--aa-panel-scroll-fade) * 0.35
  );
  /* Collapsed player — shorter panel bottom reserve (lg; md/sm override in layout-breakpoints) */
  html[data-player-expanded='false'] {
    --aa-panel-player-band: var(--aa-panel-player-band-collapsed);
    --aa-panel-bottom-clearance: calc(
      var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
    );
    --aa-panel-bottom-reserve: var(--aa-panel-bottom-clearance);
    --aa-panel-scroll-fade: calc(
      var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
    );
  }
  /* Videos pane — extra scroll past embed (on top of shared panel scroll pad) */
  --aa-panel-media-scroll-tail: var(--aa-panel-scroll-extra);

  /* Player shell — collapsed compact strip vs full-width expand */
  --aa-player-expand-duration: 0.42s;
  --aa-player-expand-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --aa-player-chrome-fade-duration: 0.3s;
  --aa-player-chrome-fade-delay: 0.1s;
  --aa-player-marquee-w-collapsed: min(11.5rem, 48vw);
  --aa-player-shell-max-w-collapsed: min(22rem, calc(100vw - 2rem));
  --aa-player-shell-max-w-expanded: calc(100vw - 4rem);
  --aa-player-shell-inset-x: 2rem;
  /* Player chrome geometry (lg defaults; sm/md override in layout-breakpoints) */
  --aa-player-marquee-w: 30rem;
  --aa-player-marquee-h: 3rem;
  --aa-player-transport-max-w: 50rem;
  --aa-player-clock-font: 1rem;
  --aa-player-clock-pad-block: 0.5rem;
  --aa-player-clock-pad-inline: 1rem;
  --aa-player-clock-w: 3rem;
  /* Links panel — inset + legacy brand tokens (detail pane uses --aa-links-icon-* via cqw) */
  --aa-links-panel-inset: clamp(1rem, 4vw, 2.75rem);
  --aa-brand-link-size: 8.5rem;
  --aa-brand-link-size-max: 9.5rem;
  --aa-brand-link-gap: 1.15rem; /* non–content-links .links only */
  /* Readable line length for body copy in detail panes (~65–75ch) */
  --aa-panel-prose-max: 42rem;
  --aa-about-pad-top: 3.5rem;
  --aa-about-pad-bottom: 3.5rem;
  --aa-about-section-gap: 2rem;
  --aa-about-member-gap: 1.75rem;
}
/* --- Light theme (default) — milky panes, dark ink, gold accents --- */
:root,
html[data-theme='light'] {
  color-scheme: light;

  --aa-primary-rgb: var(--aa-ink-rgb);
  --aa-secondary-rgb: var(--aa-pane-warm-rgb);
  --aa-accent-rgb: var(--aa-gold-rgb);

  --aa-bg-page: rgb(var(--aa-bg-page-rgb-light));

  /* Lighter panes — more of the filtered landscape bleeds through */
  --aa-alpha-pane-a: 0.58;
  --aa-alpha-pane-b: 0.5;
  --aa-alpha-pane-c: 0.6;
  --aa-alpha-pane-solid: 0.74;
  --aa-alpha-pane-border: 0.48;
  --aa-alpha-glass: 0.3;
  --aa-alpha-glass-strong: 0.46;
  --aa-alpha-glass-cyan: 0.28;
  --aa-alpha-glass-cyan-light: 0.44;

  --aa-text-body: var(--aa-ink);
  --aa-text-soft: var(--aa-ink-soft);
  --aa-text-muted: var(--aa-ink-muted);
  --aa-text-heading: rgb(var(--aa-ink-heading-rgb));
  --aa-text-heading-sub: var(--aa-ink-soft);
  --aa-text-nav: var(--aa-gold-50);
  --aa-text: var(--aa-text-body);
  --aa-text-accent: var(--aa-purple-accent);

  --aa-text-effect-body: none;
  --aa-text-effect-ui: 0 0 0.35rem rgba(var(--aa-smoke-ink-deep-rgb), 0.4);
  --aa-smoke-rgb: var(--aa-smoke-ink-rgb);
  --aa-text-smoke:
    0 0 var(--aa-smoke-blur-tight) rgba(var(--aa-smoke-rgb), var(--aa-smoke-alpha-tight)),
    0 0 var(--aa-smoke-blur-wide) rgba(var(--aa-smoke-rgb), var(--aa-smoke-alpha-wide)),
    0 0 calc(var(--aa-smoke-blur-wide) * 1.6) rgba(var(--aa-smoke-rgb), calc(var(--aa-smoke-alpha-wide) * 0.5));
  /* Nav labels: dense ink trace + saturated gold burst (visible on hover) */
  --aa-nav-moon-text-smoke:
    0 0 var(--aa-nav-moon-trace-blur) rgba(var(--aa-smoke-ink-deep-rgb), 0.88),
    0 0 calc(var(--aa-nav-moon-trace-blur) * 1.6) rgba(var(--aa-smoke-ink-deep-rgb), 0.82),
    0 0 var(--aa-nav-moon-trace-blur-mid) rgba(var(--aa-smoke-ink-rgb), 0.76),
    0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-gold-bright-rgb), 0.72),
    0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-gold-rgb), 0.62),
    0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-champagne-rgb), 0.5),
    0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-smoke-gold-rgb), 0.38),
    0 0 var(--aa-nav-moon-burst-blur-outer) rgba(var(--aa-gold-rgb-bright), 0.28);
  --aa-nav-moon-text-smoke-hover:
    0 0 var(--aa-nav-moon-trace-blur) rgba(var(--aa-smoke-ink-deep-rgb), 0.92),
    0 0 calc(var(--aa-nav-moon-trace-blur) * 1.6) rgba(var(--aa-smoke-ink-deep-rgb), 0.86),
    0 0 var(--aa-nav-moon-trace-blur-mid) rgba(var(--aa-smoke-ink-rgb), 0.8),
    0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-gold-bright-rgb), 0.98),
    0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-gold-rgb), 0.92),
    0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-champagne-rgb), 0.82),
    0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-smoke-gold-rgb), 0.68),
    0 0 var(--aa-nav-moon-burst-blur-outer) rgba(var(--aa-gold-rgb-bright), 0.52);
  --aa-nav-moon-label-gradient: linear-gradient(
    98deg,
    #fffef8 0%,
    var(--aa-gold-50) 38%,
    var(--aa-gold-100) 100%
  );
  --aa-outline-rgb: var(--aa-outline-ink-rgb);
  --aa-outline-alpha: 0.35;
  --aa-glow-rgb: var(--aa-champagne-rgb);
  --aa-glow-opacity: 0.45;
  --aa-text-outline-shadow:
    calc(-1 * var(--aa-outline-offset)) calc(-1 * var(--aa-outline-offset)) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    var(--aa-outline-offset) calc(-1 * var(--aa-outline-offset)) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    calc(-1 * var(--aa-outline-offset)) var(--aa-outline-offset) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    var(--aa-outline-offset) var(--aa-outline-offset) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    0 0 var(--aa-outline-blur) rgba(var(--aa-outline-rgb), calc(var(--aa-outline-alpha) * 0.85));
  --aa-text-glow-shadow:
    0 0 var(--aa-glow-blur-near) rgba(var(--aa-glow-rgb), var(--aa-glow-opacity)),
    0 0 var(--aa-glow-blur-far) rgba(var(--aa-glow-rgb), calc(var(--aa-glow-opacity) * 0.5));
  --aa-text-effect: none;

  /* Panel / portal titles — flat fill (gradient + text-shadow on one node breaks in WebKit) */
  --aa-title-fill: var(--aa-gold-50);
  /* Nav moon + logo wordmark — gradient on a separate layer from glow */
  --aa-title-gradient-stop-1: var(--aa-gold-50);
  --aa-title-gradient-stop-2: var(--aa-gold-100);
  --aa-title-gradient-stop-3: var(--aa-gold-100);
  --aa-title-gradient: linear-gradient(
    98deg,
    var(--aa-title-gradient-stop-1) 0%,
    var(--aa-title-gradient-stop-2) 68%,
    var(--aa-title-gradient-stop-3) 100%
  );
  --aa-title-glow:
    drop-shadow(0 0 0.35rem rgba(var(--aa-gold-rgb-bright), 0.68))
    drop-shadow(0 0 0.75rem rgba(var(--aa-champagne-rgb), 0.52));
  --aa-content-heading-text-shadow:
    0 0 0.45rem rgba(var(--aa-smoke-purple-rgb), 0.58),
    0 0 1.25rem rgba(var(--aa-smoke-purple-deep-rgb), 0.44),
    0 0 2rem rgba(var(--aa-smoke-purple-rgb), 0.3),
    0 0 0.35rem rgba(var(--aa-gold-rgb-bright), 0.68),
    0 0 0.75rem rgba(var(--aa-champagne-rgb), 0.52);
  /* Flattened — nested var() in filter breaks in some engines (portal icons, etc.) */
  --aa-content-heading-smoke-filter:
    drop-shadow(0 0 0.45rem rgba(var(--aa-smoke-purple-rgb), 0.58))
    drop-shadow(0 0 1.25rem rgba(var(--aa-smoke-purple-deep-rgb), 0.44))
    drop-shadow(0 0 2rem rgba(var(--aa-smoke-purple-rgb), 0.3));
  --aa-content-heading-glow:
    drop-shadow(0 0 0.45rem rgba(var(--aa-smoke-purple-rgb), 0.58))
    drop-shadow(0 0 1.25rem rgba(var(--aa-smoke-purple-deep-rgb), 0.44))
    drop-shadow(0 0 2rem rgba(var(--aa-smoke-purple-rgb), 0.3))
    drop-shadow(0 0 0.35rem rgba(var(--aa-gold-rgb-bright), 0.68))
    drop-shadow(0 0 0.75rem rgba(var(--aa-champagne-rgb), 0.52));
  --aa-song-duration-rgb: 82, 58, 102;

  /* Unified milky pane (md + lg): nav, player, controls */
  --aa-pane-bg: linear-gradient(
    155deg,
    rgba(var(--aa-pane-warm-rgb), var(--aa-alpha-pane-a)) 0%,
    rgba(var(--aa-pane-cool-rgb), var(--aa-alpha-pane-b)) 52%,
    rgba(var(--aa-pane-blend-rgb), var(--aa-alpha-pane-c)) 100%
  );
  --aa-pane-bg-solid: rgba(var(--aa-pane-solid-rgb), var(--aa-alpha-pane-solid));
  --aa-pane-border: rgba(var(--aa-pane-border-rgb), var(--aa-alpha-pane-border));
  --aa-pane-glow: 0 0 0.85rem rgba(var(--aa-pane-glow-rgb), var(--aa-alpha-pane-glow));

  /* Detail panes — slightly dimmer + smokier center vs nav/player */
  --aa-alpha-content-pane-a: 0.64;
  --aa-alpha-content-pane-b: 0.7;
  --aa-alpha-content-pane-c: 0.62;
  --aa-content-bg: linear-gradient(
    155deg,
    rgba(var(--aa-pane-warm-rgb), var(--aa-alpha-content-pane-a)) 0%,
    rgba(var(--aa-pane-content-mid-rgb), var(--aa-alpha-content-pane-b)) 50%,
    rgba(var(--aa-pane-blend-rgb), var(--aa-alpha-content-pane-c)) 100%
  );
  --aa-content-bg-solid: rgba(var(--aa-pane-content-mid-rgb), 0.78);
  --aa-content-border: var(--aa-pane-border);
  --aa-content-glow: var(--aa-pane-glow);
  --aa-content-blur: 16px;

  --aa-glass-surface: rgba(var(--aa-pane-warm-rgb), var(--aa-alpha-glass));
  --aa-glass-surface-strong: rgba(var(--aa-pane-solid-rgb), var(--aa-alpha-glass-strong));
  --aa-glass-gold: rgba(var(--aa-gold-rgb-bright), 0.1);
  --aa-glass-gold-strong: rgba(var(--aa-gold-rgb-bright), 0.22);
  --aa-glass-cyan: rgba(var(--aa-pane-cool-rgb), var(--aa-alpha-glass-cyan));
  --aa-glass-cyan-light: rgba(var(--aa-pane-snow-rgb), var(--aa-alpha-glass-cyan-light));
  --aa-glass-border: rgba(var(--aa-neutral-border-rgb), var(--aa-alpha-glass-border));
  --aa-glass-border-warm: rgba(var(--aa-gold-rgb), 0.38);
  --aa-cyan-border: rgba(var(--aa-cyan-border-rgb), var(--aa-alpha-cyan-border));

  --aa-brand-orb-bg: linear-gradient(
    155deg,
    rgba(var(--aa-pane-cool-rgb), var(--aa-alpha-glass-cyan)) 0%,
    rgba(var(--aa-gold-rgb-bright), 0.26) 48%,
    rgba(var(--aa-gold-rgb), 0.16) 100%
  );
  --aa-nav-orb-bg: var(--aa-pane-bg);
  --aa-control-bg: linear-gradient(145deg, var(--aa-glass-cyan-light), var(--aa-glass-surface-strong));
  --aa-player-bg: var(--aa-pane-bg);
  --aa-close-bg: linear-gradient(145deg, var(--aa-glass-surface-strong), var(--aa-glass-gold));

  --aa-glow-accent:
    0 0 0.85rem rgba(var(--aa-gold-rgb-bright), 0.32),
    0 0 0.35rem rgba(var(--aa-gold-rgb), 0.22);
  --aa-glow-gold: var(--aa-glow-accent);
  --aa-glow-cyan: 0 0 0.55rem rgba(var(--aa-cyan-glow-rgb), 0.18);
  --aa-glow-control: 0 0 0.4rem rgba(var(--aa-control-glow-rgb), 0.26);
  --aa-glow-control-active: 0 0 0.5rem rgba(var(--aa-control-glow-active-rgb), 0.4);

  --aa-focus-ring: var(--aa-gold);
  --aa-logo-glow-rgb: var(--aa-gold-rgb-bright);
  --aa-logo-glow-rgb-far: var(--aa-gold-rgb);

  /* Nav moon glyphs — white SVG + pastel gold tint (sepia-on-white reads lighter than invert) */
  --aa-nav-moon-icon-tint: brightness(1.14) sepia(0.32) saturate(1.55) hue-rotate(14deg);
  --aa-nav-moon-icon-glow:
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur) rgba(var(--aa-smoke-ink-deep-rgb), 0.55))
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur-soft) rgba(var(--aa-smoke-ink-rgb), 0.38))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-gold-bright-rgb), 0.78))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-gold-rgb), 0.68))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-champagne-rgb), 0.52))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-smoke-gold-rgb), 0.34));
  --aa-nav-moon-icon-tint-hover: brightness(1.2) sepia(0.36) saturate(1.7) hue-rotate(14deg);
  --aa-nav-moon-icon-glow-hover:
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur) rgba(var(--aa-smoke-ink-deep-rgb), 0.62))
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur-soft) rgba(var(--aa-smoke-ink-rgb), 0.44))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-gold-bright-rgb), 0.88))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-gold-rgb), 0.78))
    drop-shadow(0 0 calc(var(--aa-nav-moon-burst-blur-mid) * 1.08) rgba(var(--aa-champagne-rgb), 0.58))
    drop-shadow(0 0 calc(var(--aa-nav-moon-burst-blur-far) * 1.1) rgba(var(--aa-smoke-gold-rgb), 0.4));

  --aa-player-marquee-bg: rgba(var(--aa-smoke-ink-rgb), 0.32);
  --aa-player-chrome-bg: var(--aa-player-marquee-bg);
  --aa-player-chrome-text: var(--aa-text-body);
  --aa-player-clock-color: var(--aa-gold-bright);
  --aa-player-marquee-color: var(--aa-gold-100);
  --aa-player-chrome-muted: var(--aa-player-marquee-color);
  --aa-player-chrome-tab-radius: 0.5rem 0.5rem 0 0;
  --aa-seeker-track: rgba(var(--aa-seeker-track-rgb), 0.55);
  --aa-player-seeker-fill: rgb(var(--aa-smoke-purple-rgb));
  --aa-player-seeker-accent: var(--aa-player-seeker-fill);
  --aa-player-seeker-thumb-glow:
    0 0 0.35rem rgba(var(--aa-smoke-purple-bright-rgb), 0.55),
    0 0 0.55rem rgba(var(--aa-smoke-purple-rgb), 0.4);
  /* Black SVGs → champagne-white (matches --aa-gold-50 / title gradient) */
  --aa-chrome-gold-icon-tint:
    brightness(0) saturate(100%) invert(98%) sepia(9%) saturate(380%) hue-rotate(356deg)
    brightness(107%) contrast(98%);
  --aa-chrome-gold-icon-tint-hover:
    brightness(0) saturate(100%) invert(99%) sepia(11%) saturate(440%) hue-rotate(356deg)
    brightness(112%) contrast(98%);
  --aa-chrome-gold-icon-glow:
    drop-shadow(0 0 0.45rem rgba(var(--aa-gold-rgb-bright), 0.82))
    drop-shadow(0 0 0.85rem rgba(var(--aa-champagne-rgb), 0.62))
    drop-shadow(0 0 1.25rem rgba(var(--aa-gold-rgb-bright), 0.42));
  --aa-chrome-gold-icon-glow-hover:
    drop-shadow(0 0 0.55rem rgba(var(--aa-gold-rgb-bright), 0.96))
    drop-shadow(0 0 1rem rgba(var(--aa-champagne-rgb), 0.76))
    drop-shadow(0 0 1.55rem rgba(var(--aa-gold-rgb-bright), 0.52));
  --aa-player-icon-tint: var(--aa-chrome-gold-icon-tint);
  --aa-player-icon-tint-hover: var(--aa-chrome-gold-icon-tint-hover);
  --aa-player-icon-glow-filter:
    var(--aa-chrome-gold-icon-glow)
    drop-shadow(0 0 0.55rem rgba(var(--aa-smoke-purple-bright-rgb), 0.62))
    drop-shadow(0 0 1rem rgba(var(--aa-smoke-purple-rgb), 0.48));
  --aa-player-icon-glow-active-filter:
    var(--aa-chrome-gold-icon-glow-hover)
    drop-shadow(0 0 0.65rem rgba(var(--aa-smoke-purple-bright-rgb), 0.72))
    drop-shadow(0 0 1.15rem rgba(var(--aa-smoke-purple-rgb), 0.55));
  /* Off shuffle/repeat — same purple family as active, scaled down */
  --aa-player-icon-muted-filter:
    drop-shadow(0 0 0.35rem rgba(var(--aa-smoke-purple-bright-rgb), 0.48))
    drop-shadow(0 0 0.65rem rgba(var(--aa-smoke-purple-rgb), 0.34))
    drop-shadow(0 0 1rem rgba(var(--aa-smoke-purple-deep-rgb), 0.22));
  --aa-glow-player-control:
    0 0 0.55rem rgba(var(--aa-smoke-purple-bright-rgb), 0.55),
    0 0 1rem rgba(var(--aa-smoke-purple-rgb), 0.38);
  --aa-glow-player-control-active:
    0 0 0.75rem rgba(var(--aa-smoke-purple-bright-rgb), 0.82),
    0 0 1.35rem rgba(var(--aa-smoke-purple-rgb), 0.55);

  --aa-text-readability-shadow: var(--aa-text-outline-shadow);
  --aa-text-readability-halo: var(--aa-text-glow-shadow);
  --aa-text-fill: var(--aa-text-nav);
  --aa-text-fill-soft: rgba(var(--aa-white-rgb), var(--aa-alpha-text-fill-soft));
  --aa-text-fill-muted: rgba(var(--aa-white-rgb), var(--aa-alpha-text-fill-muted));
}
/* --- Dark theme — pane glass + ice text, deep blood red accent --- */
html[data-theme='dark'] {
  color-scheme: dark;

  --aa-primary-rgb: var(--aa-ice-rgb);
  --aa-secondary-rgb: var(--aa-pane-dark-rgb);
  --aa-accent-rgb: var(--aa-blood-rgb);

  --aa-bg-page: rgb(8, 10, 14);

  --aa-pane-dark-rgb: 8, 12, 18;
  --aa-pane-dark-mid-rgb: 10, 16, 24;
  --aa-pane-dark-deep-rgb: 6, 10, 16;

  /* Heavier panes — nav, player, controls read as dark glass */
  --aa-alpha-pane-a: 0.9;
  --aa-alpha-pane-b: 0.87;
  --aa-alpha-pane-c: 0.92;
  --aa-alpha-pane-solid: 0.94;
  --aa-alpha-pane-border: 0.28;
  --aa-alpha-glass: 0.72;
  --aa-alpha-glass-strong: 0.88;
  --aa-alpha-glass-cyan: 0.68;
  --aa-alpha-glass-cyan-light: 0.82;

  --aa-text-body: var(--aa-ice);
  --aa-text-soft: var(--aa-ice-soft);
  --aa-text-muted: var(--aa-ice-muted);
  --aa-text-heading: rgb(var(--aa-heading-rgb-dark));
  --aa-text-heading-sub: var(--aa-ice-soft);
  --aa-text-nav: var(--aa-blood-50);
  --aa-text: var(--aa-text-body);
  --aa-text-accent: var(--aa-blood-200);

  --aa-text-effect-body: none;
  --aa-text-effect-ui: 0 0 0.4rem rgba(var(--aa-ice-rgb), 0.35);
  --aa-smoke-rgb: var(--aa-smoke-dark-rgb);
  --aa-text-smoke:
    0 0 var(--aa-smoke-blur-tight) rgba(var(--aa-smoke-rgb), 0.65),
    0 0 var(--aa-smoke-blur-wide) rgba(var(--aa-smoke-rgb), 0.45),
    0 0 calc(var(--aa-smoke-blur-wide) * 1.6) rgba(var(--aa-smoke-rgb), 0.28);
  /* Nav labels: dark trace + vivid deep-red burst (visible on hover) */
  --aa-nav-moon-text-smoke:
    0 0 var(--aa-nav-moon-trace-blur) rgba(var(--aa-black-rgb), 0.92),
    0 0 calc(var(--aa-nav-moon-trace-blur) * 1.6) rgba(var(--aa-blood-rgb-deep), 0.78),
    0 0 var(--aa-nav-moon-trace-blur-mid) rgba(var(--aa-black-rgb), 0.82),
    0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-blood-rgb), 0.82),
    0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-blood-rgb-bright), 0.72),
    0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-blood-rgb-bright), 0.58),
    0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-blood-rgb), 0.44),
    0 0 var(--aa-nav-moon-burst-blur-outer) rgba(var(--aa-blood-rgb-bright), 0.32);
  --aa-nav-moon-text-smoke-hover:
    0 0 var(--aa-nav-moon-trace-blur) rgba(var(--aa-black-rgb), 0.94),
    0 0 calc(var(--aa-nav-moon-trace-blur) * 1.6) rgba(var(--aa-blood-rgb-deep), 0.84),
    0 0 var(--aa-nav-moon-trace-blur-mid) rgba(var(--aa-black-rgb), 0.86),
    0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-blood-rgb-bright), 0.95),
    0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-blood-rgb-bright), 0.88),
    0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-blood-rgb), 0.76),
    0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-blood-rgb-bright), 0.58),
    0 0 var(--aa-nav-moon-burst-blur-outer) rgba(var(--aa-blood-rgb), 0.42);
  --aa-nav-moon-label-gradient: linear-gradient(
    var(--aa-title-gradient-angle),
    var(--aa-blood-300) 0%,
    var(--aa-blood-200) 48%,
    var(--aa-blood-300) 100%
  );
  --aa-outline-rgb: var(--aa-black-rgb);
  --aa-outline-alpha: 0.75;
  --aa-glow-rgb: var(--aa-ice-rgb);
  --aa-glow-opacity: 0.55;
  --aa-text-outline-shadow:
    calc(-1 * var(--aa-outline-offset)) calc(-1 * var(--aa-outline-offset)) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    var(--aa-outline-offset) calc(-1 * var(--aa-outline-offset)) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    calc(-1 * var(--aa-outline-offset)) var(--aa-outline-offset) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    var(--aa-outline-offset) var(--aa-outline-offset) 0 rgba(var(--aa-outline-rgb), var(--aa-outline-alpha)),
    0 0 var(--aa-outline-blur) rgba(var(--aa-outline-rgb), calc(var(--aa-outline-alpha) * 0.85));
  --aa-text-glow-shadow:
    0 0 var(--aa-glow-blur-near) rgba(var(--aa-glow-rgb), var(--aa-glow-opacity)),
    0 0 var(--aa-glow-blur-far) rgba(var(--aa-glow-rgb), calc(var(--aa-glow-opacity) * 0.5));
  --aa-text-effect: var(--aa-text-outline-shadow), var(--aa-text-glow-shadow);

  --aa-title-fill: var(--aa-blood-200);
  /* Nav moon + logo wordmark */
  --aa-title-gradient-stop-1: var(--aa-blood-200);
  --aa-title-gradient-stop-2: var(--aa-blood-300);
  --aa-title-gradient-stop-3: var(--aa-blood-300);
  --aa-title-gradient: linear-gradient(
    var(--aa-title-gradient-angle),
    var(--aa-title-gradient-stop-1) 0%,
    var(--aa-title-gradient-stop-2) 50%,
    var(--aa-title-gradient-stop-3) 100%
  );
  --aa-title-glow:
    drop-shadow(0 0 0.3rem rgba(var(--aa-blood-rgb), 0.42))
    drop-shadow(0 0 0.65rem rgba(var(--aa-blood-rgb-bright), 0.26));
  --aa-content-heading-text-shadow:
    0 0 0.45rem rgba(var(--aa-blood-rgb), 0.52),
    0 0 1.25rem rgba(var(--aa-blood-rgb-bright), 0.36),
    0 0 2rem rgba(var(--aa-blood-rgb-deep), 0.22),
    0 0 0.3rem rgba(var(--aa-blood-rgb), 0.42),
    0 0 0.65rem rgba(var(--aa-blood-rgb-bright), 0.26);
  --aa-content-heading-smoke-filter:
    drop-shadow(0 0 0.45rem rgba(var(--aa-blood-rgb), 0.52))
    drop-shadow(0 0 1.25rem rgba(var(--aa-blood-rgb-bright), 0.36))
    drop-shadow(0 0 2rem rgba(var(--aa-blood-rgb-deep), 0.22));
  --aa-content-heading-glow:
    drop-shadow(0 0 0.45rem rgba(var(--aa-blood-rgb), 0.52))
    drop-shadow(0 0 1.25rem rgba(var(--aa-blood-rgb-bright), 0.36))
    drop-shadow(0 0 2rem rgba(var(--aa-blood-rgb-deep), 0.22))
    drop-shadow(0 0 0.3rem rgba(var(--aa-blood-rgb), 0.42))
    drop-shadow(0 0 0.65rem rgba(var(--aa-blood-rgb-bright), 0.26));
  --aa-song-duration-rgb: 178, 152, 198;

  /* Same smoky pane family as content — used on nav, player, controls */
  --aa-pane-bg: linear-gradient(
    155deg,
    rgba(var(--aa-pane-dark-rgb), 0.72) 0%,
    rgba(var(--aa-pane-dark-mid-rgb), 0.68) 55%,
    rgba(var(--aa-pane-dark-deep-rgb), 0.74) 100%
  );
  --aa-pane-bg-solid: rgba(var(--aa-pane-dark-rgb), 0.88);
  --aa-pane-border: rgba(var(--aa-frost-border-rgb), 0.22);
  --aa-pane-glow: 0 0 1rem rgba(var(--aa-frost-border-rgb), 0.1);

  --aa-content-bg: var(--aa-pane-bg);
  --aa-content-bg-solid: var(--aa-pane-bg-solid);
  --aa-content-border: var(--aa-pane-border);
  --aa-content-glow: var(--aa-pane-glow);
  --aa-content-blur: 16px;

  --aa-glass-surface: rgba(var(--aa-pane-dark-mid-rgb), 0.55);
  --aa-glass-surface-strong: rgba(var(--aa-pane-dark-rgb), 0.72);
  --aa-glass-gold: rgba(var(--aa-blood-rgb-bright), 0.12);
  --aa-glass-gold-strong: rgba(var(--aa-blood-rgb), 0.22);
  --aa-glass-cyan: rgba(var(--aa-pane-dark-mid-rgb), 0.45);
  --aa-glass-cyan-light: rgba(var(--aa-pane-dark-rgb), 0.62);
  --aa-glass-border: rgba(var(--aa-frost-border-rgb), 0.22);
  --aa-glass-border-warm: rgba(var(--aa-blood-rgb-bright), 0.4);
  --aa-cyan-border: rgba(var(--aa-frost-border-muted-rgb), 0.32);

  --aa-brand-orb-bg: linear-gradient(
    155deg,
    rgba(var(--aa-pane-dark-rgb), 0.92) 0%,
    rgba(var(--aa-blood-rgb), 0.45) 50%,
    rgba(var(--aa-pane-dark-deep-rgb), 0.94) 100%
  );
  --aa-nav-orb-bg: var(--aa-pane-bg);
  --aa-control-bg: linear-gradient(
    145deg,
    rgba(var(--aa-pane-dark-mid-rgb), 0.72) 0%,
    rgba(var(--aa-pane-dark-rgb), 0.8) 100%
  );
  --aa-player-bg: var(--aa-pane-bg);
  --aa-close-bg: linear-gradient(
    145deg,
    rgba(var(--aa-pane-dark-mid-rgb), 0.75) 0%,
    rgba(var(--aa-blood-rgb-deep), 0.35) 100%
  );

  --aa-glow-accent:
    0 0 0.9rem rgba(var(--aa-blood-rgb-bright), 0.38),
    0 0 0.4rem rgba(var(--aa-blood-rgb), 0.32);
  --aa-glow-gold: var(--aa-glow-accent);
  --aa-glow-cyan: 0 0 0.65rem rgba(var(--aa-frost-border-rgb), 0.12);
  --aa-glow-control: 0 0 0.45rem rgba(var(--aa-blood-rgb), 0.22);
  --aa-glow-control-active: 0 0 0.6rem rgba(var(--aa-blood-rgb-bright), 0.38);

  --aa-focus-ring: var(--aa-blood-300);
  --aa-logo-glow-rgb: var(--aa-blood-rgb-bright);
  --aa-logo-glow-rgb-far: var(--aa-blood-rgb);
  /* Black stroke SVG → blood red (same hue as white-icon moon tint) */
  --aa-logo-dark-tint:
    invert(12%) sepia(98%) saturate(3200%) hue-rotate(336deg) brightness(88%) contrast(108%);

  /* Nav moon glyphs — white SVG recolored via filter (invert pipeline for true red) */
  --aa-nav-moon-icon-tint:
    brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(3200%) hue-rotate(336deg)
    brightness(88%) contrast(108%);
  --aa-nav-moon-icon-glow:
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur) rgba(var(--aa-smoke-dark-rgb), 0.55))
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur-soft) rgba(var(--aa-black-rgb), 0.32))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-purple-bright-rgb), 0.42))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-purple-rgb), 0.32))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-mid) rgba(var(--aa-smoke-purple-bright-rgb), 0.24))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-far) rgba(var(--aa-smoke-purple-deep-rgb), 0.16))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-outer) rgba(var(--aa-blood-rgb-deep), 0.14));
  --aa-nav-moon-icon-tint-hover:
    brightness(0) saturate(100%) invert(16%) sepia(98%) saturate(3400%) hue-rotate(336deg)
    brightness(94%) contrast(108%);
  --aa-nav-moon-icon-glow-hover:
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur) rgba(var(--aa-smoke-dark-rgb), 0.62))
    drop-shadow(0 0 var(--aa-nav-moon-buffer-blur-soft) rgba(var(--aa-black-rgb), 0.38))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-core) rgba(var(--aa-smoke-purple-bright-rgb), 0.5))
    drop-shadow(0 0 var(--aa-nav-moon-burst-blur-near) rgba(var(--aa-smoke-purple-rgb), 0.38))
    drop-shadow(0 0 calc(var(--aa-nav-moon-burst-blur-mid) * 1.08) rgba(var(--aa-smoke-purple-bright-rgb), 0.28))
    drop-shadow(0 0 calc(var(--aa-nav-moon-burst-blur-far) * 1.1) rgba(var(--aa-smoke-purple-deep-rgb), 0.18))
    drop-shadow(0 0 calc(var(--aa-nav-moon-burst-blur-outer) * 1.12) rgba(var(--aa-blood-rgb), 0.2));

  --aa-player-marquee-bg: rgba(var(--aa-pane-dark-deep-rgb), 0.92);
  --aa-player-chrome-bg: var(--aa-player-marquee-bg);
  --aa-player-chrome-text: var(--aa-text-body);
  --aa-player-clock-color: var(--aa-blood-200);
  --aa-player-marquee-color: var(--aa-blood-200);
  --aa-player-chrome-muted: var(--aa-player-marquee-color);
  --aa-player-chrome-tab-radius: 0.5rem 0.5rem 0 0;
  --aa-seeker-track: rgba(var(--aa-blood-rgb-deep), 0.92);
  --aa-player-seeker-fill: rgb(var(--aa-blood-rgb));
  --aa-player-seeker-accent: var(--aa-player-seeker-fill);
  --aa-player-seeker-thumb-glow:
    0 0 0.4rem rgba(var(--aa-blood-rgb-bright), 0.45),
    0 0 0.65rem rgba(var(--aa-blood-rgb-deep), 0.55);
  --aa-player-icon-tint: var(--aa-nav-moon-icon-tint);
  --aa-player-icon-tint-hover: var(--aa-nav-moon-icon-tint-hover);
  --aa-player-icon-glow-filter:
    drop-shadow(0 0 0.5rem rgba(var(--aa-smoke-purple-bright-rgb), 1))
    drop-shadow(0 0 1rem rgba(var(--aa-smoke-purple-bright-rgb), 0.95))
    drop-shadow(0 0 1.55rem rgba(var(--aa-smoke-purple-rgb), 0.85))
    drop-shadow(0 0 2.2rem rgba(var(--aa-smoke-purple-deep-rgb), 0.62));
  --aa-player-icon-glow-active-filter:
    drop-shadow(0 0 0.6rem rgba(var(--aa-smoke-purple-bright-rgb), 1))
    drop-shadow(0 0 1.15rem rgba(var(--aa-smoke-purple-bright-rgb), 1))
    drop-shadow(0 0 1.9rem rgba(var(--aa-smoke-purple-rgb), 1))
    drop-shadow(0 0 2.65rem rgba(var(--aa-smoke-purple-deep-rgb), 0.78));
  --aa-player-icon-muted-filter:
    drop-shadow(0 0 0.4rem rgba(var(--aa-smoke-purple-bright-rgb), 0.52))
    drop-shadow(0 0 0.75rem rgba(var(--aa-smoke-purple-rgb), 0.38))
    drop-shadow(0 0 1.1rem rgba(var(--aa-smoke-purple-deep-rgb), 0.26));
  --aa-glow-player-control:
    0 0 0.6rem rgba(var(--aa-smoke-purple-bright-rgb), 0.5),
    0 0 1.1rem rgba(var(--aa-smoke-purple-rgb), 0.36);
  --aa-glow-player-control-active:
    0 0 0.85rem rgba(var(--aa-smoke-purple-bright-rgb), 0.78),
    0 0 1.45rem rgba(var(--aa-smoke-purple-rgb), 0.52);

  --aa-text-fill: var(--aa-ice);
  --aa-text-fill-soft: var(--aa-ice-soft);
  --aa-text-fill-muted: var(--aa-ice-muted);
}
/* Page shell, background, container, nav region, motion tiers */
/* Background presentation — `data-theme-bg` flips after orbit redirect on theme toggle */
:root,
html[data-theme-bg='light'] {
  --aa-bg-filter: brightness(1.02) saturate(1.05) contrast(1.03);
  --aa-bg-filter-panel: brightness(0.98) saturate(1.03) contrast(1.04);
  --aa-bg-overlay: linear-gradient(
    158deg,
    rgba(var(--aa-sky-overlay-cool-rgb), 0.06) 0%,
    rgba(var(--aa-sky-overlay-rgb), 0.04) 48%,
    rgba(var(--aa-ice-rgb), 0.05) 100%
  );
}
html[data-theme-bg='dark'] {
  --aa-bg-image: url('/assets/landscape-dark-2560-C0AkkWSP.webp');
  --aa-bg-filter: brightness(0.94) saturate(1.08) contrast(1.06) hue-rotate(-4deg);
  --aa-bg-filter-panel: brightness(0.88) saturate(1.04) contrast(1.08) hue-rotate(-4deg);
  --aa-bg-overlay: linear-gradient(
    168deg,
    rgba(var(--aa-blood-rgb-deep), 0.12) 0%,
    rgba(var(--aa-black-rgb), 0.18) 42%,
    rgba(var(--aa-blood-rgb), 0.1) 100%
  );
}
body {
  background: var(--aa-bg-page);
  color: var(--aa-text-body);
  font-family: var(--aa-font-body);
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
/* Background only — filter must not apply to nav, panels, or chrome */
.container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--aa-bg-image);
  background-position: var(--aa-bg-position, center center);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(var(--aa-bg-zoom, 1));
  transform-origin: var(--aa-bg-transform-origin, center center);
  filter: var(--aa-bg-filter);
  transition:
    background-position 0.65s ease,
    transform 0.65s ease,
    filter 1.2s ease;
}
body[data-panel] .container::before {
  filter: var(--aa-bg-filter-panel);
}
/* Theme tint over filtered photo (under UI chrome) */
.container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--aa-bg-overlay, transparent);
  mix-blend-mode: multiply;
  transition: background 0.8s ease, opacity 0.8s ease;
}
html[data-theme-bg='light'] .container::after {
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
html[data-theme-bg='dark'] .container::after {
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.nav {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Responsive bg — smaller WebP per theme-bg (light default, dark override) */
@media (max-width: 1920px) {
  :root,
  html[data-theme-bg='light'] {
    --aa-bg-image: url('/assets/landscape-1920-Cei0-WL3.webp');
  }

  html[data-theme-bg='dark'] {
    --aa-bg-image: url('/assets/landscape-dark-1920-DBdTsuxg.webp');
  }
}
@media (max-width: 1280px) {
  :root,
  html[data-theme-bg='light'] {
    --aa-bg-image: url('/assets/landscape-1280-DP_yHcdv.webp');
  }

  html[data-theme-bg='dark'] {
    --aa-bg-image: url('/assets/landscape-dark-1280-wNGnS23f.webp');
  }
}
/*
 * Background crop by viewport aspect h = width / height (not layout tier).
 * Ratios: --aa-bg-aspect-portrait-max (1), --aa-bg-aspect-wide-min (1.6 = 8/5),
 * zoom: --aa-bg-zoom-medium. See STYLE_GUIDE.md §5.4.
 */
@media (max-aspect-ratio: 1 / 1) {
  /* sync: --aa-bg-aspect-portrait-max */
  html[data-theme-bg='light'] {
    --aa-bg-position: left center;
    --aa-bg-transform-origin: left center;
  }

  html[data-theme-bg='dark'] {
    --aa-bg-position: right center;
    --aa-bg-transform-origin: right center;
  }
}
@media (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 8 / 5) {
  /* sync: portrait max … wide min (1.6 → 8/5) */
  :root {
    --aa-bg-zoom: var(--aa-bg-zoom-medium);
  }

  html[data-theme-bg='light'] {
    --aa-bg-position: left center;
    --aa-bg-transform-origin: left center;
  }

  html[data-theme-bg='dark'] {
    --aa-bg-position: right center;
    --aa-bg-transform-origin: right center;
  }
}
/* --- Motion tiers: cheaper nav/panel effects on tablet, mobile, reduced-motion --- */
html[data-motion='lite'] {
  --aa-fade-duration: 0.35s;
  --aa-nav-shift-duration: 0.45s;
}
html[data-motion='reduce'] {
  --aa-fade-duration: 0.01ms;
  --aa-nav-shift-duration: 0.01ms;
}
/* Motion-tier @media rules: layout-breakpoints.css (imported after components). */
html[data-motion='reduce'] .logo-gold,
html[data-motion='reduce'] .song-name,
html[data-motion='reduce'] .link-wrapper a,
html[data-motion='reduce'] .link-wrapper a .nav-moon-body,
html[data-motion='min'] .logo-gold,
html[data-motion='min'] .song-name,
html[data-motion='min'] .link-wrapper a,
html[data-motion='min'] .link-wrapper a .nav-moon-body {
  animation: none !important;
}
html[data-motion='reduce'] .movable-area,
html[data-motion='min'] .movable-area {
  transition: none !important;
}
html[data-motion='reduce'] .fade-in-p5,
html[data-motion='reduce'] .fade-in-1,
html[data-motion='reduce'] .fade-out-p5,
html[data-motion='reduce'] .fade-out-1,
html[data-motion='min'] .fade-in-p5,
html[data-motion='min'] .fade-in-1,
html[data-motion='min'] .fade-out-p5,
html[data-motion='min'] .fade-out-1 {
  animation: none !important;
  opacity: 1;
}
html[data-motion='reduce'] .hidden,
html[data-motion='min'] .hidden {
  transition: none;
}
/* Logo planet, orbit moons, panel-open chrome */
.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: var(--aa-nav-planet-z);
  pointer-events: none;
}
.logo-cluster {
  display: grid;
  place-items: center;
  pointer-events: none;
}
.logo-wordmark-stack,
.logo-background {
  grid-area: 1 / 1;
}
.logo-wordmark-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aa-logo-wordmark-line-gap);
  position: relative;
  z-index: 3;
  transform: translateY(calc(-1 * var(--aa-logo-wordmark-stack-shift)));
}
.logo-wordmark {
  position: relative;
  margin: 0;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-logo-wordmark-weight);
  font-synthesis: weight;
  font-size: var(--aa-logo-wordmark-size);
  letter-spacing: var(--aa-logo-wordmark-tracking);
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
/* Glow layer — must not share a node with background-clip gradient (see nav-moon-label). */
.logo-wordmark-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: transparent;
  text-shadow: var(--aa-content-heading-text-shadow);
  pointer-events: none;
}
.logo-wordmark-text {
  position: relative;
  z-index: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--aa-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
.logo-wordmark-bottom {
  font-size: calc(var(--aa-logo-wordmark-size) * 1);
  letter-spacing: calc(var(--aa-logo-wordmark-tracking) * 1.45);
}
/* lg + wide aspect — band title is in the bg art (light right / dark left) */
@media (min-width: 1193px) and (min-aspect-ratio: 8 / 5) {
  .logo-wordmark-stack {
    visibility: hidden;
  }
}
.logo-background {
  z-index: 0;
  display: flex;
  position: relative;
  pointer-events: none;
  top: 0;
  width: var(--aa-planet-pane-width);
  aspect-ratio: var(--aa-planet-aspect);
  height: auto;
  border-radius: 50%;
  background: transparent;
  border: none;
  transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
  justify-content: center;
  align-items: center;
  isolation: isolate;
  overflow: visible;
}
/* Planet glass — rotation via --aa-planet-rotation (planet-spin.js; off while circular) */
.logo-background::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  background: var(--aa-brand-orb-bg);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid var(--aa-glass-border-warm);
  box-shadow:
    var(--aa-glow-gold),
    inset 0 0 1.1rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset)),
    inset 0 0 0.55rem rgba(var(--aa-logo-glow-rgb), 0.22);
  transform: rotate(var(--aa-planet-rotation, 0deg));
  transform-origin: center center;
  pointer-events: none;
}
html[data-planet-spin='paused'] .logo-background::before {
  animation: none;
}
.logo-background.fade-out {
  box-shadow: 0 0 0 rgb(var(--aa-muted-inset-rgb)) inset;
}
.logo-theme-toggle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--aa-logo-mark-size);
  height: var(--aa-logo-mark-size);
  border-radius: 50%;
}
.logo-theme-toggle:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 4px;
}
.logo {
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
@keyframes pulse {
  0% {
   transform: scale(1, 1);
  }

  50% {
   transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}
@keyframes logo-glow-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 0.5rem rgba(var(--aa-logo-glow-rgb), 0.75))
      drop-shadow(0 0 1rem rgba(var(--aa-logo-glow-rgb-far), 0.45));
  }

  50% {
    filter:
      drop-shadow(0 0 0.7rem rgba(var(--aa-logo-glow-rgb), 0.9))
      drop-shadow(0 0 1.25rem rgba(var(--aa-logo-glow-rgb-far), 0.55));
  }
}
@keyframes logo-glow-pulse-dark {
  0%, 100% {
    filter:
      var(--aa-logo-dark-tint)
      drop-shadow(0 0 0.5rem rgba(var(--aa-logo-glow-rgb), 0.75))
      drop-shadow(0 0 1rem rgba(var(--aa-logo-glow-rgb-far), 0.45));
  }

  50% {
    filter:
      var(--aa-logo-dark-tint)
      drop-shadow(0 0 0.7rem rgba(var(--aa-logo-glow-rgb), 0.9))
      drop-shadow(0 0 1.25rem rgba(var(--aa-logo-glow-rgb-far), 0.55));
  }
}
.logo-gold {
  animation: logo-glow-pulse 4s ease-in-out infinite;
}
html[data-theme='dark'] .logo-gold {
  animation: logo-glow-pulse-dark 4s ease-in-out infinite;
}
.link-wrapper {
  --aa-nav-count: 5;
  --aa-ring-phase: 0;
  --aa-ring-dir: 1;
  z-index: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--aa-orbit-box-size);
  height: var(--aa-orbit-box-size);
  /* No transform — transform here traps all moons in one stacking context below the planet */
  margin-left: calc(var(--aa-orbit-box-size) / -2);
  margin-top: calc(var(--aa-orbit-box-size) / -2);
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}
.link-wrapper a {
  --aa-orbit-index: 0;
  text-decoration: none;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-font-weight-ui);
  color: var(--aa-text-nav);
  position: absolute;
  pointer-events: auto;
  top: 0;
  left: 0;
  margin: 0;
  width: var(--aa-nav-orb-size);
  height: var(--aa-nav-orb-size);
  display: block;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  offset-path: none;
  animation: none;
  transform-origin: center center;
}
/* Orbit geometry — full/lite only (min/reduce use static scatter below). */
html[data-motion='full'] .link-wrapper a,
html[data-motion='lite'] .link-wrapper a {
  --u: calc(
    var(--aa-orbit-index) / var(--aa-nav-count)
    + var(--aa-ring-dir, 1) * var(--aa-ring-phase)
  );
  --t: calc(var(--u) * 360deg);
  --depth: calc(
    (var(--aa-nav-moon-scale-near) + var(--aa-nav-moon-scale-far)) / 2
    + (var(--aa-nav-moon-scale-near) - var(--aa-nav-moon-scale-far)) / 2 * sin(var(--t))
  );
  z-index: calc(
    var(--aa-nav-moon-z-behind)
    + (var(--aa-nav-moon-z-front) - var(--aa-nav-moon-z-behind)) * max(0, sign(sin(var(--t))))
  );
  transform:
    translate(
      calc(var(--aa-orbit-cx) + var(--aa-orbit-rx-len) * cos(var(--t))),
      calc(var(--aa-orbit-cy) + var(--aa-orbit-ry-len) * sin(var(--t)))
    )
    translate(-50%, -50%)
    scale(var(--depth));
}
/* Scale on inner body — outer `<a>` owns orbit transform + depth scale */
.nav-moon-body {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: var(--aa-nav-orb-font);
  box-sizing: border-box;
  border-radius: 50%;
  transform-origin: center center;
  overflow: hidden;
  animation: none;
}
/* Orb face scales on hover; anchor keeps orbit position (no lurch). */
.link-wrapper a .nav-moon-body::before {
  content: '';
  position: absolute;
  inset: var(--aa-nav-orb-glass-inset);
  border-radius: 50%;
  z-index: -1;
  background: var(--aa-nav-orb-bg);
  border: 1px solid var(--aa-glass-border-warm);
  box-shadow:
    var(--aa-glow-gold),
    inset 0 0 0.65rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-nav));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}
.link-wrapper a:hover .nav-moon-body::before,
.link-wrapper a:focus-visible .nav-moon-body::before {
  transform: scale(1.04);
  box-shadow: var(--aa-glow-gold), inset 0 0 0.75rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-hover));
}
.link-wrapper a:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 3px;
}
.link-wrapper a.is-active .nav-moon-body::before {
  box-shadow: var(--aa-glow-gold), inset 0 0 0.85rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-hover));
  border-color: rgba(var(--aa-gold-rgb), 0.45);
}
.link-wrapper a.is-active .nav-moon-label {
  opacity: 1;
}
/* White SVG assets — theme tint + accent glow (same tokens as .logo-gold) */
.nav-moon-icon {
  position: absolute;
  left: 50%;
  top: var(--aa-nav-moon-icon-top);
  z-index: 1;
  width: var(--aa-nav-moon-icon-length);
  height: var(--aa-nav-moon-icon-length);
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.94;
  filter: var(--aa-nav-moon-icon-tint) var(--aa-nav-moon-icon-glow);
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.nav-moon-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, var(--aa-nav-moon-label-y-hidden));
  margin: 0;
  display: grid;
  place-items: center;
  max-width: 120%;
  font-size: calc(var(--aa-nav-orb-font) * var(--aa-nav-moon-label-scale));
  font-family: var(--aa-font-display);
  font-weight: var(--aa-nav-moon-label-weight);
  font-synthesis: weight;
  letter-spacing: var(--aa-nav-moon-label-tracking);
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--aa-nav-moon-label-slide-duration) var(--aa-nav-moon-label-slide-ease),
    opacity 0.22s ease,
    visibility 0s linear var(--aa-nav-moon-label-slide-duration);
}
.nav-moon-label-shadow,
.nav-moon-label-text {
  grid-area: 1 / 1;
  white-space: nowrap;
}
/* Smoke halo — separate layer (text-shadow breaks gradient clip on one node) */
.nav-moon-label-shadow {
  z-index: 0;
  color: transparent;
  user-select: none;
  text-shadow: var(--aa-nav-moon-text-smoke);
  transition: text-shadow 0.22s ease;
}
.nav-moon-label-text {
  z-index: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--aa-nav-moon-label-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
.link-wrapper a:hover .nav-moon-label,
.link-wrapper a:focus-visible .nav-moon-label,
.link-wrapper a.moon-primary .nav-moon-label {
  z-index: 2;
  transform: translate(-50%, var(--aa-nav-moon-label-y-visible));
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--aa-nav-moon-label-slide-duration) var(--aa-nav-moon-label-slide-ease),
    opacity 0.22s ease,
    visibility 0s linear 0s;
}
.link-wrapper a:hover .nav-moon-label-shadow,
.link-wrapper a:focus-visible .nav-moon-label-shadow,
.link-wrapper a.moon-primary .nav-moon-label-shadow {
  text-shadow: var(--aa-nav-moon-text-smoke-hover);
}
.link-wrapper a:hover .nav-moon-icon,
.link-wrapper a:focus-visible .nav-moon-icon {
  opacity: 1;
  filter: var(--aa-nav-moon-icon-tint-hover) var(--aa-nav-moon-icon-glow-hover);
}
html[data-motion='reduce'] .link-wrapper a .nav-moon-label {
  --aa-nav-moon-label-slide-duration: 0.01ms;
}
html[data-motion='min'] .link-wrapper a .nav-moon-label {
  --aa-nav-moon-label-slide-duration: 0.01ms;
}
html[data-motion='lite'] .link-wrapper a .nav-moon-label {
  --aa-nav-moon-label-slide-duration: 0.01ms;
}
/*
 * lite/min/reduce: no animated label smoke on gesture path — 8-layer text-shadow
 * transitions on background-clip gradient text crash iOS WebKit during orbit tweens.
 */
html[data-motion='lite'] .link-wrapper a .nav-moon-label-shadow,
html[data-motion='min'] .link-wrapper a .nav-moon-label-shadow,
html[data-motion='reduce'] .link-wrapper a .nav-moon-label-shadow {
  transition: none;
}
html[data-motion='lite'] .link-wrapper a.moon-primary .nav-moon-label-shadow,
html[data-motion='min'] .link-wrapper a.moon-primary .nav-moon-label-shadow,
html[data-motion='reduce'] .link-wrapper a.moon-primary .nav-moon-label-shadow {
  text-shadow: none;
}
html[data-motion='lite'] .link-wrapper a.moon-primary .nav-moon-label,
html[data-motion='min'] .link-wrapper a.moon-primary .nav-moon-label,
html[data-motion='reduce'] .link-wrapper a.moon-primary .nav-moon-label {
  transition: none;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  20% { opacity: .8;}
  100% { opacity: 0; }
}
.hidden, .link-wrapper a.hidden {
  visibility: hidden;
  opacity: 0;
}
/* Panel open: CSS owns nav chrome — hide, no hits, pause orbit (no JS class/timeout chain). */
body[data-panel]:not([data-panel='']) .link-wrapper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
/* Bot chat (sm): hide orbit moons — same treatment as panel-open for clarity + perf */
@media (max-width: 768px) {
  html[data-bot-session] .link-wrapper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
}
/* lite: 30 fps idle drift only — depth/z-index stay var-driven (sin/cos). */
html[data-motion='lite'] .link-wrapper a .nav-moon-body {
  animation: none;
  scale: 1;
}
/* Mid (md): slightly slower orbit */
@media (max-width: 1192px) {
  :root {
    --aa-orbit-duration: 50s;
  }
}
/* md/lg: lift cluster above player band */
@media (min-width: 769px) {
  body[data-layout='wide'] .site-nav-inner {
    transform: translateY(calc(-1 * var(--aa-nav-cluster-lift)));
  }
}
/* min / reduce — static corner anchors (no var-driven cos/sin orbit). */
html[data-motion='reduce'] .link-wrapper a,
html[data-motion='min'] .link-wrapper a {
  animation: none;
  offset-path: none;
  offset-distance: unset;
  top: 50%;
  left: 50%;
  margin: calc(var(--aa-nav-orb-size) / -2);
  z-index: var(--aa-nav-moon-z-behind);
  transform: none;
}
html[data-motion='reduce'] .link-wrapper a .nav-moon-body,
html[data-motion='min'] .link-wrapper a .nav-moon-body {
  animation: none;
}
/* Per-link transform/z-index must beat the orbit var-driven rule (.link-wrapper a). */
html[data-motion='reduce'] .link-wrapper a.link-music,
html[data-motion='min'] .link-wrapper a.link-music {
  z-index: var(--aa-nav-moon-z-behind);
  transform: translate(-200%, -200%) scale(var(--aa-nav-moon-scale-far));
}
html[data-motion='reduce'] .link-wrapper a.link-links,
html[data-motion='min'] .link-wrapper a.link-links {
  z-index: var(--aa-nav-moon-z-front);
  transform: translate(200%, -200%) scale(var(--aa-nav-moon-scale-far));
}
html[data-motion='reduce'] .link-wrapper a.link-about,
html[data-motion='min'] .link-wrapper a.link-about {
  z-index: var(--aa-nav-moon-z-front);
  transform: translate(200%, 100%) scale(var(--aa-nav-moon-scale-near));
}
html[data-motion='reduce'] .link-wrapper a.link-media,
html[data-motion='min'] .link-wrapper a.link-media {
  z-index: var(--aa-nav-moon-z-behind);
  transform: translate(-200%, 100%) scale(var(--aa-nav-moon-scale-near));
}
html[data-motion='reduce'] .link-wrapper a.link-shop,
html[data-motion='min'] .link-wrapper a.link-shop {
  z-index: var(--aa-nav-moon-z-behind);
  transform: translate(0, -215%) scale(var(--aa-nav-moon-scale-far));
}
.site-nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Detail panels — shared typography, layout, close control */
/* Detail pane headings — flat fill + glow (see --aa-title-fill; nav keeps gradient layers) */
.content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--aa-font-display);
  font-weight: var(--aa-font-weight-heading);
  color: var(--aa-title-fill);
  -webkit-text-fill-color: var(--aa-title-fill);
  text-shadow: var(--aa-content-heading-text-shadow);
  letter-spacing: 0.06em;
}
.content-panel-heading,
.content-about > h1.title-gold,
.content .section-label.title-gold {
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  max-width: 100%;
  margin: .5rem auto 0;
  box-sizing: border-box;
  font-weight: var(--aa-logo-wordmark-weight);
  font-synthesis: weight;
  line-height: 1.05;
}
.content-section-heading-word {
  letter-spacing: var(--aa-logo-wordmark-tracking);
  white-space: nowrap;
}
.section-label {
  text-align: center;
  margin: 2rem 0 1rem;
  font-size: 1.75rem;
}
.content .music-intro,
.content .album-tagline {
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.45;
  font-weight: var(--aa-font-weight-ui);
  text-shadow: var(--aa-text-effect-body);
}
.music-intro {
  color: var(--aa-text-soft);
}
.album-tagline {
  font-size: 1.1rem;
  color: var(--aa-text-muted);
}
.hidden, .link-wrapper a.hidden {
  visibility: hidden;
  opacity: 0;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  max-width: 80rem;
  margin: 0.5rem 10%;
  height: auto;
  width: 80%;
  border: 1px solid var(--aa-content-border);
  border-radius: 0.75rem;
  background: var(--aa-content-bg);
  backdrop-filter: blur(var(--aa-content-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--aa-content-blur)) saturate(1.08);
  box-shadow: var(--aa-content-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--aa-text-body);
  font-size: 1.5rem;
  font-family: var(--aa-font-body);
  font-weight: var(--aa-font-weight-body);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: var(--aa-panel-heading-pad-top);
  padding-bottom: var(--aa-panel-scroll-pad-bottom);
  scroll-padding-bottom: var(--aa-panel-scroll-end);
}
.fade-in-p5 {
  animation: fadeIn 0.5s;
}
.fade-in-1 {
  animation: fadeIn .5s;
}
.fade-in-1p5 {
  animation: fadeIn .75s;
}
.fade-in-2 {
  animation: fadeIn 1s;
}
.fade-out-p5 {
  animation: fadeOut 0.25s;
}
.fade-out-1 {
  animation: fadeOut .5s;
}
.fade-out-1p5 {
  animation: fadeOut .75s;
}
.fade-out-2 {
  animation: fadeOut 1s;
}
.movable-area {
  transition: transform .5s ease;
}
.movable-area.move-down-right {
  transform: translate(40%, 30%);
}
.movable-area.move-up-right {
  transform: translate(40%, -30%);
}
.movable-area.move-down-left {
  transform: translate(-40%, 30%);
}
.movable-area.move-up-left {
  transform: translate(-40%, -30%);
}
.move-down-right .logo-background,
.move-up-right .logo-background,
.move-down-left .logo-background,
.move-up-left .logo-background {
  transform: scale(0.6);
  background: var(--aa-glass-surface-strong);
  box-shadow: var(--aa-glow-gold);
}
/* Panel copy — tiered weight + outline (tune via :root font-weight-* / text-effect-*) */
.content :where(p, li, .song-info-wrapper p) {
  color: var(--aa-text-soft);
  font-weight: var(--aa-font-weight-body);
  text-shadow: var(--aa-text-effect-body);
}
.music-another-arc-album > .song-info .song-info-wrapper p,
.music-another-time-ep > .song-info .song-info-wrapper p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Prose measure — paragraphs & similar; not videos, orbs, or link rows */
.content :where(
  p,
  .music-intro,
  .media-video-copy,
  .album-tagline
),
.content > .music-intro {
  max-width: var(--aa-panel-prose-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.content :where(
  h2,
  h3,
  .section-label
):not(.title-gold):not(.content-panel-heading) {
  max-width: var(--aa-panel-prose-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.content :where(.song-info-duration) {
  color: rgb(var(--aa-song-duration-rgb));
  font-weight: var(--aa-font-weight-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.song-duration-nice {
  margin-left: 0.15em;
  font-size: 0.9em;
  vertical-align: baseline;
}
.song-duration-nice--dingbat {
  font-family: "Webdings", "Wingdings 2", "Wingdings", fantasy;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
}
/* Detail panels — shared heading + column layout */
.content.content-about,
.content.content-music,
.content.content-media {
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  gap: 1.25rem;
}
.content.content-links {
  container-type: inline-size;
  container-name: links-pane;
  overflow-x: visible;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  gap: 0.75rem;
}
/* Links pane — heading scale tracks pane width (not viewport) */
.content-links .content-section-heading {
  font-size: clamp(
    1.5rem,
    min(24cqw, calc(var(--aa-brand-link-size) * 0.72)),
    9rem
  );
  padding-left: var(--aa-links-panel-inset);
  padding-right: var(--aa-links-panel-inset);
  /* Wider pane → tighter word pair; very narrow → slightly more separation */
  gap: clamp(0.4rem, calc(2.35rem - 3.75cqw), 2.4rem);
}
/* md pane widths — keep “STREAM US” / “FOLLOW US” on one line */
@container links-pane (min-width: 26rem) and (max-width: 54rem) {
  .content-links .content-section-heading {
    font-size: clamp(
      1.35rem,
      min(19cqw, calc(var(--aa-brand-link-size) * 0.6)),
      6.25rem
    );
  }

  .content-links .content-section-heading-word {
    letter-spacing: 0.13em;
  }
}
/*
 * Mobile panes are often ~40–48rem wide (96vw at ≤768px) — start scaling here,
 * not at 24rem, or headings stay huge until the pane is unusually narrow.
 */
@container links-pane (max-width: 48rem) {
  .content-links .content-section-heading {
    font-size: clamp(0.9rem, 13.5cqw, 3.5rem);
    gap: clamp(0.35rem, calc(1.75rem - 2cqw), 1.6rem);
  }

  .content-links .content-section-heading-word {
    letter-spacing: 0.11em;
  }
}
@container links-pane (max-width: 36rem) {
  .content-links .content-section-heading {
    font-size: clamp(0.8rem, 12cqw, 2.8rem);
    gap: clamp(0.4rem, calc(1.65rem - 1.6cqw), 1.5rem);
  }

  .content-links .content-section-heading-word {
    letter-spacing: 0.1em;
  }
}
@container links-pane (max-width: 28rem) {
  .content-links .content-section-heading {
    font-size: clamp(0.7rem, 10.5cqw, 2rem);
    gap: clamp(0.35rem, calc(1.4rem - 1.1cqw), 1.25rem);
  }

  .content-links .content-section-heading-word {
    letter-spacing: 0.085em;
  }
}
@container links-pane (max-width: 20rem) {
  .content-links .content-section-heading {
    font-size: clamp(0.7rem, 9cqw, 1.65rem);
    gap: clamp(0.3rem, 0.75rem, 1rem);
  }

  .content-links .content-section-heading-word {
    letter-spacing: 0.065em;
  }
}
.content-links .content-section-heading-word {
  white-space: normal;
  letter-spacing: 0.16em;
}
.content-panel-heading {
  margin: 0 0 0.5rem;
  flex-shrink: 0;
}
.content > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.content > .release-info,
.content > .media-video-list,
.content > .links,
.content > .content-panel-heading {
  max-width: 100%;
}
/* Scroll fade — bottom only; overlaps player band (clearance + fade ≈ --aa-panel-player-band) */
.mask-scroll-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--aa-panel-scroll-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--aa-panel-scroll-fade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html[data-motion='reduce'] .mask-scroll-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}
.content-about,
.content-music {
  overflow-wrap: break-word;
}
.content-about {
  line-height: 150%;
  padding-top: var(--aa-about-pad-top);
  padding-bottom: var(--aa-about-pad-bottom);
}
.content-about > * {
  align-self: center;
  margin: 1.5rem auto;
  max-width: min(100%, var(--aa-panel-prose-max));
  width: min(100%, var(--aa-panel-prose-max));
  box-sizing: border-box;
}
.content-about > h1.content-panel-heading {
  margin-top: 0;
}
.content-about > h2 {
  margin-top: var(--aa-about-section-gap);
}
.content-about > h3 {
  margin-top: var(--aa-about-member-gap);
}
.content-about p {
  margin: 1rem auto;
  text-indent: 2rem;
  overflow-wrap: break-word;
}
/* Fixed close control — visible whenever a content panel is open */
.panel-close-button,
.mobile-close-button {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 90;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--aa-glass-border-warm);
  border-radius: 50%;
  background: var(--aa-close-bg);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  color: var(--aa-text-nav);
  font-size: 1.85rem;
  line-height: 1;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-font-weight-ui);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--aa-glow-gold);
  text-shadow: var(--aa-text-effect-ui);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  pointer-events: auto;
}
.panel-close-button:not(.hide):hover,
.panel-close-button:not(.hide):focus-visible,
.mobile-close-button:not(.hide):hover,
.mobile-close-button:not(.hide):focus-visible {
  transform: scale(1.06);
  box-shadow: var(--aa-glow-gold), var(--aa-glow-control-active);
  border-color: var(--aa-cyan-border);
  outline: none;
}
.panel-close-button.hide,
.mobile-close-button.hide {
  display: none;
  pointer-events: none;
}
.content-links > :first-child {
  margin-top: 2rem;
}
.content-links > :last-child {
  margin-bottom: 0.5rem;
}
.hide {
  display: none;
}
/* Fixed music player — compact collapsed strip → animated full transport */
.music-player {
  position: fixed;
  bottom: 0;
  z-index: 100;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--aa-player-shell-max-w-collapsed);
  min-width: 0;
  margin: 1rem auto;
  padding: 0.85rem 1.15rem;
  height: auto;
  background: var(--aa-player-bg);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  border: 1px solid var(--aa-glass-border);
  box-shadow: var(--aa-glow-gold), inset 0 0 0.75rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-subtle));
  border-radius: 0.5rem;
  transition:
    width var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    max-width var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    padding var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    margin var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    left var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    right var(--aa-player-expand-duration) var(--aa-player-expand-ease),
    transform var(--aa-player-expand-duration) var(--aa-player-expand-ease);
}
.music-player[data-player-expanded='true'] {
  left: var(--aa-player-shell-inset-x);
  right: var(--aa-player-shell-inset-x);
  transform: none;
  width: auto;
  max-width: var(--aa-player-shell-max-w-expanded);
  min-width: 20rem;
  margin: 1rem 0;
  padding: 1.5rem 4rem;
}
@media (prefers-reduced-motion: reduce) {
  .music-player {
    transition: none;
  }
}
/* Extra chrome hidden until shell finishes expanding */
.music-player[data-player-expanded='false'] .seeker-wrapper,
.music-player[data-player-expanded='false'] .clock,
.music-player[data-player-expanded='false'] .back-button,
.music-player[data-player-expanded='false'] .next-button,
.music-player[data-player-expanded='false'] .shuffle-button,
.music-player[data-player-expanded='false'] .repeat-button,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .seeker-wrapper,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .clock,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .back-button,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .next-button,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .shuffle-button,
.music-player[data-player-expanded='true']:not(.player-chrome-ready) .repeat-button {
  display: none;
  pointer-events: none;
}
@keyframes aa-player-chrome-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .music-player.player-chrome-ready[data-player-expanded='true'] .seeker-wrapper {
    display: block;
    animation: aa-player-chrome-in var(--aa-player-chrome-fade-duration) ease
      var(--aa-player-chrome-fade-delay) both;
  }

  .music-player.player-chrome-ready[data-player-expanded='true'] .clock {
    display: inline-block;
    animation: aa-player-chrome-in var(--aa-player-chrome-fade-duration) ease
      calc(var(--aa-player-chrome-fade-delay) + 0.04s) both;
  }

  .music-player.player-chrome-ready[data-player-expanded='true'] .back-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .next-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .shuffle-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .repeat-button {
    display: inline-block;
    animation: aa-player-chrome-in var(--aa-player-chrome-fade-duration) ease
      calc(var(--aa-player-chrome-fade-delay) + 0.07s) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .music-player.player-chrome-ready[data-player-expanded='true'] .seeker-wrapper {
    display: block;
  }

  .music-player.player-chrome-ready[data-player-expanded='true'] .clock {
    display: inline-block;
  }

  .music-player.player-chrome-ready[data-player-expanded='true'] .back-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .next-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .shuffle-button,
  .music-player.player-chrome-ready[data-player-expanded='true'] .repeat-button {
    display: inline-block;
  }
}
/* Collapsed: play + marquee only, tight inline row */
.music-player[data-player-expanded='false'] .player-transport {
  width: auto;
  max-width: none;
}
.music-player[data-player-expanded='false'] .player-controls {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.4rem;
}
.music-player[data-player-expanded='false'] .play-button {
  width: var(--aa-player-btn-h, 4rem);
  height: var(--aa-player-btn-h, 4rem);
  padding: 0.65rem;
  margin: 0;
}
.music-player[data-player-expanded='false'] .song-name-wrapper {
  width: var(--aa-player-marquee-w-collapsed);
  min-width: 0;
  max-width: var(--aa-player-marquee-w-collapsed);
  height: var(--aa-player-marquee-h);
  margin: 0;
  flex-shrink: 0;
}
.music-player button {
  background: transparent;
  color: var(--aa-text-body);
  border: none;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 1rem;
  width: 4rem;
  margin: 0 1rem;
  box-shadow: none;
  transition: filter 0.2s ease, transform 0.15s ease;
}
.music-player button:hover,
.music-player button:focus-visible {
  outline: none;
  box-shadow: none;
}
.music-player button:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 3px;
}
.player-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  width: 100%;
  max-width: var(--aa-player-transport-max-w, 50rem);
  margin-inline: auto;
}
.player-controls {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.music-player > .clock {
  display: inline-block;
  flex-shrink: 0;
  color: var(--aa-player-clock-color, var(--aa-player-chrome-text));
  text-shadow: var(--aa-text-smoke);
  background: transparent;
  border: none;
  font-size: var(--aa-player-clock-font);
  font-weight: var(--aa-font-weight-ui);
  font-family: monospace;
  line-height: 1.25;
  padding: var(--aa-player-clock-pad-block) var(--aa-player-clock-pad-inline);
  width: var(--aa-player-clock-w);
  min-width: var(--aa-player-clock-w);
  box-sizing: border-box;
  text-align: center;
}
.music-player img {
  height: 1.5rem;
  filter: var(--aa-player-icon-tint) var(--aa-player-icon-glow-filter);
}
.music-player button:hover img,
.music-player button:focus-visible img {
  filter: var(--aa-player-icon-tint-hover) var(--aa-player-icon-glow-active-filter);
}
.music-player .shuffle-button:not(.enabled):hover img,
.music-player .shuffle-button:not(.enabled):focus-visible img,
.music-player .repeat-button.no-repeat:hover img,
.music-player .repeat-button.no-repeat:focus-visible img {
  filter: var(--aa-player-icon-tint) var(--aa-player-icon-muted-filter);
  opacity: 0.66;
}
.music-player .play-button.is-playing img {
  filter: var(--aa-player-icon-tint-hover) var(--aa-player-icon-glow-active-filter);
}
.song-name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--aa-player-chrome-tab-radius, 0.5rem);
  background: var(--aa-player-marquee-bg);
  color: var(--aa-player-chrome-text);
  text-shadow: var(--aa-text-smoke);
  border: 1px solid var(--aa-glass-border);
  font-size: 1.5rem;
  margin: 0 1rem;
  position: relative;
  width: var(--aa-player-marquee-w);
  height: var(--aa-player-marquee-h);
  overflow: hidden;
  box-sizing: border-box;
}
.song-name {
  color: var(--aa-player-marquee-color, var(--aa-player-chrome-muted));
  font-family: var(--aa-font-display);
  font-weight: var(--aa-logo-wordmark-weight);
  font-synthesis: weight;
  letter-spacing: var(--aa-logo-wordmark-tracking);
  text-transform: uppercase;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 1rem;
  margin: 0;
}
.song-name-wrapper:not(.song-name-wrapper--scroll) .song-name {
  position: static;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-name-wrapper.song-name-wrapper--scroll .song-name {
  position: absolute;
  left: 0;
  top: 0.5rem;
  padding: 0 1rem;
  text-align: left;
}
.song-name.song-name--scroll {
  animation: scroll-left var(--marquee-duration, 12s) linear infinite;
}
@keyframes scroll-left {
  from {
    transform: translateX(var(--marquee-start));
  }

  to {
    transform: translateX(var(--marquee-end));
  }
}
.next-button {
  margin-right: calc(var(--aa-player-marquee-w) * 0.75);
}
.seeker-wrapper {
  display: block;
  position: relative;
  width: 90%;
  margin: 0.5rem auto 0.85rem;
}
.seeker {
  --seeker-fill-pct: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  accent-color: var(--aa-player-seeker-fill, var(--aa-player-seeker-accent));
  cursor: pointer;
}
.seeker::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 1px solid var(--aa-glass-border);
  border-radius: 0.3rem;
  background: linear-gradient(
    to right,
    var(--aa-player-seeker-fill, var(--aa-player-seeker-accent)) 0%,
    var(--aa-player-seeker-fill, var(--aa-player-seeker-accent)) var(--seeker-fill-pct, 0%),
    var(--aa-seeker-track) var(--seeker-fill-pct, 0%),
    var(--aa-seeker-track) 100%
  );
  box-shadow: inset 0 0 0.25rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-seeker));
}
.seeker::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.125rem;
  border: 1px solid var(--aa-glass-border);
  border-radius: 50%;
  background: var(--aa-player-seeker-fill, var(--aa-player-seeker-accent));
  box-shadow: var(--aa-player-seeker-thumb-glow, 0 0 0.2rem rgba(var(--aa-black-rgb), 0.35));
  cursor: pointer;
}
.seeker::-moz-range-track {
  height: 0.5rem;
  border: 1px solid var(--aa-glass-border);
  border-radius: 0.3rem;
  background: var(--aa-seeker-track);
  box-shadow: inset 0 0 0.25rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-seeker));
}
.seeker::-moz-range-progress {
  height: 0.5rem;
  border-radius: 0.3rem 0 0 0.3rem;
  background: var(--aa-player-seeker-fill, var(--aa-player-seeker-accent));
}
.seeker::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--aa-glass-border);
  border-radius: 50%;
  background: var(--aa-player-seeker-fill, var(--aa-player-seeker-accent));
  box-shadow: var(--aa-player-seeker-thumb-glow, 0 0 0.2rem rgba(var(--aa-black-rgb), 0.35));
  cursor: pointer;
}
.seeker:focus {
  outline-width: 0;
}
.seeker:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 3px;
}
.shuffle-button:not(.enabled) img,
.repeat-button.no-repeat img {
  opacity: 0.58;
  filter: var(--aa-player-icon-tint) var(--aa-player-icon-muted-filter);
}
.shuffle-button.enabled img,
.repeat-button.repeat-all img,
.repeat-button.repeat-one img {
  opacity: 1;
  filter: var(--aa-player-icon-tint-hover) var(--aa-player-icon-glow-active-filter);
}
/* Music panel — releases, track rows, cover art */
.music-another-arc-album > .song-info .song-info-wrapper p,
.music-another-time-ep > .song-info .song-info-wrapper p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.song-info[data-track-id] {
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.song-info[data-track-id]:hover,
.song-info[data-track-id]:focus-visible {
  background: var(--aa-glass-surface);
  box-shadow: var(--aa-glow-gold);
  outline: none;
}
/* Album / EP track rows (no cover) — same horizontal measure as singles' text column */
.music-another-arc-album > .song-info,
.music-another-time-ep > .song-info {
  width: 100%;
  max-width: var(--aa-panel-prose-max);
  margin: 0.15rem auto;
  justify-content: flex-start;
  box-sizing: border-box;
}
.release-info {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}
.song-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 1rem .5rem;
  padding: .5rem 1rem;
  max-width: 100%;
  box-sizing: border-box;
}
.album-info .song-info-wrapper {
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
.song-info-title {
  display: inline;
}
.song-info-duration {
  float: right;
}
.cover-art-wrapper {
  margin: 1.5rem auto;
  align-self: center;
  text-align: center;
  max-width: 100%;
}
.cover-art-wrapper img {
  width: min(20rem, 100%);
  max-width: 100%;
  height: auto;
}
.album-info .cover-art-wrapper img {
  width: min(30rem, 100%);
}
/* Links panel — social rows + brand icon filters */
.content-links {
  background: var(--aa-content-bg);
  justify-content: flex-start;
  overflow-y: scroll;
  /* Fluid icon row — scales with links-pane (cqw) */
  --aa-links-glow-pad: clamp(1rem, 2cqw, 2rem);
  --aa-links-icon-gap: clamp(2.5rem, 9cqw, 7.5rem);
  --aa-links-icon-size: clamp(
    3.5rem,
    min(
      22cqw,
      calc((100cqw - 3 * var(--aa-links-icon-gap) - 2 * var(--aa-links-glow-pad)) / 4)
    ),
    min(12rem, var(--aa-brand-link-size-max, 12rem))
  );
}
.links {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: var(--aa-brand-link-gap);
}
.content .links {
  margin: 1rem auto;
}
.content-links .links {
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--aa-links-icon-gap);
  width: max-content;
  max-width: 100%;
  margin: 0.1rem auto;
  padding: var(--aa-links-glow-pad);
  box-sizing: border-box;
  overflow: visible;
}
.content-links .links .link {
  flex: 0 0 var(--aa-links-icon-size);
  width: var(--aa-links-icon-size);
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-links .links .link img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.links a {
  margin: 0;
  flex: 0 0 auto;
}
.links .link img {
  display: block;
  width: var(--aa-brand-link-size);
  min-width: 0;
  max-width: 100%;
  height: auto;
  transition: filter 0.25s ease, transform 0.2s ease;
}
.links .link:hover img,
.links .link:focus-visible img {
  transform: scale(1.06);
}
/* Brand tint + stroke + glow (channels in :root --aa-brand-*-rgb) */
.link-insta img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(270deg) brightness(120%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-insta-glow-filter);
}
.link-fb img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(150deg) brightness(120%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-fb-glow-filter);
}
.link-twitter img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(220deg) brightness(120%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-twitter-glow-filter);
}
.link-email img {
  filter:
    invert(62%) sepia(72%) saturate(340%) hue-rotate(6deg) brightness(148%) contrast(92%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-email-glow-filter);
}
.link-bandcamp img {
  filter:
    invert(50%) sepia(10%) saturate(100%) hue-rotate(0deg) brightness(180%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-bandcamp-glow-filter);
}
.link-spotify img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(90deg) brightness(120%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-spotify-glow-filter);
}
.link-youtube img {
  transform: scale(1.12);
  transform-origin: center;
  filter:
    invert(50%) sepia(150%) saturate(100%) hue-rotate(270deg) brightness(120%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-youtube-glow-filter);
}
.link-apple img {
  filter:
    invert(50%) sepia(50%) saturate(100%) hue-rotate(300deg) brightness(160%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-apple-glow-filter);
}
.link-insta:hover img,
.link-insta:focus-visible img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(270deg) brightness(130%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-insta-glow-hover-filter);
}
.link-fb:hover img,
.link-fb:focus-visible img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(150deg) brightness(130%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-fb-glow-hover-filter);
}
.link-twitter:hover img,
.link-twitter:focus-visible img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(220deg) brightness(130%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-twitter-glow-hover-filter);
}
.link-email:hover img,
.link-email:focus-visible img {
  filter:
    invert(65%) sepia(78%) saturate(380%) hue-rotate(6deg) brightness(162%) contrast(90%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-email-glow-hover-filter);
}
.link-bandcamp:hover img,
.link-bandcamp:focus-visible img {
  filter:
    invert(50%) sepia(10%) saturate(100%) hue-rotate(0deg) brightness(195%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-bandcamp-glow-hover-filter);
}
.link-spotify:hover img,
.link-spotify:focus-visible img {
  filter:
    invert(50%) sepia(100%) saturate(100%) hue-rotate(90deg) brightness(130%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-spotify-glow-hover-filter);
}
.link-youtube:hover img,
.link-youtube:focus-visible img {
  transform: scale(1.18);
  filter:
    invert(50%) sepia(150%) saturate(100%) hue-rotate(270deg) brightness(130%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-youtube-glow-hover-filter);
}
.link-apple:hover img,
.link-apple:focus-visible img {
  filter:
    invert(50%) sepia(50%) saturate(100%) hue-rotate(300deg) brightness(175%) contrast(100%)
    var(--aa-brand-icon-stroke-filter)
    var(--aa-brand-apple-glow-hover-filter);
}
/* Media / Videos panel */
.media-video-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: min(56rem, 100%);
  margin: 0 auto;
  padding: 0 0.25rem;
  flex: 1 1 auto;
  min-height: 0;
}
.content-media .media-video-list > * {
  margin: 0;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  flex-shrink: 0;
}
/* Invisible tail — scroll past last iframe so bottom isn’t clipped by player */
.content-media .media-video-list::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: var(--aa-panel-media-scroll-tail);
  pointer-events: none;
}
.content.content-media {
  padding-bottom: calc(
    var(--aa-panel-scroll-pad-bottom) + var(--aa-panel-media-scroll-tail)
  );
  scroll-padding-bottom: calc(
    var(--aa-panel-scroll-end) + var(--aa-panel-media-scroll-tail)
  );
}
.media-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.media-video-title {
  align-self: stretch;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  margin: 0;
  text-align: center;
}
.content-media .media-video-copy {
  max-width: var(--aa-panel-prose-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.45;
  color: var(--aa-text-soft);
  text-align: center;
}
.media-video-frame {
  align-self: stretch;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--aa-glass-border);
  box-shadow: 0 0 0.65rem rgba(var(--aa-content-edge-glow-rgb), var(--aa-alpha-inset-pane));
}
.media-video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 0;
}
.media-video-portrait {
  aspect-ratio: 9 / 16;
  max-height: min(70dvh, 40rem);
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Shop panel — merch list, detail, embedded Stripe Checkout */
.shop {
  container-type: inline-size;
  container-name: shop;
  box-sizing: border-box;
  width: min(100%, 72rem);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem) 2rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.shop__heading {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 1.85rem);
}
.shop__grid {
  --shop-gap: clamp(1.75rem, 4vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: var(--shop-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Basis uses full row width minus gaps so rows never overflow; justify-content centers orphans */
.shop__card {
  list-style: none;
  box-sizing: border-box;
  flex: 0 1 100%;
  width: min(100%, 22rem);
  max-width: min(22rem, 100%);
  min-width: 0;
}
@container shop (min-width: 30rem) {
  .shop__card {
    flex-basis: calc((100% - var(--shop-gap)) / 2);
    max-width: min(22rem, calc((100% - var(--shop-gap)) / 2));
  }
}
@container shop (min-width: 46rem) {
  .shop__card {
    flex-basis: calc((100% - 2 * var(--shop-gap)) / 3);
    max-width: min(22rem, calc((100% - 2 * var(--shop-gap)) / 3));
  }
}
.shop__card-media {
  position: relative;
  margin-bottom: 0.85rem;
}
.shop__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.35rem;
}
.shop__card-img--placeholder {
  background: rgba(var(--aa-ink-rgb), 0.06);
  min-height: 12rem;
}
html[data-theme='dark'] .shop__card-img--placeholder {
  background: rgba(var(--aa-white-rgb), 0.06);
}
.shop__sold-out,
.shop__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.72);
  color: var(--aa-text-body);
}
.shop__product-button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--aa-text-body);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}
.shop__product-button:hover,
.shop__product-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.shop__product-button:hover .shop__product-title,
.shop__product-button:focus-visible .shop__product-title {
  color: var(--aa-text-accent);
}
.shop__product-button:focus-visible .shop__card-media {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 4px;
  border-radius: 0.35rem;
}
.shop__product-title {
  font-family: var(--aa-font-display);
  font-size: 1.2rem;
  font-weight: var(--aa-logo-wordmark-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}
.shop__description,
.shop__lead-time {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--aa-text-muted);
  max-width: 36rem;
}
.shop__founders {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--aa-glass-border-warm);
  background: rgba(var(--aa-gold-rgb), 0.08);
  text-align: center;
}
.shop__founders-lead,
.shop__founders-counter {
  margin: 0.35rem 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--aa-text-soft);
}
.shop__founders-counter {
  font-variant-numeric: tabular-nums;
  color: var(--aa-text-heading);
}
.shop__variant-picker {
  border: none;
  border-radius: 0;
  padding: 0.5rem 0;
  margin: 0;
  width: 100%;
  max-width: 28rem;
}
.shop__variant-picker legend {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.shop__variant-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.45rem 0;
  font-size: 1.0625rem;
  cursor: pointer;
}
.shop__variant-option:has(input:checked) {
  color: var(--aa-text-accent);
  font-weight: 600;
}
.shop__product-price,
.shop__price {
  font-family: monospace;
  font-size: 1.2rem;
  color: var(--aa-text-accent);
  text-shadow: var(--aa-shop-price-glow, var(--aa-text-smoke));
}
:root,
html[data-theme='light'] {
  --aa-shop-price-glow: 0 0 0.4rem rgba(var(--aa-smoke-purple-rgb), 0.28);
}
html[data-theme='dark'] {
  --aa-shop-price-glow: var(--aa-text-smoke);
}
.shop__detail,
.shop__checkout,
.shop__confirm,
.shop__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.shop__detail .shop__heading {
  font-size: clamp(1.65rem, 3.5vw, 2rem);
}
.shop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.shop__buy,
.shop__back {
  padding: 0.75rem 1.35rem;
  font-size: 1.0625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--aa-glass-border);
  background: var(--aa-glass-surface);
  color: var(--aa-text-body);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.shop__buy:hover,
.shop__buy:focus-visible,
.shop__back:hover,
.shop__back:focus-visible {
  box-shadow: var(--aa-glow-gold);
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
}
.shop__buy:disabled {
  opacity: 0.65;
  cursor: wait;
}
.shop__status {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--aa-text-muted);
  text-shadow: var(--aa-text-smoke);
}
.shop__status--error {
  color: var(--aa-text-accent);
}
.shop__stripe-mount {
  width: min(100%, 32rem);
  min-height: 480px;
}
/* Mailing list panel */
.fans {
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 0 0.5rem 2rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.fans__heading {
  margin: 0 0 1rem;
  text-align: center;
}
.fans__lead {
  text-align: center;
  color: var(--aa-text-muted);
  margin: 0 0 1.25rem;
}
.fans__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fans__label {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aa-text-soft);
}
.fans__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  font-size: 1.0625rem;
  border-radius: 0.35rem;
  border: 1px solid var(--aa-glass-border);
  background: var(--aa-glass-surface);
  color: var(--aa-text-body);
}
.fans__submit,
.fans__secondary {
  padding: 0.7rem 1.2rem;
  font-size: 1.0625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--aa-glass-border);
  background: var(--aa-glass-surface);
  color: var(--aa-text-body);
  cursor: pointer;
}
.fans__submit:hover,
.fans__submit:focus-visible,
.fans__secondary:hover,
.fans__secondary:focus-visible {
  box-shadow: var(--aa-glow-gold);
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
}
.fans__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}
.fans__fine {
  font-size: 0.875rem;
  color: var(--aa-text-muted);
  margin: 0;
  text-align: center;
}
.fans__status--error {
  color: var(--aa-text-accent);
  text-align: center;
}
.fans__cta {
  margin-top: 2rem;
  text-align: center;
}
.fans__cta-link {
  font-family: var(--aa-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aa-text-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.music-join-cta {
  margin: 0 auto 1.75rem;
  max-width: var(--aa-panel-prose-max);
  text-align: center;
}
/* Phase 7.4.3 — ad landing pills (music dwell + play fallback) */
.aa-ad-pill {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 120;
  margin: 0;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--aa-cyan-border, rgba(120, 220, 255, 0.45));
  background: rgba(8, 12, 18, 0.88);
  color: var(--aa-text-primary, #f4f0e6);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.aa-ad-pill--play {
  bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
}
.aa-ad-pill--dwell {
  border-color: rgba(var(--aa-gold-rgb, 212, 175, 55), 0.55);
}
.aa-ad-pill:hover,
.aa-ad-pill:focus-visible {
  filter: brightness(1.08);
}
.aa-ad-pill[hidden] {
  display: none;
}
.shop__ad-join-cta {
  margin-top: 1rem;
  text-align: center;
}
.shop__ad-join-cta[hidden] {
  display: none;
}
/* Easter eggs — voice bots (Egg 3), mic swap, exit gags */
html[data-bot-unlocked] .logo-theme-toggle .logo {
  filter: drop-shadow(0 0 0.45rem rgba(212, 160, 23, 0.55));
}
.logo-theme-toggle[data-logo-hold] .logo {
  animation: logo-hold-pulse 5s linear forwards;
}
@keyframes logo-hold-pulse {
  from {
    filter: drop-shadow(0 0 0.2rem rgba(212, 160, 23, 0.35));
    transform: scale(1);
  }

  to {
    filter: drop-shadow(0 0 0.85rem rgba(255, 233, 163, 0.95));
    transform: scale(1.06);
  }
}
.logo-theme-toggle[data-bot-mic] .logo {
  display: none;
}
.logo-theme-toggle[data-bot-mic]::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: center / contain no-repeat url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%20aria-hidden='true'%3e%3cpath%20d='M192%200C139%200%2096%2043%2096%2096V256c0%2053%2043%2096%2096%2096s96-43%2096-96V96c0-53-43-96-96-96zM64%20216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2089.1%2066.2%20162.7%20152%20174.4V464H120c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h144c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H216V430.4c85.8-11.7%20152-85.3%20152-174.4V216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2070.7-57.3%20128-128%20128S64%20326.7%2064%20256V216z'/%3e%3c/svg%3e");
  filter: var(--aa-chrome-gold-icon-tint-hover) var(--aa-chrome-gold-icon-glow);
  pointer-events: none;
  animation: bot-mic-glow-pulse 4s ease-in-out infinite;
}
html[data-theme='dark'] .logo-theme-toggle[data-bot-mic]::after {
  background: center / contain no-repeat url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%20aria-hidden='true'%3e%3cpath%20d='M192%200C139%200%2096%2043%2096%2096V256c0%2053%2043%2096%2096%2096s96-43%2096-96V96c0-53-43-96-96-96zM64%20216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2089.1%2066.2%20162.7%20152%20174.4V464H120c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h144c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H216V430.4c85.8-11.7%20152-85.3%20152-174.4V216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2070.7-57.3%20128-128%20128S64%20326.7%2064%20256V216z'/%3e%3c/svg%3e");
  background-color: transparent;
  mask: none;
  -webkit-mask: none;
  filter:
    var(--aa-nav-moon-icon-tint)
    drop-shadow(0 0 0.55rem rgba(var(--aa-blood-rgb-bright), 0.88))
    drop-shadow(0 0 1.05rem rgba(var(--aa-blood-rgb), 0.62))
    drop-shadow(0 0 1.35rem rgba(var(--aa-blood-rgb-deep), 0.42));
  animation: bot-mic-glow-pulse-dark 4s ease-in-out infinite;
}
@keyframes bot-mic-glow-pulse {
  0%,
  100% {
    filter: var(--aa-chrome-gold-icon-tint-hover) var(--aa-chrome-gold-icon-glow);
  }

  50% {
    filter: var(--aa-chrome-gold-icon-tint-hover) var(--aa-chrome-gold-icon-glow-hover);
  }
}
@keyframes bot-mic-glow-pulse-dark {
  0%,
  100% {
    filter:
      var(--aa-nav-moon-icon-tint)
      drop-shadow(0 0 0.55rem rgba(var(--aa-blood-rgb-bright), 0.88))
      drop-shadow(0 0 1.05rem rgba(var(--aa-blood-rgb), 0.62))
      drop-shadow(0 0 1.35rem rgba(var(--aa-blood-rgb-deep), 0.42));
  }

  50% {
    filter:
      var(--aa-nav-moon-icon-tint)
      drop-shadow(0 0 0.85rem rgba(var(--aa-blood-rgb-bright), 1))
      drop-shadow(0 0 1.35rem rgba(var(--aa-blood-rgb), 0.82))
      drop-shadow(0 0 1.85rem rgba(var(--aa-blood-rgb-deep), 0.58));
  }
}
html[data-motion='reduce'] .logo-theme-toggle[data-bot-mic]::after {
  animation: none;
}
html[data-bot-session] .logo-theme-toggle {
  pointer-events: auto;
}
html[data-bot-reality-off] .music-player,
html[data-bot-reality-off] .bot-caption {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.bot-caption {
  --bot-caption-inset: 0.65rem;
  position: fixed;
  z-index: 110;
  top: calc(var(--bot-caption-inset) + env(safe-area-inset-top, 0px));
  left: max(var(--bot-caption-inset), env(safe-area-inset-left, 0px));
  right: max(var(--bot-caption-inset), env(safe-area-inset-right, 0px));
  bottom: calc(var(--bot-caption-bottom, 0px) + var(--bot-caption-inset));
  transform: none;
  width: auto;
  height: auto;
  max-height: none;
  pointer-events: auto;
  filter: none;
  box-sizing: border-box;
}
.bot-caption[hidden] {
  display: none !important;
}
.bot-caption-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 0.65rem;
  background: var(--aa-pane-bg);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  border: 1px solid var(--aa-glass-border-warm);
  box-shadow:
    var(--aa-pane-glow),
    var(--aa-glow-gold),
    inset 0 0 0.75rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-subtle));
  box-sizing: border-box;
  overflow: hidden;
}
html[data-theme='dark'] .bot-caption-pane {
  box-shadow:
    var(--aa-pane-glow),
    var(--aa-glow-gold),
    inset 0 0 0.65rem rgba(var(--aa-black-rgb), var(--aa-alpha-inset-pane));
}
.bot-caption-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex: 0 0 auto;
  margin-bottom: 0.45rem;
}
.bot-caption-kicker {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-logo-wordmark-weight);
  font-synthesis: weight;
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  letter-spacing: var(--aa-logo-wordmark-tracking);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  color: var(--aa-gold-bright);
  text-shadow:
    0 0 0.45rem rgba(var(--aa-smoke-purple-rgb), 0.58),
    0 0 1.25rem rgba(var(--aa-smoke-purple-deep-rgb), 0.44),
    0 0 2rem rgba(var(--aa-smoke-purple-rgb), 0.3),
    0 0 0.35rem rgba(var(--aa-gold-rgb-bright), 0.55);
}
.bot-caption-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--aa-glass-border);
  border-radius: 0.35rem;
  background: var(--aa-close-bg, var(--aa-glass-surface));
  color: var(--aa-text-body);
  font-family: var(--aa-font-display);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--aa-glow-control);
}
.bot-caption-close:hover,
.bot-caption-close:focus-visible {
  box-shadow: var(--aa-glow-control-active);
}
.bot-caption-close:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
}
.bot-caption-close:disabled {
  opacity: 0.45;
  cursor: default;
}
html[data-theme='dark'] .bot-caption-kicker {
  color: var(--aa-blood-100);
  text-shadow: 0 0 0.5rem rgba(var(--aa-blood-rgb-bright), 0.45);
}
.bot-caption-history {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0.05rem;
}
.bot-caption-msg {
  max-width: 92%;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-font-weight-ui);
  font-size: clamp(0.82rem, 3.6vw, 0.95rem);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.bot-caption-msg--bot {
  align-self: flex-start;
  text-align: left;
  color: var(--aa-text-body);
  text-shadow: var(--aa-text-effect-body);
  background: rgba(var(--aa-white-rgb), 0.06);
  border: 1px solid var(--aa-glass-border);
}
.bot-caption-msg--user {
  align-self: flex-end;
  text-align: right;
  color: var(--aa-text-body);
  background: rgba(var(--aa-gold-rgb-bright), 0.12);
  border: 1px solid rgba(var(--aa-gold-rgb), 0.28);
}
html[data-theme='dark'] .bot-caption-msg--bot {
  background: rgba(var(--aa-black-rgb), 0.22);
}
html[data-theme='dark'] .bot-caption-msg--user {
  background: rgba(var(--aa-blood-rgb-bright), 0.14);
  border-color: rgba(var(--aa-blood-rgb), 0.32);
}
.bot-caption-status {
  margin: 0.35rem 0 0;
  flex: 0 0 auto;
  font-family: var(--aa-font-display);
  font-weight: var(--aa-font-weight-ui);
  font-size: clamp(0.74rem, 3vw, 0.82rem);
  line-height: 1.35;
  text-align: center;
  color: var(--aa-text-muted, var(--aa-ink-muted));
  font-style: italic;
}
.bot-caption-status[hidden] {
  display: none !important;
}
.bot-caption-fallback {
  display: flex;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--aa-glass-border);
}
.bot-caption-fallback[hidden] {
  display: none !important;
}
.bot-caption-composer {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}
.bot-caption-record {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--aa-glass-border-warm);
  border-radius: 0.45rem;
  background: var(--aa-close-bg);
  color: var(--aa-text-body);
  cursor: pointer;
  box-shadow: var(--aa-glow-control);
}
.bot-caption-record:hover,
.bot-caption-record:focus-visible {
  box-shadow: var(--aa-glow-control-active);
}
.bot-caption-record:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
}
.bot-caption-record:disabled {
  opacity: 0.45;
  cursor: default;
}
.bot-caption-record[data-recording='true'] {
  box-shadow: var(--aa-glow-control-active);
  animation: bot-record-pulse 1.1s ease-in-out infinite;
}
.bot-caption-record-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  background: center / contain no-repeat url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%20aria-hidden='true'%3e%3cpath%20d='M192%200C139%200%2096%2043%2096%2096V256c0%2053%2043%2096%2096%2096s96-43%2096-96V96c0-53-43-96-96-96zM64%20216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2089.1%2066.2%20162.7%20152%20174.4V464H120c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h144c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H216V430.4c85.8-11.7%20152-85.3%20152-174.4V216c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v40c0%2070.7-57.3%20128-128%20128S64%20326.7%2064%20256V216z'/%3e%3c/svg%3e");
  filter: var(--aa-chrome-gold-icon-tint-hover, var(--aa-player-icon-tint-hover));
}
html[data-theme='dark'] .bot-caption-record-icon {
  filter: var(--aa-nav-moon-icon-tint);
}
@keyframes bot-record-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}
.bot-caption-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid var(--aa-glass-border);
  background: var(--aa-glass-surface);
  color: var(--aa-text-body);
  font: inherit;
  box-shadow: inset 0 0 0.35rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-subtle));
}
.bot-caption-input:focus-visible {
  outline: 2px solid var(--aa-focus-ring);
  outline-offset: 2px;
}
.bot-caption-input:disabled {
  opacity: 0.45;
  cursor: default;
}
.bot-caption-fallback[data-locked='true'] .bot-caption-composer {
  opacity: 0.55;
  pointer-events: none;
}
.bot-caption-send {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.35rem;
  border: 1px solid var(--aa-glass-border-warm);
  background: var(--aa-close-bg);
  color: var(--aa-text-body);
  font-family: var(--aa-font-display);
  font-weight: var(--aa-logo-wordmark-weight);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--aa-glow-control);
}
.bot-caption-send:hover {
  box-shadow: var(--aa-glow-control-active);
}
html[data-motion='reduce'] .bot-caption {
  filter: none;
}
html[data-motion='reduce'] .bot-caption-record[data-recording='true'] {
  animation: none;
}
/* md — full height above player, slightly roomier type */
@media (min-width: 769px) and (max-width: 1192px) {
  .bot-caption {
    --bot-caption-inset: 0.85rem;
  }

  .bot-caption-pane {
    padding: 1rem 1.15rem 1rem;
  }

  .bot-caption-msg {
    font-size: clamp(0.88rem, 2.2vw, 0.98rem);
  }

  .bot-caption-composer {
    gap: 0.55rem;
  }
}
/* lg — docked bottom-right column, full height to top */
@media (min-width: 1193px) {
  .bot-caption {
    --bot-caption-inset: 1.35rem;
    top: max(var(--bot-caption-inset), env(safe-area-inset-top, 0px));
    left: auto;
    right: max(var(--bot-caption-inset), env(safe-area-inset-right, 0px));
    bottom: calc(var(--bot-caption-bottom, 0px) + var(--bot-caption-inset));
    width: min(24rem, 28vw);
    height: auto;
    max-height: none;
  }

  .bot-caption-pane {
    padding: 1rem 1.15rem 1.05rem;
    border-radius: 0.65rem;
  }

  .bot-caption-header {
    margin-bottom: 0.55rem;
  }

  .bot-caption-kicker {
    font-size: 0.74rem;
  }

  .bot-caption-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 0.35rem;
    padding-right: 0.15rem;
  }

  .bot-caption-msg {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .bot-caption-status {
    text-align: left;
    font-size: 0.78rem;
  }

  .bot-caption-fallback {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0.65rem;
  }

  .bot-caption-composer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .bot-caption-record {
    width: 100%;
    min-height: 2.85rem;
  }

  .bot-caption-input {
    min-height: 2.85rem;
    font-size: 0.88rem;
  }

  .bot-caption-send {
    width: 100%;
    min-height: 2.65rem;
    font-size: 0.74rem;
  }
}
/* Radial burst (not spread box-shadow) — Chrome squares 1px + multi spread shadows. */
@keyframes bot-sale-sunburst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }

  12% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.55);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  58% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.04);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}
@keyframes bot-sale-burst-logo {
  0%,
  10% {
    filter:
      drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 1rem rgba(255, 252, 240, 0.3));
  }

  38%,
  58% {
    filter:
      drop-shadow(0 0 2.2rem rgba(255, 255, 255, 1))
      drop-shadow(0 0 4.5rem rgba(255, 255, 255, 0.96))
      drop-shadow(0 0 7.5rem rgba(255, 252, 235, 0.78))
      brightness(1.35);
  }

  100% {
    filter:
      drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.2))
      drop-shadow(0 0 0.6rem rgba(255, 252, 240, 0.1));
  }
}
@keyframes bot-sale-logo-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0.35rem rgba(212, 160, 23, 0.55))
      drop-shadow(0 0 0.8rem rgba(255, 233, 163, 0.35));
  }

  50% {
    filter: drop-shadow(0 0 1.1rem rgba(255, 233, 163, 0.95))
      drop-shadow(0 0 2.4rem rgba(212, 160, 23, 0.65));
  }
}
html[data-bot-sale-active] .logo-theme-toggle[data-bot-mic] .logo {
  display: block;
}
html[data-bot-sale-active] .logo-theme-toggle[data-bot-mic]::after,
html[data-bot-sale-burst] .logo-theme-toggle[data-bot-mic]::after {
  content: none;
}
html[data-bot-sale-burst] .logo-cluster::after {
  content: '';
  position: fixed;
  left: var(--bot-burst-x, 50vw);
  top: var(--bot-burst-y, 35vh);
  width: min(150vmax, 2800px);
  height: min(150vmax, 2800px);
  z-index: 7995;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.12);
  transform-origin: center center;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.94) 5%,
    rgba(255, 255, 255, 0.82) 12%,
    rgba(255, 252, 235, 0.58) 22%,
    rgba(255, 245, 210, 0.32) 32%,
    rgba(255, 233, 163, 0.14) 42%,
    rgba(255, 255, 255, 0.06) 48%,
    transparent 54%
  );
  animation: bot-sale-sunburst 3.8s cubic-bezier(0.22, 0.78, 0.28, 1) forwards;
  will-change: transform, opacity;
}
html[data-bot-sale-burst] .logo-theme-toggle .logo {
  animation: bot-sale-burst-logo 3.8s ease-out forwards;
}
html[data-bot-sale-dollar] .logo-theme-toggle .logo {
  animation: bot-sale-logo-glow 0.55s ease-in-out infinite;
}
html[data-bot-sale-active] .logo-cluster {
  position: relative;
  z-index: 7996;
}
@keyframes bot-gold-flicker {
  0%,
  100% {
    filter: drop-shadow(0 0 0.2rem rgba(212, 160, 23, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 0.9rem rgba(255, 233, 163, 0.95));
  }
}
.link-wrapper a.bot-gold-flicker .nav-moon-icon {
  animation: bot-gold-flicker 0.45s steps(2) infinite;
}
@keyframes crt-collapse {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }

  55% {
    transform: scale(1, 0.012);
    filter: brightness(6);
  }

  75% {
    transform: scale(0.06, 0.012);
    filter: brightness(9);
  }

  100% {
    transform: scale(0, 0);
    filter: brightness(0);
  }
}
.container.crt-off {
  animation: crt-collapse 0.7s cubic-bezier(0.5, 0, 0.7, 1) forwards;
  transform-origin: 50% 50%;
}
@keyframes crt-bloom {
  from {
    filter: brightness(4);
  }

  to {
    filter: brightness(1);
  }
}
.container.crt-on {
  animation: crt-bloom 0.6s ease-out;
}
html[data-motion='reduce'] .link-wrapper a.bot-gold-flicker .nav-moon-icon {
  animation: none;
}
html[data-motion='reduce'][data-bot-sale-burst] .logo-cluster::after {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
html[data-motion='reduce'][data-bot-sale-active] .logo-theme-toggle .logo {
  animation: none;
}
html[data-motion='reduce'][data-bot-sale-dollar] .logo-theme-toggle .logo {
  animation: none;
}
html[data-motion='reduce'] .container.crt-off {
  animation: none;
  filter: brightness(0);
}
html[data-motion='reduce'] .container.crt-on {
  animation: none;
}
/* Responsive layout — sm (≤768), md (≤1192), lg (≥1193). See STYLE_GUIDE.md §5. */
@media (min-width: 1193px) {
  :root {
    --aa-panel-width: min(88rem, 94vw);
    --aa-panel-max-width: 96rem;
    --aa-links-panel-inset: clamp(1.5rem, 3.5vw, 3.75rem);
    --aa-brand-link-size: 9rem;
    --aa-brand-link-size-max: 11rem;
    --aa-brand-link-gap: 1.35rem;
    --aa-panel-scroll-extra: 2.25rem;
    --aa-panel-heading-pad-top: calc(2.25rem + env(safe-area-inset-top, 0px));
    /* lg — marquee 2× base (30rem); widen transport row so it is not capped at 50rem */
    --aa-player-marquee-w: 30rem;
    --aa-player-transport-max-w: min(78rem, calc(100vw - 6rem));
    --aa-player-btn-h: 4rem;
    /* Collapsed strip: play + marquee inline — shell must fit both (not expanded 30rem marquee) */
    --aa-player-marquee-w-collapsed: min(15rem, 22vw);
    --aa-player-shell-max-w-collapsed: calc(
      var(--aa-player-btn-h) + var(--aa-player-marquee-w-collapsed) + 2.5rem
    );
    --aa-panel-player-band-collapsed: calc(
      2rem + 1.7rem + var(--aa-player-btn-h)
    );
  }

  .content {
    top: var(--aa-panel-top-inset);
    bottom: var(--aa-panel-bottom-clearance);
    left: 50%;
    right: auto;
    width: var(--aa-panel-width);
    max-width: var(--aa-panel-max-width);
    margin: 0;
    transform: translateX(-50%);
    height: auto;
    max-height: calc(
      100dvh - var(--aa-panel-top-inset) - var(--aa-panel-bottom-clearance)
    );
  }
}
@media (min-width: 1600px) {
  :root {
    --aa-links-panel-inset: clamp(2rem, 4vw, 4.5rem);
    --aa-brand-link-size-max: 12.5rem;
    --aa-brand-link-gap: 1.5rem;
  }
}
/* md — max-width 1192px (tablet / small desktop) */
@media (max-width: 1192px) {
  :root {
    --aa-orbit-duration: 50s;
    --aa-player-margin-b: 1rem;
    --aa-player-pad-b: 0.85rem;
    --aa-player-btn-h: 3.5rem;
    --aa-player-float-above: 0rem;
    --aa-player-marquee-lift: 0rem;
    --aa-player-marquee-h: 0rem;
    --aa-player-seeker-row: 2rem;
    --aa-panel-player-gap: 1rem;
    --aa-panel-top-inset: 0.5rem;
    --aa-panel-top-reserve: var(--aa-panel-top-inset);
    --aa-panel-heading-pad-top: calc(1.85rem + env(safe-area-inset-top, 0px));
    --aa-panel-player-band-expanded: calc(
      var(--aa-player-margin-b)
      + var(--aa-player-pad-b)
      + var(--aa-player-seeker-row)
      + var(--aa-player-btn-h)
      + var(--aa-panel-player-gap)
    );
    --aa-panel-player-band-collapsed: calc(
      var(--aa-player-margin-b)
      + var(--aa-player-pad-b)
      + var(--aa-player-btn-h)
      + var(--aa-panel-player-gap)
    );
    --aa-panel-player-band: var(--aa-panel-player-band-expanded);
    --aa-panel-bottom-clearance: calc(
      var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
    );
    --aa-panel-bottom-reserve: var(--aa-panel-bottom-clearance);
    --aa-panel-scroll-fade: calc(
      var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
    );
    --aa-panel-scroll-extra: 2.75rem;
    --aa-panel-media-scroll-tail: var(--aa-panel-scroll-extra);
    --aa-panel-width: min(78rem, 98vw);
    --aa-panel-max-width: 88rem;
    --aa-links-panel-inset: clamp(1.15rem, 3.5vw, 2.5rem);
    --aa-brand-link-size: 7.25rem;
    --aa-brand-link-size-max: 8.25rem;
    --aa-brand-link-gap: 1rem;
  }

  html[data-player-expanded='false'] {
    --aa-panel-player-band: var(--aa-panel-player-band-collapsed);
    --aa-panel-bottom-clearance: calc(
      var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
    );
    --aa-panel-bottom-reserve: var(--aa-panel-bottom-clearance);
    --aa-panel-scroll-fade: calc(
      var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
    );
  }

  .nav {
    overflow: visible;
  }

  .links a {
    flex-grow: 0;
  }

  .content {
    top: var(--aa-panel-top-inset);
    bottom: var(--aa-panel-bottom-clearance);
    left: 50%;
    right: auto;
    width: var(--aa-panel-width);
    max-width: var(--aa-panel-max-width);
    margin: 0;
    transform: translateX(-50%);
    height: auto;
    max-height: calc(
      100dvh - var(--aa-panel-top-inset) - var(--aa-panel-bottom-clearance)
    );
    font-size: 1.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .content.content-about,
  .content.content-music,
  .content.content-media,
  .content.content-links {
    background: var(--aa-content-bg);
    box-shadow: var(--aa-content-glow);
    border: 1px solid var(--aa-content-border);
  }

  .content > * {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .content-about,
  .content-music,
  .content-media {
    line-height: 1.5;
  }

  .content-about h1 {
    font-size: 2.25rem;
  }

  .content-about h2 {
    font-size: 1.55rem;
  }

  .content-about h3 {
    font-size: 1.25rem;
  }

  .content-about > * {
    margin: 0.85rem auto;
  }

  .content-about p {
    margin: 0.5rem 0;
    text-indent: 0;
    font-size: 1.1rem;
  }

  .music-intro {
    font-size: 1.1rem;
  }

  .section-label {
    font-size: 1.55rem;
  }

  .song-info-wrapper p {
    font-size: 1.05rem;
  }

  .song-info-title {
    font-size: 1.2rem;
  }

  .cover-art-wrapper {
    margin: 1.25rem auto;
  }

  .cover-art-wrapper img,
  .album-info .cover-art-wrapper img {
    width: min(16rem, 55vw);
    max-width: 100%;
    height: auto;
  }

  .song-info {
    margin: 0.85rem auto;
    flex-wrap: wrap;
  }

  .music-singles .song-info {
    flex-direction: column;
    align-items: center;
  }

  .music-singles .cover-art-wrapper {
    margin: 1.25rem auto 0.5rem;
    flex: none;
    width: 100%;
  }

  .music-singles .song-info-wrapper {
    width: 100%;
    max-width: var(--aa-panel-prose-max);
  }

  .music-player button {
    width: var(--aa-player-btn-h);
    height: var(--aa-player-btn-h);
    padding: 0.65rem;
    margin: 0 0.65rem;
  }

  .music-player img {
    height: 1.35rem;
    width: auto;
  }

  .seeker {
    height: 0.4rem;
  }

  .seeker-wrapper {
    width: 92%;
    margin-bottom: 1.35rem;
  }
}
/* Middle + large: DOM order is mobile-first; restore transport → marquee → shuffle → repeat */
@media (min-width: 769px) {
  .player-controls {
    display: flex;
  }

  .player-controls .back-button {
    order: 1;
  }

  .player-controls .play-button {
    order: 2;
  }

  .player-controls .next-button {
    order: 3;
  }

  .player-controls .song-name-wrapper {
    order: 4;
  }

  .player-controls .shuffle-button {
    order: 5;
  }

  .player-controls .repeat-button {
    order: 6;
  }

  .player-controls .song-name-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: var(--aa-player-marquee-w);
    height: var(--aa-player-marquee-h);
    font-size: 1.5rem;
    margin: 0 1rem;
    z-index: auto;
    border-radius: 0.5rem;
    border-bottom: 1px solid var(--aa-glass-border);
    box-shadow: none;
  }

  .player-transport {
    gap: 0.65rem;
  }

  .music-player > .clock {
    margin: 0;
  }

  .next-button {
    margin-right: 0;
  }
}
/* Middle only: minimal shell padding so flex gives the marquee more row space */
@media (min-width: 769px) and (max-width: 1192px) {
  :root {
    --aa-player-marquee-w: min(13rem, 28vw);
    --aa-player-marquee-h: 2.6rem;
    --aa-player-pad-b: 0.35rem;
  }

  .content-links {
    --aa-links-glow-pad: clamp(1.35rem, 4.25cqw, 2.5rem);
  }

  .music-player {
    overflow: visible;
    background: var(--aa-player-bg);
    box-shadow:
      var(--aa-content-glow),
      inset 0 0 0.85rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-pane));
  }

  .music-player[data-player-expanded='true'] {
    padding: 0.35rem 0.5rem 0.45rem;
  }

  .music-player[data-player-expanded='true'] button {
    margin: 0 0.2rem;
    padding: 0.5rem;
  }

  .player-controls .song-name-wrapper {
    flex: 1 1 0;
    width: auto;
    min-width: min(13rem, 28vw);
    max-width: none;
    font-size: 1.35rem;
    margin: 0 0.25rem;
  }
}
/* lg player — after shared 769px rules so 30rem marquee + wide transport win */
@media (min-width: 1193px) {
  .player-transport {
    max-width: var(--aa-player-transport-max-w);
  }

  .player-controls .song-name-wrapper {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: var(--aa-player-marquee-w);
    min-width: var(--aa-player-marquee-w);
    max-width: var(--aa-player-marquee-w);
    font-size: 1.5rem;
    margin: 0 1rem;
  }

  .music-player[data-player-expanded='false'] {
    max-width: var(--aa-player-shell-max-w-collapsed);
  }

  .music-player[data-player-expanded='false'] .player-controls .song-name-wrapper {
    width: var(--aa-player-marquee-w-collapsed);
    min-width: 0;
    max-width: var(--aa-player-marquee-w-collapsed);
    margin: 0;
  }
}
@media (max-width: 768px) {
  /*
   * Landing nav gestures: block browser scroll / rubber-band on the shell + bg layer.
   * Re-enable vertical pan inside open panels only.
   */
  .container,
  .nav.movable-area,
  .link-wrapper {
    touch-action: none;
    overscroll-behavior: none;
  }

  .link-wrapper a {
    touch-action: manipulation;
  }

  body[data-panel]:not([data-panel='']) .content {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  :root {
    --aa-player-margin-b: 0.3rem;
    --aa-player-pad-b: 0.5rem;
    --aa-player-btn-h: 2.35rem;
    --aa-player-float-above: 2.5rem;
    /* Collapsed stacked tab — ~1.9rem lower than expanded float */
    --aa-player-float-above-collapsed: 0.6rem;
    --aa-player-marquee-lift: 1.25rem;
    --aa-player-marquee-h: 1.75rem;
    --aa-player-seeker-row: 1.25rem;
    --aa-player-marquee-w: min(12rem, 58vw);
    --aa-player-marquee-w-collapsed: var(--aa-player-marquee-w);
    --aa-player-shell-max-w-collapsed: var(--aa-player-marquee-w);
    --aa-player-clock-font: 0.75rem;
    --aa-player-clock-pad-block: 0;
    --aa-player-clock-pad-inline: 0.15rem;
    --aa-player-clock-w: 2.35rem;
    --aa-panel-player-gap: 0.75rem;
    --aa-panel-top-inset: 0.35rem;
    --aa-panel-top-reserve: var(--aa-panel-top-inset);
    --aa-panel-heading-pad-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    --aa-panel-player-band-expanded: calc(
      var(--aa-player-margin-b)
      + var(--aa-player-pad-b)
      + var(--aa-player-seeker-row)
      + var(--aa-player-btn-h)
      + var(--aa-player-float-above)
      + var(--aa-player-marquee-lift)
      + var(--aa-player-marquee-h)
      + var(--aa-panel-player-gap)
    );
    --aa-panel-player-band-collapsed: calc(
      var(--aa-player-margin-b)
      + var(--aa-player-pad-b)
      + var(--aa-player-btn-h)
      + var(--aa-player-float-above-collapsed)
      + var(--aa-player-marquee-lift)
      + var(--aa-player-marquee-h)
      + var(--aa-panel-player-gap)
    );
    --aa-panel-player-band: var(--aa-panel-player-band-expanded);
    --aa-panel-bottom-clearance: calc(
      var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
    );
    --aa-panel-bottom-reserve: var(--aa-panel-bottom-clearance);
    --aa-panel-scroll-fade: calc(
      var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
    );
    --aa-panel-scroll-extra: 3.25rem;
    --aa-panel-media-scroll-tail: 4.5rem;
    --aa-panel-width: min(60rem, 96vw);
    --aa-panel-max-width: 64rem;
    --aa-links-panel-inset: clamp(0.75rem, 3vw, 1.35rem);
    --aa-brand-link-size: 5.25rem;
    --aa-brand-link-size-max: 6rem;
    --aa-brand-link-gap: 0.65rem;
    --aa-panel-prose-max: 36rem;
    /* sm: wider orbit box only — side moons clip at viewport edges; ring tightness unchanged */
    --aa-orbit-duration: 40s;
    --aa-orbit-box-vw-cap: 126vw;
    /*
     * Nav vertical center = midpoint of viewport above the player band
     * (not raw 50dvh — that reads low once the player reserves the bottom).
     */
    --aa-nav-cluster-center-shift: calc(-0.1 * var(--aa-panel-player-band));
  }

  html[data-player-expanded='false'] {
    --aa-panel-player-band: var(--aa-panel-player-band-collapsed);
    --aa-panel-bottom-clearance: calc(
      var(--aa-panel-player-band) * var(--aa-panel-bottom-clearance-ratio)
    );
    --aa-panel-bottom-reserve: var(--aa-panel-bottom-clearance);
    --aa-panel-scroll-fade: calc(
      var(--aa-panel-player-band) * var(--aa-panel-scroll-fade-ratio)
    );
    --aa-nav-cluster-center-shift: calc(-0.1 * var(--aa-panel-player-band));
  }

  .nav,
  body[data-layout='wide'] .site-nav-inner {
    min-height: 100dvh;
  }

  body[data-layout='wide'] .site-nav-inner {
    transform: translateY(var(--aa-nav-cluster-center-shift));
  }

  .music-player {
    background: var(--aa-player-bg);
    box-shadow:
      var(--aa-content-glow),
      inset 0 0 1rem rgba(var(--aa-white-rgb), var(--aa-alpha-inset-pane-strong));
    overflow: visible;
  }

  :root {
    --aa-player-shell-max-w-expanded: calc(100vw - 1rem);
    --aa-player-shell-inset-x: 0.5rem;
  }

  .music-player[data-player-expanded='false'] {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--aa-player-marquee-w);
    min-width: var(--aa-player-marquee-w);
    max-width: var(--aa-player-shell-max-w-collapsed);
    margin: 0.3rem auto;
    padding: 0 0.5rem 0.5rem;
  }

  .music-player[data-player-expanded='true'] {
    left: var(--aa-player-shell-inset-x);
    right: var(--aa-player-shell-inset-x);
    transform: none;
    width: auto;
    max-width: var(--aa-player-shell-max-w-expanded);
    min-width: 0;
    margin: 0.3rem 0;
    padding: 0 0.5rem 0.5rem;
  }

  .music-player[data-player-expanded='false'] .player-controls {
    width: 100%;
    justify-content: center;
  }

  .player-transport {
    gap: 0.15rem;
    max-width: 100%;
  }

  .player-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  /* Mobile control order: shuffle | back play next | repeat */
  .player-controls .shuffle-button {
    order: 1;
  }

  .player-controls .back-button {
    order: 2;
  }

  .player-controls .play-button {
    order: 3;
  }

  .player-controls .next-button {
    order: 4;
  }

  .player-controls .repeat-button {
    order: 5;
  }

  .player-controls .song-name-wrapper {
    order: 0;
  }

  .next-button {
    margin-right: 0;
  }

  /* Marquee tab — unique chrome; clocks match main player pane */
  .player-controls .song-name-wrapper {
    border-radius: var(--aa-player-chrome-tab-radius);
    border-bottom: none;
    background: var(--aa-player-marquee-bg);
    color: var(--aa-player-chrome-text);
    border-color: var(--aa-glass-border);
    box-shadow:
      0 -0.2rem 0.65rem rgba(var(--aa-smoke-purple-bright-rgb), 0.38),
      0 -0.05rem 1.1rem rgba(var(--aa-smoke-purple-rgb), 0.28),
      inset 0 1px 0 rgba(var(--aa-white-rgb), var(--aa-alpha-inset-subtle));
    position: absolute;
    top: calc(-1 * var(--aa-player-float-above) - var(--aa-player-marquee-lift));
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: var(--aa-player-marquee-w);
    height: var(--aa-player-marquee-h);
    font-size: 0.9rem;
    margin: 0;
    z-index: 3;
  }

  /* Collapsed: marquee sits lower on the stacked tab (tighter float above play) */
  .music-player[data-player-expanded='false'] .player-controls .song-name-wrapper {
    top: calc(-1 * var(--aa-player-float-above-collapsed) - var(--aa-player-marquee-lift));
    width: var(--aa-player-marquee-w-collapsed);
  }

  .song-name {
    color: var(--aa-player-marquee-color, var(--aa-player-chrome-muted));
  }

  .seeker {
    accent-color: var(--aa-player-seeker-fill, var(--aa-player-seeker-accent));
  }

  .seeker::-webkit-slider-runnable-track,
  .seeker::-moz-range-track,
  .seeker::-moz-range-progress {
    border-color: var(--aa-glass-border);
  }

  .music-player button {
    width: var(--aa-player-btn-h);
    height: var(--aa-player-btn-h);
    padding: 0.25rem;
    margin: 0 0.5rem;
    font-size: 1rem;
  }

  .music-player img {
    height: 1.05rem;
  }

  .seeker-wrapper {
    width: 96%;
    margin-bottom: 0.35rem;
  }

  /* Content panels — phone (inherits top/bottom inset from md tier) */
  .content {
    font-size: 1.1rem;
    border-radius: 0.65rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .content-about h1 {
    font-size: 2rem;
    margin: 0.25rem 0 0.75rem;
  }

  .content-about h2 {
    font-size: 1.4rem;
  }

  .content-about h3 {
    font-size: 1.2rem;
  }

  .content-about > * {
    margin: 0.65rem auto;
    width: min(100%, var(--aa-panel-prose-max));
  }

  .content-about p {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .music-intro {
    font-size: 1.05rem;
    margin: 0.35rem auto 0.85rem;
    padding: 0 0.25rem;
  }

  .section-label {
    font-size: 1.45rem;
    margin: 1rem 0 0.5rem;
  }

  .album-tagline {
    font-size: 1rem;
  }

  .cover-art-wrapper {
    margin: 0.75rem auto;
  }

  .cover-art-wrapper img,
  .album-info .cover-art-wrapper img {
    width: min(11rem, 68vw);
  }

  .music-singles .song-info {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .music-singles .cover-art-wrapper {
    margin: 0;
    flex: 0 0 auto;
  }

  .music-singles .cover-art-wrapper img {
    width: 4.5rem;
  }

  .song-info {
    margin: 0.5rem 0;
  }

  .song-info-wrapper p {
    font-size: 1rem;
    line-height: 1.45;
  }

  .song-info-title {
    font-size: 1.15rem;
  }

  .content-links > .content-section-heading {
    margin-top: .1rem;
  }

  .content-links > :first-child {
    margin-top: 1rem;
  }

  .content-links > :last-child {
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --aa-logo-wordmark-portrait-top: calc(env(safe-area-inset-top, 0px) + 12.5dvh);
  }

  .logo-wordmark-stack {
    position: fixed;
    left: 50%;
    top: var(--aa-logo-wordmark-portrait-top);
    transform: translate(-50%, -50%);
    z-index: 12;
    width: max-content;
    max-width: 96vw;
    pointer-events: none;
  }
}
@media (max-width: 1192px), (prefers-reduced-motion: reduce) {
  html:not([data-motion='full']) .container::before {
    transition: filter 0.25s ease, transform 0.25s ease;
  }

  html:not([data-motion='full']) .logo-background,
  html:not([data-motion='full']) .link-wrapper a .nav-moon-body::before,
  html:not([data-motion='full']) .content,
  html:not([data-motion='full']) .music-player,
  html:not([data-motion='full']) .panel-close-button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html:not([data-motion='full']) .content,
  html:not([data-motion='full']) .music-player {
    box-shadow: var(--aa-content-glow);
    border: 1px solid var(--aa-content-border);
  }

  html:not([data-motion='full']) .logo-background::before {
    background: var(--aa-brand-orb-bg);
    transition:
      transform var(--aa-nav-shift-duration, 0.45s) ease,
      box-shadow var(--aa-nav-shift-duration, 0.45s) ease;
  }

  html:not([data-motion='full']) .link-wrapper a .nav-moon-body::before {
    background: var(--aa-content-bg-solid);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  html:not([data-motion='full']) .content,
  html:not([data-motion='full']) .content.content-about,
  html:not([data-motion='full']) .content.content-music,
  html:not([data-motion='full']) .content.content-media,
  html:not([data-motion='full']) .content.content-links {
    background: var(--aa-content-bg-solid);
  }

  html:not([data-motion='full']) .logo-gold {
    animation: none;
    filter:
      drop-shadow(0 0 0.5rem rgba(var(--aa-logo-glow-rgb), 0.75))
      drop-shadow(0 0 0.9rem rgba(var(--aa-logo-glow-rgb-far), 0.45));
  }

  html:not([data-motion='full'])[data-theme='dark'] .logo-gold {
    filter:
      var(--aa-logo-dark-tint)
      drop-shadow(0 0 0.5rem rgba(var(--aa-logo-glow-rgb), 0.75))
      drop-shadow(0 0 0.9rem rgba(var(--aa-logo-glow-rgb-far), 0.45));
  }

  html:not([data-motion='full']) .nav-moon-icon {
    animation: none;
    filter: var(--aa-nav-moon-icon-tint) var(--aa-nav-moon-icon-glow);
  }

  html:not([data-motion='full']) .movable-area {
    transition: transform var(--aa-nav-shift-duration, 0.45s) ease;
    contain: layout style;
  }

  html:not([data-motion='full']) .movable-area[class*='move-'] {
    will-change: transform;
  }

  html:not([data-motion='full']) .fade-in-p5,
  html:not([data-motion='full']) .fade-in-1,
  html:not([data-motion='full']) .fade-out-p5,
  html:not([data-motion='full']) .fade-out-1 {
    animation-duration: var(--aa-fade-duration, 0.35s);
  }

}