.htp-app{max-width:960px;margin:35px auto;padding:30px;border-radius:24px;background:linear-gradient(135deg,#171936,#25285a);color:#fff;font-family:Inter,system-ui,sans-serif;box-shadow:0 22px 55px #17193635}.htp-head{display:flex;justify-content:space-between;gap:20px}.htp-kicker{color:#aaa6ff;font-size:11px;font-weight:800;letter-spacing:.16em}.htp-head h2{margin:8px 0 5px;color:#fff;font-size:clamp(25px,4vw,38px);letter-spacing:-.04em}.htp-head p{margin:0;color:#b8bbd4}.htp-chip{height:max-content;padding:8px 12px;border:1px solid #4d5080;border-radius:20px;color:#bdbaff;font-size:12px;font-weight:700}.htp-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:26px 0 20px}.htp-toolbar label{display:flex;flex-direction:column;gap:6px;color:#aeb1cd;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.htp-toolbar select{height:42px;min-width:125px;border:1px solid #494d78;border-radius:9px;padding:0 12px;background:#202348;color:#fff;font-size:14px}.htp-btn{height:42px;border:1px solid #565a8c;border-radius:9px;padding:0 17px;background:#2d3265;color:#fff!important;-webkit-text-fill-color:#fff!important;font:700 13px Inter,system-ui,sans-serif;cursor:pointer}.htp-start{border-color:#786cff;background:linear-gradient(135deg,#786cff,#5548dd)}.htp-btn:hover{transform:translateY(-1px;box-shadow:0 8px 18px #0003}.htp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.htp-stats div{padding:15px;border:1px solid #363a68;border-radius:12px;background:#202348}.htp-stats b,.htp-stats small{display:block}.htp-stats b{font-size:22px;color:#fff}.htp-stats small{margin-top:3px;color:#aeb1cd;font-size:10px;letter-spacing:.08em}.htp-bar{height:6px;margin:20px 0;border-radius:99px;background:#363a68;overflow:hidden}.htp-bar span{display:block;width:0;height:100%;background:linear-gradient(90deg,#8d7bff,#47d7c5);transition:width .2s}.htp-lesson{min-height:82px;padding:18px;border-radius:12px;background:#fff;color:#222542;font-size:20px;line-height:1.8}.htp-input{width:100%;box-sizing:border-box;margin-top:13px;border:1px solid #4c507d!important;border-radius:12px!important;background:#202348!important;color:#fff!important;font-size:18px!important;line-height:1.6;resize:vertical}.htp-input:focus{outline:0;border-color:#8d7bff!important;box-shadow:0 0 0 4px #8d7bff25}.htp-footer{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:#aeb1cd;font-size:12px}.htp-correct{color:#149c7d}.htp-wrong{color:#ec5c6a;background:#ffe0e4;border-radius:3px}@media(max-width:650px){.htp-app{margin:20px 10px;padding:21px;border-radius:18px}.htp-head{display:block}.htp-chip{display:inline-block;margin-top:15px}.htp-stats{gap:6px}.htp-stats div{padding:10px}.htp-stats b{font-size:17px}.htp-toolbar>*{flex:1}.htp-btn{width:100%}.htp-footer{display:block}.htp-byline{display:block;margin-top:6px}}