@font-face {
        font-family: MainFont;
        src: url(https://files.catbox.moe/89gzcf.ttf);
    }
    @font-face {
        font-family: HeadlineFont;
        src: url(https://files.catbox.moe/bfc3zc.ttf);
    }
    
    * { margin:0; padding:0; box-sizing:border-box; }

    body {
        min-height:100vh;
        background-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/bcgrepeat.png), linear-gradient(70deg, #f18f761a 20%, #ffd5b328 50%);
        background-size: 900px;
        font-family: MainFont; font-size: 1.3rem !important;
        color:#f5c9a8;
        display:flex;
        justify-content:center;
        padding:30px 12px;
    }

    body::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/moving-deco4.png), linear-gradient(to bottom, #f18f76 1.2%, #ffd5b3 5%, transparent 20%);
        background-size: 455px;
        background-repeat: repeat-x;
        z-index: 50;
        pointer-events: none;
        opacity: .5;
        animation-name: decor-move; animation-duration: 30s; animation-iteration-count: infinite;
    }

    @keyframes decor-move {
            0%, 100% {background-position-x: 0%;}
            50% {background-position-x: 50%;}
    }
    
    .frame {
        width:100%;
        max-width:680px;
        background:#fef9f1;
        border:2px solid #f0a878;
        border-radius:14px;
        padding:16px 18px 20px;
        position:relative;
        border-image:  url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/border.png) 17 /  17px / 4 round;
        border-width:  5px; border-style:  solid;
        filter: drop-shadow(0 0 3px #ffc286c7);
    }

    .frame::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: -2px;
        left: 0;
        background-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/decor3.png);
        background-size: 155px;
        background-repeat: repeat-x;
        z-index: 10;
        pointer-events: none;
        filter: hue-rotate(5deg) drop-shadow(0 1px 0 #ff9484ce) drop-shadow(0 2px 0 #cd7e63c5) drop-shadow(0 5px 5px #fef4eb);
        border-width: 3px; border-style:  solid;
        border-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/border-extra2.png) 120 / 52px / 3 round;
        
    }

    .frame::after{
        content: "";
        position: absolute;
        width: 100%; height: 100%;
        top: -5px; left: -4px;
        border-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/border4.png) 100 / 52px / 2 round;
        border-width: 5px; border-style:  solid;
        background-repeat: repeat-x;
        z-index: 20;
        pointer-events: none;
        filter: drop-shadow(0 0 7px #ec584477) drop-shadow(0 5px 2px #4e10087c);
    }

    h1 {
        text-align:right;
        font-size: 23px;
        letter-spacing:1px;
        color:#f7b8a8;
        font-weight:normal;
        margin-bottom:10px;
        text-transform:lowercase;
        text-shadow: 0 2px 0 #fff;
        filter: drop-shadow(0 0.6px 0 #cf695c) drop-shadow(0 -0.6px 0 #d1846c) drop-shadow(0.6px 0 0 #d1846c) drop-shadow(-0.6px 0 0 #d1846c) drop-shadow(0 0 3px rgba(218, 144, 94, 0.466)) drop-shadow(0 2px 2px rgba(243, 121, 121, 0.493));;
    }

    .divider {
        text-align:center;
        color:#f0a878;
        font-size:10px;
        letter-spacing:2px;
        margin:20px 0;
        opacity:0.6;
        overflow:hidden;
        white-space:nowrap;
    }

    .section-divider {
        height: 170px;
        width: 100%;
        background: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/divider.png);
        background-repeat: no-repeat; background-position: center; background-size: contain; 
        margin: auto;
    }

    .directory {
        display:flex;
        flex-wrap:wrap;
        gap:6px 10px;
        justify-content:center;
        padding:6px 4px 4px;
    }

    .dir-link {
        background:none;
        border:none;
        color:#d9895a;
        font-family:inherit;
        font-size:11px;
        letter-spacing:0.5px;
        text-decoration:underline;
        text-underline-offset:2px;
        cursor:pointer;
        padding:3px 2px;
        transition:color .15s ease;
    }

    .dir-link:hover, .dir-link.active {
        color:#e07850;
        text-shadow:0 0 6px rgb(136, 146, 201, 0.7);
    }

    .sections { margin-top:8px; }

    .section {
        display:none;
        border-top:1px dotted rgba(232,184,208,0.4);
        padding-top:10px;
        margin-top:10px;
        animation:fadeIn .35s ease;
    }
    .section.active { display:block; }

    @keyframes fadeIn {
        from{opacity:0; transform:translateY(6px);}
        to{opacity:1; transform:translateY(0);}
    }

    .section h2 {
        font-size:12px;
        color:#a86840;
        text-transform:lowercase;
        margin-bottom:8px;
        letter-spacing:0.5px;
    }

    .section h3 {
        font-size:1=.5px;
        color:#b5502c;
        margin:12px 0 5px;
        text-transform:lowercase;
        border-bottom:1px solid rgba(232,184,208,0.25);
        padding-bottom:3px;
    }
    .section h3:first-of-type { margin-top:0; }

    .section p, .section li {
        font-size:14px;
        line-height:1.75;
        color:#c99878;
    }

    .section ul { list-style:none; padding-left:2px; }
    .section li { padding-left:12px; position:relative; margin-bottom:6px;}
    .section li::before {
        content:"·";
        position:absolute; left:0;
        color:#f0a878;
    }

    a {
        color:#f0a878;
        text-decoration:none;
        border-bottom:1px dotted rgba(232,184,208,0.5);
    }
    a:hover { color:#972508; }

    small { color:#a3775a; font-size:11.5px; }

    .back-btn {
        display:block;
        margin:0 0 12px;
        background:none;
        color:#d9895a;
        font-family:inherit;
        font-size:10px;
        padding:4px 12px;
        cursor:pointer;
        text-transform:lowercase;
        letter-spacing:0.5px;
        border: none !important;
        filter: drop-shadow(1px 0 1px rgb(218, 149, 117));
    }
    .back-btn::after{
        content: ""; 
        display: inline-block; position: relative; 
        right: 0; width: 16px; height: 16px; 
        background-image: url(https://files.catbox.moe/7sy6jb.png); background-size: contain;
    }
    .back-btn:hover { color:#ffd1ab;}

    .page { display:none; }
    .page.active { display:block; }
    .page:not(#directory-page){
        padding: 20px; padding-top:65px;
    }


    /* ===== tooltip ===== */
    .cursor-tooltip {
        position: fixed;
        top: 0; left: 0;
        z-index: 9999;
        background: #4a2f1f;
        color: #ffe0c2;
        font-family: MainFont, sans-serif;
        font-size: 11px;
        letter-spacing: 0.3px;
        padding: 5px 10px;
        border-radius: 6px;
        border: 1px solid rgba(232,184,208,0.6);
        box-shadow: 0 3px 10px rgba(0,0,0,0.35);
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -125%) scale(0.9);
        transition: opacity .12s ease, transform .12s ease;
        max-width: 220px;
        white-space: normal;
    }
    .cursor-tooltip.visible {
        opacity: 1;
        transform: translate(-50%, -135%) scale(1);
    }

    /* ===== code snippets section ===== */
    .code-grid {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        gap: 12px;
        margin-top: 4px;
    }

    .code-box {
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        border: 1px solid rgba(142,162,215,0.35);
        background: #fdfbfc;
        box-shadow: 0 4px 10px rgba(90,110,160,0.12), inset 0 0 0 1px rgba(255,255,255,0.5);
    }

    .code-preview {
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(to bottom, #fff8f2 5%, rgb(255, 224, 194) 46%, #ffcfa3 51%, rgb(255, 238, 219) 110%);
        box-shadow: inset 0 2px 3px rgba(104, 46, 2, 0.1), inset 0 -8px 14px rgba(104, 40, 2, 0.1), inset 6px 0 12px rgba(104, 55, 2, 0.1), inset -6px 0 12px rgba(104, 46, 2, 0.1);
    }

    .code-preview span, .code-preview img {
        position: relative;
        z-index: 1;
        font-size: 15px;
        font-weight: bold;
        color: #8a5a2a;
        text-shadow: 0 1px 3px rgba(255,255,255,0.7);
    }

    .code-preview img { max-height: 42px; max-width: 80%; }

    .code-source {
        padding: 8px 9px;
        background: #f5f2f6;
        border-top: 1px solid rgba(142,162,215,0.25);
    }

    .code-source pre {
        margin: 0;
        max-height: 90px;
        overflow: auto;
        font-family: 'Courier New', monospace;
        font-size: 9.5px;
        line-height: 1.5;
        color: #6a5878;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .code-source .copy-btn {
        display:block;
        margin-top:6px;
        width:100%;
        background:none;
        border:1px solid rgba(142,162,215,0.4);
        color:#e07850;
        font-family:inherit;
        font-size:9px;
        text-transform:lowercase;
        letter-spacing:0.5px;
        padding:3px 0;
        cursor:pointer;
        border-radius:4px;
        transition:.15s;
    }
    .code-source .copy-btn:hover { color:#5a5a8a; border-color:#e07850; }

    /* ===== code preview demo animations ===== */
    .demo-gradient {
        background: linear-gradient(90deg,#ff9ecb,#b892e8,#7f7cf0);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .demo-rainbow { font-weight: bold; animation: demoHueRotate 4s linear infinite; color: rgb(255, 164, 164) !important; text-shadow: 0 2px 3px #ff00005c, 0 -2px 3px #ff00005c, 2px 0px 3px #ff00005c, -2px 0px 3px #ff00005c !important;}
    @keyframes demoHueRotate {
        from { filter: hue-rotate(0deg); }
        to   { filter: hue-rotate(360deg); }
    }

    .demo-blink { animation: demoBlink 1.4s ease-in-out infinite; }
    @keyframes demoBlink {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.15; }
    }

    .demo-bounce span {
        display: inline-block;
        animation: demoBounce 1s ease-in-out infinite;
    }
    @keyframes demoBounce {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-7px); }
    }
    .demo-bounce span:nth-child(2) { animation-delay: .08s; }
    .demo-bounce span:nth-child(3) { animation-delay: .16s; }
    .demo-bounce span:nth-child(4) { animation-delay: .24s; }
    .demo-bounce span:nth-child(5) { animation-delay: .32s; }
    .demo-bounce span:nth-child(6) { animation-delay: .40s; }

    .demo-typewriter {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid #4a5a8a;
        width: 0;
        animation:
            demoTyping 3s steps(9) infinite,
            demoCaret .7s step-end infinite;
    }
    @keyframes demoTyping {
        0%   { width: 0; }
        55%  { width: 9ch; }
        100% { width: 9ch; }
    }
    @keyframes demoCaret {
        50% { border-color: transparent; }
    }

    .demo-wave span {
        display: inline-block;
        animation: demoWave 1.6s ease-in-out infinite;
    }
    @keyframes demoWave {
        0%, 60%, 100% { transform: translateY(0); }
        30%           { transform: translateY(-6px); }
    }
    .demo-wave span:nth-child(2) { animation-delay: .06s; }
    .demo-wave span:nth-child(3) { animation-delay: .12s; }
    .demo-wave span:nth-child(4) { animation-delay: .18s; }
    .demo-wave span:nth-child(5) { animation-delay: .24s; }

    .demo-shake { display: inline-block; animation: demoShake .35s ease-in-out infinite; }
    @keyframes demoShake {
        0%, 100% { transform: translateX(0); }
        25%      { transform: translateX(-3px); }
        75%      { transform: translateX(3px); }
    }

    .demo-glow { color: #fff; animation: demoGlow 1.8s ease-in-out infinite; }
    @keyframes demoGlow {
        0%, 100% { text-shadow: 0 0 4px #ff9ecb, 0 0 8px #ff9ecb, 0 0 12px #b892e8; }
        50%      { text-shadow: 0 0 10px #ff9ecb, 0 0 20px #b892e8, 0 0 30px #7f7cf0; }
    }

    .demo-flip span {
        display: inline-block;
        animation: demoFlip 2.2s ease-in-out infinite;
    }
    @keyframes demoFlip {
        0%, 40%, 100% { transform: rotateY(0deg); }
        20%           { transform: rotateY(180deg); }
    }
    .demo-flip span:nth-child(2) { animation-delay: .1s; }
    .demo-flip span:nth-child(3) { animation-delay: .2s; }
    .demo-flip span:nth-child(4) { animation-delay: .3s; }

    .demo-pulse { display: inline-block; animation: demoPulse 1.1s ease-in-out infinite; }
    @keyframes demoPulse {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.25); }
    }

    .demo-lyrics {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4em;
    }
    .demo-lyrics span {
        opacity: 0;
        animation: demoLyricFade 5s ease-in-out infinite;
    }
    .demo-lyrics span:nth-child(1) { animation-delay: 0s; }
    .demo-lyrics span:nth-child(2) { animation-delay: .3s; }
    .demo-lyrics span:nth-child(3) { animation-delay: .6s; }
    .demo-lyrics span:nth-child(4) { animation-delay: .9s; }
    .demo-lyrics span:nth-child(5) { animation-delay: 1.2s; }
    @keyframes demoLyricFade {
        0%   { opacity: 0; transform: translateY(4px); }
        10%  { opacity: 1; transform: translateY(0); }
        70%  { opacity: 1; transform: translateY(0); }
        85%  { opacity: 0; transform: translateY(-4px); }
        100% { opacity: 0; transform: translateY(4px); }
    }

    .demo-jello { display: inline-block; animation: demoJello 2.2s ease-in-out infinite; }
    @keyframes demoJello {
        0%, 11.1%, 100% { transform: none; }
        22.2%  { transform: skewX(-12.5deg) skewY(-12.5deg); }
        33.3%  { transform: skewX(6.25deg) skewY(6.25deg); }
        44.4%  { transform: skewX(-3.125deg) skewY(-3.125deg); }
        55.5%  { transform: skewX(1.5625deg) skewY(1.5625deg); }
        66.6%  { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    }

    #pixgif img{width: 100px;}
    .pixels img{width: 20px !important; height:auto !important;}
    .pixels{display:block;}
    .pixels small{margin-right:4px;}
    .pixels-medium img{width: 45px !important}

    #templates .stamps-t img{width: 99px;}

    .graphics-bigger img{width: 70% !important}
    .graphics-byhalf img{width: 50% !important;}
    .graphics-thirty img{width: 60px !important; height:auto !important;}
    .graphics-small img{width: 30% !important}

    .graphics-row{margin-bottom:10px;}
    .graphics-row small{display:block; margin-bottom:2px;}
    .graphics-row-imgs{display:flex; flex-wrap:nowrap; align-items:flex-start; gap:2px; overflow-x:auto; max-width:100%;}
    
    .da-frame{
        margin-top: 30px;
        display: flex;
        width: 100%;
        position: relative;
        background-image: url(https://file.garden/agJFzJkh3SXB2_1R/!Images/Resources/Decor/stripe-bg2.png), 
        linear-gradient( 180deg, #fef9f1 11%, #ffd2b8 42%, #ffab96 71%, #ffd2b8 85%, #ffebe9 94%, #fef9f1 100% );
        border-left: 15px dashed #fab3ae9f; border-right: 10px dashed #fab3ae9f;
        border-bottom: 2px solid rgb(255, 240, 231);
        filter: drop-shadow(0 7px 0 rgb(255, 246, 239));
    }
    .da-frame::before{
        content: " ";
        display: block;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: radial-gradient(transparent 65%, #ffd0d0), radial-gradient(transparent 93%, #fff5e9), url(https://i.pinimg.com/1200x/9a/3c/c2/9a3cc27bed34d187c118d2d9c2503c72.jpg); 
        z-index: 3;
        pointer-events: none;
        mix-blend-mode: multiply; opacity: .25;
    }
    .da-frame::after{
        content: "";
        display: block;
        position: absolute;
        bottom: -10px; left: -5px;
        background-image: url(https://i.postimg.cc/DwPpDtRG/1pp1ae.png); background-repeat: no-repeat; background-size: contain;
        width: 90px; height: 90px;
        z-index: 1;
        pointer-events: none;
        filter: hue-rotate(30deg) brightness(3.9) saturate(.7); opacity: .4;
    }

    .da-frame .framed{
        width: 220px; 
        filter: drop-shadow(0 0 4px rgb(218, 143, 94)) drop-shadow(0 5px 2px rgba(243, 121, 121, 0.493)); 
        z-index: 2;}
    .da-frame .chibi {
        position: absolute;
        left: 150px; bottom: -40px;
        width: 120px; 
        filter: drop-shadow(0 0 4px rgb(218, 143, 94)) drop-shadow(0 5px 2px rgba(243, 121, 121, 0.493)); 
        z-index: 3;
        transition: all .3s ease-out ;
        image-rendering: auto !important;
    }
    .da-frame .chibi:hover{
        transform: skewY(2deg) rotate(-5deg) scale(1.05) translateY(-3px);
    }
    .h1-info{
        position:absolute; right: 100px; top:55px; margin:0; 
        text-align: right; font-size: 2.7rem; font-family: HeadlineFont;
    }

    .p-info, .p-info-sub{
        position:absolute; margin:0; 
        text-align:center; 
        background:none; 
        font-family:MainFont; 
        font-size:11px; letter-spacing:1.4px; text-transform:lowercase; color:#b5502c; text-shadow:0 1px 0 rgba(255,255,255,0.6); 
        filter: drop-shadow(1px 0 0 rgb(247, 220, 220)) drop-shadow(-1px 0 0 #ffe3d0);
    }

    .p-info{
        left:190px; right:0; top:100px; 
    }

    .p-info-sub{
        left:190px; right:-50px; top:130px; 
    }

    .highlight{text-decoration: 1px dotted #ff6f08 !important; background-color: rgba(255, 226, 217, 0.486); padding: 0 1px;}

    .keychain-gallery{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
    .keychain-slot{width:90px; height:220px;
        display:flex; align-items:center; justify-content:center; text-align:center;
        font-size:.7rem; color:#e0a084; padding:4px; background:rgba(255,255,255,.15);}
    .keychain-slot img{max-width:100%; max-height:100%; border-radius:8px;}

    .keychain{position: absolute; right: -65px; top: 420px;
        width: fit-content; 
        rotate: -20deg; 
        animation: keychain-sway 3s ease-in-out infinite; 
        transform-origin: top center;
        z-index: 40;
    }

    @keyframes keychain-sway {
        0%, 100% { rotate: -20deg;}
        50% { rotate: -10deg; }
    }

    .keychain img{width: 120px; filter: drop-shadow(0 0 3px rgba(177, 95, 81, 0.5));}

    .halo {position: absolute;
         width: fit-content; 
        right: 240px; top: -110px; z-index: 30; opacity: .77;
        filter: saturate(.5) hue-rotate(-30deg) drop-shadow(2px 0 0 rgba(199, 63, 22, 0.507)) drop-shadow(-2px 0 0 rgba(199, 63, 22, 0.507)) drop-shadow(0 2px 0 rgba(199, 63, 22, 0.507)) drop-shadow(0 -2px 0 rgba(199, 63, 22, 0.507));}
    .halo img{width: 200px}

    .demo-wave span { display: inline-block; animation: wave 1.6s ease-in-out infinite; }
.demo-wave span:nth-child(2) { animation-delay: .1s; }
.demo-wave span:nth-child(3) { animation-delay: .2s; }
.demo-wave span:nth-child(4) { animation-delay: .3s; }
@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-8px); }
}

.demo-flicker { animation: flicker 2.5s linear infinite; }
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.3; }
}


.demo-wiggle { display: inline-block; animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-5deg) ; }
  75%      { transform: rotate(5deg); }
}

.demo-swing { display: inline-block; transform-origin: top center; animation: swing 2s ease-in-out infinite; }
@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(10deg); }
  40%      { transform: rotate(-8deg); }
  60%      { transform: rotate(5deg); }
  80%      { transform: rotate(-3deg); }
}

.demo-elastic { display: inline-block; animation: elastic 1.6s ease-in-out infinite; }
@keyframes elastic {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  20%      { transform: scaleX(1.3) scaleY(0.7); }
  40%      { transform: scaleX(0.8) scaleY(1.2); }
  60%      { transform: scaleX(1.1) scaleY(0.9); }
  80%      { transform: scaleX(0.95) scaleY(1.05); }
}

.demo-neon { color: #fff; animation: neonFlicker 3s linear infinite; }
@keyframes neonFlicker {
  0%, 100%, 92% { text-shadow: 0 0 5px #7f7cf0, 0 0 15px #7f7cf0, 0 0 25px #b892e8; }
  93%, 95%      { text-shadow: none; }
  94%, 96%      { text-shadow: 0 0 5px #7f7cf0, 0 0 15px #7f7cf0; }
}

.demo-heartbeat { display: inline-block; animation: heartbeat 1.3s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.2); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.2); }
  70%      { transform: scale(1); }
}

.demo-spacing { display: inline-block; animation: spacing 2.4s ease-in-out infinite; }
@keyframes spacing {
  0%, 100% { letter-spacing: 0px; }
  50%      { letter-spacing: 6px; }
}

.demo-marquee-wrap { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 180px; vertical-align: bottom; }
.demo-marquee { display: inline-block; white-space: nowrap; animation: marquee 6s linear infinite; }
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.demo-fadeinout { display: inline-block; animation: fadeInOut 3s ease-in-out infinite; }
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ===== hover animation demos ===== */
.hover-grow { display: inline-block; transition: transform .25s ease; }
.hover-grow:hover { transform: scale(1.2); }

.hover-shake { display: inline-block; }
.hover-shake:hover { animation: hoverShake .35s ease-in-out infinite; }
@keyframes hoverShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.hover-glow { display: inline-block; transition: text-shadow .3s ease; }
.hover-glow:hover { text-shadow: 0 0 10px #ff9ecb, 0 0 20px #b892e8, 0 0 30px #7f7cf0; }

.hover-underline { position: relative; display: inline-block; }
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.hover-underline:hover::after { transform: scaleX(1); transform-origin: left; }

.hover-color { display: inline-block; transition: color .3s ease; }
.hover-color:hover { color: #b892e8; }

.hover-tilt { display: inline-block; transition: transform .25s ease; }
.hover-tilt:hover { transform: rotate(-6deg) scale(1.05); }

.hover-letter { display: inline-block; transition: letter-spacing .3s ease; }
.hover-letter:hover { letter-spacing: 4px; }

.hover-flip-wrap { display: inline-block; perspective: 400px; }
.hover-flip span { display: inline-block; transition: transform .3s ease; }
.hover-flip:hover span:nth-child(1) { transform: rotateY(180deg); transition-delay: 0s; }
.hover-flip:hover span:nth-child(2) { transform: rotateY(180deg); transition-delay: .05s; }
.hover-flip:hover span:nth-child(3) { transform: rotateY(180deg); transition-delay: .1s; }
.hover-flip:hover span:nth-child(4) { transform: rotateY(180deg); transition-delay: .15s; }

.hover-bounce { display: inline-block; }
.hover-bounce:hover { animation: hoverBounce .5s ease; }
@keyframes hoverBounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  50%      { transform: translateY(0); }
  70%      { transform: translateY(-4px); }
}

.hover-blur { display: inline-block; filter: blur(3px); transition: filter .3s ease; }
.hover-blur:hover { filter: blur(0px); }

/* section divider */
.section-divider {
  display: flex;
  align-items: center;
  gap: .75em;
  margin: 1.5em 0;
  opacity: .75;
  font-size: .85em;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}