body.informatics {
  --accent: #5865d8;
  --soft: #eef0ff;
  --gold: #d4a13f;
  --silver: #91a0b5;
  --bronze: #bc7d62;
}
body.informatics .mark {
  width: 48px;
  font: 800 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: -2px;
  background: linear-gradient(145deg,#6875ee,#3847b8);
  box-shadow: 0 9px 24px rgb(73 87 203 / 24%);
}
body.informatics .hero {
  background:
    radial-gradient(circle at 92% 28%,rgb(88 101 216 / 11%),transparent 25%),
    linear-gradient(90deg,transparent 0 93%,rgb(22 167 183 / 5%) 93% 94%,transparent 94%);
}
body.informatics .motif {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal;letter-spacing:-4px}
body.informatics.dark {--accent:#9aa3ff;--soft:#252b4d}
@media(max-width:640px){body.informatics .mark{width:40px;font-size:13px}}