/* Glass material for controls, with clear text and unchanged hit areas. */
.portfolio-fancy .liquid-glass {
    position: relative;
    isolation: isolate;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    border: 1px solid #ffffffa8;
    box-shadow: 0 8px 22px #352b3514,inset 0 1px 1px #ffffffed,inset 0 -2px 4px #ffffff45;
    transition: background .25s, box-shadow .25s, border-color .25s;
}
.portfolio-fancy .liquid-glass::before,
.portfolio-fancy .liquid-glass::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}
.portfolio-fancy .liquid-glass::before {
    background: linear-gradient(140deg,#ffffff50,transparent 32%,transparent 67%,#ffffff20);
    box-shadow: inset 1px 1px 2px #ffffffa8,inset -1px -1px 3px #3b2c3a14;
}
.portfolio-fancy .liquid-glass::after {
    background: radial-gradient(ellipse at var(--glass-x,25%) var(--glass-y,0%),#ffffff8a,transparent 65%);
    opacity: .38;
    transition: opacity .25s;
}
.portfolio-fancy .liquid-glass:hover::after { opacity: .65; }
.portfolio-fancy .navbar-floating-inner.liquid-glass {
    background: linear-gradient(120deg,#ffffff12,#ffffff04 52%,#ffffff0c),#212026b5;
    border-color: #ffffff70;
    border-radius: 22px;
    box-shadow: 0 12px 34px #1c142a28,inset 0 1px 1px #ffffff8f,inset 0 -1px 2px #ffffff25;
}
.portfolio-fancy .navbar-floating-inner.liquid-glass::after { opacity: .18; }
.portfolio-fancy .navbar-floating-inner.liquid-glass:hover::after { opacity: .28; }
.portfolio-fancy .navbar-floating-inner .navbar-github {
    background: #ffffff10;
    border-color: #ffffff35;
    box-shadow: inset 0 1px #ffffff1f;
}
.portfolio-fancy .hero-links a.liquid-glass {
    background: linear-gradient(155deg,#ffffff73,#ffffff20);
    border-color: #ffffffc7;
    color: #49424c;
    box-shadow: 0 8px 22px #352b3510,inset 0 1px 1px #fff,inset 0 -1px 3px #c4b3c36b;
}
.portfolio-fancy .hero-links a.liquid-glass:first-child {
    background: linear-gradient(150deg,#5c535ccb,#28232beb 75%);
    color: #fff;
    border-color: #ffffff70;
    box-shadow: 0 10px 24px #362b3924,inset 0 1px 1px #ffffff78,inset 0 -1px 3px #00000030;
}
.portfolio-fancy .hero-links a.liquid-glass:hover { box-shadow: 0 10px 26px #352b351c,inset 0 1px 1px #fff,inset 0 -1px 3px #c4b3c370; }
.portfolio-fancy .hero-links a.liquid-glass:first-child:hover { box-shadow: 0 10px 28px #352b352c,inset 0 1px 1px #ffffffb0,inset 0 -1px 3px #00000030; }
.portfolio-fancy .feature-indicator.liquid-glass {
    background: linear-gradient(150deg,#ffffff70,#ffffff25);
    border-color: #ffffffb8;
    box-shadow: 0 8px 22px #352b3510,inset 0 1px 1px #fff,inset 0 -2px 4px #ffffff48;
}
.portfolio-fancy .feature-toggle.liquid-glass {
    background: linear-gradient(150deg,#ffffff73,#ffffff25);
    border-color: #ffffffb8;
    color: #302a34;
}
.portfolio-fancy .feature-toggle.liquid-glass.is-paused {
    background: linear-gradient(150deg,#645768cb,#2b2430eb 80%);
    border-color: #ffffff78;
    color: #fff;
    box-shadow: 0 8px 20px #30233220,inset 0 1px 1px #ffffff70,inset 0 -1px 3px #00000020;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .portfolio-fancy .hero-links a.liquid-glass, .portfolio-fancy .feature-indicator.liquid-glass, .portfolio-fancy .feature-toggle.liquid-glass { background: #f4f0f3; }
    .portfolio-fancy .hero-links a.liquid-glass:first-child, .portfolio-fancy .feature-toggle.liquid-glass.is-paused, .portfolio-fancy .navbar-floating-inner.liquid-glass { background: #302a34; color: white; }
}