/* Working Notes: product layer on top of family.css.

   Identity: an independent journal kept in the margins. Serif reading
   copy on warm paper, a mono "ledger" line above every entry, margin notes
   (the owner's voice) set apart from ruled facts, and checkpoints as real
   tick boxes. One accent: mulberry ink, used for links, focus, the current
   state and the featured label only. Status is text plus shape (dashed =
   sample, solid ink = draft), never colour alone.

   Token layers: family.css holds the shared neutrals, type scale, spacing
   and motion tokens. This file adds the accent, reading tokens, concentric
   radii and the script-aware font stacks.

   Breakpoints (media queries cannot read custom properties):
     600px   lists gain a date column
     769px   to 1099px: the header brand drops its subtitle (one-row header)
     834px   tablet: two-column tool entries and workflows
     1024px  home page columns
     1200px  note pages gain a sticky contents rail
   Review widths: 390, 834 and 1440 CSS pixels; 200% zoom on 1440 behaves
   as 720 and uses the single-column layout.

   Motion: only transform and opacity animate, 120 to 240ms, never more
   than 400ms; reduced motion removes every spatial movement.               */

:root {
  --accent: #7a2f5e;
  --accent-hover: #5f2149;
  --accent-soft: #f0e2ea;
  --on-accent: #fbf9f5;
  --focus: #7a2f5e;
  --caution: #8a4a00;
  --code-bg: #efeae1;
  --callout-bg: #efeae1;
  --margin-bg: #fbf9f5;

  /* Script-aware stacks: Latin faces first so Latin glyphs keep their
     design, then CJK faces for Han characters, then the generic family. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia,
    "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-read: var(--font-display);

  /* Reading */
  --read-size: 1.125rem;
  --read-leading: 1.7;
  --measure: 66ch;          /* Latin: about 66 characters per line */
  --measure-cjk: 36em;      /* Chinese: about 36 characters per line */
  --text-title: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);

  /* Concentric geometry: an inner radius is the outer radius minus the
     inset between the two edges. */
  --radius-outer: 12px;
  --inset: 4px;
  --radius-inner: calc(var(--radius-outer) - var(--inset));
  --hairline: 1px solid var(--border);
  --rail: 15rem;

  --dur-motion: 240ms;
}

[data-theme="dark"] {
  --accent: #e6a3cb;
  --accent-hover: #f2c6e0;
  --accent-soft: #35202c;
  --on-accent: #1f1219;
  --focus: #e6a3cb;
  --caution: #f0b66a;
  --code-bg: #1b1a17;
  --callout-bg: #1c1a17;
  --margin-bg: #1f1d1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #e6a3cb;
    --accent-hover: #f2c6e0;
    --accent-soft: #35202c;
    --on-accent: #1f1219;
    --focus: #e6a3cb;
    --caution: #f0b66a;
    --code-bg: #1b1a17;
    --callout-bg: #1c1a17;
    --margin-bg: #1f1d1a;
  }
}

@media (min-width: 1024px) {
  :root {
    --read-size: 1.1875rem;
  }
}

/* Traditional Chinese prefers its own faces. */
:lang(zh-Hant),
:lang(zh-TW),
:lang(zh-HK) {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang TC", "Hiragino Sans CNS",
    "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --font-display: "Iowan Old Style", Charter, Cambria, Georgia, "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", serif;
}

/* ---- Motion policy for shared components ------------------------------- */

/* family.css fades colours and the header shadow. In this section only
   transform and opacity animate, so colour changes are immediate. */
.notes-site .btn,
.notes-site .chip,
.notes-site .nav-links a,
.notes-site .site-header {
  transition-property: transform, opacity;
}

/* Under 200% zoom or on short screens the sticky header would take a
   large share of the viewport; let it scroll away. */
@media (max-height: 520px) {
  .site-header {
    position: static;
  }

  html {
    scroll-padding-top: var(--space-4);
  }
}

/* Controls that need JavaScript (search, filters, copy buttons) must not
   appear without it. family.css hides .js-only, but later component rules
   such as .btn and .finder set display with the same specificity and would
   win, so the rule is restated more strongly here. With JavaScript, the
   display those components need is restored explicitly ("revert" would
   fall back to the browser default and lose the flex alignment). */
html:not(.js) .js-only {
  display: none;
}

