.ever-mpc-shell,
.ever-mpc-shell * {
  box-sizing: border-box;
}

.ever-mpc-shell {
  --mpc-bg: transparent;
  --mpc-ink: #f7f3eb;
  --mpc-muted: rgba(247,243,235,.66);
  --mpc-lcd-bg: #9abd48;
  --mpc-lcd-ink: #16230a;
  --mpc-pad-glow: rgba(255, 169, 73, .62);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--mpc-bg);
  color: var(--mpc-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body.evprd-light-theme .ever-mpc-shell {
  --mpc-ink: rgba(18,18,18,.94);
  --mpc-muted: rgba(18,18,18,.62);
}

.ever-mpc-stage {
  width: 100%;
  min-height: 100svh;
  padding: clamp(92px, 12vh, 126px) 14px clamp(96px, 12vh, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ever-mpc-device-wrap {
  position: relative;
  width: min(94vw, 1140px);
  filter: drop-shadow(0 44px 80px rgba(0,0,0,.56)) drop-shadow(0 10px 20px rgba(0,0,0,.24));
  transform: translateZ(0);
}

body.evprd-light-theme .ever-mpc-device-wrap {
  filter: drop-shadow(0 42px 68px rgba(0,0,0,.26)) drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.ever-mpc-device {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.ever-mpc-lcd {
  position: absolute;
  left: 25.2%;
  top: 12.55%;
  width: 24.8%;
  height: 12.6%;
  padding: .72% 1.0%;
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.02) 38%, rgba(0,0,0,.08)),
    var(--mpc-lcd-bg);
  color: var(--mpc-lcd-ink);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: clamp(8px, 1.18vw, 15px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: inset 0 0 12px rgba(0,0,0,.24), inset 0 0 8px rgba(255,255,255,.16);
}

.ever-mpc-lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .42;
}

.ever-mpc-lcd-line,
.ever-mpc-lcd-title {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
}

.ever-mpc-lcd-title span {
  display: inline-block;
  min-width: 100%;
}

.ever-mpc-lcd-title.is-long span {
  padding-left: 100%;
  animation: everMpcMarquee 8.8s linear infinite;
}

@keyframes everMpcMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.ever-mpc-pad-hit {
  position: absolute;
  z-index: 5;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.ever-mpc-pad-hit::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 11px;
  background: radial-gradient(circle, var(--mpc-pad-glow), transparent 66%);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.ever-mpc-pad-hit.is-pressed::after,
.ever-mpc-pad-hit.is-selected::after {
  opacity: .78;
  transform: scale(1.03);
}

.ever-mpc-pad-hit.is-unlock-glow::after {
  opacity: .92;
  transform: scale(1.06);
}

.ever-mpc-pad-hit.is-tunes-glow::after {
  opacity: .96;
  transform: scale(1.08);
  animation: evprd-tunes-pulse .36s ease-in-out 2;
}

@keyframes evprd-tunes-pulse {
  0%, 100% { opacity: .38; transform: scale(1.01); }
  50% { opacity: .98; transform: scale(1.08); }
}

/* 4x4 grey MPC pad map: row-major, top-left to bottom-right. */
.ever-mpc-pad-1  { left: 22.7%; top: 35.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-2  { left: 31.3%; top: 35.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-3  { left: 39.8%; top: 35.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-4  { left: 48.3%; top: 35.0%; width: 8.2%; height: 8.1%; }

.ever-mpc-pad-5  { left: 22.7%; top: 44.6%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-6  { left: 31.3%; top: 44.6%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-7  { left: 39.8%; top: 44.6%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-8  { left: 48.3%; top: 44.6%; width: 8.2%; height: 8.1%; }

.ever-mpc-pad-9  { left: 22.7%; top: 54.3%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-10 { left: 31.3%; top: 54.3%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-11 { left: 39.8%; top: 54.3%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-12 { left: 48.3%; top: 54.3%; width: 8.2%; height: 8.1%; }

.ever-mpc-pad-13 { left: 22.7%; top: 64.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-14 { left: 31.3%; top: 64.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-15 { left: 39.8%; top: 64.0%; width: 8.2%; height: 8.1%; }
.ever-mpc-pad-16 { left: 48.3%; top: 64.0%; width: 8.2%; height: 8.1%; }

.ever-mpc-media-stage {
  width: min(960px, 92vw);
  margin-top: clamp(16px, 3vh, 34px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  box-shadow: 0 24px 90px rgba(0,0,0,.36);
}

body.evprd-light-theme .ever-mpc-media-stage {
  border-color: rgba(0,0,0,.14);
  background: rgba(255,255,255,.42);
  box-shadow: 0 22px 70px rgba(0,0,0,.16);
}

.ever-mpc-media-stage video {
  display: block;
  width: 100%;
  max-height: 68vh;
  background: #000;
}

@media (max-width: 760px) {
  .ever-mpc-stage {
    min-height: auto;
    padding: 84px 10px 92px;
    justify-content: flex-start;
  }

  .ever-mpc-device-wrap {
    width: min(112vw, 720px);
  }

  .ever-mpc-lcd {
    font-size: clamp(6px, 1.65vw, 10px);
    padding: .62% .92%;
  }

  .ever-mpc-pad-hit::after {
    inset: -4px;
  }
}


/* v1.1: approved exact MPC pad hit-zone alignment from full-image calibration map. */
.ever-mpc-pad-1 { left: 21.7993% !important; top: 36.9213% !important; width: 7.7855% !important; height: 6.0185% !important; }
.ever-mpc-pad-2 { left: 30.5363% !important; top: 36.9213% !important; width: 7.8720% !important; height: 6.0185% !important; }
.ever-mpc-pad-3 { left: 39.2734% !important; top: 36.9213% !important; width: 7.8720% !important; height: 6.0185% !important; }
.ever-mpc-pad-4 { left: 47.9239% !important; top: 36.9213% !important; width: 7.8720% !important; height: 6.0185% !important; }
.ever-mpc-pad-5 { left: 21.7993% !important; top: 45.2546% !important; width: 7.7855% !important; height: 6.1343% !important; }
.ever-mpc-pad-6 { left: 30.5363% !important; top: 45.2546% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-7 { left: 39.2734% !important; top: 45.2546% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-8 { left: 47.9239% !important; top: 45.2546% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-9 { left: 21.7993% !important; top: 53.5880% !important; width: 7.7855% !important; height: 6.1343% !important; }
.ever-mpc-pad-10 { left: 30.5363% !important; top: 53.5880% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-11 { left: 39.2734% !important; top: 53.5880% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-12 { left: 47.9239% !important; top: 53.5880% !important; width: 7.8720% !important; height: 6.1343% !important; }
.ever-mpc-pad-13 { left: 21.7993% !important; top: 62.0370% !important; width: 7.7855% !important; height: 6.2500% !important; }
.ever-mpc-pad-14 { left: 30.5363% !important; top: 62.0370% !important; width: 7.8720% !important; height: 6.2500% !important; }
.ever-mpc-pad-15 { left: 39.2734% !important; top: 62.0370% !important; width: 7.8720% !important; height: 6.2500% !important; }
.ever-mpc-pad-16 { left: 47.9239% !important; top: 62.0370% !important; width: 7.8720% !important; height: 6.2500% !important; }