/* SAMPKAI Heritage UI preview: presentation only, no control or audio changes. */
:root {
  --heritage-ink: #0c1012;
  --heritage-graphite: #262b2d;
  --heritage-panel: #151b1d;
  --heritage-border: #555b59;
  --heritage-label: #d9d3c6;
  --heritage-muted: #a8aca5;
  --heritage-signal: #d34a3f;
  --heritage-amber: #e5b35f;
  --heritage-screen: #8be3bf;
}

body.heritage-ui,
.heritage-ui #root > div {
  background: radial-gradient(ellipse 90% 70% at 50% -18%, #343c3d 0%, #151a1c 48%, #090c0d 100%) !important;
  color: var(--heritage-label);
}

.heritage-ui #root > div > div[class*="max-w-[940px]"]:not([style*="scale("]) {
  background: linear-gradient(180deg, #303638 0%, #1e2426 100%) !important;
  border: 1px solid #4b5353 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 10px 24px rgba(0,0,0,.24) !important;
  backdrop-filter: none !important;
}

/* Top navigation: restrained metal tabs and a clearly lit selected mode. */
.heritage-ui #root > div > div[class*="z-35"] button {
  color: #c9ceca !important;
  background: linear-gradient(180deg, #303738, #22282a) !important;
  border: 1px solid #535c5b !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.3) !important;
  min-height: 35px;
  letter-spacing: .035em;
}

.heritage-ui #root > div > div[class*="z-35"] button[class*="shadow-md"] {
  color: #151515 !important;
  background: linear-gradient(180deg, #f2c978, #cf9450) !important;
  border-color: #f1c272 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px rgba(248,203,121,.18) !important;
}

.heritage-ui #root > div > div[class*="z-35"] button:hover:not(:disabled) {
  border-color: var(--heritage-amber) !important;
}

/* Main chassis: SP-1200-inspired graphite with quieter, more precise edges. */
.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] {
  background: linear-gradient(145deg, #50575a 0%, #343b3d 8%, #252b2d 58%, #1c2224 100%) !important;
  border: 3px solid #6b7270 !important;
  border-radius: 19px !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.24), inset 0 -2px 4px rgba(0,0,0,.6), 0 28px 70px rgba(0,0,0,.6) !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] {
  background: linear-gradient(180deg, #202728, #101617) !important;
  border: 1px solid #515b59 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.45) !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] .font-digital {
  letter-spacing: -.045em;
  filter: drop-shadow(0 1px 0 #000);
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] [class*="text-neutral-500"] {
  color: var(--heritage-muted) !important;
}

/* ASR-style display zones; light remains high contrast without neon glare. */
.heritage-ui #root [class*="bg-[#121216]"],
.heritage-ui #root [class*="bg-[#0b1016]"],
.heritage-ui #root [class*="bg-[#151412]"] {
  background: linear-gradient(180deg, #1b2224 0%, #111719 100%) !important;
  border-color: #505956 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 16px rgba(0,0,0,.28) !important;
}

.heritage-ui #root [class*="bg-[#050508]"] {
  background-color: #0b1111 !important;
  border-color: #404b48 !important;
}

.heritage-ui #root .sampkai-top-bank-grid,
.heritage-ui #root .sampkai-bottom-bank-panel {
  border-color: #59605c !important;
  background: linear-gradient(180deg, #202627, #13191a) !important;
}

.heritage-ui #root .sampkai-top-bank-button,
.heritage-ui #root .sampkai-bottom-bank-button {
  border: 1px solid #69706b;
  border-bottom: 2px solid #0b1010;
  background: linear-gradient(180deg, #414947, #2b3230) !important;
  color: #e3ded2 !important;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.heritage-ui #root .sampkai-top-bank-button[class*="scale-105"],
.heritage-ui #root .sampkai-bottom-bank-button[class*="scale-105"] {
  background: linear-gradient(180deg, #f1c976, #d49b51) !important;
  color: #151918 !important;
  border-color: #f2cc82 !important;
  box-shadow: 0 0 0 1px rgba(240,196,115,.4), 0 0 14px rgba(235,168,72,.22) !important;
}

/* MPC 60-style tactile pad faces. Keep selected and pressed states intact. */
.heritage-ui #root [class*="aspect-square"][class*="touch-none"]:not([class*="border-[#ff2a2a]"]) {
  background: linear-gradient(150deg, #5b6260 0%, #444b49 45%, #303734 100%) !important;
  border-color: #232a28 !important;
  border-bottom-color: #0b1010 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 7px rgba(0,0,0,.46) !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"] {
  border-radius: 11px !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"][class*="border-[#ff2a2a]"] {
  border-color: #d95e50 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 2px rgba(217,94,80,.42), 0 0 18px rgba(217,94,80,.25) !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"] > div:last-child > span:first-child {
  font-size: 11px !important;
  line-height: 1.15;
  letter-spacing: .015em;
}

.heritage-ui #root input[type="range"] {
  accent-color: var(--heritage-amber) !important;
}

.heritage-ui #root :is(button, input, select, a):focus-visible {
  outline: 2px solid var(--heritage-screen) !important;
  outline-offset: 2px;
}

@media (max-width: 639px) {
  .heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] {
    border-width: 2px !important;
    border-radius: 16px !important;
  }
  .heritage-ui #root > div > div[class*="z-35"] button {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heritage-ui #root button,
  .heritage-ui #root [class*="aspect-square"][class*="touch-none"] {
    transition-duration: 0.01ms !important;
  }
}

