/* ither.dev — how everything looks. Every design value is a variable at the top of this
   file: change it here and it changes everywhere. (The browser reads the few numbers it
   computes with — the grid unit, the gaps, the edge — from these same variables.)

   Contents of this file:

     values       the grid, spacing, type, layers
     colours      the sets of three, the desk's set, the indicator's
     base         the page
     plane        the stage, the grid, the fixed elements (index, overview, tray, logo), the edge
     frame        the block frame: position, raised, header and status rows, where parts sit,
                  the indicator
     inputs       every input on the site (parts.js, "inputs")
     parts        one section per part, in the order of parts.js
*/

/* ── values ────────────────────────────────────────────────────────────────── */
:root {
   /* the grid: every block's size and position is in these units */
   --unit: 32px;            /* one grid slot; also the scroll step */
   --line-w: 1px;           /* grid line width */
   --gap: 1;                /* grid units between blocks */
   --area-gap: 4;           /* grid units between areas */
   --tray-width: 4;         /* grid units: the list of an area's closed blocks, left of its header */
   --block-min-w: 4;        /* grid units: the smallest a resizable block can be made */
   --flow-slack: 3;         /* grid units: in an area that flows down, how much lower a block may
                               sit to stay at the left edge (0: always the highest place) */
   --fixed-margin: 1;       /* grid units between the window's edges and the index, tray and overview */
   --overview-size: 2;      /* grid units: the overview's side, bottom right */
   --tablet-max: 1024px;    /* a window this wide or narrower: a vw block is 50vw or 100vw */
   --phone-max: 640px;      /* this wide or narrower: every vw block is 100vw */
   --block-min-h: 3;
   --logo-cell: 2;          /* grid units: each letter of the logo is a square this big */

   /* spacing */
   --inset: 12px;            /* a block's inner padding */
   --lift: 8px;             /* how far a raised block is lifted up and left */
   --edge: 16px;            /* the frame around the window, where out-of-view blocks are marked */
   --edge-mark: 1px;        /* the width of those marks */
   --in-h: calc(var(--fs-s) * 1.8);   /* an input's height, centred in its grid unit */

   /* type */
   --font: 'Sometype Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
   --fs-xs: 11px;
   --fs-s: 14px;
   --fs-m: 18px;
   --fs-l: 24px;
   --fs-xl: 32px;
   --fs-logo: 48px;
   --lh-text: 1.5;          /* text: markdown, readouts */
   --lh-tight: 1.3;         /* everything else: labels, the status row */
   --lh-code: 1.35;         /* code: the formula, the records, the console */

   /* layers */
   --block-z: 2;            /* blocks … */
   --fixed-z: 20;           /* … and the fixed elements (index, overview, auto layout): above them */
}

/* ── colours ───────────────────────────────────────────────────────────────── */
/* Sets of three: fg and bg in contrast, dim comfortably between. A block with
   colour="blue" (blocks.js: colour: 'blue') takes that set as its own --fg, --bg, --dim,
   and everything inside it is drawn from those three. The sets are named for what they
   are — white, blue, red … — so a theme changes their values and keeps their names. To
   add a set: its three values here, and its line below them.

   The desk is a set too (--desk-…): fg the grid lines and the edges, bg the ground, dim
   the shadows under raised blocks and the ghost of a dragged one. A block with no colour
   uses it; colour="clear" too, with no ground of its own (the grid shows through). */
