/* =====================================================================
   v9 · v7 + real evidence. Loaded after v7.css; overrides only.
   Cards borrow Closed Form's boxes: a filled surface one step off the page,
   a top light, a soft shadow, mono badge + meta row, hairline divider, footer row.
   Each project shows a real preview of the thing itself.
   ===================================================================== */

:root, html[data-theme='dark'] {
  --pc-bg: #111216;
  --pc-bg-hover: #14161a;
  --pc-shot-bg: #0d0e11;
  --pc-ring: rgb(255 255 255 / 0.06);
  --pc-ring-hover: rgb(255 255 255 / 0.1);
  --pc-top: rgb(255 255 255 / 0.05);
  --pc-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --pc-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 32px -10px rgb(0 0 0 / 0.75);
  --pc-badge: rgb(255 255 255 / 0.12);
  --g0: rgb(255 255 255 / 0.05); --g1: rgb(255 255 255 / 0.2); --g2: rgb(255 255 255 / 0.38); --g3: rgb(255 255 255 / 0.6); --g4: rgb(255 255 255 / 0.88);
}
html[data-theme='light'] {
  --pc-bg: #ffffff;
  --pc-bg-hover: #ffffff;
  --pc-shot-bg: #eceef1;
  --pc-ring: rgb(14 15 18 / 0.07);
  --pc-ring-hover: rgb(14 15 18 / 0.12);
  --pc-top: rgb(255 255 255 / 1);
  --pc-shadow: 0 1px 2px rgb(14 15 18 / 0.05), 0 8px 24px -10px rgb(14 15 18 / 0.1);
  --pc-shadow-hover: 0 1px 2px rgb(14 15 18 / 0.06), 0 14px 32px -12px rgb(14 15 18 / 0.16);
  --pc-badge: rgb(14 15 18 / 0.14);
  --g0: rgb(14 15 18 / 0.06); --g1: rgb(14 15 18 / 0.2); --g2: rgb(14 15 18 / 0.38); --g3: rgb(14 15 18 / 0.6); --g4: rgb(14 15 18 / 0.88);
}

/* ---------- hero: name + tagline sized to the avatar ---------- */
.who h1 { font-size: 3rem; line-height: 1.05; }
.who .meta { font-size: 0.875rem; margin-block-start: var(--s-2); }

/* ---------- the box ---------- */
.pc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-lg); background: var(--pc-bg); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--pc-ring), inset 0 1px 0 var(--pc-top), var(--pc-shadow);
  transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out), translate 200ms var(--ease-out);
}
.pcs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pc-wide { grid-column: 1 / -1; flex-direction: row; }

/* preview: inset 6px, radius 6 = concentric with the 12px box */
.pc-shot { position: relative; margin: 6px 6px 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); background: var(--pc-shot-bg); box-shadow: inset 0 0 0 1px var(--pc-ring); }
.pc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: scale 400ms var(--ease-out); }
.pc-shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pc-ring); pointer-events: none; }
html[data-theme='dark'] .th-light, html[data-theme='light'] .th-dark { display: none; }

.pc-wide .pc-shot { order: 2; flex: 0 0 56%; margin: 6px; aspect-ratio: 1148 / 578; align-self: center; }
.pc-book .pc-shot { aspect-ratio: auto; align-self: stretch; flex-basis: 44%; display: grid; place-items: center; padding: var(--s-4) 0; }
.pc-book .pc-shot img { position: static; width: auto; height: 11.5rem; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -8px rgb(0 0 0 / 0.55); }

.pc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: var(--s-4) var(--s-5) var(--s-4); }
.pc-wide .pc-body { padding: var(--s-5); }

.pc-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-caption); color: var(--color-text-tertiary); }
.badge { padding: 1px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--pc-badge); color: var(--color-text-secondary); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pc-live { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--color-text-secondary); }

