/* The playground's frame (lenses design §3, layout round 2026-10-05; settings
   design 2026-10-05; workbench design 2026-10-05; screens design 2026-10-06;
   screens round 2 2026-10-06; relief design 2026-10-11): the rail down the
   left, named under each key, and a screen at a time — the editor of sheet and
   right column, the files screen of columns, and the settings screen — with
   the debug bar along the foot, the microscope as a modal, the command
   palette, the harpoon picker, and the settings page. Every color comes from
   the sixteen base16 variables the settings set on the root (settings design
   §5), every size from the text size (§6); the two bundled faces are declared
   here. The frame is an instrument (relief design): the body is the scheme's
   ground, keys are raised from it with a lip below, wells are sunk into it with
   the paper at the bottom, lamps light, readouts show figures, and legends are
   scored across it. The polish round 2 (2026-10-12): the gutter is the paper's,
   the stripes are gone, the surface fills its well, the studio's width is a
   splitter's with a grip in the gap, the keyed labels are larger, and the
   settings have a column of their sections. Polish round 3 (2026-10-24): one
   text scale with a floor at the text size, readable faint and muted tones
   (theme/contrast.ts), named radii and shadows, one focus ring, row actions
   always shown, and the screen titles filling the head. */
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleMono.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleMono-Italic.woff2") format("woff2");
}
/* the studio's name is set in Potta Tidepool: Potta One, a brush face, whose second o in "tidepool" is drawn
   differently; built by ide/scripts/potta-tidepool.py (just wordmark-font) into ide/fonts/potta-tidepool with its license */
@font-face {
  font-family: "Potta Tidepool";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/potta-tidepool/potta-tidepool.woff2") format("woff2");
}
/* Geologica Petri sets words beside the brand face, like "computer" on About: Geologica, cursive and sharp, with clipped tittles on i and j;
   built by ide/scripts/geologica-petri.py (just title-font) into ide/fonts/geologica-petri with its license */
@font-face {
  font-family: "Geologica Petri";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geologica-petri/geologica-petri.woff2") format("woff2");
}
/* the frame's face (relief design §9): Latin and Latin Extended, upright and italic, variable weight */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-Ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-Italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-Italic-Ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* the scheme, Deep Oceanic Next until the settings are applied (settings design §3) */
  --base00: #001c1f; --base01: #002931; --base02: #003640; --base03: #004852;
  --base04: #0093a3; --base05: #d4e1e8; --base06: #e0e9ef; --base07: #f2f7f9;
  --base08: #d3464d; --base09: #e37552; --base0A: #f3b863; --base0B: #63b784;
  --base0C: #4fb7ae; --base0D: #568ccf; --base0E: #8b66d6; --base0F: #d0658e;
  color-scheme: dark;
  /* the scrollbars in the scheme's tones, inherited by every scroller */
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
  /* the frame's palette in the scheme's terms, by the base16 conventions (settings design §5) */
  --paper: var(--base00);
  --ground: var(--base01);
  --line: var(--base02);
  --faint: var(--base03);
  --muted: var(--base04);
  /* the settings write readable faint, muted, and comment tones over these (theme/contrast.ts) */
  --zoa-comment: var(--base03);
  --ink: var(--base05);
  --accent: var(--base0D);
  --warn: var(--base09);
  --good: var(--base0B);
  --bad: var(--base08);
  --blue: var(--accent);
  --amber: var(--warn);
  --green: var(--good);
  --blue-soft: color-mix(in srgb, var(--accent) 14%, var(--paper));
  --amber-soft: color-mix(in srgb, var(--warn) 14%, var(--paper));
  --green-soft: color-mix(in srgb, var(--good) 14%, var(--paper));
  --blue-faint: color-mix(in srgb, var(--accent) 6%, var(--paper));
  --blue-line: color-mix(in srgb, var(--accent) 30%, var(--paper));
  --amber-line: color-mix(in srgb, var(--warn) 30%, var(--paper));
  --green-line: color-mix(in srgb, var(--good) 30%, var(--paper));
  --amber-ink: color-mix(in srgb, var(--warn) 70%, var(--ink));
  --accent-strong: color-mix(in srgb, var(--accent) 85%, var(--ink));
  --on-accent: var(--paper);
  --hover-line: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 15%, transparent);
  --shadow: color-mix(in srgb, var(--base07) 12%, transparent);
  /* the relief (relief design §2): white laid over the body for a lift, black under it for a lip or
     across a well's top for a sink; the strength by the scheme's variant, which color-scheme carries */
  --lift:      light-dark(rgb(255 255 255 / .72), rgb(255 255 255 / .07));
  --lift-edge: light-dark(rgb(255 255 255 / 1),   rgb(255 255 255 / .13));
  --lip:       light-dark(rgb(0 0 0 / .17),       rgb(0 0 0 / .55));
  --fall:      light-dark(rgb(0 0 0 / .10),       rgb(0 0 0 / .45));
  --sink:      light-dark(rgb(0 0 0 / .13),       rgb(0 0 0 / .55));
  --well-edge: light-dark(rgb(0 0 0 / .14),       rgb(0 0 0 / .65));
  --groove:    light-dark(rgb(0 0 0 / .07),       rgb(0 0 0 / .35));
  --led-off:   light-dark(rgb(0 0 0 / .13),       rgb(0 0 0 / .45));
  --key-face: linear-gradient(var(--lift), var(--lift)), var(--ground);
  --key-face-hover: linear-gradient(var(--lift), var(--lift)), linear-gradient(var(--lift), var(--lift)), var(--ground);
  --key-up: inset 0 1px 0 var(--lift-edge), 0 3px 0 var(--lip), 0 6px 8px -3px var(--fall);
  --key-down: inset 0 1px 0 var(--lift-edge), 0 0 0 var(--lip), 0 1px 2px -1px var(--fall);
  --key-up-tiny: inset 0 1px 0 var(--lift-edge), 0 2px 0 var(--lip), 0 3px 5px -2px var(--fall);
  --key-down-tiny: inset 0 1px 0 var(--lift-edge), 0 0 0 var(--lip);
  --well-shadow: inset 0 0 0 1px var(--well-edge), inset 0 4px 8px -2px var(--sink), inset 0 1px 2px var(--sink), inset 0 -1px 0 var(--lift-edge);
  --well-shadow-shallow: inset 0 0 0 1px var(--well-edge), inset 0 2px 4px -1px var(--sink);
  --groove-face: linear-gradient(var(--groove), var(--groove)), var(--ground);
  /* the chassis's texture (texture design), laid over the body's color as its own background-image, so a browser
     that cannot read the image still paints the color; keys and wells stay smooth */
  --chassis-image: none;
  --groove-shadow: inset 0 2px 4px var(--sink), inset 0 -1px 0 var(--lift-edge);
  /* the radii, smallest to largest: a chip, a row, a field or card, a key, a popover, a well, a modal */
  --r-chip: 4px;
  --r-row: 6px;
  --r-field: 9px;
  --key-r: 11px;
  --r-pop: 12px;
  --well-r: 14px;
  --r-modal: 18px;
  /* what floats over the frame: a popover or menu, a modal, and the dimming under a modal */
  --pop-shadow: 0 0 0 1px var(--well-edge), 0 12px 30px -10px rgb(0 0 0 / .5);
  --modal-shadow: 0 0 0 1px var(--well-edge), 0 24px 60px -20px rgb(0 0 0 / .6);
  --backdrop: light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .5));
  /* the rotate knob's cursor (studio round four §5): a curved arrow, black with a white edge, since no browser ships one */
  --zoa-rotate-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='white' stroke-width='5'%3E%3Cpath d='M5 12a7 7 0 0 1 12-5'/%3E%3Cpath d='M17 3v4h-4'/%3E%3Cpath d='M19 12a7 7 0 0 1-12 5'/%3E%3Cpath d='M7 21v-4h4'/%3E%3C/g%3E%3Cg stroke='black' stroke-width='2'%3E%3Cpath d='M5 12a7 7 0 0 1 12-5'/%3E%3Cpath d='M17 3v4h-4'/%3E%3Cpath d='M19 12a7 7 0 0 1-12 5'/%3E%3Cpath d='M7 21v-4h4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
  /* the tools' cursors (studio round five §13): a crosshair with a dot for a mark to be stamped at, and a pen whose tip is the hotspot for a stroke, drawn as the rotate cursor is */
  --zoa-stamp-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='white' stroke-width='5'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/g%3E%3Cg stroke='black' stroke-width='2'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair;
  --zoa-pen-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l2-6L17 3l4 4L9 19z' fill='white' stroke='white' stroke-width='5'/%3E%3Cpath d='M3 21l2-6L17 3l4 4L9 19z' fill='black' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5 15l4 4' stroke='white' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 3 21, crosshair;
  /* the type (settings design §6; relief design §9): the frame's size is the setting, the code's a step above, the line height shared with the margin's rows */
  --zoa-ui-size: 16px;
  --zoa-code-size: calc(var(--zoa-ui-size) + 1.5px);
  /* the frame's text sizes (polish round 3), all from the text size: the floor for labels, captions, and counts;
     the body; a lead for lines meant to be read first; and a panel's title in the brand face */
  --zoa-text-label: 1rem;
  --zoa-text-body: 1.0625rem;
  --zoa-text-lead: 1.1875rem;
  --zoa-text-title: 1.75rem;
  --zoa-line: calc(var(--zoa-code-size) * 1.5);
  --zoa-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --zoa-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zoa-brand: "Potta Tidepool", var(--zoa-sans);
  --zoa-logo: "Potta Tidepool", var(--zoa-brand);
  /* in pixels: the editor, the head, and the rows resolve em differently (workbench design §2) */
  --zoa-band: 360px;
  --zoa-measure: 72ch;
  --zoa-panel: 420px;
  --zoa-head: 86px;
  /** the strip of tabs above the right column's views */
  --zoa-tabs: 44px;
  /** the body showing between wells */
  --zoa-gap: 12px;
}
* { box-sizing: border-box; }
html { font-size: var(--zoa-ui-size); }
html, body, #app { height: 100%; margin: 0; }
body { font: var(--zoa-text-body)/1.45 var(--zoa-sans); color: var(--ink); background: var(--ground); background-image: var(--chassis-image); }
/* the loading screen: the page stays hidden until the brand face is in, so no title shows in a fallback face first;
   the dots only appear if the wait is long enough to notice */
.zoa-loading #app { visibility: hidden; }
.zoa-loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
html:not(.zoa-loading) .zoa-loader { display: none; }
.zoa-loader span { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); opacity: 0; animation: zoa-loader 1.2s ease-in-out .4s infinite; }
.zoa-loader span:nth-child(2) { animation-delay: .55s; }
.zoa-loader span:nth-child(3) { animation-delay: .7s; }
@keyframes zoa-loader { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .zoa-loader span { animation: none; opacity: .5; } }
/* no ligatures anywhere, so `==` and `->` show as the characters typed in whatever mono face is chosen */
body { font-variant-ligatures: none; }
button { font: inherit; }

/* --- icons (icons design §5): Phosphor duotone at 1em in currentColor, so they follow the text size and the scheme; buttons lay out as a row of icon and label --- */
.zoa-icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.zoa-icon-back { opacity: .2; }
[hidden] { display: none !important; }

