:root{--ink:#12163B;--sun:#FFC93C;--coral:#FF5D5D;--mint:#4FD8A8;--cream:#FFF8ED;--charcoal:#1F2430;--line:#E7E1D2;--shadow: 6px 6px 0 var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--charcoal);font-family:Inter,sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:18px 18px;opacity:.05}.wrap{max-width:920px;margin:0 auto;padding:0 20px;position:relative;z-index:1}header.site{padding:22px 0 10px}.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}.brand .dot{width:12px;height:12px;background:var(--coral);border-radius:50%;display:inline-block}.backlink{font-size:.85rem;font-weight:600;color:var(--ink);opacity:.7;text-decoration:none;border-bottom:2px solid var(--ink)}.backlink:hover{opacity:1}.hero{padding:22px 0 6px;text-align:center}.kicker{display:inline-block;font-family:Caveat,cursive;font-size:1.5rem;color:var(--coral);transform:rotate(-2deg)}h1.title{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(1.9rem,5.5vw,3rem);line-height:1.08;margin:6px 0 10px;color:var(--ink)}h1.title span{background:linear-gradient(180deg,transparent 60%,var(--sun) 60%);padding:0 4px}.sub{font-size:1.02rem;max-width:560px;margin:0 auto 8px;color:#43485c}.streakbar{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:22px 0 8px;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.9rem}.stat{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink)}.stat b{color:var(--coral)}.stage{margin-top:22px}.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}.cat-card{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:20px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease;text-align:left}.cat-card:hover{transform:translate(-2px,-2px)}.cat-card .emoji{font-size:1.8rem}.cat-card h3{font-family:"Baloo 2",sans-serif;margin:8px 0 4px;font-size:1.1rem;color:var(--ink)}.cat-card p{margin:0;font-size:.85rem;color:#5a5f74}.panel{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:26px 26px 22px;position:relative;margin-top:6px}.panel .tag{position:absolute;top:-16px;left:22px;background:var(--coral);color:#fff;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.8rem;padding:5px 14px;border-radius:999px;border:2px solid var(--ink)}.coach{display:flex;gap:12px;align-items:flex-start;margin:14px 0 18px}.coach .avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.3rem}.coach .bubble{background:var(--cream);border:2px solid var(--ink);border-radius:14px 14px 14px 2px;padding:10px 14px;font-family:Caveat,cursive;font-size:1.25rem;line-height:1.25;color:var(--ink)}.question-box{background:var(--ink);color:#fff;border-radius:14px;padding:20px 22px;font-family:"Baloo 2",sans-serif;font-size:1.15rem;font-weight:600;margin-bottom:16px;position:relative}.question-box .qnum{font-size:.75rem;font-weight:700;color:var(--sun);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.timerrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:"Baloo 2",sans-serif;font-weight:700;color:var(--coral)}.mic-btn{border:2.5px solid var(--ink);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)}.mic-btn.listening{background:var(--coral);color:#fff}textarea#answerBox{width:100%;min-height:130px;padding:14px;border:2px solid var(--line);border-radius:12px;font-family:Inter,sans-serif;font-size:.98rem;background:#fffdf8;resize:vertical}textarea#answerBox:focus{outline:none;border-color:var(--coral)}.wordcount{font-size:.8rem;color:#8a8f9f;margin-top:6px;text-align:right}.nav-row{display:flex;justify-content:space-between;margin-top:20px;gap:10px;flex-wrap:wrap}button.btn{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;border:2.5px solid var(--ink);border-radius:12px;padding:11px 22px;background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s ease}button.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}button.btn.primary{background:var(--coral);color:#fff}button.btn.gold{background:var(--sun);color:var(--ink)}button.btn.ghost{background:none;box-shadow:none}button.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.feedback{margin-top:22px;border-top:2px dashed var(--line);padding-top:20px;display:none}.meter-row{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}.meter-wrap{flex:1;min-width:180px}.meter-track{background:#eee;border:2px solid var(--ink);border-radius:999px;height:22px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,var(--coral),var(--sun),var(--mint));width:0%;transition:width .6s ease}.meter-label{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.6rem;color:var(--ink);white-space:nowrap}.verdict{font-family:Caveat,cursive;font-size:1.5rem;color:var(--coral);margin:0 0 10px}.tips{background:var(--cream);border:2px solid var(--line);border-radius:12px;padding:14px 18px}.tips ul{margin:6px 0 0;padding-left:20px}.tips li{margin-bottom:6px;font-size:.92rem}.cert-wrap{display:none;text-align:center;margin-top:30px}.certificate{background:#fff;border:4px double var(--ink);border-radius:6px;padding:40px 30px;max-width:520px;margin:0 auto;font-family:Inter,sans-serif;position:relative}.certificate .ribbon{font-family:"Baloo 2",sans-serif;font-weight:800;color:var(--coral);font-size:.85rem;letter-spacing:2px;text-transform:uppercase}.certificate h2{font-family:"Baloo 2",sans-serif;font-size:1.6rem;color:var(--ink);margin:10px 0 4px}.certificate .cname{font-family:Caveat,cursive;font-size:2.2rem;color:var(--ink);margin:14px 0}.certificate .cnote{font-size:.9rem;color:#5a5f74}.lesson-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 16px;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;margin-bottom:14px}.lesson-toggle .arrow{transition:transform .2s ease}.lesson-toggle.open .arrow{transform:rotate(180deg)}.lesson-box{display:none;background:var(--cream);border:2px dashed var(--ink);border-radius:12px;padding:16px 18px;margin:-6px 0 18px;font-size:.9rem;line-height:1.5}.lesson-box.open{display:block}.lesson-box h4{margin:0 0 8px;font-family:"Baloo 2",sans-serif;color:var(--coral);font-size:1rem}.lesson-box .swap{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;margin-top:8px;font-size:.85rem}.lesson-box .swap .bad{color:#b03030;text-decoration:line-through;display:block}.lesson-box .swap .good{color:#1c8a5f;font-weight:600;display:block;margin-top:4px}.share-love{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:18px 22px;max-width:480px;margin:22px auto 0;box-shadow:4px 4px 0 var(--ink);text-align:center}.share-love p{margin:0 0 12px;font-size:.92rem;color:#43485c}.share-love .share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.share-btn{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;border:2px solid var(--ink);border-radius:10px;padding:8px 16px;background:var(--sun);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.share-btn.wa{background:#25d366;color:#0b3b1e}footer.site{text-align:center;padding:40px 0 30px;font-size:.82rem;color:#8a8f9f}@media print{body:before{display:none}header.site,.hero,.streakbar,.cat-grid,.panel,footer.site{display:none!important}.cert-wrap{display:block!important;margin-top:0}}.lang-toggle{text-align:right;margin:0 0 -6px}.lang-toggle a{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.82rem;color:var(--coral);text-decoration:none;border-bottom:2px solid var(--coral)}.lang-toggle a:hover{opacity:.75}@media print{.lang-toggle{display:none!important}}
