:root {
  color-scheme: light;
  --bg: #f3eadb;
  --surface: #fbf6ec;
  --ink: #2d211b;
  --muted: #77685e;
  --accent: #6f3d24;
  --accent-strong: #4a2819;
  --line: rgba(72, 45, 31, 0.17);
  --shadow: 0 20px 60px rgba(76, 45, 28, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1d1916;
  --surface: #29231f;
  --ink: #f5eadb;
  --muted: #baa99d;
  --accent: #d7a071;
  --accent-strong: #efbd8d;
  --line: rgba(255, 235, 215, 0.13);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background .2s, color .2s; }
button, input, select { font: inherit; }
button { color: inherit; }

.topbar { height: 84px; max-width: 1120px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { color: var(--ink); text-decoration: none; font-family: Georgia, serif; font-weight: 700; font-size: 30px; letter-spacing: -1.5px; }
.wordmark span { color: var(--accent); }
.menu-button, .close-button { border: 0; background: transparent; cursor: pointer; }
.menu-button { width: 46px; height: 46px; display: grid; place-content: center; gap: 5px; border-radius: 50%; }
.menu-button:hover { background: var(--line); }
.menu-button span { width: 22px; height: 2px; background: currentColor; display: block; border-radius: 2px; }

.shell { max-width: 980px; margin: auto; padding: 32px 28px 80px; }
.brew-screen { display: grid; grid-template-columns: minmax(250px, 1fr) 280px minmax(310px, 1fr); gap: 56px; align-items: center; }
.recipe-heading h1 { font-family: Georgia, serif; font-size: clamp(48px, 6vw, 76px); line-height: .94; letter-spacing: -4px; margin: 8px 0 24px; font-weight: 500; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.description { color: var(--muted); line-height: 1.65; max-width: 35ch; }
.recipe-tags { display: flex; gap: 8px; margin-top: 24px; }
.recipe-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; }

.start-button { width: 260px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: var(--accent); color: #fffaf4; display: grid; place-content: center; gap: 7px; cursor: pointer; box-shadow: 0 22px 50px rgba(74, 40, 25, .25), inset 0 0 0 8px rgba(255,255,255,.07); transition: transform .18s, background .18s; }
.start-button:hover { transform: translateY(-4px); background: var(--accent-strong); }
.start-button:active { transform: scale(.98); }
.start-button span { font-family: Georgia, serif; font-size: 44px; }
.start-button small { opacity: .72; font-weight: 700; }

.controls { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 6px 24px; box-shadow: var(--shadow); }
.control-row { min-height: 82px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.control-row:last-child { border: 0; }
.control-label { font-weight: 750; }
.control-row small { display: block; color: var(--muted); margin-top: 4px; }
.control-title { display: flex; gap: 8px; align-items: center; }
.auto-badge { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; padding: 4px 6px; border-radius: 5px; opacity: .3; }
.auto-badge.active { opacity: 1; }
.cup-options { display: flex; gap: 6px; }
.cup-options button, .stepper button { border: 1px solid var(--line); background: transparent; cursor: pointer; border-radius: 50%; width: 34px; height: 34px; }
.cup-options button.selected { background: var(--accent); color: white; border-color: var(--accent); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper output { min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 750; }
.water-row strong { font-family: Georgia, serif; font-size: 25px; }

.settings-panel { position: fixed; z-index: 3; top: 0; right: 0; width: min(390px, 92vw); height: 100vh; padding: 36px; background: var(--surface); transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 70px rgba(25, 15, 10, .2); }
.settings-panel.open { transform: translateX(0); }
.scrim { position: fixed; z-index: 2; inset: 0; background: rgba(23, 16, 12, .45); backdrop-filter: blur(2px); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 46px; }
.panel-heading h2 { font: 500 40px/1 Georgia, serif; margin: 8px 0 0; }
.close-button { font-size: 38px; line-height: 1; }
.setting-field { border-top: 1px solid var(--line); min-height: 82px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.setting-field select, .setting-field input { color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.setting-field input { width: 90px; text-align: right; border: 0; padding-right: 2px; }
.input-with-unit { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding-right: 10px; color: var(--muted); }
.settings-note { color: var(--muted); line-height: 1.55; font-size: 13px; margin-top: 30px; }

.timer-screen { max-width: 720px; margin: 0 auto; text-align: center; }
.timer-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.timer-clock { margin-top: clamp(60px, 12vh, 120px); font: 500 clamp(88px, 18vw, 168px)/.9 Georgia, serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.timer-phase { color: var(--accent); text-transform: uppercase; font-size: 12px; font-weight: 850; letter-spacing: .16em; margin-top: 36px; }
.timer-screen h2 { font: 500 clamp(34px, 6vw, 58px)/1.05 Georgia, serif; margin: 12px 0; }
.timer-detail { color: var(--muted); }
.progress-track { margin: 50px auto 28px; max-width: 460px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.timer-action { min-width: 150px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 14px 26px; cursor: pointer; font-weight: 750; }

@media (max-width: 850px) {
  .shell { padding-top: 12px; }
  .brew-screen { grid-template-columns: 1fr 1fr; gap: 38px 24px; }
  .recipe-heading { align-self: end; }
  .start-button { justify-self: end; width: min(240px, 36vw); }
  .controls { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .topbar { height: 68px; padding: 0 20px; }
  .shell { padding: 16px 20px 50px; }
  .brew-screen { display: flex; flex-direction: column; gap: 30px; }
  .recipe-heading { width: 100%; }
  .recipe-heading h1 { font-size: 55px; letter-spacing: -3px; margin-bottom: 17px; }
  .description { margin-bottom: 0; }
  .recipe-tags { margin-top: 16px; }
  .start-button { width: 210px; }
  .start-button span { font-size: 38px; }
  .controls { width: 100%; padding: 4px 17px; border-radius: 22px; }
  .control-row { min-height: 75px; }
  .cups-row { align-items: center; }
  .cup-options { gap: 4px; }
  .cup-options button { width: 32px; height: 32px; }
  .timer-clock { margin-top: 75px; }
}

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