/* Page and faceplate styles.
   --u is the size of one grid cell and --p one hundredth of it: every part of the instrument scales from them.
   The stage has its own frame (--sw x --sh with insets --il --ir --it --ib) so the same layout serves the
   normal case and portrait phones, where the stage is turned 90 degrees.
   The geometry (--dw --dh --cols --rows --bezel --strip --tab) and the hardware colours (--hw-* --print --led
   --red) are set from layout.js and constants.js by faceplate.js; the values here are only the fallback. */
:root {
  --dw: 18.53; --dh: 6.54; --cols: 17; --rows: 6; --bezel: .27; --strip: 1.08; --tab: .18;
  --hw-body: #1a1b1d; --hw-bed: #0e0f10; --hw-cell: #1c1d20; --hw-cap: #242528; --print: #e8e8e4; --led: #fff; --red: #ff3b1d;
  --m: 8px; --bar: 30px;                   /* page margin, toolbar height */
  --sw: 100vw; --sh: 100vh;
  --il: env(safe-area-inset-left, 0px); --ir: env(safe-area-inset-right, 0px);
  --it: env(safe-area-inset-top, 0px); --ib: env(safe-area-inset-bottom, 0px);
  --aw: calc(var(--sw) - var(--il) - var(--ir) - 2 * var(--m));
  --ah: calc(var(--sh) - var(--it) - var(--ib) - 2 * var(--m) - var(--bar));
  --u: min(calc(var(--aw) / var(--dw)), calc(var(--ah) / var(--dh)));
  --p: calc(var(--u) / 100);

  --page: #d8d8d6; --chrome: #3b3d40; --panel: #f4f2ef; --panel-ink: #2c2e31;
  --gap: #0a0b0c;
  color-scheme: light dark;
}
@supports (height: 100dvh) { :root { --sw: 100dvw; --sh: 100dvh; } }
html.rot {
  --sw: 100vh; --sh: 100vw;
  --il: env(safe-area-inset-top, 0px); --ir: env(safe-area-inset-bottom, 0px);
  --it: env(safe-area-inset-right, 0px); --ib: env(safe-area-inset-left, 0px);
}
@supports (height: 100dvh) { html.rot { --sw: 100dvh; --sh: 100dvw; } }
html.fill { --u: calc(var(--ah) / var(--dh)); }
@media (pointer: coarse) { :root { --bar: 34px; } }
@media (prefers-color-scheme: dark) { :root { --page: #0b0b0c; --chrome: #c9cbce; --panel: #232527; --panel-ink: #e4e2df; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--page); }
body { position: fixed; inset: 0; font: 300 13px/1.45 system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--panel-ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }

#stage { position: fixed; left: 0; top: 0; width: var(--sw); height: var(--sh);
  padding: calc(var(--it) + var(--m)) calc(var(--ir) + var(--m)) calc(var(--ib) + var(--m)) calc(var(--il) + var(--m));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar) minmax(0, 1fr); touch-action: none; }
html.rot #stage { transform-origin: 0 0; transform: translateX(var(--sh)) rotate(90deg); }
#view { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }
html.fill #view { justify-items: start; clip-path: inset(-60px 0); }
#device { position: relative; flex: none; width: calc(var(--u) * var(--dw)); height: calc(var(--u) * var(--dh)); touch-action: none; }
html.fill #device { transform: translate3d(var(--pan, 0px), 0, 0); }

