.player-skin-picker{position:fixed;left:24px;top:50%;z-index:120;transform:translateY(-50%)}
#player-skin-toggle{display:grid;place-items:center;width:108px;height:108px;padding:4px;border:0;border-radius:6px;background:transparent;cursor:pointer}
.player-skin-miniature{display:block;width:96px;height:64px;object-fit:cover;transition:transform 180ms ease-out}
#player-skin-toggle:hover .player-skin-miniature{transform:translateY(-3px)}
#player-skin-toggle:focus-visible{outline:none;filter:brightness(1.08)}
#player-skin-menu{position:absolute;left:120px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:204px;max-width:calc(100vw - 160px);padding:6px;background:var(--ui-panel,#f1f1f2);color:var(--ui-ink,#191a1c);border-radius:14px;box-shadow:0 8px 24px #0000000d;animation:skin-drawer-in 180ms ease-out}
#player-skin-menu[hidden]{display:none}
.player-skin-strip{display:grid;grid-auto-flow:column;grid-auto-columns:60px;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:2px 0}
#player-skin-menu [data-skin]{position:relative;box-sizing:border-box;width:60px;height:56px;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 4px 14px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:9px;scroll-snap-align:start}
#player-skin-menu [data-skin] img{display:block;width:52px;height:36px;object-fit:contain;transition:transform 160ms ease-out;filter:drop-shadow(0 3px 3px #0002)}
#player-skin-menu [data-skin=cd] img{width:34px;border-radius:3px}
#player-skin-menu [data-skin]:hover{background:#ffffff80}
#player-skin-menu [data-skin]:hover img{transform:translateY(-2px)}
#player-skin-menu [data-skin][aria-pressed=true]{background:#fff}
#player-skin-menu [data-skin][aria-pressed=true]::after{content:'';position:absolute;bottom:3px;left:28px;width:4px;height:4px;border-radius:50%;background:var(--ui-red,#df001b)}
#player-skin-menu button:focus-visible{outline:2px solid var(--ui-red,#df001b);outline-offset:-2px}
#player-skin-menu button:disabled{opacity:.4;cursor:default}
.player-skin-navigation{display:flex;justify-content:flex-end;gap:6px;margin-top:7px}.player-skin-navigation[hidden]{display:none}
#player-skin-menu .player-skin-navigation button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:#fff;color:inherit;font:24px/1 system-ui;cursor:pointer}
#skin-status:empty{display:none}#skin-status{display:block;margin-top:8px;font:12px/1.4 -apple-system,BlinkMacSystemFont,sans-serif}
@keyframes skin-drawer-in{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}

