.cx { position: relative; width: 100%; }
.cx__top { margin-bottom: var(--space-10); }
.cx__top h2 { max-width: 18em; }
.cx__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); align-items: start; }
.cx__statement { padding-top: var(--space-4); }
.cx__statement > p:first-child { max-width: 30em; }
.cx-chips { margin: var(--space-8) 0 0; padding: 0; list-style: none; display: grid; justify-items: start; gap: var(--space-2); }
.cx-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--space-10); padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle);
  --_c: var(--space-2); clip-path: polygon(var(--_c) 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%, 0 var(--_c));
  font-size: var(--type-body-sm-font-size); line-height: var(--type-body-sm-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.cx-chip--open { border-color: var(--color-border-strong); }
.cx-k { font-family: var(--type-hud-font-family); font-size: var(--type-hud-font-size); font-weight: var(--type-hud-font-weight); line-height: var(--type-hud-line-height);
  letter-spacing: var(--type-hud-letter-spacing); text-transform: var(--type-hud-text-transform); font-feature-settings: var(--font-feature-tabular); color: var(--color-text-secondary); white-space: nowrap; }
.cx-k--live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-live-text); }
.cx-k--dev { color: var(--color-text-accent); }
.cx-dot { display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-live-dot); flex: none; }
.cx-mark { margin-top: var(--space-10); padding-top: var(--space-8); border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.cx-mark__sig { font-family: var(--type-h4-font-family); font-weight: var(--font-weight-bold); font-size: var(--font-size-fluid-h4); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); text-wrap: balance; max-width: 22ch; }
.cx-sig { background: linear-gradient(var(--gradient-signature-angle), var(--color-gradient-signature)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx-mark__sub { margin-top: var(--space-3); color: var(--color-text-secondary); }
.cx-mark a { margin-top: var(--space-2); }


.cx-spec { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem); gap: var(--space-8); align-items: stretch; margin: 0; }
.cx-spec__fig { position: relative; min-width: 0; }
.cx-iso { display: block; width: 100%; height: auto; overflow: visible; }
.cx-spec__head { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); grid-column: 1 / -1; }
.cx-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cx-leaders path { fill: none; stroke: var(--color-border-strong); stroke-width: 1; transition: stroke var(--motion-duration-base); }
.cx-leaders circle { fill: var(--color-brand-lilac); }
.cx-leaders path.is-on { stroke: var(--color-brand-lilac); stroke-width: 1.5; }
.cx-callouts { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.cx-callout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: baseline; width: 100%; min-height: 44px;
  padding: var(--space-3) var(--space-4); text-align: left; color: var(--color-text-primary); font: inherit; cursor: pointer;
  background: var(--color-bg-canvas); border: var(--border-width-hairline) solid var(--color-border-subtle);
  transition: border-color var(--motion-duration-base), background-color var(--motion-duration-base); }
.cx-callout:hover, .cx-callout[aria-pressed="true"], .cx-callout.is-hover { border-color: var(--color-brand-lilac); background: var(--color-bg-surface); }
.cx-callout .led { --led-size: 0.9rem; grid-row: span 2; align-self: start; margin-top: var(--space-1); --led-on: var(--color-text-tertiary); }
.cx-callout[aria-pressed="true"] .led, .cx-callout:hover .led, .cx-callout.is-hover .led { --led-on: var(--color-brand-lilac); }
.cx-callout b { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); font-size: var(--font-size-fluid-body); }
.cx-callout .t { color: var(--color-text-secondary); font-size: var(--type-body-sm-font-size); line-height: var(--type-body-sm-line-height); }
.cx-spec__foot { grid-column: 1 / -1; margin-top: var(--space-4); white-space: normal; }