/* ───────────── toolbar ───────────── */
#toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; height: var(--bar); padding-bottom: 4px; color: var(--chrome); }
.tb { flex: none; width: calc(var(--bar) - 4px); height: calc(var(--bar) - 4px); padding: 5px; border: 0; border-radius: 50%; background: none; color: inherit;
  opacity: .5; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
.tb svg { display: block; width: 100%; height: 100%; }
.tb:hover, .tb:focus-visible { opacity: 1; background: rgba(127, 127, 127, .2); outline: none; }
.tb-zoom { display: none; }
.tb-update { opacity: 1; color: #e8590c; }
.tb[hidden] { display: none; }
html.can-zoom .tb-zoom { display: block; }
/* word buttons on the left: hold, and the layer of the computer keyboard */
.tb-left { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
.tbx { flex: none; height: calc(var(--bar) - 8px); padding: 0 10px; border: 1px solid rgba(127, 127, 127, .45); border-radius: 999px; background: none; color: inherit;
  font: 500 11px/1 system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .03em; white-space: nowrap; opacity: .72;
  cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
.tbx:hover, .tbx:focus-visible { opacity: 1; outline: none; }
.tbx b { font-weight: 600; }
.tbx[aria-pressed="true"] { background: var(--chrome); border-color: var(--chrome); color: var(--page); opacity: 1; }
.tb-hold b:empty { display: none; }
.tb-hold b { display: inline-block; min-width: 1.5em; margin: 0 -4px 0 3px; padding: 2px 4px; border-radius: 999px; background: var(--page); color: var(--chrome); text-align: center; }
@media (hover: none) and (pointer: coarse) { .tb-layer { display: none; } }
.pan { display: none; position: relative; flex: 1 1 auto; max-width: 280px; height: calc(var(--bar) - 10px); margin: 0 6px; border-radius: 6px;
  background: rgba(127, 127, 127, .2); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); cursor: ew-resize; touch-action: none; }
html.fill .pan { display: block; }
.pan-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--chrome); opacity: .45; pointer-events: none; }
.pan.drag .pan-thumb { opacity: .7; }

/* keyboard focus on a control of the instrument; the text for screen readers is not shown */
#device [tabindex]:focus { outline: none; }
#device [tabindex]:focus-visible { outline: max(2px, calc(var(--p) * 3)) solid #4d9bff; outline-offset: calc(var(--p) * -5); }
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────────── cheat sheet ───────────── */
.sheet { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .45); }
.sheet[hidden] { display: none; }
.sheet-panel { display: flex; flex-direction: column; max-width: min(660px, 100%); max-height: calc(var(--sh) - 24px); border-radius: 12px; background: var(--panel); color: var(--panel-ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.sheet-panel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 18px; }
.sheet-panel h2 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.sheet-close { width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; touch-action: manipulation; }
.sheet-close:hover { background: rgba(127, 127, 127, .2); }
.sheet-close svg { display: block; width: 100%; height: 100%; }
.sheet-body { min-height: 0; overflow: auto; padding: 0 18px 14px; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.rot .sheet-body { touch-action: pan-x; }   /* the stage is turned: the list scrolls along the screen's x axis */
.sheet-body table { border-collapse: collapse; width: 100%; }
.sheet-body td { padding: 4px 0; vertical-align: middle; border-top: 1px solid rgba(127, 127, 127, .22); }
.sheet-body tr:first-child td { border-top: 0; }
.sheet-body td:first-child { padding-right: 16px; white-space: nowrap; }
.sheet-body p { margin: 10px 0 0; opacity: .75; }
.sheet-body b { font-weight: 600; }
.sheet-body kbd { display: inline-block; min-width: 1.75em; margin-right: 2px; padding: 1px 5px; border: 1px solid rgba(127, 127, 127, .55); border-bottom-width: 2px; border-radius: 4px;
  font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.sheet-body .sep { display: inline-block; width: 8px; }

/* ───────────── body: black anodized aluminium, the chamfered edge catching the light ───────────── */
.body { position: absolute; left: 0; top: 0; display: flex; width: calc(var(--u) * (var(--dw) - var(--tab))); height: 100%;
  padding: calc(var(--u) * var(--bezel)) 0 0 calc(var(--u) * var(--bezel)); border-radius: calc(var(--p) * 15);
  background-color: var(--hw-body);
  background-image: var(--grain-metal, none),
    linear-gradient(180deg, rgba(200, 210, 222, .2) 0%, rgba(200, 210, 222, .17) 3.4%, rgba(255, 255, 255, .055) 5.2%, rgba(255, 255, 255, .03) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .12) 100%);
  background-size: var(--grain-size, 160px) var(--grain-size, 160px), auto, auto;
  box-shadow:
    inset 0 0 0 calc(var(--p) * .9) rgba(150, 162, 172, .5),
    inset 0 calc(var(--p) * 2.6) calc(var(--p) * 1.2) rgba(176, 188, 198, .5),
    inset calc(var(--p) * 1.6) 0 calc(var(--p) * 1.2) rgba(150, 162, 172, .18),
    inset calc(var(--p) * -1.2) calc(var(--p) * -1.6) calc(var(--p) * 1.6) rgba(0, 0, 0, .7),
    0 calc(var(--p) * 4) calc(var(--p) * 6) rgba(0, 0, 0, .38),
    0 calc(var(--p) * 11) calc(var(--p) * 24) rgba(0, 0, 0, .3); }
/* the switch on the end face */
.tab { position: absolute; left: calc(var(--u) * (var(--dw) - var(--tab)) - var(--p) * 1.5); top: calc(var(--u) * (var(--bezel) + 4.6)); width: calc(var(--u) * var(--tab) + var(--p) * 1.5); height: calc(var(--p) * 76);
  border-radius: 0 calc(var(--p) * 4.5) calc(var(--p) * 4.5) 0; background: linear-gradient(90deg, #8c8d8f 0%, #d9d9d6 34%, #e9e9e6 100%);
  box-shadow: inset 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .2), inset 0 calc(var(--p) * 1.2) calc(var(--p) * 1) rgba(255, 255, 255, .6),
    calc(var(--p) * 1) calc(var(--p) * 2.4) calc(var(--p) * 2.6) rgba(0, 0, 0, .35); }

.bed { position: relative; flex: none; width: calc(var(--u) * var(--cols)); height: calc(var(--u) * var(--rows));
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  background: var(--gap); border-radius: calc(var(--p) * 5);
  box-shadow: 0 0 0 calc(var(--p) * 1.4) var(--gap),
    calc(var(--p) * .8) calc(var(--p) * 1) calc(var(--p) * .8) calc(var(--p) * 1.4) rgba(255, 255, 255, .09); }
.tile { position: relative; min-width: 0; min-height: 0; margin: calc(var(--p) * 1.3); border-radius: calc(var(--p) * 3.6);
  display: grid; place-items: center; background-color: var(--hw-cell);
  /* the light comes from the rear: --veil (set per row by faceplate.js) lifts the plate towards the photo's grays */
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .08) 100%),
    linear-gradient(rgba(255, 255, 255, var(--veil, .1)), rgba(255, 255, 255, var(--veil, .1)));
  box-shadow: inset calc(var(--p) * .5) calc(var(--p) * .6) calc(var(--p) * .5) rgba(255, 255, 255, .09), inset calc(var(--p) * -.5) calc(var(--p) * -.7) calc(var(--p) * .8) rgba(0, 0, 0, .5); }
