/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities;
:root {
  --bg: #161917;
  --surface: #1d211e;
  --raised: #242925;
  --line: #343a34;
  --muted: #929b92;
  --text: #f2f1e9;
  --accent: #00e5c3;
  --accent-soft: #73f4e1;
  --radius: 12px;
  --font: 'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
  --display: var(--font);
  --sidebar: 238px;
  --space: 24px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,input {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
}
button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
button,a,input {
  outline-offset: 5px;
}
button:focus-visible,a:focus-visible {
  outline: 2px solid var(--accent);
}
a {
  color: inherit;
}
h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: 700;
}
h2 {
  font-size: 20px;
  letter-spacing: -.5px;
}
h3 {
  font-size: 17px;
}
p {
  line-height: 1.7;
}
em {
  font-style: normal;
  color: var(--accent);
}
input {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #141714;
  width: 100%;
  padding: 16px;
  outline: none;
}
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #00e5c318;
}
input[aria-invalid=true] {
  border-color: #f69182;
}
input::placeholder {
  color: #677168;
}
::selection {
  background: var(--accent);
  color: #111;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #0f1214;
  border-right: 1px solid #2b302b;
  padding: 32px 19px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 0 9px;
  margin-bottom: 61px;
}
.wordmark>img {
  width: 170px;
  max-height: 65px;
  object-fit: contain;
}
.brand-symbol {
  width: 38px;
  height: 45px;
  transform: skew(-12deg);
  font-size: 52px;
  font-weight: 900;
  line-height: 38px;
  color: var(--accent);
  font-style: italic;
  letter-spacing: -11px;
}
.wordmark>span:last-child {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -1.5px;
  line-height: 1;
}
.wordmark i {
  font-size: 19px;
  margin-left: 3px;
  color: var(--accent);
  font-style: normal;
}
.wordmark small {
  display: block;
  font-size: 7px;
  letter-spacing: 2.7px;
  font-weight: 500;
  color: #838c82;
  margin-top: 9px;
}
.sidebar-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #6f796e;
  margin: 0 16px 15px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar nav button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 15px;
  gap: 13px;
  border-radius: 7px;
  text-align: left;
  font-size: 12px;
  color: #a5ada2;
  transition: background .2s,color .2s;
}
.sidebar nav button>small,.sidebar nav button>svg:last-child:not(:first-child) {
  margin-left: auto;
  color: #4c606b;
  font-size: 9px;
}
.sidebar nav button:hover {
  background: #1d2428;
  color: white;
}
.sidebar nav button.active {
  background: #00e5c314;
  color: var(--accent);
  box-shadow: inset 2px 0 var(--accent);
}
.sidebar nav button.active>svg:last-child {
  color: var(--accent);
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 50px;
}
.sidebar-event {
  background: linear-gradient(135deg,#232c31,#161b1e);
  border: 1px solid #2b383f;
  padding: 18px 15px;
  border-radius: 9px;
}
.sidebar-event>span {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #7d95a3;
}
.sidebar-event strong {
  display: block;
  font-size: 19px;
  margin: 12px 0 17px;
  line-height: 1.3;
}
.sidebar-event strong svg {
  float: right;
  color: var(--accent);
  margin-top: -10px;
}
.sidebar-event small {
  font-size: 7px;
  letter-spacing: 1px;
  color: #93a7b3;
}
.sidebar-version {
  display: flex;
  align-items: center;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #6f796a;
  gap: 7px;
  margin-top: 24px;
  padding: 0 5px;
}
.sidebar-version>span:last-child {
  margin-left: auto;
}
.live-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #6aa1c0;
}
.main-wrap {
  margin-left: var(--sidebar);
}
.topbar {
  height: 83px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 43px;
  border-bottom: 1px solid #273136;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  color: #7d877b;
}
.breadcrumb strong {
  color: #c2cdd3;
  font-weight: 400;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.demo-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #534331;
  background: #3b2e1e45;
  color: #d7b288;
  padding: 7px 10px;
  font-size: 8px;
  letter-spacing: 1.3px;
  border-radius: 4px;
}
.demo-badge i {
  width: 4px;
  height: 4px;
  background: #daaf7f;
  border-radius: 50%;
}
.demo-badge.integrated {
  color: #81b3d0;
  border-color: #39596c;
}
.avatar {
  display: grid;
  place-items: center;
  border: 1px solid #3f505a;
  background: #28353d;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  font-size: 11px;
  color: #c4d6e0;
}
main {
  max-width: 1440px;
  margin: auto;
  padding: 28px 43px 40px;
  animation: appear .35s ease;
}
.progress-rail {
  display: flex;
  gap: 5px;
  width: 116px;
  margin-bottom: 24px;
}
.progress-rail span {
  height: 2px;
  flex: 1;
  background: #2f3c43;
}
.progress-rail span.filled {
  background: var(--accent);
}
.welcome-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
}
.eyebrow {
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 1.9px;
  color: #97abb6;
  display: flex;
  gap: 9px;
  align-items: center;
}
.eyebrow>span {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.edition {
  font-size: 7px;
  color: #5f7886;
  letter-spacing: 1.7px;
}
.hero {
  min-height: 495px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #202a30;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
  filter: brightness(.65) saturate(.6);
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#0f1518f5 0%,#0f1518d6 30%,#0f151830 67%,#0f151830),linear-gradient(0deg,#10181ddd,transparent 50%);
}
.hero-copy {
  position: relative;
  padding: 36px 38px;
  z-index: 1;
}
.event-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #98b1c050;
  background: #98b1c00c;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  color: #d3e0e7;
}
.event-pill>span {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(48px,5.5vw,78px);
  font-weight: 400;
  letter-spacing: .3px;
  line-height: 1.01;
  margin: 22px 0 17px;
}
.hero p {
  font-size: 11px;
  color: #a2b3bd;
  line-height: 1.8;
  margin-bottom: 24px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 21px;
  border-radius: 6px;
  background: var(--accent);
  color: #0d151a;
  font-size: 11px;
  font-weight: 750;
  transition: transform .2s,background .2s,box-shadow .2s;
  box-shadow: 0 3px 0 #008975,0 8px 20px #00e5c310;
  min-height: 44px;
}
.button:hover:not(:disabled) {
  background: #45f7d8;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 #008975,0 12px 24px #00e5c320;
}
.button.secondary {
  background: #20292e;
  border: 1px solid #354650;
  color: #cad9e1;
  box-shadow: none;
}
.button.secondary:hover {
  background: #2b3941;
}
.hero-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  color: #839aa7;
  margin-top: 25px;
}
.hero-location>span {
  border-left: 1px solid #4b616e;
  padding-left: 11px;
  margin-left: 5px;
  letter-spacing: 1px;
  color: #ccdae2;
}
.hero-side {
  position: absolute;
  right: 28px;
  top: 26px;
  bottom: 30px;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.hero-side>span {
  font-size: 8px;
  letter-spacing: 3px;
  color: #c3d0d8;
  writing-mode: vertical-rl;
  position: absolute;
  right: 0;
  top: 0;
}
.floating-distance {
  margin-top: auto;
  margin-bottom: 32px;
  align-self: stretch;
  border: 1px solid #c0d2dd43;
  border-radius: 7px;
  background: #161e2373;
  backdrop-filter: blur(15px);
  padding: 18px 22px;
  transform: rotate(-4deg);
  box-shadow: 0 20px 50px #0003;
}
.floating-distance>small {
  font-size: 7px;
  letter-spacing: 1.3px;
  color: #a8bdc9;
}
.floating-distance>strong {
  display: block;
  font-size: 94px;
  line-height: 1.25;
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
}
.floating-distance i {
  font-style: normal;
  font-size: 26px;
  margin-left: 13px;
  color: #c3d4de;
}
.floating-distance>span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 6px;
  letter-spacing: 1.1px;
  color: #b6ccd9;
}
.floating-distance>span i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0;
}
.hero-coordinates {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 700;
  text-align: right;
  color: #c8d8e2;
}
.hero-coordinates>span {
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #7b95a4;
}
.journey-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 29px 0 18px;
}
.journey-heading h2 {
  font-size: 21px;
}
.journey-heading h2>span {
  color: var(--accent);
}
.journey-heading p {
  color: #738c9b;
  font-size: 10px;
  margin-top: 5px;
}
.journey-heading>span {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #758e9d;
  display: flex;
  align-items: center;
  gap: 10px;
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.journey-card {
  background: var(--surface);
  border: 1px solid #2a373f;
  border-radius: 9px;
  padding: 20px;
  text-align: left;
  transition: .2s;
}
.journey-card:hover {
  border-color: #a7794f;
  transform: translateY(-3px);
}
.journey-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}
.journey-card-top svg {
  color: var(--accent);
}
.journey-card-top>span {
  font-size: 22px;
  color: #3f515b;
  font-family: var(--display);
}
.journey-card>small {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #869daa;
}
.journey-card h3 {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin: 8px 0;
}
.journey-card h3 svg {
  color: #6b8696;
}
.journey-card p {
  font-size: 10px;
  max-width: 210px;
  color: #77909e;
}
.next-run {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #29363e;
  border-bottom: 1px solid #29363e;
  margin-top: 23px;
  padding: 17px 0;
}
.next-run-icon {
  border: 1px solid #334651;
  background: #1d2a32;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #7da9c3;
}
.next-run strong {
  font-size: 11px;
  font-weight: 500;
}
.next-run p {
  font-size: 9px;
  color: #718b9b;
  margin-top: 4px;
}
.next-run>button {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 9px;
  color: #a8c3d2;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #253239;
  padding: 20px 43px;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #556c79;
}
footer i {
  margin: 0 8px;
  font-style: normal;
  color: var(--accent);
}
footer>span:last-child {
  display: flex;
  gap: 12px;
  align-items: center;
}
.mobile-nav {
  display: none;
}
.page-title {
  margin: 13px 0 34px;
}
.page-title h1 {
  font-size: clamp(28px,3vw,44px);
  line-height: 1.1;
  letter-spacing: -1.7px;
  margin: 18px 0 13px;
}
.page-title p {
  color: #7e96a4;
  font-size: 12px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 15px;
}
.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}
.section-heading>span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #718b9b;
}
.section-heading>svg {
  color: #6d8898;
}
.distance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
.distance-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #31414b;
  border-radius: 10px;
  min-height: 225px;
  padding: 23px;
  text-align: left;
  background: radial-gradient(ellipse at 90% 100%,#26465966,transparent 65%),#1c2428;
  transition: .25s;
}
.distance-card::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 500px;
  transform: rotate(30deg);
  border: 50px solid #aac6d607;
  right: -60px;
  top: -120px;
}
.distance-card.selected {
  border-color: var(--accent);
  background: radial-gradient(ellipse at 85% 95%,#c2652333,transparent 70%),#1c2428;
  box-shadow: 0 5px 0 #05080a55;
}
.distance-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #95aab7;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.selected .distance-top svg {
  color: var(--accent);
}
.distance-number {
  font-family: var(--display);
  font-size: 107px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 400;
}
.distance-number>small {
  font-size: 27px;
  color: #8ca5b4;
  margin-left: 15px;
  font-family: var(--font);
  font-weight: 750;
}
.selected .distance-number {
  color: var(--accent);
}
.distance-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.distance-bottom>span:first-child {
  font-size: 10px;
  color: #95a8b3;
}
.distance-bottom>span:last-child {
  font-size: 7px;
  letter-spacing: 1px;
  color: #56707f;
}
.goal-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-bottom: 30px;
}
.goal-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.goal-option>svg {
  color: #698798;
  margin-bottom: 22px;
}
.goal-option>strong {
  font-size: 13px;
  margin-bottom: 7px;
}
.goal-option>span {
  font-size: 10px;
  color: #7a93a1;
}
.goal-option.selected {
  border-color: var(--accent);
  background: #00e5c307;
}
.goal-option.selected>svg {
  color: var(--accent);
}
.goal-option>.selection-check {
  position: absolute;
  right: 15px;
  top: 17px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 27px;
  border-radius: var(--radius);
}
.time-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.time-panel h2 {
  font-size: 16px;
}
.time-panel p {
  font-size: 11px;
  color: #78919f;
  margin-top: 8px;
}
.time-input>span {
  display: block;
  font-size: 7px;
  letter-spacing: 1.4px;
  color: #7b94a2;
  margin-bottom: 8px;
}
.time-input input {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 3px;
  width: 230px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  gap: 25px;
}
.action-row>p {
  font-size: 10px;
  color: #77909e;
}
.text-link {
  color: #a6c0cf;
  font-size: 11px;
  text-align: left;
  padding: 7px 0;
  display: inline-block;
}
.text-link:hover {
  color: var(--accent);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 17px;
  margin-bottom: 24px;
}
.metric {
  padding: 23px 25px;
  border-radius: 9px;
  border: 1px solid #2f414b;
  background: linear-gradient(140deg,#1e2c34,#192126);
}
.metric:first-child {
  background: linear-gradient(140deg,#3d3021,#192227);
  border-color: #665033;
}
.metric-label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #88a2b1;
  margin-bottom: 18px;
}
.metric-label svg {
  color: var(--accent);
}
.metric strong {
  font-size: 39px;
  font-weight: 550;
  letter-spacing: -1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.metric small {
  font-size: 14px;
  font-weight: 400;
  color: #809bab;
  margin-left: 10px;
  letter-spacing: 0;
}
.pace-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}
.pace-chart {
  display: flex;
  gap: 20px;
  height: 255px;
  padding-top: 20px;
}
.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 40px;
  font-size: 9px;
  color: #648090;
}
.chart-bars {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  flex: 1;
  background: repeating-linear-gradient(0deg,transparent 0 66px,#2d424f33 67px 68px);
  padding-bottom: 5px;
}
.chart-column {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  max-width: 52px;
  gap: 10px;
}
.chart-column>strong {
  font-size: 9px;
  font-weight: 400;
  color: #b9d2e1;
}
.chart-column>div {
  width: 100%;
  min-height: 25px;
  background: linear-gradient(0deg,#00e5c33b,var(--accent));
  border-top: 2px solid #ffa574;
  border-radius: 3px 3px 0 0;
}
.chart-column>span {
  font-size: 7px;
  color: #7393a5;
  white-space: nowrap;
}
.strategy {
  display: flex;
  gap: 13px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 26px;
}
.strategy>svg {
  color: var(--accent);
  flex-shrink: 0;
}
.strategy h3 {
  font-size: 12px;
  margin-bottom: 8px;
}
.strategy p {
  font-size: 10px;
  color: #809baa;
}
.splits table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.splits th {
  font-size: 7px;
  letter-spacing: 1px;
  color: #6d8b9c;
  font-weight: 400;
  padding: 4px 0 16px;
}
.splits td {
  padding: 13px 0;
  border-top: 1px solid #293b45;
  font-size: 11px;
  color: #bad1de;
  font-variant-numeric: tabular-nums;
}
.splits td:first-child>span {
  font-size: 9px;
  background: #22343e;
  padding: 6px 8px;
  border-radius: 3px;
  color: #80a7be;
}
.splits td:last-child,.splits th:last-child {
  text-align: right;
}
.studio {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: start;
}
.template-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.template-option {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 12px;
  border: 1px solid #2b3c46;
  background: #1b2429;
  border-radius: 8px;
}
.template-option.selected {
  border-color: var(--accent);
  background: #332c1f;
}
.template-option>span:nth-child(2) {
  flex: 1;
}
.template-option strong {
  display: block;
  font-size: 12px;
  margin-bottom: 7px;
  font-weight: 600;
}
.template-option small {
  display: block;
  font-size: 9px;
  color: #85a0b0;
}
.template-option>svg {
  color: var(--accent);
  margin-right: 7px;
}
.template-swatch {
  height: 58px;
  width: 40px;
  display: flex;
  align-items: flex-end;
  padding: 5px;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 23px;
  overflow: hidden;
}
.swatch-official {
  background: linear-gradient(180deg,#fc6c30 0 20%,#152731 20% 50%,#2e5165 50% 60%,#0c1921 60%);
}
.swatch-flowoo {
  background: linear-gradient(115deg,#0d1920 40%,#00e5c3 40% 70%,#13242e 70%);
}
.swatch-minimal {
  background: #e5e8db;
  color: #fd642b;
}
.swatch-photo {
  background: linear-gradient(0deg,#0d1920cc,#31546833),url('/images/runners.jpg') center/cover;
}
.swatch-map {
  background: repeating-linear-gradient(40deg,#1a3443 0 1px,#0a1c26 1px 12px);
  color: var(--accent);
}
.radio {
  width: 15px;
  height: 15px;
  border: 1px solid #536e7e;
  border-radius: 50%;
  margin-right: 8px;
}
.photo-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #385261;
  border-radius: 8px;
  padding: 16px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.photo-upload>svg {
  color: #7897a9;
}
.photo-upload>div {
  flex: 1;
}
.photo-upload strong {
  font-size: 11px;
}
.photo-upload p {
  font-size: 9px;
  color: #7093a8;
  margin-top: 4px;
}
.photo-upload .button {
  font-size: 9px;
  padding: 10px;
  min-height: 36px;
}
.small {
  font-size: 10px;
}
.muted {
  color: #7994a3;
}
.studio-buttons {
  display: flex;
  gap: 12px;
  margin-top: 23px;
}
.studio-buttons .button {
  flex: 1;
  padding: 15px 10px;
}
.success {
  font-size: 11px;
  line-height: 1.7;
  color: #87b6d2;
  margin: 15px 0;
  min-height: 18px;
}
.preview-area {
  border: 1px solid #283d4a;
  background: radial-gradient(ellipse at center,#30485555,#141e23);
  border-radius: 11px;
  padding: 18px 28px;
}
.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: #87a2b2;
  font-size: 7px;
  letter-spacing: 1.5px;
}
.preview-toolbar button {
  padding: 5px;
}
.card-frame {
  width: 100%;
  max-width: 285px;
  margin: 0 auto;
  box-shadow: 0 20px 50px #0005;
  transform: rotate(2deg);
  border-radius: 5px;
  overflow: hidden;
}
.card-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9/16;
}
.preview-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  font-size: 6px;
  letter-spacing: 1px;
  color: #7897a9;
  gap: 10px;
}
.preview-foot>span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.preview-foot i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6fadd1;
}
.record-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 23px;
  align-items: start;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  font-size: 11px;
  display: block;
  position: relative;
  color: #b0c6d3;
}
.field>span {
  display: block;
  color: #67879a;
  font-size: 7px;
  letter-spacing: 1px;
  margin: 8px 0;
}
.field>input {
  font-size: 22px;
  letter-spacing: 1px;
}
.calculated-pace {
  background: #1d2e38;
  border: 1px solid #2a4352;
  padding: 22px;
  margin: 23px 0;
  border-radius: 7px;
}
.calculated-pace>span:first-child {
  font-size: 8px;
  letter-spacing: 1.6px;
  color: #6b97b0;
}
.calculated-pace>strong {
  display: block;
  font-size: 42px;
  font-weight: 500;
  margin: 10px 0;
}
.calculated-pace small {
  font-size: 15px;
  color: #769eb5;
}
.calculated-pace>span:last-child {
  font-size: 10px;
  color: #7696a8;
}
.optional-heading {
  font-size: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 25px 0 18px;
}
.optional-heading>span {
  font-size: 7px;
  color: #6d8b9d;
  border: 1px solid #364e5b;
  padding: 3px 5px;
  border-radius: 3px;
}
.record-grid form>.button {
  width: 100%;
  margin-top: 25px;
}
.strava-panel {
  background: linear-gradient(150deg,#3b3021,#1a2429);
  border-color: #514332;
}
.strava-mark {
  font-size: 50px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 26px;
}
.tag {
  font-size: 7px;
  letter-spacing: 1.6px;
  color: #b0a084;
}
.strava-panel h2 {
  font-size: 29px;
  line-height: 1.2;
  margin: 12px 0 15px;
}
.strava-panel p {
  font-size: 11px;
  color: #87a1b0;
}
.strava-panel>.button {
  margin-top: 19px;
  width: 100%;
}
.integration-state {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  font-size: 9px;
  color: #b8a88e;
}
.integration-state>i {
  height: 5px;
  width: 5px;
  background: #b8a88e;
  border-radius: 50%;
}
.tip {
  display: flex;
  gap: 12px;
  color: #64889d;
  font-size: 10px;
  padding: 21px 6px;
}
.tip svg {
  flex-shrink: 0;
}
.achievement-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  background: radial-gradient(ellipse at right,#2a577155,transparent 70%),#182933;
  border: 1px solid #2f566c;
  border-radius: 11px;
  margin-bottom: 24px;
}
.trophy {
  width: 83px;
  height: 83px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c49c4d15;
  border: 1px solid #93804a55;
  color: #d6b772;
  flex-shrink: 0;
}
.achievement-banner>div:nth-child(2)>span {
  font-size: 8px;
  letter-spacing: 1.7px;
  color: #86b7d4;
}
.achievement-banner h2 {
  font-size: 32px;
  margin: 8px 0;
}
.achievement-banner p {
  font-size: 11px;
  color: #82a6bb;
}
.achievement-banner>svg {
  margin-left: auto;
  color: #5289a8;
}
.comparison-panel {
  margin-top: 23px;
}
.comparison-bar {
  margin: 27px 0;
}
.comparison-bar>div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.comparison-bar span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #89a7b9;
  display: flex;
  align-items: center;
  gap: 9px;
}
.comparison-bar i {
  width: 5px;
  height: 5px;
  background: #6e91a6;
  border-radius: 50%;
}
.comparison-bar strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.bar-track {
  height: 28px;
  border-radius: 4px;
  background: #0e181e;
}
.bar-track>span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #476a7e;
}
.result .bar-track>span {
  background: linear-gradient(90deg,#008d8c,var(--accent));
}
.result i {
  background: var(--accent);
}
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.event-art {
  height: 180px;
  background: repeating-linear-gradient(125deg,transparent 0 55px,#9ccdea07 55px 100px),linear-gradient(135deg,#254151,#142027);
  border-radius: 7px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.event-art>span {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent);
}
.event-art>strong {
  display: block;
  font-family: var(--display);
  font-size: 33px;
  line-height: 1.2;
  letter-spacing: .5px;
  margin-top: 16px;
  font-weight: 400;
}
.event-art>svg {
  position: absolute;
  right: 20px;
  top: 25px;
  color: #81b0cc55;
}
.event-details {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin: 19px 0;
  gap: 20px;
}
.event-details>span {
  font-size: 9px;
  color: #7195aa;
}
.event-details strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #c2d7e4;
  margin-top: 7px;
}
.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding: 21px 0;
}
.setting strong {
  font-size: 12px;
  font-weight: 500;
}
.setting p {
  font-size: 10px;
  color: #6f92a6;
  margin-top: 6px;
}
.setting>button {
  color: #88aabe;
  padding: 8px;
}
.setting .toggle {
  width: 35px;
  height: 21px;
  border-radius: 20px;
  background: #364b58;
  padding: 3px;
  flex-shrink: 0;
}
.toggle>span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #94afbf;
  transition: .2s;
}
.toggle.on {
  background: var(--accent);
}
.toggle.on>span {
  transform: translateX(14px);
  background: #121c22;
}
.mode-note {
  display: flex;
  gap: 12px;
  margin-top: 27px;
  padding: 16px;
  background: #20323d;
  border-radius: 6px;
}
.mode-note>svg {
  color: #79aac6;
  flex-shrink: 0;
}
.mode-note strong {
  font-size: 10px;
  font-weight: 500;
}
.mode-note p {
  font-size: 9px;
  color: #6c93aa;
  margin-top: 6px;
}
.history-panel {
  grid-column: 1/-1;
}
.history-empty {
  text-align: center;
  padding: 25px;
  color: #63869a;
}
.history-empty svg {
  margin: 0 auto 18px;
}
.history-empty h3 {
  font-size: 15px;
  color: #9dbbcc;
  margin-bottom: 8px;
}
.history-empty p {
  font-size: 11px;
}
.history-list>div {
  display: flex;
  gap: 15px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
  align-items: center;
}
.history-icon {
  background: #1f3744;
  padding: 10px;
  border-radius: 5px;
  color: var(--accent);
}
.history-list strong {
  font-size: 12px;
  font-weight: 500;
}
.history-list p {
  font-size: 10px;
  color: #7194a9;
  margin-top: 6px;
}
.empty {
  text-align: center;
  padding: 65px 25px;
  margin-top: 30px;
}
.empty>svg {
  margin: 0 auto 24px;
  color: var(--accent);
}
.empty h2 {
  font-size: 28px;
  margin-bottom: 13px;
}
.empty p {
  color: #7a94a3;
  font-size: 12px;
  margin-bottom: 25px;
}
.field-error {
  color: #ff9b89;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 8px;
  display: block;
}
.error-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #b46d49;
  background: #512d2044;
  padding: 15px;
  color: #ffc6a6;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 22px;
}
.error-banner>svg {
  flex-shrink: 0;
}
.error-banner>button {
  margin-left: auto;
  padding: 5px;
  display: flex;
}
.loading-state {
  text-align: center;
  padding: 120px 25px;
  color: #9bb6c6;
}
.loading-state p {
  font-size: 12px;
  color: #628599;
  margin: 15px 0 25px;
}
.loading-orbit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #2b424f;
  border-top-color: var(--accent);
  margin: 0 auto 25px;
  animation: spin 1s linear infinite;
}
.spin {
  animation: spin 1s linear infinite;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -60px;
  z-index: 100;
  background: var(--accent);
  padding: 12px;
  color: #111;
}
.skip-link:focus {
  top: 10px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #050a0ddb;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 100;
}
.preview-modal {
  position: relative;
  max-height: 90vh;
  max-width: min(90vw,calc(85vh * 9 / 16));
  box-shadow: 0 20px 100px #0008;
}
.modal-close {
  position: absolute;
  right: -14px;
  top: -14px;
  background: var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #111;
  z-index: 1;
}
.help-modal {
  position: relative;
  max-width: 430px;
}
.help-modal>svg {
  color: var(--accent);
  margin-bottom: 20px;
}
.help-modal h2 {
  margin-bottom: 16px;
}
.help-modal p {
  font-size: 12px;
  margin-bottom: 18px;
}
.help-modal .button {
  margin-top: 7px;
}
.mobile-nav button>span {
  font-size: 7px;
}
.mobile-nav button.active {
  color: var(--accent);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width:1550px) {
  .hero {
    min-height: 560px;
  }
  .hero-copy {
    padding: 44px;
  }
  .hero h1 {
    font-size: 88px;
  }
  .hero-side {
    width: 280px;
    right: 40px;
  }
  .hero p {
    font-size: 13px;
  }
  .hero-location {
    font-size: 9px;
  }
  .journey-card {
    padding: 25px;
  }
  .journey-card h3 {
    font-size: 18px;
  }
  .journey-card p {
    font-size: 12px;
  }
  .eyebrow {
    font-size: 10px;
  }
  .edition {
    font-size: 8px;
  }
  .hero-copy .button {
    font-size: 13px;
  }
}
@media (max-width:1150px) {
  :root {
    --sidebar: 205px;
  }
  .sidebar {
    padding: 28px 12px;
  }
  .sidebar nav button {
    padding: 13px 12px;
    gap: 10px;
    font-size: 11px;
  }
  .topbar {
    padding: 0 28px;
  }
  main {
    padding: 26px 28px 35px;
  }
  .hero {
    min-height: 470px;
  }
  .hero-copy {
    padding: 29px;
  }
  .hero h1 {
    font-size: 61px;
  }
  .hero-side {
    width: 195px;
    right: 20px;
  }
  .floating-distance>strong {
    font-size: 75px;
  }
  .floating-distance {
    padding: 16px;
  }
  .floating-distance>small {
    font-size: 6px;
  }
  .floating-distance>span {
    font-size: 5px;
  }
  .journey-card {
    padding: 17px;
  }
  .journey-card h3 {
    font-size: 13px;
  }
  .journey-card h3 svg {
    width: 15px;
  }
  .next-run>button {
    font-size: 8px;
    gap: 8px;
  }
  .studio {
    gap: 25px;
  }
  .preview-area {
    padding: 18px;
  }
  .preview-foot {
    font-size: 5px;
  }
  .metric strong {
    font-size: 32px;
  }
  .metric {
    padding: 22px 18px;
  }
  .pace-grid {
    grid-template-columns: 1.2fr 1fr;
  }
  .pace-grid .panel {
    padding: 22px;
  }
  .time-panel h2 {
    font-size: 14px;
  }
  .distance-bottom>span:last-child {
    display: none;
  }
  .studio-buttons {
    flex-wrap: wrap;
  }
  .studio-buttons .button {
    font-size: 10px;
  }
  .record-grid {
    grid-template-columns: 1.25fr 1fr;
  }
  .record-grid .panel {
    padding: 23px;
  }
  .form-grid {
    gap: 13px;
  }
}
@media (max-width:900px) {
  :root {
    --sidebar: 180px;
  }
  .wordmark {
    gap: 5px;
    padding: 0 2px;
  }
  .wordmark>span:last-child {
    font-size: 23px;
  }
  .wordmark i {
    font-size: 15px;
  }
  .wordmark small {
    font-size: 6px;
    letter-spacing: 2px;
  }
  .sidebar nav button {
    font-size: 10px;
    padding: 13px 8px;
  }
  .sidebar nav button small {
    display: none;
  }
  .sidebar-event {
    padding: 15px 10px;
  }
  .sidebar-event strong {
    font-size: 16px;
  }
  .sidebar-event>span {
    font-size: 6px;
  }
  .sidebar-event small {
    font-size: 6px;
  }
  .hero h1 {
    font-size: 54px;
  }
  .hero-side {
    width: 160px;
  }
  .floating-distance {
    padding: 13px;
    margin-bottom: 45px;
  }
  .floating-distance>small {
    font-size: 5px;
  }
  .floating-distance>span {
    letter-spacing: 0;
    font-size: 5px;
  }
  .floating-distance>strong {
    font-size: 65px;
  }
  .hero-copy {
    padding: 28px;
  }
  .hero-copy p {
    font-size: 10px;
  }
  .edition {
    display: none;
  }
  .journey-heading>span {
    display: none;
  }
  .journey-card h3 {
    font-size: 12px;
  }
  .journey-card p {
    font-size: 9px;
  }
  .next-run>button {
    max-width: 115px;
    text-align: left;
  }
  .metric strong {
    font-size: 26px;
  }
  .metric-label {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .pace-grid {
    grid-template-columns: 1fr;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .strava-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
  }
  .strava-mark {
    grid-row: 1/3;
    margin-bottom: 0;
  }
  .strava-panel h2 {
    grid-column: 1;
    font-size: 25px;
  }
  .strava-panel p {
    grid-column: 2;
    grid-row: 2/4;
  }
  .strava-panel .tag {
    grid-column: 2;
    grid-row: 1;
  }
  .strava-panel .integration-state {
    margin-top: 10px;
    grid-column: 1;
  }
  .strava-panel>.button {
    grid-column: 2;
    grid-row: 4;
    margin-top: 10px;
  }
  .time-panel {
    align-items: flex-start;
  }
  .time-input input {
    width: 190px;
    font-size: 23px;
  }
  .goal-option {
    padding: 18px 14px;
  }
  .goal-option strong {
    font-size: 11px;
  }
  .goal-option span {
    font-size: 9px;
  }
  .goal-option>svg {
    width: 20px;
  }
  .studio {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .template-option {
    gap: 10px;
    padding: 10px;
  }
  .template-swatch {
    width: 30px;
    height: 48px;
    flex-shrink: 0;
  }
  .template-option strong {
    font-size: 10px;
  }
  .template-option small {
    font-size: 8px;
    line-height: 1.5;
  }
  .template-option>svg {
    width: 14px;
    margin-right: 0;
  }
  .template-option .radio {
    margin-right: 0;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .photo-upload .button {
    width: 100%;
  }
  .studio-options>.section-heading>span {
    display: none;
  }
  .preview-area {
    padding: 13px;
  }
  .preview-toolbar {
    font-size: 6px;
    letter-spacing: .7px;
  }
  .preview-foot {
    flex-direction: column;
    gap: 8px;
  }
  .more-grid {
    grid-template-columns: 1fr;
  }
  .history-panel {
    grid-column: auto;
  }
}
@media (max-width:700px) {
  .sidebar {
    display: none;
  }
  .main-wrap {
    margin: 0;
  }
  .topbar {
    height: 66px;
    padding: 0 22px;
  }
  .breadcrumb {
    font-size: 10px;
    gap: 8px;
  }
  .topbar-right {
    gap: 12px;
  }
  .demo-badge {
    font-size: 6px;
    letter-spacing: .9px;
    padding: 6px;
  }
  .avatar {
    height: 27px;
    width: 27px;
  }
  main {
    padding: 22px 22px 32px;
  }
  .progress-rail {
    margin-bottom: 22px;
    width: 90px;
  }
  .eyebrow {
    font-size: 6px;
    letter-spacing: 1.4px;
  }
  .welcome-top {
    margin-bottom: 16px;
  }
  .hero {
    min-height: 535px;
  }
  .hero-copy {
    padding: 27px 24px;
  }
  .hero h1 {
    font-size: 63px;
    margin: 27px 0 20px;
    letter-spacing: .2px;
  }
  .hero-photo {
    object-position: 66% 40%;
    filter: brightness(.7) saturate(.5);
  }
  .hero-shade {
    background: linear-gradient(90deg,#0f1518ed,#0f1518bb 42%,#0f151822),linear-gradient(0deg,#10181d,transparent 70%);
  }
  .hero-copy p {
    font-size: 11px;
    margin-bottom: 26px;
  }
  .event-pill {
    font-size: 8px;
    padding: 8px 10px;
  }
  .hero-location {
    position: absolute;
    bottom: -15px;
    font-size: 7px;
    gap: 4px;
  }
  .hero-side {
    right: 18px;
    top: 28px;
    bottom: 25px;
    width: 145px;
    pointer-events: none;
  }
  .hero-side>span {
    font-size: 6px;
    letter-spacing: 2px;
  }
  .floating-distance {
    display: none;
  }
  .hero-coordinates {
    font-size: 7px;
    margin-top: auto;
    align-self: end;
  }
  .hero-coordinates>span {
    font-size: 4px;
    letter-spacing: .8px;
  }
  .journey-heading {
    margin-top: 27px;
  }
  .journey-heading h2 {
    font-size: 20px;
  }
  .journey-heading p {
    font-size: 10px;
  }
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .journey-card {
    position: relative;
    padding: 20px 20px 20px 73px;
    min-height: 116px;
  }
  .journey-card-top {
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 21px;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .journey-card-top>span {
    font-size: 16px;
  }
  .journey-card-top>svg {
    width: 20px;
  }
  .journey-card h3 {
    font-size: 15px;
    margin: 8px 0;
  }
  .journey-card p {
    max-width: none;
    font-size: 10px;
  }
  .next-run {
    gap: 11px;
    padding: 17px 0;
  }
  .next-run strong {
    font-size: 10px;
  }
  .next-run p {
    font-size: 8px;
    max-width: 250px;
  }
  .next-run>button {
    font-size: 0;
    max-width: none;
  }
  .next-run>button svg {
    width: 18px;
  }
  .next-run-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
  }
  .next-run-icon svg {
    width: 15px;
  }
  footer {
    padding: 20px 22px 100px;
    font-size: 6px;
    letter-spacing: 1px;
  }
  footer>span:last-child {
    display: none;
  }
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0e151af2;
    backdrop-filter: blur(20px);
    border-top: 1px solid #2c3e49;
    z-index: 25;
    overflow: auto;
    justify-content: space-around;
    padding: 13px 9px max(14px,env(safe-area-inset-bottom));
    gap: 3px;
  }
  .mobile-nav button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    color: #6c8c9f;
    padding: 0 4px;
    min-width: 36px;
  }
  .mobile-nav button svg {
    width: 18px;
  }
  .mobile-nav button>span {
    font-size: 6px;
  }
  .page-title {
    margin: 10px 0 29px;
  }
  .page-title h1 {
    font-size: 32px;
    letter-spacing: -1.1px;
    line-height: 1.15;
    margin: 16px 0 12px;
  }
  .page-title h1 em {
    display: block;
  }
  .page-title p {
    font-size: 11px;
  }
  .distance-grid {
    gap: 11px;
    margin-bottom: 27px;
  }
  .distance-card {
    min-height: 195px;
    padding: 17px;
  }
  .distance-top {
    font-size: 6px;
    letter-spacing: .6px;
    gap: 8px;
  }
  .distance-top svg {
    width: 16px;
    flex-shrink: 0;
  }
  .distance-number {
    font-size: 85px;
    margin: 7px 0;
  }
  .distance-number small {
    font-size: 19px;
    margin-left: 7px;
  }
  .distance-bottom>span:first-child {
    font-size: 8px;
    line-height: 1.5;
  }
  .section-heading h2 {
    font-size: 13px;
  }
  .section-heading>span {
    font-size: 6px;
    max-width: 130px;
    text-align: right;
    line-height: 1.7;
  }
  .goal-grid {
    gap: 8px;
  }
  .goal-option {
    padding: 17px 12px;
  }
  .goal-option>strong {
    font-size: 10px;
    line-height: 1.5;
    min-height: 30px;
    margin-bottom: 4px;
  }
  .goal-option>span {
    font-size: 8px;
    line-height: 1.7;
  }
  .goal-option>svg {
    margin-bottom: 14px;
    width: 18px;
  }
  .goal-option>.selection-check {
    right: 8px;
    top: 12px;
    width: 13px;
  }
  .time-panel {
    display: block;
    padding: 22px;
  }
  .time-panel h2 {
    font-size: 14px;
  }
  .time-panel p {
    font-size: 10px;
  }
  .time-input {
    display: block;
    margin-top: 24px;
  }
  .time-input input {
    width: 100%;
    font-size: 28px;
  }
  .action-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 20px;
  }
  .action-row p,.action-row>.text-link {
    text-align: center;
  }
  .button {
    font-size: 11px;
  }
  .metric-grid {
    gap: 8px;
  }
  .metric {
    padding: 16px 11px;
  }
  .metric-label {
    font-size: 6px;
    gap: 5px;
    letter-spacing: .5px;
    align-items: flex-start;
    min-height: 23px;
    line-height: 1.5;
    margin-bottom: 9px;
  }
  .metric-label svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .metric strong {
    font-size: clamp(18px,5.8vw,29px);
    letter-spacing: -1px;
  }
  .metric small {
    display: block;
    font-size: 9px;
    margin: 6px 0 0;
    letter-spacing: 0;
  }
  .panel {
    padding: 22px;
  }
  .pace-chart {
    height: 235px;
    gap: 12px;
  }
  .chart-bars {
    gap: 6px;
  }
  .chart-column {
    gap: 11px;
  }
  .chart-column>strong {
    font-size: 8px;
  }
  .chart-column>span {
    font-size: 6px;
  }
  .chart-axis {
    font-size: 8px;
  }
  .splits td {
    padding: 14px 0;
  }
  .studio {
    grid-template-columns: 1fr;
  }
  .template-option {
    padding: 11px 13px;
    gap: 16px;
  }
  .template-swatch {
    width: 36px;
    height: 51px;
  }
  .template-option strong {
    font-size: 12px;
  }
  .template-option small {
    font-size: 9px;
  }
  .template-option>svg {
    width: 19px;
    margin-right: 4px;
  }
  .template-option .radio {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .studio-options>.section-heading>span {
    display: block;
  }
  .photo-upload .button {
    width: auto;
  }
  .preview-area {
    padding: 22px;
    grid-row: 1;
    margin-bottom: 12px;
  }
  .card-frame {
    max-width: 225px;
  }
  .preview-toolbar {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .preview-foot {
    flex-direction: row;
    font-size: 6px;
    margin-top: 25px;
  }
  .studio-buttons {
    gap: 10px;
  }
  .studio-buttons .button {
    font-size: 10px;
  }
  .record-grid .panel {
    padding: 22px;
  }
  .field {
    font-size: 10px;
  }
  .field>input {
    font-size: 20px;
    padding: 14px 12px;
  }
  .field>span {
    font-size: 6px;
  }
  .calculated-pace strong {
    font-size: 38px;
  }
  .strava-panel {
    display: block;
  }
  .strava-mark {
    margin-bottom: 20px;
  }
  .strava-panel .tag {
    font-size: 7px;
  }
  .strava-panel h2 {
    font-size: 28px;
  }
  .strava-panel p {
    font-size: 11px;
  }
  .strava-panel .integration-state {
    margin-top: 20px;
  }
  .strava-panel>.button {
    margin-top: 20px;
  }
  .achievement-banner {
    padding: 23px;
    gap: 17px;
    align-items: flex-start;
  }
  .trophy {
    width: 48px;
    height: 48px;
  }
  .trophy svg {
    width: 26px;
  }
  .achievement-banner>svg {
    display: none;
  }
  .achievement-banner h2 {
    font-size: 25px;
    margin: 10px 0;
  }
  .achievement-banner p {
    font-size: 10px;
  }
  .achievement-banner>div:nth-child(2)>span {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .comparison-bar strong {
    font-size: 18px;
  }
  .comparison-panel {
    padding: 22px;
  }
  .more-grid {
    gap: 17px;
  }
  .event-art {
    height: 180px;
  }
  .empty h2 {
    font-size: 24px;
  }
  .empty p {
    font-size: 11px;
  }
  .empty {
    padding: 50px 25px;
  }
  .modal-backdrop {
    padding: 27px;
  }
  .help-modal {
    padding: 27px;
  }
  .error-banner {
    font-size: 11px;
    align-items: flex-start;
  }
  .loading-state {
    padding: 80px 15px;
  }
  .loading-state h2 {
    font-size: 21px;
  }
}
.mobile-brand {
  display: none;
}
.hero h1 {
  font-size: clamp(48px,4.8vw,70px);
}
@media (max-width:700px) {
  .topbar .breadcrumb {
    display: none;
  }
  .mobile-brand {
    display: flex;
    align-items: baseline;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -1.2px;
    padding: 0;
  }
  .mobile-brand>span {
    font-size: 17px;
    color: var(--accent);
    margin-left: 3px;
  }
  .hero h1 {
    font-size: 51px;
  }
  .hero {
    min-height: 545px;
  }
  .hero-location {
    bottom: 0;
  }
  .hero-coordinates {
    display: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Full-screen cinematic scenes. All controls and text remain live HTML. */
:root{--bg:#03131d;--surface:#071f2b;--raised:#0c2c3a;--line:#25434f;--muted:#a2b9c3;--text:#f4fbfd;--accent:#00e5c3;--accent-soft:#7ef6e5}
body{background:var(--bg)}.app-shell{position:relative;isolation:isolate}.screen-backdrop{position:fixed;inset:0 0 0 var(--sidebar);z-index:-1;overflow:hidden;background:#03131d;pointer-events:none}.screen-backdrop>img{width:100%;height:100%;object-fit:cover;object-position:center 72%;opacity:.88}.backdrop-shade{position:absolute;inset:0;background:linear-gradient(90deg,#02121eea,#02131e9c 55%,#02131e55),linear-gradient(0deg,#02121eed,transparent 55%,#02121e55)}.scene-0 .screen-backdrop>img{object-position:center 42%;opacity:1}.scene-0 .backdrop-shade{background:linear-gradient(90deg,#02131ee8 0%,#02131eac 35%,#02131e12 78%),linear-gradient(0deg,#02131eee 0%,transparent 60%)}.main-wrap{min-height:100svh;background:transparent}.sidebar{background:#02111dec;border-color:#214150;backdrop-filter:blur(20px);overflow-y:auto}.official-brand{display:block;flex-shrink:0;width:96px;height:72px;border-radius:9px;background:white;padding:4px;overflow:hidden;border:1px solid #c4edf255;box-shadow:0 4px 20px #0002}.official-brand img{display:block;width:100%;height:100%;object-fit:contain}.official-brand.large{width:148px;height:111px;margin:0 auto 31px;padding:5px}.sidebar-label{color:#89a9b9}.sidebar nav button{color:#bdcfd8}.sidebar nav button.active{background:#00e5c318;color:var(--accent);box-shadow:inset 2px 0 var(--accent)}.sidebar nav button:hover{background:#0d2f40}.sidebar-event{background:linear-gradient(140deg,#0f3342,#031923);border-color:#315868}.sidebar-event>span,.sidebar-event small{color:#9db8c5}.topbar{height:106px;background:#031623a8;border-color:#8bd8e726;backdrop-filter:blur(18px)}.header-product{display:flex;align-items:center;gap:25px}.topbar-right{gap:24px}.race-identity{display:flex;align-items:center;gap:15px}.race-identity>span{font-size:7px;line-height:1.7;letter-spacing:1px;color:#9bb8c4;text-align:right}.race-identity strong{color:#e0f2f9;font-weight:500}.race-identity>img{width:72px;height:72px;object-fit:contain;border-radius:8px;border:1px solid #b6aff644}.demo-badge{border-color:#568a9c5c;background:#061d28b8;color:#9fbdcc}.demo-badge>i{background:#66a8bb}.breadcrumb{color:#7b9ba9}.breadcrumb strong{color:#e0edf4}main{padding-top:25px;min-height:calc(100svh - 166px)}.page-title h1{font-size:clamp(30px,3vw,44px);letter-spacing:-1.2px}.page-title p{color:#bed1d9}.eyebrow{color:#8db3c3}.progress-rail span{background:#7297a13d}.panel,.journey-card,.metric,.goal-option,.template-option,.time-panel{background:#062130bf;border-color:#799ba63d;backdrop-filter:blur(14px);box-shadow:0 10px 35px #0002}.panel p,.journey-card p,.page-title p{color:#b6cbd5}.metric:first-child{background:linear-gradient(125deg,#004a4da8,#052330bd);border-color:#00e5c34d}.metric{background:#062331c7}.metric-label,.metric small{color:#accad6}.button{border-radius:11px;background:linear-gradient(115deg,#00edbe,#00dcd4);color:#00222b;box-shadow:0 5px 22px #00dfc324;min-height:48px;font-size:12px}.button:hover:not(:disabled){background:linear-gradient(115deg,#4dffdb,#36ede8);box-shadow:0 8px 28px #00dfc344}.button.secondary{background:#0b2c3cbf;color:#d2e8f1;border-color:#6b9aab66}.button.secondary:hover:not(:disabled){background:#184352}.text-link{color:#9fdbdf}.distance-card{background:linear-gradient(0deg,#03202de8,#031b2999);border-color:#91b5bf50}.distance-card:first-child{background-image:linear-gradient(0deg,#021723eb,#02172333),url('/backgrounds/race.png');background-position:center 75%;background-size:cover}.distance-card:last-child{background-image:linear-gradient(0deg,#021723eb,#02172333),url('/backgrounds/goal.png');background-position:center 75%;background-size:cover}.distance-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 7px 35px #00e5c314;background-color:#062e38}.distance-card::before{display:none}.distance-number{font-family:var(--font);font-style:normal;font-size:88px;font-weight:750;letter-spacing:-7px}.distance-number small{letter-spacing:0;font-size:24px}.distance-top,.distance-bottom>span:first-child{color:#cce4ed}.distance-bottom>span:last-child{color:#9fc1ce}.goal-option.selected,.template-option.selected{border-color:var(--accent);background:#004a4c91}.goal-option>span,.template-option small{color:#a6c4d1}.goal-option>svg{color:#89bbc9}.time-panel p,.time-input>span,.field,.field>span{color:#a4c3d1}input{background:#031a25b8;border-color:#587c8a88}.calculated-pace{background:linear-gradient(110deg,#07505ab3,#03242eaf);border-color:#2d7a83}.calculated-pace>span,.calculated-pace small{color:#a1d9df}.strava-panel{background:linear-gradient(145deg,#23343ebf,#051c28d9);border-color:#ff732450}.strava-mark{color:#fc4c02}.strava-panel p,.tip,.muted,.setting p{color:#a7c2d0}.integration-state{color:#c3dbe5}.strategy p,.chart-axis,.chart-column>span{color:#b0cbd4}.chart-bars{background:repeating-linear-gradient(0deg,transparent 0 66px,#91b6c322 67px 68px)}.chart-column>strong{color:#d3e9ef}.splits th,.splits td{color:#c3dce6}.splits td:first-child>span{background:#0b3b4a;color:#7de8e7}.achievement-banner{background:linear-gradient(125deg,#07504cbd,#0e333eaa);border-color:#36c6b366;backdrop-filter:blur(12px)}.achievement-banner>div:nth-child(2)>span{color:#8ef3dc}.achievement-banner p{color:#c0d9df}.trophy{color:#f8d35d;border-color:#e2b74866;background:#be9c2722}.comparison-bar>div:first-child>span{color:#b5d0dd}.bar-track{background:#031824}.bar-track>span{background:#507f94}.result .bar-track>span{background:linear-gradient(90deg,#008b91,#00e5c3)}.preview-area{background:#03212fbf;border-color:#58829488;backdrop-filter:blur(14px)}.card-frame{transform:none;border-radius:10px;border:2px solid #7ef3ee;box-shadow:0 0 0 4px #00e5c311,0 18px 60px #0005}.preview-toolbar,.preview-foot{color:#a7c9d8}.photo-upload{border-color:#487a8b;background:#06283677}.photo-upload p,.photo-upload>svg{color:#a5c6d4}.swatch-official{background:linear-gradient(180deg,#7c35fb 0 22%,#073443 22% 70%,#00e5c3 70%)}.swatch-flowoo{background:linear-gradient(125deg,#03314d 40%,#00e5c3 40% 70%,#062232 70%)}.swatch-minimal{background:#f1f8fa;color:#007d88}.swatch-photo{background:linear-gradient(0deg,#021d2b99,#021d2b11),url('/backgrounds/goal.png') center 70%/cover}.swatch-map{background:repeating-linear-gradient(40deg,#214b5a 0 1px,#041b29 1px 12px);color:#00e5c3}.event-art{background:linear-gradient(120deg,#241345cc,#081c2b99);border:1px solid #a28cc43d}.setting strong,.mode-note strong{color:#e0f2f9}.setting>button{color:#8cdae2}.mode-note{background:#06404799}.mode-note p{color:#acd4db}.event-details>span,.event-details strong,.history-list p{color:#afd1df}.history-icon{background:#063a49}.history-empty{color:#93c0d1}.history-empty h3{color:#c9e3ed}.toggle.on{background:#00e5c3}.welcome-full{min-height:600px;display:flex;align-items:center;position:relative}.welcome-copy{max-width:570px;padding:30px 0}.welcome-event{display:flex;gap:15px;align-items:center;margin-top:35px;color:#d5e9ee;font-size:12px}.welcome-event>span{font-size:8px;letter-spacing:1px;border:1px solid #95d3d859;border-radius:20px;padding:5px 10px}.welcome-copy h1{font-size:clamp(39px,4.1vw,61px);font-weight:750;line-height:1.12;letter-spacing:-2px;margin:23px 0}.welcome-copy p{font-size:14px;line-height:1.8;color:#c4d9e3;margin-bottom:30px}.welcome-copy .button{min-width:250px;justify-content:space-between;font-size:13px;padding:17px 23px}.welcome-location{display:flex;align-items:center;gap:7px;margin-top:25px;font-size:10px;color:#adc7d4}.journey-heading{margin-top:8px}.journey-heading p{color:#abc7d3}.journey-card-top>span{color:#6a96ad}.journey-card small{color:#8eb9c8}.journey-card h3 svg{color:#7fd3d5}footer{color:#88a9bc;border-color:#53879922;background:#02131a66}.modal-backdrop{background:#00121edb}.help-modal{background:#082b3b;border-color:#38677a}.success{color:#83e7ce}.empty p,.loading-state p{color:#b5d4de}
@media(max-width:1100px){.breadcrumb{display:none}.topbar-right{gap:15px}.race-identity>span{display:none}.welcome-copy{max-width:490px}.welcome-copy h1{font-size:46px}}
@media(max-width:700px){.screen-backdrop{left:0}.screen-backdrop>img{object-position:center bottom;opacity:.9}.backdrop-shade{background:linear-gradient(180deg,#02142199 0%,#021421c9 45%,#02142169 75%,#021421aa 100%)}.scene-0 .screen-backdrop>img{object-position:center top;opacity:1}.scene-0 .backdrop-shade{background:linear-gradient(180deg,#01121c22 0%,#01121c00 40%,#01121caa 59%,#01121cf5 90%)}.topbar{height:102px;padding:10px 20px;gap:12px;background:#0316238c}.header-product{gap:0}.official-brand{width:101px;height:76px}.topbar-right{gap:12px}.race-identity>img{width:64px;height:64px}.race-identity{gap:0}.demo-badge{font-size:5px;letter-spacing:.6px;max-width:100px;padding:6px}.demo-badge>i{width:3px;height:3px;flex-shrink:0}main{padding:20px 20px 32px;min-height:calc(100svh - 160px)}.progress-rail{margin-bottom:19px}.page-title{margin-top:2px;margin-bottom:24px}.page-title h1{font-size:29px;letter-spacing:-.8px}.page-title p{font-size:11px}.welcome-full{min-height:calc(100svh - 230px);display:flex;align-items:flex-end;text-align:center;padding-bottom:24px}.welcome-copy{padding:0;width:100%;max-width:none}.welcome-copy>.eyebrow,.welcome-event{display:none}.welcome-copy h1{font-size:27px;line-height:1.15;letter-spacing:-.6px;margin:0 0 14px;text-shadow:0 2px 15px #000b}.welcome-copy h1 em{color:white}.welcome-copy p{font-size:12px;line-height:1.6;margin-bottom:21px;text-shadow:0 2px 10px #000}.welcome-copy .button{width:100%;min-width:0;border-radius:24px;padding:14px 20px;font-size:13px}.welcome-location{justify-content:center;margin-top:17px;font-size:8px}.scene-0 .progress-rail{visibility:hidden}.scene-0 main{padding-top:0}.scene-0 .journey-heading{margin-top:15px}.journey-card{background:#062231d6}.distance-card{min-height:168px;padding:17px}.distance-number{font-size:68px;letter-spacing:-4px;margin-top:12px}.distance-number small{font-size:18px;margin-left:8px}.distance-top{font-size:6px;letter-spacing:.5px}.distance-bottom>span:first-child{font-size:8px}.goal-grid{gap:7px}.goal-option{padding:15px 10px}.goal-option>strong{font-size:10px}.goal-option>span{font-size:8px}.panel,.goal-option,.template-option{backdrop-filter:blur(12px)}.panel{padding:20px}.metric{padding:15px 10px}.metric strong{font-size:clamp(18px,5.6vw,28px)}.metric-label{font-size:6px}.studio{gap:22px}.preview-area{padding:18px}.card-frame{max-width:225px}.photo-upload{padding:14px}.achievement-banner{padding:20px 15px;gap:12px}.achievement-banner h2{font-size:23px}.mobile-nav{background:#021722ef;border-color:#3b6d7d80;padding-top:13px;padding-bottom:max(14px,env(safe-area-inset-bottom));backdrop-filter:blur(20px)}.mobile-nav button{color:#b0cbd8}.mobile-nav button.active{color:#00e5c3}.event-art{height:150px}.toggle>span{background:#d8edf1}.toggle.on>span{background:#012029}footer{background:#02131b33}.history-panel{background:#062230ce}}

.official-event-art{display:flex;justify-content:center;align-items:center;background:#7733ee33}.official-event-art>img{height:100%;max-width:100%;object-fit:contain;border-radius:6px}

/* Official marks float over the scene, without separate logo tiles. */
.official-brand,.official-brand.large{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.official-brand>img{filter:drop-shadow(0 2px 5px #00111f77)}
.race-identity>img{border:0;border-radius:0;background:transparent;filter:drop-shadow(0 2px 5px #00111f77)}
.topbar{background:linear-gradient(180deg,#02131dc7,#02131d00);border-bottom:0;backdrop-filter:none}
.official-event-art{background:transparent;border:0}
@media(max-width:700px){.topbar{background:linear-gradient(180deg,#02131dc7,#02131d00)}.official-brand{width:112px;height:84px}.race-identity>img{width:77px;height:70px}.topbar-right{gap:10px}.demo-badge{font-size:4.5px;letter-spacing:.4px}}

.official-brand>img,.race-identity>img,.official-event-art>img{mix-blend-mode:lighten;filter:none}

/* Typography revision: readable native UI lettering and restrained symbols. */
body{font-weight:400;letter-spacing:0}
h1,h2,h3,.welcome-copy h1{font-family:var(--font);font-weight:600}
.page-title h1{font-weight:600;letter-spacing:-.7px}
.page-title .eyebrow,.welcome-copy>.eyebrow{letter-spacing:.6px;font-weight:500;font-size:10px}
.welcome-copy h1{font-weight:600;letter-spacing:-1px;line-height:1.16}
.section-heading h2{font-weight:600;font-size:16px}
.metric strong,.calculated-pace>strong{font-family:var(--font);font-weight:600;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.distance-number{font-family:var(--font);font-weight:650;letter-spacing:-3px;font-size:78px}
.distance-number>small{font-weight:500;letter-spacing:0}
.button{font-weight:600;letter-spacing:0}
.sidebar nav button{font-size:13px;font-weight:500}
.sidebar nav button>svg:first-child{width:18px;height:18px}
.mobile-nav button>svg{width:21px;height:21px}
.mobile-nav button>span{font-size:8px;font-weight:500;letter-spacing:0}
.journey-card-top>span{font-family:var(--font);font-size:15px;font-weight:500}
.journey-card>small,.section-heading>span,.metric-label{letter-spacing:.5px}
.journey-card-top>svg,.strategy>svg{width:19px;height:19px;stroke-width:1.7}
.journey-card h3{font-weight:600}.journey-card p{font-size:12px}
.template-swatch{font-family:var(--font);font-size:19px;font-weight:600}
.template-option strong,.goal-option>strong{font-weight:600}
.breadcrumb,.field,.field>span,.time-input>span,.splits th,.splits td{font-size:12px}
@media(max-width:700px){.welcome-copy h1{font-size:27px;letter-spacing:-.5px}.page-title h1{font-size:29px;letter-spacing:-.6px}.distance-number{font-size:64px;letter-spacing:-2px}.section-heading h2{font-size:14px}.field{font-size:12px}.field>span,.time-input>span{font-size:9px;letter-spacing:.3px}.metric-label{font-size:8px;line-height:1.4;min-height:26px}.metric strong{font-size:clamp(18px,5.4vw,27px)}.sidebar nav button{font-size:12px}.mobile-nav button>span{font-size:7px}.journey-card p{font-size:11px}.goal-option>strong{font-size:11px}.template-option strong{font-size:13px}.template-option small{font-size:10px}.splits th{font-size:10px}.splits td{font-size:12px}}

.lucide{stroke-width:1.7}.distance-top>span{letter-spacing:.3px}.goal-option>svg{width:21px;height:21px}

/* Strava connection entry, with the supplied original brand asset. */
.strava-connection{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:28px;background:linear-gradient(140deg,#332a26b8,#082332dc 65%);border:1px solid #ff6d3066;border-radius:12px;backdrop-filter:blur(14px)}
.strava-brand{width:92px;flex-shrink:0}.strava-brand img{display:block;width:100%;height:auto;mix-blend-mode:screen}
.connection-label{display:block;font-size:9px;color:#e5ad91;letter-spacing:.8px;margin-bottom:12px}
.strava-description h2{font-size:25px;line-height:1.2;font-weight:600;margin-bottom:13px;letter-spacing:-.5px}
.strava-description p{font-size:12px;line-height:1.7;color:#bfced5;max-width:460px}
.strava-data{display:flex;gap:8px;margin:22px 0}.strava-data span{padding:7px 12px;border-radius:5px;border:1px solid #9dadb442;color:#d1e3e9;font-size:10px;background:#03203155}
.connection-status{display:flex;align-items:center;gap:8px;font-size:10px;color:#a1b6c1}.connection-status>span{width:5px;height:5px;border-radius:50%;background:#aaa899}.connection-status.connected{color:#90e9ce}
.strava-actions{display:flex;flex-direction:column;gap:13px;width:100%}
.button.strava-connect-button{background:#fc4c02;color:#fff;box-shadow:0 5px 20px #fc4c021c;border-radius:8px;padding:14px 17px;font-size:12px;white-space:nowrap}
.button.strava-connect-button:hover:not(:disabled){background:#e84600;box-shadow:0 8px 24px #fc4c0230}
.strava-connect-button>svg:last-child{margin-left:auto}.strava-actions>.text-link{font-size:11px;text-align:center}
.strava-connection.compact{flex-direction:row;align-items:center;gap:25px;padding:23px 27px;margin:10px 0 32px}
.strava-connection.compact .strava-brand{width:64px}.strava-connection.compact .strava-description{flex:1}.strava-connection.compact h2{font-size:20px;margin-bottom:7px}.strava-connection.compact .connection-label{margin-bottom:7px;font-size:8px}.strava-connection.compact .strava-actions{width:auto;min-width:190px}.strava-connection.compact p{font-size:11px}
.strava-modal-logo{display:block;width:85px;margin-bottom:24px;mix-blend-mode:screen}.strava-modal-actions{display:flex;flex-direction:column;gap:10px}.strava-modal h2{font-size:24px;line-height:1.2}
@media(max-width:1100px){.strava-connection.compact{flex-wrap:wrap;gap:18px}.strava-connection.compact .strava-actions{margin-left:82px}.strava-connection{padding:23px}}
@media(max-width:900px){.record-grid>.strava-side{grid-row:1;grid-column:1}.record-grid>.panel{grid-row:2}.strava-side .strava-connection{display:grid;grid-template-columns:76px 1fr;gap:15px 20px}.strava-side .strava-brand{width:76px}.strava-side .strava-description{grid-row:1/3;grid-column:2}.strava-side .strava-actions{grid-column:1/-1}.strava-side .connection-status{font-size:9px}.strava-side .strava-data{margin:15px 0}}
@media(max-width:700px){.strava-connection.compact{display:grid;grid-template-columns:55px 1fr;padding:19px;gap:16px;margin:8px 0 27px}.strava-connection.compact .strava-brand{width:55px}.strava-connection.compact h2{font-size:19px}.strava-connection.compact .connection-label{font-size:7px;letter-spacing:.4px}.strava-connection.compact p{font-size:11px}.strava-connection.compact .strava-actions{grid-column:1/-1;margin:0;width:100%}.strava-side .strava-connection{padding:20px;grid-template-columns:60px 1fr;gap:15px}.strava-side .strava-brand{width:60px}.strava-description h2{font-size:22px}.strava-description p{font-size:11px}.strava-data{gap:6px}.strava-data span{font-size:9px;padding:6px 8px}.strava-modal h2{font-size:23px}}