/* Base article design adapted from meatfighter/much-ado-about-seven-bytes.
 * MathJax CommonHTML is pre-rendered; prose/script fonts are web fonts with local fallbacks. */
:root {
    color-scheme: light;
    --bg: #f6f8fa;
    --surface: #ffffff;
    --soft: #f6f8fa;
    --text: #1f2328;
    --muted: #59636e;
    --border: #d0d7de;
    --link: #0969da;
    --switch-knob: #ffffff;
    --switch-track: #d0d7de;
    --switch-border: #8c959f;
    --tile-edge: #82909f;
    --route: #3c727d;
    --tray: #d4dce2;
    --blank: #c0cbd3;
    --well-edge: #8395a3;
    --excluded: #e9edf2;
    --measure: 750px;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --script: "Courier Prime", "Courier New", Courier, "Liberation Mono", monospace;
    --prose: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --math: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1117;
    --surface: #161b22;
    --soft: #151c25;
    --text: #e6edf3;
    --muted: #9da7b3;
    --border: #30363d;
    --link: #79b8ff;
    --switch-knob: #e6edf3;
    --switch-track: #30363d;
    --switch-border: #6e7681;
    --tile-edge: #647489;
    --route: #83bac4;
    --tray: #283745;
    --blank: #0c141c;
    --well-edge: #44586b;
    --excluded: #202a36;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        color-scheme: dark;
        --bg: #0d1117;
        --surface: #161b22;
        --soft: #151c25;
        --text: #e6edf3;
        --muted: #9da7b3;
        --border: #30363d;
        --link: #79b8ff;
        --switch-knob: #e6edf3;
        --switch-track: #30363d;
        --switch-border: #6e7681;
        --tile-edge: #647489;
        --route: #83bac4;
    --tray: #283745;
    --blank: #0c141c;
    --well-edge: #44586b;
        --excluded: #202a36;
    }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--muted) var(--border);
    scroll-behavior: smooth;
    background: var(--bg);
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}
.page { width: min(var(--measure), calc(100% - 2rem)); margin-inline: auto; }
main, article, .article-intro, .article-body { min-width: 0; }
article:focus { outline: none; }
a {
    text-decoration: none;
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
button, input { font: inherit; }
button { cursor: pointer; }
.theme-control {
    position: absolute;
    top: 1rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    width: 3.1rem;
    min-height: 44px;
    cursor: pointer;
}
.theme-control input { position: absolute; inset: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.theme-track { position: relative; display: block; width: 3.1rem; height: 1.65rem; border: 1px solid var(--switch-border); border-radius: 999px; background: var(--switch-track); }
.theme-track::before { content: ""; position: absolute; top: 50%; left: .18rem; width: 1.14rem; height: 1.14rem; background: var(--switch-knob); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); border-radius: 50%; transform: translateY(-50%); transition: transform .18s ease; }
.theme-control input:checked + .theme-track::before { transform: translate(1.42rem, -50%); }
.theme-control input:focus-visible + .theme-track { outline: 2px solid var(--link); outline-offset: 3px; }
.article-header { position: relative; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 3.1rem; align-items: center; gap: 1rem; padding: 2rem 0 1.1rem; text-align: center; }
h1 { grid-column: 2; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 1rem; text-wrap: balance; }
.subtitle { grid-column: 1 / -1; margin-block: 0; font-size: clamp(1.06rem, 2.3vw, 1.22rem); line-height: 1.5; color: var(--muted); max-width: 40rem; margin-inline: auto; text-wrap: balance; font-style: italic; }
p { margin: 0 0 1.25rem; }
.article-intro, .article-body { font-family: var(--prose); font-size: 1.1875rem; line-height: 1.64; }
.article-body h2, .article-body h3, .article-body h4, .toc, figcaption, .copy-link { font-family: var(--sans); }
/* Genuine italic face; keep font selection independent of MathJax glyphs. */
.subtitle { font-family: var(--prose); font-weight: 400; font-synthesis: none; }
.article-intro > p, .article-body > p { overflow-wrap: break-word; }
.article-intro > :last-child { margin-bottom: 0; }
.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { position: relative; padding-right: 2.3rem; margin: 2rem 0 1rem; line-height: 1.3; scroll-margin-top: 1.5rem; letter-spacing: -.015em; }
.article-body h2 { font-size: 1.6rem; }
.article-body h3 { font-size: 1.3rem; }
.article-body h4, .article-body h5, .article-body h6 { font-size: 1.1rem; }
.heading-link, .heading-link:hover, .heading-link:focus-visible { color: inherit; text-decoration: none; }
.copy-link { position: absolute; top: 50%; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.45; border-radius: .35rem; opacity: 0; transform: translateY(-50%); }
.copy-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h2:hover .copy-link, h3:hover .copy-link, h4:hover .copy-link, h5:hover .copy-link, h6:hover .copy-link, .copy-link:focus-visible { opacity: 1; }
.copy-link:hover { color: var(--text); border-color: var(--muted); }
.copy-link[aria-busy="true"] { cursor: progress; }
.copy-link[data-copy-state] { opacity: 1; z-index: 2; }
.copy-feedback { position: absolute; right: calc(100% + .4rem); top: 50%; transform: translateY(-50%); padding: .2rem .45rem; border: 1px solid var(--border); border-radius: .3rem; background: var(--surface); color: var(--text); font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; }
[data-copy-state="success"] svg { color: var(--link); }
[data-copy-state="error"] svg { color: var(--text); }
.toc { margin: 0 0 2rem; text-align: center; font-size: 1rem; line-height: 1.65; }
.toc h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.toc ol { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .5rem; padding: 0; margin: 0; list-style: none; }
.toc li { margin: 0; white-space: nowrap; }
.toc li:not(:last-child)::after { content: "|"; margin-left: .5rem; color: var(--muted); }
.toc a { white-space: nowrap; }
blockquote { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: .25rem solid var(--border); background: var(--surface); }
ul, ol { padding-left: 1.6rem; margin: 0 0 1.25rem; }
li { margin: .2rem 0; }
code { font-family: var(--mono); font-variant-ligatures: none; }
:not(pre) > code { padding: .12rem .3rem; border-radius: .25rem; background: var(--surface); font-size: .87em; overflow-wrap: anywhere; white-space: break-spaces; }
article img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; }

