:root {
  color-scheme:light dark;
  --page:#faf8f2; --surface:#fffdf8; --ink:#453b32; --muted:#706559;
  --line:#dcd7ca; --mint:#dce8df; --honey:#efbc63; --focus:#36664f;
  --soft:#f1e6cc; --gutter:clamp(20px,4vw,80px); --ease:cubic-bezier(.22,1,.36,1);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-underline-offset:5px; }
button:disabled { cursor:default; opacity:.55; }
img,video { max-width:100%; }
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
[hidden] { display:none!important; }
.shell { width:calc(100% - var(--gutter) * 2); max-width:1680px; margin-inline:auto; }
h1,h2,h3,p,figure { margin:0; }
h2 { font-size:clamp(32px,3.5vw,54px); line-height:1.3; letter-spacing:-.035em; font-weight:650; }
h3 { font-size:clamp(24px,2.1vw,32px); line-height:1.35; letter-spacing:-.02em; font-weight:600; }
em { font-style:normal; color:var(--focus); }
p { line-height:1.8; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; z-index:20; top:8px; left:8px; background:var(--surface); padding:12px; }
.nav { height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; text-decoration:none; }
.brand img { object-fit:contain; }
.brand-copy { display:grid; gap:3px; }
.brand-copy strong { font-size:17px; font-weight:650; }
.brand-copy small { font-size:9px; letter-spacing:.17em; color:var(--muted); }
.nav-actions,.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:14px; text-decoration:none; padding-block:14px; }
.nav-star { display:flex; align-items:center; gap:6px; font-size:13px; text-decoration:none; min-height:44px; }
.nav-star>span:first-child { font-size:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:14px 24px; border:0; border-radius:12px; font-size:15px; font-weight:600; line-height:1.5; text-decoration:none; transition:transform .2s var(--ease),background-color .2s; }
.button-primary { background:var(--honey); color:#443322; }
.button-download { background:var(--mint); color:var(--focus); white-space:nowrap; }
.download-arrow { font-size:1.2em; line-height:1; }
.button-small { min-height:44px; padding:10px 17px; font-size:13px; border-radius:10px; }
.button:active { transform:translateY(2px); }
.icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.text-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:14px; text-decoration-thickness:1px; }
.hero { display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.5fr); gap:2%; align-items:center; min-height:min(720px,calc(100svh - 80px)); padding-block:54px 86px; }
.hero-copy { min-width:0; position:relative; z-index:1; }
h1 { font-size:clamp(18px,1.7vw,26px); font-weight:650; margin-bottom:22px; }
.hero-lede { font-size:clamp(40px,4.2vw,68px); letter-spacing:-.045em; line-height:1.24; font-weight:680; }
.hero-lede span { color:var(--focus); }
.hero-description { color:var(--muted); font-size:16px; margin-top:26px; max-width:24em; text-wrap:pretty; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:32px; }
.hero-study { min-width:0; position:relative; }
.greeting-line { display:flex; flex-direction:column; justify-content:center; gap:8px; height:128px; padding:0 24px; text-align:center; font-size:clamp(22px,2.4vw,38px); letter-spacing:-.035em; font-weight:500; color:var(--focus); }
.greeting-chinese { display:flex; align-items:center; justify-content:center; min-height:1.3em; line-height:1.3; }
.greeting-english { min-height:2.8em; font-size:clamp(17px,1.6vw,24px); line-height:1.4; letter-spacing:-.015em; font-weight:400; color:var(--muted); text-wrap:balance; }
.greeting-line.is-static { height:auto; min-height:128px; padding-block:12px; }
.greeting-line.is-static .typing-cursor { display:none; }
#hero-greeting { min-width:0; text-wrap:balance; }
.typing-cursor { height:1em; width:2px; margin-left:6px; background:currentColor; flex-shrink:0; }
.keyboard-scene { position:relative; width:100%; aspect-ratio:1.85; }
.keyboard-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.is-ready>.keyboard-canvas { opacity:1; }
.is-ready>.flat-board { visibility:hidden; }
.motion-toggle { display:block; width:44px; height:44px; border:0; border-radius:50%; color:var(--focus); background:var(--mint); margin:8px auto 0; }
.motion-toggle span { display:block; width:10px; height:12px; border-inline:3px solid currentColor; margin:auto; }
.motion-toggle[data-paused="true"] span { width:0; height:0; border:6px solid transparent; border-left:9px solid currentColor; margin-left:14px; }
.flat-board { position:absolute; inset:10% 3%; display:flex; flex-direction:column; gap:3%; padding:2%; border-radius:12px; background:var(--skin-edge,#dadcd2); box-shadow:0 6px 0 var(--skin-edge,#b7bdac),0 22px 30px -18px rgb(69 59 50 / 26%); }
.flat-row { display:flex; flex:1; justify-content:center; gap:1%; min-height:0; }
.flat-row:nth-child(2) { padding-inline:4.8%; }
.flat-key { flex:1; min-width:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:6px; background:var(--skin-key,#fffdf8); color:var(--skin-ink,#453b32); box-shadow:0 3px 0 rgb(69 59 50 / 18%); }
.flat-key b { font-size:clamp(10px,1.5vw,22px); font-weight:500; position:relative; z-index:1; }
.flat-key[data-key="LANG"] { flex:1.55; }
.flat-key[data-key="LANG"] b { font-size:clamp(7px,1vw,13px); }
.flat-key[data-key="SPACE"] { flex:4.35; }
.flat-key[data-key="SHIFT"],.flat-key[data-key="BACKSPACE"] { flex:1.35; }
.flat-key[data-key="SHIFT"],.flat-key[data-key="BACKSPACE"],.flat-key[data-key="LANG"] { background:var(--skin-accent,#c2d9ca); }
.flat-key[data-key="ENTER"] { flex:1.8; background:var(--skin-enter,#efbc63); }
.flat-key.pressed { transform:translateY(3px); box-shadow:none; }
.key-decal { display:none; position:absolute; width:100%; height:100%; background-image:var(--key-art); background-size:200% 200%; }
[data-art="true"] .key-decal { display:block; }
.decal-0 { background-position:0 0; }.decal-1 { background-position:100% 0; }.decal-2 { background-position:0 100%; }.decal-3 { background-position:100% 100%; }
.flat-key[data-key="SPACE"] .key-decal { width:auto; aspect-ratio:1.3; }
.static-studio { position:relative; aspect-ratio:2; margin-block:30px; background:var(--mint); border-radius:24px; }
.feature-scene { padding-block:90px 112px; background:var(--mint); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:68px; }
.section-heading>p { color:var(--muted); font-size:16px; padding-bottom:6px; }
.experience-story { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.8fr); align-items:start; gap:clamp(44px,8vw,130px); }
.story-heading { margin-bottom:26px; }
.step-number { display:block; font-size:12px; letter-spacing:.12em; color:var(--focus); margin-bottom:15px; font-variant-numeric:tabular-nums; }
.story-heading p,.story-save p { color:var(--muted); font-size:15px; margin-top:12px; }
.story-input { padding-top:28px; position:sticky; top:40px; }
.story-learning { display:grid; gap:68px; }
.story-save { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,1.15fr); gap:24px; align-items:start; padding:0 0 34px; border-bottom:1px solid #b8cabe; }
.story-save .text-link { color:var(--focus); margin-top:14px; }
.story-review { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,1.15fr); gap:24px; align-items:start; }
.story-review .story-heading { padding-top:26px; }
.live-demo { min-width:0; position:relative; }
.recording-frame video { display:block; width:100%; height:auto; aspect-ratio:8/7; object-fit:contain; background:var(--surface); border-radius:18px; box-shadow:0 18px 40px -24px rgb(35 62 47 / 25%); }
.live-demo-cards video { aspect-ratio:390/868; }
.video-toggle { position:absolute; bottom:0; right:0; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--surface); }
.video-toggle[data-error="true"] { width:auto; padding-inline:14px; border-radius:12px; font-size:12px; }
.live-demo figcaption { min-height:44px; padding-right:50px; display:flex; align-items:center; font-size:11px; color:var(--muted); margin-top:12px; }
.preview-tag { font-size:11px; display:inline-block; background:var(--surface); color:var(--focus); border-radius:5px; padding:4px 8px; }
.showcase { padding-block:100px 70px; }
.anchor-alias { scroll-margin-top:32px; }
.privacy-scene { padding-block:30px 100px; }
.privacy-band { display:grid; grid-template-columns:1fr 1.7fr; gap:10%; padding-top:54px; border-top:1px solid var(--line); }
.privacy-band h3 { font-size:clamp(28px,3vw,42px); }
.privacy-band .text-link { margin-top:18px; color:var(--focus); }
.privacy-band ul { display:grid; gap:24px; list-style:none; margin:0; padding:0; }
.privacy-band li { display:grid; grid-template-columns:160px 1fr; gap:16px; }
.privacy-band strong { font-size:14px; font-weight:550; }
.privacy-band li span { color:var(--muted); font-size:13px; line-height:1.7; }
.community-scene { background:var(--focus); color:#fffdf8; padding-block:64px; }
.community-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.community-copy h2 { font-size:clamp(30px,3.4vw,46px); }
.community-copy p { margin-top:18px; font-size:15px; }
.community-action { text-align:center; flex-shrink:0; }
.button-star { background:var(--honey); color:#443322; min-height:60px; padding-inline:30px; }
.button-star>span:first-child { font-size:25px; }
#star-help { margin-top:14px; font-size:11px; }
.download-section { padding-block:90px 65px; }
.download-inner { text-align:center; }
.download-logo { object-fit:contain; margin-bottom:22px; }
.download-inner p { color:var(--muted); font-size:15px; margin-top:16px; }
.download-inner .button { margin-top:28px; }
.download-inner .download-note { font-size:12px; margin-top:18px; }
.install-panel { max-width:860px; margin:46px auto 0; }
.install-guide { border-block:1px solid var(--line); }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.install-guide summary { display:flex; justify-content:space-between; align-items:center; min-height:60px; font-size:14px; }
.install-guide[open] summary>span { transform:rotate(45deg); }
.release-facts { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-block:8px 22px; }
.release-facts div { display:grid; gap:6px; }
.release-facts dt { color:var(--muted); font-size:12px; }.release-facts dd { margin:0; font-size:14px; }
.install-guide ol { padding-left:22px; font-size:13px; color:var(--muted); line-height:1.9; }
.install-guide>p { padding-bottom:24px; color:var(--muted); font-size:12px; }
.checksum-link { color:var(--focus); font-size:12px; }
.site-footer { border-top:1px solid var(--line); padding-block:28px 22px; }
.footer-inner { display:flex; gap:30px; align-items:center; flex-wrap:wrap; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; font-size:12px; }
.footer-inner>.footer-links { margin-left:auto; }
.footer-links a { padding-block:12px; text-decoration:none; }
.legal-details { width:100%; color:var(--muted); font-size:12px; }
.legal-details summary { min-height:36px; display:flex; align-items:center; }
.legal-details p { margin-top:10px; }
.concept-disclosure { color:var(--muted); font-size:11px; line-height:1.7; margin-top:12px; }
@media(hover:hover) {
 .button:hover { transform:translateY(-2px); }
 .nav-links a:hover,.text-link:hover,.footer-links a:hover { color:var(--focus); }
 .video-toggle:hover,.motion-toggle:hover { background:var(--mint); }
}
@media(prefers-color-scheme:dark) {
 :root { --page:#242821; --surface:#2b3028; --ink:#f1eddf; --muted:#bfc4b5; --line:#495044; --mint:#354b3e; --honey:#efbc63; --focus:#a0c7ac; --soft:#514a37; }
 .hero-study { --skin-key:#f7f2e5; --skin-ink:#453b32; }
 .community-scene { background:#354b3e; }
 .story-save { border-color:var(--line); }
 .flat-board { --skin-edge:#697360; }
}
@media(max-width:1100px) {
 .nav-actions,.nav-links { gap:20px; }
 .hero { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); padding-block:56px 70px; min-height:610px; }
 .hero-lede { font-size:44px; }.hero-actions { gap:12px 18px; }.hero-actions .button { padding-inline:18px; font-size:14px; }
 .experience-story { gap:6%; grid-template-columns:1.1fr 1fr; }
 .story-review,.story-save { grid-template-columns:1fr; gap:4px; }.live-demo-cards { width:78%; }
 .story-review .story-heading { padding-top:0; }.story-learning { gap:32px; }
 .privacy-band { gap:6%; }.privacy-band li { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:760px) {
 :root { --gutter:22px; }
 .nav { height:72px; gap:12px; }.brand-copy strong { font-size:15px; }.brand-copy small { font-size:8px; }.brand { gap:8px; }
 .nav .brand img { width:34px; height:34px; }.nav-links { display:none; }.nav-actions { gap:14px; }.nav-star-word { display:none; }.nav-star { font-size:12px; }.nav-actions .button { min-height:40px; padding:8px 12px; font-size:12px; }
 .hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-block:34px 50px; gap:0; }
 h1 { font-size:18px; margin-bottom:16px; }.hero-lede { font-size:clamp(39px,8.8vw,58px); line-height:1.22; }
 .hero-description { margin-top:20px; font-size:14px; max-width:none; }.hero-actions { margin-top:22px; gap:18px; }.hero-actions .button { min-height:50px; padding-inline:20px; font-size:14px; }
 .hero-study { margin:26px -10px 0; width:calc(100% + 20px); }.greeting-line { height:104px; font-size:22px; padding-inline:16px; }.keyboard-scene { aspect-ratio:1.65; }
 .motion-toggle { width:40px; height:40px; margin-top:4px; }.flat-key b { font-size:13px; }.flat-key[data-key="LANG"] b { font-size:8px; }
 .feature-scene { padding-block:56px 62px; }.section-heading { display:block; margin-bottom:36px; }.section-heading>p { margin-top:16px; font-size:14px; }
 .experience-story { display:block; }.story-input { padding-top:0; position:static; }.story-heading { margin-bottom:20px; }.story-heading p,.story-save p { font-size:14px; }
 .story-learning { margin-top:40px; gap:36px; }.story-save { padding-bottom:26px; }.story-review,.story-save { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:14px; }.story-review h3,.story-save h3 { font-size:25px; }.story-review .story-heading,.story-save .story-heading { margin-bottom:0; }.live-demo-cards { width:100%; }.story-review p,.story-save p { font-size:13px; }
 .step-number { margin-bottom:10px; }.recording-frame { border-radius:14px; }.video-toggle { bottom:8px; right:8px; }
 .showcase { padding-block:60px 26px; }.privacy-scene { padding-block:26px 58px; }.privacy-band { display:block; padding-top:36px; }.privacy-band ul { margin-top:30px; gap:20px; }
 .privacy-band li { gap:6px; }.privacy-band h3 br { display:none; }
 .community-scene { padding-block:48px; }.community-inner { display:block; }.community-action { margin-top:28px; text-align:left; }.community-copy p { font-size:14px; }
 .download-section { padding-block:54px 44px; }.download-inner h2 { font-size:29px; }.download-logo { width:70px; height:70px; margin-bottom:18px; }.release-facts { flex-direction:column; gap:18px; }.release-facts div { grid-template-columns:82px 1fr; align-items:baseline; }
 .footer-inner { gap:20px; }.footer-inner>.footer-links { width:100%; margin-left:0; }.footer-links { gap:10px 20px; }
}
@media(max-width:370px) {
 :root { --gutter:18px; }.nav-actions { gap:9px; }.nav-star { gap:3px; }.nav .brand img { width:30px; height:30px; }.brand-copy small { display:none; }
 .hero-lede { font-size:39px; }.hero-actions { gap:16px; }.hero-actions .button { padding-inline:16px; }.text-link { font-size:13px; }
 .story-review,.story-save { grid-template-columns:1fr; }.live-demo-cards { width:80%; margin-inline:auto; }.story-review .story-heading,.story-save .story-heading { margin-bottom:18px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }
}