:root {
  color-scheme: light;
  --ink: #172345;
  --muted: #51617a;
  --subtle: #eef2f8;
  --line: #dce4f0;
  --paper: #fff;
  --ground: #f6f8fc;
  --blue: #234dc8;
  --blue-dark: #183aab;
  --blue-pale: #e9efff;
  --green: #08634d;
  --green-pale: #e4f6ee;
  --red: #a92335;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--ground);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue-dark); }
code { font-family: var(--mono); font-size: .94em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #315ce0; outline-offset: 3px; }
section[id] { scroll-margin-top: 20px; }
.shell { width: min(1180px, calc(100% - 72px)); margin-inline: auto; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: absolute; z-index: 5; top: 8px; left: 8px; padding: 12px; background: white; }
.symbols { position: absolute; width: 0; height: 0; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.header { background: white; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand-icon { display: grid; place-items: center; width: 33px; height: 33px; background: var(--blue); color: white; border-radius: 8px; }
.brand-icon .icon { width: 18px; height: 18px; }
nav { display: flex; align-items: center; gap: 7px; }
nav a { color: var(--muted); font-size: .9rem; font-weight: 650; padding: 7px 12px; border-radius: 7px; text-decoration: none; }
nav a:hover, nav a[aria-current] { background: var(--blue-pale); color: var(--blue-dark); }
.course { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.course span { margin-inline: 4px; color: var(--blue); }

.hero { background: #fcfdff; border-bottom: 1px solid var(--line); }
.hero-inner { display: grid; grid-template-columns: 1.16fr 1fr; align-items: center; gap: clamp(28px, 6vw, 90px); min-height: 326px; padding-block: 40px 30px; }
.eyebrow { display: flex; gap: 8px; align-items: center; margin-bottom: 13px; color: var(--blue-dark); letter-spacing: .11em; text-transform: uppercase; font: 700 .76rem/1.4 var(--mono); }
.eyebrow span, .model-label span { width: 7px; height: 7px; border-radius: 50%; background: #416bdf; }
h1 { font-size: clamp(2.25rem, 4.1vw, 3.85rem); line-height: 1.01; font-weight: 770; letter-spacing: -.057em; }
h1 em { display: block; font-style: normal; color: var(--blue); }
.hero-summary { max-width: 47ch; margin-block: 17px 23px; color: var(--muted); font-size: clamp(.98rem, 1.25vw, 1.09rem); }
.button { display: inline-flex; min-height: 42px; justify-content: center; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid transparent; border-radius: 7px; line-height: 1.25; font-weight: 700; font-size: .87rem; text-decoration: none; text-align: center; }
.button .icon { width: 17px; height: 17px; }
.primary { color: #fff; background: var(--blue); box-shadow: 0 2px 3px #183aab22; }
.primary:hover { background: var(--blue-dark); }
.secondary { color: var(--ink); background: white; border-color: #cfd8e8; }
.secondary:hover { background: var(--subtle); }
.button[aria-disabled="true"] { cursor: default; background: #e5eaf3; color: #4b5871; box-shadow: none; }
.hero .button { padding-inline: 16px; }
.hero-diagram { min-width: 0; padding: 20px 21px 23px; border: 1px solid #d5e0fb; border-radius: 13px; background-color: #edf3ff; }
.hero-diagram, .drawing { background-image: radial-gradient(#bacbeb 1px, transparent 1px); background-size: 16px 16px; }
.blueprint-label { display: flex; align-items: center; gap: 8px; text-transform: uppercase; font: 700 .71rem/1.35 var(--mono); letter-spacing: .07em; color: #3b5284; margin-bottom: 14px; }
.blueprint-label .icon { width: 16px; height: 16px; }
.blueprint-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(25px, .62fr) minmax(0, 1fr); grid-template-rows: 69px 69px; row-gap: 16px; align-items: stretch; }
.route, .route-goal { background: #fff; border: 1px solid #d5e0f5; border-radius: 8px; }
.route { display: flex; align-items: center; padding: 9px; gap: 9px; }
.route-analog { grid-area: 1 / 1; }
.route-digital { grid-area: 2 / 1; }
.route-icon, .result-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 6px; background: var(--blue-pale); color: var(--blue); flex-shrink: 0; }
.route-digital .route-icon { color: #6953ad; background: #f0ebff; }
.route strong { display: block; font-size: .97rem; }
.route small, .route-goal small { display: block; font-size: .68rem; color: var(--muted); }
.route-digital small { font-family: var(--mono); }
.route-lines { grid-area: 1 / 2 / span 2; align-self: stretch; width: 100%; height: 100%; fill: #5376d6; stroke: #7794d7; stroke-width: 2; }
.route-lines path { fill: none; vector-effect: non-scaling-stroke; }
.route-goal { grid-area: 1 / 3 / span 2; align-self: center; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 120px; text-align: center; padding: 8px; }
.goal-led { display: grid; place-items: center; background: var(--green-pale); color: var(--green); border-radius: 50%; width: 37px; height: 37px; }
.goal-led svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; width: 25px; height: 25px; }
.route-goal strong { font: 700 1.35rem/1.35 var(--mono); white-space: nowrap; }
.route-goal strong span { font-size: .86rem; }

.section { padding-block: 38px 46px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 17px; }
h2 { font-size: clamp(1.65rem, 3vw, 2.23rem); line-height: 1.15; letter-spacing: -.042em; }
.section-head p { color: var(--muted); margin-top: 5px; }
.model-label { display: inline-flex; align-items: center; gap: 7px; color: #334b80; background: var(--blue-pale); border: 1px solid #dbe5ff; border-radius: 20px; font-size: .76rem; font-weight: 700; white-space: nowrap; padding: 5px 10px; }
.model-label span { width: 6px; height: 6px; }
.notice { padding: 10px; background: #fff3e1; color: #703e09; }
.tabs { display: flex; padding: 5px; border: 1px solid #dfe7f3; border-radius: 9px; background: #edf1f8; gap: 5px; margin-bottom: 15px; }
.tabs button { flex: 1; border: 1px solid transparent; display: flex; gap: 11px; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px; text-align: left; border-radius: 6px; background: transparent; color: var(--muted); }
.tabs button:hover { background: #f5f7fd; }
.tabs button[aria-selected="true"] { color: var(--blue-dark); border-color: #d9e3fb; background: white; box-shadow: inset 0 -2px var(--blue), 0 1px 3px #1429560d; }
.tabs strong, .tabs small { display: block; }
.tabs strong { font-size: .91rem; line-height: 1.25; }
.tabs small { font-size: .72rem; line-height: 1.3; }
.bench { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: 11px; background: white; min-width: 0; box-shadow: 0 2px 5px #1a336708; }
.card-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 17px 13px; border-bottom: 1px solid #e7edf6; }
h3 { font-size: 1.06rem; line-height: 1.3; letter-spacing: -.015em; }
.card-head p { color: var(--muted); margin-top: 3px; font-size: .81rem; }
.state { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: .74rem; font-weight: 740; border-radius: 18px; padding: 4px 9px; color: #425674; background: #edf2fa; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6d819e; }
.circuit[data-active="true"] .state { background: var(--green-pale); color: var(--green); }
.circuit[data-active="true"] .state::before { background: #098460; }
.drawing { overflow-x: auto; margin: 12px; border: 1px solid #e1e9f6; border-radius: 8px; background-color: #f9fbff; }
.schematic { display: block; width: 100%; min-width: 540px; height: auto; color: #3a5675; }
.schematic .wires, .schematic .part { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schematic .chip { fill: #e8effe; stroke: #6e8ac5; }
.schematic .chip-notch, .schematic .contact { stroke: #6e8ac5; }
.schematic .contact, .schematic .module { fill: #f7faff; }
.schematic .module, .schematic .antenna { stroke: #7d98c7; }
.schematic .supply { stroke: #7151a0; }
.schematic .nodes { fill: currentColor; }
.schematic .labels { fill: #365171; font: 600 13.5px var(--mono); }
.schematic .pin { font-size: 12.5px; }
.schematic .chip-name { fill: #1c409d; font: 800 24px Inter, "Segoe UI", system-ui, sans-serif; }
.schematic .signal { fill: #234aa4; font-weight: 700; }
.schematic .led-fill { fill: #dde6f5; stroke: #3a5675; }
.schematic .trigger-closed { display: none; stroke: var(--blue); }
.circuit[data-trigger="true"] .trigger-closed { display: initial; }
.circuit[data-trigger="true"] .trigger-open { display: none; }
.circuit[data-active="true"] .led-fill, .extra[data-active="true"] .led-fill { fill: #48e7a3; stroke: #087450; filter: drop-shadow(0 0 4px #2de59d); }
.circuit[data-active="true"] .led-wire, .extra[data-active="true"] .led-wire { stroke: #087450; }
.circuit[data-active="true"] .timing-wire, .circuit[data-active="true"] .timing-part { stroke: var(--blue); }
.pan-hint { display: none; margin: -4px 13px 10px; color: var(--muted); font-size: .74rem; }
.circuit-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 12px 12px; padding: 10px 11px; border-radius: 7px; background: #eef3ff; color: #324875; font-size: .82rem; }
.circuit-note .icon { width: 15px; height: 15px; margin-top: 2px; }
.voltage { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.voltage strong { color: var(--ink); font-family: var(--mono); }
.voltage span { margin-inline: 3px; }

.control-body { display: grid; gap: 11px; padding: 13px 16px 15px; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-row label { font-weight: 670; font-size: .89rem; }
.field-row label span { margin-left: 2px; color: var(--blue-dark); font-family: var(--mono); }
select { width: 44%; min-height: 36px; padding: 4px 8px; border: 1px solid #cbd6e8; border-radius: 6px; color: var(--ink); background: #f9fbff; }
select:disabled { opacity: .78; }
.formula { display: flex; justify-content: space-between; gap: 6px 12px; align-items: center; flex-wrap: wrap; border-radius: 6px; background: #edf2ff; padding: 8px 9px; color: var(--blue-dark); }
.formula span { font: 700 .86rem/1.3 var(--mono); }
.formula small { color: #465a84; font-size: .72rem; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metrics > div { border: 1px solid #e3e9f4; background: #f8faff; border-radius: 6px; padding: 8px 9px; }
.metrics span { display: block; color: var(--muted); font-size: .74rem; }
.metrics strong { display: block; font: 750 clamp(1rem, 2vw, 1.27rem)/1.5 var(--mono); }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.esp-actions { grid-template-columns: 1fr; }
.meter > div { display: flex; justify-content: space-between; gap: 8px; font-size: .79rem; }
.meter strong { font-family: var(--mono); }
.meter-led { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: .76rem; color: var(--muted); }
.meter-led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8292a8; }
.meter-led .led-on, .bench:has(.circuit[data-active="true"]) .meter-led .led-off { display: none; }
.bench:has(.circuit[data-active="true"]) .meter-led .led-on { display: inline; color: var(--green); font-weight: 700; }
.bench:has(.circuit[data-active="true"]) .meter-led::before { background: #098460; }
progress { display: block; appearance: none; margin-top: 6px; height: 7px; width: 100%; border: 0; border-radius: 10px; overflow: hidden; background: #e6edf9; color: var(--blue); }
progress::-webkit-progress-bar { background: #e6edf9; }
progress::-webkit-progress-value { background: var(--blue); border-radius: 10px; }
progress::-moz-progress-bar { background: var(--blue); border-radius: 10px; }
.support { color: var(--muted); font-size: .78rem; }
.editor { border: 1px solid #253856; border-radius: 7px; background: #16223b; color: #eff3fa; overflow: hidden; }
.editor-head { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; background: #213252; color: #dde8ff; font-size: .72rem; }
.editor-code { max-height: 218px; overflow: auto; counter-reset: line; padding-block: 6px; font: 400 .75rem/1.72 var(--mono); }
.editor-code:focus-visible { outline-offset: -3px; }
.code-line { display: flex; width: max-content; min-width: 100%; padding: 0 10px 0 6px; min-height: 1.72em; white-space: pre; counter-increment: line; }
.line-number { width: 28px; flex-shrink: 0; color: #a8b8d5; user-select: none; }
.line-number::before { content: counter(line); }
.code-line:focus-within { background: #273957; }
.code-keyword { color: #dabdff; }
.code-number { color: #ffd489; }
.code-comment { color: #a5c2b8; }
.code-input { width: 9ch; padding: 0 4px; border: 1px solid #859de0; border-radius: 4px; font: inherit; line-height: 1.45; color: #ffdc93; background: #293a62; }
.code-input:focus-visible { outline-color: #a4baff; outline-offset: 1px; }
.code-input[aria-invalid="true"] { border-color: #ff9fa7; }
.input-error { color: var(--red); font-size: .8rem; }
.console { border-radius: 6px; border: 1px solid #e1e8f4; background: #f8faff; padding: 8px 9px; }
.console h4 { font-size: .78rem; }
.console ol { margin: 5px 0 0; padding: 0; list-style: none; color: #3a5073; font: .71rem/1.5 var(--mono); }
.console li + li { margin-top: 3px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 23px; }
.principles div { padding: 11px 13px; border-left: 3px solid #7797f2; background: #eef3fd; border-radius: 0 7px 7px 0; }
.principles h2 { font-size: .92rem; letter-spacing: 0; }
.principles p { margin-top: 4px; color: var(--muted); font-size: .84rem; }

.extras { border-top: 1px solid var(--line); background: #f9fbff; }
.extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.extra-drawing .schematic { min-width: 0; }
.extra-drawing .labels { font-size: 11.5px; }
.extra .actions { grid-template-columns: minmax(0, 1fr) auto; }
.extra-indicator { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #8292a8; }
.extra[data-active="true"] .extra-indicator { background: #098460; }
.extra-range label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 7px; align-items: baseline; font-size: .84rem; font-weight: 660; }
.extra-range output { color: var(--blue-dark); font: 700 .83rem var(--mono); }
.extra-range input { display: block; width: 100%; min-height: 28px; margin: 3px 0 0; accent-color: var(--blue); }
.extra-code { margin: 0; padding: 9px; border-radius: 6px; overflow: auto; background: #16223b; color: #edf4ff; font: .76rem/1.6 var(--mono); }
#practice-pwm .led-fill {
  fill: color-mix(in srgb, #dde6f5, #48e7a3 var(--led-level, 50%));
  filter: drop-shadow(0 0 4px color-mix(in srgb, transparent, #2de59d var(--led-level, 50%)));
}
.signal-plot { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #f7faff; }
.signal-plot svg { display: block; width: 100%; height: 52px; }
.plot-grid { fill: none; stroke: #cbd8ef; }
.plot-trace { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; }
.review { border-block: 1px solid var(--line); background: #f0f4fb; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 14px; }
.results > div { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.results h3 { font-size: .9rem; }
.results p { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.comparison-table { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: auto; }
table { border-collapse: collapse; width: 100%; min-width: 565px; text-align: left; font-size: .88rem; }
th, td { padding: 11px 13px; vertical-align: top; }
thead { background: #e6eeff; color: #274682; }
thead th:first-child { width: 18%; }
thead th:not(:first-child) { width: 41%; }
tbody tr { border-top: 1px solid #e5ebf5; }
tbody tr:nth-child(even) { background: #f9fbff; }
tbody td { color: #41516c; }
.concepts { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-block: 15px; }
.concepts article { padding: 14px; }
.concepts article h3 { color: var(--blue-dark); }
.concepts p, .reflection-intro p, .iteration p { margin-top: 5px; color: var(--muted); font-size: .89rem; }
.reflection { padding: 16px; }
.questions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.question { min-width: 0; padding: 10px; margin: 0; border: 1px solid var(--line); border-radius: 8px; }
.question legend { padding-inline: 4px; font-weight: 720; font-size: .91rem; }
.choice { display: flex; gap: 8px; align-items: flex-start; padding: 6px 7px; border: 1px solid transparent; border-radius: 5px; font-size: .84rem; cursor: pointer; }
.choice:hover, .choice:has(input:checked) { background: var(--blue-pale); border-color: #d5e1ff; }
.choice input { flex: 0 0 auto; margin: .29em 0 0; accent-color: var(--blue); }
.feedback:not(:empty) { margin-top: 7px; padding: 7px; border-radius: 6px; color: #714409; background: #fff4e0; font-size: .82rem; }
.feedback[data-correct="true"] { color: var(--green); background: var(--green-pale); }
.iteration { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding: 14px; border-radius: 9px; border: 1px solid #d6e0f4; background: #e9effd; }
.iteration .button { flex-shrink: 0; }
.footer { padding-block: 15px; font-size: .79rem; color: var(--muted); background: white; }
.footer .shell { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; }
.footer a { text-underline-offset: 3px; }

@media (max-width: 970px) {
  .shell { width: calc(100% - 46px); }
  .hero-inner { gap: 28px; }
  .bench { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .pan-hint { display: block; }
  .extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; gap: 8px 12px; padding-block: 10px 8px; }
  nav { order: 3; width: 100%; }
}
@media (max-width: 750px) {
  .hero-inner { grid-template-columns: 1fr; gap: 23px; padding-block: 32px; }
  .hero-diagram { max-width: 490px; }
  .bench { grid-template-columns: minmax(0, 1fr); }
  .esp-actions { grid-template-columns: 1fr auto; }
}
@media (max-width: 620px) {
  .extra-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .shell { width: calc(100% - 30px); }
  .brand { gap: 7px; font-size: .83rem; }
  .brand-icon { width: 29px; height: 29px; }
  .course { font-size: .72rem; }
  .section { padding-block: 29px 34px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-diagram { padding: 13px; }
  .route { gap: 6px; padding: 6px; }
  .route-icon { width: 27px; height: 29px; }
  .route-icon .icon { width: 15px; }
  .route-goal strong { font-size: 1.06rem; }
  .principles, .results, .concepts, .questions { grid-template-columns: minmax(0, 1fr); }
  .iteration { align-items: flex-start; flex-direction: column; }
  .esp-actions { grid-template-columns: 1fr; }
  nav { gap: 2px; flex-wrap: wrap; }
  nav a { padding-inline: 7px; font-size: .8rem; }
}