/* "Tu primer agente" / "Your first agent": a calm tutorial. Soft neutral
   paper, one teal accent, a plain sans (Plus Jakarta Sans, self-hosted), much
   air, and colour only where it carries meaning: one fixed colour per part of
   the agent's folder. The English post imports this file. Everything shared
   with the other posts is in ../blog.css.

   The reader can pick light or dark; the default follows the system. The
   palette sits on :root so the page's own scrollbar can read it (blog.css). */

:root {
  --scroll-track: var(--paper);
  --scroll-thumb: #c3cdca;
  --scroll-thumb-hover: var(--teal);

  --paper: #f7f8f7;
  --panel: #ffffff;
  --ink: #1c2422;
  --ink-soft: #5d6966;
  --line: #e1e6e4;
  --chip: #edf1ef;
  --teal: #1d6b66;
  --on-teal: #ffffff;
  --teal-wash: #e3f0ee;
  --warn: #94580c;
  --warn-wash: #fbf0de;
  --ok: #2e7a4d;
  --ok-wash: #e4f2e9;
  --bad: #b03a2e;

  /* One colour per part of the folder, the same in the text, the explorer,
     the drawings and the folder check. */
  --f-agents: #c03b6f;
  --f-data: #2e7a4d;
  --f-skills: #a35f0a;
  --f-scripts: #6a4fc0;
  --f-exports: #2a6a94;

  --sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scroll-thumb: #3a4644;
    --paper: #161a19;
    --panel: #1d2322;
    --ink: #e5ebe9;
    --ink-soft: #9aa7a3;
    --line: #2c3634;
    --chip: #242c2a;
    --teal: #6cc2b8;
    --on-teal: #0f1817;
    --teal-wash: #1d3330;
    --warn: #e9b465;
    --warn-wash: #382b15;
    --ok: #7fcf9c;
    --ok-wash: #1c3324;
    --bad: #f08a7e;
    --f-agents: #ff8db5;
    --f-data: #7fcf9c;
    --f-skills: #f0b468;
    --f-scripts: #b9a3ff;
    --f-exports: #86c1ff;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --scroll-thumb: #3a4644;
  --paper: #161a19;
  --panel: #1d2322;
  --ink: #e5ebe9;
  --ink-soft: #9aa7a3;
  --line: #2c3634;
  --chip: #242c2a;
  --teal: #6cc2b8;
  --on-teal: #0f1817;
  --teal-wash: #1d3330;
  --warn: #e9b465;
  --warn-wash: #382b15;
  --ok: #7fcf9c;
  --ok-wash: #1c3324;
  --bad: #f08a7e;
  --f-agents: #ff8db5;
  --f-data: #7fcf9c;
  --f-skills: #f0b468;
  --f-scripts: #b9a3ff;
  --f-exports: #86c1ff;
  color-scheme: dark;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../../resources/fonts/PlusJakartaSans-Latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.agente {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.agente ::selection {
  background: var(--teal-wash);
  color: var(--ink);
}

.agente .topbar {
  max-width: 1180px;
  align-items: center;
}

.agente .back-link,
.agente .feed-link {
  color: var(--ink-soft);
}

.topbar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lang-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.theme-switch {
  display: inline-flex;
  border-radius: 999px;
  background: var(--chip);
  padding: 3px;
}

.theme-switch button {
  font: 600 0.8rem var(--sans);
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.theme-switch button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.agente :focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* === The text column === */
.agente .post {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-md) var(--sp-lg);
}

.agente .post-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.agente .post h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: var(--sp-xs) 0 var(--sp-sm);
  text-wrap: balance;
}

.agente .post-standfirst {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.agente .post .post-byline {
  margin-top: var(--sp-md);
  color: var(--ink-soft);
}

.agente .post h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--sp-sm);
  text-wrap: balance;
}

.agente .post h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--sp-lg) 0 var(--sp-xs);
}

.agente .post > section {
  padding-top: var(--sp-2xl);
}