.js .copy-btn.js-only {
  display: inline-flex;
}

/* Tablet widths: the brand line drops its subtitle so the brand, the five
   section links and the theme button fit on one row instead of wrapping
   the sticky header to two. The subtitle returns from 1100px. */
@media (min-width: 769px) and (max-width: 1099px) {
  .notes-site .brand-sub {
    display: none;
  }
}

/* ---- Small shared pieces ------------------------------------------------ */

.arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.text-link:hover .arrow {
  transform: translateX(3px);
}

.label,
.label-title {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.label-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-draft {
  border-style: solid;
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.hint {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.page-back {
  margin: var(--space-3) 0 0;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
}

.empty-inline {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: var(--hairline);
}

.section-title .text-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.section-title {
  border-bottom-width: 1px;
}

/* ---- Entries: the ledger line, title and summary ----------------------- */

.entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entries li + li {
  margin-top: 0;
}

.entry {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: var(--hairline);
}

.entry.has-num {
  grid-template-columns: 2.75rem minmax(0, 1fr);
}

.entry-num {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.3;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.entry-kind {
  color: var(--text);
  font-weight: 600;
}

.entry-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.entry-title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text);
  text-decoration: none;
}

/* The whole row is the target; the ring follows the row. */
.entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.entry-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.entry-title a:focus-visible {
  outline: none;
}

.entry-title a:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.entry-summary {
  max-width: 60ch;
  margin: 0;
  color: var(--text-muted);
}

/* ---- Home -------------------------------------------------------------- */

.masthead {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-7);
  border-bottom: 2px solid var(--rule);
}

.masthead h1 {
  max-width: 17em;
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.125rem);
}

.intro {
  max-width: 54ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
}

.intro-text {
  margin-bottom: var(--space-2);
  font-family: var(--font-read);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.55;
}

.intro-by,
.about-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.intro-name {
  color: var(--text);
  font-weight: 600;
}

/* The featured note is the one lifted surface on the page. */
.featured {
  align-self: end;
  padding: var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-outer);
  background: var(--surface-raised);
  box-shadow: var(--shadow-2);
  position: relative;
}

.featured-label {
  margin: 0 0 var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.featured-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.featured-title a {
  display: inline-flex;
  min-height: var(--target);
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.featured-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-outer);
}

.featured-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.featured-title a:focus-visible {
  outline: none;
}

.featured-title a:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.featured-summary {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-read);
  font-size: var(--text-md);
}

.featured-foot {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--hairline);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.featured-empty {
  padding: var(--space-2);
  box-shadow: none;
  background: transparent;
  border: 0;
}

.home-columns {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-7) 0 0;
}

.path-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: path;
}

.path-list li + li {
  margin-top: 0;
}

.path {
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
}

.path-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.path-title a,
.path-meta a,
.index-title a,
.shelf-list a,
.tool-used a,
.note-tools a,
.page-back a,
.note-eyebrow a,
.note-meta a,
.about-by a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.path-title a,
.index-title a {
  color: var(--text);
  text-decoration: none;
}

.path-title a:hover,
.index-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.path-desc {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
}

.path-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.path-count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.workflows,
.shelf {
  padding-top: var(--space-7);
}

.workflow-list {
  display: grid;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-list li + li {
  margin-top: 0;
}

.workflow {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: var(--hairline);
}

.workflow > :not(.workflow-num) {
  grid-column: 2;
}

.workflow-num {
  grid-row: 1 / span 3;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.workflow-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.workflow-title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text);
  text-decoration: none;
}

.workflow-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.workflow-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.workflow-title a:focus-visible {
  outline: none;
}

.workflow-title a:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.workflow-summary {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
}

.workflow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* A restrained shelf: names on one ruled line, not a grid of cards. */
.shelf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--hairline);
}

.shelf-list li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-5) var(--space-1) 0;
}

.shelf-list li + li {
  margin-top: 0;
  padding-left: var(--space-5);
  border-left: var(--hairline);
}

.shelf-list a {
  font-weight: 600;
}

.shelf-case {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

@media (min-width: 834px) {
  .workflow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .masthead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    padding-top: var(--space-7);
  }

  .home-columns {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
  }
}

/* ---- Index pages (topics, series) -------------------------------------- */

.index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-list li + li {
  margin-top: 0;
}

