/* SYNTH — black and gold. Gold has meant "verified" here since the first mark,
   so the accent is already carrying the product's meaning rather than a mood. */
:root[data-skin="synth"]{
  --bg:#07070a;--panel:#0f1014;--ink:#d9dde3;--muted:#8e959f;--line:#24262e;
  --accent:#d9a441;--accent-soft:#1c1710;--code:#101218;--warn:#c4483a;
  --g-root:#d9a441;--g-hosts:#6fa88c;--g-services:#c47a3a;--g-runbooks:#7f93b8;
  --g-meta:#7a7568;--g-decisions:#b06a8c;--g-scratch:#a89457;
  --edge:#2a2c34;--edge-similar:#1d1f26;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --scan:rgba(255,255,255,.018);
  color-scheme:dark;
}

/* MESH — phosphor terminal, and the default. Monochrome green by design, with
   amber reserved for fault, which is exactly how a Pip-Boy uses it. The typeface
   switches to mono because that is most of what makes a terminal read as a
   terminal.

   Declared on bare :root as well as on its own attribute: the attribute is what
   the picker sets, and the bare rule is what paints correctly before any script
   has run, or when storage is unavailable. Whichever skin is the default has to
   hold both. */
:root,
:root[data-skin="mesh"]{
  --bg:#050806;--panel:#0a0f0b;--ink:#b9f5d3;--muted:#4f9e74;--line:#17301f;
  --accent:#41e08a;--accent-soft:#0c2118;--code:#081008;--warn:#e0913a;
  --g-root:#41e08a;--g-hosts:#7ff0b0;--g-services:#e0913a;--g-runbooks:#2fbf74;
  --g-meta:#3f7a5c;--g-decisions:#a8f0c4;--g-scratch:#5fd49a;
  --edge:#1c3a28;--edge-similar:#122619;
  --font-ui:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --scan:rgba(65,224,138,.03);
  color-scheme:dark;
}

/* LAB — cold blue. Offered only where an instance asks for it, and the reason it
   exists is instance identity rather than taste: a private wiki and a public one
   that look alike are two wikis somebody will eventually confuse, and the cost of
   confusing them is writing something internal onto the open internet.

   Distinguished by hue, not by brightness. The first version of this was a light
   paper theme, which was certainly unmistakable and also glaring next to two dark
   skins — and a skin nobody wants to look at gets switched away from, which
   defeats the whole point of having it. Gold, green, blue: three accents nobody
   confuses at a glance, all comfortable to sit in. */
:root[data-skin="lab"]{
  --bg:#070b12;--panel:#0d131d;--ink:#c3d4ea;--muted:#6f88a8;--line:#1c2838;
  --accent:#4aa3ff;--accent-soft:#0d1c2e;--code:#0a1119;--warn:#e0913a;
  --g-root:#4aa3ff;--g-hosts:#5fd0c8;--g-services:#e0913a;--g-runbooks:#8d9bf0;
  --g-meta:#5a7391;--g-decisions:#c98bd8;--g-scratch:#7fb4e0;
  --edge:#1d3350;--edge-similar:#15202e;
  --font-ui:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --scan:rgba(74,163,255,.028);
  color-scheme:dark;
}

/* Scanlines, painted only where a skin asks for them. Fixed and inert so they
   never intercept a click. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(to bottom,var(--scan) 0 1px,transparent 1px 3px);
}

/* After TOKENS, so it wins: whichever skin this instance defaults to also has to
   hold bare :root, which is what paints before the boot script runs. Empty when
   the default is mesh, which already declares it. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header.top{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.wrap{max-width:900px;margin:0 auto;padding:0 22px}
header.top .wrap{display:flex;align-items:center;gap:16px;height:58px}
.brand{font-weight:650;letter-spacing:-.01em;color:var(--ink);font-size:16px;white-space:nowrap}
.brand span{color:var(--accent)}
form.search{flex:1;display:flex}
form.search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
form.search input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.nav{display:flex;align-items:center;gap:14px;font-size:14px;white-space:nowrap}

/* The five views that are *about* the wiki rather than its content live behind
   one disclosure. Built on <details> deliberately: it opens, closes, and takes
   the keyboard without a line of JavaScript, and it still works on a page where
   the script never loads — which for a nav is the difference between a tidy
   menu and an unreachable one. */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:'';border:4px solid transparent;border-top-color:currentColor;margin-top:3px}
