/* Ayres Synthesizer — manual. Escuro, sóbrio, com os gráficos como protagonistas. */

#learn{
  --bg:#0a0a0c;
  --surface:#131318;
  --surface-2:#1a1a21;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --ink:#f2f2f5;
  --ink-2:rgba(255,255,255,.56);
  --ink-3:rgba(255,255,255,.34);
  --acc:#5ee6a8;
  --acc-dim:rgba(94,230,168,.14);
  --warm:#ffb057;

  position:fixed;inset:0;z-index:80;display:none;flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% -20%,rgba(94,230,168,.055),transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-.011em;
  opacity:0;transform:scale(1.012);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
#learn.open{display:flex;opacity:1;transform:none}

/* ── barra superior ── */
.mhead{
  flex:0 0 auto;position:relative;z-index:5;
  display:flex;align-items:center;gap:16px;padding:0 26px;height:58px;
  background:rgba(10,10,12,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
}
.mhead::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.mhead.scrolled::after{opacity:1}
.mback{
  display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;
  font:590 14.5px/1 inherit;letter-spacing:-.01em;color:var(--acc);
  padding:8px 6px;margin-left:-6px;border-radius:8px;
  opacity:0;pointer-events:none;width:0;overflow:hidden;
  transition:transform 160ms var(--ease-out),opacity 240ms var(--ease-out);
}
.mback.on{opacity:1;pointer-events:auto;width:auto}
.mback:active{transform:scale(.95)}
.mback b{font:400 19px/1 inherit;margin-top:-2px}
.mtitle{font:590 14.5px/1 inherit;letter-spacing:-.012em;color:var(--ink)}
.mhead .sp{flex:1}
.mprog{display:flex;align-items:center;gap:11px}
.mpTxt{font:500 12.5px/1 inherit;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mpbar{width:130px;height:5px;border-radius:0;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mpbar i{display:block;height:100%;width:0;border-radius:0;background:var(--acc);
  box-shadow:0 0 12px rgba(94,230,168,.6);transition:width 560ms var(--ease-out)}
.mclose{
  display:inline-flex;align-items:center;gap:7px;border:2px solid var(--line-2);cursor:pointer;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 13px;border-radius:2px;
  color:var(--ink);background:rgba(255,255,255,.05);
  transition:transform 160ms var(--ease-out),background 220ms var(--ease-out),
             border-color 220ms var(--ease-out);
}
@media (hover:hover){.mclose:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24)}}
.mclose:active{transform:scale(.96)}
.mclose svg{opacity:.7}

.mscroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.mwrap{max-width:1020px;margin:0 auto;padding:0 26px 120px}

/* ── capa ── */
.mhero{padding:66px 0 40px}
.mhero h1{
  font:600 clamp(38px,4.8vw,60px)/1.03 inherit;letter-spacing:-.035em;margin:0 0 14px;
  background:linear-gradient(180deg,#fff,#b9b9c2);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mhero p{font:400 19px/1.5 inherit;letter-spacing:-.014em;color:var(--ink-2);margin:0;max-width:44ch}

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:16px}
/* Cartão de painel: canto reto, moldura dura, número do capítulo em
   monoespaçada como a etiqueta gravada de um rack. O raio de 18px fazia disso
   um "card de app"; aqui a peça é um MÓDULO, e módulo tem quina. */
.mcard{
  position:relative;text-align:left;border:2px solid rgba(255,255,255,.12);cursor:pointer;padding:0;
  overflow:hidden;border-radius:2px;background:var(--surface);
  font-family:inherit;color:inherit;
  transition:transform 240ms var(--ease-out),border-color 240ms var(--ease-out),
             background 240ms var(--ease-out),box-shadow 240ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .mcard:hover{transform:translate(-2px,-2px);border-color:rgba(94,230,168,.55);
    background:var(--surface-2);box-shadow:4px 4px 0 0 rgba(94,230,168,.22)}
  .mcard:hover .thumb{opacity:1}
}
.mcard:active{transform:translate(1px,1px);box-shadow:none;transition-duration:90ms}
.mcard .idx{
  position:absolute;top:13px;left:15px;z-index:2;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  color:rgba(255,255,255,.36);
}
.mcard .thumb{
  display:block;width:100%;height:108px;opacity:.72;
  background:linear-gradient(180deg,#0d1512,#0a0a0d);
  transition:opacity 340ms var(--ease-out);
}
.mcard .body{padding:15px 17px 17px}
.mcard h3{font:600 18px/1.25 inherit;letter-spacing:-.018em;margin:0 0 3px}
.mcard .sub{font:400 14px/1.4 inherit;color:var(--ink-2);margin:0 0 13px}
.mcard .meta{display:flex;align-items:center;gap:8px}
.mdots{display:flex;gap:4px}
.mdot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.16);
  transition:background 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.mdot.on{background:var(--acc);box-shadow:0 0 8px rgba(94,230,168,.55)}
.mcard .cnt{font:500 12px/1 inherit;color:var(--ink-3);margin-left:auto}
.mcard .done{
  position:absolute;top:11px;right:13px;width:22px;height:22px;border-radius:50%;
  background:var(--acc);color:#062018;display:grid;place-items:center;
  font-size:12px;font-weight:700;box-shadow:0 0 16px rgba(94,230,168,.5);
  transform:scale(.5);opacity:0;
  transition:transform 480ms var(--ease-out),opacity 300ms var(--ease-out);
}
.mcard .done.on{transform:none;opacity:1}

/* ── aula ── */
/* A coluna da aula tem 730px dentro de um wrap de 1020: sem margem automática
   ela encostava na esquerda e sobravam 290px de vazio só do lado direito. */
.mlesson{padding:42px 0 0;max-width:730px;margin-inline:auto}
.mkicker{display:flex;align-items:center;gap:11px;margin-bottom:15px;
  font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.mkicker .of{color:var(--ink-3);font-weight:400}
.msteps{display:flex;gap:5px;margin-left:auto}
.mstep{width:26px;height:4px;border-radius:0;background:rgba(255,255,255,.16);
  border:0;cursor:pointer;padding:0;
  transition:background 260ms var(--ease-out),transform 200ms var(--ease-out)}
.mstep.seen{background:rgba(94,230,168,.5)}
.mstep.on{background:var(--ink);height:3px}
.mstep:active{transform:scaleY(2)}
.mlesson h2{font:600 clamp(29px,3.4vw,41px)/1.08 inherit;letter-spacing:-.028em;margin:0 0 20px}
.mlesson p{font:400 17.5px/1.62 inherit;letter-spacing:-.012em;margin:0 0 16px;
  color:rgba(255,255,255,.78);max-width:62ch}
.mlesson p b{font-weight:600;color:#fff;box-shadow:inset 0 -.4em 0 rgba(94,230,168,.18)}
.mlesson .kw{color:var(--acc);font-weight:600}

/* ── entrada dos blocos da aula ────────────────────────────────────────────
   Três coisas mudaram, e cada uma tem uma razão:

   · A CURVA. cubic-bezier(.16,1,.3,1) sai mais rápido e assenta mais devagar
     que a de interface — é a curva de ENTRADA, para coisa que aparece, e é o
     que dá a sensação de peso chegando em vez de opacidade subindo.
   · O CURSO subiu de 9 para 16 px. Nove é tão pouco que o olho lê como fade;
     dezesseis lê como movimento, e movimento é o que se pede aqui.
   · A OPACIDADE fecha antes do deslocamento (300 contra 700 ms). O bloco fica
     legível cedo e continua assentando — ler não espera a animação terminar.
   O desfoque some junto: é o que amarra o conjunto e evita o texto "escorregar"
   nítido, que denuncia a translação. */
.stg{opacity:0;transform:translateY(16px);filter:blur(6px)}
.stg.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity 300ms cubic-bezier(.16,1,.3,1),
             transform 700ms cubic-bezier(.16,1,.3,1),
             filter 520ms cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .stg{transform:none;filter:none}
  .stg.in{transition:opacity 200ms linear}
}

/* ── bancada ── */
.bench{
  margin:28px 0 0;border-radius:18px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
.bench .bh{
  display:flex;align-items:center;gap:9px;padding:14px 20px 0;
  font:590 11px/1 inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.bench .bh i{width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:ping 2.6s var(--ease-out) infinite}
.bench .bh .live{
  margin-left:auto;letter-spacing:.06em;text-transform:none;font-weight:500;
  color:var(--acc);opacity:.75;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(94,230,168,.5)}70%,100%{box-shadow:0 0 0 7px rgba(94,230,168,0)}}
.bpad{padding:14px 20px 20px;display:flex;flex-direction:column;gap:15px;align-items:center}
.bscreen{
  width:100%;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#0b0f0d,#050607);
  border:1px solid rgba(255,255,255,.06);
}
.bscreen canvas{display:block;width:100%;height:190px}
.bknobs{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:13px 16px;border-radius:14px;
  background:radial-gradient(130% 120% at 30% -10%,#e0d0aa,#cbb68d 55%,#b09c74 120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18),
             0 6px 20px rgba(0,0,0,.5);
}
.brow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.bplay{
  display:inline-flex;align-items:center;gap:9px;
  font:590 15px/1 inherit;letter-spacing:-.01em;
  padding:13px 25px;border:0;border-radius:980px;cursor:pointer;color:#062018;background:var(--acc);
  box-shadow:0 4px 18px rgba(94,230,168,.24);
  transition:transform 150ms var(--ease-out),box-shadow 240ms var(--ease-out),
             background 200ms var(--ease-out);
}
@media (hover:hover){.bplay:hover{background:#74f0b7;box-shadow:0 6px 24px rgba(94,230,168,.36)}}
.bplay:active{transform:scale(.962);box-shadow:0 2px 10px rgba(94,230,168,.3)}
.bplay.ghost{background:rgba(255,255,255,.07);color:var(--ink);box-shadow:none;
  border:1px solid var(--line-2)}
@media (hover:hover){.bplay.ghost:hover{background:rgba(255,255,255,.12)}}
.bopt{
  font:590 13.5px/1.2 inherit;letter-spacing:-.006em;
  padding:12px 17px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.045);min-width:112px;
  transition:transform 150ms var(--ease-out),background 220ms var(--ease-out),
             color 220ms var(--ease-out),border-color 220ms var(--ease-out);
}
.bopt small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);margin-top:3px;
  transition:color 220ms var(--ease-out)}
@media (hover:hover){.bopt:hover{background:rgba(255,255,255,.09)}}
.bopt.on{background:var(--acc);color:#062018;border-color:transparent;
  box-shadow:0 0 22px rgba(94,230,168,.22)}
.bopt.on small{color:rgba(6,32,24,.66)}
.bopt:active{transform:scale(.96)}

.bkeys{display:flex;gap:4px;justify-content:center;width:100%}
.bk{
  flex:1;max-width:54px;height:92px;border:1px solid rgba(255,255,255,.08);
  border-radius:5px 5px 8px 8px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#25252c,#191920);color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding-bottom:9px;gap:2px;font:590 12px/1.2 inherit;
  transition:transform 130ms var(--ease-out),background 220ms var(--ease-out),
             box-shadow 200ms var(--ease-out);
}
.bk.blk{background:linear-gradient(180deg,#0e0e12,#08080b);color:rgba(255,255,255,.5)}
.bk em{font-style:normal;font-size:10px;font-weight:400;color:var(--ink-3)}
.bk.hi{background:linear-gradient(180deg,#17493a,#0f3329);color:#c8ffe6;
  border-color:rgba(94,230,168,.35);box-shadow:0 0 18px rgba(94,230,168,.14)}
.bk.hi em{color:rgba(200,255,230,.6)}
.bk.hi2{background:linear-gradient(180deg,#5ee6a8,#33c98a);color:#062018;
  border-color:transparent;box-shadow:0 0 26px rgba(94,230,168,.35)}
.bk.hi2 em{color:rgba(6,32,24,.6)}
.bk:active,.bk.dn{transform:translateY(3px) scale(.985)}

.tip{
  width:100%;padding:14px 16px;border-radius:12px;
  background:var(--acc-dim);border:1px solid rgba(94,230,168,.20);
  font:400 14.5px/1.55 inherit;letter-spacing:-.006em;color:#cdf6e5;display:flex;gap:11px;
}
.tip .ic{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--acc);
  color:#062018;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:1px}
.tip b{font-weight:600;color:#eafff5}

.recipe{list-style:none;display:flex;flex-direction:column;gap:2px;width:100%;padding:0;margin:0}
.recipe li{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:11px;
  transition:background 220ms var(--ease-out)}
@media (hover:hover){.recipe li:hover{background:rgba(255,255,255,.04)}}
.recipe button{
  flex:0 0 auto;width:29px;height:29px;border:1px solid var(--line-2);border-radius:50%;
  cursor:pointer;font:600 12.5px/1 inherit;color:var(--ink-2);background:rgba(255,255,255,.05);
  transition:transform 240ms var(--ease-out),background 300ms var(--ease-out),
             color 300ms var(--ease-out);
}
.recipe button:active{transform:scale(.9)}
.recipe button.done{background:var(--acc);color:#062018;border-color:transparent;transform:scale(1.06)}
.recipe span{font:400 15px/1.4 inherit;color:rgba(255,255,255,.75)}
.recipe li.done span{color:var(--ink-3)}

.mnav{display:flex;gap:10px;margin-top:34px;padding-bottom:20px}
.mnav button{
  font:590 14.5px/1 inherit;letter-spacing:-.01em;padding:13px 21px;border-radius:980px;
  cursor:pointer;color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
  transition:transform 150ms var(--ease-out),background 220ms var(--ease-out);
}
@media (hover:hover){.mnav button:hover{background:rgba(255,255,255,.11)}}
.mnav button:active{transform:scale(.965)}
.mnav button.pri{background:var(--acc);color:#062018;border-color:transparent;margin-left:auto;
  box-shadow:0 4px 18px rgba(94,230,168,.22)}
@media (hover:hover){.mnav button.pri:hover{background:#74f0b7}}
.mnav button:disabled{opacity:.3;cursor:default;transform:none}

/* ── botão do painel que abre o manual ────────────────────────────────────
   Este é o único botão do chassi que leva a OUTRO lugar, e num painel de areia
   e âmbar ele precisa se destacar sem virar enfeite. Três coisas fazem isso:

     · fósforo, não areia — é a cor da TELA, e a tela é onde o manual acontece;
     · uma respiração lenta no halo, para o olho encontrá-lo sem procurar;
     · um brilho especular que atravessa no hover, que é o que dá a sensação de
       superfície polida em vez de retângulo pintado.
   ---------------------------------------------------------------------- */
/* Brutalista, anos 70: retângulo reto, sem raio, sem gradiente macio, sem
   vidro. Fósforo sobre preto, borda dura, tipografia monoespaçada espaçada e
   caixa alta. A peça mais "digital" do chassi é justamente a que leva ao
   manual — e num painel de areia e metal, um bloco verde chapado grita mais
   que qualquer brilho. */
/* ANUNCIADOR, do painel de controle da referência: um retângulo retroiluminado
   dentro de uma moldura de metal, com a legenda gravada em duas linhas
   separadas por um fio. Não é um botão que imita relevo — é uma JANELA de luz
   com texto por cima, que é como aqueles painéis diziam o que estava
   acontecendo. Canto reto, sem gradiente macio, sem vidro. */
#learnBtn{
  width:100%;height:64px;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;font-size:11.5px;letter-spacing:.24em;
  color:#04170f;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#7dffbe,#3cd68d);
  border:3px solid #17150f;border-radius:2px;
  box-shadow:inset 0 0 14px rgba(255,255,255,.45),0 2px 4px rgba(0,0,0,.5);
  transition:filter 140ms var(--ease-out),box-shadow 140ms var(--ease-out),
             transform 90ms var(--ease-out);
  animation:lbPulse 3.4s var(--ease-in-out) infinite;
}
.lb-ico{width:15px;height:14px;fill:none;stroke:#04170f;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;margin-bottom:3px}
#learnBtn .lb-t{display:block}
/* a segunda linha, separada pelo fio — como as legendas de duas linhas dos
   anunciadores ("SQL SVC / OFFLINE") */
#learnBtn small{
  display:block;margin-top:4px;padding-top:4px;
  font-weight:700;font-size:8px;letter-spacing:.26em;color:#04170f;opacity:.62;
  border-top:1px solid rgba(4,23,15,.32);
}

/* o halo respira: 3,4 s é lento o bastante pra não competir com o instrumento */
/* o halo respira sem arredondar nada: sombra dura que ganha um segundo anel */
/* a luz de trás oscila de leve, como lâmpada de anunciador */
@keyframes lbPulse{
  0%,100%{box-shadow:inset 0 0 14px rgba(255,255,255,.45),0 2px 4px rgba(0,0,0,.5)}
  55%    {box-shadow:inset 0 0 26px rgba(255,255,255,.75),0 2px 4px rgba(0,0,0,.5),
                     0 0 20px rgba(87,255,154,.4)}
}

/* brilho especular: uma faixa de luz inclinada que atravessa no hover */
.lb-sheen{
  position:absolute;top:-40%;left:-60%;width:38%;height:180%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg) translate3d(0,0,0);
  transition:left 620ms var(--ease-out);
  pointer-events:none;
}
@media (hover:hover){
  #learnBtn:hover{
    animation:none;filter:brightness(1.1);
    box-shadow:inset 0 0 30px rgba(255,255,255,.8),0 0 24px rgba(87,255,154,.5),0 2px 4px rgba(0,0,0,.5);
  }
  #learnBtn:hover .lb-sheen{left:120%}
}
/* aperta pra dentro: a sombra dura encolhe até sumir, como um botão físico */
#learnBtn:active{transform:translateY(2px);filter:brightness(.86);animation:none}

/* Painel desligado, botão quieto: com o instrumento apagado o chassi inteiro
   perde cor, e um botão pulsando ali chamaria pra festa errada. */
#panel.off #learnBtn{animation:none;filter:none}

@media (prefers-reduced-motion:reduce){
  #learnBtn{animation:none}
  .lb-sheen{display:none}
}