*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:#0e0e10;color:#e0e0e0}@font-face{font-family:zpix;src:url(/fonts/zpix.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}.app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.layout{display:flex;align-items:flex-start;justify-content:center;gap:80px;width:100%;max-width:1200px;height:100%;padding:40px;box-sizing:border-box}.panel{flex-shrink:0;width:400px;display:flex;flex-direction:column;gap:28px;overflow-y:auto;max-height:100vh;padding-bottom:80px;padding-right:20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.panel::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.panel::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.panel__github{display:flex;align-items:center;color:#ffffff4d;text-decoration:none;transition:color .2s;flex-shrink:0;margin:0 4px}.panel__github:hover{color:#ffffffb3}.panel__header{display:flex;align-items:flex-start;justify-content:space-between}.panel__title{font-size:28px;font-weight:700;color:#fff;letter-spacing:1px}.panel__desc{font-size:14px;color:#666;line-height:1.5}.panel__section{display:flex;flex-direction:column;gap:12px}.panel__section-title{font-size:13px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:1px}.ratio-group{display:flex;gap:8px}.ratio-btn{padding:2px 5px;width:100%;max-width:60px;border:1px solid #2a2a2e;border-radius:6px;background:transparent;color:#666;font-size:14px;cursor:pointer;transition:all .2s}.ratio-btn--active{border-color:#fe2c55;color:#fe2c55;background:#fe2c5514}.ratio-btn:hover:not(.ratio-btn--active):not(:disabled){border-color:#444;color:#aaa}.ratio-btn:disabled{opacity:.35;cursor:not-allowed}.quick-range{display:flex;gap:8px;margin-bottom:12px}.panel__files{display:flex;flex-direction:column;gap:12px}.uploader{width:100%;height:64px;border:1px dashed #2a2a2e;border-radius:10px;cursor:pointer;display:flex;align-items:center;padding:0 16px;transition:border-color .2s,background .2s;gap:12px}.uploader:hover,.uploader--dragging{border-color:#fe2c55;background:#fe2c5508}.uploader--filled{border-style:solid;border-color:#1e1e22}.uploader__placeholder{display:flex;align-items:center;gap:12px;width:100%}.uploader__label{font-size:14px;font-weight:500;color:#ccc;flex-shrink:0}.uploader__hint{font-size:12px;color:#444;margin-left:auto}.uploader__preview{display:flex;align-items:center;gap:12px;width:100%}.uploader__name{font-size:13px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.uploader__image{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}.panel__actions{margin-top:8px;display:flex;gap:10px}.panel__preview{padding:14px 0;border:1px solid #2a2a2e;border-radius:8px;background:transparent;color:#ccc;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;width:120px;flex-shrink:0}.panel__preview:hover:not(:disabled){border-color:#444;color:#fff}.panel__preview--active{border-color:#fe2c55;color:#fe2c55;background:#fe2c5514}.panel__preview:disabled{opacity:.35;cursor:not-allowed}.panel__export{padding:14px 0;border:none;border-radius:8px;background:#fe2c55;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s;flex:1}.panel__export:disabled{opacity:.35;cursor:not-allowed}.panel__export:hover:not(:disabled){opacity:.85}.panel__export--download{background:#25f4ee;color:#000}.preview{flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;height:100vh}.phone{position:relative;background:#1a1a1e;border-radius:40px;padding:12px;box-shadow:0 0 0 1px #ffffff0f,0 20px 60px #00000080,inset 0 0 0 1px #ffffff0a}.phone--portrait{width:320px;height:660px}.phone--landscape{width:560px;height:340px;border-radius:28px;padding:10px}.phone__screen{width:100%;height:100%;border-radius:30px;overflow:hidden;position:relative;background:#000}.phone--landscape .phone__screen{border-radius:20px}.preview__mute-btn{position:absolute;top:0;right:-50px;z-index:10;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#2a2a2e;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.preview__mute-btn:hover{background:#3a3a3e}.phone__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#333;font-size:14px}.preview__video{width:100%;height:100%;object-fit:contain;background:#000}.player{width:100%;height:100%;position:relative;overflow:hidden}.player__bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.player__bg:active{cursor:grabbing}.player__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0000004d}.player__cd-group{position:absolute;top:8%;left:0;width:100%;display:flex;align-items:center;z-index:2;pointer-events:none;padding:0 12px}.player__cd-case{flex-shrink:0;width:100px;height:100px;border-radius:4px;overflow:hidden;position:relative;z-index:2;box-shadow:0 8px 24px #00000080,0 2px 6px #0000004d,inset 0 0 0 1px #ffffff0f;border:1.5px solid rgba(255,255,255,.35)}.player__cd-case-img{width:100%;height:100%;object-fit:cover}.player__cd{flex-shrink:0;position:relative;z-index:1;margin-left:-45px;animation:cdSlideOut 1s cubic-bezier(.16,1,.3,1) forwards}.player__cd-disc{width:85px;height:85px;border-radius:50%;background-size:cover;background-position:center;border:3px solid rgba(255,255,255,.65);animation:cdSpin 8s linear 1s infinite;box-shadow:0 0 0 1px #0000004d,0 4px 20px #0006}.player__cd-hole{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:#111;border:2px solid rgba(255,255,255,.1);transform:translate(-50%,-50%);box-shadow:inset 0 0 6px #00000080}@keyframes cdSlideOut{0%{transform:translate(-55px)}to{transform:translate(0)}}@keyframes cdSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player__cd-info{margin-left:14px;min-width:0}.player__cd-title{font-size:20px;font-weight:700;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.8)}.player__cd-album{font-size:12px;color:#ffffff73;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}.player__cd-artist{font-size:13px;color:#ffffff80;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}.player__cd-vip{display:inline-block;margin-top:10px;padding:1px 5px;font-size:10px;font-weight:600;letter-spacing:.3px;color:#ffffff80;border:1px solid rgba(255,255,255,.15);border-radius:3px}.player__ripple{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.intro-card{position:absolute;left:12px;top:12px;z-index:5;pointer-events:none}.intro-card--fade{opacity:0;transition:opacity .8s ease-out}.intro-card__inner{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;max-width:220px}.intro-card__thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}.intro-card__info{min-width:0}.intro-card__title{font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.intro-card__artist{margin-top:2px;font-size:11px;color:#ffffff80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player__content{position:absolute;right:0;left:0;top:26%;bottom:22%;display:flex;align-items:center;justify-content:center}.player__controls{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;gap:12px;padding:24px 16px 20px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.4));z-index:10}.player__visualizer{height:32px}.player__progress-row{display:flex;align-items:center;gap:8px}.player__progress-bar{flex:1;height:2px;background:#ffffff26;border-radius:2px;position:relative}.player__progress-fill{height:100%;background:#fff;border-radius:2px;position:relative;max-width:100%}.player__progress-thumb{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 4px #0000004d}.player__time{font-size:11px;color:#fff9;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:36px;text-align:center}.player__btn-row{display:flex;align-items:center;justify-content:center;gap:28px}.player__btn-play{width:40px;height:40px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.player__btn-skip{width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7}.lyric-container{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.lyric-list{display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.lyric-line{height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);opacity:var(--opacity, .3);transition:opacity .4s ease,font-size .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1),text-shadow .3s ease;padding:0 20px;text-align:center;line-height:1.4}.lyric-line--active{font-size:20px;font-weight:700;color:#fff;transform:scale(1.06);text-shadow:0 0 calc(var(--glow, 0) * 1px) rgba(254,44,85,.6),0 0 calc(var(--glow-spread, 0) * 1px) rgba(254,44,85,.3),0 2px 8px rgba(0,0,0,.8)}.lyric-line--entering{animation:lyricEnter .4s cubic-bezier(.34,1.56,.64,1)}@keyframes lyricEnter{0%{opacity:0;transform:scale(.85) translateY(8px);filter:blur(4px)}to{opacity:1;transform:scale(1.06) translateY(0);filter:blur(0)}}.lyric-line--portrait{height:38px;font-size:14px;padding:0 16px}.lyric-line--portrait.lyric-line--active{font-size:17px}.lyric-mask{position:absolute;left:0;right:0;height:80px;pointer-events:none;z-index:1}.lyric-mask--top{top:0}.lyric-mask--bottom{bottom:0;height:120px}.panel__advanced-toggle{display:flex;align-items:center;gap:6px;background:none;border:none;color:#555;font-size:13px;cursor:pointer;padding:0;transition:color .2s}.panel__advanced-toggle:hover{color:#999}.panel__arrow{display:inline-block;width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}.panel__arrow--up{transform:rotate(135deg)}.panel__advanced{display:flex;flex-direction:column;gap:14px}.cfg-row{display:flex;align-items:center;gap:12px}.cfg-label{font-size:13px;color:#888;width:72px;flex-shrink:0}.cfg-input-wrap{flex:1;display:flex;align-items:center;gap:8px}.cfg-input{flex:1;padding:6px 10px;border:1px solid #2a2a2e;border-radius:6px;background:#161618;color:#ddd;font-size:13px;font-variant-numeric:tabular-nums;outline:none;transition:border-color .2s}.cfg-input:focus{border-color:#fe2c55}.cfg-input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#2a2a2e;border:none;border-radius:2px;padding:0}.cfg-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fe2c55;cursor:pointer}.cfg-unit{font-size:12px;color:#555;flex-shrink:0}.cfg-select-wrap{display:flex;gap:6px}.cfg-select-btn{padding:5px 12px;border:1px solid #2a2a2e;border-radius:6px;background:transparent;color:#666;font-size:12px;cursor:pointer;transition:all .2s}.cfg-select-btn--active{border-color:#fe2c55;color:#fe2c55;background:#fe2c5514}.cfg-select-btn:hover:not(.cfg-select-btn--active){border-color:#444;color:#aaa}.range-slider{display:flex;flex-direction:column;gap:10px}.range-slider__labels{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#e0e0e0;font-variant-numeric:tabular-nums}.range-slider__track{position:relative;height:28px;display:flex;align-items:center}.range-slider__fill{position:absolute;height:4px;background:#fe2c55;border-radius:2px;pointer-events:none}.range-slider__thumb{position:absolute;width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}.range-slider__thumb::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:grab;pointer-events:all;box-shadow:0 0 4px #0000004d;transition:transform .15s}.range-slider__thumb::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.range-slider__thumb::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:grab;pointer-events:all;border:none;box-shadow:0 0 4px #0000004d}.range-slider__hint{font-size:12px;color:#555;text-align:center;font-variant-numeric:tabular-nums}