@layer components {
.ms-mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.ms-mono--ws {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.ms-mono--dim { color: var(--text-muted); }
.ms-mono--case { color: var(--text-primary); }
.ms-mono--seg { color: var(--text-muted); }

.ms-skel {
  display: block;
  width: var(--w, 60%);
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-muted) 26%, transparent),
    color-mix(in srgb, var(--text-muted) 10%, transparent)
  );
}

.ms-skel--thin {
  width: 34px;
  height: 5px;
  flex: 0 0 auto;
}

.ms-nums {
  list-style: none;
  margin: var(--stack-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}

.ms-num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ms-num b {
  font-weight: 600;
  color: var(--text-primary);
}

.ms-num + .ms-num::before {
  content: '·';
  margin-right: var(--space-2);
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.main-content > .ms-sw {
  padding-top: var(--stack-lg);
  padding-bottom: var(--stack-lg);
}

@media (min-width: 1024px) {
  .ms-sw-u { display: contents; }
}

.ms-sw-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--stack-sm);
}

.ms-sw-title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-sw-lede {
  margin: 0 0 6px;
  max-width: 46ch;
  justify-self: end;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ms-app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  overflow: hidden;
}

.ms-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-right: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
}

.ms-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.ms-brand-mark {

  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  color: var(--text-primary);
  opacity: 1;
}

