/* Reset, typography, animations, scrollbar. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
textarea, input, button, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

@keyframes ottoSpin { to { transform: rotate(360deg); } }
@keyframes ottoFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ottoPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }

.fade { animation: ottoFade .25s ease both; }
.fade-slow { animation: ottoFade .5s ease both; }
.pop { animation: ottoPop .22s ease both; }

/* App shell */
.otto-shell { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.spacer { flex: 1; }
.min0 { min-width: 0; }
.nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }