.bust-lesson-mode {
  overflow: hidden;
}

.bust-lesson {
  --bust-copy-width: min(395px, 28vw);
  --bust-copy-right: clamp(76px, 8vw, 136px);
  --bust-copy-left: calc(100% - var(--bust-copy-right) - var(--bust-copy-width));
  position: relative;
  min-height: calc(100vh - 86px);
  padding: 0;
  display: block;
  background: #ede9e4;
}

.bust-visual {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 0;
  width: var(--bust-copy-left);
  height: 100%;
  display: grid;
  place-items: center;
}

.bust-stage {
  position: relative;
  height: 100%;
  aspect-ratio: 840 / 1223;
  max-width: 100%;
  overflow: hidden;
  transform: translateX(50px);
}

.bust-image,
.bust-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.bust-image {
  opacity: var(--bust-opacity, 1);
  object-fit: contain;
  user-select: none;
  transition: opacity 720ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bust-image.is-entering {
  opacity: 0;
}

.bust-image.is-opacity-animating,
.bust-image.is-opacity-adjusting {
  transition: none;
}

.bust-overlay {
  overflow: visible;
  touch-action: none;
}

.bust-information {
  position: absolute;
  top: calc(clamp(54px, 8vh, 92px) - 10px);
  right: var(--bust-copy-right);
  width: var(--bust-copy-width);
  max-width: none;
  margin: 0;
  color: rgba(24, 24, 24, 0.82);
  font-family: var(--plain);
  pointer-events: auto;
  z-index: 23;
}

.bust-title {
  max-width: none;
  margin: 0 0 8px;
}

.bust-intro {
  max-width: none;
  margin: 10px 0 0;
  color: inherit;
  font-family: var(--plain);
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
}

.bust-step-meta {
  min-height: 126px;
  margin-top: 30px;
  padding-top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
  align-content: start;
}

.bust-step-number {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin: 0;
  color: #000;
  font-family: var(--heading);
  font-size: clamp(17px, 1.23vw, 22px);
  font-weight: var(--heading-weight);
  line-height: 1.05;
}

.bust-information .bust-step-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 7px;
  color: #000;
  font-family: var(--heading);
  font-size: clamp(17px, 1.23vw, 22px);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: none;
}

.bust-step-text {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 560px;
  margin: 0;
  color: inherit;
  font-family: var(--plain);
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
}

.bust-controls {
  position: static;
  inset: auto;
  margin-top: 26px;
  transform: none;
}

.bust-opacity-control {
  display: block;
  width: 184px;
  margin-top: 18px;
  color: rgba(52, 57, 69, 0.66);
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 400;
  pointer-events: auto;
}

.bust-opacity-labels {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
}

.bust-opacity-labels > :first-child {
  transform: translateX(5px);
}

.bust-opacity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background: linear-gradient(
    to right,
    #343945 0 var(--bust-opacity-progress, 90%),
    #d8d3ca var(--bust-opacity-progress, 90%) 100%
  );
  box-shadow: none;
  cursor: pointer;
}

.bust-opacity-slider:focus,
.bust-opacity-slider:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.bust-opacity-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.bust-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 38px;
  height: 18px;
  margin-top: -5px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(52, 57, 69, 0.2);
  transition: background-color 150ms ease;
}

.bust-opacity-slider::-moz-range-track,
.bust-opacity-slider::-moz-range-progress {
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.bust-opacity-slider::-moz-range-thumb {
  width: 38px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(52, 57, 69, 0.2);
  transition: background-color 150ms ease;
}

.bust-opacity-slider:is(:hover, :focus-visible)::-webkit-slider-thumb {
  background: #53b7f9;
}

.bust-opacity-slider:is(:hover, :focus-visible)::-moz-range-thumb {
  background: #53b7f9;
}

.bust-reset-button[hidden] {
  display: none;
}

.bust-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms ease;
}

.bust-layer.is-visible {
  opacity: 1;
}