.menu[open]>summary::after{transform:rotate(180deg);margin-top:-3px}
.menu>summary:hover{text-decoration:underline}
.menupanel{position:absolute;right:0;top:calc(100% + 9px);z-index:10;display:flex;flex-direction:column;min-width:170px;padding:6px;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.32)}
.menupanel a{padding:7px 10px;border-radius:7px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.menupanel a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.navnew{border:1px solid var(--line);border-radius:8px;padding:5px 12px;color:var(--ink)}
.navnew:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
main{padding:34px 0 80px}
h1{font-size:29px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:20px;margin:34px 0 10px;letter-spacing:-.01em}
h3{font-size:16px;margin:26px 0 8px}
.meta{color:var(--muted);font-size:13px;margin-bottom:26px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tag{display:inline-block;padding:1px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:550}
.tag.on{background:var(--accent);color:var(--bg)}
.chips .tag{padding:4px 12px;font-size:13px}
.prose{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 30px}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}
.prose code{background:var(--code);padding:1.5px 5px;border-radius:4px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{background:var(--code);padding:14px 16px;border-radius:9px;overflow-x:auto;border:1px solid var(--line)}
.prose pre code{background:none;padding:0}
/* A diagram is not a code listing. Before it renders it is a fenced block and
   looks like one; once mermaid replaces the text with an SVG the code chrome
   would frame a picture, so it is dropped at that point. */
.prose pre.mermaid{text-align:center;line-height:1.4}
.prose pre.mermaid[data-processed]{background:none;border:0;padding:6px 0}
.prose pre.mermaid svg{max-width:100%;height:auto}
/* A drawn diagram becomes a viewport you can move around inside. Until the
   script enhances it the block above still renders normally, so a diagram is
   readable with no JavaScript at all — it just does not move. */
.prose pre.mermaid.dgm{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0;margin:20px 0;touch-action:pan-y}
.prose pre.mermaid.dgm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dgm-view{overflow:hidden;cursor:grab;display:flex;align-items:center;justify-content:center;min-height:120px}
.dgm-view.grabbing{cursor:grabbing}
.dgm-pan{transform-origin:0 0;will-change:transform}
.prose pre.mermaid.dgm svg{max-width:none}
.dgm-bar{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s;z-index:2}
.prose pre.mermaid.dgm:hover .dgm-bar,.prose pre.mermaid.dgm:focus-within .dgm-bar{opacity:1}
/* Not font:inherit — these live inside a <pre>, and the glyphs have patchy
   coverage in monospace faces. */
.dgm-bar button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI Symbol,sans-serif;font-size:15px;line-height:1;cursor:pointer}
.dgm-bar button:hover{border-color:var(--accent);color:var(--accent)}
.dgm-zoom{position:absolute;bottom:8px;right:10px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s;pointer-events:none}
.prose pre.mermaid.dgm:hover .dgm-zoom,.prose pre.mermaid.dgm:focus-within .dgm-zoom{opacity:1}
.prose pre.mermaid.dgm:fullscreen{border-radius:0;border:0;background:var(--bg);display:flex;flex-direction:column}
.prose pre.mermaid.dgm:fullscreen .dgm-view{flex:1;min-height:0}
/* The toolbar is always visible on touch, where there is no hover to reveal it. */
@media (hover:none){.dgm-bar,.dgm-zoom{opacity:1}}
@media (prefers-reduced-motion:reduce){.dgm-bar,.dgm-zoom{transition:none}}
.prose blockquote{margin:0;padding:2px 16px;border-left:3px solid var(--line);color:var(--muted)}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:7px 11px;text-align:left}
.prose img{max-width:100%}
ul.pages{list-style:none;padding:0;margin:0;display:grid;gap:2px}
ul.pages li{padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:8px}
ul.pages .t{font-weight:600;display:flex;align-items:center;gap:8px}
ul.pages .s{color:var(--muted);font-size:13.5px;margin-top:3px}
ul.pages .k{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 28px}
/* Closed, the overflow is one more chip in the row. Open, it takes the full
   width and drops the rest underneath, so the row above does not reflow. */
