:root{--cream:#fdfbf7;--pink:#ffd1dc;--peach:#ffe5d9;--mint:#d1f2e5;--lavender:#e8e5f8;--sky:#e3f2fd;--cocoa:#5c4033;--screen-bg:#ebf9eb;--screen-deep:#c7efc7;--white:#fff;--yellow:#fdd835;--shadow-soft:0 10px 30px -10px #5c403333;--shadow-cute:0 8px 0 -2px #ffd1dc99, 0 18px 40px -12px #5c403340;--shadow-button:0 5px 0 0 #5c40332e;--shadow-screen:inset 0 6px 18px #5c403326, inset 0 -2px 0 #5c403314;--font-display:"Fredoka", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;--font-bubble:"Baloo 2", system-ui, sans-serif}*{box-sizing:border-box;border-color:#5c40331a;margin:0;padding:0}body{background:radial-gradient(circle at 15% 10%, #ffd1dc59, transparent 55%), radial-gradient(circle at 85% 20%, #e3f2fd66, transparent 55%), radial-gradient(circle at 50% 95%, #e8e5f866, transparent 60%), linear-gradient(180deg, var(--cream), #f4eee1);color:var(--cocoa);font-family:var(--font-body);background-attachment:fixed;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;color:var(--cocoa)}.clouds-layer{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.cloud-shape{background:var(--white);filter:drop-shadow(0 10px 14px #e3f2fdcc);opacity:.85;border-radius:999px}@keyframes mm-float-cloud{0%{transform:translate(-20vw)}to{transform:translate(120vw)}}.sparkles-layer{pointer-events:none;z-index:0;position:absolute;inset:0}@keyframes mm-sparkle{0%,to{opacity:0;transform:scale(.4)rotate(0)}50%{opacity:1;transform:scale(1)rotate(180deg)}}.header-container{z-index:10;max-w:1100px;justify-content:space-between;align-items:center;margin:0 auto;padding:20px;display:flex;position:relative}.header-title-box{align-items:center;gap:12px;display:flex}.header-icon-badge{background:var(--white);box-shadow:var(--shadow-soft);border:2px solid #ffd1dc99;border-radius:20px;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.header-texts h1{font-size:24px;font-weight:700;line-height:1.2}.header-texts p{color:#88746a;font-size:12px}.waving-mascot-box{margin-left:4px;position:relative}@keyframes mm-bounce-soft{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes mm-wave{0%,to{transform:rotate(-8deg)}50%{transform:rotate(18deg)}}.main-wrapper{z-index:10;grid-template-columns:1fr;gap:30px;max-width:1100px;margin:20px auto 80px;padding:0 20px;display:grid;position:relative}@media (width>=1024px){.main-wrapper{grid-template-columns:1.05fr 1fr}}.cafe-card{background:var(--white);box-shadow:var(--shadow-soft);border:2px solid #ffd1dc66;border-radius:32px;padding:24px;position:relative}.shelf-lights-container{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.shelf-lights{gap:8px;display:flex}.light-bulb{border-radius:50%;width:12px;height:12px;animation:2.6s ease-in-out infinite mm-bounce-soft;display:inline-block;box-shadow:0 0 12px}.screen-wrapper{background:linear-gradient(180deg, #69a78ff2, var(--screen-deep));box-shadow:var(--shadow-screen);aspect-ratio:5/4;border:3px dashed #5c40332e;border-radius:32px;flex-direction:column;justify-content:space-between;width:100%;max-width:400px;margin:0 auto;padding:20px;display:flex;position:relative}.bubble-positioner{z-index:10;position:absolute;top:16px;left:24px}.speech-bubble{background:var(--white);font-family:var(--font-bubble);color:var(--cocoa);border:2px solid #5c403326;border-radius:20px;padding:10px 16px;font-size:14px;font-weight:700;position:relative;box-shadow:0 4px #ffd1dc66}.speech-bubble:after{content:"";background:var(--white);border-bottom:2px solid #5c403326;border-right:2px solid #5c403326;width:16px;height:16px;position:absolute;bottom:-10px;left:28px;transform:rotate(45deg)}.steam-container{pointer-events:none;position:absolute;bottom:64px;left:24px}.steam-puff{background:#5a4866cc;border-radius:50%;width:12px;height:12px;animation:3s ease-out infinite mm-steam;display:block;position:absolute}@keyframes mm-steam{0%{opacity:0;transform:translateY(0)scaleX(1)}30%{opacity:.7}to{opacity:0;transform:translateY(-40px)scaleX(1.6)}}.mascot-area{justify-content:center;align-items:flex-end;height:100%;padding-bottom:40px;display:flex}.pixel-cat-container{animation:3s ease-in-out infinite mm-breathe;position:relative}.cat-tail{transform-origin:0 100%;font-size:30px;animation:1.8s ease-in-out infinite mm-wiggle;position:absolute;bottom:12px;right:-24px}.cat-head{background:#fff0eb;border:4px solid #5c403340;border-radius:28%;justify-content:center;align-items:center;width:112px;height:112px;display:flex;position:relative;box-shadow:inset 0 -8px #5c403314}.cat-ear-left{border-bottom:18px solid #fff0eb;border-left:12px solid #0000;border-right:12px solid #0000;width:0;height:0;position:absolute;top:-12px;left:8px;transform:rotate(-18deg)}.cat-ear-right{border-bottom:18px solid #fff0eb;border-left:12px solid #0000;border-right:12px solid #0000;width:0;height:0;position:absolute;top:-12px;right:8px;transform:rotate(18deg)}.cat-face-features{flex-direction:column;align-items:center;gap:4px;display:flex}.cat-eyes{gap:12px;display:flex}.cat-eye{background:var(--cocoa);border-radius:50%;width:12px;height:12px;animation:4s ease-in-out infinite mm-blink;display:block}.cat-mouth{color:var(--cocoa);font-size:16px;font-weight:700;line-height:1}.cat-blush-left{background:#ffd1dcd9;border-radius:50%;width:12px;height:8px;position:absolute;top:56px;left:8px}.cat-blush-right{background:#ffd1dcd9;border-radius:50%;width:12px;height:8px;position:absolute;top:56px;right:8px}.cat-collar{background:#ffb8c6;border-radius:99px;width:40px;height:12px;margin:-8px auto 0}@keyframes mm-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes mm-wiggle{0%,to{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}@keyframes mm-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.05)}}.screen-display-panel{text-align:right;font-family:var(--font-display);color:var(--cocoa);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#928c8cb3;border-radius:16px;padding:8px 16px;font-size:28px;font-weight:700;position:absolute;bottom:16px;left:20px;right:20px;box-shadow:inset 0 2px 4px #0000000d}.caption-under-screen{text-align:center;color:#88746a;margin-top:16px;font-size:14px}.order-panel-title{margin-bottom:16px;font-size:20px;font-weight:700}.button-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.span-2{grid-column:span 2}.cafe-button{font-family:var(--font-display);background:var(--white);color:var(--cocoa);box-shadow:var(--shadow-button);-webkit-user-select:none;user-select:none;cursor:pointer;border:2px solid #5c40331f;border-radius:20px;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:14px 10px;font-size:18px;font-weight:600;transition:transform .12s,box-shadow .12s,background .2s;display:flex}.cafe-button:hover{transform:translateY(-2px)scale(1.03)}.cafe-button:active{transform:translateY(3px)scale(.98);box-shadow:0 1px #5c40332e}.op-berry{background:#f1e7fa}.op-cupcake{background:#ffe3eb}.op-matcha{background:#e1f7eb}.op-latte{background:#fff0eb}.op-text{opacity:.7;font-size:10px;font-weight:700}.serve-btn{color:var(--cocoa);background:linear-gradient(#ffb8c6,#ffd8c7)}.btn-large-serve{width:100%;margin-top:16px;padding:16px 10px;font-size:18px}.receipt-paper{background:repeating-linear-gradient(180deg, var(--white) 0, var(--white) 28px, #fcfaf5 28px, #fcfaf5 29px);color:var(--cocoa);box-shadow:var(--shadow-soft);border:1px solid #5c40331a;border-radius:12px;margin-top:24px;padding:16px 20px;font-family:Courier New,monospace;font-size:14px;animation:.5s cubic-bezier(.2,.9,.3,1.2) mm-receipt-up;position:relative}@keyframes mm-receipt-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.dashed-line{border-top:1px dashed #5c40334d;margin:8px 0}.flex-between{justify-content:space-between;display:flex}.font-bold{font-weight:700}.floating-heart{pointer-events:none;z-index:9999;color:#ffb8c6;font-size:24px;animation:.8s ease-out forwards mm-heart-float;position:fixed;transform:translate(-50%,-50%)}@keyframes mm-heart-float{0%{opacity:1;transform:translate(-50%,-50%)scale(.6)}to{opacity:0;transform:translate(calc(-50% + var(--target-x)), -100px) scale(1.4)}}.cat-happy-dance{animation:.5s ease-in-out 2 mm-happy-dance}@keyframes mm-happy-dance{0%,to{transform:translateY(0)scale(1)}30%{transform:translateY(-16px)scaleY(1.08)scaleX(.92)}50%{transform:translateY(0)scale(1)}75%{transform:scaleY(.92)scaleX(1.08)}}