body.xh-real-home-active {
  margin: 0;
  overflow-x: hidden;
  background: #f4efe6;
  color: #201f1c;
}

body.xh-real-home-active #root {
  display: none !important;
}

#xh-real-home {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #201f1c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 18% 0%, rgba(245, 212, 166, .32), transparent 44%),
    radial-gradient(ellipse at 82% 8%, rgba(186, 219, 214, .32), transparent 45%),
    linear-gradient(135deg, #f3ece0 0%, #f8f4ec 44%, #edf5f2 100%);
}

#xh-real-home::before {
  content: "";
  position: absolute;
  inset: -18% -8% auto -8%;
  height: 52%;
  pointer-events: none;
  z-index: -3;
  background:
    linear-gradient(110deg, transparent 8%, rgba(204, 120, 92, .10) 22%, rgba(20, 184, 166, .10) 42%, transparent 68%),
    linear-gradient(75deg, transparent 18%, rgba(255,255,255,.46) 44%, transparent 70%);
  filter: blur(18px);
  transform: translateY(-10px);
  animation: xh-real-aurora 15s ease-in-out infinite alternate;
}

#xh-real-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(32, 31, 28, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 31, 28, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.84) 56%, transparent 100%);
}

.xh-real-rays {
  position: absolute;
  right: -15%;
  top: -18%;
  width: 72%;
  height: 86%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 18%, rgba(255,255,255,.42) 32%, rgba(120, 209, 193, .14) 44%, transparent 62%),
    linear-gradient(128deg, transparent 28%, rgba(216, 202, 235, .16) 46%, transparent 64%);
  filter: blur(10px);
  transform: rotate(-7deg);
  animation: xh-real-rays 12s ease-in-out infinite alternate;
}

.xh-real-thread {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 14%;
  height: 180px;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(172deg, transparent 0 18px, rgba(15, 118, 110, .13) 19px, transparent 21px),
    repeating-linear-gradient(8deg, transparent 0 26px, rgba(204, 120, 92, .09) 27px, transparent 29px);
  filter: blur(.2px);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
}

@keyframes xh-real-aurora {
  from { transform: translate3d(-2%, -8px, 0) rotate(-1deg); opacity: .76; }
  to { transform: translate3d(2%, 12px, 0) rotate(2deg); opacity: 1; }
}

@keyframes xh-real-rays {
  from { transform: rotate(-8deg) translateY(-12px); opacity: .54; }
  to { transform: rotate(-3deg) translateY(20px); opacity: .86; }
}

@keyframes xh-real-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.xh-real-shell {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24px 56px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.xh-real-top {
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 8;
}

.xh-real-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 760;
}

.xh-real-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}

.xh-real-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(32, 31, 28, .10);
  border-radius: 999px;
  background: rgba(255, 252, 245, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(53, 42, 30, .08);
}

.xh-real-nav a {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 999px;
  color: #312d27;
  text-decoration: none;
  font-size: 14px;
  font-weight: 740;
}

.xh-real-nav a:hover {
  background: rgba(204, 120, 92, .12);
}

.xh-real-tools {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.xh-real-tool,
.xh-real-theme-toggle {
  height: 36px;
  border: 1px solid rgba(32, 31, 28, .10);
  border-radius: 999px;
  background: rgba(255, 252, 245, .70);
  color: #312d27;
  padding: 0 12px;
  font-weight: 760;
  cursor: pointer;
  backdrop-filter: blur(16px);
}

.xh-real-theme {
  position: relative;
}

.xh-real-user {
  position: relative;
}

.xh-real-theme-menu,
.xh-real-user-menu {
  position: absolute;
  right: 0;
  top: 44px;
  display: none;
  min-width: 126px;
  padding: 6px;
  border: 1px solid rgba(32, 31, 28, .10);
  border-radius: 8px;
  background: rgba(255, 252, 245, .94);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 70px rgba(32, 31, 28, .14);
}

.xh-real-theme.open .xh-real-theme-menu,
.xh-real-user.open .xh-real-user-menu {
  display: block;
}

.xh-real-theme-menu button,
.xh-real-user-menu a,
.xh-real-user-menu button {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #312d27;
  text-align: left;
  padding: 0 10px;
  text-decoration: none;
  font-weight: 740;
  cursor: pointer;
}

.xh-real-theme-menu button:hover,
.xh-real-theme-menu button.active,
.xh-real-user-menu a:hover,
.xh-real-user-menu button:hover {
  background: rgba(15, 118, 110, .10);
}

.xh-real-hero {
  width: min(1120px, 100%);
  margin: 104px auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.xh-real-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 999px;
  background: rgba(255, 252, 245, .70);
  color: #0f766e;
  font-size: 13px;
  font-weight: 780;
  animation: xh-real-rise .55s ease both;
}

.xh-real-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f766e;
  box-shadow: 0 0 0 5px rgba(15, 118, 110, .10);
}

