/* ── CREATORS: master rail, K, LEN, SING, critter, S ─────────────────────────
   SVGs use 0–100ish viewBoxes, so stroke widths and font sizes below are in
   drawing units and scale with the sheet. */

:is(#rail, #knob-k, #len, #sing, #critter, #knob-s) svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

:is(#knob-k, #len, #sing, #critter, #knob-s) .cr-ink {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#knob-k, #len, #sing, #critter, #knob-s) .cr-thin {
  stroke-width: 1.5;
}
:is(#knob-k, #len, #sing, #critter, #knob-s) :is(.cr-marker, .cr-hand) {
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
:is(#knob-k, #len, #sing, #critter, #knob-s) .cr-marker {
  font-family: var(--font-marker);
}
:is(#knob-k, #len, #sing, #critter, #knob-s) .cr-hand {
  font-family: var(--font-hand);
  font-weight: 700;
}

/* Shared: plain buttons that are just drawings, and little hand-written tags. */
:is(#len, #sing, #critter, #knob-s) :is(.len-up, .sing-btn, .critter-btn) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
:is(#len, #sing, #critter, #knob-s) :is(.len-up, .sing-btn, .critter-btn):hover {
  transform: rotate(-3deg) scale(1.04);
}
:is(#knob-k, #critter) :is(.k-scale, .critter-mood) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0.3em;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(11px, 1.15cqw, 19px);
  line-height: 1.1;
  color: var(--ink);
  text-decoration: underline wavy var(--creator);
  text-underline-offset: 0.2em;
  cursor: pointer;
  white-space: nowrap;
  transform-origin: center;
  transition: transform 0.15s;
}
:is(#knob-k, #critter) :is(.k-scale, .critter-mood):hover {
  transform: rotate(-4deg);
}
#sing .cr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── #rail: master fader ─────────────────────────────────────────────────── */
#rail .rail-slider {
  width: 100%;
  height: 100%;
  cursor: ns-resize;
  touch-action: none;
}
#rail .rail-slider[aria-orientation='horizontal'] {
  cursor: ew-resize;
}
#rail .rail-line {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--stroke);
  stroke-linecap: round;
}
#rail .rail-glow {
  fill: none;
  stroke: var(--creator);
  stroke-linecap: round;
  opacity: 0.35;
  filter: blur(2px);
}
#rail .rail-blob {
  fill: var(--ink);
  stroke: var(--line);
  stroke-width: 1px;
}
#rail .rail-slider:hover .rail-blob,
#rail .rail-slider:focus-visible .rail-blob {
  fill: var(--creator);
}

/* ── #knob-k: key ────────────────────────────────────────────────────────── */
#knob-k {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#knob-k .k-dial {
  flex: 1;
  min-height: 0;
  width: 100%;
  cursor: ns-resize;
  touch-action: none;
  border-radius: 50%;
}
#knob-k .k-face {
  fill: var(--paper);
}
#knob-k .k-back {
  stroke: var(--ink-soft);
}
#knob-k .k-spinner {
  transform-box: view-box;
  transform-origin: 47px 47px;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
#knob-k .k-pointer {
  fill: var(--creator);
  stroke: var(--line);
  stroke-width: 1.5;
}
#knob-k .k-letter {
  font-size: 19px;
}
#knob-k .k-note {
  font-size: 30px;
  fill: var(--creator);
  transform-box: fill-box;
  transform-origin: center;
}
#knob-k .k-dial:hover .k-face {
  fill: var(--paper-2);
}

/* ── #knob-s: tempo, swing, play ─────────────────────────────────────────── */
#knob-s {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2cqw;
}
#knob-s .s-dial {
  flex: 1;
  min-height: 0;
  width: 100%;
  cursor: ns-resize;
  touch-action: none;
  border-radius: 50%;
}
#knob-s .s-face {
  fill: var(--paper);
  transform-box: fill-box;
  transform-origin: center;
}
#knob-s .s-back {
  stroke: var(--ink-soft);
}
#knob-s .s-dial:hover .s-face {
  fill: var(--paper-2);
}
#knob-s .s-arc {
  fill: none;
  stroke: var(--creator);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.85;
}
#knob-s .s-letter {
  font-size: 30px;
}
#knob-s .s-bpm {
  font-size: 15px;
  fill: var(--ink-soft);
}
#knob-s .s-row {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}
#knob-s .s-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-marker);
  font-size: clamp(9px, 0.85cqw, 14px);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 0.15em 0.5em 0.15em 0.35em;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
#knob-s .s-play-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
#knob-s .s-icon {
  width: 1.2em;
  height: 1.2em;
}
#knob-s :is(.s-play, .s-stop) {
  fill: var(--creator);
  stroke: var(--line);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
