:root{--ink:#193449;--muted:#4d6271;--blue:#146085;--paper:#fffdf7;--line:#d8e5eb;--sky:#e4f4fb;--pink:#fce3db;--yellow:#ffe3a4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.55 system-ui,sans-serif}a{color:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0 0 1rem}h1,h2,h3,.brand{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-weight:850;line-height:1.03;letter-spacing:-.04em}h1{font-size:clamp(3rem,7vw,6.5rem)}h1 em{font-style:normal;color:var(--blue)}h2{font-size:clamp(2rem,4vw,3.65rem)}h3{font-size:clamp(1.55rem,2.3vw,2.25rem)}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.top,.foot{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding-block:1.3rem}.brand{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;font-size:2rem;color:var(--blue)}.brand span{color:#af504a;margin-left:-.33rem}nav{display:flex;gap:clamp(.75rem,3vw,2rem);font-weight:700}nav a,.plain{text-decoration:none}nav a:hover,.plain:hover{text-decoration:underline}.plain{color:var(--blue);font-weight:800}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding-block:3rem 4.5rem}.tag{color:var(--blue);font-weight:850;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}.dot{display:inline-block;width:.65rem;height:.65rem;background:#f1a386;border-radius:50%;margin-right:.3rem}.lead{max-width:36rem;font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);margin-block:1.45rem}.actions{display:flex;gap:.8rem 1rem;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue);color:white;border:2px solid var(--blue);padding:.68rem 1.05rem;border-radius:999px;font-weight:760;text-decoration:none}.btn:hover{background:#114762;border-color:#114762;color:white}.outline{background:transparent;color:var(--blue)}.stage{position:relative;isolation:isolate;min-height:clamp(300px,40vw,470px);border-radius:38% 24% 33% 22% / 33% 25% 35% 26%;background:radial-gradient(ellipse at 22% 15%,#f5fcff,#cce9f7 63%,#bce0f0);overflow:hidden}.book{position:absolute;top:13%;width:43%;border-radius:4px 9px 9px 4px;overflow:hidden;box-shadow:0 16px 25px #19344955}.book img,.cover img{width:100%;object-fit:cover}.one{left:13%;transform:rotate(-12deg)}.two{left:49%;top:22%;transform:rotate(11deg)}.book:hover{z-index:2}.spark{position:absolute;right:10%;top:5%;font-size:3.6rem;color:#b6604c}.ring{position:absolute;left:4%;bottom:7%;border:6px solid #fff8;width:22%;aspect-ratio:1;border-radius:50%}.sticker{position:absolute;right:5%;bottom:6%;background:var(--yellow);font-weight:900;font-size:.7rem;line-height:1.15;text-align:center;border-radius:50%;width:5.8rem;aspect-ratio:1;display:grid;place-content:center;transform:rotate(9deg);box-shadow:0 4px 10px #19344929;pointer-events:none}.catalog{background:var(--sky);padding-block:3.5rem}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem;margin-top:1.75rem}.card{background:white;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:minmax(110px,.75fr) 1.25fr;align-items:center}.cover{display:block;padding:1.2rem;background:#f4ecdc;height:100%;align-content:center}.card:nth-child(2) .cover{background:#f8e3df}.cover img{border-radius:4px;box-shadow:0 7px 15px #19344933}.cardcopy,.tile{padding:1.25rem}.cardcopy p:not(.tag),.tile p,.resource p,.about p{color:var(--muted)}.meta{font-weight:800}.resource{padding-block:3.5rem;display:grid;grid-template-columns:auto minmax(0,560px);align-items:center;gap:2.5rem}.traffic{display:grid;gap:.45rem;background:var(--ink);padding:.85rem;border-radius:22px;transform:rotate(-8deg)}.traffic i{width:2.15rem;aspect-ratio:1;background:#ff9e8b;border-radius:50%}.traffic i:nth-child(2){background:#ffe397}.traffic i:nth-child(3){background:#a1e1b7}.about{background:#fff2da;padding-block:3rem}.about p:last-child{max-width:47rem}.foot{flex-wrap:wrap}.foot p{margin:0}.detail,.inset{padding-block:2.5rem 3.8rem}.detailgrid{display:grid;grid-template-columns:minmax(0,360px) 1fr;align-items:center;gap:3rem;margin-top:1.5rem}.detailgrid .cover{border-radius:20px;padding:1.7rem}.detail h1,.inset h1{font-size:clamp(2.75rem,6vw,5.25rem)}.inset>.tag{margin-top:1.5rem}.levels{display:flex;gap:.7rem 2.2rem;flex-wrap:wrap;padding-left:1.5rem}.levels li{font-weight:750;padding:.3rem}.preview{width:min(100%,480px);border:1px solid var(--line);border-radius:12px}.tile{border-radius:24px;background:var(--sky);padding:clamp(1.25rem,4vw,2rem)}.tile h2{font-size:clamp(1.65rem,3vw,2.5rem)}.theory{background:#fff2da}footer{border-top:1px solid var(--line)}:focus-visible{outline:3px solid #ad4642;outline-offset:4px}.skip{position:absolute;left:1rem;top:-5rem;padding:.5rem;background:white;z-index:10}.skip:focus{top:1rem}
@media(max-width:1020px){.card{grid-template-columns:1fr}.card .cover img{width:min(48%,220px);margin:auto}.hero{gap:1.5rem}}
@media(max-width:720px){.shell{width:calc(100% - 32px)}.hero,.grid,.detailgrid{grid-template-columns:1fr}.hero{padding-block:1.5rem 2.8rem}.stage{min-height:0;aspect-ratio:1.15}.card{grid-template-columns:clamp(100px,30%,160px) 1fr}.card .cover img{width:100%}.detailgrid .cover{max-width:320px}.resource{gap:1.25rem}.top{gap:.65rem;flex-wrap:wrap}.top nav{font-size:.9rem}.top .brand{font-size:1.6rem}}
@media(max-width:360px){.card{grid-template-columns:1fr}.card .cover img{width:55%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}