/* The line under a section heading that says what the section does: a
   subtitle, smaller and lighter than the text, so a fast reader can skip it. */
.agente .post .section-lead {
  margin: -0.35em 0 var(--sp-md);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

.agente .post .section-lead + p {
  margin-top: 0;
}

.agente .step-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}

.agente .post p,
.agente .post li,
.agente .post dd {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
}

.agente .post p + p {
  margin-top: 1em;
}

.agente .post p a,
.agente .post li a,
.agente .post dd a,
.agente .post figcaption a,
.agente .post td a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background-image: none;
}

.agente .post ul,
.agente .post ol {
  margin: var(--sp-sm) 0;
  padding-left: 1.4em;
}

.agente .post li + li {
  margin-top: 0.4em;
}

.agente .post li::marker {
  color: var(--teal);
}

.agente .post strong {
  font-weight: 700;
  color: var(--ink);
}

.agente .post code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--chip);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  color: var(--ink);
}

.agente .post .short-version-lead {
  margin-top: var(--sp-lg);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.agente .post .short-version {
  list-style: none;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line);
}

.agente .post .short-version li {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* === Key terms ===
   A term is a plain link to its line in the glossary, so it works with no
   script. At rest it is only bold, with no underline, so a fast reader is not
   slowed down. On hover, tutorial.js shows the glossary line in a box and
   lights the related terms; the rest of the paragraph fades. */
.agente .post a.term {
  color: inherit;
  font-weight: 650;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.agente .post a.term:hover,
.agente .post a.term.is-on {
  color: var(--teal);
  text-decoration: underline 3px;
  text-underline-offset: 5px;
}

.agente .post a.term.is-related {
  text-decoration: underline 2px var(--teal);
  text-underline-offset: 5px;
}

.agente .post .is-dimmed {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: color 0.25s;
}

.agente .post .is-dimmed a.term.is-on,
.agente .post .is-dimmed a.term.is-related {
  color: var(--ink);
}

.term-tip {
  position: fixed;
  z-index: 30;
  max-width: min(330px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(0, 0, 0, 0.12);
  font: 500 0.95rem/1.5 var(--sans);
  pointer-events: none;
}

.term-tip b {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}

.term-tip .term-tip-related {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* === Folder parts: one colour each === */
.part {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.part-agents { color: var(--f-agents); }
.part-data { color: var(--f-data); }
.part-skills { color: var(--f-skills); }
.part-scripts { color: var(--f-scripts); }
.part-exports { color: var(--f-exports); }

/* === Notes: a tip at the side of the text === */
.agente .post .note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  margin: var(--sp-md) 0;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line);
}

.agente .post .note::before {
  content: attr(data-icon);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--teal);
  font-weight: 800;
  font-size: 0.9rem;
}

.agente .post .note p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.agente .post .note p strong {
  display: block;
  color: var(--ink);
}

/* === Deeper reading, folded === */
.agente .post details.more {
  margin: var(--sp-md) 0;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.agente .post details.more > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
}

.agente .post details.more > summary::-webkit-details-marker {
  display: none;
}

.agente .post details.more > summary::before {
  content: "?";
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 800;
}

.agente .post details.more[open] > summary {
  border-bottom: 1px solid var(--line);
}

.agente .post details.more > div {
  padding: 4px 16px 16px;
}

.agente .post details.more p,
.agente .post details.more li {
  font-size: 1rem;
  line-height: 1.65;
}

/* === Choices: the example and the app ===
   Without a script every variant shows, each with its label. With the
   script, the page shows the reader's choice and hides the rest. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: var(--sp-sm) 0 var(--sp-md);
  padding: 0;
  list-style: none;
}

.agente .post .choice-grid li + li {
  margin-top: 0;
}

.choice {
  height: 100%;
  border: 0;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  text-align: left;
  font: inherit;
  color: var(--ink);
}

.choice b {
  font-size: 1.02rem;
}

.choice span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

button.choice {
  cursor: pointer;
  width: 100%;
}

button.choice:hover {
  box-shadow: 0 0 0 1.5px var(--teal);
}

button.choice[aria-pressed="true"] {
  background: var(--teal-wash);
  box-shadow: 0 0 0 2px var(--teal);
}

.variant {
  margin: var(--sp-sm) 0;
}

.variant-label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.js-ready .variant-label {
  display: none;
}

.js-ready .variant-label.keep {
  display: inline-block;
}

.variant-switch {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.variant-switch button {
  font: inherit;
  font-weight: 600;
  color: var(--teal);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === The app picker === */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--sp-sm) 0;
}

