.tempo-page { --phase-back:#346d52; --phase-down:#ba632c; }
.tempo-page [hidden] { display:none; }
.tempo-workbench, .tempo-drill-grid {
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,6vw,94px);
  align-items:start;
  padding-block:clamp(48px,6vw,94px);
}
.tempo-intro h1 {
  max-width:11em;
  font-size:clamp(38px,4.15vw,64px);
  line-height:1.04;
  text-wrap:balance;
}
.tempo-intro .lead { max-width:38ch; }
.tempo-formula { border-top:1px solid var(--line); margin-top:34px; padding-top:24px; }
.tempo-formula h2, .tempo-results h2 { font-size:clamp(22px,2vw,29px); letter-spacing:-.025em; }
.tempo-formula>p, .tempo-drill p { color:var(--muted); font-size:16px; line-height:1.65; margin:10px 0 0; }
.tempo-formula .tempo-equation { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; color:var(--forest); font-variant-numeric:tabular-nums; }
.tempo-equation span:last-child { padding-left:16px; border-left:1px solid #a2b8a7; }
.tempo-instrument { border:1px solid #c9d6cb; border-radius:8px; overflow:hidden; }
.tempo-form, .tempo-results, .tempo-nojs { padding:clamp(20px,3vw,38px); }
.tempo-form fieldset { min-width:0; padding:0; margin:0 0 20px; border:0; }
.tempo-form legend { padding:0; margin-bottom:9px; font-size:18px; font-weight:650; }
.tempo-form small { color:var(--muted); font-size:14px; font-weight:400; }
.tempo-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tempo-fields label { display:grid; gap:5px; color:var(--text); font-size:14px; }
.tempo-fields input {
  display:block;
  width:100%;
  min-width:0;
  min-height:44px;
  border:1px solid #82948b;
  border-radius:4px;
  padding:8px 10px;
  color:var(--forest);
  background:#fff;
  font:600 18px/1.3 Arial,Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;
}
.tempo-fields input:focus-visible, .tempo-submit:focus-visible, .tempo-links a:focus-visible { outline:3px solid #266e49; outline-offset:2px; }
.tempo-fields input[aria-invalid=true] { border:2px solid #a13024; }
.tempo-submit { border:none; cursor:pointer; }
.tempo-local, .tempo-nojs { color:var(--muted); font-size:14px; line-height:1.5; }
.tempo-local { margin:10px 0 0; }
.tempo-error { margin:0; color:#97301f; font-size:14px; }
.tempo-error:not(:empty) { margin:0 0 12px; }
.tempo-results { border-top:1px solid #c9d6cb; background:#eef4ed; }
.tempo-legend { display:flex; flex-wrap:wrap; gap:7px 16px; margin:12px 0 22px; font-size:13px; }
.tempo-legend span { display:inline-flex; align-items:center; gap:6px; }
.tempo-legend span::before { content:""; width:12px; height:7px; background:var(--phase-back); }
.tempo-legend span+span::before { background:var(--phase-down); }
.tempo-trace+.tempo-trace { margin-top:18px; }
.tempo-trace>p:first-child { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0; font-size:15px; }
.tempo-trace strong { font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tempo-track { display:flex; height:12px; margin:5px 0; background:#dce6dc; }
.tempo-track span { height:100%; }
.tempo-track span:first-child { background:var(--phase-back); }
.tempo-track span+span { background:var(--phase-down); }
#your-bar-back { width:60%; }
#your-bar-down { width:20%; }
#other-bar-back { width:75%; }
#other-bar-down { width:25%; }
.tempo-duration { margin:0; font-size:14px; color:#43574a; font-variant-numeric:tabular-nums; }
.tempo-reading { border-top:1px solid #c1cfbf; padding-top:15px; margin:20px 0 0; color:#304f3e; font-size:15px; line-height:1.55; }
.tempo-drill { background:var(--pale); }
.tempo-drill h2 { max-width:12em; font-size:clamp(31px,3.6vw,51px); line-height:1.08; }
.tempo-drill-notes h3 { font-size:21px; }
.tempo-drill-notes p+h3 { margin-top:22px; }
.tempo-links { display:flex; gap:12px 24px; flex-wrap:wrap; align-items:baseline; margin-top:24px; }
@media (max-width:800px) {
  .tempo-workbench, .tempo-drill-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .tempo-intro .lead, .tempo-intro h1 { max-width:100%; }
  .tempo-formula { margin-top:22px; padding-top:18px; }
  .tempo-formula>p { max-width:60ch; }
}
@media (max-width:360px) {
  .tempo-form, .tempo-results, .tempo-nojs { padding:16px; }
  .tempo-fields { gap:8px; }
}