:root{font-family:ui-rounded,'Microsoft YaHei','PingFang SC',system-ui,sans-serif;color:#152448;background:#f1f5ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:4px}a{color:#214bd5;text-decoration:none}header{max-width:1100px;margin:auto;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;gap:13px;align-items:center;color:#152448;font-size:19px;font-weight:800}.brand small{display:block;font-size:11px;letter-spacing:2px;margin-top:5px;color:#647398}.brandmark{background:#214bd5;color:white;width:48px;height:48px;display:grid;place-items:center;border-radius:17px 17px 17px 4px;font-size:29px;transform:rotate(-6deg)}#header-actions{display:flex;gap:16px;font-size:14px;align-items:center}main{max-width:1050px;padding:25px 30px;margin:auto;min-height:75vh}h1{font-size:clamp(29px,4vw,46px);letter-spacing:-1px;margin:10px 0 15px;line-height:1.25}h2{font-size:23px;margin:0 0 15px}p{line-height:1.8}small,.muted{color:#647398}.eyebrow{color:#214bd5;font-weight:800;font-size:13px;letter-spacing:2px}.card{background:white;border:1px solid #e1e7f5;border-radius:25px;padding:30px;box-shadow:0 10px 30px #1b3b8010}.welcome{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;min-height:530px}.welcome .intro{padding:20px 0}.lead{font-size:18px;max-width:460px;color:#566584}.chips{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0}.chip{padding:9px 13px;background:#e1e9ff;border-radius:20px;color:#214bd5;font-size:14px;font-weight:700}.visual{font-size:58px;letter-spacing:12px;margin:25px 0}.login{border-top:7px solid #ffc841}.login label{display:block;font-weight:700;margin:25px 0 10px}.login input,input,textarea{border:2px solid #dce4f5;border-radius:12px;padding:14px;width:100%;background:#fbfcff;color:#152448;min-width:0}.login input{letter-spacing:2px}.btn,button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:13px 20px;font-weight:700;min-height:48px;background:#eaf0ff;color:#214bd5}.primary{background:#214bd5;color:white;box-shadow:0 4px 0 #13338f}.primary:hover{background:#163bb6}.wide{width:100%;margin-top:20px}.link{background:transparent;padding:0;min-height:32px;font-size:14px}button:disabled{opacity:.45;cursor:default}.notice{padding:14px 18px;border-radius:14px;background:#fff7d8;color:#775614;font-size:14px;line-height:1.7}.error{color:#b62143}.topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.topline h1{font-size:30px}.streak{background:#fff0b1;border-radius:18px;padding:15px 22px;color:#70500c;white-space:nowrap}.streak strong{font-size:26px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:22px}.play{text-align:center;min-height:490px;position:relative;overflow:hidden}.task-tag{display:flex;align-items:center;justify-content:space-between;color:#647398;font-size:14px}.wordicon{font-size:90px;line-height:1.25;margin:22px 0 4px}.meaning{font-size:27px;font-weight:800;margin:0 0 12px}.sound{background:#edf2ff;color:#214bd5;border-radius:30px;font-size:15px}.slots,.letters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:26px 0}.slot,.letter{width:49px;height:55px;padding:0;font-size:28px;min-height:48px;border-radius:11px}.slot{background:#f3f6ff;border:2px dashed #bac9eb;color:#214bd5}.slot.filled{border:2px solid #214bd5;background:#e9efff}.letter{background:#fff4cf;color:#64470c;box-shadow:0 4px 0 #e2c572}.letter:disabled{visibility:hidden}.play-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.feedback{min-height:30px;font-weight:700;color:#214bd5;font-size:16px}.hint{font-size:22px;letter-spacing:5px;color:#577096;min-height:29px}.side h2{font-size:19px}.side .card{padding:23px;margin-bottom:18px}.path{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.dot{aspect-ratio:1;background:#e9eef9;border-radius:50%;display:block}.dot.done{background:#ffc841}.side p{font-size:14px}.side ol{padding-left:20px;line-height:2;font-size:14px;color:#566584}.review{margin-top:25px}.review-head{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.wordlist{display:flex;flex-wrap:wrap;gap:10px}.review-word{background:white;border:1px solid #d7e1f4;font-size:16px;padding:10px 15px}.success-icon{font-size:80px;margin:45px 0 20px}.progress{height:9px;background:#e7edfa;border-radius:9px;overflow:hidden;margin:16px 0}.progress i{display:block;background:#214bd5;height:100%;width:0}.teacher-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.teacher-grid label{display:block;margin:15px 0 7px;font-size:14px;font-weight:700}textarea{min-height:120px;resize:vertical}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap;font-size:14px}td,th{padding:14px 12px;border-bottom:1px solid #e7edf7}td button{font-size:13px;min-height:36px;padding:8px}.credentials{white-space:pre-wrap;overflow-wrap:anywhere;background:#eef3ff;padding:17px;border-radius:12px;font-family:inherit;line-height:1.9}footer{text-align:center;padding:30px;color:#647398;font-size:14px}footer span,footer small{display:block;margin-top:8px}footer small{font-size:12px}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:14px 23px;max-width:90vw;border-radius:12px;background:#152448;color:white;display:none;z-index:9}.minihelp{font-size:14px;line-height:1.8}.teacher-full{margin-top:22px}.restbox{padding:15px 0 35px}.empty{color:#647398;font-size:15px}.join-note{font-size:13px;line-height:1.8;margin-bottom:0}@media(max-width:760px){header{padding:20px}.brand{font-size:16px}.brand small{font-size:9px;letter-spacing:1px}.brandmark{width:40px;height:40px}main{padding:10px 16px}.welcome{grid-template-columns:1fr;gap:5px;min-height:auto}.welcome .intro{padding:12px 8px}.visual{display:none}.lead{font-size:16px;margin:0}.chips{margin:18px 0}.card{padding:23px;border-radius:20px}.workspace{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.side .card{padding:16px}.side ol{padding-left:16px}.topline{gap:10px}.topline h1{font-size:24px}.streak{padding:10px;font-size:13px}.streak strong{font-size:22px}.teacher-grid{grid-template-columns:1fr}.wordicon{font-size:78px}.slot,.letter{width:39px;height:49px;font-size:25px}.slots,.letters{gap:6px}.play{min-height:465px}.task-tag{font-size:13px}.review-head h2{font-size:21px}h1{font-size:32px}}@media(prefers-reduced-motion:no-preference){button{transition:transform .15s,background .15s}button:active{transform:translateY(2px)}}
