:root{
  --bg:#f2f1ed;--card:#fff;--ink:#171717;--muted:#6a6a66;--line:#deddd7;
  --accent:#171717;--radius:22px;--shadow:0 10px 35px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;padding:0 0 110px}
button{font:inherit}
[hidden]{display:none!important}
.hero{max-width:1000px;margin:0 auto;padding:58px 24px 30px;display:flex;justify-content:space-between;gap:24px;align-items:end}
.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:var(--muted);margin:0 0 10px}
h1{font-size:clamp(2.4rem,7vw,5.2rem);line-height:.9;letter-spacing:-.065em;margin:0}
h1 span{color:#7c7b75}
.lead{max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.55;margin:22px 0 0}
.hero-stat{background:var(--ink);color:white;border-radius:26px;padding:22px 26px;min-width:160px;text-align:center}
.hero-stat strong{display:block;font-size:3rem;line-height:1}.hero-stat span{font-size:.85rem;color:#c9c9c6}
main{max-width:1000px;margin:auto;padding:0 24px}
.notice{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;line-height:1.45;color:#4d4d49}
.tabs{display:flex;gap:8px;overflow:auto;padding:28px 0 10px;scrollbar-width:none}
.tabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 16px;white-space:nowrap;cursor:pointer}
.tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.day-summary{display:flex;justify-content:space-between;gap:20px;align-items:end;border-bottom:1px solid var(--line);padding:24px 0}
.day-summary h2{font-size:2rem;letter-spacing:-.04em;margin:0 0 6px}.day-summary p{margin:0;color:var(--muted)}
.duration{font-weight:800;font-size:1.1rem;white-space:nowrap}
.exercise-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px 0}
.rest-day{grid-column:1/-1;display:grid;place-items:center;gap:8px;min-height:180px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);text-align:center}.rest-day strong{font-size:1.5rem}.rest-day span{color:var(--muted)}
.exercise{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid #ecebe6}
.exercise img,.exercise video{display:block;width:100%;aspect-ratio:16/7.5;object-fit:cover;background:#f7f7f5}.exercise video,.exercise img.real-demo{object-fit:contain;background:#171717}
.exercise-body{padding:18px}.exercise h3{font-size:1.12rem;margin:0 0 8px}.exercise p{margin:0;color:var(--muted);line-height:1.45;font-size:.94rem}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0}.badge{font-size:.76rem;font-weight:750;background:#f1f0ec;border-radius:999px;padding:6px 9px}
.progression{margin-top:14px;background:#1b1b1b;color:#fff;border-radius:28px;padding:28px}
.progression h2{margin:0 0 20px;font-size:1.5rem}.progression p{color:#bfbfbb;margin:18px 0 0;line-height:1.5}
.progress-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.progress-grid article{background:#2a2a2a;border-radius:16px;padding:16px}.progress-grid b{display:block;font-size:1.2rem;margin-bottom:8px}.progress-grid span{font-size:.85rem;color:#ccc}
.app-version{max-width:1000px;margin:28px auto 0;padding:0 24px 34px;text-align:center;color:var(--muted);font-size:.78rem;font-weight:750;letter-spacing:.06em}.app-version a{color:inherit;text-underline-offset:3px}
.start-session{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;border:0;background:var(--ink);color:white;border-radius:999px;padding:16px 26px;font-weight:800;box-shadow:0 12px 35px rgba(0,0,0,.24);cursor:pointer}
dialog{border:0;padding:0;border-radius:28px;width:min(92vw,520px);max-height:92dvh;overflow:auto;box-shadow:0 25px 90px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(6px)}
.timer-card{padding:24px;position:relative;text-align:center}.close{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;background:transparent;font-size:2rem;cursor:pointer}
.timer-prep{text-align:left;padding:10px 4px 4px}.timer-prep h2{margin:4px 0 8px;font-size:1.8rem}.timer-prep>p:not(.eyebrow){color:var(--muted);margin:0}.timer-prep ul{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}.timer-prep li{background:#f1f0ec;border-radius:14px;padding:12px 14px;font-weight:750}.timer-prep li::before{content:"✓";margin-right:10px}.prep-start{width:100%;border:0;border-radius:14px;padding:15px;background:var(--ink);color:#fff;font-weight:800;cursor:pointer}
.timer-card h2{margin:4px 0 12px;font-size:1.6rem}.demo-stage{position:relative;overflow:hidden;height:min(42dvh,310px);border-radius:18px;background:#171717}.timer-card .demo-stage img{display:block;width:200%;max-width:none;height:auto;border-radius:0;animation:demo-steps var(--exercise-tempo,4s) steps(1,end) infinite}.timer-card .demo-stage img.real-demo,.timer-card .demo-stage video{width:100%;height:100%;display:block;object-fit:contain;background:#171717;animation:none}.demo-stage.show-video #timerImg,.demo-stage.show-image #timerVideo{display:none!important}.demo-sequence{position:absolute;right:10px;bottom:10px;padding:7px 10px;border-radius:999px;background:rgba(23,23,23,.88);color:#fff;font-size:.72rem;font-weight:750}.demo-sequence b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#fff;color:#171717}.demo-sequence span{padding:0 4px}.timer-overlay{position:absolute;z-index:3;left:10px;top:10px;display:flex;align-items:flex-start;gap:8px;pointer-events:none}.timer-instruction{margin:12px 0 0;padding:12px 14px;border-left:4px solid #5d7595;background:#f2f6fc;text-align:left;line-height:1.4}.timer-instruction span{display:block;margin-bottom:3px;color:#526985;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.timer-instruction strong{font-size:.9rem}
.next-exercise{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#eef4ff;color:#173e72;text-align:left}.next-exercise[hidden]{display:none}.next-exercise span{font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.next-exercise strong{text-align:right}
.tempo-cue{margin:12px 0 0;color:#173e72;font-size:.82rem;font-weight:800}.tempo-cue[hidden]{display:none}.timer-card.exercise-pulse{animation:exercise-pulse var(--exercise-tempo,3s) ease-in-out infinite}.timer-card.timer-paused,.timer-card.timer-paused img{animation-play-state:paused}
.clock{padding:7px 11px;border-radius:12px;background:rgba(0,0,0,.78);color:#fff;font-size:clamp(1.8rem,9vw,2.8rem);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #000}
.countdown-cue{margin:0;padding:8px 10px;border-radius:10px;background:#a52118;color:#fff;font-size:.78rem;font-weight:850}.timer-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.timer-card.countdown-alert::after{animation:countdown-flash .48s ease-out}.timer-card.countdown-alert .clock{background:#a52118;color:#fff}
.timer-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.timer-controls{display:grid;grid-template-columns:60px 1fr 60px;gap:10px;margin-top:20px}.timer-controls button{border:1px solid var(--line);border-radius:14px;padding:14px;background:#f7f7f5;font-weight:800}.timer-controls .primary{background:var(--ink);color:white;border-color:var(--ink)}
@keyframes demo-steps{0%,49%{transform:translateX(0)}50%,100%{transform:translateX(-50%)}}
@keyframes exercise-pulse{50%{background:#f2f6fc;transform:scale(1.008)}}
@keyframes countdown-flash{50%{background:rgba(255,225,221,.55);box-shadow:inset 0 0 0 7px rgba(165,33,24,.28)}}
@media(prefers-reduced-motion:reduce){.timer-card,.timer-card img,.timer-card::after{animation:none!important}.timer-card .demo-stage img{width:100%;transform:none}}
@media(max-width:720px){
  .hero{padding-top:34px;align-items:flex-start}.hero-stat{min-width:105px;padding:18px 12px}.hero-stat strong{font-size:2.2rem}
  .exercise-list{grid-template-columns:1fr}.day-summary{align-items:flex-start;flex-direction:column}.progress-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){.hero-stat{display:none}.progress-grid{grid-template-columns:1fr}}
@media(max-height:720px){dialog{max-height:98dvh}.timer-card{padding:16px}.timer-card h2{font-size:1.25rem;margin-bottom:8px}.demo-stage{height:min(38dvh,255px)}.timer-instruction{margin-top:8px;padding:9px 11px}.next-exercise,.tempo-cue{margin-top:8px}.timer-controls{margin-top:10px}.timer-controls button{padding:10px}}