@font-face{font-family:Research Sans;src:url('/static/fonts/inter.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:Research CJK;src:url('/static/fonts/notosanssc-ui.woff') format('woff');font-weight:100 900;font-display:swap}

:root{
  --paper:#faf9f5; --ink:#24261f; --muted:#76786d; --weak:#b9bab0; --line:#e8e7df; --surface:#f1f0e9;
  --down:#c8785d; --down-soft:rgba(200,120,93,.22);
  --up:#4f7d6e;   --up-soft:rgba(79,125,110,.2);
  --ease:cubic-bezier(.22,.8,.24,1);
  font-family:Research Sans,Research CJK,"Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6; color:var(--ink); background:var(--paper);
  font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper)}
a{color:inherit}
.muted{color:var(--muted)}
.warn{color:var(--down)}

/* page-to-page: header stays put, content cross-fades (Chromium view transitions) */
@view-transition{navigation:auto}
.top{view-transition-name:top}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- top bar: four words, one sliding underline, data freshness on the right */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:40px;
  padding:16px max(24px,calc(50vw - 520px));background:rgba(250,249,245,.9);backdrop-filter:blur(8px)}
.mark{font-family:Georgia,serif;font-size:20px;letter-spacing:.5px;text-decoration:none}
nav{position:relative;display:flex;gap:28px}
nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:4px 0;transition:color .3s}
nav a.on,nav a:hover{color:var(--ink)}
.nav-ink{position:absolute;bottom:-2px;left:0;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .45s var(--ease),width .45s var(--ease)}
.fresh{margin-left:auto;display:flex;gap:14px;font-size:12px;color:var(--weak);white-space:nowrap}
.fresh span.new{color:var(--ink)}
.fresh span.new::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--down);margin-right:5px;vertical-align:1px}

main{max-width:1040px;margin:0 auto;padding:0 24px 120px}
.chapter{min-height:92vh;padding:9vh 0 6vh;border-bottom:1px solid var(--line);scroll-margin-top:56px}
.chapter:last-child{border-bottom:0}
.layer{margin-top:13vh}

.kicker{margin:0 0 10px;color:var(--muted);font-size:13px;letter-spacing:.3px}
h1{margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:500;line-height:1.3;letter-spacing:-.5px;max-width:900px}
h2{margin:0;font-size:clamp(21px,2.4vw,27px);font-weight:500;line-height:1.35;letter-spacing:-.3px;max-width:880px}
h1 b,h2 b{font-weight:600}
.down{color:var(--down)} .up{color:var(--up)}
.sub{margin:12px 0 0;color:var(--muted);font-size:16px;max-width:780px}
.sub b{color:var(--ink);font-weight:500}
.hint{margin:6px 0 0;color:var(--weak);font-size:12px}
.foot{margin:20px 0 0;color:var(--muted);font-size:12px;max-width:780px;line-height:1.7}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 8px;vertical-align:-1px}
.sw.down{background:var(--down-soft)} .sw.up{background:var(--up-soft)}
.tag{display:inline-block;font-size:11px;line-height:1.5;padding:0 5px;border-radius:4px;background:var(--surface);color:var(--muted);font-weight:400;vertical-align:1px}
.has-peer{color:var(--down);font-weight:700}

/* numbers that can explain themselves */
.ev{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;
  text-underline-offset:5px;text-decoration-color:var(--weak);transition:text-decoration-color .2s}
.ev:hover{text-decoration-color:currentColor}

.swap{transition:opacity .25s ease,transform .25s ease}
.swap.out{opacity:0;transform:translateY(4px)}

.plot{margin:36px 0 0;position:relative}
.plot svg{display:block;width:100%;overflow:visible}
.axis text{fill:var(--muted);font-size:11px}
.axis text.yr{fill:var(--ink);font-size:12px}
.axis line{stroke:var(--line)}
.lbl{font-size:12px;fill:var(--muted)}
.lbl.strong{fill:var(--ink);font-weight:500}
.hit{fill:transparent;cursor:pointer}
.focus-line{stroke:var(--ink);stroke-width:1;opacity:.25;transition:transform .35s var(--ease)}
.dot{transition:transform .35s var(--ease)}

.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;
  line-height:1.6;padding:8px 10px;border-radius:6px;max-width:280px;transform:translate(-50%,-110%)}
.tip b{font-weight:600}

