@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* One design unit: the board is laid out on a 1080 x 1920 grid. */
  --u: min(100vw / 1080, 100vh / 1920);
  --page: #041431;
  --board: #06204d;
  --masthead: #0a3a8a;
  --row-a: #0b2a60;
  --row-b: #113a7c;
  --rule: #2a5bab;
  --text: #ffffff;
  --muted: #9fbbea;
  --faint: #6f8fc7;
  --accent: #ffc72c;
  --accent-ink: #1b1400;
  --trust: #8fd3ff;
  --trust-ink: #00203d;
  --row-h: calc(var(--u) * 92);
  --gutter: calc(var(--u) * 34);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); overflow: hidden; }
body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  cursor: none;
}

.board {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(var(--u) * 1080);
  height: calc(var(--u) * 1920);
  background: var(--board);
  overflow: hidden;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 230);
  padding: 0 var(--gutter);
  background: var(--masthead);
  border-bottom: calc(var(--u) * 8) solid var(--accent);
}
.title { display: flex; align-items: center; gap: calc(var(--u) * 30); }
.title-icon { width: calc(var(--u) * 96); height: calc(var(--u) * 96); fill: var(--accent); }
h1 {
  margin: 0;
  font-size: calc(var(--u) * 110);
  font-weight: 700;
  letter-spacing: calc(var(--u) * -3);
  line-height: 1;
}
.clock { text-align: right; }
.clock-time { font-size: calc(var(--u) * 80); font-weight: 600; line-height: 1; letter-spacing: calc(var(--u) * -1); }
.clock-date {
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 22);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2);
}

.columns, .row {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: calc(var(--u) * 20);
  align-items: center;
  padding: 0 var(--gutter);
}
.board[data-kind="arrivals"] { --grid: calc(var(--u) * 104) calc(var(--u) * 206) minmax(0, 1fr) calc(var(--u) * 146) calc(var(--u) * 172); }
.board[data-kind="departures"] { --grid: calc(var(--u) * 104) calc(var(--u) * 206) minmax(0, 1fr) calc(var(--u) * 262); }

.columns {
  height: calc(var(--u) * 64);
  font-size: calc(var(--u) * 22);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 2.5);
  border-bottom: calc(var(--u) * 2) solid var(--rule);
}
.num { text-align: right; }

.rows { flex: 1; min-height: 0; overflow: hidden; }
.row {
  height: var(--fit-h, var(--row-h));
  background: var(--row-a);
}
.row:nth-child(even) { background: var(--row-b); }
.rows.leaving .row { animation: fade-out 0.35s ease-in 0s both !important; }
@keyframes fade-out { to { opacity: 0; } }
.row.enter { animation: flip 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes flip {
  from { opacity: 0; transform: perspective(calc(var(--u) * 800)) rotateX(-70deg); }
  to { opacity: 1; transform: none; }
}

.cell { min-width: 0; }
.main {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: calc(var(--u) * 36);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.num .main { justify-content: flex-end; }
.sub {
  margin-top: calc(var(--u) * 5);
  font-size: calc(var(--u) * 21);
  font-weight: 450;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.num .sub { text-align: right; }
.subscript { font-size: 0.72em; vertical-align: -0.2em; }
.time .main { font-weight: 700; color: var(--accent); }
.tail .main { font-weight: 700; letter-spacing: calc(var(--u) * 0.5); }
.marquee {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.num .marquee { text-align: right; }
.marquee .track { display: inline-block; white-space: nowrap; }
.marquee .gap { display: inline-block; width: calc(var(--u) * 70); }
.marquee.scrolling {
  text-align: left;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
}
.marquee.scrolling .track { animation: marquee var(--duration) linear infinite; }
@keyframes marquee {
  0%, 20% { transform: translateX(0); }
  100% { transform: translateX(var(--shift)); }
}
.unknown { color: var(--faint); font-weight: 500; }
.code { font-weight: 700; letter-spacing: calc(var(--u) * 1); }

.sub.with-tag { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 27);
  padding: 0 calc(var(--u) * 9) 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 5);
  font-size: calc(var(--u) * 16);
  font-weight: 750;
  letter-spacing: calc(var(--u) * 1.5);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
}
.tag svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); fill: currentColor; }
.tag.trust { background: var(--trust); color: var(--trust-ink); }

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 300);
  font-size: calc(var(--u) * 36);
  color: var(--muted);
}