/* Components playground: the Debrowser design system on one page.
   Tokens and shared classes (button, tag, panel, kicker, kbd, rows, horizon,
   sky) come from global.css, inlined by the page and unlayered. Page rules
   live in cascade layers below; they only style new pg-* classes, so the
   shared component rules keep winning where both apply. */

@layer pg.reset, pg.layout, pg.components, pg.demo, pg.motion;

@property --orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Forced appearance for screenshots: [data-theme] mirrors the token values of
   the other appearance from tokens.css. "system" follows prefers-color-scheme. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--brand-frost);
  --color-surface: var(--brand-snow);
  --color-surface-raised: var(--brand-frost-deep);
  --color-border: rgb(1 48 199 / 0.14);
  --color-border-strong: rgb(1 48 199 / 0.28);
  --color-text: var(--brand-abyss);
  --color-text-muted: #2f4690;
  --color-text-faint: #3d55a0;
  --color-accent: var(--brand-ultramarine);
  --color-accent-soft: rgb(1 60 244 / 0.1);
  --color-on-accent: #ffffff;
  --color-success: #17703a;
  --color-warning: #8a500f;
  --color-danger: #b42323;
  --orbit-line: var(--brand-royal);
  --orbit-glow: rgb(38 190 252 / 0.55);
  --orbit-core: #ffffff;
  --halo-soft: rgb(1 60 244 / 0.18);
  --display-fill: linear-gradient(
    180deg,
    var(--brand-abyss) 35%,
    var(--brand-ultramarine-700) 100%
  );
  --display-accent: linear-gradient(
    90deg,
    var(--brand-ultramarine) 0%,
    var(--brand-royal) 100%
  );
  --edge-spec: linear-gradient(
    160deg,
    rgb(255 255 255 / 0.95),
    rgb(255 255 255 / 0.2) 38%,
    rgb(38 190 252 / 0.4)
  );
  --sky:
    radial-gradient(
      90% 60% at 50% 0%,
      rgb(255 255 255 / 0.85),
      transparent 70%
    ),
    radial-gradient(
      60% 55% at 50% 72%,
      rgb(38 190 252 / 0.32),
      transparent 70%
    ),
    radial-gradient(70% 50% at 50% 95%, rgb(1 60 244 / 0.12), transparent 70%);
  --stars: none;
  --stage: linear-gradient(
    180deg,
    var(--brand-frost-deep),
    var(--brand-frost) 70%
  );
  --syn-tag: #1f7a3d;
  --syn-attr: #9a5a13;
  --syn-value: #1d4fa8;
  --syn-keyword: #a626a4;
  --syn-number: #1c6dd0;
  --syn-property: #b0305c;
  --syn-comment: #3d55a0;
  --device-edge: rgb(156 235 252 / 0.45);
  --screen-bg: #ffffff;
  --screen-page: #f1f9fe;
  --screen-ink: var(--brand-abyss);
  --screen-ink-muted: #3d55a0;
  --screen-line: rgb(1 48 199 / 0.12);
  --screen-block: rgb(1 48 199 / 0.07);
  --screen-block-strong: rgb(1 48 199 / 0.15);
  --shadow-sm: 0 1px 2px rgb(1 16 57 / 0.08);
  --shadow-md: 0 18px 40px -20px rgb(1 28 121 / 0.35);
  --shadow-lg: 0 50px 100px -40px rgb(1 28 121 / 0.5);
  --glow-accent: 0 10px 30px -10px rgb(1 60 244 / 0.6);
  --inset-spec: inset 0 1px 0 rgb(255 255 255 / 0.9);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--brand-void);
  --color-surface: var(--brand-abyss);
  --color-surface-raised: var(--brand-deep);
  --color-border: rgb(156 235 252 / 0.12);
  --color-border-strong: rgb(156 235 252 / 0.24);
  --color-text: var(--brand-core);
  --color-text-muted: #a9c3f2;
  --color-text-faint: #8ea8e6;
  --color-accent: var(--brand-cyan-bright);
  --color-accent-soft: rgb(88 215 252 / 0.14);
  --color-on-accent: #ffffff;
  --color-success: #4ade80;
  --color-warning: #ffb454;
  --color-danger: #ff6b6b;
  --orbit-line: var(--brand-cyan);
  --orbit-glow: rgb(38 190 252 / 0.6);
  --orbit-core: var(--brand-core);
  --halo-soft: rgb(88 215 252 / 0.22);
  --display-fill: linear-gradient(180deg, #ffffff 30%, var(--brand-ice) 100%);
  --display-accent: linear-gradient(
    90deg,
    var(--brand-cyan-bright) 0%,
    var(--brand-ice) 100%
  );
  --edge-spec: linear-gradient(
    160deg,
    rgb(156 235 252 / 0.5),
    rgb(156 235 252 / 0.06) 36%,
    rgb(1 60 244 / 0.45)
  );
  --sky:
    radial-gradient(70% 55% at 50% 78%, rgb(1 60 244 / 0.45), transparent 70%),
    radial-gradient(
      38% 30% at 50% 82%,
      rgb(38 190 252 / 0.22),
      transparent 70%
    ),
    radial-gradient(80% 50% at 50% 0%, rgb(1 36 157 / 0.35), transparent 70%);
  --stars:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(
      1px 1px at 38% 72%,
      rgb(255 255 255 / 0.7) 50%,
      transparent 51%
    ),
    radial-gradient(
      1.5px 1.5px at 64% 30%,
      rgb(156 235 252 / 0.9) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 82% 64%,
      rgb(255 255 255 / 0.6) 50%,
      transparent 51%
    ),
    radial-gradient(
      1px 1px at 22% 88%,
      rgb(255 255 255 / 0.5) 50%,
      transparent 51%
    ),
    radial-gradient(1.5px 1.5px at 91% 12%, #fff 50%, transparent 51%),
    radial-gradient(
      1px 1px at 52% 52%,
      rgb(156 235 252 / 0.6) 50%,
      transparent 51%
    );
  --stage:
    radial-gradient(80% 60% at 50% 0%, rgb(1 60 244 / 0.2), transparent 70%),
    linear-gradient(180deg, #020b2e, var(--brand-void) 80%);
  --syn-tag: #7ee19b;
  --syn-attr: #f0b86e;
  --syn-value: #8cc4ff;
  --syn-keyword: #e39bea;
  --syn-number: #79c8ff;
  --syn-property: #ff8fb1;
  --syn-comment: #8ea8e6;
  --device-edge: rgb(156 235 252 / 0.5);
  --screen-bg: #020a2a;
  --screen-page: #01071f;
  --screen-ink: var(--brand-core);
  --screen-ink-muted: #8ea8e6;
  --screen-line: rgb(156 235 252 / 0.12);
  --screen-block: rgb(156 235 252 / 0.08);
  --screen-block-strong: rgb(156 235 252 / 0.16);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 18px 40px -20px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 50px 100px -40px rgb(0 0 0 / 0.8);
  --glow-accent: 0 10px 34px -8px rgb(1 60 244 / 0.8);
  --inset-spec: inset 0 1px 0 rgb(156 235 252 / 0.35);
}

@layer pg.reset {
  :root {
    --pg-rail: 15rem;
    --pg-bar-h: 3.5rem;
    --pg-accent-mix: color-mix(
      in oklch,
      var(--brand-ultramarine),
      var(--brand-cyan) 40%
    );
  }
  html {
    scroll-padding-top: calc(var(--pg-bar-h) + var(--space-6));
  }
  html:has(dialog[open]) {
    overflow: hidden;
  }
  pre {
    margin: 0;
  }
}

@layer pg.layout {
  .pg {
    min-height: 100dvh;
  }
  .pg-bar {
    position: sticky;
    top: var(--space-3);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 75rem;
    height: var(--pg-bar-h);
    margin: var(--space-3) var(--space-3) 0;
    padding-inline: var(--space-4) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(
          color-mix(in oklab, var(--color-surface) 72%, transparent),
          color-mix(in oklab, var(--color-surface) 72%, transparent)
        )
        padding-box,
      var(--edge-spec) border-box;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--inset-spec), var(--shadow-md);

    @media (min-width: 48rem) {
      margin-inline: var(--gutter);
    }
    @media (min-width: 80rem) {
      margin-inline: auto;
    }
  }
  .pg-nav {
    display: none;
    gap: var(--space-1);
    margin-inline: auto;

    @media (min-width: 48rem) {
      display: flex;
    }
  }
  .pg-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-7);
    padding: var(--space-8) var(--gutter) var(--space-7);

    .cluster {
      justify-content: center;
    }
    .sky {
      z-index: -1;
      inset: -6rem 0 0;
    }

    @media (min-width: 48rem) {
      grid-template-columns: 1.3fr 1fr;
      align-items: center;
      justify-items: start;
      text-align: left;
      max-width: 75rem;
      margin-inline: auto;
      .cluster {
        justify-content: start;
      }
    }
    @media (min-width: 80rem) {
      padding-block: var(--space-9);
    }
  }
  .pg-layout {
    display: grid;
    gap: var(--space-7);
    max-width: 75rem;
    margin-inline: auto;
    padding: 0 var(--gutter) var(--space-9);

    @media (min-width: 80rem) {
      grid-template-columns: var(--pg-rail) minmax(0, 1fr);
      gap: var(--space-8);
    }
  }
  .pg-rail {
    /* Compact: a floating glass dock at the bottom of the screen. */
    position: fixed;
    inset: auto var(--space-3) var(--space-3);
    z-index: 4;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background:
      linear-gradient(
          color-mix(in oklab, var(--color-surface) 82%, transparent),
          color-mix(in oklab, var(--color-surface) 82%, transparent)
        )
        padding-box,
      var(--edge-spec) border-box;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--inset-spec), var(--shadow-lg);

    .kicker,
    .pg-rail-note {
      display: none;
    }

    /* Regular: an inline strip above the content. */
    @media (min-width: 48rem) {
      position: static;
      padding: var(--space-4) var(--space-5);
      box-shadow: var(--inset-spec), var(--shadow-md);
      .kicker {
        display: inline-flex;
      }
    }
    /* Wide: a sticky side rail. */
    @media (min-width: 80rem) {
      position: sticky;
      top: calc(var(--pg-bar-h) + var(--space-7));
      align-self: start;
      gap: var(--space-4);
      padding: var(--space-5);
      .pg-rail-note {
        display: block;
      }
    }
  }
  .pg-main {
    display: grid;
    gap: var(--space-9);
    min-width: 0;
    padding-bottom: var(--space-9);

    @media (min-width: 48rem) {
      padding-bottom: 0;
    }
  }
  .pg-section {
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }
  .pg-foot {
    position: relative;
    padding: var(--space-7) var(--gutter) var(--space-10);
    text-align: center;
    font-size: var(--text-label);
    font-family: var(--font-mono);

    @media (min-width: 48rem) {
      padding-bottom: var(--space-8);
    }
  }
}

