@layer tokens, base, layout, components, pages;
@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: light-dark(#ffffff, #0d1117);
    --bg-subtle: light-dark(#f6f7f9, #11161e);
    --bg-sunken: light-dark(#eef0f3, #0a0d12);
    --surface: light-dark(#ffffff, #151b24);
    --surface-hover: light-dark(#f4f6f8, #1b222d);
    --border: light-dark(#e2e5e9, #252e3b);
    --border-strong: light-dark(#cbd1d8, #364154);
    --text: light-dark(#0e1116, #e8edf3);
    --text-2: light-dark(#454d5a, #b3bdca);
    --text-3: light-dark(#636c7a, #8794a6);
    --accent: light-dark(#0a62c4, #5ba4ff);
    --accent-hover: light-dark(#0850a3, #85bbff);
    --accent-soft: light-dark(#e9f2fd, #142539);
    --on-accent: light-dark(#ffffff, #06111f);
    --good: light-dark(#13773a, #4ade80);
    --good-soft: light-dark(#e6f5eb, #0f2a1b);
    --warn: light-dark(#9a5700, #fbbf24);
    --warn-soft: light-dark(#fff4dc, #2e230b);
    --bad: light-dark(#c42b1c, #ff8a7a);
    --bad-soft: light-dark(#fdecea, #34150f);
    --live: light-dark(#16a34a, #4ade80);
    --heat-0: light-dark(#2f9e44, #51cf66);
    --heat-1: light-dark(#e8a400, #fcc419);
    --heat-2: light-dark(#f76707, #ff922b);
    --heat-3: light-dark(#e03131, #ff6b6b);
    --heat-none: light-dark(#ced4da, #3b4655);
    --map-land: light-dark(#eef1ee, #0f1620);
    --map-water: light-dark(#cfe0ee, #0b2236);
    --map-ink: light-dark(#d7dce2, #222b38);
    --shadow-1: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.4));
    --shadow-2: 0 12px 32px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.5)),
      0 2px 8px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.3));
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-s: 0.875rem;
    --fs-m: 1rem;
    --fs-l: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
    --r-s: 6px;
    --r-m: 10px;
    --r-l: 16px;
    --r-full: 999px;
    --gutter: 16px;
    --page: 1200px;
    --header-h: 60px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  @media (min-width: 768px) {
    :root { --gutter: 24px; --header-h: 64px; }
  }
}
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 100%;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 64px);
  }
  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; font-weight: 700; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: var(--accent); text-underline-offset: 0.18em; }
  a:hover { color: var(--accent-hover); }
  :focus-visible { outline: none; box-shadow: var(--ring); }
  [hidden] { display: none !important; }
  .num, time { font-variant-numeric: tabular-nums; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
  .stack { display: grid; gap: var(--gap, 16px); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 8px); }
  .section { padding-block: 40px; }
  .section + .section { border-top: 1px solid var(--border); }
  @media (min-width: 768px) { .section { padding-block: 56px; } }
  .skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 100;
    padding: 8px 12px; border-radius: var(--r-s);
    background: var(--accent); color: var(--on-accent); font-weight: 600;
  }
  .skip-link:focus { top: 12px; }
}
@layer components {
  .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .icon--s { width: 16px; height: 16px; }
  .icon--xs { width: 13px; height: 13px; stroke-width: 2.5; }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
  .brand:hover { color: var(--text); }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 1.0625rem; }
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
  .site-nav { display: none; gap: 4px; }
  .site-nav a {
    padding: 8px 12px; border-radius: var(--r-full);
    color: var(--text-2); font-size: var(--fs-s); font-weight: 600; text-decoration: none;
  }
  .site-nav a:hover { color: var(--text); background: var(--surface-hover); }
  .site-nav a[aria-current="page"] { color: var(--text); background: var(--bg-sunken); }
  .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  @media (min-width: 840px) { .site-nav { display: flex; } .menu { display: none; } }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border-radius: var(--r-full);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font-size: var(--fs-s); font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
  }
  .btn:hover { background: var(--surface-hover); color: var(--text); }
  .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
  .btn--ghost { border-color: transparent; background: transparent; }
  .btn--icon { width: 40px; padding: 0; }
  .btn--l { min-height: 48px; padding: 0 22px; font-size: var(--fs-m); }
  .btn--l.btn--icon { width: 48px; padding: 0; }
  .btn--block { width: 100%; }
  .btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
  .btn[aria-pressed="true"] .icon { fill: currentColor; }
  @media (pointer: coarse) { .btn { min-height: 44px; } .btn--icon { width: 44px; } }
  .search-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 0 12px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-3);
    font-size: var(--fs-s); text-align: left;
  }
  .search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
  .search-trigger__label { display: none; }
  .search-trigger--wide { width: 100%; }
  .search-trigger--wide .search-trigger__label { display: inline; }
  .search-trigger--hero {
    width: 100%; min-height: 58px; padding: 0 10px 0 18px; border-radius: var(--r-l);
    background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-1); font-size: var(--fs-m); color: var(--text-3);
  }
  .search-trigger--hero .search-trigger__label { display: inline; flex: 1; }
  .search-trigger--hero:hover { border-color: var(--accent); }
  kbd {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
    border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
    color: var(--text-3); font: 600 0.6875rem/1 var(--font);
  }
  .search-trigger kbd { margin-left: auto; }
  @media (min-width: 640px) { .search-trigger { min-width: 220px; } .search-trigger__label { display: inline; } }
  @media (pointer: coarse) { .search-trigger kbd { display: none; } }
  .badge {
    --c: var(--text-2); --t: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; padding: 0 6px; border-radius: var(--r-s);
    background: var(--c); color: var(--t);
    font-size: 0.75rem; font-weight: 750; letter-spacing: 0.01em; line-height: 1;
    white-space: nowrap; flex: none;
  }
  .badge--m { min-width: 40px; height: 28px; padding: 0 8px; font-size: 0.875rem; border-radius: 7px; }
  .badge--l { min-width: 56px; height: 44px; padding: 0 12px; font-size: 1.25rem; border-radius: var(--r-m); }
  .badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; border-radius: 50%; }
  .status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-s); font-weight: 600; color: var(--text-2); white-space: nowrap;
  }
  .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
  .status--good { color: var(--good); }
  .status--warn { color: var(--warn); }
  .status--bad { color: var(--bad); }
  .status--idle { color: var(--text-3); }
  .live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; }
  .live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
  .live__dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--live); opacity: 0; animation: live-ping 2s var(--ease) infinite;
  }
  @keyframes live-ping { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    min-height: 36px; padding: 0 12px 0 6px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: var(--fs-s); font-weight: 600; text-decoration: none;
  }
  .chip:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
  .chip--plain { padding-inline: 14px; }
  .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  .chip .badge { height: 24px; border-radius: var(--r-full); }
  @media (pointer: coarse) { .chip { min-height: 40px; } }
  .facts { display: flex; flex-wrap: wrap; gap: 8px; }
  .fact {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 12px; border-radius: var(--r-full);
    background: var(--bg-sunken); color: var(--text-2); font-size: var(--fs-s); font-weight: 600;
  }
  .fact .icon { color: var(--text-3); }
  .fact.status { padding-left: 12px; background: var(--good-soft); }
  .fact.status--warn { background: var(--warn-soft); }
  .segmented {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 3px; border-radius: var(--r-full); background: var(--bg-sunken);
    width: 100%; max-width: 560px;
  }
  .segmented button {
    min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-full);
    background: transparent; color: var(--text-2); font-size: var(--fs-s); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] {
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
  }
  .segmented--radio { margin: 0; border: 0; min-width: 0; }
  .segmented--radio label {
    display: block; text-align: center; line-height: 36px; min-height: 36px; padding: 0 12px; border-radius: var(--r-full);
    color: var(--text-2); font-size: var(--fs-s); font-weight: 600; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .segmented--radio input:checked + label { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .segmented--radio input:focus-visible + label { box-shadow: var(--ring); }
  @media (pointer: coarse) { .segmented button, .segmented--radio label { min-height: 40px; } }
  .card { border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); }
  .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
  .card__title { font-size: var(--fs-m); font-weight: 700; }
  .card__body { padding: 12px 20px 20px; }
  .card__foot { padding: 12px 20px; border-top: 1px solid var(--border); }
  .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .section-head h2 { font-size: var(--fs-2xl); }
  .section-head p { margin-top: 6px; color: var(--text-2); max-width: 60ch; }
  .link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .link-arrow:hover { text-decoration: underline; }
  .rows { list-style: none; margin: 0; padding: 0; }
  .row {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 8px 20px;
    color: var(--text); text-decoration: none;
  }
  .rows > li + li > .row, .rows > li + li > .row-static { border-top: 1px solid var(--border); }
  a.row:hover, button.row:hover { background: var(--surface-hover); color: var(--text); }
  button.row { width: 100%; border: 0; background: transparent; text-align: left; }
  .row__main { flex: 1; min-width: 0; }
  .row__title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row__meta { display: block; color: var(--text-3); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row__title .row__meta { display: inline; font-weight: 500; }
  .row__end { display: flex; align-items: center; gap: 12px; flex: none; color: var(--text-3); font-size: var(--fs-s); }
  .row__end .icon { color: var(--text-3); }
  .row-static { display: flex; gap: 12px; padding: 14px 20px; }
  .row > .badge--m { min-width: 52px; }
  .alert-kind {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-m); flex: none;
    background: var(--warn-soft); color: var(--warn);
  }
  .alert-kind--closure { background: var(--bad-soft); color: var(--bad); }
  .alert-kind--notice, .alert-kind--stop { background: var(--accent-soft); color: var(--accent); }
  .alert-text { min-width: 0; flex: 1; }
  .alert-text strong { display: block; font-weight: 600; }
  .alert-text p { color: var(--text-2); font-size: var(--fs-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .alert-text .cluster { margin-top: 8px; --gap: 6px; }
  .callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: var(--good-soft); color: var(--good); font-weight: 600; font-size: var(--fs-s); }
  .callout p { color: var(--text-2); font-weight: 400; margin-top: 2px; }
  .callout--info { background: var(--accent-soft); color: var(--accent); }
  .callout--info span { color: var(--text-2); font-weight: 500; }
  .card__lede { padding-bottom: 4px; color: var(--text-2); font-size: var(--fs-s); }
  .board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; color: var(--text-2); font-size: var(--fs-s); }
  .board-foot .icon { color: var(--text-3); }
  .board-foot .link-arrow { margin-left: auto; }
  .kv { display: grid; gap: 0; }
  .kv div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: var(--fs-s); }
  .kv div:first-child { border-top: 0; padding-top: 0; }
  .kv dt { color: var(--text-2); }
  .kv dd { font-weight: 600; text-align: right; }
  .faq { border-top: 1px solid var(--border); }
  .faq details { border-bottom: 1px solid var(--border); }
  .faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .icon { color: var(--text-3); transition: transform 0.2s var(--ease); }
  .faq details[open] summary .icon { transform: rotate(180deg); }
  .faq p { padding: 0 0 16px; color: var(--text-2); max-width: 70ch; }
  .menu { position: relative; }
  .menu > summary { list-style: none; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
    display: grid; min-width: 220px; padding: 8px;
    border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2);
  }
  .menu__panel a { padding: 10px 12px; border-radius: var(--r-m); color: var(--text); text-decoration: none; font-weight: 600; }
  .menu__panel a:hover { background: var(--surface-hover); }
  .search {
    width: min(100% - 24px, 640px); max-height: min(78dvh, 640px);
    margin: 10dvh auto auto; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-l);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .search[open] { display: flex; flex-direction: column; }
  .search::backdrop { background: rgb(8 12 18 / 0.45); backdrop-filter: blur(2px); }
  .search__bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
  .search__bar .icon { color: var(--text-3); }
  .search__bar input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: var(--fs-l); outline: none; }
  .search__bar input::-webkit-search-cancel-button { display: none; }
  .search__body { overflow-y: auto; padding: 8px; }
  .search__group { padding: 10px 12px 6px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .search__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-radius: var(--r-m); color: var(--text); text-decoration: none; }
  .search__item[aria-selected="true"], .search__item:hover { background: var(--surface-hover); color: var(--text); }
  .search__item small { color: var(--text-3); margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; }
  .search__empty { padding: 24px 12px; color: var(--text-3); text-align: center; }
  @media (max-width: 639px) { .search { margin-top: 12px; max-height: calc(100dvh - 24px); } }
  [data-theme-toggle] .icon { display: none; }
  :root:not([data-theme]) [data-theme-toggle] .i-system,
  :root[data-theme="light"] [data-theme-toggle] .i-light,
  :root[data-theme="dark"] [data-theme-toggle] .i-dark { display: block; }
  .site-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); padding-block: 40px 32px; color: var(--text-2); font-size: var(--fs-s); }
  .site-footer__grid { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__about { grid-column: 1 / -1; max-width: 42ch; }
  .site-footer__about p { margin-top: 10px; }
  .site-footer h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 10px; }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: 8px; }
  .site-footer a { color: var(--text-2); text-decoration: none; }
  .site-footer a:hover { color: var(--text); text-decoration: underline; }
  .site-footer__base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--text-3); font-size: var(--fs-xs); }
  @media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
    .site-footer__about { grid-column: auto; }
  }
  .proto-note { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
  .net-svg { width: 100%; height: 100%; }
  .net-svg .net-bg { fill: var(--map-land); }
  .net-svg .net-grid { stroke: var(--map-ink); stroke-width: 1; }
  .net-svg .net-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .net-svg .net-station { fill: var(--surface); stroke: var(--text-2); }
  .net-svg .net-bus { fill: var(--text-3); opacity: 0.5; }
  .net-svg .net-veh { stroke: var(--surface); stroke-width: 2.5; }
  .net-svg .net-place {
    fill: var(--text-2); font: 600 19px/1 var(--font); letter-spacing: 0.02em;
    paint-order: stroke; stroke: var(--map-land); stroke-width: 5px; stroke-linejoin: round;
  }
}
@layer pages {
  .hero { padding-block: 28px 40px; }
  .hero__grid { display: grid; gap: 28px; align-items: start; }
  .hero__lede { display: grid; gap: 16px; }
  .hero__lede { min-width: 0; }
  .hero__lede > .live { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  .hero h1 span { color: var(--text-3); }
  .hero__sub { color: var(--text-2); font-size: var(--fs-l); max-width: 46ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (min-width: 960px) {
    .hero { padding-block: 48px 56px; }
    .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
    .hero .chips { flex-wrap: wrap; overflow: visible; }
    .hero .preview { aspect-ratio: 1 / 1; max-height: 560px; }
  }
  .preview { position: relative; display: block; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--map-land); color: var(--text); text-decoration: none; }
  .preview:hover { color: var(--text); border-color: var(--border-strong); }
  .preview__overlay { position: absolute; inset: auto 12px 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-1); }
  .preview__overlay strong { display: block; font-size: var(--fs-m); }
  .preview__overlay .live { margin-top: 2px; }
  .preview__badge { position: absolute; top: 12px; left: 12px; }
  .board { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
  .board__item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; background: var(--surface); color: var(--text); text-decoration: none; }
  .board__item:hover { background: var(--surface-hover); color: var(--text); }
  .board__item .row__main { display: grid; gap: 2px; }
  .board__item .row__title { white-space: normal; line-height: 1.25; }
  .board__count { color: var(--text-3); font-size: var(--fs-s); white-space: nowrap; }
  @media (min-width: 640px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .split { display: grid; gap: 24px; }
  @media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
  .tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  @media (min-width: 960px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1180px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .tile { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; }
  .tile:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
  .tile__badges { display: flex; gap: 6px; flex-wrap: wrap; }
  .tile strong { font-size: var(--fs-l); }
  .tile p { color: var(--text-2); font-size: var(--fs-s); }
  .prose { display: grid; gap: 14px; color: var(--text-2); max-width: 68ch; }
  .prose h2 { color: var(--text); font-size: var(--fs-xl); }
  .empty { display: grid; justify-items: start; gap: 10px; padding: 20px; color: var(--text-2); font-size: var(--fs-s); }
  .empty .icon { color: var(--text-3); }
  .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text-3); font-size: var(--fs-s); }
  .crumbs a { color: var(--text-2); text-decoration: none; }
  .crumbs a:hover { color: var(--text); text-decoration: underline; }
  .route-head { padding-block: 20px 20px; display: grid; gap: 16px; }
  .route-head__top { display: flex; gap: 16px; align-items: center; }
  .route-head h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  .route-head__sub { color: var(--text-2); }
  .route-head__terminals { color: var(--text); font-weight: 600; }
  .route-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  @media (min-width: 960px) {
    .route-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: 32px 24px; }
    .route-head__actions { justify-content: flex-end; }
  }
  .route-bar {
    position: sticky; top: var(--header-h); z-index: 30;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-block: 1px solid var(--border);
  }
  .route-bar__inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
  .route-bar .live { margin-left: auto; }
  @media (max-width: 639px) { .route-bar .live { display: none; } }
  .route-layout { display: grid; gap: 24px; padding-block: 24px 48px; }
  @media (min-width: 1024px) {
    .route-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
    .route-aside { position: sticky; top: calc(var(--header-h) + 76px); }
  }
  .route-aside { display: grid; gap: 16px; }
  .route-main, .route-aside, .route-aside > * { min-width: 0; }
  @media (max-width: 420px) {
    :lang(es) .route-head__actions [data-favorite] { width: 48px; padding: 0; }
    :lang(es) .route-head__actions [data-favorite] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .diagram { --row: 64px; --x: 28px; list-style: none; margin: 0; padding: 0; position: relative; }
  .diagram__row { position: relative; height: var(--row); }
  .diagram__row::before, .diagram__row::after {
    content: ""; position: absolute; left: calc(var(--x) - 3px); width: 6px;
    background: var(--line); transition: background-color 0.2s var(--ease);
  }
  .diagram__row::before { top: 0; height: 50%; }
  .diagram__row::after { top: 50%; bottom: 0; }
  .diagram__row:first-child::before, .diagram__row:last-child::after { display: none; }
  .diagram__row.in-gap::before, .diagram__row.out-gap::after {
    background: repeating-linear-gradient(to bottom, var(--warn) 0 7px, transparent 7px 12px);
  }
  .diagram__row.in-bunch::before, .diagram__row.out-bunch::after { background: var(--warn); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.in-heat-0)::before,
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.out-heat-0)::after { background: var(--heat-0); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.in-heat-1)::before,
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.out-heat-1)::after { background: var(--heat-1); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.in-heat-2)::before,
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.out-heat-2)::after { background: var(--heat-2); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.in-heat-3)::before,
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.out-heat-3)::after { background: var(--heat-3); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.in-heat-none)::before,
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__row:is(.out-heat-none)::after { background: var(--heat-none); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .diagram__node { border-color: var(--text-2); }
  .diagram__link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
    height: 100%; margin-left: 52px; padding: 0 12px; border-radius: var(--r-m);
    color: var(--text); text-decoration: none;
  }
  .diagram__link:hover { background: var(--surface-hover); color: var(--text); }
  .route-page .diagram[data-index="1"],
  .route-page:has(#dir-1:checked) .diagram[data-index="0"] { display: none; }
  .route-page:has(#dir-1:checked) .diagram[data-index="1"] { display: block; }
  .diagram__node {
    position: absolute; left: var(--x); top: 50%; z-index: 1;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg); border: 3px solid var(--line); transform: translate(-50%, -50%);
  }
  .diagram__row--transfer .diagram__node { width: 16px; height: 16px; border: 2.5px solid var(--text); box-shadow: 0 0 0 2px var(--bg); }
  .diagram__row--end .diagram__node { width: 20px; height: 20px; background: var(--line); border-color: var(--bg); box-shadow: 0 0 0 2px var(--line); }
  .diagram__name { display: grid; gap: 3px; min-width: 0; }
  .diagram__name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .diagram__meta { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; }
  .diagram__meta .badge { height: 18px; min-width: 22px; padding: 0 5px; font-size: 0.6875rem; border-radius: 5px; }
  .diagram__meta span + span { margin-left: 4px; }
  .diagram__train {
    position: absolute; z-index: 2; left: var(--x);
    top: calc(50% - (1 - var(--p)) * var(--row));
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--line); color: #fff; border: 2.5px solid var(--bg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
    transform: translate(-50%, -50%);
  }
  .diagram__train .icon { width: 14px; height: 14px; stroke-width: 2.4; }
  .diagram__train:hover, .diagram__train:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 35%, transparent); }
  .diagram__tip {
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    padding: 4px 8px; border-radius: var(--r-s); background: var(--text); color: var(--bg);
    font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 0.15s var(--ease);
  }
  .diagram__train:hover .diagram__tip, .diagram__train:focus .diagram__tip { opacity: 1; }
  a.diagram__train { text-decoration: none; transition: top 1s linear, box-shadow 0.15s var(--ease); }
  a.diagram__train:hover { color: #fff; }
  .diagram__ghost {
    position: absolute; z-index: 1; left: var(--x);
    top: calc(50% - (1 - var(--p)) * var(--row));
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    border: 2px dashed var(--text-3); background: var(--bg); color: var(--text-3);
    transform: translate(-50%, -50%); cursor: help;
  }
  .diagram__ghost .icon { width: 13px; height: 13px; }
  .diagram__flag, .diagram__alert {
    display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px;
    font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
  }
  .diagram__flag { background: var(--warn-soft); color: var(--warn); cursor: help; }
  .diagram__alert { background: var(--bad-soft); color: var(--bad); }
  .diagram__meta .diagram__flag + span, .diagram__meta span + .diagram__flag { margin-left: 2px; }
  .stale-banner, .preview-banner {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 10px 14px;
    border-radius: var(--r-m); font-size: var(--fs-s);
  }
  .stale-banner { display: none; background: var(--warn-soft); color: var(--warn); }
  html.is-stale .stale-banner { display: flex; }
  html.is-stale .eta__first.is-live { color: var(--text-3); }
  .preview-banner { background: var(--accent-soft); color: var(--accent); }
  .stale-banner span, .preview-banner span { color: var(--text-2); }
  .stale-banner strong, .preview-banner strong { color: inherit; }
  .anomalies { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
  .anomalies:empty { display: none; }
  .anomaly { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s); font-weight: 600; }
  .anomaly span { color: var(--text-2); font-weight: 500; }
  .anomaly--ghost { background: var(--bg-sunken); color: var(--text-2); }
  .heat-legend { display: none; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; color: var(--text-3); font-size: var(--fs-xs); }
  :is(.route-page:has(#heat-toggle:checked), .show-heat) .heat-legend { display: flex; }
  .heat-scale { display: inline-flex; align-items: center; gap: 6px; }
  .heat-scale i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-left: 4px; }
  .heat-0 { background: var(--heat-0); } .heat-1 { background: var(--heat-1); } .heat-2 { background: var(--heat-2); }
  .heat-3 { background: var(--heat-3); } .heat-none { background: var(--heat-none); }
  .chip--toggle { cursor: pointer; gap: 6px; }
  .chip--toggle:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--bg); }
  .chip--toggle:has(input:focus-visible) { box-shadow: var(--ring); }
  .legend .is-ghost { color: var(--text-2); }
  @media (max-width: 639px) {
    .route-bar .chip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .route-bar .chip--toggle { padding: 0 11px; }
    .route-bar .dir-to { display: none; }
    .route-bar__inner { gap: 10px; }
  }
  .eta { display: grid; justify-items: end; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .eta__first { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-m); color: var(--text); }
  .eta__first.is-live { color: var(--good); }
  .eta__first.is-sched { color: var(--text-3); font-weight: 600; }
  .eta__first.is-ghost { color: var(--text-3); font-weight: 600; cursor: help; }
  .eta__note { color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
  .eta__next { color: var(--text-3); font-size: var(--fs-xs); }
  .eta__none { color: var(--text-3); font-size: var(--fs-s); }
  .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--text-3); font-size: var(--fs-xs); }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .legend .is-live { color: var(--good); font-weight: 700; }
  .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--text); background: var(--bg); }
  .trains .row { padding-inline: 20px; }
  .train-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line, var(--text-2)); color: #fff; flex: none; }
  .train-dot .icon { width: 14px; height: 14px; }
  .mini-map { display: block; aspect-ratio: 16 / 11; border-radius: var(--r-m); overflow: hidden; background: var(--map-land); }
  .mini-map:hover { outline: 2px solid var(--border-strong); outline-offset: 2px; }
  .periods { display: grid; gap: 0; }
  .periods div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: var(--fs-s); }
  .periods div:first-child { border-top: 0; padding-top: 0; }
  .periods dt { color: var(--text-2); }
  .periods dd { font-weight: 600; }
  .tt-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
  .field { display: grid; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
  .field select {
    min-height: 44px; min-width: 240px; padding: 0 40px 0 14px; border-radius: var(--r-m);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
  }
  .hours { border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
  @media (min-width: 900px) {
    .hours { columns: 2; column-gap: 0; column-rule: 1px solid var(--border); }
    .hours__row { break-inside: avoid; }
  }
  .hours__row { display: grid; grid-template-columns: 76px 1fr; border-top: 1px solid var(--border); }
  .hours__row:first-child { border-top: 0; }
  .hours__h { padding: 10px 14px; background: var(--bg-subtle); color: var(--text-2); font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; }
  .hours__m { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
  .hours__row.is-past { color: var(--text-3); }
  .hours__row.is-now .hours__h { background: var(--accent-soft); color: var(--accent); }
  .hours__m .is-next { color: var(--accent); font-weight: 700; }
  .skeleton { border-radius: var(--r-l); background: linear-gradient(90deg, var(--bg-sunken), var(--bg-subtle), var(--bg-sunken)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; min-height: 240px; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .connections { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .stub { padding-block: 72px; display: grid; gap: 16px; justify-items: start; max-width: 60ch; }
  .stub h1 { font-size: var(--fs-3xl); }
  .stub p { color: var(--text-2); }
  .app-body { overflow: hidden; height: 100dvh; }
  .app { position: relative; height: 100dvh; display: grid; grid-template-columns: 1fr; }
  .app-map { position: relative; overflow: hidden; background: var(--map-land); }
  .app-map__sketch, .app-map__canvas { position: absolute; inset: 0; }
  .app-map__sketch { transition: opacity 0.4s var(--ease); }
  .app-map.is-ready .app-map__sketch { opacity: 0; pointer-events: none; }
  .app-map__canvas { opacity: 0; transition: opacity 0.4s var(--ease); }
  #map-canvas { width: 100%; height: 100%; }
  .app-map.is-ready .app-map__canvas { opacity: 1; }
  .map-controls { position: absolute; z-index: 5; right: 12px; top: calc(76px + env(safe-area-inset-top)); display: grid; gap: 8px; }
  .map-controls__group { display: grid; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
  .map-controls__group .btn { border: 0; border-radius: 0; background: var(--surface); }
  .map-controls__group .btn + .btn { border-top: 1px solid var(--border); }
  .map-controls__group .btn:hover { background: var(--surface-hover); }
  .layers {
    position: absolute; z-index: 6; right: 64px; top: calc(76px + env(safe-area-inset-top)); width: 240px; padding: 12px;
    border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2); border: 1px solid var(--border);
  }
  .layers h2 { font-size: var(--fs-s); margin: 4px 4px 8px; }
  .layers label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border-radius: var(--r-s); font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
  .layers label:hover { background: var(--surface-hover); }
  .layers input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
  .layers label span:last-child { margin-left: auto; color: var(--text-3); font-weight: 500; }
  .map-status {
    position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--peek, 0px) + 12px);
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; white-space: nowrap;
    border-radius: var(--r-full); background: var(--surface); box-shadow: var(--shadow-2); font-size: var(--fs-xs);
  }
  .app-top {
    position: absolute; z-index: 10; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top));
    display: flex; gap: 8px; align-items: center;
  }
  .app-top .search-trigger { flex: 1; min-height: 48px; background: var(--surface); border-color: transparent; box-shadow: var(--shadow-2); }
  .app-top .search-trigger__label { display: inline; }
  .app-top .brand-chip { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--shadow-2); flex: none; }
  .sheet {
    --peek: 214px;
    position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
    height: calc(100dvh - 84px - env(safe-area-inset-top));
    display: flex; flex-direction: column;
    background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.5));
    transform: translateY(calc(100% - var(--peek)));
    transition: transform 0.32s var(--ease);
    touch-action: none;
  }
  .sheet[data-detent="half"] { transform: translateY(45%); }
  .sheet[data-detent="full"] { transform: translateY(0); }
  .sheet.is-dragging { transition: none; }
  .sheet__view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .sheet__grab { display: grid; place-items: center; height: 22px; flex: none; cursor: grab; border: 0; background: transparent; width: 100%; padding: 0; }
  .sheet__grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); }
  .sheet__head { display: none; }
  .sheet__tabs { padding: 0 16px 12px; flex: none; }
  .sheet__tabs .segmented { max-width: none; }
  .sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: 24px; }
  .sheet__foot { display: none; }
  .sheet .rows .row { padding-inline: 16px; }
  .sheet__group { padding: 14px 16px 6px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; display: flex; justify-content: space-between; }
  .sheet__filters { padding: 0 16px 4px; }
  .sheet__panel-pad { padding: 0 16px; }
  .rv-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 16px 12px; }
  .rv-head h2 { font-size: var(--fs-xl); }
  .rv-head p { color: var(--text-2); font-size: var(--fs-s); }
  .rv-facts { padding: 0 16px 12px; }
  .rv-dir { padding: 0 16px 8px; }
  .rv-actions { display: flex; gap: 8px; padding: 4px 16px 12px; }
  .rv-actions .btn { flex: 1; }
  .sheet .diagram { --row: 56px; padding: 4px 4px 0; }
  .toast {
    position: absolute; z-index: 30; left: 50%; top: calc(76px + env(safe-area-inset-top)); transform: translateX(-50%);
    max-width: calc(100% - 32px); padding: 10px 14px; border-radius: var(--r-m);
    background: var(--text); color: var(--bg); font-size: var(--fs-s); font-weight: 600; box-shadow: var(--shadow-2);
  }
  .veh-pop { display: flex; gap: 10px; align-items: flex-start; font: 500 var(--fs-s)/1.35 var(--font); color: var(--text); }
  .veh-pop strong { display: block; }
  .veh-pop span:not(.badge) { display: block; color: var(--text-2); font-size: var(--fs-xs); }
  .veh-pop__follow { display: inline-block; margin-top: 6px; font-weight: 700; font-size: var(--fs-s); text-decoration: none; }
  .maplibregl-popup-content { background: var(--surface) !important; border-radius: var(--r-m) !important; box-shadow: var(--shadow-2) !important; padding: 10px 12px !important; }
  .maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
  .maplibregl-ctrl-attrib { font-size: 10px; }
  @media (max-width: 899px) {
    .app-map { --peek: 214px; }
    .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: 214px; }
  }
  @media (min-width: 900px) {
    .app { grid-template-columns: 400px 1fr; }
    .toast { top: 16px; }
    .app-top { display: none; }
    .sheet {
      position: relative; grid-column: 1; grid-row: 1; height: 100dvh;
      transform: none !important; border-radius: 0; box-shadow: none;
      border-right: 1px solid var(--border); touch-action: auto;
    }
    .sheet__grab { display: none; }
    .sheet__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; flex: none; }
    .sheet__head .search-trigger { flex: 1; min-width: 0; }
    .sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 10px 16px; border-top: 1px solid var(--border); }
    .app-map { grid-column: 2; grid-row: 1; }
    .map-controls, .layers { top: 16px; }
    .map-controls { right: 16px; }
    .layers { right: 68px; }
    .map-status { bottom: 16px; }
  }
  .lang-switch { gap: 6px; padding: 0 10px; }
  .lang-switch--icon span, .lang-switch--icon { padding: 0; }
  .lang-switch--icon span { display: none; }
  .sheet__foot .live { flex: 1; min-width: 0; white-space: normal; flex-wrap: wrap; }
  .sheet__foot .cluster { flex: none; flex-wrap: nowrap; }
  @media (max-width: 639px) { .site-header .lang-switch span { display: none; } .site-header .lang-switch { width: 40px; padding: 0; } }
  .layers__note { margin: 6px 6px 2px; color: var(--text-3); font-size: var(--fs-xs); }
  .layers label .icon { color: var(--heat-2); }
  .replay {
    position: absolute; z-index: 7; left: 12px; right: 12px; bottom: calc(var(--peek, 0px) + 12px);
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2); border: 1px solid var(--border);
  }
  .replay__track { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .replay__labels { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
  .replay__labels strong { color: var(--text); font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
  .replay input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
  .replay__speed { display: flex; gap: 4px; }
  .replay__speed button { min-height: 32px; padding: 0 8px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
  .replay__speed button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  [data-replay-play] .i-pause, .replay.is-playing [data-replay-play] .i-play { display: none; }
  .replay.is-playing [data-replay-play] .i-pause { display: block; }
  .app.is-replay .map-status { display: none; }
  .app.is-replay [data-replay-toggle] { color: var(--accent); background: var(--accent-soft); }
  @media (max-width: 639px) { .replay__speed button:not([aria-pressed="true"]) { display: none; } .replay { gap: 8px; } }
  @media (min-width: 900px) { .replay { left: 24px; right: 84px; bottom: 16px; } }
}
@layer pages {
  .follow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 16px 56px; }
  .follow-view, .follow-picker, .follow-picker__grid, .follow-grid, .follow-side { grid-template-columns: minmax(0, 1fr); }
  .follow-view, .follow-missing, .follow-stale { display: none; }
  .follow[data-mode="train"] .follow-view { display: grid; gap: 16px; }
  .follow[data-mode="train"] .follow-picker,
  .follow[data-mode="missing"] .follow-picker { display: none; }
  .follow[data-mode="missing"] .follow-missing { display: block; }
  html.is-stale .follow[data-mode="train"] .follow-stale { display: flex; }
  .follow-stale {
    align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m);
    background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s);
  }
  .follow-stale span { color: var(--text-2); }
  .follow-stale strong { color: var(--warn); }
  .follow-picker { display: grid; gap: 20px; }
  .follow-picker__head { display: grid; gap: 8px; padding-top: 8px; }
  .follow-picker__head h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  .follow-picker__head p { color: var(--text-2); font-size: var(--fs-l); max-width: 52ch; }
  .follow-picker__grid { display: grid; gap: 16px; }
  .follow-line .card__head { padding-bottom: 8px; }
  .follow-line .card__title { font-size: var(--fs-l); }
  .follow-line .rows { padding-bottom: 6px; }
  .follow-line .row, .follow-line .row-static { padding-inline: 20px; }
  @media (min-width: 900px) {
    .follow-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
  .follow-head { display: grid; gap: 10px; padding: 18px 20px 20px; }
  .follow-head__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .follow-head__mode { color: var(--text-2); font-size: var(--fs-s); font-weight: 600; }
  .follow-head__age { margin-left: auto; }
  .follow-head__title { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
  .follow-head__next { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
  .follow-head__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .follow-head__speed { color: var(--text-3); font-size: var(--fs-s); }
  .follow-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 2px; }
  .follow-progress__bar { height: 8px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
  .follow-progress__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1s linear; }
  .follow-progress__label { color: var(--text-2); font-size: var(--fs-s); font-weight: 600; }
  .follow-skeleton { display: inline-block; width: 60%; height: 0.9em; border-radius: var(--r-s); background: var(--bg-sunken); vertical-align: middle; }
  .follow-skeleton--title { width: 85%; }
  .follow-grid { display: grid; gap: 16px; }
  .follow-side { display: grid; gap: 16px; order: -1; align-content: start; }
  @media (min-width: 960px) {
    .follow-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
    .follow-side { order: 0; position: sticky; top: calc(var(--header-h) + 16px); }
  }
  .follow-trip .card__head { padding-bottom: 4px; }
  .follow-earlier { min-height: 32px; padding: 0 10px; color: var(--accent); font-size: var(--fs-s); }
  .ftl { --row: 56px; --x: 30px; position: relative; list-style: none; margin: 0; padding: 4px 0 14px; }
  .ftl__row {
    position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center;
    height: var(--row); padding-right: 16px;
  }
  .ftl__rail {
    position: absolute; z-index: 0; left: calc(var(--x) - 3px); width: 6px; border-radius: 3px;
    top: calc(4px + var(--row) / 2); bottom: calc(14px + var(--row) / 2);
    background: color-mix(in srgb, var(--line) 28%, var(--surface));
  }
  .ftl__done {
    position: absolute; left: 0; right: 0; top: 0; border-radius: 3px;
    height: calc(var(--row) * var(--pos)); background: var(--line); transition: height 1s linear;
  }
  .ftl__node {
    position: absolute; z-index: 1; left: var(--x); top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--line); transform: translate(-50%, -50%);
  }
  .ftl__row.is-passed .ftl__node { width: 10px; height: 10px; background: var(--line); border-color: var(--line); }
  .ftl__row.is-transfer .ftl__node { width: 16px; height: 16px; border: 2.5px solid var(--text); }
  .ftl__row.is-passed.is-transfer .ftl__node { background: var(--text-3); border-color: var(--text-3); }
  .ftl__row.is-end .ftl__node { width: 18px; height: 18px; background: var(--line); border-color: var(--surface); box-shadow: 0 0 0 2px var(--line); }
  .ftl__row.is-picked .ftl__node {
    width: 22px; height: 22px; background: var(--accent); border: 3px solid var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .ftl__train {
    position: absolute; z-index: 2; left: var(--x);
    top: calc(4px + var(--row) / 2 + var(--row) * var(--pos));
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--line); color: #fff; border: 3px solid var(--surface);
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.28);
    transform: translate(-50%, -50%); transition: top 1s linear;
  }
  .ftl__train .icon { width: 16px; height: 16px; stroke-width: 2.4; }
  .ftl__train::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--line); opacity: 0; animation: live-ping 2.2s var(--ease) infinite;
  }
  html.is-stale .ftl__train { filter: grayscale(1); opacity: 0.6; }
  html.is-stale .ftl__train::after { animation: none; }
  .ftl__stop {
    grid-column: 2; display: grid; gap: 3px; min-width: 0; padding: 6px 10px; border: 0; border-radius: var(--r-m);
    background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
  }
  .ftl__stop:hover:not(:disabled) { background: var(--surface-hover); }
  .ftl__stop:disabled { cursor: default; }
  .ftl__name { display: block; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ftl__name .icon { display: inline-block; margin-right: 6px; vertical-align: -2px; color: var(--accent); }
  .ftl__row.is-passed .ftl__name { color: var(--text-3); font-weight: 500; }
  .ftl__row.is-next .ftl__name { font-weight: 750; }
  .ftl__row.is-picked .ftl__name { color: var(--accent); }
  .ftl__meta { display: flex; gap: 4px; }
  .ftl__meta .badge { height: 18px; min-width: 22px; padding: 0 5px; font-size: 0.6875rem; border-radius: 5px; }
  .ftl__time { grid-column: 3; display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ftl__time strong { font-weight: 700; }
  .ftl__time small { color: var(--text-3); font-size: var(--fs-xs); }
  .ftl__row.is-passed .ftl__time strong { color: var(--text-3); font-weight: 500; }
  .ftl__row.is-next .ftl__time small { color: var(--good); font-weight: 650; }
  .follow-mystop .card__title, .follow-transfer .card__title { display: inline-flex; align-items: center; gap: 8px; }
  .follow-mystop__name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-l); font-weight: 700; }
  .follow-mystop__name .icon { color: var(--accent); }
  .follow-mystop__time { margin-top: 4px; font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; }
  .follow-mystop__sub { margin-top: 2px; color: var(--text-2); }
  .follow-mystop .card__body > .btn { margin-top: 12px; }
  .follow-mystop__clear { padding-inline: 10px; }
  .follow-transfer .rows .row { padding-inline: 20px; align-items: flex-start; padding-block: 12px; }
  .follow-transfer__row > .badge { margin-top: 1px; }
  .follow-transfer__row .row__main { display: grid; gap: 4px; }
  .follow-transfer__row .row__title { white-space: normal; }
  .follow-transfer__when { margin-left: 6px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
  .follow-transfer__when .icon { display: inline-block; margin-right: 3px; vertical-align: -1px; color: var(--good); }
  .follow-transfer__verdict { white-space: normal; align-items: flex-start; }
  .follow-transfer__verdict::before { margin-top: 0.42em; }
  .follow-transfer__elevator { display: inline-flex; align-items: center; gap: 4px; color: var(--bad); font-weight: 600; }
  .follow-transfer .card__foot { padding: 12px 20px; }
  .follow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .follow-actions .btn { flex: 1 1 auto; }
  .follow-missing { max-width: 760px; }
  .follow-missing__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--bg-sunken); color: var(--text-3); }
  .follow-missing__title { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
  .follow-missing__body { color: var(--text-2); }
  .follow-missing .rows { margin-inline: -20px; }
  .follow-missing .row, .follow-missing .row-static { padding-inline: 20px; }
  @media (min-width: 768px) {
    .follow { padding-block: 28px 64px; }
    .ftl { --row: 60px; --x: 34px; }
    .ftl__row { grid-template-columns: 68px minmax(0, 1fr) auto; padding-right: 20px; }
  }
}
@layer pages {
  .ski-hero { padding-block: 32px 28px; border-bottom: 1px solid var(--border); }
  .ski-hero__inner { display: grid; gap: 14px; }
  .ski-eyebrow { display: none; }
  .ski-hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  .ski-hero__lede { max-width: 62ch; color: var(--text-2); font-size: var(--fs-l); }
  .ski-hero__lede [data-ski-lede] { color: var(--text); font-weight: 600; }
  .ski-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .ski-hero__actions .icon--xs { margin-left: -2px; opacity: 0.8; }
  .ski-hero__source { color: var(--text-3); font-size: var(--fs-s); }
  .ski-hero__live { margin-top: 2px; }
  .ski-jump { margin-top: 4px; flex-wrap: wrap; overflow: visible; }
  .ski-page a:not(.btn):not(.chip) > .icon { display: inline-block; vertical-align: -2px; margin-left: 4px; }
  .ski-jump .chip { gap: 8px; }
  .ski-jump__count {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--r-full); background: var(--bg-sunken); color: var(--text-2); font-size: var(--fs-xs);
  }
  @media (min-width: 960px) {
    .ski-hero { padding-block: 48px 40px; }
  }
  .ski-main { display: grid; gap: 8px; padding-block: 24px 56px; }
  .ski-canyon { display: grid; gap: 16px; padding-block: 24px; scroll-margin-top: calc(var(--header-h) + 16px); }
  .ski-canyon + .ski-canyon { border-top: 1px solid var(--border); }
  .ski-canyon__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
  .ski-canyon__head h2 { font-size: var(--fs-2xl); }
  .ski-canyon__head p { margin-top: 4px; color: var(--text-2); }
  .ski-canyon__links { display: flex; flex-wrap: wrap; gap: 8px; }
  .ski-canyon__links .chip { min-height: 32px; font-size: var(--fs-xs); }
  .ski-canyon__links .icon--xs, .ski-links a .icon--xs { margin-left: 2px; color: var(--text-3); }
  .ski-cards { display: grid; gap: 16px; }
  .ski-card { overflow: hidden; }
  .ski-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
  .ski-card__title { flex: 1; min-width: 0; }
  .ski-card__title h3 { font-size: var(--fs-l); }
  .ski-card__title p { color: var(--text-2); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ski-live {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 4px 10px; border-radius: var(--r-full); background: var(--bg-sunken);
    color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  }
  .ski-live .live__dot { background: var(--text-3); }
  .ski-live .live__dot::after { display: none; }
  .ski-live.is-on { background: var(--good-soft); color: var(--good); }
  .ski-live.is-on .live__dot { background: var(--live); }
  .ski-live.is-on .live__dot::after { display: block; }
  @media (max-width: 559px) {
    .ski-card__head { flex-wrap: wrap; align-items: flex-start; }
    .ski-card__title { flex: 1 1 calc(100% - 64px); }
    .ski-card__title p { white-space: normal; }
    .ski-live { margin-left: 52px; }
  }
  .ski-card__map { border-block: 1px solid var(--border); background: var(--map-land); }
  .ski-map { display: block; width: 100%; height: min(var(--map-h, 220px), 62vw); }
  .ski-map__casing { fill: none; stroke: light-dark(#ffffff, #8a96a8); stroke-linecap: round; stroke-linejoin: round; }
  .ski-map__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ski-map__stop { fill: var(--surface); stroke: var(--text-2); }
  .ski-map__stop.is-key { stroke: var(--text); }
  .ski-map__labels {
    fill: var(--text-2); font-family: var(--font); font-weight: 600;
    paint-order: stroke; stroke: var(--map-land); stroke-linejoin: round;
  }
  .ski-alert {
    display: flex; gap: 10px; align-items: flex-start; margin: 16px 20px 0; padding: 12px 14px;
    border-radius: var(--r-m); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s);
  }
  .ski-alert strong { display: block; color: var(--text); font-weight: 600; }
  .ski-alert p { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ski-card__body { display: grid; gap: 20px; padding: 16px 20px 20px; }
  @media (min-width: 900px) {
    .ski-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ski-block--wide { grid-column: 1 / -1; }
  }
  .ski-block { display: grid; gap: 8px; align-content: start; }
  .ski-block h4 { color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .ski-muted { color: var(--text-3); font-size: var(--fs-s); }
  .ski-service { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
  .ski-service li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--fs-s); }
  .ski-service li:first-child { border-top: 0; padding-top: 0; }
  .ski-service span { color: var(--text-2); }
  .ski-service strong { font-weight: 600; }
  .ski-buses { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .ski-bus { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-s); }
  .ski-bus__dot { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--c, var(--text-2)); color: #fff; }
  .ski-bus__main span { color: var(--text-2); }
  .ski-bus__meta { display: block; color: var(--text-3) !important; font-size: var(--fs-xs); }
  .ski-deps { display: grid; list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden; }
  .ski-dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px; background: var(--surface); }
  .ski-dep + .ski-dep { border-top: 1px solid var(--border); }
  .ski-dep__stop { display: grid; gap: 1px; min-width: 0; }
  .ski-dep__stop strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ski-dep__stop span { color: var(--text-3); font-size: var(--fs-xs); }
  .ski-dep__times { display: grid; justify-items: end; gap: 1px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
  .ski-dep__eta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
  .ski-dep__eta.is-live { color: var(--good); }
  .ski-dep__eta.is-sched { color: var(--text-2); font-weight: 600; }
  .ski-dep__eta.is-ghost { color: var(--text-3); font-weight: 600; }
  .ski-dep__clock, .ski-dep__then, .ski-dep__note, .ski-dep__none { color: var(--text-3); font-size: var(--fs-xs); }
  .ski-dep__note { font-style: italic; }
  html.is-stale .ski-dep__eta.is-live { color: var(--text-3); }
  .ski-empty {
    display: flex; gap: 12px; align-items: center; padding: 20px;
    border: 1px dashed var(--border-strong); border-radius: var(--r-l);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface)); color: var(--text-2);
  }
  .ski-empty .icon { width: 28px; height: 28px; color: var(--accent); }
  .ski-before { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--bg-subtle); }
  .ski-before h2 { font-size: var(--fs-xl); }
  .ski-links { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
  .ski-links .row { align-items: flex-start; padding-block: 12px; }
  .ski-links .row > .icon { margin-top: 2px; color: var(--text-3); }
  .ski-links .row__title a { color: var(--text); text-decoration: none; }
  .ski-links .row__title a:hover { color: var(--accent); text-decoration: underline; }
  .ski-links__pair { display: flex; flex-wrap: wrap; gap: 4px 16px; white-space: normal; }
  .ski-links__pair a { font-weight: 600; text-decoration: none; }
  .ski-links__pair a:hover { text-decoration: underline; }
  .ski-before__note { margin-top: -2px; }
}
@layer pages {
  .st-head { display: grid; gap: 14px; padding-block: 20px 20px; }
  .st-head__top { display: flex; align-items: center; gap: 14px; }
  .st-pin {
    display: grid; place-items: center; width: 52px; height: 52px; flex: none;
    border-radius: var(--r-m); background: var(--bg-sunken); color: var(--text);
  }
  .st-pin .icon { width: 26px; height: 26px; }
  .st-head__title { min-width: 0; flex: 1; }
  .st-head h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
  .st-sub { color: var(--text-2); }
  .st-head__lines { display: flex; flex-wrap: wrap; gap: 8px; }
  .st-head__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .st-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .st-tv-clock { display: none; }
  .st-tv-exit { display: none; }
  @media (min-width: 960px) { .st-head { padding-block: 32px 24px; } }
  .st-layout { display: grid; gap: 24px; padding-block: 8px 48px; }
  .st-aside { display: grid; gap: 16px; align-content: start; }
  @media (min-width: 1024px) {
    .st-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
  }
  .st-board { display: grid; gap: 16px; }
  .st-line { border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
  .st-line__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .st-line__head h2 { flex: 1; min-width: 0; font-size: var(--fs-l); }
  .st-rows { list-style: none; margin: 0; padding: 0; }
  .st-row { display: grid; gap: 10px; padding: 14px 18px; }
  .st-row + .st-row { border-top: 1px solid var(--border); }
  .st-row__dest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
  .st-row__to { font-weight: 700; font-size: var(--fs-l); }
  .st-row__meta { color: var(--text-3); font-size: var(--fs-s); }
  .st-row__empty { color: var(--text-3); font-size: var(--fs-s); }
  @media (min-width: 640px) {
    .st-row { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.6fr); align-items: center; gap: 16px; }
    .st-row__dest { display: grid; gap: 2px; }
    .st-row__empty { grid-column: 2; }
  }
  .st-deps { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .st-deps:has(> .dep:first-child[hidden]) { display: none; }
  .dep { display: grid; align-content: start; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
  .dep__eta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-l); color: var(--text-2); white-space: nowrap; }
  .dep:first-child .dep__eta { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; }
  .dep__clock { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.35; }
  .dep__note { display: none; color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
  .dep__live, .dep__ghost { display: none; }
  .dep--live .dep__eta { color: var(--good); }
  .dep--live .dep__live { display: block; }
  .dep--sched .dep__eta { color: var(--text-3); font-weight: 600; }
  .dep--ghost .dep__eta { color: var(--text-3); font-weight: 600; cursor: help; }
  .dep--ghost .dep__ghost { display: block; }
  .dep--ghost .dep__note { display: block; }
  .dep:first-child .dep__live, .dep:first-child .dep__ghost { width: 16px; height: 16px; }
  html.is-stale .dep--live .dep__eta { color: var(--text-2); }
  .st-aside .card__title { display: inline-flex; align-items: center; gap: 8px; }
  .st-aside .card__title .icon { color: var(--text-3); }
  .st-ok { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-s); }
  .st-ok .icon { color: var(--good); }
  .st-outages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .st-outage {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m);
    background: var(--bad-soft); color: var(--bad); font-size: var(--fs-s);
  }
  .st-outage strong { color: var(--bad); }
  .st-outage p { margin-top: 2px; color: var(--text-2); }
  .st-outage .proto-note { margin-left: 4px; vertical-align: 1px; }
  .st-note { color: var(--text-3); font-size: var(--fs-xs); }
  .st-label { margin-bottom: 8px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .st-conn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text); text-decoration: none; font-size: var(--fs-s); font-weight: 600; }
  .st-conn:hover { background: var(--surface-hover); color: var(--text); }
  .st-buses { --gap: 6px; }
  .st-buses a { text-decoration: none; }
  .st-mini-map { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-m); background: var(--map-land); }
  .st-mini-map:hover { outline: 2px solid var(--border-strong); outline-offset: 2px; }
  .st-mini-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -88%); color: var(--text); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
  .st-mini-map__pin .icon { width: 28px; height: 28px; fill: var(--surface); }
  .st-code {
    width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-m);
    background: var(--bg-subtle); color: var(--text-2); font: 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  html.is-tv, html.is-tv body { background: var(--bg); }
  html.is-tv :is(.site-header, .site-footer, .skip-link, .st-aside, .crumbs, .st-head__lines, .st-head__actions, .legend, .preview-banner) { display: none !important; }
  html.is-tv .station-page .wrap { width: min(100% - 6vw, 2400px); }
  html.is-tv .st-head { padding-block: 3vh 1.5vh; gap: 1vh; }
  html.is-tv .st-head__top { gap: 2vw; }
  html.is-tv .st-pin { width: clamp(52px, 5vw, 96px); height: clamp(52px, 5vw, 96px); }
  html.is-tv .st-pin .icon { width: 55%; height: 55%; }
  html.is-tv .st-head h1 { font-size: clamp(2rem, 4.4vw, 5.5rem); }
  html.is-tv .st-sub { font-size: clamp(1rem, 1.6vw, 1.75rem); }
  html.is-tv .st-tv-clock { display: block; margin-left: auto; font-size: clamp(2rem, 5vw, 6rem); font-weight: 700; letter-spacing: -0.02em; }
  html.is-tv .st-head__bar .live { font-size: clamp(0.875rem, 1.2vw, 1.25rem); }
  html.is-tv .st-layout { grid-template-columns: 1fr; padding-block: 1vh 3vh; }
  html.is-tv .st-board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 780px), 1fr)); gap: 2vh 2vw; }
  html.is-tv .st-line { border-color: var(--border-strong); }
  html.is-tv .st-line__head { padding: 1.4vh 1.6vw; }
  html.is-tv .st-line__head h2 { font-size: clamp(1.25rem, 2vw, 2.4rem); }
  html.is-tv .st-line__head .link-arrow { display: none; }
  html.is-tv .st-line .badge--m { height: clamp(28px, 2.8vw, 54px); min-width: clamp(40px, 4vw, 84px); font-size: clamp(0.875rem, 1.4vw, 1.6rem); border-radius: 10px; }
  html.is-tv .st-row { grid-template-columns: minmax(0, 1fr) max-content; padding: 1.3vh 1.6vw; gap: 2vw; }
  html.is-tv .st-row__to { font-size: clamp(1.125rem, 1.8vw, 2.4rem); line-height: 1.15; color: var(--text); }
  html.is-tv .st-row__meta, html.is-tv .st-row__empty { font-size: clamp(0.875rem, 1vw, 1.25rem); }
  html.is-tv .st-deps { display: flex; align-items: flex-start; gap: 1.8vw; }
  html.is-tv .st-deps:has(> .dep:first-child[hidden]) { display: none; }
  html.is-tv .dep { flex: none; }
  html.is-tv .dep__eta { font-size: clamp(1.125rem, 1.8vw, 2.4rem); color: var(--text); }
  html.is-tv .dep:first-child .dep__eta { font-size: clamp(1.625rem, 3vw, 4rem); }
  html.is-tv .dep__clock { white-space: nowrap; }
  html.is-tv .dep--live .dep__eta { color: var(--good); }
  html.is-tv .dep--sched .dep__eta, html.is-tv .dep--ghost .dep__eta { color: var(--text-2); }
  html.is-tv .dep__clock, html.is-tv .dep__note { font-size: clamp(0.75rem, 1vw, 1.125rem); }
  html.is-tv .dep__live, html.is-tv .dep__ghost { width: 0.6em; height: 0.6em; }
  html.is-tv .stale-banner { font-size: clamp(1rem, 1.4vw, 1.5rem); }
  html.is-tv .st-tv-exit { display: inline-flex; position: fixed; right: 16px; bottom: 16px; opacity: 0; transition: opacity 0.2s var(--ease); }
  html.is-tv .st-tv-exit:hover, html.is-tv .st-tv-exit:focus-visible { opacity: 1; }
  html.is-tv body { cursor: none; }
  html.is-tv body:hover { cursor: default; }
  .st-embed-body { background: var(--bg); }
  .st-embed { display: grid; gap: 8px; padding: 12px; }
  .st-embed__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px; }
  .st-embed__head strong { font-size: var(--fs-l); }
  .st-rows--embed { border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
  .st-rows--embed .st-row { padding: 10px 12px; gap: 6px; }
  .st-rows--embed .st-row__dest { display: flex; align-items: center; gap: 8px; }
  .st-rows--embed .st-row__to { font-size: var(--fs-m); }
  .st-rows--embed .st-row__meta { display: none; }
  .st-rows--embed .st-deps { grid-template-columns: 1.2fr 1fr; }
  .st-rows--embed .dep:first-child .dep__eta { font-size: 1.375rem; }
  .st-embed__foot { padding: 2px 4px; font-size: var(--fs-xs); }
  .st-embed__foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); text-decoration: none; }
  .st-embed__foot a:hover { color: var(--text); }
  @media (min-width: 560px) {
    .st-rows--embed .st-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  }
}