@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&family=Noto+Sans+SC:wght@300;400&display=swap";:root{--ink:#e8e4dc;--paper:#f4f0e8;--mist:#a8b4bc;--jade:#3d7a72;--jade-soft:#8ebdb4;--sand:#d4b896;--serif:"Noto Serif SC", "Songti SC", "SimSun", serif;--sans:"Noto Sans SC", "PingFang SC", "Helvetica Neue", sans-serif;font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-weight:300;line-height:1.6}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);background:#0a1016;transition:background .45s}button{font:inherit}::selection{background:color-mix(in oklab, var(--jade) 45%, transparent);color:var(--paper)}.app{min-height:100dvh;color:var(--ink);--ink:#e8e4dc;--paper:#f4f0e8;--mist:#a8b4bc;--jade:#3d7a72;--jade-soft:#8ebdb4;--sand:#d4b896;--body-bg:#0a1016;--bg-image:url(/bg.jpg);--bg-filter:saturate(.92) contrast(.96);--veil:radial-gradient(ellipse 90% 70% at 50% 40%, #f4f0e838 0%, transparent 62%), linear-gradient(180deg, #080e148c 0%, #0a121a7a 40%, #080e14b8 100%);--grain-opacity:.04;grid-template-rows:auto 1fr auto;transition:color .45s;display:grid;position:relative;overflow:hidden}.theme-sixia{--ink:#e8e4dc;--paper:#f4f0e8;--mist:#a8b4bc;--jade:#3d7a72;--jade-soft:#8ebdb4;--sand:#d4b896;--body-bg:#0a1016;--bg-image:url(/bg.jpg);--bg-filter:saturate(.92) contrast(.96);--veil:radial-gradient(ellipse 90% 70% at 50% 40%, #f4f0e838 0%, transparent 62%), linear-gradient(180deg, #080e148c 0%, #0a121a7a 40%, #080e14b8 100%)}.theme-bucai{--ink:#ebe4d4;--paper:#f7f0e2;--mist:#b8a894;--jade:#8a5a3a;--jade-soft:#d4a574;--sand:#e8c48a;--body-bg:#120e0a;--bg-image:linear-gradient(155deg, #1a120c 0%, #2a1c12 28%, #3d2818 55%, #1a100c 100%);--bg-filter:none;--veil:radial-gradient(ellipse 70% 50% at 70% 20%, #e8b46424 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 20% 80%, #50281459 0%, transparent 50%), linear-gradient(180deg, #0c080673 0%, #120c088c 50%, #0a0806bf 100%);--grain-opacity:.06}.theme-avril{--ink:#e8e6ea;--paper:#f5f2f6;--mist:#9a92a0;--jade:#6b3a55;--jade-soft:#e08ab0;--sand:#c8b8d4;--body-bg:#0c0a10;--bg-image:radial-gradient(ellipse 60% 40% at 15% 70%, #b4285a59 0%, transparent 55%), radial-gradient(ellipse 50% 45% at 85% 25%, #5a3c8c66 0%, transparent 50%), linear-gradient(160deg, #0a0812 0%, #16101c 40%, #1a0e18 70%, #0c0a10 100%);--bg-filter:none;--veil:linear-gradient(180deg, #08060c59 0%, #0c081080 50%, #06040ac7 100%);--grain-opacity:.07}.theme-yanzi{--ink:#e6eef2;--paper:#f2f7f9;--mist:#8aa0ad;--jade:#3a6a7a;--jade-soft:#7ec4d4;--sand:#e8c9a0;--body-bg:#0a1218;--bg-image:radial-gradient(ellipse 80% 55% at 50% 0%, #78b4d247 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 90% 80%, #e6b4781f 0%, transparent 50%), linear-gradient(175deg, #0e1a22 0%, #152832 35%, #1a3040 65%, #0c161c 100%);--bg-filter:none;--veil:radial-gradient(ellipse 100% 60% at 50% 100%, #14283280 0%, transparent 50%), linear-gradient(180deg, #0a121859 0%, #080e1473 50%, #060c10b8 100%);--grain-opacity:.035}.bg{background:var(--bg-image) center / cover no-repeat;filter:var(--bg-filter);z-index:0;transition:background .55s,filter .55s;position:fixed;inset:0;transform:scale(1.04)}.veil{z-index:1;background:var(--veil);pointer-events:none;transition:background .55s;position:fixed;inset:0}.grain{z-index:1;opacity:var(--grain-opacity);pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.top,.stage,.foot{z-index:2;position:relative}.picker{z-index:40;place-items:center;padding:1.25rem;animation:.28s cubic-bezier(.22,1,.36,1) both rise;display:grid;position:fixed;inset:0}.picker-scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:default;background:#04060a8c;border:none;position:absolute;inset:0}.picker-panel{width:min(22rem,100%);padding:1.35rem 0 1rem;animation:.35s cubic-bezier(.22,1,.36,1) both rise;position:relative}.picker-title{letter-spacing:.28em;color:var(--jade-soft);margin:0 1.1rem .85rem;font-size:.72rem;font-weight:400}.picker-list{flex-direction:column;display:flex}.picker-item{appearance:none;border:none;border-top:1px solid color-mix(in oklab, var(--mist) 18%, transparent);width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;grid-template-columns:2rem 1fr auto;align-items:center;gap:.85rem;padding:.95rem 1.1rem;transition:background .2s,border-color .2s;display:grid}.picker-item:last-of-type{border-bottom:1px solid color-mix(in oklab, var(--mist) 18%, transparent)}.picker-item:hover,.picker-item:focus-visible{background:color-mix(in oklab, var(--paper) 6%, transparent);outline:none}.picker-item.is-current{border-top-color:color-mix(in oklab, var(--jade-soft) 45%, transparent)}.picker-item.is-current .picker-name{color:var(--sand)}.picker-mark{border:1px solid color-mix(in oklab, var(--sand) 40%, transparent);width:1.75rem;height:1.75rem;font-family:var(--serif);color:var(--sand);border-radius:50%;place-items:center;font-size:.78rem;display:grid}.picker-meta{flex-direction:column;gap:.15rem;min-width:0;display:flex}.picker-name{font-family:var(--serif);letter-spacing:.14em;color:var(--paper);font-size:1.05rem}.picker-alias{letter-spacing:.06em;color:var(--mist);font-size:.72rem}.picker-count{letter-spacing:.08em;color:color-mix(in oklab, var(--mist) 80%, transparent);font-variant-numeric:tabular-nums;font-size:.72rem}.picker-hint{letter-spacing:.08em;color:color-mix(in oklab, var(--mist) 70%, transparent);margin:1rem 1.1rem 0;font-size:.68rem}.picker-hint kbd{margin:0 .1em}.top{padding:1.35rem clamp(1.25rem,4vw,2.75rem) 0}.brand{letter-spacing:.18em;color:var(--mist);align-items:center;gap:.7rem;margin:0;font-size:.78rem;font-weight:400;display:flex}.brand-mark{border:1px solid color-mix(in oklab, var(--jade) 55%, transparent);width:1.55rem;height:1.55rem;font-family:var(--serif);letter-spacing:0;color:var(--jade-soft);border-radius:50%;place-items:center;font-size:.72rem;display:grid}.brand-text{opacity:.9}.progress{background:color-mix(in oklab, var(--mist) 18%, transparent);height:1px;margin-top:1rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, transparent, var(--jade-soft), var(--sand));height:100%;transition:width .45s cubic-bezier(.22,1,.36,1)}.stage{place-items:center;padding:clamp(1rem,3vw,2rem) clamp(1.1rem,4vw,2.5rem) 1.5rem;display:grid}.intro{text-align:center;width:min(40rem,100%);animation:.8s cubic-bezier(.22,1,.36,1) both rise}.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:var(--jade-soft);margin:0 0 1rem;font-size:.72rem;font-weight:400}.intro h1{font-family:var(--serif);letter-spacing:.06em;color:var(--paper);text-wrap:balance;margin:0;font-size:clamp(2rem,6vw,3.15rem);font-weight:400;line-height:1.35}.lede{max-width:28rem;color:var(--mist);text-wrap:pretty;margin:1.35rem auto 0;font-size:.95rem;line-height:1.85}.lede em{color:var(--sand);font-style:normal;font-family:var(--serif);font-size:1.08em}.modes{text-align:left;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem 1.5rem;max-width:26rem;margin:2.4rem auto 0;display:grid}.mode{appearance:none;border:none;border-top:1px solid color-mix(in oklab, var(--mist) 22%, transparent);color:inherit;cursor:pointer;text-align:left;background:0 0;padding:1rem .15rem;transition:color .25s,border-color .25s}.mode:hover,.mode:focus-visible{color:var(--paper);border-top-color:color-mix(in oklab, var(--jade-soft) 70%, transparent);outline:none}.mode-label{font-family:var(--serif);letter-spacing:.12em;color:var(--paper);font-size:1.15rem;display:block}.mode-hint{color:var(--mist);letter-spacing:.04em;margin-top:.35rem;font-size:.78rem;display:block}.hint-keys{color:color-mix(in oklab, var(--mist) 75%, transparent);letter-spacing:.06em;margin:2.2rem 0 0;font-size:.75rem}kbd{font-family:var(--sans);border:1px solid color-mix(in oklab, var(--mist) 30%, transparent);color:var(--mist);border-radius:3px;padding:.1em .4em;font-size:.7rem}.match{width:min(72rem,100%);animation:.55s cubic-bezier(.22,1,.36,1) both rise}.match-meta{letter-spacing:.16em;color:var(--mist);justify-content:center;align-items:baseline;gap:.55rem;margin:0;font-size:.78rem;display:flex}.round{color:var(--jade-soft)}.sep{opacity:.45}.prompt{text-align:center;font-family:var(--serif);letter-spacing:.28em;color:color-mix(in oklab, var(--paper) 78%, transparent);margin:1.6rem 0 0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:400}.duel{grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(.5rem,2vw,1.5rem);min-height:clamp(12rem,36vh,22rem);margin-top:clamp(1.8rem,5vh,3.5rem);display:grid}.song{appearance:none;color:var(--paper);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;gap:1.25rem;min-height:10rem;padding:1.5rem .75rem;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1),filter .35s;display:flex}.song:focus-visible{outline:none}.song:focus-visible .song-name{text-underline-offset:.35em;text-decoration:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:color-mix(in oklab, var(--jade-soft) 60%, transparent);text-decoration-color:color-mix(in oklab, var(--jade-soft) 60%, transparent)}.song:hover:not(:disabled) .song-name{color:#fff}.song:hover:not(:disabled){transform:translateY(-2px)}.song-a{text-align:right;align-items:flex-end}.song-b{text-align:left;align-items:flex-start}.song-name{font-family:var(--serif);letter-spacing:.08em;text-wrap:balance;max-width:16ch;font-size:clamp(1.35rem,3.6vw,2.35rem);font-weight:400;line-height:1.4;transition:color .25s}.song-side{letter-spacing:.32em;color:color-mix(in oklab, var(--mist) 70%, transparent);text-transform:uppercase;font-size:.68rem}.versus{width:2.5rem;height:2.5rem;font-family:var(--serif);color:var(--sand);opacity:.85;place-items:center;font-size:.95rem;display:grid;position:relative}.versus:before{content:"";border:1px solid color-mix(in oklab, var(--sand) 35%, transparent);border-radius:50%;position:absolute;inset:0}.match-actions{justify-content:center;gap:1.75rem;margin-top:clamp(1.5rem,4vh,2.75rem);display:flex}.text-btn{appearance:none;color:var(--mist);letter-spacing:.18em;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #0000;padding:.4rem .2rem;font-size:.8rem;transition:color .2s,border-color .2s}.text-btn:hover:not(:disabled),.text-btn:focus-visible:not(:disabled){color:var(--paper);border-bottom-color:color-mix(in oklab, var(--mist) 40%, transparent);outline:none}.text-btn:disabled{opacity:.35;cursor:default}.text-btn.muted{opacity:.55}.leaving-a .song-a{opacity:1;filter:brightness(1.08);transform:scale(1.02)}.leaving-a .song-b,.leaving-b .song-a{opacity:.15;filter:blur(1px);transform:scale(.97)}.leaving-b .song-b{opacity:1;filter:brightness(1.08);transform:scale(1.02)}.result{text-align:center;width:min(36rem,100%);animation:.85s cubic-bezier(.22,1,.36,1) both rise}.result-title{font-family:var(--serif);letter-spacing:.2em;color:var(--paper);margin:0;font-size:clamp(2rem,5.5vw,2.8rem);font-weight:400}.podium{flex-direction:column;gap:0;margin:2.6rem 0 0;padding:0;list-style:none;display:flex}.rank{border-top:1px solid color-mix(in oklab, var(--mist) 18%, transparent);text-align:left;grid-template-columns:4.5rem 1fr;align-items:baseline;gap:1rem;padding:1.15rem 0;display:grid}.rank:last-child{border-bottom:1px solid color-mix(in oklab, var(--mist) 18%, transparent)}.rank-tag{letter-spacing:.28em;color:var(--mist);font-size:.72rem}.rank-1 .rank-tag{color:var(--sand)}.rank-2 .rank-tag{color:var(--jade-soft)}.rank-song{font-family:var(--serif);letter-spacing:.08em;color:var(--paper);font-size:clamp(1.15rem,2.8vw,1.55rem);line-height:1.45}.rank-1 .rank-song{font-size:clamp(1.35rem,3.2vw,1.85rem)}.again{appearance:none;border:none;border-bottom:1px solid color-mix(in oklab, var(--jade-soft) 55%, transparent);color:var(--jade-soft);font-family:var(--serif);letter-spacing:.28em;cursor:pointer;background:0 0;margin-top:2.5rem;padding:.35rem .1rem .45rem;font-size:1rem;transition:color .2s,border-color .2s}.again:hover,.again:focus-visible{color:var(--paper);border-bottom-color:var(--paper);outline:none}.foot{text-align:center;letter-spacing:.22em;color:color-mix(in oklab, var(--mist) 55%, transparent);padding:.85rem clamp(1.25rem,4vw,2.75rem) 1.2rem;font-size:.68rem}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=720px){.duel{grid-template-rows:1fr auto 1fr;grid-template-columns:1fr;gap:.25rem;min-height:auto}.song{min-height:7.5rem;padding:1.1rem .5rem;text-align:center!important;align-items:center!important}.song-name{max-width:18ch}.song-side{display:none}.versus{width:2rem;height:2rem;font-size:.85rem}.modes{grid-template-columns:1fr;max-width:18rem}.rank{grid-template-columns:3.5rem 1fr}}@media (prefers-reduced-motion:reduce){.intro,.match,.result,.progress-fill,.song{transition:none!important;animation:none!important}}