:root{--night:#0d1a38;--ink:#f4f1ea;--muted:#aab4cc;--lamp:#f3c56b;--line:rgba(244,241,234,.16);--font:'Portfolio English',"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(130% 60% at 50% 0%,#22407a 0%,var(--night) 60%) fixed,var(--night);color:var(--ink);font-family:var(--font);line-height:1.8;text-align:center;-webkit-text-size-adjust:100%}
a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid var(--lamp);outline-offset:4px}
.snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main,footer{position:relative;z-index:1}
main{max-width:560px;margin:0 auto;padding:max(48px,env(safe-area-inset-top)) 20px 24px}
h1,h2{font-weight:700;letter-spacing:.05em;margin:0}

/* success */
.check{width:72px;height:72px;margin:0 auto 22px}
.check svg{width:100%;height:100%;fill:none;stroke:var(--lamp);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .8s ease-out forwards}
.check path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .4s .7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.28em;color:var(--lamp)}
.success h1{font-size:clamp(2rem,9vw,2.8rem);line-height:1.3}
.lead{margin:16px 0 0;font-size:17px;color:var(--muted)}
.lead em{font-style:normal;color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%,rgba(243,197,107,.45) 62%)}
.success>*{opacity:0;transform:translateY(12px);animation:rise .7s ease-out forwards}
.success>:nth-child(2){animation-delay:.9s}.success>:nth-child(3){animation-delay:1.05s}.success>:nth-child(4){animation-delay:1.2s}
.success>.check{animation-delay:0s}
@keyframes rise{to{opacity:1;transform:none}}

/* art */
.art{margin:44px 0 0;opacity:0;animation:rise .9s 1.5s ease-out forwards}
.art-frame{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 8px rgba(244,241,234,.06)}
.art-frame img{display:block;width:100%;height:auto}
.qr-area{position:absolute;left:18%;top:23.3%;width:63.2%;height:43.3%}
.finder{position:absolute;width:15.6%;height:15.6%;border:3px solid var(--lamp);border-radius:4px;box-shadow:0 0 16px rgba(243,197,107,.85);opacity:0;animation:pop .5s ease-out forwards,glow 2s 3s ease-in-out infinite}
.f-tl{left:0;top:0;animation-delay:2.4s,3s}.f-tr{right:0;top:0;animation-delay:2.6s,3.2s}.f-bl{left:0;bottom:0;animation-delay:2.8s,3.4s}
@keyframes pop{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
@keyframes glow{50%{box-shadow:0 0 3px rgba(243,197,107,.3);opacity:.7}}
.art figcaption{margin-top:18px;font-size:13px;color:var(--muted);line-height:1.9}

/* message */
.message{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.message h2{font-size:clamp(1.5rem,6.5vw,1.9rem);line-height:1.5}
.message p{margin:20px 0 0;font-size:14px;line-height:2;color:var(--muted);text-align:left}
.usecases{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.usecases li{font-size:12px;padding:6px 14px;border-radius:999px;border:1px solid var(--line)}

/* actions */
.actions{margin-top:48px;display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--lamp);color:#1a1606}
.btn-primary:hover{background:#f7d58e}
.btn-ghost{color:var(--ink);border-color:rgba(244,241,234,.4)}
.btn-ghost:hover{border-color:var(--lamp);color:var(--lamp)}
.btn-text{color:var(--muted);font-weight:400;font-size:14px}
.btn-text:hover{color:var(--ink)}

footer{padding:24px 20px max(36px,env(safe-area-inset-bottom));font-size:11px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .check circle,.check path,.success>*,.art,.finder{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
}