@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800&display=swap";:root{--latte:#faf1e4;--paper:#fff9ef;--pumpkin:#c96a33;--pumpkin-deep:#a9531f;--ink:#4a2e22;--ink-soft:#7a5a4a;--mustard:#e8a94c;--mustard-soft:#f6d9a6;--plum:#7a3b46;--forest:#5b7553;--bean:#8a5236;--theme-primary:#c96a33;--theme-primary-deep:#a9531f;--theme-on-primary:#fff9ef;--theme-accent:#f6d9a6;--theme-bg:#faf1e4;--theme-on-bg:#4a2e22;--theme-strong:#a9531f;--theme-mascot:#c96a33;--font-display:"Fredoka", "Baloo 2", ui-rounded, system-ui, sans-serif;--font-body:"Nunito", "Quicksand", ui-rounded, system-ui, sans-serif;--text-sm:.9375rem;--text-base:1.0625rem;--text-lg:1.25rem;--text-xl:1.625rem;--text-2xl:2.125rem;--line:3px;--radius-sm:14px;--radius-md:20px;--radius-lg:32px;--radius-pill:999px;--shadow-soft:0 18px 40px -12px #4a2e2238, 0 4px 10px -4px #4a2e221f;--shadow-press:0 5px 0 var(--ink);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--theme-bg);min-height:100dvh;color:var(--theme-on-bg);font-family:var(--font-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased;margin:0;font-weight:600;line-height:1.5}h1,p{margin:0}button,input{font:inherit;color:inherit}:focus-visible{outline:4px solid var(--mustard);outline-offset:3px}.stage{justify-content:center;align-items:center;gap:var(--space-5);min-height:100dvh;padding:var(--space-6) var(--space-4) var(--space-7);flex-direction:column;display:flex;position:relative;overflow:hidden}.wordmark{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:.01em;display:flex}.wordmark__bean{width:30px;height:30px;transform:rotate(-12deg)}.card{color:var(--ink);--pad:clamp(1.25rem, 5vw, 2.25rem);z-index:1;width:min(100%,26rem);padding:var(--pad);background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);position:relative}.card.is-entering{animation:.38s cubic-bezier(.34,1.4,.64,1) card-in}@keyframes card-in{0%{opacity:.4;transform:translateY(10px)rotate(-1deg)scale(.98)}}.card__top{text-align:center}.cup{width:150px;margin:calc(var(--space-2) * -1) auto var(--space-3);display:block}.cup__steam path{animation:3.2s ease-in-out infinite steam}.cup__steam path:nth-child(2){animation-delay:-1.1s}.cup__steam path:nth-child(3){animation-delay:-2.2s}@keyframes steam{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:.6;transform:translateY(-5px)}}.card__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);letter-spacing:-.005em;overflow-wrap:anywhere;line-height:1.1}.card__lead{margin:var(--space-3) auto 0;max-width:32ch;color:var(--ink-soft)}.perforation{margin:var(--space-5) calc(var(--pad) * -1);border-top:3px dashed color-mix(in srgb, var(--ink) 35%, transparent);position:relative}.perforation:before,.perforation:after{content:"";border:var(--line) solid var(--ink);background:var(--theme-bg);border-radius:50%;width:32px;height:32px;position:absolute;top:-17px}.perforation:before{clip-path:inset(-4px -4px -4px 50%);left:-19px}.perforation:after{clip-path:inset(-4px 50% -4px -4px);right:-19px}.cup--small{width:96px;margin-bottom:var(--space-2)}.qr{width:min(100%,15rem);margin:var(--space-5) auto 0;padding:var(--space-4);border:var(--line) solid var(--ink);border-radius:var(--radius-md);box-shadow:0 6px 0 var(--theme-accent);background:#fff}.qr svg{aspect-ratio:1;width:100%;height:auto;display:block}.stamps{gap:var(--space-3);margin-bottom:var(--space-5);flex-direction:column;display:flex}.stamps__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);margin:0}.stamps__empty{padding:var(--space-4) var(--space-4) var(--space-5);text-align:center;border:2px dashed color-mix(in srgb, var(--ink) 30%, transparent);border-radius:var(--radius-md)}.stamps__spots{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.stamps__spots span{aspect-ratio:1;border:2px dashed color-mix(in srgb, var(--ink) 35%, transparent);background:var(--latte);border-radius:50%;width:1.6rem}.stamps__empty-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)}.wallet{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.wallet__row{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:baseline;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--space-4);border:2px solid color-mix(in srgb, var(--ink) 25%, transparent);border-radius:var(--radius-sm);border-left:8px solid var(--theme-primary);box-shadow:inset 2px 0 0 var(--theme-strong);background:#fff;grid-template-columns:1fr auto;display:grid}.wallet__row:hover{border-color:var(--theme-strong)}.wallet__shop{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);overflow-wrap:anywhere;line-height:1.2}.wallet__count{color:var(--ink-soft);white-space:nowrap;font-weight:700}.wallet__beans{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:2px;display:flex}.wallet__bean{width:1.1rem;height:1.1rem}.wallet__more{margin-left:var(--space-1);font-size:var(--text-sm);color:var(--bean);font-weight:800}.card__form{gap:var(--space-5);flex-direction:column;display:flex}.field{gap:var(--space-2);flex-direction:column;display:flex}.field__label{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)}.field__hint{font-size:var(--text-sm);color:var(--ink-soft)}.text-input{width:100%;font-family:var(--font-display);font-size:var(--text-xl);border:var(--line) solid var(--ink);border-radius:var(--radius-md);background:#fff;padding:.7rem 1.1rem;font-weight:500;box-shadow:inset 0 3px #4a2e2214}.text-input:focus-visible{outline-offset:0;border-color:var(--theme-strong)}.form-error{padding:var(--space-3) var(--space-4);color:var(--plum);background:color-mix(in srgb, var(--plum) 9%, var(--paper));border:2px solid color-mix(in srgb, var(--plum) 45%, transparent);border-radius:var(--radius-sm);font-weight:700}.form-error+.field__hint{margin-top:calc(var(--space-3) * -1)}.form-error[hidden],.field__hint[hidden]{display:none}.pin .field__label{align-self:center}.pin__box{align-self:center;position:relative}.pin__slots{gap:clamp(.6rem,3vw,.9rem);display:flex}.pin__slot{aspect-ratio:1;border:var(--line) dashed color-mix(in srgb, var(--ink) 45%, transparent);background:var(--latte);border-radius:50%;place-items:center;width:clamp(3.4rem,15vw,4rem);transition:border-color .15s,background-color .15s;display:grid}.pin__slot.is-current{border-color:var(--theme-strong);background:#fff;border-style:solid}.pin__slot.is-filled{border-style:solid;border-color:var(--ink);background:var(--theme-accent)}.pin__bean{opacity:0;width:62%;transform:scale(.3)rotate(-40deg)}.pin__slot.is-filled .pin__bean{opacity:1;animation:.26s cubic-bezier(.34,1.8,.64,1) stamp;transform:none}@keyframes stamp{0%{opacity:0;transform:scale(1.6)rotate(-25deg)}60%{opacity:1;transform:scale(.9)rotate(4deg)}}.pin__input{opacity:0;cursor:pointer;border:0;width:100%;font-size:16px;position:absolute;inset:0}.pin:has(.pin__input:focus-visible) .pin__slots{outline:4px solid var(--mustard);outline-offset:6px;border-radius:var(--radius-pill)}.pin.is-wrong .pin__slots{animation:.42s ease-in-out wobble}@keyframes wobble{20%,60%{transform:translate(-8px)rotate(-1deg)}40%,80%{transform:translate(8px)rotate(1deg)}}.button{width:100%;min-height:3.75rem;font-family:var(--font-display);font-size:var(--text-lg);color:var(--theme-on-primary);background:var(--theme-primary);border:var(--line) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-press);cursor:pointer;padding:.8rem 1.5rem;font-weight:700;transition:transform 90ms,box-shadow 90ms,background-color .15s}.button:hover{background:var(--theme-primary-deep)}.button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.button:disabled{cursor:progress;background:color-mix(in srgb, var(--theme-primary) 70%, var(--paper));box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.button--quiet{color:var(--ink);background:var(--theme-accent)}.button--quiet:hover{background:color-mix(in srgb, var(--theme-accent) 70%, var(--theme-primary))}.link-button{margin-top:calc(var(--space-2) * -1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--ink-soft);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;align-self:center;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.link-button:hover{color:var(--ink)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.stamps__body{gap:var(--space-3);flex-direction:column;display:flex}.stamp-card{--surround:var(--paper);width:min(100%,21rem);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-md);box-shadow:0 5px 0 var(--theme-accent);background:#fff;margin-inline:auto;position:relative;overflow:hidden}.shop-lockup{align-items:center;gap:.5em;min-width:0;max-width:100%;display:inline-flex}.shop-lockup__name{font-family:var(--font-display);text-align:right;overflow-wrap:anywhere;font-weight:700;line-height:1.15}.shop-logo{aspect-ratio:1;background:var(--paper);border:2px solid var(--ink);border-radius:50%;flex:none;place-items:center;width:1.9em;display:grid;overflow:hidden}.shop-logo img{object-fit:cover;width:100%;height:100%}.shop-logo__bean{width:64%;height:auto}.stamp-card__head{justify-content:flex-end;display:flex}.stamp-card__lockup{font-size:var(--text-lg)}.stamp-card__field{width:100%;aspect-ratio:var(--area-aspect);font:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0;display:block;position:relative}button.stamp-card__field{cursor:crosshair}button.stamp-card__field:disabled{cursor:default}.stamp-card.is-busy button.stamp-card__field{cursor:progress}.stamp-card__socket,.stamp-mark{left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:var(--stamp-size);aspect-ratio:1;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.stamp-card__socket{border:2px dashed color-mix(in srgb, var(--ink) 30%, transparent);background:var(--latte)}button.stamp-card__field:hover:not(:disabled) .stamp-card__socket{border-color:color-mix(in srgb, var(--theme-strong) 45%, transparent)}.stamp-mark{color:var(--theme-strong);mix-blend-mode:multiply;pointer-events:none}.stamp-mark svg{width:100%;height:100%;display:block}.stamp-mark.is-landing svg{animation:.42s cubic-bezier(.34,1.8,.64,1) stamp-press}.stamp-mark.is-lifting svg{animation:.24s ease-in forwards stamp-lift}@keyframes stamp-press{0%{opacity:0;transform:scale(1.7)}55%{opacity:1;transform:scale(.92)}}@keyframes stamp-lift{to{opacity:0;transform:scale(1.35)}}.stamp-card__status{font-family:var(--font-display);text-align:center;color:var(--ink-soft);padding:0 1rem .9rem;font-weight:600}.stamp-card.is-full .stamp-card__status{color:var(--theme-strong);font-size:var(--text-lg)}.stamp-card--classic .stamp-card__head{color:var(--theme-on-primary);background:var(--theme-primary);border-bottom:2px solid var(--ink);padding:.55rem .7rem .55rem 1rem}.stamp-card--ticket{border-radius:var(--radius-sm)}.stamp-card__frame{border:2px dashed var(--theme-strong);border-radius:10px;margin:.45rem;padding:.5rem .55rem .15rem}.stamp-card--ticket .stamp-card__head{color:var(--theme-strong)}.stamp-card__stub{background:var(--theme-accent);border-top:2px dashed color-mix(in srgb, var(--ink) 35%, transparent);position:relative}.stamp-card__stub:before,.stamp-card__stub:after{content:"";background:var(--surround);border:2px solid var(--ink);border-radius:50%;width:18px;height:18px;position:absolute;top:-10px}.stamp-card__stub:before{left:-11px}.stamp-card__stub:after{right:-11px}.stamp-card--ticket .stamp-card__status,.stamp-card--ticket.is-full .stamp-card__status{color:var(--ink);padding:.6rem 1rem .65rem}.stamp-card--badge{border-radius:var(--radius-lg)}.stamp-card--badge .stamp-card__lockup{color:var(--theme-on-primary);background:var(--theme-primary);border-bottom:2px solid var(--ink);border-left:2px solid var(--ink);border-bottom-left-radius:var(--radius-md);padding:.45rem .7rem .45rem .95rem}.stamp-card__medallion,.stamp-card__reward{aspect-ratio:1;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stamp-card__medallion{background:color-mix(in srgb, var(--theme-accent) 65%, #fff);border:2px dashed color-mix(in srgb, var(--theme-strong) 35%, transparent);width:76%}.stamp-card__reward{border:2px solid var(--ink);background:#fff;place-items:center;width:32%;display:grid}.stamp-card__reward .cup{width:74%;margin:0}.stamp-card--badge.is-full .stamp-card__reward{background:var(--theme-primary)}.stamp-card--badge .stamp-card__status{padding-top:.15rem}.stamp-card.is-leaving{animation:.52s cubic-bezier(.55,0,.75,.2) forwards card-leave}.stamp-card.is-arriving{animation:.6s cubic-bezier(.2,1.35,.4,1) card-arrive}@keyframes card-leave{25%{transform:translateY(-6%)rotate(-3deg)scale(1.03)}to{opacity:0;transform:translate(85%,-40%)rotate(16deg)scale(.8)}}@keyframes card-arrive{0%{opacity:0;transform:translateY(45%)rotate(-5deg)scale(.88)}60%{opacity:1}}.card__lead--center{margin-top:var(--space-4);text-align:center}#app{z-index:1;position:relative}body{transition:background-color .6s}.ambient{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.ambient__p{left:var(--x);top:var(--y);width:var(--size);position:absolute}.ambient__shape{opacity:.7;width:100%;display:block}.ambient__shape svg{width:100%;height:auto;display:block}.ambient__glow{aspect-ratio:1;background:var(--glow);width:100%;box-shadow:0 0 calc(var(--size) * 1.4) calc(var(--size) * .35) var(--glow);border-radius:50%;display:block}.ambient__bubble{aspect-ratio:1;background:radial-gradient(circle at 32% 30%,#fffffff2 0 16%,#d3e3f34d 17%);border:2px solid #3b6ea573;border-radius:50%;width:100%;display:block}.ambient__confetti{aspect-ratio:.6;background:var(--c);border-radius:2px;width:100%;display:block}@media (prefers-reduced-motion:no-preference){.ambient--fall .ambient__p{animation:amb-fall var(--dur) linear var(--delay) infinite;top:-12%}.ambient--rise .ambient__p{animation:amb-rise var(--dur) linear var(--delay) infinite;top:105%}.ambient--fall .ambient__shape,.ambient--rise .ambient__shape{animation:amb-sway calc(var(--dur) / 4) ease-in-out var(--delay) infinite alternate}.ambient--rise .ambient__glow,.ambient--drift .ambient__glow{animation:amb-pulse 1.8s ease-in-out var(--delay) infinite alternate}.ambient--drift .ambient__shape{animation:amb-drift var(--dur) ease-in-out var(--delay) infinite alternate}.ambient--twinkle .ambient__shape{animation:amb-twinkle var(--dur) ease-in-out var(--delay) infinite}}@keyframes amb-fall{to{transform:translateY(125vh) rotate(var(--spin))}}@keyframes amb-rise{to{transform:translateY(-125vh)}}@keyframes amb-sway{0%{transform:translateX(calc(var(--sway) * -1))}to{transform:translateX(var(--sway))}}@keyframes amb-drift{0%{transform:translate(calc(var(--sway) * -1), calc(var(--sway) * .6))}to{transform:translate(var(--sway), calc(var(--sway) * -.8))}}@keyframes amb-pulse{0%{opacity:.25}to{opacity:1}}@keyframes amb-twinkle{0%,to{opacity:.2;transform:scale(.3)rotate(0)}50%{opacity:.9;transform:scale(1)rotate(45deg)}}.welcome{align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;display:flex}.welcome__shop{font-size:var(--text-xl)}.welcome__title{max-width:14ch;font-family:var(--font-display);font-size:var(--text-2xl);margin:0;font-weight:700;line-height:1.1}.welcome__pitch,.welcome__note{max-width:30ch;color:var(--ink-soft)}.welcome__note{font-size:var(--text-sm)}.welcome__card{width:100%;margin-block:var(--space-1) var(--space-2)}a.button{place-items:center;text-decoration:none;display:grid}@media (prefers-reduced-motion:no-preference){.welcome>*{animation:.6s cubic-bezier(.2,.8,.2,1) backwards welcome-in;animation-delay:calc(.15s + var(--i) * .11s)}.welcome>.welcome__card{animation-name:welcome-card-in;animation-duration:.8s;animation-timing-function:cubic-bezier(.2,1.3,.4,1)}.welcome>.welcome__cta{animation-name:welcome-pop;animation-duration:.52s}}@keyframes welcome-in{0%{opacity:0;transform:translateY(18px)}}@keyframes welcome-card-in{0%{opacity:0;transform:translateY(40px)rotate(-7deg)scale(.88)}}@keyframes welcome-pop{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.04)}}