/* Compose · Melody · the instrument face: the page's own marks (FACE §2a, §4 shared marks). The kit is face.css.
   The Melody picture keeps its violet lights with warm notes on them (the owner's look, 2026-09-30), drawn flat on the face's
   plain ground the way Duration and Percussion are (2026-10-06, the owner: "the neon and glowing is too much"): no glass, no
   glow, no gradient, hairline edges. The palette below re-tones the page's walker and land lights and its selection:
   violet = the shaping controls (the dial, the range), amber = the notes, a pale lilac ring = selected. */
.fp-melody {
  --walk-light: 178, 152, 255;            /* the shaping controls: the dial, its arms, the odds */
  --land-light: 132, 148, 255;            /* the range band and the land: a bluer violet, still one family */
  --mf-cream-rgb: 255, 214, 150;          /* a replayed note's ring (warm gold), the take's line */
  --mf-note: var(--accent);               /* a new note: warm amber on the violet ground */
  --mf-ink: var(--text);                  /* a handle's icon */
  --mf-handle: var(--surface2);           /* a handle: a flat chip, its edge in the walker's light */
  --mf-handle-edge: var(--ae-walk-60);
  --mf-rim: var(--face-base);             /* the disc's edge: a hairline */
  --mf-disc: color-mix(in srgb, var(--text) 4%, var(--ae-well));   /* the disc: a shade over the face ground, opaque (the roll runs under it), as Percussion's rings */
  --mf-roll-ground: color-mix(in srgb, var(--text) 2.5%, transparent);   /* Duration's plot ground */
  --ae-walk: rgb(var(--walk-light));
  --ae-walk-60: rgba(var(--walk-light), 0.6);
  --ae-walk-25: rgba(var(--walk-light), 0.25);
  --ae-walk-10: rgba(var(--walk-light), 0.10);
  --ae-land: rgb(var(--land-light));
  --ae-land-60: rgba(var(--land-light), 0.6);
  --ae-land-25: rgba(var(--land-light), 0.25);
  --ae-land-08: rgba(var(--land-light), 0.12);
  --mf-zone-line: rgba(214, 198, 255, 0.85);   /* a selected zone's outline */
  --face-sel: #efeaff;                    /* selected, in this page: a pale lilac (amber is the notes here) */
  --face-sel-60: rgba(239, 234, 255, 0.6);
}


/* the picture's marks: one fixed glyph per control; direction lives in the stem, never in the glyph */
.face .mk-body, .sel-label .mk-body, .ctl .lab .mk-body { stroke: var(--knob-ring); stroke-width: 2.5; }
.mk-walk .mk-body { fill: var(--ae-walk); }
.mk-home .mk-body { fill: var(--ae-home); }
.mk-cut { fill: var(--knob-ring); stroke: none; }
.mk-ring { fill: none; stroke: var(--knob-ring); stroke-width: 2; }
.face .mk.sel .mk-body { stroke: var(--face-sel); }

/* the land's rows, as buttons for the keyboard (a pointer reaches a row through the picture) */
.mf-ledges { position: absolute; inset: 0; pointer-events: none; }
.mf-ledge { position: absolute; display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 3px; pointer-events: none; }
.mf-ledge:focus { outline: none; }
.mf-ledge:focus-visible { outline: 2px solid var(--face-sel); outline-offset: -1px; }
.c-chord { color: var(--face-chord); }

/* the move dial's handles: a finger that starts on one is its own (touch-action none); the rest of the picture pans */
.mf-dials { position: absolute; inset: 0; pointer-events: none; }
.mf-dh { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; border-radius: 10px; -webkit-user-select: none; user-select: none; }
.mf-dh:active { cursor: grabbing; }
.mf-dh:focus { outline: none; }
.mf-dh:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 1px; }
.face svg [data-bar] { cursor: grab; }
.face svg .mf-btn { cursor: pointer; }

/* ── the dial: a flat disc, a lit rim, arms and nodes ── */
.md-disc { fill: var(--mf-disc); stroke: var(--mf-rim); stroke-width: 1; }
.md-tick { stroke: rgba(var(--walk-light), 0.26); stroke-width: 1.1; }
.md-tick.maj { stroke: rgba(var(--walk-light), 0.5); }
.md-arc { stroke: var(--ae-walk); stroke-width: 3.4; stroke-linecap: round; opacity: 0.85; }
.md-lab { fill: var(--ae-walk); }
.md-val { fill: var(--text2); }
.md-faint { fill: var(--face-quiet); }
.md-seg { fill: var(--ae-walk-25); }
.md-seg.on { fill: var(--ae-walk); }
.md-arm { stroke: var(--ae-walk); stroke-width: 3.4; stroke-linecap: round; opacity: 0.78; }
.md-arm.lit { opacity: 1; }
.md-lead { stroke: var(--ae-walk-60); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.md-odd { fill: var(--ae-walk); }
.md-hbody { fill: var(--mf-handle); stroke: var(--mf-handle-edge); stroke-width: 1.6; }
.md-h.sel .md-hbody { stroke: var(--face-sel); stroke-width: 2.6; }
.md-ico { stroke: var(--mf-ink); stroke-width: 1.9; stroke-linecap: round; fill: none; }
.md-ico.fill { fill: var(--mf-ink); stroke: none; }
.md-orb { fill: var(--face-seg); stroke: var(--ae-walk); stroke-width: 1.5; }
.md-dot { fill: var(--text); }
/* a dial zone lit: a soft wash; selected, an outline in the selection colour */
.md-zone { fill: rgba(var(--walk-light), 0.06); }
.md-zone.on { fill: rgba(var(--walk-light), 0.1); stroke: var(--mf-zone-line); stroke-width: 1.2; }
.md-zone-line { stroke: rgba(var(--walk-light), 0.55); stroke-width: 3; }
.md-zone-line.on { stroke: var(--mf-zone-line); }

/* ── the roll: the plain ground, warm notes, a lit band ── */
.mf-roll { fill: var(--mf-roll-ground); }
.mf-home-mark { fill: var(--ae-home); }
.mf-stable-dot { fill: var(--mf-note); }
.mf-shelf { stroke: var(--mf-note); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.mf-cycle { fill: var(--ae-walk); }
.mf-home-line { stroke: var(--ae-home); stroke-opacity: 0.55; stroke-dasharray: 2 4; }
.mf-home-line.lit { stroke-opacity: 1; stroke-width: 2; }
.mf-band { fill: rgba(var(--land-light), 0.2); }
.mf-band.lit { fill: rgba(var(--land-light), 0.27); }
.mf-band.on { stroke: var(--mf-zone-line); stroke-width: 1.2; }
.mf-under { fill: var(--face-quiet); }
.mf-under-key { fill: var(--ae-land); }
.mf-zn { fill: rgba(var(--land-light), 0.1); }
.mf-zn.on { fill: rgba(var(--land-light), 0.18); }
.mf-ring { fill: none; stroke: rgba(var(--walk-light), 0.55); stroke-width: 1.2; }
.mf-ring.on { stroke: var(--mf-zone-line); stroke-width: 1.4; }
.mf-replay { fill: rgba(var(--mf-cream-rgb), 0.2); }
.mf-odds-bg { fill: rgba(var(--land-light), 0.06); }
.mf-odds-bg.lit { fill: rgba(var(--walk-light), 0.09); }
.mf-odds-bg.on { stroke: var(--mf-zone-line); stroke-width: 1.3; }
.mf-bub { fill: var(--ae-walk); }
.mf-bub-old { fill: none; stroke: var(--ae-walk); stroke-width: 1; }
.mf-written { fill: none; stroke: rgb(var(--mf-cream-rgb)); stroke-width: 1.3; pointer-events: none; }
.mf-bar-hit { fill: transparent; }
.mf-grip { stroke: var(--mf-ink); stroke-opacity: 0.8; stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.mf-btn rect { fill: var(--mf-handle); stroke: var(--mf-handle-edge); stroke-width: 1.2; }
.mf-btn path { stroke: var(--mf-ink); }

/* the zone chips under the zone's title: which notes are stable, which is home */
.zone-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; }
.zone-chips-lab { font-size: 12px; color: var(--face-quiet); margin-right: 4px; }
.zc { position: relative; min-width: 40px; height: 32px; padding: 0 10px; font: 500 13px/1 var(--mono); color: var(--text2); background: var(--face-seg); border: 1px solid var(--face-deck-edge); border-radius: 10px; cursor: pointer; }
.zc::before { content: ""; position: absolute; inset: -6px -2px; }
.zc[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--mf-note) 20%, var(--face-seg)); border-color: var(--mf-note); }
.zc i { font-style: normal; font-size: 11px; margin-left: 4px; color: var(--ae-home); }
.zc:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 699px) { .zc { height: 44px; min-width: 44px; } .zc::before { inset: 0; } }

/* the keyboard's way into the zones: a strip that appears when it has focus */
.mf-zone-nav { position: absolute; left: 6px; right: 6px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--face-chip); border: 1px solid var(--face-deck-edge); opacity: 0; pointer-events: none; }
.mf-zone-nav:focus-within { opacity: 1; pointer-events: auto; }
.mf-zone-nav button { font: inherit; font-size: 12.5px; color: var(--text2); background: none; border: 1px solid transparent; border-radius: 999px; height: 28px; padding: 0 11px; cursor: pointer; white-space: nowrap; }
.mf-zone-nav button[aria-pressed="true"] { color: var(--text); border-color: var(--face-sel-60); }
.mf-zone-nav button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 1px; }

/* the range as a stepped gradient (owner, 2026-09-30): one tint per note row, strongest where the range favours it; the band itself
   keeps only its edges and a whisper of fill so the steps carry the slope. */
.mf-band { fill: rgba(var(--land-light), 0.04); }
.mf-band.lit { fill: rgba(var(--land-light), 0.06); }

