/* Quiet Seven — themes: lava (default) · champagne · emerald */
:root{
  color-scheme:dark;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --font:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',sans-serif;
}
:root,body[data-theme=lava]{
  --bg:#0f0f11; --panel:#1a1a1d; --line:#2e2e33; --line-soft:#232327;
  --text:#f3f2f0; --text-2:#d9d8d5; --muted:#a5a5ab; --dim:#8a8a90;
  --accent:#f2733a; --accent-dim:#7a4a33; --on-accent:#1c0b02; --accent-wash:#24150e;
  --rest-mark:#2f6f72; --media-bg:#08080a;
}
body[data-theme=lava].rest{
  --bg:#0c191c; --panel:#132428; --line:#24393e; --line-soft:#1c2f33;
  --text:#e8f2f3; --text-2:#cfdcde; --muted:#9cb4b8; --dim:#82999d;
  --accent:#63d2d6; --accent-dim:#2f6f72; --on-accent:#05181a;
}
body[data-theme=champagne]{
  --bg:#16110e; --panel:#211a16; --line:#3a2f28; --line-soft:#2c241e;
  --text:#f3ece4; --text-2:#d8cdc1; --muted:#b1a395; --dim:#8c7f73;
  --accent:#dcc8a4; --accent-dim:#7f725c; --on-accent:#1b1610; --accent-wash:#2a241b;
  --rest-mark:#5a6873; --media-bg:#0e0a08;
}
body[data-theme=champagne].rest{
  --bg:#161c21; --panel:#1f272e; --line:#33404b; --line-soft:#2c3740;
  --text:#eeece8; --text-2:#d3d6d6; --muted:#a5afb7; --dim:#8a959e;
  --accent:#c9d2d8; --accent-dim:#5a6873; --on-accent:#151b20;
}
body[data-theme=emerald]{
  --bg:#07130e; --panel:#0f2119; --line:#1f3a2d; --line-soft:#172b22;
  --text:#e9f4ee; --text-2:#cfe0d6; --muted:#93b3a4; --dim:#7a998b;
  --accent:#3ddc9c; --accent-dim:#1f6e50; --on-accent:#03130c; --accent-wash:#0f2a1f;
  --rest-mark:#7a5638; --media-bg:#040b08;
}
body[data-theme=emerald].rest{
  --bg:#18130f; --panel:#231c17; --line:#3a2f27; --line-soft:#2c241e;
  --text:#f3ebe3; --text-2:#dfd3c6; --muted:#b5a594; --dim:#988a7c;
  --accent:#e8a46f; --accent-dim:#7a5638; --on-accent:#1d1007;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;transition:background-color .4s ease}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
svg{display:block}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.muted{color:var(--muted)} .small{font-size:12px}
.caption{font-size:11px;font-weight:500;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
.caption.accent{color:var(--accent)}
.note{font-size:12px;line-height:1.6;color:var(--dim);margin:0}
.note.center{text-align:center}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* views */
.view{display:none}
body[data-view=ready] .view.ready,body[data-view=session] .view.session,body[data-view=done] .view.done{display:flex}

/* buttons */
.icon-btn{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.icon-btn.ghost{border-color:transparent}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sound-btn .on{display:none}
.sound-btn[aria-pressed=true] .on{display:block}
.sound-btn[aria-pressed=true] .off{display:none}
.sound-btn[aria-pressed=true]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.icon-btn.ghost[aria-pressed=true]{border-color:transparent}
.text-btn{color:var(--accent);font-size:13px;min-height:44px;padding:0 2px}
.text-btn.muted{color:var(--muted)}
.text-btn.big{font-size:15px;min-height:48px}
.pill-btn{min-height:52px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;letter-spacing:.2px}
.pill-btn svg{width:16px;height:16px;fill:currentColor}
.pill-btn.primary,.pill-btn.cta{background:var(--accent);color:var(--on-accent)}
.pill-btn.outline{border:1px solid var(--line);color:var(--text);font-weight:500}
.pill-btn.small-pill{min-height:40px;padding:0 16px;font-size:14px}
.round-btn{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text)}
.round-btn svg{width:20px;height:20px;fill:currentColor}
@media (hover:hover){
  .pill-btn.primary:hover,.pill-btn.cta:hover{filter:brightness(1.06)}
  .round-btn:hover:not(:disabled),.pill-btn.outline:hover{background:var(--panel)}
}

/* ① 준비 */
.view.ready{flex-direction:column;min-height:100dvh;max-width:520px;margin:0 auto;padding:calc(14px + var(--safe-t)) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l))}
.topbar{display:flex;align-items:center;justify-content:space-between;height:52px}
.brand{font-size:13px;letter-spacing:4px;font-weight:400}
.ready-body{display:flex;flex-direction:column;gap:24px;padding:18px 0 20px;flex:1}
.hero{display:flex;flex-direction:column;align-items:flex-start}
.hero-time{font-size:clamp(88px,28vw,120px);line-height:1;font-weight:300;letter-spacing:-.045em;margin-top:6px;font-variant-numeric:tabular-nums}
.hero-sub{font-size:14px;color:var(--muted);margin-top:8px}
.rhythm{display:flex;gap:3px;align-items:center;width:100%;margin-top:22px}
.rhythm i{flex:1 1 0;height:3px;border-radius:2px;background:var(--rest-mark);transition:background .3s}
.rhythm i.w{flex:2 1 0;height:6px;background:var(--accent)}
.rhythm i.last{background:var(--dim)}
.rhythm.progress i{background:var(--line-soft)}
.rhythm.progress i.w{background:var(--line)}
.rhythm.progress i.ok{background:var(--rest-mark)}
.rhythm.progress i.w.ok{background:var(--accent)}
.rhythm.progress i.w.now{background:var(--accent-dim)}
.rhythm-legend{display:flex;justify-content:space-between;gap:12px;width:100%;font-size:11px;color:var(--dim);margin-top:8px}
.rhythm-legend .k{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin:0 5px 2px 0}
.rhythm-legend .k.w{background:var(--accent);height:5px}
.rhythm-legend .k.r{background:var(--rest-mark);margin-left:10px}
.selectors{display:flex;flex-direction:column;gap:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;background:var(--panel)}
.seg button{height:44px;border-radius:12px;font-size:14px;color:var(--muted);transition:background .15s,color .15s}
.seg button[aria-selected=true],.seg button[aria-pressed=true]{background:var(--line);color:var(--text);font-weight:500}
.seg small{font-size:12px;color:var(--dim);font-weight:400}
.strip-head h2{margin:0;font-size:15px;font-weight:500}
.strip-head .text-btn{font-size:12px}
.strip{list-style:none;margin:10px calc(-20px - var(--safe-r)) 0 0;padding:0 20px 4px 0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:none;scroll-snap-align:start}
.strip button{width:116px;display:flex;flex-direction:column;gap:7px;text-align:left}
.thumb{position:relative;width:116px;height:66px;border-radius:10px;overflow:hidden;background:var(--panel);flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.mirror img{transform:scaleX(-1)}
.thumb b{position:absolute;left:6px;top:6px;font-size:10px;font-weight:400;padding:2px 6px;border-radius:6px;background:rgba(10,10,12,.78);color:#f3f2f0;font-variant-numeric:tabular-nums}
.strip .nm{font-size:12px;line-height:1.35;color:var(--text-2)}
.strip-block .note{margin-top:8px}
.resume-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;gap:14px;align-items:center}
.resume-card .thumb{width:120px;height:68px}
.resume-name{font-size:17px;font-weight:500;margin:4px 0 3px}
.resume-info{margin:12px 0 0}
.resume-info div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--line-soft);font-size:13px}
.resume-info div:last-child{border-bottom:0}
.resume-info dt{color:var(--muted)} .resume-info dd{margin:0;text-align:right}
.safety{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:14px;border:1px solid var(--line-soft)}
.safety p{margin:0;font-size:12px;line-height:1.6;color:var(--muted);flex:1}
.ready-cta{position:sticky;bottom:0;padding:12px 0 calc(16px + var(--safe-b));background:linear-gradient(transparent,var(--bg) 22%);display:flex;flex-direction:column;gap:2px}
.cta-row{display:grid;grid-template-columns:60px 1fr;gap:10px}
.cta-row .round-btn{width:60px;height:60px}
.round-btn.sound-btn svg,.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.round-btn.sound-btn{color:var(--muted)}
.cta{width:100%;min-height:60px;font-size:17px}
.cta svg{width:15px;height:15px}

