/* Popov Academy — content-factory/archimedes-winter-2021-2022-2026-v1: student labs (loaded only on these pages).
   Base styles shared by all labs; each lab may add visuals/labs/<kind>.css, which assets.mjs appends to this file.
   Colours are local variables. Dark values follow the site's own theme switch (html[data-design=v2] with
   data-theme=dark, or the system dark mode unless data-theme=light) and reuse the site tokens from
   redesign.css, as in the 2025 package; the global theme itself is not changed. */
.arch-lab{min-width:0;--arch-surface:#fff;--arch-ink:#1f2937;--arch-label:#203c58;--arch-muted:#5b6b82;--arch-field-line:#aebed1;--arch-soft-line:#d7e1ed;--arch-primary-bg:#244974;--arch-primary-ink:#fff;--arch-link:#244974;--arch-pressed-bg:#e6eefb;--arch-pressed-line:#244974;--arch-good:#047857;--arch-bad:#b91c1c;--arch-focus:#f59e0b;--arch-fig-line:#1f2937;--arch-grid:#c7d2e0;--arch-fill:#dbeafe;--arch-piece-a:#bfdbfe;--arch-piece-b:#fde68a;--arch-piece-c:#fecaca;--arch-piece-d:#bbf7d0;--arch-accent:#c2410c;--arch-water:#e0f2fe;--arch-ok-bg:#dcfce7;--arch-bad-bg:#fee2e2;--arch-knight:#1d4ed8;--arch-liar:#9f1239;--arch-clear:#e2e8f0}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-surface:var(--play-stage);--arch-ink:var(--ink);--arch-label:var(--ink);--arch-muted:var(--ink-2);--arch-field-line:var(--ink-3);--arch-soft-line:var(--play-line);--arch-primary-bg:var(--accent);--arch-primary-ink:var(--on-ink);--arch-link:var(--accent-ink);--arch-pressed-bg:var(--accent-soft);--arch-pressed-line:var(--accent);--arch-good:var(--ok);--arch-bad:var(--bad);--arch-fig-line:#dbe4f0;--arch-grid:#4a5568;--arch-fill:#1e3a5f;--arch-piece-a:#1e40af;--arch-piece-b:#854d0e;--arch-piece-c:#9f1239;--arch-piece-d:#166534;--arch-accent:#fb923c;--arch-water:#0c2a3f;--arch-ok-bg:#14341f;--arch-bad-bg:#431818;--arch-knight:#93c5fd;--arch-liar:#fda4af;--arch-clear:#3f4654}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-surface:var(--play-stage);--arch-ink:var(--ink);--arch-label:var(--ink);--arch-muted:var(--ink-2);--arch-field-line:var(--ink-3);--arch-soft-line:var(--play-line);--arch-primary-bg:var(--accent);--arch-primary-ink:var(--on-ink);--arch-link:var(--accent-ink);--arch-pressed-bg:var(--accent-soft);--arch-pressed-line:var(--accent);--arch-good:var(--ok);--arch-bad:var(--bad);--arch-fig-line:#dbe4f0;--arch-grid:#4a5568;--arch-fill:#1e3a5f;--arch-piece-a:#1e40af;--arch-piece-b:#854d0e;--arch-piece-c:#9f1239;--arch-piece-d:#166534;--arch-accent:#fb923c;--arch-water:#0c2a3f;--arch-ok-bg:#14341f;--arch-bad-bg:#431818;--arch-knight:#93c5fd;--arch-liar:#fda4af;--arch-clear:#3f4654}
.arch-try{margin:18px 0}
.arch-lab [data-arch-lab-body]{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-lab-fallback{color:var(--arch-muted);font-size:15px}
.arch-lab label,.arch-lab .arch-label{font-weight:600;color:var(--arch-label)}
.arch-lab .arch-help{font-size:14px;color:var(--arch-muted);margin:0}
.arch-lab .arch-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.arch-lab input[type=text],.arch-lab input[type=number],.arch-lab select{font:inherit;font-size:18px;min-height:44px;padding:8px 12px;border:1px solid var(--arch-field-line);border-radius:12px;background:var(--arch-surface);color:var(--arch-ink);min-width:0}
.arch-lab input[type=number]{width:88px}
.arch-lab input[type=range]{flex:1 1 180px;min-width:0;min-height:44px;accent-color:var(--arch-primary-bg)}
.arch-lab button{font:inherit;font-size:16px;min-height:44px;min-width:44px;padding:10px 16px;border-radius:999px;line-height:1.4;max-width:100%;white-space:normal;cursor:pointer}
.arch-lab .arch-primary{background:var(--arch-primary-bg);color:var(--arch-primary-ink);border:1px solid var(--arch-primary-bg)}
.arch-lab .arch-secondary{background:var(--arch-surface);color:var(--arch-link);border:1px solid var(--arch-field-line)}
.arch-lab button[aria-disabled=true]{opacity:.45;cursor:default}
.arch-lab button:focus-visible,.arch-lab input:focus-visible,.arch-lab select:focus-visible,.arch-lab [tabindex]:focus-visible{outline:3px solid var(--arch-focus);outline-offset:2px}
.arch-lab .arch-actions{display:flex;flex-wrap:wrap;gap:8px}
.arch-lab .arch-toggle{display:flex;flex-wrap:wrap;gap:6px}
.arch-lab .arch-toggle button{background:var(--arch-surface);color:var(--arch-link);border:1px solid var(--arch-field-line)}
.arch-lab .arch-toggle button[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);font-weight:600}
.arch-lab .arch-result{background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-soft-line);border-radius:14px;padding:14px 16px;line-height:1.55;min-width:0;overflow-wrap:anywhere}
.arch-lab .arch-result:empty{display:none}
.arch-lab :is(button,input,select){scroll-margin-block:120px}
.arch-lab .arch-result p{margin:6px 0}
.arch-lab .arch-checks{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px}
.arch-lab .arch-checks li{display:flex;gap:8px;align-items:flex-start}
.arch-lab .arch-pass::before{content:'✓';color:var(--arch-good);font-weight:700;flex-shrink:0;width:1.2em}
.arch-lab .arch-fail::before{content:'✗';color:var(--arch-bad);font-weight:700;flex-shrink:0;width:1.2em}
.arch-lab .arch-good{color:var(--arch-good);font-weight:600}
.arch-lab .arch-bad{color:var(--arch-bad);font-weight:600}
.arch-lab .arch-sub{display:grid;gap:8px;border-top:1px solid var(--arch-soft-line);padding-top:12px}
.arch-lab .arch-stage{background:var(--arch-surface);border:1px solid var(--arch-soft-line);border-radius:8px;padding:8px;min-width:0}
.arch-lab .arch-stage svg{display:block;width:100%;height:auto;max-height:70vh;touch-action:manipulation}
.arch-lab svg text{fill:var(--arch-ink);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.arch-lab .arch-readouts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;font-variant-numeric:tabular-nums}
.arch-lab .arch-readouts div{display:flex;gap:6px;align-items:baseline}
.arch-lab .arch-readouts dt{color:var(--arch-muted);font-size:14px}
.arch-lab .arch-readouts dd{margin:0;font-weight:600;color:var(--arch-ink);white-space:nowrap;overflow-wrap:normal}
.arch-lab .arch-table-wrap{overflow-x:auto;max-width:100%}
.arch-lab table.arch-table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.arch-lab table.arch-table th,.arch-lab table.arch-table td{border:1px solid var(--arch-soft-line);padding:4px 8px;text-align:center;color:var(--arch-ink)}
.arch-lab table.arch-table th{color:var(--arch-label);font-weight:600}
.arch-lab .arch-chip{display:inline-flex;align-items:center;justify-content:center;min-width:2.2em;padding:2px 8px;border-radius:999px;border:1px solid var(--arch-soft-line);font-weight:600}
@media(max-width:480px){.arch-lab .arch-row .arch-primary{flex:1 1 100%}.arch-lab button{padding:8px 10px}}
/* shared: play button keeps its width next to a time slider, also on phones */
.arch-lab .arch-timeline{flex-wrap:nowrap}
.arch-lab .arch-timeline .arch-play{flex:0 0 auto;min-width:96px}
/* Inside the «Исследовать» disclosure the lab already has a frame: on phones drop the second one so models keep their width. */
@media (max-width:560px){.lesson-disclosure .arch-lab{padding:0;border:0;background:none;box-shadow:none}.lesson-disclosure .arch-lab .arch-stage{padding:4px}}
/* Phones: «Крупные клетки» (ui.mjs zoomable). Cells keep at least 44 px and the board scrolls sideways in its frame;
   the board geometry is unchanged, only its scale. */
.arch-lab .arch-zoom{min-width:0}
.arch-lab .arch-zoom-tools{margin-bottom:8px}
.arch-lab .arch-zoom-hint{margin:0 0 8px;font-weight:600;color:var(--arch-label)}
.arch-lab .arch-zoom-probe{height:0}
.arch-lab .arch-zoom-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:4px;min-width:0}
/* shared extras for this package: cell boards built from buttons, a status line that is never hidden under the
   sticky header after a programmatic scroll, and a compact step list */
.arch-lab .arch-board{display:grid;gap:0;justify-content:center;margin:auto}
.arch-lab .arch-cell{aspect-ratio:1;min-width:0;min-height:0;width:100%;padding:0;border-radius:0;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-grid);outline-offset:-3px;font-variant-numeric:tabular-nums}
.arch-lab .arch-result{scroll-margin-top:96px;scroll-margin-bottom:96px}
.arch-lab .arch-log{margin:0;padding-left:1.4em;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.arch-lab .arch-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--arch-ink)}
.arch-lab .arch-legend li{display:flex;align-items:center;gap:6px}

/* Same page presentation as the final 2023–2024 edition on main (GPT polish of 18.10.2026): the shared research
   renderer follows the current site on these pages only. Diagrams keep their light paper; controls and readouts
   follow the selected theme. */
[data-problem-id^="archimedes-winter-"] .cf-figure figcaption,
[data-problem-id^="archimedes-winter-"] .lesson-source{color:var(--ink-2)}
[data-problem-id^="archimedes-winter-"] .lesson-source summary{color:var(--ink)}
[data-problem-id^="archimedes-winter-"] :is(button[data-cf-zoom],button[data-cf-scene-zoom]){color:var(--ink);background:var(--play-stage);border-color:var(--ink-3);border-radius:999px;min-height:44px;padding:10px 16px;margin-top:12px;max-width:100%;line-height:1.4}
[data-problem-id^="archimedes-winter-"] .interactive-actions button{color:var(--ink);background:var(--play-stage);border-color:var(--ink-3);font-size:16px}
[data-problem-id^="archimedes-winter-"] .interactive-actions button[data-action=play]{color:var(--on-ink);background:var(--ink);border-color:var(--ink)}
[data-problem-id^="archimedes-winter-"] .interactive-range-row{grid-template-columns:minmax(60px,1fr) 88px}
[data-problem-id^="archimedes-winter-"] .cf-number{background:var(--play-stage);color:var(--ink);border-color:var(--ink-3);border-radius:12px;min-height:44px;height:auto;padding:8px 6px;font-size:18px;font-variant-numeric:tabular-nums}
[data-problem-id^="archimedes-winter-"] .interactive-range-row input[type=range]{min-height:44px;accent-color:var(--accent)}
[data-problem-id^="archimedes-winter-"] .interactive-results>div{background:var(--play-stage);border-color:var(--play-line);border-radius:14px;padding:14px 16px;font-size:16px}
[data-problem-id^="archimedes-winter-"] .interactive-results :is(div,span,strong){color:var(--ink)}
[data-problem-id^="archimedes-winter-"] .learning-interactive :is(button,input){scroll-margin-block:120px}
/* Keep diagrams readable as diagrams, without the inherited white text outline. */
[data-problem-id^="archimedes-winter-"] :is(.cf-figure-svg,.cf-zoom-content) svg text{stroke:none;paint-order:normal}
[data-problem-id^="archimedes-winter-"] .cf-figure figcaption button[data-cf-zoom]{display:block;margin:14px auto 0}
[data-problem-id^="archimedes-winter-"] .arch-model-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px 24px;margin:24px 0;border:1px solid var(--play-line);border-radius:var(--r-lg);background:var(--play-bg);color:var(--ink)}
[data-problem-id^="archimedes-winter-"] .arch-model-entry>div{flex:1 1 240px;min-width:0}
[data-problem-id^="archimedes-winter-"] .arch-model-entry strong{font-size:17px}
[data-problem-id^="archimedes-winter-"] .arch-model-entry p{margin:5px 0 0;color:var(--ink-2);font-size:16px;line-height:1.5}
[data-problem-id^="archimedes-winter-"] .arch-model-entry a{display:inline-flex;gap:12px;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--ink-3);border-radius:999px;background:var(--play-stage);color:var(--ink);font:600 16px/1.4 var(--font);text-decoration:none}
[data-problem-id^="archimedes-winter-"] .arch-model-entry a:hover{border-color:var(--accent);color:var(--accent)}
[data-problem-id^="archimedes-winter-"] .arch-model-entry a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:480px){[data-problem-id^="archimedes-winter-"] .arch-model-entry{padding:16px}[data-problem-id^="archimedes-winter-"] .arch-model-entry a{width:100%;justify-content:space-between}}

/* 2021 №3 — «Сосчитай пути по комнатам» (labs/ali-baba.mjs). Colours only through --arch-* variables; the two
   colours of the incoming corridors (from the left, from below) get their own variables with dark values, set
   with the same theme selectors as lab.css. */
.arch-lab{--arch-ali-baba-left:#1d4ed8;--arch-ali-baba-below:#c2410c}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-ali-baba-left:#93c5fd;--arch-ali-baba-below:#fb923c}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-ali-baba-left:#93c5fd;--arch-ali-baba-below:#fb923c}

.arch-lab .arch-ali-baba-predict{display:grid;gap:8px;border:1px solid var(--arch-soft-line);border-radius:14px;padding:12px 14px;background:var(--arch-surface)}
.arch-lab .arch-ali-baba-predict p{margin:0}
.arch-lab .arch-ali-baba-q{color:var(--arch-ink)}
.arch-lab .arch-ali-baba-predict .arch-toggle button{min-width:56px;font-size:18px;font-weight:700}
.arch-lab .arch-ali-baba-mazeline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.arch-lab .arch-ali-baba-mazeline p{margin:0}

.arch-lab .arch-ali-baba-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-ali-baba-left,.arch-lab .arch-ali-baba-right{display:grid;gap:10px;align-content:start;min-width:0}
@media (min-width:760px){.arch-lab .arch-ali-baba-main{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}}

/* the maze: corridors in an SVG, rooms are buttons laid over it (one button = one whole cell) */
.arch-lab .arch-ali-baba-stage{padding:8px}
.arch-lab .arch-ali-baba-maze{width:100%;max-width:520px;margin:0 auto;display:grid;gap:2px}
.arch-lab .arch-zoomed .arch-ali-baba-maze{width:308px;max-width:none}
/* captions sit in the frame, outside the sideways-scrolled board: never clipped in «Крупные клетки» */
.arch-lab .arch-ali-baba-cap{box-sizing:border-box;margin:0 auto;width:100%;max-width:520px;font-size:14px;line-height:1.3;color:var(--arch-muted);white-space:nowrap}
.arch-lab .arch-ali-baba-cap-top{text-align:right;margin-bottom:2px}
.arch-lab .arch-ali-baba-cap-bottom{text-align:left;margin-top:2px}
.arch-lab .arch-zoomed .arch-ali-baba-cap{max-width:none}
/* narrow phones: no side padding around the board, so more of it is visible before scrolling
   (the same padding in both zoom states, so the zoom decision never flips back and forth) */
@media (max-width:400px){
 .arch-lab .arch-zoom .arch-stage.arch-ali-baba-stage{padding:4px 0}
 .arch-lab .arch-ali-baba-stage .arch-zoom-scroll{padding:4px 0}
 .arch-lab .arch-ali-baba-cap{padding:0 6px}
}
.arch-lab .arch-ali-baba-grid{position:relative;width:100%;aspect-ratio:7/5;container-type:inline-size}
.arch-lab .arch-ali-baba-grid svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block;pointer-events:none}
.arch-lab .arch-ali-baba-room{position:absolute;width:calc(100% / 7);height:20%;margin:0;padding:0;min-width:0;min-height:0;border:0;border-radius:0;
 background:transparent;color:var(--arch-ink);display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arch-lab .arch-ali-baba-disc{position:relative;width:70%;aspect-ratio:1/1;border-radius:50%;border:2px solid var(--arch-fig-line);background:var(--arch-surface);
 display:flex;align-items:center;justify-content:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(12px,4.3cqw,22px);color:var(--arch-ink)}
.arch-lab .arch-ali-baba-long .arch-ali-baba-disc{font-size:clamp(10px,3.3cqw,17px)}
/* the focus ring goes on the disc, not on the square cell; the site's v2 rule ([data-design] … :is(:focus-visible,:focus), 0-4-0) is outranked here */
.arch-lab .arch-ali-baba-maze .arch-ali-baba-grid .arch-ali-baba-room:is(:focus,:focus-visible){outline:none}
.arch-lab .arch-ali-baba-room:focus-visible .arch-ali-baba-disc{outline:3px solid var(--arch-focus);outline-offset:4px}
.arch-lab .arch-ali-baba-room:hover .arch-ali-baba-disc{border-color:var(--arch-pressed-line)}
.arch-lab .arch-ali-baba-ok .arch-ali-baba-disc{background:var(--arch-ok-bg);border:3px solid var(--arch-good)}
.arch-lab .arch-ali-baba-bad .arch-ali-baba-disc{background:var(--arch-bad-bg);border:3px dashed var(--arch-bad)}
.arch-lab .arch-ali-baba-model .arch-ali-baba-disc{background:var(--arch-fill);border-color:var(--arch-pressed-line)}
.arch-lab .arch-ali-baba-shut .arch-ali-baba-disc{border-color:var(--arch-muted);color:var(--arch-ink);
 background:linear-gradient(45deg,transparent calc(50% - 1px),var(--arch-muted) calc(50% - 1px),var(--arch-muted) calc(50% + 1px),transparent calc(50% + 1px)),
 linear-gradient(-45deg,transparent calc(50% - 1px),var(--arch-muted) calc(50% - 1px),var(--arch-muted) calc(50% + 1px),transparent calc(50% + 1px)),var(--arch-clear)}
.arch-lab .arch-ali-baba-shut .arch-ali-baba-num{background:var(--arch-clear);padding:0 .12em;border-radius:4px}
.arch-lab .arch-ali-baba-shut .arch-ali-baba-num:empty{display:none}
/* A and B: a small italic letter beside the disc, top right of the cell (where no corridor runs), as in the figure */
.arch-lab .arch-ali-baba-letter{position:absolute;top:2%;right:3%;font:italic 400 clamp(13px,3.6cqw,20px)/1 'Times New Roman',Times,serif;color:var(--arch-ink);pointer-events:none}
/* a number that was right in the maze it was checked in, but the student changed the maze since */
.arch-lab .arch-ali-baba-stale .arch-ali-baba-disc{background:var(--arch-surface);border:3px dashed var(--arch-muted)}
.arch-lab .arch-ali-baba-sel .arch-ali-baba-disc{box-shadow:0 0 0 3px var(--arch-surface),0 0 0 6px var(--arch-fig-line)}
.arch-lab .arch-ali-baba-nl .arch-ali-baba-disc{box-shadow:0 0 0 3px var(--arch-ali-baba-left)}
.arch-lab .arch-ali-baba-nb .arch-ali-baba-disc{box-shadow:0 0 0 3px var(--arch-ali-baba-below)}
.arch-lab .arch-ali-baba-changed .arch-ali-baba-disc::after{content:'';position:absolute;inset:-6px;border:2px dashed var(--arch-accent);border-radius:50%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.arch-lab .arch-ali-baba-disc{transition:background-color .2s,border-color .2s,box-shadow .2s}}

/* legend */
.arch-lab .arch-ali-baba-legend{justify-content:center}
.arch-lab .arch-ali-baba-key-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--arch-fig-line);background:var(--arch-surface);flex:0 0 auto}
.arch-lab .arch-ali-baba-sw-ok{background:var(--arch-ok-bg);border:3px solid var(--arch-good)}
.arch-lab .arch-ali-baba-sw-bad{background:var(--arch-bad-bg);border:3px dashed var(--arch-bad)}
.arch-lab .arch-ali-baba-sw-left{border-radius:3px;height:6px;width:22px;border:0;background:var(--arch-ali-baba-left)}
.arch-lab .arch-ali-baba-sw-below{border-radius:3px;height:6px;width:22px;border:0;background:var(--arch-ali-baba-below)}
.arch-lab .arch-ali-baba-sw-shut{background:linear-gradient(45deg,transparent 45%,var(--arch-muted) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--arch-muted) 45% 55%,transparent 55%),var(--arch-clear);border-color:var(--arch-muted)}
.arch-lab .arch-ali-baba-sw-stale{background:var(--arch-surface);border:3px dashed var(--arch-muted)}
.arch-lab .arch-ali-baba-sw-changed{border:2px dashed var(--arch-accent);background:var(--arch-fill)}

/* «Считаю сам»: the question, the typed number and the keypad */
.arch-lab .arch-ali-baba-panel{display:grid;gap:10px;min-width:0}
.arch-lab .arch-ali-baba-askrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.arch-lab .arch-ali-baba-ask{margin:0;color:var(--arch-ink);font-weight:600;line-height:1.4}
.arch-lab .arch-ali-baba-draft{flex:0 0 auto;min-width:3.4em;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:2px 12px;
 font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--arch-ink);background:var(--arch-surface);border:2px solid var(--arch-accent);border-radius:12px}
.arch-lab .arch-ali-baba-draft.arch-ali-baba-empty{color:var(--arch-muted);border-color:var(--arch-field-line);font-weight:600}
.arch-lab .arch-ali-baba-pad{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;max-width:360px;width:100%}
.arch-lab .arch-ali-baba-pad .arch-ali-baba-key{font-size:20px;font-weight:700;padding:6px 0;border-radius:12px;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-field-line);font-variant-numeric:tabular-nums}
.arch-lab .arch-ali-baba-padrow{max-width:360px}
.arch-lab .arch-ali-baba-padrow .arch-primary{flex:1 1 auto}
.arch-lab .arch-ali-baba-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* «Свой лабиринт»: the note before the ready numbers appear, and the result right under the board */
.arch-lab .arch-ali-baba-under{display:grid;gap:10px;min-width:0}
.arch-lab .arch-ali-baba-gate{display:grid;gap:8px;border:1px solid var(--arch-soft-line);border-radius:14px;padding:12px 14px;background:var(--arch-surface);color:var(--arch-ink)}
.arch-lab .arch-ali-baba-gate p{margin:0;line-height:1.5}
.arch-lab :is(.arch-ali-baba-under,.arch-ali-baba-gate,.arch-ali-baba-paths)[hidden]{display:none}

/* «Все пути сюда»: every path into the room, in two groups by the last step */
.arch-lab .arch-ali-baba-paths{display:grid;gap:10px;border:1px solid var(--arch-soft-line);border-radius:14px;padding:12px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-ali-baba-paths p{margin:0}
.arch-lab .arch-ali-baba-group{display:grid;gap:6px}
.arch-lab .arch-ali-baba-gtitle{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--arch-ink)}
.arch-lab .arch-ali-baba-swatch{display:inline-block;width:22px;height:6px;border-radius:3px;flex:0 0 auto}
.arch-lab .arch-ali-baba-gl .arch-ali-baba-swatch{background:var(--arch-ali-baba-left)}
.arch-lab .arch-ali-baba-gb .arch-ali-baba-swatch{background:var(--arch-ali-baba-below)}
.arch-lab .arch-ali-baba-minis{display:flex;flex-wrap:wrap;gap:6px}
.arch-lab .arch-ali-baba-mini{display:block;border:1px solid var(--arch-soft-line);border-radius:8px;background:var(--arch-surface);max-width:100%;height:auto}
.arch-lab .arch-ali-baba-sum{font-weight:600;color:var(--arch-ink)}

/* «Свой лабиринт»: the comparison table */
.arch-lab .arch-ali-baba-compare{width:100%}
.arch-lab .arch-ali-baba-compare caption{text-align:left;padding-bottom:6px}
.arch-lab .arch-ali-baba-compare th[scope=row]{text-align:left;font-weight:400;color:var(--arch-ink)}
.arch-lab .arch-ali-baba-compare td{font-weight:700;min-width:4em}
.arch-lab .arch-ali-baba-compare tr.arch-ali-baba-now :is(th,td){background:var(--arch-pressed-bg);font-weight:700}

/* 2022 1.2 — maze with turning barriers (labs/barriers.mjs). Object colours: the grey and the white ball and
   their trails stay distinguishable in both themes; everything else uses the shared --arch-* tokens. */
.arch-lab{--arch-barriers-grey:#9ca3af;--arch-barriers-white:#ffffff;--arch-barriers-ball-line:#1f2937;--arch-barriers-trail-grey:#475569;--arch-barriers-trail-white:#2563eb;--arch-barriers-shade:#e8edf4;--arch-barriers-burst:#dc2626;--arch-barriers-burst-fill:#fee2e2}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-barriers-grey:#a3acb9;--arch-barriers-white:#f8fafc;--arch-barriers-ball-line:#0f172a;--arch-barriers-trail-grey:#a3b1c6;--arch-barriers-trail-white:#60a5fa;--arch-barriers-shade:#2a3443;--arch-barriers-burst:#f87171;--arch-barriers-burst-fill:#451a1a}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-barriers-grey:#a3acb9;--arch-barriers-white:#f8fafc;--arch-barriers-ball-line:#0f172a;--arch-barriers-trail-grey:#a3b1c6;--arch-barriers-trail-white:#60a5fa;--arch-barriers-shade:#2a3443;--arch-barriers-burst:#f87171;--arch-barriers-burst-fill:#451a1a}
.arch-lab .arch-barriers-stage svg{max-width:520px;margin:0 auto}
/* «Крупные клетки»: a cell is 46 px, the board scrolls sideways inside its own frame */
.arch-lab .arch-zoomed .arch-barriers-stage svg{width:406px;max-width:none;max-height:none}
.arch-lab svg text.arch-barriers-label,.arch-lab svg text.arch-barriers-count{fill:var(--arch-muted)}
.arch-lab .arch-barriers-cell{cursor:pointer;outline:none}
.arch-lab .arch-barriers-cell .arch-barriers-hit{stroke:none}
.arch-lab .arch-barriers-cell .arch-barriers-ring{stroke:transparent;stroke-width:3}
.arch-lab .arch-barriers-cell:hover .arch-barriers-ring{stroke:var(--arch-pressed-line);stroke-dasharray:5 4}
.arch-lab .arch-barriers-cell:focus-visible .arch-barriers-ring{stroke:var(--arch-focus);stroke-width:4;stroke-dasharray:none}
.arch-lab .arch-barriers-tabs button{font-weight:600}
.arch-lab .arch-barriers-tools,.arch-lab .arch-barriers-dirs{display:grid;gap:6px}
.arch-lab .arch-barriers-dirs .arch-label{margin:0}
.arch-lab .arch-barriers-log,.arch-lab .arch-barriers-rules{border-top:1px solid var(--arch-soft-line);padding-top:4px}
.arch-lab .arch-barriers-log summary,.arch-lab .arch-barriers-rules summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--arch-link)}
.arch-lab .arch-barriers-log summary:focus-visible,.arch-lab .arch-barriers-rules summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:2px}
.arch-lab .arch-barriers-log .arch-log{max-height:260px;overflow-y:auto;color:var(--arch-ink);font-size:15px;list-style:none;padding-left:0}
.arch-lab .arch-barriers-rules ul{margin:4px 0 8px;padding-left:1.2em;display:grid;gap:4px;color:var(--arch-ink);font-size:15px}
.arch-lab .arch-legend svg{flex:0 0 auto}
.arch-lab .arch-barriers-runbar,.arch-lab .arch-barriers-drawbar{display:grid;gap:10px}
.arch-lab .arch-barriers-runbar input[type=number]{width:76px;flex:0 0 76px}
/* focus: an amber ring with a dark inner line, so it stands out on the white board too */
.arch-lab .arch-barriers-cell .arch-barriers-ring2{stroke:transparent;stroke-width:2}
.arch-lab .arch-barriers-cell:focus-visible .arch-barriers-ring2{stroke:var(--arch-fig-line)}
/* while the model runs the cells cannot be tapped: the whole board stays in view, without «Крупные клетки» */
.arch-lab .arch-zoom.arch-barriers-running .arch-zoom-tools,.arch-lab .arch-zoom.arch-barriers-running .arch-zoom-hint{display:none}
.arch-lab .arch-zoomed.arch-barriers-running .arch-barriers-stage svg{width:100%;max-width:520px;max-height:70vh}
.arch-lab .arch-barriers-end{font-weight:600}
/* phones: the time slider gets its own row, so all moments are easy to reach */
@media (max-width:520px){
 .arch-lab .arch-barriers-runbar .arch-timeline{flex-wrap:wrap}
 .arch-lab .arch-barriers-runbar .arch-timeline .arch-play{flex:1 1 auto}
 .arch-lab .arch-barriers-runbar .arch-timeline input[type=range]{order:3;flex:1 1 100%}
}

