.rsfx-app {
  --rsfx-ink: #282747;
  --rsfx-ink-strong: #211d3d;
  --rsfx-muted: #625d78;
  --rsfx-line: #756983;
  --rsfx-panel: #fff7de;
  --rsfx-panel-alt: #f2e4bd;
  --rsfx-page: #fffaf0;
  --rsfx-cyan: #315ccf;
  --rsfx-teal: #087f72;
  --rsfx-orange: #d35332;
  --rsfx-yellow: #f2c14e;
  --rsfx-pink: #b0306a;
  --rsfx-cream: #fff8df;
  --rsfx-on-accent: #fff8df;
  --rsfx-play-bg: #bc4d30;
  --rsfx-download-ink: #211d3d;
  --rsfx-shadow: #33294d;
  --rsfx-scope-panel: #f2c14e;
  --rsfx-scope-screen: #fff3c4;
  --rsfx-scope-ink: #282747;
  --rsfx-scope-muted: #514971;
  --rsfx-scope-accent: #b0306a;
  --rsfx-scope-grid: rgba(49, 92, 207, 0.2);
  --rsfx-waveform: #b0306a;
  --rsfx-waveform-glow: rgba(176, 48, 106, 0.42);

  background:
    linear-gradient(rgba(49, 92, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 92, 207, 0.035) 1px, transparent 1px),
    var(--rsfx-page);
  background-size: 1rem 1rem;
  border: 3px solid var(--rsfx-ink-strong);
  box-shadow: 6px 6px 0 var(--rsfx-shadow);
  color: var(--rsfx-ink);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.theme-dark .rsfx-app {
  --rsfx-ink: #f7edcf;
  --rsfx-ink-strong: #fff5d8;
  --rsfx-muted: #c8b8c4;
  --rsfx-line: #75627b;
  --rsfx-panel: #292443;
  --rsfx-panel-alt: #352d53;
  --rsfx-page: #19162d;
  --rsfx-cyan: #6bd5e4;
  --rsfx-teal: #72f2c8;
  --rsfx-orange: #ff805c;
  --rsfx-yellow: #f2c14e;
  --rsfx-pink: #f477a8;
  --rsfx-cream: #fff8df;
  --rsfx-on-accent: #101b32;
  --rsfx-play-bg: #ff805c;
  --rsfx-download-ink: #101b32;
  --rsfx-shadow: #080714;
  --rsfx-scope-panel: #302555;
  --rsfx-scope-screen: #101b32;
  --rsfx-scope-ink: #f7edcf;
  --rsfx-scope-muted: #b6a8bd;
  --rsfx-scope-accent: #72f2c8;
  --rsfx-scope-grid: rgba(114, 242, 200, 0.16);
  --rsfx-waveform: #72f2c8;
  --rsfx-waveform-glow: rgba(114, 242, 200, 0.75);

  background:
    linear-gradient(rgba(107, 213, 228, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 213, 228, 0.035) 1px, transparent 1px),
    var(--rsfx-page);
}

.rsfx-scope-panel {
  background: var(--rsfx-scope-panel);
  border: 3px solid var(--rsfx-ink-strong);
  box-shadow: 4px 4px 0 var(--rsfx-shadow);
  color: var(--rsfx-scope-ink);
  padding: 1rem;
}

.rsfx-scope-topline,
.rsfx-scope-footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.rsfx-scope-topline {
  min-height: 2rem;
}

.rsfx-kicker,
.rsfx-section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rsfx-kicker {
  color: var(--rsfx-scope-accent);
}

.rsfx-section-label::before {
  color: var(--rsfx-orange);
  content: '> ';
}

.rsfx-scope-readout {
  color: var(--rsfx-scope-muted);
  font: 0.76rem ui-monospace, monospace;
  margin-left: 0.75rem;
}

.rsfx-scope-led {
  background: var(--rsfx-scope-muted);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.22);
  height: 0.65rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  width: 0.65rem;
}

.rsfx-scope-led.is-on {
  background: var(--rsfx-scope-accent);
  box-shadow: 0 0 0.8rem 0.2rem var(--rsfx-waveform-glow);
}

.rsfx-scope-screen {
  background: var(--rsfx-scope-screen);
  border: 2px solid var(--rsfx-scope-accent);
  margin: 0.6rem 0;
  min-height: 13rem;
  overflow: hidden;
  position: relative;
}

.rsfx-waveform,
.rsfx-scope-grid {
  display: block;
  height: 13rem;
  width: 100%;
}

