/* Suplex: the site.
 *
 * The page is laid out as the thing it describes: tiles on a field, a gutter between
 * them, each tile headed like a pane (its name, and the address it is found at). Lines
 * inside a tile are hairlines; the gutter is only ever between tiles.
 *
 * Every colour is a role. Amber is Suplex's own (the layout, what is chosen); each
 * backend has one hue, used on its chips, its threads and the edge of what it owns, and
 * nowhere else.
 */

@font-face { font-family: "Funnel Display"; src: url("fonts/funnel-display.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("fonts/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Intel One Mono"; src: url("fonts/intel-one-mono.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --g: 10px;
  --display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Intel One Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
  --field: #0c0e12;
  --pane: #161a20;
  --chrome: #1e232b;
  --raised: #262c36;
  --hair: #2b323d;
  --text: #e9ecf1;
  --muted: #a5adba;
  --faint: #727b8a;
  --sel: #22314a;
  --own: #f5b83d;
  --own-ink: #1b1403;
  --rex: #6fb4ff;
  --page: #cb9ef4;
  --agent: #7edba3;
  --other: #ff9679;
  --bad: #ff6f6f;
}

:root[data-theme="light"] {
  color-scheme: light;
  --field: #c9ced6;
  --pane: #fbfbf8;
  --chrome: #eceee8;
  --raised: #e1e4dd;
  --hair: #d5d8d1;
  --text: #14171c;
  --muted: #4b535f;
  --faint: #7a8290;
  --sel: #d9e6fb;
  --own: #a86400;
  --own-ink: #ffffff;
  --rex: #1560d0;
  --page: #7a3dd4;
  --agent: #12783a;
  --other: #be3f0b;
  --bad: #c62828;
}

.hue-own { --hue: var(--own); }
.hue-rex { --hue: var(--rex); }
.hue-page { --hue: var(--page); }
.hue-agent { --hue: var(--agent); }
.hue-other { --hue: var(--other); }

* { box-sizing: border-box; }
html { background: var(--field); scroll-behavior: smooth; scroll-padding-top: calc(38px + var(--g) * 2); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 16.5px/1.55 var(--sans); font-synthesis: none; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--own); }
:focus-visible { outline: 2px solid var(--own); outline-offset: 2px; }
::selection { background: var(--own); color: var(--own-ink); }

p { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; }
h2 { font-size: clamp(27px, 2.6vw, 37px); line-height: 1.06; letter-spacing: -0.018em; margin-bottom: 0.5em; text-wrap: balance; }
h3 { font-size: 17px; line-height: 1.25; letter-spacing: -0.005em; margin-bottom: 0.35em; }
code, kbd, pre, .mono { font-family: var(--mono); font-feature-settings: "ss01"; }
code { font-size: 0.86em; color: var(--text); background: var(--chrome); padding: 0.08em 0.36em; }
.lede { font-size: 19px; line-height: 1.48; color: var(--text); }
.quiet { color: var(--muted); }

