.circuit-lesson .lesson-header { margin-bottom: 26px; }
.circuit-parts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 26px 0; }
.circuit-part { padding: 18px; border: 1px solid #dae1e5; border-radius: 12px; background: #fff; }
.circuit-part h2 { margin: 10px 0 8px; font-size: 17px; color: #25343a; }
.circuit-part p { margin: 0; font-size: 14px; color: #66747b; line-height: 1.6; }
.circuit-lesson .electric-symbol { display: block; width: 160px; max-width: 100%; height: 100px; fill: none; stroke: #25343a; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.circuit-lesson .electric-symbol circle { fill: #fff; }
.circuit-lesson .electric-symbol text { fill: #25343a; stroke: none; font: 14px Arial,sans-serif; }
.circuit-lab { margin: 28px 0; border: 1px solid #d9e2e5; border-radius: 12px; overflow: hidden; background: #fff; }
.circuit-lab-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 20px; background: #3d444c; color: #fff; }
.circuit-lab-header span { color: #b6c3cc; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.circuit-lab-header h2 { color: #fff; font-size: 19px; margin: 5px 0 0; }
body.site-subpage .circuit-lesson button[type] { padding: 9px 14px; border: 1px solid #ccd5da; border-radius: 6px; background: #f5f7f8; color: #25343a; font: inherit; font-size: 14px; font-weight: 600; box-shadow: none; cursor: pointer; }
body.site-subpage .circuit-lesson .circuit-lab-header button[type] { flex-shrink: 0; background: #505963; border-color: #6b7681; color: #fff; }
.circuit-lesson button:focus-visible, #series-switch:focus-visible { outline: 3px solid #149982; outline-offset: 3px; }
#series-circuit { display: block; width: 100%; height: auto; }
#series-switch { cursor: pointer; }
#series-switch .switch-hit { fill: transparent; }
#series-switch:hover .switch-hit, #series-switch:focus-visible .switch-hit { fill: #14998218; }
.circuit-state { padding: 14px 20px; margin: 0; background: #eef5f2; color: #137860; font-weight: 600; line-height: 1.5; }
.circuit-note { padding: 14px 20px; color: #66747b; font-size: 13px; line-height: 1.6; margin: 0; }
.symbol-section { margin: 38px 0; scroll-margin-top: 110px; }
.symbol-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.symbol-heading h2 { margin: 0 0 10px; font-size: 25px; color: #25343a; }
.symbol-heading p { margin: 0; max-width: 65ch; color: #5a6972; line-height: 1.65; }
.symbol-modes { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 10px; }
body.site-subpage .circuit-lesson .symbol-modes button[aria-pressed="true"] { background: #147c69; border-color: #147c69; color: #fff; }
.symbol-level { margin: 0 0 20px; color: #66747b; font-size: 14px; }
.symbol-group { margin: 24px 0; }
.symbol-group > h3 { margin: 0 0 12px; color: #137860; font-size: 15px; }
.symbol-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.symbol-card { padding: 18px; border: 1px solid #dae1e5; border-radius: 12px; background: #fff; }
.symbol-card .electric-symbol { margin: 0 auto 8px; }
.symbol-card h4 { margin: 0 0 8px; color: #25343a; font-size: 17px; }
.symbol-card p { margin: 0; color: #66747b; font-size: 14px; line-height: 1.6; }
.symbol-card small { display: block; margin-top: 10px; color: #148570; font-weight: 600; }
.simulator-link { display: block; padding: 20px; border: 1px solid #d9e7e2; border-radius: 12px; color: #147c69; text-decoration: none; background: #eef5f2; }
.simulator-link strong { display: block; font-size: 19px; margin-bottom: 7px; }
.simulator-link span { color: #536873; font-size: 15px; line-height: 1.6; }
.circuit-lesson .lesson-next { margin-top: 30px; }
@media(max-width:900px) { .circuit-parts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .circuit-parts, .symbol-cards { grid-template-columns: 1fr; } .circuit-part { display: grid; grid-template-columns: 90px 1fr; gap: 0 14px; } .circuit-part .electric-symbol { grid-row: 1/3; width: 90px; } .circuit-lab-header { align-items: start; flex-direction: column; } .symbol-heading { display: block; } }

.circuit-lesson .electric-symbol .junction-dot { fill:#25343a; }

body.site-subpage .circuit-lesson .circuit-lab-header h2 { color:#fff; font-size:19px; margin:5px 0 0; }

.resistor-variants { display:flex; gap:8px; margin-bottom:14px; }
.resistor-variants figure { flex:1; min-width:0; margin:0; }
.resistor-variants .electric-symbol { width:100%; height:70px; }
.resistor-variants figcaption { font-size:11px; color:#536873; text-align:center; }
.symbol-card[data-symbol-type="resistor"] { grid-column:span 2; }
@media(max-width:600px) { .symbol-card[data-symbol-type="resistor"] { grid-column:auto; } }

.circuit-exercises { margin:38px 0; scroll-margin-top:110px; }
.circuit-exercise-category { border:1px solid #dae1e5; border-radius:12px; background:#fff; margin:14px 0; overflow:hidden; }
.circuit-exercise-category > summary { padding:20px; color:#137860; font-weight:700; font-size:18px; cursor:pointer; background:#eef5f2; }
.circuit-exercise-content { padding:4px 20px 20px; }
.circuit-exercise-item { margin:12px 0; border:1px solid #dae1e5; border-radius:8px; }
.circuit-exercise-item > summary { padding:14px; cursor:pointer; font-weight:600; color:#25343a; }
.circuit-exercise-item figure { margin:0; }
.circuit-exercise-item img { display:block; width:100%; height:auto; border-radius:0 0 8px 8px; }
.circuit-exercise-credit { color:#66747b; font-size:12px; }
.circuit-description { padding:18px 0; border-bottom:1px solid #e3e9ec; }
.circuit-description:last-child { border-bottom:0; }
.circuit-description h3 { margin:0 0 10px; font-size:18px; }
.circuit-description p { margin:0; line-height:1.7; }
.circuit-exercises summary:focus-visible { outline:3px solid #149982; outline-offset:-3px; }
@media(max-width:600px) { .circuit-exercise-content { padding:4px 14px 14px; } .circuit-exercise-category > summary { padding:16px; font-size:17px; } }

/* A clear, unboxed opening title. */
.electric-lessons.circuit-lesson .lesson-header { margin: 12px 0 32px; }
.electric-lessons.circuit-lesson .lesson-header h1 { max-width: 24ch; margin: 0 0 20px; font-size: clamp(36px, 5.2vw, 58px); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; color: #203b42; text-wrap: balance; }
.electric-lessons.circuit-lesson .lesson-header h1::after { content: ''; display: block; width: 64px; height: 5px; margin-top: 20px; border-radius: 3px; background: #16856e; }

/* Use each column's full width rather than letterboxing photos into a short strip. */
.circuit-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
body.site-subpage .circuit-lesson button.circuit-photo { display:block; min-width:0; width:100%; margin:0; padding:0; overflow:hidden; border:1px solid #ccd9d2; border-radius:8px; background:#fff; color:#25343a; box-shadow:none; text-align:left; cursor:zoom-in; }
.circuit-photo img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; background:#f5f7f5; }
.circuit-photo > span { display:block; padding:7px 9px; font-size:13px; line-height:1.3; font-weight:700; }
.circuit-drawing-grid { margin:16px 0; }
.circuit-drawing-grid .circuit-photo img { aspect-ratio:1 / 1; background:#fff; }
body.site-subpage .circuit-lesson button.circuit-analysis-photo { max-width:520px; margin:16px auto; }
.circuit-analysis-photo img { aspect-ratio:auto; background:#fff; }
.circuit-analysis .option-list { padding-left:24px; line-height:1.7; }
.circuit-analysis-solution { border:1px solid #dae1e5; border-radius:8px; margin:16px 0; padding:12px 16px; }
.circuit-analysis-solution > summary { cursor:pointer; font-weight:700; color:#137860; }
.circuit-analysis-solution p { margin:10px 0; }
body.site-subpage .circuit-lesson button.circuit-photo:hover { border-color:#137860; background:#edf6f2; }
.circuit-photo:focus-visible { outline:3px solid #137860; outline-offset:3px; }
#circuit-photo-viewer { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#111a21; color:#fff; overflow:hidden; }
#circuit-photo-viewer::backdrop { background:#111a21; }
#circuit-photo-viewer[open] { display:flex; flex-direction:column; }
.circuit-photo-toolbar { display:flex; align-items:center; flex-shrink:0; gap:12px; padding:12px 18px; border-bottom:1px solid #44505a; background:#1b2832; }
#circuit-photo-title { flex:1; min-width:0; font-size:14px; line-height:1.4; }
#circuit-photo-viewer button { flex-shrink:0; margin:0; padding:9px 14px; border:1px solid #75848e; border-radius:6px; color:#fff; background:#293d4a; cursor:pointer; font-weight:700; }
#circuit-photo-viewer button:focus-visible { outline:3px solid #9ce2cd; outline-offset:3px; }
.circuit-photo-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:14px; }
#circuit-photo-large { display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:700px) { .circuit-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .circuit-photo-toolbar { gap:6px; padding:10px; } #circuit-photo-viewer button { padding:8px 10px; } }
@media(max-width:440px) { .circuit-photo-grid { grid-template-columns:1fr; } .circuit-photo-toolbar { flex-wrap:wrap; } #circuit-photo-title { order:-1; flex-basis:100%; } #circuit-photo-close { margin-left:auto !important; } .circuit-photo-stage { padding:6px; } }