:root {
        /* Match old playground's HSL token map (resources/index.css). */
        --pg-bg:        0 0% 5%;
        --pg-fg:        0 0% 95%;
        --pg-card:      0 0% 8%;
        --pg-popover:   0 0% 8%;
        --pg-muted:     0 0% 11%;
        --pg-muted-fg:  0 0% 65%;
        --pg-border:    0 0% 15%;
        --pg-input:     0 0% 15%;
        --pg-radius:    0.75rem;
      }

      /* Theme is scoped to .playground-shell so this layout's styles never
         leak into site.layouts.default if a future page renders both. */
      .playground-shell {
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background: hsl(var(--pg-bg));
        color: hsl(var(--pg-fg));
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
      }

      /* Hide [x-cloak] before Alpine initialises so dropdowns/tab state
         don't briefly render in their open state on first paint. */
      [x-cloak] { display: none !important; }

      /* Heading reset scoped to the dashboard shell.

         playground.css (Tailwind v3, preflight DISABLED) is loaded
         BEFORE the site-wide app.css. app.css ships a global h1/h2/h3
         rule with very large display sizes intended for the marketing
         site's hero blocks; because it loads later with equal
         specificity, those rules win the cascade against Tailwind's
         text-3xl / md:text-5xl utilities — which is why the
         "AI grading, signature ID…" h1 on /playground rendered at
         ~150px+ on desktop. We can't touch app.css without affecting
         the rest of the site, so neutralise the inherited sizes here
         and let the Tailwind utilities (or inline styles) on each
         element decide the actual size again. Scoped to .playground-shell
         so the CMS hero (.playground-hero) and the site nav/footer
         outside the shell keep their app.css typography. */
      .playground-shell :is(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        margin: 0;
      }

      /* Custom scrollbar for the dashboard shell only. */
      .playground-shell *::-webkit-scrollbar      { width: 8px; height: 8px; }
      .playground-shell *::-webkit-scrollbar-track{ background: hsl(var(--pg-bg)); }
      .playground-shell *::-webkit-scrollbar-thumb{ background: hsl(var(--pg-border)); border-radius: 4px; }
      .playground-shell *::-webkit-scrollbar-thumb:hover{ background: hsl(var(--pg-muted-fg)); }

      /* Reserve space at the bottom on mobile so the fixed bottom nav
         doesn't cover content. */
      @media (max-width: 767px) {
        .playground-shell { padding-bottom: 5rem; }
      }