/* Preview v2: a visibly new console silhouette, still CSS-only. */
body.heritage-ui,
.heritage-ui #root > div {
  background:
    radial-gradient(circle at 50% -8%, rgba(79, 107, 103, .34), transparent 38%),
    linear-gradient(180deg, #122022 0%, #0d1518 46%, #090f11 100%) !important;
}

.heritage-ui #root > div > div[class*="z-30"][class*="max-w-[940px]"] {
  background: #172426 !important;
  color: #c4d0ca !important;
  border: 1px solid #52635f !important;
  border-radius: 6px !important;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .28) !important;
}

.heritage-ui #root > div > div[class*="z-35"] {
  position: relative;
  flex-shrink: 0;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 7px !important;
  min-height: 130px;
  padding: 8px !important;
  background: #dfddd2 !important;
  border: 1px solid #a4aaa3 !important;
  border-radius: 14px !important;
  box-shadow: 0 19px 38px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .9) !important;
  overflow: visible;
}

.heritage-ui #root > div > div[class*="z-35"]::before {
  content: "ANVIL KRAFT STUDIO";
  grid-column: 1 / -1;
  display: block;
  margin: -8px -8px 2px;
  padding: 17px 21px 13px;
  background: linear-gradient(110deg, #eeeade, #d6d5ca);
  border-bottom: 1px solid #aeb4ad;
  color: #192c2d;
  font: 900 clamp(20px, 2.5vw, 30px)/1.05 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.055em;
}

.heritage-ui #root > div > div[class*="z-35"]::after {
  content: "12-BIT SOUL  /  MODERN PRECISION";
  position: absolute;
  top: 23px;
  right: 20px;
  color: #576864;
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}

.heritage-ui #root > div > div[class*="z-35"] button {
  min-width: 0 !important;
  min-height: 49px !important;
  padding: 8px 5px !important;
  background: linear-gradient(180deg, #324244, #243335) !important;
  border: 1px solid #1c2a2b !important;
  border-bottom: 3px solid #101b1d !important;
  border-radius: 6px !important;
  color: #e3e7df !important;
  font: 800 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .045em;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
}

.heritage-ui #root > div > div[class*="z-35"] button:is([class*="shadow-md"], [class*="bg-[#ff2768]"]) {
  background: linear-gradient(180deg, #e9bb71, #c98c49) !important;
  border-color: #a86e33 !important;
  border-bottom-color: #8c5728 !important;
  color: #162425 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 5px rgba(105,65,24,.28) !important;
}

