/* Calm paper, clear typography, and diagrams specific to each concept. */
body:has(#lab[data-case="ch2-fixed-float"]),body:has(#lab[data-case="ch2-memory"]),body:has(#lab[data-case="ch2-characters"]),body:has(#lab[data-case="ch2-code-ops"]){background:#f6f5f0;color:#233b39}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]){border:1px solid #d8dfd8;box-shadow:0 18px 50px #263e3610;border-radius:20px;overflow:clip;background:#fff}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .lab-top{background:#203d38;color:#fff;padding:22px 28px}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .lab-top span{color:#cfddd5}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .narration{background:#fff;border-bottom:1px solid #e3e7e1;padding:22px 28px}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .narration-top strong{font-size:20px}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .lab-output{padding:24px}
#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .lab-controls{position:sticky;bottom:0;background:#fffffff2;backdrop-filter:blur(12px);z-index:3;border-top:1px solid #dce2d8;padding:16px 24px}
.motion-scene{margin:0 0 22px;border-radius:15px;background:#f5f7f3;border:1px solid #e0e5dc;overflow:hidden}.motion-scene figcaption{padding:26px 28px 0}.scene-eyebrow{display:block;color:#527268;font-size:12px;font-weight:700;letter-spacing:.13em}.motion-scene h3{font-size:clamp(22px,3vw,30px);font-weight:650;letter-spacing:-.035em;margin:9px 0}.motion-scene figcaption p{font-size:15px;color:#59716a;margin:0}.scene-canvas{padding:16px 26px 22px;background-image:radial-gradient(#87988b24 .8px,transparent .8px);background-size:18px 18px;min-width:0}.scene-canvas svg{display:block;width:100%;max-width:850px;margin:0 auto;overflow:visible}.scene-canvas svg rect{fill:#fff;stroke:#cbd7cd;stroke-width:1.2}.scene-canvas svg text{fill:#26463e;font:19px ui-monospace,Consolas,monospace}.scene-canvas svg .small{font:14px system-ui,sans-serif;fill:#586e64}.scene-canvas svg .large{font-size:42px}.scene-canvas svg .binary{font-size:25px}.scene-canvas svg .answer{font:21px system-ui,sans-serif;font-weight:600}.scene-canvas svg .axis,.scene-canvas svg .tick{stroke:#5a7c6c;stroke-width:2;fill:none}.scene-canvas svg .guide{stroke:#9aada2;stroke-dasharray:4 6}.moving-point,.target{fill:#bd5c3c;stroke:#fff;stroke-width:3}.moving-point{animation:point-travel .9s cubic-bezier(.25,.65,.25,1) both}.scene-canvas .travel-path{stroke:#b87742;stroke-width:2;stroke-dasharray:6 4;fill:none}.travelling-byte{animation:byte-travel .9s cubic-bezier(.25,.65,.25,1) both}.scene-canvas svg .tone-0{fill:#d1e8df;stroke:#7cab97}.scene-canvas svg .tone-1{fill:#dce6f4;stroke:#92accb}.scene-canvas svg .tone-2{fill:#f4e6c9;stroke:#c8af77}.scene-canvas svg .tone-3{fill:#f1dcd4;stroke:#c69584}.scene-canvas svg .memory-slot{fill:#edf0ea;stroke-dasharray:4 4}.scene-canvas svg .byte-text{font-size:23px;font-weight:700}
.field-assembly{display:grid;grid-template-columns:minmax(85px,.7fr) minmax(140px,1.4fr) minmax(0,3fr);gap:12px;margin:24px 0 8px}.field-slot{min-width:0;border-radius:12px;padding:18px;background:#e0ece4;border:1px solid #aecbbd}.field-slot header{display:flex;gap:8px;justify-content:space-between;align-items:baseline}.field-slot header span{font-size:12px;white-space:nowrap}.field-slot small{display:block;color:#456356;margin-top:13px;line-height:1.7;font-size:13px}.slot-E{background:#e3eaf6;border-color:#b5c8e2}.slot-F{background:#f4e9d1;border-color:#d8c298}.field-code{font:clamp(16px,2.2vw,25px) ui-monospace,Consolas,monospace;letter-spacing:.015em;overflow-wrap:anywhere;line-height:1.8;margin-top:15px}.field-scale{display:grid;grid-template-columns:.7fr 1.4fr 3fr;gap:12px;font-size:12px;text-align:center;color:#64786b}.motion-footnote{font-size:14px;color:#5f7169;line-height:1.8}.arriving{animation:fill-slot .65s ease-out both;animation-delay:var(--delay,0ms)}.address-cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:16px 0}.address-cell{background:#e8ece5;border:1px solid #d5ddd1;border-radius:9px;padding:10px;min-width:0}.address-cell small{display:block;color:#617469;font:12px ui-monospace,monospace}.address-cell b{display:block;font:24px ui-monospace,monospace;text-align:center;margin:10px 0}.address-cell.occupied{background:#dceadf}.address-cell.object-k{background:#dce6f4}.address-cell.object-x{background:#f4e6c9}.address-cell.object-c{background:#f1dcd4}.address-cell.is-padding{background:repeating-linear-gradient(135deg,#eee8dd 0 6px,#faf8f2 6px 12px)}.address-cell.is-padding b{font:13px system-ui}.allocation-summary{display:flex;gap:25px;flex-wrap:wrap;font-size:14px;color:#536a5e}.allocation-summary b{font-size:19px;color:#294d3c;margin-left:5px}.motion-tools{padding:13px 20px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #dce4d9;background:#eef2ea}.motion-tools button{border:1px solid #adbdaf;padding:8px 13px;border-radius:6px;background:#fff;color:#315b45;cursor:pointer;font-size:14px}.motion-tools button:focus-visible{outline:3px solid #a76437;outline-offset:2px}.motion-tools span{margin-left:auto;font-size:12px;color:#62776a}.motion-scene~.formula-panel{border:0;border-left:3px solid #a97748;background:#fcfaf5}.motion-scene~.formula-panel .formula-active{animation:formula-cue .9s ease-out both;background:#f3dfb7}
@keyframes point-travel{from{transform:translateX(var(--shift))}to{transform:translateX(0)}}@keyframes byte-travel{0%{transform:translate(var(--dx),var(--dy))}45%{transform:translate(var(--dx),-85px)}100%{transform:translate(0,0)}}@keyframes fill-slot{from{transform:translateY(-16px);opacity:.3}to{transform:translateY(0);opacity:1}}@keyframes formula-cue{from{box-shadow:0 0 0 3px #b17645}to{box-shadow:0 0 0 0 transparent}}
@media(max-width:650px){#lab:is([data-case="ch2-fixed-float"],[data-case="ch2-memory"],[data-case="ch2-characters"],[data-case="ch2-code-ops"]) .lab-output{padding:12px}.motion-scene figcaption{padding:20px 16px 0}.scene-canvas{padding:12px 10px}.field-assembly{grid-template-columns:1fr 2fr}.slot-F{grid-column:1/-1}.field-scale{display:none}.field-code{font-size:22px}.address-cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.address-cell{padding:8px}.motion-tools span{width:100%;margin-left:0}.scene-canvas svg .small{font-size:17px}}
@media(prefers-reduced-motion:reduce){.motion-scene *,.motion-scene~.formula-panel .formula-active{animation:none!important;transition:none!important}.motion-tools{display:none}}
