@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Baloo+2:wght@400..700&family=Berkshire+Swash&family=Bitcount+Grid+Double&family=Cherry+Bomb+One&family=Chewy&family=Cookie&family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:ital,wght@1,600&family=Croissant+One&family=DynaPuff:wght@400..700&family=Eagle+Lake&family=Eater&family=Emilys+Candy&family=Fredoka:wght@600..700&family=Griffy&family=Henny+Penny&family=Imperial+Script&family=Leckerli+One&family=Montez&family=Mystery+Quest&family=Parisienne&family=Petit+Formal+Script&family=Pirata+One&family=Pixelify+Sans:wght@400..700&family=Satisfy&family=UnifrakturCook:wght@700&display=swap');

/* Title effects belong to the text itself. Post themes may style the outer
   .post-mini-title badge/background without erasing the equipped title effect. */
.milk-title {
    display: inline-block;
    padding-inline: .16em;
    font-weight: 800;
    letter-spacing: .025em;
}

.post-mini-title > .milk-title {
    max-width: 100%;
    text-shadow: none !important;
}

/* Plain/Tier 1 titles should not inherit theme effects. Tier 2 and 3 need
   their own drop-shadows and animations, so do not flatten their filters. */
.post-mini-title > .milk-title:not(.milk-title-tier-2):not(.milk-title-tier-3) {
    filter: none !important;
}

