/* 小红书创作入口 V287：横长卡片，沿用既有权限与入口行为。 */
.screen-page.xhs-creation-hub {
  --xch-coral: #ed4054;
  --xch-ink: #273238;
  --xch-muted: #78878f;
  --xch-bg: #f7f8f9;
  --xch-card: #fff;
  --xch-card-border: #e4e8eb;
  --xch-note-bg: linear-gradient(150deg, #fff 35%, #fff9fa 100%);
  --xch-note-border: #efdde1;
  --xch-shadow: 0 12px 35px rgba(var(--ui-source-e7bb94f7120581-rgb, 34, 49, 57), var(--ui-source-e7bb94f7120581-alpha, 0.045));
  --xch-hover-shadow: 0 23px 52px rgba(var(--ui-source-2ef822adb30779-rgb, 49, 58, 67), var(--ui-source-2ef822adb30779-alpha, 0.095));
  --xch-pill-bg: #fff0f2;
  --xch-pill-border: #f8dfe4;
  --xch-pill-ink: #bd3b4d;
  --xch-label-bg: #f1f6f7;
  --xch-label-ink: #788991;
  --xch-note-label-bg: #fff0f2;
  --xch-note-label-ink: #c35c6a;
  --xch-reply-button: #364f5d;
  --xch-art-scale: .6;
  position: relative;
  display: block;
  place-items: normal;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 72px 88px 48px;
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  background: rgba(var(--ui-source-b728a3707335bd-rgb, 247, 248, 249), var(--ui-source-b728a3707335bd-alpha, 1));
  color: rgba(var(--ui-source-2f66b05e62632a-rgb, 39, 50, 56), var(--ui-source-2f66b05e62632a-alpha, 1));
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height: 1.4;
  letter-spacing: normal;
  isolation: isolate;
  container-name: xch-hub;
  container-type: inline-size;
}

.xhs-creation-hub *,
.xhs-creation-hub *::before,
.xhs-creation-hub *::after { box-sizing: border-box; }

.xhs-creation-hub::before {
  content: "";
  position: absolute;
  width: min(900px, 100%);
  height: 450px;
  right: 0;
  top: 0;
  background: radial-gradient(circle at 100% 0%, rgba(var(--ui-source-1b9ad1155eda0f-rgb, 246, 94, 105), var(--ui-source-1b9ad1155eda0f-alpha, 0.08)), rgba(246, 94, 105, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.xhs-creation-hub .xch-grid-glow {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--ui-source-0e7f05c750b0cc-rgb, 214, 220, 224), var(--ui-source-0e7f05c750b0cc-alpha, 1)) .9px, transparent .9px);
  background-size: 28px 28px;
  opacity: .27;
  -webkit-mask-image: linear-gradient(transparent 3%, #000 30%, transparent 89%);
  mask-image: linear-gradient(transparent 3%, #000 30%, transparent 89%);
  pointer-events: none;
  z-index: -1;
}

.xhs-creation-hub .xch-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.xhs-creation-hub .xch-heading-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.xhs-creation-hub .xch-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border: 1px solid rgba(var(--ui-source-2dceab1143acd4-rgb, 248, 223, 228), var(--ui-source-2dceab1143acd4-alpha, 1));
  border-radius: 99px;
  background: rgba(var(--ui-source-95a4c5fdb6de00-rgb, 255, 240, 242), var(--ui-source-95a4c5fdb6de00-alpha, 1));
  color: rgba(var(--ui-source-b8bb25b7130bde-rgb, 189, 59, 77), var(--ui-source-b8bb25b7130bde-alpha, 1));
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.xhs-creation-hub .xch-spark { font-size: 19px; line-height: 1; }
.xhs-creation-hub .xch-heading-mini { color: rgba(var(--ui-source-b29f9ce29d4d0d-rgb, 120, 135, 143), var(--ui-source-b29f9ce29d4d0d-alpha, 1)); font-size: 14px; }
.xhs-creation-hub .xch-heading h1 {
  margin: 0;
  color: rgba(var(--ui-source-d354d2823d8c73-rgb, 39, 50, 56), var(--ui-source-d354d2823d8c73-alpha, 1));
  font-size: 46px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.04em;
}
.xhs-creation-hub .xch-heading h1 > span:not(.xch-title-dot) { margin-left: 15px; }
.xhs-creation-hub .xch-title-dot { margin-left: 2px; color: rgba(var(--ui-source-20748e218329b7-rgb, 237, 64, 84), var(--ui-source-20748e218329b7-alpha, 1)); font-size: 52px; }
.xhs-creation-hub .xch-heading > p {
  margin: 16px 0 0;
  color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1));
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .04em;
}

.xhs-creation-hub .xch-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
  margin-top: 54px;
}

.xhs-creation-hub .xch-entries[data-entry-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 586px;
  margin-left: auto;
  margin-right: auto;
}

.xhs-creation-hub .xch-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
  grid-template-rows: 30px minmax(0, 1fr) 46px;
  column-gap: 22px;
  row-gap: 14px;
  height: 392px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 28px 30px;
  border: 1px solid rgba(var(--ui-source-322846187c0e27-rgb, 228, 232, 235), var(--ui-source-322846187c0e27-alpha, 1));
  border-radius: 24px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 12px 35px rgba(var(--ui-source-e7bb94f7120581-rgb, 34, 49, 57), var(--ui-source-e7bb94f7120581-alpha, 0.045));
  overflow: visible;
  cursor: default;
  transition: transform .35s ease, box-shadow .35s ease;
}