/* the rim's gauges (owner, 2026-09-30): the overall chance of going up (upper rim) and down (lower rim), a lit band over a faint track */
.md-gauge-track { stroke: rgba(var(--walk-light), 0.3); stroke-width: 6; stroke-linecap: round; }
.md-gauge { stroke: var(--ae-walk); stroke-width: 6; stroke-linecap: round; }

/* the register strip (round 4): small and quiet beside the note names; brighter when the range is lit */
.mf-bar-hit { fill: transparent; }
.mf-grip { display: none; }
/* the dial (round 4): the lit rim, the bars on it, the stride marker, the arms and their plain chevrons */
.md-rim-track { stroke: rgba(var(--walk-light), 0.14); stroke-width: 1.4; }
.md-rim-on { stroke: var(--ae-walk-60); stroke-width: 5; stroke-linecap: butt; }
.md-tick-on { stroke: var(--ae-walk-60); stroke-width: 1.2; }
.md-dist { fill: rgba(var(--walk-light), 0.2); stroke: var(--ae-walk-60); stroke-width: 1.2; stroke-linejoin: round; }
.md-stride { fill: var(--mf-handle-edge); fill-opacity: 0.7; }
.md-stride-line { stroke: var(--face-sel); stroke-width: 1.2; stroke-opacity: 0.6; }
.md-arm { stroke: var(--ae-walk-60); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; opacity: 1; pointer-events: none; }
.md-arm.lit { stroke: var(--ae-walk); }
.md-head { fill: var(--ae-walk-60); stroke: none; pointer-events: none; }
.md-head.lit { fill: var(--ae-walk); }
.md-gauge, .md-gauge-track { display: none; }

/* round 5: the register strip is a miniature of the whole register: octave bands and labels, the range as the thumb, the window bracketed */

/* the pull strip (2026-10-01): a slim ramp along the top of the roll, free to firm, over eight phrases; the home light, calm */
.mf-pull-lab { fill: var(--ae-home); opacity: 0.8; }
.mf-pull-track { fill: rgba(var(--walk-light), 0.06); stroke: rgba(var(--walk-light), 0.16); stroke-width: 1; }
.mf-pull-fill { fill: var(--ae-home); fill-opacity: 0.38; stroke: none; }
.mf-pull-top { fill: none; stroke: var(--ae-home); stroke-opacity: 0.85; stroke-width: 1.2; stroke-linejoin: round; }
.mf-pull-tick { stroke: var(--ae-home); stroke-opacity: 0.35; stroke-width: 1; }
.mf-pull-tick.reset { stroke-opacity: 0.55; stroke-dasharray: 2 2; }
.mf-pull-now { fill: var(--face-sel); fill-opacity: 0.95; }
/* Pull curve is bipolar: its fill runs from straight (the middle) toward early or late */
.fp-melody .ctl[data-key="rootPullCurve"] .ruler .fill { left: calc(min(var(--f), 0.5) * 100%); width: calc(abs(var(--f) - 0.5) * 100%); }
.mf-pull-land { fill: var(--ae-home); font-weight: 600; paint-order: stroke; stroke: var(--ae-well); stroke-width: 3px; stroke-linejoin: round; }
.mf-pull-note { fill: var(--text2); paint-order: stroke; stroke: var(--mf-ink-back, rgba(10, 12, 20, 0.7)); stroke-width: 3px; stroke-linejoin: round; }
.mf-pull.lit .mf-pull-track { stroke: var(--ae-home); stroke-opacity: 0.6; }
.mf-pull.on .mf-pull-track { stroke: var(--face-sel); stroke-opacity: 0.9; stroke-width: 1.4; }
.mf-pull.lit .mf-pull-fill { fill-opacity: 0.55; }

/* the dial's nodes (2026-10-06, the owner: the handles were "chunky and messy" and handled "clunkily"): small points ON the
   display where each value is drawn, the ends of the lit arcs, the peak's tip, Repeat's row. Quiet at rest, full when the
   dial is under the hand, a hairline ring and a readout on the one being moved; hit areas 24 px a pointer, 44 px a finger (.mf-dh) */
.md-n { opacity: 0.6; transition: opacity 120ms ease; }
.md-dial.hot .md-n, .md-n.act, .md-n.sel { opacity: 1; }
.md-n .md-nb { fill: var(--ae-walk); stroke: var(--knob-ring); stroke-width: 1.5; }
.md-n .md-nh { fill: none; stroke: var(--ae-walk-60); stroke-width: 1.2; opacity: 0; transition: opacity 120ms ease; }
.md-n.act .md-nh, .md-n.sel .md-nh { opacity: 1; }
.md-n.sel .md-nb { stroke: var(--face-sel); stroke-width: 2; }
.md-stem { stroke: var(--ae-walk-60); stroke-width: 1; stroke-linecap: round; }
.md-ro rect { fill: var(--face-chip); stroke: var(--face-deck-edge); stroke-width: 1; }
.md-ro text { fill: var(--text); }
@media (prefers-reduced-motion: reduce) { .md-n, .md-n .md-nh { transition: none; } }