/* Live banners for screens (1.2.61; metro and bus 1.2.63). A screen has one look, the banner's own, whatever the device's theme:
   every colour is set here. Sizes follow the screen (vmin), so the banner fits any shape; a couplet keeps its
   two lines whole and display.js makes its type smaller when a line would not fit. */
:root {
  --night: #142347; --night-2: #23407a; --marigold: #f29f05; --maroon: #6d1f2b; --teal: #0b6466; --green: #17694a;
  --vermilion: #c7361f; --leaf: #e8d39b; --leaf-2: #f4e7bf; --ink-brown: #3b2711; --gold: #e3b04b; --white: #ffffff;
  --ink: #13233a; --mist: #d9e2ef;
  --f-couplet: "Noto Serif Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN", serif;
  --f-ta: "Nirmala UI", "Noto Sans Tamil", "Tamil Sangam MN", sans-serif;
  --f-hi: "Noto Serif Devanagari", "Kokila", "Mangal", "Nirmala UI", serif;
  --f-en: Georgia, Cambria, "Times New Roman", serif;
  --f-label: "Bahnschrift Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --f-clock: "Bahnschrift", "Roboto", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body.screen { background: var(--night); color: var(--white); font-family: var(--f-ta); cursor: none; }
[lang="hi"] { font-family: var(--f-hi); }
[lang="en"] { font-family: var(--f-en); }
.safe { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.2vmin;
  padding: 6vmin 7vmin 7.5vmin; }
/* the gold frame of the safe area: all text stays inside it */
.safe::before { content: ""; position: absolute; inset: 2.6vmin; border: .35vmin solid var(--gold); border-radius: 1.4vmin; pointer-events: none; opacity: .85; }
.safe > * { min-width: 0; }
.top { grid-row: 1; } .count { grid-row: 2; } .kural { grid-row: 3; } .foot { grid-row: 4; }

/* top: the title in three languages, the clock */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3vmin; }
.titles { display: grid; gap: .8vmin; min-width: 0; }
.eyebrow { font-family: var(--f-label); font-size: 2vmin; letter-spacing: .2em; color: var(--gold); }
.eyebrow [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.top h1 { margin: 0; font-weight: 700; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4vmin 2.4vmin; }
.t-ta { font-size: 5.4vmin; color: var(--marigold); }
.t-hi { font-size: 3.2vmin; font-weight: 600; }
.t-en { font-size: 3.2vmin; font-style: italic; font-weight: 400; color: var(--mist); }
.clock-box { display: grid; justify-items: end; gap: .6vmin; text-align: right; flex: none; }
.digital { display: flex; align-items: baseline; gap: 1vmin; }
.digital b { font-family: var(--f-clock); font-size: 9vmin; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--marigold); letter-spacing: .02em; }
.digital small { font-size: .45em; opacity: .85; }
.ist { font-family: var(--f-label); font-size: 2vmin; letter-spacing: .14em; color: var(--gold); }
.date { font-size: 2.3vmin; color: var(--mist); }

/* the couplet: on a palm leaf, with its two string holes; the translations under it */
/* the sizes of the couplet and its translations are in em of one scale (--s), which display.js lowers when they would not fit */
.kural { font-size: calc(1vmin * var(--s, 1)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 2em; text-align: center; min-height: 0; overflow: hidden; transition: opacity .9s ease; }
.kural > *, .leaf > *, .cycle > *, .stream > * { min-width: 0; max-width: 100%; }
.kural.fade { opacity: 0; }
.leaf { position: relative; width: 100%; max-width: 100%; background: linear-gradient(180deg, var(--leaf-2) 0%, var(--leaf) 55%, #dcc58a 100%);
  color: var(--ink-brown); border-radius: 999px / 42%; padding: 3.4em 11em; box-shadow: inset 0 0 0 .3vmin rgba(110,80,30,.35), 0 1vmin 3vmin rgba(0,0,0,.3); }
.leaf::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 1.6em, rgba(120,90,40,.12) 1.6em 1.75em); }
.holes::before, .holes::after { content: ""; position: absolute; top: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; border-radius: 50%;
  background: rgba(70,45,15,.55); box-shadow: inset 0 .25em .35em rgba(0,0,0,.4); }
