* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --baby-blue: #eaf6ff;
    --baby-green: #e9f2ed;
    --baby-yellow: #f9f3e0;
    --baby-red: #fdebe9;
    --baby-lilac: #f5edf9;
    --baby-peach: #fbede2;
    --soft-grey: #f1f1ee;
    --plot-bg: #fff;
    /* Diagram colours stay distinct from the softer article highlights. */
    --plot-blue: #bddbed;
    --plot-green: #c9e3d3;
    --plot-yellow: #f4e3b3;
    --plot-red: #f0c5c1;
    --plot-lilac: #d8c8e9;
    --plot-blue-line: #68879c;
    --plot-green-line: #6b8975;
    --plot-lilac-line: #917da2;
    --plot-outline: #7d8b94;
    --plot-connector: #86949d;
    --plot-grid: #e1e6e9;
    --plot-text: #4b5961;
    --plot-muted: #697780;
    --plot-grey: #edf0f1;
}
html { scrollbar-gutter: stable; }
html.has-dialog { overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.5; color: #333; background: #fafafa; padding: 80px 40px; max-width: 700px; margin: 0 auto; letter-spacing: 0; }
.header { display: flex; align-items: baseline; justify-content: center; gap: 60px; margin-bottom: 60px; flex-wrap: wrap; }
.name { font-size: 1.5rem; font-weight: 600; color: #1a1a1a; text-decoration: none; }
.nav { display: flex; gap: 30px; }
.nav a { color: #666; font-size: 1rem; }
.content { max-width: 600px; margin: 0 auto; }
h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; text-align: center; }
h2 { font-size: 1.15rem; font-weight: 600; color: #1a1a1a; margin: 40px 0 15px; line-height: 1.4; }
h3 { font-size: 0.95rem; font-weight: 600; color: #666; margin: 30px 0 12px; line-height: 1.5; }
p, li { font-size: 0.95rem; color: #444; line-height: 1.7; }
p { margin-bottom: 15px; }
ul, ol { padding-left: 22px; margin: 0 0 20px; }
li { margin-bottom: 8px; padding-left: 2px; }
.word-pairs { list-style: none; padding-left: 0; }
.word-pairs li { margin-bottom: 2px; }
a { color: #258db7; text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; color: #333; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.4; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #258db7; outline-offset: 3px; }
.subtitle, .dateline { text-align: center; color: #666; font-size: 0.85rem; }
.subtitle { margin-bottom: 5px; }
.dateline { margin-bottom: 30px; }
#ascii-hero { margin: 0 auto 30px; overflow: hidden; }
#ascii-iframe { width: 100%; height: 500px; border: none; display: block; pointer-events: none; }
.equation { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 20px 0 28px; font-family: 'Iowan Old Style', Palatino, Georgia, serif; font-size: 1.25rem; }
.equation-condition { font-size: 0.95rem; color: #666; }
.term { display: inline; font-family: 'SF Mono', Menlo, monospace; font-size: 0.85em; background: #f0f0ee; padding: 1px 6px; border: none; border-bottom: 1px dashed #ccc; border-radius: 4px; color: #444; font-weight: 500; line-height: inherit; overflow-wrap: anywhere; }
.term:hover, .term[aria-expanded='true'] { background: var(--baby-blue); }
#term-popover { position: fixed; inset: auto; width: min(260px, calc(100vw - 40px)); padding: 10px 14px; border: 1px solid #00000014; border-radius: 8px; background: #fff; color: #666; box-shadow: 0 4px 20px #00000014, 0 1px 3px #0000000a; margin: 0; max-height: calc(100dvh - 32px); overflow-y: auto; }
.term-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.term-heading strong { font: 600 10px 'SF Mono', Menlo, monospace; color: #444; }
#term-popover p { font-size: 11px; line-height: 1.5; margin-bottom: 8px; color: #666; }
#term-popover a { font-size: 11px; }
.term-close.icon-button { border: 0; padding: 2px; width: 22px; height: 22px; color: #999; }
.term-close.icon-button svg { width: 12px; height: 12px; }
.formula-block, .concept-breakout { background: #f8f8f6; border: 1px solid #0000000f; border-radius: 8px; padding: 18px 22px; margin: 20px 0; }
.formula-block { text-align: center; padding: 12px 18px; margin: 18px 0; }
.formula-label { font: 10px/1.5 'SF Mono', Menlo, monospace; color: #999; text-align: left; margin-bottom: 10px; }
.formula-block math { font-size: 16px; color: #555; margin: 10px 0; }
.formula-block math:first-of-type { margin-top: 8px; }
.formula-block math:last-child { margin-bottom: 6px; }
math mtd { padding: 0.25em 0.35em; }
.technical-source { font: 11px/1.8 'SF Mono', Menlo, monospace; margin: 12px 0 24px; }
#term-equation { padding: 8px 0 12px; color: #666; }
#term-equation math { font-size: 14px; margin: 4px 0; }
.formula-note { margin: 8px 0 0; font-size: 11px; color: #777; line-height: 1.7; }
.technical-notes { margin: 24px 0; }
.technical-notes > summary { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 0; list-style: none; cursor: pointer; color: #777; font: 11px/1.6 'SF Mono', Menlo, monospace; }
.technical-notes > summary::-webkit-details-marker { display: none; }
.technical-notes > summary:focus-visible { outline: 2px solid #258db7; outline-offset: 3px; }
.technical-notes > summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.technical-notes[open] > summary svg { transform: rotate(90deg); }
.footnote-ref { font: 10px/1 'SF Mono', Menlo, monospace; margin-left: 3px; }
.article-footnotes { margin-top: 36px; padding-top: 14px; border-top: 1px solid #e7e7e7; }
.article-footnotes ol { margin: 0; padding-left: 18px; }
.article-footnotes li { font: 11px/1.8 'SF Mono', Menlo, monospace; color: #777; }
.math-operator { display: inline-grid; vertical-align: middle; line-height: 1.3; margin: 0 4px; }
.math-operator small { font-size: 11px; }
.concept-breakout .concept-question { font-family: inherit; font-size: 15px; font-style: normal; font-weight: 500; line-height: 1.6; color: #555; margin-bottom: 8px; }
.concept-breakout p:not(.concept-question) { font-size: 12px; color: #666; margin-bottom: 10px; }
.concept-breakout a { font-size: 11px; }
.dyk-trigger { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px; font: 11px 'SF Mono', Menlo, monospace; color: #666; background: #f4f4f4; border: 1px solid #ddd; border-radius: 6px; padding: 5px 14px; min-height: 28px; }
.dyk-trigger:hover { background: #eee; color: #444; }
.dyk-trigger svg { width: 12px; height: 12px; }
.dyk-modal { position: fixed; inset: 0; margin: auto; background: #fff; border: 1px solid #00000014; border-radius: 12px; padding: 28px; width: min(520px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto; color: #555; box-shadow: 0 8px 40px #0000001f; }
.dyk-modal::backdrop { background: #00000073; }
.dyk-modal h2 { font-size: 13px; color: #444; margin: 0 24px 14px 0; }
.dyk-modal p { font-size: 12px; line-height: 1.7; color: #555; margin-bottom: 12px; }
.dyk-modal a { font-size: 12px; }
.dyk-close.icon-button { position: absolute; top: 10px; right: 10px; border: 0; width: 26px; height: 26px; color: #999; }
.text-highlight { background: rgba(176,206,224,0.35); color: #555; padding: 2px 5px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background 0.2s ease, color 0.2s ease; }
.text-highlight:not(.text-highlight-yellow):not(.text-highlight-green):hover { background: rgba(176,206,224,0.25); color: #333; }
.text-highlight-yellow { background: var(--baby-yellow); }
.text-highlight-green { background: var(--baby-green); }
.article-quote { margin: 20px 0; padding: 12px 0; border: 0; text-align: center; }
.article-quote p { font-family: inherit; font-style: italic; font-size: 0.95rem; color: #555; line-height: 1.7; margin-bottom: 10px; }
.article-quote cite { font: 11px/1.6 'SF Mono', Menlo, monospace; color: #888; }
.link-preview-card { position: fixed; inset: auto; margin: 0; padding: 0; width: 320px; height: 220px; overflow: hidden; background: #fff; border: 1px solid #0000001a; border-radius: 0; box-shadow: 0 6px 24px #0000001f; }
.link-preview-card[data-preview-kind='supplied']:has(img) { height: auto; }
.link-preview-card[data-preview-kind='supplied']:has(img) .link-preview-fallback { display: none; }
.link-preview-card[data-preview-kind='supplied'] .link-preview-media { position: relative; inset: auto; }
.link-preview-media { position: absolute; inset: 0 0 28px; overflow: hidden; pointer-events: none; }
.link-preview-media iframe { display: block; width: 960px; height: 660px; border: 0; transform: scale(0.333); transform-origin: top left; pointer-events: none; }
.link-preview-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.link-preview-card[data-preview-kind='supplied'] img { height: auto; max-height: calc(100dvh - 54px); object-fit: contain; }
.link-preview-media img[hidden] { display: none; }
.link-preview-url { position: absolute; bottom: 0; left: 0; right: 0; height: 28px; padding: 6px 10px; background: #f8f8f8; border-top: 1px solid #0000000f; font: 9px/15px monospace; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-preview-card[data-preview-kind='supplied'] .link-preview-url { position: relative; display: block; }
.link-preview-fallback { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px; height: calc(100% - 28px); overflow: hidden; }
.link-preview-fallback strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 13px; line-height: 1.6; font-weight: 500; color: #666; }
.link-preview-fallback span { color: #999; font: 10px/1.5 monospace; overflow-wrap: anywhere; }
.lesson-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.lesson-tabs button { font: 11px 'SF Mono', Menlo, monospace; color: #888; background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 6px 0; }
.lesson-tabs button[aria-selected='true'] { color: #1a1a1a; background: var(--baby-green); }
.lesson-plot { height: 290px; }
.figure-explanation { font-size: 12px; color: #777; min-height: 44px; margin: 12px 0 0; }
#math-limit-control[data-active='false'] { visibility: hidden; }
.agency-figure { margin: 30px 0; }
.figure-header, .figure-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.figure-header { margin-bottom: 12px; color: #666; font: 11px 'SF Mono', Menlo, monospace; }
.figure-header output { font-variant-numeric: tabular-nums; }
.plot { display: block; width: 100%; height: 360px; background: var(--plot-bg); }
.loop-plot { display: block; width: 100%; height: 240px; background: var(--plot-bg); }
.rl-plot { display: block; width: 100%; height: 430px; background: var(--plot-bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dimension-definitions { list-style: none; padding: 0; margin: 20px 0; }
.dimension-definitions li { border-bottom: 1px solid #edf0eb; padding: 10px 0; margin: 0; }
.dimension-definitions strong { font: 11px/1.6 'SF Mono', Menlo, monospace; }
.dimension-definitions p { margin: 5px 0 0; font-size: 11px; }
.rl-detail { font-size: 12px; line-height: 1.6; color: #666; min-height: 62px; margin: 8px 0; }
.rl-probabilities { display: block; min-height: 34px; font: 11px/1.6 'SF Mono', Menlo, monospace; color: #777; margin: 0 0 12px; }
.figure-toolbar { margin: 12px 0; }
.figure-controls { display: grid; gap: 20px; margin: 18px 0 12px; }
.two-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.figure-controls label { display: block; color: #666; font: 11px 'SF Mono', Menlo, monospace; line-height: 1.6; }
.figure-controls label output { float: right; color: #444; font-variant-numeric: tabular-nums; }
input[type='range'] { --range-progress: 50%; --range-thumb-size: 12px; appearance: none; -webkit-appearance: none; display: block; width: 100%; margin-top: 10px; height: 22px; cursor: pointer; background: transparent; border: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 2px; background: linear-gradient(to right, var(--plot-green) 0%, var(--plot-green) var(--range-progress), #dce3e6 var(--range-progress), #dce3e6 100%); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: var(--range-thumb-size); height: var(--range-thumb-size); margin-top: -4px; border: 1px solid var(--plot-blue-line); border-radius: 50%; background: var(--plot-blue); }
input[type='range']::-moz-range-track { height: 4px; border: 0; border-radius: 2px; background: #dce3e6; }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--plot-green); }
input[type='range']::-moz-range-thumb { width: var(--range-thumb-size); height: var(--range-thumb-size); border: 1px solid var(--plot-blue-line); border-radius: 50%; background: var(--plot-blue); }
.figure-reading { font: 11px/1.7 'SF Mono', Menlo, monospace; color: #666; min-height: 40px; }
.agency-figure figcaption { margin-top: 10px; color: #757575; font: italic 12px/1.5 'Iowan Old Style', Palatino, Georgia, serif; }
.segmented { display: inline-flex; border: 1px solid #d8d8d8; border-radius: 5px; overflow: hidden; max-width: 100%; }
.segmented button { border: 0; padding: 8px 10px; color: #777; background: transparent; font: 11px 'SF Mono', Menlo, monospace; min-height: 34px; }
.segmented button + button { border-left: 1px solid #d8d8d8; }
.segmented button[aria-pressed='true'] { background: var(--plot-green); color: var(--plot-text); }
.segmented button[data-visa='before'][aria-pressed='true'] { background: var(--plot-yellow); }
.icon-controls { display: flex; gap: 6px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 6px; border: 1px solid #ddd; border-radius: 4px; color: #666; background: transparent; }
.icon-button:hover { background: #eaeaea; color: #333; }
.icon-button svg { width: 15px; height: 15px; }
.small-mono { color: #666; font: 11px/1.5 'SF Mono', Menlo, monospace; }
.feedback-description { margin: 16px 0 0; min-height: 100px; }
.feedback-description strong { font-size: 13px; font-weight: 500; }
.feedback-description p { font-size: 12px; line-height: 1.6; margin: 5px 0 0; color: #666; }
.dimensions-table { margin: 25px 0; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
caption { font-size: 13px; text-align: left; margin-bottom: 14px; color: #555; }
th, td { text-align: left; font-size: 12px; font-weight: 400; line-height: 1.6; padding: 12px 0; vertical-align: top; border-bottom: 1px solid #e3e3e3; overflow-wrap: anywhere; }
th { width: 31%; padding-right: 16px; color: #444; font-weight: 500; }
thead th { color: #777; font-size: 11px; font-weight: 400; }
td { color: #666; }
.axis-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.encoding-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.space-legends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 14px 0 20px; font: 10px/1.6 'SF Mono', Menlo, monospace; color: #777; }
.encoding-scale { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.colour-ramp { display: block; flex: 1; max-width: 90px; height: 6px; background: linear-gradient(to right, var(--plot-blue), var(--plot-red)); }
.size-key { display: inline-flex; align-items: center; justify-content: space-around; gap: 18px; height: 10px; }
.size-key i { width: 4px; height: 4px; border-radius: 50%; background: var(--plot-lilac); box-shadow: 0 0 0 1px var(--plot-outline); }
.size-key i + i { width: 9px; height: 9px; }
.axis-field { min-width: 0; color: #999; font: 11px 'SF Mono', Menlo, monospace; }
.axis-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; text-align: left; border: 0; border-bottom: 1px solid #dce2de; border-radius: 0; background: transparent; padding: 8px 1px; color: #666; font: 11px/1.5 'SF Mono', Menlo, monospace; }
.axis-value { min-width: 0; overflow-wrap: anywhere; }
.axis-select svg { width: 12px; height: 12px; color: #9aa9a3; flex-shrink: 0; }
.axis-select:hover, .axis-select[aria-expanded='true'] { border-bottom-color: #ccc; color: #666; background: var(--baby-green); }
.axis-menu { position: fixed; inset: auto; margin: 0; padding: 6px; width: 260px; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #00000014; border-radius: 8px; background: #fff; box-shadow: 0 4px 20px #00000014, 0 1px 3px #0000000a; }
.axis-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; min-height: 34px; text-align: left; background: transparent; border: 0; border-radius: 4px; color: #666; font: 11px/1.5 'SF Mono', Menlo, monospace; }
.axis-menu button svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0; }
.axis-menu button[aria-selected='true'] { background: var(--baby-green); color: #666; }
.axis-menu button[aria-selected='true'] svg { opacity: 1; }
.axis-menu button:hover, .axis-menu button:focus-visible { background: var(--baby-green); outline: none; box-shadow: inset 0 0 0 1px #ccc; }
.dimension-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; list-style: none; padding: 14px 0; margin: 8px 0 14px; border-top: 1px solid #e5e8e6; }
.dimension-index li { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; padding: 0; color: #999; font: 11px/1.5 'SF Mono', Menlo, monospace; }
.dimension-number { color: #aaa; font-size: 10px; }
.dimension-index .term { background: transparent; font: inherit; border: 0; border-radius: 0; padding: 0; text-align: left; color: #777; }
.dimension-index li[data-shown='true'] .term, .dimension-coordinate { color: #729d8f; }
.dimension-coordinate { min-width: 10px; flex-shrink: 0; font-size: 10px; }
.space-plot { position: relative; width: 100%; aspect-ratio: 1.12; background: var(--plot-bg); overflow: hidden; touch-action: pan-y; }
.space-plot canvas { display: block; width: 100%; height: 100%; }
.space-plot canvas[hidden] { display: none; }
.space-label { position: absolute; z-index: 1; font: 11px/1.4 'SF Mono', Menlo, monospace; color: var(--plot-text); max-width: 100px; pointer-events: none; }
.space-fallback { padding: 35px; font-size: 13px; }
#agency-ending { margin-top: 40px; }
::selection { background: var(--baby-blue); color: #1a1a1a; }
@media (max-width: 600px) {
    .link-preview-card { display: none; }
    body { padding: 40px 20px; }
    .header { flex-direction: column; gap: 30px; align-items: center; }
    .nav { gap: 20px; }
    .plot { height: 340px; }
    .figure-controls { gap: 14px; }
    .feedback-description { min-height: 130px; }
    .axis-controls { grid-template-columns: 1fr; gap: 8px; }
    .axis-field { display: flex; align-items: center; gap: 14px; }
    .axis-field > span { min-width: 36px; }
    .rl-detail { min-height: 100px; }
    .axis-select { min-height: 40px; font-size: 12px; }
    .axis-menu button { min-height: 40px; }
    .concept-breakout { padding: 16px; }
    .formula-block { padding: 12px 14px; }
    .dyk-modal { padding: 24px; }
    .dimension-index { gap: 12px; }
    .space-plot { aspect-ratio: 0.95; }
    .space-label { max-width: 84px; }
}
@media (pointer: coarse) {
    .icon-button { width: 44px; height: 44px; }
    .axis-menu button { min-height: 44px; }
    .dyk-trigger { min-height: 40px; }
    .segmented button { min-height: 44px; }
    input[type='range'] { height: 44px; }
}
@media (max-width: 360px) {
    .two-columns { grid-template-columns: 1fr; gap: 8px; }
    .nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}