/* Graphite / bone / signal red. Color-only layer over the approved instrument. */
:root{
  --bg:#050505;
  --panel:#0c0c0d;
  --line:#2c2c30;
  --white:#e8e6e2;
  --muted:#96969a;
  --label:#bcbcbf;
  --red:#ff1838;
  --deepred:#23080e;
  --control:#171719;
  --control-hover:#222225;
  --edge-hover:#55555b;
  --brand:#ff1838;
  --selection-edge:#e91b36;
  --drop-edge:#b51b32;
}

button{background:var(--control)}
button:hover{background:var(--control-hover);border-color:var(--edge-hover)}
.masthead h1 em,.edition{color:var(--brand)}
.masthead h1 em,.edition{text-shadow:0 0 16px #ff183820}
.signal-dot{background:#4b4b50}
.signal-dot.active{background:var(--red);box-shadow:0 0 8px #ff183870}
.play-button{background:var(--white);color:#0b0b0c}
.play-button:hover{background:#f1efec}
.play-button.is-playing{background:var(--red);color:#090909}
.scope-wrap{background:#0a0a0b}
.scope-line{background:#29292d}
body:has(.play-button.is-playing) #scope{filter:drop-shadow(0 0 3px #ff18383d)}

.drop-button{background:var(--deepred);border-color:var(--drop-edge)}
.drop-button small{color:var(--muted)}
.drop-symbol{color:var(--red)}
.drop-button:hover{background:#350810;border-color:var(--red)}
.drop-button.engaged{background:#3b0711;border-color:var(--red);box-shadow:0 0 16px #ff183818,inset 0 0 24px #ff18380c}
.drop-button.engaged .drop-symbol{color:var(--red)}
.num{color:var(--muted)}
.world-button{background:#111112}
.world-button.selected{background:var(--deepred);border-color:var(--selection-edge)}
.macro-value{color:var(--label)}
.macro input::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--brand) var(--value),#333337 var(--value))}
.macro input::-moz-range-track{background:#333337}
.macro input::-moz-range-progress{background:var(--brand)}
select{background:var(--control);border-color:#414147}
.grooves button.active{background:var(--deepred);border-color:var(--selection-edge)}

.ruler-steps span{color:#89898e}
.ruler-steps span.downbeat{color:var(--label)}
.layer-button:before{background:#65656b}
.layer-button.muted{color:#74747a}
.layer-button.muted:before{background:#29292d}
.step{background:#171719;border-color:#333338}
.step.quarter{border-left-color:#626268}
.step.on{background:#831225;border-color:#dc1734}
.step.accent{background:var(--red);border-color:var(--red)}
.step.slide:after{color:var(--white)}
.step.sounding{box-shadow:inset 0 0 0 2px var(--red),inset 0 -3px 0 var(--white),0 0 7px #ff183824}
.step.sounding:not(.on){background:#57101d}
.reshape-actions .outline-button{background:var(--control);border-color:#45454b}
.sections button{background:#111112}
.sections button.active{background:var(--deepred);border-color:var(--selection-edge)}
.full-arrangement{background:var(--control)}
.full-arrangement.active{background:var(--deepred);border-color:var(--red)}
.capture-buttons button.recording{background:var(--deepred);border-color:var(--red)}
.footer-credit a{text-decoration-color:#68686e}

.mobile-dock{background:#090909ed;border-top-color:var(--line)}
.mobile-dock button:first-child{background:var(--white);color:#0b0b0c}
.mobile-dock button.is-playing{background:var(--red);color:#090909}
.mobile-dock button:last-child{background:var(--deepred);border-color:var(--drop-edge)}
body:has(.drop-button.engaged) #dock-drop{background:#3b0711;border-color:var(--red)}