/* scene lighting: falls off towards the right and the front; a faint speckle for the matte surface */
.shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background-image: var(--grain-plastic, none), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .04) 40%, rgba(0, 0, 0, .14) 100%);
  background-size: var(--grain-size, 160px) var(--grain-size, 160px), auto, auto; }

/* ───────────── round keys: a low cap in a shallow recess ───────────── */
.key { cursor: pointer; --cap-d: 65; }
.key::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--p) * (var(--cap-d) + 14)); height: calc(var(--p) * (var(--cap-d) + 14));
  margin: calc(var(--p) * (var(--cap-d) + 14) / -2 + var(--p) * .7) 0 0 calc(var(--p) * (var(--cap-d) + 14) / -2 + var(--p) * .4); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #050506 0%, #070708 84%, rgba(7, 7, 8, .7) 89%, rgba(7, 7, 8, .28) 95%, rgba(7, 7, 8, 0) 100%); }
.cap { position: relative; z-index: 1; width: calc(var(--p) * var(--cap-d)); height: calc(var(--p) * var(--cap-d)); border-radius: 50%; display: grid; place-items: center;
  color: var(--print); --cap: #2f3033;
  background-color: var(--hw-cap);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .075) 46%, rgba(255, 255, 255, .01) 100%);
  box-shadow:
    inset calc(var(--p) * .7) calc(var(--p) * .9) calc(var(--p) * .8) rgba(255, 255, 255, .16),
    inset calc(var(--p) * -.7) calc(var(--p) * -1) calc(var(--p) * 1.2) rgba(0, 0, 0, .45),
    calc(var(--p) * 1) calc(var(--p) * 1.8) calc(var(--p) * 2.4) rgba(0, 0, 0, .7);
  transition: transform .05s ease-out, box-shadow .05s ease-out, filter .05s ease-out; }
