:root { 
    --accent: #0d9488; 
    --accent-hover: #0f766e; 
    --dim-overlay: rgba(255, 255, 255, 0.65); 
}
.dark { 
    --accent: #00ffcc; 
    --accent-hover: #00e6b8; 
    --dim-overlay: rgba(0, 0, 0, 0.75); 
}

.spotlight { 
    position: absolute; 
    border: 4px solid var(--accent); 
    border-radius: 8px; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 0 9999px var(--dim-overlay), 0 0 20px var(--accent), inset 0 0 10px var(--accent); 
    z-index: 10; 
    transition: all 0.3s ease; 
}
.spotlight.inactive { 
    opacity: 0; 
    box-shadow: none; 
    border-color: transparent; 
    pointer-events: none; 
}

@keyframes popIn { 
    from { opacity: 0; transform: scale(0.9) translateY(10px); } 
    to { opacity: 1; transform: scale(1) translateY(0); } 
}
.animate-popIn { animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; }

.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.border-accent { border-color: var(--accent); }

.markdown-body p { margin-bottom: 0.85em; line-height: 1.5; }
.markdown-body h3, .markdown-body h4 { font-weight: 700; color: var(--accent); margin-top: 1.2em; margin-bottom: 0.5em; font-size: 1.05rem; }
.markdown-body ul { list-style-type: disc; padding-left: 1.25em; margin-bottom: 0.85em; }
html.dark .markdown-body strong { color: #ffffff; }

.text-large-mode .markdown-body p, .text-large-mode .markdown-body li { font-size: 1.15rem; line-height: 1.7; }
.text-large-mode .markdown-body h3 { font-size: 1.3rem; }

.terminal-log-entry { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

details > summary::-webkit-details-marker { display: none; }

#globalDragOverlay { pointer-events: none; transition: opacity 0.2s; }
body.dragging-file #globalDragOverlay { opacity: 1; pointer-events: all; }

body { overflow: hidden; } /* Prevents whole page scroll issues */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-top: 1rem;
    border-radius: 0.5rem;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}