@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
:root{--ink:#172033;--muted:#697386;--purple:#7257e8;--purple-dark:#573cc8;--line:#e6dfd2;--paper:#fffaf0;--green:#1f9d63;--red:#dc4c64;--yellow:#ffd85a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 10%,#eee9ff,transparent 30rem),var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(1rem,calc((100vw - 1160px)/2));background:#fff;border-bottom:1px solid var(--line)}header a{color:var(--purple);font-weight:900;text-decoration:none}.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}.brand span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--purple);color:#fff;transform:rotate(-4deg)}main{width:min(1160px,100%);margin:auto;padding:2rem 1rem 5rem}.card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 42px rgba(61,43,25,.1)}.landing{max-width:700px;margin:4vh auto;padding:clamp(1.5rem,5vw,3rem)}.hero-icon{font-size:4rem}.eyebrow{margin:0;color:var(--purple);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.landing h1{font-size:clamp(2.7rem,7vw,4.5rem);letter-spacing:-.05em;line-height:1;margin:.3rem 0}.landing>p:not(.eyebrow){color:var(--muted);font-size:1.05rem;line-height:1.6}.primary,.secondary{padding:.75rem 1rem;border-radius:13px;font-weight:900;border:2px solid transparent}.primary{background:var(--purple);color:#fff;box-shadow:0 4px 0 var(--purple-dark)}.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.landing>button{margin:.4rem .4rem .4rem 0}.join{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}label{display:block;margin:.6rem 0 .3rem;font-weight:900;font-size:.82rem}.join div,.invite>div:last-child{display:flex;gap:.55rem}input,select{width:100%;min-width:0;padding:.75rem;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}.muted{color:var(--muted)}.room{display:grid;gap:1rem}.room-bar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem}.room-bar h1{margin:.15rem 0;font-size:1.6rem}.room-bar p{margin:.15rem 0}.connection{padding:.35rem .65rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem}.connection.online{background:#edfff6;color:#087448;border-color:#8cdfb5}.invite{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:1rem;padding:1rem 1.2rem}.invite p{margin:.2rem 0;color:var(--muted);font-size:.84rem}.lesson-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem;align-items:start}.teacher{padding:1.1rem;position:sticky;top:1rem}.teacher h2{margin:.2rem 0 1rem}.topics{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.topic{border:2px solid var(--line);border-radius:12px;background:#fff;padding:.65rem .35rem;font-weight:900}.topic.active{border-color:var(--purple);background:#f3f0ff;color:var(--purple)}.control-grid{display:grid;gap:.55rem;margin-top:1rem}.teacher-tip{padding:.75rem;border-radius:12px;background:#fff8d9;color:#735b00;font-size:.8rem}.activity{padding:clamp(1rem,4vw,2rem)}.activity-head{display:flex;align-items:start;justify-content:space-between;gap:1rem}.activity-head h2{font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.15;margin:.3rem 0}.stars{display:flex;align-items:center;gap:.25rem;padding:.45rem .7rem;border-radius:999px;background:#fff6c7}.visual{min-height:84px;display:grid;place-items:center;margin:1rem 0;padding:1rem;border-radius:18px;background:linear-gradient(135deg,#f2efff,#fff8d8);font-size:clamp(1.2rem,4vw,2rem);font-weight:900;text-align:center}.choices{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.choice{min-height:72px;padding:.8rem;border:3px solid var(--line);border-radius:17px;background:#fff;color:var(--ink);font-size:1.1rem;font-weight:900}.choice:hover{border-color:var(--purple);transform:translateY(-2px)}.choice.correct{background:#eafff4;border-color:var(--green)}.choice.wrong{background:#fff0f2;border-color:var(--red)}.feedback{margin-top:1rem;padding:.8rem;text-align:center;font-weight:900}.feedback.success{color:var(--green);background:#eafff4;border-radius:13px}.feedback.try{color:#b03248;background:#fff0f2;border-radius:13px}.help{margin-top:.8rem;padding:.85rem 1rem;border-radius:14px}.help p{margin:.25rem 0}.hint{background:#fff8cc;color:#6e5700}.explanation{background:#e9fff4;color:#087448}.block-palette,.program{display:flex;flex-wrap:wrap;gap:.55rem}.block{padding:.75rem 1rem;border:0;border-radius:10px;color:#fff;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.18)}.block.forward{background:#3787e8}.block.turn-left{background:#e85a88}.block.turn-right{background:#e09030}.program-wrap{margin-top:1rem;padding:1rem;border:2px dashed #cfc4f7;border-radius:16px;background:#faf8ff}.program{min-height:60px;align-items:center}.empty-program{color:var(--muted)}.program-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}@media(max-width:820px){.lesson-layout{grid-template-columns:1fr}.teacher{position:static}.topics{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){main{padding:1rem .6rem 3rem}.room-bar{align-items:flex-start}.room-bar h1{font-size:1.25rem}.invite{grid-template-columns:1fr}.invite>div:last-child,.join div{flex-direction:column}.topics{grid-template-columns:1fr 1fr}.choices{grid-template-columns:1fr}.choice{min-height:58px}.activity-head h2{font-size:1.45rem}}