.logic-lab {max-width:1080px;margin:32px auto;padding:0 24px 48px;color:#17253d}
.logic-lab [hidden] {display:none!important}
.logic-back {display:inline-block;padding:10px 0;color:#2563eb;font-size:14px}
.logic-eyebrow {font-size:12px;letter-spacing:.14em;color:#7c3aed;font-weight:800;margin-top:20px}
.logic-lab h1 {font-size:clamp(28px,4.5vw,44px);line-height:1.4;font-weight:800;margin:12px 0}
.logic-intro,.logic-note {color:#64748b;line-height:1.8}
.logic-intro {margin-bottom:24px}.logic-note {font-size:13px;margin:12px 0}
.logic-lab h2 {font-size:20px;font-weight:750;margin-bottom:16px}.logic-lab h3 {font-size:16px;font-weight:700;margin:16px 0}
.logic-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:20px}
.logic-lab button {min-height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:10px 14px;background:#fff;font-weight:650;cursor:pointer;touch-action:manipulation}
.logic-lab button:hover {background:#f5f3ff}.logic-lab button[aria-pressed=true] {background:#ede9fe;border-color:#8b5cf6;color:#5b21b6}
.logic-lab button:focus-visible,.logic-lab input:focus-visible,.logic-lab select:focus-visible {outline:3px solid #60a5fa;outline-offset:3px}
.logic-card {padding:24px;border:1px solid #dce4ef;border-radius:18px;background:#fff;margin-bottom:20px;min-width:0}
.logic-lab label {display:block;font-size:14px;font-weight:650;margin-bottom:8px}
.logic-lab select,.logic-lab input {border:1px solid #cbd5e1;border-radius:10px;font-size:16px;padding:10px 12px;background:white;min-height:44px;max-width:100%;box-sizing:border-box}
.logic-lab select {width:100%;max-width:380px}.logic-lab input {width:100%}
.logic-rule {display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;background:#f5f3ff;padding:16px;border-radius:12px;margin-top:16px}
.logic-rule strong {font-size:22px;color:#5b21b6}.logic-rule p {font-size:14px}
.logic-switches {display:flex;align-items:center;gap:12px;flex-wrap:wrap}.logic-switches output {margin-left:auto;font-size:18px;font-weight:750;color:#5b21b6}
.logic-two-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.logic-circuit svg {width:100%;display:block;max-height:240px;margin:8px auto}
.logic-lab svg text {font:18px ui-monospace,monospace;fill:#17253d}
.logic-wire {fill:none;stroke:#94a3b8;stroke-width:4;stroke-linejoin:round;transition:stroke .15s}
.logic-wire.is-on {stroke:#16a34a}.logic-gate {fill:#f1f5f9;stroke:#94a3b8;stroke-width:2}.logic-gate.is-on {fill:#dcfce7;stroke:#16a34a}
.logic-lamp {fill:#e2e8f0;stroke:#94a3b8;stroke-width:2}.logic-lamp.is-on {fill:#bbf7d0;stroke:#16a34a}
#single-venn svg {width:100%;max-height:260px}
.logic-truth {border-collapse:collapse;width:100%;font-size:15px;text-align:center}.logic-truth caption {text-align:left;font-size:13px;color:#64748b;margin:4px 0 12px}
.logic-truth th,.logic-truth td {padding:12px 6px;border-bottom:1px solid #e2e8f0}.logic-truth th {background:#f8fafc}.logic-truth .current {background:#ede9fe;color:#5b21b6;font-weight:750}
.logic-number-inputs {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.logic-number-inputs>div {min-width:0}.logic-number-inputs span {display:inline-block;font-family:monospace;color:#64748b;margin-top:8px}
.logic-error {font-size:12px;line-height:1.6;color:#b91c1c;margin-top:4px}.logic-error:empty {display:none}.logic-lab input[aria-invalid=true] {border-color:#dc2626}
.logic-bit-columns {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.logic-bit-column {min-width:0;text-align:center;padding:6px 3px;border-radius:10px;border:1px solid transparent;background:#f8fafc}.logic-bit-column.selected {border-color:#8b5cf6;background:#f5f3ff}
.logic-weight {font-size:12px;color:#64748b;display:block;margin-bottom:8px}
.logic-bit-column button {display:block;width:100%;padding:6px 0;font-size:11px;margin:6px 0}.logic-bit-column strong {display:block;font-size:20px}.logic-bit-gate {display:block;font-family:monospace;font-size:11px;line-height:1.6;color:#64748b}
.logic-byte-result {display:block;font-weight:750;line-height:1.8;color:#5b21b6;background:#f5f3ff;border-radius:10px;padding:14px;margin:20px 0;overflow-wrap:anywhere}
.logic-network {background:#eff6ff}.logic-network p {font-size:14px;line-height:1.8}.logic-lab a {color:#2563eb}
@media(max-width:650px){.logic-lab{padding:0 12px 28px;margin:12px auto}.logic-card{padding:18px 14px}.logic-tabs button{font-size:13px;padding:10px 4px}.logic-two-columns{grid-template-columns:1fr;gap:0}.logic-switches output{font-size:16px}.logic-number-inputs{gap:12px}.logic-bit-columns{gap:2px}.logic-bit-column{padding:4px 1px}.logic-bit-column strong{font-size:18px}.logic-weight{font-size:10px}.logic-lab h2{font-size:18px}.logic-rule strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.logic-wire{transition:none}}
/* Put both reference views below the operation description. */
.logic-tabs {grid-template-columns:repeat(2,minmax(0,1fr))}
.logic-overview {display:block}
.logic-overview .logic-rule {display:block}.logic-overview .logic-rule p {margin-top:14px;line-height:1.8}
.logic-reference {min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.logic-reference .logic-card {padding:18px 20px}
.logic-reference #single-venn svg {max-height:200px}.logic-reference h2 {margin-bottom:8px}
.logic-reference .logic-truth th,.logic-reference .logic-truth td {padding:8px 6px}
.logic-overview.byte-view {grid-template-columns:1fr}
.adder-examples {display:flex;gap:8px;flex-wrap:wrap}
.adder-chain {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.adder-chain button {padding:12px 6px;text-align:center}
.adder-chain span,.adder-chain strong,.adder-chain b {display:block;line-height:1.8}
.adder-chain span {font-size:12px}.adder-chain b {font-size:22px;margin:8px 0}
.adder-chain .carry-on {color:#15803d;font-weight:750;background:#dcfce7;border-radius:6px}
.adder-equation {font-size:15px;line-height:1.8;padding:14px;background:#f5f3ff;border-radius:10px}
.adder-gates {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.adder-gates>div {border:1px solid #dce4ef;border-radius:12px;padding:12px;min-width:0}
.adder-gates h4 {font-size:13px;font-weight:700}.adder-gates svg text {font-size:16px}
@media(max-width:650px){
 .logic-overview {grid-template-columns:1fr;gap:0}
 .logic-reference .logic-card {padding:18px 14px}
 .adder-chain {gap:4px}.adder-chain button {padding:10px 3px}.adder-chain span {font-size:10px}.adder-chain strong {font-size:13px}
 .adder-gates {grid-template-columns:1fr}
}

.adder-chip {fill:#f8fafc;stroke:#cbd5e1;stroke-width:2}
.adder-unit {fill:#ede9fe;stroke:#8b5cf6;stroke-width:2}
.adder-overview svg {display:block;width:100%;height:auto}
.adder-narrow {display:none}
.adder-details {border-top:1px solid #e2e8f0;margin-top:20px;padding-top:18px}
.adder-details summary {cursor:pointer;font-weight:700;color:#5b21b6;padding:8px 0}
.adder-details summary:focus-visible {outline:3px solid #60a5fa;outline-offset:3px}
@media(max-width:650px){
 .logic-reference {grid-template-columns:1fr;gap:0}
 .adder-wide {display:none}.adder-narrow {display:block;max-width:400px;margin:auto}
}