/* Light is the default. Dark is opt-in via the toggle, which sets data-theme on and persists the choice. Deliberately not following prefers-color-scheme automatically: the light page is the one the site is designed around, and a visitor whose OS is dark should still land on it. */ :root { color-scheme: light; --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eef1f5; --line: #e2e6ed; --fg: #0d1117; --dim: #5b6472; --accent: #b45309; /* dark enough to pass contrast on white */ --ok: #15803d; --shadow: 0 1px 2px rgba(13, 17, 23, .04), 0 8px 24px rgba(13, 17, 23, .05); --radius: 14px; --wrap: 1100px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0d11; --surface: #12151c; --surface-2: #161a23; --line: #1f2430; --fg: #e8ebf2; --dim: #8a93a8; --accent: #ffb020; --ok: #3fb950; --shadow: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } /* clip, not hidden. Both stop a stray element widening the page, but overflow-x: hidden turns the element into a scroll container and silently kills position: sticky on the nav. clip does not. */ html, body { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; -webkit-font-smoothing: antialiased; } main { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } section { padding: 88px 0; border-bottom: 1px solid var(--line); } section:last-of-type { border-bottom: 0; } h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 16px; } h1 { font-size: clamp(38px, 6.5vw, 68px); font-weight: 680; } h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 640; } h3 { font-size: 17px; font-weight: 620; } p { margin: 0 0 16px; } a { color: var(--fg); } .sub, .lede { color: var(--dim); } .lede { font-size: clamp(17px, 2vw, 20px); max-width: 62ch; margin-bottom: 32px; } .sub { max-width: 68ch; margin-bottom: 36px; } /* --- nav ------------------------------------------------------------------ */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; max-width: var(--wrap); margin: 0 auto; padding: 16px 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; text-decoration: none; letter-spacing: -0.02em; } .nav nav { display: flex; gap: 22px; margin-left: auto; } .nav nav a { color: var(--dim); text-decoration: none; font-size: 14px; } .nav nav a:hover { color: var(--fg); } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-block; padding: 12px 22px; border: 0; cursor: pointer; border-radius: 10px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 620; font-size: 15px; text-decoration: none; } .btn:hover { background: color-mix(in srgb, var(--fg) 85%, var(--bg)); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--surface); } .btn-sm { padding: 8px 16px; font-size: 14px; } /* --- hero ----------------------------------------------------------------- */ .hero { padding: 96px 0 72px; position: relative; } .hero::before { content: ""; position: absolute; inset: -20% 0 auto -20%; height: 420px; background: radial-gradient(50% 60% at 30% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); pointer-events: none; z-index: -1; /* Was inset: -20% -40% auto -20%, which pushed the glow 40% past the right edge and gave the whole page 227px of horizontal scroll. A decorative gradient has no business changing the document width. */ } /* --- theme toggle --------------------------------------------------------- */ #theme { background: transparent; border: 1px solid var(--line); color: var(--dim); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; } #theme:hover { color: var(--fg); background: var(--surface); } #theme svg { width: 16px; height: 16px; } #theme .moon { display: none; } :root[data-theme="dark"] #theme .sun { display: none; } :root[data-theme="dark"] #theme .moon { display: block; } .eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .cta { display: flex; gap: 12px; flex-wrap: wrap; } /* --- stats ---------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; box-shadow: var(--shadow); } .stat { background: var(--surface); padding: 24px 22px; } .stat b { display: block; font-size: 32px; font-weight: 660; letter-spacing: -.03em; } .stat span { display: block; font-size: 14px; margin-top: 2px; } .stat em { display: block; font-style: normal; font-size: 12px; color: var(--dim); margin-top: 6px; } .stat:nth-child(2) b { color: var(--accent); } /* --- demo ----------------------------------------------------------------- */ #demo-form { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } #demo-url { flex: 1; min-width: 300px; padding: 12px 16px; font: inherit; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); } #demo-url:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .chips button { background: var(--surface); border: 1px solid var(--line); color: var(--dim); padding: 6px 13px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 13px; } .chips button:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, var(--line)); } .chips span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-left: 6px; } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .shot { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .shot.ok { border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); } .shot figcaption { padding: 11px 15px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--mono); color: var(--dim); display: flex; justify-content: space-between; align-items: center; } .shot figcaption em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); } .shot.ok figcaption em { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); } .frame { aspect-ratio: 16 / 10; background: var(--surface-2); display: grid; place-items: center; } .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .frame .placeholder, .frame .err { color: var(--dim); font: 13px/1.5 var(--mono); padding: 24px; text-align: center; } .frame .err { color: #b42318; } :root[data-theme="dark"] .frame .err { color: #f85149; } .frame.busy::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- cards ---------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .card h3 { margin-bottom: 8px; } .card p { color: var(--dim); font-size: 14.5px; margin: 0; } /* --- code ----------------------------------------------------------------- */ .tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .tabs button { background: transparent; border: 1px solid transparent; color: var(--dim); padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; } .tabs button.on { background: var(--surface); border-color: var(--line); color: var(--fg); } .code { display: none; margin: 0 0 40px; padding: 22px 24px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 13.5px/1.7 var(--mono); color: var(--fg); box-shadow: var(--shadow); } .code.on { display: block; } .params { width: 100%; border-collapse: collapse; font-size: 14px; } .params th, .params td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .params th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; } .params td:nth-child(2), .params td:nth-child(3) { color: var(--dim); white-space: nowrap; } .params td:last-child { color: var(--dim); } code { font-family: var(--mono); font-size: .92em; color: var(--accent); } /* --- agents / pricing / faq ----------------------------------------------- */ .links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .links li { color: var(--dim); font-size: 14.5px; } .links a { text-decoration: none; margin-right: 10px; } .links a:hover code { text-decoration: underline; } .faq details { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "+ "; color: var(--accent); } .faq details[open] summary::before { content: "− "; } .faq p { color: var(--dim); margin: 12px 0 0; max-width: 72ch; } footer { max-width: var(--wrap); margin: 0 auto; padding: 32px 24px 56px; display: flex; justify-content: space-between; gap: 16px; color: var(--dim); font-size: 14px; border-top: 1px solid var(--line); } footer nav { display: flex; gap: 18px; } footer a { color: var(--dim); text-decoration: none; } footer a:hover { color: var(--fg); } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .grid, .stats { grid-template-columns: repeat(2, 1fr); } .pair { grid-template-columns: 1fr; } section { padding: 64px 0; } /* The links used to be display:none here, which left a phone with no way to reach Docs at all — it is a separate page, not an anchor you can scroll to. They move to their own scrollable row instead of disappearing. */ .nav { flex-wrap: wrap; row-gap: 12px; padding-bottom: 12px; } .nav nav { order: 3; width: 100%; margin-left: 0; gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav nav::-webkit-scrollbar { display: none; } .nav nav a { white-space: nowrap; font-size: 15px; } /* The bar is two rows tall now, so anchored jumps need more clearance. */ html { scroll-padding-top: 124px; } } @media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .frame.busy::after { animation: none; } } /* --- pricing -------------------------------------------------------------- */ .pricing { text-align: left; } .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; } .tier { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .tier.featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .badge { position: absolute; top: -10px; left: 22px; font-size: 10.5px; font-weight: 620; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: #fff; } .tier h3 { margin: 0; } .price { margin: 0; display: flex; align-items: baseline; gap: 6px; } .price b { font-size: 34px; font-weight: 660; letter-spacing: -.03em; } .price span { color: var(--dim); font-size: 13px; } .renders { margin: 0; color: var(--dim); font-size: 14px; } .tier ul { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: 8px; } .tier li { font-size: 14px; color: var(--dim); padding-left: 20px; position: relative; } .tier li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; } .tier .btn { text-align: center; } @media (max-width: 980px) { .tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } } /* --- brand ---------------------------------------------------------------- */ .brand { gap: 10px; } /* Sized here rather than on the element so one number governs every instance. The brand should anchor the bar: at 13px it read as smaller than the button next to it, which inverts the hierarchy. */ .mark { flex: none; display: block; width: 30px; height: 30px; } .foot .mark { width: 22px; height: 22px; } .mark-bg { fill: var(--fg); } .mark-lines rect { fill: var(--bg); opacity: .42; } :root[data-theme="dark"] .mark-lines rect { fill: #fff; opacity: .34; } .word { display: inline-flex; font-size: 21px; letter-spacing: -.035em; font-weight: 660; } .word em { font-style: normal; color: var(--accent); } .foot .word { font-size: 16px; } footer .brand { display: inline-flex; align-items: center; text-decoration: none; } /* Wide content scrolls inside its own box rather than stretching the page. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; } .table-wrap .params { margin-bottom: 0; } @media (max-width: 700px) { .params { min-width: 520px; } } /* --- docs ----------------------------------------------------------------- */ .docs section { border-bottom: 0; padding-bottom: 40px; } .docs h1 { font-size: clamp(32px, 4.5vw, 46px); } .docs h2 { font-size: 22px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); } .docs h2:first-of-type { border-top: 0; margin-top: 34px; } .docs p { max-width: 74ch; } .docs .code { margin-bottom: 18px; } .docs table { margin-bottom: 18px; } .docs .links { margin-top: 14px; } .frame .err { max-width: 34ch; } .err-retry { display: block; margin-top: 8px; color: var(--dim); font-size: 12px; } /* --- welcome -------------------------------------------------------------- */ .welcome .keybox { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 40px; box-shadow: var(--shadow); } .welcome .keybox code { font-family: var(--mono); font-size: 15px; color: var(--fg); word-break: break-all; flex: 1; min-width: 240px; } .welcome .keybox .placeholder { color: var(--dim); font: 14px var(--mono); } .welcome h2 { font-size: 20px; margin-top: 8px; } /* --- recently rendered ---------------------------------------------------- */ .chips.recent { align-items: center; margin-top: -14px; } .recent-label { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; } .chips.recent button { font-family: var(--mono); font-size: 12px; } /* --- small screens -------------------------------------------------------- */ /* Last in the file on purpose: these override .word and .mark, which are declared further down than the other breakpoints, and a media query carries no extra specificity to win on. */ @media (max-width: 560px) { .nav { gap: 10px; padding: 12px 16px; } .word { font-size: 17px; } .mark { width: 26px; height: 26px; } .brand { gap: 7px; } .btn-sm { padding: 7px 12px; font-size: 13px; } #theme { width: 30px; height: 30px; } main { padding: 0 16px; } }