.status.live { color: #315c47; background: #edf5e9; border-color: #b9d0ac; }
.status.live::before { background: #61834a; }
.case-heading { padding-block: 28px 26px; }
.case-heading h1 { font-size: 34px; }
.case-layout.lab-layout { grid-template-columns: minmax(0,1fr) 275px; align-items: start; }
.lab { border: 1px solid var(--line); border-radius: var(--radius); background: white; overflow: hidden; min-width: 0; }
.lab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 21px; background: #edf2e8; border-bottom: 1px solid var(--line); }
.lab-top h2 { font-size: 14px; font-weight: 600; }
.lab-top span { font: 10px var(--mono); color: var(--muted); }
.lab-form { padding: 18px 21px; background: #fafbf8; border-bottom: 1px solid var(--line); }
.field-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); flex: 1; min-width: 85px; }
.field.wide { flex-basis: 100%; }
.field input, .field select, .speed-select { padding: 8px 10px; border: 1px solid #c8d3c1; border-radius: 5px; color: var(--ink); background: white; min-width: 0; width: 100%; font: 13px var(--mono); min-height: 39px; }
.field input:focus, .field select:focus { outline: 2px solid #88a57b; outline-offset: 1px; }
.lab .button { font-size: 11px; min-height: 39px; padding: 8px 13px; gap: 8px; }
.field-hint { font-size: 10px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
.lab-error { margin: 14px 21px; padding: 10px 13px; color: #8f4436; background: #fcf0ec; border-radius: 6px; font-size: 12px; }
.lab-output { padding: 24px 21px; min-height: 310px; overflow-wrap: anywhere; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 21px; border-block: 1px solid var(--line); background: #fafbf8; }
.lab-controls button { min-height: 38px; border: 1px solid var(--line-strong); background: white; color: var(--green); padding: 7px 12px; border-radius: 5px; font-size: 11px; }
.lab-controls button.primary { background: var(--green); color: white; }
.lab-controls button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--green); }
.lab-controls button:disabled { opacity: .4; }
.speed-label { font-size: 10px; color: var(--muted); margin-left: auto; }
.speed-select { width: 80px; font-size: 10px; min-height: 35px; padding: 5px; margin-left: 5px; }
.narration { padding: 18px 21px 20px; background: #edf2e8; min-height: 108px; }
.narration-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 5px; }
.narration-top strong { font-size: 12px; color: var(--green); }
.narration-top span { font: 10px var(--mono); color: var(--muted); }
.narration p { font-size: 12px; line-height: 1.9; }
.model-note { margin-top: 17px; font-size: 11px; color: var(--muted); background: #f0f2ec; border-radius: 8px; padding: 17px 19px; line-height: 1.9; }
.model-note strong { display: block; color: var(--ink); margin-bottom: 5px; font-size: 12px; }
.register-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 18px; }
.register { background: #f8faf5; border: 1px solid var(--line); border-radius: 7px; padding: 12px 11px; transition: background .15s; min-width: 0; }
.register > span { display: block; font: 10px var(--mono); color: var(--muted); margin-bottom: 4px; }
.register > strong { font: 19px var(--mono); color: var(--green); overflow-wrap: anywhere; }
.register.is-active, tr.is-active td { background: #e4eedb; border-color: #91ad7f; }
.path-strip { display: flex; gap: 6px; align-items: center; margin-block: 15px; flex-wrap: wrap; }
.path-strip span { border: 1px solid var(--line); padding: 6px 10px; font-size: 11px; border-radius: 4px; background: #f8faf5; }
.path-strip .is-active { background: #e4eedb; border-color: #91ad7f; }
.path-strip b { font-weight: 400; color: #96a78c; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.lab-table { border-collapse: collapse; width: 100%; text-align: left; font: 11px/1.7 var(--mono); }
.lab-table th { font: 10px/1.8 var(--sans); color: var(--muted); font-weight: 500; background: #f5f7f0; }
.lab-table td, .lab-table th { padding: 8px 10px; border-bottom: 1px solid #e9eee3; white-space: nowrap; }
.lab-table tr:last-child td { border-bottom: 0; }
.lab-table caption { text-align: left; font: 11px var(--sans); padding: 11px; background: #f5f7f0; color: var(--green); }
.memory-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.lab-subtitle { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.subtle { color: var(--muted); font-size: 11px; }
.address-fields { display: flex; gap: 5px; margin: 14px 0; }
.address-field { flex: 1; text-align: center; border-radius: 6px; padding: 10px 8px; background: #ede8dc; min-width: 0; }
.address-field:nth-child(2) { background: #e4ecdf; }
.address-field:nth-child(3) { background: #e5edf0; }
.address-field span { font-size: 10px; display: block; color: #56675b; }
.address-field strong { font: 19px/1.5 var(--mono); display: block; letter-spacing: 2px; }
.address-field small { font-size: 10px; }
.outcome { padding: 11px 14px; border-radius: 6px; background: #eef4e9; border: 1px solid #c2d4b6; font-size: 12px; margin: 16px 0; }
.outcome.warning { background: #faf1df; border-color: #e2cfaa; color: #785a30; }
.history-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.history-pills span { font: 10px var(--mono); padding: 5px 8px; border-radius: 4px; background: #edf1e8; border: 1px solid var(--line); }
.history-pills .miss { background: #f9efdf; }
.bit-row { display: flex; align-items: center; gap: 4px; margin: 8px 0; }
.bit-row > .bit-label { width: 72px; flex: 0 0 72px; font-size: 10px; color: var(--muted); }
.bit { flex: 1; min-width: 17px; min-height: 33px; text-align: center; display: inline-flex; align-items: center; justify-content: center; font: 17px var(--mono); background: #f1f4ec; border: 1px solid var(--line); border-radius: 4px; }
.bit.sign { background: #ede5d5; }
.bit.is-active { background: #dcebd0; border: 2px solid #7c9c68; }
.bit.unknown { color: #abb4a4; }
.bit-row.small .bit { font-size: 10px; min-height: 22px; background: transparent; border: 0; }
.bit-row.result { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line-strong); }
.formula { padding: 15px; background: #f1f4eb; border-radius: 7px; font: 13px/1.9 var(--mono); margin-block: 16px; overflow-wrap: anywhere; }
.floating-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
.float-group { padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.float-group:nth-child(1) { background: #f7f0e3; }.float-group:nth-child(2) { background: #eaf0e5; }.float-group:nth-child(3) { background: #edf2f4; }
.float-group h3 { font-size: 11px; margin-bottom: 8px; font-weight: 500; }
.float-bits { display: flex; flex-wrap: wrap; gap: 4px; }
.float-bits button { width: 26px; min-height: 35px; border: 1px solid #b7c5b0; background: #ffffffb0; border-radius: 4px; color: var(--ink); font: 14px var(--mono); }
.float-bits button[aria-pressed="true"] { background: var(--green); color: white; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.preset-row button { background: white; border: 1px solid var(--line); padding: 5px 9px; border-radius: 4px; font-size: 10px; color: var(--green); min-height: 32px; }
.interrupt-path { display: flex; gap: 6px; flex-wrap: wrap; margin: 15px 0; }
.interrupt-path span { flex: 1; text-align: center; font-size: 10px; padding: 8px; background: #f2f4ee; border-radius: 5px; border: 1px solid var(--line); min-width: 63px; }
.interrupt-path .current { background: #e0ecd5; border-color: #8ca77d; }
.event-log { margin: 0; padding-left: 21px; color: var(--muted); font-size: 11px; max-height: 200px; overflow: auto; }
.event-log li { padding-block: 4px; }
.bus-network { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: 12px; margin-block: 20px; }
.bus-node { padding: 24px 8px; border: 1px solid #aabd9d; border-radius: 7px; background: #edf3e7; text-align: center; font-size: 13px; }
.bus-wire { border-bottom: 2px solid #aabc9d; margin: 9px 0; padding-bottom: 5px; display: flex; justify-content: space-between; gap: 7px; font: 10px var(--mono); }
.bus-wire.active { border-color: var(--green); color: var(--green); font-weight: bold; }
.reading-section { padding-top: 40px; }
.reading-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.reading-card { padding: 23px; border: 1px solid var(--line); background: #fafbf8; border-radius: 10px; }
.reading-card h3 { font-size: 15px; margin-bottom: 10px; }
.reading-card p { font-size: 12px; color: var(--muted); line-height: 1.95; }
.try-it { margin-top: 23px; padding: 20px 23px; background: #edf2e8; border-radius: 10px; }
.try-it h3 { font-size: 14px; margin-bottom: 8px; }
.try-it ol { margin: 0; padding-left: 20px; font-size: 12px; color: #53634b; line-height: 2; }
.quiz-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.quiz-form { padding: 23px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.quiz-form fieldset { padding: 0; border: 0; margin: 0; }
.quiz-form legend { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.quiz-form label { display: flex; gap: 9px; align-items: baseline; font-size: 12px; margin-bottom: 10px; cursor: pointer; }
.quiz-form input { accent-color: var(--green); }
.quiz-form button { margin-top: 10px; }
.quiz-feedback { margin-top: 14px; padding: 12px; border-radius: 5px; background: #faf0dd; font-size: 12px; }
.quiz-feedback.is-correct { background: #eaf2e3; }
.source-note { color: var(--muted); font-size: 10px; margin-top: 24px; }
.source-note a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:1000px) { .case-layout.lab-layout { grid-template-columns: minmax(0,1fr); } .learning-sidebar { display: grid; grid-template-columns: 1.3fr 1fr; } .register-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { .lab-output,.lab-form { padding: 17px 14px; } .lab-top,.lab-controls,.narration { padding-inline: 14px; } .lab-controls { gap: 6px; } .lab-controls button { padding-inline: 9px; } .speed-label { margin-left: 0; } .register-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .reading-grid,.quiz-grid { grid-template-columns: 1fr; } .learning-sidebar { grid-template-columns: 1fr; } .memory-layout { grid-template-columns: 1fr; } .case-heading h1 { font-size: 29px; } .bit-row > .bit-label { width: 50px; flex-basis: 50px; font-size: 9px; } .bit { font-size: 13px; min-height: 29px; } .bit-row { gap: 2px; } .bus-network { grid-template-columns: 52px 1fr 52px; gap: 8px; } .bus-node { font-size: 11px; } .address-field { padding-inline: 4px; } .address-field strong { font-size: 17px; letter-spacing: 1px; } }