/* Shared visual language. Loaded last on every page. */
:root {
  --bg: #080808;
  --panel: #101010;
  --text: #fafafa;
  --muted: #b1b1b1;
  --border: #303030;
  --ink: #f5f5f5;
  --rule: #525252;
  --quiet: #949494;
  --purple: #dedede;
  --green: #dedede;
  --signal-green: #8dff72;
  --signal-red: #ff5c52;
}

body { background: var(--bg); color: var(--text); }
header { background: #080808f5; border-color: var(--border); backdrop-filter: none; }
header nav { gap: 28px; }
.brand { flex-shrink: 0; font-weight: 550; letter-spacing: -.7px; }
.brand img, .brand-mark { width: 28px; height: 34px; object-fit: contain; }
.brand-light { animation: brand-blink 3.6s step-end infinite; }
@keyframes brand-blink { 0%, 94%, 100% { opacity: 1; } 95%, 99% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .brand-light { animation: none; } }
footer .brand img { width: 24px; height: 29px; }
.nav-links { gap: 22px; color: var(--muted); }
.nav-links [aria-current=page] { color: #fff; }
h1, h2, h3 { font-weight: 500; }
h1 span { background: none; color: var(--ink); }
h2 span { color: #b7b7b7; }
.section-intro { align-items: flex-start; gap: 48px; }
.section-intro > p { padding-top: 6px; color: var(--muted); }
.section-label, .eyebrow { color: #a8a8a8; }
.section-label { font-size: 11px; letter-spacing: .09em; }
.section-label .dot { display: none; }
.section, .engine-section, .kv-lab { padding-top: 64px; }
.source-identity, .service-note, .source-note { color: var(--quiet); font-size: 13px; }
.source-identity a { color: #d6d6d6; text-underline-offset: 4px; }

/* The mark gets its own space. The explanation stays beside it. */
.hero { padding-top: 68px; }
.hero-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; align-items: center; }
.hero-message { min-width: 0; }
.announcement { font-size: 10px; letter-spacing: .13em; color: #bbb; }
.announcement .arrow { color: #ddd; }
.hero h1 { font-size: clamp(42px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.045em; margin: 28px 0; }
.hero-copy { font-size: 16px; color: #bcbcbc; max-width: 630px; }
.hero-message .hero-actions { margin: 30px 0 0; gap: 24px; }
.hero > .source-identity { margin: 40px 0 48px; max-width: 760px; }
.rack-figure { margin: 16px 0 0; color: #fff; min-width: 0; align-self: start; }
.rack-drawing { display: block; width: 100%; max-width: 360px; margin: auto; overflow: visible; }
.rack-depth { color: #d4d4d4; }
.rack-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; font: 10px/1.5 monospace; color: #999; }
.rack-tagline { flex: 1; min-width: 0; font: 12px/1.6 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #aaa; }
.rack-replay { border: 0; background: none; color: #bbb; padding: 8px 0; font: inherit; min-width: 116px; text-align: right; }
.rack-replay:hover { color: white; }
.rack-panel-labels { font: 8px monospace; color: #aaa; }
.rack-key { display: flex; flex-basis: 100%; justify-content: space-between; gap: 12px; }
.rack-key > span { display: inline-flex; align-items: center; gap: 6px; }
.rack-key i { display: inline-block; width: 7px; color: #e5e5e5; font: 20px/10px monospace; transform: translateY(-4px); }
.rack-key .rack-key-proposed { opacity: .35; }
.rack-key .rack-key-rejected { font-size: 11px; transform: none; }
.rack-logs { font: 20px monospace; text-anchor: middle; color: #e5e5e5; transition: opacity .25s; }
.rack-logs [data-state=rejected] [data-proposed] { font-size: 11px; }
.rack-log-target { cursor: pointer; outline: none; }
.rack-log-target rect { fill: transparent; }
.rack-log-target:focus-visible rect { stroke: #fff; stroke-width: 1; stroke-dasharray: 2 3; }
.rack-log-target[aria-disabled=true] { cursor: default; }
.rack-reaction { fill: currentColor; font: 10px monospace; pointer-events: none; }
.rack-figure[data-power=stopping] .rack-logs { opacity: .3; }
.rack-figure[data-power=off] .rack-logs { opacity: 0; }
.rack-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-foot { text-align: left; margin-top: 32px; padding-bottom: 36px; }
.hero-foot > div { justify-content: flex-start; gap: 40px; margin-top: 18px; font-size: 13px; }
.hero-foot > span { font-size: 10px; color: var(--quiet); }

/* Crisp controls. Selection is expressed by contrast and a rule. */
.button, .button.small, .choice-trigger, .choice-menu, .choice-option,
input, input[type=number], select, textarea, .studio-editor input:not([type=checkbox]), .studio-editor textarea,
.pattern-options button, .architecture-options button, .studio-controls,
.studio-progress button > span, .pill, .guarantee-tag, .inline-insight,
.literature-jump a, .testing-paper-links a, .local-path-flow span:not([aria-hidden]) {
  border-radius: 0;
  box-shadow: none;
}
.button { background: transparent; border-color: #666; color: #f5f5f5; gap: 16px; }
.button:hover { background: #202020; border-color: #fff; }
.button.primary { background: #f5f5f5; color: #080808; border-color: #f5f5f5; }
.button.primary:hover { background: #fff; box-shadow: none; }
.button.small { font-size: 12px; }
.subtle, summary { color: #b4b4b4; font-size: 12px; }
.choice-trigger, .studio-editor input:not([type=checkbox]), .studio-editor textarea,
select, input[type=number] { background: #101010; border-color: #515151; color: #eee; font-size: 13px; }
.choice-trigger:hover, .choice-trigger[aria-expanded=true] { background: #181818; border-color: #ddd; box-shadow: none; }
.choice-menu { background: #141414; border-color: #686868; padding: 5px; box-shadow: 0 12px 30px #0008; }
.choice-option.is-active { background: #2c2c2c; }
.choice-title, .choice-check { color: #f5f5f5; }
.choice-option small, .choice-chevron { color: #aaa; }
.choice-trigger:focus-visible, button:focus-visible, a:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #fff; outline-offset: 4px;
}
label:not(.checkbox), .checkbox { color: #bcbcbc; font-size: 12px; }
input[type=checkbox], input[type=range] { accent-color: #eee; }
.pattern-options { gap: 0; }
.pattern-options button { background: transparent; padding: 17px 14px; border-color: #3f3f3f; min-width: 0; }
.pattern-options button > span { font-size: 18px; color: #aaa; }
.pattern-options b { color: #eee; font-size: 13px; padding-right: 12px; }
.pattern-options small { font-size: 11px; color: #aaa; line-height: 1.6; }
.pattern-options button[aria-pressed=true] { background: #1c1c1c; border-color: #eee; z-index: 1; }
.pattern-options button[aria-pressed=true]:after { color: #fff; right: 9px; top: 10px; }
.architecture-options button { background: transparent; }
.architecture-options button[aria-pressed=true] { background: #181818; border-color: #ddd; }

/* Flat sections and a small set of rules replace nested rounded surfaces. */
.studio, .lab, .console, .benchmark, .guarantee-builder, .guarantee-cards,
.code-panel, .plan-preview, .backend-panel, .feature-grid, .moving-diagram,
.demo-store, .meta-cases article, .testing-run, .testing-run pre, .bench-output pre,
.journal-node, .topology-node, .mobile-replicas > div, .scenario-plan-context {
  border-radius: 0; box-shadow: none; background: var(--bg); border-color: var(--border);
}
.studio, .lab, .benchmark, .guarantee-builder { border-left: 0; border-right: 0; }
.studio-header, .studio-progress, .studio-footer, .lab-toolbar, .lab-transport,
.console-top, .bench-config, .guarantee-config, .studio-canvas, .guarantee-visual,
.lab-story, .log-ledger, .propagation-stage { background: var(--bg); border-color: var(--border); }
.studio-editor, .bench-output { background: var(--bg); }
.studio-header { padding-left: 0; padding-right: 0; }
.studio-editor { padding-left: 0; padding-right: 32px; }
/* Keep focus inside flush fields and adjoining preset boxes. */
.studio :is(input:not([type=checkbox]), textarea, select, .choice-trigger, .pattern-options button):focus-visible { outline-offset: -2px; }
.studio .pattern-options button:hover:not([aria-pressed=true]) { background: #141414; border-color: #999; }
.studio .pattern-options button:focus-visible { z-index: 2; }
.studio-progress { padding-left: 0; }
.studio-controls { background: #111; border-color: #444; }
.studio-page h3 { font-size: 27px; }
.page-intro { font-size: 13px; }
.studio-progress button, .studio-save, .studio-controls > span { color: #a7a7a7; }
.studio-progress button[aria-current] > span { color: #080808; background: #f5f5f5; border-color: #f5f5f5; }
.studio-footer { font-size: 11px; color: #999; }
.canvas-label { font-size: 10px; color: #aaa; }
.canvas-label > span:last-child { color: #999; }
.journal-heading, .journal-heading span:last-child { font-size: 10px; color: #aaa; }
.journal-diagram { min-height: 0; }
.journal-node { border-color: #747474; padding: 17px; }
.journal-node b, .journal-node small { color: #ccc; }
.journal-node b { font-size: 11px; }
.journal-node small { font-size: 10px; color: #aaa; }
.active-node { border-color: #f5f5f5; }
.node-symbol { display: none; }
.journal-state-row .journal-node b { font-size: 10px; }
.journal-state-row .journal-node small { font-size: 9px; color: #aaa; }
.journal-diagram figcaption { font-size: 9px; color: #aaa; }
.canvas-summary strong { font-size: 13px; color: #eee; }
.canvas-summary p { font-size: 12px; color: #aaa; }
.history-figure > g:first-child path { visibility: hidden; }
.history-figure > g:first-child path:nth-child(4n+1) { visibility: visible; stroke: #bbb; }
.history-figure text { fill: #bcbcbc; }
.lab-toolbar { padding: 20px 0; }
.demo-store { border: 0; border-bottom: 1px solid var(--border); margin: 0; padding: 24px 0; }
.lab .lab-transport { padding: 18px 0; background: var(--bg); }
.lab-story { border-top: 1px solid var(--border); }
.lab-story p { font-size: 13px; }
.log-table th, .log-position, .log-ledger-heading > span { color: #b7b7b7; }
.log-command summary { color: #e6e6e6; }
.log-command pre { background: #101010; border-radius: 0; color: #ccc; }
.replica-badge { border-radius: 0; }
.mobile-replicas > div { border-color: #666; }
.mobile-replicas strong { color: #eee; }
.mobile-replicas small, .mobile-replicas span { color: #aaa; }
.log-ledger-footer, #log-empty { color: #aaa; }
.log-applied span { border: 0; border-radius: 0; background: transparent; }
.log-applied span[data-applied=true] { background: transparent; color: #eee; }
.log-applied span[data-applied=false] { color: #777; }
.log-result-mark { display: inline-block; width: 14px; font: 18px/1 monospace; color: #eee; text-align: center; margin-right: 5px; }
.log-result-mark[data-outcome=rejected] { font-size: 12px; }
.meta-cases { border-top: 1px solid var(--border); gap: 40px; }
.meta-cases article { border: 0; padding: 28px 0; }
.meta-cases p, .research-columns p, .literature-section > p { color: var(--muted); }
.meta-cases a, .publication a { color: #eee; }
.research-note { color: #aaa !important; }
.publication { color: #aaa; }
.literature-jump { gap: 12px 24px; }
.literature-jump a { padding: 8px 0; border-width: 0 0 1px; color: #d5d5d5; }
.literature-jump a:hover { border-color: #fff; color: #fff; }
.foundation-steps { color: #ddd; }
.testing-layers p, .testing-run p, .testing-scope p, .testing-papers p { color: #b1b1b1; }
.testing-example { border-color: #777; }
.testing-example strong { color: #eee; }
.testing-source { color: #aaa; font-size: 11px; }
.testing-run { border-width: 1px 0; padding: 28px 0; }
.testing-run pre { border-color: #666; color: #eee; background: #101010; }
.performance { background: var(--bg); }
.guarantee-cards { border-width: 0; gap: 0 32px; }
.guarantee-cards article { background: var(--bg); border-width: 1px 0 0; border-color: var(--border); padding: 24px 0; }
.guarantee-cards p { color: #aaa; font-size: 13px; }
.topology-node { border-color: #777; }
.topology-node strong { color: #f5f5f5; font-size: 12px; }
.topology-node small { color: #aaa; font-size: 10px; }
.mini-history i { background: transparent; border-left: 1px solid #777; color: #ddd; }
.topology-wire:after { content: '.'; width: 12px; height: 16px; background: transparent; border-radius: 0; box-shadow: none; font: 22px/1 monospace; color: #eee; top: -17px; text-align: center; }
.topology[data-scenario=partition] .topology-wire:after { content: 'x'; background: transparent; font-size: 13px; top: -9px; }
.entries .entry { border: 0; background: transparent; border-radius: 0; gap: 4px; }
.entry .entry-mark { color: #eee; font: 28px/1 monospace; }
.entry b, .entry small { color: #aaa; font: 10px/1.5 monospace; }
#operation-result:before { content: '. '; font-family: monospace; }
#operation-result[data-outcome=rejected]:before { content: 'x '; }
.code-panel, .bench-output pre { background: #0c0c0c; border-color: #4b4b4b; }
.code-panel pre code, .database-source code { color: #d9d9d9; font-size: 12px; }
.code-tabs button { color: #aaa; font-size: 11px; }
.code-tabs button.active { color: #fff; border-color: #fff; }
.setup-note, .measurement-note p { color: #aaa; font-size: 12px; }
.workload span { color: #aaa; font-size: 12px; }

/* One drawing system for the overview, algorithms, and research animations. */
.moving-diagram { border-width: 1px 0; padding: 28px 0; margin: 32px 0; }
.diagram-viewport { padding: 12px 0; }
.diagram-viewport rect, .flow-node rect { fill: var(--bg); stroke: #737373; rx: 0; ry: 0; stroke-width: 1; }
.diagram-viewport .is-active rect, .flow-node.is-current rect { fill: var(--bg); stroke: #fff; stroke-width: 1.5; }
.flow-node.is-complete rect { fill: var(--bg); stroke: #999; }
.diagram-title, .flow-node-title { fill: #f5f5f5; }
.diagram-detail, .flow-node-detail { fill: #ababab; }
.diagram-wire, .flow-wire { stroke: #8b8b8b; stroke-width: 1; }
.diagram-viewport .is-active .diagram-wire, .is-current .flow-wire { stroke: #eee; }
.diagram-packet, .flow-packet { fill: #fff; filter: none; }
/* The same quiet glyphs as the rack. Each record travels once and settles. */
.log-mark { opacity: 0; offset-distance: calc(100% - 9px); offset-rotate: 0deg; offset-anchor: 0px 0px; }
.log-mark text { fill: #eee; stroke: var(--bg); stroke-width: 4; paint-order: stroke fill; text-anchor: middle; font: 24px/1 monospace; }
.log-mark .log-mark-cross { font-size: 13px; opacity: 0; }
.log-mark[data-outcome=rejected] .log-mark-dot, .log-mark[data-outcome=lost] .log-mark-dot { opacity: 0; }
.log-mark[data-outcome=rejected] .log-mark-cross, .log-mark[data-outcome=lost] .log-mark-cross { opacity: 1; }
.is-active > .log-mark, .is-current > .log-mark { opacity: 1; }
.is-playing .is-active > .log-mark, .playing .is-current > .log-mark { animation: log-travel 1.6s cubic-bezier(.22,.61,.36,1) both; }
:is(.is-playing .is-active, .playing .is-current) > .log-mark:not([data-outcome=success]) .log-mark-dot { animation: log-dot-resolve 1.6s step-end both; }
:is(.is-playing .is-active, .playing .is-current) > .log-mark:not([data-outcome=success]) .log-mark-cross { animation: log-cross-resolve 1.6s step-end both; }
@keyframes log-travel { from { offset-distance: 4px; opacity: 0; } 12% { opacity: 1; } to { offset-distance: calc(100% - 9px); opacity: 1; } }
@keyframes log-dot-resolve { 0%, 85% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes log-cross-resolve { 0%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .log-mark { display: block; animation: none !important; } }
.diagram-controls { border-color: var(--border); }
.diagram-count, .diagram-status { color: #bcbcbc; }
.diagram-steps { gap: 0 32px; }
.diagram-steps button { border-radius: 0; color: #b7b7b7; border-width: 0 0 0 1px; padding: 12px 14px 12px 38px; }
.diagram-steps button:before { color: #aaa; }
.diagram-steps button[aria-current=step] { background: transparent; color: #fff; border-color: #fff; }
.diagram-steps button[aria-current=step]:before { color: #fff; }
.english-algorithm { background: var(--bg); }
.english-algorithm button.is-current { background: #171717; color: white; border-color: #ddd; }
.algorithm-code { color: #c5c5c5; }
.flow-figure figcaption p { color: #aaa; font-size: 13px; }
.flow-node:focus-visible { outline: none; }
.flow-node:focus-visible rect { stroke: #fff; stroke-width: 2.5; }
footer { color: #aaa; gap: 24px; }
footer > span { font-size: 11px; }

/* Architecture explains the system; Examples contains the scenario controls. */
.architecture-intro h1 { font-size: clamp(38px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -.045em; margin: 18px 0 0; }
.architecture-intro h1 span { color: #b7b7b7; }
.architecture-intro .section-intro > p { max-width: 510px; }
.architecture-jump { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 25px 0; font-size: 12px; color: #bbb; }
.architecture-jump a { text-underline-offset: 5px; }
.architecture-jump a:hover { color: #fff; text-decoration: underline; }
.architecture-section { margin-top: 45px; border-top: 1px solid var(--border); scroll-margin-top: 88px; padding-bottom: 15px; }
.architecture-page .diagram-region rect { fill: none; stroke: #555; stroke-dasharray: 3 4; }
.diagram-region text { fill: #aaa; font: 9px monospace; letter-spacing: .5px; }
.architecture-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.architecture-table caption { text-align: left; font-size: 18px; color: #eee; margin-bottom: 20px; }
.architecture-table th, .architecture-table td { border-bottom: 1px solid var(--border); padding: 16px 20px 16px 0; vertical-align: top; line-height: 1.7; }
.architecture-table thead th { font: 10px monospace; color: #aaa; text-transform: uppercase; }
.architecture-table tbody th { width: 27%; font-weight: 500; color: #eee; }
.architecture-table td { color: #b1b1b1; }
.architecture-note { max-width: 900px; font-size: 13px; color: #aaa; line-height: 1.8; margin: 25px 0; }
.architecture-note a { color: #ddd; }
.architecture-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 35px 0; }
.architecture-modes h3, .architecture-callout h3 { font-size: 21px; margin: 0 0 14px; }
.architecture-modes p, .architecture-callout p { font-size: 14px; line-height: 1.8; color: #b1b1b1; }
.architecture-modes .architecture-route { font: 11px/1.8 monospace; color: #ddd; margin-top: 18px; }
.architecture-subheading { font-size: 21px; margin-top: 46px; }
.architecture-algorithm { padding-left: 22px; color: #ddd; font-size: 14px; line-height: 1.8; }
.architecture-algorithm li { padding-left: 8px; margin: 0 0 14px; }
.architecture-algorithm li::marker { color: #888; font: 11px monospace; }
.architecture-callout { border-top: 1px solid var(--border); padding-top: 28px; max-width: 850px; }
.architecture-details { border-bottom: 1px solid var(--border); padding: 24px 0; }
.architecture-details summary { display: flex; justify-content: space-between; gap: 20px; color: #eee; font-size: 16px; cursor: pointer; list-style: none; }
.architecture-details summary::-webkit-details-marker { display: none; }
.architecture-details[open] summary { margin-bottom: 26px; }
.architecture-details p, .architecture-interfaces { max-width: 900px; color: #b1b1b1; font-size: 14px; line-height: 1.8; }
.architecture-interfaces > div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 14px 0; }
.architecture-interfaces dt { color: #eee; }
.architecture-interfaces dd { margin: 0; }
.architecture-code { background: #101010; border: 1px solid var(--border); color: #ddd; padding: 22px; overflow-x: auto; font: 12px/1.9 monospace; max-width: 900px; }
.architecture-next { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 36px 0; }
@media (max-width: 900px) {
  header nav { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 16px; }
  .nav-links { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
}
@media (max-width: 700px) {
  .architecture-section { margin-top: 30px; }
  .architecture-modes { grid-template-columns: 1fr; gap: 30px; margin: 28px 0; }
  .architecture-table { font-size: 12px; }
  .architecture-table th, .architecture-table td { padding: 14px 12px 14px 0; }
  .architecture-table tbody th { width: 34%; }
  .architecture-interfaces > div { grid-template-columns: 1fr; gap: 4px; }
  .architecture-details summary { font-size: 14px; }
  .architecture-code { padding: 14px; font-size: 11px; }
}

@media (max-width: 1100px) {
  header nav { gap: 24px; }
  .nav-links { gap: 16px; font-size: 12px; }
  header nav > .button.small { display: none; }
  .hero-intro { grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: 24px; }
  .hero h1 { font-size: 46px; }
  .hero-message .hero-actions { flex-wrap: wrap; gap: 20px; }
  .section-intro { gap: 28px; }
  .section-intro h2 { font-size: 38px; }
  .section-intro > p { max-width: 330px; }
}
@media (max-width: 700px) {
  header nav { height: auto; padding-top: 14px; padding-bottom: 12px; flex-wrap: wrap; gap: 14px; }
  .nav-links { width: 100%; margin: 0; justify-content: space-between; gap: 12px 16px; font-size: 12px; }
  .brand { font-size: 22px; }
  .hero { padding-top: 36px; }
  .hero-intro { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
  .hero h1 { font-size: clamp(36px, 8.8vw, 48px); margin: 22px 0; }
  .hero-copy { font-size: 15px; }
  .hero-message .hero-actions { margin-bottom: 0; }
  .rack-figure { width: 100%; max-width: 320px; margin: 0; order: -1; align-self: center; }
  .rack-drawing { max-width: 230px; }
  .hero > .source-identity { margin: 26px 0 32px; }
  .hero-foot > div { gap: 16px 24px; }
  .section, .engine-section, .kv-lab { padding-top: 40px; }
  .section-intro h2 { font-size: 34px; }
  .section-intro > p { max-width: none; padding-top: 0; font-size: 14px; }
  .studio-editor { padding: 24px 0; }
  .studio-canvas { padding: 24px 8px; }
  .studio-progress { padding: 20px 0; }
  .studio-progress button { gap: 4px; font-size: 10px; }
  .studio-progress > i { width: 6px; }
  .studio-header { padding: 0; }
  .studio-controls { padding: 12px 8px; }
  .studio-controls .button { font-size: 11px; }
  .studio-footer { padding: 15px 0; font-size: 10px; }
  .pattern-options { grid-template-columns: 1fr; }
  .pattern-options button { padding: 14px; }
  .lab-toolbar { padding: 20px 0; }
  .demo-store { padding: 20px 0; }
  .lab-transport { padding: 18px 0; }
  .lab-story { padding: 24px 0; }
  .lab-story > div { min-width: 0; flex-basis: 240px; }
  .log-table-wrap, .log-ledger-heading, .log-ledger-footer { padding-left: 0; padding-right: 0; }
  .log-table th { font-size: 10px; }
  .log-table td { font-size: 11px; }
  .mobile-replicas { gap: 6px; }
  .mobile-replicas > div { padding: 10px 6px; }
  .bench-config, .bench-output, .guarantee-config, .guarantee-visual { padding: 24px 0; }
  .topology-node strong { font-size: 10px; }
  .topology-node small { font-size: 9px; }
  .meta-cases { gap: 0; }
  .meta-cases article + article { border-top: 1px solid var(--border); }
  .moving-diagram { padding: 20px 0; }
  .diagram-steps { gap: 6px; }
  .diagram-steps button { font-size: 13px; }
  .diagram-controls { gap: 8px; }
  .diagram-controls .button { padding: 9px; font-size: 11px; }
  footer > span { flex-basis: 100%; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}