.system-intro {
  color: #f1f6ff;
  background: #0a1425;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.system-heading { max-width: 62rem; margin: 0 auto 2rem; text-align: center; }
.system-heading h2 { font-size: clamp(2rem, 5vw, 4.5rem); }
.system-heading p { margin: .9rem auto 0; color: #bdcce0; font-size: 1.08rem; }
.system-preview { max-width: 66rem; margin-inline: auto; }
.system-preview img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid #557295;
  box-shadow: 0 28px 68px #02061185;
}
.system-preview figcaption { color: #aebed5; text-align: right; }
.system-layers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; gap: 1rem; margin: 2.3rem 0 1.4rem;
}
.system-card {
  min-width: 0; padding: clamp(1rem, 2vw, 1.6rem);
  border: 1px solid #354a67; border-radius: 16px;
  background: #101f34;
}
.system-card-art {
  display: grid; place-items: center; height: 6.5rem; margin-bottom: 1.15rem;
  border-radius: 10px; color: #f6c89f;
  background: linear-gradient(145deg, #233b5c, #131f34 64%, #382b30);
}
.system-card-art span { display: block; }
.system-card--kernel .system-card-art span {
  width: 2.6rem; height: 2.6rem; border: 2px solid currentColor; border-radius: .38rem;
  background: #19263a; box-shadow: inset 0 0 0 .42rem #19263a, inset 0 0 0 .51rem #e4b088;
}
.system-card--language .system-card-art span { font: 600 2rem/1 Consolas, monospace; }
.system-card--components .system-card-art span {
  width: 2.1rem; height: 2.1rem; transform: rotate(45deg);
  border: 2px solid currentColor; border-radius: .25rem; background: #19263a;
  box-shadow: .35rem .35rem 0 -.1rem #19263a, .42rem .42rem 0 #c79676;
}

.system-card--hub .system-card-art span {
  width: 1rem; height: 1rem; border: 2px solid currentColor; border-radius: .22rem;
  transform: translate(-.65rem,-.65rem);
  box-shadow: 1.3rem 0 0 #e4b088, 0 1.3rem 0 #e4b088, 1.3rem 1.3rem 0 #e4b088;
}
.system-card--scene .system-card-art span {
  width: 3rem; height: 2rem; border: 2px solid currentColor; border-radius: .3rem;
  box-shadow: 0 .35rem 0 -.1rem #131f34, 0 .52rem 0 -.1rem #e4b088;
}
.system-card--recovery .system-card-art span {
  width: 1.9rem; height: 1.9rem; border: 2px solid currentColor; border-radius: .3rem;
  transform: translate(-.48rem,-.32rem);
  box-shadow: .64rem .52rem 0 -.12rem #19263a, .76rem .64rem 0 -.12rem #e4b088;
}

.system-card h3 { font-size: clamp(1.18rem, 2vw, 1.5rem); text-wrap: wrap; }
.system-card p { color: #bdcce0; margin: .55rem 0 .85rem; }

.system-intro a { color: #a9d3ff; }
.system-intro a:hover { color: white; }
.system-intro :focus-visible { outline: 2px solid #a9d3ff; outline-offset: 4px; }
@media (max-width: 680px) {
  .system-heading { text-align: left; }
  .system-layers { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (min-width: 901px) {
  .system-intro { height: 100dvh; padding-block: 0; overflow: auto; }
  .system-layout {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(5rem, 1fr) auto;
    gap: clamp(.5rem, 1.4dvh, 1rem);
    padding-block: clamp(.65rem, 2.3dvh, 1.7rem);
  }
  .system-heading { margin: 0 auto; }
  .system-heading h2 { font-size: clamp(1.65rem, 4.4dvh, 3.4rem); }
  .system-heading p { margin-top: .3rem; font-size: clamp(.88rem, 1.8dvh, 1.08rem); }
  .system-preview {
    width: 100%; min-height: 0;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center; container-type: size;
  }
  .system-preview img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  .system-preview figcaption { margin-top: .2rem; font-size: .78rem; }
  .system-layers { gap: clamp(.4rem, 1.15dvh, .9rem); margin: 0; }
  .system-card { padding: clamp(.48rem, 1.35dvh, 1rem); border-radius: 12px; }
  .system-card-art { height: clamp(1.5rem, 4.6dvh, 3.5rem); margin-bottom: .35rem; }
  .system-card-art span { scale: .58; }
  .system-card h3 { font-size: clamp(.96rem, 1.9dvh, 1.2rem); }
  .system-card p { font-size: .88rem; line-height: 1.35; margin: .28rem 0 0; }
}
@media (min-width: 901px) and (max-height: 670px) {
  .system-card { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .55rem; align-content: start; }
  .system-card-art { grid-row: span 2; height: 2.25rem; margin: 0; }
  .system-card-art span { scale: .42; }
}