/* 世界史长河 · 「宣纸朱批」风格
 * 纸底 + 墨色 + 朱红（前因、所选、对手）+ 石青（后果、年份、影响）；区域用一组柔和的地图色区分。
 * 布局：顶栏导航 + 三个视图（时间线 / 人物 / 关系图）。时间线左侧留出"因果沟"，用弧线把选中事件与前因后果连起来 */
:root{
 --paper:#EFE7D6; --surface:#F5EFE2; --raised:#F8F3E8; --ink:#231F1A; --ink2:#4A4339; --muted:#7A7062; --line:#D6C9B0; --rule:#CDBFA4;
 --zhu:#A8342A; --qing:#2F5664;
 --accent:#2F5664; --accent-soft:#DCE4E2; --cause:#A8342A; --cause-soft:#F0DDD3; --via:#8A6D3B; --via-soft:#EDE2C8;
 /* 时代色（只用于时代标题的小菱形和人物卡顶边） */
 --e1:#8C6A3F; --e2:#7D5A6B; --e3:#4F6B7A; --e4:#5F7448; --e5:#9A5A43; --e6:#4F7570;
 /* 区域色 */
 --rg-eas:#D0A24E; --rg-cas:#7F9A94; --rg-sas:#A7869A; --rg-wna:#C49A6C; --rg-eur:#C07A6A; --rg-ame:#86A072; --rg-glo:#7290A6;
 /* 人物关系色 */
 --r-teacher:#2F5664; --r-family:#8A4F6A; --r-ally:#231F1A; --r-rival:#A8342A; --r-influence:#4F8291; --r-patron:#6A6155; --r-contact:#8A7A55;
 --f-display:'Noto Serif SC','Noto Serif CJK SC','Songti SC','STSong','SimSun',serif;
 --f-body:'Noto Serif SC','Noto Serif CJK SC','Songti SC','STSong','SimSun',serif;
 --f-mono:'Noto Serif SC','Songti SC',serif;
 --shadow:none;
 --tint:12%;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
 --paper:#1B1915; --surface:#221F1A; --raised:#27231D; --ink:#E8DFCD; --ink2:#C4B9A4; --muted:#938870; --line:#3A352C; --rule:#4A4337;
 --zhu:#D46A55; --qing:#86B4C0;
 --accent:#86B4C0; --accent-soft:#25302F; --cause:#D46A55; --cause-soft:#3A2520; --via:#C9A66B; --via-soft:#332B1E;
 --e1:#C29A62; --e2:#B08CA0; --e3:#87A3B2; --e4:#9AB07E; --e5:#D08A70; --e6:#82AFA9;
 --rg-eas:#D9AD5C; --rg-cas:#8FB0A9; --rg-sas:#B796AA; --rg-wna:#CFA679; --rg-eur:#CF8A78; --rg-ame:#96B282; --rg-glo:#86A3B8;
 --r-teacher:#86B4C0; --r-family:#C68DA8; --r-ally:#E8DFCD; --r-rival:#D46A55; --r-influence:#7FB3BF; --r-patron:#A99F8C; --r-contact:#BFAE84;
 --tint:16%; color-scheme:dark}}
:root[data-theme="dark"]{
 --paper:#1B1915; --surface:#221F1A; --raised:#27231D; --ink:#E8DFCD; --ink2:#C4B9A4; --muted:#938870; --line:#3A352C; --rule:#4A4337;
 --zhu:#D46A55; --qing:#86B4C0;
 --accent:#86B4C0; --accent-soft:#25302F; --cause:#D46A55; --cause-soft:#3A2520; --via:#C9A66B; --via-soft:#332B1E;
 --e1:#C29A62; --e2:#B08CA0; --e3:#87A3B2; --e4:#9AB07E; --e5:#D08A70; --e6:#82AFA9;
 --rg-eas:#D9AD5C; --rg-cas:#8FB0A9; --rg-sas:#B796AA; --rg-wna:#CFA679; --rg-eur:#CF8A78; --rg-ame:#96B282; --rg-glo:#86A3B8;
 --r-teacher:#86B4C0; --r-family:#C68DA8; --r-ally:#E8DFCD; --r-rival:#D46A55; --r-influence:#7FB3BF; --r-patron:#A99F8C; --r-contact:#BFAE84;
 --tint:16%; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.75}
/* 极淡的纸纹（只在浅色模式） */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--zhu);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rd{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rc);margin-right:7px;vertical-align:2px;flex:none}

