@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #292b28;
    background: #eeece5;
    font-synthesis: none;
    --paper: #f5f3ec;
    --panel: #eeece5;
    --ink: #292b28;
    --muted: #7c7e75;
    --curriculum-muted: #62665c;
    --line: #d7d6cc;
    --orange: #ed6639;
    --orange-dark: #b93e1b;
    --yellow: #e9bd55;
    --blue: #67b9d4;
    --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --display: 'Space Grotesk', 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
#capacitance-family-form { display: grid; gap: 8px; margin: 12px 0; }
#capacitance-family-form :is(input, button) { max-width: 16rem; }
#capacitance-family-data { box-sizing: border-box; width: 100%; resize: vertical; padding: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#capacitance-family-support { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(#resistor-marking-form, #capacitor-marking-form, #inductor-code-form) { display: grid; gap: 8px; margin: 12px 0; }
:is(#resistor-marking-form, #capacitor-marking-form, #inductor-code-form) :is(input, select) { box-sizing: border-box; width: 100%; max-width: 36rem; min-width: 0; }
:is(#resistor-marking-form, #capacitor-marking-form, #inductor-code-form) button { justify-self: start; }
:is(#resistor-marking-support, #capacitor-marking-support, #inductor-code-support) { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#inductor-code-form :is(input, select, button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#inductor-code-form :is(input, select, button):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#chip-package-form { display: grid; gap: 8px; margin: 12px 0; }
#chip-package-form :is(input, select) { width: 100%; max-width: 36rem; min-width: 0; }
#chip-package-form button { justify-self: start; }
#chip-package-diagram { display: block; width: 100%; max-width: 25rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#chip-package-diagram[hidden] { display: none; }
#chip-package-diagram text { fill: currentColor; stroke: none; font-size: 13px; }
.chip-package-body { fill: none; stroke: var(--orange-dark); stroke-width: 2; }
.chip-package-body.variant-1 { stroke: var(--ink); stroke-dasharray: 5 3; }
.chip-package-reference { fill: none; stroke: currentColor; stroke-width: 1.5; }
#chip-package-support { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#linear-ac-form { display: grid; gap: 8px; margin: 12px 0; }
#linear-ac-panel > summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
#linear-ac-form :is(input, select, button) { min-height: 44px; min-width: 44px; max-width: 100%; padding: 8px 12px; }
#linear-ac-form :is(input, select) { width: 100%; max-width: 36rem; min-width: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#linear-ac-form button { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
#linear-ac-form :is(input, select, button):focus-visible, #linear-ac-panel > summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
@media (max-width: 720px) {
    #linear-ac-form :is(input, select) { font-size: 16px; }
}
#linear-ac-plot { display: block; width: 100%; max-width: 44rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#linear-ac-plot[hidden] { display: none; }
#linear-ac-plot text { fill: currentColor; stroke: none; font-size: 12px; }
.linear-ac-axis { fill: none; stroke: var(--line); stroke-width: 1; }
.linear-ac-gain { fill: none; stroke: var(--orange-dark); stroke-width: 2; }
.linear-ac-phase { fill: none; stroke: #23708c; stroke-width: 2; }
.linear-ac-gain-point { fill: var(--orange-dark); stroke: none; }
.linear-ac-phase-point { fill: #23708c; stroke: none; }
#linear-ac-values { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#circuitjs-input-panel label { display: block; margin-top: 9px; font-size: 11px; }
#circuitjs-input-panel :is(input, select, textarea) { box-sizing: border-box; width: 100%; }
#circuitjs-input-panel textarea { min-height: 90px; resize: vertical; padding: 7px; border: 1px solid #cec3ad; color: var(--ink); background: #faf8ee; }
#circuitjs-input-panel button { margin-top: 8px; }
#circuitjs-input-panel pre, #imported-circuit-notes pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; font: 11px/1.6 var(--mono); }
#circuitjs-input-panel p, #imported-circuit-notes p { max-height: none; overflow: visible; }
button, a, input, select { touch-action: manipulation; }
button {
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
button:hover { background: #e5e3db; }
button:active { box-shadow: inset 0 1px 3px #1e21171c; }
button:disabled { cursor: default; opacity: .45; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, canvas:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}
button.active { color: var(--orange-dark); background: #f4dfd3; }
a { color: var(--orange-dark); text-underline-offset: 3px; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

header {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 23px;
    padding: 0 24px;
    border-bottom: 1px solid #c9c9be;
    background: var(--paper);
    box-shadow: 0 1px 0 #fff9;
    position: relative;
    z-index: 12;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 24px var(--display); letter-spacing: -1.15px; color: var(--ink); white-space: nowrap; }
.brand svg { width: 31px; stroke: var(--ink); stroke-width: 1.4; }
.brand svg rect { fill: var(--orange); stroke: none; }
.brand svg circle { fill: var(--ink); stroke: none; }
.beta { font: 10px var(--mono); letter-spacing: -.1px; color: #797b70; margin-left: 3px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 2px; }
.header-divider { width: 1px; height: 20px; background: var(--line); }
.workspace-title { font: 9px var(--mono); letter-spacing: 1.1px; color: #8a8a7e; }
.header-actions { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.header-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; }
.header-actions svg { width: 15px; height: 15px; }
button.light { border: 1px solid #d1d1c6; background: #f8f6ef; padding: 8px 12px; font-size: 11px; box-shadow: 0 1px 1px #2527190a, inset 0 1px 0 #fff; }
button.light:hover { border-color: #b7b8ab; background: #e9e7df; }
button.primary { padding: 9px 14px; background: var(--orange); border: 1px solid #db592e; box-shadow: inset 0 1px 0 #ffffff30, 0 1px 1px #6b351d18; color: #251f17; font-size: 11px; font-weight: 700; }
button.primary:hover { background: #f77b4d; }
.run-state { font: 10px var(--mono); color: #77766b; margin-right: 11px; white-space: nowrap; }

.workspace { display: grid; grid-template-columns: 278px minmax(0, 1fr); height: calc(100dvh - 64px); min-height: 550px; }
aside { display: flex; flex-direction: column; border-right: 1px solid #c9c9be; background: var(--paper); overflow: hidden; }
.sidebar-heading, .lesson-notes, .tabs, .search, .sidebar-footer { flex-shrink: 0; }
.sidebar-heading { padding: 23px 21px 22px; }
.eyebrow { font: 9px var(--mono); letter-spacing: 1px; color: var(--muted); }
.sidebar-heading h1 { font: 600 25px/1.2 var(--display); letter-spacing: -1px; margin: 12px 0 9px; }
.sidebar-heading p { font-size: 11px; line-height: 1.65; color: var(--muted); margin: 0; }
.lesson-notes { margin: 0 15px 17px; padding: 14px; background: #e9e7de; border: 1px solid #d9d8cc; border-radius: 5px; box-shadow: inset 0 1px 0 #fff8; }
.section-kicker { font: 8px var(--mono); letter-spacing: .8px; color: #7e7f71; display: flex; gap: 7px; align-items: center; }
.small-dot { width: 5px; height: 5px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 3px #ed663915; }
.lesson-notes h2 { font: 600 14px/1.35 var(--display); letter-spacing: -.2px; margin: 10px 0 7px; }
.lesson-notes p { font-size: 11px; color: #7b7c6f; line-height: 1.6; margin: 0 0 11px; }
.text-button { padding: 0; font-size: 10px; color: #626257; text-align: left; }
.text-button:hover { background: transparent; color: var(--orange-dark); text-decoration: underline; }
#notes-toggle { color: var(--orange-dark); font-size: 10px; font-weight: 600; }
#notes { margin-top: 15px; max-height: 260px; overflow: auto; overflow-wrap: anywhere; font-size: 11px; line-height: 1.7; }
#notes > p { white-space: pre-line; max-height: none; overflow: visible; }
#notes ol { padding-left: 18px; }
#notes li { margin-bottom: 12px; }
#notes strong { display: block; font-weight: 500; color: #858477; margin-top: 4px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 15px; }
.tabs button { flex: 1; border-radius: 0; padding: 11px 0; font-size: 11px; color: #88897e; border-bottom: 2px solid transparent; }
.tabs button[aria-selected=true] { border-color: var(--orange); color: var(--ink); font-weight: 700; }
.tabs button span { font: 9px var(--mono); margin-left: 4px; color: #8e8e80; }
.search { margin: 14px 15px 7px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #eae8df; border: 1px solid #dbdacf; border-radius: 4px; color: #949487; box-shadow: inset 0 1px 2px #20251a05; }
.search svg { flex-shrink: 0; width: 15px; height: 15px; }
.search input { border: 0; background: transparent; width: 100%; min-width: 0; font-size: 11px; outline: none; color: var(--ink); }
.search input::placeholder { color: #959487; }
.search:focus-within { border-color: #cd7759; }
.catalog { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 14px; scrollbar-width: thin; scrollbar-color: #c5c5b8 transparent; }
.topic-title { font: 8px var(--mono); letter-spacing: .8px; color: #8d8d7f; text-transform: uppercase; padding: 15px 11px 7px; }
.circuit-card { display: flex; text-align: left; width: 100%; gap: 11px; padding: 10px 9px; margin: 2px 0; border: 1px solid transparent; border-radius: 4px; align-items: center; }
.circuit-card:hover { background: #eae8df; }
.circuit-card.selected { background: #e6e3d9; border-color: #d6d2c4; box-shadow: inset 2px 0 0 var(--orange); }
.circuit-icon { background: #e8e6dd; border: 1px solid #dad8cc; width: 31px; height: 31px; border-radius: 4px; display: grid; place-items: center; font: 20px serif; color: #8b8b7c; flex-shrink: 0; }
.circuit-card.selected .circuit-icon { background: var(--orange); border-color: #de5d34; color: #302820; }
.circuit-icon svg { width: 20px; height: 20px; }
.circuit-card > span:nth-child(2) { min-width: 0; }
.circuit-card strong { display: block; font-size: 11px; line-height: 1.4; font-weight: 600; margin: 0 0 4px; }
.circuit-card small { display: block; font-size: 9px; color: #949383; line-height: 1.45; }
.card-arrow { margin-left: auto; color: #aaa899; align-self: center; font-size: 13px; }
.circuit-card.selected .card-arrow { color: var(--orange-dark); }
.part-card { padding: 13px 11px; border-bottom: 1px solid var(--line); }
.part-card h3 { font: 600 13px var(--display); margin: 0 0 5px; }
.part-card p { font-size: 10px; color: #818172; line-height: 1.6; margin: 6px 0; }
.part-card details { font-size: 10px; color: #77776b; }
.part-card summary { cursor: pointer; }
.part-card small { font: 9px var(--mono); color: #999586; }
.part-card a { font-size: 10px; }
.sidebar-footer { border-top: 1px solid var(--line); padding: 13px 21px 15px; color: #959283; font-size: 9px; line-height: 1.6; }
.sidebar-footer span { color: #7b7b6f; font: 7px var(--mono); letter-spacing: .6px; }
.sidebar-footer p { margin: 6px 0 5px; }
.sidebar-footer a { color: #868575; font-size: 9px; text-decoration: none; }
.sidebar-footer a:hover { color: var(--orange-dark); }

main { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; overflow-y: auto; }
/* Availability and recovery messages need their own space above both 3D views. */
#xr-status {
    flex: none;
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
#xr-status:empty { display: none; }
.bench { position: relative; flex: 1; min-height: 280px; overflow: hidden; background: #d5d3ca; }
#breadboard { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.bench-title { position: absolute; left: 24px; top: 22px; pointer-events: none; }
.bench-title .eyebrow { color: #828174; font-size: 8px; letter-spacing: 1.2px; }
.bench-title p { font-size: 10px; color: #929184; margin: 7px 0; }
.bench-title p span { padding: 0 8px; color: #aaa89a; }
.view-controls { position: absolute; top: 20px; right: 22px; display: flex; background: #f5f3eae8; border: 1px solid #c7c5b8; border-radius: 5px; padding: 3px; box-shadow: 0 2px 4px #302c220c, inset 0 1px 0 #fffd; }
.view-controls button { display: grid; place-items: center; width: 31px; height: 29px; color: #79796c; border-radius: 2px; }
.view-controls button + button { border-left: 1px solid #dddbcf; }
.view-controls svg { width: 15px; height: 15px; }
.cursor-readout { position: absolute; left: 24px; bottom: 86px; display: flex; align-items: center; gap: 10px; pointer-events: none; font: 10px var(--mono); color: #8d8c7e; }
.readout-label { font-size: 7px; letter-spacing: 1px; }
#socket { background: #f6f3e8d9; border: 1px solid #c9c6b7; padding: 5px 7px; border-radius: 3px; min-width: 40px; color: #666658; text-align: center; box-shadow: inset 0 1px 0 #fff9; }
.cursor-readout strong { color: #535447; font-weight: 500; font-size: 12px; }
#tool-hint { font: 10px 'DM Sans', sans-serif; color: #999689; }
.tool-dock { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; max-width: calc(100% - 44px); padding: 5px; background: #f6f3eaf5; border: 1px solid #c5c1b2; border-radius: 7px; box-shadow: 0 5px 9px #332e211a, 0 1px 0 #fff inset; }
.tool-dock button { display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: center; min-width: 51px; height: 49px; font-size: 8px; font-weight: 500; color: #858374; padding: 4px 7px; border: 1px solid transparent; border-radius: 4px; }
.tool-dock button svg { width: 23px; height: 23px; stroke-width: 1.4; }
.tool-dock button.active { background: var(--orange); color: #342a1e; border-color: #dc623a; box-shadow: inset 0 1px 0 #fff4, 0 1px 2px #754d2e18; }
.tool-dock button:hover { color: #414235; }
.dock-divider { width: 1px; flex-shrink: 0; background: #d8d5c8; margin: 6px 3px; }

.oscilloscope { position: relative; background: linear-gradient(105deg, #e6e4da, #eeece3 52%, #e5e3d9); border-top: 1px solid #c0beaf; padding: 16px 24px 18px; flex-shrink: 0; box-shadow: inset 0 2px 0 #fbf9ef; }
.oscilloscope::before, .oscilloscope::after { content: ''; position: absolute; width: 5px; height: 5px; bottom: 7px; background: linear-gradient(135deg, #bdbbb0 42%, #9b9d8e 43%, #9b9d8e 55%, #c7c6b8 56%); border: 1px solid #adad9b; border-radius: 50%; }
.oscilloscope::before { left: 8px; }
.oscilloscope::after { right: 8px; }
.scope-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.scope-heading .eyebrow { font-size: 7px; letter-spacing: 1.2px; }
.scope-heading h2 { font: 600 18px var(--display); letter-spacing: -.6px; margin: 4px 0 0; }
.scope-heading h2 span { font: 7px var(--mono); letter-spacing: .7px; color: #939181; border-left: 1px solid #c9cabb; margin-left: 8px; padding-left: 9px; vertical-align: middle; white-space: nowrap; }
.scope-settings { display: flex; gap: 12px; }
.scope-settings label { font: 7px var(--mono); text-transform: uppercase; letter-spacing: .7px; color: #8c897b; display: flex; flex-direction: column; gap: 5px; }
.scope-settings select { min-width: 83px; font: 10px var(--mono); text-transform: none; color: #555649; border: 1px solid #c9c4b5; background: #f7f6ec; border-radius: 3px; padding: 6px 8px; max-width: 145px; box-shadow: inset 0 1px 0 #fff, 0 1px 1px #3d342310; cursor: pointer; }
.scope-body { display: flex; gap: 15px; }
.channel-controls { width: 122px; flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; }
.channel { display: flex; gap: 9px; align-items: center; padding: 7px 8px; border: 1px solid #cfccbf; border-radius: 4px; text-align: left; background: #eeece0; box-shadow: inset 0 1px 0 #fff7, 0 1px 1px #302b1f10; }
.channel > span { width: 22px; height: 22px; flex-shrink: 0; background: var(--yellow); border: 1px solid #c9a24f; border-radius: 50%; display: grid; place-items: center; font: 11px var(--mono); color: #68532a; box-shadow: inset 0 1px 0 #fffc, 0 1px 1px #3c37251a; }
.channel div { min-width: 0; flex: 1; font: 6px var(--mono); letter-spacing: .8px; color: #989684; }
.channel strong { display: block; font: 10px var(--mono); letter-spacing: 0; color: #7b6639; margin: 3px 0; overflow-wrap: break-word; }
.channel strong.numeric-reading { white-space: nowrap; font-size: 12px; }
.channel small { font: 8px var(--mono); letter-spacing: 0; color: #979381; }
.channel.active { border-color: #bda457; background: #f2eddb; box-shadow: inset 2px 0 0 #d7ac4d, inset 0 1px 0 #fff9; }
.ch2 > span { background: #9acbd8; border-color: #82a9ae; color: #4b7880; }
.ch2 strong { color: #527d82; }
.ch2.active { border-color: #82a9ae; background: #e4ebea; box-shadow: inset 2px 0 0 #6ab3c6, inset 0 1px 0 #fff9; }
.channel-controls > p { font-size: 8px; line-height: 1.5; color: #999787; margin: 0; }
.scope-display { position: relative; flex: 1; min-width: 0; height: 148px; background: radial-gradient(ellipse at 50% 50%, #1b2b30, #101a1f); border: 3px solid #7b8078; outline: 1px solid #b8b9aa; border-radius: 6px; overflow: hidden; box-shadow: inset 0 2px 10px #0009, 0 1px 0 #ffffed; }
.scope-display::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 2px 9px #0007; border-radius: 3px; background: linear-gradient(145deg, #ffffff04, transparent 35%, transparent 75%, #0001); }
#scope { width: 100%; height: 100%; display: block; }
.scope-legend { position: absolute; left: 11px; right: 11px; bottom: 7px; display: flex; justify-content: space-between; gap: 10px; font: 8px var(--mono); color: #7d9b9d; pointer-events: none; }
.status-bar { min-height: 27px; display: flex; align-items: center; padding: 0 20px; gap: 12px; background: #e3e0d3; color: #898675; font-size: 9px; border-top: 1px solid #cdc8b8; }
.status-indicator { width: 4px; height: 4px; border-radius: 50%; background: #c18758; flex-shrink: 0; }
#status { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-bar .text-button { min-height: 24px; padding: 0 4px; font-size: 9px; color: #7b7a68; white-space: nowrap; }
.status-bar .text-button span { display: inline-block; width: 13px; height: 13px; text-align: center; border: 1px solid #b6b19c; border-radius: 50%; margin-left: 5px; font: 9px/12px var(--mono); }
#fps { font: 8px var(--mono); padding-left: 12px; border-left: 1px solid #c4bdaa; }

.inspector { position: fixed; z-index: 10; right: 16px; top: 80px; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 124px); overflow: auto; padding: 17px; background: #f5f3eaf7; border: 1px solid #c5bead; border-radius: 5px; box-shadow: 0 8px 26px #372f1e20, inset 0 1px 0 #fff; }
.inspector h2 { font: 600 16px var(--display); margin: 10px 30px 10px 0; }
.inspector-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; font-size: 22px; color: var(--ink); }
.inspector summary { cursor: pointer; font-size: 12px; margin: 12px 0; color: #514a3c; }
.inspector summary:focus-visible, .inspector-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.inspector p { font-size: 12px; color: #514a3c; line-height: 1.6; }
.inspector label { font-size: 12px; color: #514a3c; }
.inspector input, .inspector select { display: block; width: 100%; border: 1px solid #cec3ad; padding: 7px; margin: 6px 0 9px; background: #faf8ee; border-radius: 3px; color: #514a3c; font-size: 12px; min-height: 38px; }
#decimal-contacts { display: block; box-sizing: border-box; width: 100%; min-height: 80px; resize: vertical; border: 1px solid #cec3ad; padding: 7px; margin: 6px 0 9px; background: #faf8ee; border-radius: 3px; color: #514a3c; font-size: 12px; }
.inspector .primary { width: 100%; padding: 8px; }
.inspector .micro { font-size: 11px; }
.inspector .danger { color: #a34c32; font-size: 10px; border: 1px solid #d7ba9e; padding: 8px; width: 100%; margin-top: 9px; }
#pin-controls button { font-size: 9px; line-height: 1.5; text-align: left; display: block; padding: 6px 0; width: 100%; }
.stock-button { border: 1px solid #c8baa4; padding: 7px 10px; font-size: 10px; color: #776145; background: #efe8d7; border-radius: 3px; margin-top: 7px; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e0ddd2; z-index: 5; color: #555448; padding: 25px; text-align: center; }
#loading h2 { font: 500 26px var(--display); letter-spacing: -.8px; margin: 13px 0 4px; }
#loading p { font-size: 12px; color: #96917e; max-width: 430px; line-height: 1.7; }
.loading-symbol { display: flex; gap: 7px; margin-bottom: 23px; }
.loading-symbol span { width: 9px; height: 9px; background: var(--orange); border-radius: 2px; animation: pulse 1.5s infinite; }
.loading-symbol span:nth-child(2) { animation-delay: .15s; }
.loading-symbol span:nth-child(3) { animation-delay: .3s; }
dialog { border: 1px solid #c7bda6; border-radius: 8px; max-width: 530px; padding: 30px; background: var(--paper); color: #4f4b3d; box-shadow: 0 20px 90px #372b1530; }
dialog::backdrop { background: #352e236b; backdrop-filter: blur(4px); }
dialog h2 { font: 600 24px var(--display); letter-spacing: -.8px; }
dialog dt { font-size: 12px; font-weight: 700; margin-top: 16px; }
dialog dd { font-size: 12px; margin: 5px 0; line-height: 1.7; color: #8f806a; }
dialog p { font-size: 11px; color: #9a8c74; line-height: 1.6; }
.close { position: absolute; right: 15px; top: 10px; font-size: 25px; }
.mobile-only, .header-actions .mobile-only { display: none; }

@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (min-width: 1700px) {
    .workspace { grid-template-columns: 310px minmax(0, 1fr); }
    .sidebar-heading { padding: 27px; }
    .sidebar-heading h1 { font-size: 28px; }
    .lesson-notes { margin-left: 20px; margin-right: 20px; }
    .scope-display { height: 174px; }
    .oscilloscope { padding: 18px 30px 20px; }
    .channel-controls { width: 140px; }
}
@media (max-width: 1200px) {
    header { padding: 0 19px; gap: 17px; }
    .workspace-title { display: none; }
    .workspace { grid-template-columns: 250px minmax(0, 1fr); }
    .sidebar-heading { padding: 22px 20px; }
    .sidebar-heading h1 { font-size: 23px; }
    .run-state { margin-right: 6px; font-size: 9px; }
    .tool-dock { gap: 1px; }
    .tool-dock button { min-width: 44px; padding: 4px; }
    .scope-heading h2 span { display: none; }
    .oscilloscope { padding: 14px 19px 16px; }
    .scope-settings { gap: 9px; }
    .scope-settings select { min-width: 72px; }
    .channel-controls { width: 110px; }
    .channel strong { font-size: 9px; }
    .channel strong.numeric-reading { font-size: 10px; }
    #tool-hint { display: none; }
}
@media (max-width: 960px) {
    .header-divider, .run-state { display: none; }
    .beta { font-size: 8px; }
    .scope-settings { gap: 7px; }
    .scope-settings select { font-size: 9px; padding: 6px; min-width: 63px; max-width: 130px; }
    .scope-heading h2 { font-size: 16px; }
    .scope-heading .eyebrow { font-size: 6px; }
    .bench-title { left: 18px; top: 19px; }
    .bench-title .eyebrow { font-size: 7px; }
    .bench-title p { font-size: 9px; }
    .view-controls { top: 18px; right: 18px; }
    .view-controls button { width: 26px; }
    .tool-dock { max-width: calc(100% - 28px); }
    .tool-dock button { min-width: 38px; font-size: 7px; }
    .tool-dock button svg { width: 21px; height: 21px; }
    .dock-divider { margin-left: 1px; margin-right: 1px; }
}
@media (max-width: 760px) {
    header { height: 57px; padding: 0 13px; gap: 10px; }
    .brand { font-size: 22px; gap: 8px; }
    .brand svg { width: 28px; }
    .beta { display: none; }
    .header-actions { gap: 5px; }
    .header-actions button { min-height: 32px; padding: 7px 9px; font-size: 10px; }
    .header-actions svg { width: 15px; height: 15px; }
    #share span { display: none; }
    #share { padding: 7px 8px; }
    #reset svg { display: none; }
    .mobile-only, .header-actions .mobile-only { display: inline-flex; }
    .workspace { height: calc(100dvh - 57px); min-height: 495px; display: block; }
    aside { display: none; position: absolute; top: 57px; bottom: 0; left: 0; width: min(340px, 88vw); z-index: 10; box-shadow: 8px 0 35px #2b38212e; }
    aside.open { display: flex; }
    main { height: 100%; }
    .bench { min-height: 250px; }
    .bench-title { left: 15px; top: 16px; }
    .bench-title .eyebrow { font-size: 6px; letter-spacing: .8px; }
    .bench-title p { font-size: 8px; margin-top: 6px; }
    .view-controls { right: 12px; top: 12px; padding: 3px; }
    .view-controls button { width: 26px; height: 27px; }
    .view-controls svg { width: 13px; height: 13px; }
    .tool-dock { bottom: 12px; width: max-content; max-width: calc(100% - 22px); gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
    .tool-dock::-webkit-scrollbar { display: none; }
    .tool-dock button { min-width: 40px; height: 43px; flex-shrink: 0; padding: 4px; font-size: 7px; gap: 4px; }
    .tool-dock button svg { width: 21px; height: 21px; }
    .cursor-readout { left: 15px; top: 48px; bottom: auto; gap: 8px; padding: 6px 8px; border: 1px solid #cfccbf; border-radius: 4px; background: #f5f3ecef; }
    .cursor-readout strong { font-size: 11px; }
    .readout-label { display: none; }
    #socket { padding: 0; min-width: 28px; font-size: 9px; border: 0; background: transparent; box-shadow: none; }
    .oscilloscope { padding: 11px 12px 14px; }
    .scope-heading { margin-bottom: 10px; gap: 8px; }
    .scope-heading h2 { font-size: 15px; }
    .scope-heading .eyebrow { font-size: 6px; letter-spacing: .7px; }
    .scope-settings { margin-left: auto; gap: 7px; }
    .scope-settings label { font-size: 6px; letter-spacing: .2px; gap: 4px; }
    .scope-settings select { font-size: 9px; padding: 5px; min-width: 58px; max-width: 96px; }
    .scope-settings label:last-child { display: flex; }
    #scope-toggle { display: grid; place-items: center; padding: 0; width: 27px; height: 29px; flex-shrink: 0; margin-top: 11px; }
    #scope-toggle svg { width: 13px; height: 13px; }
    .scope-body { gap: 9px; }
    .channel-controls { width: 98px; gap: 6px; }
    .channel { padding: 5px; gap: 6px; }
    .channel > span { width: 18px; height: 18px; font-size: 9px; }
    .channel div { font-size: 5px; letter-spacing: .4px; }
    .channel small { font-size: 7px; }
    .channel-controls > p { font-size: 7px; }
    .scope-display { height: 126px; border-width: 2px; }
    .scope-legend { left: 7px; right: 7px; bottom: 6px; font-size: 6px; }
    .status-bar { padding: 0 11px; min-height: 25px; font-size: 8px; gap: 7px; }
    .status-bar .text-button { font-size: 8px; }
    .status-bar .text-button span { display: none; }
    .status-bar #fps { display: none; }
    .inspector { width: min(320px, calc(100vw - 24px)); right: 12px; top: 76px; padding: 13px; }
    .oscilloscope.collapsed .scope-body { display: none; }
    .oscilloscope.collapsed #scope-toggle svg { transform: rotate(180deg); }
    #loading h2 { font-size: 23px; }
    #loading p { font-size: 11px; }
    dialog { margin: auto 15px; max-height: calc(100dvh - 40px); overflow: auto; padding: 25px; }
}
@media (max-width: 560px) {
    .scope-heading { display: grid; grid-template-columns: 1fr auto; row-gap: 10px; }
    .scope-name { grid-column: 1; grid-row: 1; }
    .scope-heading .eyebrow { font-size: 6px; }
    .scope-settings { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 9px; }
    .scope-settings label { flex: 1; min-width: 0; font-size: 7px; }
    .scope-settings select { width: 100%; max-width: none; min-width: 0; font-size: 10px; }
    #scope-toggle { grid-column: 2; grid-row: 1; margin-top: 0; }
    .oscilloscope.collapsed .scope-settings { display: none; }
}
@media (max-width: 390px) {
    /* The XR entry is a fifth action. Keep every control visible by using
       the labeled home mark alone on the narrowest header. */
    header { padding-inline: 8px; gap: 8px; }
    .brand { font-size: 0; gap: 0; flex-shrink: 0; }
    .brand svg { width: 26px; }
    .header-actions { gap: 4px; }
    .header-actions button { min-height: 40px; padding: 7px; }
    #reset, #share, #menu { min-width: 36px; }
    #reset { font-size: 0; }
    #reset svg { display: block; }
    .scope-heading h2 { font-size: 14px; }
    .scope-heading .eyebrow { letter-spacing: .2px; font-size: 5px; }
    .scope-settings { gap: 5px; }
    .scope-settings select { min-width: 54px; }
    .bench-title p { display: none; }
}
@media (max-height: 700px) and (min-width: 761px) {
    .workspace { min-height: 490px; }
    .sidebar-heading { padding-top: 17px; padding-bottom: 17px; }
    .sidebar-heading h1 { font-size: 22px; margin-top: 9px; }
    .lesson-notes { padding: 12px; margin-bottom: 12px; }
    .lesson-notes p { max-height: 35px; overflow: hidden; }
    .scope-display { height: 113px; }
    .scope-heading { margin-bottom: 9px; }
    .oscilloscope { padding-top: 11px; padding-bottom: 13px; }
    .channel-controls > p { display: none; }
}

/* Locally vendored Phosphor regular icons use filled paths. */
.phosphor { display: inline-block; fill: currentColor; stroke: none; vertical-align: middle; flex-shrink: 0; }
.card-arrow .phosphor { width: 14px; height: 14px; }

/* Both scope views operate the same native instrument settings. */
.scope-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.scope-actions .instrument-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; padding: 7px 9px; white-space: nowrap; }
.instrument-button .phosphor { width: 16px; height: 16px; }
.instrument-button[aria-pressed=true] { background: #f4dfd3; border-color: #d39173; color: var(--orange-dark); }
.channel-strip { display: flex; flex-direction: column; gap: 4px; }
.channel-strip .channel { width: 100%; }
.channel-position { display: flex; align-items: center; justify-content: space-between; gap: 5px; font: 6px var(--mono); letter-spacing: .2px; text-transform: uppercase; color: #838273; white-space: nowrap; }
.channel-position input { min-width: 0; width: 64px; flex: 1; height: 23px; padding: 3px 4px; border: 1px solid #c9c4b5; border-radius: 3px; background: #f7f6ec; color: #555649; font: 9px var(--mono); box-shadow: inset 0 1px 2px #302b1f08; }
.channel-controls > p { display: none; }
.scope-display { height: 170px; }
.instrument-focus { outline: 2px solid var(--orange); outline-offset: 2px; }
.instrument-guide { position: absolute; bottom: 20px; left: 24px; display: flex; align-items: center; gap: 13px; max-width: calc(100% - 48px); padding: 9px 12px; border: 1px solid #c9c6b7; border-radius: 4px; background: #f5f3ecef; pointer-events: none; }
.instrument-guide strong { font: 10px var(--mono); color: #6f604d; }
.instrument-guide span { font-size: 9px; color: #959080; }
.instrument-view .tool-dock, .instrument-view .cursor-readout { display: none; }
@media (min-width: 1700px) { .scope-display { height: 174px; } }
@media (min-width: 761px) and (max-width: 1100px) {
    .scope-heading { display: grid; grid-template-columns: 1fr auto; row-gap: 11px; }
    .scope-name { grid-column: 1; grid-row: 1; }
    .scope-actions { grid-column: 2; grid-row: 1; }
    .scope-settings { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; }
    .scope-settings label { flex: 1; min-width: 0; }
    .scope-settings select { width: 100%; max-width: none; }
}
@media (max-width: 760px) {
    .scope-actions { gap: 5px; }
    .scope-actions .instrument-button { font-size: 9px; padding: 6px 7px; min-height: 29px; }
    .instrument-button .phosphor { width: 14px; height: 14px; }
    #scope-toggle { margin-top: 0; }
    .channel-strip { gap: 3px; }
    .channel-position { gap: 3px; font-size: 5px; letter-spacing: 0; }
    .channel-position input { height: 23px; width: 47px; font-size: 8px; padding: 3px; }
    .scope-display { height: 146px; }
    .instrument-guide { left: 13px; bottom: 14px; max-width: calc(100% - 26px); flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 9px; }
    .instrument-guide strong { font-size: 9px; }
    .instrument-guide span { font-size: 8px; line-height: 1.5; }
}
@media (max-width: 760px) {
    .channel-controls { width: 98px; }
    .channel div { font-size: 6px; }
    .channel-position { font-size: 6px; }
    .channel-position input { height: 26px; font-size: 10px; }
    .scope-display { height: 154px; }
}
@media (max-width: 560px) {
    .scope-actions { grid-column: 2; grid-row: 1; }
    /* Keep measurement text legible without covering a narrow trace. */
    .scope-display { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 184px; }
    #scope { min-height: 0; }
    .scope-legend { position: static; flex-wrap: wrap; gap: 3px 8px; padding: 5px 7px; font-size: 8px; line-height: 1.5; }
    #scope-scale { flex: 1 1 100%; text-wrap: balance; }
    #sim-time { white-space: nowrap; }
}
@media (pointer: coarse) {
    .status-bar { min-height: 44px; }
    .status-bar .text-button { min-height: 44px; min-width: 44px; padding: 0 7px; font-size: 11px; }
    #logic-toggle { min-height: 44px; font-size: 12px; }
}

.pin-readings { white-space: pre-line; font-variant-numeric: tabular-nums; }
.pot-buttons { display: flex; gap: 8px; margin-block: 8px; }
.pot-buttons button { min-width: 44px; min-height: 44px; }
#part-pot > label, #pot-live-form label { display: block; font-size: 12px; margin-block: 8px; }
#pot-position { width: 100%; accent-color: var(--orange); min-height: 44px; }
#pot-live-form { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
#pot-live-form label { flex-basis: 100%; }
#pot-exact { width: 100px; }
#pot-live-form input, #pot-live-form button { min-height: 44px; font-size: 12px; }
#part-pot .micro { font-size: 11px; }
#part-conveyor .micro { font-size: 11px; }

/* Keep the existing editor node and its draft/scroll state. A selected part
   reserves space instead of covering either instrument. :has() gates the
   reservation on the native hidden attribute; no JS layout state is needed. */
@supports selector(:has(*)) {
    @media (min-width: 1280px) {
        main:has(> .bench > .inspector:not([hidden])) { padding-right: 352px; }
        main:has(> .bench > .inspector:not([hidden])) .scope-heading { flex-wrap: wrap; }
    }
    @media (max-width: 1279px) {
        main:has(> .bench > .inspector:not([hidden])) { overflow-y: auto; scrollbar-gutter: stable; }
        .bench:has(> .inspector:not([hidden])) {
            --inspector-space: clamp(260px, 42dvh, 360px);
            --inspection-view-height: clamp(280px, 42dvh, 360px);
            flex: 0 0 auto;
            height: calc(var(--inspection-view-height) + var(--inspector-space));
            padding-bottom: var(--inspector-space);
        }
        .bench:has(> .inspector:not([hidden])) > .inspector {
            position: absolute; z-index: 1; inset: auto 0 0; width: 100%; height: var(--inspector-space); max-height: none;
            border-width: 1px 0 0; border-radius: 0; background: var(--paper); box-shadow: inset 0 1px 0 #fff;
            /* Let wheel/touch scrolling chain to the main scope at the tray's
               edges. No modal, scroll lock, DOM relocation or focus reset. */
            overscroll-behavior-y: auto;
        }
        .bench:has(> .inspector:not([hidden])) > .tool-dock { bottom: calc(var(--inspector-space) + 18px); }
        .bench:has(> .inspector:not([hidden])) > .cursor-readout { bottom: calc(var(--inspector-space) + 86px); }
        .bench:has(> .inspector:not([hidden])) > .instrument-guide { bottom: calc(var(--inspector-space) + 20px); }
    }
    @media (max-width: 760px) {
        .bench:has(> .inspector:not([hidden])) > .tool-dock { bottom: calc(var(--inspector-space) + 12px); }
        .bench:has(> .inspector:not([hidden])) > .cursor-readout { bottom: auto; }
        .bench:has(> .inspector:not([hidden])) > .instrument-guide { bottom: calc(var(--inspector-space) + 14px); }
    }
}

/* Conservative fallback for engines without relational selectors: keep a
   dedicated tray even when hidden, rather than obscure the circuit. Enhanced
   browsers reclaim this space immediately when the inspector closes. */
@supports not selector(:has(*)) {
    main { overflow-y: auto; scrollbar-gutter: stable; }
    .bench { flex: 0 0 auto; height: 640px; padding-bottom: 320px; }
    .inspector { position: absolute; z-index: 1; inset: auto 0 0; width: 100%; height: 320px; max-height: none; border-radius: 0; overscroll-behavior-y: auto; }
    .bench > .tool-dock { bottom: 338px; }
    .bench > .cursor-readout { bottom: 406px; }
    .bench > .instrument-guide { bottom: 340px; }
    @media (max-width: 760px) {
        .bench > .tool-dock { bottom: 332px; }
        .bench > .cursor-readout { bottom: auto; }
        .bench > .instrument-guide { bottom: 334px; }
    }
}

/* Exact430 authoring stays inside the inspector at every reserved tray width. */
#part-cross-switch pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-variant-numeric: tabular-nums; }
#part-memristor pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-variant-numeric: tabular-nums; }
#mem-form button { padding: 7px; border: 1px solid #c8baa4; border-radius: 3px; }
#part-segment-display textarea, #part-segment-decoder textarea, #part-demultiplexer textarea, #part-adder textarea, #part-cross-switch textarea, #part-dac textarea, #part-adc textarea { display: block; box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; border: 1px solid #cec3ad; padding: 7px; margin: 6px 0 9px; color: var(--ink); background: #faf8ee; }
#cross-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#cross-actions button, #cross-form button, #cross-capture-controls button { padding: 7px; border: 1px solid #c8baa4; border-radius: 3px; }
#cross-capture-controls { flex: none; margin: 0; padding: 8px 15px; background: var(--paper); overflow-wrap: anywhere; }

.advance-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--line); }
.advance-controls label { display:flex; align-items:center; gap:8px; font-size:12px; }
.advance-controls input { width:5em; }
.advance-controls [role="status"] { flex:1 1 16em; min-width:0; font-size:12px; overflow-wrap:break-word; }

/* Source-selector forms use the existing workbench controls and tray widths. */
.source-switch-settings {
    flex: none;
    min-width: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.source-switch-settings > summary {
    cursor: pointer;
    font: 600 12px/1.5 var(--display);
    color: var(--ink);
}
.source-switch-settings[open] > summary { margin-bottom: 12px; }
.source-switch-settings > p { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #514a3c; overflow-wrap: anywhere; }
#source-switch-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 10px 12px;
}
#selector-form { display: grid; gap: 10px; margin: 14px 0 10px; }
#selector-form > label, #source-switch-form > label { display: block; min-width: 0; font-size: 12px; line-height: 1.5; color: #514a3c; }
#part-switch2 :is(input, select, textarea), #source-switch-form select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 6px 0 0;
    padding: 7px;
    border: 1px solid #cec3ad;
    border-radius: 3px;
    background: #faf8ee;
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
}
#part-switch2 textarea { min-height: 72px; resize: vertical; font: inherit; }
#part-switch2 textarea:focus-visible, .source-switch-settings > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#part-switch2 pre { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
#part-switch2 button, .source-switch-settings button {
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #c8baa4;
    border-radius: 3px;
    background: #f8f6ef;
    color: #514a3c;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
#part-switch2 button:hover, .source-switch-settings button:hover { border-color: #b7b8ab; background: #e9e7df; }
#source-switch-apply { grid-column: 1 / -1; }
#selector-form > button, #part-switch2 > button { width: 100%; }
#part-switch2 > button { margin-top: 6px; }
#part-switch2 :is(#selector-apply, #selector-stage-commit), #source-switch-apply {
    border-color: #db592e;
    background: var(--orange);
    color: #251f17;
    font-weight: 700;
    box-shadow: inset 0 1px 0 #ffffff30, 0 1px 1px #6b351d18;
}
#part-switch2 :is(#selector-apply, #selector-stage-commit):hover, #source-switch-apply:hover { background: #f77b4d; border-color: #db592e; }
#selector-stock { margin-top: 10px; }
#selector-stage-controls { display: grid; gap: 6px; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
#selector-stage-status { margin: 0 0 4px; overflow-wrap: anywhere; }
#part-switch2 > div:not(#selector-stage-controls) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 144px), 1fr)); gap: 6px; margin: 12px 0; }
#selector-message:empty, #source-switch-message:empty { display: none; }

/* The address form is pointer-accessible; the rest of the socket HUD stays a
   passive overlay. Natural wrapping keeps every control within narrow benches. */
.cursor-readout { right: 24px; max-width: calc(100% - 48px); flex-wrap: wrap; }
.socket-go-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; pointer-events: auto; color: var(--ink); }
.socket-go-form label { font: 10px var(--mono); white-space: nowrap; }
.socket-go-form input { width: 13ch; max-width: 100%; min-width: 0; min-height: 32px; border: 1px solid var(--line); border-radius: 4px; padding: 5px 7px; background: var(--paper); color: var(--ink); font: 11px var(--mono); }
.socket-go-form button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
#socket-go-message { flex-basis: 100%; max-width: 100%; font: 10px/1.4 var(--mono); color: var(--muted); overflow-wrap: break-word; }
#socket-go-message:empty { display: none; }
@media (max-width: 760px) {
    .cursor-readout { right: 15px; max-width: calc(100% - 30px); }
    .socket-go-form { flex-basis: 100%; }
}
.decimation-readout { font-size:12px; line-height:1.5; flex-shrink:0; padding:8px 12px; border-top:1px solid var(--line); }
.decimation-readout p { margin:3px 0; overflow-wrap:break-word; }

#spectrum-canvas { display: block; width: 100%; height: 240px; margin-block: 8px; border-radius: 6px; }
#spectrum-plot-panel label { display: inline-block; margin: 4px 12px 4px 0; }
#spectrum-maximum { width: 110px; }
#spectrum-bin { width: 90px; }

/* Original source rows keep the compact inspector geometry and real labels. */
#part-original-stateful h3, #part-original-voltage h3, #part-dc-source h3, #part-dc-source h4 { font: 600 13px var(--display); margin: 14px 0 8px; }
#original-stateful-rows > label, #original-voltage-rows > label { display: block; margin-top: 8px; }
#part-original-voltage input[type="checkbox"] { display: inline-block; width: 16px; min-height: 16px; margin: 0 7px 0 0; vertical-align: middle; }
#original-voltage-time-specification-row { display: block; margin: 12px 0; }
#part-original-stateful :is(input, select, button):focus-visible, #part-original-voltage :is(input, select, button):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#part-original-stateful button:disabled, #part-original-voltage button:disabled { opacity: .55; cursor: wait; }

/* Frequency responses are explicit; the complete form remains in place. */
.source-confirmation { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-block: 8px; }
.source-confirmation button { display: block; width: 100%; margin-block: 4px; }

#part-original-source-file label { display: block; margin-top: 8px; }
#original-source-file-contents { width: 100%; box-sizing: border-box; font-family: monospace; }
#part-original-source-file :is(input, textarea, button):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.controller-program { padding: 12px; border-top: 1px solid var(--line); }
.controller-program summary { cursor: pointer; }
.controller-program pre { max-height: 18rem; overflow: auto; white-space: pre; font: 12px/1.6 monospace; }
.controller-program h3 { font: 600 13px var(--display); margin-block: 12px 6px; }

.number-format-tool{padding:16px;border-top:1px solid var(--line)}
.number-format-tool form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.number-format-tool label{display:flex;flex-direction:column;gap:4px}
.number-format-tool pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}

#uart-result{max-height:16rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.6 var(--mono)}

#uart-inverted{display:inline-block;width:16px;min-height:16px;padding:0;margin:0 7px 0 0;vertical-align:middle}

/* SPI uses the workbench's quiet instrument typography and literal role names. */
.spi-analyzer { padding: 12px; border-top: 1px solid var(--line); }
.spi-analyzer summary { cursor: pointer; font: 600 13px var(--display); }
.spi-recorders, .spi-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; margin-top: 12px; }
.spi-analyzer label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; line-height: 1.5; }
.spi-analyzer label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; align-self: end; min-height: 44px; }
.spi-analyzer input:not([type="checkbox"]), .spi-analyzer select { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
#spi-decode { min-height: 44px; padding: 8px 16px; margin-top: 12px; }
#controller-i2c-memory-reading { white-space: pre-wrap; overflow-wrap: anywhere; }
#spi-result, #i2c-result { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; font: 12px/1.6 var(--mono); }
.spi-analyzer .micro { max-width: 78ch; line-height: 1.6; }

.memory-edit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; margin-block: 12px; }
.memory-edit-fields label, #memory-edit-form > label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.memory-edit-fields input:not([type="checkbox"]), .memory-edit-fields select { min-height: 44px; min-width: 0; width: 100%; }
#memory-edit-bytes { width: 100%; max-width: 100%; font: 12px/1.6 var(--mono); white-space: pre; overflow: auto; }
#memory-edit-form button, #memory-edit-open { min-height: 44px; }

.component-navigation { margin: 8px 16px; padding: 8px 12px; border: 1px solid #c5bead; border-radius: 5px; }
.component-navigation summary { cursor: pointer; font-size: 12px; }
.component-navigation form { display: grid; gap: 6px; margin-top: 10px; }
.component-navigation label { font-size: 12px; }
.component-navigation input, .component-navigation select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #c5bead; border-radius: 3px; background: #faf8ee; color: var(--ink); font-size: 12px; }
.component-navigation select { min-height: 120px; }
.component-navigation button { justify-self: start; }

#part-thermal input[type="checkbox"] { display: inline-block; width: 16px; min-height: 16px; margin: 0 7px 0 0; vertical-align: middle; }
#part-thermal label[for="thermal-sampling"] { display: block; min-height: 44px; line-height: 1.5; }
#part-thermal button { width: 100%; min-height: 44px; }
#part-thermal input:not([type="checkbox"]) { min-height: 44px; }
#thermal-mosfet-feedback > label, #thermal-bjt-feedback > label { display: flex; align-items: center; min-height: 44px; }
#thermal-mosfet-parameters, #thermal-bjt-parameters { display: grid; gap: 8px; }
#thermal-mosfet-parameters[hidden], #thermal-bjt-parameters[hidden] { display: none; }
#thermal-mosfet-parameters input, #thermal-bjt-parameters input { width: 100%; min-width: 0; }
@media (max-width: 720px) {
    #thermal-mosfet-parameters input, #thermal-bjt-parameters input { font-size: 16px; }
}

#thermal-history button { min-height: 44px; min-width: 44px; margin-top: 0; }
#thermal-history-status { flex: 1 1 18em; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }

#thermal-passive-fields { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid #cec3ad; border-radius: 3px; }
#thermal-passive-fields legend { padding: 0 4px; font-size: 12px; color: #514a3c; }
#part-thermal select { min-height: 44px; }

#analog-switch-reset { width: 100%; min-height: 44px; margin-bottom: 8px; }

#noise-band-settings { display: grid; gap: 8px; margin-block: 8px; min-width: 0; }
#noise-band-settings label { display: grid; gap: 4px; min-width: 0; }
#noise-band-settings :is(input:not([type="checkbox"]), select, button) { box-sizing: border-box; width: 100%; min-height: 44px; min-width: 0; margin: 0; }
#noise-band-settings .noise-floor-declaration { display: flex; align-items: center; gap: 8px; min-height: 44px; }
#noise-band-settings input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; }

#native-noise-settings { display: grid; gap: 8px; margin-block: 8px; min-width: 0; }
#native-noise-settings label { display: grid; gap: 4px; min-width: 0; }
#native-noise-settings :is(input, select, button) { box-sizing: border-box; width: 100%; min-height: 44px; min-width: 0; margin: 0; }
#native-noise-contributions { white-space: pre-line; }

#resistor-corner-parts { display: grid; gap: 8px; margin-block: 8px; }
#resistor-corner-parts label { display: flex; align-items: center; gap: 8px; }
#resistor-corner-parts input { width: auto; flex: 0 0 auto; }
#resistor-corner-statistics, #resistor-corner-values { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
#resistor-corner-form { display: grid; gap: 8px; margin: 12px 0; }
#resistor-corner-form :is(input[type="number"], select) { width: 100%; max-width: 36rem; min-width: 0; }
#resistor-corner-form button { justify-self: start; }
#resistor-corner-parts span { min-width: 0; overflow-wrap: anywhere; }

#static-ram-memory { white-space: pre; overflow-x: auto; font: 11px/1.6 var(--mono); }
#static-ram-status { white-space: pre-line; }

#rom-image { white-space: pre; overflow-x: auto; font: 11px/1.6 var(--mono); }
#rom-status { white-space: pre-line; }

#resistor-rating-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
#resistor-rating-form label { display: grid; gap: 4px; min-width: 0; }
#resistor-rating-form input { width: 100%; box-sizing: border-box; }
#resistor-rating-form button { grid-column: 1 / -1; justify-self: start; }
#resistor-rating-data { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
@media (max-width: 600px) { #resistor-rating-form { grid-template-columns: minmax(0, 1fr); } }

#controller-debug-trap-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
#controller-debug-trap-form label { display: grid; gap: 4px; min-width: 0; }
#controller-debug-trap-form label:first-child { display: flex; align-items: center; grid-column: 1 / -1; }
#controller-debug-trap-form select, #controller-debug-trap-form input[type="text"] { width: 100%; box-sizing: border-box; }
#controller-debug-trap-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 600px) { #controller-debug-trap-form { grid-template-columns: minmax(0, 1fr); } }
#controller-debug-reading { white-space: pre-wrap; overflow-wrap: anywhere; }

#boolean-form { display: grid; gap: 8px; margin: 12px 0; }
#boolean-form label { display: grid; gap: 4px; }
#boolean-form input { width: 100%; box-sizing: border-box; font-family: var(--mono); }
#boolean-form button { justify-self: start; }
#boolean-table, #boolean-data { max-height: 320px; overflow: auto; font: 12px/1.6 var(--mono); }
#boolean-data { white-space: pre-wrap; overflow-wrap: anywhere; }

#timing-panel > summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
#timing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
#timing-form label { display: grid; gap: 4px; min-width: 0; }
#timing-panel :is(input, select, button) { min-height: 44px; max-width: 100%; padding: 8px 12px; }
#timing-form :is(input, select) { width: 100%; min-width: 0; box-sizing: border-box; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#timing-form button { grid-column: 1 / -1; justify-self: start; }
#timing-panel :is(input, select, button):focus-visible, #timing-panel > summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
#timing-table, #timing-data, #clock-phase-result { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); }
@media (max-width: 600px) {
    #timing-form { grid-template-columns: minmax(0, 1fr); }
    #timing-form :is(input, select) { font-size: 16px; }
}

#timing-reference-control { display: grid; gap: 4px; margin: 12px 0; }
#timing-reference { width: 100%; box-sizing: border-box; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
@media (max-width: 600px) { #timing-reference { font-size: 16px; } }

/* Keep pulse quantities and their full endpoint/owner metadata inside the panel. */
#pulse-counter-history { white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#measurement-panel pre, #window-meter-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; font-family: var(--mono); }
#measurement-panel label { display: grid; gap: 4px; margin: 8px 0; }
#measurement-panel input { width: 100%; box-sizing: border-box; }
#measurement-panel button { min-height: 44px; margin: 4px 4px 4px 0; }

#converter-budget-form { display: grid; gap: 12px; margin: 12px 0; }
#converter-budget-form fieldset { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 8px; min-width: 0; border: 1px solid var(--line); }
#converter-budget-form label { display: grid; gap: 4px; min-width: 0; }
#converter-budget-form input, #converter-budget-form select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; }
#converter-budget-form button { justify-self: start; min-height: 44px; }
#converter-budget-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font-family: var(--mono); }

#precision-uncertainty-panel > summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
#precision-uncertainty-panel p { max-width: 78ch; }
.precision-uncertainty-presets { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 12px 0; }
#precision-uncertainty-panel label { display: grid; gap: 4px; min-width: 0; }
#precision-uncertainty-panel :is(input, select, button, textarea) { min-height: 44px; max-width: 100%; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); }
#precision-uncertainty-panel :is(select, textarea) { width: 100%; min-width: 0; }
#precision-uncertainty-panel :is(select, button, textarea):focus-visible, #precision-uncertainty-panel summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
#precision-uncertainty-declaration { min-height: 24rem; resize: vertical; font: 12px/1.5 var(--mono); tab-size: 2; }
#precision-uncertainty-form > button { margin: 12px 0; }
#precision-uncertainty-panel h4 { margin: 16px 0 6px; font-family: var(--display); }
#precision-uncertainty-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); }
#precision-uncertainty-data { max-height: 28rem; overflow: auto; }
#precision-uncertainty-status { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 600px) {
    #precision-uncertainty-panel :is(select, textarea) { font-size: 16px; }
    .precision-uncertainty-presets { align-items: stretch; flex-direction: column; }
}

.aperture-clock-links { display: flex; flex-wrap: wrap; gap: 8px; }
.aperture-clock-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* Explicit static converter tables keep long rows in their own scroll area. */
#dac-linearity-result { max-height: 32rem; overflow: auto; }
#dac-linearity-table { width: 100%; min-height: 12rem; font-family: monospace; box-sizing: border-box; }
.dac-linearity-import { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }

#dac-linearity-form { display: grid; gap: 12px; margin: 16px 0; }
#dac-linearity-form label, .dac-linearity-import label { display: grid; gap: 4px; min-width: 0; }
.dac-linearity-import { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); }
#dac-linearity-panel :is(input, select, textarea, button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
#dac-linearity-panel :is(input, select) { width: 100%; min-width: 0; }
#dac-linearity-panel button { justify-self: start; cursor: pointer; }
#dac-linearity-panel button:disabled { opacity: .55; cursor: default; }
#dac-linearity-panel :is(input, select, textarea, button, pre):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
#dac-linearity-summary { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); }

#record-tone-form { display: grid; gap: 12px; margin: 16px 0; }
#record-tone-form label { display: grid; gap: 4px; min-width: 0; }
#record-tone-panel :is(input, select, button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
#record-tone-panel :is(input, select) { width: 100%; min-width: 0; }
#record-tone-panel button { margin: 4px 4px 4px 0; cursor: pointer; }
#record-tone-panel button:disabled { opacity: .55; cursor: default; }
#record-tone-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); }
#record-tone-panel :is(input,select,button,pre):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

#sinc3-history, #clocked-words-history { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; font-family: var(--mono); }
#sinc3-export, #clocked-words-export { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); }
#sinc3-panel :is(button,pre):focus-visible, #clocked-words-panel :is(button,pre):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

#bit-period-form { display: grid; gap: 12px; margin: 16px 0; }
#bit-period-form label { display: grid; gap: 4px; min-width: 0; }
#bit-period-panel :is(input, button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
#bit-period-panel input { width: 100%; min-width: 0; box-sizing: border-box; }
#bit-period-panel button { justify-self: start; cursor: pointer; }
#bit-period-panel button:disabled { opacity: .55; cursor: default; }
#bit-period-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; font-family: var(--mono); }
#bit-period-panel :is(input,button,pre):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

#lfsr-builder-form { display: grid; gap: 12px; margin: 16px 0; }
#lfsr-builder-form label { display: grid; gap: 4px; min-width: 0; }
#lfsr-builder-panel :is(input,button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
#lfsr-builder-panel input { width: 100%; min-width: 0; box-sizing: border-box; }
#lfsr-builder-panel button { justify-self: start; cursor: pointer; }
#lfsr-builder-panel button:disabled { opacity: .55; cursor: default; }
#lfsr-builder-panel :is(input,button):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

#signal-band-form { display: grid; gap: 12px; margin: 16px 0; }
#signal-band-form label { display: grid; gap: 4px; min-width: 0; }
#signal-band-panel :is(input,select,button) { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
#signal-band-panel :is(input,select) { width: 100%; min-width: 0; box-sizing: border-box; }
#signal-band-panel button { justify-self: start; cursor: pointer; }
#signal-band-panel button:disabled { opacity: .55; cursor: default; }
#signal-band-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); }
#signal-band-panel :is(input,select,button,pre):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* Selected-package reference labels are text, not stroked icon paths. */
#sot23-diagram text { fill: currentColor; stroke: none; }

/* The label carries the touch target; the native checkbox retains compact proportions. */
#native-noise-settings .declared-noise-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
#native-noise-settings #native-noise-pair-enabled { flex: 0 0 20px; width: 20px; min-height: 20px; height: 20px; accent-color: var(--orange); }

#logic-mapper-source { display: block; width: 100%; min-height: 7rem; resize: vertical; padding: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--mono); }
#logic-mapper-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 8px; }
#logic-mapper-form > :is(label, textarea, p) { grid-column: 1 / -1; }
#logic-mapper-form button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 13px; cursor: pointer; }
#logic-mapper-form button:disabled { opacity: 0.6; cursor: default; }
#logic-mapper-form #logic-mapper-generate { background: var(--orange); border-color: var(--orange-dark); font-weight: 650; }
@media (max-width: 700px) { #logic-mapper-form { grid-template-columns: minmax(0, 1fr); } }
#fabric-timing-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem); gap: 8px 12px; align-items: center; margin-block: 8px; }
#fabric-timing-form :is(input, select, button) { min-height: 44px; width: 100%; }
#fabric-timing-form button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); cursor: pointer; }
#fabric-timing-reading { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); }
@media (max-width: 700px) { #fabric-timing-form { grid-template-columns: minmax(0, 1fr); } }

/* Chapter and subsection identifiers follow the original curriculum order. */
.curriculum-overview, .curriculum-empty, .curriculum-results { font-size: 11px; line-height: 1.6; margin: 12px 10px; color: var(--curriculum-muted); }
.curriculum-chapter { border-bottom: 1px solid var(--line); }
.curriculum-chapter > summary, .curriculum-section > summary { display: flex; align-items: baseline; gap: 8px; padding: 12px 8px; min-height: 44px; cursor: pointer; font-size: 12px; line-height: 1.45; list-style: none; }
.curriculum-chapter > summary::before, .curriculum-section > summary::before { content: '+'; flex: 0 0 9px; color: var(--curriculum-muted); }
.curriculum-chapter[open] > summary::before, .curriculum-section[open] > summary::before { content: '−'; }
.curriculum-chapter > summary { font-weight: 650; }
.curriculum-chapter > summary small { margin-left: auto; color: var(--curriculum-muted); font-weight: 400; }
.curriculum-number { font: 11px var(--mono); color: var(--curriculum-muted); flex-shrink: 0; }
.curriculum-section { margin-left: 8px; }
.curriculum-section > summary { font-weight: 500; padding-top: 9px; padding-bottom: 9px; }
.curriculum-status { display: block; margin-top: 3px; font-size: 10px; color: var(--curriculum-muted); font-weight: 400; }
.curriculum-status[data-coverage=implemented] { color: #326147; }
.curriculum-objective, .curriculum-unavailable { margin: 0 10px 9px 22px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.curriculum-unavailable { color: var(--curriculum-muted); }
.curriculum-lessons { margin: 0 0 10px 22px; border-left: 2px solid var(--line); }
.curriculum-lesson { display: block; width: 100%; min-height: 44px; padding: 10px; text-align: left; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.curriculum-lesson:hover { background: #eae8df; }
.curriculum-lesson[aria-current=true] { color: var(--orange-dark); box-shadow: inset 2px 0 var(--orange); font-weight: 650; }
:is(.curriculum-chapter,.curriculum-section) > summary:focus-visible, .curriculum-lesson:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: -2px; }

/* Give the course map the library's height; other tabs restore design controls. */
#sidebar[data-library-mode=curriculum] > :is(.sidebar-heading, .lesson-notes) { display: none; }