:root {
  --mood-lilac: #c9b6ff;
  --mood-coral: #ff4e16;
  --mood-pink: #f6a5dd;
  --mood-green: #06b96f;
  --mood-yellow: #ffdd3d;
  --mood-blue: #1766f5;
  --mood-black: #090909;
}

body {
  background: var(--mood-lilac);
}

.app {
  max-width: 1380px;
}

.topbar {
  min-height: 72px;
  margin-bottom: 14px;
  padding: 0 8px;
}

.brand small {
  color: var(--mood-black);
  font-size: .7rem;
}

.brand h1 {
  color: var(--mood-black);
  font-weight: 950;
  letter-spacing: 0;
}

.status {
  border: 3px solid var(--mood-black);
  background: var(--mood-yellow);
  color: var(--mood-black);
  box-shadow: 4px 4px 0 var(--mood-black);
}

.panel,
.trainer {
  border: 3px solid var(--mood-black);
  box-shadow: 7px 7px 0 rgba(9, 9, 9, .95);
}

.side-program {
  background: var(--mood-pink);
}

.side-select {
  background: var(--mood-yellow);
}

.task-card,
.saved-item {
  border: 2px solid var(--mood-black);
  box-shadow: 3px 3px 0 var(--mood-black);
}

.task-card.active {
  border-color: var(--mood-black);
  background: var(--mood-yellow);
  box-shadow: 4px 4px 0 var(--mood-black);
}

.badge {
  border: 1px solid rgba(9, 9, 9, .28);
  background: rgba(255, 255, 255, .42);
  color: var(--mood-black);
}

.badge.level {
  border-color: var(--mood-black);
  background: var(--mood-yellow);
  color: var(--mood-black);
}

.trainer {
  background: var(--mood-coral);
}

#selectTrainer .trainer {
  background: var(--mood-green);
}

.visual {
  height: 430px;
  min-height: 360px;
  background: transparent;
}

.readouts {
  bottom: 12px;
}

.readouts div {
  border: 2px solid var(--mood-black);
  background: rgba(255, 255, 255, .88);
  color: var(--mood-black);
  backdrop-filter: none;
  box-shadow: 3px 3px 0 var(--mood-black);
}

.readouts span {
  color: rgba(9, 9, 9, .58);
}

.task-info {
  border: 0;
  background: transparent;
  padding: 18px 20px 16px;
  color: #fff;
}

.task-info .source {
  color: var(--mood-black);
}

.task-info h2 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 7vw, 4.8rem);
  font-weight: 950;
  line-height: .9;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.task-info p {
  max-width: 68ch;
  color: rgba(255, 255, 255, .88);
  font-weight: 750;
}

.chips {
  padding: 6px 2px;
}

.chip {
  border: 2px solid var(--mood-black);
  background: rgba(255, 255, 255, .28);
  color: #fff;
  box-shadow: 2px 2px 0 var(--mood-black);
}

.chip small {
  color: rgba(255, 255, 255, .76);
}

.chip.active {
  border-color: var(--mood-black);
  background: var(--mood-yellow);
  color: var(--mood-black);
}

.chip.active small {
  color: rgba(9, 9, 9, .62);
}

.route {
  border: 0;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.transport {
  border: 0;
  background: transparent;
}

.btn {
  border: 2px solid var(--mood-black);
  border-radius: 9px;
  box-shadow: 3px 3px 0 var(--mood-black);
}

.btn.primary {
  border-color: var(--mood-black);
  background: var(--mood-yellow);
  color: var(--mood-black);
}

.btn.danger {
  border-color: var(--mood-black);
  background: #fff;
  color: var(--mood-black);
}

.controls {
  background: rgba(255, 255, 255, .95);
  border-top: 3px solid var(--mood-black);
}

.controls select,
.controls input[type="range"] {
  accent-color: var(--mood-blue);
}

#makingMode .maker {
  background: var(--mood-yellow);
}

#makingMode .making-layout > aside {
  background: var(--mood-pink);
}

.input-methods {
  border: 2px solid var(--mood-black);
  background: rgba(255, 255, 255, .42);
}

.input-method.active {
  background: var(--mood-blue);
  color: #fff;
  box-shadow: 3px 3px 0 var(--mood-black);
}

.grid-wrap,
.capture-panel {
  border: 3px solid var(--mood-black);
  box-shadow: 5px 5px 0 var(--mood-black);
}

.grid-cell.active {
  background: var(--mood-blue);
}

.piano-key {
  border-color: var(--mood-black);
}

.piano-key.black {
  background: var(--mood-black);
}

.piano-key.pressed {
  background: var(--mood-coral);
}

.bottom-nav {
  border-top: 3px solid var(--mood-black);
  background: rgba(255, 255, 255, .97);
}

.nav-btn {
  color: var(--mood-black);
}

.nav-btn.active {
  background: var(--mood-black);
  color: #fff;
}

.drag-handle {
  border: 2px solid var(--mood-black);
  background: var(--mood-yellow);
  color: var(--mood-black);
  box-shadow: 2px 2px 0 var(--mood-black);
}

@media (max-width: 900px) {
  body {
    background: var(--mood-lilac);
  }

  .app {
    padding: 9px 9px 20px;
  }

  .topbar {
    min-height: 66px;
    margin-bottom: 8px;
  }

  .brand h1 {
    font-size: 2.25rem;
  }

  .panel,
  .trainer {
    border-radius: 24px;
    box-shadow: 5px 6px 0 var(--mood-black);
  }

  .desktop-grid {
    gap: 12px;
  }

  .trainer {
    overflow: hidden;
  }

  .visual {
    height: 350px;
    min-height: 350px;
  }

  .task-info {
    padding: 12px 17px 14px;
  }

  .task-info h2 {
    max-width: 11ch;
    font-size: clamp(2.35rem, 12vw, 4.4rem);
    line-height: .88;
  }

  .task-info p {
    margin-top: 10px;
    font-size: .8rem;
  }

  .route {
    padding: 10px 17px;
  }

  .transport {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding: 9px 12px;
    border-top: 3px solid var(--mood-black);
    background: rgba(255, 255, 255, .96);
  }

  .transport .btn {
    min-height: 52px;
  }

  .controls {
    padding: 12px;
  }

  .side-program,
  .side-select {
    border-radius: 20px;
  }

  .maker {
    border-radius: 24px;
  }

  .bottom-nav {
    padding-right: 10px;
    padding-left: 10px;
  }

  .nav-btn {
    border-radius: 12px;
  }
}

@media (max-width: 520px) {
  .status {
    box-shadow: 3px 3px 0 var(--mood-black);
  }

  .visual {
    height: 330px;
    min-height: 330px;
  }

  .readouts {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .readouts div {
    padding: 7px;
  }

  .task-info h2 {
    font-size: 2.7rem;
  }

  .chips {
    margin-right: -17px;
  }

  .program-sort-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}