:root{color-scheme:dark;--bg:#141816;--panel:#1d231f;--text:#edf0e9;--muted:#98a49a;--accent:#c5e1a0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0;color:inherit}a{color:inherit;text-decoration:none}.topbar{height:94px;max-width:1320px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c}.brand{font-size:23px;letter-spacing:3px;font-weight:650;display:flex;align-items:center;gap:12px}.brand-icon{color:var(--accent);font-size:33px}.brand small{font-size:10px;font-weight:400;letter-spacing:2px;color:var(--muted);margin-left:10px}.private-note{color:var(--muted);font-size:10px;letter-spacing:2px}main{max-width:1320px;margin:auto;padding:0 48px 155px}.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:425px;align-items:center;gap:30px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent);margin:0 0 15px}.hero h1{font-family:Georgia,"Noto Serif TC","PMingLiU",serif;font-size:clamp(38px,4.4vw,61px);font-weight:500;line-height:1.35;letter-spacing:4px;margin:0 0 20px}.intro{font-size:13px;color:var(--muted);line-height:1.9}.primary{background:var(--accent);color:#20291b;padding:13px 22px;border-radius:30px;font-weight:650;margin-top:15px}.primary:hover{background:#d9edbf}.hero-count{font-size:11px;color:var(--muted);margin-left:18px}.hero-art{height:330px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 70% 70%,#89936f22,transparent 65%);border-radius:50%}.record{position:absolute;width:268px;height:268px;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-18deg);background:repeating-radial-gradient(circle,#202722 0px,#202722 2px,#323b31 3px,#171c18 4px);box-shadow:20px 20px 45px #0009,inset 0 0 0 1px #68765c55;display:grid;place-items:center}.record-label{width:111px;height:111px;background:#bdcc9f;color:#34402e;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:39px;font-family:serif}.record-label span{font:6px system-ui;letter-spacing:1px}.orbit{position:absolute;border:1px solid #a3b48c28;border-radius:50%;width:390px;height:230px;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-28deg)}.orbit-two{transform:translate(-50%,-50%) rotate(27deg)}.art-caption{position:absolute;bottom:1px;right:26px;font-size:8px;letter-spacing:2px;color:#b6c3ae}.art-caption span{color:var(--muted);font-size:9px;letter-spacing:3px}.collection{border-top:1px solid #ffffff0e;padding-top:34px}.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font-size:23px;letter-spacing:1px;margin:0}h2 span{color:var(--muted);font-size:12px;font-weight:400;margin-left:8px}.collection-heading .eyebrow{margin-bottom:6px}.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid #ffffff10;border-radius:24px;padding:9px 16px;width:285px;color:var(--muted)}.search input{background:none;border:0;outline:none;width:100%;color:var(--text);font-size:12px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.filters button{border:1px solid #ffffff16;border-radius:20px;background:none;color:var(--muted);padding:7px 17px;font-size:12px;min-height:38px}.filters button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#25301e}.collection-note{font-size:11px;color:#859187;margin:15px 0 22px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.card{min-width:0}.cover{height:auto;aspect-ratio:1.2;position:relative;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 20% 10%,color-mix(in srgb,var(--color) 80%,white),transparent 80%),linear-gradient(155deg,var(--color),#28332e);isolation:isolate}.cover:before,.cover:after{content:"";position:absolute;width:120%;height:80%;border-radius:50%;border:1px solid #ffffff45;left:-10%;top:42%;transform:rotate(-22deg)}.cover:after{top:57%;left:12%;background:#152e292a}.cover-symbol{position:absolute;right:18px;top:-9px;font-family:serif;font-size:115px;color:#ffffff36;line-height:1.4}.cover-caption{position:absolute;bottom:19px;left:18px;z-index:1;color:#fff;font-size:9px;letter-spacing:2px}.card-play{position:absolute;right:13px;bottom:13px;width:42px;height:42px;background:#16241ee8;border-radius:50%;z-index:2;box-shadow:0 4px 12px #0003}.card-play:hover{background:var(--accent);color:#243222}.card.active .cover{outline:2px solid var(--accent);outline-offset:3px}.card h3{font-size:16px;margin:15px 0 5px;letter-spacing:.3px}.tags{font-size:10px;color:var(--color);margin-bottom:8px}.description{color:var(--muted);font-size:12px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:43px;margin:0 0 12px}.version-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}.version-label select{max-width:75%;background:var(--panel);border:1px solid #ffffff15;color:#d3dccf;border-radius:6px;padding:7px 9px;font-size:11px;min-height:36px}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff10;margin-top:48px;padding-top:24px;font-size:9px;letter-spacing:2px;color:#829080}.player{position:fixed;bottom:0;left:0;width:100%;z-index:10;background:#1b221eef;backdrop-filter:blur(22px);border-top:1px solid #ffffff15;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;align-items:center;padding:15px max(24px,calc((100vw - 1224px)/2)) calc(15px + env(safe-area-inset-bottom))}.now{display:flex;align-items:center;gap:12px;min-width:0}.now>div:last-child{min-width:0}.now strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now span{font-size:10px;color:var(--muted);display:block}.now-art{width:49px;height:49px;border-radius:7px;background:#45533b;display:grid;place-items:center;font-family:serif;font-size:26px;flex-shrink:0}.buttons{display:flex;justify-content:center;align-items:center;gap:23px}.buttons button{background:none;color:#bac5b7;font-size:15px;width:32px;height:32px;padding:0}.buttons button[aria-pressed=true]{color:var(--accent);background:#c5e1a018;border-radius:8px}.buttons .play-toggle{background:var(--accent);color:#202c1b;border-radius:50%;width:37px;height:37px}.timeline{display:flex;gap:10px;align-items:center;font-size:9px;color:var(--muted);margin-top:9px;font-variant-numeric:tabular-nums}.timeline input{flex:1;width:100%;min-width:0}input[type=range]{accent-color:var(--accent);height:4px;cursor:pointer}.volume{justify-self:end;display:flex;gap:10px;align-items:center;font-size:10px;color:var(--muted)}.volume input{width:80px}#status{grid-column:1/-1;color:#ecc5a4;font-size:12px;margin:0;text-align:center}#status:empty{display:none}.empty{padding:70px 0;text-align:center;color:var(--muted)}@media(min-width:1600px){.hero{min-height:470px}}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.volume{display:none}.player{grid-template-columns:1fr 1.4fr}.hero-art{transform:scale(.85)}.hero-count{display:block;margin:12px 0 0}}@media(max-width:650px){.topbar{height:72px;padding:0 22px}.brand{font-size:21px}.brand small{font-size:8px;margin-left:0}.private-note{display:none}main{padding:0 22px 195px}.hero{min-height:390px;position:relative;display:block;padding:35px 0 28px}.hero-copy{position:relative;z-index:1}.hero h1{font-size:40px}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}.hero-art{position:absolute;right:-22px;top:70px;width:190px;height:260px;opacity:.27;transform:none;pointer-events:none}.record{width:220px;height:220px;left:95%}.record-label{width:90px;height:90px}.orbit,.art-caption{display:none}.intro{font-size:12px;max-width:300px}.hero-count{display:inline;margin-left:12px}.primary{font-size:12px;padding:12px 18px}.collection{padding-top:25px}.collection-heading{display:block}h2{font-size:21px}.search{margin-top:18px;width:100%}.filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-top:16px;gap:7px}.filters button{flex-shrink:0;padding:7px 14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.cover{aspect-ratio:1}.cover-symbol{font-size:93px;right:8px;top:0}.cover-caption{font-size:7px;bottom:15px;left:12px;letter-spacing:1px}.card-play{width:36px;height:36px;right:10px;bottom:10px}.card h3{font-size:14px;margin-top:12px}.description{font-size:11px}.tags{font-size:9px}.version-label{display:block}.version-label>span{display:none}.version-label select{max-width:100%;width:100%}.player{grid-template-columns:1fr;padding:11px 22px calc(12px + env(safe-area-inset-bottom));gap:8px}.now{padding-right:55px}.now-art{width:36px;height:36px;font-size:22px}.now strong{font-size:12px}.buttons{position:absolute;right:20px;top:11px;gap:9px}.buttons button{width:28px}.buttons #shuffle,.buttons #previous,.buttons #repeat{display:none}.now{padding-right:94px}.timeline{margin-top:4px}.transport{min-width:0}footer{font-size:8px;letter-spacing:1px}footer span{letter-spacing:0}}@media(prefers-reduced-motion:no-preference){button,.cover{transition:background .2s,outline .2s,transform .2s}.card-play:hover{transform:scale(1.08)}}

/* Compact mobile transport retains every playback control. */
@media(max-width:650px){.buttons{position:static;justify-content:center;gap:24px}.buttons #shuffle,.buttons #previous,.buttons #repeat{display:block}.buttons button{min-width:36px;min-height:36px}.now{padding-right:0}.timeline{margin-top:8px}.hero{min-height:365px}}
.art-caption{bottom:35px;right:35px}
/* Direct A/B listening, keeping the original album design. */
.version-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.version-play{display:flex;align-items:center;gap:9px;min-width:0;min-height:54px;padding:10px 12px;background:#20281f;border:1px solid #ffffff18;border-radius:8px;text-align:left}.version-play:hover{background:#303d28}.version-play strong{display:block;font-size:11px;font-weight:550}.version-play small{display:block;font-size:9px;opacity:.65}.version-icon{font-size:11px}.version-play.is-current{border-color:var(--accent)}.version-play.is-playing{background:var(--accent);color:#25301e}@media(max-width:650px){.version-pair{gap:6px}.version-play{padding:9px 7px;gap:6px}.version-play strong{font-size:10px}.version-play small{font-size:8px}}@media(max-width:360px){.version-play{gap:4px;padding:8px 5px}.version-icon{font-size:9px}.version-play strong{font-size:9px}}
/* Font-independent, optically centered playback controls. */
.control-icon{display:block;width:20px;height:20px;flex-shrink:0}.buttons button{display:grid;place-items:center}.buttons .play-toggle .control-icon{width:21px;height:21px}.version-icon{display:grid;place-items:center}.version-icon .control-icon{width:14px;height:14px}.buttons button:hover{color:var(--accent)}.buttons .play-toggle:hover{color:#202c1b;background:#d7ecb8}
/* Clip only the decorative record, never its caption. */
.hero-art{overflow:visible;border-radius:0;background:none}.art-visual{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:radial-gradient(ellipse at 70% 70%,#89936f22,transparent 65%)}.art-caption{z-index:1;right:18px;bottom:12px}@media(max-width:650px){.hero-art{overflow:hidden}}