/* 2022 1.1 — the button (labs/button-48.mjs). Local colours: the calculator screen and the loop (orange, as in
   the solution figures); dark values follow the same theme selectors as lab.css. */
.arch-lab{--arch-button-48-lcd:#e3ecd8;--arch-button-48-lcd-ink:#12261a;--arch-button-48-lcd-line:#9cb38d;--arch-button-48-loop:#ffedd5;--arch-button-48-loop-line:#c2410c}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-button-48-lcd:#102119;--arch-button-48-lcd-ink:#c8f1d2;--arch-button-48-lcd-line:#3f5f4a;--arch-button-48-loop:#4a2a12;--arch-button-48-loop-line:#fb923c}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-button-48-lcd:#102119;--arch-button-48-lcd-ink:#c8f1d2;--arch-button-48-lcd-line:#3f5f4a;--arch-button-48-loop:#4a2a12;--arch-button-48-loop-line:#fb923c}
.arch-lab .arch-button-48-device{display:grid;gap:6px;min-width:0;max-width:520px}
.arch-lab .arch-button-48-screen{display:flex;flex-direction:column;background:var(--arch-button-48-lcd);color:var(--arch-button-48-lcd-ink);border:2px solid var(--arch-button-48-lcd-line);border-radius:14px;padding:10px 18px 4px;box-shadow:inset 0 2px 8px rgba(0,0,0,.14);min-width:0}
.arch-lab .arch-button-48-screen-top{display:flex;justify-content:space-between;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab .arch-button-48-value{font-size:60px;line-height:1.12;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.03em;overflow-wrap:anywhere}
.arch-lab .arch-button-48-calc{margin:0;font-size:17px;color:var(--arch-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* typed number fields (text fields with a numeric keyboard) fit seven digits and never shrink in a flex row,
   so «2022» and «1000000» stay whole next to the slider */
.arch-lab input.arch-button-48-field{width:108px;flex:0 0 auto;font-variant-numeric:tabular-nums}
/* phones: «Пуск» and the exact press field share a line, the slider (presses 0–2022) gets a whole line of its own */
@media (max-width:480px){
 .arch-lab .arch-timeline.arch-button-48-timeline{flex-wrap:wrap}
 .arch-lab .arch-timeline.arch-button-48-timeline .arch-play{flex:1 1 auto}
 .arch-lab .arch-timeline.arch-button-48-timeline input[type=range]{order:3;flex:1 1 100%}
}
.arch-lab .arch-button-48-press{min-width:150px;font-weight:700;font-size:18px}
.arch-lab .arch-button-48-tape{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 4px;align-items:center;min-width:0}
.arch-lab .arch-button-48-tape li{display:flex;align-items:center;gap:4px}
.arch-lab .arch-button-48-tape li:not(:last-child)::after{content:'→';color:var(--arch-muted);font-size:16px}
.arch-lab .arch-button-48-chip{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:3px 8px 2px;border:1.5px solid var(--arch-field-line);border-radius:10px;background:var(--arch-surface);color:var(--arch-ink);font-variant-numeric:tabular-nums;line-height:1.2}
.arch-lab .arch-button-48-chip b{font-size:19px}
.arch-lab .arch-button-48-chip small{font-size:14px;color:var(--arch-muted);white-space:nowrap}
.arch-lab .arch-button-48-chip.is-loop{background:var(--arch-button-48-loop);border-color:var(--arch-button-48-loop-line)}
.arch-lab .arch-button-48-chip.is-loop small{color:var(--arch-ink)}
.arch-lab .arch-button-48-chip.is-repeat{border-style:dashed;border-width:2.5px}
.arch-lab .arch-button-48-chip.is-current{box-shadow:0 0 0 3px var(--arch-primary-bg)}
.arch-lab .arch-button-48-gap{color:var(--arch-muted);font-weight:700;font-size:18px;padding:0 4px}
.arch-lab .arch-button-48-loopbox{display:grid;gap:12px;align-items:center;min-width:0}
.arch-lab .arch-button-48-loopbox[hidden]{display:none}
@media (min-width:640px){.arch-lab .arch-button-48-loopbox{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.arch-lab .arch-button-48-ring svg{max-width:400px;margin:auto}
.arch-lab table.arch-button-48-table{width:100%}
.arch-lab .arch-button-48-table caption{text-align:left;font-weight:600;color:var(--arch-label);padding:0 0 6px}
.arch-lab .arch-button-48-table td{text-align:left}
.arch-lab .arch-button-48-table thead th{white-space:nowrap}
.arch-lab .arch-button-48-table th.arch-button-48-num{background:var(--arch-button-48-loop);font-size:18px}
.arch-lab .arch-button-48-table tr.is-current td{background:var(--arch-pressed-bg);font-weight:600}
.arch-lab .arch-button-48-table tr.is-current th.arch-button-48-num{box-shadow:inset 0 0 0 3px var(--arch-primary-bg)}
.arch-lab .arch-button-48-sentence label{font-weight:400;color:var(--arch-ink)}
@media (max-width:480px){.arch-lab .arch-button-48-value{font-size:48px}.arch-lab .arch-button-48-screen{padding:8px 14px 2px}}
/* text only for screen readers (the «…» in the tape says which presses are skipped) */
.arch-lab .arch-button-48-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 2022 2.2 «В замке живут Рыцари и Лжецы» — lab labs/castle.mjs («Собери замок»). Blue = a place where the statement
   is true and a knight (both true), amber = false and a liar (both false), red dashed = a contradiction, violet = the
   chosen resident. Badge letters are dark on light fills in the dark theme and white on dark fills in the light one
   (contrast ≥ 4.5:1 in both). Layout: lists and the side panel side by side when the lab is wide, one column on phones. */
.arch-lab{--arch-castle-true-bg:#dbeafe;--arch-castle-true-line:#93c5fd;--arch-castle-false-bg:#fef3c7;--arch-castle-false-line:#f2c94c;--arch-castle-knight:#1d4ed8;--arch-castle-liar:#b45309;--arch-castle-badge-ink:#fff;--arch-castle-pick:#7c3aed;--arch-castle-flash:#ede9fe}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-castle-true-bg:#1c3557;--arch-castle-true-line:#3d6aa3;--arch-castle-false-bg:#3d2e0e;--arch-castle-false-line:#8a6a1c;--arch-castle-knight:#93c5fd;--arch-castle-liar:#fbbf24;--arch-castle-badge-ink:#111827;--arch-castle-pick:#c4b5fd;--arch-castle-flash:#3b2a63}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-castle-true-bg:#1c3557;--arch-castle-true-line:#3d6aa3;--arch-castle-false-bg:#3d2e0e;--arch-castle-false-line:#8a6a1c;--arch-castle-knight:#93c5fd;--arch-castle-liar:#fbbf24;--arch-castle-badge-ink:#111827;--arch-castle-pick:#c4b5fd;--arch-castle-flash:#3b2a63}
.arch-lab .arch-castle-predict{border-top:0;padding-top:0}
.arch-lab .arch-castle-predict .arch-label,.arch-lab .arch-castle-size .arch-label{margin:0}
.arch-lab .arch-castle-size{display:grid;gap:8px}
.arch-lab .arch-castle-sizes button{min-width:48px;padding:8px 10px;font-variant-numeric:tabular-nums;position:relative}
.arch-lab .arch-castle-sizes button[data-mark=found]::after,.arch-lab .arch-castle-sizes button[data-mark=impossible]::after{position:absolute;top:-7px;right:-5px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:13px;font-weight:800;line-height:1;color:var(--arch-surface)}
.arch-lab .arch-castle-sizes button[data-mark=found]::after{content:'✓';background:var(--arch-good)}
.arch-lab .arch-castle-sizes button[data-mark=impossible]::after{content:'✗';background:var(--arch-muted)}
.arch-lab .arch-castle-wrap{container-type:inline-size;min-width:0}
.arch-lab .arch-castle-top{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@container (min-width:660px){.arch-lab .arch-castle-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.arch-lab .arch-castle-side{display:grid;gap:10px;min-width:0}
.arch-lab .arch-castle-stage{padding:12px 10px}
.arch-lab .arch-castle-says{display:grid;gap:4px}
.arch-lab .arch-castle-says .arch-label{margin:0}
.arch-lab .arch-castle-says ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;line-height:1.45;color:var(--arch-ink)}
.arch-lab .arch-castle-main{display:grid;gap:10px;min-width:0}

/* the two lists */
.arch-lab .arch-castle-board{display:grid;grid-template-columns:minmax(0,1fr) clamp(34px,18%,104px) minmax(0,1fr);align-items:start;max-width:470px;margin:0 auto}
.arch-lab .arch-castle-col{display:flex;flex-direction:column;gap:5px;min-width:0}
.arch-lab .arch-castle-head{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25;padding-bottom:2px}
.arch-lab .arch-castle-head strong{font-size:16px;color:var(--arch-label)}
.arch-lab .arch-castle-head span{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-castle-zone{margin:6px 0 0;font-size:14px;font-weight:700;line-height:1.2;padding-left:2px}
.arch-lab .arch-castle-zone[data-truth=true]{color:var(--arch-castle-knight)}
.arch-lab .arch-castle-zone[data-truth=false]{color:var(--arch-castle-liar)}
.arch-lab .arch-castle-zone[data-truth=gap]{visibility:hidden}
.arch-lab .arch-castle-sum{margin:12px auto 0;width:fit-content;max-width:100%;padding:6px 14px;border-radius:999px;border:1.5px solid var(--arch-bad);color:var(--arch-ink);background:var(--arch-bad-bg);font-weight:700;font-size:16px;line-height:1.3;text-align:center;text-wrap:balance}
.arch-lab .arch-castle-sum[data-ok=true]{border-color:var(--arch-good);background:var(--arch-ok-bg)}
.arch-lab .arch-castle-linkbox{position:relative;align-self:stretch;min-width:0}
.arch-lab .arch-stage svg.arch-castle-links{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:visible;pointer-events:none}
.arch-lab .arch-castle-slot{display:flex;align-items:center;gap:6px;width:100%;height:44px;min-height:44px;min-width:0;padding:0 6px 0 8px;border-radius:10px;border:1.5px solid var(--arch-castle-true-line);background:var(--arch-castle-true-bg);color:var(--arch-ink);text-align:left;font-size:16px;line-height:1.2;white-space:nowrap}
.arch-lab .arch-castle-slot[data-truth=false]{background:var(--arch-castle-false-bg);border-color:var(--arch-castle-false-line)}
.arch-lab .arch-castle-slot[data-role=conflict]{border:2px dashed var(--arch-bad)}
.arch-lab .arch-castle-slot[data-above=true]{box-shadow:inset 5px 0 0 var(--arch-castle-pick)}
.arch-lab .arch-castle-slot[data-focus=true]{box-shadow:0 0 0 3px var(--arch-castle-pick)}
.arch-lab .arch-castle-slot[aria-pressed=true]{box-shadow:0 0 0 3px var(--arch-castle-pick),0 0 0 6px var(--arch-surface),0 0 0 8px var(--arch-castle-pick)}
.arch-lab .arch-castle-slot:focus-visible{outline:3px solid var(--arch-ink);outline-offset:3px}
.arch-lab .arch-castle-slot[data-fresh=true]{animation:arch-castle-flash 1s ease-out}
@keyframes arch-castle-flash{from{background:var(--arch-castle-flash)}}
.arch-lab .arch-castle-place{flex:none;min-width:1.25em;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab .arch-castle-name{flex:1 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.arch-lab .arch-castle-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:14px;font-weight:800;line-height:1;color:var(--arch-castle-badge-ink);background:var(--arch-castle-knight)}
.arch-lab .arch-castle-badge[data-role=liar]{background:var(--arch-castle-liar)}
.arch-lab .arch-castle-badge[data-role=conflict]{background:var(--arch-bad)}
.arch-lab .arch-castle-link{fill:none;stroke-width:2.5px;stroke-linecap:round;stroke:var(--arch-castle-knight)}
.arch-lab .arch-castle-link[data-role=liar]{stroke:var(--arch-castle-liar)}
.arch-lab .arch-castle-link[data-role=conflict]{stroke:var(--arch-bad);stroke-dasharray:6 4}
.arch-lab .arch-castle-link[data-focus=true]{stroke-width:4.5px}
.arch-lab .arch-castle-dot{fill:var(--arch-castle-knight)}
.arch-lab .arch-castle-dot[data-role=liar]{fill:var(--arch-castle-liar)}
.arch-lab .arch-castle-dot[data-role=conflict]{fill:var(--arch-bad)}
.arch-lab .arch-castle-links[data-dim=true] :is(.arch-castle-link,.arch-castle-dot):not([data-focus=true]){opacity:.45}
.arch-lab .arch-castle-legend{justify-content:center;margin-top:12px;gap:6px 14px}
.arch-lab .arch-castle-sw{display:inline-block;width:22px;height:16px;border-radius:5px;border:1.5px solid var(--arch-castle-true-line);background:var(--arch-castle-true-bg);flex:none}
.arch-lab .arch-castle-sw[data-truth=false]{border-color:var(--arch-castle-false-line);background:var(--arch-castle-false-bg)}

/* one resident */
.arch-lab .arch-castle-inspect{display:grid;gap:6px;padding:12px}
.arch-lab .arch-castle-inspect .arch-label{margin:0}
.arch-lab .arch-castle-ibody{display:grid;gap:4px;line-height:1.45;color:var(--arch-ink)}
.arch-lab .arch-castle-ibody p{margin:0}
.arch-lab .arch-castle-ititle{display:flex;align-items:center;gap:8px;font-size:17px}
.arch-lab .arch-castle-stmt{padding-left:10px;border-left:3px solid var(--arch-soft-line)}
.arch-lab .arch-castle-tv{font-weight:700;color:var(--arch-castle-knight)}
.arch-lab .arch-castle-tv[data-truth=false]{color:var(--arch-castle-liar)}
.arch-lab .arch-castle-verdict{font-weight:600}
.arch-lab .arch-castle-tour{display:grid;gap:4px;margin-top:6px;padding-top:8px;border-top:1px solid var(--arch-soft-line)}
.arch-lab .arch-castle-readouts{gap:4px 16px}
/* the counting conclusion for an impossible n is part of the answer, not the student's mistake: neutral */
.arch-lab .arch-castle-key{color:var(--arch-ink);font-weight:600}
/* phones: a narrower gap for the lines, so that every name fits on its place */
@container (max-width:430px){
 .arch-lab .arch-castle-stage{padding:10px 6px}
 .arch-lab .arch-castle-board{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
 .arch-lab .arch-castle-slot{gap:4px;padding:0 4px 0 6px}
 .arch-lab .arch-castle-place{min-width:1.05em}
 .arch-lab .arch-castle-slot .arch-castle-badge{width:22px;height:22px;font-size:13px}
}
/* one column (phones): the result comes right after the action buttons, the keyboard note goes last.
   Placed after the base rules of .arch-castle-main/-side so that it wins. */
@container (max-width:659.98px){
 .arch-lab .arch-castle-main,.arch-lab .arch-castle-side{display:contents}
 .arch-lab .arch-castle-kbd{order:1}
}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-castle-slot[data-fresh=true]{animation:none}}

/* 2022 2.1 — 24 crosses on a 7 × 9 board (labs/crosses.mjs). The cells are buttons; the SVG on top of them
   (pointer-events: none) only draws the frame of one square. Object colours: the crosses, the frames of the two
   overlapping 3 × 3 squares and their shared cells keep their meaning in both themes; the rest uses --arch-* tokens. */
.arch-lab .arch-crosses{--arch-crosses-x:#1d4ed8;--arch-crosses-left:#2563eb;--arch-crosses-shared:#86efac;--arch-crosses-rest:#e5e7eb;--arch-crosses-rest-line:#64748b}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab .arch-crosses{--arch-crosses-x:#93c5fd;--arch-crosses-left:#60a5fa;--arch-crosses-shared:#166534;--arch-crosses-rest:#374151;--arch-crosses-rest-line:#94a3b8}}
:root[data-design="v2"][data-theme="dark"] .arch-lab .arch-crosses{--arch-crosses-x:#93c5fd;--arch-crosses-left:#60a5fa;--arch-crosses-shared:#166534;--arch-crosses-rest:#374151;--arch-crosses-rest-line:#94a3b8}
/* the board: row numbers | cells | crosses per row; column numbers on top */
.arch-lab .arch-crosses-stage{padding:10px}
.arch-lab .arch-crosses-board{display:grid;grid-template-columns:24px minmax(0,1fr) 30px;grid-template-rows:24px auto;width:min(100%,520px);margin:auto;container-type:inline-size}
.arch-lab .arch-zoomed .arch-crosses-board{width:468px;max-width:none}
.arch-lab .arch-crosses-collabels{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));align-items:end;padding-bottom:3px}
.arch-lab .arch-crosses-rowlabels,.arch-lab .arch-crosses-sums{display:grid;grid-template-rows:repeat(7,minmax(0,1fr))}
.arch-lab .arch-crosses-collabels span,.arch-lab .arch-crosses-rowlabels span,.arch-lab .arch-crosses-sums span{display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--arch-muted);font-variant-numeric:tabular-nums}
.arch-lab .arch-crosses-sums span{font-weight:600;color:var(--arch-ink)}
.arch-lab .arch-crosses-sums span.arch-crosses-sum-zero{font-weight:400;color:var(--arch-muted)}
.arch-lab .arch-crosses-cells{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));aspect-ratio:9/7;box-shadow:0 0 0 2px var(--arch-fig-line);background:var(--arch-surface)}
.arch-lab .arch-crosses-cell{position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;margin:0;border:0;border-right:1px solid var(--arch-grid);border-bottom:1px solid var(--arch-grid);border-radius:0;background:var(--arch-surface);color:var(--arch-ink);line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arch-lab .arch-crosses-cell:nth-child(9n){border-right:0}
.arch-lab .arch-crosses-cell:nth-child(n+55){border-bottom:0}
.arch-lab .arch-crosses-cell:hover{background:var(--arch-pressed-bg)}
.arch-lab .arch-crosses-cell:focus-visible{outline:4px solid var(--arch-focus);outline-offset:-4px;z-index:1}
/* the cross sits low and left in its cell, clear of the number in the top-right corner. The selector must beat the
   shared «.arch-lab .arch-stage svg» (width:100%), or the glyph would fill the cell and be cut by its neighbours. */
.arch-lab .arch-crosses-cell svg.arch-crosses-x{position:absolute;display:block;left:8%;top:37%;width:56%;height:56%;max-height:none;overflow:visible}
.arch-lab .arch-crosses-x{visibility:hidden}
.arch-lab .arch-crosses-x path{stroke:var(--arch-crosses-x);stroke-width:1.5}
.arch-lab .arch-crosses-cell.arch-crosses-on .arch-crosses-x{visibility:visible}
@media (hover:hover){.arch-lab .arch-crosses-cell:hover:not(.arch-crosses-on) .arch-crosses-x{visibility:visible;opacity:.28}}
.arch-lab .arch-stage .arch-crosses-overlay{position:absolute;inset:0;width:100%;height:100%;max-height:none;pointer-events:none;overflow:visible}
/* the number of a square, in the top-right corner of its centre cell */
.arch-lab .arch-crosses-badge{position:absolute;top:max(1px,.4cqi);right:max(1px,.4cqi);min-width:1.45em;padding:0 .25em;border-radius:999px;font-size:clamp(9px,2.7cqi,14px);font-weight:700;line-height:1.4;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.arch-lab .arch-crosses-badge:empty{display:none}
.arch-lab .arch-crosses-ok{background:var(--arch-ok-bg);color:var(--arch-good)}
.arch-lab .arch-crosses-many{background:var(--arch-bad-bg);color:var(--arch-bad)}
.arch-lab .arch-crosses-few{background:var(--arch-surface);color:var(--arch-muted);box-shadow:inset 0 0 0 1px var(--arch-soft-line)}
.arch-lab .arch-crosses-legend .arch-crosses-chip{position:static;font-size:13px;min-width:1.9em}
.arch-lab .arch-crosses-legend-sum{display:inline-flex;justify-content:center;min-width:1.6em;font-weight:600;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-crosses-legend li{align-items:flex-start}
.arch-lab .arch-crosses-detailrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:2px}
.arch-lab .arch-crosses-detail{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-crosses-show{font-size:15px;padding:8px 14px}
.arch-lab .arch-crosses-stage{scroll-margin-block:100px}
.arch-lab .arch-crosses-observe{font-weight:600;color:var(--arch-label)}
/* part 3: the proof on the student's board */
.arch-lab .arch-crosses-proof svg{max-width:520px;margin:0 auto}
.arch-lab .arch-crosses-gl{stroke:var(--arch-grid);stroke-width:1.2}
.arch-lab .arch-crosses-pframe{fill:none;stroke:var(--arch-fig-line);stroke-width:2.6}
.arch-lab svg text.arch-crosses-plabel{font-size:23px;fill:var(--arch-muted)}
.arch-lab .arch-crosses-px{fill:none;stroke:var(--arch-crosses-x);stroke-width:3.4;stroke-linecap:round}
.arch-lab .arch-crosses-tile{fill-opacity:.62}
.arch-lab .arch-crosses-tile-0{fill:var(--arch-piece-a)}
.arch-lab .arch-crosses-tile-1{fill:var(--arch-piece-b)}
.arch-lab .arch-crosses-tileline{fill:none;stroke:var(--arch-fig-line);stroke-width:3}
.arch-lab .arch-crosses-pbadge{fill:var(--arch-surface);stroke-width:2}
.arch-lab .arch-crosses-pbadge-ok{stroke:var(--arch-good)}
.arch-lab .arch-crosses-pbadge-bad{stroke:var(--arch-bad)}
.arch-lab svg text.arch-crosses-pcount{font-size:22px;font-weight:700;fill:var(--arch-ink)}
.arch-lab .arch-crosses-rest{fill:var(--arch-crosses-rest);stroke:var(--arch-crosses-rest-line);stroke-width:2;stroke-dasharray:7 5}
.arch-lab .arch-crosses-shared{fill:var(--arch-crosses-shared)}
.arch-lab .arch-crosses-sqleft{fill:none;stroke:var(--arch-crosses-left);stroke-width:4}
.arch-lab .arch-crosses-sqright{fill:none;stroke:var(--arch-accent);stroke-width:4;stroke-dasharray:12 7}
.arch-lab .arch-crosses-big{fill:none;stroke-width:5}
.arch-lab .arch-crosses-big-plain{stroke:var(--arch-fig-line)}
.arch-lab .arch-crosses-big-ok{stroke:var(--arch-good)}
.arch-lab .arch-crosses-big-many{stroke:var(--arch-bad)}
.arch-lab .arch-crosses-eq{display:grid;gap:4px;font-size:17px;font-weight:600;color:var(--arch-ink);font-variant-numeric:tabular-nums;text-align:center;min-height:1.5em}
.arch-lab .arch-crosses-prooftext{margin:0;color:var(--arch-ink)}
.arch-lab .arch-crosses-nowrap{white-space:nowrap}
.arch-lab .arch-crosses-step{min-width:4.2em;text-align:right;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-crosses-stepper{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.arch-lab .arch-crosses-pos{min-width:6.6em;text-align:center;font-weight:600;color:var(--arch-ink);white-space:nowrap}
.arch-lab .arch-crosses-posrow[hidden]{display:none}
.arch-lab .arch-crosses-why .arch-result:empty{display:none}

/* 2021 №2 — «Расставь числа на кубе» (labs/cube-sums.mjs). Colours only through the --arch-* variables of lab.css. */
.arch-lab .arch-cube-sums-predict{display:grid;gap:8px;border:1px solid var(--arch-soft-line);border-radius:8px;padding:10px 12px;background:var(--arch-surface)}
.arch-lab .arch-cube-sums-predict p{margin:0}
.arch-lab .arch-cube-sums-q{color:var(--arch-ink)}
/* The layout follows the width of the lab itself (container queries), not the window: inside the lesson page the lab
 is much narrower than the viewport (about 560–630 px on a laptop), so a viewport switch left a 112–250 px column. */
.arch-lab .arch-cube-sums-wrap{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-cube-sums-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-cube-sums-left,.arch-lab .arch-cube-sums-right{display:grid;gap:10px;align-content:start;min-width:0}
.arch-lab .arch-cube-sums-stage{padding:10px}
/* One-line verdict under the cube: only where the list of sums is below the buttons (one column, see the container query below). */
.arch-lab .arch-cube-sums-strip{margin:8px 0 0;text-align:center;font-size:15px;line-height:1.4;color:var(--arch-ink)}
.arch-lab .arch-cube-sums-strip[hidden]{display:none}
.arch-lab .arch-cube-sums-strip.arch-bad{color:var(--arch-bad)}
.arch-lab .arch-cube-sums-strip.arch-good{color:var(--arch-good)}
.arch-lab .arch-cube-sums-cube{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1}
.arch-lab .arch-cube-sums-cube svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block}
.arch-lab .arch-cube-sums-v{position:absolute;aspect-ratio:1/1;height:auto;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border-radius:50%;padding:0;
 background:var(--arch-surface);color:var(--arch-ink);border:3px solid var(--arch-fig-line);font-size:clamp(20px,5.4vw,28px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
.arch-lab .arch-cube-sums-v.arch-cube-sums-in{background:var(--arch-fill);border-color:var(--arch-pressed-line)}
.arch-lab .arch-cube-sums-v.arch-cube-sums-sel{border:5px solid var(--arch-accent);box-shadow:0 0 0 3px var(--arch-surface),0 0 0 6px var(--arch-accent)}
.arch-lab .arch-cube-sums-done .arch-cube-sums-v{border-color:var(--arch-good)}
.arch-lab .arch-cube-sums-done .arch-cube-sums-v.arch-cube-sums-in{border-color:var(--arch-pressed-line)}
.arch-lab .arch-cube-sums-palette{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px;max-width:340px;width:100%;margin:0 auto}
.arch-lab .arch-cube-sums-n{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-primary-bg);padding:6px 0}
/* A number already on the cube stays a live button (it can still be moved): solid border, softer fill, a small dot. */
.arch-lab .arch-cube-sums-n{position:relative}
.arch-lab .arch-cube-sums-n.arch-cube-sums-used{background:var(--arch-clear);border-color:var(--arch-field-line)}
.arch-lab .arch-cube-sums-n.arch-cube-sums-used::after{content:'';position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--arch-ink)}
.arch-lab .arch-cube-sums-n[aria-pressed=true]{border:3px solid var(--arch-accent);background:var(--arch-pressed-bg)}
.arch-lab .arch-cube-sums-pick{text-align:center}
.arch-lab .arch-cube-sums-left .arch-actions{justify-content:center}
.arch-lab .arch-cube-sums-pairs{display:grid;gap:8px}
.arch-lab .arch-cube-sums-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(3.4em,auto);gap:6px;align-items:center}
.arch-lab .arch-cube-sums-plus{color:var(--arch-ink);font-weight:600}
.arch-lab .arch-cube-sums-total{font-weight:700;color:var(--arch-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.arch-lab .arch-cube-sums-chip{display:grid;justify-items:start;gap:0;text-align:left;padding:6px 8px;min-height:56px;background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-soft-line);border-radius:8px}
.arch-lab .arch-cube-sums-chip:hover{border-color:var(--arch-pressed-line)}
.arch-lab .arch-cube-sums-chip[aria-pressed=true]{box-shadow:inset 0 -5px 0 var(--arch-pressed-line);border-color:var(--arch-pressed-line)}
.arch-lab .arch-cube-sums-name{font-size:14px;color:var(--arch-label);line-height:1.2}
.arch-lab .arch-cube-sums-sum{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.arch-lab .arch-cube-sums-flag{font-size:14px;font-weight:700;color:var(--arch-bad);line-height:1.2}
.arch-lab .arch-cube-sums-flag:empty{display:none}
.arch-lab .arch-cube-sums-chip.arch-cube-sums-repeat{border-color:var(--arch-bad);background:var(--arch-bad-bg)}
.arch-lab .arch-cube-sums-chip.arch-cube-sums-ok{border-color:var(--arch-good);background:var(--arch-ok-bg)}
.arch-lab .arch-cube-sums-detail{margin:0;font-size:15px;color:var(--arch-ink);min-height:1.5em;font-variant-numeric:tabular-nums}
.arch-lab .arch-cube-sums-notes{margin:6px 0 0;padding-left:1.2em;display:grid;gap:4px;font-size:15px}
@media (prefers-reduced-motion:no-preference){.arch-lab .arch-cube-sums-v,.arch-lab .arch-cube-sums-chip{transition:background-color .15s,border-color .15s}}
@container (min-width:400px){.arch-lab .arch-cube-sums-palette{grid-template-columns:repeat(8,minmax(44px,1fr));max-width:440px}}
/* Two columns only when the sums column can stay at least 290 px wide (chips about 110 px: «Передняя» and «повтор» fit). */
@container (min-width:600px){.arch-lab .arch-cube-sums-main{grid-template-columns:minmax(0,320px) minmax(290px,1fr);align-items:start}
 .arch-lab .arch-cube-sums-palette{grid-template-columns:repeat(4,minmax(44px,1fr));max-width:320px}
 .arch-lab .arch-cube-sums-strip{display:none}}
.arch-lab .arch-cube-sums-tools{display:grid;gap:8px}
.arch-lab .arch-cube-sums-tools>summary{min-height:44px;display:flex;align-items:flex-start;padding-top:11px;box-sizing:border-box;cursor:pointer;font-weight:600;color:var(--arch-link)}
.arch-lab .arch-cube-sums-tools>summary{list-style:none;gap:8px}
.arch-lab .arch-cube-sums-tools>summary::-webkit-details-marker{display:none}
.arch-lab .arch-cube-sums-tools>summary::before{content:'▸';flex:0 0 auto}
.arch-lab .arch-cube-sums-tools[open]>summary::before{content:'▾'}
.arch-lab .arch-cube-sums-tools>summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:2px}
.arch-lab .arch-cube-sums-tools[open]>summary{margin-bottom:8px}
.arch-lab .arch-cube-sums-tools .arch-help{margin-top:8px}
.arch-lab .arch-cube-sums-rand{display:grid;gap:6px;justify-items:start}

/* 2026 1.1 — two equal decagons (labs/decagon-cut.mjs). Piece fills and corner marks have their own colours:
   the second piece is called «жёлтая», so in the dark theme it stays a dark yellow (the shared piece token is
   brown there); marks sit on the fills — dark on the light fills, light on the dark fills of the dark theme. */
.arch-lab .arch-decagon-cut{--arch-decagon-cut-fill-a:#bfdbfe;--arch-decagon-cut-fill-b:#fde68a;--arch-decagon-cut-fill-c:#fbcfe8;--arch-decagon-cut-fill-d:#bbf7d0;--arch-decagon-cut-mark-a:#1d4ed8;--arch-decagon-cut-mark-b:#a14a07;--arch-decagon-cut-mark-c:#9d174d;--arch-decagon-cut-mark-d:#166534}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab .arch-decagon-cut{--arch-decagon-cut-fill-a:#1e40af;--arch-decagon-cut-fill-b:#9a7600;--arch-decagon-cut-fill-c:#9d174d;--arch-decagon-cut-fill-d:#166534;--arch-decagon-cut-mark-a:#bfdbfe;--arch-decagon-cut-mark-b:#fef08a;--arch-decagon-cut-mark-c:#fbcfe8;--arch-decagon-cut-mark-d:#bbf7d0}}
:root[data-design="v2"][data-theme="dark"] .arch-lab .arch-decagon-cut{--arch-decagon-cut-fill-a:#1e40af;--arch-decagon-cut-fill-b:#9a7600;--arch-decagon-cut-fill-c:#9d174d;--arch-decagon-cut-fill-d:#166534;--arch-decagon-cut-mark-a:#bfdbfe;--arch-decagon-cut-mark-b:#fef08a;--arch-decagon-cut-mark-c:#fbcfe8;--arch-decagon-cut-mark-d:#bbf7d0}
.arch-lab .arch-decagon-cut-stage{scroll-margin-top:96px;scroll-margin-bottom:16px}
.arch-lab .arch-decagon-cut-stage svg{max-width:640px;margin:auto}
.arch-lab .arch-zoomed .arch-decagon-cut-stage svg{width:510px;max-width:none;max-height:none}
.arch-lab .arch-decagon-cut-node{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* one focus mark on a grid point: the amber ring (the site's outline rectangle is switched off only here) */
:root .arch-lab .arch-decagon-cut .arch-decagon-cut-node:is(:focus,:focus-visible){outline:none}
.arch-lab .arch-decagon-cut-ring{fill:none;stroke:transparent;stroke-width:3.5}
.arch-lab .arch-decagon-cut-node:focus-visible .arch-decagon-cut-ring{stroke:var(--arch-focus)}
.arch-lab .arch-decagon-cut-node:hover .arch-decagon-cut-ring{stroke:var(--arch-field-line)}
.arch-lab .arch-decagon-cut-node:focus-visible:hover .arch-decagon-cut-ring{stroke:var(--arch-focus)}
.arch-lab .arch-decagon-cut-dot{fill:var(--arch-fig-line);opacity:.7}
.arch-lab .arch-decagon-cut-predict input[type=number]{width:88px}
.arch-lab .arch-decagon-cut-predict input[aria-invalid=true]{border-color:var(--arch-bad);border-width:2px}
.arch-lab .arch-decagon-cut-predict p.arch-bad{margin:0;font-size:15px}
.arch-lab .arch-decagon-cut-nowrap{white-space:nowrap}
.arch-lab .arch-decagon-cut-pieces{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.arch-lab .arch-decagon-cut-pieces li{display:flex;gap:8px;align-items:flex-start}
.arch-lab .arch-decagon-cut-swatch{flex:0 0 auto;width:20px;height:20px;margin-top:2px}
.arch-lab .arch-decagon-cut .arch-legend svg{flex:0 0 auto}
/* the overlay panel under the cut buttons */
.arch-lab .arch-decagon-cut-overlay{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--arch-soft-line);border-left:4px solid var(--arch-decagon-cut-mark-b);border-radius:14px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-decagon-cut-overlay[hidden]{display:none}
.arch-lab .arch-decagon-cut-overlay>p{margin:0}
.arch-lab .arch-decagon-cut-phase{color:var(--arch-ink);line-height:1.5;min-height:3em}
.arch-lab .arch-decagon-cut-phase strong{color:var(--arch-label)}
.arch-lab .arch-decagon-cut-stops{display:flex;flex-wrap:wrap;gap:6px}
.arch-lab .arch-decagon-cut-stops button[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);font-weight:600}
.arch-lab .arch-decagon-cut-percent{min-width:3.6em;text-align:right;font-variant-numeric:tabular-nums;color:var(--arch-ink)}
.arch-lab .arch-decagon-cut-overlay [role=status]:empty{display:none}
.arch-lab .arch-decagon-cut-overlay .arch-decagon-cut-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.arch-lab .arch-decagon-cut-reveal{margin-top:10px}
.arch-lab .arch-decagon-cut-reveal>summary{min-height:44px;display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-weight:600;color:var(--arch-link)}
.arch-lab .arch-decagon-cut-reveal>summary::-webkit-details-marker{display:none}
.arch-lab .arch-decagon-cut-reveal>summary::before{content:'▸';flex:0 0 auto}
.arch-lab .arch-decagon-cut-reveal[open]>summary::before{content:'▾'}
.arch-lab .arch-decagon-cut-reveal>summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:2px}

/* Popov Academy — content-factory/archimedes-winter-2021-2022-2026-v1
   2021 problem 1 «Касса цифр» (digit-cards): Masha's cards, Tolya's choice, place shares and the board of 16 schemes.
   Only the lab's --arch-* colours (both themes). Meaning of the two object colours, the same as in the figures:
   «−4» — blue (--arch-piece-a), «+1» — yellow (--arch-piece-b); text on them is always --arch-ink. */
.arch-lab .arch-digit-cards{display:grid;gap:18px;min-width:0}
.arch-lab .arch-digit-cards [hidden]{display:none!important}
.arch-lab .arch-digit-cards-section{display:grid;gap:10px;min-width:0}
.arch-lab .arch-digit-cards-section+.arch-digit-cards-section{border-top:1px solid var(--arch-soft-line);padding-top:16px}
.arch-lab .arch-digit-cards p{margin:0}

/* the cash desk: a label column and one column per place */
.arch-lab .arch-digit-cards-bench{scroll-margin-top:96px;display:grid;grid-template-columns:minmax(90px,max-content) repeat(4,minmax(0,76px));justify-content:center;gap:8px 12px;align-items:center;padding:14px 12px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);transition:background-color .3s,border-color .3s;min-width:0}
.arch-lab .arch-digit-cards-bench.arch-digit-cards-win{background:var(--arch-ok-bg);border-color:var(--arch-good)}
.arch-lab .arch-digit-cards-win .arch-digit-cards-place{color:var(--arch-ink)}
.arch-lab .arch-digit-cards-rowlabel{font-size:14px;font-weight:600;color:var(--arch-label);line-height:1.25;max-width:120px}
.arch-lab .arch-digit-cards-place{font-size:14px;color:var(--arch-muted);text-align:center}
.arch-lab .arch-digit-cards-cell{display:flex;justify-content:center;align-items:center;min-width:0;position:relative}
.arch-lab .arch-digit-cards-card{display:flex;align-items:center;justify-content:center;width:100%;max-width:68px;height:76px;border-radius:10px;font-size:34px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.arch-lab button.arch-digit-cards-masha{padding:0;min-width:44px;background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-field-line);box-shadow:0 3px 0 var(--arch-soft-line)}
.arch-lab button.arch-digit-cards-masha[aria-pressed=true]{border-color:var(--arch-pressed-line);background:var(--arch-pressed-bg);box-shadow:0 0 0 2px var(--arch-pressed-line)}
.arch-lab .arch-digit-cards-tolya{background:var(--arch-clear);color:var(--arch-ink);border:2px solid var(--arch-field-line)}
.arch-lab .arch-digit-cards-tolya.arch-digit-cards-bad{background:var(--arch-bad-bg);color:var(--arch-bad);border:2px dashed var(--arch-bad);font-size:24px;text-decoration:line-through;text-decoration-thickness:2px}
.arch-lab button.arch-digit-cards-op{width:100%;max-width:68px;padding:0 4px;border-radius:999px;font-size:18px;font-weight:700;color:var(--arch-ink);border:1px solid var(--arch-field-line)}
.arch-lab button.arch-digit-cards-op[data-op="-4"]{background:var(--arch-piece-a)}
.arch-lab button.arch-digit-cards-op[data-op="+1"]{background:var(--arch-piece-b)}
/* the flow Masha → Tolya's choice → Tolya: short connectors between the rows */
.arch-lab .arch-digit-cards-opcell::before,.arch-lab .arch-digit-cards-tolyacell::before{content:'';position:absolute;left:calc(50% - 1px);top:-8px;width:2px;height:8px;background:var(--arch-field-line)}
.arch-lab .arch-digit-cards-share{font-size:15px;font-weight:600;color:var(--arch-ink);white-space:nowrap;font-variant-numeric:tabular-nums;padding-bottom:2px;border-bottom:4px solid var(--arch-soft-line)}
.arch-lab .arch-digit-cards-share[data-op="-4"]{border-bottom-color:var(--arch-piece-a)}
.arch-lab .arch-digit-cards-share[data-op="+1"]{border-bottom-color:var(--arch-piece-b)}
/* the last row: the check 4 · Tolya = Masha and the verdict, a framed strip across the four columns (phones: full width) */
.arch-lab .arch-digit-cards-check{grid-column:2/-1;flex-wrap:wrap;gap:2px 12px;margin-top:4px;padding:6px 10px;border:1px solid var(--arch-soft-line);border-radius:10px;background:var(--arch-surface);text-align:center;line-height:1.35}
.arch-lab .arch-digit-cards-checklabel{margin-top:4px}
.arch-lab .arch-digit-cards-checkeq{font-size:20px;font-weight:600;color:var(--arch-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.arch-lab .arch-digit-cards-checkeq.arch-digit-cards-eq-none{font-size:18px;color:var(--arch-muted)}
.arch-lab .arch-digit-cards-checkwords{font-size:16px;font-weight:600}
@keyframes arch-digit-cards-flip{from{transform:perspective(200px) rotateX(80deg);opacity:.3}to{transform:none;opacity:1}}
.arch-lab .arch-digit-cards-flip{animation:arch-digit-cards-flip .28s ease-out}

/* digit pad and the whole number */
.arch-lab .arch-digit-cards-padlabel{font-size:15px}
.arch-lab .arch-digit-cards-pad{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:6px;max-width:620px}
.arch-lab button.arch-digit-cards-key{padding:0;font-size:20px;font-weight:600;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-field-line)}
.arch-lab button.arch-digit-cards-key[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);box-shadow:inset 0 0 0 1px var(--arch-pressed-line)}
.arch-lab .arch-digit-cards-fieldrow label{font-size:15px}
.arch-lab input.arch-digit-cards-number{box-sizing:border-box;width:6.2em;height:48px;min-height:44px;font-size:20px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.arch-lab .arch-digit-cards-fielderror{font-size:15px}

/* result */
.arch-lab .arch-digit-cards-problems{margin:4px 0;padding-left:1.2em;display:grid;gap:2px}
.arch-lab .arch-digit-cards-progress{font-size:15px;color:var(--arch-ink)}
/* the observation of steps 1–2 (same scheme → same difference): a calm callout in normal ink, not a muted footnote */
.arch-lab .arch-digit-cards-note{padding:10px 14px;border-left:4px solid var(--arch-pressed-line);border-radius:4px 12px 12px 4px;background:var(--arch-pressed-bg);color:var(--arch-ink);font-size:16px;font-weight:600;line-height:1.45}

/* the 16 schemes */
.arch-lab .arch-digit-cards-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.arch-lab button.arch-digit-cards-chip{display:grid;gap:6px;justify-items:center;align-content:center;min-width:0;padding:8px 3px;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-soft-line);border-radius:10px;font-size:14px;line-height:1.3}
.arch-lab button.arch-digit-cards-chip[aria-pressed=true]{border:2px solid var(--arch-pressed-line);box-shadow:0 0 0 1px var(--arch-pressed-line);padding:7px 3px}
.arch-lab button.arch-digit-cards-chip:is([data-state=found],[data-state=works]){background:var(--arch-ok-bg)}
.arch-lab button.arch-digit-cards-chip[data-state=cards-differ]{background:var(--arch-bad-bg)}
.arch-lab .arch-digit-cards-badges{display:flex;gap:2px}
.arch-lab .arch-digit-cards-badge{box-sizing:border-box;min-width:27px;padding:1px 1px;border-radius:5px;font-size:14px;font-weight:700;color:var(--arch-ink);text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-digit-cards-badge[data-op="-4"]{background:var(--arch-piece-a)}
.arch-lab .arch-digit-cards-badge[data-op="+1"]{background:var(--arch-piece-b)}
.arch-lab .arch-digit-cards-chipstatus{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:center}
.arch-lab .arch-digit-cards-chip:is([data-state=new],[data-state=negative],[data-state=not-divisible]) .arch-digit-cards-chipstatus{color:var(--arch-muted);font-weight:400}
.arch-lab .arch-digit-cards-brief{padding:8px 12px;border:1px solid var(--arch-soft-line);border-left:4px solid var(--arch-field-line);border-radius:4px 10px 10px 4px;background:var(--arch-surface);color:var(--arch-ink);font-size:15px;font-weight:600;line-height:1.45}
.arch-lab .arch-digit-cards-brief.arch-good{color:var(--arch-good);border-left-color:var(--arch-good)}
.arch-lab .arch-digit-cards-summary{display:grid;gap:8px;padding:10px 14px;border:1px solid var(--arch-soft-line);border-radius:8px;background:var(--arch-surface);color:var(--arch-ink);line-height:1.5}
.arch-lab .arch-digit-cards-lines{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* phones: row labels become captions above their row, the pad gets two rows, the board two columns */
@media (max-width:620px){
 .arch-lab .arch-digit-cards-bench{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px;padding:10px 8px}
 .arch-lab .arch-digit-cards-corner{display:none}
 .arch-lab .arch-digit-cards-rowlabel{grid-column:1/-1;justify-self:start;max-width:none;margin-top:4px}
 .arch-lab .arch-digit-cards-opcell::before,.arch-lab .arch-digit-cards-tolyacell::before{display:none}
 .arch-lab .arch-digit-cards-card{height:64px;font-size:30px}
 .arch-lab .arch-digit-cards-check{grid-column:1/-1;margin-top:0}
 .arch-lab .arch-digit-cards-checkeq{font-size:19px}
 .arch-lab .arch-digit-cards-pad{grid-template-columns:repeat(5,minmax(44px,1fr))}
 .arch-lab .arch-digit-cards-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.arch-lab .arch-digit-cards-flip{animation:none}.arch-lab .arch-digit-cards-bench{transition:none}}

/* 2021 №5 — «Пироги на ходу» (labs/emelya.mjs). Colours only through --arch-* variables; the three travellers
   (the oven, Ivan, Fyodor) get their own variables with dark values, set with the same theme selectors as lab.css.
   The stove and the pies keep fixed object colours that read on both themes. */
.arch-lab .arch-emelya-lab{--arch-emelya-oven:#c2410c;--arch-emelya-ivan:#1d4ed8;--arch-emelya-fyodor:#047857;--arch-emelya-road:#eef2f6;--arch-emelya-pie:#e8a33d;gap:18px}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab .arch-emelya-lab{--arch-emelya-oven:#fb923c;--arch-emelya-ivan:#93c5fd;--arch-emelya-fyodor:#6ee7b7;--arch-emelya-road:#2b323d}}
:root[data-design="v2"][data-theme="dark"] .arch-lab .arch-emelya-lab{--arch-emelya-oven:#fb923c;--arch-emelya-ivan:#93c5fd;--arch-emelya-fyodor:#6ee7b7;--arch-emelya-road:#2b323d}

.arch-lab .arch-emelya-scale{border-left:3px solid var(--arch-field-line);padding-left:12px;line-height:1.6}
.arch-lab .arch-emelya-panel{display:grid;gap:10px;padding:16px;border:1px solid var(--arch-soft-line);border-radius:16px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-emelya-h{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;line-height:1.35;color:var(--arch-ink)}
.arch-lab .arch-emelya-h label{color:var(--arch-ink)}
.arch-lab .arch-emelya-num{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--arch-pressed-bg);border:1px solid var(--arch-soft-line);font-size:15px;font-weight:700;color:var(--arch-label)}
.arch-lab .arch-emelya-note:empty{display:none}
.arch-lab .arch-emelya-note{color:var(--arch-bad);font-weight:600}

/* steppers: − field + */
.arch-lab .arch-emelya-pred-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.arch-lab .arch-emelya-pred-row>label{flex:0 0 74px}
.arch-lab .arch-emelya-stepper{display:flex;align-items:center;gap:6px}
.arch-lab .arch-emelya-stepper button{min-width:48px;padding:8px 12px;font-weight:700}
.arch-lab .arch-emelya-stepper input[type=text]{width:72px;text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-emelya-n input[type=text]{width:96px}
.arch-lab .arch-emelya-panel input[type=range]{width:100%;margin:0}
.arch-lab .arch-emelya-perpart strong{color:var(--arch-ink);font-variant-numeric:tabular-nums}

/* colour keys */
.arch-lab .arch-emelya-key{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--arch-ink)}
.arch-lab .arch-emelya-key i{display:inline-block;flex:0 0 12px;width:12px;height:12px;border-radius:50%;border:1px solid var(--arch-surface);box-shadow:0 0 0 1px currentColor}
.arch-lab .arch-emelya-key-emelya i{background:var(--arch-emelya-oven);color:var(--arch-emelya-oven);border-radius:3px}
.arch-lab .arch-emelya-key-ivan i{background:var(--arch-emelya-ivan);color:var(--arch-emelya-ivan)}
.arch-lab .arch-emelya-key-fyodor i{background:var(--arch-emelya-fyodor);color:var(--arch-emelya-fyodor)}
.arch-lab .arch-emelya-key-ghost{font-weight:400;color:var(--arch-muted)}
.arch-lab .arch-emelya-key-ghost i{background:none;border:2px dashed var(--arch-muted);box-shadow:none;width:14px;height:14px;flex-basis:14px}
.arch-lab .arch-emelya-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}

/* scene */
.arch-lab .arch-emelya-scene{padding:14px 12px;border:1px solid var(--arch-soft-line);border-radius:18px;background:var(--arch-surface);min-width:0;display:grid;gap:8px}
.arch-lab .arch-emelya-svgbox{min-width:0}
.arch-lab .arch-emelya-svgbox svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;overflow:visible}
.arch-lab .arch-emelya-scene-cap{line-height:1.5}

/* phase, clock and hands */
.arch-lab .arch-emelya-phase{display:grid;gap:4px;border-left:4px solid var(--arch-primary-bg);padding:12px 16px;background:var(--arch-surface);border-radius:0 14px 14px 0;color:var(--arch-ink)}
.arch-lab .arch-emelya-phase strong{font-size:18px;line-height:1.35}
.arch-lab .arch-emelya-phase p{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--arch-muted)}
.arch-lab .arch-emelya-phase-n{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--arch-label)}
.arch-lab .arch-emelya-readouts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arch-lab .arch-emelya-big{display:grid;gap:4px;align-content:start;padding:14px 16px;border:1px solid var(--arch-soft-line);border-radius:16px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-emelya-big>span{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-emelya-big>span:last-child{color:var(--arch-ink);font-size:15px}
.arch-lab .arch-emelya-big output{font:700 clamp(24px,4vw,32px)/1.1 system-ui,sans-serif;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-emelya-hands-wrap{display:grid;gap:6px}
.arch-lab .arch-emelya-hands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.arch-lab .arch-emelya-hands>div{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--arch-soft-line);border-radius:14px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-emelya-hands .arch-emelya-key{font-size:14px}
.arch-lab .arch-emelya-hands strong{font-size:24px;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-emelya-from{font-size:13px;line-height:1.3;color:var(--arch-muted);min-height:1.3em}

/* playback */
.arch-lab .arch-emelya-playback{display:grid;gap:10px}
.arch-lab .arch-emelya-playback .arch-row{gap:10px}
.arch-lab .arch-emelya-playback .arch-play{flex:1 1 160px;min-width:140px}
.arch-lab .arch-emelya-playback input[type=range]{width:100%;margin:0}
.arch-lab .arch-emelya-range-ends{display:flex;justify-content:space-between;gap:12px;margin-top:-6px;font-size:13px;color:var(--arch-muted)}
.arch-lab .arch-emelya-quiet{font-size:15px}
.arch-lab .arch-emelya-quiet::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid currentColor;border-radius:4px}
.arch-lab .arch-emelya-quiet[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);font-weight:600}
.arch-lab .arch-emelya-quiet[aria-pressed=true]::before{background:currentColor;box-shadow:inset 0 0 0 2px var(--arch-pressed-bg)}
.arch-lab .arch-emelya-events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.arch-lab .arch-emelya-event{display:flex;align-items:flex-start;gap:8px;text-align:left;padding:12px 10px;border-radius:14px;line-height:1.3;min-width:0}
.arch-lab .arch-emelya-event>span+span{display:grid;gap:4px;min-width:0}
.arch-lab .arch-emelya-event>span+span>span{font-weight:600}
.arch-lab .arch-emelya-event strong{font-size:14px;font-weight:400;color:var(--arch-muted)}
.arch-lab .arch-emelya-event[data-reached=true] strong{color:var(--arch-ink);font-weight:700}
.arch-lab .arch-emelya-event-n{flex:0 0 24px;display:grid;place-items:center;height:24px;border:1px solid var(--arch-soft-line);border-radius:50%;font-size:13px}
.arch-lab .arch-emelya-event[data-reached=true]{border-color:var(--arch-primary-bg)}
.arch-lab .arch-emelya-event[aria-current=step]{background:var(--arch-pressed-bg);box-shadow:inset 0 -3px var(--arch-primary-bg)}

/* meetings and the magnifier */
.arch-lab .arch-emelya-meetings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arch-lab .arch-emelya-meet{display:grid;gap:6px;align-content:start;padding:14px 16px;border:1px solid var(--arch-soft-line);border-radius:16px;background:var(--arch-surface);min-width:0;color:var(--arch-ink)}
.arch-lab .arch-emelya-meet-ivan{border-top:4px solid var(--arch-emelya-ivan)}
.arch-lab .arch-emelya-meet-fyodor{border-top:4px solid var(--arch-emelya-fyodor)}
.arch-lab .arch-emelya-meet p{margin:0;font-size:15px;line-height:1.45}
.arch-lab .arch-emelya-place{font-size:20px;line-height:1.3}
.arch-lab .arch-emelya-pred-line{color:var(--arch-muted)}
.arch-lab .arch-emelya-meet .arch-emelya-pred-line.arch-good{color:var(--arch-good)}
.arch-lab .arch-emelya-meet .arch-emelya-pred-line.arch-bad{color:var(--arch-bad)}
.arch-lab .arch-emelya-lupa{display:grid;gap:4px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--arch-soft-line)}
.arch-lab .arch-emelya-lupa[hidden]{display:none}
.arch-lab .arch-emelya-lupa-title{font-size:13px;font-weight:600;color:var(--arch-label)}
.arch-lab .arch-emelya-lupa svg{display:block;width:100%;max-width:260px;height:auto;overflow:visible}

/* verdict and attempts */
.arch-lab .arch-emelya-verdict>strong{display:block;font-size:17px;line-height:1.45}
.arch-lab .arch-emelya-verdict p{font-size:15px}
/* the worked calculation under the verdict (opened by the student) */
.arch-lab .arch-emelya-calc{margin-top:-8px;padding:0 16px;border:1px solid var(--arch-soft-line);border-radius:14px;background:var(--arch-surface);color:var(--arch-ink)}
.arch-lab .arch-emelya-calc[hidden]{display:none}
.arch-lab .arch-emelya-calc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--arch-label)}
.arch-lab .arch-emelya-calc summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:3px;border-radius:4px}
.arch-lab .arch-emelya-calc-body{padding:0 0 12px;line-height:1.55;font-size:15px}
.arch-lab .arch-emelya-calc-body p{margin:0 0 6px}
.arch-lab .arch-emelya-log{width:calc(100% - 2px);margin:0 1px;font-size:15px;table-layout:fixed}
.arch-lab .arch-emelya-log th:nth-child(-n+3){width:18%}
.arch-lab .arch-emelya-log th:nth-child(n+4){width:23%}
.arch-lab table.arch-emelya-log th{font-size:13px;line-height:1.3;vertical-align:bottom;padding:6px 6px}
.arch-lab table.arch-emelya-log td{padding:6px 6px}
.arch-lab table.arch-emelya-log td.arch-good{color:var(--arch-good)}
.arch-lab table.arch-emelya-log td.arch-bad{color:var(--arch-bad)}
.arch-lab .arch-emelya-log tr.arch-emelya-ok td{background:var(--arch-ok-bg)}

/* graph */
.arch-lab .arch-emelya-graph{border-top:1px solid var(--arch-soft-line);padding-top:12px;display:grid;gap:10px}
.arch-lab .arch-emelya-graph summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--arch-label)}
.arch-lab .arch-emelya-graph summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:3px;border-radius:4px}
.arch-lab .arch-emelya-graphbox{max-width:562px;min-width:0;background:var(--arch-surface);border:1px solid var(--arch-soft-line);border-radius:14px;padding:8px 0}
.arch-lab .arch-emelya-graphbox svg{display:block;width:100%;height:auto;overflow:visible}

@media (max-width:620px){.arch-lab .arch-emelya-meetings{grid-template-columns:1fr}.arch-lab .arch-emelya-event-n{display:none}.arch-lab .arch-emelya-event{padding:10px 8px}}
/* phones: one event per row, number badge back on */
@media (max-width:400px){
 .arch-lab .arch-emelya-events{grid-template-columns:1fr;gap:6px}
 .arch-lab .arch-emelya-event{align-items:center;padding:8px 12px;min-height:48px}
 .arch-lab .arch-emelya-event-n{display:grid}
 .arch-lab .arch-emelya-event>span+span{gap:2px}
}
@media (max-width:420px){
 .arch-lab .arch-emelya-panel{padding:12px}
 .arch-lab .arch-emelya-scene{padding:10px 6px}
 .arch-lab .arch-emelya-scene-cap,.arch-lab .arch-emelya-legend{padding:0 6px}
 .arch-lab .arch-emelya-legend .arch-emelya-key{font-size:14px}
 .arch-lab .arch-emelya-phase{padding:12px 10px;gap:8px}
 .arch-lab .arch-emelya-phase strong{font-size:17px}
 .arch-lab .arch-emelya-big{padding:12px}
 .arch-lab .arch-emelya-hands>div{padding:8px}
 .arch-lab .arch-emelya-hands .arch-emelya-key{font-size:13px;gap:5px}
 .arch-lab .arch-emelya-hands strong{font-size:20px}
 .arch-lab .arch-emelya-meet{padding:12px}
 /* narrow table: columns sized by their content, so every header stays inside its cell */
 .arch-lab .arch-emelya-log-panel{padding:12px 10px}
 .arch-lab table.arch-emelya-log{font-size:14px;table-layout:auto}
 .arch-lab table.arch-emelya-log th,.arch-lab table.arch-emelya-log td{padding:5px 2px}
 .arch-lab table.arch-emelya-log th{font-size:12px}
 .arch-lab table.arch-emelya-log th:nth-child(n){width:auto}
 .arch-lab .arch-emelya-calc{padding:0 12px}
 .arch-lab .arch-emelya-event{font-size:14px}
 .arch-lab .arch-emelya-pred-row{flex-wrap:nowrap;gap:8px}
 .arch-lab .arch-emelya-pred-row>label{flex-basis:66px}
 .arch-lab .arch-emelya-stepper{gap:5px}
 .arch-lab .arch-emelya-stepper input[type=text]{width:60px}
 .arch-lab .arch-emelya-n input[type=text]{width:84px}
 .arch-lab .arch-emelya-stepper button{min-width:46px;padding:8px 10px}
}

/* 2026 2.3 «Трудный случай» — lab labs/epidemic.mjs («Поставь диагноз»). Blue = «говорит правду / слова верны»,
   amber = «лжёт / слова неверны»; green ✓ and red ✗ (shared --arch-good/--arch-bad) = possible / contradiction;
   the orange frame (--arch-accent) = the chosen diagnosis or pair. Text on the coloured chips is checked in both
   themes (≥ 4.5:1). Layout: the two people side by side when the lab is wide, one column on phones; the table of
   16 combinations next to its legend and controls when there is room. */
.arch-lab{--arch-epidemic-truth-ink:#1d4ed8;--arch-epidemic-truth-soft:#dbeafe;--arch-epidemic-lie-ink:#92400e;--arch-epidemic-lie-soft:#fef3c7;--arch-epidemic-bubble:#f1f5f9;--arch-epidemic-picked:#fff7ed;--arch-epidemic-hatch:#cbd5e1}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-epidemic-truth-ink:#bfdbfe;--arch-epidemic-truth-soft:#1e3a5f;--arch-epidemic-lie-ink:#fde68a;--arch-epidemic-lie-soft:#4a3410;--arch-epidemic-bubble:#263041;--arch-epidemic-picked:#3d2614;--arch-epidemic-hatch:#4a5568}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-epidemic-truth-ink:#bfdbfe;--arch-epidemic-truth-soft:#1e3a5f;--arch-epidemic-lie-ink:#fde68a;--arch-epidemic-lie-soft:#4a3410;--arch-epidemic-bubble:#263041;--arch-epidemic-picked:#3d2614;--arch-epidemic-hatch:#4a5568}

.arch-lab .arch-epidemic-predict{border-top:0;padding-top:0}
.arch-lab .arch-epidemic-predict .arch-label{margin:0}
.arch-lab .arch-epidemic-wrap{container-type:inline-size;min-width:0;display:grid;gap:10px}
.arch-lab .arch-epidemic-people{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
@container (min-width:620px){.arch-lab .arch-epidemic-people{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* a person: avatar, quote, 2×2 diagnosis, the parts of the words, own verdict, medicine */
.arch-lab .arch-epidemic-person{display:grid;gap:10px;min-width:0;padding:12px;border:1px solid var(--arch-soft-line);border-radius:14px;background:var(--arch-surface);color:var(--arch-ink);scroll-margin-top:96px}
.arch-lab .arch-epidemic-person:focus{outline:none}
.arch-lab .arch-epidemic-person:focus-visible{outline:3px solid var(--arch-accent);outline-offset:3px}
.arch-lab .arch-epidemic-person[data-ok=true]{border:2px solid var(--arch-good);padding:11px}
.arch-lab .arch-epidemic-person[data-ok=false]{border:2px solid var(--arch-bad);padding:11px}
.arch-lab .arch-epidemic-person p{margin:0}
.arch-lab .arch-epidemic-head{display:flex;gap:10px;align-items:center;min-width:0}
.arch-lab .arch-epidemic-avatar{flex:none;width:56px;height:56px;overflow:visible}
.arch-lab .arch-epidemic-face{fill:var(--arch-clear);stroke:var(--arch-field-line);stroke-width:2.5px;stroke-dasharray:5 4}
.arch-lab .arch-epidemic-avatar[data-truth=true] .arch-epidemic-face{fill:var(--arch-epidemic-truth-soft);stroke:var(--arch-epidemic-truth-ink);stroke-dasharray:none}
.arch-lab .arch-epidemic-avatar[data-truth=false] .arch-epidemic-face{fill:var(--arch-epidemic-lie-soft);stroke:var(--arch-epidemic-lie-ink);stroke-dasharray:none}
.arch-lab .arch-epidemic-id{display:grid;gap:2px;min-width:0}
.arch-lab .arch-epidemic-name{font-size:18px;font-weight:700;color:var(--arch-label)}
.arch-lab .arch-epidemic-kind{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:15px}
.arch-lab .arch-epidemic-unset{color:var(--arch-muted)}
.arch-lab .arch-epidemic-quote{position:relative;margin:2px 0 0;padding:9px 12px;border-radius:12px;background:var(--arch-epidemic-bubble);color:var(--arch-ink);font-size:16px;font-weight:600;line-height:1.45}
.arch-lab .arch-epidemic-quote::before{content:'';position:absolute;left:20px;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--arch-epidemic-bubble)}
.arch-lab .arch-epidemic-says{font-weight:400;color:var(--arch-muted)}
.arch-lab .arch-epidemic-plabel{font-weight:600;color:var(--arch-label);font-size:15px}
.arch-lab .arch-epidemic-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.arch-lab .arch-epidemic-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 6px;border-radius:14px;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-field-line);font-size:15px;line-height:1.25;text-align:center}
.arch-lab .arch-epidemic-pick[aria-pressed=true]{background:var(--arch-epidemic-picked);border:3px solid var(--arch-accent);padding:6px 4px;font-weight:700}
.arch-lab .arch-epidemic-pname{overflow-wrap:anywhere}
.arch-lab .arch-epidemic-tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap}
.arch-lab .arch-epidemic-tag[data-truth=true]{background:var(--arch-epidemic-truth-soft);color:var(--arch-epidemic-truth-ink)}
.arch-lab .arch-epidemic-tag[data-truth=false]{background:var(--arch-epidemic-lie-soft);color:var(--arch-epidemic-lie-ink)}
.arch-lab .arch-epidemic-words{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--arch-soft-line)}
.arch-lab .arch-epidemic-wlabel{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-epidemic-conds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.arch-lab .arch-epidemic-cond{display:inline-block;padding:2px 8px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.5;border:1px solid transparent}
.arch-lab .arch-epidemic-cond[data-v=true]{background:var(--arch-epidemic-truth-soft);color:var(--arch-epidemic-truth-ink)}
.arch-lab .arch-epidemic-cond[data-v=false]{background:var(--arch-epidemic-lie-soft);color:var(--arch-epidemic-lie-ink)}
.arch-lab .arch-epidemic-cond[data-v=null]{background:var(--arch-surface);color:var(--arch-muted);border:1px dashed var(--arch-field-line);font-weight:400}
.arch-lab .arch-epidemic-join{font-size:14px;color:var(--arch-muted);font-style:italic}
.arch-lab .arch-epidemic-wresult{font-size:15px;color:var(--arch-muted)}
.arch-lab .arch-epidemic-pverdict{font-weight:700;font-size:15px;color:var(--arch-muted)}
.arch-lab .arch-epidemic-pverdict[data-ok=true]{color:var(--arch-good)}
.arch-lab .arch-epidemic-pverdict[data-ok=false]{color:var(--arch-bad)}
.arch-lab .arch-epidemic-med{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--arch-ink)}
.arch-lab .arch-epidemic-med:empty{display:none}
.arch-lab .arch-epidemic-med[data-possible=false]{color:var(--arch-muted)}
.arch-lab .arch-epidemic-med[data-possible=false] .arch-epidemic-capsule{opacity:.5}
.arch-lab .arch-epidemic-capsule{flex:none;width:24px;height:24px}
.arch-lab .arch-epidemic-pverdict:empty{display:none}
.arch-lab .arch-epidemic-pshort{display:none}
@container (max-width:339px){.arch-lab .arch-epidemic-pick .arch-epidemic-pfull{display:none}.arch-lab .arch-epidemic-pick .arch-epidemic-pshort{display:inline}}
.arch-lab .arch-epidemic-found{margin:0;padding-left:1.3em;display:grid;gap:4px;font-weight:600}
.arch-lab .arch-epidemic-key{font-weight:600}

/* table of 16 combinations */
.arch-lab .arch-epidemic-table .arch-label{margin:0}
.arch-lab .arch-epidemic-table{container:arch-epidemic-table/inline-size;min-width:0}
.arch-lab .arch-epidemic-tablewrap{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.arch-lab .arch-epidemic-gridbox{padding:10px 6px;overflow-x:auto}
/* the third track is 8 px wider: the gap between «правда» and «ложь» columns (cells there get margin-left:8px) */
.arch-lab .arch-epidemic-grid{--cell:52px;display:grid;grid-template-columns:auto var(--cell) var(--cell) calc(var(--cell) + 8px) var(--cell);gap:4px;justify-content:center;align-items:center}
.arch-lab .arch-epidemic-full{display:none}
@container arch-epidemic-table (min-width:620px){
 .arch-lab .arch-epidemic-tablewrap{grid-template-columns:auto minmax(0,1fr)}
 .arch-lab .arch-epidemic-grid{--cell:70px}
 .arch-lab .arch-epidemic-full{display:inline}
 .arch-lab .arch-epidemic-short{display:none}
}
.arch-lab .arch-epidemic-corner{grid-row:1/span 2;grid-column:1;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;padding:2px 6px 4px 0;font-size:15px;font-weight:700;color:var(--arch-muted);line-height:1.2;white-space:nowrap}
.arch-lab .arch-epidemic-corner span:first-child{text-align:right}
.arch-lab .arch-epidemic-group{grid-row:1;text-align:center;font-size:14px;font-weight:700;padding-bottom:2px;border-bottom:3px solid}
.arch-lab .arch-epidemic-group[data-truth=true]{grid-column:2/span 2;color:var(--arch-epidemic-truth-ink);border-color:var(--arch-epidemic-truth-ink)}
.arch-lab .arch-epidemic-group[data-truth=false]{grid-column:4/span 2;color:var(--arch-epidemic-lie-ink);border-color:var(--arch-epidemic-lie-ink);margin-left:8px}
.arch-lab .arch-epidemic-colhead,.arch-lab .arch-epidemic-rowhead{font-size:14px;font-weight:700;line-height:1.2;color:var(--arch-label)}
.arch-lab .arch-epidemic-colhead{grid-row:2;text-align:center;align-self:end;padding:2px 0}
.arch-lab .arch-epidemic-rowhead{grid-column:1;text-align:right;padding-right:6px}
.arch-lab .arch-epidemic-colhead[data-col="2"]{margin-left:8px}
.arch-lab .arch-epidemic-rowhead[data-row="2"]{margin-top:8px}
.arch-lab .arch-epidemic-rowhead[data-truth=true]{box-shadow:inset -3px 0 0 var(--arch-epidemic-truth-ink)}
.arch-lab .arch-epidemic-rowhead[data-truth=false]{box-shadow:inset -3px 0 0 var(--arch-epidemic-lie-ink)}
@container arch-epidemic-table (min-width:620px){.arch-lab .arch-epidemic-colhead,.arch-lab .arch-epidemic-rowhead{font-size:13px;font-weight:600}.arch-lab .arch-epidemic-rowhead{max-width:84px;padding-right:8px}.arch-lab .arch-epidemic-corner{font-size:14px;font-weight:400}}
.arch-lab .arch-epidemic-cell{width:var(--cell);height:var(--cell);min-width:44px;min-height:44px;padding:0;border-radius:10px;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-field-line);font-size:24px;font-weight:700;line-height:1;outline-offset:2px;transition:background-color .25s,border-color .25s}
.arch-lab .arch-epidemic-cell[data-col="2"]{margin-left:8px}
.arch-lab .arch-epidemic-cell[data-row="2"]{margin-top:8px}
.arch-lab .arch-epidemic-cell[data-state=ok]{background:var(--arch-ok-bg);border-color:var(--arch-good);color:var(--arch-good)}
.arch-lab .arch-epidemic-cell[data-state=bad]{background:var(--arch-bad-bg);border-color:var(--arch-bad);color:var(--arch-bad)}
.arch-lab .arch-epidemic-cell:is([data-state=drop],[data-state=drop-now]){background:repeating-linear-gradient(135deg,var(--arch-clear) 0 6px,var(--arch-surface) 6px 12px);border-color:var(--arch-epidemic-hatch);color:var(--arch-muted);font-size:17px}
.arch-lab .arch-epidemic-cell[data-state=drop-now]{border:2px dashed var(--arch-bad);color:var(--arch-bad);animation:arch-epidemic-in .5s ease-out}
.arch-lab .arch-epidemic-cell[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--arch-accent)}
.arch-lab .arch-epidemic-mark{display:inline-block;min-width:1em;padding:1px 3px;border-radius:4px}
.arch-lab .arch-epidemic-cell:is([data-state=drop],[data-state=drop-now]) .arch-epidemic-mark{background:var(--arch-surface)}
@keyframes arch-epidemic-in{from{transform:scale(.86)}}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-epidemic-cell{transition:none}.arch-lab .arch-epidemic-cell[data-state=drop-now]{animation:none}}
.arch-lab .arch-epidemic-side{display:grid;gap:10px;min-width:0;align-content:start}
.arch-lab .arch-epidemic-legend{gap:6px 14px}
.arch-lab .arch-epidemic-sw{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid var(--arch-field-line);background:var(--arch-surface);flex:none}
.arch-lab .arch-epidemic-sw-ok{background:var(--arch-ok-bg);border-color:var(--arch-good)}
.arch-lab .arch-epidemic-sw-bad{background:var(--arch-bad-bg);border-color:var(--arch-bad)}
.arch-lab .arch-epidemic-sw-cur{box-shadow:inset 0 0 0 3px var(--arch-accent)}
.arch-lab .arch-epidemic-sw-drop{background:repeating-linear-gradient(135deg,var(--arch-clear) 0 4px,var(--arch-surface) 4px 8px);border-color:var(--arch-epidemic-hatch)}
.arch-lab .arch-epidemic-sw-now{background:repeating-linear-gradient(135deg,var(--arch-clear) 0 4px,var(--arch-surface) 4px 8px);border:2px dashed var(--arch-bad)}
.arch-lab .arch-epidemic-proof{display:grid;gap:8px}
.arch-lab .arch-epidemic-mine{display:grid;gap:10px;min-width:0}
.arch-lab .arch-epidemic-sum p{margin:0 0 6px}
.arch-lab .arch-epidemic-sum p:last-child{margin-bottom:0}
.arch-lab .arch-epidemic-sum .arch-epidemic-found{margin:2px 0 8px}
.arch-lab .arch-epidemic-proof[hidden],.arch-lab .arch-epidemic-mine[hidden]{display:none}
.arch-lab .arch-epidemic-caption{margin:0;display:grid;gap:6px;line-height:1.55;color:var(--arch-ink)}
.arch-lab .arch-epidemic-caption p{margin:0}
.arch-lab .arch-epidemic-grow{margin-top:4px;justify-content:space-between}
.arch-lab .arch-epidemic-gnote{flex:1 1 14em}

/* Popov Academy — 2026 problem 2.2 «Колесо обозрения» (labs/ferris.mjs). Cabin №6 is amber and cabin №8 blue in
   both themes (meaningful object colours); text is never drawn on these fills. */
.arch-lab{--arch-ferris-six:#f59e0b;--arch-ferris-eight:#2563eb}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-ferris-six:#fbbf24;--arch-ferris-eight:#60a5fa}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-ferris-six:#fbbf24;--arch-ferris-eight:#60a5fa}
.arch-lab .arch-ferris-block{display:grid;gap:8px;min-width:0}
.arch-lab .arch-ferris-block>.arch-label{margin:0}
.arch-lab .arch-ferris-err:empty{display:none}
.arch-lab .arch-ferris-nrow{flex-wrap:nowrap}
.arch-lab .arch-ferris-nrow input[type=range]{flex:1 1 100px}
.arch-lab .arch-ferris-nrow input[type=text]{flex:0 0 88px;width:88px;text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-ferris-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* wheel and readouts */
.arch-lab .arch-ferris-scene{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;padding:12px}
@media (min-width:640px){.arch-lab .arch-ferris-scene{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}}
.arch-lab .arch-ferris-wheel svg{max-width:360px;margin:0 auto}
.arch-lab .arch-ferris-stand line{stroke:var(--arch-soft-line);stroke-width:4;stroke-linecap:round}
.arch-lab .arch-ferris-rim{fill:none;stroke:var(--arch-fig-line);stroke-width:2}
.arch-lab .arch-ferris-spokes line{stroke:var(--arch-grid);stroke-width:1.2}
.arch-lab .arch-ferris-hub{fill:var(--arch-fig-line)}
.arch-lab .arch-ferris-turn path{fill:none;stroke:var(--arch-accent);stroke-width:3;stroke-linecap:round}
.arch-lab .arch-ferris-head{fill:var(--arch-accent);stroke:none}
.arch-lab .arch-ferris-cab{fill:var(--arch-fill);stroke:var(--arch-fig-line);stroke-width:1.4}
.arch-lab .arch-ferris-cab.arch-ferris-six{fill:var(--arch-ferris-six)}
.arch-lab .arch-ferris-cab.arch-ferris-eight{fill:var(--arch-ferris-eight)}
.arch-lab .arch-ferris-cab.arch-ferris-top{stroke:var(--arch-label);stroke-width:3.2}
.arch-lab .arch-ferris-marker{fill:var(--arch-label)}
.arch-lab svg text.arch-ferris-num{font-variant-numeric:tabular-nums}
.arch-lab svg text.arch-ferris-key{font-weight:700}
.arch-lab .arch-ferris-side{display:grid;gap:12px;min-width:0}
.arch-lab .arch-ferris-now{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0}
.arch-lab .arch-ferris-now dt{color:var(--arch-muted);font-size:14px}
.arch-lab .arch-ferris-now dd{margin:0;font-size:30px;line-height:1.15;font-weight:700;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-ferris-wheelinfo{gap:4px 18px}
.arch-lab .arch-ferris-legend{display:grid;gap:6px}
.arch-lab .arch-ferris-sw{display:inline-block;width:16px;height:14px;border-radius:3px;border:1.4px solid var(--arch-fig-line);flex-shrink:0}
.arch-lab .arch-ferris-sw-six{background:var(--arch-ferris-six)}
.arch-lab .arch-ferris-sw-eight{background:var(--arch-ferris-eight)}
.arch-lab .arch-ferris-sw-marker{border:0;border-radius:0;width:14px;height:10px;background:var(--arch-label);clip-path:polygon(0 0,100% 0,50% 100%)}
/* the tape of minutes */
.arch-lab .arch-ferris-tape{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px;font-variant-numeric:tabular-nums}
@media (min-width:640px){.arch-lab .arch-ferris-tape{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}}
.arch-lab .arch-ferris-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:4px 2px 3px;border:1px solid var(--arch-soft-line);border-radius:10px;background:var(--arch-surface);color:var(--arch-ink);overflow:hidden}
.arch-lab .arch-ferris-m{font-size:13px;color:var(--arch-muted);line-height:1.2}
.arch-lab .arch-ferris-c{font-size:17px;font-weight:600;line-height:1.3;white-space:nowrap}
.arch-lab .arch-ferris-cell.arch-ferris-c6,.arch-lab .arch-ferris-cell.arch-ferris-c8{border-width:2px;padding-top:7px}
.arch-lab .arch-ferris-cell.arch-ferris-c6{border-color:var(--arch-ferris-six)}
.arch-lab .arch-ferris-cell.arch-ferris-c8{border-color:var(--arch-ferris-eight)}
.arch-lab .arch-ferris-cell.arch-ferris-c6::before,.arch-lab .arch-ferris-cell.arch-ferris-c8::before{content:'';position:absolute;left:0;right:0;top:0;height:5px}
.arch-lab .arch-ferris-cell.arch-ferris-c6::before{background:var(--arch-ferris-six)}
.arch-lab .arch-ferris-cell.arch-ferris-c8::before{background:var(--arch-ferris-eight)}
.arch-lab .arch-ferris-cell.arch-ferris-now{background:var(--arch-pressed-bg);box-shadow:0 0 0 2px var(--arch-label)}
.arch-lab .arch-ferris-cell.arch-ferris-future .arch-ferris-c{color:var(--arch-muted);font-weight:400}
.arch-lab .arch-ferris-cell.arch-ferris-last{outline:2px dashed var(--arch-label);outline-offset:1px}
.arch-lab .arch-ferris-cell.arch-ferris-ghost{border-style:dashed;background:transparent}
/* the key cell of steps 3–4: minute 23 (numbers grow) or 27 (numbers fall), where №6 must be */
.arch-lab .arch-ferris-cell.arch-ferris-pivot{outline:2px dashed var(--arch-ferris-six);outline-offset:2px}
.arch-lab .arch-ferris-badge{font-weight:700;font-size:13px;line-height:1}
.arch-lab .arch-ferris-cell .arch-ferris-badge{position:absolute;top:7px;right:4px}
.arch-lab .arch-ferris-pivot-ok .arch-ferris-badge{color:var(--arch-good)}
.arch-lab .arch-ferris-pivot-bad .arch-ferris-badge{color:var(--arch-bad)}
.arch-lab .arch-ferris-line.arch-ferris-linepivot::before{background:transparent;border:2px dashed var(--arch-ferris-six)}
.arch-lab .arch-ferris-linepivot .arch-ferris-badge{margin-right:6px;font-size:15px}
.arch-lab .arch-ferris-series{display:grid;gap:4px}
.arch-lab .arch-ferris-line{margin:0;padding-left:22px;position:relative;color:var(--arch-ink);line-height:1.45}
.arch-lab .arch-ferris-line::before{content:'';position:absolute;left:0;top:.3em;width:14px;height:12px;border-radius:3px;border:1.4px solid var(--arch-fig-line)}
.arch-lab .arch-ferris-line6::before{background:var(--arch-ferris-six)}
.arch-lab .arch-ferris-line8::before{background:var(--arch-ferris-eight)}
/* the student's checks */
.arch-lab .arch-ferris-checks>p{margin:0}
.arch-lab .arch-ferris-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.arch-lab .arch-ferris-rowlabel{font-weight:600;color:var(--arch-label);min-width:6.5em}
.arch-lab .arch-ferris-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.arch-lab button.arch-ferris-chip{min-width:56px;padding:8px 12px;border:1px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-ink);font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab button.arch-ferris-chip.arch-ferris-ok{background:var(--arch-ok-bg);border-color:var(--arch-good)}
.arch-lab button.arch-ferris-chip[aria-current=true]{box-shadow:0 0 0 2px var(--arch-label)}
.arch-lab .arch-ferris-mark{margin-left:4px;color:var(--arch-bad)}
.arch-lab .arch-ferris-ok .arch-ferris-mark,.arch-lab .arch-ferris-hit .arch-ferris-mark{color:var(--arch-good)}
.arch-lab .arch-ferris-summary{color:var(--arch-ink)}
.arch-lab .arch-ferris-full{display:grid;gap:8px}
.arch-lab .arch-ferris-full p{margin:0}
.arch-lab .arch-ferris-tablewrap{max-height:420px;overflow:auto;border:1px solid var(--arch-soft-line);border-radius:10px}
.arch-lab table.arch-ferris-table{width:100%}
.arch-lab table.arch-ferris-table th,.arch-lab table.arch-ferris-table td{padding:5px 10px}
.arch-lab table.arch-ferris-table thead th{position:sticky;top:0;background:var(--arch-surface)}
.arch-lab table.arch-ferris-table td.arch-ferris-hit{background:var(--arch-ok-bg);font-weight:700}
@media (max-width:480px){.arch-lab .arch-ferris-scene{padding:8px}.arch-lab .arch-ferris-now dd{font-size:26px}}

/* 2026 1.2 «Новогодняя гирлянда» — lab labs/garland.mjs. The red and blue balls keep their object colours in both
   themes (white numbers on them, contrast ≥ 4.5:1); everything else goes through --arch-* variables. The group tints
   g0…g3 are the column tints of the solution figures (columns 1…4); the dark theme keeps their hues. */
.arch-lab{--arch-garland-red:#dc2626;--arch-garland-red-edge:#991b1b;--arch-garland-blue:#2563eb;--arch-garland-blue-edge:#1e3a8a;--arch-garland-wire:#94a3b8;--arch-garland-glow:rgba(194,65,12,.17);--arch-garland-g0:#dbeafe;--arch-garland-g1:#fde68a;--arch-garland-g2:#bbf7d0;--arch-garland-g3:#ede9fe}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-garland-red-edge:#fca5a5;--arch-garland-blue-edge:#93c5fd;--arch-garland-wire:#64748b;--arch-garland-glow:rgba(251,146,60,.24);--arch-garland-g0:#27325a;--arch-garland-g1:#4a3b16;--arch-garland-g2:#1a4130;--arch-garland-g3:#3d2c5c}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-garland-red-edge:#fca5a5;--arch-garland-blue-edge:#93c5fd;--arch-garland-wire:#64748b;--arch-garland-glow:rgba(251,146,60,.24);--arch-garland-g0:#27325a;--arch-garland-g1:#4a3b16;--arch-garland-g2:#1a4130;--arch-garland-g3:#3d2c5c}
.arch-lab .arch-garland-predict{border-top:0;padding-top:0}
.arch-lab .arch-garland-predict .arch-label{margin:0}
.arch-lab .arch-garland-stage{transition:border-color .3s}
.arch-lab .arch-garland-stage.arch-garland-ok{border-color:var(--arch-good);box-shadow:0 0 0 1px var(--arch-good) inset}
.arch-lab .arch-garland-board{--n:10;--d:44px;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,calc(var(--n) * 64px));height:212px;margin:0 auto}
.arch-lab .arch-garland-size input[type=range]{flex:1 1 120px}
.arch-lab .arch-zoomed .arch-garland-board{width:calc(var(--n) * 48px)}
.arch-lab .arch-stage .arch-garland-svg{position:absolute;left:0;top:0;width:100%;height:100%;max-height:none;overflow:visible;pointer-events:none}
.arch-lab .arch-garland-col{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:70px;min-width:0}
.arch-lab .arch-garland-ball{position:relative;z-index:1;flex:none;width:min(44px,calc(100% - 4px));height:auto;aspect-ratio:1;min-width:0;min-height:0;padding:0;border-radius:50%;border:2px solid var(--edge);background-color:var(--fill);background-image:radial-gradient(circle at 31% 27%,rgba(255,255,255,.62) 0 11%,rgba(255,255,255,0) 32%);color:#fff;font-weight:700;font-size:max(11px,calc(var(--d) * .37));line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(15,23,42,.22)}
.arch-lab .arch-garland-ball[data-colour="К"]{--fill:var(--arch-garland-red);--edge:var(--arch-garland-red-edge)}
.arch-lab .arch-garland-ball[data-colour="С"]{--fill:var(--arch-garland-blue);--edge:var(--arch-garland-blue-edge)}
.arch-lab .arch-garland-letter{margin-top:2px;height:22px;line-height:22px;font-size:15px;font-weight:700;color:var(--arch-ink)}
.arch-lab .arch-garland-new{stroke-dasharray:1;animation:arch-garland-draw .45s ease-out both}
@keyframes arch-garland-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-garland-new{animation:none}.arch-lab .arch-garland-stage{transition:none}}
/* «Цепочка» with the start picker ‹ › on both sides; the ring on the board shows the start ball */
.arch-lab .arch-garland-chainpick{display:flex;gap:6px;align-items:stretch;min-width:0}
.arch-lab .arch-garland-chain{min-width:12.5em}
.arch-lab .arch-garland-pick{flex:none;width:44px;padding:0;font-size:24px;line-height:1;font-weight:700}
.arch-lab .arch-garland-groups-btn[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);box-shadow:inset 0 0 0 1px var(--arch-pressed-line);font-weight:600}
.arch-lab .arch-garland-groups-btn[aria-pressed=true]::before{content:'✓\00a0' / ''}
.arch-lab .arch-garland-key{flex:none}
/* the live region: one changed sentence for screen readers; the visible result box stays quiet */
.arch-lab .arch-garland-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.arch-lab .arch-garland-groups{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.arch-lab .arch-garland-chip{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--arch-soft-line);color:var(--arch-ink);font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab .arch-garland-chip[data-g="0"]{background:var(--arch-garland-g0)}
.arch-lab .arch-garland-chip[data-g="1"]{background:var(--arch-garland-g1)}
.arch-lab .arch-garland-chip[data-g="2"]{background:var(--arch-garland-g2)}
.arch-lab .arch-garland-chip[data-g="3"]{background:var(--arch-garland-g3)}
.arch-lab #arch-garland-letters{flex:1 1 12em;width:12em;max-width:100%;letter-spacing:.12em}
@media (max-width:480px){.arch-lab .arch-garland-chainpick{flex:1 1 100%}.arch-lab .arch-garland-chain{min-width:0;flex:1 1 auto;padding-inline:10px}}

/* 2021 №7 — «Игра Кощея» (labs/koschei.mjs). Colours only through --arch-* variables. Meaningful colours with dark
   values, set with the same theme selectors as lab.css: orange — the largest number on the board, blue — the next one,
   violet ring — the chosen cell, green ring — the cell the number came from (both rings when it is the same cell);
   «чёрные» cells of the chessboard are dark slate with light numbers. In «Откуда число» the cells no route reaches are
   hatched and their numbers faded, but keep their own fill, so black and white cells stay recognisable. Every number
   keeps its own text colour on its own fill. */
.arch-lab{--arch-koschei-black-bg:#55657d;--arch-koschei-black-ink:#fff;--arch-koschei-white-bg:#fff;--arch-koschei-white-ink:#1f2937;
 --arch-koschei-top-bg:#fdba74;--arch-koschei-top-ink:#7c2d12;--arch-koschei-top-line:#c2410c;
 --arch-koschei-second-bg:#bfdbfe;--arch-koschei-second-ink:#1e3a8a;--arch-koschei-second-line:#1d4ed8;
 --arch-koschei-sel:#6d28d9;--arch-koschei-from:#047857;--arch-koschei-bar:#a3b1c6;--arch-koschei-bar-now:#244974;--arch-koschei-board-line:#1f2937;
 --arch-koschei-hatch-a:rgba(15,23,42,.42);--arch-koschei-hatch-b:rgba(255,255,255,.5)}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-koschei-black-bg:#0d121b;--arch-koschei-black-ink:#f1f5f9;--arch-koschei-white-bg:#3d4757;--arch-koschei-white-ink:#f1f5f9;
 --arch-koschei-top-bg:#c2410c;--arch-koschei-top-ink:#fff7ed;--arch-koschei-top-line:#fdba74;
 --arch-koschei-second-bg:#1d4ed8;--arch-koschei-second-ink:#eff6ff;--arch-koschei-second-line:#93c5fd;
 --arch-koschei-sel:#c4b5fd;--arch-koschei-from:#34d399;--arch-koschei-bar:#5b6578;--arch-koschei-bar-now:#8fb0ff;--arch-koschei-board-line:#b1bacb;
 --arch-koschei-hatch-a:rgba(0,0,0,.55);--arch-koschei-hatch-b:rgba(203,213,225,.45)}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-koschei-black-bg:#0d121b;--arch-koschei-black-ink:#f1f5f9;--arch-koschei-white-bg:#3d4757;--arch-koschei-white-ink:#f1f5f9;
 --arch-koschei-top-bg:#c2410c;--arch-koschei-top-ink:#fff7ed;--arch-koschei-top-line:#fdba74;
 --arch-koschei-second-bg:#1d4ed8;--arch-koschei-second-ink:#eff6ff;--arch-koschei-second-line:#93c5fd;
 --arch-koschei-sel:#c4b5fd;--arch-koschei-from:#34d399;--arch-koschei-bar:#5b6578;--arch-koschei-bar-now:#8fb0ff;--arch-koschei-board-line:#b1bacb;
 --arch-koschei-hatch-a:rgba(0,0,0,.55);--arch-koschei-hatch-b:rgba(203,213,225,.45)}

/* prediction and task cards */
.arch-lab .arch-koschei-card{display:grid;gap:8px;border:1px solid var(--arch-soft-line);border-radius:14px;padding:12px 14px;background:var(--arch-surface)}
.arch-lab .arch-koschei-card p,.arch-lab .arch-koschei-q,.arch-lab .arch-koschei-cap{margin:0}
.arch-lab .arch-koschei-q{color:var(--arch-ink)}
.arch-lab .arch-koschei-task{display:grid;gap:6px}
.arch-lab .arch-koschei-task p{margin:0}

/* the board: cells are buttons; one tab stop, arrows move */
.arch-lab .arch-koschei-zoomslot{min-width:0}
.arch-lab .arch-koschei-board{box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,calc(var(--n) * var(--cell)));margin:0 auto;border:2px solid var(--arch-koschei-board-line);background:var(--arch-surface)}
.arch-lab .arch-koschei-cell{position:relative;aspect-ratio:1;min-width:0;min-height:0;width:100%;padding:0;border-radius:0;border:1px solid var(--arch-grid);background:var(--arch-surface);color:var(--arch-ink);display:grid;place-items:center;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;outline-offset:-4px;transition:background-color .25s}
.arch-lab .arch-koschei-board[data-n="6"] .arch-koschei-cell{font-size:19px}
.arch-lab .arch-koschei-board[data-n="8"] .arch-koschei-cell{font-size:16px}
.arch-lab .arch-koschei-token{position:relative;z-index:1;display:grid;place-items:center;width:80%;height:80%;border-radius:50%;pointer-events:none}
.arch-lab .arch-koschei-token.arch-koschei-top{background:var(--arch-koschei-top-bg);color:var(--arch-koschei-top-ink);box-shadow:0 0 0 2px var(--arch-koschei-top-line);font-weight:700}
.arch-lab .arch-koschei-token.arch-koschei-second{background:var(--arch-koschei-second-bg);color:var(--arch-koschei-second-ink);box-shadow:0 0 0 2px var(--arch-koschei-second-line);font-weight:700}
.arch-lab .arch-koschei-colours .arch-koschei-black{background:var(--arch-koschei-black-bg);color:var(--arch-koschei-black-ink)}
.arch-lab .arch-koschei-colours .arch-koschei-white{background:var(--arch-koschei-white-bg);color:var(--arch-koschei-white-ink)}
/* focus: the ring keeps the colour and width of the site/lab rule, but sits mostly outside the cell's own rings and is
   drawn above the neighbouring cells (they are positioned too, and used to paint over its right and bottom sides).
   The second selector outweighs the site rule «[data-design=v2] :is(.learning-interactive …) :is(…, [tabindex])
   :is(:focus-visible, :focus)», which sets outline-offset:2px. */
.arch-lab .arch-koschei-board .arch-koschei-cell:focus-visible,
[data-design] .arch-lab .arch-koschei-board .arch-koschei-cell:is(:focus-visible,:focus){outline-offset:-1px;z-index:3}
/* a surface-coloured ring inside the focus ring, so it stands out on the dark «чёрные» cells too (cells with their own
   violet or green ring keep it) */
.arch-lab .arch-koschei-board .arch-koschei-cell:is(:focus-visible,:focus):not(.arch-koschei-sel):not(.arch-koschei-from){box-shadow:inset 0 0 0 4px var(--arch-surface)}
/* «Откуда число»: the cells no route of t moves reaches are hatched (dark and light stripes, visible on both fills)
   and their numbers faded; the fill itself stays, so «чёрные» cells still look black */
.arch-lab .arch-koschei-dim::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(135deg,var(--arch-koschei-hatch-a) 0 2px,var(--arch-koschei-hatch-b) 2px 3.5px,transparent 3.5px 9px)}
/* the number itself sits on a solid disc of the cell's own fill, slightly faded (70 % of its ink), so it stays readable
   over the stripes on both fills and in both themes */
.arch-lab .arch-koschei-dim .arch-koschei-token{background:var(--arch-surface);color:color-mix(in srgb,currentColor 70%,transparent)}
.arch-lab .arch-koschei-colours .arch-koschei-black.arch-koschei-dim .arch-koschei-token{background:var(--arch-koschei-black-bg)}
.arch-lab .arch-koschei-colours .arch-koschei-white.arch-koschei-dim .arch-koschei-token{background:var(--arch-koschei-white-bg)}
.arch-lab .arch-koschei-sel{box-shadow:inset 0 0 0 4px var(--arch-koschei-sel),inset 0 0 0 6px var(--arch-surface)}
.arch-lab .arch-koschei-sel.arch-koschei-dim::after{inset:6px}
.arch-lab .arch-koschei-from{box-shadow:inset 0 0 0 4px var(--arch-koschei-from),inset 0 0 0 6px var(--arch-surface)}
.arch-lab .arch-koschei-from.arch-koschei-sel{box-shadow:inset 0 0 0 4px var(--arch-koschei-from),inset 0 0 0 8px var(--arch-koschei-sel),inset 0 0 0 10px var(--arch-surface)}
.arch-lab .arch-koschei-from .arch-koschei-token{font-weight:700}
.arch-lab .arch-zoomed .arch-koschei-board{width:calc(var(--n) * 46px);max-width:none}

/* legend */
.arch-lab .arch-koschei-legend[hidden]{display:none}
.arch-lab .arch-koschei-key{display:inline-block;width:20px;height:20px;flex:0 0 auto;border-radius:50%}
.arch-lab .arch-koschei-key.arch-koschei-top{background:var(--arch-koschei-top-bg);box-shadow:0 0 0 2px var(--arch-koschei-top-line)}
.arch-lab .arch-koschei-key.arch-koschei-second{background:var(--arch-koschei-second-bg);box-shadow:0 0 0 2px var(--arch-koschei-second-line)}
.arch-lab .arch-koschei-key-sel,.arch-lab .arch-koschei-key-from,.arch-lab .arch-koschei-key-dim,.arch-lab .arch-koschei-key-black{border-radius:3px}
.arch-lab .arch-koschei-key-sel{box-shadow:inset 0 0 0 4px var(--arch-koschei-sel);background:var(--arch-surface)}
.arch-lab .arch-koschei-key-from{box-shadow:inset 0 0 0 4px var(--arch-koschei-from);background:var(--arch-surface)}
.arch-lab .arch-koschei-key-dim{background:repeating-linear-gradient(135deg,var(--arch-koschei-hatch-a) 0 2px,var(--arch-koschei-hatch-b) 2px 3.5px,transparent 3.5px 9px),var(--arch-surface);border:1px solid var(--arch-grid)}
.arch-lab .arch-koschei-key-black{background:var(--arch-koschei-black-bg);border:1px solid var(--arch-grid)}

/* column chart of different numbers per step: the step columns scroll inside their own box on narrow screens, the
   «10 000» column is pinned on the right */
.arch-lab .arch-koschei-chartwrap{display:grid;gap:6px;min-width:0}
.arch-lab .arch-koschei-chartrow{display:flex;align-items:flex-end;gap:2px;min-width:0}
.arch-lab .arch-koschei-chart{position:relative;flex:1 1 auto;display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:2px 2px 4px;min-width:0}
.arch-lab .arch-koschei-chartbig{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;padding:2px 0 4px}
.arch-lab .arch-koschei-chartbig[hidden]{display:none}
.arch-lab .arch-koschei-col{flex:1 0 20px;min-width:20px;display:flex;flex-direction:column;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.arch-lab .arch-koschei-count{font-size:14px;color:var(--arch-ink)}
.arch-lab .arch-koschei-t{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-koschei-bar{display:block;width:72%;background:var(--arch-koschei-bar);border-radius:3px 3px 0 0}
.arch-lab .arch-koschei-now .arch-koschei-bar{background:var(--arch-koschei-bar-now)}
.arch-lab .arch-koschei-now :is(.arch-koschei-count,.arch-koschei-t){font-weight:700;color:var(--arch-ink)}
.arch-lab .arch-koschei-big{flex:0 0 auto;min-width:48px}
.arch-lab .arch-koschei-big .arch-koschei-bar{width:18px}
.arch-lab .arch-koschei-gap{align-self:center;color:var(--arch-muted);font-size:16px;padding:0 2px}
.arch-lab .arch-koschei-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.arch-lab .arch-koschei-chartwrap{position:relative}

@media (prefers-reduced-motion: reduce){.arch-lab .arch-koschei-cell{transition:none}}
/* a step the model has not reached yet: an empty dashed column with «?» */
.arch-lab .arch-koschei-unseen .arch-koschei-bar{background:transparent;border:1px dashed var(--arch-koschei-bar);box-sizing:border-box}
.arch-lab .arch-koschei-unseen .arch-koschei-count{color:var(--arch-muted)}

/* 2022 2.3 «Домики Винни-Пуха, Пятачка и Кролика» — lab labs/lake.mjs («Тропа вокруг озера»).
   Arcs: x blue, z violet, y green; walkers: Pooh honey, Piglet pink. Letters on these fills are white in the light theme
   and near-black in the dark one, where the fills are lighter (contrast ≥ 4.5:1 in both themes).
   Layout: the lake and the key moments side by side when the stage is wide, one column on phones.
   «Круг целиком» (lap bars) is plain HTML so its text keeps its size on phones. */
.arch-lab{--arch-lake-x:#2563eb;--arch-lake-y:#047857;--arch-lake-z:#7c3aed;--arch-lake-pooh:#b45309;--arch-lake-piglet:#be185d;--arch-lake-on:#fff;--arch-lake-home:#cbd5e1;--arch-lake-rabbit:#64748b;--arch-lake-now:#eef2ff}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-lake-x:#60a5fa;--arch-lake-y:#34d399;--arch-lake-z:#a78bfa;--arch-lake-pooh:#fbbf24;--arch-lake-piglet:#f9a8d4;--arch-lake-on:#111318;--arch-lake-home:#4b5563;--arch-lake-rabbit:#94a3b8;--arch-lake-now:#2a2440}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-lake-x:#60a5fa;--arch-lake-y:#34d399;--arch-lake-z:#a78bfa;--arch-lake-pooh:#fbbf24;--arch-lake-piglet:#f9a8d4;--arch-lake-on:#111318;--arch-lake-home:#4b5563;--arch-lake-rabbit:#94a3b8;--arch-lake-now:#2a2440}
.arch-lab .arch-lake-predict{border-top:0;padding-top:0}
.arch-lab .arch-lake-predict .arch-label{margin:0}
.arch-lab .arch-lake-speed label{display:block}
.arch-lab .arch-lake-speed input[type=range]{flex:1 1 160px}
.arch-lab input.arch-lake-field{width:88px;text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-lake-stage{container-type:inline-size;padding:12px;display:grid;gap:12px}
.arch-lab .arch-lake-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "play" "gantt" "side" "lap";gap:14px;min-width:0}
@container (min-width:640px){.arch-lab .arch-lake-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"scene side" "play side" "gantt side" "lap lap";column-gap:20px}.arch-lab .arch-lake-gantt-box{align-self:start}}
.arch-lab .arch-lake-scene{grid-area:scene;min-width:0;display:grid;gap:6px}
.arch-lab .arch-lake-scene .arch-help{text-align:center}
.arch-lab .arch-lake-play{grid-area:play}
.arch-lab .arch-lake-side{grid-area:side;min-width:0;display:grid;gap:8px;align-content:start}
.arch-lab .arch-lake-side .arch-label{margin:4px 0 0}
.arch-lab .arch-lake-gantt-box{grid-area:gantt;min-width:0;display:grid;gap:6px}
.arch-lab .arch-lake-gantt-box .arch-label{margin:0}
.arch-lab .arch-stage svg.arch-lake-lake{max-width:420px;margin:0 auto;max-height:none}
.arch-lab .arch-stage svg.arch-lake-gantt{max-width:440px;margin:0 auto;max-height:none}
.arch-lab svg text.arch-lake-on{fill:var(--arch-lake-on)}
.arch-lab svg text.arch-lake-muted{fill:var(--arch-muted)}
.arch-lab svg text.arch-lake-clock{fill:var(--arch-ink);font-variant-numeric:tabular-nums}
/* readouts: always three rows of one line each, so the key moments below never jump when a text gets longer */
.arch-lab .arch-lake-now{display:grid;gap:4px;min-height:calc(3 * 1.6em)}
.arch-lab .arch-lake-now div{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:8px;align-items:baseline}
.arch-lab .arch-lake-now dt{display:inline-flex;align-items:center;gap:6px}
.arch-lab .arch-lake-now dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-lab .arch-lake-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--arch-lake-pooh);flex:none}
.arch-lab .arch-lake-dot[data-who=piglet]{background:var(--arch-lake-piglet)}
.arch-lab .arch-lake-events{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.arch-lab .arch-lake-event{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border-radius:12px;padding:8px 12px;background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-soft-line);font-size:15px;line-height:1.35}
.arch-lab .arch-lake-event:hover{border-color:var(--arch-field-line)}
.arch-lab .arch-lake-event[aria-current=true]{background:var(--arch-lake-now);border-color:var(--arch-pressed-line)}
.arch-lab .arch-lake-event[data-kind=meet],.arch-lab .arch-lake-event[data-kind=doorstep]{border-left:4px solid var(--arch-bad)}
.arch-lab .arch-lake-etime{flex:none;min-width:4.6em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--arch-label)}
.arch-lab .arch-lake-legend{justify-content:center}
.arch-lab .arch-lake-sw{display:inline-block;width:20px;height:12px;border-radius:3px;background:var(--arch-lake-home);flex:none}
.arch-lab .arch-lake-sw[data-kind=x]{background:var(--arch-lake-x)}
.arch-lab .arch-lake-sw[data-kind=y]{background:var(--arch-lake-y)}
.arch-lab .arch-lake-sw[data-kind=z]{background:var(--arch-lake-z)}
.arch-lab .arch-lake-sw-line{display:inline-block;width:0;height:16px;border-left:2px dashed var(--arch-muted);margin:0 6px;flex:none}
.arch-lab .arch-lake-sw-meet{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--arch-bad);flex:none}
.arch-lab .arch-lake-legend li[hidden]{display:none}
/* «Круг целиком»: each friend's two walks laid along the circle x | z | y, widths in minutes (full width = 260 min) */
.arch-lab .arch-lake-lap{grid-area:lap;min-width:0;display:grid;gap:8px;border-top:1px solid var(--arch-soft-line);padding-top:10px}
.arch-lab .arch-lake-lap>.arch-label{margin:0}
.arch-lab .arch-lake-laprow{display:grid;gap:4px}
.arch-lab .arch-lake-laprow[hidden]{display:none}
.arch-lab .arch-lake-laphead{margin:0;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.arch-lab .arch-lake-laphead .arch-lake-dot{margin-right:6px;vertical-align:-1px}
.arch-lab .arch-lake-laphead .arch-lake-nb{white-space:nowrap}
.arch-lab .arch-lake-lapbar{position:relative;display:flex;height:28px;margin:4px 0 2px}
.arch-lab .arch-lake-seg{display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;background:var(--arch-lake-home);color:var(--arch-lake-on);font-weight:700;font-size:15px;box-sizing:border-box}
.arch-lab .arch-lake-seg[data-kind=x]{background:var(--arch-lake-x)}
.arch-lab .arch-lake-seg[data-kind=z]{background:var(--arch-lake-z)}
.arch-lab .arch-lake-seg[data-kind=y]{background:var(--arch-lake-y);justify-content:flex-start;padding-left:12px}/* the letter stays clear of the 220 mark */
.arch-lab .arch-lake-seg:first-child{border-radius:6px 0 0 6px}
.arch-lab .arch-lake-seg:nth-child(3){border-radius:0 6px 6px 0}
.arch-lab .arch-lake-seg-day{border-left:4px solid var(--arch-surface)}
.arch-lab .arch-lake-target{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--arch-ink);transform:translateX(-1px)}
.arch-lab .arch-lake-lapdays{position:relative;display:flex;font-size:14px;color:var(--arch-muted);line-height:1.3;min-height:1.3em}
.arch-lab .arch-lake-lapdays span{flex:none;white-space:nowrap;padding-left:2px}
.arch-lab .arch-lake-lapdays .arch-lake-target-label{position:absolute;top:0;transform:translateX(-50%);padding:0;font-weight:700;color:var(--arch-ink)}
.arch-lab .arch-lake-laptext p{margin:4px 0 0}
.arch-lab .arch-lake-lap-fits{background:var(--arch-ok-bg);border-radius:12px;padding:10px 10px 8px;border-top-color:transparent}
.arch-lab .arch-lake-lap-fits .arch-lake-seg-day{border-left-color:var(--arch-ok-bg)}
.arch-lab .arch-lake-empty{color:var(--arch-muted);white-space:normal}
.arch-lab .arch-lake-dayrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.arch-lab table.arch-lake-tries{width:100%;font-size:15px}
.arch-lab table.arch-lake-tries th{font-size:14px;line-height:1.3}
.arch-lab table.arch-lake-tries td{white-space:nowrap}
.arch-lab table.arch-lake-tries td:last-child{white-space:normal}
.arch-lab table.arch-lake-tries tr[data-fits=true] td{background:var(--arch-ok-bg)}
@media(max-width:480px){.arch-lab .arch-lake-stage{padding:8px}.arch-lab .arch-lake-event{padding:8px 10px}.arch-lab table.arch-lake-tries td,.arch-lab table.arch-lake-tries th{padding:4px 5px}}

/* Popov Academy — content-factory/archimedes-winter-2021-2022-2026-v1
   2022 problem 1.4 «Буквы и цифры на карточках» (letter-cards): Vasya's seven cards, the digit pad, the word sums
   and the list of assignments. Colours only through --arch-* variables. Every letter keeps one colour everywhere
   (a soft fill with a stronger stripe), so shared cards of two words are easy to spot; text on these fills is
   always --arch-ink. Dark values use the same theme switch as lab.css. */
.arch-lab .arch-letter-cards{display:grid;gap:18px;min-width:0;
 --arch-lc-0:#dbeafe;--arch-lc-line-0:#2563eb;--arch-lc-1:#fef9c3;--arch-lc-line-1:#ca8a04;--arch-lc-2:#dcfce7;--arch-lc-line-2:#16a34a;
 --arch-lc-3:#fce7f3;--arch-lc-line-3:#db2777;--arch-lc-4:#ede9fe;--arch-lc-line-4:#7c3aed;--arch-lc-5:#cffafe;--arch-lc-line-5:#0891b2;
 --arch-lc-6:#ffedd5;--arch-lc-line-6:#ea580c}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab .arch-letter-cards{
 --arch-lc-0:#1e3a5f;--arch-lc-line-0:#60a5fa;--arch-lc-1:#3d3810;--arch-lc-line-1:#facc15;--arch-lc-2:#14432a;--arch-lc-line-2:#4ade80;
 --arch-lc-3:#4a1d3a;--arch-lc-line-3:#f472b6;--arch-lc-4:#33285e;--arch-lc-line-4:#a78bfa;--arch-lc-5:#0e3f4c;--arch-lc-line-5:#22d3ee;
 --arch-lc-6:#4a2a12;--arch-lc-line-6:#fb923c}}
:root[data-design="v2"][data-theme="dark"] .arch-lab .arch-letter-cards{
 --arch-lc-0:#1e3a5f;--arch-lc-line-0:#60a5fa;--arch-lc-1:#3d3810;--arch-lc-line-1:#facc15;--arch-lc-2:#14432a;--arch-lc-line-2:#4ade80;
 --arch-lc-3:#4a1d3a;--arch-lc-line-3:#f472b6;--arch-lc-4:#33285e;--arch-lc-line-4:#a78bfa;--arch-lc-5:#0e3f4c;--arch-lc-line-5:#22d3ee;
 --arch-lc-6:#4a2a12;--arch-lc-line-6:#fb923c}
.arch-lab .arch-letter-cards [hidden]{display:none!important}
.arch-lab .arch-letter-cards p{margin:0}
.arch-lab .arch-letter-cards-section{display:grid;gap:10px;min-width:0}
.arch-lab .arch-letter-cards-section+.arch-letter-cards-section{border-top:1px solid var(--arch-soft-line);padding-top:16px}
.arch-lab .arch-letter-cards-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Vasya's cards: the letter on a coloured strip, the digit below */
.arch-lab .arch-letter-cards-cards{display:grid;grid-template-columns:repeat(7,minmax(0,78px));gap:8px;justify-content:start}
.arch-lab button.arch-letter-cards-card{display:grid;grid-template-rows:auto 1fr;padding:0;min-width:44px;min-height:92px;border-radius:12px;overflow:hidden;line-height:1;
 background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-field-line);box-shadow:0 3px 0 var(--arch-soft-line)}
.arch-lab .arch-letter-cards-card-l{display:block;padding:8px 0 6px;background:var(--lc);border-bottom:3px solid var(--lc-line);font-size:22px;font-weight:700;color:var(--arch-ink)}
.arch-lab .arch-letter-cards-card-d{display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--arch-ink)}
.arch-lab .arch-letter-cards-card.arch-letter-cards-empty .arch-letter-cards-card-d{color:var(--arch-muted);font-weight:500}
.arch-lab button.arch-letter-cards-card[aria-pressed=true]{border-color:var(--arch-pressed-line);box-shadow:0 0 0 3px var(--arch-pressed-line);transform:translateY(-2px)}
.arch-lab button.arch-letter-cards-card.arch-letter-cards-clash{border:2px dashed var(--arch-bad)}
.arch-lab .arch-letter-cards-clash .arch-letter-cards-card-d{color:var(--arch-bad);background:var(--arch-bad-bg)}
@keyframes arch-letter-cards-flip{from{transform:perspective(200px) rotateX(85deg);opacity:.3}to{transform:none;opacity:1}}
.arch-lab .arch-letter-cards-flip{animation:arch-letter-cards-flip .26s ease-out}

/* digit pad: every key shows which letter has that digit now */
.arch-lab .arch-letter-cards-padlabel{font-size:15px}
.arch-lab .arch-letter-cards-pad{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:6px;max-width:620px}
.arch-lab button.arch-letter-cards-key{display:grid;justify-items:center;align-content:center;gap:1px;padding:4px 0;min-height:54px;border-radius:12px;line-height:1.15;
 background:var(--arch-surface);color:var(--arch-ink);border:1px solid var(--arch-field-line)}
.arch-lab .arch-letter-cards-key-d{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab .arch-letter-cards-key-who{min-height:1.15em;font-size:13px;font-weight:700;color:var(--arch-ink)}
.arch-lab button.arch-letter-cards-key.arch-letter-cards-used{background:var(--arch-clear)}
.arch-lab button.arch-letter-cards-key[aria-pressed=true]{background:var(--arch-pressed-bg);border-color:var(--arch-pressed-line);box-shadow:inset 0 0 0 2px var(--arch-pressed-line)}
.arch-lab button.arch-letter-cards-key.arch-letter-cards-clash{background:var(--arch-bad-bg);border:2px dashed var(--arch-bad)}
.arch-lab .arch-letter-cards-key.arch-letter-cards-clash .arch-letter-cards-key-who{color:var(--arch-bad)}
.arch-lab .arch-letter-cards .arch-result ul.arch-letter-cards-problems{margin:4px 0;padding-left:1.2em;display:grid;gap:2px}
.arch-lab .arch-letter-cards .arch-result .arch-letter-cards-trap{border-left:3px solid var(--arch-accent);padding-left:10px}
.arch-lab .arch-letter-cards .arch-result .arch-letter-cards-answers{font-weight:600;font-variant-numeric:tabular-nums}
/* live check of the four words right under the pad (the full rows with tiles are in «Слова и их суммы») */
.arch-lab .arch-letter-cards-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:620px}
.arch-lab .arch-letter-cards-chip{padding:5px 10px;border-radius:12px;border:1px solid var(--arch-field-line);border-left-width:4px;background:var(--arch-surface);color:var(--arch-ink);
 font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums;min-width:0}
.arch-lab .arch-letter-cards-chip :is(.arch-letter-cards-chip-head,.arch-letter-cards-chip-goal){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-lab .arch-letter-cards-chip-goal:empty{display:none}
.arch-lab .arch-letter-cards-chip-head{font-weight:700}
.arch-lab .arch-letter-cards-chip[data-state=ok]{border-color:var(--arch-good);background:var(--arch-ok-bg);color:var(--arch-good)}
.arch-lab .arch-letter-cards-chip:is([data-state=bad],[data-state=over]){border-color:var(--arch-bad);border-style:dashed solid dashed solid;background:var(--arch-bad-bg);color:var(--arch-bad)}

/* the words: tiles with + (or ·), the sum and the target */
.arch-lab .arch-letter-cards-board{display:grid;gap:10px;padding:12px;border:1px solid var(--arch-soft-line);border-radius:14px;background:var(--arch-surface);transition:background-color .3s,border-color .3s;min-width:0}
.arch-lab .arch-letter-cards-board.arch-letter-cards-win{background:var(--arch-ok-bg);border-color:var(--arch-good)}
.arch-lab .arch-letter-cards-words{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* wide: tiles | = sum | target, the columns line up from word to word; phones: tiles above, sum and target below */
.arch-lab .arch-letter-cards-word{position:relative;display:grid;grid-template-columns:250px minmax(64px,auto) 1fr;align-items:center;gap:6px 14px;min-width:0;
 padding:8px 12px 8px 12px;border:1px solid var(--arch-soft-line);border-left:5px solid var(--arch-soft-line);border-radius:10px;background:var(--arch-surface)}
.arch-lab .arch-letter-cards-word[data-state=ok]{border-color:var(--arch-good)}
.arch-lab .arch-letter-cards-word:is([data-state=bad],[data-state=over]){border-color:var(--arch-bad)}
.arch-lab .arch-letter-cards-ask{border-style:dashed;border-left-style:solid}
.arch-lab .arch-letter-cards-ask[data-state=ok]{border-style:solid;border-color:var(--arch-pressed-line)}
.arch-lab .arch-letter-cards-asklabel{margin-top:4px!important}
.arch-lab .arch-letter-cards-strip{display:flex;align-items:center;gap:3px;min-width:0}
.arch-lab .arch-letter-cards-tile{display:grid;grid-template-rows:auto auto;width:34px;flex:0 0 auto;border-radius:7px;overflow:hidden;text-align:center;
 border:1px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-ink)}
.arch-lab .arch-letter-cards-tile-l{background:var(--lc);border-bottom:2px solid var(--lc-line);font-size:15px;font-weight:700;line-height:1.55}
.arch-lab .arch-letter-cards-tile-d{font-size:18px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.arch-lab .arch-letter-cards-tile.arch-letter-cards-empty .arch-letter-cards-tile-d{color:var(--arch-muted);font-weight:500}
.arch-lab .arch-letter-cards-op{width:12px;text-align:center;font-size:18px;font-weight:700;color:var(--arch-muted)}
.arch-lab .arch-letter-cards-sum{font-size:22px;font-weight:700;color:var(--arch-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.arch-lab .arch-letter-cards-goal{justify-self:start;font-size:15px;color:var(--arch-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.arch-lab .arch-letter-cards-word[data-state=ok] .arch-letter-cards-goal{color:var(--arch-good);font-weight:700}
.arch-lab .arch-letter-cards-word:is([data-state=bad],[data-state=over]) :is(.arch-letter-cards-goal,.arch-letter-cards-sum){color:var(--arch-bad);font-weight:700}
.arch-lab .arch-letter-cards-ask[data-state=ok] .arch-letter-cards-goal{color:var(--arch-ink);font-weight:400}
.arch-lab .arch-letter-cards-asknote{color:var(--arch-ink)}

/* panels: what follows from the words, all assignments */
.arch-lab .arch-letter-cards-panel{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--arch-soft-line);border-radius:14px;background:var(--arch-surface);color:var(--arch-ink);line-height:1.5;min-width:0}
.arch-lab .arch-letter-cards-facts{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.arch-lab .arch-letter-cards-fact{display:grid;gap:4px;padding:8px 10px;border-left:4px solid var(--arch-soft-line);border-radius:4px}
.arch-lab .arch-letter-cards-fact[data-state=ok]{border-left-color:var(--arch-good)}
.arch-lab .arch-letter-cards-fact[data-state=bad]{border-left-color:var(--arch-bad)}
.arch-lab .arch-letter-cards-step{justify-self:start;font-size:13px;font-weight:700;padding:1px 10px;border-radius:999px;border:1px solid var(--arch-field-line);color:var(--arch-label)}
.arch-lab .arch-letter-cards-have{font-weight:600;font-variant-numeric:tabular-nums}
.arch-lab .arch-letter-cards-why{font-size:15px}
.arch-lab .arch-letter-cards-fact[data-state=ok] .arch-letter-cards-have{color:var(--arch-good)}
.arch-lab .arch-letter-cards-fact[data-state=bad] .arch-letter-cards-have{color:var(--arch-bad)}
.arch-lab .arch-letter-cards-progress{color:var(--arch-ink);line-height:1.5}
.arch-lab .arch-letter-cards :is(.arch-letter-cards-found,.arch-letter-cards-sols){list-style:none;margin:0;padding:0;display:grid;gap:8px}
.arch-lab .arch-letter-cards-sol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 10px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);color:var(--arch-ink);min-width:0}
.arch-lab .arch-letter-cards-sol.arch-letter-cards-here{border:2px solid var(--arch-pressed-line);padding:7px 9px}
.arch-lab .arch-letter-cards-sol>button{margin-left:auto}
.arch-lab .arch-letter-cards-mini{display:flex;gap:3px;flex-wrap:nowrap}
.arch-lab .arch-letter-cards-tile.arch-letter-cards-small{width:30px}
.arch-lab .arch-letter-cards-small .arch-letter-cards-tile-l{font-size:14px;line-height:1.5}
.arch-lab .arch-letter-cards-small .arch-letter-cards-tile-d{font-size:16px;line-height:1.45}
.arch-lab .arch-letter-cards-solvals{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:2px 14px;font-weight:600;font-variant-numeric:tabular-nums}
/* «✓ твоя находка» under the two numbers, so the button stays on the same line in every row */
.arch-lab .arch-letter-cards-mine{grid-column:1/-1;color:var(--arch-good)}
.arch-lab .arch-letter-cards-mine:empty{display:none}
.arch-lab .arch-letter-cards-conclusion{font-size:17px}

/* phones: the cards in two rows (Л О М В / А И Н), the pad in two rows of five, every word on two lines */
@media (max-width:560px){
 .arch-lab .arch-letter-cards-cards{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch}
 .arch-lab .arch-letter-cards-pad{grid-template-columns:repeat(5,minmax(44px,1fr))}
 .arch-lab .arch-letter-cards-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
 .arch-lab .arch-letter-cards-board{padding:8px}
 .arch-lab .arch-letter-cards-word{grid-template-columns:auto 1fr;padding:8px 8px 6px 10px;gap:4px 8px}
 .arch-lab .arch-letter-cards-word>.arch-letter-cards-strip{grid-column:1/-1}
 .arch-lab .arch-letter-cards-goal{justify-self:end}
 .arch-lab .arch-letter-cards-strip{gap:2px}
 .arch-lab .arch-letter-cards-tile{width:36px}
 .arch-lab .arch-letter-cards-sol{gap:8px 10px}
 .arch-lab .arch-letter-cards-solvals{grid-template-columns:auto;gap:0}
}
@media (max-width:360px){
 .arch-lab .arch-letter-cards-tile{width:34px}
 .arch-lab .arch-letter-cards-tile.arch-letter-cards-small{width:28px}
 .arch-lab .arch-letter-cards-op{width:10px}
 .arch-lab .arch-letter-cards-panel{padding:10px}
}
@media (prefers-reduced-motion:reduce){.arch-lab .arch-letter-cards-flip{animation:none}.arch-lab .arch-letter-cards-board{transition:none}.arch-lab button.arch-letter-cards-card[aria-pressed=true]{transform:none}}

/* 2022 1.3 — «Собери палиндром» (labs/palindrome.mjs). Digit tiles: the mirrored part, the zeros in the middle
   and the end in three calm fills; after a check the last 14 digits get an orange bar and their number counted
   from the right. The tile size and the line breaks come from the script (--arch-palindrome-cell and break
   elements between the parts of the number). The bar and number rows are always reserved, so the stage does not
   jump when a check marks them. Colours come from the --arch-* variables, so both themes work. */
.arch-lab .arch-palindrome-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px 24px;align-items:start}
.arch-lab .arch-palindrome-field{display:grid;gap:6px;min-width:0;align-content:start}
.arch-lab .arch-palindrome-field input[type=text]{width:100%;max-width:100%;box-sizing:border-box;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.arch-lab .arch-palindrome-inputs input[type=text]{max-width:16em}
.arch-lab .arch-palindrome-field input[aria-invalid=true],.arch-lab .arch-palindrome-krow input[aria-invalid=true]{border-color:var(--arch-bad);border-width:2px}
.arch-lab .arch-palindrome-stepper{flex-wrap:nowrap;gap:6px}
.arch-lab .arch-palindrome-stepper input[type=number]{width:76px;text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-palindrome-step{width:48px;padding:0;font-size:24px;line-height:1;font-weight:600}
.arch-lab .arch-palindrome-stage{padding:16px 10px 12px;display:grid;gap:12px}
.arch-lab .arch-palindrome-digits{--arch-palindrome-cell:30px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:4px 3px;min-height:44px;min-width:0;margin:0 auto;width:100%}
.arch-lab .arch-palindrome-br{flex:0 0 100%;height:0}
.arch-lab .arch-palindrome-empty{align-self:center;margin:auto}
.arch-lab .arch-palindrome-cell{display:flex;flex-direction:column;align-items:center;gap:3px;width:var(--arch-palindrome-cell);flex:0 0 auto}
.arch-lab .arch-palindrome-cell[data-gap]{margin-left:8px}
.arch-lab .arch-palindrome-d{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:calc(var(--arch-palindrome-cell)*1.32);border-radius:7px;border:1px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-ink);font-size:calc(var(--arch-palindrome-cell)*.7);font-weight:650;font-variant-numeric:tabular-nums;line-height:1}
.arch-lab .arch-palindrome-cell[data-role=mirror] .arch-palindrome-d{background:var(--arch-piece-a)}
.arch-lab .arch-palindrome-cell[data-role=zero] .arch-palindrome-d{background:var(--arch-clear)}
.arch-lab .arch-palindrome-cell[data-role=end] .arch-palindrome-d{background:var(--arch-piece-b)}
.arch-lab .arch-palindrome-cell[data-role=pad] .arch-palindrome-d{border-style:dashed;color:var(--arch-muted);font-weight:400}
.arch-lab .arch-palindrome-cell[data-bad] .arch-palindrome-d{background:var(--arch-bad-bg);border:3px solid var(--arch-bad)}
.arch-lab .arch-palindrome-digits:not([data-window]) :is(.arch-palindrome-bar,.arch-palindrome-pos){visibility:hidden}
.arch-lab .arch-palindrome-bar{display:block;width:calc(100% + 3px);height:5px}
.arch-lab .arch-palindrome-cell[data-win] .arch-palindrome-bar{background:var(--arch-accent)}
.arch-lab .arch-palindrome-pos{display:block;min-height:16px;font-size:13px;line-height:16px;color:var(--arch-muted);font-variant-numeric:tabular-nums}
.arch-lab .arch-palindrome-legend{justify-content:center}
.arch-lab .arch-palindrome-swatch{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid var(--arch-field-line);flex-shrink:0;box-sizing:border-box}
.arch-lab .arch-palindrome-sw-mirror{background:var(--arch-piece-a)}
.arch-lab .arch-palindrome-sw-zero{background:var(--arch-clear)}
.arch-lab .arch-palindrome-sw-end{background:var(--arch-piece-b)}
.arch-lab .arch-palindrome-sw-pad{border-style:dashed;background:var(--arch-surface)}
.arch-lab .arch-palindrome-sw-win{height:6px;border:0;border-radius:2px;background:var(--arch-accent)}
.arch-lab .arch-palindrome-predict{display:grid;gap:8px}
.arch-lab .arch-palindrome-predict .arch-label{margin:0}
.arch-lab .arch-palindrome-guess{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.arch-lab .arch-palindrome-guess label{font-weight:400;color:var(--arch-ink)}
.arch-lab .arch-palindrome-guess select{min-width:8.5em}
/* numbers never break inside; a number of more than 20 digits is grouped by three and may continue at a group */
.arch-lab .arch-palindrome-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.arch-lab .arch-palindrome-long{white-space:normal}
.arch-lab .arch-palindrome-eq{font-size:17px;font-variant-numeric:tabular-nums}
.arch-lab .arch-palindrome-meterbox{display:grid;gap:6px;margin:10px 0}
.arch-lab .arch-palindrome-meterbox .arch-help{margin:0}
.arch-lab .arch-palindrome-meter{display:grid;grid-template-columns:repeat(14,minmax(0,18px));gap:3px}
.arch-lab .arch-palindrome-meter span{aspect-ratio:1;border-radius:4px;border:1px solid var(--arch-field-line);background:var(--arch-surface)}
.arch-lab .arch-palindrome-meter span[data-on]{background:var(--arch-primary-bg);border-color:var(--arch-primary-bg)}
.arch-lab .arch-palindrome-meter[data-ok=true] span[data-on]{background:var(--arch-good);border-color:var(--arch-good)}
.arch-lab .arch-palindrome-why{gap:8px}
.arch-lab .arch-palindrome-why>.arch-label,.arch-lab .arch-palindrome-focus,.arch-lab .arch-palindrome-khelp{margin:0}
.arch-lab .arch-palindrome-focus{color:var(--arch-ink);font-size:15px}
.arch-lab .arch-palindrome-klabel{font-weight:400;color:var(--arch-ink)}
.arch-lab .arch-palindrome-krow{flex-wrap:nowrap}
.arch-lab .arch-palindrome-krow input[type=range]{flex:1 1 auto}
.arch-lab .arch-palindrome-krow input[type=number]{width:76px;flex:0 0 auto}
/* the cut: front part | last k digits */
.arch-lab .arch-palindrome-cut{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 6px;padding:12px 8px 10px;background:var(--arch-surface);border:1px solid var(--arch-soft-line);border-radius:8px;min-width:0}
.arch-lab .arch-palindrome-cutpart{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:128px;max-width:100%}
.arch-lab .arch-palindrome-cutdigits{font-size:22px;line-height:1.25;font-weight:650;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--arch-ink);padding:2px 6px 3px;border-radius:6px;overflow-wrap:anywhere;text-align:center;max-width:100%;box-sizing:border-box}
.arch-lab .arch-palindrome-cutfront .arch-palindrome-cutdigits{background:var(--arch-clear)}
.arch-lab .arch-palindrome-cutback .arch-palindrome-cutdigits{border-bottom:5px solid var(--arch-accent);border-radius:6px 6px 0 0}
.arch-lab .arch-palindrome-cutpad{color:var(--arch-muted);font-weight:400}
/* a label never widens its part: it wraps under the digits instead */
.arch-lab .arch-palindrome-cutlabel{font-size:13px;line-height:16px;color:var(--arch-muted);text-align:center;width:0;min-width:100%}
.arch-lab .arch-palindrome-cutright{display:flex;align-items:stretch;gap:6px;min-width:0;max-width:100%}
.arch-lab .arch-palindrome-knife{flex:0 0 auto;width:0;border-left:2px dashed var(--arch-accent);margin:0 2px 20px}
.arch-lab .arch-palindrome-why-text p{margin:6px 0;line-height:1.55}
.arch-lab .arch-palindrome-pow sup{font-size:.7em;line-height:0}
.arch-lab .arch-palindrome-log{padding-left:2.4em}
@media(max-width:480px){
 .arch-lab .arch-palindrome-actions .arch-primary{flex:1 1 100%}
 .arch-lab .arch-palindrome-step{padding:0}
 .arch-lab .arch-palindrome-cut{padding:10px 4px 8px;gap:8px 4px}
 .arch-lab .arch-palindrome-cutpart{min-width:76px}
 .arch-lab .arch-palindrome-cutdigits{font-size:16px;letter-spacing:.06em;padding:2px 4px 3px}
}

/* 2022 2.4 «В кладовой Царя Гороха» — lab labs/pea-bags.mjs. Sacks, coins and bars keep their object colours in
   both themes (numbers on sacks: dark ink on canvas/gold in light, light ink on dark canvas in dark); text and
   frames go through --arch-* variables. One meaning per colour: blue = coins arrive / the total grows,
   orange = coins leave / the total drops (as in the solution figures), red = an answer repeats, green = ✓. */
.arch-lab{--arch-pea-bags-sack:#f6e7c8;--arch-pea-bags-sack-line:#8a6a3b;--arch-pea-bags-sack-ink:#3b2a12;--arch-pea-bags-named:#fbbf24;--arch-pea-bags-named-line:#92400e;--arch-pea-bags-named-ink:#1c1203;--arch-pea-bags-rope:#a16207;--arch-pea-bags-coin:#facc15;--arch-pea-bags-coin-line:#a16207;--arch-pea-bags-up:#3b82f6;--arch-pea-bags-down:#ea580c;--arch-pea-bags-tsar:#c2410c;--arch-pea-bags-up-ink:#1d4ed8;--arch-pea-bags-up-bg:#dbeafe;--arch-pea-bags-down-ink:#b03a0a;--arch-pea-bags-down-bg:#ffedd5}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-pea-bags-sack:#4a3d27;--arch-pea-bags-sack-line:#d6b47a;--arch-pea-bags-sack-ink:#f8ecd6;--arch-pea-bags-named:#f59e0b;--arch-pea-bags-named-line:#fde68a;--arch-pea-bags-named-ink:#1c1203;--arch-pea-bags-rope:#e3b341;--arch-pea-bags-coin-line:#fde68a;--arch-pea-bags-up:#60a5fa;--arch-pea-bags-down:#fb923c;--arch-pea-bags-tsar:#fb923c;--arch-pea-bags-up-ink:#bfdbfe;--arch-pea-bags-up-bg:#1e3a66;--arch-pea-bags-down-ink:#fed7aa;--arch-pea-bags-down-bg:#5a2a0c}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-pea-bags-sack:#4a3d27;--arch-pea-bags-sack-line:#d6b47a;--arch-pea-bags-sack-ink:#f8ecd6;--arch-pea-bags-named:#f59e0b;--arch-pea-bags-named-line:#fde68a;--arch-pea-bags-named-ink:#1c1203;--arch-pea-bags-rope:#e3b341;--arch-pea-bags-coin-line:#fde68a;--arch-pea-bags-up:#60a5fa;--arch-pea-bags-down:#fb923c;--arch-pea-bags-tsar:#fb923c;--arch-pea-bags-up-ink:#bfdbfe;--arch-pea-bags-up-bg:#1e3a66;--arch-pea-bags-down-ink:#fed7aa;--arch-pea-bags-down-bg:#5a2a0c}
.arch-lab .arch-pea-bags-first{border-top:0;padding-top:0}
.arch-lab .arch-pea-bags-first .arch-label,.arch-lab .arch-pea-bags-real>.arch-label{margin:0}
.arch-lab .arch-pea-bags-pnote{margin:0}
/* the storeroom */
.arch-lab .arch-pea-bags-stage{position:relative;padding:10px 12px 12px;transition:border-color .3s,box-shadow .3s}
.arch-lab .arch-pea-bags-stage.arch-pea-bags-ok{border-color:var(--arch-good);box-shadow:0 0 0 1px var(--arch-good) inset}
.arch-lab .arch-pea-bags-board{--cols:7;display:grid;grid-template-columns:repeat(var(--cols),minmax(44px,64px));justify-content:center;gap:10px 6px}
.arch-lab .arch-pea-bags-col{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.arch-lab .arch-pea-bags-crownbox{height:19px;display:flex;align-items:flex-end;visibility:hidden}
.arch-lab .arch-pea-bags-col[data-tsar=true] .arch-pea-bags-crownbox{visibility:visible}
.arch-lab .arch-stage svg.arch-pea-bags-crown{width:26px;height:17px;max-height:none;fill:var(--arch-pea-bags-coin);stroke:var(--arch-pea-bags-coin-line);stroke-width:1.4;stroke-linejoin:round}
.arch-lab .arch-pea-bags-chip{min-height:24px;min-width:38px;padding:0 4px;border-radius:999px;font-weight:700;font-size:15px;line-height:22px;text-align:center;font-variant-numeric:tabular-nums;border:1px solid transparent;color:var(--arch-ink);white-space:nowrap}
.arch-lab .arch-pea-bags-chip[data-sign="1"]{background:var(--arch-pea-bags-up-bg);color:var(--arch-pea-bags-up-ink);border-color:var(--arch-pea-bags-up)}
.arch-lab .arch-pea-bags-chip[data-sign="-1"]{background:var(--arch-pea-bags-down-bg);color:var(--arch-pea-bags-down-ink);border-color:var(--arch-pea-bags-down)}
.arch-lab .arch-pea-bags-bag{position:relative;display:grid;place-items:center;width:min(100%,54px);min-width:44px;height:60px;padding:0;border-radius:14px;border:2px solid transparent;background:none;color:inherit}
.arch-lab .arch-pea-bags-col[data-tsar=true] .arch-pea-bags-bag{border-color:var(--arch-pea-bags-tsar)}
.arch-lab .arch-stage svg.arch-pea-bags-sack{width:40px;height:46px;max-height:none;overflow:visible}
.arch-lab .arch-pea-bags-sack-body{fill:var(--arch-pea-bags-sack);stroke:var(--arch-pea-bags-sack-line);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s}
.arch-lab .arch-pea-bags-rope{fill:var(--arch-pea-bags-rope)}
.arch-lab .arch-pea-bags-num{position:absolute;left:0;right:0;top:27px;text-align:center;font-weight:700;font-size:16px;line-height:1;color:var(--arch-pea-bags-sack-ink);pointer-events:none;font-variant-numeric:tabular-nums}
.arch-lab .arch-pea-bags-bag[aria-pressed=true] .arch-pea-bags-sack-body{fill:var(--arch-pea-bags-named);stroke:var(--arch-pea-bags-named-line)}
.arch-lab .arch-pea-bags-bag[aria-pressed=true] .arch-pea-bags-num{color:var(--arch-pea-bags-named-ink)}
.arch-lab .arch-pea-bags-bag:hover .arch-pea-bags-sack-body{stroke-width:2.4}
.arch-lab .arch-pea-bags-tick{position:absolute;top:-6px;right:-4px;width:20px;height:20px;border-radius:50%;background:var(--arch-primary-bg);color:var(--arch-primary-ink);font-size:13px;line-height:20px;font-weight:700;text-align:center;display:none}
.arch-lab .arch-pea-bags-bag[aria-pressed=true] .arch-pea-bags-tick{display:block}
.arch-lab .arch-pea-bags-coins{position:absolute;inset:0;pointer-events:none;overflow:visible}
.arch-lab .arch-pea-bags-coin{position:absolute;left:-8px;top:-8px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:var(--arch-pea-bags-coin);border:2px solid var(--arch-pea-bags-coin-line);box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* the sum written out: every choice in one grid cell, only the current one visible (the box keeps its height) */
.arch-lab .arch-pea-bags-move{display:grid;min-width:0}
.arch-lab .arch-pea-bags-movek{grid-area:1/1;display:grid;gap:2px;align-content:start;min-width:0}
.arch-lab .arch-pea-bags-movek[data-current=false]{visibility:hidden}
.arch-lab .arch-pea-bags-move p{margin:0;line-height:1.55}
.arch-lab .arch-pea-bags-term{white-space:nowrap}
.arch-lab .arch-pea-bags-term[data-sign="1"]{color:var(--arch-pea-bags-up-ink);font-weight:600}
.arch-lab .arch-pea-bags-term[data-sign="-1"]{color:var(--arch-pea-bags-down-ink);font-weight:600}
.arch-lab .arch-pea-bags-eq{font-variant-numeric:tabular-nums}
/* what Ivan hears: one row per choice of the Tsar */
.arch-lab .arch-pea-bags-answers{display:grid;gap:2px;font-variant-numeric:tabular-nums;min-width:0}
.arch-lab .arch-pea-bags-row{display:grid;grid-template-columns:3.1em 2.9em minmax(48px,1fr) 6.4em;align-items:center;gap:8px;min-height:28px;padding:0 8px;border-radius:8px;color:var(--arch-ink);min-width:0}
.arch-lab .arch-pea-bags-head{min-height:22px;font-size:13px;color:var(--arch-muted);font-weight:600}
.arch-lab .arch-pea-bags-axis-head{display:flex;justify-content:space-between;gap:4px}
.arch-lab .arch-pea-bags-row[data-clash=true]{background:var(--arch-bad-bg)}
.arch-lab .arch-pea-bags-row[data-current=true]{box-shadow:inset 0 0 0 2px var(--arch-pressed-line)}
.arch-lab .arch-pea-bags-row[data-current=true]:not([data-clash=true]){background:var(--arch-pressed-bg)}
.arch-lab .arch-pea-bags-k{font-weight:600;color:var(--arch-label)}
.arch-lab .arch-pea-bags-v{font-weight:700;text-align:right}
.arch-lab .arch-pea-bags-row[data-clash=true] .arch-pea-bags-v{color:var(--arch-bad)}
.arch-lab .arch-pea-bags-track{position:relative;height:16px}
.arch-lab .arch-pea-bags-track::before{content:'';position:absolute;left:50%;top:-6px;bottom:-6px;border-left:1.5px solid var(--arch-field-line)}
.arch-lab .arch-pea-bags-bar{position:absolute;top:2px;height:12px;border-radius:3px;transition:width .25s}
.arch-lab .arch-pea-bags-bar[data-sign=up]{background:var(--arch-pea-bags-up)}
.arch-lab .arch-pea-bags-bar[data-sign=down]{background:var(--arch-pea-bags-down)}
.arch-lab .arch-pea-bags-zero{position:absolute;left:50%;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--arch-ink)}
.arch-lab .arch-pea-bags-markcell{min-width:0;overflow:hidden}
.arch-lab .arch-pea-bags-mark{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-lab .arch-pea-bags-legend[hidden]{display:none}
.arch-lab .arch-pea-bags-sw{display:inline-block;width:18px;height:12px;border-radius:3px}
.arch-lab .arch-pea-bags-sw[data-sw=up]{background:var(--arch-pea-bags-up)}
.arch-lab .arch-pea-bags-sw[data-sw=down]{background:var(--arch-pea-bags-down)}
.arch-lab .arch-pea-bags-sw[data-sw=clash]{background:var(--arch-bad-bg);box-shadow:inset 0 0 0 1.5px var(--arch-bad)}
.arch-lab .arch-pea-bags-why{border-left:3px solid var(--arch-accent);padding-left:10px}
/* the real storeroom */
.arch-lab .arch-pea-bags-realsum p,.arch-lab .arch-pea-bags-said p{margin:4px 0}
.arch-lab .arch-pea-bags-game{margin:8px 0 0}
.arch-lab #arch-pea-bags-guess{width:7.5em}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-pea-bags-stage,.arch-lab .arch-pea-bags-sack-body,.arch-lab .arch-pea-bags-bar{transition:none}}
.arch-lab .arch-pea-bags-size input[type=range]{flex:1 1 120px}
@media (max-width:480px){.arch-lab .arch-pea-bags-size label{flex:1 1 100%}}
@media (max-width:420px){.arch-lab .arch-pea-bags-row{grid-template-columns:2.6em 2.5em minmax(36px,1fr) 6.2em;gap:5px;padding:0 4px}.arch-lab .arch-pea-bags-head{font-size:12px}.arch-lab .arch-pea-bags-mark{font-size:13px}}

/* Popov Academy — 2026 problem 2.4 «Винни-Пух и Кролик» (labs/pooh-walk.mjs). Pooh is orange and Rabbit blue in both
   themes (meaningful object colours). On the road the pace is shown by the pattern, not by a pale colour: the slow
   stretch is a thin dashed line («small steps»), the usual one a thick solid line, both in the walker's full colour.
   Contrast of these colours with the road bed (WCAG): light #c2410c 4.2:1, #1d4ed8 5.4:1 on #e5e7eb; dark #fb923c
   4.2:1, #60a5fa 3.7:1 on #3f4654. Text is never drawn on these fills; coloured labels sit on the stage background. */
.arch-lab{--arch-pw-pooh:#c2410c;--arch-pw-rabbit:#1d4ed8;--arch-pw-road:#e5e7eb;--arch-pw-house:#fef3c7}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-pw-pooh:#fb923c;--arch-pw-rabbit:#60a5fa;--arch-pw-road:#3f4654;--arch-pw-house:#3d3420}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-pw-pooh:#fb923c;--arch-pw-rabbit:#60a5fa;--arch-pw-road:#3f4654;--arch-pw-house:#3d3420}
.arch-lab .arch-pooh-walk-block{display:grid;gap:8px;min-width:0}
.arch-lab .arch-pooh-walk-block>.arch-label{margin:0}
.arch-lab .arch-pooh-walk-err:empty{display:none}
.arch-lab .arch-pooh-walk-predict button[aria-pressed=true][aria-disabled=true]{opacity:1}
.arch-lab .arch-pooh-walk-drow{flex-wrap:nowrap}
.arch-lab .arch-pooh-walk-drow input[type=range]{flex:1 1 100px}
.arch-lab .arch-pooh-walk-drow input[type=number]{flex:0 0 96px;width:96px}
.arch-lab .arch-pooh-walk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.arch-lab .arch-pooh-walk-whatif{margin:0;padding:10px 14px;border:1px solid var(--arch-soft-line);border-left:5px solid var(--arch-accent);border-radius:10px;background:var(--arch-surface);color:var(--arch-ink);font-weight:600}
/* stage */
.arch-lab .arch-pooh-walk-stage{display:grid;gap:8px;padding:8px}
.arch-lab .arch-pooh-walk-graphbox{gap:4px}
.arch-lab .arch-pooh-walk-gtitle{margin:2px 2px 0;font-size:15px}
.arch-lab .arch-pooh-walk-graphbox>.arch-help{padding:0 2px 2px}
.arch-lab .arch-pooh-walk-legend{padding:0 2px}
.arch-lab .arch-pooh-walk-sw{display:inline-block;flex-shrink:0;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:2px}
.arch-lab .arch-pooh-walk-sw-pooh{background:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-sw-rabbit{background:var(--arch-pw-rabbit)}
.arch-lab .arch-pooh-walk-sw-slow,.arch-lab .arch-pooh-walk-sw-fast{width:30px;border-radius:0}
.arch-lab .arch-pooh-walk-sw-slow{height:5px;background:repeating-linear-gradient(90deg,var(--arch-ink) 0 7px,transparent 7px 11px)}
.arch-lab .arch-pooh-walk-sw-fast{height:11px;background:var(--arch-ink)}
/* road */
.arch-lab .arch-pooh-walk-house polygon,.arch-lab .arch-pooh-walk-house rect{fill:var(--arch-pw-house);stroke:var(--arch-fig-line);stroke-width:1.5;stroke-linejoin:round}
.arch-lab .arch-pooh-walk-house rect.arch-pooh-walk-door{fill:var(--arch-surface)}
.arch-lab .arch-pooh-walk-bed{fill:var(--arch-pw-road)}
.arch-lab .arch-pooh-walk-tick{stroke:var(--arch-muted);stroke-width:1.2}
.arch-lab .arch-pooh-walk-track{stroke-width:12;stroke-linecap:butt}
.arch-lab .arch-pooh-walk-track.arch-pooh-walk-slow{stroke-width:5;stroke-dasharray:8 5}
.arch-lab .arch-pooh-walk-slow-pooh,.arch-lab .arch-pooh-walk-fast-pooh{stroke:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-slow-rabbit,.arch-lab .arch-pooh-walk-fast-rabbit{stroke:var(--arch-pw-rabbit)}
.arch-lab .arch-pooh-walk-mark{stroke-width:3;stroke-linecap:round}
.arch-lab .arch-pooh-walk-mark-pooh{stroke:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-mark-rabbit{stroke:var(--arch-pw-rabbit)}
.arch-lab svg text.arch-pooh-walk-ink-pooh{fill:var(--arch-pw-pooh)}
.arch-lab svg text.arch-pooh-walk-ink-rabbit{fill:var(--arch-pw-rabbit)}
.arch-lab svg text.arch-pooh-walk-ink{fill:var(--arch-ink)}
.arch-lab svg text.arch-pooh-walk-muted{fill:var(--arch-muted)}
.arch-lab svg text.arch-pooh-walk-halo{paint-order:stroke;stroke:var(--arch-surface);stroke-width:5px;stroke-linejoin:round}
.arch-lab .arch-pooh-walk-icon{stroke:var(--arch-fig-line);stroke-width:1.4}
.arch-lab .arch-pooh-walk-icon-pooh{fill:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-icon-rabbit{fill:var(--arch-pw-rabbit)}
.arch-lab .arch-pooh-walk-meet{stroke:var(--arch-ink);stroke-width:1.5;stroke-dasharray:5 4}
.arch-lab .arch-pooh-walk-dim{stroke:var(--arch-muted);stroke-width:1.2}
.arch-lab .arch-pooh-walk-arrhead{fill:none;stroke:var(--arch-muted);stroke-width:1.6;stroke-linejoin:round}
.arch-lab .arch-pooh-walk-count polyline{fill:none;stroke-width:1.6}
.arch-lab .arch-pooh-walk-count-pooh polyline{stroke:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-count-rabbit polyline{stroke:var(--arch-pw-rabbit)}
/* graph */
.arch-lab .arch-pooh-walk-axis{stroke:var(--arch-fig-line);stroke-width:1.5}
.arch-lab .arch-pooh-walk-grid{stroke:var(--arch-grid);stroke-width:1}
.arch-lab .arch-pooh-walk-guide{stroke-width:1.8;stroke-dasharray:5 4}
.arch-lab .arch-pooh-walk-guide-pooh{stroke:var(--arch-pw-pooh)}
.arch-lab .arch-pooh-walk-guide-rabbit{stroke:var(--arch-pw-rabbit)}
.arch-lab .arch-pooh-walk-guide-both{stroke:var(--arch-ink)}
.arch-lab .arch-pooh-walk-line{fill:none;stroke-linejoin:round;stroke-linecap:round}
.arch-lab .arch-pooh-walk-line-pooh{stroke:var(--arch-pw-pooh);stroke-width:7}
.arch-lab .arch-pooh-walk-line-rabbit{stroke:var(--arch-pw-rabbit);stroke-width:2.6}
.arch-lab .arch-pooh-walk-now{stroke:var(--arch-muted);stroke-width:1.2;stroke-dasharray:3 3}
.arch-lab .arch-pooh-walk-gap{stroke:var(--arch-ink);stroke-width:2.4}
.arch-lab .arch-pooh-walk-dot-pooh{fill:var(--arch-pw-pooh);stroke:var(--arch-surface);stroke-width:1.5}
.arch-lab .arch-pooh-walk-dot-rabbit{fill:var(--arch-pw-rabbit);stroke:var(--arch-surface);stroke-width:1.5}
/* readouts, result, table */
.arch-lab .arch-pooh-walk-readouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
@media (min-width:640px){.arch-lab .arch-pooh-walk-readouts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.arch-lab .arch-pooh-walk-readouts>div{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.arch-lab .arch-pooh-walk-readouts dt{display:flex;align-items:center;gap:4px}
.arch-lab .arch-pooh-walk-readouts dd{font-size:22px;line-height:1.2;font-weight:700}
.arch-lab .arch-pooh-walk-readouts dd .arch-pooh-walk-note{display:block;font-size:14px;font-weight:400;color:var(--arch-muted);white-space:normal}
.arch-lab .arch-pooh-walk-info{color:var(--arch-label);font-weight:600}
.arch-lab .arch-pooh-walk-segtext{color:var(--arch-ink)}
.arch-lab .arch-pooh-walk-gl{margin:4px 0 0;font-weight:600;color:var(--arch-label);font-size:15px}
.arch-lab .arch-pooh-walk-whatif-block .arch-toggle,.arch-lab .arch-pooh-walk-attempts .arch-actions{margin-bottom:2px}
.arch-lab table.arch-pooh-walk-table{width:100%;font-size:15px}
.arch-lab table.arch-pooh-walk-table th,.arch-lab table.arch-pooh-walk-table td{padding:6px 6px;white-space:nowrap}
.arch-lab table.arch-pooh-walk-table tbody th{font-weight:600}
.arch-lab table.arch-pooh-walk-table tr.arch-pooh-walk-hit th,.arch-lab table.arch-pooh-walk-table tr.arch-pooh-walk-hit td{background:var(--arch-ok-bg)}
.arch-lab .arch-pooh-walk-ok{color:var(--arch-good);font-weight:700}
.arch-lab .arch-pooh-walk-prompt{margin:0;padding:8px 12px;border-left:4px solid var(--arch-accent);border-radius:8px;background:var(--arch-surface);color:var(--arch-ink);font-size:15px}
@media (max-width:480px){.arch-lab .arch-pooh-walk-stage{padding:4px}.arch-lab .arch-pooh-walk-readouts dd{font-size:20px}.arch-lab table.arch-pooh-walk-table th,.arch-lab table.arch-pooh-walk-table td{padding:5px 4px;font-size:14px}}

/* 2026 2.1 «В турнире по теннису» — lab labs/referees.mjs («Кто судит матч»). Orange = the chosen match, blue = the
   matches of the shown referee (white number on the blue seat, contrast ≥ 5:1 in both themes); the rest goes through
   --arch-* variables. Layout: circle and bars side by side when the lab is wide; on phones one column in the order
   circle → bars, readouts and message → «Обход судей», so the result of a tap stays close to the circle. */
.arch-lab{--arch-referees-ref:#2563eb;--arch-referees-ref-line:#2563eb;--arch-referees-ref-soft:#dbeafe;--arch-referees-play:#ffedd5;--arch-referees-rim:#cbd5e1;--arch-referees-bar:#dbeafe;--arch-referees-flash:#fde68a}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-referees-ref-line:#60a5fa;--arch-referees-ref-soft:#1e3a5f;--arch-referees-play:#5a2a12;--arch-referees-rim:#4a5568;--arch-referees-bar:#1e3a5f;--arch-referees-flash:#6b5313}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-referees-ref-line:#60a5fa;--arch-referees-ref-soft:#1e3a5f;--arch-referees-play:#5a2a12;--arch-referees-rim:#4a5568;--arch-referees-bar:#1e3a5f;--arch-referees-flash:#6b5313}
.arch-lab .arch-referees-predict{border-top:0;padding-top:0}
.arch-lab .arch-referees-predict .arch-label{margin:0}
.arch-lab .arch-referees-wrap{container-type:inline-size;min-width:0}
.arch-lab .arch-referees-top{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "side" "tour";gap:14px;align-items:start}
.arch-lab .arch-referees-stage{grid-area:stage}
.arch-lab .arch-referees-side{grid-area:side;display:grid;gap:10px;min-width:0}
.arch-lab .arch-referees-tour{grid-area:tour}
@container (min-width:600px){.arch-lab .arch-referees-top{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"stage side" "tour side";grid-template-rows:auto 1fr}}
/* phones: the main line of the message under the circle (the full message is further down) */
.arch-lab .arch-referees-ringnote{margin:10px 0 2px;padding:8px 10px;border-radius:10px;background:var(--arch-clear);color:var(--arch-ink);font-size:15px;line-height:1.45;text-align:center}
.arch-lab .arch-referees-ringnote:empty{display:none}
.arch-lab .arch-referees-ringnote.arch-bad{background:var(--arch-bad-bg);color:var(--arch-bad)}
.arch-lab .arch-referees-ringnote.arch-good{background:var(--arch-ok-bg);color:var(--arch-good)}
.arch-lab .arch-referees-ringnote.arch-help{font-size:15px;color:var(--arch-ink)}
@container (min-width:600px){.arch-lab .arch-referees-ringnote{display:none}}
.arch-lab .arch-referees-chartbox{display:grid;gap:4px;padding:12px 12px 10px}
.arch-lab .arch-referees-chartbox .arch-label{margin:0}

/* circle of players */
.arch-lab .arch-referees-ring{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto}
.arch-lab .arch-stage svg.arch-referees-chords{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:visible;pointer-events:none}
.arch-lab .arch-referees-rim{stroke:var(--arch-referees-rim);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.arch-lab .arch-referees-match-chord{stroke:var(--arch-accent);stroke-width:5px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.arch-lab .arch-referees-ref-chord{stroke:var(--arch-referees-ref-line);stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.arch-lab .arch-referees-clash-chord{stroke:var(--arch-bad);stroke-width:5px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.arch-lab .arch-referees-clash-gaze{stroke:var(--arch-bad);stroke-width:2px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.arch-lab .arch-referees-player[data-clash=true]{box-shadow:0 0 0 4px var(--arch-bad)}
.arch-lab .arch-referees-gaze{stroke:var(--arch-referees-ref-line);stroke-width:1.5px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.85}
.arch-lab .arch-referees-player{position:absolute;z-index:1;transform:translate(-50%,-50%);width:clamp(44px,13%,52px);height:auto;aspect-ratio:1;min-width:44px;min-height:44px;padding:0;border-radius:50%;background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-field-line);font-size:18px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(15,23,42,.2)}
.arch-lab .arch-referees-player[data-playing=true]{background:var(--arch-referees-play);border:3px solid var(--arch-accent)}
.arch-lab .arch-referees-player[data-view=true]{background:var(--arch-referees-ref);border-color:var(--arch-referees-ref);color:#fff}
.arch-lab .arch-referees-player[data-view=true][data-playing=true]{border-color:var(--arch-accent)}
.arch-lab .arch-referees-legend{justify-content:center;margin-top:8px}
.arch-lab .arch-referees-ring[data-tour=true] .arch-referees-match-chord{opacity:.3}
.arch-lab .arch-referees-tour{display:grid;gap:6px;padding:10px 12px}
.arch-lab .arch-referees-tour .arch-label{margin:0}
.arch-lab .arch-referees-trow{margin-top:8px;justify-content:space-between}
.arch-lab .arch-referees-tnote{flex:1 1 14em}
.arch-lab .arch-referees-sw{display:inline-block;width:22px;height:0;border-top:5px solid var(--arch-accent);border-radius:3px;flex:none}
.arch-lab .arch-referees-sw-ref{border-top:3px solid var(--arch-referees-ref-line)}
.arch-lab .arch-referees-sw-clash{border-top:5px solid var(--arch-bad)}

/* bars: how many matches each player judges; the dashed line is the equal share */
.arch-lab .arch-referees-chart{--n:9;--t:0%;padding:22px 0 0 30px}
.arch-lab .arch-referees-plot{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;height:110px;border-bottom:1.5px solid var(--arch-field-line)}
.arch-lab .arch-referees-bcol{--h:0%;position:relative;min-width:0}
.arch-lab .arch-referees-bar{position:absolute;left:10%;right:10%;bottom:0;height:var(--h);background:var(--arch-referees-bar);border:1.5px solid var(--arch-referees-ref-line);border-bottom:0;border-radius:5px 5px 0 0}
.arch-lab .arch-referees-bcol[data-state=even] .arch-referees-bar{background:var(--arch-ok-bg);border-color:var(--arch-good)}
/* red only for «more than anyone needs»: above 4 for 9 players, above 5 for 10; with 10 players 4 and 5 ('near')
   are as close to 4,5 as whole numbers allow and keep the neutral blue */
.arch-lab .arch-referees-bcol[data-state=over] .arch-referees-bar{background:var(--arch-bad-bg);border-color:var(--arch-bad)}
.arch-lab .arch-referees-bcol[data-view=true] .arch-referees-bar{box-shadow:0 0 0 2px var(--arch-referees-ref-line)}
.arch-lab .arch-referees-bval{position:absolute;z-index:2;left:50%;bottom:calc(var(--h) + 2px);transform:translateX(-50%);padding:0 3px;border-radius:4px;background:var(--arch-surface);color:var(--arch-ink);font-weight:700;font-size:15px;line-height:18px;font-variant-numeric:tabular-nums}
.arch-lab .arch-referees-bcol[data-state=over] .arch-referees-bval{color:var(--arch-bad)}
.arch-lab .arch-referees-bcol[data-state=even] .arch-referees-bval{color:var(--arch-good)}
.arch-lab .arch-referees-target{position:absolute;z-index:1;left:-30px;right:0;bottom:var(--t);border-top:2px dashed var(--arch-ink);pointer-events:none}
.arch-lab .arch-referees-target span{position:absolute;left:0;bottom:3px;font-size:14px;font-weight:700;color:var(--arch-ink);line-height:1}
.arch-lab .arch-referees-blabels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;margin-top:4px;text-align:center;font-size:14px;color:var(--arch-muted);font-variant-numeric:tabular-nums}
.arch-lab .arch-referees-readouts{gap:4px 16px}
/* the 10-player conclusion is the answer to a), not a mistake of the student: neutral, not red */
.arch-lab .arch-referees-key{color:var(--arch-ink);font-weight:600}

/* tournament table */
.arch-lab .arch-referees-tframe{padding:6px}
.arch-lab .arch-referees-table{--cols:9;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));width:min(100%,calc(var(--cols) * 50px));margin:0 auto}
.arch-lab .arch-zoomed .arch-referees-table{width:calc(var(--cols) * 46px)}
.arch-lab .arch-referees-head{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:14px;font-weight:600;color:var(--arch-muted);font-variant-numeric:tabular-nums}
.arch-lab .arch-referees-void,.arch-lab .arch-referees-corner{aspect-ratio:1}
.arch-lab .arch-referees-diag{aspect-ratio:1;background:var(--arch-clear);border:1px solid var(--arch-grid)}
.arch-lab .arch-referees-cell{font-size:17px;font-weight:700;margin:0 -1px -1px 0}
/* the focus ring is drawn above the neighbouring cells, and stays inside the scroll frame's 4 px padding */
.arch-lab .arch-referees-cell:focus-visible{position:relative;z-index:3;outline-offset:1px}
/* «Крупные клетки»: the row numbers stay at the left edge while the board scrolls sideways; the left shadow covers
   the 4 px padding of the scroll frame, so no scrolled cell peeks out beside them */
.arch-lab .arch-zoomed .arch-referees-rowhead{position:sticky;left:0;z-index:2;background:var(--arch-surface);box-shadow:-4px 0 0 var(--arch-surface),1px 0 0 var(--arch-soft-line)}
/* a cell scrolled into view (keyboard focus, tap) stops right of the sticky numbers, not under them */
.arch-lab .arch-zoomed .arch-referees-tframe .arch-zoom-scroll{scroll-padding-left:52px}
.arch-lab .arch-referees-cell[data-view=true]{background:var(--arch-referees-ref-soft)}
.arch-lab .arch-referees-cell[aria-pressed=true]{background:var(--arch-referees-play);box-shadow:inset 0 0 0 3px var(--arch-accent)}
.arch-lab .arch-referees-cell[data-conflict=true]{background:var(--arch-bad-bg);box-shadow:inset 0 0 0 3px var(--arch-bad);color:var(--arch-bad)}
.arch-lab .arch-referees-cell[data-fresh=true]{animation:arch-referees-flash 1.1s ease-out}
@keyframes arch-referees-flash{from{background:var(--arch-referees-flash)}}
.arch-lab .arch-referees-tourout{min-height:1.5em}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-referees-cell[data-fresh=true]{animation:none}}

/* 2021 №6 — «Рассади 13 гостей» (labs/round-table.mjs). Colours only through --arch-* variables. The three kinds of
   guests have their own colours (blue — рыцарь, red — лжец, green — марсианин) with dark values, set with the same
   theme selectors as lab.css; the letter Р/Л/М is always shown, so the colour is never the only sign. */
.arch-lab{--arch-round-table-k-bg:#dbeafe;--arch-round-table-k-ink:#1e3a8a;--arch-round-table-k-line:#1d4ed8;
 --arch-round-table-l-bg:#ffe4e6;--arch-round-table-l-ink:#881337;--arch-round-table-l-line:#be123c;
 --arch-round-table-m-bg:#dcfce7;--arch-round-table-m-ink:#14532d;--arch-round-table-m-line:#15803d;
 --arch-round-table-l-soft:#ffe1e6;--arch-round-table-m-soft:#d6f5e0;--arch-round-table-wood:#f4ecdf;--arch-round-table-wood-line:#c9b48e}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-round-table-k-bg:#1e3a8a;--arch-round-table-k-ink:#eff6ff;--arch-round-table-k-line:#93c5fd;
 --arch-round-table-l-bg:#881337;--arch-round-table-l-ink:#fff1f2;--arch-round-table-l-line:#fda4af;
 --arch-round-table-m-bg:#14532d;--arch-round-table-m-ink:#f0fdf4;--arch-round-table-m-line:#86efac;
 --arch-round-table-l-soft:#4a2230;--arch-round-table-m-soft:#1f3d2b;--arch-round-table-wood:#34302a;--arch-round-table-wood-line:#7d6c52}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-round-table-k-bg:#1e3a8a;--arch-round-table-k-ink:#eff6ff;--arch-round-table-k-line:#93c5fd;
 --arch-round-table-l-bg:#881337;--arch-round-table-l-ink:#fff1f2;--arch-round-table-l-line:#fda4af;
 --arch-round-table-m-bg:#14532d;--arch-round-table-m-ink:#f0fdf4;--arch-round-table-m-line:#86efac;
 --arch-round-table-l-soft:#4a2230;--arch-round-table-m-soft:#1f3d2b;--arch-round-table-wood:#34302a;--arch-round-table-wood-line:#7d6c52}

/* the two parts measure their own width (container queries), so the layout follows the lab, not the window */
.arch-lab .arch-round-table-part{container:rt-part/inline-size}

/* kinds of guests: chips (palette, legend, grid heads), discs (two neighbours), seats (table) */
.arch-lab .arch-round-table-k{background:var(--arch-round-table-k-bg);color:var(--arch-round-table-k-ink);border-color:var(--arch-round-table-k-line)}
.arch-lab .arch-round-table-l{background:var(--arch-round-table-l-bg);color:var(--arch-round-table-l-ink);border-color:var(--arch-round-table-l-line)}
.arch-lab .arch-round-table-m{background:var(--arch-round-table-m-bg);color:var(--arch-round-table-m-ink);border-color:var(--arch-round-table-m-line)}
.arch-lab .arch-round-table-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:2px solid;font-weight:700;font-size:15px;line-height:1}
.arch-lab .arch-round-table-free{background:var(--arch-surface);border:2px dashed var(--arch-muted)}

/* 1. prediction */
.arch-lab .arch-round-table-card{display:grid;gap:8px;border:1px solid var(--arch-soft-line);border-radius:14px;padding:12px 14px;background:var(--arch-surface)}
.arch-lab .arch-round-table-card p{margin:0}
.arch-lab .arch-round-table-q{color:var(--arch-ink)}
.arch-lab .arch-round-table-predict-out{display:grid;gap:4px}
.arch-lab .arch-round-table-why{color:var(--arch-ink);line-height:1.5}

/* 2. two neighbours */
.arch-lab .arch-round-table-pairwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-round-table-pairleft,.arch-lab .arch-round-table-pairright{display:grid;gap:10px;align-content:start;min-width:0}
.arch-lab .arch-round-table-pairleft{container:rt-pair/inline-size}
/* «Проверить на паре» scrolls this block into view: keep it clear of the site's sticky header (about 50–60 px once the
   page is scrolled) and of the bottom task bar on phones (about 70 px) */
.arch-lab .arch-round-table-pairleft{scroll-margin-top:76px;scroll-margin-bottom:88px}
@container rt-part (min-width:600px){.arch-lab .arch-round-table-pairwrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.arch-lab .arch-round-table-duo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;background:var(--arch-surface);border:1px solid var(--arch-soft-line);border-radius:14px;padding:10px 8px}
.arch-lab .arch-round-table-duo .arch-round-table-guest{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px;padding:6px 4px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--arch-ink);line-height:1.2}
@media (hover:hover){.arch-lab .arch-round-table-duo .arch-round-table-guest:hover{border-color:var(--arch-field-line)}}
.arch-lab .arch-round-table-who{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-round-table-disc{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:3px solid;font-size:26px;font-weight:700}
.arch-lab .arch-round-table-word{font-size:15px;font-weight:600;color:var(--arch-ink)}
.arch-lab .arch-round-table-talk{display:grid;gap:8px;width:100%;min-width:0}
.arch-lab .arch-round-table-talkrow{display:grid;justify-items:center;gap:0;min-width:0}
.arch-lab .arch-round-table-dir{font-size:14px;font-weight:600;line-height:1.3;color:var(--arch-ink);white-space:nowrap}
.arch-lab .arch-round-table-arrow{display:block;width:100%;max-width:200px;height:auto}
/* narrow: the two guests side by side, the two arrows on a full row under them */
@container rt-pair (max-width:379px){
 .arch-lab .arch-round-table-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px}
 .arch-lab .arch-round-table-duo .arch-round-table-guest{min-width:0}
 .arch-lab .arch-round-table-guest-a{grid-column:1;grid-row:1}
 .arch-lab .arch-round-table-guest-b{grid-column:2;grid-row:1}
 .arch-lab .arch-round-table-talk{grid-column:1/-1;grid-row:2;padding:0 6px}
}
.arch-lab .arch-round-table-gridtitle{margin:0;font-weight:600;color:var(--arch-label)}
.arch-lab .arch-round-table-axes{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--arch-muted)}
.arch-lab .arch-round-table-corner{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;line-height:1;color:var(--arch-muted);white-space:nowrap}
.arch-lab .arch-round-table-grid{display:grid;grid-template-columns:34px repeat(3,52px);gap:6px;justify-content:start;align-items:center}
.arch-lab .arch-round-table-head{display:flex;justify-content:center}
.arch-lab .arch-round-table-grid .arch-round-table-cell{min-width:52px;width:52px;height:48px;padding:0;border-radius:12px;border:1px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-muted);font-size:20px;font-weight:700}
.arch-lab .arch-round-table-grid .arch-round-table-yes{background:var(--arch-ok-bg);border-color:var(--arch-good);color:var(--arch-good)}
.arch-lab .arch-round-table-grid .arch-round-table-no{background:var(--arch-bad-bg);border-color:var(--arch-bad);color:var(--arch-bad)}
.arch-lab .arch-round-table-grid .arch-round-table-cell[aria-pressed=true]{box-shadow:0 0 0 2px var(--arch-surface),0 0 0 4px var(--arch-fig-line)}

/* 3. the whole table */
.arch-lab .arch-round-table-palette button{padding:6px 14px 6px 7px}
.arch-lab .arch-round-table-pick{display:inline-flex;align-items:center;gap:7px}
.arch-lab .arch-round-table-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.arch-lab .arch-round-table-left,.arch-lab .arch-round-table-right{display:grid;gap:10px;align-content:start;min-width:0}
/* the table is the centrepiece: full width (up to 460 px) with the counts and the report under it; side by side only
   when the part is wide enough for both a large table and a readable report */
@container rt-part (min-width:760px){.arch-lab .arch-round-table-main{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}
.arch-lab .arch-round-table-stage{padding:8px}
.arch-lab .arch-round-table-board{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto;container-type:inline-size}
.arch-lab .arch-round-table-board svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block;pointer-events:none}
.arch-lab .arch-round-table-num{position:absolute;transform:translate(-50%,-50%);font-size:clamp(14px,3.6cqw,16px);font-weight:600;line-height:1;color:var(--arch-ink);font-variant-numeric:tabular-nums;pointer-events:none}
.arch-lab .arch-round-table-labels{position:absolute;inset:0;pointer-events:none}
.arch-lab .arch-round-table-linklabel{position:absolute;transform:translate(-50%,-50%);font-size:clamp(14px,4cqw,18px);font-weight:700;line-height:1;color:var(--arch-ink);white-space:nowrap;letter-spacing:.02em}
.arch-lab .arch-round-table-labels-small .arch-round-table-linklabel{font-size:12px;letter-spacing:0}
.arch-lab .arch-round-table-board .arch-round-table-seat{position:absolute;transform:translate(-50%,-50%);width:clamp(44px,14.5cqw,64px);height:clamp(44px,14.5cqw,64px);min-width:0;min-height:0;padding:0;margin:0;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;line-height:1;-webkit-tap-highlight-color:transparent}
/* an empty seat is still a target: its dashed outline uses the muted-text colour (≥ 4.5 : 1 on the stage) */
.arch-lab .arch-round-table-board .arch-round-table-empty{background:var(--arch-surface);border:2px dashed var(--arch-muted);color:var(--arch-ink)}
@media (hover:hover){.arch-lab .arch-round-table-board .arch-round-table-empty:hover{border-color:var(--arch-pressed-line);border-style:solid}}
.arch-lab .arch-round-table-letter{font-size:clamp(19px,5.6cqw,27px);font-weight:700}
.arch-lab .arch-round-table-board .arch-round-table-conflict{border:3px dashed var(--arch-bad)}
.arch-lab .arch-round-table-board .arch-round-table-last{box-shadow:0 0 0 3px var(--arch-surface),0 0 0 5px var(--arch-fig-line)}
.arch-lab .arch-round-table-board .arch-round-table-seat:focus-visible{outline:3px solid var(--arch-focus);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.arch-lab .arch-round-table-board .arch-round-table-seat{transition:background-color .15s,border-color .15s,box-shadow .15s}}
.arch-lab .arch-round-table-readouts{gap:6px 16px}
@media (max-width:480px){.arch-lab .arch-round-table-keys{display:none}}

/* found seatings */
.arch-lab .arch-round-table-found{display:grid;gap:8px;border-top:1px solid var(--arch-soft-line);padding-top:12px}
.arch-lab .arch-round-table-found p{margin:0}
.arch-lab .arch-round-table-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.arch-lab .arch-round-table-rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 6px 6px 12px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);color:var(--arch-ink)}
.arch-lab .arch-round-table-rows li.arch-round-table-row-yes{border-color:var(--arch-good);background:var(--arch-ok-bg)}
.arch-lab .arch-round-table-rowtext{flex:1 1 200px;min-width:0}
.arch-lab .arch-round-table-no-text{color:var(--arch-muted)}
.arch-lab .arch-round-table-note{display:block;color:var(--arch-ink);font-size:14px;font-style:italic}
.arch-lab .arch-round-table-verdict{display:block;font-size:15px}
.arch-lab .arch-round-table-others{display:grid;gap:6px}
.arch-lab .arch-round-table-others>summary{min-height:44px;box-sizing:border-box;padding:10px 4px;cursor:pointer;color:var(--arch-link);font-weight:600;line-height:1.4}
.arch-lab .arch-round-table-others>summary:focus-visible{outline:3px solid var(--arch-focus);outline-offset:2px;border-radius:8px}
.arch-lab .arch-round-table-answers{font-weight:600;color:var(--arch-ink)}
.arch-lab .arch-round-table-example,.arch-lab .arch-round-table-restart{display:grid;gap:8px}
.arch-lab .arch-round-table-example p,.arch-lab .arch-round-table-restart p{margin:0}
.arch-lab .arch-round-table-restart{border-top:1px solid var(--arch-soft-line);padding-top:12px}

/* 2026 2.5 «Компьютерная игра» — lab labs/signs-11.mjs. The expression is a grid of units «sign + number»:
   12 units in rows of 6 (wide), 4 (phones) or 3 (the narrowest phones; every column at least 78 px in every mode),
   so every move target stays at least 44 × 44 px without sideways scrolling and nothing overlaps.
   Plus and minus differ by glyph and colour; all colours go through --arch-* variables (both themes). */
.arch-lab{--arch-signs-11-plus:var(--arch-link);--arch-signs-11-minus-bg:#ffedd5;--arch-signs-11-minus-line:#c2410c;--arch-signs-11-minus-ink:#9a3412;--arch-signs-11-done:#f0fdf4;--arch-signs-11-current:#e6eefb;--arch-signs-11-halo:#fde68a}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab{--arch-signs-11-minus-bg:#4a2611;--arch-signs-11-minus-line:#fb923c;--arch-signs-11-minus-ink:#fed7aa;--arch-signs-11-done:#15291d;--arch-signs-11-current:var(--accent-soft);--arch-signs-11-halo:#a16207}}
:root[data-design="v2"][data-theme="dark"] .arch-lab{--arch-signs-11-minus-bg:#4a2611;--arch-signs-11-minus-line:#fb923c;--arch-signs-11-minus-ink:#fed7aa;--arch-signs-11-done:#15291d;--arch-signs-11-current:var(--accent-soft);--arch-signs-11-halo:#a16207}
.arch-lab .arch-signs-11-predict{border-top:0;padding-top:0}
.arch-lab .arch-signs-11-predict .arch-label,.arch-lab .arch-signs-11-sweep .arch-label,.arch-lab .arch-signs-11-allbox .arch-label{margin:0}
.arch-lab .arch-signs-11-stage{padding:8px 4px 4px;transition:border-color .3s,box-shadow .3s}
.arch-lab .arch-signs-11-stage.arch-signs-11-ok{border-color:var(--arch-good);box-shadow:0 0 0 1px var(--arch-good) inset}
.arch-lab .arch-signs-11-board{--cols:4;--sg:22px;--nb:44px;--fs:20px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));row-gap:8px;max-width:calc(var(--cols) * 96px);margin:0 auto}
.arch-lab .arch-signs-11-board[data-size="lg"]{--sg:28px;--nb:50px;--fs:22px;row-gap:10px}
.arch-lab .arch-signs-11-unit{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;border-radius:14px;transition:background-color .25s}
.arch-lab .arch-signs-11-sign,.arch-lab .arch-signs-11-nosign{flex:none;width:var(--sg);height:var(--sg)}
.arch-lab .arch-signs-11-sign{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-signs-11-plus);font-weight:700;font-size:calc(var(--sg) * .8);line-height:1;font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-sign[data-s="-"]{background:var(--arch-signs-11-minus-bg);border-color:var(--arch-signs-11-minus-line);color:var(--arch-signs-11-minus-ink)}
.arch-lab .arch-signs-11-num{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:var(--nb);width:var(--nb);height:var(--nb);min-height:0;padding:0;border-radius:12px;border:1.5px solid var(--arch-field-line);background:var(--arch-surface);color:var(--arch-ink);font-weight:700;font-size:var(--fs);line-height:1;font-variant-numeric:tabular-nums}
.arch-lab button.arch-signs-11-num{box-shadow:0 1px 2px rgba(15,23,42,.12)}
.arch-lab button.arch-signs-11-num:hover{border-color:var(--arch-pressed-line)}
.arch-lab .arch-signs-11-fixed{border-color:transparent;background:none}
/* own start: the signs are the buttons, the numbers only labels */
.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-sign,.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-nosign{width:44px;height:44px}
.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-sign{min-width:44px;min-height:44px;padding:0;border-radius:50%;border-width:2px;font-size:24px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.12)}
.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-unit{gap:2px}
.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-num{min-width:0;width:auto;padding:0 1px;font-size:calc(var(--fs) - 2px)}
.arch-lab .arch-signs-11-board[data-mode="edit"] .arch-signs-11-nosign{width:0}
.arch-lab .arch-signs-11-num.arch-signs-11-moved{box-shadow:0 0 0 3px var(--arch-accent)}
/* the two signs changed by the last move (as the yellow halos in figure 2026-8-move) */
.arch-lab .arch-signs-11-sign.arch-signs-11-flip{box-shadow:0 0 0 4px var(--arch-signs-11-halo)}
.arch-lab .arch-signs-11-mis{outline:2px dashed var(--arch-bad);outline-offset:2px}
.arch-lab .arch-signs-11-checked{background:var(--arch-signs-11-done)}
.arch-lab .arch-signs-11-current{background:var(--arch-signs-11-current);box-shadow:inset 0 0 0 1.5px var(--arch-pressed-line)}
.arch-lab .arch-signs-11-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 12px;margin:6px 0 2px;color:var(--arch-ink)}
.arch-lab .arch-signs-11-eq{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-badge{font-size:15px;color:var(--arch-muted)}
.arch-lab .arch-signs-11-badge.arch-good{color:var(--arch-good)}
.arch-lab .arch-signs-11-formula,.arch-lab .arch-signs-11-log{font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-log,.arch-lab .arch-signs-11-aside{color:var(--arch-muted);font-size:15px}
.arch-lab .arch-signs-11-goal{margin:0;font-weight:600;color:var(--arch-label);font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-trackwrap{display:grid;gap:6px}
.arch-lab .arch-signs-11-track{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;max-width:360px;margin:0;padding:0;list-style:none}
.arch-lab .arch-signs-11-track li{display:grid;justify-items:center;align-content:center;gap:1px;min-width:0;height:46px;border-radius:8px;border:1px solid var(--arch-soft-line);color:var(--arch-muted);font-size:14px;font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-track .arch-signs-11-tm{font-weight:700;font-size:15px;min-height:18px}
.arch-lab .arch-signs-11-track .arch-signs-11-tok{color:var(--arch-good);border-color:var(--arch-good)}
.arch-lab .arch-signs-11-track .arch-signs-11-tmove{color:var(--arch-accent);border-color:var(--arch-accent)}
.arch-lab .arch-signs-11-track .arch-signs-11-tnext{color:var(--arch-ink);border:2px solid var(--arch-pressed-line);background:var(--arch-signs-11-current)}
.arch-lab .arch-signs-11-all p{margin:6px 0}
.arch-lab .arch-signs-11-typed input[type=text]{flex:1 1 12em;width:12em;max-width:100%;letter-spacing:.06em}
@media (prefers-reduced-motion: reduce){.arch-lab .arch-signs-11-stage,.arch-lab .arch-signs-11-unit{transition:none}}
.arch-lab .arch-signs-11-controls{display:grid;gap:8px}
.arch-lab .arch-readouts dd.arch-bad{color:var(--arch-bad)}
.arch-lab .arch-signs-11-last{margin:4px 0 2px;text-align:center;font-size:14px;line-height:1.4;color:var(--arch-ink);font-variant-numeric:tabular-nums}
.arch-lab .arch-signs-11-last span{display:block}
.arch-lab .arch-signs-11-last .arch-signs-11-last-head{color:var(--arch-muted)}

/* 2021 4 — cut the square into four equal parts (labs/square-cut.mjs). The cells are buttons; an SVG on top of them
   (pointer-events: none) draws the grid and the cut. Stage 3 has its own SVG copy of the cut that turns. The small
   part shapes have their own colours: dark on the light fills, light on the dark fills of the dark theme. */
.arch-lab .arch-square-cut{--arch-square-cut-mark-a:#1d4ed8;--arch-square-cut-mark-b:#a14a07;--arch-square-cut-mark-c:#9f1239;--arch-square-cut-mark-d:#166534}
@media (prefers-color-scheme: dark){:root[data-design="v2"]:not([data-theme="light"]) .arch-lab .arch-square-cut{--arch-square-cut-mark-a:#bfdbfe;--arch-square-cut-mark-b:#fde047;--arch-square-cut-mark-c:#fecdd3;--arch-square-cut-mark-d:#bbf7d0}}
:root[data-design="v2"][data-theme="dark"] .arch-lab .arch-square-cut{--arch-square-cut-mark-a:#bfdbfe;--arch-square-cut-mark-b:#fde047;--arch-square-cut-mark-c:#fecdd3;--arch-square-cut-mark-d:#bbf7d0}
.arch-lab .arch-square-cut [hidden]{display:none!important}
.arch-lab .arch-square-cut-field{display:inline-flex;align-items:center;gap:8px}
.arch-lab input.arch-square-cut-num{width:72px;height:48px;min-height:44px;padding:4px 8px;text-align:center;font-variant-numeric:tabular-nums}
.arch-lab .arch-square-cut-brushes button{display:inline-flex;align-items:center;gap:8px}
.arch-lab .arch-square-cut-swatch{flex:0 0 auto;width:20px;height:20px}
/* the board */
.arch-lab .arch-square-cut-stage{padding:10px}
.arch-lab .arch-square-cut-board{position:relative;width:min(100%,384px);aspect-ratio:1;margin:auto;container-type:inline-size}
.arch-lab .arch-zoomed .arch-square-cut-board{width:288px;max-width:none}
.arch-lab .arch-square-cut-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.arch-lab .arch-stage .arch-square-cut-lines{position:absolute;inset:0;width:100%;height:100%;max-height:none;pointer-events:none;overflow:visible}
.arch-lab .arch-square-cut-cell{position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:var(--arch-surface);color:var(--arch-ink);font-size:clamp(18px,6.2cqi,26px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;outline-offset:-5px}
.arch-lab .arch-square-cut-cell:focus-visible{outline:4px solid var(--arch-focus);outline-offset:-6px;z-index:1}
.arch-lab .arch-square-cut-cell.arch-square-cut-next::after{content:'';position:absolute;inset:12%;border:3px dashed var(--arch-accent);border-radius:8px;pointer-events:none}
.arch-lab .arch-square-cut-n{position:relative}
.arch-lab .arch-stage .arch-square-cut-glyph{position:absolute;left:8%;top:8%;width:20%;height:20%;max-height:none}
/* the four letter sits clear of the thick cut lines on the right and bottom sides of the cell */
.arch-lab .arch-square-cut-four{position:absolute;right:12%;bottom:9%;font-size:clamp(12px,3.4cqi,15px);line-height:1.15;font-weight:600;color:var(--arch-ink);display:none}
.arch-lab .arch-square-cut-show-fours .arch-square-cut-four{display:block}
/* a four that repeats inside one part: the letter becomes a red badge (not colour alone: a filled pill) */
.arch-lab .arch-square-cut-rep .arch-square-cut-four{right:4%;bottom:4%;background:var(--arch-bad);color:var(--arch-surface);border-radius:999px;padding:0 3px;font-weight:700}
/* the live line under the board */
.arch-lab .arch-square-cut-say{display:grid;gap:2px;min-height:1.5em;line-height:1.45;overflow-wrap:anywhere}
.arch-lab .arch-square-cut-say>span{display:block}
.arch-lab .arch-square-cut-note{font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-square-cut-progress{font-weight:600;color:var(--arch-ink)}
/* board and details side by side when the lab is wide enough */
.arch-lab .arch-square-cut-try{container-type:inline-size}
.arch-lab .arch-square-cut-work{display:grid;gap:14px;min-width:0}
.arch-lab .arch-square-cut-work>*{min-width:0}
.arch-lab .arch-square-cut-left{display:grid;gap:10px;align-content:start}
@container (min-width:640px){.arch-lab .arch-square-cut-work{grid-template-columns:minmax(0,404px) minmax(0,1fr);align-items:start}}
.arch-lab .arch-square-cut-parts{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:8px}
.arch-lab .arch-square-cut-parts li{display:flex;gap:8px;align-items:flex-start}
.arch-lab .arch-square-cut-parts .arch-square-cut-swatch{margin-top:2px}
.arch-lab .arch-square-cut-rel{display:block;font-size:14px;color:var(--arch-muted)}
.arch-lab .arch-square-cut-soft{color:var(--arch-muted)}
/* stage 3: the copy of the cut next to the play button and the slider. Wide: the controls sit at the bottom of the
   right column, level with the bottom of the picture, so the whole picture is on screen whenever the controls are. */
.arch-lab .arch-square-cut-turn{container-type:inline-size}
.arch-lab .arch-square-cut-turnwork{display:grid;gap:10px;min-width:0}
.arch-lab .arch-square-cut-turnwork>*{min-width:0}
.arch-lab .arch-square-cut-turnstage{box-sizing:border-box;width:min(100%,340px);margin:0 auto;padding:8px}
.arch-lab .arch-stage .arch-square-cut-turnview{max-height:none}
.arch-lab .arch-square-cut-turnview text{font-variant-numeric:tabular-nums}
@container (min-width:600px){
 .arch-lab .arch-square-cut-ready{grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-areas:"stage help" "stage out" "stage time";grid-template-rows:auto 1fr auto;column-gap:18px;align-items:start}
 .arch-lab .arch-square-cut-ready .arch-square-cut-turnstage{grid-area:stage;width:100%;margin:0}
 .arch-lab .arch-square-cut-ready .arch-square-cut-turnhelp{grid-area:help}
 .arch-lab .arch-square-cut-ready .arch-square-cut-time{grid-area:time;align-self:end;padding-bottom:8px}
 .arch-lab .arch-square-cut-ready .arch-square-cut-turnout{grid-area:out}
}
/* the turned cut: dashed while it moves; at 90° green where it lies on the cut, red where it does not */
.arch-lab .arch-square-cut-turned line{stroke:var(--arch-accent);stroke-dasharray:22 16}
.arch-lab .arch-square-cut-done .arch-square-cut-hit{stroke:var(--arch-good);stroke-dasharray:none}
.arch-lab .arch-square-cut-done .arch-square-cut-miss{stroke:var(--arch-bad);stroke-dasharray:none}
.arch-lab .arch-square-cut-deg{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums;color:var(--arch-ink)}
.arch-lab .arch-square-cut-turn .arch-result:empty{display:none}

/* Popov Academy — content-factory/archimedes-winter-2021-2022-2026-v1
   2026 problem 1.3 «Часы в поезде» (train-clock): route strip, timeline with the window of the next stop,
   LED displays «было / стало», digit tiles and the full search. Theme colours only through --arch-*.
   The carriage display is an object with its own colours in both themes: dark glass with amber digits;
   a digit that stayed in its place is drawn on green glass with light text (contrast checked in both themes). */
.arch-lab .arch-train-clock{--arch-train-clock-led-bg:#111827;--arch-train-clock-led-ink:#fbbf24;--arch-train-clock-led-off:#4b5563;--arch-train-clock-same-bg:#047857;--arch-train-clock-same-ink:#ecfdf5;display:grid;gap:18px;min-width:0}
.arch-lab .arch-train-clock [hidden]{display:none!important}
.arch-lab .arch-train-clock p{margin:0}
.arch-lab .arch-train-clock-section{display:grid;gap:12px;min-width:0}
.arch-lab .arch-train-clock-section+.arch-train-clock-section{border-top:1px solid var(--arch-soft-line);padding-top:16px}

/* route strip: four stations */
.arch-lab .arch-train-clock-route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:none}
.arch-lab .arch-train-clock-station{display:grid;gap:2px;align-content:start;justify-items:center;text-align:center;padding:8px 4px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);color:var(--arch-ink);min-width:0;transition:box-shadow .2s,border-color .2s}
.arch-lab .arch-train-clock-stname{font-size:14px;font-weight:600;color:var(--arch-label);overflow-wrap:anywhere}
.arch-lab .arch-train-clock-sttime{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.arch-lab .arch-train-clock-stgap{font-size:14px;color:var(--arch-muted);font-variant-numeric:tabular-nums}
.arch-lab .arch-train-clock-stday{font-size:14px;font-weight:600;color:var(--arch-accent)}
.arch-lab .arch-train-clock-pending .arch-train-clock-sttime{color:var(--arch-muted)}
.arch-lab .arch-train-clock-next{border:2px dashed var(--arch-pressed-line);padding:7px 3px}
.arch-lab .arch-train-clock-here{border-color:var(--arch-good);box-shadow:0 0 0 2px var(--arch-good)}

/* timeline: 10:00 → 08:00 next day */
.arch-lab .arch-train-clock-line{padding:0 24px;min-width:0}
.arch-lab .arch-train-clock-track{position:relative;height:74px}
.arch-lab .arch-train-clock-axis{position:absolute;left:0;right:0;top:52px;height:2px;background:var(--arch-fig-line)}
.arch-lab .arch-train-clock-tick{position:absolute;top:47px;width:1px;height:12px;background:var(--arch-field-line);transform:translateX(-50%)}
.arch-lab .arch-train-clock-window{position:absolute;top:24px;height:44px;background:var(--arch-fill);border:1px dashed var(--arch-pressed-line);border-radius:6px;box-sizing:border-box;transition:left .35s,width .35s}
.arch-lab .arch-train-clock-midnight{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--arch-accent)}
.arch-lab .arch-train-clock-midnight span{position:absolute;top:0;left:4px;font-size:14px;font-weight:600;color:var(--arch-accent);white-space:nowrap;line-height:1.2}
.arch-lab .arch-train-clock-dots{position:absolute;inset:0}
.arch-lab .arch-train-clock-dot{position:absolute;top:44px;width:3px;height:18px;border-radius:2px;background:var(--arch-muted);transform:translateX(-50%)}
.arch-lab .arch-train-clock-dot-in{background:var(--arch-pressed-line);width:4px;top:38px;height:30px}
.arch-lab .arch-train-clock-marker{position:absolute;top:41px;width:24px;height:24px;margin-left:-12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;background:var(--arch-primary-bg);color:var(--arch-primary-ink);box-shadow:0 0 0 2px var(--arch-surface)}
.arch-lab .arch-train-clock-marker-start{background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-fig-line);box-sizing:border-box}
.arch-lab .arch-train-clock-ghost{position:absolute;top:41px;width:24px;height:24px;margin-left:-12px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--arch-surface);color:var(--arch-bad);border:2px dashed var(--arch-bad)}
.arch-lab .arch-train-clock-ghostlabel{position:absolute;top:18px;transform:translateX(-50%);padding:0 3px;border-radius:4px;background:var(--arch-surface);font-size:14px;font-weight:700;line-height:1.3;color:var(--arch-bad);font-variant-numeric:tabular-nums;white-space:nowrap}
.arch-lab .arch-train-clock-ghost-ok{color:var(--arch-good);border-color:var(--arch-good)}
/* only the time fits: neutral, never green (the stop is still refused) */
.arch-lab .arch-train-clock-ghost-time{color:var(--arch-ink);border-color:var(--arch-muted)}
/* later than the end of the axis: the mark stands at the right end, its label ends there */
.arch-lab .arch-train-clock-ghostlabel.arch-train-clock-ghost-beyond{transform:translateX(calc(-100% + 12px))}
.arch-lab .arch-train-clock-ghostline{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--arch-ink)}
.arch-lab .arch-train-clock-ghostkey{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;background:var(--arch-surface);color:var(--arch-bad);border:2px dashed var(--arch-bad)}
.arch-lab .arch-train-clock-ghostkey.arch-train-clock-ghost-ok{color:var(--arch-good);border-color:var(--arch-good)}
.arch-lab .arch-train-clock-ghostkey.arch-train-clock-ghost-time{color:var(--arch-ink);border-color:var(--arch-muted)}
.arch-lab .arch-train-clock-train{position:absolute;top:20px;width:34px;height:18px;margin-left:-17px;line-height:0;pointer-events:none}
.arch-lab .arch-train-clock-trainbody{fill:var(--arch-accent)}
.arch-lab .arch-train-clock-trainwin{fill:var(--arch-surface)}
.arch-lab .arch-train-clock-trainwheel{fill:var(--arch-fig-line)}
.arch-lab .arch-train-clock-hours{position:relative;height:20px}
.arch-lab .arch-train-clock-hour{position:absolute;top:0;transform:translateX(-50%);font-size:14px;color:var(--arch-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.arch-lab .arch-train-clock-hour-midnight{color:var(--arch-accent);font-weight:600}
.arch-lab .arch-train-clock-windowline{font-size:15px;color:var(--arch-ink);line-height:1.5}
.arch-lab .arch-train-clock-trip{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);min-width:0}
.arch-lab .arch-train-clock-rangelabel{font-size:15px}
.arch-lab .arch-train-clock-readouts{align-items:center}
.arch-lab .arch-train-clock-readouts dd{white-space:nowrap}
.arch-lab .arch-train-clock-clockled{display:inline-grid;grid-template-columns:repeat(2,20px) 8px repeat(2,20px);gap:2px;padding:3px 6px;border-radius:6px;background:var(--arch-train-clock-led-bg);vertical-align:middle}
.arch-lab .arch-train-clock-clockled .arch-train-clock-led{height:26px;font-size:20px;border-radius:3px}

/* LED displays */
.arch-lab .arch-train-clock-board{--cell:52px;--colon:16px;display:grid;justify-content:center;gap:4px;padding:14px 12px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface)}
.arch-lab .arch-train-clock-disprow{display:grid;justify-items:center;gap:6px}
.arch-lab .arch-train-clock-displabel{font-size:14px;font-weight:600;color:var(--arch-label);text-align:center}
.arch-lab .arch-train-clock-display,.arch-lab .arch-train-clock-marks{display:grid;grid-template-columns:repeat(2,var(--cell)) var(--colon) repeat(2,var(--cell));gap:6px;justify-content:center}
.arch-lab .arch-train-clock-display{padding:8px 10px;border-radius:12px;background:var(--arch-train-clock-led-bg);border:1px solid var(--arch-field-line);transition:box-shadow .25s}
.arch-lab .arch-train-clock-display.arch-train-clock-good{box-shadow:0 0 0 3px var(--arch-good)}
.arch-lab .arch-train-clock-led{display:flex;align-items:center;justify-content:center;height:64px;border-radius:6px;font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--arch-train-clock-led-ink);background:rgba(255,255,255,.04);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.arch-lab .arch-train-clock-led-empty{border:2px dashed var(--arch-train-clock-led-off);background:none}
.arch-lab .arch-train-clock-led-next{border-color:var(--arch-train-clock-led-ink)}
.arch-lab .arch-train-clock-led-same{background:var(--arch-train-clock-same-bg);color:var(--arch-train-clock-same-ink)}
.arch-lab .arch-train-clock-colon{display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:var(--arch-train-clock-led-ink)}
.arch-lab .arch-train-clock-marks{padding:0 11px;height:30px;align-items:center}
.arch-lab .arch-train-clock-mark{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;color:var(--arch-muted)}
.arch-lab .arch-train-clock-mark-same{color:var(--arch-good)}
.arch-lab .arch-train-clock-composer{display:grid;gap:12px;min-width:0}
.arch-lab .arch-train-clock-controls{display:grid;gap:12px;min-width:0}
.arch-lab .arch-train-clock-tiles{display:grid;grid-template-columns:repeat(4,minmax(44px,64px));gap:10px;justify-content:center}
.arch-lab button.arch-train-clock-tile{height:58px;padding:0;border-radius:14px;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--arch-surface);color:var(--arch-ink);border:2px solid var(--arch-field-line);box-shadow:0 3px 0 var(--arch-soft-line)}
.arch-lab button.arch-train-clock-tile[aria-disabled=true]{box-shadow:none}
.arch-lab .arch-train-clock .arch-result .arch-train-clock-skip::before{content:'–';color:var(--arch-muted);font-weight:700;flex-shrink:0;width:1.2em}
.arch-lab .arch-train-clock-routeline{font-weight:600;font-variant-numeric:tabular-nums}

/* found routes and the full search */
.arch-lab .arch-train-clock-found{display:grid;gap:8px}
.arch-lab .arch-train-clock-tree{display:grid;gap:14px}
.arch-lab .arch-train-clock-level{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--arch-soft-line);border-radius:12px;background:var(--arch-surface);color:var(--arch-ink)}
.arch-lab .arch-train-clock-leveltitle{line-height:1.5}
.arch-lab .arch-train-clock-cands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.arch-lab .arch-train-clock-cand{display:grid;gap:4px;justify-items:center;padding:6px;border:1px solid var(--arch-soft-line);border-radius:10px}
.arch-lab .arch-train-clock-cand-ok{border:2px solid var(--arch-good);padding:5px}
.arch-lab .arch-train-clock-mini{display:grid;grid-template-columns:repeat(2,24px) 8px repeat(2,24px);gap:3px;padding:4px 6px;border-radius:8px;background:var(--arch-train-clock-led-bg)}
.arch-lab .arch-train-clock-mini .arch-train-clock-led{height:30px;font-size:20px;border-radius:4px}
.arch-lab .arch-train-clock-mini .arch-train-clock-colon,.arch-lab .arch-train-clock-clockled .arch-train-clock-colon{font-size:18px}
.arch-lab .arch-train-clock-candtext{font-size:14px;color:var(--arch-ink);font-variant-numeric:tabular-nums}

/* phones */
@media (max-width:560px){
 .arch-lab .arch-train-clock-route{grid-template-columns:repeat(2,minmax(0,1fr))}
 .arch-lab .arch-train-clock-board{--cell:44px;--colon:12px;padding:12px 6px}
 .arch-lab .arch-train-clock-led{height:56px;font-size:34px}
 .arch-lab .arch-train-clock-display{padding:6px 8px}
 .arch-lab .arch-train-clock-marks{padding:0 9px}
 .arch-lab .arch-train-clock-trip{padding:10px}
 .arch-lab .arch-train-clock-level{padding:12px 10px}
 .arch-lab .arch-train-clock-cands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .arch-lab .arch-train-clock-mini{grid-template-columns:repeat(2,20px) 8px repeat(2,20px)}
 .arch-lab .arch-train-clock-mini .arch-train-clock-led{font-size:17px;height:28px}
}
/* phones: hour labels every 4 h; narrow phones: every 6 h (12:00, 18:00, 00:00, 06:00) */
@media (max-width:560px) and (min-width:361px){.arch-lab .arch-train-clock-hour:not(.arch-train-clock-hour-four){display:none}}
@media (max-width:360px){.arch-lab .arch-train-clock-hour:not(.arch-train-clock-hour-six){display:none}}
@media (prefers-reduced-motion:reduce){.arch-lab .arch-train-clock-window,.arch-lab .arch-train-clock-station,.arch-lab .arch-train-clock-display{transition:none}}