.cap svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* pressed (or held): the cap sinks into its recess */
.key.down .cap { transform: translate(calc(var(--p) * .3), calc(var(--p) * 1)) scale(.975); filter: brightness(.82);
  box-shadow:
    inset calc(var(--p) * 1) calc(var(--p) * 1.4) calc(var(--p) * 1.8) rgba(0, 0, 0, .6),
    inset calc(var(--p) * -.5) calc(var(--p) * -.6) calc(var(--p) * .8) rgba(255, 255, 255, .07),
    calc(var(--p) * .3) calc(var(--p) * .5) calc(var(--p) * .8) rgba(0, 0, 0, .7); }
/* held with the toolbar's hold button: stays down, with a dashed circle around it */
.key.held .cap { outline: max(1px, calc(var(--p) * 1.5)) dashed rgba(255, 255, 255, .8); outline-offset: calc(var(--p) * 3.2); }
.key.step.held .cap { outline-color: rgba(255, 255, 255, .95); }

/* lights: the level is --lit (0..1), the colour --lc */
.lamp { position: absolute; left: 50%; top: 8.5%; width: 15%; height: 15%; margin-left: -7.5%; border-radius: 50%; background: #08080a;
  box-shadow: inset 0 calc(var(--p) * .6) calc(var(--p) * .9) #000, 0 calc(var(--p) * .5) 0 rgba(255, 255, 255, .09); }
.lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lc, var(--led)); opacity: var(--lit, 0);
  box-shadow: 0 0 calc(var(--p) * 2.4) calc(var(--p) * .7) var(--lc, var(--led)), inset 0 0 calc(var(--p) * .8) rgba(255, 255, 255, .9); transition: opacity .04s linear; }
.ring { position: absolute; left: 50%; top: 50%; width: calc(var(--p) * 76); height: calc(var(--p) * 76); margin: calc(var(--p) * -38) 0 0 calc(var(--p) * -38); border-radius: 50%;
  border: max(1px, calc(var(--p) * 1.3)) solid var(--lc, var(--led)); opacity: calc(var(--lit, 0) * .62); pointer-events: none; z-index: 2;
  box-shadow: 0 0 calc(var(--p) * 2.5) var(--lc, var(--led)); transition: opacity .06s linear; }
