/* High-Contrast Bold Text Enhancement */
strong, b, .markdown-content strong, .markdown-content b {
    font-weight: 700;
    letter-spacing: 0;
}
html:not(.dark) strong, html:not(.dark) b, html:not(.dark) .markdown-content strong, html:not(.dark) .markdown-content b {
    color: #030712 !important; /* Pure pitch black for instant contrast against gray body text */
}
.dark strong, .dark b, .dark .markdown-content strong, .dark .markdown-content b {
    color: #ffffff !important; /* Pure bright white for dark mode contrast */
}

/* Markdown Content Typography & Layout Rules */
.markdown-content p {
    margin-bottom: 0.85em !important;
    line-height: 1.7 !important;
}
.markdown-content p:last-child {
    margin-bottom: 0 !important;
}
.markdown-content ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.85rem !important;
    display: block !important;
}
.markdown-content ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.85rem !important;
    display: block !important;
}
.markdown-content li {
    display: list-item !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.6 !important;
}
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {
    font-weight: 800 !important;
    color: var(--on-surface-color) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}
.markdown-content h1 { font-size: 1.5rem !important; }
.markdown-content h2 { font-size: 1.25rem !important; }
.markdown-content h3 { font-size: 1.1rem !important; }
.markdown-content em { font-style: italic !important; }
.markdown-content a {
    color: var(--primary-container-color) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.markdown-content code {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--primary-container-color) !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 0.25rem !important;
    font-family: monospace !important;
    font-size: 0.88em !important;
}
.markdown-content pre {
    background: #1e293b !important;
    color: #f8fafc !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}
.markdown-content blockquote {
    border-left: 4px solid var(--primary-container-color) !important;
    padding-left: 1rem !important;
    font-style: italic !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    opacity: 0.9 !important;
}
.markdown-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.75rem !important;
    margin: 1.25rem 0 !important;
    border: 1px solid var(--outline-variant-color) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
}
.markdown-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1rem 0 !important;
    font-size: 0.875rem !important;
}
.markdown-content th, .markdown-content td {
    border: 1px solid var(--outline-variant-color) !important;
    padding: 0.5rem 0.75rem !important;
}
.markdown-content th {
    background: var(--surface-container-color) !important;
    font-weight: 700 !important;
}

:root {
    --bg-color: #f7f8fa;
    --surface-color: #ffffff; /* pure white surface */
    --on-surface-color: #20252c;
    --on-surface-variant-color: #58616c;
    --outline-variant-color: #dce1e6;
    --surface-container-color: #eef1f4;
    --surface-container-lowest-color: #ffffff;
    
    --primary-container-color: #2346a0; /* Royal navy blue */
    --primary-fixed-dim-color: #1b367f;
    --tertiary-container-color: #0f766e; /* Teal accent */

    /* Selective Professional Accents */
    --primary-accent: #2346a0; /* Royal Navy Blue */
    --primary-accent-hover: #1b367f;
    --primary-accent-bg: rgba(35, 70, 160, 0.08);
    --primary-accent-border: rgba(35, 70, 160, 0.25);
    
    --secondary-accent: #0f766e; /* Teal Accent */
    --secondary-accent-bg: rgba(15, 118, 110, 0.08);
    
    --tertiary-accent: #d97706; /* Amber Gold */
    --tertiary-accent-bg: rgba(217, 119, 6, 0.08);
    
    --error-color: #e11d48; /* Rose Red */
    --error-bg: rgba(225, 29, 72, 0.08);

    --border-color: #dce1e6;
    --glass-bg: rgba(248, 251, 255, 0.9);
    --shadow-color: rgba(35, 70, 160, 0.08);
    --hover-border: #b8c8e5;
    --hover-shadow: rgba(35, 70, 160, 0.12);
    --scrollbar-track: #f8fbff;
    --scrollbar-thumb: #cbd5e1;
    --spider-color-base: 35, 70, 160;
    --bracket-color: #2346a0;
}

