/* Interactive figures and essay drawings (plugin markup). Live rules kept verbatim (pruned of dead code);
   their selectors and !important flags still need a proper rewrite. */
body:where(.page-auth).page-auth .auth-form .password-toggle[aria-label="Hide password"]:before {content:"Hide"}
.arithmetic .art-accent {transition:transform 220ms ease}
.multiplication .art-accent {transition:transform 220ms ease}
.free-sheet {transition:transform 220ms ease}
.ownership-frame {transition:opacity 220ms ease}
.layout-feature .arithmetic .art-tail {transition:opacity 220ms ease}
@media (prefers-reduced-motion:reduce) {
.layout-feature .arithmetic .art-tail {transition:none}
}
html body .essay-art :is(text, tspan) {font-variation-settings:"SOFT" 0, "WONK" 0, "opsz" 144 !important}
html body .sketch-art:not(.x) text {font-family:var(--chm-font-hand), cursive !important;font-style:normal !important;font-weight:500 !important;letter-spacing:0 !important}
html body .sketch-art:not(.x) text:not([fill]) {fill:inherit !important}
html body .sketch-art:not(.x) [fill="var(--chm-text)"] {fill:var(--chm-text) !important}
html body .sketch-art:not(.x) [fill="var(--chm-accent)"] {fill:var(--chm-accent) !important}
:root:not([data-brx-theme="dark"]):not(#b1):not(#b2):not(#b3) :is(.sketch-art, .essay-art, .charaf-visual>svg) {--ink:#263b86}
:root[data-brx-theme="dark"]:not(#b1):not(#b2):not(#b3) :is(.sketch-art, .essay-art, .charaf-visual>svg) {--ink:#9fb0e6}
html body .charaf-interactive {font-variant-numeric:lining-nums tabular-nums !important;font-feature-settings:"lnum" 1, "tnum" 1 !important}
html body .charaf-interactive * {font-variant-numeric:lining-nums tabular-nums !important;font-feature-settings:"lnum" 1, "tnum" 1 !important}
html body .charaf-interactive span:not([class]) {font-family:var(--chm-font-mono) !important}
body.single-post .article-prose figure.charaf-interactive {counter-increment:fig}
html:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6) body .charaf-interactive {border-top:1px solid color-mix(in srgb, var(--chm-text) 16%, transparent) !important;border-bottom:1px solid color-mix(in srgb, var(--chm-text) 16%, transparent) !important;padding:32px 0 28px !important;margin-top:48px !important;margin-bottom:48px !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
html:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6) body .charaf-interactive :is(summary, button) {background:none !important;color:var(--chm-text) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:8px 0 !important;font:500 12px/16px var(--chm-font-mono) !important;letter-spacing:.08em !important;text-transform:uppercase !important;text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:6px !important;text-decoration-color:color-mix(in srgb, var(--chm-text) 35%, transparent) !important;transition:color .2s ease, text-decoration-color .2s ease !important;cursor:pointer;transform:none !important}
html:not(#f1):not(#f2):not(#f3):not(#f4):not(#f5):not(#f6) body .charaf-interactive :is(summary, button):is(:hover, :focus-visible) {color:var(--chm-accent-text) !important;text-decoration-color:var(--chm-accent) !important}
@media (max-width: 650px) {
html:not(#m1):not(#m2):not(#m3):not(#m4) body .float-notes p {margin:0 0 10px !important}
}
.essay-art {display:block;width:100%;height:100%;overflow:visible;font-family:var(--chm-font-body);color:var(--chm-text)}
@media (prefers-reduced-motion:reduce) {
.essay-art * {transition:none !important}
}
@media (prefers-reduced-motion:reduce) {
.layout-feature .compiler-bits {transition:none}
}
.number-diagram .diagram-label {margin:0 0 28px;font-size:13px !important;color:var(--chm-muted) !important}
.float-fields {display:grid;grid-template-columns:1fr 1.4fr 2.4fr;gap:20px}
.float-fields>div {padding:20px 0;background:none;text-align:center;border:0}
.float-fields>div:first-child strong {color:var(--chm-accent)}
.float-fields strong {display:block;font:400 56px/1.2 var(--chm-font-display)}
.float-fields span {font-size:13px}
.float-notes {display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:15px;margin:18px 0}
.float-notes p {font-size:13px !important}
.float-notes b {display:block;font-weight:500;margin-bottom:6px}
@media (max-width:600px) {
.float-notes {grid-template-columns:1fr;gap:0}
}
@media (max-width:600px) {
.float-notes b {display:inline;margin-right:8px}
}
body.layout-reading .float-fields span {display:block;margin-top:8px}
.article-art .essay-art {width: 100%; height: 100%; overflow: visible; font-family: var(--chm-font-display)}
.article-art .art-ink {fill: var(--chm-text);}
.article-art .art-accent {fill: var(--chm-accent);}
.article-art .art-tail {letter-spacing: 7px}
.article-art .art-tail {font: 11px var(--chm-font-body);}
.article-art .art-small {letter-spacing: 1.5px}
.article-art .art-small {font: 13px var(--chm-font-body);}
body:where(.layout-reading).layout-reading .article-prose .diagram-note {font-size:13px; color:var(--chm-muted)}
body:where(.layout-reading).layout-reading .article-prose .number-diagram p.diagram-note {font-size:13px; color:var(--chm-muted)}
body:where(.layout-reading).layout-reading .article-prose figure.charaf-interactive {margin:56px 0 64px}
html body .essay-art :is(text, tspan) {font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144 !important;}
/* Figure typography (the figure rules above were written against these, hence !important) */
.float-fields strong, .essay-art text, .essay-art tspan { font-family: var(--chm-font-display) !important; font-weight: 400 !important; letter-spacing: -.005em !important; font-synthesis: none; }
.diagram-label, .diagram-note, .float-notes, .float-fields span, .essay-art .art-tail, .essay-art .art-small { font-family: var(--chm-font-mono) !important; font-variation-settings: normal; }
/* Shift lab (compilers essay): six bit columns */
/* Binary rows (number essays) */
/* Shift lab bits, and grouped figure rules */
.layout-feature .arithmetic .art-accent, .layout-feature .free-sheet, .layout-feature .compiler-bits { transition: transform 220ms ease; }
/* ============================================================
   Static essay diagrams (.fig): fixed point, the shift, 0.1 + 0.2.
   Mono for bits and labels, the display serif for numbers, accent for what matters.
   ============================================================ */
.article-prose .fig { --fig-line: color-mix(in srgb, var(--chm-text) 18%, transparent); max-width: 680px; margin: 0; font-family: var(--chm-font-mono); color: var(--chm-text); }
.article-prose .fig p { margin: 0; color: inherit; }
.article-prose .fig code { padding: 0; background: none; font: inherit; }
.fig .fig-label { margin-bottom: 28px !important; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--chm-muted) !important; }
.fig .fig-sum { margin-top: 28px !important; font: 400 32px/1.2 var(--chm-font-display); text-align: center; }
.fig .fig-sum strong { font-weight: 400; color: var(--chm-accent); }
.fig .fig-note { margin-top: 16px !important; font-size: 12px; line-height: 1.7; color: var(--chm-muted) !important; text-align: center; }
/* Fixed point: one row of eight cells, the point between them, place values underneath */
.fig-bits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(4, minmax(0, 1fr)); column-gap: 6px; max-width: 520px; margin: 0 auto; }
.fig-bit { display: grid; gap: 8px; justify-items: center; }
.fig-bit b { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.15; border: 1px solid var(--fig-line); border-radius: 3px; font: 400 30px/1 var(--chm-font-mono); color: var(--chm-muted); }
.fig-bit i { font-style: normal; font-size: 13px; line-height: 1; color: var(--chm-muted); }
.fig-bit.is-on b { border-color: var(--chm-accent); background: color-mix(in srgb, var(--chm-accent) 10%, transparent); color: var(--chm-accent); }
.fig-bit.is-on i { color: var(--chm-accent); }
.fig-point { align-self: start; padding: 0 4px; font: 400 48px/1 var(--chm-font-display); color: var(--chm-accent); transform: translateY(10px); }
.fig-group { margin-top: 12px; font-size: 11px; line-height: 1; letter-spacing: .04em; text-align: center; color: var(--chm-muted); }
.fig-group::before { content: ""; display: block; height: 7px; margin-bottom: 8px; border: 1px solid var(--fig-line); border-top: 0; }
@media (max-width: 478px) {
.fig-bits { column-gap: 3px; }
.fig-bit b { font-size: 20px; }
.fig-bit i { font-size: 11px; }
.fig-point { padding: 0 2px; font-size: 34px; transform: translateY(4px); }
}
/* The shift: two rows on the same place-value columns; the moved block keeps its outline */
.fig-shift-grid { display: grid; grid-template-columns: 44px repeat(6, minmax(0, 1fr)); column-gap: 6px; row-gap: 10px; max-width: 480px; margin: 0 auto; align-items: center; }
.fig-shift-grid i { font-style: normal; font-size: 12px; text-align: center; color: var(--chm-muted); }
.fig-shift-grid b { display: grid; place-items: center; aspect-ratio: 1 / 1.15; border: 1px solid var(--fig-line); border-radius: 3px; font: 400 26px/1 var(--chm-font-mono); }
.fig-shift-grid b.is-off { color: var(--chm-muted); opacity: .6; }
.fig-shift-grid b.is-moved { border-color: var(--chm-accent); background: color-mix(in srgb, var(--chm-accent) 10%, transparent); }
.fig-shift-grid b.is-new { border-style: dashed; color: var(--chm-muted); }
.fig-row { font: 400 26px/1 var(--chm-font-display); text-align: right; padding-right: 6px; }
.fig-row.is-result { color: var(--chm-accent); }
.fig-arrow { grid-column: 2 / -1; font-size: 12px; text-align: center; color: var(--chm-accent); letter-spacing: .04em; }
.fig-cost { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 14px; align-items: center; width: fit-content; margin: 32px auto 0; font-size: 13px; color: var(--chm-muted); }
.fig-cost code { color: var(--chm-text); }
.fig-bar { display: block; width: calc(var(--c) * 34px); height: 10px; border-radius: 2px; background: var(--chm-muted); opacity: .5; }
.fig-bar.is-fast { background: var(--chm-accent); opacity: 1; }
@media (max-width: 478px) {
.fig-shift-grid { grid-template-columns: 34px repeat(6, minmax(0, 1fr)); column-gap: 4px; }
.fig-shift-grid b { font-size: 20px; }
.fig-row { font-size: 22px; }
}
/* 0.1 + 0.2: what you see, then where the numbers actually sit */
.fig-console { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 14px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 18px 22px; border-left: 2px solid var(--fig-line); background: color-mix(in srgb, var(--chm-text) 4%, transparent); font-size: 15px; line-height: 1.4; }
.fig-console span { color: var(--chm-muted); }
.fig-console output { overflow-wrap: anywhere; }
.fig-console output.is-sum { color: var(--chm-accent); }
.fig-line { position: relative; height: 120px; margin: 36px 0 8px; }
.fig-line::before { content: ""; position: absolute; left: 0; right: 0; top: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--fig-line) 8%, var(--fig-line) 92%, transparent); }
.fig-tick, .fig-dot, .fig-true { position: absolute; left: var(--x); top: 60px; transform: translateX(-50%); }
.fig-tick { width: 1px; height: 14px; margin-top: -7px; background: var(--fig-line); }
.fig-dot { width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--chm-text); }
.fig-dot.is-sum { background: var(--chm-accent); }
.fig-dot b { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-weight: 400; font-size: 13px; white-space: nowrap; }
.fig-dot.is-sum b { color: var(--chm-accent); }
.fig-true { width: 0; height: 36px; margin-top: -4px; border-left: 1px dashed var(--chm-text); }
.fig-true b { position: absolute; top: 40px; left: 0; transform: translateX(-50%); font-weight: 400; font-size: 12px; white-space: nowrap; color: var(--chm-muted); }
.article-prose .fig-legend { display: grid; gap: 10px; max-width: 520px; margin: 8px auto 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--chm-muted); }
.article-prose .fig-legend li { display: grid; grid-template-columns: 13px 1fr; gap: 12px; align-items: baseline; margin: 0; color: inherit; }
.fig-key { width: 9px; height: 9px; border-radius: 50%; background: var(--chm-text); }
.fig-key.is-sum { background: var(--chm-accent); }
.fig-legend code { color: var(--chm-text); overflow-wrap: anywhere; }
@media (max-width: 478px) {
.fig-console { font-size: 13px; padding: 14px 16px; }
}
.fig .fig-label { text-align: center; }
.fig .fig-sum.is-mono { font: 400 22px/1.3 var(--chm-font-mono); }
@media (max-width: 478px) {
.fig .fig-sum.is-mono { font-size: 17px; }
.fig-bit i { font-size: 10px; }
}