.timer-panel {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(174, 192, 165, 0.16);
}

.timer-panel[hidden] {
  display: none;
}

.timer-remaining {
  margin: 0 0 0.68rem;
  color: rgba(221, 228, 215, 0.72);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.timer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.46rem;
}

.timer-options button {
  min-height: 2.55rem;
  border: 1px solid rgba(175, 195, 166, 0.2);
  border-radius: 2px;
  background: rgba(9, 28, 23, 0.3);
  color: rgba(218, 226, 211, 0.68);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timer-options button[aria-pressed="true"] {
  border-color: rgba(204, 216, 196, 0.62);
  background: rgba(151, 177, 143, 0.16);
  color: rgba(234, 238, 229, 0.96);
}

.timer-options button:focus-visible {
  outline: 2px solid rgba(226, 233, 218, 0.82);
  outline-offset: 2px;
}

@media (max-height: 700px) {
  .timer-panel {
    margin-top: 0.58rem;
    padding-top: 0.58rem;
  }

  .timer-options button {
    min-height: 2.25rem;
  }
}