/* 顶栏 */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 3px 0 -2px var(--rule)}
header.top .wrap{display:flex;align-items:center;gap:28px;padding-block:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:.28em;text-decoration:none;display:flex;align-items:center;gap:14px}
.brand .seal{width:38px;height:38px;flex:none;background:var(--zhu);color:#F6E9DC;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:1px;border-radius:3px 2px 4px 2px;box-shadow:inset 0 0 0 2px var(--zhu),inset 0 0 0 3px rgba(246,233,220,.75)}
.brand small{font-size:12px;font-weight:400;letter-spacing:.18em;color:var(--muted)}
nav.tabs{display:flex;gap:30px}
nav.tabs a{text-decoration:none;font-size:15px;letter-spacing:.2em;color:var(--muted);position:relative;padding:2px 0}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a.on{color:var(--ink)}
nav.tabs a.on::after{content:"";position:absolute;left:50%;bottom:-8px;width:5px;height:5px;margin-left:-2.5px;background:var(--zhu);border-radius:50%}
.search{position:relative;margin-left:auto;flex:0 1 240px;min-width:160px}
.search input{width:100%;font:inherit;font-size:14px;padding:5px 0;border:0;border-bottom:1px solid var(--ink2);background:transparent;color:var(--ink);letter-spacing:.05em;border-radius:0}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-bottom-color:var(--zhu)}
.search .res{position:absolute;right:0;left:0;top:calc(100% + 6px);background:var(--raised);border:1px solid var(--rule);max-height:360px;overflow:auto;z-index:40}
.search .res a{display:flex;gap:10px;align-items:baseline;padding:7px 12px;text-decoration:none;font-size:14px;border-top:1px solid var(--line)}
.search .res a:first-child{border-top:0}
.search .res a:hover,.search .res a.hi{background:var(--cause-soft)}
.search .res .k{font-size:12px;color:var(--qing);min-width:48px;font-variant-numeric:tabular-nums}
.search .res .none{padding:10px 12px;color:var(--muted);font-size:13px}

main{padding-block:24px 60px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--muted)}

/* 区域总览（时间线顶部）：横轴是时代，纵向是区域色带 */
.ribbon{margin-bottom:14px;user-select:none;min-height:150px}
.ribbon svg{display:block;width:100%;overflow:visible}
.ribbon .band{opacity:.26}
.ribbon .band-l{font-size:12px;fill:var(--ink2);letter-spacing:.1em}
.ribbon .era-l{font-size:12px;fill:var(--muted);letter-spacing:.25em}
.ribbon .era-s{stroke:var(--rule);stroke-dasharray:2 4}
.ribbon .dot{cursor:pointer;stroke:var(--paper);stroke-width:1}
.ribbon .dot.minor{fill:var(--paper);stroke:var(--ink2);stroke-width:1.1}
.ribbon .dot.major{fill:var(--ink)}
.ribbon .dot:hover{stroke:var(--zhu);stroke-width:2}
.ribbon .dot.off{opacity:.18}
.ribbon .dot.on{fill:var(--zhu);stroke:var(--zhu)}
.ribbon .ring{fill:none;stroke:var(--zhu);stroke-width:1;opacity:.7;pointer-events:none}
.ribbon .arc{fill:none;stroke-width:1.5;pointer-events:none}
.ribbon .arc.c{stroke:var(--cause)} .ribbon .arc.e{stroke:var(--accent)}
.ribbon .arc.weak{stroke-dasharray:2 3}

.filters{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:4px 0 6px}
.chip{border:0;background:none;padding:2px 0;font-size:14px;cursor:pointer;color:var(--muted);letter-spacing:.08em;border-bottom:1px solid transparent}
.chip:hover{color:var(--ink)}
.chip.on{color:var(--ink);border-bottom-color:var(--zhu)}
.chip[data-r]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rc,transparent);margin-right:6px;vertical-align:1px}
.chip[data-r="全部"]::before{display:none}
.filters .sep{width:1px;height:16px;background:var(--rule);margin:0 2px}
.legend-inline{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:6px 0 10px;letter-spacing:.06em}
.legend-inline i{display:inline-block;width:20px;height:0;border-top:1.5px solid;vertical-align:middle;margin-right:6px}

