.si-ribbon {
  --si-ink: #ebf8fc;
  --si-muted: #b5cbd5;
  --si-signal: #89d9eb;
  --si-fine: #537883;
  --si-track: #385664;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: min(100%, 540px);
  height: 78px;
  box-sizing: border-box;
  padding-block: 5px;
  border-top: 1px solid rgb(159 212 229 / 27%);
  background: linear-gradient(90deg, rgb(6 18 30 / 83%), rgb(8 21 34 / 68%) 72%, rgb(8 21 34 / 30%));
  color: var(--si-ink);
  container: instruments / inline-size;
  pointer-events: auto;
}

.si-ribbon .si-instrument {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(43px, 64px) minmax(0, 1fr);
  grid-template-rows: 1fr 1.55fr;
  align-items: center;
  align-content: center;
  gap: 2px 7px;
  height: 56px;
  min-width: 0;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 0;
  border-inline-start: 1px solid rgb(159 212 229 / 17%);
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.si-ribbon .si-instrument:first-child { border-inline-start-color: transparent; }
.si-ribbon .si-instrument:hover { background: rgb(122 205 224 / 6%); }
.si-ribbon .si-instrument:focus-visible { outline: 2px solid var(--si-signal); outline-offset: -2px; }
.si-ribbon .si-instrument svg {
  grid-area: 1 / 1 / span 2 / 2;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-width: .85;
}
.si-ribbon .si-label {
  grid-area: 1 / 2;
  align-self: end;
  color: var(--si-muted);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: .055em;
  white-space: nowrap;
}
.si-ribbon .si-reading {
  grid-area: 2 / 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: start;
  align-self: start;
  gap: 1px 3px;
  min-width: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.si-ribbon .si-value {
  color: var(--si-ink);
  font: 500 21px/1.08 "Bahnschrift", "DIN Alternate", "Arial", sans-serif;
  letter-spacing: -.045em;
}
.si-ribbon .si-unit {
  color: var(--si-muted);
  font: 500 9px/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.si-ribbon .si-hairline { stroke: var(--si-track); }
.si-ribbon .si-fine { stroke: var(--si-fine); }
.si-ribbon .si-ticks { stroke: var(--si-muted); }
.si-ribbon .si-track { stroke: var(--si-track); }
.si-ribbon .si-active { stroke: var(--si-signal); }
.si-ribbon .si-dot { fill: var(--si-signal); }
.si-ribbon .si-pointer { fill: var(--si-ink); }
.si-ribbon .si-hub { fill: #0b1c2b; stroke: var(--si-signal); }
.si-ribbon .si-engraving { fill: var(--si-muted); font: 6.5px ui-monospace, Consolas, monospace; }
.si-ribbon .si-sector, .si-ribbon .si-area { fill: var(--si-signal); opacity: .15; }
.si-ribbon .si-sweep { visibility: hidden; }
.si-ribbon .si-threat { --si-signal: #ffc27e; }
.si-ribbon .si-threat .si-value { color: var(--si-signal); }
.si-ribbon .si-threat .si-sweep {
  visibility: visible;
  transform-origin: 33px 25px;
  animation: si-scan 2.5s linear infinite;
}
.si-ribbon.si-paused .si-sweep { animation-play-state: paused; }
@keyframes si-scan { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .si-ribbon .si-threat .si-sweep { animation: none; }
}
@container instruments (max-width: 475px) {
  .si-ribbon .si-instrument { grid-template-columns: minmax(31px, .78fr) minmax(0, 1.22fr); gap: 2px 4px; padding-inline: 5px; }
  .si-ribbon .si-value { font-size: 19px; }
  .si-ribbon .si-label { letter-spacing: .02em; }
}
@container instruments (max-width: 370px) {
  .si-ribbon .si-instrument { grid-template-columns: minmax(23px, .60fr) minmax(0, 1.4fr); }
  .si-ribbon .si-label { font-size: 9px; }
  .si-ribbon .si-value { font-size: 17px; }
  .si-ribbon .si-unit { font-size: 8px; }
}
@container instruments (max-width: 325px) {
  .si-ribbon .si-label { grid-area: 1 / 1 / 2 / 3; }
  .si-ribbon .si-instrument svg { grid-area: 2 / 1; }
  .si-ribbon .si-reading { align-self: center; }
}