Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/MaxwellCohen/charting.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');@import 'tailwindcss';@plugin '@tailwindcss/typography';
@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
:root { --sea-ink: #173a40; --sea-ink-soft: #416166; --lagoon: #4fb8b2; --lagoon-deep: #328f97; --palm: #2f6a4a; --sand: #e7f0e8; --foam: #f3faf5; --surface: rgba(255, 255, 255, 0.74); --surface-strong: rgba(255, 255, 255, 0.9); --line: rgba(23, 58, 64, 0.14); --inset-glint: rgba(255, 255, 255, 0.82); --kicker: rgba(47, 106, 74, 0.9); --bg-base: #e7f3ec; --header-bg: rgba(251, 255, 248, 0.84); --chip-bg: rgba(255, 255, 255, 0.8); --chip-line: rgba(47, 106, 74, 0.18); --link-bg-hover: rgba(255, 255, 255, 0.9); --hero-a: rgba(79, 184, 178, 0.36); --hero-b: rgba(47, 106, 74, 0.2);
--background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.871 0.006 286.286); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.871 0.006 286.286);}
.dark { --sea-ink: #d7ece8; --sea-ink-soft: #afcdc8; --lagoon: #60d7cf; --lagoon-deep: #8de5db; --palm: #6ec89a; --sand: #0f1a1e; --foam: #101d22; --surface: rgba(16, 30, 34, 0.8); --surface-strong: rgba(15, 27, 31, 0.92); --line: rgba(141, 229, 219, 0.18); --inset-glint: rgba(194, 247, 238, 0.14); --kicker: #b8efe5; --bg-base: #0a1418; --header-bg: rgba(10, 20, 24, 0.8); --chip-bg: rgba(13, 28, 32, 0.9); --chip-line: rgba(141, 229, 219, 0.24); --link-bg-hover: rgba(24, 44, 49, 0.8); --hero-a: rgba(96, 215, 207, 0.18); --hero-b: rgba(110, 200, 154, 0.12);
--background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.141 0.005 285.823); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.141 0.005 285.823); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.21 0.006 285.885); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.274 0.006 286.033); --input: oklch(0.274 0.006 286.033); --ring: oklch(0.442 0.017 285.786); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.274 0.006 286.033); --sidebar-ring: oklch(0.442 0.017 285.786);}
@theme inline { --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring);}
html,body,#app { min-height: 100%;}
body { margin: 0; color: var(--sea-ink); font-family: var(--font-sans); background-color: var(--bg-base); background: radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%), radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%), radial-gradient( 720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68% ), linear-gradient( 180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100% ); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.28; background: radial-gradient( circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34% ), radial-gradient( circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42% ), radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);}
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.14; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);}
a { color: var(--lagoon-deep); text-decoration-color: rgba(50, 143, 151, 0.4); text-decoration-thickness: 1px; text-underline-offset: 2px;}
a:hover { color: #246f76;}
code { font-size: 0.9em; border: 1px solid var(--line); background: color-mix(in oklab, var(--surface-strong) 82%, white 18%); border-radius: 7px; padding: 2px 7px;}
pre code { border: 0; background: transparent; padding: 0; border-radius: 0; font-size: inherit; color: inherit;}
.prose pre { border: 1px solid var(--line); border-radius: 12px; background: #1d2e45; color: #e8efff;}
.page-wrap { width: min(1080px, calc(100% - 2rem)); margin-inline: auto;}
.display-title { font-family: 'Fraunces', Georgia, serif;}
.island-shell { border: 1px solid var(--line); background: linear-gradient(165deg, var(--surface-strong), var(--surface)); box-shadow: 0 1px 0 var(--inset-glint) inset, 0 22px 44px rgba(30, 90, 72, 0.1), 0 6px 18px rgba(23, 58, 64, 0.08); backdrop-filter: blur(4px);}
.feature-card { background: linear-gradient( 165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface) ); box-shadow: 0 1px 0 var(--inset-glint) inset, 0 18px 34px rgba(30, 90, 72, 0.1), 0 4px 14px rgba(23, 58, 64, 0.06);}
.feature-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));}
button,.island-shell,a { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;}
.island-kicker { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; font-size: 0.69rem; color: var(--kicker);}
.nav-link { position: relative; text-decoration: none; color: var(--sea-ink-soft);}
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--lagoon), #7ed3bf); transition: transform 170ms ease;}
.nav-link:hover,.nav-link.is-active { color: var(--sea-ink);}
.nav-link:hover::after,.nav-link.is-active::after { transform: scaleX(1);}
.rise-in { animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;}
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); }}
.site-footer { border-top: 1px solid var(--line); background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);}
@layer base { * { @apply border-border outline-ring/50; } body { background-color: var(--background); color: var(--foreground); }}