/* Templates app page (landing/v2/templates), the <style> block of templates.html as is, then the inline styles of
   its markup as classes */

.hero-t{padding-top:32px}
/* On every other page the hero starts directly under the nav, so the hero's
   decorative wash (.hero::before, which begins 140px above the hero) shows
   through the glass header. Here the category bar sits in between and pushes
   the hero down by its own height, which left the header plain white while
   the rest of the site had colour behind it. Shift the wash up by that height
   — a constant 129px, since the bar scrolls sideways rather than wrapping —
   so the header lands on the same colours as everywhere else. */
.hero-t::before{inset:-269px 0 auto 0}
.human{border-radius:var(--r-lg);padding:64px 56px;color:#fff;background:radial-gradient(circle at 85% 15%,var(--sky) 0,transparent 45%),radial-gradient(circle at 5% 100%,var(--blue-dark) 0,transparent 45%),var(--blue)}
.human h2{color:#fff;font-size:40px}
.human .grid-3{margin-top:40px}
.human .feat{background:rgba(255,255,255,.12);border-radius:var(--r);padding:22px}
.human .feat h4{color:#fff;margin-bottom:12px;font-size:18px}
.human .feat .ph{min-height:130px;border-radius:var(--r-sm);background:rgba(255,255,255,.92)}
.howto .tool{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r);background:var(--bg-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s}
.howto .tool:hover{transform:translateY(-2px);box-shadow:var(--lift);background:#fff}
.howto .tool h4{font-size:20px}
.lang{display:flex;gap:10px;flex-wrap:wrap}
.lang span{padding:6px 12px;border-radius:var(--pill);background:var(--bg-soft);font-size:12px;font-weight:600;color:var(--ink-2)}
@media (max-width:960px){.human{padding:36px 24px}.human h2{font-size:30px}}

/* Inline styles of templates.html, as classes */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.copy-2{margin-top:56px;gap:40px}
.human .eyebrow{color:#fff;opacity:.9}
.human h2{margin-top:12px}
.howto .split{margin-bottom:48px}
.howto .split .btn-row{margin-top:24px}
.nowrap{white-space:nowrap}

/* Real covers where the static page drew placeholder slides and panels */
.human .feat .ph img,.release img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.release::after{display:none}
/* This week's release shows its whole cover: the frame takes the covers' 16:9 instead of the text column's height,
   and contain keeps a cover of another shape uncropped */
.release{aspect-ratio:16/9;min-height:0;align-self:center}
.release img{object-fit:contain}
.release .ph-label{position:absolute;left:18px;bottom:18px}


/* Hero slider of the old home page (landing/includes/hero), its main.css rules without Bootstrap. The cards fan out
   by data-pos, set in javascripts/v2/templates.js */
.showcase-wrap{margin:48px calc(-1 * var(--gutter)) 0;padding:24px 0 0;overflow:hidden;opacity:0;transform:translateY(12px);
  transition:opacity 1.44s cubic-bezier(.25,1,.5,1),transform 1.68s cubic-bezier(.25,1,.5,1)}
.showcase-wrap.ready{opacity:1;transform:translateY(0)}
.showcase-track{display:flex;align-items:center;justify-content:center;position:relative;height:clamp(280px,45vw,560px);perspective:1400px}
.showcase-card{position:absolute;width:clamp(240px,46vw,700px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.12);
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .65s cubic-bezier(.16,1,.3,1),filter .65s cubic-bezier(.16,1,.3,1),box-shadow .65s ease;
  cursor:pointer;will-change:transform,opacity,filter;text-align:left;background:var(--bg-soft)}
.showcase-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase-card .sc-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.6) 100%)}
.showcase-card .sc-count{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 12px;border-radius:8px}
.showcase-card .sc-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px 24px}
.showcase-card .sc-available{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.showcase-card[data-pos="center"] .sc-available{opacity:1;transform:translateY(0);pointer-events:auto}
.showcase-card .software-icon{width:42px;height:42px;flex:none}
.showcase-card .sc-title{display:block;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.25;color:#fff;letter-spacing:-.01em}
.showcase-card[data-pos="center"]{z-index:9;transform:translateX(0) scale(1) rotateY(0);opacity:1;filter:brightness(1);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.showcase-card[data-pos="left-1"]{z-index:7;transform:translateX(-18vw) scale(.75) rotateY(5deg);opacity:.8;filter:brightness(.85)}
.showcase-card[data-pos="right-1"]{z-index:7;transform:translateX(18vw) scale(.75) rotateY(-5deg);opacity:.8;filter:brightness(.85)}
.showcase-card[data-pos="left-2"]{z-index:5;transform:translateX(-28vw) scale(.55) rotateY(8deg);opacity:.6;filter:brightness(.74)}
.showcase-card[data-pos="right-2"]{z-index:5;transform:translateX(28vw) scale(.55) rotateY(-8deg);opacity:.6;filter:brightness(.74)}
.showcase-card[data-pos="left-3"]{z-index:3;transform:translateX(-34vw) scale(.42) rotateY(10deg);opacity:.4;filter:brightness(.66)}
.showcase-card[data-pos="right-3"]{z-index:3;transform:translateX(34vw) scale(.42) rotateY(-10deg);opacity:.4;filter:brightness(.66)}
.showcase-card[data-pos="left-4"]{z-index:1;transform:translateX(-38vw) scale(.35) rotateY(12deg);opacity:.25;filter:brightness(.58)}
.showcase-card[data-pos="right-4"]{z-index:1;transform:translateX(38vw) scale(.35) rotateY(-12deg);opacity:.25;filter:brightness(.58)}
.showcase-card[data-pos="hidden"]{z-index:0;transform:translateX(0) scale(.3);opacity:0;pointer-events:none}
.showcase-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 24px}
.showcase-nav p{margin:0;min-width:140px;text-align:center;font-size:14px;color:var(--ink-2)}
.showcase-nav button{width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--border);
  display:grid;place-items:center;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.showcase-nav button:hover{background:var(--bg-soft)}
.showcase-nav button:active{transform:scale(.94)}
.showcase-nav svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:991.97px){.showcase-card .software-icon{width:28px;height:28px}.showcase-card .sc-available{gap:8px;margin-bottom:10px}.showcase-card .sc-title{font-size:17px}}
@media (max-width:575.97px){.showcase-wrap{margin-top:32px;padding-top:8px}.showcase-track{height:200px}.showcase-card{width:72vw}.showcase-card .sc-info{padding:14px 16px 16px}.showcase-card .sc-title{font-size:15px}.showcase-card .sc-count{top:12px;right:12px}}

/* The tools of the centred template under the slider, one ticker per template, shown one at a time */
.hero-tools-tickers-wrap{margin:0 calc(-1 * var(--gutter));padding:0 0 16px}
.hero-tools-ticker{width:100%;overflow:hidden}
.hero-tools-ticker[hidden]{display:none}
.hero-marquee{position:relative;width:100%;overflow:hidden}
.hero-marquee .marquee-list{gap:20px}
.hero-tool-slide{width:300px;aspect-ratio:16/10;border-radius:14px;background:var(--bg-soft);box-shadow:0 0 0 1px var(--border)}
.hero-tool-slide img{width:100%;height:100%;object-fit:cover}
@media (max-width:767.97px){.hero-marquee .marquee-list{gap:12px}.hero-tool-slide{width:220px;border-radius:10px}}

/* Something for everyone, the old home page's category marquees (common/includes/categoryMarquee), full bleed */
.marquee-group{display:flex;flex-direction:column;gap:20px;margin:0 calc(-1 * var(--gutter))}
.marquee{position:relative;width:100%;overflow:hidden}
.marquee-list{display:flex;gap:20px;transform:translateX(0);will-change:transform;backface-visibility:hidden}
.marquee-list.clone{position:absolute;top:0;left:0}
.marquee-slide{flex-shrink:0;overflow:hidden}
.cat-slide{width:420px;aspect-ratio:16/9;border-radius:20px;padding:32px;display:flex;flex-direction:column;color:#fff;user-select:none}
.cat-slide .cat-name{font-family:var(--font-head);font-weight:800;font-size:42px;line-height:1.1;letter-spacing:-.02em;text-transform:capitalize}
.cat-slide .cat-meta{font-size:20px;margin-top:8px}
@media (max-width:991.97px){.marquee-group,.marquee-list{gap:16px}.cat-slide{width:320px;border-radius:16px;padding:24px}.cat-slide .cat-name{font-size:32px}.cat-slide .cat-meta{font-size:18px}}
@media (max-width:575.97px){.marquee-group,.marquee-list{gap:14px}.cat-slide{width:240px;border-radius:14px;padding:20px}.cat-slide .cat-name{font-size:24px}.cat-slide .cat-meta{font-size:16px;margin-top:4px}}

/* Latest templates, the old home page's showcase marquees (common/includes/entryShowcaseMarquee): the cover full bleed,
   its formats and title over a bottom shade */
.entry-slide{position:relative;width:420px;aspect-ratio:16/9;border-radius:20px;background:var(--ink);user-select:none}
.entry-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entry-slide .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.65) 100%)}
.entry-slide .content{position:absolute;left:0;right:0;bottom:0;padding:20px 24px 24px;color:#fff}
.entry-slide .software-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.entry-slide .software-icon{width:32px;height:32px;flex:none}
.entry-slide .entry-title{display:block;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.01em}
@media (max-width:991.97px){.entry-slide{width:320px;border-radius:16px}.entry-slide .content{padding:16px 18px 18px}.entry-slide .software-icon{width:28px;height:28px}.entry-slide .software-list{gap:6px;margin-bottom:10px}.entry-slide .entry-title{font-size:18px}}
@media (max-width:575.97px){.entry-slide{width:240px;border-radius:14px}.entry-slide .content{padding:12px 14px 14px}.entry-slide .software-icon{width:22px;height:22px}.entry-slide .software-list{gap:4px;margin-bottom:6px}.entry-slide .entry-title{font-size:15px}}

/* Gradients of the category slides, main.css's as is, EntryCategoryLocalUtils.getGradientCssSrcByIndex picks them */
.gradient-blue {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 40% 91%, rgba(82, 108, 159, 0.9) 0%, rgba(82, 108, 159, 0) 76%),
    radial-gradient(circle at 8% 65%, rgba(76, 145, 188, 0.9) 0%, rgba(76, 145, 188, 0) 55%),
    radial-gradient(circle at 15% 3%, rgba(85, 180, 211, 0.9) 0%, rgba(85, 180, 211, 0) 55%),
    radial-gradient(circle at 80% 35%, rgba(126, 192, 232, 0.8) 0%, rgba(126, 192, 232, 0) 70%),
    radial-gradient(circle at 95% 100%, rgba(252, 253, 254, 0.85) 0%, rgba(252, 253, 254, 0) 50%),
    #bcdcf0;
}

