@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root { --ink:#17254a; --muted:#64718e; --blue:#2b90e8; --blue-dark:#2255c8; --sky:#e8f5ff; --pink:#ff5c89; --yellow:#ffd23d; --paper:#fffdf8; --line:#dbe5f0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Nunito,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; transform:translateY(-120%); background:var(--ink); color:#fff; padding:8px 14px; z-index:50; left:16px; border-radius:0 0 8px 8px; }.skip-link:focus { transform:translateY(0); }
.site-header { height:86px; max-width:1220px; padding:0 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:Fredoka,sans-serif; color:var(--ink); font-size:22px; font-weight:600; letter-spacing:-.5px; }
.brand-mark { width:43px; height:43px; display:inline-grid; place-items:center; position:relative; background:linear-gradient(145deg,#fff,#ddecff); border-radius:14px 14px 14px 4px; box-shadow:0 4px 0 #2255c8,0 7px 13px #2255c83c; color:var(--pink); font:bold 29px/1 Fredoka,sans-serif; border:1px solid #e6effc; }.brand-mark i { font-style:normal; font-size:12px; color:#ffae00; position:absolute; right:-6px; bottom:-5px; text-shadow:0 1px #bc6e00; }.brand-mark.small { transform:scale(.76); transform-origin:left center; margin-right:-9px; }
nav { display:flex; align-items:center; gap:30px; color:#4d5e80; font-weight:800; font-size:14px; } nav a { transition:color .2s; } nav a:hover { color:var(--blue); }.nav-support { background:#e6f4ff; color:#1961b7; padding:9px 16px; border-radius:11px; }
.hero { min-height:590px; max-width:1220px; padding:84px 70px 70px; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:38px; position:relative; overflow:hidden; }.hero:before { content:""; position:absolute; inset:0 -100vw; z-index:-2; background:linear-gradient(113deg,#f7f2ff 0%,#f4faff 48%,#fff5f5 100%); }.hero:after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:110px; background:linear-gradient(0deg,var(--paper),transparent); }
.hero-glow { position:absolute; border-radius:50%; filter:blur(2px); z-index:-1; }.glow-one { width:270px; height:270px; background:#d7efff; left:-180px; top:68px; }.glow-two { width:340px; height:340px; background:#ffe0e9; right:-205px; top:-155px; }
.eyebrow { text-transform:uppercase; letter-spacing:1.45px; color:#4771a9; font-size:11px; font-weight:900; margin:0 0 13px; }.eyebrow span { display:inline-block; width:18px; height:4px; border-radius:3px; background:var(--pink); vertical-align:middle; margin:-2px 8px 0 0; }.eyebrow.blue { color:#2b74bf; }.eyebrow.blue span { background:var(--blue); }.eyebrow.pink { color:#b94779; }.eyebrow.pink span { background:var(--pink); }
h1,h2,h3 { font-family:Fredoka,sans-serif; margin:0; letter-spacing:-1.3px; line-height:1.08; } .hero h1 { font-size:clamp(52px,6vw,75px); font-weight:600; }.hero h1 em,.closing h2 em { color:var(--pink); font-style:normal; }.hero-description { max-width:470px; color:#56627c; font-size:19px; line-height:1.55; margin:22px 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:17px; align-items:center; }.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:14px 20px; border-radius:14px; font-weight:900; line-height:1.2; transition:transform .2s, box-shadow .2s, background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:linear-gradient(135deg,#2e9ced,#2579d7); color:#fff; box-shadow:0 7px 0 #1e62af,0 12px 21px #2474c13d; }.button-primary:hover { box-shadow:0 8px 0 #1e62af,0 15px 26px #2474c152; }.button-primary b { font-size:20px; }.button-text { color:#37639c; padding-left:6px; }.button-text b { color:var(--pink); font-size:18px; }.hero-note { margin:25px 0 0; color:#7c88a1; font-size:13px; font-weight:700; }.hero-note span { color:#ffb000; }
.hero-visual { height:445px; position:relative; display:grid; place-items:center; }.phone-shell { width:257px; height:465px; padding:10px; border:7px solid #283a65; background:#283a65; border-radius:36px; box-shadow:0 23px 40px #21365b35, inset 0 0 0 2px #6079a8; transform:rotate(4deg); position:relative; overflow:hidden; }.phone-top { height:21px; color:#d9e5ff; font:10px/1 sans-serif; display:flex; justify-content:space-between; align-items:center; padding:0 4px 7px; }.notch { width:68px; height:12px; border-radius:0 0 9px 9px; background:#17254a; position:absolute; left:50%; transform:translateX(-50%); top:0; }
.game-screen { background:linear-gradient(160deg,#eaf7ff,#f4f0ff); border-radius:21px 21px 26px 26px; min-height:417px; padding:7px 13px 12px; }.game-head { display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:900; color:#51617d; }.tiny-avatar { width:22px; height:22px; border-radius:50%; background:#f8c963; text-align:center; line-height:22px; font-size:14px; }.streak { color:#db5a51; background:#fff2e5; border-radius:8px; padding:4px 5px; }.coin { color:#927000; background:#fff6cd; border-radius:8px; padding:4px 5px; }.progress { height:5px; border-radius:4px; background:#d7e3ef; margin:13px 0 14px; overflow:hidden; }.progress i { display:block; height:100%; width:60%; border-radius:4px; background:linear-gradient(90deg,#ff9e70,#ff5c89); }.question-count { margin:0 0 8px; text-align:center; color:#6d7b99; font-size:7px; font-weight:900; letter-spacing:.8px; }.question-card { height:112px; border-radius:17px; color:#fff; background:linear-gradient(145deg,#6f6ce8,#9b66e6); padding:13px; box-shadow:0 6px 13px #6956aa42; position:relative; overflow:hidden; }.question-card:after { content:"?"; position:absolute; right:6px; bottom:-37px; opacity:.1; font:100px Fredoka,sans-serif; }.category-icon { display:block; width:20px; height:20px; text-align:center; border-radius:6px; background:#ffffff2b; font-weight:900; }.question-card p { font:600 17px/1.15 Fredoka,sans-serif; margin:12px 0 0; letter-spacing:-.4px; }.answers { margin-top:12px; display:grid; gap:7px; }.answers div { padding:8px 9px; color:#5c6c88; background:#fff; border-radius:9px; font-size:10px; font-weight:800; box-shadow:0 2px 0 #d6e1ee; }.answers b { color:#8e9bb2; margin-right:7px; }.answers .answer-correct { color:#217146; background:#dbf8e7; box-shadow:0 2px 0 #a8dfbd; }.answer-correct b,.answer-correct span { color:#218450; }.answer-correct span { float:right; }.tap-label { color:#9ba8be; text-align:center; font-size:7px; letter-spacing:.7px; font-weight:900; margin-top:12px; }.score-pill { position:absolute; right:0; top:86px; background:#fff; padding:10px 15px 9px 10px; border-radius:16px; box-shadow:0 8px 22px #29436c24; transform:rotate(-5deg); line-height:1; }.score-pill span { display:inline-grid; place-items:center; border-radius:50%; background:#ffeb84; height:28px; width:28px; color:#d09000; margin-right:5px; }.score-pill b { font:700 19px Fredoka,sans-serif; color:#ef5879; vertical-align:middle; }.score-pill small { display:block; margin:5px 0 0 34px; color:#8692a7; font-size:8px; font-weight:800; }.spark { position:absolute; color:#f1a000; font-size:25px; z-index:2; }.spark-a { top:42px; left:16px; }.spark-b { bottom:75px; left:38px; color:#ff7294; font-size:16px; }.spark-c { bottom:22px; right:18px; color:#7e6ce8; font-size:19px; }
.ribbon { min-height:67px; background:#243963; color:#dceaff; display:flex; align-items:center; justify-content:center; gap:29px; white-space:nowrap; overflow:hidden; text-transform:uppercase; letter-spacing:1.2px; font-size:10px; font-weight:900; }.ribbon i { color:#ffca41; font-style:normal; font-size:13px; }
.section { max-width:1080px; margin:auto; padding:100px 28px; }.section h2 { font-size:clamp(37px,4.5vw,54px); font-weight:600; }.how { display:grid; grid-template-columns:.83fr 1.17fr; gap:76px; align-items:start; }.steps { display:grid; gap:23px; }.steps article { min-height:122px; padding:22px 28px 21px 96px; background:#fff; border:1px solid #e7edf4; border-radius:20px; position:relative; box-shadow:0 8px 22px #18386d0a; }.step-number { position:absolute; right:18px; top:15px; color:#c7d2e0; font:13px Fredoka,sans-serif; }.step-icon { position:absolute; left:24px; top:28px; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font:23px Fredoka,sans-serif; }.step-icon.purple { color:#7858da; background:#eee7ff; }.step-icon.yellow { color:#cb8000; background:#fff1c4; }.step-icon.pink { color:#c2466e; background:#ffe6ed; }.steps h3 { font-size:23px; font-weight:600; }.steps p { color:#6c7790; font-size:14px; margin:4px 0 0; max-width:430px; }
.modes { max-width:none; background:#f1f8ff; display:grid; grid-template-columns:.9fr 1.25fr; align-items:center; gap:65px; padding:96px max(28px,calc((100% - 1024px)/2)); }.modes-copy > p:not(.eyebrow) { color:#66728e; max-width:410px; margin:17px 0 0; font-size:17px; }.mode-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.mode-card { min-height:287px; padding:16px; border-radius:22px; background:#fff; box-shadow:0 8px 24px #315c9b12; transition:transform .2s; }.mode-card:hover { transform:translateY(-5px); }.mode-art { height:139px; border-radius:15px; margin-bottom:17px; display:grid; place-items:center; position:relative; overflow:hidden; font:70px Fredoka,sans-serif; }.mode-art span { position:absolute; font:43px Fredoka,sans-serif; }.solo .mode-art { background:linear-gradient(135deg,#e1d8ff,#f6ddfb); color:#9573e4; }.solo .mode-art span { color:#fff; font-size:75px; text-shadow:0 3px #8061c4; }.daily .mode-art { background:linear-gradient(135deg,#fff5b0,#ffe0ac); color:#ffb500; }.daily .mode-art span { font-size:35px; color:#be7d00; }.friends .mode-art { background:linear-gradient(135deg,#d2f3ff,#d1e5ff); color:#2b87e0; }.friends .mode-art span { color:#ff5f86; font-size:44px; }.mode-card p { color:#8c96a9; text-transform:uppercase; font-size:9px; letter-spacing:1px; font-weight:900; margin:0 0 3px; }.mode-card h3 { font-size:22px; font-weight:600; }.mode-card small { color:#78849a; font-size:12px; font-weight:700; }
.closing { min-height:414px; padding:94px 28px; text-align:center; color:#fff; background:linear-gradient(115deg,#2c90e5,#3868d9); position:relative; overflow:hidden; }.closing:before,.closing:after { content:""; position:absolute; border:1px solid #ffffff1f; border-radius:50%; }.closing:before { width:550px; height:550px; left:-350px; top:-255px; }.closing:after { width:480px; height:480px; right:-305px; bottom:-360px; }.closing .eyebrow { color:#d9efff; position:relative; z-index:1; }.closing .eyebrow span { background:#ffcf3b; }.closing h2 { position:relative; z-index:1; font-size:clamp(40px,5vw,61px); font-weight:600; }.closing h2 em { color:#ffe15d; }.closing .button { margin-top:29px; position:relative; z-index:1; }.button.light { color:#236bbf; background:#fff; box-shadow:0 6px 0 #cedbe7,0 11px 23px #1d4b9a4a; }.closing-doodle { position:absolute; z-index:1; font:600 54px Fredoka,sans-serif; opacity:.88; }.d-one { left:14%; top:130px; color:#f5a7b8; transform:rotate(-17deg); }.d-two { right:15%; top:67px; color:#ffe26c; }.d-three { right:8%; bottom:58px; color:#c7eeff; transform:rotate(16deg); }
footer { padding:43px 28px 30px; max-width:1080px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr 1.4fr; align-items:center; gap:20px; color:#68748e; font-size:13px; } footer p { font-weight:700; } footer > div { display:flex; justify-content:flex-end; gap:18px; font-weight:800; } footer a:hover { color:var(--blue); } footer small { grid-column:1 / -1; border-top:1px solid #e5eaf1; padding-top:19px; color:#9aa4b5; }
.legal-page { background:#f8fbff; }.legal-header { border-bottom:1px solid #e2eaf4; max-width:none; padding:0 max(28px,calc((100% - 1060px)/2)); background:#fff; }.back-home { color:#2c73bd; font-size:14px; font-weight:900; }.legal-content { max-width:780px; margin:0 auto; padding:82px 28px 72px; color:#53617c; font-size:16px; }.legal-content h1 { color:var(--ink); font-size:55px; font-weight:600; }.effective { color:#8692a6; font-size:14px; margin:12px 0 39px; }.legal-content h2 { color:var(--ink); font-size:28px; font-weight:600; padding-top:29px; margin:0 0 10px; }.legal-content p { margin:0 0 16px; }.legal-content ul { margin:0 0 16px; padding-left:23px; }.legal-content li { margin-bottom:9px; }.legal-content strong { color:#354464; }.legal-content a { color:#1672c9; font-weight:800; text-decoration:underline; text-underline-offset:2px; }.legal-footer { max-width:none; display:flex; justify-content:space-between; padding:23px max(28px,calc((100% - 1060px)/2)); background:#fff; border-top:1px solid #e2eaf4; }.legal-footer p { margin:0; }.legal-footer small { display:none; }.legal-footer div { justify-content:normal; }
.not-found { min-height:100vh; background:linear-gradient(135deg,#f2f8ff,#faf4ff); display:grid; place-items:center; text-align:center; padding:30px; }.not-found main { max-width:490px; }.not-found .brand-mark { margin:auto auto 28px; }.not-found h1 { font-size:clamp(42px,7vw,66px); }.not-found p:not(.eyebrow) { color:#66738e; margin:16px 0 29px; }
@media (max-width:800px) { .site-header { height:74px; padding:0 20px; }.brand { font-size:19px; }.brand-mark { transform:scale(.86); transform-origin:left center; margin-right:-5px; } nav { gap:15px; font-size:12px; } nav a:not(.nav-support) { display:none; }.nav-support { padding:8px 12px; }.hero { grid-template-columns:1fr; text-align:center; padding:68px 24px 17px; gap:10px; }.hero-copy { margin:auto; }.hero-description { margin:18px auto 24px; font-size:17px; }.hero-actions { justify-content:center; }.hero-note { margin-top:22px; }.hero-visual { height:432px; transform:scale(.9); transform-origin:top center; margin-bottom:-40px; }.ribbon { justify-content:flex-start; padding-left:18px; }.how { display:block; padding:77px 24px; }.section-intro { margin-bottom:38px; }.modes { display:block; padding:76px 24px; }.modes-copy { margin-bottom:34px; }.mode-cards { gap:10px; }.mode-card { min-height:220px; padding:10px; }.mode-art { height:100px; margin-bottom:12px; font-size:48px; }.solo .mode-art span { font-size:57px; }.daily .mode-art span,.friends .mode-art span { font-size:30px; }.mode-card h3 { font-size:17px; }.mode-card small { line-height:1.25; display:block; }.closing { min-height:372px; padding-top:82px; }.d-one { left:5%; }.d-two { right:7%; }.d-three { display:none; } footer { padding:32px 24px 22px; display:flex; flex-wrap:wrap; justify-content:space-between; } footer p { display:none; } footer > div { gap:13px; font-size:12px; } footer small { width:100%; }.legal-header { padding:0 20px; }.legal-content { padding:62px 24px; }.legal-content h1 { font-size:45px; }.legal-footer { padding:22px 24px; flex-direction:column; gap:12px; }.legal-footer div { flex-wrap:wrap; } }
@media (max-width:450px) { .hero h1 { font-size:51px; }.hero-actions { display:grid; }.button { width:100%; }.button-text { padding-top:8px; }.steps article { padding-left:84px; padding-right:20px; }.step-icon { left:19px; }.mode-cards { grid-template-columns:1fr; }.mode-card { min-height:130px; padding:13px 15px 14px 126px; position:relative; }.mode-art { position:absolute; left:13px; top:13px; width:98px; height:104px; margin:0; }.mode-card h3 { font-size:21px; }.mode-card p { margin-top:15px; }.closing h2 { font-size:42px; }.legal-content h1 { font-size:39px; }.legal-content h2 { font-size:26px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition:none !important; } }