:root {
  color-scheme:dark;
  --ink:#21251d;
  --cream:#f4e6c3;
  --paper:#ebdbb6;
  --muted:#c7b998;
  --pine:#242e24;
  --panel:#2c372a;
  --line:#66715b;
  --red:#a4362a;
  --gold:#e7b760;
  --thin:1px solid var(--line);
  font:16px/1.45 system-ui,sans-serif;
  background:#1b221b;
  color:var(--cream);
}

*,*::before,*::after {
  box-sizing:border-box;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 50% 0%,#3b4130,#1b221b 60%);
}

[hidden] {
  display:none!important;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  touch-action:manipulation;
}

button,a {
  color:inherit;
}

button {
  cursor:pointer;
  border:1px solid #849075;
  background:#303a2d;
  padding:.48rem .7rem;
  border-radius:3px;
  line-height:1.2;
}

button:hover:not(:disabled) {
  background:#48533e;
}

button:disabled {
  opacity:.47;
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #e09046;
  outline-offset:3px;
}

a {
  text-underline-offset:.2em;
}

input[type=range],input[type=checkbox] {
  accent-color:var(--gold);
}

input[type=search],select {
  min-width:0;
  width:100%;
  border:1px solid #857c62;
  border-radius:3px;
  background:#fbefcf;
  color:var(--ink);
  padding:.42rem .55rem;
}

.mast {
  max-width:1440px;
  margin:auto;
  padding:.7rem clamp(.9rem,4vw,3.5rem);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  border-bottom:1px solid #5c634f;
}

.station,.eyebrow,.label,.section-label,.bill-meta,.boot,footer {
  font-family:ui-monospace,monospace;
  letter-spacing:.065em;
  font-size:.72rem;
}

.station {
  font-weight:750;
  white-space:nowrap;
}

.station span,.eyebrow span,.foot-star {
  color:var(--gold);
}

.mast nav {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
}

.mast nav button {
  background:transparent;
  border:0;
  padding:.25rem .35rem;
}

.mast nav a {
  font-size:.88rem;
  white-space:nowrap;
}

.shell {
  max-width:1340px;
  margin:auto;
  padding:1rem clamp(.75rem,3vw,2rem);
}

.bill {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:clamp(.4rem,2vw,1.8rem);
  border:1px solid #c1a46b;
  color:var(--ink);
  background:var(--paper);
  padding:clamp(.75rem,2.6vw,1.5rem) clamp(.8rem,3vw,2rem);
  box-shadow:0 4px 0 #11180f, inset 0 0 0 5px #e1cb9f;
  margin-bottom:1rem;
  overflow:hidden;
}

.bill h1 {
  font:900 clamp(2rem,5vw,4.7rem)/.92 Georgia,serif;
  letter-spacing:-.06em;
  margin:.3rem 0;
  color:#2c3928;
}

.bill h1 span {
  font-style:italic;
  font-weight:normal;
  color:#8c3025;
  white-space:nowrap;
}

.eyebrow {
  font-weight:750;
  margin:0;
}

.eyebrow span {
  color:var(--red);
}

.intro {
  margin:.65rem 0 0;
  font-size:clamp(.83rem,1.5vw,1.1rem);
}

.bill img {
  object-fit:contain;
  width:clamp(80px,13vw,166px);
  height:auto;
  max-height:130px;
  filter:drop-shadow(0 2px 0 #8a624055);
}

.bill-meta {
  align-self:stretch;
  border-left:1px solid #a88d60;
  display:grid;
  align-content:center;
  padding-left:1rem;
  white-space:nowrap;
}

.bill-meta strong {
  font-size:1.05rem;
  color:#822e24;
}

.lamp {
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--red);
  border-radius:50%;
  margin-left:7px;
  box-shadow:0 0 7px #bc544f;
}

.workbench {
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:1rem;
}

.workbench.lower {
  margin-top:1rem;
}

.stage,.desk,.paper {
  border:1px solid #7b8267;
  background:var(--pine);
  box-shadow:0 5px 0 #121811;
}

.paper {
  color:var(--ink);
  background:var(--paper);
  border-color:#b29b70;
}

.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  background:#343f2e;
  color:var(--cream);
  border-bottom:var(--thin);
  padding:.57rem .85rem;
  text-transform:uppercase;
}

.section-label h2 {
  margin:0;
  font:inherit;
  font-weight:850;
}

.section-label>span {
  color:var(--muted);
  text-align:right;
}

