/* ─────────────────────────────────────────────────────────────
   Dual-readable UI, circa 2031.
   Two audiences share every screen: people (signal lime) and
   their agents (ultraviolet). The “Agent” view shows what an
   agent receives instead of what a person reads.
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: 'Geologica Variable'; font-style: oblique 0deg 12deg; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geologica Variable'; font-style: oblique 0deg 12deg; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-ext-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geologica Variable'; font-style: oblique 0deg 12deg; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-cyrillic-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica Variable'; font-style: oblique 0deg 12deg; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-cyrillic-ext-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hd-fade { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@view-transition { navigation: auto; }
:root {
  color-scheme: light;
  --paper: oklch(97.4% 0.009 95);
  --paper-2: oklch(94.2% 0.013 95);
  --ink: oklch(20.5% 0.028 275);
  --ink-2: oklch(44% 0.022 275);
  --ink-3: oklch(52% 0.018 275);
  --line: oklch(20.5% 0.028 275 / 0.09);
  --line-2: oklch(20.5% 0.028 275 / 0.17);
  --surface: oklch(100% 0 0 / 0.58);
  --surface-2: oklch(100% 0 0 / 0.86);
  --human: oklch(89% 0.2 127);
  --on-human: oklch(24% 0.07 132);
  --agent: oklch(58% 0.24 293);
  --agent-ink: oklch(47% 0.22 293);
  --agent-soft: oklch(58% 0.24 293 / 0.1);
  --warm: oklch(81% 0.13 58);
  --danger: oklch(54% 0.2 25);
  --ok: oklch(50% 0.14 150);
  --on-agent: white;
  --on-flash-ok: var(--on-human);
  --json-str: oklch(48% 0.13 150);
  --json-num: oklch(52% 0.16 55);
  --glow: oklch(100% 0 0 / 0.75);
  --shadow: 0 1px 0 var(--glow) inset, 0 24px 48px -32px oklch(22% 0.06 275 / 0.42);
  --shadow-lg: 0 1px 0 var(--glow) inset, 0 40px 80px -40px oklch(22% 0.08 275 / 0.55);
  --blend: multiply;
  --r: 26px;
  --font: 'Geologica Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  /* One distance from the header to the first thing on every page (breadcrumbs, heading or hero). */
  --page-top: clamp(20px, 3vw, 36px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: oklch(15.5% 0.022 278);
  --paper-2: oklch(20% 0.028 278);
  --ink: oklch(95.5% 0.01 95);
  --ink-2: oklch(77% 0.016 275);
  --ink-3: oklch(60% 0.02 275);
  --line: oklch(95% 0.01 95 / 0.08);
  --line-2: oklch(95% 0.01 95 / 0.15);
  --surface: oklch(22% 0.028 278 / 0.58);
  --surface-2: oklch(25% 0.032 278 / 0.9);
  --human: oklch(90% 0.2 127);
  --agent: oklch(68% 0.21 293);
  --agent-ink: oklch(79% 0.15 293);
  --agent-soft: oklch(68% 0.21 293 / 0.14);
  --glow: oklch(100% 0 0 / 0.05);
  --shadow: 0 1px 0 var(--glow) inset, 0 30px 60px -34px oklch(0% 0 0 / 0.7);
  --shadow-lg: 0 1px 0 var(--glow) inset, 0 40px 90px -40px oklch(0% 0 0 / 0.85);
  --danger: oklch(72% 0.17 25);
  --ok: oklch(80% 0.15 150);
  --on-agent: oklch(18% 0.05 293);
  --on-flash-ok: var(--ink);
  --json-str: var(--human);
  --json-num: oklch(82% 0.13 60);
  --blend: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: oklch(15.5% 0.022 278);
    --paper-2: oklch(20% 0.028 278);
    --ink: oklch(95.5% 0.01 95);
    --ink-2: oklch(77% 0.016 275);
    --ink-3: oklch(60% 0.02 275);
    --line: oklch(95% 0.01 95 / 0.08);
    --line-2: oklch(95% 0.01 95 / 0.15);
    --surface: oklch(22% 0.028 278 / 0.58);
    --surface-2: oklch(25% 0.032 278 / 0.9);
    --human: oklch(90% 0.2 127);
    --agent: oklch(68% 0.21 293);
    --agent-ink: oklch(79% 0.15 293);
    --agent-soft: oklch(68% 0.21 293 / 0.14);
    --glow: oklch(100% 0 0 / 0.05);
    --shadow: 0 1px 0 var(--glow) inset, 0 30px 60px -34px oklch(0% 0 0 / 0.7);
    --shadow-lg: 0 1px 0 var(--glow) inset, 0 40px 90px -40px oklch(0% 0 0 / 0.85);
    --danger: oklch(72% 0.17 25);
    --ok: oklch(80% 0.15 150);
    --on-agent: oklch(18% 0.05 293);
    --on-flash-ok: var(--ink);
    --json-str: var(--human);
    --json-num: oklch(82% 0.13 60);
    --blend: screen;
  }
}

