/* Ayres Synthesizer — CRT, deck, teclado */
/* ══════════════════ CRT ══════════════════ */
#crtcol{display:flex;flex-direction:column;gap:10px;min-height:0}
#crt{
  position:relative;flex:1;min-height:0;border-radius:16px;padding:16px;
  background:linear-gradient(180deg,#232228,#0e0e11);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);
}
#crt .glass{position:absolute;inset:16px;border-radius:8px;overflow:hidden;background:#000}
#viz{width:100%;height:100%;display:block}
#crt .grat{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(120,255,180,.055) 0 1px,transparent 1px 10%),
    repeating-linear-gradient(180deg,rgba(120,255,180,.055) 0 1px,transparent 1px 10%);
}
#crt .scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#crt .curve{position:absolute;inset:0;pointer-events:none;border-radius:8px;
  box-shadow:inset 0 0 70px 24px rgba(0,0,0,.85),inset 0 0 12px 3px rgba(0,0,0,.7)}
#crt .refl{position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:linear-gradient(147deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 22%,transparent 46%)}
#crtbar{
  display:flex;align-items:center;gap:6px;padding:0 4px;
}
#crtbar .cell{--cell:72px;--row:82px;width:72px;height:82px}
#crtbar .dial{width:44px;height:44px}
#crtbar .cap{width:29px;height:29px;margin:-14.5px 0 0 -14.5px}
#crtbar .cap i{height:10px;top:2px}
#crtbar .klbl{height:15px;font-size:7.5px}
#crtbar .rd{font-size:8px;min-width:36px}
.vizmode{display:flex;gap:5px;margin-left:auto}

