.timer-shell {
  --timer-surface-glass: rgba(7, 18, 31, .18);
  --timer-dial-glass: rgba(8, 22, 38, .20);
  --timer-control-glass: rgba(255, 255, 255, .84);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: auto;
}

.timer-suite {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.timer-suite a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem .8rem;
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 74, 165, .12);
}

:root[data-theme="dark"] .timer-suite a {
  color: #f4efe7 !important;
  background: #18243a;
  border-color: #40506c;
}

.timer-stage {
  --scene-image: none;
  --dial-scene-image: none;
  --timer-scene-position: center;
  --timer-canvas-scrim-alpha: .28;
  --timer-dial-scrim-alpha: .32;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 1.4rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: #10243a;
  box-shadow: 0 24px 60px rgba(5, 16, 27, .16);
}

.timer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(5, 16, 27, var(--timer-canvas-scrim-alpha)), rgba(5, 16, 27, calc(var(--timer-canvas-scrim-alpha) + .14))), var(--scene-image);
  background-size: cover;
  background-position: var(--timer-scene-position);
  transition: opacity .18s ease;
}

.timer-stage > * {
  position: relative;
  z-index: 1;
}

.timer-stage[data-scene="none"] {
  --scene-image: radial-gradient(circle at 50% 8%, #33556c 0, #152d45 42%, #0b1b2d 100%);
  --dial-scene-image: none;
  --timer-canvas-scrim-alpha: .14;
  --timer-dial-scrim-alpha: .36;
}

.timer-surface {
  max-width: 46rem;
  margin: auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 1.3rem;
  background: var(--timer-surface-glass);
  color: #f8fafc;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(5, 16, 27, .26);
}

.timer-surface .timer-tool.tool {
  display: grid;
  gap: 1rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f8fafc;
}

.timer-dial {
  --timer-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(21rem, 78vw);
  aspect-ratio: 1;
  margin: 0 auto .25rem;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  background: rgba(8, 22, 38, var(--timer-dial-scrim-alpha));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(5, 16, 27, .22), inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.timer-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgba(5, 16, 27, var(--timer-dial-scrim-alpha)), rgba(5, 16, 27, calc(var(--timer-dial-scrim-alpha) + .16))), var(--dial-scene-image);
  background-size: cover;
  background-position: var(--timer-scene-position);
  opacity: .92;
}

.timer-progress-svg {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  z-index: 1;
}

.timer-progress-track,
.timer-progress-value {
  fill: none;
  stroke-width: 3;
}

.timer-progress-track { stroke: rgba(255, 255, 255, .30); }

.timer-progress-value {
  stroke: #78a7ff;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--timer-progress));
  transition: stroke-dashoffset .18s linear, stroke .18s ease;
  filter: drop-shadow(0 0 5px rgba(79, 140, 255, .48));
}

.timer-dial .result,
.timer-dial .result-source {
  position: relative;
  z-index: 2;
}

body .timer-dial .result {
  display: block;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 750 clamp(3rem, 10vw, 7rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .58);
}

.timer-dial .result-source {
  margin: .7rem 0 0;
  color: rgba(255, 255, 255, .92);
  font-weight: 750;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .58);
}


