:root{--banana:#FFD600;--banana2:#FFB800;--overall:#0057B8;--navy:#102A43;--ink:#071526;--muted:#314A62;--green:#00A85A;--greenSoft:#CFF7DF;--red:#B71C1C;--redSoft:#FFD6D6;--shadow:0 9px 0 rgba(16,42,67,.18),0 18px 34px rgba(16,42,67,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(circle at 12% 9%,rgba(255,255,255,.8) 0 56px,transparent 57px),repeating-linear-gradient(135deg,rgba(255,214,0,.18) 0 24px,rgba(30,136,229,.08) 24px 48px),linear-gradient(180deg,#FFE85C 0 34%,#8ED0FF 34% 100%)}a{color:inherit}.wrap{max-width:1120px;margin:0 auto;padding:16px 16px 36px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;border:4px solid #08111c;border-radius:24px;padding:10px 12px;box-shadow:var(--shadow);margin-bottom:16px;position:sticky;top:8px;z-index:20}.brand{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:21px;text-decoration:none}.brandMark{width:56px;height:56px;border-radius:50%;background:var(--banana);border:5px solid #2e3640;box-shadow:inset 0 0 0 4px #d9eef9;display:grid;place-items:center;font-size:28px}.topActions{display:flex;gap:9px;flex-wrap:wrap}.pill,.btn{border:3px solid var(--navy);border-radius:16px;font-weight:1000;cursor:pointer;box-shadow:0 5px 0 var(--navy);transition:.08s transform,.08s box-shadow,.08s filter}.pill{background:#fff;color:var(--ink);border-color:#08111c;box-shadow:0 5px 0 #08111c;padding:9px 13px}.btn{display:inline-block;text-decoration:none;padding:12px 16px;font-size:16px;background:#fff;color:var(--ink)}.btn:active,.pill:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}.btn:hover,.pill:hover{filter:brightness(1.03)}.btn.primary{background:var(--banana)}.btn.blue{background:var(--overall);color:#fff}.btn.green{background:var(--green);color:#fff}.btn.danger{background:var(--red);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}
.hero,.card,.questionCard{background:#fff;border:4px solid var(--navy);border-radius:30px;box-shadow:var(--shadow)}.hero{padding:24px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0 76%,#e6f4ff 76% 100%)}.hero:after{content:"BANANA CREW";position:absolute;right:-45px;top:23px;transform:rotate(35deg);background:var(--banana);border:3px solid var(--navy);padding:7px 48px;font-size:11px;font-weight:1000;letter-spacing:1px}.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.02;margin:4px 0 10px}.lead{font-size:18px;line-height:1.62;color:#22384f;font-weight:650;max-width:780px}.crewBadge,.tag{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--navy);border-radius:999px;font-weight:1000}.crewBadge{background:var(--banana);padding:8px 12px;border-width:3px}.tag{background:#FFF3A8;padding:6px 10px;font-size:12px}.goggleBand{display:inline-flex;align-items:center;gap:7px;background:#2e3640;color:#fff;border:3px solid #111820;border-radius:999px;padding:7px 12px;font-weight:1000}.goggleEye{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #aab4be;box-shadow:inset 0 0 0 5px #3c4e60}.heroActions,.rowActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.stat{background:#fff;border:3px solid var(--navy);border-radius:18px;padding:14px;text-align:center;box-shadow:inset 0 -7px 0 #eaf4ff}.stat strong{font-size:27px;display:block}.stat span{font-size:12px;font-weight:900;color:var(--muted)}
.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin:26px 0 12px}.sectionHead h2{margin:0;font-size:29px}.sectionHead p{margin:0;color:var(--muted);font-weight:700}.subjectGrid,.packGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{padding:18px;position:relative;overflow:hidden}.card:after{content:"";height:12px;position:absolute;left:0;right:0;bottom:0;background:var(--overall)}.card.green:after{background:var(--green)}.cardIcon{font-size:52px}.card h3{font-size:26px;margin:7px 0}.card p{color:#273e56;line-height:1.55;font-weight:650}.progress{height:16px;background:#dcebf8;border:2px solid var(--navy);border-radius:999px;overflow:hidden}.progressBar{height:100%;background:linear-gradient(90deg,var(--banana),var(--banana2));width:0}.cardMeta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.questionCard{padding:20px;margin-top:14px}.breadcrumb{background:#fff;border:3px solid var(--navy);border-radius:22px;padding:13px 15px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.prompt{font-size:clamp(23px,3.5vw,31px);font-weight:1000;line-height:1.32;margin:13px 0;color:#071526}.subprompt{font-size:15px;color:#314a62;font-weight:750;line-height:1.5}.options{display:grid;gap:10px;margin-top:12px}.option{background:#fff;border:3px solid var(--navy);border-radius:16px;padding:15px;cursor:pointer;font-size:18px;font-weight:850;text-align:left;color:#08111c;box-shadow:0 4px 0 rgba(16,42,67,.22)}.option.selected{background:#ffe66b;border-color:#715400}.option.correct{background:var(--greenSoft);border-color:#006d3c;color:#053d24}.option.wrong{background:var(--redSoft);border-color:#8b1010;color:#5a0909}.option:disabled{cursor:default}.formInput,select{width:100%;padding:12px 14px;border-radius:14px;border:3px solid var(--navy);font-size:18px;font-weight:800;background:#fff;color:#071526}.inputStack{display:grid;gap:12px}.matchingRow{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:center;margin:9px 0}.feedback{border-radius:16px;padding:15px;margin-top:14px;font-size:17px;line-height:1.55;font-weight:850}.feedback.ok{background:var(--greenSoft);border:3px solid #006d3c;color:#053d24}.feedback.bad{background:var(--redSoft);border:3px solid #8b1010;color:#5a0909}.navRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.tableBox{border:3px solid var(--navy);border-radius:16px;overflow:hidden;background:#fff;margin-top:12px}table{border-collapse:collapse;width:100%}th,td{border:2px solid var(--navy);padding:9px;text-align:center;font-weight:800}th{background:var(--banana)}.tenframes{display:flex;gap:18px;flex-wrap:wrap}.frame{display:grid;grid-template-columns:repeat(5,20px);gap:4px;border:3px solid var(--navy);padding:9px;border-radius:13px}.dot{width:20px;height:20px;border:2px solid var(--navy);border-radius:50%;background:#fff}.dot.fill{background:var(--overall)}.miniPanel{background:#f7fbff;border:3px solid var(--navy);border-radius:18px;padding:14px}.checkRow{display:grid;gap:10px}.checkChoice{padding:12px;border:3px solid var(--navy);border-radius:16px;background:#fff}.footer{margin-top:30px;text-align:center;font-size:12px;font-weight:750;color:#18344e}.empty{padding:18px;background:#fff;border:3px dashed var(--navy);border-radius:18px}.hidden{display:none!important}
@media(max-width:760px){.subjectGrid,.packGrid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.topbar{position:static}.matchingRow{grid-template-columns:1fr}.hero{padding:20px}.hero:after{display:none}.prompt{font-size:23px}.option{font-size:17px}.brand{font-size:18px}.brandMark{width:48px;height:48px}}
:root{color-scheme:light}
.familyTools{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.miniLink{font-size:14px;font-weight:800;color:var(--navy,#182942);text-decoration:none;border-bottom:2px solid transparent;padding:6px 0}
.miniLink:hover{border-color:currentColor}.languageToggle{font:800 12px/1 system-ui;background:#fff9d9;color:#26324a;border:1px solid #c8b86c;border-radius:7px;padding:7px 9px;cursor:pointer}
.childPicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.childPicker select{max-width:170px;padding:8px;border:2px solid #253451;border-radius:10px;background:white;color:#182942;font:800 14px system-ui}
.learningStatus{margin:0 0 16px;font-size:13px;font-weight:700;color:#324458;min-height:20px}.learningStatus.bad,.notice.bad{color:#a22020}
.compactHero{padding:26px!important;margin-bottom:24px}.compactHero h1{font-size:clamp(26px,4vw,42px)}
.accountGrid,.reviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-weight:800}.field .formInput{width:100%;min-width:0;box-sizing:border-box}.field select{background:#fff}
.credential{font:700 16px/1.6 ui-monospace,monospace;letter-spacing:.4px}.loginCard{max-width:760px;margin:auto}
.familySummary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.familySummary h2{margin:0}
#familyContent>.card{margin-bottom:24px}.notice{min-height:24px;padding:12px 0;font-weight:700;overflow-wrap:anywhere}.importRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #ddd}.importRow .btn{flex-shrink:0}
.reviewToolbar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.reviewGrid .card h3{font-size:20px;line-height:1.45}.reviewGrid p{overflow-wrap:anywhere}.saveStatus{font-size:14px;font-weight:800;min-height:22px;color:#334d62}
.card>button{margin-top:14px}.topbar{gap:20px;flex-wrap:wrap}.topActions{flex-wrap:wrap}.brand{flex-shrink:1}.brand>span:last-child{overflow-wrap:anywhere}.formInput{max-width:100%}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #056af5;outline-offset:3px}
@media(max-width:700px){.accountGrid,.reviewGrid{grid-template-columns:1fr}.familyTools{justify-content:flex-start;gap:12px}.topActions{width:100%}.childPicker select{max-width:140px}.childPicker span{display:none}.familySummary{align-items:flex-start;flex-wrap:wrap}.importRow{align-items:flex-start;flex-direction:column}.credential{font-size:13px;letter-spacing:0}}
.topbar .miniLink,.topbar .childPicker{color:#fff}.topbar .miniLink:hover{color:#ffdd32}.topbar .childPicker select{color:#182942}