body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            transition: opacity .3s ease-in-out;
            opacity: 0
        }

        .modal.show {
            display: flex;
            opacity: 1
        }

        .modal-content {
            background-color: #1e293b;
            padding: 24px;
            border-radius: .75rem;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-20px);
            transition: transform .3s ease-in-out
        }

        .modal.show .modal-content {
            transform: translateY(0)
        }

        .close-button {
            color: #94a3b8;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color .2s ease-in-out
        }

        .close-button:hover,
        .close-button:focus {
            color: #e2e8f0
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 8px
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #334155;
            border-radius: 10px
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #64748b;
            border-radius: 10px
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8
        }

        .letter-avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
            border-radius: 9999px;
            border: 2px solid var(--tw-border-sky-500)
        }

        .comments-section {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease-out, background-color .3s ease-out;
            background-color: #1e293b;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)
        }

        .comments-section.expanded {
            max-height: 1000px;
            background-color: #334155
        }

        .comment-card {
            border-left: 2px solid #475569;
            padding-left: 1rem
        }