/* Ported from the reference build by tools/port/css.mjs. Do not edit; edit the generator or override in assets/css/theme/. */
.art[data-c-a-ui-service-art] {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  background:
    radial-gradient(80% 70% at 80% 10%, #7a5cff2e, transparent 60%),
    linear-gradient(160deg, var(--cobalt-soft), var(--cobalt-mist));
  place-items: center;
  width: 100%;
  padding: 7%;
  display: grid;
  overflow: hidden;
  container-type: inline-size;
}
.art__win[data-c-a-ui-service-art] {
  width: 100%;
  height: 100%;
  box-shadow: var(--sh-3);
  background: #fff;
  border-radius: 3cqw;
  grid-template-rows: auto 1fr;
  display: grid;
  overflow: hidden;
}
.art__bar[data-c-a-ui-service-art] {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 1.2cqw;
  padding: 2.2cqw 3cqw;
  display: flex;
}
.art__bar[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  background: var(--paper-2);
  border-radius: 50%;
  width: 1.8cqw;
  height: 1.8cqw;
}
.art__url[data-c-a-ui-service-art] {
  background: var(--paper);
  border-radius: 2cqw;
  width: 36%;
  height: 2.4cqw;
  margin-left: 2cqw;
}
.art__body[data-c-a-ui-service-art] {
  min-height: 0;
  position: relative;
}
.art[data-c-a-ui-service-art] b[data-c-a-ui-service-art],
.art[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  display: block;
}
.art[data-c-a-ui-service-art] b[data-c-a-ui-service-art] {
  background: var(--paper-2);
  border-radius: 1cqw;
  height: 2.6cqw;
}
.art[data-c-a-ui-service-art] b[data-c-a-ui-service-art].s {
  width: 60%;
}
.d[data-c-a-ui-service-art] {
  grid-template-columns: 9cqw 1fr;
  height: 100%;
  display: grid;
}
.d__tools[data-c-a-ui-service-art] {
  border-right: 1px solid var(--line);
  align-content: start;
  gap: 2cqw;
  padding: 3cqw 2.4cqw;
  display: grid;
}
.d__tools[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  aspect-ratio: 1;
  background: var(--paper);
  border-radius: 1.2cqw;
}
.d__tools[data-c-a-ui-service-art] i[data-c-a-ui-service-art].on {
  background: var(--cobalt);
}
.d__canvas[data-c-a-ui-service-art] {
  background:
    radial-gradient(circle, var(--line) 1px, transparent 1.2px) 0 0 / 3.2cqw 3.2cqw,
    var(--paper);
  place-items: center;
  display: grid;
  position: relative;
}
.d__frame[data-c-a-ui-service-art] {
  width: 72%;
  box-shadow: var(--sh-1);
  background: #fff;
  border-radius: 1.6cqw;
  gap: 2cqw;
  padding: 3cqw;
  display: grid;
}
.d__hero[data-c-a-ui-service-art] {
  background: var(--grad-cobalt) !important;
  border-radius: 1.4cqw !important;
  height: 14cqw !important;
}
.d__line--s[data-c-a-ui-service-art] {
  width: 55%;
}
.d__row[data-c-a-ui-service-art] {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
  display: grid;
}
.d__row[data-c-a-ui-service-art] b[data-c-a-ui-service-art] {
  height: 7cqw;
}
.d__sel[data-c-a-ui-service-art] {
  border: 1.5px solid var(--cobalt);
  pointer-events: none;
  width: 72%;
  height: 32%;
  position: absolute;
  top: 16%;
  left: 14%;
}
.d__sel[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  border: 1.5px solid var(--cobalt);
  background: #fff;
  width: 1.8cqw;
  height: 1.8cqw;
  position: absolute;
}
.d__sel[data-c-a-ui-service-art] i[data-c-a-ui-service-art]:first-child {
  top: -1cqw;
  left: -1cqw;
}
.d__sel[data-c-a-ui-service-art] i[data-c-a-ui-service-art]:nth-child(2) {
  top: -1cqw;
  right: -1cqw;
}
.d__sel[data-c-a-ui-service-art] i[data-c-a-ui-service-art]:nth-child(3) {
  bottom: -1cqw;
  left: -1cqw;
}
.d__sel[data-c-a-ui-service-art] i[data-c-a-ui-service-art]:nth-child(4) {
  bottom: -1cqw;
  right: -1cqw;
}
.d__dim[data-c-a-ui-service-art] {
  background: var(--cobalt);
  color: #fff;
  white-space: nowrap;
  border-radius: 1cqw;
  padding: 0.4cqw 1.4cqw;
  font-size: 2.4cqw;
  position: absolute;
  bottom: -5.4cqw;
  left: 50%;
  transform: translate(-50%);
}
.d__cursor[data-c-a-ui-service-art] {
  color: var(--violet);
  animation: art-float 4s var(--ease-in-out) infinite;
  align-items: flex-start;
  display: flex;
  position: absolute;
  bottom: 18%;
  right: 12%;
}
.d__cursor[data-c-a-ui-service-art] svg[data-c-a-ui-service-art] {
  width: 3.6cqw;
  height: 3.6cqw;
}
.d__cursor[data-c-a-ui-service-art] em[data-c-a-ui-service-art] {
  color: #fff;
  background: var(--violet);
  border-radius: 1cqw;
  margin-top: 2.4cqw;
  padding: 0.4cqw 1.4cqw;
  font-size: 2.4cqw;
  font-style: normal;
  font-weight: 600;
}
.w[data-c-a-ui-service-art] {
  grid-template-columns: 13cqw 1fr;
  height: 100%;
  display: grid;
}
.w__side[data-c-a-ui-service-art] {
  background: var(--ink);
  align-content: start;
  gap: 2.4cqw;
  padding: 3cqw 2.6cqw;
  display: grid;
}
.w__logo[data-c-a-ui-service-art] {
  width: 6.4cqw;
  color: var(--ink);
  font: 600 3.6cqw / 6.4cqw var(--font-display);
  text-align: center;
  margin-bottom: 1cqw;
  background: #fff !important;
  border-radius: 50% !important;
  height: 6.4cqw !important;
}
.w__side[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  background: #ffffff2e;
  border-radius: 1cqw;
  height: 2cqw;
}
.w__side[data-c-a-ui-service-art] i[data-c-a-ui-service-art].on {
  background: var(--lime);
}
.w__main[data-c-a-ui-service-art] {
  background: var(--paper);
  align-content: start;
  gap: 2.4cqw;
  padding: 3cqw;
  display: grid;
}
.w__block[data-c-a-ui-service-art] {
  background: #fff;
  border-radius: 1.4cqw;
  gap: 1.6cqw;
  padding: 2.4cqw;
  display: grid;
}
.w__block--hero[data-c-a-ui-service-art] b[data-c-a-ui-service-art]:first-child {
  width: 70%;
  height: 4cqw;
}
.w__block--cols[data-c-a-ui-service-art] {
  grid-template-columns: 1fr 1fr;
}
.w__block--cols[data-c-a-ui-service-art] b[data-c-a-ui-service-art] {
  height: 9cqw;
}
.w__block--sel[data-c-a-ui-service-art] {
  outline: 1.5px solid var(--cobalt);
  position: relative;
}
.w__tag[data-c-a-ui-service-art] {
  background: var(--cobalt);
  color: #fff;
  border-radius: 0.8cqw;
  padding: 0.3cqw 1.2cqw;
  font-size: 2.2cqw;
  position: absolute;
  top: -3.4cqw;
  left: 1.6cqw;
}
.w__add[data-c-a-ui-service-art] {
  background: var(--ink);
  color: #fff;
  border-radius: 1.4cqw;
  justify-self: center;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  font-size: 4cqw;
  line-height: 1;
  display: grid;
}
.s[data-c-a-ui-service-art] {
  align-content: start;
  gap: 3cqw;
  height: 100%;
  padding: 3cqw;
  display: grid;
}
.s__head[data-c-a-ui-service-art] {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.s__head[data-c-a-ui-service-art] > b[data-c-a-ui-service-art] {
  width: 22cqw;
}
.s__cart[data-c-a-ui-service-art] {
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  display: grid;
  position: relative;
}
.s__cart[data-c-a-ui-service-art] svg[data-c-a-ui-service-art] {
  width: 3cqw;
  height: 3cqw;
}
.s__cart[data-c-a-ui-service-art] em[data-c-a-ui-service-art] {
  background: var(--lime);
  width: 3.6cqw;
  height: 3.6cqw;
  color: var(--ink);
  font: 600 2.2cqw / 3.6cqw var(--font-body);
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: -1cqw;
  right: -1cqw;
}
.s__grid[data-c-a-ui-service-art] {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
  display: grid;
}
.s__item[data-c-a-ui-service-art] {
  gap: 1.2cqw;
  display: grid;
}
.s__item[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  aspect-ratio: 1/0.8;
  background: hsl(calc(230 + var(--n) * 14) 80% calc(88% - var(--n) * 2%));
  border-radius: 1.6cqw;
}
.s__item[data-c-a-ui-service-art] b[data-c-a-ui-service-art] {
  width: 80%;
  height: 2cqw;
}
.s__price[data-c-a-ui-service-art] {
  color: var(--ink);
  font-size: 2.4cqw;
  font-weight: 600;
}
.c[data-c-a-ui-service-art] {
  background: #12142a;
  align-content: start;
  gap: 2.2cqw;
  height: 100%;
  padding: 4cqw 3cqw;
  display: grid;
  position: relative;
}
.c__line[data-c-a-ui-service-art] {
  align-items: center;
  gap: 1.6cqw;
  display: flex;
}
.c__n[data-c-a-ui-service-art] {
  color: #ffffff4d;
  width: 3cqw;
  font-size: 2.2cqw;
}
.c__line[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  width: 4cqw;
}
.c__line[data-c-a-ui-service-art] b[data-c-a-ui-service-art] {
  height: 2.4cqw;
}
.c[data-c-a-ui-service-art] .t-k[data-c-a-ui-service-art] {
  background: #c3a6ff;
  width: 9cqw;
}
.c[data-c-a-ui-service-art] .t-p[data-c-a-ui-service-art] {
  background: #8ea2ff;
  width: 14cqw;
}
.c[data-c-a-ui-service-art] .t-f[data-c-a-ui-service-art] {
  background: var(--lime);
  width: 7cqw;
}
.c[data-c-a-ui-service-art] .t-s[data-c-a-ui-service-art] {
  background: #ffffff38;
  width: 18cqw;
}
.c__caret[data-c-a-ui-service-art] {
  background: #fff;
  width: 0.5cqw;
  height: 3.6cqw;
  animation: 1.1s steps(2, end) infinite art-blink;
  position: absolute;
  top: 47%;
  left: 42%;
}
.m[data-c-a-ui-service-art] {
  align-content: start;
  gap: 2.6cqw;
  height: 100%;
  padding: 4cqw;
  display: grid;
}
.m__row[data-c-a-ui-service-art] {
  background: var(--paper);
  border-radius: 1.6cqw;
  grid-template-columns: 4.4cqw 1fr auto;
  align-items: center;
  gap: 2.4cqw;
  padding: 2cqw 2.4cqw;
  display: grid;
}
.m__row[data-c-a-ui-service-art] .mono[data-c-a-ui-service-art] {
  color: var(--success);
  font-size: 2.4cqw;
}
.m__ok[data-c-a-ui-service-art] {
  background: var(--success);
  border-radius: 50%;
  width: 4.4cqw;
  height: 4.4cqw;
  box-shadow: 0 0 0 1cqw #1f9d6a26;
}
.m__bars[data-c-a-ui-service-art] {
  align-items: flex-end;
  gap: 0.9cqw;
  height: 13cqw;
  margin-top: 1cqw;
  display: flex;
}
.m__bars[data-c-a-ui-service-art] i[data-c-a-ui-service-art] {
  height: var(--h);
  background: linear-gradient(180deg, var(--cobalt), #8ea2ff);
  border-radius: 0.6cqw;
  flex: 1;
}
@keyframes art-float {
  50% {
    transform: translate(-4px, -6px);
  }
}
@keyframes art-blink {
  50% {
    opacity: 0;
  }
}