.cx-iso .layer { transform: translateY(calc((var(--off) * var(--x, 1) + var(--lift, 0)) * -1px)); transition: transform var(--motion-duration-slow) var(--motion-easing-standard), opacity var(--motion-duration-base); }
.cx-iso.is-focus .layer { opacity: 0.5; }
.cx-iso.is-focus .layer.is-on { opacity: 1; --lift: 14; }
.cx-iso .plate-top { fill: var(--color-brand-ink); fill-opacity: 0.4; stroke: var(--color-brand-lilac-deep); stroke-width: 1.2; }
.cx-iso .layer.is-on .plate-top { stroke: var(--color-brand-lilac); stroke-width: 2; }
.cx-iso .plate-l { fill: var(--color-lilac-800); } .cx-iso .plate-r { fill: var(--color-lilac-900); }
.cx-iso .base-top { fill: var(--color-brand-lilac-deep); } .cx-iso .base-l { fill: var(--color-lilac-800); } .cx-iso .base-r { fill: var(--color-brand-ink); }
.cx-iso .grid { stroke: var(--color-brand-lilac-soft); stroke-opacity: 0.22; stroke-width: 0.8; }
.cx-iso .road { fill: var(--color-brand-black); } .cx-iso .dash { stroke: var(--color-brand-lilac); stroke-width: 1.4; stroke-dasharray: 6 7; fill: none; }
.cx-iso .water { fill: var(--color-lilac-900); } .cx-iso .wline { stroke: var(--color-brand-lilac-soft); stroke-opacity: 0.4; fill: none; stroke-width: 1; }
.cx-iso .f-paper { fill: var(--color-brand-paper); } .cx-iso .f-white { fill: var(--color-neutral-100); } .cx-iso .f-grey { fill: var(--color-neutral-300); }
.cx-iso .f-lilac { fill: var(--color-brand-lilac); } .cx-iso .f-soft { fill: var(--color-brand-lilac-soft); } .cx-iso .f-mid { fill: var(--color-lilac-400); }
.cx-iso .f-deep { fill: var(--color-brand-lilac-deep); } .cx-iso .f-ink { fill: var(--color-brand-ink); } .cx-iso .f-black { fill: var(--color-brand-black); }
.cx-iso .f-peach { fill: var(--color-brand-peach); } .cx-iso .f-rose { fill: var(--color-brand-rose); } .cx-iso .f-l800 { fill: var(--color-lilac-800); } .cx-iso .f-l900 { fill: var(--color-lilac-900); }
.cx-iso .f-char { fill: var(--color-neutral-800); }
.cx-iso .win { fill: var(--color-brand-lilac-deep); } .cx-iso .win-lit { fill: var(--color-brand-peach); } .cx-iso .win-ink { fill: var(--color-lilac-700); }
.cx-iso .shadow { fill: var(--color-brand-black); fill-opacity: 0.35; }
.cx-iso .tag-n { display: none; }
.cx-iso .tag-n rect { fill: var(--color-brand-black); stroke: var(--color-brand-lilac); stroke-width: 1.2; }
.cx-iso .tag-n text { fill: var(--color-brand-lilac); font: var(--font-weight-bold) 15px var(--font-family-body); letter-spacing: 0.08em; }

@media (max-width: 1080px) {
  .cx__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .cx__statement { padding-top: 0; }
  .cx__top { margin-bottom: var(--space-8); }
}

@media (max-width: 700px) {
  .cx-spec { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .cx-leaders { display: none; }
  .cx-iso .tag-n { display: inline; }
  .cx-spec__head .cx-k:last-child { display: none; }
  .cx-callouts { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: var(--space-2);
    margin-inline: calc(var(--layout-gutter-fluid) * -1); padding-inline: var(--layout-gutter-fluid); scroll-padding-inline: var(--layout-gutter-fluid); scrollbar-width: none; }
  .cx-callouts::-webkit-scrollbar { display: none; }
  .cx-callouts > li { flex: 0 0 72%; scroll-snap-align: start; display: flex; }
  .cx-callout { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cx-iso .layer, .cx-leaders path { transition: none; } }


.cx .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx__statement { display: grid; justify-items: start; align-content: start; padding-top: var(--space-2); }
.cx__statement > p:first-child { max-width: 34ch; margin: 0; }
.cx-chips { margin-top: var(--space-8); display: grid; grid-template-columns: max-content max-content; column-gap: var(--space-3); row-gap: var(--space-2); width: max-content; justify-items: stretch; }
.cx-chip { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: var(--space-10); padding: var(--space-2) var(--space-4); }
.cx-chip__t { display: inline-flex; align-items: center; gap: var(--space-3); }
.cx-sep { color: var(--color-text-tertiary); }
.cx-mark { margin-top: var(--space-8); padding-top: var(--space-8); width: 100%; }
.cx-mark__sig { margin: 0; }
.cx-mark__sub { margin: var(--space-3) 0 0; }
.cx-mark a { margin-top: var(--space-3); }