/* Simple styling for Pomodoro timer */
:root {
  color-scheme: dark;
  --bg: #111513;
  --panel: rgba(246, 242, 226, 0.08);
  --line: rgba(246, 242, 226, 0.18);
  --text: #f7f2e4;
  --muted: #b9b19e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { background: var(--bg); color: var(--text); display:flex; align-items:center; justify-content:center; min-height:100svh; }
button, output { font:inherit; }
button { border:0; cursor:pointer; padding:0.5em 1em; background: var(--panel); color: var(--text); border-radius:4px; }
button.primary { background: var(--panel); font-weight:bold; }
.shell { display:grid; place-items:center; width:100%; }
.timer { background: var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.5rem; text-align:center; max-width:320px; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.eyebrow { font-size:0.7rem; color: var(--muted); text-transform:uppercase; margin:0; }
h1 { margin:0; font-size:1.5rem; }
.clock { font-size:2rem; display:inline-block; min-width:80px; }
.controls button { margin:0 0.5rem; }
.settings { margin-bottom: 1rem; text-align: center; }
.settings label { margin: 0 0.5rem; font-size: 0.9rem; }
.settings input { width: 3em; margin-left: 0.2em; }