.page:has(.agents-page) .page-background,
.page:has(.agents-page) .page-header { background: var(--background-1); }
.page:has(.agents-page) .page-content { background: var(--background-11); }
.page:has(.agents-page) .page-background .background-image { display: none; }
.agents-page { max-width: 1200px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; }
.agents-heading { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: center; gap: 2rem; margin-bottom: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #ffffff30; border-radius: 1.5rem; overflow: hidden; background: radial-gradient(circle at 85% 20%, #FE5000, transparent 70%), linear-gradient(120deg, #542719, #a33300 65%, #FE5000); }
.agents-heading-copy { min-width: 0; }
.agents-heading h1 { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -.04em; color: #fff; margin-bottom: 1rem; }
.agents-heading h1 span { display: block; max-width: 24ch; margin-top: .75rem; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.agents-heading p { max-width: 38rem; }
.agents-heading-copy > p:not(.agent-eyebrow) { color: #eee; }
.agents-heading-copy > a { display: inline-flex; align-items: center; justify-content: center; margin-top: .75rem; padding: 1rem 2rem; min-height: 3.5rem; max-width: 100%; box-sizing: border-box; font-size: 1.1rem; font-weight: 800; border: 2px solid #fff; border-radius: 1rem; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.agents-heading-copy > a, .agent-hero .agent-launch { background: #000; border-color: #666; color: #fff; }
.agents-heading-copy > a { border-color: #fff; }
.agents-heading-copy > a:hover { background: #262626; color: #fff; border-color: #00BBFF; transform: translateY(-3px); box-shadow: 0 8px 20px #0005, 0 0 0 2px #00BBFF30; }
.agents-heading-copy > a:active { transform: translateY(0); box-shadow: none; }
.agents-heading a:focus-visible, .agent-hero a:focus-visible { outline: 3px solid #00BBFF; outline-offset: 4px; }
.agents-heading .agent-eyebrow, .agent-hero .agent-eyebrow { color: #fff; }
.agent-hero .agent-muted { color: #ccc; }
.agents-heading-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 280px; aspect-ratio: 1; justify-self: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, #00BBFF40, transparent 70%); }
.agents-heading-art > svg { width: 48%; height: 48%; color: #fff; filter: drop-shadow(0 0 24px #00BBFF80); }
.agent-eyebrow { letter-spacing: .2em; font-size: .65rem; font-weight: 700; color: var(--primary); }
.agent-muted, .agent-footnote { color: var(--muted-color); }
.agents-page .select-agent-head { margin-bottom: 1.5rem; }
.agents-page .tool-list-search { max-width: 36rem; }
.agents-page .tool-table { width: 100%; }
.agents-page .tool-title { width: 35%; }
.agents-page .tool-title a { font-weight: 700; color: #edf2fa; }
.agents-page .tool-title a:hover, .agents-page .tool-title a:focus-visible { color: #b7cbff; }
.agents-page .tool-list-item-header th { color: #FE5000; }
.agents-page .tool-list-item { cursor: pointer; }
.agents-page .tool-list-item:hover { background: rgba(255,255,255,.04); }
.agents-page .tool-description { font-size: .85rem; white-space: normal; }
.agents-page .tool-list-item.hidden, .agents-page .tool-list-item.collapsed,
.agents-page .tool-list-item-header.hidden { display: none; }
.agents-page .tool-list-item-header { cursor: pointer; }
.agents-page .tool-list-item-header .icon-button { display: inline-flex; float: right; }
.agents-page .tool-list-item-header:not(.collapsed) .expand,
.agents-page .tool-list-item-header.collapsed .collapse { display: none; }
.agents-page .warning { color: gold; display: inline-flex; margin-left: .5rem; }
.agents-page .warning:not([data-warning]) { display: none; }
.agents-page .agent-back { display: inline-block; margin-bottom: 1.5rem; background: #000; color: #fff; border: 1px solid #ccc; }
.agents-page .agent-back:hover { background: #262626; color: #fff; border-color: #FE5000; }
.agents-page .agent-back:focus-visible { outline: 3px solid #FE5000; outline-offset: 4px; }
.agent-hero { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #ffffff30; border-radius: 1.5rem; overflow: hidden; background: radial-gradient(circle at 85% 20%, #FE5000, transparent 70%), linear-gradient(120deg, #542719, #a33300 65%, #FE5000); }
.agent-cover { position: relative; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; align-self: center; display: grid; place-items: center; overflow: hidden; border-radius: 1rem; background: #00BBFF; box-shadow: 0 20px 70px #0008, inset 0 0 0 1px #fff2; }
.agent-monogram { z-index: 1; font-size: clamp(4rem, 8vw, 7rem); font-weight: 800; letter-spacing: -.08em; color: #fff; text-shadow: 0 8px 30px #0005; }
.agent-orbit { position: absolute; border: 1px solid #fff5; border-radius: 50%; width: 140%; height: 60%; transform: rotate(-35deg); }
.orbit-two { transform: rotate(45deg); width: 65%; height: 140%; border-color: #fff2; }
.agent-hero-copy { align-self: center; min-width: 0; }
.agent-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -.04em; color: #fff; margin: 1rem 0; overflow-wrap: anywhere; }
.agent-description { color: #eee; white-space: pre-wrap; line-height: 1.7; }
.agent-badges { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.agent-badges span { padding: 0; border: 0; border-radius: 0; font-size: .7rem; font-weight: 600; background: transparent; color: #eee; }
.agent-badges span + span { border-left: 1px solid #ffffff60; padding-left: 1rem; }
.agent-hero .agent-launch { display: inline-flex; align-items: center; justify-content: center; margin-top: .75rem; padding: 1rem 2rem; min-height: 3.5rem; max-width: 100%; box-sizing: border-box; font-size: 1.1rem; font-weight: 700; background: #000; color: #fff; border: 2px solid #fff; border-radius: 1rem; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.agent-hero .agent-launch:hover { background: #262626; color: #fff; border-color: #00BBFF; transform: translateY(-3px); box-shadow: 0 8px 20px #0005; }
.agent-hero .agent-launch:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .agent-hero .agent-launch, .agents-heading-copy > a, .agents-heading-copy > a:hover { transition: none; transform: none; } }
.agent-hero-copy > small { display: block; margin-top: .75rem; }
.agent-warning { border-left: 2px solid #00BBFF; padding-left: 1rem; color: #fff; }
.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.agent-stat, .agent-panel, .agent-conversations { padding: 1.5rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; }
.agent-stat > span { display: block; font-size: .75rem; color: var(--muted-color); margin-bottom: .5rem; }
.agent-stat-value { display: block; font-size: 2rem; font-weight: 700; }
.agent-stat:nth-child(n+4) { grid-column: span 1; }
.agent-timestamp { font-size: .8rem; font-weight: 400; }
.agent-timestamp small { display: block; margin-top: .3rem; color: var(--muted-color); }
.agent-panel, .agent-conversations { margin-bottom: 1.5rem; }
.agent-activity h3 { font-size: .9rem; margin: 1.5rem 0 1rem; }
.agent-bars { height: 120px; display: flex; gap: 3px; align-items: end; }
.agent-bar-slot { flex: 1; height: 100%; display: flex; align-items: end; min-width: 0; }
.agent-bar { width: 100%; background: #00BBFF; border-radius: 3px 3px 0 0; }
.agent-bar.empty { background: rgba(255,255,255,.12); }
.agent-bar-slot:hover .agent-bar, .agent-bar-slot:focus .agent-bar { background: #fff; }
.agent-chart-axis { display: flex; justify-content: space-between; font-size: .65rem; color: var(--muted-color); margin-top: .5rem; }
.agent-conversations ul { padding: 0; margin: 0; }
.agent-conversations li { list-style: none; border-top: 1px solid #fff1; margin: 0; }
.agent-conversations li a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; text-decoration: none; }
.agent-conversations li a > div:first-child { flex: 1; min-width: 0; }
.agent-conversations strong { display: block; overflow-wrap: anywhere; }
.agent-conversations .agent-muted { display: block; font-size: .75rem; }
.agent-footnote { font-size: .7rem; line-height: 1.6; }
@media (max-width: 700px) {
  .agents-heading { grid-template-columns: 1fr; }
  .agents-heading-art { display: none; }
  .agent-hero { grid-template-columns: 1fr; }
  .agent-cover { min-height: 0; width: min(100%, 280px); justify-self: center; }
  .agent-stats { grid-template-columns: repeat(2, 1fr); }
  .agents-page .tool-table, .agents-page .tool-tbody, .agents-page .tool-list-item { display: block; }
  .agents-page .tool-list-item.hidden, .agents-page .tool-list-item.collapsed { display: none; }
  .agents-page .tool-title, .agents-page .tool-description { display: block; width: 100%; }
  .agent-conversations li a { flex-wrap: wrap; }
  .agent-conversations li a > div:first-child { flex-basis: 100%; }
  .agent-bars { gap: 2px; }
}