| @import "./tokens.css"; |
| @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap"); |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } |
| body { |
| font-family: var(--font-body); |
| font-size: var(--text-base); |
| background: var(--color-bg); |
| color: var(--color-text); |
| min-height: 100vh; |
| overflow: hidden; |
| user-select: none; |
| } |
| #root { width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } |
| ::-webkit-scrollbar { width: 5px; height: 5px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } |
| ::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); } |
| button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } |
| input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; } |
| img { display: block; max-width: 100%; } |
| ::selection { background: color-mix(in oklch, var(--color-primary) 28%, transparent); } |
| :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} } |
| @keyframes spin { to{transform:rotate(360deg)} } |
| @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } |
| @keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} } |
| @keyframes progressBar { from{background-position:200% 0} to{background-position:-200% 0} } |
|
|
