/* Layout */
.timer-layout {
  display: flex;
  height: 100vh;           /* Fills the viewport */
  font-family: system-ui, sans-serif;
}

.timer-panel {
  flex: 0 0 18rem;         /* Fixed‑width left rail */
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speech-panel {
  flex: 1 1 auto;          /* Take the rest of the width */
  padding: 2rem;
  overflow-y: auto;
  line-height: 1.6;
  font-size: 1.25rem;
}

/* Timer face */
.timer-face {
  font-size: 6rem;
  font-variant-numeric: tabular-nums;
  color: #0f0;             /* Start green */
  transition: color 0.3s;
}

/* Color shifts as time runs out */
.timer-face.warning  { color: #ffa500; }   /* last 25 % */
.timer-face.critical { color: #ff4444; }   /* last 10 % */