:root {
  --bg: #131318;
  --panel: #1b1b22;
  --panel2: #26262f;
  --fg: #e8e8ef;
  --dim: #8b8b9a;
  --border: #2e2e38;
  --accent: #e63973;
  --checker: repeating-conic-gradient(#1e1e26 0% 25%, #191921 0% 50%) 50% / 22px 22px;
}
html.light {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel2: #ececeff;
  --panel2: #ececf2;
  --fg: #1a1a22;
  --dim: #6b6b78;
  --border: #dcdce4;
  --accent: #e63973;
  --checker: repeating-conic-gradient(#ececf2 0% 25%, #f5f5f7 0% 50%) 50% / 22px 22px;
}
* { -webkit-font-smoothing: antialiased; }
body { margin: 0; }
textarea, input { font-family: 'JetBrains Mono', monospace; }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

@keyframes slidein {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-slidein { animation: slidein .25s ease; }

/* stagger app entrance */
#root > div { animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }