/* Intentionally loaded only on VISION and MORDAX product pages. */
.system-atlas {
  --tech-paper:#f0eee7;
  --tech-ink:#515853;
  --tech-copper:#a94104;
  --tech-code:ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* Reserve the fixed section bar so direct anchor visits and the hero don't jump. */
  padding-block-start:calc(var(--sys-nav-top) + var(--sys-bar-height) + 1px);
}
.system-atlas .sys-bar {
  position:fixed; inset-inline:0; top:var(--sys-nav-top);
  box-shadow:0 4px 12px #26271c09;
}
.system-atlas .sys-summary {padding-block-end:clamp(3rem,7vw,7.5rem)}
.system-atlas .sys-map {padding-block-end:clamp(3.5rem,8vw,8rem)}
.system-atlas .sys-map .sys-chapter h2 {max-width:22ch}
.system-atlas .sys-work > ol {gap:clamp(.65rem,1.8vw,1.85rem); margin-block:clamp(.85rem,2.3vw,2rem)}
.system-atlas .sys-work > ol > li {
  border:0; border-top:1px solid var(--sys-rule); background:var(--sys-white); border-radius:0 0 4px 4px;
  padding:clamp(1rem,2.5vw,2.5rem);
}
.system-atlas .sys-work > ol > li h3 {font-size:clamp(1.35rem,2.05vw,2rem)!important}
.system-atlas .sys-work > ol > li .sys-numeral {font-family:var(--tech-code); margin-bottom:.95rem}

