/*fern-site-stylesheet*/:root { --header-height: 64px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 896px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 20px; --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { --typography-body-font-family: var(--font-body); --typography-heading-font-family: var(--font-heading); --typography-code-font-family: var(--font-code); } .light, :root { --accent-1: #f1f4f2; --accent-2: #e9f0ec; --accent-3: #d8ebe0; --accent-4: #c7e5d4; --accent-5: #b3ddc6; --accent-6: #9bd1b4; --accent-7: #79c29c; --accent-8: #41ac7c; --accent-9: #00a76f; --accent-10: #009965; --accent-11: #007545; --accent-12: #183b2a; --accent-a1: #87ae1e07; --accent-a2: #1d810d0d; --accent-a3: #07992d1e; --accent-a4: #059c3930; --accent-a5: #01993d44; --accent-a6: #03923f5e; --accent-a7: #008f4281; --accent-a8: #029150bc; --accent-a9: #00a76f; --accent-a10: #009965; --accent-a11: #007545; --accent-a12: #002714e6; --accent-contrast: #fff; --accent-surface: #e6efe9cc; --accent-indicator: #00a76f; --accent-track: #00a76f; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(96.4% 0.0047 160.6); --accent-2: oklch(94.9% 0.0099 160.6); --accent-3: oklch(92.4% 0.0249 160.6); --accent-4: oklch(89.6% 0.0395 160.6); --accent-5: oklch(86% 0.0539 160.6); --accent-6: oklch(81.6% 0.07 160.6); --accent-7: oklch(75.5% 0.091 160.6); --accent-8: oklch(67% 0.122 160.6); --accent-9: oklch(64.3% 0.144 160.6); --accent-10: oklch(60.3% 0.1371 160.6); --accent-11: oklch(48.6% 0.144 160.6); --accent-12: oklch(32.2% 0.0514 160.6); --accent-a1: color(display-p3 0.6431 0.6549 0.0353 / 0.025); --accent-a2: color(display-p3 0.1569 0.4863 0.0157 / 0.049); --accent-a3: color(display-p3 0.0078 0.4902 0.0627 / 0.099); --accent-a4: color(display-p3 0.0039 0.5255 0.1176 / 0.16); --accent-a5: color(display-p3 0.0039 0.5294 0.1529 / 0.234); --accent-a6: color(display-p3 0.0039 0.4902 0.1647 / 0.32); --accent-a7: color(display-p3 0.0039 0.4784 0.1725 / 0.435); --accent-a8: color(display-p3 0 0.4745 0.2 / 0.607); --accent-a9: color(display-p3 0 0.502 0.2275 / 0.697); --accent-a10: color(display-p3 0 0.4549 0.2 / 0.726); --accent-a11: color(display-p3 0 0.3216 0.1098 / 0.796); --accent-a12: color(display-p3 0 0.1137 0.0471 / 0.865); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9059 0.9373 0.9137 / 0.8); --accent-indicator: oklch(64.3% 0.144 160.6); --accent-track: oklch(64.3% 0.144 160.6); } } } .light, :root { --grayscale-1: #fcfcfd; --grayscale-2: #f9f9fb; --grayscale-3: #f0f0f3; --grayscale-4: #e8e8ec; --grayscale-5: #e0e1e6; --grayscale-6: #d9d9e0; --grayscale-7: #cdced6; --grayscale-8: #b9bbc6; --grayscale-9: #8b8d98; --grayscale-10: #80838d; --grayscale-11: #60646c; --grayscale-12: #1c2024; --grayscale-a1: #00005503; --grayscale-a2: #00005506; --grayscale-a3: #0000330f; --grayscale-a4: #00002d17; --grayscale-a5: #0009321f; --grayscale-a6: #00002f26; --grayscale-a7: #00062e32; --grayscale-a8: #00083046; --grayscale-a9: #00051d74; --grayscale-a10: #00071b7f; --grayscale-a11: #0007149f; --grayscale-a12: #000509e3; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #8b8d98; --grayscale-track: #8b8d98; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.988 0.988 0.992); --grayscale-2: color(display-p3 0.976 0.976 0.984); --grayscale-3: color(display-p3 0.94 0.941 0.953); --grayscale-4: color(display-p3 0.908 0.909 0.925); --grayscale-5: color(display-p3 0.88 0.881 0.901); --grayscale-6: color(display-p3 0.85 0.852 0.876); --grayscale-7: color(display-p3 0.805 0.808 0.838); --grayscale-8: color(display-p3 0.727 0.733 0.773); --grayscale-9: color(display-p3 0.547 0.553 0.592); --grayscale-10: color(display-p3 0.503 0.512 0.549); --grayscale-11: color(display-p3 0.379 0.392 0.421); --grayscale-12: color(display-p3 0.113 0.125 0.14); --grayscale-a1: #00005503; --grayscale-a2: #00005506; --grayscale-a3: #0000330f; --grayscale-a4: #00002d17; --grayscale-a5: #0009321f; --grayscale-a6: #00002f26; --grayscale-a7: #00062e32; --grayscale-a8: #00083046; --grayscale-a9: #00051d74; --grayscale-a10: #00071b7f; --grayscale-a11: #0007149f; --grayscale-a12: #000509e3; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.547 0.553 0.592); --grayscale-track: color(display-p3 0.547 0.553 0.592); } } } .dark { --accent-1: #141b17; --accent-2: #17201b; --accent-3: #163123; --accent-4: #103f2a; --accent-5: #134b33; --accent-6: #1a593d; --accent-7: #206a49; --accent-8: #237d57; --accent-9: #00a76f; --accent-10: #009a63; --accent-11: #50d398; --accent-12: #aaf3cc; --accent-a1: #149a0002; --accent-a2: #82f50007; --accent-a3: #28fc351a; --accent-a4: #00fb582a; --accent-a5: #10fe7537; --accent-a6: #2afd8647; --accent-a7: #37fd935a; --accent-a8: #37fd9d6f; --accent-a9: #00fe9e9e; --accent-a10: #00ff978f; --accent-a11: #5efeb4cf; --accent-a12: #b2ffd5f2; --accent-contrast: #fff; --accent-surface: #1a261680; --accent-indicator: #00a76f; --accent-track: #00a76f; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(21.5% 0.0138 160.6); --accent-2: oklch(23.3% 0.0174 160.6); --accent-3: oklch(28.6% 0.0421 160.6); --accent-4: oklch(32.8% 0.0622 160.6); --accent-5: oklch(37% 0.0716 160.6); --accent-6: oklch(41.6% 0.0795 160.6); --accent-7: oklch(46.9% 0.0899 160.6); --accent-8: oklch(52.8% 0.1044 160.6); --accent-9: oklch(64.3% 0.144 160.6); --accent-10: oklch(60.3% 0.144 160.6); --accent-11: oklch(78% 0.144 160.6); --accent-12: oklch(90.5% 0.0898 160.6); --accent-a1: color(display-p3 0.0863 0.8863 0 / 0.005); --accent-a2: color(display-p3 0.6667 0.9765 0 / 0.027); --accent-a3: color(display-p3 0.4078 0.9922 0.2902 / 0.097); --accent-a4: color(display-p3 0.3059 0.9961 0.4235 / 0.158); --accent-a5: color(display-p3 0.3608 0.9961 0.5176 / 0.21); --accent-a6: color(display-p3 0.4314 1 0.5765 / 0.271); --accent-a7: color(display-p3 0.4627 1 0.6353 / 0.341); --accent-a8: color(display-p3 0.4745 1 0.6627 / 0.424); --accent-a9: color(display-p3 0.4275 1 0.6627 / 0.603); --accent-a10: color(display-p3 0.4196 0.9961 0.6314 / 0.551); --accent-a11: color(display-p3 0.5647 1 0.7373 / 0.795); --accent-a12: color(display-p3 0.7725 1 0.8549 / 0.939); --accent-contrast: #fff; --accent-surface: color(display-p3 0.102 0.149 0.0863 / 0.5); --accent-indicator: oklch(64.3% 0.144 160.6); --accent-track: oklch(64.3% 0.144 160.6); } } } .dark { --grayscale-1: #111113; --grayscale-2: #18191b; --grayscale-3: #212225; --grayscale-4: #272a2d; --grayscale-5: #2e3135; --grayscale-6: #363a3f; --grayscale-7: #43484e; --grayscale-8: #5a6169; --grayscale-9: #696e77; --grayscale-10: #777b84; --grayscale-11: #b0b4ba; --grayscale-12: #edeef0; --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #696e77; --grayscale-track: #696e77; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.067 0.074); --grayscale-2: color(display-p3 0.095 0.098 0.105); --grayscale-3: color(display-p3 0.13 0.135 0.145); --grayscale-4: color(display-p3 0.156 0.163 0.176); --grayscale-5: color(display-p3 0.183 0.191 0.206); --grayscale-6: color(display-p3 0.215 0.226 0.244); --grayscale-7: color(display-p3 0.265 0.28 0.302); --grayscale-8: color(display-p3 0.357 0.381 0.409); --grayscale-9: color(display-p3 0.415 0.431 0.463); --grayscale-10: color(display-p3 0.469 0.483 0.514); --grayscale-11: color(display-p3 0.692 0.704 0.728); --grayscale-12: color(display-p3 0.93 0.933 0.94); --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.415 0.431 0.463); --grayscale-track: color(display-p3 0.415 0.431 0.463); } } } .light, :root { color-scheme: light; --accent: rgba(0, 167, 111, 1); --background: rgba(244, 246, 248, 1); --border: rgba(223, 227, 232, 1); --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #f4f6f8; } .dark { color-scheme: dark; --accent: rgba(0, 167, 111, 1); --background: rgba(20, 26, 33, 1); --border: rgba(28, 37, 46, 1); --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #141a21; } @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap'); /* Custom Typography */ body, .fern-body, .fern-layout-body, .fern-content, p, span, li, td, th, a, button, input, textarea { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .landing-hero-title, .fern-layout-title, .fern-page-title, .fern-content h1, .fern-content h2, .fern-content h3, .fern-content h4, .fern-content h5, .fern-content h6, .title, .heading, [class*="Title"], [class*="heading"] { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } /* Custom styles for Fern Docs Starter */ /* Subtle linear gradient background */ .fern-background-image { background-image: linear-gradient(180deg, rgba(0, 135, 0, 0.03) 0%, transparent 50%); } :root.dark .fern-background-image { background-image: linear-gradient(180deg, rgba(112, 225, 85, 0.03) 0%, transparent 50%); } /* Premium Sandbox Tool Styling */ .sandbox-card { position: relative; background-color: var(--background-surface, #ffffff); border: 1px solid var(--border-color, #dfe3e8); border-radius: 12px; padding: 24px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } :root.dark .sandbox-card { background-color: #1a222a; border-color: #2b3846; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .sandbox-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .sandbox-title { font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 0 !important; color: #637381 !important; display: flex; align-items: center; gap: 6px; } :root.dark .sandbox-title { color: #919eab !important; } .sandbox-toggle-row { display: flex; width: 100%; max-width: 280px; background: rgba(0, 0, 0, 0.03) !important; border-radius: 9999px; padding: 3px; margin: 0 !important; border: none !important; transition: all 0.2s; } :root.dark .sandbox-toggle-row { background: rgba(255, 255, 255, 0.025) !important; } @media (min-width: 640px) { .sandbox-header { flex-direction: row-reverse; justify-content: space-between; align-items: center; } } .sandbox-toggle-btn { flex: 1; text-align: center; padding: 8px; font-size: 0.875rem; font-weight: 600; background: transparent; color: var(--text-color, #1c252e); border: none; border-radius: 9999px; cursor: pointer; transition: all 0.2s; } :root.dark .sandbox-toggle-btn { color: #e6ebf1; } .sandbox-toggle-btn.active { background: var(--accent-primary, #005f4b) !important; color: #ffffff; box-shadow: 0 2px 8px rgba(0, 95, 75, 0.3) !important; } :root.dark .sandbox-toggle-btn.active { background: var(--accent-primary, #00c281) !important; box-shadow: 0 2px 10px rgba(0, 194, 129, 0.45) !important; } .sandbox-field { margin-bottom: 16px; } .sandbox-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; } .sandbox-input, .sandbox-textarea { width: 100%; background: #eff1f4 !important; color: var(--text-color, #1c252e); border: none !important; border-radius: 12px !important; padding: 12px 16px !important; font-family: var(--font-monospace, monospace); font-size: 0.875rem; outline: none; transition: background-color 0.2s, box-shadow 0.2s !important; } :root.dark .sandbox-input, :root.dark .sandbox-textarea { background: #101419 !important; color: #e6ebf1; } .sandbox-input:focus, .sandbox-textarea:focus { background-color: #e8ebf0 !important; box-shadow: 0 0 0 2px rgba(0, 167, 111, 0.15) !important; } :root.dark .sandbox-input:focus, :root.dark .sandbox-textarea:focus { background-color: #0b0d10 !important; box-shadow: 0 0 0 2px rgba(0, 194, 129, 0.2) !important; } .sandbox-row { display: flex; gap: 12px; margin-top: 20px; } .sandbox-btn { background: var(--accent-primary, #00a76f); color: #ffffff; border: none; border-radius: 9999px !important; padding: 10px 24px !important; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s !important; } .sandbox-btn:hover { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 167, 111, 0.2) !important; } .sandbox-btn:focus-visible { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 167, 111, 0.2) !important; } :root.dark .sandbox-btn:hover { box-shadow: 0 4px 12px rgba(0, 194, 129, 0.25) !important; } :root.dark .sandbox-btn:focus-visible { box-shadow: 0 4px 12px rgba(0, 194, 129, 0.25) !important; } .sandbox-btn-secondary { background: transparent; color: var(--text-color, #1c252e); border: 1px solid var(--border-color, #dfe3e8); border-radius: 9999px !important; padding: 10px 24px !important; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s !important; } :root.dark .sandbox-btn-secondary { color: #e6ebf1; border-color: #2b3846; } .sandbox-btn-secondary:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--text-color, #1c252e) !important; } .sandbox-btn-secondary:focus-visible { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--text-color, #1c252e) !important; } :root.dark .sandbox-btn-secondary:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: #ffffff !important; } :root.dark .sandbox-btn-secondary:focus-visible { background: rgba(255, 255, 255, 0.08) !important; border-color: #ffffff !important; } .sandbox-result { margin-top: 16px; background: #eff1f4 !important; border-radius: 12px !important; padding: 14px 16px !important; font-family: var(--font-monospace, monospace); font-size: 0.875rem; white-space: pre-wrap; word-break: break-all; border: none !important; } :root.dark .sandbox-result { background: #101419 !important; } .sandbox-result.error { color: #ff5630; background: rgba(255, 86, 48, 0.08) !important; } .sandbox-result.success { color: #36b37e; background: rgba(54, 179, 126, 0.08) !important; } .sandbox-flex-container { display: flex; gap: 8px; } .sandbox-flex-container .sandbox-input { flex: 1; } .sandbox-btn-secondary.nowrap { white-space: nowrap; } .sandbox-hidden { display: none !important; } /* Decryption Block Diagram Styling */ .decryption-block-wrapper { display: flex; align-items: stretch; gap: 12px; margin: 24px 0; font-family: var(--font-monospace, monospace); overflow-x: auto; padding-bottom: 8px; } .decryption-block { border-radius: 8px; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--border-color, #dfe3e8); } .decryption-block.block-prefix { background: var(--background-code, #f6f8fa); flex: 1; min-width: 100px; } :root.dark .decryption-block.block-prefix { background: #111820; border-color: #2b3846; } .decryption-block-connector { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--text-color, #1c252e); } :root.dark .decryption-block-connector { color: #e6ebf1; } .decryption-block.block-envelope { background: rgba(0, 167, 111, 0.05); border-color: var(--accent-primary, #00a76f); flex: 4; min-width: 320px; } .block-title { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--accent-primary, #00a76f); margin-bottom: 4px; } .block-val { font-size: 1rem; font-weight: 700; margin-bottom: 8px; word-break: break-all; } .block-desc { font-size: 0.75rem; opacity: 0.7; } .decryption-sub-blocks { display: flex; gap: 8px; width: 100%; margin-top: 12px; } .decryption-sub-block { flex: 1; border-radius: 6px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; font-size: 0.8125rem; border: 1px solid var(--border-color, #dfe3e8); } .decryption-sub-block.block-iv { background: rgba(0, 167, 111, 0.1); border-color: rgba(0, 167, 111, 0.3); } .decryption-sub-block.block-ciphertext { background: var(--background-code, #f6f8fa); } :root.dark .decryption-sub-block.block-ciphertext { background: #111820; border-color: #2b3846; } .decryption-sub-block.block-tag { background: rgba(0, 167, 111, 0.1); border-color: rgba(0, 167, 111, 0.3); } .sub-block-title { font-weight: 700; } .sub-block-desc { font-size: 0.6875rem; opacity: 0.8; margin-top: 2px; } /* Premium Landing Page Styles */ /* Premium Landing Page Styles - Background set on body with fixed attachment */ /* ── The home's ground: the portal's hero, held still ─────────────────────────────────────────── Drawn after `ux-infonite-portal`'s hero (`sections/home/components/hero-aurora.tsx`), so the documentation and the portal open on the same night: an ink base, a sky of stars, three auroras in the house palette (primary, info, secondary, at the portal's weights) and a grain. FIXED, as the old ground was: the page scrolls over it. · NO CORNERS. Every gradient is 36 stops on a curve that arrives flat — the portal's `soft-gradient.ts` — because a gradient with a corner in it draws a line. · ONLY TRANSFORM MOVES. The auroras drift as one layer the compositor owns; nothing animates a background position, a size or a filter. Still under reduced motion. · Light mode keeps the paper and the auroras, fainter, and has no sky: stars are a night thing. · The grain is the portal's: a few per cent, enough to take the banding off the gradients. */ html:has(.landing-page-wrapper) { background-color: #F4F6F8 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") !important; background-size: 120px 120px !important; background-repeat: repeat !important; background-attachment: fixed !important; } :root.dark:has(.landing-page-wrapper) { background-color: #000 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), linear-gradient(180deg, color-mix(in srgb, #000 0.0%, #161C24) 0.00%, color-mix(in srgb, #000 0.8%, #161C24) 2.86%, color-mix(in srgb, #000 3.0%, #161C24) 5.71%, color-mix(in srgb, #000 6.5%, #161C24) 8.57%, color-mix(in srgb, #000 11.2%, #161C24) 11.43%, color-mix(in srgb, #000 16.7%, #161C24) 14.29%, color-mix(in srgb, #000 23.1%, #161C24) 17.14%, color-mix(in srgb, #000 30.1%, #161C24) 20.00%, color-mix(in srgb, #000 37.5%, #161C24) 22.86%, color-mix(in srgb, #000 45.1%, #161C24) 25.71%, color-mix(in srgb, #000 52.9%, #161C24) 28.57%, color-mix(in srgb, #000 60.6%, #161C24) 31.43%, color-mix(in srgb, #000 68.1%, #161C24) 34.29%, color-mix(in srgb, #000 75.2%, #161C24) 37.14%, color-mix(in srgb, #000 81.7%, #161C24) 40.00%, color-mix(in srgb, #000 87.5%, #161C24) 42.86%, color-mix(in srgb, #000 92.4%, #161C24) 45.71%, color-mix(in srgb, #000 96.2%, #161C24) 48.57%, color-mix(in srgb, #000 98.8%, #161C24) 51.43%, color-mix(in srgb, #000 99.9%, #161C24) 54.29%, color-mix(in srgb, #000 99.3%, #161C24) 57.14%, color-mix(in srgb, #000 96.6%, #161C24) 60.00%, color-mix(in srgb, #000 91.9%, #161C24) 62.86%, color-mix(in srgb, #000 85.7%, #161C24) 65.71%, color-mix(in srgb, #000 78.2%, #161C24) 68.57%, color-mix(in srgb, #000 69.7%, #161C24) 71.43%, color-mix(in srgb, #000 60.6%, #161C24) 74.29%, color-mix(in srgb, #000 51.2%, #161C24) 77.14%, color-mix(in srgb, #000 41.7%, #161C24) 80.00%, color-mix(in srgb, #000 32.5%, #161C24) 82.86%, color-mix(in srgb, #000 23.8%, #161C24) 85.71%, color-mix(in srgb, #000 16.1%, #161C24) 88.57%, color-mix(in srgb, #000 9.5%, #161C24) 91.43%, color-mix(in srgb, #000 4.4%, #161C24) 94.29%, color-mix(in srgb, #000 1.2%, #161C24) 97.14%, color-mix(in srgb, #000 0.0%, #161C24) 100.00%) !important; background-size: 120px 120px, 100% 100% !important; background-repeat: repeat, no-repeat !important; } /* The ground is painted on the ROOT, the canvas: a layer at `z-index: -1` paints above it but below a body's own background, so the body is transparent here. */ body:has(.landing-page-wrapper) { background: transparent !important; } /* the auroras — positions are within a layer 12% larger than the window on every side */ body:has(.landing-page-wrapper)::after { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background-image: radial-gradient(circle 50vmax at 62% 16%, rgba(0, 167, 111, 0.2250) 0.00%, rgba(0, 167, 111, 0.2063) 2.86%, rgba(0, 167, 111, 0.1886) 5.71%, rgba(0, 167, 111, 0.1720) 8.57%, rgba(0, 167, 111, 0.1563) 11.43%, rgba(0, 167, 111, 0.1417) 14.29%, rgba(0, 167, 111, 0.1280) 17.14%, rgba(0, 167, 111, 0.1152) 20.00%, rgba(0, 167, 111, 0.1033) 22.86%, rgba(0, 167, 111, 0.0922) 25.71%, rgba(0, 167, 111, 0.0820) 28.57%, rgba(0, 167, 111, 0.0725) 31.43%, rgba(0, 167, 111, 0.0639) 34.29%, rgba(0, 167, 111, 0.0559) 37.14%, rgba(0, 167, 111, 0.0486) 40.00%, rgba(0, 167, 111, 0.0420) 42.86%, rgba(0, 167, 111, 0.0360) 45.71%, rgba(0, 167, 111, 0.0306) 48.57%, rgba(0, 167, 111, 0.0258) 51.43%, rgba(0, 167, 111, 0.0215) 54.29%, rgba(0, 167, 111, 0.0177) 57.14%, rgba(0, 167, 111, 0.0144) 60.00%, rgba(0, 167, 111, 0.0115) 62.86%, rgba(0, 167, 111, 0.0091) 65.71%, rgba(0, 167, 111, 0.0070) 68.57%, rgba(0, 167, 111, 0.0052) 71.43%, rgba(0, 167, 111, 0.0038) 74.29%, rgba(0, 167, 111, 0.0027) 77.14%, rgba(0, 167, 111, 0.0018) 80.00%, rgba(0, 167, 111, 0.0011) 82.86%, rgba(0, 167, 111, 0.0007) 85.71%, rgba(0, 167, 111, 0.0003) 88.57%, rgba(0, 167, 111, 0.0001) 91.43%, rgba(0, 167, 111, 0.0000) 94.29%, rgba(0, 167, 111, 0.0000) 97.14%, rgba(0, 167, 111, 0.0000) 100.00%), radial-gradient(circle 38vmax at 6% 40%, rgba(0, 184, 217, 0.1440) 0.00%, rgba(0, 184, 217, 0.1320) 2.86%, rgba(0, 184, 217, 0.1207) 5.71%, rgba(0, 184, 217, 0.1101) 8.57%, rgba(0, 184, 217, 0.1001) 11.43%, rgba(0, 184, 217, 0.0907) 14.29%, rgba(0, 184, 217, 0.0819) 17.14%, rgba(0, 184, 217, 0.0737) 20.00%, rgba(0, 184, 217, 0.0661) 22.86%, rgba(0, 184, 217, 0.0590) 25.71%, rgba(0, 184, 217, 0.0525) 28.57%, rgba(0, 184, 217, 0.0464) 31.43%, rgba(0, 184, 217, 0.0409) 34.29%, rgba(0, 184, 217, 0.0358) 37.14%, rgba(0, 184, 217, 0.0311) 40.00%, rgba(0, 184, 217, 0.0269) 42.86%, rgba(0, 184, 217, 0.0230) 45.71%, rgba(0, 184, 217, 0.0196) 48.57%, rgba(0, 184, 217, 0.0165) 51.43%, rgba(0, 184, 217, 0.0138) 54.29%, rgba(0, 184, 217, 0.0113) 57.14%, rgba(0, 184, 217, 0.0092) 60.00%, rgba(0, 184, 217, 0.0074) 62.86%, rgba(0, 184, 217, 0.0058) 65.71%, rgba(0, 184, 217, 0.0045) 68.57%, rgba(0, 184, 217, 0.0034) 71.43%, rgba(0, 184, 217, 0.0024) 74.29%, rgba(0, 184, 217, 0.0017) 77.14%, rgba(0, 184, 217, 0.0012) 80.00%, rgba(0, 184, 217, 0.0007) 82.86%, rgba(0, 184, 217, 0.0004) 85.71%, rgba(0, 184, 217, 0.0002) 88.57%, rgba(0, 184, 217, 0.0001) 91.43%, rgba(0, 184, 217, 0.0000) 94.29%, rgba(0, 184, 217, 0.0000) 97.14%, rgba(0, 184, 217, 0.0000) 100.00%), radial-gradient(circle 34vmax at 82% 70%, rgba(142, 51, 255, 0.1170) 0.00%, rgba(142, 51, 255, 0.1073) 2.86%, rgba(142, 51, 255, 0.0981) 5.71%, rgba(142, 51, 255, 0.0894) 8.57%, rgba(142, 51, 255, 0.0813) 11.43%, rgba(142, 51, 255, 0.0737) 14.29%, rgba(142, 51, 255, 0.0666) 17.14%, rgba(142, 51, 255, 0.0599) 20.00%, rgba(142, 51, 255, 0.0537) 22.86%, rgba(142, 51, 255, 0.0480) 25.71%, rgba(142, 51, 255, 0.0426) 28.57%, rgba(142, 51, 255, 0.0377) 31.43%, rgba(142, 51, 255, 0.0332) 34.29%, rgba(142, 51, 255, 0.0291) 37.14%, rgba(142, 51, 255, 0.0253) 40.00%, rgba(142, 51, 255, 0.0218) 42.86%, rgba(142, 51, 255, 0.0187) 45.71%, rgba(142, 51, 255, 0.0159) 48.57%, rgba(142, 51, 255, 0.0134) 51.43%, rgba(142, 51, 255, 0.0112) 54.29%, rgba(142, 51, 255, 0.0092) 57.14%, rgba(142, 51, 255, 0.0075) 60.00%, rgba(142, 51, 255, 0.0060) 62.86%, rgba(142, 51, 255, 0.0047) 65.71%, rgba(142, 51, 255, 0.0036) 68.57%, rgba(142, 51, 255, 0.0027) 71.43%, rgba(142, 51, 255, 0.0020) 74.29%, rgba(142, 51, 255, 0.0014) 77.14%, rgba(142, 51, 255, 0.0009) 80.00%, rgba(142, 51, 255, 0.0006) 82.86%, rgba(142, 51, 255, 0.0003) 85.71%, rgba(142, 51, 255, 0.0002) 88.57%, rgba(142, 51, 255, 0.0001) 91.43%, rgba(142, 51, 255, 0.0000) 94.29%, rgba(142, 51, 255, 0.0000) 97.14%, rgba(142, 51, 255, 0.0000) 100.00%); animation: home-aurora-drift 28s ease-in-out infinite alternate; will-change: transform; } :root.dark body:has(.landing-page-wrapper)::after { background-image: radial-gradient(circle 50vmax at 62% 16%, rgba(0, 167, 111, 0.5000) 0.00%, rgba(0, 167, 111, 0.4584) 2.86%, rgba(0, 167, 111, 0.4191) 5.71%, rgba(0, 167, 111, 0.3821) 8.57%, rgba(0, 167, 111, 0.3474) 11.43%, rgba(0, 167, 111, 0.3149) 14.29%, rgba(0, 167, 111, 0.2844) 17.14%, rgba(0, 167, 111, 0.2560) 20.00%, rgba(0, 167, 111, 0.2295) 22.86%, rgba(0, 167, 111, 0.2050) 25.71%, rgba(0, 167, 111, 0.1822) 28.57%, rgba(0, 167, 111, 0.1612) 31.43%, rgba(0, 167, 111, 0.1419) 34.29%, rgba(0, 167, 111, 0.1242) 37.14%, rgba(0, 167, 111, 0.1080) 40.00%, rgba(0, 167, 111, 0.0933) 42.86%, rgba(0, 167, 111, 0.0800) 45.71%, rgba(0, 167, 111, 0.0680) 48.57%, rgba(0, 167, 111, 0.0573) 51.43%, rgba(0, 167, 111, 0.0478) 54.29%, rgba(0, 167, 111, 0.0394) 57.14%, rgba(0, 167, 111, 0.0320) 60.00%, rgba(0, 167, 111, 0.0256) 62.86%, rgba(0, 167, 111, 0.0202) 65.71%, rgba(0, 167, 111, 0.0155) 68.57%, rgba(0, 167, 111, 0.0117) 71.43%, rgba(0, 167, 111, 0.0085) 74.29%, rgba(0, 167, 111, 0.0060) 77.14%, rgba(0, 167, 111, 0.0040) 80.00%, rgba(0, 167, 111, 0.0025) 82.86%, rgba(0, 167, 111, 0.0015) 85.71%, rgba(0, 167, 111, 0.0007) 88.57%, rgba(0, 167, 111, 0.0003) 91.43%, rgba(0, 167, 111, 0.0001) 94.29%, rgba(0, 167, 111, 0.0000) 97.14%, rgba(0, 167, 111, 0.0000) 100.00%), radial-gradient(circle 38vmax at 6% 40%, rgba(0, 184, 217, 0.3200) 0.00%, rgba(0, 184, 217, 0.2933) 2.86%, rgba(0, 184, 217, 0.2682) 5.71%, rgba(0, 184, 217, 0.2446) 8.57%, rgba(0, 184, 217, 0.2223) 11.43%, rgba(0, 184, 217, 0.2015) 14.29%, rgba(0, 184, 217, 0.1820) 17.14%, rgba(0, 184, 217, 0.1638) 20.00%, rgba(0, 184, 217, 0.1469) 22.86%, rgba(0, 184, 217, 0.1312) 25.71%, rgba(0, 184, 217, 0.1166) 28.57%, rgba(0, 184, 217, 0.1032) 31.43%, rgba(0, 184, 217, 0.0908) 34.29%, rgba(0, 184, 217, 0.0795) 37.14%, rgba(0, 184, 217, 0.0691) 40.00%, rgba(0, 184, 217, 0.0597) 42.86%, rgba(0, 184, 217, 0.0512) 45.71%, rgba(0, 184, 217, 0.0435) 48.57%, rgba(0, 184, 217, 0.0367) 51.43%, rgba(0, 184, 217, 0.0306) 54.29%, rgba(0, 184, 217, 0.0252) 57.14%, rgba(0, 184, 217, 0.0205) 60.00%, rgba(0, 184, 217, 0.0164) 62.86%, rgba(0, 184, 217, 0.0129) 65.71%, rgba(0, 184, 217, 0.0099) 68.57%, rgba(0, 184, 217, 0.0075) 71.43%, rgba(0, 184, 217, 0.0054) 74.29%, rgba(0, 184, 217, 0.0038) 77.14%, rgba(0, 184, 217, 0.0026) 80.00%, rgba(0, 184, 217, 0.0016) 82.86%, rgba(0, 184, 217, 0.0009) 85.71%, rgba(0, 184, 217, 0.0005) 88.57%, rgba(0, 184, 217, 0.0002) 91.43%, rgba(0, 184, 217, 0.0001) 94.29%, rgba(0, 184, 217, 0.0000) 97.14%, rgba(0, 184, 217, 0.0000) 100.00%), radial-gradient(circle 34vmax at 82% 70%, rgba(142, 51, 255, 0.2600) 0.00%, rgba(142, 51, 255, 0.2383) 2.86%, rgba(142, 51, 255, 0.2179) 5.71%, rgba(142, 51, 255, 0.1987) 8.57%, rgba(142, 51, 255, 0.1807) 11.43%, rgba(142, 51, 255, 0.1637) 14.29%, rgba(142, 51, 255, 0.1479) 17.14%, rgba(142, 51, 255, 0.1331) 20.00%, rgba(142, 51, 255, 0.1194) 22.86%, rgba(142, 51, 255, 0.1066) 25.71%, rgba(142, 51, 255, 0.0948) 28.57%, rgba(142, 51, 255, 0.0838) 31.43%, rgba(142, 51, 255, 0.0738) 34.29%, rgba(142, 51, 255, 0.0646) 37.14%, rgba(142, 51, 255, 0.0562) 40.00%, rgba(142, 51, 255, 0.0485) 42.86%, rgba(142, 51, 255, 0.0416) 45.71%, rgba(142, 51, 255, 0.0354) 48.57%, rgba(142, 51, 255, 0.0298) 51.43%, rgba(142, 51, 255, 0.0248) 54.29%, rgba(142, 51, 255, 0.0205) 57.14%, rgba(142, 51, 255, 0.0166) 60.00%, rgba(142, 51, 255, 0.0133) 62.86%, rgba(142, 51, 255, 0.0105) 65.71%, rgba(142, 51, 255, 0.0081) 68.57%, rgba(142, 51, 255, 0.0061) 71.43%, rgba(142, 51, 255, 0.0044) 74.29%, rgba(142, 51, 255, 0.0031) 77.14%, rgba(142, 51, 255, 0.0021) 80.00%, rgba(142, 51, 255, 0.0013) 82.86%, rgba(142, 51, 255, 0.0008) 85.71%, rgba(142, 51, 255, 0.0004) 88.57%, rgba(142, 51, 255, 0.0002) 91.43%, rgba(142, 51, 255, 0.0000) 94.29%, rgba(142, 51, 255, 0.0000) 97.14%, rgba(142, 51, 255, 0.0000) 100.00%); } /* the sky — night only, fading out before the content gets busy */ :root.dark body:has(.landing-page-wrapper)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='1553.2' cy='360.6' r='0.6' fill='white' fill-opacity='0.31'/%3E%3Ccircle cx='1400.9' cy='600.2' r='0.8' fill='white' fill-opacity='0.61'/%3E%3Ccircle cx='1486.7' cy='530.2' r='0.8' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='549.4' cy='137.0' r='1.1' fill='white' fill-opacity='0.76'/%3E%3Ccircle cx='970.7' cy='133.4' r='0.5' fill='white' fill-opacity='0.58'/%3E%3Ccircle cx='252.8' cy='745.8' r='0.6' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='52.2' cy='608.2' r='0.6' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='944.2' cy='208.1' r='0.6' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='309.4' cy='160.9' r='0.7' fill='white' fill-opacity='0.62'/%3E%3Ccircle cx='1591.7' cy='180.5' r='0.8' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='1122.2' cy='772.6' r='1.1' fill='white' fill-opacity='0.78'/%3E%3Ccircle cx='535.5' cy='98.9' r='0.7' fill='white' fill-opacity='0.32'/%3E%3Ccircle cx='992.8' cy='82.2' r='0.8' fill='white' fill-opacity='0.48'/%3E%3Ccircle cx='1230.5' cy='508.6' r='0.7' fill='white' fill-opacity='0.50'/%3E%3Ccircle cx='514.5' cy='171.8' r='0.6' fill='white' fill-opacity='0.37'/%3E%3Ccircle cx='318.8' cy='742.8' r='0.8' fill='white' fill-opacity='0.33'/%3E%3Ccircle cx='1246.4' cy='305.1' r='0.5' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='134.2' cy='194.3' r='0.9' fill='white' fill-opacity='0.59'/%3E%3Ccircle cx='22.3' cy='455.1' r='1.1' fill='white' fill-opacity='0.68'/%3E%3Ccircle cx='757.2' cy='688.4' r='0.8' fill='white' fill-opacity='0.50'/%3E%3Ccircle cx='910.6' cy='268.7' r='0.6' fill='white' fill-opacity='0.32'/%3E%3Ccircle cx='627.9' cy='109.0' r='0.5' fill='white' fill-opacity='0.70'/%3E%3Ccircle cx='1177.1' cy='485.1' r='0.5' fill='white' fill-opacity='0.51'/%3E%3Ccircle cx='1109.0' cy='293.7' r='0.6' fill='white' fill-opacity='0.37'/%3E%3Ccircle cx='201.7' cy='56.3' r='1.1' fill='white' fill-opacity='0.41'/%3E%3Ccircle cx='855.3' cy='532.0' r='1.1' fill='white' fill-opacity='0.76'/%3E%3Ccircle cx='414.6' cy='724.5' r='1.3' fill='white' fill-opacity='0.80'/%3E%3Ccircle cx='961.9' cy='434.8' r='1.1' fill='white' fill-opacity='0.52'/%3E%3Ccircle cx='1453.6' cy='805.8' r='0.9' fill='white' fill-opacity='0.84'/%3E%3Ccircle cx='147.1' cy='279.9' r='1.3' fill='white' fill-opacity='0.50'/%3E%3Ccircle cx='126.9' cy='6.0' r='0.9' fill='white' fill-opacity='0.61'/%3E%3Ccircle cx='839.0' cy='641.9' r='0.7' fill='white' fill-opacity='0.72'/%3E%3Ccircle cx='19.3' cy='143.0' r='0.9' fill='white' fill-opacity='0.77'/%3E%3Ccircle cx='320.4' cy='448.4' r='0.5' fill='white' fill-opacity='0.34'/%3E%3Ccircle cx='905.6' cy='775.5' r='0.9' fill='white' fill-opacity='0.60'/%3E%3Ccircle cx='156.1' cy='817.2' r='0.9' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='311.2' cy='750.8' r='0.5' fill='white' fill-opacity='0.46'/%3E%3Ccircle cx='324.5' cy='524.3' r='0.6' fill='white' fill-opacity='0.29'/%3E%3Ccircle cx='399.3' cy='287.4' r='1.1' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='184.2' cy='452.4' r='0.7' fill='white' fill-opacity='0.51'/%3E%3Ccircle cx='1042.0' cy='294.6' r='0.8' fill='white' fill-opacity='0.72'/%3E%3Ccircle cx='974.9' cy='716.7' r='0.7' fill='white' fill-opacity='0.35'/%3E%3Ccircle cx='1456.7' cy='263.9' r='0.9' fill='white' fill-opacity='0.25'/%3E%3Ccircle cx='1550.1' cy='412.3' r='1.1' fill='white' fill-opacity='0.52'/%3E%3Ccircle cx='1479.3' cy='714.0' r='1.1' fill='white' fill-opacity='0.51'/%3E%3Ccircle cx='165.6' cy='786.1' r='0.6' fill='white' fill-opacity='0.54'/%3E%3Ccircle cx='557.3' cy='721.5' r='0.7' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='892.7' cy='254.0' r='1.1' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='1339.6' cy='272.3' r='0.8' fill='white' fill-opacity='0.27'/%3E%3Ccircle cx='19.7' cy='246.1' r='0.7' fill='white' fill-opacity='0.68'/%3E%3Ccircle cx='869.8' cy='522.6' r='0.5' fill='white' fill-opacity='0.67'/%3E%3Ccircle cx='1127.3' cy='338.6' r='0.8' fill='white' fill-opacity='0.34'/%3E%3Ccircle cx='567.5' cy='107.4' r='1.3' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='1166.0' cy='816.2' r='0.6' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='386.7' cy='657.9' r='0.7' fill='white' fill-opacity='0.52'/%3E%3Ccircle cx='1574.8' cy='297.2' r='0.6' fill='white' fill-opacity='0.51'/%3E%3Ccircle cx='199.9' cy='439.8' r='0.7' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='77.8' cy='677.4' r='1.1' fill='white' fill-opacity='0.68'/%3E%3Ccircle cx='414.3' cy='543.9' r='1.3' fill='white' fill-opacity='0.35'/%3E%3Ccircle cx='297.3' cy='735.8' r='0.9' fill='white' fill-opacity='0.28'/%3E%3Ccircle cx='248.1' cy='392.5' r='1.3' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='1001.5' cy='826.7' r='0.7' fill='white' fill-opacity='0.52'/%3E%3Ccircle cx='808.1' cy='795.4' r='0.5' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='219.8' cy='526.1' r='0.5' fill='white' fill-opacity='0.68'/%3E%3Ccircle cx='1368.1' cy='611.3' r='1.3' fill='white' fill-opacity='0.41'/%3E%3Ccircle cx='1037.8' cy='410.6' r='0.6' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='1051.2' cy='359.0' r='1.1' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='920.8' cy='427.3' r='1.1' fill='white' fill-opacity='0.73'/%3E%3Ccircle cx='456.2' cy='364.5' r='1.3' fill='white' fill-opacity='0.44'/%3E%3Ccircle cx='233.4' cy='528.0' r='0.9' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='881.1' cy='609.3' r='1.3' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='1401.0' cy='209.2' r='0.9' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='1198.2' cy='424.8' r='0.5' fill='white' fill-opacity='0.54'/%3E%3Ccircle cx='1588.6' cy='457.5' r='0.5' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='651.7' cy='644.9' r='0.5' fill='white' fill-opacity='0.46'/%3E%3Ccircle cx='177.5' cy='356.4' r='1.3' fill='white' fill-opacity='0.35'/%3E%3Ccircle cx='771.8' cy='207.8' r='0.7' fill='white' fill-opacity='0.43'/%3E%3Ccircle cx='393.6' cy='477.8' r='0.9' fill='white' fill-opacity='0.66'/%3E%3Ccircle cx='1107.9' cy='573.7' r='0.9' fill='white' fill-opacity='0.80'/%3E%3Ccircle cx='1351.6' cy='146.8' r='0.5' fill='white' fill-opacity='0.54'/%3E%3Ccircle cx='16.5' cy='260.1' r='0.5' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='1447.3' cy='236.9' r='0.6' fill='white' fill-opacity='0.41'/%3E%3Ccircle cx='858.6' cy='619.0' r='0.9' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='679.4' cy='599.9' r='0.8' fill='white' fill-opacity='0.46'/%3E%3Ccircle cx='1436.6' cy='561.9' r='0.6' fill='white' fill-opacity='0.61'/%3E%3Ccircle cx='251.4' cy='196.2' r='1.1' fill='white' fill-opacity='0.59'/%3E%3Ccircle cx='397.7' cy='40.5' r='0.8' fill='white' fill-opacity='0.76'/%3E%3Ccircle cx='2.9' cy='52.9' r='0.5' fill='white' fill-opacity='0.37'/%3E%3Ccircle cx='390.4' cy='667.5' r='0.6' fill='white' fill-opacity='0.72'/%3E%3Ccircle cx='38.4' cy='740.8' r='0.6' fill='white' fill-opacity='0.34'/%3E%3Ccircle cx='1250.0' cy='182.5' r='0.6' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='1165.6' cy='428.4' r='0.7' fill='white' fill-opacity='0.25'/%3E%3Ccircle cx='1508.1' cy='761.8' r='0.5' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='138.7' cy='350.1' r='0.9' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='1108.8' cy='68.8' r='1.3' fill='white' fill-opacity='0.29'/%3E%3Ccircle cx='223.9' cy='684.1' r='0.9' fill='white' fill-opacity='0.63'/%3E%3Ccircle cx='463.8' cy='237.4' r='1.1' fill='white' fill-opacity='0.80'/%3E%3Ccircle cx='305.4' cy='425.2' r='0.9' fill='white' fill-opacity='0.54'/%3E%3Ccircle cx='1140.4' cy='531.2' r='1.3' fill='white' fill-opacity='0.35'/%3E%3Ccircle cx='447.6' cy='382.5' r='1.1' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='1364.3' cy='530.6' r='1.1' fill='white' fill-opacity='0.82'/%3E%3Ccircle cx='1367.0' cy='771.7' r='0.5' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='860.0' cy='127.7' r='0.8' fill='white' fill-opacity='0.80'/%3E%3Ccircle cx='99.8' cy='757.7' r='0.6' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='936.0' cy='113.6' r='1.3' fill='white' fill-opacity='0.78'/%3E%3Ccircle cx='1147.8' cy='275.6' r='0.5' fill='white' fill-opacity='0.84'/%3E%3Ccircle cx='1526.2' cy='337.4' r='0.5' fill='white' fill-opacity='0.83'/%3E%3Ccircle cx='910.5' cy='202.5' r='0.6' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='1014.6' cy='802.8' r='0.7' fill='white' fill-opacity='0.49'/%3E%3Ccircle cx='387.9' cy='100.3' r='0.9' fill='white' fill-opacity='0.65'/%3E%3Ccircle cx='1250.8' cy='320.9' r='0.7' fill='white' fill-opacity='0.59'/%3E%3Ccircle cx='1339.7' cy='270.4' r='1.3' fill='white' fill-opacity='0.78'/%3E%3Ccircle cx='626.2' cy='686.3' r='0.9' fill='white' fill-opacity='0.62'/%3E%3Ccircle cx='740.9' cy='818.2' r='0.7' fill='white' fill-opacity='0.71'/%3E%3Ccircle cx='1036.9' cy='713.2' r='0.6' fill='white' fill-opacity='0.44'/%3E%3Ccircle cx='1114.1' cy='818.9' r='0.9' fill='white' fill-opacity='0.59'/%3E%3Ccircle cx='466.3' cy='337.9' r='1.3' fill='white' fill-opacity='0.79'/%3E%3Ccircle cx='972.5' cy='13.6' r='0.5' fill='white' fill-opacity='0.71'/%3E%3Ccircle cx='886.4' cy='35.4' r='0.9' fill='white' fill-opacity='0.34'/%3E%3Ccircle cx='563.5' cy='600.0' r='0.7' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='950.2' cy='779.0' r='0.6' fill='white' fill-opacity='0.64'/%3E%3Ccircle cx='1156.3' cy='108.3' r='0.5' fill='white' fill-opacity='0.79'/%3E%3Ccircle cx='831.1' cy='397.7' r='0.7' fill='white' fill-opacity='0.55'/%3E%3Ccircle cx='465.6' cy='138.2' r='0.5' fill='white' fill-opacity='0.79'/%3E%3Ccircle cx='154.3' cy='651.7' r='0.8' fill='white' fill-opacity='0.70'/%3E%3Ccircle cx='694.1' cy='97.7' r='1.1' fill='white' fill-opacity='0.71'/%3E%3Ccircle cx='1079.2' cy='780.4' r='0.9' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='116.4' cy='270.9' r='0.8' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='1062.1' cy='10.5' r='0.9' fill='white' fill-opacity='0.49'/%3E%3Ccircle cx='597.5' cy='699.0' r='0.7' fill='white' fill-opacity='0.27'/%3E%3Ccircle cx='285.5' cy='747.1' r='0.8' fill='white' fill-opacity='0.81'/%3E%3Ccircle cx='1486.2' cy='533.4' r='0.8' fill='white' fill-opacity='0.64'/%3E%3Ccircle cx='1029.6' cy='416.1' r='0.9' fill='white' fill-opacity='0.69'/%3E%3Ccircle cx='145.2' cy='765.2' r='1.3' fill='white' fill-opacity='0.43'/%3E%3Ccircle cx='425.5' cy='155.9' r='1.3' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='1495.3' cy='356.4' r='0.5' fill='white' fill-opacity='0.84'/%3E%3Ccircle cx='971.2' cy='685.6' r='0.8' fill='white' fill-opacity='0.33'/%3E%3Ccircle cx='728.0' cy='570.2' r='0.9' fill='white' fill-opacity='0.36'/%3E%3Ccircle cx='777.4' cy='496.6' r='1.3' fill='white' fill-opacity='0.84'/%3E%3Ccircle cx='803.3' cy='472.9' r='1.3' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='1265.9' cy='280.0' r='0.5' fill='white' fill-opacity='0.48'/%3E%3Ccircle cx='1125.6' cy='673.5' r='0.6' fill='white' fill-opacity='0.68'/%3E%3Ccircle cx='564.5' cy='138.1' r='0.7' fill='white' fill-opacity='0.36'/%3E%3Ccircle cx='1181.1' cy='26.2' r='1.3' fill='white' fill-opacity='0.70'/%3E%3Ccircle cx='1511.4' cy='209.6' r='0.6' fill='white' fill-opacity='0.71'/%3E%3Ccircle cx='200.7' cy='288.7' r='0.6' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='1038.7' cy='463.2' r='1.1' fill='white' fill-opacity='0.39'/%3E%3Ccircle cx='933.3' cy='21.4' r='0.7' fill='white' fill-opacity='0.54'/%3E%3Ccircle cx='768.9' cy='425.0' r='0.9' fill='white' fill-opacity='0.72'/%3E%3Ccircle cx='231.7' cy='219.7' r='0.5' fill='white' fill-opacity='0.79'/%3E%3Ccircle cx='735.9' cy='390.5' r='0.6' fill='white' fill-opacity='0.77'/%3E%3Ccircle cx='968.1' cy='544.3' r='1.3' fill='white' fill-opacity='0.51'/%3E%3Ccircle cx='460.0' cy='259.3' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='1541.5' cy='644.8' r='0.7' fill='white' fill-opacity='0.30'/%3E%3Ccircle cx='1395.9' cy='819.2' r='0.7' fill='white' fill-opacity='0.61'/%3E%3Ccircle cx='878.2' cy='564.8' r='0.7' fill='white' fill-opacity='0.40'/%3E%3Ccircle cx='1214.7' cy='327.6' r='1.3' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='48.8' cy='451.7' r='1.3' fill='white' fill-opacity='0.78'/%3E%3Ccircle cx='386.3' cy='643.2' r='0.6' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='96.1' cy='59.1' r='0.6' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='560.6' cy='710.0' r='0.5' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='470.8' cy='589.2' r='0.9' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='1125.8' cy='239.4' r='0.6' fill='white' fill-opacity='0.77'/%3E%3Ccircle cx='1360.2' cy='123.3' r='0.9' fill='white' fill-opacity='0.38'/%3E%3Ccircle cx='277.6' cy='417.0' r='0.9' fill='white' fill-opacity='0.62'/%3E%3Ccircle cx='326.6' cy='682.7' r='0.9' fill='white' fill-opacity='0.32'/%3E%3Ccircle cx='136.4' cy='450.2' r='0.8' fill='white' fill-opacity='0.48'/%3E%3Ccircle cx='1179.4' cy='319.8' r='0.5' fill='white' fill-opacity='0.47'/%3E%3Ccircle cx='452.4' cy='281.2' r='0.7' fill='white' fill-opacity='0.53'/%3E%3Ccircle cx='1477.1' cy='5.3' r='0.7' fill='white' fill-opacity='0.31'/%3E%3Ccircle cx='543.0' cy='739.4' r='0.9' fill='white' fill-opacity='0.57'/%3E%3Ccircle cx='611.4' cy='745.6' r='0.8' fill='white' fill-opacity='0.27'/%3E%3Ccircle cx='1320.1' cy='695.6' r='0.5' fill='white' fill-opacity='0.48'/%3E%3Ccircle cx='483.0' cy='416.6' r='0.5' fill='white' fill-opacity='0.50'/%3E%3Ccircle cx='21.2' cy='646.0' r='1.1' fill='white' fill-opacity='0.44'/%3E%3Ccircle cx='694.8' cy='391.8' r='0.5' fill='white' fill-opacity='0.42'/%3E%3Ccircle cx='1341.3' cy='495.4' r='0.9' fill='white' fill-opacity='0.76'/%3E%3Ccircle cx='928.4' cy='811.1' r='0.7' fill='white' fill-opacity='0.25'/%3E%3Ccircle cx='1308.9' cy='511.1' r='1.3' fill='white' fill-opacity='0.74'/%3E%3Ccircle cx='950.7' cy='45.0' r='1.3' fill='white' fill-opacity='0.70'/%3E%3Ccircle cx='118.1' cy='756.4' r='0.8' fill='white' fill-opacity='0.30'/%3E%3Ccircle cx='576.1' cy='569.3' r='1.1' fill='white' fill-opacity='0.28'/%3E%3Ccircle cx='1354.9' cy='451.6' r='0.5' fill='white' fill-opacity='0.48'/%3E%3Ccircle cx='1386.4' cy='619.6' r='0.9' fill='white' fill-opacity='0.55'/%3E%3Ccircle cx='130.5' cy='689.3' r='0.8' fill='white' fill-opacity='0.62'/%3E%3Ccircle cx='723.3' cy='771.5' r='0.5' fill='white' fill-opacity='0.63'/%3E%3Ccircle cx='1458.4' cy='652.6' r='0.7' fill='white' fill-opacity='0.30'/%3E%3Ccircle cx='1500.4' cy='251.5' r='0.6' fill='white' fill-opacity='0.37'/%3E%3Ccircle cx='977.1' cy='538.1' r='0.6' fill='white' fill-opacity='0.83'/%3E%3Ccircle cx='1473.6' cy='242.0' r='0.6' fill='white' fill-opacity='0.55'/%3E%3Ccircle cx='1543.8' cy='367.9' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='1543.8' cy='367.9' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='1228.6' cy='71.3' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='1228.6' cy='71.3' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='126.7' cy='375.5' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='126.7' cy='375.5' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='555.5' cy='370.1' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='555.5' cy='370.1' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='540.0' cy='305.6' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='540.0' cy='305.6' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='527.5' cy='499.5' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='527.5' cy='499.5' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='1294.8' cy='564.5' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='1294.8' cy='564.5' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='1576.2' cy='370.7' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='1576.2' cy='370.7' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='714.1' cy='33.8' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='714.1' cy='33.8' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='23.2' cy='354.6' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='23.2' cy='354.6' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='1272.8' cy='26.8' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='1272.8' cy='26.8' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='324.4' cy='245.6' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='324.4' cy='245.6' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='526.4' cy='186.4' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='526.4' cy='186.4' r='1.5' fill='white' fill-opacity='0.95'/%3E%3Ccircle cx='987.4' cy='310.0' r='3.2' fill='white' fill-opacity='0.06'/%3E%3Ccircle cx='987.4' cy='310.0' r='1.5' fill='white' fill-opacity='0.95'/%3E%3C/svg%3E"); background-size: cover; background-position: center top; opacity: 0.7; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1.0000) 0.00%, rgba(0, 0, 0, 1.0000) 2.13%, rgba(0, 0, 0, 1.0000) 4.26%, rgba(0, 0, 0, 1.0000) 6.38%, rgba(0, 0, 0, 1.0000) 8.51%, rgba(0, 0, 0, 1.0000) 10.64%, rgba(0, 0, 0, 0.9997) 12.77%, rgba(0, 0, 0, 0.9955) 14.89%, rgba(0, 0, 0, 0.9868) 17.02%, rgba(0, 0, 0, 0.9738) 19.15%, rgba(0, 0, 0, 0.9568) 21.28%, rgba(0, 0, 0, 0.9361) 23.40%, rgba(0, 0, 0, 0.9119) 25.53%, rgba(0, 0, 0, 0.8846) 27.66%, rgba(0, 0, 0, 0.8544) 29.79%, rgba(0, 0, 0, 0.8217) 31.91%, rgba(0, 0, 0, 0.7867) 34.04%, rgba(0, 0, 0, 0.7496) 36.17%, rgba(0, 0, 0, 0.7109) 38.30%, rgba(0, 0, 0, 0.6707) 40.43%, rgba(0, 0, 0, 0.6294) 42.55%, rgba(0, 0, 0, 0.5872) 44.68%, rgba(0, 0, 0, 0.5444) 46.81%, rgba(0, 0, 0, 0.5013) 48.94%, rgba(0, 0, 0, 0.4582) 51.06%, rgba(0, 0, 0, 0.4154) 53.19%, rgba(0, 0, 0, 0.3732) 55.32%, rgba(0, 0, 0, 0.3318) 57.45%, rgba(0, 0, 0, 0.2915) 59.57%, rgba(0, 0, 0, 0.2526) 61.70%, rgba(0, 0, 0, 0.2155) 63.83%, rgba(0, 0, 0, 0.1803) 65.96%, rgba(0, 0, 0, 0.1474) 68.09%, rgba(0, 0, 0, 0.1171) 70.21%, rgba(0, 0, 0, 0.0896) 72.34%, rgba(0, 0, 0, 0.0653) 74.47%, rgba(0, 0, 0, 0.0443) 76.60%, rgba(0, 0, 0, 0.0271) 78.72%, rgba(0, 0, 0, 0.0139) 80.85%, rgba(0, 0, 0, 0.0049) 82.98%, rgba(0, 0, 0, 0.0004) 85.11%, rgba(0, 0, 0, 0.0000) 87.23%, rgba(0, 0, 0, 0.0000) 89.36%, rgba(0, 0, 0, 0.0000) 91.49%, rgba(0, 0, 0, 0.0000) 93.62%, rgba(0, 0, 0, 0.0000) 95.74%, rgba(0, 0, 0, 0.0000) 97.87%, rgba(0, 0, 0, 0.0000) 100.00%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1.0000) 0.00%, rgba(0, 0, 0, 1.0000) 2.13%, rgba(0, 0, 0, 1.0000) 4.26%, rgba(0, 0, 0, 1.0000) 6.38%, rgba(0, 0, 0, 1.0000) 8.51%, rgba(0, 0, 0, 1.0000) 10.64%, rgba(0, 0, 0, 0.9997) 12.77%, rgba(0, 0, 0, 0.9955) 14.89%, rgba(0, 0, 0, 0.9868) 17.02%, rgba(0, 0, 0, 0.9738) 19.15%, rgba(0, 0, 0, 0.9568) 21.28%, rgba(0, 0, 0, 0.9361) 23.40%, rgba(0, 0, 0, 0.9119) 25.53%, rgba(0, 0, 0, 0.8846) 27.66%, rgba(0, 0, 0, 0.8544) 29.79%, rgba(0, 0, 0, 0.8217) 31.91%, rgba(0, 0, 0, 0.7867) 34.04%, rgba(0, 0, 0, 0.7496) 36.17%, rgba(0, 0, 0, 0.7109) 38.30%, rgba(0, 0, 0, 0.6707) 40.43%, rgba(0, 0, 0, 0.6294) 42.55%, rgba(0, 0, 0, 0.5872) 44.68%, rgba(0, 0, 0, 0.5444) 46.81%, rgba(0, 0, 0, 0.5013) 48.94%, rgba(0, 0, 0, 0.4582) 51.06%, rgba(0, 0, 0, 0.4154) 53.19%, rgba(0, 0, 0, 0.3732) 55.32%, rgba(0, 0, 0, 0.3318) 57.45%, rgba(0, 0, 0, 0.2915) 59.57%, rgba(0, 0, 0, 0.2526) 61.70%, rgba(0, 0, 0, 0.2155) 63.83%, rgba(0, 0, 0, 0.1803) 65.96%, rgba(0, 0, 0, 0.1474) 68.09%, rgba(0, 0, 0, 0.1171) 70.21%, rgba(0, 0, 0, 0.0896) 72.34%, rgba(0, 0, 0, 0.0653) 74.47%, rgba(0, 0, 0, 0.0443) 76.60%, rgba(0, 0, 0, 0.0271) 78.72%, rgba(0, 0, 0, 0.0139) 80.85%, rgba(0, 0, 0, 0.0049) 82.98%, rgba(0, 0, 0, 0.0004) 85.11%, rgba(0, 0, 0, 0.0000) 87.23%, rgba(0, 0, 0, 0.0000) 89.36%, rgba(0, 0, 0, 0.0000) 91.49%, rgba(0, 0, 0, 0.0000) 93.62%, rgba(0, 0, 0, 0.0000) 95.74%, rgba(0, 0, 0, 0.0000) 97.87%, rgba(0, 0, 0, 0.0000) 100.00%); } @keyframes home-aurora-drift { 0% { transform: translate3d(-2.5%, -1.5%, 0) scale(1); } 50% { transform: translate3d(2%, 2.5%, 0) scale(1.04); } 100% { transform: translate3d(-1%, 3%, 0) scale(1.02); } } @media (prefers-reduced-motion: reduce) { body:has(.landing-page-wrapper)::after { animation: none; } } .landing-page-wrapper { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 80px 24px 80px 24px; background: transparent !important; min-height: 100vh; } /* Force all layout wrappers and theme containers containing the landing page to be transparent (excluding header, sidebar, cards, and their contents) */ body:has(.landing-page-wrapper) :is(.fern-layout-body, .fern-main-content, .fern-content, .fern-page-container, main, article, [data-theme], .dark, .light, .fern-background-image):not(#fern-header):not(#fern-sidebar):not(#fern-header *):not(#fern-sidebar *):not(.fern-card):not(.fern-card *) { background: transparent !important; background-color: transparent !important; background-image: none !important; } body:has(.landing-page-wrapper) #fern-header { background-image: none !important; --header-background: transparent !important; } /* The hero starts at the same left edge as every section under it (`.home-section`): a centred hero above left-aligned content read as two pages stacked. */ .landing-hero-section { position: relative; z-index: 2; text-align: left; width: min(1120px, 100%); margin-left: auto; margin-right: auto; margin-bottom: 48px; } .landing-brand-logo { height: 72px; width: auto; display: block; margin: 0; } .landing-brand-logo.dark-only { display: none !important; } .landing-brand-logo.light-only { display: block !important; } :root.dark .landing-brand-logo.dark-only { display: block !important; } :root.dark .landing-brand-logo.light-only { display: none !important; } .landing-site-title { display: flex; align-items: center; justify-content: flex-start; margin-left: 0 !important; margin-right: auto !important; width: fit-content; font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1.1; text-transform: lowercase; color: #637381; margin-top: -2px; margin-bottom: 20px; border-bottom: none !important; padding: 0 !important; } :root.dark .landing-site-title { color: #919eab; } .landing-title-slash { width: 1.5px; height: 2.25rem; background: var(--accent-primary, #00a76f); position: absolute; top: 50%; left: 0%; opacity: 0; transform: translateY(-50%) scaleY(0); transform-origin: center; animation: slash-grow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, slash-sweep-and-close 2.0s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards; } .landing-title-slash::after { content: ''; position: absolute; left: 100%; top: -10%; height: 120%; width: 32px; background: linear-gradient(90deg, rgba(0, 167, 111, 0.25), transparent); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; animation: portal-shadow-glow 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.0s forwards; } .landing-title-part-wrap { display: inline-block; position: relative; } .landing-title-part-wrap.left-wrap { padding-right: 4px; } .landing-title-part-wrap.right-wrap { overflow: hidden; padding-left: 4px; margin-left: 0; } .landing-title-part { display: inline-block; } .landing-title-part.left-part { opacity: 0; clip-path: inset(0 100% 0 0); font-weight: 600 !important; animation: reveal-left-text 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards; } .landing-title-part.right-part { opacity: 0; transform: translateX(-100%); color: #212b36; font-weight: 600 !important; animation: reveal-right-text 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards; } :root.dark .landing-title-part.right-part { color: #f4f6f8; } @keyframes slash-grow { 0% { opacity: 0; transform: translateY(-50%) scaleY(0); } 100% { opacity: 1; transform: translateY(-50%) scaleY(1); } } @keyframes slash-sweep-and-close { 0% { left: 0%; opacity: 1; transform: translateY(-50%) scaleY(1); } 40% { left: 100%; opacity: 1; transform: translateY(-50%) scaleY(1); } 80% { left: 100%; opacity: 1; transform: translateY(-50%) scaleY(1); } 85% { left: 100%; opacity: 1; transform: translateY(-50%) scaleY(1.15); } 100% { left: 100%; opacity: 0; transform: translateY(-50%) scaleY(0); } } @keyframes portal-shadow-glow { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 71% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } } @keyframes reveal-left-text { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0% 0 0); } } @keyframes reveal-right-text { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } .landing-hero-subtitle { max-width: 40rem; font-size: 1.25rem; color: #637381; line-height: 1.6; } :root.dark .landing-hero-subtitle { color: #919eab; } #fern-header { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; background-color: rgba(255, 255, 255, 0.35) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: none !important; transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; } :root.dark #fern-header { background-color: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important; } .scrolled #fern-header { background-color: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important; } :root.dark.scrolled #fern-header { background-color: rgba(20, 26, 33, 0.75) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important; } .fern-header-tabs { background-color: transparent !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- Landing Page Header Style (Scroll Top) --- */ /* On desktop (wide viewports), keep the header completely transparent at scroll top on the landing page */ @media (min-width: 1024px) { body:has(.landing-page-wrapper) #fern-header { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; } } /* On narrow viewports (mobile/tablet), keep the header as a highly readable translucent crystal even at scroll top */ @media (max-width: 1023px) { body:has(.landing-page-wrapper) #fern-header { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; } :root.dark body:has(.landing-page-wrapper) #fern-header { background-color: rgba(20, 26, 33, 0.9) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Style the mobile sidebar/drawer on the landing page as a beautiful translucent crystal */ body:has(.landing-page-wrapper) #fern-sidebar[data-viewport="mobile"] { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.05) !important; } :root.dark body:has(.landing-page-wrapper) #fern-sidebar[data-viewport="mobile"] { background-color: rgba(20, 26, 33, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important; } } /* --- Scrolled Header Styles override on the landing page --- */ .scrolled body:has(.landing-page-wrapper) #fern-header { background-color: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important; } :root.dark.scrolled body:has(.landing-page-wrapper) #fern-header { background-color: rgba(20, 26, 33, 0.75) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important; } /* Global Glassmorphism Cards */ .fern-card { background-color: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; } :root.dark .fern-card { background-color: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important; } .fern-card:hover { border-color: rgba(0, 167, 111, 0.25) !important; box-shadow: 0 0 20px 0 rgba(0, 167, 111, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important; transform: translateY(-2px); } .fern-card:focus-visible { border-color: rgba(0, 167, 111, 0.25) !important; box-shadow: 0 0 20px 0 rgba(0, 167, 111, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important; transform: translateY(-2px); } :root.dark .fern-card:hover { border-color: rgba(0, 167, 111, 0.25) !important; box-shadow: 0 0 20px 0 rgba(0, 167, 111, 0.25), 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important; } :root.dark .fern-card:focus-visible { border-color: rgba(0, 167, 111, 0.25) !important; box-shadow: 0 0 20px 0 rgba(0, 167, 111, 0.25), 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important; } /* Documentation Version Footer Badge */ .landing-footer-version { margin-top: 48px; padding-top: 16px; padding-bottom: 24px; text-align: center; font-size: 0.75rem; color: #637381; opacity: 0.75; letter-spacing: 0.02em; } :root.dark .landing-footer-version { color: #919eab; } .landing-footer-version code { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.08); padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.7rem; font-weight: 600; color: #00a76f; } :root.dark .landing-footer-version code { background: rgba(0, 167, 111, 0.12); border-color: rgba(0, 167, 111, 0.25); color: #5be584; } /* ---------------------------------------------------------------------------------------- SCREENSHOTS, ONE PER THEME A capture of the Console carries its own background, so a light one on a dark page reads as a hole in the layout. Every screenshot is therefore taken twice and both are in the page — this picks the one that matches, the same way the landing logo does. `.doc-shot` also frames them so a white capture does not bleed into a white page. ---------------------------------------------------------------------------------------- */ .doc-shot { border-radius: 10px; border: 1px solid var(--grayscale-a4, rgba(145, 158, 171, 0.24)); max-width: 100%; } .doc-shot.dark-only { display: none !important; } .doc-shot.light-only { display: block !important; } :root.dark .doc-shot.dark-only { display: block !important; } :root.dark .doc-shot.light-only { display: none !important; } /* ---------------------------------------------------------------------------------------- MERMAID DIAGRAMS Mermaid draws square boxes with a hairline border; the rest of this site is rounded and lifted. Rather than repeat a `%%{init}%%` block with themeVariables at the top of every diagram — six lines of configuration above four lines of content, and one more place to drift — the shapes are dressed here, once, for every diagram on the site. Hung off `svg[id^="mermaid"]` and NOT off the container: clicking a diagram opens a zoom overlay that re-mounts the same SVG somewhere else in the DOM, and a container-scoped rule is lost exactly there — which is where a reader looks closest. ---------------------------------------------------------------------------------------- */ /* A diagram sits CENTRED in the column, like a figure — never flush left like a code block (maintainer, 2026-09-16). On the SVG itself, so the zoom overlay is untouched. */ svg[id^="mermaid"] { display: block; margin-left: auto; margin-right: auto; } svg[id^="mermaid"] .node rect.basic, svg[id^="mermaid"] .cluster rect, svg[id^="mermaid"] .packetByte rect, svg[id^="mermaid"] rect.packetBlock { rx: 10px; ry: 10px; } /* The lift, on the group so the shadow follows the shape and not the label box. */ svg[id^="mermaid"] g.node, svg[id^="mermaid"] g.cluster { filter: drop-shadow(0 1px 2px rgba(20, 26, 33, 0.12)) drop-shadow(0 3px 8px rgba(20, 26, 33, 0.08)); } :root.dark svg[id^="mermaid"] g.node, :root.dark svg[id^="mermaid"] g.cluster { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); } /* A subgraph is a grouping, not a card: it keeps the corners and loses the weight. */ /* A subgraph's title names the pipeline — the accent, so the two are told apart at a glance. */ svg[id^="mermaid"] .cluster-label, svg[id^="mermaid"] .cluster-label p { color: var(--accent-primary, #00a76f) !important; fill: var(--accent-primary, #00a76f) !important; font-weight: 600; } svg[id^="mermaid"] .cluster rect { rx: 14px; ry: 14px; } svg[id^="mermaid"] text.packetTitle { font-size: 13px; } /* Mermaid ships its own palette — a blue-grey set in dark mode that belongs to no product on this site. Its `%%{init}%%` theme directives do not survive Fern's renderer (verified), so the colours are stated here, in the same tokens the rest of the page uses: grey surfaces, the accent kept for what a diagram actually emphasises. */ svg[id^="mermaid"] .node rect.basic, svg[id^="mermaid"] .node polygon, svg[id^="mermaid"] .node circle, svg[id^="mermaid"] .node path { fill: var(--background-code, #f6f8fa) !important; stroke: rgba(0, 167, 111, 0.32) !important; } /* The ENDS of a pipeline — what you hand in and what you get back — carry the accent, so the eye finds where to start reading. Tag them in the diagram with `:::io`. */ svg[id^="mermaid"] .node.io rect.basic, svg[id^="mermaid"] .node.io polygon, svg[id^="mermaid"] .node.io circle, svg[id^="mermaid"] .node.io path { fill: rgba(0, 167, 111, 0.12) !important; stroke: rgba(0, 167, 111, 0.75) !important; } svg[id^="mermaid"] .nodeLabel, svg[id^="mermaid"] .nodeLabel p, svg[id^="mermaid"] .edgeLabel, svg[id^="mermaid"] .edgeLabel p, svg[id^="mermaid"] .cluster-label, svg[id^="mermaid"] .cluster-label p { color: var(--text-color, #1c252e) !important; fill: var(--text-color, #1c252e) !important; } /* The flow itself is the brand's green: it is the one line the eye follows. */ svg[id^="mermaid"] .flowchart-link, svg[id^="mermaid"] .edgePath path, svg[id^="mermaid"] .relation { stroke: rgba(0, 167, 111, 0.55) !important; } svg[id^="mermaid"] .marker, svg[id^="mermaid"] marker path { fill: var(--accent-primary, #00a76f) !important; stroke: var(--accent-primary, #00a76f) !important; } svg[id^="mermaid"] .cluster rect { fill: rgba(0, 167, 111, 0.04) !important; stroke: rgba(0, 167, 111, 0.22) !important; } :root.dark svg[id^="mermaid"] .node rect.basic, :root.dark svg[id^="mermaid"] .node polygon, :root.dark svg[id^="mermaid"] .node circle, :root.dark svg[id^="mermaid"] .node path { fill: #111820 !important; stroke: rgba(0, 167, 111, 0.38) !important; } :root.dark svg[id^="mermaid"] .node.io rect.basic, :root.dark svg[id^="mermaid"] .node.io polygon, :root.dark svg[id^="mermaid"] .node.io circle, :root.dark svg[id^="mermaid"] .node.io path { fill: rgba(0, 167, 111, 0.16) !important; stroke: rgba(0, 167, 111, 0.85) !important; } :root.dark svg[id^="mermaid"] .nodeLabel, :root.dark svg[id^="mermaid"] .nodeLabel p, :root.dark svg[id^="mermaid"] .edgeLabel, :root.dark svg[id^="mermaid"] .edgeLabel p, :root.dark svg[id^="mermaid"] .cluster-label, :root.dark svg[id^="mermaid"] .cluster-label p { color: #e6ebf1 !important; fill: #e6ebf1 !important; } /* An edge's label is a caption ON the line, so it is a pill in the page's colour (the line breaks behind it), with the diagram's green as its edge and smaller, quieter text than a node. Fern draws a diagram with one of TWO engines, and the pill has to be built in both: - Pre-rendered (`svg[id^="mermaid-static"]`, a diagram at the top level of a page): the label is an SVG `rect` with 2px corners and a `text`, both painted from Fern's own variables. - Mermaid in the browser (a diagram nested in a component — a callout, a tab): the label is HTML — foreignObject → div.labelBkg → span.edgeLabel → p — and Mermaid gives the span AND the `p` its own light background. Missing the `p` left a white square inside the pill, with light text on it, in the dark theme. Its text also breaks where Mermaid measured it with another font, so it is held on one line. */ svg[id^="mermaid"] g.edgeLabel > rect { rx: 15px; ry: 15px; fill: var(--background, #F4F6F8) !important; stroke: rgba(0, 167, 111, 0.35) !important; } svg[id^="mermaid"] g.edgeLabel > text { fill: var(--grayscale-a11, #454F5B) !important; } :root.dark svg[id^="mermaid"] g.edgeLabel > rect { fill: var(--background, #141A21) !important; } :root.dark svg[id^="mermaid"] g.edgeLabel > text { fill: #C4CDD5 !important; } svg[id^="mermaid"] .edgeLabels foreignObject { overflow: visible; } svg[id^="mermaid"] .labelBkg { background: transparent !important; } svg[id^="mermaid"] span.edgeLabel { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(0, 167, 111, 0.35); background: var(--background, #F4F6F8) !important; font-size: 0.82em; line-height: 1.5; } svg[id^="mermaid"] span.edgeLabel, svg[id^="mermaid"] span.edgeLabel p { white-space: nowrap !important; } svg[id^="mermaid"] span.edgeLabel p { margin: 0 !important; background: transparent !important; } svg[id^="mermaid"] span.edgeLabel:empty { display: none; } svg[id^="mermaid"] span.edgeLabel, svg[id^="mermaid"] span.edgeLabel p { color: var(--grayscale-a11, #454F5B) !important; } :root.dark svg[id^="mermaid"] span.edgeLabel { background: var(--background, #141A21) !important; } :root.dark svg[id^="mermaid"] span.edgeLabel, :root.dark svg[id^="mermaid"] span.edgeLabel p { color: #C4CDD5 !important; } /* ---------------------------------------------------------------------------------------- A VALUE ON THE WIRE `aes::` explained where it is read: the string itself, with each part coloured, and a legend that names them. It replaced an ASCII drawing with carets and, briefly, a Mermaid packet diagram — which could not show the value it was describing and shipped its own light grey into the dark theme. ---------------------------------------------------------------------------------------- */ .wire-value { margin: 24px 0; border-radius: 12px; border: 1px solid var(--border-color, #dfe3e8); background: var(--background-code, #f6f8fa); overflow: hidden; } :root.dark .wire-value { border-color: #2b3846; background: #111820; } .wire-string { padding: 18px 20px; font-family: var(--font-monospace, monospace); font-size: 1rem; line-height: 1.6; word-break: break-all; } .wire-seg { padding: 4px 2px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .wire-seg-scheme { color: var(--accent-primary, #00a76f); font-weight: 700; background: rgba(0, 167, 111, 0.12); box-shadow: inset 0 -2px 0 rgba(0, 167, 111, 0.5); } .wire-seg-payload { color: var(--text-color, #1c252e); opacity: 0.85; background: rgba(145, 158, 171, 0.12); box-shadow: inset 0 -2px 0 rgba(145, 158, 171, 0.4); } :root.dark .wire-seg-payload { color: #e6ebf1; } .wire-legend { display: grid; gap: 10px; padding: 16px 20px 18px; border-top: 1px solid var(--border-color, #dfe3e8); } :root.dark .wire-legend { border-top-color: #2b3846; } .wire-legend-item { display: flex; align-items: baseline; gap: 12px; font-size: 0.875rem; } .wire-key { flex-shrink: 0; min-width: 74px; text-align: center; padding: 2px 8px; border-radius: 6px; font-family: var(--font-monospace, monospace); font-size: 0.75rem; font-weight: 700; } .wire-key-scheme { color: var(--accent-primary, #00a76f); background: rgba(0, 167, 111, 0.12); border: 1px solid rgba(0, 167, 111, 0.35); } .wire-key-payload { background: rgba(145, 158, 171, 0.12); border: 1px solid rgba(145, 158, 171, 0.32); } .wire-legend-text { opacity: 0.9; } /* ── Use cases (the flows' overviews) ─────────────────────────────────────────────────────────── A compact, icon-led list for MANY items, where a CardGroup turns into a wall of cards. Each entry: an icon chip, a title with its badges (Financial Rider: the access mode; Spain Public Administration: the sources it reads), and one or two lines of text. `.use-case-lead` spans the row and carries the accent: the case the page wants read first. */ .use-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0 1.5rem; } @media (max-width: 720px) { .use-cases { grid-template-columns: 1fr; } } .use-case { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid var(--border-color, #dfe3e8); border-radius: 12px; background-color: rgba(255, 255, 255, 0.6); } :root.dark .use-case { background-color: rgba(6, 9, 12, 0.35); border-color: rgba(255, 255, 255, 0.08); } .use-case-lead { grid-column: 1 / -1; border-color: var(--accent-primary, #00a76f); box-shadow: inset 0 0 0 1px var(--accent-primary, #00a76f); } :root.dark .use-case-lead { border-color: var(--accent-primary, #00c281); box-shadow: inset 0 0 0 1px var(--accent-primary, #00c281); } .use-case-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background-color: rgba(0, 167, 111, 0.1); } :root.dark .use-case-icon { background-color: rgba(0, 194, 129, 0.12); } .use-case-body { min-width: 0; } .use-case-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-weight: 600; line-height: 1.35; } .use-case-text { margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; } .use-case-mode { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.08rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; opacity: 0.75; white-space: nowrap; } /* ── Buttons inside a card ───────────────────────────────────────────────────────────────────── A card that explains one thing and offers several doors to it — one per flow — carries Fern `