:root{--cream:#f6f0e1;--paper:#fbf7ec;--ink:#17352a;--ink-muted:#6b6550;--green:#14402f;--green-deep:#0d2e23;--gold:#c9a24b;--gold-light:#e6cb86;--gold-text:#dcbd6c;--gold-dark:#86641a;--on-green:#f6f0e1;--emblem-bg:var(--cream);--sans:"Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, -apple-system, sans-serif;--ease-out:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--cream)}body{min-height:100dvh;font-family:var(--sans);color:var(--ink);background:radial-gradient(90% 40% at 12% 0%, #fffdf6 0%, transparent 70%), radial-gradient(70% 30% at 100% 0%, #f1e6c8 0%, transparent 70%), var(--cream);-webkit-font-smoothing:antialiased;touch-action:manipulation;margin:0;overflow-x:hidden}h1,h2,p,ol,ul{margin:0;padding:0}ol,ul{list-style:none}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px}.screen{width:100%;max-width:460px;min-height:100dvh;padding:max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));flex-direction:column;gap:18px;margin:0 auto;display:flex;position:relative;overflow-x:clip}.screen[data-demo=true]{padding-bottom:calc(160px + env(safe-area-inset-bottom))}.appbar{grid-template-columns:44px 1fr 44px;align-items:start;padding-top:6px;display:grid}.appbar__icon{width:26px;height:26px;color:var(--ink);margin-top:8px}.appbar__icon:last-child{justify-self:end}.appbar__brand{color:var(--gold-dark);flex-direction:column;align-items:center;display:flex}.appbar__emblem{width:40px;height:auto}.appbar__name{letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--ink);margin-top:4px;font-size:19px;font-weight:600;line-height:1}.appbar__tag{letter-spacing:.14em;margin-top:4px;font-size:11px;font-weight:400}.detail{background:var(--paper);border-radius:22px;padding:18px 20px 6px;box-shadow:inset 0 1px #ffffffe6,0 8px 22px -14px #17352a59,0 0 0 1px #86641a1f}.detail h2{color:var(--ink);margin-bottom:6px;font-size:19px;font-weight:600}.detail li{color:var(--ink);align-items:center;gap:16px;padding:13px 0;font-size:16px;display:flex}.detail li+li{border-top:1px solid #17352a1a}.detail__icon{width:42px;height:42px;color:var(--gold-dark);background:#f1e6c9;border-radius:50%;flex:none;place-items:center;display:grid}.detail__icon svg{width:22px;height:22px}.history__toggle{border:1.5px solid var(--gold);width:100%;min-height:56px;color:var(--ink);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:12px;font-size:17px;font-weight:500;display:flex;position:relative}.history__toggle svg{width:24px;height:24px}.history__chevron{color:var(--ink);transition:transform .26s var(--ease-out);position:absolute;right:22px}.history__toggle[aria-expanded=true] .history__chevron{transform:rotate(90deg)}.history__drawer{transition:grid-template-rows .3s var(--ease-out);grid-template-rows:0fr;display:grid}.history__drawer[data-open=true]{grid-template-rows:1fr}.history__drawer ul{visibility:hidden;min-height:0;padding:0 8px;transition:visibility 0s .3s;overflow:hidden}.history__drawer[data-open=true] ul{visibility:visible;transition-delay:0s}.history__drawer li{border-bottom:1px solid #17352a1f;justify-content:space-between;gap:12px;padding:12px 0;font-size:15px;display:flex}.history__drawer ul>li:first-child{margin-top:10px}.history__when{color:var(--ink-muted)}.history__toggle,.demo-panel button{transition:transform .14s var(--ease-out), background-color .2s ease}.history__toggle:active{background:#c9a24b24;transform:scale(.985)}@media (hover:hover){.history__toggle:hover{background:#c9a24b17}}.card{--emblem-bg:var(--green);text-align:center;color:var(--on-green);background-origin:border-box;background-clip:padding-box,padding-box,padding-box,border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 70% at 50% 0%, #1c5540 0%, transparent 70%), linear-gradient(170deg, #17483a 0%, var(--green) 55%, var(--green-deep) 100%), linear-gradient(135deg, #f3dc94 0%, #b98a2d 28%, #f7e6a8 50%, #a67a22 74%, #e8cd7e 100%);box-shadow:0 0 0 3px var(--green) inset, 0 0 0 4px #c9a24b59 inset, 0 24px 40px -22px #0d2e23b3;border:1.5px solid #0000;border-radius:26px;padding:26px 22px 24px;position:relative}.card:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(115deg,#0000 38%,#ffeeb447 50%,#0000 62%) 130% 0/260% 100%;position:absolute;inset:0}.card__nfc{width:30px;height:30px;color:var(--gold);position:absolute;top:24px;right:22px}.card__emblem{width:100px;height:auto;color:var(--gold);margin:2px auto 0;display:block}.card__wordmark{letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px #ffecaa47,0 -1px #0006;margin-top:10px;font-size:27px;font-weight:600;line-height:1}.card__tagline{letter-spacing:.14em;color:var(--gold);margin-top:6px;font-size:13px}.rule-title{letter-spacing:.32em;text-transform:uppercase;color:var(--gold-text);align-items:center;gap:14px;margin-top:22px;font-size:14px;display:flex}.rule-title:before,.rule-title:after{content:"";background:var(--gold);opacity:.85;flex:1;height:1px}.rule-title span{margin-right:-.32em}.rule-title--count{letter-spacing:.1em;text-transform:none;margin-top:20px;font-size:17px}.rule-title--count span{margin-right:0}.card__member{letter-spacing:.01em;margin-top:8px;margin-bottom:20px;font-size:25px;font-weight:500}.stamp-grid{grid-template-columns:repeat(5,1fr);gap:12px 10px;padding:0 2px;display:grid}.slot{aspect-ratio:1;border-radius:50%;position:relative}.slot--empty{border:1.6px solid #c9a24be6;box-shadow:inset 0 2px 5px #00000059}.slot--awaiting{border-color:var(--gold-light);box-shadow:inset 0 2px 5px #00000059,0 0 0 3px #e6cb8624}.stamp{filter:drop-shadow(0 3px 3px #00000073);border-radius:50%;position:absolute;inset:-1px}.stamp-mark{width:100%;height:100%;display:block}.slot--target .stamp--new{z-index:2}.slot--target:has(.stamp--new){box-shadow:none;border-color:#0000}.ink-ring,.droplet,.sparkle{pointer-events:none;opacity:0;position:absolute}.ink-ring{border:2px solid var(--gold-light);border-radius:50%;inset:-3px}.droplet{background:var(--gold-light);border-radius:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;top:50%;left:50%}.sparkle{background:linear-gradient(135deg, #fff4cd, var(--gold-light) 55%, var(--gold));clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);z-index:3;width:16px;height:16px;margin:-8px 0 0 -8px;top:50%;left:50%}.progress__num{font-variant-numeric:tabular-nums;color:var(--gold-light);min-width:.7em;font-size:22px;font-weight:600;display:inline-block}.card__valid{letter-spacing:.02em;color:#f6f0e1e6;text-wrap:balance;margin-top:14px;font-size:14px}.toast{z-index:30;background:var(--green-deep);max-width:calc(100vw - 32px);color:var(--gold-light);white-space:nowrap;border:1px solid #e6cb8699;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:500;position:absolute;bottom:-22px;left:50%;translate:-50%;box-shadow:0 10px 24px -8px #0d2e23b3}.confetti{z-index:20;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti__piece{will-change:transform, opacity;position:absolute;top:-28px}.slot--awaiting:after{content:"";border:1px solid var(--gold-light);opacity:0;pointer-events:none;border-radius:50%;animation:2.6s ease-out 1.2s infinite breathe;position:absolute;inset:-4px}.card__emblem .steam{transform-box:fill-box;animation:3.8s ease-in-out infinite steam;animation-delay:calc(var(--s) * -1.2s)}.card:before{content:"";border-radius:inherit;background:radial-gradient(220px circle at var(--mx,50%) var(--my,30%), #ffe9a04d, transparent 65%);mix-blend-mode:soft-light;opacity:var(--hl,0);pointer-events:none;transition:opacity .4s;position:absolute;inset:0}.slot--stamping .stamp--new{will-change:transform, opacity;animation:1.9s both stamp-drop}.slot--stamping .ink-ring{animation:.5s ease-out 1.4s both ink-ring}.slot--stamping .droplet{animation:.5s ease-out 1.4s both droplet}.slot--celebrating .sparkle{animation:sparkle .7s ease-out var(--d) both;translate:var(--x) var(--y)}.card--celebrating:after{animation:.9s ease-out .1s sheen}.card--celebrating .progress__num{animation:num-pop .38s var(--ease-out)}.toast{animation:1.3s ease-out both toast}.confetti__piece{animation:confetti-fall var(--dur) cubic-bezier(.3, .1, .5, 1) var(--delay) both}@keyframes stamp-drop{0%,16%{opacity:0;transform:translateY(-30px)scale(1.3)rotate(-6deg)}40%{opacity:1;animation-timing-function:cubic-bezier(.25,.6,.35,1);transform:translateY(-66px)scale(3.4)rotate(-10deg)}58%{opacity:1;animation-timing-function:cubic-bezier(.6,0,.9,.5);transform:translateY(-44px)scale(2.9)rotate(-6deg)}73.7%{opacity:1;animation-timing-function:ease-out;transform:translate(0,0)scale(1)rotate(0)}81%{transform:scale(.86)}91%{transform:scale(1.06)}to{opacity:1;transform:translate(0,0)scale(1)rotate(0)}}@keyframes ink-ring{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.9)}}@keyframes droplet{0%{opacity:.95;transform:rotate(var(--a)) translateY(-16px) scale(1)}to{opacity:0;transform:rotate(var(--a)) translateY(-36px) scale(.35)}}@keyframes sparkle{0%{opacity:0;transform:scale(0)rotate(0)}40%{opacity:1;transform:scale(1)rotate(45deg)}to{opacity:0;transform:scale(.3)rotate(110deg)}}@keyframes sheen{0%{opacity:0;background-position:130% 0}30%{opacity:1}to{opacity:0;background-position:-30% 0}}@keyframes num-pop{0%{opacity:.2;transform:scale(.6)}60%{opacity:1;transform:scale(1.18)}to{transform:scale(1)}}@keyframes toast{0%{opacity:0;transform:translateY(-14px)}14%,82%{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translateY(-6px)}}@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0)rotate(0)}85%{opacity:1}to{opacity:0;transform:translate3d(var(--drift), 105vh, 0) rotate(var(--spin))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.card--celebrating:after,.card--celebrating .progress__num{animation:none}.slot--stamping .stamp--new{animation:.2s ease-out both fade-in}.slot--stamping .ink-ring,.slot--stamping .droplet,.slot--celebrating .sparkle,.confetti{display:none}.toast{animation:.2s ease-out both fade-in}.progress__fill{transition:none}}.reveal{animation:rise .72s var(--ease-out) both}.screen>.reveal:nth-child(2){animation-delay:90ms}.screen>.reveal:nth-child(3){animation-delay:.2s}.screen>.reveal:nth-child(4){animation-delay:.29s}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translate(0,0)}}@keyframes breathe{0%{opacity:.65;transform:scale(.94)}to{opacity:0;transform:scale(1.22)}}@keyframes steam{0%,to{opacity:.55;transform:translateY(1px)}50%{opacity:1;transform:translate(.6px,-2px)}}@media (prefers-reduced-motion:reduce){.reveal,.slot--awaiting:after,.card__emblem .steam{animation:none}}.demo-panel{z-index:40;left:50%;bottom:max(10px, env(safe-area-inset-bottom));width:min(100vw - 24px,436px);color:var(--on-green);background:#14271cf0;border-radius:18px;padding:10px;position:fixed;translate:-50%;box-shadow:0 12px 28px -10px #14271cb3}.demo-panel__phase{letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);margin:0 4px 8px;font-size:11px;display:block}.demo-panel__buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.demo-panel button{min-height:44px;color:var(--on-green);cursor:pointer;background:0 0;border:1px solid #e6cb8680;border-radius:12px;padding:0 10px;font-size:14px;font-weight:600}.demo-panel button:first-child{background:var(--gold);border-color:var(--gold);color:var(--green-deep)}.demo-panel button:disabled{opacity:.4;cursor:default}.demo-panel button:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}.demo-panel button:active:not(:disabled){transform:scale(.97)}
