@font-face{font-family:NeoSans;src:url('./NeoSansStd-Light.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:#fff;color:#555;font-family:NeoSans,Arial,sans-serif}
.page{width:350px;margin:42px auto 36px}
.masthead{margin:0 0 13px}
h1{margin:0;color:#555;font-size:20px;font-weight:400;letter-spacing:.015em;line-height:1.1}
.subtitle{margin:3px 0 0;color:#999;font-size:14px;line-height:1.2}
.app-frame{width:350px;border:1px solid #aaa;border-radius:5px;overflow:hidden;background:#fff}
canvas{display:block;width:348px;height:auto;background:#fff;outline:none;touch-action:none;image-rendering:auto}
canvas:focus-visible{outline:1px solid #999;outline-offset:-3px}
.description{margin:14px 0 12px;color:#666;font-size:14px;line-height:1.35}
.source-link{margin:0 0 22px;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.source-link a{color:#999;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.source-link a:hover{color:#666}
footer{color:#999;font-size:12px;line-height:1.2}
@media(max-width:382px){.page{width:calc(100vw - 24px);margin:24px auto}.app-frame{width:100%}canvas{width:100%;height:auto}.description{font-size:13px}}