:root {
  --bg: #f6f7fb; --bg-2: #ffffff; --ink: #0b1a33; --muted: #5b6b85; --line: #e3e7ef;
  --accent: #ff6a13; --accent-ink: #ffffff; --blue: #1856c9; --green: #1f9d55; --amber: #d98b0b; --red: #d33a2c;
  --course: #1856c9; --trail: #ff6a13; --ghost: #8a94a8; --spot: #d98b0b; --ly: #7c3aed; --friends: #e0338f;
  --shadow: 0 1px 2px rgba(11,26,51,.06), 0 8px 24px rgba(11,26,51,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1222; --bg-2: #121b30; --ink: #eef2fa; --muted: #9aa8c2; --line: #233150;
    --course: #6f9cff; --ghost: #8a94a8; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1222; --bg-2: #121b30; --ink: #eef2fa; --muted: #9aa8c2; --line: #233150; --course: #6f9cff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 16px; }
h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.top { max-width: 1100px; margin: 0 auto; padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub { color: var(--muted); font-size: 14px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.status.live .dot { background: var(--green); box-shadow: 0 0 0 0 rgba(31,157,85,.6); animation: ping 1.6s infinite; }
.status.stale .dot { background: var(--amber); }
.status.done .dot { background: var(--blue); }
.status.err .dot { background: var(--red); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 100% { box-shadow: 0 0 0 10px rgba(31,157,85,0); } }

.hero { display: grid; gap: 12px; }
/* Twelve columns: distance 4 and four tiles of 2 on a desktop, four across on a tablet, two across on a phone with
   distance taking the row. Depth lives in each tile's sheet, not on the tile, so the grid keeps its shape. */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.tile { background: var(--bg-2); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; grid-column: span 2; }
.tile.big { grid-column: span 4; }
.tile.accent { background: var(--accent); color: var(--accent-ink); }
.tile.accent .label, .tile.accent .unit { color: rgba(255,255,255,.95); }
.tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tile .value { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.big .value { font-size: 40px; }
.tile .unit { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .unit b { color: var(--ink); font-weight: 700; }
.tile .unit.urow { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; white-space: nowrap; } /* one row under the number: the units and the source on the left, the trend on the right */
.tile .urow #pace-note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the source word gives way before the badge does */
.tile .trend { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tile .trend.slower { color: #d99a06; } .tile .trend.faster { color: var(--green); } .tile .trend.arrow-only .w { display: none; } /* the last resort on a tile too narrow for the units beside the word */
@media (min-width: 641px) {
  /* Above phone width the pace tile shares its row with the finish tile, whose note runs to two lines, so there is a spare line
     under the pace note: the badge takes it, and the note keeps its whole phrase. On a phone the two stay on one row. */
  .tile[data-detail="pace"] { display: flex; flex-direction: column; }
  .tile[data-detail="pace"] .unit.urow { display: contents; }
  .tile .urow #pace-note { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
  .tile .urow .trend { margin-top: auto; padding-top: 1px; position: relative; z-index: 1; }
}
@media (max-width: 820px) { .tile { grid-column: span 3; } .tile.big { grid-column: span 12; } .tile .value { font-size: clamp(20px, 6vw, 24px); } .tile.big .value { font-size: 40px; } }
/* Phones up to a Pro Max (440 CSS px): two across, distance taking the row. The old 420 px breakpoint missed the big phones and gave them the tablet row. */
@media (max-width: 640px) { .tile { grid-column: span 6; } .tile.big { grid-column: span 12; } }

.progress { position: relative; padding-bottom: 20px; }
.bar { position: relative; height: 12px; border-radius: 999px; background: var(--line); overflow: visible; }
.fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--accent)); transition: width .8s ease; }
.ghost-mark { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ghost); left: 0; transition: left .8s ease; }
.runner-mark { position: absolute; top: -4px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-2); box-shadow: 0 0 0 2px var(--accent); left: 0; transition: left .8s ease; }
.boroughs { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.boroughs > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.boroughs > span::before { content: ""; position: absolute; left: 50%; top: -8px; height: 6px; border-left: 1px solid var(--line); }
/* On a phone the section names take two rows, alternating, so neighbours never collide and the short sections keep their names. */
@media (max-width: 640px) { .boroughs { height: 30px; } .boroughs span.r2 { top: 13px; } .boroughs span.tight.noshort { display: none; } .boroughs span.tight .full { display: none; } .boroughs span.tight .short { display: inline; } .ampm { display: none; } }
/* A section carries its full name and, when it has one, a short one: only one of the two ever shows (the short one for a tight section on a phone). */
.boroughs .short { display: none; }
.banner.rehearsal { border-left-color: #f43f5e; font-weight: 600; margin-bottom: 12px; }
.banner { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); box-shadow: var(--shadow); border-left: 4px solid var(--amber); font-size: 14px; }

.mapwrap { position: relative; }
#map { height: 56vh; min-height: 340px; border-radius: 16px; box-shadow: var(--shadow); background: var(--bg-2); }
.map-tools { position: absolute; top: 10px; right: 10px; z-index: 800; display: flex; gap: 8px; align-items: center; background: var(--bg-2); padding: 6px 10px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.follow { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.linkish { background: none; border: 0; color: var(--blue); font: inherit; font-size: 13px; cursor: pointer; padding: 8px 10px; margin: -8px -10px; }
.legend { position: absolute; left: 10px; bottom: 10px; z-index: 800; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 20px); background: var(--bg-2); padding: 6px 10px; border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sw.runner { background: var(--accent); } .sw.ghost { background: var(--ghost); } .sw.spot { background: var(--spot); border-radius: 2px; }
.runner-icon .runner-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); position: relative; }
.runner-icon .pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.ghost-icon .ghost-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ghost); border: 2px solid #fff; opacity: .9; }
.spot-icon { font-size: 16px; line-height: 20px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.spot-icon.passed { opacity: .45; }
/* Friend zones: a bigger pink pin (28px drawn inside the 22px marker box so it stays centred), a badge in lists and popups, a pink line on the profile. */
.sw.friends { background: var(--friends); }
.spot-icon.friends .fz-pin { display: block; width: 28px; height: 28px; margin: -3px; border-radius: 50%; background: var(--friends); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(224,51,143,.55); font-size: 15px; line-height: 24px; text-align: center; }
.spot-icon.friends.passed { opacity: .5; }
.fz { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--friends); border-radius: 999px; padding: 2px 7px; vertical-align: 1px; }
tr.friends td:first-child { border-left: 3px solid var(--friends); padding-left: 9px; }
.prof-spot.friends { stroke: var(--friends); stroke-width: 2; opacity: .9; }
/* The map box clips its canvas; no border-radius on the canvas itself. */
#map { overflow: hidden; position: relative; }
#map .maplibregl-canvas-container { position: absolute; inset: 0; width: 100%; height: 100%; }
#map .maplibregl-canvas { position: absolute; left: 0; top: 0; }
html.layer .maplibregl-canvas { transform: translateZ(0); will-change: transform; }
html.nogrid main { display: block; }
html.nogrid main > * { margin-bottom: 16px; }
.maplibregl-popup { z-index: 1100; } /* above the pins (200–300) and Nick's dot (1000), which carry inline z-indexes */
.maplibregl-popup-content { background: var(--bg-2); color: var(--ink); border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.35; padding: 8px 10px; box-shadow: var(--shadow); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg-2); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg-2); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-2); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-2); }
.maplibregl-ctrl-top-left { top: 6px; left: 6px; }
#map .maplibregl-ctrl-attrib { font-size: 10px; }
.map-tools { top: 10px; right: 10px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
.card { background: var(--bg-2); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
td.num, th.num { text-align: right; }
tr.passed td { color: var(--muted); }
tr.next td { font-weight: 700; }
.spots td:first-child { width: 55%; }
.spots .mi { color: var(--muted); font-size: 12px; display: block; }
.eta { font-weight: 700; white-space: nowrap; }
.eta-sub { color: var(--muted); font-size: 12px; white-space: nowrap; display: block; }
.pos { color: var(--green); } .neg { color: var(--red); }
.splits { table-layout: fixed; }
.splits th:first-child, .splits td:first-child { width: 20%; }
.splits th:nth-child(3), .splits td:nth-child(3) { width: 21%; } /* race time is the widest number in the row */
@media (max-width: 420px) { .splits { font-size: 12px; } .splits th, .splits td { padding: 7px 4px; } } /* a narrow phone: the columns keep apart */

form#cheer-form { display: grid; gap: 8px; margin: 8px 0; }
input, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; }
button { font: inherit; font-weight: 600; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.note { font-size: 13px; color: var(--muted); }
.cheer-count { font-weight: 700; margin: 10px 0 4px; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; font-size: 14px; }
.feed li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.feed .who { font-weight: 700; }
.feed .meta { color: var(--muted); font-size: 12px; margin-left: 6px; }
.badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--line); color: var(--muted); margin-left: 6px; vertical-align: 1px; }
.badge.ok { background: rgba(31,157,85,.15); color: var(--green); }

