/* The Learning Machine — tokens and shared parts.
   One meaning per colour: green is the machine's own voice and current state,
   amber is somewhere you can go. Everything structural is greyscale and earns
   its weight from contrast and rule thickness. */

:root {
  color-scheme: dark;
  --band: 96px;   /* between one command and the last thing the one above it said */
  --green:    #7ee787;   /* the machine's voice, current state */
  --amber:    #e3b341;   /* you can go there */
  --bright:   #f4f8fb;
  --heading:  #f2f6fa;
  --heading2: #e8edf2;
  --body:     #cdd4da;
  --quiet:    #8b95a0;   /* margin notes, descriptions, stderr */
  --meta:     #6a747e;   /* labels, counts, units */
  --dim:      #4d5761;
  --dimmer:   #414b55;
  --faint:    #3a434c;
  --rule:     #1f252c;
  --hairline: #161b21;
  --panel:    #0d1116;
  --ground:   #0b0d10;
  --border:   #232a32;
  --border-2: #2a323a;

  /* platform marks are their own axis and override the above */
  --x:        #ffffff;
  --linkedin: #70b5f9;
  --github:   #f0f6fc;
  --rss:      #ff6600;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;

  --measure: 700px;
  --gutter:  236px;
  --margin:  304px;
  --gap:     40px;
  --page:    1320px;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--body);
  font: 300 18.5px/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; transition: color 120ms linear; }
