/* tell.dev design system. One stylesheet for every page: tokens first, then the
base elements, then the shared pieces (lockup, header, footer, buttons,
fields, code, cards). Page stylesheets (home.css, docs.css, app.css, ...)
load after this one and only lay things out; they take every colour, size,
radius and shadow from the tokens below. The brand guide is
agent-tunnels-landing-v8-brand.md next to the repo. */
@font-face {
font-family: "Geist";
src: url("/fonts/geist.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/geist-mono.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: light;
/* faces */
--font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* colour: white paper, near-black ink, greys for hierarchy, one blue */
--paper: #ffffff;
--paper-2: #fafafa; /* page bands, table heads */
--paper-3: #f4f4f5; /* hover fills, pressed */
--ink: #0b0b0c; /* headings, primary text, primary button */
--ink-2: #3f3f46; /* body text */
--ink-3: #6b6b73; /* secondary text, captions (4.9:1 on white) */
--ink-4: #a1a1aa; /* disabled, separators drawn as text */
--line: #e7e7ea; /* hairlines, card borders */
--line-strong: #d4d4d8; /* field borders */
--accent: #2f5af0; /* the one colour: links, focus, the mark's dot (5.3:1 on white) */
--accent-hover: #2248d4;
--accent-soft: #eef2ff; /* focus halo, selected rows */
--ok: #15803d;
--warn: #b45309;
--danger: #c2261d;
--term: #0b0b0c; /* terminal and code panels */
--term-ink: #ececf0;
--term-dim: #8e8e97;
/* type scale (px): 12 13 14 16 18 22 28 36, display fluid */
--t-2xs: 12px;
--t-xs: 13px;
--t-sm: 14px;
--t-md: 16px;
--t-lg: 18px;
--t-xl: 22px;
--t-2xl: 28px;
--t-3xl: 36px;
--t-display: clamp(40px, 6.2vw, 68px);
--lh-tight: 1.08;
--lh-snug: 1.3;
--lh-body: 1.6;
--track-display: -0.045em;
--track-heading: -0.03em;
--track-body: -0.011em;
/* space: a 4px grid */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* shape */
--r-sm: 6px; /* chips, copy buttons */
--r-md: 8px; /* buttons, fields */
--r-lg: 12px; /* cards, code panels */
--r-xl: 16px; /* media: clips, screenshots */
--r-full: 999px;
--border: 1px solid var(--line);
--shadow-sm: 0 1px 2px rgba(11, 11, 12, .06);
--shadow-md: 0 1px 2px rgba(11, 11, 12, .04), 0 12px 32px -12px rgba(11, 11, 12, .16);
--ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
/* layout */
--shell: 1080px;
--shell-narrow: 720px;
--gutter: 24px;
--header-h: 64px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 600px) {
:root { --gutter: 16px; --header-h: 56px; }
}
/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
margin: 0;
background: var(--paper);
color: var(--ink-2);
font-family: var(--font-sans);
font-size: var(--t-md);
line-height: var(--lh-body);
letter-spacing: var(--track-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "calt", "kern";
}
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
h2 { font-size: var(--t-2xl); line-height: 1.15; letter-spacing: var(--track-heading); }
h3 { font-size: var(--t-lg); line-height: var(--lh-snug); letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.prose a, a.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.prose a:hover, a.link:hover { text-decoration-color: currentColor; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
:not(pre) > code { padding: .1em .35em; border-radius: 5px; background: var(--paper-3); color: var(--ink); }
img, svg, video { display: block; max-width: 100%; }
::selection { background: #dbe4ff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
hr { border: 0; border-top: var(--border); margin: var(--s-7) 0; }
.shell { width: min(var(--shell), 100% - 2 * var(--gutter)); margin-inline: auto; }
.shell-narrow { width: min(var(--shell-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--ink-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 20; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-size: var(--t-sm); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
/* ---- the lockup: the mark and the word, always together, never the word alone.
tell.dev */
.lockup { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); line-height: 1; }
.lockup-mark { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.lockup-word { font-size: 19px; font-weight: 650; letter-spacing: -.035em; }
.lockup-word span { color: var(--ink-3); font-weight: 500; }
.lockup.small .lockup-mark { width: 22px; height: 22px; border-radius: 6px; }
.lockup.small .lockup-word { font-size: 16px; }
/* ---- header: lockup left, plain text nav right, one button at most */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.site-header.scrolled, .site-header.ruled { border-bottom-color: var(--line); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--header-h); }
.site-nav { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); }
.site-nav a { padding: 8px 12px; border-radius: var(--r-md); color: var(--ink-3); transition: color .15s, background .15s; }
.site-nav a:hover { color: var(--ink); background: var(--paper-3); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .btn { margin-left: var(--s-2); }
@media (max-width: 600px) {
.site-nav { gap: 0; }
.site-nav a { padding: 8px 8px; }
.site-nav .hide-sm { display: none; }
}
/* ---- footer */
.site-footer { border-top: var(--border); margin-top: var(--s-9); }
.site-footer .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); padding-block: var(--s-6) var(--s-7); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--ink-3); }
.site-footer nav a:hover { color: var(--ink); }
.site-footer small { flex-basis: 100%; font-size: var(--t-2xs); color: var(--ink-4); }
/* ---- buttons: primary is ink, secondary is outlined; blue is for links, not buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-size: var(--t-sm); font-weight: 550; letter-spacing: -.01em; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s, transform .15s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #26262b; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--paper-2); border-color: var(--ink-4); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn-danger { background: var(--paper); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn-danger:hover { background: #fdf3f2; }
.btn-lg { height: 48px; padding: 0 22px; font-size: var(--t-md); border-radius: 10px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--t-xs); border-radius: var(--r-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .arrow { color: currentColor; opacity: .7; }
/* ---- fields */
.field { display: grid; gap: 6px; }
.field > label, .label { font-size: var(--t-xs); font-weight: 550; color: var(--ink); }
.field .hint { font-size: var(--t-xs); color: var(--ink-3); }
.input, .select, .textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-md); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field.error .input { border-color: var(--danger); }
.field.error .hint { color: var(--danger); }
/* ---- code: a dark panel with an optional copy button top right.
*/
.code { position: relative; border-radius: var(--r-lg); background: var(--term); color: var(--term-ink); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.7; white-space: pre; }
.code pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.code .code-copy + pre { padding-right: 84px; }
.code-copy { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); color: var(--term-ink); font: inherit; font-size: var(--t-2xs); cursor: pointer; transition: background .15s; }
.code-copy:hover { background: rgba(255, 255, 255, .14); }
.code-copy.copied { border-color: rgba(255, 255, 255, .5); }
.code .prompt { color: var(--term-dim); user-select: none; }
/* ---- cards and notes */
.card { border: var(--border); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); padding: var(--s-5); }
.card-raised { box-shadow: var(--shadow-md); }
.note { display: flex; gap: var(--s-3); padding: var(--s-4); border: var(--border); border-radius: var(--r-lg); background: var(--paper-2); font-size: var(--t-sm); color: var(--ink-2); }
.note.ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: #f3faf5; }
.note.warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); background: #fdf8f0; }
.note.error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: #fdf3f2; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: var(--border); border-radius: var(--r-full); background: var(--paper); font-size: var(--t-2xs); font-weight: 550; color: var(--ink-2); }
/* ---- agent logos (inline SVG, currentColor, same box everywhere) */
.logo { display: inline-block; width: 22px; height: 22px; flex: none; color: var(--ink); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); color: var(--ink-3); }
.logo-row .logo { width: 24px; height: 24px; color: var(--ink); opacity: .9; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}
/* ==== App components (added by the app-v8 redraw: dashboard, join, operator,
download, legal). Same tokens, same language; the brief lists them. ==== */
/* ---- segmented control: two to four mutually exclusive choices (OS, range) */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: var(--border); border-radius: var(--r-md); background: var(--paper-2); }
.segmented > button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-xs); font-weight: 550; cursor: pointer; transition: color .15s, background .15s; }
.segmented > button:hover { color: var(--ink); }
.segmented > button.active, .segmented > button.is-on, .segmented > button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
/* ---- list: a card of rows divided by hairlines (people, agents, notes, settings)
*/
.list { border: var(--border); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; }
.list:empty { display: none; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-4); background: var(--paper-2); border-bottom: var(--border); font-size: var(--t-xs); color: var(--ink-3); }
.list-head strong { color: var(--ink); font-weight: 600; }
.list > * + .list-head { border-top: var(--border); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-4); padding: 14px var(--s-4); }
.row + .row { border-top: var(--border); }
.row-title { color: var(--ink); font-weight: 550; font-size: var(--t-sm); line-height: 1.4; overflow-wrap: anywhere; }
.row-sub { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.row-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 10px var(--s-4); border-top: var(--border); background: var(--paper-2); }
@media (max-width: 600px) {
.row { padding: 12px var(--s-3); }
.row-actions { flex-direction: column; align-items: stretch; }
}
/* ---- status dot: grey idle, green live */
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--line-strong); vertical-align: middle; }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: #f3faf5; }
.badge .status-dot { margin: 0 6px 0 0; }
/* ---- switch: a button with aria-pressed; its text stays for screen readers */
.switch { position: relative; width: 40px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--r-full); background: var(--line-strong); color: transparent; font-size: 0; cursor: pointer; transition: background .15s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(11, 11, 12, .2); transition: transform .15s var(--ease); }
.switch[aria-pressed="true"] { background: var(--ink); }
.switch[aria-pressed="true"]::after { transform: translateX(16px); }
/* ---- empty state: one sentence where a list would be */
.empty { padding: var(--s-5) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: var(--t-sm); color: var(--ink-3); text-align: center; }
/* ---- toast: one line, bottom centre, disappears by itself */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: calc(100% - 2 * var(--gutter)); transform: translateX(-50%); padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-size: var(--t-sm); box-shadow: var(--shadow-md); animation: toast-in .2s var(--ease); }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
/* ---- dialog: a native