.index-row {
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: var(--hairline);
}

.index-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.index-desc {
  max-width: 60ch;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
}

.index-meta {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.topic-path,
.topic-path + section {
  padding-top: var(--space-6);
}

.container > section:not(.masthead) + section {
  padding-top: var(--space-6);
}

.page-head + .entries,
.page-head + .index-list {
  margin-top: var(--space-3);
}

/* ---- Archive search ------------------------------------------------------ */

.finder {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
}

.js .finder.js-only {
  display: grid;
}

.search-input {
  max-width: 34rem;
  margin-top: var(--space-1);
  font-size: var(--text-md);
}

.filter legend {
  margin-bottom: var(--space-2);
}

.result-count {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.empty {
  margin-top: var(--space-5);
  border-radius: var(--radius-outer);
}

.empty-query {
  overflow-wrap: anywhere;
}

/* ---- Note page ------------------------------------------------------------ */

.note-layout {
  padding-top: var(--space-6);
}

.note-head {
  max-width: 46rem;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: var(--hairline);
}

.note-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.note-eyebrow a {
  color: var(--accent);
  text-decoration: none;
}

.note-eyebrow a:hover {
  text-decoration: underline;
}

.eyebrow-sep {
  color: var(--text-muted);
}

.note-head h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-title);
  max-width: 22em;
}

.note-dek {
  max-width: 58ch;
  margin-bottom: var(--space-5);
  color: var(--text-muted);
  font-family: var(--font-read);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.status-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: 58ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-outer);
  background: var(--notice-bg);
  font-size: var(--text-sm);
}

.status-draft {
  border-style: solid;
}

.note-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.note-meta dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.note-meta dd {
  margin: 0;
  font-size: var(--text-sm);
}

@media (min-width: 834px) {
  .note-meta {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
  }
}

/* Table of contents: inline before the text on narrow screens, a sticky
   rail beside it on wide ones. */
.toc {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--border);
}

.toc-title {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li + li {
  margin-top: 0;
}

.toc a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-decoration: none;
}

.toc .toc-l3 a {
  padding-left: var(--space-4);
}

.toc a:hover {
  color: var(--text);
  text-decoration: underline;
}

.toc a[aria-current="location"] {
  color: var(--accent);
  font-weight: 600;
}

@media (min-width: 1200px) and (min-height: 600px) {
  .note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail);
    grid-template-areas:
      "head head"
      "body toc"
      "foot toc";
    column-gap: var(--space-8);
    align-items: start;
  }

  .note-head {
    grid-area: head;
  }

  .note-body {
    grid-area: body;
  }

  .note-foot {
    grid-area: foot;
  }

  .toc {
    grid-area: toc;
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    max-height: calc(100vh - var(--header-height) - var(--space-7));
    overflow-y: auto;
    margin: 0;
  }
}

/* ---- Long-form prose ------------------------------------------------------ */

.prose {
  max-width: var(--measure);
  font-family: var(--font-read);
  font-size: var(--read-size);
  line-height: var(--read-leading);
  overflow-wrap: break-word;
  hanging-punctuation: first;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 0;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose li::marker {
  color: var(--text-muted);
}

/* Relationship-based spacing: a heading sits far from what came before
   and close to what it introduces. */
.prose h2 {
  margin: var(--space-7) 0 0;
  font-size: var(--text-xl);
}

.prose h3 {
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 650;
}

.prose h4 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 650;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: var(--space-3);
}

.prose > :first-child {
  margin-top: 0;
}

/* Inline links sit inside running text (the WCAG 2.5.8 inline exception);
   vertical padding still enlarges their hit area to the line height. */
.prose a {
  padding: 0.35em 0;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.prose code {
  font-size: 0.82em;
  overflow-wrap: anywhere;
}

.prose strong {
  font-weight: 700;
}

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
  font-style: italic;
}

.prose hr.section-break {
  width: 4rem;
  margin: var(--space-7) auto;
  border: 0;
  border-top: 1px solid var(--border-strong);
}

.prose .table-wrap {
  margin-top: var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-outer);
}