/* Give decorative titles enough breathing room inside themed mini-profile badges. */
.post-mini-title {
    min-width: 6.25rem !important;
    min-height: 1.55rem;
    padding: .25rem .68rem !important;
    box-sizing: border-box;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.post-mini-title > .milk-title {
    max-width: none;
    overflow: visible;
}

.milk-title-tier-1,
.milk-title-tier-2,
.milk-title-tier-3 {
    background-image: linear-gradient(
        90deg,
        var(--title-gradient-start, #d8b6d3),
        var(--title-gradient-end, #d1d2dd)
    ) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Tier 2 keeps the title's Tier 1 gradient and adds its signature typeface. */
.milk-title-tier-2,
.milk-title-tier-3 { line-height: 1.15; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-dreamer { font-family: 'Cookie', cursive; font-size: 1.28em; font-weight: 400; letter-spacing: .01em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-fairy { font-family: 'Emilys Candy', Georgia, serif; font-size: 1.06em; font-weight: 400; letter-spacing: .025em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical { font-family: 'Fontdiner Swanky', Georgia, serif; font-size: .94em; font-weight: 400; letter-spacing: .01em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-witchy { font-family: 'Imperial Script', cursive; font-size: 1.34em; font-weight: 400; letter-spacing: .01em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-cozy { font-family: 'DynaPuff', sans-serif; font-size: .96em; font-weight: 600; letter-spacing: .005em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-gothic { font-family: 'UnifrakturCook', Georgia, serif; font-size: 1.08em; font-weight: 700; letter-spacing: .02em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-pixel { font-family: 'Bitcount Grid Double', ui-monospace, monospace; font-size: 1em; font-weight: 400; letter-spacing: .015em; text-transform: none; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-moonlit { font-family: 'Parisienne', cursive; font-size: 1.28em; font-weight: 400; letter-spacing: .01em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-whimsical { font-family: 'Griffy', Georgia, serif; font-size: 1.06em; font-weight: 400; letter-spacing: .025em; }
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-enchanted { font-family: 'Montez', cursive; font-size: 1.3em; font-weight: 400; letter-spacing: .01em; }

/* Mini-profile themes intentionally style the outer badge, but must not alter
   the equipped title's capitalization, font metrics, or signature typeface. */
.post-mini-title > .milk-title {
    font-size: .78rem !important;
    line-height: 1.22 !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none !important;
    letter-spacing: .025em !important;
    white-space: nowrap;
}

/* Use fixed mini-profile sizes instead of em values. The outer badge is only
   .58rem in forum_posts.css, so em-based Tier 2 fonts were being shrunk. */
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-dreamer { font-size: 1.12rem !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-fairy { font-size: .86rem !important; font-weight: 400 !important; letter-spacing: .025em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical { font-size: .82rem !important; padding-inline: .3em !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-witchy { font-size: 1.16rem !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-cozy { font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .005em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-gothic { font-size: .9rem !important; font-weight: 700 !important; letter-spacing: .02em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-pixel { font-size: .8rem !important; font-weight: 400 !important; letter-spacing: .015em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-moonlit { font-size: 1.12rem !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-whimsical { font-size: .88rem !important; font-weight: 400 !important; letter-spacing: .025em !important; }
.post-mini-title > .milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-enchanted { font-size: 1.14rem !important; font-weight: 400 !important; letter-spacing: .01em !important; }

/* Tier 2 readability: decorative fonts keep their gradient, with a very soft
   neutral drop shadow so pale colors remain legible on light theme badges. */
.milk-title-tier-2 {
    filter:
        drop-shadow(0 1px 0 rgba(67, 46, 58, .34))
        drop-shadow(0 0 1px rgba(67, 46, 58, .18)) !important;
}

/* Keep the small forum version crisp without turning the scripts muddy. */
.post-mini-title > .milk-title-tier-2 {
    filter:
        drop-shadow(0 .75px 0 rgba(67, 46, 58, .4))
        drop-shadow(0 0 .65px rgba(67, 46, 58, .2)) !important;
}

/* Tier 3: Animated Gradient
   Every Tier 3 title uses the same clear progression: its Tier 2 signature
   font remains, while its curated gradient moves in one seamless loop. */
.milk-title-tier-3 {
    position: relative;
    background-image: linear-gradient(
        90deg,
        var(--title-gradient-start, #d8b6d3) 0%,
        var(--title-gradient-end, #d1d2dd) 25%,
        var(--title-gradient-start, #d8b6d3) 50%,
        var(--title-gradient-end, #d1d2dd) 75%,
        var(--title-gradient-start, #d8b6d3) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
    filter:
        drop-shadow(0 1px 0 rgba(67, 46, 58, .4))
        drop-shadow(0 0 1.25px rgba(67, 46, 58, .22)) !important;
    will-change: background-position;
}

/* A duplicated start/end pattern makes the loop continuous: the final frame
   is visually identical to the first, so there is no wipe or snap-back. */
@keyframes milk-title-gradient-flow {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

/* The themed forum badge remains untouched; only its inner text animates. */
.post-mini-title > .milk-title-tier-3 {
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-3 {
        animation: none !important;
        background-position: 50% 50% !important;
        transform: none !important;
    }
}


/* User accessibility preference: remove motion across Milk while preserving
   final visual states. The class is placed on <body> for the signed-in user. */
.site-animations-off *,
.site-animations-off *::before,
.site-animations-off *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Full profile titles are treated like an actual honorific above the name. */
.profile-display-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 .18rem;
    font-size: 1.18rem;
    line-height: 1.2;
    overflow: visible;
}
.profile-display-title .milk-title {
    font-size: 1.32em;
    overflow: visible;
}
.profile-display-title .milk-title-font-magical {
    padding-inline: .35em;
}


/* Magical glyph safety
   Fontdiner Swanky's capital G has ink that extends outside the browser's
   normal text paint box. Give the OUTER containers real room instead of
   repeatedly padding the gradient-clipped text itself. */
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical {
    padding-inline: .18em !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
}

.post-mini-title:has(> .milk-title-font-magical) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-width: 7.25rem !important;
    overflow: visible !important;
}

.profile-display-title:has(.milk-title-font-magical) {
    padding-left: .8rem;
    padding-right: .45rem;
    overflow: visible !important;
}

.profile-display-title:has(.milk-title-font-magical) .milk-title-font-magical {
    overflow: visible !important;
}

/* Tier 3 contrast polish
   Tier 3 should read clearly as an upgrade even on white and pastel badges.
   color-mix keeps each title's own palette while creating richer anchor tones. */
.milk-title-tier-3 {
    --title-tier3-deep-start: color-mix(
        in srgb,
        var(--title-gradient-start, #d8b6d3) 72%,
        #6f315f 28%
    );
    --title-tier3-deep-end: color-mix(
        in srgb,
        var(--title-gradient-end, #d1d2dd) 72%,
        #4b587d 28%
    );
    background-image: linear-gradient(
        90deg,
        var(--title-tier3-deep-start) 0%,
        var(--title-gradient-end, #d1d2dd) 12.5%,
        var(--title-tier3-deep-end) 25%,
        var(--title-gradient-start, #d8b6d3) 37.5%,
        var(--title-tier3-deep-start) 50%,
        var(--title-gradient-end, #d1d2dd) 62.5%,
        var(--title-tier3-deep-end) 75%,
        var(--title-gradient-start, #d8b6d3) 87.5%,
        var(--title-tier3-deep-start) 100%
    ) !important;
    background-size: 200% 100% !important;
    filter:
        saturate(1.28)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(54, 35, 48, .46))
        drop-shadow(0 0 1.2px rgba(54, 35, 48, .25)) !important;
}

.post-mini-title > .milk-title-tier-3 {
    filter:
        saturate(1.34)
        contrast(1.1)
        drop-shadow(0 .8px 0 rgba(54, 35, 48, .52))
        drop-shadow(0 0 .8px rgba(54, 35, 48, .3)) !important;
}

/* Fontdiner Swanky paints the capital G to the left of its measured glyph box.
   Real spacer glyphs expand the background-clipped text canvas itself; ordinary
   padding and outer-container room do not reliably affect that WebKit paint box. */
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical::before,
.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical::after {
    content: "\00a0";
    display: inline;
    font-family: inherit;
    font-size: .48em;
    letter-spacing: 0;
}

.milk-title:is(.milk-title-tier-2, .milk-title-tier-3).milk-title-font-magical {
    padding-inline: 0 !important;
    min-width: max-content;
}

.profile-display-title:has(.milk-title-font-magical),
.post-mini-title:has(> .milk-title-font-magical) {
    overflow: visible !important;
}


/* Stable title paint layer
   Fontdiner Swanky's G can be initially clipped by Chromium/WebKit until a
   hover causes a repaint. The outer element now owns layout and breathing
   room; the inner ink span owns gradient clipping and animation. */
.milk-title:has(> .milk-title-ink) {
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
    animation: none !important;
    filter: none !important;
}

.milk-title > .milk-title-ink {
    display: inline-block;
    box-sizing: content-box;
    min-width: max-content;
    overflow: visible !important;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
    isolation: isolate;
}

.milk-title-tier-1 > .milk-title-ink,
.milk-title-tier-2 > .milk-title-ink,
.milk-title-tier-3 > .milk-title-ink {
    background-image: linear-gradient(
        90deg,
        var(--title-gradient-start, #d8b6d3),
        var(--title-gradient-end, #d1d2dd)
    ) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.milk-title-tier-2 > .milk-title-ink {
    filter:
        drop-shadow(0 1px 0 rgba(67, 46, 58, .34))
        drop-shadow(0 0 1px rgba(67, 46, 58, .18)) !important;
}

.milk-title-tier-3 > .milk-title-ink {
    --title-tier3-deep-start: color-mix(in srgb, var(--title-gradient-start, #d8b6d3) 72%, #6f315f 28%);
    --title-tier3-deep-end: color-mix(in srgb, var(--title-gradient-end, #d1d2dd) 72%, #4b587d 28%);
    background-image: linear-gradient(
        90deg,
        var(--title-tier3-deep-start) 0%,
        var(--title-gradient-end, #d1d2dd) 12.5%,
        var(--title-tier3-deep-end) 25%,
        var(--title-gradient-start, #d8b6d3) 37.5%,
        var(--title-tier3-deep-start) 50%,
        var(--title-gradient-end, #d1d2dd) 62.5%,
        var(--title-tier3-deep-end) 75%,
        var(--title-gradient-start, #d8b6d3) 87.5%,
        var(--title-tier3-deep-start) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
    filter:
        saturate(1.28)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(54, 35, 48, .46))
        drop-shadow(0 0 1.2px rgba(54, 35, 48, .25)) !important;
    will-change: background-position;
}

/* Literal non-breaking spaces in the template expand the actual text fragment,
   unlike pseudo-element padding, which Chromium may omit from the clipped ink box. */
.milk-title-font-magical > .milk-title-ink {
    padding-inline: .08em;
}

.post-mini-title > .milk-title-tier-2 > .milk-title-ink,
.post-mini-title > .milk-title-tier-3 > .milk-title-ink {
    filter:
        saturate(1.18)
        contrast(1.06)
        drop-shadow(0 .8px 0 rgba(54, 35, 48, .48))
        drop-shadow(0 0 .8px rgba(54, 35, 48, .26)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-3 > .milk-title-ink {
        animation: none !important;
        background-position: 50% 50% !important;
    }
}

.site-animations-off .milk-title-tier-3 > .milk-title-ink {
    animation: none !important;
    background-position: 50% 50% !important;
}


/* Magical title font replacement
   Mystery Quest is used at every tier, including plain Tier 0 and gradient Tier 1. */
.milk-title.milk-title-font-magical {
    font-family: 'Mystery Quest', Georgia, serif !important;
    font-size: 1.06em;
    font-weight: 400 !important;
    letter-spacing: .015em !important;
    padding-inline: .12em !important;
    margin: 0 !important;
    overflow: visible !important;
}

.post-mini-title > .milk-title.milk-title-font-magical {
    font-family: 'Mystery Quest', Georgia, serif !important;
    font-size: .9rem !important;
    padding-inline: .12em !important;
}

.profile-display-title .milk-title.milk-title-font-magical {
    font-family: 'Mystery Quest', Georgia, serif !important;
    font-size: 1.38em !important;
    padding-inline: .08em !important;
}

/* Mystery Quest has normal glyph metrics, so disable the old Fontdiner spacer hack. */
.milk-title.milk-title-font-magical::before,
.milk-title.milk-title-font-magical::after {
    content: none !important;
}
.milk-title.milk-title-font-magical > .milk-title-ink {
    padding-inline: 0 !important;
}


/* 2026-07 polish: cleaner full-profile title alignment, slower Tier 3 flow,
   and a mintier Enchanted palette. These overrides intentionally sit at the
   end of the file so they win over earlier Magical-era experiments. */
.profile-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
}

.profile-display-title {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 0 .04rem;
    padding: .04rem 0 .16rem;
    font-size: 1.08rem;
    line-height: 1.05;
    text-align: left;
    overflow: visible;
}

.profile-display-title .milk-title {
    display: inline-block;
    font-size: 1.24em;
    line-height: 1.02;
    padding: .02em .06em .12em 0;
    overflow: visible;
    vertical-align: top;
}

.profile-display-title .milk-title.milk-title-font-magical {
    font-size: 1.26em !important;
    padding: .03em .04em .16em 0 !important;
    margin: 0 !important;
}

.profile-display-title:has(.milk-title-font-magical) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* Keep mini-profile Magical roomy, but stop full-profile indents from old hacks. */
.post-mini-title:has(> .milk-title-font-magical) {
    padding-left: .82rem !important;
    padding-right: .82rem !important;
    min-width: 6.9rem !important;
}

.profile-username {
    line-height: 1.05;
}

/* Enchanted reads prettier with a mintier pastel start color. */
.milk-title.milk-title-font-enchanted {
    --title-gradient-start: #b8ead8 !important;
    --title-gradient-end: #d7c3f0 !important;
}

/* Tier 3 should feel elegant, not hurried. */
.milk-title-tier-3,
.milk-title-tier-3 > .milk-title-ink {
    animation-duration: 7.2s !important;
}


/* Full-profile title descender safety
   Decorative fonts such as Mystery Quest need a taller paint box below the
   baseline. Keep the left alignment, but add real bottom breathing room. */
.profile-display-title {
    line-height: 1.24 !important;
    padding-top: .08rem !important;
    padding-bottom: .34rem !important;
    overflow: visible !important;
}

.profile-display-title .milk-title,
.profile-display-title .milk-title > .milk-title-ink {
    line-height: 1.18 !important;
    padding-bottom: .16em !important;
    overflow: visible !important;
}

.profile-display-title .milk-title.milk-title-font-magical,
.profile-display-title .milk-title.milk-title-font-magical > .milk-title-ink {
    line-height: 1.22 !important;
    padding-bottom: .22em !important;
}


/* Tier 4 · Playful Dimension
   Keeps the Tier 3 living gradient, adds a richer dimensional finish, and
   gives each title a restrained per-letter motion. */
.milk-title-tier-4 {
    position: relative;
    line-height: 1.16;
}

.milk-title-tier-4 > .milk-title-ink {
    --title-tier4-deep-start: color-mix(in srgb, var(--title-gradient-start, #d8b6d3) 68%, #56334d 32%);
    --title-tier4-deep-end: color-mix(in srgb, var(--title-gradient-end, #d1d2dd) 68%, #3e506f 32%);
    display: inline-flex;
    align-items: baseline;
    overflow: visible !important;
    background-image: linear-gradient(
        90deg,
        var(--title-tier4-deep-start) 0%,
        var(--title-gradient-end, #d1d2dd) 12.5%,
        var(--title-tier4-deep-end) 25%,
        var(--title-gradient-start, #d8b6d3) 37.5%,
        var(--title-tier4-deep-start) 50%,
        var(--title-gradient-end, #d1d2dd) 62.5%,
        var(--title-tier4-deep-end) 75%,
        var(--title-gradient-start, #d8b6d3) 87.5%,
        var(--title-tier4-deep-start) 100%
    ) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
    filter:
        saturate(1.35)
        contrast(1.1)
        drop-shadow(0 -1px 0 rgba(255,255,255,.42))
        drop-shadow(0 1.5px 0 rgba(52,34,47,.48))
        drop-shadow(0 2.5px 1.4px rgba(52,34,47,.23)) !important;
    will-change: background-position;
}

.milk-title-tier-4 .milk-title-letter {
    display: inline-block;
    position: relative;
    transform-origin: 50% 82%;
    animation-duration: 5.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--letter-index, 0) * .11s);
    will-change: transform;
}

/* Title-specific motion personalities. Most of each loop is intentionally still. */
.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-float-wave; }
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-flutter; }
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-cascade; }
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-sway; }
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-squish; }
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-rise; }
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-pixel-step; animation-timing-function: steps(2, end); }
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-moon-drift; }
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-bouncy; animation-delay: calc(var(--letter-index, 0) * .09s + (var(--letter-index, 0) % 2) * .12s); }
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-ripple; }

@keyframes milk-letter-float-wave {
    0%, 18%, 68%, 100% { transform: translateY(0); }
    30% { transform: translateY(-1.8px); }
    42% { transform: translateY(.4px); }
}
@keyframes milk-letter-flutter {
    0%, 20%, 70%, 100% { transform: translateY(0) rotate(0); }
    31% { transform: translateY(-2px) rotate(-2deg); }
    39% { transform: translateY(-.6px) rotate(1.5deg); }
    47% { transform: translateY(0) rotate(0); }
}
@keyframes milk-letter-cascade {
    0%, 18%, 72%, 100% { transform: translateY(0) scale(1); }
    31% { transform: translateY(-2.2px) scale(1.035); }
    42% { transform: translateY(.3px) scale(.99); }
}
@keyframes milk-letter-sway {
    0%, 18%, 72%, 100% { transform: translateY(0) rotate(0); }
    31% { transform: translateY(-.8px) rotate(-2deg); }
    43% { transform: translateY(.2px) rotate(1.3deg); }
}
@keyframes milk-letter-squish {
    0%, 18%, 72%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-1.4px) scale(1.035, .97); }
    40% { transform: translateY(.35px) scale(.98, 1.035); }
    50% { transform: translateY(0) scale(1); }
}
@keyframes milk-letter-rise {
    0%, 20%, 72%, 100% { transform: translateY(0); }
    34% { transform: translateY(-1.7px); }
    48% { transform: translateY(0); }
}
@keyframes milk-letter-pixel-step {
    0%, 20%, 70%, 100% { transform: translate(0,0); }
    30% { transform: translateY(-2px); }
    38% { transform: translate(1px,-1px); }
    46% { transform: translate(0,0); }
}
@keyframes milk-letter-moon-drift {
    0%, 18%, 72%, 100% { transform: translateY(0) translateX(0); }
    32% { transform: translateY(-1.6px) translateX(.35px); }
    45% { transform: translateY(-.2px) translateX(0); }
}
@keyframes milk-letter-bouncy {
    0%, 18%, 70%, 100% { transform: translateY(0) rotate(0); }
    29% { transform: translateY(-2.3px) rotate(-1deg); }
    39% { transform: translateY(.5px) rotate(1deg); }
    48% { transform: translateY(0) rotate(0); }
}
@keyframes milk-letter-ripple {
    0%, 18%, 72%, 100% { transform: translateY(0) scale(1); }
    31% { transform: translateY(-1.8px) scale(1.025); }
    42% { transform: translateY(.2px) scale(1); }
}

/* Tier 4 uses the same signature fonts as Tier 2/3. */
.milk-title:is(.milk-title-tier-4).milk-title-font-dreamer { font-family:'Cookie',cursive; font-size:1.28em; font-weight:400; letter-spacing:.01em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-fairy { font-family:'Emilys Candy',Georgia,serif; font-size:1.06em; font-weight:400; letter-spacing:.025em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-magical { font-family:'Mystery Quest',Georgia,serif !important; font-size:1.06em; font-weight:400 !important; letter-spacing:.015em !important; }
.milk-title:is(.milk-title-tier-4).milk-title-font-witchy { font-family:'Imperial Script',cursive; font-size:1.34em; font-weight:400; letter-spacing:.01em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-cozy { font-family:'DynaPuff',sans-serif; font-size:.96em; font-weight:600; letter-spacing:.005em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-gothic { font-family:'UnifrakturCook',Georgia,serif; font-size:1.08em; font-weight:700; letter-spacing:.02em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-pixel { font-family:'Bitcount Grid Double',ui-monospace,monospace; font-size:1em; font-weight:400; letter-spacing:.015em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-moonlit { font-family:'Parisienne',cursive; font-size:1.28em; font-weight:400; letter-spacing:.01em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-whimsical { font-family:'Griffy',Georgia,serif; font-size:1.06em; font-weight:400; letter-spacing:.025em; }
.milk-title:is(.milk-title-tier-4).milk-title-font-enchanted { font-family:'Montez',cursive; font-size:1.3em; font-weight:400; letter-spacing:.01em; }

.post-mini-title > .milk-title-tier-4 { font-style:normal; font-variant:normal; text-transform:none !important; white-space:nowrap; }
.post-mini-title > .milk-title-tier-4 > .milk-title-ink {
    filter:
        saturate(1.4)
        contrast(1.12)
        drop-shadow(0 -.65px 0 rgba(255,255,255,.42))
        drop-shadow(0 1px 0 rgba(52,34,47,.52))
        drop-shadow(0 1.8px .8px rgba(52,34,47,.25)) !important;
}
.post-mini-title > .milk-title-tier-4.milk-title-font-dreamer { font-size:1.12rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-fairy { font-size:.86rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-magical { font-size:.9rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-witchy { font-size:1.16rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-cozy { font-size:.78rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-gothic { font-size:.9rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-pixel { font-size:.8rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-moonlit { font-size:1.12rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-whimsical { font-size:.88rem !important; }
.post-mini-title > .milk-title-tier-4.milk-title-font-enchanted { font-size:1.14rem !important; }

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 > .milk-title-ink,
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
        background-position: 50% 50% !important;
    }
}
.site-animations-off .milk-title-tier-4 > .milk-title-ink,
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
    background-position: 50% 50% !important;
}

/* Tier 4 visibility fix
   The title is split into individual spans, so the gradient must be painted on
   each letter rather than clipped on the flex parent. */
.milk-title-tier-4 > .milk-title-ink {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
    animation: none !important;
    filter: none !important;
}

.milk-title-tier-4 .milk-title-letter {
    --title-tier4-deep-start: color-mix(in srgb, var(--title-gradient-start, #d8b6d3) 68%, #56334d 32%);
    --title-tier4-deep-end: color-mix(in srgb, var(--title-gradient-end, #d1d2dd) 68%, #3e506f 32%);
    background-image: linear-gradient(
        90deg,
        var(--title-tier4-deep-start) 0%,
        var(--title-gradient-end, #d1d2dd) 25%,
        var(--title-tier4-deep-end) 50%,
        var(--title-gradient-start, #d8b6d3) 75%,
        var(--title-tier4-deep-start) 100%
    ) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
        saturate(1.34)
        contrast(1.1)
        drop-shadow(0 -1px 0 rgba(255,255,255,.4))
        drop-shadow(0 1.4px 0 rgba(52,34,47,.46))
        drop-shadow(0 2.2px 1.2px rgba(52,34,47,.22)) !important;
}

.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-float-wave 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-flutter 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-cascade 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-sway 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-squish 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-rise 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-pixel-step 5.6s steps(2, end) infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-moon-drift 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-bouncy 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .09s + (var(--letter-index, 0) % 2) * .12s);
}
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-ripple 5.6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        background-position: 50% 50% !important;
        transform: none !important;
    }
}
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    background-position: 50% 50% !important;
    transform: none !important;
}


/* Batch two title families: Haunted, Mossy, Electric, Petal, and Blushing. */
.milk-title.milk-title-font-haunted {
    font-family: 'Eater', Georgia, serif !important;
    font-size: 1.02em;
    font-weight: 400 !important;
    letter-spacing: .025em !important;
}
.milk-title.milk-title-font-mossy {
    font-family: 'Croissant One', Georgia, serif !important;
    font-size: 1.01em;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
}
.milk-title.milk-title-font-electric {
    font-family: 'Audiowide', ui-sans-serif, sans-serif !important;
    font-size: .88em;
    font-weight: 400 !important;
    letter-spacing: .035em !important;
}
.milk-title.milk-title-font-petal {
    font-family: 'Berkshire Swash', Georgia, serif !important;
    font-size: 1.08em;
    font-weight: 400 !important;
    letter-spacing: .012em !important;
}
.milk-title.milk-title-font-blushing {
    font-family: 'Petit Formal Script', cursive !important;
    font-size: 1.18em;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
}

.post-mini-title > .milk-title.milk-title-font-haunted { font-size: .82rem !important; }
.post-mini-title > .milk-title.milk-title-font-mossy { font-size: .8rem !important; }
.post-mini-title > .milk-title.milk-title-font-electric { font-size: .68rem !important; letter-spacing: .025em !important; }
.post-mini-title > .milk-title.milk-title-font-petal { font-size: .9rem !important; }
.post-mini-title > .milk-title.milk-title-font-blushing { font-size: 1rem !important; }

.profile-display-title .milk-title.milk-title-font-haunted { font-size: 1.2em !important; }
.profile-display-title .milk-title.milk-title-font-mossy { font-size: 1.16em !important; }
.profile-display-title .milk-title.milk-title-font-electric { font-size: .98em !important; }
.profile-display-title .milk-title.milk-title-font-petal { font-size: 1.24em !important; }
.profile-display-title .milk-title.milk-title-font-blushing { font-size: 1.34em !important; }

/* Tier 4 personalities for the second title batch. */
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-haunted-drift 6.2s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .12s);
}
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-mossy-sway 6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .1s);
}
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-electric-step 5.8s steps(2, end) infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .08s);
}
.milk-title-font-petal.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-petal-open 6s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .11s);
}
.milk-title-font-blushing.milk-title-tier-4 .milk-title-letter {
    animation: milk-title-gradient-flow 7.2s linear infinite, milk-letter-blushing-flutter 6.1s ease-in-out infinite;
    animation-delay: 0s, calc(var(--letter-index, 0) * .105s);
}

@keyframes milk-letter-haunted-drift {
    0%, 18%, 72%, 100% { transform: translate(0, 0); }
    31% { transform: translate(.35px, -2px); }
    43% { transform: translate(-.25px, -.45px); }
}
@keyframes milk-letter-mossy-sway {
    0%, 18%, 72%, 100% { transform: translateY(0) rotate(0); }
    31% { transform: translateY(-1.25px) rotate(-1.6deg); }
    44% { transform: translateY(.2px) rotate(1.1deg); }
}
@keyframes milk-letter-electric-step {
    0%, 20%, 72%, 100% { transform: translate(0, 0); }
    30% { transform: translate(0, -2px); }
    36% { transform: translate(1px, -2px); }
    43% { transform: translate(-1px, 0); }
    49% { transform: translate(0, 0); }
}
@keyframes milk-letter-petal-open {
    0%, 18%, 72%, 100% { transform: translateY(0) scale(1); }
    31% { transform: translateY(-1.7px) scale(1.045, .98); }
    43% { transform: translateY(.2px) scale(.99, 1.025); }
}
@keyframes milk-letter-blushing-flutter {
    0%, 20%, 72%, 100% { transform: translateY(0) rotate(0); }
    31% { transform: translateY(-1.65px) rotate(-1.3deg); }
    39% { transform: translateY(-.45px) rotate(1deg); }
    47% { transform: translateY(0) rotate(0); }
}


/* Title tier corrections
   Tier 0 and Tier 1 intentionally use Milk's normal interface typeface.
   Signature fonts begin at Tier 2 and remain available in higher tiers. */
.milk-title.milk-title-tier-0,
.milk-title.milk-title-tier-1,
.post-mini-title > .milk-title.milk-title-tier-0,
.post-mini-title > .milk-title.milk-title-tier-1,
.profile-display-title .milk-title.milk-title-tier-0,
.profile-display-title .milk-title.milk-title-tier-1 {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
}
.post-mini-title > .milk-title.milk-title-tier-0,
.post-mini-title > .milk-title.milk-title-tier-1 {
    font-size: .78rem !important;
    line-height: 1.22 !important;
}
.profile-display-title .milk-title.milk-title-tier-0,
.profile-display-title .milk-title.milk-title-tier-1 {
    font-size: 1.24em !important;
    line-height: 1.2 !important;
}

/* Tier 4 gradient correction
   Paint one continuous living gradient across the whole word. Individual
   letters only animate their position, preventing the broken per-letter
   gradient/zipper effect. */
.milk-title-tier-4 > .milk-title-ink {
    display: inline-block !important;
    background-image: linear-gradient(
        90deg,
        var(--title-tier4-deep-start, var(--title-gradient-start, #d8b6d3)) 0%,
        var(--title-gradient-end, #d1d2dd) 25%,
        var(--title-tier4-deep-end, var(--title-gradient-end, #d1d2dd)) 50%,
        var(--title-gradient-start, #d8b6d3) 75%,
        var(--title-tier4-deep-start, var(--title-gradient-start, #d8b6d3)) 100%
    ) !important;
    background-size: 220% 100% !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
    filter:
        saturate(1.34)
        contrast(1.1)
        drop-shadow(0 -1px 0 rgba(255,255,255,.4))
        drop-shadow(0 1.4px 0 rgba(52,34,47,.46))
        drop-shadow(0 2.2px 1.2px rgba(52,34,47,.22)) !important;
}
.milk-title-tier-4 .milk-title-letter {
    display: inline-block;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: none !important;
    will-change: transform;
    animation-duration: 5.8s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .11s) !important;
}
.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-float-wave !important; }
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-flutter !important; }
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-cascade !important; }
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-sway !important; }
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-squish !important; }
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-rise !important; }
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-pixel-step !important; animation-timing-function: steps(2,end) !important; }
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-moon-drift !important; }
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-bouncy !important; }
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-ripple !important; }
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-haunted-drift !important; }
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-mossy-sway !important; }
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-electric-step !important; animation-timing-function: steps(2,end) !important; }
.milk-title-font-petal.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-petal-open !important; }
.milk-title-font-blushing.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-blushing-flutter !important; }

/* Respect both operating-system and per-account motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-3 > .milk-title-ink,
    .milk-title-tier-4 > .milk-title-ink,
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
        background-position: 50% 50% !important;
    }
}
.site-animations-off .milk-title-tier-3 > .milk-title-ink,
.site-animations-off .milk-title-tier-4 > .milk-title-ink,
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
    background-position: 50% 50% !important;
}


/* Tier 4 visibility + shared-gradient correction
   Parent background-clip cannot paint through descendant letter spans in
   Chromium/WebKit. Each letter therefore owns a synchronized slice of the
   same repeated gradient. The motion remains word-coherent instead of each
   character running an unrelated miniature gradient. */
.milk-title-tier-4 > .milk-title-ink {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    animation: none !important;
    filter: none !important;
}

.milk-title-tier-4 .milk-title-letter {
    --tier4-gradient-start: 0%;
    --tier4-gradient-end: 200%;
    background-image: linear-gradient(
        90deg,
        var(--title-tier4-deep-start, var(--title-gradient-start, #d8b6d3)) 0%,
        var(--title-gradient-end, #d1d2dd) 25%,
        var(--title-tier4-deep-end, var(--title-gradient-end, #d1d2dd)) 50%,
        var(--title-gradient-start, #d8b6d3) 75%,
        var(--title-tier4-deep-start, var(--title-gradient-start, #d8b6d3)) 100%
    ) !important;
    background-size: 420% 100% !important;
    background-position: var(--tier4-gradient-start) 50%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
        saturate(1.34)
        contrast(1.1)
        drop-shadow(0 -1px 0 rgba(255,255,255,.4))
        drop-shadow(0 1.4px 0 rgba(52,34,47,.46))
        drop-shadow(0 2.2px 1.2px rgba(52,34,47,.22)) !important;
    animation-duration: 5.8s, 7.2s !important;
    animation-timing-function: ease-in-out, linear !important;
    animation-iteration-count: infinite, infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .11s), 0s !important;
}

/* Append the shared gradient motion to each title's letter-motion animation. */
.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-float-wave, milk-tier4-shared-gradient !important; }
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-flutter, milk-tier4-shared-gradient !important; }
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-cascade, milk-tier4-shared-gradient !important; }
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-sway, milk-tier4-shared-gradient !important; }
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-squish, milk-tier4-shared-gradient !important; }
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-rise, milk-tier4-shared-gradient !important; }
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-pixel-step, milk-tier4-shared-gradient !important; animation-timing-function: steps(2,end), linear !important; }
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-moon-drift, milk-tier4-shared-gradient !important; }
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-bouncy, milk-tier4-shared-gradient !important; }
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-ripple, milk-tier4-shared-gradient !important; }
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-haunted-drift, milk-tier4-shared-gradient !important; }
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-mossy-sway, milk-tier4-shared-gradient !important; }
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-electric-step, milk-tier4-shared-gradient !important; animation-timing-function: steps(2,end), linear !important; }
.milk-title-font-petal.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-petal-open, milk-tier4-shared-gradient !important; }
.milk-title-font-blushing.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-blushing-flutter, milk-tier4-shared-gradient !important; }

@keyframes milk-tier4-shared-gradient {
    from { background-position: var(--tier4-gradient-start) 50%; }
    to { background-position: var(--tier4-gradient-end) 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
        background-position: var(--tier4-gradient-start) 50% !important;
    }
}
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
    background-position: var(--tier4-gradient-start) 50% !important;
}


/* Tier 4 gradient motion repair
   Explicit percentage endpoints are assigned by JavaScript for each letter.
   This avoids invalid calc(unitless * %) keyframes in Chromium/WebKit. */
.milk-title-tier-4 .milk-title-letter {
    background-size: 520% 100% !important;
}

@keyframes milk-tier4-shared-gradient {
    from { background-position: var(--tier4-gradient-start, 0%) 50%; }
    to { background-position: var(--tier4-gradient-end, 200%) 50%; }
}

/* Tier 4 layered rendering — reliable continuous gradient + independent letters
   ---------------------------------------------------------------------------
   The full word is painted once on ::before, so its living gradient remains a
   single uninterrupted animation. The real letter spans stay in normal flow
   and animate only their dimensional highlight/shadow. */
.milk-title-tier-4 > .milk-title-ink {
    position: relative !important;
    display: inline-flex !important;
    align-items: baseline;
    isolation: isolate;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    animation: none !important;
    filter: none !important;
    overflow: visible !important;
}

.milk-title-tier-4 > .milk-title-ink::before {
    content: attr(data-title-text);
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    display: block;
    width: max-content;
    min-width: 100%;
    font: inherit;
    font-kerning: inherit;
    font-variant: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: pre;
    pointer-events: none;

    --title-tier4-deep-start: color-mix(in srgb, var(--title-gradient-start, #d8b6d3) 68%, #56334d 32%);
    --title-tier4-deep-end: color-mix(in srgb, var(--title-gradient-end, #d1d2dd) 68%, #3e506f 32%);
    background-image: linear-gradient(
        90deg,
        var(--title-tier4-deep-start) 0%,
        var(--title-gradient-end, #d1d2dd) 12.5%,
        var(--title-tier4-deep-end) 25%,
        var(--title-gradient-start, #d8b6d3) 37.5%,
        var(--title-tier4-deep-start) 50%,
        var(--title-gradient-end, #d1d2dd) 62.5%,
        var(--title-tier4-deep-end) 75%,
        var(--title-gradient-start, #d8b6d3) 87.5%,
        var(--title-tier4-deep-start) 100%
    ) !important;
    background-size: 200% 100% !important;
    background-position: 0% 50%;
    background-repeat: repeat-x;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
        saturate(1.34)
        contrast(1.1)
        drop-shadow(0 -1px 0 rgba(255,255,255,.38))
        drop-shadow(0 1.35px 0 rgba(52,34,47,.46))
        drop-shadow(0 2.1px 1.1px rgba(52,34,47,.2)) !important;
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
    will-change: background-position;
}

/* The spans reserve the exact word width and carry only the dimensional motion.
   Their transparent fill lets the one-piece gradient underneath remain visible. */
.milk-title-tier-4 .milk-title-letter {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    -webkit-text-stroke: .22px color-mix(in srgb, var(--title-gradient-end, #d1d2dd) 48%, rgba(255,255,255,.32));
    text-shadow:
        0 -.45px 0 rgba(255,255,255,.3),
        0 1px 0 color-mix(in srgb, var(--title-gradient-start, #d8b6d3) 55%, rgba(54,35,48,.35)),
        0 1.8px 1px rgba(54,35,48,.16);
    filter: none !important;
    will-change: transform;
    animation-duration: 5.8s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .11s) !important;
}

.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-float-wave !important; }
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-flutter !important; }
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-cascade !important; }
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-sway !important; }
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-squish !important; }
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-rise !important; }
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-pixel-step !important; animation-timing-function: steps(2,end) !important; }
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-moon-drift !important; }
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-bouncy !important; }
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-ripple !important; }
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-haunted-drift !important; }
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-mossy-sway !important; }
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-electric-step !important; animation-timing-function: steps(2,end) !important; }
.milk-title-font-petal.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-petal-open !important; }
.milk-title-font-blushing.milk-title-tier-4 .milk-title-letter { animation-name: milk-letter-blushing-flutter !important; }

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 > .milk-title-ink::before,
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
    }
    .milk-title-tier-4 > .milk-title-ink::before {
        background-position: 50% 50% !important;
    }
}

.site-animations-off .milk-title-tier-4 > .milk-title-ink::before,
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
}
.site-animations-off .milk-title-tier-4 > .milk-title-ink::before {
    background-position: 50% 50% !important;
}

/* -------------------------------------------------------------------------
   Tier 4 effect variety pass
   Tier 3 owns the living gradient. Tier 4 keeps that gradient and adds a
   title-specific premium finish/motion, rather than fifteen versions of the
   same letter bounce.
   ------------------------------------------------------------------------- */

/* Reset the older one-size-fits-most letter animation assignments. */
.milk-title-tier-4 .milk-title-letter {
    animation-name: none !important;
    animation-duration: 1s !important;
    animation-delay: 0s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    transform-origin: 50% 75%;
}

/* A reusable duplicate text layer for shine, ghosts, neon, and color washes. */
.milk-title-tier-4 > .milk-title-ink::after {
    content: attr(data-title-text);
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    display: block;
    width: max-content;
    min-width: 100%;
    font: inherit;
    font-kerning: inherit;
    font-variant: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: pre;
    pointer-events: none;
    opacity: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Dreamer — slow breathing float. */
.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-dreamer-float 6.8s ease-in-out infinite !important;
}
@keyframes milk-t4-dreamer-float {
    0%, 18%, 82%, 100% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-1.6px) scale(1.012); }
    58% { transform: translateY(-1.1px) scale(1.006); }
}

/* Fairy — mostly still lettering with tiny travelling glints. */
.milk-title-font-fairy.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 1;
    background-image: linear-gradient(
        105deg,
        transparent 0 38%,
        rgba(255,255,255,0) 42%,
        rgba(255,255,255,.98) 48%,
        rgba(255,255,255,.18) 53%,
        transparent 58% 100%
    );
    background-size: 260% 100%;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9));
    animation: milk-t4-fairy-glint 5.9s linear infinite !important;
}
@keyframes milk-t4-fairy-glint {
    0%, 16% { background-position: 180% 50%; opacity: 0; }
    22% { opacity: .95; }
    47% { background-position: -70% 50%; opacity: .9; }
    53%, 100% { background-position: -70% 50%; opacity: 0; }
}

/* Magical — polished enamel with a clean diagonal glare sweep. */
.milk-title-font-magical.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 1;
    background-image: linear-gradient(
        115deg,
        transparent 0 40%,
        rgba(255,255,255,.12) 44%,
        rgba(255,255,255,1) 49%,
        rgba(255,255,255,.18) 54%,
        transparent 59% 100%
    );
    background-size: 300% 100%;
    filter: drop-shadow(0 0 1px rgba(255,255,255,.6));
    animation: milk-t4-magical-glare 6.4s linear infinite !important;
}
@keyframes milk-t4-magical-glare {
    0%, 18% { background-position: 170% 50%; opacity: 0; }
    24% { opacity: .9; }
    48% { background-position: -65% 50%; opacity: .9; }
    54%, 100% { background-position: -65% 50%; opacity: 0; }
}

/* Witchy — smoky candlelight flicker, almost no physical movement. */
.milk-title-font-witchy.milk-title-tier-4 > .milk-title-ink::before {
    animation:
        milk-title-gradient-flow 7.2s linear infinite,
        milk-t4-witchy-flicker 4.9s steps(1,end) infinite !important;
}
@keyframes milk-t4-witchy-flicker {
    0%, 19%, 23%, 61%, 65%, 100% {
        filter: saturate(1.28) contrast(1.08)
            drop-shadow(0 -1px 0 rgba(255,255,255,.25))
            drop-shadow(0 1.4px 0 rgba(52,34,47,.48))
            drop-shadow(0 0 1.2px rgba(122,76,118,.28)) !important;
        opacity: 1;
    }
    20%, 62% {
        filter: saturate(1.42) contrast(1.12)
            drop-shadow(0 -1px 0 rgba(255,255,255,.34))
            drop-shadow(0 1.4px 0 rgba(52,34,47,.5))
            drop-shadow(0 0 3px rgba(151,92,145,.62)) !important;
        opacity: .94;
    }
    22%, 64% { opacity: .82; }
}

/* Cozy — padded, gentle squash-and-rebound. */
.milk-title-font-cozy.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-cozy-squish 6.6s ease-in-out infinite !important;
}
@keyframes milk-t4-cozy-squish {
    0%, 24%, 74%, 100% { transform: scale(1,1); }
    38% { transform: scale(1.035,.955); }
    49% { transform: scale(.99,1.025); }
    59% { transform: scale(1.012,.992); }
}

/* Gothic — dimensional shadow grows and retracts while text stays steady. */
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter {
    animation: milk-t4-gothic-shadow 6.2s ease-in-out infinite !important;
}
@keyframes milk-t4-gothic-shadow {
    0%, 20%, 78%, 100% {
        text-shadow:
            0 -.45px 0 rgba(255,255,255,.22),
            0 1px 0 rgba(63,17,39,.72),
            0 2px 1px rgba(40,9,24,.22);
        transform: translateY(0);
    }
    46% {
        text-shadow:
            0 -.45px 0 rgba(255,255,255,.3),
            0 2.2px 0 rgba(88,20,50,.82),
            0 4.4px 2.2px rgba(40,9,24,.38);
        transform: translateY(-.5px);
    }
}

/* Pixel — rare, controlled horizontal glitch with long calm periods. */
.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-pixel-glitch 7.4s steps(1,end) infinite !important;
}
.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 0;
    background-image: linear-gradient(90deg, #72f1ff, #cf8cff, #72f1ff);
    background-size: 200% 100%;
    animation: milk-t4-pixel-echo 7.4s steps(1,end) infinite !important;
}
@keyframes milk-t4-pixel-glitch {
    0%, 54%, 57%, 61%, 100% { transform: translate(0,0); }
    55% { transform: translate(1px,0); }
    56% { transform: translate(-1px,.5px); }
    59% { transform: translate(.5px,-.5px); }
}
@keyframes milk-t4-pixel-echo {
    0%, 54%, 61%, 100% { opacity: 0; transform: translate(0); }
    55% { opacity: .55; transform: translate(-1.5px,.5px); }
    56% { opacity: .38; transform: translate(1.5px,-.5px); }
    59% { opacity: .45; transform: translate(-1px,0); }
}

/* Moonlit — a narrow moon-silver highlight, without the old screen wipe. */
.milk-title-font-moonlit.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 1;
    background-image: linear-gradient(
        100deg,
        transparent 0 45%,
        rgba(235,244,255,.08) 47%,
        rgba(245,248,255,.92) 50%,
        rgba(206,220,255,.12) 53%,
        transparent 55% 100%
    );
    background-size: 360% 100%;
    filter: drop-shadow(0 0 1px rgba(214,226,255,.55));
    animation: milk-t4-moonlit-shimmer 8.2s linear infinite !important;
}
@keyframes milk-t4-moonlit-shimmer {
    0%, 28% { background-position: 150% 50%; opacity: 0; }
    34% { opacity: .82; }
    55% { background-position: -45% 50%; opacity: .82; }
    61%, 100% { background-position: -45% 50%; opacity: 0; }
}

/* Whimsical — restrained whole-word jello wobble. */
.milk-title-font-whimsical.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-whimsical-jello 7s ease-in-out infinite !important;
}
@keyframes milk-t4-whimsical-jello {
    0%, 28%, 72%, 100% { transform: skewX(0) scale(1); }
    40% { transform: skewX(-3deg) scale(1.012,.99); }
    48% { transform: skewX(2.2deg) scale(.995,1.01); }
    56% { transform: skewX(-1.2deg) scale(1.005,.998); }
    63% { transform: skewX(.5deg); }
}

/* Enchanted — opalescent hue bloom and tiny graceful scale. */
.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-enchanted-bloom 7.6s ease-in-out infinite !important;
}
.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink::before {
    animation:
        milk-title-gradient-flow 7.2s linear infinite,
        milk-t4-enchanted-hue 7.6s ease-in-out infinite !important;
}
@keyframes milk-t4-enchanted-bloom {
    0%, 22%, 78%, 100% { transform: scale(1); }
    49% { transform: scale(1.025); }
}
@keyframes milk-t4-enchanted-hue {
    0%, 100% { filter: saturate(1.25) hue-rotate(0deg) drop-shadow(0 1.4px 1px rgba(78,62,96,.26)) !important; }
    50% { filter: saturate(1.48) hue-rotate(13deg) drop-shadow(0 1.4px 1px rgba(78,62,96,.34)) drop-shadow(0 0 2px rgba(184,234,216,.45)) !important; }
}

/* Haunted — translucent duplicate drifts upward and disappears. */
.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 0;
    background-image: linear-gradient(90deg, rgba(208,198,235,.8), rgba(180,202,218,.72));
    filter: blur(.15px) drop-shadow(0 0 2px rgba(155,146,190,.35));
    animation: milk-t4-haunted-ghost 6.9s ease-out infinite !important;
}
@keyframes milk-t4-haunted-ghost {
    0%, 24% { opacity: 0; transform: translateY(0) scale(1); }
    31% { opacity: .52; }
    58% { opacity: 0; transform: translateY(-3.2px) scale(1.015); }
    59%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* Mossy — alternating stem-like sway. */
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter {
    animation: milk-t4-mossy-sway 6.8s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * -.18s) !important;
}
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter:nth-child(even) {
    animation-direction: reverse !important;
}
@keyframes milk-t4-mossy-sway {
    0%, 22%, 78%, 100% { transform: rotate(0deg) translateY(0); }
    44% { transform: rotate(-1.8deg) translateY(-.5px); }
    58% { transform: rotate(1.1deg) translateY(0); }
}

/* Electric — glow charges left-to-right, then one tiny release flicker. */
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter {
    animation: milk-t4-electric-charge 6.4s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .09s) !important;
}
@keyframes milk-t4-electric-charge {
    0%, 20%, 72%, 100% {
        text-shadow: 0 1px 0 rgba(39,39,75,.38), 0 0 0 rgba(74,230,255,0);
        transform: translateX(0);
    }
    42% {
        text-shadow: 0 1px 0 rgba(39,39,75,.42), 0 0 3px rgba(74,230,255,.85), 0 0 5px rgba(179,95,255,.45);
        transform: translateX(0);
    }
    53% { transform: translateX(.7px); }
    55% { transform: translateX(-.7px); }
    57% { transform: translateX(0); }
}

/* Petal — letters gently open outward and return. */
.milk-title-font-petal.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-petal-bloom 7.1s ease-in-out infinite !important;
}
@keyframes milk-t4-petal-bloom {
    0%, 24%, 78%, 100% { column-gap: 0; transform: scaleX(1); }
    48% { column-gap: .045em; transform: scaleX(1.015); }
    62% { column-gap: .018em; transform: scaleX(1.006); }
}

/* Blushing — warm rose wash plus one tiny shy dip. */
.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink {
    animation: milk-t4-blushing-dip 7.3s ease-in-out infinite !important;
}
.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 1;
    background-image: linear-gradient(
        100deg,
        transparent 0 34%,
        rgba(255,152,180,0) 40%,
        rgba(255,151,178,.8) 49%,
        rgba(255,191,205,.2) 57%,
        transparent 64% 100%
    );
    background-size: 260% 100%;
    animation: milk-t4-blushing-wash 7.3s ease-in-out infinite !important;
}
@keyframes milk-t4-blushing-dip {
    0%, 26%, 74%, 100% { transform: translateY(0) rotate(0); }
    48% { transform: translateY(1px) rotate(-.45deg); }
    57% { transform: translateY(.35px) rotate(.18deg); }
}
@keyframes milk-t4-blushing-wash {
    0%, 24% { background-position: 160% 50%; opacity: 0; }
    34% { opacity: .75; }
    59% { background-position: -55% 50%; opacity: .72; }
    67%, 100% { background-position: -55% 50%; opacity: 0; }
}

/* Accessibility: preserve the premium dimensional finish while disabling all
   decorative motion for either OS-level or the member's personal preference. */
@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 > .milk-title-ink,
    .milk-title-tier-4 > .milk-title-ink::before,
    .milk-title-tier-4 > .milk-title-ink::after,
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
    }
    .milk-title-tier-4 > .milk-title-ink::after { opacity: 0 !important; }
    .milk-title-tier-4 > .milk-title-ink::before { background-position: 50% 50% !important; }
}

.site-animations-off .milk-title-tier-4 > .milk-title-ink,
.site-animations-off .milk-title-tier-4 > .milk-title-ink::before,
.site-animations-off .milk-title-tier-4 > .milk-title-ink::after,
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
}
.site-animations-off .milk-title-tier-4 > .milk-title-ink::after { opacity: 0 !important; }
.site-animations-off .milk-title-tier-4 > .milk-title-ink::before { background-position: 50% 50% !important; }

