/* The homepage demo — "try it now, keep it when you sign in".

   Shared byte for byte by the five castomo product sites; the canonical copy is
   castomapi-try/site-kit. It uses ONLY the site's own tokens (--paper, --paper-2, --field, --ink,
   --ink-2, --ink-3, --rule, --rule-w, --accent, --accent-ink, --accent-soft, --brand-1..3, --ok,
   --bad, --radius*, --shadow, --ease, --dur, --t-1..--t6), so each product keeps its ramp and every
   reader preference — dark, both high-contrast themes, larger text, wider spacing, reduced motion —
   works without a line here knowing about it. Renderer styles follow the engine's. */

/* ------------------------------------------------------------------ the ask */
.try { position: relative; }
.try-head { max-width: 70ch; margin-bottom: clamp(20px, 3vw, 32px); }
.try-head h2 { font-size: clamp(var(--t3), 4.4vw, var(--t5)); letter-spacing: -.03em; line-height: 1.02; margin: 0 0 14px; }
.try-head h2 em { font-style: normal; color: var(--accent-ink); }

.try-ask {
  position: relative; display: grid; gap: 4px; padding: 8px;
  background: var(--paper-2); border: var(--rule-w) solid var(--rule);
  border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.try-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.try-ask textarea,
.try-ask input[type="text"],
.try-ask input[type="search"] {
  width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit;
  font-size: clamp(var(--t0), 1.8vw, var(--t1)); line-height: 1.45; padding: 14px 16px 6px;
  resize: none; outline: none; min-height: 3.2em;
}
.try-ask textarea { min-height: 5.6em; }
.try-ask ::placeholder { color: var(--ink-3); opacity: 1; }
.try-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 6px 6px 14px; }
.try-bar .btn[type="submit"] { margin-inline-start: auto; }
/* The submit button's arrow nudges forward on hover, and hover always reads white-on-brand here —
   the base button's own :hover pairs a light fill with near-black text, which is too close to the
   ink colour to read as intentional. --brand-1 stays fixed across light and dark (only the two
   contrast themes redefine it), so one rule covers both without a dark-mode branch. */
