@font-face{font-family:'BeeBright Sans';src:url('assets/fonts/noto-sans-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'BeeBright Sans';src:url('assets/fonts/noto-sans-bold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}

:root{font-family:'BeeBright Sans',system-ui,sans-serif;color:#343343;background:#fff9ed}*{box-sizing:border-box}body{margin:0}main{max-width:720px;margin:auto;padding:22px 20px 45px}header{display:flex;align-items:center;gap:8px;margin-bottom:18px}header strong{flex:1;font-size:19px}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #eaaa2a;outline-offset:4px}.small{background:white;padding:10px 13px;border-radius:15px;box-shadow:0 3px 12px #40374b08}.welcome,.panel{background:white;border-radius:23px;padding:24px;box-shadow:0 3px 0 #40374b0d,0 8px 20px #40374b06}.welcome{display:flex;gap:18px;align-items:center}.fox{font-size:42px}h1{font-size:24px;margin:0 0 6px}p{color:#797584;line-height:1.6;margin:6px 0}h2{font-size:12px;letter-spacing:1.4px;color:#89808d;text-transform:uppercase;margin:25px 0 10px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tile{background:white;border-radius:20px;text-align:left;padding:18px 15px;border-bottom:5px solid var(--accent,#6486da);box-shadow:0 6px 14px #493b5110;transition:.15s}.tile:hover{transform:translateY(-3px)}.tile span{display:block;font-size:28px;margin-bottom:8px}.tile b{font-size:16px}.tile p{font-size:12px;line-height:1.5}.wide{width:100%;display:flex;align-items:center;gap:18px;--accent:#59a36d}.wide span{margin:0}.muted{font-size:12px;color:#918591;margin-top:22px;text-align:center}.back{background:transparent;padding:0 0 20px;color:#76688e}.primary{background:#7355b4;color:white;border-radius:14px;padding:14px 24px;font-weight:700;margin-top:18px}.primary:disabled{opacity:.45;cursor:default}.progress{height:8px;background:#f0edf4;border-radius:9px;margin:18px 0 26px;overflow:hidden}.progress div{height:100%;background:#9c80d3}.meta{display:flex;justify-content:space-between;color:#8c7e98;font-size:13px}.question{font-size:27px;line-height:1.45;margin:16px 0 24px}.options{display:grid;gap:10px}.option{padding:17px;border:2px solid #eeebf2;border-radius:15px;background:white;text-align:left}.option.selected{border-color:#8d6bc2;background:#f7f1ff}.option.correct{border-color:#68ac7c;background:#edf8ef}.option.wrong{border-color:#dd8b8b;background:#fff0f0}.feedback{padding:16px;border-radius:15px;background:#f6f2fc;margin-top:16px;line-height:1.6}.score{font-size:64px;font-weight:800;color:#7355b4;text-align:center}.center{text-align:center}.lesson{border-bottom:1px solid #eee;padding:16px 0;line-height:1.7}.lesson b{color:#7355b4}.album{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.sticker{background:#faf5ea;border-radius:18px;padding:16px;text-align:center;font-size:37px}.locked{filter:grayscale(1);opacity:.25}input{width:100%;padding:17px;border:2px solid #ded4ee;border-radius:14px;font:inherit;font-size:22px}.review{padding:16px 0;border-bottom:1px solid #eee;line-height:1.6}.tag{font-size:12px;color:#836b98}.balloons .option{border-radius:50%;min-height:100px;text-align:center;background:#f7efff;border-color:#d5c1f0}.balloons{grid-template-columns:repeat(3,1fr)}@media(max-width:550px){main{padding:16px}header strong{font-size:15px}.grid{grid-template-columns:repeat(2,1fr)}.tile{padding:15px}.question{font-size:23px}.panel{padding:20px}.small{padding:9px}.welcome{padding:20px}.album{grid-template-columns:repeat(3,1fr)}}

:root{color:#34433f;background:#f7faf6;font-family:'BeeBright Sans',system-ui,sans-serif}main{max-width:980px;padding:28px 32px 56px}header{padding-bottom:22px;border-bottom:2px solid #e7ede3;margin-bottom:26px}.brand{display:block;font-size:29px;font-weight:900;letter-spacing:-1.5px;color:#58a92c}.brand>span{color:#7bc743}header small{display:block;font-size:10px;letter-spacing:1.7px;color:#8b9788;margin-top:5px}.small{border:2px solid #e7ece2;box-shadow:0 3px 0 #e7ece2;border-radius:14px;font-weight:800;min-width:46px}.welcome{position:relative;overflow:hidden;background:#eafaD8;border:2px solid #d9edc4;border-radius:30px;box-shadow:0 5px 0 #dceccf;padding:36px 36px;gap:32px;flex-direction:row-reverse;justify-content:space-between}.welcome h1{font-size:36px;line-height:1.16;letter-spacing:-1px;color:#365c23;font-weight:900;margin-top:10px}.welcome p{font-size:14px;color:#688653;margin-top:14px}.fox{width:180px;flex-shrink:0;transform:rotate(5deg)}.fox svg{display:block;width:100%;filter:drop-shadow(0 9px 0 #b7d99b55)}.eyebrow{font-size:10px;font-weight:850;letter-spacing:1.7px;color:#67954a}.primary{background:#70c52b;box-shadow:0 5px 0 #4d9e1e;border:0;border-radius:15px;color:#fff;text-transform:uppercase;letter-spacing:.7px;font-size:13px;transition:.15s}.primary:hover{background:#7bd430;transform:translateY(-1px)}.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #4d9e1e}.hero-cta{margin-top:22px;display:inline-flex;gap:36px;align-items:center}.hero-cta span{font-size:21px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:33px 0 15px;gap:10px}.section-heading h2{margin:0;font-size:20px;letter-spacing:-.4px;color:#42533c;text-transform:none;font-weight:850}.section-heading>span{font-size:11px;color:#95a18e}.grid{gap:16px}.tile{position:relative;border:2px solid #e4eadd;border-bottom:5px solid #d8e0d1!important;box-shadow:none;border-radius:22px;padding:20px;transition:.15s}.tile:hover{border-color:#b8d79d!important;background:#fcfff8;transform:translateY(-3px);box-shadow:0 7px 0 #e5eedc}.tile b{font-weight:800;font-size:17px;letter-spacing:-.3px}.tile p{font-size:12px;color:#8a9682;margin-top:7px}.art{width:76px;height:76px;border-radius:23px;background:#edf4ff;display:flex!important;align-items:center;justify-content:center;margin-bottom:15px!important}.art svg{width:65px;height:65px;filter:drop-shadow(0 3px 0 #00000008)}.art-1{background:#f1eaff}.art-2{background:#fff4d9}.art-3{background:#fff6d8}.art-4{background:#fff0f3}.art-5{background:#e6f8f5}.learn-grid .tile{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;padding:13px}.learn-grid .art{width:48px;height:48px;border-radius:15px;margin:0!important}.learn-grid svg{width:43px;height:43px}.learn-grid b{font-size:14px}.wide{background:#edfadf;border-color:#d3e7bf;gap:20px}.wide .art{flex-shrink:0;margin:0!important}.wide b{font-size:21px;color:#4b702e}.wide:after{content:'→';margin-left:auto;font-size:30px;color:#7fa15b}.panel{border:2px solid #e4eadd;box-shadow:0 5px 0 #e5eadf;border-radius:26px;padding:32px}.option{border-color:#e3e9dc;border-bottom-width:5px;font-weight:700;padding:19px}.option.selected{border-color:#96ce5a;background:#f1fbe6;color:#5b8a30}.option.correct{border-color:#7ec446;background:#f0fbe4}.progress{height:14px;background:#e8eedf}.progress div{background:#80cd39;border-radius:12px;border-top:4px solid #a2df68}.feedback{background:#f0f7e9}.score{color:#63b527}.lesson b{color:#63a834}.back{font-weight:750;color:#80916e}.sticker{border:2px solid #e5ecd8;background:#f5faec}.muted{color:#a0aa98}h2{color:#8b9b80}.question{font-weight:800}.meta{color:#8a9a80}.balloons .option:nth-child(2){background:#e7f7ff;border-color:#97c9e5}.balloons .option:nth-child(3){background:#fff1d9;border-color:#ebc577}.balloons .option.correct{border-color:#7ec446;background:#f0fbe4}.balloons .option.wrong{border-color:#dd8b8b;background:#fff0f0}@media(max-width:650px){main{padding:20px 16px 40px}.welcome{padding:25px 20px;gap:4px}.welcome h1{font-size:27px}.welcome p{font-size:12px}.fox{width:112px}.eyebrow{font-size:8px;letter-spacing:1px}.hero-cta{padding:13px 17px;gap:15px}.section-heading h2{font-size:18px}.section-heading>span{font-size:10px;max-width:95px;text-align:right}.tile{padding:17px}.tile b{font-size:16px}.art{width:70px;height:70px}.learn-grid .tile{gap:8px;padding:11px;grid-template-columns:39px 1fr}.learn-grid .art{width:37px;height:40px}.learn-grid svg{width:35px;height:35px}.learn-grid b{font-size:12px}.panel{padding:22px}.brand{font-size:25px}.wide b{font-size:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

:root{color:#291F1E;background:#f5f7f1}.brand,.brand>span{color:#477998}header{border-color:#C4D6B0}.welcome{background:#C4D6B0;border-color:#b0c29d;box-shadow:0 5px 0 #a7bd91}.welcome h1,.section-heading h2,.wide b{color:#291F1E}header small,.eyebrow,.welcome p,p,.tile p,.meta,.back,.tag,h2,.section-heading>span,.muted{color:#665b56}.fox svg{filter:drop-shadow(0 8px 0 #291f1e12)}.primary{background:#F64740;color:#291F1E;box-shadow:0 5px 0 #A3333D}.primary:hover{background:#ff635c}.primary:active{box-shadow:0 1px 0 #A3333D}.small,.tile,.panel{border-color:#d9dfd0}.small{box-shadow:0 3px 0 #d9dfd0}.tile{border-bottom-color:#C4D6B0!important}.tile:hover{border-color:#477998!important;background:#f5f8fa;box-shadow:0 7px 0 #47799820}.art{background:#47799819}.art-1,.art-5{background:#C4D6B050}.art-2,.art-4{background:#F6474019}.art-3{background:#A3333D16}.wide{background:#C4D6B060}.wide:after{color:#477998}.panel{box-shadow:0 5px 0 #C4D6B050}.option{border-color:#d9dfd0}.option.selected{border-color:#477998;background:#47799814;color:#291F1E}.option.correct,.balloons .option.correct{border-color:#93ac7c;background:#C4D6B060}.option.wrong,.balloons .option.wrong{border-color:#A3333D;background:#F6474014}.progress{background:#C4D6B050}.progress div{background:#477998;border-top-color:#7da1b7}.feedback{background:#C4D6B040}.score,.lesson b{color:#477998}.sticker{border-color:#C4D6B0;background:#C4D6B030}input{border-color:#477998;color:#291F1E}button:focus-visible,input:focus-visible{outline:3px solid #477998;outline-offset:4px}.balloons .option{background:#C4D6B040;border-color:#93ac7c}.balloons .option:nth-child(2){background:#47799818;border-color:#477998}.balloons .option:nth-child(3){background:#F6474018;border-color:#F64740}

/* Warm, playful learning world */
:root{color:#344b67;background:#f2f6ff;font-family:'BeeBright Sans',system-ui,sans-serif}body{background:radial-gradient(circle at 104% 76%,#ffce3030 0 140px,transparent 141px),radial-gradient(ellipse at -15% 110%,#4287ff30 0 35%,transparent 35%);min-height:100vh}main{max-width:1160px;padding:28px 36px 70px}header{border:0;margin-bottom:22px;padding-bottom:8px}.brand,.brand>span{color:#ff724b}.brand{font-size:31px}header small{color:#647c96}.small{background:white;border:0;border-radius:22px;box-shadow:0 5px 16px #344b6710;color:#52708d}.welcome{isolation:isolate;min-height:430px;overflow:visible;border:0;border-radius:45px 90px 110px 45px;background:linear-gradient(120deg,#ffa342,#ff9147 60%,#ff774e);box-shadow:0 18px 38px #ff81402b;padding:54px 48px;gap:20px;margin-bottom:55px}.welcome:before{content:'';position:absolute;inset:0;overflow:hidden;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 92% 90%,#ff6252 0 41%,transparent 41.3%),radial-gradient(ellipse at 65% -30%,#ff7951 0 47%,transparent 47.3%)}.welcome:after{content:'';position:absolute;right:24px;top:-18px;width:65px;height:65px;border-radius:50%;background:#ffd32e;box-shadow:-330px 405px 0 -8px #ffd32e;z-index:-1}.welcome h1{font-size:clamp(32px,4.5vw,52px);font-weight:900;letter-spacing:-1.8px;color:white;line-height:1.1}.welcome p{color:#fff9ed;font-size:15px;line-height:1.8;max-width:420px}.eyebrow{color:#fff3d9;letter-spacing:2px;font-size:10px}.fox{width:42%;max-width:385px;transform:rotate(3deg);align-self:center;position:relative}.fox img{display:block;height:auto;width:118%;max-width:none;margin:-45px -8% -45px -10%;filter:drop-shadow(0 16px 12px #b8443328)}.primary{background:#ff714e;color:white;border:0;box-shadow:0 7px 18px #ff714e30;border-radius:30px;letter-spacing:.6px}.primary:hover{background:#f66040;box-shadow:0 9px 23px #ff714e40}.primary:active{transform:translateY(2px);box-shadow:0 3px 8px #ff714e30}.hero-cta{background:white;color:#f37446;border-radius:35px;padding:10px 11px 10px 25px;box-shadow:0 8px 18px #bc5b2820;gap:25px}.hero-cta:hover{background:#fffaf2;color:#e7613d}.hero-cta span{background:#ff6e4e;color:white;width:39px;height:39px;border-radius:50%;display:grid;place-items:center}.section-heading{margin:37px 0 18px}.section-heading h2{font-size:25px;color:#526f8a;font-weight:850}.section-heading>span,.meta,.back,.tag,h2,.muted{color:#7088a3}.grid{gap:20px}.tile{background:white;border:0;border-bottom:0!important;border-radius:28px 28px 28px 9px;padding:24px;box-shadow:0 7px 18px #344b6707}.tile:hover{background:#fff;border-color:transparent!important;box-shadow:0 15px 28px #344b6716;transform:translateY(-4px)}.tile b{color:#526f8a;font-size:18px}.tile p{color:#8295ab}.art{background:#edf4ff;border-radius:22px}.art-1{background:#f0eaff}.art-2{background:#fff4d8}.art-3{background:#fff0de}.art-4{background:#fff0eb}.art-5{background:#e8f6ff}.learn-grid .tile{padding:17px;border-radius:20px}.learn-grid b{font-size:14px}.wide{background:white;border-left:6px solid #ff9c44!important;padding:25px;box-shadow:0 10px 25px #344b6709}.wide b{color:#f47b48}.wide:after{color:#ff7950}.panel{border:0;background:white;border-radius:32px;box-shadow:0 13px 35px #344b670b}.question{color:#344b67}.option{border-color:#e6edf6;border-bottom-width:3px;border-radius:19px;color:#526f8a}.option.selected{border-color:#4389ff;background:#edf4ff;color:#344b67}.option.correct,.balloons .option.correct{border-color:#8fc753;background:#f3fae6}.option.wrong,.balloons .option.wrong{border-color:#ff7156;background:#fff0eb}.progress{background:#eaf0fa}.progress div{background:#4389ff;border-top-color:#78acff}.feedback{background:#fff5e8;color:#526f8a}.score,.lesson b{color:#ff7c48}.sticker{border:0;background:#fff4df}.lesson,.review{border-color:#edf1f7}input{border-color:#dce8fb;color:#344b67}button:focus-visible,input:focus-visible{outline-color:#4389ff}.balloons .option{background:#fff4d8;border-color:#ffd348}.balloons .option:nth-child(2){background:#edf4ff;border-color:#4389ff}.balloons .option:nth-child(3){background:#fff0eb;border-color:#ff7950}.muted{line-height:1.8;margin-top:34px}
@media(max-width:650px){main{padding:20px 16px 45px}.welcome{min-height:360px;padding:30px 23px;border-radius:30px 55px 70px 30px;gap:0;margin-bottom:35px}.welcome h1{font-size:29px;letter-spacing:-1px}.welcome p{font-size:12px}.welcome .fox{width:39%;min-width:115px}.fox img{width:145%;margin-left:-20%;margin-right:-20%}.eyebrow{font-size:8px;letter-spacing:1px}.hero-cta{padding:8px 8px 8px 16px;font-size:10px;gap:12px}.hero-cta span{width:30px;height:30px}.welcome:after{width:45px;height:45px;right:10px;box-shadow:-210px 345px 0 -6px #ffd32e}.section-heading h2{font-size:21px}.tile{padding:19px}.grid{gap:14px}.learn-grid .tile{padding:12px}.panel{padding:23px}.wide b{font-size:18px}.brand{font-size:27px}}
@media(max-width:380px){.welcome{padding:25px 18px}.welcome h1{font-size:25px}.welcome .fox{min-width:95px}.hero-cta{gap:8px}}

/* Translucent warm cards, with circles beneath the surfaces. */
#app{position:relative;isolation:isolate}.grid{position:relative;isolation:isolate;padding:8px 0 12px}.grid:before,.grid:after{content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%}.grid:before{width:190px;height:190px;left:-48px;top:24px;background:linear-gradient(140deg,#ffd453b3,#ff9b4566);box-shadow:0 15px 45px #ffa24a12}.grid:after{width:150px;height:150px;right:-25px;bottom:-22px;background:linear-gradient(140deg,#ff9b4566,#ff6c5266)}.learn-grid:before{width:150px;height:150px;top:-15px;left:22%;background:linear-gradient(140deg,#ffce5377,#ff986366)}.learn-grid:after{width:95px;height:95px;right:10%;bottom:-8px;background:#ff735647}.grid:not(.learn-grid):nth-of-type(2n):before{left:38%;top:35%;width:120px;height:120px;background:#ffd23666}.tile{isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#ffffffa6,#fff7ee78);border:1px solid #ffffffd9!important;border-bottom:1px solid #ffffffd9!important;border-radius:26px;box-shadow:0 9px 28px #c77d4710,inset 0 1px 0 #ffffffc9;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:transform .2s,box-shadow .2s,background .2s}.tile:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:120px;height:120px;border-radius:50%;right:-48px;top:-48px;background:radial-gradient(circle at 35% 35%,#ffbc6040,#ff80521c)}.tile:nth-child(2n):before{width:95px;height:95px;top:auto;bottom:-40px;right:-20px;background:#ffce3833}.tile:hover{background:linear-gradient(135deg,#ffffffd4,#fff4e8b8);border-color:#fff!important;box-shadow:0 16px 34px #cf7e491a,inset 0 1px 0 white}.tile b{color:#664f49}.tile p{color:#786c69}.art,.art-1,.art-2,.art-3,.art-4,.art-5{background:linear-gradient(140deg,#ffffffb3,#ffb87338);border:1px solid #ffffffb3;box-shadow:0 5px 12px #ff9a4410}.art svg{filter:drop-shadow(0 3px 2px #b46b2c12)}.learn-grid .tile{background:linear-gradient(135deg,#ffffff9e,#fff2e273);border-radius:21px}.learn-grid .tile:hover{background:#ffffffcc}.section-heading h2{color:#695249}.section-heading>span{color:#8a746b}.wide{background:linear-gradient(115deg,#fffaf0b3,#ffd7b080);border:1px solid #fff!important;border-radius:27px;box-shadow:0 10px 30px #cb814514}.wide:before{width:230px;height:230px;right:80px;top:-130px;background:#ffb14a38}.wide:after{color:#f87b4c}.wide b{color:#df6e41}.wide p{color:#786c69}.muted{color:#88776f}body{background:radial-gradient(circle at 99% 63%,#ff9b4433 0 170px,transparent 171px),radial-gradient(circle at 1% 91%,#ff735626 0 190px,transparent 191px),linear-gradient(160deg,#f4f7ff 20%,#fff6ee 65%,#fff2df);overflow-x:hidden}.grid.balloons:before,.grid.balloons:after{display:none}
@media(max-width:650px){.grid{gap:14px}.grid:before{width:140px;height:140px;left:-22px}.grid:after{width:115px;height:115px;right:-10px}.tile{border-radius:23px}.learn-grid .tile{border-radius:19px}.wide:before{right:10px}.section-heading h2{font-size:21px}}
@media(prefers-reduced-transparency:reduce){.tile,.learn-grid .tile,.wide{background:#fff8ef;backdrop-filter:none;-webkit-backdrop-filter:none}}

a{color:#c65335}.small{text-decoration:none;display:inline-block}.hub-back{display:inline-block;text-decoration:none}.header-link{display:inline-block;text-decoration:none}.header-link:focus-visible{outline:3px solid #4389ff;outline-offset:5px;border-radius:8px}.header-link .brand{font-size:31px}.scope{margin-top:35px;background:#ffffff80;padding:18px 22px;border:1px solid white;border-radius:20px;color:#796c66;font-size:13px;line-height:1.8}.scope summary{cursor:pointer;font-weight:700;color:#695249}.story p{color:#526478;margin-top:8px}.result-icon{font-size:54px}.reward{font-size:42px}.question:focus,h1:focus{outline:none}.balloons .option{border-radius:45% 45% 40% 40%;line-height:1.4;min-height:115px;padding:20px 12px;font-size:16px}.subject-grid{scroll-margin-top:28px}.subject-card{display:flex;flex-direction:column;text-decoration:none;min-height:290px;padding:30px}.subject-card .subject-icon{display:grid;place-items:center;width:88px;height:88px;font-size:44px;background:linear-gradient(135deg,#ffffffbd,#ffca7c42);border:1px solid #ffffffde;border-radius:28px;margin-bottom:25px;box-shadow:0 8px 20px #ff9b4417;transition:transform .2s}.subject-card:hover .subject-icon{transform:rotate(-5deg) scale(1.05)}.subject-card b{font-size:23px}.subject-card p{font-size:14px;line-height:1.7;margin:9px 0 20px}.subject-card .card-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:#c56442;font-weight:750;font-size:12px}.card-footer .arrow{font-size:26px;margin:0}.hub-description{max-width:610px;line-height:1.8;font-size:15px;color:#81736c}.hub-mascot{animation:beeFloat 5s ease-in-out infinite;will-change:transform}.hub-hero:after{animation:circleFloat 7s ease-in-out infinite}.hub-note{display:flex;flex-wrap:wrap;gap:12px;margin:27px 0 10px}.hub-note span{font-size:12px;color:#79695e;background:#ffffff80;border:1px solid #fff;border-radius:25px;padding:11px 16px}.hub-hero .hero-cta{text-decoration:none;font-weight:750;text-transform:uppercase;font-size:12px;display:inline-flex;align-items:center}.hub-hero .hero-cta span{font-size:22px}.hub-total{font-size:13px!important;white-space:nowrap}.hub-grid-title{margin-top:30px}.hub-hero h1{max-width:510px}.subject-subtitle{font-size:12px;color:#9c6551;margin-bottom:12px}.balloons{grid-template-columns:repeat(3,minmax(0,1fr))}.option{overflow-wrap:anywhere}header strong{min-width:0}header small{letter-spacing:1px}.scope a{overflow-wrap:anywhere}
@keyframes beeFloat{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-11px) rotate(-1deg)}}@keyframes circleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(max-width:700px){.subject-grid{grid-template-columns:1fr}.subject-card{min-height:0;padding:24px}.subject-card .subject-icon{width:70px;height:70px;font-size:35px;margin-bottom:17px}.subject-card b{font-size:23px}.subject-card p{margin-bottom:15px}.subject-card .card-footer{margin-top:8px}.hub-hero{min-height:370px}.hub-total{padding:9px!important}.header-link .brand{font-size:26px}.balloons{grid-template-columns:1fr}.balloons .option{border-radius:50px;min-height:75px}.hub-note{gap:8px}.hub-note span{font-size:11px;padding:9px 12px}}
@media(max-width:420px){header{gap:6px}.header-link .brand{font-size:24px}header small{font-size:8px;letter-spacing:.5px}.small{min-width:35px;padding:8px}.hub-hero h1{font-size:27px}.hub-hero .fox{min-width:100px}.hub-hero .eyebrow{font-size:7px}}
@media(prefers-reduced-motion:reduce){.hub-mascot,.hub-hero:after{animation:none;will-change:auto}html{scroll-behavior:auto}}
.subject-card .card-footer>span{font-size:12px;display:inline;margin:0;line-height:1.6}.subject-card .card-footer>.arrow{font-size:26px;flex-shrink:0}.subject-card .card-footer{gap:15px}

html,body,button,input,select,textarea{font-family:'BeeBright Sans',system-ui,sans-serif} .brand{letter-spacing:-1.3px}

.subject-card .subject-icon-3d{width:100%;height:195px;background:none;border:0;box-shadow:none;border-radius:0;margin:0 0 20px;display:grid;place-items:center}.subject-icon-3d img{display:block;width:215px;height:215px;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 10px #ad6f3820);transition:transform .25s}.subject-card:hover .subject-icon-3d{transform:none}.subject-card:hover .subject-icon-3d img{transform:translateY(-5px) rotate(-3deg)}.subject-card{min-height:390px}.subject-card .subject-subtitle{font-size:10px;letter-spacing:.6px}.subject-card .subject-icon-3d{font-size:0}
@media(max-width:700px){.subject-card .subject-icon-3d{height:180px;margin-bottom:14px}.subject-icon-3d img{width:200px;height:200px}.subject-card{min-height:0}}
@media(prefers-reduced-motion:reduce){.subject-card:hover .subject-icon-3d img{transform:none}}

header .brand-slogan{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.6;margin-top:5px;color:#7b706b;font-weight:400}.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;scroll-margin-top:25px}.grade-card{display:flex;align-items:center;gap:28px;text-decoration:none;padding:33px;min-height:260px}.grade-card .grade-number{flex-shrink:0;position:relative;width:100px;height:125px;display:grid;place-items:center;font-size:100px;font-weight:900;line-height:1;color:#ff9147;text-shadow:0 3px 0 #ffe3af,0 8px 0 #ed6c3a,0 15px 14px #b2563a28;transform:rotate(-8deg);margin:0}.grade-card .grade-number>span{position:absolute;bottom:-10px;right:-6px;color:#477ef5;font-size:17px;letter-spacing:1px;font-weight:900;background:#ffffffae;padding:6px 9px;border-radius:12px;box-shadow:0 3px 10px #ff9b441c;text-shadow:none;margin:0;transform:rotate(10deg)}.grade-card .grade-number-four{color:#4e8cff;text-shadow:0 3px 0 #d2e7ff,0 8px 0 #3762cb,0 15px 14px #4269a928}.grade-card h2{color:#664f49;text-transform:none;font-size:25px;letter-spacing:-.5px;margin:6px 0 10px}.grade-card p{font-size:12px;line-height:1.8}.grade-card .grade-description{margin-top:12px;font-size:13px}.grade-card .grade-action{display:flex;align-items:center;gap:20px;color:#c56442;font-size:12px;font-weight:700;margin:20px 0 0}.grade-card .grade-action>span{font-size:24px;margin:0}.grade-card .subject-subtitle{font-size:9px;letter-spacing:1px}.grade-card:hover .grade-number{transform:rotate(-3deg) translateY(-3px)}
@media(max-width:900px){.grade-card{padding:25px;gap:20px}.grade-card .grade-number{width:78px;font-size:85px}.grade-card h2{font-size:23px}}
@media(max-width:700px){.grade-grid{grid-template-columns:1fr;gap:20px}.grade-card{padding:27px;gap:25px;min-height:235px}.grade-card .grade-number{width:88px;font-size:95px}.grade-card h2{font-size:24px}header .brand-slogan{font-size:10px;max-width:275px}}
@media(max-width:420px){header .brand-slogan{font-size:9px;max-width:220px}.grade-card{gap:20px;padding:22px}.grade-card .grade-number{width:65px;font-size:78px}.grade-card h2{font-size:22px}}
.profile-open{overflow:hidden}.profile-overlay{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 14% 20%,#ffb84958,transparent 33%),radial-gradient(circle at 90% 80%,#ff795052,transparent 35%),#f5f7fff2;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow-y:auto;display:flex;align-items:center;align-items:safe center;justify-content:center;padding:35px 20px;overscroll-behavior:contain}.profile-panel{position:relative;width:100%;max-width:520px;background:linear-gradient(140deg,#ffffffed,#fff3e8e8);border:1px solid white;border-radius:35px;padding:30px 35px;box-shadow:0 25px 75px #9c684025;text-align:center}.profile-intro{position:relative}.profile-bee{width:98px;height:118px;object-fit:contain;display:block;margin:0 auto 10px;filter:drop-shadow(0 7px 8px #ba6d3820)}.profile-intro .brand{font-size:29px}.profile-slogan{font-size:10px;color:#85746b}.profile-panel h1{color:#674e45;font-size:26px;margin:22px 0 10px;letter-spacing:-.7px}.profile-panel>p{font-size:13px;line-height:1.8;color:#7a6b64}.profile-form{text-align:left;margin-top:24px}.profile-form label{display:block;font-size:13px;font-weight:700;color:#6a5147;margin-bottom:8px}.profile-form input{border:1px solid #eed4be;background:#ffffffd9;border-radius:17px;padding:15px 17px;font-size:17px;color:#674e45}.profile-name-hint{font-size:11px;color:#88776d;margin-top:7px}.profile-form .primary{width:100%;font-size:12px;padding:16px 20px;margin-top:15px}.profile-error{color:#ae3933;font-size:12px;margin-top:8px}.profile-list{display:grid;gap:9px;margin:23px 0 0;max-height:245px;overflow-y:auto;padding:3px}.profile-choice{display:flex;align-items:center;gap:14px;background:#ffffffb5;border:1px solid white;border-radius:20px;padding:12px 15px;text-align:left;width:100%;transition:background .15s,transform .15s}.profile-choice:hover{background:#fff0da;transform:translateY(-1px)}.profile-avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ffb94e,#ff7c52);color:white;display:grid;place-items:center;font-weight:700;font-size:22px;flex-shrink:0}.profile-choice-copy{flex:1;min-width:0}.profile-choice b{display:block;font-size:15px;overflow-wrap:anywhere;color:#674e45}.profile-choice small{display:block;font-size:10px;color:#88746a;margin-top:4px}.profile-choice-arrow{font-size:21px;color:#e67a49}.profile-panel .profile-local-note{font-size:10px;color:#947f72;margin:23px 0 0;line-height:1.8}.profile-close{position:absolute;right:16px;top:16px;background:#ffffffc9;border-radius:50%;width:32px;height:32px;color:#806b60}.profile-switch{display:flex;align-items:center;gap:8px;max-width:160px;color:#735c50;min-height:40px}.profile-switch-avatar{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#ff9a50;color:white;font-size:12px;flex-shrink:0}.profile-switch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}header{flex-wrap:wrap}header strong{flex-basis:40%}
@media(max-width:650px){.profile-overlay{padding:18px 12px}.profile-panel{padding:25px 23px;border-radius:28px}.profile-panel h1{font-size:23px}.profile-switch{max-width:125px;gap:5px;padding:8px 10px}.profile-switch-name{font-size:11px}.profile-bee{width:80px;height:95px}header strong{flex-basis:55%}.profile-choice small{font-size:9px}.profile-list{max-height:210px}}
.saved-best{font-size:14px;text-align:center;background:#fff7e8b3;border:1px solid white;padding:17px 20px;border-radius:20px;margin-top:25px;color:#88633f}
/* One scout-sticker family throughout every grade and subject. */
.scout-sticker{width:100px;height:100px;object-fit:contain;display:inline-block;vertical-align:middle;flex-shrink:0}.art,.art-1,.art-2,.art-3,.art-4,.art-5{width:90px;height:90px;border:0;background:none;box-shadow:none;border-radius:0}.art>.scout-sticker{width:90px;height:90px;filter:none}.learn-grid .art{width:46px;height:46px;background:none;border:0;border-radius:0}.learn-grid .art>.scout-sticker{width:46px;height:46px}.learn-grid .tile{grid-template-columns:46px 1fr;gap:12px}.subject-card .subject-icon-3d{height:195px;margin-bottom:20px}.subject-icon-3d img{width:200px;height:200px;filter:none;transform:rotate(-5deg)}.subject-card:nth-child(2) .subject-icon-3d img{transform:rotate(4deg)}.subject-card:nth-child(3) .subject-icon-3d img{transform:rotate(-3deg)}.subject-card:hover .subject-icon-3d img{transform:translateY(-5px) rotate(0)}.inline-sticker{width:24px;height:24px;vertical-align:-6px;margin:0 2px;object-fit:contain}.small>.inline-sticker{width:26px;height:26px;vertical-align:middle}h1>.scout-sticker{width:48px;height:48px;vertical-align:-12px;margin-right:6px}.test-heading{display:flex;align-items:center;gap:18px;margin-bottom:8px}.test-heading>.scout-sticker{width:64px;height:64px;transform:rotate(-5deg)}.test-heading .meta{flex:1;gap:15px}.test-heading+.progress{margin-top:12px}.result-icon>.scout-sticker{width:125px;height:125px}.reward>.scout-sticker{width:85px;height:85px}.album .sticker{background:transparent;border:0;padding:12px;box-shadow:none;min-height:105px}.album .sticker>.scout-sticker{width:100%;height:95px}.album .locked{filter:grayscale(.7);opacity:.4}.saved-best>.inline-sticker{width:32px;height:32px;vertical-align:-9px}.grade-card .grade-number{width:100px;height:120px;transform:rotate(-7deg);text-shadow:none}.grade-number>.scout-sticker{width:112px;height:112px;filter:drop-shadow(0 4px 3px #68442c18)}.profile-choice small .inline-sticker{width:17px;height:17px;vertical-align:-4px}.profile-switch-avatar{border:2px solid white;box-shadow:0 2px 3px #7a4e3912}#stars,#hub-stars{white-space:nowrap}.sticker img{pointer-events:none}
@media(max-width:650px){.art,.art>.scout-sticker{width:78px;height:78px}.learn-grid .tile{grid-template-columns:39px 1fr;gap:9px}.learn-grid .art,.learn-grid .art>.scout-sticker{width:39px;height:39px}.subject-card .subject-icon-3d{height:185px}.subject-icon-3d img{width:190px;height:190px}.test-heading{gap:12px}.test-heading>.scout-sticker{width:54px;height:54px}.meta{font-size:12px}.grade-card .grade-number{width:76px}.grade-number>.scout-sticker{width:90px;height:90px}.album .sticker{padding:5px;min-height:80px}.album .sticker>.scout-sticker{height:80px}.profile-overlay{min-height:100vh;min-height:100dvh}.profile-panel{margin:auto 0}.profile-form input{font-size:17px}}

/* Seamless, understated contour-line background, beneath the content. */
body{position:relative;isolation:isolate}body:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/topographic-pattern.svg');background-repeat:repeat;background-size:700px 700px} @media(max-width:650px){body:before{background-size:500px 500px}}

/* Grade two: airy baby blue and turquoise against the warm BeeBright world. */
.grade-card[href="razred-2.html"]{background:linear-gradient(140deg,#f4fcffd9,#d7f3f180);box-shadow:0 10px 30px #4c9eb814,inset 0 1px 0 #fff}.grade-card[href="razred-2.html"]:before{background:#a0dce34d}.grade-card[href="razred-2.html"] h2{color:#39798b}.grade-card[href="razred-2.html"] .subject-subtitle,.grade-card[href="razred-2.html"] .grade-action{color:#438c9c}.grade-card[href="razred-2.html"]:hover{background:linear-gradient(140deg,#ffffffeb,#d9f4f2bc)}body[data-grade="2"] .tile:before{background:radial-gradient(circle at 35% 35%,#9ddce544,#bce7f41c)}body[data-grade="2"] .tile:nth-child(2n):before{background:#9edbd138}body[data-grade="2"] .subject-card .subject-subtitle,body[data-grade="2"] .subject-card .card-footer{color:#438697}body[data-grade="2"] .subject-card b{color:#397485}body[data-grade="2"] .subject-card:hover{box-shadow:0 16px 34px #4c9eb81a}body[data-grade="2"] .subject-grid:before{background:linear-gradient(140deg,#bce7f480,#93d4e34d)}body[data-grade="2"] .subject-grid:after{background:linear-gradient(140deg,#93d4e360,#9edbd160)}

/* Persistent script selector, also available before entering a profile. */
.script-switch{display:inline-flex;gap:3px;padding:4px;background:#fff8;border:1px solid #ff9b6440;border-radius:24px;flex-shrink:0}.script-switch button{font:inherit;font-size:12px;font-weight:700;line-height:1.4;padding:8px 11px;border:0;border-radius:20px;background:transparent;color:#526f8a;cursor:pointer}.script-switch button[aria-pressed="true"]{background:#ff7945;color:white;box-shadow:0 3px 9px #ff79452b}.script-switch button:focus-visible{outline:3px solid #00bdd6;outline-offset:2px}.profile-panel>.script-switch{display:flex;width:max-content;margin:0 0 15px auto}header{flex-wrap:wrap;gap:10px}body[data-grade="2"] .script-switch button[aria-pressed="true"]{background:#009fb9}@media(max-width:480px){header>.script-switch{margin-left:auto}.script-switch button{padding:8px 9px;min-height:36px}}
/* Stronger heading hierarchy; use knGreed when installed, with Serbian-safe fallback. */
@font-face{font-family:BeeBrightHeading;src:local('knGreed Black'),local('knGreed-Black');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:BeeBrightHeading;src:local('knGreed Bold'),local('knGreed-Bold');font-weight:700;font-style:normal;font-display:swap}
h1,h2,h3,.tile b,.subject-subtitle,.section-heading>span,.eyebrow,.tag{font-family:BeeBrightHeading,'Noto Sans',sans-serif}h1,.welcome h1{font-weight:900;letter-spacing:-.035em}h2,h3,.tile b,.section-heading h2{font-weight:900;letter-spacing:-.025em}.subject-subtitle,.section-heading>span,.eyebrow,.tag{font-weight:700}.profile-panel h1{font-weight:900}

/* Focused test header and persistent mobile action: long stories remain scrollable. */
.quiz-header-back{display:none}.quiz-active #album,.quiz-active header>.script-switch,.quiz-active header>.profile-switch{display:none!important}.quiz-active header .brand-slogan{display:none}.quiz-active #app>.back{display:none}.quiz-active .quiz-header-back:not([hidden]){display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;background:#ffffffb8;color:#52708d;border:1px solid #ffb57c50;border-radius:14px;font-size:26px;line-height:1;cursor:pointer}.quiz-active header{flex-wrap:nowrap;gap:10px;margin-bottom:14px;padding-bottom:0}.quiz-active header strong{flex:1 1 auto;min-width:0}.quiz-active header .brand{font-size:27px}.quiz-active #stars{flex:0 0 auto;min-width:0;white-space:nowrap}.quiz-actions{margin-top:16px}.quiz-actions #check{margin-top:0}
@media(max-width:650px){
 body.quiz-active main{padding:10px 12px calc(94px + env(safe-area-inset-bottom,0px));max-width:650px}
 .quiz-active header{gap:8px;margin-bottom:10px;height:40px}.quiz-active header .brand{font-size:24px;letter-spacing:-1px}.quiz-active #stars{font-size:12px;padding:7px 9px}.quiz-active #stars .scout-sticker{width:21px;height:21px}
 .quiz-active .question-panel{padding:16px;border-radius:24px}.quiz-active .test-heading{gap:9px;align-items:center}.quiz-active .test-heading>.scout-sticker{width:42px;height:42px}.quiz-active .test-heading .meta{font-size:12px;gap:8px;line-height:1.35}.quiz-active .progress{height:8px;margin:10px 0 14px}.quiz-active .progress div{border-top-width:2px}
 .quiz-active .question{font-size:clamp(19px,5.2vw,23px);line-height:1.3;margin:10px 0 16px;letter-spacing:-.02em;overflow-wrap:anywhere}
 .quiz-active .options{gap:8px}.quiz-active .option{font-size:16px;line-height:1.35;padding:11px 13px;min-height:46px;border-radius:14px;border-bottom-width:2px}.quiz-active .balloons .option{min-height:76px;padding:10px 8px;border-radius:28px}
 .quiz-active .feedback{font-size:14px;line-height:1.45;padding:11px 12px;margin-top:12px}.quiz-active .feedback p{font-size:inherit;line-height:inherit}.quiz-active label{font-size:13px}.quiz-active input{font-size:18px;padding:12px;margin-top:6px}
 .quiz-active .quiz-actions{position:fixed;z-index:50;bottom:0;left:0;right:0;display:flex;justify-content:center;margin:0;padding:10px 16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#fffaf5f5;border-top:1px solid #ffd2b6;box-shadow:0 -5px 20px #344b670b;backdrop-filter:blur(12px)}
 .quiz-active .quiz-actions #check{width:100%;max-width:594px;min-height:48px;margin:0;padding:13px 18px;font-size:13px;line-height:1.4;border-radius:25px}.quiz-active .quiz-actions #check:disabled{opacity:1;background:#eddfd4;color:#74675d;box-shadow:none}
}
@media(max-width:650px) and (max-height:700px){.quiz-active .question-panel{padding:13px}.quiz-active .test-heading>.scout-sticker{width:32px;height:32px}.quiz-active .progress{margin:8px 0 10px}.quiz-active .question{font-size:19px;margin:8px 0 12px}.quiz-active .option{padding:9px 12px;min-height:44px}.quiz-active .options{gap:7px}}

.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}h1,h2,h3,.tile b,.subject-subtitle,.section-heading>span,.eyebrow,.tag{font-family:BeeBrightHeading,'BeeBright Sans',sans-serif}@media(max-width:650px){.subject-grid{grid-template-columns:1fr}}

/* Four subjects at a glance, with a small bee instead of the grade hero. */
.subject-picker main{max-width:880px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:22px 28px 30px}.subject-picker header{flex-shrink:0;margin-bottom:12px}.subject-picker #app{display:flex;flex-direction:column;flex:1;min-height:0}.subject-picker-intro{flex-shrink:0}.subject-picker .hub-back{padding:6px 0;font-size:12px;margin:0}.subject-picker-heading{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 24px}.picker-bee{width:60px;height:72px;object-fit:contain;filter:drop-shadow(0 5px 5px #b76a3520)}.subject-picker-heading h1{font-size:30px;line-height:1.2;margin:0;color:#526f8a}.subject-picker-heading p{font-size:14px;line-height:1.4;margin:4px 0 0}.subject-picker .subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-width:720px;margin:auto;flex:0 1 auto}.subject-picker .subject-card{min-width:0;min-height:0;align-items:center;text-align:center;padding:20px;border-radius:26px}.subject-picker .subject-card .subject-icon-3d{height:126px;margin:0 0 10px;width:100%;flex-shrink:0}.subject-picker .subject-icon-3d img{width:126px;height:126px;max-width:100%}.subject-picker .subject-card b{font-size:21px;line-height:1.3;display:flex;align-items:center;justify-content:center;min-height:28px}.subject-picker .subject-card .card-footer{width:100%;gap:6px;margin-top:12px;justify-content:center}.subject-picker .card-footer>span{font-size:11px;line-height:1.35}.subject-picker .card-footer>.arrow{display:none}
@media(max-width:650px){
 .subject-picker main{height:100vh;height:100svh;min-height:480px;padding:12px 14px;padding:12px 14px max(12px,env(safe-area-inset-bottom,0px))}.subject-picker header{flex-wrap:nowrap;gap:7px;padding-bottom:0;margin-bottom:8px}.subject-picker header strong{flex:1 1 auto;min-width:0}.subject-picker header .brand{font-size:24px;line-height:1.2}.subject-picker header .brand-slogan{font-size:9px;line-height:1.4;letter-spacing:0;max-width:210px;white-space:normal;margin-top:3px}.subject-picker .hub-total{padding:7px!important;font-size:11px!important;min-width:0}.subject-picker .hub-total .inline-sticker{width:20px;height:20px}.subject-picker .profile-switch{min-width:36px;width:36px;height:36px;min-height:36px;max-width:36px;padding:6px;justify-content:center}.subject-picker .profile-switch-name{display:none}.subject-picker .profile-switch-avatar{flex-shrink:0}.subject-picker .hub-back{font-size:11px;min-height:30px;display:inline-flex;align-items:center;padding:4px 0}.subject-picker-heading{gap:10px;margin:3px 0 12px}.picker-bee{width:43px;height:52px}.subject-picker-heading h1{font-size:23px}.subject-picker-heading p{font-size:12px;margin-top:2px}
 .subject-picker .subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;flex:1;min-height:0;max-height:480px;margin:auto 0}.subject-picker .subject-card{padding:12px 8px;justify-content:center;border-radius:22px;overflow:hidden}.subject-picker .subject-card .subject-icon-3d{height:100px;height:clamp(62px,18svh,125px);margin-bottom:8px}.subject-picker .subject-icon-3d img{width:auto;height:100%;max-width:100%}.subject-picker .subject-card b{font-size:clamp(14px,4vw,18px);line-height:1.2;min-height:36px;max-width:100%;overflow-wrap:normal}.subject-picker .subject-card .card-footer{margin-top:7px}.subject-picker .card-footer>span{font-size:10px;line-height:1.3}
}
@media(max-width:650px) and (max-height:600px){.subject-picker main{padding-top:8px;padding-bottom:8px}.subject-picker-heading{margin-bottom:8px}.picker-bee{width:35px;height:42px}.subject-picker .subject-grid{gap:9px}.subject-picker .subject-card{padding:9px 7px}.subject-picker .subject-card .subject-icon-3d{height:72px;height:clamp(50px,15svh,84px);margin-bottom:5px}.subject-picker .subject-card .card-footer{margin-top:4px}}
@media(max-height:480px) and (min-width:480px){.subject-picker main{height:auto;min-height:100vh;min-height:100svh;padding:8px 14px}.subject-picker-heading{margin:0 0 8px}.subject-picker .subject-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;max-width:none;flex:0 0 auto;gap:10px}.subject-picker .subject-card{padding:10px 7px}.subject-picker .subject-card .subject-icon-3d{height:64px;margin-bottom:6px}.subject-picker .subject-icon-3d img{width:auto;height:64px}.subject-picker .subject-card b{font-size:14px;min-height:34px}.subject-picker .card-footer>span{font-size:9px}}

/* Fall back from newer sizing functions without hiding any subject cards. */
.subject-picker .subject-card b{font-size:18px}.subject-picker .subject-icon-3d img{width:126px;object-fit:contain}@media(max-width:650px){.subject-picker .subject-icon-3d img{width:100px;max-height:100%}.quiz-active .question{font-size:20px}}@supports not (gap:1px){.subject-picker header>*+*{margin-left:7px}.subject-picker-heading>div{margin-left:10px}.quiz-active header>*+*{margin-left:8px}}

.subject-picker header,.quiz-active header{gap:0}.subject-picker header>*+*,.quiz-active header>*+*{margin-left:8px}.subject-picker-heading{gap:0}.subject-picker-heading>div{margin-left:12px}

/* Soft profile selection feedback instead of the browser's blue corner outline. */
.profile-choice{-webkit-tap-highlight-color:transparent;outline:none}.profile-choice:focus{outline:none;box-shadow:inset 0 0 0 2px #ffb77b;background:#fff1df}.profile-choice:focus-visible{outline:2px solid #e7773d;outline-offset:2px;box-shadow:inset 0 0 0 1px #ffb77b}.profile-choice:active{transform:none;background:#ffe9d2}
/* A compact grade home; both choices remain visible together. */
.grade-picker main{max-width:960px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:18px 28px 20px}.grade-picker header{margin-bottom:14px;flex-wrap:nowrap;flex-shrink:0}.grade-picker header strong{flex:1 1 auto}.grade-picker #app{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0}.grade-picker .hub-hero{flex-shrink:0;min-height:0;height:220px;padding:24px 32px;margin:0 0 20px;border-radius:30px 60px 65px 30px;overflow:hidden}.grade-picker .hub-hero:after{width:40px;height:40px;top:12px;right:12px;box-shadow:none}.grade-picker .hub-hero .fox{width:155px;min-width:0;max-width:30%;transform:none}.grade-picker .hub-hero .fox img{width:auto;height:190px;max-width:100%;object-fit:contain;margin:0 auto}.grade-picker .hub-hero h1{font-size:36px;line-height:1.12;margin-top:6px}.grade-picker .hub-hero p{font-size:13px;line-height:1.45;margin-top:10px}.grade-picker .hub-hero .eyebrow{font-size:9px;letter-spacing:1px}.grade-picker .section-heading{flex-shrink:0;margin:0 0 12px}.grade-picker .section-heading h2{font-size:21px}.grade-picker .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex-shrink:0}.grade-picker .grade-card{padding:20px;gap:15px;min-height:170px;border-radius:24px;min-width:0}.grade-picker .grade-card .grade-number{width:65px;height:80px}.grade-picker .grade-number>.scout-sticker{width:75px;height:75px}.grade-picker .grade-card h2{font-size:23px;margin:4px 0 7px}.grade-picker .grade-card p{font-size:11px;line-height:1.5}.grade-picker .grade-card .subject-subtitle{font-size:8px;line-height:1.4;margin-bottom:5px;letter-spacing:.5px}.grade-picker .grade-card .grade-action{margin-top:10px;gap:10px;font-size:11px}.grade-picker .muted{font-size:10px;line-height:1.4;margin:12px 0 0;flex-shrink:0}
@media(max-width:650px){
 .grade-picker main{padding:10px 14px 12px;height:100vh;height:100svh;min-height:480px}.grade-picker header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 8px;margin-bottom:8px;padding:0}.grade-picker header strong{grid-column:1;grid-row:1}.grade-picker header .brand{font-size:24px;line-height:1.2}.grade-picker header .brand-slogan{font-size:9px;line-height:1.4;max-width:235px;margin-top:3px}.grade-picker header>.profile-switch{grid-column:2;grid-row:1;max-width:105px;padding:7px;min-height:36px;margin:0}.grade-picker header>.script-switch{grid-column:1/-1;grid-row:2;justify-self:end;margin:0;padding:3px}.grade-picker .script-switch button{min-height:32px;padding:6px 10px;font-size:11px}.grade-picker #app{justify-content:center}.grade-picker .hub-hero{height:160px;padding:18px 20px;border-radius:25px 45px 50px 25px;gap:10px;margin-bottom:14px}.grade-picker .hub-hero .fox{width:100px;min-width:0;max-width:32%;flex-shrink:1}.grade-picker .hub-hero .fox img{height:130px;width:100%;max-width:100%;margin:0}.grade-picker .hub-hero h1{font-size:27px;line-height:1.1;letter-spacing:-1px;margin-top:5px}.grade-picker .hub-hero p{font-size:11px;line-height:1.4;margin-top:7px;max-width:185px}.grade-picker .hub-hero .eyebrow{font-size:7px;letter-spacing:.5px}.grade-picker .hub-hero:after{width:25px;height:25px;right:8px;top:8px}.grade-picker .section-heading{margin-bottom:9px}.grade-picker .section-heading h2{font-size:18px}.grade-picker .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grade-picker .grade-card{flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 9px;min-height:0}.grade-picker .grade-card .grade-number{width:58px;height:60px;margin:0 auto 3px}.grade-picker .grade-number>.scout-sticker{width:62px;height:62px}.grade-picker .grade-card h2{font-size:18px;line-height:1.2;margin:3px 0 6px}.grade-picker .grade-card .subject-subtitle{display:none}.grade-picker .grade-card p{font-size:10px;line-height:1.4;margin:0;min-height:42px}.grade-picker .grade-card .grade-action{justify-content:center;gap:7px;margin-top:7px;font-size:10px;line-height:1.4}.grade-picker .grade-action>span{font-size:20px}.grade-picker .muted{font-size:9px;margin-top:9px}
}
@media(max-width:650px) and (max-height:620px){.grade-picker .hub-hero{height:130px;padding:13px 16px;margin-bottom:10px}.grade-picker .hub-hero h1{font-size:24px}.grade-picker .hub-hero .fox img{height:105px}.grade-picker .grade-card{padding:9px 7px}.grade-picker .grade-card .grade-number{height:48px}.grade-picker .grade-number>.scout-sticker{width:52px;height:52px}.grade-picker .grade-card h2{font-size:17px}.grade-picker .grade-card .grade-action{margin-top:4px}.grade-picker .muted{margin-top:6px}}
@media(max-height:480px) and (min-width:480px){.grade-picker main{height:auto;min-height:100vh;min-height:100svh;padding:8px 16px}.grade-picker header{display:flex;flex-wrap:nowrap;margin-bottom:8px}.grade-picker header>.profile-switch{margin-left:8px}.grade-picker #app{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 18px;align-items:center}.grade-picker .hub-hero{grid-column:1;grid-row:1/4;height:180px;margin:0;padding:14px;gap:4px}.grade-picker .hub-hero h1{font-size:23px}.grade-picker .hub-hero .fox{max-width:28%}.grade-picker .hub-hero .fox img{height:85px}.grade-picker .section-heading{grid-column:2;grid-row:1;margin:0}.grade-picker .grade-grid{grid-column:2;grid-row:2}.grade-picker .grade-card{padding:8px 6px}.grade-picker .muted{grid-column:2;grid-row:3;margin:0}}
/* Centered grade introduction, with a bee 50% larger than the compact picker. */
.subject-picker-heading{flex-direction:column;text-align:center;gap:7px;margin:4px 0 20px}.subject-picker-heading>div{margin-left:0}.subject-picker .picker-bee{width:90px;height:108px;flex-shrink:0}.subject-picker-heading h1{color:#d86a35;font-size:32px;letter-spacing:-.035em}.subject-picker-heading p{text-align:center;color:#8b7467;font-size:14px;margin:5px 0 0}.subject-picker-heading h1{background:linear-gradient(120deg,#ffaf58 5%,#f1793a 48%,#b94b2a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subject-picker .subject-grid{margin-top:0}
@media(max-width:650px){.subject-picker-heading{gap:4px;margin:2px 0 12px}.subject-picker .picker-bee{width:64.5px;height:78px}.subject-picker-heading h1{font-size:25px;line-height:1.2}.subject-picker-heading p{font-size:12px;line-height:1.35;margin-top:3px}.subject-picker .subject-card{display:grid;grid-template-rows:minmax(36px,1fr) auto auto;justify-content:stretch;align-items:center;gap:5px}.subject-picker .subject-card .subject-icon-3d{height:100%;min-height:0;max-height:120px;width:100%;margin:0;align-self:center}.subject-picker .subject-icon-3d img{height:100%;max-height:100%;max-width:100%;width:auto}.subject-picker .subject-card b{min-height:34px;justify-content:center;margin:0}.subject-picker .subject-card .card-footer{margin-top:0}}
@media(max-width:650px) and (max-height:600px){.subject-picker .picker-bee{width:52.5px;height:63px}.subject-picker-heading{margin-bottom:8px;gap:3px}.subject-picker-heading h1{font-size:23px}.subject-picker .subject-card{padding:8px 7px;gap:3px}.subject-picker .subject-card b{font-size:14px;min-height:32px}}
@media(max-height:480px) and (min-width:480px){.subject-picker-heading{flex-direction:row;gap:10px;margin:0 0 10px}.subject-picker-heading>div{margin:0}.subject-picker .picker-bee{width:54px;height:65px}.subject-picker .subject-grid{margin:auto 0}.subject-picker .subject-card{display:flex;gap:0}.subject-picker .subject-card .subject-icon-3d{height:56px;margin-bottom:4px}.subject-picker .subject-icon-3d img{height:56px}.subject-picker-heading h1{font-size:24px}}

/* Start the grade selection at the top and give the bee the available hero space. */
.grade-picker main{height:100vh;height:100svh;min-height:600px}.grade-picker #app{justify-content:flex-start}.grade-picker .hub-hero{flex:1 1 220px;height:auto;min-height:180px;max-height:360px;margin-top:0;padding:24px 32px}.grade-picker .hub-hero .fox{width:225px;max-width:38%;height:100%;max-height:290px;flex-shrink:0;align-self:center}.grade-picker .hub-hero .fox img{width:100%;height:100%;max-height:290px;object-fit:contain;margin:0}.grade-picker .grade-card h2{font-size:28.75px}.subject-picker-heading h1{font-size:40px}
@media(max-width:650px){.grade-picker main{min-height:480px;padding-top:10px}.grade-picker header{margin-bottom:8px}.grade-picker .hub-hero{flex:1 1 160px;height:auto;min-height:130px;max-height:300px;padding:16px 18px;margin-bottom:12px}.grade-picker .hub-hero .fox{width:125px;max-width:36%;max-height:235px}.grade-picker .hub-hero .fox img{height:100%;max-height:235px}.grade-picker .grade-card h2{font-size:22.5px}.subject-picker-heading h1{font-size:31.25px}}
@media(max-width:650px) and (max-height:620px){.grade-picker .hub-hero{height:auto;flex:1 1 130px;min-height:115px;max-height:220px;padding:13px 16px}.grade-picker .hub-hero .fox img{height:100%;max-height:180px}.grade-picker .grade-card h2{font-size:21.25px}}
@media(max-width:650px) and (max-height:600px){.subject-picker-heading h1{font-size:28.75px}}
@media(max-height:480px) and (min-width:480px){.grade-picker main{height:auto;min-height:100vh;min-height:100svh}.grade-picker .hub-hero{height:190px;min-height:0;max-height:190px;padding:14px}.grade-picker .hub-hero .fox{width:75px;max-width:30%}.grade-picker .hub-hero .fox img{max-height:160px}.grade-picker .grade-card h2{font-size:20px}.subject-picker-heading h1{font-size:30px}}

/* Subject menus open straight into practice, without a second mascot hero. */
.subject-page:not(.quiz-active) main{max-width:1000px;padding:18px 24px 24px}.subject-page:not(.quiz-active) header{margin-bottom:12px;padding-bottom:0}.subject-home>.hub-back{padding:3px 0 8px;font-size:12px}.subject-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}.subject-top h1{font-size:28px;line-height:1.2;margin:0}.subject-top .primary{margin:0;padding:12px 18px;min-height:44px;font-size:12px;flex-shrink:0}.subject-lessons{border:1px solid #edd7c5;border-radius:16px;background:#ffffffa8;padding:10px 13px;margin-bottom:12px}.subject-lessons>summary{font-size:12px;font-weight:700;color:#8a654f;cursor:pointer;min-height:24px;line-height:24px}.subject-lessons .learn-grid{margin-top:10px}.subject-home .section-heading{margin:12px 0 8px}.subject-home .section-heading h2{font-size:18px}.subject-home .section-heading>span{font-size:10px}.subject-home .practice-grid,.subject-home .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.subject-home .tile{padding:13px;min-height:0;border-radius:18px}.subject-home .practice-grid .tile,.subject-home .game-grid .tile{display:flex;align-items:center;gap:10px}.subject-home .tile b{font-size:14px;line-height:1.25}.subject-home .practice-grid .tile p,.subject-home .game-grid .tile p{display:none}.subject-home .art,.subject-home .art>.scout-sticker{width:42px;height:42px;flex:0 0 42px;margin:0!important}.subject-home .scope{margin-top:12px;padding:9px 12px;font-size:11px;line-height:1.5}.subject-home .scope summary{min-height:22px;line-height:22px}.subject-home .muted,.subject-home .saved-best{font-size:10px;line-height:1.4;margin:9px 0 0}
@media(max-width:650px){.subject-page:not(.quiz-active) main{padding:10px 12px 14px}.subject-page:not(.quiz-active) header{flex-wrap:nowrap;margin-bottom:8px;gap:6px}.subject-page:not(.quiz-active) header strong{flex:1 1 auto}.subject-page:not(.quiz-active) header .brand{font-size:23px}.subject-page:not(.quiz-active) header .brand-slogan{font-size:9px;line-height:1.35;max-width:205px}.subject-page:not(.quiz-active) header .profile-switch{min-width:34px;max-width:34px;min-height:34px;padding:5px;justify-content:center}.subject-page:not(.quiz-active) header .profile-switch-name{display:none}.subject-page:not(.quiz-active) #stars{font-size:11px;min-width:0;padding:6px}.subject-page:not(.quiz-active) #album{min-width:32px;padding:5px}.subject-page:not(.quiz-active) header .inline-sticker{width:21px;height:21px}.subject-home>.hub-back{font-size:11px;padding-bottom:7px}.subject-top{gap:8px;margin-bottom:8px}.subject-top h1{font-size:23px;line-height:1.2}.subject-top .primary{padding:10px 12px;font-size:10px;letter-spacing:0;min-height:40px}.subject-lessons{padding:6px 10px;margin-bottom:8px;border-radius:13px}.subject-home .section-heading{margin:10px 0 7px}.subject-home .section-heading h2{font-size:16px}.subject-home .section-heading>span{font-size:9px}.subject-home .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.subject-home .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.subject-home .practice-grid .tile{padding:9px 8px;min-height:60px;gap:7px}.subject-home .tile b{font-size:12px;line-height:1.3}.subject-home .art,.subject-home .art>.scout-sticker{width:31px;height:31px;flex:0 0 31px}.subject-home .game-grid .tile{flex-direction:column;justify-content:center;gap:5px;padding:9px 5px;min-height:68px;text-align:center}.subject-home .game-grid .tile b{font-size:11px}.subject-home .scope{margin-top:9px;padding:6px 10px}.subject-home .muted,.subject-home .saved-best{font-size:9px;margin-top:7px}.subject-home .learn-grid .tile{padding:9px}.subject-home .learn-grid b{font-size:11px}}
@media(max-width:650px) and (max-height:620px){.subject-home .practice-grid .tile{min-height:52px;padding:7px}.subject-home .section-heading{margin-top:8px}.subject-top h1{font-size:21px}.subject-home .game-grid .tile{min-height:61px;padding:7px 4px}}
/* Stronger subject section headings and a circular back affordance. */
.subject-home .section-heading h2{font-size:21.6px;color:#d66b36;background:linear-gradient(115deg,#ffad50 0%,#ed783d 45%,#b84a28 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.25;letter-spacing:-.025em}.subject-home>.hub-back{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;padding:5px 11px 5px 5px;margin:0 0 10px;background:#ffffffb8;border:1px solid #f4c8a6;border-radius:30px;color:#a45b36;font-size:11px;line-height:1.35;box-shadow:0 3px 9px #a05d2e08;min-height:38px;transition:background .15s,box-shadow .15s}.subject-home>.hub-back:before{content:'←';display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #f5bb8b;border-radius:50%;color:#c76532;background:#fff3e5;font-size:19px;line-height:1}.subject-home>.hub-back:hover{background:#fff4e5;box-shadow:0 4px 12px #a05d2e13}.subject-home>.hub-back:focus{outline:2px solid #df793d;outline-offset:3px}
@media(max-width:650px){.subject-home .section-heading h2{font-size:19.2px}.subject-home>.hub-back{padding:4px 10px 4px 4px;min-height:36px;font-size:10px;margin-bottom:8px}.subject-home>.hub-back:before{width:26px;height:26px;flex-basis:26px;font-size:18px}}

/* Unified orange navigation, with subject actions on one line. */
body .back,body .subject-picker .hub-back,body.subject-picker .hub-back,body .subject-home .hub-back{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;min-height:42px;padding:11px 17px;margin:0;background:#ff714e;border:0;border-radius:28px;color:white;box-shadow:0 5px 13px #ff714e25;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.2px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,box-shadow .15s}body .back:hover,body .subject-home .hub-back:hover{background:#f66040;color:white;box-shadow:0 7px 16px #ff714e35}body .back:focus{outline:2px solid #b94b2a;outline-offset:3px}.subject-home .hub-back:before{content:none}.subject-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px}.subject-toolbar .primary{margin:0;padding:11px 17px;min-height:42px;font-size:12px;line-height:1.35;letter-spacing:.2px;text-transform:none;white-space:nowrap}.subject-home .subject-top{margin:0 0 12px}.subject-picker .subject-picker-intro>.hub-back{margin-bottom:8px}.quiz-active .quiz-header-back:not([hidden]){background:#ff714e;border:0;color:white;box-shadow:0 5px 13px #ff714e25;border-radius:50%}.quiz-active .quiz-header-back:hover{background:#f66040}
h1:not(.question),h2,h3,.subject-home .subject-top h1{color:#d66b36;background-image:linear-gradient(115deg,#ffad50 0%,#ed783d 45%,#b84a28 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.welcome h1{background-image:linear-gradient(120deg,#fffdf6,#ffe9bd);color:#fffdf6}
@media(max-width:650px){body .back,body.subject-picker .hub-back,body .subject-home .hub-back{min-height:38px;padding:10px 12px;font-size:10px;letter-spacing:0}.subject-toolbar{gap:8px;margin-bottom:10px}.subject-toolbar .primary{min-height:38px;padding:10px 12px;font-size:10px;letter-spacing:0}.subject-home .subject-top{margin-bottom:9px}.subject-toolbar .hub-back{max-width:60%}}

/* Four grades stay together without stretching the compact first screen. */
.grade-picker .grade-card{min-height:110px;padding:13px 18px}.grade-picker .grade-grid{gap:12px}.grade-picker .grade-card .grade-number{width:55px;height:65px}.grade-picker .grade-number>.scout-sticker{width:62px;height:62px}.grade-picker .grade-card h2{margin:0 0 5px}.grade-picker .grade-card p{min-height:0}.grade-picker .grade-card .grade-action{margin-top:6px}.grade-card[href="razred-1.html"]{background:linear-gradient(140deg,#f4fcffd9,#d7f3f180)}.grade-card[href="razred-1.html"] h2{color:#39798b}
@media(max-width:650px){.grade-picker .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.grade-picker .grade-card{padding:8px;gap:2px;min-height:0}.grade-picker .grade-card .grade-number{height:40px;width:44px;margin:0}.grade-picker .grade-number>.scout-sticker{width:43px;height:43px}.grade-picker .grade-card h2{font-size:21px;line-height:1.15;margin:2px 0 4px}.grade-picker .grade-card p{font-size:10px;line-height:1.3;min-height:0}.grade-picker .grade-card .grade-action{font-size:9px;margin-top:4px;line-height:1.3}.grade-picker .grade-action>span{font-size:16px}.grade-picker .hub-hero{min-height:110px;max-height:240px}.grade-picker .section-heading{margin-bottom:8px}}body[data-grade="1"] .tile:before{background:#9ddce538}body[data-grade="1"] .subject-card b{color:#397485}

/* Compact subject chooser: readable four-card screen, with room for browser chrome. */
.subject-picker main{min-height:0;height:auto;max-width:820px;padding:14px 22px 20px}
.subject-picker header{padding-bottom:10px;margin-bottom:10px}
.subject-picker .subject-picker-heading{gap:3px;margin:0 0 12px}
.subject-picker .picker-bee{width:62px;height:74px}
.subject-picker .subject-picker-heading h1{font-size:28px;line-height:1.15}
.subject-picker .subject-grid{flex:0 0 auto;gap:12px;max-width:620px;margin:0 auto}
.subject-picker .subject-card{display:flex;padding:13px 12px;border-radius:23px;gap:0}
.subject-picker .subject-card .subject-icon-3d{height:94px;width:100%;margin:0 0 5px}
.subject-picker .subject-icon-3d img{height:94px;width:94px;object-fit:contain}
.subject-picker .subject-card b{font-size:18px;min-height:24px;line-height:1.25}
.subject-picker .subject-card .card-footer{margin-top:5px}
.subject-picker .card-footer>span{font-size:10px;margin-bottom:0}
.picker-bee,.profile-bee,.hub-mascot img{animation:beeHoverGentle 5s ease-in-out infinite;transform-origin:center;will-change:transform}
.hub-mascot{animation:none;will-change:auto}
@keyframes beeHoverGentle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media(max-width:650px){
 .subject-picker main{height:auto;min-height:0;padding:10px 12px 16px}
 .subject-picker header{padding-bottom:0;margin-bottom:8px}
 .subject-picker .subject-picker-heading{margin:0 0 9px;gap:2px}
 .subject-picker .picker-bee{width:48px;height:58px}
 .subject-picker .subject-picker-heading h1{font-size:24px}
 .subject-picker .subject-grid{gap:9px;flex:0 0 auto;grid-template-rows:repeat(2,auto);max-height:none}
 .subject-picker .subject-card{padding:10px 7px}
 .subject-picker .subject-card .subject-icon-3d{height:80px;margin-bottom:3px}
 .subject-picker .subject-icon-3d img{width:80px;height:80px}
 .subject-picker .subject-card b{font-size:15px;min-height:20px}
 .subject-picker .subject-card .card-footer{margin-top:4px}
 .subject-picker .card-footer>span{font-size:9px}
}
@media(max-height:600px){
 .subject-picker .subject-picker-heading{flex-direction:row;gap:8px;margin-bottom:6px}
 .subject-picker .picker-bee{width:34px;height:42px}
 .subject-picker .subject-picker-heading h1{font-size:22px}
 .subject-picker .subject-card .subject-icon-3d,.subject-picker .subject-icon-3d img{height:62px}
}
@media(max-height:480px) and (min-width:480px){
 .subject-picker .subject-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;max-width:none}
 .subject-picker .subject-card b{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.picker-bee,.profile-bee,.hub-mascot img{animation:none;will-change:auto}}

/* Grade palettes: the whole group, including generated test UI, follows its grade. */
body[data-grade="1"],body.grade-picker .grade-card[href="razred-1.html"]{--grade-main:#B9FFB7;--grade-strong:#338C49;--grade-ink:#1C6234;--grade-pale:#F3FFF1;--grade-light:#86E298;--grade-tint:#E0FFDE;--grade-pattern:url("assets/stickers-green/pattern.svg");}
body[data-grade="2"],body.grade-picker .grade-card[href="razred-2.html"]{--grade-main:#FDCA40;--grade-strong:#AD750C;--grade-ink:#694708;--grade-pale:#FFFCED;--grade-light:#FFE68B;--grade-tint:#FFF2BC;--grade-pattern:url("assets/stickers-yellow/pattern.svg");}
body[data-grade="3"],body.grade-picker .grade-card[href="razred-3.html"]{--grade-main:#33A1FD;--grade-strong:#1476CB;--grade-ink:#11344F;--grade-pale:#F1F8FF;--grade-light:#80C8FF;--grade-tint:#D9EEFF;--grade-pattern:url("assets/stickers-azure/pattern.svg");}
body[data-grade="4"],body.grade-picker .grade-card[href="razred-4.html"]{--grade-main:#FF883D;--grade-strong:#E7652E;--grade-ink:#58260F;--grade-pale:#FFFAF4;--grade-light:#FFB76E;--grade-tint:#FFE7CE;--grade-pattern:url("assets/stickers/pattern.svg");}
body[data-grade="4"]{--grade-pattern:url("assets/topographic-pattern.svg")}

body[data-grade]{background-color:var(--grade-pale);background-image:radial-gradient(ellipse at 105% 85%,var(--grade-tint),transparent 52%);color:#293334}
body[data-grade]:before{background-image:var(--grade-pattern)}
body[data-grade] .brand,body[data-grade] .brand>span{color:var(--grade-strong)}
body[data-grade] h1:not(.question),body[data-grade] h2,body[data-grade] h3,body[data-grade] .subject-home .subject-top h1,body[data-grade] .subject-home .section-heading h2,body[data-grade] .subject-picker-heading h1{background-image:linear-gradient(115deg,var(--grade-strong),var(--grade-ink));color:var(--grade-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-grade] .tile{background:linear-gradient(135deg,#fffffff2,var(--grade-pale));border-color:var(--grade-tint);border-bottom-color:var(--grade-main)!important;box-shadow:0 7px 18px #26363f08}
body[data-grade] .tile:before,body[data-grade] .tile:nth-child(2n):before{background:var(--grade-main);opacity:.16}
body[data-grade] .tile:hover{background:var(--grade-pale);border-color:var(--grade-strong)!important;box-shadow:0 8px 20px #26363f12}
body[data-grade] .subject-grid:before,body[data-grade] .subject-grid:after{background:var(--grade-tint)}
body[data-grade] .tile b,body[data-grade] .card-footer,body[data-grade] .subject-card b,body[data-grade] .subject-card .card-footer,body[data-grade] .lesson b,body[data-grade] .scope summary,body[data-grade] .subject-lessons>summary,body[data-grade] .score{color:var(--grade-ink)}
body[data-grade] .art,body[data-grade] .subject-card .subject-icon,body[data-grade] .subject-card .subject-icon-3d{background:transparent}
body[data-grade] .primary,body[data-grade] .primary:hover,body[data-grade] .back,body[data-grade] .back:hover,body[data-grade] .subject-home .hub-back,body[data-grade].quiz-active .quiz-header-back:not([hidden]),body[data-grade] .script-switch button[aria-pressed="true"]{background:var(--grade-main);color:var(--grade-ink);box-shadow:0 5px 14px #26363f13}
body[data-grade] .primary:hover,body[data-grade] .back:hover{background:var(--grade-light)}
body[data-grade] .small,body[data-grade] .subject-lessons,body[data-grade] .panel,body[data-grade] .scope{border-color:var(--grade-tint);color:var(--grade-ink)}
body[data-grade] .panel{box-shadow:0 5px 0 var(--grade-tint)}
body[data-grade] .progress{background:var(--grade-tint)}
body[data-grade] .progress div{background:var(--grade-main);border-top-color:var(--grade-light)}
body[data-grade] .option.selected{border-color:var(--grade-strong);background:var(--grade-pale);color:var(--grade-ink)}
body[data-grade] .feedback:not(.wrong){background:var(--grade-pale)}
body[data-grade] .sticker{background:var(--grade-pale);border-color:var(--grade-tint)}
body[data-grade] a{color:var(--grade-ink)}
body[data-grade] button:focus-visible,body[data-grade] a:focus-visible,body[data-grade] input:focus-visible{outline-color:var(--grade-strong)}
body[data-grade].quiz-active .quiz-actions{background:var(--grade-pale);border-top-color:var(--grade-tint)}
body[data-grade].quiz-active .quiz-actions #check:disabled{background:var(--grade-tint);color:var(--grade-ink);opacity:.7}
body.grade-picker .grade-card[href]{background:linear-gradient(140deg,#ffffffeb,var(--grade-tint));border-color:var(--grade-main)!important}
body.grade-picker .grade-card[href] h2{background-image:linear-gradient(115deg,var(--grade-strong),var(--grade-ink));-webkit-background-clip:text;background-clip:text;color:var(--grade-ink);-webkit-text-fill-color:transparent}
body.grade-picker .grade-card[href] p,body.grade-picker .grade-card[href] .grade-action{color:var(--grade-ink)}
/* Five or six subjects: two rows on wide displays, three compact rows on phones. */
.subject-picker .expanded-subjects{grid-template-columns:repeat(3,minmax(0,1fr));max-width:740px;gap:10px}
.subject-picker .expanded-subjects .subject-card{padding:12px 8px}
.subject-picker .expanded-subjects .subject-card b{font-size:17px;min-height:24px}
.subject-picker .expanded-subjects .subject-card .subject-icon-3d,.subject-picker .expanded-subjects .subject-icon-3d img{height:82px}
@media(max-width:650px){
 .subject-picker .subject-picker-heading{flex-direction:row;gap:7px;margin:0 0 9px}
 .subject-picker .picker-bee{height:48px;width:40px}
 .subject-picker .expanded-subjects{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:8px}
 .subject-picker .expanded-subjects .subject-card{padding:8px 6px;border-radius:18px}
 .subject-picker .expanded-subjects .subject-card b{font-size:14px;min-height:20px;line-height:1.25}
 .subject-picker .expanded-subjects .subject-card .subject-icon-3d,.subject-picker .expanded-subjects .subject-icon-3d img{height:64px;width:auto}
 .subject-picker .expanded-subjects .subject-card .card-footer{margin-top:3px}
}
@media(max-height:600px) and (max-width:650px){
 .subject-picker .picker-bee{height:36px;width:30px}
 .subject-picker .expanded-subjects .subject-card .subject-icon-3d,.subject-picker .expanded-subjects .subject-icon-3d img{height:44px}
 .subject-picker .expanded-subjects .subject-card{padding:6px}
 .subject-picker .expanded-subjects .subject-card b{font-size:13px}
}
@media(max-height:480px) and (min-width:480px){
 .subject-picker .expanded-subjects{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto)}
 .subject-picker .expanded-subjects .subject-card{flex-direction:row;gap:6px;justify-content:flex-start;padding:6px}
 .subject-picker .expanded-subjects .subject-card .subject-icon-3d{width:40px;flex:0 0 40px;margin:0}
 .subject-picker .expanded-subjects .subject-card .subject-icon-3d,.subject-picker .expanded-subjects .subject-icon-3d img{height:40px}
 .subject-picker .expanded-subjects .subject-card b{font-size:12px}
 .subject-picker .expanded-subjects .card-footer{display:none}
}

body[data-grade] .profile-choice,body[data-grade] .profile-choice:focus{border-color:var(--grade-tint);background:var(--grade-pale);box-shadow:inset 0 0 0 1px var(--grade-tint)}body[data-grade] .profile-avatar{background:var(--grade-tint);color:var(--grade-ink)}body[data-grade] .profile-choice:focus-visible{outline-color:var(--grade-strong)}

/* A shared closing action for every subject menu. */
.subject-home .subject-test-cta{display:flex;justify-content:center;margin:20px 0 16px}.subject-home .subject-test-cta .primary{margin:0;min-height:44px;padding:13px 28px;font-size:13px;text-transform:none;letter-spacing:.2px}.subject-home .subject-test-cta+.scope{margin-top:0}@media(max-width:650px){.subject-home .subject-test-cta{margin:16px 0 12px}.subject-home .subject-test-cta .primary{min-height:44px;padding:12px 24px}}

/* Desktop test illustrations are twenty percent larger; mobile retains its compact layout. */
@media(min-width:651px){.subject-home .art,.subject-home .art>.scout-sticker{width:50.4px;height:50.4px;flex:0 0 50.4px}.test-heading>.scout-sticker,.quiz-active .test-heading>.scout-sticker{width:76.8px;height:76.8px;flex:0 0 76.8px}}

/* Incorrect-answer feedback is orange in every grade palette. */
body .feedback.feedback-incorrect{background:#FFE1BC;color:#71370F;border:1px solid #FFA450;border-left:5px solid #F58A2A}body .feedback.feedback-incorrect b{color:#71370F}

/* Reading passages: 25% larger than the previous 16px / mobile 14px text. */
.feedback.story{font-size:20px;line-height:1.65;text-align:left;overflow-wrap:break-word}
.feedback.story p{font-size:inherit;line-height:inherit;color:#42566c;margin-top:10px}
.result-continue{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:360px;min-height:56px;margin:22px auto 8px;font-size:18px;text-transform:none;letter-spacing:0}
.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:44px;min-height:40px;padding:7px 11px;font-size:13px;color:var(--grade-ink,#694329);background:var(--grade-pale,#fff4e6);border-color:var(--grade-tint,#ffd7b8);line-height:1}
.sound-toggle>span:first-child{font-size:22px}.sound-toggle[aria-pressed="false"]{opacity:.65}.test-heading>.sound-toggle{margin-left:auto}.test-heading>.meta{flex:1;min-width:0}
@media(max-width:650px){.feedback.story,.quiz-active .feedback.story{font-size:17.5px;line-height:1.65}.quiz-active .feedback.story p{font-size:inherit;line-height:inherit}.test-heading .sound-label{display:none}.test-heading>.sound-toggle{min-width:36px;min-height:36px;padding:5px}.result-continue{font-size:18px;min-height:56px}}

/* Lightweight answer celebrations, outside the fixed mobile action bar. */
.answer-confetti{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden;contain:strict}
.confetti-piece{position:absolute;display:block;width:7px;height:10px;opacity:0;border:1px solid #ff93452b;box-shadow:0 1px 2px #c86d2225;animation:answerConfettiFlight var(--duration,800ms) cubic-bezier(.18,.65,.35,1) both;will-change:transform,opacity}
.confetti-shape-1{width:7px;height:7px;border-radius:50%}.confetti-shape-2{width:5px;height:13px;border-radius:2px}.confetti-shape-3{width:9px;height:9px;clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%)}
.answer-joy{animation:answerButtonJoy 360ms ease-out!important;transform-origin:center}
.answer-shake{animation:answerButtonShake 300ms ease-out!important}
@keyframes answerButtonJoy{0%,100%{transform:scale(1)}40%{transform:scale(1.065)}70%{transform:scale(.985)}}
@keyframes answerButtonShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes answerConfettiFlight{0%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.6)}10%{opacity:1}48%{opacity:1;transform:translate3d(var(--mx),var(--cy),0) rotate(var(--spin)) scale(1)}100%{opacity:0;transform:translate3d(var(--cx),var(--fall),0) rotate(var(--spin)) scale(.7)}}
@media(prefers-reduced-motion:reduce){.answer-confetti{display:none}.answer-joy,.answer-shake{animation:none!important}}

/* One visual language with the BeeBright welcome website. */
@font-face{font-family:'BeeBright Rounded';src:url('assets/fonts/nunito-variable.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}
h1,h2,h3,.question,.tile b,.subject-subtitle,.section-heading>span,.profile-panel h1,.grade-card h2,.primary,.quiz-actions button{font-family:'BeeBright Rounded','BeeBright Sans',sans-serif}
h1,h2,h3,.tile b,.grade-card h2,.primary{font-weight:900}
.question{font-weight:800;letter-spacing:-.025em;line-height:1.4}
.site-home-link{display:inline-flex;align-items:center;min-height:36px;padding:7px 10px;border:1px solid #eed4be;border-radius:12px;font-size:11px;color:#805f49;background:#fff7eb99;text-decoration:none}
@media(max-width:650px){.site-home-link{font-size:10px;min-height:32px;padding:6px 8px}}