/* PenEcho for AI agents — shared setup card (homepage, Downloads, Dashboard).
   Every rule is scoped to .agent-setup; variants only swap the tokens below. */

.agent-setup {
  --as-bg:#ffffff; --as-ink:#1d1d1f; --as-muted:#6e6e73; --as-line:rgba(0,0,0,.1);
  --as-soft:#f5f5f7; --as-code:#f5f5f7; --as-window:#ffffff;
  --as-accent:#0071e3; --as-accent-ink:#ffffff; --as-mark:#e5484d;
  --as-glow:linear-gradient(120deg,#0071e3 0%,#5e5ce6 45%,#bf5af2 100%);
  --as-radius:24px;
  --as-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  container-type:inline-size;
  color:var(--as-ink);
}
.agent-setup[hidden] { display:none!important; }
.agent-setup[data-variant="home"] {
  --as-bg:#161617; --as-ink:#f5f5f7; --as-muted:#a1a1a6; --as-line:rgba(255,255,255,.14);
  --as-soft:rgba(255,255,255,.06); --as-code:#000000; --as-window:#1d1d1f;
  --as-accent:#2997ff; --as-accent-ink:#00111f; --as-mark:#ff7a85;
  --as-glow:linear-gradient(120deg,#64d2ff 0%,#8e8cff 50%,#ff7ad9 100%);
  margin-top:clamp(56px,7vw,88px);
}
.agent-setup[data-variant="console"] {
  --as-bg:var(--pe-surface,#fff); --as-ink:var(--pe-ink,#20242c); --as-muted:var(--pe-ink-3,#626b78); --as-line:var(--pe-line,rgba(31,36,45,.14));
  --as-soft:var(--pe-surface-muted,#f2f3f6); --as-code:var(--pe-surface-muted,#f2f3f6); --as-window:var(--pe-surface,#fff);
  --as-accent:var(--pe-accent,#4f46e5); --as-accent-ink:var(--pe-accent-ink,#fff);
  --as-glow:linear-gradient(120deg,var(--pe-accent,#4f46e5) 0%,#8e8cff 55%,#d16ad8 100%);
  --as-radius:var(--pe-r-group,16px);
  margin-bottom:28px;
}

.agent-setup-card {
  position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,3.6vw,44px);
  padding:clamp(22px,3.6vw,44px); border:1.5px solid transparent; border-radius:var(--as-radius);
  background:linear-gradient(var(--as-bg),var(--as-bg)) padding-box,var(--as-glow) border-box;
  box-shadow:0 30px 80px -48px rgba(94,92,230,.55);
}
.agent-setup-main, .agent-setup-side { min-width:0; }
.agent-setup-eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px; color:var(--as-muted); font-size:13px; line-height:1.4; letter-spacing:0; }
.agent-setup-badge { padding:3px 10px; border-radius:999px; background:var(--as-glow); color:#fff; font-size:12px; font-weight:600; }
.agent-setup[data-variant="home"] .agent-setup-badge { color:#000; }
.agent-setup .agent-setup-title { margin:0; color:var(--as-ink); font-size:clamp(24px,3.1vw,34px); font-weight:700; line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
.agent-setup[data-variant="console"] .agent-setup-title { font-size:clamp(20px,2.4vw,26px); font-weight:600; }
.agent-setup-lead { margin:12px 0 0; max-width:56ch; color:var(--as-muted); font-size:16px; line-height:1.5; letter-spacing:-.005em; }
.agent-setup[data-variant="console"] .agent-setup-lead { font-size:14px; }

.agent-setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; padding:0; list-style:none; counter-reset:agent-step; }
.agent-setup-steps li { counter-increment:agent-step; display:grid; align-content:start; gap:3px; min-width:0; font-size:13px; line-height:1.45; }
.agent-setup-steps li::before { content:counter(agent-step); display:grid; place-items:center; width:24px; height:24px; margin-bottom:6px; border-radius:50%; background:var(--as-accent); color:var(--as-accent-ink); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.agent-setup-steps strong { color:var(--as-ink); font-size:14px; font-weight:600; }
.agent-setup-steps span { color:var(--as-muted); }

.agent-setup-prompt { overflow:hidden; border:1px solid var(--as-line); border-radius:14px; background:var(--as-code); }
.agent-setup-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--as-line); color:var(--as-muted); font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.agent-setup button.agent-setup-copy { flex:none; min-height:36px; padding:0 16px; border:0; border-radius:999px; background:var(--as-accent); color:var(--as-accent-ink); font-family:inherit; font-size:14px; font-weight:600; line-height:1; letter-spacing:0; text-transform:none; cursor:pointer; transition:transform .15s ease,filter .15s ease; }
.agent-setup button.agent-setup-copy:hover { filter:brightness(1.08); }
.agent-setup button.agent-setup-copy:active { transform:scale(.97); }
.agent-setup button.agent-setup-copy[data-copied]::before { content:"✓ "; }
.agent-setup-prompt pre { margin:0; padding:14px 16px 16px; color:var(--as-ink); font:13px/1.62 var(--as-mono); white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
.agent-setup-prompt code { font:inherit; color:inherit; background:none; padding:0; }
.agent-setup-status { min-height:20px; margin:8px 0 0; color:var(--as-muted); font-size:13px; line-height:1.5; }

.agent-setup-visual { margin:0 0 18px; }
.agent-setup-visual svg { display:block; width:100%; height:auto; font-family:inherit; }
.agent-setup-visual .as-window { fill:var(--as-window); stroke:var(--as-line); }
.agent-setup-visual .as-rule { stroke:var(--as-line); }
.agent-setup-visual .as-light, .agent-setup-visual .as-reply, .agent-setup-visual .as-dot { fill:var(--as-line); }
.agent-setup-visual .as-input { fill:none; stroke:var(--as-line); }
.agent-setup-visual .as-ask { fill:var(--as-accent); }
.agent-setup-visual .as-ask-text { fill:var(--as-accent-ink); font-size:10px; font-weight:600; }
.agent-setup-visual .as-node { fill:var(--as-window); stroke:var(--as-ink); stroke-width:1.2; }
.agent-setup-visual .as-node-accent { stroke:var(--as-accent); stroke-width:1.6; }
.agent-setup-visual .as-node-text { fill:var(--as-ink); font-size:11px; font-weight:600; text-anchor:middle; }
.agent-setup-visual .as-edge, .agent-setup-visual .as-head { fill:none; stroke:var(--as-muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.agent-setup-visual .as-ink { fill:none; stroke:var(--as-mark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:0; animation:agent-setup-ink 1.6s .4s ease-out both; }
.agent-setup-visual .as-ink-text { fill:var(--as-mark); font-size:13px; font-weight:600; font-style:italic; font-family:"Bradley Hand","Segoe Print","Kaiti SC","KaiTi",cursive; }
@keyframes agent-setup-ink { from { stroke-dashoffset:420; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) { .agent-setup-visual .as-ink { animation:none; } }

.agent-setup-examples-title { margin:0 0 10px; color:var(--as-ink); font-size:14px; font-weight:600; }
.agent-setup-examples-title small { margin-left:6px; color:var(--as-muted); font-size:12px; font-weight:400; }
.agent-setup-examples ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.agent-setup .agent-setup-examples button { display:block; width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--as-line); border-radius:12px; background:var(--as-soft); color:var(--as-ink); font:inherit; font-size:14px; line-height:1.4; text-align:left; letter-spacing:-.005em; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.agent-setup .agent-setup-examples button:hover { border-color:var(--as-accent); }
.agent-setup .agent-setup-examples button[data-copied] { border-color:var(--as-accent); background:color-mix(in srgb,var(--as-accent) 12%,transparent); }

.agent-setup-foot { grid-column:1/-1; display:grid; gap:4px; padding-top:18px; border-top:1px solid var(--as-line); color:var(--as-muted); font-size:13px; line-height:1.55; }
.agent-setup-foot p { margin:0; }
.agent-setup-foot code { padding:1px 6px; border-radius:6px; background:var(--as-soft); color:var(--as-ink); font:12px/1.5 var(--as-mono); overflow-wrap:anywhere; }
.agent-setup-foot a, .agent-setup button.agent-setup-link { color:var(--as-accent); }
.agent-setup button.agent-setup-link { padding:0; border:0; background:none; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.agent-setup button.agent-setup-hide { position:absolute; top:12px; right:12px; min-height:32px; padding:0 12px; border:1px solid var(--as-line); border-radius:999px; background:var(--as-bg); color:var(--as-muted); font:inherit; font-size:12px; cursor:pointer; }
.agent-setup button.agent-setup-hide:hover { color:var(--as-ink); }
.agent-setup :is(button,a,pre):focus-visible { outline:2px solid var(--as-accent); outline-offset:3px; }

@container (max-width:820px) {
  .agent-setup-card { grid-template-columns:1fr; }
  .agent-setup-visual { max-width:460px; }
}
@container (max-width:560px) {
  .agent-setup-card { padding:20px 18px; }
  .agent-setup-steps { grid-template-columns:1fr; gap:12px; }
  .agent-setup-steps li { grid-template-columns:24px minmax(0,1fr); column-gap:10px; }
  .agent-setup-steps li::before { grid-row:span 2; margin:0; }
  .agent-setup-prompt-head { flex-wrap:wrap; }
  .agent-setup button.agent-setup-copy { flex:1 1 auto; }
  .agent-setup-lead { font-size:15px; }
  .agent-setup button.agent-setup-hide { top:10px; right:10px; }
  .agent-setup[data-dismiss-key] .agent-setup-eyebrow { padding-right:64px; }
}

/* Downloads hero: a visible route for people who already work in an AI agent. */
.downloads-agent-jump { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border:1.5px solid transparent; border-radius:999px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#0071e3 0%,#5e5ce6 45%,#bf5af2 100%) border-box; color:#1d1d1f!important; font-size:15px; font-weight:500; line-height:1.35; text-decoration:none!important; box-shadow:0 10px 30px -18px rgba(94,92,230,.7); transition:transform .15s ease; }
.downloads-agent-jump::before { content:"✦"; color:#5e5ce6; }
.downloads-agent-jump:hover { transform:translateY(-1px); }
.downloads-agents { margin:clamp(32px,5vw,56px) 0; scroll-margin-top:72px; }