/* DataQuest — Base */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Fira+Code:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-body);
  background: var(--bg-base);
  color: var(--t-1);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::selection { background: rgba(59,130,246,.25); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b-default); border-radius: 3px; }

:focus-visible { outline: 2px solid var(--cc, var(--ex)); outline-offset: 3px; border-radius: 4px; }

/* Animations */
@keyframes fadeUp   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes slideIn  { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }

/* Theme transition — smooth swap */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: .18s;
  transition-timing-function: ease;
}
/* But NOT layout/transform transitions (would slow everything) */
.prog-fill, .sb-prog-fill, .sb-xp-bar-fill {
  transition: width .44s cubic-bezier(.16,1,.3,1) !important;
}