.pixel-canvas{--pc-accent: #e8872a;--pc-title: #ffffff;--pc-body: #9b9b9b;--pc-content-max-width: 1360px;width:100%;color:var(--pc-title)}.pixel-canvas.page-width,.pixel-canvas.w100{margin-inline:auto}.pixel-canvas.w100{max-width:var(--pc-content-max-width);padding-inline:20px}.pixel-canvas__inner{display:flex;flex-direction:column;gap:2.4rem}.pixel-canvas__header{width:100%}.pixel-canvas__header--stacked{max-width:72rem;margin-inline:auto;text-align:center}.pixel-canvas__header--stacked .pixel-canvas__body{margin:1.4rem auto 0}.pixel-canvas__header--split{display:grid;gap:1.6rem;align-items:end;text-align:left}.pixel-canvas__heading{min-width:0}.pixel-canvas__tag{margin:0 0 1.2rem;font-size:var(--lp-type-eyebrow-size);line-height:var(--lp-type-eyebrow-lh);letter-spacing:var(--lp-type-eyebrow-ls);font-weight:600;text-transform:uppercase;color:var(--pc-accent)}.pixel-canvas__title{margin:0;font-size:var(--lp-type-section-title-size);line-height:var(--lp-type-section-title-lh);letter-spacing:var(--lp-type-section-title-ls);font-weight:700;color:var(--pc-title)}.pixel-canvas__title br{display:none}.pixel-canvas__body{max-width:54rem;font-size:var(--lp-type-section-subtitle-size);line-height:var(--lp-type-section-subtitle-lh);color:var(--pc-body)}.pixel-canvas__body p{margin:0}.pixel-canvas__editor{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.2rem 1.6rem;width:100%}.pixel-canvas__tools{display:grid;align-content:start;gap:1.2rem}.pixel-canvas__tool{display:grid;gap:.8rem;justify-items:center;padding:0;border:0;background:transparent;color:#848991;cursor:pointer}.pixel-canvas__tool-icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border-radius:.8rem;color:#f6f6f4;background:#12161a;box-shadow:0 10px 24px #00000042;transition:background-color .2s ease,transform .2s ease}.pixel-canvas__tool-icon svg,.pixel-canvas__tool-img{display:block;width:2.2rem;height:2.2rem}.pixel-canvas__tool-img{object-fit:contain;filter:brightness(0) invert(1)}.pixel-canvas__tool strong{font-size:var(--lp-type-badge-size);line-height:var(--lp-type-badge-lh);letter-spacing:.08em;font-weight:700;text-transform:uppercase}.pixel-canvas__tool:hover,.pixel-canvas__tool.is-active{color:var(--pc-accent)}.pixel-canvas__tool.is-active .pixel-canvas__tool-icon{background:var(--pc-accent);transform:translateY(-1px)}.pixel-canvas__device{position:relative;width:100%;aspect-ratio:1940 / 1067}.pixel-canvas__frame{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.pixel-canvas__board{position:absolute;z-index:2;top:25.58%;left:6.96%;width:84.48%;height:47.04%;display:block;border-radius:1.5%;background:#141414;touch-action:none;cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges}.pixel-canvas__board.is-erasing{cursor:cell}.pixel-canvas__toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;width:100%}.pixel-canvas__swatches{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}.pixel-canvas__swatch{width:3rem;height:3rem;padding:0;border:2px solid #0b0d0f;border-radius:.8rem;background:var(--pc-swatch);cursor:pointer;box-shadow:0 0 0 1px #ffffff2e;transition:transform .2s ease,box-shadow .2s ease}.pixel-canvas__swatch:hover,.pixel-canvas__swatch:focus-visible{outline:none;transform:translateY(-1px)}.pixel-canvas__swatch.is-active{box-shadow:0 0 0 2px var(--pc-accent)}.pixel-canvas__clear{min-height:3.4rem;margin-left:auto;padding:.7rem 1.6rem;border:0;border-radius:.8rem;background:#15191f;color:var(--pc-title);font-size:var(--lp-type-badge-size);line-height:var(--lp-type-badge-lh);font-weight:700;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.pixel-canvas__clear:hover,.pixel-canvas__clear:focus-visible{outline:none;background:var(--pc-accent);color:#111318;transform:translateY(-1px)}.pixel-canvas__library-label{margin:0;font-size:var(--lp-type-eyebrow-size);line-height:var(--lp-type-eyebrow-lh);letter-spacing:var(--lp-type-eyebrow-ls);font-weight:600;text-transform:uppercase;color:var(--pc-body)}.pixel-canvas__library-shell{position:relative;min-width:0}.pixel-canvas__library{display:flex;gap:1.4rem;margin:0;padding:.6rem 0 1rem;overflow-x:auto;cursor:grab;overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-y}.pixel-canvas__library::-webkit-scrollbar{display:none}.pixel-canvas__library.is-dragging{cursor:grabbing;scroll-behavior:auto;-webkit-user-select:none;user-select:none}.pixel-canvas__library.is-dragging .pixel-canvas__preset{pointer-events:none}.pixel-canvas__scroll{position:absolute;z-index:4;top:50%;display:grid;width:4.6rem;height:4.6rem;padding:0;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:#050709eb;color:#fff;box-shadow:0 12px 32px #0000006b;cursor:pointer;transform:translateY(-50%);transition:opacity .2s ease,transform .2s ease,background-color .2s ease}.pixel-canvas__scroll--prev{left:1.2rem}.pixel-canvas__scroll--next{right:1.2rem}.pixel-canvas__scroll:hover:not(:disabled){background:var(--pc-accent);color:#111318;transform:translateY(-50%) scale(1.05)}.pixel-canvas__scroll:disabled{opacity:.28;cursor:default}.pixel-canvas__preset{position:relative;width:min(30rem,74vw);padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:.8rem;background:#111318;cursor:pointer;flex:0 0 auto;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.pixel-canvas__preset:hover,.pixel-canvas__preset.is-active{border-color:var(--pc-accent);box-shadow:0 18px 38px color-mix(in srgb,var(--pc-accent) 18%,transparent);transform:translateY(-2px)}.pixel-canvas__preset img{display:block;width:100%;height:auto;object-fit:contain;object-position:center;image-rendering:auto}.pixel-canvas__hint{margin:0;text-align:center;font-size:var(--lp-type-badge-size);line-height:var(--lp-type-badge-lh);color:var(--pc-body)}@media screen and (min-width:750px){.pixel-canvas__inner{gap:3.2rem}.pixel-canvas__header--split{grid-template-columns:minmax(0,.82fr) minmax(28rem,.42fr);gap:4.4rem}.pixel-canvas__title br{display:block}.pixel-canvas__swatch{width:3.2rem;height:3.2rem}}@media screen and (max-width:749px){.pixel-canvas__editor{grid-template-columns:1fr}.pixel-canvas__tools{display:flex;gap:1rem;justify-content:center}.pixel-canvas__tool{min-width:7.8rem}.pixel-canvas__tool-icon{width:4.4rem;height:4.4rem}.pixel-canvas__toolbar{justify-content:center}}
/*# sourceMappingURL=/cdn/shop/t/124/assets/pixel-canvas.css.map */