/* HOLD's editor (cx-env.js), the same on every device's page: its drawing, its steps' bars, a pattern to start from and
   its knobs (cx-knob.js where the page has it). A device sets its colours on it or on what holds it: --cxe-hue (the line,
   the bars and the knobs' arcs: a voice's own or the device's accent), --cxe-grid and --cxe-beat (the steps' lines and
   the beats'), --cxe-ghost (VARY's other hits), and --cxe-ink, --cxe-muted, --cxe-line, --cxe-well and --cxe-mono, each
   falling back to the frame's own (--cx-ink and the rest). Every word 10 px. */
.cxe,.cxe *{box-sizing:border-box}
.cxe{display:grid;gap:8px;min-width:0;color:var(--cxe-ink,var(--cx-ink,#ece7dc));--cxn-hue:var(--cxe-hue,#ff6326);--cxn-size:44px}
.cxe-shape{display:block;width:100%;height:96px;background:var(--cxe-well,var(--cx-well,#0c0b0a));border:1px solid var(--cxe-line,var(--cx-line,#34312c));border-radius:4px}
.cxe-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.cxe-name{font:700 10px/1 var(--cxe-mono,var(--cx-mono,monospace));letter-spacing:.12em}
.cxe-pattern{font:600 10px/1 var(--cxe-mono,var(--cx-mono,monospace));letter-spacing:.08em;text-transform:uppercase;background:var(--cxe-well,var(--cx-well,#0c0b0a));color:inherit;border:1px solid var(--cxe-line,var(--cx-line,#34312c));border-radius:3px;padding:5px 6px;min-height:28px}
.cxe-hint{font:10px/1.3 var(--cxe-mono,var(--cx-mono,monospace));color:var(--cxe-muted,var(--cx-muted,#a69f93));min-width:0}
.cxe-bars{display:grid;grid-template-columns:repeat(var(--cxe-count,8),minmax(0,1fr));gap:3px;height:56px;padding:6px;background:var(--cxe-well,var(--cx-well,#0c0b0a));border:1px solid var(--cxe-line,var(--cx-line,#34312c));border-radius:4px;touch-action:none;cursor:ns-resize;-webkit-user-select:none;user-select:none}
.cxe-bar{position:relative;border-radius:2px;background:rgba(255,255,255,.04);outline:none}
.cxe-bar i{position:absolute;left:0;right:0;bottom:0;border-radius:2px;background:color-mix(in srgb,var(--cxe-hue,#ff6326) 55%,transparent);border-top:2px solid var(--cxe-hue,#ff6326)}
.cxe-bar:focus-visible{outline:2px solid var(--cxe-hue,#ff6326);outline-offset:1px}
.cxe-flat .cxe-bars{opacity:.5}
.cxe-knobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px}
.cxe-knob{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.cxe-knob span{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px/1 var(--cxe-mono,var(--cx-mono,monospace));letter-spacing:.1em;color:var(--cxe-muted,var(--cx-muted,#a69f93));white-space:nowrap}
.cxe-knob output{font:600 10px/1 var(--cxe-mono,var(--cx-mono,monospace));letter-spacing:.02em;color:var(--cxe-ink,var(--cx-ink,#ece7dc));font-variant-numeric:tabular-nums;min-width:6ch;text-align:center}
/* a page with no knobs: its range inputs as they are */
.cxe-knob:not(.cxn) input{width:100%}
@media (pointer:coarse){.cxe-bars{height:72px}.cxe-pattern{min-height:36px}}