@charset "UTF-8";
:root{--ink:#343344;--muted:#85818f;--purple:#6c527e;--line:#e5e0e9;--paper:#faf9fc;--serif:Georgia,"Times New Roman","Songti SC",SimSun,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;font-size:14px}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #957bac;outline-offset:5px}button{border:0;background:none}h1,h2,h3,p{margin:0}::selection{background:#d9cbe7}.header{position:fixed;z-index:20;top:0;left:0;width:100%;height:80px;display:flex;justify-content:space-between;align-items:stretch;pointer-events:none}.brand{width:330px;display:flex;flex-direction:column;justify-content:center;padding-left:47px;background:#fff;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);pointer-events:auto}.brand>span{font:42px/.92 var(--serif);letter-spacing:-4px;color:#51455f}.brand small{font-size:7px;letter-spacing:2px;margin-top:7px;margin-left:8px;color:#80718b}.header nav{display:flex;align-items:center;justify-content:flex-end;gap:44px;width:520px;padding:0 35px 0 60px;background:#fff;clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%);pointer-events:auto}.header nav>a{font-size:13px;font-weight:600;position:relative;padding:28px 0;white-space:nowrap}.header nav>a:after{position:absolute;content:"";height:2px;bottom:17px;left:50%;right:50%;background:var(--purple);transition:.2s}.header nav>a:hover:after,.header nav>a.active:after{left:0;right:0}.account{display:flex;align-items:center;gap:9px;background:#f7f6f9;min-width:105px;max-width:170px;height:37px;padding:0 22px;clip-path:polygon(13% 0,87% 0,100% 50%,87% 100%,13% 100%,0 50%);filter:drop-shadow(0 3px 1px #aba5b5);font-size:12px;font-weight:600}.account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}.hero{height:100svh;min-height:650px;max-height:1200px;position:relative;overflow:hidden;background:#263c65}.hero-image{position:absolute;inset:0;background-image:url('/assets/hero.png');background-size:cover;background-position:center bottom}.hero:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(28,30,52,.4));pointer-events:none}.hero-note{position:absolute;bottom:36px;left:42px;z-index:2;color:white;font-size:10px;letter-spacing:2px;display:flex;align-items:center;gap:15px;text-shadow:0 1px 6px #273149}.hero-note i{height:1px;width:35px;background:#ffffff8c}.diamond{font-size:27px}.hero-index{position:absolute;right:40px;bottom:38px;color:#fff;z-index:2;font-size:10px;letter-spacing:3px}.scroll-cue{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);z-index:3;color:white;display:flex;align-items:center;flex-direction:column;font-size:9px;letter-spacing:4px;gap:7px;text-shadow:0 1px 5px #383751}.scroll-line{height:24px;width:1px;background:#fffc}.scroll-cue b{font-size:17px;font-weight:400;margin-top:-13px}.section{padding:106px max(7vw,30px);scroll-margin-top:0}.section-head{max-width:1360px;margin:auto auto 38px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:9px;font-weight:600;letter-spacing:3px;color:#94879f;margin-bottom:15px}h1,h2{font-weight:400}h1{font-size:34px;letter-spacing:4px}h1>span,h2>span{display:inline-block;font:italic 22px var(--serif);letter-spacing:0;color:#a39aa9;margin-left:24px}.section-description{color:#96919f;font-size:12px;line-height:2;letter-spacing:1px}.connection-status{max-width:1360px;margin:0 auto 18px;font-size:11px;letter-spacing:.6px;color:#8c8594;display:flex;align-items:center;gap:8px}.connection-status:before{content:"";width:5px;height:5px;background:#a18daf;transform:rotate(45deg)}.ranking{background:radial-gradient(ellipse at 80% 20%,#f0ecf5,transparent 55%),#faf9fc}.ranking-layout{max-width:1360px;display:grid;grid-template-columns:310px minmax(0,1fr);margin:auto;border:1px solid var(--line);background:#fff;box-shadow:0 17px 50px #51446305;min-height:650px}.song-panel{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.search{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:24px 21px}.search svg{width:17px;height:17px;stroke:#aaa0b4;stroke-width:1.5;fill:none;flex-shrink:0}.search input{border:0;outline:0!important;width:100%;font-size:12px;color:var(--ink);background:none}.search input::placeholder{color:#b0a9b7}.song-toolbar{display:flex;align-items:center;justify-content:space-between;padding:19px 20px 13px;font-size:11px;color:#82768d}.song-toolbar small{font-size:9px;color:#b4a9be;margin-left:5px}.song-toolbar select{font-size:10px;border:0;background:none;color:#9a8ea6;max-width:95px}.song-list{height:465px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d3cadc transparent;padding:0 10px}.song-item{display:flex;align-items:center;text-align:left;width:100%;gap:14px;padding:14px 10px;border-bottom:1px solid #f2eff5;transition:background .2s;position:relative}.song-item:hover{background:#faf8fc}.song-item.active{background:#f0ebf5}.song-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#785d8b}.song-thumb{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(140deg,#c3bbd4,#ebe6f4 45%,#9aadc1);color:#fff;font:27px var(--serif)}.song-item:nth-child(3n+2) .song-thumb{background:linear-gradient(140deg,#2d3b5c,#a7a2bb 55%,#735b8c)}.song-item:nth-child(3n) .song-thumb{background:linear-gradient(140deg,#c0acb0,#eee7e3 50%,#9795bd)}.song-copy{min-width:0;flex:1}.song-name{font-size:12px;line-height:1.6;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-id{font-size:9px;display:block;color:#aaa1b2;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song-arrow{font-size:17px;color:#a899b4}.catalog-note{font-size:9px;color:#b3aaba;line-height:1.8;padding:18px 22px;border-top:1px solid var(--line);margin-top:auto;letter-spacing:.4px}.empty{padding:40px 12px;text-align:center;font-size:12px;color:#a79eaf;line-height:2}.leaderboard{min-width:0;display:flex;flex-direction:column}.chart-head{display:flex;align-items:center;gap:22px;padding:29px 32px;background:linear-gradient(120deg,#f8f6fa,#eeebf3 70%,#f3f2f8);position:relative;overflow:hidden;min-height:142px}.chart-art{width:80px;height:80px;flex-shrink:0;background:linear-gradient(140deg,#9787ac,#dad7e8 50%,#9daec1);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;box-shadow:0 6px 18px #a49ab430}.chart-art>span{font:44px var(--serif);line-height:1}.chart-art small{font-size:6px;letter-spacing:3px;margin-top:6px}.chart-head>div:nth-child(2){min-width:0}.chart-head .eyebrow{font-size:8px;margin-bottom:10px;letter-spacing:2px}.chart-head h2{font:24px var(--serif);overflow-wrap:anywhere}.chart-head p:last-child{font-size:10px;color:#a399ad;margin-top:9px;letter-spacing:.7px}.chart-symbol{font:120px var(--serif);color:#e4dfed;position:absolute;right:20px;top:-5px;pointer-events:none}.difficulty-row{display:flex;gap:20px;border-bottom:1px solid var(--line);padding:0 30px;overflow-x:auto}.difficulty-row button{padding:21px 0 17px;font-size:9px;letter-spacing:1px;color:#a299ae;position:relative;flex-shrink:0}.difficulty-row button.active{color:var(--purple);font-weight:700}.difficulty-row button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--purple)}.difficulty-row button[data-diff="0"].active{color:#5088a1}.difficulty-row button[data-diff="1"].active{color:#73955c}.difficulty-row button[data-diff="3"].active{color:#ad516f}.difficulty-row button[data-diff="4"].active{color:#896cb2}.rank-meta{display:flex;align-items:center;justify-content:space-between;padding:24px 30px 18px;font-size:12px;letter-spacing:1px}.rank-meta small{font-size:9px;color:#aaa0b4;margin-left:8px}.text-button{font-size:11px;letter-spacing:1px;color:#9d8da9;padding:5px}.table-wrap{overflow-x:auto;padding:0 30px}table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:12px;text-align:left}th{font-size:9px;font-weight:400;color:#aaa0b3;padding:12px 9px;background:#f8f6fa;letter-spacing:1px}td{padding:20px 9px;border-bottom:1px solid #eeeaf2}td:nth-child(1){font:italic 18px var(--serif);color:#9e91ab;width:65px}td:nth-child(3){font:15px var(--serif);letter-spacing:1px}td:nth-child(4){font-size:8px;color:#9d8baa}td:nth-child(5){font-size:11px;color:#958b9e}tr.me{background:#f6f1fa}tr.me td:nth-child(2):after{content:"你";font-size:8px;color:#8e6da2;margin-left:8px}tr.top-three td:first-child{color:#9e7d57}.rank-state{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:36px 25px;min-height:305px;text-align:center}.state-symbol{font:40px var(--serif);color:#b9aac7;margin-bottom:17px}.rank-state h3{font-weight:400;font-size:16px;letter-spacing:2px;margin-bottom:13px}.rank-state p{font-size:11px;color:#a89dae;line-height:1.9;max-width:380px}.primary{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:43px;background:#51415f;color:#fff;padding:12px 25px;font-size:11px;letter-spacing:2px;transition:background .2s}.primary:hover{background:#765888}.rank-state .primary{margin-top:26px}.rank-bottom{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:16px 30px;gap:15px;margin-top:auto;font-size:10px;color:#a193ad;min-height:64px}.pagination{display:flex;align-items:center;gap:18px}.pagination button{padding:6px;font-size:16px}.pagination span{font:12px var(--serif)}.story{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-top:115px;padding-bottom:115px;background:#efedf4;position:relative;overflow:hidden}.story:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#f1eef600, #faf8fccc);pointer-events:none}.story-visual{min-height:540px;position:relative;overflow:hidden;background:#54516e}.story-image{position:absolute;inset:0;background-image:linear-gradient(0deg,#242238d9,transparent 70%),url('/assets/hero.png');background-size:auto,auto 130%;background-position:center,34% 65%;filter:saturate(.65)}.story-visual:after{position:absolute;content:"";inset:17px;border:1px solid #ffffff45;pointer-events:none}.story-caption{position:absolute;bottom:52px;left:45px;right:35px;color:#fff}.story-caption>span{font:8px Arial;letter-spacing:3px;color:#ddd5e5}.story-caption p{font:29px/1.9 var(--serif);letter-spacing:4px;margin:19px 0}.story-caption small{font-size:9px;letter-spacing:2px;color:#d6cedf}.story-content{position:relative;padding:25px 0 10px;max-width:450px}.story-content h2{font-size:34px;letter-spacing:5px}.story-intro{font:20px/2.1 var(--serif);letter-spacing:2px;margin:35px 0 20px}.story-description{color:#9b91a7;font-size:11px;line-height:2.3;letter-spacing:1px}.story-list{margin-top:32px;border-top:1px solid #dcd5e5}.story-link{width:100%;display:flex;align-items:center;text-align:left;gap:20px;padding:22px 0;border-bottom:1px solid #dcd5e5}.story-link>span:first-child{font:italic 14px var(--serif);color:#aa9bb9}.story-link>div{flex:1}.story-link strong{font-size:13px;letter-spacing:2px;font-weight:400}.story-link small{display:block;margin-top:6px;font-size:8px;color:#a89bb4;letter-spacing:2px}.story-link>span:last-child{font-size:20px;color:#9c85ad;transition:transform .2s}.story-link:hover>span:last-child{transform:translateX(5px)}.story-disclaimer{display:block;margin-top:20px;font-size:9px;color:#ada3b6;line-height:1.8}footer{display:flex;align-items:center;gap:40px;position:relative;padding:55px 7vw 80px;background:#fff}.footer-brand{font:37px var(--serif);letter-spacing:-3px;color:#73637e}footer p{font-size:10px;color:#a094ac;letter-spacing:2px;line-height:1.8}footer p span{display:block;font-size:7px;letter-spacing:2px;color:#c0b8c7;margin-top:5px}footer>a:last-of-type{margin-left:auto;font-size:10px;color:#a094ac;letter-spacing:1px}footer>small{position:absolute;bottom:25px;left:7vw;font-size:8px;letter-spacing:.5px;color:#b8b0bf}dialog{border:1px solid #dcd3e5;box-shadow:0 24px 100px #29223945;color:var(--ink);max-width:calc(100% - 32px);max-height:90svh;overflow-y:auto}dialog::backdrop{background:#28243891;backdrop-filter:blur(7px)}.login-dialog{width:430px;padding:42px 44px 35px;text-align:center;background:linear-gradient(145deg,#fff,#f6f2fa)}.close-dialog{position:absolute;right:14px;top:9px;font-size:26px;font-weight:200;color:#ac9cb6;padding:7px;line-height:1}.modal-emblem{font:40px var(--serif);color:#9d86b4;margin-bottom:16px}.login-dialog .eyebrow{font-size:8px;letter-spacing:2px}.login-dialog h2{font:25px var(--serif);letter-spacing:3px;overflow-wrap:anywhere}.modal-description{font-size:11px;color:#a091ad;margin-top:14px;margin-bottom:30px}#login-form{text-align:left}#login-form label{display:block;font-size:11px;letter-spacing:1px;margin-bottom:21px}#login-form input{width:100%;display:block;margin-top:9px;border:0;border-bottom:1px solid #d8cfe1;background:#ffffff80;padding:13px 12px;font-size:12px;outline-offset:1px}#login-form input::placeholder{color:#b5a9be}.password-field{position:relative}.password-field input{padding-right:55px!important}#toggle-password{position:absolute;right:8px;top:11px;font-size:9px;color:#a08bb2;padding:7px}.form-error{font-size:11px;color:#af5977;line-height:1.8;min-height:20px;margin:5px 0 10px}.login-submit{width:100%;margin-top:7px}.login-footnote{font-size:9px;color:#b2a6bc;margin-top:24px;letter-spacing:1px}.logout{margin-top:22px;color:#9d87ac;font-size:11px;letter-spacing:2px;padding:10px}.reader-dialog{width:650px;padding:60px 65px;background:linear-gradient(110deg,#fffeff,#f5f1f9)}.reader-dialog h2{font:29px var(--serif);letter-spacing:5px;margin:20px 0}.reader-note{font-size:9px;letter-spacing:1px;color:#b4a7be;margin-bottom:35px}#reader-text p{font:15px/2.7 var(--serif);letter-spacing:1px;margin-bottom:22px;color:#807089}.reader-dialog .text-button{margin-top:15px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#4b3c5c;color:white;padding:14px 24px;z-index:60;font-size:12px;box-shadow:0 4px 20px #3332;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}.toast.show{opacity:1}.skip{position:fixed;top:-60px;left:20px;padding:14px;background:#fff;z-index:100}.skip:focus{top:10px}.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}[hidden]{display:none!important}
@media(min-width:1800px){.hero-image{background-size:100% 100%}.brand{width:350px}.header nav{width:540px}}@media(max-width:1100px){.section{padding-left:4vw;padding-right:4vw}.ranking-layout{grid-template-columns:255px minmax(0,1fr)}.difficulty-row{gap:17px;padding:0 22px}.table-wrap{padding:0 20px}.chart-head{padding:27px 23px}.story{gap:6%}.header nav{gap:30px;width:430px}.brand{width:280px;padding-left:32px}.hero-note{left:25px}.chart-symbol{opacity:.45}}@media(max-width:760px){html{scroll-padding-top:75px}.header{height:65px;background:#fff}.brand{width:180px;padding-left:20px;clip-path:none}.brand>span{font-size:31px;letter-spacing:-3px}.brand small{font-size:5px;letter-spacing:1px;margin-left:3px}.header nav{width:auto;gap:20px;padding:0 18px;clip-path:none}.header nav>a{font-size:11px;padding:24px 0}.account{min-width:58px;max-width:100px;gap:5px;padding:0 10px;height:32px;font-size:10px}.account svg{width:13px}.hero{height:85svh;min-height:540px;margin-top:65px;max-height:850px}.hero-image{background-size:auto 113%;background-position:54% bottom}.hero-note{font-size:8px;letter-spacing:1px;left:20px;bottom:27px;gap:8px}.hero-note i{width:20px}.hero-note .diamond{font-size:19px}.hero-index{font-size:8px;right:20px;bottom:30px}.scroll-cue{bottom:20px;font-size:8px}.hero-note{max-width:35%;line-height:1.7;flex-wrap:wrap}.hero-note i{display:none}.section{padding:65px 20px}.section-head{margin-bottom:25px;display:block}.section-description{font-size:11px;margin-top:22px}h1{font-size:28px}h1>span,h2>span{font-size:20px;margin-left:15px}.eyebrow{font-size:8px;letter-spacing:2px}.ranking-layout{grid-template-columns:1fr}.song-panel{border-right:0;border-bottom:1px solid var(--line)}.search{padding:19px 18px}.song-toolbar{padding:15px 18px}.song-list{height:195px}.song-item{padding:10px}.song-thumb{width:34px;height:34px}.catalog-note{display:none}.song-name{font-size:12px}.song-id{font-size:8px}.chart-head{min-height:125px;padding:23px 20px;gap:15px}.chart-art{width:66px;height:66px}.chart-head h2{font-size:23px}.chart-symbol{font-size:100px}.difficulty-row{padding:0 20px;justify-content:space-between;gap:12px}.difficulty-row button{font-size:8px;letter-spacing:.6px;padding:20px 0 17px}.rank-meta{padding:22px 18px 15px}.table-wrap{padding:0 13px}th{font-size:8px;letter-spacing:0;padding:11px 6px}td{font-size:11px;padding:17px 6px}td:nth-child(1){font-size:16px;width:auto}td:nth-child(3){font-size:12px;letter-spacing:0}td:nth-child(5){font-size:10px}.rank-state{min-height:280px;padding:34px 18px}.rank-state h3{font-size:14px}.rank-state p{font-size:10px}.rank-bottom{padding:14px 18px;font-size:9px}.pagination{gap:11px}.story{display:flex;flex-direction:column;gap:40px}.story-visual{min-height:410px}.story-caption{left:32px;bottom:40px}.story-caption p{font-size:25px}.story-content{padding:0;max-width:none}.story-content h2{font-size:28px}.story-intro{font-size:18px;margin-top:28px}.story-link{padding:21px 0}.story-disclaimer{font-size:8px}footer{padding:40px 20px 75px;gap:22px;flex-wrap:wrap}.footer-brand{font-size:28px}footer p{font-size:8px}footer p span{font-size:6px}footer>a:last-of-type{font-size:9px}footer>small{left:20px;font-size:7px;right:20px;line-height:1.8}.login-dialog{padding:36px 27px 28px}.reader-dialog{padding:50px 28px}.reader-dialog h2{font-size:25px}#reader-text p{font-size:14px;line-height:2.5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Song jackets retain their original files and square composition. */
.song-thumb,.chart-art{position:relative;overflow:hidden}.song-thumb img,.chart-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}


.report-button{border:1px solid #c4b1cf;background:#fff;color:#755286;padding:6px 14px;cursor:pointer}.online-dialog textarea{width:100%;padding:12px;margin:12px 0;font:inherit;box-sizing:border-box}