/* --- keys (relief design §3): a face raised from the body, lit along its top, on a lip; pressing sinks it to the lip --- */
.zoa-button, .zoa-key { border: 0; background: var(--key-face); color: var(--ink); box-shadow: var(--key-up); cursor: pointer; transition: transform .07s ease-out, box-shadow .07s ease-out; }
.zoa-button:hover, .zoa-key:hover { background: var(--key-face-hover); }
.zoa-button:active, .zoa-key:active { transform: translateY(3px); box-shadow: var(--key-down); }
.zoa-button { --pad: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35em; border-radius: var(--key-r); padding: var(--pad) 14px; min-height: 40px; white-space: nowrap; line-height: 1.45; }
/* a key that can't be pressed fades its relief and its print, not its face, so the chassis's texture never shows through a key */
.zoa-button:disabled { cursor: default; }
.zoa-button:disabled:not(.zoa-link) {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  --dim-lift: color-mix(in srgb, var(--lift) 40%, transparent);
  --key-face: linear-gradient(var(--dim-lift), var(--dim-lift)), var(--ground);
  --key-up: inset 0 1px 0 color-mix(in srgb, var(--lift-edge) 40%, transparent), 0 3px 0 color-mix(in srgb, var(--lip) 40%, transparent), 0 6px 8px -3px color-mix(in srgb, var(--fall) 30%, transparent);
  --key-up-tiny: inset 0 1px 0 color-mix(in srgb, var(--lift-edge) 40%, transparent), 0 2px 0 color-mix(in srgb, var(--lip) 40%, transparent), 0 3px 5px -2px color-mix(in srgb, var(--fall) 30%, transparent);
}
.zoa-button:disabled:not(.zoa-link) .zoa-lamp { opacity: .45; }
.zoa-link:disabled { opacity: .45; }
.zoa-button:disabled:active { transform: none; box-shadow: var(--key-up); }
.zoa-button:disabled:hover { background: var(--key-face); }
.zoa-tiny { min-height: 30px; padding-inline: 10px; font-size: var(--zoa-text-label); border-radius: var(--r-row); box-shadow: var(--key-up-tiny); }
.zoa-tiny:active { transform: translateY(2px); box-shadow: var(--key-down-tiny); }
.zoa-tiny:disabled:active { box-shadow: var(--key-up-tiny); }
.zoa-icon-only { padding-inline: 0; width: 40px; }
.zoa-tiny.zoa-icon-only { width: 30px; }
.zoa-round { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
/* the round key that closes a panel, a popover, or a modal: one size wherever it is */
.zoa-round.zoa-close { width: 38px; min-height: 38px; font-size: 1.05rem; }
.zoa-link, .zoa-link:hover, .zoa-link:active { background: none; box-shadow: none; transform: none; color: var(--blue); padding: 0; min-height: 0; border-radius: 0; }
.zoa-link:hover { text-decoration: underline; }
.zoa-mono { font-family: var(--zoa-mono); }
/* the lamp on a key that stays on: a pill near the top edge, lit in the accent while pressed */
.zoa-key-lamp { padding-top: 10px; }
.zoa-lamp { position: absolute; top: 6px; left: 50%; width: 22px; height: 6px; margin-left: -11px; border-radius: 3px; background: var(--led-off); box-shadow: inset 0 1px 1px rgb(0 0 0 / .25); transition: background .12s, box-shadow .12s; }
.zoa-button[aria-pressed="true"] .zoa-lamp { background: var(--accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
/* keyed (relief design §3.1): a key with its name printed on the body under it */
.zoa-keyed { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; white-space: nowrap; font-size: var(--zoa-text-label); letter-spacing: .01em; color: var(--muted); }
.zoa-keyed > .zoa-button { font-size: 1.25rem; width: 60px; min-height: 46px; }
.zoa-keyed > .zoa-round { width: 44px; min-height: 44px; font-size: 1.15rem; }
.zoa-keyed-label { line-height: 1.2; }
.zoa-keyed:has(> [aria-pressed="true"]) { color: var(--ink); }

/* --- tracks (relief design §4): tabs in a groove, the chosen one raised with the keys' own lip --- */
.zoa-tabs { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; padding: 4px 4px 7px; border-radius: calc(var(--key-r) + 3px); background: var(--groove-face); box-shadow: var(--groove-shadow); }
.zoa-tab { display: inline-flex; align-items: center; gap: .35em; border: 0; border-radius: var(--key-r); padding: 0 12px; height: 32px; background: none; color: var(--muted); cursor: pointer; font-size: var(--zoa-text-body); white-space: nowrap; flex: none; }
.zoa-tab:hover { color: var(--ink); }
.zoa-tab[aria-selected="true"] { color: var(--ink); background: var(--key-face); box-shadow: var(--key-up); }
.zoa-tab[aria-selected="true"] > .zoa-icon, .zoa-tab[aria-selected="true"] > .zoa-tab-mark > .zoa-icon { color: var(--accent); }
/* a tab the head's size: the mark above, the name below (polish §6) */
.zoa-tab-tall { flex-direction: column; justify-content: center; gap: 3px; padding: 0 12px; min-width: 68px; height: 52px; font-size: 1.1rem; line-height: 1.1; }
.zoa-tab-tall .zoa-icon { vertical-align: 0; }
.zoa-tab-label { font-size: var(--zoa-text-label); letter-spacing: .01em; display: inline-flex; align-items: center; gap: .3em; }
/* a lamp at a mark's top right corner (relief design §4) */
.zoa-tab-mark { position: relative; display: inline-flex; }
.zoa-tab-mark > .zoa-lamp-dot { position: absolute; top: -3px; right: -6px; width: 7px; height: 7px; }
/* the segmented radio of the settings is a track of row-shaped tabs */
.zoa-segmented { display: inline-flex; gap: 2px; padding: 4px 4px 7px; border-radius: calc(var(--key-r) + 3px); background: var(--groove-face); box-shadow: var(--groove-shadow); justify-self: start; align-self: start; }
.zoa-segment { border: 0; border-radius: var(--key-r); background: none; color: var(--muted); padding: 0 14px; height: 34px; cursor: pointer; font-size: var(--zoa-text-body); }
.zoa-segment:hover { color: var(--ink); }
.zoa-segment-active, .zoa-segment-active:hover { color: var(--ink); background: var(--key-face); box-shadow: var(--key-up); }

/* --- wells (relief design §5): a region sunk into the body, the paper at the bottom, light falling across its top --- */
.zoa-well { position: relative; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-input { border: 0; border-radius: var(--r-field); padding: 7px 10px; font: inherit; background: var(--paper); color: var(--ink); box-shadow: var(--well-shadow-shallow); min-width: 0; }
.zoa-input-live { box-shadow: var(--well-shadow-shallow), 0 0 0 2px var(--blue-line); }
/* focus (polish round 3): one ring for everything a key can reach, set inside a row so it is not clipped by the list; the code and the surface show focus their own way */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.zoa-tree-row, .zoa-quick-row, .zoa-picker-row, .zoa-palette-row, .zoa-stack-frame, .zoa-studio-item, .zoa-studio-pick, .zoa-studio-chip, .zoa-rows-line, .zoa-quick-star):focus-visible { outline-offset: -2px; border-radius: var(--r-row); }
.cm-content:focus-visible, .zoa-columns:focus-visible, .zoa-studio-surface:focus-visible { outline: none; }

/* --- lamps (relief design §6): a round lens, lit in a state's color or dark; the word beside one is print on the body --- */
.zoa-lamp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--led-off); box-shadow: inset 0 1px 1px rgb(0 0 0 / .3); vertical-align: -1px; }
.zoa-lamp-dot[data-lit="accent"] { background: var(--accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 7px color-mix(in srgb, var(--accent) 70%, transparent); }
.zoa-lamp-dot[data-lit="good"] { background: var(--good); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 7px color-mix(in srgb, var(--good) 70%, transparent); }
.zoa-lamp-dot[data-lit="warn"] { background: var(--warn); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 7px color-mix(in srgb, var(--warn) 70%, transparent); }
.zoa-lamp-dot[data-lit="bad"] { background: var(--bad); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 7px color-mix(in srgb, var(--bad) 70%, transparent); }
.zoa-lamped { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); }

/* --- readouts (relief design §7): a window sunk into the body with a figure in it, of a width that keeps; a title's is backlit --- */
.zoa-readout { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 1.6em; min-height: calc(1.5em + 2px); padding: 1px 8px; border-radius: var(--r-row); background: var(--paper); color: var(--ink); font-family: var(--zoa-mono); font-size: var(--zoa-text-label); line-height: 1.5; font-variant-numeric: tabular-nums; box-shadow: var(--well-shadow-shallow); white-space: nowrap; }
.zoa-readout-w5 { min-width: 5.5em; }
.zoa-readout-w7 { min-width: 7em; }
.zoa-readout-lit { font-size: var(--zoa-text-body); padding: 4px 12px; background: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)), var(--paper); box-shadow: var(--well-shadow-shallow), inset 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); }

/* --- legends (relief design §8): a fixed heading, then a groove scored across the body --- */
.zoa-legend, .zoa-settings-head, .zoa-about h2 { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; font-size: var(--zoa-text-body); }
/* the groove itself, scored after a legend or standing alone between a title and its keys */
.zoa-legend::after, .zoa-settings-head::after, .zoa-about h2::after, .zoa-groove { content: ""; flex: 1; height: 3px; border-radius: 2px; background: var(--groove-face); box-shadow: inset 0 1px 1px var(--sink), 0 1px 0 var(--lift-edge); }
.zoa-groove { margin: 0 4px; }

