/* 从杠杆到量子 · 共用样式
   Layout: 单栏长文（约 42rem）+ 可外扩的图与演示；宽屏左侧固定目录。
   颜色以光谱线命名：Hβ 486 nm、Na D 589 nm、Hα 656 nm、Hg 546 nm。 */
:root{
  --paper:#F3F6F7;      /* 实验记录本的冷白纸 */
  --paper-2:#E5EBEE;
  --grid:#D6E0E5;       /* 坐标纸格线 */
  --ink:#121820;
  --ink-2:#4F5A64;
  --rule:#CAD3D9;
  --hb:#17608F;         /* Hβ 486 nm：链接、主色 */
  --na:#9A6200;         /* 钠 D 线 589 nm：小标题、年代 */
  --ha:#B3261E;         /* Hα 656 nm：误解、警示 */
  --hg:#2C7A4B;         /* 汞 546 nm：“它怎么改变了世界” */
  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(18,24,32,.07),0 10px 28px rgba(18,24,32,.08);
  --f-display:"Noto Serif SC","Songti SC","SimSun",serif;
  --f-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","Consolas","Menlo",monospace;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --measure:42rem; --wide:68rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1317; --paper-2:#172027; --grid:#1D2830; --ink:#E3E9EE; --ink-2:#9AA7B2; --rule:#26313A;
  --hb:#7DC0EE; --na:#EFB24A; --ha:#F28270; --hg:#6CD298; --on-accent:#0E1317;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E1317; --paper-2:#172027; --grid:#1D2830; --ink:#E3E9EE; --ink-2:#9AA7B2; --rule:#26313A;
  --hb:#7DC0EE; --na:#EFB24A; --ha:#F28270; --hg:#6CD298; --on-accent:#0E1317;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.9;
  padding-inline:16px;padding-block:0 4rem;-webkit-font-smoothing:antialiased}
a{color:var(--hb);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--na);outline-offset:2px}
img{max-width:100%;display:block}
.latin{font-family:var(--f-math);font-style:italic;font-size:1.06em}
.mono,.yr{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.yr{color:var(--na);font-size:.9em;font-weight:500}
.m{font-family:var(--f-math);font-style:italic;font-size:1.12em;white-space:nowrap}
.m .u{font-style:normal}

/* ---------- 骨架 ---------- */
.page{max-width:var(--wide);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1180px){.page{max-width:calc(var(--wide) + 15rem);grid-template-columns:13rem minmax(0,1fr);gap:2rem}}
.toc{display:none}
@media (min-width:1180px){
  .toc{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + 1.5rem);align-self:start;
    max-height:calc(100vh - 3rem);overflow:auto;padding-top:8rem;font-size:13px;line-height:1.6}
  .toc b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2);font-weight:500;margin-bottom:.6rem}
  .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
  .toc a{color:var(--ink-2);text-decoration:none;display:block;padding:.22rem .7rem;border-left:2px solid var(--rule)}
  .toc a:hover{color:var(--ink)}
  .toc a.on{color:var(--hb);border-left-color:var(--hb)}
}
main{min-width:0}
.col{max-width:var(--measure);margin-inline:auto}
.wide{max-width:var(--wide);margin-inline:auto}

/* ---------- 顶栏与标题 ---------- */
.course{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  justify-content:space-between;padding-block:1.1rem;border-bottom:1px solid var(--rule)}
.course a{color:var(--ink-2);text-decoration:none}
.course a:hover{color:var(--ink)}
.hero{padding-block:3rem 2rem;position:relative}
.hero::before{content:"";position:absolute;inset:0 -16px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.hero .no{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--na);font-weight:500}
.hero h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1.12;margin:.6rem 0 1rem;text-wrap:balance;letter-spacing:.01em}
.hero .dek{font-size:1.18rem;color:var(--ink-2);max-width:36rem;margin:0;line-height:1.75}
.hero .meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}

/* 氢原子巴耳末线光谱条：课程的标志 */
.spectrum{margin-top:1.8rem;max-width:30rem}
.spectrum svg{display:block;width:100%;height:auto;overflow:visible}
.spectrum text{font-family:var(--f-mono);font-size:9px;fill:var(--ink-2)}

