:root{font-family:Arial,Helvetica,sans-serif;color:#f7ead1;background:#172d33;font-size:16px}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:fixed;top:24px;left:24px;background:#172d33;padding:17px 23px;pointer-events:none;border-left:3px solid #bca17b}h1{font-family:Georgia,serif;font-weight:400;font-size:36px;line-height:1.1;margin:0 0 8px}header p{font-size:16px;margin:0;line-height:1.4}nav{position:fixed;bottom:24px;left:24px;width:340px;background:#172d33;padding:14px 16px;border-left:3px solid #bca17b}select,button{font:inherit;color:#f7ead1;border:1px solid #899c95;background:#23434a;min-height:46px;border-radius:3px}select{width:100%;padding:8px 10px;color-scheme:dark}option{background:#23434a;color:#f7ead1}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}button{padding:7px;font-size:14px;cursor:pointer}button:hover{background:#355b62}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #f6c88d;outline-offset:3px}.hint{font-size:14px;margin:10px 0 0;line-height:1.4;color:#f7ead1}dialog{background:#172d33;color:#f7ead1;border:1px solid #bca17b;max-width:510px;width:calc(100% - 32px);max-height:85dvh;padding:26px;line-height:1.6;overflow:auto}dialog::backdrop{background:#0c1b25b8}dialog h2{font:28px Georgia,serif;margin-top:0}dialog h3{font:23px Georgia,serif}dialog a{color:#f7d89b;text-underline-offset:3px}dialog button{width:100%;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:600px){header{top:12px;left:12px;right:12px;padding:13px 16px}h1{font-size:30px;margin-bottom:5px}nav{bottom:12px;left:12px;right:12px;width:auto;padding:12px}.hint{font-size:14px}}@media(max-width:350px){.tools{grid-template-columns:repeat(2,1fr)}header p{font-size:14px}}header,nav{z-index:10;clip-path:inset(0);contain:paint}