/* V-Pop! — the choreo editor (✏️ Make your own dance) and the Pose studio. Owned by the poses agent
 * (docs/v-pop-round4.md §4, docs/v-pop-round5.md §6). Every class starts with ch- (the editor and the pose box)
 * or ps- (the Pose studio). Uses the design tokens from vpop.css (with fallbacks, so it also reads alone).
 * Phone first (390 px): every control is a 44 px tap target and nothing scrolls the page sideways;
 * the chip strips and the timeline scroll inside themselves. */

.ch-ed {
  --ch-lab: 72px;
  --ch-beat: 32px;
  --ch-key: var(--pink, #ff4f9a);
  --ch-sel: var(--gold, #ffd166);
  --ch-ph: var(--gold, #ffd166);
  --ch-bg: var(--ink-2, #1e1830);
  --ch-bg2: var(--ink-3, #2a2242);
  --ch-line: var(--line, rgba(255, 255, 255, .08));
  --ch-line2: var(--line-2, rgba(255, 255, 255, .16));
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  color: var(--text, #f7f2ff);
}
.ch-ed * { box-sizing: border-box; }
.ch-ed button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ---- stage preview and transport */
.ch-top { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-stage { width: 100%; min-width: 0; }
.ch-nostage {
  aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 40px;
  border-radius: 18px; background: var(--ch-bg2);
}
.ch-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-btn {
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ch-line2); background: var(--ch-bg2);
  font-weight: 700; font-size: 17px; line-height: 1; cursor: pointer;
}
.ch-btn:active { transform: scale(.96); }
.ch-btn:disabled { opacity: .4; cursor: default; }
.ch-play { min-width: 56px; background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ch-play.on { background: var(--red, #ff5d73); }
.ch-count {
  margin-left: auto; min-width: 64px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .25); font: 700 15px/1.2 var(--font-display, "Baloo 2", system-ui, sans-serif);
  text-align: center; font-variant-numeric: tabular-nums;
}

/* ---- section headings and chip strips */
.ch-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-h { font: 700 14px/1.2 var(--font-display, "Baloo 2", system-ui, sans-serif); color: var(--muted, #b8aed3); letter-spacing: .02em; }
.ch-sub { font: 500 12px/1.3 var(--font-body, system-ui, sans-serif); color: var(--dim, #8379a3); letter-spacing: 0; }
.ch-strip {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 1px 4px; min-width: 0;
}
.ch-strip::-webkit-scrollbar { display: none; }
.ch-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ch-line2); background: var(--ch-bg2);
  font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.ch-chip.ch-sm { font-size: 13px; padding: 0 12px; }
.ch-chip.on { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ch-chip:disabled, .ch-tool:disabled { opacity: .4; cursor: default; }
.ch-whob { padding-left: 6px; }
.ch-divider {
  flex: 0 0 auto; align-self: center; padding: 0 4px 0 10px; border-left: 2px solid var(--ch-line2);
  font: 700 12px/1.2 var(--font-display, "Baloo 2", system-ui, sans-serif); color: var(--gold, #ffd166); white-space: nowrap;
}
.ch-chip.ch-mine { border-color: rgba(255, 209, 102, .45); }
.ch-chip.ch-new { border-style: dashed; }
.ch-all { font-size: 20px; line-height: 1; }
.ch-bust {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 34px;
  background: rgba(255, 255, 255, .12); display: inline-block;
}
.ch-bust svg { width: 100%; height: 100%; display: block; }

/* ---- the pose box: a big figure with drag handles on top (also used by the Pose studio) */
.ch-boxhost { min-width: 0; }
.ch-posebox {
  --ch-key: var(--pink, #ff4f9a);
  --ch-sel: var(--gold, #ffd166);
  --ch-bg: var(--ink-2, #1e1830);
  --ch-bg2: var(--ink-3, #2a2242);
  --ch-line: var(--line, rgba(255, 255, 255, .08));
  --ch-line2: var(--line-2, rgba(255, 255, 255, .16));
  position: relative; width: 100%; height: min(56vh, 380px); min-height: 280px;
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 88%, rgba(255, 79, 154, .22), transparent 60%),
    linear-gradient(180deg, var(--ch-bg2), var(--ch-bg));
  box-shadow: inset 0 0 0 1px var(--ch-line);
}
.ch-fig, .ch-handles { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-fig > svg { width: 100%; height: 100%; display: block; }
.ch-handles { overflow: visible; touch-action: pan-y; }
.ch-handles.ch-armed, .ch-handles.ch-grab { touch-action: none; }
.ch-bone { stroke: rgba(255, 255, 255, .35); stroke-width: .5; stroke-dasharray: 1.2 1.2; pointer-events: none; }
.ch-hit { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
.ch-hd {
  fill: rgba(255, 255, 255, .85); stroke: var(--ch-key); stroke-width: .8; pointer-events: none;
  transition: fill .12s ease;
}
.ch-hd.ch-hdxy { fill: rgba(34, 211, 238, .9); stroke: #fff; }
.ch-hd.on { fill: var(--ch-sel); stroke: #fff; }
.ch-hd.ch-hdhair { fill: rgba(255, 209, 102, .9); stroke: #fff; }
.ch-hd.ch-hdz { fill: var(--cyan, #22d3ee); stroke: #fff; stroke-width: 1.1; }
.ch-bone.ch-bonehair { stroke: rgba(255, 209, 102, .55); }
.ch-grab .ch-hit { cursor: grabbing; }
.ch-boxtag {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 999px; background: rgba(10, 6, 20, .6);
  font-size: 13px; font-weight: 700; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-boxtools { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.ch-boxbtn {
  min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ch-line2);
  background: rgba(10, 6, 20, .6); color: var(--text, #f7f2ff); font: 700 13px/1 var(--font-body, system-ui, sans-serif);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-boxbtn.on { background: rgba(34, 211, 238, .3); border-color: var(--cyan, #22d3ee); }
.ch-posebox .ch-boxtag { max-width: calc(100% - 150px); }
.ch-boxhint {
  position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: var(--dim, #8379a3); pointer-events: none;
}

/* ---- fine tune */
.ch-fine { border-radius: 14px; background: var(--ch-bg); box-shadow: inset 0 0 0 1px var(--ch-line); }
.ch-fine > summary {
  min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer;
  font-weight: 700; list-style: none;
}
.ch-fine > summary::-webkit-details-marker { display: none; }
.ch-fine > summary::after { content: '▾'; margin-left: auto; opacity: .7; }
.ch-fine[open] > summary::after { content: '▴'; }
.ch-sliders { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 12px 12px; }
.ch-grp { display: flex; flex-direction: column; gap: 2px; }
.ch-gh { font-weight: 700; font-size: 13px; color: var(--muted, #b8aed3); padding-top: 4px; }
.ch-sl { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 8px; min-height: 44px; }
.ch-sll { font-size: 13px; }
.ch-sl input[type="range"] { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--pink, #ff4f9a); }
.ch-sl output { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted, #b8aed3); }

/* ---- the timeline */
.ch-empty {
  margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--grad-soft, rgba(139, 92, 255, .2));
  font-size: 14px; line-height: 1.4;
}
.ch-empty[hidden] { display: none; }
.ch-tl {
  position: relative; width: 100%; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  border-radius: 14px; background: var(--ch-bg); box-shadow: inset 0 0 0 1px var(--ch-line);
}
.ch-tl-in { position: relative; min-width: 100%; padding-bottom: 2px; }
.ch-row { display: flex; align-items: stretch; height: 44px; border-top: 1px solid var(--ch-line); }
.ch-row.ch-rulerrow { border-top: 0; height: 44px; }
.ch-row.on > .ch-track { background-color: rgba(255, 79, 154, .08); }
.ch-lab {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--ch-lab); width: var(--ch-lab);
  display: flex; align-items: center; padding: 0 8px; border: 0; margin: 0;
  background: var(--ch-bg2); font-size: 13px; font-weight: 700; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  box-shadow: 1px 0 0 var(--ch-line2);
}
.ch-row.on > .ch-lab { color: var(--ch-sel); }
.ch-lab8 { font-size: 11px; color: var(--dim, #8379a3); cursor: default; }
.ch-track {
  position: relative; flex: 0 0 auto; height: 100%; cursor: pointer;
  background:
    linear-gradient(90deg, rgba(255, 79, 154, .55) 2px, transparent 2px) 0 0 / calc(var(--ch-beat) * 8) 100%,
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / var(--ch-beat) 100%,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) calc(var(--ch-beat) / 2) 0 / var(--ch-beat) 100%;
}
.ch-ruler { touch-action: none; background-color: rgba(0, 0, 0, .18); }
.ch-rb {
  position: absolute; bottom: 4px; transform: translateX(-50%); pointer-events: none;
  font: 700 12px/1 var(--font-display, "Baloo 2", system-ui, sans-serif); color: var(--muted, #b8aed3);
}
.ch-rb.ch-r8 { color: var(--text, #f7f2ff); }
.ch-rb i {
  position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%);
  font-style: normal; font-size: 10px; color: var(--pink, #ff4f9a); white-space: nowrap;
}
.ch-key {
  position: absolute; top: 0; width: 44px; height: 44px; margin: 0 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: grab; touch-action: none; z-index: 1;
}
.ch-key::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%) rotate(45deg); border-radius: 3px;
  background: var(--ch-key); box-shadow: 0 0 0 2px rgba(10, 6, 20, .7);
}
.ch-key.sel::before { width: 18px; height: 18px; background: var(--ch-sel); box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 209, 102, .7); }
.ch-key.alt::after {
  content: '⇆'; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  font-size: 10px; line-height: 1; color: var(--cyan, #22d3ee); pointer-events: none;
}
.ch-key:focus-visible { outline: 2px solid var(--cyan, #22d3ee); outline-offset: -6px; border-radius: 8px; }
.ch-phwrap { position: absolute; top: 0; bottom: 0; left: var(--ch-lab); pointer-events: none; z-index: 2; }
.ch-ph { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ch-ph); box-shadow: 0 0 6px var(--ch-ph); will-change: transform; }
.ch-addrow { padding: 6px 8px; border-top: 1px solid var(--ch-line); position: sticky; left: 0; }
.ch-addsel {
  min-height: 44px; max-width: 100%; padding: 0 12px; border-radius: 999px;
  border: 1px dashed var(--ch-line2); background: var(--ch-bg2); color: var(--text, #f7f2ff);
  font-size: 16px; /* 16 px: iOS does not zoom */
}

/* ---- tools */
.ch-tools { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-toolrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ch-tool {
  min-height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--ch-line2);
  background: var(--ch-bg2); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ch-tool.on { background: rgba(34, 211, 238, .25); border-color: var(--cyan, #22d3ee); }

/* ───────────── round 8 (docs/v-pop-round8.md #153, #155): parts, places, groups, effects, practice ───────────── */
.ch-slot:empty, .ch-slot[hidden] { display: none; }
.ch-ed [hidden] { display: none !important; }   /* chips and panels hidden by the editor stay hidden whatever their display */
.ch-body[hidden], .ch-nosec[hidden], .ch-movesonly[hidden], .ch-boxhost[hidden] { display: none; }
.ch-movesonly { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ch-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ch-hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted, #b8aed3); }
.ch-warn { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 93, 115, .16); font-size: 13px; line-height: 1.35; }
.ch-wait { margin: 0; padding: 14px; text-align: center; color: var(--muted, #b8aed3); }
.ch-btn.ch-go { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ch-toolrow.ch-row2, .ch-toolrow.ch-row8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-tool.ch-sq { min-width: 44px; padding: 0; }

/* the stage preview: the count-in and the part that is playing */
.ch-stagewrap { position: relative; width: 100%; min-width: 0; }
.ch-countin {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 70;
  font: 800 clamp(56px, 26vw, 150px)/1 var(--font-display, "Baloo 2", system-ui, sans-serif); color: #fff;
  text-shadow: 0 4px 0 rgba(139, 92, 255, .9), 0 0 28px rgba(255, 79, 154, .8); background: rgba(10, 6, 20, .28); border-radius: 18px;
}
.ch-countin[hidden], .ch-now[hidden] { display: none; }
.ch-now {
  position: absolute; left: 8px; top: 8px; z-index: 70; max-width: calc(100% - 16px); padding: 5px 10px; border-radius: 999px;
  background: rgba(10, 6, 20, .66); font-size: 13px; font-weight: 700; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-tl.ch-away .ch-ph { opacity: .25; }

/* the stage, while formations move the members: each one keeps her own floor shadow */
.ch-fm .stage-bg ellipse { display: none; }
.ch-fm .stage-mem::before {
  content: ''; position: absolute; left: 50%; bottom: -1.2%; width: 42%; height: 3.2%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none;
}

/* a song part with no dance of its own yet */
.ch-nosec-in {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px;
  background: var(--grad-soft, rgba(139, 92, 255, .2)); box-shadow: inset 0 0 0 1px var(--ch-line2);
}
.ch-nosec-in b { font: 700 16px/1.3 var(--font-display, "Baloo 2", system-ui, sans-serif); }
.ch-nosec-in p { margin: 0; font-size: 14px; line-height: 1.4; }
.ch-nosec-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* moves | places */
.ch-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ch-mode {
  min-height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--ch-line2); background: var(--ch-bg2);
  font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-mode.on { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }

/* who: the groups, with how many are in each at the playhead */
.ch-chip.ch-grp { border-style: dashed; }
.ch-chip.ch-grp.on { border-style: solid; }
.ch-n { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .25); font-size: 12px; text-align: center; }
.ch-cats { padding-bottom: 0; }
.ch-chip.ch-cat { min-height: 44px; }
.ch-chip[hidden] { display: none; }

/* the timeline: the 📍 places row, group rows, ripples, mirrored sides, canons */
.ch-row.ch-fmrow > .ch-track { background-color: rgba(34, 211, 238, .07); }
.ch-row.ch-fmrow.on > .ch-track { background-color: rgba(34, 211, 238, .16); }
.ch-row.ch-grow > .ch-lab { font-style: italic; }
.ch-fmk {
  position: absolute; top: 0; width: 44px; height: 44px; margin: 0 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: grab; touch-action: none; z-index: 1;
}
.ch-fmk::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%);
  border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cyan, #22d3ee); box-shadow: 0 0 0 2px rgba(10, 6, 20, .7);
}
.ch-fmk.sel::before { width: 20px; height: 20px; background: var(--ch-sel); box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 209, 102, .7); }
.ch-fmk:focus-visible { outline: 2px solid var(--cyan, #22d3ee); outline-offset: -6px; border-radius: 8px; }
.ch-key.rip::after {
  content: '〰'; position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
  font-size: 10px; line-height: 1; color: var(--cyan, #22d3ee); pointer-events: none;
}
.ch-key.mir::before { background: linear-gradient(90deg, var(--ch-key) 50%, var(--cyan, #22d3ee) 50%); }
.ch-canon {
  position: absolute; top: 3px; bottom: 3px; border-radius: 10px; pointer-events: none;
  background: rgba(255, 209, 102, .12); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .4);
  font-size: 10px; line-height: 1; padding: 3px 6px; color: var(--gold, #ffd166); white-space: nowrap; overflow: hidden;
}

/* 💿 the album songs (#155) */
.ch-alb { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: var(--ch-bg); box-shadow: inset 0 0 0 1px var(--ch-line); }
.ch-chip.ch-albsong { gap: 6px; }
.ch-chip.ch-need { border-color: rgba(255, 209, 102, .7); border-style: dashed; }
.ch-num { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .25); font-size: 12px; }
.ch-tick { font-size: 12px; opacity: .85; }
.ch-btn.ch-fill { align-self: flex-start; font-size: 15px; }

/* 🎵 the song parts */
.ch-secbar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-chip.ch-own { border-color: rgba(255, 79, 154, .6); }
.ch-dotmark { color: var(--pink, #ff4f9a); font-size: 11px; }
.ch-chip.on .ch-dotmark { color: #fff; }
.ch-btn.ch-sm2 { align-self: flex-start; font-size: 14px; }
.ch-map8 { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--ch-bg); box-shadow: inset 0 0 0 1px var(--ch-line); }
.ch-maprow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px 52px 44px 44px; align-items: center; gap: 6px; }
.ch-mapn { font-weight: 700; font-size: 13px; color: var(--muted, #b8aed3); text-align: center; }
.ch-mapsel {
  min-width: 0; min-height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--ch-line2);
  background: var(--ch-bg2); color: var(--text, #f7f2ff); font-size: 16px; /* 16 px: iOS does not zoom */
}
.ch-mapl { font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }

/* 🎬 practice */
.ch-prac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.ch-chip.ch-rec.on { background: var(--red, #ff5d73); border-color: transparent; color: #fff; }
.ch-rechint { flex: 1 1 100%; }

/* 📍 places on stage: the stage from above (the audience at the bottom) */
.ch-placesin { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-maphead { display: flex; flex-direction: column; gap: 2px; }
.ch-map {
  position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 220px; border-radius: 18px; overflow: hidden; touch-action: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16%),
    linear-gradient(180deg, var(--ch-bg2), rgba(255, 79, 154, .22));
  box-shadow: inset 0 0 0 1px var(--ch-line2), inset 0 -10px 0 rgba(255, 209, 102, .35);
}
.ch-mapback, .ch-mapfront {
  position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--dim, #8379a3);
  white-space: nowrap; pointer-events: none;
}
.ch-mapback { top: 6px; }
.ch-mapfront { bottom: 14px; color: var(--gold, #ffd166); }
.ch-dot {
  position: absolute; width: 44px; height: 58px; margin: 0; padding: 0; border: 0; background: none; cursor: grab;
  transform: translate(-50%, -50%); touch-action: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ch-dotfig {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block; flex: 0 0 40px;
  background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 2px var(--pink, #ff4f9a), 0 3px 8px rgba(0, 0, 0, .4);
}
.ch-dotfig svg { width: 100%; height: 100%; display: block; }
.ch-dot.on .ch-dotfig, .ch-dot:active .ch-dotfig { box-shadow: 0 0 0 3px var(--gold, #ffd166), 0 3px 10px rgba(0, 0, 0, .5); }
.ch-dotname {
  max-width: 64px; padding: 0 5px; border-radius: 999px; background: rgba(10, 6, 20, .66); font-size: 10px; line-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.ch-fms { padding-top: 2px; }

/* 🌊 the effects */
.ch-fx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-chip small { font-weight: 500; font-size: 11px; opacity: .8; }

/* ---- wider screens: the transport beside the stage, two columns of sliders */
@media (min-width: 700px) {
  .ch-top { flex-direction: row; align-items: flex-start; }
  .ch-stage { flex: 1 1 auto; }
  .ch-stagewrap { flex: 1 1 auto; }
  .ch-ctl { flex-direction: column; align-items: stretch; flex: 0 0 120px; }
  .ch-count { margin-left: 0; }
  .ch-sliders { grid-template-columns: 1fr 1fr; }
  .ch-toolrow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ch-map { max-width: 560px; }
}

/* ───────────── the Pose studio (posestudio.js) ───────────── */
.ps-studio {
  --ps-bg: var(--ink-2, #1e1830);
  --ps-bg2: var(--ink-3, #2a2242);
  --ps-line: var(--line, rgba(255, 255, 255, .08));
  --ps-line2: var(--line-2, rgba(255, 255, 255, .16));
  display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%; color: var(--text, #f7f2ff);
}
.ps-studio * { box-sizing: border-box; }
.ps-studio button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.ps-head { padding-right: 44px; }
.ps-title { margin: 0 0 2px; font: 800 22px/1.15 var(--font-display, "Baloo 2", system-ui, sans-serif); }
.ps-sub { margin: 0; font-size: 13.5px; color: var(--muted, #b8aed3); }
.ps-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* the live figure stays in view while the lists scroll under it */
.ps-figcol {
  position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  margin: 0 calc(-1 * var(--pad, 14px)); padding: 6px var(--pad, 14px) 8px;
  background: linear-gradient(180deg, var(--ps-bg) 88%, rgba(30, 24, 48, 0));
}
.ps-box { min-width: 0; }
.ps-box .ch-posebox { height: min(40vh, 340px); min-height: 250px; }
.ps-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-tool, .ps-btn {
  min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--ps-line2);
  background: var(--ps-bg2); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ps-tool:active, .ps-btn:active, .ps-chip:active { transform: scale(.96); }
.ps-tool:disabled { opacity: .4; cursor: default; }
.ps-pickcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ps-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ps-tab {
  min-height: 44px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--ps-line2); background: var(--ps-bg2);
  font-weight: 700; font-size: 13px; line-height: 1.1; cursor: pointer;
}
.ps-tab.on { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ps-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps-panel[hidden] { display: none; }
.ps-lab { font: 700 14px/1.2 var(--font-display, "Baloo 2", system-ui, sans-serif); color: var(--muted, #b8aed3); padding-top: 4px; }
.ps-strip {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 1px 4px; min-width: 0;
}
.ps-strip::-webkit-scrollbar { display: none; }
/* the long lists wrap into two scrolling rows, so more of them fit on a phone */
.ps-strip.ps-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; }
.ps-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--ps-line2); background: var(--ps-bg2);
  font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.ps-chip.on { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ps-chip.ps-minechip { border-color: rgba(255, 209, 102, .45); }
.ps-chip[hidden] { display: none; }
.ps-chip.ps-cat { font-size: 13px; padding: 0 12px; }
.ps-hand { width: 24px; height: 36px; flex: 0 0 24px; margin: 0 -2px 0 -6px; }
.ps-sliders { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ps-grp { display: flex; flex-direction: column; gap: 2px; }
.ps-gh { font-weight: 700; font-size: 13px; color: var(--muted, #b8aed3); padding-top: 4px; }
.ps-sl { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 8px; min-height: 44px; }
.ps-sll { font-size: 13px; }
.ps-sl input[type="range"] { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--pink, #ff4f9a); }
.ps-sl output { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted, #b8aed3); }
.ps-save {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px;
  background: var(--ps-bg2); box-shadow: inset 0 0 0 1px var(--ps-line);
}
.ps-namelab { font: 700 14px/1.2 var(--font-display, "Baloo 2", system-ui, sans-serif); }
.ps-name {
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ps-line2);
  background: var(--ps-bg); color: var(--text, #f7f2ff);
  font-size: 16px; /* 16 px: iOS does not zoom */
}
.ps-hint { margin: 0; font-size: 12.5px; color: var(--dim, #8379a3); }
.ps-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ps-row .ps-btn { flex: 1 1 0; min-width: 0; }
.ps-go { background: var(--grad, linear-gradient(120deg, #ff4f9a, #8b5cff 55%, #22d3ee)); border-color: transparent; color: #fff; }
.ps-del { color: var(--bad, #ff6b81); }

/* ---- wider screens: the figure beside the lists */
@media (min-width: 760px) {
  .ps-main { flex-direction: row; align-items: flex-start; }
  .ps-figcol { flex: 0 0 300px; margin: 0; padding: 0; background: none; top: 8px; }
  .ps-box .ch-posebox { height: min(60vh, 460px); }
  .ps-pickcol { flex: 1 1 auto; }
  .ps-sliders { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-hd { transition: none; }
  .ch-btn:active, .ps-tool:active, .ps-btn:active, .ps-chip:active { transform: none; }
}