.pc-name { margin: var(--s-3) 0 0; font-size: var(--text-title); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.pc-main { color: inherit; text-decoration: none; }
.pc-main::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.pc-desc { margin: var(--s-1) 0 0; font-size: var(--text-ui); line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; }

.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: auto; padding-block-start: var(--s-3); border-block-start: 1px solid var(--pc-ring); font-size: var(--text-caption); color: var(--color-text-tertiary); }
.pc-body > .pc-desc { margin-block-end: var(--s-4); }
.pc-status { display: inline-flex; align-items: center; gap: var(--s-2); }
.sq { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.pc-links { display: inline-flex; gap: var(--s-3); position: relative; z-index: 1; }
.pc-link { color: var(--color-text-tertiary); text-decoration: underline; text-decoration-color: var(--pc-badge); text-underline-offset: 3px; padding-block: 6px; }

/* text-only box (now) */
.pc-text .pc-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.pc-text .pc-desc { margin-block-end: 0; }

/* activity box: one square per day */
.pc-act .pc-meta { justify-content: space-between; }
.pc-act .arr { width: 1rem; height: 1rem; }
.grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-block: var(--s-4); }
.grid i, .legend i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--g0); }
.grid .e { background: none; }
.l1 { background: var(--g1) !important; } .l2 { background: var(--g2) !important; } .l3 { background: var(--g3) !important; } .l4 { background: var(--g4) !important; }
.legend { display: inline-flex; align-items: center; gap: 3px; }
.legend i { width: 9px; }

@media (hover: hover) {
  .pc:has(.pc-main:hover), .pc-act:hover { background: var(--pc-bg-hover); box-shadow: inset 0 0 0 1px var(--pc-ring-hover), inset 0 1px 0 var(--pc-top), var(--pc-shadow-hover); }
  .pc-link:hover { color: var(--color-text); text-decoration-color: currentColor; }
  .pc-act:hover .arr { color: var(--color-text); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pc:has(.pc-main:hover), .pc-act:hover { translate: 0 -2px; }
  .pc:has(.pc-main:hover) .pc-shot img { scale: 1.02; }
  .pc-book:has(.pc-main:hover) .pc-shot img { scale: 1.03; }
}
.pc-main:focus-visible { outline: none; }
.pc:has(.pc-main:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 2px; }
.pc:active:has(.pc-main:active) { translate: 0 0; }

@media (max-width: 40rem) {
  .who h1 { font-size: 2.5rem; }
  .pcs { grid-template-columns: 1fr; }
  .pc-wide { flex-direction: column; }
  .pc-wide .pc-shot { order: 0; flex: none; margin: 6px 6px 0; align-self: stretch; }
  .pc-book .pc-shot { padding: var(--s-5) 0; }
}

/* =====================================================================
   v9.1 · fewer boxes. Boxes belong to projects only (they hold the previews).
   No rings, no shadows, no dividers: soft fills. Neutral (not blue) dark.
   now = one live line · writing = plain list · activity = grid on the page.
   ===================================================================== */
:root, html[data-theme='dark'] {
  --color-bg: #0c0c0c; --color-glow: rgb(255 255 255 / 0.035);
  --color-text: #ededed; --color-text-secondary: #a8a8a8; --color-text-tertiary: #808080;
  --color-hairline: rgb(255 255 255 / 0.08); --color-selection: #2e2e2e; --color-overlay: #141414;
  --color-hill-edge: #3d3d3d; --color-hill-line: #1f1f1f; --color-scrollbar: #2b2b2b;
  --pc-bg: #151515; --pc-bg-hover: #191919; --pc-shot-bg: #1b1b1b;
}
html[data-theme='light'] {
  --color-bg: #f5f5f5; --color-glow: rgb(255 255 255 / 0.8);
  --color-text: #111111; --color-text-secondary: #454545; --color-text-tertiary: #616161;
  --color-selection: #d9d9d9; --color-hill-edge: #bdbdbd; --color-hill-line: #e0e0e0; --color-scrollbar: #d0d0d0;
  --pc-bg: #ffffff; --pc-bg-hover: #ffffff; --pc-shot-bg: #ededed;
}
.pc, .pc:has(.pc-main:hover) { box-shadow: none !important; }
.pc-shot, .pc-shot::after { box-shadow: none; }
.pc-foot { border: 0; padding-block-start: var(--s-4); }
.pc-name { margin-top: var(--s-1); }
.pc-body > .pc-desc { margin-block-end: 0; }
.pc-wide .pc-body { justify-content: center; }
.pc-wide .pc-foot { margin-block-start: var(--s-5); }
html[data-theme='light'] .pc:has(.pc-main:hover) { background: #fbfbfb; }
.pc-link { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }

/* now: a single live status line */
.now-line { margin-block-start: var(--s-6); }
.now-line p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4em; margin: 0; font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-secondary); }
.now-line strong { font-weight: 600; color: var(--color-text); }
.now-k { font-size: var(--text-caption); color: var(--color-text-tertiary); margin-inline-end: 0.35em; }
.pulse { position: relative; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text); margin-inline-end: 0.35em; }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pulse 2.4s var(--ease-out) infinite; }
  @keyframes pulse { 0% { scale: 1; opacity: 0.5; } 70%, 100% { scale: 2.6; opacity: 0; } }
}
html.paused .pulse::after, [data-paused] .pulse::after { animation: none; }

