.concept-figure { margin:28px 0; background:#edf1f4; border:1px solid #d5dfe5; border-radius:12px; padding:28px 22px 18px; }
.concept-figure figcaption { font-size:11px; color:#5c6f7c; line-height:1.8; margin-top:22px; text-align:center; word-break:keep-all; }
.flow-blocks { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:15px 0; }
.flow-blocks>span { padding:15px 18px; border:1px solid #bdccd7; background:var(--white); border-radius:7px; font-size:13px; }
.flow-blocks b { color:var(--blue); font-size:22px; }
.flow-blocks .charge-blue { color:var(--blue); background:#e4eafa; }
.flow-blocks .wire-box { background:#e0b49d; border-color:#b8886b; }
.circuit-model { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:16px 0; }
.circuit-model>span { font-size:12px; padding:12px 8px; }
.circuit-model b { color:var(--blue); }
.circuit-model .bulb-symbol { background:var(--lime); border:1px solid #b9c348; border-radius:50%; width:60px; height:60px; display:grid; place-items:center; }
.atom-comparison { display:flex; align-items:center; justify-content:center; gap:32px; }
.atom-comparison>div:not(.atom-divider) { text-align:center; }
.atom-symbol { height:96px; width:96px; border:1px dashed #98afc3; border-radius:50%; display:grid; place-items:center; position:relative; margin:0 auto 13px; }
.atom-symbol>span { display:grid; place-items:center; background:#d99987; color:#47251d; border-radius:50%; width:34px; height:34px; font-size:22px; }
.atom-symbol>i { position:absolute; right:-9px; top:35px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--blue); color:white; font-style:normal; }
.ion-symbol { border-color:transparent; }
.atom-comparison strong { font:27px Georgia,serif; }
.atom-comparison small { display:block; margin-top:10px; font-size:11px; color:var(--muted); line-height:1.8; }
.atom-divider { font-size:11px; color:var(--muted); }
.molecule-model,.sharing-model { display:flex; align-items:center; justify-content:center; gap:15px; padding:15px 0; }
.hydrogen-ball,.paired-hydrogen i { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#e6edfd; border:1px solid #9cb4e6; color:#254fa4; font:25px Georgia,serif; flex-shrink:0; }
.molecule-model>b { font-size:20px; color:#74899a; }
.paired-hydrogen { display:flex; }
.paired-hydrogen i { font-style:normal; }
.paired-hydrogen i+i { margin-left:-9px; }
.formula-label { margin-top:18px; text-align:center; font-size:16px; color:#304f68; }
.meeting-model { display:flex; justify-content:center; align-items:center; gap:16px; padding:12px 0; }
.meeting-model>div { display:grid; gap:10px; }
.meeting-model>div>span { background:var(--white); padding:12px; font-size:12px; border-radius:5px; }
.meeting-model>b { color:var(--blue); }
.reaction-place { background:var(--lime); border:1px solid #c5cf76; padding:30px 15px; font-size:13px; border-radius:6px; }
.product-gas { font:30px Georgia,serif; color:var(--blue); }
.water-model { display:flex; gap:28px; justify-content:center; align-items:center; }
.water-origin { padding:24px 18px; background:#dce9f5; border-radius:8px; font-size:17px; }
.water-model>b { color:var(--blue); }
.water-model>div { display:grid; gap:8px; }
.water-model>div>span { display:flex; align-items:center; gap:15px; font:19px Georgia,serif; padding:9px 14px; background:var(--white); border-radius:5px; }
.water-model small { font:11px "Malgun Gothic",sans-serif; color:var(--muted); }
.oxygen-ball { display:grid; place-items:center; width:65px; height:65px; background:#d99f8f; border:1px solid #b47969; border-radius:50%; font:30px Georgia,serif; flex-shrink:0; }
.shared-bond { display:grid; gap:8px; text-align:center; }
.shared-bond i { color:var(--blue); font-size:13px; letter-spacing:3px; font-style:normal; }
.shared-bond small { color:var(--muted); font-size:9px; }
.one-idea { border-left:3px solid #9eae3d; padding:16px 20px; background:#edf0d7; margin:25px 0; }
.one-idea>span { display:block; font-size:10px; color:#62712e; font-weight:700; margin-bottom:8px; }
.one-idea>p { font-size:16px; font-weight:600; line-height:1.8; }
.reading-guide { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.reading-guide strong { font-size:12px; color:var(--blue); letter-spacing:.5px; }
.reading-guide p { font-size:12px; color:var(--muted); margin:8px 0 12px; }
.reading-guide a { font-size:12px; }
.study-nav .nav-note button { background:none; font-size:11px; margin-top:12px; text-decoration:underline; min-height:44px; }
.system-scale { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px; background:#eaf0e9; border-radius:10px; margin:25px 0; }
.system-scale span { font-size:16px; font-weight:650; }
.system-scale small { display:block; font-size:10px; font-weight:400; margin-top:8px; color:var(--muted); }
.system-scale b { color:var(--blue); }
.core-flow { padding:24px 0; font-size:14px; }
.core-flow p+p { margin-top:12px; }
.two-paths,.surface-stories { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.two-paths>div,.surface-stories>article { padding:24px; background:var(--white); border:1px solid var(--line); border-radius:12px; }
.two-paths span,.surface-stories span { font-size:10px; color:var(--blue); display:block; margin-bottom:15px; }
.two-paths strong { font-size:15px; display:block; margin-bottom:15px; }
.two-paths p,.surface-stories p { font-size:13px; color:var(--muted); }
.surface-stories h3 { font-size:17px; margin-bottom:14px; }
.layer-strip { display:grid; grid-template-columns:1fr 1.3fr 1fr .7fr; gap:6px; margin-top:25px; }
.layer-strip>div { padding:30px 8px; text-align:center; border:1px solid #c2ccd1; background:#e8edf1; border-radius:5px; }
.layer-strip small { display:block; font-size:10px; color:var(--muted); margin-bottom:13px; }
.layer-strip strong { font-size:15px; }
.layer-strip .ti-part { background:#e5edb0; border-color:#9eaf4b; }
.layer-strip .membrane-part { background:#dbe9f5; }
.annotation-shelf { margin:28px 0; border-top:2px solid #b9c9a7; }
.annotation-label { font-size:11px; color:var(--muted); padding:17px 0 10px; }
.study-annotation { scroll-margin-top:110px; }
.study-annotation>summary { display:flex; align-items:flex-start; gap:12px; font-size:14px; padding:17px 30px 17px 0; }
.depth-tag { flex-shrink:0; font-size:9px; font-weight:500; background:#e9eddf; border:1px solid #d0d8c4; border-radius:20px; padding:3px 8px; margin-top:2px; }
.annotation-body { padding:8px 22px 24px; border-left:2px solid #c8d6be; margin-bottom:20px; }
.annotation-body>p { font-size:14px; line-height:1.9; margin-bottom:13px; }
.question-voice { font-size:12px; line-height:1.8; color:var(--muted); background:#edf0e5; padding:13px 17px; margin:0 0 18px; border-left:3px solid #a8bb91; }
.annotation-depth { margin-top:12px; }
.annotation-depth summary { font-size:12px; }
.annotation-depth .details-body { padding-right:4px; }
.annotation-depth ol { padding-left:21px; line-height:1.9; }
.evidence-limit { border-left:2px solid #b8bdaf; padding-left:12px; }
.annotation-record { border-top:1px dashed var(--line); padding-top:20px; }
.annotation-record label { display:block; margin:18px 0 8px; font-size:11px; color:var(--muted); }
.annotation-record textarea { min-height:80px; font-size:12px; }
.annotation-permalink { display:inline-block; margin-top:10px; font-size:10px; }
.annotation-status { color:var(--muted); font-size:11px; margin:0 0 15px; }
.closing-connection { padding:26px; margin-top:35px; font-size:18px; font-weight:600; line-height:2; background:#eaf0e9; border-radius:12px; }
.legacy-body { max-width:650px; margin:15vh auto; padding:25px; }
.legacy-body h1 { font-size:28px; margin-bottom:20px; }
@media(max-width:700px) {
 .two-paths,.surface-stories { grid-template-columns:1fr; }
 .system-scale { gap:10px; padding:18px 12px; }
 .system-scale span { font-size:13px; }
 .system-scale small { font-size:9px; max-width:100px; line-height:1.8; }
 .layer-strip strong { font-size:12px; }
 .layer-strip small { font-size:9px; }
 .layer-strip>div { padding:22px 5px; }
 .study-annotation>summary { flex-wrap:wrap; gap:6px; }
 .study-annotation>summary>span:last-child { width:100%; }
 .annotation-body { padding:8px 10px 22px; }
 .annotation-body>p { font-size:13px; }
 .concept-figure { padding:20px 10px 15px; }
 .concept-figure figcaption { font-size:10px; }
 .flow-blocks { gap:6px; }
 .flow-blocks>span { font-size:10px; padding:10px 8px; }
 .flow-blocks b { font-size:16px; }
 .atom-comparison { gap:14px; }
 .atom-symbol { width:70px; height:70px; }
 .atom-symbol>i { top:24px; }
 .atom-divider { font-size:9px; }
 .molecule-model,.sharing-model { gap:6px; }
 .hydrogen-ball,.paired-hydrogen i { width:30px; height:30px; font-size:20px; }
 .oxygen-ball { width:40px; height:40px; font-size:24px; }
 .shared-bond small { font-size:8px; }
 .shared-bond i { font-size:10px; letter-spacing:0; }
 .meeting-model { gap:6px; flex-wrap:wrap; }
 .meeting-model>div>span { font-size:10px; padding:10px 6px; }
 .reaction-place { padding:20px 8px; font-size:11px; }
 .water-model { gap:10px; }
 .water-origin { padding:18px 10px; font-size:13px; }
 .water-model>div>span { font-size:15px; padding:8px; gap:8px; }
 .water-model small { font-size:10px; }
 .closing-connection { font-size:15px; padding:20px; }
}
@media(max-width:800px) { .study-annotation { scroll-margin-top:160px; } }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } }

/* The main story and its notes share a readable text size at every width. */
.lessons { min-width:0; }
.study-nav nav a span,.material-copy article>span { flex-shrink:0; white-space:nowrap; }
.hero-intro,.section-intro,.plain-explanation,.story-copy p,
.core-flow p,.reaction-steps,.two-paths p,.surface-stories p,
.material-copy p,.details-body,.annotation-body>p,.one-idea p,
.takeaway p,.part-detail p,.use-grid p,.next-study li,
.photo-grid p,.quiz-question,.quiz-options button,.quiz-feedback {
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  overflow-wrap:break-word;
}
.lesson h3,.story-copy h3 { font-size:20px; line-height:1.55; }
.story-copy { margin:28px 0; }
.story-copy h3,.story-copy p,.core-flow p { margin-bottom:18px; }
.reaction-steps { padding-left:25px; }
.reaction-steps li { padding-left:5px; margin-bottom:20px; }
.lesson summary,.annotation-depth summary,.study-annotation>summary {
  font-size:16px;
  line-height:1.7;
  padding-block:18px;
}
.source-line,.source-line a,.image-note,.hero-figure figcaption,
.photo-grid figcaption a,.annotation-label,.question-voice,
.annotation-record label,.annotation-status,.annotation-permalink,
.concept-figure figcaption,.experiment-caption,.reading-guide p {
  font-size:14px;
  line-height:1.8;
}
.source-line a { overflow-wrap:anywhere; }
.depth-tag { font-size:12px; }
.annotation-record textarea,.personal-note textarea { font-size:16px; line-height:1.8; }
.complete-button,.part-tabs button,.power-button,.experiment-label { font-size:14px; min-height:44px; }
.part-tabs { flex-wrap:wrap; }
.part-detail { min-height:0; }
.part-detail h3 { font-size:18px; }
.reading-guide a { display:inline-block; margin:12px 18px 0 0; font-size:14px; }
.research-index { border:1px solid var(--line); border-radius:14px; padding:24px; margin-bottom:42px; background:var(--white); scroll-margin-top:160px; }
.research-index h2 { font-size:22px; line-height:1.5; margin-bottom:12px; }
.research-index p { font-size:16px; margin-bottom:16px; }
.research-index nav,.research-docs { display:flex; flex-wrap:wrap; gap:10px; margin-block:18px; }
.research-index a { font-size:15px; line-height:1.6; padding:10px 12px; border:1px solid #bdcbb7; border-radius:7px; background:#f0f4e9; }
.research-docs { padding-top:16px; border-top:1px solid var(--line); }
.research-docs a { background:#f1f3f5; border-color:#c7d0d7; }
.research-index .image-note { font-size:14px; margin-bottom:0; }
.plant-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.plant-flow>div { padding:18px; border:1px solid #bdccd7; border-radius:10px; background:var(--white); }
.plant-flow strong { display:block; margin-bottom:12px; font-size:17px; line-height:1.5; }
.plant-flow p { margin-bottom:0; }
.system-scale small { font-size:14px; line-height:1.7; max-width:none; }
.system-scale span,html[lang="en"] .system-scale span { min-width:0; font-size:16px; }
.photo-grid.stack-photo { grid-template-columns:minmax(0,1fr); }
.stack-photo figure { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; }
.photo-grid.material-photos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-block:28px; }
.photo-grid.material-photos .image-button { aspect-ratio:1.2; }
.layer-strip { grid-template-columns:minmax(0,1fr); gap:10px; counter-reset:cell-layer; }
.layer-strip>div { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:14px; padding:16px 20px; text-align:left; }
.layer-strip>div::before { counter-increment:cell-layer; content:counter(cell-layer); grid-row:1/3; align-self:center; font-size:20px; color:#4d5d6a; }
.layer-strip strong,html[lang="en"] .layer-strip strong { font-size:17px; line-height:1.6; }
.layer-strip small { font-size:15px; line-height:1.7; margin:3px 0 0; color:#42515c; }
.layer-strip .catalyst-part { background:#f8e4df; border-color:#c38b7c; }
.acidity-explanation { padding:24px; border-left:4px solid #8ca9c5; background:#edf2f6; border-radius:0 12px 12px 0; }
.acidity-explanation p:last-child { margin-bottom:0; }

/* A cell cross-section: channels have no tank-like waterline. */
.cell-diagram { height:330px; }
.chamber { top:85px; height:150px; }
.oxygen-chamber { left:6%; width:36%; background:#e0edf2; }
.hydrogen-chamber { left:60%; width:34%; background:#e8edf7; }
.chamber-label { bottom:12px; padding:4px; font-size:13px; }
.chamber-label strong { font-size:13px; }
.titanium-layer { top:85px; left:42%; width:6%; height:150px; }
.reaction-layer { top:85px; height:150px; width:2%; background:#b9614a; }
.left-reaction { left:48%; }
.right-reaction { left:58%; }
.membrane { left:50%; width:8%; top:75px; height:170px; font-size:12px; background:#c6def3; border-color:#8baecb; }
.proton { top:55px; font-size:13px; }
.gas-label { top:0; font-size:14px; gap:6px; }
.gas-label>span { font-size:24px; }
.oxygen-label { left:6%; }
.hydrogen-label { left:60%; }
.water-feed { left:6%; top:48px; font-size:14px; }
.water-feed span { font-size:19px; }
.power-wire { top:235px; left:24%; width:52%; height:45px; }
.power-wire span { width:max-content; max-width:100%; top:32px; font-size:14px; color:var(--ink); padding:6px 10px; border:1px solid #95a3b0; border-radius:6px; background:var(--white); }
.power-wire::before,.power-wire::after { position:absolute; top:8px; font-size:14px; color:var(--blue); }
.power-wire::before { content:'e⁻ ↓'; left:-36px; }
.power-wire::after { content:'e⁻ ↑'; right:-36px; }
.diagram-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; font-size:14px; line-height:1.6; margin:10px 0 20px; }
.diagram-legend span::before { content:''; display:inline-block; width:12px; height:12px; margin-right:7px; border:1px solid #61717c; }
.legend-ti::before { background:#e7e99d; }
.legend-catalyst::before { background:#b9614a; }
.legend-membrane::before { background:#c6def3; }

@media(max-width:850px) {
  .plant-flow { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:700px) {
  .research-index,.acidity-explanation { padding:20px 16px; }
  .system-scale { flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
  .system-scale>b { align-self:center; transform:rotate(90deg); }
  .system-scale span,html[lang="en"] .system-scale span { font-size:18px; }
  .system-scale small { font-size:14px; }
  .stack-photo figure,.photo-grid.material-photos { grid-template-columns:minmax(0,1fr); }
  .stack-photo .image-button { max-width:440px; margin-inline:auto; }
  .layer-strip>div { padding:14px; }
  .cell-diagram { height:340px; }
  .gas-label { display:block; max-width:36%; font-size:13px; line-height:1.4; }
  .gas-label>span { display:block; font-size:21px; }
  .gas-label .flow-arrow { position:absolute; top:0; right:0; font-size:18px; }
  .water-feed { top:56px; font-size:13px; }
  .chamber-label,.chamber-label strong { font-size:12px; }
  .power-wire span { font-size:13px; }
  .diagram-legend { justify-content:flex-start; }
  .annotation-body { padding-inline:12px 4px; }
}
.zoom-link-wrap { margin:0; }
.zoom-link { display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:10px 16px; border:1px solid #9eaf4b; border-radius:30px; background:#e5edb0; font-size:14px; font-weight:650; text-decoration:none; }