:root { color-scheme: light; --ink: #10221e; --cream: #f5f1e8; --sage: #b6c8ae; --orange: #e9784e; --line: rgba(16,34,30,.18); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 10% 10%, #d7e3d0 0 15%, transparent 35%), linear-gradient(135deg, var(--cream), #e3eadb); font-family: "Zen Kaku Gothic New", sans-serif; }
.app-shell { width: min(100% - 40px, 620px); margin: auto; padding: 8vh 0 5vh; }
.eyebrow { margin: 0 0 24px; font: 500 12px "DM Mono", monospace; letter-spacing: .16em; opacity: .62; }
.timer-card { padding: clamp(28px, 7vw, 58px); border: 1px solid rgba(255,255,255,.7); border-radius: 28px; background: rgba(255,255,255,.48); box-shadow: 0 24px 70px rgba(41,69,53,.12); backdrop-filter: blur(12px); }
.card-topline { display: flex; align-items: center; gap: 9px; font-size: 13px; opacity: .75; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(233,120,78,.15); }
h1 { margin: 35px 0 30px; font-size: clamp(34px, 8vw, 56px); line-height: 1.25; letter-spacing: -.06em; font-weight: 500; } h1 em { color: var(--orange); font-style: normal; }
.timer { margin: 0 -3px 24px; font: 500 clamp(68px, 18vw, 128px)/.9 "DM Mono", monospace; letter-spacing: -.1em; }
.colon { padding: 0 8px; color: var(--orange); }
.progress-track { height: 5px; overflow: hidden; border-radius: 9px; background: rgba(16,34,30,.12); } .progress { width: 100%; height: 100%; transform-origin: left; background: var(--orange); transition: transform .3s linear; }
.controls { display: flex; gap: 12px; margin-top: 34px; } button { border: 0; border-radius: 100px; cursor: pointer; font: inherit; transition: transform .2s, background .2s; } button:active { transform: scale(.97); }
.primary, .secondary { padding: 14px 25px; } .primary { color: #fff; background: var(--ink); } .primary:hover { background: #1e443a; } .secondary { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.settings { margin-top: 30px; } .settings label { display: block; margin-bottom: 12px; font-size: 13px; opacity: .7; } .presets { display: flex; gap: 8px; flex-wrap: wrap; } .presets button { padding: 9px 15px; color: var(--ink); background: rgba(255,255,255,.5); border: 1px solid transparent; font-size: 13px; } .presets button.selected { border-color: var(--ink); background: var(--sage); }
.hint { margin: 34px 0 0; font-size: 12px; opacity: .58; } @media (max-width: 480px) { .app-shell { width: min(100% - 28px, 620px); padding-top: 5vh; } .timer-card { padding: 28px 22px; } }