/* ②③ 운동 · 휴식 */
.view.session{flex-direction:column;height:100dvh;max-width:520px;margin:0 auto;padding:calc(8px + var(--safe-t)) calc(20px + var(--safe-r)) calc(18px + var(--safe-b)) calc(20px + var(--safe-l));gap:12px;overflow:hidden;position:relative}
.session-top{display:flex;align-items:center;justify-content:space-between}
.session-top .icon-btn{width:44px}
#exitBtn{justify-content:start}
.session-top .sound-btn{justify-items:end}
.remaining{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.remaining strong{color:var(--text);font-weight:500}
.segments{display:flex;gap:3px}
.segments i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.segments i.ok{background:var(--accent)}
.segments i.now{background:var(--accent-dim)}
.segments i.skipped{background:color-mix(in srgb,var(--accent) 22%,var(--line))}

.session-grid{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,1.9dvh,20px)}
.media-col,.info-col{display:contents}
.clock{order:1;display:flex;flex-direction:column;align-items:center;margin-top:4px}
.title-block{order:2}
.media-col>.media{order:3}
.media-col>.media-hint{order:4}
.tips{order:5}
.next-card{order:6}
.next-row{order:7;margin-top:auto}
.controls{order:8}

.phase-label{font-size:11px;font-weight:500;letter-spacing:3px;color:var(--accent);font-variant-numeric:tabular-nums}
.phase-word{display:none;font-size:24px;letter-spacing:6px;color:var(--accent);margin-top:6px}
.seconds{font-size:clamp(84px,17.5dvh,150px);line-height:1;font-weight:300;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-top:2px;transition:color .2s}
.seconds.final{color:var(--accent)}
.phase-bar{width:200px;height:2px;background:var(--line);margin-top:10px}
.phase-bar div{height:100%;width:0;background:var(--accent)}
.rest-hint{display:none;font-size:14px;color:var(--muted);margin-top:12px;text-align:center}
.title-block{text-align:center;display:flex;flex-direction:column;gap:4px}
.title-block h2{margin:0;font-size:clamp(21px,3.2dvh,26px);font-weight:500;letter-spacing:-.6px;line-height:1.25}
.title-block .muted{font-size:13px}
.media{position:relative;width:100%;aspect-ratio:16/9;max-height:30dvh;border-radius:16px;overflow:hidden;background:var(--media-bg);flex:none;align-self:center}
.media img,.media canvas{width:100%;height:100%;object-fit:contain;display:block}
.media.mirror img,.media.mirror canvas{transform:scaleX(-1)}
.media-toggle{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:22px;background:rgba(14,10,8,.72);display:grid;place-items:center;color:#f3ece4}
.media-toggle svg{width:14px;height:14px;fill:currentColor}
.media-toggle .play,.media-toggle[aria-pressed=true] .pause{display:none}
.media-toggle[aria-pressed=true] .play{display:block}
.media-hint{margin:-4px 0 0;font-size:12px;color:var(--dim);text-align:center}
.media-hint:empty{display:none}
.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.5;color:var(--text-2)}
.tips li{display:flex;gap:10px}
.tips li::before{content:'—';color:var(--accent);flex:none}
.next-row{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line-soft);font-size:14px}
.next-row strong{font-weight:500}
.controls{display:grid;align-items:center;gap:10px}
.work-controls{grid-template-columns:64px 1fr 64px}
.work-controls .primary{min-height:64px;font-size:17px}
.rest-controls{display:none;grid-template-columns:1fr 64px 1fr}
.rest-controls .pill-btn{min-height:64px;padding:0 14px;white-space:nowrap}
.i-play{display:none}
.session.paused .i-play{display:block}
.session.paused .i-pause{display:none}

