*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b4b0a4;color:#ebe4d2;font-family:Georgia,serif}canvas{display:block;width:100vw;height:100vh}header{position:absolute;top:32px;left:36px;pointer-events:none;text-shadow:0 2px 16px #151713}header p{font:10px/1.5 system-ui,sans-serif;letter-spacing:3px;color:#e0cba7;margin:0 0 10px}h1{font-size:31px;font-weight:400;margin:0 0 7px;letter-spacing:-.7px}header span{font-size:13px;opacity:.7}aside{position:absolute;right:28px;top:32px;display:flex;gap:7px}button{font:11px system-ui,sans-serif;color:#ddd7c8;background:#202421c9;border:1px solid #c5b99c36;padding:10px 12px;cursor:pointer;border-radius:2px}button:hover,button:focus-visible{background:#3c4039;outline:1px solid #ccb386}button[aria-pressed=false]{color:#9a998e}footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:20px;padding:22px 34px;background:linear-gradient(transparent,#171c1bf0);font:11px/1.6 system-ui,sans-serif;color:#c1beb2}footer b{color:#f2e6ce;font-weight:500;letter-spacing:2px}#status{color:#a99b80}@media(max-width:800px){aside{top:auto;bottom:65px;right:15px}header{left:20px;top:20px}footer{padding:15px;flex-wrap:wrap;gap:3px}footer span:nth-child(2){display:none}h1{font-size:25px}}