@layer pg.components {
  .pg-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-weight: var(--weight-strong);
    font-size: var(--text-h4);
    letter-spacing: var(--tracking-snug);

    img {
      filter: drop-shadow(0 0 10px var(--orbit-glow));
    }
    &:hover {
      text-decoration: none;
    }
  }
  .pg-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    transition: background-color var(--duration-fast) var(--ease-out);

    &:hover {
      color: var(--color-text);
      background: var(--color-accent-soft);
      text-decoration: none;
    }
  }
  .pg-theme {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    margin-left: auto;
    padding-inline: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: linear-gradient(
      180deg,
      var(--color-surface),
      var(--color-surface-raised)
    );
    box-shadow: var(--inset-spec);
    color: var(--color-text);
    font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
    cursor: pointer;

    @media (min-width: 48rem) {
      margin-left: 0;
    }
    &:hover {
      box-shadow: var(--inset-spec), var(--glow-cyan);
    }
  }
  .pg-theme-icon {
    width: 1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--brand-abyss) 0 50%, var(--brand-core) 0);
    box-shadow:
      0 0 0 1.5px var(--orbit-line),
      0 0 8px var(--orbit-glow);
    transition: rotate var(--duration-base) var(--ease-out);

    [aria-pressed="true"] & {
      rotate: 180deg;
    }
  }
  .pg-display {
    max-width: 14ch;
    font-size: var(--text-hero);
    font-weight: var(--weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);

    .tone-a {
      color: var(--color-text);
    }
    .tone-b {
      background: var(--display-accent);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .pg-hero-copy {
    display: grid;
    gap: var(--space-5);
    justify-items: inherit;

    .lead {
      max-width: 44ch;
      color: var(--color-text-muted);
      font-size: var(--text-lead);
      line-height: 1.55;
    }
  }
  .pg-h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    max-width: 20ch;
    background: var(--display-fill);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .pg-h3 {
    font-size: var(--text-h4);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
  }

  /* Orbit ring: a conic gradient spun by an animated custom property. */
  .pg-ring {
    position: relative;
    width: min(70vw, 22rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
      from var(--orbit-angle),
      transparent 0 62%,
      var(--orbit-line) 80%,
      var(--orbit-core) 88%,
      transparent 90%
    );
    mask: radial-gradient(
      closest-side,
      transparent 86%,
      #000 87% 92%,
      transparent 93%
    );
    filter: drop-shadow(0 0 14px var(--orbit-glow));
    rotate: -7deg;
    scale: 1 0.42;
    justify-self: center;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(
        closest-side,
        transparent 88%,
        var(--orbit-line) 89% 90%,
        transparent 91%
      );
      opacity: 0.4;
    }
  }

  .swatches {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  }
  .swatch {
    position: relative;
    display: grid;
    align-content: end;
    gap: 2px;
    aspect-ratio: 4 / 3;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--swatch);
    border: 1px solid var(--color-border);
    box-shadow: var(--inset-spec);
    font: var(--weight-mono) 0.75rem / 1.2 var(--font-mono);
    color: #fff;
    text-shadow: 0 1px 2px rgb(1 6 26 / 0.5);
    transition:
      translate var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);

    code {
      color: inherit;
      opacity: 0.85;
    }
    &:hover {
      translate: 0 -2px;
      box-shadow: var(--inset-spec), var(--glow-cyan);
    }
    &:nth-child(n + 13) {
      color: var(--brand-abyss);
      text-shadow: none;
    }
  }
  .swatches-semantic {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));

    .swatch {
      aspect-ratio: auto;
      min-height: 4.5rem;
      color: var(--color-text);
      text-shadow: none;
      background: linear-gradient(
        90deg,
        var(--swatch) 0 2.75rem,
        var(--color-surface) 0
      );
      padding-left: 3.5rem;
      align-content: center;
    }
  }
  .mix-ramp {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    height: 3rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--inset-spec), var(--shadow-sm);

    li {
      background: color-mix(
        in oklch,
        var(--brand-ultramarine),
        var(--brand-cyan) var(--t)
      );
    }
  }
  .pg-scales {
    display: grid;
    gap: var(--space-6);

    @media (min-width: 48rem) {
      grid-template-columns: 1fr 1fr;
    }
    > div {
      display: grid;
      gap: var(--space-3);
      align-content: start;
    }
  }
  .space-scale {
    display: grid;
    gap: var(--space-2);

    li {
      display: grid;
      grid-template-columns: 6.5rem 1fr;
      align-items: center;
    }
    code {
      font-size: var(--text-label);
      color: var(--syn-property);
    }
    span {
      height: 0.75rem;
      border-radius: var(--radius-xs);
      background: linear-gradient(
        90deg,
        var(--brand-ultramarine),
        var(--brand-cyan)
      );
      box-shadow: 0 0 8px var(--orbit-glow);
    }
  }
  .radius-scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    li {
      display: grid;
      place-items: end start;
      width: 4.5rem;
      aspect-ratio: 1;
      padding: var(--space-2);
      border: 1.5px solid var(--orbit-line);
      background: var(--color-accent-soft);
      font: var(--weight-mono) 0.75rem / 1 var(--font-mono);
    }
  }

  .state-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
  .state {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);

    > span {
      font: var(--weight-mono) 0.75rem / 1 var(--font-mono);
      color: var(--color-text-faint);
    }
  }
  .state-ticket {
    background: linear-gradient(
      160deg,
      var(--brand-ultramarine),
      var(--brand-ultramarine-900)
    );
    border-color: transparent;

    > span {
      color: var(--brand-ice);
    }
  }
  .pg-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding-inline: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: var(--weight-mono) 0.75rem / 1 var(--font-mono);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
  }
  .pg-badge-accent {
    background: linear-gradient(
      180deg,
      var(--brand-ultramarine),
      var(--brand-ultramarine-700)
    );
    color: var(--color-on-accent);
    box-shadow: var(--glow-accent);
  }
  .pg-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .pg-form {
    container: form / inline-size;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);

    @container form (min-width: 34rem) {
      grid-template-columns: 1fr 1fr;

      .pg-form-actions,
      .choice {
        grid-column: 1 / -1;
      }
    }
  }
  .field {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: var(--weight-strong);

    output {
      font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
      color: var(--color-accent);
      margin-left: var(--space-2);
    }
    :is(input:not([type="range"]), select) {
      min-height: 2.75rem;
      padding-inline: var(--space-3);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-md);
      background: var(--color-bg);
      box-shadow: inset 0 1px 2px rgb(1 16 57 / 0.08);
      color: var(--color-text);
      font: inherit;
      font-weight: var(--weight-regular);
      transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);

      &:hover {
        border-color: var(--orbit-line);
      }
      &:focus-visible {
        outline: none;
        border-color: var(--orbit-line);
        box-shadow: var(--glow-cyan);
      }
      &:user-invalid,
      &:invalid:not(:placeholder-shown) {
        border-color: var(--color-danger);
      }
    }
    .hint {
      font-weight: var(--weight-regular);
      color: var(--color-text-faint);
      font-size: var(--text-label);
    }
  }
  .field-range input {
    --fill: 60%;
    appearance: none;
    height: 0.375rem;
    margin-block: var(--space-4);
    border-radius: var(--radius-xs);
    background: linear-gradient(
      90deg,
      var(--brand-ultramarine),
      var(--brand-cyan) var(--fill),
      var(--color-surface-raised) var(--fill)
    );

    &::-webkit-slider-thumb {
      appearance: none;
      width: 1.375rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(
        circle at 35% 30%,
        #fff,
        var(--brand-core) 40%,
        var(--brand-ice)
      );
      box-shadow: var(--glow-cyan);
      cursor: grab;
    }
    &::-moz-range-thumb {
      width: 1.375rem;
      height: 1.375rem;
      border: 0;
      border-radius: 50%;
      background: var(--brand-core);
      box-shadow: var(--glow-cyan);
    }
  }
  .switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-small);
    font-weight: var(--weight-strong);
    cursor: pointer;

    input {
      position: absolute;
      opacity: 0;
    }
    .switch-track {
      position: relative;
      width: 3rem;
      height: 1.75rem;
      border-radius: var(--radius-md);
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border-strong);
      transition: background-color var(--duration-base) var(--ease-out);

      &::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1.375rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(180deg, #fff, var(--brand-core));
        box-shadow: var(--shadow-sm);
        transition: translate var(--duration-base) var(--ease-out);
      }
    }
    &:has(input:checked) .switch-track {
      background: linear-gradient(
        180deg,
        var(--brand-ultramarine),
        var(--brand-ultramarine-700)
      );
      border-color: transparent;
      box-shadow: var(--glow-accent);

      &::after {
        translate: 1.25rem 0;
      }
    }
    &:has(input:focus-visible) .switch-track {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }
  }
  .choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-small);

    legend {
      padding-inline: var(--space-2);
      font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
      color: var(--color-text-faint);
    }
    input {
      accent-color: var(--brand-ultramarine);
    }
  }
  .pg-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--space-3);

    .button {
      font-family: inherit;
      cursor: pointer;
    }
  }

  .tabs {
    display: grid;
    gap: var(--space-3);
  }
  .tab-list {
    display: inline-flex;
    justify-self: start;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);

    button {
      min-height: 2.25rem;
      padding-inline: var(--space-4);
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--color-text-muted);
      font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
      cursor: pointer;
    }
    [aria-selected="true"] {
      color: var(--color-text);
      background: var(--color-surface);
      box-shadow: var(--inset-spec), var(--shadow-sm);
      view-transition-name: active-tab;
    }
  }
  .tab-pane {
    padding: var(--space-5);
  }
  .code {
    font: var(--weight-regular) 0.8125rem / 1.6 var(--font-mono);
    color: var(--color-text);
    white-space: pre-wrap;

    .s {
      color: var(--syn-tag);
    }
    .p {
      color: var(--syn-property);
    }
    .v {
      color: var(--syn-value);
    }
    .k {
      color: var(--syn-keyword);
    }
  }

  .cards {
    container: cards / inline-size;
    display: grid;
    gap: var(--space-4);

    @container cards (min-width: 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @container cards (min-width: 60rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .pg-card {
    container: card / inline-size;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
  }
  .pg-card-media {
    height: 6rem;
    border-radius: var(--radius-md);
    background:
      repeating-conic-gradient(
          from 45deg,
          var(--color-accent-soft) 0 25%,
          transparent 0 50%
        )
        0 0 / 1.5rem 1.5rem,
      linear-gradient(135deg, var(--brand-royal), var(--brand-cyan));
    box-shadow: var(--inset-spec);

    @container card (min-width: 22rem) {
      height: 8rem;
      background-size:
        2rem 2rem,
        auto;
    }
  }
  .pick {
    position: relative;
    height: 5rem;
    margin-top: var(--space-5);
    border-radius: var(--radius-xs);
    background: rgb(1 60 244 / 0.1);
    box-shadow:
      0 0 0 1.5px var(--orbit-line),
      0 0 0 5px var(--halo-soft);
    animation: pick-pulse var(--duration-pulse) var(--ease-out) infinite;
  }
  .pick-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: -1.5px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--brand-ultramarine);
    color: #fff;
    font: var(--weight-mono) 0.6875rem / 1.4 var(--font-mono);
    white-space: nowrap;
  }
  .pg-ticket {
    position: relative;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: #fff;
    background:
      radial-gradient(
        60% 50% at 0% 0%,
        rgb(38 190 252 / 0.35),
        transparent 70%
      ),
      linear-gradient(
        160deg,
        var(--brand-ultramarine),
        var(--brand-ultramarine-900)
      );
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.4),
      var(--glow-accent);

    .kicker {
      color: var(--brand-ice);
    }
    p {
      color: var(--brand-ice);
    }
    &::after {
      content: "";
      position: absolute;
      top: -4rem;
      right: -4rem;
      width: 10rem;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1.5px solid var(--brand-cyan);
      box-shadow: 0 0 18px var(--orbit-glow);
      opacity: 0.7;
    }
    .button {
      justify-self: start;
      font-family: inherit;
    }
  }
  .faq {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4);
    transition: box-shadow var(--duration-base) var(--ease-out);

    summary {
      display: flex;
      gap: var(--space-3);
      font-weight: var(--weight-strong);
      cursor: pointer;
      list-style: none;

      .mono {
        color: var(--color-text-faint);
        font-size: var(--text-label);
      }
      &::-webkit-details-marker {
        display: none;
      }
    }
    p {
      margin-top: var(--space-3);
    }
    &[open] {
      box-shadow: var(--glow-cyan);
    }
  }
  .pg-readout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    font: var(--weight-mono) 0.75rem / 1.3 var(--font-mono);

    div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    dt {
      color: var(--color-text-faint);
    }
    dd {
      color: var(--color-accent);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (min-width: 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    @media (min-width: 80rem) {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
  }
  .pg-dialog {
    max-width: min(28rem, calc(100vw - 2rem));
    padding: var(--space-6);
    color: var(--color-text);

    form {
      display: grid;
      gap: var(--space-4);
    }
    .button {
      font-family: inherit;
      cursor: pointer;
    }
    &::backdrop {
      background: color-mix(in oklab, var(--brand-void) 55%, transparent);
      backdrop-filter: blur(6px);
    }
    &[open] {
      animation: dialog-in var(--duration-base) var(--ease-out);
    }
  }
}

@layer pg.demo {
  .box-stage {
    display: grid;
    place-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background:
      repeating-linear-gradient(
        45deg,
        var(--color-accent-soft) 0 1px,
        transparent 0 10px
      ),
      var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    overflow: auto;
  }
  .box-demo {
    box-sizing: content-box;
    display: grid;
    place-items: center;
    width: 240px;
    height: 96px;
    margin: 32px 48px;
    padding: 24px 40px;
    border-style: solid;
    border-color: var(--brand-ultramarine) var(--brand-cyan);
    border-width: 6px 2px;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) content-box,
      color-mix(in oklch, var(--brand-cyan) 22%, transparent) padding-box;
    box-shadow: var(--glow-accent);
    color: var(--color-text);
    font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
    outline: 1px dashed var(--orbit-line);
    outline-offset: 12px;
  }
  .fractal-wrap {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--inset-spec);
  }
  .fractal {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(var(--depth) * 2px);
    height: 100%;

    & > .cell:first-child {
      grid-row: span 2;
    }
  }
  .fractal-wrap > .fractal {
    height: clamp(22rem, 60vw, 34rem);
  }
  .cell {
    min-height: 0;
    padding: 3px;
    border-radius: calc(var(--radius-xs) + var(--depth) * 2px);
    background: color-mix(
      in oklch,
      var(--brand-ultramarine) calc(var(--depth) * 4%),
      transparent
    );
    border: 1px solid
      color-mix(
        in oklch,
        var(--orbit-line) calc(10% + var(--depth) * 8%),
        transparent
      );

    &:hover {
      background: var(--color-accent-soft);
      border-color: var(--orbit-line);
    }
  }
  .cell-leaf {
    display: block;
    height: 100%;
    min-height: 0.5rem;
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, var(--brand-royal), var(--brand-cyan));
    opacity: 0.55;
  }
}

