:root{--t1: #c62828;--t2: #2e7d32;--t3: #1565c0;--t4: #6a1b9a;--t5: #616161;--ink: #241a3d;--ink-soft: #4c4368;--paper: #fdfcff;--tint: #f3effc;--tint-2: #ecf5ef;--line: #e2dcf2;--display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--body-font);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}h1,h2,h3{font-family:var(--display-font);line-height:1.15;text-wrap:balance}a{color:var(--t3)}.section-inner{max-width:68rem;margin:0 auto;padding:0 1.5rem}.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700;color:var(--t4);margin-bottom:.4rem}.hero{position:relative;overflow:hidden;background:radial-gradient(60rem 30rem at 85% -5%,rgba(158,130,220,.18),transparent 60%),radial-gradient(50rem 28rem at 0% 100%,rgba(120,190,150,.16),transparent 60%),linear-gradient(160deg,#faf7ff,#f2ecfd 55%,#eef6f1)}.hero-streaks{position:absolute;inset:0;pointer-events:none}.streak{position:absolute;height:.45rem;width:22rem;border-radius:999px;opacity:.14}.streak-t1{background:var(--t1);top:14%;left:-4rem;transform:rotate(0)}.streak-t2{background:var(--t2);top:68%;left:8%;transform:rotate(-32deg)}.streak-t3{background:var(--t3);top:20%;right:26%;transform:rotate(80deg)}.streak-t4{background:var(--t4);top:60%;right:-3rem;transform:rotate(28deg)}.hero-inner{position:relative;max-width:68rem;margin:0 auto;padding:4.5rem 1.5rem 3rem;display:flex;align-items:center;gap:2rem}.hero-copy{flex:1 1 32rem}.hero h1{font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:-.01em}.tagline{font-family:var(--display-font);font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--t4);margin-top:.8rem}.sub{margin-top:1rem;max-width:34rem;color:var(--ink-soft);font-size:1.05rem}.play-badge img{height:4.6rem;width:auto}.play-badge{display:inline-block;transition:transform .12s ease}.play-badge:hover{transform:scale(1.04)}.hero-badge{margin-top:1.6rem}.badge-note{margin-top:.4rem;font-size:.85rem;color:var(--ink-soft)}.hero-fairy{flex:0 1 17rem;min-width:0;max-height:26rem;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(74,48,128,.22))}.demo{padding:4rem 0 1rem}.demo h2,.benefits h2{font-size:clamp(1.8rem,4vw,2.6rem)}.demo-intro{display:flex;gap:1.4rem;align-items:flex-start;margin-top:1.2rem;max-width:44rem}.demo-fairy{width:8.5rem;flex:none}.fairy-line{margin-top:.6rem;font-style:italic;color:var(--t4)}.try-it{margin-top:.6rem;font-weight:600}.demo-stage{margin-top:1.6rem}.demo-area{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;background:linear-gradient(170deg,var(--tint) 0%,var(--tint-2) 100%);border:1px solid var(--line);border-radius:1.2rem;padding:2.2rem 1rem 1.6rem;cursor:crosshair}.demo-blocks{display:flex;justify-content:center;gap:clamp(.8rem,4vw,2.6rem);flex-wrap:wrap}.demo-block-col{display:flex;flex-direction:column;align-items:center;gap:.5rem}.demo-block{position:relative;width:clamp(3.6rem,11vw,5.4rem);height:clamp(3.6rem,11vw,5.4rem);background:#fff;border:3px solid var(--ink);border-radius:.7rem;box-shadow:0 4px #241a3d40;font-size:clamp(2rem,6.5vw,3.1rem);font-weight:600}.demo-block .piece{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.piece-fall{animation:piece-fall .7s ease-in forwards}@keyframes piece-fall{to{transform:translate(.5rem,7rem) rotate(24deg);opacity:0}}.piece-tapped{animation:tap-pop .3s ease-out}@keyframes tap-pop{40%{transform:scale(.82)}}.demo-block.is-wrong{animation:shake .3s ease-in-out}@keyframes shake{25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.verdict{position:absolute;top:-.7rem;right:-.7rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center}.demo-under{min-height:3.2rem;display:flex;flex-direction:column;align-items:center;gap:.1rem}.hint{font-size:1.4rem;font-weight:700;opacity:.85}.pinyin{font-size:1.15rem;font-weight:700}.expected{font-size:1rem;font-weight:700}.meaning{font-size:.78rem;color:var(--ink-soft)}.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.demo-done{min-height:3.2rem;margin-top:1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;opacity:0;transition:opacity .3s ease}.demo-done.is-visible{opacity:1}.demo-done p{font-family:var(--display-font);font-size:1.2rem;color:var(--t4)}.demo-done button{font:inherit;font-weight:600;padding:.5rem 1.1rem;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}.demo-done button:hover{background:var(--tint)}.benefits{padding:3rem 0 4rem;background:linear-gradient(180deg,transparent 0%,rgba(163,138,220,.08) 30%,rgba(163,138,220,.08) 70%,transparent 100%)}.benefit-grid{margin-top:1.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}.benefit-card{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.4rem 1.3rem 1.5rem;box-shadow:0 6px 18px #241a3d0f}.card-slash{display:block;width:2.4rem;height:.4rem;border-radius:999px;margin:.8rem 0 1.5rem;transform-origin:center}.slash-t1{background:var(--t1)}.slash-t2{background:var(--t2);transform:rotate(-35deg)}.slash-t3{background:var(--t3);transform:rotate(78deg)}.slash-t4{background:var(--t4);transform:rotate(35deg)}.benefit-card h3{font-size:1.25rem;margin-bottom:.5rem}.benefit-card p{color:var(--ink-soft);font-size:.95rem}.requirements{padding:3.5rem 0}.requirements-inner{display:flex;align-items:center;gap:2.5rem}.req-fairy{flex:0 1 14rem;min-width:0;max-height:22rem;object-fit:contain}.req-copy h2{font-size:clamp(1.7rem,3.5vw,2.3rem)}.req-copy ul{list-style:none;margin-top:1.2rem;display:grid;gap:1rem}.req-copy h3{font-size:1.15rem}.req-copy li p{color:var(--ink-soft);max-width:32rem}.affiliation-note{margin-top:1.3rem;font-size:.85rem;color:var(--ink-soft);font-style:italic}.cta{background:radial-gradient(40rem 20rem at 20% 0%,rgba(198,40,40,.1),transparent 55%),linear-gradient(150deg,#2c2050,#472a6e 60%,#5b3390);color:#fff;overflow:hidden}.cta-inner{display:flex;align-items:center;gap:2.5rem;padding-top:3rem;padding-bottom:3rem}.cta-fairy{flex:0 1 15rem;min-width:0;max-height:20rem;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.35))}.cta-copy h2{font-size:clamp(2rem,4.5vw,3rem)}.cta-copy p{margin:.7rem 0 1.5rem;color:#ffffffd9;font-size:1.1rem}footer{background:#1d1535;color:#ffffffbf;font-size:.85rem}.footer-inner{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;padding-top:1.4rem;padding-bottom:1.6rem;align-items:center}footer a{color:#cbb8f0}.footer-note{opacity:.75}.privacy-page{min-height:100vh;background:linear-gradient(160deg,#faf7ff,#f4f0fc);padding:3rem 1.5rem 4rem}.privacy-inner{max-width:42rem;margin:0 auto}.back-link{display:inline-block;margin-bottom:2rem;text-decoration:none;font-weight:600}.privacy-page h1{font-size:2.4rem}.effective{color:var(--ink-soft);margin-top:.4rem}.privacy-page section{margin-top:2rem}.privacy-page h2{font-size:1.4rem;margin-bottom:.6rem}.privacy-page p+p{margin-top:.7rem}@media(max-width:46rem){.hero-inner{flex-direction:column;text-align:center;padding-top:3rem}.sub{margin-inline:auto}.hero-fairy{max-height:19rem}.demo-intro{flex-direction:column;align-items:center;text-align:center}.requirements-inner,.cta-inner{flex-direction:column;text-align:center}.req-copy li p{margin-inline:auto}.req-fairy,.cta-fairy{max-height:16rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.piece-fall,.piece-tapped,.demo-block.is-wrong{animation:none}.piece-fall{opacity:0}}