:root{--ink:#26322f;--muted:#64706e;--paper:#fffdf7;--red:#e9423a;--blue:#58a9d9;--yellow:#f4d85a;--shadow:0 14px 36px rgba(38,50,47,.12);font-family:"Avenir Next",Avenir,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:#fffaf0;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--accent,#58a9d9) 22%,transparent) 0 9rem,transparent 9.1rem),linear-gradient(180deg,#fffaf0,#f7fbff);accent-color:var(--accent,#58a9d9)}button,a{font:inherit}.skip-link{position:fixed;left:12px;top:-60px;z-index:20;background:#fff;color:#111;padding:10px 14px;border-radius:10px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px max(16px,env(safe-area-inset-left));background:rgba(255,253,247,.94);border-bottom:1px solid rgba(38,50,47,.1);backdrop-filter:blur(14px)}.brand{display:grid;grid-template-columns:52px auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;color:var(--ink);text-decoration:none}.brand-logo{grid-row:1/3;width:52px;height:auto}.brand-copy{display:contents}.brand-copy strong{align-self:end;font-size:.72rem;font-weight:950;letter-spacing:.07em;line-height:1}.brand-copy small{align-self:start;margin-top:4px;color:#6a7471;font-size:.54rem;font-weight:900;letter-spacing:.1em;line-height:1;text-transform:uppercase}.mode-switch{display:flex;padding:4px;background:#edf0ee;border-radius:999px}.mode-switch button{border:0;background:transparent;color:#66706e;border-radius:999px;padding:8px 11px;font-size:.82rem;font-weight:850;cursor:pointer}.mode-switch button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 2px 7px #0002}
main{width:min(100% - 28px,1100px);margin:auto;padding:24px 0 74px}.home-hero{display:grid;gap:24px;align-items:center}.home-cover{aspect-ratio:3/4;overflow:hidden;border:2px solid var(--ink);border-radius:26px;background:#fff;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1deg)}.home-cover img{width:100%;height:100%;object-fit:cover}.eyebrow{margin:0 0 8px;color:var(--red);font-size:.75rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.home-hero h1,.activity-title{margin:0;font-size:clamp(2.65rem,12vw,5.7rem);line-height:.91;letter-spacing:-.06em}.home-hero p{max-width:52ch;color:var(--muted);line-height:1.55}.primary-button,.ghost-button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:0 20px;border:2px solid var(--ink);border-radius:15px;font-weight:900;text-decoration:none}.primary-button{background:var(--ink);color:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--accent,#58a9d9) 70%,#111)}.ghost-button{background:#fff;color:var(--ink)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:52px 0 18px}.section-heading h2{margin:0;font-size:clamp(1.65rem,7vw,2.6rem);letter-spacing:-.04em}.section-heading span{color:var(--muted);font-size:.9rem}.activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.activity-card{position:relative;min-height:154px;padding:15px;border:2px solid var(--ink);border-radius:21px;background:var(--card,#fff);color:var(--ink);text-decoration:none;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:.18s transform}.activity-card:hover,.activity-card:focus-visible{transform:translateY(-3px)}.activity-card small{font-weight:950;opacity:.62}.activity-card h3{position:relative;margin:28px 0 0;font-size:1rem;line-height:1.15}.activity-card .card-icon{position:absolute;right:-4px;top:18px;font-size:3.2rem;transform:rotate(9deg)}.audio-dot{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;border:1px solid #0003;font-size:.7rem}
.activity-shell{--accent:#58a9d9}.crumbs{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:.82rem;font-weight:850;color:var(--muted)}.crumbs a{color:inherit}.activity-hero{display:grid;gap:20px;align-items:center}.activity-kicker{display:inline-flex;width:max-content;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,white);font-weight:900;font-size:.8rem}.activity-number{display:block;color:var(--accent);font-size:.82rem;font-weight:950;letter-spacing:.14em;margin-bottom:8px}.activity-subtitle{max-width:46ch;color:var(--muted);line-height:1.5}.page-art{position:relative;overflow:hidden;aspect-ratio:3/4;border:2px solid var(--ink);border-radius:25px;background:#fff;box-shadow:7px 7px 0 var(--ink)}.page-art img{width:100%;height:100%;object-fit:cover}.audio-panel{margin-top:24px;padding:18px;border-radius:24px;background:var(--ink);color:#fff;box-shadow:var(--shadow)}.audio-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.audio-panel strong{font-size:1.05rem}.audio-panel small{color:#cbd5d2}.audio-panel audio{display:block;width:100%;height:42px}.audio-missing{margin:0;color:#d8dfdc;line-height:1.45}.speed-row{display:flex;gap:8px;margin-top:10px}.speed-row button{border:1px solid #ffffff55;border-radius:99px;background:transparent;color:#fff;padding:6px 10px;font-weight:850;font-size:.78rem}.speed-row button.is-active{background:#fff;color:var(--ink)}
.content-layout{display:grid;gap:22px;margin-top:28px}.panel{padding:18px;border:2px solid var(--ink);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:5px 5px 0 var(--ink)}.panel h2{margin:0 0 14px;font-size:1.35rem}.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;background:#edf0ee;border-radius:15px}.tabs button{border:0;border-radius:11px;background:transparent;padding:9px 5px;font-size:.76rem;font-weight:900;color:#606a68;cursor:pointer}.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 6px #0001}.lyrics{display:grid;gap:0;margin:14px 0 0}.lyric-line{padding:12px 2px;border-bottom:1px solid #dce3e0;line-height:1.45}.lyric-line:last-child{border-bottom:0}.game{background:color-mix(in srgb,var(--accent) 17%,white)}.game p{color:#53605d;line-height:1.5}.star-field{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.star{border:0;background:transparent;font-size:2.7rem;filter:grayscale(1);opacity:.44;cursor:pointer;transition:.2s transform,.2s filter}.star.is-lit{filter:none;opacity:1;transform:scale(1.15) rotate(8deg)}.game-status{min-height:25px;font-weight:950}.body-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.body-options button{min-height:48px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-weight:900}.body-options button.correct{background:#cdeed7}.teacher-only{padding:20px;border-radius:24px;background:#fff2c5;border:2px dashed #af7615}.teacher-only h2{margin-top:0}.teacher-only li{margin:.5rem 0;line-height:1.45}body[data-mode="kid"] .teacher-only{display:none}.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}.page-nav a{min-height:52px;padding:10px;border:2px solid var(--ink);border-radius:15px;background:#fff;color:var(--ink);text-decoration:none;font-weight:900;text-align:center}.page-nav a[aria-disabled="true"]{opacity:.35;pointer-events:none}
.choice-grid,.quiz-options,.number-grid,.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}.choice-grid button,.quiz-options button,.number-grid button,.simon-actions button,.level-row button{min-height:48px;padding:9px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}.choice-grid button.correct,.quiz-options button.correct,.number-grid button.correct,.spy-grid button.correct,.feeling-grid button.correct,.color-grid button.correct{background:#cdeed7;box-shadow:inset 0 0 0 2px #36854e}.choice-grid button.wrong,.quiz-options button.wrong,.spy-grid button.wrong,.color-grid button.wrong{background:#ffd8d5}.game .primary-button,.game .ghost-button{width:100%;margin-top:10px;cursor:pointer}.monkey-row{display:flex;justify-content:center;gap:4px;margin:18px 0}.monkey-row button{border:0;background:transparent;font-size:2.25rem;cursor:pointer;transition:.25s transform,.25s opacity}.monkey-row button.is-gone{transform:translateY(25px) rotate(20deg);opacity:.15}.bird-stage{display:flex;justify-content:space-around;min-height:130px;align-items:center;overflow:hidden}.bird-stage button,.spy-grid button,.feeling-grid button{display:grid;gap:5px;place-items:center;border:0;background:transparent;color:var(--ink);font-size:3rem;font-weight:900;cursor:pointer;transition:.35s transform,.35s opacity}.bird-stage button span,.spy-grid button span,.feeling-grid button span{font-size:.82rem}.bird-stage button.is-away{transform:translate(120px,-80px) rotate(20deg);opacity:0}.bird-stage button:first-child.is-away{transform:translate(-120px,-80px) rotate(-20deg)}.humpty{margin:8px auto;text-align:center;font-size:5rem;opacity:.25;transition:.2s opacity}.clock-face{position:relative;text-align:center;font-size:7rem;line-height:1.1}.mouse{position:absolute;left:48%;bottom:4%;font-size:2.2rem;transition:.3s transform}.mouse.step-1{transform:translateY(-85px)}.mouse.step-2{transform:translate(35px,-75px)}.mouse.step-3{transform:translate(0,5px)}.color-grid{grid-template-columns:repeat(4,1fr);margin-bottom:38px}.color-grid button{position:relative;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;background:var(--swatch);cursor:pointer}.color-grid button span{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-size:.68rem;font-weight:900;color:var(--ink)}.spy-grid,.feeling-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.spy-grid button,.feeling-grid button{min-height:94px;border:2px solid var(--ink);border-radius:16px;background:#fff}.simon-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.freeze-stage{display:grid;place-items:center;min-height:130px;margin:14px 0;border:3px solid var(--ink);border-radius:20px;background:#bce7c8;font-size:2.5rem;font-weight:950;letter-spacing:-.04em}.freeze-stage.is-freeze{background:#b9ddf3;color:#174d6c}.level-row{display:grid;gap:8px}.rhyme-card{display:grid;place-items:center;min-height:140px;padding:18px;border:2px dashed var(--ink);border-radius:18px;background:#fff;text-align:center;font-size:1.2rem;font-weight:950;line-height:1.35}
@media(min-width:700px){main{padding-top:38px}.home-hero,.activity-hero{grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)}.home-cover,.page-art{grid-column:2;grid-row:1}.home-copy,.activity-copy{grid-column:1;grid-row:1}.activity-grid{grid-template-columns:repeat(3,1fr)}.content-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)}.lyrics-panel{grid-row:span 2}.activity-card{min-height:175px;padding:19px}.activity-card h3{font-size:1.15rem}}
.song-sequence-grid{grid-template-columns:1fr}.song-letter-grid{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.song-sequence-grid button{overflow-wrap:normal;font-size:1rem}.song-sequence-grid button:disabled{cursor:default}
@media(min-width:1000px){.activity-grid{grid-template-columns:repeat(4,1fr)}.site-header{padding-inline:max(28px,calc((100vw - 1100px)/2))}}
@media(max-width:370px){.site-header{gap:7px;padding-inline:10px}.brand{grid-template-columns:44px auto;column-gap:6px}.brand-logo{width:44px}.brand-copy strong{font-size:.64rem}.brand-copy small{font-size:.47rem}.mode-switch button{padding-inline:8px;font-size:.76rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