/* 时间线主体 */
.tl{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;align-items:start}
.list{position:relative;--gutter:84px;padding-left:var(--gutter);padding-right:28px}
.list::before{content:"";position:absolute;left:calc(var(--gutter) - 8px);top:0;bottom:0;width:1px;background:var(--rule)}
#arcs{position:absolute;left:0;top:0;width:var(--gutter);overflow:visible;pointer-events:none}
.era-head{padding:30px 0 10px;display:flex;align-items:baseline;gap:14px;position:relative;border-bottom:1px solid var(--line);margin-bottom:6px}
.era-head::before{content:"";position:absolute;left:-12.5px;top:38px;width:9px;height:9px;background:var(--ec);transform:rotate(45deg)}
.era-head h2{font-size:19px;font-weight:700;letter-spacing:.35em;color:var(--ink)}
.era-head span{font-size:13px;color:var(--muted);letter-spacing:.05em}
.ev{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 12px 10px 14px;cursor:pointer;transition:background .15s,opacity .2s;border-left:3px solid color-mix(in srgb,var(--rc) 55%,transparent);margin:3px 0}
.ev::before{content:"";position:absolute;top:17px;left:-17px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--paper);border:1.5px solid var(--rc);box-sizing:border-box}
.ev.major::before{width:11px;height:11px;margin-left:-5.5px;background:var(--rc);border-color:color-mix(in srgb,var(--rc) 70%,var(--ink));top:16px}
.ev:hover{background:color-mix(in srgb,var(--rc) 9%,var(--paper))}
.ev .yr{font-size:14px;color:var(--qing);padding-top:1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev .t{margin:0;font-size:15.5px;font-weight:400;line-height:1.5}
.ev.major .t{margin:0;font-weight:700;font-size:17.5px;letter-spacing:.02em}
.ev .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted);margin-top:4px;align-items:center}
.ev .meta .ppl{color:var(--ink2)}
.ev .meta .cnt{font-size:12px;font-variant-numeric:tabular-nums}
.ev.sel{background:var(--raised);border-left-color:var(--zhu);outline:1px solid var(--rule)}
.ev.sel .t,.ev.sel .t a{color:var(--zhu)}
.ev.sel::before{background:var(--zhu);border-color:var(--zhu);box-shadow:0 0 0 3px var(--paper),0 0 0 4px color-mix(in srgb,var(--zhu) 60%,transparent)}
.ev.rel-cause{background:var(--cause-soft)}
.ev.rel-effect{background:var(--accent-soft)}
.ev.rel-via{background:var(--via-soft)}
.list.focus .ev:not(.sel):not(.rel-cause):not(.rel-effect):not(.rel-via){opacity:.4}
.ev.hid{display:none}
.era-head.hid{display:none}
.tag{display:inline-block;font-size:11.5px;padding:0 6px;border:1px solid var(--rule);color:var(--ink2);line-height:19px;letter-spacing:.1em}
.tag.big{border-color:var(--zhu);color:var(--zhu)}
.rtag{display:inline-block;font-size:11.5px;padding:0 7px;line-height:19px;letter-spacing:.15em;color:var(--ink);background:color-mix(in srgb,var(--rc) 30%,transparent)}

#arcs path{fill:none;stroke-width:1.6}
#arcs path.c{stroke:var(--cause)} #arcs path.e{stroke:var(--accent)} #arcs path.v{stroke:var(--via);stroke-dasharray:1.5 3.5;stroke-width:1.4}
#arcs path.weak{stroke-dasharray:2 3.5}
#arcs .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* 详情面板 */
aside.detail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);max-height:calc(100vh - 96px);overflow:auto;background:var(--surface);border-left:4px double var(--rule);padding:26px 30px 28px}
.detail .x{display:none}
.detail .d-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.detail .d-year{font-size:14px;color:var(--muted);margin-top:12px;letter-spacing:.2em}
.detail h2{font-size:24px;line-height:1.45;margin:4px 0 12px;letter-spacing:.03em}
.detail p{margin:0 0 6px;color:var(--ink2);text-align:justify}
.detail h4,.detail-static h2{font-size:13.5px;letter-spacing:.35em;color:var(--zhu);margin:24px 0 6px;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--line)}
.detail h4.h-e,.detail-static h2.h-e{color:var(--accent)}
.detail h4.h-v,.detail-static h2.h-v{color:var(--via)}
.detail h4.h-p,.detail-static h2.h-p{color:var(--ink2)}
.plinks{display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:4px}
.pchip{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-size:15px;border-bottom:1px solid var(--rule)}
.pchip:hover{color:var(--zhu);border-bottom-color:var(--zhu)}
.pchip small{font-size:11.5px;color:var(--muted)}
.elink{display:grid;grid-template-columns:56px 1fr;gap:1px 10px;text-decoration:none;padding:9px 2px;border-bottom:1px solid var(--line)}
.elink:hover .n{color:var(--zhu)}
.elink .y{font-size:13.5px;color:var(--qing);font-variant-numeric:tabular-nums}
.elink .n{font-weight:700;font-size:14.5px}
.elink .why{grid-column:2;font-size:12.5px;color:var(--muted);line-height:1.6}
.empty{font-size:13px;color:var(--muted)}
.intro h2{font-size:21px;line-height:1.5;margin-top:4px}
.intro ol{padding-left:18px;margin:10px 0 0;color:var(--ink2);font-size:14px}
.intro ol li{margin-bottom:5px}
.intro h4{color:var(--ink2)}
.starts{display:flex;flex-direction:column}

