/* A porta do painel. Preto, a chuva azul e cinza em volta, e no meio só o prompt.
   (a variável chama --verde por herança do primeiro rascunho; a cor é o azul da Liberali) */
:root{--verde:#42bafe;--cinza:#aab0b7;--verde-escuro:#0b2a3d;--fundo:#03060a}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--fundo);color:var(--verde);
  font-family:'JetBrains Mono',ui-monospace,monospace;overflow:hidden}
#chuva{position:fixed;inset:0;width:100%;height:100%;display:block}
.porta{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
#forma{pointer-events:auto;display:flex;flex-direction:column;gap:14px;align-items:center;
  padding:34px 44px;background:rgba(3,6,10,.86);border:1px solid rgba(66,186,254,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 60px rgba(66,186,254,.12),0 0 140px rgba(66,186,254,.06) inset;
  backdrop-filter:blur(2px)}
.prompt{font-size:clamp(18px,2.2vw,26px);letter-spacing:.06em;text-shadow:0 0 12px rgba(66,186,254,.6)}
.cursor{animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
#codigo{width:min(60vw,360px);padding:12px 14px;font:inherit;font-size:clamp(16px,1.6vw,20px);
  letter-spacing:.2em;color:var(--verde);background:rgba(11,42,61,.3);border:1px solid rgba(66,186,254,.5);
  border-radius:2px;outline:none;text-align:center;caret-color:var(--verde)}
#codigo:focus{border-color:var(--verde);box-shadow:0 0 18px rgba(66,186,254,.35)}
#confirmar{width:min(60vw,360px);padding:11px 14px;font:inherit;font-size:clamp(14px,1.3vw,17px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fundo);background:var(--verde);
  border:1px solid var(--verde);border-radius:2px;cursor:pointer;
  box-shadow:0 0 18px rgba(66,186,254,.35);transition:box-shadow .2s,transform .1s}
#confirmar:hover{box-shadow:0 0 28px rgba(66,186,254,.6)}
#confirmar:active{transform:translateY(1px)}
#confirmar:focus-visible{outline:2px solid #fff;outline-offset:2px}
#confirmar:disabled{opacity:.6;cursor:wait}
.aviso{min-height:1.2em;margin:0;font-size:13px;letter-spacing:.08em;color:#ff5c5c;opacity:0;transition:opacity .25s}
.aviso.on{opacity:1}
#forma.erro{animation:treme .4s}
@keyframes treme{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#forma.ok{animation:some .6s forwards}
@keyframes some{to{opacity:0;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.cursor,#forma.erro,#forma.ok{animation:none}}