:root{--night:#171d32;--deep:#12182a;--text:#f5f4ee;--muted:#b7bfcd;--accent:#e8ef76;--line:#384258;--ease:cubic-bezier(.23,1,.32,1);color-scheme:dark;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--night);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}p{line-height:1.7;text-wrap:pretty}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip-link{position:absolute;top:-80px;left:16px;z-index:10;background:var(--accent);color:var(--night);padding:12px}.skip-link:focus{top:12px}
.header{height:80px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--deep)}.brand{font-size:22px;font-weight:850;letter-spacing:-.035em;white-space:nowrap}.brand span{font-size:12px;font-weight:500;margin-left:12px;letter-spacing:0;color:var(--muted)}.header nav{display:flex;gap:28px;align-items:center}.header nav a{display:flex;gap:7px;align-items:center;min-height:44px;font-size:13px;font-weight:600;white-space:nowrap}.header nav span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.header nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:8px}.hero{position:relative;isolation:isolate;min-height:690px;height:calc(100dvh - 80px);max-height:860px;overflow:hidden;background:var(--deep)}.studio-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;z-index:-3}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,42,.95) 0%,rgba(18,24,42,.72) 34%,rgba(18,24,42,0) 66%),linear-gradient(0deg,var(--night) 0%,transparent 18%);z-index:-2}.hero-copy{position:relative;width:min(610px,48%);margin-left:7%;padding-top:clamp(80px,13vh,132px);z-index:2}.intro{font-size:14px;letter-spacing:.04em;color:#d4d8df;margin-bottom:28px}.hero h1{font-size:clamp(44px,4.4vw,72px);line-height:1.2;font-weight:550;letter-spacing:-.035em}.hero h1 span{color:var(--accent)}.hero-description{font-size:17px;color:#d4d8df;margin-top:24px;line-height:1.8}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-height:54px;background:var(--accent);color:var(--deep);padding:16px 24px;border-radius:8px;font-size:15px;font-weight:700;margin-top:34px;transition:transform 180ms var(--ease),background-color 180ms var(--ease)}.button:active{transform:scale(.97)}.button span{font-size:19px}.cat{position:absolute;right:9%;bottom:19%;width:clamp(280px,30vw,450px);aspect-ratio:1369/1149;pointer-events:none;z-index:1}.cat img{width:100%;height:100%;object-fit:contain}.eye{position:absolute;overflow:hidden;border-radius:50%;pointer-events:none}.eye-left{top:17.6%;left:36.7%;width:4.25%;aspect-ratio:.82;transform:rotate(-5deg)}.eye-right{top:18.3%;left:46.15%;width:4.6%;aspect-ratio:.9;transform:rotate(4deg)}.pupil{position:absolute;top:50%;left:50%;width:36%;height:36%;border-radius:50%;background:#17120d;transform:translate(-50%,-50%)}.fish{position:absolute;left:63%;top:37%;width:100px;aspect-ratio:768/429;pointer-events:none;z-index:3;opacity:.9}.fish img{position:absolute;top:0;height:100%}.fish-tail{left:0;width:33.333%;transform-origin:100% 50%}.fish-body{right:0;width:66.666%}.motion-control{position:absolute;bottom:32px;right:5%;min-height:44px;border:1px solid #748096;background:#192035;color:#d4d8df;border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;z-index:4}.section{width:min(1200px,calc(100% - 112px));margin:0 auto;padding-top:104px}.section-heading{max-width:680px;margin-bottom:44px}h2{font-size:clamp(29px,3vw,42px);font-weight:550;line-height:1.35;letter-spacing:-.025em}.section-heading p{color:var(--muted);margin-top:16px;font-size:16px}.resources{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start}.resource{display:block}.resource-image{overflow:hidden;border-radius:12px;background:#202a3d;aspect-ratio:16/9}.resource-image img{width:100%;height:100%;object-fit:cover;transition:transform 240ms var(--ease)}.resource-side{padding-top:88px}.poster{aspect-ratio:1.42}.poster img{object-fit:contain;padding:18px;background:#a8b3ba}.resource-copy{padding-top:22px}.metadata{color:var(--muted);font-size:12px}.resource h3{font-size:31px;font-weight:550;line-height:1.35;letter-spacing:-.02em;margin-top:12px}.resource-side h3{font-size:26px}.resource-copy>p:not(.metadata){color:var(--muted);font-size:15px;max-width:420px;margin-top:16px}.text-link{display:inline-flex;align-items:center;gap:32px;min-height:44px;font-weight:600;color:var(--accent);font-size:14px;margin-top:20px}.all-resources{display:flex;justify-content:space-between;align-items:center;min-height:64px;border-bottom:1px solid var(--line);margin-top:48px;font-size:14px;color:var(--muted)}.play{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center;padding-top:120px}.play-copy p{color:var(--muted);margin-top:22px}.game-cover{display:block;min-width:0}.game-cover>img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}.game-cover>span{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12px;padding-top:20px}.game-cover b{font-weight:500;font-size:16px;color:var(--text)}.game-cover>span>span{margin-left:auto;color:var(--accent);font-size:20px}.tools{padding-top:120px}.tool-links{display:grid;grid-template-columns:1fr 1fr;gap:56px}.tool-links>a{display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-top:1px solid var(--line);min-height:112px}.tool-links strong{font-size:21px;font-weight:550}.tool-links small{display:block;font-size:14px;color:var(--muted);margin-top:12px;line-height:1.65}.tool-links>a>span:last-child{color:var(--accent);font-size:24px}.story{display:grid;grid-template-columns:.65fr 1fr;gap:120px;align-items:center;padding:128px 0 100px}.story>img{width:100%;height:440px;object-fit:cover;object-position:50% 72%;border-radius:12px}.story>div{max-width:470px}.story-label{font-size:13px;color:var(--muted);margin-bottom:20px}.story>div>p:not(.story-label){font-size:16px;color:var(--muted);margin-top:24px}.footer{position:relative;isolation:isolate;min-height:540px;overflow:hidden;background:var(--deep)}.footer-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-3}.footer-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,42,.94),rgba(18,24,42,.65)),linear-gradient(var(--night),transparent 25%);z-index:-2}.footer-inner{width:min(1200px,calc(100% - 112px));margin:auto;min-height:540px;padding-top:100px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-content:start}.footer-message>p{font-size:14px;color:var(--muted);margin-bottom:18px}.footer-message h2{font-size:46px}.footer-message>a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-top:24px;color:var(--accent)}.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;align-content:start;padding-top:40px}.footer-nav>a{display:flex;gap:16px;align-items:center;min-height:44px;font-size:15px}.footer-nav span{color:var(--muted);font-size:12px}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid #536077;margin-top:24px;padding:24px 0;color:#c0c7d1;font-size:11px}.footer-bottom>a{min-height:44px;display:flex;align-items:center}
@media(hover:hover) and (pointer:fine){.button:hover{background:#f0f68e;transform:translateY(-2px)}.resource:hover .resource-image img{transform:scale(1.025)}nav a:hover,.all-resources:hover{color:var(--accent)}}
@media(min-width:1600px){.hero-copy{padding-top:130px}.cat{right:13%}.fish{left:62%}}
@media(max-width:1100px){.header{padding:0 32px;gap:20px}.brand{font-size:19px}.brand span{display:block;font-size:10px;margin:3px 0 0;letter-spacing:.02em}.header nav{gap:18px}.header nav span{font-size:9px}.hero-copy{margin-left:6%;width:52%}.hero h1{font-size:clamp(42px,5vw,60px)}.cat{right:5%;bottom:21%;width:33vw}.section{width:calc(100% - 64px)}.resources{gap:32px}.play{gap:48px}.story{gap:64px}.footer-inner{width:calc(100% - 64px)}}
@media(max-width:767px){.header{height:auto;min-height:112px;padding:18px 24px;display:block}.brand{font-size:20px}.brand span{display:inline;font-size:10px;margin-left:10px}.header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;margin-top:12px}.header nav a{font-size:12px;gap:6px}.header nav span{font-size:9px}.hero{height:calc(100dvh - 142px);min-height:620px;max-height:780px}.studio-art{object-position:64% 50%;opacity:.72}.hero-shade{background:linear-gradient(180deg,rgba(18,24,42,.93),rgba(18,24,42,.77) 40%,rgba(18,24,42,.12) 65%,var(--night))}.hero-copy{width:calc(100% - 48px);margin-left:24px;padding-top:46px}.intro{font-size:12px;margin-bottom:20px}.hero h1{font-size:clamp(30px,7.9vw,51px);line-height:1.3;letter-spacing:-.035em}.hero-description{font-size:14px;line-height:1.7;margin-top:18px}.button{margin-top:24px;min-height:50px;padding:13px 18px;font-size:13px;gap:32px}.cat{width:clamp(220px,64vw,320px);right:5%;bottom:8%}.fish{width:76px;left:53%;top:62%}.motion-control{bottom:16px;right:24px;font-size:11px;min-height:44px;background:rgba(18,24,42,.9)}.section{width:calc(100% - 48px);padding-top:64px}.section-heading{margin-bottom:28px}h2{font-size:28px;line-height:1.4}.section-heading p{font-size:14px;margin-top:12px}.resources{grid-template-columns:1fr;gap:36px}.resource-side{padding-top:0;display:grid;grid-template-columns:.7fr 1fr;gap:20px;align-items:center}.resource-side .poster{aspect-ratio:.7}.poster img{padding:0;object-fit:cover}.resource-side .resource-copy{padding:0}.resource h3{font-size:25px}.resource-side h3{font-size:20px}.metadata{font-size:10px;line-height:1.6}.resource-copy>p:not(.metadata){font-size:14px}.all-resources{margin-top:28px}.play{grid-template-columns:1fr;gap:28px}.play-copy h2 br{display:none}.play-copy p{font-size:14px;margin-top:14px}.play-copy .text-link{margin-top:12px}.game-cover b{font-size:14px}.game-cover>span{gap:10px}.tool-links{grid-template-columns:1fr;gap:0}.tool-links>a{padding:20px 0;min-height:96px}.tool-links strong{font-size:19px}.tool-links small{font-size:13px}.story{grid-template-columns:1fr;gap:28px;padding-bottom:64px}.story>img{height:280px;object-position:50% 78%}.story>div>p:not(.story-label){font-size:14px}.story-label{margin-bottom:12px}.footer-inner{width:calc(100% - 48px);grid-template-columns:1fr;min-height:640px;padding-top:60px;gap:28px}.footer-message h2{font-size:36px}.footer-nav{padding-top:0;gap:8px 16px}.footer-nav a{font-size:13px;gap:10px}.footer-nav span{font-size:10px}.footer-bottom{margin-top:0;display:flex;flex-wrap:wrap;gap:8px 20px;padding:18px 0}.footer-bottom span{flex-basis:100%}.footer-art{object-position:67% 50%}.footer-shade{background:rgba(18,24,42,.8)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fish{transform:none!important}.pupil{transform:translate(-50%,-50%)!important}}
/* Keep the cat's paws on the desk and the action button in the first phone screen. */
@media(max-width:767px){.hero{height:calc(100dvh - 164px)}.cat{bottom:20%}.fish{top:54%}}
/* Classroom variant: a chalkboard scene, with one soft yellow-green action color. */
:root{--night:#152d2e;--deep:#102223;--text:#f3f4eb;--muted:#b8cbc7;--accent:#dce899;--line:#3b5755}
.studio-art{object-position:center 50%}
.hero-shade{background:linear-gradient(90deg,rgba(16,34,35,.24),rgba(16,34,35,.09) 53%,transparent 72%),linear-gradient(0deg,var(--night),transparent 15%)}
.hero-copy{padding-top:clamp(80px,12vh,120px)}
.intro,.hero-description{color:#d6e1d9}
.hero h1{font-weight:550}
.cat{right:8%;bottom:35%;width:clamp(260px,28vw,420px)}
.fish{left:65%;top:39%}
.motion-control{background:#183333;border-color:#6d9187;color:#d6e1d9}
.footer-shade{background:linear-gradient(90deg,rgba(16,34,35,.7),rgba(16,34,35,.72)),linear-gradient(var(--night),transparent 25%)}
.footer-bottom{border-color:#587571;color:#c4d4cb}
@media(hover:hover) and (pointer:fine){.button:hover{background:#e5eeb6}}
@media(max-width:767px){.studio-art{object-position:62% 50%;opacity:.82}.hero-shade{background:linear-gradient(180deg,rgba(16,34,35,.72),rgba(16,34,35,.5) 42%,rgba(16,34,35,.05) 68%,var(--night))}.hero-copy{padding-top:46px}.cat{width:clamp(220px,64vw,320px);right:5%;bottom:20%}.fish{left:53%;top:54%}.motion-control{background:rgba(16,34,35,.92)}.footer-shade{background:rgba(16,34,35,.79)}}
@media(max-width:767px){.cat{bottom:34%}.fish{top:47%}}