/* The chassis is decorative; the screen, keys and knob remain replaceable HTML parts. */
.desk { overflow: visible; }
/* Let the last desktop board define the desk edge as its content changes. */
@media (min-width: 781px) {
  .desk-stage { min-height: 510px; padding: 250px 0 16px; }
  .album { position: relative; top: auto; }
}
.about-object { left: 56%; isolation: isolate; }
.about-trigger { position: relative; isolation: isolate; }
.about-trigger::before {
  position: absolute;
  z-index: 0;
  top: 131px;
  left: calc(50% + 12px);
  width: 92px;
  height: 19px;
  border-radius: 50%;
  background: rgb(24 10 5 / .49);
  filter: blur(1px);
  transform: rotate(-3deg);
  content: "";
  pointer-events: none;
}
.object-art, .object-tag { position: relative; z-index: 1; }
.object-art { box-shadow: inset 0 0 0 10px rgb(255 255 255 / .06), 2px 3px 1px rgb(31 15 8 / .28); }
.desk-radio {
  position: absolute;
  z-index: 7;
  top: calc(8px - var(--radio-extra-height, 0px));
  right: 2%;
  width: 230px;
  height: 114px;
  color: #e5e6df;
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", Osaka, sans-serif;
  isolation: isolate;
}
.desk-radio::before {
  position: absolute;
  z-index: 0;
  background: url("./radio-shadow.svg") left top / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}
