:root {
  color-scheme: dark;
  --scale: 1;
  --rotation: 0deg;
  --accent: #ebc56d;
  --accent-rgb: 235, 197, 109;
  --font-cn: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #080b13; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: #f5f3ed;
  background: #080b13;
  font-family: var(--font-cn);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.viewport-shell {
  position: relative;
  width: calc(941px * var(--scale));
  height: calc(1832px * var(--scale));
  margin: 0 auto;
  overflow: hidden;
  background: #080b13;
  box-shadow: none;
}
.artboard {
  position: absolute;
  inset: 0 auto auto 0;
  width: 941px;
  height: 1672px;
  overflow: hidden;
  background: #080b13;
  transform: scale(var(--scale));
  transform-origin: top left;
}
.artboard::before,
.artboard::after { display: none; }

.visual-layer { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.full-layer { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.layer-background {
  top: 132px;
  left: 0;
  width: 941px;
  height: 1540px;
  object-fit: cover;
}

.site-header {
  position: fixed;
  z-index: 95;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  width: calc(941px * var(--scale));
  max-width: calc(100vw - 24px);
  height: calc(132px * var(--scale));
  border-bottom: 1px solid #1a1d2a;
  background: rgba(3, 6, 15, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transform: translateX(-50%);
}
.site-header[hidden] { display: none; }
.site-brand {
  position: absolute;
  top: calc(42px * var(--scale));
  left: calc(36px * var(--scale));
  display: flex;
  align-items: center;
  gap: calc(15px * var(--scale));
}
.site-brand img { width: calc(61px * var(--scale)); height: calc(61px * var(--scale)); object-fit: contain; filter: drop-shadow(0 0 8px rgba(72, 106, 255, .42)); }
.site-brand span { color: #fff; font-size: calc(42px * var(--scale)); font-weight: 800; line-height: 1; letter-spacing: 1px; }
.wallet-button {
  position: absolute;
  top: calc(29px * var(--scale));
  right: calc(31px * var(--scale));
  width: calc(220px * var(--scale));
  height: calc(74px * var(--scale));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--scale));
  border: 0;
  border-radius: calc(12px * var(--scale));
  color: #fff;
  background: linear-gradient(135deg, #ff5a2f, #ff3d20);
  box-shadow: 0 5px 14px rgba(255, 65, 31, .24), inset 0 1px rgba(255, 255, 255, .18);
  font-size: calc(24px * var(--scale));
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.wallet-button svg {
  width: calc(29px * var(--scale));
  height: calc(29px * var(--scale));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wallet-button:hover { filter: brightness(1.08); }
.wallet-button:active { transform: translateY(1px); }

.campaign-panel {
  position: absolute;
  z-index: 6;
  top: 168px;
  left: 120.5px;
  width: 700px;
  height: 188px;
  overflow: hidden;
  border-radius: 27px;
  background: #071027;
  cursor: pointer;
}
.campaign-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}
.campaign-panel.is-unavailable img { filter: grayscale(.92) brightness(.58); }
.campaign-panel.is-unavailable::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: rgba(112, 118, 132, .34);
  pointer-events: none;
}
.campaign-status {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 20px;
  padding: 8px 18px;
  border-radius: 22px;
  color: rgba(255, 255, 255, .92);
  background: rgba(33, 36, 45, .78);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
}
.campaign-panel:focus-visible,
.wallet-button:focus-visible { outline: 3px solid #63e9ff; outline-offset: 4px; }

.star-chart-position {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 942px;
  height: 1675px;
  transform: matrix(.623, 0, 0, .623, 177.5, 223);
  transform-origin: 0 0;
}
.star-chart-rotator {
  position: absolute;
  inset: 0;
  width: 942px;
  height: 1675px;
  transform: rotate(var(--rotation));
  transform-origin: 471px 800px;
  transition: transform .65s cubic-bezier(.2, .8, .24, 1);
}
.layer-core {
  transform-origin: 471px 800px;
  animation: core-slow-spin 42s linear infinite;
  will-change: transform;
}
@keyframes core-slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.layer-orbit,
.layer-core { top: 0; left: 0; width: 942px; height: 1674.667px; object-fit: cover; }

.nft-icon {
  --node-color: var(--accent);
  position: absolute;
  z-index: 4;
  width: 163.542px;
  height: 163.542px;
}
.nft-icon button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: rotate(calc(-1 * var(--rotation))) scale(var(--node-scale, 1));
  transform-origin: 50% 50%;
  transition: transform .65s cubic-bezier(.2, .8, .24, 1), filter .25s ease;
}
.nft-icon button > img { position: absolute; display: block; max-width: none; object-fit: cover; }
.nft-icon button > span {
  position: absolute;
  top: 157px;
  left: 50%;
  color: var(--node-color);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 9px color-mix(in srgb, var(--node-color) 58%, transparent);
  transform: translateX(-50%);
}
.nft-icon.is-active { --node-scale: 1.1; }
.nft-icon.is-active button { filter: brightness(1.1) drop-shadow(0 0 12px color-mix(in srgb, var(--node-color) 48%, transparent)); }
.nft-icon.is-unavailable button {
  opacity: .46;
  filter: grayscale(1) brightness(.72);
}
.nft-icon.is-unavailable button:hover { opacity: .58; }
.nft-icon.is-unavailable button > span {
  color: #9ba0aa;
  text-shadow: none;
}
.nft-icon button:focus-visible { outline: 3px solid var(--node-color); outline-offset: 4px; }
.icon-sky { --node-color: #47ddf4; left: 385.96px; top: 330.35px; }
.icon-sky img { left: 10.63px; top: 10.63px; width: 142.281px; height: 142.281px; }
.icon-genesis { --node-color: #ebc56d; left: 3.27px; top: 592.02px; }
.icon-genesis img { left: 12.27px; top: 12.27px; width: 139.01px; height: 139.01px; }
.icon-dawn { --node-color: #b783ff; left: 766.19px; top: 594.47px; }
.icon-dawn img { left: 1.64px; top: 1.64px; width: 160.271px; height: 160.271px; }
.icon-glory { --node-color: #e7edf6; left: 149.64px; top: 1042.58px; }
.icon-glory img { left: 4.09px; top: 4.09px; width: 155.365px; height: 155.365px; }
.icon-torch { --node-color: #ff665c; left: 619.82px; top: 1045.85px; }
.icon-torch img { left: 11.45px; top: 11.45px; width: 140.646px; height: 140.646px; }

.detail-card {
  position: absolute;
  z-index: 5;
  top: 1064px;
  left: 145.5px;
  width: 650px;
  height: 430px;
  margin: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.detail-card-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 650px;
  height: 430px;
  max-width: none;
  object-fit: fill;
}
.detail-copy { position: absolute; z-index: 1; inset: 0; }
.detail-copy { transition: opacity .2s ease, transform .2s ease; }
.detail-card.is-switching .detail-copy { opacity: .18; transform: translateY(6px); }
.detail-copy h1,
.detail-copy p { margin: 0; }
.detail-copy h1 {
  position: absolute;
  top: 53px;
  left: 70px;
  width: 260px;
  color: var(--accent);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
}
.detail-subtitle {
  position: absolute;
  top: 111px;
  left: 70px;
  width: 520px;
  color: var(--accent);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
}
.detail-rights {
  position: absolute;
  top: 174px;
  left: 70px;
  width: 540px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #f5f3ed;
  font-size: 20px;
  line-height: 42px;
}
.detail-rights li::before { content: "•"; margin-right: 12px; color: var(--accent); text-shadow: 0 0 7px var(--accent); }
.detail-price {
  position: absolute;
  top: 326px;
  right: 72px;
  width: 160px;
  color: var(--accent);
  font-size: 25px;
  font-weight: 500;
  text-align: right;
}
.detail-remaining {
  position: absolute;
  top: 367px;
  right: 72px;
  width: 240px;
  color: #a9a6a0;
  font-size: 17px;
  text-align: right;
}

.mint-button {
  position: absolute;
  z-index: 7;
  top: 1499px;
  left: 140.5px;
  width: 660px;
  height: 78px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 40px;
  background: transparent;
  cursor: pointer;
}
.mint-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transition: filter .25s ease; }
.mint-button span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #30200c; font-size: 25px; font-weight: 800; }
.mint-button:hover { filter: brightness(1.08); }
.mint-button:active { transform: translateY(1px); }
.mint-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.home-view { position: absolute; z-index: 2; inset: 0; }
.home-view[hidden], .collection-view[hidden] { display: none; }

.collection-view {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 941px;
  height: 1586px;
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 10%, rgba(43, 72, 124, .22), transparent 30%),
    linear-gradient(rgba(3, 7, 18, .58), rgba(3, 6, 16, .92)),
    url("assets/figma/background.png") center / cover no-repeat;
}
.collection-header {
  position: relative;
  height: 132px;
  border-bottom: 0;
  background: rgba(2, 5, 14, .35);
}
.collection-header h1 {
  margin: 0;
  padding-top: 46px;
  color: #f8f9fd;
  font-size: 38px;
  line-height: 1;
  text-align: center;
  letter-spacing: 2px;
}
.collection-back,
.collection-settings {
  position: absolute;
  top: 42px;
  width: 48px;
  height: 48px;
  padding: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.collection-back { left: 26px; }
.collection-settings { right: 27px; }
.collection-back svg,
.collection-settings svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.collection-back:focus-visible,
.collection-settings:focus-visible { outline: 2px solid #f0c560; border-radius: 12px; }
.collection-summary {
  width: 764px;
  margin: 0 auto;
  height: 134px;
  padding: 45px 31px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.collection-summary strong { font-size: 34px; font-weight: 500; letter-spacing: .5px; }
.collection-summary span { padding-top: 3px; color: #aeb0bd; font-size: 30px; }
.collection-summary b { margin: 0 4px 0 12px; color: #e8bd58; font-weight: 500; }
.collection-list {
  width: 764px;
  margin: 0 auto;
  height: 1320px;
  padding: 14px 30px 44px;
  overflow-y: auto;
  scrollbar-width: none;
}
.collection-list::-webkit-scrollbar { display: none; }
.collection-card {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 184px;
  align-items: center;
  column-gap: 22px;
  min-height: 242px;
  margin-bottom: 36px;
  padding: 30px 31px;
  border: 2px solid rgba(143, 164, 204, .74);
  border-radius: 23px;
  background:
    linear-gradient(105deg, rgba(88, 107, 145, .34), rgba(27, 33, 51, .77) 49%, rgba(19, 23, 37, .9)),
    rgba(25, 31, 48, .75);
  box-shadow: inset 0 0 42px rgba(121, 151, 210, .08), 0 15px 32px rgba(0, 0, 0, .18);
}
.collection-card-icon {
  width: 162px;
  height: 162px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(2, 5, 12, .9);
  box-shadow: 0 0 24px color-mix(in srgb, var(--card-accent) 20%, transparent);
}
.collection-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.collection-card-info { align-self: center; min-width: 0; }
.collection-card-info h2 { margin: 0 0 22px; color: #f6f6f9; font-size: 34px; line-height: 1; }
.collection-card-info span { display: block; margin-bottom: 6px; color: #a7a8b2; font-size: 22px; }
.collection-card-info time { display: block; white-space: nowrap; color: #f0f1f5; font-size: 23px; }
.collection-card-actions { display: grid; gap: 18px; }
.collection-action {
  height: 67px;
  border-radius: 36px;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.reward-button { border: 3px solid #e4bb62; color: #efc666; background: rgba(17, 20, 31, .55); }
.unlock-button { border: 0; color: #1c170e; background: linear-gradient(102deg, #d9a83d, #f4d576 50%, #dca73b); box-shadow: inset 0 1px rgba(255, 255, 255, .35); }
.collection-action:hover:not(:disabled) { filter: brightness(1.1); }
.collection-action:active:not(:disabled) { transform: translateY(1px); }
.collection-action:disabled { opacity: .56; cursor: default; }
.collection-empty {
  height: 500px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #9299ad;
  text-align: center;
}
.collection-empty span { color: #e9c35f; font-size: 60px; text-shadow: 0 0 25px rgba(233, 195, 95, .5); }
.collection-empty strong { margin-top: 12px; color: #e5e7ed; font-size: 30px; }
.collection-empty p { margin-top: 12px; font-size: 20px; }

.bottom-navigation {
  position: fixed;
  z-index: 90;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  width: calc(941px * var(--scale));
  max-width: calc(100vw - 24px);
  height: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px 8px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 21px;
  background: rgba(17, 21, 34, .88);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transform: translateX(-50%);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  color: #8e94a3;
  background: transparent;
  cursor: pointer;
}
.nav-item svg { width: 27px; height: 27px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; }
.nav-item span { font-size: 13px; line-height: 1; }
.nav-item.is-active { color: #f0c75e; text-shadow: 0 0 12px rgba(240, 199, 94, .28); }
.nav-item:focus-visible { outline: 2px solid #f4ca67; outline-offset: -3px; border-radius: 14px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(1, 2, 5, .82); backdrop-filter: blur(12px); }
.modal-backdrop[hidden] { display: none; }
.wallet-modal { position: relative; width: min(400px, 100%); padding: 34px; border: 1px solid rgba(var(--accent-rgb), .65); border-radius: 24px; background: #0d1120; box-shadow: 0 24px 90px #000, 0 0 25px rgba(var(--accent-rgb), .16); text-align: center; }
.modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: #aeb3c4; font-size: 28px; cursor: pointer; }
.modal-symbol { color: var(--accent); font-size: 38px; }
.wallet-modal h2 { margin: 4px 0 8px; font-size: 26px; }
.wallet-modal > p { margin: 0 0 22px; color: #9299ad; }
.wallet-option { width: 100%; display: grid; grid-template-columns: 1fr 26px; gap: 4px; margin-top: 10px; padding: 14px 16px; border: 1px solid #343b56; border-radius: 12px; background: #171c2f; text-align: left; cursor: pointer; }
.wallet-option strong, .wallet-option small { grid-column: 1; }
.wallet-option small { color: #858da6; }
.wallet-option span { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.toast { position: fixed; z-index: 110; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px; border: 1px solid #3b4461; border-radius: 10px; background: #171c2f; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .2s ease, transform .2s ease; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.is-centered {
  top: 50%;
  bottom: auto;
  min-width: 260px;
  transform: translate(-50%, calc(-50% + 14px));
}
.toast.is-centered.show { transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .layer-core { animation: none; }
}