.gradient-light-blue {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 52% 57%, rgba(98, 150, 193, 0.9) 0%, rgba(98, 150, 193, 0) 42%),
    radial-gradient(circle at 69% 100%, rgba(82, 108, 159, 0.9) 0%, rgba(82, 108, 159, 0) 76%),
    radial-gradient(circle at 0% 73%, rgba(76, 145, 188, 0.9) 0%, rgba(76, 145, 188, 0) 55%),
    radial-gradient(circle at 15% 3%, rgba(85, 180, 211, 0.9) 0%, rgba(85, 180, 211, 0) 55%),
    radial-gradient(circle at 80% 35%, rgba(126, 192, 232, 0.8) 0%, rgba(126, 192, 232, 0) 70%),
    radial-gradient(circle at 100% 67%, rgba(252, 253, 254, 0.85) 0%, rgba(252, 253, 254, 0) 50%),
    #bcdcf0;
}

.gradient-pink {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 19% 30%, rgba(245, 92, 124, 0.9) 0%, rgba(245, 92, 124, 0) 55%),
    radial-gradient(circle at 55% 22%, rgba(216, 88, 124, 0.75) 0%, rgba(216, 88, 124, 0) 65%),
    radial-gradient(circle at 62% 94%, rgba(255, 226, 214, 0.26) 0%, rgba(255, 226, 214, 0) 94%),
    #e8a4b4;
}

