

@layer components {
@media (max-width: 1023px) {

  .cu-psvg { overflow: hidden; }

  .cup-course,
  .cup-joint { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1; }

  .cup-key-n {
    text-anchor: middle;
    font-size: 13px;
    font-weight: 500;
    fill: var(--text-secondary);
  }

  .cup-open-n {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
    fill: var(--text-primary);
  }

  .cup-open-s {
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    fill: var(--text-primary);
  }

  .ms-psvg { overflow: hidden; }

  .msp-name {
    font-size: 13px;
    font-weight: 500;
    fill: var(--text-primary);
  }

  .msp-slab-n {
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 2px;
    fill: rgba(255, 255, 255, 0.55);
  }

  .msp-slab-t { font-size: 12.5px; fill: var(--text-muted); }

  .cr-trade-n { font-size: 12.5px; }
}

@media (max-width: 1023px) {

  .cr-lede { margin-top: var(--stack-xs); }
  .cr-eyebrow { margin-bottom: var(--stack-xs); }
}

@media (max-width: 1023px) {

  .cr-bar-head { margin-bottom: var(--stack-md); }

  .cr-bar-stack { gap: 20px; }

  .cr-trade-no {
    margin-bottom: 8px;
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .cr-trade-yes {
    font-size: 1.3125rem;
    line-height: 1.16;
  }

  .cr-bar-foot { margin-top: var(--stack-sm); }
}

@media (max-width: 560px) {
  .cr-bar-stack { gap: 16px; }
  .cr-trade-no { font-size: 1rem; margin-bottom: 6px; }
  .cr-trade-yes { font-size: 1.25rem; }
}

@media (max-width: 1023px) {

  .cu-foot-k, .ms-foot-k, .mg-foot-k, .cr-bar-foot-k {
    white-space: normal;
  }

  .cr-mis-fig { margin-top: 12px; }

  .main-content.main-content .page-hero .page-hero-title,
  .main-content.main-content .cr-mis-head .cr-h2 { text-wrap: balance; }
}
}

@layer components {

@media (max-width: 1023px) {
  .main-content > .cr-unbuilt { padding-top: calc(var(--navbar-h) + var(--hero-lede)); }
}

@media (max-width: 1023px) {
  .cr-bar-fig { margin: 0; }
}

@media (max-width: 1023px) {
  .cr-lens-head { margin-bottom: var(--stack-md); }
}

@media (max-width: 1023px) {

  .cr-trade-yes--a { margin-bottom: 0; }
  .cr-trade-yes--b { margin-top: 0; }

  .cr-bar-foot-t { font-size: var(--mt-body); line-height: var(--mt-lh-lede); }

}

}

@layer components {
@media (max-width: 1023px) {

  .cup-key-n, .cup-open-s { font-size: 12px; }

  .msp-name, .msp-slab-n, .msp-slab-t { font-size: 12px; }

}
}

@layer components {
@media (max-width: 1023px) {

  .m9-svg { overflow: visible; }

  .m9-spine { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }

  .m9-depth {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    fill: rgba(255, 255, 255, 0.30);
  }

  .m9-body { fill: rgba(255, 255, 255, 0.62); }

  .m9-name {
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-primary);
  }

  .m9-node.is-lit .m9-body { fill: #ffffff; }

  .m9-ring {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1;
    opacity: 0.55;
  }

  .m9-gate {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1;
    stroke-dasharray: 3 3;
  }
}
}

@layer components {
@media (max-width: 1023px) {
  .cr-mach-head { margin-bottom: var(--stack-md); }
  .main-content.main-content .cr-mach-head .cr-h2 { text-wrap: balance; }
}
}

@layer components {
@media (max-width: 1023px) {

  .ln8-svg { overflow: hidden; }

  .ln8-side-n {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 2px;
    fill: rgba(255, 255, 255, 0.55);
  }

  .ln8-side-t { font-size: 12px; fill: var(--text-muted); }

  .ln8-n {
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-primary);
  }

  .ln8-v {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    fill: var(--text-primary);
  }

  .ln8-vl { font-size: 12px; fill: var(--text-primary); }
}
}

@layer components {
@media (max-width: 1023px) {
  .main-content.main-content .cr-lens-head .cr-h2 { text-wrap: balance; }
}
}
