.agent-visual { --agent-enter: 1; --agent-progress: 1; --agent-charge: .5; position: relative; isolation: isolate; overflow: clip; padding: 112px 0 56px; background: #f8faf7; border-block: 1px solid #dce6dd; }
.agent-visual-wrap { width: min(1320px, calc(100% - 96px)); }
.agent-visual-heading { text-align: center; max-width: 900px; margin: 0 auto 36px; }
.agent-visual-heading .eyebrow { justify-content: center; font-size: 13px; }
.agent-visual-heading h2 { text-wrap: balance; margin-top: 24px; font-weight: 520; font-size: clamp(42px, 5.1vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.agent-visual-heading h2 em { color: #087759; font-style: normal; }
.agent-laboratory { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.agent-context { position: relative; min-width: 0; height: 540px; }
.agent-context-orbits { position: absolute; inset: 24px 3% 70px; background: radial-gradient(ellipse, #bde8d054, transparent 64%); }
.agent-context-orbits i { position: absolute; inset: 10% 11%; border: 1px solid #b4d6c2; border-radius: 50%; transform: rotate(-22deg) scaleX(1.08); opacity: .6; }
.agent-context-orbits i:nth-child(2) { inset: 4% 6%; opacity: .25; transform: rotate(22deg) scaleX(1.08); }
.agent-context-orbits i:nth-child(3) { inset: 20% 23%; opacity: .4; border-style: dashed; transform: rotate(calc(var(--agent-progress) * 22deg)); }
.agent-context-paths { position: absolute; inset: 0; width: 100%; height: calc(100% - 60px); overflow: visible; }
.agent-context-paths path { stroke: #b2d0be; stroke-width: 1; }
.agent-context-paths circle { fill: #3c9e73; }
.agent-context-paths .agent-context-trace { stroke: #15996d; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--agent-progress)); opacity: .7; }
.agent-context-core { position: absolute; left: 50%; top: 44%; width: 204px; height: 204px; transform: translate(-50%, -50%); border: 1px solid #b6d8c5; border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center; background: linear-gradient(140deg, #fffefb, #f3faf4); box-shadow: 0 12px 45px -28px #2b73484d, inset 0 0 24px #f9fff9; }
.agent-context-core > span { color: #587561; font-size: 11px; }
.agent-context-core strong { position: relative; display: flex; align-items: baseline; color: #126b4d; font-size: 82px; line-height: 1.1; letter-spacing: -.075em; font-weight: 550; margin-top: 5px; }
.agent-context-core strong small { position: absolute; left: -25px; bottom: 12px; font-size: 11px; letter-spacing: 0; font-weight: 450; }
.agent-context-core b { color: #548268; font-weight: 450; font-size: 13px; letter-spacing: .04em; }
.agent-memory { position: absolute; width: 142px; border: 1px solid #c8dccf; border-radius: 11px; background: #fffffff2; box-shadow: 0 13px 26px -20px #254b3345; padding: 13px; transition: box-shadow .8s ease, border-color .8s ease; }
.agent-memory > div:first-child { display: flex; align-items: center; gap: 7px; color: #285b41; font-size: 11px; }
.agent-memory svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.agent-memory-chat { left: 3%; top: 47px; transform: rotate(-8deg); }
.agent-memory-file { right: 0; top: 59px; transform: rotate(9deg); }
.agent-memory-tools { right: 3%; bottom: 94px; transform: rotate(-5deg); }
.agent-memory-chats { display: grid; gap: 5px; margin-top: 12px; }
.agent-memory-chats i { display: block; width: 79%; height: 14px; border: 1px solid #d9e8dd; border-radius: 5px 5px 5px 0; background: #edf5ed; }
.agent-memory-chats i:nth-child(2) { justify-self: end; width: 60%; border-radius: 5px 5px 0 5px; background: #d9efdf; }
.agent-memory-chats i:nth-child(3) { width: 69%; height: 11px; }
.agent-memory-pages { position: relative; height: 63px; margin-top: 10px; }
.agent-memory-pages i { position: absolute; width: 47px; height: 57px; left: 37%; border: 1px solid #c0d8c8; border-radius: 4px; background: repeating-linear-gradient(transparent 0 9px, #b5d3c1 9px 10px, transparent 10px 16px) #fbfffa; background-clip: padding-box; box-shadow: inset 9px 0 #fbfffa, inset -9px 0 #fbfffa, inset 0 8px #fbfffa, inset 0 -8px #fbfffa; transform: rotate(11deg); }
.agent-memory-pages i:first-child { left: 15%; transform: rotate(-10deg); background-color: #edf5ed; }
.agent-memory-code { display: grid; gap: 7px; margin-top: 15px; padding-block: 5px; }
.agent-memory-code i { height: 4px; width: 85%; background: linear-gradient(90deg, #3aa87c 0 18%, transparent 18% 23%, #b5d3c3 23% 74%, transparent 74% 79%, #78be9b 79%); border-radius: 2px; }
.agent-memory-code i:nth-child(2) { margin-left: 13%; width: 65%; }
.agent-memory-code i:nth-child(3) { width: 74%; }
.agent-context-seal { position: absolute; bottom: 130px; left: 14%; width: 50px; height: 50px; border: 1px solid #c1dacb; border-radius: 13px; background: #fff; display: grid; place-items: center; transform: rotate(-10deg); box-shadow: 0 10px 24px -18px #185b3445; }
.agent-context figcaption { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-size: 14px; color: #425a49; line-height: 1.7; }
.agent-context figcaption span { color: #7b8d7f; font-size: 12px; }
.agent-engine { position: relative; align-self: center; padding: 0 0 16px 30px; border-left: 1px solid #d7e5db; display: grid; justify-items: center; }
.agent-engine-value { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; }
.agent-engine-value strong { font-size: 69px; letter-spacing: -.065em; color: #1c5139; font-weight: 500; line-height: 1; }
.agent-engine-value strong span { font-size: .68em; }
.agent-engine-value > span { font-size: 12px; line-height: 1.5; color: #63816c; }
.agent-chip { position: relative; width: min(320px, 100%); aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-9deg); margin-block: 15px; filter: drop-shadow(0 18px 18px #24583b0d); }
.agent-chip-pins { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #a4c7b1; stroke-width: 2; stroke-linecap: round; }
.agent-chip-cells { position: relative; display: grid; width: 82%; height: 82%; padding: 18px; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; border: 1px solid #b2d0be; border-radius: 15px; background: linear-gradient(135deg, #fff, #e6f1e8); box-shadow: 3px 7px 0 #cedfd2, 3px 8px 0 1px #bed4c4; }
.agent-chip-cells i { border: 1px solid #d2e2d6; border-radius: 2px; background: linear-gradient(145deg, #f6faf4, #e2eee4); transition: background .9s ease, box-shadow .9s ease, opacity .6s ease; }
.agent-chip-cells i.is-active { border-color: #30a275; background: linear-gradient(145deg, #82d9ac, #1a9d6c); box-shadow: 0 1px 2px #00633b33; }
.agent-chip-label { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #c3dacb; border-radius: 5px; background: #fff; color: #487253; white-space: nowrap; font-size: 9px; }
.agent-engine figcaption { display: grid; gap: 8px; text-align: center; }
.agent-engine figcaption strong { color: #3f664b; font-size: 13px; font-weight: 500; }
.agent-engine figcaption > span { color: #798a7c; font-size: 11px; }
.agent-power-dock { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 30px auto 0; padding: 25px 34px 24px; max-width: 1120px; border-block: 1px solid #d4e2d7; background: linear-gradient(100deg, #eef6ed55, #ffffffa6 65%, #eef6ed55); transition: background 1s ease, border-color 1s ease, box-shadow 1s ease; }
.agent-power-identity { display: flex; align-items: center; min-width: 0; gap: 22px; }
.agent-power-mascot { width: 84px; height: 91px; flex: 0 0 auto; display: grid; place-items: center; }
.agent-power-mascot #showcase-mascot { width: 84px; height: 90px; display: block; filter: drop-shadow(0 6px 5px #1f694817); }
.agent-power-kicker { display: block; color: #69816e; font-size: 10px; }
.agent-power-identity h3 { margin: 9px 0 7px; font-size: 20px; font-weight: 550; letter-spacing: -.035em; }
.agent-power-identity h3 > span { font-size: 10px; font-weight: 450; color: #0b805a; vertical-align: middle; margin-left: 5px; padding: 4px 6px; border: 1px solid #c8dfcf; border-radius: 4px; letter-spacing: 0; white-space: nowrap; }
.agent-power-identity #armor-caption { font-size: 11px; line-height: 1.5; color: #6b7b6e; max-width: 340px; }
.agent-power-options { flex: 0 0 auto; }
.agent-power-levels { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid #c9ddcf; border-radius: 10px; background: #eff5ec; }
.agent-power-levels button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; border: 1px solid transparent; border-radius: 7px; background: transparent; padding: 9px 12px; font-size: 12px; color: #667f6b; transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.agent-power-levels svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.agent-power-levels button[aria-pressed=true] { background: #fff; border-color: #b8d3c1; color: #196744; box-shadow: 0 2px 5px #1d573b0a; }
.agent-power-footnote { display: flex; justify-content: space-between; gap: 14px; margin: 12px 4px 0; font-size: 10px; color: #7c8f7f; }
.agent-power-footnote button { border: 0; padding: 0; border-bottom: 1px solid #b4cbbb; font-size: 10px; background: none; color: #527e5e; }
.agent-visual-note { margin-top: 25px; text-align: center; font-size: 10px; line-height: 1.6; color: #8b988d; }
.agent-visual[data-power=Ultra] { --agent-charge: 1; }
.agent-visual[data-power=Ultra] .agent-power-dock { border-color: #82c6a2; box-shadow: 0 14px 50px -35px #1d9f6452; background: linear-gradient(100deg, #e5f5e8, #ffffffc9 65%, #e5f5e8); }
.agent-visual[data-power=Ultra] .agent-memory { border-color: #96ccb0; box-shadow: 0 13px 34px -20px #05835255; }
.agent-visual[data-power=Ultra] .agent-chip-cells i.is-active { box-shadow: 0 0 10px #32c28f44; }
.agent-visual[data-power=Ultra] .agent-context-core { box-shadow: 0 15px 50px -20px #0d9c5f35, inset 0 0 24px #f9fff9; }
.agent-context-core { transition: box-shadow 1s ease; }
.agent-visual[data-agent-motion] .agent-visual-heading { opacity: var(--agent-enter); transform: translateY(calc((1 - var(--agent-enter)) * 25px)); }
.agent-visual[data-agent-motion] .agent-context-core { opacity: var(--agent-enter); translate: 0 calc((1 - var(--agent-enter)) * 24px); }
.agent-visual[data-agent-motion] .agent-context-orbits { opacity: var(--agent-enter); transform: scale(calc(.88 + var(--agent-progress) * .12)); }
.agent-visual[data-agent-motion] .agent-memory-chat { opacity: var(--agent-enter); translate: calc((1 - var(--agent-progress)) * -35px) calc((1 - var(--agent-progress)) * 32px); }
.agent-visual[data-agent-motion] .agent-memory-file { opacity: var(--agent-enter); translate: calc((1 - var(--agent-progress)) * 36px) calc((1 - var(--agent-progress)) * 48px); }
.agent-visual[data-agent-motion] .agent-memory-tools { opacity: var(--agent-enter); translate: calc((1 - var(--agent-progress)) * 28px) calc((1 - var(--agent-progress)) * 52px); }
.agent-visual[data-agent-motion] .agent-chip-cells i { opacity: clamp(0, calc(var(--agent-progress) * 3 - var(--cell) * .016), 1); }
.agent-visual[data-agent-motion] .agent-chip { opacity: var(--agent-enter); transform: translateY(calc((1 - var(--agent-progress)) * 48px)) rotate(calc(-16deg + var(--agent-progress) * 7deg)); }
@media (max-width: 1050px) { .agent-visual-wrap { width: min(1320px, calc(100% - 56px)); } .agent-laboratory { gap: 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .agent-context { height: 490px; } .agent-context-core { width: 170px; height: 170px; } .agent-context-core strong { font-size: 66px; } .agent-memory { width: 122px; padding: 10px; } .agent-memory-chat { left: 0; top: 33px; } .agent-memory-file { top: 32px; } .agent-memory-tools { right: 0; } .agent-context-seal { left: 8%; } .agent-engine { padding-left: 18px; } .agent-chip-cells { gap: 4px; padding: 14px; } .agent-power-dock { padding-inline: 16px; } .agent-power-identity { gap: 10px; } .agent-power-identity h3 { font-size: 17px; } .agent-power-identity #armor-caption { max-width: 240px; } .agent-power-levels button { padding-inline: 9px; gap: 5px; } }
@media (max-width: 760px) { .agent-visual { padding: 74px 0 37px; } .agent-visual-wrap { width: calc(100% - 36px); } .agent-visual-heading { margin-bottom: 25px; } .agent-visual-heading h2 { font-size: clamp(38px, 7.2vw, 56px); } .agent-laboratory { grid-template-columns: 1fr; gap: 48px; } .agent-context { height: 470px; max-width: 580px; width: 100%; margin: auto; } .agent-context-core { width: 170px; height: 170px; } .agent-memory-chat { left: 0; top: 28px; } .agent-memory-file { right: 0; top: 35px; } .agent-memory-tools { bottom: 85px; } .agent-context-seal { bottom: 113px; } .agent-engine { padding: 0; border-left: 0; } .agent-chip { width: 300px; max-width: 85%; } .agent-engine-value strong { font-size: 65px; } .agent-power-dock { flex-direction: column; align-items: stretch; gap: 23px; padding: 23px 8px; margin-top: 46px; } .agent-power-identity { justify-content: center; gap: 18px; } .agent-power-identity #armor-caption { max-width: 270px; } .agent-power-options { align-self: center; } .agent-power-levels button { min-height: 44px; padding-inline: 13px; } .agent-power-footnote { margin-top: 14px; } }
@media (max-width: 390px) { .agent-context { height: 440px; } .agent-memory { width: 105px; padding: 10px; } .agent-memory > div:first-child { gap: 4px; font-size: 10px; } .agent-memory svg { width: 14px; } .agent-context-core { width: 150px; height: 150px; } .agent-context-core strong { font-size: 60px; } .agent-context-core > span { font-size: 10px; } .agent-context-core strong small { left: -18px; font-size: 9px; bottom: 10px; } .agent-context figcaption { font-size: 12px; } .agent-context-seal { left: 5%; bottom: 114px; } .agent-power-identity { gap: 12px; } .agent-power-mascot, .agent-power-mascot #showcase-mascot { width: 70px; } .agent-power-kicker { font-size: 9px; } .agent-power-identity h3 { font-size: 16px; } .agent-power-identity h3 > span { display: inline-block; margin: 5px 0 0; } .agent-power-levels button { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .agent-visual { --agent-enter: 1; --agent-progress: 1; } .agent-visual *, .agent-visual *::before, .agent-visual *::after { transition: none !important; } }