:root {
  --ink:#252522; --paper:#f6f1e9; --card:#fffcf7; --line:#ddd5c9;
  --soft:#817c73; --coral:#ff755e; --blue:#65aee0; --yellow:#f5c64d;
  --mint:#63caaa; --dark:#242522;
}
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Avenir,system-ui,sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
button, input { font:inherit; } button { cursor:pointer; touch-action:manipulation; }
.app-shell { min-height:100dvh; max-width:720px; margin:auto; padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-size:1.22rem; font-weight:800; letter-spacing:-.05em; text-decoration:none; }
.brand-mark { width:27px; height:27px; margin-right:7px; vertical-align:-6px; }
.close-button { display:grid; width:42px; height:42px; place-items:center; padding:0; border:0; background:transparent; }.close-button img { width:100%; height:100%; }
.eyebrow { margin:0 0 8px; color:var(--soft); font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.setup-view { padding-top:clamp(22px,4vh,42px); }
h1 { max-width:650px; margin:0 0 clamp(26px,5vh,44px); font-size:clamp(3.2rem,12vw,6.2rem); font-weight:800; letter-spacing:-.05em; line-height:.88; }
h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.07em; }
.preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.preset-card { --program-ink:#252522; position:relative; display:flex; min-height:104px; align-items:flex-start; gap:11px; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgb(255 252 247 / .7); color:var(--program-ink); text-align:left; transition:transform .15s,border .15s,background .15s; }
.preset-card:hover { transform:translateY(-2px); }.preset-card.selected { padding:14px; border:2px solid var(--program-ink); background:var(--card); }.preset-card strong,.preset-card small { display:block; }.preset-card strong { color:var(--program-ink); font-size:1.6rem; letter-spacing:-.045em; line-height:1; }.preset-card small { margin-top:5px; color:rgb(37 37 34 / .72); font-size:.69rem; line-height:1.3; }
.preset-icon { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border-radius:10px; }.preset-icon img { width:18px; height:18px; }.coral{background:#ffe0d9}.blue{background:#e0f1fb}.yellow{background:#fff1bf}.mint{background:#dcf6ed}.check { position:absolute; top:9px; right:9px; display:none; color:var(--program-ink); font-size:.7rem; font-weight:800; }.selected .check { display:block; }
.plan-card { margin-top:25px; padding:20px; border-radius:22px; background:var(--dark); color:#fffdf6; }.plan-heading { display:flex; align-items:start; justify-content:space-between; }.plan-heading .eyebrow { color:#b2ada5; }.plan-heading h2,.dialog-header h2 { margin:0; font-size:1.5rem; letter-spacing:-.06em; }.text-button { padding:4px; border:0; background:transparent; color:#f8d96a; font-weight:700; }
.plan-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px; padding-top:15px; border-top:1px solid #4a4a46; }.plan-stats div+div { padding-left:15px; border-left:1px solid #4a4a46; }.plan-stats span,.round-detail span { display:block; font-size:1.45rem; font-weight:750; letter-spacing:-.06em; }.plan-stats small,.round-detail small { display:block; margin-top:3px; color:#b2ada5; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.plan-sound-option { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid #4a4a46; color:#fffdf6; font-size:.76rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }.plan-sound-option input { width:42px; height:25px; margin:0; appearance:none; border:0; border-radius:999px; background:#716f69; outline-offset:3px; transition:background .16s; }.plan-sound-option input::after { display:block; width:19px; height:19px; margin:3px; border-radius:50%; background:#fffdf7; content:""; transition:transform .16s; }.plan-sound-option input:checked { background:var(--mint); }.plan-sound-option input:checked::after { transform:translateX(17px); }
.plan-pitch-option { display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:#fffdf6; font-size:.76rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; transition:opacity .16s; }.plan-pitch-option select { padding:7px 9px; border:1px solid #716f69; border-radius:8px; background:transparent; color:#fffdf6; font:inherit; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; }.plan-pitch-option select option { color:var(--ink); }.plan-pitch-option.is-disabled { opacity:.38; }
.start-button { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:12px; padding:20px 22px; border:0; border-radius:16px; background:var(--coral); color:#271e1d; font-size:clamp(1.5rem,5.8vw,1.8rem); font-weight:850; letter-spacing:.01em; }.start-button b { font-size:2rem; }.hidden { display:none!important; }
.site-credit { display:flex; flex-direction:column; align-items:center; gap:2px; padding:24px 0 4px; color:rgb(37 37 34 / .72); font-size:.69rem; font-weight:400; line-height:1.3; text-align:center; }
.site-credit a { color:inherit; text-decoration:none; }

/* The active session owns the canvas: no browser-like gutters or competing UI. */
.workout-mode { max-width:none; padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
@media (orientation:portrait) {
  body:has(.workout-mode) { background:var(--session-bg,var(--paper)); overflow:hidden; }
  body:has(.timer-stage.prepare),.workout-mode:has(.timer-stage.prepare) { --session-bg:#f7d563; --session-fg:var(--ink); }.workout-mode:has(.timer-stage.work),body:has(.timer-stage.work) { --session-bg:var(--mint); --session-fg:var(--ink); }.workout-mode:has(.timer-stage.rest),body:has(.timer-stage.rest) { --session-bg:var(--coral); --session-fg:#fffdf7; }.workout-mode:has(.timer-stage.cooldown),body:has(.timer-stage.cooldown) { --session-bg:var(--blue); --session-fg:var(--ink); }.workout-mode:has(.timer-stage.complete),body:has(.timer-stage.complete) { --session-bg:var(--dark); --session-fg:#fffdf7; }
  .workout-mode { width:100%; height:100svh; min-height:0; padding:max(12px,env(safe-area-inset-top)) env(safe-area-inset-right) max(12px,env(safe-area-inset-bottom)) env(safe-area-inset-left); background:var(--session-bg,var(--paper)); }
  .workout-mode .timer-view { height:100%; min-height:0; grid-template-rows:64px minmax(0,1fr) 108px; padding:0; }
  .workout-mode .timer-top { padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left)); color:var(--session-fg,var(--ink)); font-size:1rem; letter-spacing:.13em; }
  .workout-mode .exit-button { width:44px; height:44px; }
  .workout-mode .timer-stage { margin:0; border-radius:0; background:transparent; }
  .workout-mode .timer-stage h2 { font-size:clamp(3.2rem,15vw,6.2rem); }
  .workout-mode .timer-number { margin:24px 0; font-size:clamp(6rem,32vw,13rem); }
  .workout-mode .timer-footer { color:var(--session-fg,var(--ink)); }
  .workout-mode .round-detail span { font-size:clamp(2.6rem,11vw,4rem); }
  .workout-mode .timer-footer .round-detail small { margin-top:2px; color:color-mix(in srgb,var(--session-fg,var(--ink)) 65%,transparent); font-size:.8rem; }
  .workout-mode .pause-button { width:88px; height:88px; }
  .workout-mode .timer-footer { padding:0 max(24px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
}
.workout-mode .topbar { display:none; }
.workout-mode .stage-glow { display:none; }
.timer-view { display:grid; min-height:calc(100dvh - 24px); grid-template-rows:auto minmax(0,1fr) auto; padding-top:2px; }
.timer-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:38px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.timer-top span:last-child { text-align:right; }.exit-button { display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; background:transparent; }.exit-button img { width:100%; height:100%; }
.timer-stage { position:relative; z-index:0; display:flex; min-height:0; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; overflow:hidden; margin:9px 0 11px; border-radius:28px; background:#f7d563; color:var(--ink); text-align:center; transition:background .35s,color .35s; }.timer-stage.work{background:var(--mint)}.timer-stage.rest{background:var(--coral);color:#fffdf7}.timer-stage.cooldown{background:var(--blue)}.timer-stage.complete{background:var(--dark);color:#fffdf7}.stage-glow { position:absolute; z-index:-1; top:-35%; right:-25%; width:80vw; height:80vw; border-radius:50%; background:rgb(255 255 255 / .22); filter:blur(30px); }
.timer-stage h2 { margin:0; font-size:clamp(2.2rem,10vw,4.5rem); letter-spacing:-.08em; line-height:.9; }.timer-number { margin:20px 0; font-size:clamp(4.7rem,23vw,10rem); font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.055em; line-height:.92; }.timer-colon { display:inline-block; transform:translateY(-.07em); }.timer-number.is-complete .timer-colon,.timer-number.is-complete #timerSeconds { display:none; }
.timer-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 8px 3px; }.align-right { text-align:right; }.pause-button { display:grid; width:70px; height:70px; place-items:center; padding:0; border:0; background:transparent; }.pause-button img { width:100%; height:100%; }.pause-button.paused img { filter:none; }
/* A phase owns one foreground system, keeping every workout control readable. */
.workout-mode:has(.timer-stage.prepare) { --session-fg:#1f1f1f; --session-muted:#635c4d; }.workout-mode:has(.timer-stage.work) { --session-fg:#1f1f1f; --session-muted:#356c5b; }.workout-mode:has(.timer-stage.rest) { --session-fg:#1f1f1f; --session-muted:#71342b; }.workout-mode:has(.timer-stage.cooldown) { --session-fg:#1f1f1f; --session-muted:#1d587d; }.workout-mode:has(.timer-stage.complete) { --session-fg:#fffdf7; --session-muted:#c7c2ba; --session-icon-filter:invert(1); }.workout-mode .timer-top,.workout-mode .timer-footer,.workout-mode .timer-stage { color:var(--session-fg,var(--ink)); }.workout-mode .timer-footer .round-detail small { color:var(--session-muted,var(--soft)); }.workout-mode:has(.timer-stage.complete) .exit-button img,.workout-mode:has(.timer-stage.complete) .pause-button img { filter:var(--session-icon-filter); }
dialog { max-width:min(600px,calc(100vw - 28px)); padding:0; border:0; border-radius:24px; background:transparent; box-shadow:0 25px 70px #28231d66; }dialog::backdrop { background:#231f1b88; backdrop-filter:blur(3px); }.settings-card { padding:24px; border-radius:24px; background:var(--card); }.dialog-header { display:flex; align-items:start; justify-content:space-between; }.dialog-intro { color:#716b62; font-size:.9rem; line-height:1.4; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin:21px 0; }.form-grid label { font-size:.78rem; font-weight:750; letter-spacing:-.02em; }.form-grid label:first-child { grid-column:span 2; }.form-grid label span { color:var(--soft); font-weight:500; }.form-grid input:not([type="checkbox"]) { width:100%; margin-top:6px; padding:10px; border:1px solid var(--line); border-radius:10px; outline-color:var(--mint); background:#fffdf9; font-size:1rem; }.sound-option { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; padding:12px 0 0; border-top:1px solid var(--line); }.sound-option > span { display:flex; flex-direction:column; gap:2px; }.sound-option strong { color:var(--ink); font-size:.9rem; }.sound-option small { color:var(--soft); font-size:.72rem; font-weight:500; }.sound-option input { width:48px; height:28px; margin:0; appearance:none; border:0; border-radius:999px; background:#c9c2b7; outline-offset:3px; transition:background .16s; }.sound-option input::after { display:block; width:22px; height:22px; margin:3px; border-radius:50%; background:#fffdf7; content:""; transition:transform .16s; }.sound-option input:checked { background:var(--mint); }.sound-option input:checked::after { transform:translateX(20px); }.voice-pitch-option { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; padding-top:2px; transition:opacity .16s; }.voice-pitch-option span { color:var(--ink); font-size:.9rem; font-weight:750; }.voice-pitch-option select { padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fffdf9; color:var(--ink); font:inherit; font-size:.75rem; }.voice-pitch-option.is-disabled { opacity:.38; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; }.secondary-button,.primary-button { padding:11px 15px; border:1px solid var(--line); border-radius:11px; background:transparent; font-weight:750; }.primary-button { border-color:var(--ink); background:var(--ink); color:#fffdf7; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:350px) { .preset-card{padding:11px}.preset-card.selected{padding:10px}.preset-icon{width:26px;height:26px;flex-basis:26px}.preset-card small{font-size:.62rem} }

/* Landscape uses the same focused layout on iPhone and iPad. */
@media (orientation:landscape) {
  .app-shell:not(.workout-mode) { max-width:1000px; padding:14px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); }
  .app-shell:not(.workout-mode) .setup-view { display:grid; grid-template-columns:minmax(0,2.35fr) minmax(170px,.9fr); column-gap:12px; padding-top:14px; }
  .app-shell:not(.workout-mode) h1 { margin-bottom:18px; font-size:clamp(2rem,4.3vw,3rem); line-height:.94; }
  .app-shell:not(.workout-mode) h1 br { display:none; }
  .app-shell:not(.workout-mode) h1 em { margin-left:.18em; }
  .app-shell:not(.workout-mode) h1,.app-shell:not(.workout-mode) .preset-grid { grid-column:1 / -1; }
  .app-shell:not(.workout-mode) .preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .app-shell:not(.workout-mode) .preset-card { min-height:82px; padding:11px; }
  .app-shell:not(.workout-mode) .preset-card.selected { padding:10px; }
  .app-shell:not(.workout-mode) .preset-icon { width:27px; height:27px; flex-basis:27px; }
  .app-shell:not(.workout-mode) .plan-card { grid-column:1; grid-row:3; margin-top:14px; padding:14px 18px; }
  .app-shell:not(.workout-mode) .plan-stats { margin-top:12px; padding-top:10px; }
  .app-shell:not(.workout-mode) .start-button { grid-column:2; grid-row:3; align-self:stretch; margin-top:14px; padding:12px 18px; font-size:1.875rem; line-height:.92; text-align:left; }
  .app-shell:not(.workout-mode) .start-button span { text-align:left; }
  .app-shell:not(.workout-mode) .site-credit { grid-column:1 / -1; padding:10px 0 0; }
}

/* Every landscape session uses the same full-screen timer, including iPad. */
@media (orientation:landscape) {
  body:has(.workout-mode) { background:var(--dark); overflow:hidden; }
  .workout-mode { width:100%; height:100svh; min-height:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background:var(--dark); }
  .workout-mode:has(.timer-stage.prepare) { background:#f7d563; }.workout-mode:has(.timer-stage.work) { background:var(--mint); }.workout-mode:has(.timer-stage.rest) { background:var(--coral); }.workout-mode:has(.timer-stage.cooldown) { background:var(--blue); }.workout-mode:has(.timer-stage.complete) { background:var(--dark); }
  .workout-mode .timer-view { height:100%; min-height:0; grid-template-rows:48px minmax(0,1fr) 56px; padding:0; }
  .workout-mode .timer-top { padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); color:var(--ink); font-size:1.1rem; letter-spacing:.13em; }
  .workout-mode .timer-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; border-radius:0; background:transparent; }
  .workout-mode .timer-stage h2 { margin:0 0 .25rem; font-size:clamp(3rem,7vw,5.5rem); }
  .workout-mode .timer-number { margin:0; font-size:clamp(8rem,27vw,17rem); }
  .workout-mode .timer-footer { padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left)); color:var(--ink); }.workout-mode .round-detail span { font-size:2rem; }.workout-mode .round-detail small { margin-top:0; color:rgb(37 37 34 / .68); font-size:.64rem; }.workout-mode .pause-button { width:52px; height:52px; }.workout-mode .pause-button img,.workout-mode .pause-button.paused img { filter:none; }.workout-mode .stage-glow { width:50vh; height:50vh; }
}

/* Use the extra iPad canvas for workout information, while retaining the phone scale. */
@media (min-width:700px) and (min-height:700px) {
  html { background:var(--paper); }
  body:has(.app-shell:not(.workout-mode))::before { position:fixed; z-index:0; top:0; right:0; left:0; height:max(148px,calc(env(safe-area-inset-top) + 108px)); background:var(--paper); content:""; }
  .app-shell:not(.workout-mode) { position:relative; z-index:1; }
  .app-shell:not(.workout-mode) { padding-top:max(84px,calc(env(safe-area-inset-top) + 44px)); }
  .workout-mode { padding-top:max(24px,calc(env(safe-area-inset-top) + 12px)); }
}
@media (min-width:700px) and (min-height:700px) and (orientation:portrait) {
  .workout-mode .timer-view { grid-template-rows:82px minmax(0,1fr) 140px; }
  .workout-mode .timer-top { font-size:1.3rem; }
  .workout-mode .exit-button { width:58px; height:58px; }
  .workout-mode .timer-stage h2 { font-size:clamp(4.5rem,15vw,7.5rem); }
  .workout-mode .timer-number { font-size:clamp(11rem,40vw,21rem); }
  .workout-mode .round-detail span { font-size:clamp(3.4rem,11vw,5rem); }
  .workout-mode .timer-footer .round-detail small { font-size:1rem; }
  .workout-mode .pause-button { width:108px; height:108px; }
}
@media (min-width:900px) and (min-height:700px) and (orientation:landscape) {
  .workout-mode .timer-view { grid-template-rows:68px minmax(0,1fr) 82px; }
  .workout-mode .timer-top { font-size:1.4rem; }
  .workout-mode .exit-button { width:54px; height:54px; }
  .workout-mode .timer-stage h2 { font-size:clamp(4rem,8vw,7rem); }
  .workout-mode .timer-number { font-size:clamp(12rem,34vw,26rem); }
  .workout-mode .round-detail span { font-size:3rem; }
  .workout-mode .round-detail small { font-size:.82rem; }
  .workout-mode .pause-button { width:70px; height:70px; }
}