/* 外觀區段：style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');
:root{--paper:#f4f1e9;--ink:#292f2b;--muted:#85867c;--green:#3d5145;--line:#dad9ce}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'Noto Sans TC',sans-serif}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ae7954;outline-offset:4px}button{color:inherit}a{color:inherit}header{height:104px;max-width:1400px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 23px 'Noto Serif TC',serif;letter-spacing:3px}.brand small{display:block;font:9px sans-serif;letter-spacing:3.7px;margin-top:6px}.logo{font-size:45px;letter-spacing:0}.header-note{color:var(--muted);font-size:12px;letter-spacing:2px}.outline{border:1px solid #b8bcb0;background:transparent;border-radius:5px;padding:11px 18px;font-size:12px}.outline:hover{background:#e6e7dc}main{max-width:1240px;margin:auto;padding:50px 36px 35px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--muted);font-weight:600}h1{font:600 33px 'Noto Serif TC',serif;letter-spacing:2px;margin:11px 0}p{line-height:1.8}.intro p{color:var(--muted);font-size:13px;margin:9px 0}.edition{font:11px monospace;letter-spacing:1px;text-align:right}.edition span{display:block;color:var(--muted);font:10px 'Noto Sans TC',sans-serif;margin-top:10px;letter-spacing:2px}.studio{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;padding:30px;background:#ebe9df;border:1px solid #dfdfd3;border-radius:12px}.machine-top{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1.5px;color:#737a6e;padding:1px 3px 15px}.speed{color:#53614f}.deck{position:relative;aspect-ratio:1.29;border-radius:8px;background:repeating-linear-gradient(1deg,transparent 0 3px,#735a4410 3px 4px),linear-gradient(110deg,#c4a582,#ddc4a4 42%,#b5916e);box-shadow:0 10px 0 #a38261,0 14px 0 #74614c,0 22px 25px #30291c30,inset 0 1px 1px #ffffff80;overflow:hidden}.platter{position:absolute;width:71%;aspect-ratio:1;left:5%;top:7%;border-radius:50%;background:linear-gradient(110deg,#7f827e,#d5d6cb,#585c58);padding:7px;box-shadow:2px 6px 10px #33291c65}.record{width:100%;height:100%;position:relative;border-radius:50%;background:repeating-radial-gradient(circle,#171b1a 0px,#171b1a 2px,#343735 2.5px,#171b1a 3.5px);box-shadow:inset 0 0 0 3px #101311}.record:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,#ffffff1a 45deg,transparent 75deg,transparent 175deg,#ffffff15 220deg,transparent 255deg)}.record-label{position:absolute;inset:32%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center;background:#a86146;color:#f7e9cf;border-radius:50%;padding:12px;font:6px sans-serif;letter-spacing:1px;overflow:hidden;background-position:center;background-size:cover}.record-label strong{font:600 clamp(8px,1vw,14px) 'Noto Serif TC',serif;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.record-label.photo>*{visibility:hidden}.spindle{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:linear-gradient(45deg,#6f746d,#efeee6);box-shadow:0 1px 3px #0008}.tonearm{position:absolute;right:10%;top:12%;height:65%;width:13%;transform-origin:50% 10%;transform:rotate(-12deg);transition:transform 1.2s ease;filter:drop-shadow(4px 5px 3px #30271955)}.tonearm.engaged{transform:rotate(8deg)}.arm-bar{position:absolute;left:42%;top:9%;height:77%;width:12%;border-radius:4px;background:linear-gradient(90deg,#666e69,#eeeede 50%,#7d827c)}.pivot{position:absolute;top:0;left:18%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#939b93 0 17%,#353d39 20% 40%,#949b92 44% 55%,#4c544d 60%);box-shadow:0 2px 4px #0005}.cartridge{position:absolute;left:30%;top:82%;width:38%;height:15%;border-radius:2px;background:linear-gradient(90deg,#2a302c,#586052,#232a24);border-bottom:5px solid #ba7654}.deck-sign{position:absolute;bottom:6%;left:6%;font:italic 8px Georgia,serif;color:#66523d}.power{position:absolute;right:6%;bottom:6%;font:7px monospace;letter-spacing:1px;display:flex;align-items:center;gap:5px}.power i{width:5px;height:5px;border-radius:50%;background:#5e624f}.power i.on{background:#b9ec8c;box-shadow:0 0 6px #b4e37c}.transport{display:flex;align-items:center;justify-content:center;gap:19px;padding-top:33px;min-height:85px}.icon{border:0;background:transparent;font-size:17px;padding:8px}.play{border:0;background:var(--green);color:#f6f4e9;border-radius:50%;width:47px;height:47px;box-shadow:0 4px 10px #34453722}.play:hover{background:#536a56}.transport-separator{height:22px;width:1px;background:#cbcdc0;margin:0 1px}.text-button{border:0;background:none;color:#64705e;font-size:11px;padding:8px}.text-button:hover{text-decoration:underline}.status{font-size:10px;color:#7b806f;max-width:95px}.listening{padding-top:1px;min-width:0}.now-head{display:flex;justify-content:space-between;align-items:center}.live-badge{border:1px solid #c9cebd;border-radius:20px;padding:4px 8px;color:#6f7c62;font-size:9px}h2{font:600 24px 'Noto Serif TC',serif;letter-spacing:1px}.listening h2{margin:18px 0 6px}.listening>p{margin-top:0;font-size:12px;color:#818477}.video-wrap{margin-top:22px;aspect-ratio:16/9;background:#dfe3d6;border:1px solid #cdd3c2;border-radius:5px;position:relative;overflow:hidden;min-height:200px}.video-wrap iframe,#player{width:100%;height:100%;position:absolute;inset:0}.video-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#edf0e5,#dce0d2);text-align:center;padding:12px}.video-empty[hidden]{display:none}.video-symbol{font-size:30px;color:#687c5d;margin-bottom:7px}.video-empty strong{font-size:12px;font-weight:500}.video-empty p{font-size:10px;color:#7b8573;margin:7px 0 14px}.video-empty .outline{font-size:10px;padding:7px 12px}.timeline{display:flex;gap:10px;align-items:center;margin:18px 0 12px;font:9px monospace;color:#7a8173}.timeline input{width:100%;height:3px;accent-color:var(--green)}.player-bottom{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#777e70}.player-bottom a{text-underline-offset:3px}.listening .player-note{font-size:9px;margin-top:12px;letter-spacing:.2px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:41px 0 22px}.section-heading h2{margin:8px 0 0;font-size:23px}.section-heading h2 span{font:12px monospace;color:#979a8e;vertical-align:middle;margin-left:10px}.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.album{position:relative;min-width:0}.album-select{width:100%;text-align:left;border:0;padding:0;background:none}.cover{position:relative;aspect-ratio:1;overflow:hidden;background:#d4d6bc;box-shadow:3px 4px 0 #deddd3,5px 6px 0 #cacbc0,0 12px 16px #464a3612;transition:transform .25s}.album-select:hover .cover{transform:translateY(-6px) rotate(-2deg)}.album.selected .cover{outline:2px solid #6c7e61;outline-offset:5px}.cover img{height:100%;width:100%;object-fit:contain;background:#232b25;display:block}.art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12%;background:#bb654b;color:#f6edcf}.art:after{content:'';position:absolute;width:65%;height:65%;border:1px solid #e6ce94aa;border-radius:50%;left:18%;top:18%;box-shadow:0 0 0 16px #e6ce9414,0 0 0 32px #e6ce9414}.art.moss{background:#60735b}.art.blue{background:#455e6c}.art .art-name{font:500 clamp(20px,3vw,40px) Georgia,'Noto Serif TC',serif;line-height:1.1;position:relative;z-index:1;white-space:pre-line}.art small{font-size:8px;letter-spacing:2px}.art em{font:italic 10px Georgia,serif}.album-name{display:block;font-size:12px;font-weight:500;margin:14px 22px 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-artist{display:block;color:#898d80;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-remove{position:absolute;right:0;bottom:14px;border:0;background:none;color:#9a9d91;font-size:17px;padding:5px}.add-card{aspect-ratio:1;border:1px dashed #bec3b3;border-radius:3px;background:#eaece211;color:#7b8871;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.add-card span{font-size:28px;font-weight:400}.add-card:hover{background:#e6e9dd}.shelf-note{font-size:10px;color:#93968b;margin-top:25px}footer{max-width:1168px;margin:0 auto;padding:23px 0 32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8b9083}footer>span:first-child{font-family:'Noto Serif TC',serif;color:#4d574c}.muted{font:8px sans-serif;letter-spacing:2px;margin-left:10px}dialog{border:1px solid #d3d5c7;border-radius:12px;padding:30px;background:var(--paper);color:var(--ink);width:min(470px,92vw);max-height:90vh;box-shadow:0 25px 90px #18251a30}dialog::backdrop{background:#1c2c2266;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:23px;margin:8px 0 24px}label{display:block;font-size:12px;margin-top:17px}label input{display:block;margin-top:8px;border:1px solid #ced0c1;background:#fcfbf6;border-radius:5px;padding:12px;width:100%;color:var(--ink)}.field-note{color:#888d7e;font-size:10px;line-height:1.8}.solid{border:0;border-radius:5px;background:var(--green);color:white;width:100%;padding:13px;margin-top:12px}.form-error{color:#9b4b33;font-size:12px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(80px);opacity:0;transition:.3s;background:#344a3d;color:white;padding:13px 23px;border-radius:5px;font-size:12px;z-index:10;max-width:90vw}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#helpDialog p,#helpDialog li{font-size:12px;line-height:1.9;color:#697260}#helpDialog ol{padding-left:20px}.record{animation:spin 7s linear infinite;animation-play-state:paused}.record.spinning{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1400px){main{padding-top:58px}}@media(max-width:850px){header{padding:0 24px;height:84px}.header-note{display:none}main{padding:32px 24px}.studio{gap:25px;padding:22px;grid-template-columns:1fr 1fr}.video-wrap{min-height:180px}.transport{gap:12px}.status{display:none}.shelf{gap:20px;grid-template-columns:repeat(3,1fr)}footer{margin:0 24px}.edition{display:none}h1{font-size:28px}.listening h2{font-size:22px}}@media(max-width:640px){header{padding:0 20px}.brand{font-size:20px}.logo{font-size:37px}.outline{padding:9px 12px}main{padding:28px 20px}.intro{margin-bottom:24px}h1{font-size:26px;letter-spacing:1px}.studio{grid-template-columns:1fr;padding:20px;gap:25px}.machine-top{font-size:7px}.deck{aspect-ratio:1.3}.transport{padding-top:27px}.status{display:block}.listening{border-top:1px solid #d1d5c5;padding-top:24px}.video-wrap{min-height:200px}.shelf{grid-template-columns:repeat(2,1fr);gap:24px 20px}.art .art-name{font-size:30px}.section-heading{margin-top:32px}.section-heading h2{font-size:21px}.section-heading .eyebrow{font-size:8px}.record-label strong{font-size:12px}footer{gap:12px;flex-wrap:wrap}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Progress-controlled pivot arm: the stylus crosses only the groove area. */
.arm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(3px 4px 2px #30271955)}
#tonearm{transition:transform .5s linear}
.needle-readout{display:flex;justify-content:space-between;padding:10px 6px 0;font-size:10px;color:#7b806f;letter-spacing:.5px}
.demo-progress{padding:8px 6px;color:#7b806f;font-size:10px}.demo-progress[hidden]{display:none}.demo-progress label{font-size:10px;margin:0}.demo-progress input{width:100%;accent-color:var(--green);height:4px}.demo-progress span{font-size:9px}
.album-panel{margin-top:24px;padding:25px 30px;background:#eeeee4;border:1px solid #d8ddcf;border-radius:9px}.album-panel[hidden]{display:none}.album-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.album-panel h2{font-size:22px;margin:8px 0}.album-panel p{font-size:11px;color:#7b8573;margin:0}.album-panel ol{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;max-height:330px;overflow:auto}.track-button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid #d8ddcf;background:none;padding:13px 6px;text-align:left;font-size:12px}.track-button:hover{background:#e3e8d8}.track-button.current{background:#dce4d2;color:#344f35}.track-button small{font:10px monospace;color:#8c9582;min-width:23px}.track-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-button em{margin-left:auto;font-size:9px;white-space:nowrap}.album-tag{position:absolute;top:10px;left:10px;padding:5px 9px;background:#f4f1e9ec;border-radius:3px;font-size:9px;letter-spacing:1px}.playlist-art{background:#52684f}.playlist-art .art-name{font-size:25px}.collection .section-heading>div:last-child{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}select,textarea{display:block;width:100%;margin-top:8px;background:#fcfbf6;color:var(--ink);padding:11px;border:1px solid #ced0c1;border-radius:5px;font:inherit}textarea{resize:vertical;line-height:1.7;font-size:12px}#manualFields[hidden],#playlistFields[hidden]{display:none}@media(max-width:640px){.album-panel{padding:20px}.album-panel ol{grid-template-columns:1fr}.collection .section-heading{align-items:flex-start;gap:14px}.collection .section-heading>div:last-child{max-width:160px}.collection .section-heading .outline{font-size:10px}.album-panel-head{align-items:flex-start}.needle-readout{font-size:9px}}
/* Align the title block with the physical deck, after its small equipment header. */
.listening{padding-top:26px}.listening h2{margin-top:0}.listening>p{margin-bottom:0}
@media(max-width:640px){.listening{padding-top:22px}}
/* White plinth, clear hinged cover, illuminated translucent vinyl. */
.turntable-frame{position:relative;padding-top:86px;margin-bottom:12px}
.dust-cover{position:absolute;top:0;left:0;width:100%;height:103px;pointer-events:none;filter:drop-shadow(0 4px 2px #6577780c);z-index:2}
.deck{border-radius:3px;background:linear-gradient(125deg,#fff 0%,#f9fafa 42%,#e9edee 100%);box-shadow:0 9px 0 #d4d8da,0 12px 0 #b9bfc2,0 19px 22px #3a4a4c22,inset 0 0 0 1px #ffffff;isolation:isolate}
.deck::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .7s;background:radial-gradient(ellipse at 40% 52%,var(--glow-83ecf641,#83ecf641) 0%,var(--glow-b1f4fc20,#b1f4fc20) 36%,transparent 64%);pointer-events:none}
.deck.lights-on::before{opacity:1}
.platter{background:linear-gradient(130deg,#dce9e8,#f9fcf8 45%,#cbd8d9);box-shadow:0 2px 0 #c0cdd0,0 5px 9px #3e606324;padding:5px;transition:box-shadow .7s,background .7s}
.record{background:repeating-radial-gradient(circle,transparent 0px,transparent 2px,#71a7ae33 2.5px,transparent 3.5px),radial-gradient(circle,#dbe8e3 0%,#c4dfe0 44%,#c3dcdd 80%,#d9e5df 100%);box-shadow:inset 0 0 0 2px #f7ffff96,inset 0 0 25px #9fc9ce44;transition:background-color .7s,box-shadow .7s}
.record::before{background:conic-gradient(from 12deg,#ffffff03 0deg,#ffffff80 44deg,#ffffff03 90deg,#ffffff05 170deg,#efffff60 230deg,transparent 285deg)}
.record::after{content:'';position:absolute;inset:19%;border-radius:50%;box-shadow:0 0 20px 6px #e5ffff00,inset 0 0 22px #e5ffff00;pointer-events:none;transition:box-shadow .7s}
.lights-on .platter{background:linear-gradient(130deg,var(--glow-f3f0d5,#f3f0d5),var(--glow-f3fff6,#f3fff6),var(--glow-d7e8db,#d7e8db));box-shadow:0 0 2px 1px var(--glow-ffedba,#ffedba),0 0 22px 4px var(--glow-8deaf355,#8deaf355),0 6px 12px var(--glow-4a7f7b26,#4a7f7b26)}
.lights-on .record{background:repeating-radial-gradient(circle,transparent 0px,transparent 2px,var(--glow-55b5c024,#55b5c024) 2.5px,transparent 3.5px),radial-gradient(circle,var(--glow-f0ffff,#f0ffff) 0%,var(--glow-c0f8fb,#c0f8fb) 30%,var(--glow-9cdee5,#9cdee5) 52%,var(--glow-b5e9ed,#b5e9ed) 74%,var(--glow-b9dfe0,#b9dfe0) 100%);box-shadow:inset 0 0 0 2px var(--glow-dcffff,#dcffff),inset 0 0 28px var(--glow-efffff,#efffff),0 0 18px var(--glow-9cf5fb55,#9cf5fb55)}
.lights-on .record::after{box-shadow:0 0 16px 5px var(--glow-dbffffa8,#dbffffa8),inset 0 0 20px var(--glow-ecffffad,#ecffffad)}
.record-label{inset:38%;z-index:1;border:2px solid var(--glow-d6f6f3,#d6f6f3);padding:7px;box-shadow:0 0 0 4px var(--glow-ffffff26,#ffffff26),0 0 15px var(--glow-e3ffff55,#e3ffff55)}
.record-label span{font-size:4px;letter-spacing:.5px}.record-label strong{font-size:9px}.record-label.photo{border:2px solid var(--glow-c2ecec,#c2ecec)}
.spindle{z-index:3;width:7px;height:7px;left:calc(50% - 3.5px);top:calc(50% - 3.5px);background:linear-gradient(45deg,#646d72,#fafbff)}
.arm-svg{z-index:3;filter:drop-shadow(2px 4px 2px #303f4450)}
.deck-sign{left:5%;bottom:7%;font:italic 16px 'Noto Serif TC',serif;color:#7a878b;letter-spacing:1px}.deck-sign small{display:block;font:5px sans-serif;letter-spacing:1.5px;margin-top:4px;color:#a0aaad}
.power{right:15%;bottom:8%;color:var(--glow-7a888c,#7a888c);font-size:7px}.power i.on{background:var(--glow-a2dce7,#a2dce7);box-shadow:0 0 5px var(--glow-69d7f4,#69d7f4)}
.lamp-switch{position:absolute;right:4%;bottom:5%;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:5px;color:#78878b;font-size:7px;z-index:4;padding:3px 5px}
.lamp-knob{display:block;position:relative;width:26px;height:26px;border-radius:50%;background:conic-gradient(from 20deg,#727d83,#e4e8e9,#68757b,#b6bec2,#727d83);box-shadow:0 2px 3px #31424c30,inset 0 0 0 2px #d2d8da}
.lamp-knob::after{content:'';position:absolute;left:12px;top:3px;width:2px;height:7px;background:#4c5c62;transform-origin:1px 10px;transform:rotate(-40deg);transition:transform .35s}
.lights-on .lamp-knob::after{transform:rotate(40deg)}
.lamp-switch::before{content:'';width:4px;height:4px;position:absolute;right:8px;top:-4px;background:var(--glow-b8c3c6,#b8c3c6);border-radius:50%;transition:.5s}.lights-on .lamp-switch::before{background:var(--glow-67dbeb,#67dbeb);box-shadow:0 0 5px var(--glow-49d1e6,#49d1e6)}
.feet{height:7px;position:absolute;bottom:-18px;left:8%;right:8%;display:flex;justify-content:space-between;z-index:-1}.feet i{width:38px;height:7px;border-radius:0 0 4px 4px;background:#78858b}
.listening{padding-top:112px}.machine-top{color:#819295}.speed{color:#6d888d}
@media(max-width:850px){.turntable-frame{padding-top:66px}.dust-cover{height:83px}.listening{padding-top:92px}.lamp-knob{width:23px;height:23px}.lamp-knob::after{left:11px}.deck-sign{font-size:13px}.lamp-switch{font-size:6px}}
@media(max-width:640px){.turntable-frame{padding-top:70px}.dust-cover{height:87px}.listening{padding-top:22px}.record-label strong{font-size:8px}.record-label span{font-size:4px}}
/* Full-bleed square sleeves, with optional user-selected artwork and crop. */
.cover img{object-fit:cover;transform:scale(1);display:block;background:#dce1d7}
.edit-cover{display:block;margin-top:8px;padding:4px 0;border:0;background:none;color:#6d7d68;font-size:10px;text-underline-offset:3px}.edit-cover:hover{text-decoration:underline}.album-remove{bottom:16px}
.cover-edit-name{font-size:12px;color:#7a8574;margin:-10px 0 16px}.cover-preview{position:relative;width:min(100%,280px);aspect-ratio:1;margin:0 auto 17px;background:#dfe4d9;overflow:hidden;border:1px solid #bdc7b5;box-shadow:4px 5px 0 #d3d9ca}.cover-preview img{width:100%;height:100%;display:block;object-fit:cover}.cover-preview img[hidden]{display:none}.cover-preview>span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#78866f}.cover-preview>span[hidden]{display:none}.cover-source-actions{display:flex;justify-content:center;gap:12px;align-items:center}#coverDialog label{display:flex;justify-content:space-between;margin-top:12px;font-size:11px}#coverDialog input[type=range]{width:100%;accent-color:var(--green);height:5px;margin:12px 0}#coverDialog .solid:disabled{opacity:.5;cursor:wait}
/* Lid-free plinth; retain alignment with the title block. */
.turntable-frame{padding-top:0}.listening{padding-top:26px}
@media(max-width:850px){.turntable-frame{padding-top:0}.listening{padding-top:26px}}
@media(max-width:640px){.listening{padding-top:22px}}
.record-label.photo>.disc-cover{visibility:visible;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.album-scan-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.title-scan-status{min-height:0;font-size:11px;color:#6b7c61;margin-top:14px!important}.title-scan-status:empty{display:none}#scanTitles:disabled{opacity:.5;cursor:wait}.track-button span{white-space:normal;overflow-wrap:anywhere;line-height:1.65}.track-button{align-items:flex-start}
@media(max-width:640px){.album-scan-tools{max-width:145px;gap:4px}}

.needle-readout{justify-content:flex-start;gap:9px}.light-palette{display:flex;align-items:center;gap:10px;padding:15px 6px 0}.light-palette>span{font-size:10px;color:#7b806f;margin-right:3px}.light-swatch{position:relative;width:25px;height:25px;padding:0;border-radius:50%;background:var(--swatch);border:3px solid var(--paper);box-shadow:0 0 0 1px #c8cec0}.light-swatch:hover{box-shadow:0 0 0 2px #9aa88d}.light-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #5f7458}.light-swatch[aria-pressed=true]::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#4e665a}.light-swatch:focus-visible{outline:3px solid #647b5b;outline-offset:4px}
.header-actions{display:flex;gap:10px;align-items:center}.header-actions #headerAlbum{background:#3d5145;border-color:#3d5145;color:#f4f1e9}.header-actions #headerAlbum:hover{background:#526c5b}@media(max-width:640px){header{height:auto;min-height:84px;flex-wrap:wrap;gap:15px;padding:17px 20px}.header-actions{gap:7px;flex-wrap:wrap}.header-actions .outline{font-size:11px;padding:9px 10px}}
.lyrics-panel{margin-top:24px;border:1px solid #d8ddcf;border-radius:9px;background:#eeeee4;padding:25px 30px}.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.lyrics-heading h2{font-size:22px;margin:8px 0}.lyrics-heading .live-badge{font:9px 'Noto Sans TC',sans-serif;letter-spacing:0;margin-left:8px;vertical-align:middle}#lyricsContent[hidden],.lyrics-controls[hidden]{display:none}#lyricsStatus{font-size:12px;color:#708067;line-height:1.8;margin:10px 0 16px}.lyrics-search{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:end}.lyrics-search label{margin:0;font-size:11px;color:#6d7965}.lyrics-search input{padding:10px;font-size:12px}.lyrics-search button{height:39px}.lyrics-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:18px 0 4px}.lyrics-version{flex:1 1 280px;font-size:10px;margin:0;color:#78816f}.lyrics-version select{font-size:11px;padding:9px;max-width:100%}.lyrics-offset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10px;color:#718066}.lyrics-offset .outline{padding:7px 9px;font-size:10px}.lyrics-offset output{min-width:65px;text-align:center}.lyrics-follow{display:flex;align-items:center;gap:7px;font-size:10px;color:#78816f;margin:0}.lyrics-follow input{width:auto;margin:0;accent-color:var(--green)}.lyrics-window{position:relative;height:255px;overflow:auto;margin-top:20px;padding:22px 18px;background:#e6e9de;border-radius:6px;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c0cbb4 transparent}.lyric-line{font-size:16px;line-height:1.9;margin:0;padding:9px 10px;color:#8a9580;transition:color .2s,background .2s}.lyric-line.is-current{color:#31492f;font-weight:600;background:#d5dfc8;border-radius:4px}.plain-lyrics{white-space:pre-wrap;line-height:2.2;font-size:15px;color:#53654b;margin:0}.lyrics-empty{color:#8a9580;text-align:center;font-size:13px;margin:65px 0}.lyrics-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:10px;color:#818d75}.lyrics-footer a{white-space:nowrap;text-underline-offset:3px}.lyrics-search button:disabled{opacity:.6;cursor:wait}@media(max-width:640px){.lyrics-panel{padding:20px}.lyrics-search{grid-template-columns:1fr 1fr}.lyrics-search button{grid-column:1/-1}.lyrics-heading h2{font-size:21px}.lyrics-footer{align-items:flex-start;flex-direction:column}.lyrics-window{height:235px;padding:15px 10px}.lyric-line{font-size:15px}.lyrics-controls{gap:14px}.lyrics-version{flex-basis:100%}}
/* Timed lines are real controls: mouse, touch, Enter and Space can seek. */
button.lyric-line{display:block;width:100%;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer;appearance:none}button.lyric-line:hover{color:#405c37;background:#dee5d4;border-radius:4px}button.lyric-line.is-current{background:#d5dfc8;color:#31492f}button.lyric-line:focus-visible{outline:2px solid #647c54;outline-offset:-2px;border-radius:4px}
/* With the lamp off, the record is smoke-black translucent acrylic. */
.deck:not(.lights-on) .platter{background:linear-gradient(130deg,#d2d5d6,#e9ebeb 48%,#b9bec1);box-shadow:0 2px 0 #a9b0b3,0 5px 10px #2631392a}
.deck:not(.lights-on) .record{background:repeating-radial-gradient(circle,transparent 0px,transparent 2px,#dce1e421 2.5px,transparent 3.5px),radial-gradient(circle,#24292ed4 0%,#3c4247c9 32%,#252b30de 56%,#343b40ce 82%,#4a5356b8 100%);box-shadow:inset 0 0 0 2px #bfc8cb70,inset 0 0 25px #0f151a44,0 2px 5px #26313933}
.deck:not(.lights-on) .record::before{background:conic-gradient(from 12deg,#ffffff00 0deg,#eef2f326 44deg,#ffffff00 90deg,#ffffff00 170deg,#e5edef1f 230deg,transparent 285deg)}
.deck:not(.lights-on) .record::after{box-shadow:none}
.deck:not(.lights-on) .record-label{border-color:#cbd4d670;box-shadow:0 0 0 3px #ffffff12}


/* 外觀區段：room.css */
/* Two rooms: a tactile sleeve browser, and a focused turntable. */
:root{--paper:#f4f1e9;--ink:#292f2b;--muted:#85867c;--green:#3d5145;--room-hue:230;--room-art:none}
[hidden]{display:none!important}body{min-height:100vh}body::before{content:'';position:fixed;inset:-100px;background-image:var(--room-art);background-position:center;background-size:cover;filter:blur(90px) saturate(.7);opacity:0;pointer-events:none;z-index:-1;transition:opacity .8s}body.player-mode{background:var(--paper)}body.player-mode::before{opacity:0}header{height:88px;max-width:1600px;padding:0 5%;border-color:#646b6124}.brand{font-size:21px}.brand .logo{font-size:36px}.view-nav{display:flex;gap:24px}.view-nav button{border:0;background:none;color:#93958c;padding:12px 2px;font-size:12px;letter-spacing:1px}.view-nav button[aria-current]{color:#293d32;border-bottom:2px solid #40594a}.view-nav span{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:6px;background:#a9afa6}.music-playing .view-nav span{background:#5b815f;box-shadow:0 0 8px #6f9d7d}main{max-width:1440px;padding:45px 5% 40px}.intro{margin-bottom:30px}.intro h1{font-size:36px;font-weight:500;letter-spacing:1px}.intro p{font-size:12px}.edition{opacity:.7}.collection>.section-heading{margin:0 0 24px;border-bottom:1px solid #535b4c22;padding-bottom:18px}.collection>.section-heading h2{font-size:18px}.collection .section-heading .eyebrow{display:none}.collection-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:55px}.catalog{border-right:1px solid #535b4c22;padding-right:25px}.catalog-caption{font-size:11px;letter-spacing:1px;display:flex;justify-content:space-between;margin:5px 0 16px;color:#586452}.catalog-caption span{font-size:10px;color:#92988c;letter-spacing:0}.shelf{display:flex;flex-direction:column;gap:0;max-height:620px;overflow:auto;padding:4px 8px 8px 0;scrollbar-width:thin}.shelf .album{padding:12px 8px 15px;border-bottom:1px solid #59634e15;min-height:89px;border-radius:5px}.shelf .album.browsing{background:#e2e5dbb0}.shelf .album-select{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:25px 20px;column-gap:15px;align-items:center}.shelf .cover{grid-row:1/3;width:52px;height:52px;box-shadow:2px 2px 0 #58644e20}.shelf .album.selected .cover{outline:0}.shelf .album-select:hover .cover{transform:translateY(-2px)}.shelf .album-name{font-size:12px;margin:0;white-space:nowrap}.shelf .album-artist{font-size:10px}.shelf .album-tag{display:none}.shelf .album-remove{right:5px;bottom:2px;font-size:17px}.shelf .edit-cover{margin:5px 0 0 67px;font-size:9px}.shelf .art{padding:5px}.shelf .art small,.shelf .art em{display:none}.shelf .art .art-name{font-size:12px}.shelf .add-card{aspect-ratio:auto;min-height:65px;margin-top:16px;flex-direction:row;font-size:10px}.shelf .add-card span{font-size:20px}.crate-browser{min-width:0;text-align:center;position:relative}.crate-stage{position:relative;height:460px;perspective:1000px;isolation:isolate;touch-action:pan-x;outline-offset:5px}.crate-stage::after{content:'';position:absolute;bottom:4px;left:14%;right:14%;height:30px;background:#3b342c20;border-radius:50%;filter:blur(18px);z-index:-1}.crate-sleeve{position:absolute;width:min(340px,65%);aspect-ratio:1;left:50%;top:44px;padding:0;border:1px solid #ffffff80;overflow:hidden;border-radius:1px;transform-origin:50% 100%;transform:translateX(-50%) translateY(calc(var(--offset)*38px)) translateZ(calc(var(--depth)*-90px)) rotateX(calc(16deg + var(--depth)*5deg));box-shadow:0 2px 0 #ffffffe6,0 5px 0 #7b796d66,0 22px 30px #242b3226;background:hsl(var(--sleeve-hue) 20% 44%);transition:transform .55s cubic-bezier(.2,.75,.2,1),opacity .45s;opacity:calc(1 - var(--depth)*.15);will-change:transform}.crate-sleeve.is-focused{transform:translateX(-50%) translateY(90px) translateZ(75px) rotateX(-9deg);opacity:1;box-shadow:0 2px 0 #ffffffe6,0 5px 0 #7b796d66,0 30px 38px #242b3230}.crate-sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#46554a}.sleeve-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;padding:10%;background:radial-gradient(circle at 70% 40%,#ffffff12,transparent 65%),hsl(var(--sleeve-hue) 20% 44%);color:#f4eddb}.sleeve-fallback::after{content:'';position:absolute;inset:13%;border:1px solid #eee2bc55;border-radius:50%}.sleeve-fallback small{font-size:8px;letter-spacing:2px}.sleeve-fallback strong{font:500 35px 'Noto Serif TC',serif;line-height:1.3;z-index:1}.sleeve-fallback span{font-size:10px;letter-spacing:1px}.sleeve-edge{position:absolute;top:0;left:0;right:0;text-align:left;background:#151b225c;color:#fff;padding:5px 10px;font:8px monospace;white-space:nowrap;overflow:hidden;letter-spacing:1px}.crate-empty{position:absolute;inset:45px 20% 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;border:1px dashed #8e9985;background:#eef0e744;transform:rotate(-5deg);border-radius:2px;color:#63725e}.crate-empty>span{font-size:45px;font-weight:300}.crate-empty strong{font:500 16px 'Noto Serif TC',serif}.crate-empty small{font-size:11px}.crate-caption{min-height:93px;position:relative;z-index:30}.crate-caption h2{font-size:23px;margin:12px 0 4px;letter-spacing:.5px}.crate-caption p{font-size:11px;color:#7c8475;margin:0}.crate-controls{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:16px}.crate-controls .solid{width:170px;margin:0;border-radius:30px;font-size:12px;letter-spacing:1px;padding:14px 20px}.round-control{width:40px;height:40px;border:1px solid #bdc4b5;border-radius:50%;background:transparent;color:#56634e}.round-control:disabled{opacity:.25;cursor:default}.gesture-note{font-size:9px;letter-spacing:1px;color:#92998a;margin:18px 0}.player-nav{display:flex;align-items:center;justify-content:space-between;margin:-10px 0 25px}.player-nav .text-button{font-size:12px}.player-nav .eyebrow{letter-spacing:3px}.studio{grid-template-columns:1.4fr 1fr;padding:0;background:none;border:0;gap:55px;align-items:center}.machine-side{min-width:0}.machine-top{padding:0 10px 20px;opacity:.6}.turntable-frame{padding:0;perspective:none}.deck{background:none!important;box-shadow:none!important;border:0!important;border-radius:0;overflow:visible;aspect-ratio:1.29}.deck::before,.deck::after,.deck-foot,.feet{display:none!important}.deck .platter{box-shadow:0 15px 25px #222a342a!important;padding:3px;background:#89929980!important}.deck .record-label{inset:37%;box-shadow:0 0 0 2px #fff3!important}.deck .record-label.photo{background:#8f928e}.deck .record-label.photo img{object-fit:cover}.power{display:none}.lamp-switch{right:1%;bottom:4%}.lamp-knob{width:24px;height:24px}.transport{justify-content:flex-start;padding:26px 6% 0;gap:28px;min-height:90px}.transport .play{width:61px;height:46px;border-radius:24px;background:linear-gradient(#383c3c,#171b1a);box-shadow:0 3px 0 #0006,0 0 0 4px #ffffff25;color:#eee;font-size:17px;order:-1}.transport .icon{font-size:19px;border:1px solid #0002;min-width:48px;border-radius:22px;background:#343a3830}.transport-separator{display:none}.transport #demo{margin-left:auto;font-size:10px}.transport .status{display:none}.needle-readout,.light-palette{padding-left:6%}.light-palette{padding-top:18px;gap:12px}.needle-readout{padding-top:17px;font-size:10px}.light-swatch{border-color:#e1e4de;width:23px;height:23px}.light-swatch[aria-pressed=true]::after{inset:6px}.listening{padding:0!important;border:0;align-self:center}.listening h2{font:600 31px 'Noto Sans TC',sans-serif;letter-spacing:-.5px;margin:0 0 7px}.listening>p{font-size:13px;color:#66715e;margin-bottom:25px}.video-wrap{margin-top:25px;border:1px solid #747f7055;border-radius:8px;background:#ffffff33;min-height:200px}.timeline{margin-top:26px;font-size:10px;gap:15px}.timeline input{height:4px}.player-bottom{font-size:10px}.lyrics-panel,.album-panel{background:#f6f5ee66;border-color:#818a7430;backdrop-filter:blur(15px)}.lyrics-panel{margin-top:45px}.lyrics-window{background:#ffffff33}.lyrics-heading h2{font-size:20px}.album-panel{margin-top:25px}footer{max-width:1290px;margin:0 5%;font-size:10px;border-color:#646b6124}.library-mode footer{margin-top:25px}.demo-progress{margin-left:6%}#playerCover{color:#53624c}body:not(.music-playing) #navPlayingDot{box-shadow:none}@media(min-width:1500px){.crate-stage{height:510px}.crate-sleeve{width:380px}.studio{gap:70px}.listening h2{font-size:36px}}
@media(max-width:950px){.collection-layout{grid-template-columns:240px minmax(0,1fr);gap:25px}.catalog{padding-right:15px}.crate-stage{height:410px}.crate-sleeve{width:280px;max-width:80%}.crate-caption h2{font-size:20px}.view-nav{gap:12px}.studio{gap:25px}.transport{gap:15px}.listening h2{font-size:26px}}
@media(max-width:700px){header{height:auto;padding:18px 20px;gap:18px}.view-nav{margin-left:auto}.header-actions{width:100%;justify-content:flex-end}main{padding:25px 20px}.intro h1{font-size:27px}.collection>.section-heading{align-items:flex-start;gap:15px}.section-heading>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end}.collection-layout{grid-template-columns:1fr;gap:25px}.catalog{border:0;padding:0;order:2}.shelf{max-height:300px}.crate-stage{height:400px}.crate-sleeve{width:280px}.crate-caption{min-height:85px}.crate-empty{inset:35px 12%}.studio{grid-template-columns:1fr;gap:30px}.player-nav .eyebrow{display:none}.machine-top{font-size:8px}.transport{justify-content:center}.transport #demo{margin-left:0}.listening h2{font-size:27px}.lyrics-panel{margin-top:30px}.shelf .album-select{grid-template-columns:52px minmax(0,1fr)}.gesture-note{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.crate-sleeve{transition:none;will-change:auto}}

/* Keep sleeve titles below the perspective projection; preserve keyed flip transitions. */
.crate-stage{height:540px}.crate-sleeve{transform:translateX(calc(-50% + var(--offset)*7px)) translateY(calc(90px - var(--rank)*37px)) translateZ(calc(var(--rank)*-48px)) rotateX(calc(12deg + var(--depth)*3deg))}.crate-sleeve.is-focused{transform:translateX(-50%) translateY(90px) translateZ(40px) rotateX(-9deg)}.crate-sleeve img{z-index:2}.sleeve-fallback{z-index:0}.sleeve-edge{z-index:3}.crate-caption{padding-top:8px}
@media(min-width:1500px){.crate-stage{height:600px}}
@media(max-width:950px){.crate-stage{height:470px}}
@media(max-width:700px){.crate-stage{height:460px}}

/* Original cream and forest-green palette, shared by both views. */
body{background:var(--paper);color:var(--ink)}body::before{display:none}
header,.collection>.section-heading,.catalog,footer{border-color:var(--line)}
.view-nav button{color:var(--muted)}.view-nav button[aria-current]{color:var(--green);border-color:var(--green)}
.shelf .album.browsing{background:#e6e9dd}.catalog-caption{color:#64705e}
.transport .play{background:var(--green);color:#f6f4e9;box-shadow:0 4px 10px #34453722}.transport .play:hover{background:#536a56}
.transport .icon{background:#e6e9dd;border-color:#cbcdc0;color:var(--green)}
.listening>p{color:#818477}.video-wrap{background:#dfe3d6;border-color:#cdd3c2}
.lyrics-panel{background:#eeeee4;border-color:#d8ddcf;backdrop-filter:none}.lyrics-window{background:#e6e9de}
.album-panel{background:#eeeee4;border-color:#d8ddcf;backdrop-filter:none}
.light-swatch{border-color:var(--paper)}

/* The turntable leads; YouTube remains an optional visible playback panel. */
.studio{grid-template-columns:minmax(0,1.85fr) minmax(300px,.8fr);gap:48px;align-items:center}
.listening h2{font-size:28px}.listening .video-wrap{min-height:200px;margin-top:8px}
.video-toggle-row{display:flex;justify-content:flex-end;margin-top:24px}.video-toggle-row .text-button{font-size:10px;padding:8px 0}
body.video-collapsed .listening{align-self:center}body.video-collapsed .video-toggle-row{justify-content:flex-start}
body.video-collapsed .timeline{margin-top:20px}.lyrics-calibrating .lyric-line{cursor:crosshair;background:#e0e6d7}
#lyricsCalibrate[aria-pressed=true]{background:var(--green);color:var(--paper)}
@media(min-width:1450px){.studio{grid-template-columns:minmax(0,2fr) minmax(320px,.85fr);gap:65px}.listening h2{font-size:30px}}
@media(max-width:950px) and (min-width:701px){.studio{grid-template-columns:minmax(0,1.3fr) minmax(270px,1fr);gap:22px}}
@media(max-width:700px){.studio{grid-template-columns:1fr;gap:25px}.listening .video-wrap{min-height:200px}.video-toggle-row{margin-top:14px}}
/* Keep the primary controls within a normal desktop viewport. */
.player-mode main{padding-top:25px}.player-nav{margin-bottom:15px}.machine-top{padding-bottom:10px}
.machine-side{width:100%;max-width:min(100%,calc((100vh - 300px)*1.29));justify-self:center}
@media(max-width:700px){.machine-side{max-width:100%}.player-mode main{padding-top:25px}}
/* Lyrics take the listening column; video becomes a secondary source panel. */
.studio{align-items:start}.listening{padding-top:20px!important}.listening .timeline{margin:18px 0 22px}
.listening .lyrics-panel{margin:0;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}
.listening .lyrics-heading{gap:8px}.listening .lyrics-heading .eyebrow{display:none}.listening .lyrics-heading h2{font-size:16px;letter-spacing:1px;margin:0}.listening .lyrics-heading .text-button{font-size:10px;padding:5px 0}
.listening #lyricsStatus{font-size:10px;line-height:1.6;margin:10px 0;color:#858b7d;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.listening .lyrics-window{height:185px;background:transparent;margin:12px 0 0;padding:10px 0;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);scrollbar-color:#c9cfc0 transparent}
.listening .lyric-line{font-size:17px;line-height:1.7;padding:10px 8px;color:#a0a695}.listening .lyric-line.is-current{background:#e4e9dc;color:#3d5145;font-weight:600}.listening .plain-lyrics{font-size:15px}.listening .lyrics-empty{font-size:12px;margin:45px 0}
.listening .lyrics-footer{margin-top:8px;font-size:9px;gap:6px}.listening .lyrics-footer>span{max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-settings{font-size:10px;color:#7b8472;border-top:1px solid #dad9ce;border-bottom:1px solid #dad9ce;margin:10px 0 0;padding:9px 0}.lyrics-settings summary{cursor:pointer;padding:3px 0;letter-spacing:.5px}.lyrics-settings[open]{padding-bottom:13px}.listening .lyrics-search{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.listening .lyrics-search input{font-size:11px;padding:8px}.listening .lyrics-search button{grid-column:1/-1;height:32px;font-size:10px}.listening .lyrics-controls{gap:12px;margin-top:13px}.listening .lyrics-version{flex-basis:100%}.listening .lyrics-offset{gap:5px}.listening .lyrics-offset .outline{font-size:9px;padding:6px}.listening .lyrics-follow{font-size:9px}
.video-slot{margin-top:24px;min-height:248px;position:relative}.video-dock{padding:0;background:var(--paper);min-width:200px}.video-toggle-row{margin:0 0 5px;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:9px}.video-toggle-row>span{font:8px sans-serif;letter-spacing:2px;color:#92988b}.video-toggle-row .text-button{font-size:9px;padding:4px 0}.listening .video-wrap{margin:0;min-height:200px;width:100%;border:1px solid #d2d5c9;border-radius:4px;aspect-ratio:16/9;background:#dfe3d6}.video-dock .player-bottom{font-size:8px;gap:8px;line-height:1.6;margin-top:8px}.video-dock .player-bottom>span{color:#8a9182}.video-dock .player-bottom a{white-space:nowrap}
.video-dock.is-floating{position:fixed;right:20px;bottom:20px;width:320px;max-width:calc(100vw - 40px);padding:9px 10px 10px;border:1px solid #d2d6c9;border-radius:8px;box-shadow:0 6px 25px #293c2724;z-index:8}.video-dock.is-floating .video-toggle-row{border:0;padding-top:0}.video-dock.is-floating .video-wrap{height:200px;min-height:200px;aspect-ratio:auto}.video-dock.is-floating .player-bottom>span{display:none}.video-dock.is-floating .player-bottom{justify-content:flex-end;margin-top:5px}
@media(min-width:1500px){.listening .lyrics-window{height:250px}}
@media(max-width:950px) and (min-width:701px){.studio{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}.listening .lyric-line{font-size:15px}.listening .lyrics-window{height:195px}}
@media(max-width:700px){.listening{padding-top:0!important}.listening .lyrics-window{height:250px}.video-slot{min-height:260px}.video-dock.is-floating{width:300px;right:12px;bottom:12px;max-width:calc(100vw - 24px)}}
/* A quiet source panel next to the album tracklist. */
.lower-listening{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;margin-top:35px}
.lower-listening .video-slot{width:240px;min-height:250px;margin:0}.lower-listening .album-panel{margin:0;min-width:0}.lower-listening .video-wrap{width:100%;height:200px;min-height:200px;aspect-ratio:auto;margin:0}.lower-listening .video-toggle-row{margin-top:0}.lower-listening .player-bottom{flex-wrap:wrap;font-size:8px}.lower-listening .player-bottom a{margin-left:auto}
.video-dock.is-floating{width:240px}.video-dock.is-floating .video-wrap{height:200px;min-height:200px}
.listening .lyrics-window{height:340px}.listening .lyric-line{font-size:18px}
.record-menu{position:absolute;top:7px;right:3px;z-index:35}.record-menu summary{list-style:none;cursor:pointer;font-size:24px;line-height:24px;text-align:center;width:28px;height:28px;color:#6d7964;border-radius:50%;user-select:none}.record-menu summary::-webkit-details-marker{display:none}.record-menu summary:hover,.record-menu[open] summary{background:#dce3d2;color:#3d5145}.record-menu-actions{position:fixed;width:190px;padding:6px;border:1px solid #cfd6c6;background:#faf8f1;border-radius:7px;box-shadow:0 8px 24px #2b3b2926;z-index:40}.record-menu-actions button{display:block;width:100%;border:0;border-radius:4px;background:none;text-align:left;font-size:11px;padding:10px;color:#52634c}.record-menu-actions button:hover{background:#e5eadc}.record-menu-actions button:disabled{opacity:.35;cursor:default}.record-menu-actions .record-menu-remove{color:#98624d;border-top:1px solid #e0e3d7;border-radius:0;margin-top:3px}
.shelf .album-select{cursor:grab;padding-right:22px;user-select:none}.shelf .album-select:active{cursor:grabbing}.shelf .album-select img{user-select:none;-webkit-user-drag:none}.shelf .album{min-height:85px}.shelf .album.dragging{opacity:.35}.shelf .album.drop-before::before,.shelf .album.drop-after::after{content:'';position:absolute;left:0;right:0;height:3px;border-radius:2px;background:#607a56;z-index:3}.shelf .album.drop-before::before{top:0}.shelf .album.drop-after::after{bottom:0}
@media(max-width:950px){.lower-listening{gap:20px;grid-template-columns:220px minmax(0,1fr)}.lower-listening .video-slot{width:220px}.listening .lyrics-window{height:300px}}
@media(max-width:700px){.lower-listening{grid-template-columns:1fr}.lower-listening .video-slot{width:240px;justify-self:center}.listening .lyrics-window{height:280px}.video-dock.is-floating{width:240px}}

.reorder-ghost{position:fixed;z-index:100;pointer-events:none;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#3d5145;color:#f4f1e9;border-radius:5px;padding:10px 16px;font-size:12px;box-shadow:0 6px 20px #24382733}

/* Real sleeve faces and a ten-pixel paperboard edge in a shared perspective. */
.crate-stage{height:565px;perspective:850px;perspective-origin:52% 42%}
.crate-stage::after{left:18%;right:12%;bottom:28px;height:38px;filter:blur(22px);background:#332d2530;transform:skewX(-18deg)}
.crate-sleeve{overflow:visible;border:0;border-radius:0;transform-style:preserve-3d;backface-visibility:hidden;opacity:1;background:none;box-shadow:none;transform-origin:50% 75%;transform:translateX(calc(-50% + var(--offset)*10px)) translateY(calc(108px - var(--rank)*43px)) translateZ(calc(var(--rank)*-52px)) rotateX(calc(20deg + var(--depth)*3deg)) rotateY(-18deg) rotateZ(-2deg);transition:transform .7s cubic-bezier(.2,.8,.18,1),box-shadow .5s}
.crate-sleeve.is-focused{transform:translateX(-50%) translateY(108px) translateZ(65px) rotateX(-17deg) rotateY(-18deg) rotateZ(-2deg);box-shadow:none}
.sleeve-face{position:absolute;inset:0;display:block;overflow:hidden;transform:translateZ(5px);backface-visibility:hidden;border:1px solid #fff8;background:#e4dfd1;box-shadow:0 0 0 1px #514b3c55,0 10px 20px #26251f26}
.sleeve-face::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 2px 2px 1px #fff6,inset -2px -2px 2px #1115;background:linear-gradient(115deg,#fff2,transparent 30%,transparent 75%,#17140f10)}
.sleeve-face .sleeve-edge{background:linear-gradient(90deg,#181b2280,#181b2233);font-size:8px;letter-spacing:1.2px}
.sleeve-solid-edge{position:absolute;display:block;pointer-events:none;backface-visibility:hidden}
.sleeve-solid-right{left:100%;top:0;width:10px;height:100%;transform-origin:0 50%;transform:translateZ(5px) rotateY(90deg);background:repeating-linear-gradient(90deg,#a29b88 0px,#b5ad99 1px,#d1c8b4 2px,#e0d8c5 3px);border-top:1px solid #e9e1cf;border-bottom:1px solid #776c58}
.sleeve-solid-top{left:0;top:0;width:100%;height:10px;transform-origin:50% 0;transform:translateZ(-5px) rotateX(90deg);background:linear-gradient(#b3ab98,#f0e9d7 50%,#d3cab4);border:1px solid #bcb29b}
.sleeve-solid-bottom{left:0;top:100%;width:100%;height:10px;transform-origin:50% 0;transform:translateZ(5px) rotateX(-90deg);background:repeating-linear-gradient(#8e8470 0px,#d3c9b2 1px,#a99e87 2px);box-shadow:0 14px 22px #24221b44}
.crate-sleeve.is-focused .sleeve-face{box-shadow:0 0 0 1px #514b3c66,18px 30px 30px #2e2b202e}
@media(min-width:1500px){.crate-stage{height:620px}}
@media(max-width:950px){.crate-stage{height:500px}.crate-stage{perspective:780px}}
@media(max-width:700px){.crate-stage{height:480px;perspective:720px}.crate-sleeve{transform:translateX(calc(-50% + var(--offset)*7px)) translateY(calc(95px - var(--rank)*38px)) translateZ(calc(var(--rank)*-45px)) rotateX(23deg) rotateY(-15deg) rotateZ(-2deg)}.crate-sleeve.is-focused{transform:translateX(-50%) translateY(95px) translateZ(45px) rotateX(-15deg) rotateY(-15deg) rotateZ(-2deg)}}
@media(prefers-reduced-motion:reduce){.crate-sleeve{transition:none}}

/* A vertical record-file browser: rear sleeves stand up, passed sleeves fold forward. */
.library-mode main{padding-top:30px}.library-mode .intro{margin-bottom:22px}.library-mode .intro h1{font-size:31px}
.crate-stage{height:640px;perspective:1000px;perspective-origin:50% 48%;overflow:hidden;touch-action:none;cursor:grab;mask-image:linear-gradient(transparent,#000 4%,#000 95%,transparent)}.crate-stage.is-flipping{cursor:grabbing}
.crate-sleeve,.crate-sleeve.is-focused{width:min(350px,72%);top:52%;left:50%;transform-origin:50% 50%;transform:translate(-50%,-50%) translateY(var(--file-y,0px)) translateZ(var(--file-z,0px)) rotateX(var(--file-pitch,0deg));opacity:var(--file-opacity,1);transition:none;box-shadow:none;cursor:inherit;user-select:none}
.crate-sleeve img{-webkit-user-drag:none;user-select:none}.crate-stage::after{bottom:7%;height:35px;left:20%;right:20%;transform:none;background:#342e2526;filter:blur(20px)}
.sleeve-face{box-shadow:0 0 0 1px #514b3c50,0 12px 18px #302c231c}.crate-sleeve.is-focused .sleeve-face{box-shadow:0 0 0 1px #514b3c66,0 18px 26px #302b252b}.sleeve-face::after{background:linear-gradient(180deg,#fff1,transparent 35%,#211c1012);box-shadow:inset 1px 1px 1px #fff7,inset -1px -1px 1px #1114}.sleeve-face .sleeve-edge{font-size:8px}
.crate-caption{padding-top:10px}.crate-empty{transform:none}
@media(min-width:1500px){.crate-stage{height:700px}.crate-sleeve,.crate-sleeve.is-focused{width:380px}}
@media(max-width:950px){.crate-stage{height:580px}.crate-sleeve,.crate-sleeve.is-focused{width:min(310px,82%)}}
@media(max-width:700px){.crate-stage{height:560px;perspective:900px}.crate-sleeve,.crate-sleeve.is-focused{width:min(280px,80%)}.library-mode .intro h1{font-size:26px}}

/* Stand rear sleeves more upright; foreground sleeves fold toward the viewer. */
.crate-sleeve,.crate-sleeve.is-focused{top:58%}

/* Spotify has no video dock. */
.lower-listening{display:block}.lower-listening .album-panel{margin:25px 0}.spotify-connection{font-size:11px;color:#52684f;margin:0 0 14px}.header-actions{align-items:center;gap:8px}#spotifyLogin{margin:0;padding:11px 15px;width:auto;white-space:nowrap}#spotifyLogout[hidden]{display:none}#spotifyAddDialog input{width:100%}#spotifySetup input{width:100%;font-size:12px;padding:9px;box-sizing:border-box}#spotifySetup p{line-height:1.6}

/* Align the listening column with the record instead of centering it vertically. */
@media(min-width:701px){.studio>.listening{align-self:start;padding-top:32px!important}}

.transport{flex-wrap:wrap;gap:16px}.transport .tool-control{display:flex;align-items:center;justify-content:center;width:48px;height:44px;padding:0;border-radius:24px;font-size:20px;background:#e6e9dd;border:1px solid #cbcdc0;color:var(--green)}
.light-picker{position:relative}.light-picker summary{cursor:pointer;list-style:none}.light-picker summary::-webkit-details-marker{display:none}.light-picker[open] summary{box-shadow:0 0 0 2px var(--green)}.light-picker-panel{position:absolute;top:54px;right:0;width:270px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px #28352a25;z-index:60}.light-picker-panel .light-palette{padding:0;display:flex;flex-wrap:wrap;gap:10px}.light-picker-panel .light-palette>span{width:100%}.custom-light-label{display:flex;align-items:center;justify-content:space-between;margin:18px 0;font-size:12px}.custom-light-label input{width:60px;height:34px;border:1px solid var(--line);padding:2px;background:transparent}.light-picker-panel .outline{width:100%}

.transport #openDIY,.transport .light-picker summary{width:auto;min-width:64px;padding:0 14px;font-size:12px;white-space:nowrap}

.now-playing-heading{display:flex;align-items:center;gap:18px;min-width:0}.now-album-cover{width:82px;height:82px;flex:0 0 82px;overflow:hidden;border-radius:5px;background:#dce0d5;box-shadow:0 3px 12px #25352a18}.now-album-cover[hidden]{display:none}.now-album-cover img{width:100%;height:100%;object-fit:cover;display:block}.now-playing-text{min-width:0}.now-playing-text #nowTitle{overflow-wrap:anywhere}.now-playing-text #nowArtist{font-size:13px;color:#818477;line-height:1.6;margin:6px 0 0}@media(max-width:700px){.now-album-cover{width:68px;height:68px;flex-basis:68px}.now-playing-heading{gap:14px}}

@media(min-width:951px){.studio>.listening{margin-left:-24px;width:calc(100% + 24px)}}


/* 外觀區段：custom.css */
.transport{gap:28px}.transport .play,.transport .icon{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:0;transform:none;transition:background .15s}.transport .play{width:61px;height:46px;min-width:61px;border:0;border-radius:24px;background:var(--green);color:#f6f4e9;box-shadow:0 4px 10px #34453722}.transport .icon{width:48px;height:44px;min-width:48px;border:1px solid #cbcdc0;border-radius:22px;background:#e6e9dd;color:var(--green);box-shadow:none}.transport .play:before{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;transform:translate(-40%,-50%)}.music-playing .transport .play:before{width:14px;height:16px;border:0;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 10px,currentColor 10px);transform:translate(-50%,-50%)}.transport .icon:before{content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;background:currentColor;transform:translate(-50%,-50%);clip-path:polygon(0 0,16% 0,16% 44%,100% 0,100% 100%,16% 56%,16% 100%,0 100%)}.transport #next:before{transform:translate(-50%,-50%) rotate(180deg)}.transport button:hover{transform:none}.transport .play:hover{background:#536a56}.transport .icon:hover{background:#dce1d2}.transport button:focus-visible{outline:2px solid #5e7865;outline-offset:4px}
.volume-control{display:flex;align-items:center;gap:12px;margin:18px 6% 0;padding:14px 0;border-top:1px solid #d9dbce}.volume-control label{margin:0;font-size:11px}.volume-control input{width:120px;accent-color:#3d5145;cursor:pointer}.volume-control output{font:11px monospace;min-width:34px;color:#63715f}.volume-control>button:first-child{border:1px solid #cbd0c1;border-radius:50%;width:32px;height:32px;background:#eeeee4;color:#3d5145}.volume-control #openDIY{margin-left:auto}.arm-svg #tonearm{pointer-events:all;cursor:grab;touch-action:none}.arm-svg #tonearm:active{cursor:grabbing}.arm-svg #tonearm:focus-visible{outline:none;filter:drop-shadow(0 0 3px #b8844a)}.deck .record.custom-vinyl{background:repeating-radial-gradient(circle,transparent 0 2px,#ffffff30 2.5px,transparent 3.5px),var(--vinyl-art);box-shadow:inset 0 0 0 2px #ffffff75,inset 0 0 28px #26332f28,0 3px 8px #26332f33}.deck.lights-on .record.custom-vinyl{box-shadow:inset 0 0 0 2px #ffffffa0,inset 0 0 28px #ffffff55,0 0 18px var(--glow-9cf5fb55,#9cf5fb55)}.diy-colors{display:flex;gap:24px}.diy-colors label{flex:1}.diy-colors input{height:48px;padding:4px;cursor:pointer}#vinylPattern{width:100%;padding:12px;margin:8px 0;border:1px solid #ced0c1;border-radius:5px;background:#fcfbf6;color:#3d5145}.diy-actions{display:flex;gap:12px;align-items:center;margin-top:18px}.diy-actions button{flex:1;margin:0}.volume-control input:focus-visible{outline:2px solid #5e7865;outline-offset:4px}

.arm-hint{margin:8px 6% 18px;color:#7b806f;font-size:10px;letter-spacing:.3px}
/* Resin textures are rendered once per design, then rotate with the record. */
.deck .record.custom-vinyl,.deck.lights-on .record.custom-vinyl{background-image:var(--vinyl-art);background-size:100% 100%;background-color:transparent;box-shadow:inset 0 0 0 1px #dce8e8a0,inset 0 0 0 3px #23393c26,0 3px 8px #273c392b}.deck .record.custom-vinyl::before{background:conic-gradient(from 20deg,transparent 0 30deg,#ffffff17 48deg,transparent 68deg 205deg,#ffffff0c 225deg,transparent 245deg);opacity:.6}.deck .record.custom-vinyl::after{inset:1%;box-shadow:none}.deck.lights-on .record.custom-vinyl{box-shadow:inset 0 0 0 1px #f5ffffba,inset 0 0 20px #ffffff16,0 0 15px var(--glow-9cf5fb55,#9cf5fb55)}.deck.lights-on .record.custom-vinyl::after{box-shadow:inset 0 0 18px var(--glow-dbffffa8,#dbffffa8);opacity:.28}
#diyDialog{width:min(860px,94vw);padding:30px 34px}#diyDialog .dialog-head h2{margin-bottom:20px}.diy-workbench{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}.diy-preview-column{text-align:center;min-width:0}.vinyl-preview{width:100%;aspect-ratio:1;border-radius:50%;position:relative;background-size:cover;background-color:#e6e4dc;box-shadow:0 12px 28px #263b321a,inset 0 0 0 1px #b0bfbb88}.preview-label{position:absolute;inset:33.5%;border-radius:50%;background:#e9e1cd;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4f5148;box-shadow:0 0 0 1px #5e69562a}.preview-label>span{font:16px 'Noto Serif TC',serif;letter-spacing:3px}.preview-label>small{font:6px/1.8 sans-serif;letter-spacing:1px;margin-top:7px}.preview-label>i{width:6px;height:6px;border-radius:50%;background:#f7f5ee;margin-top:10px;box-shadow:inset 0 1px 2px #0003}.diy-preview-column>p{font:8px sans-serif;letter-spacing:2px;color:#92968a;margin:25px 0 8px}.diy-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0 20px}.diy-presets button{border:1px solid transparent;padding:7px 3px 5px;background:transparent;border-radius:7px;color:#697362}.diy-presets button[aria-pressed=true]{border-color:#7c8e77;background:#e7e9dd}.diy-presets button:hover{background:#e8e9de}.diy-presets i{display:block;aspect-ratio:1;border-radius:50%;background-color:#e0e2d9;background-size:cover;box-shadow:0 2px 4px #0002}.diy-presets i:after{content:'';display:block;width:28%;height:28%;background:#e9e1cd;border-radius:50%;position:relative;top:36%;left:36%}.diy-presets span{font-size:9px;display:block;margin-top:8px;white-space:nowrap}.diy-settings .diy-colors{gap:14px}.diy-settings label{margin-top:12px}.diy-settings .diy-colors input{height:38px}.diy-settings .diy-slider-label{display:flex;justify-content:space-between;color:#697362;font-size:11px}.diy-slider-label output{font:10px monospace}.diy-settings>input[type=range]{width:100%;accent-color:#3d5145;margin:10px 0 4px;cursor:pointer}.diy-actions{border-top:1px solid #d7dbce;padding-top:20px}.diy-actions .outline{flex:0 0 auto;font-size:11px}.diy-actions .solid{flex:0 0 180px;margin-left:auto}#diyDialog .field-note{margin:0;line-height:1.8}@media(max-width:650px){#diyDialog{padding:22px}.diy-workbench{grid-template-columns:1fr;gap:15px}.vinyl-preview{max-width:240px;margin:auto}.diy-preview-column>p{margin-top:14px}.diy-presets{gap:10px}.diy-actions .solid{flex:1}.preview-label>span{font-size:13px}}
/* Backlight is independent of the texture so every DIY material can be illuminated. */
.deck .record.custom-vinyl::after{inset:0;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 0 33%,var(--glow-c0f8fb,#c0f8fb) 57%,var(--glow-9cdee5,#9cdee5) 84%,#fff 100%);mix-blend-mode:screen;opacity:0;transition:opacity .35s;box-shadow:none}.deck.lights-on .record.custom-vinyl::after{opacity:.52;box-shadow:inset 0 0 32px var(--glow-ecffffad,#ecffffad)}.deck.lights-on .record.custom-vinyl{box-shadow:inset 0 0 0 2px #ffffffaa,0 0 30px var(--glow-9cdee5,#9cdee5),0 0 55px var(--glow-9cf5fb55,#9cf5fb55)}.record.custom-vinyl .record-label{z-index:4}.record.picture-vinyl .record-label{visibility:hidden}.picture-vinyl .preview-label{background:transparent;box-shadow:none}.picture-vinyl .preview-label>span,.picture-vinyl .preview-label>small{visibility:hidden}.picture-vinyl .preview-label>i{position:absolute;top:50%;margin:0}.picture-thumb{background:linear-gradient(140deg,#2b5c73,#c17e7c 48%,#f3d89a)!important}.liquid-cavity{display:none;position:absolute;inset:1%;overflow:hidden;border-radius:50%;z-index:1;pointer-events:none;mask-image:radial-gradient(circle,transparent 0 33%,#000 34% 94%,transparent 95%);box-shadow:inset 0 0 0 3px #e8ffff8c,inset 0 0 20px #72b5c833}.liquid-vinyl>.liquid-cavity{display:block}.liquid-pool{position:absolute;inset:var(--liquid-fill,45%) -25% -30%;border-radius:42% 48% 0 0;background:linear-gradient(175deg,var(--liquid-accent),var(--liquid-color) 35%,var(--liquid-color));opacity:var(--liquid-opacity,.8);box-shadow:inset 0 3px 4px #eaffffbb,0 -2px 8px #21798b33;transform-origin:50% 80%;animation:liquid-sway 5s ease-in-out infinite alternate;animation-play-state:paused}.liquid-pool i{position:absolute;width:70%;height:40%;top:-14%;left:8%;border-radius:50%;background:var(--liquid-color);opacity:.7;animation:liquid-drift 6s ease-in-out infinite alternate;animation-play-state:paused}.liquid-pool i:nth-child(2){left:42%;top:-9%;background:var(--liquid-accent);animation-delay:-3s;opacity:.55}.liquid-pool i:nth-child(3){left:25%;top:20%;background:var(--liquid-accent);filter:blur(5px);opacity:.25;animation-delay:-1s}.liquid-cavity>b{position:absolute;left:20%;top:72%;width:3%;height:3%;border:1px solid #ffffffb0;border-radius:50%;box-shadow:inset 0 1px 2px #fff9;background:#edffff33;animation:liquid-bubble 7s ease-in-out infinite alternate;animation-play-state:paused}.liquid-cavity>b:nth-of-type(2){left:78%;top:63%;width:2%;height:2%;animation-delay:-4s}.liquid-cavity>b:nth-of-type(3){left:65%;top:81%;width:1%;height:1%;animation-delay:-2s}.music-playing .liquid-cavity *,.diy-open #vinylPreview .liquid-cavity *{animation-play-state:running}.vinyl-preview .preview-label{z-index:4}.diy-settings input:disabled{opacity:.35}.diy-presets [data-vinyl-preset="3"] i{background:linear-gradient(175deg,#e4efeb 0 45%,#a3e0e2 47%,#208f9d 65%)!important}#imageVinylControls{margin:12px 0}#imageVinylControls[hidden]{display:none}#imageVinylControls .outline{width:100%;margin-bottom:8px}@keyframes liquid-sway{from{transform:rotate(-7deg) translateY(1%)}to{transform:rotate(8deg) translateY(-2%)}}@keyframes liquid-drift{from{transform:translateX(-8%) scaleY(.8)}to{transform:translateX(7%) scaleY(1.15)}}@keyframes liquid-bubble{from{transform:translate(0,0)}to{transform:translate(5px,-14px)}}@media(prefers-reduced-motion:reduce){.liquid-cavity *{animation:none!important}}
/* The shell rotates above a gravity-aligned fluid layer. Wave surfaces deform independently. */
.liquid-simulation{display:block;width:100%;height:100%;overflow:visible;opacity:var(--liquid-opacity,.82)}.liquid-cavity>.liquid-pool,.liquid-cavity>b{display:none}.liquid-cavity{transform-origin:50% 50%;will-change:transform}.liquid-simulation path{stroke:var(--liquid-accent);stroke-width:.3;stroke-linejoin:round}.liquid-simulation path:first-child{filter:drop-shadow(0 -1px .4px #eaffff55)}@media(prefers-reduced-motion:reduce){.liquid-simulation{display:none}.liquid-cavity>.liquid-pool{display:block;animation:none}}
#vinylTransmission{width:100%;padding:10px;margin:8px 0;border:1px solid #ced0c1;background:#fcfbf6;border-radius:5px;color:#3d5145}#vinylTransmission:disabled{opacity:.7}#imageVinylControls input[type=range]{width:100%;accent-color:#3d5145;margin:8px 0}.picture-vinyl{background-size:var(--image-size,100% auto)!important;background-position:var(--image-x,50%) var(--image-y,50%)!important;background-repeat:no-repeat}#vinylPreview.picture-vinyl{cursor:grab;touch-action:none}#vinylPreview.picture-vinyl:active{cursor:grabbing}.deck .record.custom-vinyl.opaque-vinyl,.deck.lights-on .record.custom-vinyl.opaque-vinyl{box-shadow:inset 0 0 0 1px #b9c5c3,inset 0 0 0 3px #23393c26,0 3px 8px #273c392b}.deck .record.opaque-vinyl::after,.deck.lights-on .record.opaque-vinyl::after{opacity:0;box-shadow:none}.deck .record.opaque-vinyl .record-label{border-color:#c4ccc5;box-shadow:0 0 0 3px #ffffff20}.deck.opaque-deck .platter{background:linear-gradient(130deg,#d2d5d6,#e9ebeb 48%,#b9bec1);box-shadow:0 2px 0 #a9b0b3,0 5px 10px #2631392a}.liquid-simulation path{stroke:var(--liquid-accent);stroke-width:.18}.liquid-simulation path:first-child{filter:none}.liquid-cavity{will-change:transform}.diy-settings{min-width:0}.diy-workbench{align-items:start}.diy-preview-column{position:sticky;top:0;padding-top:15px}#diyDialog{max-height:94vh}.diy-presets [data-vinyl-preset="3"] i{background:radial-gradient(ellipse at 22% 33%,#136b7d 0 20%,transparent 22%),radial-gradient(ellipse at 72% 60%,#279dac 0 30%,transparent 32%),#d8e7e4!important}

@media(prefers-reduced-motion:reduce){.liquid-simulation{display:block}.liquid-cavity>.liquid-pool{display:none}}

#diyDialog.image-mode .diy-colors,#diyDialog.image-mode label[for=vinylTransmission],#diyDialog.image-mode #vinylTransmission,#diyDialog.image-mode label[for=vinylOpacity],#diyDialog.image-mode #vinylOpacity,#diyDialog.image-mode label[for=vinylAmount],#diyDialog.image-mode #vinylAmount{display:none}#diyDialog.image-mode #vinylPattern{margin-bottom:2px}
.liquid-film{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}.liquid-cavity{mask-image:radial-gradient(circle,transparent 0 32%,#000 34% 95%,transparent 97%)}.liquid-cavity>.liquid-simulation,.liquid-cavity>.liquid-pool,.liquid-cavity>b{display:none!important}
.liquid-vinyl>.liquid-cavity{animation:liquid-film-slip 46s linear infinite;animation-play-state:paused}.music-playing #record.liquid-vinyl>.liquid-cavity,.diy-open #vinylPreview.liquid-vinyl>.liquid-cavity{animation-play-state:running}@keyframes liquid-film-slip{to{transform:rotate(-360deg)}}@media(prefers-reduced-motion:reduce){.liquid-vinyl>.liquid-cavity{animation:none}}

#randomVinylColors{display:block;margin:15px auto 4px;padding:9px 18px;border-radius:20px;font-size:11px;background:#e7eade;border-color:#c6cdbb;color:#40563f}#randomVinylColors:hover{background:#dce3d3}#diyDialog.image-mode #randomVinylColors{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.liquid-vinyl>.liquid-cavity{inset:0;border-radius:50%;clip-path:circle(47.3% at 50% 50%);mask-image:radial-gradient(circle,transparent 0 32.8%,#000 33.1% 100%);box-shadow:none}.liquid-film{border-radius:50%;image-rendering:auto}.vinyl-preview{aspect-ratio:1/1}.record{aspect-ratio:1/1}

#coverDialog{width:min(700px,94vw)}.cover-dual-preview{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:22px 0 16px}.cover-dual-preview figure{min-width:0;margin:0;text-align:center}.cover-dual-preview .cover-preview{width:100%;max-width:260px;margin:0 auto 15px}.cover-dual-preview .cover-circle-preview{border-radius:50%;box-shadow:0 5px 18px #314b3120;background:#e0e3da}.cover-dual-preview figcaption{font-size:12px;color:#40533f}.cover-dual-preview figcaption small{display:block;font-size:10px;line-height:1.6;margin-top:5px;color:#8a9281}.cover-preview-hint{text-align:center;margin:14px 0 18px}#coverPictureNote{padding:10px 12px;background:#e6e9dd;border-radius:5px}@media(max-width:500px){.cover-dual-preview{gap:14px}.cover-dual-preview figcaption small{font-size:9px}#coverDialog{padding:22px}}
.cover-dual-preview .cover-preview{max-width:220px}
.cover-wizard-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}.cover-wizard-actions .solid{flex:1;min-width:160px;margin:0}.cover-wizard-actions button[hidden]{display:none}.cover-wizard-actions .text-button{padding:12px 6px}#albumCoverStatus:not([hidden]){padding:10px 12px;background:#e9ecdf;border-radius:5px;line-height:1.8}#albumCoverReaderWrap{width:240px;height:200px;margin:12px auto;overflow:hidden;border-radius:5px}#albumCoverReaderWrap[hidden]{display:none}#coverWizardStep{margin:0 0 12px;color:#6e7f65}

#coverDialog.album-cover-step .cover-dual-preview .cover-preview{max-width:180px}#coverDialog.album-cover-step #coverForm>.field-note:last-child{display:none}

/* Compact transport with one shared visual rhythm. */
.machine-side .transport{gap:14px;padding:24px 6% 4px;min-height:84px;align-items:center}
.machine-side .transport .play{width:54px;height:54px;min-width:54px;border-radius:50%;box-shadow:0 3px 8px #34453720}
.machine-side .transport .icon{width:44px;height:44px;min-width:44px;border-radius:50%;background:#e9ecdf;border-color:#cbd1c2}
.machine-side .transport #openDIY,.machine-side .transport .light-picker summary{height:44px;min-width:68px;padding:0 16px;border-radius:24px;font-size:12px;font-weight:500;letter-spacing:.4px;background:#e9ecdf;border:1px solid #cbd1c2;box-shadow:none;transition:background .15s,border-color .15s}
.machine-side .transport #openDIY{margin-left:8px;min-width:86px}
.machine-side .transport #openDIY:hover,.machine-side .transport .light-picker summary:hover,.machine-side .transport .light-picker[open] summary{background:#dce4d3;border-color:#94a28d}
.machine-side .transport #demo{flex-basis:100%;margin:0;padding:3px 0;text-align:left;opacity:.7;font-size:10px}
/* Subtle lifting feedback; SVG rotation remains controlled by playback. */
.arm-svg #tonearm.arm-lifted{cursor:grabbing;filter:drop-shadow(4px 7px 3px #23382e55)}
.arm-svg #tonearm{transition:filter .15s ease}
.arm-svg #tonearm.arm-lifted{transition:none}
.interaction-toggle{margin:0 6% 12px;font-size:11px;color:#657360}
.record-motion-off .arm-svg #tonearm{transition:none}
@media(prefers-reduced-motion:reduce){.arm-svg #tonearm{transition:none}}
.extraction-layer{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4f1e9f7;backdrop-filter:blur(12px);color:#3d5145}
.extraction-scene{position:relative;width:min(38vw,330px);aspect-ratio:1;transform:translateX(-19%);margin:36px 0}
.extraction-jacket{position:absolute;inset:0;z-index:2;background:#d9decf;border-radius:3px;overflow:hidden;box-shadow:2px 3px 1px #71806e,0 20px 40px #283a3329;display:grid;place-items:center;font:24px serif;padding:0}
.extraction-jacket:after{content:'';position:absolute;inset:0;box-shadow:inset -5px 0 6px #0002,inset 1px 1px 1px #fff8;pointer-events:none}
.extraction-jacket img,.extraction-label img{height:100%;width:100%;object-fit:cover}
.extraction-disc{position:absolute;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle,#151918 0 2px,#303632 2.5px,#151918 3.5px);background-size:cover;box-shadow:0 12px 24px #1d2e3433;overflow:hidden}
.extraction-disc:after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#ffffff19,transparent 30%,transparent 55%,#ffffff20,transparent 85%);box-shadow:inset 0 0 0 2px #ffffff30;pointer-events:none}
.extraction-label{position:absolute;inset:33%;z-index:2;border-radius:50%;overflow:hidden;background:#53684f;display:grid;place-items:center;color:#eee;font-size:10px;text-align:center}
.extraction-label:after{content:'';position:absolute;width:7%;height:7%;border-radius:50%;background:#f4f1e9;left:46.5%;top:46.5%}
.extraction-liquid{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.extraction-title{font:500 20px 'Noto Serif TC',serif;margin:18px 24px;max-width:80vw;text-align:center}
.extraction-skip{font-size:11px;opacity:.8}
@media(max-width:600px){.extraction-scene{width:52vw}}

/* Align transport to the output status and keep volume beside lighting. */
.machine-side .transport{padding-left:0;padding-right:0;justify-content:flex-start;gap:10px}
.machine-side .transport #openDIY{margin-left:0}
.machine-side .transport .volume-control{display:flex;flex:0 1 auto;gap:7px;margin:0;padding:0;border:0;min-height:44px}
.machine-side .transport .volume-control input{width:80px;min-width:50px;margin:0}
.machine-side .transport .volume-control label{font-size:11px;white-space:nowrap}
.machine-side .transport .volume-control output{min-width:32px;font-size:10px}
.machine-side .transport .volume-control>button:first-child{flex:0 0 32px;padding:0}
@media(max-width:1100px) and (min-width:701px){.machine-side .transport{gap:8px}.machine-side .transport #openDIY,.machine-side .transport .light-picker summary{padding:0 11px;min-width:58px}.machine-side .transport .volume-control input{width:65px}}

/* Connection, motion preference and needle guidance share a single baseline. */
.machine-side .player-utility-row{display:flex;align-items:stretch;gap:10px;margin:4px 0 16px;flex-wrap:wrap}
.player-utility-row>.outline{display:inline-flex;align-items:center;justify-content:center;min-height:60px;margin:0;padding:10px 14px;border:1px solid #b8bfb0;border-radius:7px;background:#eeeee5;color:#3d5145;font-size:11px;white-space:nowrap;flex:0 0 auto}
.player-utility-row>.outline:hover{background:#e3e8da}
.player-utility-row>.interaction-toggle[aria-pressed=true]{background:#e5eadc;border-color:#97a58e}
.player-utility-row .needle-info-card{flex:1 1 220px;min-width:0;min-height:60px;padding:10px 14px;box-sizing:border-box;border:1px solid #d2d7c9;border-radius:7px;background:#f0f1e8;display:flex;flex-direction:column;justify-content:center;gap:5px}
.player-utility-row .needle-readout{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0;padding:0;font-size:10px;line-height:1.5;color:#5c6c55}
.player-utility-row #needlePercent{white-space:nowrap;font-variant-numeric:tabular-nums}
.player-utility-row .arm-hint{margin:0;padding:0;font-size:10px;line-height:1.5;letter-spacing:0;color:#79836f}
@media(max-width:480px){.player-utility-row .needle-info-card{flex-basis:100%}.player-utility-row>.outline{min-height:44px}}
.playback-mode{display:flex;align-items:center;gap:10px;margin:8px 0 16px;color:#52684f;font-size:11px}.playback-mode select{padding:8px 12px;border:1px solid #c4ccba;border-radius:7px;background:#eeeee5;color:#3d5145;font:inherit}

/* Stationary surface reflections over the moving liquid film. */
.liquid-vinyl .liquid-cavity:after{content:'';position:absolute;inset:2%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 24% 19%,#ffffff60,transparent 25%),conic-gradient(from 35deg,transparent 12%,#ffffff24 17%,transparent 23%,transparent 64%,#ffffff16 69%,transparent 75%);box-shadow:inset 0 0 0 2px #ffffff50,inset 0 0 14px #233c3b30}
.deck.lights-on:not(.opaque-deck) .platter{box-shadow:0 2px 2px #526b6a70,0 6px 18px #273b3a40,0 0 22px var(--glow-9cf5fb55,#9cf5fb55)}
.deck.lights-on .record.custom-vinyl:not(.opaque-vinyl){box-shadow:inset 0 0 0 2px #ffffff90,inset 0 0 15px var(--glow-9cf5fb55,#9cf5fb55),0 0 10px var(--glow-9cf5fb55,#9cf5fb55)}

.playback-mode-caption{display:block;flex:0 0 2em;white-space:nowrap;line-height:1.5;text-align:center}
.collection-manager{width:min(600px,90vw);max-height:80vh;border:1px solid #c4ccba;border-radius:12px;background:#f4f1e9;color:#3d5145;padding:24px}.collection-manager-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #d9ddcf;font-size:13px}.collection-manager-item input{width:18px;height:18px;accent-color:#3d5145;flex:none}.collection-manager-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.collection-manager::backdrop{background:#20362c66}
/* Liquid on the deck retains the preview's clear resin and saturated pools. */
.deck .record.custom-vinyl.liquid-vinyl{background:repeating-radial-gradient(circle,transparent 0 2px,#647e790c 2.5px,transparent 3.5px),var(--vinyl-art);box-shadow:inset 0 0 0 1px #c8d7d2,inset 0 0 0 5px #e6efeb70,0 3px 8px #26332f25}
.deck .record.liquid-vinyl:before{opacity:.15}
.deck .record.liquid-vinyl .liquid-cavity:after{opacity:.28}
.deck .record.custom-vinyl.liquid-vinyl:after{background:radial-gradient(circle,transparent 0 78%,var(--glow-9cdee5,#9cdee5) 96%,#ffffff80 100%);mix-blend-mode:screen}
.deck.lights-on .record.custom-vinyl.liquid-vinyl:after{opacity:.28;box-shadow:inset 0 0 12px var(--glow-9cf5fb55,#9cf5fb55)}
.deck.lights-on .record.custom-vinyl.liquid-vinyl{box-shadow:inset 0 0 0 1px #e5f2ed,inset 0 0 0 5px #e6efeb70,0 0 12px var(--glow-9cf5fb55,#9cf5fb55)}
/* Visible transmitted light sits beneath the liquid, preserving its pigment. */
.deck.lights-on .record.custom-vinyl.liquid-vinyl{background:radial-gradient(circle,transparent 0 34%,var(--glow-9cf5fb55,#9cf5fb55) 58%,var(--glow-9cdee5,#9cdee5) 96%),var(--vinyl-art);box-shadow:inset 0 0 0 2px var(--glow-9cdee5,#9cdee5),inset 0 0 18px var(--glow-9cf5fb55,#9cf5fb55),0 0 18px var(--glow-9cdee5,#9cdee5),0 0 32px var(--glow-9cf5fb55,#9cf5fb55)}
.deck.lights-on .record.custom-vinyl.liquid-vinyl:after{background:radial-gradient(circle,transparent 0 75%,var(--glow-9cdee5,#9cdee5) 96%,#ffffffb0 100%);opacity:.7;box-shadow:inset 0 0 14px var(--glow-9cf5fb55,#9cf5fb55)}


/* 外觀區段：spotify-library.css */
.spotify-import-divider{text-align:center;color:#90988a;margin:16px 0 7px;font-size:12px}.spotify-import-entry{width:100%;margin:0}.saved-status{min-height:1.5em;font-size:12px;color:#52684f;line-height:1.5}.saved-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:14px 0 8px}.saved-actions span{margin-left:auto;color:#758073;font-size:11px}.saved-album-list{max-height:min(48vh,440px);overflow:auto;border-block:1px solid #d8ddcf;margin:10px 0 18px}.saved-album{display:grid;grid-template-columns:18px 54px minmax(0,1fr);align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid #e1e3d7;cursor:pointer}.saved-album:last-child{border-bottom:0}.saved-album img{width:54px;height:54px;object-fit:cover;background:#dce2d8}.saved-album span{display:flex;flex-direction:column;gap:4px;min-width:0}.saved-album strong{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-album small{font-size:10px;color:#849080;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-album.already-saved{opacity:.55;cursor:default}#savedAlbumsDialog{width:min(660px,calc(100vw - 32px))}#savedImport{width:100%}#savedImport:disabled{opacity:.5}@media(max-width:500px){.saved-actions span{flex-basis:100%;margin-left:0}}

.原有樣式1{--swatch:#9cdee5}
.原有樣式2{--swatch:#c5b0ea}
.原有樣式3{--swatch:#e7adc8}
.原有樣式4{--swatch:#e8c79f}
.原有樣式5{--swatch:#a3dfbe}
.原有樣式6{--swatch:#ffffff}
.原有樣式7{--swatch:#e7eceb}
.原有樣式8{width:100%;min-height:8rem;resize:vertical}
/* 雲端收藏操作列 */
.cloud-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}#cloudDialog{max-width:580px}#cloudStatus{line-height:1.7}


/* 匿名問卷：延續米白與墨綠配色，窄螢幕自動換行。 */
#surveyDialog{width:min(640px,calc(100vw - 32px));max-height:88vh;overflow:auto;padding:28px;box-sizing:border-box}#surveyDialog .dialog-head{align-items:flex-start}#surveyDialog h2{margin:0;font-size:26px}.survey-kicker{color:#68715e;font-size:12px;letter-spacing:2px;margin:0 0 8px}.survey-intro{color:#68715e;margin-bottom:24px}#surveyForm fieldset{border:0;border-top:1px solid #d9dccf;padding:20px 0;margin:0;min-width:0}#surveyForm legend{font-weight:600;line-height:1.7;padding:0 0 8px}#surveyForm legend>span,.survey-suggestion>span{font-size:12px;color:#7b806f;margin-left:8px;font-weight:400}.survey-options{display:flex;flex-wrap:wrap;gap:8px}.survey-options label{display:flex!important;align-items:center;gap:7px;padding:10px 12px;border:1px solid #c7ccbf;border-radius:9px;cursor:pointer;margin:0!important;font-size:14px}.survey-options label:has(input:checked){background:#e5ecdf;border-color:#52674f}.survey-options input{width:16px!important;height:16px;margin:0!important;accent-color:#52674f}#surveySuggestion{width:100%;box-sizing:border-box;border:1px solid #c7ccbf;border-radius:9px;padding:12px;font:inherit;resize:vertical;background:transparent}.survey-counter{text-align:right;color:#7b806f;font-size:12px;margin:6px 0}#surveyStatus{line-height:1.7;color:#426045}#submitSurvey{width:100%;margin-top:12px}.header-actions{flex-wrap:wrap}.survey-open{white-space:nowrap;margin-left:8px}@media(max-width:600px){#surveyDialog{padding:20px}.survey-options label{flex:1 1 40%}.survey-open{margin:6px 0}}

.vinyl-sticker{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;margin:0;padding:4px 9px;border:1px solid #aab4a4;border-radius:3px;background:#f3f4ed;color:#586d5c;font-size:10px;line-height:1;letter-spacing:.08em;box-shadow:0 1px 3px #263d2d12}.vinyl-sticker::before{content:'';width:4px;height:4px;border-radius:50%;background:#849783}.shelf .album-artist{padding-right:74px}#recordSticker{display:block;width:100%;padding:10px;margin-top:6px;border:1px solid #b8bcb0;border-radius:4px;background:#fff}

/* 標籤分類與多個貼紙 */
.tag-folders{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0}.tag-folders-title{width:100%;color:#85867c;font-size:10px;letter-spacing:.1em}.tag-folder{border:1px solid #d3d9cc;background:transparent;border-radius:14px;padding:4px 9px;color:#68776a;font-size:10px}.tag-folder.active{background:#526a58;border-color:#526a58;color:#fff}.shelf .album[hidden]{display:none}.vinyl-stickers{position:static;grid-column:2;grid-row:3;display:flex;justify-content:flex-start;gap:4px;flex-wrap:wrap;pointer-events:none;margin-top:5px}.vinyl-sticker{position:static;margin:0;font-size:9px;padding:3px 6px}.shelf .album-select{grid-template-rows:25px 20px auto}.shelf .album{padding-bottom:12px}#recordSticker{box-sizing:border-box}.recordEditForm small,#recordEditForm label small{display:block;margin-top:5px;color:#85867c;font-size:10px}
.record-tag-editor{margin:18px 0;font-size:12px;color:#526154}.edit-tag-choices{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.edit-tag{border:1px solid #c6d0c2;border-radius:16px;background:#f5f5ef;padding:6px 12px;color:#596d5c}.edit-tag.active{background:#526a58;border-color:#526a58;color:#fff}.new-tag-row{display:flex;gap:8px;align-items:center}.new-tag-row input{flex:1;min-width:0}.new-tag-row button{white-space:nowrap}
/* 多行標籤時，唱片項目依內容增高，不被清單壓縮。 */
.shelf .album{flex:0 0 auto;height:auto}.shelf .album-select{height:auto;grid-template-rows:25px 27px auto}.vinyl-stickers{min-width:0;align-self:start;margin-top:8px;padding-bottom:2px}.vinyl-sticker{max-width:100%;overflow-wrap:anywhere;white-space:normal;line-height:1.35}