:root{color-scheme:light;--paper:#e9e3d4;--ink:#292c28}*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink)}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:1px solid #7e482d;outline-offset:-4px}button{font:20px Georgia,serif;color:inherit;cursor:pointer}#about{position:fixed;right:14px;top:12px;border:1px solid #646458;background:#e9e3d4d9;border-radius:50%;width:36px;height:36px}#reading{position:fixed;left:24px;bottom:34px;font:12px/1.6 ui-monospace,monospace;background:#e9e3d4e8;max-width:calc(100% - 48px);padding:3px 5px;pointer-events:none}.key{position:fixed;bottom:10px;left:24px;margin:0;font:10px/1.3 ui-monospace,monospace;color:#55594c;pointer-events:none}dialog{border:1px solid #929383;border-radius:3px;background:#f7f5ed;color:#292c28;max-width:510px;width:calc(100% - 36px);padding:30px;font:16px/1.5 system-ui,sans-serif}dialog::backdrop{background:#0c100bc4}dialog h1{font-size:21px;margin:0 25px 18px 0}dialog p{margin:0 0 15px}dialog .credit{font-size:12px;color:#55594c}nav{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}a{color:inherit;text-underline-offset:3px}#close{position:absolute;right:14px;top:10px;background:none;border:0;font:26px system-ui}@media(max-width:500px){#reading{left:14px;bottom:42px;font-size:10px;max-width:calc(100% - 28px)}.key{left:14px;right:10px;font-size:9px}dialog{font-size:14px;padding:24px}}