:root {
  --ink: #16223a; --sub: #58647d; --line: #e3e8f0; --wash: #f1f5f9;
  --a: #2a78d6; --b: #eb6834; --teal: #0f766e; --rose: #fff1f2; --rose-line: #fda4af;
  --r: 40px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font: 15px/1.45 Arial, Helvetica, sans-serif; }
button { font: inherit; }
.card { min-height: 100vh; padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
h1 { margin: 0; font-size: 17px; line-height: 1.25; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; }
button { border: 1px solid #c3cddc; background: #fff; color: var(--ink); padding: 6px 11px; border-radius: 8px; font-size: 13px; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
button:hover { border-color: var(--ink); }
button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--sub); }
.key { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.sw.a { background: var(--a); } .sw.b { background: var(--b); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--teal); background: #e8f5f3; color: var(--teal); font-size: 12px; font-weight: 700; white-space: nowrap; }

.list { position: relative; list-style: none; margin: 4px 0 0; padding: 0; height: calc(8 * var(--r)); }
.item {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--r) - 4px);
  transform: translateY(calc(var(--pos, 0) * var(--r)));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), background-color .3s, border-color .3s;
  display: grid; grid-template-columns: 30px 116px 1fr 92px 108px; column-gap: 10px; align-items: center;
  padding: 0 8px; border: 1px solid transparent; border-radius: 8px;
}
.item.out { background: var(--rose); border-color: var(--rose-line); }
.rank { font-size: 13px; color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }
.id { font-weight: 700; font-size: 14px; white-space: nowrap; }
.id .pre { font-weight: 400; color: var(--sub); }
.bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track { position: relative; height: 9px; border-radius: 3px; background: var(--wash); }
.fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 0 3px 3px 0; transition: width .6s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.a .fill { background: var(--a); } .b .fill { background: var(--b); }
.dim .fill { opacity: .28; }
.none { position: absolute; left: 6px; top: -3px; font-size: 11px; color: var(--sub); white-space: nowrap; }
.vals { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; line-height: 1.3; }
.vals b { color: var(--ink); font-size: 13px; }
.badge { justify-self: start; }

.verdict { margin: 4px 0 0; padding: 10px 12px; border-left: 4px solid var(--teal); background: #f2f9f8; font-size: 15px; line-height: 1.4; }
.note { margin: 0; font-size: 13px; color: var(--sub); }
.src { margin: auto 0 0; font-size: 12px; color: var(--sub); }

@media (max-width: 640px) {
  :root { --r: 46px; }
  .card { padding: 14px 12px 12px; }
  .item { grid-template-columns: 22px 84px 1fr 70px; column-gap: 8px; padding: 0 4px; }
  .id .pre { display: none; }
  .badge { display: none; }
  .item.clock .id::after { content: " clock"; color: var(--teal); font-size: 11px; font-weight: 700; }
  .item.clock .id { color: var(--teal); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}