.chipmore{display:inline-flex}
.chipmore[open]{flex:1 0 100%;display:block}
.chipmore summary{cursor:pointer;list-style:none;display:inline-block}
.chipmore summary::-webkit-details-marker{display:none}
.chipmore summary::marker{content:''}
.chipmore[open] summary{margin-bottom:4px}
.chips-rest{margin:8px 0 0}
.chips .tag.on{border-color:var(--accent);color:var(--accent)}
.chips .tag.clear{border-style:dashed;color:var(--muted)}
.histlink{margin-left:6px;padding:1px 6px;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);text-decoration:none}
.histlink:hover{border-color:var(--accent);color:var(--accent)}
.sepdot{margin:0 7px;color:var(--muted);opacity:.6}
.eyebrow{margin:0 0 2px;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
h1.subject{margin:0 0 6px;line-height:1.15}
h1.subject a{color:inherit;text-decoration:none}
h1.subject a:hover{color:var(--accent)}
table.timing{width:100%;border-collapse:collapse;margin:14px 0 26px;font-size:13px}
table.timing th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:0 10px 7px 0;border-bottom:1px solid var(--line)}
table.timing td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
table.timing td.n,table.timing th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
table.timing tr.slow td{color:var(--warn)}
table.timing tr.slow code{color:var(--warn)}
.btn{display:inline-block;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.btn:hover{text-decoration:none;border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--warn)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.editor{display:grid;gap:12px}
.editor input,.editor textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
.editor textarea{min-height:60vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.6;resize:vertical}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.empty{color:var(--muted);padding:40px 0;text-align:center}
.hint{color:var(--muted);font-size:13px}
.warn{border-left:3px solid var(--warn);background:var(--accent-soft);padding:10px 14px;border-radius:4px}
.votebar{margin:18px 0 4px}
.votebar .row{display:flex;align-items:center;gap:8px}
.votenote{width:100%;margin-top:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
.votenote:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.btn.vote{padding:2px 10px;font-size:15px;line-height:1.5}
.btn.vote.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.score{font-variant-numeric:tabular-nums;font-weight:600;min-width:2.2em;text-align:center}
.score.pos{color:var(--accent)}
.score.neg{color:var(--warn)}
.score.even{color:var(--muted)}
.pages .t .score{margin-left:8px;font-size:12.5px;font-weight:600}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.stat .k{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent)}
.trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.trends h3{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.spark{display:flex;align-items:flex-end;gap:2px;height:62px;background:var(--code);border:1px solid var(--line);border-radius:8px;padding:6px}
.spark i{flex:1;min-width:2px;background:var(--accent);opacity:.75;border-radius:1px}
.spark i:hover{opacity:1}
.freshbar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--code);border:1px solid var(--line)}
.freshbar span{display:block}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:baseline}
.f-fresh{background:var(--accent)}
.f-aging{background:var(--muted)}
.f-stale{background:var(--warn)}
.f-untracked{background:var(--line)}
.statlist{list-style:none;padding:0;margin:0;counter-reset:s}
.statlist li{counter-increment:s;display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.statlist li::before{content:counter(s);color:var(--muted);font-size:11px;min-width:1.4em;font-variant-numeric:tabular-nums}
.statlist li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statlist .n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}
.pagesize{margin:14px 0 0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
form.findform{display:flex;gap:8px;margin:16px 0 22px;flex-wrap:wrap}
form.findform input{flex:1 1 320px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
form.findform input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
form.findform button{padding:9px 18px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--bg);font:inherit;font-size:14px;cursor:pointer}
form.findform button:hover{filter:brightness(1.1)}
.throttle{color:var(--muted)}
.throttle.on{color:var(--warn);font-weight:600}

/* --- narrow screens -------------------------------------------------------
   The desktop header is one nowrap row: brand, a flexible search field, eight
   nav links and the skin picker. That is roughly twice a phone's width, and
   because .nav sets white-space:nowrap it cannot wrap out of trouble on its
   own — it just pushes the page sideways. Everything below is that problem and
   the handful of others that only show up under a thumb. */
@media (max-width:720px){
  /* Stacked, and no longer sticky: wrapped onto three rows this header is over
     a third of a phone screen, and a nav bar that follows you down a page you
     are trying to read is not worth that much of it. */
  header.top{position:static}
  header.top .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px 12px}
  .brand{order:1}
  .skins{order:2;margin-left:auto}
  form.search{order:3;flex:0 0 100%}
  .nav{order:4;flex:0 0 100%;flex-wrap:wrap;gap:6px 16px}
  .nav a{padding:5px 0}

  .wrap{padding:0 16px}
  main{padding:22px 0 60px}
  h1{font-size:24px}
  h2{font-size:18px;margin-top:26px}
  .prose{padding:18px 16px;border-radius:10px}

  /* A 78px creature floated beside a 24px heading leaves about eight characters
     of title. It stops floating and sits above the title instead. */
  .pagemascot{float:none;margin:0 0 10px}

  /* 16px is the threshold under which iOS zooms the viewport on focus — and it
     does not zoom back, so the reader is left scrolled sideways on a page that
     was fine a moment ago. No field here is worth that. */
  input,textarea,select{font-size:16px}

  /* Touch targets. 7px of padding is a 31px-high button, and the vote arrows
     were 2px, which is a target you aim at rather than press. */
  .btn{padding:10px 16px}
  .btn.vote{padding:8px 18px;font-size:17px}
  .skins button{padding:9px 12px}

  .statgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .trends{grid-template-columns:1fr}
  .votebar .row{flex-wrap:wrap}
  .meta{gap:8px}
  .rev{padding-left:14px}
}

