@layer components{.mk .lp-cafe{--lp-cream:#fbf4e6;--lp-coffee:#6c4128}@supports (color:lab(0% 0 0)){.mk .lp-cafe{--lp-cream:lab(96.5967% .633419 7.66813);--lp-coffee:lab(32.3297% 17.0402 22.9708)}}.dark .mk .lp-cafe{--lp-cream:#ede3d2;--lp-coffee:#5c3824}@supports (color:lab(0% 0 0)){.dark .mk .lp-cafe{--lp-cream:lab(90.7848% 1.57276 9.51754);--lp-coffee:lab(27.7502% 14.5276 19.5119)}}.mk .lp-badge{background:var(--mk-accent-soft);color:var(--mk-accent);border-radius:999px;padding:6px 14px;font-size:.875rem;font-weight:600;display:inline-flex}.mk .lp-cupart{aspect-ratio:1;place-items:center;width:100%;max-width:440px;margin-inline:auto;display:grid;position:relative}.mk .lp-halo{background:radial-gradient(closest-side, var(--mk-accent-soft), transparent);border-radius:50%;position:absolute;inset:8%}.mk .lp-cup{aspect-ratio:1.25;width:56%;position:relative;translate:-6% 8%}.mk .lp-body{background-image:linear-gradient(90deg, #00000014, transparent 30%, transparent 65%, #0000001f), linear-gradient(var(--lp-cream), var(--lp-cream));box-shadow:var(--mk-shadow-md);border-radius:0 0 48% 48%/0 0 62% 62%;position:absolute;inset:18% 0 0}@supports (color:lab(0% 0 0)){.mk .lp-body{background-image:linear-gradient(90deg, lab(0% 0 0/.08), transparent 30%, transparent 65%, lab(0% 0 0/.12)), linear-gradient(var(--lp-cream), var(--lp-cream))}}.mk .lp-rim{background:var(--lp-cream);border-radius:50%;height:36%;padding:5%;position:absolute;inset:0 0 auto;box-shadow:inset 0 -3px #0000000f;box-shadow:inset 0 -3px lab(0% 0 0/.06)}.mk .lp-latte{background:radial-gradient(closest-side, #a67c5b, var(--lp-coffee));width:100%;height:100%;color:var(--lp-cream);animation:lp-fill calc(6s / max(var(--mk-motion), .01)) var(--mk-ease-out) infinite;border-radius:50%;place-items:center;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1;display:grid}@supports (color:lab(0% 0 0)){.mk .lp-latte{background:radial-gradient(closest-side, lab(55.7056% 13.4169 24.8958), var(--lp-coffee))}}.mk .lp-latte span{animation:lp-heart calc(6s / max(var(--mk-motion), .01)) ease infinite;scale:1 .55}.mk .lp-handle{border:9px solid var(--lp-cream);width:34%;height:42%;box-shadow:var(--mk-shadow-sm);border-radius:50%;position:absolute;top:32%;right:-20%}.mk .lp-saucer{background:var(--lp-cream);height:26%;box-shadow:var(--mk-shadow-md), inset 0 -6px 0 #00000012;border-radius:50%;position:absolute;inset:auto -22% -12%}@supports (color:lab(0% 0 0)){.mk .lp-saucer{box-shadow:var(--mk-shadow-md), inset 0 -6px 0 lab(0% 0 0/.07)}}.mk .lp-steam{bottom:90%;left:calc(30% + var(--i) * 18%);background:linear-gradient(to top, color-mix(in oklch, var(--mk-ink) 22%, transparent), transparent);filter:blur(8px);opacity:0;width:12%;height:70%;animation:lp-steam calc(3.6s / max(var(--mk-motion), .01)) ease-out infinite;animation-delay:calc(var(--i) * 1.1s);border-radius:50%;position:absolute}.mk .lp-bean{background:var(--lp-coffee);width:26px;height:34px;top:calc(12% + var(--i) * 20%);rotate:calc(var(--i) * 50deg - 30deg);animation:lp-float calc(5s / max(var(--mk-motion), .01)) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.3s);border-radius:50%;position:absolute;left:8%}.mk .lp-bean:nth-of-type(odd){left:auto;right:8%}.mk .lp-bean:after{content:"";background:#0000004d;background:lab(0% 0 0/.3);border-radius:4px;position:absolute;inset:15% 46%}.mk .lp-tag{background:var(--mk-surface);letter-spacing:.04em;box-shadow:var(--mk-shadow-md);animation:lp-float calc(4.5s / max(var(--mk-motion), .01)) ease-in-out infinite alternate;border-radius:12px;padding:8px 14px;font-size:.8125rem;font-weight:700;position:absolute}.mk .lp-tag-a{top:16%;right:2%}.mk .lp-tag-b{animation-delay:-2s;bottom:14%;left:0}.mk .lp-plate{rotate:var(--tilt,0deg);transition:rotate var(--mk-dur-hero) var(--mk-ease-out)}.mk .lp-plate:hover{rotate:none}.mk .lp-plate>*{box-shadow:var(--mk-shadow-md)}.mk .lp-no{color:var(--mk-accent);font-family:var(--mk-font-mono);align-items:center;gap:12px;font-size:.875rem;font-weight:600;display:flex}.mk .lp-no i{border-bottom:2px dotted var(--mk-accent-line);flex:1}.mk .lp-chip{background:var(--mk-accent-soft);border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:.9375rem;display:inline-flex}.mk .lp-chip:before{content:"";background:var(--mk-accent);border-radius:50%;width:6px;height:6px}.mk .lp-big{color:#0000;-webkit-text-stroke:1.5px var(--mk-accent);font-size:clamp(3rem,2.4rem + 2vw,4.5rem);font-weight:800;line-height:1;display:block}.mk .lp-dots{background-image:radial-gradient(color-mix(in oklch, var(--mk-accent) 22%, transparent) 1.2px, transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000 70%,#0000);mask-image:linear-gradient(#000 70%,#0000)}.mk .lp-scan{padding:18px;position:relative}.mk .lp-beam{inset-inline:10%;background:var(--mk-accent);height:3px;box-shadow:0 0 18px 4px color-mix(in oklch, var(--mk-accent) 55%, transparent);animation:lp-sweep calc(2.8s / max(var(--mk-motion), .01)) var(--mk-ease-inout) infinite alternate;border-radius:3px;position:absolute;top:12%}.mk .lp-corner{border:0 solid var(--mk-accent);width:44px;height:44px;animation:lp-lock calc(2.8s / max(var(--mk-motion), .01)) ease-in-out infinite alternate;position:absolute}.mk .lp-tl{border-width:4px 0 0 4px;border-top-left-radius:18px;top:0;left:0}.mk .lp-tr{border-width:4px 4px 0 0;border-top-right-radius:18px;top:0;right:0}.mk .lp-bl{border-width:0 0 4px 4px;border-bottom-left-radius:18px;bottom:0;left:0}.mk .lp-br{border-width:0 4px 4px 0;border-bottom-right-radius:18px;bottom:0;right:0}.mk .lp-track{text-align:center;gap:24px;display:grid;position:relative}@media (min-width:768px){.mk .lp-track{grid-template-columns:repeat(var(--n), minmax(0, 1fr))}.mk .lp-track:before,.mk .lp-track:after{content:"";top:22px;left:calc(50% / var(--n));right:calc(50% / var(--n));background:var(--mk-accent-line);height:2px;position:absolute}.mk .lp-track:after{background:var(--mk-accent);width:14px;height:14px;box-shadow:0 0 0 6px color-mix(in oklch, var(--mk-accent) 20%, transparent);animation:lp-run calc(5s / max(var(--mk-motion), .01)) var(--mk-ease-inout) infinite;border-radius:50%;top:16px;right:auto}}.mk .lp-track li{z-index:1;justify-items:center;gap:12px;display:grid;position:relative}.mk .lp-stop{border:2px solid var(--mk-accent);background:var(--mk-surface);width:46px;height:46px;color:var(--mk-accent);font-family:var(--mk-font-mono);border-radius:14px;place-items:center;font-weight:700;display:grid}.mk .lp-card{border:1px solid var(--mk-line);background:var(--mk-surface);transition:translate var(--mk-dur-ui) var(--mk-ease-out), border-color var(--mk-dur-ui);border-radius:28px;padding:8px}.mk .lp-card:hover{border-color:var(--mk-accent-line);translate:0 -4px}@media (min-width:1024px){.mk .lp-card:first-child{grid-column:1/-1;grid-template-columns:1.1fr 1fr;align-items:center;display:grid}}@keyframes lp-fill{0%{filter:brightness(.6);scale:.35}45%,to{filter:none;scale:1}}@keyframes lp-heart{0%,45%{opacity:0;scale:.4 .2}60%,92%{opacity:1;scale:1 .55}to{opacity:0;scale:1 .55}}@keyframes lp-steam{0%{opacity:0;translate:0 20%;scale:.8 1}30%{opacity:1}to{opacity:0;translate:10% -40%;scale:1.4 1.2}}@keyframes lp-float{to{translate:0 -12px}}@keyframes lp-sweep{to{top:86%}}@keyframes lp-lock{to{scale:.94}}@keyframes lp-run{0%{left:calc(50% / var(--n) - 7px);opacity:0}10%{opacity:1}85%{left:calc(100% - 50% / var(--n) - 7px);opacity:1}to{left:calc(100% - 50% / var(--n) - 7px);opacity:0}}@media (prefers-reduced-motion:reduce){.mk :is(.lp-latte,.lp-latte span,.lp-steam,.lp-bean,.lp-tag,.lp-beam,.lp-corner),.mk .lp-track:after{animation:none}}.mk[data-motion=reduce] :is(.lp-latte,.lp-latte span,.lp-steam,.lp-bean,.lp-tag,.lp-beam,.lp-corner),.mk[data-motion=reduce] .lp-track:after{animation:none}}