.holes::before { left: 5em; } .holes::after { right: 5em; }
.couplet { position: relative; margin: 0; font-family: var(--f-couplet); font-weight: 700; font-size: 6.4em; line-height: 1.45; }
.couplet span { display: block; white-space: nowrap; }
.tr { margin: 0; max-width: 100%; font-size: 3.1em; line-height: 1.4; }
.tr-en { font-style: italic; color: var(--mist); }
.tr-local { color: var(--gold); }
.cite { margin: .4em 0 0; font-family: var(--f-label); font-size: 2.2em; letter-spacing: .08em; color: var(--gold); }
.cite [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }

/* foot: credits, the time to the next couplet, the QR code */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 4vmin; }
/* the logos of the Government of India, the Ministry of Education, CICT and Kashi Tamil Sangamam, on a white strip */
.logos-strip { justify-self: start; display: inline-flex; align-items: center; gap: 2.4vmin; max-width: 100%; background: var(--white);
  border-radius: 1.4vmin; padding: 1.1vmin 2.2vmin; box-shadow: 0 .5vmin 1.6vmin rgba(0,0,0,.25); }
.logos-strip img { display: block; height: 7.5vmin; width: auto; min-width: 0; }
.next { height: .8vmin; border-radius: 1vmin; background: rgba(255,255,255,.16); overflow: hidden; align-self: center; }
.next i { display: block; height: 100%; width: 0; background: var(--marigold); border-radius: inherit; transition: width 1s linear; }
.qr-box { display: grid; justify-items: center; gap: .6vmin; }
.qr-box img { width: 11vmin; height: 11vmin; background: #fff; padding: .6vmin; border-radius: .8vmin; image-rendering: pixelated; }
.qr-box span { font-family: var(--f-label); font-size: 1.6vmin; letter-spacing: .1em; color: var(--gold); }

/* the kolam: a band of the threshold drawing along the foot, in gold */
.kolam { position: absolute; left: 0; right: 0; bottom: 3.6vmin; height: 2.4vmin; z-index: 0; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cg fill='none' stroke='%23e3b04b' stroke-width='1.3'%3E%3Cpath d='M2 8 L12 1.5 L22 8 L12 14.5 Z'/%3E%3Cpath d='M26 8 L36 1.5 L46 8 L36 14.5 Z'/%3E%3C/g%3E%3Cg fill='%23e3b04b'%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Ccircle cx='36' cy='8' r='2'/%3E%3Ccircle cx='24' cy='8' r='1.1'/%3E%3Ccircle cx='0' cy='8' r='1.1'/%3E%3Ccircle cx='48' cy='8' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto 100%; background-repeat: repeat-x; margin: 0 6vmin; }

/* ---- the six banners: their colours ---- */
body.k-welcome { background: radial-gradient(90% 120% at 50% 115%, var(--night-2) 0%, var(--night) 62%); }
body.k-kural { background: radial-gradient(120% 90% at 85% 0%, #213a6a 0%, var(--night) 62%); }
.k-kural .leaf, .k-thanks .leaf, .k-countdown .leaf { background: none; box-shadow: none; padding: 0; color: var(--white); }
.k-kural .leaf::before, .k-thanks .leaf::before, .k-countdown .leaf::before, .k-kural .holes, .k-thanks .holes, .k-countdown .holes { display: none; }
.k-kural .couplet { border-inline-start: .11em solid var(--marigold); padding-inline-start: .5em; text-align: left; }
body.k-languages { background: linear-gradient(180deg, #fbf6e6 0%, #f1e4bd 100%); color: var(--ink); }
.k-languages .t-ta { color: var(--maroon); } .k-languages .t-en, .k-languages .date { color: #4a5b70; }
.k-languages .logos-strip, .k-platform .logos-strip { box-shadow: 0 0 0 .25vmin rgba(20,35,71,.18); }
.k-languages .digital b { color: var(--maroon); } .k-languages .eyebrow, .k-languages .ist, .k-languages .cite, .k-languages .qr-box span { color: #9a6a12; }
.k-languages .safe::before { border-color: var(--maroon); opacity: .45; }
.k-languages .next { background: rgba(0,0,0,.08); } .k-languages .next i { background: var(--maroon); }
body.k-platform { background: linear-gradient(180deg, #f7b52c 0%, var(--marigold) 100%); color: var(--night); }
.k-platform .t-ta, .k-platform .digital b { color: var(--night); } .k-platform .t-en, .k-platform .date, .k-platform .tr-en { color: #2e3a52; }
.k-platform .eyebrow, .k-platform .ist, .k-platform .cite, .k-platform .qr-box span { color: var(--maroon); }
.k-platform .safe::before { border-color: var(--night); opacity: .5; }
.k-platform .next { background: rgba(20,35,71,.18); } .k-platform .next i { background: var(--night); }
body.k-countdown { background: linear-gradient(115deg, var(--maroon) 0%, #8e2a2a 60%, #a3372c 100%); }
.k-countdown .t-ta { color: var(--white); font-size: 6.4vmin; }
.k-countdown .couplet { font-size: 4.4em; }
body.k-thanks { background: linear-gradient(110deg, #0a5656 0%, var(--teal) 100%); }
.k-thanks .t-ta { color: var(--gold); }

/* the analog clock of the platform banner */
.analog { width: 20vmin; height: 20vmin; }
.analog .face { fill: var(--white); stroke: var(--night); stroke-width: 4; }
.analog .tick { stroke: var(--night); stroke-width: 3.2; stroke-linecap: round; }
.analog .hand { stroke: var(--night); stroke-linecap: round; }
.analog .h { stroke-width: 5; } .analog .m { stroke-width: 3.4; } .analog .s { stroke: var(--vermilion); stroke-width: 1.6; }
.analog .pin { fill: var(--vermilion); }
.k-platform .clock-box { grid-template-columns: auto auto; align-items: center; column-gap: 3vmin; }
.k-platform .clock-box .analog { grid-row: 1 / span 2; }

/* the countdown */
.count { display: grid; justify-items: center; gap: 1.6vmin; }
.count-dates { font-size: 3vmin; color: var(--gold); }
.count-dates b { font-family: var(--f-clock); color: var(--marigold); }
.count-units { display: flex; gap: 2.4vmin; }
.count-units .u { background: var(--white); color: var(--maroon); border-radius: 1.4vmin; padding: 1.6vmin 2.6vmin; min-width: 17vmin; display: grid; justify-items: center;
  border-bottom: .8vmin solid var(--gold); }
.count-units b { font-family: var(--f-clock); font-size: 11vmin; line-height: 1; font-variant-numeric: tabular-nums; }
.count-units span { font-family: var(--f-label); font-size: 1.8vmin; letter-spacing: .1em; text-transform: uppercase; }
.count-units i { font-style: normal; font-family: var(--f-ta); text-transform: none; letter-spacing: 0; }
.count-live { font-size: 5vmin; font-weight: 700; color: var(--marigold); text-align: center; }

/* one couplet, many languages */
.cycle { position: relative; width: 100%; min-height: 15em; display: grid; grid-template-columns: minmax(0, 1fr); }
.stream { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: 1em; opacity: 0; transition: opacity 1s ease; }
.stream.on { opacity: 1; }
.stream .tr { font-size: 3.6em; color: var(--ink); }
.lname { font-family: var(--f-label); font-size: 2.4em; letter-spacing: .06em; color: var(--maroon); }
.dots { display: flex; gap: .8em; flex-wrap: wrap; justify-content: center; }
.dots i { width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(109,31,43,.22); }
.dots i.on { background: var(--maroon); }

/* ---- the shape of the screen ---- */
/* a wide strip (an LED band above the platform, a ticker): one row, the couplet in the middle */
@media (min-aspect-ratio: 5/2) {
  .safe { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr; align-items: center; gap: 4vmin; padding: 7vmin 6vmin; }
  .top { display: contents; }
  .titles { display: none; }
  .clock-box { grid-column: 1; grid-row: 1; justify-items: start; text-align: left; }
  .count { grid-column: 1; grid-row: 1; }
  .k-countdown .clock-box { display: none; }
  .kural { grid-column: 2; grid-row: 1; gap: 1.2em; }
  .foot { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: auto; justify-items: center; gap: 3vmin; }
  .foot .next { display: none; }
  .logos-strip { justify-self: center; gap: 3vmin; padding: 2vmin 3vmin; border-radius: 2.4vmin; }
  .logos-strip img { height: 14vmin; }
  .tr-hi, .tr-local, .dots { display: none; }
  .couplet { font-size: 11em; }
  .tr { font-size: 5.4em; }
  .cite { font-size: 4em; }
  .digital b { font-size: 20vmin; }
  .date, .ist { font-size: 4.4vmin; }
  .qr-box img { width: 26vmin; height: 26vmin; }
  .qr-box span { font-size: 3.4vmin; }
  .count-units b { font-size: 20vmin; } .count-units .u { min-width: 26vmin; } .count-units span { font-size: 3.4vmin; } .count-dates { font-size: 5vmin; }
  .kolam { display: none; }
  .analog { width: 50vmin; height: 50vmin; }
}
/* a portrait screen (a standee, a pillar): everything stacked, the couplet larger */
@media (max-aspect-ratio: 4/5) {
  .top { flex-direction: column; align-items: stretch; }
  .clock-box { justify-items: start; text-align: left; }
  .t-ta { font-size: 6.4vmin; }
  .couplet { font-size: 7em; }
  .tr { font-size: 3.8em; }
  .leaf { padding: 4em 9em; }
  .foot { grid-template-columns: minmax(0, 1fr) auto; }
  .foot .next { grid-column: 1 / -1; grid-row: 1; }
  .logos-strip img { height: 6vmin; }
  .qr-box img { width: 16vmin; height: 16vmin; }
  .count-units { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kural, .stream { transition: none; }
}

/* ---- metro trains and buses (1.2.63) ---- */
.line-box, .led, .board { grid-row: 2; min-width: 0; }

/* Kural Metro: a chapter is a line, its ten couplets the stations; the couplet of the moment is the station of the train */
body.k-metro { --line: #6c3fb5; background: radial-gradient(110% 90% at 15% 0%, #1d2b44 0%, #0d1522 60%); }
body.k-metro[data-line="62"] { --line: #7b3fc4; }
body.k-metro[data-line="60"] { --line: #0f9d58; }
body.k-metro[data-line="67"] { --line: #1f6fd1; }
body.k-metro[data-line="63"] { --line: #d93a3a; }
.k-metro .safe::before { border-color: var(--line); opacity: 1; }
.k-metro .t-ta { color: var(--white); }
.k-metro .eyebrow, .k-metro .ist, .k-metro .cite, .k-metro .qr-box span { color: #b9c6dc; }
.k-metro .digital b { color: var(--white); }
.k-metro .next i { background: var(--line); }
.line-box { display: grid; gap: 1.8vmin; }
.line-head { display: flex; align-items: center; gap: 2.4vmin; background: var(--line); border-radius: 1.2vmin; padding: 1.2vmin 2.6vmin 1.2vmin 1.4vmin; min-width: 0; }
.badge { flex: none; width: 8vmin; height: 8vmin; border-radius: 50%; background: var(--white); color: var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-clock); font-weight: 700; font-size: 4.2vmin; }
.line-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4vmin 2.4vmin; min-width: 0; font-size: 4.6vmin; font-weight: 700; color: var(--white); }
.line-name [lang="en"] { font-size: 3vmin; font-weight: 400; font-style: italic; opacity: .92; }
.line-label { margin-inline-start: auto; flex: none; font-family: var(--f-label); font-size: 2.2vmin; letter-spacing: .14em; color: var(--white); }
.line-label [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.route li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
/* the track from a station to the next: in the colour of the line where the train has passed */
.route li::after { content: ""; position: absolute; top: 2.6vmin; left: 50%; width: 100%; height: 1.2vmin; background: rgba(255,255,255,.2); }
.route li:last-child::after { display: none; }
.route li.past::after { background: var(--line); }
.route i { position: relative; z-index: 1; width: 4vmin; height: 4vmin; margin: 1.2vmin 0; border-radius: 50%; background: #0d1522; border: .8vmin solid rgba(255,255,255,.5); }
.route li.past i { background: var(--line); border-color: var(--line); }
.route li.here i { width: 6.4vmin; height: 6.4vmin; margin: 0; background: var(--white); border: 1.4vmin solid var(--line); animation: station 2s ease-out infinite; }
.route b { font-family: var(--f-clock); font-size: 2.6vmin; font-weight: 600; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.route li.here b { font-size: 3.4vmin; font-weight: 700; color: var(--white); }
@keyframes station { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 2.6vmin rgba(255,255,255,0); } }
.route-note { display: flex; justify-content: space-between; gap: 3vmin; font-family: var(--f-label); font-size: 2.4vmin; letter-spacing: .06em; color: #c8d3e6; }
.route-note [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.route-note b { font-family: var(--f-clock); color: var(--white); margin-inline-start: .6vmin; }
.k-metro .leaf, .k-bus .leaf, .k-busstand .leaf { background: none; box-shadow: none; padding: 0; color: var(--white); }
.k-metro .leaf::before, .k-bus .leaf::before, .k-busstand .leaf::before, .k-metro .holes, .k-bus .holes, .k-busstand .holes { display: none; }
.k-metro .couplet { border-inline-start: .11em solid var(--line); padding-inline-start: .5em; text-align: left; font-size: 5.6em; }
.k-metro .kural { gap: 1.4em; justify-items: start; text-align: left; }

/* in the bus: a destination board in the style of an amber LED display, the couplet large and plain for daylight */
body.k-bus { background: linear-gradient(180deg, #1c1c1c 0%, #0e0e0e 100%); }
.k-bus .safe::before { border-color: #ffb000; opacity: .55; }
.k-bus .t-ta, .k-bus .digital b { color: #ffc23d; }
.k-bus .eyebrow, .k-bus .ist, .k-bus .cite, .k-bus .qr-box span { color: #ffb000; }
.k-bus .next i { background: #ffb000; }
.led { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3vmin;
  background: #050505; border: .5vmin solid #2d2d2d; border-radius: 1.2vmin; padding: 1.4vmin 3vmin; box-shadow: inset 0 0 3vmin #000; }
.led > * { color: #ffb000; text-shadow: 0 0 1.1vmin rgba(255,176,0,.75); }
/* the dots of the display, drawn over the letters */
.led::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, transparent 0 45%, rgba(5,5,5,.55) 52%); background-size: .7vmin .7vmin; }
.led-route { font-family: var(--f-clock); font-weight: 700; font-size: 9vmin; line-height: 1; padding-inline-end: 3vmin; border-inline-end: .4vmin solid #333; }
.led-dest { font-size: 6.2vmin; font-weight: 700; letter-spacing: .05em; white-space: nowrap; overflow: hidden; }
.led-days { display: grid; justify-items: end; gap: .4vmin; }
.led-days b { font-family: var(--f-clock); font-size: 8vmin; line-height: 1; font-variant-numeric: tabular-nums; }
.led-days span { font-family: var(--f-label); font-size: 2.6vmin; letter-spacing: .12em; }
.led-days [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.k-bus .couplet { font-size: 6.6em; color: #fff; }
.k-bus .tr-en { color: #d9d9d9; }
.k-bus .tr-local { color: #ffc23d; }

/* at the bus stand: a departures board, the couplet of the moment boarding now */
body.k-busstand { background: linear-gradient(180deg, #0f2240 0%, #0a1830 100%); }
.k-busstand .t-ta { color: #ffd23f; }
.k-busstand .digital b { color: #ffd23f; }
.k-busstand .next i { background: #ffd23f; }
.board { background: #050b16; border: .4vmin solid #1f3150; border-radius: 1.2vmin; overflow: hidden; }
.board-row { display: grid; grid-template-columns: 14vmin 12vmin minmax(0, 1fr) 24vmin; align-items: center; gap: 2.4vmin; padding: 1vmin 2.6vmin;
  border-top: .25vmin solid #172741; font-size: 3vmin; color: #ffd23f; }
.board-row > * { min-width: 0; }
.board-head { border-top: 0; background: #0d1a2e; font-family: var(--f-label); font-size: 1.8vmin; letter-spacing: .1em; color: #93a7c7; }
.board-head [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.board-row .t, .board-row .n { font-family: var(--f-clock); font-weight: 700; font-variant-numeric: tabular-nums; }
.board-row .ch { color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .ch [lang="en"] { font-family: var(--f-en); font-style: italic; color: #b9c6dc; font-size: .8em; margin-inline-start: 1.2vmin; }
.board-row .st { justify-self: start; font-family: var(--f-label); font-size: 2vmin; letter-spacing: .08em; padding: .5vmin 1.6vmin; border-radius: 999px; background: #1c2d49; color: #cfe0ff; white-space: nowrap; }
.board-row .st [lang="ta"] { font-family: var(--f-ta); letter-spacing: 0; }
.board-row.now { background: rgba(255,210,63,.09); }
.board-row.now .st { background: #18a04a; color: #fff; }
.board-row.soon .st { background: #f29f05; color: #14213d; }
.k-busstand .couplet { font-size: 5em; }
.k-busstand .kural { gap: 1.2em; }

@media (min-aspect-ratio: 5/2) {
  .k-metro .safe, .k-bus .safe, .k-busstand .safe { grid-template-rows: auto minmax(0, 1fr); }
  .k-metro .clock-box, .k-bus .clock-box, .k-busstand .clock-box,
  .k-metro .kural, .k-bus .kural, .k-busstand .kural, .k-metro .foot, .k-bus .foot, .k-busstand .foot { grid-row: 2; }
  .line-box, .led, .board { grid-column: 1 / -1; grid-row: 1; }
  .line-head, .route-note { display: none; }
  .route i { width: 5vmin; height: 5vmin; } .route li.here i { width: 8vmin; height: 8vmin; } .route li::after { top: 3.2vmin; height: 1.6vmin; }
  .route b { font-size: 4vmin; } .route li.here b { font-size: 5vmin; }
  .led-route, .led-days b { font-size: 16vmin; } .led-dest { font-size: 11vmin; } .led-days span { font-size: 3.4vmin; }
  .board-row:nth-child(n+4) { display: none; }
  .board-row { font-size: 5vmin; grid-template-columns: 20vmin 16vmin minmax(0, 1fr) 40vmin; } .board-head { font-size: 3vmin; } .board-row .st { font-size: 3.4vmin; }
}
@media (max-aspect-ratio: 4/5) {
  .route b { font-size: 2.2vmin; } .route li.here b { font-size: 2.8vmin; }
  .board-row { grid-template-columns: 12vmin 10vmin minmax(0, 1fr); } .board-row .st { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .route li.here i { animation: none; }
}