@font-face {
  font-display: swap;
  font-family: "Manga Master Pro";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/MangaMasterProBB_reg.woff2") format("woff2"),
    url("../webfonts/MangaMasterProBB_reg.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Manga Master Pro";
  font-style: italic;
  font-weight: 400;
  src: url("../webfonts/MangaMasterProBB_ital.woff2") format("woff2"),
    url("../webfonts/MangaMasterProBB_ital.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "FictionalFriend";
  font-style: italic;
  font-weight: 700;
  src: url("../webfonts/FictionalFriend-BoldItalic.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Fictional-Friend";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/Fictional-Friend.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 300;
  src: url("../webfonts/M_PLUS_Rounded_1c/M PLUS Rounded 1c-300.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/M_PLUS_Rounded_1c/M PLUS Rounded 1c-regular.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "MuseoSansRounded";
  font-style: normal;
  font-weight: 300;
  src: url("../webfonts/MuseoSansRounded/MuseoSansRounded300.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "MuseoSansRounded";
  font-style: normal;
  font-weight: 500;
  src: url("../webfonts/MuseoSansRounded/MuseoSansRounded500.woff") format("woff");
}

.horizon {
  stroke: #98a4ad;
  stroke-width: 1.35;
  opacity: 0.78;
}

#appContent[data-theme="konstrukcia"] .horizon {
  stroke: #2698f2;
  stroke-width: 1.1;
  opacity: 0.72;
}

.horizon.basics-horizon {
  stroke: #53b7f9;
  stroke-width: 2.2;
  opacity: 1;
}

.horizon.figures-3d-horizon {
  stroke: #2698f2;
  stroke-width: 2.4;
  opacity: 0.96;
}

.guide {
  fill: none;
  stroke-width: 0.82;
  stroke-linecap: round;
  opacity: 0.22;
}

.guide.left,
.edge.left-highlight {
  stroke: var(--left-guide);
}

.guide.right,
.edge.right-highlight {
  stroke: var(--right-guide);
}

.guide.vertical,
.edge.vertical-highlight {
  stroke: var(--vertical-guide);
}

.guides-hidden .guide {
  display: none;
}

.horizon-hidden .horizon {
  display: none;
}

.horizon-info {
  cursor: pointer;
}

.horizon-move-control {
  cursor: grab;
  outline: none;
}

.horizon-move-control:active {
  cursor: grabbing;
}

.horizon-move-arrow {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.horizon-move-triangle {
  fill: var(--edge);
  stroke: none;
  pointer-events: none;
}

.horizon-label-text {
  fill: #555;
  font-family: var(--plain);
  font-size: 13px;
  font-weight: 600;
  text-anchor: start;
  pointer-events: none;
}

.horizon-info-text {
  fill: var(--edge);
  font-family: var(--plain);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

@keyframes horizon-popup-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.edge {
  fill: none;
  stroke: var(--edge);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edge.secondary {
  stroke-width: 3.25;
  opacity: 0.7;
}

.ellipse-square {
  stroke: var(--left-guide);
  stroke-width: 1.7;
  opacity: 0.82;
}

.ellipse-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ellipse-construction-axis,
.ellipse-construction-spoke,
.ellipse-construction-vertical,
.ellipse-construction-horizontal,
.ellipse-construction-right-angle,
.ellipse-construction-outer,
.ellipse-construction-inner,
.ellipse-construction-result {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ellipse-construction-axis {
  stroke: #7d8993;
  stroke-width: 1.25;
  opacity: 0.46;
}

.ellipse-construction-outer {
  stroke: #f2ad32;
  stroke-width: 1.8;
  opacity: 0.76;
}

.ellipse-construction-inner {
  stroke: #65a8d4;
  stroke-width: 1.8;
  opacity: 0.9;
}

.ellipse-construction-spoke {
  stroke: #7da68b;
  stroke-width: 0.9;
  opacity: 0.48;
}

.ellipse-construction-vertical {
  stroke: #f2ad32;
  stroke-width: 1.45;
  opacity: 0.58;
}

.ellipse-construction-horizontal {
  stroke: #65a8d4;
  stroke-width: 1.45;
  opacity: 0.62;
}

.ellipse-construction-right-angle {
  stroke: #536273;
  stroke-width: 1.1;
  opacity: 0.62;
}

.ellipse-construction-result {
  stroke: var(--edge);
  stroke-width: 2.4;
}

.ellipse-construction-outer-point,
.ellipse-construction-inner-point,
.ellipse-construction-result-point {
  pointer-events: none;
}

.ellipse-construction-outer-point {
  fill: #fff;
  stroke: #f2ad32;
  stroke-width: 1.7;
}

.ellipse-construction-inner-point {
  fill: #fff;
  stroke: #65a8d4;
  stroke-width: 1.7;
}

.ellipse-construction-result-point {
  fill: var(--edge);
  stroke: var(--edge);
  stroke-width: 1.4;
}

.construction-square-workspace .perspective-square-plane {
  fill: none;
  stroke: none;
}

.construction-square-workspace .perspective-square-plane.is-primary {
  fill: none;
}

.construction-square-workspace .perspective-square-horizon {
  fill: none;
  stroke: #2698f2;
  stroke-width: 1.1;
  opacity: 0.72;
}

.construction-square-workspace .perspective-square-ray {
  fill: none;
  stroke: #7d8993;
  stroke-width: 1.25;
  opacity: 0.46;
}

.construction-square-workspace .perspective-square-centerline {
  fill: none;
  stroke: #7da68b;
  stroke-width: 1.25;
  opacity: 0.48;
}

.construction-square-workspace .perspective-square-secondary-outline {
  fill: none;
  stroke: rgba(42, 41, 38, 0.92);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.construction-square-workspace .perspective-square-diagonal {
  fill: none;
  stroke: #f2ad32;
  stroke-width: 1.45;
  opacity: 0.58;
}

.construction-square-workspace .perspective-square-diagonal.is-primary {
  stroke: #65a8d4;
  stroke-width: 1.45;
  opacity: 0.62;
}

.construction-square-workspace .perspective-square-transfer-line {
  fill: none;
  stroke: #f2ad32;
  stroke-width: 1.45;
  opacity: 0.58;
}

.construction-square-workspace .perspective-square-center-point {
  fill: #fff;
  stroke: rgba(60, 143, 153, 0.82);
  stroke-width: 1.7;
  pointer-events: none;
}

.construction-square-workspace .perspective-square-center-point.is-primary {
  fill: #fff;
  stroke: #65a8d4;
  stroke-width: 1.7;
}

.construction-square-workspace .perspective-square-back-center-point {
  fill: #fff;
  stroke: #f2ad32;
  stroke-width: 1.7;
  pointer-events: none;
}

.construction-square-workspace .perspective-square-spacing-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  pointer-events: all;
  cursor: ns-resize;
  outline: none;
}

.construction-square-workspace :is(
  .perspective-square-center-point,
  .perspective-square-back-center-point
).is-depth-2 {
  stroke-width: 1.4;
}

.construction-square-workspace :is(
  .perspective-square-center-point,
  .perspective-square-back-center-point
).is-depth-3 {
  stroke-width: 1.15;
}

.construction-square-workspace :is(
  .perspective-square-center-point,
  .perspective-square-back-center-point
).is-depth-4,
.construction-square-workspace .perspective-square-back-center-point.is-depth-5 {
  stroke-width: 0.95;
}

.cylinder-ellipse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cylinder-side {
  stroke-width: 3.3;
}

.lesson-svg .vase-profile-line {
  stroke-width: 3.2;
}

.cylinder-square {
  stroke: var(--left-guide);
  stroke-width: 1.4;
  opacity: 0.62;
}

.cylinder-transparent-ellipse {
  opacity: 0.58;
}

.cylinder-hidden {
  stroke-width: 2.2;
  stroke-dasharray: 3 5;
  opacity: 0.44;
}

.cylinder-axis {
  opacity: 0.62;
}

.construction-line,
.construction-axis {
  fill: none;
  stroke: #687782;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.38;
}

.construction-axis {
  stroke: var(--accent);
  stroke-dasharray: 4 5;
  opacity: 0.52;
}

.hidden-edge {
  fill: none;
  stroke: #7d8993;
  stroke-width: 2.6;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  opacity: 0.38;
}

.hidden-edge.one-point-hidden-under-top {
  stroke: #d5dce5;
  stroke-width: 2.1;
  opacity: 0.08;
}

.hidden-off .hidden-edge {
  display: none;
}

.face {
  stroke: none;
  pointer-events: none;
}

.face.top {
  fill: rgba(34, 39, 56, 0.13);
}

.face.top.one-point-top {
  fill: #e9eef5;
}

.face.top.two-point-top {
  fill: #edf2f7;
}

.face.top.three-point-top {
  fill: #edf2f7;
}

.face.top.horizon-box-top {
  fill: #edf2f7;
}

.face.bottom {
  fill: rgba(58, 86, 104, 0.18);
}

.face.bottom.two-point-bottom {
  fill: rgba(44, 52, 69, 0.28);
}

.face.bottom.three-point-bottom {
  fill: rgba(44, 52, 69, 0.28);
}

.box-a-guide {
  opacity: 0.3;
}

.box-b-guide {
  opacity: 0.24;
}

.box-label {
  fill: var(--edge);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.face.side {
  fill: rgba(34, 39, 56, 0.09);
}

.light-floor-guide {
  opacity: 0.16;
}

.figure-ground {
  fill: none;
  stroke: none;
  stroke-width: 1;
}

.figure-ground-line {
  fill: none;
  stroke: rgba(34, 39, 56, 0.2);
  stroke-width: 0.9;
}

.figure-grid {
  fill: none;
  stroke: rgba(34, 39, 56, 0.2);
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.42;
}

.figure-grid.is-faint {
  opacity: 0.14;
}

.figure-depth-guide,
.figure-height-guide,
.figure-axis {
  fill: none;
  stroke: rgba(34, 39, 56, 0.34);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}

.figure-height-guide {
  stroke: var(--accent);
  stroke-dasharray: 5 5;
  opacity: 0.3;
}

.figure-axis {
  stroke-dasharray: 3 5;
}

.figures-3d-guide {
  stroke: rgba(38, 152, 242, 0.46);
  stroke-width: 1.35;
  opacity: 0.72;
}

.figure-edge-connector {
  stroke: rgba(34, 39, 56, 0.38);
  stroke-width: 1.2;
  opacity: 0.66;
}

.figures-3d-axis {
  stroke: rgba(23, 23, 23, 0.34);
  stroke-width: 1;
  opacity: 0.48;
}

.figure-ratio-line {
  fill: none;
  stroke: #a67b4b;
  stroke-width: 1.05;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  opacity: 0.45;
}

.figure-person {
  cursor: pointer;
}

.figure-image {
  pointer-events: none;
}

.figure-silhouette {
  fill: #222738;
  stroke: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.figure-silhouette.is-selected {
  fill: #1d2630;
  stroke: none;
}

.figure-hit-area {
  fill: rgba(0, 0, 0, 0);
  stroke: none;
  pointer-events: all;
}

.figure-limb {
  fill: none;
  stroke: #222738;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.figure-selection-ring {
  fill: rgba(166, 123, 75, 0.08);
  stroke: #a67b4b;
  stroke-width: 1.45;
  opacity: 0.9;
}

.figure-horizon-cross {
  fill: #a67b4b;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
}

.range-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  color: #474747;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
}

.range-control input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--accent);
}

.figure-light-range,
.figure-pose-height,
.light-axis-range {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.figure-light-range input,
.figure-pose-height input,
.light-axis-range input {
  grid-column: 1;
  grid-row: 1;
}

.figure-light-range .range-value,
.figure-pose-height .range-value,
.light-axis-range .range-value {
  grid-column: 2;
  grid-row: 1;
  min-width: 42px;
}

.figure-light-range input,
.light-axis-range input {
  accent-color: #f2c84b;
}

.figure-control-heading {
  margin: 2px 0 -2px;
  color: #474747;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.figure-pose-select {
  min-width: 58px;
  height: 28px;
  border: 1px solid rgba(95, 83, 70, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #222738;
  font-family: var(--plain);
  font-size: 12px;
  text-align: center;
}

.figure-pose-actions .segment-button {
  cursor: pointer;
  transition: font-weight 120ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.figure-pose-actions .segment-button:hover,
.figure-pose-actions .segment-button:focus-visible {
  font-weight: 700;
}

.figure-pose-actions .segment-button:active {
  border-color: rgba(34, 39, 56, 0.9);
  background: #222738;
  color: #fff;
}

.figure-pose-actions .segment-button.is-feedback {
  transform: translateY(-1px);
}

.figure-pose-actions .segment-button.is-feedback-ok {
  border-color: rgba(34, 39, 56, 0.8);
  background: #222738;
  color: #fff;
}

.figure-pose-actions .segment-button.is-feedback-error {
  border-color: rgba(150, 54, 46, 0.5);
  background: #8f332d;
  color: #fff;
}

.figure-pose-gallery-backdrop {
  position: absolute;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(247, 244, 238, 0.32);
  backdrop-filter: blur(6px);
}

.figure-pose-gallery-backdrop[hidden] {
  display: none;
}

.figure-pose-gallery {
  position: relative;
  width: min(760px, calc(100vw - 56px));
  max-height: min(74vh, 720px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid rgba(95, 83, 70, 0.18);
  border-radius: 18px;
  background: #fbfaf7;
  box-shadow: 0 18px 42px rgba(48, 40, 32, 0.16);
  color: #222738;
  font-family: var(--plain);
}

.figure-pose-gallery-title {
  margin: 0 42px 18px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.figure-pose-gallery-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222738;
  font-family: var(--plain);
  font-size: 0;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.figure-pose-gallery-close::before,
.figure-pose-gallery-close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: #222738;
}

.figure-pose-gallery-close::before {
  transform: rotate(45deg);
}

.figure-pose-gallery-close::after {
  transform: rotate(-45deg);
}

.figure-pose-gallery-close:hover,
.figure-pose-gallery-close:focus-visible {
  background: #222738;
}

.figure-pose-gallery-close:hover::before,
.figure-pose-gallery-close:hover::after,
.figure-pose-gallery-close:focus-visible::before,
.figure-pose-gallery-close:focus-visible::after {
  background: #fff;
}

.figure-pose-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 108px);
  justify-content: start;
  gap: 12px;
}

.figure-pose-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: 108px;
  min-height: 148px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(247, 244, 238, 0.74);
  color: #222738;
  font-family: var(--plain);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.figure-pose-card-load {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.figure-pose-card:hover,
.figure-pose-card:has(.figure-pose-card-load:focus-visible),
.figure-pose-card.is-selected {
  border-color: rgba(34, 39, 56, 0.62);
  background: #fff;
  transform: translateY(-1px);
}

.figure-pose-card.is-dragging {
  opacity: 0.48;
}

.figure-pose-card.is-drop-target {
  border-color: rgba(34, 39, 56, 0.5);
  background: rgba(255, 255, 255, 0.86);
}

.figure-pose-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 115px;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.figure-pose-card.has-pose:not(.is-selected):not(:hover):not(:has(.figure-pose-card-load:focus-visible)) .figure-pose-card-preview {
  background: transparent;
}

.figure-pose-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.figure-pose-card.has-pose:not(.is-selected):not(:hover):not(:has(.figure-pose-card-load:focus-visible)) .figure-pose-card-preview img {
  mix-blend-mode: multiply;
}

.figure-pose-card-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 39, 56, 0.88);
  color: #fff;
  font: 700 13px/1 var(--plain);
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, background-color 140ms ease;
}

.figure-pose-card:hover .figure-pose-card-delete,
.figure-pose-card:has(.figure-pose-card-delete:focus-visible) .figure-pose-card-delete {
  opacity: 1;
}

.figure-pose-card-delete:hover,
.figure-pose-card-delete:focus-visible {
  background: #000;
}

.figure-pose-card-empty {
  display: none;
}

.figure-pose-card-label {
  color: rgba(34, 39, 56, 0.48);
  text-align: center;
  font-weight: 400;
}

.figure-pose-card.is-empty .figure-pose-card-preview {
  display: none;
}

.figure-pose-card.is-empty {
  min-height: 88px;
}

.figure-pose-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  transform: translateX(-50%);
}

.figure-body-selector {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 24;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.figure-body-selector[hidden] {
  display: none;
}

.figure-body-button {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #222738;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  -webkit-text-stroke: 0.7px currentColor;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.figure-body-button.is-active {
  background: #fff;
  box-shadow: 0 4px 11px rgba(34, 39, 56, 0.13);
}

.figure-body-button:hover,
.figure-body-button:focus-visible {
  outline: none;
  background: #fff;
  box-shadow: 0 4px 11px rgba(34, 39, 56, 0.18);
}

@media (max-width: 599px) {
  .figure-body-selector {
    top: 8px;
    gap: 8px;
  }

  .figure-body-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    font-size: 13px;
  }
}

.figure-pose-dots[hidden] {
  display: none;
}

.figure-pose-dot,
.figure-work-version-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(34, 39, 56, 0.21);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 140ms ease, background-color 140ms ease;
}

.figure-pose-dot:hover,
.figure-pose-dot:focus-visible,
.figure-work-version-dot:hover,
.figure-work-version-dot:focus-visible {
  outline: none;
  background: #53b7f9;
  transform: scale(1.2);
}

.figure-pose-dot.is-active,
.figure-work-version-dot.is-active {
  background: #222738;
}

.figure-pose-dot.is-active:hover,
.figure-pose-dot.is-active:focus-visible,
.figure-work-version-dot.is-active:hover,
.figure-work-version-dot.is-active:focus-visible {
  background: #53b7f9;
}

.figure-pose-dot {
  width: 15px;
  height: 15px;
}

.figure-work-version-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  transform: translateX(-50%);
}

@media (min-width: 600px) and (max-width: 1180px) {
  .geometric-figure-canvas {
    height: calc(100dvh - 86px);
    min-height: calc(100dvh - 86px);
  }

  .geometric-figure-canvas .three-canvas-layer,
  .geometric-figure-canvas .lesson-svg {
    height: calc(100dvh - 86px);
  }

  .sketch-light-workspace .light-settings-panel.figure-settings-panel {
    width: min(340px, calc(100% - 40px));
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .figure-version-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
  }

  .figure-version-control .segment-button {
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .figure-pose-dots,
  .figure-work-version-dots {
    gap: 15px;
  }

  .figure-pose-dot,
  .figure-work-version-dot {
    width: 15px;
    height: 15px;
    border-width: 1.5px;
  }

  .geometric-figure-pose-reset {
    bottom: calc(68px + env(safe-area-inset-bottom));
  }

}

@media (min-width: 600px) and (max-width: 760px) {
  .figure-pose-dots,
  .figure-work-version-dots {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .geometric-figure-pose-reset {
    bottom: calc(122px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .figure-pose-gallery {
    padding: 20px;
  }

  .figure-pose-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.range-value {
  color: #777;
  text-align: right;
  white-space: nowrap;
}

.light-axis-controls {
  display: grid;
  gap: 8px;
}

.light-settings-button {
  position: absolute;
  top: calc(clamp(54px, 8vh, 92px) - 16px);
  right: 32px;
  z-index: 32;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  color: #222738;
  box-shadow: var(--round-control-shadow);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.light-settings-button:hover,
.light-settings-button.is-active {
  border-color: transparent;
  background: #222738;
  color: #fff;
  transform: scale(1.06);
}

.figure-voice-button {
  position: absolute;
  top: 31px;
  right: 84px;
  z-index: 32;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  color: #222738;
  box-shadow: var(--round-control-shadow);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.figure-voice-button .sound-wave,
.figure-voice-button .sound-muted-x {
  transition: opacity 150ms ease;
}

.figure-voice-button .sound-muted-x,
.figure-voice-button.is-muted .sound-wave {
  opacity: 0;
}

.figure-voice-button.is-muted .sound-muted-x {
  opacity: 1;
}

.header-voice-button.figure-voice-button {
  position: static;
  inset: auto;
  z-index: auto;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #53b7f9;
  box-shadow: none;
  transform: none;
}

.header-voice-button.figure-voice-button.is-muted {
  color: #d85b57;
}

.header-voice-button.figure-voice-button.is-playing {
  border: 0;
  background: transparent;
  color: #c0ff00;
  box-shadow: none;
  transform: none;
}

.header-voice-button.figure-voice-button .dock-icon,
.header-voice-button.figure-voice-button .dock-icon * {
  color: currentColor;
  stroke: currentColor;
}

.header-voice-button.figure-voice-button .dock-icon {
  width: 21px;
  height: 21px;
}

.header-voice-button.figure-voice-button:hover,
.header-voice-button.figure-voice-button.is-playing:hover {
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  transform: none;
}

.figure-voice-button .dock-icon {
  width: 19px;
  height: 19px;
}

.figure-voice-button:hover {
  border-color: transparent;
  background: #222738;
  color: #fff;
  transform: scale(1.06);
}

.figure-voice-button.is-playing {
  border-color: transparent;
  background: #111;
  color: #fff;
  transform: scale(1.06);
}

.figure-voice-button.is-playing .dock-icon,
.figure-voice-button.is-playing .dock-icon * {
  color: #fff;
  stroke: #fff;
}

.perspective-voice-button {
  right: 32px;
}

.sketch-light-workspace .light-settings-panel,
.toggle-settings-workspace .light-settings-panel {
  position: absolute;
  top: 82px;
  right: 28px;
  z-index: 31;
  width: min(270px, calc(100% - 56px));
  max-height: calc(100% - 116px);
  padding: 20px 22px;
  overflow: auto;
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.sketch-light-workspace .light-settings-panel.is-open,
.toggle-settings-workspace .light-settings-panel.is-open {
  display: flex;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.light-lesson-copy[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .basics-vanishing-copy.light-lesson-copy {
    right: 72px;
    top: 24px;
    width: min(320px, calc(100% - 108px));
  }

  .light-settings-button {
    top: 18px;
    right: 16px;
  }

  .sketch-light-workspace .light-settings-panel.is-open,
  .toggle-settings-workspace .light-settings-panel.is-open {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 14px;
    top: auto;
    width: auto;
    max-height: 58%;
  }
}

.compact-range {
  gap: 3px 7px;
}

.head-range-control {
  gap: 7px;
}

.head-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.head-preset-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(32, 39, 52, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #30343b;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
}

.head-preset-button:hover,
.head-preset-button:focus-visible {
  background: #fff;
  border-color: rgba(32, 39, 52, 0.24);
}

.head-control-group,
.head-segment-control {
  display: grid;
  gap: 6px;
}

.head-control-title {
  color: #4b515b;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.head-segment-buttons {
  border-radius: 10px;
}

.head-segment-buttons .segment-button {
  border-radius: 8px;
}

.head-view-switch {
  min-height: 24px;
}

.head-model-hint {
  margin-top: -2px;
}

.flyout-segments {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
}

.flyout-segment {
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #414246;
  cursor: pointer;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
}

.flyout-segment:hover,
.flyout-segment.is-active {
  background: rgba(34, 39, 56, 0.09);
}

.sphere-ground-grid {
  fill: none;
  stroke: rgba(34, 39, 56, 0.14);
  stroke-width: 0.95;
  opacity: 0.38;
}

.sphere-shadow-outline {
  fill: none;
  stroke: rgba(44, 52, 69, 0.72);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  opacity: 0.62;
}

.sphere-terminator {
  fill: none;
  stroke: #b28a5e;
  stroke-width: 0.9;
  stroke-dasharray: 1 8;
  stroke-linecap: round;
  opacity: 0.2;
}

.sphere-brightest-point {
  fill: #f0af00;
  stroke: #222738;
  stroke-width: 2;
}

.sphere-normal {
  fill: none;
  stroke: rgba(34, 39, 56, 0.32);
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.68;
}

.sphere-normal.is-lit {
  stroke: rgba(166, 123, 75, 0.68);
}

.sphere-ray {
  fill: none;
  stroke: #f0af00;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.42;
}

.sphere-tangent-point {
  fill: #f0af00;
  stroke: #222738;
  stroke-width: 1.4;
  opacity: 0.9;
}

.sphere-light-arrow {
  fill: none;
  stroke: #f0af00;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.72;
}

.sphere-light-head {
  fill: #f0af00;
  stroke: none;
  opacity: 0.9;
}

.sphere-light-source {
  fill: rgba(240, 175, 0, 0.12);
  stroke: #f0af00;
  stroke-width: 1.8;
  opacity: 0.9;
}

.sphere-light-label {
  fill: #6a6258;
}

.sphere-object-label,
.sphere-shadow-label,
.sphere-ground-label {
  fill: #5f6973;
}

.cylinder-three-circle {
  fill: none;
  stroke: rgba(34, 39, 56, 0.52);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}

.cylinder-three-circle.top {
  stroke: rgba(166, 123, 75, 0.72);
}

.cylinder-three-circle.bottom {
  stroke-dasharray: 2.5 3.5;
}

.cylinder-three-axis {
  fill: none;
  stroke: rgba(34, 39, 56, 0.48);
  stroke-width: 1.35;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

.cylinder-normal {
  fill: none;
  stroke: rgba(34, 39, 56, 0.32);
  stroke-width: 1.05;
  stroke-linecap: round;
  opacity: 0.66;
}

.cylinder-normal.is-lit {
  stroke: rgba(166, 123, 75, 0.68);
}

.cylinder-terminator {
  fill: none;
  stroke: rgba(178, 138, 94, 0.58);
  stroke-width: 2.2;
  stroke-dasharray: 2.5 3.5;
  stroke-linecap: round;
  opacity: 0.34;
  filter: blur(0.7px);
}

.cylinder-shadow-outline {
  stroke-width: 1.35;
  stroke-dasharray: 2.5 3.5;
  opacity: 0.62;
}

.cylinder-light-arrow,
.cylinder-ray {
  opacity: 0.72;
}

.cylinder-label {
  fill: #626262;
}

.figure-measure {
  padding: 8px 10px;
  border: 1px solid rgba(224, 224, 222, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
  color: #5f5a53;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.figure-measure[hidden] {
  display: none;
}

.small-action-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
  line-height: 0.75;
}

.small-action-button.is-muted {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
}

.small-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.figure-scene-panel {
  position: fixed;
  left: auto;
  right: 18px;
  top: 346px;
  z-index: 65;
  width: 284px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(224, 224, 222, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.svg-tooltip {
  position: absolute;
  z-index: 90;
  max-width: 180px;
  padding: 7px 14px;
  border: 1px solid rgba(224, 224, 222, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.09);
  backdrop-filter: blur(12px);
  color: #555;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.svg-tooltip[hidden] {
  display: none;
}

.horizon-popup {
  position: absolute;
  z-index: 95;
  display: block;
  width: 430px;
  max-width: min(430px, calc(100vw - 188px));
  padding: 30px 36px;
  border: 1px solid rgba(224, 224, 222, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px);
  color: #555;
  white-space: normal;
  overflow-wrap: normal;
  font-family: var(--plain);
  font-size: 14px;
  line-height: 1.48;
  font-weight: 500;
  pointer-events: auto;
  animation: horizon-popup-in 180ms ease-out both;
}

.horizon-popup[hidden] {
  display: none;
}

.horizon-popup-header {
  margin: 0 34px 10px 0;
  color: var(--edge);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.horizon-popup-body {
  white-space: pre-line;
}

.horizon-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(34, 39, 56, 0.12);
  color: var(--edge);
  cursor: pointer;
  font-family: var(--plain);
  font-size: 23px;
  line-height: 1;
}

.horizon-popup-close:hover,
.horizon-popup-close:focus-visible {
  background: var(--edge);
  color: #fff;
}

.basics-lesson-workspace .canvas-scroll,
.basics-lesson-workspace .lesson-svg {
  position: relative;
  z-index: 1;
}

.basics-sketch-stage {
  background: transparent;
}

.lesson-mode .workspace.basics-vanishing-workspace,
.lesson-mode .workspace.figures-space-workspace {
  background: #ede9e4;
}

.lesson-mode .workspace.basics-vanishing-workspace::after,
.lesson-mode .workspace.figures-space-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--workspace-sky-gradient);
  opacity: var(--basics-gradient-opacity, 1);
  clip-path: inset(0 0 calc(100% - var(--basics-horizon-position, 0%)) 0);
  will-change: clip-path, opacity;
}

/* Start the space gradient fade only after its horizon has been positioned. */
.lesson-mode .workspace.figures-space-workspace::after {
  opacity: 0;
}

.lesson-mode .workspace.figures-space-workspace.has-horizon-gradient::after {
  animation: horizon-gradient-reveal 1200ms ease-in-out both;
}

@keyframes horizon-gradient-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-mode .workspace.figures-space-workspace.has-horizon-gradient::after {
    animation-duration: 1ms;
  }
}

.basics-lesson-workspace .lesson-svg {
  filter: saturate(0.78) contrast(0.98);
}

.basics-lesson-workspace .edge {
  stroke: #252525;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.basics-lesson-workspace .edge.secondary,
.basics-lesson-workspace .edge.left-highlight,
.basics-lesson-workspace .edge.right-highlight,
.basics-lesson-workspace .edge.vertical-highlight {
  stroke: #3e3d3a;
  stroke-width: 1.45;
  opacity: 0.82;
}

.basics-lesson-workspace .hidden-edge {
  stroke: rgba(62, 61, 58, 0.34);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
}

.basics-lesson-workspace .guide {
  stroke: rgba(82, 113, 130, 0.35);
  stroke-width: 0.9;
  stroke-dasharray: none;
}

.basics-lesson-workspace .horizon.basics-horizon {
  stroke: #53b7f9;
  stroke-width: 2.6;
  opacity: 1;
}

.basics-lesson-workspace .hand-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.basics-lesson-workspace .hand-main.hand-primary {
  stroke: rgba(28, 27, 24, 0.94);
  stroke-width: 3.05;
}

.basics-lesson-workspace .hand-side.hand-primary {
  stroke: rgba(35, 34, 31, 0.38);
  stroke-width: 1.42;
}

.basics-lesson-workspace .hand-accent.hand-primary {
  stroke: rgba(22, 21, 19, 0.44);
  stroke-width: 1.68;
}

.basics-lesson-workspace .hand-main.hand-secondary {
  stroke: rgba(42, 41, 37, 0.86);
  stroke-width: 2.42;
}

.basics-lesson-workspace .hand-side.hand-secondary {
  stroke: rgba(56, 55, 51, 0.3);
  stroke-width: 1.22;
}

.basics-lesson-workspace .hand-accent.hand-secondary {
  stroke: rgba(36, 35, 32, 0.3);
  stroke-width: 1.38;
}

.basics-lesson-workspace .hand-main.hand-guide,
.basics-lesson-workspace .hand-side.hand-guide {
  stroke: rgba(80, 108, 124, 0.2);
  stroke-width: 0.72;
}

.basics-lesson-workspace .hand-side.hand-guide {
  opacity: 0.5;
}

.basics-lesson-workspace .hand-main.hand-hidden,
.basics-lesson-workspace .hand-side.hand-hidden {
  stroke: rgba(60, 59, 55, 0.26);
  stroke-width: 0.72;
}

.basics-lesson-workspace .hand-main.hand-horizon {
  stroke: #53b7f9;
  stroke-width: 1.78;
  opacity: 0.88;
}

.basics-lesson-workspace .hand-side.hand-horizon {
  stroke: rgba(0, 186, 255, 0.3);
  stroke-width: 0.82;
}

.basics-lesson-workspace .hand-main.hand-figure {
  stroke: rgba(48, 47, 43, 0.72);
  stroke-width: 1.24;
}

.basics-lesson-workspace .hand-side.hand-figure {
  stroke: rgba(48, 47, 43, 0.26);
  stroke-width: 0.72;
}

.basics-lesson-workspace .hand-accent.hand-figure {
  stroke: rgba(38, 37, 34, 0.26);
  stroke-width: 0.78;
}

.basics-lesson-workspace .hand-main.hand-hatch,
.basics-lesson-workspace .hand-side.hand-hatch {
  stroke: rgba(72, 67, 58, 0.12);
  stroke-width: 0.55;
}

.basics-lesson-workspace.guides-hidden .hand-guide,
.basics-lesson-workspace .guides-hidden .hand-guide,
.basics-lesson-workspace .lesson-svg.guides-hidden .hand-guide {
  display: none;
}

.basics-lesson-workspace.hidden-off .hand-hidden,
.basics-lesson-workspace .hidden-off .hand-hidden,
.basics-lesson-workspace .lesson-svg.hidden-off .hand-hidden {
  display: none;
}

.basics-lesson-workspace .lesson-svg.horizon-hidden .hand-horizon {
  display: none;
}

.perspective3d-workspace .p3d-face {
  stroke: none;
}

.perspective3d-workspace .p3d-face-top {
  fill: rgba(255, 254, 250, 0.97);
}

.perspective3d-workspace .p3d-face-left {
  fill: rgba(244, 241, 235, 0.96);
}

.perspective3d-workspace .p3d-face-right {
  fill: rgba(219, 215, 207, 0.96);
}

.perspective3d-workspace .p3d-face-bottom {
  fill: rgba(207, 202, 193, 0.97);
}

.perspective3d-workspace .p3d-edge {
  fill: none;
  stroke: rgba(42, 41, 38, 0.92);
  stroke-width: 2.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.perspective3d-workspace .p3d-guide {
  fill: none;
  stroke: rgba(80, 108, 124, 0.2);
  stroke-width: 0.72;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.perspective3d-workspace .p3d-horizon {
  fill: none;
  stroke: #53b7f9;
  stroke-width: 2.35;
  stroke-linecap: round;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}

.perspective3d-workspace .p3d-horizon-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 28;
  pointer-events: stroke;
  cursor: ns-resize;
}

.perspective3d-workspace .p3d-move-control,
.perspective3d-workspace .p3d-move-control * {
  cursor: ns-resize !important;
}

.perspective3d-workspace .p3d-move-control-plane,
.perspective3d-workspace .p3d-move-control-plane * {
  cursor: move !important;
}

.perspective3d-workspace .p3d-move-control-spatial,
.perspective3d-workspace .p3d-move-control-spatial * {
  cursor: move !important;
}

.perspective3d-workspace .p3d-lift-shadow {
  fill: rgba(73, 69, 62, 0.46);
  stroke: none;
  pointer-events: none;
}

.perspective3d-workspace .p3d-marker-secondary .basics-vp-marker {
  fill: #53b7f9;
}

.perspective3d-workspace .perspective3d-rotation-control {
  display: block;
  width: 184px;
  margin-top: 14px;
}

.perspective3d-workspace .perspective3d-rotation-control > span {
  display: block;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  color: #8a8d94;
}

.perspective3d-workspace .perspective3d-rotation-control input {
  height: 8px;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background: linear-gradient(
    to right,
    #343945 0 var(--slider-progress),
    #d8d3ca var(--slider-progress) 100%
  );
  box-shadow: none;
}

.perspective3d-workspace .perspective3d-rotation-control input::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

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

.perspective3d-workspace .perspective3d-rotation-control input::-moz-range-track,
.perspective3d-workspace .perspective3d-rotation-control input::-moz-range-progress {
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.perspective3d-workspace .perspective3d-rotation-control input::-moz-range-thumb {
  width: 38px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background-color: #fff;
  background-image: none;
  box-shadow: 0 1px 4px rgba(52, 57, 69, 0.2);
  transition: background-color 150ms ease;
}

.perspective3d-workspace .perspective3d-rotation-control input:is(:hover, :focus-visible)::-webkit-slider-thumb {
  background-color: #53b7f9;
}

.perspective3d-workspace .perspective3d-rotation-control input:is(:hover, :focus-visible)::-moz-range-thumb {
  background-color: #53b7f9;
}

.perspective3d-workspace .perspective3d-inline-controls {
  position: static;
  width: max-content;
  max-width: 100%;
  margin-top: 24px;
  padding: 0;
  justify-content: flex-start;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
}

.perspective3d-workspace .perspective3d-copy {
  z-index: 35;
}

.basics-lesson-workspace .basics-vp-marker-group {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.basics-lesson-workspace .basics-vp-marker-group.is-draggable {
  cursor: grab;
}

.basics-lesson-workspace .basics-vp-marker-group.is-draggable:active {
  cursor: grabbing;
}

.basics-lesson-workspace .basics-vp-drag-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.basics-lesson-workspace .basics-vp-marker {
  fill: #53b7f9;
  stroke: none;
  filter: url(#handleShadow);
  vector-effect: non-scaling-stroke;
}

.basics-lesson-workspace .basics-vp-marker-text {
  fill: #fff;
  font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.basics-lesson-workspace .basics-vp-marker-group.is-pop {
  opacity: 0;
  animation: basics-vp-pop 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.basics-lesson-workspace .basics-vp-marker-group.is-secondary {
  animation-delay: 240ms;
}

.basics-lesson-workspace .basics-vp-marker-group.is-tertiary {
  animation-delay: 480ms;
}

@keyframes basics-vp-pop {
  0% {
    opacity: 0;
    transform: scale(0.52);
  }
  1% {
    opacity: 1;
    transform: scale(0.52);
  }
  36% {
    opacity: 1;
    transform: scale(1.2);
  }
  54% {
    opacity: 1;
    transform: scale(0.9);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  84% {
    opacity: 1;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.basics-lesson-workspace .face.top.horizon-box-top {
  fill: rgba(255, 255, 255, 0.78);
  stroke: none;
}

.basics-lesson-workspace .face.left.horizon-box-left {
  fill: rgba(255, 255, 255, 0.14);
  stroke: none;
}

.basics-lesson-workspace .face.right.horizon-box-right {
  fill: rgba(38, 42, 48, 0.05);
  stroke: none;
}

.basics-lesson-workspace .face.bottom.horizon-box-bottom {
  fill: rgba(35, 40, 48, 0.13);
  stroke: none;
}

.basics-lesson-workspace .basics-lift-shadow {
  fill: rgba(32, 38, 45, 0.82);
  stroke: none;
  filter: blur(0.4px);
}

.basics-paper-landscape {
  fill: none;
  stroke: rgba(92, 86, 76, 0.22);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.basics-figure-line,
.basics-eye-mark {
  fill: none;
  stroke: rgba(40, 40, 38, 0.72);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.basics-eye-mark {
  stroke: rgba(0, 186, 255, 0.86);
  stroke-dasharray: 4 4;
}

.basics-lesson-header {
  position: absolute;
  left: clamp(72px, 13vw, 170px);
  top: clamp(34px, 7vh, 78px);
  z-index: 22;
  max-width: 390px;
  pointer-events: none;
  color: #000;
}

.basics-lesson-kicker {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
}

.basics-lesson-kicker::after {
  content: none;
}

.basics-lesson-subtitle {
  margin: 0 0 0 calc(1.05em + 16px);
  font-family: "MuseoSansRounded", var(--plain);
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
  color: rgba(24, 24, 24, 0.82);
}

.basics-vanishing-copy {
  position: absolute;
  right: clamp(76px, 8vw, 136px);
  top: calc(clamp(54px, 8vh, 92px) - 10px);
  width: min(395px, 28vw);
  margin: 0;
  font-family: var(--plain);
  color: rgba(24, 24, 24, 0.82);
  pointer-events: none;
  z-index: 23;
}

.basics-vanishing-copy h2 {
  margin: 0 0 8px;
  transform: translateY(0);
}

.basics-vanishing-copy p {
  margin: 10px 0 0;
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
}

.figure-optics-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;
}

.figure-optics-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

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

.figure-optics-labels > :last-child {
  transform: translateX(-5px);
}

.figure-optics-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(--figure-optics-progress, 0%),
    #d8d3ca var(--figure-optics-progress, 0%) 100%
  );
  box-shadow: none;
  cursor: pointer;
}

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

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

.figure-optics-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;
}

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

.figure-optics-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;
}

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

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

.basics-parallel-rotation-control {
  position: relative;
  width: 184px;
  margin-top: 20px;
  pointer-events: auto;
  color: rgba(24, 24, 24, 0.82);
  cursor: ew-resize;
}

.basics-parallel-rotation-control[hidden] {
  display: none;
}

.basics-parallel-rotation-control input {
  width: 100%;
  height: 4px;
  margin: 4px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 2px;
  outline: none;
  background: #d8d3ca;
  box-shadow: none;
  cursor: ew-resize;
}

.basics-parallel-rotation-control input:focus,
.basics-parallel-rotation-control input:focus-visible {
  outline: none;
  box-shadow: none;
}

.basics-parallel-rotation-control input::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: #d8d3ca;
}

.basics-parallel-rotation-control input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: #111;
  box-shadow: none;
}

.basics-parallel-rotation-control input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: #d8d3ca;
}

.basics-parallel-rotation-control input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: #111;
  box-shadow: none;
}

.basics-parallel-rotation-control .range-thumb-arrows {
  position: absolute;
  left: calc((100% - 18px) * var(--thumb-progress, 0.5));
  top: var(--thumb-top, 16px);
  z-index: 2;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.basics-parallel-rotation-control .range-thumb-arrows::before,
.basics-parallel-rotation-control .range-thumb-arrows::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}

.basics-parallel-rotation-control .range-thumb-arrows::before {
  left: 4px;
  border-right: 5px solid #fff;
}

.basics-parallel-rotation-control .range-thumb-arrows::after {
  right: 4px;
  border-left: 5px solid #fff;
}

.perspective3d-workspace .perspective3d-rotation-control .range-thumb-arrows {
  display: none;
}

.basics-settings-button {
  position: absolute;
  top: calc(clamp(54px, 8vh, 92px) - 16px);
  right: 32px;
  z-index: 25;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 83, 70, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: #222738;
  box-shadow: 0 8px 20px rgba(50, 42, 34, 0.08);
  cursor: pointer;
}

.basics-settings-button:hover,
.basics-settings-button.is-active {
  background: #222738;
  color: #fff;
}

.basics-lesson-workspace .basics-settings-panel {
  position: absolute;
  top: 86px;
  right: 28px;
  z-index: 30;
  width: min(270px, calc(100% - 56px));
  max-height: calc(100% - 132px);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  border-color: rgba(203, 190, 172, 0.82);
  background: rgba(255, 252, 246, 0.92);
  padding: 20px 22px;
}

.basics-lesson-workspace .basics-settings-panel.controls {
  display: flex;
}

.basics-lesson-workspace .basics-settings-panel.controls:not(.is-open) {
  display: none;
}

.basics-lesson-workspace > .controls,
.basics-lesson-workspace .basics-settings-panel.controls {
  display: none !important;
}

.basics-lesson-workspace .basics-settings-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1051px) {
  .sketch-light-workspace .light-settings-panel,
  .toggle-settings-workspace .light-settings-panel,
  .basics-lesson-workspace .basics-settings-panel {
    top: calc(clamp(54px, 8vh, 92px) - 16px);
  }
}

.basics-lesson-workspace .panel-scene-title {
  display: none;
}

.basics-bottom-controls {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(25, 28, 38, 0.12);
  transform: translateX(-50%);
}

.basics-step-strip {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 23;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.basics-step-card {
  width: 112px;
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(185, 174, 158, 0.72);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.76);
  color: #242424;
  text-align: left;
  box-shadow: 0 8px 18px rgba(42, 36, 30, 0.05);
  cursor: pointer;
}

.basics-step-card.is-active {
  border-color: rgba(0, 186, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(0, 186, 255, 0.12);
}

.basics-step-card strong {
  font-size: 12px;
  line-height: 1.15;
}

.basics-step-card span {
  font-family: "MuseoSansRounded", var(--plain);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 300;
}

.basics-bottom-controls .basics-step-strip {
  position: static;
  transform: none;
}

.basics-bottom-controls .basics-step-card {
  position: relative;
  width: 38px;
  min-height: 38px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border-radius: 12px;
  background: #efeae1;
  text-align: center;
  font-family: var(--plain);
  box-shadow: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.basics-step-tooltip {
  position: absolute;
  z-index: 60;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-family: var(--plain);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-transform: lowercase;
  box-shadow: 0 7px 18px rgba(20, 18, 15, 0.22);
}

.basics-step-tooltip[hidden] {
  display: none;
}

.basics-bottom-controls .basics-step-card:hover {
  border-color: #53b7f9;
  background: #53b7f9;
  color: #fff;
  transform: translateY(-1px);
}

.basics-bottom-controls .basics-step-card.is-active {
  border-color: #53b7f9;
  background: #efeae1;
  color: #222738;
  box-shadow: none;
  transform: none;
}

.basics-bottom-controls .basics-step-card.is-complete:not(.is-active) {
  border-color: #222738;
  background: #222738;
  color: #fff;
}

.basics-bottom-controls .basics-step-card .basics-step-progress {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: #53b7f9;
  pointer-events: none;
  transform: scaleX(var(--step-progress, 0));
  transform-origin: left center;
}

.basics-bottom-controls .basics-step-card strong {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.basics-bottom-controls .basics-step-card::after {
  content: attr(data-step-number);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  clip-path: inset(0 calc(100% - var(--step-progress-percent, 0%)) 0 0);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.basics-play-button {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 24;
  min-width: 164px;
  height: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #222738;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 14px 24px rgba(25, 28, 38, 0.18);
  cursor: pointer;
  transform: translateX(-50%);
}

.basics-bottom-controls .basics-play-button {
  position: static;
  transform: none;
  box-shadow: none;
}

.basics-vanishing-workspace .basics-bottom-controls {
  bottom: 34px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.perspective3d-workspace .p3d-move-control.is-intro-scene-control-revealing {
  animation: p3d-intro-scene-control-rubber-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--p3d-intro-control-delay, 0ms);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes p3d-intro-scene-control-rubber-in {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }

  72% {
    transform: scale(0.9);
  }

  88% {
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.basics-vanishing-workspace .basics-bottom-controls .basics-next-icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.basics-vanishing-workspace .basics-bottom-controls .basics-sequence-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.basics-sequence-button svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.basics-sequence-button svg:first-child {
  fill: currentColor;
  stroke: none;
}

.basics-sequence-button svg[hidden] {
  display: none;
}

.basics-next-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.basics-play-button:not(:disabled):hover {
  background: #53b7f9;
}

.basics-vanishing-workspace .basics-bottom-controls .basics-next-icon-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.basics-play-button:disabled {
  opacity: 0.62;
  cursor: wait;
}

.basics-next-icon-button.is-final-disabled:disabled {
  cursor: default;
}

.basics-animation-note {
  position: absolute;
  left: 50%;
  bottom: 142px;
  z-index: 24;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.9);
  color: #242424;
  font-family: "MuseoSansRounded", var(--plain);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.28;
  box-shadow: 0 10px 24px rgba(42, 36, 30, 0.1);
  transform: translateX(-50%);
}

.basics-animation-note[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .basics-lesson-header {
    left: 30px;
    top: 30px;
    max-width: calc(100% - 72px);
  }

  .basics-step-strip {
    bottom: 86px;
    width: calc(100% - 36px);
    overflow-x: auto;
    justify-content: flex-start;
  }

  .basics-step-card {
    min-width: 104px;
  }

.basics-lesson-workspace .basics-settings-panel {
    top: auto;
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    max-height: 58%;
    border-radius: 22px;
  }
}

.basics-lesson-workspace .basics-settings-panel:not(.is-open) {
  display: none;
}

.figure-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cast-shadow {
  fill: rgba(44, 52, 69, 0.42);
  stroke: rgba(44, 52, 69, 0.62);
  stroke-width: 1.6;
}

.cast-shadow-outline {
  fill: none;
  stroke: rgba(44, 52, 69, 0.7);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linejoin: round;
  opacity: 0.66;
}

.shadow-light-ray {
  fill: none;
  stroke: #f0af00;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.7;
}

.shadow-ground-line {
  fill: none;
  stroke: #00baff;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: 0.58;
}

.light-vertical {
  fill: none;
  stroke: rgba(34, 39, 56, 0.46);
  stroke-width: 1.25;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: 0.68;
}

.shadow-point {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.8;
  opacity: 0.86;
}

.shadow-ground-origin {
  fill: #00baff;
  stroke: #222738;
  stroke-width: 1.45;
  opacity: 0.92;
}

.light-ground-point {
  fill: #fff;
  stroke: #222738;
  stroke-width: 1.25;
  opacity: 1;
}

.light-ground-point-blue {
  fill: rgba(0, 186, 255, 0.16);
  stroke: #00baff;
  stroke-width: 1.15;
  opacity: 0.96;
}

.light-label {
  fill: var(--accent);
  font-weight: 400;
}

.warning-label {
  fill: #777;
}

.ellipse-plane {
  fill: rgba(34, 39, 56, 0.09);
}

.center-point,
.touch-point,
.auxiliary-point {
  pointer-events: none;
}

.center-point {
  fill: var(--accent);
}

.touch-point {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.8;
}

.auxiliary-point {
  fill: #00baff;
  stroke: #222738;
  stroke-width: 1.5;
  opacity: 0.85;
}

.label {
  fill: #5d5b58;
  font-family: var(--plain);
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
}

.label.small {
  font-size: 12px;
}

.handle {
  cursor: grab;
  fill: var(--round-control-bg);
  stroke: var(--round-control-border);
  stroke-width: 1.2;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill var(--round-control-motion),
    stroke var(--round-control-motion),
    filter var(--round-control-motion),
    transform var(--round-control-motion);
}

.handle-group {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--round-control-motion);
}

ellipse.handle {
  transform-box: fill-box;
  transform-origin: center;
}

.object-hit,
.object-hit-line {
  cursor: grab;
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  pointer-events: all;
}

.object-hit-line {
  fill: none;
  stroke-width: 44;
}

.handle.object-handle {
  opacity: 1;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.2;
}

.object-control:hover .object-handle,
.object-control:focus .object-handle,
.object-control:focus-visible .object-handle,
.object-control.is-hovered .object-handle,
.object-control.is-active .object-handle,
.object-control.is-related-active .object-handle,
.object-hit:hover + .object-handle,
.object-handle:hover,
.active-left .handle-left-depth .object-handle,
.active-right .handle-right-depth .object-handle {
  opacity: 1;
}

.object-control:focus,
.object-control:focus-visible {
  outline: none;
}

.handle-core {
  fill: var(--accent);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  transition: opacity 160ms ease;
}

.object-control:hover .handle-core,
.object-control:focus .handle-core,
.object-control:focus-visible .handle-core,
.object-control.is-hovered .handle-core,
.object-control.is-active .handle-core,
.object-control.is-related-active .handle-core,
.object-hit:hover ~ .handle-core,
.object-handle:hover + .handle-core,
.active-left .handle-left-depth .handle-core,
.active-right .handle-right-depth .handle-core {
  opacity: 1;
}

.horizon-hit,
.front-edge-hit {
  cursor: grab;
  stroke: transparent;
  stroke-width: 30;
}

.horizon-hit:active,
.front-edge-hit:active,
.object-hit-line:active,
.handle:active {
  cursor: grabbing;
}

.active-left .guide.left,
.active-right .guide.right {
  opacity: 0.54;
  stroke-width: 1.35;
}

.active-left .edge.left-highlight,
.active-right .edge.right-highlight {
  opacity: 0.7;
  stroke-width: 3.25;
}

.active-vertical .guide.vertical {
  opacity: 0.54;
  stroke-width: 1.35;
}

.active-vertical .edge.vertical-highlight {
  opacity: 0.7;
  stroke-width: 3.25;
}

.basics-vanishing-workspace .basics-lesson-kicker {
  display: none;
}

.basics-vanishing-workspace .basics-lesson-subtitle {
  margin-left: 0;
}

.basics-vanishing-copy .basics-side-intro {
  margin: 0 0 14px;
  font-family: "MuseoSansRounded", var(--plain);
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
  color: rgba(24, 24, 24, 0.82);
}

.basics-vanishing-copy .basics-side-intro[hidden] {
  display: none;
}

.basics-description-navigation {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.basics-description-navigation button {
  min-width: 88px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-family: var(--plain);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.basics-description-navigation button:not(:disabled):hover,
.basics-description-navigation button:not(:disabled):focus-visible {
  background: #53b7f9;
  transform: translateY(-1px);
}

.basics-description-navigation button:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
}

.basics-vanishing-workspace .basics-lesson-header,
.basics-horizon-workspace .basics-lesson-header {
  display: none;
}

.horizon-move-handle {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 1.45;
}

.box-lift-control .box-lift-handle {
  fill: rgba(255, 255, 255, 0.78);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.55;
}

.box-space-move-control .box-space-move-handle {
  fill: rgba(255, 255, 255, 0.78);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.55;
}

.construction-sketch-workspace .edge,
.construction-sketch-workspace .ellipse-outline,
.construction-sketch-workspace .cylinder-ellipse,
.construction-sketch-workspace .vase-profile-line {
  stroke: rgba(28, 27, 24, 0.94);
  stroke-width: 3.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.construction-sketch-workspace .edge.secondary,
.construction-sketch-workspace .cylinder-side {
  stroke: rgba(48, 47, 43, 0.74);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}

.construction-sketch-workspace .ellipse-square,
.construction-sketch-workspace .cylinder-square {
  stroke: rgba(82, 113, 130, 0.35);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.construction-sketch-workspace .construction-line,
.construction-sketch-workspace .construction-axis {
  stroke: rgba(82, 113, 130, 0.35);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.construction-sketch-workspace .hidden-edge,
.construction-sketch-workspace .cylinder-hidden {
  stroke: rgba(112, 126, 138, 0.34);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 6;
  opacity: 1;
}

.construction-sketch-workspace .hidden-edge.round-hidden-ellipse,
.construction-sketch-workspace .cylinder-hidden.round-hidden-ellipse {
  stroke: rgba(120, 137, 149, 0.55);
  stroke-width: 3;
  stroke-dasharray: 7 8;
  opacity: 1;
}


.construction-sketch-workspace .construction-hand-line .hand-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.construction-sketch-workspace .construction-hand-line .hand-main.hand-primary {
  stroke: rgba(28, 27, 24, 0.94);
  stroke-width: 2.85;
}

.construction-sketch-workspace .construction-hand-line .hand-side.hand-primary {
  stroke: rgba(35, 34, 31, 0.3);
  stroke-width: 1.1;
}

.construction-sketch-workspace .construction-hand-line .hand-accent.hand-primary {
  stroke: rgba(22, 21, 19, 0.36);
  stroke-width: 1.22;
}

.construction-sketch-workspace .construction-hand-line .hand-main.hand-secondary {
  stroke: rgba(42, 41, 37, 0.76);
  stroke-width: 2.15;
}

.construction-sketch-workspace .construction-hand-line .hand-side.hand-secondary {
  stroke: rgba(56, 55, 51, 0.24);
  stroke-width: 0.92;
}

.construction-sketch-workspace .construction-hand-line .hand-accent.hand-secondary {
  stroke: rgba(36, 35, 32, 0.24);
  stroke-width: 1.0;
}

.construction-sketch-workspace .construction-hand-line .hand-main.hand-guide,
.construction-sketch-workspace .construction-hand-line .hand-side.hand-guide {
  stroke: rgba(80, 108, 124, 0.22);
  stroke-width: 0.76;
}

.construction-sketch-workspace .construction-hand-line .hand-main.hand-hidden,
.construction-sketch-workspace .construction-hand-line .hand-side.hand-hidden {
  stroke: rgba(112, 126, 138, 0.3);
  stroke-width: 0.55;
}

.construction-sketch-workspace .construction-hand-line .hand-main.hand-hidden.round-hidden-ellipse {
  stroke: rgba(120, 137, 149, 0.55);
  stroke-width: 2.7;
  stroke-dasharray: 7 8;
}

.construction-sketch-workspace .construction-hand-line .hand-side.hand-hidden.round-hidden-ellipse {
  stroke: rgba(120, 137, 149, 0.32);
  stroke-width: 1.3;
  stroke-dasharray: 7 8;
}

.construction-box-workspace .construction-hand-line .hand-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.construction-box-workspace .construction-hand-line .hand-main.hand-primary {
  stroke: rgba(28, 27, 24, 0.94);
  stroke-width: 2.7;
}

.construction-box-workspace .construction-hand-line .hand-side.hand-primary {
  stroke: rgba(35, 34, 31, 0.32);
  stroke-width: 1.05;
}

.construction-box-workspace .construction-hand-line .hand-accent.hand-primary {
  stroke: rgba(22, 21, 19, 0.38);
  stroke-width: 1.2;
}

.construction-box-workspace .construction-hand-line .hand-main.hand-secondary {
  stroke: rgba(28, 27, 24, 0.94);
  stroke-width: 2.7;
}

.construction-box-workspace .construction-hand-line .hand-side.hand-secondary {
  stroke: rgba(35, 34, 31, 0.32);
  stroke-width: 1.05;
}

.construction-box-workspace .construction-hand-line .hand-accent.hand-secondary {
  stroke: rgba(22, 21, 19, 0.38);
  stroke-width: 1.2;
}

.construction-box-workspace .construction-hand-line .hand-main.hand-guide,
.construction-box-workspace .construction-hand-line .hand-side.hand-guide {
  stroke: rgba(80, 108, 124, 0.2);
  stroke-width: 0.72;
}

.construction-box-workspace .construction-hand-line .hand-main.hand-hidden,
.construction-box-workspace .construction-hand-line .hand-side.hand-hidden {
  stroke: #8f9ba5;
  stroke-width: 1.8;
  stroke-dasharray: 7 8;
}

.ellipse-construction-copy {
  position: absolute;
  z-index: 23;
  top: calc(clamp(54px, 8vh, 92px) - 10px);
  right: clamp(76px, 8vw, 136px);
  width: min(395px, 28vw);
  margin: 0;
  font-family: var(--plain);
  color: rgba(24, 24, 24, 0.82);
  pointer-events: none;
}

.ellipse-construction-copy[hidden] {
  display: none;
}

.ellipse-construction-copy h2 {
  margin: 0 0 8px;
  transform: translateY(0);
}

.ellipse-construction-copy p {
  margin: 10px 0 0;
  font-size: clamp(13px, 1.03vw, 17px);
  font-weight: 300;
  line-height: 1.28;
}

.construction-sketch-workspace .ellipse-plane {
  fill: transparent;
}

.construction-sketch-workspace .face.top,
.construction-sketch-workspace .construction-cylinder-top {
  fill: rgba(255, 255, 255, 0.76);
}

.construction-sketch-workspace .construction-hand-line .ellipse-outline.hand-main.hand-primary,
.construction-sketch-workspace .construction-hand-line .cylinder-ellipse.hand-main.hand-primary,
.construction-sketch-workspace .construction-hand-line .vase-profile-line.hand-main.hand-primary {
  stroke-width: 3.05;
}

.construction-sketch-workspace .construction-hand-line .ellipse-outline.hand-side.hand-primary,
.construction-sketch-workspace .construction-hand-line .cylinder-ellipse.hand-side.hand-primary,
.construction-sketch-workspace .construction-hand-line .vase-profile-line.hand-side.hand-primary {
  stroke: rgba(35, 34, 31, 0.36);
  stroke-width: 1.2;
}

.construction-sketch-workspace .construction-hand-line .ellipse-outline.hand-accent.hand-primary,
.construction-sketch-workspace .construction-hand-line .cylinder-ellipse.hand-accent.hand-primary,
.construction-sketch-workspace .construction-hand-line .vase-profile-line.hand-accent.hand-primary {
  stroke: rgba(22, 21, 19, 0.42);
  stroke-width: 1.35;
}

.basics-horizon-workspace .basics-vanishing-copy {
  top: clamp(26px, 4.6vh, 54px);
}

.figures-space-reset-button {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 28;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #222738;
  box-shadow: var(--round-control-shadow);
  cursor: pointer;
  transform: translateX(-50%);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

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

.figures-space-reset-button svg {
  width: 17px;
  height: 17px;
}

.figures-space-reset-button:hover {
  background: #222738;
  color: #fff;
  box-shadow: var(--round-control-shadow-hover);
  transform: translateX(-50%) translateY(-2px);
}

.figures-space-reset-button:active {
  transform: translateX(-50%) scale(0.94);
}

.geometric-figure-pose-reset {
  right: auto;
  bottom: 58px;
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}

.geometric-figure-pose-reset:hover {
  transform: translateX(-50%) translateY(-2px);
}

.geometric-figure-pose-reset:active {
  transform: translateX(-50%) scale(0.94);
}

.figure-pose-bottom-actions {
  position: absolute;
  left: 50%;
  bottom: 56px;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(-50%);
}

.figure-pose-bottom-actions .geometric-figure-pose-reset {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.figure-pose-bottom-actions .geometric-figure-pose-reset:hover {
  transform: translateY(-2px) !important;
}

.figure-pose-bottom-actions .geometric-figure-pose-reset:active {
  transform: scale(0.94) !important;
}

.figure-pose-primary-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #222738;
  box-shadow: var(--round-control-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.figure-pose-primary-action.is-active:not(.is-save) {
  background: #222738;
  color: #fff;
  border-color: transparent;
  outline: none;
}

.figure-pose-primary-action[hidden] {
  display: none;
}

.figure-pose-primary-action .dock-icon {
  width: 17px;
  height: 17px;
}

.figure-pose-primary-action:not(:disabled):hover,
.figure-pose-primary-action:not(:disabled):focus-visible {
  outline: none;
  border-color: transparent;
  background: #222738;
  color: #fff;
  box-shadow: var(--round-control-shadow-hover);
}

.figure-pose-primary-action:not(:disabled):hover {
  transform: translateY(-2px);
}

.figure-pose-primary-action:disabled {
  opacity: 1;
  cursor: default;
}

@media (min-width: 600px) and (max-width: 1180px) {
  .figure-pose-dot {
    width: 13px;
    height: 13px;
  }
}

@media (orientation: landscape) {
  html.is-ipad .figure-pose-bottom-actions {
    position: fixed;
    bottom: calc(48px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 600px) and (max-width: 1180px) and (orientation: portrait) {
  .figure-pose-bottom-actions {
    position: fixed;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

/* One interaction language for circular controls in every lesson scene. */
:is(
  .basics-settings-button,
  .panel-icon-button,
  .vase-preset-button,
  .horizon-popup-close
) {
  border: 1px solid var(--round-control-border);
  border-radius: 50%;
  background: var(--round-control-bg);
  color: var(--round-control-ink);
  box-shadow: var(--round-control-shadow);
  transform: scale(1);
  transform-origin: center;
  transition:
    background-color var(--round-control-motion),
    border-color var(--round-control-motion),
    color var(--round-control-motion),
    box-shadow var(--round-control-motion),
    transform var(--round-control-motion);
}

:is(
  .basics-settings-button,
  .panel-icon-button,
  .vase-preset-button,
  .horizon-popup-close
):is(:hover, :focus-visible) {
  border-color: var(--round-control-hover-border);
  background: var(--round-control-hover);
  color: var(--round-control-ink);
  box-shadow: var(--round-control-shadow-hover);
  transform: scale(var(--round-control-scale));
}

:is(
  .basics-settings-button,
  .vase-preset-button
).is-active,
.figure-voice-button.is-playing {
  border-color: var(--round-control-ink);
  background: var(--round-control-ink);
  color: #fff;
}

:is(
  .basics-settings-button,
  .vase-preset-button
).is-active:is(:hover, :focus-visible) {
  border-color: var(--round-control-hover-border);
  background: var(--round-control-hover);
  color: var(--round-control-ink);
}

/* Header sound is blue while enabled and green only during playback. */
.header-voice-button.figure-voice-button {
  border: 0;
  background: transparent;
  color: #53b7f9;
  box-shadow: none;
  transform: none;
}

.header-voice-button.figure-voice-button.is-playing {
  color: #c0ff00;
}

.header-voice-button.figure-voice-button.is-muted {
  color: #d85b57;
}

.header-voice-button.figure-voice-button .dock-icon,
.header-voice-button.figure-voice-button .dock-icon * {
  color: currentColor;
  stroke: currentColor;
}

.header-voice-button.figure-voice-button:hover,
.header-voice-button.figure-voice-button.is-playing:hover {
  color: #fff;
}

/* Shared interaction for every control that moves something in the scene. */
.lesson-svg .scene-move-control {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--round-control-motion);
}

.lesson-svg .scene-move-control:is(:focus, :focus-visible, :active) {
  outline: none;
}

.lesson-svg .scene-move-control .handle {
  fill: rgba(255, 255, 255, 0.9) !important;
  stroke: var(--round-control-border) !important;
  stroke-width: 1.2;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  transition:
    fill var(--round-control-motion),
    stroke var(--round-control-motion);
}

.lesson-svg .scene-move-control .handle-shadow {
  fill: url(#sceneControlShadowGradient);
  stroke: none;
  opacity: 0.92;
  filter: none;
  pointer-events: none;
  transition:
    opacity var(--round-control-motion);
}

.lesson-svg .scene-move-control .handle-core {
  fill: var(--round-control-ink) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.lesson-svg .scene-move-control:is(
  :hover,
  :focus,
  :focus-visible,
  .is-hovered,
  .is-active,
  .is-related-active
) {
  transform: scale(var(--round-control-scale));
}

.lesson-svg .scene-move-control:is(
  :hover,
  :focus,
  :focus-visible,
  .is-hovered,
  .is-active,
  .is-related-active
) .handle {
  fill: #000 !important;
  stroke: transparent !important;
  filter: none !important;
}

.lesson-svg .scene-move-control:is(
  :hover,
  :focus,
  :focus-visible,
  .is-hovered,
  .is-active,
  .is-related-active
) .handle-core {
  fill: #fff !important;
}

.lesson-svg .scene-move-control:is(
  :hover,
  :focus,
  :focus-visible,
  .is-hovered,
  .is-active,
  .is-related-active
) .handle-shadow {
  opacity: 1;
}

.lesson-svg .scene-move-control:is(:active, .is-active) {
  transform: scale(0.94);
}

.lesson-svg .scene-move-control:is(:active, .is-active) .handle {
  fill: #000 !important;
  stroke: transparent !important;
}

.lesson-svg .scene-move-control:is(:active, .is-active) .handle-core {
  fill: #fff !important;
}

.lesson-svg.is-dragging-horizon .horizon-move-control {
  transform: scale(0.94);
}

.lesson-svg.is-dragging-horizon .horizon-move-control .handle {
  fill: #000 !important;
  stroke: transparent !important;
}

.lesson-svg.is-dragging-horizon .horizon-move-control .handle-core {
  fill: #fff !important;
}

.lesson-svg.is-dragging-p3d-horizon :is(
  .p3d-move-control-p3d-horizon,
  .p3d-move-control-p3d-pitch
) {
  transform: scale(0.82);
}

.lesson-svg.is-dragging-p3d-horizon :is(
  .p3d-move-control-p3d-horizon,
  .p3d-move-control-p3d-pitch
) .handle {
  fill: #000 !important;
  stroke: transparent !important;
}

.lesson-svg.is-dragging-p3d-horizon :is(
  .p3d-move-control-p3d-horizon,
  .p3d-move-control-p3d-pitch
) .handle-core {
  fill: #fff !important;
}

.lesson-svg .p3d-move-control:is(:active, .is-active) {
  transform: scale(0.82);
}

.light-settings-button {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.92);
  color: #222738;
  transform: none !important;
}

.light-settings-button:is(:hover, :focus-visible, .is-active) {
  border-color: transparent;
  background: #222738;
  color: #fff;
  transform: none !important;
}

.construction-square-workspace .construction-hand-line .perspective-square-boundary.hand-line {
  stroke: rgba(200, 102, 116, 0.78);
  stroke-width: 1.05;
}

.construction-square-workspace .construction-hand-line .perspective-square-side.hand-line,
.construction-square-workspace .construction-hand-line .perspective-square-ray.hand-line {
  stroke: rgba(89, 132, 153, 0.5);
  stroke-width: 1.25;
  stroke-dasharray: 8 9;
}

.construction-square-workspace .construction-hand-line .perspective-square-centerline.hand-line {
  stroke: rgba(65, 145, 154, 0.62);
  stroke-width: 1.25;
  stroke-dasharray: 7 8;
}

.construction-square-workspace .construction-hand-line .perspective-square-diagonal.hand-line {
  stroke: rgba(242, 173, 50, 0.58);
  stroke-width: 1.25;
}

.construction-square-workspace .construction-hand-line .perspective-square-diagonal.hand-line.is-primary {
  stroke: rgba(18, 132, 166, 0.9);
  stroke-width: 2.05;
}

.construction-square-workspace .construction-hand-line .perspective-square-transfer-line.hand-line {
  stroke: rgba(242, 173, 50, 0.9);
  stroke-width: 2.05;
}

.construction-square-workspace .construction-hand-line .perspective-square-primary-outline.hand-line {
  stroke: var(--edge);
  stroke-width: 2.5;
  stroke-dasharray: none;
}

.construction-square-workspace .perspective-square-primary-outline {
  fill: none;
  stroke: rgba(42, 41, 38, 0.92);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (orientation: landscape) {
  html.is-ipad .figure-pose-dots,
  html.is-ipad .figure-work-version-dots {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  html.is-ipad .figure-pose-dot,
  html.is-ipad .figure-work-version-dot {
    width: 15px;
    height: 15px;
  }

  html.is-ipad .basics-vanishing-workspace .basics-bottom-controls,
  html.is-ipad .sketch-light-workspace .light-step-dock {
    position: fixed;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  html.is-ipad .geometric-figure-pose-reset {
    position: fixed;
    bottom: calc(52px + env(safe-area-inset-bottom));
  }

}

html :is(
  .ellipse-construction-copy,
  .light-lesson-copy
) > .light-step-dock.copy-inline-step-dock {
  position: static;
  left: auto;
  bottom: auto;
  width: max-content;
  max-width: 100%;
  margin-top: 24px;
  transform: none;
}

/* Larger direct-manipulation targets on iPad; settings and navigation are unchanged. */
html.is-ipad .lesson-svg .scene-move-control {
  transform: scale(2);
}

html.is-ipad .perspective3d-workspace .p3d-move-control.is-intro-scene-control-revealing {
  animation-name: p3d-intro-scene-control-rubber-in-ipad;
}

@keyframes p3d-intro-scene-control-rubber-in-ipad {
  0% {
    opacity: 0;
    transform: scale(0.36);
  }

  50% {
    opacity: 1;
    transform: scale(2.36);
  }

  72% {
    transform: scale(1.8);
  }

  88% {
    transform: scale(2.1);
  }

  100% {
    opacity: 1;
    transform: scale(2);
  }
}

html.is-ipad .lesson-svg .scene-move-control :is(.handle, .handle-shadow, .handle-core) {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.667) !important;
}

html.is-ipad .lesson-svg .scene-move-control .handle-shadow {
  stroke: transparent !important;
  stroke-width: 26px;
  pointer-events: all;
}

html.is-ipad .lesson-svg :is(
  .box-lift-control,
  .box-space-move-control
) .handle-shadow {
  stroke-width: 30px;
}

html.is-ipad .lesson-svg :is(
  .horizon-move-control,
  .p3d-move-control
) .handle-shadow {
  stroke-width: 38px;
}

html.is-ipad .lesson-svg .object-control .object-hit {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.588);
}

html.is-ipad .lesson-svg .scene-move-control:is(
  :hover,
  :focus,
  :focus-visible,
  .is-hovered,
  .is-active,
  .is-related-active
) {
  transform: scale(2.32);
}

html.is-ipad .lesson-svg .scene-move-control:is(:active, .is-active),
html.is-ipad .lesson-svg.is-dragging-horizon .horizon-move-control {
  transform: scale(1.88);
}

html.is-ipad .lesson-svg.is-dragging-p3d-horizon :is(
  .p3d-move-control-p3d-horizon,
  .p3d-move-control-p3d-pitch
),
html.is-ipad .lesson-svg .p3d-move-control:is(:active, .is-active) {
  transform: scale(1.64);
}

@media (min-width: 600px) and (max-width: 1180px) and (orientation: portrait) {
  .figure-pose-dots,
  .figure-work-version-dots,
  html .basics-vanishing-workspace .basics-bottom-controls,
  .sketch-light-workspace .light-step-dock {
    position: fixed;
    bottom: calc(50px + env(safe-area-inset-bottom));
  }

  .geometric-figure-pose-reset {
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

html.is-ipad .language-switch button {
  font-size: 15px;
}

html.is-ipad :is(
  .basics-lesson-header,
  .basics-vanishing-copy,
  .ellipse-construction-copy
) {
  top: 68px;
}

html.is-ipad :is(
  .basics-settings-button,
  .light-settings-button
) {
  top: 62px;
}

html.is-ipad .basics-lesson-subtitle {
  font-size: 19px;
}

html.is-ipad .basics-vanishing-copy p,
html.is-ipad .basics-vanishing-copy .basics-side-intro {
  font-size: 18px;
}

html.is-ipad .ellipse-construction-copy p {
  font-size: 18px;
}

html.is-ipad .basics-bottom-controls .basics-step-card strong,
html.is-ipad .basics-bottom-controls .basics-step-card::after,
html.is-ipad .light-step-button,
html.is-ipad .light-step-counter {
  font-size: 15px;
}

html.is-ipad .light-step-arrow {
  font-size: 22px;
}

html.is-ipad .basics-description-navigation button,
html.is-ipad .basics-step-tooltip,
html.is-ipad .svg-tooltip {
  font-size: 13px;
}

@media (min-width: 600px) and (max-width: 1180px) and (orientation: portrait) {
  html.is-ipad .sketch-light-workspace .geometric-figure-canvas .three-canvas-layer,
  html.is-ipad .sketch-light-workspace .geometric-figure-canvas .lesson-svg {
    transform: translateY(10px) scale(0.85);
    transform-origin: center center;
  }
}

@media (orientation: landscape) {
  html.is-ipad :is(
    .basics-vanishing-copy,
    .ellipse-construction-copy
  ) {
    top: 92px;
  }

  html.is-ipad :is(
    .basics-settings-button,
    .light-settings-button
  ) {
    top: 86px;
  }
}

/* Brief horizon drag demonstration in the perspective introduction. */
.horizon-tutorial-ring {
  fill: #53b7f9;
  stroke: none;
}
.horizon-tutorial-arrow {
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.horizon-tutorial-label {
  font-family: var(--heading);
  font-size: 18px;
  font-weight: var(--heading-weight);
  fill: #000;
  stroke: none;
}

.lesson-mode .lesson-svg.ellipse-projection-mode {min-width:0!important;min-height:0!important;width:100%;height:calc(100dvh - 86px);max-height:calc(100dvh - 86px);aspect-ratio:auto;margin:0;}

/* Reference frames and source circles stay subordinate to the resulting ellipse. */
.construction-reference {stroke-width:1.1!important;}
.construction-reference .hand-main,.hand-main.construction-reference {stroke-width:1.1!important;}
.construction-reference .hand-side,.hand-side.construction-reference {stroke-width:.5!important;}
.construction-reference .hand-accent,.hand-accent.construction-reference {stroke-width:.5!important;}

.construction-vertical,.construction-vertical :is(.hand-main,.hand-side,.hand-accent) {stroke:#2698f2!important;}
.construction-diagonal,.construction-diagonal :is(.hand-main,.hand-side,.hand-accent) {stroke:#d4a900!important;}
.construction-intersection {fill:#2698f2;stroke:none;pointer-events:none;}

.construction-frame,.construction-frame :is(.hand-main,.hand-side,.hand-accent) {stroke:#92999e!important;}

.construction-extension {opacity:.3;}
.construction-extension .hand-main,.hand-main.construction-extension {stroke-width:.65!important;}

/* One visible stroke per line in the circle-to-ellipse construction. */
:is(.ellipse-projection-mode,.ex-scene:has(.construction-frame)) :is(.hand-side,.hand-accent) {display:none;}

:is(.construction-vertical,.construction-diagonal),:is(.construction-vertical,.construction-diagonal) .hand-main {stroke-width:1.8!important;vector-effect:non-scaling-stroke;}

/* The lamp construction reuses the standard chapter layout and control sizes. */
.construction-lamps-workspace .construction-lamps-diagram :is(.hand-side,.hand-accent) {display:none;}
.construction-lamps-workspace .construction-lamps-diagram :is(line,path) {vector-effect:non-scaling-stroke;}

.construction-lamps-workspace .construction-diagonal {
  stroke: #f2ad32 !important;
  stroke-width: 1.45 !important;
  opacity: .58;
}
.construction-lamps-workspace .construction-diagonal .hand-main {
  stroke: inherit !important;
  stroke-width: inherit !important;
  opacity: 1;
}