@charset "UTF-8";
.timer-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
}

.timer-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
}

#phaseDisplay {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.2em;
}

#timeDisplay {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

#roundDisplay {
  font-size: 0.9rem;
  margin-top: 0.2em;
  color: #555;
}

/* Remove default marker if you want a custom arrow: */
.settings-summary {
  list-style: none; /* hide default triangle */
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
}

/* Add your own arrow via pseudo-element: */
.settings-summary::before {
  content: "⚙"; /* right‑pointing triangle */
  display: inline-block;
  margin-right: 0.5em;
  font-size: xx-large;
  transition: transform 0.2s ease;
}

/* Rotate arrow when open: */
details[open] .settings-summary::before {
  transform: rotate(90deg);
}

/* Optional spacing / style tweaks */
.settings-summary {
  font-size: 1rem;
}

.settings-details > table {
  margin-top: 0.5em;
}

.settings-details {
  width: fit-content;
  margin: auto;
  min-width: 200px;
}

/*# sourceMappingURL=style.css.map */