@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/dm-sans.ttf')}

@font-face {
  font-family:'Manrope';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/manrope.ttf')}

:root {
  --paper:#f5f5ef;
  --ink:#26392f;
  --muted:#747d74;
  --line:#dfe3d9;
  --green:#354f3d;
  --lime:#d6ee9c;
  --dark:#17251f;
  --white:#fff;
  --radius:18px}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:16px}
button,input,select {
  font:inherit}
button,a,input,select {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
button {
  color:inherit}
button:disabled {
  opacity:.38;
  cursor:not-allowed}
button,a,input,select {
  outline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid #789b3e}
button {
  transition:background .16s,transform .16s}
button:hover:not(:disabled) {
  filter:brightness(.96)}
[hidden] {
  display:none!important}
.site-header {
  max-width:1500px;
  margin:auto;
  padding:27px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  font:800 19px 'Manrope',sans-serif;
  letter-spacing:-1px}
.brand-mark {
  background:var(--green);
  color:var(--lime);
  border-radius:50%;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:400}
.brand-light {
  font-weight:400}
.brand small {
  display:block;
  letter-spacing:2px;
  font:500 14px 'DM Sans',sans-serif;
  margin-top:5px}
.header-right {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:14px;
  color:var(--muted)}
.header-right a {
  color:var(--ink);
  margin-left:32px;
  text-decoration:none;
  font-weight:600}
.privacy-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#8cab59;
  border-radius:50%;
  flex-shrink:0}
main {
  max-width:1500px;
  margin:auto;
  padding:0 5%}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:49px 0 38px}
.eyebrow {
  font-size:14px;
  letter-spacing:2px;
  font-weight:700;
  margin:0 0 17px}
h1 {
  font:500 clamp(40px,4.5vw,64px)/1.08 'Manrope',sans-serif;
  letter-spacing:-3px;
  margin:0}
h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:#6d805c}
.intro-copy {
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
  margin:20px 0 0}
.intro-note {
  border-left:1px solid #ccd4c3;
  padding:8px 0 8px 30px;
  margin-right:40px}
.note-number {
  font:14px monospace;
  color:#89917f}
.intro-note p {
  font-size:18px;
  line-height:1.5}
.small-label {
  font-size:14px;
  letter-spacing:1.2px;
  font-weight:600;
  color:var(--muted)}
.studio {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 8px 30px #243c2510;
  overflow:hidden}
.studio-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  border-bottom:1px solid var(--line)}
.mode-switch {
  display:flex;
  padding:4px;
  background:#f0f2eb;
  border-radius:10px;
  gap:3px}
.mode-switch button {
  border:0;
  border-radius:7px;
  padding:11px 18px;
  background:transparent;
  font-weight:600;
  font-size:14px;
  color:#7a8275}
.mode-switch button span {
  font:14px monospace;
  opacity:.65;
  margin-right:8px}
.mode-switch button[aria-pressed=true] {
  background:var(--green);
  color:#fff;
  box-shadow:0 2px 4px #26392f20}
.workspace-label {
  font-size:14px;
  letter-spacing:1.5px;
  color:#617057}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px}
.review-area {
  min-width:0;
  background:#f9faf6;
  display:flex;
  flex-direction:column}
.video-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:20px;
  flex:1;
  align-items:stretch}
.video-grid.compare {
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:15px;
  gap:10px}
.video-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--dark);
  border-radius:12px;
  overflow:hidden;
  border:2px solid transparent}
