:root{--bg:#fff;--tint:#f5f5f7;--label:#000;--secondary:#3c3c43bd;--faint:#3c3c4333;--separator:#3c3c4333;--blue:#007aff;--blue-text:#0066d6;--fill:#78788024;--glass:#ffffffc2;--glass-edge:#0000001a;--frame:#1b1b1d;--frame-edge:#00000080;--frame-shadow:0 50px 90px -40px #0000006b, 0 14px 30px -18px #00000047;--metal:linear-gradient(180deg, #d9dade 0%, #b9bbc1 55%, #8f9299 100%);--screen:#fff;--glow:.1;--silver:linear-gradient(180deg, #a7abb3 0%, #6f747d 46%, #54585f 54%, #8d9199 100%);--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Inter Variable", "Noto Sans SC Variable", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;--brand:"Source Serif 4 Variable", "Sufler Brand SC", "Songti SC", "Noto Serif CJK SC", serif;--ease:cubic-bezier(.22, .61, .36, 1);--spring:cubic-bezier(.2, .9, .2, 1);--gutter:max(24px, (100vw - 1200px) / 2);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#000;--tint:#0d0d0f;--label:#fff;--secondary:#ebebf59e;--faint:#ebebf52b;--separator:#5454589e;--blue:#0a84ff;--blue-text:#409cff;--fill:#7878803d;--glass:#121214b8;--glass-edge:#ffffff24;--frame:#1f1f22;--frame-edge:#ffffff2b;--frame-shadow:0 60px 120px -50px #000000e6;--metal:linear-gradient(180deg, #55575d 0%, #3a3b40 55%, #232427 100%);--screen:#000;--glow:.3;--silver:linear-gradient(180deg, #fff 0%, #d2d5db 40%, #8e929a 56%, #c9ccd2 100%)}}@font-face{font-family:Sufler Brand SC;src:url(/assets/brand-zh-GVul-xs_.woff2)format("woff2");font-weight:500 700;font-style:normal;font-display:swap}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}body{background:var(--bg);color:var(--label);font:400 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow-x:clip}h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0;padding:0}ul,ol{list-style:none}a{color:var(--blue-text);text-decoration:none}a:hover{text-underline-offset:.2em;text-decoration:underline}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}.skip{z-index:30;background:var(--label);color:var(--bg);border-radius:12px;padding:10px 14px;position:absolute;top:-60px;left:12px}.skip:focus{top:12px}.narrow{display:none}.nav{z-index:20;border-bottom:1px solid #0000;transition:background-color .3s,border-color .3s;position:fixed;inset:0 0 auto}.nav.solid{background:var(--glass);-webkit-backdrop-filter:blur(24px)saturate(1.6);backdrop-filter:blur(24px)saturate(1.6);border-bottom-color:var(--glass-edge)}.nav-in{margin:0 var(--gutter);align-items:center;gap:28px;height:52px;display:flex}.brand-name{color:var(--label);align-items:baseline;gap:5px;margin-right:auto;display:inline-flex}.brand-name:hover{text-decoration:none}.brand-word{font:600 22px/1 var(--brand);letter-spacing:.02em}.brand-pro{font:700 12.5px/1 var(--font);letter-spacing:.02em;background:var(--silver);color:#0000;-webkit-background-clip:text;background-clip:text}.nav-links{gap:26px;display:flex}.nav-links a{color:var(--secondary);font-size:14px;transition:color .2s}.nav-links a:hover{color:var(--label);text-decoration:none}.button{background:var(--blue);color:#fff;min-height:50px;transition:transform .25s var(--spring), filter .2s;border-radius:999px;justify-content:center;align-items:center;padding:0 26px;font-size:17px;font-weight:600;display:inline-flex}.button:hover{filter:brightness(1.08);text-decoration:none}.button:active{transform:scale(.96)}.button.small{background:var(--fill);min-height:32px;color:var(--label);padding:0 15px;font-size:14px}.more{font-size:17px;font-weight:500}.more:after{content:" ↓"}.note-ref{vertical-align:super;padding:0 .15em;font-size:.62em;line-height:0}h1,h2{letter-spacing:-.012em;text-wrap:balance;font-weight:700}h1{font-size:clamp(46px,7.4vw,108px);line-height:1.06}h2{font-size:clamp(38px,5.6vw,80px);line-height:1.1}.lead{color:var(--secondary);text-wrap:pretty;font-size:clamp(19px,1.75vw,25px);font-weight:500;line-height:1.45}.lead strong{color:var(--label);font-weight:600}.words.centre{text-align:center;width:min(860px,100% - 48px);margin:0 auto}.words.centre .lead{max-width:660px;margin:22px auto 0}.lines>span{margin-bottom:-.08em;padding-bottom:.08em;display:block;overflow:hidden}.lines>span>i{font-style:normal;display:block}.js .lines>span>i{transition:transform 1s var(--spring);transform:translateY(108%)}.js .lines>span:nth-child(2)>i{transition-delay:90ms}.js .lines.seen>span>i{transform:none}.js .rise{opacity:0;transition:opacity .9s var(--ease), translate .9s var(--ease);translate:0 26px}.js .rise.seen{opacity:1;translate:0}.device-box{position:relative;container-type:inline-size}.device{margin:0 var(--side,0px);padding:var(--bezel);border-radius:var(--radius);background:var(--frame);box-shadow:0 0 0 1px var(--frame-edge), var(--frame-shadow);transition:padding .7s var(--ease), border-radius .7s var(--ease), margin .7s var(--ease);position:relative}.device[data-kind=phone]{--bezel:3cqw;--radius:15.5cqw;--inner:12.6cqw;--aspect:390 / 844}.device[data-kind=tablet]{--bezel:2cqw;--radius:4.6cqw;--inner:2.7cqw;--aspect:1080 / 750}.device[data-kind=laptop]{--bezel:1.1cqw;--radius:1.9cqw 1.9cqw .3cqw .3cqw;--inner:.9cqw .9cqw 0 0;--aspect:1280 / 800;--base:1}.device[data-kind=browser]{--bezel:0px;--radius:max(1cqw, 10px);--inner:0 0 max(1cqw, 10px) max(1cqw, 10px);--aspect:1200 / 712;--bar:1}.device-screen{border-radius:var(--inner);aspect-ratio:var(--aspect);background:var(--screen);transition:aspect-ratio .7s var(--ease), border-radius .7s var(--ease);isolation:isolate;position:relative;overflow:hidden}.device-screen iframe{transform-origin:0 0;opacity:0;background:var(--screen);border:0;transition:opacity .35s;position:absolute;top:0;left:0}.device.live .device-screen iframe{opacity:1}.device-screen:before{content:"";background:linear-gradient(100deg, transparent 30%, var(--fill) 50%, transparent 70%);background-size:220% 100%;animation:1.8s linear infinite sheen;position:absolute;inset:0}.device.live .device-screen:before{opacity:0;animation:none}@keyframes sheen{0%{background-position:120% 0}to{background-position:-100% 0}}.device:after{content:"";background:var(--metal);height:1.6cqw;opacity:var(--base,0);transform:scaleX(calc(.7 + .3 * var(--base,0)));transition:opacity .5s var(--ease), transform .7s var(--ease);pointer-events:none;border-radius:0 0 1.6cqw 1.6cqw/0 0 1.3cqw 1.3cqw;position:absolute;top:100%;left:-8cqw;right:-8cqw;box-shadow:inset 0 1px #ffffff59,0 26px 40px -22px #0000008c}.device-bar{height:calc(var(--bar,0) * max(3.3cqw, 30px));opacity:var(--bar,0);background:color-mix(in srgb, var(--frame) 86%, #808088);transition:height .7s var(--ease), opacity .5s var(--ease);border-radius:max(1cqw,10px) max(1cqw,10px) 0 0;align-items:center;gap:max(1.4cqw,10px);padding:0 max(1.3cqw,12px);display:flex;overflow:hidden}.device-bar i{aspect-ratio:1;background:#ff5f57;border-radius:50%;flex:none;width:max(.9cqw,9px);margin-right:max(3.4cqw,34px);box-shadow:max(1.5cqw,15px) 0 #febc2e,max(3cqw,30px) 0 #28c840}.device-bar span{color:#ffffffc7;text-align:center;white-space:nowrap;text-overflow:ellipsis;background:#ffffff1a;border-radius:8px;flex:0 46%;margin:0 auto;padding:max(.35cqw,3px) 12px;font-size:clamp(10px,1.05cqw,13px);overflow:hidden}.device-guard{z-index:2;display:none;position:absolute;inset:0}@media (pointer:coarse){.device:not(.entered) .device-guard{display:block}}.hero{text-align:center;padding:clamp(100px,12vh,150px) 0 0;position:relative;overflow:clip}.hero h1{width:min(1100px,100% - 40px);margin:0 auto}.hero .lead{width:min(640px,100% - 48px);margin:26px auto 0}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;margin-top:34px;display:flex}.hero-glow{aspect-ratio:2;background:radial-gradient(closest-side, var(--blue), transparent 72%);width:min(1500px,130vw);opacity:var(--glow);filter:blur(30px);pointer-events:none;animation:9s ease-in-out infinite alternate breathe;position:absolute;top:44%;left:50%;translate:-50%}@keyframes breathe{0%{scale:.92}to{scale:1.08}}.family{width:min(1180px,100% - 32px);margin:clamp(40px,5vw,72px) auto 0;padding-bottom:3%;position:relative}.family .device-box{will-change:transform;margin:0 auto}[data-own=laptop] .family .device-box{width:82%}[data-own=tablet] .family .device-box{width:min(900px,100%)}[data-own=phone] .family .device-box{width:min(330px,80%)}.js .family .device-box{opacity:0;transition:opacity 1.1s var(--ease), translate 1.3s var(--spring);translate:0 70px}.js .family.seen .device-box{opacity:1;translate:0}.hint{color:var(--secondary);margin-top:40px;font-size:15px}.speed{padding:clamp(110px,16vw,220px) 0 clamp(80px,10vw,140px)}.speed-in{margin:0 var(--gutter);grid-template-columns:auto 1fr;align-items:end;gap:clamp(32px,6vw,96px);display:grid}.figure{letter-spacing:-.045em;font-variant-numeric:tabular-nums;align-items:baseline;font-size:clamp(120px,23vw,340px);font-weight:700;line-height:.82;display:flex}.figure .unit{letter-spacing:0;color:var(--secondary);margin-left:.2em;font-size:.2em;font-weight:600}.roll{align-items:flex-start;height:.86em;display:inline-flex;overflow:hidden}.roll b{font-weight:inherit;transition:transform 1.3s var(--spring) .2s;flex-direction:column;display:flex}.roll b span{height:.86em;line-height:.86em}.speed .words{padding-bottom:1.2vw}.speed .lead{max-width:520px;margin-top:22px}.trace{margin:clamp(56px, 8vw, 110px) var(--gutter) 0;border-block:1px solid var(--separator);gap:14px;padding:clamp(24px,3vw,40px) 0;display:grid}.trace-row{grid-template-columns:96px 1fr;align-items:baseline;gap:16px;display:grid}.trace-name{color:var(--secondary);font-size:14px}.trace-line{min-height:1.4em;font-size:clamp(17px,1.9vw,26px);font-weight:500;line-height:1.4;transition:opacity .4s}.trace-line span{transition:color .12s,opacity .12s}.trace-line.said span{color:var(--faint)}.trace-line.said span.on{color:var(--secondary)}.trace-line.heard span,.trace-line.meant span{opacity:0}.trace-line.heard span.on,.trace-line.meant span.on{opacity:1}.trace-line.meant{font-size:clamp(22px,2.7vw,38px);font-weight:600}.trace.out .trace-line{opacity:0}.pair-facts{margin:clamp(48px, 6vw, 84px) var(--gutter) 0;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);display:grid}.pair-facts dt{font-size:21px;font-weight:600}.pair-facts dd{color:var(--secondary);margin-top:8px}.js .pair-facts .rise:nth-child(2){transition-delay:80ms}.js .pair-facts .rise:nth-child(3){transition-delay:.16s}.languages{background:var(--tint);padding:clamp(90px,12vw,180px) 0 clamp(70px,9vw,130px)}.wall-stage{place-items:center;margin-top:clamp(40px,6vw,80px);padding:34px 0;display:grid;position:relative;overflow:hidden}.wall{flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000);mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000)}.wall-row{white-space:nowrap;will-change:transform;letter-spacing:-.01em;gap:clamp(28px,4vw,64px);width:max-content;font-size:clamp(30px,5vw,70px);font-weight:650;line-height:1.25;display:flex}.wall-row span{color:var(--faint);transition:color .5s}.wall-row span:hover{color:var(--secondary)}.wall-row span.on{color:var(--label)}.wall-stage .device-box{z-index:1;width:clamp(236px,25vw,318px)}[data-own=tablet] .wall-stage .device-box{width:min(760px,100% - 40px)}[data-own=laptop] .wall-stage .device-box{width:min(820px,62%);margin-bottom:2%}.wall-stage .device-box:before{content:"";background:radial-gradient(closest-side, var(--tint) 62%, transparent);position:absolute;inset:-6% -34%}:is([data-own=tablet],[data-own=laptop]) .wall-stage .device-box:before{inset:-8% -14%}.tongues{justify-content:center;align-items:center;gap:18px;width:min(900px,100%);margin:26px auto 0;padding:0 20px;display:flex}.tongues-name{color:var(--secondary);flex:none;font-size:15px}.tongue-list{scrollbar-width:none;gap:6px;padding:4px 0;display:flex;overflow-x:auto}.tongue-list::-webkit-scrollbar{display:none}.tongue-list button{color:var(--secondary);border-radius:10px;flex:none;padding:8px 12px;font-size:17px;font-weight:500;transition:color .2s,background-color .2s;position:relative}.tongue-list button:hover{color:var(--label)}.tongue-list button[aria-pressed=true]{color:var(--label);background:var(--fill)}.stage{position:relative}.stage-pin{height:100svh;position:sticky;top:0}.stage-device{inset:84px var(--gutter) 48px 41%;place-items:center;display:grid;position:absolute}.stage.flip .stage-device{inset:84px 41% 48px var(--gutter)}.stage-device .device-box{transition:width .7s var(--ease)}.stage-steps{pointer-events:none;margin-top:-100svh;position:relative}.step{min-height:92svh;padding:0 var(--gutter);align-items:center;display:flex}.step-head{min-height:100svh}.stage.flip .step{justify-content:flex-end}.step-in{pointer-events:auto;opacity:.22;width:min(35%,440px);transition:opacity .5s var(--ease)}.stage.flip .step-in{width:min(35%,440px)}.step.on .step-in{opacity:1}.step h2{font-size:clamp(36px,4.6vw,68px)}.step h3{font-size:clamp(34px,4.2vw,60px);font-weight:700;line-height:1.1}.step .lead,.step h3+p{margin-top:20px}.step h3+p{color:var(--secondary);font-size:clamp(19px,1.75vw,24px);font-weight:500;line-height:1.45}.switch{background:var(--fill);border-radius:999px;margin-top:30px;padding:3px;display:inline-flex}.switch button{min-width:64px;color:var(--secondary);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:500;transition:color .25s,background-color .25s,box-shadow .25s}.switch button[aria-pressed=true]{color:var(--label);background:var(--bg);box-shadow:0 1px 4px #0000002e}@media (prefers-color-scheme:dark){.switch button[aria-pressed=true]{box-shadow:none;background:#636366}}.statement{padding:clamp(110px, 15vw, 220px) var(--gutter) clamp(100px, 13vw, 200px);background:var(--tint)}.scrub{letter-spacing:-.005em;max-width:1000px;margin-top:clamp(32px,4vw,56px);font-size:clamp(25px,3.5vw,50px);font-weight:600;line-height:1.34}.scrub span{color:var(--faint);transition:color .35s}.scrub span.lit{color:var(--label)}.get{text-align:center;padding:clamp(110px,14vw,200px) 24px clamp(90px,10vw,140px)}.get .lead{margin-top:20px}.platforms{flex-wrap:wrap;justify-content:center;gap:10px 34px;max-width:760px;margin:44px auto 0;font-size:19px;font-weight:600;display:flex}.aside{color:var(--secondary);margin-top:48px;font-size:15px;line-height:1.7}.foot{padding:36px var(--gutter) 60px;border-top:1px solid var(--separator);color:var(--secondary);font-size:13px;line-height:1.6}.notes{counter-reset:note;gap:8px;max-width:900px;display:grid}.notes li{counter-increment:note;padding-left:1.6em;position:relative}.notes li:before{content:counter(note) ".";position:absolute;left:0}.notes li:target{color:var(--label)}.names{margin-top:26px}@media (width<=860px){.nav-links{display:none}.narrow{display:inline}.family{width:calc(100% - 28px)}.speed-in{grid-template-columns:1fr;gap:28px}.trace-row{grid-template-columns:1fr;gap:2px}.pair-facts{grid-template-columns:1fr}[data-own=phone] .wall-stage .device-box{width:min(64vw,280px)}.tongues{flex-direction:column;gap:6px}.tongue-list{max-width:100%}.stage-device,.stage.flip .stage-device{inset:64px 16px 40svh}.step,.stage.flip .step{justify-content:flex-start;align-items:flex-end;min-height:100svh;padding:0}.step-in,.stage.flip .step-in{background:linear-gradient(180deg, transparent, var(--bg) 26px);opacity:1;width:100%;min-height:40svh;padding:34px 22px 26px}.statement .scrub{font-size:clamp(23px,6.2vw,34px)}.step h2,.step h3{font-size:clamp(30px,8.4vw,44px)}.step .lead,.step h3+p{margin-top:12px;font-size:17px}.switch{margin-top:18px}}@media (prefers-reduced-motion:reduce){.js .lines>span>i,.js .rise,.js .family .device-box{opacity:1;transition:none;transform:translate(0,0)}.hero-glow,.device-screen:before{animation:none}.device,.device-screen,.device:after,.device-bar,.stage-device .device-box{transition:none}}
