:root {
  --app-bg-top: #d6f6f6;
  --app-bg-bottom: #c6eff1;
  --panel-white: #ffffff;
  --panel-border: rgba(74, 57, 45, 0.18);
  --panel-shadow-color: #c7d6d8;
  --teal: #35d1e3;
  --teal-shadow: #1ea9bd;
  --text-strong: #32241c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    "Hiragino Maru Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
  background:
    radial-gradient(circle at 14% 18%, rgba(188, 238, 240, 0.92), transparent 14%),
    radial-gradient(circle at 80% 18%, rgba(188, 238, 240, 0.82), transparent 16%),
    linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg-bottom) 100%);
  color: var(--text-strong);
}

body {
  display: grid;
  place-items: center;
  padding: 10px;
}

.app {
  display: grid;
  gap: 4px;
  width: min(100%, 980px);
}

.stage-shell {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 8px 10px 2px;
  border-radius: 20px;
  border: 1.5px solid var(--panel-border);
  background: #ffffff;
  box-shadow: 0 8px 0 var(--panel-shadow-color);
  overflow: hidden;
}

.display-switches {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  align-items: center;
}

.display-button,
.accidental-button,
.toolbar-button {
  border: 1.5px solid rgba(83, 104, 87, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #6f5a4b;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--panel-shadow-color);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.display-button,
.accidental-button {
  padding: 7px 10px;
  font-size: 11px;
}

.display-button.is-active,
.accidental-button.is-active {
  background: color-mix(in srgb, var(--note-color, #ff6b6b) 20%, #ffffff);
  color: #352820;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--note-color, #ff6b6b) 70%, #b5c0be);
}

.display-button:active,
.accidental-button:active,
.toolbar-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--panel-shadow-color);
}

.stage-content {
  display: grid;
  align-items: center;
  height: 360px;
  min-height: 360px;
}

.display-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  align-items: center;
  justify-items: center;
  height: 100%;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.display-grid.is-solo {
  height: 100%;
}

.display-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.display-panel.staff-panel {
  min-height: 0;
}

.display-panel.staff-panel.is-solo {
  min-height: 0;
}

.staff-figure {
  display: grid;
  place-items: center;
  width: min(100%, var(--staff-width));
  height: min(100%, var(--staff-height));
}

.staff-svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
}

.character-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: min(44vw, 182px);
  height: min(44vw, 182px);
  border-radius: 999px;
  border: 7px solid var(--note-color);
  background: #ffffff;
  overflow: visible;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--note-color) 70%, #b5c0be),
    inset 0 0 0 2px rgba(74, 57, 45, 0.06);
}

.character-ring-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
}

.character-ring-image {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform: translate(var(--friend-shift-x, 0px), var(--friend-shift-y, 0px))
    scale(var(--friend-scale, 1));
}

.character-ring-placeholder {
  color: rgba(89, 70, 57, 0.42);
  font-size: 44px;
  font-weight: 900;
}

.character-accidental-badge {
  position: absolute;
  top: -12px;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--note-color) 18%, #ffffff);
  color: #4b382c;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--note-color) 70%, #b5c0be);
  z-index: 3;
}

.character-accidental-badge.is-sharp {
  right: -10px;
}

.character-accidental-badge.is-flat {
  left: -10px;
}

.code-panel-label {
  color: rgba(80, 62, 49, 0.54);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.code-panel-value {
  color: #2d221b;
  font-size: clamp(72px, 11vw, 138px);
  line-height: 1;
  font-weight: 900;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  align-content: center;
  text-align: center;
  min-height: 160px;
}

.empty-title {
  color: #382a20;
  font-size: 22px;
  font-weight: 900;
}

.empty-text {
  max-width: 28ch;
  color: #6e594c;
  font-size: 15px;
  line-height: 1.45;
}

.keyboard-shell {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1.5px solid var(--panel-border);
  background: linear-gradient(180deg, #35d1e3 0%, #2dbed1 100%);
  box-shadow: 0 6px 0 var(--teal-shadow);
}

.keyboard-toolbar {
  display: flex;
  justify-content: flex-end;
}

.toolbar-button {
  padding: 8px 12px;
  font-size: 12px;
}

.toolbar-button.is-active {
  background: #fff7c7;
  box-shadow: 0 4px 0 #dcb95f;
}

.keyboard-mount {
  display: grid;
}

.keyboard-viewport {
  overflow-x: auto;
  padding-bottom: 2px;
  user-select: none;
  touch-action: none;
}

.keybed {
  position: relative;
  min-width: 760px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, #5c3f31 0%, #2f1f18 54%, #241711 100%);
  border: 1.5px solid rgba(35, 20, 16, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 7px 0 #2a1a14;
}

.top-rail {
  position: absolute;
  top: 10px;
  left: 16px;
  right: 16px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.white-key-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(72px, 1fr));
  gap: 8px;
}

.white-key {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 248px;
  padding: 12px 9px 18px;
  border: 0;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfdfd 10%, #eef2f7 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(68, 52, 42, 0.14),
    0 8px 0 #d8dee7;
  transition:
    transform 90ms ease,
    box-shadow 90ms ease,
    background 120ms ease;
}

.white-key.is-active {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--note-color) 12%, #ffffff) 36%,
      color-mix(in srgb, var(--note-color) 20%, #f2f5fb) 100%
    );
}

.white-key.is-pressed {
  transform: translateY(8px);
  box-shadow:
    inset 0 0 0 1.5px rgba(68, 52, 42, 0.14),
    0 2px 0 #d8dee7;
}

.key-character-wrap,
.key-spacer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  min-height: 100%;
  padding-bottom: 8px;
}

