/* Original graphite/silver materials. Warmth belongs to the LCD, not a yellow shell. */
.pocket-stage .pocket-device {
  border-color: #454e51;
  background: linear-gradient(103deg, #b4babb 0, #a6acad 7%, #959c9e 31%, #8f9698 72%, #80898c 96%, #737d81 100%);
  box-shadow: inset 0 1px 1px #e1e3dcad, inset 1px 0 1px #c9cdca66, 3px 2px 0 #41494c, 4px 7px 8px #18212540;
}
.pocket-device::before {
  border: 0;
  background: none;
  box-shadow: none;
}
.pocket-device::after {
  background: linear-gradient(174deg, #f2ebda1a, transparent 74%);
  opacity: .5;
}
.pocket-stage .pocket-wheel {
  border-color: #30383b;
  background: radial-gradient(ellipse at 42% 31%, #444c4f 0, #394144 48%, #30383b 86%, #2b3336 100%);
  box-shadow: inset 0 1px 2px #11191c80, inset 0 -1px 0 #b1b7b554, 0 1px 0 #c6cbc56b;
}
.pocket-stage .pocket-centre {
  border-color: #222b2e;
  background: linear-gradient(127deg, #5e6565, #505859 56%, #434c4e);
  box-shadow: inset 0 1px 1px #b7bcb56b, inset 0 -1px 1px #1b24275c, 0 1px 2px #151f2266;
}
.pocket-stage .pocket-centre:active {
  background: linear-gradient(#40494b, #4d5657);
  box-shadow: inset 0 2px 3px #11191b70, inset 0 -1px 0 #818c886b;
}
.pocket-stage .pocket-key {
  color: #dad8ca;
  text-shadow: 0 -1px 0 #1d272b66;
}
.pocket-stage .pocket-key:active { color: #f4edda; }
.pocket-stage .is-held .pocket-key { color: #848d8c; }
.pocket-stage .pocket-hold {
  border-color: #3a4549;
  background: #4b585d;
  box-shadow: inset 0 1px 2px #111d2580, 0 1px 0 #c9cdc38c;
}
.pocket-stage .is-held .pocket-hold { background: #a17e47; }
.pocket-hold > span {
  background: linear-gradient(#c8cdca, #a1aaa9 48%, #7b898b);
  box-shadow: inset 0 1px 0 #e1e3d8c7, 1px 0 1px #24313880;
}
.pocket-hold-engraving { color: #303b3f; text-shadow: 0 1px 0 #d2d4c94d; }
.pocket-jack {
  border-color: #abb5b5;
  background: #273237;
  box-shadow: inset 0 1px 2px #091317, 0 1px 0 #c5c9be80;
}
.pocket-port { background: #303b41; box-shadow: 0 1px 0 #b5bfb88c; }

/* A single recessed edge; quiet amber-gray backlight, with 1.5% horizontal LCD texture. */
.pocket-stage .pocket-screen {
  isolation: isolate;
  color: #30362f;
  border: 1px solid #343f41;
  background: linear-gradient(117deg, #ddd8c2 0, #d6d1b9 53%, #c9c6ae 100%);
  box-shadow: inset 0 1px 3px #3c463747, 0 1px 0 #c5c9bc9c;
  text-shadow: none;
  font-family: "Pocket LCD", "Geneva", "PingFang SC", sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: none;
  font-synthesis: none;
}
.pocket-screen::before,
.pocket-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pocket-screen::before {
  z-index: 3;
  background: linear-gradient(118deg, #fff7df0a, transparent 38%);
  box-shadow: none;
}
.pocket-screen::after {
  z-index: 4;
  background-image: linear-gradient(#30372d .5px, transparent .5px);
  background-size: 2px 2px;
  opacity: .015;
}
.pocket-stage .pocket-screen-header {
  border-bottom-color: #8c9077;
  background: linear-gradient(#dfdac5, #cecbb1);
}
.pocket-screen-header strong { font-size: 12px; font-weight: 400; }
.pocket-stage .pocket-screen-footer,
.pocket-stage .pocket-mode { color: #515847; }
.pocket-stage .pocket-menu-list { scrollbar-color: #93987d transparent; }
.pocket-stage .pocket-menu-row {
  color: #30362f;
  background: transparent;
  font-family: "Pocket LCD", "Geneva", "PingFang SC", sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: none;
  font-weight: 400;
}
.pocket-stage .pocket-menu-row.is-selected {
  color: #eeeada;
  background: #414c42;
  text-shadow: none;
  box-shadow: none;
}
.pocket-track-copy strong { font-size: 12px; font-weight: 400; }
.pocket-artist,.pocket-track-copy small,.pocket-help,.pocket-loading { font-size: 12px; }
.pocket-time { font: 12px/1 "Pocket LCD", "Geneva", "PingFang SC", sans-serif; }
.pocket-stage .pocket-screen-footer,.pocket-stage .pocket-screen-footer [data-pocket-status] { font-size: 12px; line-height: 1; }
.pocket-stage .pocket-volume-page output { font-size: 12px; line-height: 1; }
.pocket-stage .pocket-battery {
  border-color: #4c5848;
  background: #667058;
  box-shadow: inset 0 0 0 1px #d5d1b9;
}
.pocket-stage .pocket-battery::after { background: #4c5848; }
.pocket-stage .pocket-volume-meter {
  background: linear-gradient(to right, #657055 0%, #657055 calc(var(--pocket-volume,.65)*100%), #b5b99b calc(var(--pocket-volume,.65)*100%));
}
.pocket-screen input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  accent-color: #4e5b48;
  outline: none;
}
.pocket-screen input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #8b9579;
  border-radius: 1px;
  background: #babfa2;
  box-shadow: inset 0 1px 1px #5d684b2b;
}
.pocket-screen input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 10px;
  margin-top: -3.5px;
  border: 1px solid #5f6c50;
  border-radius: 1px;
  background: #e0ddc8;
  box-shadow: inset 1px 0 0 #f3eed9;
}
.pocket-screen input[type=range]::-moz-range-track {
  height: 3px;
  border: 1px solid #8b9579;
  border-radius: 1px;
  background: #babfa2;
}
.pocket-screen input[type=range]::-moz-range-thumb {
  width: 6px;
  height: 8px;
  border: 1px solid #5f6c50;
  border-radius: 1px;
  background: #e0ddc8;
}
.pocket-screen input[type=range]:focus-visible {
  outline: 1px solid #526047;
  outline-offset: 2px;
}
.pocket-stage :is(.pocket-key,.pocket-centre,.pocket-hold):focus-visible {
  outline: 1px solid #d3caac;
  outline-offset: 3px;
}
@media(max-height:620px) {
  .pocket-track-copy strong { font-size: 12px; }
}
@font-face {
  font-family: "Pocket LCD";
  src: url("/pocket/fonts/pocket-lcd-12.woff2?v=e554de3ece44") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}