/* V0.6: a shared player, four physical silhouettes. */
body[data-skin="lime"] {
  --paper: #080c0d;
  --ink: #f0f5ed;
  --muted: #99aaa6;
  --line: #283333;
  --accent: #b6ff43;
  --accent-hover: #9be827;
  --metal-top: #303b3e;
  --metal-mid: #202a2d;
  --metal-bottom: #151e21;
  --key: #354145;
  --key-bottom: #222e32;
  --screen: #bcee64;
  --screen-deep: #9dd33c;
  --screen-ink: #14230d;
  --well: #101713;
  --focus: #b6ff43;
  color-scheme: dark;
  background-image: linear-gradient(#7ba49a09 1px, transparent 1px), linear-gradient(90deg, #7ba49a09 1px, transparent 1px);
  background-size: 42px 42px;
}
body[data-skin="lime"] .instrument {
  border-color: #576568;
  box-shadow: inset 0 2px 1px #9fabad40, inset 0 -3px 1px #0009, 0 20px 40px -20px #000;
}
body[data-skin="lime"] .instrument:before { opacity: .08; }
body[data-skin="lime"] .screen-bezel {
  background: #101817;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #80908875;
}
body[data-skin="lime"] :is(.primary-action, .play-button) { color: #142009; }
body[data-skin="lime"] .primary-action {
  box-shadow: 0 3px 0 #588414;
}
body[data-skin="lime"] .transport .play-button {
  box-shadow: inset 0 1px 1px #e5ffc166, 0 3px 0 #52771f, 0 5px 10px #0003;
}
body[data-skin="lime"] .profile-grid button {
  border-color: #3b4846;
  background: #121b1b;
  box-shadow: inset 0 1px 0 #71817924, 0 2px 0 #020504;
}
body[data-skin="lime"] .profile-grid button[aria-pressed="true"] {
  background: var(--accent);
  color: #19260f;
  border-color: var(--accent);
  box-shadow: 0 2px 0 #42621f;
}
body[data-skin="lime"] .profile-grid button[aria-pressed="true"] .key-top>i { background: #28411c; box-shadow: none; }
body[data-skin="lime"] .speaker-grille { background-image: radial-gradient(circle, #040909 1px, transparent 1.5px); }
body[data-skin="lime"] .power-light { background: var(--accent); box-shadow: 0 0 7px #b6ff4350; }
body[data-skin="lime"] .switch-control input:checked+i:before { background: #17240e; }
body[data-skin="lime"] .is-recording .record-button { color: #152010; }
body[data-skin="lime"] .is-recording .record-button:before { background: #152010; }
.swatch-lime { background: #080c0d; border-color: #3b4b49; }
.swatch-lime:before { background: #303b3e; }
.swatch-lime:after { background: #b6ff43; }

.device-picker { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.picker-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.picker-heading h2 { font-size: 13px; font-weight: 500; }
.picker-heading>span { font: 8px var(--mono); letter-spacing: 1px; color: var(--muted); }
.device-choices { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.device-choices button {
  min-width: 0; padding: 8px 4px; display: grid; justify-items: center; gap: 4px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--muted); transition: background-color .2s, color .2s, border-color .2s;
}
.device-choices svg { width: 32px; height: 32px; stroke-width: 1.65; margin-bottom: 3px; }
.device-choices span { font-size: 11px; white-space: nowrap; }
.device-choices small { font: 7px var(--mono); letter-spacing: .8px; opacity: .68; }
.device-choices button[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb,var(--accent) 6%,transparent); border-color: color-mix(in srgb,var(--accent) 35%,transparent); }
.device-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 660px; padding: 28px 0 20px; }
.stage-note { position: absolute; inset: 30px auto auto 0; display: flex; flex-direction: column; gap: 22px; color: var(--muted); font: 8px/1.8 var(--mono); letter-spacing: 1px; }
.stage-note>span:last-child { writing-mode: vertical-rl; font-size: 7px; opacity: .45; }
.instrument { width: 100%; }
.device-caption { margin: 3px 0 27px; text-align: center; font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.mode-bank { border-color: var(--line); padding-top: 20px; }
.mode-bank .bank-label h2 { font-size: 12px; }
.listening-options { margin-top: 16px; }
.flip-hinge, .phone-keypad, .wheel-menu { display: none; }
.flip-toggle { position: absolute; top: 24px; right: 0; z-index: 3; min-height: 44px; padding: 8px 4px; font-size: 11px; color: var(--accent); background: transparent; }
.flip-toggle span { margin-left: 5px; }

/* All three handhelds share the live screen and transport, without remounting audio. */
.player-shell:not([data-device="wide"]) .instrument { width: 306px; padding: 22px 19px 19px; }
.player-shell:not([data-device="wide"]) .instrument-heading { height: 36px; min-height: 36px; margin: 0 0 13px; justify-content: center; position: relative; padding-top: 16px; }
.player-shell:not([data-device="wide"]) .device-wordmark { font-size: 15px; letter-spacing: -.5px; text-align: center; }
.player-shell:not([data-device="wide"]) .device-wordmark>span,
.player-shell:not([data-device="wide"]) .device-status { display: none; }
.player-shell:not([data-device="wide"]) .speaker-grille { position: absolute; width: 50px; height: 6px; top: 0; left: calc(50% - 25px); margin: 0; border-radius: 4px; background: #080e10; box-shadow: 0 1px 0 #a3b0a32e; opacity: .85; }
.player-shell:not([data-device="wide"]) .screen-bezel { padding: 7px; border-radius: 17px; }
.player-shell:not([data-device="wide"]) .lcd-window { border-radius: 10px; }
.player-shell:not([data-device="wide"]) .lcd-header { padding: 10px 0 7px; margin: 0 11px; font-size: 7px; letter-spacing: 0; }
.player-shell:not([data-device="wide"]) .lcd-header strong { font-size: 7px; }
.player-shell:not([data-device="wide"]) .state-layer { height: 143px; padding: 10px 12px; }
.player-shell:not([data-device="wide"]) .lcd-empty { gap: 6px; }
.player-shell:not([data-device="wide"]) .sound-emblem { width: 69px; height: 84px; }
.player-shell:not([data-device="wide"]) .emblem-rings { inset: 13px 3px; }
.player-shell:not([data-device="wide"]) .emblem-rings:before { inset: 6px; }
.player-shell:not([data-device="wide"]) .emblem-rings:after { inset: 13px; }
.player-shell:not([data-device="wide"]) .emblem-bars { gap: 3px; }
.player-shell:not([data-device="wide"]) .emblem-bars i { width: 3px; height: 18px; }
.player-shell:not([data-device="wide"]) .emblem-bars i:nth-child(2n) { height: 27px; }
.player-shell:not([data-device="wide"]) .emblem-bars i:nth-child(3n) { height: 38px; }
.player-shell:not([data-device="wide"]) .empty-copy>p { font-size: 6px; letter-spacing: 0; margin-bottom: 8px; }
.player-shell:not([data-device="wide"]) .empty-copy h2 { font-size: 22px; line-height: 1.35; }
.player-shell:not([data-device="wide"]) .empty-copy>span { font-size: 9px; line-height: 1.5; margin-top: 8px; }
.player-shell:not([data-device="wide"]) .empty-copy b { display: none; }
.player-shell:not([data-device="wide"]) .lcd-footer { margin: 0 11px; padding: 8px 0 10px; font-size: 7px; gap: 4px; }
.player-shell:not([data-device="wide"]) .lcd-footer>span:last-child { font-size: 7px; }
.player-shell:not([data-device="wide"]) .screen-dots { display: none; }
.player-shell:not([data-device="wide"]) .lcd-playing { gap: 3px; }
.player-shell:not([data-device="wide"]) .track-readout { gap: 8px; }
.player-shell:not([data-device="wide"]) .track-readout p { font-size: 7px; letter-spacing: .5px; margin-bottom: 4px; }
.player-shell:not([data-device="wide"]) .track-readout h2 { font-size: 17px; line-height: 1.4; }
.player-shell:not([data-device="wide"]) .track-readout #trackMeta { font-size: 7px; }
.player-shell:not([data-device="wide"]) .play-glyph { font-size: 16px; }
.player-shell:not([data-device="wide"]) #spectrumCanvas { min-height: 19px; height: 23px; }
.player-shell:not([data-device="wide"]) .lcd-file-actions { font-size: 6px; gap: 4px; }
.player-shell:not([data-device="wide"]) .screen-link { min-height: 32px; padding: 6px 0; font-size: 9px; }
.player-shell:not([data-device="wide"]) .lcd-error h2,
.player-shell:not([data-device="wide"]) .lcd-loading h2 { font-size: 16px; }
.player-shell:not([data-device="wide"]) .lcd-error p { font-size: 10px; }
.player-shell:not([data-device="wide"]) .timeline { padding: 8px 4px 2px; gap: 9px; font-size: 8px; }
.player-shell:not([data-device="wide"]) .transport-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 5px 0 12px; }
.player-shell:not([data-device="wide"]) .transport { grid-column: 1 / -1; grid-row: 1; justify-content: center; gap: 24px; }
.player-shell:not([data-device="wide"]) .transport button { min-width: 44px; width: 44px; height: 44px; }
.player-shell:not([data-device="wide"]) .transport button.play-button { width: 58px; height: 54px; border-radius: 42%; }
.player-shell:not([data-device="wide"]) .transport small { font-size: 6px; }
.player-shell:not([data-device="wide"]) .stop-button { grid-column: 1; grid-row: 2; min-height: 28px; padding: 4px 6px; gap: 5px; }
.player-shell:not([data-device="wide"]) .stop-button small { font-size: 6px; }
.player-shell:not([data-device="wide"]) .volume-control { grid-column: 2 / -1; grid-row: 2; max-width: 105px; display: flex; align-items: center; gap: 7px; }
.player-shell:not([data-device="wide"]) .volume-control>span { white-space: nowrap; font-size: 8px; }
.player-shell:not([data-device="wide"]) .volume-control output { display: none; }
.player-shell:not([data-device="wide"]) .volume-control input { min-width: 0; }
.player-shell:not([data-device="wide"]) .instrument-bottom { margin: 13px 5px 0; justify-content: center; min-height: 8px; }
.player-shell:not([data-device="wide"]) .instrument-bottom>span:first-child { font-size: 6px; letter-spacing: 1.3px; }
.player-shell:not([data-device="wide"]) .screw { display: none; }

/* Soft, rounded button phone. */
.player-shell[data-device="handset"] .instrument { border-radius: 63px 63px 46px 46px; border-width: 2px; outline: 4px solid color-mix(in srgb,var(--metal-bottom) 70%,transparent); }
.player-shell[data-device="handset"] .instrument:after { content: ""; position: absolute; width: 3px; height: 42px; right: -5px; top: 110px; background: var(--metal-top); border: 1px solid var(--line); border-radius: 0 3px 3px 0; }
.player-shell:is([data-device="handset"], [data-device="flip"]) .phone-keypad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px 8px; }
.phone-keypad button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 0; padding: 5px; border: 1px solid color-mix(in srgb,var(--ink) 22%,transparent); background: linear-gradient(160deg,var(--key),var(--key-bottom)); border-radius: 45% / 50%; box-shadow: inset 0 1px 0 #ffffff19, 0 2px 0 #0009; transition: transform .15s, background-color .15s; }
.phone-keypad b { font: 16px var(--mono); font-weight: 500; }
.phone-keypad small { font-size: 8px; color: var(--muted); white-space: nowrap; }
.phone-keypad button:disabled { opacity: .4; }
.phone-keypad button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb,var(--accent) 9%,var(--key-bottom)); }
.phone-keypad button[aria-pressed="true"] small { color: inherit; }

/* A separate lid, a hinge and a thin, divided keyboard plate. */
.player-shell[data-device="flip"] .instrument { width: 310px; background: none; border: 0; padding: 0; box-shadow: none; }
.player-shell[data-device="flip"] .instrument:before { display: none; }
.player-shell[data-device="flip"] .device-top,
.player-shell[data-device="flip"] .device-bottom,
.player-shell[data-device="flip"] .flip-cover { background: linear-gradient(140deg,var(--metal-top),var(--metal-mid) 55%,var(--metal-bottom)); border: 2px solid color-mix(in srgb,var(--ink) 32%,var(--metal-mid)); box-shadow: inset 0 1px 0 #ffffff36, 0 12px 25px -15px #000b; }
.player-shell[data-device="flip"] .device-top { border-radius: 29px 29px 18px 18px; padding: 16px 16px 7px; }
.player-shell[data-device="flip"] .instrument-heading { height: 28px; min-height: 28px; margin-bottom: 10px; padding-top: 13px; }
.player-shell[data-device="flip"] .device-wordmark { font-size: 12px; letter-spacing: 1px; }
.player-shell[data-device="flip"] .screen-bezel { padding: 6px; border-radius: 11px; }
.player-shell[data-device="flip"] .lcd-window { border-radius: 6px; }
.player-shell[data-device="flip"] .state-layer { height: 126px; }
.player-shell[data-device="flip"] .lcd-header { padding-top: 8px; }
.player-shell[data-device="flip"] .lcd-footer { padding-bottom: 8px; }
.player-shell[data-device="flip"] .flip-hinge { height: 19px; margin: 0 7px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #020505; background: linear-gradient(var(--metal-bottom),var(--metal-top) 46%,var(--metal-bottom)); border-radius: 6px; font: 6px var(--mono); letter-spacing: 2px; color: var(--muted); box-shadow: 0 3px 5px #0008; }
.flip-hinge i { height: 100%; width: 28px; border-left: 1px solid #74808055; border-right: 1px solid #030706; border-radius: 5px; }
.player-shell[data-device="flip"] .device-bottom { padding: 8px 20px 16px; border-radius: 15px 15px 37px 37px; }
.player-shell[data-device="flip"] .transport-row { padding-bottom: 8px; }
.player-shell[data-device="flip"] .transport { gap: 29px; }
.player-shell[data-device="flip"] .transport button.play-button { border-radius: 12px; height: 48px; width: 58px; }
.player-shell[data-device="flip"] .phone-keypad { gap: 0; border: 1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius: 9px 9px 22px 22px; overflow: hidden; background: color-mix(in srgb,var(--metal-top) 85%,var(--ink)); }
.player-shell[data-device="flip"] .phone-keypad button { min-height: 44px; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--ink) 18%,transparent); border-right: 1px solid color-mix(in srgb,var(--ink) 14%,transparent); box-shadow: none; }
.player-shell[data-device="flip"] .phone-keypad button:nth-child(3n) { border-right: 0; }
.player-shell[data-device="flip"] .phone-keypad button:nth-last-child(-n+3) { border-bottom: 0; }
.player-shell[data-device="flip"] .phone-keypad button[aria-pressed="true"] { background: color-mix(in srgb,var(--accent) 10%,transparent); }
.player-shell[data-device="flip"] .flip-cover { min-height: 338px; padding: 27px 30px; border-radius: 33px; align-items: center; flex-direction: column; }
.player-shell[data-device="flip"].is-folded .flip-hinge { display: none; }
.flip-cover:not([hidden]) { display: flex; }
.cover-lens { width: 22px; height: 22px; border: 5px solid #080f12; border-radius: 50%; background: #2d424b; box-shadow: 0 0 0 1px #6b7f7e; margin-bottom: 17px; }
.cover-display { width: 178px; min-height: 118px; position: relative; background: linear-gradient(135deg,var(--screen),var(--screen-deep)); color: var(--screen-ink); border: 6px solid #101715; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cover-display>span { font: 9px var(--mono); }
.cover-display strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.cover-display button { position: absolute; right: 4px; bottom: 0; min-width: 44px; min-height: 36px; background: transparent; color: inherit; }
.cover-display button:disabled { opacity: .4; }
.cover-wordmark { margin-top: 30px; font-size: 17px; font-weight: 700; letter-spacing: -.7px; opacity: .8; }
.cover-line { display: block; width: 55px; height: 3px; background: #090e0d; margin-top: 35px; border-radius: 3px; }

/* A compact music player with a circular control surface. */
.player-shell[data-device="pocket"] .instrument { width: 307px; padding: 22px 20px 21px; border-radius: 28px; }
.player-shell[data-device="pocket"] .instrument-heading { padding: 0; height: 22px; min-height: 22px; margin-bottom: 14px; justify-content: space-between; }
.player-shell[data-device="pocket"] .device-wordmark { font-size: 16px; }
.player-shell[data-device="pocket"] .speaker-grille { position: static; width: 20px; height: 5px; background: var(--accent); opacity: .8; }
.player-shell[data-device="pocket"] .screen-bezel { border-radius: 9px; padding: 6px; }
.player-shell[data-device="pocket"] .lcd-window { border-radius: 4px; }
.player-shell[data-device="pocket"] .transport-row { display: block; position: relative; width: 218px; height: 256px; margin: 18px auto 0; padding: 0; }
.player-shell[data-device="pocket"] .transport-row:before { content: ""; position: absolute; top: 0; left: 0; width: 218px; height: 218px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--ink) 25%,transparent); background: linear-gradient(150deg,var(--key),var(--key-bottom)); box-shadow: inset 0 1px 1px #ffffff26, 0 2px 1px #0008; }
.player-shell[data-device="pocket"] .transport { display: contents; }
.player-shell[data-device="pocket"] :is(.transport button,.stop-button,.wheel-menu) { position: absolute; margin: 0; z-index: 1; background: none; min-height: 44px; }
.player-shell[data-device="pocket"] .wheel-menu { display: block; top: 12px; left: 75px; width: 68px; font: 9px var(--mono); letter-spacing: 1.5px; color: var(--muted); }
.player-shell[data-device="pocket"] #backButton { left: 7px; top: 87px; }
.player-shell[data-device="pocket"] #forwardButton { right: 7px; top: 87px; }
.player-shell[data-device="pocket"] .transport button.play-button { width: 80px; height: 80px; left: 69px; top: 69px; border-radius: 50%; background: var(--accent); }
.player-shell[data-device="pocket"] .stop-button { width: 70px; left: 74px; top: 162px; justify-content: center; }
.player-shell[data-device="pocket"] .volume-control { position: absolute; bottom: 0; left: 19px; max-width: none; width: 180px; }
.player-shell[data-device="pocket"] .volume-control output { display: inline; }
.player-shell[data-device="pocket"] .instrument-bottom { margin-top: 4px; }

/* The original wide instrument keeps its generous screen and controls. */
.player-shell[data-device="wide"] .stage-note { display: none; }
.player-shell[data-device="wide"] .device-stage { min-height: 560px; }
.player-shell[data-device="wide"] .instrument-bottom { margin-top: 4px; }
.player-shell[data-device="wide"] .transport-row { padding-bottom: 10px; }

@media (hover:hover) and (pointer:fine) {
  .device-choices button:hover { color: var(--accent); background: color-mix(in srgb,var(--accent) 5%,transparent); }
  .phone-keypad button:not(:disabled):hover { filter: brightness(1.18); }
  .flip-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.phone-keypad button:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
@media (max-width:1120px) {
  .stage-note { display: none; }
  .picker-heading>span { font-size: 7px; letter-spacing: .4px; }
  .flip-toggle { top: 7px; right: 1px; font-size: 10px; }
  .player-shell[data-device="flip"] .device-stage { padding-top: 45px; }
}
@media (min-width:851px) and (min-height:851px) {
  .listening-room { padding-top: 24px; }
}
@media (max-width:850px) {
  .device-picker { margin-top: 13px; }
  .stage-note { display: flex; }
  .device-stage { min-height: 0; padding: 31px 0 21px; }
  .player-shell[data-device="wide"] .device-stage { min-height: 0; }
  .player-shell[data-device="pocket"] .device-stage { padding-top: 34px; }
  .player-shell[data-device="flip"] .device-stage { padding-top: 43px; }
  .device-caption { margin-bottom: 24px; font-size: 10px; }
  .device-choices span { font-size: 11px; }
}
@media (max-width:620px) {
  .stage-note { display: none; }
  .picker-heading h2 { font-size: 12px; }
  .picker-heading>span { font-size: 6px; }
  .device-choices { gap: 4px; }
  .device-choices button { padding: 10px 0 9px; }
  .device-choices svg { width: 30px; height: 30px; }
  .device-choices small { font-size: 6px; letter-spacing: .4px; }
  .device-choices span { font-size: 10px; }
  .player-shell:not([data-device="wide"]) .instrument { max-width: calc(100% - 12px); }
  .player-shell[data-device="flip"] .device-stage { padding-top: 45px; }
  .flip-toggle { top: 2px; }
  .mode-bank .profile-grid strong { font-size: 12px; }
}
@media (max-width:360px) {
  .picker-heading>span { display: none; }
  .player-shell[data-device="handset"] .instrument { padding: 20px 14px 18px; }
  .player-shell[data-device="flip"] .device-top { padding: 14px 11px 6px; }
  .player-shell[data-device="flip"] .device-bottom { padding: 8px 15px 16px; }
  .player-shell:not([data-device="wide"]) .empty-copy h2 { font-size: 20px; }
  .player-shell:not([data-device="wide"]) .sound-emblem { width: 58px; }
  .player-shell:not([data-device="wide"]) .transport { gap: 19px; }
  .player-shell[data-device="pocket"] .instrument { padding: 19px 13px; }
  .phone-keypad button { gap: 5px; }
  .phone-keypad small { font-size: 7px; }
}
@media (prefers-reduced-motion:reduce) {
  .phone-keypad button, .device-choices button { transition: none; }
}
body[data-motion="reduced"] :is(.phone-keypad button,.device-choices button) { transition: none; }