.bust-level {
  fill: none;
  stroke: #676d73;
  stroke-width: 1;
  opacity: 0.55;
}

.bust-reference,
.bust-scale-segment,
.bust-scale-tick,
.bust-slope {
  fill: none;
  stroke: #9c00ff;
  stroke-linecap: round;
}

.bust-reference {
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
}

.bust-scale-segment {
  stroke-width: 1.4;
  transition: stroke 380ms ease;
}

.bust-scale-tick {
  stroke-width: 1.2;
  transition: stroke 380ms ease;
}

.bust-measure-label {
  fill: #9c00ff;
  font-family: var(--plain);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  transition: fill 380ms ease;
}

.bust-lesson.bust-measure-muted .bust-scale-segment,
.bust-lesson.bust-measure-muted .bust-scale-tick {
  stroke: #8a8782;
}

.bust-lesson.bust-measure-muted .bust-measure-label {
  fill: #8a8782;
}

.bust-slope {
  stroke: #8a8782;
  stroke-width: 1.3;
}

.bust-outline-segment,
.bust-starter-segment,
.bust-width-branch-segment {
  fill: none;
  stroke: #9c00ff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment {
  animation: bust-line-draw 700ms cubic-bezier(0.42, 0, 0.58, 1) both;
  animation-delay: 340ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment:nth-of-type(2) {
  animation-delay: 1380ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment:nth-of-type(3) {
  animation-delay: 2420ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment:nth-of-type(4) {
  animation-delay: 3460ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment:nth-of-type(5) {
  animation-delay: 4500ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-segment:nth-of-type(6) {
  animation-delay: 5540ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point {
  animation: bust-point-in 280ms ease-out both;
  animation-delay: 0ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point:nth-of-type(2) {
  animation-delay: 1040ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point:nth-of-type(3) {
  animation-delay: 2080ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point:nth-of-type(4) {
  animation-delay: 3120ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point:nth-of-type(5) {
  animation-delay: 4160ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-starter-point:nth-of-type(6) {
  animation-delay: 5200ms;
}

.bust-detail-outline {
  fill: none;
  stroke: #9c00ff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 1200ms ease;
}

.bust-shadow-boundary {
  fill: none;
  stroke: url(#bust-pencil-fill) #666b75;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bust-shadow-fill {
  fill: url(#bust-pencil-fill) #666b75;
  stroke: none;
}

.bust-shadow-fill-neck {
  stroke: url(#bust-pencil-fill) #666b75;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bust-shadow-fills,
.bust-shadow-boundaries {
  filter: url(#bust-pencil-edge);
}

.bust-lesson[data-step="6"] .bust-detail-outline,
.bust-lesson[data-step="7"] .bust-detail-outline,
.bust-lesson[data-step="8"] .bust-detail-outline {
  stroke: #343945;
  filter: url(#bust-pencil-outline);
}

.bust-lesson[data-step="7"] .bust-key-point,
.bust-lesson[data-step="8"] .bust-key-point {
  visibility: hidden;
}

.bust-lesson[data-step="8"] .bust-overlay.is-animating .bust-shadow-fill {
  animation: bust-shadow-fill-in 560ms ease-out both;
}

@keyframes bust-shadow-fill-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bust-lesson[data-step="7"] .bust-overlay.is-animating .bust-shadow-boundary {
  animation: bust-line-draw var(--shadow-duration) linear both;
  animation-delay: var(--shadow-delay);
}

.bust-key-point {
  fill: #ede9e4;
  stroke: #9c00ff;
  stroke-width: 2.5;
  cursor: grab;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
  transition: fill 150ms ease, r 150ms ease;
}

.bust-key-point:hover,
.bust-key-point:focus-visible {
  fill: #9c00ff;
  outline: none;
}

.bust-key-point:active {
  cursor: grabbing;
}

.bust-lesson:not([data-step="4"]):not([data-step="5"]) .bust-nose-point {
  pointer-events: none;
}

.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-nose-point {
  animation: bust-point-in 280ms ease-out both;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-reference,
.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-vertical,
.bust-lesson[data-step="3"] .bust-overlay.is-animating .bust-slope {
  animation: bust-line-draw 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-vertical {
  animation-delay: 1490ms;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-outline-segment {
  animation: bust-line-draw var(--outline-segment-duration) cubic-bezier(0.42, 0, 0.58, 1) both;
  animation-delay: calc(6400ms + var(--outline-segment-delay));
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-reference {
  animation: bust-reference-to-outline 520ms ease-in-out both;
  animation-delay: 6400ms;
}

.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-outline {
  animation: bust-blue-outline-out 180ms ease-out both;
}

.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-measure,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-nose-points,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-base-measure,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-scale,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-width-measure,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-slopes,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-starter,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-starter-points,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-width-branches,
.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-width-branch-points {
  animation: bust-construction-out 1500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.bust-lesson[data-step="6"] .bust-overlay.is-animating .bust-key-point {
  animation: bust-point-out 360ms cubic-bezier(0.4, 0, 1, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}

.bust-lesson[data-step="6"] .bust-key-point {
  pointer-events: none;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-horizontal,
.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-scale-horizontal {
  animation: bust-horizontal-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--measure-index) * 110ms);
  transform-box: fill-box;
  transform-origin: left center;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-horizontal {
  animation-delay: calc(760ms + var(--measure-index) * 110ms);
}

.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-scale-extension {
  animation: bust-line-draw 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(420ms + var(--measure-index) * 250ms);
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-label,
.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-scale-label {
  animation: bust-label-in 360ms ease-out both;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-tick {
  animation: bust-horizontal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 2210ms;
  transform-box: fill-box;
  transform-origin: center;
}

.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-scale-extension-tick {
  animation: bust-horizontal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(980ms + var(--measure-index) * 250ms);
  transform-box: fill-box;
  transform-origin: center;
}

.bust-lesson[data-step="1"] .bust-overlay.is-animating .bust-base-label {
  animation-delay: 2210ms;
}

.bust-lesson[data-step="2"] .bust-overlay.is-animating .bust-scale-label {
  animation-delay: calc(790ms + var(--measure-index) * 250ms);
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-guide {
  animation:
    bust-horizontal-in 650ms cubic-bezier(0.22, 1, 0.36, 1) both,
    bust-width-stroke-muted 380ms ease 2740ms both;
  transform-box: fill-box;
  transform-origin: right center;
}

.bust-lesson[data-step="5"] .bust-width-guide,
.bust-lesson[data-step="5"] .bust-width-unit,
.bust-lesson[data-step="5"] .bust-width-tick {
  stroke: #9c00ff;
}

.bust-lesson[data-step="5"] .bust-width-guide {
  opacity: 1;
}

.bust-lesson[data-step="5"] .bust-width-label {
  fill: #9c00ff;
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-unit {
  animation:
    bust-line-draw 450ms cubic-bezier(0.22, 1, 0.36, 1) both,
    bust-width-stroke-muted 380ms ease both;
  animation-delay: calc(700ms + var(--measure-index) * 350ms), 2740ms;
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-tick {
  animation:
    bust-label-in 260ms ease-out both,
    bust-width-stroke-muted 380ms ease both;
  animation-delay: calc(1120ms + var(--measure-index) * 350ms), 2740ms;
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-label {
  animation:
    bust-label-in 260ms ease-out both,
    bust-width-fill-muted 380ms ease both;
  animation-delay: calc(1120ms + var(--measure-index) * 350ms), 2740ms;
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-neck-point-layer .bust-key-point {
  animation: bust-point-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 2350ms;
  transform-box: fill-box;
  transform-origin: center;
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-branch-segment {
  animation: bust-line-draw 520ms cubic-bezier(0.42, 0, 0.58, 1) both;
  animation-delay: calc(3140ms + var(--branch-index) * 720ms);
}

.bust-lesson[data-step="5"] .bust-overlay.is-animating .bust-width-branch-point {
  animation: bust-point-in 340ms ease-out both;
  animation-delay: calc(2800ms + var(--branch-index) * 720ms);
  transform-box: fill-box;
  transform-origin: center;
}

.bust-lesson[data-step="4"] .bust-overlay.is-animating .bust-points .bust-key-point {
  animation: bust-point-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(6400ms + var(--point-index) * 90ms);
}

@keyframes bust-line-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes bust-width-stroke-muted {
  from { stroke: #9c00ff; }
  to { stroke: #8a8782; }
}

@keyframes bust-width-fill-muted {
  from { fill: #9c00ff; }
  to { fill: #8a8782; }
}

@keyframes bust-reference-to-outline {
  from {
    stroke: #9c00ff;
    stroke-width: 3.5;
  }
  to {
    stroke: #9c00ff;
    stroke-width: 3.5;
  }
}

@keyframes bust-point-in {
  from { opacity: 0; transform: scale(0.35); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}

@keyframes bust-point-out {
  from { transform: scale(1); }
  to { transform: scale(0); }
}

@keyframes bust-horizontal-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes bust-label-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bust-construction-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bust-image {
    transition-duration: 0ms;
    transition-delay: 0ms;
  }

  .bust-detail-outline {
    transition-duration: 0ms;
  }
}

@keyframes bust-blue-outline-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 900px) {
  .bust-lesson-mode {
    overflow: visible;
  }

  .bust-lesson {
    min-height: calc(100vh - 76px);
    padding: 28px 22px 54px 72px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bust-information {
    position: static;
    width: 100%;
    max-width: 620px;
    grid-row: 1;
  }

  .bust-visual {
    position: static;
    grid-row: 2;
    width: 100%;
    height: min(72vh, 720px);
  }

  .bust-step-meta {
    min-height: 145px;
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bust-overlay.is-animating * {
    animation: none !important;
  }

  .bust-lesson[data-step="6"] .bust-outline,
  .bust-lesson[data-step="6"] .bust-measure,
  .bust-lesson[data-step="6"] .bust-nose-points,
  .bust-lesson[data-step="6"] .bust-base-measure,
  .bust-lesson[data-step="6"] .bust-scale,
  .bust-lesson[data-step="6"] .bust-width-measure,
  .bust-lesson[data-step="6"] .bust-slopes,
  .bust-lesson[data-step="6"] .bust-starter,
  .bust-lesson[data-step="6"] .bust-starter-points,
  .bust-lesson[data-step="6"] .bust-width-branches,
  .bust-lesson[data-step="6"] .bust-width-branch-points,
  .bust-lesson[data-step="6"] .bust-points,
  .bust-lesson[data-step="6"] .bust-neck-point-layer {
    opacity: 0;
  }
}

/* Second geometry study: shared bust layout, original torso image coordinates. */
.torso-geometry-lesson .bust-stage {
  aspect-ratio: 737 / 1448;
  scale: 0.85;
  transform-origin: center;
}
.torso-geometry-lesson .torso-outline path,
.torso-geometry-lesson .torso-refined-outline {
  fill: none; stroke: #60615f; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.torso-geometry-lesson.torso-drawing[data-torso-step="1"] .bust-reference {
  animation: bust-line-draw 1100ms ease both;
}
.torso-geometry-lesson.torso-drawing[data-torso-step="3"] .torso-outline path {
  animation: bust-line-draw 420ms ease both;
  animation-delay: calc(var(--torso-index) * 340ms);
}
@media (max-width: 900px) {
  .torso-geometry-lesson .bust-stage { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .torso-geometry-lesson.torso-drawing .bust-overlay * { animation: none !important; }
}

.torso-geometry-lesson [hidden] { display: none !important; }
.geometry-study-nav {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 24;
}
.geometry-study-dot {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; color: #303745;
}
.geometry-study-dot::after {
  content: ""; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%;
}
.geometry-study-dot[aria-current]::after { background: currentColor; }
.geometry-study-dot:focus-visible { outline: 2px solid #9c00ff; outline-offset: 2px; }