/* Brand sections surrounding the calculator. */
.site-hero,
.onchain-section,
.site-footer {
  --site-ink: #0a1a33;
  --site-copy: #435a77;
  --site-muted: #60738e;
  --site-border: #dce6f2;
  --site-wash: #f3f7fc;
  --site-blue: #175bce;
  --site-gradient: linear-gradient(100deg, #165ce2, #098faf 53%, #258e61);
  color: var(--site-ink);
}

.hero.site-hero {
  margin-bottom: clamp(18px, 3vw, 34px);
  padding-block: clamp(36px, 6.7vw, 84px) clamp(12px, 2.7vw, 22px);
  border-bottom: 1px solid var(--site-border);
  background-color: #f5f8fc;
  background-image:
    linear-gradient(#dce6f266 1px, transparent 1px),
    linear-gradient(90deg, #dce6f266 1px, transparent 1px);
  background-position: center top;
  background-size: 44px 44px;
}

.site-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.site-hero-inner > .hero-copy { min-width: 0; }
.hero-owl {
  display: block;
  justify-self: end;
  width: clamp(76px, 22vw, 112px);
  max-width: 100%;
  height: auto;
}

.site-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--site-copy);
  font-size: .875rem;
  font-weight: 650;
}

.site-kicker::before {
  flex: 0 0 27px;
  height: 2px;
  background: var(--site-gradient);
  content: "";
}

.site-hero .site-headline {
  margin: 14px 0 12px;
  color: var(--site-ink);
  font-size: clamp(1.75rem, 7.5vw, 4rem);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.17;
  text-wrap: balance;
}

.site-headline > span { display: block; }
.site-hero .site-intro { max-width: 39rem; color: var(--site-copy); }
.site-gradient, .chain-balance-value > strong { color: var(--site-blue); }

@supports (background-clip: text) {
  .site-gradient, .chain-balance-value > strong {
    background-image: var(--site-gradient);
    background-clip: text;
    color: transparent;
  }
  .site-headline .site-gradient { width: fit-content; }
}

.onchain-section { margin-block: clamp(36px, 6vw, 78px) clamp(34px, 5vw, 68px); }
.site-section-head { margin-bottom: clamp(15px, 2.6vw, 31px); }
.site-section-head > p { max-width: 52rem; color: var(--site-copy); }
.site-section-head > p:first-child { color: var(--site-muted); font-size: .86rem; }
.site-section-head h2 {
  margin: 4px 0 8px;
  color: var(--site-ink);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 820;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.chain-board {
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: clamp(14px, 2vw, 24px);
  background: #fff;
}

.chain-intro, .chain-contracts { display: grid; grid-template-columns: minmax(0, 1fr); }
.chain-diagram {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 150px;
  padding: clamp(10px, 2vw, 25px);
  border-bottom: 1px solid var(--site-border);
  background-color: var(--site-wash);
  background-image:
    linear-gradient(#dce6f2 1px, transparent 1px),
    linear-gradient(90deg, #dce6f2 1px, transparent 1px);
  background-size: 27px 27px;
}

.chain-diagram svg { display: block; width: 100%; max-width: 550px; height: auto; max-height: 270px; }
.chain-intro-copy, .chain-contract { min-width: 0; padding: clamp(15px, 2.5vw, 29px); }
.chain-intro-copy p, .chain-contract p { color: var(--site-copy); font-size: .91rem; }
.chain-intro-copy h3 {
  margin: 10px 0 8px;
  font-size: clamp(1.13rem, 2.1vw, 1.5rem);
  font-weight: 790;
  line-height: 1.32;
}

.chain-intro-copy img { display: block; width: min(100%, 150px); height: auto; margin-top: 12px; }
.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  background: #fff;
  color: var(--site-ink);
  font-size: .84rem;
  font-weight: 740;
}

.chain-badge::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8a600;
  box-shadow: 0 0 0 3px #fff0c6;
  content: "";
}

.chain-contract { border-top: 1px solid var(--site-border); }
.chain-contract h3 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 790;
}

.contract-mark {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #2064d9;
  transform: translateY(-1px) rotate(45deg);
}

.chain-contract:nth-child(2) .contract-mark { background: #0c91b2; }
.chain-contract:nth-child(3) .contract-mark { background: #2984cb; }
.chain-contract:nth-child(4) .contract-mark { background: #2b9b6e; }
.chain-balance {
  margin-top: 13px;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid #bde8d7;
  border-radius: 13px;
  background: linear-gradient(112deg, #f1f6fd, #edf9f3);
}

.chain-balance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 12px;
  color: var(--site-copy);
  font-size: .86rem;
  font-weight: 710;
}

.chain-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid #d1dee9;
  border-radius: 999px;
  background: #f3f7fc;
  color: var(--site-copy);
  font-size: .75rem;
  font-weight: 750;
}

.chain-live::before { width: 7px; height: 7px; border-radius: 50%; background: #778fa8; content: ""; }
.chain-live.is-live, .chain-live[data-state="live"], .chain-live[data-live="true"] {
  border-color: #a9dfc5;
  background: #d9f4e6;
  color: #087049;
}
.chain-live.is-live::before, .chain-live[data-state="live"]::before, .chain-live[data-live="true"]::before { background: #1eab69; }

.chain-balance-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.chain-balance-value > strong {
  min-width: 0;
  font-size: clamp(1.65rem, 5vw, 2.45rem);
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  line-height: 1.16;
}

.chain-balance-value > small { color: var(--site-copy); font-size: .81rem; font-weight: 750; }
.chain-balance p, .chain-balance > small { color: var(--site-muted); font-size: .79rem; }
.chain-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  margin-top: 12px;
  padding-inline-start: 10px;
  border: 1px solid var(--site-border);
  border-radius: 9px;
  background: var(--site-wash);
}

.chain-address code {
  padding-block: 8px;
  color: #293d59;
  font-size: .8rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chain-address button {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--site-copy);
  font-size: .77rem;
  font-weight: 700;
}

.chain-address button:hover { background: #e6effb; color: var(--site-blue); }
.chain-address button svg { width: 16px; height: 16px; }
.chain-address button:is([data-copied="true"], [data-copy-manual="true"]) svg { display: none; }
.chain-address button[data-copied="true"]::after { content: "已复制"; }
.chain-address button[data-copy-manual="true"]::after { content: "请手动复制"; }
.chain-contract-links, .chain-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 9px; }
.chain-contract-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--site-blue);
  font-size: .84rem;
  font-weight: 720;
  text-decoration: none;
}

.chain-contract-links a:hover, .site-footer-bottom a:hover { text-decoration: underline; }
.chain-contract-links a.chain-proof, .chain-contract-links a[data-kind="proof"] {
  padding: 5px 10px;
  border: 1px solid #bde8d4;
  border-radius: 9px;
  background: #eff9f4;
  color: #157153;
}
.chain-proof-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: linear-gradient(140deg, #16afcf, #3dbe78);
  color: #fff;
}
.chain-proof small { display: block; color: var(--site-muted); font-size: .73rem; font-weight: 500; }

.chain-status { justify-content: space-between; color: var(--site-muted); font-size: .81rem; }

.site-footer {
  padding-block: clamp(24px, 4vw, 48px) 18px;
  border-top: 1px solid var(--site-border);
  background: #fff;
}

.site-footer > .site-width { display: grid; grid-template-columns: minmax(0, 1fr); gap: 19px; }
.site-footer-heading .brand { color: var(--site-ink); font-size: 1.18rem; }
.site-footer-heading p {
  max-width: 36rem;
  margin-top: 10px;
  color: var(--site-copy);
  font-size: .87rem;
  line-height: 1.65;
}

.site-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-link {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  min-width: 0;
  min-height: 58px;
  padding: 7px clamp(7px, 1.2vw, 13px);
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: #fff;
  color: var(--site-ink);
  text-decoration: none;
}

.site-link:hover { border-color: #b9d9ee; background: #f7fbff; }
.site-link-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(29px, 4.3vw, 36px);
  height: clamp(29px, 4.3vw, 36px);
  border-radius: 9px;
  background: var(--site-wash);
  color: #087caa;
}

.site-link-icon :is(svg, img) { display: block; width: 18px; height: 18px; }
.site-link > div { min-width: 0; }
.site-link strong, .site-link small { display: block; overflow-wrap: anywhere; }
.site-link strong { font-size: .85rem; font-weight: 770; line-height: 1.3; }
.site-link small { margin-top: 2px; color: var(--site-muted); font-size: .75rem; }
.site-footer-bottom {
  display: grid;
  gap: 7px;
  padding-top: 13px;
  border-top: 1px solid var(--site-border);
  color: var(--site-muted);
  font-size: .8rem;
}

.site-footer-bottom a { color: var(--site-copy); font-weight: 700; text-decoration: none; }

@media (min-width: 600px) {
  .site-kicker::before { flex-basis: 34px; }
  .site-footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer-bottom { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 15px; }
  .site-footer-bottom > :last-child { text-align: right; }
}

@media (min-width: 760px) {
  .hero.site-hero { background-size: 58px 58px; }
  .site-hero .site-headline { font-size: clamp(3.2rem, 5.1vw, 4rem); }
  .chain-intro { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .chain-diagram { min-height: 240px; border-right: 1px solid var(--site-border); border-bottom: 0; }
  .chain-contracts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-contract:nth-child(even) { border-left: 1px solid var(--site-border); }
}

@media (min-width: 880px) {
  .hero.site-hero { padding-block: clamp(31px, 5.6vw, 76px) clamp(26px, 3.9vw, 52px); }
  .site-hero-inner {
    --hero-owl-size: clamp(220px, 17.4vw, 260px);
    grid-template-columns: minmax(0, 1fr) var(--hero-owl-size);
    align-items: center;
    gap: clamp(20px, 4vw, 68px);
  }
  .hero-owl {
    width: var(--hero-owl-size);
    margin-inline-end: clamp(-90px, calc((1512px - 100vw) / 2), 0px);
  }
}

@media (min-width: 930px) {
  .site-footer > .site-width { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 27px; }
  .site-footer-bottom { grid-column: 1 / -1; }
}

@media (max-width: 350px) {
  .site-footer-links { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .site-gradient, .chain-balance-value > strong { background: none; color: CanvasText; }
}