.cirru-color .whitespace {}
.cirru-color .func {
    color: hsl(200, 70%, 36%);
}
.cirru-color .keyword {
    color: hsl(220, 60%, 74%);
}
.cirru-color .number {
    color: hsl(340, 100%, 60%);
}
.cirru-color .string {
    color: hsl(50, 30%, 50%);
}
.cirru-color .para {
    color: hsl(0, 0%, 60%);
}
.cirru-color .punc {
    color: hsl(340, 100%, 58%);
}
.cirru-color .string-text {
    color: hsl(60, 41%, 61%);
}
.cirru-color .escape {
    color: hsl(320, 90%, 60%);
}
.cirru-color .escape-text {
    color: red;
}
.cirru-color .indentation {
    border-left: 1px solid #f2f2f2;
}
@font-face {
  font-family: Federo;
  src: url('https://cos-sh.tiye.me/calcit-lang/calcit-lang.org/assets/Federo-Regular-DMrca4kD.ttf');
}

.tile {
  background-image: url('https://cos-sh.tiye.me/calcit-lang/calcit-lang.org/assets/calcit-tile-BFaWHToZ.png');
  background-size: 163px 395px;
}

.md-block .md-p {
  font-size: 16px;
  margin: 24px 0px;
  line-height: 25px;
}

/* override style */
div.md-block div[data-comp="comp-snippet"] {
  margin-top: 16px;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 72px; }
html { color-scheme: light; }
body { background-color: #eaf1ff; color: #1a2240; }
.tile { background-image: none !important; }

/* code blocks keep a solid backdrop above the shader background */
[data-comp="comp-snippet"], [data-comp="comp-cirru-snippet"] {
  background-color: #f8faff;
  border: 1px solid #d3e0ff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(60, 90, 200, 0.06);
}
[data-comp="comp-snippet"], [data-comp="comp-cirru-snippet"] { max-width: 100%; min-width: 0; overflow-x: auto; box-sizing: border-box; }
@media (max-width: 640px) {
  [data-comp="comp-nav"] { flex-wrap: nowrap !important; }
  [data-comp="comp-nav"] > div:last-child { flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; min-width: 0; }
}