/* /community/workspaces/ (generated by tools/make-pages.mjs + src/community-hub.mjs). Loaded after pages.css and community-page.css (hero canvas, kicker/heading reveal).
   Large 3D workspace cards: full-screen (16:9) screenshot, pointer tilt + parallax + glare (src/community.js), branded placeholder while https://cdn.tabmydata.com/public/site/img/workspaces/ws-0N.webp is missing. Tokens only. */
.ch{gap:clamp(56px,8vw,96px)}
.ch .cm-h2{margin:0 0 14px;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em}
.ch .cm-h2-s{font-size:clamp(22px,2.4vw,28px)}
.ch .ch-sech{margin-bottom:0}
.ch .ch-sech .cm-h2{margin-bottom:14px}
.ch .cm-lede.ch-lede{margin:0 0 28px;max-width:62ch;font-size:clamp(17px,1.6vw,19px);line-height:1.65}
.ch .cm-kick{margin-bottom:12px}
.ch-share .cm-h2{margin-bottom:12px}
.tp-hub-wrap{padding-top:clamp(32px,5vw,56px)}
.ws-hero .cm-live i{background:rgb(var(--glow));box-shadow:0 0 0 0 rgba(var(--glow),.6)}

/* ---------- grid: big cards, first one featured ---------- */
.ch-grid{gap:clamp(28px,4vw,48px) clamp(20px,3vw,36px)}
@media (min-width:1100px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ch-card:first-child:not([hidden]){grid-column:1/-1}}
.ch-card .ch-rv{perspective:1100px}
.ch-art{border-radius:24px;--rx:0deg;--ry:0deg;--px:0;--py:0;--mx:50%;--my:30%;will-change:transform;transform-style:flat}
.ch-art::before{border-radius:26px}
.ch-media{aspect-ratio:16/9;border-radius:23px 23px 0 0}
.ch-card:first-child .ch-media{aspect-ratio:21/9}
@media (max-width:699px){.ch-card:first-child .ch-media{aspect-ratio:16/9}}
.ch-media img{object-fit:cover;transform:scale(1.04) translate3d(calc(var(--px)*-8px),calc(var(--py)*-6px),0)}
.ch-art:hover .ch-media img,.ch-art:focus-within .ch-media img{transform:scale(1.08) translate3d(calc(var(--px)*-12px),calc(var(--py)*-9px),0)}
.ch-glass{margin:-36px 12px 12px;padding:18px 20px;transform:translate3d(calc(var(--px)*5px),calc(var(--py)*4px),0);transition:transform .45s var(--ease)}
.ch-art.is-live .ch-glass{transition:transform .12s linear}
.ch-glass h3{font-size:clamp(19px,1.8vw,22px)}

