*{box-sizing:border-box}body{margin:0;color:#193a70;background:#f5f0df;font:16px/1.5 Georgia,serif}canvas{position:fixed;inset:0;width:100%;height:100%}header{position:relative;padding:20px 28px;pointer-events:none}h1{font-size:24px;margin:0}header p{margin:0;font-size:12px;letter-spacing:.1em}aside{position:absolute;left:28px;top:108px;width:250px;max-height:calc(100dvh - 140px);overflow:auto;background:#f9f5e9ee;border:1px solid #193a7040;padding:16px}summary{cursor:pointer;font-weight:bold}label{display:block;margin:12px 0}select,button,input{font:inherit;color:inherit}select,button{padding:7px;background:#f8f3e5;border:1px solid #193a7070;max-width:100%}button{cursor:pointer;margin:4px 4px 4px 0}select{display:block;width:100%}input[type=range]{width:100%}.note{font-size:13px}#proof{position:fixed;pointer-events:none;inset:0;display:none;border:3px dashed #a1422d;background:linear-gradient(90deg,transparent 49.9%,#a1422d44 50%,transparent 50.1%)}body.proof #proof{display:block}#readout{white-space:pre-wrap;font:12px/1.5 monospace;overflow-wrap:anywhere}a{color:inherit}footer{position:fixed;bottom:8px;right:16px;font-size:12px}@media(max-width:700px){header{padding:12px 16px}h1{font-size:19px}aside{left:16px;top:75px;width:calc(100% - 32px);max-height:40dvh}aside:has(details:not([open])){padding:8px}footer{font-size:10px}}