/* /mcp/connect/ and the custom connector guides (/guides/custom-connectors/), owner 2026-11-12.
   Moved out of /mcp/connect/ so the guides share it. Page styles use the mc- and cn- prefixes; colours come from site
   tokens. The Claude, Gemini and ChatGPT screens are drawings of other apps (illustration only). */
/* ── /mcp/ — the Humble MCP: Claude, ChatGPT, Gemini and other AI apps use your Humble notes and tasks.
   What it can do comes from humbleai/hai projects/platform/src/hai/mcp/tools (notes_* and tasks_*).
   Page styles use the mc- prefix; colours come from site tokens. Built from /slack/.
   The Claude, Gemini and ChatGPT screens are drawings of other apps (illustration only). ── */
.mc { font-family: 'DM Sans', system-ui, sans-serif; }
.mc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 45em) { .mc-wrap { padding: 0 16px; } }

/* Hero */
.mc-hero { padding: 72px 0; overflow: hidden; }
.mc-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.mc-hero h1 { font-size: clamp(2.125rem, 4.6vw, 3.375rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
.mc-hl { color: var(--hero-accent-dark); }
.mc-lead { font-size: 1.125rem; line-height: 1.6; max-width: 46ch; margin: 0 0 28px; }
.mc-hero-actions, .mc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 53.75em) { .mc-hero-grid { grid-template-columns: 1fr; gap: 40px; } .mc-hero { padding: 48px 0 56px; } }
@media (max-width: 30em) { .mc-hero-actions > a { width: 100%; justify-content: center; box-sizing: border-box; } }
.mc-hero-visual { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }

/* Humble + AI app logos */
.mc-logos { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.mc-logo { width: 52px; height: 52px; border-radius: 14px; background: #FDFCFA; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.mc-logo img { width: 30px; height: 30px; object-fit: contain; }
/* Humble and the AI apps it connects to (owner, 2026-11-06): the pink Humble, a pink link, and the apps
   floating in a loose wave, so it reads as Humble reaching out to them, not a row of icons. */
.mc-av { width: 96px; height: 96px; margin-right: 2px; transform: rotate(-4deg); }
.mc-logos .mc-logo:nth-child(3) { transform: translateY(-12px) rotate(-7deg); }
.mc-logos .mc-logo:nth-child(4) { transform: translateY(10px) rotate(5deg); }
.mc-logos .mc-logo:nth-child(5) { transform: translateY(-6px) rotate(-3deg); }
.mc-logos-plus { color: #FEBBCC; font-weight: 800; font-size: 1.25rem; }
.mc-logos-line { width: 28px; height: 2px; background: #FEBBCC; border-radius: 2px; }

/* Shared bits of the AI app drawings */
.mc-tool { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; border: 1px solid #E3DED3; border-radius: 8px; padding: 4px 8px; font-size: 0.6875rem; font-weight: 700; color: #4A4F57; background: #fff; }
.mc-tool img { width: 14px; height: 14px; }
.mc-tool b { color: #1F1E1C; }
.mc-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mc-list li { display: flex; gap: 6px; align-items: baseline; }
.mc-list li::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .55; transform: translateY(1px); }
.mc-pill { white-space: nowrap; display: inline-block; font-size: 0.625rem; font-weight: 700; border-radius: 99px; padding: 1px 6px; background: #EEE9FB; color: #3A2A7A; margin-left: 4px; }
.mc-pill--done { background: #D6E2BF; color: #2F3B1A; }
.mc-done { text-decoration: line-through; opacity: .6; }

/* Claude-style desktop chat */
.mc-claude { width: 100%; max-width: 480px; background: #FAF9F5; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); color: #1F1E1C; font-size: 0.8125rem; line-height: 1.5; text-align: left; }
.mc-claude-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid #ECE8DE; font-weight: 600; }
.mc-claude-bar img { width: 18px; height: 18px; }
.mc-claude-msgs { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.mc-claude-you { align-self: flex-end; max-width: 84%; background: #EFEBE2; border-radius: 12px; padding: 8px 12px; }
.mc-claude-ai { font-family: Georgia, 'Times New Roman', serif; font-size: 0.875rem; max-width: 96%; }
.mc-claude-ai .mc-tool { font-family: 'DM Sans', system-ui, sans-serif; }
.mc-claude-in { margin: 0 16px 16px; background: #fff; border: 1px solid #E3DED3; border-radius: 14px; padding: 10px 12px; color: #6B6A66; }

/* Gemini-style chat */
.mc-gem { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(30,8,93,.4); border: 1px solid var(--warm-border); color: #1F1F1F; font-size: 0.8125rem; line-height: 1.5; }
.mc-gem-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 0.9375rem; color: #444746; }
.mc-gem-msgs { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.mc-gem-you { align-self: flex-end; max-width: 84%; background: #E9EEF6; border-radius: 18px 4px 18px 18px; padding: 9px 14px; }
.mc-gem-ai { display: flex; gap: 10px; align-items: flex-start; }
.mc-gem-ai > img { width: 22px; height: 22px; flex-shrink: 0; }
.mc-gem-in { margin: 0 16px 16px; background: #F0F4F9; border-radius: 99px; padding: 10px 16px; color: #5E5E5E; }

/* ChatGPT-style phone */
.mc-phone { width: 280px; max-width: 100%; background: #111; border-radius: 40px; padding: 10px; box-shadow: 0 24px 50px -20px rgba(30,8,93,.45); box-sizing: border-box; }
.mc-phone-screen { background: #fff; border-radius: 31px; overflow: hidden; color: #0D0D0D; font-size: 0.75rem; line-height: 1.45; display: flex; flex-direction: column; min-height: 430px; }
.mc-phone-notch { width: 84px; height: 22px; background: #111; border-radius: 0 0 14px 14px; margin: 0 auto; }
.mc-phone-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-weight: 700; font-size: 0.875rem; }
.mc-phone-bar img { width: 18px; height: 18px; }
.mc-phone-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 10px 14px; }
.mc-phone-you { align-self: flex-end; max-width: 88%; background: #F4F4F4; border-radius: 18px; padding: 8px 12px; }
.mc-phone-voice { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.6875rem; color: #5D5D5D; margin-bottom: 4px; }
.mc-phone-voice svg { width: 12px; height: 12px; }
.mc-phone-in { display: flex; align-items: center; gap: 8px; margin: 0 12px 14px; border: 1px solid #E3E3E3; border-radius: 99px; padding: 8px 8px 8px 14px; color: #8F8F8F; }
.mc-phone-in > span:first-child { flex: 1; }
.mc-phone-mic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #0D0D0D; color: #fff; display: grid; place-items: center; }
.mc-phone-mic svg { width: 13px; height: 13px; }

/* Sections */
.mc-section { padding: 72px 0; }
@media (max-width: 45em) { .mc-section { padding: 56px 0; } }
.mc-h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 20px; max-width: 24ch; }
.mc-h2--light { color: #FDFCFA; }
.mc-problem { font-size: 1.125rem; line-height: 1.65; color: rgba(252,250,247,.72); max-width: 62ch; margin: 0; }
.mc-problem strong { color: #FEBBCC; font-weight: 700; }
.mc-p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-muted); max-width: 48ch; margin: 0; }
.mc-more { margin: 24px 0 0; font-size: 0.9375rem; color: var(--ink-muted); }
.mc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.mc-grid--flip > :first-child { order: 2; }
.mc-grid-visual { display: flex; justify-content: center; min-width: 0; }
@media (max-width: 53.75em) { .mc-grid { grid-template-columns: 1fr; gap: 32px; } .mc-grid--flip > :first-child { order: 0; } }

.mc-open { display: grid; gap: 6px; margin-top: 8px; font-family: 'DM Sans', system-ui, sans-serif; }
.mc-open-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E3DED3; border-radius: 10px; padding: 8px 10px; font-size: 0.75rem; }
.mc-open-item i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-style: normal; }
.mc-open-item i svg { width: 14px; height: 14px; }
.mc-open-item--task i { background: #D6E2BF; color: #2F3B1A; }
.mc-open-item--note i { background: #F6E89A; color: #4A3F0A; }
.mc-open-item span { flex: 1; min-width: 0; }
.mc-open-item b { display: block; font-size: 0.8125rem; color: #1F1E1C; }
.mc-open-item small { color: #5C6168; }
.mc-open-item em { font-style: normal; font-weight: 700; color: var(--hero-purple-bg); white-space: nowrap; }
/* What is it: for humans + for AI = together (owner, 2026-10-22: show the value first) */
.mc-what-head { max-width: 760px; }
.mc-three { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1.15fr); align-items: stretch; }
.mc-three-sep { display: grid; place-items: center; font-size: 1.75rem; font-weight: 800; color: var(--hero-purple-bg); }
.mc-two-side { background: var(--card-bg); border: 1px solid var(--warm-border); border-radius: 18px; padding: 18px 14px; text-align: center; }
.mc-two-side--ai { background: var(--hero-ink-bg); border-color: var(--hero-ink-bg); }
.mc-two-side--both { background: #DFDECC; border-color: #DFDECC; text-align: left; padding: 18px 20px; }
.mc-two-who { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.mc-two-side--ai .mc-two-who { color: rgba(252,250,247,.8); }
.mc-two-side b { display: block; font-size: 1.0625rem; color: var(--ink); line-height: 1.3; margin-top: 12px; }
.mc-two-side--ai b { color: #FEBBCC; }
.mc-two-side--both b { margin: 0 0 10px; font-size: 1.125rem; }
.mc-unlocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-unlocks li { position: relative; padding-left: 28px; font-size: 1rem; line-height: 1.4; }
.mc-unlocks li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #FDFCFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234705D0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.mc-unlocks a { color: var(--hero-purple-bg); font-weight: 700; }
@media (max-width: 60em) { .mc-three { grid-template-columns: 1fr; max-width: 440px; } .mc-three-sep { height: 40px; } }
.mc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mc-tiles li { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #F4F2ED; border-radius: 12px; padding: 10px 4px 8px; font-size: 0.75rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mc-two-side--ai .mc-tiles li { background: #FDFCFA; }
.mc-tiles img, .mc-tiles svg { width: 26px; height: 26px; object-fit: contain; }
.mc-tiles svg { color: var(--hero-purple-bg); }

/* Routines */
.mc-routines { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 460px; display: grid; gap: 10px; }
.mc-routines li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; align-items: start; background: var(--card-bg); border: 1px solid var(--warm-border); border-radius: 16px; padding: 14px 16px; }
.mc-routine-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--guide-lilac, #EEE9FB); color: var(--hero-purple-bg); display: grid; place-items: center; }
.mc-routine-ic svg { width: 20px; height: 20px; }
.mc-routines small { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--hero-purple-bg); margin-bottom: 2px; }
.mc-routines q { display: block; font-size: 1rem; line-height: 1.45; color: var(--ink); quotes: '\201C' '\201D'; }

/* Coming soon: a Humble note your AI tidied (drawn the way the product draws notes) */
.mc-note { width: 100%; max-width: 400px; background: #F4F2EC; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(30,8,93,.3); color: var(--hero-ink-bg); }
.mc-note-head { background: #F3E28A; padding: 10px 14px; font-weight: 700; font-size: 0.875rem; }
.mc-note-body { padding: 14px; }
.mc-note-sheet { background: #FAF3D3; border-radius: 12px; padding: 12px 14px; font-size: 0.8125rem; line-height: 1.5; }
.mc-note-sheet b { display: block; font-size: 0.9375rem; margin-bottom: 4px; }
.mc-note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-note-tags span { font-size: 0.6875rem; font-weight: 700; background: #fff; border: 1px dashed var(--hero-purple-bg); color: var(--hero-purple-bg); border-radius: 99px; padding: 2px 8px; }
.mc-note-by { margin: 10px 0 0; font-size: 0.75rem; font-weight: 600; color: #4A4F57; display: flex; align-items: center; gap: 6px; }
.mc-note-by svg { width: 14px; height: 14px; color: var(--hero-purple-bg); }

/* Part strips (owner, 2026-10-22): one colour per part. Ink on pink 11.6:1, white on purple 8.9:1, pink on ink 11:1 */
.mc-part { padding-block: 32px; }
.mc-part-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.mc-part-no { font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 99px; padding: 3px 10px; }
.mc .mc-part-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: inherit; }
.mc .mc-part-line { margin: 0; font-size: 1.125rem; font-weight: 600; color: inherit; }
.mc-part--you { background: #FEBBCC; color: #1E085D; }
.mc-part--team { background: var(--hero-purple-bg); color: #FFFFFF; }
.mc-part--more { background: var(--hero-ink-bg); color: #FEBBCC; }
.mc-part--more .mc-part-line { color: #FDFCFA; }

/* Team: tools row above team routines */
.mc-team { width: 100%; max-width: 460px; display: grid; gap: 14px; }
.mc-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.mc-tools li { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card-bg); border: 1px solid var(--warm-border); border-radius: 14px; padding: 12px 4px 10px; font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.mc-tools img { width: 26px; height: 26px; object-fit: contain; }

/* One memory for every AI app */
.mc-memory { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 400px; }
.mc-memory-arrow { color: var(--hero-purple-bg); height: 30px; }
.mc-memory-arrow svg { width: 16px; height: 30px; }
.mc-memory-base { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; background: #DFDECC; border-radius: 16px; padding: 16px; font-weight: 700; color: var(--ink); text-align: center; }
.mc-memory-base img { width: 32px; height: 32px; }

/* Privacy ticks */
.mc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 62ch; }
.mc-ticks li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.mc-ticks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--guide-lilac, #EEE9FB) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234705D0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }

/* FAQ */
.mc .faq-question { font-family: 'DM Sans', system-ui, sans-serif; }
.mc .faq-answer a { color: var(--hero-purple-bg); font-weight: 600; }

/* Closing CTA */
.mc-cta { padding: 80px 0; text-align: center; }
.mc-cta h2 { color: #FEBBCC; font-size: clamp(1.75rem, 3.4vw, 2.625rem); font-weight: 800; margin: 0 0 12px; }
.mc-cta p { color: #FDFCFA; font-size: 1.0625rem; margin: 0 0 24px; }
.mc-cta-actions { justify-content: center; gap: 24px; }
.mc-cta-link { color: #FEBBCC; font-weight: 700; font-size: 1rem; text-underline-offset: 3px; }
.mc-cta-link:hover { color: #FFD6E4; }
  /* ── /mcp/connect/: how to add the Humble MCP to each AI app (steps checked 2026-10-22; see the comment on each section) ── */
.cn-addr { display: grid; gap: 8px; max-width: 520px; }
.cn-addr-label { font-size: 0.875rem; font-weight: 700; color: #FEBBCC; }

/* Humble's real consent screen (humbleai/hai src/hai/auth/html.clj connect-consent), drawn small */
/* Framed as a browser window so it reads as a picture, not a form to fill in (owner, 2026-10-28) */
.cn-allow-frame { width: 100%; max-width: 400px; border: 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.cn-allow { width: 100%; box-sizing: border-box; background: #FDFCFA; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--hero-ink-bg); }
.cn-allow img { width: 44px; height: 44px; }
.cn-allow b { font-size: 1.0625rem; line-height: 1.3; }
.cn-allow span { font-size: 0.8125rem; color: #4A4F57; }
.cn-allow .cn-allow-btns { display: flex; gap: 8px; margin-top: 6px; }
.cn-allow-yes, .cn-allow-no { border-radius: 99px; padding: 7px 20px; font-weight: 700; font-size: 0.8125rem; }
.cn-allow .cn-allow-yes { background: var(--hero-purple-bg); color: #FFFFFF; }
.cn-allow .cn-allow-no { border: 1.5px solid var(--hero-ink-bg); color: var(--hero-ink-bg); }
.cn-allow small { font-size: 0.75rem; color: #4A4F57; }

.cn-hero-claude { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; }
.cn-hero-claude span { font-size: 1rem; color: #FDFCFA; }
.cn-hero-other { margin: 0; font-size: 1rem; line-height: 1.55; color: #FDFCFA; }
.cn-hero-other a:not(.cc-chip) { color: #FEBBCC; font-weight: 700; }
/* Add Humble to Claude: three short steps in a row, numbered 01 to 03 like the step cards (owner, 2026-11-12) */
.cn-path { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 64rem; }
@media (max-width: 53.75em) { .cn-path { grid-template-columns: 1fr; } }
.cn-path li { padding: 20px; border: 1px solid var(--warm-border); border-radius: 18px; background: #FDFCFA; }
.cn-path-num { display: block; margin: 0 0 6px; font-family: 'Lexend', sans-serif; font-size: 0.875rem; letter-spacing: .12em; color: #4A4458; }
.cn-path p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.cn-path-go { margin: 0 0 8px; }
.cn-addr-label--light { color: var(--ink); }
.cn-note { margin: 16px 0 0; max-width: 70ch; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-muted); }
.cn-callout { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; max-width: 70ch; background: #FAF3D3; border: 1.5px solid #E4CF5F; border-radius: 14px; padding: 14px 16px; color: var(--hero-ink-bg); }
.cn-callout svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.cn-callout-title { display: block; font-size: 1rem; }
.cn-callout p { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hero-ink-bg); }
/* ── Step pictures (owner, 2026-10-22): a still drawing for each step, the part to select ringed (as in the help centre) and a hand-drawn note.
   Since 2026-11-12 each app's steps come one at a time in a side panel (js/connect-panel.js, js/scroll-steps.js, css/scroll-steps.css). Other apps are drawn from their help pages. The .cn-anim rules below are kept for a future mini animation. ── */
.cn-pic { padding: 46px 0; }
.cn-pic + .cn-pic { margin-top: -20px; }
.cn-pic .tp-hand { font-size: 0.875rem; }
.cn-target { box-shadow: 0 0 0 3px #4705D0, 0 0 0 7px #FEBBCC !important; border-radius: 8px; position: relative; z-index: 1; }

/* App windows (drawings of other apps' screens) */
.cn-m { border-radius: 12px; overflow: hidden; border: 1px solid #E3DED3; box-shadow: 0 18px 40px -18px rgba(30,8,93,.35); background: #FFFFFF; color: #1F1E1C; font-size: 0.6875rem; line-height: 1.35; text-align: left; }
.cn-m-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: #F1EFE9; border-bottom: 1px solid #E3DED3; font-size: 0.625rem; font-weight: 700; color: #5C6168; }
.cn-m-bar i { width: 7px; height: 7px; border-radius: 50%; }
.cn-m-bar span { flex: 1; text-align: center; margin-right: 31px; }
.cn-m-body { display: grid; grid-template-columns: 30% minmax(0,1fr); min-height: 200px; }
.cn-m-body--full { grid-template-columns: 1fr; }
.cn-m-side { display: flex; flex-direction: column; gap: 3px; padding: 10px 6px; background: #F9F9F9; border-right: 1px solid #ECECEC; }
.cn-m-side span { padding: 5px 7px; border-radius: 7px; font-weight: 600; }
.cn-m-side .is-on { background: #ECECEC; }
.cn-m--gemini .cn-m-side { background: #F0F4F9; border-color: #E3E8EF; }
.cn-m--gemini .cn-m-side .is-on { background: #D3E3FD; }
.cn-m-main { position: relative; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.cn-m-main--dim { background: #D8D6D0; justify-content: center; }
.cn-m-h { margin: 0; font-size: 0.875rem; font-weight: 700; color: inherit; }
.cn-m-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-m-row { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #ECECEC; border-radius: 9px; background: #FFFFFF; }
.cn-m-row img { width: 14px; height: 14px; }
.cn-m-row b { flex: 1; font-weight: 600; }
.cn-m-row small { color: #6B6A66; }
.cn-m-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 8px; border: 1px solid #D9D4C7; background: #FFFFFF; font-weight: 700; white-space: nowrap; }
.cn-m-btn--dark { background: #0D0D0D; border-color: #0D0D0D; color: #FFFFFF; }
.cn-m-btn--round { width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 0.875rem; }
.cn-m-menu { align-self: flex-end; display: grid; min-width: 60%; padding: 4px; background: #FFFFFF; border: 1px solid #E3DED3; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.cn-m-menu--left { align-self: flex-start; margin-top: auto; }
.cn-m-menu span { padding: 6px 8px; border-radius: 7px; font-weight: 600; }
.cn-m-dialog { display: grid; gap: 7px; padding: 12px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.cn-m-field { display: grid; gap: 2px; }
.cn-m-field small { color: #5C6168; }
.cn-m-input { padding: 5px 8px; border: 1px solid #D9D4C7; border-radius: 7px; background: #FFFFFF; overflow-wrap: anywhere; }
.cn-m-input--empty { color: #8A8A85; }
.cn-m-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; }
.cn-m-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 8px; }
.cn-m-btns { display: flex; justify-content: flex-end; gap: 6px; }
.cn-m--term { background: #1E1E1E; border-color: #1E1E1E; color: #E8E8E8; }
.cn-m--term .cn-m-bar { background: #2D2D2D; border-color: #2D2D2D; color: #BDBDBD; }
.cn-m-term { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; line-height: 1.6; gap: 6px; min-height: 160px; overflow-wrap: anywhere; }
.cn-m-term .cn-target { border-radius: 4px; }
.cn-m-prompt { color: #F4BF4F; }
.cn-m-dim { color: #9DA0A6; }
.cn-m-caret { display: inline-block; width: 6px; height: 11px; background: #E8E8E8; vertical-align: -2px; }
.cn-m-box { display: grid; gap: 4px; padding: 8px; border: 1px solid #D97757; border-radius: 6px; }
.cn-m-box b { color: #D97757; }
.cn-m--browser .cn-m-bar { background: #ECEAE4; }
.cn-m-main--humble { align-items: center; background: #F6F5F0; padding: 14px; }
.cn-m-allow { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 290px; text-align: center; color: #1E085D; }
.cn-m-allow img { width: 34px; height: 34px; }
.cn-m-allow > b { font-size: 0.875rem; line-height: 1.3; }
.cn-m-allow > span, .cn-m-allow small { color: #4A4F57; }
.cn-m-allow-facts { line-height: 1.5; overflow-wrap: anywhere; }
.cn-m-allow-btns { display: flex; gap: 6px; margin-top: 2px; }
.cn-m-allow-yes, .cn-m-allow-no { padding: 5px 16px; border-radius: 99px; font-weight: 700; }
.cn-m-allow .cn-m-allow-yes { background: #4705D0; color: #FFFFFF; }
.cn-m-allow .cn-m-allow-no { border: 1.5px solid #1E085D; color: #1E085D; }

/* Claude Desktop, drawn from the owner's screenshots */
.cn-m--claude { background: #FAF9F5; }
.cn-c { display: grid; grid-template-columns: 30% minmax(0,1fr); min-height: 210px; }
.cn-anim { grid-column: 1 / -1; position: relative; display: grid; }
.cn-anim > .cn-scene { grid-area: 1 / 1; display: grid; grid-template-columns: 30% minmax(0,1fr); background: #FAF9F5; }
.cn-c-side { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #F5F4EE; border-right: 1px solid #ECE9E0; }
.cn-c-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 4px; padding: 2px; border-radius: 7px; background: #ECEAE3; font-size: 0.5625rem; text-align: center; }
.cn-c-tabs b { background: #FFFFFF; border-radius: 5px; padding: 2px 0; }
.cn-c-tabs span { padding: 2px 0; color: #73726C; }
.cn-c-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; }
.cn-c-item svg { width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-c-item.is-on { background: #ECEAE3; font-weight: 600; }
.cn-c-group { margin: 2px 6px; color: #73726C; font-size: 0.5625rem; border-radius: 4px; }
.cn-c-main { position: relative; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 0; }
.cn-c-home { align-items: center; justify-content: center; gap: 12px; }
.cn-c-hello { display: flex; align-items: center; gap: 6px; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.0625rem; color: #1F1E1C; }
.cn-c-hello img { width: 18px; height: 18px; }
.cn-c-input { width: 90%; box-sizing: border-box; padding: 10px; border: 1px solid #E3DED3; border-radius: 12px; background: #FFFFFF; color: #8A8984; }
.cn-c-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cn-c-h { margin: 0; flex: 1; font-size: 0.875rem; font-weight: 700; color: #1F1E1C; }
.cn-c-seg { display: flex; padding: 2px; border-radius: 7px; background: #F0EEE6; font-size: 0.5625rem; }
.cn-c-seg b { background: #FFFFFF; border-radius: 5px; padding: 2px 5px; }
.cn-c-seg span { padding: 2px 5px; color: #73726C; }
.cn-c-add { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 7px; background: #1F1E1C; color: #FFFFFF; font-weight: 700; white-space: nowrap; }
.cn-c-add svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cn-c-menu { position: absolute; top: 40px; right: 12px; z-index: 2; padding: 3px; background: #FFFFFF; border: 1px solid #E3DED3; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.cn-c-menu-item { display: block; padding: 5px 8px; border-radius: 6px; background: #F0EEE6; white-space: nowrap; }
.cn-c-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto auto; align-items: center; gap: 6px; padding: 6px 2px; border-top: 1px solid #ECE9E0; }
.cn-c-row img { width: 14px; height: 14px; }
.cn-c-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-c-type { color: #5C5B57; }
.cn-c-type em { margin-left: 4px; padding: 1px 4px; border-radius: 4px; background: #F0EEE6; font-style: normal; font-size: 0.5625rem; }
.cn-c-tick { color: #5C5B57; padding: 0 6px; }
.cn-c-btn { display: inline-flex; padding: 4px 9px; border-radius: 7px; border: 1px solid #D9D4C7; background: #FFFFFF; font-weight: 700; }
.cn-c-btn--dark { background: #1F1E1C; border-color: #1F1E1C; color: #FFFFFF; }
.cn-c-main--dim { justify-content: center; background: #D8D6D0; }
.cn-c-dialog { display: grid; gap: 4px; padding: 12px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.cn-c-dialog .cn-c-h { margin-bottom: 4px; }
.cn-c-dialog small { color: #73726C; font-size: 0.5625rem; margin-bottom: 4px; }
.cn-c-field { padding: 6px 8px; border: 1px solid #E3DED3; border-radius: 8px; overflow-wrap: anywhere; }
.cn-c-field--on { border-color: #4A7BD0; box-shadow: 0 0 0 1px #4A7BD0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; }
.cn-c-btns { display: flex; justify-content: flex-end; gap: 6px; }

@media (max-width: 30em) { .cn-c-item svg { display: none; } .cn-c-item { padding: 4px 5px; } .cn-c-seg span { display: none; } }
/* Mouse pointer for the two Claude animations */
.cn-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 16px; height: 20px; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1 1l13 11H8l3 7-3 1-3-7-4 4z' fill='%231F1E1C' stroke='%23FFFFFF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.cn-pic .cn-scene--a .cn-c-cust, .cn-pic .cn-c-add { position: relative; }
.cn-pic .cn-scene--b .cn-c-conn, .cn-pic .cn-c-menu-item { box-shadow: 0 0 0 3px #4705D0, 0 0 0 7px #FEBBCC; position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cn-pic.is-play .cn-scene--b { animation: cnFadeIn 3.6s both; }
  .cn-pic.is-play .cn-scene--a .cn-c-cust { animation: cnRingEarly 3.6s both; }
  .cn-pic.is-play .cn-scene--b .cn-c-conn, .cn-pic.is-play .cn-c-menu-item { animation: cnRingLate 3.6s both; }
  .cn-pic.is-play .cn-c-add { animation: cnRingEarly 3.6s both; }
  .cn-pic.is-play .cn-c-menu { animation: cnMenu 3.6s both; }
  .cn-pic.is-play .cn-cursor { animation: cnCursor 3.6s both; }
  .cn-pic.is-play .tp-hand, .cn-pic.is-play .tp-hand-svg { animation: cnNotes 3.6s both; }
}
@keyframes cnFadeIn { 0%, 42% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes cnRingEarly { 0%, 20% { box-shadow: none; } 26%, 44% { box-shadow: 0 0 0 3px #4705D0, 0 0 0 7px #FEBBCC; } 52%, 100% { box-shadow: none; } }
@keyframes cnRingLate { 0%, 76% { box-shadow: none; } 84%, 100% { box-shadow: 0 0 0 3px #4705D0, 0 0 0 7px #FEBBCC; } }
@keyframes cnMenu { 0%, 34% { opacity: 0; transform: translateY(-4px); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes cnNotes { 0%, 82% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes cnCursor {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
  8% { opacity: 1; transform: translate(var(--x0), var(--y0)); }
  26% { transform: translate(var(--x1), var(--y1)); }
  30% { transform: translate(var(--x1), var(--y1)) scale(.8); }
  34%, 50% { transform: translate(var(--x1), var(--y1)); }
  74% { transform: translate(var(--x2), var(--y2)); }
  78% { transform: translate(var(--x2), var(--y2)) scale(.8); }
  82% { opacity: 1; transform: translate(var(--x2), var(--y2)); }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}
.mc-asks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 820px; }
@media (max-width: 45em) { .mc-asks { grid-template-columns: 1fr; } }
.mc-asks li { background: #F4F2ED; border: 1px solid var(--warm-border); border-radius: 16px 16px 4px 16px; padding: 14px 18px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }

/* Custom connector guides (owner, 2026-11-12; tools/custom-connectors/build.py) */
.cc-lead { max-width: 52ch; }
.mc-hero .cc-apps { margin-top: 8px; }
.cc-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 53.75em) { .cc-split { grid-template-columns: 1fr; gap: 28px; } }
.cc-ticks { margin-top: 8px; max-width: 46ch; }
.cc-humble { display: grid; gap: 12px; justify-items: start; padding: 24px; border-radius: 20px; background: #F4F2ED; border: 1px solid var(--warm-border); }
.cc-humble h3 { margin: 0; font-size: 1.25rem; color: var(--ink); }
.cc-humble p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.cc-intro { max-width: 60ch; margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.cc-addr { margin-bottom: 20px; }
.cc-logo-big { width: 88px; height: 88px; border-radius: 22px; }
.cc-logo-big img { width: 52px; height: 52px; }
.cc-hero-note { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: #FDFCFA; }
/* The app picker's list opens below the hero's edge, so the hero must not clip it */
.mc-hero:has(.cc-pick) { position: relative; z-index: 5; overflow: visible; }
/* Custom connector guides hero (owner, 2026-11-12): text on the left, "to your AI app" kept on one line, and a drawing
   of the box every AI app asks you to fill in on the right. Ink on off-white 15:1; the purple button 9:1 with white. */
.cc-nowrap { white-space: nowrap; }
.cc-dialog { display: grid; gap: 6px; width: min(100%, 22rem); box-sizing: border-box; padding: 20px 22px; border-radius: 18px; background: #FDFCFA; color: #1E085D; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.cc-dialog-h { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 700; }
.cc-field-label { font-size: 0.8125rem; font-weight: 700; color: #4A4458; }
.cc-field { padding: 9px 12px; border: 1.5px solid #D8D3C9; border-radius: 10px; background: #FFFFFF; font-size: 0.875rem; }
.cc-field--on { border-color: #4705D0; box-shadow: 0 0 0 3px #EEE9FB; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; }
.cc-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cc-dialog-cancel, .cc-dialog-add { padding: 7px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.cc-dialog-cancel { border: 1.5px solid #1E085D; }
.cc-dialog-add { background: #4705D0; color: #FFFFFF; }
/* The hero colours its text white and pink; the drawing keeps its own ink and grey */
.page-hero--ink .cc-dialog .cc-dialog-h { color: #1E085D !important; }
.page-hero--ink .cc-dialog .cc-field-label { color: #4A4458 !important; }
.page-hero--ink .cc-dialog .cc-field { color: #1E085D !important; }
.page-hero--ink .cc-dialog .cc-dialog-cancel { color: #1E085D !important; }
.page-hero--ink .cc-dialog .cc-dialog-add { color: #FFFFFF !important; }

/* Front page hero kept short so the steps below show without scrolling far (owner, 2026-11-12, 0050).
   Same colours as before; only the spacing and the heading size shrink. */
.mc-hero--compact { padding: 40px 0 48px; }
.mc-hero--compact .mc-hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 53.75em) { .mc-hero--compact .mc-hero-grid { grid-template-columns: 1fr; } }
.mc-hero--compact h1 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); margin-bottom: 12px; }
.mc-hero--compact .mc-lead { margin-bottom: 20px; }
.mc-hero--compact .cc-pick-line { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.mc-hero--compact .cc-dialog { width: min(100%, 20rem); padding: 16px 18px; }
.mc-hero--compact .mc-logos { transform: scale(.85); transform-origin: center bottom; margin-bottom: -6px; }
@media (max-width: 53.75em) { .mc-hero--compact { padding: 32px 0 40px; } }
.cc-panel[hidden] { display: none; }
.cc-panel > .mc-h2 { margin-top: 0; }

/* Chat drawings in the front page hero (owner, 2026-11-12): the same chat, drawn like each app, so the right side
   changes with the picker. Decorative (aria-hidden). Text colours are fixed per app, not the hero's white:
   Claude ink #141413 on ivory #FAF9F5 17.5:1; ChatGPT #0D0D0D on #FFFFFF 19.8:1; Gemini #1F1F1F on #FFFFFF 17:1;
   terminal #E8E6DF on #1A1918 13:1, dim #A8A59B on #1A1918 7:1, orange #DA7756 on #1A1918 5.9:1. */
.cv { width: min(100%, 27rem); height: 21rem; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); font-size: 0.8125rem; line-height: 1.45; font-family: 'DM Sans', system-ui, sans-serif; }
.cv[hidden] { display: none; }
.cv p, .cv ul, .cv ol { margin: 0; }
.cv-bar { flex-shrink: 0; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; font-size: 0.6875rem; font-weight: 600; }
.cv-bar i { width: 8px; height: 8px; border-radius: 50%; }
.cv-bar span { flex: 1; text-align: center; margin-right: 34px; }
.cv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
.cv-side { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; font-size: 0.75rem; font-weight: 600; }
.cv-side span { padding: 5px 8px; border-radius: 7px; }
.cv-side span:first-child { background: rgba(0, 0, 0, .06); }
.cv-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; }
.cv-me { align-self: flex-end; max-width: 88%; padding: 8px 12px; }
.cv-tool { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.75rem; font-weight: 600; }
.cv-tool img { width: 16px; height: 16px; border-radius: 4px; }
.cv-ai ul { padding-left: 1.2em; margin-top: 4px; display: grid; gap: 2px; }
.cv-box { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 9px 14px; }
.cv-send { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; }
/* Claude: ivory page, grey bubble, serif answer, white rounded reply box, orange send */
.cv--claude { background: #FAF9F5; color: #141413; border: 1px solid #E3DED3; }
.cv--claude .cv-bar { background: #F0EEE6; color: #141413; }
.cv--claude .cv-side { background: #F5F4ED; color: #141413; }
.cv--claude .cv-me { background: #F0EEE6; border-radius: 14px; }
.cv--claude .cv-tool { color: #3D3D3A; padding: 3px 8px; border: 1px solid #E3DED3; border-radius: 8px; }
.cv--claude .cv-ai { font-family: Georgia, 'Times New Roman', serif; font-size: 0.9375rem; line-height: 1.5; }
.cv--claude .cv-box { background: #FFFFFF; border: 1px solid #E3DED3; border-radius: 16px; color: #5E5D59; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.cv--claude .cv-send { background: #D97757; }
/* ChatGPT: white page, light-grey bubble, plain answer, grey pill box, black send */
.cv--chatgpt { background: #FFFFFF; color: #0D0D0D; border: 1px solid #E5E5E5; }
.cv--chatgpt .cv-bar { background: #F4F4F4; color: #0D0D0D; }
.cv--chatgpt .cv-side { background: #F9F9F9; color: #0D0D0D; }
.cv--chatgpt .cv-me { background: #F4F4F4; border-radius: 18px; }
.cv--chatgpt .cv-tool { color: #5D5D5D; font-weight: 500; }
.cv--chatgpt .cv-box { background: #F4F4F4; border-radius: 999px; color: #5D5D5D; }
.cv--chatgpt .cv-send { background: #0D0D0D; }
/* Gemini: white page, blue-grey side, sparkle beside the answer, pale pill box */
.cv--gemini { background: #FFFFFF; color: #1F1F1F; border: 1px solid #E3E8EF; }
.cv--gemini .cv-bar { background: #F0F4F9; color: #1F1F1F; }
.cv--gemini .cv-side { background: #F0F4F9; color: #1F1F1F; }
.cv--gemini .cv-side span:first-child { background: #D3E3FD; }
.cv--gemini .cv-me { background: #E9EEF6; border-radius: 18px 18px 4px 18px; }
.cv--gemini .cv-tool { color: #444746; padding: 3px 10px; background: #F0F4F9; border-radius: 999px; }
.cv--gemini .cv-ai { display: flex; gap: 8px; align-items: flex-start; }
.cv-spark { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background: linear-gradient(135deg, #4285F4, #9B72CB 55%, #D96570); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.cv--gemini .cv-box { background: #F0F4F9; border-radius: 999px; color: #444746; }
.cv--gemini .cv-send { background: #1A73E8; }
/* Claude Code: a dark terminal, no sidebar */
.cv--claude-code { background: #1A1918; color: #E8E6DF; border: 1px solid #3A3835; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.cv--claude-code .cv-bar { background: #2A2926; color: #A8A59B; }
.cv-term { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 14px 16px; white-space: pre-wrap; }
.cv-term .cv-dim { color: #A8A59B; }
.cv-term b { font-weight: 400; color: #E8E6DF; }
.cv-dot { font-style: normal; color: #DA7756; }
.cv-cursor { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: #E8E6DF; }
/* The hero colours its text white; each drawing keeps its own app's colours (--cv-fg main, --cv-dim quieter) */
.cv--claude { --cv-fg: #141413; --cv-dim: #5E5D59; }
.cv--chatgpt { --cv-fg: #0D0D0D; --cv-dim: #5D5D5D; }
.cv--gemini { --cv-fg: #1F1F1F; --cv-dim: #444746; }
.cv--claude-code { --cv-fg: #E8E6DF; --cv-dim: #A8A59B; }
.page-hero--ink .cv :is(p, li, span, b, div) { color: var(--cv-fg) !important; }
.page-hero--ink .cv :is(.cv-tool, .cv-tool span, .cv-box > span:first-child, .cv-dim, .cv-bar span) { color: var(--cv-dim) !important; }
.page-hero--ink .cv--claude-code .cv-dot { color: #DA7756 !important; }
@media (max-width: 53.75em) { .cv { height: 19rem; } .cv-body { grid-template-columns: 5.5rem minmax(0, 1fr); } }