:root{
  --purple:#7c3aed; --orange:#ff7a1a; --lime:#8bdc00; --black:#0b0b0b; --text:#f5f5f5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent),
    radial-gradient(1200px 600px at 110% 10%, rgba(255,122,26,.18), transparent),
    var(--black);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.container{max-width:720px;margin-inline:auto;padding:24px}
.card{background:rgba(0,0,0,0.69);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.header{display:flex;align-items:center;gap:16px;padding:16px 16px 0 16px;flex-wrap:wrap;justify-content:center}
.logo{max-width:520px;width:100%;height:auto;border-radius:12px}
.h1{font-size:clamp(22px,2.5vw,28px);margin:12px 0 0 0;text-align:center}
.instructions{padding:0 20px 18px 20px;text-align:center;color:#ccc}
.reveal{display:grid;gap:12px;place-items:center;padding:20px;border-top:1px dashed rgba(255,255,255,.12)}
.code-wrap{
  width:100%;max-width:420px;display:grid;place-items:center;
  border:2px dashed rgba(255,255,255,.25);border-radius:14px;padding:16px;min-height:84px;background:rgba(0,0,0,.25)
}
.code{
  font-weight:800;letter-spacing:.08em;font-size:clamp(28px,6vw,40px);
  opacity:0;transform:scale(.98) translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
  background: linear-gradient(90deg, var(--lime), var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 16px rgba(255,255,255,.08);
}
.code.show{opacity:1;transform:scale(1) translateY(0)}
.btn{border:0;border-radius:9999px;padding:14px 22px;font-weight:800;letter-spacing:.04em;background:linear-gradient(135deg,var(--purple),var(--orange));color:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(124,58,237,.35)}
.btn:active{transform:translateY(1px)}
.meta{padding:14px 18px;color:#aaa;font-size:14px;border-top:1px solid rgba(255,255,255,.06)}
.footer{margin-top:16px;color:#9aa;font-size:12px;text-align:center}
.bone{position:fixed;top:-40px;left:0;pointer-events:none;font-size:22px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.95}}
@media (prefers-reduced-motion: reduce){.btn,.code{transition:none}.bone{display:none}}