@font-face {
  font-family: "NeonTrackerClassic";
  src:
    local("TopazPlus a500"),
    local("Topaz a500"),
    local("Topaz-8"),
    local("TopazPlus");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #101015;
  --panel: #191a21;
  --panel-2: #20222c;
  --line: rgba(255, 255, 255, 0.11);
  --text: #f3f0e8;
  --muted: #a9a8b5;
  --cyan: #38d8e9;
  --lime: #b9f45b;
  --pink: #ff5c9d;
  --amber: #ffc857;
  --black-key: #09090d;
  --tracker-font: "NeonTrackerClassic", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tracker-cell: #11131a;
  --tracker-cell-2: #171920;
  --tracker-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 42px rgba(0, 0, 0, 0.24);
  --page-background:
    radial-gradient(circle at 18% 10%, rgba(56, 216, 233, 0.16), transparent 26rem),
    radial-gradient(circle at 88% 12%, rgba(255, 92, 157, 0.13), transparent 24rem),
    linear-gradient(135deg, #101015 0%, #15131a 42%, #0e1415 100%);
}

html[data-theme="classic"] {
  --bg: #050706;
  --panel: #101414;
  --panel-2: #1b2020;
  --line: rgba(191, 206, 198, 0.28);
  --text: #eef2db;
  --muted: #aeb9ad;
  --cyan: #68d8a0;
  --lime: #d7e56c;
  --pink: #ff8e5f;
  --amber: #ffd36b;
  --black-key: #030404;
  --tracker-font: "NeonTrackerClassic", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tracker-cell: #080d0d;
  --tracker-cell-2: #151a1a;
  --tracker-panel-shadow: inset 1px 1px 0 rgba(238, 242, 219, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.72);
  --page-background: linear-gradient(180deg, #060807 0%, #0a0d0c 52%, #050706 100%);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page-background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="classic"] body {
  font-family: var(--tracker-font);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.synth-shell {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 24px 0 32px;
}

.topbar,
.visual-panel,
.module,
.sequencer,
.tracker,
.drums,
.keyboard,
.performance-surface {
  border: 1px solid var(--line);
  background: rgba(25, 26, 33, 0.88);
  box-shadow: var(--tracker-panel-shadow);
}