.ms-brand-t {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-nav-i {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.ms-nav-i.is-on {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--text-primary);
}

.ms-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.ms-nav-i.is-on .ms-nav-dot {
  background: var(--accent-color);
  opacity: 1;
}

.ms-ws {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.ms-ws-lab {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-ws-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-ws-i {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 12px;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ms-skel--w41p { --w: 41%; }
.ms-skel--w64p { --w: 64%; }
.ms-skel--w77p { --w: 77%; }

.ms-skel--w34p { --w: 34%; }
.ms-skel--w38p { --w: 38%; }
.ms-skel--w46p { --w: 46%; }
.ms-skel--w55p { --w: 55%; }
.ms-skel--w58p { --w: 58%; }
.ms-skel--w63p { --w: 63%; }
.ms-skel--w68p { --w: 68%; }
.ms-skel--w71p { --w: 71%; }
.ms-skel--w72p { --w: 72%; }
}

@layer components {

.ms-ws-ico {
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.5;
}

.ms-ws-n {
  overflow: hidden;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ws-ck {
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--accent-color);
  border-bottom: 1.5px solid var(--accent-color);
  opacity: 0;
  transform: rotate(-45deg) translateY(-2px);
}

.ms-ws-i.is-on {
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--text-primary);
}

.ms-ws-i.is-on .ms-ws-ck { opacity: 1; }
.ms-ws-i.is-on .ms-ws-ico { opacity: 1; }

.ms-ws-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.ms-ws-plus {
  width: 12px;
  text-align: center;
  font-weight: 600;
}

.ms-pane {
  position: relative;
  padding: var(--space-5);
  overflow: hidden;
}

.ms-pane-in {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: opacity 0.2s ease;
}

.ms-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-color) 55%, transparent) 48%,
    var(--accent-color) 50%,
    color-mix(in srgb, var(--accent-color) 55%, transparent) 52%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.ms-pane.is-reloading .ms-pane-in {
  opacity: 0.1;
}

.ms-pane-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.ms-pane-name {
  margin: 2px 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ms-pane-kind {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ms-pills {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}

.ms-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.ms-pill.is-on {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

.ms-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.ms-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent);
}

.ms-card-t {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-card-l {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.ms-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ms-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.ms-row-k {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-row-n {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ms-q {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-q-i {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ms-iso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.ms-iso-k {
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.ms-sw-meta {
  margin: var(--space-4) 0 0;
}

@media (any-hover: hover) {
  .ms-ws-i:hover {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ms-pane.is-reloading .ms-sweep {
    animation: ms-sweep 0.32s linear;
  }
  @keyframes ms-sweep {
    from { opacity: 0.85; transform: translateX(-100%); }
    to   { opacity: 0;    transform: translateX(100%); }
  }
}

@media (max-width: 1024px) {
  .ms-sw-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ms-sw-lede { justify-self: start; }
  .ms-app { grid-template-columns: minmax(0, 1fr); }
  .ms-side { border-right: 0; border-bottom: 1px solid var(--border-light); }
  .ms-ws { margin-top: 0; }
  .ms-ws-list { flex-direction: row; flex-wrap: wrap; }
  .ms-ws-i { width: auto; grid-template-columns: 14px auto 12px; }
}
}

@layer components {

@media (max-width: 768px) {
  .ms-cards { grid-template-columns: minmax(0, 1fr); }
  .ms-pane { padding: var(--space-4); }
  .ms-row { grid-template-columns: minmax(0, 1fr); }
  .ms-row-n { grid-column: 1; }
}

@media (max-width: 560px) {
  .ms-sw-title { font-size: 1.875rem; }
  .ms-pane-top { flex-direction: column; }
  .ms-q-i { flex-wrap: wrap; gap: var(--space-2); }

  .ms-ws-list { flex-direction: column; }
  .ms-ws-i { width: 100%; grid-template-columns: 14px minmax(0, 1fr) 12px; }
}

.ms-vc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--space-10);
  align-items: end;
  margin-bottom: var(--stack-md);
}

.ms-vc-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.ms-vc-lede {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ms-vc-svg,
.ms-sh-svg {

  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ms-vc-col {
  fill: rgba(148, 163, 184, 0.10);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.ms-vc-col.is-ok {
  fill: color-mix(in srgb, var(--accent-color) 20%, transparent);
  stroke: rgba(99, 102, 241, 0.55);
}

.ms-vc-cap {
  fill: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ms-vc-store {
  fill: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ms-vc-kind { fill: var(--text-muted); font-size: 11px; }

.ms-vc-verdict {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-vc-verdict.is-ok { fill: #A5B4FC; }

.ms-vc-ask {
  stroke: var(--accent-color);
  stroke-width: 1.5;
}

.ms-vc-asklab {
  fill: #A5B4FC;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-vc-floor { stroke: var(--border-strong); stroke-width: 1; }

.ms-vc-named {
  margin-top: var(--stack-md);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--border-subtle);
}

.ms-vc-namedlabel,
.ms-sh-namedlabel {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-vc-list,
.ms-sh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
}

.ms-vc-item,
.ms-sh-item {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.ms-vc-item b {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: var(--space-2);
}

.ms-vc-foot,
.ms-sh-foot,
.ms-ab-foot,
.ms-cx-foot { margin: var(--stack-sm) 0 0; }

.ms-sh { overflow: clip; }

.ms-sh-col { max-width: 620px; }

.ms-sh-kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-sh-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.ms-sh-lede {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-read);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ms-sh-obj {
  margin-top: var(--stack-md);

  margin-left: 0;

  width: 100%;
  max-width: none;
}

.ms-sh-bar {
  fill: color-mix(in srgb, var(--accent-color) 34%, transparent);
}

.ms-sh-lab {
  fill: var(--text-secondary);
  font-size: 13px;
}

.ms-sh-n {
  fill: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ms-sh-turn {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.ms-sh-none {
  fill: #A5B4FC;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ms-sh-nonelab {
  fill: var(--text-secondary);
  font-size: 12px;
}
}

@layer components {

.ms-sh-named {
  margin-top: var(--stack-sm);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 1024px) {
  .ms-vc-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
}

@media (max-width: 900px) {

  .ms-vc-stage { overflow-x: auto; }
  .ms-vc-svg { min-width: 900px; }

  .ms-sh { overflow: visible; }

  .ms-sh-obj { margin-left: 0; width: min(1360px, calc(100vw - 32px)); overflow-x: auto; }
  .ms-sh-svg { min-width: 900px; }
}

.ms-rf { overflow: clip; }

.ms-rf-band {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
}

.ms-rf-band-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.ms-rf-blk {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ms-rf-blk-n {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-rf-dots {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}

.ms-rf-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 26%, transparent);
}

.ms-rf-dot.is-on {
  background: var(--accent-color);
}

.ms-rf-cut {
  position: relative;
  height: 3px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
}

.ms-rf-cut::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cut, 0%);
  background: var(--accent-color);
}

.ms-rf-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
}

.ms-rf-key-l {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.ms-rf-key-sw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 26%, transparent);
}

.ms-rf-key-sw.is-on { background: var(--accent-color); }

.ms-rf-key-r { margin: 0 0 0 auto; }

@media (max-width: 1024px) {
  .ms-rf-band-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 560px) {
  .ms-rf-band-in { grid-template-columns: minmax(0, 1fr); }
  .ms-rf-key-r { margin-left: 0; }
}

.ms-6 { overflow: clip; }

.ms-6-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--stack-md);
}

.ms-6-title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-6-lede {
  margin: 0 0 6px;
  max-width: 44ch;
  justify-self: end;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ms-6-obj {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ms-6-track { position: relative; }

.ms-6-lab {
  display: block;
  margin-bottom: var(--space-5);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-6-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: min(132%, 1296px);
  background: linear-gradient(
    90deg,
    var(--border-strong) 55%,
    color-mix(in srgb, var(--border-strong) 0%, transparent)
  );
}

.ms-6-rule--stop {
  width: 62%;
  background: var(--border-strong);
}

.ms-6-rule--stop::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 2px;
  height: 11px;
  background: var(--accent-color);
}

.ms-6-marks,
.ms-6-nodes {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0 0 var(--space-5);
}

.ms-6-marks { gap: var(--space-2); width: min(132%, 1296px); }

.ms-6-marks { width: min(132%, 1296px); }

.ms-6-mark {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;

  opacity: 1;
}

.ms-6-tick {
  width: 1px;
  height: 12px;
  background: var(--border-strong);
}

.ms-6-nodes { gap: var(--space-8); width: 62%; }

.ms-6-node {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ms-6-mark--i-0 { --i: 0; }
.ms-6-mark--i-1 { --i: 1; }
.ms-6-mark--i-2 { --i: 2; }
.ms-6-mark--i-3 { --i: 3; }
.ms-6-mark--i-4 { --i: 4; }
.ms-6-mark--i-5 { --i: 5; }
.ms-6-mark--i-6 { --i: 6; }
.ms-6-mark--i-7 { --i: 7; }
.ms-6-mark--i-8 { --i: 8; }
.ms-6-mark--i-9 { --i: 9; }

.ms-6-node--i-0 { --i: 0; }
.ms-6-node--i-1 { --i: 1; }
.ms-6-node--i-2 { --i: 2; }
.ms-6-node--i-3 { --i: 3; }

.ms-rf-cut--n1 { --cut: 36.904761904761905%; }
.ms-rf-cut--n2 { --cut: 55.952380952380956%; }
.ms-rf-cut--n3 { --cut: 26.190476190476193%; }
.ms-rf-cut--n4 { --cut: 45.23809523809524%; }
}

@layer components {

.ms-6-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-color);
}

.ms-6-t {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ms-6-track--open .ms-6-t { color: var(--text-muted); }

@media (max-width: 1024px) {
  .ms-6-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ms-6-lede { justify-self: start; }
  .ms-6-marks { width: 165%; }
  .ms-6-rule { width: 165%; }
  .ms-6-nodes { width: 82%; }
  .ms-6-rule--stop { width: 82%; }
}

@media (max-width: 768px) {
  .ms-6-obj { gap: var(--space-10); }
  .ms-6-marks { width: 260%; }
  .ms-6-rule { width: 260%; }
  .ms-6-nodes { width: 100%; gap: var(--space-4); }
  .ms-6-rule--stop { width: 100%; }
  .ms-6-t { font-size: 0.6875rem; }
}

@media (max-width: 560px) {
  .ms-6-title { font-size: 1.875rem; }
  .ms-6-marks { width: 340%; }
  .ms-6-rule { width: 340%; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-pane-in,
  .ms-ws-i {
    transition: none;
  }
}

.ms-ab-head,
.ms-cx-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--space-10);
  align-items: end;
  margin-bottom: var(--stack-md);
}

.ms-ab-title,
.ms-cx-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.ms-ab-lede,
.ms-cx-lede {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ms-ab-svg,
.ms-cx-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ms-ab-slab--up {
  fill: color-mix(in srgb, var(--accent-color) 62%, transparent);
}

.ms-ab-slab--down {
  fill: rgba(148, 163, 184, 0.13);
}

.ms-ab-name,
.ms-cx-name {
  fill: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ms-ab-kind,
.ms-cx-kind {
  fill: var(--text-muted);
  font-size: 12px;
}

.ms-ab-n {
  fill: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ms-ab-cut {
  stroke: var(--accent-color);
  stroke-width: 1;
}

.ms-ab-cutlab {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-ab-cutlab--up { fill: #A5B4FC; }

.ms-ab-ws {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ms-ab-iso {
  fill: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ms-ab-named {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  margin-top: var(--stack-md);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--border-subtle);
}

.ms-ab-namedlabel,
.ms-cx-namedlabel {
  margin: 0 0 var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ms-ab-namedlabel--up { color: #A5B4FC; }

.ms-ab-list,
.ms-cx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.ms-ab-item,
.ms-cx-item {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ms-ab-list--dim .ms-ab-item { color: var(--text-muted); }

.ms-cx-body {
  fill: rgba(148, 163, 184, 0.07);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.ms-cx-fit {
  fill: rgba(99, 102, 241, 0.20);
  stroke: rgba(99, 102, 241, 0.62);
  stroke-width: 1;
}

.ms-cx-pct {
  fill: #A5B4FC;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ms-cx-of {
  fill: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.ms-cx-floor {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.ms-cx-ws,
.ms-cx-eq {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-cx-eq { fill: var(--text-secondary); }
}

@layer components {

.ms-cx-named {
  margin-top: var(--stack-md);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 1024px) {
  .ms-ab-head,
  .ms-cx-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .ms-ab-named { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 900px) {

  .ms-ab-stage,
  .ms-cx-stage { overflow-x: auto; }
  .ms-ab-svg,
  .ms-cx-svg { min-width: 860px; }
}

.ms-sh .ms-sh-obj { width: min(1296px, calc(100vw - 128px)); margin-inline: auto; }
.ms-sh .ms-sh-svg { max-width: 100%; }
}

@layer components {
.main-content > .msf-hero {

  --msf-head-drop: 4px;
  padding-top: calc(var(--stack-lg) - var(--msf-head-drop));
}

.msf-stage {
  position: relative;

  width: 1424px;
  margin-inline: -64px;

  --msf-head-l: 4.4944%;
  --msf-head-w: 53.7921%;
  --msf-head-h: 42.5%;
}

.msf-svg {
  display: block;
  width: 100%;
  height: auto;
}

.msf-contour { fill: #454E60; }
.msf-body    { fill: #7C80F0; }

.msf-head {
  position: absolute;
  left: var(--msf-head-l);
  top: 0;
  width: var(--msf-head-w);
  height: var(--msf-head-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--msf-head-drop);
  pointer-events: none;
}

.msf-head .page-hero-eyebrow {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}

.msf-lede {
  margin-top: var(--space-8);
}

@media (max-width: 1439px) {
  .msf-stage { width: 100%; margin-inline: 0; }
}

@media (max-width: 1099px) {
  .main-content > .msf-hero { --msf-head-drop: 0px; }
  .msf-stage {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  .msf-head {
    position: static;
    width: 100%;
    height: auto;
    pointer-events: auto;
  }
}

@media (max-width: 768px) {
  .msf-title { font-size: 2.375rem; }
}
}