:root{
  --ink:rgba(0,0,0,.8);--ink-strong:rgba(0,0,0,.9);--mute:rgba(0,0,0,.55);--faint:rgba(0,0,0,.38);
  --hair:rgba(0,0,0,.1);--hair2:rgba(0,0,0,.2);
  --accent:#2f6f9f;--accent-soft:rgba(47,111,159,.12);
  --ok:#2e7d4f;--bad:#b4432f;
  --panel:#eef4f8;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{font-size:14px;line-height:1.6em;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
body{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* Distill grid */
.g{display:grid;justify-items:stretch;grid-template-columns:[screen-start] 8px [page-start kicker-start text-start gutter-start middle-start] repeat(8,1fr) [text-end page-end gutter-end kicker-end middle-end] 8px [screen-end];column-gap:8px}
@media(min-width:768px){.g{grid-template-columns:[screen-start] 1fr [page-start kicker-start middle-start text-start] repeat(8,45px) [kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];column-gap:16px}}
@media(min-width:1000px){.g{grid-template-columns:[screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] repeat(8,50px) [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];column-gap:16px}}
@media(min-width:1180px){.g{grid-template-columns:[screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] repeat(8,60px) [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];column-gap:32px}}
.g>*{grid-column:text}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--hair);height:48px;align-items:center;font-size:13px}
.hdr>div{grid-column:text;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.hdr b{font-weight:600;color:var(--ink-strong)}
.hdr .nav{display:flex;gap:14px;color:var(--mute);align-items:center}
.hdr .nav a{text-decoration:none}
.hdr .nav a:hover{color:var(--ink-strong)}
.hdr .n{font-family:var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:4px;color:var(--ink)}
.hdr .n:hover,.hdr .n[aria-expanded="true"]{background:rgba(0,0,0,.05)}
.course{display:none;position:absolute;right:0;top:40px;width:300px;background:#fff;border:1px solid var(--hair2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:10px 0;font-size:13px;line-height:1.5}
.course.open{display:block}
.course a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 14px;text-decoration:none;color:var(--ink)}
.course a:hover{background:rgba(0,0,0,.04)}
.course a i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--faint);padding-top:2px}
.course a.now{color:var(--accent);font-weight:600}
.course a.now i{color:var(--accent)}
.course a.done{color:var(--mute)}

/* title */
.title{padding:4.5rem 0 2rem}
.title .eyebrow{font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:14px;font-weight:600}
.title h1{font-size:50px;text-wrap:balance;font-weight:700;line-height:1.15;margin:0 0 .7rem;color:var(--ink-strong);letter-spacing:-.01em}
.title p{font-weight:300;font-size:1.25rem;line-height:1.6;margin:0;color:var(--ink)}
.title .prevq{margin-top:1.4rem;font-size:13.5px;color:var(--mute)}
.title .prevq a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair2)}
.title .prevq a:hover{border-color:var(--ink)}

/* article */
.art{border-top:1px solid var(--hair);padding-top:1rem;font-size:1.06rem;line-height:1.7em}
.art h2{scroll-margin-top:64px;font-weight:600;font-size:32px;line-height:1.3em;margin:3rem 0 1.3rem;padding-bottom:.8rem;border-bottom:1px solid var(--hair);color:var(--ink-strong)}
.art h2:first-of-type{margin-top:2rem}
.art p{margin:0 0 1em}
.art q{quotes:"「" "」"}
.art strong{font-weight:600;color:var(--ink-strong)}
.art .pull{font-size:1.5rem;line-height:1.45;font-weight:600;color:var(--ink-strong);margin:1.5em 0;padding-left:1rem;border-left:3px solid var(--accent)}
.art sup.fn{font-size:11px;line-height:0;margin-left:2px}
.art sup.fn a{color:var(--accent);text-decoration:none}
.art .author-note{font-size:12px;color:var(--faint);margin-left:6px;white-space:nowrap}

/* small figure A: 100 people */
.figA{margin:1.6rem 0 1.8rem;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.people{display:grid;grid-template-columns:repeat(20,10px);gap:5px}
.people i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.12);display:block}
.people i.on{background:var(--accent)}
.figA .cap{font-size:13px;color:var(--mute);line-height:1.6}
.figA .cap b{display:block;font-size:22px;font-weight:600;color:var(--ink-strong);line-height:1.2;margin-bottom:2px}
.figA .cap small{display:block;font-size:11px;color:var(--faint);margin-top:4px}

/* evidence strip B: timeline */
.tl{margin:1.8rem 0 2rem;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.tl:before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--ink-strong)}
.tl div{position:relative;padding:20px 10px 0 0}
.tl div:before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:#fff;border:1.5px solid var(--ink-strong)}
.tl div.key:before{background:var(--ink-strong)}
.tl small{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.04em}
.tl b{display:block;font-size:20px;font-weight:600;color:var(--ink-strong);line-height:1.25;margin:2px 0 2px;white-space:nowrap}
.tl span{display:block;font-size:12px;color:var(--mute);line-height:1.5}
.tlcap{font-size:12px;color:var(--mute);margin:-1rem 0 2rem}

/* lab blocks */
.st{grid-column:screen;display:grid;grid-template-columns:minmax(380px,5fr) minmax(0,7fr);min-height:540px;margin:2.2rem auto 1.6rem;width:100%;max-width:1440px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.st .left{background:var(--panel);padding:44px 48px 40px 56px;min-width:0}
.st .left .k{font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:10px;font-weight:600}
.st .left .k em{font-style:normal;color:var(--faint);font-weight:400;margin-left:8px;letter-spacing:.04em}
.st .left h3{margin:0 0 .5rem;font-size:24px;font-weight:700;color:var(--ink-strong);line-height:1.3}
.st .left p{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 1em;max-width:30em}
.st .ctl{margin-top:22px;display:grid;gap:18px;max-width:30em}
.st label{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-bottom:4px}
.st label output{font-family:var(--mono);color:var(--ink-strong)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--hair2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);margin-top:-7px;border:2px solid #fff;box-shadow:0 0 0 1px var(--accent)}
.st .ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);font-family:var(--mono)}
.st .read{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;max-width:30em}
.st .read div{border-top:1px solid var(--hair2);padding-top:8px}
.st .read small{display:block;font-size:10px;letter-spacing:.04em;color:var(--faint);white-space:nowrap}
.st .read strong{display:block;font-size:26px;font-weight:600;color:var(--ink-strong);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.st .read strong em{font-style:normal;font-size:12px;color:var(--mute);font-weight:400;margin-left:3px}
.st .formula{margin-top:22px;font-size:12px;color:var(--mute);border-top:1px solid var(--hair2);padding-top:10px;max-width:30em}
.st .formula b{color:var(--ink);font-weight:500}
.st .right{background:#fff;padding:44px 56px 40px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.st svg{width:100%;height:auto;display:block}
.st svg text{font-family:var(--sans);font-size:11px;fill:var(--mute)}
.st .seg{display:inline-flex;border:1px solid var(--hair2);border-radius:6px;overflow:hidden}
.st .seg button{padding:6px 12px;font-size:12px;color:var(--mute);border-right:1px solid var(--hair2)}
.st .seg button:last-child{border-right:0}
.st .seg button.on{background:var(--accent);color:#fff}
.st .segrow{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:18px}
.st .segrow small{font-size:11px;color:var(--faint);letter-spacing:.06em;display:block;margin-bottom:4px}
.st .bigread{margin-top:26px}
.st .bigread strong{font-size:40px;font-weight:700;color:var(--ink-strong);line-height:1.1;display:block;font-variant-numeric:tabular-nums}
.st .bigread span{font-size:13px;color:var(--mute)}
.st .bigread .alt{display:block;margin-top:8px;font-size:14px;color:var(--mute)}
.st .bigread .alt strong{font-size:20px;color:var(--mute);display:inline;margin-right:6px}
.st.st2{min-height:0}
.st .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;max-width:30em}
.st .two div{border-top:2px solid var(--ink-strong);padding-top:10px}
.st .two div+div{border-top-color:var(--accent)}
.st .two small{display:block;font-size:12px;color:var(--mute);white-space:nowrap}
.st .two strong{display:block;font-size:40px;font-weight:700;color:var(--ink-strong);line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.st .two strong em{font-style:normal;font-size:14px;color:var(--mute);font-weight:400;margin-left:4px}
.st .two div+div strong{color:var(--accent)}
.st .diff{font-size:14px;color:var(--ink);margin-top:18px;max-width:30em}
.act{display:grid;gap:3px 0;width:100%;font-size:12px;color:var(--mute);align-items:center;max-width:760px}
.act .hd{text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);padding-bottom:8px;align-self:end}
.act .hd.n{color:var(--ink-strong);font-weight:600}
.act .hd.res{font-size:12px;font-family:var(--sans);color:var(--ink-strong);font-weight:600;line-height:1.3;text-align:center;padding:0 6px 8px}
.act .hd.res b{display:block;font-size:18px;font-weight:700;white-space:nowrap}
.act .hd.res.w{color:var(--accent)}
.act .lab{font-family:var(--mono);font-size:12px;padding-right:8px;white-space:nowrap}
.act .lab.on{color:var(--ink-strong);font-weight:600}
.act .cell{height:30px;display:flex;align-items:center;justify-content:center;position:relative;border-top:1px solid rgba(0,0,0,.05)}
.act .cell i{width:13px;height:13px;border-radius:50%;background:rgba(0,0,0,.5);position:relative;z-index:1}
.act .cell.n{background:rgba(0,0,0,.06)}
.act .cell.n i{background:var(--ink-strong)}
.act .rr{height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--ink-strong);border-top:1px solid rgba(0,0,0,.05)}
.act .rr.w{color:var(--accent)}
.act .rr.only span{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-size:13px}
.act .rr.no{color:var(--faint);font-weight:400}
.act .sep{width:14px}
.act .note{grid-column:1/-1;font-size:12px;color:var(--mute);padding-top:12px}
@media(max-width:900px){
  .st{grid-template-columns:1fr;display:flex;flex-direction:column;min-height:0;margin:1.8rem 0 1.2rem}
  .st .left,.st .right{padding:22px 20px}
  .st.st1 .right{order:0;position:sticky;top:48px;z-index:2;background:#fff;border-bottom:1px solid var(--hair);padding:14px 16px 10px}
  .st.st1 .left{order:1}
  .st.st1 .left h3{font-size:20px}
  .st.st1 .left p{font-size:14px}
  .st svg text{font-size:19px}
  .st .left .k{margin-bottom:6px}
  .st .two{margin-top:18px;gap:14px}
  .st .two strong{font-size:34px}
  .st .read strong{font-size:22px}
  .act .hd{font-size:10px;padding-bottom:6px}
  .act .hd.res{font-size:11px;padding:0 2px 6px}
  .act .hd.res b{font-size:15px}
  .act .lab{font-size:11px;padding-right:4px}
  .act .cell{height:28px}
  .act .cell i{width:11px;height:11px}
  .act .rr{height:28px;font-size:14px}
  .act .rr.only span{width:22px;height:22px;font-size:12px}
  .act .sep{width:6px}
}

/* quiz */
.quiz{margin:1.4rem 0 2rem;padding:20px 22px 6px;border:1px solid var(--hair);border-radius:6px}
.quiz .k0{font-size:11px;letter-spacing:.1em;color:var(--faint);font-weight:600;margin-bottom:6px}
.quiz .q{font-weight:600;color:var(--ink-strong);margin-bottom:12px;font-size:1rem}
.quiz .opts{display:grid;gap:8px;margin-bottom:14px}
.quiz .opt{text-align:left;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:baseline;padding:9px 12px;border:1px solid var(--hair);border-radius:6px;font-size:15px}
.quiz .opt .k{font-family:var(--mono);font-size:12px;color:var(--mute)}
.quiz .opt:hover{border-color:var(--hair2)}
.quiz .opt.ok{border-color:var(--ok);background:rgba(46,125,79,.06)}.quiz .opt.ok .k{color:var(--ok)}
.quiz .opt.bad{border-color:var(--bad);background:rgba(180,67,47,.06)}.quiz .opt.bad .k{color:var(--bad)}
.quiz .opt.dim{opacity:.5}
.quiz .why{display:none;font-size:14.5px;line-height:1.7;color:var(--ink);padding-bottom:14px}
.quiz.done .why{display:block}.quiz.done .opt{pointer-events:none}

/* takeaway / reference */
.take{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--hair)}
.take .lbl{font-size:11px;letter-spacing:.1em;color:var(--faint);font-weight:600;margin:1.6rem 0 .4rem}
.take .sum{font-size:1.1rem;line-height:1.7;color:var(--ink-strong);font-weight:500;margin:0 0 1.4rem}
.ref{border-top:1px solid var(--hair);font-size:14px}
.ref details{border-bottom:1px solid var(--hair)}
.ref summary{list-style:none;display:grid;grid-template-columns:10.5rem 1fr 14px;gap:16px;align-items:baseline;padding:13px 0;cursor:pointer;color:var(--ink)}
.ref summary::-webkit-details-marker{display:none}
.ref summary b{font-weight:600;color:var(--ink-strong);font-size:14.5px}
.ref summary span{color:var(--mute);font-size:14px}
.ref summary i{justify-self:end;position:relative;width:14px;height:14px;top:2px}
.ref summary i:before,.ref summary i:after{content:"";position:absolute;left:50%;top:50%;background:var(--mute);transform:translate(-50%,-50%)}
.ref summary i:before{width:12px;height:1px}.ref summary i:after{width:1px;height:12px;transition:transform .2s}
.ref details[open] summary i:after{transform:translate(-50%,-50%) scaleY(0)}
.ref .body{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;padding:0 0 18px;font-size:13.5px;line-height:1.65}
.ref .body .f{grid-column:1/-1;font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.04);padding:8px 10px;border-radius:4px;color:var(--ink)}
.ref .body small{display:block;font-size:10px;letter-spacing:.1em;color:var(--faint)}
.src{font-size:13px;color:var(--mute);line-height:1.7;margin-top:1.6rem}
.src h4{font-size:11px;letter-spacing:.1em;color:var(--faint);font-weight:600;margin:0 0 .5rem}
.src ol{margin:0;padding-left:1.3em}
.src li{margin-bottom:.3em}
.src a{color:var(--ink)}
.nextprev{display:flex;justify-content:space-between;gap:24px;padding:1.6rem 0 5rem;border-top:1px solid var(--hair);margin-top:2.4rem}
.nextprev a{text-decoration:none;color:var(--ink-strong);font-size:1rem}
.nextprev small{display:block;font-size:10px;letter-spacing:.1em;color:var(--faint);margin-bottom:4px}
.nextprev .prev{color:var(--mute)}

