/* Generated by scripts/build-profile-style-css.js. Edit the catalogue or generator instead. */
.styled-name[data-font="font-01"] { font-family: system-ui, sans-serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-02"] { font-family: system-ui, sans-serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-03"] { font-family: system-ui, sans-serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-04"] { font-family: system-ui, sans-serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-05"] { font-family: ui-rounded, 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-06"] { font-family: ui-rounded, 'Trebuchet MS', sans-serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-07"] { font-family: ui-rounded, 'Trebuchet MS', sans-serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-08"] { font-family: ui-rounded, 'Trebuchet MS', sans-serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-09"] { font-family: Georgia, serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-10"] { font-family: Georgia, serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-11"] { font-family: Georgia, serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-12"] { font-family: Georgia, serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-13"] { font-family: 'Palatino Linotype', Palatino, serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-14"] { font-family: 'Palatino Linotype', Palatino, serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-15"] { font-family: 'Palatino Linotype', Palatino, serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-16"] { font-family: 'Palatino Linotype', Palatino, serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-17"] { font-family: Garamond, Georgia, serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-18"] { font-family: Garamond, Georgia, serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-19"] { font-family: Garamond, Georgia, serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-20"] { font-family: Garamond, Georgia, serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-21"] { font-family: Baskerville, Georgia, serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-22"] { font-family: Baskerville, Georgia, serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-23"] { font-family: Baskerville, Georgia, serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-24"] { font-family: Baskerville, Georgia, serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-25"] { font-family: 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-26"] { font-family: 'Trebuchet MS', sans-serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-27"] { font-family: 'Trebuchet MS', sans-serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-28"] { font-family: 'Trebuchet MS', sans-serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-29"] { font-family: Verdana, sans-serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-30"] { font-family: Verdana, sans-serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-31"] { font-family: Verdana, sans-serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-32"] { font-family: Verdana, sans-serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-33"] { font-family: ui-monospace, monospace; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-34"] { font-family: ui-monospace, monospace; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-35"] { font-family: ui-monospace, monospace; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-36"] { font-family: ui-monospace, monospace; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-37"] { font-family: 'Gill Sans', 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-38"] { font-family: 'Gill Sans', 'Trebuchet MS', sans-serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-39"] { font-family: 'Gill Sans', 'Trebuchet MS', sans-serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-40"] { font-family: 'Gill Sans', 'Trebuchet MS', sans-serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-font="font-41"] { font-family: 'Times New Roman', serif; font-weight: 500; letter-spacing: .02em }
.styled-name[data-font="font-42"] { font-family: 'Times New Roman', serif; font-weight: 750; letter-spacing: -.035em }
.styled-name[data-font="font-43"] { font-family: 'Times New Roman', serif; font-style: italic; letter-spacing: .015em }
.styled-name[data-font="font-44"] { font-family: 'Times New Roman', serif; font-weight: 650; font-variant: small-caps; letter-spacing: .045em }
.styled-name[data-ink="indigo"] { color: hsl(256 62% 32%) }
body.theme-dark .styled-name[data-ink="indigo"] { color: hsl(256 82% 77%) }
.styled-name[data-ink="forest"] { color: hsl(148 62% 32%) }
body.theme-dark .styled-name[data-ink="forest"] { color: hsl(148 82% 77%) }
.styled-name[data-ink="plum"] { color: hsl(290 62% 32%) }
body.theme-dark .styled-name[data-ink="plum"] { color: hsl(290 82% 77%) }
.styled-name[data-ink="copper"] { color: hsl(23 62% 32%) }
body.theme-dark .styled-name[data-ink="copper"] { color: hsl(23 82% 77%) }
.styled-name[data-ink="crimson"] { color: hsl(352 62% 32%) }
body.theme-dark .styled-name[data-ink="crimson"] { color: hsl(352 82% 77%) }
.styled-name[data-ink="navy"] { color: hsl(214 62% 32%) }
body.theme-dark .styled-name[data-ink="navy"] { color: hsl(214 82% 77%) }
.styled-name[data-ink="emerald"] { color: hsl(155 62% 32%) }
body.theme-dark .styled-name[data-ink="emerald"] { color: hsl(155 82% 77%) }
.styled-name[data-ink="aubergine"] { color: hsl(277 62% 32%) }
body.theme-dark .styled-name[data-ink="aubergine"] { color: hsl(277 82% 77%) }
.styled-name[data-ink="amber"] { color: hsl(39 62% 32%) }
body.theme-dark .styled-name[data-ink="amber"] { color: hsl(39 82% 77%) }
.styled-name[data-ink="lagoon"] { color: hsl(188 62% 32%) }
body.theme-dark .styled-name[data-ink="lagoon"] { color: hsl(188 82% 77%) }
.styled-name[data-ink="orchid"] { color: hsl(305 62% 32%) }
body.theme-dark .styled-name[data-ink="orchid"] { color: hsl(305 82% 77%) }
.styled-name[data-ink="terracotta"] { color: hsl(14 62% 32%) }
body.theme-dark .styled-name[data-ink="terracotta"] { color: hsl(14 82% 77%) }
.styled-name[data-ink="olive"] { color: hsl(76 62% 32%) }
body.theme-dark .styled-name[data-ink="olive"] { color: hsl(76 82% 77%) }
.styled-name[data-ink="wine"] { color: hsl(338 62% 32%) }
body.theme-dark .styled-name[data-ink="wine"] { color: hsl(338 82% 77%) }
.styled-name[data-ink="cobalt"] { color: hsl(224 62% 32%) }
body.theme-dark .styled-name[data-ink="cobalt"] { color: hsl(224 82% 77%) }
.styled-name[data-ink="slate"] { color: hsl(211 62% 32%) }
body.theme-dark .styled-name[data-ink="slate"] { color: hsl(211 82% 77%) }
.styled-name[data-ink="berry"] { color: hsl(324 62% 32%) }
body.theme-dark .styled-name[data-ink="berry"] { color: hsl(324 82% 77%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="indigo"] { color: hsl(256 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="forest"] { color: hsl(148 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="plum"] { color: hsl(290 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="copper"] { color: hsl(23 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="crimson"] { color: hsl(352 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="navy"] { color: hsl(214 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="emerald"] { color: hsl(155 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="aubergine"] { color: hsl(277 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="amber"] { color: hsl(39 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="lagoon"] { color: hsl(188 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="orchid"] { color: hsl(305 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="terracotta"] { color: hsl(14 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="olive"] { color: hsl(76 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="wine"] { color: hsl(338 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="cobalt"] { color: hsl(224 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="slate"] { color: hsl(211 82% 78%) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="midnight"] .styled-name[data-ink="berry"] { color: hsl(324 82% 78%) }
.styled-name[data-effect="effect-01"] { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px;  }
.styled-name[data-effect="effect-02"] { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; letter-spacing: .045em }
.styled-name[data-effect="effect-03"] { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; font-style: italic }
.styled-name[data-effect="effect-04"] { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px;  }
.styled-name[data-effect="effect-05"] { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; letter-spacing: .045em }
.styled-name[data-effect="effect-06"] { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; font-style: italic }
.styled-name[data-effect="effect-07"] { text-decoration: underline; text-decoration-style: double; text-underline-offset: 5px;  }
.styled-name[data-effect="effect-08"] { text-decoration: underline; text-decoration-style: double; text-underline-offset: 5px; letter-spacing: .045em }
.styled-name[data-effect="effect-09"] { text-decoration: underline; text-decoration-style: double; text-underline-offset: 5px; font-style: italic }
.styled-name[data-effect="effect-10"] { text-shadow: 1px 1px 0 color-mix(in srgb, currentColor 25%, transparent);  }
.styled-name[data-effect="effect-11"] { text-shadow: 1px 1px 0 color-mix(in srgb, currentColor 25%, transparent); letter-spacing: .045em }
.styled-name[data-effect="effect-12"] { text-shadow: 1px 1px 0 color-mix(in srgb, currentColor 25%, transparent); font-style: italic }
.styled-name[data-effect="effect-13"] { text-shadow: -1px 0 color-mix(in srgb, currentColor 50%, transparent), 1px 0 color-mix(in srgb, currentColor 50%, transparent);  }
.styled-name[data-effect="effect-14"] { text-shadow: -1px 0 color-mix(in srgb, currentColor 50%, transparent), 1px 0 color-mix(in srgb, currentColor 50%, transparent); letter-spacing: .045em }
.styled-name[data-effect="effect-15"] { text-shadow: -1px 0 color-mix(in srgb, currentColor 50%, transparent), 1px 0 color-mix(in srgb, currentColor 50%, transparent); font-style: italic }
.styled-name[data-effect="effect-16"] { text-shadow: 0 2px 2px color-mix(in srgb, currentColor 35%, transparent);  }
.styled-name[data-effect="effect-17"] { text-shadow: 0 2px 2px color-mix(in srgb, currentColor 35%, transparent); letter-spacing: .045em }
.styled-name[data-effect="effect-18"] { text-shadow: 0 2px 2px color-mix(in srgb, currentColor 35%, transparent); font-style: italic }
.styled-name[data-effect="effect-19"] { text-shadow: 0 0 7px color-mix(in srgb, currentColor 45%, transparent);  }
.styled-name[data-effect="effect-20"] { text-shadow: 0 0 7px color-mix(in srgb, currentColor 45%, transparent); letter-spacing: .045em }
.styled-name[data-effect="effect-21"] { text-shadow: 0 0 7px color-mix(in srgb, currentColor 45%, transparent); font-style: italic }
.avatar[data-frame="frame-01"] { outline: 2px dashed #538a9f; outline-offset: 3px }
.avatar[data-frame="frame-02"] { outline: 3px dotted #ba7b99; outline-offset: 3px }
.avatar[data-frame="frame-03"] { outline: 4px ridge #af944d; outline-offset: 2px }
.avatar[data-frame="frame-04"] { outline: 2px solid #79966d; outline-offset: 4px; box-shadow: 0 0 0 6px #79966d33 }
.avatar[data-frame="frame-05"] { outline: 3px double #8472b8; outline-offset: 4px; box-shadow: 0 0 0 7px #8472b825 }
.avatar[data-shape="shape-01"] { border-radius: 8% }
.avatar[data-shape="shape-02"] { border-radius: 14% }
.avatar[data-shape="shape-03"] { border-radius: 20% }
.avatar[data-shape="shape-04"] { border-radius: 28% }
.avatar[data-shape="shape-05"] { border-radius: 42% }
.avatar[data-shape="shape-06"] { border-radius: 50% 15% }
.avatar[data-shape="shape-07"] { border-radius: 15% 50% }
.avatar[data-shape="shape-08"] { border-radius: 45% 20% 45% 20% }
.avatar[data-shape="shape-09"] { border-radius: 20% 45% 20% 45% }
.avatar[data-shape="shape-10"] { border-radius: 50% 50% 15% 15% }
.avatar[data-shape="shape-11"] { border-radius: 15% 15% 50% 50% }
.avatar[data-shape="shape-12"] { border-radius: 50% 15% 50% 15% }
.avatar[data-shape="shape-13"] { border-radius: 15% 50% 15% 50% }
.avatar[data-shape="shape-14"] { border-radius: 50% 30% 15% 30% }
.avatar[data-shape="shape-15"] { border-radius: 30% 15% 30% 50% }
.avatar[data-shape="shape-16"] { border-radius: 50% 45% 20% 20% }
.avatar[data-shape="shape-17"] { border-radius: 20% 20% 45% 50% }
.avatar[data-shape="shape-18"] { border-radius: 10% 35% 10% 35% }
.avatar[data-shape="shape-19"] { border-radius: 35% 10% 35% 10% }
.avatar[data-shape="shape-20"] { border-radius: 50% 10% 35% 10% }
.avatar[data-shape="shape-21"] { border-radius: 10% 35% 10% 50% }
.avatar[data-shape="shape-22"] { border-radius: 40% 50% 40% 15% }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-01"] { background: linear-gradient(120deg, hsl(205 70% 90%), hsl(27 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-01"] { background: linear-gradient(120deg, hsl(205 26% 24%), hsl(27 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-02"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(205 70% 90%), hsl(27 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-02"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(205 26% 24%), hsl(27 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-03"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(205 70% 90%), hsl(27 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-03"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(205 26% 24%), hsl(27 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-04"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(205 70% 90%), hsl(27 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-04"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(205 26% 24%), hsl(27 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-05"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(205 70% 90%), hsl(27 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-05"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(205 26% 24%), hsl(27 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-06"] { background: linear-gradient(120deg, hsl(260 70% 90%), hsl(310 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-06"] { background: linear-gradient(120deg, hsl(260 26% 24%), hsl(310 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-07"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(260 70% 90%), hsl(310 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-07"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(260 26% 24%), hsl(310 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-08"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(260 70% 90%), hsl(310 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-08"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(260 26% 24%), hsl(310 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-09"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(260 70% 90%), hsl(310 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-09"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(260 26% 24%), hsl(310 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-10"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(260 70% 90%), hsl(310 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-10"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(260 26% 24%), hsl(310 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-11"] { background: linear-gradient(120deg, hsl(145 70% 90%), hsl(185 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-11"] { background: linear-gradient(120deg, hsl(145 26% 24%), hsl(185 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-12"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(145 70% 90%), hsl(185 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-12"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(145 26% 24%), hsl(185 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-13"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(145 70% 90%), hsl(185 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-13"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(145 26% 24%), hsl(185 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-14"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(145 70% 90%), hsl(185 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-14"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(145 26% 24%), hsl(185 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-15"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(145 70% 90%), hsl(185 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-15"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(145 26% 24%), hsl(185 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-16"] { background: linear-gradient(120deg, hsl(32 70% 90%), hsl(18 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-16"] { background: linear-gradient(120deg, hsl(32 26% 24%), hsl(18 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-17"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(32 70% 90%), hsl(18 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-17"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(32 26% 24%), hsl(18 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-18"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(32 70% 90%), hsl(18 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-18"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(32 26% 24%), hsl(18 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-19"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(32 70% 90%), hsl(18 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-19"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(32 26% 24%), hsl(18 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-20"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(32 70% 90%), hsl(18 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-20"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(32 26% 24%), hsl(18 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-21"] { background: linear-gradient(120deg, hsl(305 70% 90%), hsl(255 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-21"] { background: linear-gradient(120deg, hsl(305 26% 24%), hsl(255 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-22"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(305 70% 90%), hsl(255 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-22"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(305 26% 24%), hsl(255 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-23"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(305 70% 90%), hsl(255 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-23"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(305 26% 24%), hsl(255 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-24"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(305 70% 90%), hsl(255 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-24"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(305 26% 24%), hsl(255 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-25"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(305 70% 90%), hsl(255 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-25"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(305 26% 24%), hsl(255 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-26"] { background: linear-gradient(120deg, hsl(55 70% 90%), hsl(115 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-26"] { background: linear-gradient(120deg, hsl(55 26% 24%), hsl(115 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-27"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(55 70% 90%), hsl(115 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-27"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(55 26% 24%), hsl(115 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-28"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(55 70% 90%), hsl(115 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-28"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(55 26% 24%), hsl(115 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-29"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(55 70% 90%), hsl(115 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-29"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(55 26% 24%), hsl(115 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-30"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(55 70% 90%), hsl(115 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-30"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(55 26% 24%), hsl(115 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-31"] { background: linear-gradient(120deg, hsl(350 70% 90%), hsl(20 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-31"] { background: linear-gradient(120deg, hsl(350 26% 24%), hsl(20 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-32"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(350 70% 90%), hsl(20 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-32"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(350 26% 24%), hsl(20 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-33"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(350 70% 90%), hsl(20 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-33"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(350 26% 24%), hsl(20 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-34"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(350 70% 90%), hsl(20 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-34"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(350 26% 24%), hsl(20 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-35"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(350 70% 90%), hsl(20 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-35"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(350 26% 24%), hsl(20 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-36"] { background: linear-gradient(120deg, hsl(180 70% 90%), hsl(245 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-36"] { background: linear-gradient(120deg, hsl(180 26% 24%), hsl(245 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-37"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(180 70% 90%), hsl(245 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-37"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(180 26% 24%), hsl(245 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-38"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(180 70% 90%), hsl(245 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-38"] { background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff25 17px 19px), linear-gradient(125deg, hsl(180 26% 24%), hsl(245 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-39"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(180 70% 90%), hsl(245 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-39"] { background: radial-gradient(circle at 20% 80%, #ffffff80 0 1px, transparent 2px) 0 0 / 20px 20px, linear-gradient(125deg, hsl(180 26% 24%), hsl(245 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-40"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(180 70% 90%), hsl(245 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-40"] { background: repeating-radial-gradient(ellipse at 0% 100%, #ffffff40 0 2px, transparent 3px 23px), linear-gradient(125deg, hsl(180 26% 24%), hsl(245 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-41"] { background: linear-gradient(120deg, hsl(95 70% 90%), hsl(150 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-41"] { background: linear-gradient(120deg, hsl(95 26% 24%), hsl(150 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-banner="banner-42"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(95 70% 90%), hsl(150 68% 94%)) }
body.theme-dark :is(.profile-style-surface,.friend-profile-card)[data-banner="banner-42"] { background: radial-gradient(circle at 85% 15%, white 0, transparent 37%), linear-gradient(125deg, hsl(95 26% 24%), hsl(150 26% 19%)) }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-01"] { border: 2px solid #7097a5; box-shadow: 0 3px 12px #7097a533 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-02"] { border: 2px dashed #7097a5; box-shadow: 0 9px 20px #7097a533 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-03"] { border: 3px double #7097a5; box-shadow: inset 0 0 0 3px #7097a522, 0 12px 26px #7097a533 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-04"] { border: 2px solid #aa84af; box-shadow: 0 3px 12px #aa84af33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-05"] { border: 2px dashed #aa84af; box-shadow: 0 9px 20px #aa84af33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-06"] { border: 3px double #aa84af; box-shadow: inset 0 0 0 3px #aa84af22, 0 12px 26px #aa84af33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-07"] { border: 2px solid #b99568; box-shadow: 0 3px 12px #b9956833 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-08"] { border: 2px dashed #b99568; box-shadow: 0 9px 20px #b9956833 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-09"] { border: 3px double #b99568; box-shadow: inset 0 0 0 3px #b9956822, 0 12px 26px #b9956833 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-10"] { border: 2px solid #78947c; box-shadow: 0 3px 12px #78947c33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-11"] { border: 2px dashed #78947c; box-shadow: 0 9px 20px #78947c33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-12"] { border: 3px double #78947c; box-shadow: inset 0 0 0 3px #78947c22, 0 12px 26px #78947c33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-13"] { border: 2px solid #8791bd; box-shadow: 0 3px 12px #8791bd33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-14"] { border: 2px dashed #8791bd; box-shadow: 0 9px 20px #8791bd33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-15"] { border: 3px double #8791bd; box-shadow: inset 0 0 0 3px #8791bd22, 0 12px 26px #8791bd33 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-16"] { border: 2px solid #c78296; box-shadow: 0 3px 12px #c7829633 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-17"] { border: 2px dashed #c78296; box-shadow: 0 9px 20px #c7829633 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-18"] { border: 3px double #c78296; box-shadow: inset 0 0 0 3px #c7829622, 0 12px 26px #c7829633 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-19"] { border: 2px solid #858fa1; box-shadow: 0 3px 12px #858fa133 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-20"] { border: 2px dashed #858fa1; box-shadow: 0 9px 20px #858fa133 }
:is(.profile-style-surface,.friend-profile-card)[data-border="finish-21"] { border: 3px double #858fa1; box-shadow: inset 0 0 0 3px #858fa122, 0 12px 26px #858fa133 }
.profile-title-badge[data-title-style="pill"] { padding: 3px 9px; color: inherit; border-radius: 999px; background: #8b73b93d }
.profile-title-badge[data-title-style="outlined"] { padding: 3px 9px; color: inherit; border-radius: 6px; border: 1px solid currentColor }
.profile-title-badge[data-title-style="handwritten"] { padding: 3px 9px; color: inherit; font-family: 'Comic Sans MS', 'Bradley Hand', cursive; font-size: 1em }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-01"], .profile-title-badge[data-title-style="title-01"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 999px; background: #8898ad35; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-02"], .profile-title-badge[data-title-style="title-02"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 999px; background: #8898ad35; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-03"], .profile-title-badge[data-title-style="title-03"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 999px; background: #8898ad35; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-04"], .profile-title-badge[data-title-style="title-04"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 6px; border: 1px dashed currentColor; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-05"], .profile-title-badge[data-title-style="title-05"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 6px; border: 1px dashed currentColor; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-06"], .profile-title-badge[data-title-style="title-06"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 6px; border: 1px dashed currentColor; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-07"], .profile-title-badge[data-title-style="title-07"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-bottom: 2px solid currentColor; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-08"], .profile-title-badge[data-title-style="title-08"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-bottom: 2px solid currentColor; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-09"], .profile-title-badge[data-title-style="title-09"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-bottom: 2px solid currentColor; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-10"], .profile-title-badge[data-title-style="title-10"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 9px; background: #ac849635; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-11"], .profile-title-badge[data-title-style="title-11"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 9px; background: #ac849635; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-12"], .profile-title-badge[data-title-style="title-12"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 9px; background: #ac849635; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-13"], .profile-title-badge[data-title-style="title-13"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-left: 3px solid currentColor; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-14"], .profile-title-badge[data-title-style="title-14"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-left: 3px solid currentColor; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-15"], .profile-title-badge[data-title-style="title-15"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; border-left: 3px solid currentColor; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-16"], .profile-title-badge[data-title-style="title-16"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 3px; background: #8ab7a235; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-17"], .profile-title-badge[data-title-style="title-17"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 3px; background: #8ab7a235; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-18"], .profile-title-badge[data-title-style="title-18"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 3px; background: #8ab7a235; font-family: Georgia, serif }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-19"], .profile-title-badge[data-title-style="title-19"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; outline: 1px solid currentColor; outline-offset: 2px; font-weight: 600 }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-20"], .profile-title-badge[data-title-style="title-20"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; outline: 1px solid currentColor; outline-offset: 2px; font-style: italic }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="title-21"], .profile-title-badge[data-title-style="title-21"] { display: inline-block; padding: 3px 9px; color: inherit; border-radius: 4px; outline: 1px solid currentColor; outline-offset: 2px; font-family: Georgia, serif }
.styled-name[data-font="heavens"] { font-family: ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.12em, 1.05em + .65vw, 1.52em); font-weight: 950; font-stretch: expanded; line-height: 1.2; letter-spacing: -.055em; overflow-wrap: anywhere }
.styled-name[data-ink="spectrum"] { color: #653091; background: linear-gradient(95deg,#9d2058,#9a4d13,#876800,#187047,#106183,#4c3aa2,#8a2f80,#9d2058); background-size: 320% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: developer-spectrum 6s linear infinite }
.styled-name[data-ink="spectrum"] > :is(.display-role-badge,.profile-title-badge) { -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box; font-family: ui-sans-serif, system-ui, sans-serif; text-shadow: none; letter-spacing: .01em }
body.theme-dark .styled-name[data-ink="spectrum"],:is(.profile-style-surface,.friend-profile-card)[data-banner="firmament"] .styled-name[data-ink="spectrum"] { background-image: linear-gradient(95deg,#ff9cc8,#ffd292,#fff1a0,#a0f6bd,#91dfff,#cbb4ff,#f4acdd,#ff9cc8) }
.styled-name[data-effect="ascension"] { filter: drop-shadow(0 0 3px #a88bff70) drop-shadow(0 0 7px #eed08955); animation: developer-ascend 3.6s ease-in-out infinite }
.styled-name[data-ink="spectrum"][data-effect="ascension"] { animation: developer-spectrum 6s linear infinite, developer-ascend 3.6s ease-in-out infinite }
.avatar[data-frame="celestial"] { outline: 3px solid #f5dc9d; outline-offset: 3px; box-shadow: 0 0 0 7px #9d83ec66, 0 0 22px 10px #bea0ff80, inset 0 0 16px #fff1b477; animation: developer-orbit 6s ease-in-out infinite }
.avatar[data-shape="starcrest"] { border-radius: 50%; border: clamp(3px, .27em, 7px) solid #f9e6b4; clip-path: none }
:is(.profile-style-surface,.friend-profile-card)[data-banner="firmament"] { color: #fff7e5; background: radial-gradient(circle at 14% 22%,#fff5d8 0 2px,transparent 3px),radial-gradient(circle at 78% 43%,#bfabff 0 2px,transparent 3px),radial-gradient(circle at 46% 78%,#e8d5ff 0 1px,transparent 2px),radial-gradient(ellipse at 82% 5%,#845ed280,transparent 60%),linear-gradient(125deg,#111b3a,#332254 55%,#172f48); background-size: 90px 80px,130px 120px,70px 80px,auto,auto }
:is(.profile-style-surface,.friend-profile-card)[data-banner="firmament"] small { color: #f1e4ff }
:is(.profile-style-surface,.friend-profile-card)[data-border="radiance"] { border: 3px solid #e8c77d; box-shadow: 0 0 0 2px #755da2, 0 10px 32px #5d51a199, inset 0 0 35px #e9c87925; animation: developer-card-glow 5s ease-in-out infinite }
:is(.profile-style-surface,.friend-profile-card) small[data-title-style="sovereign"],.profile-title-badge[data-title-style="sovereign"] { display:inline-block; padding:5px 12px; border:1px solid #efcc82; border-radius:999px; background:linear-gradient(120deg,#f5d582,#efadcf,#b9aeff); color:#21142e; font-weight:900; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 0 16px #e5bb8c85 }
@keyframes developer-spectrum { to { background-position: 320% 0 } }
@keyframes developer-ascend { 50% { filter: drop-shadow(0 0 5px #fff2ad88) drop-shadow(0 0 12px #ab87ff99) } }
@keyframes developer-orbit { 50% { box-shadow: 0 0 0 8px #f2d69088, 0 0 30px 14px #9d83ec99, inset 0 0 22px #fff1b499 } }
@keyframes developer-card-glow { 50% { box-shadow: 0 0 0 3px #a997d4, 0 12px 44px #b699ea99, inset 0 0 46px #f3d58a44 } }
@media (prefers-reduced-motion: reduce) { .styled-name[data-ink="spectrum"],.styled-name[data-effect="ascension"],.avatar[data-frame="celestial"],:is(.profile-style-surface,.friend-profile-card)[data-border="radiance"] { animation: none } }
@media (forced-colors: active) { .styled-name[data-ink="spectrum"] { -webkit-text-fill-color: currentColor; background: none } }