/*
 * El reproductor, solo la carcasa: 1130 x 1540 px de diseño; app.js lo escala, lo inclina y lo centra.
 * La pantalla (680 x 400) está en style.css. Su centro queda 315 px por debajo del borde de arriba del
 * aparato (ahí gira la cámara: transform-origin) y 455 px por encima de su centro: app.js usa las dos medidas.
 */
.deck { position: absolute; left: 50%; top: 50%; width: 1130px; height: 1540px; margin: -770px 0 0 -565px; will-change: transform; transform-origin: 50% 315px; color: #c4c8cf; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.deck > * { position: absolute; }
/* Un velo oscuro sobre toda la carcasa, con un hueco para la pantalla: así la pantalla es lo que más brilla.
   El contorno es el del aparato (módulo arriba, carcasa debajo) y el hueco, el de la pantalla. */
/* De los pads para abajo la carcasa se funde con el fondo de la página: lo que luce es el módulo de la pantalla. */
.deck::before { content: ""; position: absolute; left: -60px; right: -60px; top: 530px; bottom: -220px; z-index: 6; pointer-events: none; background: linear-gradient(#07070700 0, #07070766 70px, #070707d9 170px, #070707 270px); }
.deck::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #000; opacity: 0.3; clip-path: polygon(evenodd, 170px 0, 960px 0, 960px 101px, 100% 101px, 100% 100%, 0 100%, 0 101px, 170px 101px, 170px 0, 225px 115px, 905px 115px, 905px 515px, 225px 515px, 225px 115px); }
.deck i, .deck b, .deck em, .deck u { font-style: normal; font-weight: 700; text-decoration: none; }

/* La carcasa empieza por debajo del módulo de la pantalla. */
.body { inset: 101px 0 0 0; border-radius: 8px 8px 28px 28px; background: var(--grain), repeating-linear-gradient(90deg, #ffffff07 0 1px, #0000 1px 3px), radial-gradient(120% 80% at 30% 0, #26262a, #0000 60%), linear-gradient(170deg, #1d1d20, #121214 40%, #09090a); border: 1px solid #34343a; box-shadow: 0 0 0 1px #000, 0 70px 140px #000c, inset 0 1px 0 #ffffff24, inset 0 -2px 0 #000, inset 2px 0 0 #ffffff0a, inset -2px 0 0 #0006; }

/* El módulo de la pantalla. */
.unit { left: 170px; top: 0; width: 790px; height: 549px; border-radius: 8px 8px 4px 4px; box-shadow: 0 0 0 1px #000, 0 14px 30px #000c; }
.unit > * { position: absolute; left: 0; width: 790px; }
.top-edge { top: 0; height: 25px; border-radius: 8px 8px 0 0; background: linear-gradient(#000 0, #0b0b0c 55%, #2c2c30 92%, #111113); }
.strip { top: 25px; height: 76px; background: var(--grain), linear-gradient(#ffffff14, #0000 30%, #0000 80%, #0006), linear-gradient(104deg, #505057 0, #34343a 28%, #26262a 47%, #0a0a0b 47.3%, #141416 100%); border-top: 1px solid #6a6a72; border-bottom: 1px solid #000; }
.strip > * { position: absolute; }
.led { left: 331px; top: 4px; width: 127px; height: 5px; border-radius: 0 0 3px 3px; background: #1e90ff; box-shadow: 0 0 12px #1e90ff, 0 0 2px #fff inset; }
.util { left: 668px; top: 13px; font-size: 10px; font-weight: 500; color: #d9dce1; }
.util::before { content: ""; display: inline-block; width: 9px; height: 2px; margin-right: 3px; vertical-align: 3px; background: #d9dce1; }
.keys b { position: absolute; top: 33px; width: 102px; height: 27px; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: #2f9bff; text-shadow: 0 0 6px #2f9bff80; background: linear-gradient(#2a2a2e, #0c0c0d 45%, #030304 55%, #111113); border: 2px solid #5f5f67; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 2px 3px #000a, inset 0 1px 0 #ffffff2e, inset 0 -1px 0 #000; }
.keys b:nth-child(1) { left: 35px; } .keys b:nth-child(2) { left: 159px; } .keys b:nth-child(3) { left: 282px; }
.keys b:nth-child(4) { left: 406px; } .keys b:nth-child(5) { left: 530px; } .keys b:nth-child(6) { left: 653px; }
.keys .w { color: #f1f2f4; text-shadow: none; }
.keys .lit { color: #fff; text-shadow: 0 1px 1px #000; background: linear-gradient(#9a9aa2, #55555c 45%, #2e2e33 55%, #3c3c42); border-color: #c9ccd3; }
/* El marco de la pantalla: los cuatro bordes hacen el bisel inclinado. */
.frame { top: 101px; height: 448px; box-sizing: border-box; border-style: solid; border-width: 14px 55px 34px; border-color: #18181b #222226 #2d2d32 #1d1d20; background: #000; border-radius: 0 0 4px 4px; box-shadow: inset 0 0 0 1px #000; }

/* Los paneles laterales. */
.panel { top: 104px; height: 426px; }
.panel > * { position: absolute; }
.p-left { left: 3px; width: 164px; border-radius: 6px 0 0 4px; background: var(--grain), repeating-linear-gradient(0deg, #ffffff0c 0 1px, #0000 1px 2px), linear-gradient(112deg, #3c3c42 0, #2a2a2e 30%, #46464d 48%, #2a2a2e 62%, #1c1c1f 100%); border: 1px solid #55555c; box-shadow: inset 0 1px 0 #ffffff38, inset 1px 0 0 #ffffff1a, inset 0 -2px 3px #0008, 0 0 0 1px #000; }
.p-right { left: 962px; width: 165px; border-radius: 0 6px 4px 0; background: var(--grain), linear-gradient(#ffffff12, #0000 25%, #0000 75%, #0008), repeating-linear-gradient(90deg, #1e1e21 0 1.5px, #050506 1.5px 4.5px); border: 1px solid #2c2c31; box-shadow: inset 0 1px 0 #ffffff1a, 0 0 0 1px #000; }
.lbl { font-size: 8px; font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; text-align: center; color: #c4c8cf; white-space: nowrap; }

/* Arriba a la izquierda, como en el aparato: el puerto USB con su marco azul, «5V ⎓ 1A» y el símbolo USB; a su lado el
   portátil, el piloto, «USB STOP» y su botón; debajo, la ranura SD (marco metálico, tapa y luz azul) y su rótulo. */
.usb { left: 18px; top: 15px; width: 74px; height: 68px; box-sizing: border-box; border: 4px solid #2a95ff; border-radius: 6px; background: radial-gradient(70% 55% at 50% 30%, #3c3c42, #17171a 70%), #111113; box-shadow: 0 0 14px #1e90ffb8, 0 0 3px #8cc8ff, inset 0 0 0 1.5px #0a1a2e, inset 0 0 0 3px #000, inset 0 6px 10px #0009; }
.usb::before { content: ""; position: absolute; inset: 5px; border-radius: 3px; background: linear-gradient(#ffffff14, #0000 40%); }
.usb::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 12px; margin-left: -13px; border-radius: 13px 13px 0 0; background: radial-gradient(60% 100% at 50% 100%, #000, #050506); box-shadow: inset 0 1px 0 #ffffff1a; }
.l-5v { left: 18px; top: 89px; width: 74px; font-size: 8.500px; font-weight: 500; color: #d9dce1; }
.usb-ic { left: 42px; top: 101px; width: 26px; height: 12px; fill: #d9dce1; stroke: #d9dce1; stroke-width: 1.300; stroke-linecap: round; stroke-linejoin: round; }
.link { left: 112px; top: 7px; width: 22px; height: 14px; box-sizing: border-box; border: 1.500px solid #d9dce1; border-radius: 1.500px; }
.link::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -5px; height: 2.500px; border-radius: 0 0 2px 2px; background: #d9dce1; }
.l-usbstop { left: 96px; top: 34px; width: 56px; font-size: 11.500px; font-weight: 500; line-height: 1.05; color: #e1e4e9; }
.l-usbstop::before { content: ""; display: block; width: 10px; height: 2.500px; margin: 0 auto 5px; background: #d9dce1; }
.ringbtn { left: 101px; top: 76px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a5a62, #1a1a1c 22%, #0000 23%), radial-gradient(circle, #121214 0 30%, #050506 31% 50%, #0000 51%), conic-gradient(from -40deg, #d9dce1, #55555c 14%, #1c1c1f 28%, #8a8a92 45%, #e4e7ec 52%, #55555c 66%, #1c1c1f 80%, #d9dce1); box-shadow: 0 3px 6px #000c, 0 0 0 1px #000, inset 0 0 0 1px #0008; }
.sd { left: 16px; top: 141px; width: 132px; height: 80px; box-sizing: border-box; border-radius: 7px; background: linear-gradient(#77777e, #45454b 45%, #2a2a2e); box-shadow: 0 0 0 1px #000, 0 3px 5px #000b, inset 0 1px 0 #ffffffa0; }
.sd::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; background: #0a0a0b; box-shadow: inset 0 2px 4px #000; }
.sd i { position: absolute; left: 8px; right: 8px; top: 7px; height: 52px; border-radius: 3px; background: linear-gradient(#5e5e65, #3d3d43 55%, #313136); box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #0008, 0 2px 3px #000c; }
.sd::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 4px; border-radius: 2px; background: #2a95ff; box-shadow: 0 0 8px #1e90ff, 0 0 2px #8cc8ff; }
.l-sd { left: 0; top: 231px; width: 164px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 500; color: #e1e4e9; }
.l-sd svg { width: 11px; height: 15px; fill: none; stroke: #d9dce1; stroke-width: 1.300; stroke-linejoin: round; stroke-linecap: round; }
.mini-knob { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #0000 58%, #000b 100%), conic-gradient(from -45deg, #a4a4ad, #33333a 13%, #0e0e10 25%, #3a3a40 38%, #8a8a93 50%, #33333a 63%, #0e0e10 75%, #3a3a40 88%, #a4a4ad); border: 1px solid #000; box-shadow: 0 0 0 2px #2a2a2e, 0 0 0 3px #000, 0 5px 8px #000d, inset 0 1px 1px #ffffff50; }
.time { left: 66px; top: 280px; }
.l-time { left: 18px; top: 284px; width: 44px; font-size: 9px; font-weight: 500; }
.l-auto { left: 102px; top: 284px; width: 44px; font-size: 9px; font-weight: 500; }
.l-time::before, .l-auto::before { content: ""; display: block; width: 6px; height: 2px; margin: -8px auto 6px; background: #c4c8cf; }
.sq { top: 351px; width: 54px; height: 29px; box-sizing: border-box; display: grid; place-items: center; font-size: 8px; color: #ff3838; text-shadow: 0 0 6px #ff383880; background: linear-gradient(#1a1a1c, #050506); border: 2px solid #55555c; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 3px #000a, inset 0 1px 0 #ffffff24; }
.slip { left: 20px; } .quant { left: 89px; font-size: 6.5px; }
.slip em { padding: 2px 8px; font-size: 9px; color: #1a0606; background: #e02a2a; border-radius: 2px; }

/* Arriba a la derecha, medido sobre una foto del aparato (en px de este panel, 165 de ancho):
   - el encendido, centrado en (63, 22), y la pestaña del borde de arriba;
   - la carcasa de las teclas, oscura, con su capucha encima (de y 40 a 332) y las cuatro teclas dentro (de y 63 a 325),
     claras y con brillo; la línea curva de BACK es un trozo de círculo con el mismo centro que el selector;
   - la carcasa sigue al marco de la pantalla: empieza justo en su borde (sin pisarlo) y es de su mismo color, sin sombra,
     así que parece el marco que se ensancha alrededor de las teclas;
   - el selector: disco negro redondo de 146 px con centro en (73.5, 187), sin pisar el marco, torneado y con reflejos; dentro, una ranura, el
     anillo blanco iluminado (70 px, 5 de grosor; por encima del velo de la carcasa, para que brille) y el botón que gira. */
.p-right::after { content: ""; position: absolute; left: 46px; top: -5px; width: 38px; height: 5px; border-radius: 3px 3px 0 0; background: linear-gradient(#3a3a40, #1e1e21); box-shadow: inset 0 1px 0 #ffffff30, 0 0 0 1px #000; }
.power { left: 54px; top: 13px; width: 18px; height: 18px; box-sizing: border-box; border: 1.800px solid #e8eaee; border-top-color: #0000; border-radius: 50%; }
.power::after { content: ""; position: absolute; left: 50%; top: -6px; width: 1.800px; height: 9px; margin-left: -0.900px; border-radius: 1px; background: #e8eaee; }

.cluster { left: -4px; top: 40px; width: 140px; height: 292px; border-radius: 0 44px 24px 0 / 0 30px 24px 0; background: #27272b; box-shadow: inset -1.500px 0 0 #ffffff1a; overflow: hidden; }
.cluster::after { content: none; }
.cluster b { position: absolute; width: 56px; height: 74px; box-sizing: border-box; display: grid; justify-items: center; text-align: center; font-size: 7px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: #f2f3f5; text-shadow: 0 1px 1px #0009; }
.c-back, .c-tag { top: 23px; align-content: start; background: linear-gradient(#66666c, #55555b 30%, #4c4c52 52%, #626268 74%, #3a3a3f 92%); box-shadow: inset 0 1px 0 #ffffff66, inset 0 -1px 0 #0008, 0 0 0 1px #000; }
.c-back { left: 19px; padding-top: 21px; font-size: 9.500px; border-radius: 13px 2px 2px 2px; }
.c-tag { right: 4px; padding-top: 18.500px; border-radius: 2px 13px 2px 2px; }
.c-filt, .c-short { bottom: 7px; align-content: end; background: linear-gradient(#2e2e33, #6a6a70 16%, #58585e 40%, #4a4a50 75%, #55555b); box-shadow: inset 0 -1px 0 #ffffff40, inset 0 1px 0 #0008, 0 0 0 1px #000; }
.c-filt { left: 19px; padding-bottom: 10px; border-radius: 2px 2px 2px 13px; }
.c-short { right: 4px; padding-bottom: 13px; font-size: 7.500px; border-radius: 2px 2px 13px 2px; }
.c-filt i { display: inline-block; vertical-align: 0.250em; margin-right: 1.500px; background: currentColor; }
.c-filt .pt { width: 2.500px; height: 2.500px; } .c-filt .dash { width: 6px; height: 2px; }
.c-back::after { content: ""; position: absolute; left: -31px; top: 35px; width: 178px; height: 178px; box-sizing: border-box; border: 1px solid #ffffff59; border-radius: 50%; -webkit-mask: conic-gradient(from 334deg, #0000, #000 4deg 17deg, #0000 21deg); mask: conic-gradient(from 334deg, #0000, #000 4deg 17deg, #0000 21deg); }

.rotary { left: 0.500px; top: 114px; width: 146px; height: 146px; border-radius: 50%;
	background: radial-gradient(circle, #0000 0 35px, #000 35.500px 38.500px, #0000 39.500px),
		radial-gradient(closest-side, #0009 0 45%, #0004 62%, #0000 78% 90%, #0009 97%, #0000 100%),
		repeating-radial-gradient(circle, #ffffff08 0 0.600px, #0000 0.600px 2px),
		conic-gradient(#111113 0deg, #222226 60deg, #6a6a72 115deg, #26262a 160deg, #111113 220deg, #2a2a2f 260deg, #7a7a82 300deg, #2a2a2f 335deg, #111113 360deg);
	box-shadow: 0 0 0 1px #000, 0 0 0 3px #0a0a0b, 0 14px 28px #000e, inset 0 1px 1px #ffffff52, inset 0 -3px 6px #000; }
.rotary::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.500px #2a2a2f, inset 0 2px 1px #ffffff26; }
.rotary-ring { position: absolute; z-index: 6; inset: 38px; box-sizing: border-box; border-radius: 50%; border: 5px solid #f6f8fb; background: #000; box-shadow: 0 0 10px #ffffff70, 0 0 2px #fff, 0 0 0 1px #000, inset 0 0 2px #0008; }
.rotary-ring > * { position: absolute; border-radius: 50%; }
/* El botón que gira: del color del marco de la pantalla, con su borde negro y estrías anchas en el canto. Sin will-change:
   con su propia capa, algún navegador lo dibujaba por encima de la cara de metal. */
.rotary-teeth { z-index: 0; inset: 2px; box-sizing: border-box; border: 1.500px solid #000; background: radial-gradient(closest-side, #18181b calc(100% - 8px), #0000 calc(100% - 7.500px)), repeating-conic-gradient(#000 0 11deg, #1e1e21 11deg 22.500deg); box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px #000; }
.rotary-shade { display: none; }
/* En medio, quieta (el brillo no gira con el mando), la cara de metal torneado del mando de VINYL SPEED ADJ. */
.rotary-top { z-index: 2; inset: 10px; background: radial-gradient(circle, #0000 58%, #000b 100%), conic-gradient(from -45deg, #a4a4ad, #33333a 13%, #0e0e10 25%, #3a3a40 38%, #8a8a93 50%, #33333a 63%, #0e0e10 75%, #3a3a40 88%, #a4a4ad); border: 1px solid #000; box-shadow: 0 0 0 1.500px #2a2a2e, 0 0 0 2.500px #000, 0 3px 5px #000d, inset 0 1px 1px #ffffff50; }
.formats { left: 25px; top: 358px; font-size: 14px; font-style: italic; font-weight: 700; line-height: 1.25; letter-spacing: 0.040em; color: #eceef1; transform: scaleX(0.840); transform-origin: 0 0; }

/* Hot cues. */
.l-call { left: 25px; top: 538px; font-size: 9px; font-weight: 500; }
.l-call u { padding: 0 2px; border: 1px solid #c4c8cf; border-radius: 2px; font-weight: 500; }
.call { left: 25px; top: 556px; width: 77px; height: 44px; box-sizing: border-box; border: 2px solid #505057; border-radius: 5px; background: linear-gradient(#141416, #030304); box-shadow: 0 0 0 1px #000, 0 2px 4px #000b, inset 0 1px 0 #ffffff24; }
.call::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 20px; margin: -10px 0 0 -13px; border-radius: 3px; background: linear-gradient(135deg, #6a6a71, #2a2a2e); }
.call-line { left: 116px; top: 577px; width: 40px; height: 1px; background: #8a8a92; }
.hot { left: 169px; top: 537px; width: 790px; height: 12px; display: grid; place-items: center; background: linear-gradient(#9a9aa2, #9a9aa2) center / 100% 1px no-repeat; }
.hot span { padding: 0 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; color: #d9dce1; background: #151517; }
.pads { left: 169px; top: 556px; width: 790px; display: flex; gap: 26px; }
.pads i { flex: 1; height: 44px; position: relative; box-sizing: border-box; border-radius: 4px; background: linear-gradient(#1d1d20, #08080a 40%, #030304); border: 2px solid #505057; box-shadow: 0 0 0 1px #000, 0 2px 4px #000b, inset 0 1px 0 #ffffff24, inset 0 -6px 8px #0009; }
.pads i::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 7px; height: 2.5px; border-radius: 2px; background: var(--c); box-shadow: 0 0 7px var(--c); }
.pads b { position: absolute; left: 9px; top: 6px; font-size: 10px; font-weight: 500; color: var(--c); }
.l-vinyl { left: 975px; top: 522px; width: 120px; font-size: 9px; font-weight: 500; line-height: 1.3; }
.vinyl { left: 1012px; top: 556px; width: 44px; height: 44px; outline: 2px dotted #8a8a92; outline-offset: 5px; }

/* De los pads para abajo. */
.ring { width: 50px; height: 50px; box-sizing: border-box; border-radius: 50%; border: 5px solid #ff9a1f; background: #0c0c0d; box-shadow: 0 0 14px -2px #ff9a1f, inset 0 0 6px #000; }
.ring.small { width: 40px; height: 40px; border: 1px solid #4a4a50; background: radial-gradient(#ff9a1f 0 18%, #0c0c0d 22%); box-shadow: none; }
.rule { height: 1px; background: #6a6a71; }
.rnd { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; color: #d9dce1; background: radial-gradient(circle at 38% 28%, #55555c, #1a1a1c 45%, #050506 80%); border: 1px solid #000; box-shadow: 0 0 0 2px #2a2a2e, 0 3px 6px #000c, inset 0 1px 1px #ffffff40; }
.rnd.big { width: 38px; height: 38px; }
.num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; color: #ff9a1f; background: #0c0c0d; border: 1px solid #4a4a50; text-shadow: 0 0 8px #ff9a1f; }
.rect { width: 46px; height: 34px; box-sizing: border-box; display: grid; place-items: center; text-align: center; font-size: 8px; line-height: 1.1; color: #d9dce1; background: linear-gradient(#26262a, #0c0c0d 50%, #050506); border: 2px solid #4c4c53; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 4px #000b, inset 0 1px 0 #ffffff24; }
.rect.blue { color: #2f9bff; text-shadow: 0 0 8px #2f9bff; } .rect.amber { color: #ff9a1f; }
.lever { left: 50px; top: 852px; width: 62px; height: 76px; border-radius: 5px; background: #09090a; border: 2px solid #44444b; }
.lever i { position: absolute; left: 6px; right: 6px; top: 8px; height: 22px; border-radius: 3px; background: linear-gradient(#5a5a61, #26262a); }
.big-btn { left: 38px; width: 106px; height: 106px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; font-size: 13px; background: radial-gradient(circle, #0e0e10 0 60%, #232326 62%); border: 5px solid; }
.cue-btn { top: 1288px; border-color: #ff9a1f; color: #ff9a1f; box-shadow: 0 0 18px -4px #ff9a1f; }
.play-btn { top: 1410px; border-color: #22e06a; color: #22e06a; box-shadow: 0 0 18px -4px #22e06a; }

.jog { left: 215px; top: 800px; width: 700px; height: 700px; border-radius: 50%; background: #0a0a0b; box-shadow: 0 24px 60px #000c, 0 0 0 2px #000, 0 0 0 5px #2a2a2e; }
.jog > * { position: absolute; border-radius: 50%; }
.jog::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(140deg, #ffffff1c, #0000 35%, #0000 60%, #0008); }
.jog-grip { inset: 0; background: repeating-conic-gradient(#3a3a40 0 0.5deg, #1a1a1c 0.9deg, #060607 1.6deg 2.2deg, #2a2a2e 2.6deg); -webkit-mask: radial-gradient(#0000 0 64%, #000 64.5%); mask: radial-gradient(#0000 0 64%, #000 64.5%); }
.jog-plate { inset: 5.5%; background: radial-gradient(circle, #0000 60%, #000a 100%), conic-gradient(from 20deg, #0b0b0c, #34343a 7%, #0b0b0c 16%, #0b0b0c 48%, #2c2c31 56%, #0b0b0c 66%, #0b0b0c); box-shadow: inset 0 0 0 2px #000, inset 0 2px 2px #ffffff1c, inset 0 0 60px #000; }
.jog-center { inset: 31%; background: #020203; border: 4px solid #e9ecf1; box-shadow: 0 0 0 10px #0a0a0b, 0 0 0 11px #3a3a40, 0 0 26px #ffffff30; }
.jog-center span { position: absolute; left: 50%; top: 7%; width: 5px; height: 20%; margin-left: -2.5px; background: #fff; border-radius: 3px; }

.tempo { left: 998px; top: 1092px; width: 60px; height: 400px; border-radius: 6px; background: linear-gradient(#000, #000) center / 4px 92% no-repeat, #0c0c0d; border: 1px solid #3a3a40; }
.tempo i { position: absolute; left: -8px; top: 45%; width: 74px; height: 30px; border-radius: 4px; background: linear-gradient(#55555c, #1c1c1f 48%, #e9ecf1 49% 51%, #2a2a2e 52%, #151517); border: 1px solid #000; box-shadow: 0 4px 10px #000; }