:root{--ink:#173e72;--blue:#18afe8;--deep:#0876c5;--pink:#ed4f9b;--purple:#8656d9;--green:#42bf66;--orange:#ff922f;--paper:#f8fdff;--shadow:0 15px 32px rgba(27,72,116,.2);font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:var(--ink);background:#9ce8fb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:linear-gradient(#e9fbff,#fffdf5);font-family:"Trebuchet MS",Arial,sans-serif}a{color:inherit}.skip-link{position:fixed;z-index:100;top:-5rem;left:1rem;padding:.8rem 1rem;border-radius:12px;background:#fff}.skip-link:focus{top:1rem}.site-header{position:sticky;z-index:30;top:0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:86px;padding:.6rem clamp(1rem,4vw,4rem);border-bottom:5px solid #fff;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(222,248,255,.97));box-shadow:0 7px 0 #56c7e8,0 12px 25px rgba(24,78,118,.17)}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#14538d;font:900 clamp(1.2rem,2vw,1.65rem)/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif}.brand img{width:68px;height:58px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(24,76,115,.2))}.main-menu{display:flex;align-items:center;gap:.35rem}.main-menu a{padding:.7rem .9rem;border:3px solid transparent;border-radius:17px;text-decoration:none;font-weight:900;transition:.2s}.main-menu a:hover,.main-menu a.active{transform:translateY(-3px);border-color:#fff;background:linear-gradient(#6bdbff,#1ca8df);box-shadow:0 5px 0 #0878b6;color:#fff;text-shadow:0 2px rgba(0,66,114,.25)}.menu-toggle{display:none;border:3px solid #fff;border-radius:16px;padding:.55rem;background:linear-gradient(#6bdcff,#199fd7);box-shadow:0 4px 0 #0877b5;color:#fff;font-weight:900}.menu-toggle span{display:block;width:28px;height:4px;margin:3px;border-radius:9px;background:#fff}.menu-toggle b{position:absolute;width:1px;height:1px;overflow:hidden}.hero-main{display:grid;place-items:center;min-height:clamp(520px,62vw,790px);padding:5rem 1rem;background:linear-gradient(90deg,rgba(4,92,150,.18),rgba(255,255,255,.08)),url("library/picrures/main page background.png") center/cover no-repeat}.hero-copy{width:min(780px,92%);padding:clamp(1.5rem,4vw,3rem);border:6px solid rgba(255,255,255,.95);border-radius:42px;background:rgba(255,255,255,.88);box-shadow:0 12px 0 rgba(14,137,190,.8),0 25px 50px rgba(19,70,107,.24);text-align:center;backdrop-filter:blur(6px)}.kicker,.section-heading span{display:inline-block;padding:.35rem .85rem;border-radius:999px;background:#ffe45d;color:#714c00;font-weight:900}.hero-copy h1{margin:.45rem 0;font:1000 clamp(3rem,8vw,6.4rem)/.95 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.05em;color:#196eb1;text-shadow:0 4px 0 #fff,0 8px 0 #88daf0}.hero-tagline{margin:.7rem 0;font-size:clamp(1.3rem,3vw,2rem)!important;color:#d83286}.hero-copy p{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:800;line-height:1.5}.game-link{display:inline-flex;align-items:center;justify-content:center;margin-top:1rem;padding:.85rem 1.4rem;border:4px solid #fff;border-radius:20px;background:linear-gradient(#73e2ff 0 17%,#19ace4 20% 72%,#0878b8 75%);box-shadow:0 7px 0 #075c91,0 12px 20px rgba(23,72,111,.24);color:#fff;text-decoration:none;font-weight:1000;text-shadow:0 2px rgba(0,51,94,.3);transition:.2s}.game-link:hover{transform:translateY(-7px) scale(1.03);box-shadow:0 14px 0 #075c91,0 20px 28px rgba(23,72,111,.24)}.game-link--pink{background:linear-gradient(#ff9ccc,#eb4c98 25% 72%,#b62e73 75%);box-shadow:0 7px 0 #96235c,0 12px 20px rgba(23,72,111,.2)}.section-shell{width:min(1240px,92%);margin:0 auto;padding:clamp(3rem,7vw,6rem) 0}.section-heading{max-width:760px;margin:0 auto 2.4rem;text-align:center}.section-heading h2{margin:.55rem 0;font:1000 clamp(2.2rem,5vw,3.7rem)/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:#184f8d}.section-heading p{font-size:1.15rem;font-weight:700;line-height:1.5}.portal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6rem}.portal-card{--accent:#19ace5;grid-column:span 2;display:flex;flex-direction:column;padding:14px 14px 22px;border:6px solid #fff;border-radius:32px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent),white 24%),var(--accent));box-shadow:0 8px 0 color-mix(in srgb,var(--accent),#163e74 38%),var(--shadow);color:#fff;text-align:center;transition:.24s}.portal-card:nth-child(4){grid-column:2/span 2}.portal-card:nth-child(5){grid-column:4/span 2}.portal-card:hover{transform:translateY(-13px)}.portal-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:5px solid #fff;border-radius:22px;box-shadow:0 7px 0 rgba(18,60,100,.3)}.portal-card h3{margin:1rem 0 .35rem;font:1000 1.6rem/1.1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;text-shadow:0 2px rgba(17,58,96,.35)}.portal-card p{margin:.25rem 0;line-height:1.4;font-weight:700}.portal-card .game-link{margin-top:auto;align-self:center}.latest-section{padding-top:1rem}.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}.latest-card{padding:1.3rem;border:5px solid #fff;border-radius:27px;background:linear-gradient(#fff,#e7f9ff);box-shadow:0 7px 0 #72cee8,var(--shadow)}.latest-card span{color:#df3f88;font-weight:900}.latest-card h3{margin:.5rem 0;font-size:1.45rem}.teacher-banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:2rem auto 5rem;width:min(1160px,92%);padding:clamp(1.6rem,4vw,3rem);border:7px solid #fff;border-radius:38px;background:linear-gradient(135deg,#8656d9,#bd62d8 52%,#ec579f);box-shadow:0 10px 0 #5b3ba5,var(--shadow);color:#fff}.teacher-banner h2{margin:.5rem 0;font:1000 clamp(2rem,4vw,3rem)/1.05 "Arial Rounded MT Bold","Trebuchet MS",sans-serif}.teacher-banner p{font-size:1.15rem;font-weight:700}.about-strip{display:flex;align-items:center;gap:1.5rem;width:min(1000px,92%);margin:0 auto 5rem;padding:1.6rem 2rem;border:5px solid #fff;border-radius:30px;background:#fff;box-shadow:0 7px 0 #65cde9,var(--shadow)}.about-icon{display:grid;place-items:center;flex:0 0 90px;height:90px;border:5px solid #fff;border-radius:28px;background:linear-gradient(#ffe760,#ff9f2d);box-shadow:0 6px 0 #d56b18;color:#7b3b00;font-size:1.8rem;font-weight:1000}.about-strip h2{margin:0}.about-strip p{margin:.5rem 0 0;line-height:1.5;font-weight:700}.main-footer{display:grid;grid-template-columns:1fr auto;gap:1rem 3rem;padding:2.5rem clamp(1rem,6vw,6rem);border-top:6px solid #fff;background:linear-gradient(#8be2f5,#52c4e5);color:#164c84}.main-footer strong{font:1000 1.7rem "Arial Rounded MT Bold","Trebuchet MS",sans-serif}.main-footer nav{display:flex;flex-wrap:wrap;gap:1rem}.main-footer a{font-weight:900}.main-footer>p{grid-column:1/-1;margin:0;font-weight:800}.inner-main{min-height:calc(100vh - 86px);padding:5rem 1rem;background:url("library/picrures/main page background.png") center/cover fixed}.inner-panel{width:min(1050px,94%);margin:auto;padding:clamp(1.4rem,4vw,3rem);border:6px solid #fff;border-radius:38px;background:rgba(255,255,255,.93);box-shadow:0 10px 0 #29acd7,var(--shadow)}.inner-panel>header{text-align:center}.inner-panel h1{font:1000 clamp(2.3rem,5vw,4rem)/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:#19518e}.inner-panel>header p{font-size:1.2rem;font-weight:700}.placeholder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1rem;margin:2rem 0}.placeholder-card{padding:1.3rem;border:4px solid #fff;border-radius:24px;background:linear-gradient(145deg,#76ddf5,#319fda);box-shadow:0 6px 0 #1670aa;color:#fff}.placeholder-card:nth-child(3n+2){background:linear-gradient(145deg,#b793f0,#7858d6);box-shadow:0 6px 0 #523a9f}.placeholder-card:nth-child(3n+3){background:linear-gradient(145deg,#ff96c6,#e64d98);box-shadow:0 6px 0 #a92a6a}.placeholder-card h2,.placeholder-card h3{margin:.2rem 0}.article-meta{color:#d83c85;font-weight:900}.back-home{display:flex;justify-content:center}@media(max-width:900px){.site-header{align-items:center}.menu-toggle{display:block}.main-menu{position:absolute;top:calc(100% + 5px);right:1rem;left:1rem;display:none;flex-direction:column;padding:1rem;border:5px solid #fff;border-radius:24px;background:#e8faff;box-shadow:0 9px 0 #4bc2e4,var(--shadow)}.main-menu.open{display:flex}.main-menu a{width:100%;text-align:center}.portal-grid{grid-template-columns:repeat(2,1fr)}.portal-card,.portal-card:nth-child(4),.portal-card:nth-child(5){grid-column:span 1}.latest-grid{grid-template-columns:1fr 1fr}.teacher-banner{align-items:flex-start;flex-direction:column}.main-footer{grid-template-columns:1fr}}@media(max-width:600px){.brand span{font-size:1.05rem}.brand img{width:55px}.hero-main{min-height:620px}.hero-copy{border-radius:30px}.portal-grid,.latest-grid{grid-template-columns:1fr}.teacher-banner{margin-bottom:3rem}.about-strip{align-items:flex-start;flex-direction:column}.main-footer nav{flex-direction:column}.inner-main{padding:2rem .7rem}.inner-panel{border-radius:28px}}
html,body{overflow-x:hidden}.hero-copy h1,.section-heading h2,.portal-card h3,.teacher-banner h2{overflow-wrap:anywhere}@media(max-width:600px){.hero-copy h1{font-size:clamp(2.4rem,13vw,3rem)}.section-heading h2{font-size:clamp(1.9rem,10vw,2.6rem)}.hero-copy{width:94%;padding:1.35rem .9rem}}
.hero-main{position:relative;min-height:0;aspect-ratio:1688/936;padding:0;background:url("pictures/head main.png") center/contain no-repeat #0995e7}.hero-main .hero-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero-art-action{position:absolute;z-index:2;left:35.7%;top:73.8%;width:27.8%;height:10.5%;border-radius:999px}.hero-art-action:focus-visible{outline:6px solid #fff;outline-offset:4px;box-shadow:0 0 0 10px #1268bd}@media(max-width:600px){.hero-main{min-height:0}.hero-art-action{left:33%;top:72.5%;width:34%;height:13%}}
#content{background:url("library/picrures/main page background.png") center top/cover fixed no-repeat}.hero-main{background-image:url("pictures/head main.png");background-color:#0995e7}.portal-card img{aspect-ratio:1/1;object-fit:contain;background:rgba(255,255,255,.18)}
.section-heading p{display:inline-block;margin:.8rem auto 0;padding:.7rem 1.15rem;border:3px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 5px 0 rgba(57,164,201,.48),0 10px 20px rgba(22,72,111,.16);color:#123f79;text-shadow:0 1px 0 #fff;backdrop-filter:blur(5px)}
@media(max-width:600px){.section-heading p{border-radius:22px;padding:.65rem .85rem}}