.karplus-carpet-page {
  --accent: #e7a55d;
  --accent-soft: color-mix(in oklab, var(--accent) 58%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 22%, transparent);
  --ks-cyan: #6ed9c5;
  --ks-coral: #ef765f;
  --ks-violet: #b29cff;
  --kc-indigo: #7787d8;
}

.karplus-carpet-page .shell {
  grid-template-columns: minmax(0, 1fr) clamp(330px, 25vw, 405px);
}

.kc-carpet-stage {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(231, 165, 93, .035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(110, 217, 197, .025) 25%, transparent 25%) 0 0 / 18px 18px,
    radial-gradient(ellipse at 50% 52%, rgba(119, 135, 216, .08), transparent 47%),
    var(--bg-deep);
}

.karplus-carpet-page #stage {
  cursor: crosshair;
  touch-action: none;
}

.karplus-carpet-page #stage:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -4px;
}

.kc-stage-title h1 {
  max-width: min(700px, 74vw);
  font-size: clamp(26px, 4.6vw, 62px);
}

.kc-stage-title small {
  color: color-mix(in oklab, var(--ks-cyan) 58%, var(--muted));
}

.kc-stage-legend {
  min-width: min(380px, 50vw);
}

.kc-performance-sliders {
  display: grid;
  margin: 0 0 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 15px;
}

.kc-slider {
  margin: 0;
}

.kc-performance-sliders > .kc-slider:first-child {
  grid-column: 1 / -1;
}

.kc-slider output {
  color: var(--ks-cyan);
  font-variant-numeric: tabular-nums;
}

.kc-slider input[type="range"] {
  height: 34px;
  padding-top: 12px;
  padding-bottom: 7px;
}

.kc-slider .form-range-poles {
  margin-top: -5px;
}

.kc-envelope-sliders {
  display: grid;
  margin: 0 0 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 15px;
}

.kc-envelope-note {
  margin: 3px 0 10px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.karplus-carpet-page .ks-field-stats {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--ks-cyan) 7%, transparent), transparent),
    var(--bg-deep);
}

.karplus-carpet-page .ks-preset-grid button[aria-pressed="true"] {
  color: #090a0d;
  background:
    linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--ks-cyan)));
}

.kc-preset-bank {
  margin: 0 0 6px;
}

.kc-preset-description {
  min-height: 2.9em;
  margin: -4px 0 8px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.kc-cell-color {
  margin: 2px 0 0;
}

.karplus-carpet-page .ks-signal-card {
  background:
    linear-gradient(135deg, rgba(231, 165, 93, .035) 25%, transparent 25%) 0 0 / 12px 12px,
    var(--bg-deep);
}

.kc-audio-error {
  margin: 12px 22px;
}

@media (max-width: 960px) {
  .karplus-carpet-page .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .karplus-carpet-page .panel {
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .kc-stage-title h1 {
    font-size: 28px;
  }

  .kc-stage-title small {
    max-width: 270px;
    line-height: 1.35;
  }

  .kc-stage-legend {
    min-width: 0;
  }

  .kc-performance-sliders {
    grid-template-columns: 1fr;
  }

  .kc-performance-sliders > .kc-slider,
  .kc-performance-sliders > .kc-slider:first-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karplus-carpet-page button,
  .karplus-carpet-page .ks-knob-dial {
    transition: none;
  }
}