:root{
    --maple:#d9a466; --maple2:#c98f4f; --key:#1f5a3c; --line:#f3e9d2;
    --led:#ff4a2a; --led-dim:#4a1a12; --steel:#b8bdc4; --ink:#1a1512; --gym:#2b2320;
  }
  html,body{margin:0;height:100%;background:var(--gym);color:var(--line);
    font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;overflow:hidden}
  #wrap{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
  canvas{display:block;height:min(100vh, calc(100vw * 7 / 8));width:auto;max-width:100vw;max-height:100vh;image-rendering:auto}
  #menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(20,15,12,.92);gap:18px;text-align:center}
  #menu h1{font-size:clamp(48px,10vw,128px);margin:0;letter-spacing:-.02em;line-height:.9;color:var(--led);
    text-shadow:0 0 18px rgba(255,74,42,.5)}
  #menu p{margin:0;font-size:18px;color:var(--steel);max-width:34em;line-height:1.4}
  .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  button{font:inherit;font-size:20px;padding:10px 18px;background:transparent;color:var(--line);
    border:2px solid var(--steel);cursor:pointer}
  button:hover,button:focus-visible{border-color:var(--led);color:var(--led);outline:none}
  button.on{background:var(--led);border-color:var(--led);color:var(--ink)}
  .kbd{display:inline-block;border:1px solid var(--steel);padding:1px 6px;margin:0 2px;font-size:15px;color:var(--line)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
#start.big{font-size:26px}
label{font-size:18px;color:var(--steel)}
input[type=range]{accent-color:var(--led);width:180px;vertical-align:middle}
input[type=range]:focus-visible{outline:2px solid var(--led);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}