.rsfx-scope-grid {
  background-image: linear-gradient(var(--rsfx-scope-grid) 1px, transparent 1px), linear-gradient(90deg, var(--rsfx-scope-grid) 1px, transparent 1px);
  background-size: 12.5% 25%;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.rsfx-scope-footer {
  color: var(--rsfx-scope-muted);
  flex-wrap: wrap;
  font: 0.75rem ui-monospace, monospace;
}

.rsfx-preset-strip,
.rsfx-control-section {
  background: var(--rsfx-panel);
  border: 2px solid var(--rsfx-ink-strong);
  box-shadow: 3px 3px 0 var(--rsfx-shadow);
  padding: 1rem;
}

.rsfx-preset-strip {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rsfx-preset-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rsfx-preset,
.rsfx-text-action,
.rsfx-action,
.rsfx-select {
  font: inherit;
}

.rsfx-preset {
  align-items: center;
  background: var(--rsfx-panel-alt);
  border: 2px solid var(--rsfx-line);
  color: var(--rsfx-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  min-height: 4.4rem;
  padding: 0.5rem;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.rsfx-preset:hover,
.rsfx-preset:focus-visible {
  border-color: var(--rsfx-cyan);
  box-shadow: 3px 3px 0 var(--rsfx-cyan);
  transform: translate(-1px, -1px);
}

.rsfx-preset.is-active {
  background: var(--rsfx-cyan);
  border-color: var(--rsfx-ink-strong);
  box-shadow: 3px 3px 0 var(--rsfx-shadow);
  color: var(--rsfx-on-accent);
}

.rsfx-preset-glyph {
  color: var(--rsfx-orange);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.rsfx-preset.is-active .rsfx-preset-glyph {
  color: var(--rsfx-yellow);
}

.rsfx-preset span:last-child {
  font-size: 0.78rem;
  font-weight: 800;
}

.rsfx-hint {
  color: var(--rsfx-muted);
  font-size: 0.8rem;
  margin: 0;
}

.rsfx-control-board {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rsfx-control-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rsfx-waveform-picker {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}

.rsfx-control-label,
.rsfx-slider-control > span {
  font-size: 0.8rem;
  font-weight: 800;
}

.rsfx-select {
  appearance: none;
  background: var(--rsfx-panel-alt);
  border: 2px solid var(--rsfx-line);
  color: var(--rsfx-ink);
  cursor: pointer;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  width: 100%;
}

.rsfx-slider-grid {
  display: grid;
  gap: 1rem;
}

.rsfx-slider-control {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rsfx-slider-control > span {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.rsfx-slider-control output {
  color: var(--rsfx-cyan);
  font: 900 0.75rem ui-monospace, monospace;
}

.rsfx-slider-control input {
  accent-color: var(--rsfx-orange);
  cursor: pointer;
  width: 100%;
}

.rsfx-slider-control input::-webkit-slider-runnable-track {
  background: var(--rsfx-line);
  border: 1px solid var(--rsfx-ink);
  height: 0.55rem;
}

.rsfx-slider-control input::-webkit-slider-thumb {
  appearance: none;
  background: var(--rsfx-orange);
  border: 2px solid var(--rsfx-ink-strong);
  height: 1.15rem;
  margin-top: -0.35rem;
  width: 0.8rem;
}

.rsfx-slider-control input::-moz-range-track {
  background: var(--rsfx-line);
  border: 1px solid var(--rsfx-ink);
  height: 0.55rem;
}

.rsfx-slider-control input::-moz-range-thumb {
  background: var(--rsfx-orange);
  border: 2px solid var(--rsfx-ink-strong);
  border-radius: 0;
  height: 1.15rem;
  width: 0.8rem;
}

.rsfx-action-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.rsfx-primary-actions,
.rsfx-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rsfx-action,
.rsfx-text-action {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  min-height: 2.55rem;
  padding: 0.65rem 1rem;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.rsfx-action:hover,
.rsfx-text-action:hover {
  filter: brightness(1.08);
  transform: translate(-1px, -1px);
}

.rsfx-action-play {
  background: var(--rsfx-play-bg);
  border: 2px solid var(--rsfx-ink-strong);
  box-shadow: 3px 3px 0 var(--rsfx-shadow);
  color: var(--rsfx-on-accent);
}

.rsfx-action-stop {
  background: var(--rsfx-panel);
  border: 2px solid var(--rsfx-ink-strong);
  box-shadow: 3px 3px 0 var(--rsfx-shadow);
  color: var(--rsfx-ink);
}

.rsfx-action-download {
  background: var(--rsfx-yellow);
  border: 2px solid var(--rsfx-ink-strong);
  box-shadow: 3px 3px 0 var(--rsfx-shadow);
  color: var(--rsfx-download-ink);
}

.rsfx-text-action {
  background: transparent;
  border: 2px solid transparent;
  color: var(--rsfx-cyan);
}

.rsfx-status {
  border-top: 2px solid var(--rsfx-line);
  color: var(--rsfx-muted);
  font: 0.75rem ui-monospace, monospace;
  margin: 0;
  padding-top: 0.85rem;
}

.rsfx-app button:focus-visible,
.rsfx-app select:focus-visible,
.rsfx-app input:focus-visible {
  outline: 3px solid var(--rsfx-yellow);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .rsfx-control-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .rsfx-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rsfx-preset:last-child {
    grid-column: span 2;
  }

  .rsfx-scope-footer span:last-child {
    width: 100%;
  }

  .rsfx-action-bar,
  .rsfx-primary-actions,
  .rsfx-secondary-actions {
    width: 100%;
  }

  .rsfx-action,
  .rsfx-text-action {
    flex: 1;
  }
}