:root{--purple:#6554c0;--purple-dark:#342b70;--mint:#74d6a0;--yellow:#ffd563;--blue:#83d7f5;--pink:#ffbdd3;--ink:#302b50;--muted:#716b89;--white:#fff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(145deg,#edfbf8,#f7f3ff 55%,#fff8dc);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(1080px,calc(100% - 28px));margin:auto;padding:28px 0 18px}.brand{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--yellow);font-size:12px;font-weight:900}.topbar h1{margin:8px 0 0;color:var(--purple-dark);font-size:clamp(27px,5vw,45px)}.topbar p{margin:2px 0;color:var(--muted);font-weight:700}.license-chip{padding:11px 15px;border-radius:999px;background:#fff;box-shadow:0 8px 24px rgba(52,43,112,.12);font-weight:800}main{width:min(980px,calc(100% - 28px));margin:auto}.screen{display:none}.screen.active{display:block}.welcome-card,.finish-card{text-align:center;padding:28px;border:2px solid #ded8f4;border-radius:28px;background:rgba(255,255,255,.93);box-shadow:0 15px 35px rgba(52,43,112,.1)}.mascot,.celebration{font-size:70px;animation:bob 2s ease-in-out infinite}.welcome-card h2,.finish-card h2{margin:8px 0;color:var(--purple-dark);font-size:32px}.welcome-card p,.finish-card p{color:var(--muted);font-size:18px}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}.level-card{position:relative;display:grid;place-items:center;gap:10px;min-height:270px;padding:25px;border:4px solid transparent;border-radius:28px;color:var(--ink);font:inherit;cursor:pointer;transition:.2s;box-shadow:0 12px 28px rgba(52,43,112,.11)}.level-card:hover:not(:disabled),.level-card:focus-visible{transform:translateY(-5px);outline:4px solid var(--yellow)}.level-one{background:#eaf8ff;border-color:#91d6ef}.level-two{background:#f1edff;border-color:#bcb0ef}.level-card:disabled{filter:grayscale(.55);cursor:not-allowed}.level-number{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--purple)}.level-icon{font-size:64px}.level-card strong{font-size:25px}.level-card small{color:var(--muted);font-size:15px}.progress-text{padding:7px 12px;border-radius:999px;background:#fff;font-weight:800}.lock-label{font-size:13px;font-weight:800}.text-btn{display:block;margin:20px auto;padding:10px;border:0;background:transparent;color:var(--purple);text-decoration:underline;cursor:pointer;font-weight:800}.lesson-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.lesson-head>div:nth-child(2){display:grid;text-align:center}.lesson-head span{color:var(--purple);font-size:12px;font-weight:900;letter-spacing:.12em}.lesson-head strong{font-size:21px}.round-btn{width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:var(--purple);font-size:26px;cursor:pointer;box-shadow:0 6px 18px rgba(52,43,112,.15)}.stars{color:#e7a900;font-size:28px;font-weight:900}.lesson-card{padding:20px;border:2px solid #ded8f4;border-radius:30px;background:#fff;box-shadow:0 16px 38px rgba(52,43,112,.12)}.animation-stage{position:relative;display:grid;place-items:center;height:360px;overflow:hidden;border-radius:24px;background:linear-gradient(#bdeaff 0 62%,#bce7b3 62%);isolation:isolate}.scene-object{font-size:125px;filter:drop-shadow(0 12px 10px rgba(30,40,80,.18));animation:scenePop 1.1s ease both}.scene-label{position:absolute;bottom:18px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--purple-dark);font-size:18px;font-weight:900}.person{position:absolute;font-size:125px;left:18%;bottom:62px;animation:walk 3s ease-in-out infinite}.prop{position:absolute;font-size:65px;left:25%;bottom:188px;animation:hatBob 3s ease-in-out infinite}.extra{position:absolute;font-size:85px;right:22%;bottom:76px;animation:scenePop 1s .4s ease both}.red-filter{filter:hue-rotate(320deg) saturate(1.5)}.instruction{text-align:center;padding:16px}.instruction p{margin:0 0 10px;color:var(--muted);font-weight:800}.sound-btn,.check-btn{padding:13px 20px;border:0;border-radius:15px;color:#fff;background:var(--purple);font:800 16px inherit;cursor:pointer}.sound-btn:disabled{opacity:.55;cursor:not-allowed}#answer-form{display:grid;gap:11px;width:min(680px,100%);margin:auto}#answer-form label{text-align:center;font-size:18px;font-weight:900}#answer-input{padding:16px;border:3px solid #d8d1f3;border-radius:16px;text-align:center;color:var(--ink);font:800 21px inherit;text-transform:none}#answer-input:focus{outline:4px solid rgba(255,213,99,.65);border-color:var(--purple)}.check-btn{background:#35aa70}.letter-hint{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}.letter-hint span{display:grid;place-items:center;width:36px;height:42px;border-bottom:3px solid var(--purple);font-weight:900}.feedback{min-height:58px;margin-top:12px;padding:12px;border-radius:15px;text-align:center;font-weight:800}.feedback.good{background:#e2f8e9;color:#17643e}.feedback.try{background:#fff3ce;color:#8a5b00}.finish-card{margin-top:70px}.finish-card .check-btn{margin-top:15px}.expired-card{border-color:#f2b3b3}.muted{color:var(--muted)}footer{text-align:center;padding:30px;color:var(--muted)}@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}@keyframes scenePop{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}@keyframes walk{0%,100%{transform:translateX(-35px) rotate(-3deg)}50%{transform:translateX(75px) rotate(3deg)}}@keyframes hatBob{0%,100%{transform:translate(-35px,-4px) rotate(-8deg)}50%{transform:translate(75px,3px) rotate(4deg)}}@media(max-width:680px){.topbar{align-items:flex-start}.license-chip{font-size:12px}.level-grid{grid-template-columns:1fr}.animation-stage{height:290px}.person{left:8%;font-size:105px}.prop{left:18%;font-size:55px}.extra{right:10%}.lesson-card{padding:13px}}