/* ─── base ─── */
*, *::before, *::after { box-sizing: border-box; }
:root { accent-color: var(--agent); }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overflow-x: clip; }
html.tg { scroll-padding-top: 16px; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font); font-size: 16.5px; font-weight: 360; line-height: 1.55;
  font-variation-settings: 'SHRP' 0;
  color: var(--ink); background: transparent;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before { /* film grain */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: var(--blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
main { width: min(100% - 2 * var(--gutter) - env(safe-area-inset-left) - env(safe-area-inset-right), var(--maxw)); margin-inline: auto; flex: 1; padding-bottom: 72px; }
/* Vertical rhythm lives on top-level blocks only; nested sections never add their own margins. */
section { margin: 0; }
main > section, main > .hero-wrap + section { margin-block: 64px; }
main > section.hero, main > .hero-wrap { margin-block: 0; }
main > :last-child { margin-bottom: 0; }
a { color: var(--agent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; }
.i { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { line-height: 1.12; text-wrap: balance; overflow-wrap: break-word; }
h2 { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.032em; font-weight: 660; font-variation-settings: 'SHRP' 80; margin: 0 0 18px; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
.h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.012em; font-weight: 620; display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; }
p, li, dd, .lead, .excerpt, .prose, .tr-last, .summary { overflow-wrap: break-word; }
p { text-wrap: pretty; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 1; }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.narrow { max-width: 760px; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 12px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
:where(a, summary):focus-visible { border-radius: 8px; }
::selection { background: var(--human); color: var(--on-human); }

/* ─── ambient light ─── */
.aurora { position: fixed; inset: -25vmax; z-index: -2; pointer-events: none; opacity: .38; }
:root[data-theme='dark'] .aurora { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .aurora { opacity: .3; } }
.aurora i { position: absolute; width: 60vmax; aspect-ratio: 1; border-radius: 50%; }
.aurora i:nth-child(1) { background: radial-gradient(circle, var(--human) 0%, transparent 62%); top: 18%; left: 12%; animation: drift1 42s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: radial-gradient(circle, var(--agent) 0%, transparent 62%); top: 12%; right: 8%; animation: drift2 51s ease-in-out infinite alternate; opacity: .75; }
.aurora i:nth-child(3) { background: radial-gradient(circle, var(--warm) 0%, transparent 60%); bottom: 10%; left: 38%; animation: drift3 47s ease-in-out infinite alternate; opacity: .6; }
@keyframes drift1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 18vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vmax, -16vmax) scale(1.1); } }

/* ─── header ─── */
/* A plain bar flush with the top edge; its content lines up with the page grid (same edges as <main>). */
.top {
  --top-x: max(var(--gutter), (100% - var(--maxw)) / 2);
  position: sticky; top: 0; z-index: 61; display: flex; align-items: center; gap: 12px;
  view-transition-name: site-top; margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) calc(var(--top-x) + env(safe-area-inset-right)) 10px calc(var(--top-x) + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; flex: none; }
.mark .orbit { transform-origin: 20px 20px; transition: transform .6s var(--ease); }
.brand:hover .mark .orbit { transform: rotate(180deg); }
/* Flips when the circles cross (≈80 ms into the eased turn), in both directions. */
.mark .front { opacity: 0; transition: opacity 0s linear 80ms; }
.brand:hover .mark .front { opacity: 1; }
.word { font-size: 19px; letter-spacing: -0.04em; font-weight: 680; font-variation-settings: 'SHRP' 100; white-space: nowrap; }
.word b { font-weight: 300; font-variation-settings: 'SHRP' 0; }
/* Priority nav: links that don't fit wrap onto a second, clipped line and disappear whole. */
.top-nav { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 2px; height: 40px; overflow: clip; margin-left: 4px; }
.top-nav a:focus-visible { outline-offset: -2px; }
.top-nav a { height: 40px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 480; font-size: 15px; transition: background .2s, color .2s; }
.top-nav a .i { width: 16px; height: 16px; color: var(--agent); }
.top-nav a:hover, .top-nav a.on { background: var(--line); color: var(--ink); }
.top-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top-actions .btn { flex: none; }
.iconbtn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: transparent; border: 1px solid transparent; transition: background .2s; }
.iconbtn:hover { background: var(--line); }

.viewtoggle {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; height: 40px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); cursor: pointer; font: inherit; color: var(--ink-2);
}
.viewtoggle > span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; font-size: 13px; font-weight: 560; white-space: nowrap; transition: color .3s; }
.viewtoggle .i { width: 16px; height: 16px; }
.viewtoggle::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--human); transition: transform .45s var(--ease), background .45s; box-shadow: 0 4px 14px -6px var(--human); }
.viewtoggle .vt-h { color: var(--on-human); }
[data-view='agent'] .viewtoggle::before { transform: translateX(100%); background: var(--agent); box-shadow: 0 4px 14px -6px var(--agent); }
[data-view='agent'] .viewtoggle .vt-h { color: var(--ink-2); }
[data-view='agent'] .viewtoggle .vt-a { color: var(--on-agent); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.langs, .more { position: relative; }
.langs summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.langs summary:hover, .langs[open] summary { background: var(--line); color: var(--ink); }
.langs summary .i { width: 17px; height: 17px; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 190px; max-width: calc(100vw - 24px); display: grid; gap: 2px; padding: 6px;
  max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px; border: 1px solid var(--line-2); background: var(--paper); box-shadow: var(--shadow-lg);
  animation: pop .25s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu a, .menu button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 14px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.menu a:hover, .menu button:hover { background: var(--line); }
.menu a.on { font-weight: 680; }
.menu a.on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--human); margin-left: auto; }
.menu form { margin: 0; }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 540; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s;
}
.btn .i { width: 18px; height: 18px; }
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
input:is([type='radio'], [type='checkbox']):focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; box-shadow: none; }
.composer:focus-within { outline: 2px solid var(--agent); outline-offset: 2px; }
.faq summary:focus-visible { outline-offset: -4px; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -14px var(--ink); }
.btn-signal { background: var(--human); color: var(--on-human); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .55), 0 10px 26px -12px var(--human); }
.btn-agent { background: var(--agent); color: var(--on-agent); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .3), 0 10px 26px -12px var(--agent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
@media (hover: hover) {
  .btn-ink:hover { box-shadow: 0 14px 30px -12px var(--ink); }
  .btn-signal:hover { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .55), 0 14px 34px -10px var(--human); }
  .btn-agent:hover { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .3), 0 14px 34px -10px var(--agent); }
  .btn-ghost:hover { background: var(--surface-2); }
}
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.btn.sm .i { width: 16px; height: 16px; }
.btn.big { height: 56px; padding: 0 28px; font-size: 17px; }
.btn.wide { width: 100%; white-space: normal; height: auto; min-height: 44px; padding-block: 10px; text-align: center; line-height: 1.2; }
.btn.danger { color: var(--danger); }
@media (pointer: coarse) { .btn.sm { height: 40px; } }

