:root { color-scheme: light; --pg-bg: #f7f4ec; --pg-text: #18232d; --pg-muted: #596a73; --pg-panel: #fff; --pg-header: #f2eee5; --pg-border: #cfc7b8; --pg-tabs: #e8e3d8; --pg-editor: #fbfcfa; --pg-editor-text: #17232a; --pg-editor-gutter: #f0f2ef; --pg-editor-gutter-text: #6c7a82; --pg-grid: #e8ece7; }
:root[data-theme="dark"] { color-scheme: dark; --pg-bg: #10171b; --pg-text: #e8eee9; --pg-muted: #a9b7bd; --pg-panel: #172126; --pg-header: #202d33; --pg-border: #3a4a51; --pg-tabs: #202d33; --pg-editor: #111a1f; --pg-editor-text: #edf4ef; --pg-editor-gutter: #17242a; --pg-editor-gutter-text: #91a2aa; --pg-grid: #26343a; }
html, body { background: var(--pg-bg); color: var(--pg-text); }
body, .lede, .playground-note, .output-placeholder { transition: background-color .18s ease, color .18s ease; }
.playground-main { max-width: 1500px; padding-top: 1.5rem; }
.playground-main .lede, .playground-note, .output-placeholder { color: var(--pg-muted); }
.theme-toggle { margin-left: auto; border: 1px solid var(--pg-border); border-radius: 999px; background: var(--pg-panel); color: var(--pg-text); font: inherit; font-weight: 700; padding: .4rem .75rem; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }
.playground-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.playground-heading h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin-bottom: .1em; }
.playground-heading .lede { margin: .2rem 0; }
.mode-tabs { display: flex; gap: .35rem; padding: .3rem; background: var(--pg-tabs); border-radius: 8px; }
.mode-tab { border: 0; border-radius: 6px; background: transparent; color: var(--pg-muted); font: inherit; font-weight: 750; padding: .6rem .9rem; cursor: pointer; }
.mode-tab[aria-selected="true"] { background: var(--pg-panel); color: var(--accent); box-shadow: 0 1px 4px #0003; }
.playground { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: min(650px, 60vh); max-height: 60vh; min-height: 0; border: 1px solid var(--pg-border); border-radius: 12px; overflow: hidden; background: var(--pg-panel); }
.editor-pane, .output-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; overflow: hidden; }
.editor-pane { border-right: 1px solid var(--pg-border); background: var(--pg-editor); }
.pane-header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .65rem 1rem; background: var(--pg-header); border-bottom: 1px solid var(--pg-border); font-weight: 750; }
.pane-header small { font-weight: 500; color: var(--pg-muted); }
.output-header { gap: .75rem; }
.output-tabs { display: flex; gap: .25rem; margin-left: auto; padding: .2rem; border-radius: 6px; background: var(--pg-tabs); }
.output-tabs[hidden] { display: none; }
.output-tabs button { border: 0; border-radius: 4px; background: transparent; color: var(--pg-muted); font: inherit; font-size: .8rem; font-weight: 750; padding: .3rem .55rem; cursor: pointer; }
.output-tabs button[aria-selected="true"] { background: var(--pg-panel); color: var(--accent); }
.example-picker { display: flex; align-items: center; gap: .5rem; color: var(--pg-muted); font-size: .82rem; font-weight: 650; }
.example-picker select { max-width: 230px; border: 1px solid var(--pg-border); border-radius: 6px; background: var(--pg-panel); color: var(--pg-text); font: inherit; padding: .35rem 1.8rem .35rem .5rem; }
.editor-host { flex: 1; min-height: 0; overflow: hidden; }
.CodeMirror { height: 100%; min-height: 0; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--pg-editor); color: var(--pg-editor-text); }
.CodeMirror-scroll { overflow: scroll !important; }
.CodeMirror-gutters { background: var(--pg-editor-gutter); border-right: 1px solid var(--pg-border); }
.CodeMirror-linenumber { color: var(--pg-editor-gutter-text); }
.CodeMirror-cursor { border-left-color: var(--pg-editor-text); }
.cm-s-railroad .cm-keyword, .cm-s-railroad .cm-atom { color: #b53c20; }
.cm-s-railroad .cm-def, .cm-s-railroad .cm-variable-2 { color: #087b70; }
.cm-s-railroad .cm-string { color: #8a5a00; }
.cm-s-railroad .cm-number { color: #6439a8; }
.cm-s-railroad .cm-comment { color: #65747b; }
[data-theme="dark"] .cm-s-railroad .cm-keyword, [data-theme="dark"] .cm-s-railroad .cm-atom { color: #ff9b7d; }
[data-theme="dark"] .cm-s-railroad .cm-def, [data-theme="dark"] .cm-s-railroad .cm-variable-2 { color: #78d9cd; }
[data-theme="dark"] .cm-s-railroad .cm-string { color: #f1cf78; }
[data-theme="dark"] .cm-s-railroad .cm-number { color: #c9a7ff; }
[data-theme="dark"] .cm-s-railroad .cm-comment { color: #91a2aa; }
.output { position: relative; flex: 1; min-height: 0; display: block; padding: 2rem; overflow: auto; background-color: var(--pg-panel); background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px); background-size: 24px 24px; }
.output svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.output .rrd-diagram { --rrd-stroke: var(--pg-text); --rrd-text: var(--pg-text); --rrd-fill: var(--pg-panel); --rrd-terminal: var(--pg-header); }
.output.atlas-active { padding: 0; background-image: none; }
.rule-atlas { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 100%; color: var(--pg-text); background: var(--pg-bg); }
.rule-atlas aside { position: sticky; top: 0; align-self: start; max-height: 100%; padding: 1rem; overflow: auto; background: var(--pg-header); border-right: 1px solid var(--pg-border); }
.rule-atlas ol { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .8rem; line-height: 1.65; }
.rule-atlas a { color: var(--pg-text); text-decoration-color: var(--pg-muted); }
.atlas-rules { min-width: 0; padding: 1rem; }
.atlas-rule { margin: 0 0 1.5rem; padding: 0 0 1.5rem; border: 0; border-bottom: 1px solid var(--pg-border); border-radius: 0; background: transparent; scroll-margin-top: 1rem; }
.atlas-rule.start-rule { border-bottom-width: 3px; }
.atlas-rule h3 { margin: 0 0 .6rem; font: 750 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.atlas-diagram { overflow: auto; border: 1px solid var(--pg-border); border-radius: 7px; background: var(--pg-panel); }
.atlas-diagram svg { max-width: none; margin: 0; }
.playground-error { align-self: stretch; margin: 0; color: #9c2915; background: #fff0ec; border: 1px solid #efb5a8; border-radius: 7px; padding: 1rem; white-space: pre-wrap; font: 13px/1.5 ui-monospace, SFMono-Regular, monospace; }
.output-placeholder { text-align: center; }
.playground-note { margin: .8rem 0 0; font-size: .9rem; }

@media (max-width: 850px) {
  .playground-heading { align-items: stretch; flex-direction: column; gap: .8rem; }
  .mode-tabs { align-self: flex-start; }
  .pane-header { align-items: flex-start; flex-direction: column; }
  .output-tabs { margin-left: 0; }
  .example-picker, .example-picker select { width: 100%; max-width: none; }
  .playground { grid-template-columns: 1fr; height: auto; max-height: none; min-height: 0; }
  .editor-pane { border-right: 0; border-bottom: 1px solid var(--pg-border); }
  .editor-host, .CodeMirror, .output { height: min(560px, 60vh); max-height: 60vh; min-height: 0; }
  .rule-atlas { grid-template-columns: 1fr; }
  .rule-atlas aside { position: static; border-right: 0; border-bottom: 1px solid var(--pg-border); }
  .rule-atlas ol { columns: 2; }
}