.tutorial-shell { max-width: 1200px; }
.tutorial-header { margin-bottom: 34px; }
.tutorial-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 24px; font-size: .88rem; }
.tutorial-lead, .tutorial-assumptions, .tutorial-section-heading p, .tutorial-boundary {
  color: #d6e2e8;
  font-size: .96rem;
  line-height: 1.62;
  text-align: justify;
  hyphens: auto;
}
.tutorial-lead { max-width: 96ch; margin: 18px 0 10px; }
.tutorial-assumptions { max-width: 96ch; margin: 0; }
.tutorial-shell var { font-family: Georgia, Cambria, serif; font-style: italic; }
.tutorial-shell main { display: grid; gap: 34px; }
.tutorial-shell main > section { border-top: 1px solid var(--line); padding-top: 22px; }
.tutorial-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 16px; }
.tutorial-section-heading h2 { margin: 0; font-size: 1.37rem; letter-spacing: -.02em; }
.tutorial-section-heading p:not(.section-kicker) { max-width: 54ch; margin: 0; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.tutorial-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #14263a, #112235); }
.tutorial-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.tutorial-number { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #092430; background: var(--teal); font-size: .9rem; font-weight: 800; }
.tutorial-card h3 { margin: 0; font-size: 1.07rem; }
.tutorial-figure { margin: 0; }
.tutorial-figure svg { display: block; width: 100%; height: auto; background: #0c1c2b; border: 1px solid #315067; border-radius: 11px; }
.tutorial-figure figcaption { color: #b8cbd2; font-size: .85rem; line-height: 1.5; margin: 8px 2px 0; text-align: justify; }
.tutorial-figure .wire, .tutorial-figure .ground { fill: none; stroke: #e5f1f1; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-figure .ground { stroke-width: 2.5; }
.tutorial-figure .source, .tutorial-figure .source-wave { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-figure .resistor { fill: #0c1c2b; stroke: #e5f1f1; stroke-width: 3; }
.tutorial-figure .resistor-label { fill: #e5f1f1; font-size: 18px; font-weight: 700; }
.tutorial-figure .battery-long, .tutorial-figure .battery-short { stroke: var(--amber); stroke-linecap: round; }
.tutorial-figure .battery-long { stroke-width: 5; }
.tutorial-figure .battery-short { stroke-width: 4; }
.tutorial-figure .diode-fill { fill: var(--violet); }
.tutorial-figure .diode-bar { fill: none; stroke: var(--violet); stroke-width: 5; stroke-linecap: round; }
.tutorial-figure .component, .tutorial-figure .polarity { fill: #e9f2f2; font-size: 20px; font-weight: 650; }
.tutorial-figure .polarity { font-size: 21px; }
.tutorial-figure .sub { font-size: 13px; baseline-shift: sub; }
.tutorial-figure .junction { fill: var(--amber); }
.tutorial-figure .probe { fill: #0c1c2b; stroke: var(--amber); stroke-width: 3; }
.tutorial-figure .probe-text { fill: var(--amber); font-size: 21px; font-weight: 750; }
.tutorial-table-wrap { overflow-x: auto; }
.tutorial-answers table { width: 100%; border-collapse: collapse; color: #e4eff0; font-size: .93rem; }
.tutorial-answers caption { caption-side: top; text-align: left; color: #d4e3e6; font-weight: 700; margin: 0 0 9px; }
.tutorial-answers th, .tutorial-answers td { padding: 11px 12px; border: 1px solid #315067; text-align: left; vertical-align: top; line-height: 1.5; }
.tutorial-answers thead th { background: #18344b; white-space: nowrap; }
.tutorial-answers tbody th { color: var(--teal); background: #102638; }
.tutorial-answers tbody tr:nth-child(even) td { background: #11283a; }
.tutorial-boundary { max-width: 90ch; margin: 12px 0 0; }
.tutorial-footer { border-top: 1px solid var(--line); margin-top: 36px; }
@media (max-width: 850px) {
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-section-heading { display: block; }
  .tutorial-section-heading p:not(.section-kicker) { margin-top: 8px; }
}
@media (max-width: 580px) {
  .tutorial-shell { padding: 26px 16px; }
  .tutorial-card { padding: 13px; }
  .tutorial-figure { overflow-x: auto; }
  .tutorial-figure svg { min-width: 480px; }
}
@media print {
  :root { color-scheme: light; }
  body { color: #111; background: #fff; }
  .tutorial-shell { padding: 0; max-width: none; }
  .tutorial-nav, .tutorial-footer { display: none; }
  .tutorial-lead, .tutorial-assumptions, .tutorial-section-heading p, .tutorial-boundary, .tutorial-figure figcaption { color: #111; }
  .tutorial-card { background: #fff; border-color: #555; break-inside: avoid; }
  .tutorial-figure svg { background: #fff; border-color: #555; }
  .tutorial-figure .wire, .tutorial-figure .ground, .tutorial-figure .resistor { stroke: #111; }
  .tutorial-figure .component, .tutorial-figure .polarity, .tutorial-figure .resistor-label { fill: #111; }
  .tutorial-figure .source, .tutorial-figure .source-wave, .tutorial-figure .battery-long, .tutorial-figure .battery-short, .tutorial-figure .diode-bar, .tutorial-figure .probe { stroke: #111; }
  .tutorial-figure .diode-fill, .tutorial-figure .junction, .tutorial-figure .probe-text { fill: #111; }
  .tutorial-figure .probe { fill: #fff; }
  .tutorial-answers table, .tutorial-answers caption { color: #111; }
  .tutorial-answers th, .tutorial-answers td { border-color: #555; }
  .tutorial-answers thead th, .tutorial-answers tbody th, .tutorial-answers tbody tr:nth-child(even) td { color: #111; background: #fff; }
}