:root {
   /* the old sets, kept for reference only: nothing uses them */
   --paper-fg: #252424;     --paper-bg: #e1e1df;     --paper-dim: #aeaba3;
   --ink-fg: #f7f6f2;       --ink-bg: #141414;       --ink-dim: #6e6c68;
   --sea-fg: #eef4f7;       --sea-bg: #3d5d70;       --sea-dim: #93abb9;
   --brick-fg: #f7ece8;     --brick-bg: #7a3e33;     --brick-dim: #bb8f86;
   --moss-fg: #edf4ef;      --moss-bg: #3b6049;      --moss-dim: #94b09d;
   --sand-fg: #2b2318;      --sand-bg: #d8c4a3;      --sand-dim: #8f7c60;
   --graphite-fg: #f1f1f1;  --graphite-bg: #4a4a4a;  --graphite-dim: #9d9d9d;


   /* the sets: named for what they are, so a theme changes their values and keeps the names */
   /* neutrals */
   --white-fg:   #172632;  --white-bg:   #f4f3ef;  --white-dim:   #8da9b8;
   --cream-fg:   #172632;  --cream-bg:   #f2d68e;  --cream-dim:   #a66b59;
   --gray-fg:    #f4f3ef;  --gray-bg:    #536171;  --gray-dim:    #a3c4d0;
   --black-fg:   #f4f3ef;  --black-bg:   #172632;  --black-dim:   #7d9ba7;

   /* cool colours */
   --blue-fg:    #f4f3ef;  --blue-bg:    #174765;  --blue-dim:    #8daec4;
   --cyan-fg:    #172632;  --cyan-bg:    #64c0bd;  --cyan-dim:    #336b82;
   --teal-fg:    #f4f3ef;  --teal-bg:    #009e8e;  --teal-dim:    #a8d5cb;
   --green-fg:   #172632;  --green-bg:   #bcded2;  --green-dim:   #398b78;

   /* warm colours */
   --yellow-fg:  #172632;  --yellow-bg:  #eecb67;  --yellow-dim:  #a65c4b;
   --orange-fg:  #172632;  --orange-bg:  #f3a05c;  --orange-dim:  #95534e;
   --red-fg:     #172632;  --red-bg:     #f56e66;  --red-dim:     #883d54;
   --pink-fg:    #172632;  --pink-bg:    #f9dbd3;  --pink-dim:    #a45359;

   /* dark accents */
   --purple-fg:  #f4f3ef;  --purple-bg:  #783f56;  --purple-dim:  #e7a48e;
   --navy-fg:    #f4f3ef;  --navy-bg:    #142b3b;  --navy-dim:    #64b8ae;
   --brown-fg:   #f4f3ef;  --brown-bg:   #a3534f;  --brown-dim:   #f0c985;

   /* the desk's set */
   --desk-fg: var(--white-fg);
   --desk-bg: var(--white-bg);
   --desk-dim: var(--white-dim);

   /* the indicator's states: not a set, each means something */
   --ok: #5fe33f;
   --warn: #f0c23b;
   --bad: #d0533f;

   /* anything with no colour of its own: the desk's */
   --fg: var(--desk-fg);
   --bg: var(--desk-bg);
   --dim: var(--desk-dim);
}
[colour="white"]  { --fg: var(--white-fg);  --bg: var(--white-bg);  --dim: var(--white-dim); }
[colour="cream"]  { --fg: var(--cream-fg);  --bg: var(--cream-bg);  --dim: var(--cream-dim); }
[colour="gray"]   { --fg: var(--gray-fg);   --bg: var(--gray-bg);   --dim: var(--gray-dim); }
[colour="black"]  { --fg: var(--black-fg);  --bg: var(--black-bg);  --dim: var(--black-dim); }
[colour="blue"]   { --fg: var(--blue-fg);   --bg: var(--blue-bg);   --dim: var(--blue-dim); }
[colour="cyan"]   { --fg: var(--cyan-fg);   --bg: var(--cyan-bg);   --dim: var(--cyan-dim); }
[colour="teal"]   { --fg: var(--teal-fg);   --bg: var(--teal-bg);   --dim: var(--teal-dim); }
[colour="green"]  { --fg: var(--green-fg);  --bg: var(--green-bg);  --dim: var(--green-dim); }
[colour="yellow"] { --fg: var(--yellow-fg); --bg: var(--yellow-bg); --dim: var(--yellow-dim); }
[colour="orange"] { --fg: var(--orange-fg); --bg: var(--orange-bg); --dim: var(--orange-dim); }
[colour="red"]    { --fg: var(--red-fg);    --bg: var(--red-bg);    --dim: var(--red-dim); }
[colour="pink"]   { --fg: var(--pink-fg);   --bg: var(--pink-bg);   --dim: var(--pink-dim); }
[colour="purple"] { --fg: var(--purple-fg); --bg: var(--purple-bg); --dim: var(--purple-dim); }
[colour="navy"]   { --fg: var(--navy-fg);   --bg: var(--navy-bg);   --dim: var(--navy-dim); }
[colour="brown"]  { --fg: var(--brown-fg);  --bg: var(--brown-bg);  --dim: var(--brown-dim); }
[colour="clear"]    { --bg: transparent; }


/* ── base ──────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* [hidden] always hides, whatever display an element's own rule sets */
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--desk-bg); color: var(--desk-fg); font: var(--fs-s)/var(--lh-tight) var(--font); font-variant-numeric: tabular-nums; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── plane ─────────────────────────────────────────────────────────────────── */
/* the stage and the plane */
/* The plane scrolls inside its own full-screen stage, not the document: on touch
   screens a document wider than the screen stretches the layout viewport, and the
   page can no longer be positioned. */
.stage { position: fixed; inset: 0; overflow: auto; overscroll-behavior: none; scrollbar-width: thin; }
/* Lines at every multiple of --unit (the line is the cell's first pixel). Blocks are
   inset one line width so the lines stay visible. */
