* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--surface); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-reading);
  padding: calc(var(--topbar-height) + env(safe-area-inset-top)) 0 calc(var(--player-height) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
button, input { font: inherit; }
button { color: inherit; }
button, input[type="range"] { touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: .18rem solid var(--focus); outline-offset: .18rem; }

.topbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 3rem 1fr 3rem 3rem;
  align-items: center;
  gap: var(--space-2);
  padding: calc(.45rem + env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) .45rem max(var(--space-3), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(1rem);
}
.identity { min-width: 0; text-align: center; }
#routeButton { grid-column: 1; }
.identity { grid-column: 2; }
#topNextButton { grid-column: 3; }
#themeButton { grid-column: 4; }
.identity__kicker, .utility-label {
  display: block;
  color: var(--ink-muted);
  font: 700 var(--text-xs)/1.2 var(--font-utility);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.identity__title { display: block; overflow: hidden; font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
}
.icon-button:hover { background: var(--surface-sunk); }
.icon-button:disabled { opacity: .28; cursor: default; }
.ui-icon { position: relative; display: inline-block; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.ui-icon--menu::before, .ui-icon--menu::after, .ui-icon--menu { border-top: .12rem solid currentColor; border-bottom: .12rem solid currentColor; }
.ui-icon--menu::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: .12rem solid currentColor; transform: translateY(-50%); }
.ui-icon--next::before, .ui-icon--previous::before { content: ""; position: absolute; width: .48rem; height: .48rem; top: 50%; left: 46%; border-top: .13rem solid currentColor; border-right: .13rem solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ui-icon--previous::before { left: 56%; transform: translate(-50%, -50%) rotate(-135deg); }
.ui-icon--close::before, .ui-icon--close::after { content: ""; position: absolute; top: 50%; left: 8%; width: 84%; border-top: .12rem solid currentColor; transform: rotate(45deg); }
.ui-icon--close::after { transform: rotate(-45deg); }
.ui-icon--theme { border: .12rem solid currentColor; border-radius: 50%; overflow: hidden; }
.ui-icon--theme::before { content: ""; position: absolute; inset: -.1rem 50% -.1rem -.1rem; background: currentColor; }
.ui-icon--location { border: .12rem solid currentColor; border-radius: 50%; }
.ui-icon--location::before, .ui-icon--location::after { content: ""; position: absolute; background: currentColor; }
.ui-icon--location::before { width: .28rem; height: .28rem; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ui-icon--location::after { width: .12rem; height: 1.45rem; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 .16rem var(--surface-raised); z-index: -1; }

.guide { width: min(100%, var(--content-width)); margin: 0 auto; }
.place-view { position: relative; background: var(--surface-sunk); border-bottom: 1px solid var(--line); }
.map-frame, .satellite-frame, .photo-frame { position: relative; margin: 0; overflow: hidden; }
.map-frame { background: #dfe2da; }
.map-canvas { position: relative; width: 100%; }
.map-frame img { display: block; width: 100%; height: auto; }
.photo-frame img { display: block; width: 100%; height: clamp(15rem, 43svh, 22rem); object-fit: cover; }
.photo-frame img { object-position: center; }
.photo-frame figcaption {
  position: static;
  padding: .75rem clamp(1rem, 4vw, 1.4rem);
  background: var(--surface-raised);
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.45;
}
#satelliteMap { width: 100%; height: clamp(20rem, 52svh, 31rem); background: #d8dad3; }
.place-view.is-gps-active #satelliteMap { height: clamp(14rem, 37svh, 23rem); }
.satellite-note { margin: 0; padding: .65rem 1rem; border-top: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-muted); font: 650 var(--text-xs)/1.4 var(--font-utility); }
.leaflet-container { font-family: var(--font-utility); }
.leaflet-control-attribution { font-size: .58rem; }
.satellite-stop-marker { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #424740; color: #fff; box-shadow: 0 .12rem .45rem rgb(0 0 0 / .55); font: 800 .68rem/1 var(--font-utility); }
.satellite-stop-marker.is-current { width: 2.1rem; height: 2.1rem; background: var(--brick); }
.satellite-stop-marker.is-next { background: #1d638f; }
.satellite-user-marker { width: 1.35rem; height: 1.35rem; border: .18rem solid #fff; border-radius: 50%; background: #2679bd; box-shadow: 0 .1rem .45rem rgb(0 0 0 / .65), 0 0 0 .32rem rgb(38 121 189 / .28); }
.view-switch {
  position: relative;
  z-index: 5;
  top: auto;
  left: auto;
  display: flex;
  width: max-content;
  margin: 0 auto;
  padding: .2rem;
  transform: none;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: 0 .2rem .8rem rgb(22 24 21 / .08);
}
.place-view > .view-switch { translate: 0 .55rem; margin-bottom: 1.1rem; }
.view-switch__button {
  min-width: 4.6rem;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font: 700 var(--text-sm)/1 var(--font-utility);
}
.view-switch__button.is-active { background: var(--ink); color: var(--surface-raised); }
.map-status {
  position: absolute;
  right: .8rem;
  top: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .72rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  box-shadow: var(--shadow);
  font: 700 var(--text-xs)/1 var(--font-utility);
  letter-spacing: .05em;
}
.pulse-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--brick) 25%, transparent); }
.location-tools { display: grid; gap: .65rem; padding: .7rem; background: var(--surface-sunk); border-top: 1px solid var(--line); }
.gps-button {
  position: static;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.65rem;
  width: fit-content;
  max-width: 100%;
  padding: .55rem .72rem;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 93%, transparent);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: 750 var(--text-xs)/1.15 var(--font-utility);
  text-align: left;
}
.gps-button[aria-pressed="true"] { background: var(--ink); color: var(--surface-raised); border-color: var(--ink); }
.gps-accuracy, .gps-position { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); }
.gps-accuracy {
  width: var(--gps-accuracy-size, 2rem);
  height: var(--gps-accuracy-size, 2rem);
  border: 1px solid rgb(35 101 157 / .46);
  border-radius: 50%;
  background: rgb(61 139 205 / .15);
}
.gps-position {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border: .18rem solid #fff;
  border-radius: 50%;
  background: #2679bd;
  box-shadow: 0 .1rem .45rem rgb(0 0 0 / .5), 0 0 0 .25rem rgb(38 121 189 / .22);
}
.gps-position__core { width: .3rem; height: .3rem; border-radius: 50%; background: #fff; }
.gps-guidance {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 4rem;
  padding: .6rem .65rem;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface-raised) 95%, transparent);
  box-shadow: 0 .25rem .9rem rgb(15 18 14 / .12);
}
.gps-guidance__arrow {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brick);
  color: #fff;
  transform: rotate(var(--gps-bearing, 0deg));
  transition: transform var(--motion-med);
}
.gps-guidance__arrow::before { content: ""; width: .55rem; height: .55rem; border-top: .15rem solid currentColor; border-left: .15rem solid currentColor; transform: translateY(.13rem) rotate(45deg); }
.gps-guidance__copy { display: grid; min-width: 0; gap: .18rem; }
.gps-guidance__copy strong { font: 800 .82rem/1.2 var(--font-utility); }
.gps-guidance__copy span { overflow: hidden; color: var(--ink-muted); font: 650 .7rem/1.25 var(--font-utility); text-overflow: ellipsis; white-space: nowrap; }
#gpsNextButton { min-height: 2.5rem; padding: .5rem .68rem; border: 0; border-radius: var(--radius-sm); background: var(--field); color: #fff; cursor: pointer; font: 800 .7rem/1 var(--font-utility); }

