* 
{
    user-select: none;
    box-sizing: border-box;
}

body 
{
    font-family: 'Outfit', sans-serif;
    background-color: #0f0502;
    color: #fcfcfc;
    overflow: hidden;
}

.font-display 
{ 
    font-family: 'Fredoka', sans-serif; 
}
.font-mono 
{ 
    font-family: 'Space Mono', monospace; 
}

::-webkit-scrollbar 
{ 
    width: 6.5px; height: 6.5px; 
}
::-webkit-scrollbar-track 
{ 
    background: rgba(30, 13, 5, 0.6); 
}
::-webkit-scrollbar-thumb 
{ 
    background: #58280f; border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover 
{ 
    background: #7a3a12;
}

.choco-panel 
{
    background: linear-gradient(145deg, rgba(52, 24, 10, 0.95), rgba(12, 5, 2, 0.95));
    box-shadow: 0 12px 30px rgba(5, 5, 5, 0.6), inset 0 1px 1px rgba(111, 110, 110, 0.15);
    border: 1px solid rgba(85, 41, 14, 0.5);
    backdrop-filter: blur(16px);
}

.choco-button 
{
    background: linear-gradient(180deg, #6e3212 0%, #51250d 100%);
    box-shadow: inset 0 1px 0 rgba(193, 192, 192, 0.2), 0 4px 8px rgba(5, 5, 5, 0.3);
    border: 1px solid #361809;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.choco-button:hover 
{
    background: linear-gradient(180deg, #9a4816 0%, #6d2b08 100%);
    transform: translateY(-1px);
}
.choco-button:active 
{
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(3, 3, 3, 0.4);
}

.choco-wallpaper 
{
    background-color: #0f0400;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(70, 33, 13, 0.15) 0%, transparent 60%),
        radial-gradient(#862b12 1.5px, transparent 1.5px);
    background-size: 100% 100%, 28px 28px;
}

@keyframes drip 
{
    0% { transform: translateY(-80%); }
    50% { transform: translateY(-20%); }
    100% { transform: translateY(0); }
}
.animate-drip 
{
    animation: drip 2s ease-in-out infinite;
}

.choco-glow 
{
    box-shadow: 0 0 15px rgba(217, 119, 6, 0.4);
}