.plane {
   position: relative;
   background-color: var(--desk-bg);
   background-image:
      linear-gradient(to right, var(--desk-fg) var(--line-w), transparent var(--line-w)),
      linear-gradient(to bottom, var(--desk-fg) var(--line-w), transparent var(--line-w));
   background-size: var(--unit) var(--unit);
}

/* the fixed elements: the index (top right), the tray with AUTO LAYOUT (bottom left),
   the overview (bottom right), the edge (around the window). Their looks are here; their
   places and sizes are --fixed-margin and --overview-size (values), set on the grid
   slots in view by desk.js → fixed, so they line up whether or not the plane has
   settled. */
.fixed { position: fixed; z-index: var(--fixed-z); transition: opacity .25s ease-out; }
body.scrolling .fixed { opacity: .5; transition-duration: .05s; }

/* Their colours: like a block, each is drawn in its own three, --fg, --bg and --dim —
   the desk's set, unless you point one at another set here, e.g.
      .tray { --fg: var(--blue-fg); --bg: var(--blue-bg); --dim: var(--blue-dim); }
   Everything in it (the tray's AUTO LAYOUT button, the index's links, the overview's
   marks) is drawn from those three. */
.overview { --fg: var(--desk-fg); --bg: var(--desk-bg); --dim: var(--desk-dim); }

.index { --fg: var(--desk-fg); --bg: var(--desk-bg); --dim: var(--desk-dim); }

.tray { --fg: var(--navy-fg); --bg: var(--navy-bg); --dim: var(--navy-dim); }

/* the index: the site's areas, top right, one grid row each */
.index { display: grid; grid-auto-rows: var(--unit); background: var(--bg); }
.index a {
   display: flex; align-items: center; padding: 0 8px; white-space: nowrap; color: var(--dim);
   text-decoration: none; letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs-s);
}
.index a:hover, .index a.here { color: var(--fg); }
.index a.here::before { content: '›'; margin-right: 6px; }

/* the logo: pinned on the plane at the home position (placed by desk.js, in units;
   --logo-cell, above) */
.logo {
   position: absolute; z-index: var(--block-z);
   left: calc(var(--x) * var(--unit) + var(--line-w)); top: calc(var(--y) * var(--unit) + var(--line-w));
   width: calc(var(--letters, 1) * var(--logo-cell) * var(--unit) - var(--line-w)); height: calc(var(--h) * var(--unit) - var(--line-w));
   overflow: hidden;   /* as wide as the word it shows (--letters, set by desk.js) */
   display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--logo-cell) * var(--unit)); justify-content: start;
   background: var(--desk-bg); color: var(--desk-fg);
   font-size: var(--fs-logo); line-height: calc(var(--logo-cell) * var(--unit) - var(--line-w)); text-align: center; user-select: none;
}
/* a letter: in the desk's fg, or in its own set's colour (colour="…", set by desk.js:
   the set's bg, as the text's colour, on the desk's ground) */
.logo span { width: calc(var(--logo-cell) * var(--unit) - var(--line-w)); }
.logo span[colour] { color: var(--bg); }

