:root {
  --ink: #172033;
  --muted: #5d687b;
  --line: #dce3ec;
  --paper: #ffffff;
  --page: #f3f6fa;
  --navy: #172a4a;
  --blue: #246bfd;
  --blue-soft: #eaf1ff;
  --integer: #087f8c;
  --integer-soft: #e5f7f7;
  --sign: #d9485f;
  --sign-soft: #ffe9ed;
  --exponent: #8b5cf6;
  --exponent-soft: #f1ebff;
  --fraction: #0b8f65;
  --fraction-soft: #e5f7ef;
  --success: #157347;
  --success-soft: #e8f6ee;
  --warning: #9a6700;
  --warning-soft: #fff6d8;
  --danger: #b42336;
  --danger-soft: #fff0f2;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
button, input, select { font: inherit; }
button { cursor: pointer; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.skip-link { position: fixed; top: .5rem; left: .5rem; transform: translateY(-150%); z-index: 20; background: var(--navy); color: white; padding: .7rem 1rem; border-radius: 8px; }
.skip-link:focus { transform: none; }
.app-shell { width: min(1380px, 100%); margin: 0 auto; padding: 1rem clamp(.65rem, 2vw, 1.5rem) 4rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 1.5rem; align-items: center; padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.eyebrow, .lesson-number, .aside-label, .lab-kicker { margin: 0 0 .4rem; color: var(--muted); font-size: .8rem; font-weight: 650; }
.hero h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -.025em; }
.lead { max-width: 780px; margin: .45rem 0 0; color: var(--muted); font-size: 1rem; }
.hero-progress { min-width: 0; }
.progress-meta { display: flex; justify-content: space-between; gap: .8rem; align-items: center; font-size: .9rem; }
.text-button { padding: 0; color: var(--muted); background: none; border: 0; text-decoration: underline; }
.progress-track, .quiz-progress-track { height: 5px; background: #e0e5ec; border-radius: 99px; overflow: hidden; margin-top: .4rem; }
.progress-track span, .quiz-progress-track span { display: block; width: 0; height: 100%; background: var(--blue); border-radius: inherit; transition: width .35s ease; }

.path-nav { margin: 1rem 0; }
.path-group-label { margin: .6rem 0 .35rem; color: var(--muted); font-size: .8rem; }
.path-group { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.path-step { display: grid; grid-template-columns: 2.2rem 1fr; grid-template-rows: auto auto; column-gap: .65rem; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .7rem; transition: .18s ease; }
.path-step > span { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #edf1f6; font-weight: 800; }
.path-step strong { font-size: .9rem; }
.path-step small { color: var(--muted); }
.path-step:hover, .path-step:focus-visible { border-color: #7ea8fb; }
.path-step.active { color: var(--ink); background: var(--blue-soft); border-color: var(--blue); }
.path-step.active small { color: var(--muted); }
.path-step.active > span { background: var(--blue); color: white; }
.path-step.complete > span { background: var(--success); color: white; }

.lesson-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; }
.lesson-layout > *, .lesson-content, .lesson-aside { min-width: 0; }
.lesson-aside { position: sticky; top: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.aside-label { color: var(--blue); }
#currentGoal { margin: .3rem 0 1rem; font-weight: 700; }
.standard-note { border-top: 1px solid var(--line); padding-top: 1rem; font-size: .85rem; color: var(--muted); }
.standard-note p { margin-bottom: 0; }
.standard-note code { color: var(--ink); }
.lesson { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.8rem); }
.lesson[hidden] { display: none; }
.lesson-heading { max-width: 870px; margin-bottom: 1.5rem; }
.lesson-number { color: var(--blue); }
.lesson-heading h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.25; letter-spacing: -.025em; }
.lesson-heading p { color: var(--muted); font-size: 1rem; }

.core-idea { background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.core-idea > code { display: block; color: var(--ink); text-align: center; font-size: clamp(.82rem, 2.6vw, 1.15rem); letter-spacing: .04em; overflow-wrap: anywhere; }
.interpretation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.interpretation-grid article { background: white; border: 1px solid var(--line); border-radius: 6px; padding: .8rem; text-align: center; }
.interpretation-grid small, .interpretation-grid strong { display: block; }
.interpretation-grid small { color: var(--muted); }
.interpretation-grid strong { margin-top: .25rem; font-size: 1.05rem; }
.interpretation-grid .float-accent { border-color: #cdbbfa; background: #faf8ff; }
.type-grid, .theory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.type-card, .info-card { position: relative; border: 1px solid var(--line); border-radius: 6px; padding: 1rem; overflow-wrap: anywhere; }
.type-card h3, .info-card h3 { margin: 0 0 .4rem; }
.type-card p, .info-card p { color: var(--muted); }
.type-card > code { display: inline-block; background: rgba(255,255,255,.7); padding: .4rem .55rem; border-radius: 7px; font-weight: 800; }
.type-icon { float: right; color: rgba(0,0,0,.16); font: 800 1.8rem monospace; }
.integer-card, .float-card { background: #fbfcfe; }
.info-card ol, .info-card ul { padding-left: 1.25rem; }
.info-card code { background: #edf1f5; border-radius: 4px; padding: .1rem .25rem; }
.memory-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1rem 0; }
.memory-strip span { padding: .7rem; text-align: center; color: var(--muted); border-right: 1px solid var(--line); font-size: .75rem; }
.memory-strip span:last-child { border: 0; }
.memory-strip code { display: block; color: var(--ink); font-size: .9rem; font-weight: 800; }
.key-rule { display: flex; gap: .8rem; align-items: flex-start; background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.key-rule > span { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; }
.key-rule p { margin: 0; }

.weight-table { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; margin: 1rem 0; }
.weight-table div { min-width: 0; background: var(--integer-soft); border: 1px solid #9ed9da; border-radius: 8px; padding: .65rem .2rem; text-align: center; }
.weight-table small, .weight-table strong { display: block; }
.weight-table small { font-size: .68rem; color: var(--muted); }
.weight-table .negative-weight { background: var(--sign-soft); border-color: #f1a7b3; color: var(--danger); }

.lab-card, .spacing-lab, .operation-demo, .overflow-demo { margin: 1.2rem 0; border: 1px solid var(--line); border-radius: 8px; padding: clamp(1rem, 3vw, 1.5rem); background: #fbfcfe; }
.lab-heading span { color: var(--muted); font-size: .8rem; font-weight: 650; }
.lab-heading h3 { margin: .2rem 0 .6rem; font-size: 1.2rem; }
.lab-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.lab-controls label { display: grid; gap: .3rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
input, select { min-height: 44px; color: var(--ink); background: white; border: 1px solid #b9c5d5; border-radius: 9px; padding: .6rem .75rem; }
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(36,107,253,.26); outline-offset: 2px; }
button { min-height: 42px; color: white; background: var(--blue); border: 0; border-radius: 9px; padding: .62rem 1rem; font-weight: 750; }
button:hover { filter: brightness(.94); }
.bit-instruction { color: var(--muted); font-size: .88rem; }
.bit-row { display: flex; gap: 3px; width: 100%; overflow-x: auto; padding: .4rem 0 .7rem; scrollbar-width: thin; }
.bit-button { flex: 1 0 25px; min-width: 25px; min-height: 42px; padding: .4rem .1rem; color: var(--ink); background: white; border: 1px solid #aeb9c8; border-radius: 6px; font: 800 .92rem monospace; }
.bit-button:nth-child(4n):not(:last-child) { margin-right: 6px; }
.integer-bits .bit-button:first-child { color: var(--danger); background: var(--sign-soft); border-color: #e498a6; }
.float-bits .bit-button.sign-bit { color: var(--danger); background: var(--sign-soft); border-color: #e498a6; }
.float-bits .bit-button.exponent-bit { color: #6840be; background: var(--exponent-soft); border-color: #bba6ee; }
.float-bits .bit-button.fraction-bit { color: #087052; background: var(--fraction-soft); border-color: #93d5bd; }
.float-bits .bit-button:nth-child(1), .float-bits .bit-button:nth-child(9) { margin-right: 9px; }
.field-labels { display: grid; grid-template-columns: 1fr 8fr 23fr; gap: .3rem; text-align: center; font-size: .72rem; font-weight: 800; }
.sign-text { color: var(--sign); }.exponent-text { color: var(--exponent); }.fraction-text { color: var(--fraction); }
.decode-grid, .float-decode { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: .7rem; }
.decode-cell { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 9px; padding: .7rem; overflow-wrap: anywhere; }
.decode-cell small, .decode-cell strong { display: block; }
.decode-cell small { color: var(--muted); }
.decode-cell strong { margin-top: .2rem; font-family: monospace; }
.decode-cell.wide { grid-column: span 2; }
.decode-error { grid-column: 1 / -1; color: var(--danger); background: var(--danger-soft); border: 1px solid #efb4be; border-radius: 9px; padding: .8rem; }
.overflow-demo, .operation-demo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; background: var(--warning-soft); border-color: #efd58a; }
.overflow-demo h3, .operation-demo h3 { margin: 0; }
.overflow-demo p, .operation-demo p { margin-bottom: 0; }
.overflow-demo output { display: flex; gap: .6rem; align-items: center; background: white; border-radius: 10px; padding: .7rem; }
.overflow-demo output.flash { animation: flash .7s ease; }
@keyframes flash { 50% { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(217,72,95,.15); } }

.float-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 76px; color: white; border-radius: 6px; overflow: hidden; }
.float-layout div { display: grid; align-content: center; justify-items: center; min-width: 0; padding: .7rem .3rem; text-align: center; overflow-wrap: anywhere; }
.float-layout strong, .float-layout span { display: block; }.float-layout span { font-size: .78rem; }
.sign-field { background: var(--sign); }.exponent-field { background: var(--exponent); }.fraction-field { background: var(--fraction); }
.formula-card { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; margin: 1rem 0; padding: 1rem; background: #f7f9fc; border: 1px solid var(--line); border-radius: 6px; font-family: monospace; }
.formula-card strong { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.sign-info { border-top: 4px solid var(--sign); }.exponent-info { border-top: 4px solid var(--exponent); }.fraction-info { border-top: 4px solid var(--fraction); }
.worked-example { margin: 1.2rem 0; border: 1px solid var(--line); border-radius: 8px; padding: clamp(1rem, 3vw, 1.5rem); background: #fbfcfe; }
.worked-example-heading h3 { margin: .15rem 0 .8rem; font-size: 1.2rem; }
.worked-example ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.35rem; }
.worked-example li { padding-left: .25rem; }
.worked-example li > span, .worked-example li > code { display: block; }
.worked-example li span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.worked-example li code { margin-top: .12rem; overflow-wrap: anywhere; }
.worked-example li p { margin: .2rem 0; }
.assembled-bits { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(105px, 8fr) minmax(230px, 23fr); margin-top: 1rem; color: white; border-radius: 10px; overflow-x: auto; font: 800 .86rem monospace; }
.assembled-bits span { display: grid; place-items: center; min-height: 48px; padding: .65rem; }
.comparison-rule { background: var(--warning-soft); border-left-color: #c58b00; }
.comparison-rule > span { background: #9a6b00; }

.spacing-lab p { color: var(--muted); }
.preset-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.preset-buttons button { color: var(--ink); background: white; border: 1px solid var(--line); }
.spacing-result { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin-top: 1rem; }
.spacing-value { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 6px; padding: .8rem; overflow-wrap: anywhere; }
.spacing-value small, .spacing-value strong { display: block; }.spacing-value small { color: var(--muted); }.spacing-value strong { color: var(--ink); font-family: monospace; }
.gap-value { text-align: center; color: var(--warning); font-size: .82rem; }
.precision-example { display: grid; grid-template-columns: 1fr auto 1.5fr; align-items: center; gap: 1rem; background: var(--exponent-soft); border: 1px solid #cdbbfa; border-radius: 13px; padding: 1rem; margin: 1rem 0; }
.precision-example small, .precision-example code { display: block; }.precision-example small { color: var(--muted); }.precision-example code { overflow-wrap: anywhere; font-weight: 800; }
.operation-demo { background: var(--fraction-soft); border-color: #a2d9c5; }
.operation-demo output { max-width: 340px; overflow-wrap: anywhere; background: white; border-radius: 9px; padding: .75rem; font-family: monospace; }
.special-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.special-grid article { border: 1px solid var(--line); border-radius: 12px; padding: .85rem; }
.special-grid code, .special-grid strong { display: block; }.special-grid code { color: var(--blue); font-size: 1.1rem; font-weight: 800; }.special-grid strong { margin: .35rem 0; font-size: .8rem; }.special-grid p { color: var(--muted); font-size: .86rem; margin-bottom: 0; }

.mini-quiz { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.mini-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.mini-header h3 { margin: 0; }.mini-header span { color: var(--muted); font-size: .85rem; }
.mini-question { font-size: 1.1rem; font-weight: 750; }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.answer-option { min-height: 52px; color: var(--ink); background: white; border: 2px solid var(--line); text-align: left; font-weight: 650; overflow-wrap: anywhere; }
.answer-option:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.answer-option.correct { color: var(--success); background: var(--success-soft); border-color: #65b889; }
.answer-option.wrong { color: var(--danger); background: var(--danger-soft); border-color: #df8292; }
.answer-feedback { min-height: 2.8rem; margin-top: .7rem; border-radius: 9px; padding: .75rem; }
.answer-feedback:empty { padding: 0; }
.answer-feedback.success { color: var(--success); background: var(--success-soft); }
.answer-feedback.error { color: var(--danger); background: var(--danger-soft); }
.next-button { margin-top: .5rem; background: var(--navy); }
.mini-complete { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: var(--success-soft); border: 1px solid #a4d5ba; border-radius: 12px; padding: 1rem; }
.mini-complete h3, .mini-complete p { margin: 0; }
.mini-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mini-actions [data-review-quiz] { color: var(--ink); background: white; border: 1px solid var(--line); }

.mastery-box { display: flex; gap: 1.2rem; align-items: center; background: var(--blue-soft); border: 1px solid #b8cdf8; border-radius: 13px; padding: 1rem; }
.mastery-box div { min-width: 100px; text-align: center; }.mastery-box small, .mastery-box strong { display: block; }.mastery-box strong { color: var(--blue); font-size: 1.7rem; }
.final-quiz { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1rem, 3vw, 1.5rem); }
.final-start { text-align: center; padding: 1.3rem; }.finish-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; color: #9ee8e1; background: var(--navy); border-radius: 18px; font: 800 1.1rem monospace; }
.quiz-progress { display: flex; justify-content: space-between; color: var(--muted); font-size: .88rem; }.quiz-progress-track { background: #e6eaf0; }.quiz-progress-track span { background: var(--blue); }
.question-category { margin: 1.2rem 0 .25rem; color: var(--blue); text-transform: uppercase; letter-spacing: .09em; font-size: .76rem; font-weight: 800; }
#finalQuestion { margin-top: 0; }
.hint-button { margin-top: .75rem; color: #6c4d00; background: var(--warning-soft); border: 1px solid #ecd27e; }
.hint-box { margin-top: .6rem; color: #6c4d00; background: var(--warning-soft); border-radius: 9px; padding: .75rem; }
.final-summary { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.summary-ring { display: grid; place-items: center; width: 105px; height: 105px; border-radius: 50%; background: conic-gradient(var(--success) var(--score, 0%), #e3e8ef 0); position: relative; }
.summary-ring::after { content: ""; position: absolute; width: 78px; height: 78px; background: white; border-radius: 50%; }.summary-ring strong { z-index: 1; }
.next-topic { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }.next-topic > span { color: var(--muted); font-size: 1.5rem; }.next-topic p { margin: .15rem 0 0; color: var(--muted); }
.next-topic button { margin-top: .7rem; }

.structure-lab input { max-width: 100%; width: 180px; }
.structure-lab [data-index] { width: 120px; }
.lab-controls label { min-width: 0; }
.secondary-controls { margin-top: .8rem; }
.secondary-controls button, .practice-task button { color: var(--ink); background: white; border: 1px solid var(--line); }
.lab-status { min-height: 3rem; padding: .7rem; border-left: 3px solid var(--blue); background: var(--blue-soft); overflow-wrap: anywhere; }
.lab-status.lab-error { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.structure-view { margin-top: 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: 6px; background: white; min-width: 0; }
.stack-view { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.stack-view .structure-node { width: min(100%, 240px); }
.structure-node { flex: 0 0 auto; min-width: 94px; max-width: 180px; padding: .6rem .8rem; border: 1px solid #aeb9c8; border-radius: 5px; background: #f7f9fc; text-align: center; overflow-wrap: anywhere; }
.structure-node strong, .structure-node small { display: block; }
.structure-node small { font-size: .75rem; color: var(--muted); }
.visited-node { background: var(--blue-soft); border-color: var(--blue); }
.found-node { background: var(--success-soft); border-color: var(--success); }
.chain-view { display: flex; align-items: center; gap: .5rem; overflow-x: auto; }
.chain-arrow { flex: 0 0 auto; color: var(--muted); }
.end-label { flex: 0 0 auto; color: var(--muted); font-size: .78rem; }
.empty-structure { margin: .2rem 0; color: var(--muted); }
.tree-view { overflow-x: auto; }
.tree-view svg { display: block; margin: 0 auto; }
.tree-edge { stroke: #aeb9c8; stroke-width: 2; }
.active-edge { stroke: var(--blue); stroke-width: 4; }
.tree-node { stroke: #aeb9c8; stroke-width: 2; fill: #f7f9fc; }
.visited-tree { stroke: var(--blue); fill: var(--blue-soft); }
.found-tree { stroke: var(--success); fill: var(--success-soft); }
.tree-value { fill: var(--ink); font: 650 16px system-ui, sans-serif; }
.hash-view { display: grid; gap: .4rem; }
.hash-bucket { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; border: 1px solid var(--line); border-radius: 5px; min-height: 54px; }
.active-bucket { border-color: var(--blue); background: var(--blue-soft); }
.bucket-label { padding: .45rem; font-size: .8rem; }
.hash-entries { display: flex; align-items: center; gap: .4rem; overflow-x: auto; padding: .4rem; }
.practice-task { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.practice-task h4 { margin: 0; font-size: 1rem; }
.practice-task p { margin: .4rem 0 .7rem; }
.practice-task button { margin: .2rem .2rem .2rem 0; }
.practice-task [data-task-feedback]:empty { display: none; }

@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; gap: .75rem; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .standard-note { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 1rem; }
  .path-step { grid-template-columns: 2rem 1fr; padding: .65rem; }.path-step small { display: none; }
  .three-cols, .special-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .app-shell { padding: .45rem .45rem 2rem; }
  .hero { padding: .5rem 0 1rem; }
  .path-nav { background: var(--page); padding: .2rem 0; margin: .35rem 0; }
  .path-group { gap: .35rem; }
  .path-group-label { margin: .35rem 0 .2rem; font-size: .75rem; }
  .path-step { display: grid; grid-template: auto auto / 1fr; justify-items: center; padding: .45rem .15rem; gap: .15rem; text-align: center; }
  .path-step strong { overflow-wrap: anywhere; }
  .path-step > span { grid-row: auto; width: 1.75rem; height: 1.75rem; font-size: .8rem; }.path-step strong { font-size: .65rem; }
  .lesson-aside { display: block; }.standard-note { margin-top: .8rem; border-left: 0; border-top: 1px solid var(--line); padding: .8rem 0 0; }
  .lesson { padding: 1rem; }
  .interpretation-grid, .type-grid, .theory-grid, .three-cols, .special-grid, .answer-options { grid-template-columns: 1fr; }
  .memory-strip { grid-template-columns: repeat(2, 1fr); }.memory-strip span:nth-child(2) { border-right: 0; }.memory-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .weight-table { overflow-x: auto; padding-bottom: .4rem; }.weight-table div { min-width: 58px; }
  .decode-grid, .float-decode { grid-template-columns: repeat(2, 1fr); }
  .overflow-demo, .operation-demo { grid-template-columns: 1fr; }.overflow-demo button, .operation-demo button { width: 100%; }
  .float-layout span { font-size: .75rem; }
  .field-labels { display: none; }
  .spacing-result, .precision-example { grid-template-columns: 1fr; }.spacing-result > span, .precision-example > span { transform: rotate(90deg); text-align: center; }
  .mastery-box { align-items: flex-start; }.final-summary { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .mini-complete { flex-direction: column; align-items: stretch; }.mini-complete button { width: 100%; }
  .hash-entries { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .hash-entries .structure-node { min-width: 0; max-width: none; }
  .hash-entries .chain-arrow { transform: rotate(90deg); text-align: center; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }