/* Ayres Synthesizer — chassi, tipografia gravada e cabeçalho */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0a0908}
body{
  font:400 12px/1.3 "Helvetica Neue",Helvetica,Inter,system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:grid;place-items:center;
  user-select:none;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(135% 105% at 50% 45%,transparent 52%,rgba(0,0,0,.62) 100%);
}

/* ══════════════════ chassi ══════════════════ */
#panel{
  position:absolute;left:50%;top:50%;
  width:1680px;height:1116px;
  transform-origin:center center;
  padding:20px;
  display:grid;
  grid-template-rows:96px 1fr auto;
  gap:22px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.10) 40%,rgba(0,0,0,.18)),
    radial-gradient(140% 110% at 30% -10%,var(--sand-hi),var(--sand) 45%,var(--sand-lo) 115%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.30),
    0 40px 90px rgba(0,0,0,.75);
}
#panel::after{ /* textura */
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  opacity:.20;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
#panel.off{filter:saturate(.55) brightness(.72)}
#panel.off .lamp,#panel.off .pad,#panel.off .key{filter:grayscale(1) brightness(.6)}

/* parafusos */
.screw{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d8cbaa,#8a7f63 60%,#5d543f);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.5);
}
.screw::after{
  content:'';position:absolute;inset:3px 1.5px;border-radius:1px;
  background:linear-gradient(#4a422f,#6e6449);transform:rotate(var(--r,22deg));
}

/* ══════════════════ tipografia gravada ══════════════════ */
.eng{
  text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--ink);text-shadow:0 1px 0 var(--emboss);
}
.modhead{
  display:flex;align-items:center;gap:9px;height:24px;
  font-size:9.5px;letter-spacing:.24em;font-weight:700;
  color:var(--ink-soft);text-shadow:0 1px 0 var(--emboss);
  text-transform:uppercase;
}
.modhead::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(49,42,30,.30),transparent);
  box-shadow:0 1px 0 var(--emboss)}

/* ══════════════════ cabeçalho ══════════════════ */
header{
  display:grid;grid-template-columns:296px 1fr 218px 116px 62px 104px;gap:14px;align-items:center;
  padding:0 6px;
}

/* ══════════════════ volume mestre ══════════════════
   Um fader de verdade, vertical, ao lado do power — que é onde a mão procura
   volume num aparelho. É o MESMO parâmetro do knob "Volume" do módulo de
   efeitos; os dois se acompanham. */
