*{box-sizing:border-box}body{margin:0;background:#edf4f1;color:#253f44;font-family:Arial,sans-serif;letter-spacing:0}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e88156;outline-offset:3px}header{max-width:940px;margin:auto;padding:25px 30px 14px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.4}.brand>div>span{display:block;font-size:23px;font-weight:bold}.brand-icon{font-size:45px;line-height:1;color:#e56c65;font-weight:bold}#restart{border:1px solid #c9dad4;background:transparent;color:#426966;border-radius:6px;width:42px;height:42px;font-size:25px}main{width:min(100% - 40px,470px);margin:12px auto 25px}.toolbar{display:flex;align-items:center;gap:10px;font-size:12px}.toolbar label{font-weight:bold}select{min-width:0;border:1px solid #c2d5ce;background:#fff;padding:9px 10px;color:#254e4a;border-radius:5px;font-size:12px}#record{margin-left:auto;font-size:11px;white-space:nowrap;color:#647b76}.journey{height:107px;margin-top:12px}canvas{display:block;width:100%;height:78px}.journey-text{display:flex;justify-content:space-between;font-size:10px;font-weight:bold;color:#62817b}#score{color:#25766d}form{margin:0}.equation{display:flex;justify-content:center;align-items:center;gap:16px;height:112px;font-size:44px;font-weight:bold;white-space:nowrap}#question{color:#294d52}.equals{font-size:31px;color:#93aaa1}input{width:115px;height:76px;border:0;border-bottom:3px solid #2d9a88;background:#fff9;border-radius:6px 6px 0 0;text-align:center;color:#228573;font-size:43px;font-weight:bold;min-width:0}input::placeholder{color:#b6c9c2}#feedback{height:39px;margin:0 0 10px;text-align:center;line-height:1.4;font-size:14px;font-weight:bold;color:#bd5c41;display:flex;align-items:center;justify-content:center}#feedback.correct{color:#207c62}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.keypad button{height:54px;border:1px solid #d1e0d9;border-bottom:3px solid #c6d8cf;background:white;color:#28494c;border-radius:7px;font-size:23px;font-weight:bold}.keypad button:hover{background:#e1f0e8}.keypad button:active{border-bottom-width:1px;transform:translateY(1px)}.keypad #hint,.keypad #erase{background:#e1ebe6;color:#60877b;font-size:22px}.keypad button:disabled{opacity:.55;cursor:default}.primary,.secondary{width:100%;min-height:49px;border:0;border-radius:6px;font-size:14px;font-weight:bold;margin-top:14px;padding:12px 18px}.primary{display:flex;align-items:center;justify-content:center;gap:12px;background:#278878;color:white}.primary:hover{background:#1d7365}.secondary{background:#dcece4;color:#28685e}.primary:disabled{opacity:.55;cursor:default}#groups{border-top:1px solid #c8dad0;margin-top:20px;padding-top:6px}#group-label{font-size:12px;text-align:center}#dots{display:grid;gap:6px;justify-content:center}.dot-row{display:flex;gap:6px;padding:4px 8px;background:#e0ebe5;border-radius:4px}.dot{width:10px;height:10px;border-radius:50%;background:#348e7e}.dot-row:nth-child(even) .dot{background:#de8271}#result{text-align:center;padding:20px 0}#result[hidden],#play[hidden],[hidden]{display:none!important}small{color:#5e8b7c;font-size:11px;font-weight:bold}h1{font-size:30px;margin:14px 0}#result-stars{font-size:22px;color:#c7962b;line-height:1.7;overflow-wrap:anywhere}#result-score{font-size:17px;color:#328571}#review{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:#8f6855;line-height:1.8}#review span{padding:3px 8px;background:#f5e6de;border-radius:4px}footer{max-width:940px;margin:0 auto;padding:12px 30px 24px;display:flex;justify-content:space-between;font-size:11px;color:#718c80}footer>span:last-child{color:#e0756e;font-size:22px}@media(max-width:500px){header{padding:17px 20px 10px}.brand>div>span{font-size:21px}main{margin-top:8px}.toolbar{gap:7px;font-size:11px}select{font-size:11px;padding:8px}#record{font-size:10px}.equation{font-size:34px;gap:10px;height:97px}input{width:92px;height:67px;font-size:35px}.equals{font-size:25px}.journey{height:89px}canvas{height:65px}.keypad button{height:50px}footer{padding:6px 20px 18px}}@media(max-width:350px){.equation{font-size:29px}input{width:77px;font-size:30px}.toolbar label{display:none}.brand>div>span{font-size:19px}}