/* =============================================================================
 * prowess.hiphop — theme
 * Prowess The Testament · "Prowess is not given. It is earned."
 *
 * Task P1-10 · spec: 1vsM-Vault/PRDs/prowess.hiphop/spec.md § "Visual system"
 * Contrast audit (measured, do not re-guess):
 *   1vsM-Vault/Evergreen/a-suspected-contrast-failure-is-not-a-measured-one.md
 *
 * -----------------------------------------------------------------------------
 * NAMESPACE CONTRACT — read before adding a token.
 *
 * Every custom property in this file lives in `--pr-*`. Tailwind v4 owns
 * `--color-*`, `--radius-*`, `--shadow-*`, `--text-*`, `--font-*`, `--leading-*`
 * and `--tracking-*`; an unlayered `:root` redefinition of any of those silently
 * overrides every Tailwind utility class on the site with no error. Nothing in
 * this file may be defined in those namespaces — not even "just one".
 *
 * Every `var()` in this file carries a literal fallback. An undefined `var()` is
 * dropped silently: no error, no warning, the element simply renders unstyled.
 *
 * -----------------------------------------------------------------------------
 * PALETTE HONESTY — why some colors ship twice.
 *
 * Nine of the 22 pairings this design actually renders fail WCAG AA. The ten
 * brand hexes from §5 are Prowess's identity and are NOT altered here. Instead
 * each failing color ships twice:
 *
 *   --pr-<name>       the exact brand hex — large display type, decorative fills
 *   --pr-<name>-aa    lightness raised, hue + saturation held — normal-size text,
 *                     borders, focus rings, anything at or below 24px / 18.66px bold
 *   --pr-<name>-aa-ink   the same, retuned for the elevated (Ink) surface
 *
 * Changing the brand hexes outright is Prowess's call, not ours. This keeps the
 * palette honest and the site conformant at the same time.
 *
 * Large-text escape hatch: Dragon Rose and Ember both clear AA large text (3:1)
 * at their brand hex today. Used at >= --pr-size-large-min they need no variant.
 * ============================================================================= */

@layer theme, base, components, utilities;

/* -----------------------------------------------------------------------------
 * 1. TOKENS
 * Deliberately unlayered: `--pr-*` collides with nothing, and unlayered custom
 * properties resolve regardless of where Tailwind's output lands in the cascade.
 * -------------------------------------------------------------------------- */

