:root{--color-bg:#fff;--color-surface:#f4f3f7;--color-ink:#201e1d;--n-100:#f8f4f4;--n-200:#eae7e7;--n-300:#d7d3d3;--n-400:#bab6b6;--n-500:#9b9797;--n-600:#7d7979;--n-700:#605d5d;--n-800:#444141;--n-900:#2d2b2b;--a-100:#f3f1fe;--a-200:#e6e2fd;--a-300:#cfc8fb;--a-400:#ada2f7;--a-500:#8b7cf3;--a-600:#6b5be3;--a-700:#5142ba;--a-800:#392f86;--a-900:#251f55;--accent:#7b6cf6;--accent-ink:#5142ba;--divider:color-mix(in srgb, var(--color-ink) 40%, transparent);--divider-soft:color-mix(in srgb, var(--color-ink) 16%, transparent);--font-body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-hanzi:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--ease:cubic-bezier(.2, .8, .2, 1);--header-h:76px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=dark]{--color-bg:#18171c;--color-surface:#221f28;--color-ink:#f4f3f7;--n-100:#2a2731;--n-200:#34303b;--n-300:#444049;--n-400:#5a5560;--n-500:#726d78;--n-600:#8d8892;--n-700:#a8a3ac;--n-800:#c7c3ca;--n-900:#eae7ea;--a-100:#251f55;--a-200:#392f86;--a-300:#5142ba;--a-700:#cfc8fb;--a-800:#e6e2fd;--a-900:#f3f1fe;--accent:#8b7cf3}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#18171c;--color-surface:#221f28;--color-ink:#f4f3f7;--n-100:#2a2731;--n-200:#34303b;--n-300:#444049;--n-400:#5a5560;--n-500:#726d78;--n-600:#8d8892;--n-700:#a8a3ac;--n-800:#c7c3ca;--n-900:#eae7ea;--a-100:#251f55;--a-200:#392f86;--a-300:#5142ba;--a-700:#cfc8fb;--a-800:#e6e2fd;--a-900:#f3f1fe;--accent:#8b7cf3}}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{background:var(--color-bg);color:var(--color-ink);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s var(--ease), color .3s var(--ease);margin:0;overflow-x:hidden}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:24px}.wrap--wide{max-width:1280px}.wrap--narrow{max-width:720px}.skip-link{background:var(--accent);color:#fff;z-index:200;padding:10px 16px;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}.kicker{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 12px;font-size:12px;font-weight:600}.kicker--onlight{color:#fff;opacity:.85}h1{letter-spacing:-.04em;margin:0 0 24px;font-size:clamp(44px,7vw,88px);font-weight:800;line-height:.98}h2{letter-spacing:-.025em;margin:0 0 16px;font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1.08}h3{letter-spacing:-.01em;margin:0 0 8px;font-size:22px;font-weight:700}p{margin:0}.section-sub{color:var(--n-700);max-width:640px;margin-bottom:40px;font-size:17px;line-height:1.6}.hero-sub{color:var(--n-700);max-width:480px;margin:0 auto 32px;font-size:18px;line-height:1.6}.icon{flex-shrink:0;width:18px;height:18px}.icon-lg{width:28px;height:28px;color:var(--accent);margin-bottom:16px}.btn{white-space:nowrap;height:44px;transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);border-radius:0;justify-content:flex-start;align-items:center;gap:10px;padding:0 20px;font-size:15px;font-weight:700;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--a-700)}.btn-ghost{color:var(--a-700);padding-inline:4px}.btn-ghost:hover{color:var(--accent)}.btn-lg{height:56px;padding:0 28px;font-size:16px}.btn-sm{height:40px;padding:0 16px;font-size:14px}.btn .icon{transition:transform .2s var(--ease)}.btn:hover .icon{transform:translate(3px)}.nav{z-index:100;height:var(--header-h);background:color-mix(in srgb, var(--color-bg) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .3s var(--ease), background .3s var(--ease);border-bottom:2px solid #0000;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.nav.is-scrolled{border-bottom-color:var(--divider-soft)}.nav-inner{align-items:center;gap:32px;width:100%;max-width:1080px;margin-inline:auto;padding-inline:24px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:10px;margin-right:auto;font-size:18px;font-weight:800;display:flex}.brand-mark{background:var(--accent);color:#fff;width:32px;height:32px;font-family:var(--font-hanzi);flex-shrink:0;justify-content:center;align-items:center;font-size:19px;display:inline-flex}.nav-links{color:var(--n-700);align-items:center;gap:28px;font-size:14px;font-weight:600;display:flex}.nav-links a:hover{color:var(--color-ink)}.nav-actions{align-items:center;gap:16px;display:flex}.theme-toggle{border:2px solid var(--divider-soft);width:36px;height:36px;color:var(--n-700);transition:border-color .2s var(--ease), color .2s var(--ease);justify-content:center;align-items:center;display:flex}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle .icon-moon,:root[data-theme=dark] .theme-toggle .icon-sun{display:none}:root[data-theme=dark] .theme-toggle .icon-moon{display:block}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .icon-sun{display:none}:root:not([data-theme=light]) .theme-toggle .icon-moon{display:block}}.nav-burger{flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;display:none}.nav-burger span{background:var(--color-ink);width:100%;height:2px;transition:transform .25s var(--ease), opacity .25s var(--ease)}.nav-burger[aria-expanded=true] span:first-child{transform:translateY(7px)rotate(45deg)}.nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}.nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav-mobile{top:var(--header-h);background:var(--color-bg);border-bottom:2px solid var(--divider-soft);opacity:0;visibility:hidden;transition:transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;flex-direction:column;gap:4px;padding:8px 24px 24px;display:flex;position:fixed;left:0;right:0;transform:translateY(-8px)}.nav-mobile.is-open{opacity:1;visibility:visible;transform:translateY(0)}.nav-mobile a{border-bottom:1px solid var(--divider-soft);padding:14px 0;font-weight:600}.nav-mobile .btn{justify-content:center;margin-top:16px}@media (width<=860px){.nav-links,.nav-actions .btn{display:none}.nav-burger{display:flex}}.reveal{opacity:0;transition:opacity .6s var(--ease), transform .6s var(--ease);transform:translateY(18px)}.reveal.is-visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}}.hero{padding-top:calc(var(--header-h) + 64px);padding-bottom:56px;position:relative;overflow:hidden}.drift-field{pointer-events:none;z-index:0;justify-content:space-between;display:flex;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000000e6 20% 75%,#0000);mask-image:linear-gradient(#0000,#000000e6 20% 75%,#0000)}.drift-col{height:100%;font-family:var(--font-hanzi);color:var(--n-200);animation:drift var(--dur,30s) linear infinite;will-change:transform;flex-direction:column;flex:1;align-items:center;gap:40px;padding-top:20px;font-size:56px;display:flex;position:relative;overflow:hidden}.drift-col span{display:block}.drift-col[style*=--dir\:-1]{animation-direction:reverse}.drift-col .hl{color:var(--a-300)}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-50%)}}@media (prefers-reduced-motion:reduce){.drift-col{animation:none}}.hero-content{z-index:1;text-align:center;max-width:640px;margin-inline:auto;position:relative}.hero-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}@media (width<=860px){.hero{padding-top:calc(var(--header-h) + 40px);padding-bottom:40px}.hero-sub{margin-bottom:24px}.hero-actions{gap:12px}.drift-col{gap:26px;font-size:36px}.drift-col--tablet-hide{display:none}}@media (width<=560px){.drift-col--mobile-hide{display:none}.hero-tiles{max-width:260px}}.method{border-bottom:2px solid var(--color-ink);padding:72px 0}.method-grid{border-top:2px solid var(--color-ink);margin-top:40px;display:flex}.method-item{flex:1;padding:28px 32px 0 0}.method-item+.method-item{border-left:2px solid var(--color-ink);padding-left:32px}.method-item h3{font-size:18px}.method-item p{color:var(--n-700);font-size:15px;line-height:1.6}@media (width<=860px){.method-grid{flex-direction:column;gap:24px}.method-item{padding:24px 0 0}.method-item+.method-item{border-left:none;border-top:2px solid var(--color-ink);padding-left:0}}.mock{background:var(--color-bg);border:2px solid var(--color-ink);width:100%;max-width:300px;padding:24px;font-size:14px}.mock-bar,.mock-lesson-head{align-items:center;gap:10px;margin-bottom:20px;display:flex}.mock-lbar{background:var(--n-200);flex:1;height:4px;position:relative;overflow:hidden}.mock-lbar span{height:100%;width:var(--w,40%);background:var(--accent);display:block}.mock-count{color:var(--n-600);white-space:nowrap;font-size:12px;font-weight:700}.mock-x{color:var(--n-500);font-size:16px;line-height:1}.mock-btn{border:2px solid var(--color-ink);flex:1;justify-content:center;align-items:center;height:38px;padding:0 14px;font-size:13px;font-weight:700;display:inline-flex}.mock-btn--fill{background:var(--accent);border-color:var(--accent);color:#fff}.mock-btn--outline{color:var(--color-ink);background:0 0}.mock-btn--block{flex:none;width:100%;height:46px;margin-top:4px}.mock-btn--sm{white-space:nowrap;flex:1;height:32px;padding:0 8px;font-size:11px}.mock-btn--onlight{color:var(--accent-ink);background:#fff;border-color:#fff}.mock-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:12px;font-size:11px;font-weight:700;display:inline-block}.mock-home-head{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.mock-brand{align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.mock-brand-mark{background:var(--accent);color:#fff;width:20px;height:20px;font-family:var(--font-hanzi);justify-content:center;align-items:center;font-size:12px;display:flex}.mock-date{color:var(--n-600);font-size:11px}.mock-greet{margin-bottom:16px;font-size:18px;font-weight:800}.mock-statrow{border-top:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink);margin-bottom:16px;display:flex}.mock-statcell{flex-direction:column;flex:1;gap:2px;padding:14px 0;display:flex}.mock-statcell:first-child{border-right:2px solid var(--color-ink);padding-right:12px}.mock-statcell:last-child{padding-left:12px}.mock-statnum{font-size:26px;font-weight:800}.mock-statlabel{color:var(--n-600);font-size:11px}.mock-tagpill{color:var(--accent);margin-top:4px;font-size:10px;font-weight:700}.mock-week{gap:5px;margin-bottom:16px;display:flex}.mock-week span{aspect-ratio:1;border:2px solid var(--n-300);font-family:var(--font-hanzi);flex:1;justify-content:center;align-items:center;font-size:12px;display:flex}.mock-week .done{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-bg)}.mock-week .freeze{background:var(--a-100);border-color:var(--a-300);color:var(--a-700)}.mock-week .today{border-color:var(--accent)}.mock-week--onlight span{border-color:#ffffff59}.mock-week--onlight .done{color:var(--a-700);background:#fff;border-color:#fff}.mock-week--onlight .freeze{color:#fff;background:#fff3;border-color:#ffffff80}.mock-hint{color:var(--n-600);margin-bottom:12px;font-size:12px}.mock-ctasub{text-align:center;color:var(--n-600);margin-top:6px;font-size:11px;display:block}.mock-writebox{aspect-ratio:1;border:2px solid var(--color-ink);justify-content:center;align-items:center;margin-bottom:14px;display:flex;position:relative}.mock-ghost{font-family:var(--font-hanzi);color:var(--n-200);font-size:96px}.mock-strokecount{text-align:center;color:var(--n-600);margin-bottom:14px;font-size:12px}.mock-writerow{gap:8px;display:flex}.mock-kicker--onlight{text-align:center;text-transform:uppercase;letter-spacing:.08em;color:#ffffffbf;margin-bottom:12px;font-size:11px;font-weight:700}.mock-streaknum{text-align:center;color:#fff;font-size:64px;font-weight:800;line-height:1;display:block}.mock-streaklabel{text-align:center;color:#fffc;margin-bottom:20px;font-weight:700}.mock-streakmsg{text-align:center;color:#fff;margin-bottom:18px;font-size:13px}.mock-completestats{border-top:2px solid #ffffff59;border-bottom:2px solid #ffffff59;justify-content:space-between;margin-bottom:18px;padding:14px 0;display:flex}.mock-completestats div{flex-direction:column;align-items:center;gap:2px;display:flex}.mock-completestats span{color:#fff;font-size:18px;font-weight:800}.mock-completestats small{color:#ffffffb3;font-size:11px}.mock-matchgrid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mock-matchtile{border:2px solid var(--color-ink);text-align:center;font-family:var(--font-hanzi);padding:12px 0;font-size:16px}.mock-matchtile--paired{background:var(--a-100);border-color:var(--a-300);color:var(--a-700)}.mock-matchtile--sel{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-bg)}.features{background:var(--color-surface);border-bottom:2px solid var(--color-ink);padding:120px 0}.feature-grid{background:var(--color-ink);border:2px solid var(--color-ink);grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px;display:grid}.feature-card{background:var(--color-bg);transition:background .25s var(--ease);padding:32px}.feature-card:hover{background:var(--a-100)}.feature-card p{color:var(--n-700);font-size:15px;line-height:1.6}@media (width<=860px){.feature-grid{grid-template-columns:1fr}}.screens{border-bottom:2px solid var(--color-ink);padding:120px 0 80px;overflow:hidden}.phone-rail{scroll-snap-type:x proximity;scrollbar-width:none;margin-top:48px;padding-bottom:8px;overflow-x:auto}.phone-rail::-webkit-scrollbar{display:none}.phone-track{gap:32px;width:max-content;padding-inline:max(24px,50vw - 616px);display:flex}.phone{scroll-snap-align:center;flex-direction:column;flex-shrink:0;align-items:center;gap:16px;width:260px;display:flex}.phone-screen{aspect-ratio:9/17.5;border:2px solid var(--color-ink);background:var(--color-bg);width:100%;transition:transform .3s var(--ease);flex-direction:column;padding:22px 18px;display:flex;overflow:hidden}.phone:hover .phone-screen{transform:translateY(-6px)}.phone-screen--complete{background:var(--accent);justify-content:center}.phone-screen--write .mock-lesson-head,.phone-screen--match .mock-lesson-head{margin-bottom:18px}.phone-caption{color:var(--n-600);text-align:center;font-size:13px;font-weight:600}.phone-dots{display:none}@media (width<=640px){.phone{width:220px}}.goal{border-bottom:2px solid var(--color-ink);padding:72px 0}.mock-commit{margin-top:40px;max-width:400px;margin-inline:auto}.mock-commit-h2{letter-spacing:-.02em;margin:0 0 10px;font-size:28px;font-weight:800;line-height:1.15}.mock-commit-body{color:var(--n-700);margin:0;font-size:15px;line-height:1.5}.mock-commit-picker{border:2px solid var(--color-ink);margin-top:24px;display:flex}.mock-commit-cell{height:72px;font-family:var(--font-body);letter-spacing:-.02em;color:var(--color-ink);border-right:1px solid var(--divider);transition:background .2s var(--ease), color .2s var(--ease);background:0 0;flex:1;justify-content:flex-start;align-items:center;padding:0 14px;font-size:20px;font-weight:800;display:flex}.mock-commit-cell:last-child{border-right:none}.mock-commit-cell.is-active{background:var(--color-ink);color:var(--color-bg)}.mock-commit-bars{align-items:flex-end;gap:16px;height:150px;margin-top:28px;display:flex}.mock-commit-barcol{flex-direction:column;flex:1;justify-content:flex-end;gap:8px;height:100%;display:flex}.mock-commit-num{letter-spacing:-.02em;font-size:28px;font-weight:800}.mock-commit-track{flex:1;align-items:flex-end;min-height:0;display:flex}.mock-commit-bar{width:100%;height:var(--h,0%);background:var(--accent);transition:height .5s var(--ease)}.mock-commit-bar--light{background:var(--a-300)}.mock-commit-label{color:var(--n-600);font-size:12px}.mock-commit-rule{background:var(--divider);height:2px;margin-top:20px;display:block}.mock-commit-milestone{color:var(--color-ink);margin:14px 0 0;font-size:15px}.mock-commit-milestone strong{font-weight:800}.mock-commit .mock-btn--block{margin-top:28px}.mock-commit-cta{justify-content:flex-start;gap:10px}@media (width<=560px){.mock-commit-bars{gap:10px}}.faq{border-bottom:2px solid var(--color-ink);padding:120px 0}.faq-list{border-top:2px solid var(--color-ink);margin-top:40px}.faq-item{border-bottom:2px solid var(--color-ink)}.faq-item summary{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:17px;font-weight:700;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"";border-right:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink);width:12px;height:12px;transition:transform .25s var(--ease);flex-shrink:0;transform:rotate(45deg)}.faq-item[open] summary:after{transform:rotate(225deg)}.faq-item p{color:var(--n-700);max-width:560px;padding-bottom:24px;font-size:15px;line-height:1.65}.download{color:#fff;text-align:center;background:#201e1d;padding:120px 0}.download h2{color:#fff}.download-sub{color:#bab6b6;max-width:480px;margin:0 auto 40px;font-size:17px}.store-row{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:24px;display:flex}.store-badge{color:#bab6b6;border:2px solid #605d5d;align-items:center;gap:10px;height:52px;padding:0 22px;font-size:14px;font-weight:700;display:inline-flex}.store-badge svg{width:22px;height:22px}.download-note{color:#9b9797;font-size:13px}.footer{padding:48px 0}.footer-inner{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.brand--footer{margin-right:0}.footer-tag{color:var(--n-600);font-size:14px}.footer-links{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.footer-links a{color:var(--n-600);font-size:13px;font-weight:600}.footer-links a:hover{color:var(--accent)}.footer-copy{color:var(--n-500);font-size:12px}.page-hero{padding:calc(var(--header-h) + 56px) 0 40px;border-bottom:2px solid var(--color-ink)}.page-hero h1{font-size:clamp(28px,4vw,42px);line-height:1.15}.page-updated{color:var(--n-500);margin-top:12px;font-size:13px}.article{padding:56px 0 100px}.article h2{margin-top:48px;margin-bottom:14px;font-size:23px}.article h2:first-child{margin-top:0}.article h3{margin-top:28px;margin-bottom:10px;font-size:17px}.article p,.article li{color:var(--n-800);font-size:16px;line-height:1.7}.article p{margin:0 0 18px}.article ul,.article ol{margin:0 0 18px;padding-left:22px}.article li{margin-bottom:8px}.article a{color:var(--accent);text-decoration:underline;-webkit-text-decoration-color:var(--divider-soft);text-decoration-color:var(--divider-soft);text-underline-offset:2px}.article a:hover{text-decoration-color:currentColor}.article strong{color:var(--color-ink);font-weight:700}.article blockquote{border-left:2px solid var(--color-ink);color:var(--n-700);margin:24px 0;padding-left:20px;font-style:italic}.article-table-wrap{border:2px solid var(--color-ink);margin:0 0 24px;overflow-x:auto}.article table{border-collapse:collapse;width:100%;font-size:15px}.article th,.article td{text-align:left;border-bottom:1px solid var(--divider-soft);white-space:nowrap;padding:10px 14px}.article th{color:var(--n-600);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--color-ink);font-size:12px;font-weight:700}.article tr:last-child td{border-bottom:none}.article td:first-child{font-family:var(--font-hanzi);font-size:18px}.article-lead{color:var(--n-700);margin:0 0 32px;font-size:18px;line-height:1.6}.article-back{color:var(--n-700);align-items:center;gap:8px;margin-bottom:24px;font-size:14px;font-weight:700;display:inline-flex}.article-back:hover{color:var(--accent)}.article-back .icon{width:16px;height:16px}.blog-list{margin-top:8px}.blog-card{border-bottom:2px solid var(--divider-soft);padding:32px 0}.blog-card:first-child{padding-top:0}.blog-card-date{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:8px;font-size:12px;font-weight:700;display:block}.blog-card h2{margin:0 0 8px;font-size:26px}.blog-card h2 a{color:inherit;text-decoration:none}.blog-card h2 a:hover{color:var(--accent)}.blog-card p{color:var(--n-700);margin:0 0 10px;font-size:15px;line-height:1.6}.blog-card-more{color:var(--a-700);font-size:14px;font-weight:700}.blog-card-more:hover{color:var(--accent)}