/* Small phones. The stat tiles are the only thing that still crowds. */
@media (max-width:420px){
  .stat .v{font-size:20px}
  .prose{padding:16px 13px}
  .wrap{padding:0 13px}
}
pre.token{font-size:15px;letter-spacing:.02em;word-break:break-all;white-space:pre-wrap;user-select:all}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;padding:22px 0 30px;margin-top:48px}
footer code{font-family:ui-monospace,Menlo,monospace}
.foot-lead{margin:0 0 12px;color:var(--ink);font-size:13px}
/* A label and its links on one row, so the eye gets a heading rather than a
   run-on sentence of interpuncts. Wraps to its own line on a phone. */
.foot-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:6px}
.foot-links span{min-width:66px;color:var(--muted);opacity:.7;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--accent);text-decoration:none}
@media (max-width:720px){.foot-links span{min-width:100%}}
.missing{color:var(--warn)}
.prov{margin:18px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:12.5px;color:var(--muted)}
.prov-l b{color:var(--ink);font-weight:600}
.prov-l code{background:var(--code);padding:1px 5px;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.prov .model{display:inline-block;padding:0 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:550}
.prov-why{margin-top:6px;color:var(--ink);font-style:italic}
.prov-note{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;opacity:.85}
.talk{margin-top:34px}
.cmt{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:var(--panel)}
.cmt.resolved{opacity:.55}
.cmt-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:7px}
.kind{padding:1px 8px;border-radius:99px;font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase}
.k-note{background:var(--accent-soft);color:var(--accent)}
.k-question{background:#1e3a5f;color:#93c5fd}
.k-stale{background:#422006;color:#fcd34d}
.k-contradiction{background:#450a0a;color:#fca5a5}
.k-suggestion{background:#052e16;color:#86efac}
.cmt-b{font-size:14px;white-space:pre-wrap;line-height:1.6}
.cmt-b code{background:var(--code);padding:1px 5px;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:.9em}
.cmt-id{font-family:ui-monospace,Menlo,monospace;font-size:11px;opacity:.6}
.cmt-res{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.cmt-f{margin-left:auto;display:flex;gap:8px}
.mini{padding:3px 9px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:11.5px;cursor:pointer}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.newc{border:1px dashed var(--line);border-radius:10px;padding:13px 15px;margin-top:12px}
.newc textarea{width:100%;min-height:76px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;resize:vertical}
.newc select{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
.newc .row{margin-top:9px}
.badge{display:inline-block;padding:0 7px;border-radius:99px;background:var(--warn);color:#fff;font-size:11px;font-weight:650;margin-left:6px}
.rev{display:grid;grid-template-columns:auto 1fr;gap:0 14px;border-left:2px solid var(--line);padding:0 0 16px 16px;margin-left:6px;position:relative}
.rev::before{content:'';position:absolute;left:-6px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.rev.snap::before{background:var(--line)}
.rev .when{grid-column:1/-1;font-size:12px;color:var(--muted)}
.rev .who{grid-column:1/-1;margin-top:3px;font-size:13.5px}
.rev .who b{font-weight:620}
.rev .mdl{display:inline-block;padding:0 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:550}
.rev .why{grid-column:1/-1;margin-top:4px;font-size:13px;font-style:italic;color:var(--ink)}
.rev .meta2{grid-column:1/-1;margin-top:4px;font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.rev a.diff{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.patch{background:var(--code);border:1px solid var(--line);border-radius:9px;padding:13px 15px;overflow-x:auto;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.5;white-space:pre}
.patch .add{color:#86efac}
.patch .del{color:#fca5a5}
.patch .hunk{color:var(--accent)}
.str{float:right;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{display:inline-block;width:54px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}

.skins{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.skins button{
  border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;
  padding:5px 10px;cursor:pointer;border-right:1px solid var(--line);line-height:1.6;
}
.skins button:last-child{border-right:0}
.skins button:hover{color:var(--ink)}
.skins button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.skins button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}


.mk{display:none;width:22px;height:22px;flex:none;color:var(--accent);vertical-align:-5px}
:root:not([data-skin]) .mk-mesh{display:inline-block}
:root[data-skin="synth"] .mk-synth{display:inline-block}
:root[data-skin="mesh"] .mk-mesh{display:inline-block}
/* Without this the lab skin matches no rule and the header shows no mark at all,
   which is how a new skin silently loses the logo. */
:root[data-skin="lab"] .mk-lab{display:inline-block}
.brand{display:inline-flex;align-items:center;gap:8px}
/* The old rule painted the only span in .brand with the accent, back when that
   span was just the trailing full stop. The site name now lives in one. */
.brand .bn{color:var(--ink)}


.ms{display:none;width:150px;height:128px;color:var(--accent);opacity:.9}
:root:not([data-skin]) .ms-mesh{display:block}
:root[data-skin="synth"] .ms-synth{display:block}
:root[data-skin="mesh"] .ms-mesh{display:block}
.emptystate{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 0 30px;text-align:center}
.emptystate p{margin:0;color:var(--muted)}

/* The creature carries the page's own freshness. This is the whole reason these
   designs were picked over an owl: the iris stops down, the limbs go dashed, and
   the colour crosses to the warning tone — so a stale page looks stale before
   anyone reads a date. */
.msbox{display:inline-flex;flex:none;line-height:0}
.msbox .ms{width:var(--ms,64px);height:auto;opacity:1}
.ms-iris,.ms-limbs{transform-box:fill-box;transform-origin:center;transition:transform .35s ease,opacity .35s ease}
.msbox[data-state="aging"] .ms{color:var(--muted)}
.msbox[data-state="aging"] .ms-iris{transform:scale(.66)}
.msbox[data-state="aging"] .ms-limbs{opacity:.75}
.msbox[data-state="stale"] .ms{color:var(--warn)}
.msbox[data-state="stale"] .ms-iris{transform:scale(.34)}
.msbox[data-state="stale"] .ms-limbs{opacity:.5;stroke-dasharray:5 4}
.msbox[data-state="untracked"] .ms,.msbox[data-state="unknown"] .ms{color:var(--muted);opacity:.6}
.msbox[data-state="untracked"] .ms-iris{transform:scale(.8)}

/* A page's own portrait, beside its title. */
.pagemascot{float:right;margin:-6px 0 10px 18px}

/* The listing pip: the same idea reduced to one glyph, because emitting three
   full creatures per row would be a hundred kilobytes of SVG on the index. */
.pip{width:15px;height:15px;flex:none;color:var(--muted)}
.pip .o{fill:none;stroke:currentColor;stroke-width:2}
.pip .i{fill:currentColor}
li[data-state="fresh"] .pip,li[data-state="verified"] .pip{color:var(--accent)}
li[data-state="stale"] .pip{color:var(--warn)}
li[data-state="stale"] .pip .i{r:1.6}
li[data-state="aging"] .pip .i{r:2.8}
li[data-state="untracked"] .pip{opacity:.45}
li[data-state="untracked"] .pip .i{r:1.2}