*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
background: var(--bg-deep);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(ellipse at 0% 0%, rgba(245, 158, 11, 0.04) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
*:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::selection {
background: rgba(245, 158, 11, 0.3);
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-surface);
}
::-webkit-scrollbar-thumb {
background: var(--border-light);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--accent-bright);
}
code,
pre {
font-family: var(--font-mono);
}
code {
background: var(--bg-elevated);
padding: 0.125rem 0.375rem;
border-radius: var(--border-radius-sm);
font-size: 0.875em;
}
pre {
background: var(--bg-deep);
color: var(--code-text);
padding: 0.5rem 0.75rem;
border-radius: var(--border-radius-md);
border: 1px solid var(--border);
overflow-x: auto;
font-size: 0.6875rem;
line-height: 1.6;
}
pre code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
}
button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
background: transparent;
color: inherit;
transition: all var(--transition-fast);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--border-radius-md);
padding: 0.5rem 0.75rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}