@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/archivo-latin-400-normal-C81ewxNO.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/archivo-latin-600-normal-3BBy0ZsW.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/archivo-latin-700-normal-D9cHMWGj.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/archivo-latin-800-normal-cB6v3kRN.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2') format('woff2');
}
:root, :root[data-theme='light'] {
  color-scheme: light;
  --ground: #FAFAF7;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --band: #111214;
  --ink: #111214;
  --ink-2: #3A3B36;
  --ink-3: #55564F;
  --band-muted: #B9BAB5;
  --rule: #D9D8D2;
  --loop-band: #EFEEE8;
  --delay: #F6C21A;
  --online: #3FCB7A;
  --website: #1D5BBF;
  --website-tint: #C9D7EF;
  --fantasy-gm: #0E8844;
  --fantasy-gm-tint: #C3E3D0;
  --foundry: #F26B1D;
  --foundry-tint: #FBD6BF;
  --shuttle: #747678;
  --shuttle-tint: #D9DADB;
  --website-text: #FFFFFF;
  --fantasy-gm-text: #FFFFFF;
  --foundry-text: #111214;
  --shuttle-text: #FFFFFF;
  --awaiting-bg: #FFFFFF;
  --awaiting-text: #111214;
  --inverted-bg: #111214;
  --inverted-text: #FFFFFF;
  --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #121315;
  --surface: #18191C;
  --surface-raised: #1A1B1E;
  --band: #000000;
  --ink: #F2F1EC;
  --ink-2: #C4C5BF;
  --ink-3: #A3A49E;
  --band-muted: #A3A49E;
  --rule: #2C2D31;
  --loop-band: #202125;
  --website: #2F6FDB;
  --website-tint: #1F2D4A;
  --fantasy-gm: #0E8844;
  --fantasy-gm-tint: #183A29;
  --foundry: #F26B1D;
  --foundry-tint: #4A2A17;
  --shuttle-tint: #303235;
  --awaiting-bg: #121315;
  --awaiting-text: #F2F1EC;
  --inverted-bg: #F2F1EC;
  --inverted-text: #000000;
}
[data-component] { box-sizing: border-box; font-family: var(--font-sans); }
.cr-band { background: var(--band); color: #FFFFFF; padding: 26px 24px 20px; position: relative; }
.cr-band::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; height: 2px; background: #FFFFFF; }
.cr-band-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cr-screen-title { font-size: 28px; font-weight: 800; }
.cr-band-subtitle { margin-top: 8px; color: var(--band-muted); }
.cr-band nav { margin-top: 20px; }
.cr-band a { color: #FFFFFF; }
.cr-bullet, .cr-marker { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 800; line-height: 1; vertical-align: middle; }
a.cr-bullet, a.cr-bullet:hover, a.cr-bullet:visited { text-decoration: none; }
.cr-marker { border: 2px solid var(--ink); position: relative; }
.cr-marker::after { content: ''; position: absolute; inset: 0; border: 4px solid var(--ground); border-radius: 50%; pointer-events: none; }
.cr-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; font-size: 13px; font-weight: 700; border: 1px solid transparent; color: var(--ink); }
.cr-chip[data-status='delays'] { background: var(--delay); color: #111214; border-color: var(--delay); }
.cr-chip[data-status='awaiting'] { background: var(--awaiting-bg); color: var(--awaiting-text); border-color: var(--awaiting-text); }
.cr-chip[data-status='arrived'] { border: 1px dashed var(--ink); }
.cr-chip[data-status='closed'] { border: 1px solid var(--ink-3); color: var(--ink-3); background: transparent; }
.cr-chip[data-status='suspended'], .cr-chip[data-status='cancelled'], .cr-flag { background: var(--inverted-bg); color: var(--inverted-text); border-color: var(--inverted-bg); }
.cr-station { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--ground); }
.cr-station[data-state='passed'] { background: var(--ink); }
.cr-station[data-state='notServed'] { border: 2px dashed var(--rule); background: transparent; }
.cr-flag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; font-size: 13px; font-weight: 700; border-inline-start: 2px solid var(--ink); }
.cr-flag[data-side='left'] { border-inline-start: 0; border-inline-end: 2px solid var(--ink); }
.cr-flag[data-kind='delay'] { background: var(--delay); color: #111214; }
.cr-legend ul { display: flex; flex-wrap: wrap; gap: 20px 28px; list-style: none; padding: 0; }
.cr-legend li { display: flex; align-items: center; gap: 8px; }
.cr-track { display: inline-flex; width: 64px; height: 6px; background: var(--website-tint); border-left: 32px solid var(--website); }
.cr-theme-toggle { border: 1px solid currentColor; border-radius: 0; padding: 8px 12px; color: inherit; background: transparent; font-size: 13px; cursor: pointer; }
[data-component]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cr-band :focus-visible { outline-color: #FFFFFF; }

.cr-bullet, .cr-marker { white-space: nowrap; letter-spacing: -0.02em; }
.cr-line-id { display: inline-block; flex-shrink: 0; width: max-content; }

.cr-trunk-dot { display: inline-block; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; }