.glow { opacity: var(--lit, 0); color: var(--lc, var(--led)); transition: opacity .06s linear; }
.key-rec .rec-dot { fill: var(--red); }
.key-rec .glow { fill: #ff7a5c; color: #ff7a5c; filter: drop-shadow(0 0 calc(var(--p) * 2.2) var(--red)) drop-shadow(0 0 calc(var(--p) * 5) var(--red)); }
.key-play .glow { filter: drop-shadow(0 0 calc(var(--p) * 2.4) var(--lc, var(--led))); }

/* step keys: cell and cap share one shade, fading from black to white in pairs */
.key.step { --cap-d: 68; background-color: var(--sc); }
.key.step::before { background: radial-gradient(circle, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .36) 84%, rgba(0, 0, 0, .16) 91%, rgba(0, 0, 0, 0) 100%); }
.key.step .cap { background-color: var(--sc);
  background-image: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .1) 45%, rgba(0, 0, 0, .06) 100%);
  box-shadow:
    inset calc(var(--p) * .7) calc(var(--p) * .9) calc(var(--p) * .9) rgba(255, 255, 255, .28),
    inset calc(var(--p) * -.8) calc(var(--p) * -1.1) calc(var(--p) * 1.6) rgba(0, 0, 0, .3),
    calc(var(--p) * 1.3) calc(var(--p) * 2.2) calc(var(--p) * 2.8) rgba(0, 0, 0, .55); }
