:root {
color-scheme: dark;
--bg: #0b0d10;
--panel: #14171c;
--panel-border: #262b33;
--fg: #e6e8eb;
--muted: #8b93a1;
--accent: #58c4dc;
--accent-strong: #8be9fd;
--danger: #ff6b6b;
font-family:
ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas,
monospace;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
width: 100%;
overflow-x: hidden;
}
#app {
min-height: 100vh;
display: flex;
justify-content: center;
}
.page {
width: 100%;
max-width: 960px;
padding: 1.25rem 1rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.hero {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hero h1 {
margin: 0;
font-size: clamp(1.4rem, 4vw, 2rem);
letter-spacing: -0.02em;
}
.hero h1 .accent {
color: var(--accent-strong);
}
.hero p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.5;
max-width: 68ch;
}
.hero .links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.9rem;
}
.hero a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.hero a:hover {
border-bottom-color: var(--accent);
}
.badge {
display: inline-block;
font-size: 0.72rem;
color: var(--muted);
border: 1px solid var(--panel-border);
border-radius: 999px;
padding: 0.15rem 0.6rem;
width: fit-content;
}
footer.note {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.5;
}
footer.note code {
color: var(--fg);
}