:root { --bg: #07090d; --bg-2: #0e1218; --bg-3: #161a22; --bg-4: #1d2230; --ink: #f0f3f7; --ink-2: #9aa3b0; --ink-3: #8a93a3; --rule: #1f2532; --rule-soft: #141822; --mint: oklch(0.85 0.18 155); --mint-dim: oklch(0.55 0.14 155); --amber: oklch(0.8 0.16 75); --sans: 'Inter Tight', -apple-system, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--mint); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; } /* top + bottom site bars — mirror the app's MarketingNav / Footer chrome */ .bar { border-bottom: 1px solid var(--rule); background: var(--bg-2); } .bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; } .bar__left { display: flex; align-items: center; gap: 32px; min-width: 0; } .bar__right { display: flex; align-items: center; gap: 12px; } .brand { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-size: 17px; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__glyph { color: var(--mint); } .bar__nav { display: flex; gap: 22px; font-size: 13px; } .bar__nav a { color: var(--ink-2); } .bar__signin { font-size: 13px; color: var(--ink-2); } .bar__cta { font-size: 13px; font-weight: 600; background: var(--mint); color: #062012; padding: 8px 14px; border-radius: 6px; white-space: nowrap; } .bar__cta:hover { text-decoration: none; filter: brightness(1.05); } @media (max-width: 560px) { .bar__nav { display: none; } .bar__signin { display: none; } } /* Auth-aware copy: a tiny inline script tags off Clerk's __client_uat cookie, so signed-in visitors don't get told to sign in. Pages stay fully static; with JS off the signed-out copy shows. */ .when-in { display: none; } .signed-in .when-in { display: revert; } .signed-in .when-out { display: none; } .crumbs { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding: 18px 0 0; } .crumbs a { color: var(--ink-2); } .hero { padding: 22px 0 8px; border-bottom: 1px solid var(--rule-soft); } .hero h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin: 6px 0 10px; } .hero .sub { color: var(--ink-2); font-size: 17px; margin: 0 0 16px; max-width: 60ch; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-dim); } .statline { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin: 4px 0 0; } .statline b { color: var(--ink); } .cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; } .btn { display: inline-block; font-family: var(--mono); font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--rule); } .btn--primary { background: var(--mint); color: #06210f; border-color: transparent; } .btn--primary:hover { text-decoration: none; filter: brightness(1.05); } .btn--ghost { color: var(--ink); } .btn--ghost:hover { text-decoration: none; border-color: var(--mint-dim); } section { padding: 26px 0; border-bottom: 1px solid var(--rule-soft); } h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 14px; } .muted { color: var(--ink-2); } /* question cards */ .q { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; margin: 0 0 14px; } .q__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .q__num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .q__title { font-size: 17px; font-weight: 600; margin: 0; flex: 1 1 240px; } .q__title a { color: var(--ink); } .q__title a:hover { color: var(--mint); text-decoration: none; } .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; } .tag { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--bg-3); } .tag--firm { color: var(--amber); } .tag--free { color: #06210f; background: var(--mint); border-color: transparent; } .prompt { font-size: 15.5px; color: var(--ink); } .prompt p:first-child { margin-top: 0; } .prompt p:last-child { margin-bottom: 0; } /* Solutions are rendered from markdown that may start at ## — keep those headings modest so they don't compete with the page's real h1/h2. */ .prompt :is(h1, h2, h3, h4) { font-size: 15px; margin: 12px 0 6px; color: var(--ink); } .prompt ul, .prompt ol { padding-left: 22px; } .prompt code { font-family: var(--mono); background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 0.95em; } .prompt pre { background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 12px; overflow-x: auto; } .prompt pre code { background: none; padding: 0; } .solution { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 12px; } .solution__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-dim); margin-bottom: 6px; } .solution .muted { font-size: 14.5px; } .lock { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); } .lock__key { font-size: 14px; } .lock a { font-family: var(--mono); font-size: 13px; } /* katex: keep long display math from overflowing the card on mobile */ .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } /* gfm tables (matches the in-app table components in src/lib/markdown.tsx) */ table { border-collapse: collapse; margin: 12px 0; line-height: 1.4; } th, td { border: 1px solid var(--rule); padding: 6px 12px; text-align: left; } th { background: var(--bg-2); } /* link grids (related + hubs) */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .card { display: block; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; color: var(--ink); } .card:hover { border-color: var(--mint-dim); text-decoration: none; } .card b { display: block; font-size: 16px; margin-bottom: 3px; } .card span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .faq { margin: 0; } .faq details { border-bottom: 1px solid var(--rule-soft); padding: 12px 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: '+ '; color: var(--mint-dim); font-family: var(--mono); } .faq details[open] summary::before { content: '– '; } .faq p { color: var(--ink-2); margin: 10px 0 2px; } .endcta { text-align: center; padding: 36px 0; } .endcta h2 { font-size: 24px; } .endcta p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 18px; } .endcta .cta-row { justify-content: center; } footer.site { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 48px; border-top: 1px solid var(--rule); background: var(--bg); color: var(--ink-3); font-size: 12px; } footer.site nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } footer.site a { color: var(--ink-3); } @media (max-width: 560px) { .hero h1 { font-size: 26px; } .q { padding: 16px; } footer.site { flex-direction: column; align-items: flex-start; padding: 20px 24px; } }