.try-bar .btn .btn-ico { transition: transform var(--dur) var(--ease); }
.try-bar .btn:hover .btn-ico { transform: translateX(3px); }
.try-bar .btn-primary:hover { background: var(--brand-1); color: #fff; }
[data-theme^="contrast"] .try-bar .btn-primary:hover { background: var(--ink); color: var(--paper); outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.try-lane { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-1); color: var(--ink-3); min-height: 1.4em; }
.try-lane:empty { display: none; }
.try-lane::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.try-lane[data-lane="fast"]::before { background: var(--ok); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Options sit in the bar as small pill toggles: a radius, channels, posts a week. */
.try-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.try-opts legend { float: left; font-size: var(--t-1); color: var(--ink-3); margin-inline-end: 6px; padding: 0; }
.try-opts label { position: relative; display: inline-flex; }
.try-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* Said to screen readers, not shown. */
.try-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 44 px: the sites promise touch targets of at least that size. */
.try-opts span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px;
  border-radius: var(--radius-pill); border: var(--rule-w) solid var(--rule);
  font-size: var(--t-1); font-weight: 600; color: var(--ink-2); background: var(--paper-2);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.try-opts input:checked + span { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.try-opts input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.try-opts svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ ideas */
.try-ideas { margin-top: 16px; position: relative; }
.try-ideas-label { font-size: var(--t-1); color: var(--ink-3); margin: 0 0 8px; }
.try-ideas-rail { overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.try-ideas-rail::-webkit-scrollbar { display: none; }
.try-ideas-track { display: flex; gap: 10px; width: max-content; }
.try-ideas-track.is-moving { animation: try-marquee var(--marquee-s, 60s) linear infinite; }
.try-ideas-rail:has(.is-moving) {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.try-ideas-rail:hover .is-moving,
.try-ideas-rail:focus-within .is-moving { animation-play-state: paused; }
[dir="rtl"] .try-ideas-track.is-moving { animation-direction: reverse; }
@keyframes try-marquee { to { transform: translateX(-50%); } }

.try-idea {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border-radius: var(--radius-pill); border: var(--rule-w) solid var(--rule); background: var(--paper-2);
  color: var(--ink); font: inherit; font-size: var(--t-1); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease);
}
.try-idea:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }
.try-idea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.try-idea b { color: var(--accent-ink); font-weight: 700; }
.try-idea i { font-style: normal; inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.try-idea svg { inline-size: 14px; block-size: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ progress */
.try-progress {
  margin-top: 20px; padding: 16px 18px; display: grid; gap: 10px;
  border: var(--rule-w) solid var(--rule); border-radius: var(--radius); background: var(--paper-2);
}
.try-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.try-stage-label { font-weight: 600; }
.try-elapsed { color: var(--ink-3); font-size: var(--t-1); }
.try-meter { block-size: 8px; border-radius: var(--radius-pill); background: var(--field); overflow: hidden; }
.try-meter i {
  display: block; block-size: 100%; inline-size: 0; border-radius: inherit; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transition: inline-size .6s var(--ease);
}
.try-meter i::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: try-shine 1.6s var(--ease) infinite;
}
@keyframes try-shine { to { transform: translateX(100%); } }
.try-model, .try-quip { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.try-model:empty, .try-quip:empty { display: none; }
.try-quip { font-style: italic; }

/* ------------------------------------------------------------------ result, actions, status */
.try-stage { margin-top: 20px; position: relative; }
.try-stage:empty { display: none; }
.try-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-top: 18px;
  padding: 18px 20px; border-radius: var(--radius); border: var(--rule-w) solid var(--rule);
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--paper-2);
}
.try-claimed { inline-size: 100%; margin: 0; font-weight: 700; font-size: var(--t1); color: var(--ok); display: flex; align-items: center; gap: 8px; }
.try-claimed::before {
  content: "✓"; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); color: var(--paper-2); font-size: .8rem; box-shadow: var(--shadow);
}
.try-kept-note {
  inline-size: 100%; margin: 6px 0 0; padding-top: 10px; border-top: var(--rule-w) dashed var(--rule);
  font-size: var(--t-1); color: var(--ink-3);
}
/* Who is signed in, and Delete: quiet lines under the tiles, never another tile — they are the
   exceptions a visitor looks for, not choices competing with keep / share / start over. */
.try-account, .try-more {
  inline-size: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: var(--t-1); color: var(--ink-2); overflow-wrap: anywhere;
}
.try-account { padding-top: 10px; border-top: var(--rule-w) dashed var(--rule); }
.try-link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em;
}
.try-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- keep / share / start-over tiles
   Three equally weighted choices, not a row of buttons: a card each, with an icon that answers
   "what happens if I press this" before the label does. */
.try-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; inline-size: 100%; }
.try-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.try-tiles-1 { grid-template-columns: minmax(0, 1fr); max-inline-size: 300px; }
.try-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px; border-radius: var(--radius-sm); border: var(--rule-w) solid var(--rule);
  background: var(--paper-2); color: var(--ink); text-decoration: none; font: inherit;
  font-weight: 600; font-size: var(--t-1); text-align: center; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.try-tile .btn-ico { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
/* White text on the brand fill, in both light and dark — var(--ink)/var(--paper) flip meaning
   between those two themes (ink is the light colour in dark mode), so pairing them for a hover
   fill reads right in only one of the two. --brand-1 stays fixed across light/dark, so this one
   rule covers both; the two contrast themes get their own max-contrast ink/paper pairing below. */
.try-tile:hover, .try-tile:focus-visible {
  transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow);
  background: var(--brand-1); color: #fff;
}
.try-tile[data-icon="again"]:hover .btn-ico { transform: rotate(-90deg); }
.try-tile[data-icon="share"]:hover .btn-ico { transform: translateY(-3px); }
.try-tile[data-icon="save"]:hover .btn-ico, .try-tile[data-icon="open"]:hover .btn-ico { transform: scale(1.15); }
.try-tile-primary { background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.try-tile-primary:hover { background: var(--brand-1); color: #fff; }
[data-theme^="contrast"] .try-tile-primary { background: var(--ink); color: var(--paper); }
[data-theme^="contrast"] .try-tile:hover, [data-theme^="contrast"] .try-tile-primary:hover { background: var(--ink); color: var(--paper); outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (max-width: 480px) { .try-tiles:not(.try-tiles-1) { grid-template-columns: 1fr; } }
.try-share { inline-size: 100%; }
.try-share-link {
  inline-size: 100%; font: inherit; font-size: var(--t-1); padding: 10px 12px; color: var(--ink);
  border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm); background: var(--field);
}
.try-status { min-block-size: 1.5em; margin: 12px 0 0; font-size: var(--t-1); color: var(--ink-2); }
.try-status[data-tone="bad"] { color: var(--bad); font-weight: 600; }
.try-status[data-tone="ok"] { color: var(--ok); }
.try[data-busy] [type="submit"] { cursor: progress; opacity: .72; }

/* "Try again" after a failure that left something worth retrying, and the visitor's other ideas
   still held in this browser. Both sit under the status line; neither is shown when empty. */
.try-retry { margin-top: 10px; }
.try-retry[hidden], .try-earlier[hidden] { display: none; }
.try-retry-btn .btn-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
.try-retry-btn:hover .btn-ico, .try-retry-btn:focus-visible .btn-ico { transform: rotate(-90deg); }
.try-earlier {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--rule); background: var(--paper-2);
}
.try-earlier summary { cursor: pointer; font-weight: 600; font-size: var(--t-1); color: var(--ink-2); }
.try-earlier-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.try-earlier-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px;
  padding-top: 8px; border-top: var(--rule-w) dashed var(--rule);
}
.try-earlier-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.try-earlier-meta { font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
.try-earlier-open .btn-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
.try-earlier-open:hover .btn-ico, .try-earlier-open:focus-visible .btn-ico { transform: translateX(3px); }
/* The arrow points the way the line reads. */
[dir="rtl"] .try-earlier-open .btn-ico { transform: scaleX(-1); }
[dir="rtl"] .try-earlier-open:hover .btn-ico, [dir="rtl"] .try-earlier-open:focus-visible .btn-ico { transform: scaleX(-1) translateX(3px); }
.try-earlier-note { margin: 10px 0 0; font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 480px) {
  .try-earlier-item { grid-template-columns: minmax(0, 1fr) auto; }
  .try-earlier-meta { grid-column: 1; grid-row: 2; }
  .try-earlier-open { grid-column: 2; grid-row: 1 / span 2; }
}
[data-motion="reduce"] .try-retry-btn .btn-ico, [data-motion="reduce"] .try-earlier-open .btn-ico { transition: none; }
@media (prefers-reduced-motion: reduce) { .try-retry-btn .btn-ico, .try-earlier-open .btn-ico { transition: none; } }

/* ------------------------------------------------------------------ the "keep this" dialog */
.try-dialog {
  border: 0; padding: 0; color: var(--ink); background: var(--paper-2);
  border-radius: calc(var(--radius) + 8px); inline-size: min(520px, calc(100vw - 28px));
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55);
}
.try-dialog::backdrop { background: rgba(11, 12, 16, .55); backdrop-filter: blur(4px); }
.try-dialog[open] { animation: try-pop .24s var(--ease); }
@keyframes try-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.try-dialog-in { position: relative; display: grid; gap: 12px; padding: clamp(24px, 5vw, 38px); }
.try-dialog h2 { font-size: var(--t3); letter-spacing: -.02em; line-height: 1.08; margin: 0; padding-inline-end: 40px; }
.try-dialog .eyebrow { margin: 0; }
.try-dialog-text { margin: 0; color: var(--ink-2); line-height: 1.5; }
.try-dialog-choices { display: grid; gap: 10px; margin-top: 10px; }
.try-dialog-choices .btn { inline-size: 100%; }
.try-dialog-note { margin: 4px 0 0; font-size: var(--t-1); color: var(--ink-3); }
.try-dialog-x { position: absolute; inset-inline-end: 12px; inset-block-start: 12px; }