/* ---------- 正文 ---------- */
section{padding-top:2.5rem}
h2{font-family:var(--f-display);font-weight:900;font-size:clamp(1.65rem,3.6vw,2.25rem);line-height:1.3;margin:2.5rem 0 1rem;text-wrap:balance}
h2 .k{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--na);font-weight:500;margin-bottom:.4rem}
h3{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.45;margin:2.4rem 0 .6rem;text-wrap:balance}
h3 .yr{display:block;font-size:13px;margin-bottom:.15rem}
h4{font-size:13px;letter-spacing:.12em;color:var(--hb);font-weight:700;margin:1.8rem 0 .4rem}
p{margin:0 0 1.1rem}
strong{font-weight:700}
.ref{font-family:var(--f-mono);font-size:10.5px;vertical-align:super;text-decoration:none;margin-left:1px}
.term{border-bottom:1px dotted var(--na)}
hr.break{border:0;border-top:1px solid var(--rule);margin:3rem auto;max-width:var(--measure)}
.lead{font-size:1.08rem}
blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--na);font-family:var(--f-display);font-size:1.1rem;line-height:1.85}
blockquote cite{display:block;font-family:var(--f-body);font-style:normal;font-size:13px;color:var(--ink-2);margin-top:.4rem}

/* 旁注、误解、改变世界 */
.note,.myth,.world{padding:1rem 1.2rem;margin:1.6rem 0;font-size:15.5px;line-height:1.85;background:var(--paper-2)}
.note b.t,.myth b.t,.world b.t{display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;margin-bottom:.35rem;font-weight:500}
.note b.t{color:var(--na)}
.myth{border-top:2px solid var(--ha)} .myth b.t{color:var(--ha)}
.world{border-top:2px solid var(--hg)} .world b.t{color:var(--hg)}
.note p:last-child,.myth p:last-child,.world p:last-child{margin-bottom:0}
.note ul,.myth ul,.world ul{margin:.3rem 0 0;padding-left:1.2rem}

/* 公式块：公式 + 逐个符号的读法 */
.eq{margin:1.6rem 0;border:1px solid var(--rule);background:var(--paper)}
.eq .f{font-family:var(--f-math);font-size:clamp(1.5rem,4vw,2rem);text-align:center;padding:1rem .5rem .6rem;font-style:italic;letter-spacing:.02em}
.eq .f .u{font-style:normal}
.eq dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1rem;padding:.8rem 1.1rem 1rem;border-top:1px dashed var(--rule);font-size:15px;line-height:1.7}
.eq dt{font-family:var(--f-math);font-style:italic;font-size:1.12em;color:var(--hb);text-align:right}
.eq dd{margin:0}
.eq .say{padding:.6rem 1.1rem .9rem;font-size:15px;color:var(--ink-2);border-top:1px dashed var(--rule)}

/* 时间线列表 */
.tl{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.15rem}
.tl li{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.7}
.tl .yr{padding-top:.1rem}

/* ---------- 图 ---------- */
figure{margin:2rem 0}
figure img{cursor:zoom-in;background:var(--paper-2)}
figcaption{font-size:13px;color:var(--ink-2);margin-top:.55rem;line-height:1.65}
figcaption b{color:var(--ink);font-weight:700}
figcaption .cr{display:block;font-family:var(--f-mono);font-size:11px;opacity:.85;margin-top:.2rem}
.fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem;align-items:start}
.fig-row figure{margin:0;min-width:0}
.pin{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.35rem;font-size:14.5px;line-height:1.65}
.pin li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.5rem}
.pin li::before{content:attr(data-n);font-family:var(--f-mono);font-size:11px;font-weight:500;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--hb);color:var(--on-accent);display:grid;place-items:center;margin-top:.2rem}

