:root {
  color-scheme: dark;
  --bg: #081522;
  --panel: #122336;
  --panel-raised: #182e43;
  --line: #2e465a;
  --text: #edf5f5;
  --muted: #a4b7c2;
  --teal: #73e0d2;
  --amber: #ffbd6f;
  --violet: #bca5f3;
  --green: #7fe0ab;
  --red: #f6a1a1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -8%, #174250 0, transparent 31%),
    radial-gradient(circle at 95% 6%, #27344f 0, transparent 28%),
    var(--bg);
  min-height: 100vh;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #b4f4e9; }
sub { font-size: .72em; }
[hidden] { display: none !important; }

.shell { max-width: 1530px; margin: 0 auto; padding: 38px 40px 30px; }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin: 0 0 30px; }
.eyebrow, .section-kicker {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.15rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; }
.byline { color: var(--teal); font-size: .87rem; margin: 9px 0 0; }
.byline strong { color: var(--text); }
.intro { color: var(--muted); max-width: 765px; margin: 10px 0 0; line-height: 1.55; font-size: 1.02rem; }
.masthead-nav { margin-top: 14px; font-size: .9rem; font-weight: 700; }
.model-badge {
  flex: none;
  margin-top: 9px;
  padding: 10px 13px;
  border: 1px solid #3a6570;
  border-radius: 999px;
  color: #c8eee8;
  background: #17333e;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }

.layout { display: grid; gap: 20px; min-width: 0; }
.visual-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; min-width: 0; }
.scope-column { display: grid; gap: 12px; align-content: start; min-width: 0; }
.scope-tools { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px; min-width: 0; }
.scope-tools .control-group { min-width: 0; }
.panel { background: linear-gradient(145deg, #14263a, #112235); border: 1px solid var(--line); border-radius: 19px; box-shadow: 0 18px 38px #020b1738; }
.circuit-panel, .plot-panel { min-width: 0; padding: 21px 22px 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.panel-heading h2 { font-size: 1.37rem; line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.panel-description { color: var(--muted); font-size: .9rem; margin: 7px 0 0; line-height: 1.45; }
.status-pill { flex: none; border-radius: 999px; padding: 8px 12px; font-size: .75rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.status-pill.off { color: #c6d3de; background: #283d50; border: 1px solid #3b586e; }
.status-pill.on { color: #9af2c0; background: #174536; border: 1px solid #317b59; }
.status-pill.boundary { color: #ffe0a8; background: #594027; border: 1px solid #94714a; }

.schematic-frame {
  margin-top: 16px;
  border: 1px solid #2b485c;
  border-radius: 15px;
  background: radial-gradient(circle at 51% 18%, #1b394d, #0d1d2e 75%);
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-color: #5c7b8b #122536;
}
.schematic-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(#4a677a 1px, transparent 1px);
  background-size: 21px 21px;
}
#schematic { position: relative; display: block; width: 100%; height: auto; }
#schematic .art-probe-ring { fill: none; stroke: var(--amber); stroke-width: 2.5; filter: drop-shadow(0 0 3px #ffbd6f99); }
#schematic .art-node { fill: var(--amber); stroke: #132536; stroke-width: 1; }
#schematic .art-node-label { fill: var(--amber); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; }
#schematic .art-output-leader { fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; }
#schematic .art-output-label { fill: var(--amber); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; }
#schematic .art-flow { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 5 8; filter: drop-shadow(0 0 3px #7fe0abcc); }
#schematic .art-flow-dot { fill: #e4ffd5; stroke: #238563; stroke-width: .8; filter: drop-shadow(0 0 5px #b9ffd3); }
#schematic .art-current-arrow { fill: var(--green); font-size: 14px; font-weight: 900; filter: drop-shadow(0 0 3px #7fe0ab99); }
#schematic .art-blocked-path { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 5 8; filter: drop-shadow(0 0 3px #f6a1a1aa); }
#schematic .art-blocked-dot { fill: var(--red); stroke: #843e4a; stroke-width: .8; filter: drop-shadow(0 0 5px #f6a1a1aa); }
#schematic .art-blocked-stop { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px #f6a1a1aa); }
.flow-description { min-height: 1.4em; color: #b7d2d3; font-size: .88rem; line-height: 1.45; margin: 12px 2px 1px; }
.flow-tip { color: var(--muted); font-size: .77rem; line-height: 1.4; margin: 0 2px 13px; }
.mobile-hint { display: none; }

.node-voltages { border-top: 1px solid var(--line); padding-top: 13px; }
.node-voltages h3 { margin: 0; font-size: 1rem; }
.node-voltages > p { color: var(--muted); font-size: .76rem; line-height: 1.4; margin: 5px 0 11px; }
.readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.readout { min-width: 0; padding: 12px 13px; border: 1px solid #355064; border-radius: 11px; background: #192d40; }
.readout.emphasis { border-color: #9b693f; background: #3b302c; }
.readout span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }
.readout strong { display: block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.13rem; font-weight: 700; white-space: nowrap; }
.readout.emphasis strong { color: var(--amber); }
.readout small { display: block; color: var(--amber); font-size: .68rem; font-weight: 800; letter-spacing: .05em; margin-top: 5px; text-transform: uppercase; }
.circuit-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }

.plot-heading { align-items: center; }
.plot-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.plot-legend button { min-height: 40px; padding: 7px 11px; border: 1px solid currentColor; border-radius: 999px; background: #10263b; font-size: inherit; font-weight: 750; }
.plot-legend button::before { display: inline-block; content: ""; width: 17px; height: 3px; margin: 0 6px 3px 0; border-radius: 3px; background: currentColor; }
.plot-legend button:hover { background: #254156; }
.plot-legend button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.plot-legend .input-key { color: var(--teal); }
.plot-legend .output-key { color: var(--amber); }
.plot-legend .current-key { color: var(--green); }
.plot-legend .threshold-key { color: var(--violet); }
.plot-legend .threshold-key::before { height: 2px; border-top: 2px dashed; background: transparent; }
.trace-status { color: var(--muted); font-size: .81rem; margin: 9px 1px 0; }
.plot-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-color: #5c7b8b #122536; }
#waveform { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 12px; background: #0c1c2b; border: 1px solid #284357; cursor: crosshair; }
#waveform .grid-line { stroke: #324d61; stroke-width: 1; }
#waveform .zero-line { stroke: #6e8493; stroke-width: 1.3; stroke-dasharray: 4 5; }
#waveform .axis-label, #waveform .current-axis-label { fill: #aabdc8; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#waveform .axis-title, #waveform .current-axis-title { fill: #aabdc8; font-size: 15px; font-weight: 700; }
#waveform .current-axis-label, #waveform .current-axis-title { fill: var(--green); }
#waveform .input-trace { fill: none; stroke: var(--teal); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#waveform .output-trace { fill: none; stroke: var(--amber); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
#waveform .current-trace { fill: none; stroke: var(--green); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
#waveform .threshold-line { stroke: var(--violet); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .9; }
#waveform .cursor { stroke: #f2f6f6; stroke-width: 1.5; stroke-dasharray: 4 5; }
#waveform .cursor-grab { fill: transparent; cursor: ew-resize; touch-action: none; }
#waveform .cursor-grip { fill: #f2f6f6; stroke: #0c1c2b; stroke-width: 2; cursor: ew-resize; touch-action: none; }
#waveform .input-dot { fill: var(--teal); stroke: #0d1e2d; stroke-width: 2.5; }
#waveform .output-dot { fill: var(--amber); stroke: #0d1e2d; stroke-width: 2.5; }
#waveform .current-dot { fill: var(--green); stroke: #0d1e2d; stroke-width: 2.5; }
#waveform .threshold-label { fill: var(--violet); font-size: 11px; font-weight: 700; }
.plot-note { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 12px 1px 0; }

.controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 21px 22px 22px; min-width: 0; }
.controls .panel-heading, .controls .validation { grid-column: 1 / -1; }
.controls .panel-heading { margin-bottom: 1px; }
.control-group { padding: 15px 13px 17px; margin: 0; border: 1px solid #32495d; border-radius: 12px; background: #102237; min-width: 0; }
.control-components { grid-row: auto; }
.control-group legend { float: left; width: 100%; padding: 0; margin: 0 0 11px; color: #dae8e9; font-size: .81rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.control-group legend + * { clear: both; }
.segmented { display: grid; padding: 4px; gap: 4px; border-radius: 11px; background: #0a1b2b; border: 1px solid #334a5c; }
.segmented.two { grid-template-columns: 1fr 1fr; }
.segmented.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented button { min-height: 39px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #b4c5cf; font-size: .84rem; font-weight: 700; }
.segmented button:hover { color: white; background: #243a4d; }
.segmented button[aria-pressed="true"] { color: #0b2530; background: var(--teal); box-shadow: 0 2px 10px #0005; }
.segmented button strong { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #294c53; color: #d4fff7; margin-right: 3px; }
.segmented button[aria-pressed="true"] strong { background: #0e5555; }
.control-hint { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 9px 2px 0; }
.number-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #d3e2e7; font-size: .86rem; margin: 11px 0 0; }
.input-unit { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 115px; color: var(--muted); white-space: nowrap; }
.number-field input { width: 72px; height: 36px; padding: 5px 7px; text-align: right; border: 1px solid #436075; border-radius: 7px; background: #0c1c2b; color: white; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.number-field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.field-range { display: block; margin: 4px 1px 0; color: var(--muted); font-size: .72rem; }
.field-error { display: block; margin: 5px 1px 0; color: #ffb9b9; font-size: .75rem; line-height: 1.35; }
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 15px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; width: 35px; height: 21px; border-radius: 20px; background: #536879; border: 1px solid #758c99; position: relative; transition: background .18s ease; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: white; transition: transform .18s ease; }
.switch-row input:checked + .switch-track { background: #209e91; border-color: #41c8b8; }
.switch-row input:checked + .switch-track::after { transform: translateX(14px); }
.switch-row input:focus-visible + .switch-track { outline: 3px solid var(--teal); outline-offset: 3px; }
.switch-row strong { display: block; color: #e0edee; font-size: .84rem; }
.switch-row small { display: block; color: var(--muted); font-size: .73rem; margin-top: 2px; }
.phase-row { display: flex; justify-content: space-between; color: #d5e4e8; font-size: .84rem; }
.phase-row output { color: var(--amber); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.phase-slider { display: block; width: 100%; margin: 16px 0 20px; accent-color: var(--amber); cursor: pointer; }
.transport { display: flex; gap: 8px; }
.transport button { flex: 1; height: 39px; border-radius: 9px; border: 1px solid #436275; background: #1d384c; color: #edf6f6; font-weight: 750; }
.transport button:hover { background: #315168; }
.transport #play { background: var(--amber); border-color: #ffca85; color: #302116; }
.transport #play:hover { background: #ffd09a; }
.speed-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; color: #d5e4e8; font-size: .84rem; }
.speed-row select { min-width: 90px; padding: 7px 9px; border: 1px solid #436075; border-radius: 7px; background: #0c1c2b; color: white; }
.validation { color: #ffb9b9; background: #542a37; border: 1px solid #a75d68; border-radius: 8px; padding: 10px; font-size: .8rem; line-height: 1.4; }
.concept-note, .application-note { max-width: 1000px; margin: 32px 0 0; padding: 24px 2px 0; border-top: 1px solid var(--line); }
.concept-note h2, .application-note h2 { margin: 0 0 10px; font-size: 1.18rem; letter-spacing: -.02em; }
.concept-note p, .application-note p { margin: 0; max-width: 82ch; color: #cbdbe2; font-size: .94rem; line-height: 1.65; }
.application-note .application-source { margin-top: 12px; color: var(--muted); font-size: .82rem; }
.footer { display: flex; justify-content: space-between; gap: 24px; padding: 25px 2px 0; color: #90a7b5; font-size: .79rem; line-height: 1.5; }
.footer p { margin: 0; max-width: 780px; }

@media (max-width: 1100px) {
  .visual-row { grid-template-columns: minmax(0, 1fr); }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plot-heading { display: block; }
  .plot-legend { justify-content: flex-start; max-width: none; margin-top: 12px; }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .shell { padding: 23px 18px; }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { flex-direction: column; }
  .circuit-panel, .plot-panel { padding: 17px 15px; }
  .plot-heading { display: block; }
  .plot-legend { justify-content: flex-start; max-width: none; margin-top: 12px; }
  #waveform { width: 100%; }
  #waveform .axis-label, #waveform .axis-title, #waveform .current-axis-label, #waveform .current-axis-title { font-size: 17px; }
  #waveform .threshold-label { font-size: 15px; }
}
@media (max-width: 700px) {
  .visual-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .masthead { display: block; }
  .model-badge { display: inline-block; margin-top: 17px; }
  .controls { grid-template-columns: minmax(0, 1fr); padding: 19px 15px; }
  .scope-tools { grid-template-columns: minmax(0, 1fr); }
  .control-components { grid-row: auto; }
  .circuit-panel, .plot-panel { padding: 19px 15px; }
  .panel-heading { gap: 10px; }
  .panel-heading h2 { font-size: 1.17rem; }
  .status-pill { font-size: .64rem; padding: 7px; }
  .readout { padding: 10px; }
  .readout strong { font-size: .96rem; }
  .plot-heading { display: block; }
  .plot-legend { justify-content: flex-start; max-width: none; margin-top: 15px; }
  .schematic-frame, .plot-scroll { max-width: 100%; }
  #schematic { width: 480px; max-width: none; height: auto; min-height: 0; }
  #waveform { width: 680px; max-width: none; }
  .mobile-hint { display: block; margin: 8px 1px 0; color: var(--muted); font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #schematic .art-flow { animation: none; }
  #schematic .art-flow-dot { display: none; }
  #schematic .art-blocked-path { animation: none; }
  #schematic .art-blocked-dot { display: none; }
  .switch-track, .switch-track::after { transition: none; }
}