:root{color-scheme:dark;--cream:#f5f2e9}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#555c5e;font-family:Arial,Helvetica,sans-serif}main{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100svh;background:url('empty-two-drinks.webp') center center/100% 100% no-repeat}.identity{width:min(56vw,750px);display:flex;flex-direction:column;align-items:center;gap:48px;transform:translateY(-8px)}.logo{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.96}nav{display:flex;justify-content:center;gap:13px}button{font:12px Arial,Helvetica,sans-serif;cursor:pointer;color:var(--cream);border:1px solid #f5f2e988;background:#20292b38;padding:17px 23px;border-radius:2px;backdrop-filter:blur(5px);transition:background .2s,transform .2s}button.download{background:var(--cream);color:#222b2b;border-color:var(--cream)}button span{margin-left:24px}button:hover{transform:translateY(-2px);background:#20292b80}button.download:hover{background:#fffdf7}button:focus-visible{outline:2px solid var(--cream);outline-offset:5px}#toast{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);width:max-content;max-width:88%;font-size:11px;line-height:1.5;background:#f5f2e9;color:#222b2b;padding:12px 16px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}@media(max-width:600px){.identity{width:74vw;gap:34px}nav{gap:10px}button{font-size:11px;padding:16px}button span{margin-left:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.identity{width:auto;transform:none;gap:0}.logo{position:absolute;top:35px;left:4%;width:120px;height:auto}nav{position:relative}@media(max-width:600px){.identity{width:auto;gap:0}.logo{top:26px;left:7%;width:94px}}
main{background-image:url('empty-two-drinks.webp')}nav{position:absolute;bottom:13%;left:0;right:0}.logo{z-index:2}@media(max-width:600px){main{background-image:url('empty-two-drinks.webp')}main:before{content:"";position:absolute;top:22%;left:0;right:0;height:48%;background:url('empty-two-drinks.webp') center/155% 100% no-repeat;mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);z-index:-1}nav{bottom:14%}}