.next-card{display:none;background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;padding:16px;flex-direction:column;gap:12px;margin-top:auto}
.next-card .caption{color:var(--accent)}
.next-card-body{display:flex;gap:14px;align-items:center}
.next-card-body img{width:128px;height:72px;object-fit:cover;border-radius:12px;flex:none;background:var(--media-bg)}
.next-card-name{font-size:21px;font-weight:500;letter-spacing:-.5px;margin-bottom:3px}
.next-card-tip{font-size:13px;color:var(--text-2);line-height:1.45;margin-top:5px}
.next-card.finale .next-card-body img{display:none}

/* rest phase (portrait): clock + next card */
.session[data-phase=rest] .phase-word,.session[data-phase=rest] .rest-hint{display:block}
.session[data-phase=rest] .clock{margin-top:clamp(8px,4dvh,40px)}
.session[data-phase=rest] .phase-bar{display:none}
.session[data-phase=rest] :is(.title-block,.tips,.media,.media-hint,.next-row,.work-controls){display:none}
.session[data-phase=rest] .next-card{display:flex}
.session[data-phase=rest] .rest-controls{display:grid}

.paused-note{position:absolute;left:0;right:0;bottom:calc(92px + var(--safe-b));margin:0;text-align:center;font-size:12px;color:var(--muted);pointer-events:none}
.paused-note:empty{display:none}