:root {
  /* --- 1.1 The ten brand hexes (§5, exact — do not alter) ----------------- */
  --pr-void:           #0D0912;  /* base ground                              */
  --pr-ink:            #292425;  /* elevated surface                         */
  --pr-storm:          #37206B;  /* atmosphere                               */
  --pr-arcane:         #4C3388;  /* available state, edges                   */
  --pr-bloodstone:     #62292F;  /* borders (decorative use only at this hex) */
  --pr-dragon-rose:    #B84F6A;  /* selected                                 */
  --pr-ember:          #914E49;  /* warning                                  */
  --pr-spectral-flame: #60CFC7;  /* unlocked — USE SPARINGLY, it has meaning */
  --pr-ash:            #A2AFC3;  /* body text                                */
  --pr-lightning:      #F2F4F8;  /* headings, high-emphasis text             */

  /* --- 1.2 AA-corrected variants (measured; hue + saturation held) --------
   * Ember on Void        3.18:1 -> 4.53:1
   * Ember on Ink         2.47:1 -> 4.50:1
   * Dragon Rose on Void  4.10:1 -> 4.52:1
   * Dragon Rose on Ink   3.18:1 -> 4.52:1
   * Lightning on Rose    4.37:1 -> 4.52:1   (text sitting ON a Rose fill)
   * Bloodstone / Void    1.76:1 -> 3.01:1   (border floor is 3:1, not 4.5:1)
   * Bloodstone / Ink     1.37:1 -> 3.02:1   (the worst pairing in the system)
   * Arcane edge / Void   2.01:1 -> 3.00:1
   * ---------------------------------------------------------------------- */
  --pr-ember-aa:            #AE655F;
  --pr-ember-aa-ink:        #BA7B76;
  --pr-dragon-rose-aa:      #BC5972;
  --pr-dragon-rose-aa-ink:  #C67388;
  --pr-lightning-aa:        #F6F8FA;
  --pr-bloodstone-aa:       #9A404A;
  --pr-bloodstone-aa-ink:   #B44D58;
  --pr-arcane-aa:           #6847BA;

  /* These PASS at their brand hex and must NOT be "fixed":
   * Ash/Void 8.88 · Ash/Ink 6.89 · Ash/Storm 5.98 · Lightning/Arcane 8.93
   * Lightning/Ember 5.63 · Spectral/Void 10.56 · Spectral/Ink 8.19
   * Spectral/Storm 7.11 · Lightning/Void 17.91
   * And "Locked = Ash + low-opacity violet" measures 6.75–8.38:1 once the violet
   * is composited over Void. It PASSES. Do not lighten Ash. */

  /* --- 1.3 Surfaces --------------------------------------------------------
   * Dark-mode depth comes from surface tokens, NOT from shadows. Surfaces are
   * not required to contrast with each other — that is what elevation is for.
   * A surface pair needs a ratio only when a border is the sole boundary signal;
   * then grade the border, not the surfaces. */
  --pr-surface-base:     var(--pr-void, #0D0912);
  --pr-surface-elevated: var(--pr-ink, #292425);
  --pr-surface-raised:   #353032; /* derived: Ink + 6% Lightning. Ash reads 5.84:1
                                   * here by the same formula the audit used —
                                   * still clear of AA. Hover/active depth only. */
  --pr-surface-arcane:   var(--pr-storm, #37206B); /* Ash on Storm = 5.98:1 */
  --pr-surface-sunken:   #070510; /* Void darkened; wells, track rows, inputs.
                                   * Darker than Void => every light text role
                                   * gains contrast, never loses it. */

  /* --- 1.4 Text roles ------------------------------------------------------ */
  --pr-text-strong:   var(--pr-lightning, #F2F4F8);
  --pr-text:          var(--pr-ash, #A2AFC3);
  --pr-text-on-rose:  var(--pr-lightning-aa, #F6F8FA);
  --pr-text-unlocked: var(--pr-spectral-flame, #60CFC7);
  --pr-text-warning:      var(--pr-ember-aa, #AE655F);
  --pr-text-warning-ink:  var(--pr-ember-aa-ink, #BA7B76);
  --pr-text-selected:     var(--pr-dragon-rose-aa, #BC5972);
  --pr-text-selected-ink: var(--pr-dragon-rose-aa-ink, #C67388);
  /* Locked text stays Ash — it passes over the composited violet. */
  --pr-text-locked:   var(--pr-ash, #A2AFC3);

  /* --- 1.5 Borders and edges (3:1 floor when load-bearing) ---------------- */
  --pr-border:              var(--pr-bloodstone-aa, #9A404A);
  --pr-border-on-elevated:  var(--pr-bloodstone-aa-ink, #B44D58);
  --pr-border-arcane:       var(--pr-arcane-aa, #6847BA);
  --pr-border-unlocked:     var(--pr-spectral-flame, #60CFC7);
  --pr-border-selected:     var(--pr-dragon-rose-aa, #BC5972);
  --pr-border-warning:      var(--pr-ember-aa, #AE655F);
  /* Hairline is DECORATIVE. Never the sole signal that a boundary exists —
   * if a boundary must be perceivable, use --pr-border-* above. */
  --pr-border-hairline:     rgba(162, 175, 195, 0.16);
  --pr-border-width:        1px;
  --pr-border-width-thick:  2px;

  /* --- 1.6 Focus -----------------------------------------------------------
   * Lightning, not Spectral Flame: Spectral means "unlocked" and a focus ring
   * must not claim that. Lightning on Void is 17.91:1. */
  --pr-focus-ring:   var(--pr-lightning, #F2F4F8);
  --pr-focus-width:  2px;
  --pr-focus-offset: 2px;

  /* --- 1.7 Type — two families, no more (§5) ------------------------------
   * Display: sharp editorial didone. Sans: geometric, for nav, trivia,
   * captions and scorekeeping. Web font <link>/@font-face belongs in the
   * document head (markup task), not here. */
  --pr-font-display: "Bodoni Moda", "Playfair Display", "Didot", "Times New Roman", Georgia, serif;
  --pr-font-sans: "Space Grotesk", "Inter", "Poppins", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mobile-first fluid scale, floors sized for a 320px viewport. */
  --pr-size-2xs:     0.75rem;    /* 12px — legal, copyright              */
  --pr-size-xs:      0.8125rem;  /* 13px — meta, credits                 */
  --pr-size-sm:      0.875rem;   /* 14px — captions, scorekeeping        */
  --pr-size-base:    1rem;       /* 16px — body, and the input FLOOR     */
  --pr-size-md:      1.0625rem;
  --pr-size-lg:      clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --pr-size-xl:      clamp(1.375rem, 1.18rem + 0.95vw, 1.875rem);
  --pr-size-2xl:     clamp(1.75rem, 1.38rem + 1.85vw, 2.75rem);
  --pr-size-3xl:     clamp(2.125rem, 1.55rem + 2.9vw, 3.75rem);
  --pr-size-display: clamp(2.625rem, 1.6rem + 5.1vw, 6rem);
  /* Anything below this must use an -aa variant. At or above it, the brand hex
   * is conformant on its own (AA large text = 3:1). 24px, or 18.66px if bold. */
  --pr-size-large-min: 1.5rem;

  --pr-lead-display: 1.02;
  --pr-lead-tight:   1.18;
  --pr-lead-snug:    1.35;
  --pr-lead-body:    1.6;
  --pr-track-display: -0.02em;
  --pr-track-tight:   -0.01em;
  --pr-track-caps:     0.16em;
  --pr-weight-regular: 400;
  --pr-weight-medium:  500;
  --pr-weight-bold:    700;

  /* --- 1.8 Space, radius, layout ----------------------------------------- */
  --pr-space-1:  0.25rem;
  --pr-space-2:  0.5rem;
  --pr-space-3:  0.75rem;
  --pr-space-4:  1rem;
  --pr-space-5:  1.5rem;
  --pr-space-6:  2rem;
  --pr-space-7:  3rem;
  --pr-space-8:  4rem;
  --pr-space-9:  6rem;

  --pr-radius-xs:   2px;
  --pr-radius-sm:   4px;
  --pr-radius-md:   8px;
  --pr-radius-lg:   14px;
  --pr-radius-pill: 999px;

  --pr-shell-max: 78rem;
  --pr-measure:   62ch;
  --pr-gutter:    clamp(1rem, 0.62rem + 1.9vw, 2.5rem);
  --pr-tap:       44px;   /* minimum interactive target */
  --pr-hero-art:  57%;    /* desktop split: art occupies 55–60% */

  /* --- 1.9 Shadows — subtle only. NOT the depth mechanism. ---------------- */
  --pr-shadow-soft: 0 18px 40px -22px rgba(13, 9, 18, 0.55);
  --pr-shadow-lift: 0 28px 64px -30px rgba(13, 9, 18, 0.6);
  --pr-glow-spectral: 0 0 34px -10px rgba(96, 207, 199, 0.26);
  --pr-glow-rose:     0 0 34px -10px rgba(184, 79, 106, 0.26);

  /* --- 1.10 Motion --------------------------------------------------------- */
  --pr-dur-fast:      140ms;
  --pr-dur:           240ms;
  --pr-dur-slow:      480ms;
  --pr-dur-cinematic: 3000ms;  /* entry gate transition: 2–4s, always skippable */
  --pr-ease:      cubic-bezier(0.2, 0.7, 0.3, 1);
  --pr-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --pr-drift-slow: 42s;
  --pr-drift-ember: 19s;
  --pr-shimmer: 7s;
  --pr-pulse: 1.8s;

  /* --- 1.11 Texture — three base materials, 3%–10%, never more ------------
   * The site has THREE recurring materials, not a skin per section. Each is
   * painted by a `z-index: -1` pseudo-element inside an isolated stacking
   * context, so it composites into the BACKGROUND and can never sit over text.
   *
   * Grain and Mesh use `multiply`: they can only DARKEN the ground. Every text
   * role here is lighter than every surface, so a darker ground strictly
   * increases contrast. The rule "texture may never reduce contrast" is
   * therefore structural, not a promise.
   *
   * Veil is additive violet and is restricted to the Void ground, where the
   * audit measured the composite directly: Arcane over Void is 8.38:1 for Ash
   * at 15% and still 6.75:1 at 50%. Capped here at 10%.
   */
  --pr-texture-min:      0.03;
  --pr-texture-strength: 0.06;
  --pr-texture-max:      0.10;
  --pr-texture-scale:    150px;

  --pr-texture-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");

  --pr-texture-mesh:
    repeating-linear-gradient(
      118deg,
      rgba(7, 5, 16, 0)   0px,
      rgba(7, 5, 16, 0)   7px,
      rgba(7, 5, 16, 0.9) 7px,
      rgba(7, 5, 16, 0.9) 8px
    );

  --pr-texture-veil:
    radial-gradient(120% 80% at 12% -10%,  rgba(76, 51, 136, 0.9) 0%, rgba(76, 51, 136, 0) 62%),
    radial-gradient(100% 70% at 92% 6%,    rgba(55, 32, 107, 0.8) 0%, rgba(55, 32, 107, 0) 58%),
    radial-gradient(140% 90% at 50% 118%,  rgba(55, 32, 107, 0.7) 0%, rgba(55, 32, 107, 0) 64%);

  /* Overlays are ALWAYS gradients — never a flat scrim. */
  /* Mobile hero: transparent across the top 46% — that band holds the face and
   * torso of the 1501x2048 portrait and must stay unobstructed — then ramping
   * to near-opaque under the copy well. */
  --pr-overlay-hero:
    linear-gradient(180deg, rgba(13, 9, 18, 0) 0%, rgba(13, 9, 18, 0) 46%,
                            rgba(13, 9, 18, 0.28) 58%, rgba(13, 9, 18, 0.72) 74%,
                            rgba(13, 9, 18, 0.94) 100%);
  --pr-overlay-hero-desktop:
    linear-gradient(90deg, rgba(13, 9, 18, 0.97) 0%, rgba(13, 9, 18, 0.86) 34%,
                           rgba(13, 9, 18, 0.34) 62%, rgba(13, 9, 18, 0) 86%);
  --pr-overlay-backdrop:
    linear-gradient(160deg, rgba(13, 9, 18, 0.92) 0%, rgba(23, 14, 42, 0.88) 48%,
                            rgba(13, 9, 18, 0.94) 100%);
  --pr-overlay-card:
    linear-gradient(180deg, rgba(13, 9, 18, 0) 38%, rgba(13, 9, 18, 0.86) 100%);

  /* State fills. Locked violet stays within the measured 15%–50% band. */
  --pr-fill-locked:    rgba(76, 51, 136, 0.22);
  --pr-fill-available: rgba(76, 51, 136, 0.34);
  --pr-fill-selected:  var(--pr-dragon-rose, #B84F6A);
  --pr-fill-unlocked:  rgba(96, 207, 199, 0.14);
  --pr-fill-warning:   rgba(145, 78, 73, 0.22);
  --pr-fill-disabled:  rgba(162, 175, 195, 0.08);
}

/* -----------------------------------------------------------------------------
 * 2. BASE
 * -------------------------------------------------------------------------- */

@layer base {

  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--pr-space-8, 4rem);
  }

  *, *::before, *::after { box-sizing: inherit; }

  body {
    margin: 0;
    min-inline-size: 320px;
    background-color: var(--pr-surface-base, #0D0912);
    color: var(--pr-text, #A2AFC3);
    font-family: var(--pr-font-sans, system-ui, sans-serif);
    font-size: var(--pr-size-base, 1rem);
    line-height: var(--pr-lead-body, 1.6);
    font-weight: var(--pr-weight-regular, 400);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    margin: 0 0 var(--pr-space-4, 1rem);
    font-family: var(--pr-font-display, Georgia, serif);
    color: var(--pr-text-strong, #F2F4F8);
    font-weight: var(--pr-weight-bold, 700);
    line-height: var(--pr-lead-tight, 1.18);
    letter-spacing: var(--pr-track-display, -0.02em);
    text-wrap: balance;
  }

  h1 { font-size: var(--pr-size-3xl, 2.125rem); line-height: var(--pr-lead-display, 1.02); }
  h2 { font-size: var(--pr-size-2xl, 1.75rem); }
  h3 { font-size: var(--pr-size-xl, 1.375rem); }
  h4 {
    font-family: var(--pr-font-sans, system-ui, sans-serif);
    font-size: var(--pr-size-lg, 1.125rem);
    letter-spacing: var(--pr-track-tight, -0.01em);
  }

  p, li { max-inline-size: var(--pr-measure, 62ch); }
  p { margin: 0 0 var(--pr-space-4, 1rem); }

  a {
    color: var(--pr-text-strong, #F2F4F8);
    text-decoration-color: var(--pr-border-arcane, #6847BA);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--pr-dur-fast, 140ms) var(--pr-ease, ease),
                text-decoration-color var(--pr-dur-fast, 140ms) var(--pr-ease, ease);
  }
  a:hover { color: var(--pr-text-unlocked, #60CFC7); text-decoration-color: currentColor; }
  a:active { color: var(--pr-text-selected, #BC5972); }

  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; height: auto; }

  hr {
    border: 0;
    block-size: 1px;
    background-image: linear-gradient(
      90deg,
      rgba(162, 175, 195, 0) 0%,
      var(--pr-border-hairline, rgba(162, 175, 195, 0.16)) 50%,
      rgba(162, 175, 195, 0) 100%
    );
    margin-block: var(--pr-space-7, 3rem);
  }

  /* One focus treatment for the whole site. Halo first so the ring reads on
   * Void, Ink, Storm and on a Dragon Rose fill alike. */
  :focus-visible {
    outline: var(--pr-focus-width, 2px) solid var(--pr-focus-ring, #F2F4F8);
    outline-offset: var(--pr-focus-offset, 2px);
    border-radius: var(--pr-radius-sm, 4px);
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection {
    background-color: var(--pr-fill-available, rgba(76, 51, 136, 0.34));
    color: var(--pr-text-strong, #F2F4F8);
  }

  input, textarea, select, button { font: inherit; color: inherit; }
  /* 16px floor in inputs — anything smaller triggers iOS zoom-on-focus. */
  input, textarea, select { font-size: max(var(--pr-size-base, 1rem), 16px); }
}

/* -----------------------------------------------------------------------------
 * 3. LAYOUT SHELL + THE NINE SECTIONS
 * IDs are fixed by the markup task — do not rename:
 * #threshold #signal #quest #music #bio #shop #pros #constellation
 * -------------------------------------------------------------------------- */

@layer components {

  .pr-shell {
    inline-size: 100%;
    max-inline-size: var(--pr-shell-max, 78rem);
    margin-inline: auto;
    padding-inline: var(--pr-gutter, 1rem);
  }

  .pr-section {
    position: relative;
    isolation: isolate;
    padding-block: var(--pr-space-8, 4rem);
    scroll-margin-block-start: var(--pr-space-7, 3rem);
  }

  .pr-section__eyebrow {
    display: block;
    margin-block-end: var(--pr-space-2, 0.5rem);
    font-size: var(--pr-size-sm, 0.875rem);
    font-weight: var(--pr-weight-medium, 500);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    color: var(--pr-text, #A2AFC3);
  }

  /* --- 3.1 The three base materials -------------------------------------- */

  .pr-mat-grain,
  .pr-mat-mesh,
  .pr-mat-veil { position: relative; isolation: isolate; }

  .pr-mat-grain::before,
  .pr-mat-mesh::before,
  .pr-mat-veil::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;                 /* behind content, above the element's own bg */
    pointer-events: none;
    opacity: clamp(
      var(--pr-texture-min, 0.03),
      var(--pr-texture-strength, 0.06),
      var(--pr-texture-max, 0.10)
    );
  }

  /* Material 1 — Void grain. Universal. Darkens only. */
  .pr-mat-grain::before {
    background-image: var(--pr-texture-grain, none);
    background-repeat: repeat;
    background-size: var(--pr-texture-scale, 150px) var(--pr-texture-scale, 150px);
    mix-blend-mode: multiply;
  }

  /* Material 2 — dragon-scale mesh. Cards and elevated surfaces. Darkens only. */
  .pr-mat-mesh::before {
    background-image: var(--pr-texture-mesh, none);
    mix-blend-mode: multiply;
  }

  /* Material 3 — storm veil. VOID GROUND ONLY: the audit measured Arcane over
   * Void directly (Ash 8.38:1 at 15%). Do not put this on Ink or Storm — that
   * composite is unmeasured. */
  .pr-mat-veil::before {
    background-image: var(--pr-texture-veil, none);
    --pr-texture-strength: 0.10;
  }

  /* Section -> material assignment. Three materials across eight sections,
   * deliberately recurring: no unique skin per section. The markup carries the
   * class; the ground colour is set here so a missing class still renders.
   *   .pr-mat-grain -> #signal  #bio  #constellation
   *   .pr-mat-mesh  -> #music   #shop
   *   .pr-mat-veil  -> #threshold  #quest  #pros   (Void ground only) */
  #threshold, #quest, #pros,
  #signal, #bio, #constellation {
    background-color: var(--pr-surface-base, #0D0912);
  }
  #music, #shop {
    background-color: var(--pr-surface-elevated, #292425);
  }

  /* --- 3.2 Hero / #threshold — Storm Threshold ---------------------------
   * The character NEVER animates. Only environment. */

  #threshold {
    display: grid;
    min-block-size: 100svh;
    padding-block: 0;
    align-content: stretch;
  }

  .pr-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-block-size: 100svh;
    /* Mobile-first: art near-full-bleed, copy stacked over its lower third. */
    grid-template-areas: "stage";
    grid-template-rows: minmax(0, 1fr);
  }

  .pr-hero__figure {
    grid-area: stage;
    position: relative;
    z-index: 0;
    margin: 0;
    block-size: 100%;
    overflow: hidden;
  }

  .pr-hero__art {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Face and torso sit in the upper 45% of a 1501x2048 portrait; anchoring
     * high keeps them clear of the copy well below. */
    object-position: 50% 12%;
  }

  /* Gradient, never a flat scrim. The copy well begins where the gradient is
   * already >= 0.72 alpha, so overlay text never lands on bare artwork — and
   * the top 46% stays clear, protecting the face and torso. */
  .pr-hero__scrim {
    grid-area: stage;
    z-index: 1;
    pointer-events: none;
    background-image: var(--pr-overlay-hero,
      linear-gradient(180deg, rgba(13, 9, 18, 0) 46%, rgba(13, 9, 18, 0.94) 100%));
  }

  .pr-hero__copy {
    grid-area: stage;
    z-index: 2;
    align-self: end;
    inline-size: 100%;
    max-inline-size: var(--pr-shell-max, 78rem);
    margin-inline: auto;
    padding: var(--pr-space-6, 2rem) var(--pr-gutter, 1rem) var(--pr-space-8, 4rem);
  }

  .pr-hero__wordmark {
    margin: 0 0 var(--pr-space-3, 0.75rem);
    font-family: var(--pr-font-display, Georgia, serif);
    font-size: var(--pr-size-display, 2.625rem);
    line-height: var(--pr-lead-display, 1.02);
    letter-spacing: var(--pr-track-display, -0.02em);
    color: var(--pr-text-strong, #F2F4F8);
    text-wrap: balance;
  }

  .pr-hero__creed {
    max-inline-size: 34ch;
    margin-block-end: var(--pr-space-6, 2rem);
    font-size: var(--pr-size-lg, 1.125rem);
    color: var(--pr-text, #A2AFC3);
  }

  /* Entry gate: two choices of EQUAL visual weight. Identical box, identical
   * type, identical target — only the label differs. */
  .pr-gate {
    display: grid;
    gap: var(--pr-space-3, 0.75rem);
    grid-template-columns: 1fr;
    max-inline-size: 34rem;
  }
  .pr-gate__skip {
    margin-block-start: var(--pr-space-3, 0.75rem);
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text, #A2AFC3);
  }

  @media (min-width: 60rem) {
    /* Desktop: split cinematic. Art right, 55–60%. Copy on a dark gradient left. */
    .pr-hero {
      grid-template-areas: "copy stage";
      grid-template-columns: minmax(0, 1fr) var(--pr-hero-art, 57%);
      grid-template-rows: 1fr;
      align-items: stretch;
    }
    .pr-hero__figure { grid-area: stage; }
    .pr-hero__art { object-position: 50% 8%; }
    .pr-hero__scrim {
      grid-area: stage;
      transform: none;
      /* Fade from the copy edge into the art, left to right. */
      background-image: var(--pr-overlay-hero-desktop,
        linear-gradient(90deg, rgba(13, 9, 18, 0.97) 0%, rgba(13, 9, 18, 0) 86%));
      margin-inline-start: -12%;
      inline-size: 112%;
    }
    .pr-hero__copy {
      grid-area: copy;
      align-self: center;
      padding-inline: clamp(2rem, 5vw, 5rem);
      padding-block: var(--pr-space-8, 4rem);
    }
    .pr-gate { grid-template-columns: 1fr 1fr; }
  }

  /* --- 3.3 Signal / Sound Vault / Bio / Shop / Pros / Constellation ------- */

  .pr-card {
    position: relative;
    isolation: isolate;
    padding: var(--pr-space-5, 1.5rem);
    border: var(--pr-border-width, 1px) solid var(--pr-border-hairline, rgba(162, 175, 195, 0.16));
    border-radius: var(--pr-radius-lg, 14px);
    background-color: var(--pr-surface-elevated, #292425);
    box-shadow: var(--pr-shadow-soft, 0 18px 40px -22px rgba(13, 9, 18, 0.55));
    transition: background-color var(--pr-dur, 240ms) var(--pr-ease, ease),
                border-color var(--pr-dur, 240ms) var(--pr-ease, ease),
                transform var(--pr-dur, 240ms) var(--pr-ease, ease);
  }
  /* Depth on hover comes from the raised SURFACE, not from a heavier shadow. */
  .pr-card:hover {
    background-color: var(--pr-surface-raised, #353032);
    border-color: var(--pr-border-arcane, #6847BA);
  }

  .pr-grid {
    display: grid;
    gap: var(--pr-space-4, 1rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem)  { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem)  { .pr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pr-space-5, 1.5rem); } }
  @media (min-width: 64rem)  { .pr-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Sound Vault card art gets a gradient foot so the title always has ground. */
  .pr-track__cover {
    position: relative;
    isolation: isolate;
    border-radius: var(--pr-radius-md, 8px);
    overflow: hidden;
  }
  .pr-track__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--pr-overlay-card,
      linear-gradient(180deg, rgba(13, 9, 18, 0) 38%, rgba(13, 9, 18, 0.86) 100%));
  }
  .pr-track__title {
    margin: var(--pr-space-3, 0.75rem) 0 var(--pr-space-1, 0.25rem);
    font-size: var(--pr-size-lg, 1.125rem);
  }
  .pr-track__meta {
    margin: 0;
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text, #A2AFC3);
  }

  /* Origin Scroll — the one place display type runs at full size, so the brand
   * hexes are conformant here without an -aa variant (AA large text, 3:1). */
  #bio .pr-origin__shout {
    font-family: var(--pr-font-display, Georgia, serif);
    font-size: var(--pr-size-3xl, 2.125rem);
    line-height: var(--pr-lead-display, 1.02);
    color: var(--pr-dragon-rose, #B84F6A);
    letter-spacing: var(--pr-track-display, -0.02em);
  }

  /* The Armory is SEALED at launch: no product promises, no prices. */
  #shop .pr-armory__seal {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-2, 0.5rem);
    padding: var(--pr-space-2, 0.5rem) var(--pr-space-4, 1rem);
    border: var(--pr-border-width, 1px) solid var(--pr-border-on-elevated, #B44D58);
    border-radius: var(--pr-radius-pill, 999px);
    font-size: var(--pr-size-sm, 0.875rem);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    color: var(--pr-text, #A2AFC3);
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
  }

  #constellation {
    padding-block-end: var(--pr-space-9, 6rem);
    border-block-start: var(--pr-border-width, 1px) solid
                        var(--pr-border-hairline, rgba(162, 175, 195, 0.16));
  }
  #constellation .pr-legal {
    font-size: var(--pr-size-2xs, 0.75rem);
    color: var(--pr-text, #A2AFC3);
  }

  /* --- 3.4 Navigation — Quest · Music · Bio · Shop ------------------------ */

  .pr-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background-image: linear-gradient(
      180deg,
      rgba(13, 9, 18, 0.96) 0%,
      rgba(13, 9, 18, 0.82) 62%,
      rgba(13, 9, 18, 0) 100%
    );
    backdrop-filter: blur(10px);
  }
  .pr-nav__list {
    display: flex;
    gap: var(--pr-space-1, 0.25rem);
    margin: 0;
    padding: var(--pr-space-2, 0.5rem) var(--pr-gutter, 1rem);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pr-nav__list::-webkit-scrollbar { display: none; }
  .pr-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--pr-tap, 44px);
    padding-inline: var(--pr-space-3, 0.75rem);
    border-radius: var(--pr-radius-sm, 4px);
    font-size: var(--pr-size-sm, 0.875rem);
    font-weight: var(--pr-weight-medium, 500);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pr-text, #A2AFC3);
    white-space: nowrap;
  }
  .pr-nav__link:hover { color: var(--pr-text-strong, #F2F4F8); background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22)); }
  .pr-nav__link[aria-current="true"] {
    color: var(--pr-text-strong, #F2F4F8);
    background-color: var(--pr-fill-available, rgba(76, 51, 136, 0.34));
  }
}

/* -----------------------------------------------------------------------------
 * 4. THE SIX INTERFACE STATES (§5)
 * These are structure, not decoration. Apply to trial cards, track cards,
 * trivia options, rank steps — anything the quest moves through.
 *
 *   Locked    Ash + low-opacity violet
 *   Available Lightning + Arcane
 *   Selected  Dragon Rose
 *   Correct / unlocked  Spectral Flame
 *   Warning   Ember
 *   Complete  Spectral Flame + a restrained Lightning pulse
 * -------------------------------------------------------------------------- */

@layer components {

  .pr-state {
    position: relative;
    isolation: isolate;
    display: block;
    inline-size: 100%;
    min-block-size: var(--pr-tap, 44px);
    padding: var(--pr-space-4, 1rem);
    border: var(--pr-border-width, 1px) solid transparent;
    border-radius: var(--pr-radius-md, 8px);
    text-align: start;
    transition: background-color var(--pr-dur, 240ms) var(--pr-ease, ease),
                border-color var(--pr-dur, 240ms) var(--pr-ease, ease),
                color var(--pr-dur, 240ms) var(--pr-ease, ease);
  }

  /* 1. LOCKED — Ash on violet composited over Void. Measured 6.75–8.38:1.
   *    Do not lighten Ash to "fix" this; it already passes. */
  .pr-state.is-locked {
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
    border-color: var(--pr-border-arcane, #6847BA);
    color: var(--pr-text-locked, #A2AFC3);
    cursor: not-allowed;
  }
  .pr-state.is-locked .pr-state__hint { color: var(--pr-text-locked, #A2AFC3); }

  /* 2. AVAILABLE — Lightning on Arcane. Measured 8.93:1. */
  .pr-state.is-available {
    background-color: var(--pr-fill-available, rgba(76, 51, 136, 0.34));
    border-color: var(--pr-border-arcane, #6847BA);
    color: var(--pr-text-strong, #F2F4F8);
    cursor: pointer;
  }
  .pr-state.is-available:hover {
    background-color: var(--pr-arcane, #4C3388);
    border-color: var(--pr-lightning, #F2F4F8);
  }

  /* 3. SELECTED — Dragon Rose. Filled: text uses the AA'd Lightning (4.52:1).
   *    Outlined: the label uses the AA'd Rose, never the brand hex at body size. */
  .pr-state.is-selected {
    background-color: var(--pr-fill-selected, #B84F6A);
    border-color: var(--pr-dragon-rose, #B84F6A);
    color: var(--pr-text-on-rose, #F6F8FA);
  }
  .pr-state.is-selected--outline {
    background-color: transparent;
    border-color: var(--pr-border-selected, #BC5972);
    color: var(--pr-text-selected, #BC5972);
  }
  /* On the elevated Ink ground the Rose text needs the -ink variant. */
  #music .pr-state.is-selected--outline,
  #shop .pr-state.is-selected--outline,
  .pr-card .pr-state.is-selected--outline { color: var(--pr-text-selected-ink, #C67388); }

  /* 4. CORRECT / UNLOCKED — Spectral Flame. Measured 10.56:1 on Void.
   *    Used SPARINGLY. It means "unlocked" and nothing else. */
  .pr-state.is-unlocked,
  .pr-state.is-correct {
    background-color: var(--pr-fill-unlocked, rgba(96, 207, 199, 0.14));
    border-color: var(--pr-border-unlocked, #60CFC7);
    color: var(--pr-text-unlocked, #60CFC7);
  }

  /* 5. WARNING — Ember, AA'd for body-size text. Never the bare hex below 24px. */
  .pr-state.is-warning {
    background-color: var(--pr-fill-warning, rgba(145, 78, 73, 0.22));
    border-color: var(--pr-border-warning, #AE655F);
    color: var(--pr-text-warning, #AE655F);
  }
  #music .pr-state.is-warning,
  #shop .pr-state.is-warning,
  .pr-card .pr-state.is-warning { color: var(--pr-text-warning-ink, #BA7B76); }

  /* 6. QUEST COMPLETE — Spectral Flame plus a restrained Lightning pulse.
   *    Finite count: it announces, then stops. */
  .pr-state.is-complete {
    background-color: var(--pr-fill-unlocked, rgba(96, 207, 199, 0.14));
    border-color: var(--pr-border-unlocked, #60CFC7);
    color: var(--pr-text-unlocked, #60CFC7);
    box-shadow: var(--pr-glow-spectral, 0 0 34px -10px rgba(96, 207, 199, 0.26));
  }
  .pr-state.is-complete::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    border: var(--pr-border-width-thick, 2px) solid var(--pr-lightning, #F2F4F8);
    opacity: 0;
    animation: pr-lightning-pulse var(--pr-pulse, 1.8s) var(--pr-ease-out, ease-out) 3;
  }

  /* Quest scoreboard / rank ladder */
  .pr-score {
    font-family: var(--pr-font-sans, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    font-size: var(--pr-size-sm, 0.875rem);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    color: var(--pr-text, #A2AFC3);
  }
  .pr-score__value {
    font-family: var(--pr-font-display, Georgia, serif);
    font-size: var(--pr-size-2xl, 1.75rem);
    letter-spacing: var(--pr-track-display, -0.02em);
    color: var(--pr-text-strong, #F2F4F8);
  }
  .pr-rank-meter {
    block-size: 6px;
    border-radius: var(--pr-radius-pill, 999px);
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
    overflow: hidden;
  }
  .pr-rank-meter__fill {
    block-size: 100%;
    border-radius: inherit;
    background-image: linear-gradient(
      90deg,
      var(--pr-arcane, #4C3388) 0%,
      var(--pr-dragon-rose, #B84F6A) 62%,
      var(--pr-spectral-flame, #60CFC7) 100%
    );
    transition: inline-size var(--pr-dur-slow, 480ms) var(--pr-ease-out, ease-out);
  }
}

/* -----------------------------------------------------------------------------
 * 5. CONTROLS — every button carries default / hover / active / disabled,
 * plus focus-visible. Minimum target 44px.
 * -------------------------------------------------------------------------- */

@layer components {

  .pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pr-space-2, 0.5rem);
    min-block-size: var(--pr-tap, 44px);
    min-inline-size: var(--pr-tap, 44px);
    padding: var(--pr-space-3, 0.75rem) var(--pr-space-5, 1.5rem);
    border: var(--pr-border-width, 1px) solid transparent;
    border-radius: var(--pr-radius-sm, 4px);
    font-family: var(--pr-font-sans, system-ui, sans-serif);
    font-size: var(--pr-size-sm, 0.875rem);
    font-weight: var(--pr-weight-medium, 500);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    color: var(--pr-text-strong, #F2F4F8);
    transition: background-color var(--pr-dur-fast, 140ms) var(--pr-ease, ease),
                border-color var(--pr-dur-fast, 140ms) var(--pr-ease, ease),
                color var(--pr-dur-fast, 140ms) var(--pr-ease, ease),
                transform var(--pr-dur-fast, 140ms) var(--pr-ease, ease);
  }

  /* Primary — Dragon Rose fill. Label uses the AA'd Lightning: on the brand
   * Rose fill, plain Lightning is 4.37:1 and misses. */
  .pr-btn--primary {
    background-color: var(--pr-dragon-rose, #B84F6A);
    border-color: var(--pr-dragon-rose, #B84F6A);
    color: var(--pr-text-on-rose, #F6F8FA);
  }
  .pr-btn--primary:hover {
    background-color: var(--pr-dragon-rose-aa, #BC5972);
    border-color: var(--pr-lightning, #F2F4F8);
  }
  .pr-btn--primary:active {
    background-color: var(--pr-bloodstone, #62292F);
    border-color: var(--pr-bloodstone-aa, #9A404A);
    transform: translateY(1px);
  }

  /* Secondary — Arcane edge. Border uses the AA'd Arcane (3.00:1 on Void). */
  .pr-btn--secondary {
    background-color: var(--pr-fill-available, rgba(76, 51, 136, 0.34));
    border-color: var(--pr-border-arcane, #6847BA);
    color: var(--pr-text-strong, #F2F4F8);
  }
  .pr-btn--secondary:hover {
    background-color: var(--pr-arcane, #4C3388);
    border-color: var(--pr-lightning, #F2F4F8);
  }
  .pr-btn--secondary:active {
    background-color: var(--pr-storm, #37206B);
    transform: translateY(1px);
  }

  /* Ghost — body-level actions. */
  .pr-btn--ghost {
    border-color: var(--pr-border-hairline, rgba(162, 175, 195, 0.16));
    color: var(--pr-text, #A2AFC3);
  }
  .pr-btn--ghost:hover {
    border-color: var(--pr-border-arcane, #6847BA);
    color: var(--pr-text-strong, #F2F4F8);
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
  }
  .pr-btn--ghost:active {
    background-color: var(--pr-surface-elevated, #292425);
    transform: translateY(1px);
  }

  /* Unlock — Spectral Flame. Sparingly: only for actions that actually unlock. */
  .pr-btn--unlock {
    border-color: var(--pr-spectral-flame, #60CFC7);
    color: var(--pr-text-unlocked, #60CFC7);
    background-color: var(--pr-fill-unlocked, rgba(96, 207, 199, 0.14));
  }
  .pr-btn--unlock:hover {
    background-color: rgba(96, 207, 199, 0.22);
    box-shadow: var(--pr-glow-spectral, 0 0 34px -10px rgba(96, 207, 199, 0.26));
  }
  .pr-btn--unlock:active { transform: translateY(1px); }

  /* The two gate choices carry EQUAL visual weight — same box, same type,
   * same size. The silent path forfeits nothing, including prominence. */
  .pr-btn--gate {
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding-inline: var(--pr-space-4, 1rem);
    font-size: var(--pr-size-base, 1rem);
    border-color: var(--pr-border-arcane, #6847BA);
    background-color: var(--pr-fill-available, rgba(76, 51, 136, 0.34));
    color: var(--pr-text-strong, #F2F4F8);
  }
  .pr-btn--gate:hover {
    background-color: var(--pr-arcane, #4C3388);
    border-color: var(--pr-lightning, #F2F4F8);
  }
  .pr-btn--gate:active { transform: translateY(1px); }

  /* Disabled — one treatment for every variant. Never conveyed by color alone;
   * the markup must also carry `disabled` or `aria-disabled="true"`. */
  .pr-btn:disabled,
  .pr-btn[aria-disabled="true"],
  .pr-btn.is-disabled {
    background-color: var(--pr-fill-disabled, rgba(162, 175, 195, 0.08));
    border-color: var(--pr-border-hairline, rgba(162, 175, 195, 0.16));
    border-style: dashed;
    color: var(--pr-text, #A2AFC3);
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
  }

  /* Trial Locked — the player's own disabled state (§ audio). */
  .pr-btn.is-trial-locked {
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
    border-color: var(--pr-border-arcane, #6847BA);
    border-style: dashed;
    color: var(--pr-text-locked, #A2AFC3);
    cursor: not-allowed;
  }

  /* Icons match the line-height of the text beside them. */
  .pr-icon {
    flex: 0 0 auto;
    inline-size: 1.5em;
    block-size: 1.5em;
    fill: currentColor;
    stroke: currentColor;
  }
  @supports (block-size: 1lh) {
    .pr-icon { inline-size: 1lh; block-size: 1lh; }
  }
  .pr-btn .pr-icon { inline-size: 1.25em; block-size: 1.25em; }
}

/* -----------------------------------------------------------------------------
 * 6. FORMS — Pros & Prose, shop waitlist, trivia entry.
 * Focus AND error-with-message are both required; an error color alone is not
 * an error state.
 * -------------------------------------------------------------------------- */

@layer components {

  .pr-field {
    display: grid;
    gap: var(--pr-space-2, 0.5rem);
    margin-block-end: var(--pr-space-4, 1rem);
    max-inline-size: 34rem;
  }

  .pr-field__label {
    font-size: var(--pr-size-sm, 0.875rem);
    font-weight: var(--pr-weight-medium, 500);
    letter-spacing: var(--pr-track-caps, 0.16em);
    text-transform: uppercase;
    color: var(--pr-text, #A2AFC3);
  }

  .pr-field__hint {
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text, #A2AFC3);
  }

  .pr-input,
  .pr-textarea,
  .pr-select {
    inline-size: 100%;
    min-block-size: var(--pr-tap, 44px);
    padding: var(--pr-space-3, 0.75rem) var(--pr-space-4, 1rem);
    /* 16px floor — smaller triggers zoom-on-focus in iOS Safari. */
    font-size: max(var(--pr-size-base, 1rem), 16px);
    font-family: var(--pr-font-sans, system-ui, sans-serif);
    color: var(--pr-text-strong, #F2F4F8);
    background-color: var(--pr-surface-sunken, #070510);
    border: var(--pr-border-width, 1px) solid var(--pr-border-arcane, #6847BA);
    border-radius: var(--pr-radius-sm, 4px);
    transition: border-color var(--pr-dur-fast, 140ms) var(--pr-ease, ease),
                background-color var(--pr-dur-fast, 140ms) var(--pr-ease, ease);
  }
  .pr-textarea { min-block-size: 7rem; resize: vertical; }

  .pr-input::placeholder,
  .pr-textarea::placeholder { color: var(--pr-ash, #A2AFC3); opacity: 0.72; }

  .pr-input:hover,
  .pr-textarea:hover,
  .pr-select:hover { border-color: var(--pr-lightning, #F2F4F8); }

  .pr-input:focus-visible,
  .pr-textarea:focus-visible,
  .pr-select:focus-visible {
    outline: var(--pr-focus-width, 2px) solid var(--pr-focus-ring, #F2F4F8);
    outline-offset: var(--pr-focus-offset, 2px);
    border-color: var(--pr-lightning, #F2F4F8);
    background-color: var(--pr-void, #0D0912);
  }

  .pr-input:disabled,
  .pr-textarea:disabled,
  .pr-select:disabled {
    background-color: var(--pr-fill-disabled, rgba(162, 175, 195, 0.08));
    border-color: var(--pr-border-hairline, rgba(162, 175, 195, 0.16));
    border-style: dashed;
    color: var(--pr-text, #A2AFC3);
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* Error — border at the 3:1 border floor, message in AA'd Ember, and an
   * icon so the state is not carried by color alone. */
  .pr-input[aria-invalid="true"],
  .pr-textarea[aria-invalid="true"],
  .pr-select[aria-invalid="true"] {
    border-color: var(--pr-border-warning, #AE655F);
    border-width: var(--pr-border-width-thick, 2px);
    background-color: var(--pr-fill-warning, rgba(145, 78, 73, 0.22));
  }

  .pr-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-2, 0.5rem);
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text-warning, #AE655F);
  }
  .pr-field__error::before {
    content: "\26A0";
    line-height: var(--pr-lead-body, 1.6);
  }
  /* On the elevated Ink ground the message needs the Ink-tuned Ember. */
  #music .pr-field__error,
  #shop .pr-field__error,
  .pr-card .pr-field__error { color: var(--pr-text-warning-ink, #BA7B76); }

  .pr-field__success {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-2, 0.5rem);
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text-unlocked, #60CFC7);
  }

  .pr-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--pr-space-3, 0.75rem);
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text, #A2AFC3);
  }
  .pr-consent input[type="checkbox"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0.18rem 0 0;
    accent-color: var(--pr-arcane, #4C3388);
    flex: 0 0 auto;
  }

  /* The score is a game score. It must never read as money. */
  .pr-terms-note {
    margin-block-start: var(--pr-space-3, 0.75rem);
    font-size: var(--pr-size-2xs, 0.75rem);
    color: var(--pr-text, #A2AFC3);
  }
}

/* -----------------------------------------------------------------------------
 * 7. PLAYER + OVERLAYS
 * -------------------------------------------------------------------------- */

@layer components {

  .pr-player {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--pr-space-3, 0.75rem);
    padding: var(--pr-space-3, 0.75rem) var(--pr-gutter, 1rem);
    padding-block-end: calc(var(--pr-space-3, 0.75rem) + env(safe-area-inset-bottom, 0px));
    background-color: var(--pr-surface-elevated, #292425);
    border-block-start: var(--pr-border-width, 1px) solid var(--pr-border-on-elevated, #B44D58);
    box-shadow: var(--pr-shadow-lift, 0 28px 64px -30px rgba(13, 9, 18, 0.6));
  }
  .pr-player__title {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--pr-size-sm, 0.875rem);
    color: var(--pr-text-strong, #F2F4F8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pr-player__credit {
    font-size: var(--pr-size-2xs, 0.75rem);
    color: var(--pr-text, #A2AFC3);
  }
  .pr-player__progress {
    flex: 1 1 12rem;
    block-size: 4px;
    border-radius: var(--pr-radius-pill, 999px);
    background-color: var(--pr-fill-locked, rgba(76, 51, 136, 0.22));
    overflow: hidden;
  }
  .pr-player__played {
    block-size: 100%;
    background-color: var(--pr-dragon-rose, #B84F6A);
  }
  /* Threshold reached: the bar turns Spectral because something unlocked. */
  .pr-player__progress.is-threshold-met .pr-player__played {
    background-color: var(--pr-spectral-flame, #60CFC7);
  }
  .pr-player input[type="range"] { accent-color: var(--pr-dragon-rose, #B84F6A); }
  @media (max-width: 39.999rem) {
    .pr-player__progress { flex-basis: 100%; order: 10; }
    .pr-player { flex-wrap: wrap; }
  }

  /* Overlays are gradients, never a flat scrim. */
  .pr-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--pr-gutter, 1rem);
    background-image: var(--pr-overlay-backdrop,
      linear-gradient(160deg, rgba(13, 9, 18, 0.92) 0%, rgba(13, 9, 18, 0.94) 100%));
    backdrop-filter: blur(6px);
  }
  .pr-overlay__panel {
    inline-size: min(100%, 36rem);
    padding: var(--pr-space-6, 2rem);
    border: var(--pr-border-width, 1px) solid var(--pr-border-arcane, #6847BA);
    border-radius: var(--pr-radius-lg, 14px);
    background-color: var(--pr-surface-elevated, #292425);
    box-shadow: var(--pr-shadow-lift, 0 28px 64px -30px rgba(13, 9, 18, 0.6));
  }

  .pr-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .pr-skip-link {
    position: absolute;
    inset-block-start: -100vh;
    inset-inline-start: var(--pr-gutter, 1rem);
    z-index: 100;
    padding: var(--pr-space-3, 0.75rem) var(--pr-space-4, 1rem);
    background-color: var(--pr-void, #0D0912);
    color: var(--pr-text-strong, #F2F4F8);
    border: var(--pr-border-width-thick, 2px) solid var(--pr-focus-ring, #F2F4F8);
    border-radius: var(--pr-radius-sm, 4px);
  }
  .pr-skip-link:focus { inset-block-start: var(--pr-space-2, 0.5rem); }
}

/* -----------------------------------------------------------------------------
 * 8. ENVIRONMENT MOTION
 * The character NEVER animates. Only environment: lightning pulse, cloud drift,
 * ember drift, scale shimmer.
 * -------------------------------------------------------------------------- */

@keyframes pr-lightning-pulse {
  0%   { opacity: 0;    transform: scale(1); }
  18%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(1.035); }
}

@keyframes pr-cloud-drift {
  from { transform: translate3d(-4%, 0, 0) scale(1.06); }
  to   { transform: translate3d(4%, -1.5%, 0) scale(1.06); }
}

@keyframes pr-ember-drift {
  0%   { transform: translate3d(0, 12%, 0);  opacity: 0; }
  16%  { opacity: 0.7; }
  84%  { opacity: 0.5; }
  100% { transform: translate3d(3%, -22%, 0); opacity: 0; }
}

@keyframes pr-scale-shimmer {
  0%, 100% { opacity: 0.28; background-position: 0% 50%; }
  50%      { opacity: 0.52; background-position: 100% 50%; }
}

@layer components {

  .pr-env {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }

  .pr-env__clouds {
    position: absolute;
    inset: -8%;
    background-image: var(--pr-texture-veil, none);
    opacity: clamp(
      var(--pr-texture-min, 0.03),
      var(--pr-texture-strength, 0.06),
      var(--pr-texture-max, 0.10)
    );
    animation: pr-cloud-drift var(--pr-drift-slow, 42s) var(--pr-ease, ease-in-out) infinite alternate;
    will-change: transform;
  }

  .pr-env__embers {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(2px 2px at 18% 82%, rgba(145, 78, 73, 0.9) 0%, rgba(145, 78, 73, 0) 100%),
      radial-gradient(2px 2px at 46% 91%, rgba(184, 79, 106, 0.8) 0%, rgba(184, 79, 106, 0) 100%),
      radial-gradient(3px 3px at 74% 86%, rgba(145, 78, 73, 0.8) 0%, rgba(145, 78, 73, 0) 100%),
      radial-gradient(2px 2px at 88% 94%, rgba(184, 79, 106, 0.7) 0%, rgba(184, 79, 106, 0) 100%);
    animation: pr-ember-drift var(--pr-drift-ember, 19s) linear infinite;
    will-change: transform, opacity;
  }

  .pr-env__scales {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      104deg,
      rgba(96, 207, 199, 0) 42%,
      rgba(96, 207, 199, 0.5) 50%,
      rgba(96, 207, 199, 0) 58%
    );
    background-size: 260% 100%;
    opacity: 0.3;
    animation: pr-scale-shimmer var(--pr-shimmer, 7s) var(--pr-ease, ease-in-out) infinite;
    will-change: opacity, background-position;
  }

  .pr-env__flash {
    position: absolute;
    inset: 0;
    border: 0;
    background-image: linear-gradient(
      200deg,
      rgba(242, 244, 248, 0.55) 0%,
      rgba(242, 244, 248, 0) 46%
    );
    opacity: 0;
    animation: pr-lightning-pulse calc(var(--pr-pulse, 1.8s) * 5) var(--pr-ease-out, ease-out) infinite;
  }

  /* The character art is exempt from every animation, unconditionally. */
  .pr-hero__figure,
  .pr-hero__figure *,
  .pr-hero__art {
    animation: none !important;
    transition: none !important;
    transform: none;
  }

  /* Entry-gate dissolve: 2–4s, and always skippable. */
  .pr-gate-veil {
    transition: opacity var(--pr-dur-cinematic, 3000ms) var(--pr-ease-out, ease-out),
                visibility var(--pr-dur-cinematic, 3000ms) var(--pr-ease-out, ease-out);
  }
  .pr-gate-veil.is-dissolved { opacity: 0; visibility: hidden; }
}

/* Reduced motion: kill the lightning pulse, cloud drift, ember drift and scale
 * shimmer outright. The entrance stays usable — it becomes an instant cut, not
 * a blocked one. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .pr-env__clouds,
  .pr-env__embers,
  .pr-env__scales,
  .pr-env__flash,
  .pr-state.is-complete::after {
    animation: none !important;
  }
  .pr-env__embers,
  .pr-env__flash { display: none; }
  .pr-env__scales { opacity: 0.3; }
  .pr-env__clouds { transform: none; }

  .pr-gate-veil {
    transition-duration: 1ms;
  }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Forced-colors: hand the whole thing to the OS palette rather than fight it. */
@media (forced-colors: active) {
  .pr-btn,
  .pr-state,
  .pr-input,
  .pr-textarea,
  .pr-select { border-color: ButtonBorder; }
  .pr-btn:disabled,
  .pr-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .pr-mat-grain::before,
  .pr-mat-mesh::before,
  .pr-mat-veil::before,
  .pr-env { display: none; }
}

/* Print: core content must survive without the experience. */
@media print {
  .pr-nav, .pr-player, .pr-overlay, .pr-env, .pr-gate, .pr-skip-link { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .pr-mat-grain::before, .pr-mat-mesh::before, .pr-mat-veil::before { display: none; }
}