.hand-feature {
  --hand-background: #1b252e;
  --hand-accent: #e89b86;
  --hand-text: #f1e4e0;
  --hand-muted: #baa9a5;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(350px, 430px) 1fr;
  column-gap: 4%;
  min-height: max(75svh, 720px);
  padding: 52px 0 48px max(6%, calc((100vw - 1340px) / 2));
  overflow: clip;
  color: var(--hand-text);
  background: var(--hand-background);
}
.hand-copy { position: relative; z-index: 2; }
.hand-eyebrow { color: var(--hand-accent); font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.hand-feature h2 { font-size: clamp(66px, 6vw, 88px); line-height: .86; letter-spacing: -.045em; margin-bottom: 22px; }
.hand-feature h2 span { white-space: nowrap; }
.hand-description { font-size: 23px; line-height: 1.25; max-width: 360px; color: var(--hand-muted); }
.hand-description strong { color: var(--hand-text); font-weight: 700; }
.hand-controls { margin-top: 28px; max-width: 390px; }
.hand-control-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-bottom: 1px solid #f2c2b626; padding-bottom: 14px; }
.hand-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.hand-feature button { color: inherit; }
.hand-feature .hand-preset { border: 0; padding: 8px 14px; font-size: 17px; border-radius: 4px; color: #1b252e; background: var(--hand-accent); }
.hand-preset:hover { filter: brightness(1.08); }
.hand-reset { border: 0; padding: 8px 0 8px 8px; margin-left: auto; font-size: 17px; background: none; color: var(--hand-muted) !important; }
.hand-reset:hover { color: var(--hand-text) !important; }
.hand-reset span { padding-right: 5px; }
.hand-panel { min-height: 232px; padding-top: 14px; }
.hand-panel[hidden], .hand-segments[hidden] { display: none; }
.hand-fingers { display: flex; justify-content: space-between; gap: 2px; margin-bottom: 12px; }
.hand-fingers button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 3px; font-size: 18px; color: var(--hand-muted); }
.hand-fingers button[aria-pressed="true"] { color: var(--hand-accent); border-bottom-color: var(--hand-accent); }
.hand-joint-row { min-height: 31px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.hand-joint-title { font-size: 19px; font-weight: 700; }
.hand-segments { display: flex; gap: 4px; }
.hand-segments button { border: 1px solid #f2c2b628; border-radius: 4px; background: none; padding: 2px 10px; color: var(--hand-muted); font-size: 15px; }
.hand-segments button[aria-pressed="true"] { border-color: #e89b8680; background: #e89b861c; color: var(--hand-text); }
.hand-slider { display: grid; grid-template-columns: 1fr auto; margin-top: 9px; }
.hand-slider label, .hand-slider output { font-size: 18px; line-height: 1.1; }
.hand-slider output { font-variant-numeric: tabular-nums; color: var(--hand-accent); }
.hand-slider input { --fill: 50%; appearance: none; -webkit-appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; grid-column: 1 / -1; cursor: ew-resize; }
.hand-slider input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--hand-accent) var(--fill), #f2c2b62e var(--fill)); }
.hand-slider input::-moz-range-track { height: 3px; border-radius: 3px; background: #f2c2b62e; }
.hand-slider input::-moz-range-progress { height: 3px; background: var(--hand-accent); }
.hand-slider input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -5px; width: 13px; height: 13px; border-radius: 50%; background: #f3d2c9; border: 2px solid var(--hand-accent); box-shadow: 0 0 0 4px #e89b8610; }
.hand-slider input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #f3d2c9; border: 2px solid var(--hand-accent); }
.hand-slider input:focus-visible { outline: 2px solid var(--hand-accent); outline-offset: 3px; border-radius: 3px; }
.hand-slider-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--hand-muted); font-size: 14px; line-height: 1; }
.hand-skin { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid #f2c2b626; margin-top: 12px; }
.hand-skin-label { font-size: 17px; margin-right: auto; }
.hand-swatches { display: flex; align-items: center; gap: 9px; }
.hand-swatches button { display: block; width: 27px; height: 27px; border: 3px solid var(--hand-background); border-radius: 50%; background: var(--swatch); outline: 1px solid transparent; padding: 0; }
.hand-swatches button[aria-pressed="true"] { outline-color: var(--hand-accent); }
.hand-custom-color { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; position: relative; border: 1px solid #f2c2b65c; display: grid; place-items: center; cursor: pointer; }
.hand-custom-color span { font-size: 23px; line-height: 1; pointer-events: none; }
.hand-custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hand-custom-color:focus-within { outline: 2px solid var(--hand-accent); outline-offset: 4px; }
.hand-stage { position: relative; min-width: 0; min-height: 620px; margin: -52px 0 -48px -6%; }
.hand-stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.hand-stage.is-dragging canvas { cursor: grabbing; }
.hand-markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hand-marker { position: absolute; top: 0; left: 0; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: none; background: transparent; pointer-events: auto; cursor: grab; touch-action: none; border-radius: 50%; }
.hand-marker[hidden] { display: none; }
.hand-marker span { display: block; width: 7px; height: 7px; border-radius: 50%; background: #f2c2b6; border: 1px solid #55342b99; box-shadow: 0 0 0 3px #1b252e22; opacity: .55; }
.hand-marker.is-related span { opacity: 1; }
.hand-marker:hover span, .hand-marker[aria-pressed="true"] span { width: 9px; height: 9px; opacity: 1; background: #fff0e8; box-shadow: 0 0 0 5px #d6685355, 0 0 0 6px #f3d2c9cc; }
.hand-hint { position: absolute; bottom: 36px; left: 18%; right: 6%; display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--hand-muted); pointer-events: none; }
.hand-hint::before { content: ''; display: block; width: 24px; height: 1px; background: var(--hand-accent); }
.hand-feature button:focus-visible { outline: 2px solid var(--hand-accent); outline-offset: 4px; }
@media (min-width: 1700px) { .hand-stage { margin-right: max(-10vw, -180px); } }
@media (max-width: 1050px) and (min-width: 761px) {
  .hand-feature { grid-template-columns: 350px 1fr; column-gap: 0; padding-left: 4%; }
  .hand-feature h2 { font-size: 66px; }
  .hand-stage { margin-left: -8%; }
  .hand-hint { left: 14%; right: 5%; font-size: 14px; }
}
@media (max-width: 760px) {
  .hand-feature { display: flex; flex-direction: column; min-height: 0; padding: 48px 6% 40px; }
  .hand-copy { display: contents; }
  .hand-heading { order: 0; }
  .hand-eyebrow { font-size: 16px; margin-bottom: 18px; }
  .hand-feature h2 { font-size: clamp(54px, 13.5vw, 82px); margin-bottom: 20px; }
  .hand-description { font-size: 21px; max-width: 330px; }
  .hand-stage { order: 1; flex: none; width: auto; height: 370px; min-height: 0; margin: 0 -6.82% 0; }
  .hand-hint { bottom: 10px; left: 6%; right: 6%; justify-content: center; font-size: 14px; }
  .hand-controls { order: 2; max-width: 460px; width: 100%; margin: 24px auto 0; }
  .hand-fingers button { font-size: 18px; padding-block: 9px; }
  .hand-segments button { min-height: 30px; }
  .hand-slider input { height: 32px; }
  .hand-panel { min-height: 260px; }
}