/* ---------- 交互演示 ---------- */
.demo{margin:2rem 0;border:1px solid var(--rule);background:var(--paper);box-shadow:var(--shadow)}
.demo header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;padding:.7rem 1rem;border-bottom:1px solid var(--rule)}
.demo header b{font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.demo header span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--na)}
.demo .stage{padding:.6rem;overflow-x:auto}
.demo .stage svg{display:block;width:100%;height:auto;min-width:0}
.demo .ctl{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.7rem 1rem;border-top:1px solid var(--rule);font-size:14px}
.demo .ctl label{display:flex;align-items:center;gap:.5rem;color:var(--ink-2)}
.demo .ctl input[type=range]{accent-color:var(--hb);width:9rem}
.demo .out{padding:.7rem 1rem .9rem;border-top:1px dashed var(--rule);font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.demo .out strong{color:var(--ink)}
.btn{font:inherit;font-size:14px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);padding:.35rem .85rem;cursor:pointer;border-radius:3px}
.btn:hover{border-color:var(--hb)}
.btn[aria-pressed=true]{background:var(--hb);color:var(--on-accent);border-color:var(--hb)}
.btn.go{background:var(--hb);color:var(--on-accent);border-color:var(--hb)}
.seg{display:inline-flex;gap:0}
.seg .btn{border-radius:0}
.seg .btn:first-child{border-radius:3px 0 0 3px}
.seg .btn:last-child{border-radius:0 3px 3px 0}
.seg .btn+.btn{border-left:0}

/* 宽图表容器 */
.scroll-x{overflow-x:auto;margin:1.5rem 0}
.chart text{font-family:var(--f-mono);fill:var(--ink-2)}
.chart .lane-name{font-family:var(--f-body);font-size:13px;fill:var(--ink);font-weight:700}

/* 单元卡 */
.units{list-style:none;padding:0;margin:1.5rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.units li{background:var(--paper);padding:.9rem 1rem;min-width:0}
.units b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.units .r{font-family:var(--f-mono);font-size:11.5px;color:var(--na);letter-spacing:.06em}
.units p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:.35rem 0 0}

/* 章节结构表 */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.6rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;font-size:15.5px;line-height:1.75}
.steps li::before{content:counter(s);font-family:var(--f-mono);color:var(--na);font-weight:500;text-align:right}

/* ---------- 自测与来源 ---------- */
.quiz details{border-bottom:1px solid var(--rule);padding:.8rem 0}
.quiz summary{cursor:pointer;font-weight:700;line-height:1.7;list-style-position:outside}
.quiz details>div{padding-top:.5rem;font-size:15.5px;color:var(--ink-2)}
.src{font-size:13.5px;line-height:1.75;padding-left:1.4rem;color:var(--ink-2)}
.src li{margin-bottom:.35rem;overflow-wrap:anywhere}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:15px}
.next a{text-decoration:none}
.next small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);letter-spacing:.1em}

/* ---------- 看大图 ---------- */
[hidden]{display:none!important}
.lb{position:fixed;inset:0;z-index:50;background:rgba(8,11,14,.94);display:flex;flex-direction:column}
.lb .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + .6rem) 1rem .6rem;color:#E3E9EE;font-size:13px}
.lb .bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb button{font:inherit;font-size:13px;background:transparent;color:#E3E9EE;border:1px solid rgba(255,255,255,.35);padding:.3rem .8rem;cursor:pointer}
.lb .stage{flex:1;overflow:auto;display:grid;place-items:center;padding:0 1rem 1rem}
.lb .stage img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.lb .stage.zoom{display:block}
.lb .stage.zoom img{max-width:none;max-height:none;cursor:zoom-out}

/* ---------- 打印 / PDF ---------- */
@media print{
  @page{size:A4;margin:16mm 14mm}
  :root{--paper:#fff;--paper-2:#F1F4F5}
  body{font-size:11pt;line-height:1.75;padding:0}
  .toc,.lb,.demo .ctl,.no-print{display:none!important}
  .page{display:block;max-width:none}
  .hero::before{display:none}
  .demo{box-shadow:none;break-inside:avoid}
  figure,.eq,.note,.myth,.world,.units li,.tl li{break-inside:avoid}
  h2,h3{break-after:avoid}
  a{color:inherit;text-decoration:none}
  .quiz details>div{display:block}
}