.hy-how{--hy-how-20: 20px;--hy-how-media-min: 360px;--hy-how-play: 72px;--hy-how-icon-box: 44px;background:rgb(var(--color-background));color:rgb(var(--color-foreground));padding-block-start:var(--hy-how-pad-top, var(--hy-9));padding-block-end:var(--hy-how-pad-bottom, var(--hy-9))}.hy-how__head{display:flex;flex-direction:column;margin-block-end:var(--hy-6)}.hy-how__heading{color:rgb(var(--color-foreground))}.hy-how__rule{display:block}.hy-how__sub{margin:var(--hy-3) 0 0;font-size:var(--hy-body);line-height:1.5;color:var(--hy-text-2);max-inline-size:560px}.hy-how__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--hy-7);align-items:stretch}.hy-how__grid--single{grid-template-columns:minmax(0,1fr)}.hy-how__media{position:relative;display:block;min-block-size:var(--hy-how-media-min);min-inline-size:0;overflow:hidden;background:var(--hy-dark-surface)}.hy-how__poster{position:absolute;top:0;right:0;bottom:0;left:0;display:block;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;background:transparent;color:var(--hy-on-dark);font-family:var(--hy-font);font-size:var(--hy-body);text-align:start;overflow:hidden;cursor:pointer}.hy-how__poster--static{cursor:default}.hy-how__img{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 62%;transition:transform var(--hy-t-hover) var(--hy-ease)}.hy-how__poster:hover .hy-how__img,.hy-how__poster:focus-visible .hy-how__img{transform:scale(1.03)}.hy-how__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#0808088c,#08080800 45%);pointer-events:none}.hy-how__play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.hy-how__play-circle{inline-size:var(--hy-how-play);block-size:var(--hy-how-play);box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid var(--hy-white);border-radius:50%;background:#11111159;transition:transform var(--hy-t-hover) var(--hy-ease)}.hy-how__poster:hover .hy-how__play-circle,.hy-how__poster:focus-visible .hy-how__play-circle{transform:scale(1.06)}.hy-how__play-tri{inline-size:0;block-size:0;border-block:12px solid transparent;border-inline-start:18px solid var(--hy-white);margin-inline-start:var(--hy-1)}.hy-how__tag{position:absolute;inset-block-start:var(--hy-4);inset-inline-start:var(--hy-4)}.hy-how__cap{position:absolute;inset-inline:0;inset-block-end:0;display:flex;align-items:baseline;justify-content:space-between;gap:var(--hy-4);padding:var(--hy-how-20);color:var(--hy-on-dark);pointer-events:none}.hy-how__media-title{min-inline-size:0;font-size:var(--hy-card-title);font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}.hy-how__time{flex:none;font-family:var(--hy-font-mono);font-size:var(--hy-mono);font-variant-numeric:tabular-nums;color:var(--hy-on-dark-body)}.hy-how__media video,.hy-how__media iframe{position:absolute;top:0;right:0;bottom:0;left:0;display:block;inline-size:100%;block-size:100%;border:0;object-fit:cover;background:var(--hy-dark-surface)}.hy-how__media:not([loaded]) template{z-index:-1}.hy-how__media[loaded] .hy-how__poster{display:none}.hy-how__col{display:flex;flex-direction:column;justify-content:space-between;gap:var(--hy-5);min-inline-size:0}.hy-how__steps{display:flex;flex-direction:column;gap:var(--hy-how-20);margin:0;padding:0;list-style:none}.hy-how__step{display:flex;flex-direction:column;gap:var(--hy-2);border-block-start:var(--hy-line-strong);padding-block-start:var(--hy-4);min-inline-size:0}.hy-how__num{font-family:var(--hy-font-mono);font-size:var(--hy-label);font-variant-numeric:tabular-nums;color:var(--hy-text-3)}.hy-how__step-title{font-size:var(--hy-card-title);font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;margin:0;color:rgb(var(--color-foreground))}.hy-how__step-text{font-size:var(--hy-small);line-height:1.5;font-variant-numeric:tabular-nums;color:var(--hy-text-2);margin:0}.hy-how__guide{display:flex;align-items:flex-start;gap:var(--hy-4);padding:var(--hy-how-20);background:var(--hy-bone);border:var(--hy-line)}.hy-how__guide-icon{inline-size:var(--hy-how-icon-box);block-size:var(--hy-how-icon-box);flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hy-ink);color:var(--hy-ink)}.hy-how__guide-icon svg{inline-size:22px;block-size:22px;flex:none}.hy-how__guide-body{display:flex;flex-direction:column;gap:var(--hy-1);min-inline-size:0}.hy-how__guide-title{font-size:var(--hy-body);font-weight:800;line-height:1.3;margin:0;color:var(--hy-ink)}.hy-how__guide-text>*{font-size:var(--hy-small);line-height:1.5;color:var(--hy-text-2);margin:0}.hy-how__guide-text>*+*{margin-block-start:var(--hy-2)}.hy-how__poster:focus-visible{outline:2px solid var(--hy-red);outline-offset:-2px}@media screen and (max-width:749px){.hy-how{--hy-how-play: 56px;padding-block-start:min(var(--hy-how-pad-top, var(--hy-9)),56px);padding-block-end:min(var(--hy-how-pad-bottom, var(--hy-9)),56px)}.hy-how__head{margin-block-end:var(--hy-how-20)}.hy-how__grid{grid-template-columns:minmax(0,1fr);gap:var(--hy-5)}.hy-how__media{min-block-size:auto;aspect-ratio:16 / 10}.hy-how__scrim{background:linear-gradient(0deg,#08080899,#08080800 50%)}.hy-how__play-tri{border-block-width:9px;border-inline-start-width:14px;margin-inline-start:3px}.hy-how__tag{inset-block-start:var(--hy-3);inset-inline-start:var(--hy-3)}.hy-how__cap{padding:14px;gap:var(--hy-3)}.hy-how__media-title{font-size:15px}.hy-how__step{padding-block-start:14px;gap:6px}.hy-how__step-title{font-size:18px}.hy-how__step-text{font-size:var(--hy-body)}.hy-how__guide{padding:var(--hy-4);gap:var(--hy-3)}.hy-how__guide-text>*{font-size:15px}}@media(prefers-reduced-motion:reduce){.hy-how__img,.hy-how__play-circle{transition:none}.hy-how__poster:hover .hy-how__img,.hy-how__poster:focus-visible .hy-how__img,.hy-how__poster:hover .hy-how__play-circle,.hy-how__poster:focus-visible .hy-how__play-circle{transform:none}}.hy-how__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.hy-how__backdrop-img{position:absolute;top:-24px;right:-24px;bottom:-24px;left:-24px;inline-size:calc(100% + 48px);block-size:calc(100% + 48px);object-fit:cover;filter:blur(22px) brightness(.55) saturate(1.1)}.hy-how__media--vertical .hy-how__img{object-position:50% 35%}.hy-how__media--vertical video{object-fit:contain;background:transparent}@media screen and (max-width:749px){.hy-how__media--vertical{aspect-ratio:4 / 5}}.hy-how__step-head{display:flex;align-items:center;gap:var(--hy-3)}.hy-how__icon{display:inline-grid;place-items:center;inline-size:52px;block-size:52px;flex:none;border-radius:50%;background:#dd1d1d12;color:var(--hy-red)}.hy-how__icon svg{inline-size:34px;block-size:34px;overflow:visible}.hy-how__icon *{animation-play-state:paused}.hy-how__step.hybrid-revealed .hy-how__icon *,.hy-how__step:not([data-reveal]) .hy-how__icon *{animation-play-state:running}.hy-ic-scoop{transform-box:fill-box;transform-origin:100% 50%;animation:hy-ic-tilt 2.4s var(--hy-ease) infinite}.hy-ic-grain{opacity:0;animation:hy-ic-fall 2.4s ease-in infinite}.hy-ic-grain--2{animation-delay:.12s}.hy-ic-grain--3{animation-delay:.24s}@keyframes hy-ic-tilt{0%,15%{transform:rotate(0)}40%,65%{transform:rotate(-28deg)}90%,to{transform:rotate(0)}}@keyframes hy-ic-fall{0%,38%{opacity:0;transform:translateY(0)}45%{opacity:1}70%{opacity:1;transform:translateY(10px)}78%,to{opacity:0;transform:translateY(12px)}}.hy-ic-level{animation:hy-ic-rise 3.2s var(--hy-ease) infinite}.hy-ic-wave{animation:hy-ic-wave 1.6s linear infinite}@keyframes hy-ic-rise{0%{transform:translateY(16px)}55%,80%{transform:translateY(-4px)}to{transform:translateY(16px)}}@keyframes hy-ic-wave{0%{transform:translate(0)}to{transform:translate(-16px)}}.hy-ic-bottle{transform-box:fill-box;transform-origin:50% 50%;animation:hy-ic-shake 1.8s var(--hy-ease) infinite}.hy-ic-motion{opacity:0;animation:hy-ic-motion 1.8s var(--hy-ease) infinite}@keyframes hy-ic-shake{0%,50%,to{transform:rotate(0) translateY(0)}10%{transform:rotate(-14deg) translateY(-2px)}20%{transform:rotate(12deg) translateY(1px)}30%{transform:rotate(-10deg) translateY(-1px)}40%{transform:rotate(6deg)}}@keyframes hy-ic-motion{0%,50%,to{opacity:0}10%,35%{opacity:1}}.hy-ic-hand{transform-box:view-box;transform-origin:24px 26px;animation:hy-ic-spin 4s linear infinite}@keyframes hy-ic-spin{to{transform:rotate(360deg)}}.hy-ic-check{stroke-dasharray:1;stroke-dashoffset:1;animation:hy-ic-draw 2.6s var(--hy-ease) infinite}@keyframes hy-ic-draw{0%,15%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}to{stroke-dashoffset:1}}@media(prefers-reduced-motion:reduce){.hy-how__icon *{animation:none!important}.hy-ic-check{stroke-dashoffset:0}.hy-ic-grain{opacity:0}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/hybrid-how-to.css.map */