/* braynm.com, "Modal": the site is a Vim buffer. */

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

/* Until those arrive, local fonts scaled to the same widths stand in, so the text does not reflow when they swap:
   Martian Mono's 0.65em advance at wdth 87.5, and Literata's width on the Vim post's prose. */
@font-face { font-family: "Martian Mono Menlo"; src: local("Menlo Regular"), local("Menlo-Regular"); size-adjust: 107.96%; ascent-override: 92.63%; descent-override: 18.53%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Consolas"; src: local("Consolas"); size-adjust: 118.22%; ascent-override: 84.59%; descent-override: 16.92%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Droid"; src: local("Droid Sans Mono"), local("DroidSansMono"); size-adjust: 108.32%; ascent-override: 92.32%; descent-override: 18.46%; line-gap-override: 0%; }
@font-face { font-family: "Literata Georgia"; font-style: normal; src: local("Georgia"); size-adjust: 106.42%; ascent-override: 110.60%; descent-override: 28.94%; line-gap-override: 0%; }
@font-face { font-family: "Literata Georgia"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 97.98%; ascent-override: 120.13%; descent-override: 31.43%; line-gap-override: 0%; }

:root {
  --bg: #DCE3D3;
  --ink: #1E261C;
  --plum: #8B2F5E;
  --ochre: #7B5100;
  --teal: #1B626B;
  --dim: #525C4C;
  --line: #CBD5BF;
  --cur: #C9D4BB;
  --code-bg: #D2DAC8;
  --on: #FFFFFF;
  --err: #A1261B;
  --search: #E9C46A;

  /* the current mode's color, set by data-mode: statusline badge, cursor edge, block cursor */
  --mode: var(--plum);
  --mode-ink: var(--on);

  --mono: "Martian Mono", "Martian Mono Menlo", "Martian Mono Consolas", "Martian Mono Droid", ui-monospace, Menlo, monospace;
  --serif: "Literata", "Literata Georgia", Georgia, serif;
  --gutter: 48px;
  --pad: 24px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #182017;
  --ink: #D3DCC6;
  --plum: #E07EA6;
  --ochre: #E2B252;
  --teal: #72BCC3;
  --dim: #899582;
  --line: #2B3629;
  --cur: #232E21;
  --code-bg: #1F281E;
  --on: #182017;
  --err: #FF8A7A;
  --search: #7A6421;
  color-scheme: dark;
}

