:root {
  --font: var(--font-sans-serif);
  --color-accent: var(--color-red);

  --font-sans-serif: "Poppins", sans-serif;
  --font-serif: "Aleo", serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-red: rgb(250, 111, 113);
  --color-cyan: rgb(112, 243, 248);
  --color-violet: rgb(216, 129, 248);
}

*::before,
*::after,
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  min-height: 90vh;
  font-family: var(--font);
  background-color: #1e2140;
  color: #fff;
}

label {
  display: block;
}

.radio-btn {
  position: relative;
  border: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background-color: rgb(239, 241, 250);
  color: rgb(30, 33, 63);
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color 150ms ease-in-out;
}

.radio-btn.active {
  background-color: rgb(22, 25, 50);
  color: #fff;
}

[data-accent-color].active::before {
  content: url("../assets/check.svg");
  position: absolute;
  transform: translate(-50%, -40%);
}

.font-sans-serif { font-family: var(--font-sans-serif); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

.bg-red { background-color: var(--color-red); }
.bg-cyan { background-color: var(--color-cyan); }
.bg-violet { background-color: var(--color-violet); }

.icon { width: 3rem; height: 3rem; cursor: pointer; }

.main-heading { font-size: 3.2rem; font-weight: 400; }

.modes {
  font-size: 1.8rem;
  padding: 1.6rem 1rem;
  background: #151932;
  border-radius: 10rem;
}

.mode {
  margin-right: 2em;
  text-decoration: none;
  font-weight: 400;
  color: #484c67;
  cursor: pointer;
  transition: all 300ms ease-out;
}

.mode.active {
  padding: 0.5em 1em;
  border-radius: 50px;
  background-color: var(--color-accent);
  color: #1c2244;
}

.mode:last-child { margin-right: 0; }

.get-started {
  background: var(--color-accent);
  padding: 1.2rem 2rem;
  border-radius: 0.4rem;
  font-size: 1.8rem;
  margin-top: 2rem;
}

/* Pomodoro */
.pomodoro {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #151932, #1c2244);
  border-radius: 50%;
  box-shadow: 20px 20px 60px #0e1021, -20px -20px 60px #1c2244;
}

.pomodoro__time {
  position: absolute;
  font-size: 5rem;
  font-weight: 600;
  color: #fff;
  user-select: none;
}

.pomodoro-ring { transform: rotate(-90deg); }

.pomodoro-ring__bg {
  fill: none;
  stroke: #2b2f4a;
}

.pomodoro-ring__progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-dasharray: 879;
  stroke-dashoffset: 879;
  transition: stroke-dashoffset 1s linear;
  stroke-linecap: round;
}

/* Settings and button styles omitted for brevity (keep original) */