:root{--bg:oklch(.11 .009 160);--surface:oklch(.16 .012 160);--surface2:oklch(.205 .013 160);--line:oklch(.31 .014 160);--ink:oklch(.95 .006 160);--muted:oklch(.72 .012 160);--green:oklch(.812 .221 146);--orange:oklch(.78 .15 62);--pink:oklch(.78 .15 5);--blue:oklch(.77 .11 235)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,label:focus-within,input:focus-visible{outline:2px solid var(--green);outline-offset:4px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.app-shell{min-height:100vh;max-width:1540px;margin:auto;padding:0 clamp(22px,5vw,78px);position:relative;overflow:hidden}.app-shell:before{content:"";position:absolute;width:780px;height:780px;right:-290px;top:-410px;background:radial-gradient(circle,oklch(.23 .06 160 / .45),transparent 68%);pointer-events:none}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:13px;background:none;border:0;padding:0;color:var(--ink);font-size:20px;font-weight:750;letter-spacing:.02em;text-align:left}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.24em;font-weight:650;margin-top:3px}.brand-mark{width:37px;height:37px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 5px var(--bg),inset 0 0 0 7px var(--green)}.brand-mark i{width:7px;height:7px;background:var(--green);border-radius:50%}.top-actions{display:flex;align-items:center;gap:25px}.edition{font-size:12px;color:var(--muted);letter-spacing:.05em}.edition b{color:var(--green)}.icon-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;background:none;border:1px solid var(--line);border-radius:50%;color:var(--ink)}.icon-btn:hover{background:var(--surface2)}.icon-btn svg{width:18px;height:18px}.library{padding:72px 0 48px}.intro{max-width:710px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:.22em;font-weight:700;margin:0 0 20px}.live-dot{display:inline-block;background:var(--green);width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 5px oklch(.812 .221 146 / .13);margin-right:12px}h1{font-size:clamp(44px,6.4vw,92px);line-height:1.09;letter-spacing:-.035em;margin:0;font-weight:720;text-wrap:balance}h1 em{font-style:normal;color:var(--green)}.intro-copy{color:var(--muted);font-size:16px;line-height:1.7;margin:23px 0 0}.library-head{display:flex;justify-content:space-between;align-items:center;margin:64px 0 22px;font-size:11px;letter-spacing:.17em;font-weight:700}.swipe-note{color:var(--muted);font-weight:500}.record-rail{display:flex;gap:24px;overflow-x:auto;padding:8px 5px 32px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}.record-rail::-webkit-scrollbar{display:none}.record-card{flex:0 0 min(30vw,320px);min-width:230px;text-align:left;background:none;border:0;padding:0;color:var(--ink);scroll-snap-align:start}.record-card:hover .cover,.record-card:focus-visible .cover{transform:translateY(-8px) rotate(-2deg)}.record-card .cover{aspect-ratio:1;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:10px 14px 0 -2px oklch(.06 0 0),17px 14px 0 -3px oklch(.3 .004 160)}.cover{position:relative;overflow:hidden;background:var(--cover);border-radius:4px;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}.cover:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cover-art)}.cover:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 38%,oklch(.05 0 0 / .69))}.cover-symbol{position:absolute;top:15%;left:12%;width:70%;height:70%;border:1px solid oklch(1 0 0 / .4);border-radius:50%;box-shadow:0 0 0 35px oklch(1 0 0 / .05),0 0 0 72px oklch(1 0 0 / .04),inset 0 0 0 28px oklch(0 0 0 / .09)}.cover-title{font-size:clamp(24px,3vw,39px);line-height:1;font-weight:800;letter-spacing:.12em;position:relative;z-index:1;text-shadow:0 2px 10px oklch(0 0 0 / .22)}.vinyl-hole{position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:oklch(.96 0 0 / .8);z-index:1;box-shadow:0 0 0 9px oklch(.06 0 0 / .42)}.card-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:19px}.card-meta strong{font-size:16px}.card-meta small{color:var(--muted);font-size:11px}.card-sub{display:block;color:var(--muted);font-size:12px;margin-top:6px}.import-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;margin-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center}.import-row strong,.import-row span{display:block}.import-row strong{font-size:16px;margin-bottom:8px}.import-row span{font-size:13px;color:var(--muted)}.import-btn{border:1px solid var(--green);color:var(--green);padding:13px 17px;border-radius:6px;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s}.import-btn:hover{background:oklch(.812 .221 146 / .12)}.import-btn svg{width:17px;height:17px}.privacy-note{font-size:11px;color:var(--muted);line-height:1.6;margin:14px 0 0}.player{padding:30px 0 72px}.player-top{display:flex;justify-content:space-between;align-items:center}.back-btn{background:none;border:0;color:var(--muted);font-size:12px;padding:10px 0}.back-btn:hover{color:var(--ink)}.back-btn span{font-size:19px;vertical-align:-1px;margin-right:6px}.player-mode{color:var(--green);font-size:11px;letter-spacing:.12em}.now-playing{display:flex;align-items:center;gap:clamp(30px,7vw,110px);padding:42px 4vw 56px}.cover-wrap{position:relative;flex:0 0 min(34vw,350px)}.cover.large{aspect-ratio:1;box-shadow:18px 18px 0 -3px oklch(.04 0 0),27px 18px 0 -5px oklch(.37 .006 160);transition:transform .5s}.cover.large .cover-title{font-size:47px}.cover-halo{position:absolute;inset:8%;z-index:-1;filter:blur(70px);background:var(--halo);opacity:.45}.song-info{min-width:0;flex:1}.song-info h2{font-size:clamp(38px,4.7vw,66px);letter-spacing:-.03em;margin:0 0 7px}.song-info>p:not(.eyebrow){color:var(--muted);font-size:14px;margin:0}.transport{display:flex;align-items:center;gap:23px;margin-top:48px;max-width:500px}.play-btn{flex:0 0 66px;width:66px;height:66px;background:var(--green);color:var(--bg);border:0;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 30px oklch(.812 .221 146 / .19);transition:transform .2s}.play-btn:hover{transform:scale(1.06)}.play-btn svg{width:26px;height:26px;fill:currentColor;stroke:currentColor}.play-btn .pause-icon{display:none}.playing .play-btn .play-icon{display:none}.playing .play-btn .pause-icon{display:block}.progress-wrap{width:100%}.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.progress-wrap input{width:100%;height:4px;accent-color:var(--green);margin:11px 0;cursor:pointer}.progress-caption{display:block;font-size:11px;color:var(--muted)}.track-heading{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:34px;margin-bottom:16px}.track-heading .eyebrow{margin:0 0 9px}.track-heading h3{font-size:24px;margin:0;letter-spacing:-.01em}.all-tracks{border:0;background:none;color:var(--green);font-size:12px;padding:8px}.all-tracks span{margin-left:4px}.track-list{display:grid;gap:10px}.track{position:relative;display:grid;grid-template-columns:38px 142px minmax(0,1fr) 35px;align-items:center;gap:15px;width:100%;height:95px;background:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:10px;padding:0 20px;text-align:left;overflow:hidden;transition:background .2s,border .2s,transform .3s}.track:hover{background:var(--surface2)}.track.selected{background:oklch(.19 .023 160);border-color:var(--track-color);height:165px}.track.hidden-track{display:none}.track-number{font-size:12px;color:var(--muted)}.track-name strong{display:block;font-size:16px;margin-bottom:6px}.track-name small{font-size:11px;color:var(--muted)}.track canvas{width:100%;height:78px;display:block}.track.selected canvas{height:145px}.track-arrow{font-size:18px;color:var(--track-color);text-align:right}.track-disclaimer{color:var(--muted);font-size:11px;margin:18px 0;line-height:1.7}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0 30px;color:var(--muted);font-size:10px;letter-spacing:.15em}#particleLayer{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--green);animation:burst .68s ease-out forwards}@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);width:min(420px,calc(100vw - 36px));padding:23px}dialog::backdrop{background:oklch(.02 0 0 / .75)}dialog h2{font-size:20px;margin:0}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.setting-row strong,.setting-row small{display:block}.setting-row strong{font-size:14px}.setting-row small{font-size:11px;color:var(--muted);line-height:1.6;margin-top:5px}.setting-row input{accent-color:var(--green);width:19px;height:19px}dialog p{border-top:1px solid var(--line);padding-top:17px;margin:20px 0 0;color:var(--muted);font-size:11px;line-height:1.5}@media(max-width:720px){.topbar{height:72px}.edition{display:none}.library{padding-top:60px}.intro-copy{font-size:14px}.library-head{margin-top:54px}.record-card{flex-basis:69vw;min-width:230px}.import-row{align-items:flex-start;flex-direction:column}.now-playing{display:block;padding:35px 0 42px}.cover-wrap{width:min(61vw,280px);margin:0 auto 42px}.song-info h2{font-size:40px}.transport{margin-top:28px}.track{grid-template-columns:20px 89px minmax(0,1fr) 15px;gap:7px;padding:0 10px;height:82px}.track.selected{height:145px}.track-name strong{font-size:13px}.track-name small{font-size:10px}.track canvas{height:68px}.track.selected canvas{height:120px}.track-heading h3{font-size:21px}.player-mode{font-size:10px}footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.cover:before{background-size:cover;background-position:center}.import-status{margin:15px 0 0;color:var(--green);font-size:12px;line-height:1.5}.import-status[hidden]{display:none}
.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cover.has-image{padding:0}
.cover.has-image:after,.cover.has-image .cover-symbol,.cover.has-image .cover-title,.cover.has-image .vinyl-hole{display:none}
#particleLayer{display:none;width:100vw;height:100vh;overflow:visible}
body.is-transitioning .record-rail,body.is-transitioning .import-row{pointer-events:none}
.analysis-status{display:grid;gap:10px;margin:0 0 22px;padding:16px 19px;border:1px solid var(--line);border-radius:8px;background:oklch(.16 .015 165);color:var(--ink);font-size:12px;line-height:1.5}
.analysis-status[hidden]{display:none}
.analysis-progress-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-width:0}.analysis-progress-heading span{min-width:0;overflow-wrap:anywhere}.analysis-progress-heading strong{flex:none;color:var(--green);font-size:14px;font-variant-numeric:tabular-nums}
.analysis-status progress{display:block;width:100%;height:8px;accent-color:var(--green)}
.analysis-status small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.analysis-status progress[hidden],.analysis-status strong[hidden]{display:none}
.analysis-status button{justify-self:start;min-height:36px}
.analysis-status button{border:1px solid var(--green);border-radius:5px;background:transparent;color:var(--green);padding:7px 11px;cursor:pointer}
.analysis-status button[hidden]{display:none}
.edit-info-btn{display:inline-flex;align-items:center;gap:6px;margin-top:15px;padding:0;border:0;background:none;color:var(--green);font-size:12px;font-weight:650}.edit-info-btn[hidden]{display:none}.edit-info-btn:hover{text-decoration:underline}.info-field{display:block;margin:15px 0;color:var(--ink);font-size:13px;font-weight:650}.info-field span{color:var(--muted);font-size:11px;font-weight:400}.info-field input{display:block;width:100%;height:42px;margin-top:8px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}.info-field input:focus{border-color:var(--green)}dialog .info-message{margin:17px 0;color:var(--muted)}.info-submit{width:100%;padding:12px 16px;border:0;border-radius:6px;background:var(--green);color:var(--bg);font-size:13px;font-weight:750}.info-submit:disabled{opacity:.5;cursor:wait}

