Repository Public MIT
1@import "tailwindcss";23/* Design tokens. Every colour is a CSS variable so the light and dark themes are one switch.4 The theme is chosen by data-theme on <html> (set before first paint, see layout.tsx). */5@theme {6 --color-ink: #080b10;7 --color-graphite: #111722;8 --color-raised: #161d2b;9 --color-line: #1f2838;10 --color-line-strong: #2c384d;11 --color-text: #eaf0f8;12 --color-muted: #91a1b7;13 --color-faint: #8796ac;14 --color-accent: #6c9dff;15 --color-accent-strong: #8fb4ff;16 --color-on-accent: #080b10;17 --color-accent-soft: #14213d;18 --color-ok: #5fcf8f;19 --color-warn: #e5b567;20 --color-danger: #f0768b;21 --color-code: #0b0f16;22 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;23 --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;24 --radius-card: 12px;25 --shadow-card: 0 0 0 1px var(--color-line);26 --shadow-pop: 0 24px 60px -12px rgb(0 0 0 / 0.65);27}2829:root {30 color-scheme: dark;31 --hl-comment: #8796ac;32 --hl-keyword: #8fb4ff;33 --hl-string: #9fd6ae;34 --hl-number: #e5b567;35 --hl-title: #c9b8ff;36 --hl-deletion: #f0768b;37}38/* Light theme: warm-neutral paper, ink text, one confident blue. All pairs meet WCAG AA. */39:root[data-theme="light"] {40 color-scheme: light;41 --color-ink: #f6f7f9;42 --color-graphite: #ffffff;43 --color-raised: #f0f2f6;44 --color-line: #e4e8ee;45 --color-line-strong: #cdd4de;46 --color-text: #0f1722;47 --color-muted: #475467;48 --color-faint: #5d6b7e;49 --color-accent: #2557d6;50 --color-accent-strong: #1c46b3;51 --color-on-accent: #ffffff;52 --color-accent-soft: #e9effd;53 --color-ok: #137a48;54 --color-warn: #8a5a00;55 --color-danger: #be2c46;56 --color-code: #f3f5f9;57 --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 0 0 1px var(--color-line);58 --shadow-pop: 0 24px 60px -12px rgb(16 24 40 / 0.25);59 --hl-comment: #5d6b7e;60 --hl-keyword: #1c46b3;61 --hl-string: #0e6b3f;62 --hl-number: #8a5a00;63 --hl-title: #6b3fb8;64 --hl-deletion: #be2c46;65}6667html {68 background: var(--color-ink);69 color: var(--color-text);70 -webkit-text-size-adjust: 100%;71 scroll-padding-top: 6.5rem;72}73body {74 font-family: var(--font-sans);75 font-feature-settings: "ss01", "cv11";76 line-height: 1.55;77 -webkit-font-smoothing: antialiased;78 min-height: 100dvh;79}80::selection {81 background: color-mix(in srgb, var(--color-accent) 30%, transparent);82}83:focus-visible {84 outline: 2px solid var(--color-accent);85 outline-offset: 2px;86 border-radius: 4px;87}88a {89 text-underline-offset: 3px;90}9192@layer components {93 .container-page {94 @apply mx-auto w-full max-w-6xl px-5 sm:px-8;95 }96 .card {97 @apply rounded-[12px] bg-graphite;98 box-shadow: var(--shadow-card);99 }100 .card-hover {101 @apply transition-[background-color,box-shadow,transform] duration-150 hover:bg-raised;102 }103 .card-hover:hover {104 box-shadow: 0 0 0 1px var(--color-line-strong), 0 8px 24px -12px rgb(0 0 0 / 0.25);105 }106 .eyebrow {107 @apply font-mono text-[11px] uppercase tracking-[0.14em] text-faint;108 }109 .btn {110 @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-line-strong bg-graphite px-4 text-sm font-medium text-text transition-colors duration-150 hover:border-accent/60 hover:bg-raised disabled:cursor-not-allowed disabled:opacity-50;111 }112 .btn-primary {113 @apply border-accent bg-accent text-on-accent hover:border-accent-strong hover:bg-accent-strong;114 }115 .btn-danger {116 @apply border-danger/50 text-danger hover:border-danger hover:bg-danger/10;117 }118 .input {119 @apply min-h-10 w-full rounded-lg border border-line-strong bg-graphite px-3 text-sm text-text placeholder:text-faint focus:border-accent focus:outline-none;120 }121 .label {122 @apply mb-1.5 block text-sm font-medium text-text;123 }124 .chip {125 @apply inline-flex items-center gap-1 rounded-md border border-line bg-graphite px-2 py-0.5 font-mono text-[11px] text-muted;126 }127 .chip-accent {128 @apply border-accent/30 bg-accent-soft text-accent-strong;129 }130 .link {131 @apply text-accent underline decoration-accent/30 hover:decoration-accent;132 }133 /* Code surfaces: one look everywhere (install commands, snippets, README code). */134 .code-frame {135 @apply overflow-hidden rounded-xl border border-line bg-code;136 }137 .code-head {138 @apply flex items-center justify-between gap-3 border-b border-line px-3.5 py-1.5;139 }140 .code-body {141 @apply overflow-x-auto p-4 font-mono text-[13px] leading-relaxed text-text;142 }143 .callout {144 @apply flex gap-3 rounded-xl border p-4 text-sm;145 }146 .data-table {147 @apply w-full text-left text-sm;148 }149 .data-table thead {150 @apply border-b border-line text-xs text-faint;151 }152 .data-table th {153 @apply px-3.5 py-2.5 font-medium;154 }155 .data-table td {156 @apply px-3.5 py-2.5 align-top;157 }158 .data-table tbody tr {159 @apply border-b border-line last:border-0;160 }161 .data-table tbody tr:hover {162 background: color-mix(in srgb, var(--color-raised) 60%, transparent);163 }164}165166/* Rendered Markdown (docs and untrusted READMEs; raw HTML is never rendered). */167.prose-registry {168 @apply max-w-none text-[15px] leading-7 text-text/90;169}170.prose-registry h1 { @apply mt-0 mb-5 text-3xl font-semibold tracking-tight text-text; }171.prose-registry h2 { @apply mt-10 mb-3 border-b border-line pb-2 text-xl font-semibold tracking-tight text-text; }172.prose-registry h3 { @apply mt-8 mb-2 text-[17px] font-semibold text-text; }173.prose-registry h4 { @apply mt-6 mb-2 text-[15px] font-semibold text-text; }174.prose-registry h5 { @apply mt-5 mb-1.5 text-sm font-semibold text-muted; }175.prose-registry > :first-child { @apply mt-0; }176.prose-registry p { @apply my-4; }177.prose-registry ul { @apply my-4 list-disc space-y-1.5 pl-6 marker:text-faint; }178.prose-registry ol { @apply my-4 list-decimal space-y-1.5 pl-6 marker:text-faint; }179.prose-registry li > ul, .prose-registry li > ol { @apply my-1.5; }180.prose-registry a { @apply text-accent underline decoration-accent/30 hover:decoration-accent; }181.prose-registry strong { @apply font-semibold text-text; }182.prose-registry blockquote { @apply my-5 rounded-r-lg border-l-2 border-accent/50 bg-accent-soft/50 py-2 pl-4 pr-3 text-muted; }183.prose-registry blockquote p { @apply my-1.5; }184.prose-registry hr { @apply my-8 border-line; }185.prose-registry :not(pre) > code { @apply rounded-md border border-line bg-code px-1.5 py-0.5 font-mono text-[0.86em] text-text; }186/* Long inline code (URLs, paths) wraps instead of widening the page on small screens. */187.prose-registry :not(pre) > code { overflow-wrap: anywhere; }188.prose-registry .code-frame { @apply my-5; }189.prose-registry pre { @apply m-0 overflow-x-auto p-4 font-mono text-[13px] leading-relaxed; }190.prose-registry pre code { @apply border-0 bg-transparent p-0; }191.prose-registry .table-wrap { @apply my-5 overflow-x-auto rounded-xl border border-line; }192.prose-registry table { @apply w-full border-collapse text-sm; }193.prose-registry thead { @apply bg-raised/60; }194.prose-registry th { @apply border-b border-line px-3.5 py-2.5 text-left text-[13px] font-semibold text-text; }195.prose-registry td { @apply border-b border-line px-3.5 py-2.5 align-top; }196.prose-registry tbody tr:last-child td { @apply border-b-0; }197.prose-registry img { @apply hidden; }198199.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }200.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: var(--hl-keyword); }201.hljs-string, .hljs-attr, .hljs-addition { color: var(--hl-string); }202.hljs-number, .hljs-meta, .hljs-built_in, .hljs-type { color: var(--hl-number); }203.hljs-title, .hljs-name, .hljs-attribute, .hljs-symbol { color: var(--hl-title); }204.hljs-deletion { color: var(--hl-deletion); }205206.skeleton {207 @apply animate-pulse rounded-md bg-raised;208}209/* Shell prompt marker for single-line commands: decorative, not selectable, not copied. */210.prompt::before {211 content: "$ ";212 color: var(--color-faint);213 user-select: none;214}215/* Grid and flex children may shrink below their content width, so long code lines scroll inside216 their own block instead of widening the page on small screens. */217main :where(.grid, .flex) > * {218 min-width: 0;219}220@media (prefers-reduced-motion: reduce) {221 *, *::before, *::after {222 animation-duration: 0.01ms !important;223 animation-iteration-count: 1 !important;224 transition-duration: 0.01ms !important;225 scroll-behavior: auto !important;226 }227}228229/* Usage-example screenshots: a neutral frame that suits dark terminal captures in both themes. */230.example-shot {231 padding: 0.75rem;232 background-color: var(--color-raised);233 background-image: radial-gradient(color-mix(in srgb, var(--color-faint) 22%, transparent) 1px, transparent 1px);234 background-size: 14px 14px;235}236.example-shot img {237 box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 12px 32px -12px rgb(0 0 0 / 0.35);238}239.example-dialog {240 width: min(96vw, 110rem);241 max-width: none;242 max-height: calc(100dvh - 2rem);243 margin: auto;244 padding: 0;245 overflow: hidden;246 border: 1px solid var(--color-line-strong);247 border-radius: 0.875rem;248 background: var(--color-graphite);249 color: var(--color-text);250 box-shadow: var(--shadow-pop);251}252.example-dialog::backdrop {253 background: rgb(0 0 0 / 0.6);254 backdrop-filter: blur(2px);255}256