/* 科技史宇宙 Civiliverse — sample (2026-10) */
@font-face{font-family:"Civ Serif SC";src:url(../fonts/civ-serif-sc.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/ebgaramond.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/ebgaramond-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
:root{
  --night:#050a16;--sky:#0c1a36;--star:#e8eef8;--muted:#93a3bd;--faint:#5d6f8d;
  --brass:#c9a15a;--brass-hi:#e7cb8c;--brass-dk:#8f6a2c;
  --paper:#eceeea;--paper-2:#e2e6e1;--ink:#1d2633;--ink-2:#46525f;--prussian:#1f4a7a;--rule:rgba(31,74,122,.22);
  --c-tech:#f0b450;--c-idea:#63c7ff;--c-person:#ff8f7e;--c-wonder:#59e0b4;--c-disaster:#ff5865;
  --serif:"EB Garamond","Civ Serif SC","Songti SC","STSong",Georgia,serif;
  --serif-zh:"EB Garamond","Civ Serif SC","Songti SC","STSong",serif;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --kai:"Kaiti SC","STKaiti","KaiTi","BiauKai",serif;
  --panel-w:min(460px,100vw);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night);color:var(--star);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;background:radial-gradient(120% 100% at 55% 45%,#10224a 0%,#0a1630 38%,#060c1c 70%,#04070f 100%)}
#stage canvas{display:block;outline:none;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.nlabel{font:500 12.5px/1.25 var(--serif-zh);color:var(--star);white-space:nowrap;letter-spacing:.02em;
  text-shadow:0 0 3px #050a16,0 0 8px rgba(5,10,22,.95),0 0 14px rgba(5,10,22,.8);transition:opacity .25s;pointer-events:none}
.nlabel.major{font-size:14px}
.nlabel.focus{font-size:17px;color:#fff;font-weight:600}
.nlabel small{display:block;font:11px/1.2 var(--sans);color:var(--muted);letter-spacing:0;text-align:center}
.nlabel.hide{opacity:0}
.rlabel{font:600 15px/1.2 var(--serif-zh);color:rgba(232,238,248,.82);letter-spacing:.12em;white-space:nowrap;text-align:center;
  text-shadow:0 0 10px rgba(5,10,22,.95);pointer-events:none;transition:opacity .4s}
.rlabel small{display:block;font:11px/1.3 var(--sans);letter-spacing:.04em;color:var(--muted)}
.elabel{font:600 13px/1.2 var(--serif-zh);color:var(--brass-hi);letter-spacing:.14em;white-space:nowrap;text-align:center;opacity:.8;pointer-events:none;transition:opacity .4s}
.elabel small{display:block;font:11px/1.3 var(--sans);letter-spacing:.02em;color:var(--brass)}

/* ---------- top bar ---------- */
.topbar{position:fixed;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;pointer-events:none;z-index:20}
.topbar>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;padding:6px 10px 8px;border-radius:4px}
.brand b{font:600 22px/1.1 var(--serif-zh);letter-spacing:.14em;color:#f4ead2}
.brand i{font:italic 500 15px/1.2 "EB Garamond",Georgia,serif;letter-spacing:.08em;color:var(--brass)}
.brand span{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.04em}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.search{position:relative}
.search input{width:min(280px,46vw);padding:8px 12px 8px 32px;border-radius:999px;border:1px solid rgba(201,161,90,.45);background:rgba(8,15,32,.78);color:var(--star);font:14px var(--sans);outline:none}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--brass-hi);background:rgba(10,20,44,.92)}
.search>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--brass)}
.results{position:absolute;right:0;top:calc(100% + 6px);width:min(340px,92vw);background:rgba(8,15,32,.97);border:1px solid rgba(201,161,90,.35);border-radius:8px;padding:4px;display:none;max-height:60vh;overflow:auto}
.results.on{display:block}
.results button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:7px 8px;border-radius:5px;cursor:pointer}
.results button:hover,.results button.sel{background:rgba(201,161,90,.16)}
.results .t{font:600 14px var(--serif-zh)}
.results .m{font-size:12px;color:var(--muted)}
.chip{appearance:none;border:1px solid rgba(201,161,90,.45);background:rgba(8,15,32,.78);color:#f1e6c9;padding:7px 13px;border-radius:999px;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2}
.chip:hover{background:rgba(24,40,74,.92)}
.chip[aria-pressed="true"]{background:var(--brass);color:#0b1428;border-color:var(--brass)}
.ico{display:inline-block;width:22px;height:22px;flex:none}
.ico>svg{display:block;width:100%;height:100%}

/* ---------- tooltip ---------- */
.tip{position:fixed;z-index:30;max-width:300px;padding:10px 12px;border-radius:8px;background:rgba(7,13,28,.95);border:1px solid rgba(201,161,90,.4);
  box-shadow:0 8px 30px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.tip.on{opacity:1;transform:none}
.tip .h{display:flex;gap:8px;align-items:center}
.tip .h b{font:600 15px/1.3 var(--serif-zh)}
.tip .d{font-size:12px;color:var(--muted);margin:2px 0 4px}
.tip p{margin:0;font-size:13px;line-height:1.55;color:#d6deeb}
.tip .rel{margin-top:6px;padding-top:6px;border-top:1px solid rgba(201,161,90,.25);font-size:12.5px;color:var(--brass-hi)}

/* ---------- zoom ruler ---------- */
.ruler{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:0;user-select:none}
.ruler .track{position:relative;width:34px;height:250px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.ruler .track::before{content:"";position:absolute;right:8px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--brass),rgba(201,161,90,.25))}
.ruler button{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:2px 0;color:var(--muted);font-size:12px;white-space:nowrap}
.ruler button i{display:block;width:17px;height:1px;background:var(--brass)}
.ruler button span{opacity:0;transform:translateX(6px);transition:.2s}
.ruler:hover button span,.ruler button.cur span{opacity:1;transform:none}
.ruler button.cur{color:var(--brass-hi)}
.ruler .knob{position:absolute;right:3px;width:11px;height:11px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 0 3px rgba(201,161,90,.25);transition:top .15s linear;pointer-events:none}

/* ---------- legend ---------- */
.legend{position:fixed;left:16px;bottom:96px;z-index:15;background:rgba(7,13,28,.82);border:1px solid rgba(201,161,90,.28);border-radius:10px;padding:10px 12px;font-size:12.5px;max-width:270px}
.legend summary{cursor:pointer;color:var(--brass-hi);font:600 13px var(--serif-zh);list-style:none;display:flex;justify-content:space-between;gap:12px}
.legend summary::-webkit-details-marker{display:none}
.legend[open] summary{margin-bottom:6px}
.legend .row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:3px 2px;cursor:pointer;color:var(--star);text-align:left;border-radius:4px}
.legend .row[aria-pressed="false"]{opacity:.38}
.legend .row:hover{background:rgba(201,161,90,.1)}
.legend .sw{display:inline-flex;width:26px;height:10px;flex:none}
.legend h4{margin:8px 0 2px;font:12px var(--sans);color:var(--muted);font-weight:500}

/* ---------- timeline ---------- */
.timeline{position:fixed;left:16px;right:16px;bottom:12px;height:66px;z-index:14;user-select:none}
.timeline .bar{position:absolute;left:0;right:0;bottom:0;height:40px;border-top:1px solid rgba(201,161,90,.55);cursor:pointer}
.timeline .era{position:absolute;bottom:0;height:40px;border-left:1px solid rgba(201,161,90,.35);padding:16px 0 0 6px;font:12px/1.2 var(--serif-zh);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline .era b{font-weight:600;color:#cdd7e6}
.timeline .ticks{position:absolute;left:0;right:0;bottom:40px;height:22px}
.timeline .tk{position:absolute;bottom:0;width:3px;height:10px;border-radius:2px;margin-left:-1px;cursor:pointer;opacity:.85}
.timeline .tk.major{height:16px}
.timeline .tk:hover{opacity:1;transform:scaleY(1.3)}
.timeline .view{position:absolute;bottom:0;height:62px;border:1px solid rgba(231,203,140,.65);border-bottom:0;background:rgba(201,161,90,.08);border-radius:3px 3px 0 0;pointer-events:none;transition:left .08s linear,width .08s linear}
.timeline .now{position:absolute;bottom:44px;font:11px var(--sans);color:var(--brass-hi);transform:translateX(-50%);white-space:nowrap;pointer-events:none}

/* ---------- panel (encyclopedia) ---------- */
.panel{position:fixed;right:0;top:0;bottom:0;width:var(--panel-w);z-index:25;background:var(--paper);color:var(--ink);
  transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:-18px 0 60px rgba(0,0,0,.45);display:flex;flex-direction:column}
.panel.on{transform:none}
.panel .scroll{overflow-y:auto;overscroll-behavior:contain;padding:22px 28px 60px;flex:1}
.panel .close{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--paper);cursor:pointer;color:var(--prussian);font-size:20px;line-height:1;z-index:2}
.panel .close:hover{background:var(--paper-2)}
.panel .grab{display:none;position:absolute;left:50%;top:0;transform:translateX(-50%);width:140px;height:24px;border:0;background:none;cursor:pointer;z-index:2}
.panel .grab::before{content:"";position:absolute;left:50%;top:9px;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:rgba(31,74,122,.35)}
.pk{display:flex;align-items:center;gap:10px;margin:2px 0 10px;color:var(--prussian);font-size:13px}
.pk .badge{width:42px;height:42px;flex:none}
.panel h2{margin:0;font:600 30px/1.2 var(--serif-zh);color:#12203a;letter-spacing:.02em}
.panel .alt{margin:4px 0 0;font:italic 17px/1.3 "EB Garamond",var(--serif-zh);color:var(--ink-2)}
.meta{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:14px 0 4px;font-size:13.5px}
.meta dt{color:var(--ink-2)}
.meta dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tags span{font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--prussian)}
.tagline{margin:16px 0 0;font:17px/1.6 var(--kai);color:#253247}
.quote{margin:18px 0 0;padding:12px 16px;border-left:3px solid var(--brass-dk);background:rgba(31,74,122,.05)}
.quote p{margin:0;font:16px/1.75 var(--kai);color:#1e2a3b}
.quote cite{display:block;margin-top:6px;font:normal 12.5px/1.5 var(--sans);color:var(--ink-2)}
.fig{margin:20px -28px 0;background:#d9ddd7}
.fig .frame{position:relative;cursor:zoom-in;background:#1a1f28}
.fig img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;background:#141a24}
.fig .tabs{position:absolute;left:12px;bottom:10px;display:flex;gap:6px}
.fig .tabs button{border:0;border-radius:999px;padding:3px 10px;font-size:12px;background:rgba(10,18,36,.72);color:#f2e7cc;cursor:pointer}
.fig .tabs button[aria-pressed="true"]{background:var(--brass);color:#0b1428}
.fig figcaption{padding:10px 28px 12px;font-size:13px;line-height:1.55;color:#2c3746}
.fig figcaption small{display:block;margin-top:4px;font-size:11.5px;color:#5b6674}
.ai{display:inline-block;font-size:11px;padding:1px 7px;border-radius:3px;background:#1f4a7a;color:#eef2f7;margin-right:6px;vertical-align:1px}
.models{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.models button{display:flex;align-items:center;gap:8px;border:1px solid var(--prussian);background:#1f4a7a;color:#f3f6fa;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:14px}
.models button:hover{background:#163a62}
.models svg{width:18px;height:18px;fill:currentColor}
.sec{margin:26px 0 0}
.sec h3{margin:0 0 8px;font:600 15px/1.3 var(--serif-zh);color:var(--prussian);letter-spacing:.16em;display:flex;align-items:center;gap:10px}
.sec h3::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec p{margin:0 0 10px;font-size:15.5px;line-height:1.85;text-align:justify}
.lang-en .sec p{line-height:1.7;text-align:left;hyphens:auto}
.sec.comment{padding:14px 16px 6px;background:rgba(201,161,90,.12);border-radius:3px}
.sec.comment h3{color:#7a5621}
.sec.comment h3::after{background:rgba(143,106,44,.3)}
.rels h4{margin:14px 0 6px;font:600 13px var(--sans);color:var(--ink-2);letter-spacing:.04em}
.rel{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--rule);padding:8px 2px;cursor:pointer;color:var(--ink)}
.rel:hover{background:rgba(31,74,122,.06)}
.rel .badge{width:28px;height:28px;flex:none;margin-top:1px}
.rel b{font:600 15px/1.3 var(--serif-zh);color:#13223d}
.rel em{font-style:normal;font-size:11.5px;color:#7a5621;margin-left:6px;white-space:nowrap}
.rel span{display:block;font-size:13px;line-height:1.5;color:#3d4957}
.refs{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:#33404f}
.refs li{margin:2px 0}
.caveats{margin:0;padding-left:18px;font-size:13px;color:#4d5866}
.pfoot{margin:28px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-2);display:flex;gap:14px;flex-wrap:wrap}
.pfoot a{color:var(--prussian)}

/* ---------- overlays ---------- */
.intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 1.2s}
.intro .card{text-align:center;max-width:640px;padding:24px}
.intro h1{margin:0;font:600 clamp(40px,7vw,76px)/1.05 var(--serif-zh);letter-spacing:.24em;color:#f6ecd3;text-shadow:0 0 40px rgba(201,161,90,.35);padding-left:.24em}
.intro .en{display:block;margin-top:10px;font:italic 500 clamp(18px,2.4vw,26px)/1.2 "EB Garamond",serif;letter-spacing:.18em;color:var(--brass)}
.intro p{margin:20px auto 0;max-width:470px;font-size:15.5px;line-height:1.7;color:#c9d3e3}
.intro button{pointer-events:auto;margin-top:22px}
.intro.off{opacity:0}
.tour{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:22;width:min(620px,calc(100vw - 32px));background:rgba(7,13,28,.94);border:1px solid rgba(201,161,90,.45);border-radius:10px;padding:12px 16px;display:none}
.tour.on{display:block}
.tour .tt{font:600 13px var(--serif-zh);color:var(--brass-hi);letter-spacing:.08em}
.tour .tn{margin:3px 0 2px;font:600 18px var(--serif-zh)}
.tour .tx{margin:0;font-size:14px;line-height:1.6;color:#d4dceb;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tour .tb{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;align-items:center}
.tour .tb span{margin-right:auto;font-size:12px;color:var(--muted)}
.menu{position:fixed;right:18px;top:62px;z-index:26;width:min(340px,92vw);background:rgba(7,13,28,.97);border:1px solid rgba(201,161,90,.35);border-radius:10px;padding:8px;display:none}
.menu.on{display:block}
.menu h4{margin:6px 8px;font:600 13px var(--serif-zh);color:var(--brass-hi);letter-spacing:.08em}
.menu button,.menu a{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:6px;cursor:pointer;text-decoration:none;color:var(--star)}
.menu button:hover,.menu a:hover{background:rgba(201,161,90,.12)}
.menu small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.viewer{position:fixed;inset:0;z-index:50;background:#050a16;display:none}
.viewer.on{display:block}
.viewer .mv-root{position:absolute;inset:50px 0 0 0}
.viewer::before{content:"";position:absolute;left:0;right:0;top:0;height:50px;background:linear-gradient(#0a1428,#050a16);border-bottom:1px solid rgba(201,161,90,.25)}
.viewer .x{position:absolute;right:12px;top:8px;z-index:5}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(3,6,14,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lightbox.on{display:flex}
.lightbox img{max-width:min(1400px,96vw);max-height:80vh;object-fit:contain}
.lightbox p{max-width:860px;font-size:13.5px;color:#c9d3e3;text-align:center}
.lightbox .x{position:absolute;right:14px;top:12px}
.loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font:600 14px var(--serif-zh);letter-spacing:.3em;color:var(--brass);z-index:5}
.nogl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}

.panel .alt{font-synthesis:none}
.chip .mi{width:15px;height:15px;vertical-align:-3px;margin-right:6px}

@media (max-width:820px){
  .brand b{font-size:18px}.brand span{display:none}
  .legend{display:none}
  .ruler{display:none}
  .timeline{height:52px;left:8px;right:8px}
  .timeline .era{font-size:10px;padding:18px 0 0 3px}
  .timeline .era b{font-weight:500}
  .panel{top:auto;height:86vh;width:100%;border-radius:14px 14px 0 0;transform:translateY(104%)}
  .panel.on{transform:translateY(30vh)}
  .panel.on.full{transform:none}
  .panel .grab{display:block}
  .panel .scroll{padding-top:26px}
  .panel .scroll{padding:18px 18px 50px}
  .fig{margin:18px -18px 0}
  .fig figcaption{padding:10px 18px 12px}
  .tour{bottom:66px;padding:10px 14px}
  .tour .tx{-webkit-line-clamp:4;font-size:13.5px}
  .tour .tn{font-size:16px}
  .search input{width:42vw}
  .chip.hide-s{display:none}
}
@media (max-width:560px){
  .topbar{padding:10px 12px}
  .brand{padding:4px 4px 6px;white-space:nowrap}
  .tools{gap:6px;flex-wrap:nowrap}
  .search{width:36px;height:34px}
  .search input{position:absolute;right:0;top:0;width:36px;height:34px;padding:0 0 0 34px;color:transparent;cursor:pointer;transition:width .22s,background .22s}
  .search input::placeholder{color:transparent}
  .search input:focus{width:calc(100vw - 24px);padding-right:12px;color:var(--star);cursor:text;z-index:3}
  .search input:focus::placeholder{color:var(--faint)}
  .search>svg{z-index:4;pointer-events:none}
  .results{width:calc(100vw - 24px)}
  #menuBtn .lbl{display:none}
  #menuBtn .mi{margin-right:0}
  .chip{padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){.panel,.tip,.intro{transition:none}}