Add missing webcam image and theme files

.gitattributes

@@ -54,6 +54,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 2025/secure-se-sep/images/model_parameters.png filter=lfs diff=lfs merge=lfs -text
 2025/secure-se-sep/images/xcom-logo-black.png filter=lfs diff=lfs merge=lfs -text
 2026/mcp-connect/images/2026-02-03-mcp-server-stats.png filter=lfs diff=lfs merge=lfs -text
+2026/mcp-connect/images/2026-02-03-mcp-webcam.png filter=lfs diff=lfs merge=lfs -text
 2026/mcp-connect/images/2026-02-03-mcpremote1.png filter=lfs diff=lfs merge=lfs -text
 2026/mcp-connect/images/2026-02-03-mcpremote2.png filter=lfs diff=lfs merge=lfs -text
 2026/mcp-connect/images/2026-02-04-client-dataset.png filter=lfs diff=lfs merge=lfs -text

2026/mcp-connect/theme/descartes.css

@@ -0,0 +1,90 @@
+/* @theme descartes */
+
+/*
+  ============================================
+    Created by Paulo Cunha
+    version: 1.0
+    last update: 04.dez.2022
+  ============================================       
+*/
+
+/* Importing COLOR SCHEMA */
+
+@import "default";
+@import "schema";
+@import "structure";
+
+/***************** COMMON STRUCTURE **********************/
+
+:root {
+  font-family: 'Fira Sans Light';
+  font-weight: initial;
+  --italic-background-color   : rgba(214, 25, 66, 0.144);
+  --italic-background-color   : rgba(8, 206, 255, 0.3);
+  --italic-background-color   : rgba(8, 140, 255, 0.236);    
+  background-color: rgb(238, 244, 237); 
+}
+
+h1 {
+  color:rgb(23, 86, 118);
+  color:rgb(11, 37, 69);
+  color:rgb(53, 80, 112);
+  color:rgb(53, 80, 112);
+  padding-bottom: 2mm;
+  margin-bottom: 12mm;
+}
+
+h2 strong {
+  color: red;
+}
+
+p {
+  font-size: 26pt;
+  font-weight: 600;
+  color:rgba(78, 78, 80, 0.814)  
+}
+
+section.titlepage .title {
+  border-bottom: 1px solid orangered;
+}
+
+
+section.cite {
+  --strong-color        : rgba(255, 5, 5, 0.795);
+}
+
+section.titlepage .author,
+section.titlepage .date,
+section.titlepage .organization {
+  text-align: left;
+}
+
+section strong {
+  color:rgb(141, 169, 196) ;
+  color:rgba(23, 86, 118) ;
+  color:rgb(181, 101, 118) ;
+  color:rgb(186, 50, 79) ;
+  color:rgb(229, 107, 111) ;
+  padding-left: 1px;
+  padding-right: 1px;
+  font-weight: 600;
+}
+
+section.transition em{
+  background-color: rgb(255, 166, 0) !important;
+}
+
+
+section.transition strong {
+  color: rgba(230, 250, 6, 0.905);
+  font-weight: 1000;
+  text-shadow: 2px 2px 10px rgb(101, 45, 3);
+}
+
+
+section.transition2 strong {
+
+  color: rgb(10, 100, 235);
+  color: rgb(161, 240, 3);
+
+}

2026/mcp-connect/theme/evalstate-extensions.css