.dark {
    --bg-color: #141618;
    --surface-color: #1c1f22;
    --on-surface-color: #f8fafc; /* high contrast text */
    --on-surface-variant-color: #adb5bf;
    --outline-variant-color: #353b42;
    --surface-container-color: #252a30;
    --surface-container-lowest-color: #101214;
    
    --primary-container-color: #60a5fa; /* Neutral light text color */
    --primary-fixed-dim-color: #3b82f6;
    --tertiary-container-color: #2dd4bf;

    /* Selective Professional Accents for Dark Mode */
    --primary-accent: #38bdf8; /* Electric Cyan */
    --primary-accent-hover: #60a5fa;
    --primary-accent-bg: rgba(56, 189, 248, 0.12);
    --primary-accent-border: rgba(56, 189, 248, 0.3);
    
    --secondary-accent: #2dd4bf; /* Teal Accent */
    --secondary-accent-bg: rgba(45, 212, 191, 0.12);
    
    --tertiary-accent: #fbbf24; /* Amber Gold */
    --tertiary-accent-bg: rgba(251, 191, 36, 0.12);
    
    --error-color: #fb7185; /* Rose Red */
    --error-bg: rgba(251, 113, 133, 0.14);

    --border-color: #353b42;
    --glass-bg: rgba(28, 31, 34, 0.96);
    --shadow-color: rgba(0, 0, 0, 0.35);
    --hover-border: #2e437b;
    --hover-shadow: rgba(0, 0, 0, 0.2);
    --scrollbar-track: #141618;
    --scrollbar-thumb: #454c55;
    --spider-color-base: 96, 165, 250;
    --bracket-color: #60a5fa;
}