.chip {
  font: 600 0.95rem var(--sans);
  color: var(--ink);
  background: var(--chip);
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--teal);
  color: var(--on-teal);
}

.picker-result {
  display: grid;
  gap: 10px;
  margin-top: var(--sp-sm);
}

.app-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.app-card.is-best {
  box-shadow: 0 0 0 2px var(--teal);
}

.app-card .app-tag {
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--chip);
  color: var(--ink-soft);
}

.app-card.is-best .app-tag {
  background: var(--teal);
  color: var(--on-teal);
}

.agente .post .app-card h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.agente .post .app-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.app-card .use-app {
  justify-self: start;
  font: 600 0.88rem var(--sans);
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
}

.app-card.is-chosen .use-app {
  background: var(--teal);
  color: var(--on-teal);
}

.agente .post .warnbox {
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--warn-wash);
  font-size: 1rem;
  line-height: 1.6;
}

/* === Tables === */
.table-wrap {
  overflow-x: auto;
  margin: var(--sp-md) 0;
}

.agente .post table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.agente .post th,
.agente .post td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.5;
}

.agente .post th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* === Code blocks with a copy button === */
.codeblock {
  position: relative;
  margin: var(--sp-sm) 0 var(--sp-md);
}

.codeblock pre {
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  overflow-x: auto;
  font: 0.9rem/1.65 var(--mono);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.codeblock .file-name {
  display: block;
  margin-bottom: 6px;
  font: 600 0.8rem var(--mono);
  color: var(--ink-soft);
}

.copy-button {
  position: absolute;
  top: 34px;
  right: 10px;
  font: 600 0.8rem var(--sans);
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
}

.codeblock.no-name .copy-button {
  top: 10px;
}

/* A message to send to the agent */
.prompt pre {
  background: var(--teal-wash);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 1rem;
}

/* === Step done === */
.done-check {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: var(--sp-md);
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--chip);
  font-weight: 650;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ink);
}

.done-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.done-check:has(input:checked) {
  background: var(--ok-wash);
  color: var(--ok);
}

/* === The folder explorer ===
   Without a script it is a list: each part, its job and who reads it. The
   script turns it into a two-pane explorer, with the job of the chosen part
   on the right. */
.explorer {
  margin: var(--sp-md) 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 12px 30px -24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.explorer-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 11px 16px;
  background: var(--chip);
  font: 0.86rem var(--mono);
  color: var(--ink-soft);
}

.explorer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.agente .post .tree {
  list-style: none;
  margin: 0;
  padding: 10px;
}

.agente .post .tree li + li {
  margin-top: 4px;
}

.tree-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 10px;
  border-radius: 12px;
}

.tree-item svg {
  color: var(--c);
  margin-top: 3px;
}

.tree-name {
  font: 600 0.95rem var(--mono);
  color: var(--ink);
}

.tree-name small {
  font: 500 0.8rem var(--sans);
  color: var(--c);
  margin-left: 6px;
}

.tree-item.is-hidden-file .tree-name::after {
  content: attr(data-hidden-label);
  margin-left: 6px;
  font: 500 0.72rem var(--sans);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--chip);
}

.agente .post .tree-desc {
  grid-column: 2;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.tree-who {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tree-who span {
  font-size: 0.78rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink-soft);
}

.explorer.is-interactive .explorer-body {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.explorer.is-interactive .tree-item {
  cursor: pointer;
  grid-template-columns: 22px minmax(0, 1fr);
}

.explorer.is-interactive .tree-item:hover {
  background: color-mix(in srgb, var(--c) 9%, transparent);
}

.explorer.is-interactive .tree-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--c) 15%, transparent);
}