/* ------------------------------------------------------------------ motion preferences */
[data-motion="reduce"] .try-ideas-track,
[data-motion="reduce"] .try-meter i::after,
[data-motion="reduce"] .try-dialog[open],
[data-motion="reduce"] .cal-detail[open] { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .try-ideas-track, .try-meter i::after, .try-dialog[open], .cal-detail[open] { animation: none !important; }
  .try-meter i { transition: none; }
}

@media (max-width: 640px) {
  .try-bar { padding-inline-start: 8px; }
  .try-bar .btn[type="submit"] { inline-size: 100%; }
}

/* ------------------------------------------------------------------ ready-made starting points (castomFLOW) */
/* A fixed grid, not auto-fill: with 4 or 8 examples, auto-fill's own wrap point depends on viewport
   width in a way that leaves a ragged last row at some sizes. Naming the column count instead keeps
   every row full at 4 examples and drops to two even rows at 8, at every width down to tablet. */
.try-templates { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.try-templates li { display: grid; }
@media (max-width: 900px) { .try-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .try-templates { grid-template-columns: 1fr; } }
.try-template {
  position: relative; display: grid; gap: 6px; align-content: start; min-block-size: 136px; padding: 16px 16px 14px;
  font: inherit; color: var(--ink); text-align: start; cursor: pointer; background: var(--paper-2);
  border: var(--rule-w) solid var(--rule); border-radius: var(--radius);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.try-template:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.try-template:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.try-template-steps { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.try-template b { font-size: var(--t0); line-height: 1.25; }
.try-template-about { color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.try-or { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; font-size: var(--t-1); color: var(--ink-3); }
.try-or::before, .try-or::after { content: ""; flex: 1; border-block-start: var(--rule-w) solid var(--rule); }

/* ================================================================== renderers
   Everything below belongs to one of the four renderers. Form controls inside a result share one
   look, so an edited calendar post, a canvas setting and an area note feel like one product. */

:is(.cal-field, .cv-field, .area-note) :is(input, select, textarea) {
  inline-size: 100%; min-block-size: 40px; padding: 8px 10px; font: inherit; font-size: var(--t-1); color: var(--ink);
  background: var(--paper); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm);
}
:is(.cal-field, .cv-field, .area-note) :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
:is(.cal-field, .cv-field, .area-note) textarea { resize: vertical; line-height: 1.45; }
@keyframes try-pulse { 50% { opacity: .45; } }

/* ------------------------------------------------------------------ FABLS: the calendar */
.cal { --p1: var(--brand-2); --p2: #D97706; --p3: #DB2777; --p4: #0891B2; --p5: #7C3AED; display: grid; gap: 16px; }
[data-p="1"] { --pc: var(--p1); } [data-p="2"] { --pc: var(--p2); } [data-p="3"] { --pc: var(--p3); } [data-p="4"] { --pc: var(--p4); } [data-p="5"] { --pc: var(--p5); }
.cal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; }
.cal-month { margin: 0 0 4px; }
.cal-name { font-size: clamp(var(--t2), 3vw, var(--t3)); letter-spacing: -.02em; line-height: 1.05; margin: 0; min-block-size: 1.05em; }
.cal:not(.has-brand) .cal-name::after { content: ""; display: block; inline-size: 12ch; block-size: .9em; border-radius: 8px; background: var(--field); animation: try-pulse 1.4s ease-in-out infinite; }
.cal-voice { margin: 6px 0 0; color: var(--ink-2); max-inline-size: 70ch; }
.cal-voice:empty { display: none; }
.cal-side { display: grid; justify-items: end; gap: 8px; }
.cal-count { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.cal-total { font-size: var(--t4); letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.cal-filter { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cal-chan {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 4px 12px; cursor: pointer;
  border-radius: var(--radius-pill); border: var(--rule-w) solid var(--rule); background: var(--paper-2);
  color: var(--ink-2); font: inherit; font-size: var(--t-1);
}
.cal-chan b { color: var(--ink); }
.cal-chan[aria-pressed="false"] { opacity: .5; }
.cal-chan[aria-pressed="false"] span { text-decoration: line-through; }
.cal-ico { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cal-pillars { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cal-pillar { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-1); color: var(--ink-2); }
.cal-pillar i { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--pc); }
.cal-grid { border: var(--rule-w) solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { background: var(--field); border-block-end: var(--rule-w) solid var(--rule); }
.cal-dow span { padding: 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cal-day {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 4px; min-block-size: 118px; padding: 6px;
  border-inline-end: var(--rule-w) solid var(--rule); border-block-end: var(--rule-w) solid var(--rule); transition: background var(--dur);
}
.cal-day:nth-child(7n) { border-inline-end: 0; }
.cal-day.is-blank { background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--field) 7px 8px); }
.cal-day.is-weekend { background: color-mix(in srgb, var(--field) 50%, transparent); }
.cal-date { font-size: .78rem; font-weight: 700; color: var(--ink-3); justify-self: start; }
.cal-day.is-pulse .cal-date { animation: cal-date .7s var(--ease); }
@keyframes cal-date { 35% { color: var(--accent-ink); transform: scale(1.4); } }
.cal-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; min-inline-size: 0; }
.cal-post {
  inline-size: 100%; display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 5px;
  padding: 5px 6px 5px 7px; border: 0; border-inline-start: 3px solid var(--pc); border-radius: 6px;
  background: var(--field); color: var(--ink); font: inherit; font-size: .74rem; line-height: 1.2; text-align: start;
  cursor: grab; touch-action: manipulation;
}
.cal-post .cal-ico { inline-size: 14px; block-size: 14px; color: var(--ink-3); }
.cal-post:hover { background: var(--accent-soft); }
.cal-post:focus-visible, .cal-post.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-post.is-new { animation: cal-in .5s var(--ease) both; }
@keyframes cal-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
.cal-post.is-held { box-shadow: 0 0 0 3px var(--accent-soft); }
.cal-post.is-dragging { opacity: .35; }
.cal-time { color: var(--ink-3); font-size: .68rem; }
.cal-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; inline-size: 190px; box-shadow: var(--shadow); opacity: .95; }
.cal-day.is-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cal[data-hide~="instagram"] [data-channel="instagram"],
.cal[data-hide~="facebook"] [data-channel="facebook"],
.cal[data-hide~="blog"] [data-channel="blog"] { display: none; }
.cal.is-readonly .cal-post { cursor: pointer; }
/* The edit-post panel is a native <dialog>, not an inline section: below the calendar it went
   unnoticed on a page this long, so it now opens centred over a backdrop like the "keep this"
   dialog does. Two things here must never be set on the bare `.cal-detail`: `display` would beat
   the browser's `dialog:not([open]) { display: none }`, so a closed dialog stayed on screen at the
   end of <body>; and `position: relative` cancels the modal's `position: fixed`, so the dialog laid
   out at the top of the document and showModal() scrolled the page up to it. So the layout lives
   on `[open]` only, and the position is left to the browser (fixed, which also anchors the X). */
.cal-detail[open] { display: grid; }
.cal-detail {
  gap: 12px; padding: 18px 20px; border-radius: calc(var(--radius) + 8px);
  border: 0; background: var(--paper-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55);
  inline-size: min(560px, calc(100vw - 28px)); max-block-size: min(84vh, 720px); overflow: auto;
}
.cal-detail::backdrop { background: rgba(11, 12, 16, .55); backdrop-filter: blur(4px); }
.cal-detail[open] { animation: try-pop .24s var(--ease); }
.cal-detail h4 { margin: 0; font-size: var(--t1); padding-inline-end: 40px; }
.cal-detail .eyebrow { margin: 0; }
.cal-detail-x { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; }
.cal-hook { margin: 0; font-size: var(--t0); line-height: 1.5; }
.cal-cta { margin: 0; font-weight: 600; color: var(--accent-ink); }
.cal-meta { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--t-1); }
.cal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cal-field { display: grid; gap: 4px; font-size: var(--t-1); color: var(--ink-3); }
.cal-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cal-drag-hint { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 760px) {
  .cal-head { grid-template-columns: 1fr; }
  .cal-side { justify-items: start; }
  .cal-filter { justify-content: flex-start; }
  .cal-dow { display: none; }
  .cal-days { grid-template-columns: 1fr; }
  .cal-day { min-block-size: 0; grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto; align-items: start; padding: 10px 12px; border-inline-end: 0; }
  .cal-day.is-blank, .cal-day:not(:has(.cal-post)) { display: none; }
  .cal-date { font-size: var(--t0); }
  .cal-post { font-size: var(--t-1); padding: 8px 10px; }
}

/* ------------------------------------------------------------------ castoMIND: names and the team */
.ven { display: grid; gap: clamp(28px, 4vw, 44px); }
.ven-names-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-block-end: 12px; }
.ven-names-h .eyebrow { margin: 0; }
.ven-idea { margin: 0; color: var(--ink-2); font-style: italic; }
.ven-name-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ven-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ven-name-grid { grid-template-columns: 1fr; } }
/* A settled result shows one full row — four names, no half-empty second row — until "more
   names" is pressed. While a generation is still streaming in, every arriving card stays
   visible; hiding one mid-arrival would read as it having failed rather than not fitting yet. */
.ven:not(.is-streaming) .ven-name-grid:not(.is-expanded) .ven-name:nth-child(n+5) { display: none; }
.ven-more { margin-top: 12px; }
.ven-name {
  position: relative; display: grid; gap: 6px; align-content: start; min-block-size: 150px; padding: 18px 18px 16px; overflow: hidden;
  border-radius: var(--radius); border: var(--rule-w) solid var(--rule); background: var(--paper-2); color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.ven-name:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.ven-name:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ven-name.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ven-name.is-chosen::after {
  content: "✓"; position: absolute; inset-inline-end: 12px; inset-block-start: 12px; inline-size: 24px; block-size: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent-ink); color: var(--paper-2); font-size: .8rem;
}
.ven-name:disabled { cursor: default; opacity: .55; }
.ven-wordmark {
  font-size: clamp(var(--t2), 2.4vw, var(--t3)); font-weight: 700; letter-spacing: -.035em; line-height: 1; padding-inline-end: 28px;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme^="contrast"] .ven-wordmark { background: none; color: var(--ink); }
.ven-tagline { font-weight: 600; }
.ven-why { color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.ven-handle { font-size: .78rem; color: var(--ink-3); }
.ven-name.is-new { animation: ven-land .65s var(--ease) both; }
@keyframes ven-land { from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(4px); } }
.ven-name.is-waiting, .ven-agent.is-waiting { cursor: default; border-style: dashed; background: transparent; }
.ven-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--field), transparent); animation: ven-shim 1.6s linear infinite; }
@keyframes ven-shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ven-team .eyebrow { margin: 0 0 6px; }
.ven-team-h { font-size: clamp(var(--t2), 3vw, var(--t3)); letter-spacing: -.02em; line-height: 1.08; margin: 0 0 16px; }
/* Card reads as an ID card, once: an avatar carries the only saturated colour on it (the agent's
   own hue, so the same agent keeps the same face on every reload), everything else is the site's
   plain ink scale at one of three weights (name / role / body) and skills and tools share one
   quiet chip style — a card that mixes a coloured "Uses" chip with a grey "Skills" chip is a card
   that looks assembled rather than designed. */