.heritage-ui #root > div > div[class*="z-35"] button[aria-pressed="true"] {
  background: linear-gradient(180deg, #e9bb71, #c98c49) !important;
  border-color: #a86e33 !important;
  border-bottom-color: #8c5728 !important;
  color: #162425 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 5px rgba(105,65,24,.28) !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] {
  padding: 19px !important;
  gap: 18px !important;
  background: linear-gradient(135deg, #e1dfd3 0%, #c8cbc2 52%, #b8c0b8 100%) !important;
  border: 7px solid #889590 !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.85),
    inset 0 -3px 6px rgba(38,55,52,.33),
    0 27px 62px rgba(0,0,0,.6) !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 15px !important;
  min-height: 148px;
  padding: 19px 21px !important;
  background: linear-gradient(145deg, #233538 0%, #152427 100%) !important;
  border: 1px solid #687c75 !important;
  border-bottom: 5px solid #0c1719 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 6px 11px rgba(29,48,47,.22) !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] > div:first-child {
  align-items: baseline;
  gap: 9px;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] > div:first-child > span:first-child {
  font-size: clamp(21px, 2.6vw, 31px) !important;
  letter-spacing: -.07em !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] > div:first-child > span:first-child span {
  color: #f0bd72 !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] > div:nth-child(2) {
  background: #0b1a1c !important;
  border-color: #526b66 !important;
  padding: 5px 7px !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] > div:nth-child(3) {
  grid-column: 1 / -1;
  width: 100% !important;
  margin-top: 2px;
}

.heritage-ui #root .sampkai-top-bank-wrap {
  width: 100% !important;
  justify-content: stretch !important;
}

.heritage-ui #root .sampkai-top-bank-grid {
  flex: 1 1 auto !important;
  width: 100% !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 6px !important;
  background: #0f1f21 !important;
  border: 1px solid #527068 !important;
}

.heritage-ui #root .sampkai-bank-label {
  text-align: left !important;
  color: #e9bb74 !important;
  font-size: 10px !important;
  letter-spacing: .12em;
  padding: 1px 4px 3px !important;
}

.heritage-ui #root .sampkai-top-bank-button {
  height: 34px !important;
  font-size: 13px !important;
  background: #334647 !important;
  border: 1px solid #657872 !important;
  border-bottom: 3px solid #182a2b !important;
  color: #f0ede2 !important;
}

.heritage-ui #root .sampkai-top-bank-button[class*="scale-105"] {
  background: #efba6d !important;
  color: #172628 !important;
  border-color: #f9d59d !important;
  border-bottom-color: #b47939 !important;
}

.heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="w-full flex flex-col gap-2"] > span {
  color: #2e4444 !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
  border-bottom: 1px solid #a5b0a6;
  padding: 0 1px 6px;
}

.heritage-ui #root [class*="bg-[#16161c]"][class*="border-t-2"] {
  background: linear-gradient(180deg, #e4e1d5, #c6cec5) !important;
  border: 2px solid #788b83 !important;
  border-bottom: 5px solid #657a71 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 7px 12px rgba(24,39,37,.18) !important;
}

.heritage-ui #root [class*="bg-[#16161c]"][class*="border-t-2"] > div:first-of-type {
  color: #304444 !important;
}

.heritage-ui #root [class*="bg-[#16161c]"][class*="border-t-2"] > div:first-of-type span {
  color: #344846 !important;
}

.heritage-ui #root [class*="bg-[#030603]"] {
  background: #102722 !important;
  border-color: #304b42 !important;
  color: #9be6bb !important;
  font-size: 10px !important;
}

.heritage-ui #root [class*="bg-[#030603]"] [class*="text-emerald-700"] {
  color: #a9ecc6 !important;
}

.heritage-ui #root [class*="bg-[#121216]"][class*="md:col-span-1"] {
  background: linear-gradient(180deg, #263a3a, #192d30) !important;
  border: 1px solid #668079 !important;
  border-left: 5px solid #d0a066 !important;
  color: #dce6df !important;
  padding: 18px !important;
  box-shadow: 0 9px 17px rgba(25,42,40,.2) !important;
}

