/* Scoped feature styles: shared site chrome stays in css/styles.css. */
.fitness-page { --primary-color: #b7cf71; }
.fitness-skip { position: absolute; left: 1rem; top: -6rem; padding: 1rem; background: #e3f19a; color: #17251d; z-index: 100; }
.fitness-skip:focus { top: 1rem; }
.fitness-app {
  --fit-bg: #f5f5f0; --fit-surface: #fff; --fit-text: #17251d;
  --fit-muted: #536258; --fit-soft: #e8ede5; --fit-border: #d5dfd1;
  --fit-accent: #d7ef68; --fit-accent-text: #233321;
  color-scheme: light;
  color: var(--fit-text); background: var(--fit-bg);
  border-radius: 18px; margin: 28px 0; overflow: clip;
  font: 1rem/1.6 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .fitness-app { color-scheme: dark; --fit-bg: #18221b; --fit-surface: #222e25; --fit-text: #eef3e9; --fit-muted: #b5c1b4; --fit-soft: #303e31; --fit-border: #435345; }
}
.fitness-app [hidden] { display: none !important; }
.fitness-app h1, .fitness-app h2, .fitness-app h3, .fitness-app p { color: inherit; }
.fitness-app h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.12; letter-spacing: -.045em; margin: 12px 0 18px; }
.fitness-app h2 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 12px; }
.fitness-app h3 { font-size: 1.2rem; line-height: 1.3; margin: 10px 0; }
.fitness-app p { margin: 8px 0 12px; }
.fitness-app a { color: inherit; }
.fitness-app button, .fitness-app input, .fitness-app select { font: inherit; }
.fitness-app button, .fitness-app .fit-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--fit-border); border-radius: 9px; background: var(--fit-surface); color: var(--fit-text); text-decoration: none; text-align: center; line-height: 1.4; cursor: pointer; }
.fitness-app button:hover, .fitness-app .fit-button:hover { background: var(--fit-soft); }
.fitness-app :is(button,a,input,select,summary):focus-visible { outline: 3px solid var(--fit-text); outline-offset: 4px; }
.fitness-app button:disabled { opacity: .55; cursor: default; }
.fitness-app .fit-primary { background: var(--fit-accent); color: var(--fit-accent-text); border-color: transparent; font-weight: 650; }
.fitness-app .fit-primary:hover { background: #c8e45b; }
.fitness-app .fit-muted { color: var(--fit-muted); }
.fitness-app .fit-small { font-size: .85rem; }
.fitness-app .fit-eyebrow { text-transform: uppercase; font-size: .72rem; font-weight: 650; letter-spacing: .12em; }
.fit-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 30px; border-bottom: 1px solid var(--fit-border); flex-wrap: wrap; }
.fit-breadcrumb { justify-content: flex-start; gap: 8px; padding: 18px 0; font-size: .9rem; }
.fit-breadcrumb a { color: var(--text-light); }
.fit-breadcrumb a:hover { color: var(--primary-color); }
.fit-breadcrumb a:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.fitness-app .fit-brand { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 750; text-decoration: none; letter-spacing: -.04em; }
.fit-mark { padding: 0 10px; border-radius: 7px; color: #233321; background: var(--fit-accent); font-style: italic; letter-spacing: -.1em; }
.fit-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.fitness-app .fit-nav a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--fit-muted); text-decoration: none; min-height: 44px; }
.fitness-app .fit-nav a[aria-current] { background: var(--fit-soft); color: var(--fit-text); }
.fit-content { padding: 30px; scroll-margin-top: 20px; }
.fit-hero { display: grid; grid-template-columns: 1fr 1fr; background: #233c2a; color: #f4f7ed; border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.fit-hero > div:first-child { padding: 30px; }
.fit-hero .fit-eyebrow { color: #d7ef68; }
.fit-hero p:not(.fit-eyebrow) { color: #d0dacb; }
.fit-hero .fit-button { margin-top: 12px; }
.fit-hero-image { display: flex; flex-direction: column; background: #d0cec8; }
.fit-hero-image img { width: 100%; height: 100%; min-height: 250px; object-fit: contain; }
.fit-hero-image span { display: block; padding: 12px 20px; color: #eef3e9; background: #233c2a; text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; }
.fit-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.fit-circuit-grid, .fit-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fit-card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid var(--fit-border); border-radius: 13px; background: var(--fit-surface); }
.fit-card > .fit-muted:first-of-type { flex: 1; }
.fit-card .fit-button { width: 100%; margin-top: auto; }
.fit-letter { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fit-soft); margin-bottom: 14px; font-weight: 700; }
.fit-meta { margin: 14px 0; font-size: .9rem; color: var(--fit-muted); }
.fit-how, .fit-preparation { border-top: 1px solid var(--fit-border); margin-top: 28px; padding-top: 24px; }
.fit-how ol { padding-left: 22px; }
.fit-how li { padding: 4px 0; }
.fit-intro { margin: 24px 0; max-width: 760px; }
.fit-session-options { padding: 22px; margin: 24px 0 30px; border-radius: 12px; border: 1px solid var(--fit-border); background: var(--fit-surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fit-session-options label { font-weight: 650; }
.fit-round-input { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.fitness-app input, .fitness-app select { border: 1px solid var(--fit-border); border-radius: 8px; background: var(--fit-surface); color: var(--fit-text); min-height: 44px; padding: 8px 12px; max-width: 100%; }
.fit-round-input input { width: 90px; }
.fit-session-total { font-weight: 650; }
.fit-exercise-list { list-style: decimal-leading-zero; padding-left: 30px; }
.fit-exercise-list li { padding-left: 6px; border-bottom: 1px solid var(--fit-border); }
.fit-exercise-list li::marker { color: var(--fit-muted); }
.fit-exercise-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 6px; text-decoration: none; }
.fit-exercise-list a:hover { background: var(--fit-soft); }
.fit-exercise-list a > span:first-child { display: flex; flex-direction: column; }
.fit-dose { font-size: .85rem; color: var(--fit-muted); text-align: right; }
.fitness-app .fit-exercise-card { text-decoration: none; overflow: hidden; border: 1px solid var(--fit-border); border-radius: 12px; background: var(--fit-surface); }
.fit-exercise-card > div:last-child { padding: 18px; }
.fit-exercise-card h2 { font-size: 1.15rem; margin: 5px 0; }
.fit-exercise-card:hover { box-shadow: 0 2px 12px #0001; }
.fit-thumbnail { aspect-ratio: 3 / 2; background: #d0cec8; }
.fit-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fit-exercise-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 24px 0; align-items: start; }
.fit-exercise-copy h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.fit-demo { margin: 0; min-width: 0; }
.fit-model-shell { border: 1px solid var(--fit-border); border-radius: 12px; background: var(--fit-surface); overflow: hidden; }
.fit-model-shell > p { padding: 18px 18px 0; }
.fit-model-canvas { display: block; width: 100%; height: 360px; background: #ecece8; touch-action: pan-y; }
.fit-model-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.fit-video-shell { width: 100%; aspect-ratio: 16 / 9; min-height: 240px; border: 1px solid var(--fit-border); border-radius: 12px; overflow: hidden; background: var(--fit-surface); }
.fit-video-shell video { display: block; width: 100%; height: 100%; min-height: 240px; background: #111; }
.fit-video-source { display: flex; flex-direction: column; gap: 8px; }
.fit-picture-guide { margin-top: 20px; }
.fit-picture-guide summary { cursor: pointer; font-weight: 650; padding: 12px 0; }
.fit-demo-stage { position: relative; width: 100%; max-width: 420px; margin: auto; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #d0cec8; }
.fit-demo-stage img { position: absolute; inset: 0 auto auto 0; display: block; width: calc(var(--pose-columns, 2) * 100%); max-width: none; height: calc(var(--pose-rows, 1) * 100%); object-fit: fill; transform: translate(var(--pose-x, 0%), var(--pose-y, 0%)); }
.fit-step-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fit-step-board li { border: 1px solid var(--fit-border); border-radius: 9px; background: var(--fit-surface); overflow: hidden; align-self: start; }
.fit-step-image { max-width: none; border-radius: 0; }
.fit-step-copy { display: grid; gap: 8px; padding: 12px; font-size: .85rem; }
.fit-count-guide, .fit-hold-note, .fit-source-note { background: var(--fit-soft); border-radius: 8px; padding: 14px !important; }
.fit-amrap-current { padding: 20px; border: 1px solid var(--fit-border); border-radius: 12px; background: var(--fit-surface); margin: 22px 0; }
.fit-amrap-current h2 { margin-top: 10px; }
.fit-score-form label { display: block; margin: 12px 0 8px; }
.fit-score-form input { width: 100px; }
.fit-demo figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.fit-instructions { margin: 18px 0 0; }
.fit-instructions > div { border-bottom: 1px solid var(--fit-border); padding: 13px 0; }
.fit-instructions dt { text-transform: uppercase; letter-spacing: .08em; font-weight: 650; font-size: .75rem; margin-bottom: 4px; }
.fit-instructions dd { margin: 0; }
.fit-session-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fit-progress-track { height: 5px; background: var(--fit-soft); border-radius: 5px; margin-top: 20px; }
.fit-progress-track span { height: 100%; display: block; background: var(--fit-text); border-radius: 5px; }
.fit-phase { max-width: 640px; padding: 28px 0; }
.fit-timer { margin: 22px 0; padding: 20px; background: var(--fit-surface); border: 1px solid var(--fit-border); border-radius: 12px; }
.fit-timer > span:first-child { display: block; }
.fit-timer output { display: block; font-variant-numeric: tabular-nums; font-size: 3.2rem; letter-spacing: -.04em; line-height: 1.3; margin: 10px 0 18px; }
.fit-timer > div { display: flex; gap: 8px; flex-wrap: wrap; }
.fit-side-reminder { font-weight: 650; }
.fit-empty { padding: 30px; border-radius: 12px; background: var(--fit-surface); border: 1px solid var(--fit-border); }
.fit-history { list-style: none; margin: 24px 0; }
.fit-history li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--fit-border); }
.fit-history h2 { font-size: 1.15rem; }
.fit-history time { color: var(--fit-muted); font-size: .85rem; }
.fit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fit-resume { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--fit-border); border-radius: 12px; background: var(--fit-surface); }
.fit-resume p { margin-bottom: 0; }
.fitness-app .fit-footer { background: transparent; margin: 0 30px; padding: 22px 0; border-top: 1px solid var(--fit-border); text-align: left; color: var(--fit-muted); font-size: .8rem; }
.fit-footer details { margin-top: 12px; }
.fit-footer summary { cursor: pointer; }
.fit-storage-note { padding: 12px 30px; background: var(--fit-soft); }
.fit-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 850px) {
  .fit-circuit-grid { grid-template-columns: 1fr; }
  .fit-card .fit-button { width: auto; }
  .fit-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-hero { grid-template-columns: 1fr; }
  .fit-hero-image img { max-height: 330px; }
}
@media (max-width: 620px) {
  .fitness-page > .container { padding: 0 12px; }
  .fit-header, .fit-content { padding: 20px 16px; }
  .fit-nav { width: 100%; }
  .fitness-app .fit-nav a { padding: 9px 10px; font-size: .9rem; }
  .fit-exercise-detail { grid-template-columns: 1fr; }
  .fit-demo-stage { max-width: 330px; }
  .fit-session-options { padding: 18px; }
  .fit-library-grid { gap: 10px; }
  .fit-exercise-card > div:last-child { padding: 12px; }
  .fit-exercise-card .fit-eyebrow { font-size: .65rem; }
  .fit-exercise-card h2 { font-size: 1rem; }
  .fit-hero > div:first-child { padding: 24px; }
  .fit-exercise-list a { flex-wrap: wrap; gap: 6px; }
  .fit-dose { text-align: left; }
  .fitness-app .fit-footer { margin: 0 16px; }
}
@media (max-width: 390px) { .fit-step-board { grid-template-columns: 1fr; } }

.fit-model-canvas canvas { display: block; width: 100%; height: 100%; }