@font-face {
  font-family: Race;
  src: url('/assets/RobotoCondensed-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Race;
  src: url('/assets/RobotoCondensed-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f3f2ef;
  --muted: #c2c1be;
  --orange: #e4862c;
  --line: rgba(255, 255, 255, .16);
  --panel: rgba(31, 32, 33, .92);
  font-family: Race, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: #272a2c;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, a { color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
button:disabled, select:disabled { cursor: default; opacity: .55; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #f3ad62; outline-offset: 4px; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #11131526, #11131510 50%, #10121435), url('/assets/race-water-referee.png') center / cover no-repeat;
}
.quiet-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #222426b8;
  padding: 8px 13px;
}
.quiet-button:hover { background: #414243; }

/* The hub shares the broadcast palette; its existing selection flow is retained. */
.hub { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.hub-nav {
  height: 91px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.wordmark svg { width: 51px; height: 40px; stroke: none; }
.nav-note { font-size: 13px; letter-spacing: 2px; color: #e0dfdc; }
.hub-heading { padding: 54px 0 33px; }
.eyebrow { font-size: 13px; letter-spacing: 4px; color: #f2bb84; margin: 0 0 18px; }
.hub-heading h1 { font-size: clamp(32px, 4vw, 52px); letter-spacing: 2px; margin: 0 0 16px; }
.hub-heading > p:last-child { color: #e2e1df; font-size: 16px; margin: 0; }
.selection-panel { padding: 27px 30px 19px; background: var(--panel); border-top: 3px solid var(--orange); }
.section-title { display: flex; align-items: center; gap: 12px; }
.section-title h2 { font-size: 19px; margin: 0; }
.section-title > span:last-child:not(.step) { margin-left: auto; font-size: 13px; color: var(--muted); }
.step { font-size: 15px; color: #f0b781; }
.selectors { display: grid; grid-template-columns: 2.2fr 1.2fr 1fr .9fr; gap: 16px; margin-top: 23px; }
.selectors label { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--muted); }
select { width: 100%; min-width: 0; padding: 0 36px 0 14px; height: 48px; border: 1px solid #676764; border-radius: 2px; background: #3b3b3a; color: var(--ink); font-size: 16px; }
select:hover { border-color: #dc9d5f; }
option { background: #30302f; }
.catalog-status { font-size: 12px; min-height: 18px; color: #cac9c6; margin: 13px 0 0; }
.catalog-status.needs-attention { color: #e8c574; }
.features { margin-top: 31px; }
.feature-card { display: flex; align-items: center; gap: 28px; margin-top: 18px; padding: 23px; border-left: 3px solid #a75820; background: var(--panel); transition: background .2s; }
.feature-card[href]:hover { background: #363634f5; }
.feature-card[aria-disabled=true] { opacity: .6; }
.feature-visual { position: relative; width: 170px; height: 140px; background: #3b3a37; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; }
.feature-visual svg { width: 50px; height: 50px; z-index: 1; color: #f6b87c; }
.feature-visual > span { font-size: 12px; letter-spacing: 3px; z-index: 1; }
.feature-visual i { position: absolute; transform: skew(-25deg); background: #91603c; width: 20px; height: 180px; right: 6px; top: -20px; opacity: .45; }
.feature-visual i:nth-last-child(2) { right: 31px; opacity: .3; }
.feature-visual i:last-child { right: 56px; opacity: .15; }
.feature-tag { font-size: 12px; letter-spacing: 1px; color: #dfddd8; display: flex; align-items: center; gap: 6px; }
.feature-tag b { width: 6px; height: 6px; background: var(--orange); }
.feature-copy h3 { font-size: 25px; margin: 10px 0; }
.feature-copy p { font-size: 14px; color: #c9c7c2; margin: 0 0 15px; }
.selected-label { font-size: 12px; color: #c4b9ac; }
.feature-action { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 15px; white-space: nowrap; }
.feature-action svg { width: 22px; }
.hub-footer { display: flex; justify-content: space-between; padding: 30px 0; color: #e2e0dc; font-size: 12px; letter-spacing: 2px; }

/* Referee standings: fixed rhythm, restrained race signals, one continuous list. */
.live-page {
  --fs: clamp(17px, 1.48vw, 22px);
  width: calc(100% - 112px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 0 28px;
}
.live-nav { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 18px; font-size: 13px; color: #f4f3f0; }
.live-nav > a { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.back-arrow { transform: rotate(180deg); width: 20px; }
.live-nav .quiet-button { flex-shrink: 0; font-size: 12px; padding: 7px 11px; }
.live-nav .quiet-button svg { width: 16px; height: 16px; }
.connection-status { min-width: 0; flex: 1; display: flex; justify-content: center; }
#connection { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 25px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: default; }
#connection > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#connection.has-notice { color: #f0ca89; cursor: pointer; }
#connection.has-notice::after { content: 'i'; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; flex-shrink: 0; }
#connection i { flex-shrink: 0; width: 6px; height: 6px; background: #e6a55d; border-radius: 50%; }
#connection.online i { background: #8ec88a; }
.race-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: #00000082;
  padding-top: 6px;
}
.race-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-conic-gradient(#fff 0% 25%, #000 0% 50%) 0 0 / 12px 6px;
}
.race-title { min-width: 0; display: flex; align-items: center; padding: 20px 22px; }
.race-title > div { min-width: 0; }
.race-title h1 { margin: 0; font-size: clamp(22px, 2vw, 31px); font-weight: 700; line-height: 1.3; letter-spacing: .7px; overflow-wrap: anywhere; }
.race-title p { margin: 6px 0 0; color: #aaa; font-size: 9px; letter-spacing: 2px; }
.race-metrics { --metric-label-height: 26px; --metric-number-size: 34px; --metric-foot-height: 14px; display: grid; grid-template-columns: 88px 142px 142px 68px; align-items: center; gap: 12px; padding: 16px 20px 16px 8px; }
.lap-panel, .clock-panel, .countdown-panel { position: relative; display: grid; grid-template-rows: var(--metric-label-height) var(--metric-number-size) var(--metric-foot-height); align-content: center; align-items: end; justify-items: start; min-width: 0; gap: 5px; }
.lap-panel { justify-items: center; }
.lap-panel > .metric-label, .clock-panel > .metric-label, .countdown-panel > .metric-label { grid-row: 1; }
.lap-count, #race-clock, #race-countdown { grid-row: 2; }
.race-rule { grid-row: 3; align-self: start; line-height: var(--metric-foot-height); }
/* The flag border overlays the reserved metric rows; toggling it never resizes them. */
.lap-panel::before { content: ''; position: absolute; inset: -4px -3px -2px; border: 2px solid transparent; pointer-events: none; }
.lap-panel[data-flag=yellow] { --flag-color: #f2ef3b; }
.lap-panel[data-flag=red] { --flag-color: #ed3546; }
.lap-panel[data-flag=yellow]::before, .lap-panel[data-flag=red]::before { border-color: var(--flag-color); }
.metric-label { display: block; font-size: 10px; color: #bbb; letter-spacing: .4px; line-height: 1.3; white-space: nowrap; }
.metric-label small { display: block; font-size: 8px; color: #797b7d; letter-spacing: 1px; margin-top: 2px; }
.lap-count { display: flex; align-items: baseline; line-height: 1; white-space: nowrap; }
.lap-count strong { font-size: var(--metric-number-size); font-weight: 700; }
#lap-target { font-size: 20px; color: #9e9e9e; margin-left: 3px; }
#race-clock, #race-countdown { font-size: var(--metric-number-size); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
#race-countdown { color: #fff; }
.clock-panel { padding-left: 15px; border-left: 1px solid #333; }
.countdown-panel { padding-left: 15px; border-left: 1px solid #333; }
.race-rule { color: #aaa; font-size: 10px; white-space: nowrap; }
.countdown-panel[data-expired=true] #race-countdown { color: #f3ca66; }
.race-flag { position: absolute; left: -3px; right: -3px; bottom: -2px; height: calc(var(--metric-foot-height) + 2px); display: flex; align-items: center; justify-content: center; background: var(--flag-color); color: #111; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
.race-flag[data-flag=red] { color: #fff; }
.phase-badge { justify-self: end; padding: 7px 10px; background: #d9162b; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .7px; line-height: 1.4; text-align: center; max-width: 68px; }
.phase-badge.ready, .phase-badge.result { font-size: 11px; font-weight: 400; letter-spacing: 0; padding: 7px; background: #2c2d2e; color: #ddd; }
.race-context { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; min-height: 34px; padding: 6px 22px; background: #f5ff00; color: #333; }
.race-context strong { font-size: 16px; font-weight: 400; letter-spacing: .5px; line-height: 1.4; }
.race-context > span { margin-left: auto; font-size: 11px; text-align: right; }
.race-notice { position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 40px)); padding: 12px 15px; border: 1px solid #777064; border-radius: 2px; background: #252524; box-shadow: 0 8px 24px #0006; color: #f2e5d6; font-size: 12px; line-height: 1.6; text-align: left; }
.board-scroll { overflow: auto; overflow-anchor: none; background: rgb(31 32 33 / 28%); scrollbar-color: #aaa6a0 #363636; scrollbar-width: thin; }
.scoreboard { min-width: 800px; }
.grid-row { display: grid; grid-template-columns: 10% 6.5% 14% 16.5% 7% 18.5% 16% 11.5%; align-items: center; text-align: center; }
.table-head { height: 57px; background: rgba(28, 29, 30, .84); border-bottom: 1px solid #ffffff28; font-size: 15px; color: #d3d1cc; }
.table-head > div { min-width: 0; padding: 0 10px; line-height: 1.25; }
.table-head > div:nth-child(3), .table-head > div:nth-child(4) { text-align: left; padding-left: 17px; }
.table-head small { display: block; font-size: 10px; letter-spacing: 1px; font-weight: 400; margin-top: 3px; color: #a7a6a2; text-transform: uppercase; }
#rows { overflow-anchor: none; }
.athlete-row { position: relative; height: 56px; font-size: var(--fs); font-weight: 400; background: rgba(255, 255, 255, .025); border: 0; overflow-anchor: none; }
.athlete-row > div { min-width: 0; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.athlete-row .rank { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 1.02em; font-weight: 400; }
.rank-position { min-width: 1em; font-variant-numeric: tabular-nums; }
.rank-standing { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.finish-flag { width: .8em; height: .9em; flex-shrink: 0; visibility: hidden; }
.athlete-row[data-finished=true] .finish-flag { visibility: visible; }
.athlete-row .rank { padding-inline: 4px; }
.rank-change { display: inline-flex; align-items: center; gap: 5px; min-width: 27px; font-size: 11px; color: #fff; }
.rank-change[data-direction=up] { color: #40db8c; }
.rank-change[data-direction=down] { color: #ff5a65; }
.rank-arrow { font-size: 9px; }
.rank-delta { font-variant-numeric: tabular-nums; }
.athlete-row .number { position: relative; isolation: isolate; font-weight: 800; color: #000; font-size: 1.06em; line-height: 1.55; }
.athlete-row .number::before { content: ''; position: absolute; z-index: -1; width: 2.35em; max-width: calc(100% - 8px); height: 100%; left: 50%; top: 0; transform: translateX(-50%); background: #fff; }
.athlete-row .name { position: relative; padding-left: 17px; text-align: left; }
.athlete-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.overtake-mark { position: absolute; left: 5px; top: 12%; bottom: 12%; width: 3px; background: #40db8c; opacity: 0; transform-origin: center top; }
.athlete-row .team { text-align: left; padding-left: 17px; font-size: .9em; color: #d5d3d0; }
.athlete-row .lap { font-size: .95em; }
.athlete-row .best, .athlete-row .total, .athlete-row .gap { font-variant-numeric: tabular-nums; }
.athlete-row .best { font-size: .96em; }
.best small { margin-left: .35em; font-size: .76em; color: #bfbdba; }
.athlete-row .total { font-size: 1.07em; }
.athlete-row .gap { font-size: .92em; color: #d7d5d2; }
.board-empty { text-align: center; padding: 65px 20px; color: #cdcbc6; }
.board-empty svg { width: 36px; height: 36px; color: #b0ada6; }
.board-empty p { margin: 14px 0; }
.fastest-strip { display: flex; align-items: center; gap: 22px; min-height: 58px; padding: 10px 22px; background: #141516f5; border-top: 1px solid #6a6b6d; }
.fastest-label { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fastest-label svg { width: 25px; height: 25px; color: #aaa; }
.fastest-label > span { font-size: 16px; font-weight: 400; }
.fastest-label small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: 1.6px; color: #aba9a4; }
.fastest-athlete { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 18px; }
.fastest-athlete span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fastest-athlete span:last-child { color: #bdbbb6; font-size: .83em; }
#fastest-time { margin-left: auto; font-size: clamp(19px, 1.6vw, 26px); font-weight: 400; color: #fff; white-space: nowrap; }
.live-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 13px; color: #d5d5d5; font-size: 12px; letter-spacing: .3px; }
.live-footer > span:last-child { flex-shrink: 0; }
.error { color: #ffdca9; }
.live-page:fullscreen { width: 100%; max-width: none; padding: 20px max(4vw, calc((100vw - 1340px) / 2)); overflow: auto; background: #17191b url('/assets/race-water-referee.png') center / cover; }

@media (min-width: 1900px) { .live-page { max-width: 1340px; } .athlete-row { height: 60px; } }
@media (max-width: 1100px) {
  .live-page { width: calc(100% - 64px); --fs: 18px; padding-top: 18px; }
  .race-title { padding: 18px 16px; }
  .race-title h1 { font-size: 24px; }
  .race-title p { font-size: 8px; letter-spacing: 1px; }
  .race-metrics { --metric-label-height: 23px; --metric-number-size: 29px; --metric-foot-height: 13px; grid-template-columns: 66px 114px 116px 60px; gap: 7px; padding: 14px 16px 14px 4px; }
  #lap-target { font-size: 18px; }
  .clock-panel, .countdown-panel { padding-left: 12px; }
  .metric-label { font-size: 9px; }
  .metric-label small { font-size: 7px; }
  .phase-badge { font-size: 17px; padding: 6px 8px; }
  .race-context { padding-left: 16px; padding-right: 16px; }
  .race-context strong { font-size: 14px; }
  .table-head { height: 51px; font-size: 13px; }
  .table-head small { font-size: 9px; }
  .athlete-row { height: 52px; }
  .fastest-strip { padding-left: 18px; padding-right: 18px; gap: 20px; }
}
@media (max-width: 800px) {
  .hub { padding: 0 23px; }
  .hub-nav { height: 72px; }
  .nav-note { font-size: 10px; letter-spacing: 1px; }
  .hub-heading { padding: 38px 0 28px; }
  .hub-heading h1 { font-size: 33px; }
  .selectors { grid-template-columns: 1fr 1fr; }
  .selection-panel { padding: 22px; }
  .feature-card { gap: 20px; padding: 19px; }
  .feature-visual { width: 105px; height: 125px; }
  .feature-copy h3 { font-size: 22px; }
  .feature-copy p { font-size: 12px; }
  .feature-action { font-size: 0; gap: 0; }
  .feature-action svg { width: 24px; }
  .feature-visual > span { font-size: 10px; letter-spacing: 1px; }
  .live-page { width: calc(100% - 32px); --fs: 17px; padding-top: 13px; }
  .live-nav { font-size: 11px; margin-bottom: 13px; gap: 10px; }
  .live-nav .quiet-button { padding: 6px 8px; }
  .live-nav .quiet-button span { display: none; }
  .race-header { grid-template-columns: minmax(0, 1fr); }
  .race-title { padding: 16px 16px 10px; }
  .race-title h1 { font-size: 25px; }
  .race-metrics { grid-template-columns: .8fr 1.25fr 1.2fr auto; padding: 4px 16px 18px; gap: 14px; }
  .race-context { min-height: 32px; gap: 10px; }
  .race-context strong { font-size: 13px; letter-spacing: 0; }
  .race-context > span { font-size: 10px; }
  .race-notice { font-size: 11px; padding: 8px 16px; }
  .table-head { height: 48px; }
  .rank-change { font-size: 10px; gap: 4px; min-width: 24px; }
  .athlete-row .rank { gap: 6px; }
  .fastest-strip { gap: 14px; min-height: 55px; padding: 10px 14px; flex-wrap: wrap; }
  .fastest-label { gap: 6px; }
  .fastest-label svg { width: 22px; height: 22px; }
  .fastest-label > span { font-size: 14px; }
  .fastest-label small { font-size: 8px; }
  .fastest-athlete { font-size: 16px; gap: 8px; }
  .live-footer { font-size: 10px; }
}
@media (max-width: 520px) {
  .wordmark { font-size: 16px; gap: 7px; }
  .wordmark svg { width: 38px; }
  .nav-note { font-size: 8px; }
  .hub-heading h1 { font-size: 29px; }
  .hub-heading > p:last-child { font-size: 13px; }
  .selection-panel { padding: 18px; }
  .section-title > span:last-child:not(.step) { display: none; }
  .selectors { gap: 14px 12px; }
  .competition-select, .selectors label:last-child { grid-column: 1 / -1; }
  .selectors select { font-size: 14px; height: 44px; }
  .feature-card { padding: 17px; gap: 16px; }
  .feature-visual { width: 68px; height: 109px; }
  .feature-visual svg { width: 36px; height: 36px; }
  .feature-visual > span { font-size: 8px; letter-spacing: 0; }
  .feature-copy h3 { font-size: 19px; }
  .feature-copy p { font-size: 11px; max-width: 175px; line-height: 1.6; }
  .feature-action { display: none; }
  .selected-label { font-size: 10px; }
  .hub-footer { font-size: 10px; letter-spacing: 1px; }
  .live-page { width: calc(100% - 20px); }
  .live-nav > a { gap: 4px; }
  .race-title h1 { font-size: 20px; }
  .race-title p { font-size: 8px; letter-spacing: 1px; }
  .race-title, .race-context { padding-left: 12px; padding-right: 12px; }
  .race-metrics { --metric-label-height: 22px; --metric-number-size: clamp(19px, 6vw, 25px); padding-left: 12px; padding-right: 12px; gap: 7px; grid-template-columns: .85fr 1.25fr 1.25fr 45px; }
  #lap-target { font-size: 16px; }
  .clock-panel, .countdown-panel { padding-left: 8px; }
  .metric-label { font-size: 9px; letter-spacing: 0; }
  .metric-label small { font-size: 6px; letter-spacing: .5px; }
  .race-rule { font-size: 8px; }
  .phase-badge { font-size: 14px; padding: 5px 6px; }
  .phase-badge.ready, .phase-badge.result { font-size: 9px; }
  .race-context strong { font-size: 12px; }
  .fastest-strip { gap: 10px 14px; }
  .fastest-athlete { flex: 1; }
  .fastest-athlete span:last-child { display: none; }
  #fastest-time { width: 100%; text-align: right; font-size: 22px; }
}
@media (max-height: 550px) and (min-width: 600px) {
  .live-page { width: calc(100% - 32px); --fs: 15px; padding: 8px 0 12px; }
  .live-nav { min-height: 25px; margin-bottom: 8px; font-size: 11px; }
  .live-nav .quiet-button { padding: 4px 8px; }
  .race-header { grid-template-columns: minmax(0, 1fr) auto; }
  .race-title { padding: 10px 14px; }
  .race-title h1 { font-size: 19px; }
  .race-title p { font-size: 7px; letter-spacing: .8px; }
  .race-metrics { --metric-label-height: 21px; --metric-number-size: 26px; --metric-foot-height: 12px; grid-template-columns: 58px 100px 100px 50px; gap: 7px; padding: 9px 14px 15px 4px; }
  .lap-panel, .clock-panel, .countdown-panel { gap: 4px; }
    #lap-target { font-size: 16px; }
  .clock-panel, .countdown-panel { padding-left: 9px; }
  .metric-label { font-size: 8px; }
  .metric-label small { font-size: 6px; }
  .race-rule { font-size: 8px; }
  .race-flag { font-size: 9px; }
  .phase-badge { font-size: 14px; padding: 4px 7px; }
  .phase-badge.ready, .phase-badge.result { font-size: 9px; }
  .race-context { min-height: 26px; padding: 4px 14px; }
  .race-context strong { font-size: 12px; }
  .race-context > span { font-size: 10px; }
  .scoreboard { min-width: 720px; }
  .table-head { height: 39px; font-size: 12px; }
  .table-head small { font-size: 8px; margin-top: 2px; }
  .athlete-row { height: 39px; }
  .athlete-row > div { padding-right: 7px; padding-left: 7px; }
  .athlete-row .rank { gap: 6px; }
  .rank-change { font-size: 10px; gap: 4px; min-width: 23px; }
  .athlete-row .name, .athlete-row .team { padding-left: 17px; }
  .fastest-strip { min-height: 44px; padding: 6px 14px; gap: 16px; }
  .fastest-label > span { font-size: 13px; }
  .fastest-label small { font-size: 8px; }
  .fastest-label svg { width: 20px; height: 20px; }
  .fastest-athlete { font-size: 15px; }
  #fastest-time { font-size: 20px; }
  .live-footer { margin-top: 8px; font-size: 10px; }
}
.lap-panel[data-wide=true] .lap-count strong { font-size: 23px; }
.lap-panel[data-wide=true] #lap-target { font-size: 13px; }
.lap-panel[data-wide=very] .lap-count strong { font-size: 17px; }
.lap-panel[data-wide=very] #lap-target { font-size: 10px; }
@media (max-width: 1100px), (max-height: 550px) {
  .lap-panel[data-wide=true] .lap-count strong { font-size: 19px; }
  .lap-panel[data-wide=true] #lap-target { font-size: 11px; }
  .lap-panel[data-wide=very] .lap-count strong { font-size: 13px; }
  .lap-panel[data-wide=very] #lap-target { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}