/* Professional Accent Buttons & Highlights */
.btn-primary-accent {
    background-color: var(--primary-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-accent) !important;
    box-shadow: 0 4px 14px 0 var(--primary-accent-border) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dark .btn-primary-accent {
    color: #0f172a !important;
    font-weight: 700 !important;
}
.btn-primary-accent:hover {
    background-color: var(--primary-accent-hover) !important;
    border-color: var(--primary-accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px 0 var(--primary-accent-border) !important;
}

.btn-outline-accent {
    background-color: var(--primary-accent-bg) !important;
    color: var(--primary-accent) !important;
    border: 1px solid var(--primary-accent-border) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-outline-accent:hover {
    background-color: var(--primary-accent) !important;
    color: #ffffff !important;
    border-color: var(--primary-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px 0 var(--primary-accent-border) !important;
}
.dark .btn-outline-accent:hover {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.badge-blue {
    background-color: var(--primary-accent-bg) !important;
    color: var(--primary-accent) !important;
    border: 1px solid var(--primary-accent-border) !important;
}

.badge-emerald {
    background-color: var(--secondary-accent-bg) !important;
    color: var(--secondary-accent) !important;
    border: 1px solid rgba(5, 150, 105, 0.25) !important;
}
.dark .badge-emerald {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

.badge-amber {
    background-color: var(--tertiary-accent-bg) !important;
    color: var(--tertiary-accent) !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
}
.dark .badge-amber {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.badge-rose {
    background-color: var(--error-bg) !important;
    color: var(--error-color) !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
}
.dark .badge-rose {
    border-color: rgba(251, 113, 133, 0.3) !important;
}

.icon-box-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: var(--primary-accent-bg);
    color: var(--primary-accent);
    border: 1px solid var(--primary-accent-border);
}

/* Smooth readable text selection */
::selection {
    background: var(--primary-accent-bg);
    color: var(--primary-accent);
}

/* Universal Tap Highlight Reset & Smooth transitions */
* {
    -webkit-tap-highlight-color: transparent;
}

 a, button {
    transition: background-color 0.25s ease, 
                border-color 0.25s ease, 
                color 0.25s ease, 
                box-shadow 0.25s ease;
}

body { 
    background-color: var(--bg-color); 
    color: var(--on-surface-color); 
    overflow-x: hidden;
}

/* Modern Premium Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-container-color);
}

/* Smooth readable text selection */
::selection {
    background: rgba(15, 23, 42, 0.12);
    color: inherit;
}
.dark ::selection {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

/* Clean Academic Card Utilities */
.glass-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    border-radius: 0.5rem !important;
    transition: border-color 0.16s ease;
}
.glass-card:hover {
    border-color: var(--hover-border);
    box-shadow: none;
}

/* Hide background floating orbs for clean white layout */
.ambient-orb {
    display: none !important;
}

/* Signature alvii.tech Background Gradient */
body {
    background: var(--bg-color);
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    color: var(--on-surface-color);
    line-height: 1.65;
}
.dark body {
    background: var(--bg-color);
}

.premium-grid {
    background-image: none !important;
}

/* Signature alvii.tech Navigation Items & Active Page Focusing */
.nav-item {
    margin: 0.05rem 0.5rem;
    padding: 0.38rem 0.85rem;
    border-radius: 0.5rem !important; /* Reduced sleek rounded corner (8px) */
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: "DM Sans", sans-serif;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--on-surface-variant-color);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid transparent;
}
.nav-item:hover {
    background-color: var(--surface-container-color);
    color: var(--primary-container-color);
}
/* Active Page Pill Focus — Signature alvii.tech White Floating Capsule */
.nav-item.active {
    background: var(--primary-accent-bg) !important;
    color: var(--primary-container-color) !important;
    border-color: var(--primary-accent-border) !important;
    font-weight: 700;
    box-shadow: none !important;
}
.nav-item.active span.material-symbols-outlined {
    color: #2346a0 !important;
}
/* Dark mode active page focus */
.dark .nav-item.active {
    background: var(--primary-accent-bg) !important;
    color: #60a5fa !important;
    border-color: var(--primary-accent-border) !important;
    font-weight: 700;
    box-shadow: none !important;
}
.dark .nav-item.active span.material-symbols-outlined {
    color: #60a5fa !important;
}

/* Hide scrollbars for swipeable status bar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================
   Dynamic Island Schedule Chat Animations
   ========================================== */
@keyframes di-slide-in-right {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes di-slide-out-left {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-40px) scale(0.95); }
}
@keyframes di-fade-collapse {
    from { opacity: 1; max-width: 900px; transform: scale(1); }
    to   { opacity: 0; max-width: 0px; transform: scale(0.92); padding: 0; margin: 0; }
}
@keyframes di-fade-expand {
    from { opacity: 0; max-width: 0px; transform: scale(0.92); padding: 0; margin: 0; }
    to   { opacity: 1; max-width: 900px; transform: scale(1); }
}
@keyframes di-pop-in {
    0%   { opacity: 0; transform: scale(0.6) translateY(4px); }
    60%  { opacity: 1; transform: scale(1.05) translateY(-1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.di-slide-in  { animation: di-slide-in-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.di-slide-out { animation: di-slide-out-left  0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.di-collapse  { animation: di-fade-collapse   0.4s  cubic-bezier(0.22, 1, 0.36, 1) forwards; overflow: hidden; }
.di-expand    { animation: di-fade-expand     0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; overflow: hidden; }
.di-pop-in    { animation: di-pop-in          0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Dynamic Island Date Chips */
.di-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--outline-variant-color);
    background: var(--surface-container-color);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    opacity: 0;
}
.di-date-chip:hover {
    border-color: var(--primary-container-color);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 12px var(--shadow-color);
}
.di-date-chip.selected {
    background: var(--primary-container-color);
    border-color: var(--primary-container-color);
    color: var(--bg-color);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 16px var(--shadow-color);
}
.di-date-chip.selected .di-chip-day,
.di-date-chip.selected .di-chip-date {
    color: var(--bg-color);
}
.di-chip-day {
    font-family: 'DM Sans', sans-serif;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant-color);
    line-height: 1;
    margin-bottom: 2px;
}
.di-chip-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--on-surface-color);
    line-height: 1;
}

/* Time slot chips */
.di-slot-chip {
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--outline-variant-color);
    background: var(--surface-container-color);
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant-color);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.di-slot-chip:hover {
    border-color: var(--primary-container-color);
    color: var(--primary-container-color);
    transform: scale(1.05);
}
.di-slot-chip.selected {
    background: var(--primary-container-color);
    border-color: var(--primary-container-color);
    color: var(--bg-color);
    transform: scale(1.06);
}

/* Dynamic Island email input — Premium Glassmorphic */
.di-email-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 0 14px;
    height: 38px;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    box-shadow: inset 0 1px 2px rgba(var(--spider-color-base), 0.03), 0 2px 8px -2px var(--shadow-color);
    overflow: hidden;
}
.di-email-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: var(--outline-variant-color);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.di-email-wrap:focus-within {
    border-color: var(--primary-container-color);
    box-shadow: inset 0 1px 3px rgba(var(--spider-color-base), 0.04), 0 0 0 3px rgba(var(--spider-color-base), 0.06), 0 4px 16px -4px var(--shadow-color);
    transform: scale(1.01);
}
.di-email-wrap:focus-within::before {
    opacity: 1;
}
.di-email-wrap .di-email-icon {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--on-surface-variant-color);
    opacity: 0.45;
    transition: all 0.3s ease;
    margin-right: 10px;
}
.di-email-wrap:focus-within .di-email-icon {
    color: var(--primary-container-color);
    opacity: 1;
}
.di-email-input {
    background: transparent;
    border: none;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--on-surface-color);
    outline: none;
    width: 100%;
    flex-grow: 1;
}
.di-email-input::placeholder {
    color: var(--on-surface-variant-color);
    opacity: 0.4;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Universal Responsive Schedule Chat Overlay (Mobile, Tablet, Desktop) */
.di-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s ease;
    pointer-events: none;
}
.di-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.di-mob-modal-card {
    background: var(--surface-color);
    border: 1.5px solid var(--outline-variant-color);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    transform: scale(0.95) translateY(16px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.di-mobile-overlay.active .di-mob-modal-card {
    transform: scale(1) translateY(0);
}
@media (max-width: 640px) {
    .di-mobile-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .di-mob-modal-card {
        max-width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
        max-height: 92vh;
        transform: translateY(100%);
    }
    .di-mobile-overlay.active .di-mob-modal-card {
        transform: translateY(0);
    }
}
.di-mobile-overlay .di-mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--outline-variant-color);
}
.di-mobile-overlay .di-mob-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}
.di-mobile-overlay .di-mob-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--outline-variant-color);
}
.di-mob-dates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.di-mob-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1.5px solid var(--outline-variant-color);
    background: var(--surface-container-color);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.di-mob-date-chip:hover {
    border-color: var(--primary-container-color);
    transform: scale(1.04);
}
.di-mob-date-chip.selected {
    background: var(--primary-container-color);
    border-color: var(--primary-container-color);
    color: var(--bg-color);
    transform: scale(1.04);
    box-shadow: 0 4px 12px var(--shadow-color);
}
.di-mob-date-chip.selected .di-chip-day,
.di-mob-date-chip.selected .di-chip-date {
    color: var(--bg-color);
}
.di-mob-slots-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.di-mob-slot-chip {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1.5px solid var(--outline-variant-color);
    background: var(--surface-container-color);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-surface-variant-color);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.di-mob-slot-chip:hover {
    border-color: var(--primary-container-color);
    color: var(--primary-container-color);
}
.di-mob-slot-chip.selected {
    background: var(--primary-container-color);
    border-color: var(--primary-container-color);
    color: var(--bg-color);
}
.di-mob-email-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 0 16px;
    height: 48px;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    box-shadow: inset 0 1px 2px rgba(var(--spider-color-base), 0.03), 0 2px 8px -2px var(--shadow-color);
}
.di-mob-email-wrap:focus-within {
    border-color: var(--primary-container-color);
    box-shadow: inset 0 1px 3px rgba(var(--spider-color-base), 0.04), 0 0 0 3px rgba(var(--spider-color-base), 0.06);
}
.di-mob-email-input {
    background: transparent;
    border: none;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--on-surface-color);
    outline: none;
    width: 100%;
}
.di-mob-email-input::placeholder {
    color: var(--on-surface-variant-color);
    opacity: 0.4;
}

