/* code panels, 1800 wide. Used by the four "show me the code" visuals.
   Real code from the demo repo, imports stripped, comments rewritten short. */
.canvas.code { width: 1800px; height: 660px; padding: 0 20px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 32px; }
.pane { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-card); background: var(--surface); border: 3px solid var(--muted); padding: 22px 30px 26px; }
.pane.accent { border-color: var(--accent); }
.pane > .eyebrow { margin-bottom: 14px; font-size: 18px; }
.pane > pre { margin: 0; color: #e6edf3; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0; flex: 1; min-height: 0; overflow: hidden; font-family: var(--font-mono); font-size: 22px; line-height: 1.5; color: var(--text); white-space: pre; tab-size: 2; }
.pane.small > pre { font-size: 20px; }
/* GitHub dark palette, so a string, a keyword and a call read apart at a distance */
.tok-k { color: #ff7b72; }
.tok-s { color: #a5d6ff; }
.tok-c { color: #8b949e; font-style: italic; }
.tok-f { color: #d2a8ff; }
.tok-p { color: #c9d1d9; }
.tok-n { color: #79c0ff; }