@layer components {
  .playground {
    margin: var(--space-xl) 0 0;
  }

  .playground h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.3rem;
  }

  .playground-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    line-height: 1.7;
  }

  .playground-desc code {
    font-size: 0.82em;
  }

  .playground-terminal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  /* xterm.js overrides */
  .playground-terminal .xterm {
    padding: 0.75rem;
  }

  .playground-terminal .xterm-viewport {
    overflow-y: auto !important;
    /* xterm.css hardcodes background-color: #000 here (claimed to be
       required for scrollbar opacity on macOS). That black shows
       through wherever the rendered canvas grid doesn't perfectly
       cover the container — typically a thin frame on the right/
       bottom edge. Match the surface so any uncovered pixels blend in. */
    background-color: var(--bg-surface) !important;
  }

  .playground-terminal .xterm-viewport::-webkit-scrollbar {
    width: 6px;
  }

  .playground-terminal .xterm-viewport::-webkit-scrollbar-track {
    background: transparent;
  }

  .playground-terminal .xterm-viewport::-webkit-scrollbar-thumb {
    background: var(--border-strong);
  }

  /* Mode toggle (emacs / vi) */
  .playground-mode-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    font-family: var(--font);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
    transition:
      color 0.15s,
      border-color 0.15s;
  }

  .playground-mode-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .playground-mode-toggle.vi {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Pinned command header (sticky fold) */
  .playground-pinned-cmd {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg-surface);
    font-family: var(--font);
    font-size: 14px;
    padding: 0.75rem 0.75rem 0.35rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    color: var(--text);
  }

  .playground-pinned-cmd .pinned-prompt {
    color: var(--accent);
    font-weight: bold;
  }

  .playground-pinned-cmd .pinned-dollar {
    color: var(--text-secondary);
  }

  .playground-pinned-cmd .pinned-text {
    color: var(--text);
  }

  @media (max-width: 640px) {
    .playground-terminal .xterm {
      padding: 0.5rem;
    }

    .playground-mode-toggle {
      font-size: 0.58rem;
      padding: 0.15rem 0.35rem;
    }
  }
}