/* Channel UI only. Never loaded by artwork renderers or tool workspaces. */
body.create-design-page,
body.design-collection-page {
  margin: 0;
  background: #fffaf0;
  color: #1f2733;
  font: 16px/1.55 Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:is(.create-design-page, .design-collection-page) * { box-sizing: border-box; }
:is(.create-design-page, .design-collection-page) .site-header-inner {
  width: min(1236px, calc(100% - 48px));
  margin-inline: auto;
}
:is(.create-design-page, .design-collection-page) main {
  width: min(1236px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 48px;
}
:is(.create-design-page, .design-collection-page) button,
:is(.create-design-page, .design-collection-page) input,
:is(.create-design-page, .design-collection-page) select { font: inherit; }
.dc-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; margin: 0 0 16px; }
.dc-breadcrumb a, .dc-related a { color: #344b60; text-underline-offset: 3px; }
.dc-intro h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; font-weight: 700; }
.dc-intro > p { margin: 12px 0 0; max-width: 78ch; color: #52616e; font-size: 17px; }
.dc-intro .dc-privacy { font-size: 14px; margin-top: 10px; }
.dc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.dc-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid #89948f; border-radius: 22px; padding: 8px 16px;
  color: #283b35; background: #fff; text-decoration: none; font-size: 15px;
}
.dc-nav a[aria-current="page"] { background: #e1eee5; border: 2px solid #34413e; font-weight: 700; padding: 7px 15px; }
.design-collections { margin: 28px 0 38px; scroll-margin-top: 100px; }
.design-collections h2, .dc-related h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.3; }
.design-collections > p { color: #52616e; margin: 0 0 20px; }
.dc-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dc-tool-grid, .create-design-page .feature-grid, .create-design-page .small-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.dc-card, .create-design-page .feature, .create-design-page .small-grid > a {
  --card-bg: #eef8f2;
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px; border: 2px solid #34413e; border-radius: 28px;
  background: var(--card-bg); color: #1f2733; text-decoration: none;
  box-shadow: 6px 6px 0 rgb(24 34 32 / 16%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
:is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):nth-child(6n + 2) { --card-bg: #eef4fc; }
:is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):nth-child(6n + 3) { --card-bg: #f4f0fb; }
:is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):nth-child(6n + 4) { --card-bg: #fff2ea; }
:is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):nth-child(6n + 5) { --card-bg: #fff9e8; }
:is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):nth-child(6n) { --card-bg: #fbeff3; }
.dc-category-grid .dc-card { min-height: 210px; }
.dc-tool-grid .dc-card { min-height: 260px; }
.dc-count { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #52616e; }
.dc-card h2, .dc-card h3, .create-design-page .feature h3, .create-design-page .small-grid h3 {
  margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: normal; font-weight: 600; overflow-wrap: anywhere;
}
.dc-card p, .create-design-page .feature p, .create-design-page .small-grid p {
  margin: 12px 0 22px; color: #52616e; font-size: 15px; line-height: 1.55;
}
.dc-action, .create-design-page .feature b, .create-design-page .small-grid b {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px;
  font-size: 15px; font-weight: 600; color: #2f3c4d;
}
.dc-action svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid #d4d9d3; }
.dc-related p { margin: 10px 0; color: #52616e; }
.dc-related ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin: 12px 0 0; }
.dc-related a { display: inline-flex; align-items: center; min-height: 44px; }
:is(.create-design-page, .design-collection-page) a:focus-visible { outline: 3px solid #2867d8; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  :is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):hover {
    transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgb(24 34 32 / 20%);
  }
}
@media (max-width: 1023px) {
  .dc-tool-grid, .create-design-page .feature-grid, .create-design-page .small-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-category-grid { gap: 16px; }
  .dc-category-grid .dc-card { padding: 18px; }
}
@media (max-width: 760px) {
  .dc-category-grid { grid-template-columns: 1fr; }
  .dc-category-grid .dc-card { min-height: 0; }
}
@media (max-width: 639px) {
  :is(.create-design-page, .design-collection-page) main,
  :is(.create-design-page, .design-collection-page) .site-header-inner { width: calc(100% - 28px); }
  .dc-tool-grid, .create-design-page .feature-grid, .create-design-page .small-grid { grid-template-columns: 1fr; gap: 18px; }
  .dc-tool-grid .dc-card { min-height: 0; }
  .dc-card, .create-design-page .feature, .create-design-page .small-grid > a { border-radius: 24px; padding: 20px; box-shadow: 5px 5px 0 rgb(24 34 32 / 15%); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-card, .create-design-page .feature, .create-design-page .small-grid > a { transition: none; }
  :is(.dc-card, .create-design-page .feature, .create-design-page .small-grid > a):hover { transform: none; }
}