/* A picture-book classroom for young explorers. */
body{background:#faf6ea;background-image:radial-gradient(#d8d9bf 1px,transparent 1px);background-size:24px 24px}header{background:#fffcf3;border-bottom:2px solid #e9e2ce;max-width:none;padding:18px max(4%,calc((100vw - 1280px)/2));gap:24px}.brand-icon{color:#eb794e}nav{gap:24px}nav a{font-size:15px}main{max-width:1280px;padding:28px 32px 70px}.page-heading h1{font-size:clamp(32px,5vw,52px);letter-spacing:-1px}.catalog-intro span{border:1px solid #c4d6be;box-shadow:0 3px 0 #d2ddc6}.catalog-grid{gap:24px}.catalog-card{position:relative;border:2px solid #dedecb;box-shadow:0 6px 0 #e5e0cf;border-radius:26px;overflow:hidden;padding:26px}.catalog-card:before{content:attr(data-symbol);font-size:42px;display:block;width:72px;height:72px;background:#e5eee0;border-radius:24px;text-align:center;line-height:72px;transform:rotate(-7deg)}.catalog-card:nth-child(3n+2):before{background:#fff0c8}.catalog-card:nth-child(3n):before{background:#ffe5db}.catalog-card h2{font-size:24px}.catalog-card .primary{font-size:16px;box-shadow:0 4px 0 #10483e}.han-materials{font-size:14px}.class-hero{position:relative;overflow:hidden;min-height:430px;border-radius:32px;background:#dff0e8;border:2px solid #fff;box-shadow:0 9px 0 #dce5d5,0 20px 40px #244b3710;display:flex;align-items:center}.class-hero.ocean{background:#cdf1e9}.class-hero.ocean:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eaf9f1ed 0%,#eaf9f1bb 32%,transparent 64%)}.class-copy{position:relative;z-index:1;padding:40px 46px;width:62%;min-width:0}.class-label{display:inline-block;font-weight:800;font-size:14px;letter-spacing:2px;color:#17665d;background:#fffaf1;border:1px solid #c4d4b9;border-radius:20px;padding:7px 15px}.class-copy h1{font-size:clamp(36px,5vw,58px);margin:18px 0 12px;line-height:1.3;letter-spacing:0}.class-copy p{font-size:18px;margin:0;color:#315d50;max-width:360px}.class-copy .primary{padding:13px 26px;font-size:18px;box-shadow:0 4px 0 #114b43}.class-decoration{font-size:130px;position:absolute;right:7%;top:24%;transform:rotate(-10deg);filter:drop-shadow(6px 12px 0 #fff8)}.class-hero:not(.ocean){background:radial-gradient(circle at 81% 48%,#fff8 0 120px,transparent 121px),linear-gradient(135deg,var(--lesson-bg,#e6eacb),#fff1da)}.class-hero:not(.ocean):before{content:'✦';position:absolute;right:4%;top:5%;font-size:55px;color:#d1a242;transform:rotate(15deg)}.class-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:16px}.back-courses{font-size:15px;font-weight:700;color:#426a59}.lesson-select{max-width:230px;font:inherit;font-size:14px;border:1px solid #b9cdb8;border-radius:14px;padding:10px;background:#fffdf6;color:#30594e}.class-welcome{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:28px 0 32px;padding:18px 24px;border:2px dashed #cad6bd;border-radius:20px;background:#fffdf5}.class-welcome input{border:0;border-bottom:2px solid #bbceb0;background:transparent;max-width:140px;padding:7px;font-size:17px;color:#17665d}.class-welcome label{font-size:17px;font-weight:700}.class-welcome p{margin:0;font-size:15px;color:#687b65}.mission-heading{display:flex;justify-content:space-between;align-items:end;margin:20px 0}.mission-heading h2{font-size:28px;margin:0}.mission-heading span{font-size:14px;color:#6c7e6d}.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mission{position:relative;text-align:left;padding:22px;border:2px solid #d8dfca;border-radius:24px;box-shadow:0 6px 0 #e0e3d1;background:#fffdf6;display:flex;flex-direction:column;min-height:232px;color:#233d38;transition:transform .18s,box-shadow .18s}.mission:hover{transform:translateY(-4px);box-shadow:0 10px 0 #e0e3d1}.mission:nth-child(3n+2){background:#fff5d8;border-color:#e9dca9;box-shadow:0 6px 0 #ece0ba}.mission:nth-child(3n){background:#ffebe2;border-color:#e9cdbd;box-shadow:0 6px 0 #eddbce}.mission-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.mission-art{font-size:36px;width:65px;height:65px;background:#fff9;border-radius:20px;display:grid;place-items:center}.mission-num{font-size:12px;letter-spacing:1px;font-weight:800;color:#79816c}.mission h3{font-size:22px;line-height:1.4;margin:0 0 8px}.mission p{font-size:15px;margin:0 0 16px;color:#66735e}.mission-go{margin-top:auto;font-size:15px;font-weight:800;color:#17665d;display:flex;justify-content:space-between;align-items:center}.mission-go b{border-radius:50%;width:30px;height:30px;background:#17665d;color:#fff;display:grid;place-items:center}.mission-tag{display:inline-block;font-size:12px;padding:2px 8px;border:1px solid #d6cebb;border-radius:20px;color:#826447;margin-top:5px}.class-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:32px}.encourage,.class-stamps{border-radius:24px;border:2px solid #dfdfca;padding:24px;background:#e9efdd}.encourage h3,.class-stamps h3{font-size:21px;margin:0 0 10px}.encourage p{margin:0;font-size:17px;line-height:1.8}.class-stamps{background:#fff5dc}.class-stamps .shells{justify-content:flex-start;gap:16px;margin:10px 0}.class-stamps .shell{font-size:30px;width:58px;height:58px}.class-stamps p{font-size:14px;margin:8px 0;color:#6c755f}.class-teacher{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14px;color:#5d715c}.class-teacher button{background:none;color:inherit;text-decoration:underline}.lesson-pending{background:#fff8e8;border:1px dashed #d7cba9;border-radius:20px;padding:20px 24px;margin:28px 0;font-size:16px}.lesson-pending strong{display:block;margin-bottom:4px}.class-adjacent{display:flex;justify-content:space-between;gap:20px;margin-top:32px}.class-adjacent a{padding:10px 16px;border:1px solid #cbd6be;background:#fffcf2;border-radius:14px;font-size:15px}.hero-catalog{display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;background:#dceee3;border:2px solid #fff;border-radius:30px;margin-bottom:30px;box-shadow:0 7px 0 #dce4d3}.hero-catalog>div{padding:36px}.hero-catalog h1{font-size:clamp(32px,4vw,48px);line-height:1.3;margin:10px 0}.hero-catalog p{font-size:17px;color:#416654}.hero-catalog img{display:block;width:100%;height:330px;object-fit:cover}.hero-catalog .eyebrow{font-size:12px}.catalog-card .eyebrow{margin-top:18px}.course.ready{font-size:14px;text-align:left;border:1px solid #c4d7bc}.course.ready:hover{background:#c8e2cd}.mission:focus-visible{outline:3px solid #cb613f;outline-offset:5px}
@media(max-width:850px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-copy{padding:30px;width:70%}.class-hero{min-height:370px}.class-hero.ocean:after{background:linear-gradient(90deg,#eaf9f1f2,#eaf9f1b8 50%,transparent)}.class-decoration{font-size:95px;right:5%;top:35%}.hero-catalog>div{padding:26px}.hero-catalog img{height:350px}.class-welcome{align-items:flex-start;flex-direction:column}.class-bottom{grid-template-columns:1fr 1fr}}
@media(max-width:600px){main{padding:20px 16px 50px}header{padding:15px 18px}.class-top{align-items:flex-start;flex-direction:column}.lesson-select{max-width:100%;width:100%}.class-hero{min-height:350px;border-radius:24px}.class-hero.ocean{min-height:440px;background-position:62% center;align-items:flex-start}.class-hero.ocean:after{background:linear-gradient(180deg,#eaf9f1f2,#eaf9f1c9 42%,transparent 76%)}.class-copy{width:100%;padding:26px 24px}.class-copy h1{font-size:38px}.class-copy p{font-size:16px;max-width:260px}.class-copy .primary{font-size:16px}.class-decoration{font-size:80px;top:auto;bottom:20px}.mission-grid{gap:14px}.mission{padding:16px;min-height:230px;border-radius:20px}.mission-art{width:52px;height:52px;font-size:28px}.mission-top{align-items:flex-start;gap:6px}.mission-num{font-size:10px}.mission h3{font-size:19px}.mission p{font-size:14px}.mission-heading h2{font-size:25px}.mission-heading span{font-size:12px}.class-welcome{padding:18px}.class-bottom{grid-template-columns:1fr}.class-adjacent a{font-size:13px;padding:9px}.hero-catalog{grid-template-columns:1fr}.hero-catalog img{height:210px;object-position:center 65%}.hero-catalog>div{padding:26px 24px}.hero-catalog h1{font-size:35px}.catalog-card h2{font-size:25px}.class-stamps .shells{gap:20px}}
@media print{.class-top,.class-teacher,.class-adjacent,.class-copy .primary,.hero-catalog{display:none}.class-hero,.class-hero.ocean{min-height:220px}.class-copy{padding:15px}.class-copy h1{font-size:32px}.mission-grid{grid-template-columns:repeat(3,1fr)}.mission{min-height:180px;box-shadow:none}.class-bottom{grid-template-columns:1fr 1fr}.class-welcome{margin:20px 0}.class-hero:after{display:none}}