.xh-real-title {
  margin: 18px auto 0;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 68px;
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: 0;
  color: #181715;
  animation: xh-real-rise .68s ease .06s both;
}

.xh-real-title span {
  display: block;
}

.xh-real-title .accent {
  margin-top: 0;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 42px;
  line-height: 1.42;
  font-weight: 820;
  padding-bottom: 8px;
  overflow: visible;
  background: linear-gradient(90deg, #0f766e 0%, #217f96 48%, #6d6aa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xh-real-subtitle {
  max-width: 760px;
  margin: 20px auto 0;
  color: #665f55;
  font-size: 19px;
  line-height: 1.7;
  font-weight: 650;
  animation: xh-real-rise .68s ease .12s both;
}

.xh-real-url-panel {
  width: min(760px, 100%);
  margin: 44px auto 0;
  position: relative;
  border: 1px solid rgba(32, 31, 28, .08);
  border-radius: 8px;
  background: rgba(255, 252, 245, .64);
  backdrop-filter: blur(20px);
  box-shadow: 0 22px 74px rgba(53, 42, 30, .10);
  padding: 10px;
  overflow: hidden;
  animation: xh-real-rise .72s ease .18s both;
}

.xh-real-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 118, 110, .13), transparent 42%);
  opacity: .9;
}

.xh-real-url-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  z-index: 1;
}

.xh-real-url {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 252, 245, .78);
  color: #181715;
  border: 1px solid rgba(32, 31, 28, .10);
  font-family: "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-size: 18px;
  font-weight: 780;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xh-real-copy {
  min-width: 82px;
  height: 52px;
  border: 0;
  border-radius: 6px;
  background: #0f766e;
  color: #fff;
  font-size: 15px;
  font-weight: 820;
  cursor: pointer;
}

.xh-real-copy:hover {
  background: #0b665f;
}

.xh-real-endpoints {
  display: none;
}

.xh-real-endpoints span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15, 118, 110, .08);
  color: #37524c;
  font-size: 12px;
  font-weight: 740;
}

.xh-real-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
  animation: xh-real-rise .74s ease .24s both;
}

.xh-real-btn {
  min-width: 132px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 20px;
  text-decoration: none;
  font-weight: 820;
  border: 1px solid rgba(32, 31, 28, .12);
}

.xh-real-btn.primary {
  background: #181715;
  color: #fffaf1;
  box-shadow: 0 18px 48px rgba(24, 23, 21, .18);
}

.xh-real-btn.primary:hover {
  background: #0f766e;
}

.xh-real-btn.secondary {
  color: #201f1c;
  background: rgba(255, 252, 245, .68);
  backdrop-filter: blur(14px);
}

.xh-real-feature-row {
  width: min(1000px, 100%);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  animation: xh-real-rise .78s ease .30s both;
}

.xh-real-feature {
  position: relative;
  min-height: auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  overflow: hidden;
}

.xh-real-feature::before,
.xh-real-logo-item::before {
  display: none;
}

.xh-real-feature b {
  display: block;
  color: #181715;
  font-size: 15px;
  font-weight: 820;
}

.xh-real-feature p {
  margin: 7px 0 0;
  color: #71685c;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 650;
}

.xh-real-logo-section {
  width: min(1000px, 100%);
  margin: 88px auto 0;
  text-align: center;
  animation: xh-real-rise .86s ease .34s both;
}

