html, body {
    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.theme-transition, .theme-transition * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.reveal-1 {
    transition-delay: 0.08s;
}

.reveal-2 {
    transition-delay: 0.16s;
}

.reveal-3 {
    transition-delay: 0.24s;
}

.grid-bg {
    background-image: linear-gradient(to right, rgba(4, 120, 87, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4, 120, 87, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}

.dark .grid-bg {
    background-image: linear-gradient(to right, rgba(16, 185, 129, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 185, 129, 0.06) 1px, transparent 1px);
}

.hero-glow {
    background: radial-gradient(60% 50% at 70% 30%, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0) 70%);
}

.dark .hero-glow {
    background: radial-gradient(60% 50% at 70% 30%, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0) 70%);
}

kbd.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #047857;
    background: #fff;
    border: 1px solid #D1FAE5;
    border-bottom-width: 2px;
    border-radius: 0.375rem;
    box-shadow: 0 1px 0 rgba(4, 120, 87, 0.04);
}

.dark kbd.kbd {
    color: #D1FAE5;
    background: #065F46;
    border-color: #0F6B4B;
    border-bottom-color: #10B981;
}

kbd.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #047857;
    background: linear-gradient(to bottom, #fff, #F0FDF6);
    border: 1px solid #D1FAE5;
    border-bottom-width: 3px;
    border-radius: 0.5rem;
    box-shadow: 0 1px 0 rgba(4, 120, 87, 0.04);
}

.dark kbd.key {
    color: #D1FAE5;
    background: linear-gradient(to bottom, #047857, #065F46);
    border-color: #0F6B4B;
    border-bottom-color: #10B981;
}

kbd.key-wide {
    min-width: 4rem;
}

kbd.key-tall {
    height: 2.25rem;
}

.nav-active {
    background: #ECFDF5;
    color: #047857;
}

.dark .nav-active {
    background: #065F46;
    color: #6EE7B7;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: #047857;
    color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    outline: 2px solid #10B981;
    outline-offset: 2px;
}

.coffee {
    display: flex !important;
}