/* Neutral cards, with color reserved for the artwork and its hover response. */
.catalog-ready.example-cards{display:block;min-width:0;margin:3px -30px 0;overflow:hidden}
.catalog-ready .catalog-row{overflow-x:auto;overflow-y:hidden;max-width:100%;padding:12px 0;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:auto;touch-action:pan-x pan-y pinch-zoom;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.catalog-ready .catalog-row::-webkit-scrollbar{display:none}
.catalog-ready .catalog-track{display:flex;width:max-content}
.catalog-ready .catalog-row[data-dragging=true],.catalog-ready .catalog-row[data-dragging=true] *{cursor:grabbing;user-select:none}
.catalog-ready .catalog-group{display:flex;flex:none;gap:15px;padding-right:15px}
.catalog-ready .example-card{--catalog-rgb:255,195,42;position:relative;isolation:isolate;display:grid;grid-template-columns:53px minmax(0,1fr);grid-template-rows:1fr auto;gap:15px 17px;align-items:center;flex:0 0 var(--catalog-card-width,310px);width:var(--catalog-card-width,310px);min-height:149px;padding:21px 20px 17px;overflow:hidden;background:#111;border:1px solid #454545;border-radius:12px;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.catalog-ready .example-card::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.075) 45%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.catalog-ready .example-card:hover,.catalog-ready .example-card:focus-visible{transform:translateY(-6px);border-color:rgba(var(--catalog-rgb),.65);box-shadow:0 8px 25px rgba(0,0,0,.25),0 0 24px rgba(var(--catalog-rgb),.13);outline:0}
.catalog-ready .example-card:hover::after,.catalog-ready .example-card:focus-visible::after{animation:catalog-shine .8s ease-out both}
.catalog-ready .catalog-tone-gold{--catalog-rgb:255,195,42}
.catalog-ready .catalog-tone-blue{--catalog-rgb:92,159,255}
.catalog-ready .catalog-tone-coral{--catalog-rgb:247,126,108}
.catalog-ready .catalog-tone-violet{--catalog-rgb:183,146,255}
.catalog-ready .catalog-tone-cyan{--catalog-rgb:82,199,221}
.catalog-ready .catalog-icon{display:grid;place-items:center;align-self:center;width:53px;height:57px;border:1px solid rgba(var(--catalog-rgb),.45);border-radius:12px;background:linear-gradient(145deg,rgba(var(--catalog-rgb),.25),rgba(var(--catalog-rgb),.09));color:rgb(var(--catalog-rgb));box-shadow:inset 0 0 0 3px rgba(var(--catalog-rgb),.08);transition:box-shadow .3s,transform .3s}
.catalog-ready .catalog-icon svg{width:36px;height:36px;stroke-width:1.9;overflow:visible}
.catalog-ready .example-card:hover .catalog-icon,.catalog-ready .example-card:focus-visible .catalog-icon{box-shadow:inset 0 0 0 3px rgba(var(--catalog-rgb),.14),0 0 22px rgba(var(--catalog-rgb),.25);transform:rotate(-4deg) scale(1.05)}
.catalog-ready .catalog-copy{min-width:0}
.catalog-ready .example-kind{display:block;color:#aaa;font-size:8px;letter-spacing:.12em}
.catalog-ready .example-card h4{min-height:0;grid-column:auto;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.025em;margin:7px 0 0;color:#f1f1f1}
.catalog-ready .catalog-card-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.catalog-ready .catalog-format{display:block;max-width:205px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:5px 9px;border-radius:5px;font-size:9px;line-height:1.3;color:#bdbdbd;background:#292929}
.catalog-ready .example-card .example-label{grid-column:auto;margin:0;color:#8f8f8f;font-size:8px;white-space:nowrap}
.catalog-ready .glyph-cell,.catalog-ready .glyph-dot{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center}
.catalog-ready .glyph-node,.catalog-ready .glyph-layer{fill:#151515;transform-origin:20px 20px}
.catalog-ready .glyph-detail-1{--glyph-delay:0s}.catalog-ready .glyph-detail-2{--glyph-delay:.12s}.catalog-ready .glyph-detail-3{--glyph-delay:.24s}.catalog-ready .glyph-detail-4{--glyph-delay:.36s}
.catalog-ready .example-card:is(:hover,:focus-visible) .catalog-icon-document .glyph-detail{stroke-dasharray:1;animation:catalog-write 1.5s ease-in-out var(--glyph-delay) infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-cell{animation:catalog-cell 1.3s ease-in-out var(--glyph-delay) infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-layer-1{animation:catalog-layer-top 1.4s ease-in-out infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-layer-3{animation:catalog-layer-bottom 1.4s ease-in-out infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-dot{animation:catalog-chat 1.1s ease-in-out var(--glyph-delay) infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-node{animation:catalog-node 1.5s ease-in-out var(--glyph-delay) infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-route{stroke-dasharray:1;animation:catalog-write 1.5s ease-in-out infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-bracket-left{animation:catalog-code-left 1.3s ease-in-out infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-bracket-right{animation:catalog-code-right 1.3s ease-in-out infinite}
.catalog-ready .example-card:is(:hover,:focus-visible) .glyph-slash{animation:catalog-node 1.3s ease-in-out infinite}
.catalog-ready[data-suspended=true] .catalog-icon *,.catalog-ready[data-suspended=true] .example-card::after{animation-play-state:paused}
.catalog-ready[data-reduced=true] .catalog-duplicate{display:none}
.catalog-ready[data-reduced=true] .catalog-row{mask-image:none;-webkit-mask-image:none;padding-inline:30px;scrollbar-width:thin;scrollbar-color:#626262 transparent}
.catalog-ready[data-reduced=true] .example-card:hover,.catalog-ready[data-reduced=true] .example-card:focus-visible{transform:none}
@keyframes catalog-shine{to{transform:translateX(130%)}}
@keyframes catalog-write{0%,10%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes catalog-cell{0%,100%{opacity:.35;transform:scale(.75)}40%{opacity:1;transform:scale(1.4)}}
@keyframes catalog-layer-top{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes catalog-layer-bottom{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes catalog-chat{0%,65%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes catalog-node{0%,100%{opacity:.5}45%{opacity:1}}
@keyframes catalog-code-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes catalog-code-right{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(max-width:1100px){.catalog-ready.example-cards{margin-inline:-24px}.catalog-ready[data-reduced=true] .catalog-row{padding-inline:24px}}
@media(max-width:800px){.catalog-ready.example-cards{margin-inline:-28px}.catalog-ready[data-reduced=true] .catalog-row{padding-inline:28px}}
@media(max-width:620px){.catalog-ready.example-cards{margin-inline:-18px}.catalog-ready .catalog-row{padding-block:9px}.catalog-ready .catalog-group{gap:11px;padding-right:11px}.catalog-ready .example-card{min-height:132px;grid-template-columns:43px minmax(0,1fr);gap:14px 13px;padding:17px 16px 14px;border-radius:10px}.catalog-ready .catalog-icon{width:43px;height:48px;border-radius:10px}.catalog-ready .catalog-icon svg{width:30px;height:30px}.catalog-ready .example-card h4{font-size:14px;margin-top:5px}.catalog-ready .example-kind{font-size:7px}.catalog-ready .catalog-format{font-size:8px;max-width:170px}.catalog-ready .example-card .example-label{font-size:7px}.catalog-ready[data-reduced=true] .catalog-row{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.catalog-ready .catalog-duplicate{display:none}.catalog-ready .catalog-row{mask-image:none;-webkit-mask-image:none}.catalog-ready .example-card:hover,.catalog-ready .example-card:focus-visible{transform:none}.catalog-ready .catalog-icon{transform:none!important}}