:root {
	color-scheme: light;
	--paper: #f6f5ef;
	--ink: #20241f;
	--muted: #777c73;
	--line: #e4e4da;
	--green: #254e3d;
	--green-bright: #c5e76a;
	--coral: #ed765c;
	--white: #fffefa;
	font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
	color: var(--ink);
	background-color: var(--paper);
	background-image: radial-gradient(#d9ddce 0.7px, transparent 0.7px);
	background-size: 18px 18px;
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #8cad45; outline-offset: 3px; }
.page-shell { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }

.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32, 36, 31, .12); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 19px; font-weight: 700; text-decoration: none; letter-spacing: 0; }
.brand-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--green); display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-7deg); }
.brand-mark span { display: block; width: 3px; border-radius: 4px; background: var(--green-bright); }
.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 10px; }
.brand-period { color: var(--coral); }
.topbar-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #87aa48; box-shadow: 0 0 0 4px rgba(135, 170, 72, .14); }

.intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 50px 0 30px; animation: rise-in .55s ease-out both; }
.eyebrow, .picker-label { margin: 0 0 9px; color: #818675; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
h1 { margin: 0; font-size: 39px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
h1 span { color: var(--green); font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.intro-note { max-width: 300px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.8; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(310px, .86fr); align-items: stretch; gap: 22px; }
.timer-panel, .milestone-panel, .voice-panel { border: 1px solid rgba(32, 36, 31, .1); border-radius: 8px; background: rgba(255, 254, 250, .9); box-shadow: 0 10px 35px rgba(43, 49, 38, .045); }
.timer-panel { min-height: 590px; display: flex; flex-direction: column; padding: 24px 30px 23px; animation: rise-in .6s .08s ease-out both; }
.timer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.presets { display: flex; align-items: center; gap: 5px; }
.preset-button { min-height: 33px; padding: 0 11px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #777c73; font-size: 11px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.preset-button:hover { border-color: var(--line); color: var(--ink); }
.preset-button.is-selected { border-color: #d9e3cd; background: #edf2e6; color: var(--green); font-weight: 600; }
.duration-control { display: flex; align-items: center; gap: 5px; color: #85897e; }
.duration-control label { display: flex; align-items: baseline; gap: 4px; }
.duration-control input { width: 35px; padding: 3px 0; border: 0; background: transparent; color: var(--ink); font-family: "DM Mono", monospace; font-size: 13px; text-align: right; }
.duration-control label:last-child input { width: 24px; }
.duration-control label span { font-size: 10px; }
.duration-colon { color: #b8b9ae; font-size: 12px; }

.timer-display { flex: 1; min-height: 340px; position: relative; display: grid; place-items: center; overflow: hidden; }
.timer-ring { width: min(310px, 74vw); height: auto; transform: rotate(-90deg); overflow: visible; }
.ring-track, .ring-progress { fill: none; stroke-width: 2.5; }
.ring-track { stroke: #e8e9e0; }
.ring-progress { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 917.35; stroke-dashoffset: 0; transition: stroke-dashoffset .35s linear; }
.timer-readout { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateY(1px); }
.readout-caption { color: #8c9084; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.time-text { color: var(--ink); font-family: "DM Mono", monospace; font-size: 74px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.display-label { color: #868a80; font-size: 11px; }
.linear-track { position: absolute; right: 12%; bottom: 22px; left: 12%; height: 4px; overflow: hidden; border-radius: 8px; background: #e8e9e0; opacity: 0; }
.linear-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green); transform: scaleX(1); transform-origin: left; transition: transform .35s linear; }
.mode-digital .timer-ring { opacity: .2; }
.mode-digital .ring-progress { stroke: var(--coral); }
.mode-digital .time-text { font-size: 92px; }
.mode-digital .display-label { margin-top: 2px; }
.mode-minimal .timer-ring { opacity: 0; }
.mode-minimal .timer-readout { width: 100%; flex-direction: row; justify-content: center; gap: 16px; }
.mode-minimal .readout-caption { display: none; }
.mode-minimal .time-text { font-size: 78px; }
.mode-minimal .display-label { align-self: center; max-width: 100px; line-height: 1.5; }
.mode-minimal .linear-track { opacity: 1; }

.timer-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 3px 0 25px; }
.start-button { min-width: 146px; height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 5px; background: var(--green); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s, transform .18s; }
.start-button:hover { background: #1d4031; transform: translateY(-1px); }
.play-icon { color: var(--green-bright); font-size: 10px; }
.reset-button { width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: #74796e; font-size: 23px; cursor: pointer; transition: background .18s; }
.reset-button:hover { background: #f0f0e8; }
.display-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #ecece4; padding-top: 16px; }
.picker-label { margin: 0; font-size: 9px; }
.segmented { display: flex; gap: 2px; padding: 3px; border: 1px solid #e8e9e0; border-radius: 6px; background: #f7f7f1; }
.display-option { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: #777c73; font-size: 10px; cursor: pointer; }
.display-option.is-active { background: var(--white); color: var(--green); box-shadow: 0 1px 3px rgba(32, 36, 31, .12); font-weight: 600; }
.mode-icon { width: 12px; height: 12px; position: relative; display: inline-block; }
.icon-ring { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.icon-digital::before { content: "88"; position: absolute; top: 1px; font: 7px "DM Mono", monospace; }
.icon-minimal::before { content: ""; position: absolute; top: 3px; left: 0; width: 12px; height: 6px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }

.side-column { display: flex; flex-direction: column; gap: 13px; animation: rise-in .6s .15s ease-out both; }
.milestone-panel { flex: 1; padding: 23px 22px 19px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.count-badge { padding: 5px 8px; border-radius: 20px; background: #eef2e7; color: var(--green); font-size: 10px; font-weight: 600; }
.section-copy { margin: 9px 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.milestone-list { display: flex; flex-direction: column; gap: 1px; margin: 0 0 16px; padding: 0; list-style: none; }
.milestone-item { min-height: 49px; display: flex; align-items: center; gap: 11px; border-top: 1px solid #edede6; }
.milestone-time { min-width: 55px; color: var(--green); font: 500 13px "DM Mono", monospace; font-variant-numeric: tabular-nums; }
.milestone-copy { flex: 1; overflow: hidden; color: #585d54; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.milestone-remove { width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 4px; background: transparent; color: #9a9c93; font-size: 17px; cursor: pointer; }
.milestone-remove:hover { background: #f7eae5; color: #ad4d3d; }
.empty-milestones { padding: 13px 0; color: #888d81; font-size: 11px; }
.add-milestone-form { display: grid; grid-template-columns: 72px minmax(0, 1fr) 34px; align-items: center; gap: 7px; padding-top: 12px; border-top: 1px solid #edede6; }
.milestone-time-fields { display: flex; align-items: center; justify-content: center; gap: 3px; color: #a6a89e; }
.milestone-time-fields input { width: 25px; height: 30px; padding: 0; border: 0; border-bottom: 1px solid #dcddd3; background: transparent; color: var(--ink); font: 12px "DM Mono", monospace; text-align: center; }
.message-input { min-width: 0; height: 32px; padding: 0 7px; border: 1px solid #e7e7df; border-radius: 4px; background: #fffefa; color: var(--ink); font-size: 10px; }
.message-input::placeholder { color: #a2a49b; }
.add-button { width: 32px; height: 32px; border: 1px solid #dce2d4; border-radius: 4px; background: #eef2e7; color: var(--green); font-size: 19px; line-height: 1; cursor: pointer; }
.add-button:hover { background: #e1eacf; }

.voice-panel { padding: 19px 21px 16px; }
.voice-heading { display: flex; align-items: center; gap: 11px; }
.voice-symbol { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: #fbebe5; color: #c55f49; font-size: 17px; }
.voice-heading h2 { font-size: 12px; }
.voice-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.switch { position: relative; width: 36px; height: 21px; flex: 0 0 36px; margin-left: auto; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 15px; background: #c8c9c0; cursor: pointer; transition: background .2s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0002; transition: transform .2s; }
.switch input:checked + .switch-track { background: #54765d; }
.switch input:checked + .switch-track::after { transform: translateX(15px); }
.switch input:focus-visible + .switch-track { outline: 3px solid #8cad45; outline-offset: 3px; }
.voice-select-row { display: grid; grid-template-columns: 75px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 16px; }
.voice-select-row label { color: #8b8f84; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.voice-select-row select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #e7e7df; border-radius: 4px; background: white; color: #54594f; font-size: 10px; }
.test-voice-button { display: inline-flex; align-items: center; gap: 6px; margin: 11px 0 0 83px; padding: 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 600; cursor: pointer; }
.test-voice-button:hover { color: #152d23; }
.test-voice-button span { font-size: 13px; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin: 1px 4px 0; color: #85897e; font-size: 10px; }
.privacy-note span { color: #719151; font-size: 15px; }
.footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; color: #8b8f84; font-size: 10px; }
.footer span:first-child { font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 820px) {
	.page-shell { width: min(620px, calc(100% - 36px)); }
	.intro { align-items: start; flex-direction: column; gap: 11px; padding-top: 36px; }
	.intro-note { max-width: 420px; }
	.workspace { grid-template-columns: 1fr; gap: 14px; }
	.timer-panel { min-height: 560px; }
	.side-column { display: grid; grid-template-columns: 1fr; }
	.milestone-panel { padding: 22px; }
	.privacy-note { margin-top: 0; }
}

@media (max-width: 480px) {
	.page-shell { width: calc(100% - 28px); }
	.topbar { height: 66px; }
	.intro { padding: 29px 0 21px; }
	h1 { font-size: 28px; }
	.intro-note { font-size: 12px; }
	.timer-panel { min-height: 500px; padding: 16px 14px 18px; }
	.timer-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
	.presets { width: 100%; justify-content: space-between; }
	.preset-button { padding: 0 8px; }
	.duration-control { align-self: flex-end; margin-top: -2px; }
	.timer-display { min-height: 300px; }
	.timer-ring { width: min(270px, 76vw); }
	.time-text { font-size: 58px; }
	.mode-digital .time-text { font-size: 68px; }
	.mode-minimal .time-text { font-size: 58px; }
	.mode-minimal .timer-readout { flex-direction: column; gap: 8px; }
	.mode-minimal .display-label { max-width: none; }
	.mode-minimal .linear-track { right: 7%; left: 7%; }
	.display-picker { align-items: flex-start; flex-direction: column; }
	.segmented { width: 100%; }
	.display-option { flex: 1; justify-content: center; }
	.add-milestone-form { grid-template-columns: 70px minmax(0, 1fr) 34px; gap: 5px; }
	.message-input { font-size: 9px; }
	.footer { min-height: 58px; }
}