/* ── 04 HARMONIZER ───────────────────────────────────────── */
#harmonizer { --accent: var(--h4); }
.roll-wrap { position: relative; aspect-ratio: 16 / 10; min-height: 300px; }
#roll { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: ns-resize; }
.roll-state {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: 24px;
  pointer-events: none;
  transition: opacity 0.4s;
}
.roll-state.off { opacity: 0; }
.roll-state .big { font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.01em; }
.roll-state .small { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.meter { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.meter i { width: 3px; height: 4px; border-radius: 2px; background: var(--paper-dim); transition: height 0.08s, background 0.2s; }
.meter.live i { background: var(--h4); }
.skeleton {
  display: inline-block; width: 140px; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(244,239,230,0.06), rgba(244,239,230,0.16), rgba(244,239,230,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.privacy { font-size: 13px; color: var(--paper-dim); display: flex; gap: 8px; align-items: flex-start; max-width: 520px; }
.privacy svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; }
@media (max-width: 560px) {
  .roll-wrap { aspect-ratio: 4 / 5; }
}

/* Landscape phone: the touch-action:none surfaces (03 crowd, 04 roll, 07 pad) are bounded
   by height at full width, so the page still scrolls above and below them. An explicit
   height, not max-height: with an aspect ratio a max-height would shrink the width instead */
@media (max-width: 960px) and (max-height: 560px) {
  .roll-wrap { aspect-ratio: auto; height: 60vh; height: 60svh; min-height: 200px; }
}

/* hl:own */
/* T3 (web spec 3.3, tool first): on a phone a square roll keeps the chord readout
   under it on the first screen (the extracted 4 / 5 above stays as it was) */
@media (max-width: 560px) {
  .roll-wrap { aspect-ratio: 1 / 1; }
}