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

:root { --ink: #29334b; --muted: #7b8498; --cream: #fff8e9; --paper: #fffdf7; --coral: #ee7c63; --teal: #63b7b0; --yellow: #f3c84b; --lavender: #7e88d8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f8f2e7; font-family: 'Nunito', sans-serif; }
body:before { content: ''; position: fixed; inset: 0; z-index: -1; opacity: .23; pointer-events: none; background-image: radial-gradient(#d9c9ad 1px, transparent 1px); background-size: 22px 22px; }
.app-shell { max-width: 1220px; margin: 0 auto; padding: 0 34px 28px; }
.topbar { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 25px; text-decoration: none; letter-spacing: .2px; }
.brand-accent { color: var(--coral); }
.brand-mark { width: 38px; height: 33px; display: flex; align-items: end; gap: 3px; }
.brand-mark span { display: block; width: 10px; border-radius: 8px 8px 4px 4px; transform: rotate(-10deg); }
.brand-mark span:nth-child(1) { height: 20px; background: var(--yellow); }.brand-mark span:nth-child(2) { height: 31px; background: var(--coral); }.brand-mark span:nth-child(3) { height: 24px; background: var(--teal); }
.round-pill { padding: 9px 15px; border: 1px solid #e4d7bf; border-radius: 30px; background: rgba(255,253,247,.7); color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .5px; }.round-pill strong { color: var(--ink); margin-left: 3px; }.spark { color: var(--yellow); font-size: 16px; margin-right: 4px; }
.hero { min-height: 385px; display: grid; grid-template-columns: 45% 55%; align-items: center; overflow: hidden; border-radius: 30px; background: #e9f2ec; position: relative; }
.hero-copy { padding: 54px 18px 53px 70px; position: relative; z-index: 2; }.eyebrow { margin: 0 0 8px; color: var(--coral); font-size: 12px; font-weight: 900; letter-spacing: 1.7px; text-transform: uppercase; }.hero h1 { margin: 0; color: var(--ink); font-family: 'Baloo 2', cursive; font-size: clamp(56px, 6vw, 82px); line-height: .82; letter-spacing: -1px; }.hero h1 em { color: var(--teal); font-style: normal; }.intro { max-width: 345px; margin: 23px 0 32px; color: #647083; font-size: 15px; line-height: 1.55; font-weight: 700; }.progress-wrap { max-width: 320px; }.progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #738073; font-size: 11px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }.progress-label strong { color: var(--ink); }.progress-track { height: 9px; overflow: hidden; border-radius: 20px; background: rgba(99,183,176,.2); }.progress-bar { width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width .4s ease; }
.hero-art { height: 100%; min-height: 385px; position: relative; overflow: hidden; background: linear-gradient(145deg, #e9f2ec 50%, #d8ece5); }.hero-art:after { content: ''; position: absolute; width: 150%; height: 120px; left: -20%; bottom: -57px; border-radius: 50%; background: #b7d9c9; }.sun { position: absolute; top: 44px; right: 20%; width: 78px; height: 78px; border-radius: 50%; background: #f6ce65; box-shadow: 0 0 0 13px rgba(246,206,101,.16); }.cloud { position: absolute; width: 85px; height: 25px; border-radius: 30px; background: rgba(255,255,255,.72); }.cloud:before,.cloud:after { content: ''; position: absolute; border-radius: 50%; background: inherit; }.cloud:before { width: 36px; height: 36px; left: 18px; bottom: 4px; }.cloud:after { width: 28px; height: 28px; right: 15px; bottom: 2px; }.cloud-one { top: 63px; left: 18%; }.cloud-two { top: 137px; right: 8%; transform: scale(.7); opacity: .7; }.kite { position: absolute; top: 95px; left: 41%; color: var(--coral); font-size: 61px; transform: rotate(45deg); }.kite span { position: absolute; height: 105px; width: 2px; left: 32px; top: 47px; border-left: 2px dashed var(--coral); transform: rotate(-45deg); }.bubble { position: absolute; display: grid; place-items: center; width: 63px; height: 63px; border: 5px solid #fff8e9; border-radius: 50%; color: white; font-family: 'Baloo 2'; font-size: 37px; font-weight: 700; box-shadow: 0 8px 10px rgba(64,90,83,.1); }.bubble-one { bottom: 78px; left: 12%; background: var(--coral); transform: rotate(-10deg); }.bubble-two { top: 195px; right: 18%; background: var(--lavender); transform: rotate(11deg); }.pencil { position: absolute; right: 31%; bottom: 70px; color: var(--yellow); font-size: 65px; transform: rotate(30deg); text-shadow: 5px 5px 0 #fff8e9; }.hill { position: absolute; border-radius: 50% 50% 0 0; }.hill-back { width: 400px; height: 160px; bottom: -89px; left: 11%; background: #a6cfc1; }.hill-front { width: 500px; height: 170px; bottom: -104px; right: -5%; background: #8fc1b3; }
.challenge-section { padding: 54px 3px 10px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }.section-heading h2,.complete-panel h2 { margin: 0; font-family: 'Baloo 2', cursive; font-size: 34px; line-height: .95; }.new-round { padding: 11px 17px; border: 1px solid #e2d6c2; border-radius: 9px; color: var(--ink); background: var(--paper); font-family: inherit; font-size: 13px; font-weight: 900; cursor: pointer; transition: transform .2s, box-shadow .2s; }.new-round span { color: var(--coral); font-size: 19px; vertical-align: -1px; margin-right: 5px; }.new-round:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #e2d6c2; }
.puzzle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.puzzle-card { min-width: 0; padding: 14px 14px 17px; border: 1px solid #eadfcd; border-radius: 16px; background: var(--paper); box-shadow: 0 6px 0 #e9deca; transition: transform .25s, border-color .25s; }.puzzle-card:hover { transform: translateY(-4px); }.puzzle-card.solved { border-color: rgba(99,183,176,.6); box-shadow: 0 6px 0 rgba(99,183,176,.28); }.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }.number-badge { color: #a0a3ad; font-size: 11px; font-weight: 900; letter-spacing: 1px; }.status { color: #c4c4ca; font-size: 22px; font-weight: 900; }.solved .status { color: var(--teal); }.puzzle-card img { display: block; width: 100%; aspect-ratio: 1.92; object-fit: cover; border-radius: 10px; }.answer-form { margin-top: 13px; }.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.answer-form label { display: block; color: #83899a; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }.answer-row { display: flex; gap: 7px; }.answer-row input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 2px solid #e6dfd0; border-radius: 8px; outline: none; color: var(--ink); background: #fff; font: 800 18px 'Nunito'; }.answer-row input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(99,183,176,.16); }.answer-row button { width: 43px; border: 0; border-radius: 8px; color: white; background: var(--teal); font-size: 25px; font-weight: 900; cursor: pointer; }.answer-row button:hover { background: #4da39d; }.answer-row input:disabled { color: var(--teal); background: #f0f8f4; }.feedback { height: 17px; margin: 7px 0 0; font-size: 11px; font-weight: 900; }.hint-button { padding: 0; border: 0; color: var(--coral); background: none; font: 900 11px 'Nunito'; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; }.hint-button:hover { text-decoration: underline; }.hint { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; color: #806a34; background: #fbf1cf; font-size: 13px; font-weight: 800; }.success { color: #49a094; }.try-again { color: var(--coral); }
.complete-panel { display: flex; align-items: center; gap: 18px; margin-top: 27px; padding: 22px 25px; border-radius: 15px; background: #f2d77d; animation: rise .45s ease both; }.complete-panel .eyebrow { color: #92762d; }.complete-panel h2 { font-size: 29px; }.complete-panel p:last-child { margin: 4px 0 0; color: #806a34; font-size: 13px; font-weight: 800; }.trophy { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; color: #fff; background: var(--coral); font-size: 27px; }.primary-button { margin-left: auto; padding: 12px 16px; border: 0; border-radius: 8px; color: white; background: var(--ink); font: 800 13px 'Nunito'; cursor: pointer; }.primary-button span { color: var(--yellow); margin-left: 9px; font-size: 18px; }footer { padding-top: 45px; color: #a4a19a; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.footer-dot { display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px; border-radius: 50%; background: var(--yellow); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.puzzle-card img { aspect-ratio: 1.575; }
.grid-card img { aspect-ratio: 1; }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; }.hero-copy { padding: 42px 38px 30px; }.hero-art { min-height: 250px; }.hero h1 { font-size: 64px; }.puzzle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .app-shell { padding: 0 18px 24px; }.topbar { height: 78px; }.brand { font-size: 22px; }.hero { border-radius: 22px; }.hero-copy { padding: 35px 26px 28px; }.hero h1 { font-size: 56px; }.hero-art { min-height: 220px; }.puzzle-grid { grid-template-columns: 1fr; }.section-heading { align-items: start; gap: 18px; flex-direction: column; }.complete-panel { align-items: flex-start; flex-wrap: wrap; }.primary-button { margin-left: 0; width: 100%; }.new-round { align-self: stretch; } }