@font-face{font-family:OsuSerif;src:url(https://img.yuxino.cn/fe-build/osu-web/2/fonts/DMSerifDisplay-Regular.ttf)format("truetype");font-display:swap;font-weight:400}:root{color:#242424;font-synthesis:none;font-synthesis:none;--ink:#242424;--muted:#74746e;--line:#dcdcd5;--paper:#fff;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:16px;font-weight:400;line-height:1.65}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-offset:6px;outline:2px solid #242424}::selection{color:#111;background:#dedfd7}svg{flex-shrink:0;width:20px;height:20px}button{color:inherit}p,h1,h2,h3{margin:0}img{max-width:100%;height:auto}.shell{max-width:1344px;margin-inline:auto;padding-inline:64px}.skip-link{z-index:20;background:#fff;padding:10px 18px;position:fixed;top:-80px;left:16px}.skip-link:focus{top:12px}.header{border-bottom:1px solid var(--line);align-items:center;gap:64px;height:100px;display:flex}.wordmark{letter-spacing:-2px;font:44px/1 OsuSerif,Georgia,serif}.wordmark span{color:#747a68}.header nav{gap:36px;margin-left:auto;font-size:13px;display:flex}.header nav a,.header-end a{transition:opacity .2s}.header nav a:hover,.header-end a:hover{opacity:.55}.header-end{align-items:center;gap:28px;font-size:13px;display:flex}.language{border-left:1px solid var(--line);padding-left:24px}.github{align-items:center;gap:10px;display:flex}.github svg{width:14px}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:35px;min-height:735px;padding-top:46px;padding-bottom:56px;display:grid}.hero-copy{z-index:2;padding-block:18px 4px;position:relative}.edition{letter-spacing:.12em;color:#66665e;align-items:center;gap:14px;font-size:12px;display:flex}.edition-line{background:#777;width:30px;height:1px}.hero h1{letter-spacing:-9px;margin:19px 0;font:clamp(110px,12.8vw,184px)/1 OsuSerif,Georgia,serif}.hero h1 span{color:#777d6c}.hero h2{letter-spacing:-.045em;font-size:clamp(28px,3.1vw,42px);font-weight:500;line-height:1.38}.hero-intro{color:#72726c;max-width:390px;margin-top:22px;font-size:15px;line-height:1.95}.hero-actions{align-items:center;gap:26px;margin-top:32px;display:flex}.button{justify-content:space-between;align-items:center;gap:28px;min-width:164px;padding:15px 22px;font-size:14px;transition:transform .2s,background .2s;display:inline-flex}.button:hover{transform:translateY(-2px)}.primary{color:#fff;background:var(--ink)}.primary:hover{background:#444}.text-link{align-items:center;gap:9px;font-size:13px;display:inline-flex}.text-link:hover{text-underline-offset:5px;text-decoration:underline}.text-link svg{width:14px}.signature{letter-spacing:.015em;color:#898982;margin-top:26px;font-size:11px}.hero-visual{justify-content:center;align-self:stretch;align-items:center;min-height:615px;display:flex;position:relative}.mascot{width:100%;max-width:535px;display:block;transform:translateY(-21px)}.visual-index{letter-spacing:.2em;color:#85857e;font-size:10px;position:absolute;top:16px;right:5px}.hero-caption{color:#fff;background:#242424;min-height:154px;padding:26px 30px 34px;position:absolute;bottom:22px;left:-32px;right:2px;box-shadow:0 9px #deded6}.hero-caption span{color:#94948e;margin-bottom:14px;font-size:13px;display:block}.hero-caption strong{letter-spacing:-.035em;max-width:95%;font-size:clamp(19px,2vw,28px);font-weight:500;line-height:1.5;display:block}.hero-caption b{font:20px OsuSerif,Georgia,serif;position:absolute;top:22px;right:25px}.visual-caption{color:#8a8a84;letter-spacing:.03em;font-size:10px;position:absolute;bottom:-13px;right:0}.demo{border-top:1px solid var(--line);padding-top:45px;padding-bottom:76px;scroll-margin-top:24px}.demo-heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;display:flex}.overline{letter-spacing:.16em;color:#74746e;font-size:11px;line-height:1.6}.demo-heading h2{letter-spacing:-.035em;margin-top:8px;font-size:24px;font-weight:500}.demo-heading>p{color:#85857d;font-size:11px}.demo-layout{grid-template-columns:260px 1fr;gap:52px;display:grid}.sample-buttons{border-top:1px solid var(--line)}.sample-buttons button{border:0;border-bottom:1px solid var(--line);text-align:left;background:0 0;align-items:center;gap:18px;width:100%;padding:19px 0;font-size:15px;transition:padding .2s;display:flex}.sample-buttons button span{color:#999;font:10px monospace}.sample-buttons button svg{opacity:0;width:15px;margin-left:auto}.sample-buttons button[aria-pressed=true]{background:#eee;padding-inline:12px}.sample-buttons button[aria-pressed=true] svg{opacity:1}.sample-buttons button:hover{padding-left:12px}.original-toggle{cursor:pointer;align-items:center;gap:12px;margin-top:27px;font-size:13px;display:flex}.original-toggle input{accent-color:#242424;width:17px;height:17px;margin:0}.caption-window{color:#fff;background:#242424;min-height:224px;padding:28px 36px;position:relative}.caption-brand{justify-content:flex-end;align-items:center;gap:8px;font:21px OsuSerif,Georgia,serif;display:flex}.caption-brand img{object-fit:contain;width:29px;height:29px}.caption-lines{padding-top:4px}.previous-line{color:#999990;margin-bottom:12px;font-size:15px}.current-line{letter-spacing:-.035em;font-size:clamp(24px,3vw,36px);font-weight:500;line-height:1.4;animation:.4s ease-out line-in}.original-line{color:#cccac2;margin-top:13px;font-size:14px;line-height:1.5}.playback{justify-content:space-between;align-items:center;gap:10px;margin-top:17px;display:flex}.playback button{background:0 0;border:0;align-items:center;gap:8px;padding:5px 0;font-size:12px;display:flex}.playback svg{width:16px;height:16px}.line-dots{gap:5px;display:flex}.line-dots span{background:#d6d6ce;width:15px;height:2px}.line-dots .active{background:#242424}.motion-note{color:#777;margin-top:8px;font-size:11px}.modes{border-top:1px solid var(--line);grid-template-columns:1fr 1.2fr;gap:92px;padding-block:88px;display:grid}.section-intro h2{letter-spacing:-.035em;margin:20px 0;font-size:clamp(32px,3.8vw,46px);font-weight:500;line-height:1.45}.section-intro>p:last-child{color:#74746e;max-width:310px;font-size:14px;line-height:1.9}.mode-list article{padding:0 0 28px}.mode-list article+article{border-top:1px solid var(--line);padding-top:28px;padding-bottom:0}.mode-title{align-items:center;gap:20px;display:flex}.mode-title>span{color:#999;font:11px monospace}.mode-title h3{letter-spacing:-.02em;font-size:22px;font-weight:500}.mode-tag{color:#777;margin:7px 0 15px 35px;font-size:12px}.mode-list article>p:not(.mode-tag){font-size:14px;line-height:1.9}.mode-list small{color:#85857e;margin-top:12px;font-size:12px;display:block}.workflow{padding-block:36px 80px}.workflow h2{letter-spacing:-.03em;margin:18px 0 35px;font-size:clamp(26px,3vw,38px);font-weight:500}.steps{grid-template-columns:repeat(3,1fr);gap:36px;display:grid}.steps article{border-top:1px solid var(--ink);padding-top:18px}.step-number{color:#9a9b90;font:32px OsuSerif,Georgia,serif}.steps h3{margin:15px 0 10px;font-size:18px;font-weight:500}.steps p{color:#787871;font-size:13px;line-height:1.9}.compatibility{color:#85857e;border-top:1px solid var(--line);align-items:start;gap:14px;margin-top:32px;padding-top:20px;font-size:12px;line-height:1.9;display:flex}.compatibility>span{font-size:20px;line-height:1.1}.start{color:#f3f3f3;background:#242424;padding-block:60px;scroll-margin-top:24px}.start-inner{justify-content:space-between;align-items:center;gap:75px;display:flex}.start h2{letter-spacing:-.035em;margin:16px 0;font-size:clamp(28px,3vw,40px);font-weight:500;line-height:1.4}.start .overline{color:#b0b0a6}.start p:not(.overline){color:#b0b0a6;max-width:640px;font-size:13px;line-height:1.9}.start-actions{flex-direction:column;flex-shrink:0;align-items:center;gap:20px;display:flex}.light{color:#242424;background:#f3f3f3;min-width:185px}.start a:focus-visible{outline-color:#fff}.faq{grid-template-columns:1fr 2fr;gap:80px;padding-block:80px;display:grid}.faq h2{letter-spacing:-.03em;font-size:30px;font-weight:500}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:14px;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary span{font-size:20px;transition:transform .2s}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{color:#777;max-width:620px;padding-bottom:24px;font-size:13px;line-height:1.9}.footer{border-top:1px solid var(--line);align-items:center;gap:28px;padding-block:30px 36px;display:flex}.footer .wordmark{font-size:32px}.footer p{color:#999;font-size:11px}.footer>div{gap:24px;margin-left:auto;font-size:11px;display:flex}.footer>div a{align-items:center;gap:5px;display:flex}.footer svg{width:11px;height:11px}@keyframes line-in{0%{opacity:.45;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media (width>=1500px){.hero{min-height:760px}.hero-visual{min-height:640px}}@media (width<=1100px){.shell{padding-inline:40px}.header{gap:32px}.header nav{gap:24px}.hero{gap:20px;min-height:680px}.hero-visual{min-height:555px}.hero-caption{padding-inline:22px;left:-20px}.hero-actions{gap:18px}.hero-intro{max-width:340px}.demo-layout{grid-template-columns:210px 1fr;gap:32px}.modes{gap:60px}.header-end{gap:20px}.start-inner{gap:40px}}@media (width<=760px){.shell{padding-inline:24px}.header{gap:16px;height:78px}.wordmark{font-size:38px}.header nav{display:none}.header-end{gap:20px;margin-left:auto}.language{border:0;padding:0}.hero{flex-direction:column;align-items:stretch;gap:12px;min-height:auto;padding-top:29px;padding-bottom:42px;display:flex}.hero-copy{padding:0}.hero h1{letter-spacing:-6px;margin:13px 0 12px;font-size:118px}.hero h2{font-size:32px;line-height:1.35}.hero-intro{max-width:440px;margin-top:17px;font-size:14px}.hero-actions{gap:24px;margin-top:23px}.button{min-width:146px;padding:13px 18px;font-size:13px}.signature{margin-top:19px;font-size:10px}.hero-visual{min-height:410px;margin-top:18px}.mascot{width:92%;max-width:380px;transform:translateY(-12px)}.visual-index{font-size:9px;top:0;right:0}.hero-caption{min-height:122px;padding:20px 20px 24px;bottom:16px;left:0;right:0}.hero-caption span{margin-bottom:11px;font-size:11px}.hero-caption strong{max-width:100%;font-size:22px}.hero-caption b{font-size:18px;top:18px;right:20px}.visual-caption{font-size:9px;bottom:-13px}.demo{padding-top:32px;padding-bottom:45px}.demo-heading{margin-bottom:22px;display:block}.demo-heading h2{font-size:23px}.demo-heading>p{margin-top:12px;font-size:10px}.demo-layout{flex-direction:column;gap:22px;display:flex}.sample-buttons{border:0;gap:0;display:flex}.sample-buttons button{border:1px solid var(--line);border-right:0;justify-content:center;gap:9px;padding:13px 12px;font-size:13px}.sample-buttons button:last-child{border-right:1px solid var(--line)}.sample-buttons button[aria-pressed=true]{color:#fff;background:#242424;padding:13px 12px}.sample-buttons button svg{display:none}.sample-buttons button:hover{padding-left:12px}.sample-buttons button span{font-size:9px}.original-toggle{margin-top:17px;font-size:12px}.caption-window{min-height:218px;padding:22px}.caption-brand{font-size:20px}.caption-brand img{width:26px;height:26px}.previous-line{margin-top:6px;font-size:12px}.current-line{font-size:27px;line-height:1.45}.original-line{font-size:13px}.modes{grid-template-columns:1fr;gap:34px;padding-block:44px}.section-intro h2{margin:17px 0;font-size:34px}.section-intro>p:last-child{max-width:100%;font-size:13px}.mode-title h3{font-size:21px}.mode-list article>p:not(.mode-tag){font-size:13px}.mode-list small{font-size:11px}.workflow{padding-block:25px 44px}.workflow h2{margin-bottom:28px;font-size:28px;line-height:1.45}.steps{grid-template-columns:1fr;gap:24px}.steps article{grid-template-columns:40px 1fr;column-gap:18px;padding:17px 0 0;display:grid}.step-number{grid-row:1/3;font-size:28px}.steps h3{margin:0 0 9px;font-size:17px}.steps p{grid-column:2;font-size:13px}.compatibility{margin-top:25px;font-size:11px}.start{padding-block:38px}.start-inner{display:block}.start h2{font-size:29px}.start p:not(.overline){font-size:12px}.start-actions{align-items:start;gap:18px;margin-top:27px}.faq{grid-template-columns:1fr;gap:26px;padding-block:42px}.faq h2{font-size:26px}.faq summary{padding:20px 0;font-size:13px}.faq details p{font-size:12px}.footer{flex-wrap:wrap;gap:12px 20px;padding-block:25px}.footer>div{flex-basis:100%;gap:22px;margin:8px 0 0}.footer p{font-size:10px}.footer .wordmark{font-size:32px}}@media (width<=370px){.shell{padding-inline:18px}.hero h2{font-size:28px}.hero-actions{gap:16px}.text-link{font-size:12px}.hero-visual{min-height:375px}.hero-caption strong{font-size:19px}.hero-caption span{font-size:10px}.header-end{gap:16px}.caption-window{padding:20px}.current-line{font-size:24px}.sample-buttons button{font-size:11px}.sample-buttons button span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.button:hover{transform:none}}