.ven-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ven-agent {
  --face: hsl(var(--hue, 210) 62% 44%); --face-soft: hsl(var(--hue, 210) 70% 55% / .35);
  position: relative; display: flex; flex-direction: column; gap: 12px; min-block-size: 220px; padding: 20px 18px 18px; overflow: hidden;
  border-radius: var(--radius); border: var(--rule-w) solid var(--rule); background: var(--paper-2);
}
.ven-agent::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--face); }
[data-theme^="contrast"] .ven-agent { --face: var(--ink); --face-soft: var(--ink); }
[data-theme^="contrast"] .ven-agent::before { background: var(--ink); }
.ven-agent.is-new { animation: ven-seat .7s var(--ease) both; }
@keyframes ven-seat { from { opacity: 0; transform: translateY(16px); } }
.ven-agent-top { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.ven-avatar { inline-size: 56px; block-size: 56px; flex: none; }
.ven-face { fill: var(--face); }
.ven-ring { fill: none; stroke: var(--face-soft); stroke-width: 3; stroke-dasharray: 100; }
.ven-agent.is-new .ven-ring { animation: ven-ring 1.2s var(--ease) both; }
@keyframes ven-ring { from { stroke-dashoffset: 100; } }
.ven-initials { fill: #FFFFFF; font-weight: 700; font-size: 18px; }
[data-theme^="contrast"] .ven-initials { fill: var(--paper); }
.ven-agent-id { display: grid; gap: 2px; min-inline-size: 0; }
.ven-agent-name { font-size: var(--t1); font-weight: 700; color: var(--ink); line-height: 1.2; }
.ven-agent-role { font-size: var(--t-1); font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.ven-edit { inline-size: 100%; font: inherit; background: transparent; border: var(--rule-w) solid transparent; border-radius: var(--radius-sm); padding: 1px 6px; margin-inline-start: -7px; }
.ven-edit:hover { border-color: var(--rule); }
.ven-edit:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.ven-focus { margin: 0; color: var(--ink-2); line-height: 1.5; }
.ven-personality { margin: 0; color: var(--ink-3); font-style: italic; font-size: var(--t-1); line-height: 1.45; }
.ven-agent-group { display: grid; gap: 6px; }
.ven-group-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ven-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ven-tools { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ven-first { margin-block-start: auto; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--field); border-inline-start: 3px solid var(--face); font-size: var(--t-1); line-height: 1.45; }
[data-theme^="contrast"] .ven-first { border-inline-start-color: var(--ink); }
.ven-plan { display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--radius) + 4px); background: var(--ink); color: var(--paper); }
.ven-plan .eyebrow { margin: 0; color: var(--brand-3); }
.ven-plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; }
.ven-plan-row dt { font-size: var(--t-1); opacity: .72; }
.ven-plan-row dd { margin: 4px 0 0; font-weight: 600; line-height: 1.4; }
.ven-plan-channels { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-1); }
.ven-plan-channels span { opacity: .72; margin-inline-end: 4px; }
.ven-plan .chip-plain { background: rgba(255, 255, 255, .12); color: var(--paper); }
.ven-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ven-week li { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); line-height: 1.4; }
.ven-week i { font-style: normal; inline-size: 26px; block-size: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-3); color: #0B0C10; font-weight: 700; font-size: .8rem; }
.ven-plan.is-new { animation: ven-seat .7s var(--ease) both; }
.ven-build-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px;
  padding: 22px 24px; border-radius: calc(var(--radius) + 4px); border: var(--rule-w) solid var(--rule);
  background: linear-gradient(120deg, var(--accent-soft), transparent 65%), var(--paper-2);
  box-shadow: var(--shadow);
}
.ven-build-note { margin: 0; max-inline-size: 34ch; color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.ven.is-streaming .ven-build-row, .ven.is-readonly .ven-build-row { display: none; }

/* ------------------------------------------------------------------ castomFLOW and clickSomo: the canvas */
.cv { display: grid; gap: 12px; }
.cv-head { display: grid; gap: 4px; }
.cv-name {
  inline-size: 100%; max-inline-size: 40ch; margin-inline-start: -8px; padding: 2px 8px; font: inherit; font-size: clamp(var(--t1), 2.4vw, var(--t2));
  font-weight: 700; letter-spacing: -.02em; color: var(--ink); background: transparent; border: var(--rule-w) solid transparent; border-radius: var(--radius-sm);
}
.cv-name:hover:not([readonly]) { border-color: var(--rule); }
.cv-name:focus { outline: none; border-color: var(--accent); background: var(--paper-2); }
.cv-summary { margin: 0; color: var(--ink-2); max-inline-size: 75ch; }
.cv-summary:empty { display: none; }
.cv-tools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cv-tools-gap { flex: 1; }
.cv-zoom { min-inline-size: 4ch; text-align: center; font-size: var(--t-1); color: var(--ink-3); }
.cv-tools .icon-btn svg, .cv-inspector .icon-btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-body { position: relative; }
.cv-viewport {
  position: relative; block-size: clamp(440px, 64vh, 660px); overflow: hidden; cursor: grab; touch-action: none;
  border-radius: var(--radius); border: var(--rule-w) solid var(--rule); background-color: var(--paper-2);
  background-image: radial-gradient(var(--rule) 1.1px, transparent 1.3px); background-size: 22px 22px;
}
.cv-viewport:active { cursor: grabbing; }
.cv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cv-world.is-gliding { transition: transform .55s var(--ease); }
/* max-inline-size: none — the sites' `svg { max-width: 100% }` resolves against the world's zero width, a
   zero-width svg paints nothing even with overflow visible, and every link disappears. */
.cv-edges { position: absolute; left: 0; top: 0; inline-size: 1px; block-size: 1px; max-inline-size: none; max-block-size: none; overflow: visible; }
.cv-edge { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.cv-edge.is-yes { stroke: var(--ok); }
.cv-edge.is-no { stroke: var(--bad); }
.cv-edge.is-selected { stroke: var(--accent); stroke-width: 3; }
.cv-edge.is-ghost { stroke: var(--accent); stroke-dasharray: .02 .02; }
.cv-edge.is-new { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cv-draw .8s var(--ease) forwards; }
@keyframes cv-draw { to { stroke-dashoffset: 0; } }
.cv-edge-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; pointer-events: stroke; }
.cv.is-readonly .cv-edge-hit { pointer-events: none; }
.cv-edge-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-3); pointer-events: none; }
.cv-edge-del { cursor: pointer; }
.cv-edge-del circle { fill: var(--bad); }
.cv-edge-del path { stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
.cv-nodes { position: absolute; left: 0; top: 0; }
.cv-node {
  --gc: var(--brand-2);
  position: absolute; left: 0; top: 0; inline-size: 232px; block-size: 76px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--paper-2); border: var(--rule-w) solid var(--rule); cursor: grab; user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 26px -16px rgba(0, 0, 0, .38); transition: box-shadow var(--dur), border-color var(--dur);
}
.cv-node::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: -1px; inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--gc); }
.cv-node[data-group="trigger"], .cv-node[data-group="entry"] { --gc: #D97706; }
.cv-node[data-group="ai"] { --gc: #7C3AED; }
.cv-node[data-group="data"] { --gc: #0284C7; }
.cv-node[data-group="logic"], .cv-node[data-group="flow"] { --gc: #64748B; }
.cv-node[data-group="send"], .cv-node[data-group="action"] { --gc: var(--brand-2); }
.cv-node[data-group="app"] { --gc: #DB2777; }
.cv-node:hover { border-color: var(--gc); }
.cv-node:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cv-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.cv-node.is-dragging { cursor: grabbing; z-index: 2; box-shadow: var(--shadow); }
.cv-node.is-target { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cv-node.is-new { animation: cv-node-in .5s var(--ease) both; }
@keyframes cv-node-in { from { opacity: 0; scale: .82; } }
.cv-node-ico { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--gc); background: color-mix(in srgb, var(--gc) 15%, transparent); }
.cv-node-ico svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-node-text { display: grid; gap: 1px; min-inline-size: 0; }
.cv-node-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-node-kind { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cv-node-label { font-size: .9rem; line-height: 1.2; }
.cv-node-detail { font-size: .74rem; color: var(--ink-2); }
.cv-port { position: absolute; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink-3); }
.cv-in { left: -8px; top: calc(50% - 7px); }
.cv-out { right: -8px; top: calc(var(--at, 50%) - 7px); cursor: crosshair; transition: transform var(--dur), background var(--dur); }
.cv-out:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.cv-out.is-yes { border-color: var(--ok); }
.cv-out.is-no { border-color: var(--bad); }
.cv.is-readonly .cv-out { pointer-events: none; }
.cv-inspector {
  position: absolute; inset-block: 12px; inset-inline-end: 12px; z-index: 3; inline-size: min(320px, calc(100% - 24px)); overflow: auto;
  display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--radius); border: var(--rule-w) solid var(--rule);
  background: var(--paper-2); box-shadow: var(--shadow);
}
.cv-inspector .eyebrow { margin: 0; padding-inline-end: 36px; }
.cv-inspector-x { position: absolute; inset-inline-end: 8px; inset-block-start: 8px; }
.cv-field { display: grid; gap: 4px; font-size: var(--t-1); color: var(--ink-3); }
.cv-field p { margin: 0; color: var(--ink); }
.cv-field-title { font-size: var(--t-1); color: var(--ink-3); }
.cv-fieldset { display: grid; gap: 8px; }
.cv-pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: center; }
.cv-pair .icon-btn { inline-size: 36px; }
.cv-inspector-actions { display: flex; gap: 8px; }
.cv-add-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; inline-size: min(580px, 92vw); max-block-size: 380px; overflow: auto; padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px;
  background: var(--paper-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cv-add-h { margin: 0 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cv-add-item {
  display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 36px; padding: 6px 8px; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-1); text-align: start;
}
.cv-add-item:hover, .cv-add-item:focus-visible { background: var(--accent-soft); outline: none; }
.cv-add-item svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cv-hint { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.cv.is-readonly .cv-hint, .cv.is-readonly .cv-tools { display: none; }
@media (max-width: 760px) {
  .cv-viewport { block-size: 470px; }
  .cv-inspector { position: static; inline-size: auto; margin-block-start: 12px; box-shadow: none; }
}

/* ------------------------------------------------------------------ iKonekt: the area */
.area { display: grid; gap: 22px; }
.area-where { margin: 0 0 6px; }
.area-total { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.area-total-n { font-size: clamp(3.2rem, 10vw, 6.4rem); font-weight: 700; letter-spacing: -.05em; line-height: .9; color: var(--ink); }
.area.is-scanning .area-total-n { color: var(--ink-3); animation: try-pulse 1.2s ease-in-out infinite; }
.area-total-text { font-size: var(--t1); color: var(--ink-2); max-inline-size: 34ch; line-height: 1.35; }
.area-nosite { margin: 10px 0 0; font-size: var(--t0); font-weight: 600; color: var(--accent-ink); }
.area-nosite:empty { display: none; }
.area-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.area-figure { margin: 0; }
.area-figure figcaption { margin-top: 8px; text-align: center; font-size: var(--t-1); color: var(--ink-3); }
.area-map { display: block; inline-size: 100%; max-inline-size: 440px; block-size: auto; margin-inline: auto; }
.area-disc { fill: var(--field); }
.area-ring { fill: none; stroke: var(--rule); stroke-dasharray: 3 5; }
.area-ring.is-edge { stroke: var(--accent-ink); stroke-dasharray: none; stroke-width: 2; }
.area-centre { fill: var(--accent-ink); }
.area-radius { font-size: 14px; fill: var(--ink-3); }
.area-dot { fill: var(--accent); opacity: var(--o, .8); }
[data-theme^="contrast"] .area-dot { fill: var(--ink); }
.area-map.is-growing .area-dot { transform-box: fill-box; transform-origin: center; animation: area-dot .6s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes area-dot { from { transform: scale(0); opacity: 0; } }
.area-sweep { fill: var(--accent-soft); transform-origin: 200px 200px; animation: area-sweep 2.2s linear infinite; }
@keyframes area-sweep { to { transform: rotate(360deg); } }
.area-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.area-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.area-cat-name { font-weight: 600; }
.area-cat b { color: var(--ink-2); font-weight: 600; }
.area-bar { grid-column: 1 / -1; position: relative; display: block; block-size: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--field); }
.area-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); animation: area-bar .9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes area-bar { from { inline-size: 0; } }
.area-source { margin: 0; font-size: var(--t-1); color: var(--ink-3); max-inline-size: 80ch; }
.area-note { display: grid; gap: 4px; max-inline-size: 60ch; font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 760px) { .area-body { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ every renderer respects reduced motion */
[data-motion="reduce"] :is(.cal-post, .cal-date, .ven-name, .ven-agent, .ven-ring, .ven-plan, .ven-shimmer, .cv-node, .cv-edge, .area-dot, .area-bar, .area-sweep, .area-total-n, .cai-person, .cai-col, .cai-produces, .cai-shimmer)::after,
[data-motion="reduce"] :is(.cal-post, .cal-date, .ven-name, .ven-agent, .ven-ring, .ven-plan, .ven-shimmer, .cv-node, .cv-edge, .area-dot, .area-sweep, .area-total-n, .cai-person, .cai-col, .cai-produces, .cai-shimmer) { animation: none !important; }
[data-motion="reduce"] .cv-world.is-gliding { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.cal-post, .cal-date, .ven-name, .ven-agent, .ven-ring, .ven-plan, .ven-shimmer, .cv-node, .cv-edge, .area-dot, .area-sweep, .area-total-n, .cai-person, .cai-col, .cai-produces, .cai-shimmer), .area-bar::after { animation: none !important; }
  .cv-world.is-gliding { transition: none; }
}


/* ── castomAI: an app assembling itself ──────────────────────────────────────────────────────
   The preview wears the APP's palette, not the site's. Every colour below resolves through
   --cai-color-*, which app.js sets on .cai from the model's `look` line, so one assignment
   re-skins the whole block — including cards that arrived before the palette did. The fallbacks
   are the castomAI ramp, which is what shows while the header is still being written. */
.cai {
  --cai-color-primary: #0052b6;
  --cai-color-secondary: #008fff;
  --cai-color-background: #f4f5f8;
  --cai-color-navbar: #003c87;
  --cai-color-text: #0b0c10;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.cai-section { display: grid; gap: 12px; }

.cai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cai-head-text { flex: 1 1 22rem; }
.cai-name { margin: 6px 0 4px; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
/* Before the header line lands the name is an empty node; without a reserved line the whole
   block would jump upward the moment it arrives. */
.cai-name.is-waiting::after { content: ""; display: inline-block; inline-size: 12ch; block-size: .8em; border-radius: 6px; background: var(--field); }
.cai-short { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.cai-purpose { margin: 6px 0 0; color: var(--ink-3); font-size: .95rem; }
.cai-swatches { display: flex; gap: 6px; flex: none; padding-top: 10px; }
.cai-swatch { inline-size: 26px; block-size: 26px; border-radius: 8px; border: 1px solid var(--rule); }

/* ── the cast ── */
.cai-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.cai-person { position: relative; overflow: hidden; display: flex; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.cai-person.is-waiting { border-style: dashed; background: transparent; min-block-size: 92px; }
.cai-person.is-new { animation: cai-in .6s var(--ease) both; }
.cai-avatar {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--cai-color-primary); color: #fff;
}
.cai-person-name { margin: 2px 0 2px; font-size: 1rem; }
.cai-person-slogan { margin: 0; font-size: .9rem; color: var(--cai-color-primary); font-weight: 500; }
.cai-person-desc { margin: 6px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.cai-person-brief { margin: 6px 0 0; font-size: .78rem; color: var(--ink-3); }

/* ── what it produces ── */
.cai-produces { padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.cai-produces.is-new { animation: cai-in .6s var(--ease) both; }
.cai-entity-name { margin: 6px 0 4px; font-size: 1.1rem; }
.cai-entity-desc { margin: 0 0 10px; font-size: .9rem; color: var(--ink-2); }
.cai-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 6px 16px; list-style: none; margin: 0; padding: 0; }
.cai-field { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-block-end: 1px solid var(--rule); font-size: .88rem; }
.cai-field-label { color: var(--ink); }
/* A field is either something the visitor types or something the app works out. That is the only
   distinction worth drawing here; the mustache template behind it belongs in the editor. */
.cai-field-kind { flex: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cai-field-kind.is-ai { color: var(--cai-color-secondary); font-weight: 600; }

/* ── the flow ── */
.cai-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; align-items: start; }
.cai-col { position: relative; overflow: hidden; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.cai-col.is-waiting { border-style: dashed; background: transparent; min-block-size: 140px; }
.cai-col.is-new { animation: cai-in .6s var(--ease) both; }
.cai-col-no {
  display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: var(--cai-color-navbar); color: #fff; font-size: .75rem; font-weight: 700; margin-block-end: 8px;
}
.cai-col-name { margin: 0 0 4px; font-size: 1rem; }
.cai-col-desc { margin: 0 0 10px; font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.cai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cai-step { padding: 10px; border-radius: 10px; background: var(--field); display: grid; gap: 4px; }
.cai-step-name { font-size: .88rem; font-weight: 600; }
.cai-step-desc { font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.cai-step-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cai-tag { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-3); }
.cai-tag.is-ai { border-color: var(--cai-color-secondary); color: var(--cai-color-secondary); }

.cai-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--field), transparent); animation: ven-shim 1.6s linear infinite; }
.cai-build-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cai-build-note { margin: 0; font-size: .85rem; color: var(--ink-3); }

@keyframes cai-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }