@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  --bg:#f4f1ea; --surface:#fbfaf6; --surface-2:#e8e4d9;
  --text:#16181d; --text-2:#2b2f37; --muted:#474c56;
  --line:#c3bfb2; --line-soft:#dbd7cb;
  --accent:#8f2416; --accent-ink:#ffffff;
  --lamp:#b06a00;
  --c-comanescu:#6b4a9c; --c-vasilescu:#1f6f5e; --c-radian:#9a5210; --c-budura:#1b559c; --c-anna:#a32218;
  --map-land:#ddd8c8; --map-water:#c3d2e0; --map-river:#9db4c8; --map-rail:#6d6a61; --map-done:#8f2416; --map-label:#2b2f37;
  --shadow:0 1px 2px rgba(20,24,34,.08),0 10px 30px rgba(20,24,34,.14);
  --bar-h:3.1rem;
  --serif:"Fraunces","Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",Georgia,serif;
  --body:"Source Serif 4","Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",Georgia,serif;
  --cjk:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",serif;
  /* the night scene keeps its own colours in both themes */
  --sc-s0:#070b18; --sc-s1:#16213d; --sc-s2:#2a375a; --sc-g0:#8fa0c2; --sc-g1:#4a587c;
  --sc-hill-a:#1a2444; --sc-hill-b:#121b34; --sc-tree-a:#0c1326; --sc-tree-b:#080d1c; --sc-car:#10162a; --sc-roof:#27314f;
  --sc-w0:#ffe09a; --sc-w1:#f6a436; --sc-star:#f3f0e2; --sc-moon:#f4ecd2;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f131a; --surface:#171c25; --surface-2:#212835;
  --text:#ebe8e0; --text-2:#d7d3c8; --muted:#b5b2a8;
  --line:#3d4656; --line-soft:#283040;
  --accent:#f3a58f; --accent-ink:#1a0805;
  --lamp:#f2b25a;
  --c-comanescu:#b9a0e6; --c-vasilescu:#6fcab4; --c-radian:#e6a765; --c-budura:#86b8f2; --c-anna:#f28e80;
  --map-land:#1d2430; --map-water:#101a2a; --map-river:#33485f; --map-rail:#8a8f99; --map-done:#f3a58f; --map-label:#d7d3c8;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 36px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0f131a; --surface:#171c25; --surface-2:#212835;
    --text:#ebe8e0; --text-2:#d7d3c8; --muted:#b5b2a8;
    --line:#3d4656; --line-soft:#283040;
    --accent:#f3a58f; --accent-ink:#1a0805;
    --lamp:#f2b25a;
    --c-comanescu:#b9a0e6; --c-vasilescu:#6fcab4; --c-radian:#e6a765; --c-budura:#86b8f2; --c-anna:#f28e80;
    --map-land:#1d2430; --map-water:#101a2a; --map-river:#33485f; --map-rail:#8a8f99; --map-done:#f3a58f; --map-label:#d7d3c8;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 36px rgba(0,0,0,.55);
  }
}
.p-comanescu{--pc:var(--c-comanescu)} .p-vasilescu{--pc:var(--c-vasilescu)} .p-radian{--pc:var(--c-radian)} .p-budura{--pc:var(--c-budura)} .p-anna{--pc:var(--c-anna)} .p-none{--pc:var(--muted)}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar-h) + .5rem);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.125rem;line-height:1.62;overflow-x:clip}
html[lang^="zh"] body{line-height:1.85;font-size:1.0925rem}
a{color:var(--accent);text-underline-offset:.15em}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.15;font-weight:650;letter-spacing:-.01em}
html[lang^="zh"] :is(h1,h2,h3,h4){letter-spacing:0;line-height:1.3;font-weight:700}
h1{font-size:clamp(1.85rem,4.1vw,3rem);margin:.2rem 0 .8rem;text-wrap:balance}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 .8rem;text-wrap:balance}
h3{font-size:1.25rem;margin:1.7rem 0 .5rem;text-wrap:balance}
h4{font-size:1.05rem;margin:1.2rem 0 .3rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.3rem}
.zh{font-family:var(--cjk);font-style:normal}
.wrap{max-width:44rem;margin:0 auto;padding:0 max(1rem,env(safe-area-inset-left)) 0 max(1rem,env(safe-area-inset-right))}
.wrap.wide{max-width:74rem}
.lede{font-size:1.2rem;color:var(--text-2)}
.hint{color:var(--muted);font-size:.9rem;margin:.4rem 0 1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0}
.skip:focus{left:0}
.perma{margin-left:.4rem;font-size:.6em;color:var(--muted);text-decoration:none;opacity:0;transition:opacity .15s;display:inline-block;min-width:1.5rem}
h2:hover .perma,.perma:focus{opacity:1}
@media (hover:none){.perma{opacity:.55}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
main:focus{outline:none}
section{padding:2.6rem 0 1.2rem;scroll-margin-top:var(--bar-h)}
.no-js .js-only{display:none!important}
[hidden]{display:none!important}
sup.fn{font-size:.66em;line-height:0;margin-left:.2em;font-family:var(--body)}
sup.fn+sup.fn::before{content:"· ";color:var(--muted)}
sup.fn a{color:var(--muted);text-decoration:underline dotted}
sup.fn a:hover,sup.fn a:focus{color:var(--accent)}
.btn{font:inherit;font-size:.95rem;min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:50;height:var(--bar-h);display:flex;align-items:center;gap:.6rem;padding:0 max(.8rem,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font-size:.92rem}
.topbar .home{display:flex;align-items:center;gap:.45rem;color:var(--text);text-decoration:none;font-family:var(--serif);font-weight:600;white-space:nowrap}
.lamp{width:1.05rem;height:.8rem;border-radius:.2rem;background:var(--lamp);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--lamp)}
.topnav{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;white-space:nowrap;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--muted);text-decoration:none;padding:.5rem .55rem;border-radius:.4rem}
.topnav a:hover,.topnav a[aria-current]{color:var(--text);background:var(--surface-2)}
.spacer{flex:1}
.chip{font:inherit;font-size:.88rem;display:inline-flex;align-items:center;gap:.3rem;min-height:2rem;padding:.15rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;background:transparent;cursor:pointer;white-space:nowrap}
.chip[aria-current],.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.icon-btn{width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);cursor:pointer;flex:none}
@media (max-width:760px){.topbar .txt{display:none}.topnav{display:none}}
.prog{position:sticky;top:var(--bar-h);z-index:49;height:2px;background:transparent;margin-bottom:-2px;pointer-events:none}
.prog-train{display:block;width:100%;height:2px;background:var(--lamp);transform:scaleX(0);transform-origin:0 50%}

