:root{
  color-scheme:light dark;
  --bg:#f5f7fa;--panel:#fff;--text:#18212b;--muted:#61707c;--border:#d9e0e7;
  --accent:#1769aa;--accent-soft:#e7f2fb;--neg:#4f7fbd;--pos:#d47a35;
  --sep:#a6afb8;--collector:#89939c;--ion:#24945b;--electron:#7a4cc1;
  --warn-bg:#fff4d6;--warn-border:#dfba50;--warn-text:#684a00;--shadow:0 12px 32px #00000014;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#11161b;--panel:#1b2229;--text:#eef4f8;--muted:#aeb8c2;--border:#34404b;
  --accent:#72b7ef;--accent-soft:#16324a;--neg:#72a8e2;--pos:#efa060;--sep:#7e8993;
  --collector:#6d7882;--ion:#65cf96;--electron:#b293ef;--warn-bg:#3c3115;
  --warn-border:#8d7027;--warn-text:#ffe39a;--shadow:0 12px 32px #00000045;
}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}
button{font:inherit}.page{width:min(1180px,calc(100% - 28px));margin:24px auto 48px}
.eyebrow{color:var(--accent);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
h1{margin:.25rem 0;font-size:clamp(2rem,4vw,3rem);line-height:1.1}.subtitle{margin:0;max-width:820px;color:var(--muted);font-size:1.03rem}
.notice{margin:16px 0;padding:12px 14px;border:1px solid var(--warn-border);border-radius:12px;background:var(--warn-bg);color:var(--warn-text);font-weight:700}
.shell{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--border)}
.group,.status,.components{display:flex;flex-wrap:wrap;gap:8px}.btn{min-height:38px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);font-weight:700;cursor:pointer}
.btn:hover,.btn:focus-visible{border-color:var(--accent);outline:none}.btn.active,.btn[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}
.status{justify-content:flex-end}.pill{padding:4px 9px;border:1px solid var(--border);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.88rem;font-weight:750}
.workbench{padding:16px}.visual{--inset:7%;position:relative;min-height:470px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),var(--panel)}
.wire{position:absolute;top:30px;right:var(--inset);left:var(--inset);height:135px;border:3px solid var(--text);border-bottom:0;border-radius:10px 10px 0 0;pointer-events:none}
.device{position:absolute;top:7px;left:50%;z-index:5;min-width:130px;padding:10px 15px;transform:translateX(-50%);border:2px solid var(--text);border-radius:10px;background:var(--panel);text-align:center;font-weight:800}
.flow{position:absolute;top:69px;left:50%;z-index:5;width:max-content;max-width:82%;padding:3px 8px;transform:translateX(-50%);background:var(--panel);color:var(--muted);text-align:center;font-size:.9rem}
.terminal{position:absolute;top:145px;z-index:6;display:grid;width:34px;height:34px;place-items:center;transform:translateX(-50%);border:3px solid var(--text);border-radius:50%;background:var(--panel);font-weight:800}.terminal.left{left:var(--inset)}.terminal.right{left:calc(100% - var(--inset))}
.cell{position:absolute;top:162px;right:var(--inset);left:var(--inset);z-index:2;display:grid;grid-template-columns:24px minmax(0,1fr) 64px minmax(0,1fr) 24px;height:220px;overflow:hidden;border:3px solid var(--border);border-radius:8px}
.part{position:relative;min-width:0;border:0;color:var(--text)}button.part{cursor:pointer}button.part:focus-visible,button.part.selected{z-index:3;outline:4px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:-5px}
.collector{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--collector) 78%,transparent) 0 3px,color-mix(in srgb,var(--collector) 38%,transparent) 3px 6px)}
.electrode{display:grid;place-items:center;padding:16px 10px;text-align:center}.negative{background:radial-gradient(circle at 20% 25%,color-mix(in srgb,var(--neg) 65%,transparent) 0 9px,transparent 10px),radial-gradient(circle at 66% 68%,color-mix(in srgb,var(--neg) 55%,transparent) 0 11px,transparent 12px),color-mix(in srgb,var(--neg) 18%,var(--panel));background-size:64px 58px,78px 68px,auto}.positive{background:radial-gradient(circle at 18% 72%,color-mix(in srgb,var(--pos) 65%,transparent) 0 9px,transparent 10px),radial-gradient(circle at 56% 22%,color-mix(in srgb,var(--pos) 55%,transparent) 0 11px,transparent 12px),color-mix(in srgb,var(--pos) 18%,var(--panel));background-size:64px 58px,78px 68px,auto}
.separator{display:grid;place-items:center;border-inline:1px solid var(--border);background:repeating-linear-gradient(0deg,transparent 0 7px,color-mix(in srgb,var(--sep) 62%,transparent) 7px 10px)}.separator span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.82rem;font-weight:800}
.copy{display:grid;gap:5px;max-width:240px;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--panel) 83%,transparent)}.title{font-weight:800}.material{font-size:.92rem}.reaction{color:var(--muted);font-size:.84rem}
.electrolyte-region{
position:absolute;top:174px;right:calc(var(--inset) + 24px);left:calc(var(--inset) + 24px);z-index:6;height:196px;
border:3px dashed transparent;border-radius:8px;background:transparent;pointer-events:none;
transition:border-color .18s ease,background-color .18s ease
}
.electrolyte-region.selected{
border-color:var(--ion);
background:color-mix(in srgb,var(--ion) 10%,transparent)
}
.electrolyte-region span{
position:absolute;left:50%;bottom:8px;padding:3px 8px;transform:translateX(-50%);
border:1px solid var(--ion);border-radius:999px;background:var(--panel);color:var(--ion);
font-size:.78rem;font-weight:800;white-space:nowrap;opacity:0
}
.electrolyte-region.selected span{opacity:1}
.ion-lane{position:absolute;top:245px;right:calc(var(--inset) + 28px);left:calc(var(--inset) + 28px);z-index:7;height:54px;pointer-events:none}.ion-label{position:absolute;top:392px;left:50%;z-index:5;width:min(92%,760px);transform:translateX(-50%);color:var(--muted);text-align:center;font-size:.9rem}
.particle{position:absolute;z-index:10;display:grid;place-items:center;border-radius:50%;background:var(--panel);font-size:.72rem;font-weight:800;pointer-events:none}.electron{width:19px;height:19px;border:2px solid var(--electron);color:var(--electron)}.lithium{width:25px;height:25px;border:2px solid var(--ion);background:color-mix(in srgb,var(--ion) 14%,var(--panel));color:var(--ion)}
.components{justify-content:center;margin-top:14px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:14px;margin-top:14px}.card{padding:16px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--panel) 96%,var(--accent-soft))}.card h2{margin:0 0 8px;font-size:1.1rem}.card p{margin:0}.roles{width:100%;border-collapse:collapse;font-size:.92rem}.roles th,.roles td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.roles tr:last-child>*{border-bottom:0}.note{margin:14px 0 0;color:var(--muted);font-size:.85rem;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:780px){.toolbar{align-items:stretch}.status{justify-content:flex-start}.detail-grid{grid-template-columns:1fr}.visual{min-height:510px}.cell{grid-template-columns:16px minmax(0,1fr) 46px minmax(0,1fr) 16px;height:250px}.copy{padding:5px 3px;font-size:.82rem}.electrolyte-region{top:174px;right:calc(var(--inset) + 16px);left:calc(var(--inset) + 16px);height:226px}.ion-lane{top:262px}.ion-label{top:430px}}
@media(max-width:520px){.page{width:calc(100% - 16px);margin-top:12px}.workbench{padding:8px}.visual{--inset:4%;min-height:590px}.cell{grid-template-columns:12px minmax(0,1fr) 38px minmax(0,1fr) 12px;height:286px}.electrode{padding:10px 3px}.title{font-size:.78rem}.material,.reaction{font-size:.7rem}.electrolyte-region{top:174px;right:calc(var(--inset) + 12px);left:calc(var(--inset) + 12px);height:262px}.ion-lane{top:277px;right:calc(var(--inset) + 14px);left:calc(var(--inset) + 14px)}.ion-label{top:468px}.flow{top:74px}}
@media(prefers-reduced-motion:reduce){.particle{display:none!important}}