:root {
  --paper: #f6f3ec;
  --card: #fffdf8;
  --ink: #15171c;
  --ink2: #4a4f5a;
  --mute: #8a8f99;
  --rule: #e2ddd1;
  --ext: #3d4a63;
  --app: #ff5a1f;
  --road: #d9d2c2;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 40px; }

.kicker { font: 600 11px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
h1 { font: 700 clamp(26px, 4vw, 42px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; margin: 8px 0 12px; max-width: 900px; }
h1 em { font-style: italic; color: var(--app); }
h2 { font: 700 24px/1.2 Georgia, serif; margin: 6px 0 8px; }
.lede, .d { color: var(--ink2); max-width: 760px; margin: 0 0 8px; }

.board { margin-top: 22px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.clockbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.clock { display: flex; align-items: baseline; gap: 8px; }
.clock .lbl { font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
#clock { font: 700 26px ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.runner { display: flex; align-items: baseline; gap: 8px; }
.runner i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; align-self: center; }
.runner.ext i { background: var(--ext); }
.runner.app i { background: var(--app); }
.runner .name { font-weight: 700; }
.runner .pace { color: var(--mute); font-size: 12px; }
.runner .dist { font: 700 15px ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; min-width: 64px; }
.pill { margin-left: auto; font: 600 13px system-ui, sans-serif; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.pill:hover { border-color: var(--ink2); }

.map { position: relative; }
#course { display: block; width: 100%; height: auto; }
.banner { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); max-width: calc(100% - 32px); text-align: center; }
.banner b { color: var(--app); }

.ch { margin-top: 36px; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 10px; margin-top: 12px; }
#progress { display: block; width: 100%; height: auto; }

.splits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.splits > div { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.splits h3 { margin: 0 0 8px; font-size: 14px; }
.splits h3.ext { color: var(--ext); }
.splits h3.app { color: var(--app); }
.splits ol { list-style: none; margin: 0; padding: 0; }
.splits li { display: grid; grid-template-columns: 54px 1fr 70px; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--mute); transition: color .3s; }
.splits li.done { color: var(--ink); }
.splits li .mi, .splits li .t { font: 12px ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; padding-top: 2px; }
.splits li .t { text-align: right; }
.splits li .step b { display: block; font-size: 14px; }
.splits li .step span { font-size: 12.5px; }
.splits li.done .t { color: var(--ink2); }
.splits li.left .t { color: var(--app); }

.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.steps .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--app); color: #fff; font: 700 13px ui-monospace, Consolas, monospace; display: grid; place-items: center; }
.steps b { display: block; font-size: 15px; margin-top: 3px; }
.steps p { margin: 4px 0 0; color: var(--ink2); font-size: 13.5px; }

footer { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 12.5px; }
footer .by { font-weight: 700; color: var(--ink2); }
footer p { max-width: 760px; margin: 4px 0 0; }

.tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; max-width: 260px; opacity: 0; transition: opacity .12s; z-index: 5; }
.tip b { display: block; font-size: 13px; }

/* SVG */
.contour { fill: none; stroke: #ebe5d8; stroke-width: 1.2; }
.road { fill: none; stroke: var(--road); stroke-linecap: round; stroke-linejoin: round; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route.ext { stroke: var(--ext); stroke-width: 4; stroke-dasharray: 1 9; opacity: .55; }
.route.app { stroke: var(--app); stroke-width: 5; opacity: .5; stroke-dasharray: 1 9; }
.trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail.ext { stroke: var(--ext); stroke-width: 4; }
.trail.app { stroke: var(--app); stroke-width: 5; }
.marker circle { stroke: #fff; stroke-width: 2; }
.marker.ext circle { fill: var(--card); stroke: var(--ext); stroke-width: 2; }
.marker.app circle { fill: var(--card); stroke: var(--app); stroke-width: 2; }
.marker.passed.ext circle { fill: var(--ext); }
.marker.passed.app circle { fill: var(--app); }
.marker text { font: 600 11.5px system-ui, sans-serif; fill: var(--ink2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.marker text.mi { font: 700 9.5px ui-monospace, Consolas, monospace; fill: var(--mute); }
.marker { cursor: default; }
.fork { font: 700 9.5px ui-monospace, Consolas, monospace; letter-spacing: .08em; fill: var(--mute); }
.gate text { font: 800 12px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.dot { stroke: #fff; stroke-width: 3; }
.dot.ext { fill: var(--ext); }
.dot.app { fill: var(--app); }
.tag { font: 700 11px system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.tag.ext { fill: var(--ext); }
.tag.app { fill: var(--app); }

.axis text { font: 11px ui-monospace, Consolas, monospace; fill: var(--mute); }
.axis line { stroke: var(--rule); }
.pline { fill: none; stroke-width: 3; stroke-linecap: round; }
.pline.ext { stroke: var(--ext); }
.pline.app { stroke: var(--app); }
.note text { font: 600 12px system-ui, sans-serif; }

@media (max-width: 720px) {
  .splits, .steps { grid-template-columns: 1fr; }
  .pill { margin-left: 0; }
  .marker text:not(.mi) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .splits li { transition: none; }
}