.overview { background: var(--bg); cursor: pointer; }
.overview svg { display: block; width: 100%; height: 100%; }
.overview .ov-block { fill: var(--dim); }
.overview .ov-block[data-kind="control"] { fill: var(--fg); }
.overview .ov-view { fill: none; stroke: var(--bad); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the tray: an area of whole grid units holding its commands (AUTO LAYOUT) as chips */
.tray { background: var(--bg); display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 5px 6px; padding: 0 6px; }
.tray .chip { font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .12em; height: 22px; }   /* its commands: AUTO LAYOUT */
.chip {
   height: 18px; border: 0; padding: 0 6px; cursor: pointer; white-space: nowrap;
   background: var(--bg); color: var(--fg); font-size: var(--fs-xs); letter-spacing: .06em;
}
.chip:hover { outline: 1px solid var(--fg); }
.chip[colour="clear"] { background: var(--desk-bg); }

/* an area's closed blocks, down the left of its header: one grid row each, in their colours */
.area-tray {
   position: absolute; z-index: var(--block-z); background: var(--desk-bg); padding-right: 6px;
   left: calc(var(--x) * var(--unit) + var(--line-w)); top: calc(var(--y) * var(--unit) + var(--line-w));
   width: calc(var(--w) * var(--unit) - var(--line-w)); height: calc(var(--h) * var(--unit) - var(--line-w));
   overflow: hidden;   /* like a block: a line short of its last cell, so the grid lines show */
   display: grid; grid-auto-rows: calc(var(--unit) - var(--line-w)); row-gap: var(--line-w); align-items: center; justify-items: end;
}
.area-tray .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* the edge: a frame around the window marking blocks out of view */
.edges { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.edges .edge-ground { fill: var(--desk-bg); }
.edges .edge-line { fill: none; stroke: color-mix(in srgb, var(--desk-fg) 45%, transparent); stroke-width: 1; }
.edges line { stroke-width: var(--edge-mark); }

/* ── frame ─────────────────────────────────────────────────────────────────── */
/* Positioned in grid units by the plane (--x, --y, --w, --h). Until the plane has placed
   them, they are not shown. */
ither-block {
   position: absolute;
   left: calc(var(--x) * var(--unit) + var(--line-w));
   top: calc(var(--y) * var(--unit) + var(--line-w));
   width: calc(var(--w) * var(--unit) - var(--line-w));
   height: calc(var(--h) * var(--unit) - var(--line-w));
   /* its three colours, --fg, --bg and --dim: its own set (colour="…"; colours, above),
      or the desk's */
   background: var(--bg);
   color: var(--fg);
}
ither-block { z-index: var(--block-z); overflow: clip; }   /* nothing past its edges */
.plane:not(.placed) > ither-block, .plane:not(.placed) > .logo { visibility: hidden; }
/* a dragged block is lifted like a control, and its shadow is the ghost: the slot it
   will land on, filled like a control's shadow; no ghost where the drop would be refused */
ither-block.moving[kind] {   /* outranks the control rule's shadow */
   z-index: calc(var(--block-z) + 10); transition: none;
   transform: translate(calc(-1 * var(--lift)), calc(-1 * var(--lift)));
   box-shadow: none;
}
.ghost {
   position: absolute; z-index: calc(var(--block-z) - 1); pointer-events: none;
   left: calc(var(--x) * var(--unit) + var(--line-w)); top: calc(var(--y) * var(--unit) + var(--line-w));
   width: calc(var(--w) * var(--unit) - var(--line-w)); height: calc(var(--h) * var(--unit) - var(--line-w));
   background: var(--desk-dim);
}
ither-block.settling { transition: transform .18s ease-out; }

/* a raised block: lifted up and left, its shadow (the desk's dim) filling the slot it occupies */
ither-block[kind="control"] {
   transform: translate(calc(-1 * var(--lift)), calc(-1 * var(--lift)));
   box-shadow: var(--lift) var(--lift) 0 var(--desk-dim);
}

/* header and status rows are one grid unit tall */
ither-block > .b-head, ither-block > .b-status {
   position: absolute; left: 0; right: 0; height: calc(var(--unit) - var(--line-w));
   display: flex; align-items: center; gap: 8px; padding: 0 var(--inset) 0 calc(var(--inset) + 2px);
}
ither-block > .b-head { top: 0; }
/* the header and status rows are always above the content, whatever a part's place:
   the title drags, the × closes */
ither-block > .b-head, ither-block > .b-status { z-index: 1; }
/* a resizable block's handle: a small triangle in its bottom right corner (desk.js, resize) */
ither-block > .b-resize {
   position: absolute; right: 0; bottom: 0; z-index: 2; width: 10px; height: 10px;
   background: linear-gradient(135deg, transparent 50%, var(--dim) 50%); cursor: nwse-resize; touch-action: none;
}
ither-block > .b-resize:hover { background: linear-gradient(135deg, transparent 50%, var(--fg) 50%); }
ither-block > .b-status { bottom: 0; }
ither-block > .b-head .b-title {
   flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   font-size: var(--fs-m); letter-spacing: .14em; text-transform: uppercase;
   cursor: grab; user-select: none; touch-action: none;
}
ither-block > .b-head .b-close {
   width: 16px; height: 16px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; flex: none;
}
ither-block > .b-status .b-meta {
   flex: 1; min-width: 0; font-size: var(--fs-xs); line-height: var(--lh-tight); letter-spacing: .08em; color: var(--dim);
   overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* where a block's parts sit (how each looks: parts, below) */
/* Flowing parts stack down the body: inset on the sides; reaching the header and status
   rows where they exist, and inset top and bottom where they don't. `grow` takes the
   height left over.
   How tall: a block with `h` keeps it, and its body scrolls up and down when the content
   is taller; a block without (fit) is as tall as its content — its body takes its
   natural height, and the block measures it (app.js, "block"). Text always wraps: a
   block scrolls sideways only when it asks to (scrollX: true → scroll-x).
   Nothing ever reaches past a block's sides: what is wider is clipped (or scrolls). */
ither-block > .b-body {
   position: absolute; left: var(--inset); right: var(--inset);
   top: var(--inset); bottom: var(--inset);
   overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
   display: flex; flex-direction: column;
}
ither-block[has-head] > .b-body { top: calc(var(--unit) - var(--line-w)); }
ither-block[has-status] > .b-body { bottom: calc(var(--unit) - var(--line-w)); }
ither-block[fit] > .b-body { bottom: auto; overflow-x: clip; overflow-y: visible; }
ither-block[scroll-x] > .b-body { overflow-x: auto; }
ither-block > .b-body > .part { flex: none; position: relative; min-height: 0; }
ither-block > .b-body > .part.grow { flex: 1; }
/* A placed part sits at its `place`: grid units from the block's top-left corner. */
/* Like a block on the grid, it stops a line short of its last cell, so the grid lines
   around a part on whole cells stay visible. In a clear block, placed parts stand on the
   desk's ground: tiles on the grid. */
ither-block > .part.placed {
   position: absolute;
   left: calc(var(--px) * var(--unit)); top: calc(var(--py) * var(--unit));
   width: calc(var(--pw) * var(--unit) - var(--line-w)); height: calc(var(--ph) * var(--unit) - var(--line-w));
}
ither-block[colour="clear"] > .part.placed { --bg: var(--desk-bg); background: var(--bg); }

/* indicator: one dot, colour per state (the library's own words) */
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--dim); display: inline-block; flex: none; position: relative; background: var(--bg); }
/* It shows only when something needs you: a warning, a failure, an error, a capsule that
   could not run. Nothing when all is well; "running" only once it has taken a moment. */
.dot[data-s="idle"], .dot[data-s="pass"] { visibility: hidden; }
.dot[data-s="running"]      { background: var(--dim); opacity: 0; animation: appear 0s .35s forwards, blink 1s steps(2) .35s infinite; }
@keyframes appear { to { opacity: 1; } }
.dot[data-s="warn"]         { background: var(--warn); }
.dot[data-s="fail"]         { background: var(--bad); }
.dot[data-s="inapplicable"] { background: transparent; border-style: dashed; }
.dot[data-s="error"]        { background: var(--bad); border-radius: 1px; }
@keyframes blink { 50% { opacity: .3; } }

/* ── inputs ──────────────────────────────────────────────────────────────────── */
/* Every input on the site (parts.js, "inputs"). One grid unit per row, the control centred in
   it, as wide as the block's padding allows. No borders: a box, a list or a button is a
   filled area, --fill: the block's fg, a little, over its bg; a label is small dim
   capitals. */
ither-block { --fill: color-mix(in srgb, var(--fg) 12%, var(--bg)); --on-fill: var(--fg); }
ither-block[colour="clear"] { --fill: color-mix(in srgb, var(--fg) 8%, transparent); }

.in { display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--unit); font-size: var(--fs-s); }
.in-label { flex: none; color: var(--dim); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.in-box, .in-button {
   height: var(--in-h); min-width: 0; padding: 0 6px; border: 0; border-radius: 0; outline: none;
   background: var(--fill); color: var(--on-fill); font: inherit; font-size: var(--fs-s);
}
.in > .in-box, .in-select { flex: 1; }
.in-box::placeholder { color: color-mix(in srgb, var(--on-fill) 40%, transparent); }
.in-box:focus { box-shadow: inset 0 -2px 0 var(--on-fill); }
/* a list: the box, and ▾ at its right */
.in-select { position: relative; display: flex; min-width: 0; }
.in-select > select { flex: 1; appearance: none; padding-right: 18px; cursor: pointer; }
.in-select::after { content: '▾'; position: absolute; right: 6px; top: 50%; translate: 0 -50%; color: var(--on-fill); pointer-events: none; font-size: var(--fs-xs); }
/* a switch: a small filled square, solid when on */
.in-switch { cursor: pointer; }
.in-check { appearance: none; flex: none; width: 12px; height: 12px; margin: 0; background: var(--fill); cursor: pointer; }
.in-check:checked { background: var(--fg); }
/* a button: a filled area; it inverts while pressed or hovered */
.in-button { cursor: pointer; letter-spacing: .08em; }
.in-button:hover, .in-button:active { background: var(--on-fill); color: var(--bg); }
/* a multi-line box: --rows grid units tall, the box inset to the same edges as one-row controls */
.in-area { height: calc(var(--rows) * var(--unit)); padding: calc((var(--unit) - var(--in-h)) / 2) 0; }
.in-text { width: 100%; height: 100%; padding: 4px 6px; resize: none; line-height: var(--lh-code); white-space: pre; overflow: auto; }
/* inputs side by side while each has --min grid units, otherwise one under the other */
.in-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--min) * var(--unit))), 1fr)); column-gap: var(--inset); align-items: center; }
.in-row > .in-button { justify-self: stretch; }

