@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://img.yuxino.cn/fe-build/pyfl-web/15/assets/outfit-latin-ext-wght-normal-DdQaqQDo.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://img.yuxino.cn/fe-build/pyfl-web/15/assets/outfit-latin-wght-normal-Bc-8i84L.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(https://img.yuxino.cn/fe-build/pyfl-web/15/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2)format("woff2"),url(https://img.yuxino.cn/fe-build/pyfl-web/15/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff)format("woff")}:root{color:#26252a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--paper:#fff;--ink:#26252a;--muted:#75737d;--line:#dbdae0;--accent:#8170bb;--pale:#eeebf5;--mono:"IBM Plex Mono", monospace;background:#fff;font-family:Outfit Variable,PingFang SC,Microsoft YaHei,sans-serif;font-weight:400}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:default;opacity:.48}::selection{color:var(--ink);background:#dcd5ec}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{background:0 0;border:0}h1,h2,p{margin:0}img{max-width:100%;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:var(--ink);color:#fff;z-index:20;padding:12px 24px;position:fixed;top:10px;left:20px;transform:translateY(-200%)}.skip-link:focus{transform:none}.site{overflow:clip}.header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:36px;height:96px;margin:0 5%;display:flex}.logo{letter-spacing:-3px;align-items:center;gap:10px;font-size:44px;font-weight:650;line-height:1;display:inline-flex}.logo-avatar{border-radius:50%;flex:none;width:44px;height:44px;display:block}.header nav{gap:36px;margin-left:auto;display:flex}.header nav a{align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex;position:relative}.header nav a:after,.text-link:after{content:"";transform-origin:0;background:currentColor;width:100%;height:1px;transition:transform .25s;position:absolute;bottom:-7px;left:0;transform:scaleX(0)}.header nav a:hover:after,.text-link:hover:after{transform:scaleX(1)}.nav-number{font:9px var(--mono);color:var(--muted);align-self:flex-start;padding-top:1px}.header-actions{align-items:center;gap:24px;display:flex}.language{border-left:1px solid var(--line);font:12px var(--mono);padding:10px}.github-link{border:1px solid var(--line);background:var(--paper);border-radius:5px;flex-shrink:0;align-items:center;gap:8px;min-height:44px;padding:5px 10px 5px 6px;transition:border-color .2s;display:inline-flex}.github-star-mark{background:var(--pale);color:#67569e;border:1px solid #c9c1df;border-radius:3px;place-items:center;width:29px;height:31px;transition:transform .2s;display:grid;transform:rotate(-5deg)}.github-star-mark svg{stroke:currentColor;stroke-width:1.4px;stroke-linejoin:round;width:18px;height:18px}.github-star-label{gap:2px;line-height:1;display:grid}.github-star-label small{font:8px var(--mono);letter-spacing:.02em;color:var(--muted)}.github-star-label strong{font-size:14px;font-weight:550}.github-star-count{border-left:1px solid var(--line);min-width:2.8ch;font:13px var(--mono);font-variant-numeric:tabular-nums;text-align:center;padding-left:9px}.github-link:hover,.github-link:focus-visible{border-color:var(--accent)}.github-link:hover .github-star-mark,.github-link:focus-visible .github-star-mark{transform:rotate(0)}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:2%;max-width:1500px;min-height:680px;margin:auto;padding:54px 5% 42px;display:grid}.eyebrow{letter-spacing:2px;align-items:center;gap:11px;font-size:10px;font-weight:500;display:flex}.asterisk{color:var(--accent);font-size:18px;animation:16s linear infinite turn}.hero h1{letter-spacing:-3.5px;margin:26px 0 25px;font-size:clamp(48px,4.6vw,74px);font-weight:600;line-height:1.19}.title-last{width:max-content;padding-right:52px;display:block;position:relative}.tiny-star{color:var(--accent);font-size:44px;font-weight:400;animation:4s ease-in-out infinite twinkle;position:absolute;top:3px;right:0}.hero-intro{color:#68656e;letter-spacing:.3px;max-width:370px;font-size:14px;line-height:2.05}.hero-actions{align-items:center;gap:30px;margin-top:30px;display:flex}.button{border-radius:3px;justify-content:center;align-items:center;gap:32px;min-height:48px;padding:0 24px;font-size:13px;font-weight:500;transition:background .2s,transform .2s;display:inline-flex}.button-dark{background:var(--ink);color:#fff;border:1px solid var(--ink)}.button-dark:hover{background:#48444e;transform:translateY(-2px)}.button svg{transition:transform .25s}.button:hover svg{transform:translate(3px,-2px)}.text-link{align-items:center;gap:12px;font-size:12px;display:flex;position:relative}.text-link svg{width:15px}.hero-footnote{letter-spacing:.3px;color:var(--muted);align-items:center;gap:12px;margin-top:43px;font-size:9px;display:flex}.little-face{color:var(--ink);white-space:nowrap;font-size:12px}.hero-stage{isolation:isolate;min-width:0;height:550px;position:relative}.stage-caption{font:9px var(--mono);color:var(--muted);letter-spacing:.2px;justify-content:space-between;display:flex;position:absolute;top:0;left:3%;right:0}.giant-letter{letter-spacing:-40px;color:#e9e8e5;z-index:-2;font-size:430px;font-weight:650;line-height:1;position:absolute;top:5px;left:15%;transform:rotate(-9deg)}.mascot-frame{aspect-ratio:1;border:1px solid var(--line);isolation:isolate;z-index:1;pointer-events:none;background:#fff;width:88%;max-width:480px;animation:1s cubic-bezier(.2,.8,.2,1) both mascot-enter;position:absolute;top:32px;left:50%;overflow:hidden;transform:translate(-50%)rotate(-3deg)}.mascot{object-fit:contain;width:100%;height:100%}.letter-orbit{z-index:-1;border:1px solid #d0cdd6;border-radius:50%;width:92%;height:82%;position:absolute;top:48px;left:2%;transform:rotate(-24deg)}.orbit-two{border-style:dashed;border-color:#cbc7d6;width:101%;height:58%;top:125px;left:-2%;transform:rotate(30deg)}.stage-spark{color:var(--accent);position:absolute}.spark-one{font-size:60px;animation:4s ease-in-out infinite twinkle;top:37px;right:0}.spark-two{font-size:25px;animation:18s linear infinite turn;top:135px;left:-2%}.magic-tile{background:var(--paper);z-index:3;border:1px solid #aaa6b4;border-radius:7px;flex-direction:column;justify-content:space-between;width:104px;height:121px;padding:10px;animation:6s ease-in-out infinite tile-float;display:flex;position:absolute;box-shadow:3px 3px #dedbe4}.magic-tile span{font:8px var(--mono);letter-spacing:1px}.magic-tile b{text-align:center;font-size:64px;font-weight:500;line-height:1}.tile-chinese{--rotation:-12deg;bottom:85px;left:-3%;transform:rotate(-12deg)}.tile-letter{--rotation:10deg;color:var(--accent);animation-delay:-3s;bottom:32px;right:0;transform:rotate(10deg)}.tile-letter b{font-size:76px}.magic-path{color:#9991ab;pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.mascot-signature{z-index:2;background:var(--paper);text-align:center;padding:0 7px;position:absolute;bottom:0;left:32%;transform:rotate(-8deg)}.mascot-signature span{letter-spacing:-3px;font-size:49px;font-weight:600}.mascot-signature small{letter-spacing:1px;color:var(--muted);font-size:9px;display:block}.letter-ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#eee;align-items:center;width:102%;height:71px;margin:14px -1% 0;display:flex;overflow:hidden;transform:rotate(-1.5deg)}.letter-ribbon>div{white-space:nowrap;width:max-content;animation:45s linear infinite marquee;display:flex}.letter-ribbon span{align-items:center;gap:32px;padding-right:32px;font-size:20px;font-weight:500;display:flex}.letter-ribbon b{letter-spacing:1px;-webkit-text-stroke:1px #96939b;color:#0000;font-size:32px;font-weight:400}.letter-ribbon i{color:var(--accent);font-size:24px;font-style:normal;font-weight:300}.section{max-width:1360px;margin:0 5%;padding:100px 0;scroll-margin-top:28px}.section-kicker{font:9px var(--mono);letter-spacing:1px;color:var(--muted);justify-content:space-between;margin-bottom:25px;display:flex}.section-kicker>span:last-child{font-family:inherit;font-size:10px}.section-heading{justify-content:space-between;align-items:end;gap:40px;margin-bottom:37px;display:flex}h2{letter-spacing:-1.3px;white-space:pre-line;font-size:clamp(28px,2.4vw,38px);font-weight:550;line-height:1.4}.section-heading p{color:var(--muted);max-width:330px;font-size:12px;line-height:1.9}.converter{background:#fff;border:1px solid #bdbac4;border-radius:10px;grid-template-columns:1fr 1fr;display:grid;position:relative;overflow:visible}.input-pane,.output-pane{flex-direction:column;min-width:0;padding:25px 28px 21px;display:flex}.input-pane{border-radius:10px 0 0 10px}.output-pane{background:#eeebf3;border-left:1px solid #bdbac4;border-radius:0 10px 10px 0}.pane-head{justify-content:space-between;align-items:center;gap:8px;min-height:25px;display:flex}.pane-head label{align-items:center;gap:12px;font-size:11px;font-weight:500;display:flex}.micro{font:9px var(--mono);letter-spacing:1px;color:var(--muted)}.pane-head .micro{color:var(--ink);letter-spacing:.5px;border:1px solid #bcb9c3;border-radius:3px;padding:3px 5px}.quiet-button{align-items:center;gap:8px;padding:7px;font-size:10px;display:flex}.quiet-button span{font-size:18px;line-height:12px}textarea{resize:vertical;width:100%;min-height:140px;color:var(--ink);letter-spacing:1px;outline-offset:0;field-sizing:content;background:0 0;border:0;max-height:360px;padding:26px 0 14px;font-size:28px;line-height:1.6}textarea::placeholder{color:#a9a6ae;font-size:21px}textarea:focus-visible{outline:none}.input-pane:focus-within{outline:2px solid var(--accent);outline-offset:-2px}.input-count{color:var(--muted);justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;font-size:9px;display:flex}.input-count>span:last-child{font-family:var(--mono)}.conversion-arrow{background:var(--ink);color:#fff;z-index:1;border:4px solid var(--paper);border-radius:50%;place-items:center;width:34px;height:34px;font-size:22px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.output-star{color:var(--accent);font-size:25px;line-height:1}output{letter-spacing:2px;overflow-wrap:anywhere;white-space:pre-wrap;color:#5b4b86;min-height:140px;max-height:360px;padding:26px 0 14px;font-family:Outfit Variable,sans-serif;font-size:39px;line-height:1.5;display:block;overflow-y:auto}.result-text{animation:.38s cubic-bezier(.2,.7,.2,1) result-pop;display:inline-block}.empty-output{color:#a19ba9;font-size:23px}.output-footer{justify-content:space-between;align-items:center;gap:20px;margin-top:auto;padding-top:9px;display:flex}.copy-button{border:1px solid #aca4bc;border-radius:3px;align-items:center;gap:8px;min-height:32px;padding:0 10px;font-size:10px;transition:background .2s;display:flex}.copy-button:hover{background:#e2dbea}.sample-bar{align-items:start;gap:20px;margin:22px 0 15px;font-size:10px;display:flex}.sample-bar>span{color:var(--muted);white-space:nowrap;line-height:30px}.sample-bar>div{flex-wrap:wrap;gap:8px;display:flex}.sample{border:1px solid var(--line);border-radius:4px;align-items:center;gap:15px;min-height:30px;padding:5px 9px;font-size:10px;transition:border .2s,background .2s;display:flex}.sample span{color:#8a8492}.sample:hover{background:#f0eef5;border-color:#8a829a}.sample.active{background:#efebf5;border-color:#aaa1bb}.privacy{color:#625e69;align-items:center;gap:7px;font-size:10px;line-height:1.7;display:flex}.privacy>span{font-size:17px}.pronunciation-note{color:var(--muted);padding-top:6px;font-size:10px;line-height:1.8}.static-note{border-left:2px solid var(--accent);margin-top:20px;padding:8px 12px;font-size:12px;line-height:1.8}.practice{border-top:1px solid var(--line);padding-top:72px}.practice-layout{grid-template-columns:1fr 1fr;align-items:center;gap:10%;margin-top:40px;display:grid}.folder-glyph{color:var(--accent);margin-bottom:18px;font-size:43px;font-weight:400;line-height:1;display:block}.practice-copy>p{max-width:345px;color:var(--muted);margin-top:22px;font-size:13px;line-height:2}.index-note{align-items:center;gap:20px;margin-top:36px;display:flex}.index-chinese{letter-spacing:3px;font-size:18px}.hand-arrow{color:#908899;font-size:42px;line-height:1;transform:rotate(-13deg)}.index-letters{font-size:25px;font-family:var(--mono);letter-spacing:4px;color:var(--accent)}.practice-copy>p.small-note{max-width:315px;margin-top:18px;font-size:10px;line-height:1.9}.search-demo{background:#fff;border:1px solid #c6c2cd;border-radius:7px;padding:23px 25px 14px;transition:transform .5s cubic-bezier(.2,.7,.2,1);position:relative;transform:rotate(1.3deg)}.search-demo:focus-within,.search-demo:hover{transform:rotate(0)}.search-demo:before{content:"";z-index:-1;background:#f0f0f0;border:1px solid #c6c2cd;border-top:0;border-radius:0 0 4px 4px;height:8px;position:absolute;bottom:-9px;left:16px;right:16px}.search-top,.search-bottom{font:9px var(--mono);letter-spacing:.5px;color:var(--muted);justify-content:space-between;display:flex}.search-top>span:last-child{font-size:18px;line-height:10px}.search-field{background:var(--paper);border:1px solid #c6c2cd;border-radius:4px;align-items:center;gap:11px;margin:24px 0 0;padding:10px 12px;display:flex}.search-field:focus-within{border-color:var(--accent);outline:1px solid var(--accent)}.search-field svg{flex-shrink:0;width:16px}.search-field input{background:0 0;border:0;outline:0;width:100%;font-size:11px;line-height:25px}.search-field input::placeholder{color:#98939f}.search-results{min-height:292px}.results-count{color:var(--muted);margin:15px 0 3px;font-size:9px}.search-results ul{margin:0;padding:0;list-style:none}.search-results li{border-bottom:1px solid #eceaef;align-items:center;gap:12px;padding:17px 0;font-size:12px;animation:.3s ease-out both list-enter;display:flex}.search-results li:nth-child(2){animation-delay:30ms}.search-results li:nth-child(3){animation-delay:60ms}.search-results li:nth-child(4){animation-delay:90ms}.search-results li:nth-child(5){animation-delay:.12s}.item-dot{color:var(--accent);font-size:17px;line-height:10px}.search-results code{font:9px var(--mono);color:#8c839d;margin-left:auto}.no-results{text-align:center;color:var(--muted);padding:80px 0;font-size:12px}.search-bottom{padding-top:16px;font-size:8px}.getting-started{border-top:1px solid var(--line);padding-top:70px}.code-layout{grid-template-columns:1.25fr 1fr;align-items:start;gap:8%;display:grid}.code-main{min-width:0}.install-line{border:1px solid var(--line);font:12px var(--mono);background:#f1f1f1;border-radius:4px;align-items:center;gap:14px;padding:14px 17px;display:flex}.install-line>span{color:#8d8796}.install-line button{margin-left:auto;padding:5px;line-height:1}.code-window{color:#eae5f0;background:#2d2b32;border-radius:5px;margin-top:12px;overflow:hidden}.code-toolbar{border-bottom:1px solid #4b4653;justify-content:space-between;align-items:center;min-height:46px;padding:0 18px;display:flex}.code-tabs{gap:22px;display:flex}.code-tabs button{color:#b0aab9;border-bottom:1px solid #0000;height:46px;padding:0;font-size:10px;transform:translateY(1px)}.code-tabs button.selected{color:#f6f2fb;border-color:#c3b2e6}.copy-code{color:#c8c1d2;padding:5px}.code-window pre{font:11px/2 var(--mono);tab-size:2;min-height:210px;margin:0;padding:26px 20px 32px;overflow-x:auto}.code-caption{font:8px var(--mono);color:#a59cad;letter-spacing:.5px;border-top:1px solid #4b4653;justify-content:space-between;padding:12px 18px;display:flex}.version-note{color:var(--muted);margin-top:15px;font-size:10px;line-height:1.9}.version-note a{text-underline-offset:3px;text-decoration:underline}.rules{margin:0}.rules>div{border-bottom:1px solid var(--line);padding:20px 0}.rules>div:first-child{padding-top:4px}.rules dt{align-items:center;gap:13px;font-size:13px;font-weight:500;display:flex}.rules dt>span{font:9px var(--mono);color:var(--accent)}.rules dd{color:var(--muted);max-width:325px;margin:12px 0 0 27px;font-size:11px;line-height:1.9}.closing{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#eee;flex-direction:column;justify-content:center;align-items:center;min-height:440px;padding:55px 5% 85px;display:flex;position:relative;overflow:hidden}.closing-star{color:var(--accent);font-size:28px;animation:16s linear infinite turn}.closing>p{font:8px var(--mono);letter-spacing:2px;margin:16px 0}.closing h2{text-align:center;z-index:1;font-size:32px;line-height:1.5}.closing .button{z-index:1;min-height:43px;margin-top:22px;font-size:11px}.closing-pyfl{letter-spacing:-25px;color:#e2e0dc;-webkit-user-select:none;user-select:none;font-size:420px;font-weight:600;line-height:1;position:absolute;bottom:-114px;right:-12px;transform:rotate(-10deg)}footer{flex-wrap:wrap;align-items:center;gap:25px;margin:0 5%;padding:35px 0 24px;display:flex}footer>.logo{font-size:34px}footer>.logo .logo-avatar{width:36px;height:36px}footer>span{color:var(--muted);font-size:10px}footer>div{align-items:center;gap:22px;margin-left:auto;font-size:11px;display:flex}footer small{font:8px var(--mono);color:var(--muted);flex-basis:100%;padding-top:14px}footer small a{text-underline-offset:3px;text-decoration:underline}.motion-toggle{align-items:center;gap:8px;font-size:10px;display:flex}.toggle-track{border:1px solid #98919f;border-radius:10px;align-items:center;width:23px;height:13px;padding:2px;display:flex}.toggle-track i{background:var(--accent);border-radius:50%;width:7px;height:7px;transition:transform .2s;display:block;transform:translate(9px)}.motion-off .toggle-track i{background:#999;transform:none}.copy-error{background:var(--ink);color:#fff;z-index:10;align-items:center;gap:20px;max-width:90%;padding:14px 20px;font-size:12px;line-height:1.6;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.copy-error button{color:#fff;font-size:20px}.motion-off *{scroll-behavior:auto!important;transition:none!important;animation:none!important}@keyframes turn{to{transform:rotate(360deg)}}@keyframes twinkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(.8)rotate(12deg)}}@keyframes tile-float{0%,to{transform:translateY(0) rotate(var(--rotation))}50%{transform:translateY(-10px) rotate(calc(var(--rotation) + 4deg))}}@keyframes mascot-enter{0%{opacity:0;transform:translate(-50%,24px)rotate(1deg)}to{opacity:1;transform:translate(-50%)rotate(-3deg)}}@keyframes result-pop{0%{opacity:.4;filter:blur(2px);transform:translateY(7px)}to{opacity:1;filter:none;transform:none}}@keyframes list-enter{0%{opacity:.3;transform:translate(8px)}to{opacity:1;transform:none}}@keyframes marquee{to{transform:translate(-50%)}}@media (width>=1512px){.section{margin-left:auto;margin-right:auto}.header,footer{max-width:1360px;margin-left:auto;margin-right:auto}}@media (width<=1100px){.header{gap:20px;height:84px}.header nav{gap:20px}.header-actions{gap:15px}.hero{min-height:600px;padding-top:44px;padding-bottom:30px}.hero h1{font-size:55px}.hero-stage{height:460px}.mascot-frame{top:40px}.stage-caption{font-size:7px}.giant-letter{font-size:350px}.magic-tile{width:84px;height:103px}.magic-tile b{font-size:53px}.tile-letter b{font-size:63px}.tile-chinese{bottom:65px;left:0}.tile-letter{bottom:35px}.mascot-signature{bottom:0;left:36%}.mascot-signature span{font-size:38px}.hero-footnote{align-items:start;max-width:290px;margin-top:28px;line-height:1.8}.practice-layout{gap:7%}.code-layout{gap:6%}.code-window pre{font-size:10px}.section{padding-top:78px;padding-bottom:78px}}@media (width<=760px){html{scroll-padding-top:20px}.header{gap:12px;height:74px;margin:0 6%}.logo{font-size:38px}.header nav{display:none}.header-actions{gap:10px;margin-left:auto}.github-link{gap:6px;padding-right:8px}.github-star-mark{width:25px;height:29px}.github-star-count{padding-left:7px;font-size:12px}.language{padding:9px 13px;font-size:11px}.hero{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:35px 6% 34px;display:flex}.hero-copy{z-index:4;position:relative}.eyebrow{letter-spacing:1.5px;gap:8px;font-size:9px}.eyebrow .asterisk{font-size:15px}.hero h1{letter-spacing:-2px;margin:21px 0 16px;font-size:clamp(45px,10.8vw,72px);line-height:1.22}.hero h1 br{display:none}.title-last{display:inline}.tiny-star{font-size:29px;top:10px;right:8px}.hero-intro{letter-spacing:.2px;max-width:330px;font-size:12px;line-height:1.95}.hero-actions{gap:24px;margin-top:22px}.button{gap:25px;min-height:43px;padding:0 20px;font-size:12px}.text-link{font-size:11px}.hero-footnote{display:none}.hero-stage{align-self:center;width:100%;max-width:400px;height:390px;margin-top:30px}.stage-caption{font-size:7px;left:4%;right:1%}.mascot-frame{width:84%;top:30px}.letter-orbit{width:91%;height:77%;top:39px;left:5%}.orbit-two{width:97%;height:56%;top:75px;left:1%}.giant-letter{font-size:290px;top:6px;left:23%}.spark-one{font-size:45px;top:25px;right:3%}.spark-two{font-size:20px;top:75px;left:0}.magic-tile{width:76px;height:88px;padding:7px}.magic-tile span{font-size:6px}.magic-tile b{font-size:45px}.tile-chinese{bottom:63px;left:1%}.tile-letter{bottom:25px;right:1%}.tile-letter b{font-size:56px}.mascot-signature{bottom:6px;left:40%}.mascot-signature span{letter-spacing:-2px;font-size:33px}.mascot-signature small{font-size:7px}.letter-ribbon{height:54px;margin-top:0}.letter-ribbon span{gap:23px;padding-right:23px;font-size:15px}.letter-ribbon b{font-size:26px}.letter-ribbon i{font-size:20px}.section{margin:0 6%;padding:60px 0;scroll-margin-top:0}.section-kicker{letter-spacing:.6px;margin-bottom:20px;font-size:7px}.section-kicker>span:last-child{font-size:8px}.section-heading{margin-bottom:26px;display:block}h2{letter-spacing:-1px;font-size:27px;line-height:1.45}.section-heading p{max-width:290px;margin-top:12px;font-size:11px;line-height:1.9}.converter{border-radius:7px;flex-direction:column;display:flex}.input-pane,.output-pane{padding:17px 18px 16px}.input-pane{border-radius:7px 7px 0 0}.output-pane{border-top:1px solid #bdbac4;border-left:0;border-radius:0 0 7px 7px}.pane-head label{gap:8px;font-size:10px}.micro,.pane-head .micro{font-size:8px}.quiet-button{font-size:9px}.conversion-arrow{display:none;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}textarea{min-height:115px;max-height:240px;padding-top:20px;font-size:25px}textarea::placeholder{font-size:18px}.input-count{padding-top:8px;font-size:8px}output{min-height:104px;max-height:240px;padding-top:19px;font-size:34px}.empty-output{font-size:21px}.copy-button{font-size:9px}.sample-bar{margin-top:18px;display:block}.sample-bar>span{margin-bottom:3px;font-size:9px;display:block}.sample-bar>div{gap:7px}.sample{gap:10px;min-height:30px;padding:5px 8px;font-size:9px}.privacy{align-items:start;margin-top:15px;font-size:9px}.privacy>span{font-size:15px;line-height:1}.pronunciation-note{margin-top:4px;font-size:9px}.practice-layout{margin-top:29px;display:block}.folder-glyph{margin-bottom:15px;font-size:32px}.practice-copy>p{max-width:310px;margin-top:15px;font-size:12px}.index-note{gap:15px;margin-top:20px}.index-chinese{letter-spacing:2px;font-size:16px}.index-letters{font-size:21px}.hand-arrow{font-size:32px}.practice-copy>p.small-note{max-width:310px;font-size:9px}.search-demo{margin-top:30px;padding:20px 19px 14px;transform:rotate(1deg)}.search-top,.search-bottom{font-size:7px}.search-field{margin-top:20px;padding:8px 10px}.search-field input{font-size:10px}.search-results{min-height:275px}.search-results li{gap:8px;padding:16px 0;font-size:11px}.search-results code,.results-count{font-size:8px}.code-layout{display:block}.install-line{padding:11px 14px;font-size:11px}.code-toolbar{padding:0 14px}.code-tabs{gap:22px}.code-tabs button{height:42px;font-size:9px}.code-window pre{min-height:190px;padding:22px 14px;font-size:10px;line-height:2.1}.code-caption{padding:12px 14px;font-size:7px}.version-note{margin-top:14px;font-size:9px}.rules{margin-top:36px}.rules>div{padding:18px 0}.rules dt{font-size:12px}.rules dd{max-width:none;margin-top:10px;font-size:10px}.closing{min-height:365px;padding:43px 6% 65px}.closing h2{font-size:28px}.closing>p{font-size:7px}.closing-star{font-size:25px}.closing-pyfl{letter-spacing:-19px;font-size:270px;bottom:-68px;right:4px}.closing .button{min-height:40px;font-size:10px}footer{gap:15px;margin:0 6%;padding:26px 0 22px}footer>.logo{font-size:32px}footer>span{font-size:9px}footer>div{flex-basis:100%;gap:22px;margin-top:4px;margin-left:0;font-size:10px}.motion-toggle{margin-left:auto;font-size:9px}footer small{padding-top:5px;font-size:7px;line-height:1.8}}@media (width<=360px){.hero h1{font-size:42px}.hero-stage{height:330px}.mascot-signature{bottom:3px}.tile-chinese{bottom:55px}.magic-tile{width:65px;height:78px}.magic-tile b{font-size:40px}.tile-letter b{font-size:49px}.tile-letter{bottom:12px}.stage-caption{font-size:6px}.section-heading h2{font-size:24px}.search-results li{font-size:10px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.result-letter{transform-origin:bottom;animation:.42s cubic-bezier(.2,.65,.2,1) both letter-turn;display:inline-block}.glyph-letter{animation:.5s cubic-bezier(.2,.65,.2,1) both letter-turn}.magic-tile.tile-chinese:disabled{opacity:1}.tile-chinese:hover{border-color:var(--accent);background:#f6f3fb}.tile-chinese:focus-visible{outline-offset:6px}.magic-tile:active{box-shadow:1px 1px #dedbe4}.hero-stage>.stage-caption,.hero-stage>.mascot-signature{pointer-events:none}@keyframes letter-turn{0%{opacity:.2;transform:perspective(280px)rotateX(-65deg)translateY(7px)}to{opacity:1;transform:perspective(280px)rotateX(0)translateY(0)}}html[data-motion=off]{scroll-behavior:auto}@media (width<=760px){.hero h1 br{display:block}.hero .title-last{padding-right:28px}html[lang=en] .hero .title-last{display:inline-block}.hero .tiny-star{font-size:24px;top:10px;right:0}}.asterisk,.tiny-star,.stage-spark,.output-star,.folder-glyph,.item-dot,.closing-star,.letter-ribbon i{display:inline-flex}.sample>svg{color:#8a8492;width:12px;height:12px}.privacy>svg{flex-shrink:0}.version-note svg,footer a>svg{vertical-align:middle;width:11px;height:11px;display:inline}.little-face,.hand-arrow,.search-bottom>span:last-child{display:inline-flex}.search-bottom svg{height:12px}.folder-glyph{display:flex}.result-letter svg{pointer-events:none}.pronunciation-comparison{margin-top:32px}.pronunciation-comparison h3{font-size:20px;font-weight:600}.pronunciation-comparison>p{color:var(--muted);margin:10px 0 20px;font-size:12px;line-height:1.8}.pronunciation-comparison table{border-collapse:collapse;table-layout:fixed;text-align:left;width:100%}.pronunciation-comparison thead th{color:var(--muted);padding:12px 8px;font-size:11px;font-weight:500}.pronunciation-comparison tbody{border-top:1px solid var(--line)}.pronunciation-comparison tbody th,.pronunciation-comparison td{padding:10px 8px;font-size:14px;font-weight:400}.pronunciation-comparison button{text-align:left;align-items:center;gap:12px;min-height:36px;display:inline-flex}.pronunciation-comparison button svg{width:14px;height:14px}.pronunciation-comparison button:hover,.pronunciation-comparison button[aria-pressed=true]{text-underline-offset:5px;text-decoration:underline}.pronunciation-comparison td code{letter-spacing:2px;font-size:16px}.pronunciation-comparison strong{text-underline-offset:5px;font-weight:700;text-decoration:underline}