html:has(.playground-page) { overscroll-behavior: none; }
.playground-page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.playground-bar { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.playground-bar .logo { font-size: 1.05rem; margin-right: 0.5rem; }
.playground-run { padding: 0.45rem 1.2rem; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 600 0.95rem system-ui, sans-serif; cursor: pointer; }
.playground-run:hover { filter: brightness(1.08); }
.playground-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.playground-secondary { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text); font: 0.85rem system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.playground-secondary:hover { border-color: var(--accent); }
.playground-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.playground-pane { min-width: 0; min-height: 0; display: flex; }
.playground-pane + .playground-pane { border-left: 1px solid var(--line); }
.playground-code { flex: 1; margin: 0; padding: 0.75rem 1rem; border: 0; resize: none; overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--text); font: 13px/1.6 var(--mono); tab-size: 2; white-space: pre; }
.playground-code:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.playground-result { flex: 1; width: 100%; height: 100%; border: 0; background: #110e0c; }
@media (max-width: 800px) {
  .playground-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .playground-pane + .playground-pane { border-left: 0; border-top: 1px solid var(--line); }
  .playground-title, #playground-lesson { display: none; }
}