/* ---------- seasonality grid */
.heat{display:grid;grid-template-columns:52px repeat(12,1fr) 92px;gap:3px;margin-top:32px}
.hc{font-size:12px;text-align:center;padding:9px 0;border-radius:4px;transition:outline-color .15s}
.hm{color:var(--muted);font-size:11px;padding:4px 0}
.hy{text-align:left;color:var(--muted)}
.tot{text-align:right;color:var(--muted);font-size:11px}
.cell{cursor:pointer;background:rgba(200,120,93,var(--a));outline:2px solid transparent;outline-offset:-1px;
  opacity:0;transform:scale(.85);transition:opacity .35s ease calc(var(--i) * 9ms),transform .45s var(--ease) calc(var(--i) * 9ms),outline-color .15s}
.played .cell{opacity:1;transform:none}
.cell{border:1px solid transparent}
.cell.round{border:1px dashed rgba(36,38,31,.35)}
.hc.lit{outline-color:var(--ink)}
.hm.lit,.hy.lit{color:var(--ink);outline:0}
.empty{background:var(--surface);opacity:.5}

/* ---------- models */
.months{display:flex;gap:2px;margin:30px 0 8px;overflow-x:auto;scrollbar-width:none}
.months span{flex:1 0 auto;min-width:54px;text-align:center;font-size:12px;color:var(--weak);
  padding:8px 0 6px;cursor:pointer;border-bottom:2px solid var(--line);transition:color .25s,border-color .25s}
.months span:hover{color:var(--muted)}
.months span.on{color:var(--ink);border-color:var(--ink)}
.rank{list-style:none;margin:12px 0 0;padding:0;position:relative;transition:height .45s var(--ease)}
.rank li{position:absolute;left:0;right:0;cursor:pointer;transition:transform .6s var(--ease),opacity .4s}
.row{display:grid;grid-template-columns:170px 1fr 92px 78px;align-items:center;gap:14px;height:44px}
.row .name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .bar{height:14px;border-radius:3px;background:var(--ink);transition:width .6s var(--ease),background .3s}
.row .val{text-align:right;font-size:14px}
.row .chg{text-align:right;font-size:12px;color:var(--weak)}
.chg.down{color:var(--down)} .chg.up{color:var(--up)}
.rank li.other .bar{background:var(--weak)}
.rank li:hover .bar{background:#000}
.rank li.dim{opacity:.35}
.spark{height:0;overflow:hidden;transition:height .45s var(--ease);cursor:default}
.spark svg{display:block;width:100%;overflow:visible}
.peer-head{margin:6px 0 8px;font-size:13px;color:var(--ink)}
.peer-head .muted{font-size:12px;margin-left:4px}
.share{display:grid;gap:6px;padding:4px 0 8px}
.share div{display:grid;grid-template-columns:44px 1fr 56px 130px;align-items:center;gap:10px;font-size:13px}
.share i{display:block;height:12px;border-radius:3px;background:var(--ink);width:var(--w);transition:width .6s var(--ease)}
.share .muted{font-size:12px;text-align:right}

.tiles{display:grid;gap:26px 18px;margin-top:32px}
.tile{opacity:0;transform:translateY(12px);transition:opacity .4s ease calc(var(--i) * 60ms),transform .5s var(--ease) calc(var(--i) * 60ms)}
.played .tile{opacity:1;transform:none}
.tile-h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:2px}
.tile svg{display:block;overflow:visible}
.tile .alt{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:4 3}
.tile .bridge{fill:none;stroke:var(--weak);stroke-width:1.2;stroke-dasharray:1 4;stroke-linecap:round}
.tile .pre{fill:var(--line);opacity:.35}
.tile .pk{transition:opacity .2s}
.tile-f{font-size:12px;color:var(--muted);margin-top:4px}
.tile .xh{stroke:var(--ink);opacity:0;transition:opacity .2s}

/* ---------- evidence drawer */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(36,38,31,.18);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:21;width:min(480px,100vw);background:var(--paper);
  box-shadow:-12px 0 40px rgba(36,38,31,.12);transform:translateX(100%);transition:transform .42s var(--ease);overflow-y:auto}
