.avatar-stage .avatar-renderer {
  --avatar-skin-tint: #c98667;
  --avatar-skin-opacity: 0;
  --avatar-hair-tint: #241816;
  --avatar-hair-opacity: 0;
  --avatar-uniform-tint: #5200ff;
  --avatar-uniform-opacity: 0;
  --avatar-trim-tint: #3cffd0;
  --avatar-height-scale: 1;
  --avatar-head-scale: 1;
  --avatar-shoulder-scale: 1;
  --avatar-torso-scale: 1;
  --avatar-leg-scale: 1;
  --avatar-torso-shift: 0px;
  --avatar-leg-shift: 0px;
  --avatar-build-scale: 1;
  --avatar-face-width: 1;
  --avatar-eye-size: 1;
  --avatar-eye-spacing: 1;
  --avatar-brow-angle: 0deg;
  --avatar-nose-length: 1;
  --avatar-mouth-width: 1;
  --avatar-mouth-shift: 0px;
  position: relative;
  z-index: 1;
  display: block;
  height: min(292px, calc(100% - 8px));
  max-width: 82%;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  transform-origin: 50% 92%;
  transform: scaleY(var(--avatar-height-scale));
  transition: transform 180ms ease;
}

.feature .avatar-renderer { height: min(100%, 318px); max-width: 92%; }
.creator-preview .avatar-renderer { height: min(340px, calc(100% - 8px)); max-width: 78%; }

.avatar-body-piece,
.avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  transition: transform 180ms ease;
}

/* 三個解剖區域獨立變形；年齡不只縮放整張圖片。 */
.avatar-piece-head {
  z-index: 3;
  clip-path: ellipse(13.5% 13.5% at 50% 14%);
  transform-origin: 50% 20%;
  transform: scale(var(--avatar-head-scale)) scaleX(var(--avatar-face-width));
}
.avatar-piece-torso {
  z-index: 2;
  clip-path: polygon(39% 18%, 61% 18%, 68% 23%, 73% 52%, 64% 56%, 60% 65%, 40% 65%, 36% 56%, 27% 52%, 32% 23%);
  transform-origin: 50% 58%;
  transform: translateY(var(--avatar-torso-shift)) scaleX(calc(var(--avatar-shoulder-scale) * var(--avatar-build-scale))) scaleY(var(--avatar-torso-scale));
}
.avatar-piece-legs {
  z-index: 1;
  clip-path: polygon(38% 54%, 62% 54%, 65% 100%, 52% 100%, 50% 62%, 48% 100%, 35% 100%);
  transform-origin: 50% 56%;
  transform: translateY(var(--avatar-leg-shift)) scaleX(var(--avatar-build-scale)) scaleY(var(--avatar-leg-scale));
}

.avatar-layer { z-index: 5; display: none; }
.avatar-layer-hair {
  clip-path: polygon(30% 0, 70% 0, 70% 22%, 30% 22%);
  transform-origin: 50% 20%;
  transform: scale(var(--avatar-head-scale)) scaleX(var(--avatar-face-width));
}
.avatar-layer-expression-eyes,
.avatar-layer-expression-mouth {
  transform-origin: 50% 20%;
  transform: scale(var(--avatar-head-scale)) scaleX(var(--avatar-face-width));
}
.avatar-layer-expression-eyes { clip-path: polygon(41% 9.7%, 59% 9.7%, 59% 13.6%, 41% 13.6%); }
.avatar-layer-expression-mouth { clip-path: polygon(43% 13.6%, 57% 13.6%, 57% 17.8%, 43% 17.8%); }
.avatar-stage[data-hair="wave"] .avatar-layer-hair-wave,
.avatar-stage[data-hair="buzz"] .avatar-layer-hair-buzz,
.avatar-stage[data-face="focus"] .avatar-layer-focus,
.avatar-stage[data-face="confident"] .avatar-layer-confident { display: block; }

.avatar-semantic-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.avatar-skin-mask { fill: var(--avatar-skin-tint); opacity: var(--avatar-skin-opacity); mix-blend-mode: color; }
.avatar-uniform-mask { fill: var(--avatar-uniform-tint); opacity: var(--avatar-uniform-opacity); mix-blend-mode: color; }
.avatar-trim-mask { fill: var(--avatar-trim-tint); opacity: calc(var(--avatar-uniform-opacity) * .8); mix-blend-mode: color; }
.avatar-hair-mask { fill: var(--avatar-hair-tint); opacity: var(--avatar-hair-opacity); mix-blend-mode: color; }

.avatar-anatomy-head { transform-box: fill-box; transform-origin: center; }
.avatar-face-shape-layer { transform: scaleX(var(--avatar-face-width)); }
.avatar-eye-layer,
.avatar-expression-eye { transform: scaleX(var(--avatar-eye-spacing)) scaleY(var(--avatar-eye-size)); }
.avatar-brow-layer { transform: rotate(var(--avatar-brow-angle)); }
.avatar-nose-layer { transform: scaleY(var(--avatar-nose-length)); }
.avatar-mouth-layer { transform: translateY(var(--avatar-mouth-shift)) scaleX(var(--avatar-mouth-width)); }

