:root {
    --bg-image: url("assets/wallpaper.webp");
    --pfp: url("assets/mikukage.webp");
}

[data-theme="teto"] {
    --bg-image: url("assets/wallpaper-2.webp");
    --pfp: url("assets/tetokage.webp");
}

html { color-scheme: dark; }

nav .links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

nav a { margin: 0 7px; }

nav a:focus-visible,
.btn:focus-visible,
.icon-button:focus-visible,
.switch:focus-within,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-tags .tag { margin-right: 0; }

.icon-button {
    appearance: none;
    padding: 0;
    color: inherit;
    font: inherit;
}

#miku-window {
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 125px);
}

.status-message {
    padding: 20px;
    text-align: center;
    color: var(--primary);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

img { max-width: 100%; }

@media (max-width: 900px) and (min-width: 701px) {
    .theme-switch-wrapper {
        position: relative;
        inset: auto;
        justify-content: center;
        padding: 8px;
        background: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid var(--primary);
    }
}

 (max-width: 700px) {
    body { background-attachment: scroll; }
    .profile-info h1 { font-size: clamp(2rem, 12vw, 2.8rem); }
    .profile-tags { justify-content: center; }
    .theme-switch-wrapper {
        position: relative;
        inset: auto;
        justify-content: center;
        padding: 8px;
        background: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid var(--primary);
    }
    nav { padding: 10px 8px; }
    nav a { margin: 0; padding: 7px 8px; font-size: 0.78rem; }
    .container { margin: 24px auto; padding: 0 12px; }
    .card { padding: 20px; border-radius: 15px; }
    #miku-chat-container {
        left: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    #miku-btn { width: 56px !important; height: 56px !important; }
    #miku-window {
        width: calc(100vw - 24px) !important;
        height: min(500px, calc(100dvh - 115px)) !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 420px) {
    .profile-avatar { width: 120px; height: 120px; min-width: 120px; }
    .card h2 { font-size: 1.15rem; letter-spacing: 1px; }
    .btn { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}