:root[data-mode="INSERT"] { --mode: var(--teal); }
:root[data-mode="VISUAL"] { --mode: var(--ochre); }
:root:is([data-mode="COMMAND"], [data-mode="SEARCH"]) { --mode: var(--bg); --mode-ink: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-variation-settings: "wdth" 87.5;
  font-size: 0.9375rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
::selection { background: var(--plum); color: var(--on); }
::highlight(search) { background-color: var(--search); color: var(--ink); }
::highlight(search-cur) { background-color: var(--plum); color: var(--on); }
::highlight(vcursor) { background-color: var(--mode); color: var(--mode-ink); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { top: 12px; }

#bits { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* posts and pages are read line by line, so the dump beside them stays quieter */
body:is([data-page="post"], [data-page="page"]) #bits { opacity: 0.5; }

/* ---------- header ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: var(--pad); }
header.top {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding-top: 28px;
  font-size: 0.8125rem;
}
header.top a { text-decoration: none; }
header.top .path { font-weight: 600; }
header.top .crumb { color: var(--dim); margin-right: auto; }
header.top .crumb a { color: var(--ink); }
header.top nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
header.top a:hover, header.top .crumb a:hover { color: var(--plum); text-decoration: underline; }
header.top .bg { all: unset; cursor: pointer; color: var(--dim); }
header.top .bg:hover, header.top .bg:focus-visible { color: var(--plum); text-decoration: underline; }

/* ---------- buffer, lines, gutter ---------- */
#buf { position: relative; z-index: 1; isolation: isolate; }
.buf { margin: 0 auto; padding: 56px var(--pad) 160px calc(var(--pad) + var(--gutter)); }
.buf.home, .buf.netrw { max-width: 1100px; }
.buf.post { max-width: calc(42rem + var(--gutter) + 2 * var(--pad)); }

.row { position: relative; }
.row::before {
  content: attr(data-ln);
  content: attr(data-ln) / "";
  position: absolute; left: calc(-1 * var(--gutter)); top: var(--ln-top, 0.2em);
  width: calc(var(--gutter) - 16px); text-align: right;
  font: 400 0.75rem/1.7 var(--mono); font-variation-settings: "wdth" 87.5;
  color: var(--dim); user-select: none; font-variant-numeric: tabular-nums;
}
.row.cursor::after {
  content: ""; position: absolute; z-index: -1;
  inset: -6px 0 -6px calc(-1 * var(--gutter));
  background: var(--cur); border-radius: 2px;
}
.row.cursor::before { color: var(--ink); font-weight: 700; }
.row.cursor.tall::after {
  inset: -6px auto -6px calc(-1 * var(--gutter));
  width: calc(var(--gutter) - 8px);
  border-right: 3px solid var(--mode);
  border-radius: 2px 0 0 2px;
}
.tilde { color: var(--teal); opacity: 0.55; line-height: 1.6; }

.comment { color: var(--dim); }
.kw { color: var(--plum); }
.str { color: var(--ochre); }
.fn { color: var(--teal); }

/* the bit-dump strip, used when the margins are too narrow */
.dump { display: none; height: 72px; margin: 20px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.dump canvas { display: block; width: 100%; height: 100%; }
html:not(.has-sides) .dump { display: block; }

/* ---------- home ---------- */
h1.hero {
  margin: 0;
  font-size: clamp(2rem, 1rem + 4.8vw, 6rem); line-height: 1.02; letter-spacing: -0.03em;
  font-weight: 700; font-variation-settings: "wdth" 75;
}
h1.hero .sub { display: block; }
.hl-search { background: var(--ochre); color: var(--bg); }
.hl-new { color: var(--plum); }
.blk { display: inline-block; width: 0.5em; height: 0.9em; margin-left: 0.06em; vertical-align: -0.08em; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-cmd { margin: 28px 0 0; min-height: 1.5em; font-size: 0.875rem; color: var(--dim); }
.hero-cmd b { color: var(--ink); }
.hero-cmd .caret, .cmdline .caret { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.22em; background: var(--ink); }
.hero-row.typing .blk { visibility: hidden; }
.lede { max-width: 56ch; margin: 40px 0 0; font-size: 0.9375rem; line-height: 1.75; }

.helphead {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 96px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  font: 700 0.8125rem/1.7 var(--mono); font-variation-settings: "wdth" 87.5;
}
.helphead .tag { color: var(--teal); font-weight: 400; }

.home .entry { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: baseline; padding: 20px 0; text-decoration: none; }
.home .entry .d { color: var(--dim); font-size: 0.75rem; }
.home .entry .t { font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variation-settings: "wdth" 75; text-wrap: balance; }
.home .entry .x { display: block; margin-top: 8px; color: var(--dim); font-size: 0.8125rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; font-variation-settings: "wdth" 87.5; text-wrap: pretty; }
.home .entry .go { color: var(--plum); font-size: 0.75rem; opacity: 0; }
.home .row.cursor .go { opacity: 1; }
.home .entry:hover .t { color: var(--plum); }
.explore { display: inline-block; padding: 12px 0; color: var(--teal); text-decoration: none; font-size: 0.875rem; }
.explore:hover { text-decoration: underline; }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; font-size: 0.875rem; line-height: 1.8; }
.twocol p { margin: 0 0 1em; }
.proj { display: block; padding: 24px 0; text-decoration: none; }
.proj .t { font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; font-variation-settings: "wdth" 75; }
.proj .x { display: block; max-width: 60ch; margin-top: 8px; color: var(--dim); font-size: 0.8125rem; line-height: 1.7; }
a.proj:hover .t { color: var(--plum); }
.proj.gone .t, .proj.gone .ro { color: var(--dim); }
.proj.gone { padding: 8px 0 24px; }
.proj.gone .t { font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); letter-spacing: -0.02em; }
.proj.gone .ro { font-size: 0.75rem; vertical-align: 0.15em; }
.proj .ro { margin-left: 0.2em; color: var(--ochre); font-size: 0.4em; font-weight: 600; letter-spacing: 0; vertical-align: 0.9em; font-variation-settings: "wdth" 87.5; }
.contact { font-size: clamp(1.4rem, 0.9rem + 3vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; font-variation-settings: "wdth" 75; text-decoration: none; }
.contact:hover { color: var(--plum); }

/* ---------- post ---------- */
.post-head { padding-bottom: 8px; }
.post-head .info { margin: 0 0 16px; color: var(--dim); font-size: 0.75rem; }
.post-head .title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 700; font-variation-settings: "wdth" 75;
  text-wrap: balance;
}
.post-head .excerpt { margin: 20px 0 0; color: var(--dim); font-size: 0.875rem; }

.folds { margin: 40px 0 0; }
.folds:empty { display: none; }
.fold {
  display: flex; gap: 0.6ch; align-items: baseline;
  padding: 2px 0; color: var(--dim); text-decoration: none; font-size: 0.8125rem;
}
.fold .lbl { color: var(--ink); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.fold .lead { flex: 1; overflow: hidden; white-space: nowrap; opacity: 0.5; }
.fold .lead::after { content: "··································································································"; }
.fold:hover .lbl { color: var(--plum); text-decoration: underline; }

figure { margin: 0; }
/* post photos are drawn in Vim commands; clicking shows the real picture */
.photo { margin: 40px 0 0; }
.photo img { width: 100%; border-radius: 2px; }
.photo .flip {
  all: unset; display: grid; width: 100%; cursor: pointer;
  border-radius: 2px;
}
.photo .flip > * { grid-area: 1 / 1; }
.photo .flip:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; }
.photo .ascii {
  margin: 0; overflow: hidden; white-space: pre;
  font: 500 var(--ascii-size, 7px)/1.15 var(--mono); font-variation-settings: "wdth" 100;
  letter-spacing: 0; color: var(--ink); user-select: none;
}
.photo .ascii .t { color: var(--teal); }
.photo .ascii .o { color: var(--ochre); }
.photo .ascii .p { color: var(--plum); }
.photo .ascii .d { color: var(--dim); }
.photo .flip img { visibility: hidden; }
.photo.drawn.revealed img { visibility: visible; animation: redraw 0.5s steps(14) both; }
.photo.drawn.revealed .ascii { visibility: hidden; }
.photo.drawn:not(.revealed) .ascii.printing { animation: redraw 0.9s steps(24) both; }
/* About: the map floats beside the title; lines next to it narrow instead of running under it */
.post > .photo.map { float: right; width: clamp(7.5rem, 36vw, 15rem); margin: 0 0 24px 24px; }
.post:has(> .map) .row { display: flow-root; }
.post:has(> .map) :is(.dump, .folds) { overflow: hidden; }
/* Manila, placed where the PNG's dot is; the drawing's own plum is too muddy to find */
.map .flip { position: relative; cursor: default; }
.map .flip::after {
  content: "*"; content: "*" / ""; position: absolute; left: 41.8%; top: 39.5%; translate: -50% -42%;
  color: var(--plum); font: 800 1.25rem/1 var(--mono);
}
@media (max-width: 720px) {
  .post > .photo.map { width: clamp(6.5rem, 30vw, 9rem); margin-left: 12px; }
  .post:has(> .map) .prose { clear: right; }
}
.photo figcaption { overflow-wrap: anywhere; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.photo .hint { color: var(--teal); }
figcaption { margin-top: 10px; color: var(--dim); font: 400 0.75rem/1.6 var(--mono); font-variation-settings: "wdth" 87.5; }

.prose {
  margin-top: 48px;
  font-family: var(--serif); font-variation-settings: normal;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.7;
}
.prose > * { margin: 0 0 1.1em; }
.prose h1, .prose h2, .prose h3 {
  margin: 2.2em 0 0.6em;
  font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.25 var(--mono); font-variation-settings: "wdth" 75;
  letter-spacing: -0.02em;
}
.prose h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
.prose .hash { color: var(--dim); font-weight: 400; }
.prose a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--plum); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose ul > li::marker { content: "- "; color: var(--dim); font-family: var(--mono); }
.prose blockquote {
  margin-left: 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--teal); color: var(--dim); font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose :not(pre) > code {
  font-family: var(--mono); font-size: 0.82em; font-variation-settings: "wdth" 87.5;
  background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px;
}
.prose img { border-radius: 2px; }

.prose p, .prose li { text-wrap: pretty; }
.prose blockquote { hanging-punctuation: first; }
/* **Note:** paragraphs, marked the way Vim's help marks them: the word on Todo yellow */
.prose .note { padding: 2px 0 2px 18px; border-left: 3px solid var(--search); }
.prose .note > strong:first-child {
  margin-right: 0.3em; padding: 0.1em 0.4em; border-radius: 2px;
  background: var(--search); color: var(--ink);
  font: 700 0.75em var(--mono); font-variation-settings: "wdth" 87.5; letter-spacing: 0.04em; text-transform: uppercase;
}

/* code: each block is a small Vim window with its own line numbers and statusline.
   It never wraps, a wrong line break is a wrong command */
.code { font-family: var(--mono); }
.code pre {
  margin: 0; padding: 16px 16px 16px 12px; overflow-x: auto; white-space: pre;
  background: var(--code-bg); border-radius: 3px 3px 0 0;
  font-size: 0.875rem; line-height: 1.65; font-variation-settings: "wdth" 87.5;
}
.code pre code { counter-reset: ln; }
.code .line { counter-increment: ln; }
.code .line::before {
  content: counter(ln); content: counter(ln) / "";
  display: inline-block; min-width: 2ch; margin-right: 2ch; text-align: right;
  color: var(--dim); opacity: 0.6; user-select: none;
}
/* the statusline is dim until the block is the cursor line, like an inactive window */
.code-status {
  display: flex; align-items: center; gap: 2ch;
  padding: 3px 6px 3px 12px; background: var(--line); color: var(--dim);
  font-size: 0.75rem; border-radius: 0 0 3px 3px;
  transition: background-color 0.15s, color 0.15s;
}
.row.cursor .code-status { background: var(--ink); color: var(--bg); }
.yank { all: unset; cursor: pointer; margin-left: auto; padding: 0 6px; border-radius: 2px; }
.yank:hover, .yank:focus-visible { background: var(--plum); color: var(--on); }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt, .chroma .ow { color: var(--plum); }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx,
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo { color: var(--ochre); }
.chroma .nf, .chroma .fm, .chroma .nb, .chroma .bp, .chroma .nc, .chroma .nt, .chroma .na, .chroma .nd { color: var(--teal); }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cp, .chroma .cpf, .chroma .cs { color: var(--dim); font-style: italic; }
.chroma .err { color: var(--err); }

.vid video { width: 100%; aspect-ratio: 2060 / 1292; background: var(--code-bg); border-radius: 3px; }

.eof { margin-top: 64px; font-family: var(--mono); }
.buffers { display: grid; gap: 4px; margin: 24px 0; }
.buffer { display: flex; gap: 1ch; padding: 10px 0; text-decoration: none; font-size: 0.875rem; }
.buffer .cmd { color: var(--teal); }
.buffer .t { font-weight: 600; }
.buffer:hover .t { color: var(--plum); text-decoration: underline; }
.sign { margin: 24px 0 0; color: var(--dim); font-size: 0.8125rem; }
.sign a { color: var(--ink); }

/* ---------- :%!xxd and :set list ---------- */
.buf.xxd { max-width: 1100px; }
.xxd .row { white-space: pre; font-size: 0.875rem; font-variation-settings: "wdth" 87.5; }
.eol { color: color-mix(in srgb, var(--teal) 70%, var(--bg)); }
::highlight(list) { color: color-mix(in srgb, var(--teal) 70%, var(--bg)); }
/* :Limelight, after the plugin: everything but the cursor line fades */
#buf :is(.row, .folds, .helphead, .hero-cmd, .dump) { transition: opacity 0.2s; }
.limelight #buf :is(.row, .folds, .helphead, .hero-cmd, .dump):not(.cursor) { opacity: 0.28; }

/* ---------- :Tutor ---------- */
.prose .done { margin-left: 0.5ch; color: var(--teal); font-weight: 400; }

/* ---------- netrw ---------- */
.netrw .head { color: var(--dim); font-size: 0.8125rem; line-height: 1.75; }
.netrw .head .rule { white-space: nowrap; overflow: hidden; }
.netrw .head .sorted { color: var(--plum); }
/* phones have no j, k or s: the help line says what a tap does instead */
.netrw .head .taps { display: none; }
@media (hover: none) {
  .netrw .head .keys { display: none; }
  .netrw .head .taps { display: inline; }
}
.entries { list-style: none; margin: 24px 0 8px; padding: 0; }
.entries .up a { display: inline-block; padding: 8px 0; color: var(--teal); text-decoration: none; }
.entries .entry { display: grid; grid-template-columns: 1fr auto; gap: 4px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.entries .entry a { grid-row: span 2; text-decoration: none; }
.entries .fname { display: block; color: var(--teal); font-size: 0.8125rem; }
.entries .t { display: block; margin-top: 4px; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; font-variation-settings: "wdth" 75; text-wrap: balance; }
.entries .x { display: block; margin-top: 8px; color: var(--dim); font-size: 0.8125rem; max-width: 60ch; text-wrap: pretty; }
.entries .d, .entries .sz { color: var(--dim); font-size: 0.75rem; text-align: right; }
.entries a:hover .t { color: var(--plum); }

/* ---------- statusline ---------- */
.status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; font-size: 0.75rem; }
.status .bar { display: flex; align-items: stretch; background: var(--ink); color: var(--bg); }
.status .mode { padding: 6px 12px; background: var(--mode); color: var(--mode-ink); font-weight: 700; transition: background-color 0.15s, color 0.15s; }
.status .file { flex: 1; padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .meta { padding: 6px 12px; color: var(--line); white-space: nowrap; }
.status .pct { min-width: 56px; padding: 6px 12px; background: var(--teal); color: var(--on); text-align: right; }
.cmdline { display: flex; gap: 2px; min-height: 28px; padding: 6px 12px; background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.cmdline input { all: unset; flex: 1; caret-color: var(--plum); }
.cmdline .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdline .msg.err { color: var(--err); }
.cmdline .more { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmdline .more pre { margin: 0; overflow-x: auto; font: inherit; line-height: 1.2; color: var(--dim); animation: redraw 0.4s steps(13) both; }

/* theme switch and page loads: the page repaints top to bottom like a terminal, or like :e */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: redraw 0.55s steps(16) both; }
@keyframes redraw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
/* the cursor bar on the repaint's leading edge, with the rows it just drew still glowing behind it.
   It exists only during a transition, on page loads too, and keeps the same duration and steps as redraw. */
.redraw-edge {
  display: none; position: fixed; inset: 0; z-index: 300; pointer-events: none; view-transition-name: redraw-edge;
  --glow: color-mix(in srgb, var(--plum) 16%, transparent);
  background: linear-gradient(to top, var(--plum) 0 2px, var(--glow) 2px, transparent 44px);
}
:root:active-view-transition .redraw-edge { display: block; }
::view-transition-group(redraw-edge) { animation: none; }
::view-transition-old(redraw-edge) { animation: none; opacity: 0; }
::view-transition-new(redraw-edge) { animation: sweep 0.55s steps(16) both; }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* the theme switch scans instead: editor.js animates both pseudos band by band, each band printed
   across, so here the bar becomes one band tall with its glow trailing behind the print head */
:root:is([data-redraw="down"], [data-redraw="up"])::view-transition-new(root),
:root:is([data-redraw="down"], [data-redraw="up"])::view-transition-new(redraw-edge) { animation: none; }
:root:is([data-redraw="down"], [data-redraw="up"]) .redraw-edge {
  bottom: auto; height: calc(100% / var(--bands));
  background: linear-gradient(to left, var(--plum) 0 3px, var(--glow) 3px, transparent 72px);
}
:root[data-redraw="up"] .redraw-edge { background: linear-gradient(to right, var(--plum) 0 3px, var(--glow) 3px, transparent 72px); }
/* the text repaints in plain ink and each highlight group's color arrives after, one group at a time */
:root[data-syntax-off~="comment"] :is(#buf, header.top) { --dim: var(--ink); }
:root[data-syntax-off~="string"] :is(#buf, header.top) { --ochre: var(--ink); }
:root[data-syntax-off~="keyword"] :is(#buf, header.top) { --plum: var(--ink); }
:root[data-syntax-off~="function"] :is(#buf, header.top) { --teal: var(--ink); }
/* reduced motion: a short crossfade, no sweep and no bar */
:root[data-redraw="fade"] .redraw-edge { display: none; }
:root[data-redraw="fade"]::view-transition-new(root) { animation: fade-in 0.15s ease-out both; }
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 720px) {
  :root { --gutter: 28px; --pad: 16px; }
  header.top { padding-top: 16px; gap: 0 16px; }
  header.top nav { gap: 0 16px; }
  .buf { padding-top: 32px; }
  .hero-cmd { margin-top: 12px; }
  .row::before { font-size: 0.625rem; width: calc(var(--gutter) - 8px); }
  .home .entry { grid-template-columns: 1fr; gap: 4px; }
  .home .entry .go { display: none; }
  .twocol { grid-template-columns: 1fr; gap: 0; }
  .helphead { margin-top: 72px; }
  .status .meta { display: none; }
  .entries .entry { grid-template-columns: auto 1fr; gap: 4px 0; }
  .entries .entry a { grid-column: 1 / -1; grid-row: auto; margin-bottom: 4px; }
  .entries .d, .entries .sz { text-align: left; }
  .entries .sz::before { content: "\2002\00b7\2002"; content: "\2002\00b7\2002" / ""; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- touch and small screens ---------- */
.status .key {
  all: unset; cursor: pointer;
  padding: 6px 12px; border-right: 1px solid color-mix(in srgb, var(--bg) 25%, transparent);
  font-weight: 700;
}
.status .key:hover, .status .key:focus-visible { background: var(--plum); color: var(--on); }
.cmdline { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
  .cmdline:has(.msg:empty) { display: none; }
  .status:has(.cmdline .msg:empty) .bar { padding-bottom: env(safe-area-inset-bottom); }
}
.buf { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }

@media (pointer: coarse) {
  header.top nav a, header.top .bg { padding: 10px 0; }
  .status .key { padding: 10px 16px; font-size: 0.875rem; }
  .fold { padding: 8px 0; }
  .buffer { padding: 14px 0; }
  .yank { padding: 6px 12px; }
  .home .entry .go { display: none; }
}

/* ---------- :q! ---------- */
.shell {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: #182017; color: #D3DCC6;
  font-family: var(--mono); font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.0625rem);
  animation: redraw 0.55s steps(16) both;
}
.shell pre { margin: 0; white-space: pre-wrap; font: inherit; }
.shell .ps { color: #72BCC3; }
.shell .caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: #D3DCC6; animation: blink 1s steps(1) infinite; }
.shell .note { margin: 0; max-width: 46ch; color: #86927F; }
.shell .reopen {
  all: unset; cursor: pointer; align-self: flex-start;
  padding: 10px 16px; border: 1px solid #86927F; border-radius: 3px; color: #D3DCC6;
}
.shell .reopen:hover, .shell .reopen:focus-visible { background: #E07EA6; border-color: #E07EA6; color: #182017; }
.in-shell body { overflow: hidden; }

/* ---------- print: the buffer without the editor around it ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #FFFFFF; --ink: #1E261C; --plum: #8B2F5E; --ochre: #7B5100; --teal: #1B626B;
    --dim: #525C4C; --line: #CBD5BF; --code-bg: #F1F4EC; --on: #FFFFFF; --err: #A1261B;
    color-scheme: light;
  }
  @page { margin: 18mm 16mm; }
  #bits, .redraw-edge, .skip, .status, .shell, header.top nav, .dump, .folds, .hero-cmd, .blk,
  .tilde, .buffers, .yank, .photo .hint, .vid video, .home .entry .go { display: none !important; }
  .vid figcaption::before { content: "[video] "; }
  header.top { padding: 0; }
  .buf, .buf.post { max-width: none; padding: 32px 0 0; }
  .row::before, .row.cursor::after { display: none; }
  .code-status, .row.cursor .code-status { background: var(--code-bg); color: var(--dim); border-top: 1px solid var(--line); }
  #buf :is(.row, .folds, .helphead) { opacity: 1 !important; }
  ::highlight(vcursor) { background-color: transparent; color: inherit; }
  .prose a[href^="http"]::after { content: " <" attr(href) ">"; color: var(--dim); font: 0.75em var(--mono); overflow-wrap: anywhere; }
  .prose :is(h1, h2, h3), .helphead { break-after: avoid; }
  .code, figure, blockquote, .entry, .proj { break-inside: avoid; }
}