.gradient-dark {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 19% 17%, rgba(45, 64, 78, 0.69) 0%, rgba(45, 64, 78, 0) 55%),
    radial-gradient(circle at 65% 38%, rgba(90, 122, 138, 0.7) 0%, rgba(90, 122, 138, 0) 65%),
    radial-gradient(circle at 95% 95%, rgba(168, 184, 196, 0.75) 0%, rgba(168, 184, 196, 0) 50%),
    #445566;
}

.gradient-green {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 37% 34%, rgba(45, 120, 76, 0.9) 0%, rgba(45, 120, 76, 0) 87%),
    radial-gradient(circle at 37% 98%, rgba(135, 179, 94, 0.9) 0%, rgba(135, 179, 94, 0) 55%),
    radial-gradient(circle at 31% 0%, rgba(102, 156, 53, 0.9) 0%, rgba(102, 156, 53, 0) 167%),
    radial-gradient(circle at 89% 18%, rgba(58, 138, 63, 0.6) 0%, rgba(58, 138, 63, 0) 65%),
    radial-gradient(circle at 3% 69%, rgba(168, 201, 58, 0.9) 0%, rgba(168, 201, 58, 0) 60%),
    radial-gradient(circle at 95% 95%, rgba(251, 234, 163, 0.9) 0%, rgba(251, 234, 163, 0) 50%),
    #cfdc73;
}