.sys-diagram {
  margin:clamp(.875rem,2vw,1.85rem) 0 0; overflow:hidden; border-radius:5px;
  border:1px solid #d9dad1; background:var(--tech-paper);
}
.sys-diagram-1 {background:radial-gradient(ellipse at 52% 25%,#f9f7f0 0%,#eeede5 65%,#e8e9e0 100%)}
.sys-diagram-2 {background:radial-gradient(ellipse at 53% 36%,#f7f6ef 7%,#e9ebe3 82%)}
.sys-diagram-top {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.7rem 1.4rem; margin-inline:clamp(.85rem,2.25vw,2.4rem); padding-block:1.1rem;
  border-bottom:1px solid #b7b8ad;
}
.sys-diagram-top > span {
  font-family:var(--tech-code); text-transform:uppercase; font-size:.74rem; letter-spacing:.10em; color:var(--tech-copper);
}
.system-atlas .sys-diagram-top h3 {
  font-size:clamp(1rem,1.55vw,1.5rem)!important; line-height:1.25!important; font-weight:500; letter-spacing:-.025em; margin:0;
}
.sys-technical-art {display:block; inline-size:100%; height:auto; margin:0 auto}
.sys-technical-art .tech-frame {stroke:var(--tech-ink); stroke-width:1}
.sys-technical-art .tech-top {fill:#f7f7ef}
.sys-technical-art .tech-face {fill:#e3e4d9}
.sys-technical-art .tech-edge {fill:#d3d7ca}
.sys-technical-art .tech-grid {stroke:#8b958d; stroke-width:.65; opacity:.32}
.sys-technical-art .tech-guide {stroke:#747d72; stroke-dasharray:3 5; opacity:.52}
.sys-technical-art .tech-underlay {fill:#6668561d; stroke:none}
.sys-technical-art .tech-hatch {stroke:#818778; stroke-width:.6; opacity:.56}
.sys-technical-art .tech-trace {stroke:#7c847a; stroke-width:.8; stroke-dasharray:1 3.5}
.sys-technical-art .tech-dark {fill:#595f55; stroke-width:.75}
.sys-technical-art .tech-display {fill:#eef0e7; stroke-width:.8}
.sys-technical-art .tech-mark {fill:#b95a20; stroke:none}
.sys-technical-art .tech-glass {fill:#ccd4cc; stroke-width:.65}
.sys-technical-art .tech-sheet {fill:#fbf9f0; stroke-width:.8}
.sys-technical-art .tech-ghost {fill:#798678; fill-opacity:.09; stroke-width:.65; stroke-opacity:.48}
.sys-technical-art .tech-window {fill:#c4ccc1; stroke-width:.7}
.sys-technical-art .tech-lane {stroke:#f7f6ee; stroke-width:2; stroke-dasharray:10 6}
.sys-technical-art .tech-lane-mark {stroke:none; fill:#f7f6ee}
.sys-technical-art .tech-tracked {stroke:var(--tech-copper); stroke-dasharray:3 2; stroke-width:1.25}
.sys-technical-art .tech-hair {stroke:#777f76; stroke-width:.85; opacity:.72}
.sys-technical-art .tech-tinted {fill:#d98852; fill-opacity:.19; stroke:var(--tech-copper)}
.sys-technical-art .tech-pin {fill:#676e63; stroke:none}
.sys-technical-art .tech-signal {stroke:var(--tech-copper); stroke-width:1.65}
.sys-technical-art .tech-signal-fill {fill:var(--tech-copper); stroke:none}
.sys-technical-art .tech-module-icon {stroke:#4e5a52; stroke-width:1.4}
.sys-technical-art :is(.tech-index,.tech-label) {font:14px var(--tech-code); stroke:none; fill:#303631}
.sys-technical-art .tech-index {fill:var(--tech-copper)}
.sys-technical-art .tech-micro {font:9.2px var(--tech-code); stroke:none; fill:#4e574e}
.system-atlas .sys-diagram-legend {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1rem;
  margin:0; padding:.4rem clamp(.85rem,2.25vw,2.4rem) .9rem; list-style:none;
}
.system-atlas .sys-diagram-legend > li {
  display:flex; align-items:baseline; gap:.55rem;
  margin:0; padding:.45rem .65rem; border:1px solid #c8cac0; background:#fafaf370;
  font-size:clamp(.74rem,1.05vw,.875rem); line-height:1.3;
}
.sys-diagram-legend span {font-family:var(--tech-code); color:var(--tech-copper); font-size:.78em}
.system-atlas .sys-diagram-caption {
  margin:0 clamp(.85rem,2.25vw,2.4rem); padding:.9rem 0 1.15rem;
  border-top:1px solid #b7b8ad; color:#4c554d; font-size:clamp(.875rem,1.15vw,1rem); line-height:1.5;
}

.sys-example-layout {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"media copy"; align-items:start; gap:clamp(1.25rem,4vw,4.5rem);
  padding-block-start:clamp(1.25rem,2.75vw,2.75rem); border-top:1px solid var(--sys-rule);
}
.sys-example-copy {grid-area:copy}
.system-atlas .sys-example-copy h2 {margin:.75rem 0 1.1rem; font-size:clamp(2rem,3.4vw,3.65rem)!important}
.system-atlas .sys-example-copy p:not(.sys-kicker) {color:var(--sys-muted); max-width:51ch; line-height:1.55; font-size:clamp(1rem,1.35vw,1.15rem)}
.system-atlas .sys-example-layout .sys-figure {grid-area:media; padding:0; overflow:hidden; border-radius:4px}
.system-atlas .sys-example-layout .sys-figure figcaption {padding:1rem}
.system-atlas .sys-example-layout .sys-figure img {border:0}

@media(max-width:767px) {
  .system-atlas .sys-work > ol {gap:.55rem}
  .sys-example-layout {grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "media"}
  .system-atlas .sys-diagram-legend {justify-content:flex-start; gap:.5rem}
}
@media(max-width:640px) {
  .system-atlas {--sys-bar-height:4.45rem}
  .system-atlas .sys-anchors {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 .35rem; overflow:visible}
  .system-atlas .sys-anchors a {
    grid-column:span 2; min-height:2.2rem; padding-inline:.1rem;
    white-space:normal; text-align:center; line-height:1.12; font-size:clamp(.7rem,2.9vw,.78rem);
  }
  .system-atlas .sys-anchors a:nth-child(n+4) {grid-column:span 3}
  .sys-technical-art .tech-callout,.sys-technical-art .tech-label,.sys-technical-art .tech-micro {display:none}
  .sys-diagram-1 .sys-technical-art {inline-size:139%; max-inline-size:none; margin-inline:-19.5%}
  .sys-diagram-top {padding-block:.8rem}
}