.countdown{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.countdown-label{font-size:13px;letter-spacing:4px;color:var(--accent)}
.countdown-num{font-size:min(44vw,220px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums}

/* last-3-seconds overlay: covers the content, keeps top bar, progress and controls usable */
.session-top,.segments,.controls{position:relative;z-index:6}
.final-count{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.6dvh,16px);
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 70%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:final-in .25s ease-out}
.final-next{font-size:13px;font-weight:500;letter-spacing:3px;color:var(--accent);text-align:center;padding:0 24px}
.final-num{font-size:min(56vw,34dvh,300px);font-weight:300;line-height:.9;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.final-num.tick{animation:final-tick .9s cubic-bezier(.2,.7,.2,1)}
.final-dots{display:flex;gap:10px}
.final-dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--accent);transition:background .2s}
.final-dots i.on{background:var(--accent)}
@keyframes final-in{from{opacity:0}to{opacity:1}}
@keyframes final-tick{0%{transform:scale(1.18);opacity:.35}30%{transform:scale(1);opacity:1}100%{transform:scale(.97);opacity:1}}
@media (orientation:landscape) and (max-height:560px){.final-num{font-size:min(30vw,44dvh,240px)}}

/* landscape / wide: media left, info right */
@media (orientation:landscape) and (max-height:560px), (min-width:900px) and (min-height:561px){
  .view.session{max-width:1100px}
  .session-grid{flex-direction:row;gap:24px;align-items:stretch}
  .media-col{display:flex;flex-direction:column;justify-content:center;flex:1 1 0;min-width:0;gap:8px}
  .media-col{align-items:center}
  .media-col>.media{max-height:none;width:min(100%,calc((100dvh - 110px) * 16 / 9));order:0}
  .info-col{display:flex;flex-direction:column;width:340px;flex:none;gap:10px;min-height:0}
  .clock{align-items:flex-start;margin-top:0}
  .phase-bar{width:100%}
  .title-block{text-align:left}
  .rest-hint{text-align:left}
  .session[data-phase=rest] .media,.session[data-phase=rest] .media-col{display:flex}
  .session[data-phase=rest] .clock{margin-top:0}
  .next-card-body img{display:none}
}
@media (orientation:landscape) and (max-height:560px){
  .view.session{padding-top:calc(4px + var(--safe-t));gap:8px}
  .seconds{font-size:clamp(56px,21dvh,96px)}
  .tips,.next-row{display:none!important}
  .info-col{gap:8px;justify-content:space-between}
  .phase-bar{margin-top:4px}
  .title-block h2{font-size:20px}
  .work-controls{grid-template-columns:52px 1fr 52px}
  .round-btn{width:52px;height:52px}
  .work-controls .primary,.rest-controls .pill-btn{min-height:52px}
  .rest-controls{grid-template-columns:1fr 52px 1fr}
  .next-card{padding:12px}
  .next-card-name{font-size:18px}
  .rest-hint,.phase-word,.next-card-tip{display:none!important}
  .next-card{gap:6px}
  .paused-note{bottom:calc(70px + var(--safe-b))}
}
@media (min-width:900px) and (min-height:561px){
  .view.session{padding-top:24px;padding-bottom:28px}
  .session-grid{gap:40px}
  .info-col{width:380px}
}