/* --- the page: the rail and the screens (screens design §2) ----------------- */
.zoa-app { display: flex; height: 100%; }
.zoa-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zoa-screens { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.zoa-screens > * { flex: 1; min-height: 0; }
.zoa-rail { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px; }
.zoa-rail .zoa-keyed > .zoa-rail-mode { width: 64px; min-height: 52px; font-size: 1.33rem; }
.zoa-resizing-x, .zoa-resizing-x * { cursor: col-resize !important; user-select: none; }
.zoa-resizing-y, .zoa-resizing-y * { cursor: row-resize !important; user-select: none; }
.zoa-spacer { flex: 1; }
.zoa-problem-strip { flex: none; margin: 8px var(--zoa-gap) 0 0; padding: 6px 14px; border-radius: var(--r-field); background: var(--amber-soft); color: var(--amber-ink); white-space: pre-wrap; }

.zoa-hint { color: var(--muted); margin: 6px 0; }

/* --- the status bar (polish §2): the foot of the page when no session has it, in the debug bar's shape — a lamp and what the page last did on the left, where the cursor is on the right --- */
.zoa-status-bar { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 6px 0 10px 6px; min-height: 48px; min-width: 0; overflow: hidden; container: status / inline-size; }
/* what is open and its saved lamp lead the bar; the path gives way first */
.zoa-status-bar > * { flex: none; align-self: center; }
.zoa-status-bar > .zoa-path { flex: 0 1 auto; min-width: 0; }
.zoa-status-bar > .zoa-studio-status { flex: 0 1 auto; min-width: 0; }
.zoa-status-bar > .zoa-spacer { flex: 1; }
/* a narrow bar, as debug mode or the studio leaves it: the lamp keeps its place and its word goes, so the path keeps its letters */
@container status (max-width: 620px) { .zoa-saved-word { display: none; } .zoa-status-bar { gap: 8px; } }
.zoa-status-say { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: default; white-space: nowrap; }
.zoa-status-say:disabled { opacity: 1; }
.zoa-status-action { cursor: pointer; }
.zoa-status-action:hover { text-decoration: underline; }
.zoa-status-place { display: inline-flex; gap: 6px; white-space: nowrap; }

/* --- the debug bar (lenses design §6; screens round 2 §4): along the foot of the page, spanning everything right of the rail; the transport is round keys, named under --- */
.zoa-strip { display: flex; align-items: flex-end; gap: 8px; padding: 6px 16px 10px 14px; flex: none; }
.zoa-strip > .zoa-icon-only { margin-bottom: 20px; }
.zoa-slider-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 120px; margin: 0 12px 22px; }
.zoa-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 10px; margin: 0; border-radius: 5px; background: var(--groove-face); box-shadow: inset 0 2px 3px var(--sink), inset 0 -1px 0 var(--lift-edge); }
.zoa-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--key-face); box-shadow: var(--key-up-tiny); cursor: grab; }
.zoa-slider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--key-face); box-shadow: var(--key-up-tiny); cursor: grab; }
.zoa-slider:disabled { opacity: .5; }
.zoa-end { white-space: nowrap; }
.zoa-where { margin-bottom: 20px; }

/* --- the editor screen: the sheet and the output column (screens design §2.1), two wells with the body between --- */
.zoa-frame { display: grid; grid-template-columns: minmax(0, 1fr) var(--zoa-panel); grid-template-rows: minmax(0, 1fr) auto; gap: 0 var(--zoa-gap); padding-right: var(--zoa-gap); min-height: 0; }
/* each region names its cell, so a hidden one does not shift the other into its place; the status bar is the second row of the code's column */
.zoa-sheet { grid-column: 1; grid-row: 1; }
.zoa-panel { grid-column: 2; grid-row: 1; }
.zoa-frame-panel-collapsed { grid-template-columns: minmax(0, 1fr) 30px; }
/* the surface's column is never narrower than its row of tools with the widest tool open, so opening one never moves the surface (layout round);
   on a narrow window the floor gives way before the code's 360px does (polish round 3) */
