/* HTML / CSS / JS Playground — 3-up editors, preview + console. */
.pg-editors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; min-width: 0; }
@container (max-width: 820px) { .pg-editors { grid-template-columns: 1fr; } }
.pg-code { font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.5; tab-size: 2; min-height: 220px; resize: vertical; }
.pg-result { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; min-width: 0; }
.pg-frame { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.pg-console { max-height: 180px; overflow: auto; border-top: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; padding: 0.35rem 0; }
.pg-console[hidden] { display: none; }
.pg-console:empty::before { content: 'Console — console.log output and errors appear here'; display: block; padding: 0.3rem 0.75rem; color: var(--text-muted); font-family: var(--font-family); }
.pg-log { padding: 0.15rem 0.75rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-log span + span { margin-left: 0.5rem; }
.pg-warn { background: rgba(202, 138, 4, 0.1); color: #a16207; }
.pg-error { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.pg-info { color: var(--text-secondary); }
[data-theme="dark"] .pg-warn { color: #facc15; }
[data-theme="dark"] .pg-error { color: #f87171; }
.pg-link { font-family: var(--font-mono); font-size: 0.78rem; }