/* ocorex: a repository page painted in the colours of the logo
   cobalt = the shirt, carrot = the print, brown = the coat,
   leaf = carrot tops and the RAM stick, gold = the earrings */

@font-face {
  font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap;
  src: url(/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap;
  src: url(/fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/atkinson-next-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/atkinson-next-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --paper: #f5f6fa;
  --sheet: #ffffff;
  --ink: #1d1b24;
  --ink-2: #4b4a5c;
  --line: #d8dbe8;
  --bar: #eceef6;
  --cobalt: #2b3a9e;
  --carrot: #ee7433;
  --carrot-ink: #1d1b24;
  --brown: #7a5a4e;
  --leaf: #3b8350;
  --gold: #b88512;
  --shirt: #24308a;
  --on-shirt: #f5f6fa;
  --focus: #2b3a9e;

  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sans: 'Atkinson Next', system-ui, sans-serif;
  --step: 22px;           /* distance between two lanes of the graph */
  --gutter: calc(var(--step) * var(--lanes, 5) + 18px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121845;
    --sheet: #18205a;
    --ink: #eef0fa;
    --ink-2: #b3b8da;
    --line: #2d3775;
    --bar: #1d2663;
    --cobalt: #9aa8ff;
    --carrot: #f58a4e;
    --brown: #c99d89;
    --leaf: #6cc283;
    --gold: #e8b93a;
    --shirt: #0d1236;
    --focus: #f58a4e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121845;
  --sheet: #18205a;
  --ink: #eef0fa;
  --ink-2: #b3b8da;
  --line: #2d3775;
  --bar: #1d2663;
  --cobalt: #9aa8ff;
  --carrot: #f58a4e;
  --brown: #c99d89;
  --leaf: #6cc283;
  --gold: #e8b93a;
  --shirt: #0d1236;
  --focus: #f58a4e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-kerning: normal;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; }
code, pre, .mono { font-family: var(--mono); }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--sheet); padding: 8px 12px; }

/* ---------- header: owner / repo, branch, tabs ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.who { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 500 14px/1 var(--mono); min-width: 0; }
.who img { border-radius: 50%; background: var(--bar); flex: none; }
.who .owner { color: var(--ink-2); }
.who .slash { color: var(--ink-2); }
.who .repo { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 var(--mono); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px 6px 8px;
}
.branch svg { width: 14px; height: 14px; }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a {
  font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none;
  padding: 10px 12px; border-radius: 6px;
}
.tabs a:hover { background: var(--bar); }
.theme {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.theme svg { width: 16px; height: 16px; }
.theme:hover { background: var(--bar); }

/* ---------- frames: every section is a "file" ---------- */
.frame { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--bar); border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  font: 500 13px/1.3 var(--mono); color: var(--ink-2);
}
.bar .file { color: var(--ink); font-weight: 600; }
.bar-meta { white-space: nowrap; }
.readme-frame .bar { justify-content: flex-start; gap: 18px; }

/* ---------- README / hero ---------- */
.readme { margin-top: 56px; }
.readme-frame { position: relative; --hw: min(44%, 470px); }
.readme-body {
  position: relative; z-index: 1;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) clamp(32px, 5vw, 60px);
  max-width: min(640px, calc(100% - var(--hw) + 16px));
}
.name {
  font-family: var(--mono);
  font-weight: 800;
  font-stretch: 112.5%;
  font-size: clamp(40px, 7.2vw, 84px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--cobalt);
}
.lede {
  margin: 22px 0 0;
  font: 700 clamp(22px, 2.6vw, 28px)/1.25 var(--sans);
}
.intro { margin: 14px 0 0; max-width: 34em; color: var(--ink-2); font-size: 18px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.horse {
  position: absolute; z-index: 2;
  right: clamp(-12px, 1vw, 24px);
  bottom: 0;
  width: var(--hw);
  pointer-events: none;
}
.horse img { width: 100%; filter: drop-shadow(0 18px 24px rgb(29 27 36 / .18)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px/1 var(--sans); text-decoration: none;
  padding: 11px 16px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-lg { font-size: 16px; padding: 14px 20px; }
.btn-carrot { background: var(--carrot); color: var(--carrot-ink); border-color: var(--carrot); }
.btn-carrot:hover { background: color-mix(in srgb, var(--carrot) 86%, var(--ink)); text-decoration: none; }
.btn-line { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- git log --graph ---------- */
.log-section { margin-top: 72px; }
.log-head { padding: 34px clamp(20px, 4vw, 40px) 8px calc(var(--gutter) + clamp(20px, 4vw, 40px) - 18px); }
.log-head h2 { font: 800 clamp(26px, 3.2vw, 34px)/1.15 var(--mono); font-stretch: 100%; letter-spacing: -0.02em; }
.log-head p { margin: 10px 0 0; color: var(--ink-2); max-width: 36em; }

.log {
  --lanes: 5;
  position: relative; list-style: none; margin: 0;
  padding: 18px clamp(20px, 4vw, 40px) 40px;
}
.lanes-1 { --lanes: 1; } .lanes-2 { --lanes: 2; } .lanes-3 { --lanes: 3; } .lanes-4 { --lanes: 4; }
.lanes-5 { --lanes: 5; } .lanes-6 { --lanes: 6; } .lanes-7 { --lanes: 7; } .lanes-8 { --lanes: 8; } .lanes-9 { --lanes: 9; }

.graph { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.graph path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.commit { position: relative; padding-left: var(--gutter); }
.commit + .commit { margin-top: 40px; }
.node {
  position: absolute; top: 6px;
  left: calc(var(--lane-x) - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c); border: 4px solid var(--sheet);
  box-shadow: 0 0 0 2px var(--c);
}
[data-head] .node, [data-root] .node { background: var(--sheet); border-width: 4px; box-shadow: 0 0 0 3px var(--c); }

.l0 { --lane-x: 9px; } .l1 { --lane-x: calc(9px + var(--step) * 1); } .l2 { --lane-x: calc(9px + var(--step) * 2); }
.l3 { --lane-x: calc(9px + var(--step) * 3); } .l4 { --lane-x: calc(9px + var(--step) * 4); } .l5 { --lane-x: calc(9px + var(--step) * 5); }
.l6 { --lane-x: calc(9px + var(--step) * 6); } .l7 { --lane-x: calc(9px + var(--step) * 7); } .l8 { --lane-x: calc(9px + var(--step) * 8); }

.c-cobalt { --c: var(--cobalt); } .c-carrot { --c: var(--carrot); } .c-gold { --c: var(--gold); }
.c-brown { --c: var(--brown); } .c-leaf { --c: var(--leaf); }
.graph .c-cobalt { stroke: var(--cobalt); } .graph .c-carrot { stroke: var(--carrot); } .graph .c-gold { stroke: var(--gold); }
.graph .c-brown { stroke: var(--brown); } .graph .c-leaf { stroke: var(--leaf); }

.commit-body { max-width: 760px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font: 500 13px/1.4 var(--mono); color: var(--ink-2); }
.sha { color: var(--gold); font-weight: 700; }
.ref { border-radius: 999px; padding: 3px 10px; border: 1.5px solid var(--c); color: var(--ink); white-space: nowrap; }
.ref-head { background: var(--cobalt); border-color: var(--cobalt); color: var(--sheet); font-weight: 700; }
.ref-root { border-style: dashed; }
.commit h3 { margin-top: 8px; font: 700 clamp(20px, 2.2vw, 24px)/1.25 var(--sans); }
.summary, .commit-body > p:not(.meta):not(.actions):not(.install) { margin: 8px 0 0; max-width: 40em; }
.points { margin: 14px 0 0; padding: 0; list-style: none; max-width: 42em; }
.points li { position: relative; padding-left: 22px; margin-top: 6px; color: var(--ink-2); }
.points li::before {
  content: '+'; position: absolute; left: 2px; top: 0;
  font: 700 15px/1.6 var(--mono); color: var(--leaf);
}
.install { margin: 14px 0 0; max-width: 42em; padding: 12px 14px; background: var(--bar); border-radius: 8px; font-size: 16px; }
.install b { font-weight: 700; }

.shots { display: grid; gap: 12px; margin-top: 18px; }
.shots.n2 { grid-template-columns: 1.6fr 1fr; align-items: start; }
.shots figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bar); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.file { font: 500 12.5px/1.3 var(--mono); color: var(--ink-2); margin-left: -8px; }
.link { font-weight: 700; }
.older .summary { color: var(--ink-2); }

/* ---------- FUNDING.yml: the shirt ---------- */
.funding {
  margin-top: 88px;
  background-color: var(--shirt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg transform='rotate(-28 30 30)'%3E%3Cpath d='M22 18c4-2 12-2 16 0l-5 32c-1 4-5 4-6 0z' fill='%23ee7433'/%3E%3Cpath d='M25 19l-5-9M30 18V7M35 19l5-9' stroke='%233b8350' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M26 28h6M27 36h5' stroke='%23b8551c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='rotate(-28 90 90)'%3E%3Cpath d='M82 78c4-2 12-2 16 0l-5 32c-1 4-5 4-6 0z' fill='%23ee7433'/%3E%3Cpath d='M85 79l-5-9M90 78V67M95 79l5-9' stroke='%233b8350' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M86 88h6M87 96h5' stroke='%23b8551c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  color: var(--on-shirt);
  padding: 88px 0;
}
.funding-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.funding .yml { background: var(--sheet); color: var(--ink); box-shadow: 0 22px 40px rgb(0 0 0 / .28); }
.yml pre { margin: 0; padding: 28px 22px 32px; font: 600 clamp(18px, 2.4vw, 26px)/1.3 var(--mono); overflow-x: auto; }
.yml .k { color: var(--cobalt); }
.yml .v { color: var(--carrot); }
:root:not([data-theme="dark"]) .yml .v { color: #c4561b; }
/* the text sits on a patch sewn onto the shirt: plain cloth, stitched edge */
.funding-text {
  background: var(--shirt); padding: 30px clamp(22px, 3vw, 38px) 34px; border-radius: 16px;
  border: 2px dashed rgb(245 246 250 / .45);
  box-shadow: 0 0 0 7px var(--shirt), 0 14px 30px 7px rgb(0 0 0 / .25);
}
.funding-text h2 { font: 800 clamp(28px, 3.6vw, 40px)/1.1 var(--mono); letter-spacing: -0.025em; color: #fff; }
.funding-text p { margin: 14px 0 0; font-size: 18px; max-width: 30em; }
.funding-text .btn { margin-top: 12px; }

/* ---------- git remote -v ---------- */
.foot { margin-top: 64px; margin-bottom: 48px; }
.remotes dl { margin: 0; padding: 18px 20px 22px; font: 500 14px/1.5 var(--mono); }
.remotes dl > div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.remotes dt { color: var(--ink-2); }
.remotes dd { margin: 0; overflow-wrap: anywhere; }
.remotes dd span { color: var(--ink-2); }
.fine { margin: 18px 4px 0; font-size: 14px; color: var(--ink-2); }

/* ---------- 404 ---------- */
.nf main { padding: 20vh 0; }
.nf-msg { font: 700 clamp(22px, 4vw, 36px)/1.2 var(--mono); color: var(--cobalt); margin: 0 0 12px; }

/* ---------- shared bits: header crumbs, refs, padding, commands, copy ---------- */
.who-home { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.who-home:hover .owner { color: var(--ink); }
a.repo { color: var(--ink); text-decoration: none; }
a.repo:hover { text-decoration: underline; }
.tabs a[aria-current="page"] { background: var(--bar); box-shadow: inset 0 -2px 0 var(--carrot); }
.bar > * { min-width: 0; }
.bar .file { overflow-wrap: anywhere; }
.ref { border-color: var(--c, var(--line)); }
.ref-tag { --c: var(--gold); }
.ref-private { display: inline-flex; align-items: center; gap: 4px; --c: var(--brown); color: var(--brown); font: 600 12px/1.4 var(--mono); }
.ref-private svg { width: 12px; height: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pad { padding: 18px 20px; }
.pad > :first-child { margin-top: 0; }
.pad > :last-child { margin-bottom: 0; }
.center { display: grid; place-items: center; background: var(--bar); }
.label { margin: 18px 0 6px; font: 600 12.5px/1.3 var(--mono); color: var(--ink-2); text-transform: lowercase; }
.label::before { content: '# '; color: var(--leaf); }
.cmd {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  background: var(--shirt); color: var(--on-shirt); border-radius: 8px;
  font: 500 13.5px/1.7 var(--mono);
}
.cmd i { color: var(--carrot); font-style: normal; }
pre.plain { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.6 var(--mono); }
code { font-size: .9em; }
:not(pre) > code { background: var(--bar); padding: 1px 5px; border-radius: 4px; }

.clone label { display: block; margin-bottom: 6px; font: 600 13px/1.3 var(--sans); }
.clone-row { display: flex; min-width: 0; }
.clone-row input {
  flex: 1; min-width: 0; padding: 8px 10px;
  font: 500 12.5px/1.3 var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px;
}
.copy {
  flex: none; display: grid; place-items: center; width: 38px;
  border: 1px solid var(--line); border-radius: 0 6px 6px 0; background: var(--bar); color: var(--ink); cursor: pointer;
}
.copy svg { width: 15px; height: 15px; }
.copy:hover { background: var(--line); }
.copy.copied { background: var(--leaf); border-color: var(--leaf); color: var(--sheet); }

/* ---------- ls -t ~/repos (home page) ---------- */
.ls-section { margin-top: 40px; }
.ls { list-style: none; margin: 0; padding: 6px 0; }
.ls li {
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline;
  padding: 10px 20px; border-top: 1px dashed var(--line);
}
.ls li:first-child { border-top: 0; }
.ls-name { font: 700 14.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.ls-desc { color: var(--ink-2); font-size: 15.5px; }
.ls-meta { display: flex; gap: 12px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); white-space: nowrap; }
.lang::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--carrot); }
.notes { margin-top: 8px; max-width: 42em; }

/* ---------- rendered Markdown (READMEs, release notes) ---------- */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1.4em 0 .5em; line-height: 1.25; }
.md h2 { font: 800 clamp(24px, 3vw, 30px)/1.15 var(--mono); letter-spacing: -0.02em; color: var(--cobalt); padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.md h3 { font: 700 21px/1.25 var(--sans); }
.md h4, .md h5, .md h6 { font: 700 17px/1.3 var(--sans); }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: .8em 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md li + li { margin-top: .25em; }
.md ul li::marker { color: var(--carrot); }
.md blockquote { padding: 2px 16px; border-left: 4px solid var(--gold); color: var(--ink-2); }
.md pre { padding: 14px 16px; overflow-x: auto; background: var(--bar); border-radius: 8px; font: 400 13.5px/1.6 var(--mono); }
.md pre code { font-size: inherit; }
.md img { border-radius: 6px; border: 1px solid var(--line); margin: .4em 0; }
.md hr { border: 0; border-top: 2px dashed var(--line); margin: 1.6em 0; }
.md-table { white-space: pre; }

/* ---------- repository pages ---------- */
.repo-main { margin-top: 32px; }
.repo-title { margin-bottom: 22px; }
.repo-title h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 800 clamp(22px, 3.4vw, 32px)/1.2 var(--mono); letter-spacing: -0.02em; }
.repo-title h1 a { color: var(--cobalt); text-decoration: none; }
.repo-title h1 a:first-child { color: var(--ink-2); font-weight: 500; }
.repo-title h1 a:hover { text-decoration: underline; }
.repo-title h1 > span { color: var(--ink-2); font-weight: 400; }
.repo-title h1 .ref-private { margin-left: 8px; }
.repo-title p { margin: 8px 0 0; color: var(--ink-2); max-width: 46em; }

.repo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.repo-col { display: grid; gap: 20px; min-width: 0; }
.repo-col:has(> .frame:only-child) { gap: 0; }
.repo-side { display: grid; gap: 20px; padding: 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; position: sticky; top: 76px; }
.facts { margin: 0; display: grid; gap: 2px; font: 500 13.5px/1.5 var(--mono); }
.facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 700; }
.side-rel .label { margin-top: 0; }
.side-rel a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--ink); }
.side-rel a:hover { color: var(--cobalt); }
.side-rel .ref { font: 600 12px/1.4 var(--mono); }

.repo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.repo-tools:empty { display: none; }
.repo-col > .repo-tools { margin-bottom: -8px; }
.crumbs { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font: 600 14px/1.4 var(--mono); }
.crumbs span { color: var(--ink-2); }
.crumbs b { font-weight: 700; }
.picker { position: relative; }
.picker summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  font: 600 13px/1 var(--mono); padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet);
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: '▾'; color: var(--ink-2); }
.picker svg { width: 14px; height: 14px; }
.picker ul {
  position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 320px; overflow: auto;
  list-style: none; margin: 0; padding: 6px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 30px rgb(0 0 0 / .14);
}
.picker li a { display: block; padding: 7px 10px; border-radius: 5px; font: 500 13px/1.3 var(--mono); color: var(--ink); text-decoration: none; }
.picker li a:hover { background: var(--bar); }
.picker li a[aria-current] { font-weight: 700; color: var(--cobalt); }
.picker li a[aria-current]::before { content: '* '; color: var(--leaf); }

.lastc { justify-content: flex-start; }
.lastc .sha { flex: none; text-decoration: none; }
.lastc .msg { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: 14.5px; }
.lastc time { flex: none; }
.lastc + .files, .lastc + .bar { border-radius: 0; }
.bar + .bar { border-radius: 0; }

.files { list-style: none; margin: 0; padding: 0; }
.files li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 16px; border-top: 1px solid var(--line); font: 500 14px/1.4 var(--mono);
}
.files li:first-child { border-top: 0; }
.files li:hover { background: color-mix(in srgb, var(--bar) 60%, transparent); }
.files li.up { grid-template-columns: 1fr; padding-left: 46px; }
.files a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.files a:hover { color: var(--cobalt); text-decoration: underline; }
.files small { color: var(--ink-2); }
.fi { display: grid; color: var(--ink-2); }
.fi svg { width: 16px; height: 16px; }
.fi-dir { color: var(--cobalt); }
.fsize { color: var(--ink-2); font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }

.readme-file .pad { padding: clamp(20px, 3vw, 32px); }

.file-bar { background: var(--sheet); }
.file-actions { display: flex; gap: 14px; }
.file-actions a { font-weight: 700; }
.code-wrap { overflow-x: auto; border-radius: 0 0 10px 10px; }
.code { counter-reset: ln; list-style: none; margin: 0; padding: 10px 0; font: 400 13.5px/1.65 var(--mono); min-width: max-content; }
.code li { counter-increment: ln; display: grid; grid-template-columns: 5ch auto; padding-right: 20px; }
.code li::before { content: counter(ln); padding-right: 14px; text-align: right; color: var(--ink-2); opacity: .6; user-select: none; }
.code li:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.code code { white-space: pre; font-size: inherit; background: none; padding: 0; border-radius: 0; }
.diff li { grid-template-columns: auto; padding-left: 16px; }
.diff li::before { content: none; }
.diff .add { background: color-mix(in srgb, var(--leaf) 16%, transparent); }
.diff .del { background: color-mix(in srgb, var(--carrot) 16%, transparent); }
.diff .hunk { color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 8%, transparent); }
.diff .dh { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
.diff .dh:first-child { margin-top: 0; border-top: 0; }
.diff .fh { color: var(--ink-2); }

.commit-subject { font: 700 clamp(20px, 2.4vw, 26px)/1.25 var(--sans); }
.pad .meta { margin-top: 12px; }
.pad .meta + .stat, .pad pre.plain + .meta { margin-top: 14px; }
.pad pre.plain { margin-top: 10px; color: var(--ink-2); }
.stat { list-style: none; margin: 16px 0 0; padding: 0; font: 500 13px/1.6 var(--mono); }
.stat li { display: grid; grid-template-columns: 6ch 6ch minmax(0, 1fr); gap: 8px; }
.stat code { overflow-wrap: anywhere; background: none; padding: 0; font-size: inherit; }
.plus { color: var(--leaf); font-weight: 700; }
.minus { color: var(--carrot); font-weight: 700; }

.log-commits { padding-top: 22px; padding-bottom: 26px; }
.log-commits .commit + .commit { margin-top: 18px; }
.log-commits .commit h3 { margin-top: 4px; font: 600 16.5px/1.35 var(--sans); }
.log-commits .commit h3 a { color: var(--ink); text-decoration: none; }
.log-commits .commit h3 a:hover { color: var(--cobalt); text-decoration: underline; }
.log-commits .sha { text-decoration: none; }
.pager { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0 20px 22px; }
.pager a { font: 700 14px/1 var(--sans); padding: 10px 16px; border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); text-decoration: none; }
.pager a:hover { background: var(--ink); color: var(--paper); }

