/* 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. */
:root {
  --dw: 18.53; --dh: 6.54;                 /* instrument size in cells (set again from layout.js) */
  --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: #d9d9d9; --chrome: #3b3d40; --panel: #f4f2ef; --panel-ink: #2c2e31;
  --tile: #eae5e4; --ink: #45474b; --gap: #0d0f12; --shadow: 96, 78, 70;
  --orange: #f04e1d;
  /* shade of a moulded slope by the way it faces: 0 = towards the rear (lit), 180 = towards the player */
  --n0: #fbf9f8; --n45: #dad4d1; --n90: #aba39f; --n135: #a09894; --n180: #a39b97; --n225: #cbc5c1; --n270: #fbf9f8; --n315: #ffffff;
  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: #18191b; --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; }
.pan { display: none; position: relative; flex: 1 1 auto; max-width: 280px; height: calc(var(--bar) - 10px); margin-right: auto; 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 #1d6fe0; 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, .38); }
.sheet[hidden] { display: none; }
.sheet-panel { display: flex; flex-direction: column; max-width: min(620px, 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 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: bead-blasted aluminium, lit from the rear left ───────────── */
.body { position: absolute; left: 0; top: 0; display: flex; width: calc(var(--p) * 1835); height: 100%;
  padding: calc(var(--p) * 27) 0 0 calc(var(--p) * 27); border-radius: calc(var(--p) * 26);
  background-color: #c9c9c9;
  background-image: var(--grain-metal, none), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .13) 100%), linear-gradient(90deg, #e6e6e6 0%, #d6d6d6 42%, #b4b4b4 84%, #a9a9a9 100%);
  background-size: var(--grain-size, 160px) var(--grain-size, 160px), auto, auto;
  box-shadow:
    inset 0 0 0 calc(var(--p) * .5) rgba(118, 118, 118, .5),
    inset calc(var(--p) * 1.1) calc(var(--p) * 1.3) calc(var(--p) * .9) rgba(255, 255, 255, .9),
    inset calc(var(--p) * -1) calc(var(--p) * -1.2) calc(var(--p) * 1.2) rgba(0, 0, 0, .2),
    calc(var(--p) * 1.5) calc(var(--p) * 2.4) 0 calc(var(--p) * -.3) #777,
    0 calc(var(--p) * 4) calc(var(--p) * 5) rgba(0, 0, 0, .18),
    0 calc(var(--p) * 9) calc(var(--p) * 20) rgba(0, 0, 0, .13); }
.tab { position: absolute; left: calc(var(--p) * 1833); top: calc(var(--p) * 494); width: calc(var(--p) * 19.5); height: calc(var(--p) * 61);
  border-radius: 0 calc(var(--p) * 4.5) calc(var(--p) * 4.5) 0; background: linear-gradient(90deg, #9d9691 0%, #cfc9c4 30%, #d9d3ce 100%);
  box-shadow: inset 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .13), inset 0 calc(var(--p) * 1.2) calc(var(--p) * 1) rgba(255, 255, 255, .5),
    calc(var(--p) * 1) calc(var(--p) * 2.4) calc(var(--p) * 2.6) rgba(0, 0, 0, .26); }

.bed { position: relative; flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 6);
  display: grid; grid-template-columns: repeat(17, 1fr); grid-template-rows: repeat(6, 1fr);
  background: var(--gap); border-radius: calc(var(--p) * 5.5);
  box-shadow: 0 0 0 calc(var(--p) * 1.5) var(--gap),
    calc(var(--p) * -.9) calc(var(--p) * -1.1) calc(var(--p) * .8) calc(var(--p) * 1.5) rgba(255, 255, 255, .6),
    calc(var(--p) * 1.3) calc(var(--p) * 2.6) calc(var(--p) * 3.2) calc(var(--p) * 1.5) rgba(0, 0, 0, .38); }
.tile { position: relative; min-width: 0; min-height: 0; margin: calc(var(--p) * 1.5); border-radius: calc(var(--p) * 3.8);
  display: grid; place-items: center; background: var(--tile);
  box-shadow: inset calc(var(--p) * .6) calc(var(--p) * .8) calc(var(--p) * .8) rgba(255, 255, 255, .8), inset calc(var(--p) * -.6) calc(var(--p) * -.9) calc(var(--p) * 1.1) rgba(var(--shadow), .2); }
/* scene lighting: falls off towards the right and the front; a faint speckle for the matte plastic */
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background-image: var(--grain-plastic, none), linear-gradient(180deg, rgba(50, 38, 34, 0) 0%, rgba(50, 38, 34, .05) 100%), linear-gradient(90deg, rgba(50, 38, 34, 0) 0%, rgba(50, 38, 34, .035) 40%, rgba(50, 38, 34, .11) 100%);
  background-size: var(--grain-size, 160px) var(--grain-size, 160px), auto, auto; }

/* ───────────── raised parts: a flat top on a flared foot ───────────── */
/* the foot: each side shaded by the way it faces; a steep inner ring and a wide fillet melting into the plate */
.key::before, .key::after, .wkey::before, .wkey::after, .bkey::before, .bkey::after, .pad-cell::before, .pad-cell::after {
  content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; transition: transform .06s ease-out, opacity .06s ease-out; }
.key::before, .wkey::before, .bkey::before, .pad-cell::before { opacity: .62; filter: blur(calc(var(--p) * 2.1));
  box-shadow: calc(var(--p) * 2) calc(var(--p) * 4) calc(var(--p) * 5) rgba(var(--shadow), .3); }
.key::after, .wkey::after, .bkey::after, .pad-cell::after { opacity: .92; filter: blur(calc(var(--p) * 1.1)); }
.key::before, .key::after, .bkey::before, .bkey::after { border-radius: 50%;
  background: conic-gradient(var(--n0) 0deg, var(--n45) 45deg, var(--n90) 90deg, var(--n135) 135deg, var(--n180) 180deg, var(--n225) 225deg, var(--n270) 270deg, var(--n315) 315deg, var(--n0) 360deg); }
.key::before { width: calc(var(--p) * 89); height: calc(var(--p) * 89); margin: calc(var(--p) * -44.5) 0 0 calc(var(--p) * -44.5); }
.key::after { width: calc(var(--p) * 75.5); height: calc(var(--p) * 75.5); margin: calc(var(--p) * -37.75) 0 0 calc(var(--p) * -37.75); }
.bkey::before { width: calc(var(--p) * 86); height: calc(var(--p) * 86); margin: calc(var(--p) * -43) 0 0 calc(var(--p) * -43); }
.bkey::after { width: calc(var(--p) * 73); height: calc(var(--p) * 73); margin: calc(var(--p) * -36.5) 0 0 calc(var(--p) * -36.5); }
.wkey::before, .wkey::after { border-radius: calc(var(--p) * 45);
  background: conic-gradient(var(--n0) 0deg, var(--n45) 20deg, var(--n90) 40deg, var(--n90) 140deg, var(--n135) 160deg, var(--n180) 180deg, var(--n225) 200deg, var(--n270) 220deg, var(--n270) 320deg, var(--n315) 340deg, var(--n0) 360deg); }
.wkey::before { width: calc(var(--p) * 90); height: calc(var(--p) * 188.5); margin: calc(var(--p) * -94.25) 0 0 calc(var(--p) * -45); }
.wkey::after { width: calc(var(--p) * 77); height: calc(var(--p) * 175.5); margin: calc(var(--p) * -87.75) 0 0 calc(var(--p) * -38.5); }
.pad-cell::before, .pad-cell::after {
  background: conic-gradient(var(--n0) 0deg, var(--n0) 33deg, var(--n45) 45deg, var(--n90) 57deg, var(--n90) 123deg, var(--n135) 135deg, var(--n180) 147deg, var(--n180) 213deg, var(--n225) 225deg, var(--n270) 237deg, var(--n270) 303deg, var(--n315) 315deg, var(--n0) 327deg, var(--n0) 360deg); }
.pad-cell::before { width: calc(var(--p) * 80); height: calc(var(--p) * 80); margin: calc(var(--p) * -40) 0 0 calc(var(--p) * -40); border-radius: calc(var(--p) * 25); }
.pad-cell::after { width: calc(var(--p) * 68); height: calc(var(--p) * 68); margin: calc(var(--p) * -34) 0 0 calc(var(--p) * -34); border-radius: calc(var(--p) * 19.5); }
/* the top */
.cap, .pill, .bcap, .pad { position: relative; z-index: 1;
  background: linear-gradient(152deg, #ede9e7 6%, #e7e2e0 52%, #e0dbd8 96%);
  box-shadow:
    inset calc(var(--p) * .7) calc(var(--p) * .9) calc(var(--p) * .9) rgba(255, 255, 255, .9),
    inset calc(var(--p) * -.7) calc(var(--p) * -.9) calc(var(--p) * 1.2) rgba(var(--shadow), .13),
    calc(var(--p) * -.6) calc(var(--p) * -.9) calc(var(--p) * 1.4) rgba(255, 255, 255, .7),
    calc(var(--p) * .9) calc(var(--p) * 1.5) calc(var(--p) * 2.2) rgba(var(--shadow), .3);
  transition: transform .05s ease-out, box-shadow .05s ease-out; }
/* pressed (or sounding, or latched): the top sinks, the foot shows less */
.key.down .cap, .key.latched .cap, .wkey.down .pill, .wkey.on .pill, .bkey.down .bcap, .bkey.on .bcap {
  transform: translate(calc(var(--p) * .4), calc(var(--p) * 1.2));
  background: linear-gradient(152deg, #dcd7d3 6%, #dad4d0 52%, #d6d0cc 96%);
  box-shadow:
    inset calc(var(--p) * 1.2) calc(var(--p) * 1.7) calc(var(--p) * 2.4) rgba(var(--shadow), .32),
    inset calc(var(--p) * -.6) calc(var(--p) * -.8) calc(var(--p) * 1) rgba(255, 255, 255, .55),
    calc(var(--p) * .4) calc(var(--p) * .7) calc(var(--p) * 1.1) rgba(var(--shadow), .3); }
.key.down::before, .key.latched::before, .bkey.down::before, .bkey.on::before { transform: scale(.94); opacity: .36; }
.key.down::after, .key.latched::after, .bkey.down::after, .bkey.on::after { transform: scale(.95); opacity: .62; }
.wkey.down::before, .wkey.on::before { transform: scale(.94, .972); opacity: .36; }
.wkey.down::after, .wkey.on::after { transform: scale(.95, .978); opacity: .62; }

/* round function keys */
.key { cursor: pointer; }
.cap { width: calc(var(--p) * 65.5); height: calc(var(--p) * 65.5); border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.cap svg { display: block; width: 100%; height: 100%; overflow: visible; transition: color .08s; }
.key.lit .cap, .key.latched .cap { color: var(--orange); }
.key.lit .cap svg { filter: drop-shadow(0 0 calc(var(--p) * 2) rgba(255, 98, 40, .75)); }
/* a running sequencer blinks its key on the beat, so it is noticed from any screen */
.key-seq.lit .cap { background: radial-gradient(circle, #ffdcc8 0%, #f7e1d6 40%, #e7e2e0 76%); }
.key-seq.lit .cap svg { animation: seq-beat var(--beat, .5s) steps(1, end) infinite; }
@keyframes seq-beat { 0% { opacity: 1; } 45% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .key-seq.lit .cap svg { animation: none; } }
.key-rec.lit .cap { background: radial-gradient(circle, #ffdcc8 0%, #f7e1d6 40%, #e7e2e0 76%); }
.key-rec.lit .rec-dot { fill: #ff5a1f; }
.key-rec.lit .cap svg { filter: drop-shadow(0 0 calc(var(--p) * 3.5) rgba(255, 86, 24, .95)) drop-shadow(0 0 calc(var(--p) * 8) rgba(255, 110, 50, .55)); }

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

/* volume knob and blank pad */
.volume { grid-template-columns: 1fr 1fr; }
.vol-hit, .pad-cell { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pad-cell { grid-area: 1 / 2; }
.vol-hit { grid-area: 1 / 1; z-index: 1; cursor: ns-resize; }
/* a tall knob: the wall shows below the top, the shadow runs long to the front right */
.knob { width: calc(var(--p) * 67); height: calc(var(--p) * 67); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #f7f4f2 18%, #e7e0dc 46%, #c6bcb6 78%, #b3a9a3 100%);
  box-shadow:
    0 0 0 calc(var(--p) * .5) rgba(var(--shadow), .2),
    0 0 0 calc(var(--p) * 2.6) rgba(255, 255, 255, .34), 0 0 0 calc(var(--p) * 3.1) rgba(var(--shadow), .16),
    calc(var(--p) * 8) calc(var(--p) * 8) calc(var(--p) * 4.5) rgba(34, 20, 16, .36),
    calc(var(--p) * 19) calc(var(--p) * 18) calc(var(--p) * 9) rgba(34, 20, 16, .3),
    calc(var(--p) * 31) calc(var(--p) * 28) calc(var(--p) * 14) rgba(34, 20, 16, .24),
    calc(var(--p) * 45) calc(var(--p) * 40) calc(var(--p) * 22) rgba(34, 20, 16, .18),
    calc(var(--p) * 62) calc(var(--p) * 54) calc(var(--p) * 32) rgba(34, 20, 16, .1); }
.knob-top { position: relative; width: 87%; height: 87%; border-radius: 50%; background: linear-gradient(150deg, #f8f5f3 10%, #f0ebe8 60%, #e9e3df 100%);
  box-shadow: 0 0 0 calc(var(--p) * .45) rgba(var(--shadow), .14), calc(var(--p) * .8) calc(var(--p) * 1.2) calc(var(--p) * 1.6) rgba(var(--shadow), .26),
    inset calc(var(--p) * .8) calc(var(--p) * 1) calc(var(--p) * 1) #fff, inset calc(var(--p) * -.8) calc(var(--p) * -1) calc(var(--p) * 1.4) rgba(var(--shadow), .1);
  transform: translate(calc(var(--p) * -2.2), calc(var(--p) * -2.8)) rotate(var(--a, 30deg)); transition: transform .08s linear; }
.knob-top i { position: absolute; left: 50%; top: 17%; width: 12%; height: 12%; margin-left: -6%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #cfc7c1, #e9e5e1 78%); box-shadow: inset 0 calc(var(--p) * .5) calc(var(--p) * .8) rgba(var(--shadow), .5), 0 calc(var(--p) * .4) 0 rgba(255, 255, 255, .8); }
.vol-hit.down .knob-top { background: linear-gradient(150deg, #f4f1ee 10%, #ebe6e3 60%, #e3ddd9 100%); }
.pad { width: calc(var(--p) * 58); height: calc(var(--p) * 58); border-radius: calc(var(--p) * 15); background: linear-gradient(152deg, #e9e5e3 6%, #e2ddda 52%, #dad5d1 96%); }

/* display glass */
.screen { z-index: 2; overflow: hidden; background: #0a0b0c; border-radius: calc(var(--p) * 5.5);
  box-shadow: inset 0 0 0 calc(var(--p) * .7) #1f2124, inset 0 0 calc(var(--p) * 5) #000; }
.screen canvas { display: block; width: calc(var(--p) * 374); height: calc(var(--p) * 187); }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 30%, rgba(255, 255, 255, .012) 58%, rgba(255, 255, 255, .03) 100%);
  box-shadow: inset calc(var(--p) * .6) calc(var(--p) * .8) 0 rgba(255, 255, 255, .07); }

/* encoders: a flat dish marked by a fine groove, a white collar, a coloured cap */
.encoder { cursor: grab; }
.enc-dish { width: calc(var(--p) * 116); height: calc(var(--p) * 116); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 38%, #f5f2f0 0%, #f1edeb 55%, #eeeae8 100%);
  box-shadow: inset 0 0 0 calc(var(--p) * 1.9) #a09290, inset 0 0 0 calc(var(--p) * 3.1) rgba(255, 255, 255, .65), 0 0 0 calc(var(--p) * .9) rgba(255, 255, 255, .5); }
.enc-knob { width: calc(var(--p) * 60); height: calc(var(--p) * 60); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #fdfcfb 16%, #efebe8 44%, #c4bab4 78%, #aba19b 100%);
  box-shadow:
    0 0 0 calc(var(--p) * .5) rgba(var(--shadow), .22),
    calc(var(--p) * 8) calc(var(--p) * 7) calc(var(--p) * 4.5) rgba(34, 20, 16, .34),
    calc(var(--p) * 19) calc(var(--p) * 17) calc(var(--p) * 8) rgba(34, 20, 16, .3),
    calc(var(--p) * 30) calc(var(--p) * 27) calc(var(--p) * 13) rgba(34, 20, 16, .27),
    calc(var(--p) * 43) calc(var(--p) * 38) calc(var(--p) * 22) rgba(34, 20, 16, .23),
    calc(var(--p) * 60) calc(var(--p) * 51) calc(var(--p) * 34) rgba(34, 20, 16, .17),
    calc(var(--p) * 74) calc(var(--p) * 60) calc(var(--p) * 52) rgba(34, 20, 16, .1),
    inset calc(var(--p) * 1) calc(var(--p) * 1.2) calc(var(--p) * 1.2) #fff;
  transition: transform .06s ease-out; }
.enc-cap { position: relative; width: 85%; height: 85%; border-radius: 50%; transform: translate(calc(var(--p) * -1.1), calc(var(--p) * -1.5));
  background: radial-gradient(circle at 30% 24%, var(--c-hi) 0%, var(--c) 32%, var(--c) 84%, var(--c-lo) 100%);
  box-shadow: 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .22), calc(var(--p) * 1.1) calc(var(--p) * 1.8) calc(var(--p) * 2) rgba(50, 34, 28, .55),
    inset calc(var(--p) * .8) calc(var(--p) * 1) calc(var(--p) * 1.2) rgba(255, 255, 255, .2), inset calc(var(--p) * -1) calc(var(--p) * -1.4) calc(var(--p) * 2) rgba(0, 0, 0, .24); }
.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: 9%; width: 5%; height: 15%; margin-left: -2.5%; border-radius: calc(var(--p) * 1.5); background: var(--c-mark);
  box-shadow: 0 calc(var(--p) * .4) 0 rgba(255, 255, 255, .14); }
.enc-blue { --c: #1a1f38; --c-hi: #333a5a; --c-lo: #0f1222; --c-mark: rgba(0, 0, 0, .42); }
.enc-ochre { --c: #9e764d; --c-hi: #bd966c; --c-lo: #7c5c3a; --c-mark: rgba(60, 36, 10, .3); }
.enc-gray { --c: #7d7b7c; --c-hi: #9e9c9d; --c-lo: #5f5d5e; --c-mark: rgba(20, 20, 24, .3); }
.enc-orange { --c: #d94a1f; --c-hi: #f27045; --c-lo: #aa3613; --c-mark: rgba(90, 20, 0, .34); }
.encoder.down .enc-knob { transform: scale(.975); }
.encoder.down { cursor: grabbing; }

/* musical keys */
.wkey, .bkey { cursor: pointer; }
.pill { width: calc(var(--p) * 66.5); height: calc(var(--p) * 165); border-radius: calc(var(--p) * 33.25); }
.blackrow { display: grid; grid-template-columns: repeat(28, 1fr); min-width: 0; }
.bkey { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; }
.bcap { width: calc(var(--p) * 63); height: calc(var(--p) * 63); border-radius: 50%; display: grid; place-items: center; }
.bdisc { width: 95%; height: 95%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #2c2c2e 0%, #1c1c1d 55%, #151516 100%);
  box-shadow: inset 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .6), inset calc(var(--p) * 1) calc(var(--p) * 1.4) calc(var(--p) * 2) rgba(255, 255, 255, .06); }
.bkey.down .bdisc, .bkey.on .bdisc { background: radial-gradient(circle at 42% 40%, #1f1f21 0%, #131314 60%, #0c0c0d 100%); box-shadow: inset 0 0 0 calc(var(--p) * .5) rgba(0, 0, 0, .7), inset calc(var(--p) * 1.2) calc(var(--p) * 1.8) calc(var(--p) * 2.6) rgba(0, 0, 0, .6); }

/* right strip */
.strip { position: relative; flex: none; width: calc(var(--p) * 108); height: calc(var(--u) * 6); }
.mic-hole { position: absolute; left: calc(var(--p) * 53); top: calc(var(--p) * 46.3); width: calc(var(--p) * 5.4); height: calc(var(--p) * 5.4); border-radius: 50%;
  background: #121214; box-shadow: calc(var(--p) * .5) calc(var(--p) * .6) 0 rgba(255, 255, 255, .5), inset 0 calc(var(--p) * .8) calc(var(--p) * 1) #000; }
.meter { position: absolute; left: calc(var(--p) * 53.8); top: calc(var(--p) * 190.5); width: calc(var(--p) * 3.5);
  display: flex; flex-direction: column-reverse; gap: calc(var(--p) * 2); }
.meter i { display: block; height: calc(var(--p) * 4.3); border-radius: calc(var(--p) * 1.4); background: #56575a;
  box-shadow: inset 0 calc(var(--p) * .7) calc(var(--p) * .9) rgba(0, 0, 0, .6), calc(var(--p) * .4) calc(var(--p) * .6) 0 rgba(255, 255, 255, .45); }
.meter i:last-child { height: calc(var(--p) * 12); }
.meter i.on { background: #fff3dc; box-shadow: 0 0 calc(var(--p) * 2.6) calc(var(--p) * .5) rgba(255, 196, 120, .9); }
.meter i.on:nth-child(n+14) { background: #ffb469; box-shadow: 0 0 calc(var(--p) * 2.6) calc(var(--p) * .5) rgba(255, 150, 70, .9); }
.meter i.on:last-child { background: #ff5d27; box-shadow: 0 0 calc(var(--p) * 3) calc(var(--p) * .6) rgba(255, 90, 32, .95); }
.cross { position: absolute; left: calc(var(--p) * 27); top: calc(var(--p) * 223.4); width: calc(var(--p) * 57); height: max(1px, calc(var(--p) * .7));
  background: linear-gradient(90deg, #2a2b2e 0 43%, transparent 43% 57.5%, #2a2b2e 57.5% 100%); opacity: .85; }
.marking { color: #1d1e20; opacity: .92; }
/* the name first, from the front edge, and the boxed badge after it: read along the strip it says "omage 1".
   Both sit on the axis of the microphone and the meter (55.5), at the sizes and heights of the sister instrument */
.mark-name { position: absolute; display: block; left: calc(var(--p) * 40.5); bottom: calc(var(--p) * 24.6); width: calc(var(--p) * 32); height: auto; }
.mark-badge { position: absolute; display: block; left: calc(var(--p) * 46); bottom: calc(var(--p) * 125.4); width: calc(var(--p) * 19); height: auto; }