/* ---------------------------------------------------------------- hero */
.hero{padding-top:2rem}
.kicker{font-family:var(--serif);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 .3rem}
html[lang^="zh"] .kicker{letter-spacing:.12em}
.deck{font-size:1.2rem;color:var(--text-2)}
.byline{color:var(--muted);font-size:.92rem}
.hero-fig{margin:1.4rem 0 1.6rem}
.scene-box{position:relative;height:clamp(15rem,42vw,27rem);overflow:hidden;background:var(--sc-s1)}
.scene{display:block;width:100%;height:100%}
.sc-s0{stop-color:var(--sc-s0)} .sc-s1{stop-color:var(--sc-s1)} .sc-s2{stop-color:var(--sc-s2)}
.sc-g0{stop-color:var(--sc-g0)} .sc-g1{stop-color:var(--sc-g1)}
.sc-m0{stop-color:var(--sc-moon);stop-opacity:1} .sc-m1{stop-color:var(--sc-moon);stop-opacity:.2} .sc-m2{stop-color:var(--sc-moon);stop-opacity:0}
.sc-w0{stop-color:var(--sc-w0)} .sc-w1{stop-color:var(--sc-w1)}
.sc-p0{stop-color:var(--sc-w1);stop-opacity:.42} .sc-p1{stop-color:var(--sc-w1);stop-opacity:0}
.sc-b0{stop-color:var(--sc-w0);stop-opacity:.4} .sc-b1{stop-color:var(--sc-w0);stop-opacity:0}
.sc-stars{fill:var(--sc-star)}
.sc-hill-a{fill:var(--sc-hill-a)} .sc-hill-b{fill:var(--sc-hill-b)} .sc-trees-a{fill:var(--sc-tree-a)} .sc-trees-b{fill:var(--sc-tree-b)}
.sc-pole{stroke:var(--sc-tree-b);stroke-width:3;fill:none} .sc-wire{stroke:var(--sc-tree-b);stroke-width:1;fill:none;opacity:.8}
.sc-rail{stroke:var(--sc-car);stroke-width:2;fill:none}
.sc-car{fill:var(--sc-car)} .sc-roof{fill:var(--sc-roof)} .sc-band{fill:var(--sc-roof)} .sc-wheel{fill:var(--sc-car)}
.sc-win{fill:url(#sc-winfill);filter:url(#sc-glow)} .sc-win.dim{fill:var(--sc-w1);opacity:.28;filter:none}
.sc-spill{fill:url(#sc-spillfill)} .sc-lamp{fill:var(--sc-w0);filter:url(#sc-glow)} .sc-beam{fill:url(#sc-beamfill)}
.sc-smoke{fill:none;stroke:var(--sc-g0);stroke-width:34;stroke-linecap:round;opacity:.3;filter:url(#sc-blur)}
.sc-snow{fill:var(--sc-star)}
@keyframes drift{to{transform:translateX(-1200px)}}
@keyframes fall{to{transform:translate(-90px,460px)}}
.sc-far{animation:drift 240s linear infinite} .sc-mid{animation:drift 120s linear infinite} .sc-near{animation:drift 26s linear infinite} .sc-poles{animation:drift 9s linear infinite}
.sc-snow{animation:fall 14s linear infinite}
.paused :is(.sc-far,.sc-mid,.sc-near,.sc-poles,.sc-snow){animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sc-far,.sc-mid,.sc-near,.sc-poles,.sc-snow{animation:none}.scene-btn{display:none}}
.scene-btn{position:absolute;right:.7rem;bottom:.7rem;font:inherit;font-size:.82rem;min-height:2.75rem;padding:.3rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(7,11,24,.72);color:#f3f0e2;cursor:pointer}
.no-js .scene-btn{display:none}
.five{list-style:none;margin:0 auto;padding:.7rem 1rem 0;max-width:60rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;text-align:center}
.five li{border-top:3px solid var(--pc);padding-top:.35rem;display:flex;flex-direction:column;line-height:1.25}
.five .zh{font-size:1.5rem;font-weight:700}
.five .nm{font-size:.86rem;color:var(--text-2)}
@media (max-width:640px){.five{grid-template-columns:repeat(2,1fr);text-align:left}.five li:last-child{grid-column:1/-1}.five .zh{font-size:1.3rem}}
figcaption{color:var(--muted);font-size:.9rem;margin-top:.6rem;line-height:1.45}
.credit{display:block;font-size:.82rem}

/* ---------------------------------------------------------------- share row */
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.share-row .lbl{color:var(--muted);font-size:.9rem;margin-right:.2rem}
.share-row a,.share-row button{width:2.5rem;height:2.5rem;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:999px;background:transparent;color:var(--text);cursor:pointer}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
.share-row .status{font-size:.88rem;color:var(--muted)}

/* ---------------------------------------------------------------- the five cards */
.cards5{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.8rem}
.card{background:var(--surface);border:1px solid var(--line-soft);border-top:4px solid var(--pc);border-radius:.5rem;padding:.8rem .9rem;font-size:.98rem}
.card h4{margin:0 0 .2rem;font-size:1.05rem}
.card h4 .zh{font-size:1.25rem;margin-right:.25rem}
.card p{margin:0 0 .4rem}
.card .x50{color:var(--muted);font-size:.86rem}

/* ---------------------------------------------------------------- the journey */
.road-map{position:sticky;top:var(--bar-h);z-index:5;background:var(--bg);border-bottom:1px solid var(--line-soft);padding-bottom:.3rem}
.no-js .road-map{position:static}
.map-pan{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.js .map-pan{overflow:hidden}
.jmap{display:block;width:100%;min-width:56rem;max-width:74rem;margin:0 auto;height:auto}
@media (min-width:900px){.jmap{min-width:0}}
.land{fill:var(--map-land)} .water{fill:var(--map-water)} .river{fill:none;stroke:var(--map-river);stroke-width:1.1}
.rail{fill:none;stroke:var(--map-rail);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.rail-done{fill:none;stroke:var(--map-done);stroke-width:3;stroke-linecap:round}
.no-js .rail-done{stroke-dashoffset:0}
.dot-doc{fill:var(--bg);stroke:var(--map-done);stroke-width:3} .dot-line{fill:var(--map-rail)}
.lab-doc,.lab-line,.lab-water{font-family:var(--body);fill:var(--map-label);paint-order:stroke;stroke:var(--map-land);stroke-width:4px;stroke-linejoin:round}
.lab-doc{font-size:17px;font-weight:650} .lab-line{font-size:13px;opacity:.85} .lab-water{font-size:13px;font-style:italic;opacity:.8}
.jtrain circle{fill:var(--lamp);opacity:.3} .jtrain .in{opacity:1;stroke:var(--bg);stroke-width:1.5}
.no-js .jtrain{display:none}
.legend{font-size:.84rem;color:var(--muted);margin:.2rem auto 0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
.legend>span{display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem}
.k{display:inline-block;flex:none}
.k-doc{width:.75rem;height:.75rem;border-radius:50%;border:3px solid var(--map-done);background:var(--bg)}
.k-line{width:1.6rem;border-top:2px dashed var(--map-rail)}
.steps{list-style:none;padding-top:1rem;padding-bottom:1rem}
.step{margin:0 0 1.2rem;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--line-soft);border-left:4px solid var(--line);border-radius:.4rem;scroll-margin-top:calc(var(--bar-h) + 21rem)}
.js .step{min-height:11rem;margin-bottom:42vh;opacity:.55;transition:opacity .25s}
.js .step.on{opacity:1;border-left-color:var(--map-done)}
.js .step:last-child{margin-bottom:10vh}
.step h3{margin:.1rem 0 .4rem}
.step p{margin:0}
.when{font-family:var(--serif);font-size:.9rem;letter-spacing:.03em;color:var(--accent);margin:0}
@media (prefers-reduced-motion:reduce){.js .step{opacity:1}}

/* ---------------------------------------------------------------- the dispatch */
.dispatch{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
.dispatch>*{min-width:0}
@media (min-width:860px){.dispatch{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}}
.paper{margin:0}
.paper .col{writing-mode:vertical-rl;font-family:var(--cjk);font-size:1.12rem;line-height:1.9;letter-spacing:.06em;height:21rem;max-width:100%;overflow-x:auto;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:.3rem;box-shadow:var(--shadow)}
.paper .col p{margin:0 0 0 .6rem}
.paper .hd{font-size:1.5rem;font-weight:700;line-height:1.5;margin-left:1.1rem!important}
.tr h3{margin-top:0}
.tr p{font-size:1.02rem}

/* ---------------------------------------------------------------- tones, class */
.tones{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1rem 0 .4rem}
.phrase{background:var(--surface);border:1px solid var(--line-soft);border-radius:.5rem;padding:.8rem .9rem 1rem;text-align:center}
.phrase svg{display:block;width:100%;height:auto;max-width:24rem;margin:0 auto}
.tg{stroke:var(--line-soft);stroke-width:1}
.tc{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.th{font-family:var(--cjk);font-size:22px;fill:var(--text);font-weight:700}
.syl.on .tc{stroke:var(--lamp)} .syl.on .th{fill:var(--lamp)}
.gl{color:var(--muted);font-size:.92rem;margin:.3rem 0 .6rem}
.classfig{margin:1rem 0}
.class33{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1rem 1.6rem}
.class33 .dots{display:flex;gap:.3rem;flex-wrap:wrap;max-width:9rem}
.class33 i{width:1rem;height:1rem;border-radius:50%;background:var(--line)}
.class33 .cc-ro i{background:var(--accent)}
.class33 .cl{display:block;font-size:.88rem;color:var(--text-2);margin-top:.3rem}

/* ---------------------------------------------------------------- photographs of places */
.photo{margin:1.6rem auto}
.photo img{display:block;width:100%;height:auto;border-radius:.3rem;border:1px solid var(--line-soft);background:var(--surface-2)}

/* ---------------------------------------------------------------- five lines */
.lines-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
.lines-grid>*{min-width:0}
@media (min-width:980px){.lines-grid{grid-template-columns:minmax(0,27rem) minmax(0,1fr)}.lines-fig{position:sticky;top:calc(var(--bar-h) + .5rem);max-height:calc(100vh - var(--bar-h) - 1rem);overflow-y:auto;scrollbar-width:thin}}
.lines-fig{margin:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:.5rem;padding:.8rem .7rem}
@media (max-width:480px){.lines-fig{padding:.6rem .15rem;margin:0 -.6rem;border-radius:0;border-left:0;border-right:0}.lines-fig .five-key,.lines-fig .lg,.lines-fig .hint{padding:0 .6rem}}
.five-key{list-style:none;padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.86rem}
.five-key .sw{display:inline-block;width:1.1rem;height:.28rem;border-radius:2px;background:var(--pc);vertical-align:middle;margin-right:.3rem}
.lines{display:block;width:100%;height:auto;max-width:30rem;margin:0 auto}
.yr{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:2 4} .yr.big{stroke-dasharray:none}
.yl{font-family:var(--serif);font-size:13.5px;fill:var(--muted)}
.yl.sm{font-size:11.5px;opacity:.8}
.origin{font-family:var(--serif);font-size:14px;fill:var(--text)} .org{fill:var(--text)}
.trk{fill:none;stroke:var(--pc);stroke-width:3.2;stroke-linecap:round}
.term{stroke:var(--pc);stroke-width:3.2;stroke-linecap:round} .arrow{fill:none;stroke:var(--pc);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.fade{stroke-width:3.2;stroke-dasharray:3 4}
.f0{stop-color:var(--pc);stop-opacity:.9} .f1{stop-color:var(--pc);stop-opacity:0}
.tick{stroke:var(--pc);stroke-width:1.3;opacity:.75}
.st{cursor:pointer;text-decoration:none}
.st circle{fill:var(--surface);stroke:var(--pc);stroke-width:2.6}
.st.k-paper circle{fill:var(--pc)}
.st.k-book circle{stroke-dasharray:2.4 2}
.st .lead{fill:none;stroke:var(--pc);stroke-width:.8;opacity:.55}
.st text{font-family:var(--body);font-size:14px;fill:var(--text)}
.st .sy{font-family:var(--serif);font-weight:650;fill:var(--pc)}
.st:hover circle,.st:focus circle,.st.on circle{stroke-width:4.5}
.st:hover text,.st:focus text,.st.on text{text-decoration:underline}
.st:focus{outline:none} .st:focus-visible text{outline:2px solid var(--accent);outline-offset:2px}
.lg{list-style:none;padding:0;margin:.6rem 0 0;font-size:.82rem;color:var(--muted);display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.2rem .8rem}
.g{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;border:2.5px solid var(--text-2);margin-right:.4rem;vertical-align:-1px}
.g-paper{background:var(--text-2)} .g-book{border-style:dashed} .g-other{opacity:.6}
.g-tick{border:0;border-top:2px solid var(--text-2);border-radius:0;height:0;vertical-align:middle}
.g-fade{border:0;border-left:3px dashed var(--muted);border-radius:0;height:.9rem;width:0}
.bio{border-top:4px solid var(--pc);padding-top:.5rem;margin-bottom:2.2rem;scroll-margin-top:calc(var(--bar-h) + .6rem)}
.bio h3{margin-top:.2rem}
.bio h3 .zh{font-size:1.45rem;margin-right:.3rem}
.bio .role{display:block;font-family:var(--body);font-weight:400;font-size:.95rem;color:var(--muted);letter-spacing:0;margin-top:.15rem}
.stations{list-style:none;padding:0;margin:.4rem 0 0;font-size:.95rem;border-left:3px solid var(--pc)}
.stations li{padding:.35rem 0 .35rem .8rem;border-bottom:1px solid var(--line-soft);scroll-margin-top:calc(var(--bar-h) + 1rem)}
.stations li:target{background:var(--surface-2)}
.stations .when{display:inline;font-weight:600;margin-right:.3rem}
.stations .kind{display:block;font-size:.8rem;color:var(--muted)}
.card-panel{position:fixed;z-index:60;right:1rem;bottom:1rem;width:min(26rem,calc(100vw - 2rem));max-height:60vh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-top:5px solid var(--pc,var(--accent));border-radius:.6rem;box-shadow:var(--shadow);padding:1rem 3.2rem 1rem 1rem;font-size:1rem}
.card-panel[hidden]{display:none}
.card-panel .x{position:absolute;top:.3rem;right:.3rem;width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--text);font-size:1.6rem;cursor:pointer;border-radius:50%}
.card-panel .when{font-size:1rem}
.card-panel .body{margin-top:.3rem}
.card-panel .kind{display:block;font-size:.84rem;color:var(--muted);margin-top:.3rem}
@media (max-width:640px){.card-panel{left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom));width:auto}}

/* ---------------------------------------------------------------- tables */
.tscroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:.4rem;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;vertical-align:top;padding:.5rem .7rem;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--serif);font-size:.88rem;color:var(--muted);position:sticky;top:0;background:var(--surface);white-space:nowrap}
tbody th{font-weight:600;white-space:nowrap}
.rooms tr{border-left:5px solid var(--pc)}
.rooms .ev-none td,.rooms .ev-none th{color:var(--muted)}
.evb{display:inline-block;font-size:.84rem;padding:.05rem .5rem;border:1px solid var(--line);border-radius:999px;margin-right:.3rem;white-space:nowrap}
.ev-paper .evb{background:var(--text);color:var(--bg);border-color:var(--text)}
.ev-none .evb{border-style:dashed}
.trail .pg{text-align:right;color:var(--muted)}
.trail .ti{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.trail tr.key td:last-child{font-weight:500}
.js .trail:not(.open):not(.filtered) tr.more{display:none}
.trail.filtered tbody tr{display:none}
.trail.filtered tbody tr.show{display:table-row}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0 1rem}
.filters .lbl{color:var(--muted);font-size:.9rem}
.filters .chip{min-height:2.75rem;border-color:var(--pc,var(--line))}
.filters .chip.on{background:var(--pc,var(--text));border-color:var(--pc,var(--text));color:var(--bg)}
.tfoot{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-top:.8rem;font-size:.95rem}

/* ---------------------------------------------------------------- method, related, footer */
.srcs{font-size:.95rem;padding-left:1.1rem}
.srcs li{margin-bottom:.3rem}
.related ul{padding-left:1.1rem}
.foot{border-top:1px solid var(--line-soft);margin-top:2rem;padding:1.4rem 0 4.5rem;color:var(--muted);font-size:.9rem}
.nf{padding:4rem 1rem}
@media print{.topbar,.prog,.share-row,.scene-btn,.filters,.card-panel{display:none}.road-map{position:static}.js .step{opacity:1;margin-bottom:1rem;min-height:0}}