/* Small hardware details for the existing silver sound deck. */
#sound-deck {
  --deck-ink: #20262b;
  --deck-paper: #edf1f3;
  --deck-steel: #a5aeb5;
  --deck-edge: #667079;
  color: var(--deck-ink);
  background:
    repeating-linear-gradient(0deg, #fff0 0 2px, #ffffff12 2px 3px),
    linear-gradient(115deg, #dce1e5, #aab3bb 49%, #c9d0d5);
  border-color: #f3f6f8 #525a62 #525a62 #edf1f4;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #737c835c, 0 4px 0 #070a0ec4, 0 15px 35px #0008;
  padding: 3px;
  scrollbar-color: #7e8a94 #c2cbd1;
}

#sound-deck .deck-title {
  gap: 9px;
  min-height: 31px;
  padding: 4px 5px 4px 7px;
  background: linear-gradient(#f0f3f5 0%, #c5cdd4 45%, #9da9b2 49%, #c1cbd2 100%);
  border: 1px solid;
  border-color: #f9fbfc #7c878f #747e87 #eff3f5;
  border-radius: 3px 3px 0 0;
  color: #202b33;
  font: 11px/1.3 Tahoma, sans-serif;
}
#sound-deck .deck-title::after {
  content: "";
  flex: 1;
  height: 9px;
  min-width: 16px;
  order: 1;
  background: repeating-linear-gradient(0deg, #58687370 0 1px, #ffffff90 1px 2px, transparent 2px 3px);
}
#sound-deck .deck-title > span { flex: 0 1 auto; }
#sound-deck .deck-title > button { order: 2; flex: 0 0 25px; }

#sound-deck .deck-display {
  background: linear-gradient(#10161b, #202a30);
  color: #edf3ef;
  border: 1px solid;
  border-color: #414a52 #e3e9ed #e3e9ed #414a52;
  box-shadow: inset 0 2px 6px #000a;
  padding: 11px 12px;
  min-height: 61px;
}
#sound-deck .deck-display > div { min-width: 0; width: 100%; }
#sound-deck .deck-display b {
  display: block;
  color: #edf3ef;
  font: 12px/1.4 Tahoma, sans-serif;
  overflow-wrap: anywhere;
}
#sound-deck .deck-display span {
  display: block;
  color: #bfcbd0;
  font: 11px/1.45 Tahoma, sans-serif;
  overflow-wrap: anywhere;
}
#sound-deck .visualizer-screen {
  border-color: #3b444b #e2e9ee #e2e9ee #3b444b;
  box-shadow: inset 0 1px 6px #000;
  background: #0b1014;
}
#sound-deck .visualizer-label { color: #b6c6cf; font-size: 8px; letter-spacing: 1.1px; }

#sound-deck button,
#sound-deck select,
#sound-deck .audio-picker {
  font: 11px/1.25 Tahoma, sans-serif;
  color: var(--deck-ink);
  background: linear-gradient(#f1f4f6, #d1d9df 46%, #b3bfc9 49%, #c8d1d8);
  border: 1px solid;
  border-color: #f8fafb #6b7883 #63707b #f0f4f7;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #ffffff21, 0 1px 1px #303b464d;
  text-shadow: 0 1px #fff8;
  transition: filter 100ms ease, translate 100ms ease;
}
#sound-deck button:not(:disabled):hover,
#sound-deck .audio-picker:hover { filter: brightness(1.07); }
#sound-deck button:not(:disabled):active,
#sound-deck .audio-picker:active {
  translate: 0 1px;
  box-shadow: inset 0 1px 3px #202c394d;
}
#sound-deck button[aria-pressed="true"] {
  color: #f2f5f7;
  background: linear-gradient(#242e36, #424f5a);
  border-color: #1e272e #e1e7eb #e1e7eb #1e272e;
  box-shadow: inset 0 2px 4px #0007;
  text-shadow: 0 1px #000a;
}
#sound-deck button:disabled { opacity: .5; cursor: default; }
#sound-deck :is(button, select, input):focus-visible,
#sound-deck .audio-picker:focus-within {
  outline: 2px solid #183a59;
  outline-offset: 2px;
}
#sound-deck .visualizer-controls { gap: 5px; padding: 8px 5px 4px; }
#sound-deck .visualizer-controls :is(button, select) { min-height: 31px; padding: 4px 6px; }
#sound-deck .visualizer-status { color: #26313a; font: 10px/1.4 Tahoma, sans-serif; padding: 5px 7px 10px; }
#sound-deck .deck-controls { gap: 9px; padding: 8px 5px; flex-wrap: wrap; }
#sound-deck .deck-controls > button { min-width: 63px; min-height: 36px; }
#sound-deck .deck-controls label { color: #26313a; font: 11px Tahoma, sans-serif; }

#sound-deck .deck-controls input[type="range"] { accent-color: #42596c; width: 105px; margin-top: 5px; }
#sound-deck .duck-option { color: #26313a; font: 11px/1.5 Tahoma, sans-serif; padding: 3px 5px; }
#sound-deck .deck-file-row { padding: 8px 5px 0; }
#sound-deck .deck-file-row .audio-picker { display: flex; align-items: center; justify-content: center; width: 100%; padding: 9px; min-height: 36px; font: bold 11px/1.3 Tahoma, sans-serif; box-sizing: border-box; }
#sound-deck .deck-controls > label { display: flex; flex-direction: column; }
#sound-deck #music-time { margin-left: auto; color: #303d48; font: 10px/1.4 Tahoma, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sound-deck .music-visuals { margin: 10px 4px 0; border-top: 1px solid #7f8a94; border-bottom: 1px solid #7f8a94; box-shadow: inset 0 1px #f0f5f980; }
#sound-deck .music-visuals summary { cursor: pointer; padding: 9px 4px; color: #26313a; font: 11px/1.4 Tahoma, sans-serif; }
#sound-deck .music-visuals summary:focus-visible { outline: 2px solid #183a59; outline-offset: -2px; }
#sound-deck .music-visuals[open] summary { padding-bottom: 4px; }
#sound-deck .deck-footnote { color: #303d48; font: 10px/1.5 Tahoma, sans-serif; margin: 10px 7px 7px; }
#sound-deck .deck-availability { color: #374651; font: 10px/1.5 Tahoma, sans-serif; margin: 8px 7px 6px; padding-top: 7px; border-top: 1px solid #86939d; }
@media (max-width: 420px) {
  #sound-deck .deck-controls { gap: 8px; }
  #sound-deck .visualizer-controls #viz-toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sound-deck button, #sound-deck select, #sound-deck .audio-picker { transition: none; }
  #sound-deck button:not(:disabled):active, #sound-deck .audio-picker:active { translate: none; }
}
.motion-off #sound-deck button,
.motion-off #sound-deck select,
.motion-off #sound-deck .audio-picker { transition: none; }
.motion-off #sound-deck button:not(:disabled):active,
.motion-off #sound-deck .audio-picker:active { translate: none; }

/* Account for the page scrollbar as well as narrow screens. */
#sound-deck{max-width:calc(100% - 24px)}
@media(max-width:420px){#sound-deck{width:calc(100% - 20px);max-width:calc(100% - 20px)}}