.xhs-creation-hub .xch-note { border-color: rgba(var(--ui-source-38fc4a4f1c4379-rgb, 239, 221, 225), var(--ui-source-38fc4a4f1c4379-alpha, 1)); background: linear-gradient(150deg, rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)) 35%, rgba(var(--ui-source-8484d98f0416d8-rgb, 255, 249, 250), var(--ui-source-8484d98f0416d8-alpha, 1)) 100%); }
.xhs-creation-hub .xch-entry-top { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.xhs-creation-hub .xch-note .xch-entry-top { justify-content: flex-start; gap: 16px; }
.xhs-creation-hub .xch-entry-kicker { color: rgba(var(--ui-source-3e5070651475f0-rgb, 148, 159, 166), var(--ui-source-3e5070651475f0-alpha, 1)); font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.xhs-creation-hub .xch-entry-label {
  padding: 6px 11px;
  border-radius: 99px;
  background: rgba(var(--ui-source-0c4be2f25947a2-rgb, 241, 246, 247), var(--ui-source-0c4be2f25947a2-alpha, 1));
  color: rgba(var(--ui-source-757507d19b15ea-rgb, 120, 137, 145), var(--ui-source-757507d19b15ea-alpha, 1));
  font-size: 11px;
  white-space: nowrap;
}
.xhs-creation-hub .xch-note .xch-entry-label { background: rgba(var(--ui-source-95a4c5fdb6de00-rgb, 255, 240, 242), var(--ui-source-95a4c5fdb6de00-alpha, 1)); color: rgba(var(--ui-source-d80e0842a47677-rgb, 195, 92, 106), var(--ui-source-d80e0842a47677-alpha, 1)); }

/* 插画的尺寸统一缩放，流式高度同步变化，不挤压下方文案。 */
.xhs-creation-hub .xch-art {
  position: relative;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.xhs-creation-hub .xch-chat-art { background: radial-gradient(ellipse at 50% 49%, rgba(var(--ui-source-601896c8bed094-rgb, 237, 244, 246), var(--ui-source-601896c8bed094-alpha, 1)), transparent 68%); }
.xhs-creation-hub .xch-orbit {
  position: absolute;
  width: calc(324px * var(--xch-art-scale));
  height: calc(324px * var(--xch-art-scale));
  left: calc(50% - 162px * var(--xch-art-scale));
  top: calc(36px * var(--xch-art-scale));
  border: 1px solid rgba(var(--ui-source-0e4b44a05374fa-rgb, 214, 228, 233), var(--ui-source-0e4b44a05374fa-alpha, 1));
  border-radius: 50%;
}
.xhs-creation-hub .xch-orbit-two {
  width: calc(402px * var(--xch-art-scale));
  height: calc(402px * var(--xch-art-scale));
  left: calc(50% - 201px * var(--xch-art-scale));
  top: calc(-3px * var(--xch-art-scale));
  border-color: rgba(var(--ui-source-8f27309331347c-rgb, 231, 237, 240), var(--ui-source-8f27309331347c-alpha, 1));
}
.xhs-creation-hub .xch-ai-orb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(172px * var(--xch-art-scale));
  height: calc(172px * var(--xch-art-scale));
  top: calc(112px * var(--xch-art-scale));
  left: calc(50% - 86px * var(--xch-art-scale));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 22%, rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)), rgba(var(--ui-source-e859f2cc3d4e9e-rgb, 242, 249, 250), var(--ui-source-e859f2cc3d4e9e-alpha, 1)) 55%, rgba(var(--ui-source-66ee5d63c00c46-rgb, 220, 235, 238), var(--ui-source-66ee5d63c00c46-alpha, 1)));
  box-shadow: inset 0 0 0 1px rgba(var(--ui-source-648f8e18fd24de-rgb, 210, 228, 233), var(--ui-source-648f8e18fd24de-alpha, 1)), 0 22px 50px rgba(var(--ui-source-9565445c3d2d57-rgb, 184, 201, 204), var(--ui-source-9565445c3d2d57-alpha, 0.396078431));
  color: rgba(var(--ui-source-40eec09daa4fd1-rgb, 84, 119, 128), var(--ui-source-40eec09daa4fd1-alpha, 1));
  animation: xch-orb-breathe 6s ease-in-out infinite;
}
.xhs-creation-hub .xch-ai-orb > span { color: rgba(var(--ui-source-ade8068295f125-rgb, 126, 165, 175), var(--ui-source-ade8068295f125-alpha, 1)); font-size: calc(26px * var(--xch-art-scale)); line-height: 1; }
.xhs-creation-hub .xch-ai-orb b { color: rgba(var(--ui-source-40eec09daa4fd1-rgb, 84, 119, 128), var(--ui-source-40eec09daa4fd1-alpha, 1)); font-size: calc(49px * var(--xch-art-scale)); font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.xhs-creation-hub .xch-ai-orb small { margin-top: calc(8px * var(--xch-art-scale)); color: rgba(var(--ui-source-bb44119104d2b0-rgb, 132, 160, 168), var(--ui-source-bb44119104d2b0-alpha, 1)); font-size: calc(12px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-chat {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: calc(15px * var(--xch-art-scale));
  padding: calc(19px * var(--xch-art-scale)) calc(22px * var(--xch-art-scale));
  border: 1px solid rgba(var(--ui-source-437f2b5621ab20-rgb, 225, 233, 237), var(--ui-source-437f2b5621ab20-alpha, 1));
  border-radius: calc(18px * var(--xch-art-scale));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 13px 29px rgba(var(--ui-source-5e9fd7cdcf2d34-rgb, 68, 84, 99), var(--ui-source-5e9fd7cdcf2d34-alpha, 0.1));
  animation: xch-chat-float 8s ease-in-out infinite;
}
.xhs-creation-hub .xch-question { top: calc(32px * var(--xch-art-scale)); left: calc(26px * var(--xch-art-scale)); width: calc(348px * var(--xch-art-scale)); transform: rotate(-3deg); }
.xhs-creation-hub .xch-answer { top: calc(205px * var(--xch-art-scale)); right: calc(13px * var(--xch-art-scale)); width: calc(360px * var(--xch-art-scale)); border-color: rgba(var(--ui-source-ab13754e19d5cf-rgb, 216, 231, 235), var(--ui-source-ab13754e19d5cf-alpha, 1)); background: rgba(var(--ui-source-16225f625b8a5a-rgb, 247, 251, 252), var(--ui-source-16225f625b8a5a-alpha, 1)); animation-name: xch-answer-float; animation-delay: -3s; }
.xhs-creation-hub .xch-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: calc(42px * var(--xch-art-scale)); height: calc(42px * var(--xch-art-scale)); border-radius: 50%; background: rgba(var(--ui-source-166e56d107a668-rgb, 238, 243, 244), var(--ui-source-166e56d107a668-alpha, 1)); color: rgba(var(--ui-source-dd3c9fedd5129e-rgb, 131, 147, 151), var(--ui-source-dd3c9fedd5129e-alpha, 1)); font-size: calc(15px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-answer .xch-avatar { background: rgba(var(--ui-source-366bff791fbd5b-rgb, 82, 127, 139), var(--ui-source-366bff791fbd5b-alpha, 1)); color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1)); font-size: calc(14px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-chat small { color: rgba(var(--ui-source-ccfd01834116c6-rgb, 154, 166, 171), var(--ui-source-ccfd01834116c6-alpha, 1)); font-size: calc(12px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-chat p { margin: calc(6px * var(--xch-art-scale)) 0 0; color: rgba(var(--ui-source-4c49fc44fc0b78-rgb, 69, 88, 95), var(--ui-source-4c49fc44fc0b78-alpha, 1)); font-size: calc(19px * var(--xch-art-scale)); line-height: 1.55; white-space: nowrap; }
.xhs-creation-hub .xch-chat-dots { margin-left: auto; color: rgba(var(--ui-source-cf0c4ba512c44d-rgb, 167, 180, 186), var(--ui-source-cf0c4ba512c44d-alpha, 1)); font-size: calc(25px * var(--xch-art-scale)); line-height: calc(15px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-chat-star { margin-left: auto; color: rgba(var(--ui-source-1b92ad04773278-rgb, 164, 187, 196), var(--ui-source-1b92ad04773278-alpha, 1)); font-size: calc(24px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-float-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(9px * var(--xch-art-scale));
  padding: calc(13px * var(--xch-art-scale)) calc(16px * var(--xch-art-scale));
  border: 1px solid rgba(var(--ui-source-f474c666737de3-rgb, 225, 232, 235), var(--ui-source-f474c666737de3-alpha, 1));
  border-radius: calc(13px * var(--xch-art-scale));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 10px 25px rgba(var(--ui-source-dbac74f0f6a092-rgb, 65, 75, 92), var(--ui-source-dbac74f0f6a092-alpha, 0.06));
  color: rgba(var(--ui-source-5388244b7fd65e-rgb, 113, 140, 152), var(--ui-source-5388244b7fd65e-alpha, 1));
  font-size: calc(15px * var(--xch-art-scale));
  white-space: nowrap;
}
.xhs-creation-hub .xch-float-label > span { font-size: calc(22px * var(--xch-art-scale)); line-height: 1; }
.xhs-creation-hub .xch-chat-label { left: calc(55px * var(--xch-art-scale)); bottom: calc(18px * var(--xch-art-scale)); animation: xch-float-low 9s ease-in-out infinite; }
.xhs-creation-hub .xch-light-dot { position: absolute; width: calc(9px * var(--xch-art-scale)); height: calc(9px * var(--xch-art-scale)); border-radius: 50%; background: rgba(var(--ui-source-92d1f479bca71d-rgb, 135, 171, 179), var(--ui-source-92d1f479bca71d-alpha, 1)); box-shadow: 0 0 18px rgba(var(--ui-source-d666afcd0403af-rgb, 200, 227, 232), var(--ui-source-d666afcd0403af-alpha, 1)); animation: xch-dot-breathe 4.5s ease-in-out infinite; }
.xhs-creation-hub .xch-dot-one { right: calc(82px * var(--xch-art-scale)); top: calc(68px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-dot-two { left: calc(76px * var(--xch-art-scale)); top: calc(260px * var(--xch-art-scale)); width: calc(5px * var(--xch-art-scale)); height: calc(5px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-note-halo { position: absolute; inset: 5px 4% 1px; background: radial-gradient(ellipse at center, rgba(var(--ui-source-214b2e0c52808d-rgb, 250, 229, 233), var(--ui-source-214b2e0c52808d-alpha, 1)), transparent 70%); }
.xhs-creation-hub .xch-paper {
  position: absolute;
  top: calc(30px * var(--xch-art-scale));
  left: calc(50% - 122px * var(--xch-art-scale));
  width: calc(252px * var(--xch-art-scale));
  height: calc(330px * var(--xch-art-scale));
  border: 1px solid rgba(var(--ui-source-1c55f16a081fd9-rgb, 241, 221, 226), var(--ui-source-1c55f16a081fd9-alpha, 1));
  border-radius: calc(17px * var(--xch-art-scale));
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  box-shadow: 0 16px 30px rgba(var(--ui-source-a14f9b88fe1a28-rgb, 154, 95, 107), var(--ui-source-a14f9b88fe1a28-alpha, 0.0862745098));
}
.xhs-creation-hub .xch-paper-back { transform: rotate(15deg) translate(calc(25px * var(--xch-art-scale)), calc(-5px * var(--xch-art-scale))); background: rgba(var(--ui-source-3bb1a8dc12fe3b-rgb, 255, 248, 248), var(--ui-source-3bb1a8dc12fe3b-alpha, 1)); }
.xhs-creation-hub .xch-paper-middle { transform: rotate(-13deg) translate(calc(-32px * var(--xch-art-scale)), calc(5px * var(--xch-art-scale))); background: rgba(var(--ui-source-69cfda84cfc72e-rgb, 255, 244, 244), var(--ui-source-69cfda84cfc72e-alpha, 1)); }
.xhs-creation-hub .xch-paper-cover {
  top: calc(25px * var(--xch-art-scale));
  left: calc(50% - 136px * var(--xch-art-scale));
  width: calc(272px * var(--xch-art-scale));
  height: calc(349px * var(--xch-art-scale));
  padding: calc(23px * var(--xch-art-scale)) calc(24px * var(--xch-art-scale));
  border-color: rgba(var(--ui-source-cc7cf98306392f-rgb, 242, 215, 202), var(--ui-source-cc7cf98306392f-alpha, 1));
  background: rgba(var(--ui-source-97caa64adf90cc-rgb, 255, 244, 238), var(--ui-source-97caa64adf90cc-alpha, 1));
  transform: rotate(-4deg);
  animation: xch-paper-float 9s ease-in-out infinite;
  overflow: hidden;
}
.xhs-creation-hub .xch-paper-cover::before { content: ""; position: absolute; right: calc(-70px * var(--xch-art-scale)); top: calc(30px * var(--xch-art-scale)); width: calc(160px * var(--xch-art-scale)); height: calc(160px * var(--xch-art-scale)); border: 1px solid rgba(var(--ui-source-77dfd4cfdbfaec-rgb, 238, 201, 186), var(--ui-source-77dfd4cfdbfaec-alpha, 1)); border-radius: 50%; opacity: .6; }
.xhs-creation-hub .xch-cover-top { display: flex; align-items: center; justify-content: space-between; color: rgba(var(--ui-source-76aef4be75b54e-rgb, 170, 117, 98), var(--ui-source-76aef4be75b54e-alpha, 1)); font-size: calc(11px * var(--xch-art-scale)); letter-spacing: .15em; }
.xhs-creation-hub .xch-cover-top > span { color: rgba(var(--ui-source-aacce65a7d12d0-rgb, 217, 151, 126), var(--ui-source-aacce65a7d12d0-alpha, 1)); font-size: calc(20px * var(--xch-art-scale)); line-height: 1; }
.xhs-creation-hub .xch-cover-title { position: relative; margin-top: calc(35px * var(--xch-art-scale)); color: rgba(var(--ui-source-c3358f8e52db52-rgb, 100, 75, 66), var(--ui-source-c3358f8e52db52-alpha, 1)); font-size: calc(31px * var(--xch-art-scale)); font-weight: 600; line-height: 1.42; letter-spacing: -.04em; }
.xhs-creation-hub .xch-cover-title strong { color: rgba(var(--ui-source-0ca48067839793-rgb, 216, 105, 85), var(--ui-source-0ca48067839793-alpha, 1)); font-weight: 600; white-space: nowrap; }
.xhs-creation-hub .xch-cover-rule { height: 1px; margin: calc(24px * var(--xch-art-scale)) 0 calc(15px * var(--xch-art-scale)); background: rgba(var(--ui-source-3051a2ce46cc1b-rgb, 233, 213, 201), var(--ui-source-3051a2ce46cc1b-alpha, 1)); }
.xhs-creation-hub .xch-cover-bottom { display: flex; align-items: center; justify-content: space-between; color: rgba(var(--ui-source-fb8a68099f0be9-rgb, 154, 120, 105), var(--ui-source-fb8a68099f0be9-alpha, 1)); font-size: calc(11px * var(--xch-art-scale)); }
.xhs-creation-hub .xch-cover-bottom > span { font-size: calc(19px * var(--xch-art-scale)); line-height: 1; }
.xhs-creation-hub .xch-heat-label { right: calc(7px * var(--xch-art-scale)); top: calc(66px * var(--xch-art-scale)); display: grid; grid-template-columns: auto 1fr; border-color: rgba(var(--ui-source-ce2d6c816f0983-rgb, 240, 212, 219), var(--ui-source-ce2d6c816f0983-alpha, 1)); color: rgba(var(--ui-source-74f6133b8a06aa-rgb, 191, 98, 110), var(--ui-source-74f6133b8a06aa-alpha, 1)); animation: xch-float-low 7s ease-in-out infinite; }
.xhs-creation-hub .xch-heat-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: calc(8px * var(--xch-art-scale)); height: calc(27px * var(--xch-art-scale)); margin-top: 0; }
.xhs-creation-hub .xch-heat-bars b { width: calc(19px * var(--xch-art-scale)); height: calc(8px * var(--xch-art-scale)); border-radius: 4px 4px 0 0; background: rgba(var(--ui-source-b9208c2e5a7209-rgb, 245, 166, 177), var(--ui-source-b9208c2e5a7209-alpha, 1)); animation: xch-heat-pulse 4s ease-in-out infinite; }
.xhs-creation-hub .xch-heat-bars b:nth-child(2) { height: calc(12px * var(--xch-art-scale)); animation-delay: -.4s; }
.xhs-creation-hub .xch-heat-bars b:nth-child(3) { height: calc(16px * var(--xch-art-scale)); animation-delay: -.8s; }
.xhs-creation-hub .xch-heat-bars b:nth-child(4) { height: calc(19px * var(--xch-art-scale)); animation-delay: -1.2s; }
.xhs-creation-hub .xch-heat-bars b:nth-child(5) { height: calc(23px * var(--xch-art-scale)); animation-delay: -1.6s; }
.xhs-creation-hub .xch-heat-bars b:nth-child(6) { height: calc(27px * var(--xch-art-scale)); background: rgba(var(--ui-source-d0f51d5ce9da17-rgb, 233, 108, 128), var(--ui-source-d0f51d5ce9da17-alpha, 1)); animation-delay: -2s; }
.xhs-creation-hub .xch-create-label { left: calc(3px * var(--xch-art-scale)); bottom: calc(39px * var(--xch-art-scale)); border-color: rgba(var(--ui-source-c08f7aacc52b49-rgb, 238, 219, 204), var(--ui-source-c08f7aacc52b49-alpha, 1)); color: rgba(var(--ui-source-f9d46938067d70-rgb, 181, 124, 103), var(--ui-source-f9d46938067d70-alpha, 1)); animation: xch-float-low 8s ease-in-out infinite reverse; }
.xhs-creation-hub .xch-dot-three { right: calc(60px * var(--xch-art-scale)); bottom: calc(60px * var(--xch-art-scale)); background: rgba(var(--ui-source-537ae2e5aabfe7-rgb, 214, 148, 160), var(--ui-source-537ae2e5aabfe7-alpha, 1)); box-shadow: 0 0 20px rgba(var(--ui-source-1761abe62bfce1-rgb, 238, 193, 204), var(--ui-source-1761abe62bfce1-alpha, 1)); }

.xhs-creation-hub .xch-entry-copy { position: relative; grid-column: 1; grid-row: 2; align-self: center; min-width: 0; }
.xhs-creation-hub .xch-entry-copy h2 { margin: 0; color: rgba(var(--ui-source-d354d2823d8c73-rgb, 39, 50, 56), var(--ui-source-d354d2823d8c73-alpha, 1)); font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.xhs-creation-hub .xch-entry-copy h2 > span { display: block; margin: 7px 0 0; color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1)); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.xhs-creation-hub .xch-entry-copy > p { margin: 13px 0 17px; color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1)); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.xhs-creation-hub .xch-benefits { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1)); font-size: 11px; line-height: 1.4; }
.xhs-creation-hub .xch-benefits span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.xhs-creation-hub .xch-benefits span::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--ui-source-a315dac4e7e2cd-rgb, 147, 174, 184), var(--ui-source-a315dac4e7e2cd-alpha, 1)); }
.xhs-creation-hub .xch-note .xch-benefits span::before { background: rgba(var(--ui-source-3bae2b43603232-rgb, 224, 144, 158), var(--ui-source-3bae2b43603232-alpha, 1)); }
.xhs-creation-hub .xch-entry-button {
  appearance: none;
  display: flex;
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(200px, 100%);
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 11px;
  background: rgba(var(--ui-source-e83f9f1c320d6f-rgb, 54, 79, 93), var(--ui-source-e83f9f1c320d6f-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  filter: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.xhs-creation-hub .xch-entry-button > span { flex: none; color: inherit; font-size: 22px; line-height: 1; transition: transform .3s ease; }
.xhs-creation-hub .xch-note .xch-entry-button { background: rgba(var(--ui-source-373da844065531-rgb, 237, 64, 84), var(--ui-source-373da844065531-alpha, 1)); box-shadow: 0 8px 22px rgba(var(--ui-source-14d59ebefc3906-rgb, 239, 64, 83), var(--ui-source-14d59ebefc3906-alpha, 0.141176471)); }
.xhs-creation-hub .xch-entry-button:focus-visible { outline: 3px solid rgba(var(--ui-source-93b81008484eaa-rgb, 120, 157, 169), var(--ui-source-93b81008484eaa-alpha, 1)); outline-offset: 5px; }
.xhs-creation-hub .xch-note .xch-entry-button:focus-visible { outline-color: rgba(var(--ui-source-eba4faddd1fd15-rgb, 237, 64, 84), var(--ui-source-eba4faddd1fd15-alpha, 1)); }
.xhs-creation-hub .xch-entry-button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 3px rgba(var(--ui-source-199ca88541cefb-rgb, 120, 157, 169), var(--ui-source-199ca88541cefb-alpha, 0.2)); }
.xhs-creation-hub .xch-entry-button:disabled { cursor: not-allowed; opacity: .55; }

.xhs-creation-hub .xch-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 16px 3px 0; color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1)); font-size: 13px; line-height: 1.5; }
.xhs-creation-hub .xch-footer > span { display: flex; align-items: center; gap: 10px; }
.xhs-creation-hub .xch-footer b { color: rgba(var(--ui-source-799acb6c3cc712-rgb, 198, 170, 179), var(--ui-source-799acb6c3cc712-alpha, 1)); font-size: 22px; font-weight: 400; line-height: 1; }
.xhs-creation-hub .xch-footer > div { display: flex; align-items: center; gap: 14px; color: rgba(var(--ui-source-d67e22a25ff634-rgb, 120, 135, 143), var(--ui-source-d67e22a25ff634-alpha, 1)); font-size: 12px; }
.xhs-creation-hub .xch-footer i { color: rgba(var(--ui-source-5c5a04ce26c6b9-rgb, 180, 189, 193), var(--ui-source-5c5a04ce26c6b9-alpha, 1)); font-style: normal; }

@media (hover: hover) and (pointer: fine) {
  .xhs-creation-hub .xch-entry:hover { transform: translateY(-4px); box-shadow: 0 23px 52px rgba(var(--ui-source-2ef822adb30779-rgb, 49, 58, 67), var(--ui-source-2ef822adb30779-alpha, 0.095)); }
  .xhs-creation-hub .xch-entry-button:hover:not(:disabled) { background: rgba(var(--ui-source-e83f9f1c320d6f-rgb, 54, 79, 93), var(--ui-source-e83f9f1c320d6f-alpha, 1)); color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1)); filter: none; box-shadow: 0 10px 24px rgba(var(--ui-source-71127295461144-rgb, 54, 79, 93), var(--ui-source-71127295461144-alpha, 0.18)); transform: translateY(-1px); }
  .xhs-creation-hub .xch-note .xch-entry-button:hover:not(:disabled) { background: rgba(var(--ui-source-373da844065531-rgb, 237, 64, 84), var(--ui-source-373da844065531-alpha, 1)); box-shadow: 0 10px 26px rgba(var(--ui-source-23f003d62fbd34-rgb, 237, 64, 84), var(--ui-source-23f003d62fbd34-alpha, 0.24)); }
  .xhs-creation-hub .xch-entry-button:hover:not(:disabled) > span { transform: translate(3px, -3px); }
}

/* 科技主题只覆盖入口根及其子元素，插画文字保持独立的明确读色。 */
[data-theme="tech"] .screen-page.xhs-creation-hub {
  --xch-bg: #081421;
  --xch-ink: #eaf2f9;
  --xch-muted: #a5b6c7;
  --xch-card: #102031;
  --xch-card-border: #293d51;
  --xch-note-bg: linear-gradient(150deg, #142033 35%, #262031 100%);
  --xch-note-border: #493444;
  --xch-shadow: 0 12px 35px rgba(0, 0, 0, .16);
  --xch-hover-shadow: 0 23px 52px rgba(0, 0, 0, .28);
  --xch-pill-bg: #302332;
  --xch-pill-border: #5f3445;
  --xch-pill-ink: #f4acb8;
  --xch-label-bg: #1c3242;
  --xch-label-ink: #b2c7d3;
  --xch-note-label-bg: #382632;
  --xch-note-label-ink: #e7a4b2;
  --xch-reply-button: #3d6377;
  color-scheme: dark;
}
[data-theme="tech"] .xhs-creation-hub .xch-grid-glow { background-image: radial-gradient(#91b1cf .9px, transparent .9px); opacity: .12; }
[data-theme="tech"] .xhs-creation-hub .xch-chat-art { background: radial-gradient(ellipse at 50% 49%, rgba(82, 132, 151, .18), transparent 68%); }
[data-theme="tech"] .xhs-creation-hub .xch-orbit { border-color: #294858; }
[data-theme="tech"] .xhs-creation-hub .xch-orbit-two { border-color: #203747; }
[data-theme="tech"] .xhs-creation-hub .xch-note-halo { background: radial-gradient(ellipse at center, rgba(209, 111, 137, .15), transparent 70%); }
[data-theme="tech"] .xhs-creation-hub .xch-entry-kicker { color: #91a8bd; }
[data-theme="tech"] .xhs-creation-hub .xch-entry-button:focus-visible { outline-color: #7bd7e7; }

@keyframes xch-chat-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(-3deg); } }
@keyframes xch-answer-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes xch-float-low { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes xch-paper-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(-3deg); } }
@keyframes xch-orb-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--ui-source-648f8e18fd24de-rgb, 210, 228, 233), var(--ui-source-648f8e18fd24de-alpha, 1)), 0 22px 50px rgba(var(--ui-source-9565445c3d2d57-rgb, 184, 201, 204), var(--ui-source-9565445c3d2d57-alpha, 0.396078431)); } 50% { box-shadow: inset 0 0 0 1px rgba(var(--ui-source-a34186c9d49ba4-rgb, 193, 220, 229), var(--ui-source-a34186c9d49ba4-alpha, 1)), 0 22px 57px rgba(var(--ui-source-78d87b61b64a81-rgb, 158, 196, 209), var(--ui-source-78d87b61b64a81-alpha, 0.415686275)); } }
@keyframes xch-dot-breathe { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes xch-heat-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* 增长图示是笔记卡直接子节点；独立尺寸，不跟随小插画缩小。 */
.xhs-creation-hub .xch-note > .xch-heat-label {
  --xch-art-scale: 1;
  top: -44px;
  right: -70px;
  width: 230px;
  height: 130px;
  padding: 14px 17px;
  gap: 8px;
  border-radius: 18px;
  background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1));
  color: rgba(var(--ui-source-74f6133b8a06aa-rgb, 191, 98, 110), var(--ui-source-74f6133b8a06aa-alpha, 1));
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(var(--ui-source-11911aa7aabda5-rgb, 154, 86, 108), var(--ui-source-11911aa7aabda5-alpha, 0.13));
  pointer-events: none;
  user-select: none;
}
.xhs-creation-hub .xch-note > .xch-heat-label > span { font-size: 22px; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars { height: 70px; gap: 9px; margin: 0; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b { flex: 1; width: 24px; max-width: 24px; height: 18px; border-radius: 5px 5px 0 0; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b:nth-child(2) { height: 28px; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b:nth-child(3) { height: 38px; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b:nth-child(4) { height: 48px; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b:nth-child(5) { height: 59px; }
.xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars b:nth-child(6) { height: 70px; }
[data-theme="tech"] .xhs-creation-hub .xch-note > .xch-heat-label { border-color: #684052; background: #332535; color: #f1b0bf; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }

@media (min-width: 2200px) and (min-height: 1101px) {
  .screen-page.xhs-creation-hub { padding-top: 88px; padding-bottom: 56px; }
  .xhs-creation-hub .xch-heading h1 { font-size: 50px; }
  .xhs-creation-hub .xch-title-dot { font-size: 56px; }
  .xhs-creation-hub .xch-entries { margin-top: 56px; }
}

@media (max-width: 2100px) {
  .screen-page.xhs-creation-hub { padding-top: 52px; padding-bottom: 40px; }
  .xhs-creation-hub .xch-heading h1 { font-size: 44px; }
  .xhs-creation-hub .xch-title-dot { font-size: 50px; }
  .xhs-creation-hub .xch-entries { margin-top: 50px; }
}

@media (max-width: 1500px) {
  .screen-page.xhs-creation-hub { --xch-art-scale: .51; padding: 28px 88px 28px 28px; }
  .xhs-creation-hub .xch-heading-top { margin-bottom: 16px; }
  .xhs-creation-hub .xch-ai-pill { gap: 8px; padding: 8px 12px; font-size: 12px; }
  .xhs-creation-hub .xch-spark { font-size: 17px; }
  .xhs-creation-hub .xch-heading-mini { font-size: 12px; }
  .xhs-creation-hub .xch-heading h1 { font-size: 36px; }
  .xhs-creation-hub .xch-title-dot { font-size: 42px; }
  .xhs-creation-hub .xch-heading > p { margin-top: 12px; font-size: 16px; }
  .xhs-creation-hub .xch-entries { gap: 24px; margin-top: 46px; }
  .xhs-creation-hub .xch-entries[data-entry-count="1"] { transform: translateX(30px); }
  .xhs-creation-hub .xch-entry { height: 332px; padding: 24px; grid-template-rows: 28px minmax(0, 1fr) 44px; column-gap: 16px; row-gap: 12px; border-radius: 22px; }
  .xhs-creation-hub .xch-entry-label { padding: 6px 9px; }
  .xhs-creation-hub .xch-note .xch-entry-top { gap: 12px; }
  .xhs-creation-hub .xch-entry-copy h2 { font-size: 26px; }
  .xhs-creation-hub .xch-entry-copy h2 > span { font-size: 12px; }
  .xhs-creation-hub .xch-entry-copy > p { margin: 12px 0 14px; font-size: 13px; }
  .xhs-creation-hub .xch-benefits { gap: 8px 10px; }
  .xhs-creation-hub .xch-entry-button { height: 44px; min-height: 44px; }
  .xhs-creation-hub .xch-note > .xch-heat-label { top: -40px; right: -62px; }
  .xhs-creation-hub .xch-footer { margin-top: 24px; padding-top: 12px; font-size: 12px; }
  .xhs-creation-hub .xch-footer > div { gap: 12px; font-size: 11px; }
}

@media (max-height: 850px) and (min-width: 901px) {
  .screen-page.xhs-creation-hub { padding-top: 20px; padding-bottom: 22px; }
  .xhs-creation-hub .xch-heading-top { margin-bottom: 16px; }
  .xhs-creation-hub .xch-ai-pill { padding: 8px 12px; font-size: 12px; }
  .xhs-creation-hub .xch-heading h1 { font-size: 36px; }
  .xhs-creation-hub .xch-title-dot { font-size: 42px; }
  .xhs-creation-hub .xch-heading > p { margin-top: 12px; font-size: 16px; }
  .xhs-creation-hub .xch-entries { margin-top: 46px; }
  .xhs-creation-hub .xch-entry { height: 340px; }
  .xhs-creation-hub .xch-footer { margin-top: 22px; padding-top: 10px; }
}

@media (max-height: 850px) and (min-width: 901px) and (max-width: 1500px) {
  .xhs-creation-hub .xch-entry { height: 332px; }
}

/* 主区域窄时改纵排；增长图示进入正常布局流，不截断或覆盖内容。 */
@container xch-hub (max-width: 900px) {
  .xhs-creation-hub .xch-heading-mini { display: none; }
  .xhs-creation-hub .xch-entries { grid-template-columns: minmax(0, 1fr); max-width: 586px; margin: 28px auto 0; }
  .xhs-creation-hub .xch-entries[data-entry-count="1"] { transform: none; }
  .xhs-creation-hub .xch-entry { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 46px; height: auto; min-height: 0; padding: 24px; gap: 14px; }
  .xhs-creation-hub .xch-entry-top { grid-column: 1; grid-row: 1; justify-content: space-between; flex-wrap: wrap; }
  .xhs-creation-hub .xch-note .xch-entry-top { justify-content: flex-start; }
  .xhs-creation-hub .xch-art { --xch-art-scale: .62; grid-column: 1; grid-row: 2; width: 100%; max-width: 420px; height: 252px; margin: 4px auto 8px; }
  .xhs-creation-hub .xch-entry-copy { grid-column: 1; grid-row: 3; align-self: start; }
  .xhs-creation-hub .xch-entry-button { grid-column: 1; grid-row: 4; height: 46px; min-height: 46px; }
  .xhs-creation-hub .xch-note { grid-template-rows: auto auto auto auto 46px; }
  .xhs-creation-hub .xch-note > .xch-heat-label { position: relative; grid-column: 1; grid-row: 2; justify-self: end; top: auto; right: auto; width: min(230px, 100%); margin: 8px 0 0; }
  .xhs-creation-hub .xch-note .xch-art { grid-row: 3; }
  .xhs-creation-hub .xch-note .xch-entry-copy { grid-row: 4; }
  .xhs-creation-hub .xch-note .xch-entry-button { grid-row: 5; }
  .xhs-creation-hub .xch-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@container xch-hub (max-width: 430px) {
  .xhs-creation-hub .xch-heading h1 { font-size: 27px; }
  .xhs-creation-hub .xch-heading h1 > span:not(.xch-title-dot) { margin-left: 7px; }
  .xhs-creation-hub .xch-title-dot { font-size: 31px; }
  .xhs-creation-hub .xch-heading > p { font-size: 14px; }
  .xhs-creation-hub .xch-entry { padding: 20px 18px; gap: 12px; }
  .xhs-creation-hub .xch-entry-top { gap: 8px; }
  .xhs-creation-hub .xch-entry-kicker { font-size: 10px; }
  .xhs-creation-hub .xch-entry-label { padding: 6px 8px; font-size: 10px; }
  .xhs-creation-hub .xch-art { --xch-art-scale: .5; height: 230px; }
  .xhs-creation-hub .xch-question { left: 0; }
  .xhs-creation-hub .xch-answer { right: 0; }
  .xhs-creation-hub .xch-chat-label { left: 0; bottom: 6px; }
  .xhs-creation-hub .xch-create-label { left: 0; bottom: 6px; }
  .xhs-creation-hub .xch-chat-dots,
  .xhs-creation-hub .xch-chat-star { display: none; }
  .xhs-creation-hub .xch-entry-copy h2 { font-size: 25px; }
  .xhs-creation-hub .xch-entry-copy h2 > span { font-size: 12px; }
  .xhs-creation-hub .xch-entry-copy > p { font-size: 13px; }
  .xhs-creation-hub .xch-benefits { gap: 8px 11px; }
  .xhs-creation-hub .xch-note > .xch-heat-label .xch-heat-bars { gap: 8px; }
  .xhs-creation-hub .xch-footer > div { gap: 10px; font-size: 11px; }
}

@media (max-width: 900px) {
  .screen-page.xhs-creation-hub { padding: 28px 18px 28px; }
}

@media (max-width: 560px) {
  .screen-page.xhs-creation-hub { padding: 24px 14px 28px; }
  .xhs-creation-hub .xch-heading-top { margin-bottom: 18px; }
  .xhs-creation-hub .xch-entries { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .xhs-creation-hub *,
  .xhs-creation-hub *::before,
  .xhs-creation-hub *::after { animation: none !important; transition: none !important; }
  .xhs-creation-hub .xch-entry:hover,
  .xhs-creation-hub .xch-entry-button:hover:not(:disabled),
  .xhs-creation-hub .xch-entry-button:hover:not(:disabled) > span { transform: none; }
}