/* DerekAmp: original CSS homage to compact late-90s skinned audio players. */
.music-window {
  min-width: 360px;
  min-height: 310px;
  overflow: hidden;
  border: 0;
  background: #171812;
  box-shadow: 9px 9px 0 rgba(10, 4, 9, .68);
}
.music-window > .window-titlebar,
.music-window > .browser-bar,
.music-window > .window-status { display: none; }
.music-window .app-body { padding: 0; overflow: auto; color: #d9dcc7; background: #11120e; scrollbar-color: #72736a #252620; }
.music-window > .resize-grip { z-index: 9; right: 4px; bottom: 4px; background: repeating-linear-gradient(135deg, transparent 0 3px, #b6b7a9 3px 5px); }
.derekamp { min-height: 100%; display: grid; align-content: start; gap: 2px; color: #d9dcc7; background: #14150f; font-family: Arial, Tahoma, sans-serif; }
.wa-panel { min-width: 0; border: 2px outset #8b8c82; background: linear-gradient(135deg,#575850,#3c3d37 52%,#2c2d28); box-shadow: inset 0 0 0 1px #181914; }
.wa-panel[hidden] { display: none; }
.wa-titlebar {
  height: 25px; display: flex; align-items: center; gap: 7px; padding: 2px 4px;
  color: #d6dbc3; border-bottom: 1px solid #151610;
  background: repeating-linear-gradient(0deg,#42433d 0 2px,#2c2d28 2px 4px);
  cursor: move; user-select: none;
}
.wa-titlebar::before, .wa-titlebar::after { content: ''; min-width: 8px; height: 8px; flex: 1 1 auto; border-top: 1px solid #85867d; border-bottom: 1px solid #161711; }
.wa-titlebar::after { order: 3; }
.wa-titlebar strong { flex: 0 0 auto; color: #e6e8db; font: 700 11px/1 Tahoma, Arial, sans-serif; letter-spacing: 0; text-shadow: 1px 1px #111; }
.wa-titlebar > small { color: #b5c94a; font: 700 9px Tahoma, Arial, sans-serif; }
.wa-bolt { order: -1; width: 18px; height: 17px; display: grid; place-items: center; color: #17180f; border: 1px solid #151610; background: #a9bd34; box-shadow: inset 1px 1px #e5ef8a; font: 900 10px Arial,sans-serif; }
.wa-grip { order: -1; width: 12px; height: 12px; border: 1px solid #161711; background: repeating-linear-gradient(90deg,#a0b432 0 2px,#33342f 2px 4px); }
.music-window .wa-window-controls {
  order: 5; width: auto; height: 19px; flex: 0 0 auto;
  display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px;
}
.wa-window-controls button, .wa-titlebar > button {
  width: 22px; height: 19px; display: grid; place-items: center; padding: 0; color: #dfe2d4;
  border: 1px outset #a0a198; background: #4c4d47; cursor: pointer; font: 900 11px Arial,sans-serif;
}
.wa-window-controls button:hover, .wa-titlebar > button:hover { color: #11120c; background: #b7ca42; }

.wa-main-deck { min-height: 119px; display: grid; grid-template-columns: 88px minmax(210px,1fr) 65px; align-items: center; gap: 8px; padding: 10px 11px 7px; border-top: 1px solid #74756c; }
.wa-mark { display: grid; justify-items: center; align-content: center; color: #c7d65b; text-shadow: 2px 2px #111; }
.wa-mark strong { font: italic 900 15px Arial,sans-serif; }.wa-mark b { margin-top: -4px; color: #eff4ce; font: italic 900 28px Arial,sans-serif; }.wa-mark small { color: #999d87; font: 700 9px Tahoma,sans-serif; }
.wa-lcd { min-width: 0; height: 96px; display: grid; grid-template-columns: 88px 1fr; grid-template-rows: 53px 23px 18px; border: 2px inset #65665d; color: #a9bf35; background: #0b0e08; box-shadow: inset 0 0 16px #020300; }
.wa-clock { grid-row: 1; display: grid; align-content: center; padding-left: 8px; border-right: 1px solid #333b18; }.wa-clock span { color: #71851f; font: 700 9px 'Lucida Console',monospace; }.wa-clock b { color: #b7cf3a; font: 700 27px/1 'Lucida Console',monospace; letter-spacing: 0; text-shadow: 0 0 6px rgba(183,207,58,.28); }
.wa-spectrum { height: 51px; display: flex; align-items: end; gap: 2px; padding: 6px 7px 5px; overflow: hidden; }
.wa-spectrum i { width: 5%; height: 16%; background: linear-gradient(#e14a25 0 18%,#d8ad27 18% 43%,#9bb62d 43%); animation: wa-spectrum .7s ease-in-out infinite alternate; }
.wa-spectrum i:nth-child(3n) { height: 78%; }.wa-spectrum i:nth-child(4n) { height: 43%; }.wa-spectrum i:nth-child(5n) { height: 92%; }.wa-spectrum i:nth-child(7n) { height: 60%; }
.derekamp:not(.is-playing) .wa-spectrum i { height: 8%; animation-play-state: paused; }
@keyframes wa-spectrum { to { height: 12%; filter: brightness(.72); } }
.wa-ticker { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 28px 1fr; align-items: center; border-top: 1px solid #26300f; border-bottom: 1px solid #26300f; }
.wa-ticker em { color: #e3ad28; text-align: center; font: normal 700 10px 'Lucida Console',monospace; }.wa-ticker strong { min-width: 0; overflow: hidden; padding-right: 8px; color: #b9cc48; font: 700 12px 'Lucida Console',monospace; white-space: nowrap; text-overflow: ellipsis; }
.wa-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 8px; color: #778329; font: 700 9px 'Lucida Console',monospace; }
.wa-status-lamps { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6px; color: #77786f; font: 700 8px Arial,sans-serif; }.wa-status-lamps b { color: #b6c83c; }.wa-status-lamps i { height: 8px; border: 1px inset #66675f; background: #20211c; }.wa-status-lamps i:last-child { background: #8fa62a; box-shadow: 0 0 5px rgba(167,190,51,.4); }
.wa-seek { min-height: 24px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; padding: 2px 11px; border-top: 1px solid #1a1b16; border-bottom: 1px solid #707169; }.wa-seek span { color: #c8c9bc; font: 700 9px Tahoma,sans-serif; }.wa-seek input { width: 100%; accent-color: #a8bd35; }
.wa-console { min-height: 87px; display: grid; grid-template-columns: auto minmax(120px,1fr) 92px; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.wa-transport { display: grid; grid-template-columns: repeat(6, 36px); gap: 3px; }
.wa-transport button, .wa-mode-buttons button, .wa-eq-toolbar button, .wa-playlist-footer button {
  min-height: 29px; padding: 0; color: #181914; border: 2px outset #9a9b92;
  background: linear-gradient(#8b8c84,#5b5c56); cursor: pointer; font: 900 11px Arial,sans-serif; text-shadow: 1px 1px rgba(255,255,255,.35);
}
.wa-transport button:hover, .wa-mode-buttons button:hover, .wa-eq-toolbar button:hover, .wa-playlist-footer button:hover { background: #b0c43b; }
.wa-transport button.is-active, .wa-mode-buttons button.is-active, .wa-eq-toolbar button.is-active { color: #c9db54; border-style: inset; background: #2a2b26; text-shadow: 0 0 4px rgba(201,219,84,.35); }
.wa-mixers { display: grid; gap: 4px; }.wa-mixers label { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 4px; color: #d1d2c6; font: 700 9px Tahoma,sans-serif; }.wa-mixers input { min-width: 0; width: 100%; accent-color: #a8bd35; }
.wa-mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }.wa-mode-buttons button { min-height: 25px; font-size: 9px; }

.wa-equalizer { min-height: 187px; transition: filter .15s; }.wa-equalizer.is-disabled .wa-eq-sliders { filter: grayscale(1) brightness(.55); }
.wa-eq-toolbar { min-height: 35px; display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-top: 1px solid #717269; border-bottom: 1px solid #171812; }.wa-eq-toolbar button { min-width: 38px; min-height: 24px; font-size: 9px; }.wa-eq-toolbar label { margin-left: auto; color: #d2d3c7; font: 700 9px Tahoma,sans-serif; }.wa-eq-toolbar select { height: 24px; margin-left: 5px; color: #b8cc43; border: 1px inset #77786f; background: #171a10; font: 700 10px 'Lucida Console',monospace; }
.wa-eq-sliders { height: 126px; display: grid; grid-template-columns: repeat(11,minmax(29px,1fr)); gap: 3px; padding: 5px 9px 7px; overflow-x: auto; }
.wa-eq-sliders label { min-width: 29px; display: grid; grid-template-rows: 14px 82px 14px; justify-items: center; color: #cdd0c0; font: 700 9px Arial,sans-serif; }.wa-eq-sliders input { width: 18px; height: 82px; margin: 0; writing-mode: vertical-lr; direction: rtl; accent-color: #a6ba31; }.wa-eq-sliders small { color: #aab644; font: 700 9px 'Lucida Console',monospace; }

.wa-playlist { min-height: 305px; display: flex; flex-direction: column; }
.wa-playlist-head { min-height: 24px; display: grid; grid-template-columns: 38px 1fr 48px; align-items: center; gap: 6px; padding: 0 9px; color: #88982c; border-bottom: 1px solid #344014; background: #10130a; font: 700 9px 'Lucida Console',monospace; }
.wa-playlist .amp-playlist { min-height: 243px; flex: 1; overflow-y: auto; color: #aabd42; background: #090c07; scrollbar-color: #899a2b #25291b; }
.wa-playlist .track-row { min-height: 27px; grid-template-columns: 38px 1fr 48px; gap: 6px; padding: 4px 9px; color: #9eb23c; border-bottom: 1px solid #20280e; font: 700 11px 'Lucida Console',monospace; }
.wa-playlist .track-row b { color: #d8a829; }.wa-playlist .track-row small { color: #6f7d29; font-size: 9px; text-align: right; }
.wa-playlist .track-row:hover { color: #dce6a0; background: #293313; }.wa-playlist .track-row.is-active { color: #0d1008; background: #aabd3a; }.wa-playlist .track-row.is-active b, .wa-playlist .track-row.is-active small { color: #38400f; }
.wa-playlist-footer { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border-top: 1px solid #77786f; }.wa-playlist-footer > span { color: #c4c8b2; font: 700 9px 'Lucida Console',monospace; }.wa-playlist-footer > span b { color: #b5c93d; }.wa-playlist-footer div { display: flex; gap: 2px; }.wa-playlist-footer button { min-width: 36px; min-height: 24px; font-size: 8px; }

.musicCredits-window .app-body { overflow: auto; color: #e7ead7; background: #10130d; }
.music-credits-header { min-height: 96px; padding: 17px 24px; border-bottom-color: #aabd3a; background: linear-gradient(90deg,#23271a,#10130d); }
.music-credits-header p { margin: 0 0 8px; color: #e1ae2d; font: 700 11px 'Lucida Console',monospace; }
.music-credits-header h1 { margin: 0; color: #c8dc50; font: 700 26px/1.15 'Lucida Console',monospace; letter-spacing: 0; }
.music-credits-header > strong { color: #66e5dc; font: 700 10px/1.35 'Lucida Console',monospace; }
.music-credits-intro { padding: 22px 24px; border-bottom: 1px solid #59621e; background: #181c11; }
.music-credits-intro p { max-width: 780px; margin: 0 0 14px; color: #e7ead7; font: 700 14px/1.65 'Lucida Console',monospace; }
.music-credits-intro code { display: inline-block; padding: 6px 8px; color: #b8cc43; border: 1px solid #4d571b; background: #090c07; font: 700 11px 'Lucida Console',monospace; }
.music-credit-list { display: grid; }
.music-credit-list article { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 58px; align-items: center; gap: 14px; padding: 13px 24px; border-bottom: 1px solid #28300f; }
.music-credit-list article:hover { background: #1d2510; }
.music-credit-list article > b { color: #d9a72a; font: 700 13px 'Lucida Console',monospace; }
.music-credit-list h2 { margin: 0 0 4px; color: #c8dc50; font: 700 15px 'Lucida Console',monospace; letter-spacing: 0; }
.music-credit-list p { margin: 0; color: #c4c8b5; font: 12px/1.45 'Lucida Console',monospace; }
.music-credit-list article > span { justify-self: end; padding: 4px 6px; color: #11140a; background: #aabd3a; font: 900 10px 'Lucida Console',monospace; }
.music-license-note { padding: 18px 24px 24px; color: #c4c8b5; background: #090c07; }
.music-license-note strong { color: #e1ae2d; font: 700 11px 'Lucida Console',monospace; }
.music-license-note p { max-width: 760px; margin: 7px 0 0; font: 12px/1.55 'Lucida Console',monospace; }

.taskbar-amp { border-color: #34352f; background: #474840; box-shadow: inset 1px 1px #b8b9ad, inset -1px -1px #171812; }
.taskbar-amp > button { color: #171811; border-right-color: #33342f; background: linear-gradient(#8d8e85,#5c5d56); text-shadow: 1px 1px rgba(255,255,255,.32); }
.taskbar-amp > button:hover { color: #12140a; background: #a7ba36; }
.taskbar-amp .taskbar-amp-play { color: #c4d84b; background: #282a23; text-shadow: 0 0 4px rgba(196,216,75,.4); }
.taskbar-amp-screen { color: #b8cd42 !important; border: 1px inset #63645b !important; background: #090c07 !important; }
.taskbar-amp-screen > span { color: #d5a62a; }.taskbar-amp-screen > strong { color: #b8cd42; }
.taskbar-amp-screen > i b { background: #9daf31; }.taskbar-amp.is-playing .taskbar-amp-screen > i b { animation-name: wa-taskbar-spectrum; }
@keyframes wa-taskbar-spectrum { to { height: 3px; background: #d5a62a; } }

@media (min-width: 721px) and (max-height: 800px) {
  .wa-main-deck { min-height: 100px; padding-top: 5px; padding-bottom: 5px; }
  .wa-lcd { height: 82px; grid-template-rows: 44px 20px 16px; }
  .wa-clock b { font-size: 24px; }
  .wa-spectrum { height: 42px; }
  .wa-console { min-height: 70px; padding-top: 5px; padding-bottom: 6px; }
  .wa-equalizer { min-height: 149px; }
  .wa-eq-toolbar { min-height: 31px; padding-top: 2px; padding-bottom: 2px; }
  .wa-eq-sliders { height: 90px; padding-top: 3px; padding-bottom: 3px; }
  .wa-eq-sliders label { grid-template-rows: 12px 55px 12px; }
  .wa-eq-sliders input { height: 55px; }
  .wa-playlist { min-height: 286px; }
  .wa-playlist .amp-playlist { min-height: 198px; }
  .wa-playlist .track-row { min-height: 22px; padding-top: 2px; padding-bottom: 2px; }
  .wa-playlist-footer { min-height: 39px; padding-top: 3px; padding-bottom: 3px; }
}

@media (max-width: 560px) {
  .music-window { min-width: 0; }
  .wa-main-deck { grid-template-columns: 1fr; padding: 8px; }.wa-mark, .wa-status-lamps { display: none; }.wa-lcd { width: 100%; }
  .wa-console { grid-template-columns: 1fr; }.wa-transport { grid-template-columns: repeat(6,minmax(36px,1fr)); }.wa-mixers { grid-template-columns: 1fr 1fr; }.wa-mode-buttons { grid-template-columns: repeat(4,1fr); }
  .wa-eq-sliders { grid-template-columns: repeat(11,34px); }
  .wa-playlist-footer { align-items: stretch; flex-direction: column; }.wa-playlist-footer div { display: grid; grid-template-columns: repeat(5,1fr); }
  .music-credits-intro, .music-credit-list article, .music-license-note { padding-left: 14px; padding-right: 14px; }
  .music-credit-list article { grid-template-columns: 34px minmax(0,1fr) 50px; gap: 8px; }
}

@media (max-width: 720px) {
  .music-window, .music-window.is-maximized { inset: 38px 0 58px !important; width: 100% !important; height: auto !important; }
  .music-window > .window-titlebar, .music-window > .browser-bar, .music-window > .window-status { display: none; }
}