@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700&display=swap'); /* ─── Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: 'Noto Sans Georgian', ui-sans-serif, system-ui, sans-serif; font-optical-sizing: auto; font-style: normal; scroll-behavior: smooth; } body { margin: 0; background-color: #f8fafc; color: #0f172a; transition: background-color 0.3s, color 0.3s; -webkit-font-smoothing: antialiased; } html.dark body { background-color: #020617; color: #e2e8f0; } /* ─── No Scrollbar ──────────────────────────────────────── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ─── Custom Scrollbar (nav drawer) ─────────────────────── */ .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 9999px; } html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #334155; } /* ─── Animations ─────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn95 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slideInFromTop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-fade-in { animation: fadeIn 0.2s ease both; } .animate-zoom-in { animation: zoomIn95 0.2s ease both; } .animate-slide-top { animation: slideInFromTop 0.2s ease both; } .animate-pulse { animation: pulse 1.5s ease-in-out infinite; } /* ─── KaTeX overrides ───────────────────────────────────── */ /* Allow inline math to wrap on small screens */ .katex-wrap .katex { white-space: normal !important; } /* ─── Option button base (non-Tailwind extras) ──────────── */ .option-btn { cursor: pointer; text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between; } .option-btn:disabled { cursor: default; } /* ─── Transition helpers ─────────────────────────────────── */ .transition-transform-300 { transition: transform 0.3s ease-in-out; } /* ─── Dark mode Tailwind hint ───────────────────────────── */ /* Tailwind CDN's dark mode variant requires the 'dark' class on . We set darkMode config via the inline tailwind config block in index.html. */