/* Tier 4 motion refinement · no shared heartbeat
   Most titles now keep their glyph geometry stable. Variety comes from light,
   shadow, tracking, tilt, trails, and rare accents instead of repeated scaling. */
.milk-title-tier-4 .milk-title-letter {
    transform: none;
    transform-origin: center;
}

/* Dreamer: one slow, weightless drift across the whole word. */
.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink {
    animation: milk-title-gradient-flow 7.2s linear infinite,
               milk-tier4-dreamer-drift 9s ease-in-out infinite !important;
}
.milk-title-font-dreamer.milk-title-tier-4 .milk-title-letter { animation: none !important; }
@keyframes milk-tier4-dreamer-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

/* Fairy: tiny staggered glints, no bouncing. */
.milk-title-font-fairy.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-fairy-glint 6.8s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .23s) !important;
}
@keyframes milk-tier4-fairy-glint {
    0%, 22%, 34%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    27% { filter: brightness(1.7) drop-shadow(0 0 2px rgba(255,255,255,.95)); }
}

/* Magical: a calm polished shine, driven by brightness rather than scale. */
.milk-title-font-magical.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-magical-shine 7.6s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .12s) !important;
}
@keyframes milk-tier4-magical-shine {
    0%, 18%, 42%, 100% { filter: brightness(1) saturate(1); }
    29% { filter: brightness(1.38) saturate(1.18); }
}

/* Witchy: irregular candle flicker in the shadow and glow only. */
.milk-title-font-witchy.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-witchy-flicker 5.9s steps(1, end) infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .08s) !important;
}
@keyframes milk-tier4-witchy-flicker {
    0%, 24%, 27%, 61%, 64%, 100% { filter: brightness(1) drop-shadow(0 1px 0 rgba(53,31,50,.45)); }
    25%, 62% { filter: brightness(1.2) drop-shadow(0 1px 2px rgba(133,91,126,.55)); }
    26%, 63% { filter: brightness(.92) drop-shadow(0 1px 0 rgba(53,31,50,.35)); }
}

/* Cozy is intentionally the only true squash-and-stretch title. */
.milk-title-font-cozy.milk-title-tier-4 > .milk-title-ink {
    transform-origin: center bottom;
    animation: milk-title-gradient-flow 7.2s linear infinite,
               milk-tier4-cozy-squish 8.5s ease-in-out infinite !important;
}
.milk-title-font-cozy.milk-title-tier-4 .milk-title-letter { animation: none !important; }
@keyframes milk-tier4-cozy-squish {
    0%, 68%, 100% { transform: scale(1); }
    76% { transform: scale(1.025,.975); }
    83% { transform: scale(.992,1.018); }
    90% { transform: scale(1); }
}

/* Gothic: the title stays still while its depth grows and retracts. */
.milk-title-font-gothic.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-gothic-shadow 8s ease-in-out infinite !important;
}
@keyframes milk-tier4-gothic-shadow {
    0%, 100% { filter: drop-shadow(0 1px 0 rgba(35,20,30,.55)); }
    48%, 58% { filter: drop-shadow(0 3px 1px rgba(35,20,30,.72)); }
}

/* Pixel: short, rare horizontal glitch rather than a rhythmic hop. */
.milk-title-font-pixel.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-pixel-glitch 9s steps(1, end) infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .035s) !important;
}
@keyframes milk-tier4-pixel-glitch {
    0%, 72%, 75%, 78%, 100% { transform: translateX(0); filter: none; }
    73% { transform: translateX(1px); filter: brightness(1.35); }
    74% { transform: translateX(-1px); }
    76% { transform: translateX(1px); }
    77% { transform: translateX(0); }
}

/* Moonlit: no geometry change; only a cool silver shimmer. */
.milk-title-font-moonlit.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-moon-shimmer 8.8s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .16s) !important;
}
@keyframes milk-tier4-moon-shimmer {
    0%, 20%, 42%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    31% { filter: brightness(1.42) drop-shadow(0 0 1.6px rgba(218,225,255,.9)); }
}

/* Whimsical: a restrained whole-word jello tilt, with no zooming. */
.milk-title-font-whimsical.milk-title-tier-4 > .milk-title-ink {
    transform-origin: center bottom;
    animation: milk-title-gradient-flow 7.2s linear infinite,
               milk-tier4-whimsical-wobble 9.4s ease-in-out infinite !important;
}
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation: none !important; }
@keyframes milk-tier4-whimsical-wobble {
    0%, 70%, 100% { transform: rotate(0deg) skewX(0deg); }
    76% { transform: rotate(-1.2deg) skewX(-1.4deg); }
    82% { transform: rotate(.9deg) skewX(1deg); }
    88% { transform: rotate(-.45deg) skewX(-.4deg); }
    93% { transform: rotate(0deg) skewX(0deg); }
}

/* Enchanted: opalescent color bloom only. */
.milk-title-font-enchanted.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-enchanted-bloom 9s ease-in-out infinite !important;
}
@keyframes milk-tier4-enchanted-bloom {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(14deg) brightness(1.18); }
}

/* Haunted: ghostly trailing shadow drifting behind otherwise still letters. */
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-haunted-trail 8.6s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .09s) !important;
}
@keyframes milk-tier4-haunted-trail {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(170,181,210,0)); }
    45% { filter: drop-shadow(.6px -2px 1px rgba(170,181,210,.55)); }
    62% { filter: drop-shadow(-.4px -3px 2px rgba(170,181,210,0)); }
}

/* Mossy: alternating stem-like tilts, never a vertical bounce. */
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-mossy-sway 7.8s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * -.18s) !important;
    transform-origin: 50% 100%;
}
.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter:nth-child(even) {
    animation-direction: reverse !important;
}
@keyframes milk-tier4-mossy-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50% { transform: rotate(1.1deg); }
}

/* Electric: neon charge passes across letters, followed by one rare flicker. */
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-electric-charge 7.4s steps(1, end) infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .14s) !important;
}
@keyframes milk-tier4-electric-charge {
    0%, 19%, 30%, 82%, 85%, 100% { filter: brightness(1) drop-shadow(0 0 1px rgba(121,211,255,.35)); }
    24% { filter: brightness(1.75) drop-shadow(0 0 4px rgba(151,108,255,.9)); }
    83% { filter: brightness(.72); }
    84% { filter: brightness(1.5) drop-shadow(0 0 3px rgba(121,211,255,.8)); }
}