.gradient-light-green {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 7% 18%, rgba(79, 122, 40, 0.51) 0%, rgba(79, 122, 40, 0) 60%),
    radial-gradient(circle at 56% 17%, rgba(58, 138, 63, 0.44) 0%, rgba(58, 138, 63, 0) 65%),
    radial-gradient(circle at 29% 88%, rgba(168, 201, 58, 0.9) 0%, rgba(168, 201, 58, 0) 60%),
    radial-gradient(circle at 95% 95%, rgba(251, 234, 163, 0.9) 0%, rgba(251, 234, 163, 0) 50%),
    #cfdc73;
}


.gradient-yellow {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 47% 20%, rgba(241, 185, 84, 0.9) 0%, rgba(241, 185, 84, 0) 55%),
    radial-gradient(circle at 16% 27%, rgba(246, 163, 84, 0.8) 0%, rgba(246, 163, 84, 0) 70%),
    radial-gradient(circle at 100% 80%, rgba(252, 239, 176, 0.9) 0%, rgba(252, 239, 176, 0) 55%),
    #f4d56a;
}

.gradient-orange {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.500'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.000'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 97% 36%, rgba(214, 81, 59, 0.9) 0%, rgba(214, 81, 59, 0) 65%),
    radial-gradient(circle at 19% 52%, rgba(227, 50, 0, 0.9) 0%, rgba(227, 50, 0, 0) 55%),
    radial-gradient(circle at 62% 73%, rgba(216, 84, 60, 0.72) 0%, rgba(216, 84, 60, 0) 76%),
    radial-gradient(circle at 1% 94%, rgba(227, 36, 0, 0.29) 0%, rgba(227, 36, 0, 0) 55%),
    radial-gradient(circle at 78% 11%, rgba(242, 17, 19, 0.77) 0%, rgba(242, 17, 19, 0) 55%),
    radial-gradient(circle at 81% 94%, rgba(245, 203, 139, 0.9) 0%, rgba(245, 203, 139, 0) 142%),
    #ea7560;
}

.gradient-mongo {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 89% 14%, rgba(229, 124, 57, 0.9) 0%, rgba(229, 124, 57, 0) 55%),
    radial-gradient(circle at 79% 96%, rgba(255, 209, 102, 0.63) 0%, rgba(255, 209, 102, 0) 68%),
    radial-gradient(circle at 1% 94%, rgba(255, 170, 0, 0.29) 0%, rgba(255, 170, 0, 0) 55%),
    radial-gradient(circle at 0% 10%, rgba(232, 144, 88, 0.7) 0%, rgba(232, 144, 88, 0) 55%),
    radial-gradient(circle at 100% 95%, rgba(252, 224, 204, 0.9) 0%, rgba(252, 224, 204, 0) 60%),
    #ea7560;
}

.gradient-purple {
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.320'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.150'%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 0% 68%, rgba(69, 14, 89, 0.49) 0%, rgba(69, 14, 89, 0) 55%),
    radial-gradient(circle at 94% 71%, rgba(74, 62, 125, 0.9) 0%, rgba(74, 62, 125, 0) 55%),
    radial-gradient(circle at 11% 4%, rgba(97, 23, 124, 0.9) 0%, rgba(97, 23, 124, 0) 55%),
    radial-gradient(circle at 77% 91%, rgba(199, 152, 188, 0.9) 0%, rgba(199, 152, 188, 0) 55%),
    radial-gradient(circle at 69% 19%, rgba(92, 45, 138, 0.55) 0%, rgba(92, 45, 138, 0) 70%),
    radial-gradient(circle at 55% 95%, rgba(240, 216, 232, 0.35) 0%, rgba(240, 216, 232, 0) 60%),
    #7350b8;
}