/* console: dense, with input and output panes under a slim bar and monospaced detail. The identity
   makes it dark first by choosing dark page colors. Spacing and the body step tighten for it. For
   developer and data tools. Link after identity.css. */
html[data-layout="console"] {
  --s4: 0.75rem; --s5: 1rem; --s6: 1.25rem; --s7: 2rem; --s8: 3rem;
  --step-0: clamp(0.92rem, 0.9rem + 0.1vw, 1rem);
}
html[data-layout="console"] .site-header .container { min-height: 2.75rem; }
html[data-layout="console"] .brand { font-family: var(--font-mono); font-size: 1rem; }
html[data-layout="console"] .site-header nav a { font-family: var(--font-mono); }
html[data-layout="console"] .hero { padding-block: var(--s4) var(--s3); }
html[data-layout="console"] .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
html[data-layout="console"] .hero-title { font-size: var(--step-2); max-width: none; }
html[data-layout="console"] .promise { max-width: none; font-size: var(--step-0); margin-bottom: var(--s3); }
html[data-layout="console"] .console { display: grid; gap: var(--s3); }
html[data-layout="console"] .pane { min-width: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
html[data-layout="console"] .pane-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line); font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
html[data-layout="console"] .pane-body { margin: 0; padding: var(--s3); overflow: auto; font: 400 0.88rem/1.55 var(--font-mono); white-space: pre; tab-size: 2; }
html[data-layout="console"] .pane-body .ok { color: var(--brand-text); }
html[data-layout="console"] .section { padding-block: var(--s6); }
@media (min-width: 860px) {
  html[data-layout="console"] .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}