:root {
  --ink: #17231f;
  /* 4.62:1 on the paper behind it. The old #6d7771 was 4.11, which is under the
     4.5 that small text is held to, and most of what wears this colour on the
     user page is 9.5 to 12px. */
  --muted: #656f69;
  --paper: #f4f1e9;
  --panel: rgba(255, 255, 252, 0.84);
  --line: rgba(23, 35, 31, 0.12);
  --green: #1f6a50;
  --green-bright: #7ee0ac;
  --yellow: #edc44b;
  --coral: #e97256;
  --blue: #4d84c8;
  /* What a strand is. Four states, and each one a different lightness as well as a
     different hue, because the line that carries it is a hairline: a run of greens told
     them apart by hue alone and the waiting ones and the dropped ones came out 1.28:1
     against each other. Moving is blue and lit. Waiting is red -- it is the state with
     something still owed, so it is the one that asks to be looked at. What got to the
     end is green and what a gate dropped is a pale lilac -- a grey with no hue at all
     read as a line the renderer had failed to paint. The four are four steps of
     lightness as well as four hues -- 5.23, 3.82, 2.93, 2.05 against the paper -- because
     the line that carries one is a hairline and two hues at the same lightness are one
     colour at that width. */
  --live: #5c90d0;
  --waiting: #d44a45;
  --settled: #17724f;
  --spent: #a9b0ac;
  /* A branch the run has not spoken about: the colour of an unanswered question,
     and not one of the four, so it cannot be read as a verdict. */
  --unread: #9aa3a0;
  /* The bar's green is dark enough that at 12.5px it reads as black. This one
     carries half again the chroma and still clears 4.76:1 on the paper. */
  --green-text: #007a52;
  /* The same trade for the two that mark up a problem statement. `--blue` and `--coral`
     are mixed for strands and for type at 26px; set in 13.5px bold they come out at
     3.6:1 and 3.0:1 on white, under the 4.5 small text is held to. These are 5.8 and
     4.9. Red and blue rather than red and green: red-green is the pair eight percent of
     men cannot separate, and these two parts are the whole of what the mark-up says. */
  --blue-text: #1668b0;
  --red-text: #c04a2e;
  --shadow: 0 24px 70px rgba(31, 43, 37, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/* The same names carrying the other set of values, so nothing that uses a colour has to
   know there are two. Only a page that asks for it gets it: the console sets no theme and
   is untouched. Contrast on the dark paper, measured: ink 14.2, muted 6.1, and the three
   text colours 9.4 / 8.0 / 6.6 -- all above the 4.5 small text is held to. */
:root[data-theme="dark"] {
  --ink: #e8dcb8;
  --muted: #b3a888;
  --paper: #141a18;
  --panel: rgba(28, 36, 33, 0.82);
  --line: rgba(240, 230, 200, 0.15);
  --green: #52c295;
  --yellow: #edc44b;
  --coral: #f0876a;
  --blue: #6ea8e6;
  /* The four a strand wears, lifted off the dark paper by the same steps of lightness
     they were separated by on the light one. */
  --live: #6fa3dd;
  --waiting: #f2926b;
  --settled: #35a97a;
  --spent: #b5bbb7;
  --unread: #8b948f;
  --green-text: #4fd19c;
  --blue-text: #7ab5ee;
  --red-text: #f0876a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
/* What the stylesheet writes as a literal colour rather than through a name. Each is a
   surface that was white because the paper under it was. */
:root[data-theme="dark"] .panel { border-color: var(--line); }
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] .start-panel textarea { background: #1b2320; }
:root[data-theme="dark"] .examples { background: #1b2320; }
:root[data-theme="dark"] .example:hover { background: rgba(240,230,200,.10); }
:root[data-theme="dark"] .ask:hover { background: rgba(240,230,200,.10); }
/* The two glows: the same hues at a third of the strength, which is all a dark ground
   takes before they read as fog. */
:root[data-theme="dark"] .ambient-one { background: radial-gradient(circle, rgba(126,224,172,.09), transparent 70%); }
:root[data-theme="dark"] .ambient-two { background: radial-gradient(circle, rgba(237,196,75,.07), transparent 66%); }
:root[data-theme="dark"] .history-row { background: rgba(240,230,200,.08);
  border-color: rgba(240,230,200,.20); }
:root[data-theme="dark"] .history-row:hover { background: rgba(240,230,200,.14); }
:root[data-theme="dark"] .history-row.on { background: rgba(240,230,200,.19);
  border-color: rgba(240,230,200,.55); }
:root[data-theme="dark"] #history-panel h2,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .history-row:hover .history-item,
:root[data-theme="dark"] .history-row.on .history-item { color: #e8dcb8; }
:root[data-theme="dark"] .history-meta { color: #b3a888; }
/* The name beside the mark is the ink the question is set in on the dark, where the
   green is too dim to carry it. */
:root[data-theme="dark"] .user-top .product-name { color: var(--ink); }
/* A lit bulb on the dark, with no tile behind it. */
:root[data-theme="dark"] .user-top .mark { --lit: #ffd75e; color: var(--lit);
  background: transparent; border: 0; }
:root[data-theme="dark"] .user-top .mark svg {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lit) 72%, transparent))
          drop-shadow(0 0 11px color-mix(in srgb, var(--lit) 38%, transparent)); }
/* Mixed to sit on the light paper; on the dark one it is the same red the strands wear. */
:root[data-theme="dark"] .stop-button { color: var(--coral);
  border-color: rgba(240,135,106,.34); background: rgba(240,135,106,.10); }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: -1; }
.ambient-one { width: 420px; height: 420px; left: -180px; top: 120px; background: radial-gradient(circle, rgba(126,224,172,.25), transparent 70%); }
.ambient-two { width: 600px; height: 600px; right: -240px; top: -220px; background: radial-gradient(circle, rgba(237,196,75,.20), transparent 66%); }

.topbar { max-width: 1480px; margin: 0 auto; padding: 30px 38px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 15px; align-items: center; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; background: var(--ink); display: grid; grid-template-columns: repeat(3, 4px); gap: 4px; place-content: center; transform: rotate(-4deg); }
.brand-mark span { width: 4px; border-radius: 6px; background: var(--green-bright); }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 22px; }
.brand-mark span:nth-child(3) { height: 15px; }
.brand h1 { font-size: 19px; margin: 1px 0 0; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: var(--green); font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .18em; }
.connection { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 650; }
.connection i { width: 8px; height: 8px; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(126,224,172,.18); }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.back-to-search { color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.back-to-search:hover { color: var(--green); }
.back-to-search:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sound-button, .mode-button { border: 1px solid rgba(31,106,80,.28); border-radius: 999px; padding: 9px 14px; background: rgba(126,224,172,.14); color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .16s, color .16s; }
.sound-button:hover, .mode-button:hover { background: rgba(126,224,172,.26); }
.sound-button.muted, .mode-button.muted { border-color: var(--line); background: transparent; color: var(--muted); }
.stop-all-button { border: 1px solid rgba(161,66,48,.32); border-radius: 999px; padding: 9px 14px; background: #a14230; color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 18px rgba(161,66,48,.16); transition: transform .16s, background .16s; }
.stop-all-button:hover:not(:disabled) { transform: translateY(-1px); background: #7f3022; }
.stop-all-button:disabled { opacity: .5; cursor: wait; transform: none; }

main { max-width: 1480px; margin: 0 auto; padding: 0 38px 42px; }
.panel { border: 1px solid rgba(255,255,255,.72); background: var(--panel); backdrop-filter: blur(18px); box-shadow: var(--shadow); border-radius: 26px; }
.launch-panel { padding: 28px 30px 22px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(22px, 2vw, 31px); line-height: 1.15; letter-spacing: -.045em; }
.section-note { max-width: 590px; margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.55; }
textarea { width: 100%; resize: vertical; min-height: 72px; padding: 21px 23px; border: 1px solid var(--line); border-radius: 18px; outline: none; background: rgba(247,248,242,.75); font-size: 18px; line-height: 1.5; color: var(--ink); transition: border .2s, box-shadow .2s, background .2s; }
textarea:focus { border-color: rgba(31,106,80,.55); background: #fff; box-shadow: 0 0 0 4px rgba(31,106,80,.08); }
textarea::placeholder { color: #969e99; }
.start-button { min-width: 168px; padding: 0 22px; border: 0; border-radius: 18px; background: var(--ink); color: #fff; font-weight: 720; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 22px; box-shadow: 0 14px 30px rgba(23,35,31,.18); transition: transform .18s, background .18s; }
.start-button:hover { transform: translateY(-2px); background: var(--green); }
.start-button:disabled { opacity: .58; cursor: wait; transform: none; }
.start-button b { color: var(--green-bright); font-size: 20px; }
.problem-wrap { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
@media (max-width: 720px) { .problem-wrap { grid-template-columns: 1fr; } }
.advanced { display: inline-block; margin-top: 15px; }
.advanced summary { color: var(--muted); font-size: 11px; cursor: pointer; user-select: none; }
.advanced-grid { display: flex; gap: 12px; margin-top: 10px; }
.advanced label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.advanced select { width: 210px; border: 1px solid var(--line); background: #fff; padding: 9px 11px; border-radius: 10px; outline: none; font: inherit; font-size: 12px; color: var(--ink); }
.advanced input { width: 140px; border: 1px solid var(--line); background: #fff; padding: 9px 11px; border-radius: 10px; outline: none; }
.form-message { min-height: 18px; margin: 8px 0 -3px; font-size: 12px; color: var(--coral); }

.workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.runs-panel { padding: 22px 16px 18px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: hidden; }
.section-heading.compact { padding: 0 7px 14px; align-items: center; }
.section-heading.compact h2 { font-size: 18px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 12px; background: transparent; cursor: pointer; font-size: 19px; }
.icon-button:hover { background: rgba(31,106,80,.08); }
.run-list { display: grid; gap: 7px; max-height: calc(100vh - 125px); overflow-y: auto; padding: 1px 2px 2px; scrollbar-width: thin; }
.run-item-row { border: 1px solid transparent; border-radius: 15px; transition: .16s; }
.run-item-row:hover { background: rgba(255,255,255,.58); }
.run-item-row.selected { background: #fff; border-color: var(--line); box-shadow: 0 8px 18px rgba(31,43,37,.06); }
.run-item-actions { display: flex; justify-content: flex-start; align-items: center; gap: 2px; padding: 0 9px 8px 8px; }
/* 26 square rather than 24 by 22, and resting at .78 rather than .5: at half
   opacity the glyph sat at 1.98 against the card behind it, and an icon that
   is the only way to reach an action is held to three. */
.run-star { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: .78; transition: opacity .16s, color .16s, transform .16s; }
.run-star:hover:not(:disabled), .run-star:focus-visible { opacity: 1; }
.run-star:hover:not(:disabled) { opacity: 1; transform: scale(1.15); color: var(--yellow); }
.run-star.on, .run-item-row:hover .run-star.on { opacity: 1; color: var(--yellow); }
.run-star:disabled { cursor: not-allowed; }
.run-delete { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: .78; transition: opacity .16s, background .16s, color .16s; }
.run-delete:hover:not(:disabled), .run-delete:focus-visible { opacity: 1; }
.run-delete:hover:not(:disabled) { background: rgba(233,114,86,.14); color: var(--coral); }
.run-delete:disabled { opacity: .3; cursor: wait; }
.run-item { display: block; width: 100%; min-width: 0; border: 0; border-radius: 15px 15px 0 0; padding: 13px 13px 8px; text-align: left; background: transparent; cursor: pointer; }
.run-item-top { display: flex; align-items: center; gap: 8px; }
.run-item-direction { display: block; min-width: 0; flex: 1; font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-item-top i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #a7aea9; }
.run-item[data-state="running"] .run-item-top i, .run-item[data-state="active"] .run-item-top i { background: var(--green-bright); box-shadow: 0 0 0 4px rgba(126,224,172,.15); }
.run-item[data-state="failed"] .run-item-top i, .run-item[data-state="stopped"] .run-item-top i { background: var(--coral); }
.run-item-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }

.status-panel { min-height: 640px; padding: 30px; }
.hidden { display: none !important; }
.empty-state { min-height: 580px; display: grid; place-content: center; justify-items: center; text-align: center; }
.empty-state h2 { margin: 28px 0 7px; font-size: 24px; letter-spacing: -.03em; }
.empty-state p { margin: 0; max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-orbit { position: relative; width: 78px; height: 78px; border: 1px solid rgba(31,106,80,.2); border-radius: 50%; animation: spin 9s linear infinite; }
.empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; border: 1px solid rgba(31,106,80,.13); border-radius: 50%; inset: 12px; }
.empty-orbit::after { inset: 25px; background: var(--green); border: 0; }
.empty-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); }
.empty-orbit i:nth-child(1) { top: 2px; left: 34px; }.empty-orbit i:nth-child(2) { bottom: 10px; left: 4px; background: var(--green-bright); }.empty-orbit i:nth-child(3) { right: 2px; bottom: 19px; background: var(--coral); }
@keyframes spin { to { transform: rotate(360deg); } }

.run-header { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.run-title { min-width: 0; flex: 1 1 260px; }
.run-metrics { flex: 1 0 100%; }
.run-title-actions { display: flex; align-items: center; gap: 9px; }
.stop-button { border: 1px solid rgba(161,66,48,.25); border-radius: 999px; padding: 6px 10px; background: rgba(233,114,86,.08); color: #a14230; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.stop-button:hover:not(:disabled) { color: #fff; background: #a14230; border-color: #a14230; }
.stop-button:disabled { opacity: .42; cursor: default; }
.sync-button { border: 1px solid rgba(126,224,172,.45); border-radius: 999px; padding: 6px 10px; background: rgba(126,224,172,.18); color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.sync-button:hover:not(:disabled) { color: #fff; background: var(--green); border-color: var(--green); }
.sync-button:disabled { opacity: .38; cursor: default; }
.advance-button { border: 1px solid rgba(237,196,75,.45); border-radius: 999px; padding: 6px 10px; background: rgba(237,196,75,.16); color: #7a5b00; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.advance-button:hover:not(:disabled) { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.advance-button:disabled { opacity: .38; cursor: default; }
.step-button { border: 1px solid rgba(233,114,86,.28); border-radius: 999px; padding: 6px 10px; background: rgba(233,114,86,.10); color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.step-button.on { color: #fff; background: var(--coral); border-color: var(--coral); }
.run-title h2 { margin: 12px 0 4px; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.025em; line-height: 1.3; }
.run-title > p { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.run-metrics { display: grid; grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0; width: 100%; padding: 14px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.run-metrics > div { min-width: 0; padding: 0 20px; }
.run-metrics > div:first-child { padding-left: 0; }
.run-metrics > div + div { border-left: 1px solid var(--line); }
.run-metrics span { display: block; color: var(--muted); font-size: 10px;
  line-height: 1.4; font-weight: 500; }
.run-metrics strong { display: block; margin-top: 6px; color: var(--ink);
  font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#cost-value { font-size: 16px; }
.progress-track { width: 100%; height: 4px; margin: 25px 0 19px; background: rgba(23,35,31,.08); border-radius: 99px; overflow: hidden; }
.progress-track div { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green-bright)); border-radius: inherit; transition: width .5s ease; }

.current-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 19px; color: white; background: var(--ink); }
.current-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -125px; border-radius: 50%; border: 1px solid rgba(126,224,172,.18); box-shadow: 0 0 0 34px rgba(126,224,172,.03), 0 0 0 68px rgba(126,224,172,.025); }
.current-index { width: 55px; height: 55px; border-radius: 17px; display: grid; place-items: center; background: var(--green-bright); color: var(--ink); font-weight: 900; font-size: 15px; transform: rotate(-3deg); }
.current-card.stopped .current-index, .current-card.failed .current-index { background: var(--coral); color: #fff; }
.current-card.budget_stopped .current-index, .current-card.stopping .current-index { background: var(--yellow); color: var(--ink); }
.current-card.paused .current-index { background: var(--blue); color: #fff; }
.current-card.completed .current-index { background: var(--green); color: #fff; }
.current-card h3 { margin: 4px 0 3px; font-size: 18px; }
.current-card p:last-child { margin: 0; color: rgba(255,255,255,.57); font-size: 11px; }
.pulse-bars { display: flex; height: 28px; align-items: center; gap: 3px; margin-right: 8px; z-index: 1; }
.pulse-bars i { display: block; width: 3px; border-radius: 3px; background: var(--green-bright); animation: pulse 1.1s ease-in-out infinite alternate; }
.pulse-bars i:nth-child(1) { height: 8px; }.pulse-bars i:nth-child(2) { height: 22px; animation-delay: .2s; }.pulse-bars i:nth-child(3) { height: 14px; animation-delay: .4s; }.pulse-bars i:nth-child(4) { height: 25px; animation-delay: .1s; }
@keyframes pulse { to { transform: scaleY(.35); opacity: .45; } }

.pipeline-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 30px 2px 14px; }
.pipeline-heading h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.025em; }
.pipeline-heading > p { margin: 0; color: var(--muted); font-size: 11px; }
.pipeline { border-top: 1px solid var(--line); }
.step-item { min-height: 72px; display: grid; grid-template-columns: 25px 52px minmax(0,1fr) 116px 72px 62px 62px 72px; align-items: stretch; column-gap: 12px; border-bottom: 1px solid var(--line); }
.step-rail { position: relative; display: flex; justify-content: center; }
.step-rail i { width: 1px; height: 100%; background: var(--line); }
.step-dot { position: absolute; z-index: 1; top: calc(50% - 6px); width: 12px; height: 12px; background: var(--paper); border: 2px solid #b5bbb7; border-radius: 50%; }
.step-item.completed .step-dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.step-item.skipped .step-dot { border-color: #b5bbb7; background: #e5e7e5; }
.step-item.running .step-dot { border-color: var(--green-bright); background: var(--green-bright); box-shadow: 0 0 0 6px rgba(126,224,172,.14); }
.step-item.failed .step-dot { border-color: var(--coral); background: var(--coral); }
/* The step a run stopped inside: the run's own colour, because that is where the run is,
   and hollow, because nothing is working on it. Coral would say a gate had killed it --
   which is what made a run being stepped look at every step like a run that had died. */
.step-item.stopped .step-dot { border-color: var(--green); background: var(--paper); box-shadow: 0 0 0 6px rgba(31,106,80,.10); }
.step-phase { align-self: center; text-align: center; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.step-index { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.step-phase-label { display: block; }
.step-copy { align-self: center; min-width: 0; padding: 12px 0; }
.step-copy h4 { margin: 0; font-size: 13px; letter-spacing: -.01em; }
/* Three lines at any width. The description is the least of what a row carries, and
   a long one pushed the counts down the page as the window narrowed. */
.step-copy p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.38;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden; }
.step-count { align-self: center; min-width: 0; text-align: right; white-space: nowrap; }
.step-count > div { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.step-count strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-count strong.step-count-array { font-size: 12px; }
.step-model { display: block; font-size: 9px; letter-spacing: .02em; color: var(--muted); }
.step-share { font-size: 10px; font-style: normal; font-weight: 600; color: var(--muted); }
.step-count span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.step-spend { align-self: center; text-align: right; }
.step-spend strong { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.step-spend span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.step-opens { align-self: center; justify-self: end; display: flex; flex-direction: column; gap: 4px; }
.step-reads { align-self: center; justify-self: end; display: flex; flex-direction: column; gap: 4px; }
.step-read { align-self: stretch; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: rgba(255,255,255,.58); color: var(--green); font-size: 9px; font-weight: 800; cursor: pointer; transition: .15s; }
.step-read:hover:not(:disabled) { background: var(--ink); color: var(--green-bright); border-color: var(--ink); }
.step-read:disabled { color: #aab0ac; opacity: .45; cursor: default; }
.step-open { align-self: stretch; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: rgba(255,255,255,.58); color: var(--green); font-size: 9px; font-weight: 800; cursor: pointer; transition: .15s; }
.step-open:hover:not(:disabled) { background: var(--ink); color: var(--green-bright); border-color: var(--ink); }
.step-open:disabled { color: #aab0ac; opacity: .45; cursor: default; }
.step-state { align-self: center; justify-self: end; padding: 5px 8px; border-radius: 999px; color: #858d88; background: rgba(23,35,31,.05); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.step-item.completed .step-state { color: var(--green); background: rgba(31,106,80,.08); }
.step-item.skipped { opacity: .62; }
.step-item.skipped .step-state { color: #6f7772; background: rgba(23,35,31,.06); }
.step-item.running { background: linear-gradient(90deg, rgba(126,224,172,.06), transparent); }
.step-item.running .step-state { color: var(--green); background: rgba(126,224,172,.16); }
.step-item.failed .step-state { color: #a14230; background: rgba(233,114,86,.10); }
.step-item.stopped .step-state { color: var(--green); background: rgba(31,106,80,.07); }
.skeleton { background: linear-gradient(90deg, rgba(23,35,31,.04), rgba(255,255,255,.65), rgba(23,35,31,.04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.run-skeleton { height: 61px; border-radius: 15px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .runs-panel { position: static; max-height: none; }
  .run-list { display: flex; overflow-x: auto; max-height: none; }
  .run-item-row { min-width: 220px; }
  .run-header { flex-direction: column; }
  .run-metrics { width: 100%; }
  .run-metrics > div { flex: 1; }
}

@media (max-width: 680px) {
  .topbar, main { padding-left: 18px; padding-right: 18px; }
  .connection { display: none; }
  .launch-panel, .status-panel { padding: 22px 18px; }
  .section-heading { display: block; }
  .section-note { margin-top: 10px; }
  .start-button { min-height: 56px; }
  .run-metrics { grid-template-columns: 1fr 1fr 1.4fr; }
  .run-metrics > div { padding: 0 10px; }
  .run-metrics strong, #cost-value { font-size: 14px; }
  .current-card { grid-template-columns: 50px 1fr; }
  .pulse-bars { display: none; }
  .step-item { grid-template-columns: 20px 38px minmax(90px,1fr) 96px 50px 48px 48px; column-gap: 7px; }
  .step-state { display: none; }
  .step-copy p { -webkit-line-clamp: 3; line-clamp: 3; }
  .step-count strong { font-size: 13px; }
  .step-share { font-size: 9px; }
  .step-count strong.step-count-array { font-size: 10px; }
  .step-spend strong { font-size: 11px; }
  .step-open, .step-read { padding: 5px 6px; font-size: 8px; }
}

/* Four phases, each opening onto the steps that carry it out. */
/* The four phases of a run. Each carries its own hue on a left rail, so the sequence
   reads as four things rather than four copies of one thing, and the fill under the
   head shows how far into a phase the run is without opening it. */
.step-group { position: relative; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: var(--panel); overflow: hidden; --accent: var(--green); transition: border-color .18s ease, box-shadow .18s ease; }
.step-group:nth-of-type(1) { --accent: #3f9078; }
.step-group:nth-of-type(2) { --accent: #4d84c8; }
.step-group:nth-of-type(3) { --accent: #c2853a; }
.step-group:nth-of-type(4) { --accent: #8f66b4; }
.step-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .5; }
.step-group:hover { border-color: rgba(23,35,31,.2); box-shadow: 0 10px 24px rgba(31,43,37,.07); }
.step-group[open] { box-shadow: 0 10px 26px rgba(31,43,37,.06); }

.group-head { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 13px; padding: 13px 15px 12px 18px; cursor: pointer; list-style: none; user-select: none; }
.group-head::-webkit-details-marker { display: none; }
.group-head:hover { background: rgba(0,0,0,.015); }
.group-index { font-size: 19px; font-weight: 800; color: var(--accent); opacity: .4; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.group-headline { display: grid; gap: 3px; min-width: 0; }
.group-title { font-size: 14px; font-weight: 750; letter-spacing: .005em; }
.group-meta { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.group-meta > span:not(:first-child)::before { content: "·"; margin-right: 9px; color: rgba(23,35,31,.28); }
.group-progress b { font-weight: 700; color: var(--ink); }
.group-time:empty, .group-spend:empty { display: none; }
.group-caret { font-size: 11px; color: var(--muted); transition: transform .15s ease; }
details[open] > .group-head .group-caret, details[open] > .subgroup-head .group-caret { transform: rotate(180deg); }
.group-bar { display: block; height: 2px; background: rgba(23,35,31,.07); }
.group-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0 999px 999px 0; transition: width .4s ease; }

.step-group.group-running { border-color: var(--accent); }
.step-group.group-running::before { opacity: 1; animation: rail-pulse 1.9s ease-in-out infinite; }
.step-group.group-running .group-index { opacity: .9; }
@keyframes rail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.step-group.group-done::before { opacity: .26; }
.step-group.group-done .group-index { opacity: .3; }

/* A rebuttal round inside a phase. */
.step-subgroup { border: 1px dashed var(--line); border-radius: 11px; margin: 6px 0 6px 26px; }
.subgroup-head { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.subgroup-head::-webkit-details-marker { display: none; }
.subgroup-title { font-size: 12px; font-weight: 650; }
.subgroup-progress { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.subgroup-body { padding: 0 6px 6px; }
.step-subgroup.group-running { border-color: rgba(96,165,250,.55); border-style: solid; }
.subgroup-fixed > .subgroup-head { cursor: default; }
.subgroup-fixed > .subgroup-head .group-caret { visibility: hidden; }

.current-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.current-group { font-size: 18px; font-weight: 700; color: #fff; }
.current-sep { font-size: 18px; color: rgba(255,255,255,.5); }
.current-group:empty, .current-group:empty + .current-sep { display: none; }

/* The prompt a step ran, opened in place rather than in whatever edits .md files. */
.step-prompt { grid-column: 1 / -1; margin: 8px 0 2px; padding: 13px 15px; border-radius: 12px;
  background: rgba(23,35,31,.045); border: 1px solid var(--line); font-size: 11.5px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 340px;
  overflow: auto; color: var(--ink); }
.step-prompt b { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--muted); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; }

/* The user view: what the search is for and what it made, with none of the machinery
   that running it needs. Served by its own executable on its own port. */
/* The panels here carry no padding of their own -- the console's each set theirs --
   so text sat flush against the rounded border. The page inset is one number, used by
   the header as well, so the two line up. */
.user-body { --page-inset: 38px; display: flex; flex-direction: column;
  min-height: 100vh; padding-top: 82px; }
/* A bulb with the growth rising into it, drawn in line rather than filled: the sign for
   what the page is for. It is the switch for the colours as well, so the button around
   it stays a thumb wide while the drawing itself is mostly air. The strokes take the
   button's own `color`, and `--green` is the one colour that needs saying once -- dark
   on the cream, light on the dark. */
:is(.user-top, .gate-head) .mark, .control-mark { width: 46px; height: 46px; border-radius: 15px; border: 0; padding: 0;
  background: #f6e7a4; color: var(--green); cursor: pointer;
  display: grid; place-content: center; transform: rotate(-4deg); }
:is(.user-top, .gate-head) .mark svg, .control-mark svg { display: block; height: 26px; width: auto; }
.control-mark { flex-shrink: 0; cursor: default; }
.brand .back-to-search { margin-left: 12px; }
/* A sentence, not a label. The eyebrow's 10px at .18em tracking is meant for three
   uppercase words; a line of prose set that way is a strip of letters to be decoded
   rather than read. Scoped here so the state line over the run keeps the label form. */
:is(.user-top, .gate-head) .eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  line-height: 1.45; color: var(--muted); }
/* The name over the line that says what it is for, the two beside the mark. The name is a
   size above the line, in the green; the line under it is grey. */
:is(.user-top, .gate-head) .product { display: flex; flex-direction: column; gap: 3px; }
:is(.user-top, .gate-head) .product-name { font-size: 20px; font-weight: 750; letter-spacing: -.01em;
  line-height: 1; color: var(--green); }
.user-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 2px; margin: 0; padding: 10px var(--page-inset);
  min-height: 62px; background: var(--paper); }
:is(.user-top, .gate-head) .mark { width: 42px; height: 42px; border-radius: 8px;
  background: transparent; transform: none; }
:is(.user-top, .gate-head) .mark svg { width: 26px; height: 32px; transform: translateY(-3px); }
.user-top .mark:hover { color: var(--green-text); }
.start-heading { position: relative; max-width: 720px; margin: 0 auto 18px; padding: 0 95px; }
.start-heading .tickets { position: absolute; right: 0; bottom: 0; margin: 0; }
/* How many searches are left, at the far end of the line. */
.tickets { margin: 0 0 0 auto; white-space: nowrap; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted); }
.tickets b { color: var(--ink); font-weight: 760; }
/* Nothing left to spend: the number is the reason a search will be refused, so it stops
   reading as one more label. */
.tickets.spent { color: var(--coral); }
.tickets.spent b { color: var(--coral); }
.user-main { padding-left: var(--page-inset); padding-right: var(--page-inset); }
/* The brim of a panel, named so the head of the run's panel can reach out to its edges. */
.user-main > .panel, .user-workspace > .panel { --brim-y: 26px; --brim-x: 28px;
  padding: var(--brim-y) var(--brim-x); min-width: 0; }
.user-main > .panel > *, .user-workspace > .panel > * { min-width: 0; }
/* The same two columns the console uses, so the earlier searches sit where they do
   there: a sticky rail on the left and the run beside it. */
/* One column, so the searches sit above the run they pick out rather than in a rail
   beside it. The rail was 310px of a wide screen spent on a list that is read once. */
/* Three columns: the earlier searches down the left, the drawing in the middle, and the
   window for the pressed strand on the right. */
.user-workspace { margin-top: 0; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.run-panel { --swatch: 9px; }
.branch-actions { position: absolute; z-index: 30; display: flex; gap: 3px; }
.branch-action { display: grid; place-items: center; width: 24px; height: 24px;
  padding: 4px; border: 0; border-radius: 6px; background: var(--paper);
  color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.branch-action svg { display: block; width: 16px; height: 16px; fill: currentColor;
  stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.branch-action.next { color: var(--red-text); }
.branch-action.now { color: var(--yellow); }
.branch-action:hover { background: color-mix(in srgb, var(--ink) 7%, var(--paper)); }
.branch-action:disabled { opacity: .5; cursor: wait; }
.branch-action:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.run-body { position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  column-gap: 24px; align-items: stretch; }
/* How long the run has taken, beside what state it is in. */
.run-name .track-total { flex: 0 0 auto; font-size: var(--run-text);
  letter-spacing: .06em; color: var(--muted); }
.run-body > .detail-room { position: relative; min-height: 0; }
/* No padding of its own: the three panels on this page take the same brim from the
   rule above, at both widths, and the strip had been left with a tighter one from when
   it was a rail. */
.user-workspace > .runs-panel { position: sticky; top: 16px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.user-workspace > .runs-panel[hidden] { display: none; }
.user-workspace > .runs-panel .section-heading.compact { padding: 0 0 10px; }
/* The two panel titles are the same kind of thing, so they are set the same way. The
   strip's was 15px carrying the section heading's tight tracking, the run's 20px with
   none, and side by side they read as two different ranks of heading. */
.user-workspace > .runs-panel .section-heading.compact h2,
.run-top h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: normal;
  line-height: 1.2; }
/* The question belongs over the thing that answers it, not in a band above the page:
   it now stands at the top of the panel the search is started from. */
.start-title { margin: 0; font-size: 26px; line-height: 1.15;
  letter-spacing: -.02em; text-align: center; }
/* Whose page this is, in the question rather than off in a corner. 3.2:1 on the paper,
   which is the floor for text this size. */
.start-title .who { color: var(--blue); }
/* One column down the middle: the question, the box under it, the settings under that.
   The box used to sit below a row of controls pinned to the right edge of a full-width
   panel, which put the first thing you touch furthest from where you were reading. */
#user-form { max-width: 720px; margin: 0 auto; }
.user-main { flex: 1; width: 100%; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 18px; }
.user-main > * { min-width: 0; }
/* Which of the two kinds of search is being started is a choice between two, the same
   shape as the pace beside it, so it is the same control. The box it names sits under
   it, and the settings that apply to either sit across from it on the same line. */
/* The settings and the button, at the end of the line under the question. The switch
   between two kinds of search stood at the other end of it and is gone. */

/* One way in, so the panel is one height: there is nothing left to switch to that
   would change it. */
.start-fields { margin-top: 0; }
/* One line to begin with, growing with what is typed and scrolling past the point where
   it would push the rest of the page down. A statement runs to 2000 characters, so a box
   fixed at one line would hide all but the last of them. */
.start-panel textarea { display: block;
  min-height: var(--control-height); max-height: 240px;
  padding: 13px 20px; font-size: 16px; line-height: 1.5; border-radius: 16px;
  resize: none; background: #fff; box-shadow: 0 6px 18px rgba(23,35,31,.05); }
/* Nothing typed yet: a prompt that outran the one line the box stands at had it offering
   a scrollbar for text nobody had written. */
.start-panel textarea:placeholder-shown { overflow-y: hidden; }
/* Room for the question mark, so no line runs under it. */
.start-panel textarea { padding-right: 46px; }
/* The examples, behind a question mark rather than inside the box: the one that used to
   be the placeholder ran to 170 characters against the 91 a line holds, and the box is
   one line. */
.start-fields { position: relative; }
/* The mark is centred on the box it sits in, so what it is centred on is the box and
   nothing else. Hung off `.start-fields`, it was centred on the input plus the Advanced
   toggle below it and plus the Advanced panel when that is open: twelve pixels low with
   the panel shut and forty with it open, at every width. */
.start-box { position: relative; }
.ask { position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 27px; height: 27px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .16s, background .16s; }
.ask:hover { color: var(--green-text); background: rgba(23,35,31,.06); }
.ask[aria-expanded="true"] { color: var(--green-text); background: rgba(31,106,80,.1); }
.ask svg { width: 19px; height: 19px; display: block; }
.ask .ask-go, .ask[data-ready="true"] .ask-mark { display: none; }
.ask[data-ready="true"] .ask-go { display: block; }
.ask[data-ready="true"] { background: var(--ink); color: #fff; }
.ask[data-ready="true"]:hover { background: var(--green); color: #fff; }
.ask:disabled { opacity: .55; cursor: wait; }
.examples { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 13px 12px; border: 1px solid var(--line); border-radius: 18px;
  background: #fff; box-shadow: 0 20px 46px rgba(23,35,31,.13); }
.examples[hidden] { display: none; }

/* The settings a search does not usually need: what it may spend, and how fast. Folded
   away because the page is built not to put money in front of someone waiting for an
   idea -- but the run has a ceiling either way, and this is where it is said. */

.advanced-toggle { position: static; flex: 0 0 auto; margin: 0;
  border: 0; background: none; padding: 9px 0; line-height: 20px;
  cursor: pointer; white-space: nowrap; color: var(--muted);
  font-size: 11px; letter-spacing: .05em; transition: color .16s; }
.advanced-toggle:hover, .advanced-toggle[aria-expanded="true"] {
  opacity: 1; color: var(--green-text); }
.user-body .advanced { position: absolute; left: calc(100% + 18px); bottom: 0;
  display: grid; gap: 9px; width: max-content; max-width: 100%; margin: 0;
  justify-items: start; white-space: nowrap; z-index: 20; }
.user-body .advanced[hidden] { display: none; }
.advanced-item { display: grid; gap: 4px; justify-items: start; }
.launch-panel .section-heading h2 { font-size: 22px; line-height: 1.25; }
.launch-panel textarea { min-height: 76px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.launch-panel .start-button { min-width: 92px; min-height: 40px; padding: 0 11px;
  border-radius: 10px; gap: 10px; font-size: 12px; }
.launch-panel .start-button b { font-size: 16px; }
.user-top-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.demo-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--green-text);
  font-size: 12px; font-weight: 650; text-decoration: none; }
.demo-button:hover { border-color: var(--green-text); }
.demo-button:focus-visible { outline: 2px solid var(--green-text); outline-offset: 4px; }
@media (max-width: 600px) {
  .user-top-actions { gap: 10px; }
  .user-top .eyebrow { display: none; }
  .demo-button { padding: 8px 10px; }
}
#developer-tools { flex-shrink: 0;
  height: 42px; appearance: none; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); padding: 4px 0;
  font: inherit; font-size: 11px; letter-spacing: .02em; cursor: pointer;
  transition: color .16s; }
#developer-tools::after { content: " ↗"; margin-left: 4px; }
#developer-tools:hover { color: var(--green-text); }
#developer-tools:focus-visible { outline: 2px solid var(--green-text); outline-offset: 4px; }
/* Open to the right when there is room; keep the controls on screen on smaller widths. */
@media (max-width: 1240px) {
  .user-body .advanced {
    left: auto; right: 0; top: calc(100% + 8px); bottom: auto;
    padding: 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper); }
}
/* Wanted and Pace are one line of settings: two words and two small controls, and one
   above the other they stood as tall as the box beside them.
   They read as one line only if the two words start at the same height and the two boxes
   end at the same height, so the row hangs from the top and the boxes are one height, said
   once. Hung from the bottom instead, with a box under each word that worked its own
   height out of its padding and its type, the two words sat a couple of pixels apart. */
.advanced-row { display: flex; align-items: start; gap: 24px; --control: 30px; }
/* Which end of W1B a batch leans on: an operator applied straight to its entry points, or
   one applied through a structural handle under them. The two words stand over the two
   ends of the bar and are its whole caption -- a word above them saying which setting this
   is would say less than the ends of it do. */
/* As wide as the line of settings above it, and no wider: it starts under Wanted and ends
   under the right edge of Pace, so the panel reads as one block. */
.advanced-item > span:first-child { font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 720; }
.advanced-money { display: inline-flex; align-items: center; gap: 2px;
  font-size: 13px; color: var(--ink); }
.advanced-money input { width: 52px; height: var(--control); padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px; background: #fff; font: inherit; font-size: 13px;
  color: var(--ink); outline: none; }
.advanced-money input:focus { border-color: rgba(31,106,80,.55);
  box-shadow: 0 0 0 3px rgba(31,106,80,.09); }
.scope-row { position: relative; display: flex; align-items: flex-start; gap: 18px;
  margin: 8px 0 0 14px; }
.scope-field { display: flex; flex: 1; min-width: 0; align-items: flex-start; gap: 12px;
  margin: 0; border-bottom: 1px solid var(--line); }
.scope-field > span { flex: 0 0 auto; padding-top: 9px;
  color: var(--muted); font-size: 12px; line-height: 20px; }
.start-panel .scope-field textarea { flex: 1; min-width: 0; min-height: 38px;
  max-height: 138px; padding: 9px 0; border: 0; border-radius: 0;
  font-size: 13px; line-height: 20px; background: transparent; box-shadow: none; }
.scope-field:focus-within { border-bottom-color: var(--green); }
.scope-field textarea:focus { background: transparent; box-shadow: none; }
:root[data-theme="dark"] .scope-field textarea { background: transparent; }
.advanced-model { position: relative; width: 100%; }
.advanced-model::after { content: ""; position: absolute; right: 12px; bottom: 13px;
  width: 5px; height: 5px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.advanced-model select { appearance: none; width: 100%; height: var(--control);
  padding: 0 30px 0 11px; box-sizing: border-box; border-radius: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: normal; cursor: pointer;
  transition: border-color .16s, box-shadow .16s; }
.advanced-model select:hover { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.advanced-model select:focus-visible { border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent); }
:root[data-theme="dark"] .advanced-model select { color-scheme: dark;
  background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .advanced-model select:focus-visible {
  box-shadow: inset 0 -1px var(--green); border-radius: 0; }
:root[data-theme="dark"] .advanced-model option {
  color: var(--ink); background: var(--paper); }
:root[data-theme="dark"] .advanced-model option:checked {
  color: var(--ink); background: #304139; }
/* Two paces, not three: the queue-everything one saves half and can sit for an hour,
   which is not a choice worth putting in front of someone waiting for an idea.
   The same height and the same corner as the box beside it, and no wider than the two
   words in it need. */
.segmented { display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; padding: 2px; gap: 2px;
  height: var(--control); }
.segmented button { display: flex; align-items: center; border: 0; border-radius: 8px;
  background: transparent; padding: 0 10px; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer; transition: background .16s, color .16s; }
.segmented button:hover { color: var(--ink); }
.segmented button.on { background: var(--ink); color: #fff; font-weight: 650; }
:root[data-theme="dark"] .advanced-money input,
:root[data-theme="dark"] .segmented { background: #1b2320; }
/* What to write, and the legend for the two colours in one line: the two words wear what
   the two parts wear below, so nothing has to explain which is which. */
.examples-hint { margin: 0 4px 6px; font-size: 14px; line-height: 1.5; color: var(--ink);
  font-weight: 560; }
/* Under the instruction and over what follows it, which is the whole of its job. */
.examples-head { margin: 0 4px 2px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 720; }
.is-domain { color: var(--blue-text); font-weight: 680; }
.is-problem { color: var(--red-text); font-weight: 680; }
/* Each one is a button because clicking it puts it in the box: a reader unsure how much
   of the problem to write down gets to start from one rather than retype it. */
.example { text-align: left; border: 0; border-radius: 12px;
  background: transparent; padding: 10px 12px; font-size: 13.5px;
  line-height: 1.55; color: var(--muted); cursor: pointer;
  transition: background .16s, color .16s; }
.example:hover { color: var(--ink); background: rgba(23,35,31,.05); }
/* The console tucks this line up against what follows it with a negative margin. Here
   it is the last thing in the panel, and that margin was eating three of the panel's
   own twenty-six. */
.start-panel .form-message { margin-bottom: 0; }
/* Empty, it takes nothing. The reserved eighteen pixels plus its top margin sat under
   the last visible thing in the panel for the whole life of the page, so the panel
   looked as though it had twice the brim the other two have. It only grows when there
   is something to say, and that is a moment the reader is already looking at. */
.start-panel .form-message:empty { min-height: 0; margin: 0; }
/* The height the whole row stands at: the count, the two paces and the button read as
   one line of controls rather than three sizes. */
.start-panel { --control-height: 50px; }

.run-panel.hidden, .hidden { display: none; }
/* The same three states the bar is painted in. Scoped to this line rather than to
   .eyebrow, which the page header and the strip's heading also use. */
/* The state beside the name, and the button that stops it: both are set elsewhere for
   the console, so the panel's own size is asked for here rather than there. */
.run-top .eyebrow { font-size: var(--run-text); letter-spacing: .12em; }
.run-panel .stop-button { padding: 5px 11px; font-size: var(--run-text); }
#run-state-line { color: var(--tone); }
/* Two sizes in the whole panel: the run's name, and everything else. Nine sizes stood
   here -- 9px for the buttons and the word Elapsed, 10px for the state and the colour
   key, 11px, 12px, 12.5px, 15px -- and a panel set in nine sizes reads as nine kinds of
   thing rather than as one run. The name is the heading; the rest is one voice. */
.run-panel { --run-text: 11px; }
/* The head of the panel, across the whole of it to its edges and ruled off from the
   drawing below: the panel is one card in two parts, the run's name over its tree. */
.run-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: calc(-1 * var(--brim-y)) calc(-1 * var(--brim-x)) 18px;
  padding: 16px var(--brim-x); border-bottom: 1px solid var(--line);
  border-start-start-radius: inherit; border-start-end-radius: inherit;
  background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* At the panel's own edge, the same inset from it that the name across from them has.
   Pulled in to the end of the bar below they were the one thing on the line that did not
   line up with anything on it. */
.run-buttons { display: flex; align-items: center; gap: 8px; }
.run-heading { flex: 1 1 auto; min-width: 0; }
/* The search's own name first and what became of it after it, on one line: the state
   was standing over the title as a heading of it, which read as though STOPPED were
   the category and the direction its subject. */
.run-name { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0; }
/* The title gives way and wraps; the state never does. A long direction was laying
   itself out on one line and shouldering the buttons onto a row of their own. */
.run-name #run-title { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.run-name #run-state-line { flex: 0 0 auto; }
/* One unbroken bar across the box, as wide as the box is, so it follows the window.
   It is 2 + 8 + 17 + 6 units long -- the steps each phase holds -- which makes a step
   the same distance wherever it falls, and the fill advance by steps done rather than
   by phases entered. The phases divide the names below it, not the bar itself. */
/* The ruler in a narrow column on the left and the drawing beside it, one row, so the
   ruler is exactly as tall as the drawing. */
.track { --ruler-width: 74px; --tree-shift: 18px; --ruler-head: 16px; --key-pad: 7px; position: relative;
  margin: calc(-4 * var(--swatch) + 14px + 1.6 * var(--run-text)) 0 0; display: grid;
  grid-template-columns: var(--ruler-width) minmax(0, 1fr); }
/* The colour key, two by two, laid over the drawing above the right half of its first
   fan -- its first line of words level with the ruler's name, set at the same line
   height and raised by its own padding, and centred over the branches between the
   trunk and the outermost one, which reach from the middle of the drawing to 93% of
   its width. Its two columns stand three swatches apart. On a wash of the panel so
   the strands under it do not run through the words. */
.track > .tone-key { position: absolute; z-index: 1;
  top: calc(var(--ruler-head) - var(--key-pad)); line-height: 1;
  left: calc(var(--ruler-width) + (100% - var(--ruler-width)) * .72 - var(--tree-shift));
  transform: translateX(-50%);
  display: grid; grid-template-columns: auto auto; gap: 5px calc(3 * var(--swatch));
  height: auto; margin: 0; padding: var(--key-pad) 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); }
.track > .ruler-cell { grid-column: 1; grid-row: 1; }
.track > .tree-space { grid-column: 2; grid-row: 1; width: 100%;
  aspect-ratio: 276 / 300;
  transform: translateX(calc(-1 * var(--tree-shift))); }
/* Sat between the scale over it and the names of the colours under it. The drawing keeps
   a little air of its own inside its box, more at the foot than at the head, and the row
   of names carries its own margin under that -- so what is set here is what is left to
   make the gap above match the gap below. */
.tree { display: block; margin: 0; pointer-events: auto; }
/* A branch draws itself in: the length is measured after it is in the document
   and written back as a variable, so the same rule serves every length. */
/* The panel is a third of the width the tree is drawn at, so a stroke measured in the
   drawing's own units would come out a fifth of a pixel. The widths are the ones a
   reader sees rather than the ones the geometry is written in. */
/* A branch drawn as a bar rather than as a line: the track is the whole run it could
   have had, and over it the fill is the part it got through. The fill rolls forward to
   the rung it reached and is left there -- the same three colours the bar was painted
   in, blue while it goes, green at the end, red where it stopped short.
   `--len` is written back from the script once the path is in the document, since only
   then can the length be measured. Until it is, the fallback holds the fill off the page
   rather than letting it flash full for a frame. */
/* Widths are in the drawing's own units, not in device pixels. Held at a device width
   -- `vector-effect: non-scaling-stroke` -- the dash pattern is measured in device space
   too, so the same dash covered a different share of the path at every zoom and a short
   strand grew as the page was scaled up. The renderer is still asked not to snap a
   hairline to the pixel grid: snapping is what pulls one strand onto two rows. */
/* How thick a line in the drawing is, said once, as a property every line inherits from
   the class it carries. In the drawing's own units -- the viewBox scales it to the page.
   Only the length differs from line to line, and that is `--len` below.

   It was set at every line as it was drawn, from a multiplier over a weight written at each
   call: eight thicknesses and one scale over them. They did not stay in step -- a capability
   came out heavier than the prototype it continues, which put a step in the line at W3A on
   the one level meant to be the same strand carrying on. */
/* Every line is one thickness, every mark one size, said once here and carried by the class
   each of them wears. In the drawing's own units -- the viewBox scales them to the page.
   What differs from one line to the next is its length, and that is `--len`.

   They were set at each one as it was drawn: eight thicknesses over one scale, and four
   radii in a table in the script. Eight places to keep in step, and they did not stay in
   step -- a capability came out heavier than the prototype it continues, which put a step in
   the line at W3A on the one level meant to be the same strand carrying on. */
/* With a unit: in SVG a CSS px is one user unit, and `calc()` needs a length. Written bare,
   `r: var(--dot)` took it and `calc(var(--dot) * 2)` came out as nothing -- so the square off
   the end of a strand had no width and the light riding a line had no stroke. */
.tree { --stroke: .7px; --dot: 1.6px; --ring: 2.6px; --ring-open: 3.6px; }
.limb-bar, .limb-sweep { shape-rendering: geometricPrecision; }
.limb-bar { stroke-width: var(--stroke); stroke-linecap: round; }
/* A little wider than the line it rides, so the light spreads past its edges. */
.limb-sweep { stroke-linecap: butt; }
/* A mark: the dot itself, the ring that says it opens, and the target over both -- the
   strand under a mark is a hairline and there is nothing else to aim at. */
.tip { r: var(--dot); }
/* The end of a retrieved paper, smaller than a method's so the page is not spotted. */
.pip { r: calc(var(--dot) * .6); }
.knob .ring { r: var(--ring); stroke-width: var(--stroke); }
.knob.open .ring { r: var(--ring-open); }
/* What takes the press is what is drawn: the ring for a knob, the mark for a paper.
   A target wider than the mark reaches past it, and on a fan whose lanes are two
   units apart it reached over its neighbours. */
.knob .target { r: var(--ring); }
/* The final document is an actual button at the end of its strand. It used to be a square
   the size of an ordinary dot: technically clickable, but too small to read as an action.
   The square carries only the download arrow; its native SVG title names it on hover. */
.paper .paper-arrow { fill: none; stroke: white; stroke-width: .72px;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Held off the page until something rolls it on. What does that is the script: a line's
   roll is made paused and played when the fan before its own has finished, so no fan has
   to be told in advance how long the one before it takes. As a CSS animation it could
   only be told in milliseconds worked out ahead of the drawing, and those were wrong. */
.limb-bar { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
/* Redrawn one step further on rather than drawn for the first time: it goes up where it
   had got to, without rolling forward from nothing again. */
.limb-bar.limb-still { stroke-dashoffset: 0; }
/* Still going, so it carries a cast of its own colour; stopped short, so it is marked
   without being lit. A branch that got to the end is left flat. */
.limb-bar.moving { filter: drop-shadow(0 0 3px rgba(92,144,208,.45)); }
/* Under the hand: the strand itself, in its own colour, so a reader can see which line the
   panel below is about. */
.limb-bar.lit { filter: drop-shadow(0 0 4px var(--tone)); stroke-width: 1.4; }
.tree .limb-bar.selected { filter: drop-shadow(0 0 2px rgba(255,255,255,.95))
  drop-shadow(0 0 7px rgba(77,132,200,.9)); stroke-width: 1.65; }
/* A fan where most branches stopped is mostly red, and the few still going vanish into
   it. What stopped is held back so that what is still going reads at a glance. */
.limb-bar.dropped { opacity: .8; }
.limb-bar.finished { filter: drop-shadow(0 0 2px rgba(23,114,79,.28)); }
/* Stood and waiting its turn. Held back like what stopped, because what the reader is
   looking for is the one strand being carried now. */
.limb-bar.pending { opacity: .85; filter: none; }
/* The run has not said what became of this one. Not one of the four states -- a question
   the record does not answer -- so it is drawn flat and dim rather than coloured in. */
.limb-bar.unread { opacity: .5; filter: none; }
/* A formulation that stood ends in a tip that opens its design phase. The ring is what
   says it can be opened; the branch under it is a hairline, so the target over it is
   larger than anything drawn. One opens at a time -- several fans in the width of one
   cannot be read, which is what the drawing this came from settled on. */
/* A branch of the fan, pressed to read what its operator made of the problem. It lies
   over the hairline that is drawn, as wide as the gap to the next branch and painted in
   nothing: the line itself is too thin to aim at. `stroke` is what is pressed, not the
   area inside the path, which for an open curve would be most of the drawing. */
.limb-hit { cursor: pointer; pointer-events: stroke; }
.knob { cursor: pointer; }
.knob .ring { transition: opacity .2s, r .2s; }
.knob:hover .ring { opacity: .75; }
/* The proposal off the end of the strand that wrote it. */
.paper { cursor: pointer; }
.paper .paper-button { transition: opacity .2s, stroke-width .2s; }
.paper:hover .paper-button, .paper:focus-visible .paper-button { opacity: 1; }
.paper:focus-visible { outline: none; }
.paper:focus-visible .paper-button { stroke: white; stroke-width: .65px; }
.limb-sweep { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .limb-bar { animation: none; stroke-dashoffset: 0; }
  .limb-sweep { display: none; }
}
/* What the four colours mean. Four states told apart by colour need the colours named
   somewhere, and the drawing has no room to write on a hairline. One line, fixed, like
   the line of numbers under it. */
.tone-key { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px;
  margin: 12px 0 0; height: 1.5em; line-height: 1.5; overflow: hidden;
  font-size: var(--run-text); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.tone-key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* The four swatches, and only those: each carries the class that colours it. The clock
   at the far end of the same line writes its own label in an `i` too, and a nine-pixel
   box around the word Elapsed put it on top of the time beside it. */
.tone-key i[class] { width: var(--swatch); height: var(--swatch); border-radius: 3px;
  flex: 0 0 var(--swatch); }
.tone-key i.live { background: var(--live); }
.tone-key i.waiting { background: var(--waiting); }
.tone-key i.settled { background: var(--settled); }
.tone-key i.spent { background: var(--spent); }

/* A ruler, not a reading. Nought at the first rung of the chain and a hundred at the
   last, marked every ten, standing down the left of the drawing. It spans the drawing's
   depth and nothing else, so where a line stops is read off the number level with it.
   It says nothing about any run of its own: the chain comes round again -- a stage that
   dies out sends the run back up to an earlier one -- so a length claiming how far along
   a search was had to either stand still through that or slide backwards.

   The cell it stands in is as tall as the drawing beside it; the strip the drawing
   leaves empty at its head and foot is taken off here too, so nought and a hundred are
   level with the first rung and the last. */
.ruler-cell { position: relative; --ruler-line: 22px; }
.track-ruler { position: absolute; left: 0; right: 0; margin: 0; color: var(--muted);
  top: var(--tree-head); bottom: var(--tree-tail); }
/* Eleven percentage labels, evenly spaced, to the right of the line. */
.track-ruler span { position: absolute; left: 30px; transform: translateY(-50%);
  font-size: var(--run-text); line-height: 1; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity .2s ease; }
.track-ruler span::before { content: ""; position: absolute; top: 50%; left: -8px;
  width: 5px; height: 1px; background: currentColor; opacity: .45; }
.track-ruler.open span { opacity: 1; transition-delay: calc(var(--at) * 10ms); }
/* Bottlenecks are coral diamonds; live and queued positions remain arrows. */
.track-ruler i.gate { position: absolute; left: var(--ruler-line); width: 7px; height: 7px;
  z-index: 2; border-radius: 1px; background: var(--coral);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0; transition: opacity .2s ease; }
.track-ruler i.gate:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.track-ruler.open i.gate { opacity: 1; transition-delay: .9s; }
.track-ruler span { z-index: 1; }
/* The line the marks stand on, fainter than they are, green while it is being drawn
   from nought down to a hundred. */
.track-ruler::after { content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--ruler-line);
  width: 1px; background: currentColor; opacity: .22;
  transform: scaleY(0); transform-origin: top; }
.track-ruler.open::after { animation: ruler-draw 1.1s ease-in-out forwards; }
@keyframes ruler-draw {
  from { transform: scaleY(0); background: var(--live); opacity: .9; }
  70% { background: var(--live); opacity: .9; }
  to { transform: scaleY(1); background: currentColor; opacity: .22; }
}
/* Where the run is: the running tip points at the line from the left, and each queued
   rung points at it from the right with its count beyond the arrow. */
.track-ruler b { position: absolute; transform: translateY(-50%);
  display: flex; align-items: center; gap: 2px;
  font-size: var(--run-text); line-height: 1; font-weight: inherit;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .2s ease; }
.track-ruler b::after { content: ""; flex: 0 0 auto;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.track-ruler b.frontier { left: 10px; }
.track-ruler b.frontier::after { border-left: 6px solid; }
.track-ruler b.pending { left: 24px; flex-direction: row-reverse; }
.track-ruler b.pending::after { border-right: 6px solid; }
.track-ruler b em { font-style: normal; }
.track-ruler b.pending.below-label em { position: absolute; left: 40px; }
.track-ruler.open b { opacity: 1; transition-delay: .9s; }
/* Its name, at the head of the ruler above nought and centred on the line it names,
   and the only part of it that is always there. */
.ruler-name { position: absolute; left: var(--ruler-line); transform: translateX(-50%);
  top: var(--ruler-head); border: 0; padding: 0;
  background: none; cursor: pointer; color: var(--muted); font-family: inherit;
  font-size: var(--run-text); line-height: 1; letter-spacing: .06em; }
/* The step sentence sits under the legend. The whole sentence is written in order, and
   the terminal square follows the last character it wrote with nothing between them --
   the space belongs in front of the ellipsis, which is part of the sentence and is typed
   out with it. The beat is named rather than written into the animation because the
   writing reads it back: a finished sentence stands for three of these blinks before it
   starts again. */
.doing { --caret-blink: 1.1s; }
.doing.moving::after { content: ""; display: inline-block; width: 5px; height: 11px;
  margin-left: 0; vertical-align: -1px; background: var(--blue);
  animation: caret-blink var(--caret-blink) steps(1, end) infinite; }
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* A search still going glows. The selected
   card keeps its own shadow: its dark edge is what marks it, not a cast. */
.history-row.state-active:not(.on) { box-shadow: 0 0 0 1px rgba(77,132,200,.20),
  0 3px 16px rgba(77,132,200,.28); }
/* How long it has been at it, at the foot of the drawing rather than over it, level with
   the right-hand end of the panel -- the same edge the two buttons at the top end on. It
   stood above the bar, where it was the one number in a band of names and read as a
   heading for them. */
.track-total { display: flex; justify-content: flex-end; flex-wrap: wrap;
  gap: 4px 20px; margin: 0; }
.track-total span { display: flex; align-items: baseline; gap: 6px; }
/* The clock stands on the row of colour names, so it is set the way that row is: three
   weights and two trackings on one line read as three different labels. The only thing
   said differently here is that one of the two is a number and not a name -- it takes the
   ink, and figures that line up. */
.track-total i { font-style: normal; color: var(--muted); text-transform: uppercase; }
.track-total b { color: var(--ink); font-weight: inherit;
  font-variant-numeric: tabular-nums; }
/* One line is kept whether or not there is a step to name. It is empty for everything
   except a run that is going, and without the reservation the panel jumped by a line
   the moment a search stopped. */
.doing { margin: 14px 0 0; height: 1.6em; color: var(--muted);
  font-size: var(--run-text);
  line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-heading > .doing { margin: 6px 0 0; }
/* A page holding numbers from four seconds ago and one holding numbers from an hour
   ago look the same, so the second one has to say so. */
.lost-contact { margin: 10px 0 0; color: var(--coral); font-size: var(--run-text);
  line-height: 1.6; }
.lost-contact[hidden] { display: none; }
/* The strand's text uses the same vertical coordinate as the tree beside it. Each step
   occupies the fixed interval covered by its corresponding part of the tree. */
.strand { position: relative; width: 100%; height: 100%; min-height: 0; }
.detail { position: absolute; top: var(--slot-top); height: var(--slot-height);
  left: 0; right: 0; min-height: 0; margin: 0; padding: 8px 0 10px; background: transparent;
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 7px;
  overflow: hidden; }
/* Each text block starts eight pixels below its continuous source rule. */
.detail:not(.empty) { cursor: pointer; }
.source-links { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 1; color: var(--blue); }
.source-link, .source-rule { fill: none; stroke: currentColor; stroke-width: 1;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-opacity: .65; vector-effect: non-scaling-stroke; }
.source-rule { color: var(--line); stroke-opacity: 1; }
.source-dot { fill: currentColor; }
.tree .limb-bar.source-origin { filter: drop-shadow(0 0 2px var(--source-ink)); }
.detail.empty .detail-buttons { visibility: hidden; }
.detail.empty .slot-title { visibility: hidden; }
.detail-content { min-width: 0; min-height: 0; overflow: auto; }
.detail h3 { margin: 0; font-size: calc(var(--run-text) - 1px); font-weight: 700;
  letter-spacing: .04em; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.detail-buttons { align-self: start; display: flex; flex-direction: column;
  align-items: center; gap: 3px; }
.detail-buttons button { width: 24px; height: 24px; border: 0; border-radius: 6px;
  padding: 4px; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s; }
.detail-buttons button:hover:not(:disabled) { color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.detail-buttons button:disabled { opacity: .5; cursor: wait; }
.detail-buttons svg { display: block; width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 1.45; stroke-linecap: round;
  stroke-linejoin: round; }
.slot-copy .copy-check { display: none; }
.slot-copy.done .copy-shape { display: none; }
.slot-copy.done .copy-check { display: block; }
.slot-say.translated { color: var(--green); }
.slot-say.busy svg { animation: spin 1s linear infinite; }
.detail-text { margin: 8px 0 0; word-break: break-word;
  font-size: calc(var(--run-text) - 1px); line-height: 1.7; color: var(--ink);
  min-height: 0; }
/* The markdown inside it: headings a step above the text and no louder, lists and code
   set the way the rest of the panel is, and a formula on a line of its own scrolled
   rather than pushed past the edge. */
.detail-text > :first-child { margin-top: 0; }
.detail-text h1, .detail-text h2, .detail-text h3, .detail-text h4 {
  margin: 1.1em 0 .4em; line-height: 1.3; font-weight: 700; color: var(--ink); }
.detail-text h1 { font-size: 14px; }
.detail-text h2 { font-size: 12px; }
.detail-text h3, .detail-text h4 { font-size: 11px; }
.detail-text p { margin: 0 0 .7em; }
.detail-text ul, .detail-text ol { margin: 0 0 .7em; padding-left: 1.4em; }
.detail-text li { margin: .15em 0; }
.detail-text code { font-size: .95em; padding: 0 .25em; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.detail-text pre { overflow-x: auto; padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); }
.detail-text pre code { padding: 0; background: none; }
.detail-text blockquote { margin: 0 0 .7em; padding-left: .8em;
  border-left: 2px solid var(--line); color: var(--muted); }
.detail-text table { border-collapse: collapse; margin: 0 0 .7em; }
.detail-text th, .detail-text td { border: 1px solid var(--line); padding: 3px 6px; }
.detail-text .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
/* A column of cards down the left of the page, scrolled on its own. Each card keeps the
   two lines it had -- the direction over what became of it. */
.history { display: flex; flex-direction: column; gap: 8px; margin-top: 0;
  min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1px 2px 6px;
  scrollbar-width: thin; }
/* No colour of its own: the line at the bottom of the card already names the phase it
   is in and is written in the colour of what became of it, and a tinted card said the
   same thing a second time while dragging every piece of text on it toward the
   contrast floor. */
.history-row { flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.4);
  transition: background .16s, border-color .16s, box-shadow .16s; }
.history-row:hover { background: rgba(255,255,255,.72); }
/* The one being shown below is the only card with a dark edge. Drawn as a ring inside
   rather than a thicker border, so that it reads at a glance without the card changing
   size and shoving the rest of the strip along. */
.history-row.on { border-color: var(--ink); background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink), 0 8px 18px rgba(31,43,37,.12); }
/* Two lines, wrapped, and an ellipsis past them. It was one line with a scrollbar of
   its own: a bar on a card two hundred pixels wide, to be dragged to read the rest of a
   name -- and every card in the strip carried one. Two lines hold most names whole, and
   the whole of it is on the tooltip either way. */
.history-item { display: block; width: 100%; min-width: 0; text-align: left;
  border: 0; background: transparent; border-radius: 14px 14px 0 0;
  padding: 11px 12px 7px; font: inherit; font-size: 12px; line-height: 1.5;
  color: var(--muted); cursor: pointer;
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
  /* Two lines' worth of room whether the name fills them or not, so a one-line card and
     a two-line card are the same card. */
  min-height: calc(2 * 1.5em + 18px); }
/* The clamp goes on a span inside the button rather than on the button: a button's
   display is normalised by the browser, `-webkit-box` with it, and the rule that was
   meant to hold the name to two lines did nothing at all. */
.history-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; }
.history-row:hover .history-item, .history-row.on .history-item { color: var(--ink); }
.history-row.on .history-item { font-weight: 650; }
/* The two numbers the bar carries, on the card as well, so which search to open can
   be decided from the strip rather than by opening each one. */
.history-meta { margin: 0; padding: 0 12px 2px; color: var(--muted); font-size: 9.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-actions { display: flex; align-items: center; gap: 2px; padding: 0 10px 8px 8px; }
.history-state { flex: 1; min-width: 0; text-align: right; color: var(--muted);
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-row.state-active .history-state { color: var(--blue); font-weight: 700; }
.history-row.state-stopped .history-state, .history-row.state-stopping .history-state,
.history-row.state-budget_stopped .history-state,
.history-row.state-failed .history-state { color: var(--spent); }
.history-state[hidden] { display: none; }
/* A finished search says nothing about where it got to -- it got to the end. It offers
   the document instead, saved from what the ideas call already carries. */
.run-download { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent;
  color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; text-align: right; cursor: pointer; }
.run-download:hover:not(:disabled) { text-decoration: underline; }
.run-download:disabled { opacity: .5; cursor: wait; }
.run-download[hidden] { display: none; }
.download-dialog { width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); box-sizing: border-box; overflow-y: auto;
  padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.download-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.download-heading { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 18px; }
.download-heading h2 { margin: 0; font-size: 18px; }
.download-heading button { border: 0; background: transparent; color: var(--muted);
  font: inherit; cursor: pointer; }
.download-choices { margin: 0; padding-left: 24px; }
.download-choices li + li { margin-top: 12px; }
.proposal-download { width: 100%; padding: 12px; border: 1px solid var(--line);
  border-radius: 8px; background: transparent; color: var(--green);
  font: inherit; line-height: 1.5; text-align: left; cursor: pointer;
  overflow-wrap: anywhere; }
.proposal-download:hover { border-color: var(--green); }
/* The strip is one column at every width already, so there is nothing for a narrow
   screen to rearrange -- it just scrolls a little sooner. */
@media (max-width: 720px) {
  .user-body { --page-inset: 16px; }
  .user-main > .panel, .user-workspace > .panel { --brim-y: 20px; --brim-x: 18px; }
}

/* Prompt reading and translation stay available without a copy action. */
.prompt-readonly { -webkit-user-select: none; user-select: none; }
.step-prompt-translate { margin-left: auto; padding: 2px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: inherit; font-size: 10px; letter-spacing: .04em; cursor: pointer; flex-shrink: 0; }
.step-prompt-translate:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); }
.step-prompt-translate:disabled { cursor: wait; opacity: .6; }
.step-prompt-status { display: block; margin-top: 8px; color: var(--muted); }
.step-prompt-status[hidden] { display: none; }
/* Narrower than the three columns need, they stack: the searches in a strip across the
   top again, the drawing under them, and the window under the drawing. */
@media (max-width: 1100px) {
  .user-workspace { grid-template-columns: 1fr; }
  .user-workspace > .runs-panel { position: static; max-height: none; }
  .history { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .history-row { width: 206px; }
  .run-body { grid-template-columns: minmax(0, 1fr); }
  .strand { height: auto; }
  .detail { position: relative; top: auto; height: auto; overflow: visible; }
  .detail.empty { display: none; }
  .detail-content { overflow: visible; }
}