/* ─── hero & page heads ─── */
.hero { padding: var(--page-top) 0 8px; max-width: 1000px; }
.hero.small { max-width: 760px; }
.hero > .display:first-child { margin-top: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 520; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.kicker .i { width: 15px; height: 15px; color: var(--agent); }
.kicker .glyph { width: 22px; height: 22px; border-radius: 7px; }
.kicker .glyph .i { width: 13px; height: 13px; color: var(--paper); }
.display {
  margin: 16px 0 22px; font-size: clamp(36px, 9.2vw, 96px); line-height: .94; letter-spacing: -0.048em;
  font-weight: 720; font-variation-settings: 'SHRP' 100;
}
.hero.small .display { font-size: clamp(32px, 7vw, 64px); line-height: 1; }
.grad {
  background: linear-gradient(100deg, var(--agent) 0%, oklch(62% 0.22 330) 42%, var(--warm) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variation-settings: 'SHRP' 0; font-style: oblique 8deg; font-weight: 600;
}
.lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 64ch; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--ink-2); }
.stats li { display: inline-flex; align-items: center; gap: 6px; }
.stats a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.stats .i { width: 15px; height: 15px; color: var(--agent); }
.pagehead { padding: var(--page-top) 0 8px; }
.crumbs + .pagehead { padding-top: 18px; }
.pagehead h1 { margin: 12px 0 14px; font-size: clamp(28px, 7.2vw, 60px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 720; font-variation-settings: 'SHRP' 100; max-width: 22ch; }
.pagehead h1:first-child { margin-top: 0; }
.pagehead .lead { font-size: clamp(16px, 1.8vw, 19px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: var(--page-top) 0 0; font-size: 13px; color: var(--ink-3); }
.crumbs .c { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs i { font-style: normal; opacity: .5; }

/* the intent field: a living conic edge */
.intent {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; max-width: 780px; margin: 30px 0 20px;
  padding: 7px 7px 7px 20px; border-radius: 999px; background: none; box-shadow: var(--shadow-lg);
}
.intent::before {
  content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface-2) 0 0) padding-box, conic-gradient(from var(--a), var(--human), var(--agent), var(--warm), var(--human)) border-box;
  animation: spin 7s linear infinite;
}
.intent::after { content: ''; position: absolute; inset: 10px 30px -18px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--a), var(--human), var(--agent), var(--warm), var(--human)); filter: blur(28px); opacity: .28; animation: spin 7s linear infinite; }
/* The living edge spins only when the field is in use. */
.intent:not(:hover, :focus-within)::before, .intent:not(:hover, :focus-within)::after { animation-play-state: paused; }
@keyframes spin { to { --a: 360deg; } }
.intent:focus-within { box-shadow: var(--shadow-lg), 0 0 0 6px var(--agent-soft); }
.intent > .i { color: var(--ink-3); width: 22px; height: 22px; }
.intent input, .intent input:focus, .intent input:focus-visible {
  flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent;
  font: inherit; font-size: 19px; font-weight: 400; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.intent input::-webkit-search-cancel-button, .intent input::-webkit-search-decoration { -webkit-appearance: none; }
.intent input::placeholder { color: var(--ink-3); transition: opacity .3s; }
.intent input.fade::placeholder { opacity: 0; }
.intent .btn { height: 50px; padding: 0 22px; flex: none; }
.intent .btn .i { display: none; }
.intent.small { margin: 0 0 14px; max-width: none; box-shadow: var(--shadow); }
.intent.small:focus-within { box-shadow: var(--shadow), 0 0 0 6px var(--agent-soft); }
.intent.small input { height: 44px; font-size: 17px; }
.intent.small .btn { height: 44px; }

/* ─── layout ─── */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sechead h2 { margin: 0; font-size: clamp(22px, 2.8vw, 30px); }
.sechead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 520; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sechead a .i { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.sechead a:hover .i { transform: translateX(3px); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 28px; }
.panels { display: grid; gap: 16px; }
.panels .duo { gap: 16px; }

/* ─── cards ─── */
.card {
  position: relative; padding: 22px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
@supports (corner-shape: squircle) {
  /* corner-shape is not inherited: every overlay that must follow a card's edge gets it too */
  .card, .tile, .price, .urlbox, .listing::after, .listing h3 a::before { corner-shape: squircle; }
  .card, .listing h3 a::before { border-radius: 44px; }
  .tile { border-radius: 34px; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 540; white-space: nowrap; text-decoration: none; flex: none;
}
.chip .i { width: 14px; height: 14px; }
.chip .glyph { width: 18px; height: 18px; border-radius: 6px; margin-left: -4px; }
.chip .glyph .i { width: 11px; height: 11px; }
.chip.xs { height: 20px; font-size: 11px; padding: 0 7px; vertical-align: 1px; }
.kind-offer { background: var(--human); color: var(--on-human); border-color: transparent; }
.kind-request { background: var(--ink); color: var(--paper); border-color: transparent; }
.chip.agent, .chip.via { color: var(--agent-ink); background: var(--agent-soft); border-color: color-mix(in oklab, var(--agent) 38%, transparent); }
.chip.agent, .agentdot { background-image: linear-gradient(110deg, transparent 30%, oklch(100% 0 0 / .45) 50%, transparent 70%); background-size: 250% 100%; animation: shimmer 4.5s ease-in-out infinite; }
.chip.agent, .agentdot { animation-iteration-count: 3; }
@keyframes shimmer { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.agentdot { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; color: var(--agent-ink); background-color: var(--agent-soft); border: 1px solid color-mix(in oklab, var(--agent) 38%, transparent); }
.agentdot .i { width: 14px; height: 14px; }
.glyph { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--paper); font-style: normal; }
.glyph .i { width: 15px; height: 15px; }
.cat { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.cat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* listing cards: a human face and a machine face */
.listing { display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.listing .human-face { display: flex; flex-direction: column; height: 100%; }
.listing::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--a), var(--human), var(--agent), var(--warm), var(--human));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s; animation: spin 6s linear infinite paused;
}
@media (hover: hover) {
  .listing:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .listing:hover::after { opacity: 1; animation-play-state: running; }
}
.listing:focus-within::after { opacity: 1; }
.listing header { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 14px; }
.listing h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.22; letter-spacing: -0.022em; font-variation-settings: 'SHRP' 40; }
.listing h3 a { color: inherit; text-decoration: none; }
.listing h3 a::before { content: ''; position: absolute; inset: 0; border-radius: var(--r); z-index: 1; }
.listing h3 a:focus-visible { outline: none; }
.excerpt { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.listing footer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.price { display: inline-block; padding: 6px 12px; border-radius: 12px; font-family: var(--mono); font-size: 15.5px; font-weight: 640; letter-spacing: -0.02em; white-space: nowrap; background: var(--line); }
.offer .price { background: color-mix(in oklab, var(--human) 38%, transparent); color: var(--ink); }
.request .price { background: color-mix(in oklab, var(--warm) 32%, transparent); }
.price.big { font-size: 22px; padding: 8px 14px; margin: 4px 0 14px; white-space: normal; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--ink-2); }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta .i { width: 15px; height: 15px; opacity: .75; }
.byline { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); }
.byline .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 520; }
.byline .via { display: inline-flex; vertical-align: -2px; color: var(--agent-ink); }
.byline .via .i { width: 14px; height: 14px; }
.byline time { margin-left: auto; flex: none; white-space: nowrap; }
.machine-face { display: none; color: var(--ink); text-decoration: none; }
.machine-face pre { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.jk { color: var(--agent-ink); }
.js { color: var(--json-str); }
.jn { color: var(--json-num); }

/* the agent view */
[data-view='agent'] .human-face { display: none; }
[data-view='agent'] .machine-face { display: block; }
[data-view='agent'] body {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; background-attachment: fixed;
}
[data-view='agent'] .aurora { opacity: .14; }
[data-view='agent'] .card { border-style: dashed; border-color: color-mix(in oklab, var(--agent) 45%, transparent); background: color-mix(in oklab, var(--surface-2) 88%, var(--agent)); }
[data-view='agent'] .display, [data-view='agent'] .pagehead h1, [data-view='agent'] h2 { font-family: var(--mono); letter-spacing: -0.05em; font-weight: 600; }
[data-view='agent'] .grad { font-style: normal; }
[data-view='agent'] .listing:hover::after { opacity: 0; }

/* ─── agent faces: each page as the agent gets it (data + tool calls), not the human copy in mono ─── */
:root:not([data-view='agent']) .for-agent { display: none !important; }
[data-view='agent'] .for-human { display: none !important; }
.crumbs + .for-human + .agenthead { padding-top: 18px; }
.agenthead .ah-title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: clamp(26px, 5.4vw, 52px); line-height: 1.05;
  font-weight: 600; letter-spacing: -0.045em; color: var(--agent-ink); overflow-wrap: anywhere;
}
.agenthead .ah-title .i { flex: none; width: .72em; height: .72em; }
.agenthead .toolcall { margin-top: 20px; max-width: 780px; }
.toolcall {
  margin: 0; min-width: 0; padding: 14px 16px 16px; border-radius: 18px;
  border: 1px dashed color-mix(in oklab, var(--agent) 50%, transparent);
  background: color-mix(in oklab, var(--surface-2) 86%, var(--agent));
}
.toolcall figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.tc-name { font: 650 14px/1.3 var(--mono); color: var(--agent-ink); }
.tc-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; padding: 3px 9px; border-radius: 999px; }
.tc-mode::before, .toolchips li::before, .toolchips-legend span::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tc-mode.auto, .toolchips .auto, .toolchips-legend .auto { color: var(--ok); }
.tc-mode.confirm, .toolchips .confirm, .toolchips-legend .confirm { color: var(--agent-ink); }
.tc-mode.always, .toolchips .always, .toolchips-legend .always { color: var(--danger); }
.tc-mode.auto { background: color-mix(in oklab, var(--ok) 12%, transparent); }
.tc-mode.confirm { background: var(--agent-soft); }
.tc-mode.always { background: color-mix(in oklab, var(--danger) 12%, transparent); }
.toolcall pre { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-http { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.tc-http a { color: var(--agent-ink); overflow-wrap: anywhere; text-underline-offset: 3px; }
.tc-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.agentsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 18px; }
.agent-hero .urlbox { margin-top: 26px; max-width: 640px; }
.ah-connect { margin: 14px 0 0; }
.ah-connect a { display: inline-flex; align-items: center; gap: 8px; color: var(--agent-ink); font-weight: 560; text-decoration: none; }
.ah-connect .i { width: 16px; height: 16px; }
.toolchips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 26px 0 10px; }
.toolchips li {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.toolchips li code { font-size: 12.5px; color: var(--ink); }
.toolchips-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 12.5px; }
.toolchips-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lf-side .act.for-agent .note { margin: 0 0 10px; }
.tc-inline { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--agent-ink); overflow-wrap: anywhere; }
.tc-inline .i { flex: none; width: 15px; height: 15px; }
.sechead h2 > span, .how > h2 > span { display: block; }
.sechead h2 .for-agent, .how > h2 .for-agent { font-size: .72em; letter-spacing: -0.02em; }
.agent-error { margin: var(--page-top) 0 0; padding: 18px 20px; border-radius: 18px; font-size: 15px; border: 1px dashed color-mix(in oklab, var(--agent) 50%, transparent); background: color-mix(in oklab, var(--surface-2) 86%, var(--agent)); white-space: pre-wrap; overflow-wrap: anywhere; }
.lf-main .machine-face .kicker { margin-bottom: 12px; }
.lf-main .machine-face .note { margin-top: 14px; }