/* writing: a plain list */
.wlist { list-style: none; margin: 0; padding: 0; }
.wlist a { display: flex; align-items: baseline; gap: var(--s-4); padding-block: var(--s-2); color: var(--color-text); text-decoration: none; }
.w-t { font-size: var(--text-title); font-weight: 500; }
.wlist a::after { content: ''; order: 1; flex: 1; border-block-end: 1px dotted color-mix(in srgb, var(--color-text-tertiary) 45%, transparent); translate: 0 -4px; }
.w-d { order: 2; font-size: var(--text-caption); color: var(--color-text-tertiary); }
@media (hover: hover) { .wlist a:hover .w-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }

/* activity: the grid straight on the page */
.act .grid { margin-block: 0 var(--s-3); }
.act-foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-caption); color: var(--color-text-tertiary); }
.act-cap { margin: var(--s-3) 0 0; font-size: var(--text-caption); }
.act-cap a { color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { .act-cap a:hover { color: var(--color-text); text-decoration-color: currentColor; } }


/* =====================================================================
   v9.2 · one component per kind of thing.
   projects = screens · now = a receipt with a torn edge · writing = a sheet of paper.
   All use the same fill as the project cards; no rings, no shadows.
   ===================================================================== */
.now-line p { display: block; }
.rcpt { --z: 5px; width: min(100%, 300px); background: var(--pc-bg); padding: var(--s-4) var(--s-5) calc(var(--s-4) + var(--z)); font-size: var(--text-caption);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; border-radius: 6px 6px 0 0; }
.rcpt p { margin: 0; }
.rcpt-h { display: flex !important; align-items: center; gap: var(--s-2); color: var(--color-text-tertiary); padding-block-end: var(--s-3); margin-block-end: var(--s-3) !important; border-block-end: 1px dashed color-mix(in srgb, var(--color-text-tertiary) 40%, transparent); }
.rcpt-h .pulse { margin: 0; }
.rcpt-r { display: flex !important; align-items: baseline; gap: var(--s-2); color: var(--color-text-secondary); }
.rcpt-n { color: var(--color-text); }
.rcpt-r::after { content: ''; order: 1; flex: 1; border-block-end: 1px dotted color-mix(in srgb, var(--color-text-tertiary) 50%, transparent); translate: 0 -3px; }
.rcpt-v { order: 2; }

.sheet { position: relative; display: flex; flex-direction: column; gap: var(--s-2); width: min(100%, calc(50% - var(--s-3) / 2)); padding: var(--s-5); background: var(--pc-bg); border-radius: 6px; color: var(--color-text); text-decoration: none; transition: background 0.2s var(--ease-out);
  --fold: 18px; clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%); }
.sheet::before { content: ''; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); background: linear-gradient(225deg, transparent 50%, var(--pc-shot-bg) 50%); border-bottom-left-radius: 3px; }
.sheet-d { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.sheet-t { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; }
.sheet-x { font-size: var(--text-ui); line-height: 1.6; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); }
@media (hover: hover) { .sheet:hover { background: var(--pc-bg-hover); } .sheet:hover .sheet-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }
@media (max-width: 640px) { .sheet { width: 100%; } }

/* v9.2 · dark: the neutral greys, one step darker, with clearer steps between page, cards and text */
:root, html[data-theme='dark'] {
  --color-bg: #080808; --color-glow: rgb(255 255 255 / 0.03);
  --color-text: #f0f0f0; --color-text-secondary: #b0b0b0; --color-text-tertiary: #858585;
  --color-hairline: rgb(255 255 255 / 0.08); --color-selection: #2a2a2a; --color-overlay: #101010;
  --color-hill-edge: #3a3a3a; --color-hill-line: #1a1a1a; --color-scrollbar: #282828;
  --pc-bg: #121212; --pc-bg-hover: #161616; --pc-shot-bg: #181818;
}
.pc-book .pc-shot img { box-shadow: none; }