.zoa-frame { --zoa-studio-floor: 700px; }
/* the studio screen (polish round 2 §5): the surface as wide as the code until a drag sets it, and the code keeps 360px at the least; the surface on the left, the code on the right */
.zoa-frame.zoa-frame-studio { grid-template-columns: max(min(var(--zoa-studio-floor), calc(100% - 360px - var(--zoa-gap))), min(var(--zoa-studio, calc(50% - var(--zoa-gap) / 2)), calc(100% - 360px))) minmax(0, 1fr); }
.zoa-frame-studio > .zoa-sheet, .zoa-frame-studio > .zoa-status-bar { grid-column: 2; }
/* the surface's column runs to the window's foot; the status bar is the code's alone */
.zoa-frame-studio > .zoa-studio { grid-row: 1 / -1; }
@media (max-width: 900px) {
  .zoa-frame, .zoa-frame-panel-collapsed, .zoa-frame.zoa-frame-studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 40% auto; }
  .zoa-frame-panel-collapsed { grid-template-rows: minmax(0, 1fr) 30px auto; }
  .zoa-panel, .zoa-studio { grid-column: 1; grid-row: 2; }
  .zoa-status-bar { grid-row: 3; }
  .zoa-frame-studio > .zoa-sheet, .zoa-frame-studio > .zoa-status-bar { grid-column: 1; }
}
.zoa-splitter { position: absolute; z-index: 5; }
.zoa-splitter:hover { background: var(--accent-wash); }
/* a splitter in the gap between two wells carries a grip (polish round 2 §5): a short ridge in the body's groove, lit in the accent under the pointer */
.zoa-splitter-grip { left: calc(-1 * var(--zoa-gap)); width: var(--zoa-gap); top: var(--zoa-head); bottom: 0; cursor: col-resize; border-radius: 3px; }
.zoa-splitter-grip::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 2px; background: var(--groove-face); box-shadow: inset 0 1px 2px var(--sink), 0 1px 0 var(--lift-edge); transition: background .12s, box-shadow .12s; }
.zoa-splitter-grip:hover::before { background: var(--accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
/* the studio's grip sits in the gap on its right, toward the code */
.zoa-splitter-grip.zoa-studio-splitter { left: auto; right: calc(-1 * var(--zoa-gap)); }

.zoa-sheet { display: grid; grid-template-rows: var(--zoa-head) minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; }
/* the head shares the editor's columns: the code, then the band, with the scrollbar's gutter reserved on both (workbench design §3) */
.zoa-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--zoa-band); align-items: stretch; overflow: hidden; scrollbar-gutter: stable; }
.zoa-head-left { display: flex; align-items: flex-end; gap: 12px; padding: 8px 2px 6px 6px; min-width: 0; overflow: hidden; container: head / inline-size; }
/* a narrow head, as debug mode leaves it: the lamp keeps its place and its word goes, so the path keeps its letters */
@container head (max-width: 620px) { .zoa-head-left { gap: 8px; } }
/* the toolbar's keys, named under their marks (screens round 2 §4; relief design §10) */
.zoa-head-actions, .zoa-settings-actions { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.zoa-path { align-self: center; min-width: 9ch; max-width: 100%; overflow: hidden; flex: 0 1 auto; }
.zoa-path .zoa-breadcrumb-path { max-width: 100%; }
.zoa-breadcrumb-path { display: inline-flex; align-items: baseline; min-width: 0; overflow: hidden; }
.zoa-breadcrumb-dir, .zoa-breadcrumb-sep { color: var(--muted); }
.zoa-breadcrumb-sep { padding: 0 3px; }
.zoa-breadcrumb-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-breadcrumb-dir { white-space: nowrap; }
.zoa-breadcrumb-project { flex: none; color: var(--muted); white-space: nowrap; }
.zoa-breadcrumb-project .zoa-breadcrumb-sep { padding: 0 6px; }
/* Draw's title, its canvas's name, read from the last run */
.zoa-path-draw { display: inline-flex; align-items: center; }
.zoa-path-draw .zoa-breadcrumb-name { padding: 0 2px; }
.zoa-crumb { flex: none; align-self: center; margin-bottom: 14px; }
.zoa-sheet-band { display: flex; align-items: center; min-width: 0; padding: 0 4px 0 12px; }
.zoa-band-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-has-problems { color: var(--amber-ink); }
.zoa-sheet-body { position: relative; min-height: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-band-splitter { top: 0; bottom: 0; width: 7px; right: calc(var(--zoa-band) + var(--zoa-scrollbar, 0px) - 3px); cursor: col-resize; }
/* the margin collapsed: no band, no rows, no rule (workbench design §2) */
.zoa-sheet-margin-closed { --zoa-band: 0px !important; }
.zoa-sheet-margin-closed .zoa-sheet-head { grid-template-columns: minmax(0, 1fr); }
.zoa-sheet-margin-closed .zoa-margin-layer, .zoa-sheet-margin-closed .zoa-rule, .zoa-sheet-margin-closed .zoa-flow-path { display: none; }
.zoa-editor, .zoa-microscope { height: 100%; min-height: 0; }
.zoa-editor .cm-editor { height: 100%; }

/* --- the margin (lenses design §4) ------------------------------------------- */
.zoa-margin-layer { pointer-events: auto; }
.zoa-margin-row { position: absolute; width: calc(var(--zoa-band) - 16px); display: flex; align-items: flex-start; gap: 6px; font-size: var(--zoa-code-size); line-height: var(--zoa-line); color: var(--muted); }
/* the guides under the text (layout round): the rule at the band's edge, the hovered line, the current line */
.zoa-guide-layer > * { position: absolute; pointer-events: none; }
.zoa-rule { background: var(--line); }
.zoa-line-hover { background: var(--hover-line); }
.zoa-line-current { background: var(--blue-soft); opacity: .75; }
.zoa-line-stopped { background: var(--amber-soft); }
.zoa-row-current { display: inline-flex; align-items: center; gap: .3em; color: var(--blue); font-size: var(--zoa-text-label); white-space: nowrap; }
.zoa-row-stopped { color: var(--amber); }
.zoa-margin-row > * { max-width: 100%; }
/* the lens in the code (screens design §5): past the text, dim until the line is hovered */
.zoa-lens { display: inline-flex; align-items: center; justify-content: center; height: var(--zoa-line); margin-left: 1.5ch; padding: 0 3px; border: 0; background: none; color: var(--muted); cursor: pointer; opacity: .7; font-size: 1.15em; vertical-align: top; }
.cm-line:hover .zoa-lens, .cm-activeLine .zoa-lens, .zoa-lens:focus-visible { opacity: 1; color: var(--accent); }
.zoa-lens:hover { opacity: 1; color: var(--accent); background: var(--accent-wash); border-radius: var(--r-chip); }
.zoa-lens .zoa-icon { vertical-align: 0; }
/* Peek (peek design §4, §5): an eye after a name the code can look inside, as tall as the line, in the comments' tone, the accent while its popover is open */
.zoa-eye { display: inline-flex; align-items: center; justify-content: center; height: var(--zoa-line); min-width: 1.2em; margin: 0 1px; padding: 0 1px; border: 0; background: none; color: var(--zoa-comment); cursor: pointer; font-size: 1em; vertical-align: top; border-radius: var(--r-chip); }
.zoa-eye .zoa-icon { width: 1em; height: 1em; vertical-align: 0; }
.zoa-eye:hover, .zoa-eye[aria-expanded="true"] { color: var(--accent); }
.zoa-eye[aria-expanded="true"] { background: var(--accent-wash); }
.zoa-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.zoa-eye-card { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 8px; max-height: min(30rem, 72vh); padding: 12px 14px; background: var(--ground); color: var(--ink); border-radius: var(--r-pop); box-shadow: var(--pop-shadow); outline: none; }
.zoa-eye-card-head { display: flex; align-items: center; gap: 4px 12px; }
.zoa-eye-card-name { font-size: var(--zoa-code-size); font-weight: 600; }
.zoa-eye-card-from { color: var(--muted); }
.zoa-eye-card-body { display: flex; gap: 10px; min-height: 0; flex: 1 1 auto; }
.zoa-eye-card-picture { flex: none; align-self: flex-start; display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: var(--well-r); background: white; box-shadow: var(--well-shadow); }
.zoa-eye-card-stamp { width: 88%; height: 88%; }
.zoa-eye-card-code { flex: 1 1 auto; min-width: 0; min-height: 3em; max-height: 20rem; overflow: auto; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
.zoa-eye-card-code .cm-editor { height: auto; }
.zoa-eye-card-code .cm-scroller { overflow: visible; }
.zoa-eye-card-methods { margin: 0; color: var(--muted); }
.zoa-eye-card-methods .zoa-mono { color: var(--ink); }
/* a value's type below it (peek design §5): a quieter heading, and its code kept short */
.zoa-eye-card { overflow-y: auto; }
.zoa-eye-card-type { display: flex; flex-direction: column; gap: 6px; }
.zoa-eye-card-type-head { margin: 0; color: var(--muted); }
.zoa-eye-card-type-name { color: var(--ink); font-weight: 600; }
.zoa-eye-card-type-code { flex: none; max-height: 12rem; }
.zoa-eye-card-foot { display: flex; justify-content: flex-end; }
.zoa-library-backdrop { z-index: 30; }
.zoa-library-dialog { width: min(980px, 92vw); height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--ground); background-image: var(--chassis-image); border-radius: var(--r-modal); box-shadow: var(--modal-shadow); overflow: hidden; }
.zoa-library-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 20px 12px; }
.zoa-library-title { margin: 0; font-size: 1.75rem; font-weight: normal; }
.zoa-library-hint { margin: 0; }
.zoa-library-code { position: relative; flex: 1; min-height: 0; margin: 0 20px 20px; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-library-code .cm-editor { height: 100%; }
.zoa-row-note { font-family: var(--zoa-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-row-label { color: var(--faint); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-row-problem { color: var(--amber-ink); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; background: var(--amber-soft); border-radius: var(--r-chip); padding: 0 6px; min-width: 0; }
.zoa-row-problem .zoa-row-message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zoa-row-problem:hover .zoa-row-message { white-space: normal; }
.zoa-row-value { display: flex; gap: 6px; align-items: baseline; font-family: var(--zoa-mono); color: var(--ink); white-space: nowrap; overflow: hidden; }
.zoa-value-text { overflow: hidden; text-overflow: ellipsis; }
.zoa-value-count { color: var(--faint); font-size: var(--zoa-text-label); }
.zoa-row-hint { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
/* one line of chips; hovering opens the row to show them all */
.zoa-row-finished { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; overflow: hidden; max-width: 100%; height: var(--zoa-line); }
.zoa-row-finished:hover { flex-wrap: wrap; height: auto; overflow: visible; position: relative; z-index: 4; background: var(--paper); box-shadow: var(--pop-shadow); border-radius: var(--r-chip); padding: 2px; }
.zoa-chip-expr { color: var(--muted); }
.zoa-chip-arrow { color: var(--faint); }
.zoa-row-calling { font-size: var(--zoa-text-label); }
.zoa-row-stop { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; color: var(--amber-ink); background: var(--amber-soft); border-radius: var(--r-chip); padding: 0 6px; }
.zoa-row-stop .zoa-row-message { white-space: pre-wrap; }

/* --- the microscope: a large modal over the program (screens design §4), a body of its own with the editor in a well --- */
.zoa-modal-backdrop { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: var(--backdrop); }
.zoa-microscope-dialog { position: relative; width: min(1100px, 92vw); height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--ground); background-image: var(--chassis-image); border-radius: var(--r-modal); box-shadow: var(--modal-shadow); overflow: hidden; }
.zoa-microscope-head { flex: none; padding: 12px 16px 10px; }
.zoa-microscope-title { display: flex; align-items: center; gap: 10px; }
.zoa-microscope-title .zoa-definition-name { flex: 1; min-width: 0; margin: 0; }
.zoa-microscope-close { flex: none; }
.zoa-microscope-editor { flex: 1; min-height: 0; margin: 0 16px; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-microscope-editor .cm-editor { height: 100%; }
.zoa-microscope .zoa-result { flex: none; padding: 10px 16px 14px; max-height: 36vh; overflow: auto; }
.zoa-microscope .zoa-result:empty { display: none; }
.zoa-definition-name { margin: 0 0 8px; font-size: var(--zoa-text-lead); font-family: var(--zoa-mono); }
.zoa-scheme { color: var(--muted); font-weight: normal; font-family: var(--zoa-mono); font-size: var(--zoa-text-body); }
.zoa-form { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 6px 0; }
.zoa-field { display: grid; gap: 4px; }
.zoa-field-name { font-family: var(--zoa-mono); }
.zoa-field-type { color: var(--muted); font-size: var(--zoa-text-label); }
.zoa-input-group { display: flex; gap: 6px; }
.zoa-input-number { width: 120px; }
.zoa-input-unit { width: 110px; }
.zoa-input-many { display: grid; gap: 4px; }
.zoa-input-item { display: flex; gap: 6px; align-items: center; }
.zoa-input-note { color: var(--muted); font-style: italic; }
.zoa-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.zoa-actions .zoa-button { padding-inline: 18px; }
.zoa-result { margin: 0; }
.zoa-answer { font-family: var(--zoa-mono); font-size: var(--zoa-code-size); padding: 8px 10px; background: var(--green-soft); border-left: 3px solid var(--green); border-radius: var(--r-chip); white-space: pre-wrap; }
.zoa-stop { padding: 8px 10px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: var(--r-chip); white-space: pre-wrap; }
.zoa-problem { padding: 8px 10px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: var(--r-chip); white-space: pre-wrap; font-family: inherit; margin: 0; }

/* --- the right column: the session pane and the output pane (lenses design §9, layout round) --- */
.zoa-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
.zoa-panel-session { grid-template-rows: minmax(80px, var(--zoa-session, 40%)) 7px minmax(0, 1fr); }
.zoa-session, .zoa-hsplitter { display: none; }
.zoa-panel-session .zoa-session { display: block; overflow: auto; padding: 10px 12px; margin-top: var(--zoa-gap); min-height: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
.zoa-panel-session .zoa-hsplitter { display: block; cursor: row-resize; z-index: 5; }
.zoa-hsplitter:hover { background: var(--accent-wash); }
.zoa-session-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.zoa-session-state { color: var(--blue); font-weight: 600; }
.zoa-session-unclear { color: var(--amber); }
.zoa-session-line { color: var(--muted); font-size: var(--zoa-text-label); font-family: var(--zoa-mono); }
.zoa-session-message { margin: 0 0 8px; padding: 6px 8px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: var(--r-chip); color: var(--amber-ink); white-space: pre-wrap; }
.zoa-stack { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.zoa-stack-frame { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 1px 6px; border-radius: var(--r-chip); font-family: var(--zoa-mono); font-size: var(--zoa-text-label); text-align: left; width: 100%; }
.zoa-stack-frame:hover { background: var(--ground); color: var(--ink); }
.zoa-stack-selected { color: var(--ink); background: var(--ground); box-shadow: inset 2px 0 0 var(--blue); }
.zoa-stack-line { color: var(--faint); }
.zoa-scope { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-family: var(--zoa-mono); font-size: var(--zoa-text-label); }
.zoa-scope-item { display: contents; }
.zoa-scope dt { color: var(--muted); }
.zoa-scope dd { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.zoa-views { display: grid; grid-template-rows: var(--zoa-head) minmax(0, 1fr); min-height: 0; min-width: 0; }
.zoa-views-head { display: flex; align-items: flex-end; padding: 8px 0 6px; min-width: 0; overflow: hidden; }
.zoa-view-tabs { flex: none; max-width: 100%; }
.zoa-views-body { min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.zoa-views-body > * { grid-area: 1 / 1; min-height: 0; min-width: 0; }
.zoa-output { display: grid; grid-template-rows: var(--zoa-tabs) minmax(0, 1fr); gap: 8px; min-height: 0; min-width: 0; }
/* the rows of a view, each beside the line it is about (screens round 2 §3; polish §1), in a well */
.zoa-rows { overflow: auto; position: relative; padding: 0 12px; font-size: var(--zoa-code-size); border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
.zoa-rows-canvas { display: flex; flex-direction: column; gap: 3px; padding: 8px 0 20px; }
.zoa-rows-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
/* while the column follows the code, every block is placed at its own line's top */
.zoa-rows-aligned { overflow: hidden; }
.zoa-rows-aligned .zoa-rows-canvas { display: block; padding: 0; position: relative; will-change: transform; }
.zoa-rows-aligned .zoa-rows-item { position: absolute; left: 0; right: 0; }
.zoa-rows .zoa-hint { padding: 8px 0; }
.zoa-rows-line { flex: none; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 2px; min-width: 2.2em; text-align: right; font-size: var(--zoa-text-label); line-height: var(--zoa-line); border-radius: var(--r-chip); }
.zoa-rows-line:hover { color: var(--blue); background: var(--ground); }
/* the code's own line height, so one row is exactly one line tall and the next falls on the next line (polish §1) */
.zoa-rows-body { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--muted); line-height: var(--zoa-line); }
.zoa-rows .zoa-row-finished, .zoa-rows .zoa-row-value, .zoa-rows .zoa-row-note, .zoa-rows .zoa-row-label { white-space: normal; height: auto; flex-wrap: wrap; overflow: visible; }
.zoa-rows .zoa-row-problem .zoa-row-message { white-space: normal; }
.zoa-rows .zoa-flow { height: var(--zoa-line); }
.zoa-panel-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.zoa-panel-head .zoa-tabs { flex: none; max-width: 100%; }
.zoa-tabs:empty { display: none; }
.zoa-fresh { margin-left: .2em; }
.zoa-panel-body { overflow: auto; padding: 10px 12px; min-height: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
.zoa-rail-button { display: none; }
.zoa-panel-collapsed { grid-template-rows: minmax(0, 1fr); }
.zoa-panel-collapsed .zoa-session, .zoa-panel-collapsed .zoa-hsplitter, .zoa-panel-collapsed .zoa-views { display: none; }
.zoa-panel-collapsed .zoa-rail-button { display: inline-flex; align-items: center; gap: .35em; border: 0; background: none; color: var(--muted); cursor: pointer; writing-mode: vertical-rl; padding: 12px 4px; border-radius: var(--r-field); margin-top: var(--zoa-head); }
.zoa-panel-collapsed .zoa-rail-button:hover { color: var(--ink); background: var(--accent-wash); }
.zoa-diary { margin: 0; padding: 4px 2px; font-family: var(--zoa-mono); white-space: pre-wrap; }
.zoa-entity { border-collapse: collapse; margin: 0 0 8px; font-family: var(--zoa-mono); }
.zoa-entity th { text-align: left; font-weight: normal; color: var(--muted); padding: 2px 10px 2px 0; }
.zoa-entity td { padding: 2px 0; }
/* the learner's own page keeps its own colors (settings design §5) */
.zoa-page { width: 100%; height: 100%; min-height: 24em; border: 0; border-radius: var(--r-field); background: white; box-shadow: inset 0 0 0 1px var(--well-edge); }
.zoa-canvas { display: block; max-width: 100%; max-height: 100%; margin: auto; border-radius: var(--r-field); background: white; box-shadow: 0 0 0 1px var(--well-edge); }

/* --- the files screen (workbench design §4; screens design §2.2; screens round 2 §5) --------------------- */
.zoa-explorer { display: flex; flex-direction: column; min-height: 0; padding-right: var(--zoa-gap); }
/* the head is the sheet head's twin: the tabs that choose what is listed, then the keys (polish §4) */
.zoa-explorer-head { display: flex; align-items: flex-end; gap: 10px; height: var(--zoa-head); flex: none; padding: 8px 2px 6px 6px; }
.zoa-files-tabs { flex: none; }
/* the projects at the left, in a well of their own; the project's columns or lists beside them */
.zoa-explorer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 var(--zoa-gap); }
.zoa-explorer-body > * { grid-area: 1 / 2; min-height: 0; min-width: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
.zoa-explorer-body > .zoa-projects { grid-area: 1 / 1; display: flex; flex-direction: column; overflow-y: auto; padding: 12px 6px 14px; }
.zoa-projects-head { padding: 0 8px 8px; }
.zoa-projects-head .zoa-legend { font-size: var(--zoa-text-label); color: var(--muted); }
.zoa-projects-list { display: flex; flex-direction: column; gap: 1px; }
.zoa-project-row > .zoa-icon { color: var(--amber-ink); }
.zoa-project-row.zoa-tree-editing { flex-wrap: wrap; white-space: normal; padding-right: 8px; gap: 6px; }
.zoa-project-ask-keys { display: inline-flex; gap: 6px; }
/* each area a folder row, its projects under it (modes design §6) */
.zoa-area { border-radius: var(--r-row); }
.zoa-area-row > .zoa-icon { color: var(--muted); }
.zoa-area-row .zoa-tree-name { color: var(--muted); }
.zoa-area-projects { display: flex; flex-direction: column; gap: 1px; padding-left: 18px; }
/* the settings' row stands with the areas, its name under theirs: the caret's room left empty */
.zoa-tree-row.zoa-settings-project { padding-left: calc(8px + 1.2em + 5px); }
.zoa-area.zoa-drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
.zoa-projects-note { margin: auto 8px 0; padding-top: 16px; color: var(--muted); font-size: var(--zoa-text-label); font-style: italic; }
@media (max-width: 700px) { .zoa-explorer-body { grid-template-columns: 11rem minmax(0, 1fr); } }
/* the columns of folders, in the manner of a Finder column view (screens round 2 §5) */
.zoa-explorer-columns { overflow: hidden; }
.zoa-columns { display: flex; align-items: stretch; height: 100%; overflow-x: auto; outline: none; }
.zoa-column { flex: none; width: 16rem; min-width: 0; overflow-y: auto; padding: 10px 6px 20px; border-right: 1px solid var(--well-edge); }
.zoa-column:last-child { flex: 1; }
.zoa-tree-into { display: inline-flex; color: var(--faint); font-size: .8em; flex: none; }
.zoa-tree-row.zoa-open { background: var(--ground); }
.zoa-tree-row.zoa-open .zoa-tree-name { color: var(--ink); }
.zoa-explorer-picks { overflow: auto; }
.zoa-explorer-picks.zoa-quick { max-width: 44rem; padding: 14px 14px; }
/* quick access, as the files screen's own list (round 2 §5) */
.zoa-quick { padding: 6px 8px; }
.zoa-quick-item { display: flex; align-items: center; border-radius: var(--r-row); }
.zoa-quick-item:hover { background: var(--ground); }
.zoa-quick-row { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); padding: 2px 4px 2px 10px; min-height: 36px; font-size: var(--zoa-code-size); cursor: pointer; text-align: left; white-space: nowrap; border-radius: var(--r-row); }
.zoa-quick-row.zoa-current { background: var(--blue-soft); }
.zoa-quick-row.zoa-current .zoa-quick-name { color: var(--blue); }
.zoa-quick-row > .zoa-icon { color: var(--muted); flex: none; }
.zoa-quick-name { overflow: hidden; text-overflow: ellipsis; }
.zoa-quick-dir { color: var(--faint); font-size: var(--zoa-text-label); overflow: hidden; text-overflow: ellipsis; flex: 1; }
.zoa-quick-star { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border: 0; background: none; color: var(--muted); padding: 0; cursor: pointer; border-radius: var(--r-row); }
.zoa-quick-star.zoa-starred { color: var(--amber-ink); }
.zoa-quick-star:not(.zoa-starred) .zoa-icon-back { display: none; }
.zoa-quick-star:hover { color: var(--ink); background: var(--line); }
.zoa-quick-empty { margin: 2px 10px 4px; color: var(--muted); }
.zoa-files-actions { display: inline-flex; align-items: flex-end; gap: 10px; flex: none; }
.zoa-tree-row { display: flex; align-items: center; gap: 5px; padding: 2px 6px 2px 8px; border-radius: var(--r-row); min-height: 36px; font-size: var(--zoa-code-size); cursor: pointer; color: var(--ink); white-space: nowrap; position: relative; }
.zoa-tree-row:hover { background: var(--ground); }
.zoa-tree-row.zoa-current { background: var(--blue-soft); }
.zoa-tree-row.zoa-current .zoa-tree-name { color: var(--blue); }
.zoa-tree-row > .zoa-icon { color: var(--muted); flex: none; }
.zoa-tree-dir > .zoa-icon { color: var(--amber-ink); }
.zoa-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zoa-tree-dir .zoa-tree-name { font-weight: 500; }
.zoa-tree-ask { color: var(--muted); }
.zoa-tree-danger { color: var(--amber); }
.zoa-tree-edit { flex: 1; padding-block: 1px; min-width: 0; }
.zoa-tree-editing { cursor: default; }
.zoa-tree-problem { margin: 2px 6px 4px 8px; color: var(--amber-ink); font-size: var(--zoa-text-label); white-space: normal; }
.zoa-tree-tag { font-size: var(--zoa-text-label); color: var(--faint); font-style: italic; }
/* a row's actions (screens design §2.2; polish round 3): always shown at the row's end, flat and muted on the paper, raised into keys under the pointer */
.zoa-row-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.zoa-row-actions > .zoa-button { font-size: 1rem; background: none; box-shadow: none; color: var(--muted); }
.zoa-row-actions > .zoa-button:hover { background: var(--key-face); box-shadow: var(--key-up-tiny); color: var(--ink); }
.zoa-row-star.zoa-starred { color: var(--amber-ink); }
.zoa-row-star:not(.zoa-starred) .zoa-icon-back { display: none; }
.zoa-row-delete:hover { color: var(--amber); }
.zoa-tree-out .zoa-tree-name, .zoa-tree-out > .zoa-icon { color: var(--faint); }
.zoa-tree-empty { padding: 4px 10px; }

/* --- the command palette (workbench design §5.3): a body of its own with the input in a well ------------- */
.zoa-palette-backdrop { position: fixed; inset: 0; z-index: 30; background: var(--backdrop); }
.zoa-palette { position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--ground); background-image: var(--chassis-image); border-radius: var(--r-modal); box-shadow: var(--modal-shadow); overflow: hidden; }
.zoa-palette-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 0 18px; }
.zoa-palette-head .zoa-legend { flex: 1; min-width: 0; font-family: var(--zoa-brand); font-size: var(--zoa-text-title); font-weight: 400; text-transform: lowercase; }
.zoa-palette-close { flex: none; }
.zoa-palette-input { margin: 12px 18px; font-size: var(--zoa-text-lead); padding: 9px 12px; }
.zoa-palette-list { overflow: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 1px; }
.zoa-palette-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-field); cursor: pointer; min-height: 38px; }
.zoa-palette-row[aria-selected="true"] { background: var(--key-face); box-shadow: var(--key-up-tiny); }
.zoa-palette-category { font-size: var(--zoa-text-label); color: var(--muted); width: 5.5em; flex: none; }
.zoa-palette-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoa-palette-hit { background: none; color: var(--blue); font-weight: 600; }
.zoa-palette-keys { color: var(--muted); font-size: var(--zoa-text-label); font-family: var(--zoa-mono); white-space: nowrap; }
.zoa-palette-empty { padding: 8px 22px 18px; color: var(--muted); }

.zoa-stage-holder { position: fixed; width: 0; height: 0; overflow: hidden; }
.zoa-stage { border: 0; width: 0; height: 0; }

/* --- the settings screen (screens design §2.4), and the settings page (settings design §7) ----------- */
.zoa-settings-screen { overflow: auto; }
.zoa-settings-body { overflow: auto; }
/* the page (polish round 2 §7): a track of the sections' tabs across the top, as tall as the heads, and the section chosen under it, at the left */
.zoa-settings-page { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 16px 24px 6px; }
/* the tabs and the history's keys share a row the heads' height, the keys at the right */
.zoa-settings-top { display: flex; align-items: flex-end; gap: 10px; width: 100%; min-height: var(--zoa-head); padding: 8px 0 6px; }
.zoa-settings-body .zoa-settings-top { padding-right: 2px; }
.zoa-settings-tabs { flex: none; }
.zoa-settings { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.zoa-settings-section { max-width: 720px; }
.zoa-settings-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* the colors, and the text, beside a preview of code in the scheme and the font (polish round 2 §17, §18): the fields' column, then a well the rest of the way */
.zoa-settings-section[data-section="colors"], .zoa-settings-section[data-section="text"] { max-width: none; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-auto-rows: minmax(480px, auto); gap: 0 20px; align-items: stretch; padding-right: var(--zoa-gap); }
/* the well is as tall as the fields beside it, never taller: the editor is laid over it and scrolls inside */
.zoa-settings-preview { position: relative; min-height: 0; min-width: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-settings-preview-layer { position: absolute; inset: 0; }
.zoa-settings-preview .cm-editor { height: 100%; }
@media (max-width: 1000px) {
  .zoa-settings-section[data-section="colors"], .zoa-settings-section[data-section="text"] { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
  .zoa-settings-preview { min-height: 320px; }
}
.zoa-settings-head { padding: 2px 0 0; }
/* a field is a fieldset, so the code shuts every control in it at once (settings code design §8) */
.zoa-settings-field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.zoa-settings-field:disabled { opacity: 0.6; }
.zoa-settings-problem { color: var(--bad); }
/* the Code tab: the note, then the settings file in a well the rest of the way down */
.zoa-settings-section.zoa-settings-code { max-width: none; width: 100%; display: flex; flex-direction: column; gap: 10px; padding-right: var(--zoa-gap); }
.zoa-settings-code-well { min-height: 560px; }
.zoa-settings-label { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.zoa-settings-label .zoa-link { font-weight: normal; font-size: var(--zoa-text-label); }
.zoa-settings-lamped { color: inherit; }
.zoa-theme-now { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 14px; border-radius: var(--r-field); background: var(--paper); box-shadow: var(--well-shadow-shallow); }
.zoa-theme-now-name { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zoa-theme-now-note { color: var(--muted); font-style: italic; font-size: var(--zoa-text-label); }
.zoa-settings-note { color: var(--muted); font-size: var(--zoa-text-label); font-style: italic; }
.zoa-picker-filter { width: 100%; }
.zoa-picker-list { border-radius: var(--r-field); max-height: calc(7 * 2rem); overflow: auto; display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--well-shadow-shallow); }
.zoa-picker-row { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0 8px; height: 2rem; text-align: left; white-space: nowrap; flex: none; }
.zoa-picker-row:hover { background: var(--ground); }
.zoa-picker-current, .zoa-picker-current:hover { background: var(--blue-soft); box-shadow: inset 2px 0 0 var(--accent); }
.zoa-picker-name { overflow: hidden; text-overflow: ellipsis; }
.zoa-swatches { display: inline-flex; gap: 1px; border-radius: var(--r-chip); overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--well-edge); }
.zoa-swatches i { display: block; width: .8rem; height: .9rem; }
.zoa-stepper { display: inline-flex; align-items: center; gap: 6px; }
.zoa-size-value { min-width: 4.5em; min-height: 40px; justify-content: center; font-size: var(--zoa-text-body); }
/* the font picker (polish round 2 §18): the family in use in a well, then the rows, each set in its own face */
.zoa-font-now-row { display: flex; gap: 8px; align-items: stretch; }
.zoa-font-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-field); background: var(--paper); box-shadow: var(--well-shadow-shallow); }
.zoa-font-now-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: var(--zoa-code-size); }
.zoa-font-name { flex: 1; font-size: var(--zoa-code-size); }
.zoa-font-tag { color: var(--muted); font-style: italic; font-size: var(--zoa-text-label); white-space: nowrap; }
.zoa-font-picker .zoa-picker-list { max-height: calc(14 * 2.2rem); }
.zoa-font-picker .zoa-picker-row { height: 2.2rem; }
.zoa-font-step { width: 44px; }

/* --- pictures of values (pictures design §4, §5.2) ------------------------------------- */
.zoa-pic-row { display: inline-flex; gap: 5px; align-items: center; min-width: 0; max-width: 100%; }
.zoa-pic-row > .zoa-pic-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoa-pic-muted { color: var(--muted); }
.zoa-pic-chip { border-radius: var(--r-chip); padding: 0 5px; font-size: var(--zoa-text-label); color: var(--muted); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--well-edge); }
.zoa-swatch { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: 0 0 0 1px var(--well-edge); flex: none; vertical-align: -0.15em; }
.zoa-glyph-swatch { width: 1.2em; height: 1.2em; }
.zoa-glyph, .zoa-dial, .zoa-dot { display: inline-block; flex: none; vertical-align: -0.2em; overflow: visible; }
.zoa-thumb { display: inline-block; height: 1.2em; width: 1.2em; object-fit: contain; border-radius: var(--r-chip); background: white; box-shadow: 0 0 0 1px var(--well-edge); flex: none; vertical-align: -0.3em; }
.zoa-thumb-large { width: 100%; height: auto; max-height: 40vh; display: block; }
.zoa-pill { display: inline-flex; gap: 5px; align-items: center; border-radius: 999px; padding: 0 8px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--well-edge); white-space: nowrap; }
.zoa-pill-tag { color: var(--ink); }
.zoa-pic-list { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.zoa-pic-fields { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.zoa-pic-field { display: contents; }
.zoa-pic-fields dt { color: var(--muted); }
.zoa-pic-fields dd { margin: 0; min-width: 0; }
.zoa-pic-block { display: grid; gap: 4px; justify-items: start; font-family: var(--zoa-mono); }
.zoa-answer .zoa-pic-block { font-size: 1.1rem; }
.zoa-answer-source { margin: 8px 0 0; font-size: var(--zoa-code-size); line-height: var(--zoa-line); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.zoa-row-value .zoa-value-text { display: inline-flex; min-width: 0; max-width: 100%; }
.zoa-peek-target { cursor: default; border-radius: var(--r-chip); outline: none; }
.zoa-peek-target:focus-visible { box-shadow: 0 0 0 2px var(--blue-soft); }
.zoa-peek { position: fixed; z-index: 50; max-width: 32em; max-height: 50vh; overflow: auto; padding: 10px 12px; background: var(--ground); color: var(--ink); border-radius: var(--r-pop); box-shadow: var(--pop-shadow); font-family: var(--zoa-mono); font-size: var(--zoa-code-size); line-height: var(--zoa-line); }
.zoa-peek-source { margin: 8px 0 0; padding: 6px 8px; background: var(--paper); border-radius: var(--r-row); box-shadow: var(--well-shadow-shallow); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.zoa-peek-note { margin: 6px 0 0; color: var(--muted); font-style: italic; }
.zoa-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.zoa-input-shape, .zoa-input-color { flex-direction: column; align-items: stretch; }
.zoa-input-expression { width: 100%; }
.zoa-peek-mark { opacity: .35; margin-left: 2px; flex: none; width: .9em; height: .9em; }
.zoa-peek-target:hover .zoa-peek-mark, .zoa-peek-target:focus-visible .zoa-peek-mark { opacity: .9; }
.zoa-row-runs { width: 100%; align-items: center; }
.zoa-runs { position: relative; display: inline-block; flex: 1; height: 1em; min-width: 4em; border-bottom: 1px solid var(--line); }
.zoa-run { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border: 1.5px solid var(--paper); border-radius: 50%; background: var(--muted); cursor: pointer; }
.zoa-run:hover, .zoa-run:focus-visible { background: var(--blue); transform: scale(1.4); z-index: 1; }
.zoa-run-latest { background: var(--ink); }
.zoa-runs-dense { position: absolute; top: 25%; height: 50%; background: var(--muted); border-radius: 3px; opacity: .6; }
.zoa-run .zoa-peek-mark { display: none; }
.zoa-runs-dense .zoa-peek-mark { display: none; }
.zoa-pic-row > .zoa-pic-muted { margin-left: -3px; }
.zoa-run-cursor { background: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.zoa-flow { position: relative; display: block; width: 100%; height: var(--zoa-line); }
.zoa-flow-path { position: absolute; overflow: visible; pointer-events: none; }
.zoa-flow-path polyline { stroke: var(--blue); stroke-width: 1.5px; stroke-linejoin: round; opacity: .55; }

/* --- the studio (studio design §5): a surface beside the code, in a well, with its tools at its head --- */
/* the tools stand in the window's rail; over the surface, the head of Drawings, Options, Undo, and Redo; under it, the foot of the tool's options */
.zoa-studio { grid-column: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--zoa-head) auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.zoa-studio-head { grid-row: 1; display: flex; align-items: flex-end; gap: 12px; padding: 8px 2px 6px 0; min-width: 0; }
/* the mode's name in the brand's face, then the microscope's crumb, down on the edge of the code */
.zoa-head-titles { align-self: flex-end; display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; margin-bottom: 2px; }
/* the screen's title fills the head from its top to the well's edge (polish round 3): sized from the head, which is in pixels, with the line box cut to the letters */
.zoa-studio-title { flex: none; font-size: calc(var(--zoa-head) * .88); line-height: .75; }
.zoa-studio-head > .zoa-studio-title { margin-bottom: 2px; }
.zoa-head-titles > * { margin-bottom: 0; }
/* the foot: one row of the tools under the surface, its height kept for the taller key of the tool in hand, so the surface never resizes; its labels end where the rail's do */
.zoa-studio-foot { grid-row: 4; padding: 10px 2px 12px 0; min-width: 0; }
.zoa-studio-rail { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 6px; width: max-content; min-height: 92px; }
.zoa-studio-rail > * { flex: none; }
/* the tool in hand opens into a wider, taller key carrying its options: its face, lit, then the options on the same body */
.zoa-studio-pod { display: flex; align-items: stretch; padding: 6px 10px 8px 4px; border-radius: calc(var(--key-r) + 4px); background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)), var(--key-face); box-shadow: var(--key-up); }
.zoa-studio-pod-face, .zoa-studio-pod-face:hover { flex-direction: column; justify-content: flex-end; gap: 4px; width: 64px; min-height: 0; padding: 18px 4px 0; background: none; box-shadow: none; color: var(--accent); font-size: 1.33rem; }
.zoa-studio-pod-face:active { transform: none; box-shadow: none; }
.zoa-studio-pod-face .zoa-lamp { top: 4px; }
.zoa-studio-pod-name { font-size: var(--zoa-text-label); font-weight: 600; line-height: 1.2; }
.zoa-studio-options { display: flex; align-items: flex-end; gap: 6px; margin-left: 6px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.zoa-studio-pod .zoa-studio-options .zoa-keyed > .zoa-button { width: 52px; min-height: 40px; font-size: 1.1rem; }
.zoa-studio-options-hint { align-self: center; max-width: 13rem; margin: 0 4px; white-space: normal; line-height: 1.3; }
.zoa-studio-arrange-menu { min-width: 10rem; }
/* each region keeps its row whether or not the tabs show; the surface's row takes the rest */
.zoa-studio-tabs { grid-row: 2; }
.zoa-studio-surface, .zoa-studio-hint { grid-row: 3; }
/* under the surface, the pickers open upward */
.zoa-studio-foot .zoa-studio-picker { top: auto; bottom: 100%; margin: 0 0 2px; }
/* the tool panels (studio round seven §5.2): over the sheet while the Group, Pattern, or Stamp tool is in hand, a legend across the top, the guidance, and the cards in rows */
.zoa-groups-cover { position: absolute; inset: var(--zoa-head) 0 0 0; z-index: 6; background: var(--ground); background-image: var(--chassis-image); display: grid; min-height: 0; min-width: 0; }
.zoa-studio-groups { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; min-width: 0; padding: 14px 4px 0 0; }
.zoa-studio-groups-head { display: flex; align-items: center; gap: 12px; }
/* the panel's title as a modal's (the picker's head): the brand's face, lowercase */
.zoa-studio-panel-title { flex: none; margin: 0; font-family: var(--zoa-brand); font-size: var(--zoa-text-title); font-weight: 400; line-height: 1.1; color: var(--ink); text-transform: lowercase; }
.zoa-studio-groups-guidance { margin: 8px 0 12px; color: var(--muted); }
.zoa-studio-groups-strip { overflow: auto; min-height: 0; padding: 2px 2px 18px 0; }
.zoa-studio-groups-section { margin-bottom: 12px; }
.zoa-studio-groups-legend { margin-bottom: 8px; gap: 8px; }
.zoa-studio-groups-row { display: flex; flex-wrap: wrap; gap: 10px; }
.zoa-studio-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 6px; border-radius: var(--r-field); background: var(--paper); box-shadow: var(--well-shadow-shallow); min-width: 0; cursor: pointer; transition: box-shadow .1s, opacity .1s; }
.zoa-studio-card-seed { opacity: 1; box-shadow: var(--well-shadow-shallow), 0 0 0 3px var(--accent); }
.zoa-studio-card-joinable { opacity: 1; box-shadow: var(--well-shadow-shallow), 0 0 0 2px var(--accent-wash); }
.zoa-studio-card-joinable:hover { box-shadow: var(--well-shadow-shallow), 0 0 0 2px var(--accent); }
.zoa-studio-card-dim { opacity: .35; }
.zoa-studio-mini { display: block; width: 96px; max-height: 96px; border-radius: var(--r-row); box-shadow: 0 0 0 1px var(--well-edge); }
.zoa-studio-card-body { display: grid; align-content: space-between; gap: 6px; min-width: 0; }
.zoa-studio-card-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.zoa-studio-card-value { width: 40px; min-height: 40px; }
.zoa-studio-card-spelling { font-size: var(--zoa-text-label); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-studio-card-name { width: 9rem; padding: 5px 8px; }
.zoa-studio-card-count { font-size: var(--zoa-text-label); color: var(--muted); white-space: nowrap; }
.zoa-studio-card-ungroup { gap: .35em; padding: 4px 10px; }
.zoa-studio-card-size .zoa-size-step { width: 32px; min-height: 32px; }
.zoa-studio-card-steps { min-width: 5rem; text-align: center; }
/* the join under way (§5.3): backlit at the head's right, the seed's swatch or glyph, its name and count, and the X that leaves the mode */
.zoa-studio-join { display: inline-flex; align-items: center; gap: 8px; align-self: center; margin-bottom: 14px; flex: none; }
.zoa-studio-join-readout { white-space: nowrap; gap: 8px; }
.zoa-studio-join-readout > .zoa-swatch, .zoa-studio-join-readout > .zoa-glyph { width: 1.1em; height: 1.1em; }
/* the cursor under the Group tool (§5.3): the pipette picks the seed; with one chosen, the bucket, the stamp, or the resize arrows give its value */
.zoa-studio-svg[data-tool="group"][data-mode], .zoa-studio-svg[data-tool="group"][data-mode] * { cursor: var(--zoa-pipette-cursor); }
.zoa-studio-svg[data-tool="group"][data-mode="color"][data-seeded], .zoa-studio-svg[data-tool="group"][data-mode="color"][data-seeded] * { cursor: var(--zoa-bucket-cursor); }
.zoa-studio-svg[data-tool="group"][data-mode="shape"][data-seeded], .zoa-studio-svg[data-tool="group"][data-mode="shape"][data-seeded] * { cursor: var(--zoa-stamp-cursor); }
.zoa-studio-svg[data-tool="group"][data-mode="size"][data-seeded], .zoa-studio-svg[data-tool="group"][data-mode="size"][data-seeded] * { cursor: nwse-resize; }
/* the rings (§5.1): a dashed ring on each member of a named group under the Group tool, the seed's in the accent, the name over the first */
.zoa-studio-ring { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.zoa-studio-ring-seed { stroke: var(--accent); }
.zoa-studio-ring-label { fill: var(--muted); font-family: var(--zoa-mono); font-weight: 600; stroke: var(--paper); stroke-width: 3; paint-order: stroke; vector-effect: non-scaling-stroke; }
text.zoa-studio-ring-seed { fill: var(--accent); stroke: var(--paper); }
/* a member lit by a hover under the Group tool stands out and the rest fade (§5.1) */
.zoa-studio-svg[data-tool="group"] .zoa-studio-mark, .zoa-studio-svg[data-tool="group"] .zoa-studio-stroke { cursor: pointer; }
.zoa-studio-svg[data-lit] .zoa-studio-mark:not(.zoa-studio-lit), .zoa-studio-svg[data-lit] .zoa-studio-stroke:not(.zoa-studio-lit) { opacity: .25; }
.zoa-studio-width-wrap > .zoa-stepper { min-height: 46px; }
.zoa-studio-width-wrap .zoa-size-step { width: 40px; min-height: 40px; }
.zoa-studio-shape-key > .zoa-glyph { width: 1.3em; height: 1.3em; }
.zoa-studio-tool { min-width: 3.6rem; }
.zoa-studio-gap { width: 10px; flex: none; }
.zoa-studio-tool-wrap { position: relative; display: inline-flex; }
.zoa-studio-picker { position: absolute; top: 100%; left: 0; z-index: 20; display: grid; gap: 1px; min-width: 9rem; padding: 4px; margin-top: 2px; background: var(--ground); border-radius: var(--r-pop); box-shadow: var(--pop-shadow); }
.zoa-studio-pick { display: flex; align-items: center; gap: .5em; border: 0; background: none; color: var(--ink); padding: 6px 10px; border-radius: var(--r-row); cursor: pointer; text-align: left; }
.zoa-studio-pick:hover { background: var(--accent-wash); }
.zoa-studio-status { align-self: center; color: var(--muted); font-size: var(--zoa-text-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.zoa-studio-pod .zoa-studio-join { align-self: center; margin: 0 0 0 6px; }
.zoa-studio-tabs { margin: 0 0 8px; align-self: start; }
/* the surface fills its well (polish round 2 §4): no padding, the canvas flush with the well's edge, and the well's shadow laid over it from above */
.zoa-studio-surface { position: relative; min-height: 0; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; outline: none; border-radius: var(--well-r); background: var(--paper); overflow: hidden; }
.zoa-studio-surface::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--well-shadow); pointer-events: none; }
.zoa-studio-svg { display: block; width: 100%; height: 100%; max-height: 100%; touch-action: none; user-select: none; }
/* the cursor says which tool is in hand (studio round five §13): the arrow under Select, with a hand over what it can take; the stamp and the pen under the drawing tools */
.zoa-studio-svg[data-tool="select"] .zoa-studio-mark, .zoa-studio-svg[data-tool="select"] .zoa-studio-stroke { cursor: pointer; }
.zoa-studio-svg[data-tool="mark"], .zoa-studio-svg[data-tool="mark"] * { cursor: var(--zoa-stamp-cursor); }
.zoa-studio-svg[data-tool="stroke"], .zoa-studio-svg[data-tool="stroke"] * { cursor: var(--zoa-pen-cursor); }
.zoa-studio-outline { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
/* the chrome (studio round four §3–§8): grips sized in pixels under 24px halos, a stem to the rotate knob, guides, and the readout beside the hand */
.zoa-studio-grip { fill: #fff; stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.zoa-studio-offset { fill: var(--accent); }
.zoa-studio-stem { stroke: var(--accent); stroke-width: 1; pointer-events: none; }
.zoa-studio-guide { stroke: var(--accent); stroke-width: 1; opacity: .8; pointer-events: none; }
.zoa-studio-halo { cursor: grab; }
.zoa-studio-halo[data-corner="nw"], .zoa-studio-halo[data-corner="se"], .zoa-studio-svg[data-dragging="resize-nw"], .zoa-studio-svg[data-dragging="resize-se"] { cursor: nwse-resize; }
.zoa-studio-halo[data-corner="ne"], .zoa-studio-halo[data-corner="sw"], .zoa-studio-svg[data-dragging="resize-ne"], .zoa-studio-svg[data-dragging="resize-sw"] { cursor: nesw-resize; }
.zoa-studio-halo[data-handle="rotate"], .zoa-studio-svg[data-dragging="rotate"] { cursor: var(--zoa-rotate-cursor); }
.zoa-studio-halo[data-handle="point"], .zoa-studio-svg[data-dragging="move"], .zoa-studio-svg[data-dragging="offset"], .zoa-studio-svg[data-dragging="stroke-move"], .zoa-studio-svg[data-dragging="stroke-point"] { cursor: move; }
.zoa-studio-halo[data-handle="thickness"], .zoa-studio-halo[data-handle="aspect"], .zoa-studio-svg[data-dragging="stroke-thickness"], .zoa-studio-svg[data-dragging="aspect"] { cursor: ew-resize; }
.zoa-studio-svg[data-dragging] * { cursor: inherit !important; }
.zoa-studio-readout { position: absolute; z-index: 5; display: grid; gap: 0; padding: 2px 8px; pointer-events: none; }
.zoa-scrub { background: var(--accent-wash); border-radius: var(--r-chip); box-shadow: 0 0 0 1px var(--accent-wash); }
.zoa-studio-hint { display: grid; place-content: center; gap: 10px; justify-items: center; padding: 20px; }
.zoa-studio-menu { position: absolute; z-index: 30; display: grid; min-width: 8rem; padding: 4px; background: var(--ground); border-radius: var(--r-pop); box-shadow: var(--pop-shadow); }
.zoa-studio-item { display: flex; align-items: center; gap: .5em; border: 0; background: none; color: var(--ink); text-align: left; padding: 7px 10px; border-radius: var(--r-row); cursor: pointer; white-space: nowrap; }
.zoa-studio-item:hover, .zoa-studio-item[aria-expanded="true"] { background: var(--accent-wash); }
.zoa-studio-item:disabled { opacity: .45; cursor: default; }
.zoa-studio-item:disabled:hover { background: none; }
.zoa-studio-item > .zoa-icon { width: 1.1em; height: 1.1em; opacity: .85; }
.zoa-studio-item-label { flex: 1; }
/* the menus of round five: legends between the rows, the chosen row marked, submenus beside their item, swatch chips */
.zoa-studio-context { min-width: 11rem; }
.zoa-studio-menu-legend { padding: 6px 8px 2px; font-size: var(--zoa-text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.zoa-studio-pick[aria-checked="true"], .zoa-studio-item[aria-checked="true"] { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.zoa-studio-sub-wrap { position: relative; display: grid; }
.zoa-studio-submenu { left: 100%; top: -4px; margin-left: 2px; }
.zoa-studio-menu-flip .zoa-studio-submenu { left: auto; right: 100%; margin-left: 0; margin-right: 2px; }
.zoa-studio-swatches { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 2px; padding: 2px 4px; }
.zoa-studio-swatches-named { grid-template-columns: repeat(3, minmax(5.2rem, auto)); }
.zoa-studio-chip { display: inline-flex; align-items: center; gap: .4em; border: 0; background: none; color: var(--ink); padding: 5px 6px; border-radius: var(--r-row); cursor: pointer; font-size: var(--zoa-text-label); min-width: 0; }
.zoa-studio-chip:hover { background: var(--accent-wash); }
.zoa-studio-chip > .zoa-swatch { width: 1.3em; height: 1.3em; }
.zoa-studio-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoa-studio-color-menu { min-width: 17rem; }
/* the wheel (studio round five §7): the disc, its marker, the lightness track through the color, the fields, and the spelling */
.zoa-studio-wheel { width: 19.5rem; padding: 10px; gap: 8px; }
.zoa-studio-wheel-head { display: flex; align-items: center; gap: 8px; }
.zoa-studio-wheel-head .zoa-legend { flex: 1; min-width: 0; }
.zoa-studio-disc-wrap { position: relative; margin: 2px auto; }
.zoa-studio-disc { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: var(--well-shadow-shallow); }
.zoa-studio-disc-marker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(0 0 0 / .45); pointer-events: none; }
.zoa-studio-lightness { width: 100%; height: 14px; margin: 4px 0; border-radius: 7px; appearance: none; -webkit-appearance: none; box-shadow: var(--well-shadow-shallow); cursor: ew-resize; }
.zoa-studio-lightness::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3); }
.zoa-studio-lightness::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3); }
.zoa-studio-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr; gap: 6px; }
.zoa-studio-field { display: grid; gap: 2px; font-size: var(--zoa-text-label); color: var(--muted); min-width: 0; }
.zoa-studio-field-input { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: var(--zoa-text-label); }
.zoa-studio-spelling { display: flex; align-items: center; gap: 8px; font-size: var(--zoa-text-label); min-width: 0; }
.zoa-studio-spelling-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoa-swatch-large { width: 1.6em; height: 1.6em; }
@media (prefers-reduced-motion: reduce) { .zoa-button, .zoa-key, .zoa-lamp, .zoa-lamp-dot { transition: none; } }
/* the Pattern tool (studio round eight §6): the panel over the editor's column, in the Shared panel's shape, with the patterns as cards or the call's fields */
.zoa-studio-pattern-cards { flex-direction: column; }
.zoa-studio-pattern-card { grid-template-columns: minmax(0, 1fr); cursor: default; }
.zoa-studio-pattern-key { gap: .4em; padding: 6px 12px; }
.zoa-studio-pattern-blurb { margin: 0; }
.zoa-studio-pattern-caption { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.zoa-studio-pattern-caption > .zoa-icon { width: 1.3em; height: 1.3em; }
.zoa-studio-pattern-argument { margin-bottom: 14px; padding: 8px 10px; border-radius: var(--r-field); background: var(--paper); box-shadow: var(--well-shadow-shallow); }
.zoa-studio-pattern-field { display: flex; align-items: center; gap: 10px; margin: 6px 0; min-width: 0; }
.zoa-studio-pattern-label { min-width: 5.5rem; color: var(--muted); font-family: var(--zoa-mono); font-size: var(--zoa-text-label); }
.zoa-studio-pattern-stepper .zoa-size-step { width: 32px; min-height: 32px; }
.zoa-studio-pattern-value { min-width: 6.5rem; text-align: center; }
.zoa-studio-pattern-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.zoa-studio-pattern-changer { gap: .35em; padding: 4px 10px; }
.zoa-studio-pattern-changer[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); }
.zoa-studio-pattern-reseed { gap: .4em; padding: 5px 12px; }
/* the cursor under the Pattern tool: a hand over a mark; while Follow waits, the pen to draw its path and the crosshair over a stroke to pick */
.zoa-studio-svg[data-tool="pattern"] .zoa-studio-mark { cursor: pointer; }
.zoa-studio-svg[data-tool="pattern"][data-following], .zoa-studio-svg[data-tool="pattern"][data-following] * { cursor: var(--zoa-pen-cursor); }
.zoa-studio-svg[data-tool="pattern"][data-following] .zoa-studio-stroke, .zoa-studio-svg[data-tool="pattern"][data-following] .zoa-studio-stroke * { cursor: crosshair; }

/* --- the Stamp tool (stamps design §4, §5.5): the shelf in the panel, the lasso, the cursors, and the modal --- */
.zoa-studio-svg[data-hand="lasso"], .zoa-studio-svg[data-hand="lasso"] * { cursor: var(--zoa-lasso-cursor); }
.zoa-studio-svg[data-hand="stamp"], .zoa-studio-svg[data-hand="stamp"] * { cursor: var(--zoa-stamp-tool-cursor); }
.zoa-stamp-lasso { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-linejoin: round; }
/* the shelf in the panel over the editor's column, as the Group and Pattern panels are: cards in a grid that fills the column's width */
.zoa-stamp-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.zoa-stamp-card { flex-direction: column; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; min-height: 0; padding: 18px 8px 10px; }
.zoa-stamp-card .zoa-lamp { top: 6px; }
.zoa-stamp-face { display: grid; place-items: center; width: 72px; height: 72px; font-size: 2.4rem; color: var(--accent); }
.zoa-stamp-picture { width: 72px; height: 72px; }
.zoa-stamp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--zoa-text-label); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.zoa-stamp-hint { margin: 12px 0 0; }
.zoa-stamp-note { margin: 0 0 10px; color: var(--ink); }
.zoa-stamp-face-tinted { border-radius: var(--r-row); }
.zoa-stamp-backdrop { z-index: 30; }
.zoa-stamp-dialog { width: min(1100px, 92vw); height: min(86vh, 860px); display: flex; flex-direction: column; background: var(--ground); background-image: var(--chassis-image); border-radius: var(--r-modal); box-shadow: var(--modal-shadow); overflow: hidden; }
.zoa-stamp-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 20px 12px; }
.zoa-stamp-title { margin: 0; font-size: 1.75rem; font-weight: normal; }
.zoa-stamp-name-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zoa-stamp-name-input { width: 16em; max-width: 60vw; }
.zoa-stamp-name-problem { min-width: 12em; color: var(--warn, var(--muted)); }
.zoa-stamp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 0 20px; }
.zoa-stamp-preview { display: grid; place-items: center; min-height: 0; border-radius: var(--well-r); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-stamp-preview-picture { width: 88%; height: 88%; }
.zoa-stamp-code { position: relative; min-height: 0; min-width: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); overflow: hidden; }
.zoa-stamp-code .cm-editor { height: 100%; }
.zoa-stamp-foot { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
.zoa-stamp-foot .zoa-button { padding-inline: 20px; }
.zoa-stamp-make { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) { .zoa-stamp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- the home screen: the name across the top, then a grid of big keys, one per thing to make --- */
.zoa-home-screen, .zoa-about-screen { overflow: auto; padding-right: var(--zoa-gap); }
/* the brand face: lowercase wherever it is set, in Potta Tidepool, which has the one weight */
.zoa-wordmark, .zoa-about h1 { margin: 0; font-family: var(--zoa-brand); font-weight: 400; font-style: normal; line-height: 1.1; color: var(--ink); text-transform: lowercase; }
/* the name itself, in its own face */
.zoa-logo { font-family: var(--zoa-logo); font-weight: 400; }
/* Geologica Petri beside the brand face, as was tried for "computer" after the name on About (unused for now): scaled so its x-height is Potta's
   (0.575em against Geologica's 0.5075em at 650), and at 650, where its stroke looks as heavy as Potta's brush */
.zoa-geologica { font-family: "Geologica Petri", var(--zoa-sans); font-weight: 650; font-size: 1.133em; }
.zoa-home { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 6vh, 72px) 16px 40px; }
.zoa-home .zoa-wordmark { font-size: clamp(2.6rem, 10vw, 7rem); line-height: 1; letter-spacing: -.01em; margin-bottom: 36px; }
.zoa-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px; }
/* a tile is a key (relief design §3): the face raised on its lip, sinking when pressed */
.zoa-home-tile { position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 8px; min-height: 190px; padding: 22px 22px 20px; border-radius: var(--r-modal); text-align: left; font: inherit; }
/* the mark sits in a small well, lit in the accent */
.zoa-home-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow-shallow); color: var(--accent); font-size: 2.1rem; }
.zoa-home-mark .zoa-icon { vertical-align: 0; }
.zoa-home-name { margin-top: 6px; font-family: var(--zoa-brand); font-size: 1.85rem; font-weight: 400; line-height: 1.15; text-transform: lowercase; }
.zoa-home-line { color: var(--muted); font-size: var(--zoa-text-lead); line-height: 1.4; }
/* coming soon: the key stays up and does nothing, its mark unlit */
.zoa-home-soon { cursor: default; }
.zoa-home-soon:hover { background: var(--key-face); }
.zoa-home-soon:active { transform: none; box-shadow: var(--key-up); }
.zoa-home-soon > :not(.zoa-home-badge) { opacity: .5; }
.zoa-home-soon .zoa-home-mark { color: var(--ink); }
.zoa-home-badge { position: absolute; top: 20px; right: 20px; font-size: var(--zoa-text-label); }

/* --- the Drawings gallery (modes design §5): a tile per drawing, its last canvas in a well --- */
/* a large modal over the surface, the size of the microscope's */
.zoa-drawings-screen { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: var(--backdrop); }
.zoa-drawings-screen[hidden] { display: none; }
.zoa-drawings { width: min(1100px, 92vw); height: min(86vh, 900px); overflow: auto; padding: 24px 28px 32px; background: var(--ground); background-image: var(--chassis-image); border-radius: var(--r-modal); box-shadow: var(--modal-shadow); }
.zoa-drawings-head { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.zoa-drawings-head .zoa-drawings-title { flex: none; font-size: 2.25rem; }
/* the legend's groove (relief design §8), scored from the title to the close key */
.zoa-drawings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 20px; }
.zoa-drawing-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: calc(var(--key-r) + 5px); text-align: left; font: inherit; }
.zoa-drawing-tile.zoa-current { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoa-drawing-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow-shallow); overflow: hidden; color: var(--muted); font-size: 2.4rem; }
.zoa-drawing-new .zoa-drawing-thumb { color: var(--accent); }
.zoa-drawing-mini { width: 100%; height: 100%; }
.zoa-drawing-blank { opacity: .4; }
.zoa-drawing-foot { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.zoa-drawing-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoa-drawing-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* --- the about page: the name, then short sections, each under a legend ---
   The page is html the about program wrote (markdown design §6), with no classes,
   so its parts are chosen by element: h1 is the name in the brand face (above,
   beside .zoa-wordmark), the paragraph after it the lede, each h2 a legend with
   its groove (beside .zoa-legend), and the rest the body. */
.zoa-about { max-width: 46rem; margin: 0 auto; padding: clamp(24px, 6vh, 72px) 16px 48px; line-height: 1.6; }
.zoa-about h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.zoa-about h2 { margin: 32px 0 8px; font-size: 1.3rem; }
.zoa-about p, .zoa-about ul, .zoa-about ol { margin: 10px 0; font-size: 1.125rem; color: var(--ink); }
.zoa-about h1 + p { margin: 14px 0 8px; font-size: 1.35rem; }
.zoa-about ul, .zoa-about ol { padding-left: 1.4em; }
.zoa-about li { margin: 6px 0; padding-left: .2em; }
.zoa-about li::marker { color: var(--accent); }
/* a nested list sits close under its item, at the same size */
.zoa-about li > ul, .zoa-about li > ol { margin: 4px 0; font-size: 1em; }
.zoa-about code { font-family: var(--zoa-mono); font-size: .9em; }
.zoa-about a { color: var(--accent); text-underline-offset: .15em; }
/* the texture gives way when the system asks for more contrast (texture design) */
@media (prefers-contrast: more), (forced-colors: active) { :root { --chassis-image: none !important; } }
/* the texture section (texture design): a tile per texture, each a key with a window onto the body in it */
.zoa-settings-section[data-section="texture"] { max-width: 980px; }
.zoa-texture-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; padding: 4px 0 6px; }
.zoa-texture-tile { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 10px 10px 14px; border-radius: var(--r-pop); text-align: left; font: inherit; }
/* fixed, so each swatch is a window onto one surface with the body, not the tile's corner again and again */
.zoa-texture-swatch { position: relative; display: block; height: 150px; background-attachment: fixed; margin-bottom: 6px; border-radius: var(--r-field); background: var(--ground); background-image: var(--chassis-image); box-shadow: inset 0 0 0 1px var(--well-edge), inset 0 2px 5px -1px var(--sink); overflow: hidden; }
/* a small key and a small well on the swatch's body, so the texture shows beside what it sits under */
.zoa-texture-swatch-key { position: absolute; left: 14px; bottom: 16px; width: 36px; height: 32px; border-radius: var(--key-r); background: var(--key-face); box-shadow: var(--key-up); }
.zoa-texture-swatch-well { position: absolute; left: 62px; right: 14px; bottom: 16px; height: 34px; border-radius: var(--r-field); background: var(--paper); box-shadow: var(--well-shadow-shallow); }
.zoa-texture-name { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-weight: 600; color: var(--ink); }
.zoa-texture-note { padding: 0 4px; color: var(--muted); font-size: var(--zoa-text-label); line-height: 1.35; }
.zoa-texture-tile[aria-checked="true"] { transform: translateY(3px); box-shadow: var(--key-down); }