* {
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f111a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

@keyframes avatarBreathe {
    0%, 100% { opacity: .48; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

#avatarGlow {
    position: absolute;
    inset: -4px;
    border: 1.5px solid rgba(196, 181, 253, .9);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(181, 200, 250, .38),
        0 0 28px rgba(192, 132, 252, .18),
        inset 0 0 7px rgba(181, 200, 250, .12);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity .4s ease;
}
.breathe-live {
    animation: avatarBreathe 3.8s cubic-bezier(.45, 0, .55, 1) infinite;
    will-change: transform, opacity;
}

#akuru-cursor-canvas {
    opacity: 1;
    transition: opacity .24s ease;
}
#akuru-cursor-canvas.cursor-over-content { opacity: .22; }

.bg-grid-akuru {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(181, 200, 250, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(181, 200, 250, 0.04) 1px, transparent 1px);
    mask-image: radial-gradient(circle at 50% 30%, black 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black 25%, transparent 85%);
}


@keyframes ambientFloat {
    0%, 100% {
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        transform: translate(30px, -25px) scale(1.08);
    }
}
.ambient-glow {
    animation: ambientFloat 18s ease-in-out infinite;
    will-change: transform;
}
.ambient-glow-reverse {
    animation: ambientFloat 22s ease-in-out infinite reverse;
    will-change: transform;
}


header > div, header > div > div, #avatarContainer { min-width: 0; }
#avatarContainer { flex-shrink: 0; }
input[type="text"],
input[type="search"],
input:focus,
header,
header * {
    outline: none !important;
    box-shadow: none; 
}

:focus:not(:focus-visible) {
    outline: none !important;
}

:root :is(a, button, input:not([type="text"]):not([type="search"]), [tabindex]):focus-visible {
    outline: 2px solid #B5C8FA !important;
    outline-offset: 3px;
}
@media (max-width: 1023px) {
    .site-nav {
        display: grid;
        grid-template-columns: repeat(3, 2.75rem);
        flex-shrink: 0;
    }
}
@media (min-width: 1024px) {
    .site-nav {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}
@media (max-width: 767px) {
    #searchInput,
    #searchBar {
        font-size: 16px;
        line-height: 24px;
        padding-block: .5rem;
    }
}
#toast { max-width: calc(100vw - 2rem); }

@supports not (color: color-mix(in oklab, white 5%, transparent)) {
    .bg-white\/5 { background-color: rgba(255,255,255,.05); }
    .bg-white\/2 { background-color: rgba(255,255,255,.02); }
    .border-white\/10 { border-color: rgba(255,255,255,.1); }
    .border-white\/5 { border-color: rgba(255,255,255,.05); }
    .ambient-glow, .ambient-glow-reverse { background-color: rgba(181,200,250,.10); }
    .ambient-glow:nth-child(2) { background-color: rgba(181,200,250,.12); }
    .ambient-glow-reverse:nth-child(3) { background-color: rgba(147,51,234,.15); }
    .ambient-glow:nth-child(4) { background-color: rgba(219,39,119,.10); }
}
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(8px); }
.page-hidden .ambient-glow,
.page-hidden .ambient-glow-reverse,
.page-hidden .breathe-live,
.page-hidden .animate-pulse { animation-play-state: paused; }
.page-hidden #cdDisk,
.page-hidden #cdWrapper,
.page-hidden .animate-spin { animation-play-state: paused !important; }


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .ambient-glow, .ambient-glow-reverse { will-change: auto; }
    #avatarGlow.breathe-live {
        animation: none !important;
        opacity: .7;
        transform: scale(1);
        will-change: auto;
    }
}