.lore-roast__grid{display:grid;gap:28px}.lore-roast__copy{display:grid;gap:18px;max-width:640px}.lore-roast__copy .lore-heading{text-wrap:balance}.lore-roast__copy em{font-style:normal;color:var(--accent)}.lore-roast__stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:18px 22px;border-radius:22px;background:var(--stat);color:var(--stat-text);font-size:15px;line-height:1.4}.lore-roast__stat b{font-family:var(--lore-font-display);font-size:clamp(44px,4.4vw,60px);font-weight:600;line-height:1;letter-spacing:-.03em}.lore-roast__stat small{display:block;margin-top:4px;font-size:13px;opacity:.78}@media only screen and (max-width:767px){.lore-roast__stat--desktop{display:none}}.lore-roast__card{display:block;max-width:640px;padding:20px 18px 10px;border:1px solid var(--lore-line);border-radius:24px;background:var(--card)}.lore-roast__lanes{display:grid;grid-template-columns:64px 28px 96px 28px 64px;justify-content:space-between;align-items:center;row-gap:12px;transition:opacity .35s ease}.lore-roast__lane{display:contents}.lore-roast__label,.lore-roast__result,.lore-roast__rule{grid-column:1 / -1}.lore-roast__rule{height:1px;margin:6px 0;background:var(--lore-line)}.lore-roast__label{display:flex;align-items:baseline;gap:8px}.lore-roast__label strong{font:600 20px/1.15 var(--lore-font-display);letter-spacing:-.01em}.lore-roast__label span{font-size:14px;color:var(--text-muted)}.lore-roast__result{display:grid;gap:2px;font-size:15px;line-height:1.35}.lore-roast__result span{color:var(--text-muted)}.lore-roast__bean{width:64px;height:67px;overflow:visible}.lore-roast__shell{fill:#efdfcd;stroke:var(--lore-cacao);stroke-width:1.6;transition:fill .6s ease}.lore-roast__seam{fill:none;stroke:var(--lore-cacao);stroke-width:1.4;stroke-linecap:round;opacity:.55}.lore-roast__dots circle{fill:var(--accent);transform-box:fill-box;transform-origin:center}.lore-roast__crack{fill:none;stroke:var(--lore-cacao);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:0}.lore-roast__glow{fill:none;stroke:var(--lore-peri);stroke-width:3}.lore-roast__arrow{width:28px;height:19px;overflow:visible;color:color-mix(in srgb,var(--text) 40%,transparent)}.lore-roast__arrow path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0}.lore-roast__step{display:grid;justify-items:center;gap:6px;font-size:13px;line-height:1.2;text-align:center}.lore-roast__step b{font-weight:600}.lore-roast__step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%}.lore-roast__step-icon svg{width:24px;height:24px;transform-origin:50% 80%}.lore-roast__lane--roasted .lore-roast__step-icon{background:#fbdcc9;color:#b5482a}.lore-roast__lane--raw .lore-roast__step-icon{background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--accent)}.lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__shell{fill:#8a5a3c}.lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__dots circle{fill:#a9764f;opacity:var(--fo);transform:translate(var(--dx),var(--fy)) scale(var(--fs)) rotate(25deg)}.is-armed .lore-roast__arrow path{stroke-dashoffset:40}.is-armed .lore-roast__step-icon,.is-armed .lore-roast__step b{opacity:0;transform:scale(.6)}.is-armed .lore-roast__result{opacity:0;transform:translateY(6px)}.is-armed .lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__shell{fill:#efdfcd}.is-armed .lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__dots circle{fill:var(--accent);opacity:1;transform:none}.is-armed .lore-roast__crack{stroke-dashoffset:30}.is-armed .lore-roast__glow{opacity:0}.is-playing .lore-roast__arrow path{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}.is-playing .lore-roast__arrow--out path{transition-delay:1.05s}.is-playing .lore-roast__step-icon,.is-playing .lore-roast__step b{opacity:1;transform:none;transition:opacity .35s ease .45s,transform .45s cubic-bezier(.3,1.6,.5,1) .45s}.is-playing .lore-roast__lane--roasted .lore-roast__step-icon svg{animation:lore-roast-flicker .3s ease-in-out .8s 3 alternate}.is-playing .lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__shell{fill:#8a5a3c;transition:fill .7s ease 1.35s}.is-playing .lore-roast__lane--roasted .lore-roast__bean--out .lore-roast__dots circle{fill:#a9764f;opacity:var(--fo);transform:translate(var(--dx),var(--fy)) scale(var(--fs)) rotate(25deg);transition:opacity .55s ease,transform .7s cubic-bezier(.5,0,.75,0),fill .4s ease;transition-delay:calc(1.45s + var(--d))}.is-playing .lore-roast__crack{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease 1.5s}.is-playing .lore-roast__glow{opacity:1;transition:opacity .6s ease 1.5s}.is-playing .lore-roast__lane--raw .lore-roast__bean--out .lore-roast__dots circle{animation:lore-roast-hold .7s ease 1.5s}.is-playing .lore-roast__result{opacity:1;transform:none;transition:opacity .4s ease 2s,transform .4s ease 2s}.is-resetting .lore-roast__lanes{opacity:0}@keyframes lore-roast-flicker{to{transform:scale(1.12,.9)}}@keyframes lore-roast-hold{50%{transform:scale(1.25)}}.lore-roast__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:6px}.lore-roast__foot .lore-fine{font-size:13px}.lore-roast__toggle{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--lore-line);border-radius:50%;background:none;color:var(--text);cursor:pointer}.lore-roast__toggle svg{width:16px;height:16px;fill:currentColor}.lore-roast__toggle[aria-pressed=true] .lore-roast__pause,.lore-roast__toggle[aria-pressed=false] .lore-roast__play{display:none}@media only screen and (min-width:768px){.lore-roast__grid{justify-items:center}.lore-roast__card{padding:32px 36px 16px;border-radius:var(--lore-radius)}.lore-roast__lanes{grid-template-columns:88px 44px 128px 44px 88px;row-gap:16px}.lore-roast__rule{margin:8px 0}.lore-roast__bean{width:88px;height:92px}.lore-roast__arrow{width:44px;height:24px}.lore-roast__step{gap:8px;font-size:14px}.lore-roast__step-icon{width:56px;height:56px}.lore-roast__step-icon svg{width:26px;height:26px}.lore-roast__label strong{font-size:22px}.lore-roast__result{display:flex;flex-wrap:wrap;gap:0 8px;font-size:17px}.lore-roast__result span{font-size:16px}}@media only screen and (min-width:1024px){.lore-roast__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);justify-items:stretch;align-items:center;gap:clamp(48px,6vw,96px)}.lore-roast__card{max-width:none}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/lore-roast.css.map */