:root{color-scheme:dark;--bg:#101d29;--panel:#192b39;--ink:#eef4f6;--muted:#b2c3ce;--line:#3b5060;--rc:#b7a0ff;--base:#69d7cc;--coil:#ffbc74;--rail:#87df96;--flyback:#ffa3cc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif}.shell{max-width:1450px;margin:auto;padding:22px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}h1{font-size:clamp(23px,3vw,34px);line-height:1.2;margin:2px 0 7px}h2{font-size:18px;margin:0}p{margin:10px 0}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--base);margin:0}.subtitle,.note{font-size:12px;color:var(--muted);margin:7px 0}a{color:var(--base)}.back{border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:13px;text-decoration:none}.monitor{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}.monitor .panel{margin:0}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.badge{font-size:12px;padding:3px 9px;border:1px solid var(--rail);color:var(--rail);border-radius:20px}.badge.off{color:var(--muted);border-color:var(--line)}#circuit{width:100%;display:block;margin:5px 0 0}.wire{fill:none;stroke:#d4e0e5;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.symbol{fill:var(--panel);stroke:#d4e0e5;stroke-width:2.5}.label{font:18px system-ui,sans-serif;fill:#eef4f6}.small{font-size:15px}.muted{fill:#b2c3ce}.node{fill:#d4e0e5}.mechanical{fill:none;stroke:var(--rc);stroke-width:1.7;stroke-dasharray:5 6}.current{fill:none;stroke-width:4;stroke-dasharray:2 18;stroke-linecap:round;pointer-events:none}.current.rc{stroke:var(--rc)}.current.base{stroke:var(--base)}.current.coil{stroke:var(--coil)}.current.rail{stroke:var(--rail)}.current.flyback{stroke:var(--flyback)}.readings{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 12px}.readings>div{border-bottom:1px solid var(--line);padding:5px 0}.readings span,.timing span{display:block;color:var(--muted);font-size:11px}.readings strong{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}.rc-key{color:var(--rc)}.base-key{color:var(--base)}.coil-key{color:var(--coil)}.flyback-key{color:var(--flyback)}.legend{font-size:11px}button,input,select{font:inherit}button,select{background:#233b4d;border:1px solid var(--line);color:var(--ink);padding:7px 10px;border-radius:7px;font-size:12px;cursor:pointer}button:hover{border-color:var(--base)}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--base);outline-offset:3px}.pills{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 5px}.pills button{border-radius:20px;padding:4px 10px}.pills button[data-trace=vc][aria-pressed=true]{border-color:var(--rc);color:var(--rc)}.pills button[data-trace=vref][aria-pressed=true]{border-color:#d6dce1;color:#d6dce1}.pills button[data-trace=output][aria-pressed=true]{border-color:var(--base);color:var(--base)}.pills button[data-trace=boxVoltage][aria-pressed=true]{border-color:var(--coil);color:var(--coil)}.pills button[aria-pressed=false]{opacity:.55}#scope{width:100%;display:block;cursor:ew-resize;touch-action:none}#scope:focus-visible{outline:2px solid var(--base)}#clock{font-size:20px;color:var(--base);font-variant-numeric:tabular-nums}.seek-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}#seek{width:100%;accent-color:var(--base)}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0}.transport label{display:flex;align-items:center;gap:6px;font-size:12px}.timing{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.timing strong{font-size:21px;font-variant-numeric:tabular-nums}.workbench{margin-top:16px}.mode-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:12px 0}.mode-row label{font-size:13px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.control label{display:block;color:var(--muted);font-size:12px}.control-row{display:flex;align-items:center;gap:7px;margin:4px 0}.control input[type=number]{width:104px;background:#0e202d;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px;font-size:14px}.control input[type=range]{width:100%;accent-color:var(--base)}.control small{font-size:10px;color:var(--muted)}.control.invalid input{border-color:#ff9292}.warning,#error{color:#ffc788;font-size:12px}#error{color:#ff9292}[hidden]{display:none!important}details{margin:12px 0}summary{cursor:pointer;color:var(--base);font-size:13px}details .controls{margin-top:12px}.explanation p{text-align:justify;font-size:14px}.explanation .sources{font-size:12px;text-align:left}.equations p{font-family:Georgia,serif;font-size:18px}footer{text-align:center;font-size:12px;color:var(--muted);padding:8px}.gridline{stroke:#334b5d;stroke-width:1}.scope-label{font:12px system-ui,sans-serif;fill:#b2c3ce}.load-on{fill:#2a4938;stroke:var(--rail)}.load-off{fill:#172632;stroke:#607685}.flow-strip{font-size:14px}@media(max-width:950px){.monitor{grid-template-columns:1fr}.controls{grid-template-columns:repeat(3,1fr)}header{align-items:flex-start}.readings{grid-template-columns:repeat(3,1fr)}#circuit{max-height:430px}}@media(max-width:600px){.shell{padding:12px}.panel{padding:12px}header{flex-direction:column;gap:8px}.controls{grid-template-columns:repeat(2,1fr)}.readings strong{font-size:16px}.mode-row select{display:block;margin-top:5px;max-width:100%}.panel-title h2{font-size:15px}.badge{font-size:11px}.timing strong{font-size:18px}}

.switch-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}.press-switch{background:#255247;border-color:var(--base);font-size:14px;padding:10px 14px;touch-action:none;user-select:none}.press-switch[aria-pressed=true]{background:var(--base);color:#10212a;box-shadow:0 0 14px #69d7cc50}#switch-state{font-size:12px;color:var(--muted)}

.duration-panel{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0}.duration-panel label{font-size:12px;color:var(--muted)}.duration-panel input{width:64px;background:#0e202d;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px}.duration-panel .note{margin:0}.duration-panel .error{flex-basis:100%;margin:0}.duration-display{display:block;width:180px;height:86px;margin:4px 0 8px;background:#08131c;border:1px solid var(--line);border-radius:7px}.seven-segment path{fill:none;stroke-width:7;stroke-linecap:round}.seven-segment .segment-on{stroke:#ff6b61}.seven-segment .segment-off{stroke:#38272a}.live-table{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:11px}.live-table caption{text-align:left;color:var(--muted);font-size:12px;margin-bottom:5px}.live-table th,.live-table td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}.live-table th{color:var(--muted);font-weight:500}.live-table td{font-variant-numeric:tabular-nums;color:var(--ink)}
.display-label{font-size:12px;color:var(--muted);margin:7px 0 2px}.display-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.display-column{display:grid;justify-items:center}.current-readings{display:grid;gap:5px;min-width:115px}.current-readings>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);font-size:11px}.current-readings strong{font-variant-numeric:tabular-nums}.reference-knob{position:relative;display:grid;gap:3px;justify-items:center;color:var(--muted);font-size:11px;isolation:isolate}.reference-knob::before{content:"";position:absolute;top:17px;width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,#233b4d 0 56%,#0e202d 58% 100%);z-index:-1}.reference-knob::after{content:"";position:absolute;top:25px;width:5px;height:27px;border-radius:3px;background:var(--base);transform-origin:50% 22px;transform:rotate(var(--knob-angle,-51deg));z-index:1;pointer-events:none}.reference-knob input{appearance:none;width:72px;height:72px;border:0;background:transparent;cursor:pointer;z-index:2}.reference-knob input::-webkit-slider-thumb{appearance:none;width:72px;height:72px;background:transparent}.reference-knob input::-moz-range-thumb{width:72px;height:72px;border:0;background:transparent}.reference-knob output{color:var(--ink);font-variant-numeric:tabular-nums}.reference-knob p{max-width:150px;text-align:center;margin:0;font-size:10px}.error{color:#ff9292}

.page-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.page-tabs a{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 15px;color:var(--muted);font-size:13px;text-decoration:none}.page-tabs a[aria-current=page]{border-color:var(--cyan,var(--base));background:#233b4d;color:var(--cyan,var(--base));font-weight:600}.page-tabs a:hover{border-color:var(--cyan,var(--base))}.page-tabs a:focus-visible{outline:2px solid var(--cyan,var(--base));outline-offset:3px}@media(max-width:500px){.page-tabs{gap:5px}.page-tabs a{font-size:11px;padding:7px 9px}}

.duration-panel .error{color:#ff9292;font-size:12px}

.duration-display{width:130px;height:93px}.scope-guidance p{font-size:12px}

.rail-key{color:var(--rail)}

/* Full-width teaching layout: circuit first, then operation controls, scope and readings. */
.monitor{display:block}.circuit-panel{width:100%;overflow-x:auto;overflow-y:hidden}.circuit-panel #circuit{display:block;width:100%;min-width:800px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.figure-caption{font-size:12px;color:var(--muted);margin:6px 0 12px}.scope-panel{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);column-gap:16px;align-items:start}.scope-panel>.panel-title{grid-column:1/-1}.scope-panel>.live-table{grid-column:2;grid-row:2 / span 5;margin-top:0}.scope-panel>.pills{grid-column:1;grid-row:2}.scope-panel>#scope{grid-column:1;grid-row:3}.scope-panel>.seek-label{grid-column:1;grid-row:4}.scope-panel>#seek{grid-column:1;grid-row:5}.scope-panel>.transport{grid-column:1;grid-row:6}.scope-panel>.note{grid-column:1;grid-row:7}.scope-panel .live-table td,.scope-panel .live-table th{font-size:11px}.reference-knob{min-width:150px}.display-row{align-items:center}
.current{stroke-width:6;stroke-dasharray:1 20;stroke-linecap:round;filter:drop-shadow(0 0 3px currentColor)}.schematic-button{cursor:pointer;transition:filter .15s ease,stroke-width .15s ease}.schematic-button:hover,.schematic-button:focus-visible{filter:drop-shadow(0 0 4px var(--base));stroke-width:3}.schematic-button:focus-visible{outline:2px solid var(--base);outline-offset:4px}.switch-hit{cursor:pointer;fill:transparent;stroke:transparent;stroke-width:18}.switch-hit:hover,.switch-hit:focus-visible{stroke:var(--base);stroke-opacity:.35}.switch-hit[aria-pressed=true],.schematic-button[aria-pressed=true]{stroke:var(--base);stroke-width:3}.switch-control-label{fill:var(--ink);font-size:16px;font-weight:600;user-select:none}.energised{stroke:var(--rail);fill:var(--rail)}
@media(max-width:850px){.scope-panel{display:block}.scope-panel>.live-table{margin-top:12px}.circuit-panel #circuit{min-width:800px}}

/* Native schematic and compact operating strip. */
.monitor .panel{margin-bottom:16px}
.schematic-scroll{overflow-x:auto;background:var(--panel);border-radius:8px}
.circuit-panel #circuit{min-height:0;max-height:none;margin:0;aspect-ratio:1200/400}
#circuit .current{stroke-width:6;stroke-dasharray:1 20}
#circuit .current.rc{stroke:var(--rc);color:var(--rc)}#circuit .current.base{stroke:var(--base);color:var(--base)}
#circuit .current.coil{stroke:var(--coil);color:var(--coil)}#circuit .current.rail{stroke:var(--rail);color:var(--rail)}#circuit .current.flyback{stroke:var(--flyback);color:var(--flyback)}
.operation-strip{display:grid;grid-template-columns:minmax(260px,1fr) minmax(550px,2fr);align-items:center;gap:20px}
.display-row{justify-content:space-evenly;flex-wrap:nowrap}.display-column{min-width:135px}.current-readings{min-width:145px}
.scope-panel{grid-template-columns:minmax(0,1.6fr) minmax(370px,1fr)}
.scope-panel>.live-table{font-size:12px}.scope-panel .live-table td,.scope-panel .live-table th{font-size:12px}
@media(max-width:1000px){.operation-strip{grid-template-columns:1fr}.display-row{justify-content:flex-start;gap:28px}}
@media(max-width:850px){.scope-panel{display:block}.circuit-panel #circuit{min-width:800px;min-height:0}.schematic-scroll{width:100%}}
@media(max-width:600px){.display-row{flex-wrap:wrap;gap:12px}.scope-panel .live-table td,.scope-panel .live-table th{font-size:10px;padding:4px}.operation-strip{grid-template-columns:minmax(0,1fr)}}

.schematic-button{touch-action:none;user-select:none}
.schematic-button:hover,.schematic-button:focus-visible{filter:none}
.schematic-button .switch-hit{fill:#203746;stroke:#486271;stroke-width:1.5}
.schematic-button:hover .switch-hit,.schematic-button:focus-visible .switch-hit{stroke:var(--base);stroke-opacity:1;stroke-width:2}
.schematic-button[aria-pressed=true] .switch-hit{fill:#204c45;stroke:var(--base);stroke-width:2}
.schematic-button[aria-pressed=true] #charge-switch{stroke:var(--base);stroke-width:4}
.energised{fill:none}

/* Source supply paths and live node readouts. */
#circuit .current.supply{stroke:#8fc8ff;color:#8fc8ff}
.node-voltage{font:14px system-ui,sans-serif;fill:#cfdae3;font-variant-numeric:tabular-nums}
.node-voltage.supply-value{fill:#8fc8ff}.node-voltage.capacitor-value{fill:var(--rc)}.node-voltage.box-value{fill:var(--rail)}
.node-state.high{fill:var(--base)}.discharge-note{grid-column:1;grid-row:7}
.flyback-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.flyback-controls .note{margin:0}.flyback-active{stroke:var(--flyback)!important;fill:var(--flyback)!important;filter:drop-shadow(0 0 4px var(--flyback))}.flyback-arrow{fill:none;stroke:var(--flyback);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.45}#flyback-direction{opacity:0}#flyback-direction.flyback-active{opacity:1}.flyback-direction-active,.flyback-active .flyback-arrow{opacity:1}