.material-lab { margin-top: 16px; overflow: hidden; }
.material-lab-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.material-lab-heading h2 { margin: 8px 0; }
.material-lab-heading p { margin: 0 0 20px; max-width: 670px; }
.material-lab-field { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: #e8f2ff; color: #164983; font-size: .85rem; font-weight: 700; }
.material-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.material-lab .material-choices button, .material-lab .material-energy button { border: 1px solid #b6c9d8; border-radius: 999px; background: #fff; color: #243b4d; padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
body.site-subpage .material-lab .material-choices button, body.site-subpage .material-lab .material-energy button { border: 1px solid #b6c9d8; background: #fff; color: #243b4d; box-shadow: none; }
body.site-subpage .material-lab .material-choices button:hover, body.site-subpage .material-lab .material-energy button:hover { border-color: #147c9a; background: #f0f9fc; color: #164b66; transform: none; }
body.site-subpage .material-lab .material-choices button.is-active, body.site-subpage .material-lab .material-energy button[aria-pressed="true"] { background: #164b66; border-color: #164b66; color: white; }
.material-choices button:focus-visible, .material-energy button:focus-visible { outline: 3px solid #e09025; outline-offset: 3px; }
.material-simulator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.material-stage { min-width: 0; border: 1px solid #d5e2e9; border-radius: 22px; overflow: hidden; background: #f3f8fa; }
.material-stage svg { width: 100%; height: auto; display: block; }
.material-explanation { padding: 18px; border-radius: 22px; background: #f4f7f9; }
.material-explanation h3 { margin: 0 0 8px; font-size: 1.12rem; }
.material-explanation p { margin: 0; }
.material-battery-lab { margin-top: 22px; padding: 18px; border: 1px solid #d2e1e9; border-radius: 22px; background: #f7fafc; }
.material-battery-lab[hidden] { display: none; }
.material-battery-lab h3 { margin: 0 0 6px; }
.material-battery-lab > p { margin: 0 0 14px; }
body.site-subpage .material-lab .material-battery-energy { margin: 0 0 14px; border: 1px solid #b6c9d8; border-radius: 999px; padding: 9px 15px; background: #fff; color: #243b4d; box-shadow: none; font: inherit; font-weight: 700; cursor: pointer; }
body.site-subpage .material-lab .material-battery-energy[aria-pressed="true"] { background: #164b66; border-color: #164b66; color: #fff; }
.material-battery-energy[hidden] { display: none !important; }
.material-battery-energy:focus-visible { outline: 3px solid #e09025; outline-offset: 3px; }
.material-battery-labels { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #405d70; font-size: .83rem; font-weight: 700; }
.material-battery-stage { overflow: hidden; border: 1px solid #c7dbe6; border-radius: 18px; background: #f2f8fb; }
.material-battery-stage svg { display: block; width: 100%; height: auto; }
.material-battery-stage svg.is-dragging { cursor: grabbing; }
.material-battery-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.material-battery-feedback p { margin: 0; color: #244d63; font-weight: 700; }
body.site-subpage .material-lab .material-battery-feedback button { flex: 0 0 auto; border: 1px solid #b6c9d8; border-radius: 999px; padding: 8px 14px; background: #fff; color: #243b4d; box-shadow: none; font: inherit; font-weight: 700; cursor: pointer; }
body.site-subpage .material-lab .material-battery-feedback button:hover { border-color: #147c9a; background: #f0f9fc; color: #164b66; transform: none; }
.material-battery-feedback button:focus-visible { outline: 3px solid #e09025; outline-offset: 3px; }
.material-battery-lab .material-battery-note { margin: 12px 0 0; color: #5a6870; font-size: .82rem; }
.battery-contact { fill: #3b637a; stroke: white; stroke-width: 2; }
.battery-contact-positive { fill: #d15c52; }
.battery-contact-positive.is-lit { fill: #159673; filter: drop-shadow(0 0 9px #30c596); }
.battery-contact-sign { fill: white; font: 700 25px Arial, sans-serif; text-anchor: middle; pointer-events: none; }
.battery-neighbor-halo { fill: #d9f1fe; opacity: .92; }
.battery-neighbor-dot { fill: #197bba; stroke: white; stroke-width: 1.5; }
.battery-neighbor.is-shifting .battery-neighbor-halo { fill: #a9e5ff; }
.battery-hole.is-shifting { fill: #ffe7ee; }
#battery-test-electron { cursor: grab; touch-action: none; }
#battery-test-electron:focus-visible { outline: none; }
#battery-test-electron:focus-visible .battery-test-halo { stroke: #e09025; stroke-width: 3; }
.battery-test-hit { fill: transparent; }
.battery-test-halo { fill: #d6f2ff; stroke: #197bba; stroke-width: 2; }
.battery-test-dot { fill: #0874b4; stroke: white; stroke-width: 2; }
#battery-test-electron text { fill: white; text-anchor: middle; font: 700 20px Arial, sans-serif; pointer-events: none; }
.material-energy { margin-top: 20px; }
.material-energy p { margin-top: 8px; font-size: .9rem; color: #465b69; }
.material-legend { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-top: 20px; font-size: .78rem; color: #405563; }
.material-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.material-legend > span[hidden] { display: none; }
.material-key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.material-key-core { background: #a6bfcd; border: 2px solid #48758a; }
.material-key-electron { background: #197bba; }
.material-key-bound { background: #197bba; border: 3px solid #dceafa; }
.material-key-hole { border: 3px dashed #c75070; }
.material-model-note { margin: 16px 0 4px; color: #465b69; font-size: .9rem; }
.material-source { margin: 0; font-size: .78rem; color: #5a6870; }
.material-source a { color: #165e86; }
.material-backdrop { fill: #f4fafc; stroke: #dce9ef; stroke-width: 2; }
.material-atom-area { fill: #e8f3f8; stroke: #c7dce7; stroke-width: 1; }
.material-shell { fill: none; stroke: #96aebc; stroke-width: 1.6; }
.material-outer-shell { stroke: #8aa5b7; stroke-dasharray: 3 4; }
.material-nucleus-halo { fill: #ffe0b5; stroke: #c76b3f; stroke-width: 2; }
.material-nucleus { fill: #d7643d; stroke: #a94a38; stroke-width: 2; }
.material-inner-electron { fill: #197bba; stroke: white; stroke-width: 1.1; }
.material-free-halo { fill: #ceeefe; opacity: .85; }
.material-free-electron > circle:not(.material-free-halo) { fill: #1177bb; stroke: white; stroke-width: 1.5; }
.material-free-electron text { fill: white; text-anchor: middle; font: 700 11px Arial, sans-serif; }
.material-scene-caption { fill: #37566b; text-anchor: middle; font: 700 15px Arial, sans-serif; }
.material-hole { fill: #fff6f8; stroke: #c75070; stroke-width: 4; stroke-dasharray: 5 4; }
.material-silicon-core circle { fill: #b9d0db; stroke: #52788b; stroke-width: 2; }
.material-silicon-core text { fill: #234657; text-anchor: middle; font: 700 10px Arial, sans-serif; }
.material-bond { stroke: #81a3b6; stroke-width: 3; stroke-linecap: round; }
.material-bond-electron { fill: #197bba; stroke: #fff; stroke-width: 1; }
.material-bond-group .material-hole { stroke-width: 2.5; stroke-dasharray: 3 2; }
.material-silicon-carrier > circle:not(.material-free-halo) { fill: #1177bb; stroke: white; stroke-width: 1.5; }
.material-silicon-carrier text { fill: white; text-anchor: middle; font: 700 10px Arial, sans-serif; }
@media (max-width: 760px) { .material-lab-heading { flex-direction: column; gap: 0; } .material-lab-field { margin-bottom: 16px; } }
@media (max-width: 760px) { .material-battery-lab { padding: 12px; } .material-battery-feedback { align-items: flex-start; flex-direction: column; } .material-battery-labels { font-size: .7rem; } }

.materials-page-heading { margin: 8px 0 28px; padding: 0; }
.materials-page-heading h1 { max-width: 28ch; margin: 0; color: #25343a; font-size: clamp(28px, 4vw, 44px); line-height: 1.13; letter-spacing: -.035em; }