:root{--navy:#073b72;--blue:#2879f6;--cyan:#22c7dd;--violet:#7057ef;--mint:#37d5a1;--yellow:#ffd65c;--ink:#0a315c;--paper:#f8fcff;--shadow:0 14px 0 rgba(8,65,126,.16),0 22px 50px rgba(10,55,105,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:linear-gradient(145deg,#80c9ff,#d9f6ff 48%,#b9b5ff);min-height:100vh}.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.sky:before,.sky:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);background:#ffffff55;width:34rem;height:34rem;top:10%;right:-12rem}.sky:after{width:27rem;height:27rem;top:auto;right:auto;bottom:-10rem;left:-8rem;background:#6fe5cb66}.sky i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff9;animation:float 6s infinite ease-in-out}.sky i:nth-child(1){left:18%;top:22%}.sky i:nth-child(2){left:72%;top:40%;animation-delay:-2s}.sky i:nth-child(3){left:43%;top:76%;animation-delay:-4s}@keyframes float{50%{transform:translateY(-24px) scale(1.4)}}button,a{font:inherit}.topbar{width:min(1200px,calc(100% - 32px));margin:18px auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:2px solid #fff9;border-radius:22px;background:#ffffffdf;box-shadow:0 8px 24px #19599522;backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:900;text-decoration:none}.brand img{width:52px;height:52px;object-fit:contain}.top-actions{display:flex;gap:8px}.icon-btn,.home-btn{border:0;background:#e8f5ff;color:var(--navy);border-radius:14px;padding:12px;text-decoration:none;font-weight:800;cursor:pointer}.icon-btn{width:48px}main{width:min(1200px,calc(100% - 32px));margin:auto}.hero{min-height:390px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;padding:48px clamp(24px,5vw,70px);border:2px solid #ffffffc7;border-radius:36px;background:linear-gradient(120deg,#20bfd8,#3b82f6 55%,#7357ef);color:white;box-shadow:var(--shadow);overflow:hidden}.eyebrow,.section-kicker,.level-tag{display:inline-block;padding:7px 13px;border-radius:999px;background:#ffffff28;border:1px solid #ffffff77;font-weight:800}.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;margin:16px 0;text-shadow:0 5px 0 #0a4c9b66}.hero p{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;line-height:1.8;max-width:700px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.primary,.secondary{border:0;border-radius:16px;padding:14px 22px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #064faf;transition:.18s transform}.primary{background:linear-gradient(135deg,#ffdd5b,#ff9c41);color:#143e70}.secondary{background:#eef8ff;color:#0e4f91}.primary:hover,.secondary:hover{transform:translateY(-2px)}.hero-art{position:relative;min-height:300px;display:grid;place-items:center}.hero-art img{width:min(330px,100%);filter:drop-shadow(0 24px 22px #073b7266);animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-12px) rotate(1deg)}}.orbit{position:absolute;padding:9px 16px;background:white;color:#174c84;border-radius:14px;font-weight:900;box-shadow:0 8px 18px #063e7c44}.orbit.one{top:20%;left:4%}.orbit.two{bottom:16%;right:3%}.orbit.three{top:8%;right:16%;background:var(--yellow);font-size:1.5rem}.dashboard{margin:28px 0;display:grid;grid-template-columns:repeat(3,1fr) 2fr;gap:12px}.dashboard>div{background:#ffffffdf;border:2px solid white;border-radius:20px;padding:17px;display:flex;flex-direction:column;box-shadow:0 8px 22px #1c5c9520}.dashboard b{font-size:1.65rem}.dashboard span{font-weight:700}.dash-progress{justify-content:center}.dash-progress progress,.skill-bars progress{width:100%;height:13px;accent-color:var(--mint)}.map-section,.method{padding:36px;border-radius:32px;background:#f7fcffdd;border:2px solid white;box-shadow:var(--shadow);margin:28px 0}.map-section>header{display:flex;align-items:end;justify-content:space-between;gap:24px}.map-section h2,.method h2{font-size:clamp(1.7rem,4vw,2.7rem);margin:8px 0}.section-kicker{background:#ddf1ff;color:#1761a7}.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}.topic{position:relative;text-align:right;border:2px solid white;border-radius:22px;padding:20px;background:linear-gradient(145deg,#eaf8ff,#dbe7ff);color:var(--ink);box-shadow:0 7px 0 #82b7e4;cursor:pointer;min-height:185px;transition:.2s}.topic:hover{transform:translateY(-5px)}.topic[data-state=mastered]{background:linear-gradient(145deg,#c9ffe9,#a6efcf)}.topic .topic-icon{font-size:2.2rem}.topic h3{margin:10px 0 2px}.topic small{font-weight:900;color:#3371ad}.topic p{font-size:.9rem;line-height:1.6}.topic-meter{height:8px;border-radius:10px;background:#b8d0e5;overflow:hidden}.topic-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--yellow));width:var(--value)}.lesson-app{display:grid;grid-template-columns:290px 1fr;gap:18px;margin:30px 0;align-items:stretch}.lesson-app>aside,.exercise-card{border:2px solid white;border-radius:28px;background:#f8fcffeb;box-shadow:var(--shadow);padding:26px}.lesson-app aside h2{font-size:2rem}.level-tag{background:#dceeff}.skill-bars{display:grid;gap:16px;margin:28px 0}.skill-bars label{font-weight:800}.text-btn{border:0;background:none;color:#1662aa;text-decoration:underline;cursor:pointer}.exercise-card header{display:flex;justify-content:space-between;font-weight:900;color:#3475b4}.question-progress{height:10px;background:#d7e8f4;border-radius:9px;margin:14px 0 28px;overflow:hidden}.question-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--yellow));transition:.4s;width:0}.exercise-card h3{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5}.answer-area{min-height:190px;display:flex;gap:12px;flex-wrap:wrap;align-content:center;justify-content:center;padding:16px;border-radius:20px;background:linear-gradient(145deg,#e8f5ff,#eae8ff)}.answer-option,.word-chip{border:2px solid #a8cef2;border-radius:15px;padding:15px 19px;background:white;color:var(--ink);font-weight:900;cursor:pointer;box-shadow:0 5px 0 #9ebede}.answer-option{min-width:180px}.answer-option.selected{border-color:#5c52ea;background:#e3e0ff}.word-chip.used{opacity:.35}.order-zone{width:100%;min-height:72px;border:2px dashed #7aaee0;border-radius:16px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.text-answer{width:min(600px,100%);padding:17px;border:3px solid #afd2f2;border-radius:14px;font-size:1.15rem;direction:ltr}.listen-btn{border:0;border-radius:16px;background:#25aee8;color:white;font-weight:900;padding:12px 18px;margin-bottom:12px;cursor:pointer}.feedback{padding:18px;border-radius:18px;margin:16px 0;font-weight:800;line-height:1.7}.feedback.correct{background:#d9f9e8;color:#116747}.feedback.wrong{background:#ffe0e5;color:#92213b}.exercise-card footer{display:flex;gap:12px;margin-top:20px}.method>div{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.method article{background:white;border-radius:20px;padding:20px}.method article b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yellow)}.celebration{position:fixed;inset:0;display:grid;place-content:center;background:#082e6099;z-index:20;text-align:center}.celebration span{font-size:7rem;animation:pop .7s ease infinite alternate}.celebration b{color:white;font-size:2rem}@keyframes pop{to{transform:scale(1.2) rotate(8deg)}}[hidden]{display:none!important}@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{min-height:220px}.dashboard{grid-template-columns:repeat(2,1fr)}.topic-grid{grid-template-columns:repeat(2,1fr)}.lesson-app{grid-template-columns:1fr}.method>div{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){main,.topbar{width:min(100% - 16px,1200px)}.topbar{align-items:flex-start}.brand span{display:none}.hero{padding:30px 18px;border-radius:25px}.hero h1{font-size:2.6rem}.hero-art{display:none}.dashboard{grid-template-columns:1fr 1fr}.dash-progress{grid-column:1/-1}.map-section,.method{padding:20px 14px}.map-section>header{display:block}.topic-grid{grid-template-columns:1fr}.method>div{grid-template-columns:1fr}.exercise-card,.lesson-app>aside{padding:18px}.exercise-card footer{position:sticky;bottom:6px;background:#f8fcff;padding:10px;border-radius:16px}.answer-option{width:100%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Interactive exercise controls */
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.choice-grid button,.word-bank button,.order-output button{min-height:58px;border:2px solid #b8d7f5;border-radius:18px;background:#f8fbff;color:#123d70;font:800 1.05rem/1.35 inherit;box-shadow:0 5px 0 #8fc2ee;cursor:pointer;padding:12px 16px;transition:.18s ease}
.choice-grid button:hover,.word-bank button:hover{transform:translateY(-2px);border-color:#3978f5}
.choice-grid button.selected{color:#fff;background:linear-gradient(135deg,#307cf6,#6955ef);border-color:#fff;box-shadow:0 6px 0 #174eae}
.order-output,.word-bank{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;min-height:84px;padding:14px;border:2px dashed rgba(38,99,173,.34);border-radius:20px;background:rgba(255,255,255,.55)}
.word-bank{margin-top:16px;background:rgba(215,240,255,.8)}
.word-bank button:disabled{opacity:.3;transform:none;box-shadow:none;cursor:default}
.write-answer{display:grid;gap:10px;width:min(760px,100%);margin:auto;text-align:right;color:#123d70;font-weight:850}
.write-answer input{width:100%;min-height:62px;border:3px solid #a8d5f8;border-radius:18px;background:#fff;color:#102f55;font:800 1.18rem/1.4 inherit;padding:12px 18px;outline:none;direction:ltr;text-align:left}
.write-answer input:focus{border-color:#3978f5;box-shadow:0 0 0 5px rgba(57,120,245,.14)}
.answer-area.incorrect{animation:grammarShake .34s ease}
.feedback.neutral{background:#edf7ff;color:#28517b;border-color:#b9dcfa}
.no-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes grammarShake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@media(max-width:560px){.choice-grid{grid-template-columns:1fr}.choice-grid button,.word-bank button,.order-output button{min-height:52px}.order-output,.word-bank{padding:10px}}