:root {
  --pg-bg: #f4efe5;
  --pg-paper: #fffdf7;
  --pg-paper-warm: #fbf5ea;
  --pg-text: #1f1d19;
  --pg-muted: #70695f;
  --pg-border: #2a2823;
  --pg-soft-border: #cfc5b5;
  --pg-link: #5c4a2f;
  --pg-shadow-hard: 4px 4px 0 #2a2823;
  --pg-radius-window: 2px;
  --pg-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.playground-child { font-family: var(--pg-font-ui); }
.playground-chrome {
  position: sticky; top: 10px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(1160px, calc(100% - 28px)); min-height: 32px; margin: 10px auto 18px; border: 2px solid var(--pg-border);
  border-radius: var(--pg-radius-window); background: rgba(251,245,234,.94); box-shadow: var(--pg-shadow-hard); color: var(--pg-text);
  font-family: var(--pg-font-mono); font-size: .78rem; line-height: 1; overflow: hidden; backdrop-filter: blur(10px);
}
.playground-chrome a, .playground-chrome span { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 10px; color: inherit; text-decoration: none; }
.playground-chrome a { border-right: 2px solid var(--pg-border); font-weight: 800; }
.playground-chrome a:hover, .playground-chrome a:focus-visible { background: var(--pg-paper); }
.playground-chrome a:focus-visible { outline: 3px solid #8c6b35; outline-offset: 3px; }
.playground-chrome span { min-width: 0; overflow: hidden; color: var(--pg-muted); text-overflow: ellipsis; white-space: nowrap; }
.playground-chrome::after { content: "□ ×"; flex: 0 0 auto; padding: 0 10px; color: var(--pg-muted); letter-spacing: .08em; }
.playground-window-panel { border: 2px solid var(--pg-border); border-radius: var(--pg-radius-window); background: var(--pg-paper); box-shadow: var(--pg-shadow-hard); }
.playground-window-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 6px 9px; border-bottom: 2px solid var(--pg-border); background: var(--pg-paper-warm); color: var(--pg-muted); font-family: var(--pg-font-mono); font-size: .74rem; }
@media (max-width: 560px) { .playground-chrome { top: 8px; width: min(100% - 20px, 1160px); margin-bottom: 14px; } }