/* 人物索引 */
.ph{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.ph h1{font-size:32px;letter-spacing:.2em}
.ph input{font:inherit;padding:5px 0;border:0;border-bottom:1px solid var(--ink2);background:transparent;color:var(--ink);width:240px;max-width:100%;border-radius:0}
.ph input:focus{outline:none;border-bottom-color:var(--zhu)}
.pg-era{margin-top:30px}
.pg-era h2{font-size:18px;letter-spacing:.3em;display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:4px}
.pg-era h2::before{content:"";width:8px;height:8px;background:var(--ec);transform:rotate(45deg);align-self:center}
.pg-era h2 span{font-size:13px;color:var(--muted);letter-spacing:.05em;font-weight:400}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:28px}
.pcard{display:block;text-decoration:none;padding:12px 2px 10px;border-bottom:1px solid var(--line)}
.pcard:hover b{color:var(--zhu)}
.pcard b{font-family:var(--f-display);font-weight:700;font-size:16.5px;display:inline-block;margin-right:8px}
.pcard .yrs{font-size:12.5px;color:var(--qing)}
.pcard .rl{font-size:13px;color:var(--muted);margin-top:2px}

/* 人物页 / 事件页 */
.person{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0 44px;align-items:start}
.p-hero{grid-column:1/-1;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--rule);box-shadow:0 3px 0 -2px var(--rule)}
.p-hero .back{font-size:13px;color:var(--muted);text-decoration:none}
.p-hero h1{font-size:clamp(32px,6vw,46px);font-weight:900;line-height:1.25;margin-top:12px;letter-spacing:.1em}
.p-hero .en{font-size:15px;color:var(--muted);font-style:italic;letter-spacing:.03em}
.p-hero .line{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:14px;color:var(--ink2);letter-spacing:.08em}
.p-hero .life{font-size:17px;color:var(--qing);letter-spacing:.04em}
.p-hero p{max-width:64ch;font-size:16px;margin:14px 0 0;line-height:1.95}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:6px 16px;font-size:14px;border:1px solid var(--rule);letter-spacing:.1em}
.btn:hover{border-color:var(--ink2)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.pri:hover{background:var(--zhu);border-color:var(--zhu)}
.sec-h{font-size:15px;letter-spacing:.4em;color:var(--zhu);margin:0 0 14px;font-weight:700}
.p-side{background:var(--surface);border-left:4px double var(--rule);padding:22px 26px;margin-top:-8px}
/* 一生与时代 */
.strip{position:relative;height:138px;margin:4px 0 4px}
.s-axis{position:absolute;left:0;right:0;top:52px;border-top:1px solid var(--rule)}
.s-bar{position:absolute;top:46px;height:12px;background:color-mix(in srgb,var(--rc) 45%,transparent);border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.s-m,.s-c{position:absolute;top:52px;width:0;height:0;text-decoration:none}
.s-m i,.s-c i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.s-m.hist i{left:-5px;top:-5px;width:10px;height:10px;background:var(--zhu)}
.s-c i{background:var(--paper);border:1.6px solid var(--rc);top:14px;left:-4px;width:8px;height:8px}
.s-m b,.s-c b{position:absolute;white-space:nowrap;font-weight:400;font-size:13px;transform:translateX(-50%)}
.s-m.hist b{color:var(--zhu);font-weight:700}
.s-m b.r0{bottom:12px}.s-m b.r1{bottom:32px}
.s-c b{font-size:12px;color:var(--muted)}.s-c b.r0{top:24px}.s-c b.r1{top:42px}
.s-c:hover b{color:var(--ink)}
.a-l b{transform:none;left:-4px}.a-r b{transform:translateX(-100%);left:4px}
.s-t{position:absolute;bottom:0;transform:translateX(-50%);font-size:11px;color:var(--muted)}
.s-note{font-size:12px;color:var(--muted);margin:2px 0 14px}
.life-tl{list-style:none;margin:0;padding:0;columns:2 300px;column-gap:40px}
.li{position:relative;display:grid;grid-template-columns:54px 46px minmax(0,1fr);gap:4px;padding:9px 0;border-top:1px solid var(--line);break-inside:avoid;font-size:15px}
.li .y{display:contents}
.li .y{font-size:14px;color:var(--qing);font-variant-numeric:tabular-nums}
.li .y em{font-style:normal;font-size:12px;color:var(--muted);letter-spacing:.05em;padding-top:2px}
.li.hist .txt{font-weight:700}
.li.hist .txt a{text-decoration:none;border-bottom:1px solid var(--zhu)}
.li .txt small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.li .txt small a{border:0!important;color:var(--zhu)}
.li .badge{font-size:11px;color:var(--zhu);margin-left:6px}
.rel-group{margin-bottom:18px}
.rel-group h4{font-size:12.5px;margin:0 0 2px;letter-spacing:.3em;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:8px}
.rel-group h4 i{width:16px;border-top:2px solid;display:inline-block}
.rel{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 8px;text-decoration:none;padding:9px 0;border-bottom:1px solid var(--line)}
.rel:hover b{color:var(--zhu)}
.rel b{font-weight:700;font-size:14.5px}
.rel .rn{min-width:0}
.rel .ry,.rel .dir{font-size:12px;color:var(--muted);margin-left:8px;white-space:nowrap}
.rel .rt{font-size:11px;letter-spacing:.08em;padding:0 5px;border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);color:var(--tc);white-space:nowrap}
.rel small{grid-column:1/-1;display:block;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:2px}

/* 关系图 */
.g-bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:12px}
.g-bar h1{font-size:24px;margin-right:6px;letter-spacing:.25em}
.rt-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer;border:0;background:none;padding:2px 0;letter-spacing:.05em}
.rt-toggle i{width:16px;border-top:2px solid;display:inline-block}
.rt-toggle.off{opacity:.35;text-decoration:line-through}
.g-mode{margin-left:auto;display:flex;border:1px solid var(--rule)}
.g-mode button{border:0;background:none;padding:3px 12px;font-size:13px;cursor:pointer;letter-spacing:.1em;color:var(--muted)}
.g-mode button.on{background:var(--ink);color:var(--paper)}
.g-stage{position:relative;height:clamp(520px,calc(100vh - 170px),940px);background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
#g-svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#g-svg .band{opacity:.22;transition:opacity .4s}
#g-svg .band-lab{font-size:13px;fill:var(--ink2);letter-spacing:.3em;transition:opacity .4s}
#g-svg .era-s{stroke:var(--rule);stroke-dasharray:3 5;transition:opacity .4s}
#g-svg .era-lab{font-size:13px;fill:var(--muted);letter-spacing:.4em;transition:opacity .4s}
#g-svg.free .band,#g-svg.free .band-lab,#g-svg.free .era-s,#g-svg.free .era-lab{opacity:0}
#g-svg .lk{stroke-width:1.2;opacity:.45;transition:opacity .2s;pointer-events:none;fill:none}
#g-svg .lk.hover{stroke-width:3;opacity:1}
#g-svg .lk.dim{opacity:.05}
#g-svg .lk.hot{opacity:1;stroke-width:2.2}
#g-svg .nd{cursor:pointer;transition:opacity .2s}
#g-svg .nd circle{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:1}
#g-svg .nd text{font-size:11.5px;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none;font-family:var(--f-body)}
#g-svg .nd.dim{opacity:.18}
#g-svg .nd.focus circle{stroke:var(--zhu);stroke-width:2.5}
#g-svg .nd.focus text{font-weight:700;font-size:14px;fill:var(--zhu)}
#g-svg .nd.near text{font-weight:700}
#g-svg .nd.lbl-hide text{display:none}
#g-svg .nd.lbl-hide.focus text,#g-svg .nd.lbl-hide.near text{display:inline}
.g-panel{position:absolute;right:0;top:0;bottom:0;width:340px;overflow:auto;background:var(--surface);border-left:4px double var(--rule);padding:22px 24px}
.g-panel h3{font-size:20px}
.g-panel .yrs{font-size:13px;color:var(--muted)}
.g-panel p{font-size:13.5px;color:var(--ink2);margin:8px 0 12px;line-height:1.85}
.g-panel .btn{margin-bottom:18px}
.gp-h{font-size:22px;margin-top:6px;letter-spacing:.06em}
.g-hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--paper) 85%,transparent);padding:2px 8px;letter-spacing:.05em}
.g-zoom{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;border:1px solid var(--rule)}
.g-zoom button{width:30px;height:30px;border:0;background:var(--surface);cursor:pointer;font-size:16px;line-height:1;color:var(--ink2)}
.g-zoom button+button{border-top:1px solid var(--rule)}