.key.step .lamp { top: 9.5%; width: 14%; height: 14%; margin-left: -7%; box-shadow: inset 0 calc(var(--p) * .6) calc(var(--p) * .9) #000, 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .25); }

/* accidentals: a cap on a wider plate, centred between two naturals */
.blackrow { display: grid; min-width: 0; }
.acc { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; }
.num { position: absolute; left: calc(var(--p) * 5); top: calc(var(--p) * 9); width: calc(var(--p) * 34); color: var(--print); opacity: .92; pointer-events: none; }
.num svg { display: block; width: 100%; height: auto; }

/* speaker */
.speaker svg { display: block; width: 100%; height: 100%; }
.spk-rim { fill: rgba(255, 255, 255, .16); }
.spk-hole { fill: #020203; }

/* volume: a small knob at the left of a plain plate */
.volume { place-items: center start; }
.vol-hit { position: relative; z-index: 1; width: 50%; height: 100%; display: grid; place-items: center; cursor: ns-resize; }
.knob { width: calc(var(--p) * 70); height: calc(var(--p) * 70); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 34%, #3a3b3f 0%, #1b1c1e 58%, #0c0c0d 100%);
  box-shadow:
    0 0 0 calc(var(--p) * .6) rgba(0, 0, 0, .8), 0 0 0 calc(var(--p) * 1.5) rgba(255, 255, 255, .06),
    calc(var(--p) * 4) calc(var(--p) * 5) calc(var(--p) * 5) rgba(0, 0, 0, .55),
    calc(var(--p) * 10) calc(var(--p) * 12) calc(var(--p) * 12) rgba(0, 0, 0, .35); }
.knob-top { position: relative; width: 76%; height: 76%; border-radius: 50%; background: linear-gradient(150deg, #2f3033 0%, #1c1d1f 55%, #121213 100%);
  box-shadow: 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .7), inset calc(var(--p) * .7) calc(var(--p) * .9) calc(var(--p) * .9) rgba(255, 255, 255, .12);
  transform: rotate(var(--a, 30deg)); transition: transform .08s linear; }
.knob-top i { position: absolute; left: 50%; top: 13%; width: 13%; height: 13%; margin-left: -6.5%; border-radius: 50%;
  background: #050506; box-shadow: 0 calc(var(--p) * .5) 0 rgba(255, 255, 255, .12); }
.vol-hit.down .knob-top { filter: brightness(1.25); }

/* display: black glass with the lit panel inside */
.screen { z-index: 2; background: #030304; border-radius: calc(var(--p) * 5); cursor: zoom-in;
  box-shadow: inset 0 0 0 calc(var(--p) * .7) #17181a, inset 0 0 calc(var(--p) * 5) #000; }
.screen canvas { display: block; width: calc(var(--p) * 360); height: calc(var(--p) * 166.5); border-radius: calc(var(--p) * 2.4); }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .02) 100%);
  box-shadow: inset calc(var(--p) * .6) calc(var(--p) * .8) 0 rgba(255, 255, 255, .05); }
/* magnified: the one canvas grows into a large picture over the keys below (a copy keeps the small window alive).
   It takes no touches, so keys, encoders and the display window itself stay where they were; it sits under the
   top row so the encoders remain in view while they are turned. */
.screen .ghost { display: none; width: calc(var(--p) * 360); height: calc(var(--p) * 166.5); border-radius: calc(var(--p) * 2.4); }
.screen.mag { z-index: 6; cursor: zoom-out; }
.screen.mag .ghost { display: block; opacity: .9; }
.screen.mag canvas#display { position: absolute; left: calc(var(--p) * -191); top: calc(var(--p) * 224); width: calc(var(--p) * 780); height: calc(var(--p) * 360.7);
  margin: 0; pointer-events: none; border-radius: calc(var(--p) * 5); animation: mag-in .16s ease-out;
  box-shadow: 0 0 0 calc(var(--p) * 7) #030304, 0 0 0 calc(var(--p) * 8) #2a2c2f, 0 calc(var(--p) * 10) calc(var(--p) * 30) calc(var(--p) * 6) rgba(0, 0, 0, .65); }
@keyframes mag-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .screen.mag canvas#display { animation: none; } }
.screen.mag::after { display: none; }
.tb.on { opacity: 1; background: rgba(127, 127, 127, .25); }

/* encoders: a flat dish marked by a fine groove, a dark collar, a cap in one of four grays */
.encoder { cursor: grab; }
.enc-dish { width: calc(var(--p) * 117); height: calc(var(--p) * 117); border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 max(1px, calc(var(--p) * 1)) rgba(0, 0, 0, .8), inset 0 0 0 calc(var(--p) * 1.9) rgba(255, 255, 255, .06), 0 0 0 calc(var(--p) * .7) rgba(255, 255, 255, .1); }
.enc-knob { width: calc(var(--p) * 63); height: calc(var(--p) * 63); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 34%, #36373b 0%, #1a1b1d 60%, #0b0b0c 100%);
  box-shadow:
    0 0 0 calc(var(--p) * .6) rgba(0, 0, 0, .85),
    calc(var(--p) * 4) calc(var(--p) * 5) calc(var(--p) * 5) rgba(0, 0, 0, .55),
    calc(var(--p) * 11) calc(var(--p) * 13) calc(var(--p) * 12) rgba(0, 0, 0, .42),
    calc(var(--p) * 20) calc(var(--p) * 24) calc(var(--p) * 22) rgba(0, 0, 0, .26),
    inset calc(var(--p) * .8) calc(var(--p) * 1) calc(var(--p) * 1) rgba(255, 255, 255, .12);
  transition: transform .06s ease-out; }
.enc-cap { position: relative; width: 80%; height: 80%; border-radius: 50%; background-color: var(--c);
  background-image: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .3) 100%);
  box-shadow: 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .5), calc(var(--p) * .8) calc(var(--p) * 1.4) calc(var(--p) * 1.8) rgba(0, 0, 0, .6),
    inset calc(var(--p) * .7) calc(var(--p) * .9) calc(var(--p) * 1) rgba(255, 255, 255, .2), inset calc(var(--p) * -.9) calc(var(--p) * -1.2) calc(var(--p) * 1.8) rgba(0, 0, 0, .28); }
/* the device's caps are plain; a faint mark shows the turn (a browser aid) */
.enc-mark { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--a, 0deg)); transition: transform .08s linear; }
.enc-mark::after { content: ""; position: absolute; left: 50%; top: 10%; width: 7%; height: 7%; margin-left: -3.5%; border-radius: 50%; background: rgba(0, 0, 0, .3);
  box-shadow: 0 calc(var(--p) * .4) 0 rgba(255, 255, 255, .16); }
.encoder.down .enc-knob { transform: scale(.955); }
.encoder.down { cursor: grabbing; }

