@font-face {
  font-family: "DreamFuture Noto SC";
  src: url("assets/noto-sans-sc-home.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

body.creator-home-sky {
  --creator-sky-ink: #24253d;
  --creator-sky-muted: #595972;
  --creator-sky-paper: #f8f8fc;
  --creator-sky-fog: #f3f0f9;
  --creator-sky-height: 550px;
  font-family: "Segoe UI", "Noto Sans SC", "DreamFuture Noto SC", "Microsoft YaHei", system-ui, sans-serif;
}
body.creator-home-sky {
  isolation: isolate;
  position: relative;
  color: var(--creator-sky-ink);
  background: linear-gradient(180deg, var(--creator-sky-fog) 560px, var(--creator-sky-paper) 930px);
}
.creator-sky {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: var(--creator-sky-height);
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 67%, #f3f0f92e 83%, var(--creator-sky-fog) 100%),
    radial-gradient(ellipse 52% 76% at 92% 75%, #b797cf86, transparent 85%),
    radial-gradient(ellipse 48% 60% at 2% 64%, #8c87cf96, transparent 84%),
    linear-gradient(180deg, #111025 0%, #171630 26%, #252446 51%, #504872 72%, #8c7fab 88%, #c4b5d8 100%);
}
.creator-sky > svg,
.creator-sky > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.creator-sky > canvas {
  mask-image: linear-gradient(black 77%, transparent 99%);
}

.creator-sky g[filter="url(#star-halo)"] > circle {
  transform-box: fill-box;
  transform-origin: center;
  /* Keep a smaller drift in reduced-motion mode despite the global animation reset. */
  animation: creator-star-rise var(--creator-star-duration, 20s) linear var(--creator-star-delay, -3s) infinite !important;
}
.creator-sky g[filter="url(#star-halo)"] > circle:nth-child(4n + 2) {
  --creator-star-duration: 23s;
  --creator-star-delay: -8s;
}
.creator-sky g[filter="url(#star-halo)"] > circle:nth-child(4n + 3) {
  --creator-star-duration: 18s;
  --creator-star-delay: -10s;
}
.creator-sky g[filter="url(#star-halo)"] > circle:nth-child(4n) {
  --creator-star-duration: 26s;
  --creator-star-delay: -20s;
}
@media (prefers-reduced-motion: reduce) {
  .creator-sky {
    --creator-star-start: 20px;
    --creator-star-end: -66px;
  }
}
@keyframes creator-star-rise {
  0% {
    transform: translateY(var(--creator-star-start, 30px)) scale(1.32);
    fill: #69d8ff;
    fill-opacity: 0;
  }
  12%, 87% { fill-opacity: 1; }
  32% { fill: #ff86c9; }
  63% { fill: #aa84ff; }
  100% {
    transform: translateY(var(--creator-star-end, -106px)) scale(1.32);
    fill: #69d8ff;
    fill-opacity: 0;
  }
}

body.creator-home-sky.creator-sky-at-top .header {
  color: #fbf8ff;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
body.creator-home-sky.creator-sky-at-top .header .brand small,
body.creator-home-sky.creator-sky-at-top .header .header-motto {
  color: #c5bed9;
}
body.creator-home-sky.creator-sky-at-top .header .brand-mark {
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff2e;
}
body.creator-home-sky.creator-sky-at-top .header .creator-nav-menu a,
body.creator-home-sky.creator-sky-at-top .header :is(.icon-button, .creator-music-toggle) {
  color: #ddd8ed;
}
body.creator-home-sky.creator-sky-at-top .header .creator-nav-menu :is(.active, [aria-current], a:hover) {
  color: #fff;
}
body.creator-home-sky.creator-sky-at-top .header .creator-nav-menu a::after {
  background: #dac5ff;
}
body.creator-home-sky.creator-sky-at-top .header .icon-button:hover {
  background: #ffffff1c;
}
body.creator-home-sky .creator-home .hero {
  height: 468px;
  min-height: 0;
  background: transparent;
}
body.creator-home-sky .creator-home .hero-content {
  padding-top: 15px;
  padding-bottom: 80px;
}
body.creator-home-sky .creator-home .hero h1 {
  font-size: clamp(32px, 3.45vw, 56px);
  font-weight: 660;
  letter-spacing: .02em;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 3px 24px #09071c58;
  margin-bottom: 14px;
}
body.creator-home-sky .creator-home .hero h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .075em;
  color: #f4edff;
}
body.creator-home-sky .creator-home .hero-description {
  font-size: 15px;
  font-weight: 440;
  line-height: 1.82;
  color: #e0dbef;
  margin: 17px auto 23px;
}
body.creator-home-sky .creator-home .hero-search {
  width: min(690px, 100%);
  background: #fcfaff;
  border: 1px solid #fff;
  border-radius: 14px;
  box-shadow: 0 12px 34px #16112e37, 0 0 0 4px #e1ceff14;
}
body.creator-home-sky .creator-home .hero-search input { color: #2b2846; }
body.creator-home-sky .creator-home .hero-search input::placeholder { color: #696482; }
body.creator-home-sky .creator-home .hero-search > button {
  border-radius: 9px;
  background: #635098;
  color: #fff;
  font-weight: 650;
}
body.creator-home-sky .creator-home .hero-search > button:hover { background: #524082; }
body.creator-home-sky .creator-home .search-hints :is(button, a) {
  font-size: 13px;
  font-weight: 540;
  color: #fff;
  text-shadow: 0 1px 5px #15112f;
}
body.creator-home-sky .creator-home .creator-platform-bar {
  border-bottom: 0;
  background: transparent;
}
body.creator-home-sky .creator-home .creator-platform-directory summary {
  background: #fff9;
}
body.creator-home-sky .creator-home .workspace-shell,
body.creator-home-sky .creator-home ~ .footer {
  background: transparent;
}
body.creator-home-sky .creator-home .workspace-shell {
  padding-top: 31px;
}
body.creator-home-sky .creator-home .creator-curated {
  background: #fff8;
  border: 1px solid #fff;
}
body.creator-home-sky .creator-home .catalog-search input,
body.creator-home-sky .creator-home :is(.side-link, .creator-platform-name) {
  font-size: 14px;
}
body.creator-home-sky .creator-home :is(.section-title h2, .tool-section-heading h3, .creator-curated h2, .creator-platform-caption h2) {
  color: var(--creator-sky-ink);
}
body.creator-home-sky .creator-home :is(.tool-desc, .catalog-empty p, .creator-platform-name) {
  color: var(--creator-sky-muted);
}
@media (max-width: 850px) {
  body.creator-home-sky .creator-home .hero { height: 438px; }
}
@media (max-width: 600px) {
  body.creator-home-sky .creator-home .hero {
    height: auto;
    min-height: 413px;
  }
  body.creator-home-sky .creator-home .hero-content { padding: 24px 20px 74px; }
  body.creator-home-sky .creator-home .hero h1 { font-size: clamp(26px, 6.8vw, 35px); }
  body.creator-home-sky .creator-home .hero h2 { font-size: 17px; }
  body.creator-home-sky .creator-home .hero-description { font-size: 14px; }
  body.creator-home-sky .creator-home .hero-search { height: 53px; }
  body.creator-home-sky .creator-home .hero-search > button { height: 39px; }
  body.creator-home-sky .creator-home .search-hints :is(button, a) { font-size: 12px; }
  body.creator-home-sky .creator-home .workspace-shell { padding-top: 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .creator-home :is(.directory-tool, .featured-project-card[data-featured-project], .curated-tool[data-curated-tool]) {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .creator-home :is(.directory-tool, .featured-project-card[data-featured-project], .curated-tool[data-curated-tool]):not(.favorite-sort-chosen, .favorite-sort-ghost, .sortable-fallback):hover {
    transform: translateY(-3px);
  }
}