.heritage-ui #root [class*="bg-[#121216]"][class*="md:col-span-1"] .font-digital {
  color: #f0c47f !important;
  text-shadow: none !important;
}

.heritage-ui #root [class*="bg-[#121216]"][class*="touch-pan-y"] {
  background: linear-gradient(145deg, #d5d4c9, #bac2b8) !important;
  border: 1px solid #84968d !important;
  border-bottom: 5px solid #7d8a81 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.95), 0 10px 17px rgba(26,41,40,.19) !important;
}

.heritage-ui #root [class*="bg-[#121216]"][class*="touch-pan-y"] > div:nth-child(2) span:first-child {
  color: #29403f !important;
  font-size: 11px !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"] {
  background: linear-gradient(145deg, #cbd2ca 0%, #a8b3aa 100%) !important;
  border: 1px solid #798a82 !important;
  border-bottom: 6px solid #53665e !important;
  border-radius: 13px !important;
  box-shadow: inset 0 2px rgba(255,255,255,.68), 0 5px 8px rgba(32,50,46,.2) !important;
}

.heritage-ui #root [class*="touch-pan-y"] [class*="aspect-square"][class*="touch-none"]:not([class*="border-[#ff2a2a]"]) {
  background: linear-gradient(145deg, #d7ddd4 0%, #aebeb2 100%) !important;
  border-color: #798a82 !important;
  border-bottom-color: #53665e !important;
  box-shadow: inset 0 2px rgba(255,255,255,.75), 0 5px 8px rgba(32,50,46,.22) !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"] > div:last-child span {
  color: #1a3334 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"] > div:first-child span {
  color: #344c49 !important;
  background: rgba(255,255,255,.5) !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"][class*="border-[#ff2a2a]"] {
  background: linear-gradient(145deg, #f1d1a7, #d8aa72) !important;
  border-color: #b97840 !important;
  border-bottom-color: #8f5931 !important;
  box-shadow: inset 0 2px rgba(255,255,255,.6), 0 0 0 2px rgba(201,132,71,.44) !important;
}

.heritage-ui #root [class*="aspect-square"][class*="touch-none"][class*="scale-[0.96]"] {
  background: #d96e4b !important;
  transform: scale(.96);
}

.heritage-ui #root input[type="range"] {
  accent-color: #efb361 !important;
}

@media (max-width: 700px) {
  .heritage-ui #root > div > div[class*="z-35"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .heritage-ui #root > div > div[class*="z-35"]::after {
    display: none;
  }
  .heritage-ui #root > div > div[class*="z-35"]::before {
    padding: 14px 15px 12px;
  }
  .heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] {
    padding: 12px !important;
    border-width: 4px !important;
  }
  .heritage-ui #root [class*="border-[4px]"][class*="rounded-3xl"] > div[class*="justify-between"][class*="bg-[#08080a]"] {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    padding: 14px !important;
  }
  .heritage-ui #root .sampkai-top-bank-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .heritage-ui #root .sampkai-top-bank-button {
    height: 39px !important;
  }
}

/* Give both A-H bank selectors full-size controls instead of cramped key rows. */
.heritage-ui #root .sampkai-top-bank-grid,
.heritage-ui #root .sampkai-bottom-bank-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.heritage-ui #root .sampkai-bottom-bank-panel {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 10px !important;
}

.heritage-ui #root .sampkai-bottom-bank-grid {
  width: 100% !important;
}

.heritage-ui #root .sampkai-top-bank-button,
.heritage-ui #root .sampkai-bottom-bank-button {
  height: 52px !important;
  min-height: 52px !important;
  font-size: 16px !important;
  touch-action: manipulation;
}

.heritage-ui #root .sampkai-top-bank-button:focus-visible,
.heritage-ui #root .sampkai-bottom-bank-button:focus-visible {
  outline: 3px solid #f7d296 !important;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .heritage-ui #root .sampkai-top-bank-grid,
  .heritage-ui #root .sampkai-bottom-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}