.skip { position: absolute; left: -999px; top: 0; background: var(--own); color: var(--own-ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: var(--g); top: var(--g); }

/* The bar: a tab for each section, as a workspace's own. */
.top { position: sticky; top: 0; z-index: 20; background: var(--field); padding: var(--g) var(--g) 0; }
.top-in { max-width: 1340px; margin: 0 auto; height: 38px; display: flex; align-items: stretch; background: var(--chrome); }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 16px 0 12px; font: 700 17px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; }
.brand img { width: 26px; height: 26px; display: block; margin: 0 -2px; }
.tabs { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; border-left: 1px solid var(--hair); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 0 15px; font: 500 12.5px/1 var(--mono); color: var(--muted); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--hair); }
.tabs a i { font-style: normal; color: var(--faint); }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="true"] { background: var(--pane); color: var(--text); box-shadow: inset 0 2px 0 var(--own); }
.tabs a[aria-current="true"] i { color: var(--own); }
.theme { flex: none; width: 38px; border: 0; border-left: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.theme:hover { color: var(--text); }
.theme svg { width: 16px; height: 16px; }
.theme .half { fill: currentColor; }

/* The workspace: twelve columns, a gutter between tiles. */
.ws { max-width: calc(1340px + var(--g) * 2); margin: 0 auto; padding: var(--g); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); }
.tile { grid-column: span 12; background: var(--pane); display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(38px + var(--g) * 2); }
.th { flex: none; display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 4px 0 12px; background: var(--chrome); font: 500 11.5px/28px var(--mono); color: var(--muted); white-space: nowrap; min-width: 0; }
.tn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tn::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--hue, var(--faint)); }
.tn > span { overflow: hidden; text-overflow: ellipsis; }
.tn b { font-weight: 500; color: var(--text); }
.tl { margin-left: auto; color: var(--faint); text-decoration: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl:hover { color: var(--text); }
.tz { flex: none; width: 24px; height: 22px; border: 0; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 0; }
.tz:hover { color: var(--text); }
.tz svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.th > .tl:last-child { padding-right: 8px; }
.tb { flex: 1; padding: 24px 26px 26px; min-width: 0; }
.tb.flush { padding: 0; }
.tb.mid { display: flex; flex-direction: column; justify-content: center; }
.tb.under { flex: none; padding-top: 4px; }
.flush > .code + .term { border-top: 1px solid var(--hair); }
.tb > p, .tb > h2 { max-width: 68ch; }
.small { font-size: 15px; margin-top: 14px; }

@media (min-width: 1000px) {
  .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
  .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; }
}
@media (min-width: 680px) and (max-width: 999.98px) {
  .m6 { grid-column: span 6; }
}
@media (max-width: 679.98px) {
  :root { --g: 8px; }
  body { font-size: 16px; }
  .tb { padding: 18px 16px 20px; }
  .lede { font-size: 17.5px; }
  .tabs a { padding: 0 12px; }
}

/* A tile zoomed: alone, as a pane is. */
.tile.zoomed { position: fixed; inset: var(--g); z-index: 40; overflow: auto; box-shadow: 0 0 0 100vmax var(--field); }
.tile.zoomed .th { position: sticky; top: 0; z-index: 2; }
.tile.zoomed .tz { color: var(--own); }
body.has-zoom { overflow: hidden; }

/* The film: the first tile, the frame's whole width. */
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0c0e12; }
.film .cap { flex: none; padding: 16px 26px 20px; display: grid; gap: 6px 40px; }
.film .cap p { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; }
.film .cap .quiet { color: var(--muted); font-size: 13.5px; }
@media (min-width: 1000px) { .film .cap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 679.98px) { .film .cap { padding: 14px 16px 16px; } }
/* The name, cut where it is joined; under it, the page's own three parts. */
.hero { grid-column: span 12; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--g); min-width: 0; }
@media (min-width: 1000px) { .hero { grid-column: span 7; } }
.word { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g); margin: 0; font: inherit; letter-spacing: 0; }
.word .tile, .trio .tile { grid-column: auto; }
.word .th, .jump .th { display: flex; }
.wt { flex: 1; display: flex; align-items: center; font: 800 clamp(56px, calc(29vw - 12px), 216px)/0.9 var(--display); letter-spacing: -0.035em; padding: 0.16em 0 0.2em; overflow: hidden; }
@media (min-width: 1000px) { .wt { font-size: clamp(72px, calc(16.6vw - 10px), 216px); } }
.w-su .wt { justify-content: flex-end; padding-left: 0.16em; padding-right: 0.035em; }
.w-plex .wt { padding-left: 0.02em; color: var(--own); }
.word .th { justify-content: space-between; }
.word .tn::before { display: none; }
.word .tn { color: var(--faint); }
.word .tv { color: var(--faint); padding-right: 8px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.jump { text-decoration: none; color: var(--muted); font-size: 15px; line-height: 1.42; }
.jump .tb { padding: 14px 16px 16px; }
.jump .tl { padding-right: 8px; }
.jump:hover .tn, .jump:hover .tl { color: var(--text); }
.jump:hover .th { background: var(--raised); }
@media (max-width: 679.98px) { .trio { grid-template-columns: minmax(0, 1fr); } .tl-h { display: none; } }
/* One column: the name, what it is, then its three parts. */
@media (max-width: 999.98px) {
  .hero { display: contents; }
  .word, .trio { grid-column: span 12; }
  #film { order: -4; } .word { order: -3; } #lede { order: -2; } .trio { order: -1; }
}
.now { display: flex; gap: 12px; align-items: baseline; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.45; color: var(--muted); }
.now .st { flex: none; }

/* Chips: an address, in its backend's hue. */
.loc { font-family: var(--mono); font-size: 0.82em; color: var(--hue, var(--muted)); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); color: var(--hue, var(--muted)); border: 1px solid color-mix(in srgb, var(--hue, var(--faint)) 55%, transparent); padding: 4px 7px; white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; background: var(--hue, var(--faint)); flex: none; }

