:root {
--ag-paper: #f7f6f9;
--ag-ink: #19151f;
--ag-lav: #b99bff;
--ag-wait: #b99bff;
--ag-human: #f7f6f9;
}.ag-glyph {
--g-a: var(--accent);
--g-core: var(--accent);
--g-tick: var(--fg-3);
display: block;
width: 100%;
height: auto;
overflow: visible;
}.ag-glyph__halo {
fill: var(--panel);
stroke: var(--line);
stroke-width: 1;
}.ag-glyph__ticks {
fill: none;
stroke: var(--g-tick);
stroke-width: 5;
}.ag-glyph__arc {
fill: none;
stroke: var(--g-a);
stroke-width: 2.4;
transition: stroke 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}.ag-glyph__track {
fill: none;
stroke: var(--line-2);
stroke-width: 1;
}.ag-glyph__sat {
fill: var(--fg);
}.ag-glyph__ring {
fill: none;
stroke: var(--g-a);
stroke-width: 1.2;
opacity: 0.55;
transition: stroke 0.6s var(--ease-out), stroke-dasharray 0.6s var(--ease-out);
}.ag-glyph__core {
fill: var(--g-core);
transition: fill 0.6s var(--ease-out);
}.ag-glyph[data-state="idle"] {
--g-a: var(--fg-3);
--g-core: var(--fg-3);
}.ag-glyph[data-state="idle"] .ag-glyph__arc {
opacity: 0.6;
}.ag-glyph[data-state="waiting"] {
--g-a: var(--ag-wait);
--g-core: var(--ag-human);
}.ag-glyph[data-state="waiting"] .ag-glyph__ring {
stroke-dasharray: 300 60;
opacity: 1;
}.ag-glyph[data-state="done"] .ag-glyph__arc {
opacity: 0.4;
}.ag-glyph[data-state="done"] .ag-glyph__ring {
opacity: 1;
stroke-width: 2;
}.inner--custom-ai-agents [hidden] {
display: none !important;
}.ag-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}@keyframes agPulse {
0% { box-shadow: 0 0 0 0 rgba(185, 155, 255, 0.55); }
100% { box-shadow: 0 0 0 10px rgba(185, 155, 255, 0); }
}@keyframes agBlink {
50% { opacity: 0.25; }
}.ag-hero {
padding-bottom: clamp(28px, 3vw, 44px);
}.ag-hero > .container {
gap: clamp(28px, 3.4vw, 48px);
}.ag-hero__glow {
position: absolute;
left: 50%;
bottom: -30%;
width: min(1500px, 140vw);
height: 80%;
translate: -50% 0;
background: radial-gradient(closest-side, rgba(103, 33, 223, 0.38), transparent 75%);
pointer-events: none;
}.ag-hero__head {
display: grid;
align-content: end;
gap: clamp(16px, 1.8vw, 24px);
}.ag-hero__title .accent {
color: var(--dc-lime);
}.ag-hero__lead {
max-width: 40em;
}@media (min-width: 1280px) {
.ag-hero__head {
position: relative;
}.ag-hero__lead {
position: absolute;
right: 0;
bottom: 0.1em;
width: min(38em, 52%);
font-size: clamp(1rem, 0.85rem + 0.3vw, 1.2rem);
}
}@media (max-width: 767px) {
.ag-hero__title {
font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / 7.4));
}
}.ag-floor {
--px: 50%;
--py: 50%;
position: relative;
border-top: 1px solid var(--line-2);
}.ag-floor__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 22px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}.ag-floor__live {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
}.ag-floor__wait {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ag-paper);
}.ag-floor__wait::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ag-paper);
animation: agPulse 1.8s var(--ease-out) infinite;
}.ag-floor__end {
display: inline-flex;
align-items: center;
gap: 14px;
margin-left: auto;
}.ag-floor__you {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--fg-2);
}.ag-floor__you i {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ag-paper);
box-shadow: inset 0 0 0 4px var(--ag-ink);
}.ag-floor__bays {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}.ag-floor__bays::before,
.ag-floor__bays::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background: radial-gradient(circle at 0 50%, var(--dc-lime) 0 2px, transparent 2.5px) 0 0 / 40px 1px no-repeat;
box-shadow: none;
animation: agBus 7s var(--ease-in-out) infinite;
animation-play-state: paused;
pointer-events: none;
}.ag-floor__bays::after {
animation-duration: 11s;
animation-delay: -4s;
opacity: 0.6;
}.ag-floor.is-live .ag-floor__bays::before,
.ag-floor.is-live .ag-floor__bays::after {
animation-play-state: running;
}@keyframes agBus {
0% { transform: translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}.ag-bay {
position: relative;
min-width: 0;
}.ag-bay + .ag-bay {
border-left: 1px solid var(--line);
}.ag-bay__link {
position: relative;
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: start;
gap: 16px;
height: 100%;
padding: 20px clamp(12px, 1.4vw, 22px) 18px;
transition: background-color 0.5s var(--ease-out);
}.ag-bay:first-child .ag-bay__link {
padding-left: 0;
}.ag-bay__link::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-expo);
}.ag-bay__glyph {
display: block;
transition: transform 0.7s var(--ease-expo);
}.ag-bay__text {
display: grid;
gap: 4px;
min-width: 0;
}.ag-bay__code {
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-bay__role {
font-family: var(--font-heading);
font-size: clamp(1rem, 0.7rem + 0.6vw, 1.3rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ag-bay__state {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-2);
}.ag-bay__state i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fg-3);
}.ag-bay[data-state="working"] .ag-bay__state i {
background: var(--dc-lime);
animation: agBlink 1.2s steps(2) infinite;
}.ag-bay[data-state="waiting"] .ag-bay__state {
color: var(--ag-paper);
}.ag-bay[data-state="waiting"] .ag-bay__state i {
background: var(--ag-paper);
animation: agPulse 1.8s var(--ease-out) infinite;
}.ag-bay[data-state="done"] .ag-bay__state i {
background: var(--dc-lime);
}.ag-bay[data-state="idle"] .ag-bay__state i {
background: transparent;
box-shadow: inset 0 0 0 1px var(--fg-3);
}.ag-bay__task {
font-size: 0.875rem;
line-height: 1.4;
color: var(--fg-3);
}.ag-bay__ask {
position: absolute;
top: 16px;
right: 12px;
padding: 4px 8px;
border-radius: var(--radius-pill);
background: var(--ag-paper);
color: var(--ag-ink);
font-size: 0.625rem;
letter-spacing: 0.14em;
}@media (hover: hover) {
.ag-bay__link:hover {
background-color: var(--panel);
}.ag-bay__link:hover::before {
transform: scaleX(1);
}.ag-bay__link:hover .ag-bay__glyph {
transform: scale(1.06);
}
}.ag-bay__link:focus-visible::before {
transform: scaleX(1);
}.ag-floor::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px circle at var(--px) var(--py), rgba(197, 244, 61, 0.06), transparent 70%);
opacity: 0;
transition: opacity 0.6s var(--ease-out);
pointer-events: none;
}.ag-floor.is-lit::after {
opacity: 1;
}.is-motion .ag-bay {
opacity: 0;
}@media (min-width: 1024px) and (max-width: 1279px) {
.ag-bay__link {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}.ag-bay__glyph {
width: 60px;
}
}@media (max-width: 1023px) {
.ag-floor__bays {
grid-template-columns: minmax(0, 1fr);
}.ag-bay + .ag-bay {
border-left: 0;
border-top: 1px solid var(--line);
}.ag-bay__link,
.ag-bay:first-child .ag-bay__link {
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
padding: 14px 0;
}.ag-bay__text {
grid-template-columns: auto minmax(0, 1fr);
column-gap: 12px;
row-gap: 2px;
align-items: baseline;
}.ag-bay__state,
.ag-bay__task {
grid-column: 1 / -1;
}.ag-bay__state {
margin-top: 2px;
}.ag-bay__ask {
top: 50%;
right: 0;
transform: translateY(-50%);
}.ag-floor__bays::before,
.ag-floor__bays::after {
display: none;
}
}@media (max-width: 599px) {
.ag-floor__hide-s {
display: none;
}.ag-floor__end {
margin-left: 0;
width: 100%;
justify-content: space-between;
}.ag-bay__task {
font-size: 0.8125rem;
}
}.ag-run {
padding-block: var(--chapter-pad) clamp(56px, 7vw, 120px);
}.ag-run__head {
margin-bottom: clamp(36px, 4.5vw, 72px);
}.ag-console {
--radius-c: 16px;
position: relative;
border: 1px solid var(--line-2);
border-radius: var(--radius-c);
background:
linear-gradient(180deg, rgba(38, 23, 53, 0.72), rgba(20, 13, 29, 0.96) 42%),
var(--dc-purple-black);
box-shadow: 0 90px 160px -90px rgba(103, 33, 223, 0.7);
overflow: clip;
color: var(--fg);
}.ag-console::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
background-size: 22px 22px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
mask-image: linear-gradient(180deg, #000, transparent 70%);
pointer-events: none;
}.ag-console__bar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding: 14px clamp(16px, 2vw, 24px) 16px;
border-bottom: 1px solid var(--line);
}.ag-console__agent {
display: inline-flex;
align-items: center;
gap: 14px;
min-width: 0;
}.ag-console__glyph {
width: 42px;
flex-shrink: 0;
}.ag-console__who {
display: grid;
gap: 3px;
min-width: 0;
}.ag-console__who b {
font-size: 0.6875rem;
color: var(--dc-lime);
}.ag-console__who span {
font-size: 0.9375rem;
font-weight: 600;
color: var(--fg);
}.ag-console__meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-console__clock {
color: var(--dc-lime);
font-variant-numeric: tabular-nums;
}.ag-console__seg {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
gap: 2px;
}.ag-console__seg i::after {
background: var(--dc-lime);
transition: transform 0.25s linear;
}.ag-console__main {
position: relative;
display: grid;
}.ag-phases {
position: relative;
display: grid;
}.ag-phase {
position: relative;
display: grid;
gap: 18px;
padding: 26px clamp(16px, 2.4vw, 32px) 30px clamp(44px, 5vw, 64px);
border-bottom: 1px solid var(--line);
}.ag-phase::before {
content: "";
position: absolute;
left: clamp(22px, 2.5vw, 32px);
top: 0;
bottom: 0;
width: 1px;
background: var(--line-2);
}.ag-phase::after {
content: "";
position: absolute;
left: clamp(22px, 2.5vw, 32px);
top: 0;
bottom: 0;
width: 1px;
background: var(--dc-lime);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.9s var(--ease-expo);
}.ag-phase.is-done::after,
.ag-phase.is-on::after {
transform: none;
}.ag-phase__head {
position: relative;
display: grid;
gap: 6px;
align-content: start;
}.ag-phase__num {
position: absolute;
left: calc(-1 * clamp(44px, 5vw, 64px) + clamp(22px, 2.5vw, 32px) - 14px);
top: -3px;
display: grid;
place-items: center;
width: 29px;
height: 29px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--dc-purple-black);
font-size: 0.625rem;
letter-spacing: 0.04em;
color: var(--fg-3);
transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}.ag-phase.is-done .ag-phase__num,
.ag-phase.is-on .ag-phase__num {
border-color: var(--dc-lime);
color: var(--dc-lime);
}.ag-phase.is-on .ag-phase__num {
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ag-phase--approve.is-on .ag-phase__num {
background: var(--ag-paper);
border-color: var(--ag-paper);
}.ag-phase__name {
font-family: var(--font-heading);
font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ag-phase__line {
max-width: 30em;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--fg-2);
}.ag-phase__view {
min-width: 0;
}@media (min-width: 768px) {
.ag-phase {
grid-template-columns: minmax(180px, 1fr) minmax(0, 2.3fr);
column-gap: clamp(24px, 3vw, 48px);
}
}.ag-run--live:not(.ag-run--pin) .ag-phase {
transition: opacity 0.6s var(--ease-out);
}.ag-run--live:not(.ag-run--pin) .ag-phase:not(.is-on):not(.is-done) {
opacity: 0.56;
}.ag-view__title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
font-size: 0.6875rem;
color: var(--dc-lime);
}.ag-scan {
position: relative;
width: 44px;
height: 2px;
background: var(--line-2);
overflow: hidden;
}.ag-scan::after {
content: "";
position: absolute;
inset: 0;
width: 40%;
background: var(--dc-lime);
animation: agScan 1.4s var(--ease-in-out) infinite alternate;
}@keyframes agScan {
to { transform: translateX(150%); }
}.ag-src {
display: grid;
}.ag-src__row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
grid-template-areas: "n who res" "n path res";
align-items: baseline;
column-gap: 12px;
padding: 11px 0;
border-bottom: 1px dashed var(--line);
}.ag-src__n {
grid-area: n;
font-size: 0.625rem;
color: var(--fg-3);
}.ag-src__who {
grid-area: who;
font-weight: 600;
color: var(--fg);
}.ag-src__path {
grid-area: path;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: none;
color: var(--fg-3);
}.ag-src__res {
grid-area: res;
align-self: center;
font-size: 0.625rem;
color: var(--fg-3);
}.ag-src__row.is-changed .ag-src__res {
padding: 4px 8px;
border-radius: var(--radius-sm);
background: var(--dc-lime);
color: var(--dc-purple-black);
}@media (min-width: 600px) {
.ag-src__row {
grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto;
grid-template-areas: "n who path res";
}
}.ag-plan {
display: grid;
gap: 8px;
margin-bottom: 18px;
}.ag-plan li {
position: relative;
padding-left: 18px;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--fg-2);
}.ag-plan li::before {
content: "";
position: absolute;
left: 2px;
top: 0.62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ag-lav);
}.ag-diff {
display: grid;
gap: 10px;
}.ag-diff__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 16px;
align-items: center;
padding: 14px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background: var(--panel);
}.ag-diff__row.is-hot {
border-color: var(--dc-lime);
box-shadow: 0 16px 40px -24px rgba(197, 244, 61, 0.5);
}.ag-diff__who {
grid-column: 1 / -1;
color: var(--fg-2);
}.ag-diff__who b {
color: var(--fg);
}.ag-diff__vals {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
font-size: 0.75rem;
letter-spacing: 0.08em;
}.ag-diff__vals del {
color: var(--fg-3);
text-decoration-color: var(--ag-lav);
}.ag-diff__vals ins {
text-decoration: none;
color: var(--fg);
}.ag-diff__vals ins::before {
content: "→ ";
color: var(--fg-3);
}.ag-diff__delta {
color: var(--dc-lime);
}.ag-diff__flag {
justify-self: end;
padding: 5px 9px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-size: 0.625rem;
color: var(--fg-2);
}.ag-diff__row.is-hot .ag-diff__flag {
border-color: var(--dc-lime);
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ag-crm {
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
}.ag-crm__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid var(--line);
font-size: 0.6875rem;
color: var(--fg-2);
}.ag-crm__saved {
margin-left: auto;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: rgba(197, 244, 61, 0.14);
color: var(--dc-lime);
font-size: 0.625rem;
}.ag-crm__fields > div {
display: grid;
grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr);
gap: 12px;
padding: 12px 14px;
border-bottom: 1px dashed var(--line);
}.ag-crm__fields > div:last-child {
border-bottom: 0;
}.ag-crm__fields dt {
font-size: 0.625rem;
color: var(--fg-3);
}.ag-crm__fields dd {
font-size: 0.9375rem;
color: var(--fg);
}.ag-crm__fields del {
margin-right: 6px;
color: var(--fg-3);
}.ag-crm__fields ins {
padding: 1px 4px;
margin-left: -4px;
border-radius: 3px;
text-decoration: none;
color: var(--dc-lime);
}.ag-also {
display: grid;
gap: 8px;
margin-top: 16px;
}.ag-also li,
.ag-checks li {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--fg-2);
}.ag-also .icon {
width: 16px;
height: 16px;
color: var(--dc-lime);
flex-shrink: 0;
}.ag-checks {
display: grid;
gap: 12px;
}.ag-checks li {
font-family: var(--font-body);
font-size: 1rem;
color: var(--fg);
}.ag-checks__box {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 6px;
border: 1px solid var(--dc-lime);
background: var(--dc-lime);
color: var(--dc-purple-black);
flex-shrink: 0;
}.ag-checks__box .icon {
width: 15px;
height: 15px;
stroke-width: 2.4;
}.ag-meter {
display: flex;
gap: 6px;
margin-top: 22px;
}.ag-meter i {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--dc-lime);
}.ag-draft {
position: relative;
padding: 18px 20px 20px;
border: 1px solid var(--line-2);
border-left: 3px solid var(--ag-paper);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.04);
}.ag-draft__head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
font-size: 0.625rem;
color: var(--fg-3);
}.ag-draft__text {
font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
line-height: 1.55;
color: var(--fg);
}.ag-draft__why {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 16px;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--fg-2);
}.ag-draft__hand {
width: 18px;
height: 18px;
margin-top: 2px;
border-radius: 50%;
background: var(--ag-paper);
box-shadow: inset 0 0 0 5px var(--ag-ink), 0 0 0 1px var(--ag-paper);
flex-shrink: 0;
}.ag-log {
position: relative;
padding: 20px clamp(16px, 2.4vw, 28px) 24px;
border-bottom: 1px solid var(--line);
}.ag-log__bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}.ag-log__title {
font-size: 0.6875rem;
color: var(--fg-2);
}.ag-log__bar .illus {
margin-left: auto;
}.ag-log__list li {
grid-template-columns: 5.4em 1.2em minmax(0, 1fr);
transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-expo);
}.ag-log__list [data-ag-after] .ok,
.ag-log__list [data-ag-after] {
color: var(--fg);
}.ag-run--live .ag-log__line:not(.is-in):not([data-ag-after]) {
opacity: 0.22;
}.ag-run--pin .ag-log__line:not(.is-in):not([data-ag-after]) {
opacity: 0;
transform: translateY(6px);
}.ag-log__line.is-newest > span:last-child::after {
content: "";
display: inline-block;
width: 0.55em;
height: 1em;
margin-left: 4px;
vertical-align: -0.15em;
background: var(--dc-lime);
animation: agBlink 1s steps(1) infinite;
}.ag-log__list [data-ag-after]:not([hidden]) {
animation: agLineIn 0.6s var(--ease-expo) both;
}.ag-log__list [data-ag-after]:not([hidden]) + [data-ag-after] {
animation-delay: 0.35s;
}@keyframes agLineIn {
from { opacity: 0; transform: translateY(8px); }
}.ag-gate {
--bg: var(--ag-paper);
--fg: var(--ag-ink);
--fg-2: rgba(25, 21, 31, 0.8);
--fg-3: #696370;
--line: rgba(103, 33, 223, 0.14);
--line-2: rgba(103, 33, 223, 0.3);
--accent: var(--dc-purple);
position: sticky;
bottom: 10px;
z-index: 5;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px 24px;
align-items: center;
margin: 12px;
padding: 14px 16px;
border-radius: 12px;
background: var(--ag-paper);
color: var(--ag-ink);
box-shadow: 0 24px 60px -24px rgba(10, 6, 16, 0.9);
isolation: isolate;
}@property --ag-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}.ag-gate::before {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
border-radius: 14px;
background: conic-gradient(from var(--ag-a), transparent 0 70%, var(--dc-purple-bright) 82%, var(--dc-lime) 90%, transparent 100%);
opacity: 0;
transition: opacity 0.5s var(--ease-out);
}.ag-gate::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 12px;
background: var(--ag-paper);
}.ag-gate[data-state="awaiting"]::before {
opacity: 1;
animation: agTravel 3.2s linear infinite;
}@keyframes agTravel {
to { --ag-a: 360deg; }
}.ag-gate__who {
display: flex;
align-items: center;
gap: 12px;
}.ag-gate__avatar {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--ag-ink);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
flex-shrink: 0;
}.ag-gate[data-state="awaiting"] .ag-gate__avatar {
animation: agPulseP 1.8s var(--ease-out) infinite;
}@keyframes agPulseP {
0% { box-shadow: 0 0 0 0 rgba(103, 33, 223, 0.45); }
100% { box-shadow: 0 0 0 12px rgba(103, 33, 223, 0); }
}.ag-gate[data-state="approved"] .ag-gate__avatar {
border-color: var(--dc-purple);
background: var(--dc-purple);
color: #fff;
}.ag-gate__id {
display: grid;
gap: 2px;
}.ag-gate__id b {
font-size: 0.625rem;
color: var(--dc-purple);
}.ag-gate__id span {
font-size: 0.875rem;
font-weight: 600;
}.ag-gate__status {
font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}.ag-gate[data-state="standby"] .ag-gate__status {
font-weight: 500;
color: var(--fg-2);
}.ag-gate__actions {
display: none;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
}.ag-run.is-live .ag-gate__actions {
display: flex;
}.ag-run.is-live .ag-gate__nojs {
display: none;
}.ag-gate__nojs {
font-size: 0.875rem;
color: var(--fg-2);
}.ag-gate__btn {
--well-bg: var(--ag-ink);
}.ag-gate__btn:disabled,
.ag-gate__alt:disabled {
opacity: 0.38;
cursor: not-allowed;
box-shadow: none;
}.ag-gate__btn:disabled .btn__text,
.ag-gate__btn:disabled .btn__arrow {
transform: none !important;
}.ag-gate__btn:disabled .btn__text--clone,
.ag-gate__btn:disabled .btn__arrow--in {
visibility: hidden;
}.ag-gate__alt {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 4px;
font-weight: 700;
font-size: 0.9rem;
color: var(--ag-ink);
}.ag-gate__alt::after {
content: "";
position: absolute;
left: 4px;
right: 4px;
bottom: 9px;
height: 1px;
background: currentColor;
transform: scaleX(0.3);
transform-origin: left;
transition: transform 0.5s var(--ease-expo);
}.ag-gate__alt .icon {
width: 15px;
height: 15px;
}@media (hover: hover) {
.ag-gate__alt:not(:disabled):hover::after {
transform: scaleX(1);
}
}.ag-gate :focus-visible {
outline-color: var(--dc-purple);
}.ag-gate.is-resolved::after {
background:
linear-gradient(100deg, transparent 30%, rgba(197, 244, 61, 0.55) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat,
var(--ag-paper);
animation: agSweep 1.1s var(--ease-in-out) both;
}@keyframes agSweep {
to { background-position: 250% 0, 0 0; }
}@media (min-width: 768px) {
.ag-gate {
grid-template-columns: auto minmax(0, 1fr) auto;
margin: 16px;
padding: 14px 16px 14px 18px;
}
}@media (max-width: 767px) {
.ag-gate[data-state="standby"] .ag-gate__actions {
display: none;
}
.ag-gate__who .ag-gate__id span {
display: none;
}.ag-gate {
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 12px;
padding: 12px 14px;
}.ag-gate__who,
.ag-gate__id {
display: contents;
}.ag-gate__avatar {
grid-row: 1 / 3;
align-self: center;
}.ag-gate__id b {
grid-column: 2;
grid-row: 1;
align-self: end;
}.ag-gate__status {
grid-column: 2;
grid-row: 2;
font-size: 0.9375rem;
}.ag-gate__actions,
.ag-gate__nojs {
grid-column: 1 / -1;
grid-row: 3;
margin-top: 8px;
}.ag-diff__row {
grid-template-columns: minmax(0, 1fr);
}.ag-diff__flag {
justify-self: start;
}.ag-gate__avatar {
width: 40px;
height: 40px;
}.ag-console__hide-s {
display: none;
}
}@media (min-width: 1024px) {
.ag-run:not(.ag-run--pin) .ag-console__main {
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}.ag-run:not(.ag-run--pin) .ag-phases {
border-right: 1px solid var(--line);
}.ag-run:not(.ag-run--pin) .ag-log {
position: sticky;
top: calc(var(--header-h) + 12px);
align-self: start;
border-bottom: 0;
}
}.ag-run--pin .ag-run__pin {
display: flex;
align-items: center;
height: 100vh;
height: 100svh;
padding-top: calc(var(--header-h) + 8px);
padding-bottom: 20px;
}.ag-run--pin .ag-run__frame {
height: 100%;
max-height: 840px;
}.ag-run--pin .ag-console {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100%;
}.ag-run--pin .ag-console__main {
grid-template-columns: minmax(210px, 0.8fr) minmax(0, 2.2fr) minmax(270px, 1fr);
min-height: 0;
}.ag-stamp {
display: none;
}.ag-run--pin .ag-stamp {
display: flex;
align-items: flex-start;
gap: 10px;
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: start;
margin: 18px 26px 0 0;
pointer-events: none;
}.ag-stamp__n {
font-family: var(--font-heading);
font-size: clamp(4.5rem, 2rem + 4vw, 7.5rem);
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
}.ag-stamp__n.is-in {
animation: agStamp 0.9s var(--ease-expo) both;
}@keyframes agStamp {
from { clip-path: inset(0 0 100% 0); transform: translateY(20px); }
to { clip-path: inset(0 0 0 0); transform: none; }
}.ag-stamp__of {
margin-top: 6px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-run--pin .ag-phases {
grid-column: 1 / 3;
grid-row: 1;
grid-template-columns: minmax(210px, 0.8fr) minmax(0, 2.2fr);
grid-template-rows: repeat(5, auto) minmax(0, 1fr);
min-height: 0;
}.ag-run--pin .ag-phase {
display: contents;
}.ag-run--pin .ag-phase::before,
.ag-run--pin .ag-phase::after {
content: none;
}.ag-run--pin .ag-phase__head {
grid-column: 1;
position: relative;
padding: 16px 20px 16px 58px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background-color 0.5s var(--ease-out);
}.ag-run--pin .ag-phase:nth-child(1) .ag-phase__head { grid-row: 1; }
.ag-run--pin .ag-phase:nth-child(2) .ag-phase__head { grid-row: 2; }
.ag-run--pin .ag-phase:nth-child(3) .ag-phase__head { grid-row: 3; }
.ag-run--pin .ag-phase:nth-child(4) .ag-phase__head { grid-row: 4; }
.ag-run--pin .ag-phase:nth-child(5) .ag-phase__head { grid-row: 5; }.ag-run--pin .ag-phases::after {
content: "";
grid-column: 1;
grid-row: 6;
border-right: 1px solid var(--line);
}.ag-run--pin .ag-phase__head::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--dc-lime);
transform: scaleY(var(--hp, 0));
transform-origin: top;
}.ag-run--pin .ag-phase.is-done .ag-phase__head::before {
--hp: 1;
opacity: 0.35;
}.ag-run--pin .ag-phase.is-on .ag-phase__head {
background: rgba(255, 255, 255, 0.035);
}.ag-run--pin .ag-phase__num {
left: 18px;
top: 14px;
}.ag-run--pin .ag-phase__name {
font-size: clamp(1rem, 0.7rem + 0.5vw, 1.25rem);
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ag-run--pin .ag-phase.is-on .ag-phase__name,
.ag-run--pin .ag-phase.is-done .ag-phase__name {
color: var(--fg);
}.ag-run--pin .ag-phase__line {
font-size: 0.8125rem;
color: var(--fg-3);
}.ag-run--pin .ag-phase.is-on .ag-phase__line {
color: var(--fg-2);
}.ag-run--pin .ag-phase__view {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
width: 100%;
max-width: 680px;
justify-self: center;
padding: 24px clamp(24px, 3vw, 44px);
opacity: 0;
visibility: hidden;
transform: translateY(18px);
transition: opacity 0.45s var(--ease-out), transform 0.8s var(--ease-expo), visibility 0s linear 0.45s;
}.ag-run--pin .ag-phase.is-on .ag-phase__view {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.6s var(--ease-out) 0.1s, transform 0.9s var(--ease-expo) 0.1s, visibility 0s;
}.ag-run--pin .ag-phase .ag-src__row,
.ag-run--pin .ag-phase .ag-plan li,
.ag-run--pin .ag-phase .ag-diff__row,
.ag-run--pin .ag-phase .ag-crm__fields > div,
.ag-run--pin .ag-phase .ag-also li,
.ag-run--pin .ag-phase .ag-checks li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-expo);
}.ag-run--pin .ag-phase.is-on .ag-src__row,
.ag-run--pin .ag-phase.is-on .ag-plan li,
.ag-run--pin .ag-phase.is-on .ag-diff__row,
.ag-run--pin .ag-phase.is-on .ag-crm__fields > div,
.ag-run--pin .ag-phase.is-on .ag-also li,
.ag-run--pin .ag-phase.is-on .ag-checks li {
opacity: 1;
transform: none;
transition-delay: calc(0.2s + var(--i, 0) * 0.12s);
}.ag-run--pin .ag-phase.is-on .ag-crm__fields ins {
animation: agFlash 1.4s var(--ease-out) both;
animation-delay: calc(0.5s + var(--i, 0) * 0.12s);
}@keyframes agFlash {
0%, 20% { background: rgba(197, 244, 61, 0.28); }
100% { background: transparent; }
}.ag-run--pin .ag-phase .ag-meter i {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-expo);
}.ag-run--pin .ag-phase.is-on .ag-meter i {
transform: none;
}.ag-run--pin .ag-phase.is-on .ag-meter i:nth-child(1) { transition-delay: 0.35s; }
.ag-run--pin .ag-phase.is-on .ag-meter i:nth-child(2) { transition-delay: 0.5s; }
.ag-run--pin .ag-phase.is-on .ag-meter i:nth-child(3) { transition-delay: 0.65s; }.ag-run--pin .ag-log {
grid-column: 3;
grid-row: 1;
border-bottom: 0;
border-left: 1px solid var(--line);
overflow: hidden;
}.ag-run--pin .ag-gate {
position: relative;
bottom: auto;
margin: 0;
border-radius: 0;
box-shadow: none;
padding: 14px 20px 14px 22px;
}.ag-run--pin .ag-gate::before,
.ag-run--pin .ag-gate::after {
border-radius: 0;
}.ag-run--pin .ag-gate::before {
inset: -2px 0 0;
}@media (max-height: 820px) {
.ag-run--pin .ag-phase:not(.is-on) .ag-phase__line {
display: none;
}.ag-run--pin .ag-phase__head {
padding-block: 12px;
}.ag-run--pin .ag-phase__num {
top: 10px;
}.ag-run--pin .ag-log {
padding-block: 14px 10px;
}.ag-run--pin .ag-log__list {
font-size: 0.75rem;
}.ag-run--pin .ag-log__list li {
padding: 5px 0;
}
}.ag-roster__grid {
display: grid;
gap: clamp(28px, 4vw, 64px);
}.ag-roster__side {
display: none;
}.ag-roster__grid.is-live .ag-roster__side {
display: block;
}.ag-roster__hint {
margin-bottom: 18px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-roster__tabs {
--ag-wait: var(--dc-purple-bright);
--ag-human: var(--fg);
display: grid;
border-top: 1px solid var(--line-2);
}.ag-tab {
position: relative;
display: grid;
grid-template-columns: 46px auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 72px;
padding: 12px 14px 12px 12px;
border-bottom: 1px solid var(--line-2);
text-align: left;
color: var(--fg-2);
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}.ag-tab::before {
content: "";
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.6s var(--ease-expo);
}.ag-tab__glyph {
width: 46px;
}.ag-tab__code {
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-tab__name {
font-family: var(--font-heading);
font-size: clamp(1rem, 0.8rem + 0.5vw, 1.35rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ag-tab__arrow {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg-3);
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.6s var(--ease-expo);
}.ag-tab__arrow .icon {
width: 14px;
height: 14px;
}.ag-tab[aria-selected="true"] {
background: var(--panel);
}.ag-tab[aria-selected="true"]::before {
transform: none;
}.ag-tab[aria-selected="true"] .ag-tab__arrow {
border-color: var(--accent);
background: var(--accent);
color: var(--bg);
}@media (hover: hover) {
.ag-tab:hover .ag-tab__arrow {
transform: translateX(4px);
border-color: var(--accent);
color: var(--accent);
}.ag-tab[aria-selected="true"]:hover .ag-tab__arrow {
color: var(--bg);
}
}.ag-deck {
display: grid;
gap: 24px;
min-width: 0;
}.ag-card {
--bg: #140d1d;
--fg: #ffffff;
--fg-2: rgba(255, 255, 255, 0.78);
--fg-3: rgba(255, 255, 255, 0.55);
--line: rgba(255, 255, 255, 0.1);
--line-2: rgba(255, 255, 255, 0.25);
--accent: #c5f43d;
--panel: rgba(255, 255, 255, 0.03);
--ag-wait: #b99bff;
--ag-human: #f7f6f9;
position: relative;
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
background:
radial-gradient(ellipse 60% 50% at 100% 0%, rgba(103, 33, 223, 0.35), transparent 70%),
linear-gradient(180deg, #221530, #140d1d 55%);
color: var(--fg);
box-shadow: 0 50px 90px -50px rgba(38, 23, 53, 0.75);
scroll-margin-top: calc(var(--header-h) + 90px);
}.ag-card:focus-visible {
outline-color: var(--dc-purple);
}.ag-card__bar {
display: flex;
align-items: center;
gap: 12px;
min-height: 42px;
padding: 0 16px;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-3);
white-space: nowrap;
}.ag-card__bar .ui__dots i {
background: var(--line-2);
}.ag-card__file {
overflow: hidden;
text-overflow: ellipsis;
text-transform: none;
letter-spacing: 0.04em;
color: var(--fg-2);
}.ag-card__state {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: var(--dc-lime);
}.ag-card__state i {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}.ag-card__state[data-state="waiting"] {
color: var(--ag-paper);
}.ag-card__state[data-state="idle"] {
color: var(--fg-3);
}.ag-card__body {
position: relative;
display: grid;
gap: clamp(20px, 2.4vw, 30px);
padding: clamp(18px, 2.6vw, 34px);
}.ag-card__id {
display: grid;
grid-template-columns: clamp(76px, 9vw, 128px) minmax(0, 1fr);
gap: clamp(16px, 2.4vw, 32px);
align-items: center;
}.ag-card__code {
font-size: 0.6875rem;
color: var(--dc-lime);
}.ag-card__name {
margin-top: 6px;
font-family: var(--font-heading);
font-size: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
line-height: 0.95;
text-transform: uppercase;
}.ag-card__does {
margin-top: 10px;
max-width: 34em;
color: var(--fg-2);
line-height: 1.55;
}.ag-card__spec {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line);
}.ag-card__spec > div {
display: grid;
gap: 4px;
padding: 12px 14px 12px 0;
border-bottom: 1px solid var(--line);
}.ag-card__spec > div:nth-child(even) {
padding-left: 14px;
border-left: 1px solid var(--line);
}.ag-card__spec dt {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.ag-card__spec dd {
font-size: 0.9375rem;
line-height: 1.4;
color: var(--fg);
}.ag-card__perm {
display: grid;
gap: 14px;
}.ag-perm {
padding: 16px 18px 18px;
border-radius: var(--radius-md);
}.ag-perm--can {
border: 1px solid rgba(197, 244, 61, 0.35);
background: rgba(197, 244, 61, 0.05);
}.ag-perm--ask {
background: var(--ag-paper);
color: var(--ag-ink);
}.ag-perm__title {
margin-bottom: 12px;
font-size: 0.625rem;
color: var(--dc-lime);
}.ag-perm--ask .ag-perm__title {
color: var(--dc-purple);
}.ag-perm ul {
display: grid;
gap: 8px;
}.ag-perm li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9375rem;
line-height: 1.4;
}.ag-perm .icon {
width: 16px;
height: 16px;
margin-top: 2px;
color: var(--dc-lime);
flex-shrink: 0;
}.ag-perm__you {
width: 14px;
height: 14px;
margin-top: 3px;
border-radius: 50%;
border: 1.5px solid var(--ag-ink);
flex-shrink: 0;
}.ag-card__tag {
justify-self: start;
}@media (min-width: 768px) {
.ag-card__perm {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ag-card__spec {
grid-template-columns: repeat(4, minmax(0, 1fr));
}.ag-card__spec > div {
padding-left: 14px;
border-left: 1px solid var(--line);
}.ag-card__spec > div:first-child {
padding-left: 0;
border-left: 0;
}
}@media (min-width: 1024px) {
.ag-roster__grid.is-live {
grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
align-items: start;
}.ag-roster__side {
position: sticky;
top: calc(var(--header-h) + 40px);
padding-top: 88px;
}.ag-card__spec {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ag-card__spec > div:nth-child(3) {
padding-left: 0;
border-left: 0;
}
}@media (min-width: 1280px) {
.ag-card__spec {
grid-template-columns: repeat(4, minmax(0, 1fr));
}.ag-card__spec > div:nth-child(3) {
padding-left: 14px;
border-left: 1px solid var(--line);
}
}.ag-deck--live {
gap: 0;
}@media (min-width: 1024px) {
.ag-deck--live {
padding-top: 88px;
perspective: 1600px;
}.ag-deck--live .ag-card {
grid-area: 1 / 1;
z-index: calc(10 - var(--pos, 0));
transform: translate3d(calc(var(--pos, 0) * 16px), calc(var(--pos, 0) * -22px), calc(var(--pos, 0) * -60px));
transition: transform 0.9s var(--ease-expo), opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}.ag-deck--live .ag-card:not(.is-front) {
opacity: calc(1 - var(--pos, 0) * 0.16);
filter: brightness(calc(1 - var(--pos, 0) * 0.12));
cursor: pointer;
}.ag-deck--live .ag-card:not(.is-front) .ag-card__body {
visibility: hidden;
}
}@media (max-width: 1023px) {
.ag-roster__tabs {
grid-template-columns: repeat(5, minmax(0, 1fr));
border-top: 0;
gap: 6px;
}.ag-tab {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 6px;
min-height: 88px;
padding: 10px 4px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
text-align: center;
}.ag-tab::before {
left: 10px;
right: 10px;
top: auto;
bottom: -1px;
width: auto;
height: 3px;
transform: scaleX(0);
}.ag-tab[aria-selected="true"] {
border-color: var(--accent);
}.ag-tab[aria-selected="true"]::before {
transform: none;
}.ag-tab__glyph {
width: 38px;
}.ag-tab__name,
.ag-tab__arrow {
display: none;
}.ag-tab__code {
font-size: 0.5625rem;
letter-spacing: 0.06em;
}.ag-deck--live .ag-card:not(.is-front) {
display: none;
}.ag-roster__hint {
margin-bottom: 12px;
}
}.ag-guard__grid {
display: grid;
gap: clamp(28px, 4vw, 72px);
align-items: center;
}.ag-bound {
position: relative;
width: min(100%, 560px);
margin-inline: auto;
aspect-ratio: 1;
}.ag-bound__svg {
width: 100%;
height: 100%;
overflow: visible;
}.ag-bound__hatchline {
stroke: rgba(255, 255, 255, 0.38);
stroke-width: 1.4;
}.ag-bound__block {
fill: url(#ag-hatch);
}.ag-bound__edge {
fill: var(--bg);
}.ag-bound__ask {
fill: rgba(20, 13, 29, 0.16);
}.ag-bound__askline {
fill: none;
stroke: rgba(255, 255, 255, 0.7);
stroke-width: 1.2;
stroke-dasharray: 4 6;
}.ag-bound__alone {
fill: rgba(197, 244, 61, 0.1);
stroke: var(--dc-lime);
stroke-width: 1.4;
transition: fill 0.5s var(--ease-out), stroke-width 0.5s var(--ease-out);
}.ag-bound__lbl {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
fill: rgba(255, 255, 255, 0.84);
}.ag-bound__lbl--alone {
fill: var(--dc-lime);
}.ag-bound__trace {
stroke: var(--dc-lime);
stroke-width: 1.4;
transition: stroke 0.4s var(--ease-out);
}.ag-bound__halo {
fill: rgba(197, 244, 61, 0.18);
transition: fill 0.4s var(--ease-out);
}.ag-bound__dot {
fill: var(--dc-lime);
stroke: var(--dc-purple-black);
stroke-width: 1.5;
transition: fill 0.4s var(--ease-out);
}.ag-bound__x {
stroke: var(--dc-purple-black);
stroke-width: 2;
opacity: 0;
}.ag-bound[data-zone="alone"] .ag-bound__alone {
fill: rgba(197, 244, 61, 0.2);
stroke-width: 2.2;
}.ag-bound[data-zone="ask"] .ag-bound__trace {
stroke: var(--ag-paper);
}.ag-bound[data-zone="ask"] .ag-bound__dot {
fill: var(--ag-paper);
}.ag-bound[data-zone="ask"] .ag-bound__halo {
fill: rgba(247, 246, 249, 0.25);
animation: agHalo 1.6s var(--ease-out) infinite;
transform-box: fill-box;
transform-origin: center;
}@keyframes agHalo {
from { transform: scale(0.6); opacity: 1; }
to { transform: scale(1.8); opacity: 0; }
}.ag-bound[data-zone="block"] .ag-bound__trace {
stroke: rgba(255, 255, 255, 0.7);
stroke-dasharray: 3 5;
}.ag-bound[data-zone="block"] .ag-bound__dot {
fill: #fff;
}.ag-bound[data-zone="block"] .ag-bound__halo {
fill: rgba(20, 13, 29, 0.3);
}.ag-bound[data-zone="block"] .ag-bound__x {
opacity: 1;
}.ag-bound__core {
position: absolute;
left: 50%;
top: 50%;
width: 21%;
translate: -50% -50%;
--panel: rgba(20, 13, 29, 0.45);
}.ag-tester__title {
margin-bottom: 16px;
font-size: 0.6875rem;
color: var(--fg-2);
}.ag-tester__list {
display: grid;
gap: 8px;
}.ag-act {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2px 14px;
width: 100%;
min-height: 60px;
padding: 10px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
text-align: left;
color: var(--fg);
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}.ag-act__label {
font-weight: 700;
line-height: 1.3;
}.ag-act__cmd {
grid-row: 2;
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--fg-3);
}.ag-act__zone {
grid-column: 2;
grid-row: 1 / 3;
padding: 5px 9px;
border-radius: var(--radius-sm);
font-size: 0.625rem;
letter-spacing: 0.12em;
white-space: nowrap;
transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-expo);
}.ag-act__zone--alone {
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ag-act__zone--ask {
background: var(--ag-paper);
color: var(--ag-ink);
}.ag-act__zone--block {
border: 1px dashed rgba(255, 255, 255, 0.7);
color: #fff;
}.ag-guard__grid.is-live .ag-act:not(.is-tested) .ag-act__zone {
opacity: 0;
transform: translateX(-6px);
}.ag-guard__grid:not(.is-live) .ag-act {
cursor: default;
}.ag-act[aria-pressed="true"] {
border-color: var(--dc-lime);
background: rgba(20, 13, 29, 0.22);
box-shadow: inset 3px 0 0 var(--dc-lime);
}@media (hover: hover) {
.ag-guard__grid.is-live .ag-act:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(20, 13, 29, 0.14);
}
}.ag-verdict {
margin-top: 16px;
padding: 18px 20px;
border-radius: var(--radius-md);
background: rgba(20, 13, 29, 0.32);
border: 1px solid var(--line);
}.ag-verdict__zone {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-heading);
font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
line-height: 1;
text-transform: uppercase;
}.ag-verdict__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--ag-paper);
flex-shrink: 0;
}.ag-verdict[data-zone="alone"] .ag-verdict__dot {
background: var(--dc-lime);
}.ag-verdict[data-zone="block"] .ag-verdict__dot {
background: transparent;
border: 1.5px dashed #fff;
}.ag-verdict__why {
margin-top: 10px;
color: var(--fg-2);
}.ag-verdict__log {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--line-2);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--fg-2);
}.ag-verdict__log time {
color: var(--dc-lime);
}.ag-verdict.is-new {
animation: agVerdict 0.7s var(--ease-expo);
}@keyframes agVerdict {
from { opacity: 0.4; transform: translateY(6px); }
}.ag-principles {
display: grid;
gap: 0 clamp(20px, 3vw, 48px);
margin-top: clamp(56px, 7vw, 112px);
}.ag-principle {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 6px 16px;
padding: 22px 0 26px;
border-top: 1px solid var(--line-2);
}.ag-principle__n {
grid-row: 1 / 3;
font-size: 0.6875rem;
color: var(--accent);
}.ag-principle__name {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
line-height: 1.05;
text-transform: uppercase;
}.ag-principle__copy {
color: var(--fg-2);
line-height: 1.55;
}@media (min-width: 700px) {
.ag-principles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}@media (min-width: 1024px) {
.ag-guard__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}.ag-principles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}.ag-principle {
grid-template-columns: minmax(0, 1fr);
}.ag-principle__n {
grid-row: auto;
margin-bottom: 18px;
}
}@media (max-width: 599px) {
.ag-bound {
width: min(100%, 330px);
}.ag-tester__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ag-act {
grid-template-columns: minmax(0, 1fr);
align-content: start;
min-height: 88px;
padding: 10px 12px;
}.ag-act__label {
font-size: 0.875rem;
}.ag-act__cmd {
grid-row: auto;
}.ag-act__zone {
grid-column: 1;
grid-row: auto;
justify-self: start;
margin-top: 6px;
}
}.ag-deploy__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(40px, 5vw, 80px);
}.ag-deploy__head {
margin-bottom: 0;
}@media (min-width: 1024px) {
.ag-deploy__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: stretch;
}.ag-deploy__head {
grid-template-columns: minmax(0, 1fr);
}.ag-deploy__head > .t-lead {
grid-column: 1;
}.ag-deploy__head > .t-h2 {
font-size: min(var(--fs-h2), 4vw, 5rem);
}.ag-deploy__sticky {
position: sticky;
top: calc(var(--header-h) + 32px);
display: grid;
gap: 40px;
}
}.ag-seg__cell {
position: relative;
display: block;
height: 14px;
border-radius: 4px;
background: var(--ag-paper);
transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
transition-delay: calc(var(--i, 0) * 60ms);
}.ag-seg__cell i {
position: absolute;
inset: 3px;
border-radius: 2px;
border: 1px dashed transparent;
transition: border-color 0.6s var(--ease-out);
}[data-who="a"] > .ag-seg__cell,
.ag-seg__cell[data-who="a"] {
background: var(--dc-lime);
}[data-who="s"] > .ag-seg__cell i,
.ag-seg__cell[data-who="s"] i {
border-color: #6b8f00;
}[data-who="H"] > .ag-seg__cell,
.ag-seg__cell[data-who="H"] {
box-shadow: inset 0 0 0 3px var(--dc-purple-bright);
}.ag-board__steps .ag-seg__cell::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
border: 1.5px solid var(--ag-ink);
transition: background-color 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}.ag-board__steps [data-who="H"] .ag-seg__cell::after {
border-color: var(--dc-purple);
background: var(--dc-purple);
}.ag-board__steps [data-who="a"] .ag-seg__cell::after {
border: 3px solid var(--dc-purple-black);
background: var(--dc-lime);
}.ag-board {
display: grid;
gap: 18px;
padding: clamp(18px, 2vw, 26px);
border: 1px solid var(--line-2);
border-radius: 14px;
background: linear-gradient(180deg, rgba(38, 23, 53, 0.6), rgba(20, 13, 29, 0.4));
}.ag-board__head {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 0.6875rem;
color: var(--fg-2);
}.ag-board__stage {
color: var(--dc-lime);
}.ag-board__steps {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
}.ag-board__steps .ag-seg__cell {
height: 72px;
border-radius: 8px;
}.ag-board__steps .ag-seg__cell i {
inset: 6px;
border-radius: 5px;
border-width: 1.5px;
}.ag-seg__name {
display: block;
margin-top: 8px;
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: var(--fg-3);
overflow: hidden;
text-overflow: ellipsis;
}.ag-board__note {
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
font-weight: 700;
letter-spacing: -0.01em;
}.ag-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: 0.8125rem;
color: var(--fg-2);
}.ag-legend li {
display: inline-flex;
align-items: center;
gap: 8px;
}.ag-legend__sw {
width: 22px;
height: 14px;
}.ag-board .illus {
justify-self: start;
}.ag-board {
display: none;
}.ag-stages {
position: relative;
display: grid;
}.ag-stages::before,
.ag-stages::after {
content: "";
position: absolute;
left: 27px;
top: 28px;
bottom: 28px;
width: 1px;
background: var(--line-2);
}.ag-stages::after {
background: var(--dc-lime);
transform: scaleY(var(--p, 1));
transform-origin: top;
transition: transform 0.9s var(--ease-expo);
}.ag-stage {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: clamp(16px, 2.4vw, 32px);
padding-bottom: clamp(36px, 5vw, 64px);
}.ag-stage__n {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--dc-lime);
background: var(--bg);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--dc-lime);
transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}.ag-stage__body {
display: grid;
gap: 12px;
align-content: start;
padding-top: 12px;
}.ag-stage__name {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
line-height: 0.95;
text-transform: uppercase;
}.ag-stage__copy {
max-width: 32em;
color: var(--fg-2);
line-height: 1.6;
}.ag-mini {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
max-width: 460px;
margin-top: 6px;
}.ag-seg__name {
white-space: nowrap;
}@media (max-width: 599px) {
.ag-mini {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 10px;
}
}.ag-stage__note {
font-size: 0.6875rem;
color: var(--fg-3);
}.ag-deploy__case {
max-width: 520px;
margin-top: clamp(24px, 3vw, 40px);
margin-left: calc(56px + clamp(16px, 2.4vw, 32px));
}@media (max-width: 599px) {
.ag-deploy__case {
margin-left: 0;
}.ag-stage {
grid-template-columns: 44px minmax(0, 1fr);
}.ag-stage__n {
width: 44px;
height: 44px;
}.ag-stages::before,
.ag-stages::after {
left: 21px;
}.ag-stage__body {
padding-top: 6px;
}
}.ag-deploy--live .ag-stages {
--p: 0;
}.ag-deploy--live .ag-stage:not(.is-on):not(.is-done) .ag-stage__n {
border-color: var(--line-2);
color: var(--fg-3);
}.ag-deploy--live .ag-stage.is-on .ag-stage__n {
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ag-deploy--live .ag-stage__body {
transition: opacity 0.6s var(--ease-out);
}.ag-deploy--live .ag-stage:not(.is-on) .ag-stage__body {
opacity: 0.62;
}@media (min-width: 1024px) {
.ag-board {
display: grid;
}.ag-deploy--live .ag-mini,
.ag-deploy--live .ag-stage__note {
display: none;
}.ag-deploy--live .ag-stage {
min-height: 44vh;
}.ag-deploy--live .ag-stage:last-child {
min-height: 0;
}
}@media (min-width: 1024px) {
.page-custom-ai-agents .gcta__title {
font-size: min(var(--fs-hero), calc((min(100vw, 1888px) - var(--gutter) * 2) * 0.6 / 7.2));
}
}@media (prefers-reduced-motion: reduce) {
.ag-floor__bays::before,
.ag-floor__bays::after,
.ag-scan::after,
.ag-gate::before {
animation: none;
}.ag-gate[data-state="awaiting"]::before {
background: var(--dc-purple-bright);
}
}