@media(max-width:880px){.player-skin-picker{left:4px}#player-skin-toggle{width:70px;height:84px}.player-skin-miniature{width:62px;height:44px}}
@media(max-width:360px){#player-skin-toggle{width:64px}}
@media(max-height:620px){.player-skin-picker{position:absolute;top:340px}}
@media(prefers-reduced-motion:reduce){.player-skin-miniature{transition:none}}
.cd-player{position:absolute;inset:0;user-select:none}.cd-player[hidden]{display:none}.cd-surface{position:relative;width:100%;height:100%}.cd-surface>svg{display:block;width:100%;height:100%;overflow:visible}.cd-player #shutter{transition:transform 550ms cubic-bezier(.22,.7,.2,1);transform-box:view-box}.cd-player .lcd{font-family:ui-monospace,'SFMono-Regular','PingFang SC',monospace;font-size:43px;letter-spacing:3px;fill:#1d291d;position:static;background:none}.cd-player .disc-mark{font:17px ui-monospace,monospace;fill:#304d52;letter-spacing:2px}.cd-hit{position:absolute;z-index:3;border:0;background:transparent;padding:0;cursor:pointer;min-width:24px;min-height:24px;appearance:none;border-radius:5px}.cd-hit:hover{background:#ffffff12}.cd-hit:active{background:#00000014}.cd-hit:disabled{cursor:wait}.cd-hit[type=range]{opacity:.001}.cd-hit[type=range]:focus-visible{opacity:.001;background:transparent}.cd-hit:focus-visible{outline:none;background:transparent}.cd-cover-hit{position:absolute;left:30%;top:15%;width:16%;height:43%;z-index:2;background:none;border:0}.cd-player .cd-volume{border-radius:50%}.skin-cd .ensemble .fit{aspect-ratio:1480/1337}.skin-cd .ensemble .stage{width:min(570px,calc(100% - 120px));overflow:visible}.skin-cd .ensemble.is-browsing .stage{width:min(550px,calc(100% - 290px));left:calc(50% - 130px)}.skin-cd .ensemble{height:540px}.skin-cd #machine{pointer-events:none}
@media(max-width:880px){.skin-cd .ensemble:not(.is-browsing) .stage{width:min(510px,calc(100% - 80px))}.skin-cd .ensemble.is-browsing .stage{width:calc(100% - 200px);left:calc(50% - 85px)}}
@media(max-width:600px){.skin-cd .ensemble:not(.is-browsing) .stage{width:calc(100% - 64px)}.skin-cd .ensemble{height:420px}.skin-cd .ensemble.is-browsing .stage{width:calc(100% - 170px);left:calc(50% - 70px)}.player-skin-picker{z-index:140}}
.cd-hit{min-width:0;min-height:0}.cd-mobile-controls{display:none}
@media(max-width:600px){.cd-mobile-controls{display:grid;position:absolute;top:100%;left:0;right:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.cd-mobile-controls button{min-height:44px;border:1px solid #d3d5d5;border-radius:5px;background:#fff;font:12px system-ui;padding:3px}.cd-mobile-controls label{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:36px;font:12px system-ui}.cd-mobile-controls input{min-width:0;flex:1}.cd-hit{pointer-events:none}.skin-cd main{padding-bottom:210px}.skin-cd .workspace-tools{position:relative;bottom:auto;margin-top:130px}.cd-feedback{bottom:5px}}
@media(prefers-reduced-motion:reduce){.cd-player #shutter{transition:none}}

/* CD hardware feedback uses the CD geometry, never the hidden cassette controls. */
.cd-player #cd-like-lamp{transition:fill 180ms,filter 180ms}.cd-player[data-liked=true] #cd-like-lamp{fill:#ff302b;filter:drop-shadow(0 0 7px #ff302b)}
.cd-player[data-like-busy=true] #cd-like-lamp{fill:#ff625c;animation:cd-like-wait 850ms ease-in-out infinite alternate}
@keyframes cd-like-wait{to{opacity:.35}}
.cd-player #cap-volume{transform-box:view-box;transition:transform 120ms ease-out}
.cd-stopping #cap-stop{animation:cd-stop-key 150ms ease-out}
@keyframes cd-stop-key{50%{transform:translateY(3px)}}
.cd-stop-rings{position:fixed;z-index:130;pointer-events:none;width:0;height:0}.cd-stop-rings i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:1.5px solid #8babb2;border-radius:50%;box-shadow:0 1px 2px #fff8;animation:cd-stop-ring 700ms cubic-bezier(.16,1,.3,1) both}.cd-stop-rings i+ i{animation-delay:60ms;border-color:#bba778}
@keyframes cd-stop-ring{from{transform:scale(.4);opacity:.8}to{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.cd-player #cd-like-lamp,.cd-player #cap-volume{transition:none}.cd-player[data-like-busy=true] #cd-like-lamp{animation:none}.cd-stop-rings{display:none}}

/* The 1480px CD canvas includes right-hand shutter travel; body center is 589px. */
@media(min-width:881px){.skin-cd .ensemble.is-browsing .stage{left:calc(50% - 60px);transform:translate(-39.8%,-50%)}}

/* Reuse cassette volume-scale and key-feedback styling; only placement is CD-specific. */
.cd-player .cd-volume-panel{left:77%;top:72%;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.cd-player .cd-volume-panel[hidden]{display:none}
.cd-player .cd-feedback{left:53%;top:63%;bottom:auto;right:auto;max-width:260px;white-space:normal}
.cd-player[data-mode-active=true] #cd-mode-lamp{fill:#ffd044;filter:drop-shadow(0 0 6px #ffd044)}
#cd-mode-symbol{fill:none;stroke:#222724;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .35px .15px #ffffff80)}
@media(max-width:600px){.cd-player .cd-volume-panel{left:77%;top:56%}.cd-player .cd-feedback{left:10%;top:90%}}

.cd-player .lcd.lcd-track{font-size:38px;letter-spacing:1.8px}

/* Center the physical body (51 + 1076/2 = 589), not the shutter-travel canvas. */
.skin-cd .ensemble:not(.is-browsing) .stage{left:50%;transform:translate(-39.7972973%,-50%)}

/* Low-power reflective LCD when idle; yellow-green backlight while playing. */
.cd-player #cd-lcd-light{opacity:0;mix-blend-mode:screen;transition:opacity 360ms ease-out}
.cd-player[data-state=playing] #cd-lcd-light{opacity:.85}
.cd-player[data-state=playing] .lcd{fill:#23300f}
@media(prefers-reduced-motion:reduce){.cd-player #cd-lcd-light{transition:none}}

/* Hardware never gains a software selection frame. Keyboard focus uses a slight material highlight. */
.machine button:focus,.machine input:focus,.cd-player button:focus,.cd-player input:focus,.player-skin-picker button:focus:not(:focus-visible),.shelf-toggle:focus{outline:none}
.cd-player:has(.cd-mode:focus-visible) #cap-mode,.cd-player:has(.cd-like:focus-visible) #cap-like,.cd-player:has(.cd-play:focus-visible) #cap-play,.cd-player:has(.cd-stop:focus-visible) #cap-stop{filter:brightness(1.08)}

/* Real discrete LCD cells, including CJK glyphs; text nodes remain for accessible names. */
.cd-player.lcd-pixel-ready #lcd-text,.cd-player.lcd-pixel-ready #lcd-time{opacity:0}
.cd-player #lcd-pixels{fill:#243016;shape-rendering:crispEdges}
.cd-player[data-state=playing] #lcd-pixels{fill:#1d2b0e}

@media(max-width:880px){#player-skin-menu{left:80px;max-width:calc(100vw - 104px)}}
@media(prefers-reduced-motion:reduce){#player-skin-menu{animation:none}#player-skin-menu [data-skin] img{transition:none}}

/* Center the mobile controls on the physical CD body, rather than its padded art canvas. */
@media(max-width:600px){.cd-mobile-controls{left:-10.2027027%;right:10.2027027%}}

/* Keep navigation clear of the CD transport buttons in narrow windows. */
@media(max-width:600px){.skin-cd .player-skin-picker{top:8px;transform:none}.skin-cd #player-skin-toggle{width:64px;height:48px}.skin-cd #player-skin-menu{top:0;transform:none}.skin-cd:not(.browsing) .shelf-toggle{top:8px;transform:none;width:64px;height:48px}}