.releases { display: grid; gap: 20px; }
.release .bar .file { display: inline-flex; align-items: center; gap: 6px; }
.release .bar svg { width: 14px; height: 14px; color: var(--gold); }
.release h2 { font: 800 clamp(22px, 2.8vw, 28px)/1.2 var(--mono); letter-spacing: -0.02em; }
.release .md { margin-top: 14px; max-width: 46em; }
.assets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.assets li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.assets li:first-child { border-top: 0; }
.assets a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.4 var(--mono); overflow-wrap: anywhere; }
.assets a svg { width: 16px; height: 16px; flex: none; }
.assets .fsize { margin-left: auto; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .readme-frame { --hw: min(40%, 340px); }
  .horse { right: -8px; }

  .funding-in { grid-template-columns: 1fr; }
  .shots.n2 { grid-template-columns: 1fr; }
  .shots.n2 figure:last-child { max-width: 420px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .tabs, .branch { display: none; }
  .theme { margin-left: auto; }
  .readme { margin-top: 28px; }
  .readme-frame { display: flex; flex-direction: column; }
  .readme-body { max-width: none; padding-top: 4px; }
  .horse {
    position: relative; order: -1; align-self: flex-end;
    width: 62%; right: auto; margin: -36px -6px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  }
  .horse img { filter: none; }
  .readme-frame .bar { order: -2; }
  .readme-frame .bar-meta { display: none; }
  :root { --step: 12px; }
  .intro { font-size: 17px; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
  .log { padding-left: 14px; padding-right: 16px; }
  .log-head { padding-left: 18px; padding-right: 18px; }
  .commit + .commit { margin-top: 32px; }
  .node { width: 14px; height: 14px; left: calc(var(--lane-x) - 7px); border-width: 3px; }
  .graph path { stroke-width: 3; }
  .file { margin-left: 0; flex-basis: 100%; }
  .funding { padding: 56px 0; }
  .remotes dl > div { grid-template-columns: 1fr; gap: 0; }

  .ls li { grid-template-columns: 1fr; padding: 12px 16px; }
  .ls-meta { flex-wrap: wrap; }
  .repo-main { margin-top: 20px; }
  .files li { padding: 9px 12px; gap: 10px; }
  .files li.up { padding-left: 40px; }
  .pad { padding: 16px; }
  .lastc time { display: none; }
  .code { font-size: 12.5px; }
  .code li { grid-template-columns: 4ch auto; }
  .stat li { grid-template-columns: 5ch 5ch minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .repo-grid { grid-template-columns: minmax(0, 1fr); }
  .repo-side { position: static; }
}

@media (prefers-reduced-motion: no-preference) {
  .graph.draw path { transition: stroke-dashoffset 1.4s cubic-bezier(.3, .6, .2, 1); }
}

/* extra pages written in the admin panel (/p/<slug>) */
.page-title { font: 800 clamp(30px, 4.4vw, 44px)/1.05 var(--mono); letter-spacing: -0.03em; color: var(--cobalt); margin: 0 0 .6em; }
.md img { max-width: 100%; height: auto; }