:root {
  --draft-bg: #fcfcfa;
  --draft-surface: rgba(255, 255, 255, 0.72);
  --draft-soft: #f7f6f2;
  --draft-sage: #eff5ef;
  --draft-text: #1f2320;
  --draft-muted: rgba(31, 35, 32, 0.66);
  --draft-quiet: rgba(31, 35, 32, 0.5);
  --draft-line: rgba(83, 105, 87, 0.13);
  --draft-accent: #6e8d73;
  --draft-accent-deep: #536957;
  --draft-forest: #2f513a;
  --draft-forest-deep: #243f2e;
  --draft-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --draft-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background: var(--draft-bg) !important;
}

body {
  color: var(--draft-text) !important;
  font-family: var(--draft-sans) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(239, 245, 239, 0.72), rgba(252, 252, 250, 0) 390px),
    radial-gradient(circle at 88% 8%, rgba(251, 242, 234, 0.88), transparent 28%);
}

nav.sticky {
  min-height: 72px;
  border-bottom: 1px solid rgba(83, 105, 87, 0.08) !important;
  background: rgba(252, 252, 250, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

nav.sticky > div:first-child {
  max-width: 1480px !important;
  height: 72px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.site-nav-grid {
  grid-template-columns: 260px minmax(0, 1fr) 160px !important;
  gap: 24px !important;
}

#desktop-nav {
  justify-content: center !important;
  gap: clamp(18px, 1.8vw, 28px) !important;
  white-space: nowrap !important;
}

#desktop-nav > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#desktop-nav button[onclick="toggleLang()"] {
  display: inline-flex !important;
  min-width: 42px !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
}

nav.sticky img {
  width: 42px !important;
  height: 42px !important;
}

nav.sticky .font-serif.text-2xl,
nav.sticky .font-serif.text-xl {
  color: var(--draft-forest) !important;
  font-family: var(--draft-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

.nav-btn,
.mobile-nav-btn {
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--draft-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.11em !important;
}

.nav-btn:hover,
.mobile-nav-btn:hover {
  color: var(--draft-accent-deep) !important;
}

#shunliu-account-status {
  top: 17px !important;
  right: max(28px, calc((100vw - 1480px) / 2 + 28px)) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

main.mx-auto {
  max-width: none !important;
  padding-top: 34px !important;
}

.section-container {
  width: min(100%, 1120px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#section-home > section:first-child {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 28px 0 60px !important;
}

#section-home > section:first-child > .absolute {
  display: none !important;
}

.home-hero-grid {
  gap: clamp(34px, 5vw, 68px) !important;
  align-items: center !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr) !important;
}

.hero-slogan {
  max-width: 10.5em !important;
  color: var(--draft-text) !important;
  font-family: var(--draft-serif) !important;
  font-size: clamp(2.2rem, 5.15vw, 3.75rem) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.hero-slogan .hero-slogan-accent {
  color: var(--draft-accent-deep) !important;
  font-size: 0.98em !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#section-home > section:first-child .inline-flex.rounded-full {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--draft-accent-deep) !important;
  letter-spacing: 0.28em !important;
}

.brand-mantra {
  justify-content: flex-start !important;
  margin-top: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--draft-accent-deep) !important;
  font-family: var(--draft-serif) !important;
  font-size: 17px !important;
  letter-spacing: 0.12em !important;
}

.daily-deck-panel {
  border: 1px solid var(--draft-line) !important;
  border-radius: 4px !important;
  background: var(--draft-surface) !important;
  box-shadow: 0 8px 18px rgba(31, 35, 32, 0.035) !important;
  backdrop-filter: blur(16px);
}

.daily-deck-panel::before {
  display: none !important;
}

.daily-deck-panel .rounded-2xl,
.daily-deck-panel .rounded-full,
.hero-daily-card-face {
  border-radius: 4px !important;
}

.hero-daily-card-face {
  box-shadow: 0 12px 24px rgba(31, 35, 32, 0.07) !important;
}

.rounded-full,
.rounded-2xl,
.rounded-\[1\.5rem\],
.rounded-\[1\.75rem\],
.rounded-\[2rem\],
.rounded-xl {
  border-radius: 4px !important;
}

.shadow-sm,
.shadow-lg,
.shadow-2xl,
.shadow-inner {
  box-shadow: none !important;
}

.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-br {
  background-image: none !important;
}

button[class*="bg-gradient"],
a[class*="bg-gradient"],
#draw-btn,
#submit-btn {
  min-height: 52px;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: var(--draft-forest) !important;
  color: #fff !important;
  font-family: var(--draft-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

button[class*="bg-gradient"]:hover,
a[class*="bg-gradient"]:hover,
#draw-btn:hover,
#submit-btn:hover {
  transform: translateY(-1px);
  background: var(--draft-forest-deep) !important;
}

a[class*="border"],
button[class*="border"],
input,
select,
textarea {
  border-color: var(--draft-line) !important;
}

a[class*="bg-white"],
button[class*="bg-white"] {
  background: transparent !important;
  color: var(--draft-accent-deep) !important;
}

#section-home > section:not(:first-child),
#section-sharing > div,
#section-services > div,
#section-courses > div,
#section-articles > div,
#section-yinpan > div,
#section-divination > div,
#section-contact > div,
#casting-form-container,
#casting-success {
  border-color: var(--draft-line) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

#section-services {
  padding-top: 64px !important;
  gap: 18px !important;
}

#section-services > .grid {
  gap: 18px !important;
}

