.hand-study {
  --hand-wash: #eee1d0;
  --hand-stage: #314942;
  --hand-glow: #6d8978;
  --hand-stage-ink: #faf2de;
  --hand-accent: #744936;
}

.hand-study.palmprint-sleeve-study {
  --hand-stage: #573b3c;
  --hand-glow: #946f5f;
  --hand-accent: #8c4938;
}

.hand-study.pile-plaque-study {
  --hand-stage: #292d41;
  --hand-glow: #696a82;
  --hand-accent: #4d547a;
}

.hand-study .hand-heading h1 { font-size: clamp(39px, 6.7vw, 91px); }
.pile-plaque-study .hand-heading h1 { font-size: clamp(39px, 6vw, 82px); }
.pile-plaque-study .hand-heading h1 em { white-space: nowrap; }
.hand-study .hand-heading { margin-bottom: clamp(22px, 4vw, 45px); }
.hand-bench {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(255px, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  align-items: start;
}

.hand-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 12px clamp(10px, 2vw, 22px) 0;
  border: 1px solid var(--hand-stage);
  background: radial-gradient(ellipse at 42% 18%, var(--hand-glow), var(--hand-stage) 79%);
  color: var(--hand-stage-ink);
}

.hand-stage-top, .hand-stage-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 0;
  font-size: 11px;
  border-block-start: 1px solid #fff0ce67;
}

.hand-stage-top { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.hand-stage-top span:last-child { color: #fff3cb; }
.hand-stage-foot { padding-bottom: 12px; }

.hand-diagram { display: block; width: 100%; height: auto; }

.hand-panel {
  min-width: 0;
  background: var(--hand-wash);
  border: 1px solid var(--merch-line);
  border-top: 3px solid var(--hand-accent);
  padding: clamp(15px, 2.4vw, 28px);
}

.hand-panel h2, .hand-note h2 {
  margin: 8px 0;
  font: 300 clamp(24px, 3.15vw, 40px)/1.01 var(--font-serif);
  letter-spacing: -.035em;
}

.hand-panel > p:not(.eyebrow), .hand-note p:not(.eyebrow) { font-size: 14px; max-width: 62ch; }
.hand-controls {
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  margin: 17px 0;
  padding: 0;
  border: 0;
}

.hand-controls button, .hand-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #9b8976;
  background: #fcf5e9;
  color: var(--merch-ink);
  text-align: start;
  font: inherit;
  font-size: 13px;
}

.hand-controls button:first-of-type {
  border-color: var(--hand-accent);
  background: var(--hand-accent);
  color: #fff6e6;
}

.scissor-stretch-study .hand-controls button:first-of-type {
  border-color: #9b8976;
  background: #fcf5e9;
  color: var(--merch-ink);
}

.hand-controls button:enabled, .hand-checkbox:has(input:enabled) { cursor: pointer; }
.hand-controls button:enabled:hover { box-shadow: inset 0 0 0 2px currentColor; }
.hand-controls :is(button, input):focus-visible, .palm-surface:focus-visible {
  outline: 3px solid var(--merch-rust);
  outline-offset: 3px;
}
.hand-controls :is(input, button):disabled { cursor: default; }

.hand-checkbox { justify-content: flex-start; }
.hand-controls input { accent-color: var(--hand-accent); }
.hand-checkbox input { width: 18px; height: 18px; margin: 0; }
.hand-range { display: grid; }
.hand-range > label { font-size: 13px; font-weight: 600; }
.hand-range > input { min-width: 0; width: 100%; min-height: 44px; margin: 0; }
.hand-range > div { display: flex; justify-content: space-between; gap: 8px; margin-top: -5px; font-size: 11px; color: #69564b; }

.hand-readout {
  padding-top: 9px;
  border-top: 1px solid var(--merch-line);
  color: var(--hand-accent);
}

.hand-readout output { display: block; font: 300 36px/1.12 var(--font-serif); font-variant-numeric: tabular-nums; }
.hand-readout p:last-child { font-size: 13px; margin-top: 3px; }
.hand-thermograph {
  height: 5px;
  margin: 7px 0;
  overflow: hidden;
  background: #cdbbac;
}
.hand-thermograph > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #93614e, #a76022 55%, #bb7b21);
  transform: scaleX(0);
  transform-origin: left;
}

.hand-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px clamp(18px, 4vw, 48px);
  margin-top: clamp(25px, 4vw, 48px);
  padding-block: 15px;
  border-block: 1px solid var(--merch-line);
}
.hand-note h2 { font-size: clamp(25px, 3vw, 38px); }
.hand-note a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hand-accent);
  font-size: 13px;
  min-height: 44px;
}
.hand-note img { width: 58px; height: 58px; border: 1px solid var(--merch-line); }

.hand-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scissor-links { stroke: #d1b27d; stroke-width: 10; }
.scissor-tiles, .scissor-centers { transition: opacity 180ms ease; }
.scissor-centers { opacity: 0; }
.scissor-stage[data-linkage="visible"] .scissor-tiles { opacity: .26; }
.scissor-stage[data-linkage="visible"] .scissor-centers { opacity: 1; }

.palm-surface {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.palm-surface:enabled { cursor: pointer; touch-action: none; user-select: none; }
.palm-surface:focus-visible { outline-color: #fff1bc; outline-offset: -2px; }

.pile-field {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3.8vw, 48px) 0 clamp(33px, 4vw, 52px);
}
.pile-board {
  width: min(77%, 520px);
  padding: clamp(6px, 1.2vw, 15px);
  border: 1px solid #bd946a;
  background:
    repeating-linear-gradient(93deg, #3422190b 0 1px, transparent 2px 8px),
    linear-gradient(145deg, #c19a71, #826045 45%, #a77c55 73%, #583c31);
  box-shadow: 0 2px 0 #664739, 4px 12px 22px #111527aa, inset 0 0 0 2px #eed6a343;
}

.pile-board canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #382e37;
  background: #263451;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.pile-light {
  position: absolute;
  inset: auto auto 7px 12%;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.pile-light span { font-size: 17px; }
.pile-swatches { display: flex; gap: 3px; margin: 6px 0; }
.pile-swatches span { width: 22px; height: 7px; background: #25314e; }
.pile-swatches span:nth-child(2) { background: #3b4b71; }
.pile-swatches span:nth-child(3) { background: #6e7eab; }

@media (max-width: 760px) {
  .hand-bench { grid-template-columns: minmax(0, 1fr); }
  .pile-board { width: min(85%, 470px); }
}

@media (max-width: 510px) {
  .hand-note { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .scissor-tiles, .scissor-centers { transition: none; }
}