@layer pg.motion {
  .pg-ring {
    animation: spin var(--duration-orbit) linear infinite;
  }
  @keyframes spin {
    to {
      --orbit-angle: 360deg;
    }
  }
  @keyframes pick-pulse {
    50% {
      box-shadow:
        0 0 0 1.5px var(--orbit-line),
        0 0 0 9px var(--halo-soft);
    }
  }
  @keyframes dialog-in {
    from {
      opacity: 0;
      scale: 0.96;
    }
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-base);
    animation-timing-function: var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
    ::view-transition-group(*) {
      animation: none !important;
    }
  }
}

/* Forced states for the gallery. Unlayered so they sit beside global.css. */
.button.is-hover.button-primary,
.button-primary:not(:disabled):hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(1 16 57 / 0.4),
    var(--glow-accent),
    var(--glow-cyan);
}
.button.is-hover.button-secondary {
  box-shadow: var(--shadow-sm), var(--glow-cyan);
}
.button.is-focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.button.is-active {
  transform: translateY(1px);
  filter: brightness(0.92);
}
.button {
  font-family: inherit;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
  }
  &:not(:disabled):active {
    transform: translateY(1px);
  }
}
.tag-warn::before {
  background: var(--color-warning);
  box-shadow: 0 0 6px var(--color-warning);
}
.tag-danger::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-danger);
}

/* Overrides of unlayered global.css rules (links, code, panel shadows) must be
   unlayered too: any unlayered rule beats every layered one. */
.pg-brand,
.pg-nav a {
  color: var(--color-text);

  &:hover {
    text-decoration: none;
  }
}
.pg-nav a {
  color: var(--color-text-muted);
}
.swatch code {
  color: inherit;
}
.pg-form.panel:has(input[type="email"]:invalid:not(:placeholder-shown)) {
  box-shadow:
    var(--inset-spec),
    var(--shadow-md),
    0 0 0 1px color-mix(in oklab, var(--color-danger) 60%, transparent);
}
.pg-card.panel:has(.pick) {
  box-shadow: var(--inset-spec), var(--shadow-md), var(--glow-cyan);
}