.xh-real-section-title {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 840;
  color: #181715;
  transform: translateY(-10px);
}

.xh-real-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 18px;
}

.xh-real-logo-item {
  width: 112px;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: visible;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.xh-real-logo-item:nth-child(1) { animation-delay: .38s; }
.xh-real-logo-item:nth-child(2) { animation-delay: .42s; }
.xh-real-logo-item:nth-child(3) { animation-delay: .46s; }
.xh-real-logo-item:nth-child(4) { animation-delay: .50s; }
.xh-real-logo-item:nth-child(5) { animation-delay: .54s; }
.xh-real-logo-item:nth-child(6) { animation-delay: .58s; }
.xh-real-logo-item:nth-child(7) { animation-delay: .62s; }
.xh-real-logo-item:nth-child(8) { animation-delay: .66s; }

.xh-real-logo-item:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.xh-real-logo-shell {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(32, 31, 28, .08);
}

.xh-real-logo-shell img {
  max-width: 28px;
  max-height: 28px;
  display: block;
  object-fit: contain;
}

.xh-real-logo-item span {
  color: #2a2925;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 760;
}

.xh-real-logo-item:nth-child(n+9) span {
  margin-top: 0;
  font-size: 11.5px;
  line-height: 1.25;
}

.xh-real-logo-item:nth-child(n+9) {
  transform: translateY(6px);
}

.xh-real-logo-item:nth-child(n+9):hover {
  transform: translateY(4px);
}

.xh-real-quick {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 236px;
}

.xh-real-quick a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 188px;
  padding: 11px 12px;
  border: 1px solid rgba(32, 31, 28, .10);
  border-radius: 8px;
  background: rgba(255, 252, 245, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 54px rgba(53, 42, 30, .12);
  color: #201f1c;
  text-decoration: none;
  overflow: hidden;
}

.xh-real-quick strong {
  display: block;
  font-size: 13px;
}

.xh-real-quick span {
  display: block;
  margin-top: 2px;
  color: #71685c;
  font-size: 11px;
  font-weight: 700;
}

.xh-real-quick b {
  font-size: 16px;
  font-weight: 700;
}

.xh-real-internal {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 9;
  color: rgba(32, 31, 28, .46);
  font-size: 12px;
  font-weight: 740;
}

.xh-real-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(16px);
  z-index: 99;
  padding: 10px 14px;
  border-radius: 999px;
  background: #181715;
  color: #fffaf1;
  font-size: 13px;
  font-weight: 820;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.xh-real-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.xh-real-dark #xh-real-home {
  color: #f8fbf7;
  background:
    radial-gradient(ellipse at 74% 4%, rgba(36, 111, 100, .38), transparent 42%),
    radial-gradient(ellipse at 18% 18%, rgba(20, 184, 166, .10), transparent 42%),
    linear-gradient(135deg, #03100e 0%, #061a18 46%, #071829 100%);
}

body.xh-real-dark #xh-real-home::before {
  background:
    linear-gradient(112deg, transparent 16%, rgba(45, 212, 191, .18) 28%, rgba(87, 121, 142, .16) 42%, transparent 66%),
    linear-gradient(74deg, transparent 20%, rgba(255,255,255,.10) 48%, transparent 76%);
  opacity: .82;
}

body.xh-real-dark #xh-real-home::after {
  background-image:
    linear-gradient(rgba(238, 252, 233, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 252, 233, .044) 1px, transparent 1px);
}

body.xh-real-dark .xh-real-rays {
  background:
    linear-gradient(116deg, transparent 18%, rgba(45, 212, 191, .24) 32%, rgba(96, 165, 250, .13) 45%, transparent 63%),
    linear-gradient(128deg, transparent 30%, rgba(238, 252, 233, .08) 48%, transparent 64%);
}

body.xh-real-dark .xh-real-thread {
  opacity: .22;
}