/* ═══ parts ═══ one section each, in the order of parts.js */

/* ── parts ───────────────────────────────────────────────────────────────────
   One section each, in the order of parts.js. */

/* ── markdown ────────────────────────────────────────────────────────────── */
/* rendered text */
.md { font-size: var(--fs-s); line-height: var(--lh-text); color: var(--fg); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { font-weight: normal; letter-spacing: .08em; margin: 0 0 .6em; }
.md h1 { font-size: var(--fs-xl); }
.md h2 { font-size: var(--fs-l); }
.md h3 { font-size: var(--fs-m); }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 .8em; }
.md ul, .md ol { padding-left: 1.4em; }
.md code { font-family: var(--font); background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0 .25em; }
.md pre { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 8px; overflow-x: auto; scrollbar-width: thin; }
.md pre code { background: none; padding: 0; }
/* a table: as wide as the block, scrolling sideways when wider; rules in dim */
.md .md-table { overflow-x: auto; scrollbar-width: thin; margin: 0 0 var(--inset); }
.md table { border-collapse: collapse; font-size: var(--fs-xs); line-height: var(--lh-tight); }
.md th, .md td { text-align: left; vertical-align: top; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--dim); }
.md th { font-weight: 600; }
.md blockquote { border-left: 2px solid var(--dim); padding-left: 10px; color: var(--dim); }
.md a { color: inherit; text-decoration-color: var(--dim); text-underline-offset: 2px; }
.md hr { border: 0; border-top: 1px solid var(--dim); }

