*,*::before,*::after{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#142019;background:#f6f8f3;--ink:#142019;--muted:#526157;--bg:#f6f8f3;--surface:#fff;--line:#dce4d8;--quiet:#eef2ec;--lime:#c6f65b;--strong:#245c3a;--focus:#245bdb}
@media(prefers-color-scheme:dark){:root{color:#eef3ec;background:#0b100d;--ink:#eef3ec;--muted:#aab6ae;--bg:#0b100d;--surface:#141b16;--line:#2a362e;--quiet:#1d2620;--strong:#a9dc5c;--focus:#7db4ff}}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink)}
button,select,input{font:inherit;color:inherit}
button,select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.84rem;font-weight:650;cursor:pointer;touch-action:manipulation}
button{padding:8px 12px}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:#142019}
button:disabled{opacity:.5;cursor:default}
a{color:var(--strong)}
.exercise{width:min(100%,780px);padding:24px 16px 20px;margin:auto}
.hero{margin-bottom:16px}
.brand{display:flex;align-items:center;gap:0;font-size:1.46rem;font-weight:860;font-style:italic;letter-spacing:-.06em}
.brand>span:last-child{color:var(--strong)}
.mark{display:inline-flex;gap:3px;margin-right:7px;transform:skewX(-27deg)}
.mark i{height:16px;width:5px;background:#9fc82f;border-radius:1px}
.eyebrow,.toolbar-label{font-size:.69rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hero .eyebrow{margin:18px 0 3px}
h1{font-size:clamp(1.68rem,5.9vw,3rem);line-height:1.05;letter-spacing:-.055em;margin:0}
.embedded .hero{display:none}
.embedded .exercise{padding-top:12px}
.stage{background:#eae5dc;aspect-ratio:1.13;position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--line),#a49b8b 22%);border-radius:17px;isolation:isolate}
#canvas-slot,.annotations,#poster{position:absolute;inset:0;width:100%;height:100%}
#canvas-slot canvas{display:block;width:100%;height:100%;touch-action:none}
#poster{object-fit:cover}
.stage-head{position:absolute;left:10px;top:11px;pointer-events:none}
.status,.gesture,.muscle-label{background:#f9f7f1f0;color:#22281f;box-shadow:0 2px 8px #45332114;font-size:.72rem;font-weight:700;border-radius:999px;padding:6px 9px;max-width:calc(100% - 24px)}
.camera-tools{position:absolute;z-index:3;right:9px;top:9px;display:grid;gap:5px}
.icon-button{display:grid;place-items:center;padding:0;width:44px;height:44px;border-radius:50%;background:#faf8f3ee;color:#142019;border-color:#beb8aa70;box-shadow:0 2px 5px #45332110}
svg{width:22px;height:22px}
.icon-button path,.cue-icon path{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gesture{position:absolute;bottom:8px;left:9px;margin:0;font-weight:600;pointer-events:none}
.annotations{pointer-events:none;overflow:hidden}
#muscle-line,#muscle-dot{stroke:#fffaf2;visibility:hidden}
#muscle-dot{fill:#a43127;stroke-width:2}
.muscle-label{position:absolute;font-size:.74rem;white-space:nowrap;pointer-events:none;font-weight:750;transform:translate(-50%,-50%)}
#trajectory-line{fill:none;stroke:#326756;stroke-width:2.2;stroke-dasharray:5 3}
.viewer-error{position:absolute;inset:auto 10px 10px;padding:12px;background:#fbf8f2;color:#142019;border-radius:12px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.viewer-error p{font-size:.82rem;margin:0;line-height:1.3}
.viewer-error button{background:#c6f65b;color:#142019;border-color:#c6f65b;white-space:nowrap}
.timeline{display:flex;align-items:center;gap:12px;margin:12px 0}
.play{display:grid;place-items:center;min-width:52px;height:52px;padding:0;background:var(--lime);border:0;border-radius:50%;color:#142019}
.play svg{width:24px;height:24px;fill:currentColor}
.time-track{flex:1;min-width:70px}
.time-track input{width:100%;margin:0;display:block;min-height:30px;accent-color:#6f9c24}
.time-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums}
.speed{display:grid;gap:2px;font-size:.66rem;color:var(--muted);font-weight:650}
.speed select{padding:4px 7px;color:var(--ink)}
.segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.segments button{padding-inline:5px;border-radius:999px}
.cue{display:flex;align-items:flex-start;gap:12px;margin-top:11px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-height:101px}
.cue-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;background:#e5f3bd;color:#284321;border-radius:10px}
.cue p,.muscle-info p{margin:3px 0 0;font-size:.86rem;line-height:1.35}
#breath{color:var(--muted);font-size:.81rem}
.secondary{display:grid;gap:9px;margin-top:13px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap}
.toolbar-label{padding-right:4px}
.button-row{display:flex;flex-wrap:wrap;gap:5px}
.button-row button{font-size:.77rem;padding:5px 8px}
.muscle-info{padding:10px 12px;border-left:3px solid #a43127;background:var(--quiet);border-radius:9px;margin-top:7px}
.muscle-info strong{font-size:.86rem}
.note,.credits{font-size:.73rem;color:var(--muted);line-height:1.45}
.credits{margin-top:17px;padding-top:9px;border-top:1px solid var(--line)}
summary{display:list-item;cursor:pointer;padding:8px 0;min-height:40px}
.credits p{margin:4px 0 8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:345px){.exercise{padding-inline:10px}.camera-tools{gap:4px}.toolbar{display:grid;gap:4px}}
@media(min-width:660px){.exercise{padding:24px}.stage{aspect-ratio:1.52}.toolbar{justify-content:flex-start}.toolbar-label{min-width:72px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}