/* search pill (from the early versions): soft filled pill, "search" + ctrl K */
.cmdk-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 34px; padding: 0 6px 0 12px; border: 0; border-radius: 999px; background: var(--pc-bg); color: var(--color-text-secondary); cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.cmdk-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cmdk-l { font-size: var(--text-caption); margin-inline-end: var(--s-1); }
.cmdk-btn kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--color-hairline); border-radius: 6px; background: var(--color-bg); font-size: 11px; line-height: 1; color: var(--color-text-secondary); box-shadow: none; }
@media (hover: hover) { .cmdk-btn:hover { background: var(--pc-bg-hover); color: var(--color-text); } }
.cmdk-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* search: match the early version exactly: a rounded rectangle (not a pill), translucent fill, faint edge */
.cmdk-btn { height: 40px; padding: 0 8px 0 14px; gap: 10px; border-radius: 10px; background: color-mix(in srgb, var(--pc-bg) 85%, transparent); border: 1px solid var(--color-hairline); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cmdk-l { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); margin-inline-end: 2px; }
.cmdk-btn kbd { height: 26px; min-width: 26px; padding: 0 7px; border-radius: 6px; font-size: 12px; background: transparent; border: 1px solid color-mix(in srgb, var(--color-text-tertiary) 45%, transparent); }
.cmdk-l { font-family: var(--font-mono); font-weight: 400; }

/* =====================================================================
   v9.3 · one system. every block = .pc: mono caption, title, grey text, mono foot.
   same fill, same corners, same padding. one quiet detail each.
   ===================================================================== */
