.ext-hero { position:relative; isolation:isolate; display:flex; align-items:center; min-height: min(850px,calc(100svh - 64px)); padding:100px 0 120px; text-align:left; overflow:hidden; background:#080b11; }
.ext-hero-image { position:absolute; inset:0; z-index:-2; }
.ext-hero-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 56%; }
.ext-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,7,13,.94) 0%,rgba(4,7,13,.8) 30%,rgba(4,7,13,.32) 60%,rgba(4,7,13,.08) 100%),linear-gradient(0deg,#060910,transparent 24%); }
.ext-hero-content { position:relative; }
.ext-hero h1 { font-size:clamp(2.8rem,4.4vw,4.4rem); line-height:1.08; margin:22px 0; }
.ext-hero h1 { max-width:650px; }
.ext-hero .lead { max-width:560px; margin:0; color:#d5dbe5; }
.ext-hero .btn-row { justify-content:flex-start; margin-top:32px; }
@media(max-width:640px) {
  .ext-hero { min-height:680px; padding:70px 0 100px; }
  .ext-hero-image img { object-position:60% center; }
  .ext-hero::after { background:linear-gradient(90deg,rgba(4,7,13,.88),rgba(4,7,13,.52)),linear-gradient(0deg,#060910,transparent 30%); }
}
.ext-paths .card { display:flex; flex-direction:column; text-decoration:none; }
.ext-paths h2 { margin-bottom:16px; }
.ext-paths p { color:var(--txt-2); }
.ext-arrow { color:#aabaff; margin-top:auto; padding-top:18px; font-size:1.4rem; }
.ext-split { display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.ext-split h2 { margin-bottom:24px; }
.ext-note { color:var(--txt-3); font-size:.88rem; margin-top:22px; line-height:1.6; }
.ext-shot { margin:0; overflow:hidden; border-radius:18px; border:1px solid var(--line); }
.ext-shot img { width:100%; display:block; }
.ext-addons .card { overflow:hidden; padding:0; }
.ext-addons img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.ext-addons .card>div { padding:26px; }
.ext-addons h3 { margin-bottom:12px; }
.ext-addons p { color:var(--txt-2); }
.ext-details { border:1px solid var(--line); border-radius:16px; margin-top:22px; padding:0 24px; }
.ext-details summary { padding:22px 0; cursor:pointer; color:var(--txt-2); font-weight:600; }
.ext-details[open] { padding-bottom:28px; }
.ext-details.is-open { padding-bottom:28px; }
.ext-details-title { padding:22px 0; color:var(--txt-2); font-weight:600; font-size:1.05rem; }
.extend-page #agents .mcp-params { max-width:1080px; margin-inline:auto; }
.ext-reference>.wrap { width:100%; padding:0; }
.ext-reference .rv { opacity:1; transform:none; }
.ext-reference .d2 { font-size:2rem; }
.ext-reference .sec-head { margin-bottom:28px; }
.ext-advanced { background:rgba(255,255,255,.015); }
.extend-page section[id],.ext-details[id] { scroll-margin-top:90px; }
.extend-page #agents .mcp-chat { gap:24px; }
.extend-page #agents .mcp-say { font-size:1.05rem; line-height:1.5; }
/* The three turns side by side, so the whole conversation fits in one glance.
   The quote grows to push every image down to the same baseline. */
@media (min-width:821px) {
  .extend-page #agents .mcp-chat { max-width:1080px; display:grid; grid-template-columns:repeat(3,1fr); }
  .extend-page #agents .mcp-turn { display:flex; flex-direction:column; margin-top:0; }
  .extend-page #agents .mcp-say { flex:1; font-size:.98rem; padding-bottom:14px; }
  .extend-page #agents .mcp-say::after { display:none; }
  .extend-page #agents .mcp-out { margin-left:0; }
}
.extend-page a:focus-visible,.ext-details summary:focus-visible { outline:2px solid #aabaff; outline-offset:5px; }
@media(max-width:760px) { .ext-split { grid-template-columns:1fr; gap:28px; } .ext-details { padding-inline:16px; } .ext-reference .row { grid-template-columns:1fr; } }

/* GPU Hardware Recommendation Cards */
.ext-gpu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 36px;
  margin-bottom: 24px;
  perspective: 1000px;
}

.ext-gpu-card {
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.065) 0%, rgba(13, 16, 32, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.32s ease;
  position: relative;
}

.ext-gpu-card:hover {
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 24px 46px -8px rgba(0, 0, 0, 0.7), 0 0 32px rgba(168, 85, 247, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.ext-gpu-card.is-recommended {
  border-color: rgba(168, 85, 247, 0.6);
  background: linear-gradient(175deg, rgba(168, 85, 247, 0.09) 0%, rgba(13, 16, 32, 0.82) 100%);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.6), 0 0 26px rgba(168, 85, 247, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.ext-gpu-card.is-recommended:hover {
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 24px 46px -8px rgba(0, 0, 0, 0.7), 0 0 38px rgba(168, 85, 247, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.ext-gpu-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.ext-gpu-card-header svg {
  width: 22px;
  height: 22px;
  color: #c084fc;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}

.ext-gpu-card:hover .ext-gpu-card-header svg {
  transform: scale(1.1);
  color: #e9d5ff;
}

.ext-gpu-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ext-rec-badge {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.45);
}

.ext-gpu-card-tag {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.ext-gpu-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 20px;
  min-height: 3.1em;
  flex: 1;
}

.ext-gpu-card .engine-card-cloud {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ext-gpu-card:hover .engine-card-cloud {
  transform: scale(1.025);
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.ext-gpu-card .engine-card-cloud span {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: normal;
}

.raccoon-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.24);
  color: #f1f5f9;
  font-size: 0.95rem;
  line-height: 1.5;
}

.raccoon-tip-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.extend-page .mcp-examples { margin:10px 0 0; padding-left:20px; display:grid; gap:6px; }
.extend-page .mcp-examples .mono { font-size:.88em; }