/* Restore the approved community art; make the original fixed artboard responsive. */
.community-home-nav { margin-left: auto; display:flex; align-items:center; gap:12px; }
.community-home-nav a { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border:1px solid #c8cbd2; border-radius:999px; font-size:14px; line-height:1.4; white-space:nowrap; background:#ffffffb8; }
.community-home-nav a:hover { background:#fff; border-color:#333; }
#resource-title,#co-build-title { scroll-margin-top:88px; }
.event-image.complete-shenzhen { aspect-ratio:2798/1182; background:#ffdf00; }
.event-image.complete-shenzhen img, .event-image.complete-game img { object-fit:contain; }
.event-image.complete-game { aspect-ratio:1064/815; background:#174bf2; }
.step-pending { display:block; color:#838795; padding-top:12px; font-size:14px; }
.step-card > .step-pending { position:absolute; z-index:2; left:16px; bottom:16px; height:18px; padding:0; margin:0; border:0; background:transparent; font:inherit; font-size:12px; line-height:18px; color:#838795; cursor:default; }
.steps .step-card:is(:hover,:focus-visible) > .step-pending { right:16px; height:30px; border-radius:999px; background:white; color:#222; font-weight:600; }
.step-card h3 { white-space:normal; height:auto; top:auto; bottom:116px; }
.steps .step-card:is(:hover,:focus-visible) h3 { top:24px; bottom:auto; }
.steps .step-card:is(:hover,:focus-visible) ul { top:calc(32px + var(--step-title-height, 21px)); }
@media (min-width:761px) and (max-width:1100px) {
 .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .steps .step-card { width:auto; height:270px; }
}
.starter-guide > p { width:100%; height:auto; white-space:normal; padding-right:8px; }
.onboarding-heading p { white-space:normal; }
.guide-duration { height:auto; line-height:1.8; padding:16px; white-space:normal; text-align:center; }
.resource-section,.co-build-section { height:auto; padding:56px 0; }
.resource-stage,.co-build-stage { width:min(1400px,calc(100% - 64px)); height:auto; margin:0 auto; }
.resource-heading,.co-build-heading { height:auto; }
.resource-heading h2,.resource-heading p,.co-build-heading h2,.co-build-heading p { width:auto; height:auto; white-space:normal; }
.resource-panel { width:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; }
.contribution-card { width:100%; height:auto; min-height:351px; background-size:cover; padding:38px; cursor:auto; }
.contribution-kicker { width:auto; height:auto; margin:0; }
.contribution-title { width:auto; height:auto; margin:8px 0 0; white-space:normal; font-size:clamp(28px,3vw,38px); }
.contribution-desc { width: min(320px,100%); height:auto; margin:16px 0 24px; }
.contribution-desc p { width:auto; height:auto; font-size:15px; line-height:1.9; }
.contribution-desc::before { height:auto; }
.contribution-button { width:auto; max-width:100%; min-height:42px; height:auto; padding:10px 22px; margin:0; }
.doc-card-grid { margin:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr 1fr; gap:18px; }
.doc-mini-card { width:100%; height:auto; min-height:160px; display:grid; grid-template-columns:54px minmax(0,1fr) 28px; grid-template-rows:auto auto; gap:8px 20px; align-content:center; padding:24px; }
.doc-mini-icon { grid-row:1 / 3; align-self:center; }
.doc-mini-card h3 { margin:0; font-size:20px; line-height:1.4; }
.doc-mini-card p { width:auto; margin:0; line-height:1.7; grid-column:2; }
.doc-mini-card .doc-mini-cta { position:static; width:28px; height:44px; grid-column:3; grid-row:1 / 3; align-self:center; display:grid; place-items:center; }
.co-build-cards { width:100%; height:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.co-build-card { width:100%; min-width:0; height:auto; min-height:353px; padding:36px 28px 28px; display:flex; flex-direction:column; }
.co-build-card h3 { position:relative; inset:auto; width:auto; height:auto; font-size:22px; margin:0 0 18px; }
.co-build-card p { position:relative; inset:auto; width:100%; height:auto; max-width:300px; font-size:15px; line-height:1.8; margin:0 0 28px; }
.co-build-art { width:172px; height:auto; }
.co-build-stats { position:relative; inset:auto; width:100%; height:auto; margin:12px 0 30px; display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr); gap:12px; }
.co-build-stat,.co-build-stat:nth-child(1),.co-build-stat:nth-child(3),.co-build-stat:nth-child(5) { width:auto; height:auto; margin:0; }
.co-build-stat strong { font-size:clamp(22px,2.2vw,28px); }
.co-build-stat span { white-space:normal; text-align:center; font-size:13px; }
.co-build-divider,.co-build-stat + .co-build-divider,.co-build-stat:nth-child(3) + .co-build-divider { margin:0; height:54px; }
.co-build-cta { position:relative; inset:auto; width:100%; height:auto; min-height:46px; padding:10px 16px; margin-top:auto; }
.co-build-guide { width:100%; height:auto; min-height:82px; padding:24px 28px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
.co-build-guide p { width:auto; height:auto; margin:0; line-height:1.7; }
.co-build-guide-button { width:auto; height:auto; margin:0; padding:10px 20px; white-space:normal; }
/* Main-site compact contact entry: same markup, dimensions, artwork and gradient. */
.affix.affix--compact { z-index:1200; }
.affix--compact .affix-container { position:fixed; right:8px; bottom:24px; z-index:999; width:auto; }
.affix--compact .affix-container-content { padding:0; border:0; border-radius:3px; background:linear-gradient(215deg,#d730ff,#ff3494 28.52%,#ff3856 54.08%,#ff6956 75.08%,#ff7a00); box-shadow:0 10px 28px rgba(224,43,93,.24); overflow:hidden; }
.affix--compact .item { display:block; width:100%; margin:0; padding:0; border:0; background:transparent; color:#fff; font-family:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; }
.affix--compact .item-content { display:flex; min-width:176px; box-sizing:border-box; gap:10px; align-items:center; justify-content:flex-start; padding:11px 13px; }
.affix--compact .item-logo { width:22px; height:22px; flex:0 0 auto; margin:0; background:url('assets/contact-us.png') no-repeat center / 100% 100%; filter:brightness(0) invert(1); }
.affix--compact .item-copy { display:flex; min-width:0; flex:1 1 auto; flex-direction:column; gap:2px; }
.affix--compact .item-kicker { display:block; color:rgba(255,255,255,.78); font-size:10px; font-weight:500; line-height:1.15; }
.affix--compact .item-text { font-size:15px; line-height:1.2; }
.affix--compact .item-arrow { display:inline-flex; width:24px; height:24px; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; font-size:15px; font-weight:400; line-height:1; transition:transform 180ms ease,background-color 180ms ease; }
.affix--compact .item:hover .item-arrow { background:rgba(255,255,255,.1); transform:translateX(2px); }
html.contact-is-open { overflow:hidden; }
#community-contact { box-sizing:border-box; width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:36px; border:1px solid #e3e9f1; border-radius:16px; background:#fff; color:#262629; box-shadow:0 28px 90px #171d2633; overflow:auto; }
#community-contact::backdrop { background:rgba(19,23,38,.5); backdrop-filter:blur(5px); }
.contact-close { position:absolute; top:10px; right:10px; border:0; background:transparent; border-radius:50%; width:40px; height:40px; font-size:28px; color:#555; cursor:pointer; }
.contact-eyebrow { color:#7a7f91; font-size:11px; letter-spacing:.14em; }
#community-contact h2 { margin:14px 0 10px; font-size:25px; line-height:1.4; }
#community-contact-description { font-size:15px; color:#626775; line-height:1.8; margin:0; }
.contact-qr-panel { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px; margin:22px 0 16px; border:1px solid #e3e9f1; border-radius:12px; background:#f7f8fc; }
.contact-qr-panel img { width:220px; max-width:100%; height:auto; }
.contact-qr-panel span { font-size:13px; color:#5b6170; }
.contact-hint { font-size:12px; line-height:1.8; color:#777e8e; }
.contact-save { display:inline-flex; padding:8px 0; font-size:14px; color:#555de8; }
@media(max-width:960px) {
 .affix--compact .affix-container { right:10px; bottom:16px; }
 .affix--compact .item-content { min-width:164px; padding:10px 12px; }
 .resource-panel { grid-template-columns:1fr; }
 .co-build-cards { grid-template-columns:1fr; }
 .co-build-card { min-height:260px; }
 .co-build-card p { max-width:75%; }
}
@media(max-width:600px) {
 .community-home-nav { gap:6px; }
 .community-home-nav a { font-size:12px; padding:7px 10px; }
 .topbar .brand-image { width:132px; height:auto; }
 .resource-stage,.co-build-stage { width:calc(100% - 32px); }
 .resource-section,.co-build-section { padding:32px 0; }
 .resource-heading,.co-build-heading { display:block; }
 .starter-guide { height:auto; min-height:300px; }
 .starter-guide > .starter-guide-cta { margin-top:24px; }
 .starter-guide-art { flex-shrink:0; }
 .resource-heading h2,.co-build-heading h2 { font-size:28px; }
 .resource-heading p,.co-build-heading p { font-size:15px; margin-top:8px; }
 .contribution-card { padding:28px 24px; }
 .doc-mini-card { padding:20px; gap:8px 14px; grid-template-columns:40px minmax(0,1fr) 24px; }
 .doc-mini-icon { width:40px; height:40px; }
 .co-build-guide { padding:24px; }
 #community-contact { padding:28px 22px; }
}
@media(max-width:520px) {
 .affix--compact .affix-container { right:8px; bottom:12px; }
 .affix--compact .item-content { min-width:150px; }
 .affix--compact .item-kicker { display:none; }
}
@media(prefers-reduced-motion:reduce) { .affix--compact .item-arrow { transition:none; } }