*{box-sizing:border-box}body{margin:0;background:#f0e8d5;color:#2d482d;font:14px 'DM Sans',sans-serif}main{height:min(100dvh,980px);min-height:650px;max-width:1300px;margin:auto;padding:18px 24px;display:flex;flex-direction:column}button,select{font:inherit;cursor:pointer;border:1px solid #b9c0a2;background:#fbf4e2;color:#314a31;border-radius:10px;padding:10px 15px;font-weight:600}button:hover{background:#dfe5c9}button:disabled{opacity:.5}header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px}small{font-size:9px;letter-spacing:2px}h1{font:32px 'DM Serif Display';margin:3px 0}h1 span{font:700 9px 'DM Sans';letter-spacing:2px;margin-left:12px;color:#bd6235}nav{display:flex;align-items:center;gap:40px;border-top:1px solid #ccd0b9;padding:11px 0}nav div{display:grid;gap:4px}nav b{font-size:19px}select{margin-left:auto}.stage{position:relative;flex:1;min-height:270px;background:#cbd4ac;border-radius:22px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.caption{position:absolute;left:18px;top:16px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.caption b{font-size:16px}.caption span{font-size:11px;color:#5c6e49}.sticker{position:absolute;bottom:17px;right:18px;border:1px solid #7f986c;border-radius:50%;width:91px;height:91px;padding:23px 13px;transform:rotate(-12deg);font-size:8px;letter-spacing:1px;text-align:center;color:#5f774e}.sticker b{display:block;font-size:7px;margin-top:6px}#markers{position:absolute;inset:0;pointer-events:none}#markers span{position:absolute;display:grid;place-items:center;width:23px;height:23px;background:#efedd9;color:#718465;border:1px solid #9da980;border-radius:50%;font-size:11px;transform:translate(-50%,-50%)}#markers span.next{background:#244c35;color:#ffedb8;border:2px solid #fff1b1}#markers span.done{opacity:.35}.controls{display:flex;justify-content:space-between;padding-top:11px}.steering,.pedals{display:flex;gap:9px}.controls button{width:79px;height:57px;padding:4px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;touch-action:none;user-select:none}.controls button span{font-size:8px;letter-spacing:2px}#gas{background:#efac63}#brake{background:#ddcfb2}.bar{display:flex;align-items:center;gap:10px;padding-top:9px}.bar p{flex:1;font-size:10px;line-height:1.5;margin:0;color:#6c7f5e}.bar button{font-size:11px}#start{background:#2f5739;color:#fff3d0;min-width:140px}button:focus-visible,select:focus-visible{outline:3px solid #ec8e47;outline-offset:2px}@media(max-width:650px){main{padding:13px;min-height:740px}h1{font-size:27px}h1 span{display:block;margin:2px 0;font-size:8px}header>button{font-size:10px;padding:9px}nav{gap:20px}nav b{font-size:16px}nav select{font-size:10px;padding:8px}.stage{min-height:320px}.caption{left:12px;top:11px}.caption b{font-size:12px}.caption span{font-size:10px}.sticker{display:none}.controls button{width:65px;height:57px}.bar{flex-wrap:wrap}.bar p{flex-basis:100%;font-size:9px}.bar button{flex:1}#markers span{width:20px;height:20px}}