.stop-card { padding: var(--space-5) clamp(1.15rem, 5vw, 2.6rem) var(--space-4); }
.stop-card__meta { display: flex; align-items: center; gap: .8rem; }
.stop-number {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brick);
  color: #fff;
  font: 700 var(--text-sm)/1 var(--font-utility);
}
.route-thread { height: 1px; flex: 1; background: linear-gradient(90deg, var(--brick), var(--rail)); }
.duration { font: 700 var(--text-xs)/1 var(--font-utility); color: var(--ink-muted); }
.stop-card h1 {
  max-width: 15ch;
  margin: var(--space-4) 0 var(--space-3);
  font: 500 var(--text-lg)/1.06 var(--font-display);
  letter-spacing: -.035em;
}
.recognition {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: .65rem;
  margin: 0 0 var(--space-5);
  padding: 1rem;
  border-left: .24rem solid var(--field);
  background: color-mix(in srgb, var(--field) 9%, var(--surface-raised));
}
.recognition__marker { color: var(--field); font-size: 1.35rem; line-height: 1.35; }
.recognition p { margin: 0; font-size: .98rem; line-height: 1.55; }
.transcript { font-size: var(--text-base); line-height: var(--line-reading); }
.follow-toggle { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; margin: 0 0 1rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; font: 700 var(--text-xs)/1.25 var(--font-utility); }
.follow-toggle__switch { position: relative; width: 2.15rem; height: 1.22rem; flex: 0 0 auto; border-radius: 2rem; background: var(--rail); transition: background var(--motion-fast); }
.follow-toggle__switch::after { content: ""; position: absolute; width: .88rem; height: .88rem; left: .17rem; top: .17rem; border-radius: 50%; background: #fff; box-shadow: 0 .08rem .2rem rgb(0 0 0 / .3); transition: transform var(--motion-fast); }
.follow-toggle[aria-pressed="true"] .follow-toggle__switch { background: var(--field); }
.follow-toggle[aria-pressed="true"] .follow-toggle__switch::after { transform: translateX(.92rem); }
.transcript__sentence {
  display: inline;
  padding: .08em .12em;
  margin: 0 -.03em;
  border-radius: .2em;
  color: var(--ink-muted);
  transition: color var(--motion-fast), background var(--motion-fast);
  scroll-margin-block: calc(var(--topbar-height) + env(safe-area-inset-top) + 1rem) calc(var(--player-height) + env(safe-area-inset-bottom) + 1rem);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.transcript__sentence::after { content: " "; }
.transcript__sentence.is-past { color: color-mix(in srgb, var(--ink) 75%, var(--ink-muted)); }
.transcript__sentence.is-active { background: color-mix(in srgb, var(--brick) 18%, transparent); color: var(--ink); }
.stop-navigation { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stop-navigation button { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 4.6rem; border: 0; background: var(--surface-raised); cursor: pointer; }
.stop-navigation button + button { border-left: 1px solid var(--line); }
.stop-navigation button:disabled { color: var(--ink-muted); opacity: .42; }

.player {
  position: fixed;
  z-index: 25;
  inset: auto 0 0;
  min-height: var(--player-height);
  padding: .65rem max(1rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: 0 -.5rem 1.8rem rgb(10 12 9 / .1);
  backdrop-filter: blur(1rem);
}
.player__progress-row { width: min(100%, var(--content-width)); min-height: 2rem; margin: 0 auto .35rem; display: grid; grid-template-columns: 2.5rem 1fr 3rem; align-items: center; gap: .65rem; font: 700 var(--text-xs)/1 var(--font-utility); color: var(--ink-muted); }
#seek { width: 100%; height: 2.75rem; margin: -.35rem 0; accent-color: var(--brick); cursor: pointer; touch-action: none; }
.player__controls { width: min(100%, var(--content-width)); margin: 0 auto; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; }
.play-button { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; padding-left: .18rem; border: 0; border-radius: 50%; background: var(--brick); color: white; cursor: pointer; box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--brick) 35%, transparent); }
.play-symbol { position: relative; display: block; width: 1rem; height: 1rem; }
.play-symbol::before { content: ""; position: absolute; top: 50%; left: 55%; border-top: .42rem solid transparent; border-bottom: .42rem solid transparent; border-left: .67rem solid currentColor; transform: translate(-50%, -50%); }
.play-button.is-playing { padding-left: 0; }
.play-button.is-playing .play-symbol::before { width: .58rem; height: .86rem; left: 50%; border: 0; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.speed-group { display: flex; align-items: stretch; justify-content: center; min-width: 0; }
.speed-button { min-width: 2.75rem; min-height: 2.75rem; padding: .55rem .35rem; border: 1px solid var(--line); border-right: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font: 700 .72rem/1 var(--font-utility); }
.speed-button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.speed-button:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.speed-button.is-active { background: var(--ink); color: var(--surface-raised); border-color: var(--ink); }
.language-switch { display: flex; padding: .18rem; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.language-switch__button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font: 800 .72rem/1 var(--font-utility); }
.language-switch__button.is-active { background: var(--field); color: white; }

.route-panel { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(90vw, 25rem); padding: max(1rem, env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); transform: translateX(-103%); transition: transform var(--motion-med); background: var(--surface-raised); box-shadow: var(--shadow); overflow: auto; }
.route-panel.is-open { transform: translateX(0); }
.route-panel__head { display: flex; justify-content: space-between; align-items: start; padding: 1rem 1.1rem 1.25rem 1.35rem; border-bottom: 1px solid var(--line); }
.route-panel h2 { margin: .3rem 0 0; font: 500 2rem/1 var(--font-display); }
.route-list__chapter { padding: 1.1rem 1.35rem .55rem; color: var(--ink-muted); font: 800 var(--text-xs)/1.2 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; }
.route-item { width: 100%; min-height: 3.25rem; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .65rem; padding: .72rem 1.35rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
.route-item:hover { background: var(--surface-sunk); }
.route-item.is-active { background: color-mix(in srgb, var(--brick) 12%, transparent); }
.route-item__number { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 700 var(--text-xs)/1 var(--font-utility); }
.route-item.is-active .route-item__number { border-color: var(--brick); background: var(--brick); color: white; }
.route-item__title { font-size: .9rem; line-height: 1.25; }
.route-item__time { color: var(--ink-muted); font: 700 var(--text-xs)/1 var(--font-utility); }
.route-panel__footer { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem 1.35rem; color: var(--ink-muted); font: 700 var(--text-xs)/1 var(--font-utility); }
.route-panel__footer span { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.scrim { position: fixed; z-index: 45; inset: 0; border: 0; background: rgb(0 0 0 / .48); }
.loading { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: var(--surface); font-weight: 700; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(var(--player-height) + 1rem); transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface-raised); box-shadow: var(--shadow); font-size: .88rem; }

@media (min-width: 54rem) {
  body { padding-left: 22rem; }
  .topbar { left: 22rem; }
  .route-panel { width: 22rem; transform: none; z-index: 20; box-shadow: none; border-right: 1px solid var(--line); }
  .route-panel__head .icon-button { display: none; }
  .scrim, #routeButton { display: none; }
  .player { left: 22rem; }
  .guide { box-shadow: 0 0 0 1px var(--line); }
}

@media (max-width: 27rem) {
  .topbar { grid-template-columns: 2.6rem 1fr 2.6rem 2.6rem; gap: .15rem; padding-inline: max(.45rem, env(safe-area-inset-left)); }
  .identity__kicker { font-size: .65rem; letter-spacing: .08em; }
  .identity__title { font-size: .88rem; }
  .player { padding-inline: max(.5rem, env(safe-area-inset-left)); }
  .player__controls { gap: .35rem; grid-template-columns: 2.8rem minmax(0, 1fr) auto; }
  .play-button { width: 2.75rem; height: 2.75rem; }
  .speed-button { flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding-inline: .08rem; font-size: .64rem; }
  .language-switch { padding: .1rem; }
  .language-switch__button { width: 2.25rem; height: 2.75rem; }
  .stop-card { padding-inline: 1rem; }
  .recognition { grid-template-columns: 1.55rem 1fr; padding: .9rem; }
  .gps-button { max-width: 100%; }
  .gps-button #gpsButtonLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-status { padding-inline: .58rem; letter-spacing: 0; }
  .gps-guidance { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .5rem; }
  .gps-guidance__arrow { width: 2.3rem; height: 2.3rem; }
}

@media (orientation: landscape) and (max-height: 35rem) {
  :root { --topbar-height: 3.65rem; --player-height: 6.4rem; }
  .identity__kicker { display: none; }
  .photo-frame img { height: clamp(10rem, 42svh, 13rem); }
  .stop-card { padding-top: 1.4rem; }
  .stop-card h1 { margin-top: 1rem; font-size: clamp(1.65rem, 5vw, 2.65rem); }
  .player { padding-top: .35rem; }
  .player__progress-row { min-height: 1.55rem; margin-bottom: .2rem; }
}

@media (orientation: portrait) and (max-height: 40rem) {
  .photo-frame img { height: 11.5rem; }
}

@media (forced-colors: active) {
  .pulse-dot, .stop-number, .play-button { border: 1px solid ButtonText; }
  .transcript__sentence.is-active { outline: 2px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}