.deck {
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(.6rem,2vw,1.25rem);
  padding:.85rem;
  align-items:center;
}

.monitor {
  border:5px solid #11180f;
  outline:1px solid #686e58;
  background:#131912;
  aspect-ratio:1;
  display:grid;
  place-items:center;
}

.monitor img,.monitor canvas {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  image-rendering:pixelated;
}

.label {
  margin:0;
  color:var(--gold);
  font-weight:800;
}

.deck h3 {
  font:700 clamp(1.25rem,2.7vw,2.65rem)/1.04 Georgia,serif;
  margin:.25rem 0 .4rem;
  overflow-wrap:anywhere;
}

.track-detail,.up-next {
  font-size:.82rem;
  color:var(--muted);
  margin:.3rem 0;
  min-height:1.2em;
}

.track-detail {
  min-height:2.3em;
}

progress {
  display:block;
  width:100%;
  height:.45rem;
  border:0;
  border-radius:0;
  margin:.4rem 0 .7rem;
  accent-color:var(--gold);
}

progress::-webkit-progress-bar {
  background:#111810;
}

progress::-webkit-progress-value {
  background:var(--gold);
}

progress::-moz-progress-bar {
  background:var(--gold);
}

.deck-transport,.call-strip,.cue-strip,.presets,.set-tools,.stage-options {
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}

.primary,.warm {
  background:#952f25;
  color:#fff0d0;
  border-color:#db8d69;
  font-weight:750;
}

.primary:hover:not(:disabled),.warm:hover:not(:disabled) {
  background:#b93f32;
}

.stage-options {
  margin-top:.65rem;
  color:var(--muted);
  font-size:.77rem;
  gap:.25rem .65rem;
}

.stage-options label {
  display:flex;
  align-items:center;
  gap:.2rem;
}

.stage-options input {
  margin:0;
}

.call-strip,.cue-strip {
  padding:.65rem .85rem;
  border-top:var(--thin);
}

.call-strip button,.cue-strip button {
  font-size:.86rem;
}

.call-feedback {
  font-size:.76rem;
  color:var(--muted);
  padding:0 .85rem;
  margin:0 0 .5rem;
  min-height:1.1em;
}

.cue-strip .label {
  margin-right:.3rem;
}

.boot {
  margin:0 0 .7rem;
  color:#ffe9bb;
}

.boot:empty {
  display:none;
}

.tabs {
  display:flex;
  gap:.25rem;
  padding:.65rem .7rem .45rem;
}

.paper button {
  background:#f7eacb;
  border-color:#95825b;
  color:var(--ink);
}

.paper button:hover:not(:disabled) {
  background:#fdf2d7;
}

.tabs button[aria-pressed=true] {
  background:#384432;
  color:var(--cream);
  border-color:#384432;
}

.book-body {
  padding:0 .7rem .7rem;
}

.book-tools {
  display:grid;
  grid-template-columns:1fr auto;
  gap:.4rem;
}

.book-tools select {
  width:auto;
}

.song-list {
  list-style:none;
  margin:.45rem 0;
  padding:0;
  height:232px;
  overflow:auto;
  scrollbar-color:#8c805f #ebdbb6;
  border:1px solid #af9c74;
}

.song-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.25rem;
  align-items:center;
  border-bottom:1px solid #b7a882;
  padding:.25rem .35rem;
  background:#f2e4c3;
}

.song-row[data-current=true] {
  background:#e9c885;
  box-shadow:inset 3px 0 #9c4030;
}

.song-row .song-play {
  background:transparent;
  border-color:transparent;
  text-align:left;
  min-width:0;
  padding:.25rem .34rem;
}

.song-play strong,.song-play small {
  display:block;
}

.song-play small {
  font-size:.7rem;
  color:#5e513a;
}

.song-actions {
  display:flex;
  gap:.2rem;
}

.song-actions button {
  font-weight:750;
  min-width:1.7rem;
  padding:.2rem .34rem;
}

.song-actions [aria-pressed=true] {
  color:#952f25;
}

.song-row:last-child {
  border-bottom:0;
}

.book-help,.song-list .empty {
  font-size:.82rem;
  margin:.2rem 0;
  padding:.2rem .3rem;
}

.set-tools button,.tune-details {
  font-size:.79rem;
}

.tune-details {
  margin-top:.35rem;
}

.tune-details summary {
  cursor:pointer;
}

.tune-details p {
  margin:.3rem 0;
  color:#544734;
}