/* The stage: what runs, what is stored, what is drawn. */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 1.22fr); gap: 0 clamp(56px, 7vw, 104px); padding: 22px 26px 28px; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.threads path { fill: none; stroke: var(--hue, var(--faint)); stroke-width: 1.5; opacity: 0.8; transition: opacity 0.12s, stroke-width 0.12s; }
.threads circle { fill: var(--hue, var(--faint)); }
.threads .lay { stroke: var(--own); stroke-dasharray: 3 5; stroke-width: 2; opacity: 0.9; }
.threads .lay-h { fill: var(--own); }
.stage.linking .threads path { opacity: 0.12; }
.stage.linking .threads path.on { opacity: 1; stroke-width: 2.2; }
.stage.linking .threads path.lay { opacity: 0.9; }
.st-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.st-h { font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.node { border: 1px dashed var(--hair); padding: 22px 10px 10px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.node-n { position: absolute; top: 5px; left: 10px; font: 500 11px/1 var(--mono); color: var(--faint); }
.node-n b { color: var(--muted); font-weight: 500; }
.be { background: var(--chrome); border-left: 2px solid var(--hue, var(--faint)); }
.be-h { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px 5px; font: 500 12px/1.2 var(--mono); color: var(--hue, var(--text)); }
.be-h span { color: var(--faint); }
.rows { margin: 0; padding: 0 0 6px; list-style: none; font: 400 12.5px/1.2 var(--mono); }
.rows li { display: flex; align-items: center; gap: 8px; padding: 3.5px 10px; color: var(--muted); border-left: 0 solid transparent; white-space: nowrap; min-width: 0; }
.rows .l1 { padding-left: 24px; } .rows .l2 { padding-left: 38px; } .rows .l3 { padding-left: 52px; }
.rows .e { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.rows .k { color: var(--own); }
.rows .lv { margin-left: auto; color: var(--faint); font-size: 11px; }
.rows .loc { margin-left: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.rows [data-ref] { cursor: default; }
.rows [data-ref] .e { color: var(--hue, var(--text)); }
.doc { background: var(--chrome); border-left: 2px solid var(--own); }
.doc .be-h { color: var(--own); }
.doc .rows [data-ref] .e { color: var(--text); }
.on-ref { background: var(--sel); }
.st-note { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 2px 0 0; }

/* A window, small: what a client makes of it. */
.win { background: var(--field); display: flex; flex-direction: column; gap: 3px; padding: 3px; }
.win input { position: absolute; opacity: 0; pointer-events: none; }
.win-tabs { display: flex; background: var(--chrome); font: 500 12px/1 var(--mono); }
.win-tabs label { padding: 8px 12px; color: var(--muted); cursor: pointer; border-right: 1px solid var(--hair); }
.win-tabs label i { font-style: normal; color: var(--faint); margin-right: 7px; }
.win-tabs .dev { margin-left: auto; padding: 8px 10px; color: var(--faint); }
#tab-build:checked ~ .win-tabs label[for="tab-build"], #tab-agents:checked ~ .win-tabs label[for="tab-agents"] { background: var(--pane); color: var(--text); box-shadow: inset 0 2px 0 var(--own); }
#tab-build:focus-visible ~ .win-tabs label[for="tab-build"], #tab-agents:focus-visible ~ .win-tabs label[for="tab-agents"] { outline: 2px solid var(--own); outline-offset: -2px; }
.win-body { display: none; gap: 3px; height: 268px; }
#tab-build:checked ~ .wb-build { display: grid; grid-template-columns: 3fr 2fr; }
#tab-agents:checked ~ .wb-agents { display: grid; }
.wb-side { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; min-width: 0; min-height: 0; }
.pn { background: var(--pane); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.pn-h { display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: var(--chrome); font: 500 11px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.pn-h b { font-weight: 500; color: var(--text); }
.pn-h .loc { margin-left: auto; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.pn pre { margin: 0; padding: 7px 9px; font-size: 11px; line-height: 1.5; color: var(--muted); overflow: hidden; white-space: pre; }
.pn .loc { font-size: 10.5px; }
.pn pre b { font-weight: 400; color: var(--text); }
.pn pre i { font-style: normal; color: var(--agent); }
.pn.on-ref .pn-h { background: var(--sel); }
.pg { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.pg-url { font: 400 10.5px/1 var(--mono); color: var(--faint); background: var(--chrome); padding: 5px 7px; }
.pg-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 30px; }
.pg-bars span { flex: 1; background: color-mix(in srgb, var(--page) 55%, transparent); }
.pin { background: var(--pane); border: 1px solid var(--rex); display: flex; flex-direction: column; min-height: 0; }
.pin-tabs { display: flex; font: 500 11px/1 var(--mono); border-bottom: 1px solid var(--hair); }
.pin-tabs span { padding: 6px 10px; color: var(--muted); border-right: 1px solid var(--hair); }
.pin-tabs span:first-child { color: var(--text); box-shadow: inset 0 -2px 0 var(--rex); }
.pin-tabs em { font-style: normal; margin-left: auto; padding: 6px 9px; color: var(--rex); }
.pin-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.pin-split .pn + .pn { border-left: 1px solid var(--hair); }

@media (max-width: 999.98px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 18px 16px 22px; }
  .st-drawn { order: -1; }
  .threads { display: none; }
}

/* Tables: what is listed, in lines. */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.42; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--hair); }
.tbl tr:last-child > * { border-bottom: 0; }
.tbl thead th { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-bottom: 8px; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl td:first-child { white-space: nowrap; }
.tbl .k { font: 500 12.5px/1.7 var(--mono); color: var(--own); }
.tbl .n { font: 500 12.5px/1.7 var(--mono); color: var(--hue, var(--text)); }
.tbl.has-st td:first-child { white-space: nowrap; }
.tbl.has-st td:first-child .n { display: block; }
.tbl.has-st td:first-child .st { display: inline-block; margin: 2px 0 3px; }
.tbl td { color: var(--muted); }
.tbl td b { font-weight: 500; color: var(--text); }
.tbl.wrap td:first-child { white-space: normal; }
.st { font: 500 11px/1 var(--mono); padding: 3px 6px; white-space: nowrap; border: 1px solid var(--hair); color: var(--muted); }
.st.ok { color: var(--agent); border-color: color-mix(in srgb, var(--agent) 50%, transparent); }
.st.wip { color: var(--own); border-color: color-mix(in srgb, var(--own) 50%, transparent); }
.scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }

/* A workspace, drawn from its own document. */
.fr { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
.fr-l { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); padding: 6px 8px; color: var(--muted); white-space: nowrap; }
.fr-l .k { color: var(--own); }
.fr-l b { color: var(--text); font-weight: 500; }
.fr-l .w { margin-left: auto; color: var(--faint); }
.fr-tabs { border: 1px solid var(--hair); }
.fr-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair); font: 500 11.5px/1 var(--mono); }
.fr-bar > span { padding: 8px 12px; border-right: 1px solid var(--hair); color: var(--muted); }
.fr-bar > span.on { color: var(--text); background: var(--chrome); box-shadow: inset 0 2px 0 var(--own); }
.fr-bar > .k { color: var(--own); }
.fr-kids { display: flex; flex: 1; gap: 6px; padding: 6px; min-height: 0; background: var(--field); }
.fr-kids.col { flex-direction: column; }
.fr-split { background: transparent; }
.fr-split > .fr-l { background: var(--chrome); }
.fr-slot { background: var(--pane); border-top: 2px solid var(--hue, var(--faint)); min-height: 74px; }
.fr-slot .ref { padding: 2px 8px 10px; font: 400 11.5px/1.5 var(--mono); color: var(--hue, var(--muted)); overflow-wrap: anywhere; }
.fr-slot .ref span { display: block; color: var(--faint); }
.frames { display: flex; flex-direction: column; min-height: 300px; height: 100%; }
.fr-off { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 400 11.5px/1.5 var(--mono); color: var(--muted); flex-wrap: wrap; }
.fr-off .k { color: var(--own); }

/* An address, taken apart. */
.addr { font: 500 clamp(17px, 2vw, 24px)/1.2 var(--mono); display: flex; flex-wrap: wrap; margin: 2px 0 16px; padding-bottom: 46px; }
.addr span { position: relative; padding-bottom: 8px; }
.addr span[data-part] { border-bottom: 2px solid var(--hue, var(--faint)); }
.addr span[data-part]::after { content: attr(data-part); position: absolute; left: 0; top: calc(100% + 9px); font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* (The middle part's name stands a line lower, on a tick: the names are wider than what they name.) */
.addr .p2::after { top: calc(100% + 27px); }
.addr .p2::before { content: ""; position: absolute; left: 0; top: 100%; height: 34px; border-left: 2px solid var(--hue); }
.addr .p2::after { padding-left: 7px; }
.addr .p1 { color: var(--rex); --hue: var(--rex); }
.addr .p2 { color: var(--text); --hue: var(--muted); }
.addr .p3 { color: var(--muted); --hue: var(--faint); }
.addr .sep { color: var(--faint); }
.also { margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.also li { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 14px; padding: 7px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.also code { background: none; padding: 0; color: var(--text); font-size: 12.5px; }

/* Code and what a command printed. */
pre { margin: 0; }
.code { font-size: 12.5px; line-height: 1.6; color: var(--muted); padding: 16px 18px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; tab-size: 2; }
.code .c { color: var(--faint); }
.code.inset { margin-top: 18px; padding: 14px 16px; background: var(--chrome); font-size: 12px; }
.code .s { color: var(--agent); }
.code .p { color: var(--own); }
.code b { font-weight: 400; color: var(--text); }
.term { --lh: 1.4; font-size: 12.5px; line-height: var(--lh); color: var(--muted); padding: 16px 18px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.term .loc { font-size: inherit; }
.cut { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.term .cmd { display: block; color: var(--text); margin-top: 1em; line-height: 1.7; }
.term .cmd:first-child { margin-top: 0; }
.term .cmd::before { content: "$ "; color: var(--own); }
.term .o { display: block; white-space: pre; }
.term .more { display: block; color: var(--faint); }
.term .ok { color: var(--agent); }

/* The sidebar's screen, cell for cell. */
.tui { --lh: 1.42; font: 400 12.5px/var(--lh) var(--mono); padding: 14px 16px; overflow-x: auto; white-space: pre; color: var(--text); scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.tui .a { color: var(--rex); }
.tui .d { color: var(--faint); }
.tui .b { font-weight: 600; }
.tui .s { background: var(--sel); font-weight: 600; }
.tui .g { display: inline-block; width: 1ch; height: calc(var(--lh) * 1em); vertical-align: top; fill: currentColor; }
.tui .ld { --l: var(--hair); }

/* Line-drawing characters, drawn as lines that meet at any line height. */
.ld { display: inline-block; width: 1ch; height: calc(var(--lh, 1.4) * 1em); vertical-align: top; color: transparent; --l: var(--faint); --p: linear-gradient(var(--l), var(--l)); background-repeat: no-repeat; }
.ld.v { background-image: var(--p); background-position: center; background-size: 1px 100%; }
.ld.h { background-image: var(--p); background-position: center; background-size: 100% 1px; }
.ld.vr { background-image: var(--p), var(--p); background-position: center, right center; background-size: 1px 100%, 50% 1px; }
.ld.ur { background-image: var(--p), var(--p); background-position: center top, right center; background-size: 1px 50%, 50% 1px; }

/* How each backend arranges what it holds. */
.shapes { display: grid; gap: 0; }
.shape { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.shape-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.shape:first-child { padding-top: 0; }
.shape:last-child { border-bottom: 0; padding-bottom: 0; }
.shape-n { font: 500 12.5px/1.3 var(--mono); color: var(--hue, var(--text)); }
.shape-n span { display: block; color: var(--faint); font-size: 11px; margin-top: 3px; }
.lad { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: stretch; font: 500 12px/1 var(--mono); }
.lad li { list-style: none; display: flex; align-items: stretch; }
.lad { margin: 0; padding: 0; }
.lv2 { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px 7px; background: var(--chrome); border-top: 2px solid var(--hue, var(--faint)); color: var(--text); min-width: 72px; }
.lv2 span { color: var(--faint); font-size: 10.5px; }
.lad li + li::before { content: ""; width: 14px; align-self: center; height: 1px; background: var(--faint); }
.free { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.arr { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); list-style: none; font: 400 12px/1.3 var(--mono); color: var(--muted); }
.arr b { font-weight: 500; color: var(--text); }

/* The fleet: who talks to whom. */
.fleet { display: block; width: 100%; height: auto; min-width: 700px; max-width: 900px; margin: 0 auto; }
.fleet text { font-family: var(--mono); font-size: 12.5px; fill: var(--muted); }
.fleet .t { fill: var(--text); font-weight: 500; }
.fleet .s { font-size: 11px; fill: var(--muted); }
.fleet .lab { font-size: 10.5px; letter-spacing: 0.06em; fill: var(--faint); }
.fleet .nd { fill: none; stroke: var(--hair); stroke-dasharray: 4 4; }
.fleet .bx { fill: var(--chrome); }
.fleet .dm { fill: var(--chrome); stroke: var(--own); stroke-width: 1; }
.fleet .ms { fill: color-mix(in srgb, var(--own) 16%, var(--chrome)); stroke: var(--own); stroke-width: 1.5; }
.fleet .cl { fill: var(--raised); }
.fleet .edge { stroke-width: 2; }
.fleet .rex { stroke: var(--rex); } .fleet .page { stroke: var(--page); }
.fleet .f-rex { fill: var(--rex); } .fleet .f-page { fill: var(--page); } .fleet .f-own { fill: var(--own); }
.fleet .ops { fill: none; stroke: var(--own); stroke-width: 1.6; }
.fleet .ctl { fill: none; stroke: var(--faint); stroke-width: 1; }
.fleet .data { fill: none; stroke-width: 1.6; stroke-dasharray: 5 4; }
.fleet .halo { fill: none; stroke: var(--pane); stroke-width: 7; }
.fleet .over { paint-order: stroke; stroke: var(--pane); stroke-width: 5px; }
.fleet .ah { fill: var(--own); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; font: 400 12px/1.3 var(--mono); color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 26px; height: 0; border-top: 2px solid var(--own); }
.legend .l-ctl { border-top: 1px solid var(--faint); }
.legend .l-data { border-top: 2px dashed var(--rex); }

.nums { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.nums li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.4; color: var(--muted); }
.nums li:last-child { border-bottom: 0; padding-bottom: 0; }
.nums b { font: 600 19px/1.2 var(--display); color: var(--text); white-space: nowrap; }

/* One library under every client. */
.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--field); padding: 4px; font: 500 12px/1.35 var(--mono); }
.stack > div { background: var(--chrome); padding: 11px 12px; color: var(--text); min-width: 0; }
.stack > div span { display: block; color: var(--faint); font-weight: 400; font-size: 11px; margin-top: 4px; }
.stack .all { grid-column: 1 / -1; }
.stack .two { grid-column: 3 / -1; }
.stack .tall { grid-row: span 2; }
.stack .lib { border-left: 2px solid var(--own); }
.stack .top3 { border-top: 2px solid var(--faint); }

.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 26px; margin: 0; padding: 0; list-style: none; }
.keys li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; color: var(--muted); }
.keys span { display: flex; gap: 4px; min-width: 86px; }
kbd { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; font-size: 12px; font-weight: 500; color: var(--text); background: var(--chrome); border: 1px solid var(--hair); border-bottom-width: 2px; }
.lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; font-size: 15px; color: var(--muted); }

.lists { display: grid; grid-template-columns: 1fr; gap: 20px; }
.lists ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--muted); }
.lists li { padding: 7px 0 7px 18px; border-top: 1px solid var(--hair); position: relative; }
.lists li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--hue, var(--faint)); }
.lists h3 { font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.lists .yes { --hue: var(--agent); }
.lists .no { --hue: var(--own); }

/* The foot: a status line, as the sidebar has. */
.foot .tb { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; font-size: 14px; color: var(--muted); }
.foot p { margin: 0 0 5px; max-width: 64ch; }
.foot .txt { flex: 1 1 380px; }
.status { grid-column: span 12; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; background: var(--chrome); padding: 8px 12px; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.status span b { color: var(--text); font-weight: 500; }
.status kbd { min-width: 0; height: 18px; font-size: 10.5px; padding: 0 5px; border-bottom-width: 1px; }

.nf .hero { grid-template-rows: minmax(0, 1fr); }
.nf .tile { min-height: 46vh; }

@media print {
  :root, :root[data-theme] { --field: #fff; --pane: #fff; --chrome: #f1f1f1; --raised: #e8e8e8; --hair: #cfcfcf; --text: #000; --muted: #333; --faint: #666; --own: #8a5200; --rex: #0b4fb3; --page: #5b2bb0; --agent: #0d6630; --other: #a33608; --sel: #e6eefb; }
  .top, .tz, .theme, .status { display: none; }
  .tile { break-inside: avoid; border: 1px solid var(--hair); }
}