:root{color-scheme:dark;--paper:#e7dfcc;--ink:#141b1d;--quiet:#a39f90;--gold:#d8bc7a}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:system-ui,sans-serif;overflow:hidden}main{height:100dvh;position:relative}canvas{display:block;width:100%;height:100%;outline:none;touch-action:manipulation}canvas:focus-visible{outline:1px solid var(--gold);outline-offset:-5px}.heading{position:absolute;top:22px;left:24px;display:flex;gap:15px;align-items:baseline;pointer-events:none;font-size:10px;letter-spacing:.12em;color:#d8d2c1}.heading span:first-child{font-family:Georgia,serif;font-size:23px;letter-spacing:.22em}.heading span:last-child{color:var(--quiet)}#about{position:absolute;right:18px;top:15px;width:40px;height:40px;border:1px solid #8b8d80;border-radius:50%;background:var(--ink);color:var(--paper);font:20px Georgia,serif;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}#key{position:absolute;bottom:13px;left:24px;margin:0;font-size:10px;line-height:1.6;color:#d8d2c1;pointer-events:none}#key span{color:#aaa99d}#readout{position:absolute;bottom:76px;left:24px;max-width:min(400px,calc(100% - 48px));padding:10px 13px;background:#141b1df2;border-left:1px solid var(--gold);font-size:12px;line-height:1.5;pointer-events:none;display:none}#readout strong{font-weight:500;color:#e9dfc6}#readout small{color:#aaa99d}#loading{position:absolute;inset:45% 15%;text-align:center;font-size:13px;color:var(--quiet)}dialog{border:1px solid #98927f;border-radius:3px;max-width:490px;width:calc(100% - 32px);padding:28px;background:#ebe5d7;color:#242b2a;line-height:1.55}dialog::backdrop{background:#050b0dbb}dialog h1{font:25px/1.2 Georgia,serif;margin:0 26px 18px 0}dialog p{font-size:14px;margin:0 0 15px}.navigation{color:#62675e!important;font-size:12px!important}#close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:27px;color:#242b2a;cursor:pointer}footer{display:flex;gap:20px;margin-top:22px;font-size:12px}footer a{color:#354c45;text-underline-offset:3px}@media(max-width:600px){.heading{top:17px;left:17px;gap:9px}.heading span:first-child{font-size:19px}.heading span:last-child{font-size:9px}#key{left:17px;font-size:9px;bottom:12px}#readout{left:17px;bottom:67px;font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