.volbay{display:flex;flex-direction:column;align-items:center;gap:6px}
.vslider{
  -webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:22px;height:62px;background:transparent;cursor:pointer;margin:0;
}
/* trilho embutido no chassi, como uma canaleta fresada */
.vslider::-webkit-slider-runnable-track{
  width:7px;border-radius:4px;
  background:linear-gradient(90deg,#6d6350,#8e836a);
  box-shadow:inset 0 0 3px rgba(0,0,0,.75),0 1px 0 var(--emboss);
}
.vslider::-moz-range-track{
  width:7px;border-radius:4px;
  background:linear-gradient(90deg,#6d6350,#8e836a);
  box-shadow:inset 0 0 3px rgba(0,0,0,.75),0 1px 0 var(--emboss);
}
/* o cursor é o mesmo plástico dos pads, com o risco branco no meio */
.vslider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:13px;border-radius:3px;border:0;
  background:linear-gradient(180deg,#efe5c9,#b9ab88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.5);
  margin-left:-7.5px;
}
.vslider::-moz-range-thumb{
  width:22px;height:13px;border-radius:3px;border:0;
  background:linear-gradient(180deg,#efe5c9,#b9ab88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.5);
}
.vslider:active::-webkit-slider-thumb{background:linear-gradient(180deg,#fff6e0,#cabb96)}
.vread{
  min-width:30px;text-align:center;padding:2px 5px;border-radius:3px;
  font:700 9px/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);
  font-variant-numeric:tabular-nums;
}
.plate{
  position:relative;padding:9px 16px;border-radius:5px;
  background:linear-gradient(180deg,#1d1d24,#0c0c11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 5px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);
  color:var(--cream);
}
.plate .t1{font-size:19px;letter-spacing:.30em;font-weight:700;line-height:1.1}
.plate .t2{
  display:flex;justify-content:space-between;gap:10px;margin-top:4px;
  font:600 8.5px/1 ui-monospace,monospace;letter-spacing:.14em;color:#9a917c;
}
.plate .t2 b{background:#2b2b34;padding:2px 5px;border-radius:2px;color:#cdc3a8;font-weight:600}

/* seletor de preset */
.presetbay{display:flex;align-items:center;gap:14px}
.lcd{
  flex:1;min-width:0;position:relative;height:52px;padding:7px 13px;border-radius:4px;
  background:linear-gradient(180deg,#06120b,#020805);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 1px 0 var(--emboss),0 0 0 1px rgba(0,0,0,.5);
  overflow:hidden;
}
.lcd::after{ /* scanlines */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
}
/* a linha de cima do visor: setas, nome do programa e a posição no banco */
.lcdtop{display:flex;align-items:center;gap:8px;height:14px}
.lcd .k{flex:1;min-width:0;
  font:600 8.5px/1.4 ui-monospace,monospace;letter-spacing:.14em;color:#39a06a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd .pnum{font:600 8px/1.4 ui-monospace,monospace;letter-spacing:.1em;
  color:rgba(57,160,106,.62);flex:none;font-variant-numeric:tabular-nums}
/* As setas moram DENTRO do vidro, então são luz e não plástico: fósforo sobre
   preto, sem relevo. Um botão cor de areia aqui pareceria colado por fora. */
.pbtn{
  flex:none;display:grid;place-items:center;width:19px;height:14px;
  border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(87,255,154,.09);color:#4fd68d;
  transition:background 140ms var(--ease-out),color 140ms var(--ease-out),transform 90ms var(--ease-out);
}
.pbtn svg{width:8px;height:9px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .pbtn:hover{background:rgba(87,255,154,.2);color:var(--phos)}
}
.pbtn:active{transform:scale(.88);background:rgba(87,255,154,.34);color:#d9ffe9}
.lcd .v{
  font:700 17px/1.5 ui-monospace,monospace;letter-spacing:.05em;color:var(--phos);
  text-shadow:0 0 10px rgba(87,255,154,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.minibtns{display:flex;flex-direction:column;gap:4px}
.mb{
  font:700 8px/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 9px;border:0;border-radius:3px;cursor:pointer;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);
}
.mb:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}

/* VU */
.vubox{position:relative;height:80px;border-radius:5px;padding:5px 8px;
  background:linear-gradient(180deg,#efe6cb,#cabf9f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 5px rgba(0,0,0,.22),0 2px 5px rgba(0,0,0,.35);
}
.vubox svg{width:100%;height:100%;display:block}

/* ══════════════════ power: chave de alavanca ══════════════════
   Do painel de controle industrial da referência: balancim vermelho num berço
   de metal, com a lâmpada de estado ao lado. A vantagem sobre o botão redondo
   não é estética — é que uma chave diz o estado pela POSIÇÃO. Redondo aceso e
   redondo apagado dependem de perceber a cor; alavanca pra cima e alavanca pra
   baixo se lê de relance, e continua se lendo em preto e branco.

   O basculamento é rotateX com perspectiva: é o que dá a impressão de uma peça
   que gira num eixo, e não de um retângulo que troca de cor. */
.powerbay{display:flex;flex-direction:column;align-items:center;gap:6px}
.switchplate{
  position:relative;display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:4px;
  background:linear-gradient(180deg,#3a3630,#211f1b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 4px rgba(0,0,0,.5),
             0 2px 5px rgba(0,0,0,.55);
}
#power{
  width:30px;height:48px;border:0;padding:3px;cursor:pointer;border-radius:3px;
  background:linear-gradient(180deg,#0e0d0b,#1c1a17);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);
  perspective:90px;
}
.rock{
  position:relative;display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(180deg,#e04a33 0%,#b32d1c 48%,#7d1d11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(0,0,0,.45),
             0 2px 4px rgba(0,0,0,.6);
  transform:rotateX(24deg);          /* desligado: a parte de cima sai pra frente */
  transform-origin:50% 50%;
  transition:transform 200ms cubic-bezier(.2,1.5,.4,1),filter 200ms var(--ease-out);
  filter:saturate(.5) brightness(.72);
}
#power.on .rock{transform:rotateX(-24deg);filter:none}
#power:active .rock{transform:rotateX(0deg)}
/* o risco no meio do balancim, que é onde a luz bate numa peça de verdade */
.rock::after{
  content:'';position:absolute;left:4px;right:4px;top:50%;height:1px;margin-top:-.5px;
  background:rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,255,255,.14);
}
.pwlamp{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 30%,#5a5348,#2a2620);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 1px 0 var(--emboss);
  transition:background 240ms var(--ease-out),box-shadow 240ms var(--ease-out);
}
.switchplate:has(#power.on) .pwlamp{
  background:radial-gradient(circle at 36% 30%,#fff2d4,var(--amber));
  box-shadow:0 0 12px 2px rgba(255,154,46,.75);
}

/* lâmpadas */
.lamp{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 36% 30%,#5d5647,#2c281f);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 1px 0 var(--emboss);
  transition:.25s;
}
.lamp.lit{background:radial-gradient(circle at 36% 30%,#fff2d4,var(--amber));box-shadow:0 0 12px 2px rgba(255,154,46,.7)}
.lamp.lit.g{background:radial-gradient(circle at 36% 30%,#dcffe9,var(--phos));box-shadow:0 0 12px 2px rgba(87,255,154,.7)}
.lamp.lit.r{background:radial-gradient(circle at 36% 30%,#ffdcd6,var(--red));box-shadow:0 0 12px 2px rgba(232,69,44,.7)}

/* ══════════════════ corpo ══════════════════ */
#body{display:grid;grid-template-columns:434px 1fr 434px;gap:20px;min-height:0}
.col{display:flex;flex-direction:column;gap:9px;min-height:0}
.mod{position:relative}
.grid{display:grid;grid-template-columns:repeat(5,var(--cell));gap:0}