/* "Try it": one pair of tabs over two live consoles. System One (s1-, assets/try.js): an example's input, its
   request and System One's answer, a probability for every option. System Two (ch-, assets/choose.js, ported from
   mom.vllm-sr.ai): the four live steps of a request (request, signals, decision, model and effort), then the
   response streaming as Markdown. */

.try-box { margin-top: clamp(36px, 4.4vw, 52px); }
.try-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto; padding: 5px; }
.try-tabs button { display: inline-flex; align-items: center; gap: 9px; min-width: 0; height: 40px; padding: 0 22px; font-size: 15px; }
.try-tabs .thumb { top: 5px; left: 5px; height: 40px; }
.seg-sub { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); transition: color .35s; }
.try-tabs .tab-short { display: none; }
.try-tabs button[aria-selected="true"] .seg-sub { color: var(--muted); }
.try-sub { margin: 18px auto 0; max-width: 40rem; text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.try-off { margin: 18px auto 0; max-width: 40rem; padding: 12px 18px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(183, 121, 31, .35); text-align: center; font-size: 14.5px; color: var(--ink-2); }
html:not(.js) .try-box { display: none; }
/* DeepSeek Harness: its live Web UI in a frame as tall as the System One and System Two consoles; on phones it leaves
   room to scroll the page past it. */
.dsh-console { --console-h: 900px; margin-top: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.dsh-frame { display: block; width: 100%; height: var(--console-h); border: 0; background: #fff; }
.dsh-note { margin: 16px auto 0; max-width: 46rem; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
/* Before the harness starts: what it is, and the key it runs on (the note and consent of System One's runs). */
.dsh-start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: var(--console-h); padding: 40px 24px; text-align: center; }
.dsh-start-mark { width: 44px; height: 44px; margin-bottom: 4px; }
.dsh-start-title { font-size: 21px; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.dsh-start-text { max-width: 30rem; color: var(--ink-2); text-wrap: balance; }
.dsh-start .btn-primary { margin-top: 8px; }
.dsh-key { justify-content: center; max-width: 30rem; }
.dsh-key .consent { text-align: center; text-wrap: balance; }
.dsh-full { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dsh-full:hover { color: var(--ink); }
.dsh-console:fullscreen { --console-h: 100vh; border-radius: 0; }

/* System One: the examples, then the input and the answer side by side above the request. */
.s1-console { margin-top: clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: clamp(220px, 17vw, 256px) minmax(0, 1fr); gap: 20px; text-align: left; }
.s1-list { display: grid; gap: 8px; align-content: start; }
.s1-list > li { display: flex; min-width: 0; }
.s1-list .ch-card { min-height: 76px; }
.s1-stage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "in out" "req req"; gap: 18px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.s1-in { grid-area: in; min-width: 0; display: flex; flex-direction: column; }
.s1-input { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.s1-input textarea { flex: 1 1 auto; width: 100%; min-height: 176px; resize: vertical; padding: 18px 20px; border: 1px solid rgba(217, 68, 31, .16); border-radius: 12px; background: linear-gradient(145deg, rgba(217, 68, 31, .045), rgba(217, 68, 31, .012)); color: var(--ink); font: 500 clamp(19px, 1.55vw, 22px)/1.35 var(--serif); letter-spacing: -.005em; outline: none; transition: border-color .2s, box-shadow .2s; }
.s1-input textarea.mono { font: 500 14.5px/1.6 var(--mono); letter-spacing: 0; }
.s1-input textarea:focus { border-color: rgba(217, 68, 31, .45); box-shadow: 0 0 0 4px rgba(217, 68, 31, .1); }
.s1-hint { font-size: 12.5px; color: var(--muted); }
.s1-photo { position: relative; overflow: hidden; border-radius: 12px; background: var(--ink); aspect-ratio: 3 / 2; }
.s1-photo img { width: 100%; height: 100%; object-fit: cover; }
.s1-photo .bx { transition: opacity .5s var(--ease); }
.s1-photo .bx.pre { opacity: 0; }
.s1-asks { display: flex; flex-wrap: wrap; gap: 6px; }
.s1-asks li { padding: 5px 9px; border-radius: 7px; background: rgba(22, 24, 29, .05); color: var(--ink-2); font: 500 12px/1.2 var(--mono); }
.s1-go { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.s1-go .btn-primary { min-width: 10.5rem; }
.s1-go .ch-key { flex: 1 1 16rem; margin: 0; }
.s1-out { grid-area: out; min-width: 0; display: flex; flex-direction: column; padding: 18px 20px; border-radius: 16px; background: rgba(246, 241, 231, .6); box-shadow: inset 0 0 0 1px var(--hair); transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.s1-out.on { background: var(--surface); box-shadow: 0 0 0 2px var(--ember), 0 16px 40px rgba(217, 68, 31, .12); }
.s1-answers { flex: 1 1 auto; display: flex; flex-direction: column; gap: 22px; min-height: 160px; }
.s1-answers .answer + .answer { margin-top: 0; padding-top: 20px; }
.s1-answers .answer .q { display: block; margin-bottom: 14px; font: 500 clamp(19px, 1.5vw, 22px)/1.25 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.s1-answers .bars li { grid-template-columns: minmax(5.6rem, auto) minmax(0, 1fr) 4.4rem; }
.s1-answers .bars .bar i { transform: scaleX(0); transition: transform 1s var(--ease); }
.s1-answers.shown .bars .bar i { transform: scaleX(var(--w, 0)); }
.s1-answers .ch-empty { flex: 1; }
.s1-answers .ch-waiting { margin: auto 0; }
.s1-req { grid-area: req; min-width: 0; }
.s1-req .ch-step-head { padding: 0 4px; }
.s1-code { max-height: 340px; overflow: auto; overscroll-behavior: contain; }
/* An example whose state has parts (a source and an answer) edits each part in its own box. */
.s1-input.parts { gap: 12px; }
.s1-part { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.s1-part-label { font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.s1-input.parts textarea { min-height: 84px; padding: 12px 16px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; }
/* A router signal: the question's ID, which takes the model's router adapter. */
.s1-answers .answer .q .sig { display: inline-block; margin-right: 9px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font: 600 11px/1.5 var(--mono); letter-spacing: 0; vertical-align: 3px; }
/* Spans, marked in the text they were found in and listed with their probabilities; one color per label. */
.s1-marked { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(22, 24, 29, .025); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: 500 clamp(17px, 1.3vw, 19px)/1.8 var(--serif); overflow-wrap: anywhere; }
.s1-marked mark { padding: 1px 3px; border-radius: 4px; background: var(--sp-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--sp); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s1-marked mark b { margin-left: 5px; color: var(--sp-text); font: 700 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.s1-answers .bars.spans li { grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 24%) 4.4rem; }
.bars.spans .opt { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars.spans .tag { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--sp-bg); color: var(--sp-text); font: 700 10px/1.5 var(--mono); text-transform: uppercase; }
.bars.spans .bar i { background: var(--sp); }
.sp-c0 { --sp: #d9441f; --sp-bg: rgba(217, 68, 31, .14); --sp-text: #a8331a; }
.sp-c1 { --sp: #4d6fa3; --sp-bg: rgba(77, 111, 163, .16); --sp-text: #36507b; }
.sp-c2 { --sp: #1f9d5b; --sp-bg: rgba(31, 157, 91, .15); --sp-text: #166c3d; }
.sp-c3 { --sp: #b7791f; --sp-bg: rgba(183, 121, 31, .17); --sp-text: #845714; }
.sp-c4 { --sp: #7a4fb5; --sp-bg: rgba(122, 79, 181, .15); --sp-text: #5c3a8c; }
.sp-c5 { --sp: #0f8a8a; --sp-bg: rgba(15, 138, 138, .15); --sp-text: #0a6262; }

.ch-console { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: clamp(220px, 17vw, 256px) minmax(0, 1fr); gap: 20px; text-align: left; }
.try-panel .ch-console { margin-top: clamp(22px, 2.6vw, 32px); }
.ch-examples { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.ch-work { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 20px; min-width: 0; min-height: 0; }
.ch-list { display: grid; gap: 8px; }
.ch-list > li { display: flex; min-width: 0; }
html:not(.js) .ch-console { display: none; }
.ch-nojs { margin-top: 32px; text-align: center; color: var(--ink-2); }
.ch-card { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(40, 32, 20, .05); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ch-card:hover { transform: translateX(3px); box-shadow: 0 1px 2px rgba(40, 32, 20, .05), 0 10px 24px rgba(40, 32, 20, .08); }
.ch-card .t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 18px/1.2 var(--serif); letter-spacing: -.005em; }
.ch-card .t > span, .ch-card .r, .ch-card .x { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-card .r { display: block; width: 100%; font: 500 11px/1.45 var(--mono); color: var(--muted); }
.ch-card .px { flex: none; width: 16px; height: 16px; }
.ch-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ember), 0 10px 24px rgba(217, 68, 31, .1); }
.ch-card .x { font-size: 12.5px; line-height: 1.45; color: var(--bad); }
.ch-card:has(.x) .r { display: none; }
.ch-loading { padding: 12px 14px; font-size: 14px; color: var(--muted); }
.ch-prompt { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: box-shadow .25s; }
.ch-prompt:focus-within { box-shadow: 0 0 0 4px rgba(217, 68, 31, .12), var(--shadow); }
.ch-prompt textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--ink); font: 400 15px/1.5 var(--sans); letter-spacing: -.014em; padding: 6px 0; max-height: 160px; outline: none; }
.ch-prompt textarea::placeholder { color: var(--faint); }
.ch-send { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .2s, transform .2s var(--ease), opacity .2s; }
.ch-send:hover { background: #000; }
.ch-send:active { transform: scale(.94); }
.ch-send:disabled { opacity: .35; cursor: default; }
.ch-send svg { width: 18px; height: 18px; }

.ch-stage { min-width: 0; padding: 4px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.ch-step { position: relative; padding: 16px 0 16px 20px; opacity: .45; transition: opacity .45s var(--ease); }
.ch-step + .ch-step { box-shadow: 0 -1px 0 var(--hair); }
.ch-step::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; border-radius: 2px; background: rgba(22, 24, 29, .14); transition: background-color .3s, box-shadow .3s; }
.ch-step.on, .ch-step.done, .ch-step[data-step="request"] { opacity: 1; }
.ch-step.on::before { background: var(--ember); box-shadow: 0 0 0 4px rgba(217, 68, 31, .16); animation: beat 1s ease-in-out infinite; }
.ch-step.done::before { background: var(--ink); }
@keyframes beat { 50% { box-shadow: 0 0 0 7px rgba(217, 68, 31, .06); } }
.ch-step-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; min-height: 22px; }
.ch-step.on .ch-step-head .label, .ch-response .label { color: var(--ember-text); }
.ch-pv { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.ch-request { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid rgba(217, 68, 31, .14); border-radius: 12px; background: linear-gradient(145deg, rgba(217, 68, 31, .045), rgba(217, 68, 31, .012)); }
.ch-question { color: var(--ink); font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.ch-question > :first-child { margin-top: 0; }
.ch-question > :last-child { margin-bottom: 0; }
.ch-placeholder { color: var(--muted); font-size: 15px; }
.ch-request:has(.ch-image) { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; align-content: start; align-items: start; }
.ch-image { margin: 0; }
.ch-image img { display: block; width: 92px; max-height: 92px; object-fit: contain; border-radius: 8px; background: var(--paper); }
.ch-image figcaption { margin-top: 6px; color: var(--muted); font: 500 10px/1.5 var(--mono); }
.ch-image figcaption .cr { display: block; overflow-wrap: anywhere; }
.ch-context { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12px; }
.ch-context summary { cursor: pointer; line-height: 1.5; }
.ch-turn { margin-top: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ch-turn > b { display: block; margin-bottom: 4px; color: var(--muted); font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ch-turn p { margin: 0; }
.ch-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ch-key .bar { display: none; flex: 0 0 120px; height: 4px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.ch-key.busy .bar { display: block; }
.ch-key .bar b { display: block; height: 100%; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.ch-key-text:empty { display: none; }
.ch-key .consent { flex-basis: 100%; max-width: none; margin: 0; font-size: 12.5px; color: var(--muted); }
.ch-sig { display: flex; flex-wrap: wrap; gap: 5px; }
.ch-sig li { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 8px; border-radius: 7px; background: rgba(22, 24, 29, .05); color: #858a94; font: 500 11px/1 var(--mono); transition: background-color .25s, color .25s, transform .25s var(--ease); }
.ch-sig li b { font-weight: 700; }
.ch-sig li b:empty { display: none; }
.ch-sig li.lit { background: var(--ink); color: #fff; transform: translateY(-1px); }
.ch-sig li.hit { background: var(--ember); color: #fff; transform: translateY(-1px); }
.ch-ranking { margin-top: 12px; font: 500 12px/1.5 var(--mono); color: var(--ink-2); }
.ch-ranking:empty, .ch-note:empty { display: none; }
.ch-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ch-lanes { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-lanes li { padding: 7px 10px; border-radius: 8px; background: rgba(22, 24, 29, .05); color: #858a94; font: 500 12px/1 var(--mono); transition: background-color .12s, color .12s; }
.ch-lanes li.scan { background: rgba(22, 24, 29, .12); color: var(--ink-2); }
.ch-lanes li.pick { background: var(--ember); color: #fff; font-weight: 700; }
/* Every row of tiles takes the height of the tallest tile, so a name or note that wraps never leaves its row uneven. */
.ch-pool { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.ch-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); transition: opacity .35s, box-shadow .35s, transform .35s var(--ease); }
.ch-tile .n { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.ch-tile .mk { flex: none; width: 16px; height: 16px; margin-top: 2px; object-fit: contain; }
.ch-tile .e { min-height: 1.4em; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.ch-tile.any { background: transparent; box-shadow: none; outline: 1px dashed rgba(22, 24, 29, .22); outline-offset: -1px; }
.ch-tile.any .n { flex-wrap: wrap; justify-content: space-between; row-gap: 4px; color: var(--ink-2); }
.ch-tile.any .mks { display: inline-flex; flex: none; gap: 4px; }
.ch-tile.any .mks .mk { width: 15px; height: 15px; margin-top: 2px; }
.ch-tile.pick { box-shadow: inset 0 0 0 1.5px var(--ember), 0 8px 24px rgba(217, 68, 31, .12); transform: translateY(-2px); }
.ch-tile.pick .e { color: var(--ember-text); }
.ch-tile.dim { opacity: .42; }

/* The response reserves its place before the first run, so nothing jumps. */
.ch-response { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px; border-radius: var(--r-lg); background: rgba(255, 253, 249, .45); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.ch-work.open .ch-response { background: var(--surface); box-shadow: 0 0 0 2px var(--ember), 0 16px 40px rgba(217, 68, 31, .12); }
.ch-response h3 { margin-bottom: 4px; }
.ch-response > .ch-pv { min-height: 1.4em; margin-bottom: 14px; }
.ch-err { margin-bottom: 12px; color: var(--bad); font-size: 14px; }
.ch-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 32px; color: var(--muted); }
.ch-empty b { font: 500 32px/1.15 var(--serif); color: var(--ink-2); }
.ch-empty span { max-width: 22em; font-size: 15px; }
.ch-out { flex: 1 1 auto; min-height: 96px; overflow: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.6; color: var(--ink); letter-spacing: -.012em; }
.ch-waiting { font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.ch-waiting::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 1px; background: var(--ember); animation: blink 1s steps(1) infinite; }
.ch-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--ember); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ch-thinking { margin-bottom: 24px; color: var(--muted); font-size: 15px; }
.ch-thinking summary { cursor: pointer; list-style: none; display: inline-flex; gap: 8px; align-items: center; }
.ch-thinking summary::-webkit-details-marker { display: none; }
.ch-thinking summary::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--ember); }
.ch-thinking div { margin-top: 8px; white-space: pre-wrap; }
.ch-tool { margin-bottom: 12px; }
.ch-tool summary { cursor: pointer; }
.ch-tool pre { margin: 6px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #ececf1; font-size: 12.5px; overflow: auto; }

/* Markdown answers (markdown.js): keep wide content inside the answer instead of widening the console. */
.ch-out > :first-child { margin-top: 0; }
.ch-out > :last-child { margin-bottom: 0; }
:is(.ch-out, .ch-question, .ch-turn) p, :is(.ch-out, .ch-question, .ch-turn) blockquote, :is(.ch-out, .ch-question, .ch-turn) .md-table, :is(.ch-out, .ch-question, .ch-turn) > section { margin: 0 0 16px; }
.ch-out h1, .ch-out h2, .ch-out h3, .ch-out h4, .ch-out h5, .ch-out h6 { color: var(--ink); font: 600 1.08em/1.4 var(--sans); letter-spacing: -.015em; margin: 24px 0 10px; }
.ch-out h1 { font-size: 1.35em; }
.ch-out h2 { font-size: 1.2em; }
.ch-out ul, .ch-out ol { padding-left: 1.5em; margin: 8px 0 16px; }
.ch-out ul { list-style: disc; }
.ch-out ol { list-style: decimal; }
.ch-out li + li { margin-top: 6px; }
.ch-out li > p { margin-bottom: 8px; }
.ch-out blockquote { border-left: 3px solid var(--hair); padding: 3px 0 3px 16px; color: var(--muted); }
.ch-out blockquote > :last-child { margin-bottom: 0; }
.ch-out hr { height: 0; border: 0; border-top: 1px solid var(--hair); margin: 24px 0; }
.ch-out a { color: var(--ember-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ch-out pre { max-width: 100%; margin: 16px 0; padding: 16px 20px; border-radius: var(--r-s); background: var(--ink); color: #ececf1; white-space: pre; overflow: auto; font-size: 14px; line-height: 1.65; }
.ch-out code { font-size: .86em; background: rgba(22, 24, 29, .06); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.ch-out pre code { background: transparent; padding: 0; overflow-wrap: normal; }
:is(.ch-out, .ch-question, .ch-turn) .md-table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--hair); border-radius: 10px; }
:is(.ch-out, .ch-question, .ch-turn) .md-table:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
:is(.ch-out, .ch-question, .ch-turn) table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.5; }
:is(.ch-out, .ch-question, .ch-turn) th, :is(.ch-out, .ch-question, .ch-turn) td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); min-width: 7em; max-width: 28em; overflow-wrap: break-word; }
:is(.ch-out, .ch-question, .ch-turn) .md-left { text-align: left; }
:is(.ch-out, .ch-question, .ch-turn) .md-right { text-align: right; }
:is(.ch-out, .ch-question, .ch-turn) .md-center { text-align: center; }
:is(.ch-out, .ch-question, .ch-turn) th { font-weight: 600; color: var(--ink); background: rgba(22, 24, 29, .035); }
:is(.ch-out, .ch-question, .ch-turn) tbody tr:last-child td { border-bottom: 0; }
:is(.ch-out, .ch-question, .ch-turn) tbody tr:nth-child(even) { background: rgba(22, 24, 29, .018); }
:is(.ch-out, .ch-question, .ch-turn) .katex { font-size: 1.06em; letter-spacing: normal; }
:is(.ch-out, .ch-question, .ch-turn) .katex-display { margin: 18px 0; max-width: 100%; padding: 5px 0; overflow-x: auto; overflow-y: hidden; }
:is(.ch-out, .ch-question, .ch-turn) .katex-display > .katex { padding: 0 2px; }
:is(.ch-out, .ch-question, .ch-turn) .katex-error { color: inherit !important; font: inherit; overflow-wrap: anywhere; }

/* One row height for the console on wider screens, so the examples, the steps and the open response share their top
   and bottom edges; the request block takes up the difference, so nothing moves during a run. */
@media (min-width: 701px) {
  .ch-console { --console-h: 900px; grid-template-rows: var(--console-h); }
  .ch-list { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .ch-list > li { flex: 1 1 0; min-height: 0; }
  .ch-stage { display: flex; flex-direction: column; min-height: 0; }
  .ch-step[data-step="request"] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .ch-step[data-step="request"] .ch-request { flex: 1 1 0; min-height: 96px; }
  .ch-work.open .ch-key { min-height: 1.5em; }
  .ch-work.open .ch-ranking { display: block; min-height: 1.5em; }
  .ch-work.open .ch-note { display: block; min-height: 3em; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
  .ch-console { --console-h: 1010px; gap: 16px; }
  .ch-work { gap: 16px; }
  .ch-response { padding: 20px; }
}
/* System One beside its examples: the console as tall as System Two's, the ten cards filling the column, an answer
   longer than its place scrolling inside it, so switching tabs or examples moves nothing on the page. */
@media (min-width: 1101px) {
  .s1-console { --console-h: 900px; grid-template-rows: var(--console-h); }
  .s1-list { display: flex; flex-direction: column; min-height: 0; }
  .s1-list > li { flex: 1 1 0; min-height: 0; }
  .s1-list .ch-card { min-height: 0; }
  .s1-stage { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .s1-in, .s1-out { min-height: 0; }
  .s1-input { min-height: 0; }
  .s1-answers { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .s1-photo { width: min(100%, 510px); align-self: center; }
  .s1-code { max-height: 280px; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
  .s1-console { --console-h: 1010px; gap: 16px; }
  .dsh-console { --console-h: 1010px; }
}
@media (max-width: 1100px) {
  .s1-console { grid-template-columns: minmax(0, 1fr); }
  .s1-list { display: flex; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .s1-list::-webkit-scrollbar { display: none; }
  .s1-list > li { flex: 0 0 240px; scroll-snap-align: start; }
  .s1-list .ch-card { min-height: 72px; }
  .ch-console { --console-h: 1080px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--console-h); }
  .ch-examples { grid-column: 1; grid-row: 1; }
  .ch-work { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .ch-list { display: flex; flex: none; flex-direction: row; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ch-list::-webkit-scrollbar { display: none; }
  .ch-list > li { flex: 0 0 240px; min-height: 72px; scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .try-tabs button { padding: 0 16px; font-size: 14px; }
  .dsh-console { --console-h: max(520px, calc(100svh - var(--nav-h) - 96px)); border-radius: 20px; }
  .s1-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "out" "req"; padding: 12px; gap: 14px; }
  .s1-input textarea { min-height: 150px; padding: 14px 16px; }
  .s1-input.parts textarea { min-height: 112px; }
  .s1-answers .bars.spans li { grid-template-columns: minmax(0, 1fr) 3.9rem; }
  .s1-answers .bars.spans .bar { display: none; }
  .s1-out { padding: 16px; }
  .s1-answers .bars li { grid-template-columns: minmax(4.8rem, auto) minmax(0, 1fr) 3.9rem; gap: 10px; }
  .ch-console { grid-template-rows: auto auto; }
  .ch-work { grid-template-columns: minmax(0, 1fr); }
  .ch-response { min-height: 240px; max-height: 70svh; padding: 20px; }
  .ch-empty { padding: 20px; }
  .ch-question { font-size: 16px; }
}
/* Three tabs on a phone: no sub-labels, tighter type; on the narrowest the harness tab says "Harness" beside its whale. */
@media (max-width: 600px) {
  .try-tabs button { gap: 6px; padding: 0 10px; font-size: 13px; }
  .try-tabs .seg-sub { display: none; }
  :is(.ch-out, .ch-question, .ch-turn) th, :is(.ch-out, .ch-question, .ch-turn) td { padding: 8px 10px; }
  :is(.ch-out, .ch-question, .ch-turn) .katex-display { font-size: .92em; }
}
@media (max-width: 400px) {
  .try-tabs .tab-long { display: none; }
  .try-tabs .tab-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-step.on::before, .ch-cursor, .ch-waiting::after { animation: none; }
  .s1-answers .bars .bar i { transition: none; }
}