:root{font-family:system-ui,sans-serif;color:#24343c;background:#f5f7f8}body{margin:0}main{max-width:1200px;margin:auto;padding:24px}h1{font-size:24px;margin:0}p{line-height:1.6}.viewport{height:min(65vh,700px);min-height:300px;background:#e8edf0;border-radius:12px;overflow:hidden}canvas{touch-action:none}canvas:focus-visible{outline:3px solid #327bbb;outline-offset:-3px}footer{padding-top:16px}button{font:inherit;padding:10px 16px;margin:0 8px 8px 0;cursor:pointer;border:1px solid #8b9da5;border-radius:6px;background:#fff;color:inherit}button:disabled{color:#8b9da5;cursor:not-allowed}button:focus-visible{outline:3px solid #327bbb}small{color:#52636c}@media(max-width:600px){main{padding:16px}h1{font-size:20px}}