/* ScreenWright: screenwright.com (website4, workshop palette) One stylesheet for every page. No build step, no web fonts. */ /* ===================================================================== PALETTE: the only place a color is written down. Workshop palette: unbleached paper, warm ink, one metal accent (oxide rust), warm charcoal for the dark surfaces. No gradients anywhere. Edit the two accent values and the three status values and the whole site recolors: buttons, headline second line, links, rules, dots, focus rings, badges, code syntax, the dark MCP sections, shadows, light and dark scheme both. Everything below this block refers to these variables; there are no hex or rgb literals anywhere else in this file, nothing inline in the HTML, and the inline SVGs use currentColor. The one color outside this file is in each page's ; keep it equal to --accent. The app icon (assets/icon-*.png) is still the old violet mark; its redesign is pending and it is the one unresolved color on the page. ===================================================================== */ :root { /* Accent: edit these */ --accent: #B4460F; /* oxide rust. 4.97:1 as text on paper, 5.49:1 with white on it */ --accent-hover: #9C3D0E; /* pressed / hovered */ /* Status: edit these */ --status-ok: #1E7355; /* teal green: keeps a blue component so it survives red-green CVD */ --status-warn: #7A6100; /* ochre; also carries a dashed border and a "!" so it never relies on hue */ --status-err: #A8231B; /* deep red */ /* Paper and ink (light scheme) */ --paper: #F7F3EC; --surface: #FFFDF9; --ink: #1A1712; --muted: #5C554B; --line: #E6DFD3; --line-strong: #CFC6B7; --on-accent: #FFFFFF; --on-warn: var(--on-accent); /* text on a --warn fill: white in light; the dark scheme reassigns it, because --warn lightens there and white fails on it */ /* Dark surfaces: the MCP sections and every code panel (warm charcoal) */ --dark: #1E1A16; --dark-2: #27221C; --dark-code: #161310; --dark-text: #EFE9DF; --dark-muted: #ADA497; /* Dark color scheme: assigned to the names above under prefers-color-scheme: dark */ --paper-dark: #171411; --surface-dark: #201C18; --ink-dark: #EFE9DF; --muted-dark: #ADA497; --line-dark: #2E2924; --line-strong-dark: #3E3730; --dark-dark: #100E0B; --dark-2-dark: #191512; --dark-code-dark: #0C0A08; /* Derived: nothing below needs editing */ --ok: var(--status-ok); --warn: var(--status-warn); --err: var(--status-err); --accent-text: var(--accent); --accent-wash: color-mix(in srgb, var(--accent) 6%, transparent); --accent-shadow: color-mix(in srgb, var(--accent) 22%, transparent); --accent-shadow-strong: color-mix(in srgb, var(--accent) 30%, transparent); --ok-bg: color-mix(in srgb, var(--ok) 11%, transparent); --warn-bg: color-mix(in srgb, var(--warn) 12%, transparent); --err-bg: color-mix(in srgb, var(--err) 9%, transparent); --shadow-ink: color-mix(in srgb, var(--ink) 14%, transparent); --shadow-deep: color-mix(in srgb, var(--ink) 25%, transparent); --dark-line: color-mix(in srgb, var(--dark-text) 10%, transparent); --dark-line-strong: color-mix(in srgb, var(--dark-text) 25%, transparent); --dark-chip: color-mix(in srgb, var(--dark-text) 8%, transparent); --dark-chip-hover: color-mix(in srgb, var(--dark-text) 16%, transparent); --dark-track: color-mix(in srgb, var(--dark-text) 6%, transparent); --dark-thumb: color-mix(in srgb, var(--dark-text) 28%, transparent); --warn-on-dark: color-mix(in srgb, var(--warn) 55%, var(--dark-text)); --accent-on-dark: color-mix(in srgb, var(--accent) 55%, var(--dark-text)); --code-key: color-mix(in srgb, var(--accent) 45%, var(--dark-text)); --code-str: color-mix(in srgb, var(--ok) 40%, var(--dark-text)); --code-num: color-mix(in srgb, var(--warn) 45%, var(--dark-text)); --code-comment: var(--dark-muted); --code-ok: color-mix(in srgb, var(--ok) 50%, var(--dark-text)); --code-err: color-mix(in srgb, var(--err) 55%, var(--dark-text)); --code-tool: color-mix(in srgb, var(--accent) 65%, var(--dark-text)); --focus: var(--accent); --focus-on-dark: var(--accent-on-dark); --radius: 14px; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --max: 1120px; --measure: 720px; --gutter: 24px; --section: 80px; --header: 64px; --anchor: calc(var(--header) + 16px); color-scheme: light dark; } /* Dark color scheme: only reassignments; every value is named in the block above. */ @media (prefers-color-scheme: dark) { :root { --paper: var(--paper-dark); --surface: var(--surface-dark); --ink: var(--ink-dark); --muted: var(--muted-dark); --line: var(--line-dark); --line-strong: var(--line-strong-dark); --dark: var(--dark-dark); --dark-2: var(--dark-2-dark); --dark-code: var(--dark-code-dark); --ok: color-mix(in srgb, var(--status-ok) 50%, var(--dark-text)); --warn: color-mix(in srgb, var(--status-warn) 50%, var(--dark-text)); --err: color-mix(in srgb, var(--status-err) 50%, var(--dark-text)); --on-warn: var(--dark-code); --accent-text: var(--accent-on-dark); --focus: var(--accent-on-dark); --shadow-ink: color-mix(in srgb, var(--dark-code) 60%, transparent); --shadow-deep: color-mix(in srgb, var(--dark-code) 80%, transparent); } } /* ===================================================================== end PALETTE */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; } h1 { font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.035em; line-height: 1.02; font-weight: 650; } h1 .accent, h2 .accent { display: block; color: var(--accent-text); } h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.025em; line-height: 1.12; } h3 { font-size: 19px; } h4 { font-size: 16px; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } ul, ol { padding-left: 1.3em; margin: 0 0 1em; } li { margin-bottom: .4em; } code, kbd, pre, .mono { font-family: var(--mono); } code { font-size: .88em; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .1em .35em; border-radius: 5px; overflow-wrap: anywhere; } pre code { background: none; padding: 0; font-size: inherit; } kbd { font-size: 12px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--surface); } img { max-width: 100%; height: auto; display: block; } strong { font-weight: 600; } button { font: inherit; } [id] { scroll-margin-top: var(--anchor); } .muted { color: var(--muted); } .small { font-size: 14px; } .caption { font-size: 13.5px; color: var(--muted); } .mono { font-size: 13px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .measure { max-width: var(--measure); } .centered { max-width: var(--measure); margin-left: auto; margin-right: auto; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ---------- focus ---------- */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .dark, .code, .trace, .dl-mcp { --focus: var(--focus-on-dark); } .skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--surface); color: var(--ink); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 30px var(--shadow-ink); } .skip-link:focus { top: 12px; } /* ---------- buttons, pills, tags ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-family: var(--sans); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 20px var(--accent-shadow); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 10px 26px var(--accent-shadow-strong); } .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-outline:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .btn-lg { padding: 15px 26px; font-size: 17px; } .btn-sm { padding: 8px 14px; font-size: 13px; } .btn svg { width: 16px; height: 16px; flex: none; } .btn small { font-weight: 500; opacity: .85; font-size: .85em; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-family: var(--mono); border: 1px solid var(--line-strong); color: var(--muted); line-height: 1.4; white-space: nowrap; } .badge { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); line-height: 1.5; vertical-align: middle; } .badge-write { background: var(--warn); border-color: var(--warn); color: var(--on-warn); } .badge-none { border-style: dotted; } .tag { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); line-height: 1.5; white-space: nowrap; } .tag-err { border-color: var(--err); color: var(--err); } .tag-warn { border-color: var(--warn); color: var(--warn); border-style: dashed; } .status-chip { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 6px; border: 1px solid; white-space: nowrap; } .status-chip::before { font-weight: 700; margin-right: 5px; } .status-chip.ok { color: var(--ok); border-color: var(--ok); } .status-chip.ok::before { content: "✓"; } .status-chip.err { color: var(--err); border-color: var(--err); } .status-chip.err::before { content: "×"; } .status-chip.warn { color: var(--warn); border-color: var(--warn); border-style: dashed; } .status-chip.warn::before { content: "!"; } .text-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .text-link:hover { text-decoration: underline; color: var(--accent-hover); } .text-link::after { content: "→"; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 100%; flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; flex: none; } .brand img { width: 28px; height: 28px; border-radius: 7px; } .nav-links { display: flex; gap: 26px; margin: 0 auto; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; } .nav-links a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; } .nav-links a:hover { color: var(--ink); } .nav-links a.current, .nav-links a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--accent); } .nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; white-space: nowrap; } .nav-version { font-family: var(--mono); font-size: 12px; color: var(--muted); } .nav-menu { position: relative; display: none; } .nav-menu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 8px; white-space: nowrap; } .nav-menu summary::-webkit-details-marker { display: none; } .nav-menu[open] summary { background: color-mix(in srgb, var(--ink) 6%, transparent); } .nav-menu .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-width: 240px; box-shadow: 0 12px 40px var(--shadow-ink); display: flex; flex-direction: column; } .nav-menu .menu-panel a { padding: 10px 12px; text-decoration: none; border-radius: 8px; font-size: 15px; } .nav-menu .menu-panel a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .nav-menu .menu-panel a[aria-current="page"] { font-weight: 600; } .nav-menu .menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } @media (max-width: 1199px) { .nav-version { display: none; } } @media (max-width: 899px) { .nav-links { display: none; } .nav-menu { display: block; } .site-header .wrap { gap: 12px; } } @media (max-width: 480px) { .brand span { display: none; } .nav-right .btn-sm { padding: 8px 10px; } } /* ---------- sections & headings ---------- */ .sec { padding: var(--section) 0; } .sec + .sec { border-top: 1px solid var(--line); } .sec.dark + .sec, .sec + .sec.dark { border-top: 0; } .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } .eyebrow .num { font-size: 10.5px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 4px; letter-spacing: 0; line-height: 1.2; } .eyebrow.center { justify-content: center; } /* Section header: eyebrow across the top, heading left, lede right. The header owns the full width, so no dead gutter. */ .sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 56px; align-items: start; margin-bottom: 36px; } .sec-head .eyebrow { grid-column: 1 / -1; margin-bottom: 8px; } .sec-head h2 { margin: 0; } .sec-head > h2:last-child { grid-column: 1 / -1; max-width: 22ch; } .sec-head .lede { margin: .45em 0 0; max-width: 60ch; } .sec-head.center { display: block; max-width: var(--measure); margin-left: auto; margin-right: auto; text-align: center; } @media (max-width: 960px) { .sec-head { grid-template-columns: 1fr; gap: 14px; } .sec-head .lede { margin-top: 0; } } .lede { font-size: 19px; line-height: 1.6; color: var(--muted); } .lede strong { color: var(--ink); } .lede.tight { font-size: 17px; } .sec-foot { margin-top: 28px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-2 > *, .grid-3 > *, .split > *, .docs > *, .tools > *, .strip > * { min-width: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .split.wide-right { grid-template-columns: 5fr 7fr; } .split.wide-left { grid-template-columns: 7fr 5fr; } @media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } .split, .split.wide-right, .split.wide-left { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } :root { --section: 56px; } .sec-head { margin-bottom: 28px; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .card h3 { margin-bottom: 8px; font-size: 18px; } .card p { font-size: 15.5px; color: var(--muted); } .card p:last-child { margin-bottom: 0; } .card .tag { float: right; margin-left: 12px; margin-top: 2px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .panel h3 { font-size: 19px; } .callout { border: 1px solid color-mix(in srgb, var(--err) 45%, var(--line)); background: var(--err-bg); border-radius: var(--radius); padding: 22px 26px; } .callout-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); border-style: dashed; background: var(--warn-bg); } .callout-muted { border-color: var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); } .callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; } .callout h3 { font-size: 19px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pullquote { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; border-left: 4px solid var(--accent); padding-left: 24px; margin: 40px 0 0; max-width: 860px; } .pullquote cite { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 12px; font-family: var(--mono); } .crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 12.5px/1.4 var(--mono); } .crumbs span { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 8px; } .crumbs i { color: var(--muted); font-style: normal; } /* ---------- hero (landing + subpages) ---------- */ .hero { padding: 80px 0 36px; text-align: center; } .hero .eyebrow { justify-content: center; margin-bottom: 26px; } .hero h1 { max-width: 15ch; margin: 0 auto 26px; } .hero .sub { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0 auto 30px; } .hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 18px; } .hero .fine { font-size: 13px; color: var(--muted); max-width: 560px; margin: 0 auto; } .hero.page { text-align: left; padding: 72px 0 48px; } .hero.page .eyebrow { justify-content: flex-start; } .hero.page h1 { font-size: clamp(36px, 4.6vw, 62px); margin: 0 0 22px; max-width: 18ch; } .hero.page .sub { margin: 0; max-width: var(--measure); } .hero.page .cta { justify-content: flex-start; margin-top: 28px; margin-bottom: 0; } @media (max-width: 720px) { .hero { padding: 56px 0 32px; } .hero.page { padding: 48px 0 32px; } } @media (max-width: 520px) { .btn-lg { white-space: normal; text-align: center; width: 100%; padding: 14px 18px; font-size: 16px; } .hero .cta { flex-direction: column; align-items: stretch; } } /* ---------- tabbed showcase ---------- */ .showcase { padding: 16px 0 var(--section); } .tabs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .tabs-head .eyebrow { margin: 0; } .tablist { display: inline-flex; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 4px; border-radius: 10px; gap: 2px; } .tablist [role="tab"] { padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; } .tablist [role="tab"] svg { width: 14px; height: 14px; } .tablist [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px var(--shadow-ink); } .tabpanel[hidden] { display: none; } .tab-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--muted); margin-top: 16px; } .tab-caption p { margin: 0; max-width: 720px; } .core-bar { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; background: var(--surface); font-size: 14.5px; color: var(--muted); } .core-bar strong { color: var(--ink); } .core-bar code { font-size: 12.5px; white-space: nowrap; } @media (max-width: 600px) { .core-bar code { white-space: normal; overflow-wrap: anywhere; } } /* ---------- screenshot placeholders ---------- */ .shot { margin: 0; } .shot .ph { aspect-ratio: var(--ar, 16 / 10); width: 100%; border: 2px dashed var(--line-strong); border-radius: 14px; background: color-mix(in srgb, var(--ink) 3%, var(--surface)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; } .shot .ph .l { font: 12.5px/1.6 var(--mono); color: var(--muted); max-width: 440px; overflow-wrap: anywhere; } .shot .ph .l b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 8px; letter-spacing: .02em; } .shot img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px var(--shadow-deep); } .shot.wide { max-width: 920px; margin: 0 auto; } .shot figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; line-height: 1.55; } .shot.framed .ph, .shot.framed img { box-shadow: 0 24px 60px -20px var(--shadow-deep); } @media (max-width: 600px) { .shot .ph { padding: 14px; } .shot .ph .l { font-size: 11px; } } /* ---------- trace (the agent's session, row-based so it wraps) ---------- */ .trace { background: var(--dark-code); color: var(--dark-text); border: 1px solid var(--dark-line-strong); border-radius: 12px; padding: 16px 20px; font: 13px/1.6 var(--mono); margin: 0 0 16px; } .trace .row { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 4px 12px; padding: 5px 0; align-items: baseline; } .trace .row + .row { border-top: 1px solid var(--dark-track); } .trace .tool { color: var(--code-tool); font-weight: 600; white-space: nowrap; } .trace .arr { color: var(--dark-muted); } .trace .res { overflow-wrap: anywhere; } .trace .ok { color: var(--code-ok); white-space: nowrap; } .trace .ok::after { content: " ✓"; } @media (max-width: 560px) { .trace .row { grid-template-columns: 1fr; gap: 2px; } .trace .arr { display: none; } } .trace-wrap { background: var(--dark); border-radius: var(--radius); padding: 28px; color: var(--dark-text); } .trace-wrap .tw-h { color: var(--dark-text); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; } .trace-wrap p { color: var(--dark-muted); font-size: 14.5px; } .trace-wrap p:last-child { margin-bottom: 0; } .trace-wrap a { text-decoration-color: var(--dark-line-strong); } @media (max-width: 600px) { .trace-wrap { padding: 20px; } } /* ---------- code panels ---------- */ .code { position: relative; background: var(--dark-code); color: var(--dark-text); border-radius: 12px; border: 1px solid var(--dark-line-strong); margin: 0 0 1.2em; max-width: 100%; } .code pre { margin: 0; padding: 18px 76px 18px 20px; overflow-x: auto; font-size: 13px; line-height: 1.55; tab-size: 2; } .code.soft pre { white-space: pre-wrap; overflow-wrap: anywhere; } .code.nocopy pre { padding-right: 20px; } .code .copy { position: absolute; top: 10px; right: 10px; font: 600 11px/1 var(--sans); color: var(--dark-text); background: var(--dark-chip); border: 1px solid var(--dark-line-strong); border-radius: 6px; padding: 6px 9px; cursor: pointer; } .code .copy:hover { background: var(--dark-chip-hover); } .code .copy.done { color: var(--code-ok); border-color: var(--code-ok); } .code .label { position: absolute; top: -10px; left: 14px; font: 11px/1 var(--mono); color: var(--dark-muted); background: var(--dark-code); padding: 3px 8px; border: 1px solid var(--dark-line-strong); border-radius: 6px; letter-spacing: .04em; } .code.has-label { margin-top: 16px; } .code.has-label pre { padding-top: 26px; } .c-key { color: var(--code-key); } .c-str { color: var(--code-str); } .c-num { color: var(--code-num); } .c-cm { color: var(--code-comment); font-style: italic; } .c-err { color: var(--code-err); } .c-ok { color: var(--code-ok); } .c-vi { color: var(--code-tool); } /* Scrollbars on scrolling code are always visible, so nothing is silently cut off. */ .code pre::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { height: 10px; } .code pre::-webkit-scrollbar-track { background: var(--dark-track); border-radius: 0 0 12px 12px; } .code pre::-webkit-scrollbar-thumb { background: var(--dark-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .scroll-x::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; } .scroll-x::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } @supports (scrollbar-color: auto) and (not selector(::-webkit-scrollbar)) { .code pre { scrollbar-width: thin; scrollbar-color: var(--dark-thumb) var(--dark-track); } .scroll-x { scrollbar-width: thin; } } /* A block whose lines run past its edge says so, whether or not the platform paints a scrollbar. */ .code.can-scroll::after { content: "scrolls →"; position: absolute; right: 10px; bottom: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--dark-muted); background: var(--dark-code); border: 1px solid var(--dark-line-strong); border-radius: 6px; padding: 4px 7px; pointer-events: none; } .code.can-scroll.scrolled-end::after { content: "← scrolls"; } .code.can-scroll pre { padding-bottom: 30px; } .code.can-scroll pre::-webkit-scrollbar { height: 10px; -webkit-appearance: none; } .code-strip { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; margin-bottom: 10px; } .code-strip .lab { font-size: 13px; color: var(--muted); padding-top: 10px; } .code-strip .code { margin: 0; } .code-strip .code pre { padding: 10px 14px; } @media (max-width: 600px) { .code-strip { grid-template-columns: 1fr; gap: 4px; } } /* ---------- tables ---------- */ table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); font-size: 15px; } table.tbl th, table.tbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } table.tbl tr:last-child td { border-bottom: 0; } table.tbl th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--ink) 3%, transparent); } table.tbl td.strong { font-weight: 600; } table.tbl td.why { color: var(--muted); } table.tbl code { white-space: nowrap; } tr.tint-ok td { background: var(--ok-bg); } tr.tint-err td { background: var(--err-bg); } .scroll-x table.tbl { min-width: 560px; } .deftable { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; font-size: 14px; margin: 12px 0 0; } .deftable dt { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; } .deftable dd { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } @media (max-width: 520px) { .deftable { grid-template-columns: 1fr; gap: 2px 0; } .deftable dd { margin-bottom: 8px; } } /* ---------- safety strip ---------- */ .strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 8px; } .strip article { border-top: 1px solid var(--line-strong); padding-top: 18px; position: relative; } .strip article::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .strip .n { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: .08em; } .strip h3 { font-size: 18px; margin: 14px 0 8px; letter-spacing: -0.01em; } .strip p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; } @media (max-width: 960px) { .strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .strip { grid-template-columns: 1fr 1fr; gap: 22px; } } @media (max-width: 420px) { .strip { grid-template-columns: 1fr; } } /* ---------- the five steps, in full (how it works) ---------- */ .steps-full { display: grid; gap: 0; counter-reset: st; } .steps-full article { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); } .steps-full article:last-child { border-bottom: 1px solid var(--line); } .steps-full .p { display: inline-flex; align-items: center; background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--sans); padding: 0 14px; height: 38px; border-radius: 12px; white-space: nowrap; box-shadow: 0 4px 14px var(--accent-shadow); } .steps-full .st { font: 12px/1.5 var(--mono); color: var(--muted); margin-top: 12px; overflow-wrap: anywhere; } .steps-full h3 { font-size: 21px; margin-bottom: 8px; } .steps-full p { color: var(--muted); font-size: 16px; margin: 0; } @media (max-width: 720px) { .steps-full article { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; } } .invariants { counter-reset: inv; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .invariants li { display: flex; gap: 14px; font-size: 15.5px; margin: 0; } .invariants li::before { counter-increment: inv; content: counter(inv); font: 700 17px/1.4 var(--mono); color: var(--accent-text); min-width: 18px; } /* ---------- tools (dark section) ---------- */ .dark { background: var(--dark); color: var(--dark-text); } .dark .muted, .dark .caption, .dark .lede, .dark .eyebrow { color: var(--dark-muted); } .dark .lede strong { color: var(--dark-text); } .dark .eyebrow .num { border-color: var(--dark-line-strong); } .dark code { background: var(--dark-chip); } .dark a { text-decoration-color: var(--dark-line-strong); } .dark .btn-outline { border-color: var(--dark-text); color: var(--dark-text); } .dark .btn-outline:hover { background: var(--dark-chip); } .dark .badge { border-color: var(--dark-line-strong); color: var(--dark-muted); } .dark .badge-write { background: var(--warn-on-dark); border-color: var(--warn-on-dark); color: var(--dark-code); } .dark .pill { border-color: var(--dark-line-strong); color: var(--dark-muted); } .dark h3 { color: var(--dark-text); } .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13.5px; margin: 0 0 36px; } .chain code { background: var(--dark-chip); padding: 5px 10px; border-radius: 7px; font-size: 13px; } .chain .arr { color: var(--accent-text); font-weight: 700; } .tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 28px; } @media (max-width: 900px) { .tools { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .tools { grid-template-columns: 1fr; } } .tool { display: block; text-decoration: none; background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 12px; padding: 16px; transition: border-color .15s ease; } .tool:hover { border-color: var(--dark-line-strong); } .tool.write { border-color: color-mix(in srgb, var(--warn-on-dark) 55%, transparent); } .tool .n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 14px; font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; } .tool p { font-size: 13.5px; color: var(--dark-muted); margin: 0; line-height: 1.5; } .dark .sub { color: var(--dark-muted); font-size: 15px; } .callouts { counter-reset: co; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; } .callouts li { display: flex; gap: 12px; font-size: 14.5px; color: var(--dark-muted); margin: 0; } .callouts li b { color: var(--dark-text); font-weight: 600; } .callouts li::before { counter-increment: co; content: counter(co); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 12px/22px var(--mono); text-align: center; } /* ---------- limits ---------- */ .limits-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; } @media (max-width: 960px) { .limits-grid { grid-template-columns: 1fr; } } .notyet { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--surface); } .notyet h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; } .notyet ul { font-size: 14.5px; color: var(--muted); margin: 0; padding-left: 1.2em; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--muted); flex: none; width: 24px; text-align: center; } .faq details[open] summary::after { content: "–"; } .faq summary:hover { color: var(--accent-text); } .faq .a { padding: 0 44px 24px 0; color: var(--muted); font-size: 16px; } .faq .a p:last-child { margin-bottom: 0; } .faq .a code { font-size: .85em; } @media (max-width: 600px) { .faq summary { font-size: 16.5px; } .faq .a { padding-right: 0; } } /* ---------- connecting ---------- */ .glyph { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .glyph svg { width: 20px; height: 20px; } .steps { display: flex; align-items: stretch; gap: 10px; margin: 28px 0; flex-wrap: wrap; } .steps .s { flex: 1; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; display: flex; gap: 12px; align-items: flex-start; } .steps .s b { font-family: var(--mono); font-size: 12px; color: var(--accent-text); padding-top: 3px; } .two-tone { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 0 0 24px; } .two-tone > div { padding: 20px 24px; font-size: 15px; } .two-tone .g { background: var(--ok-bg); } .two-tone .a { background: var(--warn-bg); border-left: 3px dashed var(--warn); } .two-tone b { display: block; margin-bottom: 4px; } .two-tone .g b { color: var(--ok); } .two-tone .a b { color: var(--warn); } @media (max-width: 720px) { .two-tone { grid-template-columns: 1fr; } } .conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .conn svg { width: 13px; height: 13px; } .conn-ok { color: var(--ok); background: var(--ok-bg); } .conn-warn { color: var(--warn); background: var(--warn-bg); outline: 1px dashed var(--warn); outline-offset: -1px; } .conn-err { color: var(--err); background: var(--err-bg); } .conn .re { font-size: 11px; font-weight: 600; border: 1px solid currentColor; border-radius: 5px; padding: 0 6px; margin-left: 4px; } .badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 12px; } /* ---------- built ---------- */ .tchain { display: flex; flex-direction: column; align-items: stretch; } .tchain .b { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 13px/1.4 var(--mono); } .tchain .b small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); } .tchain .b.tls { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .tchain .stem { width: 2px; height: 16px; background: var(--line-strong); margin-left: 22px; } .attrs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; } .stats div { border-top: 1px solid var(--line); padding-top: 14px; } .stats b { display: block; font: 700 40px/1 var(--mono); color: var(--accent-text); letter-spacing: -0.02em; } .stats span { font-size: 13px; color: var(--muted); } @media (max-width: 600px) { .stats { grid-template-columns: 1fr 1fr; } } /* ---------- feature copy beside screenshots (the app page) ---------- */ .feature h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.01em; } .feature p { font-size: 16px; color: var(--muted); } .feature p:last-child { margin-bottom: 0; } .feature + .feature { margin-top: 28px; } .sticky { position: sticky; top: calc(var(--header) + 24px); } @media (max-width: 960px) { .sticky { position: static; } } /* ---------- download ---------- */ .dl { position: relative; } .dl::before { content: ""; position: absolute; inset: 0; background: var(--accent-wash); pointer-events: none; } .dl .wrap { position: relative; } .dl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 44px 32px; text-align: center; max-width: 720px; margin: 0 auto; } .dl-card img { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 18px; box-shadow: 0 10px 30px var(--accent-shadow); } .dl-card h2 { font-size: 30px; margin-bottom: 6px; } .dl-card .ver { color: var(--muted); font-size: 15px; margin-bottom: 22px; } .dl-card .file { font: 12px/1.6 var(--mono); color: var(--muted); margin-top: 14px; overflow-wrap: anywhere; } .dl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 28px auto 0; } @media (max-width: 720px) { .dl-steps { grid-template-columns: 1fr; } } .dl-steps .s { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; } .dl-steps .s b { display: block; font: 700 22px/1 var(--mono); color: var(--accent-text); margin-bottom: 8px; } .dl-mcp { max-width: 900px; margin: 44px auto 0; background: var(--dark); color: var(--dark-text); border-radius: 20px; padding: 32px; } .dl-mcp h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; color: var(--dark-text); } .dl-mcp p { color: var(--dark-muted); font-size: 15px; } .dl-mcp code { background: var(--dark-chip); } .dl-mcp .pill { border-color: var(--dark-line-strong); color: var(--dark-muted); } .dl-mcp a { text-decoration-color: var(--dark-line-strong); } @media (max-width: 600px) { .dl-mcp { padding: 22px; } } .maker { text-align: center; font-size: 13px; color: var(--muted); margin-top: 32px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 32px 0 44px; font-size: 13px; color: var(--muted); } .site-footer .wrap { display: flex; flex-direction: column; gap: 12px; } .site-footer .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .site-footer img { width: 16px; height: 16px; border-radius: 4px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--ink); text-decoration: underline; } /* ---------- docs (mcp.html) ---------- */ .docs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; padding: 48px var(--gutter) 96px; align-items: start; } .toc { position: sticky; top: calc(var(--header) + 20px); font-size: 13.5px; max-height: calc(100vh - var(--header) - 40px); overflow-y: auto; } .toc .toc-h { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .toc ul { list-style: none; padding: 0; margin: 0 0 18px; } .toc li { margin: 0; } .toc a { display: block; padding: 5px 10px; border-left: 2px solid var(--line); text-decoration: none; color: var(--muted); } .toc a:hover { color: var(--ink); } .toc a.current { color: var(--ink); border-left: 2px solid var(--accent); font-weight: 600; } .toc ul ul a { padding-left: 22px; font-family: var(--mono); font-size: 12.5px; } .toc-mobile { display: none; } @media (max-width: 1023px) { .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; } .toc { display: none; } .toc-mobile { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 32px; } .toc-mobile a { font-size: 12.5px; font-family: var(--mono); text-decoration: none; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); } } .doc { max-width: 800px; } .doc h1 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 14px; } .doc h2 { font-size: 28px; margin: 72px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); } .doc h2:first-of-type { margin-top: 36px; } .doc h2.visually-hidden + h3 { margin-top: 24px; } .doc h3 { font-size: 18px; margin: 32px 0 8px; } .doc h3 code { font-size: 16px; background: none; padding: 0; } .doc h4 { margin-top: 24px; } .doc p, .doc li { font-size: 16px; } .doc .tool-block { border-left: 3px solid var(--line); padding-left: 18px; margin: 26px 0; } .doc .tool-block.write { border-left-color: var(--warn); } .doc .tool-block h3 { margin-top: 0; } .doc blockquote { margin: 0 0 1em; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; } .doc blockquote p { margin: 0; } .doc .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .doc .wf { list-style: none; padding: 0; counter-reset: wf; display: grid; gap: 10px; margin: 0 0 20px; } .doc .wf li { display: flex; align-items: flex-start; gap: 12px; } .doc .wf li::before { counter-increment: wf; content: counter(wf); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 12px/24px var(--mono); text-align: center; margin-top: 2px; } .doc .wf code.chip { border: 1px solid var(--line-strong); background: var(--surface); padding: 2px 8px; border-radius: 7px; } .doc .wf code.chip.dry { border-style: dashed; } .doc .wf code.chip.write { background: var(--warn); color: var(--on-warn); border-color: var(--warn); } .mini-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 12.5px/1.4 var(--mono); margin: 12px 0 20px; } .mini-diagram span { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; padding: 6px 10px; } .mini-diagram i { color: var(--muted); font-style: normal; } .run { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; } .run .h { font: 12.5px/1.5 var(--mono); color: var(--muted); margin-bottom: 8px; overflow-wrap: anywhere; } .run .h b { color: var(--ink); font-family: var(--sans); font-size: 16px; display: block; margin-bottom: 2px; } .run .f { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; font: 12.5px/1.4 var(--mono); color: var(--muted); } .run .f .okp { color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 2px 9px; } .field-list li { margin-bottom: .55em; } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation: none !important; } .btn:hover { transform: none; } }