:root {
                --u-bg: #0A0A0A; --u-bg-alt: #0D0D0D; --u-card: #121212; --u-card2: #151515;
                --u-surface: #171717; --u-field: #0D0D0D; --u-foot: #070707;
                --u-text: #FAFAFA; --u-t2: #D4D4D4; --u-t3: #A1A1A1; --u-t4: #858585;
                --u-t5: #6E6E6E; --u-t6: #5C5C5C;
                --u-border: rgba(255,255,255,0.08); --u-hairline: rgba(255,255,255,0.05);
                --u-border2: rgba(255,255,255,0.13); --u-border3: rgba(255,255,255,0.2);
                --u-border4: rgba(255,255,255,0.4);
                --u-tint: rgba(255,255,255,0.04); --u-tint2: rgba(255,255,255,0.03);
                --u-tint3: rgba(255,255,255,0.07);
                --u-inv-bg: #FAFAFA; --u-inv-fg: #0A0A0A; --u-track: #1F1F1F;
                /* Lilac rather than violet on the dark board: the old #7C5CFF read
                   4.31 : 1 against a card, under the 4.5 that small text needs.
                   This one measures 8.71 : 1 and is still recognisably the brand hue. */
                --u-accent: #B4A5FF; --u-accent-bg: rgba(180,165,255,0.13); --u-accent-bd: rgba(180,165,255,0.42);
                --u-pos: #3FCF6E; --u-pos-bg: rgba(63,207,110,0.08); --u-pos-bd: rgba(63,207,110,0.35);
                --u-neg: #E8705A; --u-neg-bg: rgba(232,112,90,0.10); --u-neg-bd: rgba(232,112,90,0.40);
                --u-warn: #D9A257; --u-warn-bg: rgba(217,162,87,0.10); --u-warn-bd: rgba(217,162,87,0.35);
                --u-shadow: rgba(0,0,0,0.55);
                --u-mono: 'JetBrains Mono', ui-monospace, monospace;
            }

            .u-theme-light {
                --u-bg: #F5F2EC; --u-bg-alt: #EFEBE3; --u-card: #FAF8F4; --u-card2: #F2EEE7;
                --u-surface: #EAE5DC; --u-field: #FCFBF8; --u-foot: #EFEBE3;
                --u-text: #141210; --u-t2: #332F2A; --u-t3: #565656; --u-t4: #6E6E6E;
                --u-t5: #8A8A8A; --u-t6: #9A9A9A;
                --u-border: rgba(20,18,16,0.11); --u-hairline: rgba(20,18,16,0.07);
                --u-border2: rgba(20,18,16,0.15); --u-border3: rgba(0,0,0,0.2);
                --u-border4: rgba(0,0,0,0.35);
                --u-tint: rgba(0,0,0,0.03); --u-tint2: rgba(0,0,0,0.02); --u-tint3: rgba(0,0,0,0.05);
                --u-inv-bg: #141210; --u-inv-fg: #F7F5F1; --u-track: #E2DCD2;
                --u-accent: #6244E5; --u-accent-bg: rgba(98,68,229,0.09); --u-accent-bd: rgba(98,68,229,0.35);
                --u-pos: #15803D; --u-pos-bg: rgba(21,128,61,0.08); --u-pos-bd: rgba(21,128,61,0.3);
                --u-neg: #C2410C; --u-neg-bg: rgba(194,65,12,0.07); --u-neg-bd: rgba(194,65,12,0.32);
                --u-warn: #A16207; --u-warn-bg: rgba(161,98,7,0.08); --u-warn-bd: rgba(161,98,7,0.3);
                --u-shadow: rgba(0,0,0,0.12);
            }

            .u-body, .u-body *, .u-body *::before, .u-body *::after { box-sizing: border-box; }

            html, body { margin: 0; padding: 0; background: var(--u-bg); }

            body.u-body {
                font-family: Geist, -apple-system, 'Segoe UI', sans-serif;
                color: var(--u-text);
                -webkit-font-smoothing: antialiased;
                min-height: 100vh;
                overflow-x: clip;
            }

            .u-body a { color: var(--u-t3); text-decoration: none; }
            .u-body a:hover { color: var(--u-text); }
            .u-body ::selection { background: var(--u-inv-bg); color: var(--u-inv-fg); }
            .u-body button, .u-body textarea, .u-body input { font-family: inherit; }

            .u-mono { font-family: var(--u-mono); }

            /* The long-form lesson runs several screens; without headings it reads
               as one wall and the reader loses the thread between sections. */
            .u-prose-h {
                font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
                color: var(--u-text); margin: 34px 0 12px; line-height: 1.3;
            }
            .u-prose-h:first-child { margin-top: 0; }
            .u-prose-sub {
                font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
                color: var(--u-t2); margin: 26px 0 10px; line-height: 1.35;
            }
            .u-prose-table { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--u-border); border-radius: 12px; background: var(--u-card); }
            .u-prose-table table { width: 100%; border-collapse: collapse; min-width: 520px; }
            .u-prose-table th {
                text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--u-border);
                font-family: var(--u-mono); font-size: 10.5px; letter-spacing: 0.1em;
                color: var(--u-t5); font-weight: 400; text-transform: uppercase;
            }
            .u-prose-table td { padding: 12px 14px; border-bottom: 1px solid var(--u-hairline); font-size: 14.5px; line-height: 1.6; color: var(--u-t2); }
            .u-prose-table tr:last-child td { border-bottom: 0; }

            .u-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; color: var(--u-t2); }
            .u-prose p:last-child { margin-bottom: 0; }
            .u-prose strong { color: var(--u-text); font-weight: 600; }
            .u-prose em { font-style: italic; }
            .u-prose ul, .u-prose ol { margin: 0 0 14px; padding-left: 20px; color: var(--u-t2); font-size: 16px; line-height: 1.75; }
            .u-prose li { margin-bottom: 6px; }
            .u-prose code { font-family: var(--u-mono); font-size: 13px; background: var(--u-tint3); padding: 1px 5px; border-radius: 4px; }

            .u-shell { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

            .u-header {
                position: sticky; top: 0; z-index: 60;
                background: color-mix(in srgb, var(--u-bg) 94%, transparent);
                backdrop-filter: blur(14px);
                border-bottom: 1px solid var(--u-border);
            }
            .u-header-inner {
                max-width: 1280px; margin: 0 auto; padding: 0 24px;
                min-height: 68px; display: flex; align-items: center; gap: 20px;
            }
            .u-brand { display: flex; align-items: center; gap: 8px; color: var(--u-text); }
            .u-brand:hover { color: var(--u-text); }
            /* The word is written already-capitalised rather than transformed:
               under lang="tr" an uppercase transform turns i into İ, so an
               English word came out as UNİVERSİTY. */
            .u-brand-sub {
                font-family: var(--u-mono); font-size: 11px; letter-spacing: 0.1em;
                color: var(--u-t4); padding-left: 9px; margin-left: 2px;
                border-left: 1px solid var(--u-border2);
            }

            .u-iconbtn {
                width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
                background: transparent; border: 1px solid var(--u-border2); border-radius: 99px;
                font-size: 15px; line-height: 1; cursor: pointer; color: var(--u-text); font-family: var(--u-mono);
            }
            .u-iconbtn:hover { background: var(--u-tint3); }


            .u-btn {
                border: 0; padding: 13px 22px; border-radius: 10px;
                font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
                background: var(--u-inv-bg); color: var(--u-inv-fg);
            }
            .u-btn[disabled] { background: var(--u-border2); color: var(--u-t5); cursor: not-allowed; }

            /* A link styled as a button still matches .u-body a:hover, which was
               repainting its label in the page text colour, white on white. */
            .u-body a.u-btn { color: var(--u-inv-fg); }
            .u-body a.u-btn:hover,
            .u-btn:hover:not([disabled]) { background: var(--u-text); color: var(--u-inv-fg); }
            .u-body a.u-btn-ghost { color: var(--u-text); }
            .u-btn-ghost {
                background: transparent; color: var(--u-text); border: 1px solid var(--u-border3);
                padding: 13px 22px; border-radius: 10px; font-size: 14.5px; font-weight: 500; cursor: pointer;
            }
            .u-btn-ghost:hover { border-color: var(--u-border4); background: var(--u-tint); color: var(--u-text); }

            /* Sidebar rows set their colour inline, so a hover has to come from
               the background rather than the text to stay readable. */
            .u-aside a:hover { background: var(--u-tint3) !important; color: var(--u-text) !important; }

            /* Every module's progress column is the same width, so the bars line
               up across cards instead of stretching to whatever the summary left over. */
            /* ── navigation ─────────────────────────────────────────── */
            .u-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
            .u-nav::-webkit-scrollbar { display: none; }
            .u-body .u-nav a {
                font-size: 13px; color: var(--u-t4); padding: 6px 12px; border-radius: 8px;
                white-space: nowrap; line-height: 1;
            }
            .u-body .u-nav a:hover { color: var(--u-text); background: var(--u-tint); }
            .u-body .u-nav a[aria-current] { color: var(--u-text); background: var(--u-tint3); }

            /* ── hero surface ───────────────────────────────────────────
               Graph-paper texture with dashed rules marking the content
               column, so the page reads as a worked page rather than a slab. */
            .u-ruled { position: relative; overflow: hidden; }
            .u-ruled::before {
                content: ''; position: absolute; inset: 0; pointer-events: none;
                background-image:
                    linear-gradient(to right, var(--u-hairline) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--u-hairline) 1px, transparent 1px);
                background-size: 56px 56px;
                mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
                -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
            }
            .u-ruled > * { position: relative; }
            .u-rule {
                position: absolute; top: 0; bottom: 0; width: 0;
                border-left: 1px dashed var(--u-border); pointer-events: none;
            }
            /* Aligned to the content column's padding edge (shell 1280 + 32 padding),
               and hidden as soon as the column touches the viewport, where the rules
               would sit on top of the text instead of framing it. */
            @media (max-width: 1340px) { .u-rule { display: none; } }

            /* Sticks under the header so the reader can always see how far into
               the module they are; the sidebar list scrolls away, this does not. */
            .u-stepstrip {
                position: sticky; top: 56px; z-index: 8;
                background: color-mix(in srgb, var(--u-bg-alt) 92%, transparent);
                backdrop-filter: blur(8px);
                border-top: 1px solid var(--u-hairline);
            }

            /* Admin tabs: one screen per concern instead of one long scroll. */
            .u-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
            .u-tabs::-webkit-scrollbar { display: none; }
            .u-body .u-tabs a {
                font-size: 13.5px; color: var(--u-t4); padding: 11px 16px; white-space: nowrap;
                border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; line-height: 1;
            }
            .u-body .u-tabs a:hover { color: var(--u-text); background: var(--u-tint); }
            .u-body .u-tabs a[aria-current] {
                color: var(--u-text); background: var(--u-bg);
                border-color: var(--u-border); border-bottom: 1px solid var(--u-bg);
            }

            /* ── statistics band ────────────────────────────────────────── */
            .u-statband { display: grid; grid-template-columns: repeat(4, 1fr); }
            .u-statband > div { padding: 22px 26px; border-left: 1px solid var(--u-border); }
            .u-statband > div:first-child { border-left: 0; padding-left: 0; }
            @media (max-width: 820px) {
                .u-statband { grid-template-columns: repeat(2, 1fr); }
                .u-statband > div:nth-child(3) { border-left: 0; padding-left: 0; }
                .u-statband > div:nth-child(n+3) { border-top: 1px solid var(--u-border); }
            }
            @media (max-width: 460px) {
                .u-statband { grid-template-columns: 1fr; }
                .u-statband > div { border-left: 0; padding-left: 0; }
                .u-statband > div + div { border-top: 1px solid var(--u-border); }
            }

            /* ── card grids ─────────────────────────────────────────────── */
            .u-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
            .u-bento > .u-span2 { grid-column: span 2; }
            @media (max-width: 900px) { .u-bento { grid-template-columns: 1fr; } .u-bento > .u-span2 { grid-column: auto; } }

            .u-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
            @media (max-width: 1000px) { .u-quad { grid-template-columns: repeat(2, 1fr); } }
            @media (max-width: 560px) { .u-quad { grid-template-columns: 1fr; } }

            .u-panel { border: 1px solid var(--u-border); background: var(--u-card); border-radius: 14px; padding: 22px 24px; }

            /* ── curriculum rows ────────────────────────────────────────── */
            .u-currow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 190px 96px; gap: 20px; align-items: center; }
            @media (max-width: 1000px) { .u-currow { grid-template-columns: 34px minmax(0, 1fr) 96px; } .u-currow > .u-curstat { display: none; } }
            @media (max-width: 620px) { .u-currow { grid-template-columns: 30px minmax(0, 1fr); } .u-currow > .u-curlevel { grid-column: 2; justify-self: start; } }

            /* ── people ─────────────────────────────────────────────────
               Two featured instructors side by side, split by a rule; the full
               roster falls into as many columns as the width allows. */
            .u-instructors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
            .u-instructors > * { padding: 0 40px; border-left: 1px solid var(--u-hairline); }
            .u-instructors > *:first-child { padding-left: 0; border-left: 0; }
            @media (max-width: 860px) {
                .u-instructors { grid-template-columns: 1fr; gap: 32px; }
                .u-instructors > * { padding: 0; border-left: 0; }
                .u-instructors > * + * { border-top: 1px solid var(--u-hairline); padding-top: 32px; }
            }
            /* At phone width a 132px portrait leaves the bio about 200px to live
               in, which is too narrow a measure to read. The portrait moves above
               the text instead of beside it. */
            @media (max-width: 460px) {
                .u-instructors > * { grid-template-columns: 1fr !important; gap: 16px !important; }
                .u-instructors img { width: 92px !important; height: 92px !important; }
            }

            .u-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }

            /* ── rich footer ────────────────────────────────────────────── */
            .u-foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
            @media (max-width: 900px) { .u-foot-cols { grid-template-columns: repeat(2, 1fr); } }
            @media (max-width: 520px) { .u-foot-cols { grid-template-columns: 1fr; gap: 26px; } }
            .u-foot-col { display: grid; gap: 9px; align-content: start; }
            .u-body .u-foot-col a { font-size: 13.5px; color: var(--u-t4); }
            .u-body .u-foot-col a:hover { color: var(--u-text); }

            /* Language switcher: a locale with no content yet is shown, not hidden. */
            .u-lang { display: flex; align-items: center; gap: 2px; font-family: var(--u-mono); font-size: 11px; letter-spacing: 0.06em; }
            .u-lang > * { padding: 4px 7px; border-radius: 6px; line-height: 1; }
            .u-lang-on { color: var(--u-text); background: var(--u-tint3); }
            .u-lang-off { color: var(--u-t6); cursor: not-allowed; }
            .u-body .u-lang a { color: var(--u-t4); }
            .u-body .u-lang a:hover { color: var(--u-text); background: var(--u-tint3); }

            /* Certificate artwork. Sized in px so the document keeps its
               proportions; the stage supplies the light behind it. */
            .u-cert-stage { background: radial-gradient(ellipse at 50% 0%, var(--u-accent-bg) 0%, var(--u-bg) 55%); }
            /* The document carries its own material rather than the reader's theme:
               a certificate is a printed object, and it should read as paper in
               both light and dark. */
            .u-cert {
                --cert-paper: #F4EFE3; --cert-sheet: #EFE9DB;
                --cert-ink: #17150F; --cert-ink-soft: #6B6355; --cert-ink-faint: #8C8677;
                --cert-line: rgba(23,21,15,0.13); --cert-edge: rgba(23,21,15,0.22);
                --cert-seal: rgba(98,68,229,0.09); --cert-seal-bd: rgba(98,68,229,0.30);
            }
            .u-cert-frame { background: var(--cert-paper); border: 2px solid var(--cert-edge); border-radius: 22px; padding: 8px; box-shadow: 0 32px 80px var(--u-shadow); }
            .u-cert-sheet { background: var(--cert-sheet); border: 1px solid var(--cert-line); border-radius: 16px; text-align: center; display: grid; gap: 0; }
            @media (max-width: 560px) {
                /* Three columns cannot hold a signature, a mark and a date block
                   at this width without overlapping, so they stack. */
                .u-cert-foot { grid-template-columns: 1fr !important; gap: 20px !important; text-align: center; }
                .u-cert-foot > div:first-child { text-align: center !important; }
                .u-cert-foot > div:last-child { text-align: center !important; }
            }

            .u-cert-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
            @media (max-width: 900px) { .u-cert-split { grid-template-columns: 1fr; gap: 36px; } }

            .u-modprog { flex: 0 0 300px; }
            /* The summary shares the row on an explicit basis; without one it keeps its
               content width and shoves the bar onto a line of its own. */
            .u-modtext { flex: 1 1 300px; min-width: 0; }
            /* Below this the pair no longer fits side by side, so the bar takes the
               full width rather than shrinking into a stub. */
            @media (max-width: 820px) { .u-modprog { flex: 1 1 100%; } }

            .u-tag {
                font-size: 10.5px; font-family: var(--u-mono); letter-spacing: 0.06em;
                padding: 4px 8px; border-radius: 5px; border: 1px solid var(--u-border2); color: var(--u-t5);
            }

            .u-footer { background: var(--u-foot); border-top: 1px solid var(--u-border); }
            .u-footer-inner {
                max-width: 1280px; margin: 0 auto; padding: 26px 32px;
                display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
                font-size: 12.5px; color: var(--u-t5);
            }

            /* The hero's two-up block collapses at the mockup's 1000px breakpoint. */
            @media (max-width: 1000px) {
                .u-split { grid-template-columns: 1fr !important; row-gap: 0; }
            }

            /* The course body keeps its rail down to 860px on a narrower track.
               Below that it stacks, but the lesson comes first: a lesson list
               sitting on top costs a full screen of scrolling before the reader
               reaches the text they came for. */
            @media (max-width: 1000px) and (min-width: 861px) {
                .u-course-split { grid-template-columns: 232px 1fr !important; }
                .u-lesson-body { padding: 36px 32px 48px !important; }
            }

            @media (max-width: 860px) {
                .u-course-split { grid-template-columns: 1fr !important; }
                .u-aside {
                    order: 2;
                    border-right: 0 !important;
                    border-top: 1px solid var(--u-border);
                }
            }

            @media (max-width: 820px) {
                .u-table-head, .u-table-row { font-size: 12px; }
                .u-table-head > div, .u-table-row > div { padding-left: 12px !important; padding-right: 12px !important; }
            }

            @media (max-width: 760px) {
                .u-shell, .u-footer-inner { padding-left: 18px !important; padding-right: 18px !important; }
                .u-header-inner { flex-wrap: wrap; min-height: 0; padding: 10px 18px !important; gap: 10px !important; }
                .u-h1 { font-size: 32px !important; line-height: 1.1 !important; }
                .u-lesson-body { padding: 28px 18px 44px !important; gap: 28px !important; }
                .u-lesson-body h2 { font-size: 22px !important; line-height: 1.15 !important; }
                .u-card-pad { padding: 18px !important; }
                .u-prose p { font-size: 15.5px; }

                /* The mockup collapses every table cell onto its own line at this width.
                   The column headers travel with the cells as data-label prefixes so a
                   stacked cell still says which column it came from. */
                .u-table-head { display: none !important; }
                .u-table-row { display: block !important; padding: 10px 0; }
                .u-table-row > div { border-left: 0 !important; padding: 3px 16px !important; }
                .u-table-row > div:first-child {
                    font-family: var(--u-mono); font-size: 10.5px; letter-spacing: 0.06em;
                    color: var(--u-t6) !important; padding-top: 9px !important;
                }
                .u-table-row > div[data-label]::before {
                    content: attr(data-label) " · ";
                    font-family: var(--u-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--u-t6);
                }
            }

            /* The module facts read as one line of separate values, so they get a
               rule between them rather than only whitespace. Drawn as a border on
               each item after the first, which keeps it between the values and
               never after the last one. */
            .u-meta { gap: 8px 14px !important; }
            .u-meta > * + * { border-left: 1px solid var(--u-border); padding-left: 14px; }

            @media (max-width: 520px) {
                .u-body { font-size: 15px; }
                .u-h1 { font-size: 27px !important; }
                .u-hide-sm { display: none !important; }
                .u-meta { gap: 10px 12px !important; }
                .u-meta > * + * { border-left: 0; padding-left: 0; }
                .u-actions { flex-direction: column; align-items: stretch !important; }
                .u-actions > * { width: 100%; }
                .u-actions .u-btn, .u-actions .u-btn-ghost { width: 100%; text-align: center; }
            }

            @media (prefers-reduced-motion: reduce) {
                *, ::before, ::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
            }

            /* ── Chalkboard panel system ───────────────────────────────────────────────
               One card shell, six panel types (line, bar, ring, flow, float, counter).
               Motion is CSS only and rides on exactly four keyframes. Every element sets
               its own start state; the keyframes only describe the finish.
               ────────────────────────────────────────────────────────────────────────── */

            .cb {
              --cb-board: #121212;
              --cb-board-2: #1a1a1a;
              --cb-chalk: #eef2ea;
              --cb-dim: rgba(238, 242, 234, 0.58);
              --cb-faint: rgba(238, 242, 234, 0.2);
              --cb-hair: rgba(238, 242, 234, 0.1);
              --cb-yellow: #f2d492;
              --cb-blue: #9ec9e8;
              --cb-coral: #eda08c;
              --cb-green: #a6d6a8;
              --cb-mono: "JetBrains Mono", ui-monospace, monospace;

              display: grid;
              gap: 18px;
              padding: 22px 24px 24px;
              border: 1px solid var(--cb-hair);
              border-radius: 14px;
              color: var(--cb-chalk);
              font-family: Geist, -apple-system, "Segoe UI", sans-serif;
              background:
                radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
                radial-gradient(90% 70% at 88% 100%, rgba(255, 255, 255, 0.035), transparent 55%),
                linear-gradient(155deg, var(--cb-board-2), var(--cb-board));
            }

            /* Chalk dust: a faint speckle so the board does not read as flat paint. */
            .cb-stage::after {
              content: "";
              position: absolute;
              inset: 0;
              pointer-events: none;
              opacity: 0.5;
              background-image:
                radial-gradient(rgba(255, 255, 255, 0.055) 0.6px, transparent 0.7px),
                radial-gradient(rgba(255, 255, 255, 0.035) 0.5px, transparent 0.6px);
              background-size: 13px 13px, 23px 21px;
              background-position: 0 0, 7px 11px;
            }

            .cb-eyebrow {
              font-family: var(--cb-mono);
              font-size: 10.5px;
              letter-spacing: 0.14em;
              color: var(--cb-dim);
            }

            .cb-title {
              margin: 6px 0 0;
              font-size: 20px;
              font-weight: 600;
              letter-spacing: -0.015em;
            }

            .cb-note {
              margin: 6px 0 0;
              font-size: 13px;
              line-height: 1.6;
              color: var(--cb-dim);
            }

            .cb-scroll { overflow: visible; container-type: inline-size; }

            .cb-stage {
              position: relative;
              container-type: inline-size;

              /* One viewBox unit, in px. The drawing is 800 units wide and scales
                 with the container, so the text layer has to scale with it or it
                 overflows the board and the card grows a scrollbar. Capped at 1px
                 so a wide column renders the type at its designed size. */
              --u: min(1px, 0.125cqw);
            }

            .cb-stage svg { display: block; width: 100%; height: auto; overflow: visible; }

            /* Text never lives inside the SVG, it sits in this layer, positioned in the
               same coordinate space because the stage and the viewBox share a ratio. */
            .cb-layer { position: absolute; inset: 0; pointer-events: none; }
            .cb-layer > * { position: absolute; }

            /* ── the four keyframes ──────────────────────────────────────────────────── */

            @keyframes cb-draw  { to { stroke-dashoffset: 0; } }
            @keyframes cb-grow  { to { transform: scaleX(1); } }
            @keyframes cb-ring  { to { stroke-dasharray: var(--p) 1; } }
            @keyframes cb-rise  { to { opacity: 1; transform: none; } }

            /* ── panel: line / flow ──────────────────────────────────────────────────── */

            .cb-line {
              fill: none;
              stroke: var(--cb-chalk);
              stroke-width: 2;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-dasharray: 1;
              stroke-dashoffset: 1;
              animation: cb-draw 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
              animation-delay: var(--d, 0s);
            }

            .cb-line--faint { stroke: var(--cb-faint); stroke-width: 1.5; }

            /* The seam is dashed by design, so it fades in rather than drawing itself
               a draw animation would fight the dash pattern it needs to keep. */
            .cb-seam {
              fill: none;
              stroke: var(--cb-coral);
              stroke-width: 2;
              stroke-dasharray: 10 9;
              opacity: 0;
              animation: cb-rise 0.6s ease-out forwards;
              animation-delay: var(--d, 0s);
            }
            .cb-line--dash  { stroke: var(--cb-dim); stroke-width: 1.5; }
            .cb-line--seam  { stroke: var(--cb-coral); stroke-width: 2; }

            /* ── panel: bar ──────────────────────────────────────────────────────────── */

            .cb-bar {
              transform: scaleX(0);
              transform-origin: left center;
              transform-box: fill-box;
              animation: cb-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
              animation-delay: var(--d, 0s);
            }

            /* ── panel: ring ─────────────────────────────────────────────────────────── */

            .cb-ring {
              fill: none;
              stroke-width: 7;
              stroke-linecap: round;
              transform: rotate(-90deg);
              transform-origin: center;
              transform-box: fill-box;
              stroke-dasharray: 0 1;
              animation: cb-ring 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
              animation-delay: var(--d, 0s);
            }

            .cb-ring--track { stroke: var(--cb-hair); stroke-dasharray: 1 0; animation: none; }

            /* ── panel: floating label + counter ─────────────────────────────────────── */

            .cb-float,
            .cb-count {
              opacity: 0;
              transform: translateY(8px);
              animation: cb-rise 0.6s ease-out forwards;
              animation-delay: var(--d, 0s);
            }

            /* Fixed sizes, tuned to the surrounding page rather than to the drawing: the
               SVG scales with the container, the words do not. */
            .cb-step-no   { font-family: var(--cb-mono); font-size: calc(11.5 * var(--u)); color: var(--cb-dim); letter-spacing: 0.08em; }
            .cb-step-name { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
            .cb-sig       { font-family: var(--cb-mono); font-size: calc(12.5 * var(--u)); line-height: 1.4; color: var(--cb-dim); }

            /* Labels sit in slots bounded by the rule they name, so a long one has
               to wrap inside its slot. Holding them on one line clipped the tail of
               the sentence at the board edge, which reads as a missing word rather
               than as a design. Two lines still clear the rule above; three do not. */
            .cb-step-name,
            .cb-sig { overflow-wrap: break-word; }
            .cb-zone      { font-family: var(--cb-mono); font-size: calc(11 * var(--u)); letter-spacing: 0.12em; white-space: nowrap; }
            .cb-count     { font-family: var(--cb-mono); font-weight: 500; letter-spacing: -0.02em; }

            /* Anchoring is the whole trick for "text must never touch the drawing": a row
               is pinned to the rule it belongs to by its own edge, and the clearance is a
               fixed padding. Percentage-positioned text drifts into the line as the SVG
               scales; this cannot. */
            .cb-above { translate: 0 calc(-10 * var(--u)); }
            .cb-below { translate: 0 calc(10 * var(--u)); }

            /* A rung is one row: number, name, failure signature. Making it a real element
               is what lets hover mute its neighbours without any script. */
            .cb-rung {
              display: flex;
              align-items: baseline;
              gap: calc(14 * var(--u));
              pointer-events: auto;
            }

            .cb-rung .cb-sig { margin-left: auto; text-align: right; }

            .cb-layer:hover .cb-rung { opacity: 0.34; transition: opacity 0.18s ease; }
            .cb-layer:hover .cb-rung:hover { opacity: 1; }

            /* A flow stage stacks its name over its note inside a fixed slot, so adjacent
               stages cannot run into each other however narrow the board gets. */
            .cb-flow-cell {
              display: grid;
              gap: calc(4 * var(--u));
              justify-items: center;
              text-align: center;
              padding: 0 calc(8 * var(--u));
            }

            /* Stage names are nowrap by default, which overflows a narrow slot and runs
               into the neighbouring stage. Inside a flow cell they wrap like the note. */
            .cb-flow-cell .cb-sig,
            .cb-flow-cell .cb-step-name { white-space: normal; overflow-wrap: anywhere; }

            .cb-legend {
              display: flex;
              flex-wrap: wrap;
              gap: 8px 18px;
              font-family: var(--cb-mono);
              font-size: 10.5px;
              letter-spacing: 0.06em;
              color: var(--cb-dim);
            }

            .cb-swatch { display: inline-flex; align-items: center; gap: 7px; }
            .cb-swatch i { width: 9px; height: 9px; border-radius: 2px; background: currentColor; }

            /* ── narrow board: the drawing steps aside ───────────────────────
               Scaled into a phone column an 800-unit board renders its labels at
               about four points. That is not a smaller figure, it is an unreadable
               one. The words already live in their own layer rather than inside the
               SVG, so below this width the layer stops being a positioned overlay
               and becomes the list it was always describing. Keyed to the board's
               own width, not the viewport, so it holds wherever a figure sits. */
            @container (max-width: 560px) {
              /* aspect-ratio is set inline per figure, so overriding it needs the weight. */
              .cb-stage { aspect-ratio: auto !important; --u: 1px; }
              .cb-stage > svg { display: none; }
              .cb-stage::after { display: none; }

              .cb-layer { position: static; display: grid; gap: 13px; }
              /* Same reason as aspect-ratio above: the centring translate on the
                 hand-built figures is inline, and a stacked list must not shift
                 half its width to the left. */
              .cb-layer > * { position: static; translate: none !important; }

              .cb-rung { flex-wrap: wrap; gap: 3px 12px; }
              .cb-rung .cb-sig { margin-left: 0; text-align: left; flex-basis: 100%; }

              .cb-flow-cell { justify-items: start; text-align: left; padding: 0; }
              .cb-count { justify-self: start; }
            }

            /* ── reduced motion: no animation, and every element shows its finished state ── */

            @media (prefers-reduced-motion: reduce) {
              .cb-line, .cb-bar, .cb-ring, .cb-float, .cb-count, .cb-seam { animation: none; }
              .cb-seam { opacity: 1; }
              .cb-line { stroke-dashoffset: 0; }
              .cb-bar { transform: scaleX(1); }
              .cb-ring { stroke-dasharray: var(--p) 1; }
              .cb-float, .cb-count { opacity: 1; transform: none; }
              .cb-layer:hover .cb-rung, .cb-layer:hover .cb-rung:hover { transition: none; opacity: 1; }
            }