.device-mockup{position:relative;display:grid;width:100%}.device{position:relative;overflow:hidden;background:var(--color-surface);box-shadow:0 1px rgba(var(--color-fg-rgb),.04),0 40px 80px -40px #00000059,0 0 0 1px rgba(var(--color-fg-rgb),.08)}.device--browser{border-radius:calc(var(--radius-media) * .6)}.device__bar{display:flex;align-items:center;gap:1rem;height:36px;padding-inline:14px;border-bottom:1px solid rgba(var(--color-fg-rgb),.08);background:color-mix(in srgb,var(--color-surface) 92%,var(--color-fg))}.device__dots{display:inline-flex;gap:6px}.device__dots i{width:9px;height:9px;border-radius:50%;background:rgba(var(--color-fg-rgb),.16)}.device__url{flex:1;max-width:320px;margin-inline:auto;padding:4px 12px;border-radius:999px;background:rgba(var(--color-fg-rgb),.06);font-size:11px;text-align:center;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translate(-24px)}.device__screen{position:relative;overflow:hidden;container-type:size}.device--browser .device__screen{aspect-ratio:16 / 10}.device--phone{border-radius:38px;padding:9px;background:#111}.device--phone .device__screen{aspect-ratio:9 / 19.5;border-radius:30px;background:var(--color-surface)}.device__notch{position:absolute;z-index:2;top:17px;left:50%;width:30%;height:20px;border-radius:999px;background:#111;transform:translate(-50%)}.device__shot{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center}@keyframes device-scroll{0%,12%{transform:translateY(0)}88%,to{transform:translateY(calc(-100% + 100cqh))}}@media(prefers-reduced-motion:no-preference){.device-mockup--scroll-auto .device__shot{animation:device-scroll var(--scroll-duration, 18s) var(--ease-in-out) infinite alternate}.device-mockup--scroll-auto .device--phone .device__shot{animation-delay:-4s}.device-mockup--scroll-hover .device__shot{transition:transform var(--scroll-duration, 18s) var(--ease-in-out)}.device-mockup--scroll-hover:hover .device__shot{transform:translateY(calc(-100% + 100cqh));transition-duration:calc(var(--scroll-duration, 18s) * .6)}}.device-mockup--both{padding-right:8%;padding-bottom:6%}.device-mockup--both .device--phone{position:absolute;right:0;bottom:0;width:24%;min-width:96px}.device-mockup--mobile{justify-items:center}.device-mockup--mobile .device--phone{width:min(100%,320px)}.device-skeleton{--ds-ink: rgba(var(--color-fg-rgb), .14);--ds-soft: rgba(var(--color-fg-rgb), .06);display:grid;gap:5cqw;padding:3cqw 4cqw 6cqw;background:var(--color-surface)}.device-skeleton i{display:block}.ds-nav{display:flex;align-items:center;justify-content:space-between;gap:3cqw}.ds-nav span{display:flex;gap:2.5cqw}.ds-nav span i,.ds-line{height:1.3cqw;min-height:3px;width:9cqw;border-radius:99px;background:var(--ds-ink)}.ds-logo{width:12cqw;height:2.4cqw;border-radius:99px;background:var(--color-fg)}.ds-cart{width:3cqw;height:3cqw;border-radius:50%;background:var(--ds-ink)}.ds-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:4cqw;align-items:center;padding:4cqw;border-radius:2cqw;background:var(--ds-soft)}.ds-hero__copy{display:grid;gap:1.8cqw}.ds-line--lg{height:3.4cqw;width:100%;background:var(--color-fg);opacity:.85}.ds-line--short{width:60%}.ds-hero__copy .ds-line:not(.ds-line--lg){width:80%}.ds-pill{width:16cqw;height:4.4cqw;border-radius:99px;background:var(--color-accent)}.ds-hero__media{aspect-ratio:4 / 3.4;border-radius:1.6cqw;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--color-accent) 55%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--color-fg) 35%,var(--color-surface)),color-mix(in srgb,var(--color-fg) 70%,var(--color-surface)))}.ds-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw}.ds-card{display:grid;gap:1.3cqw}.ds-card__img{aspect-ratio:3 / 4;border-radius:1.2cqw}.ds-tone-1{background:color-mix(in srgb,var(--color-fg) 12%,var(--color-surface))}.ds-tone-2{background:color-mix(in srgb,var(--color-accent) 30%,var(--color-surface))}.ds-tone-3{background:color-mix(in srgb,var(--color-fg) 24%,var(--color-surface))}.ds-tone-4{background:color-mix(in srgb,var(--color-fg) 8%,var(--color-surface))}.ds-banner{display:grid;justify-items:center;gap:2.4cqw;padding:7cqw 10cqw;border-radius:2cqw;background:var(--color-fg)}.ds-banner .ds-line--lg{width:60%;background:var(--color-bg)}.ds-split{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center}.ds-split__media{aspect-ratio:1;border-radius:2cqw;background:linear-gradient(200deg,color-mix(in srgb,var(--color-accent) 40%,var(--color-surface)),color-mix(in srgb,var(--color-fg) 20%,var(--color-surface)))}.ds-split__copy{display:grid;gap:1.8cqw}.ds-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding-top:4cqw;border-top:1px solid var(--ds-soft)}.device-skeleton--mobile{gap:7cqw;padding:16cqw 5cqw 8cqw}.device-skeleton--mobile .ds-nav span{display:none}.device-skeleton--mobile .ds-logo{width:26cqw;height:4.5cqw}.device-skeleton--mobile .ds-cart{width:6cqw;height:6cqw}.device-skeleton--mobile .ds-hero{grid-template-columns:1fr;padding:6cqw}.device-skeleton--mobile .ds-hero__media{order:-1}.device-skeleton--mobile .ds-line,.device-skeleton--mobile .ds-nav span i{height:2.6cqw;width:30cqw}.device-skeleton--mobile .ds-line--lg{height:6cqw;width:100%}.device-skeleton--mobile .ds-pill{width:36cqw;height:9cqw}.device-skeleton--mobile .ds-row{grid-template-columns:repeat(2,1fr);gap:4cqw}.device-skeleton--mobile .ds-split,.device-skeleton--mobile .ds-footer{grid-template-columns:1fr}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-device.css.map */