/* The library stays quiet; the selected record owns the listening stage. */
.topbar{height:76px}
.edition{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.library{padding-top:48px}
.library .intro{max-width:none}
.library h1{font-size:clamp(42px,5vw,68px);letter-spacing:-.035em}
.library .intro-copy{margin-top:13px}
.library .library-head{margin-top:48px;letter-spacing:.07em;font-size:12px}
.library .record-card{flex-basis:min(26vw,286px)}
.library .cover{box-shadow:0 8px 22px oklch(.03 0 0 / .36)}
.bundle-status{display:block;margin-top:9px;color:var(--green);font-size:11px;line-height:1.45}
.import-status a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.netease-panel{margin-top:30px;padding:26px clamp(20px,3vw,36px);border:1px solid oklch(.812 .221 146 / .22);border-radius:14px;background:linear-gradient(130deg,oklch(.18 .025 160 / .72),oklch(.13 .012 160 / .88) 65%);box-shadow:inset 0 1px oklch(1 0 0 / .04)}
.netease-heading{display:flex;align-items:center;gap:15px}.netease-heading .eyebrow{font-size:10px;margin:0 0 5px;letter-spacing:.15em}.netease-heading h2{font-size:clamp(20px,2.5vw,28px);line-height:1.2;letter-spacing:-.02em;margin:0}.netease-mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:oklch(.66 .2 25);color:white;font-size:23px;box-shadow:0 0 30px oklch(.66 .2 25 / .24)}.netease-badge{margin-left:auto;padding:7px 10px;border:1px solid oklch(1 0 0 / .17);border-radius:99px;color:oklch(.85 .01 160);font-size:11px;white-space:nowrap}
.netease-copy{max-width:70ch;margin:17px 0 22px;color:var(--muted);font-size:13px;line-height:1.65}.netease-form label{display:block;margin-bottom:9px;color:oklch(.86 .01 160);font-size:12px;font-weight:650}.netease-form-row{display:flex;gap:10px}.netease-form input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:oklch(.095 .008 160);color:var(--ink);font-size:13px}.netease-form input::placeholder{color:oklch(.56 .01 160)}.netease-form button{flex:none;padding:0 18px;border:1px solid var(--green);border-radius:6px;background:oklch(.812 .221 146 / .12);color:var(--green);font-size:13px;font-weight:700}.netease-form button:hover{background:oklch(.812 .221 146 / .21)}.netease-status{min-height:18px;margin:11px 0 0;color:var(--muted);font-size:11px;line-height:1.6}.netease-status.is-error{color:oklch(.82 .12 35)}
.netease-player[hidden]{display:none}.netease-player{margin-top:21px;border:1px solid oklch(1 0 0 / .15);border-radius:9px;overflow:hidden;background:oklch(.12 .01 160)}.netease-player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;color:oklch(.85 .01 160);font-size:12px}.netease-player-head div{display:flex;align-items:center;gap:16px}.netease-player-head a{color:var(--green);text-decoration:none}.netease-player-head a:hover{text-decoration:underline}.netease-player-head button{padding:3px 0;border:0;background:none;color:var(--muted);font-size:12px}.netease-player iframe{display:block;width:100%;height:430px;border:0;background:#fff}.netease-player>p{margin:0;padding:10px 14px;color:var(--muted);font-size:11px;line-height:1.5}

body.in-player{background:oklch(.08 .009 160)}
body.in-player .app-shell{overflow:visible}
body.in-player .app-shell:before,body.in-player footer{display:none}
body.in-player .topbar{border-bottom-color:oklch(1 0 0 / .10)}
.player[hidden],.track-empty[hidden]{display:none}
.player{position:relative;isolation:isolate;width:100vw;min-height:calc(100svh - 76px);margin-left:calc(50% - 50vw);padding:0 0 132px;background:oklch(.075 .008 160);overflow:hidden}
.scene-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scene-backdrop:before{content:"";position:absolute;inset:-18%;background-image:var(--scene-art);background-size:cover;background-position:center;filter:blur(88px) saturate(1.35);opacity:.44;transform:scale(1.08)}
.scene-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,oklch(.075 .008 160 / .61),oklch(.075 .008 160 / .78) 53%,oklch(.075 .008 160 / .91)),linear-gradient(0deg,oklch(.075 .008 160 / .94),transparent 48%)}
.player-inner{position:relative;max-width:1440px;margin:auto;padding:24px clamp(25px,6vw,90px) 28px}
.player-top{min-height:37px;align-items:center}
.back-btn{color:oklch(.88 .008 160);font-size:13px}
.back-btn span{font-size:21px}
.player-mode{color:oklch(.78 .02 160);font-size:11px;letter-spacing:.06em;text-align:right}
.player-scene{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(34px,6vw,94px);align-items:start;padding:10px 0 25px}
.album-column{min-width:0;text-align:center}
.album-stage{position:relative;display:grid;place-items:center;width:min(100%,520px,max(300px,calc(100svh - 400px)));aspect-ratio:1;margin:auto;isolation:isolate}
.album-stage::before{content:"";position:absolute;z-index:0;left:8%;right:8%;bottom:-12%;height:43%;background:var(--scene-art) center 78% / cover no-repeat;filter:blur(20px) saturate(1.9) brightness(1.9);opacity:var(--floor-opacity,.42);transform:scaleY(.68);mask-image:radial-gradient(ellipse 85% 68% at 50% 50%,#000 12%,transparent 100%);pointer-events:none;transition:opacity .16s linear}
.album-stage::after{content:"";position:absolute;z-index:0;left:17%;right:17%;bottom:-1%;height:1px;background:linear-gradient(90deg,transparent,oklch(1 0 0 / .34),transparent);opacity:.7;pointer-events:none}
#sceneCanvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}
.album-stage .cover-wrap{position:relative;z-index:2;flex:none;width:80%;max-width:none;margin:0;transform:translateZ(0)}
.album-stage .cover.large{width:100%;aspect-ratio:1;box-shadow:0 18px 48px oklch(0 0 0 / .5);border-radius:3px}
.album-stage .cover-halo{inset:0;z-index:-1;opacity:.54;filter:blur(56px)}
.song-info{max-width:560px;margin:-1px auto 0;min-width:0}
.song-info .eyebrow{margin:0 0 8px;color:oklch(.79 .02 160);font-size:10px;letter-spacing:.16em}
.song-info h2{font-size:clamp(31px,3.5vw,52px);line-height:1.12;margin:0 0 7px;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.song-info>p:not(.eyebrow){font-size:14px;color:oklch(.79 .015 160)}
.song-info .cover-notice{margin:12px auto 0!important}
.song-info .edit-info-btn{margin-top:11px}
.sound-column{min-width:0;max-width:640px;width:100%;justify-self:end;padding-top:48px}
.sound-column .track-heading{margin:0 0 10px;padding:0 0 18px;border-top:0;border-bottom:1px solid oklch(1 0 0 / .17);align-items:center}
.sound-column .track-heading .eyebrow{font-size:11px;letter-spacing:.04em;color:oklch(.76 .015 160);margin:0 0 8px}
.sound-column .track-heading h3{font-size:24px;font-weight:650;letter-spacing:-.02em}
.all-tracks{white-space:nowrap}
.visualizer-picker{display:flex;align-items:center;gap:14px;padding:2px 0 12px;border-bottom:1px solid oklch(1 0 0 / .12)}
.visualizer-picker[hidden]{display:none}
.visualizer-label{flex:none;color:oklch(.74 .01 160);font-size:11px;white-space:nowrap}
.visualizer-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:1;min-width:0}
.visualizer-options button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:34px;padding:0 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:oklch(.78 .01 160);font-size:11px;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease}
.visualizer-options button:hover{background:oklch(1 0 0 / .08);color:var(--ink)}
.visualizer-options button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.visualizer-options button[aria-pressed="true"]{border-color:oklch(.812 .221 146 / .58);background:oklch(.812 .221 146 / .11);color:var(--green)}
.visualizer-options svg{width:23px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.visualizer-options svg circle{fill:currentColor;stroke:none}
.track-mode-picker{display:flex;align-items:center;gap:5px;padding:9px 0;border-bottom:1px solid oklch(1 0 0 / .12)}
.track-mode-picker[hidden]{display:none}
.track-mode-picker span{margin-right:auto;color:oklch(.74 .01 160);font-size:11px}
.track-mode-picker button{height:29px;padding:0 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:oklch(.78 .01 160);font-size:11px}
.track-mode-picker button[aria-pressed="true"]{border-color:oklch(.812 .221 146 / .58);background:oklch(.812 .221 146 / .11);color:var(--green)}
.track-mode-picker button:hover{background:oklch(1 0 0 / .08)}
.track-list{gap:0}
.sound-column .track{grid-template-columns:26px minmax(112px,144px) minmax(0,1fr) 20px;gap:11px;height:73px;padding:0 6px;background:transparent;border:0;border-bottom:1px solid oklch(1 0 0 / .12);border-radius:0;transition:background .2s ease,height .3s cubic-bezier(.2,.8,.2,1),padding .3s ease}
.sound-column .track:hover{background:oklch(1 0 0 / .055)}
.sound-column .track:focus-visible{outline-offset:-2px}
.sound-column .track.selected{height:188px;padding:6px 14px;border:1px solid var(--track-color);border-radius:10px;background:oklch(.14 .012 160 / .72)}
.track-number{font-variant-numeric:tabular-nums;color:oklch(.7 .01 160);font-size:11px}
.track-name strong{font-size:15px;font-weight:650}
.track-name small{font-size:10px;letter-spacing:.02em;line-height:1.3}
.sound-column .track canvas{height:62px}
.sound-column .track.selected canvas{height:162px}
.sound-column .track-arrow{font-size:15px}
.track-disclaimer{max-width:60ch;margin:15px 0 0;font-size:11px;line-height:1.55;color:oklch(.72 .012 160)}
.sound-column .analysis-status{margin:14px 0;border-color:oklch(1 0 0 / .16);background:oklch(.13 .012 160 / .64)}
.track-empty{display:grid;justify-items:center;align-content:center;min-height:270px;text-align:center;border-bottom:1px solid oklch(1 0 0 / .12)}
.track-empty span{font-size:72px;line-height:1;color:var(--green);opacity:.72}
.track-empty p{margin:8px 0 3px;font-size:16px}
.track-empty small{max-width:34ch;color:var(--muted);line-height:1.5}
.player.is-focused .sound-column .track-heading{margin-bottom:22px}
.player.is-focused .sound-column .track.selected{height:min(34vh,260px)}
.player.is-focused .sound-column .track.selected canvas{height:min(30vh,225px)}
.transport-dock{position:fixed;left:0;right:0;bottom:0;z-index:7;min-height:104px;padding:16px max(25px,calc((100vw - 1260px)/2));background:oklch(.085 .009 160 / .94);border-top:1px solid oklch(1 0 0 / .16);backdrop-filter:blur(20px)}
.transport-dock .transport{max-width:none;margin:0;gap:24px;align-items:center}
.transport-dock .play-btn{width:64px;height:64px;flex-basis:64px;box-shadow:none}
.transport-dock .progress-wrap{min-width:0}
.transport-dock .time-row{font-size:11px;font-variant-numeric:tabular-nums;color:oklch(.83 .01 160)}
.transport-dock input[type=range]{margin:8px 0;height:5px}
.transport-dock .progress-caption{font-size:11px;color:oklch(.77 .01 160)}

@media(max-width:900px){
  .player-scene{grid-template-columns:1fr;gap:47px;padding-top:12px}
  .album-stage{width:min(100%,430px)}
  .sound-column{max-width:680px;justify-self:center;padding-top:0}
  .player-inner{padding-bottom:20px}
}
@media(max-width:720px){
  .netease-panel{padding:20px}.netease-badge{display:none}.netease-copy{font-size:12px}.netease-form-row{flex-direction:column}.netease-form button{height:42px}.netease-player-head{align-items:flex-start;flex-direction:column}.netease-player iframe{height:390px}
  .topbar{height:68px}
  .library{padding-top:34px}
  .library h1{font-size:42px}
  .library .library-head{margin-top:38px}
  .library .record-card{flex-basis:69vw}
  .player{min-height:calc(100svh - 68px);padding-bottom:125px}
  .player-inner{padding:13px 20px 20px}
  .player-top{gap:10px}
  .player-mode{max-width:52%;line-height:1.4}
  .player-scene{gap:22px;padding-top:7px}
  .album-stage{width:min(100%,310px,max(240px,calc(100svh - 380px)))}
  .album-stage .cover-wrap{width:80%}
  .song-info h2{font-size:38px}
  .sound-column .track{grid-template-columns:20px minmax(78px,108px) minmax(0,1fr) 15px;gap:7px;height:69px;padding:0 3px}
  .sound-column .track.selected{height:176px;padding:5px 8px}
  .sound-column .track canvas{height:58px}
  .sound-column .track.selected canvas{height:151px}
  .track-name strong{font-size:13px}
  .track-name small{font-size:9px}
  .visualizer-picker{gap:7px}
  .visualizer-label{font-size:10px}
  .visualizer-options button{height:32px;gap:3px;padding:0 4px;font-size:10px}
  .visualizer-options svg{width:18px;height:15px}
  .transport-dock{min-height:95px;padding:13px 20px calc(13px + env(safe-area-inset-bottom))}
  .transport-dock .transport{gap:16px}
  .transport-dock .play-btn{width:58px;height:58px;flex-basis:58px}
}
@media(max-width:440px){.visualizer-label{display:none}}
@media(min-width:901px) and (max-height:760px){.sound-column{padding-top:30px}.sound-column .track{height:62px}}
@media(prefers-reduced-motion:reduce){.scene-backdrop:before{filter:blur(88px) saturate(1.15)}.sound-column .track{transition:none}}
body.reduce-motion .scene-backdrop:before{filter:blur(88px) saturate(1.15)}
body.reduce-motion .sound-column .track{transition:none}
body.reduce-motion .visualizer-options button{transition:none}

/* v23: editorial rhythm with the record and its live sound as the focal points. */
.app-shell{max-width:1600px}
.topbar{height:82px}
.brand{gap:14px;font-size:21px;letter-spacing:-.015em}
.brand small{letter-spacing:.19em;font-size:8px}
.brand-mark{width:40px;height:40px}
.edition{font-size:12px;letter-spacing:.015em;color:oklch(.76 .012 160)}
.library{padding-top:clamp(40px,5.5vw,84px)}
.library .intro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr);align-items:end;gap:clamp(24px,5vw,80px);padding-bottom:clamp(42px,6vw,82px);border-bottom:1px solid oklch(1 0 0 / .18)}
.library .intro-main{min-width:0}
.library .intro .eyebrow{margin-bottom:clamp(20px,3vw,38px);font-size:11px;letter-spacing:.14em}
.library h1{font-size:clamp(44px,5.2vw,78px);line-height:1.12;letter-spacing:-.035em;font-weight:670;text-wrap:balance}
.library h1 em{font-style:normal;color:var(--green)}
.intro-aside{padding:0 0 5px;max-width:310px;justify-self:end}
.intro-aside:before{content:"";display:block;width:48px;height:2px;background:var(--green);margin-bottom:23px}
.intro-aside p{margin:0;color:oklch(.83 .012 160);font-size:clamp(14px,1.15vw,17px);line-height:1.8;text-wrap:pretty}
.intro-aside>span{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:31px;padding-top:13px;border-top:1px solid oklch(1 0 0 / .16);color:oklch(.74 .012 160);font-size:11px;letter-spacing:.035em}
.intro-aside b{color:var(--green);font-size:24px;font-weight:400;line-height:1}
.library .library-head{margin:28px 0 22px;font-size:12px;letter-spacing:.025em;color:oklch(.9 .008 160)}
.library .library-head .swipe-note{font-size:11px;letter-spacing:.01em;color:oklch(.68 .012 160)}
.library .record-rail{gap:clamp(16px,2.2vw,32px);padding-bottom:27px}
.library .record-card{flex-basis:clamp(240px,24vw,350px)}
.library .record-card .cover{border-radius:2px;box-shadow:0 8px 8px oklch(.025 0 0 / .18);transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s ease}
.library .record-card:hover .cover,.library .record-card:focus-visible .cover{transform:translateY(-5px);filter:saturate(1.08)}
.library .card-meta{margin-top:17px;gap:8px}
.library .card-meta strong{font-size:17px;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library .card-meta small{flex:none;font-size:10px;letter-spacing:.05em;color:oklch(.7 .012 160)}
.library .card-sub{margin-top:7px;font-size:12px;line-height:1.55;color:oklch(.76 .012 160)}
.bundle-status{color:oklch(.76 .19 146);font-size:11px}
.import-row{margin-top:38px;padding:30px 0}
.import-row strong{font-size:20px;font-weight:640;letter-spacing:-.025em}
.import-row span{max-width:65ch;font-size:12px;line-height:1.7}
.import-btn{border-radius:3px;padding:14px 19px;letter-spacing:.015em}
.netease-panel{margin-top:34px;border-radius:8px;background:oklch(.14 .012 160);border-color:oklch(1 0 0 / .14);box-shadow:none}
.netease-heading h2{font-size:22px;font-weight:650;letter-spacing:-.02em}
.netease-mark{width:38px;height:38px;box-shadow:none}
.netease-copy{max-width:68ch}
.privacy-note{max-width:105ch;line-height:1.7}
.player-inner{max-width:1510px;padding-top:29px}
.player-scene{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:clamp(40px,5.5vw,96px)}
.album-stage{width:min(100%,570px,max(320px,calc(100svh - 360px)))}
.album-stage .cover-wrap{width:81%}
.album-stage .cover.large{box-shadow:0 10px 30px oklch(0 0 0 / .32)}
.album-stage::before{left:10%;right:10%;bottom:-10%;height:37%;filter:blur(27px) saturate(1.35) brightness(1.5);opacity:var(--floor-opacity,.38)}
.album-stage::after{left:22%;right:22%;opacity:.48}
.song-info{margin-top:11px}
.song-info .eyebrow{font-size:11px;letter-spacing:.09em;color:oklch(.77 .17 146)}
.song-info h2{font-size:clamp(34px,3.2vw,54px);letter-spacing:-.032em;font-weight:670}
.song-info>p:not(.eyebrow){font-size:15px;color:oklch(.8 .012 160)}
.sound-column{padding-top:35px}
.sound-column .track-heading{padding-bottom:19px;margin-bottom:12px}
.sound-column .track-heading .eyebrow{margin-bottom:8px;color:oklch(.74 .012 160);font-size:11px}
.sound-column .track-heading h3{font-size:26px;letter-spacing:-.025em}
.sound-column .track{height:79px;grid-template-columns:27px minmax(116px,150px) minmax(0,1fr) 20px;gap:13px}
.sound-column .track:hover{background:oklch(1 0 0 / .045)}
.sound-column .track.selected{height:197px;background:oklch(.135 .014 160 / .85)}
.track-name strong{font-size:16px;letter-spacing:-.015em}
.track-name small{color:oklch(.71 .01 160)}
.sound-column .track canvas{height:67px}
.sound-column .track.selected canvas{height:170px}
.transport-dock{background:oklch(.085 .009 160 / .97);border-top-color:oklch(1 0 0 / .13)}
.transport-dock .play-btn{background:var(--green);color:oklch(.08 .008 160)}
.transport-dock .progress-caption{color:oklch(.73 .01 160)}
@media(max-width:900px){
  .library .intro{grid-template-columns:1fr;gap:28px;padding-bottom:34px}
  .intro-aside{max-width:580px;justify-self:start;display:flex;align-items:end;gap:24px}
  .intro-aside:before{display:none}
  .intro-aside p{max-width:42ch}
  .intro-aside>span{min-width:140px;align-self:stretch;margin:0;padding:0 0 0 18px;border-top:0;border-left:1px solid oklch(1 0 0 / .16);align-items:end}
  .album-stage{width:min(100%,460px)}
  .player-scene{gap:38px}
}
@media(max-width:720px){
  .topbar{height:68px}
  .library{padding-top:38px}
  .library h1{font-size:clamp(34px,8vw,46px);line-height:1.17;letter-spacing:-.035em}
  .library .intro .eyebrow{margin-bottom:21px}
  .intro-aside{display:block;max-width:36ch}
  .intro-aside p{font-size:14px;line-height:1.7}
  .intro-aside>span{min-width:0;margin-top:15px;padding:12px 0 0;border-left:0;border-top:1px solid oklch(1 0 0 / .16)}
  .library .library-head{margin-top:23px}
  .library .record-card{flex-basis:68vw}
  .import-row{margin-top:19px;padding:25px 0}
  .import-row strong{font-size:18px}
  .player-inner{padding-top:15px}
  .player-scene{gap:18px}
  .album-stage{width:min(100%,320px,max(240px,calc(100svh - 370px)))}
  .song-info{margin-top:2px}
  .song-info h2{font-size:clamp(30px,8vw,40px)}
  .sound-column .track{height:72px;grid-template-columns:19px minmax(79px,108px) minmax(0,1fr) 14px;gap:7px}
  .sound-column .track.selected{height:176px}
  .sound-column .track canvas{height:60px}
  .sound-column .track.selected canvas{height:151px}
  .track-name strong{font-size:13px}
}