.cover-notice{max-width:470px;margin:14px 0 0!important;color:var(--orange)!important;font-size:12px!important;line-height:1.6}.cover-notice[hidden]{display:none}.manual-cover-btn{display:block;margin-top:10px;padding:11px 16px;text-align:center;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-size:13px;font-weight:650;cursor:pointer}.manual-cover-btn:hover{border-color:var(--green);color:var(--green)}
.record-card:disabled{cursor:wait;opacity:.72}.record-card:disabled:hover .cover{transform:none}
.queue-panel{position:fixed;right:clamp(18px,4vw,60px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:6;width:min(365px,calc(100vw - 28px));max-height:min(390px,60vh);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.queue-panel[hidden],.queue-list[hidden]{display:none}
.queue-head{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface2)}
.queue-head strong,.queue-head span{display:block}.queue-head strong{font-size:15px}.queue-head span{color:var(--muted);font-size:12px;line-height:1.45;margin-top:4px}.queue-head button{border:0;background:none;color:var(--green);font-size:12px;font-weight:650;padding:4px 0}
.queue-list{overflow-y:auto;overscroll-behavior:contain}.queue-item{padding:11px 16px 12px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center}
.queue-remove{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:6px;padding:7px 10px;font:inherit;font-size:12px;min-height:34px;cursor:pointer}.queue-remove:hover{color:var(--ink);border-color:currentColor}.queue-remove:focus-visible{outline:2px solid var(--green);outline-offset:3px}.queue-item progress{grid-column:1 / -1}
.queue-open{display:block;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:0}.queue-open strong{display:block;font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-open span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:3px;overflow-wrap:anywhere}.queue-open:not(:disabled):hover strong{color:var(--green)}.queue-open:disabled{cursor:wait;opacity:.8}
.queue-item progress{display:block;width:100%;height:5px;margin-top:9px;accent-color:var(--green)}
.queue-progress{grid-column:1 / -1;min-width:0}.queue-progress-detail{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.queue-open span{font-variant-numeric:tabular-nums}
body.is-transitioning .queue-panel{pointer-events:none}
@media(max-width:720px){.queue-panel{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);max-height:min(300px,48vh)}}
