@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap";@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap";@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap";@import "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap";@import "https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap";:root{--shell:#d8cfb8;--surface:#efe7d6;--surface-2:#f5f0e5;--surface-3:#ece4d2;--text:#1a1714;--text-2:#2c2823;--text-mute:#6b685e;--text-faint:#98948a;--rule:#d4ccba;--accent:#ff4a2b;--accent-soft:#ff4a2b1a;--accent-glow:#ff4a2b4d;--font-display-cn:"Noto Serif SC", "Source Han Serif SC", serif;--font-display-en:"Instrument Serif", "GT Sectra", "Playfair Display", Georgia, serif;--font-body:"Manrope", "Inter", "Noto Sans SC", -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", ui-monospace, monospace;--font-features:"ss01", "cv11", "tnum";--dur-base:.7s;--dur-slow:1.1s;--dur-cinematic:1.6s;--r-card:var(--r-sm);--r-stage:0;--rule-w:1px;--rule-style:solid;--hero-num-font:var(--font-display-en);--hero-num-style:italic;--hero-num-weight:400;--hero-num-track:-.025em;--stage-pad-x:140px;--stage-pad-y:100px;--card-shadow:0 1px 0 var(--rule), 0 24px 60px #281e0f2e;--shadow-stage:0 60px 160px #281e0f59, 0 0 0 1px #0000000a;--surface-pattern:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");--surface-pattern-size:280px 280px;--surface-pattern-blend:multiply;--surface-pattern-opacity:.45}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}img,svg,video{max-width:100%;display:block}button{font:inherit;color:inherit;background:0 0;border:0;padding:0}body{font-family:var(--font-display-cn);color:var(--text);background:var(--shell);-webkit-font-smoothing:antialiased;text-rendering:geometricprecision;text-wrap:pretty;font-feature-settings:var(--font-features,"tnum", "ss01");letter-spacing:var(--track-snug,-.005em);cursor:default}::selection{background:var(--accent);color:var(--surface)}:root{--t-display-1:clamp(140px, 11vw, 200px);--t-display-2:clamp(80px, 7vw, 128px);--t-h1:clamp(56px, 5vw, 88px);--t-h2:clamp(40px, 3.6vw, 60px);--t-body:20px;--t-micro:12px;--track-tight:-.025em;--track-snug:-.005em;--track-caps:.22em;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-7:48px;--space-9:96px;--stage-pad-x:96px;--stage-pad-y:80px;--r-flat:0;--r-xs:4px;--r-sm:8px;--r-md:16px;--r-xl:32px;--r-pill:999px;--r-card:var(--r-md);--bw-1:1px;--bw-2:2px;--bw-4:4px;--rule-w:1px;--rule-style:solid;--ease-quart:cubic-bezier(.19, 1, .22, 1);--ease-expo:cubic-bezier(.86, 0, .07, 1);--ease-soft:cubic-bezier(.4, 0, .1, 1);--ease-overshoot:cubic-bezier(.34, 1.56, .64, 1);--dur-quick:.28s;--dur-base:.6s;--dur-slow:.9s;--dur-cinematic:1.4s;--hero-num-font:var(--font-display-en);--hero-num-style:italic;--hero-num-weight:400;--hero-num-track:var(--track-tight);--shadow-stage:0 60px 160px #0000008c, 0 0 0 1px #ffffff06}.app-shell{background:var(--shell);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.stage-fitter{isolation:isolate;position:relative}.stage-frame{transform-origin:0 0;background:var(--surface);cursor:pointer;width:1920px;height:1080px;box-shadow:var(--shadow-stage);border:var(--stage-border,none);border-radius:var(--r-stage,0);position:absolute;top:0;left:0;overflow:hidden}.stage-frame:after{content:"";pointer-events:none;background-image:var(--surface-pattern,none);background-size:var(--surface-pattern-size,auto);mix-blend-mode:var(--surface-pattern-blend,normal);opacity:var(--surface-pattern-opacity,1);z-index:1;position:absolute;inset:0}.stage-frame:before{content:"";pointer-events:none;background:var(--surface-vignette,none);z-index:1;position:absolute;inset:0}.scene{z-index:2;position:absolute;inset:0}.serif-cn{font-family:var(--font-display-cn);letter-spacing:var(--track-tight);text-shadow:var(--text-shadow,none);font-style:normal;font-weight:700}.serif-it{font-family:var(--font-display-en);letter-spacing:var(--track-tight);text-shadow:var(--text-shadow,none);font-style:italic;font-weight:400}.display-en{font-family:var(--font-display-en);letter-spacing:var(--track-tight);text-shadow:var(--text-shadow,none);font-style:normal;font-weight:700}.mono{font-family:var(--font-mono)}.label-mono{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);font-weight:500}.kicker{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-size:13px}.hero-num{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-weight:var(--hero-num-weight);letter-spacing:var(--hero-num-track);font-variant-numeric:tabular-nums;color:var(--text);line-height:.9}.scene-pad{padding:var(--stage-pad-y) var(--stage-pad-x);flex-direction:column;display:flex;position:absolute;inset:0}.stack{flex-direction:column;display:flex}.row{flex-direction:row;display:flex}.fill{flex:1}.center{place-items:center;display:grid}.rule{border:0;border-top:var(--rule-w) var(--rule-style) var(--rule);width:100%;height:0;margin:0}.rule-accent{border:0;border-top:var(--bw-2) solid var(--accent);width:100%;height:0;margin:0}.dot-accent{background:var(--accent);width:8px;height:8px;box-shadow:0 0 14px var(--accent-glow);vertical-align:middle;border-radius:50%;display:inline-block}.corner-mark{top:var(--space-7);left:var(--space-9);z-index:5;align-items:baseline;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);pointer-events:none;display:flex;position:absolute}.corner-mark .ord{font-family:var(--font-display-en);letter-spacing:0;color:var(--text);font-size:28px;font-style:italic;line-height:1}.corner-mark .slash{opacity:.3;font-size:16px}.click-cue{right:var(--space-9);bottom:var(--space-7);z-index:5;align-items:center;gap:var(--space-3);font-family:var(--font-mono);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);opacity:0;transition:opacity var(--dur-slow) var(--ease-quart);pointer-events:none;font-size:11px;display:flex;position:absolute}.click-cue.visible{opacity:.6}.click-cue .arrow{font-family:var(--font-display-en);letter-spacing:0;animation:nudge 2.4s var(--ease-soft) infinite;font-size:20px;font-style:italic;display:inline-block}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(6px)}}.badge-mono{align-items:center;gap:var(--space-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-pill);font-family:var(--font-mono);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);padding:4px 10px;font-size:11px;display:inline-flex}.badge-mono.is-accent{color:var(--accent);border-color:var(--accent)}.pull-quote{border-left:var(--bw-4) solid var(--accent);padding:var(--space-3) 0 var(--space-3) var(--space-5);font-family:var(--font-display-cn);font-weight:700;font-size:var(--t-h2);color:var(--text);line-height:1.3}.card{background:var(--surface-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-card);box-shadow:var(--card-shadow,none)}.card-glass{background:var(--card-glass-bg,#ffffff0f);-webkit-backdrop-filter:blur(20px);border:var(--bw-1) solid var(--card-glass-border,#ffffff1f);border-radius:var(--r-card)}.tr-rule{border-top:var(--rule-w) var(--rule-style) var(--rule)}.masthead{align-items:baseline;gap:var(--space-5);width:100%;display:flex}.masthead .brand{font-family:var(--font-display-en);color:var(--text);letter-spacing:0;font-size:22px;font-style:italic}.masthead .issue{font-family:var(--font-mono);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);margin-left:auto;font-size:11px}.fade-in{animation:fade-in var(--dur-base) var(--ease-quart) both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.mask-reveal{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease-quart)}.mask-reveal.in{clip-path:inset(0)}.rule-grow{transform-origin:0;transition:transform var(--dur-cinematic) var(--ease-expo);transform:scaleX(0)}.rule-grow.in{transform:scaleX(1)}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes pop-in{0%{opacity:0;transform:scale(.6)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes caret-blink{50%{opacity:0}}@keyframes pulse-halo{0%{opacity:.6;transform:scale(.9)}70%{opacity:0;transform:scale(1.6)}to{opacity:0;transform:scale(1.6)}}.letter-stagger>.letter{opacity:0;animation:letter-rise var(--dur-slow) var(--ease-expo) forwards;animation-delay:calc(var(--i,0) * 60ms);display:inline-block;transform:translateY(40px)scale(.85)}@keyframes letter-rise{to{opacity:1;transform:translateY(0)scale(1)}}.auto-gate{z-index:100;-webkit-backdrop-filter:blur(20px);cursor:pointer;background:#000000c7;place-items:center;animation:.32s ease-out auto-gate-fade-in;display:grid;position:fixed;inset:0}@keyframes auto-gate-fade-in{0%{opacity:0}to{opacity:1}}.auto-gate-card{text-align:center;color:#f4f4f5;flex-direction:column;align-items:center;gap:12px;padding:48px 64px;display:flex}.auto-gate-kicker{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:#f4f4f58c;font-size:11px}.auto-gate-title{font-family:var(--font-display-en,system-ui);letter-spacing:-.02em;font-size:56px;font-weight:600;line-height:1.1}.auto-gate-sub{font-family:var(--font-body,var(--font-display-en));color:#f4f4f5a6;margin-top:8px;font-size:16px;line-height:1.6}.auto-gate-sub kbd{font-family:var(--font-mono);background:#ffffff1f;border:1px solid #ffffff2e;border-radius:4px;padding:2px 6px;font-size:12px}.at-hover{z-index:11;pointer-events:auto;justify-content:flex-end;align-items:flex-start;width:160px;height:60px;padding:12px;display:flex;position:fixed;top:0;right:0}.at-btn{-webkit-backdrop-filter:blur(20px);color:#f4f4f5;font-family:var(--font-mono);letter-spacing:.18em;cursor:pointer;opacity:0;background:#000000d9;border-radius:0 0 0 8px;align-items:center;gap:8px;padding:8px 14px;font-size:11px;transition:opacity .28s,transform .28s;display:inline-flex;transform:translateY(-100%)}.at-hover:hover .at-btn{opacity:1;transform:translateY(0)}.at-dot{background:#888;border-radius:50%;width:8px;height:8px;display:inline-block}.at-manual .at-dot{background:#888}.at-audio .at-dot{background:#facc15;box-shadow:0 0 8px #facc1599}.at-auto .at-dot{background:#4ade80;box-shadow:0 0 8px #4ade80b3}.pb-hover{z-index:10;pointer-events:auto;justify-content:center;align-items:flex-end;height:60px;display:flex;position:fixed;bottom:0;left:0;right:0}.pb{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);scrollbar-width:thin;scrollbar-color:var(--text-faint) transparent;opacity:0;max-width:calc(100vw - 32px);transition:opacity var(--dur-base) var(--ease-quart), transform var(--dur-base) var(--ease-quart);background:#000000d9;border-radius:12px 12px 0 0;gap:6px;padding:12px 20px;display:flex;overflow:auto hidden;transform:translateY(100%)}.pb::-webkit-scrollbar{height:4px}.pb::-webkit-scrollbar-track{background:0 0}.pb::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:2px}.pb-hover:hover .pb{opacity:1;transform:translateY(0)}.pb-chapter{color:var(--text-mute);font-family:var(--font-mono);cursor:pointer;transition:color var(--dur-quick), border-color var(--dur-quick);background:0 0;border:1px solid #0000;border-radius:4px;flex-shrink:0;align-items:center;gap:8px;padding:6px 12px;font-size:11px;display:flex}.pb-chapter:hover{color:var(--text)}.pb-active{color:var(--text);border-color:var(--accent)}.pb-num{color:var(--accent);font-weight:600}.pb-pips{flex-shrink:0;gap:3px;margin-left:8px;display:flex}.pb-pip{background:var(--text-faint);cursor:pointer;width:6px;height:6px;transition:background var(--dur-quick);border-radius:50%;flex-shrink:0}.pb-pip-on{background:var(--accent)}.pb-github{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:36px;height:36px;color:var(--text);opacity:0;transition:opacity var(--dur-base) var(--ease-quart), transform var(--dur-base) var(--ease-quart), color var(--dur-quick);background:#000000d9;border-radius:8px;justify-content:center;align-items:center;text-decoration:none;display:flex;position:absolute;bottom:12px;right:16px;transform:translateY(100%)}.pb-github:hover{color:var(--accent)}.pb-hover:hover .pb-github{opacity:1;transform:translateY(0)}.pb-github svg{display:block}.co-step0{justify-content:center;align-items:center;gap:var(--space-7);flex-direction:column;height:100%;display:flex}.co-hero-text{font-family:var(--font-display-cn);font-size:var(--t-display-2);color:var(--text);text-align:center;letter-spacing:var(--track-tight);font-weight:700;line-height:1.1}.co-keyboard{opacity:.15;grid-template-rows:repeat(3,36px);grid-template-columns:repeat(14,40px);gap:6px;display:grid}.co-key{background:var(--text);border-radius:4px}.co-counter{position:relative}.co-counter-num{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-weight:var(--hero-num-weight);color:var(--accent);letter-spacing:var(--hero-num-track);font-size:180px;line-height:.85;animation:3s ease-in-out forwards co-count}@keyframes co-count{0%{content:"0"}15%{opacity:1}to{opacity:1}}.co-counter-layer{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-weight:var(--hero-num-weight);color:var(--accent);letter-spacing:var(--hero-num-track);opacity:0;justify-content:center;align-items:center;font-size:180px;line-height:.85;display:flex;position:absolute;inset:0}.co-counter-wrap{width:200px;height:180px;position:relative}.co-counter-layer:first-child{animation:3s ease-in-out forwards co-num-show}.co-counter-layer:nth-child(2){animation:3s ease-in-out .3s forwards co-num-show}.co-counter-layer:nth-child(3){animation:3s ease-in-out .6s forwards co-num-show}.co-counter-layer:nth-child(4){animation:3s ease-in-out .9s forwards co-num-show}.co-counter-layer:nth-child(5){animation:3s ease-in-out 1.2s forwards co-num-show}.co-counter-layer:nth-child(6){animation:3s ease-in-out 1.5s forwards co-num-show}.co-counter-layer:nth-child(7){animation:3s ease-in-out 1.8s forwards co-num-show}.co-counter-layer:nth-child(8){animation:3s ease-in-out 2.1s forwards co-num-show}.co-counter-layer:nth-child(9){animation:3s ease-in-out 2.4s forwards co-num-show}@keyframes co-num-show{0%,30%{opacity:0;transform:scale(.9)}35%,60%{opacity:1;transform:scale(1)}65%,to{opacity:0;transform:scale(1.05)}}.co-counter-layer:nth-child(10){animation:3s ease-in-out 2.7s forwards co-num-final}@keyframes co-num-final{0%,30%{opacity:0;transform:scale(.9)}35%,to{opacity:1;transform:scale(1)}}.co-kicker{right:var(--space-9);bottom:var(--space-7);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-size:13px;animation:2s ease-in-out infinite co-kicker-pulse;position:absolute}@keyframes co-kicker-pulse{0%,to{opacity:.4}50%{opacity:.8}}.co-step1{height:100%;padding:var(--stage-pad-y) var(--stage-pad-x);grid-template-columns:1fr 1fr;align-items:center;display:grid}.co-step1-left{gap:var(--space-5);flex-direction:column;display:flex}.co-step1-hero{font-family:var(--font-display-cn);font-size:var(--t-display-2);color:var(--text);letter-spacing:var(--track-tight);font-weight:700;line-height:1.1}.co-step1-right{gap:var(--space-5);padding-left:var(--space-9);flex-direction:column;display:flex}.co-bar-wrap{background:var(--surface-3);border-radius:var(--r-sm);border:1px solid var(--rule);width:100%;height:48px;position:relative;overflow:hidden}.co-bar-fill{background:var(--accent);border-radius:var(--r-sm);transform-origin:0;height:100%;animation:co-bar-grow 2s var(--ease-quart) .5s both}@keyframes co-bar-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.co-bar-label{right:var(--space-4);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--surface);opacity:0;animation:co-fade-in .6s var(--ease-quart) 2s forwards;font-weight:600;position:absolute;top:50%;transform:translateY(-50%)}@keyframes co-fade-in{0%{opacity:0}to{opacity:1}}.co-bar-value{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-size:var(--t-h1);color:var(--text);margin-top:var(--space-3)}.co-bottom-kicker{bottom:var(--space-7);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-size:13px;position:absolute;left:50%;transform:translate(-50%)}.wp-step0{justify-content:center;align-items:center;gap:var(--space-7);flex-direction:column;height:100%;display:flex}.wp-big-char{font-family:var(--font-display-cn);color:var(--text);letter-spacing:var(--track-tight);font-size:200px;font-weight:900;line-height:1;animation:3s ease-in-out infinite wp-char-pulse}@keyframes wp-char-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.wp-decomp{align-items:center;gap:var(--space-5);display:flex}.wp-pinyin-part{font-family:var(--font-mono);font-size:var(--t-h1);letter-spacing:.02em;font-weight:600}.wp-pinyin-initial{color:var(--accent);opacity:0;animation:wp-slide-right .8s var(--ease-quart) .6s forwards;transform:translate(-60px)}.wp-pinyin-final{color:var(--text);opacity:0;animation:wp-slide-left .8s var(--ease-quart) .8s forwards;transform:translate(60px)}@keyframes wp-slide-right{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}@keyframes wp-slide-left{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}.wp-connector{font-family:var(--font-mono);font-size:var(--t-h2);color:var(--text-mute);opacity:0;animation:wp-fade-in .5s var(--ease-quart) 1.2s forwards}@keyframes wp-fade-in{0%{opacity:0}to{opacity:1}}.wp-pinyin-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);opacity:0;animation:wp-fade-in .5s var(--ease-quart) 1.4s forwards}.wp-label-row{gap:var(--space-9);display:flex}.wp-step1{justify-content:center;align-items:center;gap:var(--space-9);flex-direction:column;height:100%;display:flex}.wp-cards-row{gap:var(--space-7);display:flex}.wp-stat-card{align-items:center;gap:var(--space-4);padding:var(--space-7) var(--space-9);flex-direction:column;min-width:260px;display:flex}.wp-stat-num{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-weight:var(--hero-num-weight);font-size:var(--t-display-1);color:var(--accent);letter-spacing:var(--hero-num-track);line-height:.9}.wp-stat-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-size:13px}.wp-summary-text{font-family:var(--font-display-cn);font-size:var(--t-h2);color:var(--text);text-align:center;max-width:900px;font-weight:700;line-height:1.4}.if-step{padding:var(--stage-pad-y) var(--stage-pad-x);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.if-hero-title{font-family:var(--font-display-cn);font-size:var(--t-h1);color:var(--text);letter-spacing:var(--track-tight);text-align:center;font-weight:700}.if-group{gap:var(--space-3);padding:var(--space-5) var(--space-7);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--card-shadow,none);align-items:center;display:flex}.if-letter{font-family:var(--font-mono);font-size:var(--t-h1);color:var(--text);font-weight:600;line-height:1}.if-group-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);margin-left:var(--space-3)}.if-groups-row{gap:var(--space-5);margin-top:var(--space-5);display:flex}.if-step0 .if-groups-row{gap:var(--space-5)}.if-group.accent-tint{background:var(--accent-soft);border-color:var(--accent)}.if-all-groups{gap:var(--space-5);flex-direction:column;align-items:center;display:flex}.if-compare{gap:var(--space-7);grid-template-columns:1fr auto 1fr;align-items:start;width:100%;max-width:1400px;display:grid}.if-compare-side{align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.if-compare-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute)}.if-tongue-illust{justify-content:center;align-items:center;width:200px;height:140px;display:flex;position:relative}.if-tongue-curled{border-bottom:4px solid var(--accent);border-radius:0 0 60px 60px;width:120px;height:60px;position:relative}.if-tongue-curled:after{content:"";border-top:4px solid var(--accent);border-radius:0 20px 0 0;width:40px;height:30px;position:absolute;top:-20px;right:10px}.if-tongue-flat{border-bottom:4px solid var(--text-mute);border-radius:0 0 20px 20px;width:120px;height:20px}.if-letters-row{gap:var(--space-3);display:flex}.if-compare-letter{font-family:var(--font-mono);font-size:var(--t-h2);padding:var(--space-2) var(--space-4);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);font-weight:600}.if-compare-letter.accent{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.if-compare-divider{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-size:var(--t-display-2);color:var(--text-mute);opacity:.3;justify-content:center;align-items:center;padding-top:100px;display:flex}.if-vs{gap:var(--space-7);grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1400px;display:grid}.if-vs-char{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.if-big-char{font-family:var(--font-display-cn);color:var(--text);font-size:200px;font-weight:900;line-height:1}.if-pinyin-below{font-family:var(--font-mono);font-size:var(--t-h2);font-weight:600}.if-not-equal{font-family:var(--hero-num-font);font-style:var(--hero-num-style);color:var(--text-mute);opacity:.25;font-size:120px;line-height:1}.if-finals-grid{gap:var(--space-5);flex-wrap:wrap;justify-content:center;display:flex}.if-final-card{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-card);width:140px;height:140px;box-shadow:var(--card-shadow,none);flex-direction:column;justify-content:center;align-items:center;display:flex}.if-final-letter{font-family:var(--font-mono);font-size:var(--t-h1);color:var(--accent);font-weight:600;line-height:1}.if-common-grid{gap:var(--space-5);flex-direction:column;align-items:center;display:flex}.if-common-row{gap:var(--space-5);align-items:center;display:flex}.if-common-card{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-card);flex-direction:column;justify-content:center;align-items:center;width:160px;height:100px;display:flex}.if-common-pinyin{font-family:var(--font-mono);font-size:var(--t-h2);color:var(--text);font-weight:600;line-height:1}.if-group-badge{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);margin-right:var(--space-4);text-align:right;min-width:100px}.if-summary{justify-content:center;align-items:center;gap:var(--space-9);flex-direction:column;height:100%;display:flex}.if-summary-text{font-family:var(--font-display-cn);font-size:var(--t-h1);color:var(--text);text-align:center;max-width:900px;font-weight:700;line-height:1.3}.if-summary-badge{align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-card);display:flex}.if-summary-num{font-family:var(--hero-num-font);font-style:var(--hero-num-style);font-size:var(--t-display-2);color:var(--accent);line-height:.9}.if-summary-check{color:var(--accent);font-size:48px;line-height:1}.if-summary-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-size:13px}.to-scene{color:var(--text)}.to-hero{padding-top:var(--space-7);justify-content:center;display:flex}.to-hero-text{font-size:var(--t-h1)}.to-tones-row{justify-content:center;align-items:center;gap:var(--space-9);flex:1;display:flex}.to-tone-card{align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);opacity:0;animation:to-card-in .8s var(--ease-quart) forwards;flex-direction:column;display:flex}@keyframes to-card-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.to-tone-char{color:var(--text);font-size:clamp(64px,6vw,96px);line-height:1}.to-tone-contour{width:60px;height:30px}.to-contour-svg{width:100%;height:100%}.to-tone-label{font-size:11px}.to-compare{justify-content:center;align-items:center;gap:var(--space-9);flex:1;display:flex}.to-compare-col{align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);border-radius:var(--r-card);background:var(--surface-2);border:1px solid var(--rule);opacity:0;animation:to-card-in .8s var(--ease-quart) forwards;flex-direction:column;display:flex}.to-compare-pinyin{color:var(--accent);font-size:28px}.to-compare-char{font-size:clamp(72px,6vw,100px);line-height:1}.to-compare-meaning{font-size:11px}.to-compare-foot{padding-bottom:var(--space-7);text-align:center}.to-step2{justify-content:center;align-items:center;gap:var(--space-7)}.to-reassure-text{font-size:var(--t-h1)}.to-ime-demo{gap:var(--space-4);padding:var(--space-5) var(--space-7);opacity:0;min-width:480px;animation:to-card-in .8s var(--ease-quart) forwards;flex-direction:column;display:flex}.to-ime-input{padding:var(--space-3) var(--space-4);border-bottom:2px solid var(--rule);font-size:24px}.to-ime-cursor{color:var(--accent);animation:1s step-end infinite to-blink}@keyframes to-blink{50%{opacity:0}}.to-ime-candidates{gap:var(--space-4);padding:var(--space-3) 0;display:flex}.to-ime-candidate{font-family:var(--font-display-cn);padding:var(--space-2) var(--space-4);border-radius:var(--r-xs);color:var(--text-2);font-size:20px}.to-ime-active{background:var(--accent-soft);color:var(--accent);font-weight:700}.to-ime-check{align-items:center;gap:var(--space-3);padding-top:var(--space-2);display:flex}.kb-scene{color:var(--text)}.kb-header{padding-top:var(--space-7)}.kb-layout{gap:var(--space-5);padding-top:var(--space-7);flex:1;grid-template-columns:1fr 1fr 1fr;align-items:start;display:grid}.kb-section{padding:var(--space-5);opacity:0;animation:kb-fade-in .6s var(--ease-quart) forwards}.kb-center{animation-delay:.4s!important}.kb-section:last-child{animation-delay:.8s!important}@keyframes kb-fade-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.kb-section-label{margin-bottom:var(--space-4)}.kb-keys{gap:var(--space-2);flex-wrap:wrap;display:flex}.kb-key{border-radius:var(--r-xs);background:var(--surface-3);border:1px solid var(--rule);width:48px;height:48px;color:var(--text);opacity:0;animation:kb-key-in .4s var(--ease-quart) forwards;justify-content:center;align-items:center;font-size:18px;display:flex}@keyframes kb-key-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.kb-candidates{gap:var(--space-4);padding:var(--space-5) 0;justify-content:center;display:flex}.kb-candidate{font-family:var(--font-display-cn);color:var(--accent);font-size:40px;font-weight:700}.kb-compare{align-items:center;gap:var(--space-7);padding-top:var(--space-5);flex:1;display:flex}.kb-compare-half{gap:var(--space-4);flex-direction:column;flex:1;display:flex}.kb-compare-divider{color:var(--text-mute);align-items:center;display:flex}.kb-slow-input{gap:4px;min-height:48px;font-size:28px;display:flex}.kb-slow-char{opacity:0;animation:kb-char-in .4s var(--ease-quart) forwards}@keyframes kb-char-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.kb-fast-input{min-height:48px;font-size:28px}.kb-fast-text{opacity:0;animation:kb-fast-in .6s var(--ease-quart) .2s forwards}@keyframes kb-fast-in{0%{opacity:0}to{opacity:1}}.kb-progress-track{background:var(--surface-3);border-radius:3px;height:6px;overflow:hidden}.kb-progress-fill{background:var(--accent);border-radius:3px;height:100%}.kb-progress-slow{width:0;animation:5s linear forwards kb-bar-slow}@keyframes kb-bar-slow{to{width:100%}}.kb-progress-fast{width:0;animation:kb-bar-fast 1.5s var(--ease-quart) .2s forwards}@keyframes kb-bar-fast{to{width:100%}}.kb-step2{justify-content:center;align-items:center;gap:var(--space-7)}.kb-predict-demo{gap:var(--space-5);padding:var(--space-5) var(--space-7);opacity:0;min-width:640px;animation:kb-fade-in .6s var(--ease-quart) forwards;flex-direction:column;display:flex}.kb-predict-row{align-items:center;gap:var(--space-4);display:flex}.kb-predict-input{min-width:160px;color:var(--text-2);font-size:18px}.kb-arrow{color:var(--text-mute);font-size:24px}.kb-predict-candidates{gap:var(--space-3);display:flex}.kb-predict-cand{font-family:var(--font-display-cn);padding:var(--space-2) var(--space-4);border-radius:var(--r-xs);border:1px solid var(--rule);color:var(--text-2);font-size:20px}.kb-predict-active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:700}.st-scene{color:var(--text)}.st-header{gap:var(--space-3);padding-top:var(--space-7);flex-direction:column;display:flex}.st-title{font-size:var(--t-h1)}.st-demo{justify-content:center;gap:var(--space-9);flex-direction:column;flex:1;display:flex}.st-demo-row{align-items:center;gap:var(--space-5);opacity:0;animation:st-slide-in .8s var(--ease-quart) forwards;display:flex}@keyframes st-slide-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.st-demo-full{color:var(--text-mute);text-decoration:line-through;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);font-size:32px}.st-demo-arrow{color:var(--accent);font-size:28px}.st-demo-short{color:var(--accent);font-size:48px;font-weight:700}.st-demo-word{color:var(--text-2);margin-left:var(--space-4);font-size:36px}.st-step1{justify-content:center;align-items:center}.st-chat{opacity:0;width:560px;animation:st-slide-in .6s var(--ease-quart) forwards;flex-direction:column;display:flex;overflow:hidden}.st-chat-header{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--rule)}.st-chat-body{gap:var(--space-3);padding:var(--space-5);flex-direction:column;flex:1;min-height:300px;display:flex}.st-chat-bubble{max-width:60%;padding:var(--space-3) var(--space-4);font-family:var(--font-display-cn);border-radius:16px;font-size:18px}.st-chat-left{background:var(--surface-3);color:var(--text);border-bottom-left-radius:4px;align-self:flex-start}.st-chat-right{background:var(--accent-soft);color:var(--accent);border-bottom-right-radius:4px;align-self:flex-end}.st-chat-input{padding:var(--space-3) var(--space-5);border-top:1px solid var(--rule);gap:var(--space-2);flex-direction:column;display:flex}.st-chat-candidates{gap:var(--space-3);display:flex}.st-chat-cand{font-family:var(--font-display-cn);color:var(--text-2);border-radius:4px;padding:2px 8px;font-size:16px}.st-chat-active{background:var(--accent-soft);color:var(--accent);font-weight:700}.st-chat-field{padding:var(--space-2) 0;color:var(--text);font-size:20px}.st-chat-cursor{color:var(--accent);animation:1s step-end infinite st-blink}@keyframes st-blink{50%{opacity:0}}.st-step2{justify-content:center;align-items:center;gap:var(--space-7)}.st-dict{align-items:center;gap:var(--space-7);opacity:0;animation:st-slide-in .8s var(--ease-quart) forwards;display:flex}.st-dict-word{font-size:var(--t-h2)}.st-dict-arrow{opacity:.6}.st-dict-code{color:var(--accent);font-size:48px;font-weight:700}.st-step3{justify-content:center;align-items:center;gap:var(--space-7)}.st-shuangpin{gap:var(--space-9);align-items:end;display:flex}.st-sp-col{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.st-sp-chars{gap:4px;display:flex}.st-sp-letter{border-radius:var(--r-xs);background:var(--surface-3);border:1px solid var(--rule);width:64px;height:72px;color:var(--text);opacity:0;animation:st-letter-in .5s var(--ease-overshoot) forwards;justify-content:center;align-items:center;font-size:36px;display:flex}.st-sp-accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}@keyframes st-letter-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.st-sp-count{font-size:13px}.st-sp-bar-track{background:var(--surface-3);border-radius:3px;width:200px;height:6px;overflow:hidden}.st-sp-bar{background:var(--accent);border-radius:3px;height:100%}.st-sp-bar-full{width:0;animation:st-bar-grow 1.5s var(--ease-quart) .2s forwards}.st-sp-bar-short{width:0;animation:st-bar-grow .8s var(--ease-quart) .8s forwards}@keyframes st-bar-grow{to{width:100%}}.pp-hero-text{text-align:center;margin-bottom:var(--space-9);opacity:0;animation:pp-hero-in var(--dur-slow) var(--ease-quart) forwards;font-size:clamp(48px,4.5vw,72px);line-height:1.2;transform:translateY(30px)}@keyframes pp-hero-in{to{opacity:1;transform:translateY(0)}}.pp-cards-row{justify-content:center;gap:var(--space-7);flex:1;align-items:center;display:flex}.pp-card{background:var(--surface-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-card);width:340px;height:340px;box-shadow:var(--card-shadow,none);justify-content:center;align-items:center;gap:var(--space-5);opacity:0;flex-direction:column;display:flex;transform:translateY(40px)scale(.92)}.pp-card--0{animation:pp-card-in var(--dur-slow) var(--ease-overshoot) forwards;animation-delay:.2s}.pp-card--1{animation:pp-card-in var(--dur-slow) var(--ease-overshoot) forwards;animation-delay:.4s}.pp-card--2{animation:pp-card-in var(--dur-slow) var(--ease-overshoot) forwards;animation-delay:.6s}@keyframes pp-card-in{0%{opacity:0;transform:translateY(40px)scale(.92)}60%{opacity:1;transform:translateY(-6px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}.pp-card-icon{font-size:64px;line-height:1}.pp-card-label{font-family:var(--font-display-cn);color:var(--text);letter-spacing:var(--track-tight);font-size:clamp(24px,2vw,32px);font-weight:700}.pp-stage{padding:var(--stage-pad-y) var(--stage-pad-x);align-items:center;display:flex;position:absolute;inset:0}.pp-stage-card{background:var(--surface-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-card);width:100%;max-width:1400px;box-shadow:var(--card-shadow,none);opacity:0;animation:pp-stage-in var(--dur-slow) var(--ease-quart) forwards;align-items:stretch;margin:0 auto;animation-delay:.1s;display:flex;overflow:hidden;transform:translate(-60px)}@keyframes pp-stage-in{to{opacity:1;transform:translate(0)}}.pp-stage-left{padding:var(--space-7) var(--space-9);justify-content:center;align-items:center;min-width:280px;display:flex}.pp-stage-num{font-size:clamp(100px,12vw,180px)}.pp-stage-right{padding:var(--space-7) var(--space-9);justify-content:center;gap:var(--space-4);flex-direction:column;flex:1;display:flex}.pp-stage-kicker{margin:0}.pp-stage-duration{font-family:var(--font-display-en);color:var(--text);letter-spacing:var(--track-tight);font-size:clamp(40px,4vw,64px);font-style:italic;font-weight:400;line-height:1}.pp-stage-data{gap:var(--space-3);margin-top:var(--space-3);flex-direction:column;display:flex}.pp-stage-stat{align-items:center;gap:var(--space-3);display:flex}.pp-stage-dot{flex-shrink:0}.pp-stage-stat-text{font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-2);font-size:16px}.pp-stage-focus{align-items:center;gap:var(--space-2);margin-top:var(--space-4);background:var(--accent-soft);border-radius:var(--r-pill);font-family:var(--font-mono);letter-spacing:.04em;color:var(--accent);width:fit-content;padding:6px 16px;font-size:14px;display:inline-flex}.pp-progress-wrap{padding:var(--stage-pad-y) var(--stage-pad-x);display:flex;position:absolute;inset:0}.pp-progress-track{width:60px;margin-right:var(--space-9);flex-direction:column;align-items:center;display:flex;position:relative}.pp-progress-bar-bg{background:var(--rule);border-radius:2px;flex:1;width:4px;position:relative;overflow:hidden}.pp-progress-bar-fill{background:var(--accent);width:100%;animation:pp-fill-grow 2s var(--ease-quart) forwards;border-radius:2px;position:absolute;bottom:0;left:0}@keyframes pp-fill-grow{0%{height:0}to{height:100%}}.pp-progress-markers{flex-direction:column;justify-content:space-between;padding:0;display:flex;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.pp-marker{align-items:center;gap:var(--space-3);display:flex}.pp-marker-dot{border:var(--bw-2) solid var(--accent);background:var(--surface);border-radius:50%;flex-shrink:0;width:14px;height:14px}.pp-marker-dot.filled{background:var(--accent)}.pp-marker-label{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-mute);white-space:nowrap;font-size:13px}.pp-progress-right{justify-content:center;gap:var(--space-7);flex-direction:column;flex:1;display:flex}.pp-gauge-wrap{align-items:center;gap:var(--space-7);display:flex}.pp-gauge{flex-shrink:0;width:260px;height:260px;position:relative}.pp-gauge-ring{border:4px solid var(--rule);border-radius:50%;width:100%;height:100%;position:relative}.pp-gauge-ring:after{content:"";border:4px solid #0000;border-top-color:var(--accent);border-right-color:var(--accent);animation:pp-gauge-spin 2.5s var(--ease-quart) forwards;border-radius:50%;position:absolute;inset:4px}@keyframes pp-gauge-spin{0%{transform:rotate(-180deg)}to{transform:rotate(90deg)}}.pp-gauge-value{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pp-gauge-number{font-family:var(--font-display-en);color:var(--text);font-size:clamp(48px,5vw,72px);font-style:italic;font-weight:400;line-height:1}.pp-gauge-unit{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);margin-top:var(--space-2)}.pp-gauge-steps{gap:var(--space-4);flex-direction:column;display:flex}.pp-gauge-step{align-items:center;gap:var(--space-3);opacity:0;display:flex;transform:translate(20px)}.pp-gauge-step--0{animation:pp-step-in var(--dur-base) var(--ease-quart) forwards;animation-delay:.3s}.pp-gauge-step--1{animation:pp-step-in var(--dur-base) var(--ease-quart) forwards;animation-delay:.7s}.pp-gauge-step--2{animation:pp-step-in var(--dur-base) var(--ease-quart) forwards;animation-delay:1.1s}@keyframes pp-step-in{to{opacity:1;transform:translate(0)}}.pp-gauge-step-num{font-family:var(--font-display-en);color:var(--text);text-align:right;min-width:48px;font-size:28px;font-style:italic}.pp-gauge-step-label{font-family:var(--font-mono);color:var(--text-mute);letter-spacing:.02em;font-size:14px}.pp-daily-kicker{text-align:center;margin-top:var(--space-5)}.cl-blocks{justify-content:center;gap:var(--space-5);max-width:900px;padding:var(--space-7) 0;flex-direction:column;margin:0 auto;display:flex}.cl-block{padding:var(--space-5) var(--space-7);background:var(--surface-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-card);box-shadow:var(--card-shadow,none);opacity:0;justify-content:space-between;align-items:center;display:flex;transform:translateY(30px)}.cl-block--0{animation:cl-block-in var(--dur-slow) var(--ease-quart) forwards;animation-delay:.1s}.cl-block--1{animation:cl-block-in var(--dur-slow) var(--ease-quart) forwards;animation-delay:.35s}.cl-block--2{animation:cl-block-in var(--dur-slow) var(--ease-quart) forwards;animation-delay:.6s}@keyframes cl-block-in{to{opacity:1;transform:translateY(0)}}.cl-block-main{font-size:clamp(28px,3vw,44px)}.cl-block-note{letter-spacing:.06em;font-size:14px}.cl-final{justify-content:center;align-items:center;gap:var(--space-7);flex-direction:column;display:flex;position:absolute;inset:0}.cl-hero{text-align:center;line-height:1.2}.cl-hero-normal{color:var(--text)}.cl-hero-accent{color:var(--accent)}.cl-keyboard{padding:var(--space-4) var(--space-5);opacity:0;animation:cl-kb-in var(--dur-slow) var(--ease-quart) forwards;flex-direction:column;gap:6px;animation-delay:.4s;display:flex}@keyframes cl-kb-in{to{opacity:1}}.cl-kb-row{justify-content:center;gap:6px;display:flex}.cl-key{background:var(--surface-3);border:var(--bw-1) solid var(--rule);border-radius:var(--r-xs);width:44px;height:44px;font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-mute);justify-content:center;align-items:center;font-size:12px;display:flex}.cl-key--accent{background:var(--accent);border-color:var(--accent);color:var(--surface)}.cl-key--space{width:180px}.cl-final-kicker{margin-top:var(--space-5);opacity:0;animation:cl-kicker-in var(--dur-base) var(--ease-quart) forwards;animation-delay:.8s}@keyframes cl-kicker-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.cl-rule{border-top:var(--bw-2) solid var(--accent);width:80px;margin:0 auto var(--space-5);opacity:0;animation:cl-rule-in var(--dur-base) var(--ease-quart) forwards;animation-delay:.6s}@keyframes cl-rule-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}