/* See it work: one pinned stage that the scroll drives through six beats (scene.js). Without script, or for anyone who
   asks for less motion, the stage shows the finished exchange and the steps as text. Every color and size is the site's. */
/* The opening, centered like a launch: the title, a line under it, and a cue that points down into the scene. */
.scene-head { display: grid; justify-items: center; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 184px 0 72px; text-align: center; }
.scene-head > * { min-width: 0; max-width: 100%; }
.scene-head h1 { max-width: 15ch; margin: 20px 0 0; font-size: var(--t-8xl); line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; }
.scene-head .lede { max-width: 52ch; margin: 28px 0 0; color: var(--ink-2); font-size: var(--t-xl); line-height: var(--l-xl); text-wrap: balance; }
.scene-head .sample { margin: 20px 0 0; color: var(--muted); font: 400 var(--t-xs)/var(--l-xs) var(--mono, ui-monospace, monospace); }
.scene-head .cue { display: none; }
.has-scene .scene-head .cue { display: grid; justify-items: center; gap: 12px; margin: 56px 0 0; color: var(--muted); font: 400 var(--t-xs)/var(--l-xs) var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.has-scene .scene-head .cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--ink), transparent); }

.scene, .scene-head, .after { min-width: 0; }
.scene { position: relative; }
.scene.live { height: 720svh; }
.stage { position: relative; display: grid; grid-template-columns: 252px minmax(0, 540px) 272px; justify-content: center; align-items: center; gap: 40px; width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 64px; }
.scene.live .stage { position: sticky; top: 0; height: 100svh; padding: 96px 0 32px; overflow: hidden; }
.scene [hidden] { display: none !important; }

/* The wall of documents behind everything, drawn by scene.js: each a small page with a letterhead, a number and lines
   with amounts. */
