/* RJ-950 - painel do sampler de rack (inspirado no Akai S950)
 * Carregar depois de vendor/dcx-core/css/base.css (cores, LCD, knobs, LEDs).
 *
 * Face nova (b0.2): reproduz o mockup aprovado (dcx-design/rj-950/mockup.html), que segue a foto do
 * original: chapa clara de 977 x 295 (razao 3,31:1), cada peca na posicao medida na foto. Todas as
 * medidas abaixo estao em unidades da face (--u = 1px na largura natural de 977) e a face encolhe
 * junto com a largura do rack (container query), sem JS: no Studio a 0,75 e no celular ela so escala.
 * Tudo fica dentro de #r9 / .r9-face, para nao mexer em outros aparelhos que usam classes r9-*.
 * Estados: .down = pressionado (o s950.js poe e tira), .on = aceso/ligado (no LED e no #r9).
 */
#r9.rack {
  display: block; container-type: inline-size;
  background: none; box-shadow: none; border-radius: 0; margin-top: 0;
}
#r9.rack.focus { box-shadow: none; }

.r9-face {
  /* tokens da face (cores medidas na foto de referencia) */
  --u: calc(min(100cqw, 977px) / 977);
  --r9-face: #eceeeb;           /* cinza-gelo: topo (245,248,247), base (231,236,234) */
  --r9-face-2: #e1e3de;
  --r9-ink: #262626;            /* serigrafia cinza escuro */
  --r9-red: #e2463f;            /* acento DCX: logo e aleta do REC LEVEL */
  --r9-white-ink: #fbfbf9;      /* serigrafia branca na placa do teclado */
  /* numerais impressos sobre as teclas azuis: branco como na foto (medido nos numerais 7, 8, 9, 4, 0: ~ rgb 252,251,250).
     Para voltar aos numerais azuis do mockup: --r950-key-num: #2f6cb0 */
  --r950-key-num: #fcfbfa;
  --r9-blue-1: #93b2d2; --r9-blue-2: #88a9ca; --r9-blue-lip: #607089; --r9-blue-body: #1f2328;
  --r9-grey-1: #b9bab8; --r9-grey-2: #b0b1af; --r9-grey-lip: #6a6a69; --r9-grey-body: #1f2021;
  --r9-plate: #bebebc;          /* placa cinza do teclado (191) */
  --r9-lcd: #679568; --r9-lcd-2: #597f5a; --r9-lcd-off: #5f6a5f;
  --r9-font: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tx-fosco-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.11 0 0 0 0 0.12 3.2 0 0 0 -1.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 -4.5 0 0 0 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-vidro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='52' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  position: relative; width: calc(977 * var(--u)); height: calc(295 * var(--u)); margin: 0 auto;
  border-radius: calc(2 * var(--u)); overflow: hidden; isolation: isolate;
  background-color: var(--r9-face);
  background-image: var(--tx-grao-claro), var(--tx-fosco-escuro), linear-gradient(168deg, #f4f6f4 0%, var(--r9-face) 38%, var(--r9-face-2) 100%);
  background-size: calc(180 * var(--u)) calc(180 * var(--u)), calc(160 * var(--u)) calc(160 * var(--u)), auto;
  background-blend-mode: soft-light, soft-light, normal;
  box-shadow: 0 0 0 1px #6b6d6a, 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.55), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.5);
  color: var(--r9-ink); font-family: var(--r9-font); font-weight: 700; font-size: calc(8 * var(--u));
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s;
}
/* aresta da chapa: friso escuro em cima, fio de luz logo abaixo, base um pouco mais escura */
.r9-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  box-shadow: inset 0 calc(2 * var(--u)) 0 #a7aaa7, inset 0 calc(3 * var(--u)) 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.28), inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(0,0,0,.12);
}
#r9.focus .r9-face { box-shadow: 0 0 0 1px #6b6d6a, 0 0 0 3px var(--rule), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.55); }
.r9-face i { font-style: normal; }
.r9-face button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.r9-face button:focus-visible, .r9-face [tabindex]:focus-visible { outline: 2px solid #2f6cb0; outline-offset: calc(3 * var(--u)); }
/* os grupos do markup nao ocupam lugar: cada peca e posicionada na face */
.r9-face .r9-pow, .r9-face .r9-display, .r9-face .r9-lcd-row, .r9-face .r9-modes, .r9-face .r9-knobs, .r9-face .r9-jacks, .r9-face .r9-drive-wrap { display: contents; }

/* ---------------------------------------------------------------- serigrafia */
.r9-face .r9-cap, .r9-face .r9-t, .r9-face .r9-kl {
  position: absolute; white-space: nowrap; text-align: center; line-height: 1.08; pointer-events: none;
  font-size: calc(8 * var(--u)); letter-spacing: .01em; text-transform: uppercase; color: var(--r9-ink); font-weight: 700;
}
/* marca: logo DCX Audio em vermelho no lugar da marca do fabricante */
.r9-face .r9-brand { display: contents; }
.r9-face .r9-maker {
  position: absolute; left: calc(27 * var(--u)); top: calc(21.5 * var(--u)); width: calc(86 * var(--u)); height: calc(13 * var(--u));
  font-size: 0; color: transparent; overflow: hidden;
  background: var(--r9-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 647 98'%3E%3Cpath d='M602.77 97.5C589.603 97.5 579.541 93.9167 572.583 86.75C563.249 77.9583 558.583 65.2917 558.583 48.75C558.583 31.875 563.249 19.2083 572.583 10.75C579.541 3.58333 589.603 0 602.77 0C615.937 0 625.999 3.58333 632.958 10.75C642.249 19.2083 646.895 31.875 646.895 48.75C646.895 65.2917 642.249 77.9583 632.958 86.75C625.999 93.9167 615.937 97.5 602.77 97.5ZM620.958 72.75C625.416 67.125 627.645 59.125 627.645 48.75C627.645 38.4167 625.395 30.4375 620.895 24.8125C616.437 19.1458 610.395 16.3125 602.77 16.3125C595.145 16.3125 589.062 19.125 584.52 24.75C579.978 30.375 577.708 38.375 577.708 48.75C577.708 59.125 579.978 67.125 584.52 72.75C589.062 78.375 595.145 81.1875 602.77 81.1875C610.395 81.1875 616.458 78.375 620.958 72.75Z'/%3E%3Cpath d='M532.575 2.8125H551.7V94.9375H532.575V2.8125Z'/%3E%3Cpath d='M487.662 94.9375H447.975V2.8125H487.662C493.371 2.89583 498.121 3.5625 501.912 4.8125C508.371 6.9375 513.6 10.8333 517.6 16.5C520.808 21.0833 522.996 26.0417 524.162 31.375C525.329 36.7083 525.912 41.7917 525.912 46.625C525.912 58.875 523.454 69.25 518.537 77.75C511.871 89.2083 501.579 94.9375 487.662 94.9375ZM501.975 26.3125C499.017 21.3125 493.162 18.8125 484.412 18.8125H466.662V78.9375H484.412C493.496 78.9375 499.829 74.4583 503.412 65.5C505.371 60.5833 506.35 54.7292 506.35 47.9375C506.35 38.5625 504.892 31.3542 501.975 26.3125Z'/%3E%3Cpath d='M418.935 59.4375V2.8125H438.498V59.4375C438.498 69.2292 436.977 76.8542 433.935 82.3125C428.268 92.3125 417.456 97.3125 401.498 97.3125C385.539 97.3125 374.706 92.3125 368.998 82.3125C365.956 76.8542 364.435 69.2292 364.435 59.4375V2.8125H383.998V59.4375C383.998 65.7708 384.748 70.3958 386.248 73.3125C388.581 78.4792 393.664 81.0625 401.498 81.0625C409.289 81.0625 414.352 78.4792 416.685 73.3125C418.185 70.3958 418.935 65.7708 418.935 59.4375Z'/%3E%3Cpath d='M337.392 76H303.455L297.08 94.9375H276.955L309.83 2.8125H331.58L364.205 94.9375H343.33L337.392 76ZM332.017 60.125L320.517 23.875L308.642 60.125H332.017Z'/%3E%3Cpath d='M241.142 94.9375H217.767L200.267 63.5625L181.767 94.9375H159.392L189.017 48L160.83 2.8125H183.83L200.267 32.75L217.142 2.8125H239.392L211.205 47.25L241.142 94.9375Z'/%3E%3Cpath d='M152.38 88.0625C145.505 94.3542 136.713 97.5 126.005 97.5C112.755 97.5 102.338 93.25 94.755 84.75C87.1717 76.2083 83.38 64.5 83.38 49.625C83.38 33.5417 87.6925 21.1458 96.3175 12.4375C103.818 4.85417 113.359 1.0625 124.943 1.0625C140.443 1.0625 151.776 6.14583 158.943 16.3125C162.901 22.0208 165.026 27.75 165.318 33.5H146.068C144.818 29.0833 143.213 25.75 141.255 23.5C137.755 19.5 132.568 17.5 125.693 17.5C118.693 17.5 113.172 20.3333 109.13 26C105.088 31.625 103.068 39.6042 103.068 49.9375C103.068 60.2708 105.193 68.0208 109.443 73.1875C113.734 78.3125 119.172 80.875 125.755 80.875C132.505 80.875 137.651 78.6667 141.193 74.25C143.151 71.875 144.776 68.3125 146.068 63.5625H165.13C163.463 73.6042 159.213 81.7708 152.38 88.0625Z'/%3E%3Cpath d='M39.6875 94.9375H0V2.8125H39.6875C45.3958 2.89583 50.1458 3.5625 53.9375 4.8125C60.3958 6.9375 65.625 10.8333 69.625 16.5C72.8333 21.0833 75.0208 26.0417 76.1875 31.375C77.3542 36.7083 77.9375 41.7917 77.9375 46.625C77.9375 58.875 75.4792 69.25 70.5625 77.75C63.8958 89.2083 53.6042 94.9375 39.6875 94.9375ZM54 26.3125C51.0417 21.3125 45.1875 18.8125 36.4375 18.8125H18.6875V78.9375H36.4375C45.5208 78.9375 51.8542 74.4583 55.4375 65.5C57.3958 60.5833 58.375 54.7292 58.375 47.9375C58.375 38.5625 56.9167 31.3542 54 26.3125Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 647 98'%3E%3Cpath d='M602.77 97.5C589.603 97.5 579.541 93.9167 572.583 86.75C563.249 77.9583 558.583 65.2917 558.583 48.75C558.583 31.875 563.249 19.2083 572.583 10.75C579.541 3.58333 589.603 0 602.77 0C615.937 0 625.999 3.58333 632.958 10.75C642.249 19.2083 646.895 31.875 646.895 48.75C646.895 65.2917 642.249 77.9583 632.958 86.75C625.999 93.9167 615.937 97.5 602.77 97.5ZM620.958 72.75C625.416 67.125 627.645 59.125 627.645 48.75C627.645 38.4167 625.395 30.4375 620.895 24.8125C616.437 19.1458 610.395 16.3125 602.77 16.3125C595.145 16.3125 589.062 19.125 584.52 24.75C579.978 30.375 577.708 38.375 577.708 48.75C577.708 59.125 579.978 67.125 584.52 72.75C589.062 78.375 595.145 81.1875 602.77 81.1875C610.395 81.1875 616.458 78.375 620.958 72.75Z'/%3E%3Cpath d='M532.575 2.8125H551.7V94.9375H532.575V2.8125Z'/%3E%3Cpath d='M487.662 94.9375H447.975V2.8125H487.662C493.371 2.89583 498.121 3.5625 501.912 4.8125C508.371 6.9375 513.6 10.8333 517.6 16.5C520.808 21.0833 522.996 26.0417 524.162 31.375C525.329 36.7083 525.912 41.7917 525.912 46.625C525.912 58.875 523.454 69.25 518.537 77.75C511.871 89.2083 501.579 94.9375 487.662 94.9375ZM501.975 26.3125C499.017 21.3125 493.162 18.8125 484.412 18.8125H466.662V78.9375H484.412C493.496 78.9375 499.829 74.4583 503.412 65.5C505.371 60.5833 506.35 54.7292 506.35 47.9375C506.35 38.5625 504.892 31.3542 501.975 26.3125Z'/%3E%3Cpath d='M418.935 59.4375V2.8125H438.498V59.4375C438.498 69.2292 436.977 76.8542 433.935 82.3125C428.268 92.3125 417.456 97.3125 401.498 97.3125C385.539 97.3125 374.706 92.3125 368.998 82.3125C365.956 76.8542 364.435 69.2292 364.435 59.4375V2.8125H383.998V59.4375C383.998 65.7708 384.748 70.3958 386.248 73.3125C388.581 78.4792 393.664 81.0625 401.498 81.0625C409.289 81.0625 414.352 78.4792 416.685 73.3125C418.185 70.3958 418.935 65.7708 418.935 59.4375Z'/%3E%3Cpath d='M337.392 76H303.455L297.08 94.9375H276.955L309.83 2.8125H331.58L364.205 94.9375H343.33L337.392 76ZM332.017 60.125L320.517 23.875L308.642 60.125H332.017Z'/%3E%3Cpath d='M241.142 94.9375H217.767L200.267 63.5625L181.767 94.9375H159.392L189.017 48L160.83 2.8125H183.83L200.267 32.75L217.142 2.8125H239.392L211.205 47.25L241.142 94.9375Z'/%3E%3Cpath d='M152.38 88.0625C145.505 94.3542 136.713 97.5 126.005 97.5C112.755 97.5 102.338 93.25 94.755 84.75C87.1717 76.2083 83.38 64.5 83.38 49.625C83.38 33.5417 87.6925 21.1458 96.3175 12.4375C103.818 4.85417 113.359 1.0625 124.943 1.0625C140.443 1.0625 151.776 6.14583 158.943 16.3125C162.901 22.0208 165.026 27.75 165.318 33.5H146.068C144.818 29.0833 143.213 25.75 141.255 23.5C137.755 19.5 132.568 17.5 125.693 17.5C118.693 17.5 113.172 20.3333 109.13 26C105.088 31.625 103.068 39.6042 103.068 49.9375C103.068 60.2708 105.193 68.0208 109.443 73.1875C113.734 78.3125 119.172 80.875 125.755 80.875C132.505 80.875 137.651 78.6667 141.193 74.25C143.151 71.875 144.776 68.3125 146.068 63.5625H165.13C163.463 73.6042 159.213 81.7708 152.38 88.0625Z'/%3E%3Cpath d='M39.6875 94.9375H0V2.8125H39.6875C45.3958 2.89583 50.1458 3.5625 53.9375 4.8125C60.3958 6.9375 65.625 10.8333 69.625 16.5C72.8333 21.0833 75.0208 26.0417 76.1875 31.375C77.3542 36.7083 77.9375 41.7917 77.9375 46.625C77.9375 58.875 75.4792 69.25 70.5625 77.75C63.8958 89.2083 53.6042 94.9375 39.6875 94.9375ZM54 26.3125C51.0417 21.3125 45.1875 18.8125 36.4375 18.8125H18.6875V78.9375H36.4375C45.5208 78.9375 51.8542 74.4583 55.4375 65.5C57.3958 60.5833 58.375 54.7292 58.375 47.9375C58.375 38.5625 56.9167 31.3542 54 26.3125Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.r9-face .r9-sub { position: absolute; left: calc(126 * var(--u)); top: calc(28.5 * var(--u)); transform: translateY(-50%); font-size: calc(8 * var(--u)); line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.r9-face .r9-model {
  position: absolute; left: calc(293 * var(--u)); top: calc(19 * var(--u)); font: 700 calc(18 * var(--u))/1 var(--r9-font); letter-spacing: -.01em;
  color: #eef0ed; -webkit-text-stroke: calc(1.8 * var(--u)) #2a2a28; paint-order: stroke fill; pointer-events: none;
}

/* ---------------------------------------------------------------- POWER: moldura preta, tecla cinza, "POWER" em vermelho */
.r9-face .r9-pow .kc { position: absolute; display: block; }
.r9-face .r9-pow .kc:first-child { left: calc(28 * var(--u)); top: calc(44 * var(--u)); width: calc(49 * var(--u)); height: calc(60 * var(--u)); }
.r9-face .r9-power {
  position: absolute; inset: 0; border-radius: calc(2 * var(--u)); background: #121212;
  box-shadow: 0 1px 1px rgba(0,0,0,.35), inset 0 .5px 0 rgba(255,255,255,.12);
}
.r9-face .r9-power::before {
  content: ""; position: absolute; inset: calc(3 * var(--u)); border-radius: 1px;
  background: linear-gradient(180deg, #b1b2ad 0, #a3a49f 55%, #96978f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 calc(-1.5 * var(--u)) 0 rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.35);
  transition: background .06s, box-shadow .06s;
}
.r9-face .r9-power.down::before, #r9.on .r9-power::before { box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.25); }
#r9.on .r9-power::before { background: linear-gradient(180deg, #9a9b95 0, #a3a49f 45%, #adaea9 100%); }
.r9-face .r9-pow .kc:first-child .r9-cap {
  left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(6.5 * var(--u)); line-height: 1; letter-spacing: .06em;
  color: #cf4a40; text-shadow: 0 .5px 0 rgba(255,255,255,.35);
}
#r9.on .r9-pow .kc:first-child .r9-cap { color: var(--r9-red); }

/* ---------------------------------------------------------------- knobs: saia serrilhada escura, tampa clara, aleta ponteiro, escala de pontos */
.r9-face .kc { gap: 0; }
.r9-face .knob {
  position: absolute; inset: 0; width: auto; height: auto; border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: repeating-conic-gradient(from 0deg, #2a2a29 0 3deg, #5a5a58 3deg 6deg);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.6), inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.12), 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.4), 0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.22);
}
/* escala: 11 pontos de -135 a +135 graus (0, 5 e 10 maiores) */
.r9-face .knob::before { content: ""; position: absolute; inset: calc(-9 * var(--u)); z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-27 -27 54 54' fill='%233a3a38'%3E%3Ccircle cx='-16.97' cy='16.97' r='1.1'/%3E%3Ccircle cx='-22.83' cy='7.42' r='.8'/%3E%3Ccircle cx='-23.70' cy='-3.75' r='.8'/%3E%3Ccircle cx='-19.42' cy='-14.11' r='.8'/%3E%3Ccircle cx='-10.90' cy='-21.38' r='.8'/%3E%3Ccircle cx='0.00' cy='-24.00' r='1.1'/%3E%3Ccircle cx='10.90' cy='-21.38' r='.8'/%3E%3Ccircle cx='19.42' cy='-14.11' r='.8'/%3E%3Ccircle cx='23.70' cy='-3.75' r='.8'/%3E%3Ccircle cx='22.83' cy='7.42' r='.8'/%3E%3Ccircle cx='16.97' cy='16.97' r='1.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* o s950.js gira o <i>: ele ocupa o knob inteiro e leva a tampa e a aleta */
.r9-face .knob i {
  position: absolute; inset: 0; top: 0; left: 0; width: auto; height: auto; margin: 0; border-radius: 50%;
  background: none; transform-origin: 50% 50%; pointer-events: none;
}
.r9-face .knob i::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #dcdcda 0, #cbcbc9 55%, #a9a9a7 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.5), 0 0 0 .5px #4a4a48;
}
/* aleta: prisma com face clara a esquerda e sombra a direita, do centro ate a borda da tampa */
.r9-face .knob i::after {
  content: ""; position: absolute; left: 50%; top: 7%; width: 30%; height: 44%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--f1, #fbfbfa) 0 50%, var(--f2, #cfcfcd) 50% 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 .5px .5px rgba(0,0,0,.5));
}
/* brilho fixo da tampa (nao gira) */
.r9-face .knob::after {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 22%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.25);
}
.r9-face .knob.down { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.6), inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6), 0 0 0 calc(2 * var(--u)) rgba(47,108,176,.55), 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.4); }
#r9-rec { --f1: #ef6a50; --f2: #c23f2b; }

/* DISPLAY CONTRAST: knob menor, risco preto na tampa */
.r9-face .r9-pow .kc:last-child { left: calc(190 * var(--u)); top: calc(70 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.r9-face #r9-contrast::before { inset: calc(-8 * var(--u)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 48 48' fill='%233a3a38'%3E%3Ccircle cx='-14.85' cy='14.85' r='1.1'/%3E%3Ccircle cx='-19.97' cy='6.49' r='.8'/%3E%3Ccircle cx='-20.74' cy='-3.29' r='.8'/%3E%3Ccircle cx='-16.99' cy='-12.34' r='.8'/%3E%3Ccircle cx='-9.53' cy='-18.71' r='.8'/%3E%3Ccircle cx='0.00' cy='-21.00' r='1.1'/%3E%3Ccircle cx='9.53' cy='-18.71' r='.8'/%3E%3Ccircle cx='16.99' cy='-12.34' r='.8'/%3E%3Ccircle cx='20.74' cy='-3.29' r='.8'/%3E%3Ccircle cx='19.97' cy='6.49' r='.8'/%3E%3Ccircle cx='14.85' cy='14.85' r='1.1'/%3E%3C/svg%3E"); }
.r9-face #r9-contrast i::after { width: calc(1.6 * var(--u)); height: 36%; top: 10%; background: #1e1e1d; clip-path: none; filter: none; border-radius: 1px; }
.r9-face .r9-pow .kc:last-child .r9-cap { left: calc(50% - calc(3 * var(--u))); top: calc(-24.5 * var(--u)); transform: translateX(-50%); font-size: calc(7.5 * var(--u)); }

/* REC LEVEL / MONITOR / OUTPUT (36), MIN e MAX, LEFT -o- RIGHT */
.r9-face .r9-knobs .kc { position: absolute; display: block; top: calc(171 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.r9-face .r9-knobs .kc:nth-child(1) { left: calc(784 * var(--u)); }
.r9-face .r9-knobs .kc:nth-child(2) { left: calc(843 * var(--u)); }
.r9-face .r9-knobs .kc:nth-child(3) { left: calc(903 * var(--u)); }
.r9-face .r9-knobs .r9-cap { left: 50%; top: calc(-20 * var(--u)); transform: translate(-50%, -50%); }
.r9-face .r9-knobs .kc::before, .r9-face .r9-knobs .kc::after {
  position: absolute; top: calc(43 * var(--u)); transform: translate(-50%, -50%); font-size: calc(6.5 * var(--u)); line-height: 1; letter-spacing: .02em; text-transform: uppercase; pointer-events: none;
}
.r9-face .r9-knobs .kc::before { content: "Min"; left: calc(50% - calc(17 * var(--u))); }
.r9-face .r9-knobs .kc::after { content: "Max"; left: calc(50% + calc(17 * var(--u))); }
.r9-face .r9-knobs .kc:nth-child(3) .r9-cap::after {
  content: "Left \2014\25CB\2014  Right"; position: absolute; left: 50%; top: calc(8.5 * var(--u)); transform: translateX(-50%);
  font-size: calc(6 * var(--u)); letter-spacing: .02em; white-space: nowrap;
}

/* CONTROL: disco grande de aluminio fosco, encoder sem fim, covinha */
.r9-face .r9-control-wrap { position: absolute; display: block; left: calc(822 * var(--u)); top: calc(40 * var(--u)); width: calc(94 * var(--u)); height: calc(94 * var(--u)); }
.r9-face .r9-control {
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 calc(.7 * var(--u)), rgba(0,0,0,.035) calc(.7 * var(--u)) calc(1.6 * var(--u))),
    radial-gradient(circle closest-side, #9d9e99 0, #8f908b 60%, #7f807b 96%, #5f605c 96.6%, #7a7b77 98%, #585955 100%);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.6), inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.5), 0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.42), calc(-2 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.2);
}
.r9-face .r9-control::before, .r9-face .r9-control::after { display: none; }
.r9-face .r9-control i::before { display: none; }
.r9-face .r9-control i::after {
  width: 5%; height: 5%; top: 9%; border-radius: 50%; clip-path: none; filter: none;
  background: radial-gradient(circle at 50% 65%, rgba(255,255,255,.45), rgba(90,91,87,.9) 55%, rgba(60,61,58,.9) 100%);
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,.6), 0 .5px 0 rgba(255,255,255,.45);
}
.r9-face .r9-control-wrap .r9-cap { left: calc(50% - calc(3 * var(--u))); top: calc(-5.5 * var(--u)); transform: translate(-50%, -50%); }

/* ---------------------------------------------------------------- jacks de 1/4" e a chave INPUT */
.r9-face .r9-jacks .kc { position: absolute; display: block; top: calc(240 * var(--u)); width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.r9-face .r9-jacks .kc:nth-child(1) { left: calc(789.5 * var(--u)); }
.r9-face .r9-jacks .kc:nth-child(2) { left: calc(848.5 * var(--u)); }
.r9-face .r9-jacks .kc:nth-child(3) { left: calc(908.5 * var(--u)); }
.r9-face .r9-jack {
  position: absolute; inset: 0; display: block; border-radius: 50%; width: auto; height: auto;
  background: radial-gradient(circle at 50% 38%, #353535 0, #171717 60%, #0b0b0b 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.45), inset 0 .5px 0 rgba(255,255,255,.18);
}
.r9-face .r9-jack::before { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: conic-gradient(from -40deg, #e6e7e6, #9a9c9b 70deg, #5f615f 150deg, #cfd1d0 220deg, #8a8c8b 290deg, #e6e7e6);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.35); }
.r9-face .r9-jack::after { content: ""; position: absolute; inset: 36%; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #000 0 55%, #1b1c1e 100%); box-shadow: inset 0 1px 1.5px rgba(0,0,0,.9), 0 .5px 0 rgba(255,255,255,.4); }
.r9-face .r9-jacks .r9-cap { left: 50%; top: calc(-4.5 * var(--u)); transform: translate(-50%, -50%); font-size: calc(6.5 * var(--u)); letter-spacing: .02em; }
.r9-face .r9-jacks .kc:nth-child(3) .r9-cap { top: calc(-14.5 * var(--u)); transform: translateX(-50%); }
/* INPUT: fio com pontas viradas para baixo e o nome no meio */
.r9-face .r9-jacks::before {
  content: ""; position: absolute; left: calc(790 * var(--u)); top: calc(226.5 * var(--u)); width: calc(83 * var(--u)); height: calc(3.5 * var(--u)); pointer-events: none;
  border-left: 1px solid var(--r9-ink); border-right: 1px solid var(--r9-ink);
  background: linear-gradient(90deg, var(--r9-ink) 0 calc(50% - calc(14 * var(--u))), transparent calc(50% - calc(14 * var(--u))) calc(50% + calc(14 * var(--u))), var(--r9-ink) calc(50% + calc(14 * var(--u)))) top / 100% 1px no-repeat;
}
.r9-face .r9-jacks::after {
  content: "Input"; position: absolute; left: calc(831.5 * var(--u)); top: calc(227 * var(--u)); transform: translate(-50%, -50%); pointer-events: none;
  font-size: calc(6.5 * var(--u)); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- drive de disquete 3,5" (moldura preta, frente grafite) */
.r9-face .r9-drive-wrap > .r9-cap { left: calc(145 * var(--u)); top: calc(196 * var(--u)); transform: translate(-50%, -50%); }
.r9-face .r9-drive {
  position: absolute; display: block; left: calc(30.5 * var(--u)); top: calc(206 * var(--u)); width: calc(227 * var(--u)); height: calc(57.5 * var(--u)); padding: 0;
  border-radius: calc(1.5 * var(--u)); background: #0d0d0d; border: 0;
  box-shadow: 0 1px 2px rgba(16,23,18,.3), 0 0 0 .5px rgba(0,0,0,.4);
  outline: 2px solid transparent; transition: box-shadow .12s, outline-color .12s;
}
.r9-face .r9-drive.drop { outline-color: #2f6cb0; box-shadow: 0 0 0 2px #2f6cb0, 0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(47,108,176,.6); }
.r9-face .r9-drive > *, .r9-face .r9-drive-row > * { position: absolute; display: block; pointer-events: none; }
/* frente grafite (fundo do botao) e rebaixo da porta acima da fenda */
.r9-face .r9-drive::before {
  content: ""; position: absolute; inset: calc(2 * var(--u)); border-radius: 1px; pointer-events: none;
  background-color: #3a3a39;
  background-image: linear-gradient(115deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 36%), linear-gradient(180deg, #424241, #353534 60%, #2f2f2e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.45);
}
.r9-face .r9-drive::after {
  content: ""; position: absolute; left: calc(78 * var(--u)); width: calc(68 * var(--u)); top: calc(6.5 * var(--u)); height: calc(8 * var(--u)); border-radius: .5px; pointer-events: none;
  background: #161616; box-shadow: inset 0 1px calc(1.5 * var(--u)) rgba(0,0,0,.8);
}
/* fenda com as guias cinza dentro */
.r9-face .r9-slot {
  left: calc(7 * var(--u)); right: calc(11 * var(--u)); top: calc(13 * var(--u)); height: calc(8 * var(--u)); border-radius: .5px; background: #121212;
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.95), 0 .5px 0 rgba(255,255,255,.1);
}
.r9-face .r9-slot::before, .r9-face .r9-slot::after { content: ""; position: absolute; top: calc(2 * var(--u)); height: calc(3.5 * var(--u)); width: 30%; border-radius: .5px; background: linear-gradient(180deg, #4b4b4a, #3a3a39); }
.r9-face .r9-slot::before { left: calc(6 * var(--u)); } .r9-face .r9-slot::after { right: calc(6 * var(--u)); }
/* ressaltos claros dos lados da porta (fileira de baixo) e a porta trapezoidal */
.r9-face .r9-drive-row { inset: 0; }
.r9-face .r9-drive-row::before {
  content: ""; position: absolute; left: calc(7 * var(--u)); right: calc(11 * var(--u)); top: calc(24 * var(--u)); height: calc(5 * var(--u));
  background: linear-gradient(180deg, #6c6c6a, #555553);
  -webkit-mask: linear-gradient(90deg, #000 0 calc(72 * var(--u)), transparent calc(72 * var(--u)) calc(138 * var(--u)), #000 calc(138 * var(--u))); mask: linear-gradient(90deg, #000 0 calc(72 * var(--u)), transparent calc(72 * var(--u)) calc(138 * var(--u)), #000 calc(138 * var(--u)));
  box-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.r9-face .r9-drive-row::after {
  content: ""; position: absolute; left: calc(79 * var(--u)); width: calc(66 * var(--u)); top: calc(27 * var(--u)); height: calc(26 * var(--u));
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0 1px, #6a6a68 1px, #5b5b59 25%, #4c4c4a 100%);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
}
/* LED do drive (vermelho, pisca lendo) e ejetar */
.r9-face .r9-busy { left: calc(35 * var(--u)); top: calc(40.5 * var(--u)); width: calc(13 * var(--u)); height: calc(5 * var(--u)); border-radius: .5px; background: #2a1715; box-shadow: inset 0 0 0 .5px #070707, 0 .5px 0 rgba(255,255,255,.12); }
.r9-face .r9-busy.on { background: #ff5a3a; box-shadow: inset 0 0 0 .5px #0a0a0a, 0 0 calc(4 * var(--u)) 1px rgba(255,80,50,.7); animation: r9-blink .18s steps(1) infinite; }
@keyframes r9-blink { 50% { background: #4a221d; box-shadow: inset 0 0 0 .5px #0a0a0a; } }
.r9-face .r9-eject {
  left: calc(160.5 * var(--u)); top: calc(40.5 * var(--u)); width: calc(29 * var(--u)); height: calc(9.5 * var(--u)); border-radius: 1px; background: linear-gradient(180deg, #232323, #121212);
  box-shadow: inset 0 calc(1.5 * var(--u)) 0 #b9bab7, inset 0 calc(2.5 * var(--u)) 0 rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.5); transition: transform .045s;
}
.r9-face .r9-drive:active .r9-eject { transform: translateY(1px); box-shadow: inset 0 calc(1.5 * var(--u)) 0 #9a9b98, inset 0 calc(2.5 * var(--u)) 0 rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- LCD: moldura preta larga, vidro verde-acinzentado, 40 colunas */
.r9-face .r9-bezel {
  position: absolute; left: calc(276 * var(--u)); top: calc(41 * var(--u)); width: calc(463.5 * var(--u)); height: calc(62 * var(--u)); padding: 0;
  border-radius: calc(2.5 * var(--u)); background: linear-gradient(180deg, #221d1f, #171416 40%, #141214);
  box-shadow: 0 1px 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.6);
}
.r9-face .r9-lcd {
  --r9a: .72;
  --lcd-ink: rgba(18,26,16,.9); --lcd-glass: var(--r9-lcd);
  position: absolute; left: calc(25 * var(--u)); top: calc(19 * var(--u)); width: calc(334 * var(--u)); height: calc(32 * var(--u)); padding: calc(3 * var(--u)) calc(3 * var(--u));
  display: flex; flex-direction: column; justify-content: center; gap: calc(1.5 * var(--u));
  border-radius: 1px; overflow: hidden;
  background: radial-gradient(ellipse 80% 140% at 50% 50%, var(--r9-lcd), var(--r9-lcd-2) 80%, #4f7250);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.45), inset 0 -1px calc(2 * var(--u)) rgba(0,0,0,.3);
  color: rgba(18, 26, 16, var(--r9a));
  font-family: var(--lcd-font); font-weight: 400; font-size: calc(14.5 * var(--u)); line-height: 1;
  transition: background .3s;
}
.r9-face .r9-lcd::before { content: ""; position: absolute; inset: 0; background: var(--tx-vidro) 0 0 / calc(200 * var(--u)); opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.r9-face .r9-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(170deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 39%); }
.r9-face .r9-lcd .lcd-row { position: relative; display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); column-gap: calc(.6 * var(--u)); height: calc(12 * var(--u)); margin: 0; }
.r9-face .r9-lcd .lcd-row span { background: rgba(20, 40, 18, calc(var(--r9a) * .1)); border-radius: 0; }
.r9-face .r9-lcd .lcd-row span.bar::after { background: currentColor; left: calc(.6 * var(--u)); right: calc(.6 * var(--u)); bottom: calc(.5 * var(--u)); }
.r9-face .r9-lcd .lcd-row span.dim::after { opacity: .28; }
.r9-face .r9-lcd .lcd-row span.mk-l { box-shadow: inset calc(1.5 * var(--u)) 0 0 currentColor; }
.r9-face .r9-lcd .lcd-row span.mk-r { box-shadow: inset calc(-1.5 * var(--u)) 0 0 currentColor; }
.r9-face .r9-lcd .lcd-row span.mk-l.mk-r { box-shadow: inset calc(1.5 * var(--u)) 0 0 currentColor, inset calc(-1.5 * var(--u)) 0 0 currentColor; }
.r9-face .r9-lcd .lcd-row span.mk-loop::before {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: calc(-3 * var(--u));
  border: calc(3 * var(--u)) solid transparent; border-top-color: currentColor;
}
#r9:not(.on) .r9-face .r9-lcd { background: radial-gradient(ellipse 80% 140% at 50% 50%, var(--r9-lcd-off), #525c52 80%, #475047); }
#r9:not(.on) .r9-face .r9-lcd .lcd-row span { background: transparent; }

/* MIDI RECEIVE: rotulo branco, haste e LED quadrado na moldura */
.r9-face .r9-midi { position: absolute; left: calc(694 * var(--u)); top: calc(55 * var(--u)); width: 0; height: calc(32 * var(--u)); display: block; }
.r9-face .r9-midi .r9-cap { left: 0; top: calc(6 * var(--u)); transform: translate(-50%, -50%); font-size: calc(6.5 * var(--u)); letter-spacing: .02em; color: #f2f2ee; }
.r9-face .r9-midi::before { content: ""; position: absolute; left: 0; top: calc(12.5 * var(--u)); width: 1px; height: calc(10 * var(--u)); background: #f2f2ee; transform: translateX(-50%); }
.r9-face .r9-midi .led {
  position: absolute; left: 0; top: calc(27 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 1px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #d9d3cc, #a9a39d); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35);
}
.r9-face .r9-midi .led.on { background: radial-gradient(circle at 50% 40%, #fff0e0, #ff5a3a 45%, #d41f0c); box-shadow: 0 0 calc(4 * var(--u)) 1px rgba(255,62,38,.8), 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255,40,20,.3); }

/* ---------------------------------------------------------------- fila de modos: celulas de 35,75; rotulo pelo topo, LED em barra, tecla branca */
.r9-face .r9-mode { position: absolute; display: block; top: calc(120.5 * var(--u)); width: calc(35.75 * var(--u)); height: calc(48 * var(--u)); left: calc(calc(270.625 * var(--u)) + var(--i) * calc(35.75 * var(--u))); }
.r9-face .r9-mode:nth-child(1) { --i: 0; } .r9-face .r9-mode:nth-child(2) { --i: 1; } .r9-face .r9-mode:nth-child(3) { --i: 2; } .r9-face .r9-mode:nth-child(4) { --i: 3; }
.r9-face .r9-mode:nth-child(5) { --i: 4; } .r9-face .r9-mode:nth-child(6) { --i: 5; } .r9-face .r9-mode:nth-child(7) { --i: 6; } .r9-face .r9-mode:nth-child(8) { --i: 7; }
.r9-face .r9-t { display: block; min-height: 0; left: 50%; top: 0; transform: translateX(-50%); font-size: calc(7.5 * var(--u)); letter-spacing: -.015em; }
.r9-face .r9-mode .led {
  position: absolute; left: 50%; top: calc(20.5 * var(--u)); width: calc(10 * var(--u)); height: calc(3.5 * var(--u)); border-radius: .5px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #4a4847, #252423); box-shadow: 0 .5px 0 rgba(255,255,255,.5), inset 0 .5px 0 rgba(255,255,255,.12);
  transition: background .04s, box-shadow .04s;
}
.r9-face .r9-mode .led.on { background: linear-gradient(180deg, #ff8b6e, #ee3a22 55%, #b81d0c); box-shadow: 0 0 calc(3 * var(--u)) 1px rgba(255,62,38,.75), 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(255,40,20,.3); }
/* tecla branca de modo (22 x 17): furo escuro em volta, tampa fosca, sombra curta */
.r9-face .r9-btn {
  position: absolute; left: 50%; top: calc(37.1 * var(--u)); width: calc(22 * var(--u)); height: calc(17 * var(--u)); transform: translate(-50%, -50%);
  border-radius: calc(2 * var(--u)); background: #2b2b2a;
  box-shadow: 0 0 0 1px #2b2b2a, 0 calc(1.5 * var(--u)) 0 0 rgba(255,255,255,.6);
}
.r9-face .r9-btn::before {
  content: ""; position: absolute; left: .5px; right: .5px; top: .5px; bottom: calc(1.5 * var(--u)); border-radius: calc(1.5 * var(--u));
  background: linear-gradient(180deg, #f8f8f6, #efefec);
  box-shadow: 0 1px 0 #b3b4b0, 0 1px calc(2 * var(--u)) rgba(16,23,18,.25), inset 0 .5px 0 #fff;
  transition: transform .045s, box-shadow .045s;
}
.r9-face .r9-btn.down::before { transform: translateY(1px); background: #ececea; box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(23,27,23,.35); }

/* ---------------------------------------------------------------- tabelas impressas (EDIT SAMPLE / EDIT PROGRAM / DISK) */
.r9-face .r9-tables { position: absolute; left: calc(276.5 * var(--u)); top: calc(188 * var(--u)); display: flex; pointer-events: none; }
.r9-face .r9-tbl { width: calc(92 * var(--u)); border: 1px solid #4a4a48; background: #e8e9e6; }
.r9-face .r9-tbl + .r9-tbl { border-left: 0; }
.r9-face .r9-tbl > b {
  display: block; height: calc(13 * var(--u)); background: #a3a3a1; color: var(--r9-white-ink); font-size: calc(8.5 * var(--u)); line-height: calc(13 * var(--u)); white-space: nowrap; text-align: center;
  letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 0 1px rgba(0,0,0,.35); border-bottom: 1px solid #4a4a48;
}
.r9-face .r9-tbl ol { margin: 0; padding: 0; list-style: none; }
.r9-face .r9-tbl li { display: flex; height: calc(12.4 * var(--u)); border-bottom: 1px solid #6a6a68; font-size: calc(7.5 * var(--u)); line-height: calc(11.4 * var(--u)); text-transform: uppercase; letter-spacing: 0; }
.r9-face .r9-tbl li:last-child { border-bottom: 0; }
.r9-face .r9-tbl li span { flex: 1; padding-left: calc(4 * var(--u)); border-right: 1px solid #6a6a68; white-space: nowrap; overflow: hidden; }
.r9-face .r9-tbl li small { font-size: calc(5.5 * var(--u)); letter-spacing: .02em; }
.r9-face .r9-tbl li b { flex: none; width: calc(15 * var(--u)); text-align: center; }

/* ---------------------------------------------------------------- placa cinza do teclado e as teclas (24 x 16) */
.r9-face .r9-keys {
  position: absolute; display: block; left: calc(567.5 * var(--u)); top: calc(117 * var(--u)); width: calc(173 * var(--u)); height: calc(161 * var(--u)); padding: 0; gap: 0;
  border-radius: calc(1.5 * var(--u)); background: var(--r9-plate);
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.18);
}
.r9-face .r9-keys::before, .r9-face .r9-keys::after {
  position: absolute; top: calc(3.5 * var(--u)); transform: translateX(-50%); white-space: pre; text-align: center; line-height: 1.08; pointer-events: none;
  font-size: calc(7.5 * var(--u)); letter-spacing: .01em; text-transform: uppercase; color: var(--r9-white-ink); text-shadow: 0 0 1px rgba(0,0,0,.25), 0 .5px 0 rgba(0,0,0,.2);
}
.r9-face .r9-keys::before { content: "Parameter\A key"; left: calc(48 * var(--u)); }
.r9-face .r9-keys::after { content: "Arrow\A /cursor"; left: calc(137.5 * var(--u)); }
.r9-face .r9-key {
  position: absolute; display: block; width: calc(24 * var(--u)); height: calc(16 * var(--u)); left: calc((var(--kx) - 12) * var(--u)); top: calc((var(--ky) - 8) * var(--u));
  border-radius: calc(2 * var(--u)); background: var(--kb); box-shadow: 0 1px calc(2 * var(--u)) rgba(16,23,18,.22);
  font-size: calc(7.5 * var(--u)); line-height: 1; transform: none;
}
.r9-face .r9-key[hidden] { display: none; }
.r9-face .r9-key::before {
  content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(1.5 * var(--u)); bottom: calc(2.5 * var(--u)); border-radius: calc(1.5 * var(--u));
  background: linear-gradient(180deg, var(--k1), var(--k2));
  box-shadow: 0 1px 0 var(--kl), inset 0 .5px 0 rgba(255,255,255,.35);
  transition: transform .045s, box-shadow .045s;
}
.r9-face .r9-key.down::before, .r9-face .r9-deco:active::before { transform: translateY(1px); box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(23,27,23,.45); }
.r9-face .r9-blue { --kb: var(--r9-blue-body); --k1: var(--r9-blue-1); --k2: var(--r9-blue-2); --kl: var(--r9-blue-lip); }
.r9-face .r9-grey { --kb: var(--r9-grey-body); --k1: var(--r9-grey-1); --k2: var(--r9-grey-2); --kl: var(--r9-grey-lip); }
.r9-face .r9-deco { cursor: default; }
/* rotulo impresso na placa, acima da tecla (nao desce com ela) */
.r9-face .r9-kl {
  left: 50%; top: calc(-5.5 * var(--u)); transform: translate(-50%, -50%); font-size: calc(7.5 * var(--u));
  color: var(--r9-white-ink); text-shadow: 0 0 1px rgba(0,0,0,.25), 0 .5px 0 rgba(0,0,0,.2);
}
.r9-face .r9-blue .r9-kl { color: var(--r950-key-num); }
.r9-face [data-r9key="up"] .r9-kl { left: calc(50% + calc(18 * var(--u))); }
.r9-face [data-r9key="left"] .r9-kl, .r9-face [data-r9key="right"] .r9-kl { font-size: calc(6 * var(--u)); }
.r9-face [data-r9key="up"] .r9-kl { word-spacing: calc(.5 * var(--u)); }
/* posicoes medidas na foto (centro da tecla, em unidades da placa): colunas 16,3 / 47,7 / 79 / 119,3 / 155,3; linhas 40,6 / 72,2 / 103,6 / 135,1 */
.r9-face [data-r9key="7"] { --kx: 16.3; --ky: 40.6; } .r9-face [data-r9key="8"] { --kx: 47.7; --ky: 40.6; } .r9-face [data-r9key="9"] { --kx: 79; --ky: 40.6; }
.r9-face [data-r9key="left"] { --kx: 119.3; --ky: 40.6; } .r9-face [data-r9key="right"] { --kx: 155.3; --ky: 40.6; }
.r9-face [data-r9key="4"] { --kx: 16.3; --ky: 72.2; } .r9-face [data-r9key="5"] { --kx: 47.7; --ky: 72.2; } .r9-face [data-r9key="6"] { --kx: 79; --ky: 72.2; }
.r9-face [data-r9key="up"] { --kx: 119.3; --ky: 72.2; } .r9-face [data-r9key="down"] { --kx: 155.3; --ky: 72.2; }
.r9-face [data-r9key="1"] { --kx: 16.3; --ky: 103.6; } .r9-face [data-r9key="2"] { --kx: 47.7; --ky: 103.6; } .r9-face [data-r9key="3"] { --kx: 79; --ky: 103.6; }
.r9-face .r9-deco:nth-of-type(14) { --kx: 119.3; --ky: 103.6; } .r9-face .r9-deco:nth-of-type(15) { --kx: 155.3; --ky: 103.6; }
.r9-face [data-r9key="0"] { --kx: 16.3; --ky: 135.1; } .r9-face [data-r9key="on"] { --kx: 47.7; --ky: 135.1; } .r9-face [data-r9key="off"] { --kx: 79; --ky: 135.1; }
.r9-face [data-r9key="ent"] { --kx: 119.3; --ky: 135.1; } .r9-face [data-r9key="pb"] { --kx: 155.3; --ky: 135.1; }

/* ---------------------------------------------------------------- MIDI Learn: contorno tracejado nos controles que aprendem */
body.learning .r9-face [data-learn] { outline: 1px dashed rgba(47,108,176,.95); outline-offset: calc(2 * var(--u)); }
body.learning .r9-face [data-learn].learn-sel { outline: 2px solid #2f6cb0; outline-offset: calc(3 * var(--u)); box-shadow: 0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(47,108,176,.75); }

/* ---------------------------------------------------------------- ajuda opcional (fora da face): paginas de cada modo, recolhida */
.r9-help { max-width: 977px; margin: 14px auto 0; border: 1px solid #3a3b3d; border-radius: 6px; color: var(--page-ink); font-size: 13px; }
.r9-help > summary { cursor: pointer; padding: 9px 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; list-style: none; }
.r9-help > summary::-webkit-details-marker { display: none; }
.r9-help > summary::before { content: "+"; display: inline-block; width: 14px; }
.r9-help[open] > summary::before { content: "\2212"; }
.r9-help .r9-chart { width: 100%; border-collapse: collapse; }
.r9-help .r9-chart th, .r9-help .r9-chart td { border-top: 1px solid #3a3b3d; padding: 6px 12px; text-align: left; vertical-align: top; line-height: 1.35; }
.r9-help .r9-chart th { white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; width: 1%; }