/* /community/ (generated by tools/make-pages.mjs -> src/community-page.mjs). Same family as about.css: tokens only, mono kickers, soft glow, gentle reveal. */
.cm-wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter,16px)}
.cm-sec{padding-top:clamp(64px,9vw,112px)}
.cm-kick{margin:0 0 12px;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--glow))}
.cm-h2{margin:0 0 16px;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em;color:var(--text);text-wrap:balance;scroll-margin-top:calc(var(--header,64px) + 24px)}
.cm-h2-s{font-size:clamp(22px,2.4vw,28px)}
.cm-lede{margin:0 0 28px;max-width:62ch;font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:var(--text-2)}
.cm-fine{margin:22px 0 0;font-size:13px;line-height:1.55;color:var(--text-3);max-width:70ch}
.cm-sample{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:999px;border:1px solid rgba(var(--tp-warn),.6);color:rgb(var(--kt-ffe3a6));font:600 12px/1.4 var(--mono);letter-spacing:.04em;vertical-align:middle}
.cm-av{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));color:#06070a;font:700 13px/1 var(--font);box-shadow:0 0 0 2px rgba(var(--ts),calc(.9*var(--sa))),0 0 0 3px rgba(var(--tw),.2)}

/* ---------- hero: about-style cell canvas, particles morph between shapes (? chart ! smiley) - community-hero.js ---------- */
.cm-canvas{position:absolute;right:0;top:0;width:68%;height:100%;display:block;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.cm-hero{padding:56px 0 52px}
.cm-hero::after{display:none}
.cm-hero h1{max-width:16ch}
.cm-hero .tp-lede{max-width:50ch}
.cm-live{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.cm-live i{width:8px;height:8px;border-radius:50%;background:rgb(236,0,140);box-shadow:0 0 0 0 rgba(236,0,140,.6)}
.cm-hero .container{z-index:2}

/* ---------- join: Discord + YouTube ---------- */
.cm-two{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px}
.cm-two>div{display:flex;min-width:0}
.cm-two>div>.sc-card{flex:1}
.cm-two-s{margin-top:20px}
@media (min-width:880px){.cm-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cm-join .cm-two:first-of-type{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.cm-two-s .sc-sm{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cm-two-s .sc-sm .sc-top{flex:0 0 auto}
.cm-two-s .sc-sm p{flex:1 1 180px}
.cm-two-s .sc-sm .sc-btn{margin-left:auto}
.cm-join .sc-discord{justify-content:center}
.cm-join .sc-discord>p:not(.sc-fine){font-size:clamp(17px,1.6vw,19px)}

/* ---------- gallery tease ---------- */
.cm-gal{position:relative}
.cm-gal::before{content:"";position:absolute;left:0;right:0;top:clamp(32px,5vw,64px);bottom:-40px;z-index:-1;background:radial-gradient(50% 60% at 15% 30%,rgba(var(--glow),.06),transparent 70%),radial-gradient(50% 60% at 85% 60%,rgba(236,0,140,.07),transparent 70%)}
.cm-wgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:640px){.cm-wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cm-wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cm-wc{margin:0;min-width:0}
.cm-wa{position:relative;display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text);background:rgba(var(--tw),.035);border:1px solid rgba(var(--tw),.1);box-shadow:0 24px 50px -36px rgba(var(--ts),var(--sa));transition:transform .4s var(--ease,ease),border-color .25s,box-shadow .3s}
.cm-wa:hover,.cm-wa:focus-visible{transform:translateY(-6px) rotate(var(--rot,0deg));border-color:rgba(var(--glow),.55);box-shadow:0 32px 56px -28px rgba(var(--glow),.4)}
.cm-wa:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cm-wimg{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(var(--tw),.06)}
.cm-wimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease,ease)}
.cm-wa:hover .cm-wimg img{transform:scale(1.06)}
.cm-wgrad{position:absolute;inset:0;display:block}
.cm-wtag{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:999px;background:rgba(var(--k-08090d),.82);border:1px solid rgba(var(--tp-warn),.6);color:rgb(var(--kt-ffe3a6));font:600 11px/1.3 var(--mono)}
.cm-wmeta{display:flex;flex-direction:column;gap:10px;padding:14px 16px 6px;min-width:0}
.cm-wn{font-size:18px;line-height:1.25;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-wby{display:flex;align-items:center;gap:8px;min-width:0;font:500 13px/1.2 var(--mono);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-wby .cm-av{width:22px;height:22px;font-size:12px}
.cm-wst{display:flex;flex-wrap:wrap;gap:6px}
.cm-wst>span{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 9px;border-radius:999px;background:rgba(var(--tw),.06);border:1px solid rgba(var(--tw),.08);font:500 12px/1 var(--mono);color:var(--text-2)}
.cm-wst svg{color:var(--accent)}.cm-wst>span:first-child svg{color:rgb(236,0,140)}
.cm-wopen{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:12px 16px 16px;font:600 14px/1 var(--font);color:var(--accent)}
.cm-wopen svg{transition:transform .25s var(--ease,ease)}
.cm-wa:hover .cm-wopen svg{transform:translateX(4px)}
.cm-wmore .cm-wa{justify-content:stretch;min-height:240px;border-style:dashed}
.cm-wmore .cm-wimg{position:absolute;inset:0;aspect-ratio:auto}
.cm-wmore .cm-wimg img,.cm-wmore .cm-wgrad{filter:blur(14px) saturate(1.2) brightness(.7);transform:scale(1.2)}
.cm-wmorein{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:8px;flex:1;padding:24px;text-align:center;align-items:center;color:#fff}
.cm-wmorein b{font-size:clamp(28px,3vw,36px);letter-spacing:-.03em}
.cm-wmorein span{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.4 var(--font)}
.cm-wmore .cm-wa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5))}
.cm-cta-row{margin-top:32px;display:flex;justify-content:center}

/* ---------- leaderboard: podium + rows ---------- */
.cm-board .cm-wrap{position:relative}
.cm-pod{list-style:none;margin:0;padding:clamp(20px,4vw,40px) clamp(10px,3vw,32px) clamp(14px,3vw,24px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(8px,2vw,20px);row-gap:10px;border-radius:28px;border:1px solid rgba(var(--tw),.1);
  background:radial-gradient(60% 70% at 50% 0%,rgba(242,184,75,.12),transparent 70%),linear-gradient(180deg,rgba(var(--tw),.045),rgba(var(--tw),.015))}
.cm-pl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;text-align:center;gap:8px;grid-row:1}
.cm-p1{grid-column:2}.cm-p2{grid-column:1}.cm-p3{grid-column:3}
.cm-crown{display:block;color:rgb(var(--tp-warn));margin-bottom:-4px;filter:drop-shadow(0 0 12px rgba(var(--tp-warn),.7));transform-origin:50% 100%}
.cm-av-xl{width:clamp(52px,9vw,84px);height:clamp(52px,9vw,84px);font-size:clamp(22px,4vw,34px);box-shadow:0 0 0 3px var(--rc,rgba(var(--tw),.25)),0 14px 30px -12px var(--a)}
.cm-gold{--rc:rgb(var(--tp-warn));--pc1:#f7d08a;--pc2:#b9801f}.cm-silver{--rc:#c6ccd6;--pc1:#dfe3ea;--pc2:#8a93a3}.cm-bronze{--rc:#d98a56;--pc1:#f0b48a;--pc2:#9a5428}
.cm-p1 .cm-av-xl{width:clamp(64px,11vw,104px);height:clamp(64px,11vw,104px);font-size:clamp(26px,5vw,42px)}
.cm-ph{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 clamp(12px,1.6vw,15px)/1.2 var(--mono);color:var(--text)}
.cm-bdg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.cm-bdg li{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:rgba(var(--tp-warn),.14);border:1px solid rgba(var(--tp-warn),.4);font:600 12px/1.3 var(--mono);color:var(--text)}
.cm-bdg svg{color:rgb(var(--tp-warn));flex:none}
.cm-ps{font:600 clamp(12px,1.6vw,14px)/1 var(--mono);color:var(--text-2);font-variant-numeric:tabular-nums}
.cm-ps b{font-size:clamp(18px,3vw,28px);letter-spacing:-.02em;color:var(--text)}
.cm-pu{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.cm-ped{display:flex;align-items:flex-start;justify-content:center;width:100%;height:var(--ph,70px);margin-top:4px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,var(--pc1),var(--pc2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 30px -18px var(--pc2);transform-origin:50% 100%}
.cm-p1{--ph:clamp(88px,14vw,132px)}.cm-p2{--ph:clamp(64px,10vw,96px)}.cm-p3{--ph:clamp(48px,7.5vw,72px)}
.cm-rk{padding-top:8px;font:800 clamp(24px,4vw,40px)/1 var(--font);color:rgba(20,14,0,.78)}
.cm-row{grid-column:1/-1;display:grid;grid-template-columns:32px 32px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;border:1px solid rgba(var(--tw),.09);background:rgba(var(--tw),.03)}
.cm-row .cm-av{width:32px;height:32px}
.cm-pl+.cm-row,.cm-row:first-of-type{margin-top:18px}
.cm-rn{font:700 16px/1 var(--mono);color:var(--text-3);text-align:center}
.cm-rmain{display:flex;flex-direction:column;gap:8px;min-width:0}
.cm-rh{font:600 14px/1.2 var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-rbar{display:block;height:6px;border-radius:99px;background:rgba(var(--tw),.08);overflow:hidden}
.cm-rbar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,rgb(var(--glow)),rgb(var(--vio)));transform-origin:0 50%}
.cm-rsub{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--mono);color:var(--text-3)}
.cm-rsub svg{flex:none}.cm-rsub svg:first-of-type{color:rgb(236,0,140)}.cm-rsub svg:last-of-type{margin-left:6px;color:var(--accent)}
.cm-row .cm-ps{min-width:84px;text-align:right}
@media (max-width:640px){
  .cm-row{grid-template-columns:24px 32px minmax(0,1fr) auto;padding:10px 12px;gap:10px}.cm-rsub{display:none}
  .cm-bdg li:nth-child(n+2){display:none}.cm-bdg li{font-size:12px;padding:2px 6px}
  .cm-pod{border-radius:22px}
}

/* ---------- share ---------- */
.cm-sharein{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:900px){.cm-sharein{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.cm-link{margin:0}.cm-link a{color:var(--accent);text-underline-offset:3px}
.cm-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.cm-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:18px 20px;border-radius:18px;border:1px solid rgba(var(--tw),.1);background:rgba(var(--tw),.03)}
.cm-sn{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,rgb(var(--glow)),rgb(var(--vio)));color:#06070a;font:800 18px/1 var(--font)}
.cm-steps b{align-self:end;font-size:17px;color:var(--text)}.cm-steps li>span:last-child{align-self:start;font-size:15px;color:var(--text-2)}

/* ---------- help, ground rules, CTA ---------- */
.cm-help .tp-cards{margin:0;padding:0;list-style:none}
/* mobile audit 13.10: the help strip links were inline text 19px tall; flex row with 44px min hit area (padding, text size unchanged) */
.cm-help .tp-card{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:44px;padding-block:12px;color:var(--text);text-decoration:none}
.cm-help .tp-card b{display:inline-flex;align-items:center;gap:6px}
.cm-help .tp-card span{color:var(--text-2)}
.cm-quiet{padding-top:clamp(48px,6vw,72px)}
.cm-note{max-width:760px;font-size:14px;line-height:1.6;color:var(--text-2)}
.cm-note h2{margin:0 0 8px;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.cm-note p{margin:0}
.cm-last{padding-top:clamp(40px,5vw,64px);padding-bottom:96px}
.cm-last .tp-cta{margin-top:0;padding:clamp(28px,5vw,52px);text-align:center;background:radial-gradient(60% 100% at 50% 0%,rgba(236,0,140,.12),transparent 70%),radial-gradient(60% 100% at 0% 100%,rgba(var(--glow),.1),transparent 70%)}
.cm-last .tp-cta .tp-row{justify-content:center}

/* ---------- motion ---------- */
@keyframes cm-pulse{70%{box-shadow:0 0 0 9px rgba(236,0,140,0)}100%{box-shadow:0 0 0 0 rgba(236,0,140,0)}}
@keyframes cm-crown{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-3px)}}
@media (prefers-reduced-motion:no-preference){
  .cm-live i{animation:cm-pulse 2s infinite}
  .cm-crown{animation:cm-crown 3.2s ease-in-out infinite}
  .js .cm-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease,ease),transform .9s var(--ease,ease);transition-delay:var(--d,0s)}
  /* headings: exactly the home page's tabs-heading reveal (22px rise, .8s/.9s, IntersectionObserver at 40%, 40s no-JS-stall fallback hf-show from hf.css) */
  .js .cm-kick.cm-rv,.js .cm-h2.cm-rv,.js .cm-lede.cm-rv{transition-delay:0s}
  .js .cm-rv:not(.in){animation:hf-show 0s 40s forwards}
  .js .cm-rv.in{opacity:1;transform:none}
  .js .cm-pod .cm-ped{transform:scaleY(0);transition:transform .9s var(--ease,ease) calc(var(--d,0s) + .15s)}
  .js .cm-pod .cm-pl.in .cm-ped{transform:none}
  .js .cm-rbar i{transform:scaleX(0);transition:transform 1.1s var(--ease,ease) calc(var(--d,0s) + .2s)}
  .js .cm-row.in .cm-rbar i{transform:none}
}
@media (prefers-reduced-motion:reduce){.cm-wa,.cm-wimg img,.cm-wopen svg{transition:none}.cm-wa:hover,.cm-wa:focus-visible{transform:none}.cm-wa:hover .cm-wimg img{transform:none}}
@media (max-width:860px){.cm-canvas{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 90%);mask-image:linear-gradient(90deg,transparent,#000 90%)}.cm-hero{padding:40px 0 36px}}