/* ─── tiles & pills ─── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.tile {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 520; line-height: 1.25;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.tile span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.tile em { flex: none; margin-left: auto; font: normal 520 13px var(--mono); color: var(--ink-3); transition: color .3s; }
@media (hover: hover) {
  .tile:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
  .tile:hover .glyph { background: var(--human); color: var(--on-human); }
  .tile:hover em { color: var(--paper); }
}
.also { font-size: 14px; color: var(--ink-3); margin-top: 16px; line-height: 1.9; }
.also b { font-weight: 560; color: var(--ink-2); }
.also a { color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; white-space: nowrap; font-size: 14.5px; font-weight: 480; cursor: pointer; transition: background .2s; }
.pill:hover { background: var(--surface-2); }
.pill.on, .pill:has(input:checked) { background: var(--ink); color: var(--paper); border-color: transparent; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill input:checked + span { font-weight: 640; }
.pill:has(input:focus-visible) { outline: 2px solid var(--agent); outline-offset: 2px; }
.switchkind { margin: 0 0 22px; }
.switchkind a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.switchkind .i { width: 16px; height: 16px; }

/* ─── how it works ─── */
.how h2 { max-width: 20ch; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps .duet { display: flex; align-items: center; max-width: 170px; margin-bottom: 18px; }
.node { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.node .i { width: 18px; height: 18px; }
.node.human { background: var(--human); color: var(--on-human); }
.node.agent { background: var(--agent); color: var(--on-agent); box-shadow: 0 0 0 5px var(--agent-soft); }
.wire { flex: 1; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 10px); opacity: .6; }
.wire.pulse { height: 3px; border-radius: 3px; opacity: 1; background: linear-gradient(90deg, var(--agent), var(--human), var(--agent)); background-size: 200% 100%; animation: flow 2.2s linear infinite; }
@keyframes flow { to { background-position: -200% 0; } }
.steps b { font-size: 13px; color: var(--agent-ink); }
.steps h3 { margin: 8px 0 8px; font-size: 21px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.agent-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 44px); background: radial-gradient(120% 160% at 100% 0%, var(--agent-soft), transparent 55%), var(--surface); }
.agent-cta h2 { margin: 10px 0 8px; }
.agent-cta p { color: var(--ink-2); margin: 0; }
.agent-cta > div:last-child { display: grid; gap: 12px; justify-items: start; }
.urlbox { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 7px 7px 7px 16px; border-radius: 18px; background: var(--paper-2); border: 1px dashed color-mix(in oklab, var(--agent) 55%, transparent); }
.urlbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--agent-ink); }
.urlbox .btn { flex: none; }
.btn.copied { color: var(--ok); }
.agents-hero .urlbox { margin-top: 28px; max-width: 640px; }
.cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.empty { text-align: center; padding: 44px 22px; display: grid; justify-items: center; gap: 16px; }
.empty p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0; font-size: 13px; color: var(--ink-2); }
.count { font-size: 13px; color: var(--ink-2); margin: 18px 0 12px; }

