:root { --ink:#20221f; --muted:#71746f; --line:#e6e7e3; --soft:#f5f5f2; --font:ui-rounded,system-ui,sans-serif; --type-title:clamp(1.65rem,5vw,2.25rem); --type-body:1rem; --type-caption:.8rem; }
* { box-sizing:border-box; }
html { font-family:var(--font); font-size:var(--type-body); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; line-height:1.6; }
main { width:min(100% - 40px,880px); margin:auto; padding:44px 0 80px; }
a { color:inherit; text-underline-offset:3px; }
button,input,select { font:inherit; }
button,select,summary,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid #6386ae; outline-offset:4px; }
[hidden] { display:none !important; }
h1 { margin:28px 0 8px; font-size:var(--type-title); line-height:1.2; letter-spacing:-.025em; }
h2 { margin:0; font-size:var(--type-body); line-height:1.35; font-weight:650; }
p { margin:0 0 14px; }
.back,.page-intro,.collection-meta,.chart-nav a,.ac-metric,.ac-date,.ac-caption,.ac-sources,.ac-status,.ac-range,.ac-controls,.ac-details,.collection-footer,.single-toolbar { font-size:var(--type-caption); }
.back { display:inline-block; }
.page-intro { color:var(--muted); margin:0; }
.collection-meta { margin-top:10px; color:var(--muted); }
.chart-nav { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; margin-top:28px; border-top:1px solid var(--line); }
.chart-nav a { display:flex; justify-content:space-between; gap:12px; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); }
.chart-nav a:hover { color:#47766a; }
.chart-nav span { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ac-section { margin-top:56px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:20px; }
.ac-header { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.ac-date { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ac-metric { color:var(--muted); margin:3px 0 14px; line-height:1.5; }
.ac-stage { height:220px; position:relative; overflow:hidden; }
.ac-row { position:absolute; inset:0 0 auto; height:32px; will-change:transform; }
.ac-bar { height:28px; border-radius:3px; position:absolute; top:0; left:0; }
.ac-label { display:flex; align-items:center; position:absolute; height:28px; top:0; gap:8px; width:max-content; white-space:nowrap; line-height:1; }
.ac-name { font-size:var(--type-body); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ac-value { font-size:var(--type-body); font-variant-numeric:tabular-nums; flex-shrink:0; color:#686c64; }
.ac-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px 18px; color:var(--muted); margin:0 0 12px; }
.ac-caption a { text-decoration:none; }
.ac-scrub { display:block; width:100%; height:24px; margin:0; appearance:none; background:transparent; cursor:pointer; }
.ac-scrub::-webkit-slider-runnable-track { height:4px; background:linear-gradient(to right,#20221f var(--progress,0%),#eceee9 var(--progress,0%)); border-radius:4px; }
.ac-scrub::-webkit-slider-thumb { appearance:none; width:16px; height:16px; margin-top:-6px; background:var(--ink); border-radius:50%; border:0; }
.ac-scrub::-moz-range-track { height:4px; background:#eceee9; border-radius:4px; }
.ac-scrub::-moz-range-progress { height:4px; background:var(--ink); }
.ac-scrub::-moz-range-thumb { height:16px; width:16px; border:0; border-radius:50%; background:var(--ink); }
.ac-range { display:flex; justify-content:space-between; color:var(--muted); margin:1px 0 16px; font-variant-numeric:tabular-nums; }
.ac-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ac-controls button,.ac-controls select,.single-toolbar button { border:1px solid #dedfd9; background:#fff; color:var(--ink); min-height:36px; border-radius:22px; padding:6px 12px; cursor:pointer; font-size:var(--type-caption); }
.ac-controls button:hover,.ac-controls select:hover,.single-toolbar button:hover { background:var(--soft); }
.ac-controls button.ac-play { min-width:92px; background:var(--ink); color:#fff; border-color:var(--ink); }
.ac-controls label { display:flex; align-items:center; gap:6px; color:var(--muted); }
.ac-controls select { max-width:180px; }
.ac-status { min-height:21px; margin:9px 0 0; color:var(--muted); }
.ac-details { margin-top:12px; color:var(--muted); }
.ac-details summary { cursor:pointer; width:max-content; max-width:100%; }
.ac-details p { margin:10px 0; }
.ac-details .ac-sources { display:flex; flex-wrap:wrap; gap:6px 14px; }
.ac-details table { width:100%; border-collapse:collapse; margin:14px 0 8px; text-align:left; font-variant-numeric:tabular-nums; }
.ac-details caption { text-align:left; margin-bottom:5px; }
.ac-details th,.ac-details td { padding:7px 8px 7px 0; border-bottom:1px solid var(--line); font-weight:400; }
.ac-details th { color:var(--ink); }
.ac-details td:last-child,.ac-details th:last-child { text-align:right; }
.ac-details .ac-table-wrap { overflow-x:auto; }
.ac-error { color:#a3463a; }
.ac-loading { color:var(--muted); font-size:var(--type-caption); min-height:200px; }
.collection-footer { margin-top:60px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); }
.single-toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:40px; }
.single-view main { width:min(100% - 48px,1100px); }
.single-view .ac-section { margin:0; padding:0; border:0; }
.single-view .collection-header,.single-view .collection-footer { display:none; }
.single-view .ac-clean { display:none; }
.recording main { padding-top:32px; }
.recording .single-toolbar { position:fixed; z-index:30; top:4px; left:24px; right:24px; margin:0; }
.recording .single-toolbar { opacity:0; transition:opacity .15s; }
.recording .single-toolbar:hover,.recording .single-toolbar:focus-within { opacity:1; }
.recording .ac-interactive,.recording .ac-details,.recording .race-controls,.recording .race-options,.recording .race-range,.recording .race-timeline,.recording .race-selection-note,.recording .race details,.recording .race-error { display:none; }
.recording .race-source { margin-top:12px; }
.ac-section.race { --race-font:var(--font); margin-top:56px; }
.ac-section .race-player { margin:12px 0 0; padding:0; border:0; }
.ac-section .race-topline { margin-bottom:10px; }
.ac-section .race-topline > span:first-child { color:var(--ink); font-weight:650; }
.ac-section .race-chart { margin-top:20px; }
.ac-section .race-source,.ac-section .race-scale-note { color:var(--muted); }
.single-view .ac-section.race { margin:0; }
@media (max-width:600px) {
  main { width:calc(100% - 32px); padding-top:26px; }
  .chart-nav { column-gap:20px; }
  .chart-nav a { display:block; }
  .chart-nav span { display:block; }
  .ac-section { margin-top:40px; padding-top:24px; }
  .ac-name,.ac-value { font-size:var(--type-caption); }
  .ac-label { gap:6px; }
  .ac-controls { gap:7px; }
  .ac-controls button,.ac-controls select { padding:6px 9px; }
  .ac-header h2 { max-width:75%; }
  .single-view main { width:calc(100% - 32px); }
  .ac-section.race > .ac-header h2 { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .ac-row { will-change:auto; }
}