#section-services > .grid > div {
  position: relative !important;
  display: grid !important;
  min-height: 286px !important;
  grid-template-rows: 34px 56px minmax(66px, auto) 58px auto !important;
  align-items: start !important;
  overflow: hidden !important;
  border: 1px solid rgba(83, 105, 87, 0.13) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(247, 246, 242, 0.62)),
    radial-gradient(circle at 92% 8%, rgba(217, 186, 120, 0.13), transparent 30%) !important;
  padding: 32px !important;
}

#section-services > .grid > div::before {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  top: 28px !important;
  width: 34px !important;
  height: 1px !important;
  background: rgba(83, 105, 87, 0.32) !important;
}

#section-services > .grid > div > div:first-child {
  margin-top: 16px !important;
  color: rgba(83, 105, 87, 0.78) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
}

#section-services h3 {
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: var(--draft-text) !important;
  font-size: clamp(1.45rem, 2.35vw, 1.95rem) !important;
  line-height: 1.16 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#section-services p {
  max-width: 34em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: rgba(31, 35, 32, 0.58) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

#section-services .flex.items-end.gap-2,
#section-services .mb-5.font-serif.text-2xl {
  align-self: end !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#section-services .mt-auto {
  align-self: end !important;
  margin-top: 0 !important;
}

#section-services .font-serif.text-3xl,
#section-services .font-serif.text-2xl {
  color: var(--draft-forest) !important;
  font-size: clamp(1.35rem, 2.35vw, 1.75rem) !important;
  line-height: 1.15 !important;
}

#section-services .flex.items-end.gap-2 span:not(:first-child) {
  font-size: 12px !important;
  color: rgba(31, 35, 32, 0.5) !important;
}

#section-services a[href^="./service-"] {
  display: inline-flex !important;
  min-height: 46px !important;
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: var(--draft-forest) !important;
  padding: 0 28px !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 640px) {
  #section-services {
    padding-top: 34px !important;
  }

  #section-services > .grid > div {
    min-height: 0 !important;
    display: flex !important;
    padding: 26px !important;
  }

  #section-services h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

#section-services a[href^="./service-"]:hover {
  background: var(--draft-forest-deep) !important;
}

#section-home > section:nth-child(2),
#section-home > section:nth-child(3),
#section-home > section:nth-child(4) {
  border-top: 1px solid rgba(83, 105, 87, 0.1) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
}

#section-home > section:nth-of-type(2) {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

