:root {
  font-family:Arial,sans-serif;
  color:#14343c;
  background:#0b2730;
  font-synthesis:none
}
[hidden] { display:none!important }
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #f5ae55;
  outline-offset:3px
}
.app-shell {
  max-width:1700px;
  margin:auto;
  padding:24px clamp(16px,3vw,48px) 30px
}
.masthead {
  display:flex;
  align-items:center;
  gap:17px;
  color:#f5f3e8;
  padding:8px 0 25px
}
.brand-mark {
  position:relative;
  flex:none;
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  border:2px solid #eb9d5a;
  border-radius:15px;
  transform:rotate(-8deg);
  font:700 19px 'Trebuchet MS',Arial,sans-serif;
  color:#eb9d5a
}
.brand-mark span {
  transform:rotate(8deg)
}
.brand-mark i {
  position:absolute;
  width:11px;
  height:11px;
  background:#84b99b;
  border-radius:50%;
  right:-6px;
  top:-6px
}
.brand-copy {
  flex:1
}
.eyebrow {
  font:700 10px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.17em
}
.brand-copy .eyebrow {
  color:#86b9a8
}
.brand-copy h1 {
  font:700 clamp(27px,3vw,42px)/1 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:-.055em;
  margin:5px 0 4px
}
.title-dot {
  color:#e9965a
}
.brand-copy p {
  color:#a9c2bd;
  font-size:12px;
  margin:0
}
.prototype-tag {
  align-self:flex-start;
  border:1px solid #44616a;
  border-radius:30px;
  padding:9px 13px;
  font:700 10px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.12em;
  color:#bcd3c9;
  white-space:nowrap
}
.prototype-tag span {
  color:#eb9d5a;
  font-size:16px;
  margin-left:7px
}
main {
  background:#f2f4ee;
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 50px #061d24
}
.control-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border:1px solid #dce5df;
  border-radius:12px;
  padding:15px 18px;
  margin-bottom:17px
}
.control-heading {
  display:flex;
  flex-direction:column;
  gap:4px
}
.control-heading .eyebrow {
  color:#748b82
}
.control-heading strong {
  font:700 19px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:-.035em
}
.controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.select-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d5dfd8;
  border-radius:8px;
  padding:0 10px 0 13px;
  background:#f8faf6;
  color:#7c9187;
  white-space:nowrap;
  font-size:12px
}
.select-wrap select {
  border:0;
  background:transparent;
  color:#163840;
  min-width:183px;
  height:41px;
  font-weight:700;
  appearance:none;
  cursor:pointer
}
.select-chevron {
  font-size:19px;
  color:#173e46;
  margin-top:-5px
}
.action-button,.icon-button,.secondary-button {
  height:43px;
  border:0;
  border-radius:8px;
  background:#e99555;
  color:#17333a;
  font-weight:700;
  white-space:nowrap
}
.action-button {
  padding:0 18px
}
.action-button span {
  font-size:19px;
  margin-right:6px;
  vertical-align:-1px
}
.action-button:hover {
  background:#f1aa6b
}
.secondary-button {
  height:43px;
  padding:0 12px;
  border:1px solid #d5dfd8;
  border-radius:8px;
  background:#eef4ef;
  color:#173d42;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer
}
.secondary-button:hover:not(:disabled) { background:#dcece0 }
.secondary-button[aria-pressed="true"] { background:#193f45; color:#fff }
.secondary-button:disabled { opacity:.55; cursor:default }
.icon-button {
  width:43px;
  background:#e7efea;
  font-size:22px
}
.icon-button:hover {
  background:#d8e7dc
}
.content-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:17px;
  align-items:start
}
.course-card,.leaderboard-card,.details-card,.list-card {
  background:#fff;
  border:1px solid #dce5df;
  border-radius:13px;
  overflow:hidden
}
.list-card { min-width:0; padding-bottom:14px }
.list-month { color:#54736a; font-size:12px; font-weight:700; white-space:nowrap }
.list-intro { margin:0 19px 13px; color:#698277; font-size:12px; line-height:1.5 }
.table-scroll { overflow-x:auto; padding:0 14px }
.list-card table { width:100%; border-collapse:collapse; min-width:650px; font-size:12px; text-align:left }
.list-card th,.list-card td { padding:10px 8px; border-bottom:1px solid #e4ece5; white-space:nowrap }
.list-card thead th { color:#728b7d; font-size:10px; text-transform:uppercase; letter-spacing:.08em }
.list-card tbody th { color:#173f44; font:700 13px 'Trebuchet MS',Arial,sans-serif }
.list-card tbody tr:nth-child(odd) { background:#f6f9f5 }
.list-card td:nth-child(n+4) { font-variant-numeric:tabular-nums }
.table-team-button { border:0; background:transparent; padding:3px; color:#183e44; font-weight:700; text-align:left; text-decoration:underline; text-decoration-color:#a9cabb; cursor:pointer }
.table-team-button:hover { color:#ad5929 }
.card-header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  padding:17px 19px 15px
}
.card-header .eyebrow,.sidebar-header .eyebrow {
  color:#819d8b
}
.card-header h2,.sidebar-header h2 {
  font:700 21px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:-.04em;
  margin:3px 0 0
}
.course-key {
  font-size:11px;
  color:#647d75;
  white-space:nowrap
}
.key-dot {
  display:inline-block;
  width:9px;
  height:9px;
  border:2px solid #335b5a;
  border-radius:50%;
  margin-right:4px
}
.key-rule {
  display:inline-block;
  width:18px;
  border-top:2px dashed #c5cabb;
  margin:0 4px 3px 10px
}
.course-stage {
  padding:0 10px
}
.course-stage svg {
  display:block;
  width:100%;
  height:auto;
  border-radius:8px
}
.terrain path {
  fill:none;
  stroke:#d9e3d8;
  stroke-width:2
}
.terrain circle {
  fill:#d7e4d4;
  opacity:.58
}
.course-caption text {
  fill:#92a99d;
  font:700 11px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.15em
}
.course-caption text:last-child {
  fill:#8aa195;
  font-size:12px
}
.race-marker {
  cursor:pointer;
  filter:url(#marker-shadow)
}
.race-marker .halo {
  fill:#fff;
  stroke:#fff;
  stroke-width:3
}
.race-marker .core {
  stroke:#1b3b42;
  stroke-width:2
}
.race-marker .symbol {
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:central;
  font:700 20px 'Trebuchet MS',Arial,sans-serif;
  pointer-events:none
}
.race-marker.selected .halo {
  stroke:#173c42;
  stroke-width:5
}
.race-marker:hover .halo,.race-marker:focus-visible .halo {
  stroke:#ed9d5b;
  stroke-width:6
}
.race-marker .number {
  fill:#24454a;
  stroke:#fff;
  stroke-width:2
}
.race-marker .number-text {
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:central;
  font:700 9px 'Trebuchet MS',Arial,sans-serif
}
.track-sign line {
  stroke:#2a5356;
  stroke-width:3
}
.track-sign rect {
  fill:#183d45;
  rx:6
}
.track-sign text {
  fill:#fff;
  font:700 11px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.1em;
  text-anchor:middle
}
.track-sign .baseline-pin {
  fill:#f4ad6d;
  stroke:#1b3c44;
  stroke-width:3
}
.course-footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:15px 20px;
  color:#6e857c;
  font-size:11px
}
.course-footer>span:first-child {
  color:#244449;
  font-weight:700
}
.pulse-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#7fb28c;
  margin-right:8px;
  box-shadow:0 0 0 4px #e4f1e6
}
.sidebar {
  display:grid;
  gap:16px
}
.sidebar-header {
  padding:19px 19px 13px
}
.sidebar-header p {
  font-size:11px;
  color:#82968c;
  margin:6px 0 0
}
.leaderboard {
  list-style:none;
  margin:0;
  padding:0 9px 9px;
  max-height:663px;
  overflow:auto
}
.leaderboard li {
  margin:0
}
.leader-row {
  width:100%;
  display:grid;
  grid-template-columns:24px 32px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#203c43;
  text-align:left
}
.leader-row:hover {
  background:#f1f6f0
}
.leader-row.selected {
  background:#eaf3ec;
  border-color:#bdd4c2
}
.rank {
  color:#7d9589;
  font:700 12px 'Trebuchet MS',Arial,sans-serif
}
.team-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  color:#fff;
  font:700 18px 'Trebuchet MS',Arial,sans-serif;
  box-shadow:inset 0 -2px 0 #0002
}
.team-name {
  min-width:0;
  font:700 12px 'Trebuchet MS',Arial,sans-serif;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.team-score {
  text-align:right;
  font:700 13px 'Trebuchet MS',Arial,sans-serif;
  color:#2b5d54;
  white-space:nowrap
}
.team-score.negative {
  color:#b85e56
}
.team-score small {
  display:block;
  color:#9aaca2;
  font:600 9px Arial,sans-serif
}
.details-card {
  padding:17px 19px
}
.details-top {
  display:flex;
  align-items:center;
  gap:11px
}
.details-top .team-icon {
  width:43px;
  height:43px;
  font-size:24px;
  border-radius:10px
}
.details-top .eyebrow {
  color:#85988d
}
.details-top h2 {
  font:700 19px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:-.04em;
  margin:2px 0 0
}
.motto {
  margin:14px 0 16px;
  color:#628076;
  font-size:12px;
  font-style:italic
}
.detail-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #e6ede7;
  padding-top:13px;
  gap:8px
}
.detail-stats span {
  display:block;
  color:#84988d;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700
}
.detail-stats strong {
  display:block;
  color:#1a4145;
  font:700 20px 'Trebuchet MS',Arial,sans-serif;
  margin-top:3px
}
.detail-stats strong.negative {
  color:#b85e56
}
.detail-foot {
  font-size:11px;
  color:#879a90;
  margin:12px 0 0
}
.method-note {
  max-width:800px;
  margin:18px 5px 2px;
  color:#71877e;
  font-size:11px;
  line-height:1.5
}
.app-footer {
  display:flex;
  justify-content:space-between;
  color:#71948f;
  font:700 9px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.16em;
  padding:18px 2px 0
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(max-width:1050px) {
  .control-bar { align-items:stretch; flex-direction:column }
  .controls { justify-content:flex-start }
  .content-grid {
    grid-template-columns:minmax(0,1fr) 270px
  }
  .course-key {
    display:none
  }
  .leaderboard {
    max-height:640px
  }
}
@media(max-width:790px) {
  .content-grid {
    grid-template-columns:1fr
  }
  .sidebar {
    grid-template-columns:minmax(0,1fr) minmax(220px,.6fr);
    align-items:start
  }
  .leaderboard {
    max-height:none
  }
  .course-stage {
    padding:0 5px
  }
}
@media(max-width:580px) {
  .app-shell {
    padding:12px
  }
  .masthead {
    gap:11px;
    padding-bottom:17px
  }
  .brand-mark {
    width:43px;
    height:43px;
    font-size:15px;
    border-radius:12px
  }
  .brand-copy h1 {
    font-size:27px
  }
  .brand-copy p {
    font-size:10px
  }
  .prototype-tag {
    display:none
  }
  main {
    padding:10px;
    border-radius:14px
  }
  .control-bar {
    align-items:stretch;
    flex-direction:column;
    padding:13px
  }
  .control-heading strong {
    font-size:17px
  }
  .controls {
    display:grid;
    grid-template-columns:1fr 1fr auto
  }
  .select-wrap { grid-column:1 / -1 }
  .action-button { grid-column:1 / 3 }
  .secondary-button { min-width:0; padding:0 5px; font-size:11px }
  #pause-button { grid-column:3 }
  .select-wrap {
    min-width:0
  }
  .select-wrap select {
    min-width:0;
    width:100%;
    font-size:11px
  }
  .select-wrap>span:first-child {
    display:none
  }
  .action-button {
    padding:0 10px;
    font-size:11px
  }
  .action-button span {
    margin-right:2px
  }
  .icon-button {
    width:40px
  }
  .card-header {
    padding:13px 14px
  }
  .card-header h2 {
    font-size:19px
  }
  .course-stage {
    padding:0 4px
  }
  .course-footer {
    padding:12px 14px
  }
  .course-footer>span:last-child {
    display:none
  }
  .sidebar {
    grid-template-columns:1fr
  }
  .leaderboard {
    display:block
  }
  .leader-row {
    grid-template-columns:22px 28px minmax(0,1fr) auto;
    gap:7px;
    padding:8px 7px
  }
  .leader-row .team-score {
    grid-column:auto;
    text-align:right;
    font-size:12px
  }
  .leader-row .team-score small {
    display:block;
    margin-left:0
  }
  .team-name {
    font-size:12px
  }
  .team-icon {
    width:26px;
    height:26px;
    font-size:16px
  }
  .app-footer {
    font-size:8px
  }
  .list-card table { min-width:0 }
  .list-card tr > :nth-child(3),
  .list-card tr > :nth-child(4),
  .list-card tr > :nth-child(5),
  .list-card tr > :nth-child(7) { display:none }
  .list-card th,.list-card td { padding:10px 6px }
  .list-card tr > :nth-child(6) { text-align:right }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:360px) {
  .controls { grid-template-columns:1fr 1fr auto }
  .select-wrap select { font-size:12px }
  .action-button { width:100% }
}

/* Smart Cow visual direction and river graphics approved 9 October 2026. */
:root {
  --navy:#163551;
  --blue:#21417D;
  --purple:#9F5492;
  --orange:#FAA024;
  --ink:#163551;
  --muted:#50647A;
  --line:#D6E0EB;
  --wash:#F3F6FA;
  font-family:Manrope,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--navy)
}
button:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline-color:var(--orange) }
.masthead { color:#FEFEFE; padding-left:3px }
.brand-copy .eyebrow { color:#DBC3D6 }
.brand-copy h1 { font-family:Manrope,Inter,Arial,sans-serif; letter-spacing:-.045em }
.brand-copy p { color:#D5E2EF; font-size:13px }
.eyebrow { font-family:Manrope,Inter,Arial,sans-serif }
.title-dot { color:var(--orange) }
.prototype-tag { border-color:#7893AC; color:#EDF3F9 }
.prototype-tag span { color:var(--orange) }
main { background:#F3F6FA; box-shadow:0 20px 50px #0B263E }
.control-bar,.course-card,.leaderboard-card,.details-card,.list-card { border-color:var(--line) }
.control-heading .eyebrow,.card-header .eyebrow,.sidebar-header .eyebrow { color:var(--purple) }
.control-heading strong,.card-header h2,.sidebar-header h2,.details-top h2 { color:var(--navy); font-family:Manrope,Inter,Arial,sans-serif }
.select-wrap { background:#FEFEFE; border-color:#BECEDC; color:var(--muted) }
.select-wrap select,.select-chevron { color:var(--navy) }
.action-button { background:var(--orange); color:var(--navy) }
.action-button:hover { background:#FBB44F }
.secondary-button { background:#FEFEFE; border-color:var(--navy); color:var(--navy) }
.secondary-button:hover:not(:disabled) { background:#ECF2F9 }
.secondary-button[aria-pressed="true"] { background:var(--navy); color:#FEFEFE }
.secondary-button[aria-pressed="true"]:hover:not(:disabled) { background:var(--blue) }
.icon-button { background:#E8EEF6; color:var(--navy) }
.icon-button:hover { background:#D7E3F1 }
.list-month,.course-key,.list-intro,.sidebar-header p,.motto,.detail-foot,.method-note { color:var(--muted) }
.list-card th,.list-card td { border-color:#E3EAF1 }
.list-card thead th,.detail-stats span { color:#53677F }
.list-card tbody th,.table-team-button,.detail-stats strong { color:var(--navy) }
.list-card tbody tr:nth-child(odd) { background:#F4F7FA }
.table-team-button { text-decoration-color:var(--purple) }
.table-team-button:hover { color:var(--purple) }
.key-dot { border-color:var(--blue) }
.key-rule { border-color:var(--purple) }
.terrain path { stroke:#D9E4F1 }
.terrain circle { fill:#D9E4F1; opacity:.65 }
.course-caption text { fill:#66809D; font-family:Manrope,Inter,Arial,sans-serif }
.course-caption text:last-child { fill:var(--purple) }
.race-marker .core { stroke:var(--navy) }
.race-marker.selected .halo { stroke:var(--navy) }
.race-marker:hover .halo,.race-marker:focus-visible .halo { stroke:var(--orange) }
.race-marker .number { fill:var(--navy) }
.track-sign line { stroke:var(--navy) }
.track-sign rect { fill:var(--navy) }
.track-sign .baseline-pin { fill:var(--orange); stroke:var(--navy) }
.course-footer { color:var(--muted) }
.course-footer>span:first-child { color:var(--navy) }
.pulse-dot { background:var(--purple); box-shadow:0 0 0 4px #F0E6EF }
.leader-row { color:var(--navy) }
.leader-row:hover { background:#F2F5FA }
.leader-row.selected { background:#E8EDF7; border-color:#B6C5DE }
.rank,.details-top .eyebrow { color:#53677F }
.team-name,.team-score { color:var(--navy) }
.team-score small { color:#60748B }
.detail-stats { border-color:#E3EAF1 }
.app-footer { align-items:center; gap:20px; color:#D5E2EF; font-family:Manrope,Inter,Arial,sans-serif; letter-spacing:.08em }
.footer-divider { color:var(--orange); margin:0 6px }
.developer-credit { display:flex; align-items:center; gap:12px; padding:8px 12px 8px 16px; border-radius:7px; background:#FEFEFE; color:var(--navy); letter-spacing:0; text-transform:none; font-size:11px; font-weight:600 }
.developer-credit img { display:block; width:180px; height:auto }
.range-warning { margin:0 12px 12px; padding:12px; border-left:4px solid var(--orange); background:#FFF3DF; color:var(--navy); font-size:12px; line-height:1.6 }
.river-end-label rect { fill:#163551; stroke:#E5F2E6; stroke-width:1.5 }
.river-end-label text { fill:#FEFEFE; font:700 12px Manrope,Arial,sans-serif; text-anchor:middle }
.overflow-arrow { fill:#163551; stroke:#FEFEFE; paint-order:stroke; stroke-width:3px; font:700 23px Arial,sans-serif }
.brand-copy .eyebrow { text-transform:uppercase }
.course-stage { padding:0 10px }
.course-stage svg { background:#B6CA97; border:1px solid #AFC4B2 }
.sea-label { fill:#E6F5EE; font:700 12px Manrope,Inter,Arial,sans-serif; letter-spacing:2px }
.race-marker .halo { fill:#E9FCF2; fill-opacity:.23; stroke:#F4FBF4; stroke-opacity:.8; stroke-width:1.5 }
.race-marker.selected .halo { stroke:var(--orange); stroke-width:3; fill-opacity:.6 }
.race-marker:hover .halo,.race-marker:focus-visible .halo { stroke:var(--orange); stroke-width:4 }
.race-marker .boat-symbol { font-size:13px; paint-order:stroke; stroke:#163551; stroke-width:1px }
.river-current { animation:river-flow 14s linear infinite }
.villager-one { animation:villager-walk 24s ease-in-out infinite }
.villager-two { animation:villager-walk 31s ease-in-out -9s infinite reverse }
.capybara-wander { animation:capybara-walk 32s ease-in-out infinite }
.resident-legs,.capy-legs { transform-box:fill-box; transform-origin:center top; animation:walking-steps .7s ease-in-out infinite alternate }
.seabirds { animation:bird-drift 22s ease-in-out infinite }
.scenery-still .ambient-motion { animation-play-state:paused!important }
@keyframes river-flow { to { stroke-dashoffset:-298 } }
@keyframes villager-walk {
  0%,12%,100% { transform:translate(0,0) }
  46%,62% { transform:translate(35px,-10px) }
}
@keyframes capybara-walk {
  0%,12%,100% { transform:translate(0,0) scaleX(1) }
  44% { transform:translate(37px,13px) scaleX(1) }
  46%,60% { transform:translate(37px,13px) scaleX(-1) }
  92% { transform:translate(0,0) scaleX(-1) }
  94% { transform:translate(0,0) scaleX(1) }
}
@keyframes walking-steps { from { transform:skewX(-9deg) } to { transform:skewX(9deg) } }
@keyframes bird-drift {
  0%,100% { transform:translate(0,0) }
  50% { transform:translate(24px,-12px) }
}
@media(prefers-reduced-motion:reduce) {
  .ambient-motion { animation:none!important }
}
@media(max-width:580px) {
  .masthead { padding-left:0 }
  .brand-copy p { font-size:11px }
  .app-footer { align-items:flex-start; flex-direction:column; font-size:9px }
  .developer-credit { gap:10px }
}