.dw-open .scrim{opacity:1;pointer-events:auto}
.dw-open .drawer{transform:none}
.drawer-in{padding:28px 28px 60px}
.drawer-x{position:absolute;top:16px;right:16px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:6px}
.drawer h2{font-size:20px;margin-bottom:6px}
.drawer h3{font-size:13px;font-weight:500;color:var(--muted);margin:22px 0 8px}
.dw-big{font-size:32px;font-weight:600;letter-spacing:-.5px;margin:0 0 18px;min-height:1.2em}
.drawer p{font-size:13px;line-height:1.7}
.rec{border-top:1px solid var(--line);padding:12px 0}
.rec-head{display:flex;gap:8px;align-items:baseline;font-size:13px}
.rec-head b{font-size:16px;margin-left:auto}
.rec-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin-top:2px}
.rec-src{display:flex;flex-direction:column;gap:1px;font-size:12px;margin-top:6px}
.src-title{color:var(--ink)}
table.mini{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
table.mini th{font-weight:500;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
table.mini td{padding:4px 6px;border-bottom:1px solid var(--line)}
table.mini td:not(:first-child),table.mini th:not(:first-child){text-align:right}
dl.fields{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;font-size:13px;margin:0}
dl.fields dt{color:var(--muted)} dl.fields dd{margin:0;word-break:break-all}

/* ---------- 资料库 */
.lib{padding-top:8vh}
.search{display:block;width:100%;max-width:720px;margin:28px 0 0;font:inherit;font-size:17px;padding:14px 16px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.search:focus{border-color:var(--weak);box-shadow:0 0 0 4px rgba(36,38,31,.05)}
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 32px;margin-top:36px;
  transition:opacity .3s,transform .4s var(--ease)}
.ix-g h3{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 6px}
.ix-g a{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px;text-decoration:none;border-bottom:1px solid transparent}
.ix-g a:hover{border-color:var(--line)}
.tableview{display:none}
.in-table .index{display:none}
.in-table .tableview{display:block;animation:rise .4s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#crumb a{color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:26px 0 10px;font-size:13px;color:var(--muted)}
.meta #csv{margin-left:auto}
.chip{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:3px 10px;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--weak)}
.tablebox{overflow-x:auto;border-top:1px solid var(--line)}
table.grid{border-collapse:collapse;font-size:13px;width:100%}
table.grid th{position:sticky;top:0;background:var(--paper);font-weight:500;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
table.grid th:hover{color:var(--ink)}
table.grid td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.grid .num{text-align:right}
table.grid td.fv{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
table.grid td.fv:hover{text-decoration-color:var(--weak)}
table.grid td.round{color:var(--muted)}
table.grid tbody tr{cursor:pointer;transition:background .2s,opacity .35s ease var(--d),transform .35s var(--ease) var(--d)}
table.grid tbody tr:hover{background:var(--surface)}
table.grid tbody tr.fresh{opacity:0;transform:translateY(6px)}
.more[hidden]{display:none}
.more{display:block;margin:18px auto 0;font:inherit;font-size:13px;border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px}

@media (max-width:860px){.fresh{display:none}}
@media (max-width:640px){
  .top{gap:20px;padding:14px 16px}
  nav{gap:18px}
  main{padding:0 16px 80px}
  .row{grid-template-columns:110px 1fr 64px 60px;gap:8px}
  .row .name{font-size:13px}
  .heat{grid-template-columns:38px repeat(12,1fr);gap:2px}
  .heat .tot{display:none}
  .hc{font-size:9px;padding:7px 0}
  .share div{grid-template-columns:36px 1fr 48px}
  .share .muted{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .cell,.tile{opacity:1;transform:none}
}

.lg{white-space:nowrap;font-size:13px;margin-left:6px}.lg i{display:inline-block;width:18px;height:0;vertical-align:middle;margin:0 4px 0 10px;border-top:1.6px solid var(--ink)}.lg i.d{border-top:1.4px dashed var(--muted)}.lg i.o{border-top:1.6px dotted var(--weak)}

/* ---- 车型档案 */
.profile-page .chapter{min-height:0;padding:9vh 0 7vh}
.profile-page #hero{padding-top:5vh}
.pick-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px}
.pick-bar .crumb{margin:0;font-size:13px;color:var(--muted)}
.pick-bar .crumb a{color:var(--muted)}
.pick{position:relative;width:min(280px,55vw)}
.pick input{width:100%;font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.pick input:focus{border-color:var(--weak);box-shadow:0 0 0 4px rgba(36,38,31,.05)}
.pick ul{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(36,38,31,.1);max-height:420px;overflow:auto;animation:rise .2s var(--ease)}
.pick li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:6px;font-size:14px;cursor:pointer}
.pick li.on,.pick li:hover{background:var(--surface)}
.pick li .muted{font-size:12px}
#pTitle{view-transition-name:model-title}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 28px;margin-top:44px;max-width:980px}
.stat{display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(10px);transition:opacity .4s ease calc(var(--i) * 70ms),transform .5s var(--ease) calc(var(--i) * 70ms)}
.stats.played .stat{opacity:1;transform:none}
.stat b{font-size:clamp(24px,2.6vw,32px);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.5px;width:fit-content}
.stat .muted{font-size:13px}
.gl{stroke:var(--line);stroke-width:1}
#saPlot .alt,.seg-c .alt{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 3}
#saPlot .bridge{fill:none;stroke:var(--weak);stroke-width:1.3;stroke-dasharray:1 4;stroke-linecap:round}
#saPlot .xh{stroke:var(--ink);opacity:0;transition:opacity .15s}
#saPlot .hit,#sgBody .hit{fill:transparent;cursor:crosshair}
#saPlot .hit{cursor:pointer}
.years{margin-top:36px;max-width:720px}
.yr{display:grid;grid-template-columns:52px 1fr 92px 150px;align-items:center;gap:12px;padding:5px 0;font-size:14px;cursor:pointer}
.yr b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.yr .muted{font-size:12px}
.bar-cell i{display:block;height:12px;border-radius:3px;background:var(--ink);width:0;transition:width .7s var(--ease)}
.years.played .bar-cell i,#dir.played .bar-cell i{width:var(--w)}
.years .yr:nth-child(n) .bar-cell i{transition-delay:calc(var(--d,0) * 1ms)}
.seg-grid{display:grid;gap:32px;margin-top:36px}
#sgBody figure{margin:0}
#sgBody figcaption{font-size:13px;color:var(--muted);margin-bottom:8px}
#sgBody svg{display:block;overflow:visible}
.seg-c{margin-top:40px!important}
#sgBody svg path,#sgBody .share i{transition:opacity .6s ease}
#sgBody:not(.played) svg path{opacity:0}
#sgBody:not(.played) .share i{width:0}
#sgBody .sg-peer{transition:opacity .6s ease .3s}
#trLadder svg{overflow:visible}
.pd{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;cursor:pointer;transition:transform .7s var(--ease),fill .15s,r .15s}
.pd:hover,.pd.on{fill:var(--ink)}
.tablewrap{overflow-x:auto;margin-top:28px;border-top:1px solid var(--line)}
.trim-t th{cursor:default}
.trim-t tbody tr.on{background:var(--surface)}
.mrow{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);max-width:860px}
.mrow:first-child{padding-top:4px}
.mrow .when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.mrow b{font-weight:500}
.mrow p{margin:6px 0 0;font-size:14px;line-height:1.7}
.mrow .rec-src{margin-top:8px;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px}
.chips>span{border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:13px}
.is-dir .pf{display:none}
#dir{margin-top:20px}
.dir-row{display:grid;grid-template-columns:200px 1fr 84px 80px;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease calc(var(--i) * 18ms),transform .45s var(--ease) calc(var(--i) * 18ms),background .2s}
#dir.played .dir-row{opacity:1;transform:none}
.dir-row:hover{background:var(--surface)}
.dir-row .num{text-align:right;font-variant-numeric:tabular-nums}
.dir-row .muted{font-size:12px;text-align:right}
.to-profile{display:inline-block;margin-top:10px;font-size:13px;color:var(--ink)}
@media (max-width:640px){
  .pick-bar{flex-direction:column;align-items:stretch}
  .pick{width:100%}
  .yr{grid-template-columns:44px 1fr 76px;}
  .yr .muted{display:none}
  .mrow{grid-template-columns:1fr;gap:4px}
  .dir-row{grid-template-columns:1fr 70px;}
  .dir-row .bar-cell,.dir-row>.muted{display:none}
}
@media (prefers-reduced-motion:reduce){.stat,.dir-row{opacity:1;transform:none}.pd{transition:none}}
.tile-h a{color:var(--ink);text-decoration:none}.tile-h a:hover{text-decoration:underline;text-underline-offset:3px}
.spark-in .to-profile{margin:4px 0 14px}