body.xh-real-dark .xh-real-brand,
body.xh-real-dark .xh-real-nav a,
body.xh-real-dark .xh-real-tool,
body.xh-real-dark .xh-real-theme-toggle,
body.xh-real-dark .xh-real-btn.secondary,
body.xh-real-dark .xh-real-user-menu a,
body.xh-real-dark .xh-real-user-menu button,
body.xh-real-dark .xh-real-theme-menu button {
  color: #f8fbf7;
}

body.xh-real-dark .xh-real-nav,
body.xh-real-dark .xh-real-tool,
body.xh-real-dark .xh-real-theme-toggle,
body.xh-real-dark .xh-real-theme-menu,
body.xh-real-dark .xh-real-user-menu,
body.xh-real-dark .xh-real-badge,
body.xh-real-dark .xh-real-url-panel,
body.xh-real-dark .xh-real-quick a,
body.xh-real-dark .xh-real-btn.secondary {
  background: rgba(7, 24, 29, .62);
  border-color: rgba(238, 252, 233, .12);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .24);
}

body.xh-real-dark .xh-real-title,
body.xh-real-dark .xh-real-section-title,
body.xh-real-dark .xh-real-feature b {
  color: #f8fbf7;
}

body.xh-real-dark .xh-real-title .accent {
  background: linear-gradient(90deg, #a7f3d0 0%, #67e8f9 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.xh-real-dark .xh-real-subtitle,
body.xh-real-dark .xh-real-feature p,
body.xh-real-dark .xh-real-quick span {
  color: rgba(248, 251, 247, .68);
}

body.xh-real-dark .xh-real-url {
  background: rgba(236, 253, 245, .08);
  color: #dffbf3;
  border-color: rgba(236, 253, 245, .14);
}

body.xh-real-dark .xh-real-copy,
body.xh-real-dark .xh-real-btn.primary {
  background: #0f766e;
  color: #f8fbf7;
}

body.xh-real-dark .xh-real-endpoints span {
  background: rgba(45, 212, 191, .10);
  color: rgba(236, 253, 245, .84);
}

body.xh-real-dark .xh-real-logo-shell {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255,255,255,.10);
}

body.xh-real-dark .xh-real-logo-shell img {
  filter: drop-shadow(0 0 12px rgba(45, 212, 191, .12));
}

body.xh-real-dark .xh-real-logo-item span,
body.xh-real-dark .xh-real-quick strong {
  color: #f8fbf7;
}

body.xh-real-dark .xh-real-internal {
  color: rgba(248, 251, 247, .42);
}

@media (max-width: 1100px) {
  .xh-real-shell { padding: 20px 28px 28px; }
  .xh-real-title { font-size: 54px; }
  .xh-real-title .accent { font-size: 34px; }
  .xh-real-feature-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .xh-real-shell { padding: 16px 14px 24px; }
  .xh-real-top { height: auto; grid-template-columns: 1fr auto; }
  .xh-real-nav { order: 3; grid-column: 1 / -1; justify-self: center; flex-wrap: wrap; }
  .xh-real-tools { gap: 6px; }
  .xh-real-tool { display: none; }
  .xh-real-hero { margin-top: 54px; }
  .xh-real-title { font-size: 36px; }
  .xh-real-title .accent { font-size: 24px; }
  .xh-real-subtitle { font-size: 16px; }
  .xh-real-url-row { grid-template-columns: 1fr; }
  .xh-real-copy { width: 100%; }
  .xh-real-logo-grid { gap: 8px; }
  .xh-real-url-panel { margin-top: 30px; }
  .xh-real-ctas { margin-top: 26px; }
  .xh-real-feature-row { margin-top: 34px; }
  .xh-real-logo-section { margin-top: 64px; }
  .xh-real-logo-item { width: 94px; }
  .xh-real-feature-row { grid-template-columns: 1fr; }
  .xh-real-quick { position: static; margin: 24px auto 0; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .xh-real-quick a { min-width: 0; flex: 1 1 150px; }
  .xh-real-internal { position: static; text-align: center; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #xh-real-home::before,
  .xh-real-rays,
  .xh-real-badge,
  .xh-real-title,
  .xh-real-subtitle,
  .xh-real-url-panel,
  .xh-real-ctas,
  .xh-real-feature-row,
  .xh-real-logo-section {
    animation: none !important;
  }
}