/* Apple-Style Activity Indicator (iOS / macOS Spinner) */
.apple-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.2s ease;
}
.apple-loader-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.apple-loader-card {
    width: 82px;
    height: 82px;
    border-radius: 22px;
    background: rgba(18, 20, 29, 0.88);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(.dark) .apple-loader-card,
.light .apple-loader-card,
.theme-light .apple-loader-card,
[data-theme="light"] .apple-loader-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18) !important;
}
.apple-loader-overlay.active .apple-loader-card {
    transform: scale(1);
}
.apple-spinner {
    position: relative;
    width: 36px;
    height: 36px;
}
.apple-blade {
    position: absolute;
    left: 45%;
    top: 0;
    width: 10%;
    height: 28%;
    background: #ffffff;
    border-radius: 50px;
    opacity: 0;
    transform-origin: 50% 178%;
    animation: apple-blade-fade 1s linear infinite;
}
html:not(.dark) .apple-blade,
.light .apple-blade,
.theme-light .apple-blade,
[data-theme="light"] .apple-blade {
    background: #0f172a !important;
}
.apple-blade:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.0s; }
.apple-blade:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.916s; }
.apple-blade:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.833s; }
.apple-blade:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.75s; }
.apple-blade:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.666s; }
.apple-blade:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.583s; }
.apple-blade:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.5s; }
.apple-blade:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.416s; }
.apple-blade:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.333s; }
.apple-blade:nth-child(10) { transform: rotate(270deg); animation-delay: -0.25s; }
.apple-blade:nth-child(11) { transform: rotate(300deg); animation-delay: -0.166s; }
.apple-blade:nth-child(12) { transform: rotate(330deg); animation-delay: -0.083s; }

