:root{
  --bg:#0f1216;
  --bg-elev:#171c22;
  --bg-elev2:#1e242c;
  --line:#2a323c;
  --fg:#eef2f6;
  --fg-dim:#98a4b3;
  --accent:#4ade80;
  --accent-dim:#16321f;
  --warn:#fbbf24;
  --warn-dim:#3a2f11;
  --radius:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:8px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(40px + var(--safe-b));
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* ---------- top line (scrolls away, nothing is sticky) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + var(--safe-t)) 0 4px;
}
.topbar h1{font-size:20px;font-weight:700;letter-spacing:-.02em}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;text-decoration:none;
  background:var(--bg-elev2);border:1px solid var(--line);
  font-size:13px;color:var(--fg-dim);white-space:nowrap;min-height:32px;
}
.chip[data-state="ready"]{color:var(--accent);border-color:#25502f}
.chip[data-state="busy"]{color:var(--warn);border-color:#4a3c14}
.dot{width:8px;height:8px;border-radius:50%;background:var(--fg-dim);flex:none}
.chip[data-state="ready"] .dot{background:var(--accent)}
.chip[data-state="busy"] .dot{background:var(--warn);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- layout ---------- */
main{max-width:620px;margin:0 auto;padding:0 16px}
.loading{color:var(--fg-dim);text-align:center;padding:48px 0}

section{padding-top:22px}
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.sec-head h2{font-size:24px;font-weight:700;letter-spacing:-.025em}
.sec-head span{font-size:14px;color:var(--fg-dim)}
.sec-sub{font-size:14px;color:var(--fg-dim);margin-bottom:18px}

/* ---------- exercise ---------- */
.ex{
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-bottom:16px;
}
.ex-head{padding:15px 16px 13px}
.ex-num{
  display:inline-block;font-size:12px;font-weight:700;
  color:var(--accent);letter-spacing:.06em;margin-bottom:4px;
}
.ex-head h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.ex-ru{font-size:14px;color:var(--fg-dim);margin-top:2px}
.ex-reps{
  display:inline-block;margin-top:10px;
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--bg-elev2);padding:6px 11px;border-radius:9px;
}

/* preview / player */
.ex-media{position:relative;width:100%;aspect-ratio:16/9;background:#000;display:block}
.ex-media.playing{aspect-ratio:auto}
.ex-media img{width:100%;height:100%;object-fit:cover;display:block}
.ex-media video{width:100%;max-height:78vh;display:block;background:#000}
.play-btn{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;background:linear-gradient(transparent 40%,rgba(0,0,0,.35));
}
.play-btn i{
  width:62px;height:62px;border-radius:50%;
  background:rgba(16,20,25,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.5);
}
.play-btn i::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid #fff;
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.play-btn:active i{transform:scale(.94)}

.media-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.72);text-align:center;padding:18px;
}
.media-fallback p{font-size:13.5px;color:#d5dde6;margin-bottom:12px;line-height:1.4}

/* action buttons under each video */
.ex-actions{display:flex;gap:9px;padding:12px 16px 0}
.btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 14px;border-radius:12px;
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.btn:active{transform:scale(.985)}
.btn.yt{background:#ff0033;color:#fff}
.btn.dl{background:var(--bg-elev2);color:var(--fg);border:1px solid var(--line);flex:0 0 auto;padding:0 18px}
.ico-yt{
  width:19px;height:14px;border-radius:4px;background:rgba(255,255,255,.28);
  display:inline-grid;place-items:center;flex:none;
}
.ico-yt::after{
  content:"";width:0;height:0;margin-left:2px;
  border-left:7px solid #fff;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
.media-fallback .btn{flex:0 0 auto;padding:0 20px}

/* text blocks */
.ex-body{padding:14px 16px 16px}
.blk + .blk{margin-top:13px}
.blk h4{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:4px;
}
.blk p{font-size:15px;line-height:1.55}
.blk.attn h4{color:var(--warn)}
.blk.attn p{color:#f0e6cd}

/* ---------- notes ---------- */
.note{
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;margin-bottom:14px;
}
.note h3{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:9px}
.note ul{padding-left:19px}
.note li{margin-bottom:8px;font-size:15px}
.note li:last-child{margin-bottom:0}
.note p{font-size:15px}
.note.accent{background:var(--accent-dim);border-color:#25502f}
.note.accent p{color:#c9f5d8}
.note.warn{background:var(--warn-dim);border-color:#4a3c14}
.note.warn p{color:#f7e3ac}

/* ---------- offline panel ---------- */
.bar{height:4px;border-radius:2px;background:var(--bg-elev2);overflow:hidden;margin:11px 0 9px}
.bar span{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .25s ease}
.dlp small{font-size:13.5px;color:var(--fg-dim);display:block;line-height:1.45}
.btn-wide{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;border-radius:12px;margin-top:11px;
  background:var(--accent);color:#06210f;border:0;
  font-size:15px;font-weight:600;text-decoration:none;
}
.btn-wide.alt{background:var(--bg-elev2);color:var(--fg);border:1px solid var(--line)}
.btn-wide:disabled{background:var(--bg-elev2);color:var(--fg-dim);border:1px solid var(--line);opacity:.7}
.hint{font-size:13px;color:var(--fg-dim);line-height:1.45;margin-top:9px}
.note .hint{margin-top:0;margin-bottom:11px}
.steps{padding-left:20px;margin:0}
.steps li{font-size:15px;margin-bottom:7px}
.steps li:last-child{margin-bottom:0}

@media (prefers-color-scheme:light){
  :root{
    --bg:#f5f7fa;--bg-elev:#fff;--bg-elev2:#eef1f5;--line:#dde3ea;
    --fg:#111820;--fg-dim:#5d6b7c;--accent:#15803d;--accent-dim:#e4f7ea;
    --warn:#a16207;--warn-dim:#fdf3d7;
  }
  .blk.attn p{color:#5c4708}
  .note.accent p{color:#14532d}
  .note.warn p{color:#713f12}
  .btn-wide{color:#fff}
}

.fb-btns{display:flex;gap:9px;justify-content:center}
.media-fallback .fb-btns .btn{min-height:42px;padding:0 16px;font-size:14px}

/* ---------- infographic boards ---------- */
#intro{padding-top:14px}
.board{margin:0 0 16px}
.board picture{display:block}
.board img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-elev);
}
.board details{margin-top:8px}
.board summary{
  list-style:none;cursor:pointer;
  font-size:13.5px;color:var(--fg-dim);
  padding:9px 12px;border-radius:10px;
  background:var(--bg-elev);border:1px solid var(--line);
}
.board summary::-webkit-details-marker{display:none}
.board summary::after{content:" ▾";opacity:.6}
.board details[open] summary::after{content:" ▴"}
.board details ul{
  margin-top:8px;padding:13px 16px 13px 34px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;
}
.board details li{font-size:14.5px;margin-bottom:7px;color:var(--fg-dim)}
.board details li:last-child{margin-bottom:0}

/* ---------- install button + hint ---------- */
.topbar-actions{display:flex;align-items:center;gap:7px;min-width:0}
.chip.install{
  background:var(--accent);color:#06210f;border-color:transparent;
  font-weight:600;
}
.chip.install.on{background:var(--bg-elev2);color:var(--fg);border-color:var(--line)}
.ico-plus{
  position:relative;width:13px;height:13px;flex:none;display:inline-block;
}
.ico-plus::before,.ico-plus::after{
  content:"";position:absolute;background:currentColor;border-radius:1px;
}
.ico-plus::before{left:5.5px;top:0;width:2px;height:13px}
.ico-plus::after{top:5.5px;left:0;height:2px;width:13px}

.install-hint{
  background:var(--accent-dim);border:1px solid #25502f;
  border-radius:var(--radius);padding:13px 16px;margin-top:10px;
}
.install-hint p{font-size:14px;color:var(--fg);margin-bottom:8px}
.install-hint ol{padding-left:20px;margin:0}
.install-hint li{font-size:14.5px;margin-bottom:6px}
.install-hint li:last-child{margin-bottom:0}

@media (max-width:400px){
  .topbar h1{font-size:18px}
  .chip{padding:6px 10px;font-size:12.5px}
}
@media (prefers-color-scheme:light){
  .chip.install{color:#fff}
  .install-hint p,.install-hint li{color:#14532d}
}