/* Music jukebox */
.music-page { height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 0, #774320, #160a05 67%); color: #ffe7ae; font-family: Arial, sans-serif; }.music-console { position: relative; display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content; width: min(1160px, calc(100% - 2rem)); height: 100vh; margin: 0 auto; padding: .8rem 0 1rem; }.music-marquee { position: relative; z-index: 2; grid-row: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .5rem 1rem; border: 5px ridge #d09a46; background: linear-gradient(#5f2810, #2c1008); box-shadow: inset 0 2px #ffde93, 0 4px 8px #090300; }.music-marquee a { color: #b9f860; font: 1rem "Times New Roman", Times, serif; }.music-marquee h1 { margin: 0; color: #ffdc67; font: bold clamp(1.35rem, 4vw, 2.35rem) "Times New Roman", Times, serif; letter-spacing: .08em; text-shadow: 2px 2px #481800; }.music-marquee span { color: #ffb866; font-size: .76rem; text-align: right; }.music-deck { position: relative; z-index: 1; grid-row: 2; display: grid; grid-template-columns: minmax(310px, .9fr) minmax(360px, 1.25fr); min-height: 0; gap: .85rem; padding: .85rem 0; }.jukebox-bay, .playlist-bay, .player-bay { border: 6px ridge #a86d2d; background: linear-gradient(105deg, #522210, #8c4b21 35%, #54230f 72%, #a05d2a); box-shadow: inset 0 0 0 3px #251006, inset 0 2px #dbaf62, 0 5px 10px #120703; }.jukebox-bay { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; padding: .65rem; }.jukebox-canvas { min-height: 220px; border: 8px inset #2d2d28; background: radial-gradient(circle, #181814, #020202); box-shadow: inset 0 0 26px #000; }.jukebox-canvas canvas { display: block; width: 100%; height: 100%; }.model-caption { margin: .45rem 0; color: #d5ff75; font: bold .75rem Arial, sans-serif; letter-spacing: .15em; text-align: center; }.model-knobs { display: flex; justify-content: space-evenly; gap: .35rem; }.model-knobs label { display: grid; justify-items: center; gap: .25rem; color: #ffe0a0; font-size: .68rem; text-transform: uppercase; }.knob-input { width: 37px; height: 37px; margin: 0; appearance: none; border: 3px outset #ded1b0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d0 0 7%, #967f5d 10% 27%, #252019 30% 57%, #b99e72 60% 64%, #30261b 67%); cursor: ew-resize; }.knob-input::-webkit-slider-thumb { width: 5px; height: 16px; appearance: none; border: 0; border-radius: 2px; background: #ffcd55; box-shadow: 0 0 2px #000; }.knob-input::-moz-range-thumb { width: 5px; height: 16px; border: 0; border-radius: 2px; background: #ffcd55; }.playlist-bay { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: .65rem; }.playlist-bay h2 { margin: 0 0 .5rem; padding: .35rem .6rem; border: 3px inset #51432b; background: #18130b; color: #d9ff71; font: bold 1.1rem "Times New Roman", Times, serif; text-align: center; }.jukebox-playlist { min-height: 0; margin: 0; padding: 0; overflow-y: auto; border: 3px inset #3a2616; background: #180d07; list-style: none; }.jukebox-playlist button { display: flex; width: 100%; gap: .75rem; padding: .58rem .7rem; border: 0; border-bottom: 1px solid #785224; background: transparent; color: #f9dca3; cursor: pointer; font: 1rem "Times New Roman", Times, serif; text-align: left; }.jukebox-playlist button span { color: #b7f65e; font: bold .75rem Arial, sans-serif; }.jukebox-playlist button:hover, .jukebox-playlist button.is-active { background: linear-gradient(90deg, #9a531f, #efb654 55%, #8a4218); color: #1f0b03; text-shadow: 0 1px #ffe4a6; }.player-bay { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(290px, 1.3fr) minmax(240px, .9fr); align-items: center; gap: .75rem; padding: .6rem .8rem; }.now-playing { padding: .55rem; border: 3px inset #554229; background: #14100a; color: #d6ff71; }.now-playing span { display: block; color: #f5c15d; font-size: .65rem; letter-spacing: .12em; }.now-playing strong { display: block; overflow: hidden; color: #d6ff71; font: 1rem "Times New Roman", Times, serif; text-overflow: ellipsis; white-space: nowrap; }.player-bay audio { width: 100%; accent-color: #e09a3d; }.playback-row { display: flex; align-items: center; justify-content: center; gap: .35rem; }.playback-row button { border: 3px outset #e2c585; border-radius: .3rem; background: linear-gradient(#f8dd91, #ad6726); color: #2b1206; cursor: pointer; font: bold .7rem Arial, sans-serif; padding: .45rem; }.playback-row output { min-width: 3.2rem; padding: .36rem; border: 2px inset #3a2b16; background: #101a0b; color: #d2ff66; font: bold .78rem Arial, sans-serif; text-align: center; }.eq-bay { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }.eq-bay canvas { width: 100%; height: 58px; border: 3px inset #3e2a17; background: #07140c; }.eq-controls { display: flex; gap: .3rem; }.eq-controls label { display: grid; justify-items: center; color: #ffe0a0; font-size: .6rem; }.eq-slider { width: 12px; height: 53px; appearance: slider-vertical; accent-color: #da9f40; writing-mode: vertical-lr; direction: rtl; }
@media (max-width: 850px) { .music-deck { grid-template-columns: 1fr; }.jukebox-bay { display: none; }.player-bay { grid-template-columns: 1fr; }.music-console { width: min(100% - 1rem, 1160px); }.eq-bay { grid-template-columns: 1fr; }.playlist-bay { min-height: 0; } }

/* Jukebox layout: playlist below marquee; mixer left, transport center, model right. */
.music-console { grid-template-rows: max-content minmax(180px, 1fr) 235px; }.music-deck { display: block; min-height: 0; padding: .65rem 0; }.music-deck .playlist-bay { height: 100%; min-height: 0; }.player-bay { display: grid; grid-template-columns: minmax(245px, 1fr) minmax(330px, 1.35fr) minmax(200px, .72fr); align-items: stretch; padding: .65rem; }.player-bay .eq-bay { display: grid; grid-template-rows: minmax(85px, 1fr) auto; grid-template-columns: 1fr; min-height: 0; }.player-bay .eq-bay canvas { width: 100%; height: 100%; min-height: 82px; }.player-bay .eq-controls { justify-content: space-evenly; gap: .5rem; }.player-bay .eq-slider { width: 16px; height: 92px; }.transport-bay { display: grid; grid-template-rows: auto 1fr auto; align-items: center; gap: .55rem; padding: .55rem; border: 3px inset #554229; background: linear-gradient(#6e3517, #321408); }.transport-bay audio { width: 100%; }.transport-bay .playback-row { align-self: end; }.player-bay .jukebox-bay { display: grid; grid-template-rows: minmax(125px, 1fr) auto auto; min-height: 0; padding: .38rem; }.player-bay .jukebox-canvas { min-height: 125px; border-width: 5px; }.player-bay .model-caption { margin: .22rem 0; font-size: .58rem; }.player-bay .model-knobs { gap: .15rem; }.player-bay .model-knobs label { font-size: .52rem; }.player-bay .knob-input { width: 28px; height: 28px; }.player-bay .knob-input::-webkit-slider-thumb { height: 11px; }.player-bay .knob-input::-moz-range-thumb { height: 11px; }
@media (max-width: 850px) { .player-bay { grid-template-columns: 1fr 1.15fr; }.player-bay .jukebox-bay { display: grid; grid-column: 1 / -1; min-height: 160px; }.music-deck .playlist-bay { height: 100%; } }
.music-deck { width: 100%; justify-self: stretch; align-self: stretch; }.music-deck .playlist-bay { width: 100%; grid-template-rows: max-content minmax(0, 1fr); }
@media (max-width: 700px) { .learn-main { width: min(100% - 2rem, 600px); border: 0; }.bookshelf { width: 42px; opacity: .45; }.coffee-main { width: min(100% - 1rem, 760px); }.coffee-facts { display: block; }.coffee-facts img { display: block; margin: 0 auto .75rem; } }

/* Compact, non-scrolling console layout. */
html:has(.music-page),
.music-page {
  height: 100%;
  overflow: hidden;
}

.music-console {
  width: min(900px, calc(100% - 2rem));
  grid-template-rows: max-content minmax(150px, 1fr) 210px;
  gap: .45rem;
  padding: .7rem 0 .9rem;
}

.music-deck {
  padding: 0;
  min-height: 0;
}

.music-deck .playlist-bay {
  justify-self: stretch;
  min-height: 0;
  width: 100%;
}

.music-marquee {
  justify-self: stretch;
  width: 100%;
}

.music-marquee h1 {
  font-family: "Times New Roman", Times, serif;
  text-transform: none;
}

.player-bay {
  grid-template-columns: minmax(145px, .55fr) minmax(250px, 1.25fr) minmax(180px, .72fr);
  min-height: 0;
  overflow: hidden;
  gap: .5rem;
  padding: .45rem;
}

.player-bay .eq-bay {
  grid-template-rows: 58px auto;
  gap: .45rem;
  align-content: center;
}

.player-bay .eq-bay canvas {
  min-height: 0;
  height: 58px;
}

.player-bay .eq-controls {
  gap: .2rem;
}

.player-bay .eq-slider {
  width: 12px;
  height: 70px;
}

.player-bay .eq-controls label {
  font-size: .54rem;
}

.transport-bay {
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  gap: .3rem;
  padding: .42rem;
}

.transport-bay audio { display: none; }

.custom-player {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto minmax(84px, .55fr);
  align-items: center;
  gap: .42rem;
  min-width: 0;
}

.play-pause {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 3px outset #f7d784;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, #fff5bc 0 9%, #e6b54c 30%, #9a551b 71%, #4a210a 100%);
  box-shadow: inset 0 1px #fff7c8, 1px 2px 2px #180904;
  color: #3b1906;
  cursor: pointer;
  font: bold .76rem Arial, sans-serif;
  line-height: 1;
  padding: 0 0 0 1px;
}

.play-pause:disabled {
  cursor: default;
  filter: saturate(.25) brightness(.75);
}

.audio-range {
  width: 100%;
  height: 16px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.audio-range::-webkit-slider-runnable-track {
  height: 7px;
  border: 2px inset #3a210c;
  border-radius: 0;
  background: linear-gradient(#7a441e, #c58d38 48%, #6c3515);
  box-shadow: inset 0 1px 2px #1c0b03;
}

.audio-range::-webkit-slider-thumb {
  width: 8px;
  height: 17px;
  margin-top: -7px;
  appearance: none;
  border: 2px outset #ffe7a3;
  border-radius: 0;
  background: linear-gradient(90deg, #8c4b1c, #f6cf6c 50%, #9c551d);
  box-shadow: 1px 1px 2px #1e0b03;
}

.audio-range::-moz-range-track {
  height: 7px;
  border: 2px inset #3a210c;
  border-radius: 0;
  background: linear-gradient(#7a441e, #c58d38 48%, #6c3515);
  box-shadow: inset 0 1px 2px #1c0b03;
}

.audio-range::-moz-range-thumb {
  width: 8px;
  height: 17px;
  border: 2px outset #ffe7a3;
  border-radius: 0;
  background: linear-gradient(90deg, #8c4b1c, #f6cf6c 50%, #9c551d);
  box-shadow: 1px 1px 2px #1e0b03;
}

#timeReadout {
  color: #ffe0a2;
  font: .72rem "Times New Roman", Times, serif;
  white-space: nowrap;
}

.volume-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .25rem;
  min-width: 0;
  color: #f6cf6c;
  font-size: .76rem;
}

.transport-bay .now-playing {
  padding: .38rem .45rem;
}

.transport-bay .playback-row {
  gap: .25rem;
}

.transport-bay .playback-row button {
  padding: .32rem;
  font-size: .64rem;
}

.transport-bay .playback-row output {
  min-width: 2.85rem;
  padding: .27rem;
}

.transport-copyright {
  align-self: end;
  grid-row: 5;
  margin: 0;
  color: #d8bd83;
  font: .62rem "Times New Roman", Times, serif;
  text-align: center;
}

.transport-copyright a {
  color: #d9ff71;
}

.terms-dialog {
  width: min(460px, calc(100% - 2rem));
  border: 6px ridge #bf833b;
  background: linear-gradient(135deg, #6d3519, #2b1007);
  box-shadow: inset 0 0 0 3px #251006, 0 14px 45px #000;
  color: #ffe4ac;
  font-family: "Times New Roman", Times, serif;
  padding: 1.2rem 1.4rem 1.35rem;
}

.terms-dialog::backdrop {
  background: rgb(0 0 0 / 70%);
}

.terms-dialog h2 {
  margin: 0 2rem .7rem 0;
  color: #e0ff79;
  font-size: 1.5rem;
}

.terms-dialog p {
  margin: .65rem 0;
  line-height: 1.3;
}

.terms-close {
  position: absolute;
  top: .45rem;
  right: .55rem;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px outset #e5c475;
  border-radius: 50%;
  background: linear-gradient(#f2cd78, #8b481e);
  color: #251006;
  cursor: pointer;
  font: bold 1.1rem Arial, sans-serif;
}

.player-bay .jukebox-bay {
  grid-template-rows: minmax(92px, 1fr) auto auto;
  padding: .3rem;
}

.player-bay .model-knobs {
  padding-top: .35rem;
}

.player-bay .jukebox-canvas {
  min-height: 92px;
}

@media (max-height: 700px) and (min-width: 851px) {
  .music-console {
    grid-template-rows: max-content minmax(120px, 1fr) 182px;
    gap: .3rem;
    padding: .4rem 0 .55rem;
  }

  .music-marquee { padding: .32rem .7rem; }
  .music-marquee h1 { font-size: 1.3rem; }
  .playlist-bay h2 { margin-bottom: .25rem; padding: .2rem .4rem; }
  .jukebox-playlist button { padding: .35rem .55rem; }
  .player-bay .eq-slider { height: 46px; }
  .player-bay .jukebox-canvas { min-height: 70px; }
  .player-bay .model-caption { display: none; }
  .player-bay .knob-input { width: 23px; height: 23px; }
}

@media (max-width: 850px) {
  .music-console { grid-template-rows: max-content minmax(150px, 1fr) 205px; }
  .player-bay { grid-template-columns: minmax(130px, .7fr) minmax(230px, 1.3fr); }
  .player-bay .jukebox-bay { display: none; }
}

@media (max-width: 540px) {
  .music-console { grid-template-rows: max-content minmax(110px, 1fr) 280px; }
  .music-marquee { grid-template-columns: 1fr; text-align: center; }
  .music-marquee span { display: none; }
  .player-bay { grid-template-columns: 1fr; }
  .player-bay .eq-bay { display: none; }
}