@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,Noto Sans SC,system-ui,sans-serif;color:#20221f;background:#f7f4ed;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 70% 12%,rgba(221,244,173,.7),transparent 28rem),#f7f4ed}button{font:inherit}.app-shell{width:min(100%,480px);min-height:100svh;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom))}.brand-row{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;width:40px;height:40px;place-items:center;border-radius:13px;color:#f8f6ef;background:#242822;font-weight:700}.brand-cn,.brand-en{margin:0}.brand-cn{font-size:17px;font-weight:700;line-height:1.1}.brand-en{margin-top:3px;color:#6f746b;font-size:9px;font-weight:700;letter-spacing:.18em}.prototype-tag{margin-left:auto;padding:6px 9px;border:1px solid #d7d3c8;border-radius:999px;color:#71756d;font-size:11px}.hero{display:flex;min-height:470px;flex-direction:column;align-items:center;justify-content:center;text-align:center}.eyebrow{margin:36px 0 10px;color:#70766a;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}h1{max-width:330px;margin:0 0 34px;font-size:clamp(25px,7vw,34px);line-height:1.24;letter-spacing:-.04em}.speak-button{position:relative;display:flex;width:190px;height:190px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:50%;color:#20231f;background:#dff69b;box-shadow:0 22px 60px #48562b38,inset 0 0 0 1px #29311f14;transition:transform .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.speak-button:hover{transform:translateY(-3px)}.speak-button:active{transform:scale(.97)}.speak-button:focus-visible{outline:4px solid rgba(38,44,34,.28);outline-offset:5px}.speak-button--listening{background:#ffbd9e}.speak-button--playing{background:#c9e7ff}.speak-button__pulse{position:absolute;inset:10px;border:1px solid rgba(40,45,35,.13);border-radius:inherit}.speak-button--listening .speak-button__pulse{animation:breathe 1.2s ease-in-out infinite}.speak-button__label{font-size:20px;font-weight:700;letter-spacing:-.03em}.speak-button__hint{margin-top:7px;color:#60675b;font-size:11px}.translation-card{display:flex;width:100%;margin-top:26px;padding:14px 15px;align-items:center;gap:12px;border:1px solid rgba(40,44,38,.1);border-radius:17px;background:#ffffffa8;text-align:left}.translation-card div{display:flex;min-width:0;flex:1;flex-direction:column}.translation-card span{color:#7a7e76;font-size:11px}.translation-card strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.translation-card b{padding:7px 10px;border-radius:10px;background:#eef7d0;font-size:12px}.fallback-note{max-width:320px;margin:20px 0 0;color:#777a73;font-size:12px;line-height:1.6}.examples{padding-top:8px}.section-heading{display:flex;margin-bottom:12px;align-items:baseline;justify-content:space-between}.section-heading h2{margin:0;font-size:15px}.section-heading span{color:#858880;font-size:11px}.example-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.example-grid button{min-height:68px;padding:12px 13px;cursor:pointer;border:1px solid #dfdbd0;border-radius:15px;color:inherit;background:#ffffff9e;text-align:left;transition:border-color .15s ease,transform .15s ease,background .15s ease}.example-grid button:hover{border-color:#aeb3a6;background:#fff;transform:translateY(-1px)}.example-grid button:focus-visible{outline:3px solid rgba(70,82,53,.24);outline-offset:2px}.example-grid span{display:block;margin-bottom:5px;color:#858980;font-size:10px}.example-grid strong{font-size:14px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #dfdacf;color:#84877f;font-size:10px;line-height:1.55;text-align:center}footer p{margin:3px 0}@keyframes breathe{0%,to{transform:scale(.96);opacity:.5}50%{transform:scale(1.08);opacity:0}}@media(min-width:700px){.app-shell{width:min(100%,760px)}.hero{min-height:500px}.example-grid{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}