@keyframes apple-blade-fade {
    0% { opacity: 1; }
    100% { opacity: 0.12; }
}

html { scroll-padding-top: 5rem; }
body { letter-spacing: 0; }
body * { letter-spacing: 0 !important; }
main { min-width: 0; }
h1, h2, h3, p, a { overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--primary-container-color); outline-offset: 4px; }
.material-symbols-outlined { flex-shrink: 0; width: 1em; height: 1em; overflow: hidden; line-height: 1; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 1000000; padding: 0.75rem 1rem; background: var(--surface-color); color: var(--on-surface-color); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
#page-content-wrapper { container-type: inline-size; }
#page-content-wrapper > .animate-fade-in { animation: none; }
#page-content-wrapper h1 { line-height: 1.18; }
.profile-section { padding-block: 1.5rem 3rem; }
.profile-sidebar { max-width: 320px; }
.profile-biography .markdown-content { max-width: 68ch; font-size: 1rem; line-height: 1.8; }
.profile-biography h1 { font-size: 2.75rem; }
#side-nav { padding-top: 1.5rem; }
#side-nav > div:first-child { margin-bottom: 1.5rem; }
.nav-item { min-height: 36px; font-size: 0.8125rem; }
footer { border-top: 1px solid var(--border-color); backdrop-filter: none !important; }
.markdown-content pre { max-width: 100%; }
.markdown-content table { display: block; overflow-x: auto; }
.di-mob-modal-card, .di-mob-date-chip, .di-mob-email-wrap, .di-email-wrap { border-radius: 8px; }
.di-mob-email-input { font-size: 16px; }
@container (min-width: 640px) {
    .profile-layout { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.7fr) !important; }
}
@media (max-width: 639px) {
    .profile-biography { grid-row: 1; }
    .profile-biography h1 { font-size: 2.125rem; }
    .profile-section { padding-top: 1rem; }
    #page-content-wrapper h1 { font-size: 2.125rem; }
}
@media (max-width: 1023px) {
    #side-nav.-translate-x-full { visibility: hidden; }
    #side-nav button { min-height: 44px; }
    .nav-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}