@@ -0,0 +1,802 @@
+/* @theme evalstate-extensions
+   Custom slide utilities for Evalstate decks.
+*/
+
+/* Inline images should align with text baseline */
+li img {
+  vertical-align: middle;
+  margin: 0 0.2em;
+}
+
+section.mcp-features table {
+  width: 100%;
+  margin-top: 0.5rem;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+}
+
+section:not(.titlepage) {
+  padding: 64px 72px !important;
+}
+
+/* Hide headers for icon-based tables, show for data tables */
+section.mcp-features table thead {
+  display: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+section.mcp-features table.show-headers thead {
+  display: table-header-group;
+}
+
+section.mcp-features table thead th {
+  padding: 0.35rem 0.55rem;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: #64748b;
+  background-color: transparent;
+}
+
+section.mcp-features table thead th:not(:first-child) {
+  text-align: right;
+}
+
+section.mcp-features tbody td {
+  padding: 0.32rem 0.55rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  vertical-align: top;
+}
+
+section.mcp-features tbody tr:last-child td {
+  border-bottom: none;
+}
+
+section.mcp-features table td:first-child,
+section.mcp-features table th:first-child {
+  text-align: left;
+  width: auto;
+}
+
+/* August column (2nd column) - normal weight */
+section.mcp-features table.show-headers td:nth-child(2) {
+  font-weight: 400;
+}
+
+/* September column (3rd column) - bold */
+section.mcp-features table.show-headers td:nth-child(3) {
+  font-weight: 700;
+}
+
+section.mcp-features table tr:nth-child(even),
+section.mcp-features table tr:nth-child(odd) {
+  background-color: transparent !important;
+}
+
+section.mcp-features table tr:hover {
+  background-color: var(--table-hover-background-color) !important;
+  color: var(--table-hover-color) !important;
+  font-weight: 700;
+}
+
+/* Highlight row for important metrics - nice blue color */
+section.mcp-features tbody tr.highlight-row,
+section.mcp-features tbody tr.highlight-row:hover {
+  background-color: #dbeafe !important;
+}
+
+section.mcp-features tbody tr.highlight-row td,
+section.mcp-features tbody tr.highlight-row:hover td {
+  font-weight: 700 !important;
+  color: #1e40af !important;
+  padding-top: 0.45rem !important;
+  padding-bottom: 0.45rem !important;
+}
+
+/* Warning row for unsupported methods */
+section.mcp-features tbody tr.warning-row td {
+  color: #991b1b !important;
+  font-weight: 600 !important;
+}
+
+/* Fix horizontal scroll - ensure table doesn't overflow */
+section.mcp-features table {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+section.mcp-features .columns > div:last-child {
+  padding-left: 2rem;
+}
+
+section.mcp-features .cell-title {
+  display: inline-block;
+}
+
+section.mcp-features .feature-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  border-radius: 0.9rem;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+section.mcp-features .feature-icon img {
+  max-width: 62%;
+  max-height: 62%;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+section.mcp-features .examples {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+/* Registry collage layout for "Registries and Curation" slide */
+.registry-layout {
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  margin-top: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.registry-layout .collage-column {
+  flex: 1 1 65%;
+  min-width: 360px;
+}
+
+.registry-layout .text-column {
+  flex: 1 1 240px;
+  max-width: 320px;
+  line-height: 1.4;
+}
+
+.registry-layout .text-column h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.registry-layout .text-column ul {
+  padding-left: 1.1rem;
+  margin: 0;
+}
+
+.registry-collage {
+  position: relative;
+  height: 420px;
+  margin-top: 30px;
+}
+
+.registry-collage img {
+  position: absolute;
+  width: 55%;
+  max-width: 520px;
+  border-radius: 12px;
+  border: 6px solid #fff;
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
+  transition: transform 160ms ease-in-out;
+}
+
+.registry-collage img:hover {
+  transform: scale(1.02) translateY(-4px);
+  z-index: 4;
+}
+
+.registry-collage .shot-azure {
+  top: 0;
+  left: -10px;
+  transform: rotate(-4deg);
+  z-index: 3;
+}
+
+.registry-collage .shot-claude {
+  top: 60px;
+  right: -60px;
+  transform: rotate(3deg);
+  z-index: 2;
+}
+
+.registry-collage .shot-github {
+  bottom: -30px;
+  left: 25%;
+  transform: rotate(-1deg);
+  z-index: 1;
+}
+
+/* Title slide social table */
+.social-table {
+  margin: 2.2rem 0 0 auto;
+  border-collapse: collapse;
+  font-size: 1.05em;
+  min-width: 360px;
+}
+
+.social-table td {
+  padding: 0.45rem 0.25rem;
+  border: none;
+  vertical-align: middle;
+  color: inherit;
+}
+
+.social-table td:first-child {
+  width: 54px;
+  text-align: right;
+}
+
+.social-table td:first-child img {
+  width: 34px;
+  height: 34px;
+  object-fit: contain;
+  display: inline-block;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.social-table td:last-child {
+  padding-left: 0.9rem;
+}
+
+.social-table a {
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.social-table a:hover,
+.social-table a:focus {
+  text-decoration: underline;
+}
+
+.social-table tr {
+  background-color: transparent !important;
+}
+
+/* Magnifier hover effect: opt-in per image via wrapper */
+.mcp-magnify {
+  position: relative;
+  display: inline-block;
+  --magnify-image: none;
+  --magnify-scale: 2;
+  --magnify-size: 220px;
+  --magnify-focus-x: 50%;
+  --magnify-focus-y: 50%;
+  --magnify-position-x: 50%;
+  --magnify-position-y: 50%;
+  cursor: zoom-in;
+  isolation: isolate;
+}
+
+.mcp-magnify > img {
+  display: block;
+}
+
+.mcp-magnify::after {
+  content: "";
+  position: absolute;
+  width: var(--magnify-size);
+  height: var(--magnify-size);
+  left: var(--magnify-position-x);
+  top: var(--magnify-position-y);
+  transform: translate(-50%, -50%) scale(var(--magnify-scale));
+  transform-origin: 50% 50%;
+  background-image: var(--magnify-image);
+  background-repeat: no-repeat;
+  background-size: calc(100% * var(--magnify-scale)) calc(100% * var(--magnify-scale));
+  background-position: var(--magnify-focus-x) var(--magnify-focus-y);
+  border-radius: 50%;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+  outline: 2px solid rgba(0, 0, 0, 0.25);
+  outline-offset: -1px;
+  opacity: 0;
+  transition: opacity 140ms ease-in-out;
+  pointer-events: none;
+  z-index: 1;
+  will-change: transform, opacity;
+}
+
+.mcp-magnify:hover::after,
+.mcp-magnify:focus-within::after {
+  opacity: 1;
+}
+
+/* Lens presets for specific slides */
+.mcp-magnify--completion-1 {
+  --magnify-image: url('./images/completion-1-lightbox.png');
+  --magnify-scale: 2;
+  --magnify-size: 280px;
+  --magnify-position-x: 50%;
+  --magnify-position-y: 50%;
+  --magnify-focus-x: 85%;
+  --magnify-focus-y: 88%;
+}
+
+.mcp-magnify--completion-2 {
+  --magnify-image: url('./images/completion-2-lightbox.png');
+  --magnify-scale: 2;
+  --magnify-size: 280px;
+  --magnify-position-x: 50%;
+  --magnify-position-y: 50%;
+  --magnify-focus-x: 105%;
+  --magnify-focus-y: 105%;
+}
+
+.mcp-magnify--privacy {
+  --magnify-image: url('./images/chatgpt-privacy.png');
+  --magnify-scale: 2.2;
+  --magnify-size: 240px;
+  --magnify-position-x: 78%;
+  --magnify-position-y: 58%;
+  --magnify-focus-x: 78%;
+  --magnify-focus-y: 58%;
+}
+
+/* Zoom-in animation effect for images */
+@keyframes zoomToPosition {
+  0% {
+    transform: scale(var(--zoom-start-scale, 3)) translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) translate(var(--zoom-end-x, 0), var(--zoom-end-y, 0));
+    opacity: 1;
+  }
+}
+
+.zoom-effect {
+  position: relative;
+  display: inline-block;
+  --zoom-start-scale: 3;
+  --zoom-end-x: 0;
+  --zoom-end-y: 0;
+  --zoom-duration: 10s;
+}
+
+.zoom-effect img {
+  display: block;
+  animation: zoomToPosition var(--zoom-duration) ease-out forwards;
+  transform-origin: center center;
+}
+
+/* Preset for claude_enhancements zoom */
+.zoom-effect--claude {
+  --zoom-start-scale: 4;
+  --zoom-end-x: 500px;
+  --zoom-end-y: -450px;
+  --zoom-duration: 3s;
+}
+
+/* Emphasis box for important quotes/callouts */
+.emphasis-box {
+  background-color: #fef3c7;
+  padding: 0.5rem;
+  border-left: 4px solid #f59e0b;
+  border-radius: 2px;
+  margin: 0.5rem 0;
+}
+
+.social-table tr:nth-child(odd),
+.social-table tr:nth-child(even) {
+  background-color: transparent !important;
+}
+
+.social-table tr:hover,
+.social-table tr:focus-within {
+  background-color: var(--table-hover-background-color) !important;
+  color: var(--table-hover-color) !important;
+  font-weight: 700;
+}
+
+/* Top 20 MCP Clients Table Styling - Clean, striking design like mcp-features */
+section.top-clients table {
+  width: 100%;
+  margin-top: 0.6rem;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+section.top-clients table thead {
+  display: none;
+}
+
+/* Perfect 50:50 split with room for all capability icons */
+section.top-clients table col:nth-child(1) { width: 2.2rem; }  /* Left ordinal */
+section.top-clients table col:nth-child(2) { width: calc(50% - 7.7rem); }  /* Left client name */
+section.top-clients table col:nth-child(3) { width: 5.5rem; }  /* Left icons (4 icons: Delete + R + S + E) */
+section.top-clients table col:nth-child(4) { width: 2.2rem; }  /* Right ordinal */
+section.top-clients table col:nth-child(5) { width: calc(50% - 7.7rem); }  /* Right client name */
+section.top-clients table col:nth-child(6) { width: 5.5rem; }  /* Right icons */
+
+section.top-clients tbody td {
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
+section.top-clients tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Ordinal number columns */
+section.top-clients table td:nth-child(1),
+section.top-clients table td:nth-child(4) {
+  text-align: center;
+  font-weight: 600;
+  color: #64748b;
+  font-size: 0.7rem;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* Client name columns */
+section.top-clients table td:nth-child(2),
+section.top-clients table td:nth-child(5) {
+  font-weight: 600;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Icon columns - right-aligned so icons line up */
+section.top-clients table td:nth-child(3),
+section.top-clients table td:nth-child(6) {
+  text-align: right;
+}
+
+section.top-clients table td:nth-child(3) .client-icons,
+section.top-clients table td:nth-child(6) .client-icons {
+  justify-content: flex-end;
+}
+
+/* Remove background striping */
+section.top-clients table tr:nth-child(even),
+section.top-clients table tr:nth-child(odd) {
+  background-color: transparent !important;
+}
+
+/* Per-client hover effect - LEFT side (ordinal, name, icons) */
+section.top-clients tbody td:nth-child(1),
+section.top-clients tbody td:nth-child(2),
+section.top-clients tbody td:nth-child(3) {
+  transition: background-color 0.15s ease;
+}
+
+section.top-clients tbody tr:hover td:nth-child(1),
+section.top-clients tbody tr:hover td:nth-child(2),
+section.top-clients tbody tr:hover td:nth-child(3) {
+  background-color: rgba(59, 130, 246, 0.08) !important;
+}
+
+section.top-clients tbody tr:hover td:nth-child(2) {
+  font-weight: 700;
+  color: #1e40af;
+}
+
+/* Per-client hover effect - RIGHT side (ordinal, name, icons) */
+section.top-clients tbody td:nth-child(4),
+section.top-clients tbody td:nth-child(5),
+section.top-clients tbody td:nth-child(6) {
+  transition: background-color 0.15s ease;
+}
+
+section.top-clients tbody tr:hover td:nth-child(4),
+section.top-clients tbody tr:hover td:nth-child(5),
+section.top-clients tbody tr:hover td:nth-child(6) {
+  background-color: rgba(59, 130, 246, 0.08) !important;
+}
+
+section.top-clients tbody tr:hover td:nth-child(5) {
+  font-weight: 700;
+  color: #1e40af;
+}
+
+/* Icon container styling */
+section.top-clients .client-icons {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Icon box for capability icons using SVG - ENABLED (bold color) */
+section.top-clients .capability-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  background-color: rgba(59, 130, 246, 0.15);
+  transition: transform 0.15s ease;
+}
+
+section.top-clients .capability-icon img {
+  width: 17px;
+  height: 17px;
+  box-shadow: none;
+  border-radius: 0;
+  /* Bold blue color for enabled capabilities */
+  filter: invert(36%) sepia(85%) saturate(2270%) hue-rotate(208deg) brightness(96%) contrast(92%);
+}
+
+/* Icon box for DISABLED capability icons (subtle/grayed) */
+section.top-clients .capability-icon.disabled {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+section.top-clients .capability-icon.disabled img {
+  /* Subtle gray for disabled capabilities */
+  filter: invert(80%) sepia(5%) saturate(200%) hue-rotate(180deg) brightness(95%) contrast(85%);
+  opacity: 0.35;
+}
+
+/* Session deletion icon - uses trash-2.svg with red styling */
+section.top-clients .icon-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  background-color: rgba(239, 68, 68, 0.15);
+  transition: transform 0.15s ease;
+}
+
+section.top-clients .icon-delete img {
+  width: 17px;
+  height: 17px;
+  box-shadow: none;
+  border-radius: 0;
+  /* Red color for delete icon */
+  filter: invert(35%) sepia(89%) saturate(2270%) hue-rotate(343deg) brightness(96%) contrast(92%);
+}
+
+/* Alert/warning icon - uses circle-alert.svg with red/orange styling */
+section.top-clients .icon-alert {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  background-color: rgba(239, 68, 68, 0.12);
+  transition: transform 0.15s ease;
+}
+
+section.top-clients .icon-alert img {
+  width: 17px;
+  height: 17px;
+  box-shadow: none;
+  border-radius: 0;
+  /* Red/orange color for alert icon */
+  filter: invert(35%) sepia(89%) saturate(2270%) hue-rotate(343deg) brightness(96%) contrast(92%);
+}
+
+/* Legend styling */
+section.top-clients .legend {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 0.8rem;
+  padding: 0.5rem 0.6rem;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+  font-size: 0.78rem;
+  justify-content: center;
+  align-items: center;
+}
+
+section.top-clients .legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+section.top-clients .legend-item .legend-label {
+  color: #64748b;
+  font-weight: 500;
+}
+
+/* Legacy text-based icons (for backward compatibility) */
+section.top-clients .client-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0.1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+section.top-clients .client-icon.icon-delete {
+  background-color: #ef4444;
+  color: white;
+}
+
+section.top-clients .client-icon.icon-capability {
+  background-color: #3b82f6;
+  color: white;
+}
+
+/* Header logos using Marp's header feature */
+section header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  height: 28px;
+  z-index: 1000;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* Hide header on titlepage and transition slides */
+section.titlepage header,
+section.transition header {
+  display: none;
+}
+
+.header-logos {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-logos img {
+  height: 28px;
+  width: auto;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  object-fit: contain;
+}
+
+/* Make HF logo slightly larger to match GitHub visually */
+.header-logos img[src*="hf_logo"] {
+  height: 32px;
+}
+
+/* Global image shadow control */
+/* Turn off all shadows by default - uncomment the rule below */
+/* section img {
+  box-shadow: none !important;
+} */
+
+/* Or use classes for fine control */
+.no-shadow img,
+img.no-shadow {
+  box-shadow: none !important;
+}
+
+.shadow img,
+img.shadow {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Conversational state problem table - compact like top-20 clients */
+section.conversational-state .state-table {
+  width: 100%;
+  margin-top: 0.6rem;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+}
+
+section.conversational-state .state-table thead {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+section.conversational-state .state-table.show-headers thead {
+  display: table-header-group;
+}
+
+section.conversational-state .state-table thead th {
+  padding: 0.35rem 0.5rem;
+  text-align: center;
+  font-weight: 700;
+  font-size: 0.72rem;
+  color: #1f2937;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+section.conversational-state .state-table thead th:first-child {
+  text-align: center;
+  font-weight: 700;
+  background-color: rgba(59, 130, 246, 0.08);
+  color: #1e40af;
+}
+
+section.conversational-state .state-table tbody td {
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  vertical-align: middle;
+  text-align: center;
+  line-height: 1.3;
+}
+
+section.conversational-state .state-table tbody td:first-child {
+  font-weight: 700;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: #1f2937;
+  font-family: 'Fira Code', monospace;
+}
+
+section.conversational-state .state-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+section.conversational-state .state-table tr:nth-child(even),
+section.conversational-state .state-table tr:nth-child(odd) {
+  background-color: transparent !important;
+}
+
+section.conversational-state .state-table tr:hover td {
+  background-color: rgba(59, 130, 246, 0.08) !important;
+}
+
+section.conversational-state .state-table tr:hover td:first-child {
+  font-weight: 700;
+  color: #1e40af;
+}
+
+/* State change row - yellow/warning */
+section.conversational-state .state-table tr.state-change-row td:first-child {
+  background-color: rgba(251, 191, 36, 0.2);
+  color: #92400e;
+}
+
+section.conversational-state .state-table tr.state-change-row td {
+  background-color: rgba(251, 191, 36, 0.08);
+}
+
+/* Danger row - red */
+section.conversational-state .state-table tr.danger-row td:first-child {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #991b1b;
+}
+
+section.conversational-state .state-table tr.danger-row td {
+  background-color: rgba(239, 68, 68, 0.08);
+}
+
+/* Reusable corner logo divs for bottom corners (if needed) */
+.corner-logo {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #333;
+  z-index: 1000;
+}
+
+.corner-logo img {
+  height: 24px;
+  width: auto;
+}
+
+.corner-logo-bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.corner-logo-bottom-right {
+  bottom: 20px;
+  right: 20px;
+}

2026/mcp-connect/theme/freud.css

@@ -0,0 +1,489 @@
+/* @theme freud */
+
+/*
+  ============================================
+    Created by Paulo Cunha
+    version: 1.0
+    last update: 02.jan.2022
+  ============================================       
+*/
+
+/* Importing COLOR SCHEMA */
+
+@import "default";
+@import "schema";
+@import "structure";
+@import "evalstate-extensions";
+
+/* Importing Font */
+/* Font Credit: htts://https://www.cdnfonts.com/ */
+@import url('https://fonts.cdnfonts.com/css/fira-sans?styles=20119');
+
+/***************** COMMON STRUCTURE **********************/
+
+:root {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: initial;
+  
+  color: #6c6c6c; 
+  color: #2b3446;
+  
+  background-color: #727d8b;
+  background-color: #f8b13d;
+  background-color: #435160; 
+  background-color: #f5eee6;
+  background-color: #d9dee6;
+  background-color: #f4f4ed;
+
+  --h1-color                  : #3d09ae;
+  --h1-color                  : #06858e;
+  
+  --border-color              : #a0660387;
+
+  --bold-color                : rgb(21, 105, 201);
+  --bold-color                : #0d2d58;
+
+  --italic-color              : rgb(38, 48, 71);
+  --italic-background-color   : rgba(172, 215, 255, 0.713);
+
+  /* --background-color          : #fdf6e3; */
+  --list-item-color           : rgb(255, 212, 95);
+  --after-color               : rgb(51, 48, 48);
+
+  --table-font-color          : black;
+  --table-header-color        : rgb(0, 132, 255);
+  
+  --main-color                : rgb(207, 77, 17);
+  --darker-color              : #246;
+  --lighter-color             : #080a0a;
+  --extra-back-color          : rgb(42, 45, 53);
+
+  --letter-spacing            : 0.125px;
+
+  --cool-list-color           : rgb(255, 68, 0);
+
+  --author-align              : right;
+
+}
+
+
+/* ------------------- TITLEPAGE -----------------------------*/
+
+section.titlepage .title {
+  border-bottom: 1px solid orangered;
+}
+
+section.titlepage .subtitle {
+  font-weight: 300;
+}
+
+
+section.titlepage .author,
+section.titlepage .date,
+section.titlepage .organization {
+  text-align: left;
+}
+section.titlepage h1 {
+  border-bottom: 1px solid orangered;
+}
+
+section.titlepage h2 {
+  font-weight: 300;
+}
+
+section.titlepage h3,
+section.titlepage h4,
+section.titlepage h5 {
+  text-align: right;
+}
+
+/* -------------------- TRANSITION ---------------------------------*/
+section.transition {
+  
+  --transitionpage-color: #247397;
+
+}
+
+section.transition h1 .mcp-model {
+  color: #FF9D00;
+}
+
+section.transition h1 .mcp-context {
+  color: #6b7280;
+}
+/* -------------------- TRANSITION ---------------------------------*/
+section.transition2 {
+  
+  background-color: #c53732;
+
+}
+
+/* ------------------- CITE -----------------------------*/
+section.cite {
+  --background-color: #49454f;
+  --strong-color: rgb(182, 112, 27);
+}
+
+section.cite p {
+  color: #fffbfe;
+}
+
+section.cite strong {
+  color: #f87ca1;
+}
+
+/* ------------------- IMAGE SHADOWS -----------------------------*/
+img {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+}
+
+/* ---------- Custom diagrams for model vs context comparison ---------- */
+
+section .footprint-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+section .footprint-bars .row {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+section .footprint-bars .label strong {
+  display: block;
+  font-size: 1.05em;
+  color: var(--bold-color);
+}
+
+section .footprint-bars .label .meta {
+  font-size: 0.8em;
+  color: #475569;
+  margin-top: 0.25rem;
+}
+
+section .footprint-bars .bar {
+  position: relative;
+  height: 42px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.12);
+  overflow: hidden;
+}
+
+section .footprint-bars .bar[data-note]::after {
+  content: attr(data-note);
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  font-size: 0.62em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+section .footprint-bars .fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #f97316 0%, #facc15 100%);
+  transform-origin: left center;
+  transform: scaleX(var(--scale, 1));
+}
+
+section .footprint-bars .fill span {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 0.85em;
+}
+
+section .footprint-bars .fill.is-tiny {
+  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 100%);
+}
+
+section .footprint-bars .fill.is-tiny span {
+  color: #0f172a;
+}
+
+section .footprint-note {
+  margin-top: 1.25rem;
+  font-size: 0.72em;
+  color: #475569;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+section .footprint-grid {
+  margin-top: 2.5rem;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 1.2rem;
+  align-items: end;
+}
+
+section .footprint-grid .panel {
+  position: relative;
+  border-radius: 28px;
+  border: 3px solid rgba(15, 23, 42, 0.15);
+  background: linear-gradient(145deg, rgba(248, 196, 113, 0.3), rgba(249, 115, 22, 0.65));
+  box-shadow: 0 28px 48px rgba(15, 23, 42, 0.18);
+  padding: 2.2rem;
+  min-height: clamp(240px, 52vh, 520px);
+  color: #1f2937;
+  overflow: hidden;
+}
+
+section .footprint-grid .panel small {
+  display: block;
+  font-size: 0.78em;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(15, 23, 42, 0.65);
+  margin-bottom: 0.4rem;
+}
+
+section .footprint-grid .panel strong {
+  display: block;
+  font-size: 1.75em;
+  color: var(--bold-color);
+}
+
+section .footprint-grid .panel p {
+  font-size: 0.95em;
+  margin-top: 1rem;
+  color: rgba(15, 23, 42, 0.82);
+}
+
+section .footprint-grid .panel::after {
+  content: attr(data-caption);
+  position: absolute;
+  right: 28px;
+  bottom: 26px;
+  font-size: 0.78em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(15, 23, 42, 0.55);
+}
+
+section .footprint-grid .panel.context {
+  grid-column: span 3;
+  min-height: clamp(90px, 16vh, 220px);
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.35), rgba(14, 165, 233, 0.75));
+  box-shadow: 0 20px 32px rgba(14, 165, 233, 0.28);
+}
+
+section .footprint-grid .panel.context strong {
+  color: #0f172a;
+}
+
+section .footprint-grid .panel.context p {
+  color: rgba(15, 23, 42, 0.68);
+}
+
+section .footprint-grid .panel.weights {
+  grid-column: span 9;
+}
+
+section .window-grid {
+  margin-top: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.2rem;
+}
+
+section .window-card {
+  background: white;
+  border-radius: 18px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
+  padding: 1.6rem;
+  position: relative;
+  overflow: hidden;
+}
+
+section .window-card::after {
+  content: attr(data-year);
+  position: absolute;
+  top: 18px;
+  right: 20px;
+  font-size: 0.72em;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgba(15, 23, 42, 0.45);
+}
+
+section .window-card strong {
+  display: block;
+  font-size: 1.2em;
+  color: var(--bold-color);
+}
+
+section .window-card .tokens {
+  font-size: 1.05em;
+  margin-top: 0.7rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+section .window-card .tokens span {
+  display: block;
+  font-size: 0.7em;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: #64748b;
+  text-transform: uppercase;
+}
+
+section .window-card p {
+  font-size: 0.82em;
+  line-height: 1.35;
+  color: #475569;
+  margin-top: 1rem;
+}
+
+section .window-card .badge {
+  margin-top: 1.2rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.8rem;
+  border-radius: 999px;
+  background: rgba(14, 165, 233, 0.12);
+  color: #0369a1;
+  font-size: 0.7em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+section .analog-table {
+  margin-top: 1.8rem;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
+}
+
+section .analog-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85em;
+}
+
+section .analog-table th,
+section .analog-table td {
+  padding: 0.85rem 1rem;
+  text-align: left;
+}
+
+section .analog-table tr:nth-child(even) {
+  background: rgba(15, 23, 42, 0.04);
+}
+
+section .analog-table th {
+  background: rgba(15, 23, 42, 0.08);
+  text-transform: uppercase;
+  font-size: 0.72em;
+  letter-spacing: 0.08em;
+  color: #1f2937;
+}
+
+section .analog-notes {
+  margin-top: 1rem;
+  font-size: 0.72em;
+  color: #475569;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+section .footprint-nesting {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+section .footprint-nesting .box {
+  position: relative;
+  background: #fff7ed;
+  border: 2px solid #fb923c;
+  border-radius: 18px;
+  padding: 1.75rem;
+  min-height: 240px;
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
+}
+
+section .footprint-nesting .box strong {
+  font-size: 1.1em;
+  color: var(--bold-color);
+}
+
+section .footprint-nesting .box.emphasis {
+  background: #ecfeff;
+  border-color: #38bdf8;
+}
+
+section .footprint-nesting .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.85rem;
+  border-radius: 999px;
+  background: #ffedd5;
+  border: 1px solid #f97316;
+  font-size: 0.7em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 1.1rem;
+}
+
+section .footprint-nesting .box.emphasis .chip {
+  background: #e0f2fe;
+  border-color: #0ea5e9;
+  color: #0369a1;
+}
+
+section .footprint-nesting .box .inner {
+  position: absolute;
+  bottom: 18px;
+  right: 18px;
+  width: clamp(60px, 22%, 140px);
+  min-height: clamp(60px, 22%, 120px);
+  background: #0ea5e9;
+  color: white;
+  border-radius: 14px;
+  padding: 0.75rem;
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-shadow: 0 10px 18px rgba(14, 165, 233, 0.35);
+}
+
+section .footprint-nesting .box .inner::after {
+  content: 'magnified';
+  position: absolute;
+  top: -22px;
+  font-size: 0.6em;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(14, 165, 233, 0.9);
+}
+
+section .footprint-nesting ul {
+  margin-top: 1rem;
+  padding-left: 1.15rem;
+  font-size: 0.85em;
+  color: #1f2937;
+}
+
+section .footprint-nesting ul li {
+  margin-bottom: 0.35rem;
+}

2026/mcp-connect/theme/jobs.css

@@ -0,0 +1,275 @@
+/* @theme jobs */
+
+/*
+  ============================================
+    Created by Paulo Cunha
+    version: 1.0
+    last update: 08.fev.2023
+  ============================================       
+*/
+
+/* Importing COLOR SCHEMA */
+
+@import "default";
+@import "schema";
+@import "structure";
+
+
+/* --------------------- FONTS ------------------------- */
+
+/* Ultra Light */
+@font-face {
+  font-family: "San Francisco";
+  font-weight: 100;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2");
+}
+
+/* Thin */
+@font-face {
+  font-family: "San Francisco 200";
+  font-weight: 200;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
+}
+
+/* Regular */
+@font-face {
+  font-family: "San Francisco 400";
+  font-weight: 400;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2");
+}
+
+/* Bold */
+@font-face {
+  font-family: "San Francisco bold";
+  font-weight: bold;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2");
+}
+
+/* Bold */
+@font-face {
+  font-family: "Minion Pro";
+  /* font-weight: bold; */
+  src: url("https://fonts.cdnfonts.com/css/minion-pro");
+}
+
+
+
+/***************** COMMON STRUCTURE **********************/
+
+:root {
+  /* font-family: Cochin, Georgia; */
+  /* font-family: 'Times New Roman', Times, serif; */
+  /* font-family: "Fira Sans Light"; */
+  
+  font-family: 'Tahoma'; 
+  font-family: 'Open Sans';
+  font-family: 'Segoe UI'; 
+
+  font-weight: initial;
+  
+  /* -- Bodytext FONT color */
+  color: #494545;
+
+  /* -- Slides BACKGROUND color */
+  background-color            : white;
+
+  /* -- BOLD font color */
+  --bold-color                : rgb(105, 120, 151);
+  --bold-color                : rgb(71, 111, 184);
+  --bold-color                : rgb(71, 107, 184);
+
+  --italic-color              : rgb(96, 89, 89);
+
+  --italic-background-color   : rgba(142, 145, 146, 0.172);
+
+  /* --background-color          : #fdf6e3; */
+  --list-item-color           : rgb(255, 212, 95);
+
+  --after-color               : rgb(201, 198, 198);
+
+  --table-font-color          : black;
+
+  --table-header-color        : rgb(128, 137, 146);
+
+  --border-color              : #014385;
+
+  --main-color                : rgb(207, 77, 17);
+
+  --darker-color              : #246;
+
+  --lighter-color             : #080a0a;
+
+  --extra-back-color          : rgb(71, 69, 69);
+
+  --letter-spacing            : 0.125px;
+
+  --cool-list-color           : rgb(135, 157, 179);
+
+  --author-align              : right;
+}
+
+/* ------------------- ROOT -----------------------------*/
+
+:root h1 {
+  
+  font-family: 'San Francisco', sans-serif;
+  
+  /* --border-color              : rgb(209, 161, 29); */
+  border-bottom: 1px solid rgb(29, 107, 209) !important;
+  
+  color: #2b2c2e;
+
+  font-weight: 600;
+
+  padding-top: 10pt;
+  padding-left: 60pt;
+
+  margin-left: -60pt;
+  margin-right: -60pt;
+
+  letter-spacing: -0.5px;
+}
+
+
+:root h1 strong {
+
+  color: rgb(255, 52, 52);
+}
+
+
+:root h1 {
+  font-family: 'San Francisco 400';
+}
+
+
+:root p {
+
+  font-size: 34px;
+  font-family: 'San Francisco 400';
+  letter-spacing: -0.5px;
+}
+
+
+:root li {
+
+  font-family: 'San Francisco';
+  letter-spacing: -0.3px;
+}
+
+
+/* ------------------- TITLEPAGE -----------------------------*/
+
+/* Titlepage made with <titlepage> */
+
+section.titlepage .title strong {
+  color: rgb(255, 52, 52);
+}
+
+
+section.titlepage .title {
+
+  font-family: 'San Francisco 400';
+
+  /* border-bottom: 1px solid rgb(179, 176, 176); */
+  border-bottom: 1px solid rgb(29, 107, 209) !important;
+  letter-spacing: -0.3px;
+}
+
+
+section.titlepage .subtitle {
+  font-weight: 300;
+}
+
+
+section.titlepage .author,
+section.titlepage .date,
+section.titlepage .organization {
+  text-align: left;
+}
+
+
+/* Titlepage made with # */
+section.titlepage h1 {
+
+  font-family: 'San Francisco 400';
+
+  border-bottom: 1px solid rgb(29, 107, 209) !important;
+  letter-spacing: -0.3px;
+ 
+  padding-top: 0pt;
+  padding-left: 0pt;
+
+  margin-left: 0pt;
+  margin-right: 0pt;
+}
+
+
+section.titlepage h2 {
+  font-weight: 300;
+}
+
+section.titlepage h3,
+section.titlepage h4,
+section.titlepage h5 {
+  text-align: right;
+}
+
+/* -------------------- TRANSITION ---------------------------------*/
+
+section.transition {
+
+  --transitionpage-color: rgb(23, 148, 197);
+  --transitionpage-color: rgb(129, 127, 127);
+  --transitionpage-color: rgb(155, 153, 153);
+  
+
+  /* font-weight: bold;
+  font-family: serif, sans-serif, "Libre Baskerville", serif;
+  font-family: 'Open Sans';
+  font-family: 'Segoe UI';   */
+
+  font-family: 'San Francisco bold' !important;
+  font-family: 'Segoe UI' !important; 
+
+  font-size: 200%;
+  /* text-shadow: 4px 4px 0 rgb(77, 61, 61); */
+}
+
+/* -------------------- TRANSITION 2---------------------------------*/
+
+section.transition2 {
+
+  background-color: rgb(8, 74, 100);
+
+
+  font-weight: bold;
+
+  /* font-family: serif, sans-serif, "Libre Baskerville", serif;
+  font-family: 'Open Sans';
+  font-family: 'Segoe UI';  */
+  
+  font-family: 'San Francisco bold' !important;
+
+  font-size: 200%;
+  /* text-shadow: 4px 4px 0 rgb(77, 61, 61); */
+}
+
+/* ------------------- CITE -----------------------------*/
+
+section.cite p {
+  
+  color: #fffbfe;
+
+  font-size: 48px;
+  /* font-family: "Libre Baskerville", serif;  */
+  font-family: 'Minion Pro' !important;
+
+  /* font-style: italic; */
+  line-height: 120%;
+}
+
+section.cite {
+
+  --background-color: rgb(32, 62, 77);
+  --strong-color:     #3396a3 ;
+}

2026/mcp-connect/theme/schema.css

@@ -0,0 +1,103 @@
+/* @theme schema */
+
+/* Last update: 23.jun.2023
+                30.dez.2021 
+*/
+
+/* -------------------- ROOT ----------------------------------*/
+:root {
+
+    /* --subtitle-color    : #586e75; */
+    --subtitle-color: #93a1a1;
+
+    --h1-color: black;
+    --border-color: #e99211;
+    --bold-color: orangered;
+    --italic-color: black;
+    --italic-background-color: rgba(255, 210, 8, 0.713);
+
+
+    --background-color: #fdf6e3;
+    --list-item-color: rgb(50, 56, 56);
+    --after-color: rgb(255, 39, 1);
+
+
+    --main-color: rgb(207, 77, 17);
+    --darker-color: #246;
+    --lighter-color: #080a0a;
+    --extra-back-color: rgb(175, 172, 173);
+
+    --letter-spacing: 0.125px;
+
+    --cool-list-color: orangered;
+
+    --author-align: right;
+
+    --blockquote-strong: rgb(255, 1, 1);
+
+    /*------------ table colors --------------------------*/
+    --table-header-color: rgb(28, 36, 43);
+    --table-header-font-color: white;
+    --table-border-top: rgb(97, 96, 96);
+    --table-border-bottom: rgba(97, 97, 96, 0.315);
+    --table-nth-child-color: #eef1f3;
+    /* --table-hover-background-color: rgb(245, 253, 230); */
+    --table-hover-background-color: rgb(252, 11, 11);
+    /* --table-hover-color: black; */
+    --table-hover-color: white;
+
+}
+
+/* -------------------- TRANSITION ---------------------------------*/
+section.transition {
+    --transitionpage-color: orangered;
+}
+
+/* -------------------- BIBLIO -------------------------------*/
+section.biblio {
+    --text-color: white;
+    --biblio-background-color: rgb(11, 50, 175);
+    --border-color: darkorange;
+    --bold-color: orange;
+}
+
+/* ------------------- TITLEPAGE -----------------------------*/
+section.titlepage {
+
+    /* fonts sizes */
+    --title-size: 150%;
+    --subtitle-size: 110%;
+    --author-size: 110%;
+    --date-size: 110%;
+    --institute-size: 90%;
+
+    --letter-spacing: 0.125px;
+
+    /* font weights */
+    --title-font-weight: 600;
+    --subtitle-font-weight: 600;
+
+    /* colors in style */
+    --title-color: #ee0d0d;
+    --title-color: #4d7baf;
+    --title-color: #0a67f1;
+    --title-color: #002b36;
+
+
+
+    --titlepage-color: #242d31;
+    --background-color: #faf7f7;
+
+    --border-color: #f0cf9e;
+    --border-color: #b5c9ee;
+    --border-color: #8aa6da;
+    --border-color: #6c71c4;
+    --border-color: #e99211;
+
+}
+
+/* ------------------- CITE -----------------------------*/
+section.cite {
+    --background-color: #fdf6e3;
+    --strong-color: rgb(182, 112, 27);
+}

2026/mcp-connect/theme/slide_notes.md

@@ -0,0 +1,202 @@
+<!--
+# The conversation metaphor
+
+Turn taking example (can i steal a slide from the Anthropic website)
+
+What's interesting is that a Tool result is representing the next User input to the conversation.
+-->
+
+<!-- We need to figure out perhaps there are different classes of Tool -->
+
+<!--
+
+So we might say "look, that's fine that we want to use the LLM to string together low-level API calls. While the LLM can be auite resilient.
+
+-->
+<!--
+# The conversation metaphor
+
+Turn taking example (can i steal a slide from the Anthropic website)
+
+What's interesting is that a Tool result is representing the next User input to the conversation.
+-->
+
+<!-- We need to figure out perhaps there are different classes of Tool -->
+
+<!--
+
+So we might say "look, that's fine that we want to use the LLM to string together low-level API calls. While the LLM can be auite resilient.
+
+-->
+<!--
+
+MCP Servers have lifted off as they have because of this. Tools are the closest thing to "just working", especially if they stick to plain text results. LLMs are quite forgiving.
+
+All we need to have agreed is to use MCP!
+
+Pleasing, surprising results can be delivered here.
+
+-->
+<!--
+There's a couple of assumptions in the previous statement. Lets think abou this from the perspective of an Application developer integrating with MCP.
+
+To date there are very few "MCP Native" clients; typically MCP Tool Support has been fairly straightforward to add for existing LLM Applications.
+
+-->
+
+<!-- >> \***Reference** LLMs get lost in multi-turn conversation - https://arxiv.org/pdf/2505.06120
+-->
+
+<!--
+
+
+They turn us in to Prompt Engineers but it's hard to know what's going on. Models are sensitive to Tool Descriptions in different ways; if I want to construct a complex query do I put that in the tool description, or do I create a Tool that returns the instructions?
+
+
+We all love tools, but they come with some drawbacks. They are context hungry. Mix is quite unpredictable.
+
+If I know that I need to work with some data, then generating a Tool Call.
+
+-->
+<!--
+# GPT-4.1
+
+<center>
+
+![w:1050](2025-05-22-gpt-4.1.png)
+
+</center>
+
+-->
+<!--
+A paper was released earlier this month by Microsoft Research, looking at the loss of reliability in multi-turn conversations.
+
+The problem being that reliability will degrade significantly if we are relying on the LLM to string together tool calls.
+
+they make the point that LLMs are often evaluated using "fully specified instructions", and that conversational interfaces are far less reliable. I think we all recognise the issue about context getting polluted with unnecessary information. 35% -->
+
+<!-- Analysis of 200,000+ simulated conversations decomposes the performance degradation into two components: a minor loss in aptitude and a significant increase in unreliability. We find that LLMs often make assumptions in early turns and prematurely attempt to generate final solutions, on which they overly rely.
+
+## Tools need to reduce their surface area. Straight API wraps work, but won't excel. Ideas like selecting a "Bouqet" of tools.
+
+## User Interfaces needs to start . Ahead of time.
+
+ -->
+
+<!--
+
+We also need to answer What can the Host/User do as a pair.
+
+PICTURE VSCODE + GRADIO
+PICTURE REPRESENTATION OF CONTENT TYPES:
+
+For the code, it's possible to syntax highlight, but I'm still sending it to the LLM as `text/plain`.
+
+MCP is a weird thing to work with (compared to traditional APIs). You're connected things which do Natural Language Processing, to things which produce unpredictable answers.
+
+So for example "Can I show it might mean having image handling libraries, or an audio renderer. Can the LLM understand it might mean tokenizing it? And those combinations may, or may not be valid.
+
+An example might be doing Syntax Highlighting on Source Code, but text/plain, markdown and modern formatters already do this job anyway! Markdown is self-extensible with things ```mermaid and so on.
+
+I might be able to render a video, or just save the content to disk. It's kind of up to me to figure out what to do.
+
+VSCode connecting to Gradio. It can render images.
+-->
+<!-- we know if it's bits and bytes or characters, and we know the shape of those parts because of the MIMEType
+<!-- one way of thinking about Prompts is as a _user driven tool_ -->
+
+<!-- whilst it's amazing to watch LLMs discover the world around them via Tools, for a lot of Servers it is unnecessary -->
+<!-- as previously mentioned, a well designed MCP server that can offer Prompts optimied for intent will get us better results and parsimonious use of Tools -->
+
+<!-- more sophisticated clients that enable you to compose prompts with live resources etc will be welcome -->
+<!--
+Prompts are more powerful that it first appears.
+1) You can put arbitrary (and live text in them), injecting data directly in to the context without Tool Call overhead or unnecessary conversation turns.
+2) Because they are conversational pairs, they can provide in-context learning for the follow-up conversation.
+3) I could construct a prompt
+Can be used for in-context learning -->
+<!--
+
+But this _does_ require the Client application to know whether resources are subscribed.
+Even though the MCP Server can inject whatever content it wants in to
+
+- Example 1: Lint Errors
+- Example 2: mcp-webcam Subscription
+- Example 3: User Interaction
+- Example 4: Subscribe to a Log File tail - trigger a completion - "USER: Send an alert to the on-call engineer if anything anomalous is in the logs?"
+- Trigger a Regneration.
+
+
+-->
+<!-- There is a PulseMCP video where we did a couple of those things
+
+MCP-Webcam will have this capability soon!
+
+-->
+
+<!-- This is where extra preparation time for the talk has saved me. Twixt my overambition and actual capabilities  -->
+<!-- it actually ends up being more work than adjusting the protocol
+
+this also makes it possible for MCP Server developers to coordinate amongst themselves (e.g. managing name clashes and so on).
+-->
+<!-- Search data. Manipulate that dataset -->
+
+<!--
+
+A lot of first instincts will be to modify the specification somehow. I have "use-case _x_, it might be generally useful, so I'll build something specific around it
+
+It would be a shame to keep adding things to the protocol when extension mechansims. We keep bodging and adding edge cases in to Tools because that's where the light is.
+
+-->
+
+<!--
+
+Example. Getting a Customer Record as a result with a known URI Scheme, would allow a subscription to be made, or navigate to say "sales information", "NBA" etc.
+
+Example. Long-running task returning an initial frame with later content being available as a Resource.
+
+Prompts for IDE/API Servers for application building including https:// resources (e.g. llms.txt) to be resolved by the Host for inclusion in context during code generation.
+
+Commonly agreed URI scheme for Home Automation sensors and controls would allow integrators to use standardised libraries to build all kinds of embedded agent based systems with low effort.
+
+UX generation patterns (such as Claude Artifacts) delivered by commonly agreed schemes would allow rich clients (Claude Desktop, Sage, 5ire and others) to use standard SDKs to show rich User Interfaces from MCP Servers that supported the scheme.
+-->
+
+<!--
+What might slow that down?
+Knowledge
+-->
+
+<!--
+# Futures
+
+## At least one SDK for Client application developers to use.
+## Some Specification refinements (the ability to use without Embedding e.g.)
+## Tying up Roots and Resources (especially with Remote MCP Servers)
+## Sampling would be better if it supported Resources.
+## Add URI sceheme to the Registry
+-->
+<!--
+
+We can either have every Client know about every Server, or every Server know specifically. MCP is still useful in that scenario; because it gives you standards, and using basic tools stuff will probably still work.
+
+We know this -- it's just restating the MxN problem.
+
+There's a lot of good things that can be achieved just by Client applications providing richer constructs for assembling context using the primitives, and more transparently exposing Resources and Prompts to be used.
+
+-->
+
+<!--
+Inversion of control
+
+
+What we are always trying to do is to manage the complexity of the real world, different competing software systems. I hope that instinctively we can keep the core protocol simple and EXTENSIBLE. MCP clients should be 50 lines of code, Servers should expect to work everywhere. The danger is that powerful parts of the protocol go dark, and less optimal solutions are . Push in or out of the protocol. Push in our out of _this part_ of the protocol. Barrier to entry.
+
+-->
+
+<!-->
+
+The MCP Server Developer can provide some help here; if the content is or isn't intended for the LLM, or prioritised for User consumption.
+
+If you want - and the server and uri scheme support it - you can subscribe for live updates to them, specify a templating scheme and use completions for discovery - but these things are all optional if you need them. I'd encourage people to use those capabilities, and think it good practice to have an integrated scheme, but
+-->

2026/mcp-connect/theme/structure.css

@@ -0,0 +1,786 @@
+/* @theme structure */
+
+/*
+  ============================================
+    Created by Paulo Cunha
+    version: 1.75
+    
+    update: 06.mai.2024
+    update: 23.jun.2023 
+    update: 12.mai.2022
+    update: 30.dez.2021
+         
+  ============================================
+
+    You may use freely (MIT license) provided  
+    due credits are granted to the authors. 
+
+    CLASSES:
+        
+        <!-- _class: biblio           -->
+        <!-- _class: blockquote       -->
+        <!-- _class: cite             -->
+
+        <!-- _class: columns          -->
+        <!-- _class: columns3         -->
+        <!-- _class: columns-center   -->
+        <!-- _class: columns3-center  -->
+        
+        <!-- _class: cool-list        -->
+        <!-- _class: cool-list2       -->
+        <!-- _class: table            -->
+        <!-- _class: transition       -->
+        <!-- _class: titlepage        -->
+
+  Credits: https://catalin.red/css3-ordered-list-styles/
+           for cool-list anda cool-list2.
+
+*/
+
+/***************** COMMON STRUCTURE **********************/
+
+h1 {
+    color: var(--h1-color);
+    border-bottom: 1px solid var(--border-color);
+  }
+  
+  section p {
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+    line-height: 1.3em;
+    font-size: 32px;
+  }
+  
+  section li {
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+    line-height: 1.2em;
+    font-size: 105%;
+    color: val(--list-item-color);
+  }
+  
+  /* Definition for emphasis */
+  section em {
+    color: var(--italic-color);
+    background: var(--italic-background-color);
+    font-style: normal;
+    font-weight: bold;
+    font-family: sans-serif;
+    padding-top: 6px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-bottom: 6px;
+  }
+  
+  /* Definition for bold text */
+  section strong {
+    color: var(--bold-color);
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: 600;
+  }
+  
+  
+  section figcaption{
+    font-size: 80%;
+    padding-top: 16px;
+    /* text-align: center; */
+  }
+  
+  /* May append some string to page number     */
+  /* Uses format "page-number / total pages" */
+  
+  section::after {
+    color: rgb(51, 59, 77);
+    font-size: 0.8em;
+    content: ' ' attr(data-marpit-pagination) '/'
+      attr(data-marpit-pagination-total) ' ';
+  }
+  
+  .center {
+    text-align: center;
+  }
+  
+  .right {
+    text-align: right;
+  }
+  
+  .small {
+    font-size: 24px;
+  }
+  
+  /* ------------------- TABLE -----------------------------*/
+  
+  /* 
+     Tables are always centered.
+     Credits: Juan Vera del Campo 
+     Locus:   https://github.com/Juanvvc
+     
+  */
+  section table {
+    margin-top: 40px;
+    
+    
+    /* width: auto;  (24.01.2025 paulo.cunha) */
+    border: 0;
+    font-size: 24px;
+    
+      margin-right: auto !important;
+      margin-left: auto !important; 
+    
+  }
+  
+  section table th {
+    background-color: var(--table-header-color);
+    color: var(--table-header-font-color);
+    border: 1;
+    border-top: var(--table-border-top) solid 2px;
+  }
+  
+  section table td {
+    border: 0;
+  }
+  
+  section table tr:nth-child(2) {
+    background-color: #c4c6c6;
+    
+  }
+  
+  section table tr:last-child {
+    border-bottom: var(--table-border-bottom) solid 1px;
+  }
+  
+  tr:nth-child(even) {
+    background-color: var(--table-nth-child-color) !important;
+  }
+  
+  tr:hover {
+    color: var(--table-hover-color);
+    background-color: var(--table-hover-background-color);
+    font-weight: bold;
+  }
+  
+  
+  /* ------------------- BLOCK QUOTE -----------------------------*/
+  /* 
+    Block quote: used for footnote
+    substitution. Use as the last  
+    element of a slide.
+  */
+  section blockquote {
+    color: rgb(66, 66, 66);
+    font-size: 20px;
+    border-top: 0.1em dashed var(--extra-back-color);
+    margin-top: auto;
+  }
+  
+  section blockquote p {
+    font-size: 1.12em !important;
+    letter-spacing: -0.5px !important;
+  }
+  
+  section blockquote strong {
+    color: var(--blockquote-strong);
+    font-weight: bold;
+    font-size: 1.11em !important;
+    letter-spacing: -0.5px !important;
+  }
+  
+  /* ------------------- COLUMNS -----------------------------*/
+  /* 
+    Adds two-columns class 
+  */
+  .columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+    /* justify-content: center !important; */
+  }
+  
+  .columns p {
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+    line-height: 1.16em;
+    font-size: 30px;
+  }
+  
+  .columns ol,
+  ul {
+    margin-top: 0.15em;
+    margin-bottom: 0.25em;
+    line-height: 1.73em !important;
+    font-size: 26px;
+    color: var();
+  }
+  
+  /* ------------------- COLUMNS CENTER ---------------------*/
+  /* 
+  /* 
+    Adds two-columns with centered contens class 
+  */
+  .columns-center {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  /* ------------------- THREE-COLUMNS -----------------------------*/
+  /* 
+    Adds three-columns class 
+  */
+  .columns3 {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+    /* justify-content: center !important; */
+  }
+  
+  /* ------------------- THREE-COLUMNS-CENTER ---------------------*/
+  /* 
+    Adds three-columns with centered contens class 
+  */
+  .columns3-center {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  /* ------------------- TITLEPAGE -----------------------------*/
+  /* 
+      Title Page Class: first slide in a deck.
+      
+      Use: 
+      
+      <!-- _class: titlepage --> 
+  
+      # TTILE
+      ## SUBTITLE
+      ### AUTHOR
+      #### DATE
+      ##### INSTITUTION
+  */
+  
+  section.titlepage {
+    background-color: var(--background-color);
+  }
+  
+  /* 
+    Titlepage informations 
+  */
+  section.titlepage .title {
+    font-size: var(--title-size);
+    font-weight: var(--title-font-weight);
+    color: var(--title-color);
+    border-bottom: 1px solid var(--border-color);
+    line-height: 1.2;
+    padding-bottom: 15px;
+  }
+  
+  section.titlepage .subtitle {
+    font-size: var(--subtitle-size);
+    font-weight: var(--subtitle-font-weight);
+    line-height: 1.2;
+  
+    color: var(--subtitle-color);
+    padding-top: 10px;
+    padding-bottom: 120px;
+    letter-spacing: var(--letter-spacing);
+  }
+  
+  section.titlepage .author {
+    font-size: var(--author-size);
+  }
+  
+  section.titlepage .date {
+    font-size: var(--date-size);
+  }
+  
+  section.titlepage .organization {
+    font-size: var(--institute-size);
+  }
+  
+  section.titlepage .author,
+  section.titlepage .date,
+  section.titlepage .organization {
+    font-weight: 400;
+    text-align: right;
+    color: var(--titlepage-color);
+    line-height: 1.25;
+  }
+  
+  section.titlepage h3,
+  section.titlepage h4,
+  section.titlepage h5 {
+    font-weight: 400;
+    text-align: right;
+    color: var(--titlepage-color);
+    line-height: 0.45;
+    letter-spacing: var(--letter-spacing);
+  }
+  
+  section.titlepage h1 {
+    font-size: var(--title-size) !important;
+    font-weight: var(--title-font-weight) !important;
+    text-align: left;
+    color: var(--title-color) !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    line-height: 1.25;
+    /* padding-right: 20%; */
+  }
+  
+  section.titlepage h2 {
+    font-size: var(--subtitle-size);
+    font-weight: var(--subtitle-font-weight);
+    text-align: left;
+    color: var(--subtitle-color) !important;
+    letter-spacing: var(--letter-spacing);
+    line-height: 1.2;
+    margin-top: -0.2em;
+    padding-bottom: 95px;
+  }
+  
+  section.titlepage h3 {
+    font-size: var(--author-size);
+  }
+  
+  section.titlepage h4 {
+    font-size: var(--date-size);
+  }
+  
+  section.titlepage h5 {
+    font-size: var(--institute-size);
+  }
+  
+  /* Omits page number in Title Page Slide */
+  section.titlepage footer,
+  section.titlepage header,
+  section.titlepage:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  /* ------------------- TRANSITION -----------------------------*/
+  /* 
+      transition class: first slide in a section. Use h1 as header.
+      Use: 
+      
+      <!-- _class: transition --> 
+  
+      # Header
+     
+  */
+  section.transition {
+    background-color: var(--transitionpage-color);
+    text-align: center !important;
+    font-weight: bold;
+    color: white;
+    padding-top: auto;
+    padding-buttom: auto;
+  }
+  
+  section.transition h1,
+  section.transition h2,
+  section.transition p,
+  section.transition a {
+    color: rgb(243, 229, 212);
+    font-size: 200%;
+    border-bottom: none;
+  }
+  
+  section.transition footer,
+  section.transition header,
+  section.transition:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  /* ------------------- TRANSITION2 -----------------------------*/
+  /* 
+      transition2 class: first slide in a section. Use h1 as header.
+      Use: 
+      
+      <!-- _class: transition2 --> 
+  
+      # Header
+     
+  */
+  section.transition2 {
+    background-color: rgb(137, 173, 207);
+    text-align: center !important;
+    font-weight: bold !important;
+    color: rgb(255, 255, 255);
+    padding-top: auto;
+    padding-buttom: auto;
+  }
+  
+  section.transition2 h1,
+  section.transition2 h2,
+  section.transition2 p,
+  section.transition2 a {
+    color: rgb(217, 235, 247);
+    font-size: 200%;
+    border-bottom: none;
+  }
+  
+  section.transition2 em {
+    background-color: rgb(60, 255, 0) !important;
+  }
+  
+  section.transition2 footer,
+  section.transition2 header,
+  section.transition2:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  
+  /* ------------------- TRANSITION3 -----------------------------*/
+  /* 
+      transition2 class: first slide in a section. Use h1 as header.
+      Use: 
+      
+      <!-- _class: transition3 --> 
+  
+      # Header
+     
+  */
+  section.transition3 {
+    background-color: rgb(66, 69, 71);
+    text-align: center !important;
+    font-weight: bold !important;
+    color: rgb(255, 255, 255);
+    padding-top: auto;
+    padding-buttom: auto;
+  }
+  
+  section.transition3 h1,
+  section.transition3 h2,
+  section.transition3 p,
+  section.transition3 a {
+    color: rgb(244, 247, 217);
+    font-size: 200%;
+    border-bottom: none;
+  }
+  
+  section.transition3 em {
+    background-color: rgb(60, 255, 0) !important;
+  }
+  
+  section.transition3 strong {
+    color: rgb(71, 83, 90);
+  }
+  
+  section.transition3 footer,
+  section.transition3 header,
+  section.transition3:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  /* ------------------- CITE -----------------------------*/
+  /* 
+      cite class: slide containg a citation 
+      
+      Use: 
+      
+      <!-- _class: cite --> 
+  
+      Text
+  
+  */
+  section.cite {
+    background-color: var(--background-color);
+  }
+  
+  section.cite p {
+    color: black;
+    background-color: ;
+    letter-spacing: var(--letter-spacing);
+    font-size: 150%;
+    text-align: center;
+    line-height: 1.2em;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    /*  font-style: oblique; */
+    padding-top: auto;
+    padding-bottom: auto;
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+  
+  section.cite strong {
+    color: var(--strong-color);
+  }
+  
+  /* Omits page number in Title Page Slide */
+  section.cite footer,
+  section.cite header,
+  section.cite:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  /* ------------------- BIBLIO -----------------------------*/
+  /* 
+      slides containg bibliography
+      Use: 
+      
+      <!-- _class: biblio --> 
+      # References
+  
+      1. Item one
+      2. Item two
+  
+  */
+  
+  section.biblio {
+    background-color: var(--biblio-background-color);
+  }
+  
+  section.biblio p {
+    color: var(--text-color);
+    font-size: 80%;
+    font-weight: 300;
+    padding-left: 5px;
+  }
+  
+  section.biblio h1 {
+    font-size: 35px;
+    color: var(--text-color);
+    border-bottom: 1px solid var(--border-color);
+  }
+  
+  section.biblio strong {
+    color: var(--bold-color);
+  }
+  
+  section.biblio a {
+    font-size: 31px;
+    font-weight: bold;
+    color: var(--bold-color);
+  }
+  
+  section.biblio li {
+    color: var(--text-color);
+  }
+  
+  section.biblio footer,
+  section.biblio header,
+  section.biblio:after {
+    /* hide header, footer and pagination */
+    display: none;
+  }
+  
+  /* ------------------- COOL-LIST -----------------------------*/
+  /* 
+  
+    Credits: https://catalin.red/css3-ordered-list-styles/
+  
+    Use:
+  
+    <!-- _class: cool-list -->
+  
+    1. *Item One*
+    1. *Item two*
+        1. *Item two.one*
+        1. *Item two.two*
+        1. *Item two.three*
+    1. *Item Three*
+    
+  */
+  
+  section.cool-list ol {
+    counter-reset: li;
+    /* Initiate a counter */
+    list-style: none;
+    /* Remove default numbering */
+    padding: 0;
+    /*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/
+  }
+  
+  section.cool-list li {
+    margin-bottom: 0.1em !important;
+    margin-top: 0.1em !important;
+  }
+  
+  section.cool-list ol>li>em,
+  section.cool-list>ol>li>a {
+    position: relative;
+    display: block;
+    padding: 0.4em 0.4em 0.4em 2em;
+    margin: 0.5em 0;
+    background: #ddd;
+    color: #444;
+    text-decoration: none;
+    border-radius: 0.3em;
+    transition: all 0.3s ease-out;
+    font-style: normal;
+  }
+  
+  section.cool-list ol>li>em:before,
+  section.cool-list>ol>li>a:before {
+    content: counter(li);
+    counter-increment: li;
+    position: absolute;
+    left: -1.3em;
+    top: 50%;
+    margin-top: -1.3em;
+    background: var(--cool-list-color);
+    height: 2em;
+    width: 2em;
+    line-height: 2em;
+    border: 0.3em solid #fff;
+    text-align: center;
+    font-weight: normal;
+    border-radius: 2em;
+    transition: all 0.3s ease-out;
+    color: white;
+  }
+  
+  section.cool-list>ol>li>em:hover,
+  section.cool-list>ol>li>a:hover {
+    background: #eee;
+    font-weight: bolder;
+  }
+  
+  /* Rotating effect */
+  /*
+  section.cool-list ol > li > em:hover:before,section.cool-list ol > li > a:hover:before{
+      transform: rotate(360deg);
+  }*/
+  /* Lists inside lists */
+  section.cool-list>ol ol {
+    margin: 0 0 0 2em;
+    /* Add some left margin for inner lists */
+    font-size: 75%;
+    counter-reset: li2;
+    /* Initiate a counter */
+  }
+  
+  section.cool-list>ol ol>li>em:before,
+  section.cool-list>ol ol>li>a:before {
+    content: counter(li2);
+    counter-increment: li2;
+  }
+  
+  section.cool-list>ol>li>ul {
+    list-style-type: disc;
+    margin: 0 0 0 1em;
+    font-size: 75%;
+  }
+  
+  section.cool-list>ol ol>li>em {
+    background: #efefef;
+  }
+  
+  /******************* cool-list2 *****************************/
+  /* 
+  
+    Credits: https://catalin.red/css3-ordered-list-styles/
+  
+    Use:
+  
+    <!-- _class: cool-list2 -->
+  
+    1. *Item One*
+    1. *Item two*
+        1. *Item two.one*
+        1. *Item two.two*
+        1. *Item two.three*
+    1. *Item Three*
+  
+  */
+  
+  section.cool-list2 ol {
+    counter-reset: li;
+    /* Initiate a counter */
+    list-style: none;
+    /* Remove default numbering */
+    padding: 0;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  }
+  
+  section.cool-list2 ol ol {
+    margin: 0 0 0 2em;
+    /* Add some left margin for inner lists */
+  }
+  
+  section.cool-list2 ol li em {
+    position: relative;
+    display: block;
+    padding: 0.4em 0.4em 0.4em 0.8em;
+    margin: 0.5em 0 0.5em 2.5em;
+    background: #ddd;
+    color: #444;
+    text-decoration: none;
+    transition: all 0.3s ease-out;
+    font-style: normal;
+  }
+  
+  section.cool-list2 ol li em:hover {
+    background: #eee;
+    font-weight: bolder;
+  }
+  
+  section.cool-list2 ol li em:before {
+    content: counter(li);
+    counter-increment: li;
+    position: absolute;
+    left: -2.5em;
+    top: 50%;
+    margin-top: -1em;
+    /* background: #fa8072; */
+    background: var(--lighter-color);
+    height: 2em;
+    width: 2em;
+    line-height: 2em;
+    text-align: center;
+    font-weight: bold;
+  }
+  
+  section.cool-list2 ol li em:after {
+    position: absolute;
+    content: '';
+    border: 0.5em solid transparent;
+    left: -1em;
+    top: 50%;
+    margin-top: -0.5em;
+    transition: all 0.3s ease-out;
+  }
+  
+  section.cool-list2 ol li em:hover:after {
+    left: -0.5em;
+    /* border-left-color: #fa8072; */
+    border-left-color: var(--lighter-color);
+  }
+  
+  /* Lists inside lists */
+  section.cool-list2 ol ol {
+    margin: 0 0 0 2em;
+    /* Add some left margin for inner lists */
+    font-size: 75%;
+    counter-reset: li2;
+    /* Initiate a counter */
+  }
+  
+  section.cool-list2 ol ol>li>em:before,
+  section.cool-list2 ol ol>li>a:before {
+    content: counter(li2);
+    counter-increment: li2;
+    background: lightgray;
+  }
+  
+  section.cool-list2 ol ul {
+    list-style-type: disc;
+    margin: 0 0 0 1em;
+    font-size: 75%;
+  }
+  
+  section.cool-list2 ol ol em {
+    background: #efefef;
+  }