/* First-party, build-free CSS. Palette and dimensions preserve the original DESIGN.md site. */
:root {
  color-scheme: light dark;
  --tr-background: #EBE6DA;
  --tr-chrome-surface: #FFFFFF;
  --tr-earth: #EFEBE1;
  --tr-chrome-text: #1A1A1C;
  --tr-chrome-secondary-text: #5C6066;
  --tr-hairline: #8C806B;
  --tr-track-rose: #9C0072;
  --tr-track-amber: #946E00;
  --tr-track-ink: #1B2029;
  --tr-route-ridden: #AEB6C2;
  --tr-map-earth: #E9ECF1;
  --tr-map-forest: #D8E4D8;
  --tr-map-water: #C2D9E3;
  --tr-map-track: #798392;
  --tr-map-road: #FFFFFF;
  --tr-rider: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tr-background: #22252B;
    --tr-chrome-surface: #2B2F36;
    --tr-earth: #272B32;
    --tr-chrome-text: #ECEFF4;
    --tr-chrome-secondary-text: #B4BDCB;
    --tr-hairline: #818A97;
    --tr-track-rose: #FF4D97;
    --tr-track-amber: #FFB238;
    --tr-track-ink: #F2F5FA;
    --tr-route-ridden: #945764;
    --tr-map-earth: #171A21;
    --tr-map-forest: #1A2422;
    --tr-map-water: #123038;
    --tr-map-track: #495363;
    --tr-map-road: #343C47;
  }
}
*, ::before, ::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tr-background);
  color: var(--tr-chrome-text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tr-track-rose); outline-offset: 3px; border-radius: 4px; }
.container { max-width: 44rem; padding-inline: 1.5rem; margin-inline: auto; }
.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { top: .75rem; left: .75rem; z-index: 10; width: auto; height: auto; padding: .5rem 1rem; overflow: visible; clip-path: none; background: var(--tr-chrome-surface); border-radius: .5rem; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 3.5rem; padding-bottom: 1.5rem; }
.wordmark { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--tr-chrome-text); }
/* The app icon's own contour, fade included, as a mask: one file, inked with the text colour, so
   it is dark on the light theme and light on the dark one. See apps/ios/Design/LogoMark.swift. */
.logo { width: 2rem; height: 2rem; background: currentColor; -webkit-mask: url(/assets/logo-mark.png?v=b240f8a124aa) center / contain no-repeat; mask: url(/assets/logo-mark.png?v=b240f8a124aa) center / contain no-repeat; }
.languages { display: flex; align-items: center; gap: .25rem; padding: 0; list-style: none; font-size: .8125rem; }
.languages a, .languages span { display: block; padding: .25rem .625rem; border-radius: .5rem; }
.languages a { color: var(--tr-chrome-secondary-text); text-decoration-color: color-mix(in srgb, var(--tr-hairline) 60%, transparent); text-underline-offset: 4px; }
.languages a:hover { color: var(--tr-chrome-text); }
.languages span { background: var(--tr-chrome-surface); font-weight: 600; }
h1 { margin-bottom: .75rem; font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.lede { max-width: 34rem; font-size: 1.1875rem; color: var(--tr-chrome-secondary-text); }
.ridgeline { display: block; width: 100%; height: auto; margin-top: 2rem; margin-bottom: .5rem; border-radius: .75rem; background: var(--tr-map-earth); }
h2 { margin-top: 3rem; margin-bottom: .75rem; font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
h3 { margin-bottom: .25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.card { padding: 1.25rem 1.375rem; border-radius: .75rem; background: var(--tr-chrome-surface); }
.card p { color: var(--tr-chrome-secondary-text); }
.hero { padding-top: .5rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .3rem .8rem .3rem .65rem; border-radius: 999px; background: var(--tr-chrome-surface); font-size: .8125rem; font-weight: 600; color: var(--tr-chrome-secondary-text); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tr-track-rose); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tr-track-rose) 55%, transparent); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .45rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.features { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }
.feature .icon { display: block; margin-bottom: .75rem; fill: none; stroke: var(--tr-track-rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin-bottom: .35rem; }
.feature p { font-size: .9375rem; }
.ridgeline.still { display: none; }
/* SMIL does not honour reduced motion by itself, so the still frame is a separate drawing. */
@media (prefers-reduced-motion: reduce) { .ridgeline.demo { display: none; } .ridgeline.still { display: block; } }
.callout text { font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, system-ui, sans-serif; fill: var(--tr-chrome-text); }
.callout rect { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .18)); }
.promise { margin-top: 3rem; padding: 1.5rem 1.375rem; border-radius: .75rem; background: var(--tr-earth); }
.promise h2 { margin-top: 0; }
.promise p, .stands p { max-width: 36rem; color: var(--tr-chrome-secondary-text); }
code { font: .875em ui-monospace, "SF Mono", "Roboto Mono", monospace; }
footer { padding-top: 2.5rem; padding-bottom: 4rem; font-size: .8125rem; color: var(--tr-chrome-secondary-text); }
hr { margin: 0 0 1.25rem; border: 0; border-top: 1px solid color-mix(in srgb, var(--tr-hairline) 45%, transparent); }
.attribution { margin-bottom: 1rem; }
.home { display: flex; align-items: center; gap: .625rem; text-decoration: none; }
.doc h1 { margin-bottom: 1.5rem; }
.doc h2 { margin-top: 2.5rem; }
.doc p, .doc ul, .doc blockquote { margin-bottom: 1rem; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: .5rem; }
.doc blockquote { margin-inline: 0; padding: 1rem 1.25rem .25rem; border-radius: .75rem; background: var(--tr-earth); color: var(--tr-chrome-secondary-text); font-size: .9375rem; }
.draft { padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--tr-track-amber); color: var(--tr-chrome-text); font-size: .9375rem; }
.doc-links a { text-underline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cta { margin-top: 1.5rem; padding: .8rem 1.5rem; border: 0; border-radius: 999px; background: var(--tr-track-rose); color: #fff; font: 600 1rem/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / .15); transition: transform .15s ease, box-shadow .15s ease; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--tr-track-rose) 35%, transparent); }
@media (prefers-color-scheme: dark) { .cta { color: #1A1A1C; } }
.sheet { width: min(24rem, calc(100vw - 2rem)); margin: auto; padding: 1.25rem; border: 0; border-radius: 1rem; background: var(--tr-chrome-surface); color: var(--tr-chrome-text); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.sheet::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(2px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sheet h2 { margin: 0; font-size: 1.125rem; }
.close { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--tr-earth); color: var(--tr-chrome-secondary-text); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.stores { display: grid; gap: .5rem; padding: 0; list-style: none; }
.store { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .75rem; background: var(--tr-earth); text-decoration: none; }
a.store:hover { outline: 2px solid var(--tr-track-rose); }
.store .icon { flex: none; fill: none; stroke: var(--tr-track-rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.store span { display: grid; }
.store small { font-size: .8125rem; color: var(--tr-chrome-secondary-text); }
.store.pending { opacity: .75; }