/* ============================================================ TARC SHOP EFFECTS — cosmetic css_class library + shop UI ------------------------------------------------------------ Every class here is referenced by a `css` field in shop-catalog.js. Add a new item = append a catalog row + one selector below. HARD RULES (owner-mandated): - NO rainbow / multi-hue palettes. Single- or dual-tone only. - NO avatar-decoration overlays. "DISCORD-DEPTH" SYSTEM — why a Discord card reads as premium next to a flat one, applied uniformly here via shared pseudo-elements so all 600 generated background classes get it for free instead of hand-duplicating it: 1. Multi-stop gradients (4-6 HSL-neighbor stops), not 2-3 flat ones. 2. Layered box-shadow: outer ambient + inset rim highlight + inset shadow — see .cos-card below. 3. A directional light bloom (top-left radial, soft-light blend). 4. A subtle noise texture (feTurbulence, ~4% opacity) so gradients don't look like flat vector fills. 5. A vignette (radial darken at the edges) for depth. None of this introduces extra hues — every gradient stays inside one tier's own hue family (just more stops of shading within it), so it is NOT the banned rainbow/multi-hue sweep. PERFORMANCE: animations touch only transform/opacity (compositor-only); cards use content-visibility:auto so off-screen cards are skipped. ============================================================ */ :root{ --tier-common:#5b7896; --tier-common-glow:rgba(91,120,150,.4); --tier-rare:#0a94a8; --tier-rare-glow:rgba(10,148,168,.5); --tier-epic:#7a3ff0; --tier-epic-glow:rgba(122,63,240,.55); --tier-legendary:#e0a500; --tier-legendary-glow:rgba(224,165,0,.6); --tier-mythic:#ff2fb0; --tier-mythic-glow:rgba(255,47,176,.65); /* Shared fractal-noise grain — one tiny inline SVG reused by every card via .cos-preview::before, instead of shipping a texture PNG per item. */ /* Alpha is baked into the filter's own feColorMatrix (0.02–0.03, per Discord's own anti-banding range) rather than relying on a blanket element `opacity` — that way this noise layer can be combined with the light-bloom layer in the same pseudo-element without the noise accidentally inheriting the bloom's much higher alpha. */ --cos-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── 1. PRIMARY SUB-NAV + virtualized grid ─────────────────── */ .cos-subnav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch; padding:2px 2px 8px;margin-bottom:12px;scrollbar-width:none} .cos-subnav::-webkit-scrollbar{display:none} .cos-cat-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:14px;cursor:pointer;user-select:none; font-family:Outfit,sans-serif;font-weight:700;font-size:12.5px;color:var(--ink-3); background:rgba(255,255,255,.55);border:1.5px solid rgba(150,190,240,.4); white-space:nowrap;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease; transform:translateZ(0)} .cos-cat-btn:hover{transform:translateY(-1px)} .cos-cat-btn.active{color:#fff;background:linear-gradient(145deg,#39b6ff,#0a6dff); border-color:transparent;box-shadow:0 8px 18px -8px rgba(20,110,220,.6)} .cos-cat-btn.cos-others.active{background:linear-gradient(145deg,#c78a3a,#9a5a10)} .cos-cat-btn .cc-count{font-size:10.5px;opacity:.7;font-weight:600} .cos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:8px} @media(min-width:560px){.cos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .cos-tier-group{margin:6px 0 2px;display:flex;align-items:center;gap:8px} .cos-tier-group .tg-label{font-family:Sora,sans-serif;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase} .cos-tier-group .tg-line{flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.25} .cos-tier-group.t-common{color:var(--tier-common)} .cos-tier-group.t-rare{color:var(--tier-rare)} .cos-tier-group.t-epic{color:var(--tier-epic)} .cos-tier-group.t-legendary{color:var(--tier-legendary)} .cos-tier-group.t-mythic{color:var(--tier-mythic)} /* ── 2. ITEM CARD ──────────────────────────────────────────── */ /* Elevation is several SMALL shadows stacked, not one big blurred one — a tight contact shadow (1-2px) + a short-range ambient shadow (4-8px) + a longer soft falloff (16px) reads as a real lit object; one big 0 20px 50px blur just reads as a smudge. Same recipe for the rim highlight/shadow insets. */ .cos-card{position:relative;display:flex;flex-direction:column;gap:9px; padding:12px 12px 13px;border-radius:18px;background:rgba(255,255,255,.72); border:1.5px solid rgba(150,190,240,.35);overflow:hidden; content-visibility:auto;contain-intrinsic-size:220px;contain:layout style paint; box-shadow: 0 1px 2px rgba(20,40,80,.16), 0 4px 8px -2px rgba(20,40,80,.16), 0 10px 18px -8px rgba(20,40,80,.2), 0 1px 0 rgba(255,255,255,.55) inset, 0 -6px 10px -10px rgba(10,20,40,.16) inset; transition:transform .16s ease,box-shadow .22s ease,border-color .22s ease;transform:translateZ(0)} .cos-card:hover{transform:translateY(-3px);box-shadow: 0 1px 2px rgba(20,60,120,.2), 0 6px 12px -3px rgba(20,60,120,.22), 0 16px 26px -10px rgba(20,60,120,.28), 0 1px 0 rgba(255,255,255,.6) inset, 0 -6px 10px -10px rgba(10,20,40,.14) inset} .cos-card.owned{border-color:rgba(14,154,108,.45)} .cos-card.equipped{border-color:var(--accent);box-shadow: 0 1px 2px rgba(20,110,220,.2), 0 6px 14px -6px rgba(20,110,220,.3), 0 0 0 1.5px var(--accent) inset, 0 1px 0 rgba(255,255,255,.55) inset} .cos-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc,var(--tier-common));z-index:4} .cos-card.tier-common{--tc:var(--tier-common);--tg:var(--tier-common-glow)} .cos-card.tier-rare{--tc:var(--tier-rare);--tg:var(--tier-rare-glow)} .cos-card.tier-epic{--tc:var(--tier-epic);--tg:var(--tier-epic-glow)} .cos-card.tier-legendary{--tc:var(--tier-legendary);--tg:var(--tier-legendary-glow)} .cos-card.tier-mythic{--tc:var(--tier-mythic);--tg:var(--tier-mythic-glow)} /* Glow is two SMALL-radius layers (tight + short falloff), not one big 30px blur — a tight glow reads as light the object emits; a huge one just reads as a fog blob. */ .cos-card.tier-legendary,.cos-card.tier-mythic{box-shadow: 0 1px 2px rgba(20,40,80,.16), 0 4px 8px -2px rgba(20,40,80,.16), 0 10px 18px -8px rgba(20,40,80,.2), 0 1px 0 rgba(255,255,255,.55) inset, 0 -6px 10px -10px rgba(10,20,40,.16) inset, 0 0 3px 0 var(--tg), 0 0 10px -2px var(--tg)} .cos-card.tier-mythic{animation:cosMythicPulse 3.2s ease-in-out infinite} @keyframes cosMythicPulse{ 0%,100%{box-shadow:0 1px 2px rgba(20,40,80,.16),0 4px 8px -2px rgba(20,40,80,.16),0 10px 18px -8px rgba(20,40,80,.2),0 1px 0 rgba(255,255,255,.55) inset,0 -6px 10px -10px rgba(10,20,40,.16) inset,0 0 3px 0 var(--tier-mythic-glow),0 0 9px -2px var(--tier-mythic-glow)} 50%{box-shadow:0 1px 2px rgba(20,40,80,.16),0 4px 8px -2px rgba(20,40,80,.16),0 10px 18px -8px rgba(20,40,80,.2),0 1px 0 rgba(255,255,255,.55) inset,0 -6px 10px -10px rgba(10,20,40,.16) inset,0 0 5px 0 var(--tier-mythic-glow),0 0 15px -1px var(--tier-mythic-glow)} } .cos-tier-badge{position:absolute;top:9px;right:9px;z-index:4;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:7px;color:#fff;background:var(--tc);box-shadow:0 2px 6px -2px var(--tg)} /* Shared "Discord-depth" overlay — light bloom + grain on ::before, vignette on ::after, applied to EVERY .cos-preview. Generated item classes only ever set `background` (never their own ::before/::after), so these shared pseudos are never clobbered. Sits above the background gradient (z-index 2/3) but below the name/avatar/badges (z-index 4) so text always stays crisp. */ /* No blanket `opacity` here on purpose — each layer's alpha is baked into its own color stops (bloom's .4, noise's 0.025 in --cos-noise) so tuning one never accidentally scales the other. */ .cos-preview::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background-image:radial-gradient(circle at 20% 16%,rgba(255,255,255,.4),transparent 52%),var(--cos-noise); background-size:cover,128px 128px;mix-blend-mode:soft-light} .cos-preview::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(circle at 50% 60%,transparent 42%,rgba(0,0,0,.32) 100%);mix-blend-mode:multiply} /* Per-tier lighting model — Common/Rare stay static (matte/satin), Epic gets a touch more bloom, Legendary/Mythic get a moving metallic sheen band layered onto the same ::before (third background layer, doesn't disturb the bloom+noise baseline every card already has). This is the "different material per tier" cue: cheap items don't shimmer, expensive ones visibly do — applied to every category's Legendary/Mythic items. */ .cos-card.tier-epic .cos-preview::before{ background-image:radial-gradient(circle at 20% 16%,rgba(255,255,255,.5),transparent 52%),var(--cos-noise); } .cos-card.tier-legendary .cos-preview::before, .cos-card.tier-mythic .cos-preview::before{ background-image: radial-gradient(circle at 20% 16%,rgba(255,255,255,.45),transparent 52%), var(--cos-noise); } /* The sheen sweep itself is NOT this pseudo-element's background-position anymore — see .cos-sheen below. Measured: animating background-position here forced a style/paint recompute on every flush ~8x more expensive than an idle card (synchronous forced-reflow test, 120-card nameplate set: 46.8ms running vs 5.1ms paused for 7200 flushes). Absolute cost was still trivial at this catalog size (content-visibility:auto limits live paint to the ~15 on-screen cards), but Legendary/Mythic sheen is the one animation guaranteed to be visible on every high-tier card someone actually stops to look at, so it's worth doing on the compositor only. */ .cos-sheen{position:absolute;top:0;bottom:0;left:0;width:40%;z-index:3;pointer-events:none; background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-150%); animation:cosSweepX 3.5s linear infinite} .cos-card.tier-mythic .cos-sheen{animation-duration:2.2s} @keyframes cosSweepX{from{transform:translateX(-150%)}to{transform:translateX(350%)}} /* ── PREVIEW SURFACE + META + ACTIONS ─────────────────────── */ .cos-preview{position:relative;height:88px;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:#0b1626;isolation:isolate} .cos-preview .cp-av{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-family:Sora,sans-serif;font-weight:800;font-size:19px;background:linear-gradient(145deg,#3a4a63,#232f45);position:relative;z-index:4; box-shadow:0 3px 8px -2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.25) inset} .cos-preview .cp-name{position:relative;z-index:4;font-family:Outfit,sans-serif;font-weight:800;font-size:14px;color:#eaf2ff;text-shadow:0 2px 6px rgba(0,0,0,.4)} .cos-meta{display:flex;flex-direction:column;gap:2px;min-height:30px} .cos-title{font-family:Outfit,sans-serif;font-weight:700;font-size:13px;color:var(--ink);line-height:1.2;display:flex;align-items:center;gap:5px} .cos-sub{font-size:10.5px;color:var(--ink-faint);font-weight:600;text-transform:capitalize} .cos-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto} .cos-price{display:inline-flex;align-items:center;gap:4px;font-family:Sora,sans-serif;font-weight:800;font-size:14px;color:#8a5c10} .cos-price.cur-xp{color:var(--accent-deep)} .cos-price svg{flex:none} .cos-btn{border:none;cursor:pointer;font-family:Outfit,sans-serif;font-weight:800;font-size:12px;padding:8px 14px;border-radius:12px;color:#fff;transition:transform .14s ease,filter .18s ease;transform:translateZ(0)} .cos-btn:active{transform:scale(.95)} .cos-btn.buy{background:linear-gradient(145deg,#ffb648,#f0902b);box-shadow:0 6px 14px -6px rgba(240,144,43,.7)} .cos-btn.buy.locked{background:linear-gradient(145deg,#c3ccd8,#9fb0c2);cursor:not-allowed;box-shadow:none} .cos-btn.equip{background:linear-gradient(145deg,#39b6ff,#0a6dff);box-shadow:0 6px 14px -6px rgba(20,110,220,.6)} .cos-btn.equipped{background:rgba(14,154,108,.14);color:#0e7a50;border:1.5px solid rgba(14,154,108,.3);box-shadow:none} /* Shared keyframes used by the generated cosmetic classes below. */ @keyframes cosBgDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes cosSheen{0%{background-position:120% 0}100%{background-position:-120% 0}} @keyframes cosTextShift{0%{background-position:0% 50%}100%{background-position:200% 50%}} @keyframes cosSpin{to{transform:rotate(360deg)}} @keyframes cosSeraph{0%,100%{box-shadow:0 0 0 1px rgba(255,215,94,.4),0 0 18px rgba(255,240,150,.6)}50%{box-shadow:0 0 0 1px rgba(255,215,94,.5),0 0 30px rgba(255,240,150,.95)}} @keyframes cosDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,-4px,0)}} @keyframes cosBreath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}} @keyframes cosTwinkle{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}} @keyframes cosRain{to{background-position:0 22px}} @keyframes cosRainX{to{background-position:22px 0}} @keyframes cosMatrix{to{background-position:0 22px}} @keyframes cosFall{0%{transform:translateY(-8px);opacity:0}20%{opacity:1}100%{transform:translateY(14px);opacity:0}} @keyframes cosRise{0%{transform:translateY(10px);opacity:0}25%{opacity:1}100%{transform:translateY(-12px);opacity:0}} /* No `will-change` here on purpose: it would promote EVERY effect element to its own compositor layer, and with up to 120 effect cards on the Effects tab that is 120 layers of GPU memory for no benefit — the transform/opacity keyframes composite fine without the hint, and content-visibility:auto on the parent .cos-card already skips off-screen cards entirely. */ .cos-fx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;border-radius:inherit} /* ══════════════════════════════════════════════════════════════ GENERATED COSMETIC CLASSES — 600 items (nameplate/name-style/ frame/effect/banner), one class each, from the palette x pattern matrix in the generator. Pure CSS, no external assets. Each class sets ONLY its background/border/effect; the shared .cos-preview pseudo-elements above add depth (bloom/noise/vignette) on top. ══════════════════════════════════════════════════════════════ */ .np-slate{background:linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .np-stone{background:linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .np-sage{background:linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .np-fog{background:linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .np-ash{background:linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .np-clay{background:linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .np-moss{background:linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .np-sand{background:linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .np-pewter{background:linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .np-taupe{background:linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .np-gull{background:linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .np-silt{background:linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .np-driftwood{background:linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .np-harbor{background:linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .np-slate-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .np-stone-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .np-sage-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .np-fog-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .np-ash-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .np-clay-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .np-moss-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .np-sand-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .np-pewter-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .np-taupe-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .np-gull-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .np-silt-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .np-driftwood-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .np-harbor-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .np-slate-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .np-stone-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .np-sage-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .np-fog-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .np-ash-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .np-clay-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .np-moss-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .np-sand-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .np-pewter-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .np-taupe-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .np-gull-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .np-silt-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .np-driftwood-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .np-harbor-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .np-slate-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .np-stone-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .np-sage-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .np-fog-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .np-ash-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .np-clay-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .np-moss-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .np-sand-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .np-pewter-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .np-taupe-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .np-gull-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .np-silt-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .np-teal{background:linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .np-emerald{background:linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .np-sapphire{background:linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .np-amber{background:linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .np-rose{background:linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .np-jade{background:linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .np-ruby{background:linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .np-cobalt{background:linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .np-coral{background:linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .np-ochre{background:linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .np-teal-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .np-emerald-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .np-sapphire-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .np-amber-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .np-rose-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .np-jade-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .np-ruby-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .np-cobalt-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .np-coral-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .np-ochre-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .np-teal-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .np-emerald-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .np-sapphire-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .np-amber-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .np-rose-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .np-jade-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .np-ruby-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .np-cobalt-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .np-coral-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .np-ochre-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .np-violet{background:linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .np-magenta{background:linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .np-azure{background:linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .np-aqua{background:linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .np-indigo{background:linear-gradient(135deg,hsl(240 62% 32%),hsl(240 68% 46%),hsl(240 54% 60%),hsl(240 62% 38%))} .np-orchid{background:linear-gradient(135deg,hsl(292 60% 40%),hsl(292 66% 54%),hsl(292 52% 68%),hsl(292 60% 46%))} .np-turquoise{background:linear-gradient(135deg,hsl(186 72% 30%),hsl(186 78% 44%),hsl(186 64% 58%),hsl(186 72% 36%))} .np-violet-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .np-magenta-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .np-azure-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .np-aqua-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .np-indigo-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(240 62% 32%),hsl(240 68% 46%),hsl(240 54% 60%),hsl(240 62% 38%))} .np-orchid-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(292 60% 40%),hsl(292 66% 54%),hsl(292 52% 68%),hsl(292 60% 46%))} .np-turquoise-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(186 72% 30%),hsl(186 78% 44%),hsl(186 64% 58%),hsl(186 72% 36%))} .np-violet-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .np-magenta-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .np-azure-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .np-aqua-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .np-fire{background:linear-gradient(135deg,hsl(18 100% 36%),hsl(18 100% 50%),hsl(18 92% 64%),hsl(18 100% 42%))} .np-frostglow{background:linear-gradient(135deg,hsl(196 82% 54%),hsl(196 88% 68%),hsl(196 74% 82%),hsl(196 82% 60%))} .np-deepocean{background:linear-gradient(135deg,hsl(206 78% 22%),hsl(206 84% 36%),hsl(206 70% 50%),hsl(206 78% 28%))} .np-storm{background:linear-gradient(135deg,hsl(252 52% 28%),hsl(252 58% 42%),hsl(252 44% 56%),hsl(252 52% 34%))} .np-magma{background:linear-gradient(135deg,hsl(8 92% 32%),hsl(8 98% 46%),hsl(8 84% 60%),hsl(8 92% 38%))} .np-auroraglow{background:linear-gradient(135deg,hsl(150 72% 32%),hsl(150 78% 46%),hsl(150 64% 60%),hsl(150 72% 38%))} .np-sunset{background:linear-gradient(135deg,hsl(34 96% 40%),hsl(34 100% 54%),hsl(34 88% 68%),hsl(34 96% 46%))} .np-amethyst{background:linear-gradient(135deg,hsl(276 62% 36%),hsl(276 68% 50%),hsl(276 54% 64%),hsl(276 62% 42%))} .np-fire-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(18 100% 36%),hsl(18 100% 50%),hsl(18 92% 64%),hsl(18 100% 42%))} .np-frostglow-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(196 82% 54%),hsl(196 88% 68%),hsl(196 74% 82%),hsl(196 82% 60%))} .np-deepocean-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(206 78% 22%),hsl(206 84% 36%),hsl(206 70% 50%),hsl(206 78% 28%))} .np-storm-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(252 52% 28%),hsl(252 58% 42%),hsl(252 44% 56%),hsl(252 52% 34%))} .np-goldreign{background:linear-gradient(115deg,hsl(42 100% 19%),hsl(46 100% 68%),hsl(48 90% 88%),hsl(40 85% 42%),hsl(46 100% 68%));background-size:250% 250%;animation:cosBgDrift 4.5s linear infinite;box-shadow:inset 0 0 22px rgba(255,215,94,.5)} .np-obsidian{background:linear-gradient(135deg,hsl(230 35% 3%),hsl(225 25% 9%),hsl(235 30% 6%),hsl(228 28% 11%))} .np-chrome{background:linear-gradient(115deg,hsl(220 12% 62%),hsl(220 20% 92%),hsl(215 10% 55%),hsl(222 16% 84%),hsl(218 12% 66%));background-size:230% 230%;animation:cosBgDrift 5s linear infinite} .np-voidcrown{background:radial-gradient(circle at 32% 34%,hsl(268 75% 44%),transparent 60%),radial-gradient(circle at 72% 68%,hsl(288 70% 40%),transparent 55%),hsl(262 55% 8%)} .np-rosegold{background:linear-gradient(115deg,hsl(12 55% 34%),hsl(18 80% 72%),hsl(28 85% 88%),hsl(10 60% 52%),hsl(20 80% 74%));background-size:240% 240%;animation:cosBgDrift 5s linear infinite} .np-onyx{background:linear-gradient(135deg,hsl(210 20% 6%),hsl(200 30% 14%),hsl(215 24% 8%),hsl(205 26% 12%))} .ns-slate{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 34% 52%),hsl(215 26% 66%),hsl(215 30% 48%))} .ns-stone{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(28 30% 64%),hsl(28 22% 78%),hsl(28 26% 60%))} .ns-sage{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(140 34% 68%),hsl(140 26% 82%),hsl(140 30% 64%))} .ns-fog{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(208 30% 74%),hsl(208 22% 90%),hsl(208 26% 78%))} .ns-ash{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 24% 60%),hsl(220 16% 74%),hsl(220 20% 56%))} .ns-clay{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(16 48% 68%),hsl(16 40% 82%),hsl(16 44% 64%))} .ns-moss{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(95 40% 56%),hsl(95 32% 70%),hsl(95 36% 52%))} .ns-sand{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(42 52% 74%),hsl(42 44% 90%),hsl(42 48% 78%))} .ns-pewter{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 26% 70%),hsl(220 18% 84%),hsl(220 22% 66%))} .ns-taupe{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(30 32% 66%),hsl(30 24% 80%),hsl(30 28% 62%))} .ns-gull{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(198 30% 74%),hsl(198 22% 90%),hsl(198 26% 72%))} .ns-silt{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 28% 62%),hsl(180 20% 76%),hsl(180 24% 58%))} .ns-driftwood{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(26 36% 72%),hsl(26 28% 86%),hsl(26 32% 68%))} .ns-harbor{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 38% 58%),hsl(200 30% 72%),hsl(200 34% 54%))} .ns-slate-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 34% 52%),hsl(215 26% 66%),hsl(215 30% 48%));animation:cosTextShift 4.5s linear infinite} .ns-stone-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(28 30% 64%),hsl(28 22% 78%),hsl(28 26% 60%));animation:cosTextShift 4.5s linear infinite} .ns-sage-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(140 34% 68%),hsl(140 26% 82%),hsl(140 30% 64%));animation:cosTextShift 4.5s linear infinite} .ns-fog-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(208 30% 74%),hsl(208 22% 90%),hsl(208 26% 78%));animation:cosTextShift 4.5s linear infinite} .ns-ash-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 24% 60%),hsl(220 16% 74%),hsl(220 20% 56%));animation:cosTextShift 4.5s linear infinite} .ns-clay-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(16 48% 68%),hsl(16 40% 82%),hsl(16 44% 64%));animation:cosTextShift 4.5s linear infinite} .ns-moss-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(95 40% 56%),hsl(95 32% 70%),hsl(95 36% 52%));animation:cosTextShift 4.5s linear infinite} .ns-sand-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(42 52% 74%),hsl(42 44% 90%),hsl(42 48% 78%));animation:cosTextShift 4.5s linear infinite} .ns-pewter-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 26% 70%),hsl(220 18% 84%),hsl(220 22% 66%));animation:cosTextShift 4.5s linear infinite} .ns-taupe-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(30 32% 66%),hsl(30 24% 80%),hsl(30 28% 62%));animation:cosTextShift 4.5s linear infinite} .ns-gull-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(198 30% 74%),hsl(198 22% 90%),hsl(198 26% 72%));animation:cosTextShift 4.5s linear infinite} .ns-silt-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 28% 62%),hsl(180 20% 76%),hsl(180 24% 58%));animation:cosTextShift 4.5s linear infinite} .ns-driftwood-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(26 36% 72%),hsl(26 28% 86%),hsl(26 32% 68%));animation:cosTextShift 4.5s linear infinite} .ns-harbor-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 38% 58%),hsl(200 30% 72%),hsl(200 34% 54%));animation:cosTextShift 4.5s linear infinite} .ns-slate-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 34% 52%),hsl(215 26% 66%),hsl(215 30% 48%));filter:drop-shadow(0 0 6px hsl(215 20% 34% / .55))} .ns-stone-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(28 30% 64%),hsl(28 22% 78%),hsl(28 26% 60%));filter:drop-shadow(0 0 6px hsl(28 16% 46% / .55))} .ns-sage-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(140 34% 68%),hsl(140 26% 82%),hsl(140 30% 64%));filter:drop-shadow(0 0 6px hsl(140 20% 50% / .55))} .ns-fog-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(208 30% 74%),hsl(208 22% 90%),hsl(208 26% 78%));filter:drop-shadow(0 0 6px hsl(208 16% 66% / .55))} .ns-ash-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 24% 60%),hsl(220 16% 74%),hsl(220 20% 56%));filter:drop-shadow(0 0 6px hsl(220 10% 42% / .55))} .ns-clay-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(16 48% 68%),hsl(16 40% 82%),hsl(16 44% 64%));filter:drop-shadow(0 0 6px hsl(16 34% 50% / .55))} .ns-moss-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(95 40% 56%),hsl(95 32% 70%),hsl(95 36% 52%));filter:drop-shadow(0 0 6px hsl(95 26% 38% / .55))} .ns-sand-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(42 52% 74%),hsl(42 44% 90%),hsl(42 48% 78%));filter:drop-shadow(0 0 6px hsl(42 38% 68% / .55))} .ns-pewter-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 26% 70%),hsl(220 18% 84%),hsl(220 22% 66%));filter:drop-shadow(0 0 6px hsl(220 12% 52% / .55))} .ns-taupe-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(30 32% 66%),hsl(30 24% 80%),hsl(30 28% 62%));filter:drop-shadow(0 0 6px hsl(30 18% 48% / .55))} .ns-gull-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(198 30% 74%),hsl(198 22% 90%),hsl(198 26% 72%));filter:drop-shadow(0 0 6px hsl(198 16% 58% / .55))} .ns-silt-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 28% 62%),hsl(180 20% 76%),hsl(180 24% 58%));filter:drop-shadow(0 0 6px hsl(180 14% 44% / .55))} .ns-driftwood-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(26 36% 72%),hsl(26 28% 86%),hsl(26 32% 68%));filter:drop-shadow(0 0 6px hsl(26 22% 54% / .55))} .ns-harbor-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 38% 58%),hsl(200 30% 72%),hsl(200 34% 54%));filter:drop-shadow(0 0 6px hsl(200 24% 40% / .55))} .ns-slate-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 34% 52%),hsl(215 26% 66%),hsl(215 30% 48%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(215 20% 34% / .55))} .ns-stone-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(28 30% 64%),hsl(28 22% 78%),hsl(28 26% 60%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(28 16% 46% / .55))} .ns-sage-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(140 34% 68%),hsl(140 26% 82%),hsl(140 30% 64%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(140 20% 50% / .55))} .ns-fog-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(208 30% 74%),hsl(208 22% 90%),hsl(208 26% 78%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(208 16% 66% / .55))} .ns-ash-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 24% 60%),hsl(220 16% 74%),hsl(220 20% 56%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(220 10% 42% / .55))} .ns-clay-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(16 48% 68%),hsl(16 40% 82%),hsl(16 44% 64%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(16 34% 50% / .55))} .ns-moss-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(95 40% 56%),hsl(95 32% 70%),hsl(95 36% 52%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(95 26% 38% / .55))} .ns-sand-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(42 52% 74%),hsl(42 44% 90%),hsl(42 48% 78%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(42 38% 68% / .55))} .ns-pewter-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(220 26% 70%),hsl(220 18% 84%),hsl(220 22% 66%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(220 12% 52% / .55))} .ns-taupe-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(30 32% 66%),hsl(30 24% 80%),hsl(30 28% 62%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(30 18% 48% / .55))} .ns-gull-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(198 30% 74%),hsl(198 22% 90%),hsl(198 26% 72%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(198 16% 58% / .55))} .ns-silt-gleam{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 28% 62%),hsl(180 20% 76%),hsl(180 24% 58%));animation:cosTextShift 4.5s linear infinite;filter:drop-shadow(0 0 6px hsl(180 14% 44% / .55))} .ns-teal{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 86% 58%),hsl(180 78% 72%),hsl(180 82% 54%))} .ns-emerald{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(155 84% 56%),hsl(155 76% 70%),hsl(155 80% 52%))} .ns-sapphire{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 96% 64%),hsl(215 88% 78%),hsl(215 92% 60%))} .ns-amber{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(40 100% 68%),hsl(40 98% 82%),hsl(40 100% 64%))} .ns-rose{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(340 86% 72%),hsl(340 78% 86%),hsl(340 82% 68%))} .ns-jade{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(162 70% 62%),hsl(162 62% 76%),hsl(162 66% 58%))} .ns-ruby{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(350 90% 62%),hsl(350 82% 76%),hsl(350 86% 58%))} .ns-cobalt{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(226 90% 62%),hsl(226 82% 76%),hsl(226 86% 58%))} .ns-coral{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(12 96% 74%),hsl(12 88% 88%),hsl(12 92% 70%))} .ns-ochre{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(35 96% 64%),hsl(35 88% 78%),hsl(35 92% 60%))} .ns-teal-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 86% 58%),hsl(180 78% 72%),hsl(180 82% 54%));animation:cosTextShift 4.5s linear infinite} .ns-emerald-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(155 84% 56%),hsl(155 76% 70%),hsl(155 80% 52%));animation:cosTextShift 4.5s linear infinite} .ns-sapphire-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 96% 64%),hsl(215 88% 78%),hsl(215 92% 60%));animation:cosTextShift 4.5s linear infinite} .ns-amber-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(40 100% 68%),hsl(40 98% 82%),hsl(40 100% 64%));animation:cosTextShift 4.5s linear infinite} .ns-rose-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(340 86% 72%),hsl(340 78% 86%),hsl(340 82% 68%));animation:cosTextShift 4.5s linear infinite} .ns-jade-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(162 70% 62%),hsl(162 62% 76%),hsl(162 66% 58%));animation:cosTextShift 4.5s linear infinite} .ns-ruby-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(350 90% 62%),hsl(350 82% 76%),hsl(350 86% 58%));animation:cosTextShift 4.5s linear infinite} .ns-cobalt-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(226 90% 62%),hsl(226 82% 76%),hsl(226 86% 58%));animation:cosTextShift 4.5s linear infinite} .ns-coral-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(12 96% 74%),hsl(12 88% 88%),hsl(12 92% 70%));animation:cosTextShift 4.5s linear infinite} .ns-ochre-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(35 96% 64%),hsl(35 88% 78%),hsl(35 92% 60%));animation:cosTextShift 4.5s linear infinite} .ns-teal-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(180 86% 58%),hsl(180 78% 72%),hsl(180 82% 54%));filter:drop-shadow(0 0 6px hsl(180 72% 40% / .55))} .ns-emerald-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(155 84% 56%),hsl(155 76% 70%),hsl(155 80% 52%));filter:drop-shadow(0 0 6px hsl(155 70% 38% / .55))} .ns-sapphire-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(215 96% 64%),hsl(215 88% 78%),hsl(215 92% 60%));filter:drop-shadow(0 0 6px hsl(215 82% 46% / .55))} .ns-amber-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(40 100% 68%),hsl(40 98% 82%),hsl(40 100% 64%));filter:drop-shadow(0 0 6px hsl(40 92% 50% / .55))} .ns-rose-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(340 86% 72%),hsl(340 78% 86%),hsl(340 82% 68%));filter:drop-shadow(0 0 6px hsl(340 72% 54% / .55))} .ns-jade-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(162 70% 62%),hsl(162 62% 76%),hsl(162 66% 58%));filter:drop-shadow(0 0 6px hsl(162 56% 44% / .55))} .ns-ruby-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(350 90% 62%),hsl(350 82% 76%),hsl(350 86% 58%));filter:drop-shadow(0 0 6px hsl(350 76% 44% / .55))} .ns-cobalt-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(226 90% 62%),hsl(226 82% 76%),hsl(226 86% 58%));filter:drop-shadow(0 0 6px hsl(226 76% 44% / .55))} .ns-coral-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(12 96% 74%),hsl(12 88% 88%),hsl(12 92% 70%));filter:drop-shadow(0 0 6px hsl(12 82% 56% / .55))} .ns-ochre-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(35 96% 64%),hsl(35 88% 78%),hsl(35 92% 60%));filter:drop-shadow(0 0 6px hsl(35 82% 46% / .55))} .ns-violet{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(266 80% 70%),hsl(266 72% 84%),hsl(266 76% 66%))} .ns-magenta{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(316 84% 70%),hsl(316 76% 84%),hsl(316 80% 66%))} .ns-azure{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 98% 68%),hsl(200 90% 82%),hsl(200 94% 64%))} .ns-aqua{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(174 90% 64%),hsl(174 82% 78%),hsl(174 86% 60%))} .ns-indigo{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(240 76% 64%),hsl(240 68% 78%),hsl(240 72% 60%))} .ns-orchid{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(292 74% 72%),hsl(292 66% 86%),hsl(292 70% 68%))} .ns-turquoise{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(186 86% 62%),hsl(186 78% 76%),hsl(186 82% 58%))} .ns-violet-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(266 80% 70%),hsl(266 72% 84%),hsl(266 76% 66%));animation:cosTextShift 4.5s linear infinite} .ns-magenta-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(316 84% 70%),hsl(316 76% 84%),hsl(316 80% 66%));animation:cosTextShift 4.5s linear infinite} .ns-azure-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 98% 68%),hsl(200 90% 82%),hsl(200 94% 64%));animation:cosTextShift 4.5s linear infinite} .ns-aqua-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(174 90% 64%),hsl(174 82% 78%),hsl(174 86% 60%));animation:cosTextShift 4.5s linear infinite} .ns-indigo-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(240 76% 64%),hsl(240 68% 78%),hsl(240 72% 60%));animation:cosTextShift 4.5s linear infinite} .ns-orchid-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(292 74% 72%),hsl(292 66% 86%),hsl(292 70% 68%));animation:cosTextShift 4.5s linear infinite} .ns-turquoise-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(186 86% 62%),hsl(186 78% 76%),hsl(186 82% 58%));animation:cosTextShift 4.5s linear infinite} .ns-violet-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(266 80% 70%),hsl(266 72% 84%),hsl(266 76% 66%));filter:drop-shadow(0 0 6px hsl(266 66% 52% / .55))} .ns-magenta-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(316 84% 70%),hsl(316 76% 84%),hsl(316 80% 66%));filter:drop-shadow(0 0 6px hsl(316 70% 52% / .55))} .ns-azure-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(200 98% 68%),hsl(200 90% 82%),hsl(200 94% 64%));filter:drop-shadow(0 0 6px hsl(200 84% 50% / .55))} .ns-aqua-glow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(174 90% 64%),hsl(174 82% 78%),hsl(174 86% 60%));filter:drop-shadow(0 0 6px hsl(174 76% 46% / .55))} .ns-fire{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(18 100% 68%),hsl(18 100% 82%),hsl(18 100% 64%))} .ns-frostglow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(196 96% 74%),hsl(196 88% 90%),hsl(196 92% 78%))} .ns-deepocean{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(206 92% 54%),hsl(206 84% 68%),hsl(206 88% 50%))} .ns-storm{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(252 66% 60%),hsl(252 58% 74%),hsl(252 62% 56%))} .ns-magma{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(8 100% 64%),hsl(8 98% 78%),hsl(8 100% 60%))} .ns-auroraglow{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(150 86% 64%),hsl(150 78% 78%),hsl(150 82% 60%))} .ns-sunset{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(34 100% 72%),hsl(34 100% 86%),hsl(34 100% 68%))} .ns-amethyst{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(276 76% 68%),hsl(276 68% 82%),hsl(276 72% 64%))} .ns-fire-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(18 100% 68%),hsl(18 100% 82%),hsl(18 100% 64%));animation:cosTextShift 4.5s linear infinite} .ns-frostglow-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(196 96% 74%),hsl(196 88% 90%),hsl(196 92% 78%));animation:cosTextShift 4.5s linear infinite} .ns-deepocean-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(206 92% 54%),hsl(206 84% 68%),hsl(206 88% 50%));animation:cosTextShift 4.5s linear infinite} .ns-storm-shift{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,hsl(252 66% 60%),hsl(252 58% 74%),hsl(252 62% 56%));animation:cosTextShift 4.5s linear infinite} .ns-chromegold{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#8a5c10,#ffd75e,#fff8e1,#c98b00,#ffd75e);animation:cosTextShift 3.5s linear infinite;filter:drop-shadow(0 1px 2px rgba(120,80,0,.4))} .ns-platinum{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#8892a3,#eef3f8,#aab4c2,#dfe6ef);animation:cosTextShift 4s linear infinite} .ns-rosegold{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#b76e57,#ffc7b0,#fff0e8,#c98b6a);animation:cosTextShift 4s linear infinite} .ns-sapphirechrome{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#1f5fd0,#7fb4ff,#eaf3ff,#1f5fd0);animation:cosTextShift 3.2s linear infinite;filter:drop-shadow(0 0 6px rgba(60,140,255,.5))} .ns-voidglitch{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#b06bff,#e6d0ff,#7a3ff0);animation:cosTextShift 2.4s linear infinite;filter:drop-shadow(0 0 6px rgba(150,90,255,.55))} .ns-onyxgold{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;font-weight:800;background-image:linear-gradient(90deg,#3a3320,#ffd75e,#8a7a44,#ffd75e);animation:cosTextShift 3.8s linear infinite} .av-frame-wrap.frame-slate{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(215 20% 26%),hsl(215 32% 54%),hsl(215 20% 26%));box-shadow:0 0 0 1px hsl(215 20% 34% / .3),0 0 10px hsl(215 20% 34% / .55)} .av-frame-wrap.frame-stone{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(28 16% 38%),hsl(28 28% 66%),hsl(28 16% 38%));box-shadow:0 0 0 1px hsl(28 16% 46% / .3),0 0 10px hsl(28 16% 46% / .55)} .av-frame-wrap.frame-sage{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(140 20% 42%),hsl(140 32% 70%),hsl(140 20% 42%));box-shadow:0 0 0 1px hsl(140 20% 50% / .3),0 0 10px hsl(140 20% 50% / .55)} .av-frame-wrap.frame-fog{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(208 16% 58%),hsl(208 28% 82%),hsl(208 16% 58%));box-shadow:0 0 0 1px hsl(208 16% 66% / .3),0 0 10px hsl(208 16% 66% / .55)} .av-frame-wrap.frame-ash{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 10% 34%),hsl(220 22% 62%),hsl(220 10% 34%));box-shadow:0 0 0 1px hsl(220 10% 42% / .3),0 0 10px hsl(220 10% 42% / .55)} .av-frame-wrap.frame-clay{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(16 34% 42%),hsl(16 46% 70%),hsl(16 34% 42%));box-shadow:0 0 0 1px hsl(16 34% 50% / .3),0 0 10px hsl(16 34% 50% / .55)} .av-frame-wrap.frame-moss{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(95 26% 30%),hsl(95 38% 58%),hsl(95 26% 30%));box-shadow:0 0 0 1px hsl(95 26% 38% / .3),0 0 10px hsl(95 26% 38% / .55)} .av-frame-wrap.frame-sand{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(42 38% 60%),hsl(42 50% 82%),hsl(42 38% 60%));box-shadow:0 0 0 1px hsl(42 38% 68% / .3),0 0 10px hsl(42 38% 68% / .55)} .av-frame-wrap.frame-pewter{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 12% 44%),hsl(220 24% 72%),hsl(220 12% 44%));box-shadow:0 0 0 1px hsl(220 12% 52% / .3),0 0 10px hsl(220 12% 52% / .55)} .av-frame-wrap.frame-taupe{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(30 18% 40%),hsl(30 30% 68%),hsl(30 18% 40%));box-shadow:0 0 0 1px hsl(30 18% 48% / .3),0 0 10px hsl(30 18% 48% / .55)} .av-frame-wrap.frame-gull{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(198 16% 50%),hsl(198 28% 78%),hsl(198 16% 50%));box-shadow:0 0 0 1px hsl(198 16% 58% / .3),0 0 10px hsl(198 16% 58% / .55)} .av-frame-wrap.frame-silt{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(180 14% 36%),hsl(180 26% 64%),hsl(180 14% 36%));box-shadow:0 0 0 1px hsl(180 14% 44% / .3),0 0 10px hsl(180 14% 44% / .55)} .av-frame-wrap.frame-driftwood{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(26 22% 46%),hsl(26 34% 74%),hsl(26 22% 46%));box-shadow:0 0 0 1px hsl(26 22% 54% / .3),0 0 10px hsl(26 22% 54% / .55)} .av-frame-wrap.frame-harbor{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(200 24% 32%),hsl(200 36% 60%),hsl(200 24% 32%));box-shadow:0 0 0 1px hsl(200 24% 40% / .3),0 0 10px hsl(200 24% 40% / .55)} .av-frame-wrap.frame-slate-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(215 20% 26%),hsl(215 32% 54%),hsl(215 20% 26%));box-shadow:0 0 0 1px hsl(215 20% 34% / .35),0 0 18px hsl(215 20% 34% / .75)} .av-frame-wrap.frame-stone-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(28 16% 38%),hsl(28 28% 66%),hsl(28 16% 38%));box-shadow:0 0 0 1px hsl(28 16% 46% / .35),0 0 18px hsl(28 16% 46% / .75)} .av-frame-wrap.frame-sage-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(140 20% 42%),hsl(140 32% 70%),hsl(140 20% 42%));box-shadow:0 0 0 1px hsl(140 20% 50% / .35),0 0 18px hsl(140 20% 50% / .75)} .av-frame-wrap.frame-fog-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(208 16% 58%),hsl(208 28% 82%),hsl(208 16% 58%));box-shadow:0 0 0 1px hsl(208 16% 66% / .35),0 0 18px hsl(208 16% 66% / .75)} .av-frame-wrap.frame-ash-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 10% 34%),hsl(220 22% 62%),hsl(220 10% 34%));box-shadow:0 0 0 1px hsl(220 10% 42% / .35),0 0 18px hsl(220 10% 42% / .75)} .av-frame-wrap.frame-clay-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(16 34% 42%),hsl(16 46% 70%),hsl(16 34% 42%));box-shadow:0 0 0 1px hsl(16 34% 50% / .35),0 0 18px hsl(16 34% 50% / .75)} .av-frame-wrap.frame-moss-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(95 26% 30%),hsl(95 38% 58%),hsl(95 26% 30%));box-shadow:0 0 0 1px hsl(95 26% 38% / .35),0 0 18px hsl(95 26% 38% / .75)} .av-frame-wrap.frame-sand-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(42 38% 60%),hsl(42 50% 82%),hsl(42 38% 60%));box-shadow:0 0 0 1px hsl(42 38% 68% / .35),0 0 18px hsl(42 38% 68% / .75)} .av-frame-wrap.frame-pewter-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 12% 44%),hsl(220 24% 72%),hsl(220 12% 44%));box-shadow:0 0 0 1px hsl(220 12% 52% / .35),0 0 18px hsl(220 12% 52% / .75)} .av-frame-wrap.frame-taupe-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(30 18% 40%),hsl(30 30% 68%),hsl(30 18% 40%));box-shadow:0 0 0 1px hsl(30 18% 48% / .35),0 0 18px hsl(30 18% 48% / .75)} .av-frame-wrap.frame-gull-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(198 16% 50%),hsl(198 28% 78%),hsl(198 16% 50%));box-shadow:0 0 0 1px hsl(198 16% 58% / .35),0 0 18px hsl(198 16% 58% / .75)} .av-frame-wrap.frame-silt-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(180 14% 36%),hsl(180 26% 64%),hsl(180 14% 36%));box-shadow:0 0 0 1px hsl(180 14% 44% / .35),0 0 18px hsl(180 14% 44% / .75)} .av-frame-wrap.frame-driftwood-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(26 22% 46%),hsl(26 34% 74%),hsl(26 22% 46%));box-shadow:0 0 0 1px hsl(26 22% 54% / .35),0 0 18px hsl(26 22% 54% / .75)} .av-frame-wrap.frame-harbor-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(200 24% 32%),hsl(200 36% 60%),hsl(200 24% 32%));box-shadow:0 0 0 1px hsl(200 24% 40% / .35),0 0 18px hsl(200 24% 40% / .75)} .av-frame-wrap.frame-slate-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(215 20% 26%),hsl(215 32% 54%),hsl(215 20% 26%),hsl(215 32% 54%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(215 20% 34% / .55)} .av-frame-wrap.frame-stone-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(28 16% 38%),hsl(28 28% 66%),hsl(28 16% 38%),hsl(28 28% 66%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(28 16% 46% / .55)} .av-frame-wrap.frame-sage-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(140 20% 42%),hsl(140 32% 70%),hsl(140 20% 42%),hsl(140 32% 70%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(140 20% 50% / .55)} .av-frame-wrap.frame-fog-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(208 16% 58%),hsl(208 28% 82%),hsl(208 16% 58%),hsl(208 28% 82%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(208 16% 66% / .55)} .av-frame-wrap.frame-ash-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(220 10% 34%),hsl(220 22% 62%),hsl(220 10% 34%),hsl(220 22% 62%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(220 10% 42% / .55)} .av-frame-wrap.frame-clay-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(16 34% 42%),hsl(16 46% 70%),hsl(16 34% 42%),hsl(16 46% 70%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(16 34% 50% / .55)} .av-frame-wrap.frame-moss-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(95 26% 30%),hsl(95 38% 58%),hsl(95 26% 30%),hsl(95 38% 58%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(95 26% 38% / .55)} .av-frame-wrap.frame-sand-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(42 38% 60%),hsl(42 50% 82%),hsl(42 38% 60%),hsl(42 50% 82%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(42 38% 68% / .55)} .av-frame-wrap.frame-pewter-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(220 12% 44%),hsl(220 24% 72%),hsl(220 12% 44%),hsl(220 24% 72%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(220 12% 52% / .55)} .av-frame-wrap.frame-taupe-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(30 18% 40%),hsl(30 30% 68%),hsl(30 18% 40%),hsl(30 30% 68%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(30 18% 48% / .55)} .av-frame-wrap.frame-gull-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(198 16% 50%),hsl(198 28% 78%),hsl(198 16% 50%),hsl(198 28% 78%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(198 16% 58% / .55)} .av-frame-wrap.frame-silt-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(180 14% 36%),hsl(180 26% 64%),hsl(180 14% 36%),hsl(180 26% 64%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(180 14% 44% / .55)} .av-frame-wrap.frame-driftwood-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(26 22% 46%),hsl(26 34% 74%),hsl(26 22% 46%),hsl(26 34% 74%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(26 22% 54% / .55)} .av-frame-wrap.frame-harbor-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(200 24% 32%),hsl(200 36% 60%),hsl(200 24% 32%),hsl(200 36% 60%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(200 24% 40% / .55)} .av-frame-wrap.frame-slate-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(215 32% 54%),hsl(215 24% 34%),hsl(215 32% 54%),hsl(215 24% 34%));box-shadow:0 0 0 1px hsl(215 20% 34% / .4),0 0 10px hsl(215 20% 34% / .55),0 0 22px hsl(215 20% 42% / .6)} .av-frame-wrap.frame-stone-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(28 28% 66%),hsl(28 20% 46%),hsl(28 28% 66%),hsl(28 20% 46%));box-shadow:0 0 0 1px hsl(28 16% 46% / .4),0 0 10px hsl(28 16% 46% / .55),0 0 22px hsl(28 16% 54% / .6)} .av-frame-wrap.frame-sage-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(140 32% 70%),hsl(140 24% 50%),hsl(140 32% 70%),hsl(140 24% 50%));box-shadow:0 0 0 1px hsl(140 20% 50% / .4),0 0 10px hsl(140 20% 50% / .55),0 0 22px hsl(140 20% 58% / .6)} .av-frame-wrap.frame-fog-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(208 28% 82%),hsl(208 20% 66%),hsl(208 28% 82%),hsl(208 20% 66%));box-shadow:0 0 0 1px hsl(208 16% 66% / .4),0 0 10px hsl(208 16% 66% / .55),0 0 22px hsl(208 16% 74% / .6)} .av-frame-wrap.frame-ash-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 22% 62%),hsl(220 14% 42%),hsl(220 22% 62%),hsl(220 14% 42%));box-shadow:0 0 0 1px hsl(220 10% 42% / .4),0 0 10px hsl(220 10% 42% / .55),0 0 22px hsl(220 10% 50% / .6)} .av-frame-wrap.frame-clay-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(16 46% 70%),hsl(16 38% 50%),hsl(16 46% 70%),hsl(16 38% 50%));box-shadow:0 0 0 1px hsl(16 34% 50% / .4),0 0 10px hsl(16 34% 50% / .55),0 0 22px hsl(16 34% 58% / .6)} .av-frame-wrap.frame-moss-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(95 38% 58%),hsl(95 30% 38%),hsl(95 38% 58%),hsl(95 30% 38%));box-shadow:0 0 0 1px hsl(95 26% 38% / .4),0 0 10px hsl(95 26% 38% / .55),0 0 22px hsl(95 26% 46% / .6)} .av-frame-wrap.frame-sand-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(42 50% 82%),hsl(42 42% 68%),hsl(42 50% 82%),hsl(42 42% 68%));box-shadow:0 0 0 1px hsl(42 38% 68% / .4),0 0 10px hsl(42 38% 68% / .55),0 0 22px hsl(42 38% 76% / .6)} .av-frame-wrap.frame-pewter-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(220 24% 72%),hsl(220 16% 52%),hsl(220 24% 72%),hsl(220 16% 52%));box-shadow:0 0 0 1px hsl(220 12% 52% / .4),0 0 10px hsl(220 12% 52% / .55),0 0 22px hsl(220 12% 60% / .6)} .av-frame-wrap.frame-taupe-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(30 30% 68%),hsl(30 22% 48%),hsl(30 30% 68%),hsl(30 22% 48%));box-shadow:0 0 0 1px hsl(30 18% 48% / .4),0 0 10px hsl(30 18% 48% / .55),0 0 22px hsl(30 18% 56% / .6)} .av-frame-wrap.frame-gull-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(198 28% 78%),hsl(198 20% 58%),hsl(198 28% 78%),hsl(198 20% 58%));box-shadow:0 0 0 1px hsl(198 16% 58% / .4),0 0 10px hsl(198 16% 58% / .55),0 0 22px hsl(198 16% 66% / .6)} .av-frame-wrap.frame-silt-halo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(180 26% 64%),hsl(180 18% 44%),hsl(180 26% 64%),hsl(180 18% 44%));box-shadow:0 0 0 1px hsl(180 14% 44% / .4),0 0 10px hsl(180 14% 44% / .55),0 0 22px hsl(180 14% 52% / .6)} .av-frame-wrap.frame-teal{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(180 72% 32%),hsl(180 84% 60%),hsl(180 72% 32%));box-shadow:0 0 0 1px hsl(180 72% 40% / .3),0 0 10px hsl(180 72% 40% / .55)} .av-frame-wrap.frame-emerald{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(155 70% 30%),hsl(155 82% 58%),hsl(155 70% 30%));box-shadow:0 0 0 1px hsl(155 70% 38% / .3),0 0 10px hsl(155 70% 38% / .55)} .av-frame-wrap.frame-sapphire{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(215 82% 38%),hsl(215 94% 66%),hsl(215 82% 38%));box-shadow:0 0 0 1px hsl(215 82% 46% / .3),0 0 10px hsl(215 82% 46% / .55)} .av-frame-wrap.frame-amber{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(40 92% 42%),hsl(40 100% 70%),hsl(40 92% 42%));box-shadow:0 0 0 1px hsl(40 92% 50% / .3),0 0 10px hsl(40 92% 50% / .55)} .av-frame-wrap.frame-rose{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(340 72% 46%),hsl(340 84% 74%),hsl(340 72% 46%));box-shadow:0 0 0 1px hsl(340 72% 54% / .3),0 0 10px hsl(340 72% 54% / .55)} .av-frame-wrap.frame-jade{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(162 56% 36%),hsl(162 68% 64%),hsl(162 56% 36%));box-shadow:0 0 0 1px hsl(162 56% 44% / .3),0 0 10px hsl(162 56% 44% / .55)} .av-frame-wrap.frame-ruby{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(350 76% 36%),hsl(350 88% 64%),hsl(350 76% 36%));box-shadow:0 0 0 1px hsl(350 76% 44% / .3),0 0 10px hsl(350 76% 44% / .55)} .av-frame-wrap.frame-cobalt{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(226 76% 36%),hsl(226 88% 64%),hsl(226 76% 36%));box-shadow:0 0 0 1px hsl(226 76% 44% / .3),0 0 10px hsl(226 76% 44% / .55)} .av-frame-wrap.frame-coral{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(12 82% 48%),hsl(12 94% 76%),hsl(12 82% 48%));box-shadow:0 0 0 1px hsl(12 82% 56% / .3),0 0 10px hsl(12 82% 56% / .55)} .av-frame-wrap.frame-ochre{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(35 82% 38%),hsl(35 94% 66%),hsl(35 82% 38%));box-shadow:0 0 0 1px hsl(35 82% 46% / .3),0 0 10px hsl(35 82% 46% / .55)} .av-frame-wrap.frame-teal-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(180 72% 32%),hsl(180 84% 60%),hsl(180 72% 32%));box-shadow:0 0 0 1px hsl(180 72% 40% / .35),0 0 18px hsl(180 72% 40% / .75)} .av-frame-wrap.frame-emerald-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(155 70% 30%),hsl(155 82% 58%),hsl(155 70% 30%));box-shadow:0 0 0 1px hsl(155 70% 38% / .35),0 0 18px hsl(155 70% 38% / .75)} .av-frame-wrap.frame-sapphire-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(215 82% 38%),hsl(215 94% 66%),hsl(215 82% 38%));box-shadow:0 0 0 1px hsl(215 82% 46% / .35),0 0 18px hsl(215 82% 46% / .75)} .av-frame-wrap.frame-amber-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(40 92% 42%),hsl(40 100% 70%),hsl(40 92% 42%));box-shadow:0 0 0 1px hsl(40 92% 50% / .35),0 0 18px hsl(40 92% 50% / .75)} .av-frame-wrap.frame-rose-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(340 72% 46%),hsl(340 84% 74%),hsl(340 72% 46%));box-shadow:0 0 0 1px hsl(340 72% 54% / .35),0 0 18px hsl(340 72% 54% / .75)} .av-frame-wrap.frame-jade-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(162 56% 36%),hsl(162 68% 64%),hsl(162 56% 36%));box-shadow:0 0 0 1px hsl(162 56% 44% / .35),0 0 18px hsl(162 56% 44% / .75)} .av-frame-wrap.frame-ruby-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(350 76% 36%),hsl(350 88% 64%),hsl(350 76% 36%));box-shadow:0 0 0 1px hsl(350 76% 44% / .35),0 0 18px hsl(350 76% 44% / .75)} .av-frame-wrap.frame-cobalt-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(226 76% 36%),hsl(226 88% 64%),hsl(226 76% 36%));box-shadow:0 0 0 1px hsl(226 76% 44% / .35),0 0 18px hsl(226 76% 44% / .75)} .av-frame-wrap.frame-coral-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(12 82% 48%),hsl(12 94% 76%),hsl(12 82% 48%));box-shadow:0 0 0 1px hsl(12 82% 56% / .35),0 0 18px hsl(12 82% 56% / .75)} .av-frame-wrap.frame-ochre-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(35 82% 38%),hsl(35 94% 66%),hsl(35 82% 38%));box-shadow:0 0 0 1px hsl(35 82% 46% / .35),0 0 18px hsl(35 82% 46% / .75)} .av-frame-wrap.frame-teal-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(180 72% 32%),hsl(180 84% 60%),hsl(180 72% 32%),hsl(180 84% 60%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(180 72% 40% / .55)} .av-frame-wrap.frame-emerald-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(155 70% 30%),hsl(155 82% 58%),hsl(155 70% 30%),hsl(155 82% 58%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(155 70% 38% / .55)} .av-frame-wrap.frame-sapphire-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(215 82% 38%),hsl(215 94% 66%),hsl(215 82% 38%),hsl(215 94% 66%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(215 82% 46% / .55)} .av-frame-wrap.frame-amber-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(40 92% 42%),hsl(40 100% 70%),hsl(40 92% 42%),hsl(40 100% 70%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(40 92% 50% / .55)} .av-frame-wrap.frame-rose-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(340 72% 46%),hsl(340 84% 74%),hsl(340 72% 46%),hsl(340 84% 74%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(340 72% 54% / .55)} .av-frame-wrap.frame-jade-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(162 56% 36%),hsl(162 68% 64%),hsl(162 56% 36%),hsl(162 68% 64%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(162 56% 44% / .55)} .av-frame-wrap.frame-ruby-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(350 76% 36%),hsl(350 88% 64%),hsl(350 76% 36%),hsl(350 88% 64%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(350 76% 44% / .55)} .av-frame-wrap.frame-cobalt-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(226 76% 36%),hsl(226 88% 64%),hsl(226 76% 36%),hsl(226 88% 64%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(226 76% 44% / .55)} .av-frame-wrap.frame-coral-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(12 82% 48%),hsl(12 94% 76%),hsl(12 82% 48%),hsl(12 94% 76%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(12 82% 56% / .55)} .av-frame-wrap.frame-ochre-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(35 82% 38%),hsl(35 94% 66%),hsl(35 82% 38%),hsl(35 94% 66%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(35 82% 46% / .55)} .av-frame-wrap.frame-violet{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(266 66% 44%),hsl(266 78% 72%),hsl(266 66% 44%));box-shadow:0 0 0 1px hsl(266 66% 52% / .3),0 0 10px hsl(266 66% 52% / .55)} .av-frame-wrap.frame-magenta{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(316 70% 44%),hsl(316 82% 72%),hsl(316 70% 44%));box-shadow:0 0 0 1px hsl(316 70% 52% / .3),0 0 10px hsl(316 70% 52% / .55)} .av-frame-wrap.frame-azure{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(200 84% 42%),hsl(200 96% 70%),hsl(200 84% 42%));box-shadow:0 0 0 1px hsl(200 84% 50% / .3),0 0 10px hsl(200 84% 50% / .55)} .av-frame-wrap.frame-aqua{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(174 76% 38%),hsl(174 88% 66%),hsl(174 76% 38%));box-shadow:0 0 0 1px hsl(174 76% 46% / .3),0 0 10px hsl(174 76% 46% / .55)} .av-frame-wrap.frame-indigo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(240 62% 38%),hsl(240 74% 66%),hsl(240 62% 38%));box-shadow:0 0 0 1px hsl(240 62% 46% / .3),0 0 10px hsl(240 62% 46% / .55)} .av-frame-wrap.frame-orchid{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(292 60% 46%),hsl(292 72% 74%),hsl(292 60% 46%));box-shadow:0 0 0 1px hsl(292 60% 54% / .3),0 0 10px hsl(292 60% 54% / .55)} .av-frame-wrap.frame-turquoise{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(186 72% 36%),hsl(186 84% 64%),hsl(186 72% 36%));box-shadow:0 0 0 1px hsl(186 72% 44% / .3),0 0 10px hsl(186 72% 44% / .55)} .av-frame-wrap.frame-violet-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(266 66% 44%),hsl(266 78% 72%),hsl(266 66% 44%));box-shadow:0 0 0 1px hsl(266 66% 52% / .35),0 0 18px hsl(266 66% 52% / .75)} .av-frame-wrap.frame-magenta-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(316 70% 44%),hsl(316 82% 72%),hsl(316 70% 44%));box-shadow:0 0 0 1px hsl(316 70% 52% / .35),0 0 18px hsl(316 70% 52% / .75)} .av-frame-wrap.frame-azure-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(200 84% 42%),hsl(200 96% 70%),hsl(200 84% 42%));box-shadow:0 0 0 1px hsl(200 84% 50% / .35),0 0 18px hsl(200 84% 50% / .75)} .av-frame-wrap.frame-aqua-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(174 76% 38%),hsl(174 88% 66%),hsl(174 76% 38%));box-shadow:0 0 0 1px hsl(174 76% 46% / .35),0 0 18px hsl(174 76% 46% / .75)} .av-frame-wrap.frame-indigo-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(240 62% 38%),hsl(240 74% 66%),hsl(240 62% 38%));box-shadow:0 0 0 1px hsl(240 62% 46% / .35),0 0 18px hsl(240 62% 46% / .75)} .av-frame-wrap.frame-orchid-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(292 60% 46%),hsl(292 72% 74%),hsl(292 60% 46%));box-shadow:0 0 0 1px hsl(292 60% 54% / .35),0 0 18px hsl(292 60% 54% / .75)} .av-frame-wrap.frame-turquoise-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(186 72% 36%),hsl(186 84% 64%),hsl(186 72% 36%));box-shadow:0 0 0 1px hsl(186 72% 44% / .35),0 0 18px hsl(186 72% 44% / .75)} .av-frame-wrap.frame-violet-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(266 66% 44%),hsl(266 78% 72%),hsl(266 66% 44%),hsl(266 78% 72%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(266 66% 52% / .55)} .av-frame-wrap.frame-magenta-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(316 70% 44%),hsl(316 82% 72%),hsl(316 70% 44%),hsl(316 82% 72%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(316 70% 52% / .55)} .av-frame-wrap.frame-azure-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(200 84% 42%),hsl(200 96% 70%),hsl(200 84% 42%),hsl(200 96% 70%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(200 84% 50% / .55)} .av-frame-wrap.frame-aqua-spin{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,hsl(174 76% 38%),hsl(174 88% 66%),hsl(174 76% 38%),hsl(174 88% 66%));animation:cosSpin 5s linear infinite;box-shadow:0 0 14px hsl(174 76% 46% / .55)} .av-frame-wrap.frame-fire{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(18 100% 42%),hsl(18 100% 70%),hsl(18 100% 42%));box-shadow:0 0 0 1px hsl(18 100% 50% / .3),0 0 10px hsl(18 100% 50% / .55)} .av-frame-wrap.frame-frostglow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(196 82% 60%),hsl(196 94% 82%),hsl(196 82% 60%));box-shadow:0 0 0 1px hsl(196 82% 68% / .3),0 0 10px hsl(196 82% 68% / .55)} .av-frame-wrap.frame-deepocean{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(206 78% 28%),hsl(206 90% 56%),hsl(206 78% 28%));box-shadow:0 0 0 1px hsl(206 78% 36% / .3),0 0 10px hsl(206 78% 36% / .55)} .av-frame-wrap.frame-storm{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(252 52% 34%),hsl(252 64% 62%),hsl(252 52% 34%));box-shadow:0 0 0 1px hsl(252 52% 42% / .3),0 0 10px hsl(252 52% 42% / .55)} .av-frame-wrap.frame-magma{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(8 92% 38%),hsl(8 100% 66%),hsl(8 92% 38%));box-shadow:0 0 0 1px hsl(8 92% 46% / .3),0 0 10px hsl(8 92% 46% / .55)} .av-frame-wrap.frame-auroraglow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(150 72% 38%),hsl(150 84% 66%),hsl(150 72% 38%));box-shadow:0 0 0 1px hsl(150 72% 46% / .3),0 0 10px hsl(150 72% 46% / .55)} .av-frame-wrap.frame-sunset{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(34 96% 46%),hsl(34 100% 74%),hsl(34 96% 46%));box-shadow:0 0 0 1px hsl(34 96% 54% / .3),0 0 10px hsl(34 96% 54% / .55)} .av-frame-wrap.frame-amethyst{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(276 62% 42%),hsl(276 74% 70%),hsl(276 62% 42%));box-shadow:0 0 0 1px hsl(276 62% 50% / .3),0 0 10px hsl(276 62% 50% / .55)} .av-frame-wrap.frame-fire-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(18 100% 42%),hsl(18 100% 70%),hsl(18 100% 42%));box-shadow:0 0 0 1px hsl(18 100% 50% / .35),0 0 18px hsl(18 100% 50% / .75)} .av-frame-wrap.frame-frostglow-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(196 82% 60%),hsl(196 94% 82%),hsl(196 82% 60%));box-shadow:0 0 0 1px hsl(196 82% 68% / .35),0 0 18px hsl(196 82% 68% / .75)} .av-frame-wrap.frame-deepocean-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(206 78% 28%),hsl(206 90% 56%),hsl(206 78% 28%));box-shadow:0 0 0 1px hsl(206 78% 36% / .35),0 0 18px hsl(206 78% 36% / .75)} .av-frame-wrap.frame-storm-glow{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,hsl(252 52% 34%),hsl(252 64% 62%),hsl(252 52% 34%));box-shadow:0 0 0 1px hsl(252 52% 42% / .35),0 0 18px hsl(252 52% 42% / .75)} .av-frame-wrap.frame-seraph{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,#fff3c4,#ffd75e,#fffef0,#ffd75e);box-shadow:0 0 0 1px rgba(255,215,94,.4),0 0 22px rgba(255,240,150,.75);animation:cosSeraph 3s ease-in-out infinite} .av-frame-wrap.frame-voidgold{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,#000,#ffd75e,#000,#c98b00,#000,#ffd75e,#000);animation:cosSpin 5s linear infinite;box-shadow:0 0 24px rgba(255,215,94,.6)} .av-frame-wrap.frame-chromering{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,#6b7688,#eef3f8,#6b7688,#dfe6ef,#6b7688);animation:cosSpin 6s linear infinite;box-shadow:0 0 16px rgba(210,220,235,.55)} .av-frame-wrap.frame-rosegoldring{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,#b76e57,#ffc7b0,#fff0e8,#c98b6a);box-shadow:0 0 0 1px rgba(255,180,150,.4),0 0 20px rgba(255,190,160,.6)} .av-frame-wrap.frame-emberking{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:conic-gradient(from 0deg,#5a1600,#ff6a00,#ffc400,#ff6a00,#5a1600);animation:cosSpin 4.5s linear infinite;box-shadow:0 0 20px rgba(255,120,0,.6)} .av-frame-wrap.frame-onyxhalo{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px);background:linear-gradient(135deg,#0f151f,#3a4658,#0f151f);box-shadow:0 0 0 1px rgba(120,140,170,.3),0 0 16px rgba(90,120,160,.45)} .fx-slate-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(215 35% 52%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(215 35% 52%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(215 35% 52%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-stone-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(28 31% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(28 31% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(28 31% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-sage-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(140 35% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(140 35% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(140 35% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-fog-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(208 31% 78%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(208 31% 78%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(208 31% 78%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-ash-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(220 25% 60%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(220 25% 60%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(220 25% 60%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-clay-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(16 49% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(16 49% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(16 49% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-moss-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(95 41% 56%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(95 41% 56%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(95 41% 56%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-sand-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(42 53% 78%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(42 53% 78%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(42 53% 78%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-pewter-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(220 27% 70%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(220 27% 70%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(220 27% 70%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-taupe-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(30 33% 66%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(30 33% 66%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(30 33% 66%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-gull-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(198 31% 76%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(198 31% 76%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(198 31% 76%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-silt-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(180 29% 62%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(180 29% 62%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(180 29% 62%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-driftwood-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(26 37% 72%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(26 37% 72%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(26 37% 72%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-harbor-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(200 39% 58%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(200 39% 58%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(200 39% 58%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-slate-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(215 35% 52%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-stone-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(28 31% 64%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-sage-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(140 35% 68%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-fog-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(208 31% 78%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-ash-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(220 25% 60%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-clay-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(16 49% 68%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-moss-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(95 41% 56%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-sand-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(42 53% 78%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-pewter-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(220 27% 70%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-taupe-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(30 33% 66%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-gull-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(198 31% 76%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-silt-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(180 29% 62%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-driftwood-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(26 37% 72%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-harbor-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(200 39% 58%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-slate-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(215 35% 52%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(215 35% 52%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(215 35% 52%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-stone-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(28 31% 64%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(28 31% 64%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(28 31% 64%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-sage-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(140 35% 68%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(140 35% 68%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(140 35% 68%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-fog-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(208 31% 78%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(208 31% 78%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(208 31% 78%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-ash-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(220 25% 60%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(220 25% 60%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(220 25% 60%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-clay-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(16 49% 68%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(16 49% 68%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(16 49% 68%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-moss-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(95 41% 56%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(95 41% 56%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(95 41% 56%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-sand-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(42 53% 78%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(42 53% 78%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(42 53% 78%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-pewter-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(220 27% 70%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(220 27% 70%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(220 27% 70%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-taupe-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(30 33% 66%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(30 33% 66%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(30 33% 66%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-gull-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(198 31% 76%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(198 31% 76%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(198 31% 76%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-silt-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(180 29% 62%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(180 29% 62%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(180 29% 62%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-driftwood-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(26 37% 72%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(26 37% 72%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(26 37% 72%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-harbor-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(200 39% 58%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(200 39% 58%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(200 39% 58%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-slate-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(215 35% 52%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-stone-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(28 31% 64%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-sage-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(140 35% 68%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-fog-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(208 31% 78%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-ash-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(220 25% 60%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-clay-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(16 49% 68%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-moss-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(95 41% 56%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-sand-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(42 53% 78%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-pewter-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(220 27% 70%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-taupe-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(30 33% 66%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-gull-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(198 31% 76%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-silt-rain::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 9px,hsl(180 29% 62%) 9px 10.5px);background-size:14px 100%;opacity:.5;animation:cosRain .7s linear infinite} .fx-teal-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(180 87% 58%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(180 87% 58%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(180 87% 58%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-emerald-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(155 85% 56%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(155 85% 56%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(155 85% 56%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-sapphire-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(215 97% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(215 97% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(215 97% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-amber-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(40 100% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(40 100% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(40 100% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-rose-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(340 87% 72%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(340 87% 72%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(340 87% 72%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-jade-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(162 71% 62%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(162 71% 62%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(162 71% 62%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-ruby-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(350 91% 62%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(350 91% 62%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(350 91% 62%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-cobalt-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(226 91% 62%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(226 91% 62%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(226 91% 62%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-coral-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(12 97% 74%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(12 97% 74%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(12 97% 74%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-ochre-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(35 97% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(35 97% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(35 97% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-teal-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(180 87% 58%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-emerald-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(155 85% 56%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-sapphire-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(215 97% 64%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-amber-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(40 100% 68%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-rose-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(340 87% 72%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-jade-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(162 71% 62%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-ruby-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(350 91% 62%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-cobalt-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(226 91% 62%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-coral-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(12 97% 74%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-ochre-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(35 97% 64%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-teal-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(180 87% 58%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(180 87% 58%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(180 87% 58%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-emerald-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(155 85% 56%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(155 85% 56%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(155 85% 56%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-sapphire-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(215 97% 64%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(215 97% 64%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(215 97% 64%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-amber-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(40 100% 68%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(40 100% 68%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(40 100% 68%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-rose-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(340 87% 72%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(340 87% 72%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(340 87% 72%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-jade-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(162 71% 62%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(162 71% 62%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(162 71% 62%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-ruby-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(350 91% 62%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(350 91% 62%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(350 91% 62%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-cobalt-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(226 91% 62%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(226 91% 62%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(226 91% 62%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-coral-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(12 97% 74%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(12 97% 74%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(12 97% 74%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-ochre-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(35 97% 64%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(35 97% 64%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(35 97% 64%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-violet-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(266 81% 70%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(266 81% 70%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(266 81% 70%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-magenta-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(316 85% 70%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(316 85% 70%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(316 85% 70%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-azure-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(200 99% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(200 99% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(200 99% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-aqua-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(174 91% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(174 91% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(174 91% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-indigo-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(240 77% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(240 77% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(240 77% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-orchid-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(292 75% 72%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(292 75% 72%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(292 75% 72%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-turquoise-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(186 87% 62%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(186 87% 62%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(186 87% 62%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-violet-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(266 81% 70%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-magenta-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(316 85% 70%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-azure-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(200 99% 68%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-aqua-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(174 91% 64%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-indigo-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(240 77% 64%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-orchid-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(292 75% 72%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-turquoise-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(186 87% 62%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-violet-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(266 81% 70%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(266 81% 70%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(266 81% 70%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-magenta-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(316 85% 70%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(316 85% 70%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(316 85% 70%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-azure-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(200 99% 68%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(200 99% 68%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(200 99% 68%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-aqua-fireflies::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 25% 40%,hsl(174 91% 64%),transparent),radial-gradient(circle 2px at 75% 65%,hsl(174 91% 64%),transparent),radial-gradient(circle 1.5px at 55% 30%,hsl(174 91% 64%),transparent);animation:cosTwinkle 2.2s ease-in-out infinite} .fx-fire-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(18 100% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(18 100% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(18 100% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-frostglow-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(196 97% 78%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(196 97% 78%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(196 97% 78%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-deepocean-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(206 93% 54%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(206 93% 54%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(206 93% 54%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-storm-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(252 67% 60%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(252 67% 60%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(252 67% 60%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-magma-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(8 100% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(8 100% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(8 100% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-auroraglow-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(150 87% 64%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(150 87% 64%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(150 87% 64%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-sunset-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(34 100% 72%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(34 100% 72%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(34 100% 72%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-amethyst-dust::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 20% 30%,hsl(276 77% 68%),transparent),radial-gradient(circle 1px at 70% 60%,hsl(276 77% 68%),transparent),radial-gradient(circle 1.5px at 45% 80%,hsl(276 77% 68%),transparent);animation:cosDrift 9s ease-in-out infinite} .fx-fire-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(18 100% 68%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-frostglow-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(196 97% 78%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-deepocean-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(206 93% 54%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-storm-glow::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,hsl(252 67% 60%),transparent 60%);opacity:.5;animation:cosBreath 4s ease-in-out infinite} .fx-goldrush::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 20% 10%,#ffd75e,transparent),radial-gradient(circle 1.5px at 55% 5%,#fff3c4,transparent),radial-gradient(circle 2px at 85% 15%,#ffd75e,transparent),radial-gradient(circle 1.5px at 40% 8%,#ffe98a,transparent);animation:cosFall 2.4s linear infinite} .fx-voidpulse::before{content:'';position:absolute;inset:0;inset:-30%;background:radial-gradient(circle,rgba(150,90,255,.5),transparent 60%);animation:cosBreath 3.4s ease-in-out infinite} .fx-chromesparkle::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px at 30% 25%,#eef3f8,transparent),radial-gradient(circle 1.5px at 68% 45%,#cfd8e4,transparent),radial-gradient(circle 1.5px at 48% 78%,#eef3f8,transparent);animation:cosTwinkle 1.8s ease-in-out infinite} .fx-rosestorm::before{content:'';position:absolute;inset:0;inset:-40%;background:conic-gradient(from 0deg,rgba(255,150,120,.4),transparent 30%,rgba(255,180,150,.4) 60%,transparent 90%);mix-blend-mode:screen;animation:cosSpin 12s linear infinite} .fx-cyberstorm::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,194,255,.18) 0 3px,transparent 3px 7px);background-size:22px 100%;animation:cosRainX .8s linear infinite} .fx-embergold::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px at 30% 90%,#ffb400,transparent),radial-gradient(circle 1.5px at 65% 95%,#ffd75e,transparent),radial-gradient(circle 2px at 50% 92%,#ff8c00,transparent);animation:cosRise 2.4s linear infinite} .bnr-slate{background:linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .bnr-stone{background:linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .bnr-sage{background:linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .bnr-fog{background:linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .bnr-ash{background:linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .bnr-clay{background:linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .bnr-moss{background:linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .bnr-sand{background:linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .bnr-pewter{background:linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .bnr-taupe{background:linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .bnr-gull{background:linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .bnr-silt{background:linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .bnr-driftwood{background:linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .bnr-harbor{background:linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .bnr-slate-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .bnr-stone-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .bnr-sage-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .bnr-fog-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .bnr-ash-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .bnr-clay-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .bnr-moss-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .bnr-sand-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .bnr-pewter-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .bnr-taupe-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .bnr-gull-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .bnr-silt-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .bnr-driftwood-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .bnr-harbor-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .bnr-slate-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .bnr-stone-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .bnr-sage-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .bnr-fog-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .bnr-ash-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .bnr-clay-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .bnr-moss-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .bnr-sand-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .bnr-pewter-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .bnr-taupe-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .bnr-gull-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .bnr-silt-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .bnr-driftwood-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(26 22% 40%),hsl(26 28% 54%),hsl(26 14% 68%),hsl(26 22% 46%))} .bnr-harbor-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(200 24% 26%),hsl(200 30% 40%),hsl(200 16% 54%),hsl(200 24% 32%))} .bnr-slate-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(215 20% 20%),hsl(215 26% 34%),hsl(215 12% 48%),hsl(215 20% 26%))} .bnr-stone-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(28 16% 32%),hsl(28 22% 46%),hsl(28 8% 60%),hsl(28 16% 38%))} .bnr-sage-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(140 20% 36%),hsl(140 26% 50%),hsl(140 12% 64%),hsl(140 20% 42%))} .bnr-fog-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(208 16% 52%),hsl(208 22% 66%),hsl(208 8% 80%),hsl(208 16% 58%))} .bnr-ash-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(220 10% 28%),hsl(220 16% 42%),hsl(220 2% 56%),hsl(220 10% 34%))} .bnr-clay-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(16 34% 36%),hsl(16 40% 50%),hsl(16 26% 64%),hsl(16 34% 42%))} .bnr-moss-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(95 26% 24%),hsl(95 32% 38%),hsl(95 18% 52%),hsl(95 26% 30%))} .bnr-sand-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(42 38% 54%),hsl(42 44% 68%),hsl(42 30% 82%),hsl(42 38% 60%))} .bnr-pewter-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(220 12% 38%),hsl(220 18% 52%),hsl(220 4% 66%),hsl(220 12% 44%))} .bnr-taupe-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(30 18% 34%),hsl(30 24% 48%),hsl(30 10% 62%),hsl(30 18% 40%))} .bnr-gull-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(198 16% 44%),hsl(198 22% 58%),hsl(198 8% 72%),hsl(198 16% 50%))} .bnr-silt-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px),linear-gradient(135deg,hsl(180 14% 30%),hsl(180 20% 44%),hsl(180 6% 58%),hsl(180 14% 36%))} .bnr-teal{background:linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .bnr-emerald{background:linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .bnr-sapphire{background:linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .bnr-amber{background:linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .bnr-rose{background:linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .bnr-jade{background:linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .bnr-ruby{background:linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .bnr-cobalt{background:linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .bnr-coral{background:linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .bnr-ochre{background:linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .bnr-teal-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .bnr-emerald-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .bnr-sapphire-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .bnr-amber-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .bnr-rose-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .bnr-jade-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .bnr-ruby-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .bnr-cobalt-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .bnr-coral-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .bnr-ochre-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .bnr-teal-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(180 72% 26%),hsl(180 78% 40%),hsl(180 64% 54%),hsl(180 72% 32%))} .bnr-emerald-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(155 70% 24%),hsl(155 76% 38%),hsl(155 62% 52%),hsl(155 70% 30%))} .bnr-sapphire-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(215 82% 32%),hsl(215 88% 46%),hsl(215 74% 60%),hsl(215 82% 38%))} .bnr-amber-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(40 92% 36%),hsl(40 98% 50%),hsl(40 84% 64%),hsl(40 92% 42%))} .bnr-rose-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(340 72% 40%),hsl(340 78% 54%),hsl(340 64% 68%),hsl(340 72% 46%))} .bnr-jade-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(162 56% 30%),hsl(162 62% 44%),hsl(162 48% 58%),hsl(162 56% 36%))} .bnr-ruby-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(350 76% 30%),hsl(350 82% 44%),hsl(350 68% 58%),hsl(350 76% 36%))} .bnr-cobalt-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(226 76% 30%),hsl(226 82% 44%),hsl(226 68% 58%),hsl(226 76% 36%))} .bnr-coral-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(12 82% 42%),hsl(12 88% 56%),hsl(12 74% 70%),hsl(12 82% 48%))} .bnr-ochre-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(35 82% 32%),hsl(35 88% 46%),hsl(35 74% 60%),hsl(35 82% 38%))} .bnr-violet{background:linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .bnr-magenta{background:linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .bnr-azure{background:linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .bnr-aqua{background:linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .bnr-indigo{background:linear-gradient(135deg,hsl(240 62% 32%),hsl(240 68% 46%),hsl(240 54% 60%),hsl(240 62% 38%))} .bnr-orchid{background:linear-gradient(135deg,hsl(292 60% 40%),hsl(292 66% 54%),hsl(292 52% 68%),hsl(292 60% 46%))} .bnr-turquoise{background:linear-gradient(135deg,hsl(186 72% 30%),hsl(186 78% 44%),hsl(186 64% 58%),hsl(186 72% 36%))} .bnr-violet-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .bnr-magenta-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .bnr-azure-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .bnr-aqua-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .bnr-indigo-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(240 62% 32%),hsl(240 68% 46%),hsl(240 54% 60%),hsl(240 62% 38%))} .bnr-orchid-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(292 60% 40%),hsl(292 66% 54%),hsl(292 52% 68%),hsl(292 60% 46%))} .bnr-turquoise-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(186 72% 30%),hsl(186 78% 44%),hsl(186 64% 58%),hsl(186 72% 36%))} .bnr-violet-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(266 66% 38%),hsl(266 72% 52%),hsl(266 58% 66%),hsl(266 66% 44%))} .bnr-magenta-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(316 70% 38%),hsl(316 76% 52%),hsl(316 62% 66%),hsl(316 70% 44%))} .bnr-azure-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(200 84% 36%),hsl(200 90% 50%),hsl(200 76% 64%),hsl(200 84% 42%))} .bnr-aqua-weave{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,transparent 7px 14px),linear-gradient(135deg,hsl(174 76% 32%),hsl(174 82% 46%),hsl(174 68% 60%),hsl(174 76% 38%))} .bnr-fire{background:linear-gradient(135deg,hsl(18 100% 36%),hsl(18 100% 50%),hsl(18 92% 64%),hsl(18 100% 42%))} .bnr-frostglow{background:linear-gradient(135deg,hsl(196 82% 54%),hsl(196 88% 68%),hsl(196 74% 82%),hsl(196 82% 60%))} .bnr-deepocean{background:linear-gradient(135deg,hsl(206 78% 22%),hsl(206 84% 36%),hsl(206 70% 50%),hsl(206 78% 28%))} .bnr-storm{background:linear-gradient(135deg,hsl(252 52% 28%),hsl(252 58% 42%),hsl(252 44% 56%),hsl(252 52% 34%))} .bnr-magma{background:linear-gradient(135deg,hsl(8 92% 32%),hsl(8 98% 46%),hsl(8 84% 60%),hsl(8 92% 38%))} .bnr-auroraglow{background:linear-gradient(135deg,hsl(150 72% 32%),hsl(150 78% 46%),hsl(150 64% 60%),hsl(150 72% 38%))} .bnr-sunset{background:linear-gradient(135deg,hsl(34 96% 40%),hsl(34 100% 54%),hsl(34 88% 68%),hsl(34 96% 46%))} .bnr-amethyst{background:linear-gradient(135deg,hsl(276 62% 36%),hsl(276 68% 50%),hsl(276 54% 64%),hsl(276 62% 42%))} .bnr-fire-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(18 100% 36%),hsl(18 100% 50%),hsl(18 92% 64%),hsl(18 100% 42%))} .bnr-frostglow-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(196 82% 54%),hsl(196 88% 68%),hsl(196 74% 82%),hsl(196 82% 60%))} .bnr-deepocean-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(206 78% 22%),hsl(206 84% 36%),hsl(206 70% 50%),hsl(206 78% 28%))} .bnr-storm-aura{background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,hsl(252 52% 28%),hsl(252 58% 42%),hsl(252 44% 56%),hsl(252 52% 34%))} .bnr-goldleaf{background:linear-gradient(115deg,hsl(42 100% 19%),hsl(46 100% 68%),hsl(48 90% 88%),hsl(40 85% 42%),hsl(46 100% 68%));background-size:250% 250%;animation:cosBgDrift 5s linear infinite} .bnr-deepvoid{background:radial-gradient(circle at 35% 45%,hsl(258 70% 46%),transparent 55%),radial-gradient(circle at 70% 75%,hsl(288 60% 34%),transparent 60%),hsl(255 45% 8%)} .bnr-chromecity{background:linear-gradient(160deg,hsl(215 16% 22%),hsl(220 22% 44%),hsl(215 14% 16%),hsl(218 18% 34%));background-size:220% 220%;animation:cosBgDrift 7s ease infinite} .bnr-obsidianbnr{background:linear-gradient(135deg,hsl(230 35% 4%),hsl(225 26% 12%),hsl(235 30% 7%))} .bnr-rosedawn{background:linear-gradient(135deg,hsl(345 65% 42%),hsl(12 80% 66%),hsl(30 85% 80%),hsl(350 60% 52%));background-size:220% 220%;animation:cosBgDrift 8s ease infinite} .bnr-onyxbnr{background:linear-gradient(160deg,hsl(210 22% 5%),hsl(200 30% 13%),hsl(215 24% 7%))} /* ── 8. LEADERBOARD & PUBLIC-PROFILE INTEGRATION ───────────── */ .lb-row{position:relative} .lb-row.has-np .nm h4{color:#fff} .lb-row.has-np .nm span{color:rgba(255,255,255,.82)} .lb-row.has-np .xp{color:#fff} .lb-row .lb-name-style{display:inline-block} .lb-row.tier-legendary{box-shadow:0 0 0 1.5px rgba(224,165,0,.55),0 8px 22px -10px rgba(224,165,0,.5)} .lb-row.tier-mythic{box-shadow:0 0 0 1.5px rgba(255,47,176,.6),0 10px 26px -8px rgba(255,47,176,.55);animation:cosMythicPulse 3.2s ease-in-out infinite} .lb-row .lb-fx{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden} .lb-row>*{position:relative;z-index:1} /* public-profile modal cosmetics */ .pprofile-head.has-np-bg{border-radius:18px;padding:16px 12px 14px;overflow:hidden;position:relative} .pprofile-head .pp-fx{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden} .pprofile-head.has-np-bg>*{position:relative;z-index:1} .pprofile-head.has-np-bg h3{color:#fff} .pprofile-head.has-np-bg .ph{color:rgba(255,255,255,.85)} /* ── 9. SHOP CHROME — notifications ─────────────────────────── */ .shop-notif-btn{position:relative;flex:none;width:42px;height:42px;border-radius:14px;cursor:pointer; display:grid;place-items:center;font-size:19px;background:rgba(255,255,255,.6); border:1.5px solid rgba(150,190,240,.4);transition:transform .15s ease,box-shadow .2s ease} .shop-notif-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(20,110,220,.4)} .notif-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px; background:#ff3b5c;color:#fff;font-family:Sora,sans-serif;font-weight:800;font-size:10.5px; display:grid;place-items:center;box-shadow:0 2px 6px -1px rgba(255,59,92,.7);animation:cosBadgePulse 1.8s ease-in-out infinite} @keyframes cosBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} /* NB: #screen-shop > *{position:relative} in app.css (ID specificity) would otherwise pin this overlay into normal flow — hence the #-scoped override. */ .notif-overlay,#screen-shop>.notif-overlay{position:fixed;inset:0;z-index:340} .notif-overlay{background:rgba(10,26,46,.42);backdrop-filter:blur(3px); display:flex;align-items:flex-start;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease;padding:0 14px} .notif-overlay.open{opacity:1;pointer-events:auto} .notif-sheet{width:100%;max-width:460px;margin-top:64px;max-height:78vh;overflow-y:auto; background:var(--card,#fff);border-radius:22px;padding:16px 16px 20px; box-shadow:0 30px 70px -20px rgba(10,40,90,.5);transform:translateY(-14px);transition:transform .24s cubic-bezier(.2,.9,.3,1.2)} .notif-overlay.open .notif-sheet{transform:translateY(0)} .notif-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .notif-head h3{font-family:Sora,sans-serif;font-weight:800;font-size:18px;color:var(--ink);display:flex;align-items:center;gap:8px} .notif-close{width:34px;height:34px;border-radius:12px;border:none;cursor:pointer;background:rgba(150,190,240,.16);color:var(--ink-2);font-size:17px;display:grid;place-items:center} .notif-empty{text-align:center;padding:30px 10px;color:var(--ink-faint);font-family:Outfit,sans-serif;font-size:13.5px} #notifBody>*{margin-bottom:12px} #notifBody>*:last-child{margin-bottom:0} /* ── 10. "OTHERS" section (boosts + titles) group headers ──── */ .cos-others-head{margin:10px 0 4px;font-family:Sora,sans-serif;font-weight:800;font-size:13px;color:var(--ink);display:flex;align-items:center;gap:7px} /* ── 11. Reduced motion ────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .cos-card.tier-mythic,.lb-row.tier-mythic,.notif-badge, [class*="np-"],[class*="ns-"],[class*="fx-"],[class*="bnr-"],.av-frame-wrap[class*="frame-"]{animation:none!important} .cos-fx::before,.pp-fx::before{animation:none!important} }