.pc { box-shadow: none; }
.blk-cap { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--text-caption); color: var(--color-text-tertiary); }
.blk-cap .pulse { margin: 0; }
.blk .pc-name { margin-block-start: var(--s-2); }
.blk .pc-foot { margin-block-start: auto; }
.blk .pc-body { padding: var(--s-4) var(--s-5); }
.blk-now .pc-name { margin-block-end: var(--s-4); }
.now-sec { margin-block-start: var(--s-6); }
/* writing: folded corner on the essay; dashed outline on "all writing" */
.sheet { --fold: 18px; clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%); }
.sheet::before { content: ''; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); background: linear-gradient(225deg, transparent 50%, var(--pc-shot-bg) 50%); border-bottom-left-radius: 3px; z-index: 1; }
.sheet-x { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.blk-all { background: transparent; outline: 1px dashed color-mix(in srgb, var(--color-text-tertiary) 45%, transparent); outline-offset: -1px; }
.blk-num { margin: var(--s-3) 0 0; font-size: var(--text-caption); color: var(--color-text-tertiary); }
.blk-num span { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text); margin-inline-end: 4px; }
.blk-all .pc-name { margin-block: auto var(--s-4); padding-block-start: var(--s-5); }
@media (hover: hover) { .blk-all:has(.pc-main:hover) { background: var(--pc-bg); } }
@media (max-width: 640px) { .pcs { grid-template-columns: 1fr; } }
/* closing sentence with inline icons */
.reach { margin-block-start: var(--gap-section, var(--s-7)); color: var(--color-text-secondary); line-height: 1.9; }
.reach a { display: inline-flex; align-items: baseline; gap: 5px; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.reach a svg { width: 13px; height: 13px; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.4; }
.reach a .u { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { .reach a:hover .u { text-decoration-color: currentColor; } }
/* search: same scale as the nav, lighter */
.cmdk-btn { height: 32px; padding: 0 5px 0 10px; gap: 7px; border-radius: 8px; }
.cmdk-btn svg { width: 13px; height: 13px; }
.cmdk-l { font-size: var(--text-caption); font-weight: 400; color: var(--color-text-tertiary); margin-inline-end: 2px; }
.cmdk-btn kbd { height: 20px; min-width: 20px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; font-weight: 400; color: var(--color-text-tertiary); border-color: var(--color-hairline); }
.icon-btn { height: 32px; width: 32px; }
/* v9.3 fixes: the sheet fills its grid cell; the dashed card is just a count + link */
.sheet { width: auto; padding: 0; gap: 0; display: flex; }
.blk-all .pc-foot .pc-main { color: var(--color-text-secondary); }
.blk-all .pc-foot .pc-main::after { border-radius: var(--r-lg); }
@media (hover: hover) { .blk-all:has(.pc-main:hover) .pc-main { color: var(--color-text); } }
.blk-num { margin-block: var(--s-3) var(--s-4); }

/* =====================================================================
   v9.4 · one type scale, six sizes:
   48 name · 18 prose (intro + closing) · 16 titles · 15 body + nav · 13 mono captions · 12 keycaps
   ===================================================================== */
.who .meta { font-size: var(--text-caption); }
.reach { font-size: 1.125rem; line-height: 1.6; }
.reach a svg { width: 15px; height: 15px; }
/* search: written exactly like the nav links, "[ctrl k] search", no box */
.cmdk-btn { display: inline-flex; align-items: baseline; gap: var(--s-1); height: auto; min-height: 0; padding: var(--s-2) 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: var(--text-ui); color: var(--color-text-secondary); }
.cmdk-btn kbd { all: unset; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-tertiary); transition: color 150ms var(--ease-out); }
.tools { align-items: center; gap: var(--s-4); }
@media (hover: hover) { .cmdk-btn:hover { background: none; color: var(--color-text); } .cmdk-btn:hover kbd { color: var(--color-text-secondary); } .cmdk-btn:hover .u { background-size: 100% 1px; background-position: 0% 100%; } }
@media (max-width: 640px) { .cmdk-btn kbd { display: none; } }
/* now: one caption row with status on the right, then title and subtitle */
.blk-now .pc-body { padding: var(--s-4) var(--s-5); }
.blk-now .blk-cap .sep { color: var(--color-text-tertiary); opacity: 0.6; }
.blk-r { margin-inline-start: auto; }
.blk-now .pc-name { margin-block: var(--s-3) 0; }
.blk-now .pc-desc { margin: var(--s-1) 0 0; }
/* archive card: count as a title, same as every other block */
.blk-count { margin-block: var(--s-2) var(--s-4); }

/* =====================================================================
   v9.5 · search = magnifier + two keycaps, no label, no outer box.
   closed form fills its frame like the other screens. footer ends level with the top.
   ===================================================================== */
.cmdk-btn { display: inline-flex; align-items: center; gap: 6px; height: 2.5rem; min-height: 0; padding: 0 var(--s-1); border: 0; border-radius: var(--r-sm); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--color-text-tertiary); }
.cmdk-btn svg { width: 15px; height: 15px; margin: 0 2px 0 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.cmdk-btn kbd { all: unset; display: inline-grid; place-items: center; box-sizing: border-box; height: 20px; min-width: 20px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--color-text-tertiary) 40%, transparent); border-radius: 4px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; color: var(--color-text-tertiary); transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
@media (hover: hover) { .cmdk-btn:hover { background: none; color: var(--color-text); } .cmdk-btn:hover kbd { color: var(--color-text-secondary); border-color: color-mix(in srgb, var(--color-text-tertiary) 70%, transparent); } }
@media (max-width: 640px) { .cmdk-btn kbd { display: none; } }
.post .tldr { margin-block-end: calc(-1 * var(--s-3)); color: var(--color-text-tertiary); }
.post .soon { color: var(--color-text-tertiary); }
/* v9.5 · now: same dashed outline as the archive card (it isn't built yet, so it's an outline, not a filled card) */
.blk-now { background: transparent; outline: 1px dashed color-mix(in srgb, var(--color-text-tertiary) 45%, transparent); outline-offset: -1px; }
@media (hover: hover) { .blk-now:hover { background: transparent; } }
/* v9.5 · footer ends with the same gap the header starts with */
footer.sis .sis-in { padding-block-end: var(--s-7); }
@media (max-width: 40rem) { footer.sis .sis-in { padding-block-end: var(--s-4); } }
/* v9.5 · closed form: preview fills the card height, 6px on top, right and bottom like the other screens */
@media (min-width: 641px) { .pc-wide:not(.pc-book) .pc-shot { align-self: stretch; aspect-ratio: auto; margin: 6px; } }

/* phones: show the last 26 weeks so each square stays readable */
.act-half { display: none; }
@media (max-width: 640px) {
  .legend i:first-of-type { margin-inline-start: 4px; } .legend i:last-of-type { margin-inline-end: 4px; }
  .act .grid i:nth-child(-n+182) { display: none; }
  .act-full { display: none; } .act-half { display: inline; }
}