svg#profile, svg#hrchart { width: 100%; height: 170px; display: block; border-radius: 10px; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.axis .empty { font-size: 13px; padding: 10px 0 4px; } /* the empty chart's one line, in place of the chart */
.prof-area { fill: var(--course); opacity: .18; }
.prof-line { fill: none; stroke: var(--course); stroke-width: 2; vector-effect: non-scaling-stroke; }
.prof-spot { stroke: var(--spot); stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.prof-runner { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.prof-ghost { fill: var(--ghost); }
.prof-label { font-size: 11px; fill: var(--muted); }
.hr-line { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hr-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }

footer { color: var(--muted); font-size: 13px; display: grid; gap: 4px; padding-top: 8px; }
footer a { color: inherit; }

/* Training run: hide the marathon-only widgets */
body.course-tbc .spots-card { display: none; }
body.training .progress, body.training .spots-card, body.training .profile-card, body.training .splits-card { display: none; }
body.training .grid2 { grid-template-columns: 1fr; }

/* Last year's run overlay */
.ly-mark { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ly); left: 0; transition: left .8s ease; }
.compare { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.compare b { color: var(--ink); }
.sw.ly { background: var(--ly); }
.ly-icon .ly-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 3px solid var(--ly); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
body.training .ly-mark, body.training .compare { display: none; }

/* Spectator location */
.me-result { margin: 10px 0 0; font-size: 16px; }
.me-result b { font-size: 20px; }
.sw.me { background: var(--blue); }
.me-icon .me-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
body.training .me-card { display: none; }
/* Runner photo marker */
.runner-icon.has-photo .runner-dot { width: 40px; height: 40px; border: 3px solid var(--accent); background: var(--bg-2) center/cover no-repeat; }
.runner-icon.has-photo .pulse { inset: -4px; }

/* How this works */
.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; font-size: 14px; }
.how > div { padding: 8px 0; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .how { grid-template-columns: 1fr; } }
.how-card a { color: var(--blue); }
body.training .how-card { display: none; }

/* Race numbers */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 820px) { .chips { grid-template-columns: repeat(2, 1fr); } }
.chip { background: var(--bg); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.chip .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chip .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sub-h { font-size: 13px; color: var(--muted); margin: 6px 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
svg#pacechart { width: 100%; height: 220px; display: block; }
.pace-bar { fill: var(--accent); opacity: .85; }
.pace-bar.slow { fill: var(--amber); }
.pace-ly { fill: none; stroke: var(--ly); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pace-goal { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.pace-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.legend-inline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sw.you { background: var(--accent); } .sw.goal { background: var(--green); } .sw.mat { background: #fff; border: 2px solid var(--muted); box-sizing: border-box; } .sw.mat.ok { background: var(--green); border-color: var(--green); }
body.training .numbers-card, body.practice .numbers-card, body.practice .compare, body.practice .ly-mark { display: none; }

/* Simulation controls */
.simbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; background: var(--bg-2); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px; border-left: 4px solid var(--amber); }
.simbar-title { font-weight: 700; }
.simbar label { display: inline-flex; align-items: center; gap: 6px; }
.simbar .sim-pace { flex: 1 1 260px; }
.simbar input[type=range] { flex: 1; min-width: 120px; accent-color: var(--accent); }
.simbar select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.simbar button.small { padding: 6px 10px; font-size: 13px; }
.sim-jumps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }

/* Sources row */
.sources-row { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.src { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow); }
.src i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.src.ok i { background: var(--green); } .src.warn i { background: var(--amber); } .src.off i { background: var(--line); }
.src.done i { background: var(--line); } .src.done b { color: var(--muted); } .src.done { opacity: .85; } /* the race is over: closed, not stale */
.src b { color: var(--ink); font-weight: 600; }
body.training .sources-row { display: none; }
/* open run mode (v1.5): no course, no mats, no goal, so none of the things measured along one */
body.open .progress, body.open .ly-mark, body.open .compare, body.open .lg-course, body.open .side-row, body.open #step-side, body.open #plan-btn, body.open #plan-row, body.open .spots-card > h2, body.open .spots-card > p.muted, body.open .spots-card #spots { display: none !important; }
body.open .grid2 { grid-template-columns: 1fr; }
body.open .spots-card #squad-h { margin-top: 0; }
.runs tr { cursor: pointer; } .runs tr:hover td { color: var(--ink); } .runs tr.viewing td { color: var(--accent); }
.ok { color: var(--green); font-weight: 800; white-space: nowrap; } /* official timing: a mat, the organiser's result (the medal alone, in a line that is already small) */
/* The official pill: one quiet mark, the same everywhere it sits (a tile's corner, the hero's kicker line, a chip's label). */
.ok-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green); background: rgba(31,157,85,.12); border-radius: 999px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; line-height: 1.4; }
.tile { position: relative; } .tile > .ok-pill { position: absolute; top: 9px; right: 34px; z-index: 1; } /* beside the chevron, clear of the number */
.tile.official .label { padding-right: 64px; } .tile.official-word .label { padding-right: 112px; } /* room for the pill on the label's row */
.tile.accent > .ok-pill, .moment-hero .ok-pill { color: #ddffe6; background: rgba(255,255,255,.2); }
.chip .k .ok-pill { font-size: 9px; padding: 1px 6px; margin-left: 2px; }
.hr-lbl { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.hr-zone { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; vector-effect: non-scaling-stroke; }
.sheet-card .spark line.grid { stroke: var(--line); stroke-width: 1; }
.banner.view { border-color: var(--accent); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner.view .linkish { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* Big moments: the pre-race / finish hero card */
.moment-hero { border-radius: 18px; padding: 22px 24px; color: #fff; background: linear-gradient(135deg, #0b1a33 0%, #1856c9 60%, #ff6a13 140%); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.moment-hero.finish { background: linear-gradient(135deg, #ff6a13 0%, #c2410c 55%, #0b1a33 140%); }
.moment-hero.ready { background: linear-gradient(135deg, #0b1a33 0%, #1f9d55 70%, #1856c9 140%); }
.mh-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.mh-title { font-size: clamp(30px, 6vw, 54px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 8px; }
.mh-sub { font-size: clamp(14px, 2.2vw, 18px); opacity: .95; font-variant-numeric: tabular-nums; }
.mh-sub b { font-weight: 700; }
.moment-hero .pulse-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; margin-right: 8px; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: ping 1.6s infinite; vertical-align: 1px; }

/* Full-screen takeover */
.map-missing { margin: 0; padding: 28px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.moment, .sheet, .lightbox, .photo-moment { overscroll-behavior: contain; }
.moment { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 7vh; color: #fff; background: radial-gradient(1200px 800px at 50% 40%, rgba(255,106,19,.55), rgba(11,26,51,.96) 70%); animation: moment-in .5s ease-out; }
.moment.finish { background: radial-gradient(1200px 800px at 50% 40%, rgba(255,106,19,.8), rgba(194,65,12,.6) 40%, rgba(11,26,51,.97) 75%); }
.moment.half { background: radial-gradient(1200px 800px at 50% 40%, rgba(24,86,201,.75), rgba(11,26,51,.97) 70%); }
.moment canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.moment-inner { position: relative; text-align: center; padding: 24px; max-width: 900px; }
.moment-kicker { font-size: clamp(14px, 2.5vw, 20px); letter-spacing: .18em; text-transform: uppercase; opacity: .9; animation: rise .7s .1s both; }
.moment-title { font-size: clamp(56px, 14vw, 160px); font-weight: 900; letter-spacing: -.03em; line-height: .95; margin: 10px 0; text-shadow: 0 10px 40px rgba(0,0,0,.35); animation: pop .9s cubic-bezier(.2, .9, .2, 1.15) both; }
.moment-sub { font-size: clamp(16px, 3vw, 28px); opacity: .95; font-variant-numeric: tabular-nums; animation: rise .7s .35s both; }
.moment-sub b { font-weight: 800; }
.moment-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.moment button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); animation: rise .7s .6s both; }
.moment button.primary { background: #fff; color: #be185d; border-color: #fff; font-weight: 800; }
.moment.love { background: radial-gradient(1200px 800px at 50% 40%, rgba(236,72,153,.82), rgba(190,24,93,.55) 40%, rgba(11,26,51,.97) 75%); }
.moment.love .moment-title { font-size: clamp(36px, 10.5vw, 128px); }
.moment.hurt { background: radial-gradient(1200px 800px at 50% 40%, rgba(245,158,11,.85), rgba(180,83,9,.55) 40%, rgba(11,26,51,.97) 75%); } /* HE'S HURTING: amber */
.moment.hurt .moment-title { font-size: clamp(36px, 10.5vw, 128px); }
.moment.quiet { background: radial-gradient(1200px 800px at 50% 40%, rgba(59,130,246,.8), rgba(30,58,138,.6) 40%, rgba(11,26,51,.97) 75%); } /* IT'S GONE QUIET: blue */
.moment.quiet .moment-title { font-size: clamp(36px, 10.5vw, 128px); }
/* Final stretch: fireworks, sweeping beams and a drifting colour wash on the canvas (app.js startFireworks), a core that
   pulses to a heartbeat behind the words, a glowing title that beats with it, a chant line, no silly face. */
.moment.final { background: radial-gradient(1200px 800px at 50% 40%, rgba(255,106,19,.7), rgba(124,58,237,.35) 45%, rgba(11,26,51,.97) 75%); overflow: hidden; }
.moment.final::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px 500px at 50% 42%, rgba(255,209,102,.55), rgba(255,106,19,.25) 45%, transparent 70%); animation: final-pulse 1.15s ease-in-out infinite; }
@keyframes final-pulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .95; transform: scale(1.08); } }
.moment.final .moment-sub { display: inline-block; background: rgba(11,26,51,.6); border-radius: 14px; padding: 10px 14px; text-shadow: 0 1px 6px rgba(0,0,0,.6); } /* a scrim: the body copy sat white on the brightest beams */
.moment.final .moment-title { font-size: clamp(36px, 10.5vw, 128px); text-shadow: 0 0 24px rgba(255,209,102,.95), 0 0 70px rgba(255,106,19,.8), 0 10px 40px rgba(0,0,0,.35); animation: pop .9s cubic-bezier(.2, .9, .2, 1.15) both, final-beat 1.15s 1s ease-in-out infinite; }
@keyframes final-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } /* transform only: an animated glow would repaint the big text every frame */
.moment-chant { font-size: clamp(18px, 3.4vw, 34px); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ffd166; margin-top: 14px; text-shadow: 0 0 18px rgba(255,209,102,.7), 0 4px 16px rgba(0,0,0,.4); animation: chant-pop .55s cubic-bezier(.2, .9, .2, 1.3) both; }
@keyframes chant-pop { 0% { transform: scale(.6) rotate(-3deg); opacity: 0; } 70% { transform: scale(1.08) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.moment.final button.primary { color: #c2410c; }
.moment-note { margin-top: 14px; font-size: 13px; opacity: .8; }
/* "Send him a hooray!": the same little form on the finish card and the finish takeover */
.hooray-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.hooray-form input { font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff; min-width: 0; flex: 1 1 140px; max-width: 220px; }
.hooray-form input::placeholder { color: rgba(255,255,255,.7); }
.hooray-form .hooray-btn { background: #fff; color: #c2410c; border: 1px solid #fff; font-weight: 800; margin: 0; animation: none; }
.hooray-form .hooray-btn:disabled { opacity: .85; }
.hooray-form .hooray-note { flex-basis: 100%; font-size: 13px; opacity: .9; }
.moment-hooray { justify-content: center; margin-top: 22px; position: relative; animation: rise .7s .5s both; }
.moment-hooray .hooray-note { text-align: center; }
.moment-hero .hooray-form { position: relative; }
@keyframes moment-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.4) rotate(-4deg); opacity: 0; } 60% { transform: scale(1.08) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moment-title, .moment-kicker, .moment-sub, .moment button, .moment, .moment.final::after, .moment.final .moment-title, .moment-chant { animation: none; } }

/* Photos from the course */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-grid .photo { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--bg); cursor: pointer; }
.photo-grid .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid .photo .tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.replay { position: fixed; inset: 0; z-index: 2100; background: rgba(5,9,20,.96); display: flex; align-items: center; justify-content: center; padding: 12px; }
.replay-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.replay video { height: min(86vh, 1920px); max-width: calc(100vw - 24px); aspect-ratio: 9 / 16; border-radius: 14px; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.replay-cap { color: #fff; font-size: 14px; opacity: .85; text-align: center; max-width: 420px; }
.replay button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.mh-replay { display: block; margin-top: 12px; background: #fff; color: #c2410c; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 15px; cursor: pointer; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.mh-unofficial { display: block; margin-top: 4px; font-size: 13px; opacity: .85; font-weight: 500; }
.lightbox { position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 10px; }
.lb-cap { color: #fff; margin-top: 10px; font-size: 14px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1800; background: var(--ink); color: var(--bg-2); padding: 10px 16px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); animation: rise .4s both; }

html.square #map, html.square .maplibregl-map { border-radius: 0 !important; overflow: visible !important; }

/* Leaflet engine (Safari / iOS) */
.leaflet-container { background: var(--bg-2); font: inherit; }
.leaflet-container .leaflet-marker-icon.runner-icon, .leaflet-container .leaflet-marker-icon.ghost-icon, .leaflet-container .leaflet-marker-icon.ly-icon, .leaflet-container .leaflet-marker-icon.me-icon, .leaflet-container .leaflet-marker-icon.spot-icon { background: none; border: 0; }
.leaflet-popup-content-wrapper { background: var(--bg-2); color: var(--ink); border-radius: 10px; font: inherit; font-size: 13px; }
.leaflet-popup-tip { background: var(--bg-2); }
.leaflet-tooltip { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.leaflet-control-zoom a { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.leaflet-control-attribution { background: rgba(255,255,255,.7); font-size: 10px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
  :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(0,0,0,.6); color: #ccc; }
}

/* Full-screen photo moment */
.photo-moment { position: fixed; inset: 0; z-index: 1950; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(11,26,51,.94); backdrop-filter: blur(10px); animation: moment-in .4s ease-out; color: #fff; }
.pm-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 96vw; }
.pm-inner img { max-width: 92vw; max-height: 66vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: photo-pop .7s cubic-bezier(.2, .9, .2, 1.15) both; background: #000; }
.pm-cap { text-align: center; animation: rise .6s .25s both; }
.pm-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.pm-title { font-size: clamp(22px, 4vw, 34px); font-weight: 800; letter-spacing: -.01em; margin-top: 4px; }
.pm-sub { font-size: clamp(14px, 2.2vw, 18px); opacity: .9; margin-top: 4px; max-width: 70ch; }
.photo-moment button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); animation: rise .6s .45s both; }
@keyframes photo-pop { 0% { transform: scale(.6) rotate(-3deg); opacity: 0; } 60% { transform: scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .photo-moment, .pm-inner img, .pm-cap, .photo-moment button { animation: none; } }

/* Cheer squad */
.squad-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 10px; }
.squad-form .note { grid-column: 1 / -1; }
@media (max-width: 480px) { .squad-form { grid-template-columns: 1fr; } }
.sw.squad { background: #0ea5e9; border-radius: 3px; }
.squad-pin { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; background: #0ea5e9; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff; cursor: pointer; }
.squad-pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.squad-pin.passed { background: var(--muted); opacity: .8; }
.leaflet-container .leaflet-marker-icon.squad-icon { background: none; border: 0; width: auto !important; height: auto !important; }
.squad-list td:first-child { width: 55%; }

/* Splash: what this is, how far away the race is */
.about-link { display: inline-block; margin-top: 3px; padding: 8px 6px 10px; margin: -5px -6px -10px; font-size: 13px; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.about-link:hover { color: var(--ink); }
.about-sep { color: var(--muted); font-size: 13px; }
.splash { position: fixed; inset: 0; z-index: 1950; overflow: auto; -webkit-overflow-scrolling: touch; color: #fff; background-color: #0b1a33; background-image: radial-gradient(1200px 800px at 50% 0%, rgba(24,86,201,.85), rgba(11,26,51,0) 70%); animation: moment-in .4s ease-out; }
.splash-inner { max-width: 760px; margin: 0 auto; padding: max(30px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom)); text-align: center; }
.splash-kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; animation: rise .7s .1s both; }
.splash-title { font-size: clamp(44px, 11vw, 108px); font-weight: 900; letter-spacing: -.03em; line-height: .95; margin: 14px 0 12px; text-shadow: 0 10px 40px rgba(0,0,0,.35); animation: pop .9s cubic-bezier(.2, .9, .2, 1.15) both; }
.splash-sub { font-size: clamp(16px, 2.6vw, 21px); opacity: .95; max-width: 560px; margin: 0 auto; line-height: 1.4; animation: rise .7s .3s both; }
.splash-count { margin: 24px auto 0; animation: rise .7s .4s both; }
.sc-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.sc-cells { display: flex; justify-content: center; gap: 8px; }
.sc { flex: 0 0 auto; min-width: clamp(70px, 19vw, 96px); padding: 12px 10px 9px; /* as wide as its number: 145 days is three digits */ background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; backdrop-filter: blur(6px); }
.sc b { display: block; font-size: clamp(30px, 8vw, 56px); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; margin-top: 5px; }
@media (max-width: 360px) { .sc-cells { gap: 5px; } .sc { min-width: 0; padding: 10px 5px 8px; } .sc span { font-size: 10px; letter-spacing: .04em; } } /* the narrowest phones: four cells and a three-digit day count still fit */
.sc-go { font-size: clamp(26px, 6vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.splash-links { margin: 16px 0 0; font-size: 14px; line-height: 1.5; opacity: .9; animation: rise .7s .8s both; }
.splash-links a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* "While you wait": the gear and merch pages, under the countdown. */
.splash-wait { margin: 22px 0 0; animation: rise .7s .42s both; }
.swt-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.swt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.swt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); color: #fff; text-decoration: none; transition: background .2s; }
.swt:hover { background: rgba(255,255,255,.2); }
.swt-i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.14); }
.swt > span:nth-child(2) { flex: 1; min-width: 0; }
.swt b { display: block; font-size: 15px; } .swt small { display: block; font-size: 12px; opacity: .8; margin-top: 2px; line-height: 1.3; }
.swt-c { flex: none; font-size: 22px; opacity: .6; }
.splash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 26px 0 14px; text-align: left; animation: rise .7s .45s both; }
.splash-tile { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(6px); }
.st-k { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.st-v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.st-d { font-size: 14px; opacity: .9; line-height: 1.4; }
.splash-what { text-align: left; background: rgba(0,0,0,.2); border-radius: 14px; padding: 14px 18px; font-size: 15px; line-height: 1.5; animation: rise .7s .55s both; }
.splash-what .sw-h { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; margin-bottom: 6px; }
.splash-what ul { margin: 0; padding-left: 18px; } .splash-what li { margin: 5px 0; }
.splash button { margin-top: 22px; font-size: 18px; padding: 14px 30px; background: var(--accent); color: #fff; border: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(255,106,19,.35); animation: rise .7s .7s both; }
@media (prefers-reduced-motion: reduce) { .splash, .splash-kicker, .splash-title, .splash-sub, .splash-count, .splash-tiles, .splash-what, .splash-links, .splash-wait, .splash button { animation: none; } }

/* Tappable hero tiles and their detail sheet */
.tile[data-detail] { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease; }
/* The heart-rate tile paints its graph (the sheet's window: the last 15 min by default, the whole race once finished)
   across the tile behind the number, a faint area and a line in the zone's colour. */
.tile .label, .tile .value, .tile .unit { position: relative; z-index: 1; }
.tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; color: var(--red); }
.tile-bg path.area { fill: currentColor; opacity: .03; }
.tile-bg path.line { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .11; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* The pace tile's last six miles as bars (amber when slower than goal) with a dashed goal line; the distance tile's
   elevation profile with the part he has run tinted and a dot where he is. */
#pace-bg, #dist-bg { color: var(--accent); }
.tile-bg rect { fill: currentColor; opacity: .09; }
.tile-bg rect.slow { fill: #d99a06; }
.tile-bg line.goal { stroke: var(--green); stroke-width: 1; opacity: .35; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.tile-bg path.prof { fill: currentColor; opacity: .04; }
.tile-bg path.done { fill: currentColor; opacity: .09; }
.tile-dot { position: absolute; z-index: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); opacity: .6; pointer-events: none; }
/* The finish tile's drift line (the projected finish over the race against the dashed goal) in white on the orange, and
   the elapsed tile's cheers-per-ten-minutes bars. */
#elapsed-bg { color: var(--accent); }
#proj-bg { color: #fff; }
#proj-bg path.line { opacity: .32; }
#proj-bg line.goal { stroke: #fff; opacity: .45; }
.tile[data-zone="1"] .tile-bg { color: #3f7fd9; }
.tile[data-zone="2"] .tile-bg { color: #1f9d55; }
.tile[data-zone="3"] .tile-bg { color: #d99a06; }
.tile[data-zone="4"] .tile-bg { color: #ef6a1f; }
.tile[data-zone="5"] .tile-bg { color: #d7263d; }
.tile[data-detail] .label { padding-right: 24px; }
.tile[data-detail]:hover { box-shadow: 0 6px 18px rgba(11,26,51,.14); }
.tile[data-detail]:active { transform: scale(.985); }
.tile[data-detail]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tile[data-detail]::after { content: '›'; position: absolute; top: 9px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: rgba(127,127,127,.16); color: var(--muted); font-size: 15px; font-weight: 700; line-height: 17px; text-align: center; }
.tile.accent[data-detail]::after { background: rgba(255,255,255,.25); color: #fff; }
.sheet { position: fixed; inset: 0; z-index: 1960; background: rgba(11,26,51,.55); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: moment-in .2s ease-out; }
.sheet-inner { background: var(--bg-2); color: var(--ink); width: 100%; max-width: 540px; max-height: 88vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 18px 20px max(20px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.3); animation: sheet-up .25s cubic-bezier(.2,.9,.2,1) both; }
@media (min-width: 700px) { .sheet { align-items: center; padding: 20px; } .sheet-inner { border-radius: 22px; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sheet-value { font-size: clamp(44px, 12vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.sheet-sub { color: var(--muted); font-size: 14px; }
.sheet-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.sheet-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sheet-row .rk { color: var(--muted); flex: 0 1 auto; }
.sheet-row .rv { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sheet-row .rv small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 1px; }
.sheet-row.hl .rv { color: var(--green); }
.sheet button { margin-top: 14px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-inner { animation: none; } }

/* Nick himself, cut out of a photo, on the splash and the pre-race card */
.splash-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* The figure is a link to the gear page: it floats gently, grows a touch on hover, and wears a "Tap me" pill at the hem. */
.splash-figure { position: relative; width: 200px; height: 250px; flex: none; display: flex; justify-content: center; align-items: flex-end; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; animation: rise .8s .05s both; }
/* The shadow sits on a wrapper: on the image itself it was blurred first and then cut off square by the image's own fade-out mask, which drew a dark box around him. */
.splash-shadow { display: flex; height: 100%; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.splash-nick { height: 100%; width: auto; -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); transform-origin: 50% 100%; transition: scale .25s; animation: float 4s 1s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.splash-figure:hover .splash-nick, .splash-figure:focus-visible .splash-nick { scale: 1.04; }
.splash-tap { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: background .2s; }
.splash-figure:hover .splash-tap { background: rgba(255,255,255,.28); }
.splash-text { text-align: center; }
@media (min-width: 700px) {
  .splash-head { flex-direction: row-reverse; justify-content: center; align-items: flex-end; gap: 36px; margin-bottom: 6px; }
  .splash-figure { width: 270px; height: 340px; }
  .splash-text { text-align: left; max-width: 460px; padding-bottom: 28px; }
  .splash-text .splash-title { font-size: clamp(44px, 6.6vw, 72px); text-wrap: balance; } /* beside the figure the column is narrow: "145 days to go" took three lines at full size */
  .splash-text .splash-sub { margin: 0; }
}
.moment-hero { padding-right: 140px; }
.moment-hero.finish { padding-right: 190px; min-height: 210px; }
.moment-hero.finish .mh-nick { max-height: 250px; right: 0; }
.mh-nick { position: absolute; right: 10px; bottom: 0; height: 100%; max-height: 190px; width: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); pointer-events: none; }
@media (max-width: 520px) { .moment-hero { padding-right: 104px; } .mh-nick { right: 2px; max-height: 150px; } .moment-hero.finish { padding-right: 120px; } .moment-hero.finish .mh-nick { max-height: 180px; right: -6px; } .moment-hero.finish .hooray-form { margin-right: -100px; } }
@media (prefers-reduced-motion: reduce) { .splash-nick, .splash-figure { animation: none; } }

/* Stickers on the takeovers: a race-photo cutout for the moment and a silly face */
.moment-faces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.moment-face, .moment-pose { position: absolute; bottom: -1vh; width: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); transform-origin: 50% 100%; animation: face-pop .9s cubic-bezier(.2, .9, .2, 1.2) both, face-wobble 2.6s ease-in-out infinite alternate; }
.moment-face { height: min(40vh, 460px); }
.moment-pose { height: min(56vh, 640px); bottom: -2vh; animation-duration: .9s, 3.4s; }
.moment.love .moment-pose, .moment.hurt .moment-pose, .moment.quiet .moment-pose, .moment.final .moment-pose { height: min(50vh, 560px); }
.moment.final .moment-pose.mid, .moment.final .moment-pose.mid-left, .moment.final .moment-pose.mid-right { height: min(36vh, 400px); } /* keeps the cheer button clear */
.moment-face.left, .moment-pose.left { left: max(-10px, 2vw); } .moment-face.right, .moment-pose.right { right: max(-10px, 2vw); }
.mid, .mid-left, .mid-right { translate: -50% 0; z-index: 2; }
.mid { left: 50%; } .mid-left { left: 32%; } .mid-right { left: 68%; }
.moment-pose.mid, .moment-pose.mid-left, .moment-pose.mid-right { height: min(46vh, 520px); }
.moment-face.mid, .moment-face.mid-left, .moment-face.mid-right { height: min(32vh, 360px); }
@keyframes face-pop { 0% { transform: translateY(70%) rotate(var(--tilt)) scale(.5); opacity: 0; } 65% { transform: translateY(-4%) rotate(var(--tilt)) scale(1.05); opacity: 1; } 100% { transform: translateY(0) rotate(var(--tilt)) scale(1); opacity: 1; } }
@keyframes face-wobble { from { transform: rotate(calc(var(--tilt) - 3deg)); } to { transform: rotate(calc(var(--tilt) + 3deg)); } }
@media (max-width: 700px) {
  .moment { padding-top: 4vh; }
  .moment-face { height: min(27vh, 250px); } .moment-pose { height: min(40vh, 360px); } .moment.love .moment-pose, .moment.hurt .moment-pose, .moment.quiet .moment-pose, .moment.final .moment-pose { height: min(36vh, 330px); }
  .moment-face.left, .moment-pose.left { left: -8vw; } .moment-face.right, .moment-pose.right { right: -8vw; }
  .moment-pose.mid, .moment-pose.mid-left, .moment-pose.mid-right { height: min(34vh, 300px); }
  .moment-face.mid, .moment-face.mid-left, .moment-face.mid-right { height: min(24vh, 210px); }
}
@media (prefers-reduced-motion: reduce) { .moment-face, .moment-pose { animation: none; } }

/* Heart-rate tile coloured by zone (runner.hrZones) and the final-stretch cheer prompt. */
.tile[data-zone="1"] .value { color: #3f7fd9; }
.tile[data-zone="2"] .value { color: #1f9d55; }
.tile[data-zone="3"] .value { color: #d99a06; }
.tile[data-zone="4"] .value { color: #ef6a1f; }
.tile[data-zone="5"] .value { color: #d7263d; }
#cheer-blurb.final { color: var(--accent); font-weight: 600; }

/* Beating heart next to the heart rate, and the pop when the rate climbs into zone 4 or 5. */
.hr-value { display: flex; align-items: center; gap: 7px; }
.hr-heart { width: .8em; height: .8em; flex: 0 0 auto; transform-origin: center; }
.hr-heart.beating { animation: heartbeat var(--beat, 1s) ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.32); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 60% { transform: scale(1); } }
.tile[data-zone="4"] { box-shadow: var(--shadow), inset 0 0 0 2px rgba(239,106,31,.55); background-image: linear-gradient(rgba(239,106,31,.10), rgba(239,106,31,.10)); }
.tile[data-zone="5"] { box-shadow: var(--shadow), inset 0 0 0 2px rgba(215,38,61,.6); background-image: linear-gradient(rgba(215,38,61,.12), rgba(215,38,61,.12)); }
.tile.hr-pop { animation: hrpop .9s cubic-bezier(.2,.9,.3,1.4); }
@keyframes hrpop { 0% { transform: scale(1); } 35% { transform: scale(1.09); box-shadow: 0 0 0 7px rgba(239,106,31,.28), 0 12px 30px rgba(239,106,31,.4); } 100% { transform: scale(1); } }
.tile[data-zone="5"].hr-pop { animation-name: hrpop5; }
@keyframes hrpop5 { 0% { transform: scale(1); } 35% { transform: scale(1.09); box-shadow: 0 0 0 7px rgba(215,38,61,.3), 0 12px 30px rgba(215,38,61,.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hr-heart.beating, .tile.hr-pop { animation: none; } }

/* The pace sheet's card (docs/redesign/01-live): the number with a trend pill beside it, the two sources with their
   dots, a sparkline with the pace written in each bar against the average and the goal, the official splits; and the
   heart-rate sheet's graph of the last minutes against the zone lines. */
.sheet-valuerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-valuerow .sheet-value { min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--bg); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.pill.slower { color: #d99a06; }
.pill.faster { color: var(--green); }
.sheet-card { margin-top: 10px; }
.sheet-card .srcs { display: flex; flex-direction: column; gap: 6px; }
.sheet-card .src-line { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sheet-card .src-line span { overflow: hidden; text-overflow: ellipsis; }
.sheet-card .src-line .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sheet-card .src-line .dot.watch { background: var(--green); }
.sheet-card .src-line .dot.mat { background: #3f7fd9; }
.sheet-card .spark { display: block; width: 100%; height: auto; margin-top: 12px; }
.sheet-card .spark.pace { aspect-ratio: 320 / 110; }
.sheet-card .spark.hr { aspect-ratio: 320 / 120; }
.sheet-card .spark rect { fill: var(--accent); }
.sheet-card .spark rect.slow { fill: #d99a06; }
.sheet-card .spark text.v { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: middle; }
.sheet-card .spark text.v.out { fill: var(--ink); }
.sheet-card .spark text.m { fill: var(--muted); font-size: 10px; font-weight: 600; }
.sheet-card .spark line.avg { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sheet-card .spark line.goal { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sheet-card .spark text.lbl { fill: var(--ink); font-size: 10px; font-weight: 700; }
.sheet-card .spark text.lbl.goal { fill: var(--green); }
.sheet-card .spark path.hr { fill: none; stroke: var(--red); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sheet-card .spark line.zone { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.sheet-card .spark text.z { fill: var(--muted); font-size: 9px; }
.sheet-card .splits-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 13px; color: var(--muted); }
.sheet-card .splits-head b { color: var(--ink); font-size: 15px; }
.sheet-card .splits-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.sheet-card .sp { background: var(--bg); border-radius: 12px; padding: 10px 6px; text-align: center; min-width: 0; }
.sheet-card .sp .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet-card .sp .k { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-card .sp .d { font-size: 12px; font-weight: 700; margin-top: 2px; }
.sheet-card .sp .d.pos { color: var(--green); }
.sheet-card .sp .d.neg { color: var(--red); }
.sheet-card .sp.next { background: transparent; border: 1.5px dashed var(--line); }
.sheet-card .sp.next .v { color: var(--muted); }
.sheet-card .sp.none { grid-column: 1 / -1; text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.sheet-card .hr-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sheet-card .hr-line b { color: var(--ink); }
/* "Show on the tile" choices in a tile's sheet, remembered on this device. */
.sheet-opts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-opts:empty { display: none; }
.sheet-opts .opt-label { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sheet-opts .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.sheet .sheet-opts .seg button { margin: 0; width: auto; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 999px; }
.sheet .sheet-opts .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Side of the road (step 2): the Left/Right control, the letter badges, the kerb pins */
/* The three steps of getting on the map: numbered, one of them "now", the done ones ticked, the ones to come dimmed. */
.me-card { counter-reset: step; }
.step { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--line); }
.step .step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.step .num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 13px; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.step .num::before { counter-increment: step; content: counter(step); }
.step .hint { font-size: 13px; color: var(--muted); font-weight: 500; }
.step.now { border-left-color: var(--accent); } .step.now .num { background: var(--accent); color: #fff; }
.step.done { border-left-color: var(--green); } .step.done .num { background: var(--green); color: #fff; } .step.done .num::before { content: '✓'; }
.step.todo { opacity: .55; }
.step.over { border-left-color: transparent; padding-left: 0; opacity: 1; } .step.over .step-h { display: none; } /* a race that is run */
.side-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.side-row .q { font-weight: 700; }
.side-seg { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.side-seg button { margin: 0; width: auto; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.side-seg button[aria-pressed="true"] { background: #0ea5e9; color: #fff; }
.side-row .note { flex-basis: 100%; }
.sb { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 5px; background: #fff; color: #0ea5e9; font-size: 11px; font-weight: 900; text-align: center; line-height: 16px; font-style: normal; letter-spacing: .02em; }
.squad-pin .sb { margin-left: 1px; }
.squad-pin.passed .sb { color: var(--muted); }
.squad-list .sb, .me-result .sb { background: #0ea5e9; color: #fff; margin-left: 6px; vertical-align: 2px; }

/* the tester (simulation only): pretend to stand on the course */
.simbar.sim-replay > label, .simbar.sim-replay .sim-jumps { display: none; } /* a replay: no pace, speed, scenario or jumps to set */
.tester { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.tester .q { font-weight: 700; }
.tester label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.tester input, .tester select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; }
.tester input[type="number"] { width: 5em; }
.tester button.small { padding: 8px 12px; font-size: 13px; width: auto; margin: 0; }
.tester button.ghost { background: var(--bg); color: var(--blue); border: 1px solid var(--line); }
.tester button.ghost[aria-pressed="true"] { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }

/* ---- spectator polish (roadmap item 9) ---- */
.status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calm { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.calm input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.hs-nudge { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.hs-nudge b { font-weight: 700; color: var(--ink); }
.mbar { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 1900; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 14px; color: #fff; background: #0b1a33; box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 14px; }
.mbar .mbar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbar b { font-weight: 800; letter-spacing: .02em; }
.mbar span { font-size: 13px; opacity: .92; }
.mbar span b { font-weight: 700; }
.mbar-cheer { flex: 0 0 auto; background: #fff; color: #0b1a33; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; }
.mbar-x { flex: 0 0 auto; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 4px 6px; opacity: .8; }
.mbar.love { background: linear-gradient(90deg, #be185d, #ec4899); } .mbar.hurt { background: linear-gradient(90deg, #b45309, #f59e0b); } .mbar.quiet { background: linear-gradient(90deg, #1e3a8a, #3b82f6); } .mbar.final { background: linear-gradient(90deg, #7c3aed, var(--accent)); }
.mbar.love .mbar-cheer, .mbar.hurt .mbar-cheer, .mbar.quiet .mbar-cheer, .mbar.final .mbar-cheer { color: #0b1a33; }
.minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 1500; height: calc(40px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.minibar .sep { color: var(--muted); font-weight: 400; }
.minibar #mb-eta { color: var(--accent); }
#cheer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } /* the quick-cheer chips; .chips alone is the Race numbers grid above */
#cheer-chips button { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
#cheer-chips button:active { background: var(--line); }
.feed-all { display: block; margin: 8px 0 0; }
/* no fresh fix: a dashed ring (see the rules at the end of this file); never reset a photo dot's background here, it loses its size and shows a corner of the photo */
.runner-icon.has-photo .runner-dot.estimating { background-color: var(--bg-2); background-size: cover; background-position: center; background-repeat: no-repeat; outline: 2px dashed var(--accent); outline-offset: 2px; }
.squad-icon .squad-pin { transform: translateY(calc(var(--stack, 0) * -22px)); } /* pins at one spot stack upwards instead of hiding each other */
.sheet-row.cheer .rv { text-align: left; font-weight: 500; }

/* ---- plan my spot (roadmap item 10) ---- */
.plan-row { border-color: var(--blue); }
.me-card button.ghost { background: var(--bg); color: var(--blue); border: 1px solid var(--line); } /* one primary button on the card: the plan is the quiet one */
.plan-row #plan-when { width: 180px; max-width: 100%; }
.squad-pin.planned { background: rgba(14,165,233,.35); border: 1.5px dashed #fff; } /* a plan, not a person standing there yet */
.squad-pin.planned::before { background: transparent; border: 1.5px solid #fff; width: 5px; height: 5px; }
.squad-list .plan { color: var(--muted); font-weight: 500; }

/* A runner with no cut-out picture (body.no-cutout, set by the server): no figure on the welcome screen, no picture in the cards, and the room it took given back. */
body.no-cutout .splash-figure, body.no-cutout .mh-nick { display: none; }
body.no-cutout .moment-hero, body.no-cutout .moment-hero.finish { padding-right: 24px; min-height: 0; }
body.no-cutout .splash-text { text-align: center; max-width: none; padding-bottom: 0; } body.no-cutout .splash-text .splash-sub { margin: 0 auto; }

/* A welcome screen with a backdrop of its own: the event file's "backdrop" names it. Paris: a roofline with the Arc de Triomphe and
   the Louvre standing in it, and the tower. By night (data-light, from the clock in the race's own city) the blue hour, stars and the
   tower lit and sparkling; by day a blue sky, pale stone and the tower in its iron brown. */
.splash[data-backdrop="paris"] { --gx: calc(100% - 7.5vh); --gy: calc(100% - 22vh); --gr: 24vh 32vh; --tower-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cpath d='M99 0L101 0L102 38L106 42L106 58L104 60Q108 150 122 208L130 208L130 222L125 222Q134 262 146 288L156 288L156 306L150 306Q162 356 186 400L150 400Q140 330 100 326Q60 330 50 400L14 400Q38 356 50 306L44 306L44 288L54 288Q66 262 75 222L70 222L70 208L78 208Q92 150 96 60L94 58L94 42L98 38Z'/%3E%3C/svg%3E"); background-color: #0a1030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 130'%3E%3Cpath fill='%23ffb65c' fill-opacity='.5' d='M40 130V72A20 20 0 0 1 80 72V130Z'/%3E%3Cpath fill='%23070b1f' fill-rule='evenodd' d='M8 0H112V10H120V26H114V130H6V26H0V10H8ZM40 130V72A20 20 0 0 1 80 72V130Z'/%3E%3Cpath d='M0 10H120M6 26H114' stroke='%23ffd27a' stroke-opacity='.45' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cpath fill='%23070b1f' d='M0 90V50H20V38L34 28L48 38V50H192V38L206 28L220 38V50H240V90Z'/%3E%3Cg fill='%23ffd27a' fill-opacity='.75'%3E%3Crect x='6' y='60' width='4' height='10' rx='2'/%3E%3Crect x='18' y='60' width='4' height='10' rx='2'/%3E%3Crect x='30' y='60' width='4' height='10' rx='2'/%3E%3Crect x='42' y='60' width='4' height='10' rx='2'/%3E%3Crect x='186' y='60' width='4' height='10' rx='2'/%3E%3Crect x='198' y='60' width='4' height='10' rx='2'/%3E%3Crect x='210' y='60' width='4' height='10' rx='2'/%3E%3Crect x='222' y='60' width='4' height='10' rx='2'/%3E%3Crect x='234' y='60' width='4' height='10' rx='2'/%3E%3C/g%3E%3Cpath d='M120 14L182 90H58Z' fill='%23ffd27a' fill-opacity='.8'/%3E%3Cpath d='M109.7 26.7L161.3 90M130.3 26.7L78.7 90M99.3 39.3L140.7 90M140.7 39.3L99.3 90M89.0 52.0L120.0 90M151.0 52.0L120.0 90M78.7 64.7L99.3 90M161.3 64.7L140.7 90M68.3 77.3L78.7 90M171.7 77.3L161.3 90' stroke='%236b3f08' stroke-opacity='.5' stroke-width='.7' fill='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70'%3E%3Cpath fill='%23070b1f' d='M0 70V40h30v-8h6v8h40v-14l20-8l20 8v14h24v-6h8v6h30V30q25-26 50 0V44h36v-10h5v10h44v-18h60v18h20v-7h7v7h46v-12l25-9l25 9v12h30v-5h6v5H600V70Z'/%3E%3Cg fill='%23ffd27a' fill-opacity='.75'%3E%3Crect x='10' y='48' width='3' height='5'/%3E%3Crect x='48' y='50' width='3' height='5'/%3E%3Crect x='92' y='36' width='3' height='5'/%3E%3Crect x='130' y='52' width='3' height='5'/%3E%3Crect x='200' y='40' width='3' height='5'/%3E%3Crect x='214' y='52' width='3' height='5'/%3E%3Crect x='282' y='54' width='3' height='5'/%3E%3Crect x='330' y='36' width='3' height='5'/%3E%3Crect x='352' y='36' width='3' height='5'/%3E%3Crect x='420' y='52' width='3' height='5'/%3E%3Crect x='468' y='40' width='3' height='5'/%3E%3Crect x='560' y='50' width='3' height='5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(var(--gr) at var(--gx) var(--gy), rgba(255,176,80,.34), rgba(255,176,80,0)), radial-gradient(1.5px 1.5px at 30px 40px, rgba(255,255,255,.9), transparent 100%), radial-gradient(1.2px 1.2px at 150px 110px, rgba(255,255,255,.7), transparent 100%), radial-gradient(1px 1px at 90px 170px, rgba(255,255,255,.6), transparent 100%), radial-gradient(120% 55% at 50% 108%, rgba(214,104,128,.6), rgba(120,62,150,.35) 45%, rgba(10,16,48,0) 75%), linear-gradient(#070b24, #1a1b56 55%, #3a2466);
  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: auto 92px, 170px auto, auto 64px, auto, 260px 230px, 310px 270px, 190px 210px, auto, auto; background-position: 10px bottom, 96px bottom, left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
.splash[data-backdrop="paris"] .splash-inner { padding-bottom: max(130px, env(safe-area-inset-bottom)); } /* the last scroll ends on the skyline, not on a card */
.splash[data-backdrop="paris"]::before, .splash[data-backdrop="paris"]::after { content: ""; position: fixed; z-index: -1; bottom: 0; right: -5vh; height: 50vh; aspect-ratio: 1 / 2; pointer-events: none; }
.splash[data-backdrop="paris"]::before, .splash[data-backdrop="paris"]::after { -webkit-mask: var(--tower-mask) center bottom / contain no-repeat; mask: var(--tower-mask) center bottom / contain no-repeat; }
/* The gold is plain CSS under the tower-shaped mask: Safari drew the picture's own gradient and lattice as solid black. */
.splash[data-backdrop="paris"]::before { opacity: .85; background: linear-gradient(transparent 52%, rgba(255,240,190,.85) 52% 55.5%, transparent 55.5% 72%, rgba(255,240,190,.85) 72% 76.5%, transparent 76.5%), repeating-linear-gradient(45deg, rgba(58,29,5,.38) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgba(58,29,5,.38) 0 1px, transparent 1px 6px), linear-gradient(#fff1c0, #ffc04d 45%, #ee8d1c); }
.splash[data-backdrop="paris"]::after { opacity: .9;
  background-image: radial-gradient(1.6px 1.6px at 6px 9px, #fff, transparent 100%), radial-gradient(1.4px 1.4px at 17px 4px, #fff, transparent 100%), radial-gradient(1.6px 1.6px at 11px 21px, #fff, transparent 100%);
  background-size: 23px 29px, 31px 19px, 27px 37px; animation: tower-sparkle 1.2s steps(1, end) infinite; }
@keyframes tower-sparkle { 0% { background-position: 0 0, 9px 5px, 4px 13px; } 25% { background-position: 11px 7px, 0 12px, 15px 2px; } 50% { background-position: 5px 16px, 19px 3px, 9px 22px; } 75% { background-position: 16px 2px, 6px 9px, 20px 11px; } }
@media (min-width: 640px) { .splash[data-backdrop="paris"]::before, .splash[data-backdrop="paris"]::after { right: 0; height: 84vh; } .splash[data-backdrop="paris"]::before { opacity: .7; }
  .splash[data-backdrop="paris"] { --gx: calc(100% - 21vh); --gy: calc(100% - 38vh); --gr: 38vh 50vh; }
  .splash[data-backdrop="paris"] { background-size: auto 130px, 250px auto, auto 64px, auto, 260px 230px, 310px 270px, 190px 210px, auto, auto; background-position: 3% bottom, 22% bottom, left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
@media (min-width: 1200px) { .splash[data-backdrop="paris"]::before, .splash[data-backdrop="paris"]::after { right: max(8px, calc(50% - 400px - 42vh)); } .splash[data-backdrop="paris"]::before { opacity: .95; }
  .splash[data-backdrop="paris"] { --gx: calc(100% - max(8px, calc(50% - 400px - 42vh)) - 21vh); }
  .splash[data-backdrop="paris"] { background-size: auto 170px, 320px auto, auto 64px, auto, 260px 230px, 310px 270px, 190px 210px, auto, auto; background-position: max(16px, calc(50% - 660px)) bottom, calc(50% - 380px) bottom, left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .splash[data-backdrop="paris"]::after { animation: none; opacity: .5; } }
/* Daytime in Paris: the same nine layers in the same places (the star layers are empty), so the sizes and positions above still hold. */
.splash[data-backdrop="paris"][data-light="day"] { background-color: #2f78cf;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 130'%3E%3Cpath fill='%23f1e6d0' fill-rule='evenodd' d='M8 0H112V10H120V26H114V130H6V26H0V10H8ZM40 130V72A20 20 0 0 1 80 72V130Z'/%3E%3Cpath d='M0 10H120M6 26H114M6 40H114M36 72A24 24 0 0 1 84 72' stroke='%23a8946e' stroke-opacity='.7' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cpath fill='%23f1e6d0' d='M0 90V50H20V38L34 28L48 38V50H192V38L206 28L220 38V50H240V90Z'/%3E%3Cg fill='%237c8aa5' fill-opacity='.8'%3E%3Crect x='6' y='60' width='4' height='10' rx='2'/%3E%3Crect x='18' y='60' width='4' height='10' rx='2'/%3E%3Crect x='30' y='60' width='4' height='10' rx='2'/%3E%3Crect x='42' y='60' width='4' height='10' rx='2'/%3E%3Crect x='186' y='60' width='4' height='10' rx='2'/%3E%3Crect x='198' y='60' width='4' height='10' rx='2'/%3E%3Crect x='210' y='60' width='4' height='10' rx='2'/%3E%3Crect x='222' y='60' width='4' height='10' rx='2'/%3E%3Crect x='234' y='60' width='4' height='10' rx='2'/%3E%3C/g%3E%3Cpath d='M120 14L182 90H58Z' fill='%23e6f4ff' fill-opacity='.8'/%3E%3Cpath d='M109.7 26.7L161.3 90M130.3 26.7L78.7 90M99.3 39.3L140.7 90M140.7 39.3L99.3 90M89.0 52.0L120.0 90M151.0 52.0L120.0 90M78.7 64.7L99.3 90M161.3 64.7L140.7 90M68.3 77.3L78.7 90M171.7 77.3L161.3 90' stroke='%235f87ad' stroke-opacity='.5' stroke-width='.7' fill='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70'%3E%3Cpath fill='%233f5f95' d='M0 70V40h30v-8h6v8h40v-14l20-8l20 8v14h24v-6h8v6h30V30q25-26 50 0V44h36v-10h5v10h44v-18h60v18h20v-7h7v7h46v-12l25-9l25 9v12h30v-5h6v5H600V70Z'/%3E%3Cg fill='%23cfe0f5' fill-opacity='.45'%3E%3Crect x='10' y='48' width='3' height='5'/%3E%3Crect x='48' y='50' width='3' height='5'/%3E%3Crect x='92' y='36' width='3' height='5'/%3E%3Crect x='130' y='52' width='3' height='5'/%3E%3Crect x='200' y='40' width='3' height='5'/%3E%3Crect x='214' y='52' width='3' height='5'/%3E%3Crect x='282' y='54' width='3' height='5'/%3E%3Crect x='330' y='36' width='3' height='5'/%3E%3Crect x='352' y='36' width='3' height='5'/%3E%3Crect x='420' y='52' width='3' height='5'/%3E%3Crect x='468' y='40' width='3' height='5'/%3E%3Crect x='560' y='50' width='3' height='5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(var(--gr) at var(--gx) var(--gy), rgba(255,255,255,.3), rgba(255,255,255,0)), none, none, none, radial-gradient(120% 40% at 50% 108%, rgba(255,240,214,.55), rgba(255,240,214,0) 70%), linear-gradient(#1c5ab8, #3482d6 55%, #5ea6e6); }
.splash[data-backdrop="paris"][data-light="day"]::before { opacity: 1; background: linear-gradient(transparent 52%, rgba(60,40,28,.55) 52% 55.5%, transparent 55.5% 72%, rgba(60,40,28,.55) 72% 76.5%, transparent 76.5%), repeating-linear-gradient(45deg, rgba(255,235,210,.22) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgba(255,235,210,.22) 0 1px, transparent 1px 6px), linear-gradient(#9a7557, #7a5a44 45%, #5f4433); }
.splash[data-backdrop="paris"][data-light="day"]::after { display: none; }
.splash[data-backdrop="paris"][data-light="day"] .splash-kicker, .splash[data-backdrop="paris"][data-light="day"] .splash-sub, .splash[data-backdrop="paris"][data-light="day"] .splash-count, .splash[data-backdrop="paris"][data-light="day"] .splash-wait, .splash[data-backdrop="paris"][data-light="day"] .splash-links { text-shadow: 0 1px 8px rgba(8,36,90,.55); }
.splash[data-backdrop="paris"][data-light="day"] .sc, .splash[data-backdrop="paris"][data-light="day"] .splash-tile { background: rgba(8,36,90,.3); } .splash[data-backdrop="paris"][data-light="day"] .splash-what { background: rgba(8,36,90,.4); }

/* Sydney: the Harbour Bridge and the Opera House on the water, and by day a kangaroo on the bridge that now and then hops down the
   arch and back. By night (data-light, from the clock in Sydney) the sails softly lit, the bridge dark with its deck lights, the
   Southern Cross and a kangaroo drawn in stars; by day white sails on a blue harbour. Flat colours only inside the pictures
   (see the note on Paris above). Written by scripts/build-sydney-backdrop.py: change the shapes there, not here. */
.splash[data-backdrop="sydney"] { --bs: .825; --bl: -64px; --ox: calc(100% - 124px); --kw: 132px; --kr: 22px; --kb: 172px; --cl: 24px; --cb: 430px; background-color: #06102a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 130'%3E%3Cpath d='M50 72Q200 -58 350 72M62 104Q200 -34 338 104' stroke='%23060d22' stroke-width='3' fill='none'/%3E%3Cpath d='M50.0 72.0L62.0 104.0M50.0 72.0L81.7 85.7M71.4 54.8L81.7 85.7M71.4 54.8L101.4 70.2M92.9 40.2L101.4 70.2M92.9 40.2L121.1 57.5M114.3 28.2L121.1 57.5M114.3 28.2L140.9 47.7M135.7 18.9L140.9 47.7M135.7 18.9L160.6 40.6M157.1 12.3L160.6 40.6M157.1 12.3L180.3 36.4M178.6 8.3L180.3 36.4M178.6 8.3L200.0 35.0M200.0 7.0L200.0 35.0M200.0 35.0L221.4 8.3M221.4 8.3L219.7 36.4M219.7 36.4L242.9 12.3M242.9 12.3L239.4 40.6M239.4 40.6L264.3 18.9M264.3 18.9L259.1 47.7M259.1 47.7L285.7 28.2M285.7 28.2L278.9 57.5M278.9 57.5L307.1 40.2M307.1 40.2L298.6 70.2M298.6 70.2L328.6 54.8M328.6 54.8L318.3 85.7M318.3 85.7L350.0 72.0M350.0 72.0L338.0 104.0' stroke='%23060d22' stroke-width='1.3' fill='none'/%3E%3Cpath d='M74 92.5V104M86 82.1V104M98 72.7V104M110 64.3V104M122 57.0V104M134 50.8V104M146 45.6V104M158 41.4V104M170 38.3V104M182 36.2V104M194 35.1V104M206 35.1V104M218 36.2V104M230 38.3V104M242 41.4V104M254 45.6V104M266 50.8V104M278 57.0V104M290 64.3V104M302 72.7V104M314 82.1V104M326 92.5V104' stroke='%23060d22' stroke-width='.9' fill='none'/%3E%3Cpath d='M0 104H400' stroke='%23060d22' stroke-width='4.5' fill='none'/%3E%3Cpath d='M10 106V130M24 106V130M376 106V130M390 106V130' stroke='%23060d22' stroke-width='3' fill='none'/%3E%3Cpath fill='%230b142e' d='M36 130L38 60H42V54H50V60H54L56 130ZM344 130L346 60H350V54H358V60H362L364 130Z'/%3E%3Cg fill='%23ffd27a' fill-opacity='.8'%3E%3Ccircle cx='6' cy='100.5' r='1.1'/%3E%3Ccircle cx='20' cy='100.5' r='1.1'/%3E%3Ccircle cx='34' cy='100.5' r='1.1'/%3E%3Ccircle cx='48' cy='100.5' r='1.1'/%3E%3Ccircle cx='62' cy='100.5' r='1.1'/%3E%3Ccircle cx='76' cy='100.5' r='1.1'/%3E%3Ccircle cx='90' cy='100.5' r='1.1'/%3E%3Ccircle cx='104' cy='100.5' r='1.1'/%3E%3Ccircle cx='118' cy='100.5' r='1.1'/%3E%3Ccircle cx='132' cy='100.5' r='1.1'/%3E%3Ccircle cx='146' cy='100.5' r='1.1'/%3E%3Ccircle cx='160' cy='100.5' r='1.1'/%3E%3Ccircle cx='174' cy='100.5' r='1.1'/%3E%3Ccircle cx='188' cy='100.5' r='1.1'/%3E%3Ccircle cx='202' cy='100.5' r='1.1'/%3E%3Ccircle cx='216' cy='100.5' r='1.1'/%3E%3Ccircle cx='230' cy='100.5' r='1.1'/%3E%3Ccircle cx='244' cy='100.5' r='1.1'/%3E%3Ccircle cx='258' cy='100.5' r='1.1'/%3E%3Ccircle cx='272' cy='100.5' r='1.1'/%3E%3Ccircle cx='286' cy='100.5' r='1.1'/%3E%3Ccircle cx='300' cy='100.5' r='1.1'/%3E%3Ccircle cx='314' cy='100.5' r='1.1'/%3E%3Ccircle cx='328' cy='100.5' r='1.1'/%3E%3Ccircle cx='342' cy='100.5' r='1.1'/%3E%3Ccircle cx='356' cy='100.5' r='1.1'/%3E%3Ccircle cx='370' cy='100.5' r='1.1'/%3E%3Ccircle cx='384' cy='100.5' r='1.1'/%3E%3Ccircle cx='398' cy='100.5' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate%280 1%29 scale%281 .99%29'%3E%3Cpath d='M31 5L36 17L41 3M36 17L15 26L34 31L37 47L49 68L60 86M37 47L22 55M36 17L53 31L74 50L88 76L103 99L117 113M88 76L60 86L74 110L42 114' stroke='%23fff' stroke-opacity='.15' stroke-width='.8' fill='none'/%3E%3Cg fill='%23fff' fill-opacity='.55'%3E%3Ccircle cx='31' cy='5' r='1.3'/%3E%3Ccircle cx='41' cy='3' r='1.3'/%3E%3Ccircle cx='36' cy='17' r='1.9'/%3E%3Ccircle cx='15' cy='26' r='1.9'/%3E%3Ccircle cx='34' cy='31' r='1.3'/%3E%3Ccircle cx='37' cy='47' r='1.9'/%3E%3Ccircle cx='22' cy='55' r='1.3'/%3E%3Ccircle cx='49' cy='68' r='1.3'/%3E%3Ccircle cx='53' cy='31' r='1.3'/%3E%3Ccircle cx='74' cy='50' r='1.3'/%3E%3Ccircle cx='88' cy='76' r='1.9'/%3E%3Ccircle cx='103' cy='99' r='1.3'/%3E%3Ccircle cx='117' cy='113' r='1.9'/%3E%3Ccircle cx='60' cy='86' r='1.9'/%3E%3Ccircle cx='74' cy='110' r='1.3'/%3E%3Ccircle cx='42' cy='114' r='1.9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='78' cy='18' r='1.7' fill-opacity='.9'/%3E%3Ccircle cx='86' cy='68' r='2.1'/%3E%3Ccircle cx='62' cy='40' r='1.9'/%3E%3Ccircle cx='100' cy='36' r='1.6' fill-opacity='.9'/%3E%3Ccircle cx='88' cy='47' r='1' fill-opacity='.6'/%3E%3Ccircle cx='30' cy='70' r='2'/%3E%3Ccircle cx='12' cy='84' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to top, #071a3c 0 46px, #050b1c 46px 51px, transparent 51px), radial-gradient(70px 26px at var(--ox) calc(100% - 14px), rgba(243,234,216,.3), rgba(243,234,216,0)), radial-gradient(170px 120px at var(--ox) calc(100% - 96px), rgba(255,226,170,.22), rgba(255,226,170,0)), radial-gradient(1.5px 1.5px at 30px 40px, rgba(255,255,255,.9), transparent 100%), radial-gradient(1.2px 1.2px at 150px 110px, rgba(255,255,255,.7), transparent 100%), radial-gradient(1px 1px at 90px 170px, rgba(255,255,255,.6), transparent 100%), radial-gradient(120% 50% at 50% 104%, rgba(255,150,96,.34), rgba(40,90,150,.3) 45%, rgba(6,16,42,0) 75%), linear-gradient(#040a20, #0b214c 55%, #1a3f70);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: calc(var(--bs) * 400px) auto, var(--kw) auto, 96px 96px, auto, auto, auto, 260px 230px, 310px 270px, 190px 210px, auto, auto; background-position: left var(--bl) bottom 46px, right var(--kr) bottom var(--kb), left var(--cl) bottom var(--cb), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
.splash[data-backdrop="sydney"] .splash-inner { padding-bottom: max(330px, env(safe-area-inset-bottom)); } /* the last scroll ends on the harbour and its sky, not on a card */
.splash[data-backdrop="sydney"]::before { content: ""; position: fixed; z-index: -1; pointer-events: none; right: -6px; bottom: 34px; width: 248px; aspect-ratio: 2 / 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M246 170Q244 100 316 78Q288 125 286 170Z' fill='%23f3ead8' stroke='%23b9a98a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M316 78Q262 120 258 170M316 78Q276 122 272 170' stroke='%23cdbfa3' stroke-width='.9' fill='none'/%3E%3Cpath d='M262 170Q264 70 150 30Q186 100 190 170Z' fill='%23f3ead8' stroke='%23b9a98a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M150 30Q232 84 240 170M150 30Q208 92 215 170' stroke='%23cdbfa3' stroke-width='.9' fill='none'/%3E%3Cpath d='M200 170Q200 95 95 70Q131 120 135 170Z' fill='%23f3ead8' stroke='%23b9a98a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M95 70Q172 108 180 170M95 70Q152 114 158 170' stroke='%23cdbfa3' stroke-width='.9' fill='none'/%3E%3Cpath d='M145 170Q145 120 50 105Q83 140 85 170Z' fill='%23f3ead8' stroke='%23b9a98a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M50 105Q122 130 127 170M50 105Q103 136 106 170' stroke='%23cdbfa3' stroke-width='.9' fill='none'/%3E%3Cpath d='M388 170Q388 135 334 120Q354 146 355 170Z' fill='%23f3ead8' stroke='%23b9a98a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M334 120Q372 140 374 170' stroke='%23cdbfa3' stroke-width='.9' fill='none'/%3E%3Cpath fill='%232b241f' d='M22 170H396V186H22Z'/%3E%3Cpath fill='%2317130f' d='M8 186H400V200H8Z'/%3E%3Cg fill='%23ffd27a' fill-opacity='.8'%3E%3Crect x='40' y='175' width='7' height='5' rx='1'/%3E%3Crect x='62' y='175' width='7' height='5' rx='1'/%3E%3Crect x='84' y='175' width='7' height='5' rx='1'/%3E%3Crect x='106' y='175' width='7' height='5' rx='1'/%3E%3Crect x='128' y='175' width='7' height='5' rx='1'/%3E%3Crect x='150' y='175' width='7' height='5' rx='1'/%3E%3Crect x='172' y='175' width='7' height='5' rx='1'/%3E%3Crect x='194' y='175' width='7' height='5' rx='1'/%3E%3Crect x='216' y='175' width='7' height='5' rx='1'/%3E%3Crect x='238' y='175' width='7' height='5' rx='1'/%3E%3Crect x='260' y='175' width='7' height='5' rx='1'/%3E%3Crect x='282' y='175' width='7' height='5' rx='1'/%3E%3Crect x='304' y='175' width='7' height='5' rx='1'/%3E%3Crect x='326' y='175' width='7' height='5' rx='1'/%3E%3Crect x='348' y='175' width='7' height='5' rx='1'/%3E%3Crect x='370' y='175' width='7' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E") center bottom / contain no-repeat; }
.splash[data-backdrop="sydney"]::after { content: ""; position: fixed; z-index: -1; pointer-events: none; left: var(--bl); bottom: 46px; width: calc(var(--bs) * 20px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%238a5a33' d='M2 37Q8 35 12 27Q11 20 17 14Q21 10 24 8L24 3L26 6L27 2L29 6Q33 7 34 9L33 11L29 11Q27 13 26 15L30 18L29 20L25 18Q25 24 21 28L23 35L29 36L29 38L19 38L17 31Q15 31 13 30Q9 37 3 39Z'/%3E%3C/svg%3E") center bottom / contain no-repeat; transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)); animation: roo-hop 30s linear infinite; }
@keyframes roo-hop { 0.00% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)); } 70.00% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)); } 70.75% { transform: translate(calc(var(--bs) * 195.4px), calc(var(--bs) * -129.1px)); } 71.50% { transform: translate(calc(var(--bs) * 200.8px), calc(var(--bs) * -123.9px)); } 72.25% { transform: translate(calc(var(--bs) * 206.2px), calc(var(--bs) * -128.4px)); } 73.00% { transform: translate(calc(var(--bs) * 211.6px), calc(var(--bs) * -122.9px)); } 73.75% { transform: translate(calc(var(--bs) * 217.0px), calc(var(--bs) * -127.1px)); } 74.50% { transform: translate(calc(var(--bs) * 222.4px), calc(var(--bs) * -121.2px)); } 75.25% { transform: translate(calc(var(--bs) * 227.8px), calc(var(--bs) * -125.1px)); } 76.00% { transform: translate(calc(var(--bs) * 233.2px), calc(var(--bs) * -118.8px)); } 76.75% { transform: translate(calc(var(--bs) * 238.6px), calc(var(--bs) * -122.4px)); } 77.50% { transform: translate(calc(var(--bs) * 244.0px), calc(var(--bs) * -115.8px)); } 79.90% { transform: translate(calc(var(--bs) * 244.0px), calc(var(--bs) * -115.8px)); } 80.00% { transform: translate(calc(var(--bs) * 244.0px), calc(var(--bs) * -115.8px)) scaleX(-1); } 82.50% { transform: translate(calc(var(--bs) * 244.0px), calc(var(--bs) * -115.8px)) scaleX(-1); } 83.25% { transform: translate(calc(var(--bs) * 238.6px), calc(var(--bs) * -122.4px)) scaleX(-1); } 84.00% { transform: translate(calc(var(--bs) * 233.2px), calc(var(--bs) * -118.8px)) scaleX(-1); } 84.75% { transform: translate(calc(var(--bs) * 227.8px), calc(var(--bs) * -125.1px)) scaleX(-1); } 85.50% { transform: translate(calc(var(--bs) * 222.4px), calc(var(--bs) * -121.2px)) scaleX(-1); } 86.25% { transform: translate(calc(var(--bs) * 217.0px), calc(var(--bs) * -127.1px)) scaleX(-1); } 87.00% { transform: translate(calc(var(--bs) * 211.6px), calc(var(--bs) * -122.9px)) scaleX(-1); } 87.75% { transform: translate(calc(var(--bs) * 206.2px), calc(var(--bs) * -128.4px)) scaleX(-1); } 88.50% { transform: translate(calc(var(--bs) * 200.8px), calc(var(--bs) * -123.9px)) scaleX(-1); } 89.25% { transform: translate(calc(var(--bs) * 195.4px), calc(var(--bs) * -129.1px)) scaleX(-1); } 90.00% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)) scaleX(-1); } 92.40% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)) scaleX(-1); } 92.50% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)); } 100.00% { transform: translate(calc(var(--bs) * 190.0px), calc(var(--bs) * -124.2px)); } }
@media (prefers-reduced-motion: reduce) { .splash[data-backdrop="sydney"]::after { animation: none; } }
@media (min-width: 640px) { .splash[data-backdrop="sydney"] { --bs: 1.3; --bl: 24px; --ox: calc(100% - 230px); --kw: 170px; --kr: 60px; --kb: 270px; --cl: 60px; --cb: 470px; }
  .splash[data-backdrop="sydney"]::before { right: 30px; width: 400px; } }
@media (min-width: 1200px) { .splash[data-backdrop="sydney"] { --bl: calc(50vw - 680px); --ox: calc(50% + 420px); --kr: calc(50vw - 600px); --cl: calc(50vw - 560px); }
  .splash[data-backdrop="sydney"]::before { right: calc(50% - 620px); } }
/* Daytime in Sydney: the same layers in the same places (the star and glow layers are empty). */
.splash[data-backdrop="sydney"][data-light="day"] { background-color: #3f8fdb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 130'%3E%3Cpath d='M50 72Q200 -58 350 72M62 104Q200 -34 338 104' stroke='%2346505f' stroke-width='3' fill='none'/%3E%3Cpath d='M50.0 72.0L62.0 104.0M50.0 72.0L81.7 85.7M71.4 54.8L81.7 85.7M71.4 54.8L101.4 70.2M92.9 40.2L101.4 70.2M92.9 40.2L121.1 57.5M114.3 28.2L121.1 57.5M114.3 28.2L140.9 47.7M135.7 18.9L140.9 47.7M135.7 18.9L160.6 40.6M157.1 12.3L160.6 40.6M157.1 12.3L180.3 36.4M178.6 8.3L180.3 36.4M178.6 8.3L200.0 35.0M200.0 7.0L200.0 35.0M200.0 35.0L221.4 8.3M221.4 8.3L219.7 36.4M219.7 36.4L242.9 12.3M242.9 12.3L239.4 40.6M239.4 40.6L264.3 18.9M264.3 18.9L259.1 47.7M259.1 47.7L285.7 28.2M285.7 28.2L278.9 57.5M278.9 57.5L307.1 40.2M307.1 40.2L298.6 70.2M298.6 70.2L328.6 54.8M328.6 54.8L318.3 85.7M318.3 85.7L350.0 72.0M350.0 72.0L338.0 104.0' stroke='%2346505f' stroke-width='1.3' fill='none'/%3E%3Cpath d='M74 92.5V104M86 82.1V104M98 72.7V104M110 64.3V104M122 57.0V104M134 50.8V104M146 45.6V104M158 41.4V104M170 38.3V104M182 36.2V104M194 35.1V104M206 35.1V104M218 36.2V104M230 38.3V104M242 41.4V104M254 45.6V104M266 50.8V104M278 57.0V104M290 64.3V104M302 72.7V104M314 82.1V104M326 92.5V104' stroke='%2346505f' stroke-width='.9' fill='none'/%3E%3Cpath d='M0 104H400' stroke='%2346505f' stroke-width='4.5' fill='none'/%3E%3Cpath d='M10 106V130M24 106V130M376 106V130M390 106V130' stroke='%2346505f' stroke-width='3' fill='none'/%3E%3Cpath fill='%23cdbb9c' d='M36 130L38 60H42V54H50V60H54L56 130ZM344 130L346 60H350V54H358V60H362L364 130Z'/%3E%3C/svg%3E"), none, none, linear-gradient(to top, #1c69b0 0 46px, #2f6b4f 46px 51px, transparent 51px), radial-gradient(70px 26px at var(--ox) calc(100% - 14px), rgba(255,255,255,.3), rgba(255,255,255,0)), none, none, none, none, radial-gradient(120% 50% at 50% 104%, rgba(255,255,255,.4), rgba(255,255,255,0) 70%), linear-gradient(#2f7fd4, #58a6e6 60%, #9fd0f2); }
.splash[data-backdrop="sydney"][data-light="day"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M246 170Q244 100 316 78Q288 125 286 170Z' fill='%23ffffff' stroke='%23b8c4d4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M316 78Q262 120 258 170M316 78Q276 122 272 170' stroke='%23d5dde8' stroke-width='.9' fill='none'/%3E%3Cpath d='M262 170Q264 70 150 30Q186 100 190 170Z' fill='%23ffffff' stroke='%23b8c4d4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M150 30Q232 84 240 170M150 30Q208 92 215 170' stroke='%23d5dde8' stroke-width='.9' fill='none'/%3E%3Cpath d='M200 170Q200 95 95 70Q131 120 135 170Z' fill='%23ffffff' stroke='%23b8c4d4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M95 70Q172 108 180 170M95 70Q152 114 158 170' stroke='%23d5dde8' stroke-width='.9' fill='none'/%3E%3Cpath d='M145 170Q145 120 50 105Q83 140 85 170Z' fill='%23ffffff' stroke='%23b8c4d4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M50 105Q122 130 127 170M50 105Q103 136 106 170' stroke='%23d5dde8' stroke-width='.9' fill='none'/%3E%3Cpath d='M388 170Q388 135 334 120Q354 146 355 170Z' fill='%23ffffff' stroke='%23b8c4d4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M334 120Q372 140 374 170' stroke='%23d5dde8' stroke-width='.9' fill='none'/%3E%3Cpath fill='%23c3a084' d='M22 170H396V186H22Z'/%3E%3Cpath fill='%239c7e66' d='M8 186H400V200H8Z'/%3E%3C/svg%3E"); }
.splash[data-backdrop="sydney"]:not([data-light="day"])::after { display: none; } /* by night the only kangaroo is the one in the stars */
.splash[data-backdrop="sydney"][data-light="day"] .splash-kicker, .splash[data-backdrop="sydney"][data-light="day"] .splash-sub, .splash[data-backdrop="sydney"][data-light="day"] .splash-count, .splash[data-backdrop="sydney"][data-light="day"] .splash-wait, .splash[data-backdrop="sydney"][data-light="day"] .splash-links { text-shadow: 0 1px 8px rgba(8,36,90,.55); }
.splash[data-backdrop="sydney"][data-light="day"] .sc, .splash[data-backdrop="sydney"][data-light="day"] .splash-tile { background: rgba(8,36,90,.3); } .splash[data-backdrop="sydney"][data-light="day"] .splash-what { background: rgba(8,36,90,.4); }

/* A small, quiet "beta" beside the page's name, on every page. */
.brand h1::after { content: 'beta'; display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); -webkit-text-fill-color: var(--muted); }

/* A runner's page: one link to the race page when others are in the same race; the dot's initial when there is no photo;
   a dot with no fresh position keeps its colour and gains a dashed ring (it used to go hollow, which read as broken). */
.who { margin: 0 0 10px; }
.who-chip { font-size: 14px; line-height: 1.2; padding: 8px 14px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; background: var(--bg-2); }
.runner-icon:not(.has-photo) .runner-dot[data-i]::before { content: attr(data-i); position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.runner-icon:not(.has-photo) .runner-dot.estimating { background: var(--accent); border-color: #fff; outline: 2px dashed var(--accent); outline-offset: 2px; }

/* A runner's own cutout as the dot: a whole person on a clear background, so the round window sits on the head and shoulders. */
.runner-icon.has-photo.cutout .runner-dot, .runner-icon.has-photo.cutout .runner-dot.estimating { background-color: #fff3ea; background-position: center top; background-size: 135% auto; }