/* pointer-following light: a soft white glare over the screenshot + a faint violet/green rim */
.ch-glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.26),rgba(255,255,255,.07) 38%,transparent 65%);mix-blend-mode:soft-light}
.ch-art:hover .ch-glare,.ch-art.is-live .ch-glare{opacity:1}
.ch-art.is-live::after{opacity:1}
.ch-art::after{content:"";position:absolute;inset:-1px;z-index:5;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(var(--glow),.8),rgba(var(--vio),.45) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ch-art:hover::after{opacity:1}

/* ---------- placeholder (no screenshot yet): branded gradient + faux workspace ---------- */
.ch-ph{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;
  background:radial-gradient(70% 90% at 15% 10%,color-mix(in srgb,var(--ca,#3df29a) 30%,transparent),transparent 62%),radial-gradient(70% 90% at 90% 100%,color-mix(in srgb,var(--cb,#7c5cff) 34%,transparent),transparent 62%),linear-gradient(160deg,rgb(var(--k-0d1016)),rgb(var(--k-0a0c11)))}
.ch-ph::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--tw),.1) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.ch-phsvg{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translate3d(calc(var(--px)*-6px),calc(var(--py)*-4px),0) scale(1.03);transition:transform .5s var(--ease)}
.ch-art.is-live .ch-phsvg{transition:transform .12s linear}
.js .ch-media .ch-ph{opacity:1}

/* ---------- touch: subtle press; reduced motion: no tilt / parallax ---------- */
.ch-art.is-press{transform:scale(.985);transition:transform .15s var(--ease)}
@media (hover:none){.ch-glare{display:none}.ch-art::after{display:none}.ch-art:active{transform:scale(.985)}}
@media (prefers-reduced-motion:reduce){
  .ch-art,.ch-art.is-press,.ch-art:active{transform:none!important}
  .ch-media img,.ch-art:hover .ch-media img,.ch-art:focus-within .ch-media img{transform:none!important}
  .ch-glass,.ch-phsvg{transform:none!important;transition:none}
}
@media (prefers-reduced-motion:no-preference){
  .ch-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(var(--tw),.07) 50%,transparent 65%);transform:translateX(-100%);animation:ch-shim 4.5s ease-in-out infinite}
}
@media (max-width:420px){.ch-glass{margin:-28px 8px 8px;padding:14px}.ch-actions{flex-wrap:wrap}}

/* ---------- dismissible privacy note ---------- */
.ch-note{align-items:center}
.ch-note p{flex:1;min-width:0}
.ch-note-x{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}
.ch-note-x:hover{background:rgba(var(--tw),.08);color:var(--text)}
.ch-note-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- copy a workspace / copy one tab: looping CSS animation (decorative; runs only while on screen) ---------- */
.ch-copy{min-width:0}
.cw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px)}
@media (min-width:760px){.cw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cw-card{min-width:0;padding:clamp(14px,2vw,20px);border-radius:24px;border:1px solid rgba(var(--tw),.1);background:linear-gradient(180deg,rgba(var(--tw),.045),rgba(var(--tw),.015));box-shadow:0 30px 60px -44px rgba(var(--ts),var(--sa))}
.cw-card h3{margin:18px 0 6px;font-size:clamp(19px,2vw,22px);letter-spacing:-.015em;color:var(--text)}
.cw-card p{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.cw-stage{position:relative;container-type:inline-size;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:radial-gradient(70% 90% at 20% 10%,rgba(var(--glow),.12),transparent 65%),radial-gradient(70% 90% at 90% 100%,rgba(var(--vio),.16),transparent 65%),rgb(var(--k-0a0c11))}
.cw-stage::after{content:"\2192";position:absolute;left:46%;top:36%;width:8%;text-align:center;font:600 4.2cqw/1 var(--font);color:rgba(var(--tw),.4)}
.cw-win{position:absolute;top:7%;width:43%;height:68%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:5cqw 2.4cqw;padding:2cqw;border-radius:2cqw;border:1px solid rgba(var(--tw),.14);background:rgba(var(--tw),.04)}
.cw-src{left:2%}.cw-dst{left:55%}
.cw-bar{grid-column:1/-1;display:flex;align-items:center;gap:.9cqw;height:3.6cqw;margin:-.4cqw 0 -3cqw}
.cw-bar i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:rgba(var(--tw),.25)}
.cw-bar b{margin-left:1cqw;font:600 max(12px,2.3cqw)/1 var(--mono);letter-spacing:.04em;color:var(--text-3);white-space:nowrap}
.cw-pn,.cw-c,.cw-own{position:relative;display:block;min-width:0;border-radius:1.4cqw;border:1px solid rgba(var(--tw),.14);background:linear-gradient(150deg,rgba(var(--glow),.22),rgba(var(--vio),.2))}
.cw-pn::before,.cw-c::before,.cw-own::before{content:"";position:absolute;left:12%;right:12%;bottom:18%;height:34%;border-radius:2px;background:linear-gradient(100deg,transparent 0 6%,rgba(var(--tw),.5) 6% 8%,transparent 8% 100%),repeating-linear-gradient(90deg,rgba(var(--tw),.32) 0 9%,transparent 9% 18%);-webkit-mask:linear-gradient(0deg,#000 40%,transparent);mask:linear-gradient(0deg,#000 40%,transparent)}
.cw-pn::after,.cw-c::after,.cw-own::after{content:"";position:absolute;left:12%;top:16%;width:40%;height:7%;border-radius:99px;background:rgba(var(--tw),.4)}
.cw-pn2::before,.cw-pn3::before{height:46%}
.cw-sl{position:relative;display:block;min-width:0;border-radius:1.4cqw;border:1px dashed rgba(var(--tw),.2)}
.cw-own{opacity:.55;border-style:solid}
.cw-c{position:absolute;inset:-1px;opacity:0;transform:translateX(-53cqw);box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 3cqw rgba(var(--glow),.45)}
.cw-btn{position:absolute;left:2%;top:80%;display:inline-flex;align-items:center;gap:1.4cqw;height:11cqw;padding:0 3.4cqw;border-radius:2.2cqw;border:1px solid rgba(var(--glow),.55);background:rgba(var(--glow),.12);color:var(--text);font:600 max(12px,3cqw)/1 var(--font);white-space:nowrap}
.cw-btn svg{width:max(12px,3.2cqw);height:max(12px,3.2cqw);color:rgb(var(--glow))}
.cw-ok{position:absolute;right:3cqw;bottom:-9.5cqw;display:inline-flex;align-items:center;gap:1.2cqw;padding:1cqw 2.4cqw;border-radius:99px;background:rgba(var(--glow),.16);border:1px solid rgba(var(--glow),.5);color:rgb(var(--glow));font:600 max(12px,2.4cqw)/1 var(--mono);opacity:0;white-space:nowrap}
.cw-ok svg{width:max(9px,2.6cqw);height:max(9px,2.6cqw)}
.cw-pick{outline:0;box-shadow:0 0 0 1px rgba(var(--glow),.0)}
@keyframes cw-fly{0%,20%{opacity:0;transform:translateX(-53cqw) scale(.94)}26%{opacity:1;transform:translateX(-53cqw) scale(1)}46%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes cw-press{0%,16%,30%,100%{transform:none;box-shadow:none}22%{transform:scale(.93);box-shadow:0 0 0 .8cqw rgba(var(--glow),.25)}}
@keyframes cw-pick{0%,6%{box-shadow:0 0 0 0 rgba(var(--glow),0)}12%,42%{box-shadow:0 0 0 .5cqw rgba(var(--glow),.75),0 0 3cqw rgba(var(--glow),.5)}56%,100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
@keyframes cw-ok{0%,46%{opacity:0;transform:translateY(2cqw)}54%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .cw-c{animation:cw-fly 7s var(--ease,ease) infinite}
  .cw-all .cw-sl2 .cw-c{animation-delay:.12s}.cw-all .cw-sl3 .cw-c{animation-delay:.24s}.cw-all .cw-sl4 .cw-c{animation-delay:.36s}
  .cw-btn{animation:cw-press 7s ease-in-out infinite}
  .cw-one .cw-pick{animation:cw-pick 7s ease-in-out infinite}
  .cw-ok{animation:cw-ok 7s ease-out infinite}
  .js .cw:not(.is-vis) .cw-c,.js .cw:not(.is-vis) .cw-btn,.js .cw:not(.is-vis) .cw-pick,.js .cw:not(.is-vis) .cw-ok{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.cw-c{opacity:1;transform:none}.cw-ok{opacity:1}}

/* ---------- Good to know: accordion ---------- */
.ch-faqlist{gap:10px}
.ch-faqlist li{padding:0;border:1px solid rgba(var(--tw),.1);border-left:2px solid var(--accent);border-radius:0 14px 14px 0;background:rgba(var(--tw),.025)}
.ch-faqlist li.ch-faqnote{padding:16px}
.ch-faqlist summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;font-weight:600;color:var(--text)}
.ch-faqlist summary::-webkit-details-marker{display:none}
.ch-faqlist summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.ch-faqlist details[open] summary::after{transform:rotate(-135deg)}
.ch-faqlist summary:hover{color:var(--accent)}
.ch-faqlist summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0 12px 12px 0}
.ch-faqlist details p{margin:0;padding:0 18px 18px;max-width:68ch;font-size:16px;line-height:1.6;color:var(--text-2)}
.ch-faqlist details p b{color:var(--text);font-weight:600}
@media (prefers-reduced-motion:reduce){.ch-faqlist summary::after,.ch-note-x{transition:none}}