*{box-sizing:border-box}body{margin:0;background:#f1efe9;color:#24332f;font:14px system-ui,sans-serif}header{padding:15px 24px;background:#26382f;color:#f9f5e9;display:flex;justify-content:space-between}a{color:inherit}header a{text-decoration:none;font-weight:650}.toolbar{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:12px 20px}label{display:grid;gap:5px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.toggle{display:flex;align-items:center;padding:10px}select,button{background:#fff;border:1px solid #b4bdb5;color:#26382f;padding:10px 14px;border-radius:4px;font:inherit;cursor:pointer}button[aria-pressed=true]{background:#314e40;color:white}#viewport{height:calc(100vh - 205px);min-height:400px;position:relative;overflow:hidden;touch-action:none;background:#dce5e9;outline:none}canvas{display:block}.caption{position:absolute;left:22px;top:18px;background:#faf8efe6;padding:10px 15px;border-radius:3px;pointer-events:none;display:grid;gap:5px}.caption span{font-size:12px;color:#526256}.movement{position:absolute;bottom:20px;right:20px;text-align:center}.movement button{font-size:24px;width:48px;height:46px;padding:3px;background:#faf8efee;touch-action:none;user-select:none}.movement div{display:flex;gap:4px;margin-top:4px}#loading{position:absolute;inset:40% 0;text-align:center;font-size:20px}.help{padding:0 24px;color:#506056;font-size:12px}footer{display:flex;gap:24px;flex-wrap:wrap;padding:8px 24px 18px;font-size:12px}details{padding:18px 24px;border-top:1px solid #ccd0c7;max-width:1000px}details p{line-height:1.7}body.full #viewport{height:100vh} @media(max-width:700px){header{font-size:11px}.toolbar{gap:6px;padding:8px}.toolbar label{font-size:9px}select{max-width:170px}#viewport{height:65vh}.caption{left:10px;top:10px;max-width:70%}footer{gap:10px}button{padding:9px}}