#knob-s .s-stop,
#knob-s.is-running .s-play {
  display: none;
}
#knob-s.is-running .s-stop {
  display: inline;
}
#knob-s .s-swing {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: ns-resize;
  touch-action: none;
  line-height: 1;
}
#knob-s .s-swing-label {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(10px, 1cqw, 17px);
}
#knob-s .s-squiggle-svg {
  width: 2.6cqw;
  height: 0.8cqw;
}
#knob-s .s-squiggle {
  stroke: var(--creator);
}

/* ── #len: loop length ───────────────────────────────────────────────────── */
#len .len-slider {
  position: absolute;
  inset: 0;
  cursor: ns-resize;
  touch-action: none;
}
#len .len-up {
  position: absolute;
  left: 15.3%;
  top: 0;
  width: 20%;
  height: 32%;
}
#len .len-up:hover .cr-ink {
  stroke: var(--creator);
}
#len :is(.len-box, .len-box-back) {
  fill: var(--paper);
}
#len .len-value {
  font-size: 30px;
  fill: var(--creator);
  transform-box: fill-box;
  transform-origin: center;
}
#len .len-tick {
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linecap: round;
}
#len .len-tick.is-beat {
  stroke-width: 1.6;
}
#len .len-spinner {
  transform-box: view-box;
  transform-origin: 38px 59px;
}
#len .len-head {
  fill: var(--ink-soft);
  stroke: var(--line);
  stroke-width: 1;
}
#len.is-running .len-head {
  fill: var(--creator);
}
#len .len-tag {
  fill: var(--paper);
}
#len .len-tag-text {
  font-size: 13px;
}
#len .len-slider:hover .len-box {
  fill: var(--paper-2);
}

/* ── #sing: microphone face ──────────────────────────────────────────────── */
#sing .sing,
#sing .sing-btn {
  width: 100%;
  height: 100%;
}
#sing .sing-face {
  fill: var(--paper);
}
#sing .sing-word {
  font-size: 15px;
  fill: var(--ink-soft);
}
#sing .sing-plug {
  fill: var(--paper);
  stroke-width: 1.8;
}
#sing :is(.sing-eyes-open, .sing-eyes-closed, .sing-eyes-sad, .sing-tear, .sing-mouth-o) {
  display: none;
}
#sing [data-state='off'] .sing-eyes-closed,
#sing [data-state='asking'] .sing-eyes-closed,
#sing [data-state='live'] :is(.sing-eyes-open, .sing-mouth-o),
#sing [data-state='muted'] .sing-eyes-open,
#sing [data-state='denied'] :is(.sing-eyes-sad, .sing-tear) {
  display: inline;
}
#sing .sing-eye {
  fill: var(--creator);
  fill-opacity: calc(0.15 + var(--sing-level, 0) * 0.85);
  filter: drop-shadow(0 0 calc(var(--sing-level, 0) * 6px) var(--creator));
}
#sing [data-state='muted'] .sing-eye {
  fill-opacity: 0.1;
  filter: none;
}
#sing .sing-mouth-o {
  fill: var(--ink);
}
#sing [data-state='live'] .sing-cable {
  stroke: var(--creator);
}
#sing [data-state='denied'] .sing-face {
  stroke: var(--ink-soft);
}
#sing .sing-tear {
  fill: var(--sky);
}
#sing [data-state='asking'] .sing-face {
  animation: cr-tremble 0.25s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cr-tremble {
  to {
    transform: rotate(3deg);
  }
}

/* ── #critter: generative note bot ───────────────────────────────────────── */
#critter .critter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#critter .critter-btn {
  flex: 1;
  min-height: 0;
  width: 100%;
}
#critter :is(.critter-petal, .critter-centre) {
  fill: var(--paper);
}
#critter .critter-petals {
  transform-box: view-box;
  transform-origin: 50px 40px;
}
#critter .is-awake .critter-petal {
  fill: var(--glow);
}
#critter .is-awake .critter-petals {
  animation: cr-spin 16s linear infinite;
}
#critter .is-awake[data-mood='sleepy'] .critter-petals {
  animation-duration: 40s;
}
#critter .is-awake[data-mood='hyper'] .critter-petals {
  animation-duration: 5s;
}
#critter .critter-eye {
  fill: var(--ink);
}
#critter .critter-eyes-open {
  display: none;
}
#critter .is-awake:not([data-mood='sleepy']) .critter-eyes-open {
  display: inline;
}
#critter .is-awake:not([data-mood='sleepy']) .critter-eyes-shut {
  display: none;
}
#critter .critter:not(.is-awake) .critter-btn {
  opacity: 0.85;
}
@keyframes cr-spin {
  to {
    transform: rotate(360deg);
  }
}