:root{color:#2c2c2c;background:#f3f3f1;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:#f3f3f1}button,input{font:inherit;color:inherit}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(ellipse at 28% 42%,#e7e8ea,#d5d7da 46%,#b7bcc1);-webkit-user-select:none;user-select:none}.cd-stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;touch-action:none}.cd-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}.app[data-ready] .cd-canvas{opacity:1}.rack{pointer-events:none}.rack .rack-view{pointer-events:auto}.fail{position:absolute;top:42%;left:50%;transform:translate(-50%);z-index:5;margin:0;color:#f4f1eab3}.top,.rack,.hint,.dock{z-index:4;transition:opacity .6s ease}.app:not([data-ready]) .top,.app:not([data-ready]) .rack,.app:not([data-ready]) .hint,.app:not([data-ready]) .dock{opacity:0}.app:not([data-case]) .dock{opacity:0;pointer-events:none}.top{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px}.mark{margin:0;font-size:14px;letter-spacing:.14em;color:#f4f1ea8c}.finder{display:flex;align-items:center;gap:8px;width:min(420px,46vw);height:36px;padding:0 14px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.08)}.finder span{opacity:.55}.finder input{flex:1;width:0;min-width:0;border:0;outline:none;background:transparent;font-size:13px}.finder input::placeholder{color:#f4f1ea6b}.listen{padding:7px 12px;border-radius:999px;background:#f4f1ea;color:#111;text-decoration:none;font-size:12px;white-space:nowrap}.listen.quiet{background:transparent;color:#f4f1ea73}.rack{position:absolute;top:0;right:0;bottom:0;left:0;transform:none;overflow:visible}.rack-view{position:absolute;top:0;right:0;bottom:0;left:0;height:auto}.rack-view canvas{display:block;width:100%;height:100%;cursor:pointer}.rail{height:16px;margin-top:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:auto;scrollbar-color:#6e7378 #e7e7e4}.rail::-webkit-scrollbar{height:14px}.rail::-webkit-scrollbar-track{background:#e7e7e4;border-radius:8px}.rail::-webkit-scrollbar-thumb{background:#6e7378;border:3px solid #e7e7e4;border-radius:8px}.rail-fill{height:1px}.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;overflow:visible;margin:8px 4px 0}.chips button{flex:none;border:0;border-radius:999px;padding:4px 10px;background:transparent;color:#1c1c1c9e;cursor:pointer;font-size:12px}.chips button[data-on]{background:#00000014;color:#1a1a1a}.wood{display:flex;align-items:flex-end;gap:0;height:268px;padding:86px 28px 34px;overflow-x:auto;overflow-y:hidden;border-radius:18px;perspective:1600px;perspective-origin:110% 18%;background:#3e4349;box-shadow:0 26px 44px #0000008c,inset 0 16px #2b3035,inset 0 -26px #2a2e33,inset 14px 0 #32373c,inset -14px 0 #32373c;scrollbar-width:auto;scrollbar-color:#f4f1ea #2a2e33}.wood::-webkit-scrollbar{height:14px}.wood::-webkit-scrollbar-track{background:#2a2e33;border-radius:8px}.wood::-webkit-scrollbar-thumb{background:#f4f1ea;border:3px solid #2a2e33;border-radius:8px}.spine{position:relative;flex:none;width:36px;height:140px;margin:0 -10px 0 0;padding:0;border:0;background:transparent;cursor:pointer;transform:rotateX(18deg) rotateY(-26deg);transform-origin:center bottom;transform-style:preserve-3d;transition:transform .34s cubic-bezier(.2,.8,.2,1)}.slab{display:block;width:58px;height:118px;margin-left:-4px;border-radius:2px;background:linear-gradient(180deg,#e4e7ea 0,#e4e7ea 8px,#b9bec4 8px,#a8aeb4);box-shadow:inset 0 7px #eceff2,inset -5px 0 #8a9096,2px 6px 6px #00000038;position:relative;overflow:hidden;transform-style:preserve-3d}.front{position:absolute;top:3px;right:2px;bottom:2px;left:2px;opacity:0;background:#b7bcc2;transition:opacity .25s ease}.front img{width:100%;height:100%;object-fit:cover;display:block}.spine:hover{z-index:3;transform:rotateX(12deg) rotateY(-22deg) translateY(-64px)}.spine:hover .front{opacity:1}.wood[data-lock] .spine:not([data-on]):hover{transform:rotateX(18deg) rotateY(-26deg)}.wood[data-lock] .spine:not([data-on]):hover .front{opacity:0}.spine[data-on]{z-index:4;transform:rotateX(8deg) rotateY(-14deg) translateY(-72px)}.spine[data-on] .front{opacity:1}.spine[data-on] .slab{box-shadow:inset 0 3px #fff,0 0 0 1px #fffffff2,0 0 14px 2px #fff4d6f2,0 0 26px 6px #ffd68c66,2px 8px 10px #0000004d}.booklet{position:absolute;z-index:5;left:calc(50% - 392px);top:17%;width:286px;height:min(460px,52vh);overflow:auto;overscroll-behavior:contain;padding:22px 16px 16px;border-radius:12px;background:#0a0a0ce6;color:#f6f3ee;box-shadow:inset 0 0 0 1px #ffffff0f}.booklet .kicker,.booklet .artist,.booklet .nolink{margin:0;font-size:12px;color:#f6f3ee8c}.booklet h2{margin:8px 0 6px;font-size:26px;line-height:1.15;letter-spacing:-.03em}.booklet ol{list-style:none;margin:14px 0;padding:0}.booklet li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.35}.booklet li span{color:#f6f3ee66;font-variant-numeric:tabular-nums}.credit,.empty{margin:8px 0 0;font-size:11px;color:#f4f1ea61}.credit a{color:inherit}.hint{position:absolute;left:50%;top:62%;transform:translate(-50%);margin:0;font-size:12px;color:#f4f1ea6b;pointer-events:none}.app[data-case] .hint{top:auto;bottom:292px}.dock{position:absolute;right:28px;bottom:214px;display:flex;gap:6px;padding:6px;border-radius:30px;background:#141416b8;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.tool{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#f4f1ea;cursor:pointer}.tool[data-on]{background:#f4f1ea;color:#111}@media(max-width:860px){.top{width:calc(100% - 24px)}.finder{width:auto;flex:1}.rack{padding:0 10px}.wood{height:180px}.spine{height:140px}.edge{height:132px}.face,.face img,.sleeve-fallback{height:120px}.face img,.sleeve-fallback{width:120px}.spine:hover,.spine[data-on]{width:140px}}