:root {
  color-scheme: light;
  --ink: #20352e;
  --muted: #697a70;
  --pine: #24483e;
  --pine-dark: #18392f;
  --sage: #dce7d9;
  --paper: rgba(255, 255, 252, .78);
  --line: rgba(39, 66, 55, .12);
  --orange: #d98960;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #e9eee6;
  isolation: isolate;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background: radial-gradient(ellipse at 15% 15%, #f7f5e9 0, transparent 42rem),
    radial-gradient(ellipse at 92% 72%, #d9e6d9 0, transparent 36rem);
  content: "";
}

button, input, select { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #d98960; outline-offset: 3px; }

.ambient { position: fixed; z-index: -1; width: 25rem; height: 25rem; border-radius: 50%; background: rgba(175, 198, 169, .2); filter: blur(2px); pointer-events: none; }
.ambient-one { top: 14%; right: -17rem; }
.ambient-two { bottom: -20rem; left: -11rem; width: 34rem; height: 34rem; background: rgba(234, 190, 158, .16); }

.page { position: relative; z-index: 1; width: min(100% - 3rem, 68rem); min-height: 100vh; margin-inline: auto; padding: 1.8rem 0 1.2rem; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 2.4rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 650; letter-spacing: -.04em; }
.brand-mascot { display: block; width: 2.8rem; height: 2.8rem; object-fit: contain; }
.top-note { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--muted); font-size: .72rem; }
.top-note-dot { width: .42rem; height: .42rem; border-radius: 50%; background: #7d9d79; }

.welcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: end; gap: 2.3rem; padding: clamp(3rem, 8vh, 5.8rem) 0 2.5rem; }
.eyebrow { margin: 0; color: #718477; font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1.1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 7vw, 6rem); font-weight: 400; letter-spacing: -.075em; line-height: .96; }
h1 em { color: #62826e; font-weight: 400; }
.welcome-copy .eyebrow { margin-bottom: 1.35rem; }
.welcome-description { max-width: 27rem; margin-bottom: 0; color: var(--muted); font-size: .94rem; line-height: 1.7; }

.clock-card { min-height: 13.5rem; padding: 1.4rem 1.5rem 1.25rem; border-radius: 1.15rem; color: #f3f3e9; background: var(--pine); box-shadow: 0 1.1rem 2.5rem rgba(36, 72, 62, .14); }
.clock-topline { display: flex; justify-content: space-between; align-items: center; }
.clock-card .eyebrow { color: #c2d1c1; font-size: .58rem; }
.clock-mascot { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: #eee1c9; }
.clock-mascot img { display: block; width: 3.4rem; height: 3.4rem; object-fit: contain; transform: translateY(.13rem); }
.clock { display: block; margin-top: 1.35rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5vw, 4rem); letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.today { margin: .45rem 0 1.1rem; color: #cfdbce; font-size: .75rem; }
.clock-rule { height: 1px; background: rgba(240, 243, 231, .18); }
.clock-caption { margin: .8rem 0 0; color: #c0cec0; font-size: .68rem; }

.tools { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; }
.tool-card { min-width: 0; padding: 1.55rem; border: 1px solid rgba(255, 255, 252, .85); border-radius: 1.15rem; background: var(--paper); box-shadow: 0 .5rem 2rem rgba(43, 63, 51, .045); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-heading h2 { margin: .43rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; font-weight: 400; letter-spacing: -.045em; }
.card-spark { color: var(--orange); font-size: 1.15rem; }
.list-count { padding: .38rem .6rem; border-radius: 99px; color: #586b5d; background: #edf1e9; font-size: .64rem; white-space: nowrap; }
.tool-intro { min-height: 2.8rem; margin: .65rem 0 1rem; color: var(--muted); font-size: .76rem; line-height: 1.6; }

.timer-wrap { display: grid; place-items: center; padding: .25rem 0 1rem; }
.timer-ring { --progress: 100%; display: grid; width: 10.6rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--pine) var(--progress), #e4e9df 0); transition: background .25s ease; }
.timer-face { display: flex; width: calc(100% - .55rem); height: calc(100% - .55rem); flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #fafbf7; }
.timer-face span { color: var(--pine-dark); font-family: Georgia, "Times New Roman", serif; font-size: 2.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.timer-face small { margin-top: .2rem; color: #829084; font-size: .55rem; letter-spacing: .15em; }
.timer-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.timer-controls select { min-height: 2.65rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); background: #fffefa; font-size: .72rem; }
.button { min-height: 2.65rem; padding: 0 .95rem; border: 1px solid transparent; border-radius: .65rem; cursor: pointer; font-size: .72rem; transition: background .16s, transform .16s; }
.button:hover, .add-button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--pine); }
.button-primary:hover { background: var(--pine-dark); }
.button-quiet { border-color: var(--line); color: #586b5d; background: transparent; }
.button-quiet:hover { background: #edf1e9; }
.timer-message { min-height: 1.1rem; margin: .8rem 0 0; color: var(--muted); text-align: center; font-size: .65rem; }

.add-form { display: flex; gap: .5rem; margin-top: .25rem; }
.add-form input { width: 100%; min-width: 0; min-height: 2.85rem; padding: 0 .85rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--ink); background: rgba(255, 255, 252, .8); font-size: .75rem; }
.add-form input::placeholder { color: #97a397; }
.add-button { width: 2.85rem; min-width: 2.85rem; border: 0; border-radius: .7rem; color: white; background: var(--pine); cursor: pointer; font-size: 1.35rem; transition: transform .16s, background .16s; }
.add-button:hover { background: var(--pine-dark); }
.task-list { display: flex; min-height: 10.1rem; max-height: 15.5rem; flex-direction: column; gap: .4rem; margin: .8rem 0; padding: 0; overflow-y: auto; list-style: none; }
.task-item { display: flex; min-height: 2.6rem; align-items: center; gap: .7rem; padding: .4rem .55rem; border-bottom: 1px solid rgba(39, 66, 55, .08); }
.task-item input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--pine); cursor: pointer; }
.task-text { flex: 1; overflow-wrap: anywhere; color: #364a40; font-size: .75rem; line-height: 1.5; }
.task-item.is-done .task-text { color: #8c998d; text-decoration: line-through; }
.delete-task { width: 1.8rem; height: 1.8rem; border: 0; border-radius: .4rem; color: #829084; background: transparent; cursor: pointer; font-size: 1rem; }
.delete-task:hover { color: #9b5943; background: #f7e9e1; }
.empty-state { display: grid; min-height: 9rem; place-items: center; color: #89988a; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-style: italic; }
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .7rem; border-top: 1px solid rgba(39, 66, 55, .1); color: #819083; font-size: .62rem; }
.clear-button { padding: .3rem 0; border: 0; color: #627568; background: transparent; cursor: pointer; font-size: .64rem; }
.clear-button:hover { color: var(--pine-dark); text-decoration: underline; }

.footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 2rem; color: #829084; font-size: .62rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 48rem) {
  .page { width: min(100% - 2rem, 38rem); }
  .welcome { grid-template-columns: 1fr; gap: 1.8rem; padding: 3.5rem 0 1.5rem; }
  h1 { font-size: clamp(3.25rem, 13vw, 5rem); }
  .clock-card { min-height: 12rem; }
  .clock { margin-top: 1rem; }
  .tools { grid-template-columns: 1fr; }
  .tool-card { padding: 1.25rem; }
  .footer { padding-top: 1.5rem; }
}

@media (max-width: 25rem) {
  .page { width: min(100% - 1.25rem, 38rem); padding-top: 1rem; }
  .top-note { font-size: .62rem; }
  .timer-controls { gap: .4rem; }
  .timer-controls select, .button { padding-inline: .65rem; font-size: .66rem; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}