.video-card.selected {
  border-color:#8aab65}
.video-top {
  display:flex;
  align-items:center;
  padding:12px;
  gap:8px;
  color:#c7d0c8;
  font-size:14px;
  min-height:46px}
.slot-badge {
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:5px;
  background:#d6ee9c;
  color:#26392f;
  font:700 14px 'Manrope',sans-serif}
.video-card:nth-child(2) .slot-badge {
  background:#c4d8eb}
.file-name {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1}
.video-top button {
  border:0;
  background:transparent;
  color:#b5c5b5;
  font-size:14px;
  padding:4px}
.stage {
  flex:1;
  min-height:400px;
  position:relative;
  background:radial-gradient(ellipse at center,#23392d 0%,#14221b 90%);
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden}
.stage:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none}
.stage video {
  width:100%;
  height:100%;
  object-fit:contain;
  position:absolute;
  inset:0}
.stage canvas {
  position:absolute;
  pointer-events:none;
  max-width:100%}
.stage.mirrored video,.stage.mirrored .pose-canvas {
  transform:scaleX(-1)}
.dropzone {
  position:absolute;
  inset:20px;
  border:1px dashed #6a806550;
  border-radius:8px;
  background:transparent;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px}
.dropzone.dragover {
  background:#56733c55;
  border-color:var(--lime)}
.upload-icon {
  height:64px;
  width:64px;
  border-radius:50%;
  background:#d6ee9c10;
  color:var(--lime);
  display:grid;
  place-items:center;
  font-size:27px;
  margin-bottom:23px;
  border:1px solid #d6ee9c22}
.dropzone strong {
  font:500 21px 'Manrope',sans-serif;
  letter-spacing:-.5px}
.dropzone .drop-description {
  font-size:14px;
  color:#becdbe;
  margin:10px 0 25px;
  line-height:1.6}
.upload-cta {
  padding:11px 23px;
  background:var(--lime);
  border-radius:6px;
  color:#233829;
  font-weight:700;
  font-size:14px}
.file-types {
  font:14px monospace;
  color:#b2c3b8;
  margin-top:17px}
.corner-label {
  position:absolute;
  bottom:16px;
  left:16px;
  color:#d6e0d5;
  font:14px monospace;
  letter-spacing:1px;
  pointer-events:none}
.video-bottom {
  padding:11px 12px;
  display:flex;
  gap:8px;
  align-items:center;
  color:#a3b4a6;
  font-size:14px;
  flex-wrap:wrap}
.video-bottom button {
  background:#ffffff0b;
  border:1px solid #ffffff12;
  border-radius:5px;
  color:#d5ded4;
  font-size:14px;
  padding:6px 8px}
.video-bottom select {
  background:var(--dark);
  color:#c8d7c7;
  border:1px solid #ffffff20;
  border-radius:4px;
  padding:3px;
  font-size:14px}
.video-bottom .fps-label {
  margin-left:auto}
.clip-time {
  font:14px monospace}
.transport {
  margin:0 20px 0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  background:#fff}
.timeline-row {
  display:flex;
  align-items:center;
  gap:12px}
.timeline-row input {
  flex:1;
  min-width:40px;
  accent-color:var(--green);
  height:20px}
.timeline-row output {
  font:14px monospace;
  color:#617057;
  white-space:nowrap}
.transport-row {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:11px}
.play-buttons {
  display:flex;
  align-items:center;
  gap:7px}
.play-buttons button {
  border:0;
  background:#f0f3e9;
  border-radius:7px;
  height:33px;
  width:33px}
.play-buttons .main-play {
  background:var(--green);
  color:var(--lime);
  width:39px}
.speed-label {
  font-size:14px;
  color:var(--muted)}
select {
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  padding:6px;
  color:var(--ink);
  font-size:14px}
.shortcut-hint {
  color:#617057;
  font-size:14px;
  margin-left:auto;
  display:flex;
  gap:4px;
  align-items:center}
kbd {
  font:14px monospace;
  border:1px solid var(--line);
  border-radius:3px;
  padding:2px}
.text-button {
  background:transparent;
  border:0;
  font-size:14px;
  padding:4px;
  color:#66785b}
.transport-row>.text-button {
  margin-left:auto}
.workspace-caption {
  display:flex;
  justify-content:space-between;
  padding:18px 21px;
  font-size:14px;
  color:#617057;
  gap:14px}
.workspace-caption>span:first-child {
  display:flex;
  align-items:center;
  gap:7px}
.analysis-panel {
  padding:25px 23px;
  border-left:1px solid var(--line)}
.section-kicker {
  font-size:14px;
  letter-spacing:1.5px;
  color:#617057;
  display:flex;
  justify-content:space-between}
.section-kicker span {
  font-size:17px;
  line-height:12px}
h2 {
  font:500 24px 'Manrope',sans-serif;
  letter-spacing:-1px;
  margin:13px 0 8px}
.panel-copy {
  font-size:14px;
  line-height:1.6;
  color:#617057;
  margin:0 0 20px}
.setting-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  margin:17px 0}
.range-settings {
  font-size:14px;
  color:#73816b}
.range-settings small {
  font-size:14px;
  color:#617057}
.range-settings>div {
  display:flex;
  gap:10px;
  margin-top:8px;
  align-items:center}
.range-settings label {
  display:flex;
  align-items:center;
  gap:6px}
.range-settings input {
  width:65px;
  border:1px solid var(--line);
  padding:6px;
  border-radius:5px;
  color:var(--ink);
  font-size:14px}
.analyze-button {
  width:100%;
  border:0;
  background:var(--lime);
  padding:13px 15px;
  border-radius:7px;
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:14px;
  margin:15px 0 8px}
.analysis-status {
  font-size:14px;
  line-height:1.5;
  color:#617057;
  min-height:30px}
progress {
  width:100%;
  height:6px;
  accent-color:var(--green)}
.overlay-options {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line)}
input[type=checkbox] {
  accent-color:var(--green);
  margin:0 4px 0 0;
  vertical-align:middle}
.metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 12px;
  margin-top:20px}
.metrics>div {
  display:flex;
  flex-direction:column;
  gap:6px}
.metrics span {
  font-size:14px;
  color:#617057}
.metrics strong {
  font:500 27px 'Manrope',sans-serif;
  color:#53674c;
  letter-spacing:-1px}
.metrics small {
  font-size:14px;
  color:#617057;
  margin-left:4px}
.metric-note {
  font-size:14px;
  color:#617057;
  line-height:1.6;
  margin:13px 0 20px}
.phase-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px}
.phase-heading h3 {
  font-size:14px;
  font-weight:600;
  margin:0}
.compact {
  font-size:14px;
  margin:6px 0 12px}
.phases {
  display:grid;
  gap:6px}
.phase-row {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px}
.phase-number {
  font:14px monospace;
  color:#617057}
.phase-row>span:nth-child(2) {
  flex:1}
.phase-row button {
  background:#f4f6ef;
  border:1px solid #e6e9df;
  border-radius:4px;
  padding:5px 8px;
  font-size:14px}
.phase-row .phase-time {
  font-family:monospace;
  background:transparent;
  border:0;
  color:#637c50}
.tempo {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:17px;
  font-size:14px}
.tempo strong {
  font:500 18px 'Manrope',sans-serif}
.export-button {
  width:100%;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:14px}
.comparison-bar {
  padding:14px 18px 0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap}
.comparison-bar>div {
  display:flex;
  gap:10px;
  align-items:center}
.comparison-bar strong {
  font-size:14px}
.segmented {
  display:flex;
  border:1px solid var(--line);
  padding:3px;
  border-radius:6px}
.segmented button {
  border:0;
  background:transparent;
  font-size:14px;
  padding:6px 10px;
  border-radius:4px;
  color:#617057}
.segmented button[aria-pressed=true] {
  background:#e1e9d5;
  color:var(--green)}
.comparison-bar p {
  font-size:14px;
  color:#617057;
  margin:0;
  flex-basis:100%}
.analysis-target {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:14px}
.analysis-target span {
  margin-right:auto;
  color:var(--muted)}
.analysis-target button {
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px;
  background:#fff;
  font-size:14px}
.analysis-target button[aria-pressed=true] {
  background:#eaf0df}
.guide {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:38px;
  padding:51px 0}
.guide .eyebrow {
  font-size:14px;
  letter-spacing:1.4px}
.guide h2 {
  font-size:27px;
  line-height:1.2}
.guide article>span {
  font:14px monospace;
  color:#8a9a75}
.guide article h3 {
  font-size:14px;
  margin:16px 0 10px;
  font-weight:600}
.guide article p {
  font-size:14px;
  line-height:1.8;
  color:#617057;
  margin:0}
footer {
  max-width:1350px;
  margin:auto;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:25px 0 32px;
  font-size:14px;
  letter-spacing:.4px;
  color:#617057}
.footer-muted {
  color:#617057}
dialog {
  border:1px solid var(--line);
  border-radius:18px;
  max-width:520px;
  padding:38px;
  color:var(--ink);
  background:var(--paper)}
dialog::backdrop {
  background:#17251f99}
dialog p {
  font-size:14px;
  line-height:1.7;
  color:#73816b}
.dialog-close {
  position:absolute;
  right:15px;
  top:10px;
  background:none;
  border:0;
  font-size:24px}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#fff;
  border-radius:8px;
  padding:13px 20px;
  box-shadow:0 4px 18px #0003;
  z-index:10;
  font-size:14px;
  max-width:90vw}
.compare .dropzone {
  inset:12px;
  padding:10px}
.compare .dropzone strong {
  font-size:17px}
.compare .drop-description {
  font-size:14px;
  text-align:center}
.compare .file-types {
  font-size:14px}
.compare .stage {
  height:400px}
.compare .upload-cta {
  padding:10px 17px}

@media(min-width:1500px) {
  .stage {
  height:470px}
.compare .stage {
  height:470px}
}
@media(max-width:1150px) {
  main {
  padding:0 3%}
.site-header {
  padding-left:3%;
  padding-right:3%}
.workspace {
  grid-template-columns:minmax(0,1fr) 330px}
.analysis-panel {
  padding:22px 17px}
.shortcut-hint {
  display:none}
.intro-note {
  margin-right:0}
.guide {
  gap:25px}
footer {
  margin:0 3%}
.stage,.compare .stage {
  height:390px}
.compare .video-bottom {
  padding:8px;
  gap:5px}
}
@media(max-width:850px) {
  .workspace {
  grid-template-columns:1fr}
.analysis-panel {
  border-left:0;
  border-top:1px solid var(--line);
  display:block}
.metrics {
  grid-template-columns:repeat(4,1fr)}
.range-settings>div {
  max-width:280px}
.analysis-panel {
  padding:25px}
.intro {
  padding-top:35px}
.intro-note {
  display:none}
.stage,.compare .stage {
  height:390px}
.guide {
  grid-template-columns:1fr 1fr;
  gap:25px}
.workspace-label {
  display:none}
.header-right>span {
  display:none}
.mode-switch {
  width:100%}
.mode-switch button {
  flex:1}
.studio-heading {
  padding:12px}
.analysis-target {
  max-width:270px}
}
@media(max-width:500px) {
  .site-header {
  padding:20px 5%}
.header-right a {
  margin:0;
  font-size:14px}
main {
  padding:0 4%}
h1 {
  font-size:43px}
.intro {
  padding:30px 0}
.intro-copy {
  font-size:14px}
.mode-switch button {
  padding:11px 8px;
  font-size:14px}
.mode-switch button span {
  margin-right:3px}
.stage {
  height:340px}
.compare .stage {
  height:285px}
.video-grid {
  padding:12px}
.video-grid.compare {
  padding:10px;
  gap:6px}
.compare .video-top {
  padding:8px;
  gap:5px}
.compare .file-name {
  font-size:14px}
.compare .video-top button {
  font-size:14px;
  padding:2px}
.compare .dropzone {
  inset:7px}
.compare .dropzone strong {
  font-size:14px}
.compare .drop-description {
  font-size:14px;
  margin-bottom:18px}
.compare .file-types {
  font-size:14px;
  line-height:1.5;
  text-align:center}
.compare .upload-icon {
  width:42px;
  height:42px;
  font-size:22px;
  margin-bottom:18px}
.compare .upload-cta {
  font-size:14px;
  padding:8px 10px}
.compare .video-bottom {
  gap:6px;
  justify-content:space-between}
.compare .fps-label {
  margin:0}
.transport {
  margin:0 12px;
  padding:11px}
.timeline-row {
  gap:7px}
.timeline-row output {
  font-size:14px}
.timeline-row .small-label {
  font-size:14px}
.transport-row {
  gap:10px}
.workspace-caption {
  font-size:14px;
  padding:15px}
.workspace-caption>span:last-child {
  display:none}
.guide {
  gap:25px 20px;
  padding:35px 5px}
.guide h2 {
  font-size:24px}
.guide article p {
  font-size:14px}
.guide article h3 {
  font-size:14px}
.guide .eyebrow {
  line-height:1.6}
.metrics {
  gap:10px}
.metrics strong {
  font-size:24px}
.metrics span {
  font-size:14px}
footer {
  flex-wrap:wrap;
  padding:22px 5px;
  font-size:14px}
footer>span:nth-child(2) {
  display:none}
.comparison-bar {
  padding:12px 12px 0;
  gap:7px}
.comparison-bar .text-button {
  font-size:14px}
.comparison-bar p {
  font-size:14px}
.section-kicker {
  font-size:14px}
}

@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important;
  scroll-behavior:auto!important}
}


@media(max-width:850px) {
  .stage {
  flex:none;
  min-height:0}
}

/* Comfortable type and controls at every viewport size. */
body { font-size: 16px; }
.intro-copy, .panel-copy, .guide article p, dialog p { font-size: 16px; }
.mode-switch button, .analyze-button, .setting-row, select, .range-settings input,
.phase-heading h3, .export-button, .guide article h3 { font-size: 16px; }
:root { --muted: #626f60; }
button, select { min-height: 36px; }
input[type=checkbox] { width: 16px; height: 16px; }
.analysis-panel { padding: 26px 22px; }
.analysis-target { max-width: none; flex-wrap: wrap; }
.analysis-target button { padding: 7px 10px; }
.range-settings input { width: 80px; }
.range-settings > div { flex-wrap: wrap; }
.metrics strong { font-size: 32px; }
.metric-note { font-size: 14px; }
.phase-number { display: none; }
.phase-row { gap: 6px; }
.phase-row button { padding: 6px; }
.phase-row > span:nth-child(2) { min-width: 0; }
.tempo { gap: 12px; }
.tempo strong { white-space: nowrap; }
.video-top { min-height: 56px; }
.video-top .remove { font-size: 24px; }
.slot-badge { width: 28px; height: 28px; flex-shrink: 0; }
.video-bottom { gap: 8px; }
.video-bottom button { padding: 6px 10px; }
.video-bottom .fps-label { display: flex; align-items: center; gap: 6px; }
.corner-label { background: #17251fd9; border-radius: 5px; padding: 6px 9px; max-width: calc(100% - 24px); }
.clip-time { white-space: nowrap; }
.timeline-row { flex-wrap: wrap; }
.timeline-row input { flex-basis: 40%; }
.play-buttons button { width: 42px; height: 42px; }
.play-buttons .main-play { width: 46px; }
.transport-row { flex-wrap: wrap; }
.shortcut-hint { display: none; }
.workspace-caption { flex-wrap: wrap; }
.workspace-label { display: none; }
.stage { flex: none; min-height: 0; height: 520px; }
.compare .stage { height: 520px; }
.video-grid { flex: none; }
.review-area { justify-content: flex-start; }
.workspace-caption { margin-top: auto; }
.dropzone .drop-description { max-width: 370px; text-align: center; }
.file-types { max-width: 320px; text-align: center; line-height: 1.5; }
.brand small { font-size: 11px; letter-spacing: 1.4px; }

/* Annotations live on their own layer; pose overlays remain independent. */
.stage .annotation-canvas { z-index: 2; }
.annotation-canvas.drawing-active { pointer-events: auto; cursor: crosshair; touch-action: none; }
.annotation-canvas.select-tool { cursor: move; }
.drawing-toolbar { padding: 20px; border-bottom: 1px solid var(--line); background: #f3f6eb; }
.drawing-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.drawing-eyebrow { font-size: 12px; letter-spacing: 1.3px; color: #627352; }
.drawing-heading h3 { font: 600 22px 'Manrope', sans-serif; margin: 4px 0 0; }
.drawing-target { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.drawing-target > span { color: #627352; margin-right: 4px; }
.drawing-target button { padding: 7px 10px; border: 1px solid #c8d3bd; border-radius: 7px; background: #fff; }
.drawing-target button[aria-pressed=true] { background: #354f3d; color: white; border-color: #354f3d; }
.drawing-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.drawing-tools button { display: flex; align-items: center; gap: 7px; border: 1px solid #d4dec8; background: #fff; padding: 10px 12px; border-radius: 8px; font-size: 15px; min-height: 44px; }
.drawing-tools svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawing-tools button[aria-pressed=true] { background: #354f3d; border-color: #354f3d; color: #e4f9b1; box-shadow: 0 2px 4px #354f3d20; }
.drawing-settings { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px; }
.drawing-settings label { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.drawing-settings select { padding: 7px; font-size: 14px; background: #fff; }
.drawing-colors { display: flex; gap: 2px; }
.drawing-colors button { width: 36px; height: 36px; padding: 5px; border: 2px solid transparent; border-radius: 50%; background: transparent; }
.drawing-colors button[aria-pressed=true] { border-color: #354f3d; }
.drawing-colors span { display: block; background: var(--swatch); border: 1px solid #0002; border-radius: 50%; width: 22px; height: 22px; }
#drawingVisibility { font-size: 14px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.drawing-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 13px; margin-top: 13px; border-top: 1px solid #dce4d3; }
.drawing-actions > div { display: flex; gap: 6px; flex-wrap: wrap; }
.drawing-actions button { font-size: 14px; background: #fff; border: 1px solid #d0dcc2; border-radius: 6px; padding: 8px 10px; }
.drawing-actions .snapshot-button { background: #e0edc6; border-color: #bccda5; }
.drawing-footer { display: flex; gap: 15px; justify-content: space-between; align-items: start; margin-top: 12px; color: #617052; font-size: 14px; }
.drawing-footer p { line-height: 1.5; margin: 0; }
#drawingCount { white-space: nowrap; font-size: 13px; padding-top: 2px; }
.drawing-frames { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.drawing-frames:not(:empty) { margin-top: 12px; }
.drawing-frames span { font-size: 14px; margin-right: 4px; }
.drawing-frames button { border: 1px solid #cddabd; border-radius: 6px; background: #fff; font: 14px monospace; padding: 5px 9px; }
@media (min-width: 1300px) { .review-area { align-self: start; position: sticky; top: 0; } }
@media (max-width: 1150px) { .workspace { grid-template-columns: minmax(0,1fr) 330px; } .stage, .compare .stage { height: 430px; } }
@media (max-width: 1000px) { .workspace { grid-template-columns: 1fr; } .analysis-panel { border-left: 0; border-top: 1px solid var(--line); } .metrics { grid-template-columns: repeat(4,1fr); } .phase-row { max-width: 450px; } }
@media (max-width: 600px) {
  .header-right { display: none; }
  .intro-copy { font-size: 16px; }
  .mode-switch button { font-size: 15px; padding: 11px 8px; }
  .mode-switch button span { display: none; }
  .studio-heading { padding: 10px; }
  .drawing-toolbar { padding: 15px 12px; }
  .drawing-heading { flex-wrap: wrap; }
  .drawing-eyebrow { display: none; }
  .drawing-target > span { display: none; }
  .drawing-target button { font-size: 14px; }
  .drawing-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .drawing-tools button { flex-direction: column; padding: 9px 3px; gap: 5px; font-size: 14px; }
  .drawing-settings { gap: 10px; }
  .drawing-settings select { font-size: 16px; }
  .drawing-footer { flex-direction: column; gap: 5px; }
  .drawing-colors button { width: 40px; height: 40px; padding: 7px; }
  .stage { height: 390px; }
  .compare .stage { height: 285px; }
  .compare .video-top { flex-wrap: wrap; padding: 8px; }
  .compare .video-top .file-name { flex-basis: calc(100% - 38px); font-size: 14px; }
  .compare .video-top .replace { flex: 1; font-size: 14px; }
  .compare .video-bottom { padding: 8px; gap: 6px; }
  .compare .video-bottom button { font-size: 14px; width: 100%; }
  .compare .video-bottom .fps-label { width: 100%; justify-content: space-between; }
  .compare .corner-label { left: 6px; bottom: 6px; max-width: calc(100% - 12px); font-size: 11px; padding: 4px; }
  .compare .corner-label .clip-time { font-size: 12px; }
  .compare .dropzone strong { font-size: 17px; line-height: 1.3; }
  .compare .drop-description { font-size: 14px; line-height: 1.4; margin: 12px 0; }
  .compare .file-types { display: none; }
  .compare .upload-cta { font-size: 14px; padding: 10px 7px; }
  .compare .upload-icon { display: none; }
  .comparison-bar { padding: 14px 12px; }
  .comparison-bar strong, .comparison-bar p, .comparison-bar .text-button { font-size: 14px; }
  .comparison-bar .segmented button { font-size: 14px; }
  .timeline-row { gap: 8px; }
  .timeline-row .small-label { font-size: 14px; }
  .timeline-row output { font-size: 14px; }
  .timeline-row input { order: 3; flex-basis: 100%; }
  .timeline-row output { margin-left: auto; }
  .workspace-caption { font-size: 14px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 20px; }
  .metrics span { font-size: 14px; }
  .metrics strong { font-size: 32px; }
  .guide { grid-template-columns: 1fr; gap: 25px; }
  .guide article h3 { font-size: 18px; }
  .guide article p { font-size: 16px; }
  .guide .eyebrow { font-size: 12px; }
  footer { font-size: 14px; }
}
/* Keep the video still while the angle tool changes its step-by-step hint. */
.drawing-footer p { min-height: 42px; }
@media (max-width: 600px) { .drawing-footer p { min-height: 63px; } }
/* One transformed plane keeps the video, pose and drawing layers registered. */
.video-plane { position: absolute; transform-origin: center; }
.video-plane > video, .video-plane > canvas { position: absolute; inset: 0; }
.stage .corner-label { z-index: 3; }
.stage.zoom-panning { cursor: grab; touch-action: none; user-select: none; }
.stage.zoom-dragging { cursor: grabbing; }
.zoom-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; color: #e4eddf; background: #203128; border-top: 1px solid #ffffff12; }
.zoom-controls button { border: 1px solid #ffffff30; background: #ffffff09; color: #e4eddf; border-radius: 6px; padding: 5px 10px; font-size: 16px; min-width: 36px; }
.zoom-controls button[aria-pressed=true] { color: #233829; background: var(--lime); border-color: var(--lime); }
.zoom-label { font-size: 14px; }
.zoom-controls .zoom-in, .zoom-controls .zoom-out { font-size: 22px; line-height: 1; }
.zoom-slider { flex: 1; min-width: 55px; width: 80px; max-width: 200px; accent-color: var(--lime); }
.zoom-value { font: 14px monospace; min-width: 5ch; }
.zoom-help { flex-basis: 100%; font-size: 14px; color: #bfd0ba; line-height: 1.4; min-height: 40px; }
@media (max-width: 600px) {
  .compare .zoom-controls { gap: 6px; padding: 10px 8px; }
  .compare .zoom-label { flex: 1; }
  .compare .zoom-value { order: 0; }
  .compare .zoom-out { order: 1; }
  .compare .zoom-slider { order: 2; min-width: 30px; }
  .compare .zoom-in { order: 3; }
  .compare .zoom-pan { order: 4; flex: 1; }
  .compare .zoom-fit { order: 5; flex: 1; }
  .compare .zoom-help { order: 6; min-height: 80px; }
  .compare .zoom-controls button { padding: 5px 8px; }
}
@media (max-width: 600px) {
  .compare .zoom-controls { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .compare .zoom-label { grid-column: 1; grid-row: 1; }
  .compare .zoom-value { grid-column: 2 / 4; grid-row: 1; justify-self: end; }
  .compare .zoom-out { grid-column: 1; grid-row: 2; }
  .compare .zoom-slider { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; margin: 0; }
  .compare .zoom-in { grid-column: 3; grid-row: 2; }
  .compare .zoom-pan { grid-column: 1 / 3; grid-row: 3; }
  .compare .zoom-fit { grid-column: 3; grid-row: 3; padding: 5px 3px; }
  .compare .zoom-help { grid-column: 1 / 4; grid-row: 4; }
}