/* ── group ───────────────────────────────────────────────────────────────── */
/* parts side by side while each has --min grid units, one-unit rows */
.part[data-part="group"] .in > .in-label:first-child { min-width: 5ch; }   /* labels share a width: the boxes line up */
.part[data-part="group"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--min) * var(--unit))), 1fr)); grid-auto-rows: var(--unit); column-gap: var(--inset); align-items: center; }

/* ── field, select ───────────────────────────────────────────────────────── */
/* a kit field or list (inputs, above) */

/* ── link ────────────────────────────────────────────────────────────────── */
/* a link to a block or area */
.part[data-part="link"] { justify-self: end; }
.link { color: var(--fg); font-size: var(--fs-s); letter-spacing: .08em; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ── ruler ───────────────────────────────────────────────────────────────── */
/* Every ruler on the site is styled here and only here. Oomph reads these variables:
   --oomph-bg, --oomph-edge, --oomph-band-shadow, and per tick kind (minor, mid, major)
   --oomph-<kind>-color, --oomph-<kind>-width, --oomph-<kind>-length (% of the band). A
   ruler's geometry (bands, tick gap, orientation) is its part's `oomph` option. It claims
   horizontal drags, so dragging it never pans the page. */
.part[data-part="ruler"] .ar-strip { width: 100%; height: 100%; }
/* a ruler that flows: the full width of the block's padding, --ruler-units thick, and the
   block's padding below it, inside its own rows */
ither-block > .b-body > .part[data-part="ruler"] { height: calc(var(--ruler-units) * var(--unit)); padding-bottom: var(--inset); }
/* plain: true — the block's fg on its bg, nothing in between */
.part.plain .ar-strip.oomph {
   --oomph-bg: var(--bg); --oomph-edge: var(--fg);
   --oomph-minor-color: var(--fg); --oomph-mid-color: var(--fg); --oomph-major-color: var(--fg);
}
.ar-strip.oomph {
   min-width: 0; touch-action: none; border-radius: 0px; border: 0px solid var(--dim);
   --oomph-bg: var(--fill);
   --oomph-edge: var(--dim);
   --oomph-band-shadow: transparent;
   --oomph-minor-color: var(--dim);  --oomph-minor-width: 1px;  --oomph-minor-length: 40%;
   --oomph-mid-color: var(--dim);    --oomph-mid-width: 1px;    --oomph-mid-length: 50%;
   --oomph-major-color: var(--fg);  --oomph-major-width: 1px;  --oomph-major-length: 100%;
}

/* ── contents ─────────────────────────────────────────────────────────────── */
/* an area's list of its blocks (parts.js → contents; the examples header): each a title
   linking to the block, and its about line (blocks.js, each block's `about`) */
.ct-list { list-style: none; margin: var(--inset) 0 0; padding: 0; display: grid; gap: 8px; }   /* a line under the text above it */
.ct-list li { display: grid; gap: 2px; }
.ct-title { color: inherit; text-transform: uppercase; letter-spacing: .1em; text-decoration-color: var(--dim); text-underline-offset: 2px; }
.ct-about { color: var(--dim); }

/* ── number ────────────────────────────────────────────────────────────────── */
/* the cursor as one number: its size and colour here; placed, it is as wide as its text
   (in whole grid units, parts.js) and as tall as its place, the text centred in it */
.part[data-part="number"] {
   font-size: var(--fs-m); line-height: calc(var(--ph, 1) * var(--unit) - var(--line-w)); white-space: nowrap; color: var(--fg); user-select: all;
   padding: 0 var(--inset);   /* inside its tile, like a block's content */
}
.part[data-part="number"] .n-prefix { user-select: none; }
/* turned a quarter (turn: true): reading downwards, beside a vertical ruler */
.part[data-part="number"].n-turned {
   writing-mode: vertical-rl;
   line-height: calc(var(--pw, 1) * var(--unit) - var(--line-w)); padding: var(--inset) 0;
}

/* ── caption ──────────────────────────────────────────────────────────────── */
/* a line of text from the answer (parts.js → caption), as tall as its place */
.part[data-part="caption"] {
   font-size: var(--fs-s); line-height: calc(var(--ph, 1) * var(--unit) - var(--line-w)); padding: 0 var(--inset);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg);
}

