@font-face {
  font-family: "Xingcui Community";
  src: url("./fonts/noto-sans-sc-community-450-650.woff2") format("woff2");
  font-style: normal;
  font-weight: 450 650;
  font-display: swap;
  unicode-range: U+3002, U+4e00, U+4e5f, U+4e86, U+4e9b, U+4ee5, U+4ef6, U+5165, U+5206, U+533a, U+53d8, U+53e3, U+53ef, U+548c, U+54ea, U+5730, U+5904, U+597d, U+5f97, U+60f3, U+6210, U+627e, U+628a, U+6301, U+652f, U+6563, U+6599, U+65b9, U+6761, U+6cd5, U+7684, U+770b, U+793e, U+7a7a, U+7cfb, U+8054, U+80fd, U+811a, U+83b7, U+843d, U+8981, U+89e3, U+8d44, U+95f4, U+9700, U+9a7b, U+ff0c;
}
.community-section { padding: 115px 52px 120px; overflow: clip; }
.community-layout { max-width: 1360px; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 24px; }
.community-copy { padding-left: 12px; }
.community-copy h2 { font-family: "SF Pro SC", "PingFang SC", "Xingcui Community", "Xingcui Hero", var(--display); font-size: clamp(32px, 4.4vw, 64px); font-weight: 600; line-height: 1.16; letter-spacing: 0; }
.community-copy>p:not(.section-eyebrow) { font-family: "Xingcui Community", "Xingcui Hero", var(--font); font-size: 19px; font-weight: 450; line-height: 1.8; color: var(--xc-ink); margin: 28px 0; }
.community-copy .section-eyebrow { font-size: 15px; }
.community-other { display: flex; width: fit-content; font-size: 14px; margin-top: 16px; }
.community-browser { min-width: 0; text-align: center; }
.community-wheel { --community-card-width: 300px; --community-caption-height: 156px; position: relative; height: 480px; isolation: isolate; perspective: 1400px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.community-wheel:focus-visible { outline: none; }
.community-wheel:focus-visible .community-card.is-current { outline: 3px solid var(--ink); outline-offset: 5px; }
.community-wheel.is-dragging, .community-wheel.is-dragging .community-card { cursor: grabbing; }
.community-wheel.is-moving .community-card { cursor: grab; }
.community-card { position: absolute; top: 50%; left: 50%; display: block; width: var(--community-card-width); aspect-ratio: 5 / 6; border: 1px solid var(--xc-line); border-radius: 25px; overflow: hidden; background: var(--xc-canvas); color: var(--ink); box-shadow: 0 16px 32px -20px rgb(34 35 33 / 25%), 0 3px 10px -5px rgb(34 35 33 / 12%); transform: translate(-50%, -50%); transform-origin: 50% 50%; backface-visibility: hidden; touch-action: pan-y pinch-zoom; cursor: grab; text-align: left; }
.community-card.is-current { box-shadow: 0 25px 42px -25px rgb(34 35 33 / 35%), 0 6px 15px -9px rgb(34 35 33 / 19%); cursor: pointer; }
.community-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.community-card-placeholder { position: absolute; inset: 0 0 calc(var(--community-caption-height) + 14px); display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--xc-muted); font-size: 12px; letter-spacing: .035em; }
.community-card-placeholder svg { width: 31px; height: 31px; fill: none; stroke: var(--xc-muted); stroke-width: 1.25; }
.community-card-caption { position: absolute; inset: auto 13px 13px; height: var(--community-caption-height); display: flex; flex-direction: column; padding: 16px 19px; border-radius: 16px; background: rgb(255 255 255 / 97%); box-shadow: 0 2px 6px rgb(34 35 33 / 3%); }
.community-card-place { font-size: 11px; line-height: 1.5; color: var(--muted); margin-bottom: 7px; }
.community-card-title { font-size: 20px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.community-card-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 12px; line-height: 1.5; }
.community-card-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.community-wheel-controls { display: flex; align-items: center; justify-content: center; gap: 23px; }
.community-wheel-controls button { border: 1px solid var(--xc-line); border-radius: 50%; background: var(--xc-canvas); width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); transition: background .2s; }
.community-wheel-controls button:hover { background: var(--xc-wash); }
.community-wheel-controls button:active { background: var(--xc-wash); }
.community-wheel-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.community-wheel-hint { color: var(--muted); font-size: 12px; margin-top: 16px; }
.community-wheel-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.community-wheel-message { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; color: var(--muted); font-size: 14px; cursor: default; }
.community-wheel-message button { padding: 10px 23px; color: var(--ink); background: var(--canvas); border: 1px solid var(--xc-line); border-radius: 99px; }
.community-wheel-noscript { margin-top: 20px; font-size: 14px; }.community-wheel-noscript a { text-decoration: underline; }
@media (max-width: 1100px) {
  .community-section { padding-inline: 32px; }
  .community-copy { padding-left: 0; }
  .community-copy>p:not(.section-eyebrow) { font-size: 17px; }
  .community-wheel { --community-card-width: 260px; --community-caption-height: 150px; height: 420px; }
  .community-card-caption { padding-inline: 16px; }.community-card-title { font-size: 18px; }
  .community-other { font-size: 12px; }
}
@media (max-width: 760px) {
  .community-section { padding: 80px 24px 85px; }
  .community-layout { grid-template-columns: 1fr; gap: 15px; }
  .community-copy h2 { font-size: clamp(28px, 8.6vw, 54px); }
  .community-copy>p:not(.section-eyebrow) { font-size: 15px; margin: 24px 0 26px; }
  .community-copy .section-eyebrow { font-size: 12px; }
  .community-other { font-size: 12px; margin-top: 12px; }
  .community-browser { margin-inline: -14px; }
  .community-wheel { --community-card-width: min(264px, calc(100vw - 88px)); --community-caption-height: 142px; height: 380px; }
  .community-card { border-radius: 22px; }
  .community-card-caption { inset: auto 10px 10px; padding: 12px 16px; border-radius: 14px; }
  .community-card-title { font-size: 18px; }
  .community-card-placeholder { font-size: 11px; }
  .community-wheel-controls { gap: 20px; }
  .community-wheel-controls button { width: 44px; height: 44px; }
  .community-wheel-hint { font-size: 11px; margin-top: 12px; }
}