.battery-atlas { --atlas-ink:#153d35; --atlas-lime:#dbeaaf; --atlas-line:#cbd8d1; color:var(--atlas-ink) }
.battery-atlas [hidden] { display:none!important }
.atlas-intro { padding-bottom:30px }
.atlas-intro h1 { max-width:1000px }
.atlas-scope,.atlas-scale { color:#52665b; font-size:.88rem; line-height:1.6; max-width:900px }
.atlas-jumps { display:flex; flex-wrap:wrap; gap:12px 25px; margin-top:28px; font-weight:650 }
.atlas-hero-photos,.atlas-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px }
.atlas-hero-photos .editorial-photo,.atlas-gallery .editorial-photo { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#edf1ed }
.atlas-hero-photos figure,.atlas-gallery figure { margin:0 }
.atlas-hero-photos .photo-zoom,.atlas-gallery .photo-zoom { display:block }
.atlas-hero-photos figcaption,.atlas-gallery figcaption { margin-top:12px; font-size:.8rem; line-height:1.55; color:#52665b }
.atlas-comparison { margin-top:72px }
.atlas-comparison h2,.atlas-technical h2,.atlas-gallery h2 { font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.1; letter-spacing:-.035em; margin:10px 0 24px }
.atlas-reading { max-width:860px; line-height:1.65 }
#atlas-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:18px; align-items:end; padding:24px 0; border-top:1px solid var(--atlas-line); border-bottom:1px solid var(--atlas-line); margin-top:26px }
#atlas-filters label { display:grid; gap:8px; font-size:.9rem; font-weight:650 }
#atlas-filters select { width:100%; min-width:0; padding:12px 30px 12px 12px; color:var(--atlas-ink); background:#fff; border:1px solid #8ca397; border-radius:0; font:inherit; font-weight:400 }
.battery-atlas button { min-height:46px; padding:12px 18px; background:var(--atlas-ink); color:#fff; border:1px solid var(--atlas-ink); cursor:pointer; font:inherit; font-size:.9rem }
.battery-atlas button:hover { background:#285647 }
.battery-atlas button:disabled { opacity:.6; cursor:default }
.battery-atlas button:focus-visible,.battery-atlas select:focus-visible,.battery-atlas summary:focus-visible { outline:3px solid #a06618; outline-offset:4px }
.atlas-result { font-size:.9rem; padding:10px 0; color:#52665b }
.atlas-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px 50px; border-top:1px solid var(--atlas-line); padding:30px 0; scroll-margin-top:110px }
.atlas-entry h3 { font-size:1.45rem; line-height:1.2; margin:8px 0 12px; letter-spacing:-.025em }
.atlas-entry h3 span { display:block; font-weight:450; margin-top:4px }
.atlas-model p { font-size:.88rem; margin:8px 0; line-height:1.5 }
.chemistry-tag { display:inline-block; padding:5px 10px; font-size:.76rem; background:#edf1ed; letter-spacing:.025em; font-weight:700 }
.chemistry-tag.lfp { background:#e7efd6 }.chemistry-tag.nmc { background:#dceae4 }.chemistry-tag.nca { background:#e6e8f2 }
.atlas-model .atlas-status { color:#8c4b15; font-weight:650; max-width:340px }
.atlas-capacities { align-self:center }.atlas-capacities>div+div { margin-top:18px }
.atlas-capacities strong { font-size:.73rem; font-weight:550; letter-spacing:.025em; color:#52665b }
.atlas-energy>span { display:block; font-size:1.02rem; font-weight:650; line-height:1.4; padding:5px 0 8px }
.atlas-energy svg { display:block; width:100%; height:14px; overflow:visible }
.energy-fill { fill:#7c9488 }.usable .energy-fill { fill:#25644f }
.energy-fill.approximate,.energy-fill.upper-bound { fill:#8eb8a4; stroke:#25644f; stroke-width:.6; stroke-dasharray:2 1 }
.energy-fill.undefined { fill:#d5b78a; stroke:#8c4b15; stroke-width:.6; stroke-dasharray:2 1 }
.atlas-energy .unknown-energy { line-height:14px; height:14px; padding:0; color:#52665b; font-weight:400 }
.atlas-scale { font-size:.7rem; margin:9px 0 0 }
.atlas-details { grid-column:1/-1; font-size:.91rem; line-height:1.6 }
.atlas-details summary { cursor:pointer; padding:6px 0; font-weight:600 }
.atlas-details dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; padding-top:10px }
.atlas-details dt { font-weight:700 }.atlas-details dd { margin:8px 0 0 }
.atlas-details ul { padding-left:20px }.atlas-details a { overflow-wrap:anywhere }
.atlas-row-links { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:25px; font-size:.84rem }
.atlas-row-links a { text-decoration:underline; text-underline-offset:3px }
.atlas-technical { border-top:1px solid var(--atlas-line); padding-top:60px; margin-top:65px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; align-items:center; scroll-margin-top:100px }
.atlas-technical p { line-height:1.65 }.atlas-technical h2 { max-width:430px }
.chemistry-notes>div { border-top:1px solid var(--atlas-line); padding:15px 0 }.chemistry-notes dt { font-weight:700 }.chemistry-notes dd { margin:6px 0 0; font-size:.94rem; line-height:1.6 }
.atlas-drawing { margin:0; padding:20px; background:#f3f6f1; min-width:0 }
.atlas-drawing svg { display:block; width:100%; max-width:440px; height:auto; margin:auto }
.atlas-drawing figcaption { font-size:.8rem; line-height:1.5; margin-top:15px }.atlas-drawing figcaption a { display:block; margin-top:5px }
#flow-controls { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 }
.pack-cells,.pack-modules { transition:transform 900ms ease,opacity 900ms ease }.pack-cells text,.pack-modules text { transition:opacity 450ms ease }
.packed .pack-cells { transform:translateY(239px); opacity:.55 }.packed .pack-modules { transform:translateY(140px); opacity:.65 }.packed .pack-cells text,.packed .pack-modules text { opacity:0 }
.flow-running .ion-path { animation:ions 2s linear infinite }.flow-running .electron-path { animation:electrons 1.6s linear infinite }
.flow-charging .ion-path,.flow-charging .electron-path { animation-direction:reverse }.flow-charging .ion-arrow { transform:rotate(180deg); transform-origin:180px 306px }
@keyframes ions { to { stroke-dashoffset:-32 } }@keyframes electrons { to { stroke-dashoffset:-26 } }
.atlas-gallery { margin-top:80px; padding-top:50px; border-top:1px solid var(--atlas-line); scroll-margin-top:100px }
.atlas-gallery-grid { row-gap:45px; margin:30px 0 }.atlas-gallery h3 { font-size:1.1rem; margin:0 0 16px }
.atlas-photo-details summary,.atlas-sources summary { cursor:pointer; font-weight:650; padding:15px 0 }
.atlas-sources { margin-top:60px; margin-bottom:80px; max-width:900px; font-size:.9rem; line-height:1.7 }.atlas-sources a { overflow-wrap:anywhere }.atlas-sources li { margin:8px 0 }
@media(max-width:900px) { .atlas-technical { gap:35px }.atlas-entry { gap:18px 25px }#atlas-filters { grid-template-columns:repeat(2,minmax(0,1fr)) }.atlas-details dl { grid-template-columns:1fr } }
@media(max-width:700px) { .atlas-hero-photos,.atlas-gallery-grid,.atlas-technical { grid-template-columns:1fr }.atlas-hero-photos { gap:26px }.atlas-entry { grid-template-columns:1fr; gap:16px }.atlas-details,.atlas-row-links { grid-column:1 }.atlas-comparison { margin-top:45px }.atlas-technical { margin-top:45px; padding-top:35px; gap:25px }.atlas-drawing { padding:10px }.atlas-technical h2 { max-width:none }.atlas-model .atlas-status { max-width:none }.atlas-gallery { margin-top:45px;padding-top:35px } }
@media(max-width:380px) { #atlas-filters { grid-template-columns:1fr }.atlas-jumps { gap:12px;font-size:.88rem }.atlas-energy>span { font-size:.93rem } }
@media(prefers-reduced-motion:reduce) { .battery-atlas * { animation:none!important; transition:none!important } }
@media print { #atlas-filters,#flow-controls,#pack-toggle { display:none!important }.atlas-entry[hidden] { display:grid!important }.atlas-entry { break-inside:avoid }.battery-atlas details>* { display:block!important } }