#keyboard-bg {
  /* matte keycap role tokens */
  --alphaBgTop: #ffffff;
  --alphaBgBottom: #fbfcfe;
  --alphaSide: #e8ebef;
  --alphaLegend: #353b44;
  --alphaSubLegend: #7a8491;

  --modBgTop: #46494d;
  --modBgBottom: #35383d;
  --modSide: #2d3035;
  --modLegend: #f2eadf;
  --modSubLegend: #c8c0b6;

  --accentBgTop: #c9834e;
  --accentBgBottom: #b86f3d;
  --accentSide: #9f5f35;
  --accentLegend: #fff1df;
  --accentSubLegend: #ead4bd;

  --keycapBorder: rgba(148, 163, 184, 0.24);
  --keycapShadow: rgba(15, 23, 42, 0.12);
  --keycapInnerHighlight: rgba(255, 255, 255, 0.38);
  --selectedOutline: #38bdf8;
  --invalidOutline: #ef4444;

  --keycap-bg: var(--alphaBgBottom);
  --keycap-bg-top: var(--alphaBgTop);
  --keycap-bg-bottom: var(--alphaBgBottom);
  --keycap-side: var(--alphaSide);
  --keycap-legend: var(--alphaLegend);
  --keycap-sublegend: var(--alphaSubLegend);
  --keycap-border: var(--keycapBorder);
  --keycap-text: var(--keycap-legend);
  --keycap-subtext: var(--keycap-sublegend);
  --keycap-shadow: var(--keycapShadow);
  --keycap-selected: var(--selectedOutline);
  --keycap-invalid: var(--invalidOutline);
  --keycap-radius: 10px;
}

#keyboard-bg .keycap--alpha {
  --roleBgTop: var(--keycap-bg-top, var(--alphaBgTop));
  --roleBgBottom: var(--keycap-bg, var(--alphaBgBottom));
  --roleSide: var(--keycap-side, var(--alphaSide));
  --roleLegend: var(--keycap-legend, var(--alphaLegend));
  --roleSubLegend: var(--keycap-sublegend, var(--alphaSubLegend));
}

#keyboard-bg .keycap--modifier {
  --roleBgTop: var(--keycap-bg-top, var(--modBgTop));
  --roleBgBottom: var(--keycap-bg, var(--modBgBottom));
  --roleSide: var(--keycap-side, var(--modSide));
  --roleLegend: var(--keycap-legend, var(--modLegend));
  --roleSubLegend: var(--keycap-sublegend, var(--modSubLegend));
}

#keyboard-bg .keycap--accent {
  --roleBgTop: var(--keycap-bg-top, var(--accentBgTop));
  --roleBgBottom: var(--keycap-bg, var(--accentBgBottom));
  --roleSide: var(--keycap-side, var(--accentSide));
  --roleLegend: var(--keycap-legend, var(--accentLegend));
  --roleSubLegend: var(--keycap-sublegend, var(--accentSubLegend));
}

#keyboard-bg .modern-keycap {
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.08));
  transition: filter 120ms ease, opacity 120ms ease;
}

#keyboard-bg .modern-keycap .keycap-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.035)),
    var(--roleBgBottom) !important;
  border: 1px solid var(--keycapBorder) !important;
  border-radius: var(--keycap-radius) !important;
  box-shadow:
    0 2px 0 var(--keycap-side),
    0 5px 9px var(--keycapShadow),
    inset 0 1px 0 var(--keycapInnerHighlight);
  box-sizing: border-box;
  pointer-events: none;
  transition: filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
  z-index: 1;
}

#keyboard-bg .modern-keycap .keycap-body-bridge {
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#keyboard-bg .modern-keycap .keycap-side-shadow {
  background: var(--roleSide);
  border-radius: var(--keycap-radius) !important;
  box-shadow: inset 0 -2px 2px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

#keyboard-bg .modern-keycap .keycap-top-face {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(15, 23, 42, 0.025)),
    var(--roleBgTop) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: calc(var(--keycap-radius) - 3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px rgba(15, 23, 42, 0.035);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

#keyboard-bg .keycap--accent .keycap-body,
#keyboard-bg .keycap--accent .keycap-top-face,
#keyboard-bg .keycap--accent .keycap-side-shadow {
  filter: saturate(0.82) brightness(0.96);
}

#keyboard-bg .modern-keycap .keycap-label-layer {
  color: var(--keycap-legend);
  font-family: "Inter", "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
  pointer-events: none;
  text-shadow: none;
  z-index: 4;
}

#keyboard-bg .modern-keycap .keycap-label {
  overflow: hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

#keyboard-bg .modern-keycap .keycap-label-text {
  color: var(--keycap-legend);
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  text-shadow: none;
}

#keyboard-bg .modern-keycap .keycap-label-primary {
  font-weight: 520;
  letter-spacing: 0;
}

#keyboard-bg .modern-keycap .keycap-label-secondary .keycap-label-text,
#keyboard-bg .modern-keycap .keycap-label-extra .keycap-label-text {
  color: var(--keycap-sublegend);
  font-weight: 480;
  opacity: 0.72;
}

#keyboard-bg .keycap--alpha .keylabel0 .keycap-label-text,
#keyboard-bg .keycap--alpha .keylabel4 .keycap-label-text {
  text-align: center;
}

#keyboard-bg .keycap--modifier .keylabel0 .keycap-label-text,
#keyboard-bg .keycap--modifier .keylabel3 .keycap-label-text,
#keyboard-bg .keycap--modifier .keylabel6 .keycap-label-text,
#keyboard-bg .keycap--accent .keylabel0 .keycap-label-text,
#keyboard-bg .keycap--accent .keylabel3 .keycap-label-text,
#keyboard-bg .keycap--accent .keylabel6 .keycap-label-text {
  padding-left: 4px;
  text-align: left;
}

#keyboard-bg .modern-keycap .keycap-selection-outline {
  border: 2px solid transparent;
  border-radius: calc(var(--keycap-radius) + 2px) !important;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  z-index: 5;
}

#keyboard-bg .hover .modern-keycap {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.1));
}

#keyboard-bg .hover .modern-keycap .keycap-body {
  box-shadow:
    0 2px 0 var(--keycap-side),
    0 6px 10px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-0.5px);
}

#keyboard-bg .selected .modern-keycap .keycap-selection-outline {
  border-color: var(--selectedOutline);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
  opacity: 1;
}

#keyboard-bg .dragging .modern-keycap,
#keyboard-bg .ui-draggable-dragging .modern-keycap {
  filter: drop-shadow(0 5px 10px rgba(15, 23, 42, 0.18));
  opacity: 0.82;
}

#keyboard-bg .dragging .modern-keycap .keycap-body,
#keyboard-bg .ui-draggable-dragging .modern-keycap .keycap-body {
  box-shadow:
    0 2px 0 var(--keycap-side),
    0 4px 8px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#keyboard-bg .error .modern-keycap .keycap-selection-outline,
#keyboard-bg .invalid .modern-keycap .keycap-selection-outline {
  border-color: var(--invalidOutline);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
  opacity: 1;
}

#keyboard-bg .ghosted.modern-keycap,
#keyboard-bg .modern-keycap.ghosted {
  opacity: 0.48;
}

#keyboard-bg .decal.modern-keycap .keycap-body,
#keyboard-bg .decal.modern-keycap .keycap-top-face,
#keyboard-bg .decal.modern-keycap .keycap-side-shadow {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}