.desk-radio::after {
  position: absolute;
  z-index: 0;
  bottom: -3px;
  height: 5px;
  border-radius: 2px 2px 50% 50%;
  background: linear-gradient(to bottom, rgb(20 8 4 / .80), rgb(20 8 4 / .53) 45%, rgb(20 8 4 / 0));
  box-shadow: 3px 1px 2px rgb(20 8 4 / .24);
  content: "";
  pointer-events: none;
}
.desk-radio-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.desk-radio-depth {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("./radio-shell.svg") no-repeat left top / 100% 100%;
  pointer-events: none;
}
.desk-radio-face {
  position: absolute;
  z-index: 2;
  inset: 0;
}
.desk-radio-screen {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 4px 5px 3px;
  border: 1px solid #111a16;
  color: #92dc89;
  background: linear-gradient(135deg, #0b2b20, #072218 55%, #09271c);
  box-shadow: 0 0 0 1px #4b4e50, 0 1px 0 1px #696b6d, inset 1px 1px 2px rgb(0 0 0 / .35);
  overflow: hidden;
}
.desk-radio-track-window {
  display: flex; align-items: flex-start;
  flex: none; height: 17px; overflow: hidden; white-space: nowrap;
}
.desk-radio-track {
  flex: none;
  color: #9ce69a;
  font: bold 12px/17px "MS PGothic", sans-serif;
  white-space: nowrap;
}
.desk-radio-track.is-scrolling { animation: radio-title-scroll var(--radio-scroll-duration) linear infinite; }
@keyframes radio-title-scroll {
  0%, 15% { transform: translateX(0); }
  80%, 92% { transform: translateX(calc(-1 * var(--radio-scroll-distance))); }
  100% { transform: translateX(0); }
}
.desk-radio-wave {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 19px;
  margin: 1px 0 2px;
  border-bottom: 1px solid #2b5439;
  image-rendering: pixelated;
}
.desk-radio-screen-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  min-height: 12px;
  margin-top: auto;
  color: #80c57c;
  font: bold 9px/1.2 "Courier New", monospace;
  white-space: nowrap;
}
.desk-radio-screen-bottom [data-radio-mode] { overflow: hidden; text-overflow: ellipsis; }
.desk-radio-screen-bottom [data-radio-time] { flex: none; transform: translateY(1px); }
.desk-radio-controls {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}
.desk-radio-key, .desk-radio-knob {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  padding: 0;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.desk-radio-key {
  width: 28px;
  height: 29px;
  border: 1px solid #202328;
  border-radius: 4px;
  color: #f0f1eb;
  background: #55585d linear-gradient(180deg, rgb(255 255 255 / .05), transparent 45%, rgb(0 0 0 / .12));
  box-shadow: inset 0 1px #93969a, inset 1px 0 rgb(255 255 255 / .12), inset 0 -1px #3c3f43, 0 1px 1px rgb(0 0 0 / .25);
}
.desk-radio-key svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.desk-radio-key:hover:not(:disabled) { background: #696e75; }
.desk-radio-key:active:not(:disabled) { transform: translate(1px, 1px); background: #43484f; box-shadow: inset 1px 1px #2d3136; }
.desk-radio-key:disabled { color: #91969c; background: #393d43; cursor: not-allowed; }
.desk-radio-key:focus-visible, .desk-radio-knob:focus-visible { outline: 2px solid #fff0a5; outline-offset: 2px; }
.desk-radio-key.is-playing { color: #8add90; }
.desk-radio-key.mode-key[data-mode-group="shuffle"] { color: #8fd2df; }
.desk-radio-key.mode-key[data-mode-group="repeat"] { color: #e5c16d; }
.desk-radio-key.volume-key[aria-expanded="true"] { color: #9fe19c; }
.desk-radio-key.volume-key.is-muted { color: #e79b84; }
.desk-radio-key .icon-pause { display: none; }
.desk-radio-key.is-playing .icon-play { display: none; }
.desk-radio-key.is-playing .icon-pause { display: block; }
.desk-radio-knob {
  border: 0;
  border-radius: 50%;
  background: url("./radio-knob.svg") center / 100% 100% no-repeat;
}
.desk-radio-knob span {
  position: absolute; width: 1.2px; height: 6px; background: #e1e2dc; border-radius: 1px;
}
.desk-radio-knob:hover {
  filter: brightness(1.18);
}
.desk-radio-knob:active { transform: translate(1px, 1px); }
@media (prefers-reduced-motion: reduce) {
  .desk-radio-track.is-scrolling { max-width: 100%; overflow: hidden; text-overflow: ellipsis; animation: none; }
}
.desk-radio-volume {
  position: absolute;
  z-index: 3;
  right: 1px;
  bottom: calc(100% - 15px);
  width: 184px;
  padding: 8px 10px;
  border: 3px ridge #8e9690;
  color: #d2f0c9;
  background: #17211b;
  box-shadow: 3px 4px 0 rgb(0 0 0 / .4);
  font: bold 10px "Courier New", monospace;
}
.desk-radio-volume[hidden] { display: none; }
.desk-radio-volume label { display: flex; justify-content: space-between; }
.desk-radio-volume input { display: block; width: 100%; margin: 7px 0 2px; accent-color: #8acb7d; }
.desk-radio-guide { width: min(540px, calc(100vw - 24px)); max-height: min(80vh, 690px); margin: auto; padding: 0 0 15px; border: 4px ridge #a9a08b; color: #2b261e; background: #f0e6ce; box-shadow: 8px 10px 0 rgb(0 0 0 / .25); }
.desk-radio-guide::backdrop { background: rgb(7 13 10 / .68); }
.desk-radio-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 3px double #7b6e58; background: #d8ccb0; }
.desk-radio-guide-head small { color: #514e40; font: bold 10px "Courier New", monospace; }
.desk-radio-guide-head h2 { margin: 3px 0 0; font-size: 20px; }
.desk-radio-guide-head button { min-height: 36px; padding: 5px 10px; border: 2px outset #b7ac93; color: #28251f; background: #e8dfcc; cursor: pointer; }
.desk-radio-guide > p { margin: 10px 16px; font-size: 13px; }
.desk-radio-guide-list { margin: 12px 16px 0; padding: 0; list-style: none; }
.desk-radio-guide-list li + li { border-top: 1px dotted #8a806d; }
.desk-radio-guide-list button { display: block; width: 100%; min-height: 50px; padding: 8px 9px; border: 0; color: #252b22; background: transparent; cursor: pointer; text-align: left; }
.desk-radio-guide-list button:hover, .desk-radio-guide-list button:focus-visible { outline: 2px solid #567353; outline-offset: -2px; background: #d7e1c8; }
.desk-radio-guide-list button[aria-current="true"] { background: #c6d6ba; }
.desk-radio-guide-list strong { display: block; }
.desk-radio-guide-details { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; color: #575b50; font-size: 12px; }
.desk-radio-guide-contributors { display: flex; flex: 1; flex-wrap: wrap; gap: 3px 12px; min-width: 0; }
.desk-radio-guide-contributor { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.desk-radio-guide-model { font-weight: 600; }
.desk-radio-guide-role::before { content: "〈"; }
.desk-radio-guide-role::after { content: "〉"; }
.desk-radio-guide-duration { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }

@media (min-width: 781px) and (max-width: 1000px) {
  .about-object { left: 42%; }
}
@media (max-width: 780px) {
  .desk-stage { min-height: 0; }
  .about-object { left: auto; }
  .desk-radio { position: relative; inset: auto; order: 2; align-self: center; margin: calc(-18px - var(--radio-extra-height, 0px)) auto 0; }
}

.desk-radio-key::after { position: absolute; inset: -4px -2px; content: ""; }

/* Monochrome LCD glyphs share their color with the surrounding live text. */
.desk-radio-mode { display: inline-flex; align-items: center; gap: 3px; min-height: 12px; }
.desk-radio-mode [data-radio-mode-scope] { transform: translateY(1px); }
.desk-radio-mode svg { display: none; flex: none; width: 16px; height: 12px; fill: currentColor; shape-rendering: crispEdges; }
.desk-radio-mode[data-mode-group="shuffle"] .mode-shuffle,
.desk-radio-mode[data-mode-group="repeat"] .mode-repeat { display: block; }
.desk-radio-tooltip {
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  width: max-content;
  max-width: 170px;
  padding: 4px 6px;
  border: 1px solid rgb(210 222 215 / .22);
  border-radius: 3px;
  color: #ebeee7;
  background: rgb(16 22 19 / .88);
  box-shadow: 0 2px 4px rgb(0 0 0 / .2);
  font: 10px/1.4 "MS PGothic", sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.desk-radio-tooltip[hidden] { display: none; }

.desk-radio-meta {
  flex: none;
  height: 12px;
  margin-bottom: 2px;
  color: #80c57c;
  font: bold 9px/12px "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}