a:hover { color: #f6d585; }
::selection { background: rgba(227,179,65,.25); }
/* the editor's container is the outer contenteditable, so the browser wants to ring
   the whole document in a focus outline the moment a caret lands anywhere in it */
#doc:focus, #doc:focus-visible { outline: none; }

/* ── the kernel ring buffer: the social feed ─────────────────────────────── */
.ticker {
  display: flex; align-items: center; height: 34px; overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid #1b2027; background: #090b0e;
  font: 400 11.5px/34px var(--mono);
}
/* it scrolls because it is a follow tail, and because a bar that clips its second
   entry is a feed you cannot read -- on a phone it clipped both */
.ticker__win { flex: 1; min-width: 0; overflow: hidden; }
/* the duration follows the content, so the speed is the same however much there is */
.ticker__track { display: flex; width: max-content;
                 animation: tick var(--dur, 40s) linear infinite; }
.ticker__run { display: flex; align-items: center; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* no motion, but the whole feed still has to be reachable */
  .ticker__track { animation: none; }
  .ticker__win { overflow-x: auto; }
}
.ticker__cmd { flex: none; padding: 0 14px; color: var(--meta); }
.ticker__t { color: var(--dimmer); }
.ticker__mark { color: var(--x); }
.ticker__mark--in { color: var(--linkedin); }
.ticker__text { color: #a9b2bb; }
/* the entry is a link to the post. The bar pauses under the cursor, which is what
   makes a moving target clickable at all. */
.ticker__item { text-decoration: none; }
.ticker__item:hover .ticker__text { color: #eef2f6; }
.ticker__item:hover .ticker__t { color: var(--meta); }
.ticker__item:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }

/* ── masthead ────────────────────────────────────────────────────────────── */
.wrap { width: var(--page); margin: 0 auto; }
.masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 40px;
  padding: 22px 0 14px;
}
/* the prompt is the way home from anywhere -- it is on every page already */
.prompt { display: inline-block; font: 700 18px/1 var(--mono); letter-spacing: -.01em;
          color: #eef2f6; text-decoration: none; }
/* two links: the home, and the directory's listing -- each lights on its own */
.prompt a { color: inherit; text-decoration: none; }
.prompt__home:hover, .prompt__home:focus-visible { color: #eef2f6; outline: none; }
a.prompt__cwd:hover, a.prompt__cwd:focus-visible { color: #9aa4ae; outline: none; }
.prompt__host { color: var(--green); }
.prompt__cwd  { color: var(--meta); }
.prompt__sig  { color: var(--green); }
.prompt__sig--write { color: var(--amber); }
.masthead__tools { display: flex; align-items: center; gap: 18px; font: 400 12.5px/1 var(--mono); color: #9aa4ae; }
.chip { padding: 7px 11px; border: 1px solid var(--border); color: #9aa4ae; cursor: pointer; }
/* a chip that is a <button> -- archive, delete -- looks like the chips that are links,
   not like the browser's grey button */
button.chip { background: none; font: 400 12.5px/1 var(--mono); }
.chip--mode { color: var(--green); }
.chip--private { color: var(--meta); }
.btn { padding: 9px 15px; font: 700 12.5px/1 var(--mono); border: 0; cursor: pointer; }
.btn--subscribe { background: var(--green); color: var(--ground); }
.btn--publish   { background: var(--amber); color: var(--ground); }
.apropos { display: inline-flex; align-items: center; gap: 6px; color: var(--meta);
           transition: color 120ms linear; }
.apropos:hover, .apropos:focus-visible { color: var(--amber); }

/* ── df -h, one line: the navigation on every interior page ──────────────── */
.df {
  display: flex; align-items: center; gap: 26px;
  padding: 10px 0; border-top: 1px solid #1b2027; border-bottom: 1px solid #1b2027;
  font: 400 12.5px/1 var(--mono);
}
.df__cmd { flex: none; color: #9aa4ae; white-space: nowrap; }
.df__cmd .u { color: var(--dim); }
.df__vols { display: flex; align-items: center; gap: 22px; }
.df__vol { color: var(--amber); }
.df__n { color: var(--dimmer); }
.df__n--none { color: #333c45; }
.df__vol--here { display: inline-flex; align-items: center; gap: 7px; color: var(--bright); }
.df__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.df__vol--here .df__n { color: var(--dim); }

/* ── what a piece is: a file, said the way the rest of the site says it ─────
   It was a man page's NAME(7) line, which said the title twice -- once truncated
   and shouted, once properly -- and a section number three of five volumes shared. */
.fileline {
  display: flex; flex-direction: column; gap: 7px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  font: 500 11.5px/1 var(--mono); color: var(--meta);
}
.fileline__path { color: #9aa4ae; }
.fileline__path .fileline__dir { color: var(--dim); }
.fileline__stat { display: flex; flex-wrap: wrap; gap: 18px; color: var(--dim); }
.fileline__mode { color: var(--meta); }
.fileline__mode--private { color: var(--amber); }
/* the name and the tools share the top row; on a narrow screen the tools drop below */
.fileline__top { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px 16px; flex-wrap: wrap; }
.fileline__file { color: inherit; border-bottom: 1px dotted var(--border-2); }
.fileline__file:hover { color: var(--amber); border-bottom-color: var(--amber); }
.fileline__tools { display: flex; align-items: center; gap: 8px; }
/* They are controls, and have to read as ones: a panel, a border that shows, body-
   coloured words and an amber mark -- amber being the site's "you can do something
   here". As quiet chips they faded into the line and nobody could tell they did
   anything. */
.tool { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
        background: var(--panel); border: 1px solid #36404a; color: var(--body);
        font: 500 11.5px/1 var(--mono); cursor: pointer;
        transition: color .12s, border-color .12s, background .12s; }
.tool .tool__ico { color: var(--amber); flex: none; }
.tool:hover, .tool:focus-visible { color: var(--bright); border-color: var(--amber);
                                   background: #141a21; outline: none; }
.mdmenu__more { color: var(--amber); }
.mdmenu__more[aria-expanded="true"] { border-color: var(--amber); background: #141a21; }
.chip--on, .chip--on:hover { color: var(--green); border-color: #3d6b47; }
.chip--on .tool__ico { color: var(--green); }
.mdmenu { position: relative; display: inline-flex; }
.mdmenu__more { margin-left: -1px; padding: 7px 8px; }
.mdmenu .tool:hover, .mdmenu .tool:focus-visible, .mdmenu__more[aria-expanded="true"] { position: relative; z-index: 1; }
.mdmenu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 292px;
                display: flex; flex-direction: column; padding: 5px;
                background: var(--panel); border: 1px solid var(--border-2);
                box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.mdmenu__list[hidden] { display: none; }
/* on a phone the tools wrap to the left edge, so the menu opens rightward from it */
@media (max-width: 860px) {
  .mdmenu__list { right: auto; left: 0; width: min(292px, calc(100vw - 32px)); }
}
.mdmenu__item { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px;
                background: none; border: 0; text-align: left; cursor: pointer; }
.mdmenu__item:hover, .mdmenu__item:focus-visible { background: #141a21; outline: none; }
.mdmenu__name { font: 500 13.5px/1.2 var(--sans); color: var(--bright); letter-spacing: 0; }
.mdmenu__what { font: 400 11px/1.3 var(--mono); color: var(--dim); letter-spacing: 0; }
.sec { display: block; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--green); }
/* the gutter's CONTENTS is the way back to the top of the page */
a.sec--top { text-decoration: none; cursor: pointer; }
a.sec--top:hover, a.sec--top:focus-visible { color: var(--bright); outline: none; }
.sub { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: .13em; color: #9aa4ae; }

h1 { margin: 0; font: 600 42px/1.1 var(--sans); letter-spacing: -.032em; color: var(--bright); text-wrap: balance; }
h2 { margin: 44px 0 0; font: 600 28px/1.24 var(--sans); letter-spacing: -.028em; color: var(--heading); }
h3 { margin: 36px 0 0; font: 600 20px/1.3 var(--sans); letter-spacing: -.018em; color: var(--heading2); }
h4 { margin: 30px 0 0; font: 600 17px/1.35 var(--sans); color: var(--heading2); }
.dek { display: block; font: 300 19px/1.5 var(--sans); color: #a9b2bb; }
p { margin: 16px 0 0; }
blockquote { margin: 26px 0 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--border-2);
             font: 300 21px/1.6 var(--sans); font-style: italic; color: var(--heading2); }
blockquote p { margin: 0; }
hr { margin: 30px 0 0; border: 0; border-top: 1px solid var(--rule); }
ul, ol { margin: 12px 0 0; padding-left: 26px; }
li { margin: 6px 0 0; }
code { font: 400 15px/1 var(--mono); color: var(--amber); background: #12181f; padding: 1px 5px; }
pre { margin: 22px 0 0; padding: 14px; border: 1px solid var(--rule); background: var(--panel);
      font: 400 13px/1.75 var(--mono); color: var(--body); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; font-size: 13px; }
img { max-width: 100%; height: auto; display: block; }
table { width: 100%; border-collapse: collapse; margin: 26px 0 0;
        border: 1px solid var(--rule); background: var(--panel); }
th { padding: 11px 14px 9px; text-align: left;
     font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; color: var(--meta); }
td { padding: 10px 14px; border-top: 1px solid var(--hairline);
     font: 300 15px/1.5 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
details { margin: 20px 0 0; }
summary { cursor: pointer; font: 300 18.5px/1.72 var(--sans); color: var(--body); }
details > :not(summary) { margin-left: 6px; padding-left: 20px; border-left: 1px solid var(--rule); }

.fig { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
/* an image given a size in the editor sits in the middle, or to the side it was set */
.fig[style*="width"] { margin-left: auto; margin-right: auto; }
.fig.fig--left { margin-left: 0; }
.fig.fig--right { margin-right: 0; }
.fig img { width: 100%; }
.fig figcaption, .cap { font: 400 10.5px/1.5 var(--mono); color: #5d666f; }
.callout { margin: 26px 0 0; padding: 16px 22px; border-left: 2px solid var(--green);
           background: rgba(126,231,135,.04); font: 300 16.5px/1.6 var(--sans); color: #b8c0c8; }

/* ── listing: ls -lt ─────────────────────────────────────────────────────── */
.ls { display: grid; grid-template-columns: 66px 100px minmax(0,1fr) 92px; gap: 20px; }
.ls--head { padding: 0 0 9px; border-bottom: 2px solid var(--faint);
            font: 500 10px/1 var(--mono); letter-spacing: .16em; color: #9aa4ae; }
.ls--row { align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.ls__words { font: 400 12px/1 var(--mono); color: var(--dimmer); text-align: right; }
.ls__when  { font: 400 12px/1 var(--mono); color: var(--meta); }
.ls__name  { font: 400 16.5px/1.35 var(--sans); color: var(--body); }
.ls__cat   { justify-self: end; font: 400 10px/1 var(--mono); letter-spacing: .14em; color: var(--quiet); }
.ls--cold .ls__name { color: var(--meta); }
.ls--cold .ls__words, .ls--cold .ls__when, .ls--cold .ls__cat { color: var(--dim); }

/* ── the gutter: the document's own outline ──────────────────────────────── */
/* Sticky, and no taller than the window: a long piece's contents ran off the bottom of
   the screen, and the only way to reach the end of them was to scroll the article
   itself there. So the gutter scrolls on its own, and a wheel that reaches its end
   stops there instead of carrying on into the article. */
.synopsis { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px;
            max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.outline { display: flex; flex-direction: column; gap: 2px; }
.outline__h {
  padding: 6px 0 6px 12px; border-left: 2px solid var(--border);
  font: 400 13.5px/1.4 var(--sans); color: var(--amber);
}
.outline__h--3 { padding: 5px 0 5px 26px; font: 400 12.5px/1.35 var(--sans); color: #a8823a; }
.outline__h--here { border-left-color: var(--green); font-weight: 500; color: #eef2f6; }
a.outline__h, a.outline__fig { text-decoration: none; }
/* a heading the editor's contents scrolls to lands clear of the window's top */
#doc .blk[data-type="h2"], #doc .blk[data-type="h3"] { scroll-margin-top: 32px; }
.outline__fig {
  display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px; align-items: center;
  padding: 6px 0 6px 12px; border-left: 2px solid var(--border);
}
.outline__fig img { width: 62px; aspect-ratio: 16/9; object-fit: cover; opacity: .62; transition: opacity .12s; }
.outline__fig:hover img { opacity: 1; }
.outline__figlabel { font: 400 10.5px/1.35 var(--mono); color: var(--meta); }
.outline__figcap { display: block; color: var(--dim); }
.note { font: 400 10.5px/1.5 var(--mono); color: var(--dim); }

/* ── page grids ──────────────────────────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: var(--gutter) var(--measure) minmax(0,1fr);
         gap: var(--gap); align-items: start; padding-top: 40px; }
.measure { width: var(--measure); min-width: 0; margin-left: calc(var(--gutter) + var(--gap)); }

/* ── subscribe ───────────────────────────────────────────────────────────── */
.sub { margin-top: 34px; padding: 22px 24px; border: 1px solid var(--rule); background: var(--panel); }
.sub__cmd { display: block; font: 500 12.5px/1 var(--mono); color: #9aa4ae; padding-bottom: 10px; }
.sub__field { display: flex; margin-top: 14px; }
.sub__input { flex: 1; padding: 13px; border: 1px solid var(--border-2); border-right: 0;
              background: transparent; color: var(--body); font: 400 12.5px/1 var(--mono); }
.sub__input::placeholder { color: #5d666f; }
.sub__names { margin-bottom: -1px; }
.sub__names .sub__input { min-width: 0; }
.sub__names .sub__input:last-child { border-right: 1px solid var(--border-2); }
.sub__names + .sub__field { margin-top: 0; }
/* A full-bleed box is right -- it holds the page's edges -- but a 1030px field for
   an email address is not. The copy takes the space; the form takes a column. */
.sub--wide { display: grid; grid-template-columns: minmax(0,1fr) 392px; gap: 48px;
             align-items: center; padding: 32px 34px; }
.sub--wide .sub__field { margin-top: 0; }
@media (max-width: 860px) {
  .sub--wide { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 22px 20px; }
  .sub--wide .sub__field { margin-top: 0; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { display: flex; align-items: center; justify-content: space-between;
        margin-top: 46px; padding: 20px 0 56px; border-top: 1px solid var(--hairline);
        font: 400 11.5px/1 var(--mono); color: #5d666f; }
.foot__links { display: flex; gap: 20px; }
.foot__links .x { color: var(--x); } .foot__links .in { color: var(--linkedin); }
.foot__links .gh { color: var(--github); } .foot__links .rss { color: var(--rss); }
.foot__links .em { color: var(--amber); }

/* ── the phone ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --page: 100%; }
  /* the masthead keeps the prompt and one action; apropos becomes its icon */
  .prompt { font-size: 14px; }
  .masthead { padding: 14px 0 12px; gap: 12px; }
  .masthead__tools { gap: 12px; }
  .apropos { font-size: 0; }
  .cmd { white-space: normal; word-break: break-word; }
  .btn { padding: 8px 12px; font-size: 11px; }
  .fileline__stat { gap: 6px 14px; }
  body { font-size: 17px; line-height: 1.68; }
  .wrap { width: 100%; padding: 0 16px; }
  .grid3 { grid-template-columns: minmax(0,1fr); gap: 0; padding-top: 18px; }
  .grid3 > * { min-width: 0; }
  .masthead { flex-wrap: wrap; }
  .measure { width: 100%; margin-left: 0; }
  .df { display: none; }
  h1 { font-size: 30px; letter-spacing: -.03em; }
  h2 { font-size: 23px; margin-top: 32px; }
  h3 { font-size: 18px; margin-top: 26px; }
  .dek { font-size: 16px; }
  .synopsis { position: static; max-height: none; overflow: visible; }
  .ls { grid-template-columns: 1fr; gap: 5px; }
  .ls--head { display: none; }
  .ls--row { padding: 13px 0; }
  .ls__cat { justify-self: start; }
}

/* the homepage listing carries the figure that belongs to each row */
.ls--fig { grid-template-columns: 66px 100px minmax(0,1fr) 104px 92px; align-items: center; }
.ls--fig .ls__thumb img { width: 104px; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 860px) { .ls--fig { grid-template-columns: 1fr; } .ls--fig .ls__thumb { display: none; } }

/* the homepage grids its volumes, because there they are the content */
.dfgrid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr));
          border: 1px solid var(--rule); background: var(--panel); }
.dfgrid__cell { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px;
                text-decoration: none; border-left: 1px solid var(--rule); min-width: 0; }
.dfgrid__cell:first-child { border-left: 0; }
@media (max-width: 860px) {
  .dfgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dfgrid__cell { border-left: 0; border-top: 1px solid var(--rule); }
  .dfgrid__cell:nth-child(2n) { border-left: 1px solid var(--rule); }
  .dfgrid__cell:nth-child(-n+2) { border-top: 0; }
}

/* apropos: flags are outlined, and the one in force is bright */
.flag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
        border: 1px solid var(--border); background: transparent;
        font: 400 12px/1 var(--mono); color: var(--amber); cursor: pointer; text-decoration: none; }
.flag:hover { border-color: var(--border-2); color: #f6d585; }
.flag--on { border-color: var(--faint); color: var(--bright); }

.ls--row[hidden] { display: none; }

/* the phone's collapsed df -h, and the menu behind it */
.dfbar { display: none; margin: 0 0 4px; }
.dfbar__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 width: 100%; height: 44px; padding: 0 12px; cursor: pointer;
                 border: 1px solid var(--rule); background: var(--panel);
                 font: 500 11.5px/1 var(--mono); color: #9aa4ae; }
.dfbar__count { display: flex; align-items: center; gap: 10px;
                font: 400 10.5px/1 var(--mono); color: var(--meta); white-space: nowrap; }
.dfbar__menu { display: block; border: 1px solid var(--rule); border-top: 0; }
.dfbar__menu .dfgrid { border: 0; }
.dfgrid__cell--here { background: #141a21; box-shadow: inset 2px 0 0 var(--green); }
.dfbar__menu .df__vol { display: flex; align-items: center; gap: 7px; min-height: 44px;
                        padding: 0 12px; border-top: 1px solid var(--hairline);
                        font: 400 12.5px/1 var(--mono); }
.dfbar__menu .df__vol:nth-child(2n) { border-left: 1px solid var(--hairline); }

/* apropos: the bar is a prompt you type into */
.apbar { display: flex; align-items: center; justify-content: space-between; gap: 30px;
         padding: 16px 18px; border: 1px solid var(--border-2); background: var(--panel); }
.apbar__prompt { display: flex; align-items: baseline; flex: 1; min-width: 0;
                 font: 500 16px/1 var(--mono); color: #9aa4ae; }
.apbar__input { flex: 1; min-width: 0; border: 0; background: transparent;
                color: var(--bright); font: 500 16px/1 var(--mono); outline: none; }
.apbar__count { white-space: nowrap; }
/* Arriving here from `apropos` means the reader came to type. The bar says so:
   the border goes to the machine's own green, the caret is green, and it draws
   the eye once on arrival rather than sitting there looking like a heading. */
.apbar { transition: border-color 140ms linear, box-shadow 140ms linear; }
.apbar:focus-within { border-color: var(--green);
                      box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(126,231,135,.10); }
.apbar__input { caret-color: var(--green); }
.apbar__input:focus::placeholder { color: #6a747e; }
.apbar__input:autofill, .apbar__input:-webkit-autofill { background: transparent; }
@keyframes apropos-lands {
  0%, 100% { box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(126,231,135,.10); }
  35%      { box-shadow: 0 0 0 2px var(--green), 0 0 34px rgba(126,231,135,.26); }
}
.apbar:focus-within { animation: apropos-lands 900ms ease-out 1; }
@media (prefers-reduced-motion: reduce) { .apbar:focus-within { animation: none; } }

/* last, so it wins over the base rule above it: the phone shows the collapsed bar */
@media (max-width: 860px) {
  .dfbar { display: block; }
}

@media (max-width: 860px) {
  /* the prompt shortens rather than the field: the field is the point */
  .apbar { gap: 12px; padding: 12px 14px; }
  .apbar__prompt, .apbar__input { font-size: 13px; }
  .apbar__host { display: none; }
  .apbar__count { font-size: 10px; }
}

/* ps, and the two tables that are not ls -lt */
.ps  { display: grid; grid-template-columns: 118px 176px minmax(0,1fr) 104px 90px; gap: 20px; }
.ps__when { font: 400 12px/1 var(--mono); color: var(--meta); }
.ps--quiet .ps__when { color: var(--dim); }
.spk { display: grid; grid-template-columns: 90px 250px minmax(0,1fr) 200px; gap: 24px; }
.crs { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; }
.ps--head, .spk--head, .crs--head { padding: 0 0 9px; border-bottom: 2px solid var(--faint);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; color: #9aa4ae; }
.ps--row, .spk--row, .crs--row { align-items: baseline; padding: 14px 0;
  border-bottom: 1px solid var(--hairline); }
.ps__state { display: inline-flex; align-items: center; gap: 8px;
             font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--meta); }
.ps__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.ps__dot--running { background: var(--green); }
.ps--row:not(.ps--quiet) .ps__state { color: var(--green); }
.ps__name { font: 500 16px/1.3 var(--sans); color: #eef2f6; }
.ps__what { font: 300 15px/1.55 var(--sans); color: var(--quiet); }
.ps__lang { justify-self: end; font: 400 11px/1 var(--mono); color: var(--dim); }
/* where a project lives -- one line of named destinations under its name. Amber is
   the palette's "you can go there", so a label with no link yet is not given it. */
.ps__where { display: block; padding-top: 6px; font: 400 11.5px/1.6 var(--mono);
             color: var(--amber); }
.ps__where--none, .spk__art--none { color: var(--meta); }
/* the subscribe widget's own way in, for whoever is signed in and reading it */
.sub__edit { display: block; padding-top: 10px; color: var(--dim); }
.sub__edit:hover { color: var(--amber); }
.ps--quiet .ps__name { color: var(--meta); }
.spk__when { font: 400 12px/1 var(--mono); color: var(--meta); }
.spk__where { font: 400 15px/1.35 var(--sans); color: var(--body); }
.spk__what { display: flex; flex-direction: column; gap: 7px; }
.spk__title { font: 500 17px/1.3 var(--sans); color: #eef2f6; }
.spk__kind { font: 400 11.5px/1 var(--mono); color: var(--meta); }
.spk__writeup { padding: 2px 6px; border: 1px dashed var(--dim);
                font: 400 10.5px/1.5 var(--mono); color: var(--meta); align-self: start; }
.spk__art { justify-self: end; font: 400 12px/1 var(--mono); color: var(--amber); }
.crs__what { display: block; font: 500 19px/1.3 var(--sans); color: #eef2f6; }
.crs__where { display: block; font: 500 15px/1.3 var(--sans); color: var(--body); }
.crs__detail { display: block; padding-top: 4px; font: 400 11px/1.5 var(--mono); color: var(--meta); }
@media (max-width: 860px) {
  .ps, .spk, .crs { grid-template-columns: 1fr; gap: 6px; }
  .ps--head, .spk--head, .crs--head { display: none; }
  .ps__lang, .spk__art { justify-self: start; }
  .crs--row > div:last-child { justify-self: start !important; text-align: left !important; }
}

@media (max-width: 860px) {
  /* the drafts volume is already in the collapsed menu; it does not need to be twice */
  .chip--wide { display: none; }
  .ways a { min-height: 44px; display: inline-flex; align-items: center; }
  .readpage { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { padding: 8px 10px; font-size: 11px; }
}

/* ── the right rail: what you can do with the piece, then its margin notes ── */
/* the rail must be as tall as the article for its notes to stay beside them */
.rail { align-self: stretch; height: 100%; }
.rail__stick { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 26px; }
.rail__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--listen { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
                border: 1px solid var(--border-2); font: 400 11.5px/1 var(--mono);
                color: #9aa4ae; cursor: pointer; list-style: none; }
.chip--listen::-webkit-details-marker { display: none; }
.listen[open] .chip--listen { color: var(--green); border-color: #2f4a35; }
.listen audio { display: block; width: 100%; margin-top: 10px; }
/* a margin note floats out of the measure into the rail, so it sits beside the
   passage it was authored next to -- position without measurement or script */
.prose { counter-reset: marg; }
.prose .admonition.margin {
  float: right; clear: right; width: 290px; margin: 6px -330px 22px 0;
  padding: 6px 0 0; border: 0; border-top: 1px solid var(--rule);
  background: none; counter-increment: marg;
}
.prose .admonition.margin::before {
  content: "MARGIN \00B7\00A0" counter(marg); display: block; padding-bottom: 9px;
  font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--meta);
}
.prose .admonition.margin p { font: 300 14px/1.55 var(--sans) !important; color: var(--quiet) !important; }

/* ── notes: a footnote set beside the line that cites it ─────────────────────
   The marker is a numbered button in the text. On a desk the note floats out of the
   measure into the right-hand column, level with that line; a float of zero net
   width fits the line it is on, and clear:right stacks notes that fall close together
   instead of letting them overlap. On a phone and in reading mode it waits behind its
   marker and opens in place. */
.sn-ref { display: inline; padding: 0 .12em 0 .1em; border: 0; background: none;
          font: 600 .64em/1 var(--mono); color: var(--amber); vertical-align: super;
          cursor: pointer; text-decoration: none; }
.sn-ref:hover { color: #f2ce70; }
.sn-ref:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.sn { float: right; clear: right; width: calc(var(--margin) - 24px);
      margin: .35em calc(-1 * (var(--margin) - 24px + var(--gap))) 18px 0;
      padding-top: 7px; border-top: 1px solid var(--rule);
      font: 300 13.5px/1.55 var(--sans); color: var(--quiet); text-align: left; }
.sn__n { display: inline-block; min-width: 18px; font: 600 10.5px/1 var(--mono); color: var(--amber); }
.sn__p { display: inline; }
.sn__p + .sn__p { display: block; margin-top: .5em; }
.sn code { font-size: 12px; overflow-wrap: anywhere; }
/* the editor draws a note in the margin the same way the page does */
#doc .fnrow code { font-size: 12px !important; padding: 0 3px !important; overflow-wrap: anywhere; }
.sn a { color: var(--amber); }
.sn--flash { color: var(--body); border-top-color: var(--amber); transition: color .6s, border-color .6s; }

.chip--danger:hover, .tool--danger:hover { color: #e08c7a; border-color: #e08c7a; }
.archived__row { grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; }
.archived__acts { display: flex; gap: 8px; justify-self: end; }
.archived__acts form { display: inline; }

/* generating a feature image: three styles side by side, each chosen or refined */
.gen { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.gen__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gen__grid[hidden] { display: none; }
.gen__card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--rule); background: var(--panel); }
.gen__card--used { border-color: var(--green); }
.gen__label { display: flex; justify-content: space-between; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--meta); }
.gen__shot { aspect-ratio: 16 / 9; background: #0b0e12; display: flex; align-items: center; justify-content: center;
             font: 400 11px/1.4 var(--mono); color: var(--dim); text-align: center; padding: 8px; }
.gen__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen__acts { display: flex; gap: 6px; }
.gen__acts input { flex: 1; min-width: 0; padding: 6px 8px; background: transparent; border: 1px solid var(--border-2);
                   color: var(--body); font: 400 11.5px/1 var(--mono); }
.gen__acts .tool { padding: 6px 9px; }
@media (max-width: 860px) { .gen__grid { grid-template-columns: minmax(0, 1fr); } }

/* the image modal: a generated image seen large, and decided on there */
#imgmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
            padding: 24px; background: rgba(5,7,9,.82); }
#imgmodal[hidden] { display: none; }
.im__panel { width: min(1100px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: flex; flex-direction: column;
             gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--border-2);
             box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.im__head { display: flex; align-items: center; gap: 14px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--meta); }
.im__label { color: var(--body); }
.im__say { flex: 1; color: var(--amber); }
.im__shot { background: #0b0e12; }
.im__shot img { display: block; width: 100%; max-height: 62vh; object-fit: contain; transition: opacity .2s; }
.im__ask { width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; background: #0b0e12; color: var(--bright);
           border: 1px solid var(--border-2); font: 300 15.5px/1.55 var(--sans); }
.im__ask:focus { outline: none; border-color: var(--amber); }
.im__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.im__acts .tool { padding: 9px 14px; }
.gen__shot img { cursor: zoom-in; }
.im__ver { display: flex; align-items: center; gap: 6px; color: var(--body); }
.im__ver[hidden] { display: none; }
.im__ver .tool { padding: 3px 8px; }
.im__ver .tool:disabled { opacity: .35; cursor: default; }
.im__del { margin-left: auto; }
.im__del[data-armed] { color: #e08c7a; border-color: #e08c7a; }

/* the history: every image drawn for the piece, until it is deleted */
#imghist { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center;
           padding: 24px; background: rgba(5,7,9,.82); outline: none; }
#imghist[hidden] { display: none; }
.ih__panel { width: min(1200px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: flex; flex-direction: column;
             gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--border-2);
             box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ih__filters { display: flex; gap: 6px; }
.ih__filters .tool { padding: 4px 9px; }
.ih__filters .tool.on { color: var(--bright); border-color: var(--amber); }
.ih__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ih__item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left; cursor: pointer;
            background: #0b0e12; border: 1px solid var(--rule); color: var(--body); font: inherit; }
.ih__item:hover, .ih__item:focus-visible { border-color: var(--amber); outline: none; }
.ih__shot { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden;
            font: 400 11px/1 var(--mono); color: var(--meta); background: #07090c; }
.ih__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ih__meta { display: flex; justify-content: space-between; gap: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--meta); }
.ih__what { font: 300 13px/1.45 var(--sans); color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ih__used { position: absolute; top: 14px; left: 14px; padding: 3px 6px; font: 500 10px/1 var(--mono); letter-spacing: .06em;
            color: #0b0e12; background: var(--green); }

/* a preview says so, above everything, in the colour that means "not yet" */
.previewing { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px;
              padding: 9px 14px; border: 1px dashed var(--amber); color: var(--amber);
              font: 500 11.5px/1.4 var(--mono); }
.previewing a { color: var(--bright); }

/* ── link previews: where a link goes, before you go ────────────────────────
   Fixed to the viewport beside the link, and never in the way of the pointer: it
   takes no events, so moving across it is moving across the text beneath. */
.pv { position: fixed; z-index: 30; width: 336px; display: flex; flex-direction: column;
      gap: 6px; padding: 13px 15px 14px; pointer-events: none;
      background: var(--panel); border: 1px solid var(--border-2);
      box-shadow: 0 14px 36px rgba(0,0,0,.5); }
.pv[hidden] { display: none; }
/* full-bleed: wider than the card's padding lets it be, so the site-wide img cap is lifted */
.pv__img { width: calc(100% + 30px); max-width: none; margin: -13px -15px 4px; aspect-ratio: 16 / 7;
           object-fit: cover; opacity: .85; border-bottom: 1px solid var(--rule); }
.pv__meta, .pv__host { font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--meta); }
.pv__host { color: var(--amber); }
.pv__title { font: 500 15px/1.3 var(--sans); color: var(--bright); }
.pv__what { font: 300 13px/1.5 var(--sans); color: var(--quiet);
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv__mono { font: 400 12px/1.4 var(--mono); color: var(--body); overflow-wrap: anywhere; }
.pv__path { font: 400 11px/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .pv:not([hidden]) { animation: pv-in .12s ease-out; }
  @keyframes pv-in { from { opacity: 0; transform: translateY(-3px); } }
}

/* ── READ NEXT: cross-references, authored in frontmatter ─────────────────── */
.also { display: flex; flex-direction: column; gap: 12px;
        margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-2); }
.also__list { display: flex; flex-direction: column; gap: 10px; }
.also__ref { font: 400 14px/1.5 var(--mono); text-decoration: none; }
.also__name { color: var(--amber); font-family: var(--sans); font-weight: 500; }
.also__ref:hover .also__name { color: #f2ce70; }
.also__gloss { color: var(--quiet); }

/* ── neighbours: the entries either side of this one ─────────────────────── */
.nb { display: flex; flex-direction: column; gap: 2px; margin-top: 36px; }
.nb .prompt { padding-bottom: 12px; }
.nb__row { display: grid; grid-template-columns: 22px 96px minmax(0,1fr); gap: 14px;
           align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hairline);
           text-decoration: none; }
.nb__arrow { font: 400 12px/1 var(--mono); color: var(--dim); }
.nb__arrow--here { color: var(--green); }
.nb__when { font: 400 12px/1 var(--mono); color: var(--meta); }
.nb__name { font: 400 16.5px/1.35 var(--sans); color: var(--amber); }
.nb__row--here .nb__name { color: var(--bright); }
.nb__row:hover .nb__name { color: #f2ce70; }
.nb__you { font: 400 11.5px/1 var(--mono); color: var(--dim); }

/* ── blocks the admonition container carries ─────────────────────────────── */
.prose .admonition { margin: 26px 0 0; padding: 16px 22px; border-left: 2px solid var(--green);
                     background: rgba(126,231,135,.04); }
.prose .admonition p { margin: 0; font: 300 16.5px/1.6 var(--sans); color: #b8c0c8; }
.prose .admonition p + p { margin-top: 10px; }
.prose .admonition-title { font: 500 11px/1 var(--mono) !important; letter-spacing: .16em;
                           text-transform: uppercase; color: var(--green) !important;
                           padding-bottom: 10px; }
.bm { display: grid; gap: 7px; margin: 24px 0 0; padding: 15px 17px;
      border: 1px solid var(--rule); background: var(--panel); text-decoration: none; }
.bm__title { font: 500 15.5px/1.35 var(--sans); color: var(--bright); }
.bm__why { font: 300 13.5px/1.5 var(--sans); color: var(--quiet); }
.bm__url { font: 400 11px/1 var(--mono); color: var(--amber);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm:hover { border-color: var(--border-2); }
.au, .vid { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.au audio, .vid video { width: 100%; }
.vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rule); }
/* a YouTube Short is upright, and gets an upright player */
.vid iframe.vid__tall { width: min(100%, 360px); aspect-ratio: 9 / 16; align-self: center; }

/* ── mathematics, typeset at build as MathML ─────────────────────────────── */
.math--block { margin: 30px 0; padding: 10px 0; max-width: 100%; overflow-x: auto; text-align: center; }
/* MathML takes its box from line-height, and the prose line-height crops the
   superscripts -- which shows up as a scrollbar under a one-line formula */
.math--block math { font-size: 19px; line-height: normal; color: #e8edf2; }
.prose math { color: #e8edf2; }
.math--inline { display: inline-block; max-width: 100%; overflow-x: auto;
                vertical-align: middle; }
.math--raw { font: 400 13px/1.6 var(--mono); color: var(--amber); }

/* ── equations in the editor, edited the way Notion edits them ───────────────
   Geometry read off Notion (radius 10px, a 400px popover, a 14px/21px monospace box,
   Done ↵); colours are this site's. The formula is drawn by the page's own renderer,
   so it looks here as it will to a reader. */
.eqv { position: relative; margin: 26px 0 0; border-radius: 10px; cursor: pointer; transition: background .12s; }
.eqv:hover { background: rgba(255,255,255,.035); }
.eqv--full { padding: 10px 8px; line-height: normal; text-align: center; overflow-x: auto; overflow-y: hidden; }
.eqv--full math { font-size: 19px; line-height: normal; color: #e8edf2; }
.eqv--empty { display: flex; align-items: center; gap: 12px; padding: 12px; background: #12181f;
              font: 400 14px/1.4 var(--sans); color: #6a747e; }
.eqv--empty:hover { background: #161d25; }
.eqv__tex { font: 500 15px/1 Georgia, 'Times New Roman', serif; color: #7b858f; letter-spacing: -.02em; }
.eqv__tex span { position: relative; top: .22em; margin: 0 -.1em; font-size: .9em; }
.eqv--bad { padding: 10px 12px; background: rgba(224,140,122,.1); font: 400 13px/1.5 var(--mono); color: #e08c7a;
            text-align: left; white-space: pre-wrap; }
.eqv--open { background: rgba(227,179,65,.08); }
.ieq { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; cursor: pointer;
       border-radius: 4px; padding: 0 2px; }
.ieq:hover { background: rgba(255,255,255,.06); }
.ieq--open { background: rgba(227,179,65,.16); }
.ieq--empty { padding: 1px 6px; background: #1f252c; font: 400 14px/1.4 var(--sans); color: #8a949e; }
.ieq--empty::before { content: "\221Ax"; margin-right: 5px; font-family: Georgia, serif; font-style: italic; }
.ieq--bad { font: 400 13px/1.4 var(--mono); color: #e08c7a; }
.ieq math { color: #e8edf2; }
#eqpanel { position: absolute; z-index: 45; width: 400px; max-width: calc(100vw - 32px); overflow: hidden;
           border-radius: 10px; background: #161b21;
           box-shadow: 0 0 0 1px #2a323a, 0 14px 28px -6px rgba(0,0,0,.45), 0 2px 4px -1px rgba(0,0,0,.3); }
#eqpanel[hidden] { display: none; }
.eqp__row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.02); }
.eqp__tex { flex: 1; min-width: 0; min-height: 21px; max-height: 500px; padding: 0; resize: none; overflow-y: auto;
            border: 0; outline: 0; background: transparent; color: #eef2f6; caret-color: var(--amber);
            font: 400 14px/21px var(--mono); white-space: pre-wrap; }
.eqp__tex::placeholder { color: #4d5660; }
.eqp__done { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 6px;
             background: var(--amber); color: #0b0e12; font: 500 13px/1.4 var(--sans); cursor: pointer; }
.eqp__done--dim { opacity: .5; }
.eqp__err { padding: 8px 10px 10px; border-top: 1px solid #2a323a; font: 400 12px/1.5 var(--sans); color: #e08c7a; }
.eqp__err b { font-weight: 600; }

/* ── media, put in the way Notion puts it ─────────────────────────────────────
   Empty, a block is Notion's grey row, and a click opens its popover: Upload or Link
   (image, video, audio), or a link (bookmark). Filled, it shows what it holds and not
   its URL; hovering offers a caption and a replacement. */
.medv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #12181f;
        cursor: pointer; font: 400 14px/1.4 var(--sans); color: #6a747e; user-select: none; }
.medv:hover { background: #161d25; }
.medv svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #7b858f; stroke-width: 1.4; }
#doc [data-empty] { display: block !important; border: 0 !important; background: none !important; padding: 0 !important; }
#doc [data-empty] > :not(.medv) { display: none !important; }
#doc :not([data-empty]) > .medv { display: none; }
.medwrap { position: relative; }
.medtools { position: absolute; top: 8px; right: 8px; z-index: 2; display: none; gap: 2px; padding: 2px; border-radius: 6px;
            background: rgba(13,17,22,.92); box-shadow: 0 0 0 1px #2a323a; }
.row:hover .medtools { display: flex; }
.medtools button { border: 0; border-radius: 4px; padding: 5px 8px; background: transparent; color: #cdd4da;
                   font: 500 12px/1 var(--sans); cursor: pointer; }
.medtools button:hover { background: #1f252c; }
#mediapanel { position: absolute; z-index: 45; max-width: calc(100vw - 32px); overflow: hidden; border-radius: 10px;
              background: #161b21; box-shadow: 0 0 0 1px #2a323a, 0 14px 28px -6px rgba(0,0,0,.45), 0 2px 4px -1px rgba(0,0,0,.3); }
#mediapanel[hidden] { display: none; }
.mp__tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid #2a323a; }
.mp__tab { margin-bottom: -1px; padding: 6px 8px 8px; border: 0; border-bottom: 2px solid transparent; background: none;
           color: #8a949e; font: 400 14px/1 var(--sans); cursor: pointer; }
.mp__tab--on { color: #eef2f6; border-bottom-color: #eef2f6; }
.mp__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
.mp__input { width: 100%; padding: 6px 8px; border: 1px solid #2a323a; border-radius: 6px; outline: 0;
             background: #0b0e12; color: #eef2f6; font: 400 14px/1.4 var(--sans); }
.mp__input:focus { border-color: var(--amber); }
.mp__go { width: 100%; max-width: 300px; padding: 6px 10px; border: 0; border-radius: 6px; background: var(--amber);
          color: #0b0e12; font: 500 14px/1.4 var(--sans); cursor: pointer; }
.mp__up { width: 100%; padding: 6px 10px; border: 1px solid #2a323a; border-radius: 6px; background: transparent;
          color: #eef2f6; font: 500 14px/1.4 var(--sans); cursor: pointer; }
.mp__up:hover { background: #1f252c; }
.medtools button[data-act="malign"] { display: inline-flex; align-items: center; padding: 5px 6px; color: #8a949e; }
.medtools button[data-act="malign"].on { color: var(--amber); }
.medgrip { position: absolute; top: 50%; z-index: 2; width: 6px; height: 48px; margin-top: -24px; border-radius: 3px;
           background: rgba(238,242,246,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: col-resize; display: none; }
.medgrip--l { left: 8px; } .medgrip--r { right: 8px; }
.row:hover .medgrip { display: block; }
.row[data-media="fig"] .mplate img { cursor: zoom-in; }
#imgview { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 12px; padding: 24px; background: rgba(5,7,9,.88); cursor: zoom-out; outline: 0; }
#imgview[hidden] { display: none; }
#imgview img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.iv__cap { font: 400 11px/1.5 var(--mono); color: #8a949e; }
.mp__up:focus-visible, .mp__go:focus-visible, .mp__tab:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--amber); }
.mp__hint { font: 400 12px/1.4 var(--sans); color: #6a747e; text-align: center; }
.mp__say { font: 400 12px/1.4 var(--sans); color: #e08c7a; text-align: center; }
.mp__body--gif { align-items: stretch; }
.mp__gifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; }
.mp__gif { padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #0b0e12; cursor: pointer; aspect-ratio: 4 / 3; }
.mp__gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp__gif:hover, .mp__gif:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.mp__powered { font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a949e; text-align: right; }
.mp__hint code { font: 400 11px/1 var(--mono); color: var(--amber); }

/* ── the mode: -rw-r--r-- public, -rw------- private ─────────────────────── */
.mode { font: 400 11.5px/1 var(--mono); color: var(--dim); }
.mode--private { color: var(--amber); }

@media (max-width: 860px) {
  .rail__stick { position: static; }
  /* stacked, the rail lands under the whole article -- so the utilities sit at
     the top of the piece, where you would reach for them */
  .rail { order: -1; }
  .rail__tools { padding-bottom: 4px; }
  .prose .admonition.margin { float: none; width: auto; margin: 22px 0; }
  .sn { float: none; display: none; width: auto; margin: 10px 0 14px; padding: 10px 14px;
        border: 1px solid var(--rule); border-left: 2px solid var(--amber); background: var(--panel); }
  .sn--open { display: block; }
  .sn-ref[aria-expanded="true"] { color: var(--bright); }
  .nb__row { grid-template-columns: 18px minmax(0,1fr); }
  .nb__when { display: none; }
}
.ls--mode { grid-template-columns: 92px 66px 100px minmax(0,1fr) 92px; }
@media (max-width: 860px) { .ls--mode { grid-template-columns: 1fr auto; } .ls--mode .mode { display: none; } }
.prose del { color: var(--meta); }

.tablescroll { max-width: 100%; overflow-x: auto; }

/* ── uptime: what the machine reports about itself ───────────────────────── */
.uptime__sep { color: var(--faint); }

/* ── the phone's 44px rule ───────────────────────────────────────────────────
   The design's definition of done asks for 44px controls. It means controls --
   chips, buttons, filters, the way in -- not inline prose links, which cannot be
   44px tall without ceasing to be prose. The height comes from padding, so
   nothing changes size on a desktop and the touch area centres on its label. */
@media (max-width: 860px) {
  .chip, .btn, .flag, .apropos, .mode, .foot__su, .chip--listen {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .apropos { padding: 0 12px; min-width: 44px; }
  .mode { padding: 0 6px; }
  .foot__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .apbar__input { min-height: 44px; }
  .chip--wide { display: none; }
  .ways a { min-height: 44px; display: inline-flex; align-items: center; }
  .readpage { min-height: 44px; display: inline-flex; align-items: center; }
  /* the masthead prompt is the way home from every page, so it is a control too */
  .prompt, a.note, .outline__h, .outline__fig, .also__ref, .prose summary, .nb__row {
    min-height: 44px; display: flex; align-items: center;
  }
  .outline__h, .also__ref { padding-top: 0; padding-bottom: 0; }
  .prompt { align-items: baseline; padding: 8px 0; }
  .nb__row { align-items: baseline; }
}

/* ── reading mode: everything but the piece gets out of the way ───────────
   The way back stays on screen, because a mode you cannot leave is a trap. */
.reading .ticker,
.reading .df,
.reading .dfbar,
.reading .masthead__tools,
.reading .synopsis,
.reading .sub,
.reading .also,
.reading .nb,
.reading .foot { display: none; }
.reading .masthead { justify-content: flex-start; padding: 22px 0 8px; }
.reading .grid3 { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
.reading article { max-width: 34em; margin: 0 auto; }
.reading .prose { font-size: 19.5px; line-height: 1.78; }
.reading .prose .admonition.margin { float: none; width: auto; margin: 26px 0; }
.reading .sn { float: none; display: none; width: auto; margin: 12px 0 16px; padding: 10px 14px;
               border: 1px solid var(--rule); border-left: 2px solid var(--amber);
               background: var(--panel); font-size: 15px; }
.reading .sn--open { display: block; }
/* the file line's words go; the switch that brings them back stays, pinned where the
   eye expects a way out. Listen, where a piece has it, sits under it. */
.reading .fileline { border: 0; padding: 0; }
.reading .fileline__path, .reading .fileline__stat, .reading .mdmenu { display: none; }
.reading .fileline__tools { position: fixed; right: 24px; top: 20px; z-index: 5; }
.reading .rail { position: fixed; right: 24px; top: 62px; z-index: 5; }
.reading .rail__stick { position: static; }
@media (max-width: 860px) {
  .reading .fileline__tools { right: 12px; top: 10px; }
  .reading .rail { position: fixed; right: 12px; top: 50px; }
  /* max-width:none also lifts the grid item's shrink floor, so a wide formula
     sets the column width; cap it at the column instead of removing the cap */
  .reading article { max-width: 100%; min-width: 0; }
  .reading .grid3 > * { min-width: 0; }
}

/* ── head $LATEST: two columns, starting where the command does ───────────── */
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) 468px; gap: var(--gap);
         align-items: start; padding-top: 4px; }
.grid2 > * { min-width: 0; }
/* a command line and the link that scopes it: on a phone they wrap rather than
   pushing the page sideways */
.cmdrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
@media (max-width: 860px) { .cmdrow { flex-wrap: wrap; row-gap: 8px; } }
.readpage { font: 500 13px/1 var(--mono); color: var(--amber); text-decoration: none; }
.readpage:hover { color: #f2ce70; }
.desc { margin: 0; font: 300 17px/1.65 var(--sans); color: var(--body); }
@media (max-width: 860px) { .grid2 { grid-template-columns: minmax(0,1fr); gap: 26px; } }

/* ── the homepage's rhythm ─────────────────────────────────────────────────
   A command binds to the output beneath it and separates from the section
   above it, so the space above a prompt is large and the space below it small.
   At 56px above and 14px below they read as one crammed run. */
.band { padding-top: var(--band); }
.band--first { padding-top: 40px; }
@media (max-width: 860px) { :root { --band: 64px; } }
/* the h1's entry, weighted like the h1 it stands for */
.outline__h--title { font: 500 13.5px/1.35 var(--sans); }

/* ── frontmatter fields: they look like the values around them, not like a form ── */
.fm__cat { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.fm__input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; outline: none;
             font: 400 12px/1.5 var(--mono); color: var(--body); }
.fm__input::placeholder { color: var(--dim); }
.fm__input:focus { color: var(--bright); }
/* see-also holds a list, and a slug is long enough that two of them on one line scroll
   out of sight -- one per row, and the field grows to hold them */
.fm__lines { resize: none; overflow: hidden; align-self: stretch; white-space: pre;
             font: 400 12px/1.7 var(--mono); }

/* ── completing a frontmatter field ──────────────────────────────────────── */
.fm__pop { position: absolute; z-index: 60; max-height: 46vh; overflow-y: auto;
           border: 1px solid var(--border); background: var(--panel);
           box-shadow: 0 12px 34px rgba(0,0,0,.6); }
.fm__opt { padding: 7px 12px; font: 400 12.5px/1.3 var(--mono); color: var(--body);
           cursor: pointer; white-space: nowrap; }
.fm__opt[aria-selected="true"], .fm__opt:hover { background: #17202a; color: var(--bright); }
.fm__pop { max-width: min(680px, calc(100vw - 24px)); }
.fm__opt { overflow: hidden; text-overflow: ellipsis; }

/* ── the contents, where the gutter is not (contents.js) ─────────────────────────
   A row under the title, a bar at the top once that row has gone by, and the whole
   outline as a sheet from the bottom -- a phone's thumb reaches the bottom. */
.crow { display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 0 0; padding: 12px 14px;
        min-height: 44px; border: 1px solid var(--rule); background: var(--panel); cursor: pointer;
        font: inherit; color: inherit; text-align: left; }
.crow .sec { color: var(--green); }
.crow__min { flex: 1; }
.crow__go { font: 400 13px/1 var(--mono); color: var(--amber); }
.cbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 10px;
        min-height: 44px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; border: 0;
        border-bottom: 1px solid var(--rule); background: rgba(13,17,22,.96); cursor: pointer; text-align: left;
        font: 400 13px/1.3 var(--mono); color: var(--body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cbar__ico { color: var(--green); font-size: 16px; }
.cbar__here { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--amber); }
.cbar__n { color: var(--dim); }
/* the list drops down from what was tapped -- the bar at the top, or the row under the
   title -- so the finger that opened it is already where it is */
.csheet { position: fixed; inset: 0; z-index: 55; background: rgba(5,7,9,.6); }
.csheet__panel { position: absolute; left: 0; right: 0; display: flex; flex-direction: column;
                 border-radius: 0 0 14px 14px; border-top: 1px solid var(--rule);
                 background: var(--panel); box-shadow: 0 16px 34px rgba(0,0,0,.55); padding: 10px 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  .csheet__panel { animation: csheet-drop .16s ease-out; transform-origin: top; }
  @keyframes csheet-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.csheet__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 18px 8px; }
.csheet__head .sec { color: var(--green); }
.csheet__top { min-height: 44px; margin: -12px 0 -12px -8px; padding: 0 8px; border: 0; background: none; cursor: pointer; }
.csheet__list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.csheet__item { display: block; width: 100%; min-height: 44px; padding: 11px 18px 11px 16px; border: 0; border-left: 2px solid transparent;
                background: none; text-align: left; cursor: pointer; font: 400 15px/1.35 var(--sans); color: var(--amber); }
.csheet__item--3 { padding-left: 32px; font-size: 14px; color: #a8823a; }
.csheet__item--fig { padding-left: 32px; font: 400 12px/1.4 var(--mono); color: var(--meta); }
.csheet__item--here { border-left-color: var(--green); background: #141a21; color: var(--bright); font-weight: 500; }
.crow[hidden], .cbar[hidden], .csheet[hidden] { display: none; }
html.csheet-open { overflow: hidden; }
/* what the bar covers when a heading is jumped to */
html.cbar-on .prose :is(h2, h3, h4), html.cbar-on #doc .blk { scroll-margin-top: 60px; }

/* the frontmatter's heading is a button, which only a phone uses */
.fm__head { padding: 0; border: 0; background: none; cursor: default; text-align: left; }

/* ── a phone ─────────────────────────────────────────────────────────────────── */
.latest__thumb { display: none; }
@media (max-width: 860px) {
  /* the contents gutter is the row under the title, the bar, the sheet (contents.js);
     stacked above the piece it was two screens before the first word. The table
     editor's glossary is a gutter too, and stays. */
  .synopsis:has([data-contents]) { display: none; }
  /* one menu: the volumes are behind the masthead's ☰, not drawn a second time */
  .home-vols { display: none; }
  .home-latest { padding-top: 24px; }
  /* the latest piece: its picture small and above, not a column of its own */
  .latest__side { display: none !important; }   /* its inline display is flex */
  .latest__thumb { display: block; margin-top: 16px; }
  .latest__thumb img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--rule); }

  /* a project is one line; a tap opens the rest */
  .ps--row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; cursor: pointer; }
  .ps--row .ps__state { font-size: 0; gap: 0; position: absolute; }
  .ps--row { position: relative; padding-left: 16px; }
  .ps--row .ps__state { left: 0; top: 21px; }
  .ps--row .ps__what { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .ps--row .ps__where, .ps--row .ps__when, .ps--row .ps__lang { display: none; }
  .ps--row.ps--open .ps__what { -webkit-line-clamp: unset; display: block; }
  .ps--row.ps--open .ps__where { display: block; }
  .ps--row.ps--open .ps__when, .ps--row.ps--open .ps__lang { display: inline; }
  .ps__where a { display: inline-block; min-height: 44px; padding: 12px 4px 0; }

  /* no field under 16px: iOS zooms into it on a tap and stays there */
  input, select, textarea { font-size: 16px !important; }
  /* the page's own formulas, smaller, so fewer need a sideways swipe */
  .math--block math { font-size: 16px; }

  /* a finger's width, 44px, for everything that is tapped */
  /* the status line above, the links in one row under it */
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; line-height: 1.6; }
  .foot__links { gap: 4px; flex-wrap: wrap; margin-left: -6px; }
  .foot__links a { min-width: 44px; justify-content: center; padding: 0 6px; }
  .foot__su { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
  .tbtn { min-width: 44px; min-height: 44px; }
  .trow__num { min-width: 44px; min-height: 36px; }
  .tool, .chip, .btn, .gen__acts .tool { min-height: 44px; }
  .chip, .mdmenu__more { min-width: 44px; }
  .fileline__file { display: inline-block; padding: 10px 0; }
  /* the subscribe widget's words, typed into in place, take their size from a class */
  #doc .blk[data-word] { font-size: 16px !important; }

  /* the editor: its bar wraps rather than running off the side */
  .masthead__tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  /* the frontmatter, folded to its heading line */
  .fm__head { display: flex; justify-content: space-between; min-height: 44px; align-items: center; width: 100%;
              padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
  .fm__head::after { content: "\25BE"; color: var(--amber); letter-spacing: 0; }
  .fm--folded .fm__head::after { content: "\25B8"; }
  .fm--folded > :not(.fm__head) { display: none !important; }
  /* a block's grip, inside the column, for the block the caret is in */
  #doc .row > .grip { display: none; }
  /* its inline position is the desk's margin; on a phone it sits at the block's right */
  #doc .row.row--here > .grip { display: flex; left: auto !important; right: 0; top: -32px !important; width: auto; z-index: 3; gap: 2px; padding: 0;
                                background: var(--panel); border: 1px solid var(--rule); }
  #doc .row.row--here > .grip > span { display: inline-flex; align-items: center; justify-content: center;
                                       min-width: 40px; min-height: 30px; font-size: 16px; color: #8a949e; }
}