/* Screenplay-inspired, not a rasterized page or a chat interface. */
.screenplay {
    margin: 2.1rem auto 2.35rem;
    max-width: 42rem;
    font-family: var(--script);
    font-size: 1rem;
    line-height: 1.45;
    font-variant-ligatures: none;
}
.screenplay-speech { margin: 0 auto 1.3rem; max-width: 40ch; }
.screenplay-speaker { text-align: center; margin: 0 0 .1rem; line-height: 1.4; }
.screenplay-speaker strong { font-weight: 400; }
.screenplay-dialogue { margin: 0; text-align: left; }
.screenplay-action { margin: 1.3rem 0; text-align: left; }
.screenplay-action em { font-style: italic; }
.screenplay > :last-child { margin-bottom: 0; }

/* Math glyphs stay as real web-font text, never SVG paths. */
.math-inline { display: inline-block; max-width: 100%; vertical-align: baseline; font-size: 1em; white-space: nowrap; }
.math-inline mjx-container[jax="CHTML"] { font-size: 105% !important; margin: 0 !important; }
.math-inline mjx-container[display="true"] { display: inline-block; }
.math-fallback { display: none; font-family: var(--prose); }
.math-font-failed .math-typeset { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.math-font-failed .math-fallback { display: inline; }

/* Inline diagrams share the same palette and fixed-position semantics. */
.diagram-figure { margin: 1.65rem auto 1.9rem; text-align: center; break-inside: avoid; }
.diagram-svg { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 340px; }

.rotation-svg { max-width: 405px; }
figcaption { font-size: .95rem; line-height: 1.4; color: var(--muted); margin: 0 0 .8rem; }
figcaption strong { font-weight: 600; }
.board-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; margin: .35rem 0; }
.board-comparison .diagram-figure { margin-block: 1.2rem; width: 100%; }
.board-comparison .diagram-svg { max-width: 270px; }
.board-tray { fill: var(--tray); stroke: var(--tile-edge); stroke-width: 1; }
.board-cell rect { fill: var(--surface); stroke: var(--tile-edge); stroke-width: .8; }
.empty-cell rect { fill: var(--blank); stroke: var(--well-edge); }
.excluded-cell rect { fill: var(--excluded); }
.well-edge { fill: none; stroke: var(--well-edge); stroke-width: 1.5; opacity: .8; }
.cell-label, .element-label { fill: var(--text); font: 500 22px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.excluded-mark { fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.route-line { fill: none; stroke: var(--route); stroke-width: 1.5; stroke-linecap: butt; }
.route-head { fill: var(--route); stroke: none; }
.route-halo { fill: none; stroke: var(--surface); stroke-width: 4; stroke-linecap: butt; opacity: .9; }
.triple-cell { fill: var(--surface); stroke: var(--tile-edge); stroke-width: .8; }
.transformation-arrow { fill: none; stroke: var(--route); stroke-width: 2; stroke-linecap: butt; }

.site-footer { margin: 3.5rem 0 0; padding: 1.1rem 0 2.5rem; border-top: 1px solid var(--border); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; color: var(--muted); font-size: .84rem; line-height: 1.3; }
.site-footer p { margin: 0 0 .12rem; }
.site-footer__left { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.site-footer__links { font-size: 1rem; line-height: 1.65; flex: none; white-space: nowrap; }
.license-link { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 5; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--surface); border: 1px solid var(--border); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.clipboard-buffer { position: fixed; top: 0; left: -10000px; width: 1px; height: 1px; }
@media (max-width: 600px) {
    .article-header { margin-bottom: 1rem; }
    .article-body h2 { font-size: 1.4rem; }
    .copy-link { opacity: 1; }
    .site-footer__inner { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .site-footer__links { align-self: stretch; text-align: center; }
    .screenplay { max-width: 100%; }
    .screenplay-speech { width: calc(100% - 2rem); max-width: 40ch; }
}
@media (max-width: 480px) {
    .article-header { grid-template-columns: minmax(0, 1fr); gap: .65rem; padding-top: 4.25rem; }
    h1 { grid-column: 1; font-size: 2.15rem; }
    .board-comparison { grid-template-columns: 1fr; gap: 1.65rem; }
    .screenplay-speech { width: calc(100% - 1rem); }
}
@media (hover: none) { .copy-link { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
    .theme-track::before { background: CanvasText; }
    .diagram-svg { --text: CanvasText; --surface: Canvas; --tile-edge: CanvasText; --route: LinkText; --excluded: Canvas; }
}
@media print {
    :root, html[data-theme], html:not([data-theme]) {
        color-scheme: light;
        --bg: #fff;
        --surface: #fff;
        --soft: #fff;
        --text: #111;
        --muted: #444;
        --border: #aaa;
        --link: #111;
        --tile-edge: #777;
        --route: #555;
        --excluded: #eee;
        --tray: #ddd;
        --blank: #c8c8c8;
        --well-edge: #777;
    }
    .page { width: 100%; max-width: none; }
    body { font-size: 10.5pt; line-height: 1.5; }
    .theme-control, .toc, .copy-link, .skip-link { display: none !important; }
    .article-header { display: block; padding-top: 0; }
    h1 { font-size: 25pt; }
    .subtitle { font-size: 12pt; }
    .article-body h2, .article-body h3 { break-after: avoid; }
    .screenplay { font-size: 12pt; }
    .screenplay-speech { break-inside: avoid; }
    .screenplay-speaker { break-after: avoid; }
    .screenplay-action { break-inside: avoid; }
    .diagram-figure { margin: 1rem auto; }
    .diagram-svg { max-width: 220px; max-height: 240px; }
    .rotation-svg { max-width: 290px; }
    .board-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer { margin-top: 1.5rem; }
}

/* Flexible rather than device-specific responsive adjustments. */
@media (max-width: 480px) {
    .article-header { grid-template-columns: minmax(0,1fr); padding-top: 4rem; gap: .25rem; }
    h1 { grid-column: 1; font-size: clamp(2rem, 9vw, 2.7rem); }
    .subtitle { grid-column: 1; }
    .article-intro, .article-body { font-size: 1.125rem; }
    .screenplay { font-size: 1rem; }
    .screenplay-speech { width: calc(100% - 1.5rem); max-width: 38ch; }
    .screenplay-action { margin-inline: 0; }
    .board-comparison { gap: .7rem; }
    figcaption { font-size: .85rem; min-height: 2.4em; }
}
@media (max-width: 340px) {
    .board-comparison { grid-template-columns: 1fr; }
    .board-comparison .diagram-svg { max-width: 240px; }
    figcaption { min-height: 0; }
}
@media (forced-colors: active) {
    .board-tray, .board-cell rect, .triple-cell { fill: Canvas; stroke: CanvasText; }
    .empty-cell rect { fill: ButtonFace; stroke: CanvasText; }
    .route-line, .transformation-arrow, .excluded-mark { stroke: LinkText; }
    .route-head { fill: LinkText; }
    .route-halo { stroke: Canvas; }
    .cell-label, .element-label { fill: CanvasText; }
}
@media print {
    .article-intro, .article-body { font-size: 11pt; line-height: 1.45; }
    .screenplay { font-size: 10pt; }
    .screenplay-speech { break-inside: avoid; }
    .diagram-svg { max-width: 230px; }
    .rotation-svg { max-width: 290px; }
    .board-comparison { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .site-footer { break-inside: avoid; }
}

/* Navigation remains readable when text is enlarged independently of the viewport. */
.toc li { max-width: 100%; white-space: normal; }
.toc a { white-space: normal; }
@media (max-width: 30rem) {
    .toc li:not(:last-child)::after { display: none; }
    .toc ol { gap: .35rem 1rem; }
}

/* A subregion inherits its parent board's scale, not an independent width cap. */
.board-scale-figure { width: min(100%, 340px); }
.board-scale-figure .diagram-svg {
    width: var(--diagram-fraction, 100%);
    max-width: none;
    max-height: none;
    height: auto;
}
@media print {
    .board-scale-figure { width: min(100%, 230px); }
}

/* Keep each puzzle name together, including a MathJax n and its text suffix.
   The surrounding prose keeps its normal line-breaking behavior. */
.puzzle-name { white-space: nowrap; }

/* 1.9: compact math/prose attachments stay together.
   Do not glue whole clauses or put prose punctuation inside TeX/MathML. */
.math-attached { white-space: nowrap; }
/* Preserve the stacked, text-style fraction; do not enlarge other mathematics. */
.math-inline--fraction { font-size: 1.08em; }

/* Opt-in diagnostics do not alter the ordinary article layout. */
.font-diagnostics { margin: 1rem 0 2rem; padding: 1rem; border: 1px solid var(--border); background: var(--surface); }
.font-diagnostics h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.font-diagnostics pre { max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; padding: .5rem; }
.font-diagnostics button { padding: .5rem .7rem; margin: .25rem; color: var(--text); background: var(--soft); border: 1px solid var(--border); border-radius: .25rem; }
@media print { .font-diagnostics { display: none; } }