/* ── view ────────────────────────────────────────────────────────────────── */
/* the space's renderer; the notice covers it when there is nothing to draw. With a
   size: --vw × --vh grid units, the x ruler (--xu units thick) under it and the y ruler
   (--yu) beside it, each half a unit shorter at both ends, centred in the block's width */
/* Its colours, handed to the renderer as frame.colours: bg its ground, fg what it draws,
   dim what is quieter, line its lines (a grid, a frame), here what is at the cursor. The
   block's three by default; set them for one block's view, e.g. the hero:
      ither-block[name="hero"] .part[data-part="view"] { --view-here: var(--red-bg); } */
.part[data-part="view"] {
   --view-bg: var(--bg); --view-fg: var(--fg); --view-dim: var(--dim);
   --view-line: var(--fg); --view-here: var(--fg);
}
.vp-screen { position: relative; width: 100%; height: 100%; }
.vp-frame { width: 100%; height: 100%; border: 0; background: var(--view-bg); display: block; }
.part.vp-sized {
   display: grid; justify-content: center;
   grid-template-columns: calc(var(--vw) * var(--unit)) calc(var(--yu) * var(--unit));
   grid-template-rows: calc(var(--vh) * var(--unit)) calc(var(--xu) * var(--unit));
}
.vp-sized > .vp-screen { grid-area: 1 / 1; }
.vp-x { grid-area: 2 / 1; padding: 0 calc(var(--unit) / 2) var(--inset); }   /* the padding below: room before what follows, inside the ruler's own row */
.vp-y { grid-area: 1 / 2; padding: calc(var(--unit) / 2) var(--inset) calc(var(--unit) / 2) 0; }   /* as thick as the x ruler: the inset off its far side */
.vp-x > .ar-strip, .vp-y > .ar-strip { width: 100%; height: 100%; }
/* the hero's garden: its ground, its plants, its cells' lines, the plant at the cursor */
ither-block[name="hero"] .part[data-part="view"] {
   --view-bg: var(--desk-bg); --view-fg: var(--desk-dim); --view-line: var(--desk-fg); --view-here: var(--desk-fg);
}
.vp-notice {
   position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
   white-space: pre-wrap; background: var(--bg); color: var(--fg); padding: 24px;
}