.prose table.data {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.prose table.data th,
.prose table.data td {
  padding: var(--space-3) var(--space-4);
}

.prose table.data tr:last-child td {
  border-bottom: 0;
}

table.data .align-end {
  text-align: end;
}

table.data .align-center {
  text-align: center;
}

/* Code blocks: a ruled header with the language and the copy control. */
.code {
  margin: var(--space-5) 0 0;
  border: var(--hairline);
  border-radius: var(--radius-outer);
  background: var(--code-bg);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--target) + 2 * var(--inset));
  padding: var(--inset) var(--inset) var(--inset) var(--space-4);
  border-bottom: var(--hairline);
}

.code-lang {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.copy-btn {
  min-height: var(--target);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-inner);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.copy-btn:hover {
  border-color: var(--text);
}

.copy-btn[data-state="done"] {
  border-color: var(--success);
}

.code pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 4;
}

.code pre:focus-visible {
  outline-offset: -3px;
}

.code code {
  font-size: inherit;
  overflow-wrap: normal;
}

/* Callouts: a left rule, a label and a shape, so the kind never depends
   on colour alone. */
.callout {
  --edge: var(--border-strong);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--edge);
  border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
  background: var(--callout-bg);
  font-size: 1rem;
}

.callout-tip {
  --edge: var(--accent);
}

.callout-caution {
  --edge: var(--caution);
}

.callout-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.callout-kind {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.callout-title {
  font-weight: 650;
}

.callout-title::before {
  content: "\2014\00a0";
  color: var(--text-muted);
}

.callout-mark {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--edge);
  border-radius: 50%;
}

.callout-tip .callout-mark {
  background: var(--edge);
  transform: rotate(45deg);
  border-radius: 2px;
}

.callout-caution .callout-mark {
  width: 0;
  height: 0;
  border-width: 0 0.45rem 0.75rem;
  border-color: transparent transparent var(--edge);
  border-radius: 0;
}

.callout > :not(.callout-label) {
  margin-top: var(--space-2);
}

.callout > p:not(.callout-label),
.callout li {
  font-family: var(--font-read);
}

/* Checkpoints: a real tick box with a row-sized label. */
.checkpoint {
  margin-top: var(--space-5);
  padding: var(--inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-outer);
  background: var(--surface-raised);
  font-size: 1rem;
}

.checkpoint-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-inner);
}

.checkpoint-head:hover {
  background: var(--surface-2);
}

.checkpoint-box {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--success);
}

.checkpoint-head label {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-height: var(--target);
  cursor: pointer;
  font-family: var(--font-sans);
}

.checkpoint-kind {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checkpoint-title {
  font-weight: 650;
}

.checkpoint-body {
  padding: 0 var(--space-4) var(--space-3) calc(var(--space-3) + 1.25rem + var(--space-3));
  font-family: var(--font-read);
}

.checkpoint-body > * {
  margin: var(--space-2) 0 0;
}

.checkpoint:has(.checkpoint-box:checked) {
  border-color: var(--success);
}

.checkpoint:has(.checkpoint-box:checked) .checkpoint-title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-muted);
}

/* ---- Note footer: series, tools, pager, related ---------------------------- */

.note-foot {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--rule);
}

.series-box {
  padding: var(--inset);
  border: var(--hairline);
  border-radius: var(--radius-outer);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.series-box-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.series-box-title .label {
  margin: 0;
}

.series-box-title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.series-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.series-box li + li {
  margin-top: 0;
}

.series-box ol a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-inner);
  color: var(--text);
  text-decoration: none;
}

.series-box ol a:hover {
  background: var(--surface-2);
}

.series-box ol a[aria-current="page"] {
  background: var(--accent-soft);
  font-weight: 650;
}

.series-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.series-box ol a[aria-current="page"] .series-num {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.note-tools ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-tools li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.note-tools li + li {
  margin-top: 0;
}

.date-policy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.pager {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-top: var(--space-6);
}

.pager-link {
  display: grid;
  gap: var(--space-1);
  min-height: var(--target);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-outer);
  color: var(--text);
  text-decoration: none;
}

.pager-link:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.pager-link:hover .pager-title {
  text-decoration: underline;
}

.pager-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pager-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}

.pager-next {
  text-align: end;
}

.pager-prev:hover .arrow {
  transform: translateX(-3px);
}

.pager-next:hover .arrow {
  transform: translateX(3px);
}

@media (min-width: 600px) {
  .pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pager-next:only-child {
    grid-column: 2;
  }
}

