:root{
    --paper:#F6F3EC; --paper-2:#FBF9F4; --ink:#26221C; --ink-soft:#6B6459;
    --ink-faint:#A79F91; --line:#E4DDCF; --line-soft:#EFEAE0;
    --cn:#B4622F;   --cn-soft:#EBD9C9;  --cn-bg:#F3E8DE;
    --in:#8A6D3B;   --in-soft:#E4D9BF;  --in-bg:#F0E9D8;   /* 印度·姜黄赭 */
    --west:#3F5B76; --west-soft:#D3DBE3;--west-bg:#E4E9EF;
    --is:#2B7E8C;   --is-soft:#CBE0E2;  --is-bg:#DEECED;   /* 伊斯兰·波斯青 */
    --world:#5B6E5A;--world-soft:#DCE3DA;--world-bg:#E9EEE6; /* 世界横幅·橄榄 */
    --gold:#B8964E;
    --shadow:0 1px 2px rgba(60,50,35,.05),0 6px 18px rgba(60,50,35,.07);
    --shadow-lg:0 2px 8px rgba(60,50,35,.08),0 18px 44px rgba(60,50,35,.13);
    --serif:"Songti SC","STSong","Georgia",serif;
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#1B1915;--paper-2:#232019;--ink:#EDE7DA;--ink-soft:#B0A794;
      --ink-faint:#726A5B;--line:#332F27;--line-soft:#2A271F;
      --cn:#D98A56;--cn-soft:#3A2A20;--cn-bg:#2A211A;
      --in:#C7A25C;--in-soft:#33291A;--in-bg:#2A2416;
      --west:#7EA0C0;--west-soft:#232D38;--west-bg:#1F2731;
      --is:#5FB3BE;--is-soft:#1E2E30;--is-bg:#18262A;
      --world:#8FA88C;--world-soft:#242B22;--world-bg:#1E241C;--gold:#CBA85E;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
      --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
    }
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}

  /* 顶栏 */
  header{position:sticky;top:0;z-index:50;background:rgba(246,243,236,.86);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line);}
  @media (prefers-color-scheme: dark){header{background:rgba(27,25,21,.86);}}
  .header-inner{max-width:1360px;margin:0 auto;padding:13px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .brand{display:flex;align-items:baseline;gap:12px;}
  .brand h1{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.16em;}
  .brand .tag{font-size:12px;color:var(--ink-soft);letter-spacing:.02em;}
  .col-heads{display:flex;font-size:12px;font-weight:600;letter-spacing:.18em;font-family:var(--serif);}
  .col-heads span{padding:3px 14px;}
  .col-heads .h-cn{color:var(--cn);}
  .col-heads .h-in{color:var(--in);border-left:1px solid var(--line);}
  .col-heads .h-west{color:var(--west);border-left:1px solid var(--line);}
  .col-heads .h-is{color:var(--is);border-left:1px solid var(--line);}
  .jump{border-top:1px solid var(--line-soft);background:var(--paper-2);}
  .jump-inner{max-width:1360px;margin:0 auto;padding:8px 24px;display:flex;gap:6px;
    overflow-x:auto;scrollbar-width:none;}
  .jump-inner::-webkit-scrollbar{display:none;}
  .chip{flex:none;font-size:12px;font-family:var(--serif);letter-spacing:.05em;
    color:var(--cn);border:1px solid var(--cn-soft);background:transparent;
    padding:3px 11px;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap;}
  .chip:hover{background:var(--cn-soft);}

  /* 序言 */
  .intro{max-width:660px;margin:0 auto;padding:60px 24px 36px;text-align:center;}
  .intro .em{font-family:var(--serif);font-size:13px;letter-spacing:.42em;color:var(--gold);
    text-transform:uppercase;margin-bottom:20px;}
  .intro h2{font-family:var(--serif);font-size:clamp(28px,4.6vw,44px);font-weight:600;
    line-height:1.32;letter-spacing:.03em;margin-bottom:20px;}
  .intro p{font-size:15px;line-height:1.85;color:var(--ink-soft);max-width:54ch;margin:0 auto;}
  .intro .scroll-cue{margin-top:34px;font-size:12px;color:var(--ink-faint);letter-spacing:.1em;
    display:flex;flex-direction:column;align-items:center;gap:6px;}
  .intro .scroll-cue svg{width:18px;height:18px;opacity:.5;animation:bob 2s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

  /* 主体：三栏 + 年代 gutter */
  .rail{max-width:1360px;margin:0 auto;padding:0 24px 120px;position:relative;}
  .rows{position:relative;}
  /* 三条竖脊线 */
  .rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:1px;
    background:var(--line-soft);z-index:0;}

  .layer{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;position:relative;
    align-items:start;padding-left:60px;}
  /* 年代 gutter（最左侧） */
  .ynode{position:absolute;left:0;top:0;width:56px;text-align:right;z-index:3;}
  .ynode .y{font-family:var(--serif);font-size:11.5px;font-variant-numeric:tabular-nums;
    color:var(--ink-faint);white-space:nowrap;letter-spacing:.02em;background:var(--paper);
    padding:2px 4px;border-radius:6px;display:inline-block;}
  .ynode .y.major{color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line);}
  .ynode::after{content:"";position:absolute;left:60px;top:8px;width:0;}
  /* gutter 竖线 */
  .rail .spine-gutter{position:absolute;left:calc(24px + 60px);top:0;bottom:0;width:2px;
    background:var(--line);z-index:0;}

  .cell{min-width:0;}
  .era-card{background:var(--paper-2);border-radius:13px;padding:14px 15px;box-shadow:var(--shadow);
    border:1px solid var(--line-soft);position:relative;cursor:pointer;
    transition:box-shadow .3s,transform .3s;opacity:0;transform:translateY(20px);}
  .era-card.in{opacity:1;transform:translateY(0);}
  .era-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
  .cell.cn  .era-card{border-left:3px solid var(--cn);}
  .cell.in  .era-card{border-left:3px solid var(--in);}
  .cell.west .era-card{border-left:3px solid var(--west);}
  .cell.is  .era-card{border-left:3px solid var(--is);}

  .era-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
  .era-name{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.02em;line-height:1.14;}
  .cell.cn .era-name{color:var(--cn);}
  .cell.in .era-name{color:var(--in);}
  .cell.west .era-name{color:var(--west);}
  .cell.is .era-name{color:var(--is);}
  .era-sub{font-size:11.5px;color:var(--ink-faint);letter-spacing:.05em;}
  .era-range{font-family:var(--serif);font-size:11.5px;color:var(--ink-faint);margin-top:4px;
    font-variant-numeric:tabular-nums;}
  .era-desc{font-size:12.8px;line-height:1.65;color:var(--ink-soft);margin-top:9px;}
  .era-detail{max-height:0;overflow:hidden;transition:max-height .45s ease;}
  .era-card.hovering .era-detail,
  .era-card.pinned .era-detail{max-height:720px;}
  /* 固定态：加重阴影 + 右上角金色小圆点 */
  .era-card.pinned{box-shadow:var(--shadow-lg);}
  .era-card.pinned::after{content:"";position:absolute;top:12px;right:13px;width:6px;height:6px;
    border-radius:50%;background:var(--gold);opacity:.75;}
  .facts{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
    display:flex;flex-direction:column;gap:7px;}
  .fact{font-size:12px;line-height:1.55;color:var(--ink-soft);display:flex;gap:8px;}
  .fact .k{flex:none;font-family:var(--serif);font-weight:600;min-width:32px;}
  .cell.cn .fact .k{color:var(--cn);}
  .cell.in .fact .k{color:var(--in);}
  .cell.west .fact .k{color:var(--west);}
  .cell.is .fact .k{color:var(--is);}
  /* 今址：地点小图标 + 金色标签，呼应"现今位置"这一层 */
  .fact.fact-geo{color:var(--ink-faint);}
  .cell .fact.fact-geo .k{color:var(--gold);}
  .fact.fact-geo .pin{width:11px;height:11px;flex:none;display:inline-block;
    vertical-align:-1px;margin-right:4px;color:var(--gold);opacity:.85;}
  .anchors{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);
    display:flex;flex-direction:column;gap:6px;}
  .anchor{display:flex;gap:9px;align-items:baseline;font-size:11.5px;color:var(--ink-soft);}
  .anchor .yr{font-family:var(--serif);font-variant-numeric:tabular-nums;flex:none;min-width:46px;font-size:11px;}
  .cell.cn .anchor .yr{color:var(--cn);}
  .cell.in .anchor .yr{color:var(--in);}
  .cell.west .anchor .yr{color:var(--west);}
  .cell.is .anchor .yr{color:var(--is);}
  .note{margin-top:11px;font-size:11px;line-height:1.55;color:var(--gold);
    display:flex;gap:6px;align-items:flex-start;}
  .note svg{flex:none;width:12px;height:12px;margin-top:2px;opacity:.8;}
  .approx-badge{display:inline-block;font-size:9.5px;letter-spacing:.03em;color:var(--gold);
    border:1px solid var(--gold);border-radius:4px;padding:0 4px;opacity:.85;vertical-align:middle;}
  .expand-hint{margin-top:9px;font-size:10.5px;color:var(--ink-faint);letter-spacing:.03em;
    display:flex;align-items:center;gap:5px;}
  .expand-hint svg{width:11px;height:11px;transition:transform .3s;}
  .era-card.hovering .expand-hint svg,
  .era-card.pinned .expand-hint svg{transform:rotate(180deg);}
  .expand-hint .lbl-hov,.expand-hint .lbl-pin{display:none;}
  .era-card.hovering:not(.pinned) .expand-hint .lbl-rest{display:none;}
  .era-card.hovering:not(.pinned) .expand-hint .lbl-hov{display:inline;}
  .era-card.pinned .expand-hint .lbl-rest{display:none;}
  .era-card.pinned .expand-hint .lbl-hov{display:none;}
  .era-card.pinned .expand-hint .lbl-pin{display:inline;}
  .era-card.pinned .expand-hint{color:var(--gold);}

  /* 世界横幅：跨三栏 */
  .world-band{grid-column:1 / -1;margin-top:6px;background:var(--world-bg);
    border:1px solid var(--world-soft);border-radius:12px;padding:12px 18px;
    display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    opacity:0;transform:translateY(14px);transition:all .5s;}
  .world-band.in{opacity:1;transform:translateY(0);}
  .world-band .wlabel{font-family:var(--serif);font-size:11px;letter-spacing:.2em;
    color:var(--world);font-weight:600;flex:none;display:flex;align-items:center;gap:7px;}
  .world-band .wlabel svg{width:13px;height:13px;opacity:.7;}
  .world-band .witems{display:flex;gap:8px;flex-wrap:wrap;flex:1;}
  .world-band .witem{font-size:12px;color:var(--ink-soft);background:var(--paper-2);
    border:1px solid var(--world-soft);border-radius:16px;padding:3px 12px;line-height:1.5;
    cursor:help;position:relative;transition:background .2s,border-color .2s,color .2s,transform .2s;}
  .world-band .witem:hover,.world-band .witem:focus-visible{background:var(--world-soft);
    border-color:var(--world);color:var(--ink);transform:translateY(-1px);outline:none;}
  .world-band .witem .wdot{display:inline-block;width:4px;height:4px;border-radius:50%;
    background:var(--world);opacity:.5;margin-left:6px;vertical-align:middle;transition:opacity .2s;}
  .world-band .witem:hover .wdot,.world-band .witem:focus-visible .wdot{opacity:1;}

  /* 悬停气泡（横幅详解） */
  .wtip{position:absolute;z-index:100;width:322px;max-width:calc(100vw - 24px);
    opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;}
  .wtip.show{opacity:1;visibility:visible;transform:translateY(0);}
  .wtip-inner{background:var(--paper-2);border:1px solid var(--world-soft);
    border-radius:13px;box-shadow:var(--shadow-lg);padding:15px 17px;}
  .wtip-arrow{position:absolute;width:11px;height:11px;background:var(--paper-2);
    border:1px solid var(--world-soft);transform:rotate(45deg);}
  .wtip[data-place="top"] .wtip-arrow{bottom:-6px;border-top:none;border-left:none;}
  .wtip[data-place="bottom"] .wtip-arrow{top:-6px;border-bottom:none;border-right:none;}
  .wtip-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
  .wtip-title{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.03em;color:var(--world);}
  .wtip-sub{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;}
  .wtip-range{font-family:var(--serif);font-size:11.5px;color:var(--ink-faint);
    font-variant-numeric:tabular-nums;margin-top:4px;}
  .wtip-body{font-size:12.6px;line-height:1.68;color:var(--ink-soft);margin-top:10px;}
  .wtip-facts{list-style:none;margin:11px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);
    display:flex;flex-direction:column;gap:6px;}
  .wtip-facts li{position:relative;padding-left:15px;font-size:11.8px;line-height:1.55;color:var(--ink-soft);}
  .wtip-facts li::before{content:"";position:absolute;left:3px;top:7px;width:4px;height:4px;
    border-radius:50%;background:var(--world);opacity:.7;}

  /* 同代呼应卡：跨三栏 */
  .echo{grid-column:1 / -1;margin-top:6px;
    background:linear-gradient(120deg,var(--cn-bg),var(--in-bg),var(--west-bg));
    border-radius:15px;padding:18px 24px;box-shadow:var(--shadow);text-align:center;
    border:1px solid var(--line-soft);opacity:0;transform:scale(.97);transition:all .5s;}
  .echo.in{opacity:1;transform:scale(1);}
  .echo .echo-em{font-family:var(--serif);font-size:11px;letter-spacing:.3em;color:var(--gold);margin-bottom:8px;}
  .echo .pair{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:8px;
    display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
  .echo .pair .c{color:var(--cn);} .echo .pair .w{color:var(--west);} .echo .pair .x{color:var(--ink-faint);font-size:13px;}
  .echo .echo-t{font-size:12.5px;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 auto;}

  footer{max-width:760px;margin:0 auto;padding:0 24px 80px;text-align:center;}
  footer .rule{width:40px;height:1px;background:var(--line);margin:0 auto 22px;}
  footer p{font-size:12px;line-height:1.9;color:var(--ink-faint);}

  /* 中屏：四栏字号与间距收紧 */
  @media (max-width:1200px){
    .era-name{font-size:17.5px;}
    .era-card{padding:12px 13px;}
    .layer{gap:10px;padding-left:52px;}
    .ynode{width:46px;}
    .rail .spine-gutter{left:calc(24px + 48px);}
    .era-desc{font-size:12.3px;}
  }
  @media (max-width:920px){
    .era-name{font-size:16px;}
    .era-card{padding:11px 11px;border-radius:11px;}
    .layer{gap:8px;}
    .fact,.anchor{font-size:11px;}
  }
  /* 手机：单列，三文明依次堆叠在同一年代节点下 */
  @media (max-width:720px){
    .col-heads{display:none;}
    .layer{grid-template-columns:1fr;gap:8px;padding-left:16px;padding-top:2px;}
    .ynode{position:relative;width:auto;text-align:left;margin-bottom:4px;left:0;}
    .ynode .y{background:transparent;padding:0;}
    .rail::before,.rail::after,.rail .spine-gutter{display:none;}
    .rail{padding:0 14px 100px;}
    .cell .era-card{margin-bottom:2px;}
    .cell::before{font-family:var(--serif);font-size:10.5px;letter-spacing:.2em;
      display:block;margin-bottom:3px;font-weight:600;}
    .cell.cn::before{content:"中 国";color:var(--cn);}
    .cell.in::before{content:"印 度";color:var(--in);}
    .cell.west::before{content:"西 方";color:var(--west);}
    .cell.is::before{content:"伊斯兰";color:var(--is);}
    .cell:empty{display:none;}
    .era-name{font-size:20px;}
    .world-band,.echo{margin-top:4px;}
  }
  @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}