#section-home > section:nth-of-type(2) > div:first-child {
  margin-bottom: 22px !important;
  align-items: center !important;
}

#section-home > section:nth-of-type(2) h2 {
  max-width: none !important;
  white-space: nowrap !important;
  font-size: clamp(2.1rem, 4.4vw, 3.45rem) !important;
}

.start-here-image {
  width: min(430px, 100%) !important;
  height: 150px !important;
  overflow: hidden !important;
  border: 1px solid rgba(83, 105, 87, 0.12) !important;
  border-radius: 4px !important;
  background: var(--draft-soft) !important;
}

.start-here-image img,
.brand-intro-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 58% !important;
  display: block !important;
}

#section-home > section:nth-of-type(2) .path-card {
  display: flex !important;
  min-height: 236px !important;
  flex-direction: column !important;
  padding: 22px 24px !important;
}

#section-home > section:nth-of-type(2) .path-card p {
  flex: 1 1 auto !important;
}

#section-home > section:nth-of-type(2) .path-card :is(a, button) {
  display: inline-flex !important;
  min-height: 46px !important;
  width: fit-content !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(83, 105, 87, 0.22) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--draft-accent-deep) !important;
  padding: 0 20px !important;
}

.path-card,
#section-home article,
#section-services article,
#section-courses article,
#details-grid > div,
.draw-history-item {
  border: 0 !important;
  border-top: 1px solid rgba(83, 105, 87, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.path-card:hover {
  transform: translateY(-1px);
  border-color: rgba(83, 105, 87, 0.24) !important;
}

.brand-intro-image {
  height: min(430px, 32vw) !important;
  min-height: 280px !important;
  overflow: hidden !important;
  border: 1px solid rgba(83, 105, 87, 0.12) !important;
  border-radius: 4px !important;
  background: var(--draft-soft) !important;
}

h1,
h2,
h3,
h4,
.font-serif {
  font-family: var(--draft-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

h2,
.text-3xl {
  color: var(--draft-text) !important;
  font-size: clamp(1.85rem, 5vw, 3.25rem) !important;
  line-height: 1.22 !important;
}

h3,
.text-2xl {
  font-size: clamp(1.28rem, 3vw, 2rem) !important;
  line-height: 1.35 !important;
}

p,
li {
  color: var(--draft-muted);
}

input,
select,
textarea {
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(83, 105, 87, 0.38) !important;
  background: #fff !important;
  outline: none !important;
}

.about-redesign {
  border-color: var(--draft-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.about-redesign .about-hero,
.about-redesign .acts-section,
.about-redesign .quote-block,
.about-redesign .steps-section,
.about-redesign .founders-section {
  background: transparent !important;
  border-color: rgba(83, 105, 87, 0.1) !important;
}

.about-redesign .step-card,
.about-redesign .founders-sidebar {
  border-color: var(--draft-line) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

footer {
  border-top: 1px solid rgba(83, 105, 87, 0.1) !important;
  background: var(--draft-bg) !important;
}

@media (max-width: 900px) {
  #shunliu-account-status {
    top: 16px !important;
    right: 54px !important;
    bottom: auto !important;
  }

  .home-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .site-nav-grid {
    display: flex !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 640px) {
  nav.sticky > div:first-child {
    height: 66px !important;
  }

  .hero-slogan {
    font-size: clamp(1.92rem, 10vw, 2.85rem) !important;
  }

  #section-home > section:nth-of-type(2) .path-card {
    min-height: 0 !important;
  }

  #section-home > section:nth-of-type(2) h2 {
    white-space: normal !important;
    font-size: clamp(1.9rem, 8.2vw, 2.45rem) !important;
  }

  .start-here-image {
    height: 190px !important;
  }

  .brand-intro-image {
    height: 260px !important;
    min-height: 260px !important;
  }

  button[class*="bg-gradient"],
  a[class*="bg-gradient"],
  #draw-btn,
  #submit-btn {
    width: 100%;
    justify-content: center;
  }
}