@media (max-width:900px){
 .tl{grid-template-columns:minmax(0,1fr)}
 .list{padding-right:0}
 aside.detail{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:64vh;border-left:0;border-top:4px double var(--rule);z-index:50;transform:translateY(105%);transition:transform .25s ease;padding:18px max(18px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
 aside.detail.open{transform:none}
 .detail .x{display:block;position:absolute;right:12px;top:10px;border:1px solid var(--rule);background:var(--paper);width:32px;height:32px;cursor:pointer;font-size:18px}
 .person{grid-template-columns:minmax(0,1fr)}
 .p-side{margin-top:24px}
 .g-panel{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;max-height:45%;border-left:0;border-top:4px double var(--rule)}
 .g-hint{display:none}
 header.top .wrap{gap:14px 24px}
}
@media (max-width:560px){
 .list{--gutter:46px}
 .ev{grid-template-columns:minmax(0,1fr);gap:0}
 .ev .yr{font-size:13px}
 .brand small{display:none}
 .brand{letter-spacing:.15em}
 .search{flex-basis:100%;order:3}
 .s-c b,.s-m:not(.hist) b{display:none}
 .s-m.hist b.r1{bottom:12px}
 .strip{height:92px}
 .brand{font-size:19px}.brand .seal{width:32px;height:32px;font-size:12px}
 nav.tabs{gap:22px}nav.tabs a{font-size:14px}
 header.top .wrap{padding-block:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}#arcs .draw{stroke-dashoffset:0}}

/* 静态页面补充 */
.ev .t a{text-decoration:none;color:inherit}
.crumb{font-size:13px;color:var(--muted);letter-spacing:.15em}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--zhu)}
.d-year.big{font-size:15px;color:var(--qing);margin-top:12px;letter-spacing:.15em}
.morelink{display:inline-block;font-size:13.5px;color:var(--qing);text-decoration:none;margin-top:6px;border-bottom:1px solid color-mix(in srgb,var(--qing) 40%,transparent);letter-spacing:.1em}
.detail-static h2:first-child{margin-top:0}
.gp-h{font-size:22px;margin-top:6px}
.lead{max-width:62ch;color:var(--ink2);margin:6px 0 16px}
footer.site{border-top:1px solid var(--rule);margin-top:40px}
footer.site .wrap{padding-block:20px 28px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;letter-spacing:.05em}
footer.site a{color:var(--muted)}
.nf{padding-block:60px;text-align:center}
.nf h1{font-size:40px;letter-spacing:.2em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
article.person>aside .sec-h{margin-top:0}

/* 连线说明 */
#arcs .hit{pointer-events:stroke;stroke:transparent;stroke-width:12;fill:none;cursor:help}
#g-svg .hit{stroke:transparent;stroke-width:12;cursor:help;fill:none}
#g-svg .elab{font-size:10.5px;fill:var(--ink2);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;pointer-events:none;display:none}
#g-svg .elab.show{display:inline}
.tip{position:fixed;z-index:80;max-width:300px;background:var(--raised);color:var(--ink);border:1px solid var(--rule);padding:10px 12px;font-size:13px;line-height:1.6;pointer-events:none}
.tip-k{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.15em;color:var(--muted);margin-bottom:3px}
.tip-k i{width:16px;border-top:2px solid;display:inline-block}
.tip-h{font-size:14px}
.tip-n{color:var(--ink2);margin-top:4px}