/* INK */

.tk-comment { color: var(--dim); }
.tk-punctuation { color: var(--dim); }
.tk-keyword { color: var(--accent); }
.tk-string { color: color-mix(in srgb, var(--ink-green) var(--mix), var(--fg)); }
.tk-string-expression { color: color-mix(in srgb, var(--ink-green) var(--mix), var(--fg)); }
.tk-constant { color: color-mix(in srgb, var(--ink-orange) var(--mix), var(--fg)); }
.tk-function { color: color-mix(in srgb, var(--ink-blue) var(--mix), var(--fg)); }
.tk-parameter { color: color-mix(in srgb, var(--ink-yellow) var(--mix), var(--fg)); }
.tk-link { color: var(--accent); }
.tk-inserted { color: color-mix(in srgb, var(--ink-green) var(--mix), var(--fg)); }
.tk-deleted { color: color-mix(in srgb, var(--ink-pink) var(--mix), var(--fg)); }
.tk-changed { color: color-mix(in srgb, var(--ink-yellow) var(--mix), var(--fg)); }

/* FACE */

.tk-bold { font-weight: 650; }
.tk-italic { font-style: italic; }
.tk-underline { text-decoration: underline; }

/* PATH */

.bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; font: 13px/1.7 var(--mono); padding-bottom: var(--s3); border-bottom: var(--hair); }
.bar .sep { color: var(--dim); padding: 0 var(--s1); }
.bar .tools { color: var(--dim); }
.bar b { font-weight: 600; }

/* FILES */

.files { --font-size: 1.05rem; list-style: none; margin: var(--s5) 0 0; padding: 0; border: var(--hair); border-radius: var(--r2); overflow: hidden; }
.files li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); font: 14px/1.6 var(--mono); border-top: var(--hair); }
.files li:first-child { border-top: 0; }
.files li a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li .n { margin-left: auto; color: var(--dim); font-size: 12px; }
.files .ico { flex: none; width: 1.05rem; text-align: center; color: var(--dim); }
.files .ico::before { content: "/"; }
.readme { margin-top: var(--s6); max-width: var(--read); }

/* CODE */

.code { margin-top: var(--s5); border: var(--hair); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.code pre { margin: 0; padding: var(--s4) 0; overflow-x: auto; background: none; border: 0; }
.code code { font: 13px/1.7 var(--mono); }
.code.plain pre { padding: var(--s4); }
.code .line { display: block; }
.code .line .n { display: inline-block; box-sizing: content-box; width: 5ch; padding: 0 var(--s4) 0 var(--s3); text-align: right; color: var(--dim); text-decoration: none; user-select: none; }
.code .line .t { padding-right: var(--s4); }
.code .line:target { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.code .line:target .n { color: var(--accent); }

/* GUTTER */

.code.d2 .line .n { width: 2ch; }
.code.d3 .line .n { width: 3ch; }
.code.d4 .line .n { width: 4ch; }
.code.d5 .line .n { width: 5ch; }
.code.d6 .line .n { width: 6ch; }

/* BLOB */

.shot { margin: var(--s5) 0 0; }
.shot img { max-width: 100%; height: auto; display: block; border: var(--hair); border-radius: var(--r2); background: var(--art); }
.doc { display: block; width: 100%; height: 80vh; margin-top: var(--s5); border: var(--hair); border-radius: var(--r2); }

@media print {
  .code .line .n { display: none; }
}