.key-character-badge {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 4px solid var(--note-color);
  background: #ffffff;
  overflow: hidden;
  box-shadow:
    0 5px 0 color-mix(in srgb, var(--note-color) 72%, #d8dee7),
    inset 0 0 0 1px rgba(68, 52, 42, 0.08);
}

.key-character-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 9px;
  overflow: hidden;
  border-radius: 999px;
}

.key-character-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--friend-shift-x, 0px), var(--friend-shift-y, 0px))
    scale(var(--friend-scale, 1));
}

.black-key-layer {
  position: absolute;
  top: 18px;
  left: 16px;
  right: 16px;
  height: 58%;
  z-index: 2;
  pointer-events: none;
}

.black-key {
  position: absolute;
  top: 0;
  left: var(--key-left);
  width: var(--key-width);
  min-width: 44px;
  height: 66%;
  border: 0;
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, #564136 0%, #2b1e19 68%, #1b130f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 0 #120d0b;
  transition:
    box-shadow 90ms ease,
    background 120ms ease;
  pointer-events: auto;
}

.black-key.is-active {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--note-color) 35%, #564136) 0%,
      color-mix(in srgb, var(--note-color) 24%, #2b1e19) 68%,
      color-mix(in srgb, var(--note-color) 16%, #1b130f) 100%
    );
}

.black-key.is-pressed {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 0 #120d0b;
}

.black-key-glow {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--note-color) 78%, #ffffff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

@media (max-width: 520px) {
  body {
    padding: 8px;
  }

  .stage-shell {
    padding: 8px;
  }

  .display-button,
  .accidental-button {
    padding: 6px 9px;
    font-size: 12px;
  }

  .character-ring {
    width: min(40vw, 154px);
    height: min(40vw, 154px);
  }

  .stage-content,
  .display-grid {
    min-height: 0;
  }

  .stage-content {
    min-height: 316px;
    height: 316px;
  }

  .display-panel.staff-panel {
    min-height: 0;
  }

  .display-panel.staff-panel.is-solo {
    min-height: 0;
  }

  .keybed {
    min-width: 640px;
    padding-inline: 12px;
  }

  .top-rail {
    left: 12px;
    right: 12px;
  }

  .white-key-row {
    gap: 6px;
  }

  .white-key {
    min-height: 180px;
    padding-inline: 7px;
    padding-bottom: 14px;
  }

  .key-character-badge {
    width: 62px;
    height: 62px;
  }

  .black-key-layer {
    left: 12px;
    right: 12px;
  }
}

@media (max-width: 900px) {
  body {
    padding: 8px;
  }

  .app {
    gap: 3px;
  }

  .stage-shell {
    gap: 6px;
    padding: 8px 8px 2px;
  }

  .stage-content,
  .display-grid {
    min-height: 0;
  }

  .stage-content {
    min-height: 320px;
    height: 320px;
  }

  .character-ring {
    width: min(30vw, 156px);
    height: min(30vw, 156px);
  }

  .code-panel-value {
    font-size: clamp(54px, 10vw, 102px);
  }

  .keyboard-shell {
    gap: 10px;
    padding: 14px;
  }
}

@media (max-width: 640px) {
  .app {
    gap: 2px;
  }

  .stage-shell {
    gap: 6px;
    padding: 8px 8px 0;
  }

  .stage-content,
  .display-grid {
    min-height: 0;
  }

  .stage-content {
    min-height: 292px;
    height: 292px;
  }

  .character-ring {
    width: min(34vw, 132px);
    height: min(34vw, 132px);
  }

  .code-panel-value {
    font-size: clamp(44px, 12vw, 84px);
  }

  .keyboard-shell {
    gap: 8px;
    padding: 12px;
  }
}