:root{--paper:#f7f2e4;--ink:#26382d;--muted:#687064;--gold:#b68232;--line:#d7d4c4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b68232;outline-offset:6px}.wrap{width:min(1280px,calc(100% - 96px));margin:auto}header{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:32px}.logo{display:flex;align-items:center;gap:13px;font-size:22px;font-weight:800;letter-spacing:.08em;line-height:1.05}.comics{display:block;font-size:11px;letter-spacing:.34em;margin-top:6px}.seal{display:grid;place-items:center;width:43px;height:48px;border:1.5px solid var(--gold);color:var(--gold);font-family:serif;font-size:30px;transform:rotate(-5deg)}nav{display:flex;gap:28px;font-size:13px}nav a:hover,.quiet:hover{text-decoration:underline;text-underline-offset:6px}.small-button{font-size:12px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ink);padding:10px 0}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:690px;padding-top:45px;padding-bottom:50px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em}.line{display:inline-block;width:30px;height:1px;background:var(--gold);vertical-align:middle;margin-right:13px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em;line-height:1.05;margin:28px 0}h1{font-size:clamp(45px,5.1vw,78px)}h2{font-size:clamp(38px,4vw,62px)}em{color:var(--gold);font-weight:400}.intro{font-size:17px;line-height:1.8;color:var(--muted);max-width:470px}.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:30px}.button{background:var(--ink);color:var(--paper);padding:17px 24px;display:inline-flex;gap:40px;align-items:center;font-size:13px;transition:transform .2s,background .2s}.button:hover{background:#405341;transform:translateY(-3px)}.quiet{font-size:12px}.byline{font-size:9px;letter-spacing:.15em;margin-top:48px}.byline span{margin:0 10px;color:var(--gold)}.hero-art{position:relative;isolation:isolate;padding:10px 0 20px}.hero-art img{position:relative;width:108%;height:auto;margin-left:-4%;display:block}.sun{position:absolute;width:83%;aspect-ratio:1;background:#e4d8b5;border-radius:50%;top:5%;right:2%;z-index:-1;background-image:repeating-radial-gradient(circle,transparent 0 18px,#d3c39866 19px 20px)}.floating-glyph{position:absolute;right:0;top:-20px;font-family:serif;font-size:130px;color:#b6823233;z-index:-1}.caption-tag{position:absolute;top:15%;left:-12px;background:var(--paper);border:1px solid var(--line);padding:9px 15px;font-size:10px;transform:rotate(-6deg);z-index:2}.art-label{display:block;text-align:center;font-size:8px;letter-spacing:.2em}.ribbon{border-block:1px solid var(--line);display:flex;justify-content:space-around;gap:40px;overflow:hidden;padding:20px 30px;white-space:nowrap;font-size:12px;letter-spacing:.2em}.ribbon i{color:var(--gold);font-size:21px;line-height:1}.section{padding-top:105px;padding-bottom:100px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:40px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:300px;color:var(--muted);font-size:14px}.comic{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.panel{position:relative;display:flex;flex-direction:column;align-items:start;text-align:left;border:1px solid var(--line);background:#f0eddf;padding:25px 30px 34px;cursor:pointer;min-height:390px;transition:background .2s,transform .2s}.panel:hover{transform:translateY(-5px)}.panel.active{background:#e2e8da;border-color:#718267}.panel-number{font-size:9px;letter-spacing:.14em}.character{font-family:serif;font-size:112px;align-self:center;line-height:1.4;margin-top:10px}.pinyin{align-self:center;font-family:Georgia,serif;font-style:italic;color:var(--gold);margin-bottom:24px}.panel strong{font:26px Georgia,serif}.panel-text{font-size:13px;color:var(--muted);margin-top:10px;max-width:240px}.panel-arrow{position:absolute;right:25px;top:22px}.demo-result{font-size:14px;margin:26px 0 6px}.note{font-size:10px;color:var(--muted)}.inside{background:#e9ecdf;padding:95px 0}.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.phone-stage{position:relative;text-align:center}.phone-stage img{position:relative;width:min(300px,80%);height:auto;filter:drop-shadow(18px 26px 22px #27372b25);transform:rotate(-5deg)}.stage-word{font-size:360px;position:absolute;color:#d1d7c5;font-family:serif;left:-10px;top:-80px}.screenshot-label{display:block;font-size:8px;letter-spacing:.2em;margin-top:40px}.feature{display:flex;gap:24px;padding:21px 0;border-top:1px solid #cdd3c1}.feature>span{color:var(--gold);font:14px Georgia,serif;padding-top:6px}.feature h3{margin:0;font:22px Georgia,serif}.feature p{color:var(--muted);font-size:13px;margin:9px 0 0;max-width:360px}.download{text-align:center}.download p{color:var(--muted);font-size:14px}.download .eyebrow{font-size:10px}.download .actions{justify-content:center}.secondary{background:none;border:1px solid var(--ink);color:var(--ink)}.secondary:hover{color:var(--paper)}.faq{padding-bottom:100px;display:grid;grid-template-columns:1fr 1.4fr;column-gap:80px}.faq h2{font-size:32px;grid-row:1/4;margin:0}.faq details{border-top:1px solid var(--line);padding:20px 0;font-size:14px}.faq summary{cursor:pointer;font-weight:600}.faq details p{color:var(--muted);font-size:13px}footer{border-top:1px solid var(--line);padding-top:35px;padding-bottom:35px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px}footer .logo{font-size:13px;display:block}.footer-by{display:block;font-size:8px;margin-top:8px;color:var(--gold)}footer nav{font-size:10px;gap:20px}footer p{font-size:9px;color:var(--muted)}.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:white;padding:10px;z-index:10}.skip:focus{top:10px}@media(max-width:900px){.wrap{width:calc(100% - 48px)}header{height:90px}header nav{display:none}.hero{min-height:580px;gap:10px}h1{font-size:48px}.intro{font-size:14px}.hero-art img{width:115%;margin-left:-7%}.caption-tag{font-size:8px;left:0}.inside-grid{gap:45px}.panel{padding:20px;min-height:360px}.character{font-size:90px}.section{padding-block:70px}.faq{column-gap:35px}.stage-word{font-size:270px}}@media(max-width:600px){.wrap{width:calc(100% - 40px)}header{height:82px;gap:12px}.logo{font-size:18px}.seal{width:34px;height:38px;font-size:25px}.small-button{font-size:9px}.hero{display:flex;flex-direction:column;padding-top:40px;padding-bottom:35px;gap:20px}.hero-copy{width:100%}h1{font-size:53px;line-height:1.02;margin:25px 0}.intro{font-size:14px;max-width:100%}.actions{gap:20px;margin-top:23px}.button{padding:16px 19px;gap:27px}.quiet{font-size:11px}.byline{margin-top:28px}.hero-art{width:100%;max-width:420px;padding-top:0}.hero-art img{width:100%;margin:0}.floating-glyph{font-size:100px;top:0}.caption-tag{left:2%;top:15%}.ribbon{justify-content:start;font-size:10px;gap:28px;padding:16px 20px}.section{padding-block:58px}.section-heading{display:block;margin-bottom:25px}.section-heading>p{max-width:100%;font-size:13px;margin-top:20px}h2{font-size:42px}.comic{grid-template-columns:1fr;gap:12px}.panel{min-height:0;display:grid;grid-template-columns:90px 1fr;column-gap:20px;padding:23px}.panel-number{grid-column:1/3;margin-bottom:15px}.character{font-size:76px;grid-row:2/5;margin:0;text-align:center}.pinyin{grid-column:2;align-self:start;margin:0 0 6px}.panel strong{grid-column:2;font-size:24px}.panel-text{grid-column:2;font-size:12px}.panel-arrow{top:20px}.inside{padding-block:55px}.inside-grid{display:flex;flex-direction:column-reverse;gap:50px}.inside-copy h2{font-size:45px}.phone-stage{width:100%}.phone-stage img{width:240px}.stage-word{left:10px}.download h2{font-size:44px}.download .actions{gap:12px}.download .button{gap:25px}.faq{display:block;padding-bottom:55px}.faq h2{margin-bottom:26px}footer{gap:22px}footer nav{flex-wrap:wrap;gap:12px 20px}footer p{margin:0}.demo-result{min-height:44px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.arr{display:inline-block;width:10px;height:10px;border-top:1px solid currentColor;border-right:1px solid currentColor;position:relative;margin-left:5px}.arr:after{content:"";position:absolute;top:4px;right:-2px;width:13px;border-top:1px solid currentColor;transform:rotate(-45deg)}.arr.down{transform:rotate(135deg);width:7px;height:7px}.arr.down:after{width:10px;top:3px}