:root { color-scheme: light; font-family: "Malgun Gothic", sans-serif; color: #111; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 54px; }
.eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #666; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1.5px; }
header > p:last-child { margin: 14px 0 0; color: #444; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 32px 0 30px; padding: 16px; border: 1px solid #bbb; }
button { min-width: 92px; padding: 11px 18px; border: 1px solid #111; background: #111; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { background: #fff; color: #111; }
button:focus-visible, input:focus-visible { outline: 3px solid #999; outline-offset: 2px; }
label { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
input { width: 180px; accent-color: #111; }
output { min-width: 44px; }
.time { margin-left: auto; font-variant-numeric: tabular-nums; }
.track-card { padding: 20px 0 24px; border-top: 1px solid #ccc; }
.track-head { display: grid; grid-template-columns: 190px 1fr 160px; gap: 16px; align-items: baseline; margin-bottom: 15px; }
.track-head h2 { margin: 0; font-size: 22px; }
.formula { color: #444; font-family: Cambria, serif; font-size: 19px; }
.values { text-align: right; color: #444; font-variant-numeric: tabular-nums; }
.track { position: relative; height: 68px; margin: 0 22px; border-bottom: 3px solid #111; }
.track::before, .track::after { position: absolute; bottom: -25px; font-size: 13px; color: #666; }
.track::before { content: "0"; left: -3px; }
.track::after { content: "1"; right: -3px; }
.marker { position: absolute; left: 0; bottom: -12px; width: 25px; height: 25px; border: 3px solid #111; border-radius: 50%; background: #fff; transform: translateX(-50%); }
.marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #111; }
.observation { margin-top: 35px; padding: 20px 24px; background: #f4f4f4; }
.observation h2 { margin: 0 0 12px; font-size: 21px; }
.observation ol { margin: 0; padding-left: 24px; line-height: 1.9; }
@media (max-width: 720px) {
  .track-head { grid-template-columns: 1fr; gap: 4px; }
  .values { text-align: left; }
  .time { width: 100%; margin-left: 0; }
  label { margin-left: 0; flex-wrap: wrap; }
}