/* botões-lâmpada */
.pad{
  position:relative;border:0;cursor:pointer;border-radius:5px;padding:9px 6px 8px;
  background:linear-gradient(180deg,#e6dbbf,#c0b28f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(0,0,0,.22),0 3px 5px rgba(0,0,0,.42);
  color:#3a3223;transition:.12s;font-family:inherit;
}
.pad b{display:block;font:700 12px/1 inherit;letter-spacing:.06em}
.pad s{display:block;text-decoration:none;font:600 7px/1 inherit;letter-spacing:.14em;
  color:#7a6f56;margin-top:3px;text-transform:uppercase}
.pad .lens{
  position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6b6350,#332f26);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:.2s;
}
.pad:active{transform:translateY(1.5px);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
.pad.on{background:linear-gradient(180deg,#ffd79a,#f0a94a);color:#3a2408}
.pad.on .lens{background:radial-gradient(circle at 35% 30%,#fff6e0,var(--amber));box-shadow:0 0 10px 2px rgba(255,154,46,.8)}
.pad.on s{color:#8a5a1c}
.pad.g.on{background:linear-gradient(180deg,#b6ffd2,#5fdf95);color:#0c3a22}
.pad.g.on .lens{background:radial-gradient(circle at 35% 30%,#e6fff0,var(--phos));box-shadow:0 0 10px 2px rgba(87,255,154,.8)}
.pad.g.on s{color:#2b6a45}

/* ══════════════════ deck ══════════════════ */
#deck{
  display:grid;grid-template-columns:284px 1fr 440px 210px;gap:22px;
  padding:14px 16px 26px;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.09),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.18);
  position:relative;
}
.deckcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.padrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* HARMONIA: rótulo menor e legenda simplificada. Os pads traziam a sigla em
   12px mais uma linha com "tecla · nome por extenso" — três informações num
   botão de 66px, e o resultado era denso onde devia ser rápido. Fica a sigla,
   menor, e só a tecla embaixo. */
#qualRow .pad b,#extRow .pad b{font-size:10px;letter-spacing:.03em}
#qualRow .pad s,#extRow .pad s{font-size:6px;letter-spacing:.02em;margin-top:2px;opacity:.8}
#qualRow .pad,#extRow .pad{padding:7px 3px 6px}
/* Execução: três pads de largura fixa, alinhados à esquerda. Em 1fr eles
   ocupavam a coluna inteira e destoavam da escala de tudo o que vem abaixo. */
.padrow--exec{grid-template-columns:repeat(3,64px);justify-content:start}
.padrow--exec .pad{padding:7px 3px 6px}
.padrow--exec .pad b{font-size:11px;letter-spacing:.04em}
/* O espaçamento entre letras é bonito num rótulo curto e é o que cortava
   "silêncio" aqui. Nesta fileira ele sai, e o corpo cai meio ponto. */
.padrow--exec .pad s{font-size:6px;letter-spacing:0}

/* ══════════════════ figuras (oscilloscope art) ══════════════════
   Módulo da coluna esquerda. Duas fileiras de sete ícones grandes, o pad de
   liga/desliga e os três knobs embaixo — a mesma gramática dos outros módulos
   do painel, em vez de uma faixa espremida sob o tubo. */
#artbar{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px 10px;
  padding:2px 0 0;
}
.artgrid{display:grid;grid-template-columns:repeat(7,42px);grid-auto-rows:42px;gap:5px}
.figbtn{
  display:grid;place-items:center;padding:5px;border:0;border-radius:5px;cursor:pointer;
  background:linear-gradient(180deg,#e6dbbf,#c0b28f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.38);
  transition:background 140ms var(--ease-out),transform 90ms var(--ease-out);
}
.figbtn svg{width:100%;height:100%;fill:none;stroke:#4a4130;stroke-width:.1;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (hover:hover){ .figbtn:hover{background:linear-gradient(180deg,#f2e9d2,#cfc1a0)} }
.figbtn:active{transform:translateY(1px)}
.figbtn.on{background:linear-gradient(180deg,#0d1f16,#061009);box-shadow:inset 0 1px 4px rgba(0,0,0,.8)}
.figbtn.on svg{stroke:var(--phos);filter:drop-shadow(0 0 4px rgba(87,255,154,.9))}

#artbtn{width:58px;padding:7px 3px 6px;align-self:flex-start}
#artbtn b{font-size:11px;letter-spacing:.04em}
#artbtn s{font-size:6.5px;letter-spacing:0;white-space:nowrap}
#artbar .cell{--cell:74px;--row:78px;width:74px;height:78px}
#artbar .dial{width:42px;height:42px}
#artbar .cap{width:28px;height:28px;margin:-14px 0 0 -14px}
#artbar .cap i{height:10px;top:2px}
#artbar .klbl{height:14px;font-size:7.5px}
#artbar .rd{font-size:8px;min-width:34px}
/* o (?) e o cartão que ele abre */
.helpbtn{
  flex:none;align-self:center;width:20px;height:20px;margin:0 0 0 2px;order:9;
  border:0;border-radius:50%;cursor:pointer;
  font:700 11px/1 ui-monospace,monospace;color:#3a3324;
  background:linear-gradient(180deg,#e4d9bd,#bfb190);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 3px rgba(0,0,0,.35);
  transition:background 140ms var(--ease-out),transform 90ms var(--ease-out);
}
@media (hover:hover){ .helpbtn:hover{background:linear-gradient(180deg,#f4ebd4,#cfc19f)} }
.helpbtn:active{transform:translateY(1px)}
.helpbtn.on{background:linear-gradient(180deg,#ffd79a,#f0a94a)}

/* Sobe a partir da barra, encostado à direita: a barra é a última linha da
   coluna, então um cartão para baixo sairia do chassi. */
.helpcard{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:40;
  width:352px;padding:15px 17px 13px;border-radius:8px;
  background:linear-gradient(180deg,#15151b,#0b0b0f);
  box-shadow:0 18px 44px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(0,0,0,.5);
  color:#b9b2a0;
  font:400 10.5px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  letter-spacing:.005em;
}
.helpcard[hidden]{display:none}
.helpcard h4{
  margin:0 0 8px;font:600 13px/1.2 inherit;letter-spacing:-.01em;color:var(--phos);
}
.helpcard p{margin:0 0 7px}
.helpcard p:last-child{margin-bottom:0}
.helpcard b{color:#e6dfcc;font-weight:600}
.helpcard__foot{
  margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);
  font-size:9.5px;color:#7d7768;
}
.helpcard__foot b{color:#a49d8c}

/* teclado */
/* ══════════════════ teclado ══════════════════
   Branca é branca e preta é preta — como num piano, e como na referência. A
   versão anterior escurecia tudo pra "combinar com o painel", e o resultado foi
   um teclado que não parecia teclado: sem o contraste entre as duas famílias, o
   olho perde a referência das oitavas.

   O que amarra ao chassi não é escurecer as brancas: é o marfim ser levemente
   quente, a moldura ser escura e a LUZ ser fósforo. */
#keys{
  --blkw:30px;
  position:relative;height:104px;padding:3px 3px 0;
  border-radius:4px;background:#14120e;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.8),0 1px 0 var(--emboss);
}
.wrow{display:flex;gap:2px;height:100%}
.key{
  position:relative;border:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  transition:background 110ms var(--ease-out),box-shadow 110ms var(--ease-out);
}
/* brancas: até embaixo, marfim */
.wrow .key{
  flex:1;border-radius:0 0 4px 4px;padding-bottom:8px;gap:4px;
  background:linear-gradient(180deg,#f6f1e2,#ddd5c0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 9px rgba(0,0,0,.16),
             0 2px 4px rgba(0,0,0,.45);
}
/* pretas: por cima, mais curtas e mais estreitas */
.key.blk{
  position:absolute;top:3px;width:var(--blkw);height:62%;z-index:3;
  border-radius:0 0 3px 3px;padding-bottom:7px;gap:3px;
  background:linear-gradient(180deg,#2a2723,#0c0b09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 5px rgba(0,0,0,.65);
}
.key .nn{font:700 9px/1 inherit;letter-spacing:.05em;color:#6a5f49}
.key.blk .nn{color:rgba(226,218,198,.5)}
.key .kk{
  font:700 8px/1 ui-monospace,monospace;color:#8b8068;
  border:1px solid rgba(0,0,0,.16);border-radius:2px;padding:2px 4px;
  background:rgba(255,255,255,.42);
}
.key.blk .kk{color:rgba(226,218,198,.42);background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12)}
.key .dot{position:absolute;top:7px;left:50%;margin-left:-3px;width:6px;height:6px;
  border-radius:50%;background:transparent;transition:.15s}
.key.blk .dot{top:5px}

/* nota do acorde: o fósforo entra sem apagar a cor da tecla */
.key.tone .dot{background:var(--phos);box-shadow:0 0 9px 2px rgba(87,255,154,.75)}
.wrow .key.tone{background:linear-gradient(180deg,#eaf9ef,#c6e8d3)}
.key.blk.tone{background:linear-gradient(180deg,#16352a,#07130f);
  box-shadow:inset 0 0 0 1px rgba(87,255,154,.5),0 3px 5px rgba(0,0,0,.65)}
/* a fundamental acende cheia */
.wrow .key.root{background:linear-gradient(180deg,#8ff0bb,#4fd193)}
.key.blk.root{background:linear-gradient(180deg,#3fbf7c,#1d8a54)}
.key.root .nn{color:#06251a}
.key.root .kk{color:#0a3324;border-color:rgba(6,32,24,.28);background:rgba(255,255,255,.5)}
.key.root .dot{background:#eafff3;box-shadow:0 0 12px 3px rgba(220,255,235,.9)}
.key:active{transform:translateY(2px)}

/* steppers */
.stepbox{display:flex;align-items:center;gap:5px}
.sbtn{
  width:26px;height:26px;border:0;border-radius:4px;cursor:pointer;font:700 13px/1 inherit;color:#3a3223;
  background:linear-gradient(180deg,#e6dbbf,#c0b28f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 3px rgba(0,0,0,.4);
}
.sbtn:active{transform:translateY(1px)}
.num{
  min-width:40px;text-align:center;padding:4px 6px;border-radius:3px;
  font:700 13px/1 ui-monospace,monospace;color:var(--phos);
  background:linear-gradient(180deg,#06120b,#010604);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.85),0 1px 0 var(--emboss);
  text-shadow:0 0 8px rgba(87,255,154,.5);
}
.legend{
  font:600 8px/1.7 ui-monospace,monospace;letter-spacing:.04em;color:var(--ink-soft);
  text-shadow:0 1px 0 var(--emboss);
}
.legend b{color:var(--ink)}
.serial{
  position:absolute;right:16px;bottom:5px;
  font:600 7px/1 ui-monospace,monospace;letter-spacing:.22em;color:rgba(49,42,30,.42);
  text-shadow:0 1px 0 var(--emboss);
}



/* tela de partida */
#boot{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:#0a0a0c;text-align:center;padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
}
#boot .bin{max-width:460px;animation:bootIn 900ms var(--ease-out) both}
@keyframes bootIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#boot h1{
  font:600 46px/1.02 inherit;letter-spacing:-.035em;color:#f5f5f7;margin:0 0 14px;
}
#boot .sub{font:400 17px/1.5 inherit;letter-spacing:-.01em;color:#86868b;margin:0 0 34px}
#bootBtn{
  font:590 16px/1 inherit;letter-spacing:-.01em;
  padding:15px 40px;border:0;border-radius:980px;cursor:pointer;
  color:#0b2019;background:#5fd39a;
  box-shadow:0 8px 26px rgba(95,211,154,.28);
  transition:transform 160ms var(--ease-out),box-shadow 260ms var(--ease-out),background 200ms var(--ease-out);
}
@media (hover:hover){#bootBtn:hover{background:#6fe0a8;box-shadow:0 10px 34px rgba(95,211,154,.4)}}
#bootBtn:active{transform:scale(.965);box-shadow:0 4px 14px rgba(95,211,154,.3)}
#boot .hint{font:400 12.5px/1.5 inherit;letter-spacing:-.005em;color:#5b5b60;margin-top:22px}
#boot.gone{opacity:0;transform:scale(1.04);pointer-events:none}
#panel.off #power{animation:beacon 2.4s var(--ease-in-out) infinite}
@keyframes beacon{
  0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -5px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.5),0 0 0 0 rgba(255,154,46,.5)}
  55%{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -5px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.5),0 0 0 15px rgba(255,154,46,0)}
}
#panel{transition:filter 700ms var(--ease-out)}
/* ligar o tubo: risco de luz que se abre na vertical */
@keyframes crtOn{
  0%{transform:scaleY(.004) scaleX(.6);opacity:0}
  22%{transform:scaleY(.006) scaleX(1);opacity:1}
  100%{transform:scaleY(1) scaleX(1);opacity:1}
}
#crt .glass.boot{animation:crtOn 620ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.12s!important}
}


/* A qualidade que a escala pede, enquanto o KEY LOCK está ligado. Um ponto
   discreto embaixo: quem entende de harmonia lê na hora, e quem não entende
   não é interrompido por um aviso. */
.pad.naescala::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--phos);
  opacity: 0.75;
}

/* ── REC ─────────────────────────────────────────────────────────────────────
   O botão fica ao lado de Salvar/Exportar/Importar, mas não é irmão deles:
   aqueles mexem em programa, este grava som. A lâmpada vermelha separa os dois
   grupos sem precisar de rótulo explicando. */
.mb--rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  justify-content: center;
  font-variant-numeric: tabular-nums; /* o relógio não pode dançar a cada segundo */
}
.mb--rec .reclamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b3730;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
  flex: none;
}
.mb--rec.on {
  color: #fff;
  background: linear-gradient(180deg, #c9402c, #97281a);
}
.mb--rec.on .reclamp {
  background: #ff5a3c;
  box-shadow: 0 0 7px #ff5a3c, 0 0 14px rgba(255, 90, 60, 0.6);
  animation: recpisca 1.1s steps(1, end) infinite;
}
@keyframes recpisca {
  50% { opacity: 0.28; box-shadow: none; }
}