/* V10 Training Run：首页与 CV 页共用 */
:root {
  --bg: #f6f6f4; --panel: #fff; --ink: #16181d; --ink2: #3f444d; --muted: #737985; --line: #e3e3df; --line2: #d3d3cd;
  --acc: #0e7c6b; --acc-soft: #e3f2ef; --ckpt: #c2410c; --code: #f3f3f0;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pm-bg: #ededea; --pm-ph-bg: #ededea; --pm-ph-ink: var(--muted);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.bar { position: sticky; top: 0; z-index: 20; background: rgba(246,246,244,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 50px; font: 12.5px var(--mono); color: var(--muted); }
.bar .run { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.bar .run:hover { text-decoration: none; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 50%, transparent); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.bar .meta { display: flex; gap: 16px; }
.bar nav { margin-left: auto; display: flex; gap: 4px; }
.bar nav a { color: var(--ink2); padding: 5px 10px; border-radius: 6px; }
.bar nav a:hover, .bar nav a[aria-current] { background: var(--panel); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); }

[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s ease; transition-delay: calc(var(--d, 0) * 60ms); }
[data-reveal].in { opacity: 1; transform: none; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding: 44px 0 26px; align-items: end; }
.hero .k { font: 12.5px var(--mono); color: var(--acc); }
.hero h1 { font: 600 clamp(38px, 5vw, 56px)/1.05 var(--sans); letter-spacing: -.03em; margin: 8px 0 14px; }
.hero .st { font-size: 17.5px; margin: 0 0 10px; max-width: 680px; }
.hero .aff { font-size: 14px; color: var(--ink2); margin: 0; }
.hero .aff a { color: var(--ink); border-bottom: 1px solid var(--line2); }
.contacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.contacts a, .contacts button { display: inline-flex; align-items: center; gap: 7px; font: 12.5px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; }
.contacts a:hover, .contacts button:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }
.card-id { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.card-id .img { width: 76px; height: 98px; border-radius: 6px; background: #fff center 22% / cover; border: 1px solid var(--line); }
.card-id dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font: 12px var(--mono); }
.card-id dt { color: var(--muted); }
.card-id dd { margin: 0; color: var(--ink); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 12.5px var(--mono); color: var(--muted); }
.ph b { color: var(--ink); font-weight: 500; }
.legend span { margin-left: 14px; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: 3px; margin-right: 6px; background: var(--acc); }
.legend i.band { height: 8px; vertical-align: 0; background: var(--acc-soft); }
.legend i.ck { width: 8px; height: 8px; border-radius: 50%; background: var(--ckpt); vertical-align: 1px; }
.plot { position: relative; padding: 8px 8px 4px; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot .ax { stroke: var(--line2); }
.plot .grid { stroke: var(--line); stroke-dasharray: 2 4; }
.plot text { font: 11px var(--mono); fill: var(--muted); }
.plot .band { fill: var(--acc-soft); opacity: 0; transition: opacity 1.2s ease .6s; }
.plot .curve { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; }
.plot .future { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; transition: opacity .8s ease 2.4s; }
.plot.go .band, .plot.go .future { opacity: 1; }
.plot .ev line { stroke: var(--line2); stroke-dasharray: 1 3; }
.plot .ev text { fill: var(--ink2); }
.plot .ck circle { fill: var(--panel); stroke: var(--ckpt); stroke-width: 2; cursor: pointer; transition: r .15s; opacity: 0; }
.plot.go .ck circle { opacity: 1; transition: opacity .3s ease calc(var(--t) * 1s), r .15s; }
.plot .ck circle:hover, .plot .ck circle.hot { r: 7; fill: var(--ckpt); }
.plot .ck text { fill: var(--ink); font-size: 11.5px; opacity: 0; }
.plot.go .ck text { opacity: 1; transition: opacity .3s ease calc(var(--t) * 1s + .1s); }
.plot .fut-l { fill: var(--acc); font-style: italic; }
.tip { position: absolute; z-index: 5; width: 240px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.3); overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tip.on { opacity: 1; transform: none; }
.tip .pm { aspect-ratio: 16 / 9; }
.tip div.t { padding: 8px 10px; font-size: 13px; }
.tip div.t b { display: block; }
.tip div.t span { font: 11.5px var(--mono); color: var(--muted); }

section.blk { padding: 40px 0 0; }
.sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sh h2 { margin: 0; font: 600 22px var(--sans); letter-spacing: -.01em; }
.sh span { font: 12.5px var(--mono); color: var(--muted); }

.log { font: 13.5px/1.9 var(--mono); padding: 10px 16px; }
.log div { display: grid; grid-template-columns: 82px 52px 1fr; gap: 10px; }
.log .d { color: var(--muted); }
.log .lv { color: var(--acc); }
.log .lv.ck { color: var(--ckpt); }

.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0; font: 12.5px var(--mono); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); width: fit-content; max-width: 100%; overflow: hidden; margin-bottom: 16px; }
.tabs button { border: 0; border-right: 1px solid var(--line); background: none; font: inherit; color: var(--ink2); padding: 7px 12px; cursor: pointer; }
.tabs button:last-of-type { border-right: 0; }
.tabs button[aria-selected="true"] { background: var(--acc-soft); color: var(--acc); }
.tabs button sup { color: var(--muted); margin-left: 2px; font-size: 10px; }
.tab-ind { display: none; }
.ckpts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ckpt { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; animation: in .45s ease both; animation-delay: calc(var(--i) * 45ms); transition: border-color .2s; }
.ckpt:hover, .ckpt.hot { border-color: var(--ckpt); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }
.ckpt .pm { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.ckpt .b { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.ckpt .id { font: 11.5px var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.ckpt .id b { color: var(--ckpt); font-weight: 500; }
.ckpt h3 { margin: 6px 0 2px; font: 600 18px/1.25 var(--sans); }
.ckpt .full { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.ckpt .note { margin: 0 0 8px; font-size: 14px; color: var(--ink2); }
.ckpt .au { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.ckpt .au .me, .cvp .me { color: var(--ink); }
.ckpt .ln { display: flex; gap: 12px; font: 12.5px var(--mono); margin-top: 8px; }

pre.yaml { margin: 0; padding: 14px 18px; font: 13.5px/1.7 var(--mono); background: var(--code); border-radius: 0 0 10px 10px; overflow-x: auto; color: var(--ink2); }
pre.yaml .k { color: var(--acc); }
pre.yaml .s { color: var(--ink); }
pre.yaml .c { color: var(--muted); font-style: italic; }
footer { margin-top: 48px; border-top: 1px solid var(--line); padding: 20px 0 52px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 12.5px var(--mono); color: var(--muted); }

/* CV */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.summary div { padding: 14px 16px; border-right: 1px solid var(--line); }
.summary div:last-child { border-right: 0; }
.summary b { display: block; font: 600 26px var(--sans); }
.summary span { font: 12px var(--mono); color: var(--muted); }
.rows .r { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.rows .r:first-child { border-top: 0; }
.rows time { font: 12.5px var(--mono); color: var(--muted); padding-top: 2px; }
.rows small { display: block; color: var(--ink2); font-size: 13.5px; }
.cvp { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: center; font-size: 14.5px; }
.cvp:first-child { border-top: 0; }
.cvp .pm { aspect-ratio: 16 / 10; border-radius: 6px; }
.cvp small { display: block; color: var(--muted); font-size: 12.5px; }
.cvp .ln { font: 12px var(--mono); display: inline-flex; gap: 10px; margin-left: 8px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .ckpts { grid-template-columns: 1fr 1fr; }
  .bar .meta { display: none; }
  .summary { grid-template-columns: 1fr 1fr; } .summary div:nth-child(2) { border-right: 0; } .summary div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .ckpts { grid-template-columns: 1fr; }
  .log div { grid-template-columns: 70px 1fr; } .log .lv { display: none; }
  .rows .r, .cvp { grid-template-columns: 1fr; gap: 4px; }
  .cvp .pm { max-width: 220px; }
  .plot { overflow-x: auto; } .plot svg { min-width: 760px; } /* 手机上横向滚动看曲线，而不是缩到看不清 */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .live, .ckpt { animation: none; }
}