:root{--blue:#1768ff;--navy:#071c45;--pale:#eaf1ff;--white:#fff;--acid:#d8ff3e;--red:#ff533d}*{box-sizing:border-box}body{margin:0;background:var(--pale);color:var(--navy);font-family:Inter,Arial,PingFang SC,sans-serif}button,input{font:inherit}main{max-width:1100px;margin:auto;min-height:100vh;padding:0 30px;display:flex;flex-direction:column}header{height:74px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--navy)}.logo{font-size:13px;font-weight:900;letter-spacing:.08em}.logo span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;margin-right:8px}header button{border:1px solid var(--navy);background:transparent;padding:8px 12px;font-size:11px;font-weight:700;cursor:pointer}.mast{padding:48px 0 35px}.mast p{font-size:10px;letter-spacing:.17em;color:var(--blue);font-weight:700}.mast h1{font-size:clamp(54px,8vw,91px);letter-spacing:-.07em;line-height:.85;margin:24px 0 0}.mast em{font-style:normal;color:var(--blue)}.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--navy);background:#fff}.metric-strip>div{padding:17px 20px;border-right:1px solid var(--navy)}.metric-strip>div:last-child{border:0}.metric-strip small{display:block;font-size:9px;text-transform:uppercase;color:#70809d;margin-bottom:8px}.metric-strip strong{font-size:18px}.metric-strip i{font-size:11px;font-style:normal;color:#6e7b92}.entry-panel{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:50px 0}.prompt{display:flex;gap:18px}.prompt>span{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:50%;background:var(--navy);color:var(--acid);font:700 12px monospace}.prompt h2{font-size:27px;margin:4px 0 12px}.prompt p{font-size:13px;line-height:1.7;color:#66738a;margin:0;max-width:330px}.number-form label{height:92px;display:flex;align-items:baseline;border-bottom:4px solid var(--navy)}.number-form input{border:0;background:transparent;min-width:0;width:100%;font-size:70px;font-weight:900;color:var(--blue);outline:0;letter-spacing:-.06em}.number-form input::placeholder{color:#b9c8e4}.number-form label span{font-size:15px;font-weight:700}.number-form>button{width:100%;border:0;background:var(--navy);color:#fff;padding:17px 20px;margin-top:17px;text-align:left;font-weight:700;cursor:pointer}.number-form>button b{float:right;color:var(--acid)}.number-form>small{display:block;color:#6a7891;font-size:10px;margin-top:12px}.error{color:var(--red);font-size:12px;font-weight:700}.feedback{margin:40px 0;border:2px solid var(--navy);background:#fff;display:grid;grid-template-columns:1.3fr 1fr;position:relative}.feedback-top{grid-column:1/-1;display:flex;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--navy)}.feedback-top p{font-size:10px;font-weight:900;letter-spacing:.15em;margin:0}.feedback-top button{border:0;background:transparent;text-decoration:underline;cursor:pointer}.score{padding:28px 35px;border-right:1px solid var(--navy)}.score span{font-size:clamp(70px,11vw,130px);font-weight:900;line-height:.8;letter-spacing:-.08em}.score i{font-style:normal;font-size:14px;margin-left:12px}.verdict{padding:28px;display:flex;gap:18px;align-items:center}.symbol{display:grid;place-items:center;flex:0 0 55px;height:55px;border-radius:50%;background:var(--acid);font-size:27px;font-weight:700}.miss .symbol{background:var(--red);color:#fff}.verdict h2{font-size:25px;margin:0 0 8px}.verdict p{color:#65728a;margin:0}.streak{grid-column:1/-1;background:var(--blue);color:#fff;padding:22px 30px;display:flex;align-items:baseline;gap:15px}.streak small{font-size:9px;letter-spacing:.14em}.streak strong{font-size:40px;color:var(--acid)}.streak span{font-size:12px}footer{margin-top:auto;border-top:1px solid #9babca;padding:20px 0;display:flex;justify-content:space-between;font:9px monospace;color:#71809b}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#071c45bd;display:grid;place-items:center;padding:18px;z-index:3}.modal form{width:min(500px,100%);background:var(--pale);border:2px solid var(--navy);padding:26px;box-shadow:9px 9px 0 var(--acid)}.modal-head{display:flex;justify-content:space-between;align-items:start}.modal-head small{font-size:9px;color:var(--blue);letter-spacing:.14em}.modal-head h2{font-size:26px;margin:7px 0 24px}.modal-head button{border:0;background:none;font-size:28px;cursor:pointer}.modal label{display:block;font-size:11px;font-weight:700;margin:14px 0}.modal label input{display:block;width:100%;border:1px solid var(--navy);background:#fff;padding:13px;margin-top:7px}.split{display:grid;grid-template-columns:1fr 1fr;gap:13px}.modal .save{width:100%;border:0;background:var(--blue);color:#fff;padding:15px;font-weight:700;margin-top:10px;cursor:pointer}@media(max-width:700px){main{padding:0 16px}.mast{padding:40px 0 28px}.mast h1{font-size:56px}.metric-strip{grid-template-columns:1fr 1fr}.metric-strip>div{padding:13px}.metric-strip>div:last-child{grid-column:1/-1;border-top:1px solid var(--navy)}.entry-panel{grid-template-columns:1fr;gap:30px;padding:35px 0}.number-form input{font-size:61px}.feedback{grid-template-columns:1fr}.score{border-right:0;border-bottom:1px solid var(--navy)}.verdict{padding:22px 17px}.streak{padding:17px}.split{grid-template-columns:1fr}}
