.phonograph-wrap{flex-direction:column;gap:1rem;display:flex}.phonograph-status{text-align:center;color:var(--muted);margin:0;padding:1rem}.phonograph-wrap .main-music-card{border:1px solid color-mix(in srgb,var(--ink)10%,transparent);width:100%;max-width:420px;box-shadow:0 10px 28px color-mix(in srgb,var(--ink)12%,transparent);color:var(--ink);background:linear-gradient(145deg,#fff8ef 0%,#f7f3ec 45%,#ebe4d8 100%);border-radius:35px;flex-direction:column;gap:14px;margin:0 auto;padding:18px;font-family:-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;transition:background .35s,box-shadow .3s;display:flex}.phonograph-wrap .track-info{align-items:center;gap:12px;display:flex}.phonograph-wrap .album-art{background:linear-gradient(135deg,#ff9a9e,#fad0c4) 50%/cover no-repeat;border-radius:16px;flex-shrink:0;width:64px;height:64px;transition:transform .3s,background-image .35s;box-shadow:0 4px 10px rgba(0,0,0,.5)}.phonograph-wrap .album-art:hover{transform:scale(1.05)}.phonograph-wrap .track-details{flex-grow:1;min-width:0;overflow:hidden}.phonograph-wrap .track-title{white-space:nowrap;text-overflow:ellipsis;font-size:1.3em;font-weight:600;overflow:hidden}.phonograph-wrap .artist-name{color:var(--muted);margin-top:2px;font-size:.9em}.phonograph-wrap .volume-bars{flex-shrink:0;align-items:flex-end;gap:2px;width:38px;height:32px;display:flex}.phonograph-wrap .volume-bars .bar{background:linear-gradient(180deg,var(--accent),#3aa896);width:3px;height:6px;animation:.8s ease-in-out infinite phonograph-bounce;animation-delay:var(--delay);border-radius:2px;animation-play-state:paused}.phonograph-wrap .main-music-card--playing .volume-bars .bar{animation-play-state:running}@keyframes phonograph-bounce{0%,to{height:6px}50%{height:26px}}.phonograph-wrap .playback-controls{flex-direction:column;gap:8px;display:flex}.phonograph-wrap .time-info{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.8em;display:flex}.phonograph-wrap .cat-progress-track{cursor:pointer;touch-action:none;outline:none;width:100%;height:2.75rem;position:relative}.phonograph-wrap .cat-progress-track:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent)55%,transparent);border-radius:8px}.phonograph-wrap .cat-progress-rail{background-color:color-mix(in srgb,var(--ink)10%,transparent);border-radius:999px;height:6px;position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}.phonograph-wrap .cat-progress-fill{border-radius:inherit;background:linear-gradient(90deg,var(--accent),#3aa896);pointer-events:none;height:100%;transition:width .12s linear}.phonograph-wrap .cat-progress-sprite{pointer-events:none;width:2.3rem;height:2.3rem;image-rendering:pixelated;filter:drop-shadow(0 1px 3px rgba(28,25,20,.25));background:url(/images/cat-run-sprite.png) 0 0/11.5rem 2.3rem no-repeat;transition:left .12s linear;animation:.45s steps(5,end) infinite phonograph-cat-run;position:absolute;top:50%;transform:translateY(-50%)}.phonograph-wrap .main-music-card--playing .cat-progress-sprite{animation-play-state:running}.phonograph-wrap .main-music-card:not(.main-music-card--playing) .cat-progress-sprite{animation-play-state:paused}@keyframes phonograph-cat-run{0%{background-position:0 0}to{background-position:-11.5rem 0}}.phonograph-wrap .button-row{justify-content:space-between;align-items:center;gap:.5rem;margin-top:.15rem;display:flex}.phonograph-wrap .main-control-btns{flex:1;justify-content:center;align-items:center;gap:1.25rem;display:flex}.phonograph-wrap .control-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--ink);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;transition:color .16s,transform .16s,opacity .16s;display:inline-flex}.phonograph-wrap .control-button svg{flex-shrink:0;display:block}.phonograph-wrap .control-button.back,.phonograph-wrap .control-button.next,.phonograph-wrap .control-button.d{opacity:.72;border-radius:0;width:2rem;height:2rem}.phonograph-wrap .control-button.back:hover,.phonograph-wrap .control-button.next:hover,.phonograph-wrap .control-button.d:hover{opacity:1;color:var(--accent);background:0 0;transform:scale(1.08)}.phonograph-wrap .control-button.back:focus-visible{opacity:1;color:var(--accent);background:0 0;transform:scale(1.08)}.phonograph-wrap .control-button.next:focus-visible{opacity:1;color:var(--accent);background:0 0;transform:scale(1.08)}.phonograph-wrap .control-button.d:focus-visible{opacity:1;color:var(--accent);background:0 0;transform:scale(1.08)}.phonograph-wrap .control-button.play-pause-button{color:#fff;background:var(--accent);width:3rem;min-width:3rem;height:3rem;min-height:3rem;box-shadow:0 4px 14px color-mix(in srgb,var(--accent)32%,transparent);border-radius:999px;flex-shrink:0}.phonograph-wrap .control-button.play-pause-button:hover{background:color-mix(in srgb,var(--accent)90%,#000);transform:scale(1.06)}.phonograph-wrap .control-button.play-pause-button:focus-visible{background:color-mix(in srgb,var(--accent)90%,#000);transform:scale(1.06)}.phonograph-wrap .control-button.play-pause-button svg{width:1.45rem;height:1.45rem}.phonograph-playlist{width:100%;max-width:420px;margin:0 auto}.phonograph-playlist-title{margin:0 0 .55rem;font-size:.95rem;font-weight:600}.phonograph-playlist-hint{color:var(--muted);margin:0 0 .5rem;font-size:.78rem}.phonograph-playlist-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.phonograph-playlist-item{border:1px solid color-mix(in srgb,var(--ink)10%,transparent);background:color-mix(in srgb,var(--paper)94%,#fff);grid-template-columns:1fr auto;align-items:center;gap:.35rem;padding:.35rem .45rem .35rem .35rem;transition:border-color .16s,background .16s;display:grid}.phonograph-playlist-item--active{border-color:color-mix(in srgb,var(--accent)55%,transparent);background:color-mix(in srgb,var(--accent)8%,var(--paper))}.phonograph-playlist-play{cursor:pointer;text-align:left;font:inherit;color:inherit;background:0 0;border:0;grid-template-columns:2.5rem 1fr;align-items:center;gap:.65rem;min-width:0;padding:.1rem .25rem;display:grid}.phonograph-playlist-play:hover{outline:none}.phonograph-playlist-play:focus-visible{outline:none}.phonograph-playlist-cover{background:var(--mist)center/cover no-repeat;border-radius:.45rem;flex-shrink:0;width:2.5rem;height:2.5rem}.phonograph-playlist-meta{flex-direction:column;gap:.1rem;min-width:0;display:flex}.phonograph-playlist-name{white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;font-weight:600;overflow:hidden}.phonograph-playlist-artist{color:var(--muted);font-size:.72rem}.phonograph-playlist-actions{align-items:center;gap:.35rem;display:flex}.phonograph-like-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:0;padding:.15rem .25rem;font-size:1rem;line-height:1}.phonograph-like-btn--on{color:#e85d35}.phonograph-like-btn:disabled{opacity:.5;cursor:wait}.phonograph-like-count{min-width:1.5rem;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.72rem}.phonograph-credit{text-align:center;color:var(--muted);margin:0;font-size:.68rem}.phonograph-credit a{color:var(--accent)}@media (prefers-reduced-motion:reduce){.phonograph-wrap .volume-bars .bar{height:12px;animation:none}.phonograph-wrap .cat-progress-sprite{background-position:0 0;transition:none;animation:none}}