/* ─── FAQ ─── */
.faq { max-width: 860px; }
.faq details { margin-bottom: 10px; padding: 0; }
.faq summary { padding: 18px 56px 18px 22px; font-size: 17px; font-weight: 560; letter-spacing: -0.01em; line-height: 1.35; position: relative; border-radius: inherit; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font: 400 24px var(--mono); color: var(--agent); transition: rotate .3s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); }

/* ─── listing page ─── */
.lf { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 18px; }
.lf-main { padding: clamp(22px, 3.4vw, 40px); }
.lf-main .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-main h1 { margin: 18px 0 14px; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.042em; font-weight: 700; font-variation-settings: 'SHRP' 90; }
.lf-main .meta { margin-bottom: 18px; }
.prose { font-size: 17px; line-height: 1.65; max-width: 64ch; }
.prose p { margin: 0 0 14px; }
.prose h2 { font-size: 22px; margin: 28px 0 10px; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--human); }
.orig { margin: 0 0 18px; font-size: 14px; color: var(--ink-2); }
.orig summary, p.orig { display: flex; align-items: flex-start; gap: 8px; }
.orig summary .i, p.orig .i { width: 17px; height: 17px; margin-top: 1px; }
.orig u { text-underline-offset: 3px; white-space: nowrap; }
.orig > div { margin-top: 12px; padding: 16px; border-radius: 18px; background: var(--paper-2); border-left: 3px solid var(--agent); }
.orig > div h2 { font-size: 18px; margin: 0 0 8px; }
.links { padding-left: 18px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 12px; margin: 26px 0 0; padding-top: 20px; border-top: 1px dashed var(--line-2); }
.facts div { display: grid; gap: 2px; align-content: start; }
.facts dt { font: 520 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 500; }
.lf-side { display: grid; gap: 14px; position: sticky; top: 84px; }
@media (max-height: 760px) { .lf-side { position: static; } }
html.tg .lf-side { top: 16px; }
.author .who { display: flex; align-items: center; gap: 12px; }
.author .who > div { min-width: 0; }
.author .name { font-size: 20px; font-weight: 640; letter-spacing: -0.02em; margin: 2px 0 0; overflow-wrap: anywhere; }
.author p { margin: 0; }
.author .act { margin-top: 18px; }
.side-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); }
.agentnote { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--agent-ink); }
.agentnote .i { width: 17px; height: 17px; margin-top: 2px; }
.compose textarea { margin-bottom: 10px; }
.compose .note { margin-top: 10px; }
.owner-actions { display: grid; gap: 8px; }
.owner-actions form { margin: 0; }
.owner-actions .btn { width: 100%; }
.note { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.hint p { display: flex; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.hint .i { color: var(--agent); width: 17px; height: 17px; margin-top: 2px; }
.hint a { font-size: 14px; font-weight: 540; display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
.hint a .i { width: 15px; height: 15px; margin: 0; }
.report { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; font-size: 13.5px; color: var(--ink-3); text-decoration: none; }
.report .i { width: 15px; height: 15px; }

/* ─── forms ─── */
input, select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2);
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
/* Zero-specificity defaults: any component rule (.intent input, .maxprice input…) wins without a fight. */
:where(input:not([type='radio'], [type='checkbox'], [type='hidden'])), :where(select) { height: 48px; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--agent); box-shadow: 0 0 0 4px var(--agent-soft); }
input[type='radio'], input[type='checkbox'] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; }
fieldset { min-width: 0; }
.f { display: grid; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.f > span, .f > legend { font-size: 13.5px; font-weight: 580; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 0; }
.f i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.f small, .hintline { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink-3); }
.f small .i, .hintline .i { width: 15px; height: 15px; margin-top: 1px; }
.ferr { font-style: normal; color: var(--danger); font-weight: 560; font-size: 13px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 12px; row-gap: 0; }
.listingform .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listingform .when-row .tz { grid-column: span 2; }
.listingform, .narrow.card { max-width: 820px; }
.kindpick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.kindpick legend { font-size: 13.5px; font-weight: 580; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.kindpick label { position: relative; display: grid; }
.kindpick input { position: absolute; opacity: 0; }
.kindpick span { display: grid; place-items: center; min-height: 64px; padding: 14px 16px; border-radius: 20px; border: 1.5px solid var(--line-2); text-align: center; text-wrap: balance; overflow-wrap: break-word; cursor: pointer; font-size: 16px; line-height: 1.25; transition: background .25s, color .25s, border-color .25s; }
.kindpick input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kindpick input[value='offer']:checked + span { background: var(--human); color: var(--on-human); border-color: transparent; }
.kindpick input:focus-visible + span { outline: 2px solid var(--agent); outline-offset: 2px; }
.listingform:has(input[name='kind'][value='request']:checked) .only-offer,
.listingform:has(input[type='hidden'][name='kind'][value='request']) .only-offer,
.listingform:has(input[name='kind'][value='offer']:checked) .only-request,
.listingform:has(input[type='hidden'][name='kind'][value='offer']) .only-request { display: none; }
.langs-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.langs-pick legend { width: 100%; margin-bottom: 6px; }
.langs-pick .pill { height: 38px; }
.langs-pick > input:not([type='checkbox']) { flex: 1 1 160px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.formfoot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 10px; }
.formfoot p { display: flex; gap: 6px; align-items: flex-start; margin: 0; flex: 1 1 260px; }
.formfoot .i { width: 16px; height: 16px; color: var(--agent); margin-top: 1px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper-2); }
.seg label { position: relative; display: grid; min-width: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.seg span { display: grid; place-items: center; min-width: 0; overflow-wrap: anywhere; min-height: 34px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; transition: background .25s, color .25s; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--agent); outline-offset: 1px; }
.searchform { margin: 6px 0 0; padding: 14px; }
.filters { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) max-content; gap: 10px; align-items: center; }
/* Explicit widths everywhere: engines size appearance:none selects differently (Safari ignores the chevron padding). */
.filters select { width: 100%; min-width: 0; height: 42px; padding-top: 0; padding-bottom: 0; border-radius: 999px; font-size: 14.5px; text-overflow: ellipsis; }
.filters .seg { height: 42px; align-items: center; flex-wrap: nowrap; }
.maxprice { display: flex; align-items: stretch; min-width: 0; height: 42px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.maxprice:focus-within { border-color: var(--agent); box-shadow: 0 0 0 4px var(--agent-soft); }
.maxprice input, .maxprice input:focus, .maxprice select, .maxprice select:focus { height: 100%; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; }
.maxprice input { flex: 1 1 auto; width: 0; min-width: 0; padding-left: 16px; font-size: 14.5px; }
.maxprice select { flex: 0 0 132px; width: 132px; border-left: 1px solid var(--line-2); }
.filter-actions { display: flex; gap: 8px; }
.filter-actions .btn { height: 42px; }
@media (min-width: 761px) and (max-width: 1099px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .seg { grid-column: 1 / -1; justify-self: start; }
  .filter-actions { justify-self: start; }
}
.radio { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 2px 0; font-weight: 400; color: var(--ink); cursor: pointer; }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
form.inline input { flex: 1 1 180px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; }

.flash { display: flex; align-items: center; gap: 10px; margin: 16px 0; padding: 12px 16px; border-radius: 18px; font-weight: 520; }
.flash .i { width: 18px; height: 18px; }
.flash.ok { background: color-mix(in oklab, var(--human) 40%, transparent); color: var(--on-flash-ok); }
.flash.err { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.flash.demo-note { background: var(--agent-soft); color: var(--agent-ink); font-weight: 480; align-items: flex-start; }
.flash.demo-note .i { flex: none; margin-top: 2px; }
/* Example listings: a quiet dashed tag, never mistaken for a status. */
.chip.demo { border-style: dashed; color: var(--ink-2); background: transparent; }

/* ─── login, consent ─── */
.loginbox { display: grid; gap: 14px; justify-items: start; margin-top: 26px; padding: 28px; }
.loginbox p { margin: 0; }
.devlogin { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.devlogin .kicker { width: 100%; }
.devlogin input[name='name'] { flex: 1 1 160px; }
.consent .card { margin-top: 24px; }
.permlist { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 2px; }
.permlist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.permlist li > span { flex: 1 1 14ch; min-width: 0; }
.mode { margin-left: auto; font: 600 12px var(--mono); padding: 3px 9px; border-radius: 999px; background: var(--line); white-space: nowrap; }
.mode.auto { background: color-mix(in oklab, var(--human) 45%, transparent); }
.mode.confirm { background: var(--agent-soft); color: var(--agent-ink); }
.mode.off { color: var(--danger); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

/* ─── inbox & threads ─── */
.threads { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.threadrow { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; transition: transform .3s var(--ease); }
@media (hover: hover) { .threadrow:hover { transform: translateX(3px); } }
.threadrow.unread { border-color: color-mix(in oklab, var(--agent) 60%, transparent); }
.avatar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 2px solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box, conic-gradient(from 200deg, var(--human), var(--agent), var(--warm), var(--human)) border-box;
  color: var(--paper); font-weight: 720; font-size: 17px;
}
.tr-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-top time { margin-left: auto; flex: none; font-size: 12.5px; color: var(--ink-3); }
.dot { flex: none; font-style: normal; font-size: 11px; font-weight: 640; padding: 2px 8px; border-radius: 999px; background: var(--agent); color: var(--on-agent); }
.tr-about { overflow-wrap: anywhere; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-last { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-last i { font-style: normal; color: var(--ink-3); }

/* A conversation is an app screen: header, messages that fill the space, composer at the bottom. */
.threadview main { max-width: 860px; display: flex; flex-direction: column; min-height: calc(100dvh - 84px); padding-bottom: 20px; }
.threadview .foot { display: none; }
.threadhead {
  position: sticky; top: 72px; z-index: 6; display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; padding: 10px 12px;
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--paper);
}
.threadhead .back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--line); color: var(--ink); flex: none; }
.th-main { flex: 1; min-width: 0; }
.th-name { margin: 0; font-weight: 640; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threadhead .tl { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.tl-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-price { flex: none; font-size: 12.5px; color: var(--ink); }
.threadhead .more { flex: none; }
.threadhead .more summary { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.threadhead .more summary:hover, .threadhead .more[open] summary { background: var(--line); }
.messages { flex: 1; list-style: none; margin: 0; padding: 14px 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.msg { display: flex; animation: msgin .45s var(--ease) both; }
@keyframes msgin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.msg.mine { justify-content: flex-end; }
.bubble { max-width: min(80%, 620px); padding: 12px 16px 8px; border-radius: 24px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.bubble p { margin: 0 0 6px; }
.mine .bubble { background: var(--ink); color: var(--paper); border-color: transparent; border-bottom-right-radius: 8px; }
.mine .bubble a { color: inherit; text-decoration-thickness: 1.5px; }
.theirs .bubble { border-bottom-left-radius: 8px; }
.by-agent .bubble { border: 1.5px dashed var(--agent); background: color-mix(in oklab, var(--surface-2) 86%, var(--agent)); }
.mine.by-agent .bubble { background: color-mix(in oklab, var(--ink) 82%, var(--agent)); border-color: color-mix(in oklab, var(--agent) 70%, white); }
.agentlabel { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--agent-ink); }
.agentlabel .i { width: 13px; height: 13px; }
.mine .agentlabel { color: inherit; opacity: .75; }
.bubble time { display: block; margin-top: 2px; font-size: 11px; opacity: .55; text-align: right; }
.bubble .orig { margin: 6px 0 2px; font-size: 12px; }
.bubble .orig summary { display: block; opacity: .75; }
.bubble .orig > div, .bubble .orig p { font-size: 13.5px; }
.msg.contacts .bubble { background: color-mix(in oklab, var(--human) 55%, var(--surface-2)); color: var(--on-human); border: 0; }
.contacts-title { display: flex; gap: 6px; align-items: center; font-weight: 620; }
.msg.contacts pre { margin: 6px 0; font-size: 14px; white-space: pre-wrap; }
.composer { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 28px; box-shadow: var(--shadow-lg); background: color-mix(in oklab, var(--surface-2) 96%, transparent); }
.composer textarea, .composer textarea:focus { border: 0; background: transparent; box-shadow: none; padding: 12px 0; min-height: 46px; max-height: 220px; resize: none; }
.composer .btn { height: 46px; flex: none; }
.shareline { display: flex; justify-content: center; margin: 12px 0 0; font-size: 14px; }
.shareline form { margin: 0; }
.shareline span, .shareline a { display: inline-flex; gap: 6px; align-items: center; }
.shareline .i { width: 16px; height: 16px; }
.pending { display: grid; gap: 10px; }
.pa { border: 1.5px dashed var(--agent); }
.pa .summary { margin: 8px 0 10px; font-size: 15px; }
.pa .summary p { margin: 0 0 6px; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pa.executed, .pa.rejected, .pa.expired, .pa.failed { opacity: .7; border-style: solid; border-color: var(--line); }

/* ─── profile & agent settings ─── */
.agentlink { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--ink); text-decoration: none; background: radial-gradient(120% 180% at 100% 0%, var(--agent-soft), transparent 60%), var(--surface); }
.agentlink > .i:first-child { width: 28px; height: 28px; color: var(--agent); }
.agentlink span { display: grid; flex: 1; min-width: 0; }
.agentlink small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.mylistings { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mylistings li { padding: 14px 16px; display: grid; gap: 6px; }
.mylistings a { color: var(--ink); text-decoration: none; }
.st { font-weight: 600; }
.st.active { color: var(--ok); }
.st.expired, .st.closed { color: var(--ink-3); }
.st.hidden { color: var(--danger); }
.perm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: 10px 24px; padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.perm-label { font-weight: 520; line-height: 1.35; }
.perm-label small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; }
.seg3 span { border-radius: 15px; font-size: 13.5px; padding: 6px 8px; }
.seg3 .slot { min-height: 34px; }
.perms .hintline { margin: 16px 0; }
.connected { list-style: none; padding: 0; margin: 0; }
.connected li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.connected li > span { min-width: 0; overflow-wrap: anywhere; }
.connected form { margin: 0; }
.newtoken { margin: 10px 0 14px; }
.newtoken p { font-weight: 560; margin: 0 0 8px; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.journal { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.journal td { padding: 9px 8px; border-bottom: 1px dashed var(--line-2); vertical-align: top; }
.journal tr.denied .st, .journal tr.error .st { color: var(--danger); }
.journal tr.pending .st { color: var(--agent-ink); }
.journal tr.ok .st { color: var(--ok); }

/* ─── agents page ─── */
.connect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.step.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px 28px; align-items: center; }
.step h3 { margin: 0 0 8px; font-size: 19px; }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.codes { display: grid; gap: 8px; min-width: 0; }
pre.code { margin: 0; padding: 12px 14px; border-radius: 14px; background: oklch(20% 0.028 275); color: oklch(95% 0.01 95); border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-x: auto; }
.tools { padding: 8px 22px; }
.tool { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--line-2); }
.tool:last-child { border-bottom: 0; }
.tool code { color: var(--agent-ink); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tool span { color: var(--ink-2); }
.safety h2, .examples h2 { display: flex; gap: 10px; align-items: center; font-size: 22px; }
.safety h2 .i { width: 24px; height: 24px; color: var(--agent); }
.safety ul { padding-left: 18px; margin: 0; display: grid; gap: 10px; color: var(--ink-2); }
.examples .bubble { max-width: none; margin: 0 0 10px; background: var(--ink); color: var(--paper); border-bottom-right-radius: 8px; box-shadow: none; }
.apinote { margin-top: 40px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric { display: grid; gap: 6px; padding: 18px; align-content: start; }
.metric b { font-size: 28px; letter-spacing: -0.03em; }
.report-item p { margin: 6px 0; }
.report-item .pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ─── hero: one listing, two faces ─── */
.hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-duo { display: none; }

/* ─── footer ─── */
.foot { padding: 48px var(--gutter) 40px; border-top: 1px solid var(--line); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--paper-2) 70%, transparent)); }
.foot-grid { width: min(100%, var(--maxw)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px 40px; }
.foot-brand p { color: var(--ink-2); font-size: 14px; max-width: 36ch; }
.foot nav { display: grid; gap: 2px; align-content: start; }
/* Column headings share one 34px row with the switch, so every column starts on the same line. */
.foot nav h2 { min-height: 34px; display: flex; align-items: center; font-size: 12px; line-height: 1.4; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
.foot nav a { padding: 4px 0; color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.foot nav a:hover { color: var(--ink); }
.foot-tabs { display: flex; gap: 22px; min-height: 34px; align-items: center; margin: 0 0 6px; }
.foot-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* Same type as the other footer headings; the active one is ink with a lime underline. */
.foot-tabs label {
  position: relative; padding: 4px 0; cursor: pointer; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); transition: color .2s;
}
.foot-tabs label::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--human);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.foot-tabs label:hover { color: var(--ink-2); }
.foot-tabs input:checked + label { color: var(--ink); }
.foot-tabs input:checked + label::after { transform: scaleX(1); }
.foot-tabs input:focus-visible + label { outline: 2px solid var(--agent); outline-offset: 3px; border-radius: 4px; }
/* Reads top to bottom, then the second column. */
.fk { columns: 2; column-gap: 24px; }
.fk a { display: block; break-inside: avoid; }
.fk-request, .foot-cats:has(#fk-request:checked) .fk-offer { display: none; }
.foot-cats:has(#fk-request:checked) .fk-request { display: block; animation: fk-in .3s var(--ease); }
.foot-cats:has(#fk-offer:checked) .fk-offer { animation: fk-in .3s var(--ease); }
@keyframes fk-in { from { opacity: 0; translate: 0 4px; } }
.foot-langs { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 10px; }
.foot-langs a { font-size: 13px !important; }
.foot-note { width: min(100%, var(--maxw)); margin: 30px auto 0; font-size: 12px; color: var(--ink-3); }

/* ─── mobile dock ─── */
.dock {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  width: min(100% - 24px, 420px); display: none; view-transition-name: site-dock; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--surface-2) 86%, transparent);
  backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 24px 48px -16px oklch(10% 0.05 275 / .45), 0 1px 0 var(--glow) inset;
}
.dock a { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 1px; height: 54px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 10.5px; font-weight: 560; transition: background .25s, color .25s; }
.dock a .i { width: 22px; height: 22px; }
.dock a span { max-width: 100%; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock a.on { color: var(--ink); background: var(--line); }
.dock .dock-new { flex: 0 0 54px; margin: 0 4px; background: var(--human); color: var(--on-human); box-shadow: 0 8px 20px -8px var(--human); }
.dock .dock-new .i { width: 26px; height: 26px; }
.dock .dock-new.on { background: var(--human); color: var(--on-human); }
.badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--agent); color: var(--on-agent); font-style: normal; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--paper); }
.iconbtn .badge { top: 0; right: 0; }

/* ─── motion ─── */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.975); } }
}
::view-transition-group(site-top), ::view-transition-group(site-dock) { animation: none; }
::view-transition-old(root) { animation: 160ms ease both vt-out; }
::view-transition-new(root) { animation: 280ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ─── responsive ─── */
@media (min-width: 1180px) {
  .hero-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 56px; }
  .hero-wrap .display { font-size: clamp(56px, 5.4vw, 84px); }
  .hero-duo { display: block; position: relative; height: 560px; perspective: 1400px; margin-top: 56px; }
  /* Two cards, like the logo's two circles: switching Human ↔ Agent swaps which one is in front.
     z-index interpolates, so the cards change places early in the move — the same beat as the logo. */
  .hd-machine, .hd-human {
    position: absolute;
    transition: transform .9s var(--ease), z-index .9s var(--ease), opacity .6s var(--ease), filter .6s var(--ease),
      max-height .9s var(--ease), --hd-fade .9s var(--ease), box-shadow .9s var(--ease);
  }
  .hd-machine {
    z-index: 1; top: 0; right: 0; width: 360px; max-height: 360px; overflow: hidden;
    transform: rotateY(-14deg) rotateX(6deg) translateZ(-60px);
    border-style: dashed; border-color: color-mix(in oklab, var(--agent) 50%, transparent); background: color-mix(in oklab, var(--surface-2) 85%, var(--agent));
    -webkit-mask: linear-gradient(#000 var(--hd-fade), transparent); mask: linear-gradient(#000 var(--hd-fade), transparent);
  }
  .hd-machine pre { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; white-space: pre; }
  .hd-human { z-index: 3; left: 0; bottom: 0; width: 380px; transform: rotateY(10deg) rotateX(4deg) translateZ(40px); }
  .hd-human { animation: floaty 9s ease-in-out infinite alternate; }
  /* Opaque: this card sits on top of the JSON card. */
  .hd-human .listing { box-shadow: var(--shadow-lg); background: linear-gradient(var(--surface-2), var(--surface-2)), var(--paper); }
  /* "Example" tag while the board is empty: sits on the card's top edge. */
  .hd-tag { position: absolute; z-index: 2; top: -13px; right: 20px; background: linear-gradient(var(--surface-2), var(--surface-2)), var(--paper); box-shadow: var(--shadow); }
  .hero-duo:hover .hd-machine { transform: rotateY(-6deg) translateZ(0) translateX(-10px); }
  .hero-duo:hover .hd-human { transform: rotateY(4deg) translateZ(60px) translateY(10px); }

  /* Agent view: the JSON comes to the front (fully shown), the person's card steps back. */
  [data-view='agent'] .hd-machine {
    z-index: 3; --hd-fade: 100%; max-height: 460px; box-shadow: var(--shadow-lg);
    background: linear-gradient(color-mix(in oklab, var(--surface-2) 88%, var(--agent)), color-mix(in oklab, var(--surface-2) 88%, var(--agent))), var(--paper);
    transform: translate(-120px, 140px) rotateY(-8deg) rotateX(3deg) translateZ(60px);
  }
  [data-view='agent'] .hd-human { z-index: 1; opacity: .6; filter: saturate(.6); transform: translate(110px, -170px) rotateY(12deg) rotateX(5deg) translateZ(-70px) scale(.94); }
  [data-view='agent'] .hero-duo:hover .hd-machine { transform: translate(-120px, 130px) rotateY(-3deg) translateZ(80px); }
  [data-view='agent'] .hero-duo:hover .hd-human { transform: translate(120px, -170px) rotateY(8deg) translateZ(-50px) scale(.94); }
  [data-view='agent'] .hd-human .human-face { display: flex; }
  [data-view='agent'] .hd-human .machine-face { display: none; }
}
@keyframes floaty { to { translate: 0 -14px; } }

@media (max-width: 1179px) {
  .viewtoggle b, .signin .lbl { display: none; }
  .viewtoggle > span { padding: 0 10px; }
  .signin { width: 44px; padding: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .lf { grid-template-columns: minmax(0, 1fr) 270px; }
  .foot-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .top .word { display: none; }
  .step.wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dock { display: flex; }
  .desk, .top-nav { display: none !important; }
  /* Phones: the dock holds the actions, so the header just scrolls away. */
  .top { position: relative; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
  html:not(.tg) { scroll-padding-top: 16px; }
  .threadhead { top: 8px; }
  .top .word { display: inline; font-size: 17px; }
  .viewtoggle > span { padding: 0 9px; }
  main { padding-bottom: 40px; }
  .foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  main > section, main > .hero-wrap + section { margin-block: 48px; }
  .duo, .agent-cta, .connect { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .tool { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lf { grid-template-columns: minmax(0, 1fr); }
  .lf-side { position: static; }
  .card { padding: 18px; }
  .kindpick span { padding: 12px 10px; font-size: 15px; }
  .perm { grid-template-columns: minmax(0, 1fr); }
  .listingform .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listingform .ptype, .listingform .when-row .tz { grid-column: 1 / -1; }
  .listingform:has(input[name='kind'][value='request']:checked) .when-row .only-request,
  .listingform:has(input[type='hidden'][name='kind'][value='request']) .when-row .only-request { grid-column: 1 / -1; }
  .listingform .when-row .only-offer { grid-column: 1 / -1; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .seg, .maxprice, .filter-actions { grid-column: 1 / -1; }
  .filters .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: auto; }
  .seg span { padding-inline: 8px; }
  .filters select { min-width: 0; width: 100%; }
  .filters select, .maxprice input, form.inline input, .langs-pick > input:not([type='checkbox']) { font-size: 16px; }

  .filter-actions { flex-wrap: wrap; }
  .filter-actions .btn { flex: 1 1 auto; padding: 0 12px; }
  .intent { padding-left: 16px; }
  .intent input, .intent input:focus { font-size: 17px; height: 48px; }
  .intent .btn { padding: 0 16px; height: 46px; }
  .stats { flex-direction: column; gap: 6px; }
  .threadview main { min-height: calc(100dvh - 66px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .threadhead { top: 70px; }
  .composer { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .composer .btn span { display: none; }
  .composer .btn { width: 46px; padding: 0; }
  .bubble { max-width: 88%; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-actions { display: flex; flex-wrap: wrap; }
  .owner-actions > * { flex: 1 1 160px; }
}
@media (max-width: 560px) {
  .filters { grid-template-columns: minmax(0, 1fr); }
  .intent .btn { width: 46px; padding: 0; }
  .intent .btn .lbl { display: none; }
  .intent .btn .i { display: block; }
  .urlbox .btn { width: 40px; padding: 0; }
  .urlbox .lbl { display: none; }
  .urlbox code { white-space: normal; word-break: break-all; text-overflow: clip; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .kindpick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .top .word { display: none; }
}

/* Inside Telegram: the header gives way to Telegram’s own chrome. */
html.tg .top { position: relative; }
html.tg .threadhead { top: 8px; }