/* ④ 완료 */
.view.done{flex-direction:column;min-height:100dvh;max-width:520px;margin:0 auto;padding:calc(46px + var(--safe-t)) calc(22px + var(--safe-r)) calc(24px + var(--safe-b)) calc(22px + var(--safe-l));gap:18px}
.segments.full i{background:var(--accent)}
.done-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6dvh;text-align:center}
.done-check{width:88px;height:88px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;margin-bottom:10px}
.done-check svg{width:38px;height:38px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.done-hero h2{margin:0;font-size:28px;font-weight:400;letter-spacing:-.6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:14px}
.stats div{padding:18px 6px;text-align:center;display:flex;flex-direction:column;gap:4px}
.stats div+div{border-left:1px solid var(--line-soft)}
.stats strong{font-size:24px;font-weight:300;font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--dim)}
.done-actions{margin-top:auto;display:flex;flex-direction:column;gap:4px}

/* dialogs */
dialog{width:min(400px,calc(100% - 32px));background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:22px;padding:26px 24px 22px}
dialog::backdrop{background:rgba(8,6,5,.72)}
dialog h2{margin:0 0 8px;font-size:20px;font-weight:500}
dialog p{margin:0 0 20px;color:var(--muted);line-height:1.6;font-size:14px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

dialog.sheet{width:100%;max-width:520px;margin:auto auto 0;border:0;border-top:1px solid var(--line);border-radius:26px 26px 0 0;padding:10px 22px calc(24px + var(--safe-b));max-height:92dvh;overflow:auto;animation:sheet-up .22s ease-out}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 6px}
.sheet h2{margin:0}
.sheet .icon-btn{justify-items:end}
.sheet .caption{margin:16px 0 2px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;border-bottom:1px solid var(--line-soft)}
.set-title{font-size:15px}
.set-sub{font-size:12px;color:var(--muted);margin-top:2px}
.switch{width:50px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;transition:background .15s}
.switch span{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:12px;background:var(--muted);transition:transform .15s,background .15s}
.switch[aria-checked=true]{background:var(--accent)}
.switch[aria-checked=true] span{transform:translateX(20px);background:var(--on-accent)}
.stepper{display:flex;align-items:center;gap:2px}
.stepper button{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);font-size:18px}
.stepper output{width:52px;text-align:right;font-size:17px;font-variant-numeric:tabular-nums}
.stepper span{width:30px;padding-left:4px;font-size:12px;color:var(--muted)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.theme-opt{border-radius:14px;border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-height:74px;font-size:13px}
.theme-opt[aria-checked=true]{outline:1.5px solid var(--accent);outline-offset:-1px}
.theme-opt .sw{display:flex;gap:4px}
.theme-opt .sw i{width:18px;height:18px;border-radius:9px}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

@media (orientation:portrait) and (max-height:620px){
  .tips{display:none}
}
@media (orientation:portrait) and (max-height:740px){
  .media{max-height:26dvh}
  .seconds{font-size:clamp(76px,16dvh,120px)}
  .round-btn{width:56px;height:56px}
  .work-controls{grid-template-columns:56px 1fr 56px}
  .work-controls .primary,.rest-controls .pill-btn{min-height:56px}
  .rest-controls{grid-template-columns:1fr 56px 1fr}
  .phase-bar{margin-top:6px}
}
@media (max-height:740px){
  .ready-body{gap:18px;padding-top:8px}
  .hero-time{font-size:clamp(72px,22vw,96px)}
  .rhythm{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}