.explorer.is-interactive .tree-desc,
.explorer.is-interactive .tree-who {
  display: none;
}

.explorer-detail {
  display: none;
}

.explorer.is-interactive .explorer-detail {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  background: color-mix(in srgb, var(--c) 6%, var(--panel));
}

.agente .post .explorer-detail .detail-title {
  margin: 0;
  font: 650 1rem var(--mono);
  color: var(--c);
}

.agente .post .explorer-detail p {
  font-size: 1rem;
  line-height: 1.6;
}

.explorer-detail .tree-who {
  display: flex !important;
}

@media (max-width: 640px) {
  .explorer.is-interactive .explorer-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === A conversation: the agent is the visor, the person a simple figure === */
.chat {
  display: grid;
  gap: 14px;
  margin: var(--sp-md) 0;
  padding: 20px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.msg {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.msg.from-person {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.msg .avatar {
  width: 34px;
  height: 34px;
}

.msg.from-person .avatar {
  order: 2;
}

.agente .post .bubble {
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 92%;
}

.msg.from-person .bubble {
  justify-self: end;
  background: var(--teal);
  color: var(--on-teal);
  border-bottom-right-radius: 6px;
}

.msg.from-agent .bubble {
  background: var(--chip);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}

.msg-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.msg-steps span {
  font: 0.78rem var(--mono);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
}

.msg-steps .ask {
  background: var(--warn-wash);
  color: var(--warn);
}

.agente .post .chat-who {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* The two icons of every conversation in the post: a robot for the AI
   (#ico-bot) and a person for the reader (#ico-user), both symbols in the
   hidden SVG at the top of the page. The robot's eyes blink every 7 s. */
.visor-eyes ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: visor-blink 7s infinite;
}

@keyframes visor-blink {
  0%, 46%, 50%, 100% { transform: scaleY(1); }
  48% { transform: scaleY(0.1); }
}

/* === The folder check === */
.checker {
  margin: var(--sp-md) 0;
  padding: 20px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.checker-button {
  font: 650 1rem var(--sans);
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  background: var(--teal);
  color: var(--on-teal);
  cursor: pointer;
}

.checker-results {
  list-style: none;
  margin: var(--sp-sm) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.agente .post .checker-results li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.checker-results .mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
}

.mark.ok { background: var(--ok-wash); color: var(--ok); }
.mark.warn, .mark.unknown { background: var(--warn-wash); color: var(--warn); }
.mark.missing { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.mark.optional { background: var(--chip); color: var(--ink-soft); }

/* An extra that needs the script stays out of the page until the script runs. */
body:not(.js-ready) .js-only {
  display: none !important;
}

.js-ready .no-js-only {
  display: none;
}

/* === The glossary === */
.agente .post .glossary {
  margin: var(--sp-sm) 0;
}

.agente .post .glossary dt {
  margin-top: var(--sp-sm);
  font-weight: 700;
  color: var(--ink);
  scroll-margin-top: var(--sp-lg);
}

.agente .post .glossary dt:target {
  color: var(--teal);
}

.agente .post .glossary dd {
  margin: 2px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* === Downloads === */
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: var(--sp-sm) 0;
  padding: 0;
  list-style: none;
}

.agente .post .downloads li + li {
  margin-top: 0;
}

.agente .post .downloads a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  text-decoration: none;
  color: var(--ink);
}

.agente .post .downloads a:hover {
  box-shadow: 0 0 0 2px var(--teal);
}

.downloads b::after {
  content: "  ↓";
  color: var(--teal);
}

.downloads span {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* === For AI assistants: plain, small === */
.agente .post .for-ai {
  margin-top: var(--sp-md);
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--chip);
}

.agente .post .for-ai p,
.agente .post .for-ai li {
  font-size: 0.98rem;
  line-height: 1.6;
}

/* === Drawings ===
   Every drawing of the post shares these classes (blog/AGENTS.md: style the
   parts once, under the class the figures share). */
.agente .post figure {
  margin: var(--sp-lg) 0;
}

.diagram {
  padding: 18px 16px 12px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
}

.agente .post figcaption {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.diagram .box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.diagram .box-strong { fill: var(--teal-wash); stroke: var(--teal); stroke-width: 2; }
.diagram .label { fill: var(--ink); font-size: 14px; font-weight: 650; }
.diagram .label-soft { fill: var(--ink-soft); font-size: 12px; font-weight: 500; }
.diagram .label-on-teal { fill: var(--teal); font-size: 14px; font-weight: 700; }
.diagram .wire { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; }
.diagram .wire-teal { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.diagram .arrow-head { fill: var(--ink-soft); }
.diagram .arrow-teal { fill: var(--teal); }
.diagram .dot { fill: var(--teal); }
.diagram .sw-agents { fill: var(--f-agents); }
.diagram .sw-data { fill: var(--f-data); }
.diagram .sw-skills { fill: var(--f-skills); }
.diagram .sw-scripts { fill: var(--f-scripts); }
.diagram .sw-exports { fill: var(--f-exports); }
.diagram .sw-soft { fill: var(--ink-soft); }
.diagram .sw-teal { fill: var(--teal); }
.diagram .fade-line { fill: var(--line); }
.diagram .bubble-person { fill: var(--teal); }
.diagram .bubble-text-person { fill: var(--on-teal); font-size: 12px; font-weight: 600; }
.diagram .bubble-agent { fill: var(--chip); }
.diagram .bubble-text { fill: var(--ink); font-size: 12px; font-weight: 500; }

/* Drawing 1, "a chat forgets, a folder remembers". Two columns (browser
   chat, agent in a folder) split by a vertical line, and two rows (today,
   tomorrow). The still picture tells the whole story; the animation shows
   one piece at a time, so the eye follows one thing. One 34 s cycle, one
   step every 4.6% (about 1.6 s), in the owner's order:
   today in the browser (title, box, person, AI: s1-s4), today in the folder
   (title and the vertical line, box, person, AI: s5-s8), the file with its
   arrow and then its two lines (s9, s9b, s9c), the chat closes (s10),
   tomorrow in the browser (box, person, AI: s11-s13), tomorrow in the
   folder (box, person: s14-s15), the agent reads the file and the file
   glows (s16), it answers (s17), and the captions show (s18). It holds,
   then everything clears (95-99%). */
.diagram .row-label { fill: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.diagram .tag-text { fill: var(--teal); font-size: 10.5px; font-weight: 700; font-family: var(--mono); }
.diagram .sep-line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
.diagram .cap-bad { fill: var(--bad); font-size: 13px; }
.diagram .cap-good { fill: var(--ok); font-size: 13px; }
.diagram .arrow-path { stroke-dasharray: 6 5; }
.diagram .f-glow { fill: none; stroke: var(--teal); stroke-width: 5; stroke-opacity: 0.35; }

.forget .s1 { animation: fw-s1 34s infinite; }
.forget .s2 { animation: fw-s2 34s infinite; }
.forget .s3 { animation: fw-s3 34s infinite; }
.forget .s4 { animation: fw-s4 34s infinite; }
.forget .s5 { animation: fw-s5 34s infinite; }
.forget .s6 { animation: fw-s6 34s infinite; }
.forget .s7 { animation: fw-s7 34s infinite; }
.forget .s8 { animation: fw-s8 34s infinite; }
.forget .s9 { animation: fw-s9 34s infinite; }
.forget .s10 { animation: fw-s10 34s infinite; }
.forget .s11 { animation: fw-s11 34s infinite; }
.forget .s12 { animation: fw-s12 34s infinite; }
.forget .s13 { animation: fw-s13 34s infinite; }
.forget .s14 { animation: fw-s14 34s infinite; }
.forget .s15 { animation: fw-s15 34s infinite; }
.forget .s16 { animation: fw-s16 34s infinite; }
.forget .s17 { animation: fw-s17 34s infinite; }
.forget .s18 { animation: fw-s18 34s infinite; }
.forget .s9b { animation: fw-s9b 34s infinite; }
.forget .s9c { animation: fw-s9c 34s infinite; }

@keyframes fw-s1 { 0%, 2.0% { opacity: 0; } 4.5%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s2 { 0%, 6.6% { opacity: 0; } 9.1%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s3 { 0%, 11.2% { opacity: 0; transform: translateY(6px); } 13.7%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s4 { 0%, 15.8% { opacity: 0; transform: translateY(6px); } 18.3%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s5 { 0%, 20.4% { opacity: 0; } 22.9%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s6 { 0%, 25.0% { opacity: 0; } 27.5%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s7 { 0%, 29.6% { opacity: 0; transform: translateY(6px); } 32.1%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s8 { 0%, 34.2% { opacity: 0; transform: translateY(6px); } 36.7%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s9 { 0%, 38.8% { opacity: 0; } 41.3%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s10 { 0%, 43.4% { opacity: 0; } 45.9%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s11 { 0%, 48.0% { opacity: 0; } 50.5%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s12 { 0%, 52.6% { opacity: 0; transform: translateY(6px); } 55.1%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s13 { 0%, 57.2% { opacity: 0; transform: translateY(6px); } 59.7%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s14 { 0%, 61.8% { opacity: 0; } 64.3%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s15 { 0%, 66.4% { opacity: 0; transform: translateY(6px); } 68.9%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s16 { 0%, 71.0% { opacity: 0; } 73.5%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s17 { 0%, 75.6% { opacity: 0; transform: translateY(6px); } 78.1%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes fw-s18 { 0%, 80.2% { opacity: 0; } 82.7%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s9b { 0%, 40.3% { opacity: 0; } 42.8%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fw-s9c { 0%, 41.8% { opacity: 0; } 44.3%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* Drawing 3, "what happens when an endless chat fills the context". One
   18 s cycle. 26 messages appear one after another (each 0.2 s after the one
   before, so the bar fills in about 5 s, 0-29%); the word "full" shows (31%).
   A cover spreads over the whole bar, "the app summarises everything" (37%),
   the messages vanish under it (41%), and the cover shrinks to one small
   "summary" piece (44-49%). The next message arrives (54%), then the AI's
   answer with its note (62%), then the closing line (72%). It holds, then
   clears (94-99%). The messages keep their offsets, so the next cycle fills
   the bar in the same order; their group (.cf-old) hides them all at once. */
.diagram .blk-person { fill: var(--teal); }
.diagram .blk-ai { fill: var(--ink-soft); fill-opacity: 0.45; }
.diagram .compact-overlay { fill: var(--paper); fill-opacity: 0.92; stroke: var(--line); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.diagram .limit-line { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 5; }

.ctxfill .blocks rect { animation: cf-block 18s infinite backwards; }
.ctxfill .cf-old { animation: cf-old 18s infinite; }
.ctxfill .cf-full { animation: cf-full 18s infinite; }
.ctxfill .cf-squash { transform-box: fill-box; transform-origin: left center; animation: cf-squash 18s infinite; }
.ctxfill .cf-sumall { animation: cf-sumall 18s infinite; }
.ctxfill .cf-sum { animation: cf-sum 18s infinite; }
.ctxfill .cf-next { animation: cf-next 18s infinite; }
.ctxfill .cf-answer { animation: cf-answer 18s infinite; }
.ctxfill .cf-lost { animation: cf-lost 18s infinite; }

@keyframes cf-block { 0% { opacity: 0; } 2%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cf-old { 0%, 39% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes cf-full { 0%, 29% { opacity: 0; } 32%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes cf-squash { 0%, 34% { opacity: 0; transform: none; } 37%, 43% { opacity: 1; transform: none; } 49%, 94% { opacity: 1; transform: scaleX(0.2); } 99%, 100% { opacity: 0; transform: scaleX(0.2); } }
@keyframes cf-sumall { 0%, 36% { opacity: 0; } 38%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes cf-sum { 0%, 48% { opacity: 0; } 51%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cf-next { 0%, 53% { opacity: 0; transform: translateY(6px); } 57%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cf-answer { 0%, 61% { opacity: 0; transform: translateY(6px); } 65%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cf-lost { 0%, 71% { opacity: 0; } 75%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* Drawing 4, "with a folder, what matters carries from one chat to the next".
   One 24 s cycle, the same marks as drawing 3. Chat 1: two messages, and the
   agent writes one line into the file (2-15%). Chat 2: the agent reads the
   file into a clean context, then two messages (18-29%). Chat 3: it reads the
   file, 17 messages fill the bar (33-52%), and the app compacts them: a cover
   spreads (61%), the messages vanish under it, and it shrinks to one small
   "summary" piece (64-70%). The agent reads the file again and answers
   (76-83%), then the closing line shows (86%). It holds, then clears
   (96-99%). The chat 3 messages keep their offsets; their group (.cy-old)
   shows them only between 33% and 62%, so no message from the last cycle
   lingers. */
.diagram .piece { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.carry .cy-a { animation: cy-a 24s infinite; }
.carry .cy-b { animation: cy-b 24s infinite; }
.carry .cy-write { animation: cy-write 24s infinite; }
.carry .cy-line { animation: cy-line 24s infinite; }
.carry .cy-read2 { animation: cy-read2 24s infinite; }
.carry .cy-p2 { animation: cy-p2 24s infinite; }
.carry .cy-c { animation: cy-c 24s infinite; }
.carry .cy-d { animation: cy-d 24s infinite; }
.carry .cy-read3 { animation: cy-read3 24s infinite; }
.carry .cy-sum { animation: cy-sum 24s infinite; }
.carry .cy-p4 { animation: cy-p4 24s infinite; }
.carry .cy-e { animation: cy-e 24s infinite; }
.carry .cy-end { animation: cy-end 24s infinite; }
.carry .cy-blocks rect { animation: cy-block 24s infinite backwards; }
.carry .cy-old { animation: cy-old 24s infinite; }
.carry .cy-squash { transform-box: fill-box; transform-origin: left center; animation: cy-squash 24s infinite; }
.carry .cy-sumall { animation: cy-sumall 24s infinite; }

@keyframes cy-a { 0%, 2% { opacity: 0; transform: translateY(4px); } 5%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-b { 0%, 5% { opacity: 0; transform: translateY(4px); } 8%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-write { 0%, 9% { opacity: 0; } 12%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cy-line { 0%, 12% { opacity: 0; transform: translateY(4px); } 15%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-read2 { 0%, 18% { opacity: 0; } 21%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cy-p2 { 0%, 20% { opacity: 0; transform: translateY(4px); } 23%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-c { 0%, 23% { opacity: 0; transform: translateY(4px); } 26%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-d { 0%, 26% { opacity: 0; transform: translateY(4px); } 29%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-read3 { 0%, 33% { opacity: 0; } 36%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cy-sum { 0%, 71% { opacity: 0; } 74%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cy-p4 { 0%, 76% { opacity: 0; transform: translateY(4px); } 79%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-e { 0%, 80% { opacity: 0; transform: translateY(4px); } 83%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-end { 0%, 86% { opacity: 0; transform: translateY(4px); } 89%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes cy-block { 0%, 37% { opacity: 0; } 38%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cy-old { 0%, 32% { opacity: 0; } 33%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes cy-squash { 0%, 58% { opacity: 0; transform: none; } 61%, 64% { opacity: 1; transform: none; } 70%, 96% { opacity: 1; transform: scaleX(0.2); } 99%, 100% { opacity: 0; transform: scaleX(0.2); } }
@keyframes cy-sumall { 0%, 60% { opacity: 0; } 62%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* Drawing 2, "what the model reads". One 10 s cycle. The five boxes appear
   one by one (0-35%), the bracket draws (35-48%), the word "context" and the
   arrow show (48-56%), the model box lights (56-62%), and the answer arrives
   (62-70%). It holds, then clears (95-100%). */
.context .ctx-box { opacity: 0; animation: ctx-box 10s infinite; }
.context .ctx-box:nth-of-type(2) { animation-delay: 0.6s; }
.context .ctx-box:nth-of-type(3) { animation-delay: 1.2s; }
.context .ctx-box:nth-of-type(4) { animation-delay: 1.8s; }
.context .ctx-box:nth-of-type(5) { animation-delay: 2.4s; }
.context .bracket { stroke-dasharray: 420; stroke-dashoffset: 420; animation: ctx-bracket 10s infinite; }
.context .ctx-label { opacity: 0; animation: ctx-label 10s infinite; }
.context .ctx-model { animation: ctx-model 10s infinite; }
.context .ctx-answer { opacity: 0; animation: ctx-answer 10s infinite; }

@keyframes ctx-box {
  0% { opacity: 0; transform: translateX(-8px); }
  5%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes ctx-bracket {
  0%, 35% { stroke-dashoffset: 420; }
  48%, 95% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 420; }
}

@keyframes ctx-label {
  0%, 47% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ctx-model {
  0%, 55% { opacity: 0.35; }
  62%, 95% { opacity: 1; }
  100% { opacity: 0.35; }
}

@keyframes ctx-answer {
  0%, 62% { opacity: 0; }
  70%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .forget *,
  .ctxfill *,
  .carry *,
  .context *,
  .visor-eyes ellipse {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  /* The drawing ends after the summary: the full bar and its cover are gone. */
  .ctxfill .cf-old,
  .ctxfill .cf-full,
  .ctxfill .cf-sumall { opacity: 0 !important; }
  .ctxfill .cf-squash { transform: scaleX(0.2) !important; }
  .carry .cy-old,
  .carry .cy-sumall { opacity: 0 !important; }
  .carry .cy-squash { transform: scaleX(0.2) !important; }
}

/* === Contents ===
   One list, two layouts, as in the reference posts. In the text column it is
   a folded box. From 1280px it sits fixed on the left and works as the
   tutorial's progress: the step being read is marked, a step marked "done"
   gets a tick, and a choice (the example, the app) shows under its step. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.agente) {
    scroll-behavior: smooth;
  }
}

.agente .toc {
  margin: var(--sp-lg) 0 0;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}

.agente .toc summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.agente .post .toc ol {
  margin: var(--sp-xs) 0 0;
  padding-left: 1.2em;
}

.agente .post .toc li {
  font-size: 0.95rem;
  line-height: 1.45;
}

.agente .post .toc a {
  color: var(--ink);
  text-decoration: none;
}

.agente .post .toc a:hover,
.agente .post .toc a[aria-current="location"] {
  color: var(--teal);
}

.toc-state {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
}

.toc-state:empty {
  display: none;
}

.agente .post .toc a.is-done::before {
  content: "✓ ";
  color: var(--ok);
  font-weight: 800;
}

.agente .toc-jump {
  position: fixed;
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 5;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}

@media (min-width: 1280px) {
  .agente .toc {
    position: fixed;
    top: 84px;
    left: var(--sp-md);
    width: 230px;
    max-height: calc(100vh - 84px - var(--sp-md));
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .agente .post .toc ol {
    padding-left: 0;
    list-style: none;
  }

  .agente .post .toc li {
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .agente .post .toc li + li {
    margin-top: 2px;
  }

  .agente .post .toc a {
    display: block;
    padding: 5px 0 5px 12px;
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
  }

  .agente .post .toc a[aria-current="location"] {
    border-left-color: var(--teal);
    color: var(--ink);
    font-weight: 650;
  }

  .agente .toc-jump {
    display: none;
  }
}

/* === Footers === */
.agente .post-footer {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
}

.agente .post-footer p,
.agente .page-footer p {
  color: var(--ink-soft);
}

.agente .page-footer a {
  color: var(--teal);
}