*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:#111735;background:#f7f8ff}body{display:flex;justify-content:center}.app{width:100%;max-width:520px;min-height:100vh;background:linear-gradient(180deg,#fff 0%,#f7f8ff 100%);position:relative;overflow:hidden}.topbar{height:74px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:22px;font-weight:800;letter-spacing:-.7px}.logo span:last-child{color:#4b45f5}.logo-mark{display:inline-flex;width:34px;height:28px;border-radius:11px;background:linear-gradient(135deg,#4d8cff,#493cf4);color:white;align-items:center;justify-content:center;font-size:13px;margin-right:7px;vertical-align:2px;box-shadow:0 8px 20px #4b45f530}.icon-btn{border:0;background:none;font-size:25px;color:#111735}.screen{padding:8px 20px 110px}.hero{text-align:center;padding:28px 0 10px}.eyebrow{font-weight:700;color:#4b45f5;letter-spacing:1.8px;font-size:13px}.hero h1{font-size:44px;line-height:.98;letter-spacing:-2.2px;margin:14px 0 18px}.hero h1 span{color:#4b45f5}.hero p{font-size:20px;line-height:1.35;color:#505875;margin:0 auto;max-width:390px}.hero-art{margin:25px auto 18px;width:280px;height:190px;border-radius:50% 50% 45% 55%;background:#eef0ff;display:flex;align-items:center;justify-content:center;font-size:78px;box-shadow:0 25px 55px #6670ff18}.facts{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #e9eafd;border-radius:24px;padding:18px 8px;box-shadow:0 12px 35px #3f49a010}.fact{text-align:center;border-right:1px solid #e5e7f3;font-size:14px;color:#4d5570}.fact:last-child{border:0}.fact b{display:block;font-size:16px;color:#111735;margin-top:5px}.primary{width:100%;border:0;border-radius:18px;padding:19px 22px;margin-top:22px;background:linear-gradient(135deg,#554eff,#3938ee);color:white;font-size:19px;font-weight:700;box-shadow:0 15px 30px #4a45f044;cursor:pointer}.subnote{text-align:center;color:#66708c;font-size:13px;margin:14px 0}.card{background:white;border:1px solid #e7e9f5;border-radius:24px;padding:20px;box-shadow:0 12px 35px #3f49a00d;margin:14px 0}.progress-row{display:flex;justify-content:space-between;color:#5d6681;font-size:14px;margin:8px 0}.progress{height:9px;background:#eceef7;border-radius:20px;overflow:hidden;margin-bottom:20px}.progress i{display:block;height:100%;background:#4b45f5;border-radius:20px}.question-card h2{font-size:25px;line-height:1.3;margin:10px 0 8px}.category{color:#4b45f5;font-weight:700}.translation{color:#68708a;font-size:15px}.option{display:flex;align-items:center;width:100%;text-align:left;border:1px solid #e0e3f0;background:#fff;border-radius:15px;padding:16px;margin:10px 0;font-size:17px;font-weight:600;color:#171c38;cursor:pointer}.option.selected{border:2px solid #4b45f5;background:#f3f3ff}.radio{width:20px;height:20px;border:2px solid #b8bfd3;border-radius:50%;margin-right:13px}.selected .radio{border:6px solid #4b45f5}.tip{background:#f5f5ff;border-radius:18px;padding:14px;color:#555e78;font-size:13px;line-height:1.45}.actions{display:flex;gap:10px}.secondary{flex:0 0 100px;border:1px solid #dfe2f0;background:#fff;border-radius:16px;font-weight:600;color:#4b45f5}.actions .primary{margin:0;flex:1}.result{text-align:center}.level-badge{font-size:74px;font-weight:800;color:#4b45f5;letter-spacing:-4px;margin:8px 0}.level-name{font-size:24px;font-weight:700}.result-desc{color:#59627e;line-height:1.5}.skills{text-align:left;margin-top:25px}.skill{margin:15px 0}.skill-head{display:flex;justify-content:space-between;font-weight:600}.bar{height:8px;background:#eceef7;border-radius:10px;margin-top:7px}.bar i{display:block;height:100%;border-radius:10px;background:#4b45f5}.recommend{border:2px solid #5b57ff;background:#f4f3ff}.tag{display:inline-block;border:1px solid #7772ff;color:#4b45f5;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;margin:5px 0}.program{display:block;text-align:left}.program h3{font-size:22px;margin:5px 0}.program p{color:#5d6681;line-height:1.45}.program .level{color:#4b45f5;font-weight:700}.program .chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:12px;background:#f3f4fa;border-radius:9px;padding:7px 9px}.programs-title h1{font-size:34px;letter-spacing:-1.5px;margin:10px 0}.programs-title p{color:#606983}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:76px;background:#fff;border-top:1px solid #e8e9f2;display:grid;grid-template-columns:repeat(3,1fr);z-index:10}.bottom-nav button{border:0;background:white;color:#66708b;font-size:22px}.bottom-nav button:first-child{color:#4b45f5}.bottom-nav small{display:block;font-size:11px;margin-top:2px}.hidden{display:none}.back{border:0;background:none;color:#4b45f5;font-size:15px;font-weight:600;padding:5px 0}.menu-panel{position:fixed;inset:0;background:#111735cc;z-index:20;display:flex;justify-content:flex-end}.menu{width:82%;max-width:380px;background:white;height:100%;padding:28px}.menu button{display:block;width:100%;text-align:left;padding:15px 0;border:0;background:none;font-size:18px}.close{float:right;border:0;background:none;font-size:25px}@media(min-width:700px){.app{box-shadow:0 0 70px #2e356018}.screen{padding-left:32px;padding-right:32px}}
.blank{display:inline-block;width:92px;height:1.05em;border-bottom:3px solid #171c38;vertical-align:-2px;margin:0 3px}.question-card h2 .blank{font-weight:400}