body{margin:0;min-height:100vh;display:grid;place-items:center;color:#F3F0E7;
  font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  background:radial-gradient(90% 55% at 50% 0%,#2B2512,transparent 70%),
    repeating-radial-gradient(circle at 0 0,transparent 0 14px,#ffffff06 14px 15px),#0A0C0B}
.box{width:min(340px,calc(100% - 32px));text-align:center}
.marks{display:flex;justify-content:center;align-items:center;gap:4px;margin-bottom:10px}
.marks img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 0 14px var(--c)) drop-shadow(0 6px 10px #000);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.marks img:nth-child(2){width:96px;height:96px;animation-delay:.08s}
.marks img:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.9)}}
h1{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:64px;line-height:.95;margin:6px 0 0;letter-spacing:.02em;
  background:linear-gradient(180deg,#FFF6D6,#FFE08A 35%,#E9B949 60%,#8C6A1C);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-family:"Dela Gothic One",sans-serif;letter-spacing:.5em;margin:4px 0 30px;opacity:.85;padding-left:.5em}
input,button{width:100%;box-sizing:border-box;font-size:16px;padding:15px;border-radius:12px;border:1px solid #2A312D}
input{background:#121614;color:#F3F0E7;margin-bottom:10px;text-align:center;letter-spacing:.1em}
input:focus{outline:2px solid #E9B949;outline-offset:-1px}
button{background:linear-gradient(180deg,#FFE08A,#E9B949);color:#1A1405;font-family:"Anton",Impact,sans-serif;font-size:18px;
  letter-spacing:.15em;border:0;cursor:pointer;box-shadow:0 8px 24px -8px #E9B94999}
.err{color:#E0664E;min-height:1.4em;font-size:14px}
.note{font-size:12px;color:#97A19B}