/* Petal: letters gently open outward through tracking, not scaling. */
.milk-title-font-petal.milk-title-tier-4 > .milk-title-ink {
    animation: milk-title-gradient-flow 7.2s linear infinite,
               milk-tier4-petal-open 10s ease-in-out infinite !important;
}
.milk-title-font-petal.milk-title-tier-4 .milk-title-letter { animation: none !important; }
@keyframes milk-tier4-petal-open {
    0%, 64%, 100% { letter-spacing: .012em; }
    78% { letter-spacing: .075em; }
    90% { letter-spacing: .012em; }
}

/* Blushing: warm color wash and a shy shadow shift, no bounce. */
.milk-title-font-blushing.milk-title-tier-4 .milk-title-letter {
    animation: milk-tier4-blush-wash 8.2s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index, 0) * .1s) !important;
}
@keyframes milk-tier4-blush-wash {
    0%, 22%, 48%, 100% { filter: saturate(1) brightness(1) drop-shadow(0 1px 0 rgba(100,58,82,.25)); }
    35% { filter: saturate(1.35) brightness(1.18) drop-shadow(1px 1px 1px rgba(190,104,137,.38)); }
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-tier-4 > .milk-title-ink,
    .milk-title-tier-4 .milk-title-letter {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        letter-spacing: inherit !important;
    }
}
.site-animations-off .milk-title-tier-4 > .milk-title-ink,
.site-animations-off .milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
}

/* -------------------------------------------------------------------------
   Haunted Tier 4 — CodePen ghost crossing
   Uses the same five-tail CSS silhouette as the selected CodePen, scaled for
   MILK's compact title badges. The ghost is a real child element so its tail
   is not clipped by the title's text-paint layer.
   ------------------------------------------------------------------------- */
.milk-title-font-haunted.milk-title-tier-4 {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink {
    overflow: visible !important;
}

/* Disable every older pseudo-element version of the Haunted ghost. */
.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Keep the lettering steady; the crossing ghost is the premium movement. */
.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    filter: drop-shadow(0 1px 0 rgba(48, 42, 69, .38));
}

/* Give the original five-piece tail room above and below compact badges. */
.post-mini-title:has(> .milk-title-font-haunted.milk-title-tier-4) {
    min-height: 2.25rem;
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    overflow: visible !important;
}

.profile-display-title:has(.milk-title-font-haunted.milk-title-tier-4) {
    padding-top: .3rem !important;
    padding-bottom: .5rem !important;
    overflow: visible !important;
}

/* Same ghost construction as the reference: rounded head, three face marks,
   and five alternating tail pieces. It is simply scaled down for MILK. */
.milk-haunted-ghost {
    --ghost-body: rgba(244, 242, 250, .96);
    position: absolute;
    z-index: 8;
    top: 50%;
    left: -1.55rem;
    width: 16px;
    height: 24px;
    display: block;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    border-radius: 100% / 70% 70% 0 0;
    background-color: var(--ghost-body);
    background-image:
        radial-gradient(ellipse at 35% 40%, rgba(20, 17, 27, .95) 0 8%, transparent 9%),
        radial-gradient(ellipse at 65% 40%, rgba(20, 17, 27, .95) 0 8%, transparent 9%),
        radial-gradient(ellipse at 50% 60%, rgba(20, 17, 27, .95) 0 8%, transparent 9%);
    mix-blend-mode: exclusion;
    filter:
        drop-shadow(0 0 2px rgba(229, 222, 255, .72))
        drop-shadow(-3px 1px 3px rgba(114, 119, 159, .24));
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    animation: milk-tier4-haunted-codepen-cross 9.6s ease-out infinite !important;
    will-change: left, top, opacity, transform;
}

.milk-haunted-ghost > span {
    position: absolute;
    width: 20%;
    display: block;
    background-color: var(--ghost-body);
}

.milk-haunted-ghost > span:nth-child(1) {
    height: 14px;
    left: 0;
    bottom: -12px;
    border-radius: 100% / 0 0 50% 50%;
}

.milk-haunted-ghost > span:nth-child(2),
.milk-haunted-ghost > span:nth-child(4) {
    height: 8px;
    left: 20%;
    bottom: -6px;
    border-radius: 100% / 50% 50% 0 0;
    background-color: transparent;
}

.milk-haunted-ghost > span:nth-child(3) {
    height: 8px;
    left: 40%;
    bottom: -7.9px;
    border-radius: 100% / 0 0 60% 60%;
}

.milk-haunted-ghost > span:nth-child(4) {
    left: 60%;
}

.milk-haunted-ghost > span:nth-child(5) {
    height: 6px;
    left: 80%;
    bottom: -5.8px;
    border-radius: 100% / 0 0 70% 70%;
}

