:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#45443f;background:#fff;--ink:#45443f;--muted:#83827d;--panel:#faf9f6;--line:#deddd8;--accent:#d3a36b;--modal-open-dur:250ms;--modal-close-dur:150ms;--modal-scale:.96;--modal-scale-close:.96;--modal-ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;overflow-x:clip;min-width:280px;min-height:100svh;background-color:#fff;background-size:cover;background-position:center;background-attachment:fixed;color:var(--ink);transition:background-color 300ms}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,.file-button:focus-within{outline:2px solid #b87937;outline-offset:4px}button{touch-action:manipulation}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0 30px}.stage{width:100%;display:grid;place-items:center;min-height:0;overflow:hidden;padding:100px 0;margin:-100px 0}.fit{width:min(100%,750px);aspect-ratio:3/2;position:relative}.machine{width:750px;height:500px;position:absolute;transform-origin:0 0;isolation:isolate;user-select:none;-webkit-user-select:none}.layer{position:absolute;pointer-events:none}.layer img{width:100%;height:100%;display:block;pointer-events:none}.chamber{position:absolute;left:118px;top:96px;width:518px;height:256px;background:#0d1111;border-radius:16px;z-index:1;box-shadow:inset 0 2px 8px #000}.layer[data-id=chassis]{z-index:2!important}.drag-zone{position:absolute;left:90px;top:48px;width:550px;height:42px;cursor:grab;z-index:75;touch-action:none}.drag-zone:active{cursor:grabbing}.rotor{animation:spin 5s linear infinite;animation-play-state:paused}.layer[data-id=hub-right] .rotor{animation-duration:4.1s}.machine.playing .rotor{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}
.door{position:absolute;left:115.7227px;top:94.7266px;width:521.9727px;height:258.7891px;z-index:65;transform-origin:50% 98%;transition:transform 650ms cubic-bezier(.22,.7,.2,1);pointer-events:none;transform-style:preserve-3d}.door>.layer{left:0!important;top:0!important}.glass{position:absolute;inset:12px;background:linear-gradient(140deg,#b3d3df35 0%,#e6f6ff18 33%,#ffffff35 34%,#bcd0d810 35%,#15262920 100%);border:1px solid #b7c9ce30;border-radius:10px;opacity:0;transition:opacity 300ms}.machine.open .door{transform:perspective(1000px) rotateX(-112deg);z-index:90}.machine.open .glass{opacity:1}.machine.open .cover-hit{z-index:61}
button.hardware{position:absolute;border:0;padding:0;background:transparent;border-radius:6px;z-index:72;transition:transform 90ms,filter 90ms;min-width:0}.hardware img{width:100%;height:100%;display:block;pointer-events:none}button.hardware:focus{outline:none}button.hardware:focus-visible{filter:brightness(1.12)}button.hardware:active{filter:brightness(.85)}.hardware:active{transform:translateY(1.4px);filter:brightness(.85)}.hardware:before{content:"";position:absolute;inset:-5px}.hardware.top-key:before{inset:-8px -1px -14px}.play-patch{position:absolute;left:41%;top:24%;width:20%;height:55%;background:url(assets/button-play.png) -22px -12px / 139.1602px 49.8047px;display:grid;place-items:center}.play-patch svg{width:22px;height:22px;fill:#080a09;filter:drop-shadow(.5px .5px .4px #eee)}
.lcd{position:absolute;left:166px;top:365px;width:420px;height:26px;z-index:75;background:linear-gradient(#070a09,#0c1010);border-radius:3px;display:flex;align-items:center;gap:10px;padding:0 17px;color:#bfc2bc;font-size:10px;letter-spacing:.025em;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 7px #000}.lcd #track-name{width:97px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.lcd #time{font-size:8.8px;white-space:nowrap}.lcd input{width:105px;min-width:0}.status{display:flex;align-items:center;gap:6px;font-size:8px;margin-left:auto}.status i{width:5px;height:5px;border-radius:50%;background:#647065}.playing .status{color:#ffbd4f}.playing .status i{background:#ffbb3f;box-shadow:0 0 7px #ffba3f}.lcd input[type=range]{height:20px;appearance:none;background:transparent;margin:0;cursor:ew-resize}.lcd input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#babdb6 var(--progress,0%),#303533 var(--progress,0%))}.lcd input::-webkit-slider-thumb{appearance:none;width:5px;height:9px;margin-top:-3px;background:#ddd;border:0;border-radius:0}.lcd input::-moz-range-track{height:3px;background:#343a35}.lcd input::-moz-range-thumb{width:5px;height:9px;background:#ddd;border:0;border-radius:0}
.cover-hit{position:absolute;left:185px;top:129px;width:64px;height:62px;z-index:66;background:transparent;border:0;border-radius:2px;cursor:zoom-in}.wheel-hit{position:absolute;left:674px;top:56px;width:28px;height:79px;z-index:80;opacity:.001;writing-mode:vertical-lr;direction:rtl;cursor:ns-resize;touch-action:none} .wheel-hit:focus{outline:none}.wheel-hit:focus-visible{opacity:.001}
.volume-scale{position:absolute;left:706px;top:41px;width:36px;height:139px;z-index:81;color:var(--ink);font:10px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:center;user-select:none;opacity:0;pointer-events:none;transition:opacity 120ms ease-out}
.volume-plus,.volume-minus{position:absolute;left:0;width:24px;font-size:12px}.volume-plus{top:0}.volume-minus{top:117px}
.volume-track{position:absolute;left:0;top:16px;width:32px;height:100px}
.volume-ticks{position:absolute;inset:0;width:32px;height:100px;pointer-events:none;fill:none;stroke:currentColor;stroke-width:.7;opacity:.35}
#volume-fader{position:absolute;left:0;top:0;margin:0;width:24px;height:100px;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;background:transparent;cursor:ns-resize;touch-action:none;color:inherit}
#volume-fader:focus{outline:none}
#volume-fader::-webkit-slider-runnable-track{width:1px;height:100%;background:color-mix(in srgb,currentColor 35%,transparent)}
#volume-fader::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border:0;border-radius:50%;background:currentColor;margin-left:-4px}
#volume-fader::-moz-range-track{width:1px;height:100%;background:color-mix(in srgb,currentColor 35%,transparent)}
#volume-fader::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:currentColor}
#volume-fader:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}
#volume-fader:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}
#volume-reading{position:absolute;top:135px;left:0;width:24px;font-size:8px;font-variant-numeric:tabular-nums}
.dynamic-label{position:absolute;inset:0;mask:url('assets/album-label-mask.png') center/100% 100%;-webkit-mask:url('assets/album-label-mask.png') center/100% 100%;background-size:cover;background-position:center;display:none}.dynamic-label:after{content:"";position:absolute;inset:0;background:linear-gradient(#0001,#0000 45%,#0003)}.custom-title{position:absolute;left:125px;top:15px;right:25px;text-align:center;font:14px Georgia,serif;letter-spacing:2px;color:white;text-shadow:0 1px 4px #000;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:1}.custom-thumbnail{position:absolute;left:18px;top:11px;width:57px;height:58px;object-fit:cover;box-shadow:0 0 0 .5px #fff7;z-index:1}
.toolbar{display:flex;align-items:center;gap:22px;position:relative;z-index:100;margin-top:12px}.toolbar button{border:0;background:transparent;font-size:12px;letter-spacing:.06em;padding:10px 4px}.toolbar span#track-count{font:10px monospace;color:var(--muted);margin-left:6px}.divider{height:12px;width:1px;background:var(--line)}.caption{font-size:10px;letter-spacing:.04em;color:var(--muted);margin:9px 16px 0;text-align:center;line-height:1.6}.notice{height:16px;margin:10px 12px 0;font-size:11px;color:var(--ink);text-align:center}
dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;width:min(380px,calc(100vw - 32px));max-height:85svh;box-shadow:0 16px 70px #0003}dialog::backdrop{background:#0005;backdrop-filter:blur(5px)}dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h2{font-size:16px;font-weight:500;margin:0}button.close{background:transparent;border:0;font-size:25px;width:32px;height:32px;line-height:1;color:var(--muted)}.subtle{font-size:11px;line-height:1.8;color:var(--muted);margin-top:14px}.file-button{display:block;text-align:center;border:1px solid var(--line);border-radius:6px;font-size:12px;padding:12px;margin-top:18px;cursor:pointer;position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.swatches{display:flex;align-items:center;gap:12px}.swatch{width:30px;height:30px;border:1px solid #8885;border-radius:50%}.swatch[aria-pressed=true]{outline:1px solid var(--ink);outline-offset:4px}.swatch.white{background:#fff}.swatch.black{background:#000}.color-picker{font-size:12px;margin-left:auto;display:flex;align-items:center;gap:10px}.color-picker input{border:0;padding:0;width:28px;height:28px;background:transparent}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;margin-top:24px}.setting input{width:65%;accent-color:#8c806b}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:0;margin-top:22px;color:var(--muted)}.track{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}.track img{width:42px;height:42px;object-fit:cover;border-radius:3px}.track span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.track small{color:var(--muted);font-size:10px}.track[aria-current=true] span{color:#9b6b33}.large-cover{display:block;width:180px;height:180px;object-fit:cover;border-radius:3px;margin:10px auto 20px}dl{display:grid;grid-template-columns:95px 1fr;font-size:12px;gap:14px 8px;line-height:1.6}dt{font-weight:500}dd{margin:0;color:var(--muted)}
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
@media(max-width:600px){main{padding-top:24px}.toolbar{margin-top:25px;gap:24px}.caption{font-size:10px}.fit{width:100%}.toolbar button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.t-modal{transition:none!important}.rotor{animation:none!important}.door,.glass,body{transition:none!important}}

/* Physical playlist: the existing player remains the visual anchor. */
.ensemble{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,750px) 230px;gap:24px;align-items:center;justify-content:center;padding:0 24px}
.rack-region{position:relative;align-self:center;margin:12px 0 0;z-index:110;min-width:0}
.rack{position:relative;border-radius:7px 7px 9px 9px;padding:0 11px;background:linear-gradient(90deg,#161a19,#3d4140 3%,#1b1e1d 7%,#181b1a 93%,#4e514f 97%,#232725);border:1px solid #535854;box-shadow:2px 5px 0 #111714,6px 12px 18px #0002,inset 0 1px 0 #858b87}
.rack:before{content:"";position:absolute;top:7px;right:-7px;bottom:-3px;width:6px;background:linear-gradient(90deg,#2c312f,#121614);border-radius:0 3px 5px 0;z-index:-1}
.rack-cap,.rack-foot{height:37px;display:flex;justify-content:space-between;align-items:center;padding:0 6px;color:#b8c0ba;text-shadow:0 1px #000;font-size:9px;letter-spacing:.14em}.rack-foot{height:31px;font-size:8px;color:#939d96;letter-spacing:.08em}.rack-screw{width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#8b928d 40%,#1e2320 42%,#1e2320 56%,#7b827d 58%);box-shadow:0 0 0 1px #101310}
.rack-slots{display:flex;flex-direction:column;gap:5px;padding:4px 0 6px;max-height:320px;overflow:visible;scrollbar-width:thin;scrollbar-color:#5c635c #151a16;perspective:800px}
.rack-slot{height:37px;flex:0 0 37px;position:relative;background:linear-gradient(#080b09,#111512 82%,#51594f 84%,#222b24 88%);border-radius:2px;box-shadow:inset 0 2px 4px #000;padding:2px 7px 5px}
.rack-slot.empty:after{content:"";position:absolute;left:9px;right:9px;top:15px;height:1px;background:#1d241f}
.case{position:relative;display:flex;width:100%;height:29px;align-items:center;gap:8px;padding:2px 8px 2px 5px;border:1px solid #aeb6a783;border-radius:2px;color:#252923;background:linear-gradient(90deg,#bbc0ae 0%,#e8e8d9 5%,#e2e2d3 96%,#a8afa2);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #8d938a,0 2px 1px #000a;transform-origin:center;transition:transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 260ms;isolation:isolate}
.case:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#ffffff30,transparent 25%,transparent 75%,#ffffff50 77%,transparent 80%);pointer-events:none;z-index:2}
.case:after{content:"";position:absolute;left:-1px;right:-1px;bottom:-4px;height:3px;border:1px solid #889b9060;background:#334138b0;border-radius:0 0 2px 2px;opacity:0;transition:opacity 220ms}
.case img{width:22px;height:22px;object-fit:cover;border:1px solid #777c6e70;flex-shrink:0}.case-name{font-family:Georgia,"Songti SC",serif;font-size:11px;letter-spacing:.035em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;text-align:left;line-height:1.2}.case-dot{width:4px;height:4px;border-radius:50%;flex:0 0 4px;background:#7b857980}.case[aria-current=true] .case-dot{background:#bf721d;box-shadow:0 0 0 1px #8e581f55}.case[data-variant=forest]{background:linear-gradient(90deg,#91a194,#d1dbca 5%,#c6d1bf 96%,#8c9b88)}
.case.pulled{box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #8d938a,3px 7px 7px #0009;z-index:5}.case.pulled:after{opacity:1}.case:hover:not(.pulled):not(:disabled){transform:translateY(-1px)}.rack .case:focus,.rack .case:focus-visible{outline:none}.rack .case:focus-visible .case-name{text-decoration:underline;text-underline-offset:.12em}.case:disabled{cursor:wait}
.rack-hint{font-size:10px;line-height:1.6;text-align:center;color:var(--muted);margin:20px -8px 0;min-height:32px}.ritual-hint{font-size:12px;line-height:1.5;min-height:18px;color:var(--ink);text-align:center;margin:0 16px 4px;z-index:100;position:relative}
.cassette-group{position:absolute;inset:0;z-index:30;transform-origin:375px 300px;pointer-events:none}.cassette-group .layer{pointer-events:none}.machine.swapping .cover-hit{pointer-events:none}.door-close{position:absolute;inset:14px;border:0;background:transparent;pointer-events:none;z-index:80;cursor:pointer;border-radius:10px;display:none}.machine.open:not(.swapping) .door-close{display:block;pointer-events:auto}.machine.open:not(.swapping) .door-close:hover{background:#e4f5ff12}.machine.swapping .hardware:disabled{cursor:wait}
.skip-patch{left:34%;top:20%;width:34%;height:62%;background-position:-9px -10px}.skip-patch svg{width:28px;height:25px}
@media(max-width:880px){.ensemble{grid-template-columns:minmax(0,1fr);padding:0;gap:14px}.rack-region{width:230px;margin:0 auto 16px}.rack-slots{max-height:none}.rack-slot.empty:nth-last-child(-n+2){display:none}.rack-cap{height:29px}.rack-foot{height:24px}.rack-hint{margin-top:15px;min-height:16px}.toolbar{margin-top:4px}main{padding-top:32px}}
@media(prefers-reduced-motion:reduce){.case,.case:after{transition:none!important}}

.hardware[data-id=button-prev] .skip-patch{background-image:url(assets/metal-prev-strip.png)}
.hardware[data-id=button-next] .skip-patch{background-image:url(assets/metal-next-strip.png)}
.hardware .skip-patch{background-size:26.8555px 31.7383px;background-position:left top;background-repeat:repeat-x;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}

.rack-slots.scrollable{overflow:auto;padding:4px 14px 6px;margin:0 -14px;max-height:320px}
.machine.open button.hardware:not(.top-key){z-index:95!important}
@media(max-width:880px){.rack-slots.scrollable{max-height:170px}}

.door-close{top:0;bottom:auto;height:70px}
.machine.open:not(.swapping) .door{pointer-events:auto;cursor:pointer}
.machine.open .hardware:not(.top-key):before{inset:0}

/* Listening view reveals its physical playlist only on request. */
.ensemble{display:block;position:relative;width:min(1100px,100%);height:500px;padding:0;overflow-x:clip}
.ensemble .stage{position:absolute;left:50%;top:50%;width:min(750px,100%);margin:0;transform:translate(-50%,-50%);transition:none}
.ensemble .fit{width:100%}
.ensemble.is-browsing .stage{left:calc(50% - 130px);width:min(750px,calc(100% - 280px))}
.ensemble .rack-region{position:absolute;right:24px;top:calc(50% + var(--rack-align-y,82px));width:230px;margin:0;opacity:0;visibility:hidden;transform:translate(30px,-50%);transition:opacity 300ms,transform 500ms cubic-bezier(.22,.7,.2,1),visibility 0s 500ms}
.ensemble.is-browsing .rack-region{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity 450ms 120ms,transform 600ms cubic-bezier(.22,.7,.2,1),visibility 0s}
.shelf-toggle{position:fixed;right:24px;top:50%;transform:translateY(-50%);width:52px;height:82px;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--ink);z-index:120;transition:top 650ms cubic-bezier(.22,.7,.2,1)}
.shelf-close-symbol{display:none;font:300 34px Georgia,serif;color:var(--muted)}
body.browsing .shelf-toggle{top:calc(50% - 220px);height:48px}body.browsing .case-material{display:none}body.browsing .shelf-close-symbol{display:block}
.workspace-tools{position:absolute;bottom:27px;left:0;width:100%;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity 250ms,visibility 0s 250ms}
body.browsing .workspace-tools{opacity:1;visibility:visible;transition:opacity 400ms 150ms,visibility 0s}
.ritual-hint{position:absolute;bottom:122px;left:0;right:0;margin:0 16px}.notice{position:absolute;bottom:5px;left:0;right:0;margin:0 16px}.toolbar{margin-top:0}
@media(max-width:880px){
 .ensemble{height:500px}.ensemble .rack-region{width:160px;right:14px}.ensemble.is-browsing .stage{left:calc(50% - 90px);width:calc(100% - 180px)}
 .shelf-toggle{right:8px;width:44px;height:70px}body.browsing .shelf-toggle{top:calc(50% - 185px)}
 .rack-hint{font-size:10px;margin-left:0;margin-right:0}.case{gap:5px;padding-right:4px}.case-name{font-size:11px;letter-spacing:0}.rack-cap{font-size:8px}.workspace-tools{bottom:38px}.ritual-hint{bottom:135px}
}
@media(max-height:620px){main{min-height:680px}.shelf-toggle{position:absolute;top:340px}body.browsing .shelf-toggle{top:120px}.workspace-tools{top:590px;bottom:auto}.ritual-hint{top:550px;bottom:auto}.notice{top:655px;bottom:auto}}
@media(prefers-reduced-motion:reduce){.ensemble .stage,.ensemble .rack-region,.shelf-toggle,.workspace-tools{transition:none!important}}

@media(max-width:880px){.ensemble:not(.is-browsing) .stage{width:calc(100% - 64px)}}

/* A gentle draw along the case rails, with a quicker seated return. */
.case{transform:translateX(0) scale(1);transition:transform 340ms cubic-bezier(.4,0,.22,1),box-shadow 340ms ease-out}
.case:hover:not(.pulled):not(:disabled){transform:translateX(0) scale(1)}
.case.pulled{transform:translateX(-11px) scale(1.035);transition:transform 540ms cubic-bezier(.16,1,.3,1),box-shadow 440ms ease-out;box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #8d938a,4px 6px 8px #0008}
.case:after{transition:opacity 260ms ease-out}
.rack-slots{--rack-rows:6}
.rack-slots.scrollable{max-height:calc(var(--rack-rows)*42px + 5px);overscroll-behavior-y:contain;scrollbar-width:none;scroll-padding:4px 0 6px;scroll-snap-type:y proximity}
.rack-slots::-webkit-scrollbar{display:none}
.rack-foot{height:38px;padding:0 2px;letter-spacing:.03em;gap:5px}
.rack-navigation{display:flex;align-items:center;gap:1px}
.rack-navigation[hidden]{display:none}
.rack-navigation button{display:grid;place-items:center;width:28px;height:32px;padding:0;border:0;background:transparent;color:#d7ddd7;font:18px Georgia,serif;border-radius:2px}
.rack-navigation button:disabled{opacity:.23;cursor:default}
.rack-navigation button:focus-visible{outline:1px solid #e3b46d;outline-offset:-1px}
#rack-range{font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;min-width:29px;text-align:center;color:#c2cac2}
@media(max-width:880px){.rack-slots{--rack-rows:4}.rack-foot{font-size:7px}.rack-navigation button{width:23px}.rack-navigation{gap:0}#rack-range{font-size:8px;min-width:26px}}
@media(prefers-reduced-motion:reduce){.case,.case.pulled,.case:after{transition:none!important}}

.rack-slot{scroll-snap-align:start}

/* Newly generated full cassette organizer; only its shadow breathes. */
.shelf-toggle{width:108px;height:108px;padding:0}
.case-material{display:block;width:100%;height:100%;object-fit:contain;opacity:.94;filter:brightness(1);transition:opacity 180ms ease-out,filter 180ms ease-out;pointer-events:none}
body:not(.browsing) .shelf-toggle:before{content:"";position:absolute;left:20%;right:20%;bottom:5px;height:7px;background:var(--ink);border-radius:50%;filter:blur(5px);animation:case-shadow-breathe 3600ms ease-in-out infinite;pointer-events:none}
.shelf-toggle:hover .case-material,.shelf-toggle:focus-visible .case-material{opacity:1;filter:brightness(1.06)}
.shelf-toggle:focus-visible{outline-offset:3px}
@keyframes case-shadow-breathe{0%,100%{opacity:.09}50%{opacity:.2}}
@media(max-width:880px){.shelf-toggle{width:70px;height:84px;right:4px}.ensemble:not(.is-browsing) .stage{width:calc(100% - 100px)}}
@media(prefers-reduced-motion:reduce){body:not(.browsing) .shelf-toggle:before{animation:none;opacity:.13}.case-material{transition:none}}

@media(max-width:600px){.ensemble:not(.is-browsing) .stage{width:calc(100% - 132px)}}

/* Photographic rack: one new transparent raster, with live cases aligned to its six slots. */
.rack{width:230px;height:360px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
.rack:before,.rack:after,.rack-cap,.rack-slot.empty:after{display:none}
.rack-photo{position:absolute;inset:0 auto auto 0;width:230px;height:345px;pointer-events:none;user-select:none}
.rack-slots{position:absolute;top:47px;left:25px;width:162px;height:276px;max-height:276px;gap:0;padding:0;margin:0;--rack-rows:6;--rack-step:46px}
.rack-slots.scrollable{left:25px;width:190px;height:276px;max-height:276px;margin:0 -14px;padding:0 14px;scroll-padding:0}
.rack-slot{height:46px;flex:0 0 46px;padding:6px 0 0;background:none;border:0;box-shadow:none;border-radius:0}
.rack-slot.empty:nth-last-child(-n+2){display:block}
.rack .case{height:29px;gap:6px;padding-left:4px;padding-right:5px}
.rack-foot{position:absolute;left:10px;right:10px;top:322px;height:30px;padding:0;background:none;color:var(--ink);text-shadow:none}
.rack-navigation button,#rack-range{color:var(--ink)}
.rack-navigation button:focus-visible{outline-color:var(--ink)}
.rack-hint{margin-top:0}
@media(max-width:880px){
 .rack{width:160px;height:252px}.rack-photo{width:160px;height:240px}
 .rack-slots{top:32.7px;left:17.4px;width:112.7px;height:192px;max-height:192px;--rack-rows:6;--rack-step:32px}
 .rack-slots.scrollable{top:32.7px;left:17.4px;width:140.7px;height:192px;max-height:192px}
 .rack-slot{height:32px;flex-basis:32px;padding-top:4.2px}.rack .case{height:20.2px;gap:3px;padding:1px 3px}
 .rack .case img{width:15px;height:15px}.rack .case-name{font-size:9px}.rack .case-dot{width:3px;height:3px;flex-basis:3px}
 .rack-foot{top:225px;left:6px;right:6px;height:26px}.rack-hint{margin-top:0}
}

.plastic-selection{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--ink);margin:14px 0}.plastic-selection i{width:12px;height:12px;border-radius:3px;border:1px solid #8885;box-shadow:inset 0 1px #fff5}

/* The rack front is level: print and clear rim share a horizontal plane.
   Depth belongs to the top/right faces, without a second camera projection. */
.rack .case{width:calc(100% - 8px);transform-origin:left center;transform:translate(4px,-2px);--case-depth:18px;--case-rise:calc(var(--case-depth) * .5)}
.rack .case:hover:not(.pulled):not(:disabled){transform:translate(4px,-2px)}
.rack .case.pulled{transform:translate(-9px,4.5px);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #8d938a,4px 8px 7px #0006}
.case-top,.case-side{position:absolute;display:block;pointer-events:auto;z-index:-1;box-sizing:border-box;border:1px solid #cad0c080}
.case-top{left:0;bottom:100%;width:100%;height:var(--case-rise);transform:matrix(1,0,-2,1,0,0);transform-origin:left bottom;background:linear-gradient(170deg,#ffffff65,#ffffff0d 35%,#10171470),var(--case-cover) center 30%/cover,var(--case-plastic);box-shadow:inset 0 1px #fff6}
.case-side{left:100%;top:0;width:var(--case-depth);height:100%;transform:matrix(1,-.5,0,1,0,0);transform-origin:left top;background:linear-gradient(90deg,#202b2899,#ffffff18 20%,#101b1866 78%,#dfe9de55),var(--case-plastic);box-shadow:inset -2px 0 #ffffff55,inset 1px 0 #0b181c99}
.rack .case:after{display:none}
@media(max-width:880px){.rack .case{--case-depth:12.5px;--case-rise:calc(var(--case-depth) * .5);transform:translate(2.8px,-1.4px);width:calc(100% - 5.6px)}.rack .case:hover:not(.pulled):not(:disabled){transform:translate(2.8px,-1.4px)}.rack .case.pulled{transform:translate(-6.3px,3.15px)}}

/* Reserve room around the scrolling spines for their projected top and side faces. */
.rack-slots.scrollable{top:38px;width:206px;height:279px;max-height:279px;padding:9px 30px 0 14px;scroll-padding:9px 0 0}
@media(max-width:880px){.rack-slots.scrollable{top:25.7px;width:154.7px;height:195px;max-height:195px;padding:7px 28px 0 14px;scroll-padding:7px 0 0}}

/* Remove the same unused tail space as the shortened viewport, so the final
   six cases still settle on whole rail steps instead of shifting upward. */
.rack-slots.scrollable .rack-slot:last-child{height:40px;flex-basis:40px}
@media(max-width:880px){.rack-slots.scrollable .rack-slot:last-child{height:28px;flex-basis:28px}}

/* The photo's front frame occludes stored cases. A pulled case crosses in front.
   No stacking context on the scroll viewport: its buttons share the rack layers. */
.rack-slots{perspective:none}
.rack .case{z-index:1;transition:transform 340ms cubic-bezier(.4,0,.22,1),box-shadow 340ms ease-out,z-index 0s 340ms}
.rack .case.pulled{z-index:3;transition:transform 540ms cubic-bezier(.16,1,.3,1),box-shadow 440ms ease-out,z-index 0s}
.rack-foreground{z-index:2;mask:url(assets/rack-foreground-mask.svg) 0 0/100% 100% no-repeat;pointer-events:none}

@media(max-width:360px){.shelf-toggle{width:64px}}

/* Fixed right plastic wall: higher than both seated and pulled cases.
   The narrower case clears its front post at the end of the rail travel. */
.rack-right-wall{z-index:4;mask:url(assets/rack-right-wall-mask.svg) 0 0/100% 100% no-repeat;pointer-events:none}



/* Fixed music catalog tag, using a freshly generated blank paper and metal clip. */
.tape-booklet{position:absolute;right:3%;bottom:calc(100% + 12px);width:94%;height:auto;aspect-ratio:324 / 250;z-index:8;opacity:0;visibility:hidden;transform:translateY(10px) rotate(-2deg);transform-origin:90% 100%;transition:opacity 220ms ease-out,transform 360ms cubic-bezier(.16,1,.3,1),visibility 0s 360ms}
.tape-booklet.is-visible{opacity:1;visibility:visible;transform:translateY(0) rotate(-2deg);transition:opacity 260ms ease-out,transform 440ms cubic-bezier(.16,1,.3,1),visibility 0s}
.music-tag-paper{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(6px 14px 12px #0002)}
/* Fixed master coordinates: the entire label scales once, including all text. */
.music-tag-canvas{position:absolute;left:0;top:0;width:648px;height:500px;transform:scale(var(--tag-scale,.33333));transform-origin:0 0}
.music-tag-content{position:absolute;left:11%;top:27%;width:77%;height:56%;color:#302f2a;transform:rotate(-1deg);transform-origin:center}
.music-tag-content header{position:absolute;left:0;top:0;width:88%;display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:2px solid #343934;font-size:16px;line-height:1.1;letter-spacing:.015em}
.tag-title{position:absolute;left:0;top:21%;width:55%;padding-bottom:12px;border-bottom:2px solid #343934}
.tag-title>span,.music-tag-content dt{display:block;font-size:16px;line-height:1.1;letter-spacing:.03em;font-style:normal;color:#373a36}
.tag-title h2{margin:8px 0 0;font:italic 34px/1.08 Georgia,'Kaiti SC',serif;color:#315c85;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.music-tag-content dl{display:block;position:absolute;left:0;top:65%;width:55%;margin:0}
.music-tag-content dd{font:italic 23px/1.15 Georgia,'Kaiti SC',serif;color:#315c85;margin:4px 0 5px;padding-bottom:5px;border-bottom:2px solid #343934;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.music-tag-content>img{position:absolute;right:0;bottom:0;width:35%;aspect-ratio:1;object-fit:cover;border:4px solid #fff;box-shadow:2px 6px 8px #0002}
body.browsing:has(.tape-booklet.is-visible) .shelf-toggle{right:6px;width:32px;top:32px;transition:none}
body.browsing main{position:relative}
@media(max-height:980px){body.browsing main{min-height:980px}}
@media(max-width:880px){body.browsing:has(.tape-booklet.is-visible) .shelf-toggle{left:2px;right:auto;width:32px}}
@media(prefers-reduced-motion:reduce){.tape-booklet,.tape-booklet.is-visible{transition:none;transform:none}}

/* Native silhouette clips exterior matte fragments without touching raster detail. */
.layer[data-id=chassis]{mask:url(assets/chassis-integrated-mask.svg?v=8.4.1) center/100% 100% no-repeat}

/* One cover treatment selected from decoded pixels and actual display demand. */
.layer .dynamic-label .custom-thumbnail{width:57px;height:58px}
.dynamic-label[data-cover-mode=tinted]:before{content:"";position:absolute;inset:0;background:var(--paper-tint);opacity:.3;mix-blend-mode:multiply}
.dynamic-label[data-cover-mode=paper] .custom-title{left:80px;right:25px}
.dynamic-label .custom-title{color:#252b29;text-shadow:none;letter-spacing:1px}
.dynamic-label:after{background:linear-gradient(#ffffff0d,#00000008)}


.dynamic-label .tape-window{position:absolute;left:68px;top:47px;width:272px;height:91px;border-radius:48px;border:2px solid #53605e;background:transparent;box-shadow:0 0 0 1px #222a27,inset 0 2px 4px #0004;z-index:1}
.dynamic-label .side-mark{position:absolute;right:15px;top:91px;font:8px/1.2 sans-serif;letter-spacing:1px;color:#282e29;z-index:1}


/* Three printed cassette labels share the accepted material and reel geometry. */
.dynamic-label{--print-ink:#283b33;--print-band:#365e48}
.dynamic-label .print-details{display:block;position:absolute;inset:0;z-index:2;color:var(--print-ink);pointer-events:none}
.print-details svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.65}
.print-details .print-outline{stroke-width:1.2}.print-details .edge-lines{display:none}
.print-details .window-scale{stroke:#d2d8ca;stroke-width:.65;opacity:.65}
.dynamic-label:after{inset:140px 7px 6px;background:var(--print-band);z-index:1}
.dynamic-label[data-cover-mode=tinted]{--print-band:color-mix(in srgb,var(--paper-tint) 55%,#16372b)}
.dynamic-label .custom-title{left:80px;right:25px;top:8px;text-align:left;font:italic 16px/1.1 Georgia,'Kaiti SC',serif;letter-spacing:.2px;color:var(--print-ink);text-shadow:none;z-index:3}
.dynamic-label .print-artist{display:block;position:absolute;left:80px;right:25px;top:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:9px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--print-ink);z-index:3}
.layer .dynamic-label .custom-thumbnail{left:22px;top:9px;width:37px;height:34px;object-fit:cover;box-shadow:0 0 0 .6px #554c3960;z-index:3}
.print-details .record-mark{display:none;position:absolute;left:24px;top:12px;font:700 22px/1 sans-serif;border:1px solid currentColor;padding:2px 6px}
.dynamic-label[data-cover-mode=paper] .record-mark{display:block}
.dynamic-label .side-mark{left:25px;right:auto;top:87px;font:500 19px/1 Georgia,serif;color:var(--print-ink);letter-spacing:0;z-index:3}
.print-footer,.print-stereo{position:absolute;bottom:10px;color:#f0ead8;font:7px/1.2 sans-serif;letter-spacing:1px}
.print-footer{left:20px}.print-stereo{right:20px;font-weight:600}
.dynamic-label[data-print-style=metal]{--print-ink:#302b20;--print-band:#302b20}
.dynamic-label[data-print-style=metal]:before{content:"";position:absolute;inset:0;background:#b99a47;opacity:.46;mix-blend-mode:multiply}
.dynamic-label[data-print-style=metal] .custom-title{font:600 14px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.6px;top:10px}
.dynamic-label[data-print-style=metal] .edge-lines{display:block}
.dynamic-label[data-print-style=metal] .writing-lines{stroke-width:1.1}
.dynamic-label[data-print-style=studio]{--print-ink:#313737;--print-band:#444c4b}
.dynamic-label[data-print-style=studio]:before{content:"";position:absolute;inset:47px 7px 6px;background:#798480;opacity:.65;mix-blend-mode:multiply}
.dynamic-label[data-print-style=studio] .print-outline{rx:2;stroke:#525a55}
.dynamic-label[data-print-style=studio] .custom-title{font:500 14px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.3px;top:9px}
.dynamic-label[data-print-style=studio] .side-mark{color:var(--print-ink)}

/* NetEase extends the existing quiet music-library dialog. */
:is(#netease,#apple-music){width:min(520px,calc(100vw - 32px))}:is(#netease,#apple-music) [hidden]{display:none!important}
.cloud-entry{width:100%;background:transparent;margin:0 0 18px;text-align:left}.cloud-entry span{float:right;font-size:11px;color:var(--muted)}
.cloud-account{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;margin-bottom:18px}.cloud-account span{flex:1;min-width:130px}.cloud-account button{margin:0}
#cloud-qr{text-align:center;padding:16px 0;border-block:1px solid var(--line);margin-bottom:18px}#cloud-qr-image{display:block;margin:auto;max-width:100%;background:white;border:12px solid white;box-sizing:content-box}#cloud-qr-status{font-size:13px}
.cloud-form{margin:16px 0}.cloud-form label{display:block;font-size:12px;margin-bottom:8px}.cloud-form>div{display:flex;gap:8px}.cloud-form input{min-width:0;flex:1;width:100%;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);padding:10px;font-size:14px}.cloud-form button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:10px 14px;font-size:13px;white-space:nowrap}
#cloud-feedback{font-size:13px;line-height:1.6;min-height:21px;margin:16px 0}#cloud-feedback[data-error=true]{color:#b9513c}.cloud-result-heading{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}.cloud-result-heading h3{font-size:13px;font-weight:500;line-height:1.5;margin:0;overflow-wrap:anywhere}.cloud-result-heading button{flex:none}
.cloud-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.cloud-row img{width:42px;height:42px;object-fit:cover;flex:none}.cloud-row-info{min-width:0;flex:1}.cloud-row strong{display:block;font-weight:500;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.cloud-row small{display:block;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.cloud-row button{flex:none;background:transparent;border:1px solid var(--line);border-radius:6px;font-size:12px;min-height:36px;padding:6px 10px}:is(#netease,#apple-music) button:disabled{opacity:.5;cursor:default}#cloud-more{width:100%;background:transparent}
@media(max-width:440px){:is(#netease,#apple-music){padding:20px}.cloud-result-heading{align-items:flex-start;flex-direction:column;gap:6px}.cloud-entry span{float:none;display:block;margin-top:5px}}

:is(#netease,#apple-music) .text-button,:is(#netease,#apple-music) .subtle,:is(#netease,#apple-music) .cloud-row small{color:var(--ink)}

.cloud-shortcuts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:20px}.cloud-shortcuts .text-button{margin:0;font-size:13px;min-height:36px}

/* Four printed J-card spines behind one freshly generated clear jewel-case rim. */
.rack .case{padding:0;border:0;border-radius:1px;background:transparent;gap:0;box-shadow:0 2px 2px #0008;--spine-scale:.25;--spine-colour:#536266}
.rack .case:before{display:none}.rack .case.pulled{box-shadow:3px 7px 6px #0005}
.spine-surface{display:block;position:absolute;inset:0;overflow:hidden;border-radius:1px;background:#303431;pointer-events:none}
.spine-canvas{display:block;position:absolute;left:0;top:0;width:616px;height:116px;transform:scale(var(--spine-scale));transform-origin:0 0;text-align:left}
.spine-paper{position:absolute;inset:12px 29px 12px 30px;display:flex;align-items:stretch;background:#e9e2cd url(assets/cassette-label-paper.png) center/cover;color:#202421;overflow:hidden}
.rack .case .spine-art{display:block;width:102px;height:92px;flex:0 0 102px;border:0;object-fit:cover;object-position:center}.rack .case .spine-art[hidden]{display:none}
.spine-copy{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;padding:3px 16px;gap:5px}
.rack .case .case-name{display:block;flex:none;min-width:0;width:100%;font:700 34px/1.05 'Arial Narrow','Helvetica Neue',Arial,'PingFang SC',sans-serif;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;text-align:left;color:inherit}
.spine-detail{display:block;font:500 16px/1.2 'Helvetica Neue',Arial,'PingFang SC',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
.spine-catalog{display:flex;flex:0 0 66px;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding-right:9px;font:500 15px/1 Arial,sans-serif}.spine-catalog span:last-child{font-size:8px;letter-spacing:.6px}
.spine-frame{position:absolute;inset:0;display:block;background:url(assets/jewel-spine-frame.png) 50% 50%/103.3% 268.75% no-repeat;pointer-events:none;z-index:2}
.rack .case[data-spine-style=colour] .spine-paper{background-color:color-mix(in srgb,var(--spine-colour) 75%,#161b1b);background-image:url(assets/cassette-label-paper.png);background-blend-mode:multiply;color:#fff7e7}.rack .case[data-spine-style=colour] .spine-copy{gap:7px}.rack .case[data-spine-style=colour] .case-name{font-weight:700;font-size:32px;letter-spacing:.5px}.rack .case[data-spine-style=colour] .spine-art{width:120px;flex-basis:120px}
.rack .case[data-spine-style=editorial] .case-name{font:500 34px/1.05 Georgia,'Songti SC',serif;letter-spacing:.7px;text-transform:none}.rack .case[data-spine-style=editorial] .spine-detail{color:#813c33;font:500 15px/1.2 Georgia,'Songti SC',serif}.rack .case[data-spine-style=editorial] .spine-art{width:82px;flex-basis:82px}
.rack .case[data-spine-style=split] .spine-catalog{flex-basis:76px;padding:0;color:#ece8dc;background:#272a2c}.rack .case[data-spine-style=split] .case-name{font-size:32px;font-weight:800}.rack .case[data-spine-style=split] .spine-art{width:100px;flex-basis:100px}
.rack .case[aria-current=true] .spine-catalog span:first-child:before{content:'▶ ';font-size:11px}
@media(max-width:880px){.rack .case{padding:0;--spine-scale:.17386}}

/* Full cover printing retains a real cassette's fixed title strip and side tab. */
.dynamic-label[data-cover-mode=full]{--print-ink:#262b29;--print-band:color-mix(in srgb,var(--paper-tint) 65%,#19251f)}
.dynamic-label[data-cover-mode=full]:before{content:"";position:absolute;inset:6px 12px auto;height:38px;background:#f3eddf url(assets/cassette-label-paper.png) center/cover;opacity:.96;mix-blend-mode:normal;border-bottom:.7px solid #3f463f;z-index:2}
.dynamic-label[data-cover-mode=full] .custom-title{left:25px;right:25px;top:9px;font:600 14px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.3px;color:#262b29;text-align:left}
.dynamic-label[data-cover-mode=full] .print-artist{left:25px;right:25px;top:29px;font-size:8px;color:#343a36}
.dynamic-label[data-cover-mode=full] .side-mark{left:25px;top:84px;right:auto;padding:3px 5px;background:#f3eddf;border:.6px solid #56605b;color:#262b29;font:700 15px/1 Georgia,serif;letter-spacing:0;text-shadow:none}
.dynamic-label[data-cover-mode=full] .writing-lines,.dynamic-label[data-cover-mode=full] .edge-lines{display:none}
.dynamic-label[data-cover-mode=full] .print-outline{stroke:#ece8d5;opacity:.65}
.dynamic-label .side-mark{text-shadow:none}


/* The original photographed rim stays still; repeated teeth roll inside it. */
.layer[data-id=volume-wheel] .wheel-surface{position:absolute;left:4.8px;right:6px;top:4px;bottom:4px;overflow:hidden;border-radius:28% 40% 40% 28% / 8% 12% 12% 8%;pointer-events:none}
.wheel-tread{position:absolute;inset:0 0 auto;display:block;will-change:auto}
.wheel-tread i{display:block;width:100%;height:3.3px;background:url(assets/volume-wheel.png) -4.8px -34px / 19.53125px 76.66015625px no-repeat}
.layer[data-id=volume-wheel].turning .wheel-tread{will-change:transform}
.layer[data-id=volume-wheel] .wheel-surface:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080b0d66,#fff1 38%,#10141922 68%,#05070766);pointer-events:none}

/* The scale is feedback for active volume interaction, not a permanent control. */
.volume-scale.is-active{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.volume-scale{transition:none}}


/* Sockets, stepped shoulders and lettering are part of the regenerated shell.
   The matching photographic caps move independently inside its silhouette mask. */
button.preference-key{border-radius:3px;z-index:76;overflow:visible}
.preference-key .key-cap{position:absolute;inset:0;display:block;border-radius:3px;background-image:url(assets/chassis-integrated.png);background-size:688.2408px 492.7284px;background-repeat:no-repeat;transition:transform 140ms cubic-bezier(.2,.8,.2,1);pointer-events:none}
button#button-mode{top:16.2092px;width:53.8704px;height:16.254px}
#button-mode .key-cap{background-position:-106.3476px -19.9692px}
button.preference-key:active{transform:none;filter:none}
#button-mode:active .key-cap{transform:translateY(2px);clip-path:inset(0 0 2px)}
.preference-key[aria-busy=true]{cursor:wait}
.preference-key:focus-visible .key-cap{filter:brightness(1.12)}
button#button-like{top:118.3772px;width:18.576px;height:57.1212px;transform:none}
#button-like .key-cap{background-position:-22.2912px -122.1372px}
#button-like:active .key-cap,#button-like[aria-pressed=true] .key-cap{transform:translateX(4.5px);clip-path:inset(0 4.5px 0 0)}
.key-feedback{position:absolute;top:-23px;min-width:56px;max-width:285px;padding:5px 9px;background:#191d1b;color:#f2f2e9;border-radius:3px;font:11px/1.5 Arial,sans-serif;text-align:center;white-space:nowrap;box-shadow:0 3px 7px #0002;opacity:0;transform:translateY(3px);transition:opacity 130ms,transform 130ms;pointer-events:none;z-index:110}
.key-feedback.is-active{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.preference-key .key-cap,.key-feedback{transition:none}}

/* All three top caps use the same generated assembly and common seat height. */
.hardware[data-id=button-stop],.hardware[data-id=button-eject]{background-image:url(assets/chassis-integrated.png);background-size:688.2408px 492.7284px;background-repeat:no-repeat;border-radius:2px}
.hardware[data-id=button-stop]{background-position:-493.6572px -19.9692px}
.hardware[data-id=button-eject]{background-position:-555.8868px -19.9692px}
.hardware[data-id=button-stop]>img,.hardware[data-id=button-eject]>img{visibility:hidden}

/* State stays on the physical key/engraving rather than a permanent popup. */
#button-like .key-cap:after{content:"";position:absolute;inset:1px 2px;border-radius:2px;background:linear-gradient(90deg,#ff645cbb,#ff211a55 50%,#ff42382b);mix-blend-mode:screen;opacity:0;transition:opacity 180ms}
#button-like:after{content:"";position:absolute;left:7px;right:2px;top:5px;bottom:5px;border-radius:3px;box-shadow:-2px 0 8px 2px #ff33296b;opacity:0;pointer-events:none;transition:opacity 180ms}
#button-like[aria-pressed=true] .key-cap:after,#button-like[aria-pressed=true]:after{opacity:1}
.mode-mark{position:absolute;left:6px;top:19.04px;width:41.8px;height:14px;display:grid;place-items:center;pointer-events:none;color:#222724}
.mode-mark[hidden]{display:none}
.mode-mark:before{content:"";position:absolute;left:0;top:0;width:8px;height:14px;background:url(assets/chassis-integrated.png) -109.5984px -39.0096px / 688.2408px 492.7284px no-repeat;transform:scaleX(5.225);transform-origin:left top}
.mode-mark svg{position:relative;width:24px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .35px .15px #ffffff80)}
@media(prefers-reduced-motion:reduce){#button-like .key-cap:after,#button-like:after{transition:none}}

/* Quiet modal focus feedback and a source link tied to the current song. */
dialog button.close:focus{outline:none}
dialog button.close:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#cover-dialog .file-button[hidden],#cover-source-link[hidden]{display:none}
.source-link{display:block;width:fit-content;margin:18px auto 2px;font-size:12px;line-height:1.6;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.source-link:hover{color:#965921}.source-link:focus-visible{outline:none;text-decoration-thickness:2px}

/* Music workspace: light surfaces, album artwork and red controls. */
.workspace-tools{position:fixed;inset:18px auto auto 50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 120px);padding:8px 10px 10px;border-radius:25px;background:#f0f0f2;color:#191a1c;box-shadow:0 8px 32px #181a2010;z-index:125}
.workspace-tools .toolbar{gap:6px;margin:0}
.workspace-tools .toolbar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border:0;border-radius:22px;background:#fff;color:#191a1c;font:600 14px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;letter-spacing:0;transition:background 160ms,color 160ms}
.workspace-tools .toolbar button:hover{background:#e5e5e8}
.workspace-tools .toolbar button[aria-expanded=true]{color:#fff;background:#df001b}
.toolbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toolbar #track-count{font-size:11px;font-weight:500;line-height:1.3;opacity:.65;letter-spacing:0}
.workspace-tools .caption{font-size:10px;line-height:1.4;color:#65666d;margin:8px 4px 0;text-align:center;max-width:100%;overflow-wrap:anywhere}
body.browsing main{min-height:100svh;padding-top:112px}
body.browsing .shelf-toggle,body.browsing:has(.tape-booklet.is-visible) .shelf-toggle{position:fixed;inset:22px 22px auto auto;transform:none;width:42px;height:42px;padding:0;background:#f0f0f2;border-radius:50%;box-shadow:none}
body.browsing .shelf-close-symbol{font:300 30px/1 sans-serif;color:#27282c;transform:rotate(-90deg)}
.t-modal{--ink:#191a1c;--muted:#65666d;--panel:#f1f1f2;--line:#dadbdd;--ui-red:#df001b;color-scheme:light;width:min(540px,calc(100vw - 32px));max-height:calc(100svh - 40px);padding:28px;border:0;border-radius:28px;background:var(--panel);color:var(--ink);box-shadow:0 24px 90px #11131a2b;overscroll-behavior:contain;scrollbar-width:thin}
.t-modal::backdrop{background:#282a3045;backdrop-filter:blur(8px)}
.t-modal header{gap:20px;margin-bottom:24px;align-items:flex-start}
.t-modal h2{font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.6px;overflow-wrap:anywhere}
.t-modal button.close{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;color:#48494f;font-size:26px}
.t-modal .provider-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.provider-header h2{grid-column:1/-1;grid-row:2}
.provider-header .close{grid-column:2;grid-row:1}
.provider-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:22px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap}
.provider-back:hover{background:#e5e5e8}
.t-modal .provider-back:focus-visible{outline:2px solid var(--ui-red);outline-offset:3px}
.t-modal .subtle{font-size:12px;line-height:1.7;color:var(--muted)}
.t-modal button:focus,.t-modal input:focus,.t-modal .file-button:focus-within,.workspace-tools button:focus{outline:none}
.t-modal button:focus-visible,.workspace-tools button:focus-visible{box-shadow:inset 0 0 0 2px #df001b;text-decoration:underline;text-underline-offset:4px}
.t-modal input:focus-visible,.t-modal .file-button:has(input:focus-visible){box-shadow:inset 0 0 0 2px #df001b}
.t-modal .file-button{border:0;border-radius:16px;background:white;padding:16px;font-size:14px;font-weight:600}
.t-modal .text-button{font-size:13px;color:var(--ink)}
#library,:is(#netease,#apple-music){width:min(760px,calc(100vw - 32px))}
:is(#netease-open,#apple-open){display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:20px;background:#aa0018;color:white;font-size:21px;letter-spacing:-.3px;box-shadow:0 5px 16px #90001818;margin:0 0 24px}
:is(#netease-open,#apple-open) span{float:none;color:#ffe0e3;font-size:12px;font-weight:400;letter-spacing:0}
#track-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
#track-list .track{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;padding:0 0 10px;border:0;border-radius:18px;background:transparent;position:relative}
#track-list .track img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;margin-bottom:4px;background:#e2e2e5}
#track-list .track span{font-size:15px;line-height:1.4;font-weight:650;white-space:nowrap;color:var(--ink)}
#track-list .track small{font-size:12px;line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#track-list .track[aria-current=true]:after{content:'当前磁带';position:absolute;top:10px;left:10px;background:#df001b;color:white;font-size:10px;font-weight:600;border-radius:12px;padding:5px 9px}
#track-list .track:hover img{filter:brightness(.94)}
#appearance .swatches{background:#fff;border-radius:18px;padding:18px}
#appearance .swatch[aria-pressed=true]{outline-color:#df001b}
#appearance .setting{background:#fff;padding:20px;border-radius:18px;font-size:14px;margin-top:14px}
#appearance .setting input{accent-color:#df001b}
#appearance .color-picker{font-size:13px}
#cover-dialog .large-cover{width:min(300px,100%);height:auto;aspect-ratio:1;border-radius:20px;margin:0 auto 20px}
#cover-dialog .source-link{display:block;width:fit-content;margin:20px auto 0;padding:13px 22px;border-radius:22px;background:#df001b;color:#fff;text-decoration:none;font-size:14px}
#cover-dialog .source-link[hidden]{display:none}
#cover-dialog .plastic-selection{font-size:13px}
#help dl{font-size:13px;grid-template-columns:100px minmax(0,1fr);gap:18px 16px;background:white;border-radius:20px;padding:20px}
#help dd{line-height:1.65}
:is(#netease,#apple-music) .cloud-account{background:white;padding:14px 18px;border-radius:16px;font-size:13px}
:is(#netease,#apple-music) .cloud-account button{color:#65666d}
:is(#netease,#apple-music) .cloud-form label{font-size:13px;font-weight:600;margin-bottom:10px}
:is(#netease,#apple-music) .cloud-form input{border:0;border-radius:16px;background:#fff;font-size:14px;padding:15px 18px}
:is(#netease,#apple-music) .cloud-form button{border:0;border-radius:16px;background:#fff;color:var(--ink);padding:12px 22px;font-weight:600;font-size:14px}
:is(#netease,#apple-music) :is(#cloud-search,#apple-search) button{background:#df001b;color:white}
:is(#netease,#apple-music) .cloud-shortcuts{gap:10px;margin:24px 0 16px}
:is(#netease,#apple-music) .cloud-shortcuts button{border:0;border-radius:20px;background:#fff;min-height:40px;padding:10px 18px;text-decoration:none;font-weight:600}
:is(#netease,#apple-music) .cloud-shortcuts button[aria-pressed=true]{color:#df001b;background:#ffe7eb}
:is(#netease,#apple-music) .cloud-result-heading{border:0;margin-top:18px;padding:0 0 12px}
:is(#netease,#apple-music) .cloud-result-heading h3{font-size:17px;font-weight:650}
:is(#cloud-add-page,#apple-add-page){color:#df001b}
:is(#netease,#apple-music) .cloud-row{background:#fff;border:0;border-radius:16px;padding:12px;margin-bottom:8px;gap:14px}
:is(#netease,#apple-music) .cloud-row img{width:56px;height:56px;border-radius:10px;background:#e5e5e7}
:is(#netease,#apple-music) .cloud-row strong{font-size:14px;font-weight:650}
:is(#netease,#apple-music) .cloud-row small{font-size:12px;color:var(--muted)}
:is(#netease,#apple-music) .cloud-row button{border:0;background:#f0f0f2;border-radius:18px;padding:8px 14px;font-weight:600;min-height:36px}
:is(#netease,#apple-music) #cloud-more{background:white}
@media(max-width:600px){
 .workspace-tools{inset:12px auto auto 12px;transform:none;max-width:calc(100vw - 72px);padding:6px 6px 8px;border-radius:22px}
 .workspace-tools .toolbar{gap:4px}.workspace-tools .toolbar button{padding:9px 10px;font-size:12px;gap:5px;min-height:38px}.toolbar svg{width:16px;height:16px}.workspace-tools .caption{font-size:9px;margin-top:6px}
 body.browsing .shelf-toggle,body.browsing:has(.tape-booklet.is-visible) .shelf-toggle{top:16px;right:12px;width:36px;height:36px}
 .t-modal,:is(#netease,#apple-music){padding:20px;border-radius:24px}.t-modal h2{font-size:23px}.t-modal header{gap:12px;margin-bottom:20px}
 #track-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}#track-list .track img{border-radius:14px}
 :is(#netease-open,#apple-open){padding:20px;font-size:19px}#help dl{padding:16px;grid-template-columns:80px minmax(0,1fr);gap:16px 12px}
 :is(#netease,#apple-music) .cloud-row{gap:10px;padding:10px}:is(#netease,#apple-music) .cloud-row img{width:44px;height:44px}:is(#netease,#apple-music) .cloud-row button{padding:8px 10px}
 :is(#netease,#apple-music) .cloud-form button{padding:12px 16px}
}
@media(max-width:340px){.workspace-tools .toolbar button{padding:8px;font-size:11px}.toolbar svg{display:none}.t-modal h2{font-size:20px}}
#cover-dialog .source-link:focus-visible{outline:2px solid #9e0014;outline-offset:4px;text-decoration:underline;text-underline-offset:4px}

/* B-side liner information occupies the paper around the working reels. */
.cassette-flip-hit{position:absolute;z-index:66;border:0;border-radius:20px;background:transparent;padding:0;cursor:pointer;touch-action:manipulation}
.cassette-flip-hit:focus{outline:none}.cassette-flip-hit:focus-visible{box-shadow:inset 0 0 0 1.5px #f3eddfb3}
.cassette-flip-hit:disabled{pointer-events:none}.cover-hit{z-index:67}.cover-hit[hidden]{display:none}
.dynamic-label[data-side=B]>.custom-title,.dynamic-label[data-side=B]>.print-artist{display:none}
.dynamic-label[data-side=B] .writing-lines,.dynamic-label[data-side=B] .edge-lines,.dynamic-label[data-side=B] .print-footer,.dynamic-label[data-side=B] .print-stereo{display:none}
/* Use a 2x print canvas so tiny labels remain proportionate under browser
   minimum-font settings; the physical paper bounds stay unchanged. */
.back-details{position:absolute;left:0;top:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;z-index:3;color:var(--print-ink);font-family:'Helvetica Neue',Arial,'PingFang SC',sans-serif;pointer-events:none}
.back-details[hidden]{display:none}
.back-heading{position:absolute;left:160px;right:50px;top:16px;height:70px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;overflow:hidden}
.dynamic-label[data-cover-mode=full] .back-heading{left:50px}
.back-caption{display:block;font-size:12px;line-height:1.2;letter-spacing:.6px;font-weight:500;flex:none}
.back-album{display:block;max-width:100%;min-width:0;font-size:24px;line-height:1.15;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.back-artist{max-width:100%;min-width:0;display:block;font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.back-facts{position:absolute;left:704px;right:30px;top:118px;display:flex;flex-direction:column;gap:4px;min-width:0}
.dynamic-label[data-cover-mode=full] .back-facts{left:700px;right:34px;top:114px;padding:10px 8px;background:#f3eddf url(assets/cassette-label-paper.png) center/cover;border:1.2px solid #56605b;color:var(--print-ink)}
.back-facts .back-caption{font-size:12px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.back-year{font-size:22px;line-height:1.3;font-weight:600;white-space:nowrap}.back-facts .back-caption:nth-of-type(2){margin-top:12px}
.back-duration{font-size:20px;line-height:1.3;font-variant-numeric:tabular-nums}
.back-footer{position:absolute;left:46px;right:46px;top:290px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:16px;line-height:1.3;color:#faf5e9}
.back-song{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.back-source{flex:none;font-size:12px;letter-spacing:1px}
@media(prefers-reduced-motion:reduce){.cassette-flip-hit{transition:none}}

/* Recolour the photographed LIKE ink in place, preserving its metal substrate. */
.machine:after{content:"";position:absolute;left:72.54px;top:131.84px;width:11.62px;height:29.72px;z-index:82;background:#b51b29;mix-blend-mode:lighten;opacity:0;pointer-events:none;transition:opacity 180ms}
.machine:has(#button-like[aria-pressed=true]):after{opacity:1}
@media(prefers-reduced-motion:reduce){.machine:after{transition:none}}

/* One calibrated camera for the printed front, clear rim, top and right faces. */
.rack .case{--case-seat-x:4px;--case-seat-y:-2px;transform:translate(var(--case-seat-x),var(--case-seat-y));box-shadow:none}
.rack .case:hover:not(.pulled):not(:disabled){transform:translate(var(--case-seat-x),var(--case-seat-y))}
.rack .case.pulled{transform:translate(var(--case-pull-x,-9px),var(--case-pull-y,4.5px));box-shadow:none}
.rack .spine-surface{transform-origin:0 0;transform:var(--case-front-projection,none);box-shadow:0 2px 2px #0005}
.rack .case-top{left:0;top:0;bottom:auto;width:100%;height:var(--case-surface-depth,1px);transform-origin:0 0;transform:var(--case-top-projection,none);border:0;box-shadow:none}
.rack .case-side{left:0;top:0;width:var(--case-surface-depth,1px);height:100%;transform-origin:0 0;transform:var(--case-side-projection,none);border:0;box-shadow:none}
@media(max-width:880px){.rack .case{--case-seat-x:2.8px;--case-seat-y:-1.4px}}

.rack .case[data-projection-visible=false]>.spine-surface,.rack .case[data-projection-visible=false]>.case-top,.rack .case[data-projection-visible=false]>.case-side{display:none;pointer-events:none}

/* The original Neon Night demo has a midnight-blue J-card on both sides. */
.dynamic-label[data-edition=neon][data-cover-mode=full]{--print-ink:#fff1df;--print-band:#13203b}
.dynamic-label[data-edition=neon][data-cover-mode=full]:before{background:#13203b;opacity:.95;border-bottom-color:#e77bbe}
.dynamic-label[data-edition=neon][data-cover-mode=full] .custom-title,.dynamic-label[data-edition=neon][data-cover-mode=full] .print-artist{color:var(--print-ink)}
.dynamic-label[data-edition=neon][data-cover-mode=full] .side-mark,.dynamic-label[data-edition=neon][data-cover-mode=full] .back-facts{background:#13203b;color:var(--print-ink);border-color:#84cde9}
.dynamic-label[data-edition=neon][data-cover-mode=full] .print-outline{stroke:#84cde9}
.rack .case[data-edition=neon] .spine-paper{background-color:#13203b;color:#fff1df}
.rack .case[data-edition=neon] .spine-detail{color:#e7b9d7}

/* Full-art A sides print directly on the cover; B keeps its information stock. */
.dynamic-label[data-cover-mode=full][data-side=A]:before,.dynamic-label[data-cover-mode=full][data-side=A]:after{display:none}
.dynamic-label[data-cover-mode=full][data-side=A] .custom-title,.dynamic-label[data-cover-mode=full][data-side=A] .print-artist{color:var(--cover-top-ink,#fff);text-shadow:-.35px 0 var(--cover-top-edge,#000b),.35px 0 var(--cover-top-edge,#000b),0 -.35px var(--cover-top-edge,#000b),0 .35px var(--cover-top-edge,#000b)}
.dynamic-label[data-cover-mode=full][data-side=A] .print-footer,.dynamic-label[data-cover-mode=full][data-side=A] .print-stereo{color:var(--cover-bottom-ink,#fff);text-shadow:-.35px 0 var(--cover-bottom-edge,#000b),.35px 0 var(--cover-bottom-edge,#000b),0 -.35px var(--cover-bottom-edge,#000b),0 .35px var(--cover-bottom-edge,#000b)}

/* Clear molded lid and base surround an inset J-card, using the same camera. */
.rack .case-top{isolation:isolate;overflow:hidden;border-radius:.6px;background:linear-gradient(90deg,#e8f5f288,#24353f88 2%,#acbabd5c 4%,#d2dfdf38 96%,#172f3988 98%,#f3ffffa6)}
.rack .case-top:before{content:"";position:absolute;inset:5% 1.8% 14%;background:var(--case-cover) center/cover,var(--case-plastic);box-shadow:0 3px 5px #0009;filter:brightness(.8)}
.rack .case-top:after{content:"";position:absolute;inset:0;border-top:4px solid #e6f7f49c;border-bottom:7px solid #c1d1d39c;box-shadow:inset 0 2px #172b36c9,inset 0 -2px #f5ffffc2,inset .6px 0 #fff9,inset -.6px 0 #091c29b3;background:linear-gradient(118deg,#fff0 18%,#fff3 26%,#fff0 28%,#fff0 56%,#effaff54 58%,#fff0 68%);pointer-events:none}
.case-lid-seam{position:absolute;left:1%;right:1%;bottom:9%;height:2px;background:#14232bc4;box-shadow:0 2px #eaffffc4;z-index:1}
.case-lid-rail{position:absolute;top:9%;bottom:19%;width:1%;border:.5px solid #dcf4f39c;box-shadow:inset .5px 0 #182c36b3;background:#aec6c34d;z-index:1}.case-lid-rail.left{left:2.5%}.case-lid-rail.right{right:2.5%}
.rack .case-side{isolation:isolate;overflow:hidden;border-radius:.7px;background:linear-gradient(0deg,#071923bd,#d4e5e380 7%,#8caaaf73 14%,#bccdce4d 45%,#effaff80 48%,#172d3980 54%,#62808766 88%,#f5ffffb3 96%,#1b3038b3)}
.rack .case-side:before{content:"";position:absolute;inset:2px 9% 2.4px 12%;background:linear-gradient(0deg,#081322a6,#fff2),var(--case-plastic);opacity:.52;box-shadow:inset 3px 0 #ffffff80,inset -5px 0 #0005}
.rack .case-side:after{content:"";position:absolute;inset:0;border-left:5px solid #d7edee80;border-right:6px solid #c0d8da9c;border-top:.7px solid #eaffffb3;border-bottom:1px solid #0f222ec4;box-shadow:inset 3px 0 #071e2c99,inset -3px 0 #132631b3,inset 0 -.6px #edffff9c;background:linear-gradient(108deg,#fff0 35%,#fff4 50%,#fff0 60%);pointer-events:none}
.case-split{position:absolute;left:2%;right:3%;top:45%;height:.65px;background:#071a29d1;box-shadow:0 .6px #d6eef0b3;z-index:1}
.case-hinge{position:absolute;left:74%;top:49%;width:16%;height:34%;border:.6px solid #162f3bb3;border-radius:1px;background:linear-gradient(0deg,#18313ebd,#e4f7efc4 33%,#8faeb98c 55%,#283f4cb3);box-shadow:inset 3px 0 #fff8,inset -3px 0 #061b2680;z-index:2}
.case-catch{position:absolute;left:9%;top:37%;width:12%;height:21%;border:.5px solid #d4eae9b3;border-radius:.5px;background:#879fa97a;box-shadow:inset 0 -.6px #0b2333b3;z-index:2}

/* A small brand signature only in the active listening view. */
.corner-logo{position:fixed;left:max(24px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));width:140px;aspect-ratio:3/1;background:var(--ink);-webkit-mask:url("assets/logo-buy-me-a-walkman-v2.png") center/contain no-repeat;mask:url("assets/logo-buy-me-a-walkman-v2.png") center/contain no-repeat;z-index:90;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 180ms}
body:not(.browsing):has(.machine.playing) .corner-logo{opacity:.88;visibility:visible}
@media(max-width:600px){.corner-logo{left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:112px}}
@media(prefers-reduced-motion:reduce){.corner-logo{transition:none}}

/* The window, winding tape and backplate share a single generated photograph. */
.dynamic-label{mask:url(assets/album-label-mask.png) center/100% 100% no-repeat,linear-gradient(#000,#000) center/76% 76% no-repeat;-webkit-mask:url(assets/album-label-mask.png) center/100% 100% no-repeat,linear-gradient(#000,#000) center/76% 76% no-repeat}
.dynamic-label .tape-window{display:none}
.reel-well{position:absolute;width:272px;height:91px;z-index:40;pointer-events:none}
.reel-assembly{position:absolute;left:-17.75px;top:-5px;width:308.424px;height:102.808px}
.reel-assembly-art{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(9.372px 18.034px 10.508px 17.75px round 41.464px)}
.unified-hub{position:absolute;width:51.688px;height:51.688px;border-radius:50%;background-image:url(assets/reel-module-unified.png);background-size:286.394px 95.465px;background-repeat:no-repeat;transform-origin:center}
.unified-hub-left{left:44.02px;top:26.128px;background-position:-40.085px -19.647px}
.unified-hub-right{left:215.272px;top:26.128px;background-position:-196.599px -19.647px;animation-duration:4.1s}
.print-details .window-scale{display:none}

/* Apple Music extends the existing music-library panel. */
#apple-music{width:min(760px,calc(100vw - 32px))}
#apple-feedback{font-size:14px;line-height:1.6;color:#5b5b57;overflow-wrap:anywhere}
#apple-feedback[data-error=true]{color:#ab1830}
.apple-region{display:flex;align-items:center;gap:12px;font-size:14px;margin:12px 0;color:#53534f}
.apple-region select{max-width:65%;padding:8px 12px;border:1px solid #d6d6d1;border-radius:8px;background:#fff;color:#282824;font:inherit}
#apple-music .cloud-row-info strong{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
#apple-music .cloud-account{flex-wrap:wrap;gap:8px 14px}
#apple-music .cloud-row-info{min-width:0}
#apple-music .cloud-result-heading{flex-wrap:wrap;gap:8px}
#apple-music .cloud-row button{flex-shrink:0}

.music-providers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}
.music-providers :is(#netease-open,#apple-open){height:100%;margin:0;font-size:18px;padding:20px;min-width:0}
.music-providers :is(#netease-open,#apple-open) span{line-height:1.6}
@media(max-width:540px){.music-providers{grid-template-columns:1fr;gap:12px}.music-providers :is(#netease-open,#apple-open){font-size:18px;padding:18px}}
.apple-region select:focus-visible{outline:2px solid #df001b;outline-offset:2px}

/* Approved folded paper artwork; live ink is projected onto its front face. */
.rack-region{--rack-name-clearance:48px}
.tape-booklet{bottom:calc(100% + var(--rack-name-clearance))}
.rack-nameplate{position:absolute;left:20%;top:-14px;width:64%;aspect-ratio:1390/482;z-index:5;pointer-events:none;filter:drop-shadow(0 2px 1px #49331f24)}
.rack-nameplate-art{display:block;width:100%;height:100%;overflow:hidden}
.rack-nameplate-front{position:absolute;left:0;top:0;width:300px;height:110px;box-sizing:border-box;padding:0 22px;display:flex;align-items:center;justify-content:center;transform-origin:0 0;overflow:hidden}
#rack-nameplate-title{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#315c85;font:600 42px/1.2 Georgia,'Kaiti SC','STKaiti',serif}
#rack-nameplate-title.long-name{font-size:30px}
@media(max-width:880px){.rack-region{--rack-name-clearance:38px}.rack-nameplate{top:-10px}}

/* Rack navigation follows the volume scale: small marks, generous invisible hit areas. */
.rack-switch-zone{position:absolute;top:42%;width:44px;height:70px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ink);display:grid;place-items:center;touch-action:pan-y;z-index:8;cursor:pointer}
.rack-switch-left{left:-46px}.rack-switch-right{right:-38px}
.rack-switch-zone[hidden]{display:none}
.rack-switch-zone:disabled{cursor:default}
.rack-arrow{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rack-navigation button:disabled{opacity:1}
.rack-switch-zone:disabled .rack-arrow,.rack-navigation button:disabled .rack-arrow{opacity:.23}
/* One hover region bridges the rack, side arrows and lower controls. */
.rack-region{--rack-controls-opacity:0}
.rack-region:before{content:"";position:absolute;inset:0 -46px -34px;z-index:-1}
.rack-region:hover,.rack-region:has(:focus-visible){--rack-controls-opacity:1}
.rack-switch-zone,.rack-foot,.rack-hint,.rack-session-controls{opacity:var(--rack-controls-opacity);transition:opacity 120ms ease-out}
.rack-switch-zone:focus-visible{outline:1px solid var(--muted);outline-offset:-8px}
.rack-session-controls{position:absolute;top:100%;left:0;right:0;text-align:center;font:10px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;color:var(--muted)}
#rack-resume{display:block;margin:4px auto;font-size:11px;padding:4px 8px}#rack-resume[hidden]{display:none}
.rack-empty{position:absolute;left:10%;right:15%;top:43%;padding:6px;background:#fff9;text-align:center;font-size:10px;color:#554a40;z-index:3}
.case[data-queue-state="upcoming"]{opacity:.62}.case[data-queue-state="current"] .spine-catalog:before{content:'▶';font-size:9px}
.rack-manage-row{display:flex;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.rack-manage-row>div{flex:1;min-width:0}.rack-manage-row strong{display:block;overflow-wrap:anywhere}.rack-manage-row small{display:block;color:var(--muted);margin-top:5px}
#rack-manager .text-button{white-space:nowrap;font-size:14px}#rack-manager-count{margin-left:12px;color:var(--muted);font-weight:400;font-size:14px}
#racks-open{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
#rack-editor{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
#rack-editor-name,#rack-import-name,#rack-import-target{display:block;width:100%;padding:12px;margin:8px 0 16px;box-sizing:border-box;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;font:inherit}
#rack-import-name[hidden]{display:none}.rack-edit-track{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.rack-edit-track>span{flex:1;min-width:0;overflow-wrap:anywhere}.rack-edit-track button{flex-shrink:0}
.rack-editor-pager{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.rack-editor-pager button{font:inherit;padding:8px;background:transparent;color:var(--ink);border:0}
#rack-limit{color:#ae3c2f;font-size:14px}#rack-import-replace-wrap{font-size:14px;line-height:1.6;display:block;margin:12px 0}#rack-import-replace-wrap[hidden]{display:none}
@media(hover:none){.rack-region{--rack-controls-opacity:1}}
@media(max-width:880px){.rack-switch-left{left:-32px}.rack-switch-right{right:-8px}.rack-switch-zone{width:44px;min-height:70px}.rack-manage-row{gap:8px}.rack-edit-track{flex-wrap:wrap}.rack-edit-track>span{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.rack-switch-zone,.rack-foot,.rack-hint,.rack-session-controls{transition:none}}