.wall { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
.doc { position: absolute; top: 0; left: 0; display: grid; align-content: start; gap: 5px; width: 92px; height: 120px; padding: 9px 9px 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 5px; background: #fbfaf8; box-shadow: 0 1px 2px rgb(20 21 24 / 0.05), 0 12px 24px -14px rgb(20 21 24 / 0.32); transform-origin: 50% 50%; will-change: transform, opacity; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.doc header { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 3px; }
.doc header i { width: 9px; height: 9px; border-radius: 2px; background: rgb(20 21 24 / 0.16); }
.doc header em { color: var(--muted); font: 500 6.5px/1 var(--mono, ui-monospace, monospace); font-style: normal; letter-spacing: 0.04em; white-space: nowrap; }
.doc b { color: var(--ink); font: 600 7.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.doc u { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 6px; margin-top: 1px; padding: 1px 2px; border-radius: 2px; text-decoration: none; transition: background-color 300ms var(--ease); }
.doc u::before, .doc u::after { content: ""; height: 3px; border-radius: 2px; background: rgb(20 21 24 / 0.12); transition: background-color 300ms var(--ease); }
.doc u:nth-of-type(2n)::before { width: 72%; } .doc u:nth-of-type(3n)::before { width: 84%; }
.doc s { justify-self: end; width: 34px; height: 4px; margin-top: 4px; border-radius: 2px; background: rgb(20 21 24 / 0.28); }
.doc.key { border-color: var(--ink); box-shadow: 0 1px 2px rgb(20 21 24 / 0.08), 0 18px 32px -14px rgb(20 21 24 / 0.45); }
.doc u.hit { background: rgb(20 21 24 / 0.08); }
.doc u.hit::before, .doc u.hit::after { background: var(--ink); }

/* The steps, down the left. The one playing is in full ink, with a hairline that fills as it plays. */
.beats { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.beats li { position: relative; padding: 13px 0 13px 40px; color: var(--muted); transition: color 300ms var(--ease); }
.beats li::before { content: attr(data-n); position: absolute; left: 0; top: 16px; font: 400 var(--t-xs)/1 var(--mono, ui-monospace, monospace); }
.beats li b { display: block; color: inherit; font-size: var(--t-base); line-height: var(--l-base); font-weight: 600; text-wrap: balance; }
.beats li span { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: var(--l-sm); text-wrap: pretty; }
.beats li em { display: none; }
.scene.live .beats li span { display: none; }
.scene.live .beats li.now span { display: block; }
.scene.live .beats li.now em { display: block; height: 1px; margin-top: 12px; overflow: hidden; background: var(--line-2); }
.beats li em i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.beats li.now, .scene:not(.live) .beats li { color: var(--ink); }
.beats li.now span, .scene:not(.live) .beats li span { color: var(--ink-2); }

/* The chat window, in front of the wall: who it is and what it can read, the conversation, and the box to ask in. */
.chat { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 560px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-3xl); background: #fbfaf8; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6) inset, 0 2px 4px rgb(20 21 24 / 0.05), 0 40px 80px -32px rgb(20 21 24 / 0.5); }
.chat header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.chat .who { display: grid; gap: 1px; }
.chat .who b { color: var(--ink); font-size: var(--t-sm); line-height: var(--l-sm); font-weight: 600; }
.chat .who small { color: var(--muted); font-size: var(--t-xs); line-height: var(--l-xs); }
.chat .sources { display: flex; gap: 6px; }
.chat .sources i { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: #ffffff; color: var(--ink-2); font: 500 11px/1 var(--mono, ui-monospace, monospace); font-style: normal; }
.chat .sources i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.chat .log { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; overflow: hidden; }
.ask { align-self: flex-end; max-width: 86%; margin: 0; padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--on-dark); font-size: var(--t-sm); line-height: var(--l-sm); text-wrap: pretty; transform-origin: 100% 100%; }
.composer { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 8px 8px 8px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2xl); background: #ffffff; box-shadow: 0 1px 2px rgb(20 21 24 / 0.04); }
.composer .prompt { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--t-sm); line-height: var(--l-sm); white-space: nowrap; }
.composer .prompt.typing { color: var(--ink); }
.composer .caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--ink); }
.composer .send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(20 21 24 / 0.12); color: #ffffff; transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.composer .send svg { width: 14px; height: 14px; }
.composer.ready .send { background: var(--ink); }
.composer.pressed .send { transform: scale(0.88); }

/* The trace: each step spins while it works, counts up, and is checked off when done. */
.trace { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); list-style: none; }
.trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; line-height: 18px; }
.trace li b { color: var(--ink); font: 500 12px/18px var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.trace li i { position: relative; width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: 50%; }
.trace li.run { color: var(--ink); }
.trace li.run i { border-color: rgb(20 21 24 / 0.16); border-top-color: var(--ink); animation: spin 700ms linear infinite; }
.trace li.done { color: var(--ink-2); }
.trace li.done i { border-color: var(--ink); background: var(--ink); }
.trace li.done i::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid #ffffff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.scene:not(.live) .trace li i { border-color: var(--ink); background: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* The check: the agreed price against every line billed. */
.check { margin: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); font-size: 12.5px; }
.check div { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px 44px; align-items: center; gap: 8px; padding: 5px 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 200ms linear; }
.check div:first-child { border-top: 0; color: var(--muted); font: 400 11px/1.5 var(--mono, ui-monospace, monospace); }
.check div > span:first-child { overflow: hidden; text-overflow: clip; }
.check em { font-style: normal; text-align: right; }
.check strong { font-weight: 600; text-align: right; color: var(--ink); }
.check .flag { justify-self: end; }
.check .over .flag { padding: 0 5px; border-radius: 4px; background: var(--ink); color: var(--on-dark); font: 500 10px/16px var(--mono, ui-monospace, monospace); }
.scene.live .check .row.over:not(.flagged) .flag { visibility: hidden; }
.scene.live .check .row:not(.on) { opacity: 0.25; }