.avatar-face-outline,
.avatar-feature-stroke { fill: none; stroke: #241816; stroke-linecap: round; stroke-linejoin: round; }
.avatar-face-outline { stroke: rgba(255,255,255,.18); stroke-width: 2; }
.avatar-feature-stroke { stroke-width: 4; opacity: .56; }
.avatar-feature-fill { fill: #241816; opacity: .38; }
.avatar-eye-glint { fill: #fff; opacity: .9; }
.avatar-mouth-cover { display: none; fill: var(--avatar-skin-tint); opacity: .82; }

.avatar-face-shape-layer,
.avatar-eye-layer,
.avatar-brow-layer,
.avatar-nose-layer,
.avatar-mouth-layer,
.avatar-hair-color-layer,
.avatar-expression-eye { display: none; }
.avatar-stage[data-shape="round"] .avatar-face-round-layer,
.avatar-stage[data-shape="oval"] .avatar-face-oval-layer,
.avatar-stage[data-shape="square"] .avatar-face-square-layer,
.avatar-stage[data-eyes="bright"] .avatar-eye-bright-layer,
.avatar-stage[data-eyes="calm"] .avatar-eye-calm-layer,
.avatar-stage[data-eyes="sharp"] .avatar-eye-sharp-layer,
.avatar-stage[data-brows="soft"] .avatar-brow-soft-layer,
.avatar-stage[data-brows="straight"] .avatar-brow-straight-layer,
.avatar-stage[data-brows="bold"] .avatar-brow-bold-layer,
.avatar-stage[data-nose="small"] .avatar-nose-small-layer,
.avatar-stage[data-nose="button"] .avatar-nose-button-layer,
.avatar-stage[data-nose="straight"] .avatar-nose-straight-layer,
.avatar-stage[data-face="smile"] .avatar-mouth-smile-layer,
.avatar-stage[data-face="focus"] .avatar-mouth-focus-layer,
.avatar-stage[data-face="confident"] .avatar-mouth-confident-layer,
.avatar-stage[data-face="neutral"] .avatar-mouth-neutral-layer,
.avatar-stage[data-face="grin"] .avatar-mouth-grin-layer,
.avatar-stage[data-face="surprised"] .avatar-mouth-surprised-layer,
.avatar-stage[data-face="angry"] .avatar-mouth-angry-layer,
.avatar-stage[data-face="tired"] .avatar-mouth-tired-layer,
.avatar-stage[data-face="surprised"] .avatar-expression-surprised,
.avatar-stage[data-face="angry"] .avatar-expression-angry,
.avatar-stage[data-face="tired"] .avatar-expression-tired,
.avatar-stage[data-hair="wave"] .avatar-hair-wave-color,
.avatar-stage[data-hair="buzz"] .avatar-hair-buzz-color,
.avatar-stage[data-hair="cap"] .avatar-hair-cap-color { display: block; }
.avatar-stage[data-face="neutral"] .avatar-mouth-cover,
.avatar-stage[data-face="grin"] .avatar-mouth-cover,
.avatar-stage[data-face="surprised"] .avatar-mouth-cover,
.avatar-stage[data-face="angry"] .avatar-mouth-cover,
.avatar-stage[data-face="tired"] .avatar-mouth-cover { display: block; }

.avatar-number-render {
  fill: var(--avatar-trim-tint);
  stroke: #131313;
  stroke-width: 5;
  paint-order: stroke fill;
  font: 900 92px Arial, sans-serif;
  text-anchor: middle;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(var(--avatar-shoulder-scale));
}

.creator-advanced { display: grid; gap: 12px; }
.advanced-section {
  border: 1px solid rgba(0,0,0,.72);
  border-radius: 8px;
  background: #181818;
  color: #fff;
  overflow: hidden;
}
.advanced-section summary {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  cursor: pointer;
  font: 700 12px Inter, Arial, sans-serif;
  letter-spacing: .4px;
}
.advanced-section summary:focus-visible { outline: 2px solid #0070d1; outline-offset: -3px; }
.advanced-section summary small { color: #53b1ff; font-size: 11px; }
.advanced-help { margin: 0 !important; max-width: none !important; padding: 0 16px 12px; color: rgba(255,255,255,.68); font-size: 11px !important; }
.slider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
.slider-control { min-width: 0; display: grid; gap: 8px; padding: 14px 16px; background: #121314; }
.slider-meta,
.slider-scale { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.slider-meta strong { font: 600 12px Inter, Arial, sans-serif; }
.slider-meta output { min-width: 54px; color: #53b1ff; text-align: right; font: 700 11px Consolas, monospace; }
.slider-scale { color: rgba(255,255,255,.48); font: 500 9px Inter, Arial, sans-serif; }
.slider-control input[type="range"] { width: 100%; min-height: 28px; margin: 0; accent-color: #0070d1; cursor: pointer; }
.slider-control input[type="range"]:focus-visible { outline: 2px solid #53b1ff; outline-offset: 2px; border-radius: 4px; }

.creator-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 2px; }
.creator-action {
  min-height: 44px;
  border: 0;
  border-radius: 9999px;
  background: #131313;
  color: #fff;
  cursor: pointer;
  padding: 10px 12px;
  font: 700 11px Inter, Arial, sans-serif;
  letter-spacing: .35px;
}
.creator-action:hover { background: #0070d1; }
.creator-action:active { background: #0064b7; }
.creator-action:focus-visible { outline: 2px solid #0070d1; outline-offset: 3px; }
.avatar-json-panel { grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,.55); padding-top: 10px; font: 600 10px Consolas, monospace; }
.avatar-json-panel summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.avatar-json-panel pre { max-height: 260px; overflow: auto; border-radius: 8px; background: #131313; color: #d8d8d8; padding: 12px; white-space: pre-wrap; word-break: break-word; font-size: 9px; line-height: 1.5; }

@media (max-width: 760px) {
  .slider-grid { grid-template-columns: 1fr; }
}
@media (max-width: 549px) {
  .feature .avatar-renderer { height: min(100%, 560px); max-width: 94%; }
  .creator-preview .avatar-renderer { height: 334px; max-width: 84%; }
  .creator-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-section summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}