.trajectory-lab {
  --trajectory-ink: #16221f;
  --trajectory-green: #155843;
  --trajectory-mint: #dceee5;
  --trajectory-gold: #d19a52;
  --trajectory-red: #9e4939;
  --trajectory-blue: #355f73;
  padding: 2rem 0 6rem;
  color: var(--trajectory-ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(36, 112, 82, .13), transparent 28rem),
    radial-gradient(circle at 92% 24%, rgba(53, 95, 115, .12), transparent 25rem),
    linear-gradient(180deg, #f4f1e9, #eeeae0 58%, #f4f1e9);
}

.trajectory-shell { display: grid; gap: 1.1rem; }
.trajectory-live-strip,
.trajectory-question,
.trajectory-signal,
.trajectory-benchmark,
.trajectory-scenario,
.trajectory-integrity,
.trajectory-architecture,
.trajectory-method,
.trajectory-boundary {
  border: 1px solid rgba(22, 34, 31, .13);
  box-shadow: 0 24px 65px rgba(18, 34, 28, .055);
}

.trajectory-live-strip {
  min-height: 3.5rem;
  padding: .82rem 1.08rem;
  border-radius: 999px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, .76);
  font-size: .84rem;
}
.trajectory-live-strip > div { display: flex; align-items: center; gap: .65rem; }
.trajectory-live-strip > div > span { width: .62rem; height: .62rem; border-radius: 50%; background: #24805e; box-shadow: 0 0 0 .34rem rgba(36, 128, 94, .13); }
.trajectory-live-strip small { color: #68736f; }

.trajectory-question {
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border-radius: 1.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .82fr);
  gap: 2.2rem;
  align-items: end;
  background: rgba(255, 255, 255, .78);
}
.trajectory-question h2 { max-width: 16ch; margin: .55rem 0 0; font-size: clamp(2.15rem, 4.6vw, 4.65rem); line-height: .96; letter-spacing: -.052em; }
.trajectory-question p { margin: 0 0 1rem; color: #52605b; font-size: 1.03rem; line-height: 1.7; }
.trajectory-question strong { display: block; padding-left: 1rem; border-left: 3px solid var(--trajectory-gold); color: var(--trajectory-green); line-height: 1.5; }

.trajectory-architecture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.trajectory-architecture-grid article { min-height: 14.5rem; padding: 1.35rem; border-radius: 1.15rem; display: flex; flex-direction: column; color: #fbf8f0; background: #26312e; }
.trajectory-architecture-grid article.per-call { background: #354954; }
.trajectory-architecture-grid article.featured { background: linear-gradient(145deg, #196148, #12392e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.trajectory-architecture-grid article > span { color: #e4b879; font-size: .72rem; font-weight: 900; letter-spacing: .11em; }
.trajectory-architecture-grid h2 { margin: auto 0 .6rem; color: inherit; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.07; }
.trajectory-architecture-grid p { margin: 0; color: rgba(251, 248, 240, .7); font-size: .88rem; line-height: 1.55; }
.trajectory-architecture-grid article > div { margin: .88rem 0 .55rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.trajectory-architecture-grid b { padding: .32rem .43rem; border-radius: .4rem; background: rgba(255,255,255,.09); font-size: .65rem; }
.trajectory-architecture-grid i { color: #e4b879; font-style: normal; }

.trajectory-signal {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
  gap: 2rem;
  align-items: center;
  background: linear-gradient(145deg, #122f28, #1c6049);
  color: #faf7ef;
}
.trajectory-signal .eyebrow { color: #e4b879; }
.trajectory-signal h2 { max-width: 27ch; margin: .5rem 0 .7rem; color: inherit; font-size: clamp(1.75rem, 3vw, 2.85rem); line-height: 1.04; }
.trajectory-signal p { max-width: 68ch; margin: 0; color: rgba(250,247,239,.67); font-size: .78rem; line-height: 1.55; }
.trajectory-signal-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.trajectory-signal-facts span { min-width: 0; padding: .82rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; background: rgba(255,255,255,.06); }
.trajectory-signal-facts strong, .trajectory-signal-facts small { display: block; }
.trajectory-signal-facts strong { color: #fff; font-size: 1.35rem; }
.trajectory-signal-facts small { margin-top: .22rem; color: rgba(250,247,239,.65); font-size: .63rem; line-height: 1.35; }

.trajectory-benchmark,
.trajectory-scenario { padding: clamp(1.35rem, 3vw, 2.35rem); border-radius: 1.5rem; background: rgba(255,255,255,.76); }
.trajectory-panel-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.35rem; }
.trajectory-panel-head h2 { margin: .35rem 0 0; font-size: clamp(1.55rem, 2.5vw, 2.45rem); }
.trajectory-panel-head > p { max-width: 31rem; margin: 0; color: #67726e; font-size: .78rem; line-height: 1.55; text-align: right; }
.trajectory-benchmark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.trajectory-benchmark-card { padding: 1.15rem; border: 1px solid rgba(22,34,31,.11); border-radius: 1rem; background: #f8f5ed; }
.trajectory-benchmark-card.ithz { background: #edf6f0; border-color: rgba(21,88,67,.2); }
.trajectory-benchmark-card header { display: grid; grid-template-columns: .62rem 1fr; align-items: center; gap: .65rem; padding-bottom: .82rem; border-bottom: 1px solid rgba(22,34,31,.09); }
.trajectory-benchmark-card header > span { width: .62rem; height: .62rem; border-radius: 50%; background: var(--trajectory-red); }
.trajectory-benchmark-card.per_call header > span { background: var(--trajectory-blue); }
.trajectory-benchmark-card.ithz header > span { background: #24805e; }
.trajectory-benchmark-card small { color: #69746f; }
.trajectory-benchmark-card h3 { margin: .15rem 0 0; font-size: 1rem; }
.trajectory-metric { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .55rem; margin-top: .9rem; }
.trajectory-metric strong { color: var(--trajectory-red); font-size: 1.65rem; }
.trajectory-metric.useful strong { color: var(--trajectory-green); }
.trajectory-metric strong i { color: #7a837f; font-size: .72rem; font-style: normal; }
.trajectory-metric span { color: #5b6762; font-size: .73rem; line-height: 1.35; }
.trajectory-benchmark-card footer { margin-top: .85rem; padding-top: .7rem; border-top: 1px dashed rgba(22,34,31,.13); color: #65706b; font-size: .7rem; }
.trajectory-benchmark-card footer b { color: var(--trajectory-ink); }

.trajectory-protocol { padding: .38rem .58rem; border-radius: 999px; background: #e8e4da; color: #53605b; font-family: ui-monospace, monospace; font-size: .68rem; }
.trajectory-controls { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: .7rem; align-items: end; }
.trajectory-controls label { display: grid; gap: .35rem; }
.trajectory-controls label span { color: #5c6863; font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.trajectory-controls select { width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid rgba(22,34,31,.18); border-radius: .7rem; background: #fff; color: var(--trajectory-ink); }
.trajectory-controls .button { min-height: 3rem; border: 0; cursor: pointer; }

.trajectory-brief { margin-top: 1rem; padding: 1.1rem; border: 1px solid rgba(22,34,31,.1); border-radius: 1rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); gap: 1.2rem; background: #f8f5ed; }
.trajectory-kind { color: #237656; font-size: .66rem; font-weight: 900; letter-spacing: .08em; }
.trajectory-kind.attack { color: var(--trajectory-red); }
.trajectory-brief h3 { margin: .4rem 0 .45rem; font-size: 1.3rem; }
.trajectory-brief p { margin: 0; color: #56625d; font-size: .82rem; line-height: 1.55; }
.trajectory-predicate { padding: .85rem; border-radius: .78rem; background: #fff; }
.trajectory-predicate small { display: block; color: #78827e; font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.trajectory-predicate strong { display: block; margin: .35rem 0 .45rem; color: var(--trajectory-red); font-size: .8rem; }
.trajectory-predicate p { font-size: .72rem; }

.trajectory-steps { margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; list-style: none; }
.trajectory-steps li { min-width: 0; padding: .8rem; border: 1px solid rgba(22,34,31,.1); border-radius: .85rem; background: #fff; }
.trajectory-steps li > span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #dfeae4; color: var(--trajectory-green); font-size: .7rem; font-weight: 900; }
.trajectory-steps small, .trajectory-steps strong, .trajectory-steps code { display: block; }
.trajectory-steps small { margin-top: .65rem; color: #2a7a5b; font-size: .54rem; font-weight: 900; letter-spacing: .045em; }
.trajectory-steps strong { min-height: 2.8em; margin: .32rem 0; font-size: .75rem; line-height: 1.35; }
.trajectory-steps code { min-height: 3.2em; color: #426056; font-size: .58rem; line-height: 1.4; overflow-wrap: anywhere; }
.trajectory-steps p { margin: .55rem 0 0; color: #6a746f; font-size: .62rem; line-height: 1.45; }
.trajectory-steps.is-running li { animation: trajectory-step-in .5s both; animation-delay: var(--trajectory-delay); }
@keyframes trajectory-step-in { from { opacity: .2; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }

.trajectory-results { margin-top: .85rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.trajectory-result-card { --result: #66736e; min-width: 0; padding: 1rem; border: 1px solid rgba(22,34,31,.11); border-top: 4px solid var(--result); border-radius: .95rem; background: #fff; }
.trajectory-result-card.danger { --result: var(--trajectory-red); background: #fbf3f0; }
.trajectory-result-card.safe { --result: var(--trajectory-green); background: #f0f7f2; }
.trajectory-result-card header small { color: #77817d; font-size: .64rem; }
.trajectory-result-card h3 { margin: .22rem 0 .72rem; font-size: .98rem; }
.trajectory-verdict { display: inline-block; padding: .33rem .48rem; border-radius: .4rem; background: color-mix(in srgb, var(--result) 13%, white); color: var(--result); font-size: .69rem; letter-spacing: .045em; }
.trajectory-result-card > p { min-height: 4.8em; margin: .72rem 0; color: #56625d; font-size: .74rem; line-height: 1.52; }
.trajectory-stop { min-height: 0 !important; padding: .52rem; border-radius: .5rem; background: #e6f1e9; color: #245a46 !important; }
.trajectory-result-card footer { padding-top: .68rem; border-top: 1px dashed rgba(22,34,31,.12); display: flex; gap: .5rem; flex-wrap: wrap; color: #707a76; font-size: .62rem; }
.trajectory-result-card footer code { margin-left: auto; color: #486158; }

.trajectory-ledger { margin-top: 1rem; padding: 1.15rem; border-radius: 1rem; background: #1f2d29; color: #f9f6ef; }
.trajectory-ledger > header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.trajectory-ledger .eyebrow { color: #e4b879; }
.trajectory-ledger h3 { margin: .35rem 0 0; color: inherit; font-size: 1.2rem; }
.trajectory-ledger > header > code { color: #9ed2ba; font-size: .68rem; }
.trajectory-ledger ol { margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; list-style: none; }
.trajectory-ledger li { min-width: 0; padding: .72rem; border: 1px solid rgba(255,255,255,.08); border-radius: .72rem; display: grid; grid-template-columns: 1.55rem 1fr; gap: .5rem; background: rgba(255,255,255,.055); }
.trajectory-ledger li > span { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: #e4b879; color: #1f2d29; font-size: .62rem; font-weight: 900; }
.trajectory-ledger li.decision-block { border-color: rgba(230,142,111,.4); background: rgba(158,73,57,.18); }
.trajectory-ledger li header { display: flex; justify-content: space-between; gap: .4rem; }
.trajectory-ledger li strong { font-size: .68rem; }
.trajectory-ledger li b { color: #9ed2ba; font-size: .58rem; letter-spacing: .05em; }
.trajectory-ledger li.decision-block b { color: #f0a992; }
.trajectory-ledger li p { min-height: 5.5em; margin: .35rem 0; color: rgba(249,246,239,.62); font-size: .58rem; line-height: 1.45; }
.trajectory-ledger li small { display: block; margin-top: .26rem; color: rgba(249,246,239,.5); font-size: .54rem; line-height: 1.35; overflow-wrap: anywhere; }
.trajectory-ledger li code { color: #b5d8c8; font-size: inherit; }

.trajectory-integrity,
.trajectory-architecture { padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 1.45rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr); gap: 2rem; align-items: center; }
.trajectory-integrity { background: #ece7db; }
.trajectory-integrity h2, .trajectory-architecture h2 { margin: .4rem 0 .65rem; font-size: clamp(1.55rem, 2.5vw, 2.4rem); }
.trajectory-integrity p, .trajectory-architecture p { margin: 0; color: #59655f; font-size: .82rem; line-height: 1.65; }
.trajectory-integrity dl { margin: 0; display: grid; gap: .55rem; }
.trajectory-integrity dl div { padding: .76rem .85rem; border-radius: .7rem; display: grid; grid-template-columns: 5rem 1fr; gap: .7rem; background: rgba(255,255,255,.65); }
.trajectory-integrity dt { color: #75807b; font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.trajectory-integrity dd { margin: 0; color: #2c4f42; font-family: ui-monospace, monospace; font-size: .7rem; overflow-wrap: anywhere; }

.trajectory-architecture { background: linear-gradient(145deg, #f2efe6, #e8efe9); }
.trajectory-flow { padding: 1rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; gap: .34rem; flex-wrap: wrap; background: #1f2d29; color: #f9f6ef; }
.trajectory-flow span, .trajectory-flow strong { padding: .44rem .52rem; border-radius: .45rem; background: rgba(255,255,255,.08); font-size: .68rem; }
.trajectory-flow strong { background: #196148; }
.trajectory-flow i { color: #e4b879; font-style: normal; }

.trajectory-lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: 1rem; }
.trajectory-method, .trajectory-boundary { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 1.3rem; background: rgba(255,255,255,.76); }
.trajectory-method h2, .trajectory-boundary h2 { margin: .4rem 0 1rem; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.trajectory-method ol { margin: 0 0 1.1rem; padding-left: 1.25rem; color: #5c6863; font-size: .8rem; line-height: 1.55; }
.trajectory-method li + li { margin-top: .55rem; }
.trajectory-boundary { background: #f2e4df; border-color: rgba(158,73,57,.18); }
.trajectory-boundary p { color: #664f48; font-size: .8rem; line-height: 1.6; }
.trajectory-loading { grid-column: 1/-1; margin: 0; padding: 1rem; color: #66716c; }

.trajectory-article-flow {
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 1.55rem);
  border-radius: 1rem;
  background: #1f2d29;
  color: #f9f6ef;
}
.trajectory-article-flow > div { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.trajectory-article-flow span, .trajectory-article-flow strong { padding: .48rem .58rem; border-radius: .45rem; background: rgba(255,255,255,.08); font-size: .71rem; }
.trajectory-article-flow strong { background: #196148; }
.trajectory-article-flow i { color: #e4b879; font-style: normal; }
.trajectory-article-flow figcaption { margin-top: .82rem; color: rgba(249,246,239,.62); font-size: .7rem; text-align: center; }
.article-content .trajectory-result-table { width: 100%; margin: 1.7rem 0 2rem; border-collapse: collapse; font-size: .82rem; }
.article-content .trajectory-result-table th,
.article-content .trajectory-result-table td { padding: .75rem; border: 1px solid rgba(22,34,31,.12); text-align: left; vertical-align: top; }
.article-content .trajectory-result-table th { background: #1f2d29; color: #f9f6ef; }
.article-content .trajectory-result-table tr:nth-child(even) td { background: #f4f1e9; }
.trajectory-article-callout { margin: 1.6rem 0; padding: 1rem 1.15rem; border-left: 4px solid #196148; border-radius: 0 .8rem .8rem 0; background: #edf5ef; color: #355348; }

@media (max-width: 1080px) {
  .trajectory-question, .trajectory-signal, .trajectory-integrity, .trajectory-architecture { grid-template-columns: 1fr; }
  .trajectory-steps, .trajectory-ledger ol { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .trajectory-lab { padding-top: 1rem; }
  .trajectory-live-strip { border-radius: 1rem; align-items: flex-start; flex-direction: column; }
  .trajectory-question { gap: 1.2rem; }
  .trajectory-architecture-grid, .trajectory-benchmark-grid, .trajectory-results, .trajectory-lower-grid { grid-template-columns: 1fr; }
  .trajectory-architecture-grid article { min-height: 11.5rem; }
  .trajectory-panel-head { align-items: flex-start; flex-direction: column; }
  .trajectory-panel-head > p { text-align: left; }
  .trajectory-signal-facts { grid-template-columns: 1fr; }
  .trajectory-controls { grid-template-columns: 1fr; }
  .trajectory-brief { grid-template-columns: 1fr; }
  .trajectory-steps, .trajectory-ledger ol { grid-template-columns: 1fr 1fr; }
  .trajectory-ledger > header { align-items: flex-start; flex-direction: column; }
  .trajectory-result-card > p { min-height: 0; }
}

@media (max-width: 460px) {
  .trajectory-steps, .trajectory-ledger ol { grid-template-columns: 1fr; }
  .trajectory-integrity dl div { grid-template-columns: 1fr; }
  .article-content .trajectory-result-table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .trajectory-steps.is-running li { animation: none; }
}