/* Homepage-only visual layer. Loaded after styles.css; every rule is scoped to body[data-page="home"]. */
body[data-page="home"]{--cream:#EEF3F6;--paper:#fff;--navy:#14213D;--ink:#14213D;--muted:#4a5568;--coral:#D62839;--coral-dark:#B01E2E;--sun:#FFD23F;--mint:#2A9D8F;--line:rgba(20,33,61,.12);font-family:"Avenir Next","Trebuchet MS",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
body[data-page="home"]::before{background-image:linear-gradient(rgba(20,33,61,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,33,61,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:none;-webkit-mask-image:none}
body[data-page="home"] h1,body[data-page="home"] h2,body[data-page="home"] h3{font-family:inherit;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
body[data-page="home"] .brand-mark{background:var(--sun);border-radius:6px;transform:none;font-family:inherit;font-weight:800}
body[data-page="home"] .site-nav a:hover,body[data-page="home"] .site-nav a[aria-current=page]{border-color:var(--coral)}

/* hero */
.h-hero{width:var(--wrap);margin:0 auto;padding:34px 0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,84px);align-items:center}
.h-hero h1{font-size:clamp(2.5rem,6.4vw,4.9rem);line-height:1;max-width:13ch}
.h-hero .lede{margin:22px 0 0;max-width:46ch;font-size:1.15rem;color:var(--muted)}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.h-btn{display:inline-flex;align-items:center;min-height:50px;padding:12px 22px;border:2.5px solid var(--navy);border-radius:6px;font-weight:800;text-decoration:none;background:#fff;color:var(--navy);transition:transform .15s,box-shadow .15s}
.h-btn.primary{background:var(--sun);box-shadow:4px 4px 0 var(--navy)}
.h-btn.primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy)}
.h-btn.ghost:hover{background:var(--navy);color:#fff}
.h-btn.game{background:#DFF3FC;gap:8px}.h-btn.game:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
.h-note{margin:16px 0 0;font-size:.92rem;color:var(--muted)}
.h-stage{position:relative;width:100%;max-width:420px;margin-left:auto;container-type:inline-size}
.h-tian{position:relative;aspect-ratio:1;background:#fff;border:4px solid var(--coral);box-shadow:10px 10px 0 var(--sun)}
.h-tian svg.grid{position:absolute;inset:0;width:100%;height:100%}
.h-tian .ch{position:absolute;inset:0;display:grid;place-items:center;font-family:"Kaiti SC","STKaiti","KaiTi","BiauKai","Noto Serif CJK SC",serif;font-weight:700;font-size:70cqw;line-height:1;color:var(--navy);clip-path:inset(0 100% 0 0);animation:h-write 1.4s .3s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes h-write{to{clip-path:inset(0 0 0 0)}}
.h-cap{margin:22px 0 0;font-size:1rem;color:var(--muted);text-align:right}
.h-cap b{font-family:"Kaiti SC","STKaiti","KaiTi","BiauKai","Noto Serif CJK SC",serif;font-size:1.4rem;color:var(--navy);margin-right:6px}
.h-mascot{position:absolute;display:block;width:42%;left:-14%;bottom:-6%;filter:drop-shadow(3px 4px 0 rgba(20,33,61,.25));pointer-events:none}

/* bento: today's tools */
.h-section{width:var(--wrap);margin:0 auto;padding:clamp(44px,6vw,80px) 0}
.h-section>h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.04;max-width:20ch}
.h-section>.sub{margin:14px 0 0;max-width:52ch;color:var(--muted);font-size:1.08rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:38px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:26px;border:2.5px solid var(--navy);border-radius:10px;text-decoration:none;color:var(--navy);background:#fff;transition:transform .15s,box-shadow .15s;box-shadow:5px 5px 0 var(--navy)}
.tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.tile h3{font-size:1.35rem;line-height:1.12}
.tile p{margin:8px 0 0;font-size:.98rem;color:inherit;opacity:.88;max-width:44ch}
.tile .go{font-weight:800;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:currentColor}
.tile .big{font-size:clamp(3.4rem,8vw,5.6rem);line-height:.9;font-weight:900;letter-spacing:-.04em}
.t-practice{grid-column:span 4;background:var(--coral);color:#fff;border-color:var(--navy)}
.t-practice h3{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.t-chinese{grid-column:span 2;background:var(--navy);color:#fff}
.t-chinese h3{color:#fff}
.t-puzzle{grid-column:span 2;background:var(--sun)}
.t-lesson{grid-column:span 2;background:#fff}
.t-skill{grid-column:span 2;background:#D9F1EE}
.t-jam{grid-column:span 6;background:#DFF3FC}
.eqn{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.play{width:60px;height:60px;border-radius:50%;background:var(--navy);color:var(--sun);display:grid;place-items:center;padding-left:5px;font-size:1.4rem;box-shadow:3px 3px 0 var(--sun)}
.cn-big{font-family:"Kaiti SC","STKaiti","KaiTi","BiauKai","Noto Serif CJK SC",serif;font-weight:700;font-size:3.6rem;line-height:1;color:var(--sun)}
.sums{display:flex;gap:8px;flex-wrap:wrap}
.sums span{padding:6px 12px;border:2px solid rgba(255,255,255,.85);border-radius:6px;font-weight:800;font-size:1.05rem}

/* bubble game */
.bubble-wrap{margin-top:30px}
.bubble-stage{height:340px;border:2.5px solid var(--navy);border-radius:10px;background:linear-gradient(#E4F4F1,#FFFFFF);box-shadow:6px 6px 0 var(--sun);overflow:hidden;touch-action:manipulation;cursor:pointer}
.bubble-stage canvas{display:block;width:100%;height:100%}
.bubble-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.bubble-word{flex:1 1 220px;min-height:1.6em;margin:0;font-size:1.45rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}

/* printables band */
.h-band{background:var(--navy);color:#fff}
.h-band .inner{width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,92px) 0;display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,6vw,72px);align-items:center}
.h-band img{display:block;width:100%;height:auto;transform:rotate(-2deg);border:2.5px solid #fff;background:#fff;box-shadow:8px 8px 0 var(--sun)}
.h-band h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;max-width:18ch}
.h-band p{margin:14px 0 0;max-width:50ch;opacity:.9}
.h-band .h-cta{margin-top:26px}
.h-band .h-btn.ghost{background:transparent;color:#fff;border-color:#fff}
.h-band .h-btn.ghost:hover{background:#fff;color:var(--navy)}

body[data-page="home"] .h-band h2,body[data-page="home"] .t-practice h3,body[data-page="home"] .t-chinese h3{color:#fff}
body[data-page="home"] .t-practice p,body[data-page="home"] .t-chinese p{color:#fff}

/* AI tools row */
.tools-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:3px solid var(--navy);background:#fff}
.tools-row a{display:block;padding:24px 22px;text-decoration:none;color:var(--navy);border-bottom:1.5px solid var(--line);border-right:1.5px solid var(--line)}
.tools-row a:last-child{border-right:0}
.tools-row a:hover{background:var(--sun)}
.tools-row strong{display:block;font-size:1.15rem;letter-spacing:-.02em}
.tools-row span{display:block;margin-top:6px;font-size:.95rem;opacity:.85}

/* starter kit */
.h-kit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px;border:2.5px solid var(--navy);border-radius:10px;background:#fff;box-shadow:6px 6px 0 var(--sun)}
.h-kit h2{font-size:1.6rem}
.h-kit p{margin:6px 0 0;color:var(--muted);max-width:50ch}

@media(max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .t-practice{grid-column:span 2}.t-chinese,.t-puzzle,.t-lesson,.t-skill{grid-column:span 1}
  .t-skill,.t-jam{grid-column:span 2}
  .h-band .inner{grid-template-columns:1fr}
  .h-band img{max-width:230px}
  .tools-row{grid-template-columns:1fr}.tools-row a{border-right:0}
}
@media(max-width:720px){
  .h-hero{grid-template-columns:1fr;padding-top:18px}
  .h-stage{margin-left:0;max-width:320px}
  .h-mascot{left:-3%}
}
@media(max-width:560px){
  .bubble-stage{height:300px}
  .bento{grid-template-columns:1fr}
  .t-practice,.t-chinese,.t-puzzle,.t-lesson,.t-skill,.t-jam{grid-column:span 1}
  .tile{box-shadow:4px 4px 0 var(--navy)}
  .h-mascot{width:44%;left:-6%}
}
@media(prefers-reduced-motion:reduce){.h-band img{transform:none}.h-tian .ch{animation:none;clip-path:none}.tile,.h-btn{transition:none}.tile:hover,.h-btn.primary:hover{transform:none}}

/* engineering pass: contrast, target sizes, no inline styles */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.h-section.no-bottom{padding-bottom:0}
.h-section.flush-top{padding-top:0}
.sums.dark{color:var(--navy)}
.sums.dark span{border-color:var(--navy)}
body[data-page="home"] .t-practice p,body[data-page="home"] .t-chinese p{opacity:1}
body[data-page="home"] .brand{min-height:44px}
body[data-page="home"] .menu-button{min-height:44px;min-width:44px}
body[data-page="home"] .site-nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
body[data-page="home"] .footer-grid nav a,body[data-page="home"] .footer-grid .link-button{display:inline-flex;align-items:center;min-height:44px}
body[data-page="home"] .footer-grid nav{gap:4px 18px}
@media(max-width:900px){body[data-page="home"] .site-nav a{min-height:48px}}

/* aesthetic pass: rhythm inside tiles, a quiet motif on the big tile */
.tile .big,.tile .cn-big,.tile .eqn,.tile .play{margin-bottom:12px}
.t-practice{overflow:hidden}
.t-practice::after{content:"+ \2212 \00D7 \00F7";position:absolute;right:20px;bottom:-14px;font-size:clamp(4.5rem,9vw,8rem);font-weight:900;letter-spacing:.08em;color:#fff;opacity:.16;pointer-events:none;white-space:nowrap}

/* comics */
.comics{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;margin-top:36px}
.comics:focus-visible{outline-offset:8px}
.comics figure{margin:0}
.comics img{display:block;width:100%;height:auto;border:2.5px solid var(--navy);background:#fff;box-shadow:6px 6px 0 var(--sun)}
.comics figure:nth-child(1) img{transform:rotate(-1deg)}
.comics figure:nth-child(2) img{transform:rotate(.8deg)}
.comics figure:nth-child(3n) img{transform:rotate(-.6deg)}
.comics figcaption{margin-top:18px;font-size:.98rem;color:var(--muted)}
.comics figcaption strong{color:var(--navy)}
.comics figcaption a{font-weight:800;color:var(--navy);text-underline-offset:4px;text-decoration-thickness:2px;display:inline-block;padding:10px 0}
@media(max-width:900px){
  .comics{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 18px;margin-inline:-6px;-webkit-overflow-scrolling:touch}
  .comics figure{flex:0 0 min(82%,420px);scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){.comics img{transform:none}}

/* hero redesign: the comic cast joins the practice grid */
.h-hero{min-height:min(78vh,720px);padding-top:20px;padding-bottom:20px}
.h-hero h1{font-size:clamp(2.7rem,6.8vw,5.3rem)}
.h-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.h-chips li{padding:8px 14px;border:2px solid var(--navy);border-radius:999px;background:#fff;font-weight:800;font-size:.9rem;color:var(--navy)}
.h-stage{max-width:440px}
.h-tian{position:relative;z-index:1}
.h-pal{position:absolute;display:block;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(20,33,61,.22))}
.h-dumpling{width:34%;right:6%;top:-15%;z-index:0}
.h-chicken{width:27%;right:-2%;bottom:-8%;z-index:2}
.h-mascot{z-index:2}
.h-say{position:absolute;z-index:3;left:-31%;bottom:47%;width:43%;margin:0;padding:10px 14px;background:#fff;border:3px solid var(--navy);border-radius:16px;font-weight:800;font-size:.98rem;line-height:1.2;color:var(--navy);box-shadow:4px 4px 0 var(--sun)}
.h-say::before{content:"";position:absolute;left:32%;bottom:-17px;border:10px solid transparent;border-top:15px solid var(--navy);border-bottom:0}
.h-say::after{content:"";position:absolute;left:calc(32% + 3px);bottom:-10px;border:7px solid transparent;border-top:11px solid #fff;border-bottom:0}
.h-cap{text-align:center}
.h-say,.h-dumpling,.h-chicken{opacity:0;animation:h-pop .5s cubic-bezier(.3,1.5,.5,1) forwards}
.h-say{animation-delay:1.9s}.h-dumpling{animation-delay:2.1s}.h-chicken{animation-delay:2.3s}
@keyframes h-pop{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
@media(max-width:900px){.h-say{left:-15%;width:33%;bottom:45%;font-size:.86rem;padding:8px 10px}}
@media(max-width:720px){.h-hero{min-height:0}.h-stage{max-width:330px}.h-chicken{right:-3%}.h-say{left:0;bottom:calc(100% + 20px);width:58%;font-size:.92rem;padding:9px 13px}.h-say::before,.h-say::after{left:62%}.h-say::after{left:calc(62% + 3px)}}
@media(prefers-reduced-motion:reduce){.h-say,.h-dumpling,.h-chicken{animation:none;opacity:1}}

/* rotating word */
.bubble-word.swap{animation:h-word .45s ease-out}
@keyframes h-word{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bubble-word.swap{animation:none}}

/* cold joke corner */
.jokes{position:relative;display:grid;grid-template-columns:200px 1fr;gap:12px 28px;align-items:center;margin-top:32px;max-width:980px}
.joke-art{width:100%;height:200px;filter:drop-shadow(3px 4px 0 rgba(20,33,61,.22))}
.joke-bubble{position:relative;min-height:230px;padding:26px 30px;border:3px solid var(--navy);border-radius:22px;background:#fff;box-shadow:7px 7px 0 var(--sun);display:flex;flex-direction:column;justify-content:center;gap:18px}
.joke-bubble::before{content:"";position:absolute;left:-19px;top:48%;border:11px solid transparent;border-right:17px solid var(--navy);border-left:0}
.joke-bubble::after{content:"";position:absolute;left:-12px;top:calc(48% + 3px);border:8px solid transparent;border-right:12px solid #fff;border-left:0}
.joke-q{margin:0;font-weight:800;font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.joke-a{margin:0;padding:10px 14px;border-radius:10px;background:var(--sun);font-weight:900;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.2;letter-spacing:-.02em;color:var(--navy);align-self:flex-start;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.joke-a.on{opacity:1;transform:none}
.joke-q.swap{animation:h-word .4s ease-out}
.zh{font-family:"Kaiti SC","STKaiti","KaiTi","BiauKai","Noto Serif CJK SC",serif;font-weight:700}
.joke-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:6px}
.joke-count{font-weight:800;color:var(--navy);min-width:7.5em}
.joke-timer{flex:1 1 140px;height:10px;border:2px solid var(--navy);border-radius:99px;background:#fff;overflow:hidden}
.joke-timer span{display:block;height:100%;width:0;background:var(--coral)}
@media(max-width:720px){
  .jokes{grid-template-columns:1fr}
  .joke-art{height:150px;justify-self:start;width:150px}
  .joke-bubble{min-height:280px;padding:22px 20px}
  .joke-bubble::before{left:40px;top:-19px;border:11px solid transparent;border-bottom:17px solid var(--navy);border-top:0;border-right-color:transparent}
  .joke-bubble::after{left:43px;top:-12px;border:8px solid transparent;border-bottom:12px solid #fff;border-top:0;border-right-color:transparent}
}
@media(prefers-reduced-motion:reduce){.joke-a{transition:none}.joke-q.swap{animation:none}}

/* two-column play band: Bird Pal on the left (sticky), game and jokes on the right */
.playband{width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-top:clamp(36px,5vw,64px)}
.play-main .h-section{width:auto;margin:0;padding:0 0 clamp(44px,6vw,72px)}
.play-main .h-section.flush-top{padding-top:0}
.play-app{position:sticky;top:20px}
.phone{padding:14px 12px 16px;border:3px solid var(--navy);border-radius:38px;background:var(--navy);box-shadow:8px 8px 0 var(--sun)}
.phone::before{content:"";display:block;width:64px;height:6px;margin:0 auto 10px;border-radius:99px;background:rgba(255,255,255,.35)}
.phone-screen{height:min(620px,calc(100vh - 150px));min-height:480px;border-radius:24px;overflow:hidden;background:#FFFBF1;position:relative}
.phone-screen iframe{display:block;width:100%;height:100%;border:0}
.bp-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:24px;border:0;background:linear-gradient(#DCEBFB,#FFFBF1);color:var(--navy);font:inherit;cursor:pointer;text-align:center}
.bp-start img{width:96px;height:96px;border-radius:22px;border:3px solid var(--navy);box-shadow:4px 4px 0 var(--sun);background:#fff}
.bp-start strong{font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.bp-start span{display:inline-block;padding:12px 18px;border:2.5px solid var(--navy);border-radius:999px;background:var(--sun);font-weight:800;box-shadow:3px 3px 0 var(--navy)}
.bp-start:hover span{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
.bp-start:focus-visible{outline:4px solid var(--coral);outline-offset:-8px}
.bp-note{margin:16px 4px 0;font-size:.92rem;color:var(--muted)}
.bp-note a{font-weight:800;color:var(--navy);text-underline-offset:4px;display:inline-block;padding:10px 0}
@media(max-width:900px){
  .playband{grid-template-columns:1fr}
  .play-app{position:static;max-width:380px}
  .phone-screen{height:560px;min-height:0}
}
@media(prefers-reduced-motion:reduce){.bp-start:hover span{transform:none}}

/* order swap: play band is first, hero follows */
.playband{padding-top:clamp(8px,2vw,24px)}
.h-hero{margin-top:clamp(8px,3vw,32px)}

/* director pass: compact intro strip above the play band */
.intro{width:var(--wrap);margin:0 auto;padding:clamp(6px,1.5vw,18px) 0 clamp(14px,2vw,26px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.intro-text{flex:1 1 520px;min-width:0}
.intro h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.02;max-width:none}
.intro-lede{margin:10px 0 0;max-width:60ch;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--muted)}
.intro .h-chips{margin-top:12px}
.intro .h-cta{margin-top:0;flex:0 0 auto}
.h-hero h2{font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.02;letter-spacing:-.035em;max-width:14ch}
.h-textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:#fff;text-underline-offset:5px;text-decoration-thickness:2px}
.grade{display:inline-block;margin:0 0 8px;padding:3px 10px;border:2px solid currentColor;border-radius:99px;font-size:.78rem;font-weight:800;line-height:1.3}
.t-puzzle h3,.t-lesson h3{margin-bottom:6px}
.playband{padding-top:clamp(4px,1vw,12px)}
@media(max-width:560px){.intro .h-cta{width:100%}.intro .h-cta .h-btn{flex:1 1 100%;justify-content:center}}
.bp-note a{min-height:44px;display:inline-flex;align-items:center}

.grade.grown{margin-top:6px;color:var(--sun)}