:root{font-family:PingFang SC,Microsoft YaHei,sans-serif;color:#24251e;background:#f4f1e7;font-synthesis:none;--paper: #f4f1e7;--ink: #24251e;--acid: #d9ed58;--muted: #6a6c5e;--line: #d6d7c8}.share-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;color:var(--ink);border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow-y:auto;box-shadow:0 20px 80px #24251e35}.share-dialog::backdrop{background:#171d1680;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.share-inner{padding:38px 28px 26px;position:relative}.share-close{position:absolute;top:8px;right:10px;border:0;padding:4px 12px;font-size:25px}.share-inner h2{font-family:Smiley,sans-serif;font-size:32px;font-weight:400;margin:0}.share-preset{color:var(--muted);font-size:13px;margin:10px 0 24px}.share-inner .primary{width:100%}.share-secondary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0;font-size:12px}.share-secondary button{padding:9px 14px}.share-secondary a{padding:9px 4px}.share-link{display:block;color:var(--muted);font-size:11px}.share-link input{width:100%;display:block;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:5px;background:#faf9f2;color:var(--ink);font-size:12px}.share-message{font-size:12px;margin:12px 0 0;color:var(--muted)}.share-qr{margin:0 auto 20px;text-align:center}.share-qr img{display:block;margin:auto;background:#fff;padding:8px;border-radius:6px}.share-qr figcaption{font-size:11px;margin-top:8px;color:var(--muted)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background-image:radial-gradient(#72786212 .7px,transparent .7px);background-size:6px 6px}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:transparent;border-radius:100px;padding:10px 18px;transition:background .18s,transform .18s}button:disabled{opacity:.45;cursor:not-allowed}button:not(:disabled):hover{background:#e3e5d8}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #687500;outline-offset:5px}button:not(:disabled):active{transform:translateY(1px)}.skip{position:fixed;left:10px;top:-90px;z-index:99;background:var(--acid);padding:15px}.skip:focus{top:10px}.topbar{max-width:1560px;margin:auto;padding:19px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:1px}.brand img{filter:brightness(0);width:44px;height:44px}.brand small{display:block;font-size:10px;letter-spacing:3px;font-weight:400;margin-top:3px}.top-actions{display:flex;align-items:center;gap:18px}.showcase-action{padding:8px 10px;font-size:12px;border-color:transparent;color:var(--muted)}.live-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.live-label i{width:6px;height:6px;border-radius:50%;background:#687500}.quiet{background:var(--ink);color:var(--paper);border-color:var(--ink);font-size:13px}.quiet:not(:disabled):hover{background:#424637}.quiet span{margin-left:20px}main{max-width:1560px;margin:auto;padding:0 5%}.hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;min-height:400px;padding:28px 0 0;overflow:hidden}.hero .eyebrow{margin-bottom:14px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;margin:0 0 22px;color:var(--muted)}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-family:Smiley,sans-serif;font-size:clamp(52px,5.4vw,78px);line-height:1.12;letter-spacing:-3px;font-weight:400;margin:0 0 12px}h1 span{position:relative;z-index:0}h1 span:after{content:"";position:absolute;z-index:-1;background:var(--acid);height:23%;bottom:8%;left:0;right:0;transform:rotate(-2deg)}.intro{color:var(--muted);font-size:14px;line-height:1.7;margin:10px 0}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;background:var(--acid);padding:18px 26px;font-size:15px;font-weight:700;text-decoration:none;border-radius:100px}.primary:not(:disabled):hover{background:#c5db34}.hero-link{margin-top:3px;padding:14px 24px}.hero-art{position:relative;align-self:center;min-height:280px;display:grid;place-items:center}.record{width:265px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at center,#20241c 0 2px,#34392c 3px 4px,#20241c 5px 7px);box-shadow:14px 24px 32px #31382425;transform:rotate(14deg);display:grid;place-items:center;position:relative}.record:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,#ffffff20 40deg,transparent 80deg,transparent 180deg,#ffffff15 220deg,transparent 260deg)}.record-label{background:var(--acid);border-radius:50%;width:47%;height:47%;text-align:center;display:flex;flex-direction:column;justify-content:center;font-size:10px;line-height:1.2}.record-label b{font-family:Smiley;font-size:33px;margin:5px 0}.record-label span{font:800 6px Mont,sans-serif;letter-spacing:1px}.orbit{position:absolute;border:1px solid #aab292;border-radius:50%;width:98%;height:50%;transform:rotate(-27deg)}.orbit-two{transform:rotate(27deg);border-style:dashed;opacity:.5}.paper-tag{position:absolute;bottom:13px;left:0;transform:rotate(-8deg);background:#fcfbf5;border:1px solid var(--line);padding:19px 26px;box-shadow:4px 5px #b6bba048;font-size:13px;line-height:1.7}.paper-tag b{font-family:Smiley;font-size:25px;font-weight:400}.spark{position:absolute;right:3%;top:0;font-size:95px;color:#647345;transform:rotate(-15deg)}.hero-foot{grid-column:1 / -1;display:flex;gap:35px;font-size:11px;letter-spacing:1px;border-bottom:1px solid var(--ink);padding:14px 0;margin-top:8px;color:var(--muted)}.chart{padding:30px 0 50px;scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-head .eyebrow{margin-bottom:14px}.section-head h2{font-family:Smiley;font-size:clamp(33px,3.5vw,52px);font-weight:400;letter-spacing:-1px;margin:0}.section-head h2 span{color:#72812f;margin-left:10px}.chart-source{display:flex;flex-direction:column;align-items:end;font-size:12px;gap:9px}.chart-source span{font-size:10px;color:var(--muted)}.chart-meta{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:var(--muted);align-items:center;margin:18px 0 22px}.chart-meta p{margin:0}.chart-meta>span{white-space:nowrap}.song-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:42px 22px}.song{min-width:0;animation:enter .6s both}.song:nth-child(2n){animation-delay:.06s}.song:nth-child(3n){animation-delay:.12s}.cover{position:relative;aspect-ratio:1;overflow:hidden;background:linear-gradient(145deg,#d4d7c5,#aeb99e);border-radius:7px}.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.song:hover .cover img{transform:scale(1.035)}.rank{position:absolute;top:10px;left:10px;background:var(--paper);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font:800 12px Mont,sans-serif}.cover-play{position:absolute;bottom:12px;right:12px;width:43px;height:43px;padding:0;display:grid;place-items:center;background:#f4f1e7ef;border:0;font-size:23px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.song-heading{margin:16px 0 13px}.song h3{font-size:17px;line-height:1.4;margin:0 0 5px}.song-heading p{font-size:12px;color:var(--muted);margin:0}.make{display:flex;width:100%;justify-content:space-between;align-items:center;border-color:var(--ink);border-radius:4px;padding:11px 13px;font-size:12px;font-weight:600}.make:not(:disabled):hover{background:var(--ink);color:var(--paper)}.versions{max-height:264px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.versions-label{font-size:10px;letter-spacing:1px;color:var(--muted)}.version{padding:11px 0;border-bottom:1px solid var(--line)}.version.selected{background:#e5ebce}.version-play{border:0;padding:0;border-radius:3px;display:flex;gap:10px;align-items:center;width:100%;text-align:left}.version-play>span:first-child{font-size:20px}.version-play b{font-size:12px;font-weight:500;display:block}.version-play small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.version-actions{display:flex;justify-content:flex-end;gap:5px;margin-top:4px;align-items:center}.version-actions button,.version-actions a{font-size:11px;padding:6px 9px;border:0;text-decoration:none;border-radius:5px}.version-actions button[aria-pressed=true]{color:#a43a27}.empty{border:1px solid var(--line);padding:60px 24px;text-align:center;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#faf8f0}.empty h3,.empty p{margin:0}.empty p{color:var(--muted);font-size:14px}.loading-mark{width:35px;height:35px;border:2px solid var(--line);border-top-color:#6e7a26;border-radius:50%;animation:spin 1s linear infinite}.notice,.alert{padding:18px 22px;border:1px solid #c7cba9;margin:20px 0;background:#e9edcf;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:13px}.alert{background:#fff2dc;border-color:#decfb1}.alert p{margin:6px 0 0}.alert button,.notice button{flex-shrink:0}.notice button{padding:5px 10px;border:0;font-size:21px}.shared{padding:35px;margin:25px 0;background:var(--ink);color:var(--paper);border-radius:8px}.shared .eyebrow{color:var(--acid)}.shared h2{font-family:Smiley;font-size:35px;font-weight:400;margin:0}.shared p{color:#cbcfbb}.shared .primary{margin-top:10px}footer{padding:26px 0 80px;border-top:1px solid var(--ink);display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}footer>span{font-family:Smiley;font-size:22px;color:var(--ink)}body:has(.dock:not(:empty)) footer{padding-bottom:300px}.dock{position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:5;width:min(920px,calc(100% - 36px));background:var(--ink);color:var(--paper);border-radius:16px;box-shadow:0 14px 50px #24251e35;overflow:hidden}.dock:empty{display:none}.background-jobs{border-bottom:1px solid #ffffff20}.background-jobs summary{cursor:pointer;padding:11px 20px;font-size:11px;color:#e1e5d4}.background-jobs summary span{margin-left:12px;color:#bdc7a3}.background-jobs summary:focus-visible{outline:2px solid var(--acid);outline-offset:-4px}.background-list{max-height:135px;overflow-y:auto;overscroll-behavior:contain}.background-list>p{padding:0 20px;margin:0 0 8px;font-size:10px;color:#bdc7a3}.background-list .job{padding-top:9px;padding-bottom:9px}.job-list{max-height:170px;overflow-y:auto;overscroll-behavior:contain}.job{position:relative;display:flex;gap:13px;align-items:center;padding:14px 20px;border-bottom:1px solid #ffffff20}.job-dot{height:9px;width:9px;flex-shrink:0;border-radius:50%;background:var(--acid)}.job-progress{position:absolute;bottom:0;left:0;right:0;height:2px;overflow:hidden;background:#ffffff16}.job-progress span{display:block;width:32%;height:100%;background:var(--acid);animation:recording-progress 2.2s ease-in-out infinite}@keyframes recording-progress{0%{transform:translate(-100%)}to{transform:translate(415%)}}.make,.quiet,.showcase-action,.transport{min-height:44px}.cover-play,.transport{min-width:44px;min-height:44px}.job-failed .job-dot{background:#e9a786}.working{animation:breathe 2s infinite}.job>div{flex:1;min-width:0}.job b{font-size:12px;font-weight:500;display:block}.job small{display:block;color:#c2c6b5;font-size:11px;margin-top:5px}.job button{border-color:#ffffff45;font-size:11px;padding:8px 12px}.dock button:not(:disabled):hover{background:#4e5540}.job-succeeded b{color:var(--acid)}.poll-error{font-size:11px;padding:12px 20px;color:#f5cea8}.poll-error button{font-size:11px;margin-left:10px}.player{display:flex;align-items:center;gap:16px;padding:14px 20px;flex-wrap:wrap}.player>img{width:46px;height:46px;border-radius:5px;object-fit:cover}.track-title{width:160px;min-width:0}.track-title b{display:block;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-title small{display:block;font-size:11px;color:#c2c6b5;margin-top:5px}.transport{width:43px;height:43px;border:0;background:var(--acid);color:var(--ink);padding:0;font-size:22px}.dock .transport:hover{background:#c5db34}.seek{display:flex;align-items:center;gap:15px;flex:1}.seek input{width:100%;min-width:60px;accent-color:var(--acid);cursor:pointer}.seek span{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#c2c6b5}.player-close{border:0;font-size:22px;padding:5px}.audio-error{width:100%;font-size:12px;color:#f5cea8;margin:0}.preset-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(680px,100%);max-width:100%;height:100dvh;max-height:100dvh;background:var(--paper);color:var(--ink);padding:0;border:0;box-shadow:-20px 0 80px #24251e30;overflow:hidden}.preset-drawer::backdrop{background:#171d1680;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.drawer-inner{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.drawer-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:48px 28px 24px;scroll-padding:16px}.close-drawer{position:absolute;top:13px;right:18px;font-size:26px;padding:3px 13px;border:0;width:44px;height:44px;z-index:2;background:var(--paper)}.drawer-song{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.drawer-song img{width:64px;height:64px;border-radius:5px;object-fit:cover}.drawer-song span{font-size:10px;color:var(--muted)}.drawer-song h2{font-family:Smiley;font-size:32px;margin:7px 0;font-weight:400}.drawer-song p{font-size:12px;margin:0;color:var(--muted)}.drawer-scroll>h3{font-family:Smiley;font-weight:400;font-size:30px;margin:22px 0 18px}.preset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preset{width:100%;display:grid;grid-template-columns:1fr auto;align-content:start;gap:12px;min-height:148px;border-radius:12px;text-align:left;padding:16px;background:#fbfaf5;position:relative}.preset.is-chosen{border:2px solid var(--ink);padding:15px;background:#e9edcf}.preset-number{font:800 12px Mont,sans-serif;background:var(--preset-color);border-radius:50%;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;color:var(--ink)}.preset>span:nth-child(2){grid-column:1 / -1;grid-row:2;min-width:0}.preset small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted)}.preset b{display:block;font-size:19px;margin:4px 0 6px}.preset p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.radio-mark{font-size:19px;position:absolute;top:17px;right:16px}.drawer-bottom{position:sticky;bottom:0;z-index:1;padding:12px 28px max(18px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px #24251e08}.drawer-bottom p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 10px}.drawer-bottom p[role=alert]{color:#a03722;max-height:3em;overflow-y:auto}.drawer-bottom .primary{width:100%;min-height:52px}@media(max-width:359px){.preset-list{grid-template-columns:minmax(0,1fr)}.preset{min-height:116px}}.attract{position:fixed;inset:0;z-index:9;overflow:hidden;background:radial-gradient(ellipse at 80% 40%,#e5ecbc,transparent 60%),var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}.attract h2{font-family:Smiley;font-size:clamp(90px,13vw,180px);font-weight:400;line-height:1.05;margin:0;z-index:1}.attract p{z-index:1}.attract .primary{margin-top:24px;z-index:1}.attract-orbit{position:absolute;width:75vw;height:75vw;min-width:600px;min-height:600px;border:1px solid #adb58e;border-radius:50%;transform:rotateX(50deg) rotate(-20deg)}.attract{border:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none}.attract:not([open]){display:none}.attract{overflow-y:auto}.showcase-works{display:flex;gap:12px;position:relative;z-index:1;max-width:850px;width:100%;margin-top:12px;flex-shrink:0}.showcase-works:empty{display:none}.showcase-works button{background:#faf9ef;display:flex;align-items:center;gap:12px;text-align:left;border-radius:8px;padding:12px;flex:1;min-width:0}.showcase-works img{width:48px;height:48px;border-radius:4px;object-fit:cover}.showcase-works button>span:nth-child(2){flex:1;min-width:0}.showcase-works b,.showcase-works small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.showcase-works b{font-size:13px}.showcase-works small{margin-top:5px;font-size:11px;color:var(--muted)}.showcase-background{color:var(--muted);font-size:12px}.attract:has(.showcase-works:not(:empty)) h2{font-size:clamp(60px,10vw,130px)}@media(max-width:560px){.showcase-works{flex-direction:column;gap:6px;max-width:320px}.showcase-works button{padding:8px}.showcase-works img{width:35px;height:35px}.attract{justify-content:safe center;padding:24px}.attract .eyebrow{margin-bottom:12px}}@keyframes enter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.35}}@media(min-width:1600px){.hero{min-height:420px}.record{width:290px}.hero-art{min-height:300px}}@media(max-width:1100px){.song-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 18px}.hero{min-height:400px}.record{width:280px}.hero-art{min-height:280px}.spark{font-size:70px}.paper-tag{padding:15px 18px}.track-title{width:120px}}@media(max-width:800px){.song-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}.hero{padding-top:28px;min-height:400px}.hero-art{min-height:280px}.record{width:220px}.record-label b{font-size:25px}.record-label{font-size:8px}.record-label span{font-size:4px}.paper-tag{font-size:10px;bottom:-8px}.paper-tag b{font-size:20px}.spark{font-size:55px;right:0}.hero-foot{gap:22px;font-size:10px}.live-label{display:none}.intro{font-size:14px}.hero-link{font-size:13px;padding:15px 20px}.section-head h2{font-size:34px}.chart-source{font-size:11px}.chart-meta{align-items:start;flex-direction:column;gap:10px}.chart{padding-top:28px}.topbar{padding-top:20px;padding-bottom:20px}.seek{gap:8px}.player{gap:10px}.seek span{display:none}}@media(max-width:560px){.top-actions{gap:6px}.showcase-action{font-size:11px;padding:8px}.background-jobs summary{padding:10px 12px;font-size:10px}.background-jobs summary span{margin-left:7px}main{padding:0 6%}.topbar{padding:18px 6%}.brand{font-size:17px;gap:8px}.brand img{width:33px;height:33px}.brand small{font-size:8px;letter-spacing:2px}.quiet{font-size:11px;padding:9px 13px}.quiet span{margin-left:8px}.hero{display:block;min-height:400px;padding-top:24px}.hero-copy{position:relative;z-index:1}.hero .eyebrow{font-size:10px;letter-spacing:1px}h1{font-size:clamp(44px,10.8vw,60px);letter-spacing:-2px}.intro{font-size:13px}.hero-art{position:absolute;right:-60px;bottom:54px;width:155px;min-height:155px;opacity:.95;pointer-events:none}.record{width:135px}.record-label b{font-size:16px}.spark{font-size:42px;top:-15px}.paper-tag{display:none}.paper-tag b{font-size:19px}.hero-foot{position:absolute;bottom:0;width:100%;padding:22px 0;gap:0;justify-content:space-between;letter-spacing:0;font-size:9px}.hero-link{margin-top:5px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}.section-head{align-items:start;flex-direction:column;gap:10px}.section-head .eyebrow{display:none}.section-head h2{font-size:35px}.chart-source{flex-direction:row;align-items:center;gap:12px;font-size:10px}.chart-meta{font-size:11px;margin:18px 0 23px}.song h3{font-size:16px}.song-heading p{font-size:11px}.rank{width:27px;height:27px;font-size:10px;top:8px;left:8px}.cover-play{width:38px;height:38px;bottom:8px;right:8px}.make{font-size:11px;padding:10px}.versions-label{font-size:9px}.version-play{gap:7px}.version-play b{font-size:11px}.version-play small{font-size:9px}.version-actions button,.version-actions a{font-size:10px;padding:6px}.dock{bottom:10px;width:calc(100% - 20px);border-radius:12px}.job{padding:12px;gap:9px}.job b{font-size:11px}.job small{font-size:10px}.job button{font-size:10px;padding:7px 9px}.job-list{max-height:140px}.player{padding:11px 12px;gap:10px}.player>img{width:35px;height:35px}.track-title{flex:1;width:auto}.transport{width:36px;height:36px}.seek{order:5;flex-basis:100%;height:22px}.seek span{display:block}.seek input{margin:0}.player-close{font-size:20px}.player .audio-error{order:6}.drawer-scroll{padding:48px 18px 20px}.drawer-scroll>h3{font-size:25px;margin:18px 0 14px}.drawer-bottom{padding-inline:18px}.preset{padding:13px 12px;gap:8px;min-height:140px}.preset.is-chosen{padding:12px 11px}.preset b{font-size:17px}.preset-number{font-size:11px;width:26px;height:26px}.drawer-song h2{font-size:28px}.drawer-song img{width:52px;height:52px}.notice,.alert{align-items:start;padding:15px;flex-wrap:wrap}.shared{padding:25px}.poll-error{padding:10px 12px}footer{flex-wrap:wrap;gap:10px;padding-bottom:80px}footer p{width:100%;order:3;margin:0}.attract h2{font-size:100px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@font-face{font-family:Smiley;src:url(/demo/assets/display-cn-9vCYB6ra.woff2) format("woff2");font-display:swap}@font-face{font-family:Mont;src:url(/demo/assets/display-latin-B8NavU8Q.woff2) format("woff2");font-weight:800;font-display:swap}