@media(max-width:1000px){.title h1{font-size:40px}}
@media(max-width:767px){
  .hdr .nav .lbl{display:none}.hdr .nav{gap:10px}
  .course{width:min(92vw,300px)}
  .title{padding:3rem 0 1.6rem}.title h1{font-size:34px}
  .art h2{font-size:24px}
  .figA{grid-template-columns:1fr}.people{grid-template-columns:repeat(20,1fr);gap:4px}.people i{width:auto;aspect-ratio:1}
  .tl{grid-template-columns:1fr 1fr 1fr;gap:18px 0}.tl:before{display:none}.tl b{font-size:18px}
  .ref summary{grid-template-columns:1fr 14px}.ref summary span{grid-column:1/-1}.ref .body{grid-template-columns:1fr}
}

/* ---- generic figure pieces (added for lessons 1-11) ---- */
.fig{margin:1.8rem 0 2rem}
.fig .cap{font-size:12px;color:var(--mute);line-height:1.6;margin-top:10px}
.fig .cap b{color:var(--ink);font-weight:600}
.fig svg{width:100%;height:auto;display:block}
.fig svg text{font-family:var(--sans);fill:var(--ink);font-size:13px}
.fig svg .mu{fill:var(--mute);font-size:11px}
.fig svg .ac{fill:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:1.6rem 0 1.8rem}
.tiles.two{grid-template-columns:1fr 1fr}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles>div{border-top:2px solid var(--ink-strong);padding-top:10px;font-size:13.5px;line-height:1.6;color:var(--mute)}
.tiles>div.ac{border-top-color:var(--accent)}
.tiles>div.lt{border-top-color:var(--hair2)}
.tiles b{display:block;font-weight:600;color:var(--ink-strong);font-size:15px;margin-bottom:2px}
.tiles strong{display:block;font-size:26px;font-weight:700;color:var(--ink-strong);line-height:1.2;margin-bottom:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tiles strong em{font-style:normal;font-size:13px;color:var(--mute);font-weight:400;margin-left:3px}
.tiles small{display:block;font-size:11px;color:var(--faint);margin-top:4px}
.flow{display:flex;align-items:center;gap:10px;margin:1.6rem 0 1.8rem;flex-wrap:wrap}
.flow .node{border:1.5px solid var(--ink-strong);border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.4;color:var(--ink-strong);min-width:0}
.flow .node small{display:block;font-size:11px;color:var(--mute)}
.flow .node.ac{border-color:var(--accent);color:var(--accent)}
.flow .arr{color:var(--faint);font-size:18px}
.bars{display:grid;gap:8px;margin:1.4rem 0 1.6rem;font-size:13px}
.bars .row{display:grid;grid-template-columns:9rem 1fr 4.5rem;gap:12px;align-items:center}
.bars .row span{color:var(--ink)}
.bars .row i{display:block;height:14px;background:var(--ink-strong);border-radius:2px}
.bars .row i.ac{background:var(--accent)}
.bars .row i.lt{background:var(--hair2)}
.bars .row b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-strong);text-align:right;white-space:nowrap}
.note{font-size:13px;color:var(--mute);line-height:1.6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;margin:1.2rem 0 1.6rem}
.kv b{font-weight:600;color:var(--ink-strong);white-space:nowrap}
.kv span{color:var(--ink)}
@media(max-width:767px){.tiles,.tiles.four{grid-template-columns:1fr 1fr}.bars .row{grid-template-columns:6.5rem 1fr 3.6rem}}

@media(max-width:767px){.fig.wide{overflow-x:auto;-webkit-overflow-scrolling:touch}.fig.wide svg{min-width:600px}}