:root {
  --bg: #0a1020;
  --panel: #121a2e;
  --panel2: #1a2440;
  --line: #26324f;
  --text: #eef3ff;
  --dim: #93a1c2;
  --teal: #2fe0c2;
  --mint: #6dffa8;
  --star: #ffc93c;
  --coral: #ff7a59;
  --r: 22px;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
.dim { color: var(--dim); }
.star { color: var(--star); }

.screen { min-height: 100%; }
#home, #detail, #summary { max-width: 1120px; margin: 0 auto; padding: 20px 20px 40px; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal), #3aa0ff); color: #06202a; font-size: 20px; }
.kids { display: flex; gap: 8px; flex-wrap: wrap; }
.kid { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--panel); border: 2px solid transparent; font-weight: 700; }
.kid.on { border-color: var(--teal); background: var(--panel2); }
.kid i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal;
  color: #08121f; font-weight: 800; }
.kid small { color: var(--star); font-weight: 800; }
.kid.add { padding: 6px 14px; color: var(--dim); border: 2px dashed var(--line); background: none; }

/* ---------- hero ---------- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 26px;
  padding: 26px 30px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #18406a 0%, #122042 45%, var(--panel) 100%); }
.hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -.02em; }
.hero p { margin: 0; max-width: 46ch; color: var(--dim); font-size: 17px; line-height: 1.45; }
.hero-fig { width: 170px; flex: none; margin: -10px 10px -20px 0; }

/* ---------- stick figure ---------- */
.fig-bones { stroke: var(--teal); }
.fig-head { fill: var(--teal); }
.fig-dots { fill: #fff; }
.fig-ground { fill: rgba(255, 255, 255, .08); }

/* ---------- tabs + grid ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--panel); margin-bottom: 18px; }
.tabs button { padding: 10px 22px; border-radius: 999px; font-weight: 800; color: var(--dim); }
.tabs button.on { background: var(--text); color: #0a1020; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { position: relative; text-align: left; padding: 18px; border-radius: var(--r); background: var(--panel);
  border: 1px solid var(--line); transition: transform .15s, border-color .15s; display: flex; flex-direction: column; }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: var(--teal); outline: none; }
.card h3 { margin: 10px 0 4px; font-size: 19px; }
.card p { margin: 0; color: var(--dim); font-size: 14px; }
.card .tag { align-self: flex-start; margin-top: 12px; padding: 5px 11px; border-radius: 999px; background: var(--panel2);
  font-size: 12.5px; font-weight: 800; color: var(--teal); }
.card.prog { min-height: 190px; border: 0; color: #fff;
  background: linear-gradient(150deg, hsl(var(--h) 70% 42%), hsl(calc(var(--h) + 40) 65% 24%)); }
.card.prog p { color: rgba(255, 255, 255, .8); }
.card.prog .tag { background: rgba(0, 0, 0, .28); color: #fff; margin-top: auto; }
.card .emoji { font-size: 44px; line-height: 1; }
.card.ex .thumb { height: 130px; border-radius: 16px; background: #0d1528; display: grid; place-items: center; position: relative; }
.card.ex .thumb svg { height: 122px; }
.card.ex .thumb span { position: absolute; top: 8px; left: 10px; font-size: 22px; }

.foot { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: 13.5px; }
.voice-pick { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.voice-pick select { max-width: 240px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.ghost.small { padding: 8px 14px; font-size: 13.5px; }
.link { color: var(--teal); font-weight: 700; text-decoration: underline; }

/* ---------- buttons ---------- */
.primary { padding: 14px 30px; border-radius: 999px; font-weight: 800; font-size: 18px; color: #06202a;
  background: linear-gradient(135deg, var(--mint), var(--teal)); }
.ghost { padding: 14px 24px; border-radius: 999px; font-weight: 800; background: var(--panel2); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- program detail ---------- */
.detail-head { display: flex; gap: 20px; align-items: center; padding: 26px; border-radius: 28px; margin: 18px 0; color: #fff;
  background: linear-gradient(150deg, hsl(var(--h) 70% 42%), hsl(calc(var(--h) + 40) 65% 24%)); flex-wrap: wrap; }
.detail-head .emoji { font-size: 64px; }
.detail-head h2 { margin: 0 0 4px; font-size: 30px; }
.detail-head p { margin: 0; opacity: .85; }
.detail-head .primary { margin-left: auto; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--panel); }
.steps li i { font-style: normal; width: 26px; color: var(--dim); font-weight: 800; }
.steps li .mini { width: 44px; height: 48px; flex: none; }
.steps li b { flex: 1; }
.steps li small { color: var(--dim); }

/* ---------- session ---------- */
#session { height: 100dvh; display: grid; grid-template-columns: 1fr 320px; gap: 14px; padding: 14px; }
.stage { position: relative; min-width: 0; min-height: 0; border-radius: 28px; background: #05080f; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.stage-inner { position: relative; width: 100%; height: 100%; flex: none; border-radius: 18px; overflow: hidden; }
/* one bar per exercise: solid when finished, half-strength until then */
.segs { display: flex; gap: 6px; height: 10px; flex: none; width: 100%; }
.segs i { --p: 0%; flex: 1; min-width: 0; border-radius: 999px;
  background: linear-gradient(to right, var(--teal) var(--p), rgba(47, 224, 194, .5) var(--p)); }
.segs i.done { background: var(--teal); }
#video, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#video { object-fit: cover; transform: scaleX(-1); }

.hud-top { z-index: 5; position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pill { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-size: 19px;
  background: rgba(8, 14, 28, .72); backdrop-filter: blur(10px); }
.pill .dim { font-size: 15px; font-weight: 700; }
.hud-btns { display: flex; gap: 8px; }
.hud-btns button { padding: 10px 16px; border-radius: 999px; font-weight: 800; background: rgba(8, 14, 28, .72); backdrop-filter: blur(10px); }
.hud-btns button.off { opacity: .45; }

.power { position: absolute; left: 16px; top: 80px; bottom: 18px; width: 78px; border-radius: 26px; overflow: hidden;
  background: rgba(8, 14, 28, .6); border: 2px solid rgba(255, 255, 255, .18); }
.power > div { position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(to top, var(--teal), var(--mint) 70%, var(--star)); }
.power span { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
/* right-hand twin of the power bar: reps done, or seconds left in a hold */
.power.meter { left: auto; right: 16px; }
.power.meter > div { background: linear-gradient(to top, #3aa0ff, var(--teal)); }
.power.meter b { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 44px; line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }

.msg { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 20px;
  background: rgba(5, 8, 15, .5); }
.msg .big { font-size: clamp(42px, 9vw, 110px); font-weight: 900; line-height: 1; }
.msg .mid { font-size: clamp(22px, 3.4vw, 38px); font-weight: 800; }
.msg .sub { font-size: clamp(15px, 1.8vw, 20px); color: #d5def5; max-width: 36ch; }
.msg { pointer-events: none; }
.msg .primary { margin-top: 10px; pointer-events: auto; }
.msg.clear { background: none; align-content: end; padding-bottom: 7%; }
.msg.clear .mid { padding: 12px 24px; border-radius: 999px; background: rgba(8, 14, 28, .8); }

.burst { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; }
.burst .stars { font-size: clamp(40px, 7vw, 84px); letter-spacing: .06em; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.burst .stars span { display: inline-block; color: rgba(255, 255, 255, .28); transform: scale(0); animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.burst .stars span.on { color: var(--star); }
.burst .word { font-size: clamp(22px, 3.2vw, 40px); font-weight: 900; text-shadow: 0 3px 14px rgba(0, 0, 0, .7); }
@keyframes pop { to { transform: scale(1); } }

.side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.side > div { background: var(--panel); border-radius: var(--r); padding: 16px; }
.label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.coach { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.coach-fig { flex: 1; min-height: 120px; display: grid; place-items: center; }
.coach-fig svg { height: 100%; max-height: 300px; }
.cue { margin: 6px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.pips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pips i { font-style: normal; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--panel2); color: var(--dim); font-size: 13px; font-weight: 800; }
.pips i.got { background: rgba(255, 201, 60, .16); color: var(--star); }
.total { display: flex; align-items: baseline; gap: 8px; }
.total .star { font-size: 26px; }
.total b { font-size: 30px; }

@media (max-width: 860px), (orientation: portrait) {
  #session { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .side { flex-direction: row; }
  .side > div { flex: 1; }
  .coach { flex-direction: row; gap: 10px; align-items: center; flex: 1.4; }
  .coach .label { display: none; }
  .coach-fig { height: 110px; min-height: 0; flex: none; width: 70px; }
  .cue { font-size: 14px; }
  .total { display: none; }
  .hero-fig { display: none; }
}

@media (max-width: 520px) {
  .pill { font-size: 15px; padding: 8px 12px; gap: 6px; }
  .hud-btns button { padding: 8px 11px; white-space: nowrap; font-size: 14px; }
  .hud-btns { gap: 5px; }
  .power { width: 48px; left: 8px; top: 60px; bottom: 10px; border-radius: 18px; }
  .power.meter { right: 8px; }
  .power.meter b { font-size: 28px; }
  .power span { font-size: 9px; letter-spacing: .04em; }
}

/* ---------- summary ---------- */
.sum-card { display: grid; grid-template-columns: minmax(0, 240px) 1fr minmax(0, 240px); gap: 20px; align-items: stretch;
  text-align: center; padding: 20px; border-radius: 28px; margin: 18px 0;
  background: radial-gradient(120% 140% at 50% 0%, #1d3b6b 0%, var(--panel) 70%); }
.sum-mid { align-self: center; padding: 14px 0; min-width: 0; }
.sum-card h2 { margin: 0; font-size: 34px; }
.sum-card .bigstars { font-size: clamp(36px, 5.2vw, 64px); letter-spacing: .08em; margin: 10px 0; white-space: nowrap; }
.sum-card .bigstars span { color: rgba(255, 255, 255, .2); }
.sum-card .bigstars span.on { color: var(--star); }
.sum-card .count { font-size: 22px; font-weight: 800; }
/* big picture buttons a pre-reader can use */
.bigbtn { aspect-ratio: 1; width: 100%; align-self: center; border-radius: 32px; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4%; padding: 8%;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .28); transition: transform .1s, box-shadow .1s; }
.bigbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .28); }
.bigbtn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.bigbtn svg { width: 62%; flex: none; }
.bigbtn span { font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; letter-spacing: .01em; }
.bigbtn.home { background: linear-gradient(160deg, #a66bff, #6b2fd6); }
.bigbtn.again { background: linear-gradient(160deg, #3fdc7f, #14a85a); }
@media (max-width: 760px) {
  .sum-card { grid-template-columns: 1fr 1fr; }
  .sum-mid { grid-column: 1 / -1; grid-row: 1; }
}
.steps li .st { color: var(--star); letter-spacing: .05em; white-space: nowrap; }
.steps li .st u { text-decoration: none; color: rgba(255, 255, 255, .2); }

/* ---------- dialog ---------- */
dialog { border: 0; border-radius: 24px; background: var(--panel); color: var(--text); padding: 24px; width: min(360px, 90vw); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h3 { margin: 0 0 14px; font-size: 22px; }
dialog input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg);
  color: var(--text); font: inherit; font-size: 18px; margin-bottom: 16px; }
dialog .row { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition: none !important; } }