:root {
  --ink: #16223a; --sub: #58647d; --line: #e3e8f0; --wash: #f1f5f9;
  --a: #2a78d6; --b: #eda100; --c: #eb6834; --teal: #0f766e;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font: 15px/1.45 Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
.card { min-height: 100vh; padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 17px; line-height: 1.25; }
button { border: 1px solid #c3cddc; background: #fff; color: var(--ink); padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: background-color .15s, border-color .15s; }
button:hover { border-color: var(--ink); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.play { background: var(--ink); border-color: var(--ink); color: #fff; min-width: 84px; }

.clockrow { display: grid; grid-template-columns: auto 1fr; gap: 12px 26px; align-items: center; }
.clock { display: flex; flex-direction: column; }
.clock span { font-size: 40px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.clock small { font-size: 12px; color: var(--sub); margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--line); }
.sl { font-size: 12px; color: var(--sub); }
.stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }

.scrub { position: relative; }
.bar { position: relative; height: 26px; border-radius: 6px; overflow: hidden; background: var(--wash); }
.seg { position: absolute; top: 0; bottom: 0; }
.s1 { background: var(--a); } .s2 { background: var(--b); } .s3 { background: var(--c); }
.mask { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, .72); }
.cursor { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.scrub input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 4px 0 0; background: transparent; cursor: pointer;
}
.scrub input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #d3dae6; }
.scrub input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #d3dae6; }
.scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); }
.scrub input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--sub); margin-top: 2px; }
.legend span { 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); } .sw.c { background: var(--c); }

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.events button { width: 100%; display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 7px 10px; border-color: var(--line); background: #fff; color: #8791a6; transition: color .3s, background-color .3s, border-color .3s; }
.events button .t { font-variant-numeric: tabular-nums; font-weight: 700; }
.events button .o { font-size: 12px; font-variant-numeric: tabular-nums; }
.events button.on { color: var(--ink); }
.events button.now { border-color: var(--ink); background: #f7f9fc; }

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

@media (max-width: 640px) {
  .card { padding: 14px 14px 12px; }
  .clockrow { grid-template-columns: 1fr; }
  .clock span { font-size: 34px; }
  .stats { grid-template-columns: 1fr; gap: 6px; }
  .events button { grid-template-columns: 70px 1fr; }
  .events button .o { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}