/* Ayres Synthesizer — variáveis do instrumento */
:root{
  --sand:#cbb68d;
  --sand-hi:#e0d0aa;
  --sand-lo:#a08d66;
  --ink:#33291a;
  --ink-soft:#5f5238;
  --emboss:rgba(255,255,255,.42);
  --bake:#16161c;
  --bake-hi:#4a4a55;
  --cream:#ded2b6;
  --amber:#ff9a2e;
  --amber-dim:#8a5a1c;
  --phos:#57ff9a;
  --red:#e8452c;
  --cell:86px;
  --row:94px;

  /* ── curvas de tempo ──────────────────────────────────────────────────
     Estas duas são usadas 74 vezes no instrumento e NÃO existiam. Um var()
     que não resolve não cai num padrão: ele invalida a declaração inteira
     ("invalid at computed-value time"), e a propriedade volta ao valor
     inicial. Ou seja, cada `transition: ... var(--ease-out)` virava
     "transição nenhuma" e cada `animation: ... var(--ease-out)` virava
     `animation-name: none`. O painel estava seco sem que ninguém tivesse
     escrito isso em lugar nenhum.

     São as mesmas curvas do resto do site (css/style.css → --e-out): começa
     rápido e assenta devagar, que é o que o olho lê como "responsivo".
     Nenhum ease-in em interface. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.6,0,.35,1);
}