.diagram {
  min-height: 560px;
  overflow: auto;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size: 18px 18px;
}

.circuit-viewport { position:relative; overflow:hidden; }
.circuit-stage { position:relative; min-width:900px; background:transparent; overflow:hidden; transform-origin:top left; }
.circuit-wires-layer { position:absolute; inset:0; z-index:1; pointer-events:none; }
.circuit-wire { position:absolute; height:2px; background:#c9525f; transform-origin:left center; pointer-events:none; }
.circuit-element { position:absolute; z-index:2; width:116px; height:82px; color:var(--ink); user-select:none; cursor:grab; touch-action:none; }
.circuit-element:active { cursor:grabbing; }
.component-id { position:absolute; top:-18px; left:0; color:var(--muted); font:italic 14px "Merriweather",Georgia,serif; }
.component-symbol { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-drag:none; }
.vertical.resistor .component-symbol { transform:rotate(90deg); }
.horizontal.voltage_source .component-symbol, .horizontal.current_source .component-symbol { transform:rotate(90deg); }
.component-value { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--muted); font:13px "Merriweather Sans",sans-serif; }
.circuit-terminal.snap-active { background:#63e6be; box-shadow:0 0 0 4px #63e6be55; }
.circuit-terminal { position:absolute; background:#c9525f; box-sizing:border-box; }.horizontal .terminal-a { left:-18px; top:40px; width:18px; height:2px; }.horizontal .terminal-b { right:-18px; top:40px; width:18px; height:2px; }.vertical .terminal-a { top:-18px; left:57px; width:2px; height:18px; }.vertical .terminal-b { bottom:-18px; left:57px; width:2px; height:18px; }

.unit-summary {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 300;
}

.answer-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
  font-size: 13px;
}

.answer-heading span { color: var(--muted); font-weight: 300; }
.answer-fields { display: grid; gap: 12px; }
.answer-field { display: grid; gap: 7px; color: var(--ink); font-size: 13px; }
.answer-field > span:first-child { line-height: 1.35; }
.answer-field b { color: var(--green-dark); margin-right: 4px; }
.result-list { display: grid; gap: 7px; margin: 12px 0; padding-left: 20px; }
.result-ok { color: var(--green-dark); }
.result-error { color: var(--danger); }
.solution-note { color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; }

.app-shell.practice-mode {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1600px;
}

.practice-mode .side-panel { display: none; }
.practice-mode .exercise-layout { grid-template-columns: minmax(0, 1.4fr) minmax(390px, .7fr); }
.practice-mode .diagram { min-height: 650px; padding: 34px; }

@media (min-width: 1051px) {
  .exercise-layout { grid-template-columns: 1.4fr .8fr; }
  .diagram { padding: 24px; }
  .problem { padding: clamp(24px, 3vw, 40px); }
  .problem h2 {
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.55;
    margin-bottom: 28px;
  }
}

@media (max-width: 1050px) {
  .exercise-layout { grid-template-columns: 1fr; }
  .diagram { min-height: 440px; }
  .practice-mode .exercise-layout { grid-template-columns: 1fr; }
  .practice-mode .diagram { min-height: 480px; padding: 20px; }
}

@media (max-width: 650px) {
  .answer-heading { flex-direction: column; gap: 4px; }
  .diagram { display: block; }
  .diagram { min-height: 300px; }
  .circuit-stage { transform-origin:top left; }
  .practice-mode .diagram { min-height: 360px; padding: 10px; }
}