.concept-visual{margin:0 0 22px;padding:20px;border:1px solid #dbe3d6;border-radius:12px;background:linear-gradient(145deg,#fbfcf9,#f1f5ed);overflow:hidden}.visual-label{display:flex;align-items:center;justify-content:space-between;color:#65735f;font-size:11px}.visual-label strong{font:22px var(--mono);color:var(--green)}.quantize-visual svg{display:block;width:100%;height:150px;margin-top:4px}.quant-arrow{text-align:center;font-size:11px;color:#879181;opacity:.5}.quant-arrow.active{color:#536c49;opacity:1}.quant-arrow span{display:block;font-size:18px}.quant-levels{display:flex;gap:5px;margin-top:9px}.quant-level{min-width:0;flex:1;height:52px;border:2px solid transparent;border-radius:6px;background:rgb(var(--shade),var(--shade),var(--shade));display:flex;flex-direction:column;align-items:center;justify-content:center}.quant-level b,.quant-level small{padding:0 3px;border-radius:3px;background:#ffffffc9;color:#27332a;font-size:10px}.quant-level.current{border-color:#9a6239;box-shadow:0 0 0 3px #f3dfce}.encoding-result{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;padding:12px;border-radius:8px;background:#e7eee1;color:#40553a;font-size:12px}.encoding-result b{font:22px var(--mono);letter-spacing:4px;color:var(--green)}
.memory-map{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:16px}.memory-program,.memory-data{display:grid;gap:7px}.memory-cell{padding:10px 12px;border:1px solid #cad5c4;border-radius:7px;background:#fff}.memory-cell small{display:block;color:#788273;font-size:9px}.memory-cell b{font-size:12px}.instruction-cell.current{border-color:#7b9a69;background:#e2edd9;transform:translateX(5px)}.data-cell{background:#f4eee3;border-color:#ddd1bc}.program-result{margin-top:13px;padding:10px;text-align:center;border:1px dashed #bdc9b6;border-radius:7px;opacity:.35}.program-result.visible{opacity:1;background:#315c47;color:#fff}.program-result strong{font:20px var(--mono);margin-left:12px}.concept-card-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:17px}.concept-card{position:relative;padding:18px 12px;border:1px solid #d5ddd0;border-radius:9px;background:#fff;min-height:112px}.concept-card span{font:9px var(--mono);color:#879482}.concept-card b,.concept-card small{display:block}.concept-card b{font-size:12px;margin:10px 0 5px}.concept-card small{font-size:10px;color:#74806e}.concept-card.current{background:#315c47;color:#fff;border-color:#315c47;transform:translateY(-5px);box-shadow:0 8px 18px #33594024}.concept-card.current span,.concept-card.current small{color:#e3ecdd}.hardware-system{display:grid;grid-template-columns:1fr 18px 1fr 22px 1.6fr 18px 1fr;align-items:stretch;gap:5px}.hardware-node{min-width:0;padding:15px 8px;text-align:center;border:1px solid #d3dccd;border-radius:9px;background:#fff;color:#829079}.hardware-node span{display:block;margin:auto;width:21px;height:21px;border-radius:50%;background:#edf1e9;font:10px/21px var(--mono)}.hardware-node b,.hardware-node small{display:block}.hardware-node b{font-size:11px;margin:10px 0 5px}.hardware-node small{font-size:9px}.hardware-node.current{background:#315c47;color:#fff;border-color:#315c47;box-shadow:0 8px 16px #315c4730}.hardware-node.passed{background:#e4ecdf;color:#4f6647}.hardware-system>i{align-self:center;text-align:center;font-style:normal;color:#718567}.cpu-visual{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:27px 6px 6px;border:1px solid #aabca0;border-radius:10px;background:#edf3e9}.cpu-visual em{position:absolute;top:5px;left:0;right:0;text-align:center;font-style:normal;font-size:9px;color:#53694d}.hardware-visual p{text-align:center;margin:14px 0 0;color:#7a8675;font-size:10px}.layer-stack{display:grid;gap:5px;margin-top:16px}.layer-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:9px 13px;border:1px solid #d5ddd0;border-radius:6px;background:#fff}.layer-item b{font-size:11px}.layer-item span{font-size:10px;color:#758071;text-align:right}.layer-item.current{background:#315c47;color:#fff;border-color:#315c47;transform:scale(1.015)}.layer-item.current span{color:#e2ecdd}.layer-direction{display:flex;justify-content:space-between;color:#71806b;font-size:10px;margin-top:10px}.layer-direction i{font-style:normal}.performance-visual{display:grid;gap:14px}.metric-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:10px;align-items:center;transition:opacity .2s}.metric-row.muted{opacity:.28}.metric-row>b{font-size:11px}.metric-row>div{display:grid;grid-template-columns:18px minmax(35px,1fr) auto;gap:5px;align-items:center;font-size:9px}.metric-row i{display:block;width:var(--size);height:13px;border-radius:2px;background:#7c9c6b}.metric-row>div:nth-child(3) i{background:#aa8153}.metric-row small{font:9px var(--mono);white-space:nowrap}
@media(max-width:600px){.concept-visual{padding:14px}.quantize-visual svg{height:120px}.quant-level{height:46px}.quant-level small{display:none}.encoding-result{gap:8px;flex-wrap:wrap}.encoding-result b{font-size:18px}.memory-map{grid-template-columns:1fr}.memory-data{grid-template-columns:1fr 1fr}.concept-card-track{display:flex;overflow-x:auto;padding:6px 2px 12px;scroll-snap-type:x mandatory}.concept-card{flex:0 0 145px;scroll-snap-align:start}.hardware-system{display:flex;flex-direction:column;gap:7px}.hardware-system>i{transform:rotate(90deg)}.cpu-visual{width:100%}.hardware-node{min-height:82px}.metric-row{grid-template-columns:1fr}.metric-row>div{grid-template-columns:18px minmax(80px,1fr) auto}.layer-item{align-items:start;flex-direction:column;gap:2px}.layer-item span{text-align:left}}

/* 第二章：让编码、位权和运算过程在公式之前先可见。 */
.formula-panel{margin:18px 0 22px;padding:16px 18px;border:1px solid #cfdac7;border-left:4px solid #6f8c62;border-radius:8px;background:#f7faf4;display:grid;gap:9px}.formula-panel>div{display:flex;align-items:center;justify-content:space-between;gap:16px}.formula-panel span{font-weight:700;color:#315c47}.formula-panel small{color:#71806b}.formula-panel code{display:block;padding:9px 12px;border-radius:6px;background:#fff;border:1px solid #e0e7da;color:#263f34;font:600 14px/1.7 ui-monospace,"Cascadia Mono",Consolas,monospace;white-space:normal;overflow-wrap:anywhere}
.ch2-visual{min-height:220px;background:linear-gradient(145deg,#fbfdf9,#f2f6ee)}.visual-bits{display:flex;gap:5px;flex-wrap:wrap}.visual-bits>span{position:relative;display:grid;place-items:center;min-width:34px;height:46px;padding:3px 7px;border:1px solid #bdcbb5;border-radius:7px;background:#fff;color:#315c47}.visual-bits>span.on{background:#315c47;color:#fff}.visual-bits>span.current{outline:3px solid #d19a5b;outline-offset:2px}.visual-bits small{position:absolute;top:-18px;color:#6d7b67;font-size:10px}.visual-bits b{font:700 17px ui-monospace,monospace}.visual-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:17px}.visual-stat{padding:10px 12px;border:1px solid #dbe4d5;border-radius:7px;background:#fff}.visual-stat small{display:block;color:#73806d;margin-bottom:4px}.visual-stat strong{overflow-wrap:anywhere;color:#315c47}
.place-track{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:18px 4px 12px}.place-card{min-width:78px;padding:13px 10px;border:1px solid #d6dfcf;border-radius:9px;background:#fff;text-align:center;transition:.2s}.place-card b{font:700 25px ui-monospace,monospace}.place-card span{margin:0 5px;color:#899584}.place-card small{font:600 14px ui-monospace,monospace}.place-card.current{background:#e4efd9;border-color:#7f9f70;transform:translateY(-4px);box-shadow:0 6px 16px #315c4714}.place-card.passed{background:#f1f5ee}.place-track>i{color:#7a8974;font-style:normal}
.code-path{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:18px 2px}.code-stage{min-width:115px;min-height:92px;padding:12px;border:1px solid #d8e1d2;border-radius:9px;background:#fff;display:grid;align-content:center;gap:8px}.code-stage>small{color:#71806b}.code-stage>b{font-size:24px;color:#315c47}.code-stage .visual-bits{gap:2px}.code-stage .visual-bits>span{min-width:23px;height:33px;padding:2px}.code-stage .visual-bits b{font-size:13px}.code-stage.current{border-color:#769767;background:#e7f0df}.code-stage.passed{opacity:.7}.code-path>i{font-style:normal;color:#8a9884}
.float-fields{display:grid;grid-template-columns:minmax(80px,1fr) minmax(170px,2fr) minmax(280px,5fr);gap:8px;overflow-x:auto;padding:22px 0}.float-fields>div{padding:15px 12px;border-radius:8px;border:1px solid #cbd8c4;background:#fff}.float-fields small{display:block;margin-bottom:8px;color:#6f7e69}.float-fields b{font:700 15px ui-monospace,monospace;letter-spacing:1px}.float-fields .sign{background:#f4eadc}.float-fields .exponent{background:#e6efe0}.float-fields .fraction{background:#e8f0f0}.float-fields .current{outline:3px solid #77946b}.float-equation{display:flex;justify-content:center;align-items:center;gap:13px;padding:14px;border-radius:8px;background:#fff;font:600 15px ui-monospace,monospace}.float-equation i{font-style:normal;color:#9a6239}
.character-flow{display:grid;gap:8px}.char-card{display:grid;grid-template-columns:70px 24px 70px 24px 1fr;align-items:center;gap:5px;padding:10px 13px;border:1px solid #dbe4d5;border-radius:8px;background:#fff}.char-card>b{font-size:23px;color:#315c47}.char-card i{font-style:normal;color:#8a9884}.char-card code{font:600 15px ui-monospace,monospace}.encoding-layers{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:15px;padding:12px;background:#edf3e8;border-radius:8px}.encoding-layers.current{outline:2px solid #7b986f}.encoding-layers i{font-style:normal;color:#879280}
.bit-operation-visual>.visual-bits{justify-content:center;margin:22px 0}.bit-arrow{text-align:center;color:#5b6d55}.bit-arrow span{display:block;font-size:22px}.bit-results{display:grid;gap:9px;justify-content:center}.bit-results .visual-bits{justify-content:center}
.byte-source,.address-cells{display:flex;gap:8px;overflow-x:auto}.byte-source>span,.address-cells>div{flex:1;min-width:100px;padding:13px;border:1px solid #d8e1d2;border-radius:8px;background:#fff;text-align:center}.byte-source small,.address-cells small{display:block;color:#71806b;margin-bottom:6px}.byte-source b,.address-cells b{font:700 19px ui-monospace,monospace}.address-cells .current{background:#e2eed9;border-color:#779469}.memory-arrow{text-align:center;padding:10px;color:#597052}.memory-arrow span{display:block}.memory-layout-visual p{text-align:center;color:#596a54;margin:12px 0 0}
.addition-stack{max-width:520px;margin:16px auto;display:grid;gap:8px}.addition-stack>div:not(.operator){display:grid;grid-template-columns:110px 1fr;align-items:center}.addition-stack small{color:#677561}.addition-stack .operator{font-size:25px;color:#9a6239}.addition-stack hr{border:0;border-top:2px solid #71836a;width:100%;margin:0}
.register-machine{display:grid;grid-template-columns:160px 1fr;gap:14px;margin-top:20px}.operation-wheel{border-radius:12px;background:#315c47;color:#fff;display:grid;place-items:center;text-align:center;padding:20px}.operation-wheel>span{font-size:35px}.operation-wheel small{line-height:1.5}.register-bank{display:grid;gap:8px}.register-bank>div{padding:13px 15px;background:#fff;border:1px solid #d8e2d2;border-radius:8px}.register-bank small{display:block;color:#71806b}.register-bank strong{font:700 17px ui-monospace,monospace;color:#315c47;overflow-wrap:anywhere}
.float-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1.25fr;gap:10px;align-items:center;margin-top:23px}.float-flow>div{padding:16px;border:1px solid #d8e1d2;border-radius:9px;background:#fff}.float-flow .current{background:#e3eedb}.float-flow small{display:block;color:#71806b;margin-bottom:7px}.float-flow b{font:600 14px/1.6 ui-monospace,monospace}.float-flow>i{font-style:normal;color:#657860;text-align:center}
.transmission{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:20px}.transmission>div{min-width:0}.transmission small{display:block;color:#71806b;margin-bottom:22px}.transmission>i{font-style:normal;color:#61725b;text-align:center}.transmission .channel{padding:7px 10px;border:1px dashed #94a68a;border-radius:99px}
.hamming-visual>.visual-bits{justify-content:center;margin:35px 0 20px}.hamming-groups{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.hamming-groups span{padding:7px 10px;border-radius:99px;background:#fff;border:1px solid #d3dfcc;font-size:12px}.syndrome{margin:18px auto 0;max-width:420px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;padding:12px 15px;border-radius:8px;background:#e4eedc}.syndrome strong{font-size:24px}.syndrome span{color:#5d7056;font:12px ui-monospace,monospace}
.crc-polynomial{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px 0;padding:14px;background:#fff;border:1px solid #d9e2d4;border-radius:8px;font:600 15px ui-monospace,monospace}.crc-polynomial i{font-style:normal;color:#9a6239}.crc-visual>.visual-bits{justify-content:center;margin:22px 0}.xor-rule{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.xor-rule>*{padding:6px 9px;border-radius:5px;background:#edf3e8;font:12px ui-monospace,monospace}
@media(max-width:700px){.formula-panel>div{display:block}.formula-panel small{display:block;margin-top:3px}.formula-panel code{font-size:12px}.code-path{align-items:stretch}.float-fields{grid-template-columns:80px 170px 280px}.char-card{grid-template-columns:45px 18px 48px 18px minmax(110px,1fr)}.register-machine{grid-template-columns:1fr}.operation-wheel{min-height:115px}.float-flow,.transmission{display:flex;overflow-x:auto;align-items:stretch}.float-flow>div,.transmission>div{min-width:190px}.transmission>i{align-self:center;min-width:70px}.addition-stack>div:not(.operator){grid-template-columns:1fr;gap:7px}.visual-bits>span{min-width:30px}.encoding-layers{overflow-x:auto;justify-content:flex-start;white-space:nowrap}}

/* v0.6：计算案例的同步高亮与位级过程。 */
.formula-active{padding:2px 5px;border-radius:4px;background:#f5d7ad;color:#7b421b;box-shadow:0 0 0 2px #f5d7ad80}.sync-chip,.conversion-step mark,.bcd-group.current,.weight-card.current,.bit-selector b{background:#f5d7ad;color:#713f1e}
.bcd-track,.weight-track{display:flex;gap:10px;overflow-x:auto;padding:22px 3px 10px}.bcd-group,.weight-card{flex:0 0 auto;min-width:130px;padding:12px;border:1px solid #d4dfcd;border-radius:9px;background:#fff;text-align:center}.bcd-group>b,.bcd-group>i{display:block}.bcd-group>i{font-style:normal;color:#899684;margin:5px}.bcd-group .visual-bits{gap:2px;flex-wrap:nowrap}.bcd-group .visual-bits>span{min-width:23px;height:34px;padding:2px}.weight-card{display:grid;gap:7px}.weight-card small,.weight-card span{color:#697762}.weight-card b{font:700 23px ui-monospace,monospace}.conversion-step{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px;padding:20px;border-radius:9px;background:#fff}.conversion-step b{font:700 22px ui-monospace,monospace}.conversion-step i{font-style:normal;color:#72806c}.conversion-step mark{padding:8px 12px;border-radius:7px;font-weight:700}
.carry-lane{max-width:520px;margin:16px auto 0;padding-left:110px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.carry-lane span{height:25px;text-align:center;color:#7f8b79;font:10px ui-monospace,monospace}.carry-lane span.current{padding:5px 2px;border-radius:5px;background:#f5d7ad;color:#713f1e}.sync-callout{margin-top:14px;padding:10px 13px;border-radius:7px;background:#edf3e8;color:#4d6247;font-size:11px;text-align:center}.overflow-check{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px;padding:12px;border-radius:8px}.overflow-check.ok{background:#e4eedc}.overflow-check.bad{background:#f5e1d3;color:#7a3f23}.overflow-check b{font-size:11px}.overflow-check strong{padding:5px 8px;border-radius:5px;background:#fff}
.bit-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;padding:10px 13px;border:1px solid #d8e2d2;border-radius:8px;background:#fff;color:#53644e;font-size:11px}.bit-selector b{padding:5px 9px;border-radius:6px}.operation-wheel.active-shift{background:#9a6239}.register-row.shifting{box-shadow:inset 4px 0 #d19a5b}.register-row .visual-bits{margin-top:7px;flex-wrap:nowrap}.register-row .visual-bits>span{min-width:26px;height:36px;padding:2px}.range-lanes{display:grid;gap:12px;margin-top:22px}.range-lanes>div{display:grid;grid-template-columns:125px auto 1fr auto auto;gap:9px;align-items:center;padding:11px 13px;border-radius:8px;background:#fff}.range-lanes i{height:5px;border-radius:99px;background:linear-gradient(90deg,#9a6239,#6f8c62)}.range-lanes mark{padding:5px 8px;border-radius:5px;background:#e4eedc;color:#315c47;font-weight:700}
@media(max-width:700px){.carry-lane{padding-left:0}.range-lanes>div{grid-template-columns:1fr auto 1fr auto}.range-lanes>div b{grid-column:1/-1}.register-row .visual-bits{overflow-x:auto}.bcd-group,.weight-card{min-width:115px}}

/* v0.7：初学者逐步揭示，避免在起点提前显示答案。 */
.future{opacity:.38;filter:grayscale(.45)}.visual-teach{text-align:center;margin:13px 0 0;color:#5e6f58;font-size:11px}.position-track,.character-tiles{display:flex;gap:9px;overflow-x:auto;margin-top:20px;padding:4px}.position-track>div,.character-tiles>span{flex:1;min-width:92px;padding:15px 10px;border:1px solid #d7e1d1;border-radius:9px;background:#fff;text-align:center}.position-track b,.character-tiles b{display:block;font:700 24px ui-monospace,monospace;color:#315c47}.position-track small,.character-tiles small{display:block;margin-top:8px;color:#6d7b67}.place-card em{display:block;margin-top:8px;color:#697762;font-size:9px;font-style:normal}.sum-track,.method-intro,.repeat-result{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding:20px;border-radius:9px;background:#fff}.sum-track span{padding:8px 10px;border-radius:6px;background:#edf3e8;font:700 18px ui-monospace,monospace}.sum-track i{font-style:normal;color:#879280}.sum-track b{font-size:21px;color:#315c47}.method-intro,.repeat-result{flex-direction:column}.method-intro b,.repeat-result b{font-size:22px;color:#315c47}.method-intro span,.repeat-result span{color:#667460}.radix-result{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.radix-result>div{padding:13px;border:1px solid #d9e2d4;border-radius:8px;background:#fff}.radix-result small,.radix-result b{display:block}.radix-result small{color:#71806b;margin-bottom:5px}.radix-result b{font:700 17px ui-monospace,monospace;color:#315c47}.pending-code{display:block;padding:10px;font:700 15px ui-monospace,monospace;color:#879280;letter-spacing:3px}
.point-meanings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.point-meanings>div{display:grid;gap:7px;padding:15px;border:1px solid #d7e1d1;border-radius:9px;background:#fff;text-align:center}.point-meanings b{font:700 22px ui-monospace,monospace}.point-meanings span{color:#6b7965}.point-meanings strong{color:#315c47;font-size:18px}.character-tiles>span{display:grid;gap:3px}.character-flow .char-card.current{border-color:#d19a5b;background:#fff5e8;box-shadow:0 0 0 2px #f5d7ad}.compare-encoding{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.compare-encoding>div{display:grid;gap:10px;padding:15px;border:1px solid #d8e2d2;border-radius:9px;background:#fff}.compare-encoding small,.compare-encoding b{text-align:center}.compare-encoding b{color:#315c47}.float-stage-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.float-stage-cards>div{padding:16px;border:1px solid #d8e2d2;border-radius:9px;background:#fff}.float-stage-cards small,.float-stage-cards b{display:block}.float-stage-cards small{color:#71806b;margin-bottom:7px}.float-stage-cards b{font:600 15px/1.6 ui-monospace,monospace}.float-stage-cards .current{background:#e5efdf}.ones-count{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:13px}.ones-count span{padding:5px 8px;border-radius:99px;background:#f5d7ad;color:#713f1e;font-size:10px}.parity-build,.crc-plain{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.parity-build>i,.crc-plain>i{font-style:normal;color:#71806b}.parity-build>mark,.crc-plain>mark{padding:10px 12px;border-radius:7px;background:#f5d7ad;color:#713f1e;font:700 17px ui-monospace,monospace}.crc-plain{padding:13px;border-radius:8px;background:#fff}.crc-plain b{font:700 16px ui-monospace,monospace}.hamming-groups span.current{background:#f5d7ad;border-color:#d19a5b;color:#713f1e}
@media(max-width:700px){.point-meanings,.float-stage-cards,.compare-encoding{grid-template-columns:1fr}.radix-result{grid-template-columns:1fr}.position-track>div,.character-tiles>span{min-width:82px}}

/* Keep bit positions stable and compare one operation at a time. */
.teaching-register{padding:12px 0;min-width:0}.teaching-register>span{display:block;font-size:14px;color:var(--muted,#546259);margin-bottom:8px}.teaching-register>strong{display:block;overflow-wrap:anywhere;font-size:18px}.teaching-bits{display:flex;gap:5px;overflow-x:auto;padding:4px 3px 9px}.teaching-bits b{flex:0 0 30px;text-align:center;padding:8px 3px;background:#fff;border:1px solid #cad6c5;border-radius:5px;font:600 18px monospace}.teaching-bits .focus{background:#fff0d7;border:2px solid #9a5b0a;outline:1px solid #9a5b0a;color:#633700}.state-comparison{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);gap:20px;align-items:center}.state-comparison section{min-width:0}.state-comparison h3{font-size:16px}.state-arrow{font-size:14px;text-align:center;line-height:1.8}.state-arrow b{display:block;font-size:24px}.step-question{border:1px solid #a8bfa7;background:#f1f6ef;padding:20px;border-radius:10px;margin:20px 0}.step-question label,.step-question small{display:block;margin-bottom:12px}.step-question input{max-width:100%;width:200px;padding:10px;border:1px solid #9dac9b;border-radius:5px;margin-right:10px}.step-question button{padding:10px 16px}.step-question small{margin-top:12px;font-size:14px}.textbook-formula{padding:15px;margin:14px 0;background:#f6f7f3;border-radius:8px;font-size:15px}.textbook-formula summary{cursor:pointer;font-weight:600}.textbook-formula p{line-height:1.8}.teaching-visual{margin:0}
@media(max-width:760px){.state-comparison{grid-template-columns:minmax(0,1fr);gap:10px}.state-arrow{text-align:left}.teaching-bits b{flex-basis:27px}.step-question button{margin-top:8px}}

.bit-route,.memory-board{margin:0 0 20px;padding:18px;border:1px solid #c8d6c2;border-radius:12px;background:#f6f8f2}.bit-route figcaption,.memory-board figcaption{font-weight:600;margin-bottom:14px}.bit-route svg{width:100%;max-width:650px;display:block;margin:auto}.bit-route svg rect{fill:white;stroke:#9cac95}.bit-route svg text{font:18px monospace;fill:#213f32}.bit-route svg>path{stroke:#315c47;stroke-width:2;fill:none}.memory-board>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.memory-board section{padding:10px;background:#e4eee0;min-width:0;border:1px solid #c1d2ba;border-radius:5px}.memory-board small{display:block;font-size:12px}.memory-board b{display:block;overflow-wrap:anywhere}.memory-board .padding-byte{background:repeating-linear-gradient(45deg,#eee 0 5px,#fff 5px 10px);font-size:12px}.state-arrow b{transform:rotate(-90deg)}
@media(max-width:760px){.state-arrow b{transform:none}.memory-board{padding:10px}}

.lesson-presets{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px}.lesson-presets:empty{display:none}.lesson-presets .button{font-size:14px}