:root { color-scheme: light; --paper:#f5f4ef; --surface:#fbfaf6; --ink:#222824; --muted:#687069; --line:#cfd3cc; --line-strong:#9fa79f; --accent:#245b49; --accent-soft:#e2ebe5; --accent-strong:#173f32; --electrode:#4d5964; --electrode-dark:#27343d; --solution:#d9edf0; --ion:#2a7180; --heat:#b94c35; --danger:#9b2f2f; --danger-soft:#f8e9e7; font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); line-height:1.65; }
button,input,select { font:inherit; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.eyebrow,.section-kicker { margin:0 0 5px; color:var(--accent); font-size:.78rem; font-weight:780; letter-spacing:.08em; text-transform:uppercase; }
h2 { margin:0; font-size:clamp(1.2rem,2vw,1.48rem); line-height:1.35; }
.tool-shell { display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr); border:1px solid var(--line-strong); background:var(--surface); }
.calculator-panel,.visual-panel { min-width:0; padding:24px; }
.calculator-panel { border-right:1px solid var(--line); }
.mode-fieldset,.values-fieldset { margin:17px 0 0; padding:0; border:0; }
.mode-fieldset legend,.values-fieldset legend { margin-bottom:8px; font-weight:760; }
.values-fieldset { margin-top:20px; }
.mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mode-option { position:relative; display:block; cursor:pointer; }
.mode-option input { position:absolute; opacity:0; }
.mode-option span { min-height:48px; display:grid; place-items:center; padding:7px 8px; border:1px solid var(--line); background:var(--surface); color:var(--muted); text-align:center; font-size:.87rem; font-weight:700; line-height:1.35; }
.mode-option input:checked + span { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.mode-option input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.input-grid { display:grid; gap:14px; }
.input-row label,.output-unit-row label { display:block; margin-bottom:5px; font-weight:720; }
.input-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(104px,.42fr); align-items:stretch; gap:6px; }
.input-wrap input,.input-wrap select,.output-unit-row select { width:100%; min-width:0; min-height:44px; border:1px solid var(--line-strong); border-radius:2px; padding:9px 10px; color:var(--ink); background:var(--surface); }
.input-wrap input[aria-invalid="true"] { border-color:var(--danger); background:#fff8f8; }
.field-help { margin:4px 0 0; color:var(--muted); font-size:.78rem; }
.field-error { min-height:1.25em; margin:2px 0 0; color:var(--danger); font-size:.82rem; }
.output-unit-row { margin-top:15px; }
.form-error { margin:12px 0 0; padding:8px 10px; border-left:4px solid var(--danger); background:var(--danger-soft); color:#762525; }
.form-error[hidden] { display:none; }
.form-actions { display:flex; gap:8px; margin-top:17px; }
.button { min-height:42px; border:1px solid var(--accent); border-radius:2px; padding:8px 15px; cursor:pointer; font-weight:760; }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-strong); }
.button-secondary { background:var(--surface); color:var(--accent); }
.button:hover:not(:disabled) { border-color:var(--ink); }
.result-box { margin-top:20px; padding:15px 16px; border:1px solid var(--accent); border-left-width:4px; background:var(--accent-soft); }
.result-box[data-state="error"] { border-color:var(--danger); background:var(--danger-soft); }
.result-label { margin:0; color:var(--accent); font-size:.8rem; font-weight:780; }
.result-box[data-state="error"] .result-label { color:var(--danger); }
.result-value { display:block; margin-top:2px; font-size:clamp(1.45rem,3.2vw,2.05rem); line-height:1.28; font-weight:780; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.result-status { margin:5px 0 0; color:#3f4c46; font-size:.9rem; overflow-wrap:anywhere; }
.result-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:14px 0 0; border-top:1px solid rgba(36,91,73,.35); border-left:1px solid rgba(36,91,73,.35); }
.result-details[hidden] { display:none; }
.result-details div { min-width:0; padding:9px 10px; border-right:1px solid rgba(36,91,73,.35); border-bottom:1px solid rgba(36,91,73,.35); }
.result-details .detail-wide { grid-column:1 / -1; }
.result-details dt { color:var(--muted); font-size:.76rem; font-weight:760; }
.result-details dd { margin:2px 0 0; font-size:.86rem; font-weight:650; overflow-wrap:anywhere; }
.visual-heading-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.status-badge { flex:0 0 auto; padding:3px 8px; border:1px solid var(--line-strong); background:var(--paper); color:var(--muted); font-size:.75rem; font-weight:760; }
.status-badge[data-state="ready"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.visual-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:15px 0 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.visual-metrics div { min-width:0; padding:9px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.visual-metrics dt { color:var(--muted); font-size:.75rem; font-weight:750; }
.visual-metrics dd { margin:2px 0 0; font-size:.85rem; font-weight:700; overflow-wrap:anywhere; }
.visual-stage { min-height:316px; display:grid; place-items:center; margin-top:15px; padding:24px 12px 18px; overflow:hidden; border:1px solid var(--line-strong); background:linear-gradient(180deg,#fbfaf6 0%,#edf2f2 100%); }
.electro-figure { width:100%; max-width:490px; margin:0; display:grid; grid-template-columns:58px minmax(130px,1fr) 58px; grid-template-rows:minmax(184px,auto) auto auto; align-items:center; justify-items:center; gap:12px 9px; --potential-level:52%; --deposit-level:50%; }
.electrode { position:relative; align-self:stretch; min-height:175px; width:38px; border:3px solid var(--electrode-dark); border-radius:4px; background:linear-gradient(90deg,#7b8790,#d0d7d8 46%,#697680); box-shadow:inset 0 0 0 3px rgba(255,255,255,.22); }
.electrode-left { justify-self:end; }
.electrode-right { justify-self:start; }
.electrode-label { position:absolute; top:50%; left:50%; width:86px; transform:translate(-50%,-50%) rotate(-90deg); padding:2px 4px; border:1px solid rgba(39,52,61,.42); background:rgba(251,250,246,.9); color:var(--electrode-dark); font-size:.69rem; font-weight:760; text-align:center; overflow-wrap:anywhere; }
.solution { position:relative; align-self:stretch; width:100%; min-height:154px; border:3px solid #2a7180; border-radius:14px 14px 25px 25px; background:linear-gradient(180deg,rgba(217,237,240,.64),rgba(180,220,225,.88)); overflow:hidden; }
.solution::before { content:""; position:absolute; right:8%; bottom:8%; left:8%; height:3px; background:rgba(42,113,128,.35); border-radius:50%; }
.ion { position:absolute; width:22px; height:22px; display:grid; place-items:center; border:1px solid #2a7180; border-radius:50%; background:#f3fbfc; color:#2a7180; font-size:.72rem; font-weight:800; }
.ion-one { top:22%; left:22%; }.ion-two { top:42%; right:22%; }.ion-three { bottom:22%; left:36%; }.ion-four { right:37%; bottom:18%; }
.solution-label { position:absolute; right:4%; bottom:3%; left:4%; padding:2px 4px; border:1px solid rgba(42,113,128,.42); background:rgba(251,250,246,.86); color:#205b67; font-size:.7rem; font-weight:760; text-align:center; overflow-wrap:anywhere; }
.electron-arrow { grid-column:1 / 4; margin-top:-2px; color:var(--accent); font-size:1.18rem; font-weight:800; }
.diagram-key { grid-column:1 / 4; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.diagram-key span { max-width:min(100%,210px); padding:1px 6px; border:1px solid rgba(36,91,73,.45); background:rgba(251,250,246,.92); color:var(--accent-strong); font-size:.73rem; font-weight:760; overflow-wrap:anywhere; }
.visual-caption { grid-column:1 / 4; margin:0; color:var(--muted); font-size:.82rem; text-align:center; overflow-wrap:anywhere; }
.visual-description { margin:11px 0 0; color:#38413b; font-size:.9rem; }
.scale-note { margin:7px 0 0; padding-left:11px; border-left:3px solid var(--line-strong); color:var(--muted); font-size:.78rem; }
.content-section { margin-top:30px; padding-top:25px; border-top:1px solid var(--line-strong); }
.section-heading { margin-bottom:15px; }
.formula-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.formula-list article { min-width:0; display:grid; gap:3px; padding:12px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.formula-list strong { overflow-wrap:anywhere; }
.formula-list span { color:var(--muted); }
.proof-guide { margin-top:18px; border:1px solid var(--line); }
.proof-guide h3 { margin:0; padding:10px 13px; border-bottom:1px solid var(--line); color:var(--accent); font-size:.92rem; }
.proof-guide ul { display:grid; grid-template-columns:repeat(2,1fr); margin:0; padding:0; list-style:none; }
.proof-guide li { padding:10px 13px 10px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.proof-guide li:nth-child(2n) { border-right:0; }.proof-guide li:nth-last-child(-n + 2) { border-bottom:0; }.proof-guide li::before { content:"—"; margin-left:-17px; margin-right:7px; color:var(--accent); }
@media (max-width:900px) { .tool-shell { grid-template-columns:1fr; }.calculator-panel { border-right:0; border-bottom:1px solid var(--line); }.formula-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .calculator-panel,.visual-panel { padding:17px 14px; }.mode-options { grid-template-columns:1fr; }.mode-option span { min-height:43px; padding:6px; font-size:.84rem; }.input-wrap { grid-template-columns:minmax(0,1fr) 92px; }.form-actions { display:grid; grid-template-columns:1fr; }.button { width:100%; }.result-details { grid-template-columns:1fr; }.result-details .detail-wide { grid-column:auto; }.visual-metrics { grid-template-columns:1fr; }.visual-stage { min-height:276px; padding-inline:7px; }.electro-figure { grid-template-columns:42px minmax(108px,1fr) 42px; gap:8px 4px; }.electrode { width:30px; min-height:150px; }.electrode-label { width:78px; font-size:.62rem; }.solution { min-height:140px; }.formula-list { grid-template-columns:1fr; }.proof-guide ul { grid-template-columns:1fr; }.proof-guide li,.proof-guide li:nth-child(2n),.proof-guide li:nth-last-child(-n + 2) { border-right:0; border-bottom:1px solid var(--line); }.proof-guide li:last-child { border-bottom:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }