html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;min-width:320px}body{margin:0}#root{min-height:100vh}:root{--ink:#172331;--muted:#5d6f80;--paper:#fffdf6;--sky:#dff5ff;--leaf:#2f9f6b;--coral:#f46f54;--sun:#f6c445;--sea:#1888a8;--grape:#7657b8;--line:#17233124;--shadow:0 18px 45px #1723311c}*{box-sizing:border-box}body{background:linear-gradient(180deg, #ffffffb8, #ffffff1a 34%), repeating-linear-gradient(90deg, #ffffff61 0 1px, transparent 1px 64px), var(--sky);min-height:100vh;color:var(--ink);margin:0;font-family:Trebuchet MS,Verdana,sans-serif}button,select{font:inherit}button{cursor:pointer}.app{grid-template-columns:280px minmax(0,1fr);min-height:100vh;display:grid}.login-page{place-items:center;min-height:100vh;padding:clamp(18px,4vw,46px);display:grid}.login-card{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:18px;width:min(1120px,100%);min-height:min(760px,100vh - 48px);display:grid}.login-copy,.login-form{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.login-copy{background:radial-gradient(circle at 82% 20%,#f6c445e6 0 72px,#0000 74px),linear-gradient(135deg,#fff8df 0%,#dff5ff 62%,#ddf6e6 100%);align-content:space-between;padding:clamp(22px,4vw,44px);display:grid;position:relative;overflow:hidden}.login-copy h2{letter-spacing:-.08em;max-width:620px;margin:42px 0 14px;font-size:clamp(3rem,8vw,7.4rem);line-height:.88}.login-copy p{max-width:560px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:900;line-height:1.5}.login-scene{min-height:220px;position:relative}.login-scene span{border:4px solid var(--ink);place-items:center;font-weight:900;display:grid;position:absolute;box-shadow:10px 10px #1723311f}.shape-one{background:var(--sun);border-radius:18px;width:150px;height:112px;bottom:12%;left:2%;transform:rotate(-8deg)}.shape-two{background:var(--coral);color:#fff;border-radius:999px;width:180px;height:138px;bottom:26%;left:38%;transform:rotate(7deg)}.shape-three{background:var(--leaf);color:#fff;border-radius:28px 28px 8px 8px;width:164px;height:120px;bottom:8%;right:4%;transform:rotate(-3deg)}.login-form{background:#fffffff2;align-content:center;gap:18px;padding:clamp(22px,4vw,40px);display:grid}.eyebrow{border:1px solid var(--line);width:fit-content;color:var(--sea);letter-spacing:.08em;text-transform:uppercase;background:#fff8df;border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:900}.login-form h3{margin:0 0 6px;font-size:clamp(2rem,4vw,3.4rem);line-height:.95}.login-form label{color:var(--muted);gap:8px;font-weight:900;display:grid}.login-form input{border:2px solid var(--line);width:100%;min-height:58px;color:var(--ink);font:inherit;background:#f8fbff;border-radius:10px;outline:none;padding:0 14px;font-size:1.1rem;font-weight:900}.login-form input:focus{border-color:var(--sea);box-shadow:0 0 0 4px #1888a824}.login-form button{background:var(--ink);color:#fff;min-height:58px;font:inherit;border:0;border-radius:10px;font-weight:900;box-shadow:0 12px #1723311f}.login-form button:disabled{cursor:wait;opacity:.72}.login-error,.login-hint{min-height:22px;margin:0;font-weight:900}.login-error{color:#b7372a}.login-hint{color:var(--muted)}.sidebar{border-right:1px solid var(--line);background:#fff8df;flex-direction:column;gap:24px;height:100vh;padding:24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark,.nav span,.avatar,.lesson-code,.activity b,.badge i{place-items:center;display:grid}.brand-mark{background:var(--ink);color:#fff;border:3px solid #fff;border-radius:8px;width:48px;height:48px;font-weight:900;box-shadow:0 8px #17233124}.brand h1,.student-card h2,.topbar h2,.mission h3,.panel h3,.lesson-card h4{letter-spacing:0;margin:0}.brand h1{font-size:1.55rem}.brand span,.student-card p,.topbar p,.mission p,.lesson-card p,.activity span,.badge small{color:var(--muted);font-weight:700}.student-card,.panel,.mission,.progress-card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.student-card{text-align:center;background:#fff;padding:16px}.avatar{background:var(--avatar);color:#fff;border:6px solid #dff5ff;border-radius:18px;width:104px;height:104px;margin:0 auto 12px;font-size:3rem;font-weight:900}.stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;display:grid}.stats div{border:1px solid var(--line);background:#f8fbff;border-radius:8px;padding:10px}.stats strong{font-size:1.25rem;display:block}.stats span{color:var(--muted);font-size:.78rem;font-weight:900}.nav{gap:10px;display:grid}.nav button{color:var(--ink);text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:10px;padding:12px;font-weight:900;display:flex}.nav button.active{border-color:var(--line);background:#fff}.nav span{background:var(--sun);border-radius:8px;width:28px;height:28px}.main{gap:24px;padding:28px;display:grid}.topbar,.panel-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.topbar h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1}.actions{flex-wrap:wrap;gap:10px;display:flex}.actions button,.actions select,.mission button,.progress-card button,.lesson-card button,.panel-head button{border:1px solid var(--line);min-height:42px;color:var(--ink);background:#fff;border-radius:8px;padding:0 12px;font-weight:900;box-shadow:0 8px 20px #17233112}.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;display:grid}.mission{background:#fff;grid-template-columns:minmax(0,1fr) 240px;gap:24px;padding:24px;display:grid;position:relative;overflow:hidden}.mission:before{content:"";background:linear-gradient(90deg, var(--leaf), var(--sun), var(--coral), var(--sea));height:10px;position:absolute;inset:auto 0 0}.mission span{color:var(--sea);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:900}.mission h3{margin-top:12px;font-size:clamp(1.8rem,4vw,3.25rem);line-height:1.04}.mission p{margin-top:14px;line-height:1.55}.cta-row{flex-wrap:wrap;gap:10px;margin-top:22px;display:flex}.mission button:first-child,.progress-card button{background:var(--ink);border-color:var(--ink);color:#fff}.scene{border:1px solid var(--line);background:linear-gradient(#bdefff 0 58%,#9ddc89 58% 100%);border-radius:8px;min-height:250px;position:relative;overflow:hidden}.sun{background:var(--sun);border-radius:50%;width:70px;height:70px;position:absolute;top:22px;right:24px}.book,.rocket{border:4px solid var(--ink);border-radius:8px;place-items:center;font-weight:900;display:grid;position:absolute}.book{background:var(--paper);width:92px;height:72px;bottom:44px;left:28px}.rocket{background:var(--grape);color:#fff;border-radius:45px 45px 8px 8px;width:92px;height:116px;font-size:3rem;bottom:42px;right:50px}.progress-card{color:#fff;background:#153041;align-content:space-between;place-items:center;gap:18px;padding:22px;display:grid}.ring{aspect-ratio:1;background:conic-gradient(var(--sun) var(--progress), #ffffff29 0);border-radius:50%;place-items:center;width:190px;display:grid;position:relative}.ring:after{content:"";border-radius:inherit;background:#153041;position:absolute;inset:18px}.ring strong,.ring span{z-index:1;position:relative}.ring strong{font-size:2.45rem}.ring span{color:#ffffffbd;font-weight:900;display:block}.workspace{grid-template-columns:repeat(12,1fr);gap:18px;display:grid}.panel{background:#ffffffe6;padding:20px}.lessons{grid-column:span 8}.quiz{grid-column:span 4}.match,.badges{grid-column:span 6}.teacher{grid-column:span 12}.tabs,.lesson-list,.answers,.match-grid,.badge-grid,.activity-list{gap:10px;display:grid}.tabs{grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0}.tabs button{border:1px solid var(--line);min-height:54px;color:var(--ink);background:#fff;border-radius:8px;font-weight:900}.tabs button.selected{background:var(--tab);border-color:var(--tab);color:#fff}.lesson-card{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;display:grid}.lesson-code{background:var(--lesson);color:#fff;border-radius:8px;width:58px;height:58px;font-weight:900}.track{background:#edf2f4;border-radius:999px;height:10px;margin-top:10px;overflow:hidden}.track i{height:100%;display:block}.question{border:1px solid var(--line);background:#fff8df;border-radius:8px;gap:8px;margin:14px 0;padding:18px;display:grid}.question strong{font-size:clamp(1.8rem,5vw,3rem);line-height:1}.answers,.match-grid,.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.answers button,.match-grid button{border:2px solid var(--line);min-height:64px;color:var(--ink);background:#fff;border-radius:8px;font-size:1.2rem;font-weight:900}.match-grid button.picked{border-color:var(--sea);background:#e4f7ff}.match-grid button.done{border-color:var(--leaf);color:#1e6e4c;background:#ddf6e6}.feedback{min-height:28px;color:var(--muted);margin:12px 0 0;font-weight:900}.badge{text-align:center;border:1px solid var(--line);opacity:.44;background:#fff;border-radius:8px;place-items:center;gap:6px;min-height:112px;padding:12px;display:grid}.badge.open{opacity:1}.badge i{color:#fff;border-radius:8px;width:38px;height:38px;font-style:normal;font-weight:900}.activity{grid-template-columns:38px minmax(0,1fr);align-items:start;gap:10px;display:grid}.activity b{background:var(--sun);border-radius:8px;width:38px;height:38px}.activity strong,.activity span{display:block}.toast{background:var(--ink);color:#fff;max-width:min(360px,100% - 44px);box-shadow:var(--shadow);z-index:10;border-radius:8px;padding:14px 16px;font-weight:900;transition:transform .24s;position:fixed;bottom:22px;right:22px;transform:translateY(140%)}.toast.show{transform:translateY(0)}@media (width<=1080px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:static}.hero-grid,.mission,.login-card{grid-template-columns:1fr}.login-card{min-height:auto}.lessons,.quiz,.match,.badges,.teacher{grid-column:span 12}}@media (width<=680px){.main,.sidebar{padding:16px}.topbar,.panel-head{flex-direction:column;align-items:stretch}.tabs,.answers,.match-grid,.badge-grid{grid-template-columns:1fr}.lesson-card{grid-template-columns:48px minmax(0,1fr)}.lesson-card button{grid-column:1/-1}.login-page{place-items:stretch stretch;padding:14px}.login-scene{min-height:160px}.login-scene span{transform:none}.shape-one,.shape-two,.shape-three{width:30%;min-width:86px;height:86px;font-size:.85rem}}