@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme:light;
  --ink:#394650;
  --muted:#71808a;
  --frame:#c5ccd0;
  --frame-light:#e8ecec;
  --frame-dark:#a8b1b6;
  --screen:#172a2a;
  --lime:#b4d58b;
  --aqua:#7fc9c3;
  --accent:#7298ad;
  --paper:#f4f5f2
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'DM Mono',Consolas,monospace;
  background:#fff
}

button,input {
  font:inherit
}

.ambient {
  position:fixed;
  z-index:-1;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(105px);
  opacity:.19;
  pointer-events:none
}

.ambient-one {
  top:8%;
  left:-330px;
  background:#a8d7cc
}

.ambient-two {
  right:-340px;
  bottom:-5%;
  background:#c4c9de
}

.app-shell {
  max-width:1220px;
  margin:auto;
  padding:24px 26px 16px
}

.topbar {
  height:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #c9d0cf;
  margin-bottom:18px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#46535c;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em
}

.brand-name span {
  color:#6e8f8d
}

.brand-mark {
  width:32px;
  height:32px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:3px;
  padding:8px;
  border:1px solid #aab6bb;
  border-radius:4px;
  background:linear-gradient(#f4f6f5,#cbd1d3);
  box-shadow:inset 1px 1px #fff,inset -1px -1px #aab2b5
}

.brand-mark span {
  width:3px;
  background:#6faaa0;
  border-radius:1px
}

.brand-mark span:nth-child(1) {
  height:8px
}

.brand-mark span:nth-child(2) {
  height:15px
}

.brand-mark span:nth-child(3) {
  height:11px
}

.topbar-center,.topbar-right {
  display:flex;
  align-items:center;
  gap:8px;
  color:#75828a;
  font:9px 'DM Mono',monospace;
  letter-spacing:.11em
}

.live-dot,.footer-pulse {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8cb998;
  box-shadow:0 0 8px #8cb99888
}

.topbar-divider {
  color:#a7b0b4
}

.headphone-icon {
  color:#719fa1;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

.headphone-icon svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.main-site-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border:1px solid #9db7ad;
  border-radius:999px;
  background:linear-gradient(180deg,#f4f7ee,#d7e7d3);
  box-shadow:inset 1px 1px #fff,0 1px 2px #52685a22;
  color:#4f786d;
  font:700 10px 'Manrope',sans-serif;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,transform .18s ease
}

.main-site-link:hover {
  background:linear-gradient(180deg,#fbfdf7,#c9dfca);
  transform:translateY(-1px)
}

.main-site-link svg {
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.studio {
  display:grid;
  grid-template-columns:minmax(425px,.93fr) minmax(400px,1.07fr);
  gap:15px;
  align-items:start
}

.panel {
  border:1px solid #aeb7bb;
  border-radius:6px;
  background:linear-gradient(145deg,#e6e9e8,#cbd1d2 45%,#e0e4e3);
  box-shadow:inset 1px 1px #fff,inset -1px -1px #a6afb3,0 5px 18px #48545a1c
}

.player-deck {
  padding:14px;
  min-width:0
}

.deck-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1px 2px 10px
}

.eyebrow {
  margin:0 0 5px;
  color:#77848a;
  font:9px 'DM Mono',monospace;
  letter-spacing:.12em
}

.eyebrow-line {
  display:inline-block;
  width:14px;
  height:2px;
  background:#84a9a2;
  vertical-align:middle;
  margin-right:7px
}

#nowPlayingHeading {
  margin:0;
  color:#4e5d64;
  font:bold 14px 'DM Mono',monospace;
  letter-spacing:.01em
}

.deck-indicators {
  display:flex;
  align-items:center;
  gap:7px;
  color:#738087;
  font:9px 'DM Mono',monospace
}

.indicator.led {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#92aa8f;
  border:1px solid #79927c;
  box-shadow:inset 0 1px #ffffff88
}

.indicator-bars {
  display:flex;
  align-items:center;
  gap:2px
}

.indicator-bars i {
  width:3px;
  height:6px;
  background:#8ea4a0
}

.indicator-bars i:nth-child(2),.indicator-bars i:nth-child(4) {
  height:10px
}

.artwork-stage {
  position:relative;
  isolation:isolate;
  cursor:pointer;
  width:100%;
  aspect-ratio:1.55;
  overflow:hidden;
  margin:0 0 12px;
  border:5px solid #aeb6b7;
  border-radius:3px;
  background:#1c2b2c;
  box-shadow:inset 0 0 0 1px #f8faf8,0 1px 3px #4d585a55
}

.cover-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 6s linear
}

.artwork-stage.is-playing .cover-art {
  transform:scale(1.04)
}

.artwork-glow {
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg,#1623248c,transparent 55%,#202a2440);
  pointer-events:none
}

.artwork-stage:after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,#1420201c,transparent 45%,#10181765);
  pointer-events:none
}

.artwork-grain {
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.1;
  background-image:repeating-linear-gradient(0deg,#fff1 0,#fff1 1px,transparent 1px,transparent 3px);
  pointer-events:none
}

#visualizer {
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  width:100%;
  height:32%;
  opacity:.76
}

.artwork-topline,.artwork-bottomline {
  position:absolute;
  z-index:4;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#d9e2d1;
  font:8px 'DM Mono',monospace;
  letter-spacing:.12em;
  text-shadow:0 1px 3px #0008
}

.artwork-topline {
  top:10px
}

.art-index {
  color:#c9d6c9
}

.art-index b {
  color:var(--lime);
  padding:0 3px
}

.artwork-bottomline {
  bottom:9px;
  color:#d1dbd0
}

.art-signal {
  display:flex;
  align-items:end;
  gap:2px;
  height:13px
}

.art-signal i {
  width:3px;
  height:var(--h,6px);
  background:var(--lime);
  opacity:.8
}

.art-signal i:nth-child(2n) {
  --h:10px
}

.art-signal i:nth-child(3n) {
  --h:4px
}

.artwork-center {
  display:none
}

.track-information {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid #a9b4b7;
  border-radius:3px;
  background:linear-gradient(110deg,#d9dfdf,#edf0ed);
  box-shadow:inset 1px 1px #fff,inset -1px -1px #c3cbcb
}

.track-copy {
  min-width:0
}

.track-artist {
  margin:0 0 4px;
  color:#678d86;
  font:9px 'DM Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}

.track-information h2 {
  margin:0;
  overflow-wrap:anywhere;
  color:#34464c;
  font:bold clamp(14px,1.6vw,20px) 'DM Mono',monospace;
  line-height:1.25;
  letter-spacing:-.025em
}

.track-album {
  margin:5px 0 0;
  color:#78858a;
  font:9px 'DM Mono',monospace
}

.icon-button {
  width:35px;
  height:33px;
  display:grid;
  place-items:center;
  border:1px solid #9ca9ad;
  border-radius:3px;
  background:linear-gradient(#f2f4f3,#cbd1d2);
  color:#687780;
  box-shadow:inset 1px 1px #fff;
  cursor:pointer
}

.icon-button:hover,.icon-button.active {
  color:#658f85;
  background:linear-gradient(#eef3ec,#c5d9cd)
}

.icon-button svg,.transport-button svg,.play-button svg,.utility-button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.favorite-button.active {
  color:#bd7583
}

.favorite-button.active svg {
  fill:#cd879022
}

.transport {
  margin-top:10px;
  padding:9px;
  border:1px solid #a8b1b5;
  border-radius:3px;
  background:linear-gradient(135deg,#d9dede,#c6cdcf);
  box-shadow:inset 1px 1px #f9faf9,inset -1px -1px #b4bdc0
}

.timeline-row {
  display:flex;
  align-items:center;
  gap:9px
}

.timecode {
  min-width:36px;
  color:#728087;
  font:10px 'DM Mono',monospace
}

.timecode:last-child {
  text-align:right
}

.seek-slider,.volume-slider {
  appearance:none;
  height:5px;
  border:1px solid #9ca8aa;
  border-radius:1px;
  background:#b7c0c0;
  outline:0;
  cursor:pointer;
  box-shadow:inset 1px 1px #89949655
}

.seek-slider {
  flex:1
}

.seek-slider::-webkit-slider-thumb,.volume-slider::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:12px;
  border:1px solid #829399;
  border-radius:2px;
  background:linear-gradient(#fafbf8,#c3ccce);
  box-shadow:inset 1px 1px white
}

.seek-slider::-moz-range-thumb,.volume-slider::-moz-range-thumb {
  width:10px;
  height:10px;
  border:1px solid #829399;
  border-radius:2px;
  background:linear-gradient(#fafbf8,#c3ccce)
}

.transport-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:8px 0
}

.transport-button,.play-button {
  position:relative;
  width:37px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #99a5a9;
  border-radius:3px;
  background:linear-gradient(#f1f3f2,#c3cbcd);
  color:#5d6f77;
  box-shadow:inset 1px 1px #fff,0 1px #aab2b5;
  cursor:pointer
}

.transport-button:hover,.play-button:hover {
  background:linear-gradient(#fff,#d1dad9);
  color:#557e7d
}

.transport-button:active,.play-button:active {
  box-shadow:inset 1px 1px #a0aaac;
  transform:translateY(1px)
}

.transport-button.category-skip svg {
  width:16px;
  transform:translateY(-3px)
}

.transport-button.category-skip {
  width:42px
}

.transport-button span {
  position:absolute;
  right:2px;
  bottom:1px;
  color:#829096;
  font:8px 'DM Mono',monospace
}

.play-button {
  width:46px;
  height:37px;
  color:#547b70;
  background:linear-gradient(#e8f1df,#bfd6aa);
  border-color:#94a995
}

.play-button svg {
  width:21px;
  height:21px;
  fill:currentColor;
  stroke:none
}

.pause-icon {
  display:none
}

.play-button.is-playing .play-icon {
  display:none
}

.play-button.is-playing .pause-icon {
  display:block
}

.utility-controls {
  display:flex;
  align-items:center;
  gap:5px;
  padding-top:7px;
  border-top:1px solid #afb9ba
}

.utility-button,.speed-button {
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 7px;
  border:1px solid #a6b0b2;
  border-radius:3px;
  background:linear-gradient(#ecefee,#cbd2d2);
  color:#758188;
  font:9px 'DM Mono',monospace;
  letter-spacing:.04em;
  box-shadow:inset 1px 1px #fff;
  cursor:pointer
}

.utility-button svg {
  width:13px;
  height:13px
}

.utility-button:hover,.utility-button.active {
  color:#527f75;
  background:linear-gradient(#eff4e8,#d0dfc0)
}

.speed-button {
  font-size:11px;
  color:#60737b;
  min-width:44px
}

.volume-control {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px
}

.volume-control .icon-button {
  width:29px;
  height:27px
}

.volume-button svg {
  width:15px;
  height:15px
}

.volume-slider {
  width:64px
}

.player-message {
  min-height:12px;
  margin:8px 1px 0;
  color:#7b888d;
  font:8px 'DM Mono',monospace
}

.player-message.error {
  color:#aa626c
}

.library-panel {
  min-height:580px;
  max-height:calc(100vh - 130px);
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:5px;
  border-color:#9eafb3;
  background:linear-gradient(145deg,#e2edef,#c2d5d8 48%,#d6e5e3)
}

.library-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  padding:4px 5px 9px;
  border-bottom:1px solid #b4bcbf
}

.library-heading h2 {
  margin:0;
  color:#495961;
  font:bold 14px 'DM Mono',monospace;
  letter-spacing:.02em
}

.library-total {
  display:flex;
  align-items:baseline;
  gap:5px
}

.library-total strong {
  color:#608e85;
  font:18px 'DM Mono',monospace
}

.library-total span {
  color:#839096;
  font:8px 'DM Mono',monospace;
  letter-spacing:.1em
}

.category-navigation {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}

.category-tabs {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:2px 2px 9px;
  scrollbar-width:thin;
  scrollbar-color:#aebcbd transparent
}

.category-tab {
  flex:none;
  padding:6px 8px;
  border:1px solid #aeb8ba;
  border-radius:3px;
  background:linear-gradient(#edf0ef,#cbd2d2);
  color:#65747b;
  font:8px 'DM Mono',monospace;
  box-shadow:inset 1px 1px #fff;
  cursor:pointer
}

.category-tab:hover {
  color:#4a6f6e;
  border-color:#94aaa7
}

.category-tab.active {
  color:#4d7770;
  background:linear-gradient(#e8f1df,#c8dbb8);
  border-color:#9eb29e
}

.favorites-tab {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:2px;
  white-space:nowrap
}

.favorites-tab svg {
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.favorites-tab.active {
  color:#9d6572;
  border-color:#c69ca2;
  background:linear-gradient(#f8eeee,#ead3d5)
}

.favorites-tab.active svg {
  fill:#ce788822
}

.favorite-count {
  min-width:15px;
  padding:1px 4px;
  border-radius:999px;
  background:#ffffff80;
  text-align:center;
  font-size:.9em
}

.search-field {
  height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  border:1px solid #aab4b6;
  border-radius:3px;
  background:#e8ebea;
  color:#78868b;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #c3c9c9
}

.search-field:focus-within {
  border-color:#829f99
}

.search-field svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}

.search-field input {
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:#45565d;
  font:9px 'DM Mono',monospace
}

.search-field input::placeholder {
  color:#9aa4a4
}

.search-field button {
  border:0;
  background:transparent;
  color:#76868a;
  font-size:17px;
  cursor:pointer
}

.search-field kbd,.keyboard-hint kbd {
  padding:2px 5px;
  border:1px solid #bbc4c5;
  border-radius:2px;
  color:#879397;
  font:8px 'DM Mono',monospace;
  background:#e0e5e3
}

.playlist-heading {
  display:flex;
  justify-content:space-between;
  margin:11px 2px 6px;
  color:#76848a;
  font:8px 'DM Mono',monospace;
  letter-spacing:.09em
}

.track-list {
  flex:1 1 240px;
  min-height:240px;
  overflow:auto;
  border:1px solid #aeb9ba;
  border-radius:3px;
  background:#eef0ec;
  box-shadow:inset 1px 1px #fff;
  scrollbar-color:#afbbbc #e4e8e5;
  scrollbar-width:thin
}

.track-row {
  width:100%;
  min-height:39px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border:0;
  border-bottom:1px solid #e0e4df;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer
}

.track-row:nth-child(even) {
  background:#e9ece8
}

.track-row:hover {
  background:#e1eadf
}

.track-row.active {
  background:#dbe8cf;
  box-shadow:inset 3px 0 #86a97e
}

.track-index {
  width:22px;
  text-align:center;
  color:#9aa4a3;
  font:8px 'DM Mono',monospace
}

.track-playing {
  width:22px;
  display:none;
  place-items:center;
  color:#648b76;
  font-size:12px
}

.track-row.active .track-index {
  display:none
}

.track-row.active .track-playing {
  display:grid
}

.track-row.active.is-playing .track-playing {
  animation:blink .75s alternate infinite
}

@keyframes blink {
  to {
    opacity:.4
  }
}

.track-copy {
  min-width:0;
  flex:1
}

.track-name {
  display:block;
  overflow:hidden;
  color:#506067;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:12px 'DM Mono',monospace;
  font-weight:400
}

.track-category {
  display:block;
  margin-top:3px;
  color:#929d9d;
  font:7px 'DM Mono',monospace;
  letter-spacing:.04em
}

.track-duration {
  color:#899594;
  font:8px 'DM Mono',monospace
}

.empty-state {
  margin:auto;
  display:grid;
  justify-items:center;
  gap:7px;
  padding:20px;
  text-align:center;
  color:#78868a;
  font-size:10px
}

.empty-state[hidden] {
  display:none
}

.empty-orbit {
  color:#7ca89f;
  font-size:24px
}

.bottom-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding:10px 3px 0;
  border-top:1px solid #c8cfce;
  color:#7e8b8f;
  font:8px 'DM Mono',monospace;
  letter-spacing:.08em
}

.bottom-bar>span {
  display:flex;
  align-items:center;
  gap:6px
}

.bottom-bar b {
  color:#5d7476;
  font-weight:500
}

.keyboard-hint {
  gap:4px!important
}

.keyboard-hint kbd {
  margin-left:3px
}

.keyboard-hint kbd:first-child {
  margin-left:0
}

:focus-visible {
  outline:2px solid #7fa69b;
  outline-offset:2px
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

@media(max-width:850px) {
  .app-shell {
    max-width:700px;
    padding:15px
  }

  .studio {
    grid-template-columns:1fr;
    gap:12px
  }

  .player-deck {
    padding:12px
  }

  .artwork-stage {
    aspect-ratio:1.7
  }

  .library-panel {
    min-height:420px;
    max-height:65vh
  }

  .track-row {
    min-height:43px
  }

  .topbar-right {
    font-size:8px
  }
}

@media(max-width:480px) {
  .app-shell {
    padding:9px
  }

  .topbar {
    height:46px;
    margin-bottom:10px
  }

  .brand {
    font-size:11px
  }

  .brand-mark {
    width:29px;
    height:29px
  }

  .topbar-center {
    display:none
  }

  .topbar-right {
    font-size:0
  }

  .headphone-icon {
  color:#719fa1
  }

  .player-deck {
    padding:9px
  }

  .deck-topline {
    padding-bottom:7px
  }

  #nowPlayingHeading {
    font-size:12px
  }

  .artwork-stage {
    aspect-ratio:1.35;
    margin-bottom:9px
  }

  .artwork-topline,.artwork-bottomline {
    left:8px;
    right:8px;
    font-size:7px
  }

  .track-information {
    padding:8px
  }

  .track-information h2 {
    font-size:14px
  }

  .transport {
    padding:7px
  }

  .transport-controls {
    gap:5px;
    margin:7px 0
  }

  .transport-button {
    width:34px;
    height:31px
  }

  .play-button {
    width:44px;
    height:34px
  }

  .utility-controls {
    gap:3px
  }

  .utility-button {
    padding:0 5px;
    font-size:6px
  }

  .utility-button svg {
    width:11px;
    height:11px
  }

  .speed-button {
    min-width:37px;
    padding:0 4px
  }

  .volume-slider {
    width:45px
  }

  .volume-control {
    gap:3px
  }

  .library-panel {
    padding:9px;
    min-height:410px
  }

  .category-tab {
    font-size:7px;
    padding:6px
  }

  .playlist-heading {
    font-size:7px
  }

  .track-row {
    min-height:41px
  }

  .track-name {
    font-size:8px
  }

  .bottom-bar {
    flex-wrap:wrap;
    font-size:7px
  }

  .keyboard-hint {
    display:none!important
  }
}

/* Mobile fit and readable metadata */
html,body {
  width:100%;
  max-width:100%;
  overflow-x:hidden
}

.app-shell {
  width:100%;
  min-width:0
}

.studio,.player-deck,.library-panel {
  min-width:0;
  max-width:100%
}

.track-information,.track-copy {
  min-width:0
}

.track-information h2 {
  overflow-wrap:anywhere;
  word-break:normal
}

.artwork-stage {
  min-width:0
}

.utility-controls {
  min-width:0;
  flex-wrap:wrap
}

.volume-control {
  min-width:0
}

.player-message {
  overflow-wrap:anywhere
}

@media(max-width:850px) {
  .app-shell {
    width:100%;
    padding-left:12px;
    padding-right:12px
  }

  .studio {
    width:100%;
    grid-template-columns:minmax(0,1fr)
  }

  .player-deck,.library-panel {
    width:100%
  }

  .library-panel {
    max-height:none;
    min-height:380px
  }

  .track-list {
    flex:0 1 auto;
    min-height:220px;
    max-height:48vh
  }
}

@media(max-width:600px) {
  .app-shell {
    padding:8px
  }

  .topbar {
    width:100%;
    min-width:0
  }

  .studio {
    padding-top:10px;
    gap:10px
  }

  .player-deck {
    padding:9px
  }

  .deck-topline {
    padding:0 2px 7px
  }

  .artwork-stage {
    width:100%;
    height:auto;
    aspect-ratio:1.9;
    max-height:220px;
    margin:0 0 9px
  }

  .artwork-topline,.artwork-bottomline {
    font-size:7px
  }

  .track-information {
    padding:8px
  }

  .track-information h2 {
    font-size:clamp(13px,4vw,17px);
    line-height:1.2
  }

  .track-artist,.track-album {
    font-size:8px
  }

  .transport {
    margin-top:8px;
    padding:7px
  }

  .transport-controls {
    gap:5px
  }

  .utility-controls {
    justify-content:flex-start;
    row-gap:6px
  }

  .volume-control {
    margin-left:auto
  }

  .library-panel {
    min-height:360px;
    padding:9px
  }

  .library-heading h2 {
    font-size:13px
  }

  .track-list {
    min-height:220px;
    max-height:none
  }

  .track-row {
    min-height:42px
  }

  .track-name {
    font-size:11px
  }

  .bottom-bar {
    padding-bottom:8px
  }
}

@media(max-width:380px) {
  .utility-button {
    padding:0 4px;
    font-size:8px
  }

  .volume-slider {
    width:40px
  }

  .volume-control {
    gap:2px
  }

  .artwork-stage {
    aspect-ratio:1.75;
    max-height:200px
  }

  .art-index {
    font-size:6px
  }
}

/* Artwork fills the complete monitor frame */
.artwork-stage {
  width:min(100%,420px);
  height:auto;
  aspect-ratio:1/1;
  max-height:none;
  margin:0 auto 10px;
  background:#d8ddda
}

.cover-art {
  object-fit:fill;
  transform:none!important
}

.artwork-stage.is-playing .cover-art {
  transform:none
}

.artwork-stage:after,.artwork-glow,.artwork-grain,#visualizer,.artwork-topline,.artwork-bottomline {
  display:none!important
}

@media(max-width:600px) {
  .artwork-stage {
    width:min(100%,88vw,360px);
    height:auto;
    aspect-ratio:1/1;
    max-height:none;
    margin:0 auto 9px
  }
}

/* Animated, non-blocking spectrum strip: purely visual, audio remains native */
#visualizer {
  display:block!important;
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  width:100%;
  height:18%;
  opacity:.8;
  pointer-events:none
}

/* Wide monitor display keeps full covers and animated GIFs visible */
.artwork-stage {
  width:min(100%,680px);
  height:auto;
  aspect-ratio:16/9;
  max-height:none;
  margin:0 auto 10px;
  background:#d8ddda
}

.cover-art {
  object-fit:fill;
  transform:none!important
}

.artwork-stage.is-playing .cover-art {
  transform:none
}

@media(max-width:600px) {
  .artwork-stage {
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    max-height:none;
    margin:0 auto 9px
  }
}

/* Crisp control typography with a restrained cool accent palette */
button,.category-tab,.utility-button,.speed-button,.transport-button {
  font-family:Arial,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision
}

.transport-button,.utility-button,.speed-button,.category-tab {
  font-weight:700;
  letter-spacing:.045em;
  text-shadow:none
}

.transport-button {
  color:#546d7d;
  border-color:#9aabb5;
  background:linear-gradient(180deg,#f1f5f5,#cbd8dc);
  box-shadow:inset 1px 1px #fff,0 1px #a5b5bb
}

.transport-button:hover {
  color:#426d78;
  border-color:#779ca7;
  background:linear-gradient(180deg,#f8fbfb,#d5e3e6)
}

.play-button {
  color:#f8fbf8;
  border-color:#7a9f96;
  background:linear-gradient(180deg,#94b9a2,#6f9f91);
  box-shadow:inset 1px 1px #d8e9d9,0 2px 4px #50695c44
}

.utility-button {
  color:#617b8a;
  border-color:#aab9bf;
  background:linear-gradient(180deg,#f0f4f5,#d5e0e3)
}

.utility-button:hover,.utility-button.active {
  color:#496f7e;
  border-color:#84aab3;
  background:linear-gradient(180deg,#edf6f6,#c8e0df)
}

#shuffleButton {
  color:#627f9e
}

#repeatButton {
  color:#668a7d
}

#shuffleButton.active {
  color:#365f9a;
  border-color:#779ac7;
  background:linear-gradient(180deg,#eaf2ff,#bfd1ed);
  box-shadow:inset 1px 1px #fff,0 1px 3px #5779a044
}

#repeatButton.active[data-mode="all"] {
  color:#3d786a;
  border-color:#79aa9b;
  background:linear-gradient(180deg,#e8f5e9,#b8d8c5);
  box-shadow:inset 1px 1px #fff,0 1px 3px #4d846144
}

#repeatButton.active[data-mode="one"] {
  color:#8a6a31;
  border-color:#c4a75f;
  background:linear-gradient(180deg,#fff5d9,#ead69a);
  box-shadow:inset 1px 1px #fff,0 1px 3px #aa874044
}

#speedButton {
  color:#89774f;
  border-color:#c4b98e;
  background:linear-gradient(180deg,#f7f3e6,#e7dfc4)
}

#muteButton {
  color:#637c95;
  border-color:#aab9bf;
  background:linear-gradient(180deg,#f0f4f5,#d5e0e3)
}

#muteButton.active {
  color:#a65f69;
  border-color:#c78e96;
  background:linear-gradient(180deg,#f8eded,#e9ced1);
  box-shadow:inset 1px 1px #fff,0 1px 2px #89555a33
}

.volume-mute-slash {
  display:none
}

#muteButton.active .volume-wave {
  display:none
}

#muteButton.active .volume-mute-slash {
  display:block
}

.category-tab {
  font-size:11px;
  font-weight:700;
  color:#62727b
}

.category-tab.active {
  color:#507d75;
  border-color:#96b6a7;
  background:linear-gradient(180deg,#eef4e9,#cfdfc4)
}

.track-name {
  font-weight:400
}

@media(max-width:600px) {
  .utility-button {
    font-size:11px
  }

  .category-tab {
    font-size:11px
  }

  .transport-button {
    font-size:11px
  }

  .transport-button span {
    font-size:9px
  }
}

.track-thumb {
  flex:0 0 54px;
  width:54px;
  height:30px;
  display:block;
  object-fit:contain;
  border:1px solid #aab8b4;
  border-radius:3px;
  background:#dce3df;
  box-shadow:inset 0 1px #fff
}

.track-thumb[hidden] {
  display:none
}

@media(max-width:480px) {
  .track-thumb {
    flex-basis:46px;
    width:46px;
    height:26px
  }
}