:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #181818;
  background: #fff;
  --green: #15804c;
  --red: #cd4138;
  --amber: #a35c00;
  --gray: #5a5a5a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 32px, 820px); margin: auto; padding: clamp(48px, 10vh, 108px) 0 44px; text-align: center; }
h1 { margin: 0 auto; max-width: 720px; font-size: clamp(37px, 6vw, 66px); letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.subtitle { margin: 16px 0 22px; font-size: clamp(19px, 3vw, 25px); color: #555; }
.install { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; background: #181818; color: #fff; border-radius: 5px; text-decoration: none; font-size: 15px; }
.install:hover { background: #424242; }
:focus-visible { outline: 2px solid #181818; outline-offset: 4px; }
.demo { margin: clamp(34px, 6vw, 59px) auto 0; max-width: 760px; }
.graph { display: block; width: 100%; overflow: visible; }
.grid-line { fill: none; stroke: #efefef; stroke-dasharray: 2 8; }
.rail, .route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rail { stroke: #e4e4e4; stroke-width: 2; }
.spine { stroke: url(#fade-rail); }
.route { stroke: var(--tone); stroke-width: 2.7; }
.green { --tone: var(--green); --tint: #e8f5ed; }
.red { --tone: var(--red); --tint: #fcece9; }
.amber { --tone: var(--amber); --tint: #fff3df; }
.charcoal { --tone: var(--gray); --tint: #f0f0f0; }
.source > circle { fill: #f7f7f7; stroke: #eaeaea; }
.source .symbol { color: #4c4c4c; stroke-width: 1.4; }
.stamp { color: var(--tone); }
.stamp > circle:not(.wave):not(.eye) { fill: var(--tint); stroke: var(--tone); stroke-width: 1.2; }
.stamp .eye { fill: var(--tone); }
.symbol { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot { fill: var(--tone); stroke: white; stroke-width: 1.8; }
.wave, .scan-ring, .scan-beam { fill: none; stroke: var(--tone); }
.wave { stroke-width: 1.5; opacity: 0; }
.scan-ring { stroke-width: 1.6; stroke-dasharray: 1 5; }
.scan-beam { stroke-width: 1.8; stroke-linecap: round; }
#scanner, #agent, #review, #repair-rail { opacity: 0; }
#top-check, #bottom-check, #failure, #success, #scanner, .checks, #review { pointer-events: none; }
.controls { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: -2px; }
.controls button { display: grid; place-items: center; width: 36px; height: 38px; border: 0; background: none; color: #181818; cursor: pointer; border-radius: 6px; }
.controls button:hover { background: #f4f4f4; }
.play { margin-right: 4px; }
.play path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.play [data-icon="play"] { fill: currentColor; }
.chapter::before { content: ""; width: 15px; height: 3px; border-radius: 5px; background: #ddd; }
.chapter[aria-current]::before { background: #181818; }
details { margin: 28px auto 0; max-width: 560px; text-align: left; color: #555; font-size: 14px; line-height: 1.6; }
summary { width: fit-content; margin-inline: auto; cursor: pointer; }
details li + li { margin-top: 7px; }
code { overflow-wrap: anywhere; }
@media (max-width: 500px) {
  .demo { width: calc(100% + 20px); margin-inline: -10px; }
  .controls button { width: 42px; height: 42px; }
}