/* One photographic scene; the interface stays still above the entrance. */
main{overflow:hidden}.entrance{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.entrance svg{display:block;width:100%;height:100%;overflow:hidden}.identity{z-index:2}.settled-scene,.departing-hand{opacity:0}.slide-group{transform:translate(-900px,35px)}
@media(max-width:600px){.entrance{top:22%;height:48%;bottom:auto;mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}.entrance svg{width:155%;max-width:none;margin-left:-27.5%}}
@media(prefers-reduced-motion:reduce){.entrance{display:none}}

.coffee-group{transform:translate(900px,25px)}

/* The composition is retained after animation: no background swap. */
main{background-image:url('empty-two-drinks.webp')}main:before{display:none}.entrance{display:block!important}.reward-motion{transform:translate(0,1000px);opacity:0}.stamp-card{position:absolute;top:10%;left:50%;transform:translateX(-50%);text-align:center;color:#f9f7f0;min-width:260px}.stamps{display:flex;gap:14px;justify-content:center}.stamp{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;padding:0;background:transparent;border:1px solid #f5f2e9a0;backdrop-filter:none}.stamp span{margin:0}.stamp>span:not(.free-label){opacity:0;font-size:32px;line-height:1}.stamp.filled{background:#f5f2e9;color:#36422a;border-color:#f5f2e9;transform:rotate(-12deg)}.stamp.filled>span:not(.free-label){opacity:1}.stamp:disabled{cursor:default}.stamp:not(:disabled):hover{background:#f5f2e926;transform:rotate(8deg)}.stamp.filled:not(:disabled):hover{background:#fff}.stamp .free-label{font-size:9px;letter-spacing:.05em}.stamp .reward-check{display:none}.stamp.filled .free-label{display:none}.stamp.filled .reward-check{display:block}.stamp-card p{font-size:10px;letter-spacing:.12em;margin:15px 0 0;text-transform:uppercase;min-height:16px}.stamp.ready{box-shadow:0 0 0 5px #f5f2e912}.stamp:focus-visible{outline-offset:6px}nav{bottom:5%}
@media(max-width:600px){.stamp-card{top:13%}.stamp{width:42px;height:42px}.stamp-card p{font-size:9px}.entrance{top:24%;height:49%}nav{bottom:10%}}

.stamp.reward{background:linear-gradient(135deg,#ffffff42,#ffffff12);border:1px solid #ffffff8c;box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #ffffff18,0 5px 18px #101b1714;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);color:#fff}.stamp.reward .free-label{font-size:9px;letter-spacing:.07em;text-shadow:0 1px 3px #17221e66}.stamp.reward.ready{box-shadow:inset 0 1px 0 #ffffff90,0 0 0 5px #ffffff10,0 5px 20px #101b1726}.stamp.reward:not(:disabled):hover{background:linear-gradient(135deg,#ffffff65,#ffffff24)}.stamp.reward.filled{background:linear-gradient(135deg,#ffffff70,#ffffff28);color:#fff}

@media(max-width:600px){.entrance svg{width:140%;margin-left:-20%}}

@keyframes free-invitation{0%,100%{scale:1}45%{scale:1.13}65%{scale:1.13}}.stamp.reward.ready{animation:free-invitation 1.9s ease-in-out infinite;transform-origin:center}.stamp.reward.filled{animation:none}@media(prefers-reduced-motion:reduce){.stamp.reward.ready{animation:none}}

@media(max-width:600px){.dessert-layout{transform:translate(0,75px)}}

.stamp-card{width:min(440px,88vw)}.stamp-card p{text-transform:none;letter-spacing:.015em;font-size:13px;line-height:1.5}.regular-finale{position:absolute;inset:23% 2% 19%;margin:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#f6f3e9;text-align:center;pointer-events:none;visibility:hidden;font-family:Ahsing,Georgia,serif;font-weight:400;line-height:.88;text-shadow:0 3px 18px #1c251a15}.regular-finale.visible{visibility:visible}.regular-finale span{display:block;white-space:nowrap}.be-line{font-size:clamp(80px,15vw,220px)}.regular-line{font-size:clamp(65px,15.5vw,235px);letter-spacing:-.035em}@media(max-width:600px){.stamp-card p{font-size:11px}.dessert-layout{transform:translate(0,40px)}.regular-finale{inset:25% 2% 25%}.be-line{font-size:22vw}.regular-line{font-size:16.5vw}}

@font-face{font-family:'Fjalla One';src:url('fjalla-one.ttf') format('truetype');font-display:swap}.regular-finale{font-family:'Fjalla One','Arial Narrow',sans-serif;font-weight:400;line-height:.91;gap:.04em}.regular-finale span{transform:scaleX(.82);font-weight:400;letter-spacing:-.015em}.be-line{font-size:clamp(100px,18vw,250px)}.regular-line{font-size:clamp(85px,18vw,250px)}@media(max-width:600px){.entrance svg{width:110%;margin-left:-5%}.dessert-layout{transform:translate(0,0)}.be-line{font-size:26vw}.regular-line{font-size:22vw}}

.regular-finale{flex-direction:row;inset:25% 1% 23%;white-space:nowrap}.regular-finale .regular-line{font-size:clamp(52px,13.5vw,210px);letter-spacing:-.025em;transform:scaleX(.88)}@media(max-width:600px){.regular-finale{inset:25% 0 25%}.regular-finale .regular-line{font-size:13.5vw;transform:scaleX(.94)}}

/* V2: flat black ink hands against photographic café objects. */
@keyframes doodle-stamp{0%{scale:1.3;rotate:-25deg}65%{scale:.9;rotate:-5deg}100%{scale:1;rotate:-12deg}}.stamp.filled{animation:doodle-stamp .38s ease-out}.stamp.reward.ready{animation:free-invitation 1.4s ease-in-out infinite}

@keyframes free-soft-glow{0%,100%{box-shadow:inset 0 1px 0 #ffffffa0,0 0 12px 3px #fff9de40,0 0 27px 7px #fff5c51c}50%{box-shadow:inset 0 1px 0 #ffffffc0,0 0 18px 5px #fff9de70,0 0 36px 11px #fff5c533}}.stamp.reward.ready{border-color:#fffbedcc;background:linear-gradient(135deg,#ffffff68,#ffffff20);animation:free-invitation 1.4s ease-in-out infinite,free-soft-glow 1.8s ease-in-out infinite}.stamp.reward.filled{animation:none}@media(prefers-reduced-motion:reduce){.stamp.reward.ready{animation:none;box-shadow:inset 0 1px 0 #ffffffa0,0 0 16px 4px #fff9de60}}

nav[aria-label="Get TOBA"]{transform-origin:center;transition:transform .95s cubic-bezier(.5,0,.25,1),gap .95s ease}nav[aria-label="Get TOBA"].finale-cta{transform:translateY(clamp(-60px,-6vh,-28px)) scale(1.1);gap:18px}@media(max-width:600px){nav[aria-label="Get TOBA"].finale-cta{transform:translateY(-34px) scale(1.07);gap:12px}}@media(prefers-reduced-motion:reduce){nav[aria-label="Get TOBA"]{transition:none}}

/* iPhone composition: same objects, uniformly scaled and arranged vertically. */
html,body{width:100%;overflow-x:hidden}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}main{min-height:100svh;min-height:100dvh}#toast{z-index:5}nav button{min-height:46px;-webkit-backdrop-filter:blur(5px)}
@media(max-width:600px) and (orientation:portrait){
 main{height:100svh;height:100dvh;min-height:600px;background-size:cover}
 .logo{top:calc(22px + env(safe-area-inset-top,0px));left:24px;width:94px}
 .stamp-card{top:calc(88px + env(safe-area-inset-top,0px));width:calc(100% - 32px);min-width:0}
 .stamp{width:46px;height:46px}.stamp-card p{font-size:12px;margin-top:13px}
 .entrance{inset:20% 0 16%;height:auto;mask-image:none;-webkit-mask-image:none;overflow:hidden}
 .entrance svg{width:100%;height:100%;margin:0;max-width:100%}
 .table-plate{display:none}.phone-matcha{transform:translate(-240px,-100px)}.phone-coffee{transform:translate(-240px,-110px)}
 .dessert-layout{transform:translate(-800px,180px)}
 nav[aria-label="Get TOBA"]{bottom:calc(25px + env(safe-area-inset-bottom,0px));left:20px;right:20px;gap:10px;width:auto}
 nav button{font-size:12px;padding:15px 16px;flex:1;max-width:190px;white-space:nowrap}
 nav[aria-label="Get TOBA"].finale-cta{transform:translateY(-44px) scale(1.03);gap:10px}
 .regular-finale{inset:27% 0 24%}.regular-finale .regular-line{font-size:14.5vw;transform:scaleX(.94)}
 #toast{bottom:calc(90px + env(safe-area-inset-bottom,0px));font-size:12px}
}
@media(max-width:600px) and (max-height:740px) and (orientation:portrait){.stamp-card{top:74px}.entrance{inset:22% 0 16%}.logo{top:20px}.stamp{width:44px;height:44px}.stamp-card p{font-size:11px}}
@media(max-height:500px) and (orientation:landscape){main{height:100dvh;min-height:340px}.entrance{inset:0;height:100%;mask-image:none}.entrance svg{width:100%;height:100%;margin:0}.logo{top:18px;width:85px}.stamp-card{top:15px}.stamp{width:36px;height:36px}.stamp-card p{margin-top:7px;font-size:11px}nav[aria-label="Get TOBA"]{bottom:16px}.regular-finale .regular-line{font-size:13vw}nav[aria-label="Get TOBA"].finale-cta{transform:translateY(-12px) scale(1.05)}}
@media(hover:none){button:hover{transform:none}.stamp:not(:disabled):hover{transform:none}}

@media(max-width:600px) and (orientation:portrait){main{min-height:100svh;min-height:100dvh}}@media(max-height:500px) and (orientation:landscape){nav[aria-label="Get TOBA"]{left:5%;right:5%;width:auto}}

/* Keep serving arms continuous past the scene frame, under the glass buttons. */
.entrance,.entrance svg{overflow:visible}
nav[aria-label="Get TOBA"] button{border-radius:999px;border:1px solid #fff8df80;background:linear-gradient(180deg,#ffffff2e,#ffffff10);color:#fffaf0;box-shadow:inset 0 1px 0 #ffffff8a,inset 0 -1px 0 #ffffff12,0 3px 0 #18201e40,0 7px 16px #10181520;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);font-weight:500;transition:background .2s,transform .18s,box-shadow .18s}
nav[aria-label="Get TOBA"] button.download{background:linear-gradient(180deg,#ffffff42,#ffffff1b);border-color:#fff8dfaa;color:#fffaf0}
nav[aria-label="Get TOBA"] button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff60,0 1px 0 #18201e40,0 3px 8px #10181518}
@media(hover:hover){nav[aria-label="Get TOBA"] button:hover{background:linear-gradient(180deg,#ffffff50,#ffffff22);transform:translateY(-2px)}}
@media(max-width:600px) and (orientation:portrait){.entrance,.entrance svg{overflow:visible}nav[aria-label="Get TOBA"]{bottom:calc(18px + env(safe-area-inset-bottom,0px))}nav[aria-label="Get TOBA"] button{padding:15px 16px;min-height:48px}}

nav[aria-label="Get TOBA"] button.download{background:#fff;color:#26302b;border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 3px 0 #b9beb7,0 7px 16px #10181526}@media(hover:hover){nav[aria-label="Get TOBA"] button.download:hover{background:#f7f7f1;color:#26302b}}

nav[aria-label="Get TOBA"] button.download{background:#111;color:#fff;border-color:#222;box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 #000,0 7px 16px #10181530}@media(hover:hover){nav[aria-label="Get TOBA"] button.download:hover{background:#252525;color:#fff}}

nav[aria-label="Get TOBA"] button.download{background:#344326;color:#fff;border-color:#405231;box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 #202c18,0 7px 16px #18251330}@media(hover:hover){nav[aria-label="Get TOBA"] button.download:hover{background:#425533;color:#fff}}

/* Restore the original boxed controls. */
nav[aria-label="Get TOBA"] button{border-radius:2px;border:1px solid #f5f2e988;background:#20292b38;color:#f5f2e9;box-shadow:none;font-weight:400;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}nav[aria-label="Get TOBA"] button.download{background:#f5f2e9;color:#222b2b;border-color:#f5f2e9;box-shadow:none}@media(hover:hover){nav[aria-label="Get TOBA"] button:hover{background:#20292b80}nav[aria-label="Get TOBA"] button.download:hover{background:#fffdf7;color:#222b2b}}nav[aria-label="Get TOBA"] button:active{box-shadow:none;transform:translateY(1px)}