/* Consistent controls and readable diagrams across Chapter 10. */
.viz{background:#fff;border:1px solid #cddbe7;box-shadow:0 8px 28px #101c3308;border-radius:14px}
.viz-title{letter-spacing:-.02em}.viz-sub{max-width:65ch}
.canvas-stage{overflow-x:auto;background:#f8fbfd;scrollbar-width:thin;scrollbar-color:#a1b9c8 #edf3f7}
.diagram-canvas{width:100%;min-width:640px;max-width:none}
.viz-controls{padding-top:14px;border-top:1px solid #e2eaf1;gap:8px}
.viz-controls button{min-height:44px;font-size:14px;transition:background .15s,border-color .15s}
.viz-controls button:hover:not(:disabled){border-color:#0b7285;background:#e9f5f6;color:#085a68}
.viz-controls button.primary{background:#0b7285;border-color:#0b7285}
.viz-controls button.primary:hover{background:#085a68;color:white}
.viz-controls button:focus-visible,.animation-timeline:focus-visible{outline:3px solid #d08b23;outline-offset:3px}
.viz-controls .control-label{margin-left:auto}.viz-status{font-size:12px;margin-left:0}
.animation-timeline{display:block;width:100%;height:22px;margin:18px 0 0;accent-color:#0b7285;cursor:pointer}
.viz-label{background:#f1f7fa;border-color:#d5e5ed;color:#203950;font-family:var(--font-body);min-height:66px;display:flex;align-items:center}
.queue{padding:25px 2px 12px;margin:12px 0;min-height:88px}.queue-item{min-width:82px;flex-shrink:0;font-size:13px;padding:12px 10px}.queue-item.active{border-color:#b45309;background:#fff1d6;box-shadow:0 0 0 2px #f5d89d}
.decoder-badge{padding:6px 10px;border:1px solid #c9e0e5;border-radius:6px;color:#085a68;font:12px var(--font-mono);white-space:nowrap}
.decoder-bits{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 18px}.decoder-bits span{display:grid;place-items:center;width:38px;height:42px;background:#f0f4f8;border:1px solid #cfdae5;border-radius:7px;color:#506378;font:600 17px var(--font-mono);transition:background .2s,color .2s}.decoder-bits .read{background:#dff1ed;border-color:#8bc8b6;color:#14634d}.decoder-bits .next{outline:2px solid #c07a12;outline-offset:2px;background:#fff6e7}
.decoder-readouts{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;margin-bottom:18px}.decoder-readouts>div{padding:14px;border:1px solid #d7e3ed;border-radius:9px;background:#f8fbfd}.decoder-readouts span{display:block;font-size:12px;color:#53657a;margin-bottom:6px}.decoder-readouts strong{font:600 21px var(--font-mono);color:#0b7285}.decoder-readouts>div:nth-child(2){background:#eaf5f3;border-color:#badbd3}
@media(max-width:600px){.viz{padding:16px}.viz-head{flex-wrap:wrap;gap:12px}.decoder-bits{gap:5px}.decoder-bits span{width:32px;height:38px}.decoder-readouts{gap:6px}.decoder-readouts>div{padding:10px 7px}.decoder-readouts strong{font-size:17px}.viz-controls button{padding:8px 12px}.viz-controls .control-label{margin-left:0}.viz-status{width:100%}}
@media(prefers-reduced-motion:reduce){.viz-controls button,.decoder-bits span{transition:none}}
@media print{.animation-timeline,.viz-controls{display:none}.diagram-canvas{min-width:0}.canvas-stage{overflow:visible}}
.diagram-scroll-hint{display:none;color:#53657a;font-size:12px;margin:7px 0 0}.canvas-stage:focus-visible{outline:3px solid #d08b23;outline-offset:3px}
@media(max-width:800px){.diagram-scroll-hint{display:block}}
@media print{.diagram-scroll-hint{display:none}}