/* The answer, with its sources, and the choice that waits for a person. */
.answer-msg { max-width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: #ffffff; color: var(--ink); font-size: var(--t-sm); line-height: var(--l-sm); text-wrap: pretty; }
.answer-msg p { margin: 0; }
.answer-msg sup { font: 500 10px/1 var(--mono, ui-monospace, monospace); }
.answer-msg sup a { display: inline-block; min-width: 16px; padding: 2px 4px; border-radius: 4px; background: rgb(20 21 24 / 0.07); color: var(--ink); text-align: center; text-decoration: none; }
.answer-msg .w { transition: opacity 160ms linear; }
.decide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.decide span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.decide span:first-child { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }

/* The evidence, down the right: each line lifted out of a document, with where it came from. A card lights up when
   the answer cites it. */
.evidence { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.evidence > b { display: block; margin-bottom: 12px; color: var(--muted); font: 500 var(--t-xs)/var(--l-xs) var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
.evidence li { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: #fbfaf8; box-shadow: 0 1px 2px rgb(20 21 24 / 0.04), 0 10px 20px -14px rgb(20 21 24 / 0.3); font-size: 13px; line-height: 18px; will-change: transform, opacity; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), background-color 300ms var(--ease); }
.evidence li small { display: block; margin-bottom: 3px; color: var(--muted); font: 400 10.5px/14px var(--mono, ui-monospace, monospace); white-space: nowrap; }
.evidence li sup { margin-right: 6px; font: 500 10px/1 var(--mono, ui-monospace, monospace); }
.evidence li.cited { border-color: var(--ink); background: #ffffff; box-shadow: 0 1px 2px rgb(20 21 24 / 0.06), 0 16px 28px -16px rgb(20 21 24 / 0.45); }

/* The side columns sit on a soft paper so they read over the documents behind them. */
.scene.live .beats, .scene.live .evidence { padding: 16px; border-radius: var(--r-2xl); background: rgb(233 231 226 / 0.94); box-shadow: 0 0 28px 22px rgb(233 231 226 / 0.9); }
/* Still, the chat grows to hold the whole exchange, and the box to ask in is not needed. */
.scene:not(.live) .chat { height: auto; }
.scene:not(.live) .composer { display: none; }

/* What follows the stage. */
.after { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 96px 0 0; }
.after .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.after h2 { margin: 0 0 24px; font-size: var(--t-4xl); line-height: var(--l-4xl); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.after h3 { margin: 0 0 8px; font-size: var(--t-lg); line-height: var(--l-lg); font-weight: 600; text-wrap: balance; }
.after p { margin: 0; color: var(--ink-2); font-size: var(--t-base); line-height: var(--l-base); text-wrap: pretty; }
.after .links { margin-top: 48px; }
.after .links h3 { margin: 0; }

@media (max-width: 1100px) {
  .stage { grid-template-columns: minmax(0, 540px) 252px; }
  .beats { grid-column: 1 / -1; }
  .scene.live .beats li { display: none; }
  .scene.live .beats li.now { display: block; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 820px) {
  .scene-head { width: 100%; padding: 128px 0 48px; }
  .scene-head h1 { font-size: var(--t-5xl); }
  .scene-head .lede { font-size: var(--t-lg); line-height: var(--l-lg); text-wrap: pretty; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
  .scene.live .stage { align-content: start; padding-top: 88px; }
  .chat { height: 470px; }
  .check div { grid-template-columns: minmax(0, 1fr) 40px 44px 40px; gap: 6px; padding: 5px 10px; }
  .evidence { display: none; }
  .scene:not(.live) .evidence { display: block; }
  .doc { width: 64px; height: 84px; gap: 4px; padding: 6px 6px 0; }
  .doc header em { display: none; }
  .doc b { font-size: 5.5px; }
  .doc u::before, .doc u::after { height: 2px; }
  .after { width: 100%; }
  .after .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .chat .sources { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scene.live { height: auto; } .scene.live .stage { position: relative; height: auto; } .trace li.run i { animation: none; } }

/* The second opening, a step smaller than the page's title. */
.scene-head.next { padding: 160px 0 56px; }
.scene-head h2 { max-width: 16ch; margin: 20px 0 0; font-size: var(--t-7xl); line-height: 1; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.scene.pipe.live { height: 620svh; }
.pipe .stage { grid-template-columns: 252px minmax(0, 560px) 272px; }

/* The stations along the top, a rail that fills as the invoice moves, and one pane for the work at each. */
.flow { position: relative; z-index: 2; display: grid; gap: 20px; }
.stations { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stations li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 300ms var(--ease); }
.stations li i { position: relative; width: 28px; height: 28px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface); transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
.stations li.now { color: var(--ink); }
.stations li.now i { border-color: var(--ink); box-shadow: 0 0 0 5px rgb(20 21 24 / 0.07); }
.stations li.done { color: var(--ink-2); }
.stations li.done i { border-color: var(--ink); background: var(--ink); }
.stations li.done i::after { content: ""; position: absolute; left: 9.5px; top: 6px; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.stations .rail { position: absolute; top: 13px; left: 10%; right: 10%; height: 1px; background: var(--line-2); }
.stations .rail i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }

.panes { position: relative; height: 430px; }
.pane { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 22px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-3xl); background: #fbfaf8; box-shadow: 0 2px 4px rgb(20 21 24 / 0.05), 0 40px 80px -32px rgb(20 21 24 / 0.5); will-change: transform, opacity; }
.pane .label { margin: 0; color: var(--muted); font: 500 var(--t-xs)/var(--l-xs) var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.scene:not(.live) .panes { display: grid; gap: 16px; height: auto; }
.scene:not(.live) .pane { position: relative; inset: auto; }

.mail { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #ffffff; }
.mail p { margin: 0; }
.mail p:first-child { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mail p:first-child span { color: var(--muted); font-size: 13px; }
.mail .subj { font-size: var(--t-lg); line-height: var(--l-lg); font-weight: 600; }
.mail .file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); font-size: 13px; font-weight: 500; white-space: nowrap; }
.mail .file i { width: 14px; height: 18px; border: 1.5px solid var(--ink); border-radius: 2px; }
.mail .file small { margin-left: auto; color: var(--muted); font-weight: 400; }

.invoice { display: grid; border: 1px solid var(--line); border-radius: var(--r-xl); background: #ffffff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.invoice header { display: grid; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.invoice header b { font: 600 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: 0.08em; }
.invoice header span { color: var(--muted); font-size: 12px; }
.invoice .line { display: grid; grid-template-columns: minmax(0, 1fr) 52px 44px 64px; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; transition: background-color 300ms var(--ease); }
.invoice .line:first-of-type { border-top: 0; }
.invoice .line em { font-style: normal; text-align: right; }
.invoice .line strong { font-weight: 600; text-align: right; color: var(--ink); }
.invoice .line.read { background: rgb(20 21 24 / 0.05); }
.invoice footer { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line-2); font-weight: 600; }
.scene.live .invoice .line:not(.seen), .scene.live .invoice footer:not(.seen) { opacity: 0.2; }

.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #ffffff; transition: opacity 250ms linear, transform 250ms var(--ease); }
.ticks li i { grid-row: span 2; position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.ticks li i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.ticks li b { font-size: var(--t-sm); line-height: var(--l-sm); }
.ticks li span { color: var(--muted); font-size: 13px; line-height: 18px; }
.scene.live .ticks li:not(.on) { opacity: 0; transform: translateY(8px); }

.pane .check { font-size: 12.5px; }
.approve { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: #ffffff; box-shadow: var(--shadow); }
.approve p { margin: 0; font-size: var(--t-base); line-height: var(--l-base); text-wrap: pretty; }
.approve .why { color: var(--ink-2); font-size: 13px; line-height: 19px; }
.approve .done { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; }
.approve .done::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.scene.live .approve .done:not(.on) { opacity: 0; }
.approve .decide span { transition: transform 200ms var(--ease); }
.approve.pressed .decide span:first-child { transform: scale(0.94); }

/* The activity, down the right: each action with its time, so nothing happens off the record. */
.activity { position: relative; z-index: 2; }
.activity > b { display: block; margin-bottom: 12px; color: var(--muted); font: 500 var(--t-xs)/var(--l-xs) var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
.activity ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.activity li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 16px; font-size: 13px; line-height: 18px; transition: opacity 250ms linear; }
.activity li::before { content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.activity time { color: var(--muted); font: 400 11px/14px var(--mono, ui-monospace, monospace); }
.scene.live .activity li:not(.on) { opacity: 0; }

@media (max-width: 1100px) {
  .pipe .stage { grid-template-columns: minmax(0, 560px) 252px; }
}
@media (max-width: 820px) {
  .scene-head.next { padding: 112px 0 40px; }
  .scene-head h2 { font-size: var(--t-5xl); }
  .pipe .stage { grid-template-columns: minmax(0, 1fr); }
  .scene.live .activity { display: none; }
  .stations li span { font-size: 11px; }
  .stations li i { width: 22px; height: 22px; }
  .stations li.done i::after { left: 7px; top: 4px; }
  .stations .rail { top: 10px; }
  .panes { height: 400px; }
  .pane { padding: 16px; }
  .invoice .line { grid-template-columns: minmax(0, 1fr) 44px 40px 58px; gap: 6px; padding: 6px 10px; }
}
@media (max-width: 420px) {
  .scene-head h1 { font-size: 40px; }
  .scene-head h2 { font-size: 36px; }
}
/* Still, every station is done. */
.scene:not(.live) .stations li { color: var(--ink-2); }
.scene:not(.live) .stations li i { border-color: var(--ink); background: var(--ink); }
.scene:not(.live) .stations li i::after { content: ""; position: absolute; left: 9.5px; top: 6px; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.scene:not(.live) .stations .rail i { transform: none; }