:root{--bg:#fdf7fa;--card:#fff;--text:#3b2f36;--muted:#9a8691;--accent:#d9628f;--soft:#fbe3ee;--border:#f1d5e2;--lav:#8a6fd0;--teal:#3f9c8c;--amber:#c08a2c;--sky:#4f8fc4;--field-shade:color-mix(in srgb,var(--accent) 12%,transparent);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#1b1519;--card:#241c21;--text:#f1e4ea;--muted:#a8919d;--accent:#f28bb5;--soft:#3a2531;--border:#3d2c36;--lav:#b6a4f0;--teal:#5fbfae;--amber:#e3b45f;--sky:#7fb3e0;--field-shade:color-mix(in srgb,#000 18%,transparent)}}
*{box-sizing:border-box}[hidden]{display:none!important}
html.js{scrollbar-width:none}html.js::-webkit-scrollbar{display:none}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:14px/1.6 ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;-webkit-font-smoothing:antialiased}
main{max-width:74rem;margin:0 auto;padding:2rem clamp(1rem,4vw,2.5rem)}
a{color:var(--accent)}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;cursor:pointer;border:0;padding:0;background:none;color:var(--muted)}
mark{background:var(--soft);color:var(--accent)}

/* the ribbon */
.bar{display:flex;align-items:stretch;border:1px solid var(--border);background:var(--card);min-height:2.1rem}
.bar>*{display:flex;align-items:center;padding:0 .8rem;border-right:1px solid var(--border);white-space:nowrap}
.bar .host{margin:0;background:var(--accent);color:var(--bg);font-weight:700;letter-spacing:-.01em;font-size:1.02rem}
.bar .face{display:block;line-height:2.1rem;color:var(--muted);font-size:.84rem;background:var(--soft)}
.bar .face a{color:var(--accent);text-decoration:none}.bar .face a:hover{text-decoration:underline}
.bar .sp{flex:1;padding:0;border-right:0}
.pulse{align-items:flex-end;gap:1px;padding:.35rem .7rem 0}
.pulse i{flex:none;width:3px;background:var(--accent);opacity:.75}
.pulse i.z{height:1px;background:var(--border);opacity:1}
.pulse i:hover{opacity:1;background:var(--text)}
.bar .search{border:1px solid var(--border);margin:3px;padding:0 .3rem 0 .5rem;gap:.45rem;color:var(--muted);font-size:.84rem;cursor:text;background:var(--card);box-shadow:inset 0 1px 0 var(--field-shade)}
.search .mg{flex:none;width:1em;height:1em}
.search input{font:inherit;color:var(--text);background:none;border:0;outline:none;width:10rem;cursor:text}
.search input::placeholder{color:var(--muted);opacity:.85}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{flex:none;font:inherit;font-size:.8em;line-height:1;padding:.12rem .35rem;border:1px solid var(--border);color:var(--muted);background:var(--card)}
.search:focus-within kbd,.search:has(input:not(:placeholder-shown)) kbd{visibility:hidden}
.bar .search:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.bar .search:focus-within{border-color:var(--accent);color:var(--accent)}
@supports (corner-shape:bevel){
.bar{border-top-left-radius:7px;border-bottom-right-radius:7px;corner-shape:bevel;overflow:clip}
.bar .search{border-bottom-right-radius:4px;corner-shape:bevel}}
@supports not (corner-shape:bevel){
.bar{position:relative;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bar::before,.bar::after{content:"";position:absolute;z-index:6;width:7px;height:7px;pointer-events:none}
.bar::before{left:-1px;top:-1px;background:linear-gradient(to bottom right,transparent 50%,var(--border) 0 calc(50% + 1.3px),transparent 0)}
.bar::after{right:-1px;bottom:-1px;background:linear-gradient(to top left,transparent 50%,var(--border) 0 calc(50% + 1.3px),transparent 0)}
.bar .search{position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}
.bar .search::after{content:"";position:absolute;right:-1px;bottom:-1px;width:4px;height:4px;pointer-events:none;background:linear-gradient(to top left,transparent 50%,var(--sfl,var(--border)) 0 calc(50% + 1.3px),transparent 0)}
.bar .search:hover{--sfl:color-mix(in srgb,var(--accent) 45%,var(--border))}
.bar .search:focus-within{--sfl:var(--accent)}}

/* people, two columns */
#people{display:flex;gap:3.5rem;align-items:flex-start;margin-top:1.6rem}
#people,#commons,main>footer,#empty{padding-left:1.25rem;padding-right:1.25rem}
.mc{flex:1 1 0;min-width:0}
.person{margin:0 0 1.9rem}
.u-chk{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.ph{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--border);font-size:.86rem}
.ph a{padding:0 .55rem;background:color-mix(in srgb,var(--line) 16%,var(--card));color:var(--line);font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ph a:hover{background:var(--line);color:var(--bg)}
.ph span{flex:none;padding:0 .5rem;color:var(--muted);border-left:1px solid var(--border);background:var(--card)}
.ph span:first-child{border-left:0;background:var(--soft);color:var(--accent);font-weight:700}

/* rows hang off the owner's branch line */
.repos{margin:.3rem 0 0 .35rem;position:relative}
.repos li{position:relative;padding:.16rem 0 .16rem 1.5rem}
.repos li:hover,.repos li:focus-within{z-index:20}
.repos li::before{content:"";position:absolute;left:.35rem;top:0;bottom:0;border-left:1px solid var(--line,var(--accent));opacity:.45}
.repos li::after{content:"";position:absolute;left:.35rem;top:calc(.16rem + .8em);width:.75rem;border-top:1px solid var(--line,var(--accent));opacity:.45}
.repos li:last-child::before,.repos li.last::before,main:not(.searching) .u-chk:not(:checked)~.repos li.fold-last::before{bottom:auto;height:calc(.16rem + .8em)}
.commons li{--line:var(--accent)}
.row{position:relative;display:flex;align-items:baseline;gap:.5rem;min-width:0}
.own{flex:none;color:var(--line)}
.repos a{color:var(--text);text-decoration:none;white-space:nowrap}.repos a:hover{color:var(--accent)}
.desc{color:var(--muted);font-size:.8rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.age{flex:none;margin-left:auto;font-size:.74rem;color:var(--muted);padding-left:.4rem}
.pop{position:absolute;left:1.5rem;top:calc(100% + .1rem);z-index:30;max-width:min(26rem,calc(100vw - 3rem));padding:.42rem .65rem;background:var(--card);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--line,var(--accent));font-size:.78rem;line-height:1.45;white-space:normal;pointer-events:none;opacity:0;transition:opacity .12s}
.repos li:hover .pop,.repos li:focus-within .pop{opacity:1}
.clone{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:.8rem;opacity:0;padding:0 .3rem 0 .4rem;border:1px solid transparent;background:var(--bg);transition:opacity .12s}
.clone svg{display:block;width:1.05em;height:1.05em}
.repos li:hover .clone,.repos li:focus-within .clone{opacity:.8}
.clone:hover{color:var(--accent);border-color:var(--border);opacity:1}
.repos li:hover .age,.repos li:focus-within .age{visibility:hidden}

/* the fold: a faint line and a dither band from the branch line to the ages */
main:not(.searching) .u-chk:not(:checked)~.repos li.more{display:none}
.repos.folds{padding-bottom:12px}
.repos.folds::before{content:"";position:absolute;left:.35rem;right:0;bottom:0;height:1px;background:var(--border);pointer-events:none}
.repos.folds::after{content:"";position:absolute;left:.35rem;right:0;bottom:0;height:12px;background:color-mix(in srgb,var(--line,var(--accent)) 55%,var(--border));-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%2212%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E") 0 0/8px 12px repeat-x;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%2212%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E") 0 0/8px 12px repeat-x;pointer-events:none}
.u-chk:checked~.repos.folds{padding-bottom:0}
.u-chk:checked~.repos.folds::before,.u-chk:checked~.repos.folds::after,main.searching .repos.folds::before,main.searching .repos.folds::after{display:none}
main.searching .repos.folds{padding-bottom:0}
.unwind{display:inline-flex;cursor:pointer;margin:.3rem 0 0 1.85rem;font-size:.78rem;color:var(--line,var(--accent));user-select:none}
.unwind:hover{text-decoration:underline}
.u-chk:checked~.unwind .a,.u-chk:not(:checked)~.unwind .b,main.searching .unwind{display:none}

/* the commons: everyone with a repo or two, in one band */
#commons{margin-top:.6rem}
#commons .repos{columns:2;column-gap:3.85rem}
#commons .repos li{break-inside:avoid}
#commons .row{overflow:hidden}
#commons .repos a{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 0 auto;max-width:62%}
#commons .desc{flex:1 1 0}

#empty{color:var(--muted);margin:1rem 0}
footer{margin-top:1rem;font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between}

/* the page's own scrollbar, drawn over the page */
#th{position:fixed;right:2px;width:3px;background:color-mix(in srgb,var(--text) 22%,var(--border));opacity:0;transition:opacity .25s,width .12s;z-index:60}
#th.on{opacity:1}#th:hover,#th.drag{width:5px;background:var(--accent);opacity:1}

@media (hover:none){.pop{display:none}}
@media (max-width:640px){
main{padding:1.2rem .8rem}
#people{flex-direction:column;align-items:stretch;gap:0}
.mc{display:contents}
#people,#commons,main>footer,#empty{padding-left:0;padding-right:0}
#commons .repos{columns:1}
.bar{flex-wrap:wrap}
.bar .face{order:3;width:100%;border-top:1px solid var(--border);border-right:0;padding:.2rem .8rem;line-height:1.6}
.bar .pulse{order:4;width:100%;border-right:0;border-top:1px solid var(--border);padding:.3rem .8rem 0;height:1.6rem}
.pulse i{flex:1 1 0}
.bar .sp{display:none}
.bar .search{flex:1;min-width:0}
.search input{width:100%;min-width:0}
.search kbd{display:none}
.repos li .age{visibility:visible!important}
.clone{position:static;transform:none;background:none;padding:0;opacity:.6}
.repos.folds::before,.repos.folds::after{right:var(--cw,0)}}