.timer-brand { display: inline-flex; width: min(15rem, 70vw); margin-bottom: .65rem; }
.timer-brand img { width: 100%; height: auto; display: block; }
.timer-state-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: start;
  margin-bottom: 1rem;
}
.timer-state-marker {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .8rem;
  border: 1px solid rgba(37, 99, 235, .25);
  color: #2459b8;
  background: rgba(37, 99, 235, .08);
  font-weight: 900;
}
.timer-state-eyebrow, .timer-view-kicker {
  margin: 0 0 .25rem;
  color: #2459b8;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.timer-state-heading { margin: 0; color: #101827; font-size: clamp(1.65rem, 4vw, 2.6rem); line-height: 1.02; }
.timer-state-subtitle { margin: .45rem 0 0; color: #53606f; max-width: 42rem; }
.timer-state-chip {
  align-self: start;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: #eef4ff;
  color: #174aa5;
  font-weight: 850;
  white-space: nowrap;
}
.timer-view { transition: opacity .16s ease, transform .16s ease; }
.timer-view[hidden] { display: none !important; }
.timer-view[data-timer-view="prepare"] {
  border: 1px solid #dbe5f1;
  border-radius: 1.1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: #fffdf8;
  color: #101827;
  box-shadow: 0 18px 42px rgba(32, 45, 65, .08);
}
.timer-view[data-timer-view="prepare"] h3,
.timer-view[data-timer-view="complete"] h3 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 3vw, 2rem); color: #101827; }
.timer-view[data-timer-view="prepare"] p,
.timer-view[data-timer-view="complete"] p { color: #53606f; }
.timer-view[data-timer-view="active"] {
  border: 1px solid rgba(118, 167, 255, .28);
  border-radius: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: #071827;
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 22px 54px rgba(5,16,27,.30);
}
.timer-view[data-timer-view="complete"] {
  border: 1px solid #cfe8dc;
  border-radius: 1.1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: #f4fbf7;
  color: #101827;
  box-shadow: 0 18px 42px rgba(17, 88, 57, .09);
}
.timer-complete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 1rem 0 0;
}
.timer-complete-summary div { border: 1px solid #dce9e3; border-radius: .85rem; padding: .75rem; background: rgba(255,255,255,.72); }
.timer-complete-summary dt { color: #617063; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.timer-complete-summary dd { margin: .3rem 0 0; color: #12221a; font-weight: 900; }
.timer-reflection-shell { margin-top: 1rem; padding: .85rem; border: 1px solid #cdebd8; border-radius: 1rem; background: linear-gradient(135deg,#f7fff9,#eaf8f0); }
.timer-reflection-title { margin: 0 0 .65rem !important; color: #17402a !important; font-weight: 850; }
.timer-reflection-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.timer-reflection-options button { min-height: 44px; padding: .55rem .85rem; border: 1px solid #b9dec8; border-radius: 999px; background: #fff; color: #17402a; font-weight: 800; }
.timer-reflection-options button[aria-pressed="true"] { border-color: #16a34a; background: #dcfce7; color: #14532d; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.timer-stage[data-active-timer-view="complete"] .timer-control-primary { background: linear-gradient(135deg,#16a34a,#2563eb); box-shadow: 0 12px 24px rgba(22, 101, 52, .22); }
.timer-stage[data-active-timer-view="complete"] .timer-control-secondary { background: #fff; color: #174aa5; border-color: #c9d7ed; }
.timer-stage[data-active-timer-view="complete"] .timer-history { background: #fff; color: #101827; border-color: #dbe5f1; }
.timer-stage[data-active-timer-view="complete"] .timer-history h2 { color: #101827; }
.timer-stage[data-active-timer-view="complete"] .timer-history p,
.timer-stage[data-active-timer-view="complete"] .timer-history-toggle { color: #53606f; }
.timer-stage[data-active-timer-view="prepare"] .timer-surface,
.timer-stage[data-active-timer-view="complete"] .timer-surface { background: rgba(255, 253, 248, .96); color: #101827; border-color: rgba(26, 38, 55, .10); }
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel .timer-view-kicker,
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel h3 { display: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-prepare-panel p { margin: 0; text-align: center; }
.timer-stage[data-active-timer-view="prepare"] .timer-view-prepare { padding: .85rem 1rem; box-shadow: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-mode-controls { gap: .75rem; margin-top: .75rem; }
.timer-stage[data-active-timer-view="prepare"] .timer-history { padding: .7rem .85rem; }
.timer-stage[data-active-timer-view="complete"] .timer-surface { max-width: 52rem; }
.timer-stage[data-active-timer-view="active"] .timer-surface { background: var(--timer-surface-glass); color: #f8fafc; }
.timer-stage[data-active-timer-view="active"] .timer-state-heading,
.timer-stage[data-active-timer-view="active"] .timer-state-subtitle { color: #f8fafc; }
.timer-stage[data-active-timer-view="complete"] .timer-state-marker,
.timer-stage[data-active-timer-view="complete"] .timer-state-chip { border-color: rgba(22, 163, 74, .25); background: #e9f9ef; color: #137446; }
.timer-stage[data-active-timer-view="active"] .timer-state-marker,
.timer-stage[data-active-timer-view="active"] .timer-state-chip { border-color: rgba(118,167,255,.35); background: rgba(7,24,39,.68); color: #fff; }
.timer-mode-controls { display: grid; gap: 1rem; margin-top: 1rem; }
.timer-stage[data-active-timer-view="active"] .timer-customize,
.timer-stage[data-active-timer-view="active"] .timer-history,
.timer-stage[data-active-timer-view="active"] .timer-laps,
.timer-stage[data-active-timer-view="active"] .timer-presets,
.timer-stage[data-active-timer-view="complete"] .timer-customize,
.timer-stage[data-active-timer-view="complete"] .timer-presets,
.timer-stage[data-active-timer-view="complete"] #timer-skip { display: none; }
.timer-mode-controls[data-countdown-lifecycle="running"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="paused"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="complete"] .timer-presets,
.timer-mode-controls[data-countdown-lifecycle="running"] .timer-customize,
.timer-mode-controls[data-countdown-lifecycle="paused"] .timer-customize,
.timer-mode-controls[data-countdown-lifecycle="complete"] .timer-customize { display: none; }
.timer-actions-primary:has(#timer-done:not([hidden])) {
  justify-content: center;
  padding: .7rem;
  border: 1px solid rgba(22, 163, 74, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 163, 74, .10), rgba(37, 99, 235, .08));
  box-shadow: 0 14px 32px rgba(17, 88, 57, .10);
}
.timer-stage[data-active-timer-view="prepare"] .timer-dial { display: none; }
.timer-stage[data-active-timer-view="complete"] .timer-dial { display: none; }
.timer-stage[data-active-timer-view="prepare"] .timer-mode-controls,
.timer-stage[data-active-timer-view="complete"] .timer-mode-controls { color: #101827; }
.timer-stage[data-active-timer-view="prepare"] .timer-customize,
.timer-stage[data-active-timer-view="prepare"] .timer-history,
.timer-stage[data-active-timer-view="prepare"] .timer-laps { background: #fff; color: #101827; border-color: #dbe5f1; }
.timer-stage[data-active-timer-view="prepare"] .timer-settings label,
.timer-stage[data-active-timer-view="prepare"] .timer-customize summary,
.timer-stage[data-active-timer-view="prepare"] .timer-history h2,
.timer-stage[data-active-timer-view="prepare"] .timer-laps h2 { color: #101827; }
.timer-stage[data-active-timer-view="prepare"] .timer-history p,
.timer-stage[data-active-timer-view="prepare"] .timer-history-toggle { color: #53606f; }
.timer-stage[data-active-timer-view="prepare"] .timer-control-secondary,
.timer-stage[data-active-timer-view="prepare"] .timer-control-tertiary,
.timer-stage[data-active-timer-view="prepare"] .timer-presets button { background: #fff; color: #174aa5; border-color: #c9d7ed; }
.timer-stage[data-timer-lifecycle="paused"] .timer-state-chip { color: #8a5200; border-color: rgba(251,191,36,.35); background: #fff7df; }
.timer-stage[data-timer-state="complete"] .timer-progress-value,
.timer-stage[data-timer-lifecycle="complete"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-lifecycle="prepare"] #timer-finish,
.timer-stage[data-timer-lifecycle="complete"] #timer-finish,
.timer-stage[data-timer-lifecycle="prepare"] #timer-lap,
.timer-stage[data-timer-lifecycle="complete"] #timer-lap,
.timer-stage[data-timer-lifecycle="running"] #timer-done,
.timer-stage[data-timer-lifecycle="paused"] #timer-done { display: none; }

.timer-phase-pill {
  width: fit-content;
  margin: 0 auto;
  padding: .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(8, 22, 38, .38);
  color: #fff;
  font-size: .9rem;
  font-weight: 750;
  text-align: center;
}

.timer-actions,
.timer-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
}

.timer-surface .timer-actions button,
.timer-surface .timer-presets button,
.timer-scene-picker button {
  min-width: 44px;
  min-height: 44px;
}

.timer-surface .timer-control-primary {
  min-height: 52px;
  padding: .75rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: linear-gradient(135deg, #2d6cdf, #174aa5);
  box-shadow: 0 10px 24px rgba(12, 54, 132, .32);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.timer-surface .timer-control-primary:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(12, 54, 132, .38); }
.timer-surface .timer-control-primary:active { transform: translateY(0); }

.timer-surface .timer-control-secondary,
.timer-surface .timer-control-tertiary,
.timer-surface .timer-presets button {
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  background: rgba(8, 22, 38, .42);
  color: #fff;
  font-weight: 700;
}

.timer-surface .timer-presets button { min-height: 40px; padding: .45rem .8rem; }

.timer-customize {
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .9rem;
  background: rgba(8, 22, 38, .30);
}

.timer-customize summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .55rem .8rem;
  cursor: pointer;
  color: #fff;
  font-weight: 750;
}

.timer-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
  padding: .25rem .8rem .9rem;
}

.timer-settings .field,
.timer-settings input { min-width: 0; width: 100%; max-width: 100%; }
.timer-settings label { color: rgba(255, 255, 255, .88); font-size: .82rem; font-weight: 700; }
.timer-settings input { background: var(--timer-control-glass); color: #102038; }

.timer-error {
  min-height: 1.2em;
  margin: 0;
  color: #ffd1d9;
  text-align: center;
}

.timer-history,
.timer-laps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem 1rem;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .9rem;
  background: rgba(8, 22, 38, .28);
  color: #fff;
}

.timer-history h2,
.timer-laps h2 { margin: 0 0 .15rem; color: #fff; font-size: 1rem; }
.timer-history p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .9rem; }
.timer-history-toggle { grid-column: 1 / -1; color: rgba(255, 255, 255, .88); }
.timer-history-toggle input { width: auto; }
.timer-laps { grid-template-columns: 1fr; }
.timer-laps ol { margin: 0; }

.timer-scene-picker {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .78);
  color: #0f172a;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.timer-scene-picker summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: .65rem .85rem;
  cursor: pointer;
  font-weight: 800;
}
.timer-scene-picker summary strong { color: #2459b8; font-size: .88rem; }
.timer-scene-picker[open] summary { border-bottom: 1px solid rgba(15, 23, 42, .14); margin-bottom: .7rem; }
.timer-scene-picker > .scene-options,
.timer-scene-picker > p,
.timer-scene-picker > #timer-scene-status { margin-left: .8rem; margin-right: .8rem; }

.timer-stage-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .65rem;
}
.timer-stage-toolbar button {
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(8, 22, 38, .48);
  color: #fff;
  font-weight: 750;
}

.timer-stage[data-timer-state="paused"] .timer-progress-value { stroke: #fbbf24; }
.timer-stage[data-timer-state="complete"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-phase="break"] .timer-progress-value { stroke: #5ee0a0; }
.timer-stage[data-timer-state="paused"] .timer-dial { filter: saturate(.72); }

body.timer-focus-active {
  overflow: hidden;
  box-sizing: border-box;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
}
body.timer-focus-active .timer-shell {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  max-width: none;
  margin: 0;
}
body.timer-focus-active .timer-suite { display: none; }
body.timer-focus-active .timer-stage {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
  padding: 0;
}
body.timer-focus-active .timer-stage-toolbar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}
body.timer-focus-active .timer-scene-picker,
body.timer-focus-active .timer-customize,
body.timer-focus-active .timer-history,
body.timer-focus-active .timer-laps,
body.timer-focus-active .timer-presets { display: none; }
body.timer-focus-active .timer-surface {
  grid-area: 1 / 1;
  box-sizing: border-box;
  margin: auto;
  width: min(46rem, 94vw);
  max-width: 94vw;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}
body.timer-focus-active .theme-toggle { display: none !important; }
.timer-stage:fullscreen {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
}
.timer-stage:fullscreen .timer-surface { grid-area: 1 / 1; margin: auto; }
.timer-stage:fullscreen::backdrop { background: #071827; }

.scene-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.scene-options button { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .35rem; border-radius: .7rem; }
.scene-options img { width: 100%; height: auto; border-radius: .45rem; }
.scene-options button[aria-pressed="true"] { outline: 3px solid #2563eb; outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

.theme-toggle {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  bottom: auto !important;
}

@media (max-width: 820px) {
  body .site-search-form { display: none !important; }
}

@media (max-width: 720px) {
  .timer-shell { grid-template-columns: 1fr; }
  .timer-suite { min-width: 0; max-width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .timer-suite a { white-space: nowrap; flex: 1 1 calc(50% - .5rem); justify-content: center; }
  .timer-stage { padding: .85rem; border-radius: 1.1rem; }
  .timer-surface { padding: 1rem; }
  .timer-dial { width: min(19rem, 82vw); }
  .timer-state-header { grid-template-columns: 1fr; }
  .timer-state-chip { width: fit-content; }
  .timer-complete-summary { grid-template-columns: 1fr; }
  .scene-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timer-history { grid-template-columns: 1fr; }
  .timer-history-toggle { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-stage::before,
  .timer-view,
  .timer-progress-value,
  .timer-surface .timer-control-primary { transition: none; }
  .timer-stage::before,
  .timer-view,
  .timer-progress-value,
  .timer-surface .timer-control-primary { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .timer-stage[data-active-timer-view="active"] .timer-surface { background: #0f2238; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-stage[data-active-timer-view="prepare"] .timer-surface,
  .timer-stage[data-active-timer-view="complete"] .timer-surface { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-dial { background: #152b45; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .timer-scene-picker { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Approved calm-scene visual recovery: preserves the existing adaptive shell. */
.timer-shell { max-width:1440px; padding:24px; grid-template-columns:212px minmax(0,1fr); gap:20px; color:#092b61; }
.timer-suite { position:sticky; top:24px; align-self:start; min-height:620px; flex-direction:column; justify-content:flex-start; padding:14px; border:1px solid #e6edf5; border-radius:18px; background:rgba(255,255,255,.84); box-shadow:0 16px 42px rgba(42,78,118,.12); }
.timer-suite::before { content:"TIME & FOCUS"; padding:8px 10px 12px; color:#64748b; font-size:.66rem; font-weight:850; letter-spacing:.12em; }
.timer-suite a { width:100%; min-height:46px; justify-content:flex-start; padding:0 12px; border:1px solid transparent; border-radius:12px; color:#64748b; background:transparent; }
.timer-suite a:hover,.timer-suite a:focus-visible,.timer-suite a[href="/pomodoro-timer/"] { border-color:#b8d8ff; background:#eaf4ff; color:#0d58bc; }
.timer-suite a:last-child { margin-top:auto; border-top-color:#e6edf5; border-radius:0; color:#092b61; }
.timer-stage { min-height:660px; padding:24px; border-radius:20px; background:#dcecff; box-shadow:0 16px 42px rgba(42,78,118,.12); }
.timer-stage::before { background-image:linear-gradient(105deg,rgba(234,244,255,calc(var(--timer-canvas-scrim-alpha) + .15)),rgba(234,244,255,var(--timer-canvas-scrim-alpha))),var(--scene-image); }
.timer-stage[data-scene="none"] { --scene-image:radial-gradient(circle at 45% 0,#dceeff 0,#eef6fd 44%,#f4f8fc 100%); --timer-canvas-scrim-alpha:.08; }
.timer-surface { max-width:56rem; padding:24px; border-color:rgba(255,255,255,.62); border-radius:18px; background:rgba(255,255,255,.70); box-shadow:0 12px 30px rgba(36,80,120,.10); }
.timer-surface .timer-tool.tool { color:#092b61; }.timer-state-marker { background:#dceeff; border-color:#b8d8ff; color:#1674e8; }.timer-state-heading { color:#092b61; }.timer-state-subtitle { color:#64748b; }.timer-state-chip { background:#eaf4ff; border-color:#b8d8ff; color:#0d58bc; }
.timer-stage[data-active-timer-view="active"] .timer-state-heading { color:#092b61; }.timer-stage[data-active-timer-view="active"] .timer-state-subtitle { color:#64748b; }.timer-view[data-timer-view="active"] { border:0; padding:8px 0 0; background:transparent; box-shadow:none; }
.timer-dial { width:min(320px,62vw); border-color:rgba(255,255,255,.78); background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.50),rgba(255,255,255,.18) 63%,rgba(255,255,255,.30)); box-shadow:inset 0 0 0 10px rgba(255,255,255,.13),0 16px 40px rgba(39,87,125,.18); }.timer-dial::after { content:""; position:absolute; inset:17px; border:1px solid rgba(255,255,255,.70); border-radius:50%; }.timer-progress-track { stroke:rgba(255,255,255,.75); }.timer-progress-value { stroke:#1674e8; filter:drop-shadow(0 0 4px rgba(22,116,232,.35)); }
body .timer-dial .result { color:#092b61 !important; font:850 clamp(3.25rem,7vw,4.5rem)/.95 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.065em; text-shadow:none; }.timer-dial .result-source { color:#64748b; font-size:.76rem; text-shadow:none; }
.timer-surface .timer-control-primary { min-height:56px; border-radius:999px; background:linear-gradient(135deg,#1674e8,#115dbd); box-shadow:0 10px 24px rgba(22,116,232,.28); }.timer-surface .timer-control-secondary,.timer-surface .timer-control-tertiary { border-color:#e6edf5; border-radius:11px; background:rgba(255,255,255,.76); color:#092b61; }
.timer-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,470px); margin:0 auto; }.timer-surface .timer-presets button { min-height:62px; display:flex; align-items:center; gap:10px; padding:9px 12px; border-color:rgba(255,255,255,.78); border-radius:14px; background:rgba(255,255,255,.72); color:#092b61; box-shadow:0 5px 16px rgba(34,76,111,.09); text-align:left; }.timer-surface .timer-presets button:first-child { border-color:#1674e8; box-shadow:0 7px 20px rgba(22,116,232,.14),inset 0 0 0 1px rgba(22,116,232,.14); }.timer-presets button>span:last-child { display:grid; gap:2px; }.timer-presets small { color:#64748b; font-size:.72rem; font-weight:650; }.preset-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; }.preset-blue { background:#dceeff; color:#1674e8; }.preset-purple { background:#eee4fa; color:#8b62c7; }
.timer-phase-wrap { display:flex; align-items:center; justify-content:center; gap:9px; order:-1; }.timer-phase-pill { width:fit-content; margin:0; border-color:rgba(255,255,255,.76); background:rgba(255,255,255,.78); color:#123a73; box-shadow:0 5px 16px rgba(34,76,111,.09); }.phase-dots { display:inline-flex; gap:5px; align-items:center; }.phase-dots i { width:7px; height:7px; border-radius:50%; background:#c8d8e9; }.phase-dots i.active { background:#1674e8; box-shadow:0 0 0 3px #dceeff; }
.timer-history { padding:16px; border-color:rgba(255,255,255,.78); border-radius:16px; background:rgba(255,255,255,.76); color:#092b61; box-shadow:0 8px 22px rgba(39,74,110,.08); }.timer-history h2,.timer-laps h2 { color:#092b61; }.timer-history h2::before { content:"LOCAL PROGRESS\A"; display:block; white-space:pre; color:#64748b; font-size:.62rem; letter-spacing:.1em; }.timer-history p,.timer-history-toggle { color:#64748b; }
.timer-customize { border-color:#e6edf5; background:rgba(255,255,255,.72); }.timer-customize summary { color:#092b61; }.timer-settings label { color:#64748b; }.timer-settings input { border-color:#e6edf5; background:#fff; color:#092b61; }.timer-scene-picker { max-width:56rem; border-color:#e6edf5; border-radius:16px; background:rgba(255,255,255,.84); color:#092b61; box-shadow:0 8px 22px rgba(39,74,110,.08); }.timer-scene-picker summary strong { color:#1674e8; }.scene-options button,#timer-scene-reset { border-color:#e6edf5; background:#eaf4ff; color:#092b61; }.timer-stage-toolbar button { background:rgba(255,255,255,.82); color:#123a73; }
:root[data-theme="dark"] .timer-suite { border-color:#40506c; background:#18243a; }:root[data-theme="dark"] .timer-suite a { color:#c5d3e5; }:root[data-theme="dark"] .timer-suite a:hover,:root[data-theme="dark"] .timer-suite a[href="/pomodoro-timer/"] { background:#1e4270; border-color:#3b6594; color:#fff; }:root[data-theme="dark"] .timer-suite a:last-child { color:#f4efe7; border-top-color:#40506c; }:root[data-theme="dark"] .timer-stage { background:#13243b; }:root[data-theme="dark"] .timer-stage::before { background-image:linear-gradient(105deg,rgba(5,16,31,calc(var(--timer-canvas-scrim-alpha) + .20)),rgba(5,16,31,var(--timer-canvas-scrim-alpha))),var(--scene-image); }:root[data-theme="dark"] .timer-surface { background:rgba(19,38,63,.78); color:#f8fafc; }:root[data-theme="dark"] .timer-surface .timer-tool.tool,:root[data-theme="dark"] .timer-state-heading,:root[data-theme="dark"] .timer-history h2 { color:#f8fafc; }:root[data-theme="dark"] .timer-state-subtitle,:root[data-theme="dark"] .timer-history p,:root[data-theme="dark"] .timer-history-toggle { color:#b5c4d8; }:root[data-theme="dark"] .timer-dial { background:radial-gradient(circle,rgba(15,34,58,.48),rgba(15,34,58,.20)); }:root[data-theme="dark"] body .timer-dial .result { color:#fff !important; }:root[data-theme="dark"] .timer-dial .result-source { color:#d8e6f5; }:root[data-theme="dark"] .timer-phase-pill,:root[data-theme="dark"] .timer-surface .timer-presets button,:root[data-theme="dark"] .timer-surface .timer-control-secondary,:root[data-theme="dark"] .timer-history,:root[data-theme="dark"] .timer-customize { background:rgba(15,31,53,.86); color:#f4f8ff; border-color:rgba(255,255,255,.24); }:root[data-theme="dark"] .timer-scene-picker { background:#162842; color:#f4f8ff; }
@media(max-width:900px){.timer-shell{grid-template-columns:1fr;padding:14px}.timer-suite{position:static;min-height:0;flex-direction:row;align-items:center;overflow-x:auto;padding:8px;border-radius:14px}.timer-suite::before{display:none}.timer-suite a{width:auto;flex:0 0 auto;min-height:44px}.timer-suite a:last-child{margin-top:0;border-top-color:transparent}.timer-stage{min-height:0;padding:16px}.timer-dial{width:min(310px,72vw)}}@media(max-width:520px){.timer-shell{padding:10px}.timer-stage{padding:12px;border-radius:16px}.timer-surface{padding:14px}.timer-state-header{grid-template-columns:auto minmax(0,1fr)}.timer-state-chip{display:none}.timer-dial{width:min(286px,76vw);margin-top:30px}.timer-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.timer-complete-summary{grid-template-columns:1fr}body.timer-focus-active .timer-dial{width:min(350px,84vw)}}

/* Ambient sound + screen-off alert controls */
.timer-ambient-toggle,.timer-alert-toggle { display:flex; align-items:center; gap:.5rem; margin:.6rem 0 0; font-size:.82rem; color:#0f2a45; }
.timer-ambient-toggle { flex-wrap:wrap; }
.timer-ambient-label { font-weight:800; }
.timer-ambient-toggle select { min-height:2.25rem; border:1px solid rgba(15,42,69,.32); border-radius:.6rem; background:#fff; color:#0f2a45; padding:0 .5rem; font-weight:700; }
.timer-ambient-note,.timer-alert-note { flex-basis:100%; font-size:.72rem; color:#64748b; }
.timer-alert-toggle input { width:auto; accent-color:#1674e8; }
:root[data-theme="dark"] .timer-ambient-toggle,:root[data-theme="dark"] .timer-alert-toggle { color:#f4f8ff; }
:root[data-theme="dark"] .timer-ambient-toggle select { background:#1a2a44; color:#eaf4ff; border-color:rgba(255,255,255,.28); }
:root[data-theme="dark"] .timer-ambient-note,:root[data-theme="dark"] .timer-alert-note { color:#b5c4d8; }