.tool { margin: 26px 0 8px; }
.tool .digits { font-variant-numeric: tabular-nums; }

.tdisp { font-family: Helvetica, Arial, var(--sans); font-weight: 700; letter-spacing: -.045em;
         font-size: clamp(54px, 14vw, 132px); line-height: 1; margin: 12px 0 8px;
         font-variant-numeric: tabular-nums; }

.tool.center { text-align: center; }
.tool.center .trow, .tool.center .chips { justify-content: center; }
.tool.center .laps { margin-left: auto; margin-right: auto; }
.tdisp small { font-size: .42em; font-weight: 600; color: #888; }
.tdisp.done { animation: tflash .5s steps(2, start) infinite; }
@keyframes tflash { to { visibility: hidden; } }

.trow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.trow .btn.big { font-size: 15px; padding: 10px 22px; }
.trow input[type=number] { width: 5.2em; font: inherit; font-size: 14px; padding: 6px 8px;
  border: 1px solid #d4d4d4; border-radius: 4px; text-align: right;
  font-variant-numeric: tabular-nums; }
.trow input[type=date], .trow input[type=datetime-local], .trow input[type=text].wide {
  font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #d4d4d4; border-radius: 4px; }
.trow input[type=text].wide { flex: 1 1 12em; min-width: 0; font-family: var(--mono); }
.tunit { font-size: 12px; color: #888; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chips .lnk { border: 1px solid #d4d4d4; border-radius: 999px; padding: 5px 12px;
  text-decoration: none; font-size: 12.5px; cursor: pointer; background: none; }
.chips .lnk[aria-pressed="true"] { border-color: currentColor; font-weight: 700; }

.laps { list-style: none; margin: 14px 0 0; padding: 0; max-width: 30em; }
.laps li { display: flex; gap: 14px; padding: 7px 2px; border-bottom: 1px solid #eee;
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.laps li b { min-width: 4.2em; font-weight: 600; color: #888; }
.laps li .grow { flex: 1; }

.tout { margin: 12px 0; font-size: 15px; line-height: 1.9; }
.tout b.huge { font-size: clamp(34px, 8vw, 64px); font-family: Helvetica, Arial, var(--sans);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: block; line-height: 1.2; }
.tout .dim { color: #888; font-size: 13px; }
.tcopy { font-size: 11.5px; margin-left: 8px; vertical-align: middle; }

.tcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 28px; margin: 8px 0; }
.tcols section { border-top: 1px solid #e5e5e5; padding-top: 10px; }
.tcols h2 { font-size: 15px; margin: 0 0 8px; }

.thelp { max-width: 46em; color: #444; font-size: 13.5px; line-height: 1.8; margin: 18px 0 0; }
.thelp h2 { font-size: 15px; }

.toolnav { list-style: none; padding: 0; margin: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.toolnav a { display: inline-block; border: 1px solid #d4d4d4; border-radius: 6px;
  padding: 8px 14px; text-decoration: none; font-size: 13.5px; }
.toolnav a:hover { border-color: currentColor; }
.toolnav a b { display: block; font-size: 14px; }
.toolnav a span { color: #888; font-size: 11.5px; }

.cityinfo p { margin: .45em 0 0; font-size: 13.5px; line-height: 1.8; max-width: 46em; }
.cityinfo .rel a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .tdisp { font-size: clamp(48px, 19vw, 96px); }
}