:root{--ink:#12323b;--ocean:#004aad;--blue:#004aad;--blue-dark:#003b88;--yellow:#f4c84c;--green:#00a957;--muted:#607b8d;--border:#d9e7ed;--shadow:0 18px 40px rgba(38,87,113,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.mission-toolbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid #dfeaf0}.nav-wrap{min-height:78px;display:flex;align-items:center;gap:12px}.mission-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.mission-brand strong{display:block;color:var(--ocean);font-size:1.08rem}.mission-brand small{display:block;color:#6e8797;font-size:.7rem}.mission-brand-drop{width:31px;height:39px;background:#47b9e5;border-radius:55% 55% 58% 58%/65% 65% 42% 42%;transform:rotate(45deg)}.main-nav{display:flex;gap:4px}.main-nav a{padding:9px 10px;border-radius:99px;color:#35566d;font-weight:850;font-size:.83rem}.main-nav a:hover{background:#eef7fb}.mission-menu-toggle{display:none;border:0;background:#eef7fb;border-radius:12px;padding:10px}.voice-global,.voice-btn,.icon-btn{border:1px solid #9bcbe1;background:#eaf8ff;color:#175b84;border-radius:999px;padding:9px 12px;font-weight:900;cursor:pointer}.icon-btn{min-width:42px;padding:9px}.voice-btn.speaking,.voice-global.speaking{background:#dff7e9;color:#176846;border-color:#9ad0b3}.header-progress{display:grid;grid-template-columns:auto 80px auto;align-items:center;gap:7px;font-size:.69rem;color:#45677b}.header-bar{height:8px;background:#e7eff3;border-radius:99px;overflow:hidden}.header-bar i{display:block;width:0;height:100%;background:var(--green);transition:.4s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 17px;border-radius:999px;border:0;font-weight:900;cursor:pointer}.btn-primary{background:var(--yellow);color:#183b56;box-shadow:0 5px 0 #d2a82d}.btn-secondary{background:#fff;border:2px solid #90bdd4;color:#1b5d85}.btn:active{transform:translateY(2px)}
.hero{background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.95) 0 8%,transparent 9%),linear-gradient(135deg,#fff7e8 0%,#edf9ff 61%,#e9f7f2 100%);padding:52px 0 42px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:42px}.hero-art{position:relative;min-height:405px;display:flex;align-items:flex-end;justify-content:center}.hero-illustration{z-index:2;width:min(100%,690px);filter:drop-shadow(0 18px 40px rgba(32,84,114,.16))}.note{position:absolute;background:#fff7e7;border:1px solid #efd8ae;box-shadow:var(--shadow);padding:12px 14px;border-radius:12px;color:#4e4a41;font-weight:800;z-index:3}.note-left{left:0;top:26px;max-width:150px;transform:rotate(-3deg)}.note-small{right:1%;bottom:28px;max-width:170px;transform:rotate(2deg)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:900;color:#2c7aa5;margin:0 0 9px}.hero h1,.section h2{margin:0;color:var(--blue-dark)}.hero h1{font-size:clamp(3rem,6vw,5.6rem);line-height:.93;letter-spacing:-.045em}.lead{font-size:1.05rem;line-height:1.62;color:#476579;margin:19px 0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-badge{display:inline-flex;margin-top:17px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid #d9e8ee;font-size:.82rem;font-weight:800;color:#466579}.voice-status{min-height:20px;color:#2d6c8c;font-size:.82rem;font-weight:800}
.section{padding:70px 0}.section-head{text-align:center;max-width:900px;margin:0 auto 32px}.section-head h2{font-size:clamp(2rem,4vw,3.1rem)}.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:24px}.flow-steps div{display:flex;align-items:center;gap:9px;padding:14px;background:#f7fbfd;border:1px solid #dbe8ee;border-radius:17px;text-align:left}.flow-steps b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ffd451}.flow-steps span{font-size:.84rem;font-weight:850;color:#456579}
.mission-path{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;position:relative}.mission-path:before{content:"";position:absolute;left:6%;right:6%;top:50px;border-top:3px dashed #79bfdc;z-index:0}.mission-card{position:relative;z-index:1;text-align:center;padding:12px 6px;border-radius:20px}.mission-card.active{background:#f7fcff}.mission-icon{width:82px;height:82px;margin:auto auto 9px;border-radius:50%;display:grid;place-items:center;font-size:1.75rem;background:#f2fbff;border:5px solid #d2edf7}.mission-card.active .mission-icon,.mission-card.done .mission-icon{background:#fff8d8;border-color:#ffd457}.mission-card.done .mission-icon{background:#e3f8ec;border-color:#79c89e}.mission-no{position:absolute;top:7px;left:50%;transform:translateX(-44px);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #9ccde2;font-weight:900;font-size:.75rem}.mission-card h3{font-size:.82rem;min-height:42px;color:#284b63}.mini-btn,.locked{display:inline-flex;padding:6px 8px;border-radius:99px;font-size:.68rem;font-weight:900}.mini-btn{background:#ffd451}.locked{background:#eef4f6;color:#78909e}.unlocked{background:#dff7e9!important;color:#176846!important}.test-tools{margin-top:25px;padding:14px 16px;border:1px dashed #b7d8e6;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#fbfdfe}
.collection-section{background:#f8fbfd}.collection-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.collection-head p{color:#60798a}.drop-counter{min-width:150px;text-align:center;padding:14px;background:#eaf8ff;border:1px solid #bee2f1;border-radius:20px}.drop-counter span{font-size:2rem}.drop-counter strong{display:block;font-size:1.2rem;color:#1f628a}.drop-counter small{color:#60798a}.badge-shelf{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.badge-card{text-align:center;padding:16px 8px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}.badge-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#eef4f6;font-size:1.7rem;filter:grayscale(1);opacity:.45}.badge-card.unlocked .badge-icon{background:#fff7d3;filter:none;opacity:1;box-shadow:inset 0 0 0 4px #f0d66a}.badge-card strong{display:block;font-size:.78rem;margin-top:8px;color:#355d75}.badge-card small{font-size:.67rem;color:#8296a1}
.level-section:nth-of-type(even){background:#eef9fc}.level-section:nth-of-type(odd){background:#f8fbfc}.level-shell{position:relative}.locked-shell .level-content{filter:blur(4px);pointer-events:none;user-select:none;opacity:.35}.lock-cover{position:absolute;z-index:5;inset:40px 0 auto;left:50%;transform:translateX(-50%);width:min(520px,90%);background:white;border:1px solid var(--border);border-radius:26px;padding:30px;text-align:center;box-shadow:var(--shadow)}.lock-cover>div{font-size:2.6rem}.lock-cover h2{font-size:1.8rem;margin:8px 0}.lock-cover p{color:#60798a}.level-shell.open .lock-cover{display:none}.level-shell.open .level-content{filter:none;pointer-events:auto;user-select:auto;opacity:1}
.level-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:20px}.level-heading h2{font-size:clamp(2rem,4vw,3.2rem)}.level-heading p{color:#60798a}.case-label{display:inline-block;background:#dff5ff;color:#2b79a6;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:900}.learning-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel,.level-check,.research-mini,.progress-box{background:white;border:1px solid var(--border);border-radius:25px;padding:21px;box-shadow:var(--shadow)}.panel-title{display:flex;gap:11px;align-items:center}.panel-title>span{font-size:1.9rem}.panel-title small{color:#78919f}.panel-title h3{margin:1px 0 0;color:#215877;font-size:1.25rem}.explainer-video{
  width:100%;
  aspect-ratio:8/5;
  margin-top:14px;
  border-radius:17px;
  background:#eef7fb;
  display:block;
  object-fit:contain;
}
.video-panel{
  padding-bottom:18px;
}
.video-panel .explainer-video{
  margin-bottom:0;
}
.interaction{margin-top:15px;padding:16px;border-radius:18px;background:#f7fbfd;border:1px solid #dfebf0;position:relative}.interaction h4{margin:0 0 10px;color:#345f78}.bonus-drop{position:absolute;right:10px;top:10px;width:38px;height:46px;border:0;background:#47b9e5;color:white;border-radius:55% 55% 58% 58%/65% 65% 42% 42%;font-size:1rem;font-weight:900;cursor:pointer;animation:floatDrop 2.5s infinite ease-in-out;box-shadow:0 6px 16px rgba(37,130,172,.2)}.bonus-drop.collected{opacity:.18;transform:scale(.6);animation:none;pointer-events:none}
.step-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.step-btn,.choice-btn{border:1px solid #d4e2e8;background:white;border-radius:999px;padding:8px 10px;font-size:.77rem;font-weight:900;color:#5d7483;cursor:pointer}.step-btn.active,.choice-btn.active{background:#dff5ff;border-color:#9fd5ec;color:#1f628a}.visual-stage{min-height:190px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:17px;background:linear-gradient(135deg,#fff8eb,#e9f9ff)}.stage-text{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(255,255,255,.9);padding:9px;border-radius:11px;text-align:center;font-size:.8rem;font-weight:850;color:#49697b}
.filter-demo{display:grid;grid-template-columns:1fr 42px 120px 42px 1fr;width:100%;align-items:center;gap:6px}.raw,.clean{text-align:center}.particles,.minerals{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.particle,.mineral,.caught{border-radius:50%;display:grid;place-items:center;color:white;font-size:.61rem;font-weight:900}.particle{width:46px;height:46px;transition:.6s}.particle:nth-child(1){background:#cf6657}.particle:nth-child(2){background:#8c6e61}.particle:nth-child(3){background:#657470}.particle:nth-child(4){background:#c58d2d}.flow-arrow{font-size:1.7rem;color:#68aecf;font-weight:900}.filter-box{height:150px;border:4px solid #8ca6b0;border-radius:20px;background:linear-gradient(#3f5562 0 20%,#eef6f8 20%);padding-top:40px;text-align:center}.filter-core{width:52px;height:85px;margin:auto;border-radius:9px;background:repeating-linear-gradient(90deg,#a6bcc4 0 5px,#dbe6e9 5px 10px);position:relative;overflow:hidden}.caught{position:absolute;width:21px;height:21px;opacity:0;transform:scale(.2);transition:.6s}.c1{top:5px;left:15px;background:#cf6657}.c2{top:27px;left:5px;background:#8c6e61}.c3{top:47px;left:25px;background:#657470}.c4{top:65px;left:12px;background:#c58d2d}.mini-water{width:54px;height:76px;border:3px solid #6eafd0;border-top:5px solid #6eafd0;border-radius:8px 8px 16px 16px;background:linear-gradient(white 0 18%,#69c8ec 18%);margin:auto}.mineral{width:30px;height:30px;background:#58bee6;margin-top:7px}.filter-step3 .particle,.filter-step4 .particle{opacity:.06;transform:translateX(100px) scale(.2)}.filter-step2 .particle{transform:translateX(80px)}.filter-step3 .caught,.filter-step4 .caught{opacity:1;transform:scale(1)}.filter-step4 .mini-water{box-shadow:0 0 0 5px #d5f4ff,0 0 20px #75cbe8}
.electro-demo{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;width:100%;gap:8px}.chamber{height:165px;border:3px solid #7bb5cf;border-radius:20px;background:#eaf8fc;position:relative;overflow:hidden}.electrode{position:absolute;top:20px;bottom:20px;width:27px;border-radius:9px;background:#607681;color:white;text-align:center;padding-top:5px}.anode{left:25px}.cathode{right:25px}.membrane{position:absolute;top:15px;bottom:15px;left:50%;width:12px;background:#d8e4e8}.gas,.ion{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#3d9fd8;color:white;font-size:.58rem;font-weight:900;transition:1s}.g1{right:30px;bottom:20px}.g2{right:45px;bottom:55px}.g3{left:30px;bottom:35px;background:#72bfb4}.i1{left:42%;top:35%;background:#66bde3}.i2{left:35%;top:60%;background:#66bde3}.electro-running .g1{transform:translateY(-100px)}.electro-running .g2{transform:translateY(-75px)}.electro-running .g3{transform:translateY(-95px)}.electro-running .i1{transform:translateX(70px)}.electro-running .i2{transform:translateX(85px)}
.ph-slider{width:90%}.ph-output{font-size:2.5rem;font-weight:900;color:#245e82}.ph-scale{height:28px;width:90%;border-radius:99px;background:linear-gradient(90deg,#c7473e,#e9803c,#f0c84d,#77bd78,#48aebf,#526cc6,#7b55ad);margin:12px auto}.ph-examples{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.h2-zone{width:100%;height:170px;position:relative}.h2-bubble{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#3d9fd8;color:white;border:0;font-weight:900;cursor:pointer;animation:drift 5s infinite ease-in-out}.h2-bubble:nth-child(1){left:12%;top:55%}.h2-bubble:nth-child(2){left:32%;top:18%;animation-delay:.6s}.h2-bubble:nth-child(3){left:52%;top:62%;animation-delay:1.2s}.h2-bubble:nth-child(4){left:72%;top:25%;animation-delay:1.8s}.h2-bubble:nth-child(5){left:85%;top:65%;animation-delay:2.4s}.h2-bubble.caught-h2{opacity:.15;transform:scale(.5)}.h2-counter{font-weight:900;color:#246486}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.evidence-card{padding:16px;border-radius:16px;text-align:center;font-weight:900;cursor:pointer;border:2px solid transparent}.evidence-card.fact{background:#e8f7ef;color:#236844}.evidence-card.hyp{background:#fff4d9;color:#7f6025}.evidence-card.selected{border-color:#286f99;transform:translateY(-2px)}.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%}.tech-card{padding:14px;border-radius:15px;background:white;border:2px solid #dbe8ee;text-align:center;cursor:pointer}.tech-card.active{border-color:#f0c84d;background:#fff9df}.tech-detail{margin-top:12px;min-height:54px;color:#4e6d80;font-size:.82rem;font-weight:800}
.research-mini{margin-top:17px}.research-mini summary{cursor:pointer;font-weight:900;color:#2c617f}.research-mini p{color:#5f7988;line-height:1.55;font-size:.86rem}.level-check{margin-top:18px}.level-check-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.level-check h3{margin:0;color:#1f587a}.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}.quiz-card{border:1px solid #dbe8ee;border-radius:17px;padding:14px;transition:.25s}.quiz-card.correct{border-color:#76c59a;background:#f0fbf5}.quiz-card.wrong{border-color:#e7a18e;background:#fff5f1}.quiz-card legend{font-weight:900;color:#214d6c;font-size:.9rem}.quiz-card label{display:block;margin-top:9px;color:#526f81;font-size:.84rem;line-height:1.35}.quiz-card input{margin-right:5px}.question-feedback{margin-top:10px;padding:9px;border-radius:10px;font-size:.76rem;font-weight:800;display:none}.quiz-card.correct .question-feedback,.quiz-card.wrong .question-feedback{display:block}.quiz-card.correct .question-feedback{background:#dcf4e7;color:#286849}.quiz-card.wrong .question-feedback{background:#ffe4da;color:#924b35}.hint-btn{min-height:34px;padding:0 11px;font-size:.75rem}.hint-text{margin:8px 0 0;padding:8px 10px;background:#fff8dc;border-radius:11px;color:#725d25;font-size:.78rem}.quiz-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.quiz-result{font-weight:900;color:#245b7a}.level-state{padding:8px 11px;border-radius:99px;background:#f8f1d5;color:#6f5921;font-size:.75rem;font-weight:900}.level-state.done{background:#dff7e9;color:#176846}
.final-section{background:#eef9fc}.final-info{text-align:center}.big-score{font-size:3.2rem;font-weight:900;color:#1d6189}.final-quiz{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.final-question{background:white;border:1px solid var(--border);border-radius:18px;padding:16px}.final-question strong{display:block;margin-bottom:10px;color:#225978}.final-question label{display:block;margin-top:7px;color:#557283}.final-actions{grid-column:1/-1;display:flex;gap:12px;align-items:center}.certificate{margin-top:25px;background:#fff9df;border:8px double #dfbb45;padding:12px}.certificate-inner{text-align:center;border:2px solid #e8cf79;padding:30px}.certificate h2{font-size:2.7rem}.certificate input{padding:10px;border:1px solid #cfc6a1;border-radius:10px}.cert-summary{margin:14px auto;max-width:650px;padding:12px;background:#fffdf1;border-radius:12px;color:#665523}.cert-stars{font-size:2rem;color:#e8b526}.hidden{display:none!important}
.progress-section{background:white}.progress-box{display:flex;align-items:center;justify-content:space-between;gap:18px}.stars{display:flex;gap:5px;font-size:2rem;color:#e3ae24}.parents-section{background:#eef8f4}.parents-box{display:flex;justify-content:space-between;align-items:center;gap:24px}.parents-box p{color:#5f7b70;max-width:760px}.sources-grid{display:grid;grid-template-columns:1fr .8fr;gap:25px;align-items:center}.sources-grid p{color:#60798a;line-height:1.6}.quote-card{background:#f7fbfd;border:1px solid var(--border);border-radius:21px;padding:24px;color:#44657a;line-height:1.5}.site-footer{border-top:1px solid var(--border);padding:27px 0 38px}.footer-grid{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.footer-grid p{margin:.3rem 0 0;color:#748c99;font-size:.82rem}.footer-grid nav{display:flex;gap:14px;flex-wrap:wrap;color:#4e6d80;font-size:.82rem}
.celebration{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:11px;height:18px;border-radius:3px;animation:confettiFall 1.8s linear forwards}
dialog{border:0;border-radius:24px;padding:0;box-shadow:0 24px 70px rgba(20,65,89,.28);max-width:520px;width:calc(100% - 30px)}dialog::backdrop{background:rgba(15,46,65,.4)}.dialog-card{padding:25px}.dialog-card h2{margin-top:0;color:#1c5c82}.dialog-card p{color:#60798a}.dialog-card label{display:block;margin:15px 0;color:#45667a;font-weight:800}.dialog-card select,.dialog-card input[type=range]{width:100%;margin-top:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-25px)}}@keyframes floatDrop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(4deg)}}@keyframes aquaShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
@media(max-width:1050px){.mission-path{grid-template-columns:repeat(4,1fr)}.mission-path:before{display:none}.main-nav{display:none}.mission-menu-toggle{display:block}.main-nav.open{display:flex;position:absolute;left:16px;right:16px;top:74px;background:#fff;padding:12px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);flex-direction:column}.hero-grid,.learning-grid,.sources-grid,.quiz-grid{grid-template-columns:1fr}.hero-copy{order:-1}.filter-demo{grid-template-columns:1fr}.filter-demo .flow-arrow{transform:rotate(90deg)}.final-quiz{grid-template-columns:1fr}.header-progress{grid-template-columns:auto 65px}.header-progress strong{display:none}.badge-shelf{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.wrap{width:min(100% - 22px,1180px)}.voice-global{display:none}.hero h1{font-size:clamp(2.7rem,14vw,4.4rem)}.hero-art{min-height:310px}.note-small{display:none}.mission-path{grid-template-columns:repeat(2,1fr)}.flow-steps{grid-template-columns:1fr}.level-heading{align-items:flex-start;flex-direction:column}.compare-grid,.evidence-grid{grid-template-columns:1fr}.progress-box,.parents-box,.collection-head{align-items:flex-start;flex-direction:column}.badge-shelf{grid-template-columns:repeat(2,1fr)}}
@media print{body *{visibility:hidden}.certificate,.certificate *{visibility:visible}.certificate{position:absolute;left:0;top:0;width:100%;border:10px double #999}.mission-toolbar{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* V6: separate A4 certificate workflow */
.certificate-maker{
  margin-top:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:22px;
}
.certificate-maker-inner{
  display:grid;
  grid-template-columns:1fr minmax(250px,360px) auto;
  gap:18px;
  align-items:end;
}
.certificate-maker h3{
  margin:0 0 6px;
  color:#1f5d83;
  font-size:1.5rem;
}
.certificate-maker p{
  margin:.35rem 0 0;
  color:#60798a;
  line-height:1.5;
}
.cert-name-label{
  display:block;
  color:#45667a;
  font-weight:900;
  font-size:.86rem;
}
.cert-name-label input{
  display:block;
  width:100%;
  margin-top:7px;
  padding:11px 12px;
  border:1px solid #cbdde5;
  border-radius:12px;
  background:#fff;
  color:#17324d;
}
@media(max-width:900px){
  .certificate-maker-inner{grid-template-columns:1fr}
}


/* V7 finale: compact inline gate instead of blurred modal overlay */
.final-gate{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:26px 28px;
  background:linear-gradient(135deg,#fffdf3 0%,#f0f9fd 100%);
  border:1px solid #d7e7ee;
  border-radius:26px;
  box-shadow:var(--shadow);
}
.final-gate.hidden{display:none!important}
.final-gate-icon{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  font-size:2.4rem;background:#fff5c8;border:5px solid #f0d364;
}
.final-gate-copy h2{margin:0 0 7px;color:#18547c;font-size:clamp(1.6rem,3vw,2.35rem)}
.final-gate-copy p{margin:.25rem 0;color:#60798a}
.final-gate-progress{height:10px;background:#e4edf1;border-radius:99px;overflow:hidden;margin:13px 0 7px;max-width:520px}
.final-gate-progress i{display:block;height:100%;width:0;background:#55b98c;transition:.35s}
.final-gate-copy strong{color:#3d6277;font-size:.84rem}
.final-content.hidden{display:none!important}
.final-content{display:block}

/* Old V4-V6 blur lock mechanism is no longer used for the finale */
#finale .locked-shell .level-content{filter:none;opacity:1;pointer-events:auto;user-select:auto}
#finale .lock-cover{display:none!important}

.voice-quality-note{
  margin-top:8px;color:#6c8491;font-size:.75rem;line-height:1.4
}
.voice-btn[disabled],.voice-global[disabled]{
  opacity:.5;cursor:not-allowed;background:#eef3f5;border-color:#d8e1e5;color:#6f838e
}

@media(max-width:800px){
  .final-gate{grid-template-columns:1fr;text-align:center}
  .final-gate-icon{margin:auto}
  .final-gate-progress{margin-left:auto;margin-right:auto}
  .final-gate .btn{justify-self:center}
}

/* V9: clearer reset controls and finale state */
.collection-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.final-gate-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  min-width:220px;
}
.final-gate-actions .btn{
  width:100%;
}
@media(max-width:850px){
  .collection-actions{align-items:flex-start;justify-content:flex-start}
  .final-gate-actions{width:100%;min-width:0}
}


/* V10: Jeder Voice-Button ist Start und Stop zugleich */
.voice-btn.speaking,
.voice-global.speaking{
  background:#dff7e9;
  border-color:#82c5a1;
  color:#176846;
  box-shadow:0 0 0 3px rgba(85,185,140,.12);
}
.voice-btn[aria-pressed="true"],
.voice-global[aria-pressed="true"]{
  cursor:pointer;
}
#aquaMascot.speaking{
  box-shadow:0 0 0 5px rgba(85,185,140,.22),0 12px 30px rgba(33,111,151,.25);
}


/* V11 – saubere Besucher-Version */
.restart-link{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#607b8d;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.78rem;
  cursor:pointer;
}
.restart-link:hover{color:#1f628a}

.adult-head,.source-head{max-width:820px}
.adult-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.adult-card{
  background:#fff;
  border:1px solid #d7e9e2;
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 30px rgba(38,87,113,.06);
}
.adult-card>span{font-size:2rem}
.adult-card h3{margin:10px 0 7px;color:#1d5c7e}
.adult-card p{margin:0;color:#607b78;line-height:1.55;font-size:.9rem}
.adult-actions{
  margin-top:24px;
  display:flex;
  justify-content:center;
  gap:11px;
  flex-wrap:wrap;
}

.sources-section{background:#fff}
.source-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}
.source-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
  min-height:92px;
  padding:17px 18px;
  background:#f7fbfd;
  border:1px solid #d9e8ee;
  border-radius:18px;
  transition:.2s;
}
.source-card:hover{
  transform:translateY(-2px);
  border-color:#95cadd;
  box-shadow:0 10px 24px rgba(38,87,113,.08);
}
.source-card>span{font-size:1.8rem}
.source-card strong{display:block;color:#205b7e}
.source-card small{display:block;margin-top:3px;color:#6d8592;line-height:1.35}
.source-card>b{color:#2b78a1;font-size:1.2rem}
.source-note{
  max-width:900px;
  margin:18px auto 0;
  color:#758a94;
  text-align:center;
  font-size:.78rem;
  line-height:1.5;
}

/* Footer als klarer eigener Bereich */
.site-footer{
  position:relative;
  z-index:20;
  background:#fff;
}
.footer-grid nav a{
  padding:7px 3px;
}
.footer-grid nav a:hover{
  color:#1c628b;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Alte Entwicklungsstyles sind im Produktionsmodus nicht sichtbar. */
.test-tools{display:none!important}

@media(max-width:850px){
  .adult-cards,.source-cards{grid-template-columns:1fr}
}


/* V12: Aqua sichtbarer als Tropfen{
  right:18px;
  bottom:108px; /* deutlich über dem Footer */
  gap:12px;
  align-items:flex-end;
  z-index:130;
}

@media(max-width:700px){
}


/* V13 – Lesbarkeit: Schriftgrößen global erhöht */
html{
  font-size:17px;
}

body{
  font-size:1rem;
  line-height:1.6;
}

p, li, label, input, select, textarea{
  font-size:1rem;
  line-height:1.6;
}

.btn{
  font-size:1rem;
}

.main-nav a,
.voice-global,
.voice-btn,
.icon-btn,
.hero-badge,
.voice-status,
.caption,
.step-btn,
.choice-btn,
.mini-btn,
.locked,
.flow-steps span,
.mission-card h3,
.drop-counter small,
.badge-card strong,
.badge-card small,
.panel-title small,
.caption,
.hint-text,
.quiz-card legend,
.quiz-card label,
.final-question strong,
.final-question label,
.quiz-result,
.level-state,
.tech-detail,
.source-card small,
.source-note,
.footer-grid p,
.footer-grid nav a,
.restart-link,
.collection-head p,
.parents-box p,
.adult-card p{
  font-size:1rem !important;
}

.eyebrow,
.case-label{
  font-size:.82rem !important;
}

.mission-brand small,
.header-progress,
.site-footer p{
  font-size:.82rem !important;
}

.lead{
  font-size:1.15rem;
}

.hero-copy .lead,
.section-head p,
.level-heading p,
.collection-head p,
.progress-box p,
.source-note{
  line-height:1.65;
}

h1{line-height:1}
.hero h1{letter-spacing:-.04em}
.section h2,
.level-heading h2,
.hero h1{
  text-wrap:balance;
}

.footer-grid nav{
  gap:16px;
}

@media(max-width:700px){
  html{font-size:16.5px}
}


/* V14 – Missionsübersicht ohne dekorative gestrichelte Linie */
.mission-path:before{
  display:none !important;
  content:none !important;
}


/* V15 – robuste native Navigation zu Mission 1 */
.mission-start-anchor{
  display:block;
  position:relative;
  width:100%;
  height:1px;
  scroll-margin-top:96px;
}

/* Falls ein Browser :target unterstützt, kurz sichtbare Orientierung */
.mission-start-anchor:target + #levels .level-section:first-child .level-content{
  animation:missionTargetPulse 1.1s ease-out 1;
}

@keyframes missionTargetPulse{
  0%{box-shadow:0 0 0 0 rgba(45,155,208,.0)}
  35%{box-shadow:0 0 0 7px rgba(45,155,208,.16)}
  100%{box-shadow:0 0 0 0 rgba(45,155,208,.0)}
}


/* V16 – sichtbares Mission-1-Ziel */
#level1{
  scroll-margin-top:96px;
}
#level1:focus{
  outline:none;
}


/* V17 – automatische Aqua-Voice für das nächste Level */
#voiceIntro.speaking{
  background:#dff7e9 !important;
  color:#176846 !important;
  border-color:#79bd98 !important;
  box-shadow:0 0 0 4px rgba(85,185,140,.16);
  animation:voicePulseV17 1.35s ease-in-out infinite;
}

#voiceIntro.speaking::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#32a768;
  display:inline-block;
  margin-right:3px;
}

@keyframes voicePulseV17{
  0%,100%{box-shadow:0 0 0 3px rgba(85,185,140,.10)}
  50%{box-shadow:0 0 0 7px rgba(85,185,140,.22)}
}

@media(prefers-reduced-motion:reduce){
  #voiceIntro.speaking{animation:none}
}
#aquaBubble,
#aquaText{
  display:none !important;
}

@media(max-width:700px){
}


/* V33 – Videos ohne Zusatztext, mit freiem Steuerleistenbereich */
@media(max-width:700px){
  .video-panel{padding:16px;}
  .video-panel .explainer-video{
    width:100%;
    aspect-ratio:8/5;
    border-radius:15px;
  }
}


/* V36 – Mission 5 Karten höher, ohne störenden Hintergrundbalken */
.evidence-stage{
  min-height:auto;
  display:block;
  background:transparent;
  border-radius:0;
  overflow:visible;
  padding-top:6px;
}
.evidence-stage .evidence-grid{
  margin-top:6px;
  align-items:start;
}
.evidence-stage .evidence-card{
  min-height:116px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:18px 14px 12px;
}
.evidence-stage .evidence-card small{
  display:block;
  margin-top:8px;
  line-height:1.35;
  font-weight:800;
  font-size:.95em;
}
.evidence-stage .stage-text{
  position:static;
  margin-top:12px;
  background:rgba(255,255,255,.94);
  padding:10px 12px;
  border-radius:12px;
}

@media(max-width:700px){
  .evidence-stage .evidence-grid{
    grid-template-columns:1fr;
  }
}


/* V37 – weiterführende Angebote unterhalb der neutralen Quellen */
.more-offers{
  margin:32px auto 0;
  max-width:1000px;
  padding-top:26px;
  border-top:1px solid #dfecef;
  text-align:center;
}
.more-offers h3{
  margin:4px 0 18px;
  color:#1f5c86;
  font-size:1.55rem;
}
.offer-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.offer-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  text-align:left;
  padding:20px;
  background:linear-gradient(180deg,#f8fcfe,#eef8fb);
  border:1px solid #cfe3ec;
  border-radius:22px;
  box-shadow:0 10px 26px rgba(38,87,113,.06);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.offer-card:hover{
  transform:translateY(-2px);
  border-color:#8fc9df;
  box-shadow:0 14px 30px rgba(38,87,113,.10);
}
.offer-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:18px;
  background:#e0f5fc;
  font-size:2rem;
  box-shadow:inset 0 0 0 1px #bfe3ef;
}
.offer-copy strong{
  display:block;
  color:#205b7e;
  font-size:1.18rem;
  margin-top:2px;
}
.offer-copy small{
  display:block;
  margin-top:6px;
  color:#617d8d;
  line-height:1.5;
  font-size:1rem;
}
.offer-button{
  display:inline-flex;
  margin-top:14px;
  padding:10px 15px;
  border-radius:999px;
  background:#f2c94c;
  color:#174968;
  font-weight:900;
  box-shadow:0 4px 0 #c99f25;
}
.offer-card:hover .offer-button{
  background:#f5d361;
}

@media(max-width:760px){
  .offer-cards{
    grid-template-columns:1fr;
  }
}


/* V38 – Bonusvideo und weiterführende Angebote */
.bonus-section{
  background:linear-gradient(180deg,#f6fbfd 0%,#eef8fb 100%);
}
.bonus-head{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.bonus-head p:last-child{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  color:#60798a;
}
.bonus-video-panel{
  max-width:1000px;
  margin:22px auto 0;
}
.bonus-video-panel .explainer-video{
  aspect-ratio:8/5;
}
.bonus-facts{
  max-width:1000px;
  margin:16px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.bonus-facts>div{
  min-height:92px;
  padding:14px 12px;
  display:flex;
  align-items:center;
  gap:11px;
  border-radius:17px;
  background:#ffffff;
  border:1px solid #d6e7ee;
  box-shadow:0 7px 20px rgba(42,85,107,.05);
}
.bonus-facts b{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dff4fb;
  color:#1e668d;
  font-size:1.05rem;
}
.bonus-facts span{
  color:#4f6e80;
  font-size:.9rem;
  line-height:1.35;
  font-weight:800;
}
.offers-section{
  background:#ffffff;
  padding-top:34px;
}
.offers-section .more-offers{
  margin-top:0;
  border-top:0;
  padding-top:0;
}
@media(max-width:850px){
  .bonus-facts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .bonus-facts{grid-template-columns:1fr;}
}


/* V39 – Bonusblock direkt nach Fortschritt */
.bonus-section{padding-top:34px}
.offers-section{padding-top:18px;padding-bottom:18px}
.parents-section{padding-top:32px}
.sources-section{padding-top:32px}

.bonus-head{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.bonus-head p:last-child{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.bonus-chapters{
  max-width:1000px;
  margin:14px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.bonus-chapters span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#e9f6fb;
  border:1px solid #cfe3eb;
  color:#255d82;
  font-weight:800;
  font-size:.95rem;
}
.bonus-facts{
  margin-top:16px;
}
@media(max-width:700px){
  .bonus-chapters{gap:8px}
  .bonus-chapters span{font-size:.88rem}
}


/* V40 – Bonuswissen erst nach bestandenem Finale */
.bonus-lock-card{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  align-items:center;
  padding:28px 30px;
  border-radius:26px;
  background:linear-gradient(135deg,#f7fcfe,#eaf6fb);
  border:1px solid #cfe4ed;
  box-shadow:0 12px 30px rgba(31,92,134,.08);
}
.bonus-lock-icon{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff6d7;
  border:4px solid #f2d66c;
  font-size:2.7rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.bonus-lock-copy h2{
  margin:4px 0 8px;
  color:#1f5c86;
}
.bonus-lock-copy p:not(.eyebrow){
  max-width:760px;
  color:#5b7686;
  line-height:1.55;
  margin:0 0 16px;
}
.bonus-lock-copy .btn{
  width:max-content;
}
@media(max-width:700px){
  .bonus-lock-card{
    grid-template-columns:1fr;
    text-align:center;
    padding:24px 18px;
  }
  .bonus-lock-icon{
    margin:0 auto;
  }
  .bonus-lock-copy .btn{
    margin:0 auto;
  }
}


/* V42 – professionelleres Bonusvideo */
.bonus-section .media-card video{background:#dfeff6;border-radius:18px}
.bonus-section .media-card{overflow:hidden}
.bonus-head p:last-child{max-width:760px}
.bonus-chapters span{box-shadow:0 4px 10px rgba(31,92,134,.06)}

/* V43 – Bonusvideo statisch, größere Bildfläche */
.bonus-section .media-card video{background:#e6f2f7;border-radius:18px}