.dj-composer-page {
  color: #e5ded1;
  background:
    linear-gradient(180deg, rgba(5, 6, 6, .9), rgba(5, 6, 6, .97)),
    url("./shanghai-cyberpunk-skyline-hero.webp") center top / cover fixed;
}

.dj-composer {
  display: grid;
  gap: 22px;
  padding-bottom: 42px;
}

.composer-console {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(420px, 1.4fr);
  gap: 18px;
  min-height: 68vh;
}

.composer-controls,
.composer-output,
.composer-panel {
  border: 1px solid rgba(229, 222, 209, .2);
  background: rgba(5, 6, 6, .82);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .32);
}

.composer-controls {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 18px;
}

.composer-output {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
}

.composer-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(229, 222, 209, .16);
}

.composer-kicker,
.composer-status {
  color: #c6ff3b;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.composer-head h1,
.composer-output h2,
.composer-panel h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.composer-head h1 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: .86;
  max-width: 760px;
}

.composer-identity {
  margin: 10px 0 0;
  max-width: 760px;
  color: rgba(229, 222, 209, .72);
}

.control-field {
  display: grid;
  gap: 7px;
}

.control-field span,
.control-field label,
.range-head {
  color: rgba(229, 222, 209, .72);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.control-field select,
.control-field input[type="text"],
.control-field input[type="number"],
.control-field textarea {
  width: 100%;
  border: 1px solid rgba(229, 222, 209, .22);
  border-radius: 0;
  background: rgba(229, 222, 209, .08);
  color: #e5ded1;
  font: 700 .98rem "IBM Plex Mono", monospace;
  padding: 12px 11px;
}

.control-field textarea {
  min-height: 84px;
  resize: vertical;
}

.control-field input[type="file"] {
  width: 100%;
  color: rgba(229, 222, 209, .78);
  font: 700 .82rem "IBM Plex Mono", monospace;
}

.range-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.control-field input[type="range"] {
  accent-color: #c6ff3b;
}

.composer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.composer-actions button,
.output-actions button {
  min-height: 44px;
  border: 1px solid rgba(229, 222, 209, .26);
  background: #e5ded1;
  color: #050606;
  cursor: pointer;
  font: 900 .82rem "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.composer-actions button:nth-child(2n),
.output-actions button {
  background: rgba(5, 6, 6, .7);
  color: #e5ded1;
}

.composer-actions button:hover,
.output-actions button:hover {
  border-color: #c6ff3b;
}

.composer-scope {
  width: 100%;
  min-height: 260px;
  background: #050606;
  border-bottom: 1px solid rgba(229, 222, 209, .16);
}

.composer-grid {
  display: grid;
  gap: 9px;
  padding: 16px 20px 20px;
}

.grid-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.grid-row b {
  font: 900 .78rem "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.steps {
  display: grid;
  grid-template-columns: repeat(16, minmax(14px, 1fr));
  gap: 5px;
}

.step {
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 1px solid rgba(229, 222, 209, .22);
  background: rgba(229, 222, 209, .08);
  cursor: pointer;
}

.step.is-on {
  background: #e5ded1;
}

.step.is-playing {
  border-color: #c6ff3b;
  box-shadow: 0 0 0 2px rgba(198, 255, 59, .35);
}

.output-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 20px;
}

.output-actions button {
  padding: 0 14px;
}

.composer-lower {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.composer-panel {
  padding: 18px;
}

.composer-panel h2 {
  font-size: 1.7rem;
}

.composer-panel ol,
.composer-panel ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.composer-panel li {
  border-top: 1px solid rgba(229, 222, 209, .18);
  padding-top: 12px;
  color: rgba(229, 222, 209, .82);
}

.composer-panel li b {
  display: inline-block;
  margin-right: 10px;
  color: #e5ded1;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.composer-panel li span {
  color: #c6ff3b;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.composer-panel p {
  margin: 8px 0 0;
}

.poster-signal {
  margin-top: 14px;
  border-left: 4px solid #36c7e7;
  padding: 10px 12px;
  background: rgba(54, 199, 231, .1);
  color: rgba(229, 222, 209, .78);
}

.github-scan {
  display: grid;
  gap: 10px;
  border: 1px dashed rgba(229, 222, 209, .22);
  padding: 14px;
  color: rgba(229, 222, 209, .74);
}

.github-scan a {
  color: #82f7ff;
}

@media (max-width: 980px) {
  .composer-console,
  .composer-lower {
    grid-template-columns: 1fr;
  }

  .composer-head {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .dj-composer-page {
    background-attachment: scroll;
  }

  .composer-controls,
  .composer-panel {
    padding: 14px;
  }

  .composer-head,
  .composer-grid,
  .output-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .composer-actions {
    grid-template-columns: 1fr;
  }

  .grid-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .steps {
    gap: 4px;
  }
}