.tune-details a {
  margin-right:.7rem;
}

.desk-body,.generator-body {
  padding:.85rem;
}

.presets button {
  font-size:.82rem;
}

.sliders {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem .9rem;
  margin:.7rem 0;
}

.fader {
  min-width:0;
  display:grid;
  gap:.2rem;
  font-size:.81rem;
}

.fader span {
  display:flex;
  justify-content:space-between;
  gap:.35rem;
  align-items:center;
}

.fader output {
  font:700 .74rem ui-monospace,monospace;
  color:var(--gold);
  white-space:nowrap;
}

.fader input {
  width:100%;
  margin:0;
  min-height:24px;
}

.players-row {
  padding-top:.55rem;
  border-top:var(--thin);
}

.players-row small {
  font:normal .75rem system-ui,sans-serif;
  color:var(--muted);
  margin-left:.4rem;
}

.desk-players {
  display:flex;
  gap:.3rem;
  flex-wrap:wrap;
  margin-top:.45rem;
}

.desk-players button {
  font-size:.81rem;
  padding:.35rem .48rem;
}

.desk-players button[aria-pressed=true] {
  background:#ded09d;
  color:#20261b;
  border-color:#f3dfa1;
}

.generator-body p {
  margin:0 0 .7rem;
}

.generator-options {
  display:grid;
  grid-template-columns:minmax(70px,.7fr) minmax(0,1.3fr);
  gap:.55rem;
  margin-bottom:.7rem;
}

.generator-options label {
  font-size:.82rem;
}

.generator-options select {
  display:block;
  margin-top:.2rem;
}

.paper button.primary {
  background:#952f25;
  color:#fff0d0;
}

.paper button.primary:hover {
  background:#ad392d;
}

footer {
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  margin:.9rem 0 .2rem;
  color:var(--muted);
}

footer a {
  margin-left:.65rem;
}

.notice {
  position:fixed;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:max-content;
  max-width:calc(100% - 1.5rem);
  color:var(--ink);
  background:var(--cream);
  border:1px solid #a48455;
  padding:.65rem .85rem;
  box-shadow:0 4px 18px #0006;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media(max-width:940px) {
  .deck {
    grid-template-columns:minmax(0,38%) minmax(0,1fr);
  }
  .bill-meta {
    display:none;
  }
  .bill {
    grid-template-columns:1fr auto;
  }
  .sliders {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:710px) {
  .workbench {
    grid-template-columns:minmax(0,1fr);
  }
  .deck {
    grid-template-columns:minmax(0,39%) minmax(0,1fr);
  }
  .mast {
    align-items:flex-start;
  }
  .mast nav {
    justify-content:flex-end;
    font-size:.85rem;
    gap:.2rem;
  }
  .sliders {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .song-list {
    height:226px;
  }
}

@media(max-width:410px) {
  .mast {
    display:block;
  }
  .mast nav {
    justify-content:flex-start;
    margin-top:.25rem;
  }
  .bill h1 span {
    display:block;
    margin-top:.12rem;
  }
  .deck {
    grid-template-columns:minmax(0,34%) minmax(0,1fr);
    padding:.65rem;
  }
  .sliders {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.steel-keys {
  margin-top:.7rem;
  font-size:.82rem;
}

.steel-keys summary {
  cursor:pointer;
  color:var(--gold);
}

#steel-notes {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:2px;
  margin-top:.4rem;
}

#steel-notes button {
  min-width:0;
  height:2.8rem;
  background:#eee0b6;
  color:#26291d;
  padding:.1rem;
  font-size:.7rem;
}

#steel-notes button.accidental {
  background:#171d16;
  color:#f5e8c7;
}

#steel-notes button:active {
  background:#dfad56;
}

.record-crate {
  border-top:var(--thin);
  padding:.6rem .85rem;
  color:var(--muted);
  font-size:.82rem;
}

.record-crate summary {
  cursor:pointer;
  color:var(--cream);
}

#crate-count {
  margin-left:.4rem;
  color:var(--muted);
  font-size:.74rem;
}

.crate-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.4rem .65rem;
  align-items:end;
  margin-top:.55rem;
}

.crate-controls label {
  display:grid;
  gap:.25rem;
}

.crate-controls button {
  font-size:.77rem;
}

#crate-status {
  margin:0;
}

#crate-status:not(:empty) {
  margin-top:.4rem;
}

@media(max-width:410px) {
  .crate-controls {
    grid-template-columns:minmax(0,1fr);
  }
}