/* Styles for agents.html (shared rules are in css/site.css). */

html { scroll-behavior: smooth; }
@keyframes gsSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gsPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .4; } }


/* agents hero */
.agents-hero-div-1 { max-width: 1180px; margin: 0 auto; padding: 80px 24px 88px; display: flex; flex-direction: column; gap: 48px; }
.agents-hero-div-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0; }
.agents-hero-div-3 { padding: 22px; border-right: 1px solid #d8d0bf; display: flex; flex-direction: column; gap: 12px; }
.agents-hero-div-4 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6b655a; display: flex; justify-content: space-between; }
.agents-hero-div-5 { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; transition: all .4s; }
.agents-hero-span-6 { color: #1a1713; }
.agents-hero-div-7 { padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: background .5s; }
.agents-hero-div-8 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; transition: opacity .5s; }
.agents-hero-p-9 { margin: 0; font-size: 15px; line-height: 1.5; color: #3d3831; transition: opacity .5s; }
.agents-hero-div-10 { display: flex; gap: 8px; flex-wrap: wrap; transition: opacity .5s; }
.agents-hero-span-11 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; border: 1px solid #d8d0bf; border-radius: 3px; padding: 4px 8px; color: #3d3831; }
.agents-hero-div-12 { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; transition: opacity .5s; }
.agents-hero-button-13 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; padding: 9px 14px; border: 1px solid #1f6f5f; border-radius: 4px; cursor: pointer; transition: all .2s; }
.agents-hero-button-14 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; padding: 9px 14px; border: 1px solid #d8d0bf; border-radius: 4px; background: transparent; color: #6b655a; cursor: pointer; }
.agents-hero-button-14:hover { border: 1px solid #1a1713; color: #1a1713; }
.agents-hero-span-15 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b655a; margin-left: auto; }

/* the loop */
.the-loop-div-1 { max-width: 860px; display: flex; flex-direction: column; gap: 18px; }
.the-loop-div-2 { display: flex; justify-content: space-between; align-items: center; }
.the-loop-span-3 { width: 8px; height: 8px; border-radius: 50%; transition: background .4s; }
.the-loop-div-4 { padding: 26px 24px; background: #e2eee8; display: flex; flex-direction: column; gap: 12px; }

/* console */
.console-div-1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.console-div-2 { border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: all .4s; }
.console-span-3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: #f4efe5; }
.console-div-4 { display: flex; flex-direction: column; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #cfc8ba; border-top: 1px solid #3a352d; padding-top: 18px; }
.console-div-5 { border: 1px solid #f4efe5; border-radius: 8px; background: #221e19; overflow: hidden; position: sticky; top: 90px; }
.console-div-6 { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; }
.console-div-7 { border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: all .5s; animation: gsRise .4s ease both; }
.console-div-8 { display: flex; justify-content: space-between; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.console-div-9 { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.5; }

/* proposal anatomy */
.proposal-anatomy-div-1 { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1a1713; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #6b655a; flex-wrap: wrap; }
.proposal-anatomy-span-2 { width: 8px; height: 8px; border-radius: 50%; background: #1f6f5f; }
.proposal-anatomy-span-3 { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.proposal-anatomy-span-4 { border: 1px solid #1f6f5f; color: #1f6f5f; border-radius: 3px; padding: 2px 7px; font-size: 10px; letter-spacing: .08em; }
.proposal-anatomy-div-5 { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.proposal-anatomy-div-6 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.025em; line-height: 1.05; }
.proposal-anatomy-div-7 { padding: 18px 22px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.proposal-anatomy-button-8 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 8px 12px; border-radius: 4px; border: 1px solid #1a1713; cursor: pointer; transition: all .2s; }
.proposal-anatomy-div-9 { padding: 22px; min-height: 260px; }
.proposal-anatomy-div-10 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; animation: gsRise .3s ease both; }
.proposal-anatomy-div-11 { border: 1px solid #d8d0bf; border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.proposal-anatomy-span-12 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.proposal-anatomy-span-13 { font-size: 14px; color: #3d3831; line-height: 1.45; }
.proposal-anatomy-span-14 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.6; color: #3d3831; }
.proposal-anatomy-div-15 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; animation: gsRise .3s ease both; }
.proposal-anatomy-div-16 { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.7; background: #f4efe5; border: 1px solid #d8d0bf; border-radius: 6px; padding: 14px 16px; overflow-x: auto; }
.proposal-anatomy-div-17 { background: #f5dcd6; color: #7a2e1f; }
.proposal-anatomy-div-18 { background: #dcebe3; color: #1f6f5f; }
.proposal-anatomy-div-19 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proposal-anatomy-div-20 { border: 1px solid #d8d0bf; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fbf8f1; }
.proposal-anatomy-div-21 { height: 30px; border: 1px solid #1a1713; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.proposal-anatomy-div-22 { height: 30px; border: 1px solid #d8d0bf; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #6b655a; }
.proposal-anatomy-div-23 { height: 60px; border: 1px dashed #d8d0bf; border-radius: 4px; }
.proposal-anatomy-span-24 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; color: #1f6f5f; }
.proposal-anatomy-div-25 { border: 1px solid #1f6f5f; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fbf8f1; }
.proposal-anatomy-div-26 { height: 30px; border: 1px solid #1f6f5f; background: #e2eee8; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.proposal-anatomy-div-27 { height: 60px; border-radius: 4px; background: repeating-linear-gradient(90deg, #e6e0d3 0 12%, transparent 12% 14%); }
.proposal-anatomy-div-28 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; animation: gsRise .3s ease both; }
.proposal-anatomy-div-29 { border: 1px solid #1f6f5f; background: #e2eee8; border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.proposal-anatomy-span-30 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; }
.proposal-anatomy-span-31 { font-size: 14px; color: #3d3831; line-height: 1.5; }
.proposal-anatomy-div-32 { border: 1px solid #d8d0bf; border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.proposal-anatomy-div-33 { display: flex; flex-direction: column; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; animation: gsRise .3s ease both; }
.proposal-anatomy-div-34 { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e6e0d3; }
.proposal-anatomy-div-35 { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 10px 0; }
.proposal-anatomy-div-36 { display: flex; flex-direction: column; gap: 16px; animation: gsRise .3s ease both; }
.proposal-anatomy-span-37 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; }

/* modes and roles */
.modes-and-roles-button-1 { all: unset; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; border-radius: 6px; padding: 14px 16px; transition: all .2s; }
.modes-and-roles-span-2 { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #1a1713; margin-top: 3px; box-shadow: inset 0 0 0 3px #fbf8f1; }
.modes-and-roles-div-3 { border: 1px solid #1a1713; border-radius: 6px; padding: 14px 16px; background: #e2eee8; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.6; color: #1a1713; }
.modes-and-roles-h2-4 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(28px, 3.5vw, 40px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.modes-and-roles-div-5 { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #d8d0bf; }
.modes-and-roles-span-6 { font-size: 15px; line-height: 1.5; color: #3d3831; }
.modes-and-roles-div-7 { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; }

/* memory */
.memory-a-1 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: #8fc4b5; border-bottom: 2px solid #8fc4b5; align-self: flex-start; }
.memory-a-1:hover { color: #f4efe5; border-bottom: 2px solid #f4efe5; }
.memory-div-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.memory-div-3 { border-radius: 5px; padding: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-align: center; transition: all .4s; }
.memory-div-4 { border: 1px solid #4a4439; border-radius: 6px; padding: 12px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #a39c8e; display: flex; justify-content: space-between; gap: 10px; }
.memory-div-5 { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 9px 12px; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; transition: all .4s; }
.memory-span-6 { color: #8fc4b5; letter-spacing: .06em; font-size: 10px; padding-top: 2px; }

/* changelog */
.changelog-div-1 { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.changelog-div-2 { border-top: 1px solid #1a1713; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.changelog-span-3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: #1f6f5f; }
.changelog-div-4 { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid #d8d0bf; align-items: baseline; }
.changelog-span-5 { font-family: 'Archivo', sans-serif; letter-spacing: -.01em; line-height: 1.2; }
.changelog-span-6 { font-size: 14px; color: #5a544a; line-height: 1.45; }
.changelog-span-7 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; white-space: nowrap; }