| @import "tailwindcss"; | |
| @theme { | |
| --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; | |
| --font-mono: "IBM Plex Mono", ui-monospace, monospace; | |
| --color-ink: #070b14; | |
| --color-panel: #0e1624; | |
| --color-line: #243044; | |
| --color-cyan: #5eead4; | |
| --color-violet: #c4b5fd; | |
| --color-amber: #fbbf24; | |
| } | |
| html, | |
| body, | |
| #root { | |
| min-height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: #081018; | |
| color: #e8eef7; | |
| font-family: var(--font-sans); | |
| } | |
| :focus-visible { | |
| outline: 2px solid #5eead4; | |
| outline-offset: 2px; | |
| } | |
| .skip-link { | |
| position: absolute; | |
| left: 1rem; | |
| top: -4rem; | |
| z-index: 70; | |
| border-radius: 0.4rem; | |
| background: #111827; | |
| padding: 0.6rem 0.9rem; | |
| color: #ecfeff; | |
| } | |
| .skip-link:focus { | |
| top: 1rem; | |
| } | |
| .kbd { | |
| display: inline-block; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 0.3rem; | |
| background: rgba(0, 0, 0, 0.35); | |
| padding: 0.05rem 0.4rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| color: #cbd5e1; | |
| } | |
| ::selection { | |
| background: #134e4a; | |
| color: #ccfbf1; | |
| } | |
| .pulse-ring { | |
| animation: pulse-ring 1.2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-ring { | |
| 0%, | |
| 100% { | |
| opacity: 0.95; | |
| } | |
| 50% { | |
| opacity: 0.25; | |
| } | |
| } | |