/* 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. */
@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 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, Seti UI until the settings are applied (settings design §3) */
  --base00: #151718; --base01: #282a2b; --base02: #3b758c; --base03: #41535b;
  --base04: #43a5d5; --base05: #d6d6d6; --base06: #eeeeee; --base07: #ffffff;
  --base08: #cd3f45; --base09: #db7b55; --base0A: #e6cd69; --base0B: #9fca56;
  --base0C: #55dbbe; --base0D: #55b5db; --base0E: #a074c4; --base0F: #8a553f;
  color-scheme: dark;
  /* 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);
  --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);
  --groove-shadow: inset 0 2px 4px var(--sink), inset 0 -1px 0 var(--lift-edge);
  --key-r: 11px;
  --well-r: 14px;
  /* 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);
  --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;
  /* 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: 1rem/1.45 var(--zoa-sans); color: var(--ink); background: var(--ground); }
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 { --pad: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35em; border: 0; border-radius: var(--key-r); padding: var(--pad) 14px; min-height: 40px; background: var(--key-face); color: var(--ink); box-shadow: var(--key-up); cursor: pointer; white-space: nowrap; line-height: 1.45; transition: transform .07s ease-out, box-shadow .07s ease-out; }
.zoa-button:hover { background: var(--key-face-hover); }
.zoa-button:active { transform: translateY(3px); box-shadow: var(--key-down); }
.zoa-button:disabled { opacity: .45; cursor: default; }
.zoa-button:disabled:active { transform: none; box-shadow: var(--key-up); }
.zoa-button:disabled:hover { background: var(--key-face); }
.zoa-tiny { min-height: 26px; padding-inline: 9px; font-size: .875rem; border-radius: 7px; 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: 24px; }
.zoa-round { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
.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: .875rem; 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: 1rem; 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: .875rem; 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: 32px; cursor: pointer; font-size: 1rem; }
.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: 9px; 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); }
.zoa-button:focus-visible, .zoa-tab:focus-visible, .zoa-segment:focus-visible, .zoa-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 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: 6px; background: var(--paper); color: var(--ink); font-family: var(--zoa-mono); font-size: .9rem; 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: 1rem; 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 { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; font-size: 1rem; }
.zoa-legend::after, .zoa-settings-head::after { 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); }

/* --- 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: 92px; 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-rail .zoa-spacer { flex: 1; }
.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: 8px; 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: 6px; padding: 8px 0 12px 10px; min-height: 48px; }
.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-say:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.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-keyed { font-size: .875rem; }
.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 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 */
.zoa-frame.zoa-frame-studio { grid-template-columns: minmax(0, 1fr) min(var(--zoa-studio, calc(50% - var(--zoa-gap) / 2)), calc(100% - 360px)); }
@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-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); }

