*{box-sizing:border-box}body{margin:0;background:#161c29;color:#f5f3eb;font-family:Arial,sans-serif}header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;gap:12px}header b{font-size:16px}header span{font-size:11px;letter-spacing:1px;color:#c3cbd4}canvas{display:block;width:100%;height:auto;aspect-ratio:11/7;touch-action:none;outline-offset:-4px}footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;font-size:12px;color:#cad0d9}button{border:1px solid #687588;background:#222d3e;color:#f5f3eb;padding:10px 15px;min-height:42px;border-radius:7px;font-weight:700;cursor:pointer}button:first-child{background:#b9edcf;color:#162b25;border-color:#b9edcf}button:focus-visible,canvas:focus-visible{outline:3px solid #ffbc86}#status{max-width:60%;line-height:1.5}#help{margin:0;padding:0 22px 16px;font-size:12px;line-height:1.6;color:#c3cbd4}@media(max-width:500px){header{padding:12px}header span{font-size:9px}footer{padding:10px;align-items:start}button{padding:9px}#status{max-width:45%}}