/* A functional audio deck, with the same pale bevels as the NextMove surface. */
.song-tile{grid-column:3/5;grid-row:4;min-height:258px;display:grid;place-items:center;border-color:#f0f1f5;background:#fff;transition:border-color .24s ease-in-out!important}
.song-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#efe8d7,#e6ddc7 58%,#d8d5bd);opacity:0;pointer-events:none;transition:opacity .24s ease-in-out!important}
.song-tile:is(:hover,:has(:focus-visible),.is-playing){border-color:#d8cfb8}
.song-tile:is(:hover,:has(:focus-visible),.is-playing)::before{opacity:1}
.song-deck{position:relative;z-index:1;width:calc(100% - 64px);max-width:430px;padding:19px 20px 16px;border:1px solid #cfd2d3;border-radius:11px;background:linear-gradient(145deg,#f6f7f7,#e8eaea 58%,#f0f1f1);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #c1c5c548,0 0 0 3px #fafafa,0 3px 5px #30373712,0 9px 18px #30373709;filter:grayscale(1);transition:filter .28s ease,box-shadow .28s ease,border-color .28s ease}
.song-deck::before{content:"";position:absolute;inset:5px;border:1px solid #ffffff9c;border-radius:7px;pointer-events:none}
.song-display{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:12px;min-height:71px;padding:13px 15px;border:1px solid #cbd0cd;border-radius:6px;background:linear-gradient(155deg,#e0e5e0,#eaf0e9);box-shadow:inset 0 1px 3px #424d3d18,0 1px 0 #fff;transition:background .28s ease,box-shadow .28s ease}
.song-info{min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1.2}
.song-title{font-size:16px;font-weight:600;color:#5b625b;letter-spacing:-.3px;white-space:nowrap}
.song-artist{font-size:12px;color:#8b928a;white-space:nowrap}
.song-lamp{position:absolute;right:7px;top:7px;width:3px;height:3px;border-radius:50%;background:#a7b2a1;box-shadow:inset 0 1px 1px #5a71512b;transition:background .2s,box-shadow .2s}
/* Eight fixed-height LCD segments per frequency band; their shapes never stretch. */
.song-meter{display:flex;align-items:flex-end;justify-content:space-between;height:32px;gap:2px}
.song-meter i{position:relative;display:block;flex:1;height:32px;max-width:6px;--meter-height:4px;background:repeating-linear-gradient(to top,#879a7c0b 0 3px,transparent 3px 4px)}
.song-meter i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--meter-height);background:repeating-linear-gradient(to top,#879a7c 0 3px,transparent 3px 4px);opacity:.32}
.song-transport{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:23px;margin-top:15px}
.song-times{display:flex;justify-content:space-between;font-family:Geist,Arial,sans-serif;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;color:#929798}
.song-seek{display:block;--progress:0%;width:100%;height:24px;margin:1px 0 0;padding:0;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;border:0}
.song-seek::-webkit-slider-runnable-track{height:4px;border:1px solid #ccd1d0;border-radius:3px;background:linear-gradient(to right,#9ca898 var(--progress),#dfe3e2 var(--progress));box-shadow:0 1px 0 #fff,inset 0 1px 1px #606e6510}
.song-seek::-moz-range-track{height:3px;border:1px solid #ccd1d0;border-radius:3px;background:#dfe3e2;box-shadow:0 1px 0 #fff}
.song-seek::-moz-range-progress{height:3px;background:#9ca898}
.song-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:12px;margin-top:-5px;border:1px solid #c3c8c6;border-radius:3px;background:linear-gradient(#fff,#e6e9e7);box-shadow:0 1px 2px #2f3a3226}
.song-seek::-moz-range-thumb{width:8px;height:11px;border:1px solid #c3c8c6;border-radius:3px;background:linear-gradient(#fff,#e6e9e7);box-shadow:0 1px 2px #2f3a3226}
.song-play{position:relative;width:48px;height:43px;border:1px solid #c7ccca;border-radius:8px;padding:0;display:grid;place-items:center;background:linear-gradient(#fff,#edf0ed);color:#8fa479;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #c4ccc433,0 2px 2px #3a493019;transition:background .2s ease,box-shadow .2s ease,color .2s ease;cursor:pointer}
.song-play svg{width:23px;height:23px;fill:currentColor;filter:drop-shadow(0 1px 0 #fff)}
.song-play .song-pause-icon{display:none}
.song-play:hover{color:#708b56;background:linear-gradient(#fff,#e9eee5);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #c4ccc433,0 2px 4px #3a493029}
.song-play:active{box-shadow:inset 0 1px 3px #31472325;transform:translateY(1px)}
.song-play:focus-visible,.song-seek:focus-visible{outline:2px solid #a6b69a;outline-offset:4px}
.song-tile:is(:hover,:has(:focus-visible),.is-playing) .song-deck{filter:grayscale(0);border-color:#c3cac5;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #c1c5c548,0 0 0 3px #fafafa,0 4px 9px -2px #4b46342b,0 15px 28px -7px #4b463442}
.song-tile:is(:hover,:has(:focus-visible),.is-playing) .song-display{background:linear-gradient(155deg,#e6ede2,#f1f5ec);box-shadow:inset 0 1px 3px #424d3d18,0 1px 0 #fff}
.song-tile.is-playing .song-play-icon{display:none}
.song-tile.is-playing .song-pause-icon{display:block}
.song-tile.is-playing .song-play{color:#76985a}
.song-tile.is-playing .song-meter i::after{opacity:.85}
.song-tile.is-playing .song-lamp{background:#96b977;box-shadow:0 0 5px #96b97777}
.song-status{position:absolute;top:calc(100% + 12px);left:0;right:0;text-align:center;font-size:12px;color:#8c6c6c;line-height:16px}
.song-status:empty{display:none}
@media(min-width:701px) and (max-width:1100px){.song-tile{grid-column:1/3;grid-row:7}.grid{grid-template-rows:auto 258px 258px 258px 258px 258px 258px}}
@media(max-width:700px){.song-tile{grid-column:1/3;grid-row:9}.song-deck{width:calc(100% - 36px);padding:16px 15px 14px}.song-display{grid-template-columns:minmax(0,1fr) 44px;padding:12px 10px;gap:8px}.song-title{font-size:15px}.song-artist{font-size:11px}.song-meter{gap:2px;height:32px}.song-meter i:nth-child(n+9){display:none}.song-transport{gap:18px}.grid{grid-template-rows:auto 216px 440px 180px 240px 278px 258px auto 258px}}
@media(prefers-reduced-motion:reduce){.song-deck,.song-display,.song-play,.song-lamp{transition:none!important}}