@keyframes milk-tier4-haunted-codepen-cross {
    0%, 16% {
        left: -1.55rem;
        top: 56%;
        opacity: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
    19% {
        opacity: .9;
    }
    31% {
        top: 42%;
    }
    43% {
        top: 57%;
        opacity: .94;
    }
    55% {
        left: calc(100% + 1.55rem);
        top: 46%;
        opacity: .88;
        transform: translateY(-50%) rotate(-90deg);
    }
    59%, 100% {
        left: calc(100% + 1.55rem);
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .milk-haunted-ghost {
        display: none !important;
        animation: none !important;
        opacity: 0 !important;
    }
}

.site-animations-off .milk-haunted-ghost {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* -------------------------------------------------------------------------
   Haunted Tier 4 — true phase-through pass
   -------------------------------------------------------------------------
   The reference effect is not only a ghost travelling in front of a word:
   mix-blend-mode visibly changes the lettering directly beneath the ghost.
   The moving ghost remains the visual object, while this synchronized masked
   copy of the title guarantees that the letters invert exactly as it crosses.
   ------------------------------------------------------------------------- */
.milk-title-font-haunted.milk-title-tier-4 {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink {
    position: relative !important;
    z-index: 1;
    isolation: isolate;
    overflow: visible !important;
}

/* This is a duplicate of the title, visible only inside a small moving ghost-
   shaped window. White + exclusion produces the same pass-through inversion
   seen in the CodePen even when the equipped title uses a pale gradient. */
.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    content: attr(data-title-text) !important;
    display: block !important;
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 6;
    width: max-content;
    min-width: 100%;
    font: inherit;
    font-kerning: inherit;
    font-variant: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: pre;
    pointer-events: none;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    mix-blend-mode: exclusion;
    opacity: 0;

    /* The mask follows the broad horizontal silhouette of the rotated ghost,
       rather than exposing a harsh rectangular strip across the lettering. */
    -webkit-mask-image: radial-gradient(
        ellipse 50% 72% at 50% 50%,
        #000 0 58%,
        rgba(0, 0, 0, .88) 66%,
        transparent 78%
    );
    mask-image: radial-gradient(
        ellipse 50% 72% at 50% 50%,
        #000 0 58%,
        rgba(0, 0, 0, .88) 66%,
        transparent 78%
    );
    -webkit-mask-size: 2.45rem 1.35rem;
    mask-size: 2.45rem 1.35rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: -2.45rem 50%;
    mask-position: -2.45rem 50%;

    animation: milk-tier4-haunted-phase-text 9.6s ease-out infinite !important;
    will-change: opacity, -webkit-mask-position, mask-position;
}

/* Follow the CodePen more closely: a straight, centered crossing instead of
   bobbing above and below the small MILK title line. */
.milk-haunted-ghost {
    z-index: 7;
    top: 50% !important;
    left: -2.25rem;
    opacity: 0;
    background-color: #fff;
    --ghost-body: #fff;
    mix-blend-mode: exclusion;
    transform: translateY(-50%) rotate(-90deg);
    animation: milk-tier4-haunted-phase-ghost 9.6s ease-out infinite !important;
    will-change: left, opacity, transform;
}

@keyframes milk-tier4-haunted-phase-ghost {
    0%, 16% {
        left: -2.25rem;
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
    19% {
        opacity: .92;
    }
    55% {
        left: calc(100% + .3rem);
        top: 50%;
        opacity: .92;
        transform: translateY(-50%) rotate(-90deg);
    }
    59%, 100% {
        left: calc(100% + .3rem);
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) rotate(-90deg);
    }
}

@keyframes milk-tier4-haunted-phase-text {
    0%, 16% {
        opacity: 0;
        -webkit-mask-position: -2.45rem 50%;
        mask-position: -2.45rem 50%;
    }
    19% {
        opacity: 1;
    }
    55% {
        opacity: 1;
        -webkit-mask-position: calc(100% + .3rem) 50%;
        mask-position: calc(100% + .3rem) 50%;
    }
    59%, 100% {
        opacity: 0;
        -webkit-mask-position: calc(100% + .3rem) 50%;
        mask-position: calc(100% + .3rem) 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after,
    .milk-haunted-ghost {
        display: none !important;
        animation: none !important;
        opacity: 0 !important;
    }
}

.site-animations-off .milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after,
.site-animations-off .milk-haunted-ghost {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* -------------------------------------------------------------------------
   Haunted Tier 4 — compact phase-through ghost
   -------------------------------------------------------------------------
   The full CodePen silhouette was visually too large for MILK's compact title
   badges, causing it to cover most of the word at once. Keep the same ghost
   construction, but scale the travelling spirit and its synchronized text
   mask down so the effect reads as a small figure slipping through letters.
   ------------------------------------------------------------------------- */
.post-mini-title:has(> .milk-title-font-haunted.milk-title-tier-4) {
    min-height: 1.75rem;
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
}

.profile-display-title:has(.milk-title-font-haunted.milk-title-tier-4) {
    padding-top: .15rem !important;
    padding-bottom: .25rem !important;
}

.milk-haunted-ghost {
    left: -1.5rem;
    opacity: 0;
    filter:
        drop-shadow(0 0 1.25px rgba(229, 222, 255, .7))
        drop-shadow(-2px 1px 2px rgba(114, 119, 159, .2));
    transform: translateY(-50%) rotate(90deg) scale(.62);
    transform-origin: center;
    animation-name: milk-tier4-haunted-compact-ghost !important;
}

.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    -webkit-mask-size: 1.48rem .8rem;
    mask-size: 1.48rem .8rem;
    -webkit-mask-position: -1.48rem 50%;
    mask-position: -1.48rem 50%;
    animation-name: milk-tier4-haunted-compact-text !important;
}

@keyframes milk-tier4-haunted-compact-ghost {
    0%, 16% {
        left: -1.5rem;
        top: 51%;
        opacity: 0;
        transform: translateY(-50%) rotate(90deg) scale(.62);
    }
    19% {
        opacity: .88;
    }
    55% {
        left: calc(100% + .05rem);
        top: 51%;
        opacity: .88;
        transform: translateY(-50%) rotate(90deg) scale(.62);
    }
    59%, 100% {
        left: calc(100% + .05rem);
        top: 51%;
        opacity: 0;
        transform: translateY(-50%) rotate(90deg) scale(.62);
    }
}

@keyframes milk-tier4-haunted-compact-text {
    0%, 16% {
        opacity: 0;
        -webkit-mask-position: -1.48rem 50%;
        mask-position: -1.48rem 50%;
    }
    19% {
        opacity: 1;
    }
    55% {
        opacity: 1;
        -webkit-mask-position: calc(100% + .05rem) 50%;
        mask-position: calc(100% + .05rem) 50%;
    }
    59%, 100% {
        opacity: 0;
        -webkit-mask-position: calc(100% + .05rem) 50%;
        mask-position: calc(100% + .05rem) 50%;
    }
}

/* -------------------------------------------------------------------------
   Tier 4 refinements — Mossy + Electric
   ------------------------------------------------------------------------- */

/* Mossy — one gentle whole-word hop with a long quiet rest.
   Translation only: no scale pulse, so it reads as a soft bounce instead of
   the heartbeat motion we removed from the other title families. */
.milk-title-font-mossy.milk-title-tier-4 > .milk-title-ink {
    transform-origin: center bottom;
    will-change: transform;
    animation: milk-tier4-mossy-gentle-bounce 7.8s cubic-bezier(.28,.72,.35,1) infinite !important;
}

.milk-title-font-mossy.milk-title-tier-4 .milk-title-letter {
    animation: none !important;
}

@keyframes milk-tier4-mossy-gentle-bounce {
    0%, 58%, 100% { transform: translateY(0); }
    65% { transform: translateY(-2px); }
    70% { transform: translateY(0); }
    74% { transform: translateY(-.75px); }
    78% { transform: translateY(0); }
}

/* Electric — compact City Nights-inspired moving light field.
   The living cyan/violet gradient remains on ::before. This duplicate text
   layer contributes only the travelling neon illumination and opposing side
   glows, so the word stays crisp at mini-profile size. */
.milk-title-font-electric.milk-title-tier-4 .milk-title-letter {
    animation: none !important;
    transform: none !important;
}

.milk-title-font-electric.milk-title-tier-4 > .milk-title-ink::after {
    opacity: 1;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: rgba(225, 236, 255, .22) !important;
    -webkit-text-fill-color: currentColor !important;
    mix-blend-mode: screen;
    filter: none !important;
    text-shadow:
        0 0 .8em rgba(180, 76, 255, .16),
        0 0 .12em rgba(197, 92, 255, .28),
        -.85em -.1em .42em rgba(75, 235, 255, 0),
        .85em .1em .42em rgba(219, 76, 255, 0);
    animation: milk-tier4-electric-city-lights 5.4s .45s linear infinite !important;
    will-change: color, text-shadow, opacity;
}

@keyframes milk-tier4-electric-city-lights {
    0%, 100% {
        color: rgba(218, 229, 255, .18);
        opacity: .72;
        text-shadow:
            0 0 .8em rgba(180, 76, 255, .16),
            0 0 .12em rgba(197, 92, 255, .28),
            -.85em -.1em .42em rgba(75, 235, 255, 0),
            .85em .1em .42em rgba(219, 76, 255, 0);
    }
    30% {
        color: rgba(231, 243, 255, .48);
        opacity: .92;
        text-shadow:
            0 0 .85em rgba(183, 75, 255, .48),
            0 0 .13em rgba(225, 161, 255, .56),
            -.48em -.1em .28em rgba(75, 235, 255, .38),
            .48em .1em .28em rgba(222, 74, 255, .48);
    }
    40% {
        color: rgba(245, 250, 255, .72);
        opacity: 1;
        text-shadow:
            0 0 .9em rgba(178, 68, 255, .55),
            0 0 .13em rgba(244, 205, 255, .68),
            -.24em -.1em .14em rgba(85, 242, 255, .52),
            .24em .1em .14em rgba(229, 83, 255, .58);
    }
    70% {
        color: rgba(231, 243, 255, .48);
        opacity: .92;
        text-shadow:
            0 0 .85em rgba(183, 75, 255, .48),
            0 0 .13em rgba(225, 161, 255, .56),
            .48em -.1em .28em rgba(75, 235, 255, .38),
            -.48em .1em .28em rgba(222, 74, 255, .48);
    }
}

/* Personal and OS-level motion preferences still win over the new effects. */
@media (prefers-reduced-motion: reduce) {
    .milk-title-font-mossy.milk-title-tier-4 > .milk-title-ink {
        animation: none !important;
        transform: none !important;
    }
    .milk-title-font-electric.milk-title-tier-4 > .milk-title-ink::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

.site-animations-off .milk-title-font-mossy.milk-title-tier-4 > .milk-title-ink {
    animation: none !important;
    transform: none !important;
}

.site-animations-off .milk-title-font-electric.milk-title-tier-4 > .milk-title-ink::after {
    animation: none !important;
    opacity: 0 !important;
}

/* -------------------------------------------------------------------------
   Predictable title surfaces
   -------------------------------------------------------------------------
   Titles keep their own font, gradient, and animation. Readability comes from
   a predictable badge surface instead of strokes and halos on the lettering.
   ------------------------------------------------------------------------- */
.milk-title > .milk-title-ink,
.milk-title-tier-4 > .milk-title-ink,
.milk-title-tier-4 > .milk-title-ink::before {
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* Full profiles use the same quiet reading-surface idea at a larger scale. */
.profile-display-title {
    width: fit-content !important;
    max-width: 100%;
    margin: 0 0 .18rem !important;
    padding: .28rem .58rem .34rem !important;
    border: 1px solid rgba(55, 39, 52, .2);
    border-radius: .58rem;
    background: rgba(255, 253, 250, .9);
    box-shadow: 0 2px 8px rgba(45, 31, 43, .1);
    -webkit-backdrop-filter: blur(5px) saturate(.9);
    backdrop-filter: blur(5px) saturate(.9);
    isolation: isolate;
}

/* Mini-profile decoration art never becomes the title's background. Every
   title gets a solid white badge, regardless of the equipped profile theme. */
.post-mini-title {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(55, 39, 52, .22) !important;
    box-shadow: 0 1px 4px rgba(45, 31, 43, .1) !important;
    color: #3d2938 !important;
}

/* Tier 0 has no gradient of its own, so give it a stable ink color too. */
.post-mini-title > .milk-title-tier-0 > .milk-title-ink {
    color: #3d2938 !important;
    -webkit-text-fill-color: #3d2938 !important;
}

/* Decorative faces need a larger optical size than interface text in the
   compact mini-profile badge. */
.post-mini-title > .milk-title.milk-title-font-haunted { font-size: .92rem !important; }
.post-mini-title > .milk-title.milk-title-font-mossy { font-size: .9rem !important; }
.post-mini-title > .milk-title.milk-title-font-electric { font-size: .8rem !important; }
.post-mini-title > .milk-title.milk-title-font-petal { font-size: 1rem !important; }
.post-mini-title > .milk-title.milk-title-font-blushing { font-size: 1.08rem !important; }
/* -------------------------------------------------------------------------
   2026-07 title art direction reset
   -------------------------------------------------------------------------
   Electric keeps its neon gradient. Every other title uses one clear, lively
   signature color rather than the shared muted gradient formula. Motion is
   reserved for Haunted, Mossy, and Electric; the remaining families use their
   typeface and static decorative details as their identity.
   ------------------------------------------------------------------------- */
.milk-title:not(.milk-title-font-electric):is(.milk-title-tier-1, .milk-title-tier-2, .milk-title-tier-3) > .milk-title-ink,
.milk-title:not(.milk-title-font-electric).milk-title-tier-4 > .milk-title-ink::before,
.milk-title:not(.milk-title-font-electric).milk-title-tier-4 .milk-title-letter {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--title-gradient-start, #d05c91) !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
}

/* The shared Tier 3 gradient conveyor is removed for non-Electric titles. */
.milk-title:not(.milk-title-font-electric).milk-title-tier-3 > .milk-title-ink,
.milk-title:not(.milk-title-font-electric).milk-title-tier-4 > .milk-title-ink::before {
    animation: none !important;
}

/* Only these three families retain motion. Static titles may still keep a
   small non-moving accent supplied by their own family rules. */
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) > .milk-title-ink,
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) > .milk-title-ink::before,
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) > .milk-title-ink::after,
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) .milk-title-letter,
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) .milk-title-letter::before,
.milk-title-tier-4:not(.milk-title-font-haunted):not(.milk-title-font-mossy):not(.milk-title-font-electric) .milk-title-letter::after {
    animation: none !important;
    will-change: auto !important;
}

/* Bright, Milk-forward identities. These also provide the intended preview
   before the data migration has run in a fresh environment. */
.milk-title-font-dreamer { --title-gradient-start:#6878F0 !important; --title-gradient-end:#6878F0 !important; }
.milk-title-font-fairy { --title-gradient-start:#F052A0 !important; --title-gradient-end:#F052A0 !important; }
.milk-title-font-magical { --title-gradient-start:#F2763D !important; --title-gradient-end:#F2763D !important; }
.milk-title-font-witchy { --title-gradient-start:#A64BC4 !important; --title-gradient-end:#A64BC4 !important; }
.milk-title-font-cozy { --title-gradient-start:#C06C45 !important; --title-gradient-end:#C06C45 !important; }
.milk-title-font-gothic { --title-gradient-start:#59456F !important; --title-gradient-end:#59456F !important; }
.milk-title-font-pixel { --title-gradient-start:#16AFC8 !important; --title-gradient-end:#16AFC8 !important; }
.milk-title-font-moonlit { --title-gradient-start:#596BD6 !important; --title-gradient-end:#596BD6 !important; }
.milk-title-font-whimsical { --title-gradient-start:#E6A411 !important; --title-gradient-end:#E6A411 !important; }
.milk-title-font-enchanted { --title-gradient-start:#21AB8D !important; --title-gradient-end:#21AB8D !important; }
.milk-title-font-haunted { --title-gradient-start:#7D55A5 !important; --title-gradient-end:#7D55A5 !important; }
.milk-title-font-mossy { --title-gradient-start:#51923F !important; --title-gradient-end:#51923F !important; }
.milk-title-font-petal { --title-gradient-start:#ED6292 !important; --title-gradient-end:#ED6292 !important; }
.milk-title-font-blushing { --title-gradient-start:#DD5278 !important; --title-gradient-end:#DD5278 !important; }
/* -------------------------------------------------------------------------
   Tier 4 · individual title personalities
   ------------------------------------------------------------------------- */
.milk-title-tier-4:not(.milk-title-font-haunted) > .milk-title-ink {
    position: relative;
    overflow: visible !important;
    transform-origin: center;
}

/* Dreamer — the whole word drifts as sleepy z's dissolve overhead. */
.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink {
    animation: milk-dreamer-drift 7.6s ease-in-out infinite !important;
}
.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink::after {
    content: 'z  z' !important; display:block !important; position:absolute; left:62%; top:-.65em;
    width:max-content; color:#6878F0 !important; -webkit-text-fill-color:currentColor !important;
    font:700 .48em/1 sans-serif; letter-spacing:.08em; pointer-events:none;
    animation: milk-dreamer-sleep 7.6s ease-out infinite !important;
}
@keyframes milk-dreamer-drift { 0%,100%{transform:translate(0,0)} 45%{transform:translate(.65px,-2px)} 70%{transform:translate(-.35px,-.6px)} }
@keyframes milk-dreamer-sleep { 0%,34%,100%{opacity:0;transform:translate(0,3px) scale(.78)} 46%{opacity:.9} 72%{opacity:0;transform:translate(8px,-7px) scale(1.08)} }

/* Fairy — one tiny light flutters around the lettering like a firefly. */
.milk-title-font-fairy.milk-title-tier-4 > .milk-title-ink::after {
    content:'✦' !important; display:block !important; position:absolute; left:-.25em; top:10%;
    color:#F052A0 !important; -webkit-text-fill-color:currentColor !important; font:.7em/1 serif; pointer-events:none;
    animation: milk-fairy-flit 5.8s cubic-bezier(.45,.05,.55,.95) infinite !important;
}
@keyframes milk-fairy-flit { 0%,18%,100%{opacity:0;transform:translate(0,5px) rotate(0)} 25%{opacity:1} 42%{transform:translate(45%,-7px) rotate(35deg)} 62%{transform:translate(260%,2px) rotate(120deg)} 78%{opacity:1;transform:translate(470%,-5px) rotate(190deg)} 86%{opacity:0;transform:translate(520%,0) rotate(220deg)} }

/* Magical — a crisp wand-spark casts diagonally across the word. */
.milk-title-font-magical.milk-title-tier-4 > .milk-title-ink::after {
    content:'✧' !important; display:block !important; position:absolute; left:-.15em; top:55%;
    color:#F2763D !important; -webkit-text-fill-color:currentColor !important; font:.88em/1 serif; pointer-events:none;
    animation: milk-magical-cast 6.4s ease-in-out infinite !important;
}
@keyframes milk-magical-cast { 0%,26%,100%{opacity:0;transform:translate(-3px,4px) rotate(0) scale(.55)} 34%{opacity:1} 56%{opacity:1;transform:translate(260%,-12px) rotate(155deg) scale(1.18)} 68%{opacity:0;transform:translate(520%,-3px) rotate(280deg) scale(.7)} }

/* Witchy — irregular candlelight flicker, with no bouncing letters. */
.milk-title-font-witchy.milk-title-tier-4 > .milk-title-ink::before {
    animation: milk-witchy-flicker 6.8s steps(1,end) infinite !important;
}
@keyframes milk-witchy-flicker { 0%,17%,22%,61%,64%,100%{opacity:1;filter:brightness(1)} 19%{opacity:.62;filter:brightness(.8)} 20%{opacity:.9;filter:brightness(1.25)} 62%{opacity:.72;filter:brightness(.86)} 63%{opacity:1;filter:brightness(1.18)} }

/* Cozy — warm steam curls upward, then rests for most of the loop. */
.milk-title-font-cozy.milk-title-tier-4 > .milk-title-ink::after {
    content:'⌁  ⌁' !important; display:block !important; position:absolute; left:28%; top:-.42em;
    color:#C06C45 !important; -webkit-text-fill-color:currentColor !important; font:700 .58em/1 serif; pointer-events:none;
    animation: milk-cozy-steam 7.4s ease-out infinite !important;
}
@keyframes milk-cozy-steam { 0%,30%,100%{opacity:0;transform:translateY(4px) scaleX(.75)} 40%{opacity:.68} 65%{opacity:0;transform:translateY(-7px) scaleX(1.08)} }

/* Gothic — a tall, inky shadow lengthens and recedes like cathedral light. */
.milk-title-font-gothic.milk-title-tier-4 > .milk-title-ink::before {
    animation: milk-gothic-shadow 8s ease-in-out infinite !important;
}
@keyframes milk-gothic-shadow { 0%,28%,100%{text-shadow:0 0 0 rgba(48,30,58,0)} 48%{text-shadow:2px 3px 0 rgba(89,69,111,.22),4px 6px 2px rgba(89,69,111,.08)} 68%{text-shadow:-1px 2px 0 rgba(89,69,111,.15)} }

/* Pixel — a short, deliberate arcade glitch rather than a soft bounce. */
.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink {
    animation: milk-pixel-glitch 6.2s steps(1,end) infinite !important;
}
.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink::after {
    content:attr(data-title-text) !important; display:block !important; position:absolute; inset:0;
    color:#F052A0 !important; -webkit-text-fill-color:currentColor !important; opacity:0; pointer-events:none;
    animation: milk-pixel-echo 6.2s steps(1,end) infinite !important;
}
@keyframes milk-pixel-glitch { 0%,42%,46%,49%,100%{transform:translate(0)} 43%{transform:translate(-1px,0)} 45%{transform:translate(1px,-1px)} 48%{transform:translate(0,1px)} }
@keyframes milk-pixel-echo { 0%,42%,49%,100%{opacity:0;transform:translate(0)} 43%{opacity:.6;transform:translate(2px,0)} 45%{opacity:.42;transform:translate(-2px,1px)} 48%{opacity:.3;transform:translate(1px,-1px)} }

/* Moonlit — a crescent makes one slow orbit around the title. */
.milk-title-font-moonlit.milk-title-tier-4 > .milk-title-ink::after {
    content:'☾' !important; display:block !important; position:absolute; left:-.55em; top:0;
    color:#596BD6 !important; -webkit-text-fill-color:currentColor !important; font:.72em/1 serif; pointer-events:none;
    animation: milk-moonlit-orbit 8.8s ease-in-out infinite !important;
}
@keyframes milk-moonlit-orbit { 0%,20%,100%{opacity:0;transform:translate(0,4px) rotate(-20deg)} 28%{opacity:.9} 55%{transform:translate(310%,-9px) rotate(15deg)} 78%{opacity:.9;transform:translate(620%,3px) rotate(42deg)} 86%{opacity:0;transform:translate(680%,5px) rotate(55deg)} }

/* Whimsical — hand-drawn letters take turns making an odd little wobble. */
.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter {
    animation: milk-whimsical-wobble 7s ease-in-out infinite !important;
    animation-delay: calc(var(--letter-index,0) * .13s) !important;
}
@keyframes milk-whimsical-wobble { 0%,34%,62%,100%{transform:rotate(0) translateY(0)} 42%{transform:rotate(calc((var(--letter-index,0) % 2 * 2 - 1) * 5deg)) translateY(-1px)} 50%{transform:rotate(calc((var(--letter-index,0) % 2 * -2 + 1) * 3deg)) translateY(.5px)} }

/* Enchanted — a rune-like spark circles once and leaves a brief glow. */
.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink::after {
    content:'✦' !important; display:block !important; position:absolute; left:45%; top:40%;
    color:#21AB8D !important; -webkit-text-fill-color:currentColor !important; font:.62em/1 serif; pointer-events:none;
    animation: milk-enchanted-rune 7.2s ease-in-out infinite !important;
}
.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink::before { animation:milk-enchanted-glow 7.2s ease-in-out infinite !important; }
@keyframes milk-enchanted-rune { 0%,24%,100%{opacity:0;transform:rotate(0) translateX(0) scale(.55)} 34%{opacity:1} 62%{opacity:1;transform:rotate(220deg) translateX(2.2em) scale(1)} 76%{opacity:0;transform:rotate(360deg) translateX(0) scale(.6)} }
@keyframes milk-enchanted-glow { 0%,28%,78%,100%{filter:brightness(1)} 55%{filter:brightness(1.28)} }

/* Petal — one flower drifts down and turns like a loose blossom. */
.milk-title-font-petal.milk-title-tier-4 > .milk-title-ink::after {
    content:'❀' !important; display:block !important; position:absolute; left:62%; top:-.8em;
    color:#ED6292 !important; -webkit-text-fill-color:currentColor !important; font:.66em/1 serif; pointer-events:none;
    animation: milk-petal-fall 6.9s ease-in infinite !important;
}
@keyframes milk-petal-fall { 0%,24%,100%{opacity:0;transform:translate(-5px,-3px) rotate(0)} 34%{opacity:.9} 72%{opacity:.8;transform:translate(9px,18px) rotate(250deg)} 80%{opacity:0;transform:translate(13px,21px) rotate(320deg)} }

/* Blushing — the word shyly nudges aside as a heart appears. */
.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink {
    animation: milk-blushing-shy 7.8s ease-in-out infinite !important;
}
.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink::after {
    content:'♥' !important; display:block !important; position:absolute; right:-.45em; top:-.2em;
    color:#DD5278 !important; -webkit-text-fill-color:currentColor !important; font:.58em/1 serif; pointer-events:none;
    animation: milk-blushing-heart 7.8s ease-in-out infinite !important;
}
@keyframes milk-blushing-shy { 0%,32%,68%,100%{transform:translateX(0)} 44%,56%{transform:translateX(-1.5px)} }
@keyframes milk-blushing-heart { 0%,34%,66%,100%{opacity:0;transform:scale(.45) rotate(-12deg)} 45%{opacity:1;transform:scale(1.12) rotate(5deg)} 55%{opacity:.9;transform:scale(.92) rotate(0)} }
/* Gradient unlock correction: every family keeps a vivid two-color palette.
   Tier 3 animates that palette; Tier 4 layers its word-specific behavior on
   top. Electric retains the neon palette it already had. */
.milk-title:is(.milk-title-tier-1, .milk-title-tier-2, .milk-title-tier-3) > .milk-title-ink,
.milk-title-tier-4 > .milk-title-ink::before,
.milk-title-tier-4 .milk-title-letter {
    background-image: linear-gradient(
        90deg,
        var(--title-gradient-start) 0%,
        var(--title-gradient-end) 50%,
        var(--title-gradient-start) 100%
    ) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.milk-title-tier-1 > .milk-title-ink,
.milk-title-tier-2 > .milk-title-ink {
    background-size: 100% 100% !important;
    background-position: 50% 50% !important;
}

.milk-title-tier-3 > .milk-title-ink {
    animation: milk-title-gradient-flow 7.2s linear infinite !important;
}

/* Lively Milk palettes. */
.milk-title-font-dreamer { --title-gradient-start:#A9B6E8 !important; --title-gradient-end:#F3B7C4 !important; }
.milk-title-font-fairy { --title-gradient-start:#F4AFC3 !important; --title-gradient-end:#BFE7D3 !important; }
.milk-title-font-magical { --title-gradient-start:#FF7A3D !important; --title-gradient-end:#8B5CF6 !important; }
.milk-title-font-witchy { --title-gradient-start:#6E466E !important; --title-gradient-end:#9EAD92 !important; }
.milk-title-font-cozy { --title-gradient-start:#C9B7DB !important; --title-gradient-end:#AFC5A5 !important; }
.milk-title-font-gothic { --title-gradient-start:#4D4653 !important; --title-gradient-end:#8C5266 !important; }
.milk-title-font-pixel { --title-gradient-start:#71DCE0 !important; --title-gradient-end:#A987E8 !important; }
.milk-title-font-moonlit { --title-gradient-start:#596584 !important; --title-gradient-end:#D8D5E6 !important; }
.milk-title-font-whimsical { --title-gradient-start:#F2D675 !important; --title-gradient-end:#F08F8A !important; }
.milk-title-font-enchanted { --title-gradient-start:#B8EAD8 !important; --title-gradient-end:#D7C3F0 !important; }
.milk-title-font-haunted { --title-gradient-start:#70449A !important; --title-gradient-end:#9CCBFF !important; }
.milk-title-font-mossy { --title-gradient-start:#78966C !important; --title-gradient-end:#CDBDA8 !important; }
.milk-title-font-petal { --title-gradient-start:#F3AFC1 !important; --title-gradient-end:#F7C9AE !important; }
.milk-title-font-blushing { --title-gradient-start:#E89BAA !important; --title-gradient-end:#CDB7E8 !important; }
/* Specificity guard over the retired solid-color reset above. */
.milk-title.milk-title:not(.milk-title-font-never):is(.milk-title-tier-1, .milk-title-tier-2, .milk-title-tier-3) > .milk-title-ink,
.milk-title.milk-title-tier-4.milk-title-tier-4 > .milk-title-ink::before,
.milk-title.milk-title-tier-4.milk-title-tier-4 .milk-title-letter {
    background-image: linear-gradient(90deg,var(--title-gradient-start) 0%,var(--title-gradient-end) 50%,var(--title-gradient-start) 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}
/* Haunted palette · ink black, spectral purple, and eerie green. */
.milk-title.milk-title-font-haunted { --title-gradient-start:#713F9B !important; --title-gradient-end:#79B94A !important; }
.milk-title.milk-title-font-haunted:is(.milk-title-tier-1, .milk-title-tier-2, .milk-title-tier-3) > .milk-title-ink,
.milk-title.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::before,
.milk-title.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter {
    background-image:linear-gradient(90deg,#19151D 0%,#713F9B 32%,#79B94A 68%,#19151D 100%) !important;
}
/* -------------------------------------------------------------------------
   Tier 4 animation activation + Haunted final treatment
   -------------------------------------------------------------------------
   These selectors intentionally match the specificity of the legacy reset so
   every word-specific animation wins reliably in profile and inventory views.
   ------------------------------------------------------------------------- */
.milk-title.milk-title.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink { animation:milk-dreamer-drift 7.6s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-dreamer.milk-title-tier-4 > .milk-title-ink::after { animation:milk-dreamer-sleep 7.6s ease-out infinite !important; }
.milk-title.milk-title.milk-title-font-fairy.milk-title-tier-4 > .milk-title-ink::after { animation:milk-fairy-flit 5.8s cubic-bezier(.45,.05,.55,.95) infinite !important; }
.milk-title.milk-title.milk-title-font-magical.milk-title-tier-4 > .milk-title-ink::after { animation:milk-magical-cast 6.4s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-witchy.milk-title-tier-4 > .milk-title-ink::before { animation:milk-witchy-flicker 6.8s steps(1,end) infinite !important; }
.milk-title.milk-title.milk-title-font-cozy.milk-title-tier-4 > .milk-title-ink::after { animation:milk-cozy-steam 7.4s ease-out infinite !important; }
.milk-title.milk-title.milk-title-font-gothic.milk-title-tier-4 > .milk-title-ink::before { animation:milk-gothic-shadow 8s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink { animation:milk-pixel-glitch 6.2s steps(1,end) infinite !important; }
.milk-title.milk-title.milk-title-font-pixel.milk-title-tier-4 > .milk-title-ink::after { animation:milk-pixel-echo 6.2s steps(1,end) infinite !important; }
.milk-title.milk-title.milk-title-font-moonlit.milk-title-tier-4 > .milk-title-ink::after { animation:milk-moonlit-orbit 8.8s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-whimsical.milk-title-tier-4 .milk-title-letter { animation:milk-whimsical-wobble 7s ease-in-out infinite !important; animation-delay:calc(var(--letter-index,0) * .13s) !important; }
.milk-title.milk-title.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink::after { animation:milk-enchanted-rune 7.2s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-enchanted.milk-title-tier-4 > .milk-title-ink::before { animation:milk-enchanted-glow 7.2s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-petal.milk-title-tier-4 > .milk-title-ink::after { animation:milk-petal-fall 6.9s ease-in infinite !important; }
.milk-title.milk-title.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink { animation:milk-blushing-shy 7.8s ease-in-out infinite !important; }
.milk-title.milk-title.milk-title-font-blushing.milk-title-tier-4 > .milk-title-ink::after { animation:milk-blushing-heart 7.8s ease-in-out infinite !important; }

/* Haunted Tier 4 drops the gradient entirely: purple lettering, with the
   spectral neon-green ghost supplying the contrast and motion. */
.milk-title.milk-title.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::before,
.milk-title.milk-title.milk-title-font-haunted.milk-title-tier-4 .milk-title-letter {
    background:none !important;
    background-image:none !important;
    color:#713F9B !important;
    -webkit-text-fill-color:#713F9B !important;
    filter:none !important;
}
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost {
    --ghost-body:#8DFF4A !important;
    background-color:#8DFF4A !important;
    mix-blend-mode:normal !important;
    filter:drop-shadow(0 0 2px rgba(141,255,74,.95)) drop-shadow(0 0 5px rgba(113,255,68,.58)) !important;
}
.milk-title.milk-title.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    color:#8DFF4A !important;
    -webkit-text-fill-color:#8DFF4A !important;
    mix-blend-mode:screen !important;
}
/* Retire the older forced pastel Enchanted palette. */
.milk-title.milk-title.milk-title-font-enchanted { --title-gradient-start:#B8EAD8 !important; --title-gradient-end:#D7C3F0 !important; }
/* Haunted ghost cleanup: the old masked duplicate word was overlapping the
   new neon silhouette. Keep one compact, readable ghost crossing the title. */
.milk-title.milk-title.milk-title-font-haunted.milk-title-tier-4 > .milk-title-ink::after {
    content:none !important;
    display:none !important;
    animation:none !important;
    opacity:0 !important;
}
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost {
    z-index:7 !important;
    opacity:0;
}
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost > span:nth-child(1),
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost > span:nth-child(3),
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost > span:nth-child(5) {
    background-color:#8DFF4A !important;
}
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost > span:nth-child(2),
.milk-title-font-haunted.milk-title-tier-4 .milk-haunted-ghost > span:nth-child(4) {
    background-color:transparent !important;
}

/* Petal should fall through the title, not begin detached above the badge. */
.milk-title.milk-title.milk-title-font-petal.milk-title-tier-4 > .milk-title-ink::after {
    top:.04em !important;
    animation:milk-petal-fall-inline 6.9s ease-in infinite !important;
}
@keyframes milk-petal-fall-inline {
    0%,24%,100% { opacity:0; transform:translate(-4px,-2px) rotate(0); }
    34% { opacity:.92; }
    70% { opacity:.82; transform:translate(8px,11px) rotate(250deg); }
    80% { opacity:0; transform:translate(12px,14px) rotate(320deg); }
}
/* Main-profile titles are compact honorific badges, not hero headings. */
.profile-identity > .profile-display-title {
    margin: 0 0 .12rem !important;
    padding: .14rem .4rem .2rem !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
    border-radius: .48rem;
}
.profile-identity > .profile-display-title .milk-title,
.profile-identity > .profile-display-title .milk-title > .milk-title-ink {
    line-height: 1.12 !important;
    padding-bottom: .08em !important;
}
.profile-identity > .profile-display-title .milk-title.milk-title-font-magical,
.profile-identity > .profile-display-title .milk-title.milk-title-font-magical > .milk-title-ink {
    line-height: 1.16 !important;
    padding-bottom: .12em !important;
}
/* Limited Y2K title: a fully finished pop-star keepsake rather than an
   upgrade ladder. Its styling is intentionally available at Tier 0. */
.milk-title.milk-title-font-paolo {
    position: relative;
    padding-inline: .34em;
    overflow: visible;
    font-family: 'DynaPuff', 'Baloo 2', sans-serif !important;
    font-size: .92em;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1.2;
    white-space: nowrap;
    filter:
        drop-shadow(0 1px 0 #55246f)
        drop-shadow(1px 0 0 #55246f)
        drop-shadow(-1px 0 0 #55246f)
        drop-shadow(0 0 2px rgba(255, 255, 255, .7)) !important;
}
.milk-title.milk-title-font-paolo > .milk-title-ink {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #20d6cf 0%,
        #c9ef52 23%,
        #ff4f9b 48%,
        #a968ff 72%,
        #20d6cf 100%
    ) !important;
    background-size: 260% 100% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-position: 50% 50% !important;
    animation: none !important;
    transform-origin: 50% 72%;
}
.milk-title.milk-title-tier-1.milk-title-font-paolo > .milk-title-ink {
    animation:
        milk-paolo-color-cycle 4.8s linear infinite,
        milk-paolo-stage-pop 6.8s cubic-bezier(.2, .85, .25, 1) infinite !important;
}
.milk-title.milk-title-font-paolo::before,
.milk-title.milk-title-font-paolo::after {
    position: absolute;
    top: 50%;
    color: #f8ef68;
    -webkit-text-fill-color: #f8ef68;
    font-family: sans-serif;
    font-size: .56em;
    line-height: 1;
    text-shadow: 0 1px 0 #7a367d;
    opacity: .72;
    transform: translateY(-50%) scale(.72) rotate(-12deg);
}
.milk-title.milk-title-font-paolo::before {
    content: "★";
    left: -.38em;
    animation: none;
}
.milk-title.milk-title-font-paolo::after {
    content: "✦";
    right: -.38em;
    animation: none;
}
.milk-title.milk-title-tier-1.milk-title-font-paolo::before {
    animation: milk-paolo-star-left 6.8s ease-in-out infinite;
}
.milk-title.milk-title-tier-1.milk-title-font-paolo::after {
    animation: milk-paolo-star-right 6.8s ease-in-out infinite;
}
@keyframes milk-paolo-color-cycle {
    from { background-position: 0% 50%; }
    to { background-position: 260% 50%; }
}
@keyframes milk-paolo-stage-pop {
    0%, 28%, 72%, 100% {
        transform: translateY(0) scale(1) rotate(0);
        filter: brightness(1);
    }
    34% { transform: translateY(1px) scaleX(1.045) scaleY(.91) rotate(-.5deg); }
    40% {
        transform: translateY(-4px) scaleX(.97) scaleY(1.12) rotate(.7deg);
        filter: brightness(1.24);
    }
    46% {
        transform: translateY(-1px) scale(1.075) rotate(-.35deg);
        filter: brightness(1.1);
    }
    52% {
        transform: translateY(-3px) scale(1.035) rotate(.25deg);
        filter: brightness(1.34);
    }
    59% { transform: translateY(0) scaleX(1.04) scaleY(.97); }
    65% { transform: translateY(-1px) scale(1.015); }
}
@keyframes milk-paolo-star-left {
    0%, 31%, 70%, 100% {
        opacity: .65;
        transform: translateY(-50%) scale(.72) rotate(-12deg);
    }
    40% {
        opacity: 1;
        transform: translate(-.1em, -75%) scale(1.45) rotate(34deg);
        text-shadow: 0 0 4px #fff, 0 0 8px #f8ef68;
    }
    52% {
        opacity: 1;
        transform: translate(.04em, -60%) scale(1.08) rotate(86deg);
    }
}
@keyframes milk-paolo-star-right {
    0%, 36%, 72%, 100% {
        opacity: .65;
        transform: translateY(-50%) scale(.72) rotate(10deg);
    }
    46% {
        opacity: 1;
        transform: translate(.1em, -80%) scale(1.5) rotate(-42deg);
        text-shadow: 0 0 4px #fff, 0 0 8px #f8ef68;
    }
    58% {
        opacity: 1;
        transform: translate(-.04em, -58%) scale(1.12) rotate(-92deg);
    }
}
.post-mini-title > .milk-title.milk-title-font-paolo {
    min-width: max-content;
    font-size: .68rem !important;
    letter-spacing: .035em !important;
}
.profile-display-title .milk-title.milk-title-font-paolo {
    font-size: 1em !important;
}
@media (prefers-reduced-motion: reduce) {
    .milk-title.milk-title-font-paolo > .milk-title-ink {
        animation: none !important;
        background-position: 50% 50% !important;
        transform: none !important;
    }
    .milk-title.milk-title-font-paolo::before,
    .milk-title.milk-title-font-paolo::after {
        animation: none !important;
    }
}
.site-animations-off .milk-title.milk-title-font-paolo > .milk-title-ink {
    animation: none !important;
    background-position: 50% 50% !important;
    transform: none !important;
}
.site-animations-off .milk-title.milk-title-font-paolo::before,
.site-animations-off .milk-title.milk-title-font-paolo::after {
    animation: none !important;
}
/* Limited Y2K title: Elle Woods courtroom confidence in full pink gloss. */
.milk-title.milk-title-font-elle{position:relative;padding-inline:.42em;overflow:visible;font-family:'DynaPuff','Baloo 2',sans-serif!important;font-size:.88em;font-weight:700!important;letter-spacing:.035em!important;line-height:1.2;white-space:nowrap;filter:drop-shadow(0 1px 0 #762050) drop-shadow(1px 0 0 #762050) drop-shadow(-1px 0 0 #762050) drop-shadow(0 0 2px rgba(255,255,255,.85))!important}
.milk-title.milk-title-font-elle>.milk-title-ink{display:inline-block;background:linear-gradient(105deg,#ff3e9e 0%,#ff8bc4 22%,#fff4fb 38%,#ffe46b 49%,#fff4fb 58%,#ff72b5 76%,#ff3e9e 100%)!important;background-size:290% 100%!important;background-position:50% 50%!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:none!important;transform-origin:54% 72%}
.milk-title.milk-title-font-elle::before,.milk-title.milk-title-font-elle::after{position:absolute;top:50%;z-index:1;font-family:sans-serif;line-height:1;animation:none;pointer-events:none}
.milk-title.milk-title-font-elle::before{content:"♥";left:-.3em;color:#ff4fa4;-webkit-text-fill-color:#ff4fa4;font-size:.52em;text-shadow:0 1px 0 #7a2454;transform:translateY(-52%) rotate(-13deg)}
.milk-title.milk-title-font-elle::after{content:"✦";right:-.3em;color:#ffe46b;-webkit-text-fill-color:#ffe46b;font-size:.58em;text-shadow:0 1px 0 #8f5a22;transform:translateY(-52%) rotate(10deg)}
.milk-title.milk-title-tier-1.milk-title-font-elle>.milk-title-ink{animation:milk-elle-gloss-sweep 4.2s linear infinite,milk-elle-case-closed 6.4s cubic-bezier(.2,.82,.24,1) infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-elle::before{animation:milk-elle-heart-pop 6.4s ease-in-out infinite}
.milk-title.milk-title-tier-1.milk-title-font-elle::after{animation:milk-elle-spark-pop 6.4s ease-in-out infinite}
@keyframes milk-elle-gloss-sweep{from{background-position:0% 50%}to{background-position:290% 50%}}
@keyframes milk-elle-case-closed{0%,28%,78%,100%{transform:translateY(0) scale(1) rotate(0);filter:brightness(1)}35%{transform:translateY(1px) scaleX(1.04) scaleY(.94) rotate(-.7deg)}42%{transform:translateY(-4px) scale(1.075) rotate(1.8deg);filter:brightness(1.22)}49%{transform:translateY(-1px) scale(1.035) rotate(-1deg)}56%{transform:translateY(-3px) scale(1.09) rotate(.45deg);filter:brightness(1.35)}64%{transform:translateY(0) scaleX(1.045) scaleY(.97)}71%{transform:translateY(-1px) scale(1.015)}}
@keyframes milk-elle-heart-pop{0%,31%,76%,100%{opacity:.72;transform:translateY(-52%) scale(.82) rotate(-13deg)}42%{opacity:1;transform:translate(-.08em,-82%) scale(1.55) rotate(18deg);text-shadow:0 0 4px #fff,0 0 8px #ff69b4}57%{opacity:1;transform:translate(.04em,-60%) scale(1.08) rotate(-5deg)}}
@keyframes milk-elle-spark-pop{0%,37%,78%,100%{opacity:.7;transform:translateY(-52%) scale(.78) rotate(10deg)}49%{opacity:1;transform:translate(.1em,-85%) scale(1.65) rotate(82deg);text-shadow:0 0 4px #fff,0 0 9px #ffe46b}62%{opacity:1;transform:translate(-.03em,-60%) scale(1.1) rotate(138deg)}}
.post-mini-title>.milk-title.milk-title-font-elle{min-width:max-content;font-size:.64rem!important;letter-spacing:.022em!important}
.profile-display-title .milk-title.milk-title-font-elle{font-size:.94em!important}
@media(prefers-reduced-motion:reduce){.milk-title.milk-title-font-elle>.milk-title-ink,.milk-title.milk-title-font-elle::before,.milk-title.milk-title-font-elle::after{animation:none!important}}
.site-animations-off .milk-title.milk-title-font-elle>.milk-title-ink,.site-animations-off .milk-title.milk-title-font-elle::before,.site-animations-off .milk-title.milk-title-font-elle::after{animation:none!important}
/* Limited Y2K title: Clueless plaid with a dismissive little snap. */
.milk-title.milk-title-font-cher{position:relative;padding-inline:.42em;overflow:visible;font-family:'DynaPuff','Baloo 2',sans-serif!important;font-size:.95em;font-weight:700!important;font-style:italic;letter-spacing:.055em!important;line-height:1.2;white-space:nowrap;filter:drop-shadow(0 1px 0 #21182c) drop-shadow(1px 0 0 #21182c) drop-shadow(-1px 0 0 #21182c) drop-shadow(0 0 2px rgba(255,255,255,.92))!important}
.milk-title.milk-title-font-cher>.milk-title-ink{display:inline-block;background:linear-gradient(95deg,#ffd92f 0 22%,#fff7ca 22% 28%,#1f1928 28% 34%,#ffd92f 34% 60%,#ff62a8 60% 69%,#fff 69% 75%,#ffd92f 75% 100%)!important;background-size:235% 100%!important;background-position:50% 50%!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:none!important;transform-origin:48% 70%}
.milk-title.milk-title-font-cher::before,.milk-title.milk-title-font-cher::after{position:absolute;top:50%;z-index:1;font-family:sans-serif;font-style:normal;line-height:1;animation:none;pointer-events:none}
.milk-title.milk-title-font-cher::before{content:"◆";left:-.28em;color:#1f1928;-webkit-text-fill-color:#1f1928;font-size:.5em;text-shadow:0 0 2px #fff;transform:translateY(-52%) rotate(-12deg)}
.milk-title.milk-title-font-cher::after{content:"✦";right:-.3em;color:#ff62a8;-webkit-text-fill-color:#ff62a8;font-size:.58em;text-shadow:0 1px 0 #72204b;transform:translateY(-52%) rotate(9deg)}
.milk-title.milk-title-tier-1.milk-title-font-cher>.milk-title-ink{animation:milk-cher-plaid-slide 4.5s linear infinite,milk-cher-as-if 5.8s cubic-bezier(.18,.82,.22,1) infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-cher::before{animation:milk-cher-diamond-flick 5.8s ease-in-out infinite}
.milk-title.milk-title-tier-1.milk-title-font-cher::after{animation:milk-cher-spark-flick 5.8s ease-in-out infinite}
@keyframes milk-cher-plaid-slide{from{background-position:0% 50%}to{background-position:235% 50%}}
@keyframes milk-cher-as-if{0%,30%,76%,100%{transform:translateX(0) translateY(0) scale(1) rotate(0);filter:brightness(1)}38%{transform:translateX(-2px) translateY(1px) scaleX(1.04) scaleY(.94) rotate(-1.5deg)}46%{transform:translateX(5px) translateY(-3px) scale(1.12) rotate(3.5deg);filter:brightness(1.28)}53%{transform:translateX(-2px) translateY(-1px) scale(1.04) rotate(-2deg)}60%{transform:translateX(2px) translateY(-2px) scale(1.08) rotate(1deg);filter:brightness(1.38)}68%{transform:translateX(0) translateY(0) scaleX(1.05) scaleY(.97)}}
@keyframes milk-cher-diamond-flick{0%,32%,76%,100%{opacity:.74;transform:translateY(-52%) scale(.8) rotate(-12deg)}46%{opacity:1;transform:translate(-.12em,-82%) scale(1.5) rotate(-58deg);text-shadow:0 0 4px #fff,0 0 8px #ffd92f}60%{opacity:1;transform:translate(.03em,-60%) scale(1.05) rotate(-96deg)}}
@keyframes milk-cher-spark-flick{0%,38%,78%,100%{opacity:.72;transform:translateY(-52%) scale(.78) rotate(9deg)}51%{opacity:1;transform:translate(.18em,-78%) scale(1.65) rotate(105deg);text-shadow:0 0 4px #fff,0 0 9px #ff62a8}65%{opacity:1;transform:translate(-.03em,-58%) scale(1.08) rotate(160deg)}}
.post-mini-title>.milk-title.milk-title-font-cher{min-width:max-content;font-size:.7rem!important;letter-spacing:.04em!important}
.profile-display-title .milk-title.milk-title-font-cher{font-size:1em!important}
@media(prefers-reduced-motion:reduce){.milk-title.milk-title-font-cher>.milk-title-ink,.milk-title.milk-title-font-cher::before,.milk-title.milk-title-font-cher::after{animation:none!important}}
.site-animations-off .milk-title.milk-title-font-cher>.milk-title-ink,.site-animations-off .milk-title.milk-title-font-cher::before,.site-animations-off .milk-title.milk-title-font-cher::after{animation:none!important}
/* Exclusive Y2K identity reset: three quotes, three distinct title systems. */
.milk-title.milk-title-font-paolo{padding-inline:1.15em;font-family:'Audiowide',sans-serif!important;font-size:.72em;font-style:normal;letter-spacing:.04em!important;filter:drop-shadow(0 1px 0 #32116c) drop-shadow(1px 0 0 rgba(50,17,108,.72)) drop-shadow(-1px 0 0 rgba(50,17,108,.72)) drop-shadow(0 0 4px rgba(42,224,220,.8))!important}
.milk-title.milk-title-font-paolo>.milk-title-ink{background:linear-gradient(90deg,#fff 0%,#43ece5 25%,#ff58ae 52%,#ffe467 76%,#fff 100%)!important;background-size:240% 100%!important;background-position:0 50%!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;transform:none;transform-origin:center}
.milk-title.milk-title-font-paolo::before,.milk-title.milk-title-font-paolo::after{top:50%;text-shadow:0 1px 0 #32116c,1px 0 0 #32116c,-1px 0 0 #32116c,0 -1px 0 #32116c,0 0 5px currentColor}
.milk-title.milk-title-font-paolo::before{content:'♪';left:.05em;color:#2edfd8!important;-webkit-text-fill-color:#2edfd8!important;transform:translateY(-55%) rotate(-12deg)}
.milk-title.milk-title-font-paolo::after{content:'♫';right:.02em;color:#ff55aa!important;-webkit-text-fill-color:#ff55aa!important;transform:translateY(-55%) rotate(10deg)}
.milk-title.milk-title-tier-1.milk-title-font-paolo>.milk-title-ink{animation:milk-paolo-spotlight 3.6s linear infinite,milk-paolo-marquee 7s ease-in-out infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-paolo::before{animation:milk-paolo-note-left 7s ease-in-out infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-paolo::after{animation:milk-paolo-note-right 7s ease-in-out infinite!important}
@keyframes milk-paolo-spotlight{to{background-position:240% 50%}}
@keyframes milk-paolo-marquee{0%,38%,72%,100%{transform:translateY(0) scale(1);filter:brightness(1)}48%{transform:translateY(-1px) scale(1.035);filter:brightness(1.65) drop-shadow(0 0 5px #fff)}60%{transform:translateY(0) scale(1.012);filter:brightness(1.15)}}
@keyframes milk-paolo-note-left{0%,36%,70%,100%{opacity:.7;transform:translateY(-55%) rotate(-12deg)}48%{opacity:1;transform:translate(-.14em,-115%) rotate(-24deg)}60%{opacity:.85;transform:translate(.03em,-70%) rotate(-8deg)}}
@keyframes milk-paolo-note-right{0%,40%,74%,100%{opacity:.7;transform:translateY(-55%) rotate(10deg)}52%{opacity:1;transform:translate(.16em,-120%) rotate(24deg)}64%{opacity:.85;transform:translate(-.02em,-68%) rotate(7deg)}}

.milk-title.milk-title-font-elle{padding:0 .72em .16em;font-family:'Leckerli One',cursive!important;font-size:.83em;font-style:normal;font-weight:400!important;letter-spacing:.015em!important;filter:drop-shadow(0 1px 0 #831e55)!important}
.milk-title.milk-title-font-elle>.milk-title-ink{background:linear-gradient(180deg,#fff5fb 0%,#ff79bb 34%,#f52d8b 72%,#ae145d 100%)!important;background-size:100% 100%!important;background-position:50% 50%!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;transform:none}
.milk-title.milk-title-font-elle::before{content:'§';left:.05em;top:50%;color:#ff4f9f!important;-webkit-text-fill-color:#ff4f9f!important;font-family:Georgia,serif;font-size:.58em;text-shadow:none;transform:translateY(-55%) rotate(-8deg)}
.milk-title.milk-title-font-elle::after{content:'';top:auto;right:.5em;bottom:-.02em;left:.5em;width:auto;height:2px;border-radius:999px;background:linear-gradient(90deg,#ff3e9e,#ffacd4 72%,transparent);box-shadow:0 1px 0 rgba(126,26,76,.45);transform:scaleX(1);transform-origin:left center}
.milk-title.milk-title-tier-1.milk-title-font-elle>.milk-title-ink{animation:milk-elle-signature 7.2s ease-in-out infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-elle::before{animation:milk-elle-seal 7.2s cubic-bezier(.2,.75,.25,1) infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-elle::after{animation:milk-elle-underline 7.2s ease-in-out infinite!important}
@keyframes milk-elle-signature{0%,42%,74%,100%{transform:rotate(0);filter:brightness(1)}52%{transform:rotate(-1.2deg);filter:brightness(1.16)}59%{transform:rotate(.35deg);filter:brightness(1.08)}66%{transform:rotate(0)}}
@keyframes milk-elle-seal{0%,46%,75%,100%{opacity:.72;transform:translateY(-55%) rotate(-8deg) scale(.92)}55%{opacity:1;transform:translateY(-55%) rotate(7deg) scale(1.28)}64%{transform:translateY(-55%) rotate(-3deg) scale(1)}}
@keyframes milk-elle-underline{0%,40%{opacity:0;transform:scaleX(0)}58%,78%{opacity:1;transform:scaleX(1)}90%,100%{opacity:0;transform:scaleX(1)}}

.milk-title.milk-title-font-cher{display:inline-flex;align-items:center;padding:.24em .72em .2em;border:2px solid #17131c;border-radius:.14em;background:linear-gradient(90deg,transparent 0 26%,rgba(23,19,28,.92) 26% 31%,transparent 31% 68%,rgba(23,19,28,.58) 68% 73%,transparent 73%),linear-gradient(0deg,transparent 0 29%,rgba(23,19,28,.9) 29% 36%,transparent 36% 70%,rgba(23,19,28,.55) 70% 76%,transparent 76%),linear-gradient(135deg,#ffeb69,#f1cb1d)!important;box-shadow:3px 3px 0 #ff62a8;font-family:'Henny Penny',cursive!important;font-size:.88em;font-style:normal;font-weight:700!important;letter-spacing:.055em!important;filter:none!important;transform:skew(-3deg)}
.milk-title.milk-title-font-cher>.milk-title-ink{position:relative;z-index:1;background:linear-gradient(180deg,#4d4852 0%,#111218 48%,#362719 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none;transform:none}
.milk-title.milk-title-font-cher::before{content:'';position:absolute;inset:1px;z-index:0;border-radius:.08em;background:rgba(255,235,105,.14);-webkit-backdrop-filter:blur(1.25px);backdrop-filter:blur(1.25px);pointer-events:none}
.milk-title.milk-title-font-cher::after{content:'◆';top:50%;right:-.48em;color:#1f1928!important;-webkit-text-fill-color:#1f1928!important;font-size:.38em;text-shadow:none;transform:translateY(-50%) rotate(45deg)}
.milk-title.milk-title-tier-1.milk-title-font-cher>.milk-title-ink{animation:milk-cher-dismissive-swipe 6.2s cubic-bezier(.2,.75,.25,1) infinite!important}
.milk-title.milk-title-tier-1.milk-title-font-cher::after{animation:milk-cher-diamond-snap 6.2s steps(2,end) infinite!important}
@keyframes milk-cher-dismissive-swipe{0%,42%,72%,100%{transform:translateX(0)}49%{transform:translateX(-4px)}54%{transform:translateX(7px)}59%{transform:translateX(-2px)}64%{transform:translateX(0)}}
@keyframes milk-cher-diamond-snap{0%,45%,68%,100%{transform:translateY(-50%) rotate(45deg)}53%{transform:translate(.2em,-50%) rotate(135deg)}60%{transform:translateY(-50%) rotate(225deg)}}
/* AS IF! carries its own Clueless plaid tag, so post themes must not wrap it in a second badge. */
.forum-post-card .post-mini-title:has(> .milk-title-font-cher){width:max-content!important;max-width:100%!important;min-width:0!important;min-height:0!important;margin-left:auto!important;margin-right:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;overflow:visible!important}


.event-title-preview-paolo,.inventory-title-preview-paolo{background:radial-gradient(ellipse at 18% 0%,rgba(41,235,226,.48),transparent 42%),radial-gradient(ellipse at 82% 0%,rgba(255,69,161,.5),transparent 42%),linear-gradient(145deg,#160b3e,#4c176f 58%,#10194f)!important}
.event-title-preview-elle,.inventory-title-preview-elle{background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(237,84,149,.16) 17px 18px),linear-gradient(135deg,#fff8fc,#ffd7e9)!important}
.event-title-preview-cher,.inventory-title-preview-cher{background:linear-gradient(90deg,transparent 0 28%,rgba(31,25,40,.14) 28% 31%,transparent 31% 67%,rgba(255,98,168,.25) 67% 71%,transparent 71%),linear-gradient(0deg,transparent 0 31%,rgba(31,25,40,.14) 31% 34%,transparent 34% 72%,rgba(255,98,168,.25) 72% 76%,transparent 76%),#fff1a2!important}
.event-title-preview-cher::after{display:none!important}
.post-mini-title>.milk-title.milk-title-font-paolo{font-size:.58rem!important}.post-mini-title>.milk-title.milk-title-font-elle{font-size:.61rem!important}.post-mini-title>.milk-title.milk-title-font-cher{font-size:.62rem!important}
.profile-display-title .milk-title.milk-title-font-paolo{font-size:.88em!important}.profile-display-title .milk-title.milk-title-font-elle{font-size:.9em!important}.profile-display-title .milk-title.milk-title-font-cher{font-size:.92em!important}
@media(prefers-reduced-motion:reduce){.milk-title.milk-title-font-paolo>.milk-title-ink,.milk-title.milk-title-font-paolo::before,.milk-title.milk-title-font-paolo::after,.milk-title.milk-title-font-elle>.milk-title-ink,.milk-title.milk-title-font-elle::before,.milk-title.milk-title-font-elle::after,.milk-title.milk-title-font-cher>.milk-title-ink,.milk-title.milk-title-font-cher::after{animation:none!important}}

.milk-title.milk-title-font-paolo>.milk-title-ink{font-family:'Audiowide',sans-serif!important}
.milk-title.milk-title-font-elle>.milk-title-ink{font-family:'Leckerli One',cursive!important}
.milk-title.milk-title-font-cher>.milk-title-ink{font-family:'Henny Penny',cursive!important}





/* Limited Y2K title: a tiny Kim Possible-style incoming message popup. */
.milk-title.milk-title-font-kim {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .3em .82em .27em .7em;
    border: 2px solid #171c18;
    border-radius: .42em;
    background: linear-gradient(180deg, #dfff68 0%, #a8db31 100%) !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.48), 3px 3px 0 #f14b91;
    color: #182017 !important;
    -webkit-text-fill-color: #182017 !important;
    font-family: 'Pixelify Sans', ui-monospace, monospace !important;
    font-size: .82em;
    font-style: normal;
    font-weight: 700 !important;
    letter-spacing: .035em !important;
    line-height: 1.05 !important;
    white-space: nowrap;
    transform-origin: 50% 100%;
    isolation: isolate;
}
.milk-title.milk-title-font-kim > .milk-title-ink {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-left: .72em;
    background: none !important;
    color: #182017 !important;
    -webkit-text-fill-color: #182017 !important;
    font-family: 'Pixelify Sans', ui-monospace, monospace !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    transform: none;
}
.milk-title.milk-title-font-kim::before {
    content: '1';
    position: absolute;
    z-index: 4;
    top: -.46em;
    right: -.5em;
    display: grid;
    place-items: center;
    width: 1.22em;
    height: 1.22em;
    border: 1px solid #171c18;
    border-radius: 50%;
    background: #f14b91;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: 'Pixelify Sans', ui-monospace, monospace;
    font-size: .64em;
    line-height: 1;
    text-shadow: 0 1px 0 #7a1648;
    box-shadow: 1px 1px 0 #171c18;
}
.milk-title.milk-title-font-kim::after {
    content: '✉';
    position: absolute;
    z-index: 3;
    left: .48em;
    top: 50%;
    color: #182017 !important;
    -webkit-text-fill-color: #182017 !important;
    font-family: sans-serif;
    font-size: .62em;
    line-height: 1;
    text-shadow: none;
    transform: translateY(-52%);
}
.milk-title.milk-title-tier-1.milk-title-font-kim {
    animation: milk-kim-message-pop 6.2s cubic-bezier(.2,.78,.2,1) infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-kim::before {
    animation: milk-kim-unread-ping 6.2s ease-out infinite !important;
}
@keyframes milk-kim-message-pop {
    0%, 7% { opacity: 0; transform: translateY(7px) scale(.76); }
    13% { opacity: 1; transform: translateY(-2px) scale(1.055); }
    18%, 67% { opacity: 1; transform: translateY(0) scale(1); }
    72% { transform: translateX(-1px) rotate(-.4deg); }
    74% { transform: translateX(2px) rotate(.55deg); }
    76% { transform: translateX(-1px) rotate(-.25deg); }
    80% { opacity: 1; transform: translateX(0) scale(1); }
    88%, 100% { opacity: 0; transform: translateY(-3px) scale(.96); }
}
@keyframes milk-kim-unread-ping {
    0%, 11% { opacity: 0; transform: scale(.45); }
    17% { opacity: 1; transform: scale(1.28); }
    22%, 66% { opacity: 1; transform: scale(1); }
    71% { transform: scale(1.3); box-shadow: 0 0 0 3px rgba(241,75,145,.28), 1px 1px 0 #171c18; }
    78% { transform: scale(1); box-shadow: 1px 1px 0 #171c18; }
    88%, 100% { opacity: 0; transform: scale(.8); }
}
/* Exclusive title previews use white so members see their true contrast. */
.event-title-preview,
.event-title-preview-paolo,
.event-title-preview-elle,
.event-title-preview-cher,
.event-title-preview-kim {
    background: #fff !important;
}
.event-title-preview-cher::after { display: none !important; }
.post-mini-title > .milk-title.milk-title-font-kim { font-size: .57rem !important; }
.profile-display-title .milk-title.milk-title-font-kim { font-size: .84em !important; }
.forum-post-card .post-mini-title:has(> .milk-title-font-kim) {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: .18rem .25rem .28rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
@media (prefers-reduced-motion: reduce) {
    .milk-title.milk-title-font-kim,
    .milk-title.milk-title-font-kim::before { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.site-animations-off .milk-title.milk-title-font-kim,
.site-animations-off .milk-title.milk-title-font-kim::before { animation: none !important; opacity: 1 !important; transform: none !important; }

/* AS IF! cleanup: lighten the plaid itself; no animated blur sheet. */
.milk-title.milk-title-font-cher {
    background:
        linear-gradient(90deg,transparent 0 26%,rgba(48,43,53,.66) 26% 31%,transparent 31% 68%,rgba(48,43,53,.34) 68% 73%,transparent 73%),
        linear-gradient(0deg,transparent 0 29%,rgba(48,43,53,.66) 29% 36%,transparent 36% 70%,rgba(48,43,53,.32) 70% 76%,transparent 76%),
        linear-gradient(135deg,#fffbd7,#ffe98e) !important;
}
.milk-title.milk-title-font-cher::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.milk-title.milk-title-font-cher > .milk-title-ink {
    -webkit-text-stroke: .45px rgba(255,255,255,.98);
    filter: drop-shadow(0 1px 0 #17131c) drop-shadow(0 0 1px rgba(255,255,255,.9));
}

/* CALL ME, BEEP ME reads like an actual messenger screen: solid black type. */
.milk-title.milk-title-font-kim,
.milk-title.milk-title-font-kim > .milk-title-ink,
.milk-title.milk-title-font-kim::after {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
.milk-title.milk-title-font-kim > .milk-title-ink { text-shadow: none !important; }

.milk-title.milk-title.milk-title-font-kim.milk-title-font-kim > .milk-title-ink {
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-shadow: none !important;
}

.milk-title.milk-title.milk-title-font-cher.milk-title-font-cher > .milk-title-ink {
    background: linear-gradient(180deg,#ff69ad 0%,#ed2d82 48%,#bd155f 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 0 transparent !important;
    paint-order: normal;
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(255,255,255,.82), 3px 3px 1px rgba(23,19,28,.48) !important;
    filter: none !important;
}

/* Limited Y2K title: THAT'S SO stays put while FETCH stamps into the phrase. */
.milk-title.milk-title-font-fetch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3em .7em .34em;
    border: 2px solid #111;
    border-radius: .12em;
    background: #fff !important;
    box-shadow: 3px 3px 0 #f23887;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-family: 'DynaPuff', 'Baloo 2', sans-serif !important;
    font-size: .72em;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    transform: rotate(-1deg);
    transform-origin: center;
    isolation: isolate;
}
.milk-title.milk-title.milk-title-font-fetch.milk-title-font-fetch > .milk-title-ink {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: .24em;
    overflow: visible;
    background: none !important;
    background-image: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'DynaPuff', 'Baloo 2', sans-serif !important;
    font-size: 0 !important;
    text-shadow: none !important;
    transform: none;
}
.milk-title.milk-title-font-fetch > .milk-title-ink::before,
.milk-title.milk-title-font-fetch > .milk-title-ink::after {
    display: inline-block;
    font-family: 'DynaPuff', 'Baloo 2', sans-serif !important;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .015em;
    white-space: nowrap;
}
.milk-title.milk-title-font-fetch > .milk-title-ink::before {
    content: 'THAT’S SO';
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-shadow: 1px 1px 0 rgba(242,56,135,.28);
}
.milk-title.milk-title-font-fetch > .milk-title-ink::after {
    content: 'FETCH';
    color: #f23887 !important;
    -webkit-text-fill-color: #f23887 !important;
    -webkit-text-stroke: .45px #fff;
    paint-order: stroke fill;
    text-shadow: 1px 1px 0 #111;
    transform-origin: 50% 100%;
}
.milk-title.milk-title-font-fetch::before,
.milk-title.milk-title-font-fetch::after {
    content: none !important;
}
.milk-title.milk-title-tier-1.milk-title-font-fetch > .milk-title-ink::after {
    animation: milk-fetch-word-stamp 4.8s cubic-bezier(.18,.82,.24,1) infinite !important;
}
@keyframes milk-fetch-word-stamp {
    0%,16% { opacity:0; transform:translateY(-.85em) rotate(-7deg) scale(1.42); }
    24% { opacity:1; transform:translateY(.09em) rotate(1deg) scale(.9); }
    29% { transform:translateY(-.03em) rotate(-.5deg) scale(1.04); }
    34%,100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
.post-mini-title > .milk-title.milk-title-font-fetch { font-size: .56rem !important; }
.profile-display-title .milk-title.milk-title-font-fetch { font-size: .82em !important; }
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-fetch { font-size: .58rem !important; }
.forum-post-card .post-mini-title:has(> .milk-title-font-fetch) {
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:.18rem .28rem .25rem !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
@media (prefers-reduced-motion: reduce) {
    .milk-title.milk-title-font-fetch > .milk-title-ink::after { animation:none !important; opacity:1 !important; transform:none !important; }
}
.site-animations-off .milk-title.milk-title-font-fetch > .milk-title-ink::after { animation:none !important; opacity:1 !important; transform:none !important; }
/* WHAT, LIKE IT'S HARD? cleanup: lowercase pink signature, no leading seal. */
.milk-title.milk-title-font-elle {
    padding: 0 .38em .16em !important;
}
.milk-title.milk-title.milk-title-font-elle.milk-title-font-elle > .milk-title-ink {
    background: linear-gradient(90deg,#ff168d 0%,#ff78b8 28%,#ffd0e5 50%,#ff8fc6 72%,#ff168d 100%) !important;
    background-image: linear-gradient(90deg,#ff168d 0%,#ff78b8 28%,#ffd0e5 50%,#ff8fc6 72%,#ff168d 100%) !important;
    background-size: 220% 100% !important;
    background-position: 50% 50% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}
.milk-title.milk-title-font-elle::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Inventory previews mirror the compact equipped mini-profile scale. */
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-paolo {
    font-size: .58rem !important;
}
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-elle {
    font-size: .61rem !important;
}

/* Limited Y2K title: a compact Lizzie-style scrolling marquee. */
.milk-title.milk-title-font-hey_now {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10.8em;
    max-width: 100%;
    padding: .22em 1.05em .25em;
    border-top: 2px solid #ff4d9e;
    border-bottom: 2px solid #8a62e8;
    border-radius: .5em;
    background: linear-gradient(90deg,#fff8fc 0%,#fff 48%,#f7f1ff 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,77,158,.18), 0 2px 0 rgba(66,28,91,.3);
    color: #ff4d9e !important;
    -webkit-text-fill-color: #ff4d9e !important;
    font-family: 'Cherry Bomb One', 'DynaPuff', sans-serif !important;
    font-size: .72em;
    font-style: normal;
    font-weight: 400 !important;
    letter-spacing: .025em !important;
    line-height: 1.05 !important;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}
.milk-title.milk-title.milk-title-font-hey_now.milk-title-font-hey_now > .milk-title-ink {
    position: relative;
    z-index: 2;
    display: inline-block;
    flex: 0 0 auto;
    background: linear-gradient(90deg,#ff3291 0%,#ff8cc5 32%,#8a62e8 65%,#ff3291 100%) !important;
    background-image: linear-gradient(90deg,#ff3291 0%,#ff8cc5 32%,#8a62e8 65%,#ff3291 100%) !important;
    background-size: 180% 100% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Cherry Bomb One', 'DynaPuff', sans-serif !important;
    text-shadow: none !important;
    transform: none;
    will-change: transform;
}
.milk-title.milk-title-font-hey_now::before,
.milk-title.milk-title-font-hey_now::after {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 1.05em;
    color: #ff4d9e !important;
    -webkit-text-fill-color: #ff4d9e !important;
    font-family: sans-serif;
    font-size: .48em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 #51245f;
    transform: translateY(-52%);
    pointer-events: none;
}
.milk-title.milk-title-font-hey_now::before {
    content: '✦';
    left: .2em;
    background: linear-gradient(90deg,#fff8fc 55%,transparent);
}
.milk-title.milk-title-font-hey_now::after {
    content: '✦';
    right: .2em;
    background: linear-gradient(270deg,#f7f1ff 55%,transparent);
}
.milk-title.milk-title-tier-1.milk-title-font-hey_now > .milk-title-ink {
    animation: milk-hey-now-marquee 5.8s linear infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-hey_now::before,
.milk-title.milk-title-tier-1.milk-title-font-hey_now::after {
    animation: milk-hey-now-twinkle 2.9s ease-in-out infinite alternate !important;
}
.milk-title.milk-title-tier-1.milk-title-font-hey_now::after {
    animation-delay: -1.45s !important;
}
@keyframes milk-hey-now-marquee {
    from { transform: translateX(10.8em); }
    to { transform: translateX(-10.8em); }
}
@keyframes milk-hey-now-twinkle {
    0%,35% { opacity:.55; filter:brightness(1); }
    70%,100% { opacity:1; filter:brightness(1.35) drop-shadow(0 0 2px #ff8cc5); }
}
.post-mini-title > .milk-title.milk-title-font-hey_now {
    width: 10.8em;
    font-size: .56rem !important;
}
.profile-display-title .milk-title.milk-title-font-hey_now {
    font-size: .82em !important;
}
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-hey_now {
    font-size: .56rem !important;
}
.forum-post-card .post-mini-title:has(> .milk-title-font-hey_now) {
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:.15rem .2rem .22rem !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
@media (prefers-reduced-motion: reduce) {
    .milk-title.milk-title-font-hey_now > .milk-title-ink,
    .milk-title.milk-title-font-hey_now::before,
    .milk-title.milk-title-font-hey_now::after { animation:none !important; transform:none !important; opacity:1 !important; }
}
.site-animations-off .milk-title.milk-title-font-hey_now > .milk-title-ink,
.site-animations-off .milk-title.milk-title-font-hey_now::before,
.site-animations-off .milk-title.milk-title-font-hey_now::after { animation:none !important; transform:none !important; opacity:1 !important; }
/* Final AS IF color lock: black lettering over its offset white backing. */
html body .milk-title.milk-title.milk-title-font-cher.milk-title-font-cher > .milk-title-ink {
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #111217 !important;
    -webkit-text-fill-color: #111217 !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(255,255,255,.9), 3px 3px 1px rgba(23,19,28,.52) !important;
}

/* Limited Y2K title: a tiny blue fairy calls for attention, then takes flight. */
.milk-title.milk-title-font-navi {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9.4em;
    max-width: 100%;
    min-height: 2.15em;
    padding: .28em 1.05em .3em;
    border: 1px solid rgba(93,190,255,.68);
    border-radius: 1.2em;
    background: linear-gradient(180deg,#ffffff 0%,#edfaff 58%,#dcecff 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 0 rgba(54,103,180,.28), 0 0 .55em rgba(77,209,255,.2);
    color: #183864 !important;
    -webkit-text-fill-color: #183864 !important;
    font-family: 'Cinzel Decorative', 'Eagle Lake', Georgia, serif !important;
    font-size: .75em;
    font-style: normal;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}
.milk-title.milk-title.milk-title-font-navi > .milk-title-ink {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.35em;
    background: linear-gradient(180deg,#142b53 0%,#315d9d 55%,#132745 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Cinzel Decorative', 'Eagle Lake', Georgia, serif !important;
    font-size: .82em !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
.milk-title.milk-title-font-navi::before,
.milk-title.milk-title-font-navi::after {
    content: '';
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    opacity: 1;
    pointer-events: none;
}
/* translucent paired wings */
.milk-title.milk-title-font-navi::before {
    width: 1.35em;
    height: .82em;
    margin: -.41em 0 0 -.675em;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(237,251,255,.96) 0 34%,rgba(135,207,255,.72) 36% 52%,transparent 55%),
        radial-gradient(ellipse at 80% 50%,rgba(237,251,255,.96) 0 34%,rgba(135,207,255,.72) 36% 52%,transparent 55%);
    filter: drop-shadow(0 0 2px rgba(102,209,255,.9));
    transform: translate(3.35em,0) rotate(-8deg);
}
/* glowing fairy core */
.milk-title.milk-title-font-navi::after {
    width: .58em;
    height: .58em;
    margin: -.29em 0 0 -.29em;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 35%,#fff 0 15%,#c9fbff 22%,#55dcff 48%,#128fe6 68%,rgba(18,143,230,0) 74%) !important;
    box-shadow: 0 0 .18em #fff,0 0 .5em #53dcff,0 0 .82em rgba(33,142,255,.72);
    transform: translate(3.35em,0);
}
.milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink {
    font-size: 0 !important;
    background: none !important;
    text-shadow: none !important;
}
.milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink::before,
.milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink::after {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    overflow: hidden;
    color: #183864 !important;
    -webkit-text-fill-color: #183864 !important;
    font-family: 'Cinzel Decorative', 'Eagle Lake', Georgia, serif !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 0 #fff,0 0 4px rgba(82,211,255,.38) !important;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink::before {
    content: 'HEY!';
    animation: milk-navi-type-hey 8.4s linear infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink::after {
    content: 'LISTEN!';
    animation: milk-navi-type-listen 8.4s linear infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-navi::before {
    animation: milk-navi-wings-flight 8.4s ease-in-out infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-navi::after {
    animation: milk-navi-orb-flight 8.4s ease-in-out infinite !important;
}
@keyframes milk-navi-type-hey {
    0%,3% { opacity:0; clip-path:inset(0 100% 0 0); }
    4% { opacity:1; clip-path:inset(0 100% 0 0); }
    8% { clip-path:inset(0 75% 0 0); }
    12% { clip-path:inset(0 50% 0 0); }
    16% { clip-path:inset(0 25% 0 0); }
    20%,27% { opacity:1; clip-path:inset(0 0 0 0); }
    33%,100% { opacity:0; clip-path:inset(0 0 0 0); }
}
@keyframes milk-navi-type-listen {
    0%,34% { opacity:0; clip-path:inset(0 100% 0 0); }
    35% { opacity:1; clip-path:inset(0 100% 0 0); }
    39% { clip-path:inset(0 84% 0 0); }
    43% { clip-path:inset(0 68% 0 0); }
    47% { clip-path:inset(0 52% 0 0); }
    51% { clip-path:inset(0 36% 0 0); }
    55% { clip-path:inset(0 20% 0 0); }
    59%,63% { opacity:1; clip-path:inset(0 0 0 0); }
    69%,100% { opacity:0; clip-path:inset(0 0 0 0); }
}
@keyframes milk-navi-orb-flight {
    0%,68% { opacity:0; transform:translate(-3.8em,.1em) scale(.72); }
    72% { opacity:1; transform:translate(-3.25em,-.3em) scale(1); }
    77% { transform:translate(-1.7em,-.67em) scale(.94); }
    82% { transform:translate(.05em,.45em) scale(1.06); }
    87% { transform:translate(1.75em,-.55em) scale(.96); }
    92% { opacity:1; transform:translate(3.15em,.22em) scale(1.08); }
    97%,100% { opacity:0; transform:translate(3.7em,-.38em) scale(.74); }
}
@keyframes milk-navi-wings-flight {
    0%,68% { opacity:0; transform:translate(-3.8em,.1em) rotate(-20deg) scale(.72,.45); }
    72% { opacity:.95; transform:translate(-3.25em,-.3em) rotate(12deg) scale(1,.62); }
    77% { transform:translate(-1.7em,-.67em) rotate(-15deg) scale(.94,1); }
    82% { transform:translate(.05em,.45em) rotate(18deg) scale(1.06,.5); }
    87% { transform:translate(1.75em,-.55em) rotate(-12deg) scale(.96,1); }
    92% { opacity:.95; transform:translate(3.15em,.22em) rotate(15deg) scale(1.08,.55); }
    97%,100% { opacity:0; transform:translate(3.7em,-.38em) rotate(-18deg) scale(.74,.42); }
}
.post-mini-title > .milk-title.milk-title-font-navi {
    width: 9.4em;
    font-size: .59rem !important;
}
.profile-display-title .milk-title.milk-title-font-navi { font-size: .84em !important; }
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-navi { font-size: .59rem !important; }
.forum-post-card .post-mini-title:has(> .milk-title-font-navi) {
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:.15rem .2rem .22rem !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
@media (prefers-reduced-motion: reduce) {
    .milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink {
        font-size:.82em !important;
        background:linear-gradient(180deg,#142b53 0%,#315d9d 55%,#132745 100%) !important;
        background-clip:text !important;
        -webkit-background-clip:text !important;
        color:transparent !important;
        -webkit-text-fill-color:transparent !important;
    }
    .milk-title.milk-title-font-navi > .milk-title-ink::before,
    .milk-title.milk-title-font-navi > .milk-title-ink::after { display:none !important; animation:none !important; }
    .milk-title.milk-title-font-navi::before { animation:none !important; opacity:1 !important; transform:translate(3.35em,0) rotate(-8deg) !important; }
    .milk-title.milk-title-font-navi::after { animation:none !important; opacity:1 !important; transform:translate(3.35em,0) !important; }
}
.site-animations-off .milk-title.milk-title-tier-1.milk-title-font-navi > .milk-title-ink {
    font-size:.82em !important;
    background:linear-gradient(180deg,#142b53 0%,#315d9d 55%,#132745 100%) !important;
    background-clip:text !important;
    -webkit-background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}
.site-animations-off .milk-title.milk-title-font-navi > .milk-title-ink::before,
.site-animations-off .milk-title.milk-title-font-navi > .milk-title-ink::after { display:none !important; animation:none !important; }
.site-animations-off .milk-title.milk-title-font-navi::before { animation:none !important; opacity:1 !important; transform:translate(3.35em,0) rotate(-8deg) !important; }
.site-animations-off .milk-title.milk-title-font-navi::after { animation:none !important; opacity:1 !important; transform:translate(3.35em,0) !important; }
/* Limited Y2K title: a life-sim greeting with its own plumbob-inspired hello. */
.milk-title.milk-title-font-sul_sul {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 7.6em;
    max-width: 100%;
    min-height: 2.45em;
    padding: .86em .82em .28em;
    border: 1px solid rgba(44,177,118,.62);
    border-radius: .72em 1.1em .72em 1.1em;
    background: linear-gradient(145deg,#f7fff8 0%,#ddf8df 52%,#d5f7fa 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.92),0 2px 0 rgba(23,112,84,.3),0 0 .5em rgba(53,212,138,.16);
    color: #16764d !important;
    -webkit-text-fill-color: #16764d !important;
    font-family: 'Fredoka','DynaPuff',sans-serif !important;
    font-size: .78em;
    font-style: normal;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}
.milk-title.milk-title.milk-title-font-sul_sul > .milk-title-ink {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1em;
    background: linear-gradient(90deg,#168746 0%,#38c75f 42%,#12aabd 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Fredoka','DynaPuff',sans-serif !important;
    font-size: .86em !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.95) !important;
}
/* The bright green diamond stays recognizable without copying an external sprite. */
.milk-title.milk-title-font-sul_sul::before {
    content:'';
    position:absolute;
    z-index:5;
    left:50%;
    top:.14em;
    width:.64em;
    height:1.02em;
    background:conic-gradient(from 45deg at 50% 44%,#30b94f 0 25%,#30b94f 0 50%,#159a4b 0 75%,#43d75d 0) !important;
    clip-path:polygon(50% 0,100% 43%,50% 100%,0 43%);
    box-shadow:none;
    filter:drop-shadow(0 1px 0 #0a6a48) drop-shadow(0 0 3px rgba(83,237,105,.68));
    transform:translateX(-50%);
    transform-origin:50% 55%;
    pointer-events:none;
}
.milk-title.milk-title-font-sul_sul::after {
    content:'✦';
    position:absolute;
    z-index:6;
    left:calc(50% + .55em);
    top:.05em;
    color:#eaffb7 !important;
    -webkit-text-fill-color:#eaffb7 !important;
    font:.46em/1 sans-serif;
    text-shadow:0 0 3px #4ade80,0 0 5px rgba(32,191,209,.7);
    opacity:.82;
    pointer-events:none;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink {
    font-size:0 !important;
    background:none !important;
    text-shadow:none !important;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink::before,
.milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink::after {
    content:'SUL';
    position:absolute;
    bottom:0;
    display:block;
    color:#16764d !important;
    -webkit-text-fill-color:#16764d !important;
    font-family:'Fredoka','DynaPuff',sans-serif !important;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.055em;
    line-height:1;
    text-shadow:0 1px 0 #fff,0 0 3px rgba(69,215,132,.28) !important;
    transform-origin:50% 100%;
    pointer-events:none;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink::before {
    left:13%;
    animation:milk-sul-left-hello 5.6s cubic-bezier(.22,.72,.22,1) infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink::after {
    right:13%;
    animation:milk-sul-right-hello 5.6s cubic-bezier(.22,.72,.22,1) infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul::before {
    animation:milk-sul-diamond 5.6s ease-in-out infinite !important;
}
.milk-title.milk-title-tier-1.milk-title-font-sul_sul::after {
    animation:milk-sul-spark 5.6s ease-in-out infinite !important;
}
@keyframes milk-sul-left-hello {
    0%,18%,70%,100%{transform:translateY(0) rotate(0);color:#16764d;-webkit-text-fill-color:#16764d}
    27%{transform:translateY(-.26em) rotate(-8deg) scale(1.08);color:#23a955;-webkit-text-fill-color:#23a955}
    35%{transform:translateY(.03em) rotate(3deg) scale(1.02)}
    43%{transform:translateY(-.09em) rotate(-2deg)}
}
@keyframes milk-sul-right-hello {
    0%,35%,87%,100%{transform:translateY(0) rotate(0);color:#16825b;-webkit-text-fill-color:#16825b}
    48%{transform:translateY(-.26em) rotate(8deg) scale(1.08);color:#0ea9b4;-webkit-text-fill-color:#0ea9b4}
    56%{transform:translateY(.03em) rotate(-3deg) scale(1.02)}
    64%{transform:translateY(-.09em) rotate(2deg)}
}
@keyframes milk-sul-diamond {
    0%,15%,75%,100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1);filter:drop-shadow(0 1px 0 #0a6a48) drop-shadow(0 0 3px rgba(83,237,105,.58))}
    29%{transform:translateX(-50%) translateY(-.1em) rotate(-8deg) scale(1.09)}
    51%{transform:translateX(-50%) translateY(-.16em) rotate(8deg) scale(1.13);filter:drop-shadow(0 1px 0 #0a6a48) drop-shadow(0 0 6px rgba(83,237,105,.95))}
    64%{transform:translateX(-50%) translateY(-.05em) rotate(-3deg) scale(1.04)}
}
@keyframes milk-sul-spark {
    0%,18%,72%,100%{opacity:.35;transform:scale(.65) rotate(0)}
    31%,54%{opacity:1;transform:scale(1.45) rotate(95deg)}
    64%{opacity:.72;transform:scale(.9) rotate(160deg)}
}
.post-mini-title > .milk-title.milk-title-font-sul_sul {width:7.6em;font-size:.61rem !important;}
.profile-display-title .milk-title.milk-title-font-sul_sul {font-size:.86em !important;}
.inventory-title-display.inventory-title-display .milk-title.milk-title-font-sul_sul {font-size:.61rem !important;}
.forum-post-card .post-mini-title:has(> .milk-title-font-sul_sul){width:max-content!important;max-width:100%!important;min-width:0!important;min-height:0!important;margin-left:auto!important;margin-right:auto!important;padding:.12rem .18rem .2rem!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
@media(prefers-reduced-motion:reduce){
    .milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink{font-size:.86em!important;background:linear-gradient(90deg,#168746,#38c75f 42%,#12aabd)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
    .milk-title.milk-title-font-sul_sul > .milk-title-ink::before,.milk-title.milk-title-font-sul_sul > .milk-title-ink::after{display:none!important;animation:none!important}
    .milk-title.milk-title-font-sul_sul::before,.milk-title.milk-title-font-sul_sul::after{animation:none!important}
}
.site-animations-off .milk-title.milk-title-tier-1.milk-title-font-sul_sul > .milk-title-ink{font-size:.86em!important;background:linear-gradient(90deg,#168746,#38c75f 42%,#12aabd)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.site-animations-off .milk-title.milk-title-font-sul_sul > .milk-title-ink::before,.site-animations-off .milk-title.milk-title-font-sul_sul > .milk-title-ink::after{display:none!important;animation:none!important}
.site-animations-off .milk-title.milk-title-font-sul_sul::before,.site-animations-off .milk-title.milk-title-font-sul_sul::after{animation:none!important}
/* Store and inventory previews deliberately reuse the mini-profile title frame. */
.commerce-title-display{
    --mini-profile-accent:var(--accent-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    padding:.16rem .5rem!important;
    border:1px solid color-mix(in srgb,var(--mini-profile-accent) 24%,var(--border-color));
    border-radius:.4rem;
    background:color-mix(in srgb,var(--bg-card-inner) 88%,transparent);
    box-shadow:0 1px 0 color-mix(in srgb,#fff 65%,transparent);
}
.commerce-title-display:has(> .milk-title-font-cher){min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important}
.commerce-title-display:has(> .milk-title-font-kim){min-width:0!important;min-height:0!important;padding:.18rem .25rem .28rem!important;border:0!important;background:transparent!important;box-shadow:none!important}
.commerce-title-display:has(> .milk-title-font-fetch){min-width:0!important;min-height:0!important;padding:.18rem .28rem .25rem!important;border:0!important;background:transparent!important;box-shadow:none!important}
.commerce-title-display:has(> .milk-title-font-hey_now),.commerce-title-display:has(> .milk-title-font-navi){min-width:0!important;min-height:0!important;padding:.15rem .2rem .22rem!important;border:0!important;background:transparent!important;box-shadow:none!important}
.commerce-title-display:has(> .milk-title-font-sul_sul){min-width:0!important;min-height:0!important;padding:.12rem .18rem .2rem!important;border:0!important;background:transparent!important;box-shadow:none!important}
/* Exclusive inventory tier 0 means animation off. Preserve each title's
   designed readable ink instead of inheriting a surrounding card color. */
.milk-title.milk-title.milk-title-tier-0.milk-title-font-navi > .milk-title-ink {
    background: none !important;
    background-image: none !important;
    color: #183864 !important;
    -webkit-text-fill-color: #183864 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 0 3px rgba(82,211,255,.24) !important;
}
.milk-title.milk-title.milk-title-tier-0.milk-title-font-sul_sul > .milk-title-ink {
    background: none !important;
    background-image: none !important;
    color: #16764d !important;
    -webkit-text-fill-color: #16764d !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 3px rgba(69,215,132,.2) !important;
}
/* Paolo owns a compact stage backdrop everywhere it appears. This keeps the
   pale spotlight ink and music notes readable without depending on the site,
   profile, post, shop, or inventory background beneath it. */
.milk-title.milk-title-font-paolo {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .42em 1.35em .46em !important;
    border: 1px solid rgba(80, 235, 225, .62);
    border-radius: .62em;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(41, 235, 226, .42), transparent 43%),
        radial-gradient(ellipse at 82% 0%, rgba(255, 69, 161, .46), transparent 43%),
        linear-gradient(145deg, #160b3e, #4c176f 58%, #10194f) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 2px 0 rgba(16, 9, 57, .38),
        0 0 .45em rgba(42, 224, 220, .22);
}
.post-mini-title:has(> .milk-title-font-paolo),
.commerce-title-display:has(> .milk-title-font-paolo) {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* The public profile uses the same title presentation as forum mini profiles. */
.profile-identity > .profile-page-title {
    margin: 0 0 .12rem !important;
}