/* ── formula ─────────────────────────────────────────────────────────────── */
/* the space list, the formula text, reset and compile: one row, the text, one row */
.part[data-part="formula"] { display: grid; }
.f-text { width: 100%; height: 100%; resize: none; tab-size: 2; padding: 8px; line-height: var(--lh-code); overflow: hidden; white-space: pre; }
/* in a block with h: the text box fills what the list and the buttons leave, and scrolls */
ither-block:not([fit]) .part[data-part="formula"] { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
ither-block:not([fit]) .part[data-part="formula"] .in-area { height: 100%; }
ither-block:not([fit]) .f-text { overflow: auto; scrollbar-width: thin; }

/* ── query ───────────────────────────────────────────────────────────────── */
/* the input, its rows (a table per axis, or a text box), the page, the manifest */
.q-axes { display: grid; grid-template-columns: auto repeat(var(--columns), minmax(0, 1fr)) auto; grid-auto-rows: var(--unit); column-gap: var(--inset); align-items: center; }
.q-axes > .in-label:nth-child(-n + 5) { font-size: var(--fs-xs); }
.q-bound { color: var(--dim); font-size: var(--fs-xs); text-align: right; }
.q-note { height: var(--unit); display: flex; align-items: center; color: var(--dim); }

/* ── results ─────────────────────────────────────────────────────────────── */
/* the raw answer: headings and plain text, wrapped; in a block that scrolls sideways
   (scroll-x), one line per line */
.r-list { font-size: var(--fs-xs); line-height: var(--lh-text); }
.r-head { position: sticky; left: 0; margin: 8px 0 2px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.r-head:first-child { margin-top: 0; }
.r-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
ither-block[scroll-x] .r-text { white-space: pre; overflow-wrap: normal; width: max-content; }
.r-more { color: var(--dim); padding: 4px 0; }

/* ── charts ──────────────────────────────────────────────────────────────── */
/* what a readout draws (parts.js, "charts"): bars in the block's dim colour (and a
   lighter dim to tell neighbours apart), text in its fg; the signal colours only where
   something is good or wrong */
.ch-list { display: grid; gap: calc(var(--inset) * 1.5); padding: 2px 0 var(--inset); font-size: var(--fs-xs); line-height: var(--lh-tight); }
.ch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }   /* as wide as its block, never wider */
.ch-title { text-transform: uppercase; letter-spacing: .1em; }
.ch-facts, .ch-ends, .ch-legend { color: var(--dim); }
.ch-note { color: var(--dim); }
.ch-note[data-signal="warn"] { color: var(--fg); border-left: 3px solid var(--warn); padding-left: 6px; }
.ch-note[data-signal="bad"] { color: var(--fg); border-left: 3px solid var(--bad); padding-left: 6px; }
[data-tone="dim"] { background: var(--dim); }
[data-tone="dim2"] { background: color-mix(in srgb, var(--dim) 50%, var(--bg)); }
[data-tone="ok"] { background: var(--ok); }
[data-tone="warn"] { background: var(--warn); }
[data-tone="bad"] { background: var(--bad); }
/* a big number, and what it counts */
.ch-stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-stat b { font-size: var(--fs-xl); font-weight: 600; line-height: 1; color: var(--fg); }
.ch-stat span { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
/* one bar in parts; its legend */
.ch-bar { display: flex; gap: 2px; height: 12px; }
.ch-bar > i { flex-basis: 0; min-width: 2px; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ch-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; }
/* the parts of an axis: their names inside the bar */
.ch-bar.ch-parts { height: 18px; }
.ch-parts > i { color: var(--fg); font-style: normal; padding: 0 4px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* labelled bars */
.ch-bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 3px 8px; align-items: center; }
.ch-bars > span:nth-child(3n + 1) { color: var(--dim); }
.ch-track { height: 8px; }
.ch-track > i { display: block; height: 100%; background: var(--dim); }
/* an interval on its line */
.ch-range { position: relative; height: 12px; box-shadow: inset 0 -1px 0 var(--dim); }
.ch-range > i { position: absolute; top: 0; bottom: 0; background: var(--dim); }
.ch-ends { display: flex; justify-content: space-between; }
/* a box inside the space's extent */
.ch-box { width: 100%; max-width: calc(8 * var(--unit)); }
.ch-box-space { fill: none; stroke: var(--dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-box-query { fill: var(--dim); }
/* one mark per item */
.ch-marks { display: flex; flex-wrap: wrap; gap: 2px; }
.ch-marks > i { width: 8px; height: 12px; background: var(--dim); }
/* a square per check */
.ch-checks { display: grid; gap: 4px; }
.ch-checks i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; }

/* ── readout ─────────────────────────────────────────────────────────────── */
/* the diagnostics: their charts (above); a capsule that cannot run says why */
.ro { display: grid; grid-template-columns: fit-content(50%) 1fr; gap: 1px 10px; margin: 2px 0 0; font-size: var(--fs-xs); line-height: var(--lh-text); }
.ro dt { color: var(--dim); overflow-wrap: anywhere; }
.ro dd { margin: 0; overflow-wrap: anywhere; }
.ro-reason { font-size: var(--fs-xs); color: var(--dim); padding: 2px 0 var(--inset); }
.ro-reason[data-signal="bad"] { color: var(--fg); border-left: 3px solid var(--bad); padding-left: 6px; }
.ro-reason[data-signal="inapplicable"] { border-left: 3px dashed var(--dim); padding-left: 6px; }

/* ── console ─────────────────────────────────────────────────────────────── */
/* newest first; no scrolling, the oldest lines fall off the bottom */
.c-list { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }
.c-line { padding: 1px 0; white-space: pre-wrap; word-break: break-word; flex: none; }
.c-line pre { margin: 2px 0 4px 9ch; color: var(--dim); }
.c-error { color: var(--bad); }
.c-warn { color: var(--warn); }
.c-line .dim { color: var(--dim); }
.c-clear { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0; font-size: var(--fs-xs); }