/* right strip: microphone, level meter, our marking */
.strip { position: relative; flex: none; width: calc(var(--u) * var(--strip)); height: calc(var(--u) * var(--rows)); }
.mic-hole { position: absolute; left: calc(50% - var(--p) * 2.2); top: calc(var(--p) * 48); width: calc(var(--p) * 4.4); height: calc(var(--p) * 4.4); border-radius: 50%;
  background: #020203; box-shadow: calc(var(--p) * .4) calc(var(--p) * .5) 0 rgba(255, 255, 255, .16); }
.meter { position: absolute; left: calc(50% - var(--p) * 1.5); top: calc(var(--p) * 193); width: calc(var(--p) * 3);
  display: flex; flex-direction: column-reverse; gap: calc(var(--p) * 2.35); }
.meter i { display: block; height: calc(var(--p) * 4.3); border-radius: calc(var(--p) * 1.2); background: #686b70;
  box-shadow: inset 0 calc(var(--p) * .6) calc(var(--p) * .8) rgba(0, 0, 0, .7); }
.meter i.on { background: #fff; box-shadow: 0 0 calc(var(--p) * 2.6) calc(var(--p) * .5) rgba(255, 255, 255, .85); }
.meter i.on:nth-child(n+15) { background: #ffb9a4; box-shadow: 0 0 calc(var(--p) * 2.6) calc(var(--p) * .5) rgba(255, 150, 120, .9); }
.meter i.on:last-child { background: var(--red); box-shadow: 0 0 calc(var(--p) * 3) calc(var(--p) * .6) var(--red); }
.cross { position: absolute; left: calc(50% - var(--p) * 27); top: calc(var(--p) * 222); width: calc(var(--p) * 54); height: max(1px, calc(var(--p) * .7));
  background: linear-gradient(90deg, #8f9296 0 44%, transparent 44% 56%, #8f9296 56% 100%); opacity: .8; }
.marking { color: #d8d8d4; opacity: .9; }
/* the name first, from the front edge, and the boxed badge after it: read along the strip it says "omage XY" */
.mark-name { position: absolute; display: block; left: calc(50% - var(--p) * 15); bottom: calc(var(--p) * 24.6); width: calc(var(--p) * 32); height: auto; }
.mark-badge { position: absolute; display: block; left: calc(50% - var(--p) * 9.5); bottom: calc(var(--p) * 125.4); width: calc(var(--p) * 19); height: auto; }

/* pitch bend: a slim strip on the front edge; the touch area reaches a little below the body */
.bend { position: absolute; left: calc(var(--u) * var(--bezel)); top: calc(var(--u) * (var(--bezel) + var(--rows))); width: calc(var(--u) * 3); height: calc(var(--u) * (var(--bezel) + .16));
  cursor: ew-resize; touch-action: none; z-index: 4; }
.bend-bar { position: absolute; left: calc(var(--p) * 3); right: calc(var(--p) * 3); top: calc(var(--p) * 9); height: calc(var(--p) * 9); border-radius: calc(var(--p) * 4.5);
  background: linear-gradient(180deg, #050506 0%, #121315 100%); overflow: hidden;
  box-shadow: inset 0 calc(var(--p) * .8) calc(var(--p) * 1.2) #000, 0 calc(var(--p) * .6) 0 rgba(255, 255, 255, .1); }
.bend-bar::before { content: ""; position: absolute; left: calc(50% - var(--p) * .5); top: 18%; bottom: 18%; width: max(1px, calc(var(--p) * 1)); background: rgba(255, 255, 255, .3); }
.bend-mark { position: absolute; left: calc(50% + var(--b, 0) * 50% - var(--p) * 11); top: 0; bottom: 0; width: calc(var(--p) * 22); border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity .12s linear; }
.bend.down .bend-mark, .bend.away .bend-mark { opacity: 1; }