.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-saved-word { display: none; } .zoa-head-left { gap: 8px; } }
/* the toolbar's keys, named under their marks (screens round 2 §4; relief design §10) */
.zoa-head-actions { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.zoa-path { align-self: center; margin-bottom: 14px; 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-saved-lamp { align-self: center; margin-bottom: 14px; }
.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: .8rem; 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: .875rem; 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: 4px; }
.zoa-lens .zoa-icon { vertical-align: 0; }
.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: 4px; 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: .73rem; }
.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: 0 2px 8px var(--shadow); border-radius: 4px; padding: 2px; }
.zoa-chip-expr { color: var(--muted); }
.zoa-chip-arrow { color: var(--faint); }
.zoa-row-calling { font-size: .875rem; }
.zoa-row-stop { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; color: var(--amber-ink); background: var(--amber-soft); border-radius: 4px; 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: rgb(0 0 0 / .5); }
.zoa-microscope-dialog { position: relative; width: min(1100px, 92vw); height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--ground); border-radius: 18px; box-shadow: 0 0 0 1px var(--well-edge), 0 24px 60px -20px rgb(0 0 0 / .6); 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: 1.07rem; font-family: var(--zoa-mono); }
.zoa-scheme { color: var(--muted); font-weight: normal; font-family: var(--zoa-mono); font-size: .9rem; }
.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: .875rem; }
.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: 1rem; padding: 8px 10px; background: var(--green-soft); border-left: 3px solid var(--green); border-radius: 4px; white-space: pre-wrap; }
.zoa-stop { padding: 8px 10px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: 4px; white-space: pre-wrap; }
.zoa-problem { padding: 8px 10px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: 4px; 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: .9rem; 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: 4px; 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: 4px; font-family: var(--zoa-mono); font-size: .9rem; 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: .9rem; }
.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: .875rem; line-height: var(--zoa-line); border-radius: 3px; }
.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: 8px; 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: 8px; 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: 8px; 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; }
.zoa-explorer-body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.zoa-explorer-body > * { grid-area: 1 / 1; min-height: 0; min-width: 0; border-radius: var(--well-r); background: var(--paper); box-shadow: var(--well-shadow); }
/* 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; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.zoa-tree-row:hover .zoa-tree-into, .zoa-tree-row:focus-within .zoa-tree-into { display: 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: 4px; }
.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: 30px; font-size: var(--zoa-code-size); cursor: pointer; text-align: left; white-space: nowrap; border-radius: 4px; }
.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: .875rem; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.zoa-quick-star { flex: none; border: 0; background: none; color: var(--muted); padding: 2px 6px; cursor: pointer; opacity: 0; border-radius: 4px; }
.zoa-quick-item:hover .zoa-quick-star, .zoa-quick-item:focus-within .zoa-quick-star, .zoa-quick-star.zoa-starred { opacity: 1; }
.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 20px 2px 8px; border-radius: 4px; min-height: 30px; 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:focus-visible { outline: 2px solid var(--blue-line); outline-offset: -2px; }
.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: .875rem; white-space: normal; }
.zoa-tree-tag { font-size: .875rem; color: var(--faint); font-style: italic; }
/* a row's actions (screens design §2.2): shown on hover or focus, a star kept once it is set */
.zoa-row-actions { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; flex: none; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border-radius: 4px; }
.zoa-row-actions { gap: 4px; }
.zoa-row-actions > .zoa-button { opacity: 0; pointer-events: none; font-size: 1rem; }
.zoa-tree-row:hover .zoa-row-actions, .zoa-tree-row:focus-within .zoa-row-actions { background: var(--ground); box-shadow: 0 0 0 3px var(--ground); }
.zoa-tree-row:hover .zoa-row-actions > .zoa-button, .zoa-tree-row:focus-within .zoa-row-actions > .zoa-button, .zoa-row-star.zoa-starred { opacity: 1; pointer-events: auto; }
.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: color-mix(in srgb, var(--base00) 25%, transparent); }
.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); border-radius: 16px; box-shadow: 0 0 0 1px var(--well-edge), 0 24px 60px -20px rgb(0 0 0 / .6); 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; }
.zoa-palette-close { flex: none; width: 34px; min-height: 34px; font-size: 1rem; }
.zoa-palette-input { margin: 12px 18px; font-size: 1.07rem; 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: 8px; cursor: pointer; min-height: 34px; }
.zoa-palette-row[aria-selected="true"] { background: var(--key-face); box-shadow: var(--key-up-tiny); }
.zoa-palette-category { font-size: .9rem; 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: 1rem; font-family: var(--zoa-mono); white-space: nowrap; }
.zoa-palette-row .zoa-quick-dir { font-size: 1rem; }
.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: 8px 16px 24px 6px; }
.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; }
.zoa-settings-field { display: grid; gap: 6px; }
.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: .875rem; }
.zoa-settings-lamped { color: inherit; }
.zoa-theme-now { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 14px; border-radius: 9px; 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: .875rem; }
.zoa-settings-note { color: var(--muted); font-size: .875rem; font-style: italic; }
.zoa-picker-filter { width: 100%; }
.zoa-picker-list { border-radius: 9px; 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: 3px; 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: 1rem; }
/* 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 { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 9px; 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: .875rem; white-space: nowrap; }
.zoa-font-picker .zoa-picker-list { max-height: calc(8 * 2.2rem); }
.zoa-font-picker .zoa-picker-row { height: 2.2rem; }

/* --- 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: 4px; padding: 0 5px; font-size: .8em; color: var(--muted); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--well-edge); }
.zoa-swatch { display: inline-block; width: 1em; height: 1em; border-radius: 50%; box-shadow: 0 0 0 1px var(--well-edge); flex: none; vertical-align: -0.15em; }
.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: 3px; 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: .87rem; color: var(--muted); 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: 3px; 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: 12px; box-shadow: 0 0 0 1px var(--well-edge), 0 12px 30px -10px rgb(0 0 0 / .5); font-family: var(--zoa-mono); font-size: .87rem; }
.zoa-peek-source { margin: 8px 0 0; padding: 6px 8px; background: var(--paper); border-radius: 6px; 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 { font-size: var(--zoa-code-size); line-height: var(--zoa-line); }
.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-answer-source { font-size: var(--zoa-code-size); line-height: var(--zoa-line); color: var(--ink); }
.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: 8px; height: 8px; margin: -4px 0 0 -4px; padding: 0; border: 1px 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; }
/* the column reads at the code's size (pictures design §12) */
.zoa-margin-row { font-size: var(--zoa-code-size); }
.zoa-run { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-width: 1.5px; }
.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 a rail at the pane's left, the tool's options in the head over the surface (studio round five §13) */
.zoa-studio { grid-column: 2; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--zoa-head) auto minmax(0, 1fr); column-gap: 10px; min-height: 0; min-width: 0; }
.zoa-studio-rail { grid-column: 1; grid-row: 3 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 0 0 2px; }
.zoa-studio-head { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; gap: 6px; padding: 8px 2px 6px 0; min-width: 0; overflow: visible; }
/* each region keeps its row whether or not the tabs show, so the rail's top meets the surface's; the surface's row takes the rest */
.zoa-studio-tabs { grid-column: 2; grid-row: 2; }
.zoa-studio-surface, .zoa-studio-hint { grid-column: 2; grid-row: 3; }
/* the Shared panel (studio round seven §5.2): over the sheet while the Group tool is in hand, a legend across the top, the guidance, and the cards in rows */
.zoa-groups-cover { position: absolute; inset: 0; z-index: 6; background: var(--ground); 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; }
.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 { font-size: .9rem; margin-bottom: 8px; gap: 8px; }
.zoa-studio-groups-legend > .zoa-icon { width: 1.2em; height: 1.2em; }
.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: 10px; 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: 6px; 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: .875rem; 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: .8125rem; color: var(--muted); white-space: nowrap; }
.zoa-studio-card-ungroup { gap: .35em; padding: 4px 8px; font-size: .8125rem; }
.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; }
.zoa-studio-join-close { width: 34px; min-height: 34px; font-size: 1rem; }
/* 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: 10px; box-shadow: 0 0 0 1px var(--well-edge), 0 12px 30px -10px rgb(0 0 0 / .5); }
.zoa-studio-pick { display: flex; align-items: center; gap: .5em; border: 0; background: none; color: var(--ink); padding: 4px 8px; border-radius: 6px; cursor: pointer; text-align: left; }
.zoa-studio-pick:hover { background: var(--accent-wash); }
.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; }
.zoa-studio-status { align-self: center; color: var(--muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; margin-bottom: 14px; }
.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: 3px; 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: 10px; box-shadow: 0 0 0 1px var(--well-edge), 0 12px 30px -10px rgb(0 0 0 / .5); }
.zoa-studio-item { display: flex; align-items: center; gap: .5em; border: 0; background: none; color: var(--ink); text-align: left; padding: 5px 10px; border-radius: 6px; 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: .75rem; 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: 4px 6px; border-radius: 6px; cursor: pointer; font-size: .9rem; 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-wheel-close { width: 32px; min-height: 32px; font-size: 1rem; }
.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: .75rem; color: var(--muted); min-width: 0; }
.zoa-studio-field-input { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: .9rem; }
.zoa-studio-spelling { display: flex; align-items: center; gap: 8px; font-size: .85rem; 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 (max-width: 900px) { .zoa-studio { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .zoa-button, .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: 10px; 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: .875rem; }
.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; font-size: .8125rem; }
.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; the crosshair over a stroke while Follow waits */
.zoa-studio-svg[data-tool="pattern"] .zoa-studio-mark { cursor: pointer; }
.zoa-studio-svg[data-tool="pattern"][data-following] .zoa-studio-stroke, .zoa-studio-svg[data-tool="pattern"][data-following] .zoa-studio-stroke * { cursor: crosshair; }