@import url('classroom.css');
body{margin:0;padding:0;background:#fcfaf5;color:#243f46;font-family:system-ui,sans-serif}header,main,footer{max-width:1200px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px}.brand{font-size:25px;font-weight:850;display:flex;gap:12px;line-height:1.05;text-decoration:none;color:#243f46}nav{display:flex;align-items:center;gap:28px}nav a{text-decoration:none;font-size:14px;color:#243f46}main{padding:0 32px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:65px 0 80px;background:none;box-shadow:none;border:0;margin:0}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:800;color:#776094}h1{font-size:clamp(46px,5.6vw,76px);line-height:1.06;letter-spacing:-4px;margin:25px 0}h1 em{font-style:normal;color:#7651c7}h2{font-size:33px;letter-spacing:-1.2px;line-height:1.2}p{line-height:1.7;color:#617475}.hero p{max-width:430px;font-size:17px}.button,.outline{display:inline-block;border-radius:14px;background:#7651c7;color:white;padding:16px 22px;text-decoration:none;font-size:14px;font-weight:700}.outline{background:transparent;border:1px solid #c5c9bc;color:#243f46}.small{padding:12px 18px}.actions{display:flex;gap:12px;margin-top:30px}.note{font-size:12px!important}.illustration{position:relative;background:#efe8f7;border-radius:48% 45% 40% 43%;padding:30px 0}.illustration svg{width:100%}.bubble{position:absolute;padding:13px 19px;border-radius:20px;background:white;box-shadow:0 8px 15px #243f4610;font-weight:800}.one{top:10px;left:30px;transform:rotate(-9deg)}.two{top:50px;right:0;background:#e0f3e9;transform:rotate(8deg)}.three{bottom:18px;left:30px;background:#fce3d5;transform:rotate(-5deg)}section{border:0;box-shadow:none;background:none;padding:0}.section-head{display:flex;align-items:center;justify-content:space-between}.section-head p{font-size:13px}.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.course{background:#edf4eb;border:0;padding:27px;border-radius:22px}.course:nth-child(2){background:#ede7f8}.course:nth-child(3){background:#fff0d3}.course h3{font-size:25px;margin:15px 0 5px}.course p{font-size:13px}.course button{background:white;color:#243f46;margin:10px 0 0}.course .letter{font-size:40px;font-weight:800}.class-banner{display:grid;grid-template-columns:1fr 1fr;background:#f0ede4;padding:40px;gap:50px;border-radius:28px;margin:65px 0}.class-banner p{font-size:14px}.levels span{display:inline-block;background:white;padding:8px 12px;margin:4px;border-radius:20px;font-size:12px}.levels p{font-size:11px}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:50px}canvas{display:block;width:100%;background:white;border:1px solid #bfcaca;border-radius:15px;touch-action:none}footer{padding:60px 32px 30px;color:#617475;font-size:13px}#lesson{background:white;padding:25px;border:1px solid #deddf0;border-radius:25px}.word{display:inline-flex;flex-direction:column;padding:16px;margin:8px;background:#ede7f8;border-radius:16px}.word button{font-size:15px}#status:empty{display:none}@media(max-width:760px){header{padding:20px}nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}nav>a:first-child{display:none}main{padding:0 20px}.hero{grid-template-columns:1fr;padding-top:25px;gap:20px}h1{letter-spacing:-2px}.illustration{max-width:380px;margin:auto}.courses,.class-banner,.bottom{grid-template-columns:1fr}.section-head{display:block}.class-banner{padding:25px;gap:10px}.actions{flex-wrap:wrap}}
/* Happy, spacious learning surfaces */
body{background:linear-gradient(145deg,#fffaf2,#f6efff 48%,#effbff);font-family:'Trebuchet MS',system-ui,sans-serif}header{border-bottom:2px solid #ffffff}.brand{color:#6743ac}h1,h2,h3{font-family:'Trebuchet MS',system-ui,sans-serif}h1{line-height:1.12}h1 em{color:#8652d0}.hero{padding:45px 0}.hero .button{background:#8050c8;box-shadow:0 5px 0 #d5c2f1}.button,button,.outline{border-radius:22px;transition:transform .18s,box-shadow .18s}.button:hover,button:hover{transform:translateY(-3px)}.button:active,button:active{transform:translateY(1px)}.illustration{background:#e8dcfb;border:5px solid white;box-shadow:0 12px 0 #e0d6ee}.bubble{animation:bob 4s ease-in-out infinite}.two{animation-delay:.7s}.three{animation-delay:1.4s}.quick-start{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 55px}.quick-start>div{background:#fff;border:3px solid white;border-radius:24px;padding:20px;display:grid;grid-template-columns:42px 1fr;column-gap:14px;box-shadow:0 5px 0 #e5ddf0}.quick-start span{grid-row:span 2;background:#eee2ff;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:22px;color:#8050c8;font-weight:900}.quick-start small{margin-top:5px;color:#657e82}.courses{grid-template-columns:repeat(4,minmax(0,1fr))}.course{border:4px solid white;box-shadow:0 7px 0 #dfdbed;border-radius:30px;padding:22px 18px;transition:transform .2s}.course:hover{transform:translateY(-5px)}.course:nth-child(1){background:#ffe5ec}.course:nth-child(2){background:#ece1ff}.course:nth-child(3){background:#dcf6e9}.course:nth-child(4){background:#fff0c9}.course .letter{font-size:28px;min-height:45px;display:block}.course h3{font-size:23px}.course select{font-size:14px;border:2px solid #fff;border-radius:16px}.course button{width:100%;border:2px solid white;box-shadow:0 4px 0 #00000010;border-radius:18px}.quest{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#fff4d5;border:4px solid white;border-radius:30px;padding:28px;margin:35px 0}.quest h2{font-size:25px}.progress-track{height:14px;border-radius:20px;background:#e5d6aa;overflow:hidden;max-width:500px}.progress-track>div{height:100%;width:0;background:#8bc9ac;border-radius:20px;transition:width .5s}.class-banner{border:4px solid white;background:#e9e1f8;border-radius:32px}.levels span{box-shadow:0 3px 0 #d9cdea}.word{border:3px solid white;box-shadow:0 4px 0 #e0d5f0;border-radius:22px;min-width:130px}.word small{padding:5px 10px}.word .pinyin{font-size:17px;color:#6743ac}.bottom>div{background:#fff;padding:26px;border-radius:28px;box-shadow:0 6px 0 #e0d9ea}#lesson{border:4px solid #eadcf9;border-radius:30px;scroll-margin-top:20px}#lesson h3{margin-top:28px}#check{font-weight:bold;color:#5b438b}#status{z-index:50;max-width:700px;margin:10px auto}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #7b51b8;outline-offset:4px}@keyframes bob{50%{transform:translateY(-7px) rotate(3deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:1000px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.quick-start{gap:8px}.quick-start>div{display:block;text-align:center;padding:12px 7px}.quick-start span{margin:0 auto 9px}.quick-start b,.quick-start small{display:block}.quick-start small{font-size:11px}.courses{grid-template-columns:1fr}.course{padding:22px}.quest{display:block}.quest .button{margin-top:20px}.hero{padding-top:30px}nav .small{font-size:12px;padding:12px}.bottom{gap:25px}}

.language-picker a{display:flex;flex-direction:column;gap:8px;text-decoration:none;white-space:normal;padding:24px;min-height:88px;justify-content:center}.language-picker a span{font-size:16px;font-weight:500}.welcome-card h1{font-size:clamp(30px,5vw,52px)}[hidden]{display:none!important}.change-language{display:inline-block;margin:8px;padding:10px;font-weight:700}.word button[data-slow]{font-size:16px;padding:10px}.simple-home .intro-note{overflow-wrap:anywhere}