.related {
  max-width: var(--measure);
  margin-top: var(--space-7);
}

.related h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

/* ---- Tools -------------------------------------------------------------- */

.jump {
  margin: var(--space-5) 0 0;
}

.use-case {
  padding-top: var(--space-7);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.tool-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-list li + li {
  margin-top: 0;
}

.tool {
  padding: var(--space-5) 0;
  border-bottom: var(--hairline);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.tool:target .tool-name {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.tool-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.tool-body {
  display: grid;
  gap: var(--space-5);
}

.tool-facts {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  border-top: var(--hairline);
}

.tool-facts > div {
  display: contents;
}

.tool-facts dt,
.tool-facts dd {
  padding: var(--space-2) 0;
  border-bottom: var(--hairline);
}

.tool-facts dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-facts dd {
  margin: 0;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
}

.tool-facts .ext {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  margin: calc(-1 * var(--space-2)) 0;
  font-weight: 600;
}

/* External links carry a north-east arrow; the words "(external site)"
   are in the markup for screen readers. */
.ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.2em;
  font-family: var(--font-sans);
  font-size: 0.85em;
  text-decoration: none;
}

/* The owner's note is a margin note: lifted, serif, in the owner's voice. */
.owner-note {
  align-self: start;
  padding: var(--space-4) var(--space-5);
  border: var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
  background: var(--margin-bg);
  box-shadow: var(--shadow-1);
}

.owner-note-text {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.55;
}

.owner-note-text.muted {
  font-style: normal;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.tool-used {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.tool-used .label {
  margin: 0;
}

@media (min-width: 834px) {
  .tool-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
  }
}

/* ---- About -------------------------------------------------------------- */

.about-layout {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
}

.about-by {
  margin-top: var(--space-4);
}

.colophon {
  align-self: start;
  padding: var(--space-4) var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-outer);
  background: var(--surface-raised);
  font-size: var(--text-sm);
}

.colophon ul {
  margin: 0;
  padding-left: var(--space-4);
}

@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: minmax(0, var(--measure)) var(--rail);
    gap: var(--space-8);
  }
}

/* ---- Script-aware typography (Chinese and mixed Chinese/Latin) ----------- */

/* Han text has no italic and no word spaces: use the sans stack for body
   text, a longer line height, a measure in em (one Han character is about
   1em wide), strict line breaking, and emphasis dots instead of slanting. */
.prose:lang(zh),
.entry-summary:lang(zh),
.note-dek:lang(zh),
.featured-summary:lang(zh) {
  font-family: var(--font-sans);
  line-height: 1.85;
  letter-spacing: 0.01em;
  line-break: strict;
  word-break: normal;
  text-autospace: normal;
  text-spacing-trim: normal;
  font-style: normal;
}

.prose:lang(zh) {
  max-width: var(--measure-cjk);
  hanging-punctuation: none;
}

:lang(zh) em {
  font-style: normal;
  text-emphasis: filled dot;
  text-emphasis-position: under right;
}

h1:lang(zh),
h2:lang(zh),
h3:lang(zh),
.entry-title a:lang(zh),
.featured-title:lang(zh) {
  font-family: var(--font-sans);
  letter-spacing: 0;
  line-height: 1.35;
}

.prose:lang(zh) blockquote,
.intro-text:lang(zh) {
  font-style: normal;
}

/* ---- Preferences -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .arrow,
  .text-link:hover .arrow,
  .pager-prev:hover .arrow,
  .pager-next:hover .arrow {
    transform: none !important;
    transition: none !important;
  }

  .js .site-nav {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .callout-mark,
  .series-num {
    forced-color-adjust: none;
    border-color: CanvasText;
  }

  .callout-tip .callout-mark {
    background: CanvasText;
  }

  .callout-caution .callout-mark {
    border-color: transparent transparent CanvasText;
  }

  .tag-draft {
    border: 2px solid CanvasText;
  }

  .series-box ol a[aria-current="page"] {
    outline: 2px solid CanvasText;
  }
}

@media print {
  .toc,
  .finder,
  .copy-btn,
  .pager,
  .related,
  .demo-strip {
    display: none !important;
  }

  .featured,
  .owner-note,
  .series-box {
    box-shadow: none;
  }

  .prose a.ext::after {
    content: " (" attr(href) ")";
  }
}