#wrapper {
    display: flex;
    align-items: flex-start;
  }

  aside {
    background: #f0f0f0;
    border: 2px solid #2a2a2a;
    padding: 20px 16px;
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 393px;
  }

  aside h2 {
    font-size: 0.95rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.4;
    font-family: Georgia, serif; 
  }

  aside h2 small {
    display: block;
  /*  font-family: monospace; */
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: black; //#888;
    margin-bottom: 3px;
  }

  .btn {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 8px;
    border: 1px solid #aaa;
    background: #c8dff0;
    color: #1a1a1a;
 /*   font-family: monospace; 
    font-size: 0.82rem;  */
    cursor: pointer;
    border-radius: 3px;
  }
  .btn:hover { background: #b0cfe8; border-color: #888; }
  .btn:active { background: #b8b8b8; }

  #btnClear {
    margin-top: auto;
    margin-bottom: 0;
    border-color: #c44;
    color: #c00;
    background: #f5e0e0;
  }
  #btnClear:hover { background: #eecaca; }
  
  .btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

  .counter {
    margin-top: 10px;
    font-size: 0.72rem;
    color: black; //#555;
  }
  .counter b { color: #111; }

  canvas {
    display: block;
    background: #ffffff; //#000;
    border: 2px solid #2a2a2a;
  }