hd-garden 0.13.3 → 0.14.2

package/editors/dist/typora/style.css

@@ -149,9 +149,9 @@
   border-radius: 8px;
   background: transparent;
   color: var(--gui-text);
-  font-family: var(--gui-font);
-  font-size: 16px;
-  line-height: 26px;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
   letter-spacing: normal;
   -webkit-font-smoothing: antialiased;
 }
@@ -196,8 +196,8 @@
 
 :where(.garden-ui) p,
 :where(.garden-ui) li {
-  font-size: 16px;
-  line-height: 26px;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 :where(.garden-ui) strong { font-weight: 600; }
@@ -774,7 +774,7 @@
   max-width: 100%;
 }
 
-.garden-ui-table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 400; line-height: 20px; color: #0d0d0d; }
+.garden-ui-table { width: 100%; border-collapse: collapse; font-size: inherit; font-weight: 400; line-height: 20px; color: #0d0d0d; }
 .garden-ui-flow { align-items: center; text-align: center; gap: 8px; }
 .garden-ui-card.garden-ui-flow { gap: 8px; }
 .garden-ui-flow p { margin: 0; color: #0d0d0d; font-size: 16px; font-weight: 400; line-height: 26px; text-align: center; }
@@ -1146,7 +1146,7 @@
 .garden-ui .garden-ui-body li { margin: 0; font-family: inherit; }
 .garden-ui .garden-ui-body p:not([class]),
 .garden-ui .garden-ui-body ul:not([class]) > li,
-.garden-ui .garden-ui-body ol:not([class]) > li { color: inherit; font-size: 16px; line-height: 26px; }
+.garden-ui .garden-ui-body ol:not([class]) > li { color: inherit; font-size: inherit; line-height: inherit; }
 .garden-ui .garden-ui-body p,
 .garden-ui .garden-ui-card-title,
 .garden-ui > figcaption { text-align: start; }
@@ -1226,15 +1226,15 @@
 .garden-ui .garden-ui-pie .garden-ui-legend { justify-content: center; }
 .garden-ui .garden-ui-checklist li { margin: 0; padding: 5px 0; }
 .garden-ui .garden-ui-checklist-detailed li { padding: 12px 0; }
-.garden-ui table.garden-ui-table { display: table; width: 100%; margin: 0; border: 0; font-size: 14px; }
+.garden-ui table.garden-ui-table { display: table; width: 100%; margin: 0; border: 0; font-size: inherit; }
 .garden-ui table.garden-ui-grid { display: table; width: auto; margin: 0; border: 0; border-collapse: separate; border-spacing: 4px; font-size: 12px; }
 .garden-ui .garden-ui-grid tr { border: 0; background: none; }
 .garden-ui .garden-ui-table tr { border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: none; }
 .garden-ui .garden-ui-table tr:last-child { border-bottom: 0; }
 .garden-ui .garden-ui-table th,
-.garden-ui .garden-ui-table td { padding: 8px 8px 8px 0; border: 0; background: none; color: #0d0d0d; font-size: 14px; font-weight: 400; line-height: 20px; }
-.garden-ui .garden-ui-table thead th { color: #0d0d0d; font-size: 14px; font-weight: 600; }
-.garden-ui .garden-ui-table tbody th { color: #0d0d0d; font-size: 14px; font-weight: 400; }
+.garden-ui .garden-ui-table td { padding: 8px 8px 8px 0; border: 0; background: none; color: #0d0d0d; font-size: inherit; font-weight: 400; line-height: 20px; }
+.garden-ui .garden-ui-table thead th { color: #0d0d0d; font-size: inherit; font-weight: 600; }
+.garden-ui .garden-ui-table tbody th { color: #0d0d0d; font-size: inherit; font-weight: 400; }
 .garden-ui .garden-ui-table td:not(.garden-ui-tone-plain) { background: none; color: var(--gui-tone-text); }
 .garden-ui .garden-ui-table:has(tr[data-tone="row"]) th:first-child,
 .garden-ui .garden-ui-table:has(tr[data-tone="row"]) td:first-child { padding-left: 14px; }
@@ -1259,6 +1259,4294 @@
 .garden-ui figcaption,
 .garden-ui > figcaption { margin: 0; border: 0; text-align: start; }
 
+/* Explicit author text color inherits through component typography; nested colors override the variable. */
+.g-compose [data-custom-color], .g-compose [data-custom-color] *,
+.garden-ui-color-scope[data-custom-color], .garden-ui-color-scope[data-custom-color] * { color: var(--compose-color); }
+.garden-ui-color-scope { display: contents; }
+.garden-ui-color-scope[data-custom-background] > * { background-color: var(--compose-background); }
+
+/* Compose diagrams. Color comes only from Garden theme tokens, so light and
+   dark follow `data-theme` without a second palette. */
+
+.g-compose {
+  position: relative;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  margin: 1.25em 0;
+  padding: 18px 18px 14px;
+  border: 1px solid color-mix(in srgb, var(--rule-strong) 72%, var(--paper));
+  border-radius: 8px;
+  background: var(--paper);
+  box-shadow: none;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+
+.g-compose-host {
+  display: contents;
+}
+
+.g-compose p,
+.markdown-body .g-compose p {
+  margin: 0;
+}
+
+.g-compose-head {
+  margin: 0 0 14px;
+}
+
+.g-compose-title {
+  color: var(--ink);
+  font: 600 18px/1.4 var(--sans);
+}
+
+.g-compose-h {
+  color: var(--ink);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.g-compose-caption {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.g-compose-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.g-compose-body,
+.g-compose-stack,
+.g-compose-row,
+.g-compose-steps,
+.g-compose-compare,
+.g-compose-card,
+.g-compose-step {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.g-compose-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.g-compose-stack[data-gap="0"] { gap: 0; }
+.g-compose-stack[data-gap="1"] { gap: 4px; }
+.g-compose-stack[data-gap="2"] { gap: 8px; }
+.g-compose-stack[data-gap="3"] { gap: 12px; }
+.g-compose-stack[data-gap="4"] { gap: 16px; }
+.g-compose-stack[style*="--gc-gap"] { gap: var(--gc-gap); }
+
+.g-compose-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--gc-gap, 8px);
+}
+.g-compose-row[data-wrap="nowrap"] { flex-wrap: nowrap; }
+.g-compose-row[data-justify="center"] { justify-content: center; }
+.g-compose-row[data-justify="end"] { justify-content: flex-end; }
+.g-compose-row[data-justify="between"] { justify-content: space-between; }
+.g-compose-row[data-justify="around"] { justify-content: space-around; }
+.g-compose-row[data-align="center"] { align-items: center; }
+.g-compose-row[data-align="end"] { align-items: flex-end; }
+.g-compose-row[data-align="stretch"] { align-items: stretch; }
+
+.g-compose-row > .g-compose-card,
+.g-compose-row > .g-compose-disclosure,
+.g-compose-row > .g-compose-stack,
+.g-compose-row > .g-compose-h,
+.g-compose-row > .g-compose-text {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* Legend / between rows: content-sized leaves so space-between pins tip to the right edge */
+.g-compose-row[data-justify="between"] > .g-compose-text,
+.g-compose-row[data-justify="between"] > .g-compose-caption-inline,
+.g-compose-row[data-justify="between"] > .g-compose-h,
+.g-compose-row[data-justify="around"] > .g-compose-text,
+.g-compose-row[data-justify="around"] > .g-compose-caption-inline,
+.g-compose-row[data-justify="around"] > .g-compose-h {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.g-compose-row > .g-compose-badge {
+  flex: 0 0 auto;
+}
+
+.g-compose-stack[data-align="center"] {
+  align-items: center;
+  text-align: center;
+}
+
+.g-compose-stack[data-align="center"] > .g-compose-card:not([data-frame="text"]):not([data-frame="pill"]),
+.g-compose-stack[data-align="center"] > .g-compose-row,
+.g-compose-stack[data-align="center"] > .g-compose-fan,
+.g-compose-stack[data-align="center"] > .g-compose-join,
+.g-compose-stack[data-align="center"] > .g-compose-lanes,
+.g-compose-stack[data-align="center"] > .g-compose-text {
+  align-self: stretch;
+}
+
+.g-compose-stack[data-align="center"] > .g-compose-card[data-frame="pill"],
+.g-compose-stack[data-align="center"] > .g-compose-card[data-frame="text"] {
+  align-self: center;
+  width: auto;
+}
+
+.g-compose-row[data-align="center"] {
+  justify-content: center;
+  text-align: center;
+}
+
+.g-compose-h[data-align="center"],
+.g-compose-text[data-align="center"],
+.g-compose-caption-inline[data-align="center"] {
+  text-align: center;
+}
+.g-compose-h[data-align="end"],
+.g-compose-text[data-align="end"],
+.g-compose-caption-inline[data-align="end"] {
+  text-align: end;
+}
+
+.g-compose-stack[data-align="center"] > .g-compose-h[data-align="start"],
+.g-compose-stack[data-align="center"] > .g-compose-text[data-align="start"] {
+  align-self: stretch;
+  width: 100%;
+  text-align: start;
+}
+
+.g-compose-text[data-tone="muted"] {
+  color: var(--muted);
+  line-height: inherit;
+}
+
+.g-compose-card > .g-compose-row,
+.g-compose-card > .g-compose-text,
+.g-compose-card > .g-compose-h {
+  align-self: stretch;
+  width: 100%;
+}
+
+.g-compose-card > .g-compose-row:has(.g-compose-badge) {
+  align-self: center;
+  width: auto;
+  gap: 6px;
+  justify-content: center;
+}
+
+.g-compose-compare {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+  gap: 12px;
+  align-items: stretch;
+}
+
+.g-compose-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+}
+
+.g-compose-steps[data-dir="row"] {
+  flex-direction: row;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.g-compose-steps[data-dir="row"] > .g-compose-step {
+  flex: 1 1 0;
+}
+
+.g-compose-card,
+.g-compose-step {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border: 1px solid var(--rule-strong);
+  border-radius: var(--r, 12px);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  user-select: text;
+  /* Keep fill + border continuous at the radius (no square child bleed at corners). */
+  overflow: hidden;
+  background-clip: padding-box;
+}
+
+.g-compose-disclosure {
+  min-width: 0;
+  max-width: 100%;
+  border: 1px solid color-mix(in srgb, var(--rule-strong) 72%, var(--paper));
+  border-radius: 8px;
+  background: transparent;
+}
+
+.g-compose-disclosure > summary {
+  position: relative;
+  list-style: none;
+  cursor: pointer;
+  padding: 10px 36px 10px 14px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.g-compose-disclosure > summary.g-compose-step,
+.g-compose-disclosure > summary.g-compose-card {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.g-compose-disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.g-compose-disclosure > summary::marker {
+  content: "";
+}
+
+.g-compose-disclosure > summary::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.g-compose-disclosure[open] > summary {
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  background: transparent;
+}
+
+.g-compose-disclosure[open] > summary::after {
+  transform: translateY(2px) rotate(225deg);
+}
+
+.g-compose-disclosure > .g-compose-note {
+  margin-top: 0;
+  padding: 8px 14px 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.g-compose-card[data-tone="accent"],
+.g-compose-step[data-tone="accent"] {
+  background: color-mix(in srgb, var(--flow) 8%, var(--paper));
+  border-color: color-mix(in srgb, var(--flow) 28%, var(--paper));
+}
+
+.g-compose-card[data-tone="tip"],
+.g-compose-step[data-tone="tip"] {
+  background: color-mix(in srgb, var(--flow-back) 10%, var(--paper));
+  border-color: color-mix(in srgb, var(--flow-back) 32%, var(--paper));
+}
+
+.g-compose-card[data-tone="muted"],
+.g-compose-step[data-tone="muted"] {
+  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
+  border-color: color-mix(in srgb, var(--ink) 16%, var(--paper));
+  color: var(--ink);
+}
+
+.g-compose-card[data-align="center"] {
+  align-items: center;
+  text-align: center;
+}
+
+.g-compose-card[data-frame="text"] {
+  border: 0;
+  background: transparent;
+  padding: 4px 8px;
+  box-shadow: none;
+}
+
+.g-compose-card[data-frame="band"] {
+  width: 100%;
+  padding: 12px 18px;
+  border: 0;
+  background: var(--well);
+}
+
+.g-compose-row > .g-compose-stack {
+  padding-top: 12px;
+}
+
+.g-compose-row > .g-compose-stack > .g-compose-h {
+  margin: 0;
+}
+
+.g-compose-card[data-frame="band"][data-tone="accent"] {
+  background: color-mix(in srgb, var(--flow) 8%, var(--paper));
+}
+
+.g-compose-card[data-frame="band"][data-tone="tip"] {
+  background: color-mix(in srgb, var(--flow-back) 10%, var(--paper));
+}
+
+.g-compose-card[data-frame="band"][data-tone="muted"] {
+  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
+}
+
+.g-compose-card[data-frame="band"] > .g-compose-card-text,
+.g-compose-card[data-frame="text"] > .g-compose-card-text {
+  color: var(--muted);
+}
+
+.g-compose-card[data-frame="pill"] {
+  width: auto;
+  align-self: center;
+  border-radius: 5px;
+  padding: 8px 16px;
+  background: transparent;
+  border-color: var(--rule-strong);
+  box-shadow: none;
+}
+
+.g-compose-card[data-frame="pill"][data-tone="accent"] {
+  background: color-mix(in srgb, var(--flow) 8%, var(--paper));
+  border-color: color-mix(in srgb, var(--flow) 22%, var(--paper));
+}
+
+.g-compose-card[data-frame="pill"][data-tone="tip"] {
+  background: color-mix(in srgb, var(--flow-back) 9%, var(--paper));
+  border-color: color-mix(in srgb, var(--flow-back) 24%, var(--paper));
+}
+
+.g-compose-card[data-frame="pill"][data-tone="muted"] {
+  background: color-mix(in srgb, var(--ink) 7%, var(--card));
+  border-color: color-mix(in srgb, var(--ink) 20%, var(--card));
+  color: var(--ink);
+  box-shadow: none;
+}
+
+.g-compose-card-line {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.g-compose-card[data-align="start"] .g-compose-card-line,
+.g-compose-card:not([data-align]) .g-compose-card-line {
+  justify-content: flex-start;
+}
+
+.g-compose-index {
+  color: var(--ink);
+  font: 600 15px/1 var(--sans);
+}
+
+.g-compose-mark {
+  display: inline-block;
+  margin-right: 6px;
+  color: var(--ink);
+  vertical-align: -2px;
+}
+
+.g-compose-fan {
+  display: grid;
+  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
+  gap: 8px;
+  width: 100%;
+  margin-block: -3px;
+}
+
+.g-compose-fan .g-compose-arrow {
+  margin: 0 auto;
+}
+
+.g-compose-fan[data-n="2"] { --n: 2; }
+.g-compose-fan[data-n="3"] { --n: 3; }
+.g-compose-fan[data-n="4"] { --n: 4; }
+
+.g-compose-join {
+  display: grid;
+  width: 100%;
+  margin: 2px 0 8px;
+  color: var(--ink);
+}
+
+.g-compose-join-svg,
+.g-compose-join-label {
+  grid-area: 1 / 1;
+}
+
+.g-compose-join-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 600 / 72;
+  color: var(--flow);
+}
+
+.g-compose-join-label {
+  position: relative;
+  top: 11.1%;
+  justify-self: center;
+  align-self: start;
+  width: max-content;
+  max-width: 72%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ink);
+  font: 700 16px/1.15 var(--sans);
+  white-space: nowrap;
+  text-align: center;
+  z-index: 1;
+}
+
+.g-compose-lanes {
+  --lane-gap: 40px;
+  --lane: var(--ink);
+  width: 100%;
+}
+
+.g-compose-lanes-head,
+.g-compose-lane-row {
+  display: grid;
+  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  column-gap: var(--lane-gap);
+}
+
+.g-compose-lane-pill {
+  justify-self: center;
+  width: max-content;
+  max-width: 100%;
+  margin: 0 0 8px;
+  padding: 5px 16px;
+  border: 1px solid var(--rule-strong);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--ink);
+  font: 600 14px/1.3 var(--sans);
+  text-align: center;
+}
+
+.g-compose-lanes-stage {
+  position: relative;
+  display: grid;
+  row-gap: 16px;
+  padding: 8px 0 2px;
+}
+
+.g-compose-lane-life {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(
+    var(--i) * ((100% - (var(--cols) - 1) * var(--lane-gap)) / var(--cols) + var(--lane-gap))
+    + (100% - (var(--cols) - 1) * var(--lane-gap)) / var(--cols) / 2
+  );
+  border-left: 1px dashed var(--rule-strong);
+  pointer-events: none;
+}
+
+.g-compose-lane-msg {
+  --lane-half: calc((100% - (var(--span, 2) - 1) * var(--lane-gap)) / var(--span, 2) / 2);
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1px;
+  min-width: 0;
+  color: var(--ink);
+}
+
+.g-compose-lane-msg[data-tone="forward"] {
+  --lane: var(--flow);
+}
+
+.g-compose-lane-msg[data-tone="back"] {
+  --lane: var(--flow-back);
+}
+
+.g-compose-lane-label {
+  align-self: start;
+  width: max-content;
+  max-width: calc(100% - var(--lane-half));
+  margin: 0 0 0 var(--lane-half);
+  padding: 0;
+  background: transparent;
+  color: var(--ink);
+  font: 600 13px/1.25 var(--sans);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.g-compose-lane-route {
+  display: none;
+}
+
+.g-compose-lane-shaft {
+  position: relative;
+  display: block;
+  height: 8px;
+  margin-top: 0;
+  margin-left: var(--lane-half);
+  margin-right: var(--lane-half);
+  background: linear-gradient(var(--lane), var(--lane)) left center / calc(100% - 2px) 1.6px no-repeat;
+}
+
+.g-compose-lane-shaft::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.g-compose-lane-msg[data-way="right"] .g-compose-lane-shaft {
+  margin-right: calc(var(--lane-half) - 6px);
+  background-position: left center;
+}
+
+.g-compose-lane-msg[data-way="right"] .g-compose-lane-shaft::after {
+  right: 0;
+  border-width: 4px 0 4px 8px;
+  border-color: transparent transparent transparent var(--lane);
+}
+
+.g-compose-lane-msg[data-way="left"] .g-compose-lane-shaft {
+  margin-left: calc(var(--lane-half) - 6px);
+  background-position: right center;
+}
+
+.g-compose-lane-msg[data-way="left"] .g-compose-lane-shaft::after {
+  left: 0;
+  border-width: 4px 8px 4px 0;
+  border-color: transparent var(--lane) transparent transparent;
+}
+
+.g-compose-card-title,
+.g-compose-step-title,
+.g-compose-note-k {
+  color: var(--ink);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.g-compose-card-text,
+.g-compose-step-text,
+.g-compose-text,
+.g-compose-note-text {
+  color: var(--text, var(--ink));
+  font: inherit;
+  font-weight: 400;
+}
+
+.g-compose-card[data-tone="muted"] .g-compose-card-text,
+.g-compose-step[data-tone="muted"] .g-compose-step-text {
+  color: var(--muted);
+}
+
+.g-compose-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--well);
+  color: var(--ink);
+  font: 600 12px/1.5 var(--sans);
+}
+
+.g-compose-badge[data-tone="muted"] {
+  color: var(--muted);
+}
+
+.g-compose-card[data-tone="accent"] .g-compose-badge,
+.g-compose-step[data-tone="accent"] .g-compose-badge,
+.g-compose-card[data-tone="tip"] .g-compose-badge,
+.g-compose-step[data-tone="tip"] .g-compose-badge,
+.g-compose-card[data-frame="band"] .g-compose-badge {
+  background: var(--paper);
+  border: 1px solid var(--rule-strong);
+}
+
+.g-compose-kpi {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.g-compose-kpi-value {
+  color: var(--ink);
+  font: 700 28px/1.1 var(--sans);
+  font-variant-numeric: tabular-nums;
+}
+
+.g-compose-kpi-unit,
+.g-compose-kpi-label {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.g-compose-arrow {
+  display: block;
+  flex: 0 0 auto;
+  align-self: center;
+  width: 10px;
+  height: 8px;
+  margin: 0 auto;
+  color: var(--muted);
+}
+
+.g-compose-stack > .g-compose-arrow,
+.g-compose-body > .g-compose-arrow {
+  margin-block: -2px;
+}
+
+.g-compose-arrow[data-dir="right"] {
+  transform: rotate(-90deg);
+}
+
+.g-compose-note {
+  padding: 12px 14px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r, 12px);
+  background: var(--well);
+}
+
+.g-compose-note + .g-compose-note {
+  margin-top: 8px;
+}
+
+.g-compose-note-k {
+  margin-bottom: 4px;
+}
+
+.g-compose-callout {
+  padding: 12px 14px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r, 12px);
+  background: var(--well);
+  color: var(--text, var(--ink));
+}
+
+.g-compose-callout[data-tone="tip"] {
+  background: transparent;
+  border-color: var(--rule-strong);
+}
+
+.g-compose-callout[data-tone="warn"] {
+  border-color: var(--ink);
+}
+
+/* `.markdown-body hr` is margin 54px 0 at specificity 0,1,1. These two selectors win. */
+.g-compose hr,
+.markdown-body .g-compose hr,
+.g-compose-divider {
+  width: 100%;
+  height: 0;
+  margin: 16px 0 10px;
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+}
+
+.g-compose-h {
+  margin-bottom: 2px;
+}
+
+
+/* —— Design tokens (Claude paper surfaces, 4px spacing) —— */
+
+.g-compose-card[style*="--gc-pad"],
+.g-compose-stack[style*="--gc-pad"],
+.g-compose-row[style*="--gc-pad"],
+.g-compose-grid[style*="--gc-pad"],
+.g-compose-grid-item[style*="--gc-pad"] {
+  padding: var(--gc-pad);
+}
+
+.g-compose-card[data-pad="0"],
+.g-compose-grid-item[data-pad="0"] { padding: 0; }
+.g-compose-card[data-pad="1"],
+.g-compose-grid-item[data-pad="1"] { padding: 4px; }
+.g-compose-card[data-pad="2"],
+.g-compose-grid-item[data-pad="2"] { padding: 8px; }
+.g-compose-card[data-pad="3"],
+.g-compose-grid-item[data-pad="3"] { padding: 12px; }
+.g-compose-card[data-pad="4"],
+.g-compose-grid-item[data-pad="4"] { padding: 16px; }
+
+.g-compose-card[data-radius="none"],
+.g-compose-grid-item[data-radius="none"] { border-radius: 0; }
+.g-compose-card[data-radius="sm"],
+.g-compose-grid-item[data-radius="sm"] { border-radius: 6px; }
+.g-compose-card[data-radius="md"],
+.g-compose-grid-item[data-radius="md"] { border-radius: 10px; }
+.g-compose-card[data-radius="lg"],
+.g-compose-grid-item[data-radius="lg"] { border-radius: 14px; }
+.g-compose-card[data-radius="xl"],
+.g-compose-grid-item[data-radius="xl"] { border-radius: 18px; }
+.g-compose-card[data-radius="full"],
+.g-compose-grid-item[data-radius="full"] { border-radius: 999px; }
+
+.g-compose-card[data-border="none"],
+.g-compose-card[data-border="false"] { border-color: transparent; border-width: 0; }
+.g-compose-card[data-border="subtle"] { border-color: color-mix(in srgb, var(--rule) 70%, var(--paper)); }
+.g-compose-card[data-border="strong"],
+.g-compose-card[data-border="true"] { border-color: var(--rule-strong); }
+
+.g-compose-card[data-bg="surface"],
+.g-compose-card[data-bg="paper"],
+.g-compose-grid-item[data-bg="surface"],
+.g-compose-grid-item[data-bg="paper"] {
+  background: var(--paper);
+}
+.g-compose-card[data-bg="surface-secondary"],
+.g-compose-card[data-bg="well"],
+.g-compose-grid-item[data-bg="surface-secondary"],
+.g-compose-grid-item[data-bg="well"] {
+  background: var(--well);
+}
+.g-compose-card[data-bg="surface-accent"],
+.g-compose-grid-item[data-bg="surface-accent"] {
+  background: color-mix(in srgb, var(--flow) 12%, var(--paper));
+}
+.g-compose-card[data-bg="surface-tip"],
+.g-compose-grid-item[data-bg="surface-tip"] {
+  background: color-mix(in srgb, var(--flow-back) 14%, var(--paper));
+}
+.g-compose-card[data-bg="surface-muted"],
+.g-compose-grid-item[data-bg="surface-muted"] {
+  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
+}
+.g-compose-card[data-bg="transparent"],
+.g-compose-grid-item[data-bg="transparent"] {
+  background: transparent;
+}
+
+.g-compose-card[data-size="sm"] {
+  padding: 4px 6px;
+  gap: 2px;
+  min-width: 2.75rem;
+  border-radius: 8px;
+}
+.g-compose-card[data-size="sm"][data-frame="text"] {
+  /* still flex:1 with siblings; lighter pad so empty days don't look like pills */
+  min-width: 0;
+  padding: 4px 2px;
+}
+.g-compose-card[data-size="lg"] { padding: 16px 20px; gap: 10px; }
+.g-compose-card[data-size="xl"] { padding: 20px 24px; gap: 12px; }
+
+/*
+ * Day-chip rows (4-day AND 7-day): every sm cell equal-stretches edge-to-edge,
+ * including empty frame=text days. Full banner width is the lock — do not
+ * content-size empty days. Legend rows use justify=between separately.
+ */
+.g-compose-row[data-wrap="nowrap"] > .g-compose-card[data-size="sm"] {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+  align-items: center;
+  text-align: center;
+}
+.g-compose-row[data-wrap="nowrap"] > .g-compose-card[data-size="sm"] > .g-compose-text,
+.g-compose-row[data-wrap="nowrap"] > .g-compose-card[data-size="sm"] > .g-compose-caption-inline,
+.g-compose-row[data-wrap="nowrap"] > .g-compose-card[data-size="sm"] > .g-compose-h {
+  text-align: center;
+  width: 100%;
+}
+
+.g-compose-h[data-size="sm"] {
+  font-size: .875em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.g-compose-text[data-size="sm"] { font-size: .875em; font-weight: 400; line-height: 1.5; }
+.g-compose-caption-inline[data-size="sm"] { font-size: 11px; font-weight: 400; line-height: 1.35; }
+.g-compose-text[data-tone="tip"] {
+  color: color-mix(in srgb, var(--flow-back) 78%, var(--ink));
+}
+.g-compose-text[data-tone="accent"] {
+  color: color-mix(in srgb, var(--flow) 72%, var(--ink));
+}
+.g-compose-h[data-size="lg"] { font-size: 1.125em; }
+.g-compose-h[data-size="xl"] { font-size: 1.25em; }
+.g-compose-text[data-size="lg"] { font-size: 1.125em; }
+.g-compose-text[data-size="xl"] { font-size: 1.25em; }
+.g-compose-caption-inline[data-size="lg"] { font-size: 16px; }
+
+.g-compose-caption-inline {
+  color: var(--muted);
+  font: 400 12px/1.35 var(--sans);
+  margin: 0;
+}
+
+.g-compose-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--gc-cols, 2), minmax(0, 1fr));
+  gap: var(--gc-gap, 12px);
+  width: 100%;
+}
+.g-compose-grid[data-cols="1"] { --gc-cols: 1; }
+.g-compose-grid[data-cols="2"] { --gc-cols: 2; }
+.g-compose-grid[data-cols="3"] { --gc-cols: 3; }
+.g-compose-grid[data-cols="4"] { --gc-cols: 4; }
+.g-compose-grid[data-cols="5"] { --gc-cols: 5; }
+.g-compose-grid[data-cols="6"] { --gc-cols: 6; }
+
+.g-compose-grid-item {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gc-gap, 8px);
+}
+.g-compose-grid-item[data-span="2"] { grid-column: span 2; }
+.g-compose-grid-item[data-span="3"] { grid-column: span 3; }
+.g-compose-grid-item[data-span="4"] { grid-column: span 4; }
+
+.g-compose-icon {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 15px;
+  height: 15px;
+  color: var(--ink);
+  vertical-align: -2px;
+}
+.g-compose-icon[data-size="sm"] { width: 13px; height: 13px; }
+.g-compose-icon[data-size="lg"] { width: 18px; height: 18px; }
+.g-compose-icon[data-size="xl"] { width: 22px; height: 22px; }
+.g-compose-card[data-size="sm"] > .g-compose-icon {
+  width: 14px;
+  height: 14px;
+  margin: 1px 0 0;
+}
+.g-compose-icon[data-inline="true"] {
+  margin-right: 6px;
+}
+
+.g-compose-card > .g-compose-icon,
+.g-compose-stack > .g-compose-icon {
+  align-self: center;
+}
+
+.g-compose-arrow[data-dir="left"] {
+  transform: rotate(90deg);
+}
+.g-compose-arrow[data-dir="up"] {
+  transform: rotate(180deg);
+}
+
+.g-compose-body,
+.g-compose-stack,
+.g-compose-row,
+.g-compose-steps,
+.g-compose-compare,
+.g-compose-card,
+.g-compose-step,
+.g-compose-grid,
+.g-compose-grid-item {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.g-compose-pair {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+  margin: 1.25em 0 1.75em;
+}
+
+.g-compose-pair-k {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font: 600 13px/1.4 var(--sans);
+}
+
+.g-compose-pair-ref,
+.g-compose-pair-live {
+  min-width: 0;
+  margin: 0;
+}
+
+.g-compose-pair-ref img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  background: var(--card);
+}
+
+.g-compose-pair .g-compose {
+  margin: 0;
+}
+
+
+
+/* —— Expanded catalog widgets (static snapshots) —— */
+
+.g-compose-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  background: color-mix(in srgb, var(--flow) 12%, var(--paper));
+  color: var(--ink);
+  font: 500 13px/1.2 var(--sans);
+  white-space: nowrap;
+}
+.g-compose-button[data-tone="muted"] { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
+.g-compose-button[data-tone="tip"] { background: color-mix(in srgb, var(--flow-back) 14%, var(--paper)); }
+.g-compose-button[data-size="sm"] { padding: 4px 8px; font-size: 12px; }
+.g-compose-button[data-size="lg"] { padding: 8px 16px; font-size: 14px; }
+
+.g-compose-slider,
+.g-compose-progress,
+.g-compose-meter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 8rem;
+}
+.g-compose-widget-label {
+  color: var(--muted);
+  font: 400 12px/1.3 var(--sans);
+}
+.g-compose-widget-value {
+  color: var(--ink);
+  font: 500 12px/1.3 var(--sans);
+}
+.g-compose-slider-track,
+.g-compose-meter-track {
+  position: relative;
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
+  overflow: visible;
+}
+.g-compose-slider-track > i,
+.g-compose-meter-track > i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--flow) 55%, var(--ink));
+}
+.g-compose-slider-track > b {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--paper);
+  border: 2px solid color-mix(in srgb, var(--flow) 55%, var(--ink));
+  box-sizing: border-box;
+}
+
+.g-compose-checkbox,
+.g-compose-radio,
+.g-compose-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 400 13px/1.3 var(--sans);
+  color: var(--ink);
+}
+.g-compose-checkbox > i,
+.g-compose-radio > i {
+  width: 1.1em;
+  text-align: center;
+  color: var(--muted);
+}
+.g-compose-checkbox[data-checked="true"] > i,
+.g-compose-radio[data-checked="true"] > i { color: var(--ink); }
+.g-compose-toggle > i {
+  width: 28px;
+  height: 16px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
+  position: relative;
+  display: inline-block;
+}
+.g-compose-toggle > i::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--paper);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, var(--paper));
+}
+.g-compose-toggle[data-checked="true"] > i {
+  background: color-mix(in srgb, var(--flow) 45%, var(--ink));
+}
+.g-compose-toggle[data-checked="true"] > i::after { left: 14px; }
+
+.g-compose-field-static {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.g-compose-input-face,
+.g-compose-select-face,
+.g-compose-textarea-face {
+  display: block;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  background: var(--paper);
+  color: var(--ink);
+  font: 400 13px/1.35 var(--sans);
+  min-height: 1.35em;
+}
+.g-compose-textarea-face { min-height: 3.2em; white-space: pre-wrap; }
+
+.g-compose-tabs { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+.g-compose-tablist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  padding-bottom: 4px;
+}
+.g-compose-tab-h {
+  padding: 4px 10px;
+  border-radius: 6px 6px 0 0;
+  color: var(--muted);
+  font: 500 13px/1.3 var(--sans);
+}
+.g-compose-tab-h[data-active="true"] {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
+}
+.g-compose-tabpanel { min-width: 0; }
+
+.g-compose-list {
+  margin: 0;
+  padding-left: 1.2em;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font: inherit;
+}
+.g-compose-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: inherit;
+}
+.g-compose-table th,
+.g-compose-table td {
+  border: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  padding: 6px 8px;
+  text-align: start;
+  vertical-align: top;
+}
+.g-compose-table th {
+  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
+  font-weight: 600;
+}
+
+.g-compose-code {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
+  border: 1px solid color-mix(in srgb, var(--rule) 60%, var(--paper));
+  overflow: auto;
+  font: 400 12px/1.45 var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+.g-compose-kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid color-mix(in srgb, var(--rule) 80%, var(--paper));
+  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
+  font: 500 12px/1.3 var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+.g-compose-link {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.g-compose-label {
+  color: var(--muted);
+  font: 500 12px/1.3 var(--sans);
+  margin: 0;
+}
+.g-compose-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--flow) 14%, var(--paper));
+  color: var(--ink);
+  font: 600 11px/1 var(--sans);
+  text-transform: uppercase;
+}
+.g-compose-avatar[data-size="sm"] { width: 22px; height: 22px; font-size: 10px; }
+.g-compose-avatar[data-size="lg"] { width: 36px; height: 36px; font-size: 13px; }
+.g-compose-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.g-compose-spacer[data-gap="1"] { height: 4px; }
+.g-compose-spacer[data-gap="2"] { height: 8px; }
+.g-compose-spacer[data-gap="3"] { height: 12px; }
+.g-compose-spacer[data-gap="4"] { height: 16px; }
+.g-compose-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--muted);
+  font: 400 13px/1.4 var(--sans);
+  border: 1px dashed color-mix(in srgb, var(--rule) 70%, var(--paper));
+  border-radius: 8px;
+}
+.g-compose-group,
+.g-compose-field,
+.g-compose-header,
+.g-compose-footer,
+.g-compose-figure,
+.g-compose-prose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gc-gap, 8px);
+  min-width: 0;
+  width: 100%;
+}
+.g-compose-option {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper));
+  font: 400 12px/1.3 var(--sans);
+}
+.g-compose-option[data-selected="true"] {
+  background: color-mix(in srgb, var(--flow) 12%, var(--paper));
+  border-color: color-mix(in srgb, var(--flow) 35%, var(--rule));
+}
+
+/* Timeline chips: empty day = no fill, just date + dash */
+.g-compose-card[data-frame="text"][data-size="sm"] {
+  border-color: transparent;
+  background: transparent;
+  padding: 2px 2px;
+  min-width: 2.1rem;
+  max-width: 2.8rem;
+}
+.g-compose-card[data-size="sm"] > .g-compose-icon {
+  width: 12px;
+  height: 12px;
+}
+
+@media (max-width: 800px) {
+  .g-compose {
+    padding: 14px 12px 12px;
+  }
+
+  .g-compose-row:not([data-wrap="nowrap"]),
+  .g-compose-compare,
+  .g-compose-steps[data-dir="row"],
+  .g-compose-grid {
+    flex-direction: column;
+    grid-template-columns: 1fr;
+  }
+
+  .g-compose-row[data-wrap="nowrap"] {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    gap: 4px;
+  }
+  .g-compose-row[data-wrap="nowrap"] > .g-compose-card,
+  .g-compose-row[data-wrap="nowrap"] > .g-compose-card[data-size="sm"] {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 2.2rem;
+  }
+  .g-compose-row[data-wrap="nowrap"][data-justify="between"] > .g-compose-text,
+  .g-compose-row[data-wrap="nowrap"][data-justify="between"] > .g-compose-caption-inline,
+  .g-compose-row[data-wrap="nowrap"][data-justify="around"] > .g-compose-text,
+  .g-compose-row[data-wrap="nowrap"][data-justify="around"] > .g-compose-caption-inline {
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
+  .g-compose-grid-item[data-span="2"],
+  .g-compose-grid-item[data-span="3"],
+  .g-compose-grid-item[data-span="4"] {
+    grid-column: auto;
+  }
+
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-card,
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-disclosure,
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-stack,
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-h,
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-text,
+  .g-compose-steps[data-dir="row"] > .g-compose-step,
+  .g-compose-steps[data-dir="row"] > .g-compose-disclosure {
+    flex: none;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .g-compose-arrow[data-dir="right"] {
+    transform: none;
+  }
+
+  .g-compose-fan .g-compose-arrow ~ .g-compose-arrow {
+    display: none;
+  }
+
+  .g-compose-join-svg {
+    display: none;
+  }
+
+  .g-compose-join {
+    min-height: 0;
+  }
+
+  .g-compose-join-label {
+    position: static;
+    top: auto;
+    width: auto;
+    max-width: none;
+    margin: 0;
+    white-space: normal;
+  }
+
+  .g-compose-lane-label {
+    white-space: normal;
+    margin-left: 0;
+    max-width: none;
+  }
+
+  .g-compose-lanes-head,
+  .g-compose-lane-row {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .g-compose-lane-life,
+  .g-compose-lane-shaft {
+    display: none;
+  }
+
+  .g-compose-lane-msg {
+    display: block;
+  }
+
+  .g-compose-lane-route {
+    display: block;
+    margin-bottom: 2px;
+    color: var(--muted);
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .g-compose-lane-pill {
+    width: 100%;
+    margin: 0 0 8px;
+    box-sizing: border-box;
+  }
+
+  .g-compose-pair {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Explicit author text color inherits through component typography; nested colors override the variable. */
+.g-compose [data-custom-color], .g-compose [data-custom-color] *,
+.garden-ui-color-scope[data-custom-color], .garden-ui-color-scope[data-custom-color] * { color: var(--compose-color); }
+.garden-ui-color-scope { display: contents; }
+.garden-ui-color-scope[data-custom-background] > * { background-color: var(--compose-background); }
+
+/* Scene framing is independent of card/box frames. Keep normal document flow. */
+.g-compose[data-frame="none"] {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+}
+
+/* Article content islands keep real block structure within the surrounding layout. */
+.g-compose-content { min-width: 0; max-width: 100%; font: inherit; overflow-wrap: break-word; }
+.g-compose .g-compose-content p { margin: 0 0 1em; font: inherit; }
+.g-compose-content > :first-child { margin-top: 0; }
+.g-compose-content > :last-child { margin-bottom: 0; }
+.g-compose-content pre, .g-compose-content table { max-width: 100%; overflow-x: auto; }
+.g-compose-content img { max-width: 100%; height: auto; }
+
+/* Native semantic scenes share the surrounding article's body typography.
+   Graph labels, metric values, captions and controls retain semantic sizing. */
+.markdown-body .g-compose :is(.g-choice-x, .g-tl-x, .g-stat-t, .g-cmp p, .g-verdict p, .g-entity-list p),
+.markdown-body .g-compose .g-entity-b > p:not(.g-entity-m) {
+  font-size: inherit;
+  font-family: inherit;
+}
+.markdown-body .g-compose :is(.g-choice-h, .g-choice-v, .g-choice-l, .g-list-h, .g-rel-t, .g-rel-x, .g-rel-detail-t, .g-rel-detail-x, .g-tl-t, .g-entity-t, .g-entity-lt, .g-entity-m, .g-stat-l, .g-stat-n, .g-stat-c, .g-verdict h4, .g-cmp h4) {
+  font-family: inherit;
+}
+
+/* A2 tokens. One source for the site, the article, and every component. */
+
+.garden-ui-preview,
+.garden-ui-preview[data-theme="light"] {
+  --paper: #faf9f5;
+  --paper-deep: #f0eee6;
+  --card: #ffffff;
+  --ink: #1b1a18;
+  --ink-soft: #2d2c29;
+  --text: #2d2c29;
+  --soft: #4a4844;
+  --muted: #6e6b64;
+  --grey: #737069;
+  --faint: #737069;
+  --rule: #e6e3dc;
+  --rule-strong: #d6d2c9;
+  --line: #e6e3dc;
+  --line-strong: #d6d2c9;
+  --well: #f0eee6;
+  --tint: rgb(27 26 24 / 5.5%);
+  /* "blue" is the accent slot; the accent is now ink, there is no blue. */
+  --blue: #30302e;
+  --blue-tint: #f0eee6;
+  --blue-line: rgb(20 20 19 / 22%);
+  --cover: #c2c0b6;
+  --chip: #f0eee6;
+  --chip-hover: #e8e5db;
+  --chip-on: #30302e;
+  --chip-on-text: #faf9f5;
+  --card-hover: #f5f4ed;
+  --card-shadow: 0 1px 2px rgb(20 20 19 / 4%), 0 4px 14px rgb(20 20 19 / 5%);
+  --accent: var(--blue);
+  --accent-soft: var(--blue-tint);
+  --selection: #e8e5db;
+  --hl: #ffe58f;
+  /* Two lane-arrow emphases. Same hues as the note and tip callouts, not a second palette. */
+  --flow: #2c55b4;
+  --flow-back: #2d6a3e;
+  --red: #d82d48;
+  --red-text: #c2263f;
+  --red-tint: #fbeef0;
+  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
+  --serif: "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "Source Serif 4", Georgia, serif;
+  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
+  --font-mono: var(--mono);
+  --fs-display: 46px;
+  --fs-hero: 52px;
+  --fs-h2: 26px;
+  --fs-lead: 20px;
+  --fs-small: 14px;
+  --fs-meta: 13px;
+  --r: 12px;
+  --r-lg: 24px;
+  --col: 740px;
+  --rail: 232px;
+  --gap: 48px;
+  --content: var(--col);
+  --wide: 1200px;
+  --shell: 1200px;
+  --hdr: 64px;
+  color-scheme: light;
+}
+
+.garden-ui-preview[data-theme="dark"],
+html[data-theme="dark"] {
+  /* Light backing under article images and link icons, so dark-on-transparent
+     artwork stays legible. */
+  --image-backing: #faf9f5;
+  --paper: #1f1e1d;
+  --paper-deep: #262624;
+  --card: #262624;
+  --ink: #eeece7;
+  --ink-soft: #dcd9d2;
+  --text: #dcd9d2;
+  --soft: #bdb9b0;
+  --muted: #a09b91;
+  --grey: #a09b91;
+  --faint: #a09b91;
+  --rule: #3d3d3a;
+  --rule-strong: #4d4c48;
+  --line: #3d3d3a;
+  --line-strong: #4d4c48;
+  --well: #262624;
+  --tint: rgb(238 236 231 / 7%);
+  --blue: #eeece7;
+  --blue-tint: #30302e;
+  --blue-line: rgb(238 236 231 / 25%);
+  --cover: #4d4c48;
+  --chip: #30302e;
+  --chip-hover: #3d3d3a;
+  --chip-on: #eeece7;
+  --chip-on-text: #1f1e1d;
+  --card-hover: #30302e;
+  --card-shadow: 0 1px 2px rgb(0 0 0 / 18%);
+  --accent: var(--blue);
+  --accent-soft: var(--blue-tint);
+  --selection: rgb(238 236 231 / 18%);
+  --hl: #5e4e17;
+  --flow: #93b2f4;
+  --flow-back: #8fcb9f;
+  --red: #f29aab;
+  --red-text: #f29aab;
+  --red-tint: rgb(242 154 171 / 12%);
+  color-scheme: dark;
+}
+
+@media (min-width: 1400px) {
+  .garden-ui-preview,
+  .garden-ui-preview[data-theme="light"],
+  .garden-ui-preview[data-theme="dark"],
+  html[data-theme="dark"] { --fs-hero: 56px; }
+}
+
+@media (max-width: 1239px) {
+  .garden-ui-preview,
+  .garden-ui-preview[data-theme="light"],
+  .garden-ui-preview[data-theme="dark"],
+  html[data-theme="dark"] { --fs-hero: 44px; }
+}
+
+@media (max-width: 640px) {
+  .garden-ui-preview,
+  .garden-ui-preview[data-theme="light"],
+  .garden-ui-preview[data-theme="dark"],
+  html[data-theme="dark"] {
+    --fs-hero: 30px;
+    --fs-h2: 23px;
+    --fs-lead: 18px;
+  }
+}
+
+/* A2 article, shell and component chrome. Loaded after globals.css so these win. */
+
+.garden-ui-preview body {
+  background: var(--paper);
+  color: var(--text);
+  font: 400 var(--fs-body) / 1.75 var(--sans);
+  font-kerning: normal;
+}
+
+.garden-ui-preview .site-header {
+  position: sticky;
+  top: 0;
+  background: var(--paper);
+  border-bottom: 1px solid transparent;
+}
+
+.garden-ui-preview .header-inner {
+  width: min(var(--shell), calc(100% - 64px));
+  min-height: var(--hdr);
+  height: var(--hdr);
+  gap: 28px;
+}
+
+.garden-ui-preview .brand {
+  gap: 0;
+  font: 600 var(--fs-lead) / 1 var(--serif);
+  color: var(--ink);
+}
+
+.garden-ui-preview .brand small {
+  display: none;
+}
+
+.garden-ui-preview .brand strong {
+  font: 600 var(--fs-lead) / 1 var(--serif);
+  letter-spacing: 0;
+  color: var(--ink);
+}
+
+.garden-ui-preview .main-nav {
+  margin-left: auto;
+  gap: 4px;
+}
+
+.garden-ui-preview .main-nav a {
+  color: var(--soft);
+  font-size: 15px;
+  font-weight: 400;
+  padding: 8px 12px;
+  border-radius: var(--r);
+}
+
+.garden-ui-preview .main-nav a + a::before {
+  content: none;
+}
+
+.garden-ui-preview .main-nav a:hover,
+.garden-ui-preview .main-nav a:focus-visible {
+  color: var(--ink);
+  background: var(--tint);
+  text-decoration: none;
+}
+
+.garden-ui-preview .icon-button,
+.garden-ui-preview .column-feature,
+.garden-ui-preview .archive-card,
+.garden-ui-preview .thought-card,
+.garden-ui-preview .markdown-body pre,
+.garden-ui-preview .markdown-body blockquote,
+.garden-ui-preview .toc,
+.garden-ui-preview .g-stat,
+.garden-ui-preview .g-cmp,
+.garden-ui-preview .g-card,
+.garden-ui-preview .g-timeline,
+.garden-ui-preview .g-sandbox,
+.garden-ui-preview .g-html {
+  box-shadow: none;
+}
+
+.garden-ui-preview .page-shell,
+.garden-ui-preview .index-page,
+.garden-ui-preview .reading-page {
+  font-family: var(--sans);
+}
+
+.garden-ui-preview .page-intro h1,
+.garden-ui-preview .sh-head h1 {
+  font: 700 var(--fs-display) / 1.2 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+}
+
+/* ----- article ----- */
+
+.garden-ui-preview .post-reading-page,
+.garden-ui-preview .column-reading-page {
+  padding-top: 0;
+}
+
+.garden-ui-preview .column-reading-page {
+  width: min(1340px, calc(100% - 64px));
+}
+
+.garden-ui-preview .post-reading-page {
+  /* rail + gap + 740px column + gap + rail, plus side padding */
+  width: min(1360px, 100%);
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+.garden-ui-preview .post-reading-page .article-summary-row.hero,
+.garden-ui-preview .column-reading-page .article-header.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 56px 0 0;
+  border-bottom: 0;
+  text-align: center;
+}
+
+.garden-ui-preview .hero h1,
+.garden-ui-preview .article-header h1 {
+  font: 700 var(--fs-hero) / 1.22 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  text-wrap: balance;
+  /* Titles wrap; an English word only breaks if it alone cannot fit. */
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 1240px) {
+  .garden-ui-preview .hero h1:not(.h1-br),
+  .garden-ui-preview .article-header h1:not(.h1-br) {
+    max-width: none;
+  }
+}
+
+.garden-ui-preview .hero h1.h1-br {
+  white-space: normal;
+  max-width: 1040px;
+}
+
+.garden-ui-preview .h1-line {
+  display: block;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+
+.garden-ui-preview .vh {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+  .garden-ui-preview .hero h1.h1-br {
+    max-width: none;
+    font-size: min(var(--fs-hero), calc(min(100vw - 80px, 1276px) / var(--l)));
+  }
+}
+
+.garden-ui-preview .article-meta,
+.garden-ui-preview .hero .meta {
+  justify-content: center;
+  margin-top: 20px;
+  gap: 6px 24px;
+  font-size: var(--fs-small);
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+.garden-ui-preview .hero .meta a.orig {
+  color: var(--blue);
+  text-decoration: none;
+  border-bottom: 1px solid var(--blue-line);
+  font-size: var(--fs-meta);
+}
+
+.garden-ui-preview .article-tagrow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.garden-ui-preview .article-tagrow li {
+  margin: 0;
+  padding: 0;
+}
+
+.garden-ui-preview .article-tagrow .tag-chip {
+  position: relative;
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--chip);
+  color: var(--soft);
+  font-size: var(--fs-meta);
+  line-height: 1.6;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* 44px tall hit area without enlarging the chip */
+.garden-ui-preview .article-tagrow .tag-chip::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 44px;
+  transform: translateY(-50%);
+}
+
+.garden-ui-preview .article-tagrow .tag-chip:hover {
+  background: var(--chip-hover);
+  color: var(--ink);
+}
+
+.garden-ui-preview .article-tagrow .tag-chip:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
+.garden-ui-preview .cover-card.cover-img,
+.garden-ui-preview .article-hero.article-cover {
+  width: 100%;
+  /* Column plus half a gutter each side: centred, and clear of the TOC rail. */
+  max-width: calc(var(--col) + 72px);
+  margin: 48px auto 0;
+  aspect-ratio: auto;
+  background: none;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+  border-radius: var(--r-lg);
+  box-shadow: none;
+}
+
+.garden-ui-preview .cover-img img,
+.garden-ui-preview .article-hero img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: inherit;
+}
+
+.garden-ui-preview .column-feature-cover,
+.garden-ui-preview .archive-cover {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: inherit;
+}
+
+.garden-ui-preview .post-reading-page .article-reading-layout {
+  --rail: 200px;
+  --gap: 72px;
+  display: grid;
+  grid-template-columns: minmax(0, var(--rail)) minmax(0, var(--col)) var(--rail);
+  column-gap: var(--gap);
+  justify-content: center;
+  align-items: start;
+  margin-top: 64px;
+}
+
+.garden-ui-preview .post-reading-page .article-reading-column {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  max-width: var(--col);
+}
+
+/* The compare post puts two wide diagrams side by side. */
+@media (min-width: 1260px) {
+  .garden-ui-preview .post-reading-page:has(.g-compose-pair) .article-reading-layout {
+    grid-template-columns: 24px minmax(0, 1fr) var(--rail);
+  }
+
+  .garden-ui-preview .post-reading-page:has(.g-compose-pair) .article-reading-column {
+    max-width: none;
+  }
+}
+
+.garden-ui-preview .post-reading-page .article-reading-layout > .toc {
+  grid-column: 3;
+  grid-row: 1;
+  margin-top: 0;
+  border-left: 0;
+  padding: 4px 0 24px;
+  color: var(--grey);
+}
+
+.garden-ui-preview .lead {
+  font-size: var(--fs-lead);
+  line-height: 1.65;
+  color: var(--soft);
+  margin: 0 0 36px;
+}
+
+.garden-ui-preview .post-reading-page .e-content,
+.garden-ui-preview .column-reading-page .e-content {
+  --qa-bar: #e8e6dc;
+  --qa-text: #737069;
+}
+
+.garden-ui-preview :root[data-theme="dark"] .post-reading-page .e-content,
+.garden-ui-preview :root[data-theme="dark"] .column-reading-page .e-content,
+.garden-ui-preview html[data-theme="dark"] .post-reading-page .e-content,
+.garden-ui-preview html[data-theme="dark"] .column-reading-page .e-content {
+  --qa-bar: #3a3833;
+  --qa-text: #a39e94;
+}
+
+.garden-ui-preview .lead.quote-plain {
+  margin: 0 0 32px;
+  padding: 2px 0 2px 24px;
+  border-left: 3px solid var(--qa-bar, #e8e6dc);
+  border-radius: 0;
+  background: none;
+  color: var(--qa-text, #737069);
+  font-size: var(--fs-body);
+  line-height: 1.75;
+}
+
+.garden-ui-preview .markdown-body.prose {
+  font: 400 var(--fs-body) / 1.75 var(--sans);
+  color: var(--text);
+}
+
+.garden-ui-preview .markdown-body h2 {
+  font: 700 var(--fs-h2) / 1.4 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  margin: 64px 0 20px;
+}
+
+.garden-ui-preview .markdown-body h2::before {
+  content: none;
+}
+
+.garden-ui-preview .markdown-body h3 {
+  font: 600 var(--fs-lead) / 1.5 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  margin: 44px 0 12px;
+}
+
+.garden-ui-preview .markdown-body h2 + h3 {
+  margin-top: 28px;
+}
+
+/* H4 sits below H3: same sans family, smaller size, still bold. */
+.garden-ui-preview .markdown-body h4 {
+  font: 600 var(--fs-body) / 1.55 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  margin: 28px 0 10px;
+}
+
+.garden-ui-preview .markdown-body h3 + h4 {
+  margin-top: 18px;
+}
+
+.garden-ui-preview .sec-no {
+  color: var(--blue);
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.45em;
+}
+
+.garden-ui-preview .markdown-body p {
+  margin: 0 0 22px;
+}
+
+.garden-ui-preview .markdown-body > :is(ul, ol) + p {
+  margin-top: 22px;
+}
+
+.garden-ui-preview .markdown-body strong {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.garden-ui-preview .markdown-body a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
+  transition: text-decoration-color 0.15s ease;
+}
+
+.garden-ui-preview .markdown-body a:hover {
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
+}
+
+/* A heading's own anchor link reads as the heading: no underline in any
+   state. Links inside the heading (a.ext) keep their own underline. */
+.garden-ui-preview .markdown-body .h-anchor,
+.garden-ui-preview .markdown-body .h-anchor:hover,
+.garden-ui-preview .markdown-body .h-anchor:active {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Keyboard focus rings the heading, not the anchor, so a heading split
+   around a link shows one ring. */
+.garden-ui-preview .markdown-body .h-anchor:focus-visible {
+  outline: none;
+}
+
+.garden-ui-preview .markdown-body :is(h2, h3, h4):has(.h-anchor:focus-visible) {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* A heading with a link in it has one self-link (its first stretch of text),
+   stretched over the whole heading; the link inside sits above it. */
+.garden-ui-preview .markdown-body .h-split {
+  position: relative;
+}
+
+.garden-ui-preview .markdown-body .h-split .h-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.garden-ui-preview .markdown-body .h-split a:not(.h-anchor) {
+  position: relative;
+  z-index: 1;
+}
+
+.garden-ui-preview .markdown-body a.ext {
+  text-decoration-style: dotted;
+  text-decoration-thickness: 1.5px;
+  text-decoration-color: rgb(27 26 24 / 45%);
+  padding-right: 0.8em;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5 1.5 8.5' fill='none' stroke='%238A867E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.1em top 50% / 0.6em no-repeat;
+}
+
+.garden-ui-preview html[data-theme="dark"] .markdown-body a.ext {
+  text-decoration-color: rgb(238 236 231 / 45%);
+}
+
+.garden-ui-preview .markdown-body a.ext:hover {
+  text-decoration-style: solid;
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
+}
+
+/* Site favicon before an external link, downloaded at build time. */
+.garden-ui-preview .markdown-body a.ext img.fav {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin: 0 5px 0 0;
+  border-radius: 3px;
+  vertical-align: -2px;
+  object-fit: contain;
+}
+
+/* Only the icon and the first word stay together; the rest of a long link,
+   a bare URL included, wraps when the line runs out. */
+.garden-ui-preview .markdown-body a.ext {
+  overflow-wrap: break-word;
+}
+
+.garden-ui-preview .markdown-body a.ext .fav-keep {
+  white-space: nowrap;
+}
+
+/* Many icons are black on transparent; give them a light backing in dark mode. */
+.garden-ui-preview html[data-theme="dark"] .markdown-body img.fav {
+  padding: 1px;
+  box-sizing: border-box;
+  background: var(--image-backing);
+}
+
+.garden-ui-preview .markdown-body .table-wrap a.ext img.fav,
+.garden-ui-preview .markdown-body h2 a.ext img.fav,
+.garden-ui-preview .markdown-body h3 a.ext img.fav {
+  display: none;
+}
+
+.garden-ui-preview .markdown-body :not(pre) > code {
+  font: 400 var(--fs-small) / 1 var(--mono);
+  color: var(--ink);
+  background: var(--tint);
+  padding: 3px 6px;
+  border-radius: 5px;
+}
+
+.garden-ui-preview .markdown-body pre.code,
+.garden-ui-preview .prose pre.code {
+  margin: 28px 0;
+  padding: 18px 22px;
+  background: var(--well);
+  border-radius: 8px;
+  border: 0;
+  box-shadow: none;
+  overflow-x: auto;
+}
+
+.garden-ui-preview .markdown-body pre.code code,
+.garden-ui-preview .prose pre.code code {
+  display: block;
+  background: none;
+  padding: 0;
+  font-size: var(--fs-small);
+  line-height: 1.6;
+  color: var(--ink);
+}
+
+.garden-ui-preview .markdown-body.prose {
+  --al-note: #2c55b4;
+  --al-note-bg: #eef3fc;
+  --al-note-line: rgba(44, 85, 180, 0.22);
+  --al-tip: #2d6a3e;
+  --al-tip-bg: #edf5ef;
+  --al-tip-line: rgba(45, 106, 62, 0.22);
+  --al-important: #6a3fb5;
+  --al-important-bg: #f3effa;
+  --al-important-line: rgba(106, 63, 181, 0.22);
+  --al-warning: #8a5300;
+  --al-warning-bg: #fbf3e5;
+  --al-warning-line: rgba(176, 108, 0, 0.26);
+  --al-caution: #b4213a;
+  --al-caution-bg: #fbeef0;
+  --al-caution-line: rgba(216, 45, 72, 0.28);
+}
+
+.garden-ui-preview :root[data-theme="dark"] .markdown-body.prose,
+.garden-ui-preview :root[data-theme="dark"] .prose,
+.garden-ui-preview html[data-theme="dark"] .markdown-body.prose,
+.garden-ui-preview html[data-theme="dark"] .prose {
+  --al-note: #93b2f4;
+  --al-note-bg: rgba(147, 178, 244, 0.09);
+  --al-note-line: rgba(147, 178, 244, 0.28);
+  --al-tip: #8fcb9f;
+  --al-tip-bg: rgba(143, 203, 159, 0.08);
+  --al-tip-line: rgba(143, 203, 159, 0.26);
+  --al-important: #bfa5f0;
+  --al-important-bg: rgba(191, 165, 240, 0.09);
+  --al-important-line: rgba(191, 165, 240, 0.28);
+  --al-warning: #e6b566;
+  --al-warning-bg: rgba(230, 181, 102, 0.08);
+  --al-warning-line: rgba(230, 181, 102, 0.28);
+  --al-caution: #f2909f;
+  --al-caution-bg: rgba(242, 144, 159, 0.08);
+  --al-caution-line: rgba(242, 144, 159, 0.28);
+}
+
+.garden-ui-preview .markdown-body blockquote:not(.markdown-alert) {
+  margin: 28px 0;
+  padding: 16px 22px 18px;
+  background: var(--well);
+  border: 0;
+  border-radius: var(--r);
+  box-shadow: none;
+  color: var(--ink);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert {
+  --al: var(--al-note);
+  --al-bg: var(--al-note-bg);
+  --al-line: var(--al-note-line);
+  margin: 28px 0;
+  padding: 16px 20px 18px;
+  border: 1px solid var(--al-line);
+  border-radius: 12px;
+  background: var(--al-bg);
+  box-shadow: none;
+  color: var(--text);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert-tip {
+  --al: var(--al-tip);
+  --al-bg: var(--al-tip-bg);
+  --al-line: var(--al-tip-line);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert-important {
+  --al: var(--al-important);
+  --al-bg: var(--al-important-bg);
+  --al-line: var(--al-important-line);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert-warning {
+  --al: var(--al-warning);
+  --al-bg: var(--al-warning-bg);
+  --al-line: var(--al-warning-line);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert-caution {
+  --al: var(--al-caution);
+  --al-bg: var(--al-caution-bg);
+  --al-line: var(--al-caution-line);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--al);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert .markdown-alert-title svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert p {
+  margin: 0;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert p + p,
+.garden-ui-preview .markdown-body .markdown-alert p + ul,
+.garden-ui-preview .markdown-body .markdown-alert p + ol,
+.garden-ui-preview .markdown-body .markdown-alert ul + p,
+.garden-ui-preview .markdown-body .markdown-alert ol + p {
+  margin-top: 10px;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert ul,
+.garden-ui-preview .markdown-body .markdown-alert ol {
+  margin: 8px 0 0;
+  padding-left: 1.4em;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert li {
+  margin: 4px 0;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.garden-ui-preview .markdown-body .markdown-alert code {
+  background: rgba(27, 26, 24, 0.06);
+}
+
+.garden-ui-preview :root[data-theme="dark"] .markdown-body .markdown-alert code,
+.garden-ui-preview html[data-theme="dark"] .markdown-body .markdown-alert code {
+  background: var(--tint);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert a {
+  text-decoration-color: color-mix(in srgb, var(--al) 45%, transparent);
+}
+
+.garden-ui-preview .markdown-body .markdown-alert a:hover {
+  text-decoration-color: var(--al);
+}
+
+@media (max-width: 640px) {
+  .garden-ui-preview .markdown-body .markdown-alert {
+    padding: 14px 16px 16px;
+  }
+}
+
+.garden-ui-preview .markdown-image-trigger {
+  display: block;
+  max-width: 100%;
+  margin: 28px 0;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
+.garden-ui-preview .markdown-body img,
+.garden-ui-preview .markdown-image-trigger img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Dark mode: article images sit on the light paper colour, so a transparent
+   image (black lines on nothing, like most SVG diagrams) stays legible and an
+   opaque one looks the same. The backing is the image's own background, so it
+   takes the image's own corner radius; no padding, no filters. Favicons, link
+   card thumbnails, covers, avatars and the logo are not article images. */
+.garden-ui-preview html[data-theme="dark"] .markdown-image-trigger img,
+.garden-ui-preview html[data-theme="dark"] .markdown-image-lightbox-content img,
+.garden-ui-preview html[data-theme="dark"] .markdown-body > img,
+.garden-ui-preview html[data-theme="dark"] .markdown-body > p > img:not([class]) {
+  background: var(--image-backing);
+}
+
+.garden-ui-preview .markdown-body .fig {
+  margin: 36px 0;
+}
+
+.garden-ui-preview .markdown-body .fig-card {
+  background: transparent;
+  border: 1px solid var(--rule);
+  border-radius: 16px;
+  padding: 12px;
+}
+
+.garden-ui-preview .markdown-body .fig-card .markdown-image-trigger {
+  margin: 0;
+  width: 100%;
+}
+
+.garden-ui-preview .markdown-body .fig-card img {
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
+  border-radius: 8px;
+}
+
+.garden-ui-preview .markdown-body .fig-card > svg.excalidraw,
+.garden-ui-preview .markdown-body svg.excalidraw {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.garden-ui-preview .markdown-body svg.excalidraw text {
+  user-select: text;
+}
+
+.garden-ui-preview .markdown-body .fig figcaption {
+  margin-top: 12px;
+  font-size: var(--fs-small);
+  line-height: 1.6;
+  color: var(--muted);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .garden-ui-preview .markdown-body .fig-card {
+    padding: 8px;
+    border-radius: 12px;
+  }
+
+  .garden-ui-preview .markdown-body .fig-card img {
+    border-radius: 6px;
+  }
+}
+
+.garden-ui-preview .table-wrap {
+  margin: 32px 0;
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+  overflow-x: auto;
+  background: transparent;
+  box-shadow: none;
+}
+
+.garden-ui-preview .table-wrap table {
+  margin: 0;
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--fs-small);
+  line-height: 1.6;
+}
+
+.garden-ui-preview .table-wrap th,
+.garden-ui-preview .table-wrap td {
+  padding: 10px 14px;
+  overflow-wrap: normal;
+  word-break: normal;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--rule);
+}
+
+.garden-ui-preview .table-wrap th {
+  font-weight: 600;
+  color: var(--ink);
+  background: transparent;
+}
+
+.garden-ui-preview .table-wrap td .markdown-image-trigger {
+  margin: 0;
+}
+
+.garden-ui-preview .table-wrap td .markdown-image-trigger img {
+  width: 280px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+@media (min-width: 900px) {
+  .garden-ui-preview .ux-wide {
+    margin-left: calc(-1 * var(--wl, 0px)) !important;
+    margin-right: calc(-1 * var(--wr, 0px)) !important;
+    max-width: none !important;
+    width: auto !important;
+  }
+}
+
+/* A breakout decided at build time from the image's known size. It holds the
+   figure at its final width before the image loads and before the script
+   measures; the script then takes over (and removes .fig-wide). Only where the
+   article column is a full 740px with room on both sides. */
+@media (min-width: 1348px) {
+  .garden-ui-preview .post-reading-page .markdown-body .fig-wide {
+    margin-left: calc(-1 * var(--wl, 0px));
+    margin-right: calc(-1 * var(--wr, 0px));
+    max-width: none;
+    width: auto;
+  }
+}
+
+.garden-ui-preview .toc {
+  font-size: var(--fs-small);
+  line-height: 1.5;
+  color: var(--grey);
+  transition: transform 0.3s ease;
+}
+
+.garden-ui-preview .toc a {
+  color: var(--grey);
+}
+
+.garden-ui-preview .toc .toc-item-row {
+  position: relative;
+  padding-left: 10px;
+}
+
+.garden-ui-preview .toc a[aria-current="location"],
+.garden-ui-preview .toc li.active > .toc-item-row > a {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+/* The current section carries an ink bar, so it reads without colour. */
+.garden-ui-preview .toc li.active > .toc-item-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.2em;
+  bottom: 0.2em;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--ink);
+}
+
+@media (min-width: 1200px) {
+  .garden-ui-preview html[data-toc-yield] .toc {
+    transform: translateX(var(--tocshift, 0px));
+  }
+
+  .garden-ui-preview html[data-toc-yield][data-toc-hide] .toc {
+    visibility: hidden;
+    transition: transform 0.3s ease, visibility 0s 0.3s;
+  }
+
+  /* A hidden TOC slides just past the right edge; clip it there so it does not
+     widen the page. clip (unlike hidden) keeps the sticky TOC working. Not tied
+     to data-toc-yield: the attribute goes as the TOC starts sliding back, and
+     the page would widen for that 0.3s. */
+  .garden-ui-preview #main-content:has(.toc) {
+    overflow-x: clip;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .garden-ui-preview .toc,
+  .garden-ui-preview .markdown-body a,
+  .garden-ui-preview .h1-line,
+  .garden-ui-preview .ux-btn {
+    transition: none;
+  }
+}
+
+.garden-ui-preview .katex-display {
+  margin: 28px 0;
+  padding: 20px 24px;
+  background: transparent;
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+  overflow-x: auto;
+}
+
+/* ----- components ----- */
+
+.garden-ui-preview .g-card,
+.garden-ui-preview .g-stat,
+.garden-ui-preview .g-cmp,
+.garden-ui-preview .g-timeline,
+.garden-ui-preview .g-chart,
+.garden-ui-preview .g-html,
+.garden-ui-preview .g-idea,
+.garden-ui-preview .g-legacy,
+.garden-ui-preview .g-unknown {
+  margin: 0 0 1.2em;
+  box-shadow: none;
+}
+
+.garden-ui-preview .g-sandbox,
+.garden-ui-preview .g-play,
+.garden-ui-preview .g-html {
+  max-width: 100%;
+}
+
+.garden-ui-preview .g-card,
+.garden-ui-preview .g-stat,
+.garden-ui-preview .g-cmp,
+.garden-ui-preview .g-timeline,
+.garden-ui-preview .g-html {
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+  background: transparent;
+}
+
+.garden-ui-preview .g-card,
+.garden-ui-preview .g-cmp,
+.garden-ui-preview .g-html {
+  padding: 14px 16px;
+}
+
+.garden-ui-preview .g-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.garden-ui-preview .g-stat {
+  padding: 14px 16px;
+  background: transparent;
+}
+
+.garden-ui-preview .g-stat-n {
+  font: 700 32px / 1.1 var(--sans);
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+
+.garden-ui-preview .g-stat-n small {
+  font-size: 15px;
+  font-weight: 600;
+  margin-left: 4px;
+  color: var(--soft);
+}
+
+.garden-ui-preview .g-stat-l,
+.garden-ui-preview .g-stat-c {
+  margin-top: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+.garden-ui-preview .g-compare {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.garden-ui-preview .g-cmp h4 {
+  margin: 0 0 8px;
+  font: 600 16px / 1.4 var(--sans);
+  color: var(--ink);
+}
+
+/* Cards in one compare block are one group: only the grid gap sits between
+   them, and the block keeps the space below it. */
+.garden-ui-preview .g-compare {
+  margin: 0 0 1.2em;
+}
+
+.garden-ui-preview .g-compare > .g-cmp {
+  margin: 0;
+}
+
+.garden-ui-preview .g-cmp > :last-child {
+  margin-bottom: 0;
+}
+
+/* One-line cell 「X：Y」: X sits on its own line like a title, colon kept.
+   .g-cmp-t holds the title only; the colon and its spaces are .g-cmp-sep. */
+.garden-ui-preview .g-cmp .g-cmp-h {
+  display: block;
+  margin: 0 0 8px;
+  font: 600 16px / 1.4 var(--sans);
+  color: var(--ink);
+}
+
+.garden-ui-preview .g-cmp dl {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 10px 0 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--rule);
+}
+
+.garden-ui-preview .g-cmp dl > span {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--well);
+  font: 400 12px / 1.45 var(--sans);
+}
+
+.garden-ui-preview .g-cmp dt {
+  margin: 0;
+  color: var(--muted);
+}
+
+.garden-ui-preview .g-cmp dt::after {
+  content: "·";
+  margin-left: 5px;
+  color: var(--muted);
+}
+
+.garden-ui-preview .g-cmp dd {
+  margin: 0;
+  font-weight: 500;
+  color: var(--ink);
+}
+
+.garden-ui-preview .g-cmp p,
+.garden-ui-preview .g-card p,
+.garden-ui-preview .g-tl-x {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.garden-ui-preview .g-timeline {
+  padding: 18px 20px;
+}
+
+.garden-ui-preview .g-timeline ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.garden-ui-preview .g-timeline li {
+  position: relative;
+  padding: 0 0 16px 22px;
+  border-left: 2px solid var(--rule);
+  margin-left: 6px;
+}
+
+.garden-ui-preview .g-timeline li::before {
+  content: "";
+  position: absolute;
+  left: -6px;
+  top: 6px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--paper);
+  border: 2px solid var(--blue);
+}
+
+.garden-ui-preview .g-tl-d {
+  font-size: 13px;
+  color: var(--muted);
+  margin: 0;
+}
+
+.garden-ui-preview .g-tl-t {
+  font-weight: 600;
+  color: var(--ink);
+  margin: 2px 0 0;
+}
+
+.garden-ui-preview .g-bar {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 60px;
+  gap: 10px;
+  align-items: center;
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+.garden-ui-preview .g-bar-track {
+  height: 14px;
+  border-radius: 4px;
+  background: var(--well);
+}
+
+.garden-ui-preview .g-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: var(--blue);
+  min-width: 3px;
+}
+
+.garden-ui-preview .g-mermaid svg,
+.garden-ui-preview .dx-svg {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
+.garden-ui-preview .g-mermaid {
+  margin: 28px 0;
+  padding: 16px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+  overflow-x: auto;
+  text-align: center;
+  background: transparent;
+}
+
+.garden-ui-preview .g-mermaid svg {
+  max-width: 100% !important;
+  max-height: none;
+  height: auto;
+  display: inline-block;
+}
+
+.garden-ui-preview .g-mermaid.ok > pre {
+  display: none;
+}
+
+.garden-ui-preview .g-mermaid pre.code {
+  margin: 0;
+  text-align: left;
+  white-space: pre;
+}
+
+.garden-ui-preview .g-codediff {
+  background: var(--well);
+  border-radius: 8px;
+  margin: 28px 0;
+  overflow: hidden;
+}
+
+.garden-ui-preview .g-codediff > [role="tablist"] {
+  display: flex;
+  gap: 4px;
+  position: relative;
+  margin: 0;
+  padding: 4px 10px 0;
+  border-bottom: 1px solid var(--rule);
+}
+
+.garden-ui-preview .g-codediff > [role="tablist"]:has(> .ux-copy) {
+  padding-right: 46px;
+}
+
+.garden-ui-preview .g-codediff [role="tab"] {
+  font: 500 13px / 1 var(--sans);
+  color: var(--muted);
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 8px 10px;
+  min-height: 40px;
+  cursor: pointer;
+}
+
+.garden-ui-preview .g-codediff [role="tab"][aria-selected="true"] {
+  color: var(--ink);
+  border-bottom-color: var(--blue);
+}
+
+.garden-ui-preview .g-codediff pre.code {
+  margin: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* One diff line per row; the marker column stays out of the copied text. */
+.garden-ui-preview .g-diff code > span {
+  display: block;
+  padding: 0 12px 0 0;
+  white-space: pre;
+}
+
+.garden-ui-preview .g-diff .d-m {
+  display: inline-block;
+  width: 2ch;
+  color: var(--muted);
+  user-select: none;
+}
+
+.garden-ui-preview .g-diff .d-add {
+  background: var(--tint);
+}
+
+.garden-ui-preview .g-diff .d-add .d-m {
+  color: var(--ink);
+}
+
+.garden-ui-preview .g-diff .d-del {
+  background: var(--red-tint);
+  color: var(--soft);
+}
+
+.garden-ui-preview .g-diff .d-del .d-m {
+  color: var(--red-text);
+}
+
+.garden-ui-preview .ux-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font: 500 12px / 1 var(--sans);
+  box-shadow: none;
+}
+
+.garden-ui-preview .ux-btn svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.garden-ui-preview .ux-btn.ux-done {
+  width: auto;
+  padding: 0 10px;
+  color: var(--blue);
+  border-color: var(--blue-line);
+}
+
+@media (pointer: coarse) {
+  .garden-ui-preview .ux-btn:not(.ux-copy) {
+    position: relative;
+  }
+
+  .garden-ui-preview .ux-btn::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 44px;
+    height: 44px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.garden-ui-preview .ux-cb {
+  position: relative;
+}
+
+.garden-ui-preview .ux-cb > .ux-copy,
+.garden-ui-preview .g-codediff > [role="tablist"] > .ux-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+}
+
+.garden-ui-preview .g-codediff > [role="tablist"] > .ux-copy {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* The language label sits left of the copy button, 8px apart, centred on it. */
+.garden-ui-preview .markdown-body .ux-cb > pre[data-language]::before {
+  top: 8px;
+  right: 48px;
+  line-height: 32px;
+}
+
+/* 「已复制」 widens the button over the label; the label steps aside meanwhile. */
+.garden-ui-preview .markdown-body .ux-cb:has(> .ux-done) > pre[data-language]::before {
+  visibility: hidden;
+}
+
+/* Narrow screens: no language label, in the article (only the copy button
+   stays) and in the file preview drawer alike; nothing else changes. */
+@media (max-width: 639.98px) {
+  .garden-ui-preview .markdown-body pre[data-language]::before {
+    display: none;
+  }
+}
+
+@media (hover: hover) {
+  .garden-ui-preview .ux-copy {
+    opacity: 0;
+  }
+
+  .garden-ui-preview .ux-cb:hover > .ux-copy,
+  .garden-ui-preview .ux-cb:focus-within > .ux-copy,
+  .garden-ui-preview .g-codediff:hover .ux-copy,
+  .garden-ui-preview .g-codediff:focus-within .ux-copy,
+  .garden-ui-preview .ux-copy.ux-done {
+    opacity: 1;
+  }
+}
+
+.garden-ui-preview .ux-fs {
+  position: relative;
+  background: transparent;
+}
+
+.garden-ui-preview .ux-fs > .ux-fsbar {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  display: flex;
+  margin: 0;
+}
+
+.garden-ui-preview .ux-fs:not(.g-sandbox) > .ux-fsbar + * {
+  padding-right: 44px;
+}
+
+.garden-ui-preview .ux-fs:not(.g-sandbox) > .ux-fsbar + .g-sandbox {
+  padding-right: 0;
+}
+
+.garden-ui-preview .ux-fs:fullscreen,
+.garden-ui-preview .ux-fs.ux-fs-on {
+  background: var(--paper);
+  overflow: auto;
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+.garden-ui-preview .ux-fs:fullscreen {
+  padding: 20px max(20px, calc(50vw - 560px));
+}
+
+.garden-ui-preview .ux-fs.ux-fs-on {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  padding: 16px;
+  border: 0;
+}
+
+.garden-ui-preview html.ux-lock,
+.garden-ui-preview html.ux-lock body {
+  overflow: hidden;
+}
+
+.garden-ui-preview .ux-live {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.garden-ui-preview .g-sandbox iframe,
+.garden-ui-preview .g-html iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+
+.garden-ui-preview .g-idea,
+.garden-ui-preview .g-legacy,
+.garden-ui-preview .g-unknown {
+  font-size: var(--fs-small);
+  color: var(--muted);
+}
+
+.garden-ui-preview .garden-author-catalog {
+  margin: 0 0 28px;
+  padding: 16px 18px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+}
+
+.garden-ui-preview .garden-author-catalog h2 {
+  margin: 0 0 8px;
+  font: 700 20px / 1.4 var(--sans);
+}
+
+.garden-ui-preview .garden-author-catalog ul {
+  margin: 12px 0 0;
+  padding-left: 1.2em;
+}
+
+.garden-ui-preview .hljs-keyword,
+.garden-ui-preview .hljs-built_in,
+.garden-ui-preview .hljs-type,
+.garden-ui-preview .hljs-meta .hljs-keyword {
+  color: #30302e;
+  font-weight: 600;
+}
+
+.garden-ui-preview .hljs-string,
+.garden-ui-preview .hljs-regexp {
+  color: #2d6a3e;
+}
+
+.garden-ui-preview .hljs-comment,
+.garden-ui-preview .hljs-quote {
+  color: #6e6b64;
+  font-style: normal;
+}
+
+.garden-ui-preview .hljs-number,
+.garden-ui-preview .hljs-literal {
+  color: #8a5300;
+}
+
+.garden-ui-preview .hljs-title,
+.garden-ui-preview .hljs-title.function_,
+.garden-ui-preview .hljs-title.class_ {
+  color: #6a3fb5;
+}
+
+.garden-ui-preview .hljs-attr,
+.garden-ui-preview .hljs-variable,
+.garden-ui-preview .hljs-params {
+  color: #1b1a18;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-keyword,
+.garden-ui-preview html[data-theme="dark"] .hljs-built_in,
+.garden-ui-preview html[data-theme="dark"] .hljs-type {
+  color: #eeece7;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-string {
+  color: #8fd1a0;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-comment {
+  color: #a09b91;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-number,
+.garden-ui-preview html[data-theme="dark"] .hljs-literal {
+  color: #e8b86a;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-title,
+.garden-ui-preview html[data-theme="dark"] .hljs-title.function_,
+.garden-ui-preview html[data-theme="dark"] .hljs-title.class_ {
+  color: #c4a8f0;
+}
+
+.garden-ui-preview html[data-theme="dark"] .hljs-attr,
+.garden-ui-preview html[data-theme="dark"] .hljs-variable,
+.garden-ui-preview html[data-theme="dark"] .hljs-params {
+  color: #eeece7;
+}
+
+@media (max-width: 1199px) {
+  .garden-ui-preview .post-reading-page .article-reading-layout {
+    display: block;
+    margin-top: 48px;
+  }
+
+  .garden-ui-preview .post-reading-page .article-reading-column {
+    max-width: var(--col);
+    margin-inline: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .garden-ui-preview .header-inner {
+    width: calc(100% - 32px);
+    min-height: auto;
+    height: auto;
+    padding: 12px 0;
+  }
+
+  .garden-ui-preview .column-reading-page {
+    width: min(1340px, calc(100% - 40px));
+  }
+
+  .garden-ui-preview .post-reading-page {
+    width: 100%;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .garden-ui-preview .lead.quote-plain {
+    padding-left: 18px;
+  }
+
+  .garden-ui-preview .hero,
+  .garden-ui-preview .post-reading-page .article-summary-row.hero {
+    padding: 28px 0 0;
+  }
+
+  .garden-ui-preview .cover-card,
+  .garden-ui-preview .article-hero.article-cover {
+    border-radius: var(--r-lg);
+    margin-top: 28px;
+  }
+}
+
+.garden-ui-preview .sh-row .archive-meta { font-variant-numeric: tabular-nums; }
+.garden-ui-preview .sh-row .archive-copy { display: contents; }
+.garden-ui-preview .sh-row .archive-cover { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+
+.garden-ui-preview .t-no,
+.garden-ui-preview .sec-no {
+  color: var(--blue);
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.45em;
+}
+
+.garden-ui-preview .g-tabs [role="tablist"] { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
+.garden-ui-preview .g-tabs [role="tab"] { font: 500 15px/1 var(--sans); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 12px 10px; margin-bottom: -1px; cursor: pointer; white-space: nowrap; min-height: 44px; }
+.garden-ui-preview .g-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); }
+.garden-ui-preview .g-tabs [role="tabpanel"] { padding-top: 16px; }
+.garden-ui-preview .g-steps { list-style: none; counter-reset: s; padding: 0; margin: 24px 0; }
+.garden-ui-preview .g-steps > li { counter-increment: s; position: relative; padding: 0 0 18px 44px; margin: 0; }
+.garden-ui-preview .g-steps > li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--blue-line); color: var(--blue); font: 600 14px/26px var(--sans); text-align: center; background: var(--paper); }
+.garden-ui-preview .g-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 1px; background: var(--rule); }
+.garden-ui-preview .g-step-t { margin: 0 0 2px; font-weight: 600; color: var(--ink); }
+.garden-ui-preview .g-steps > li > p { margin: 0 0 8px; }
+.garden-ui-preview .g-faq details { border-bottom: 1px solid var(--rule); }
+.garden-ui-preview .g-faq details:first-child { border-top: 1px solid var(--rule); }
+.garden-ui-preview .g-faq summary { cursor: pointer; padding: 12px 28px 12px 0; font-weight: 600; color: var(--ink); list-style: none; position: relative; }
+.garden-ui-preview .g-faq summary::-webkit-details-marker { display: none; }
+.garden-ui-preview .g-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--muted); font-weight: 400; font-size: 20px; }
+.garden-ui-preview .g-faq details[open] summary::after { content: "−"; }
+.garden-ui-preview .g-faq details > div { padding: 0 0 12px; }
+.garden-ui-preview .g-quiz { margin: 28px 0; }
+.garden-ui-preview .g-quiz fieldset { border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 16px; margin: 0; }
+.garden-ui-preview .g-quiz legend { font-weight: 600; color: var(--ink); padding: 0 6px; }
+.garden-ui-preview .g-quiz-tag { display: block; font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
+.garden-ui-preview .g-quiz label { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; min-height: 44px; }
+.garden-ui-preview .g-quiz input { accent-color: var(--blue); width: 18px; height: 18px; margin: 0; }
+.garden-ui-preview .g-quiz-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
+.garden-ui-preview .g-quiz button { font: 600 14px/1 var(--sans); padding: 11px 16px; border-radius: 8px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; min-height: 44px; }
+.garden-ui-preview .g-quiz-out { margin: 0; font-size: 14px; }
+.garden-ui-preview .g-quiz-out.ok { color: #2d6a3e; }
+.garden-ui-preview .g-quiz-out.no { color: #b4213a; }
+.garden-ui-preview html[data-theme="dark"] .g-quiz-out.ok { color: #8fd1a0; }
+.garden-ui-preview html[data-theme="dark"] .g-quiz-out.no { color: #f29aab; }
+.garden-ui-preview .g-quiz-ex { margin-top: 8px; font-size: 15px; color: var(--soft); }
+.garden-ui-preview .g-play { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin: 24px 0; background: transparent; }
+.garden-ui-preview .g-play-f { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
+.garden-ui-preview .g-range { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
+.garden-ui-preview .g-range input { width: 100%; accent-color: var(--blue); min-height: 32px; }
+.garden-ui-preview .g-range output { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
+.garden-ui-preview .g-play-out { margin: 10px 0 0; font-size: 15px; }
+.garden-ui-preview .g-play-out b { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
+.garden-ui-preview .g-play-note { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
+.garden-ui-preview .kv-seg { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.garden-ui-preview .kv-seg legend { float: left; font-size: 14px; color: var(--soft); margin-right: 10px; min-width: 3.2em; padding: 0; }
+.garden-ui-preview .kv-seg label { position: relative; cursor: pointer; }
+.garden-ui-preview .kv-seg input { position: absolute; opacity: 0; inset: 0; }
+.garden-ui-preview .kv-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; font-size: 14px; background: transparent; }
+.garden-ui-preview .kv-seg input:checked + span { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
+.garden-ui-preview .kv-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
+.garden-ui-preview .dx-tok { font: 500 14px ui-monospace, Menlo, monospace; fill: var(--ink); }
+.garden-ui-preview .dx-l { font: 600 13px var(--sans); fill: var(--ink); }
+.garden-ui-preview .dx-cap { font: 12px var(--sans); fill: var(--muted); }
+.garden-ui-preview .dx-k, .garden-ui-preview .dx-v, .garden-ui-preview .dx-q, .garden-ui-preview .dx-o { fill: transparent; stroke: var(--rule-strong); }
+.garden-ui-preview .dx-k, .garden-ui-preview .dx-v { fill: var(--blue-tint); stroke: var(--blue-line); }
+.garden-ui-preview .dx-new { fill: transparent; stroke: var(--blue); stroke-dasharray: 4 3; }
+.garden-ui-preview .dx-cache { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 4; }
+.garden-ui-preview .dx-attn line { stroke: var(--muted); stroke-width: 1; }
+.garden-ui-preview .dx-q { stroke: var(--blue); stroke-width: 2; }
+.garden-ui-preview .g-flow .fl-group { fill: none; stroke: var(--rule-strong); stroke-dasharray: 5 4; }
+.garden-ui-preview .g-flow .fl-n { fill: transparent; stroke: var(--rule-strong); stroke-width: 1.2; }
+.garden-ui-preview .g-flow .fl-m { fill: var(--blue-tint); stroke: var(--blue-line); }
+.garden-ui-preview .g-flow .fl-e line, .garden-ui-preview .g-flow .fl-e1 { stroke: var(--muted); stroke-width: 1.3; fill: none; }
+.garden-ui-preview .g-flow .fl-ah { fill: var(--muted); }
+.garden-ui-preview .g-flow .gc-stw { fill: rgba(180, 33, 58, 0.08); stroke: rgba(180, 33, 58, 0.45); }
+/* Link cards: `[text](url){card}`. Title, description and picture come from the build. */
+.garden-ui-preview .prose .link-cards { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
+.garden-ui-preview .prose .link-cards li { margin: 0; padding: 0; }
+.garden-ui-preview .link-card { display: flex; gap: 20px; align-items: stretch; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; background: transparent; color: inherit; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
+.garden-ui-preview .prose a.link-card, .garden-ui-preview .markdown-body a.link-card { text-decoration: none; padding-right: 16px; background-image: none; }
+.garden-ui-preview .link-card:hover { border-color: var(--rule-strong, #cfcbc2); background: var(--card-hover); }
+.garden-ui-preview .link-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.garden-ui-preview .lc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
+.garden-ui-preview .lc-site { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
+.garden-ui-preview .markdown-body .lc-site img.fav { display: block; flex: 0 0 auto; width: 14px; height: 14px; margin: 0; border-radius: 3px; object-fit: contain; }
+.garden-ui-preview .lc-sitename { color: var(--soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.garden-ui-preview .lc-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.garden-ui-preview .lc-arrow { flex: 0 0 auto; width: 10px; height: 10px; margin-left: auto; background: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5 1.5 8.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+.garden-ui-preview .lc-title { font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
+.garden-ui-preview .lc-desc { font-size: var(--fs-small); line-height: 1.55; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.garden-ui-preview .lc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
+/* Fixed aspect ratio, so a picture arriving late never moves the text. */
+.garden-ui-preview .markdown-body img.lc-thumb { display: block; flex: 0 0 auto; width: 168px; max-width: none; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; align-self: center; margin: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--well); }
+@media (max-width: 640px) {
+  .garden-ui-preview .link-card { flex-direction: column-reverse; gap: 12px; padding: 12px; }
+  .garden-ui-preview .prose a.link-card, .garden-ui-preview .markdown-body a.link-card { padding-right: 12px; }
+  .garden-ui-preview .markdown-body img.lc-thumb { width: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .garden-ui-preview .link-card { transition: none; }
+}
+.garden-ui-preview .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.garden-ui-preview .g-chart-t { margin: 0 0 12px; font-weight: 600; color: var(--ink); font-size: 15px; }
+.garden-ui-preview .g-bars { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr) max-content; gap: 8px 10px; align-items: center; }
+.garden-ui-preview .g-bars > .g-bar { display: contents; }
+.garden-ui-preview .g-bar-k { color: var(--muted); }
+.garden-ui-preview .g-bar-v { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
+@media (max-width: 640px) {
+  .garden-ui-preview .g-range { grid-template-columns: 84px minmax(0, 1fr) 54px; gap: 8px; }
+}
+
+/* ---- Compose files: a download card, a group of rows, a preview drawer ---- */
+.garden-ui-preview .gf { margin: 24px 0; border: 1px solid var(--rule); border-radius: 12px; background: transparent; font-family: var(--sans); }
+.garden-ui-preview .gf-title { padding: 14px 16px 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
+.garden-ui-preview .gf-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
+.garden-ui-preview .gf-row + .gf-row { border-top: 1px solid var(--rule); }
+.garden-ui-preview .gf-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--chip); color: var(--soft); }
+.garden-ui-preview .gf-i { flex: none; width: 18px; height: 18px; }
+.garden-ui-preview .gf-main { flex: 1; min-width: 0; }
+.garden-ui-preview .gf-name { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
+.garden-ui-preview .gf-desc { margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--soft); }
+.garden-ui-preview .gf-meta { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
+.garden-ui-preview .gf-act { display: flex; flex: none; gap: 6px; }
+.garden-ui-preview .gf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
+.garden-ui-preview .markdown-body a.gf-btn, .garden-ui-preview a.gf-btn { color: var(--soft); text-decoration: none; }
+.garden-ui-preview .gf-btn:hover, .garden-ui-preview .markdown-body a.gf-btn:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
+.garden-ui-preview .gf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.garden-ui-preview .gf-btn.icon { width: 34px; padding: 0; }
+.garden-ui-preview .gf-btn.pri, .garden-ui-preview .markdown-body a.gf-btn.pri { background: var(--ink); color: var(--paper); }
+.garden-ui-preview .gf-btn.pri:hover, .garden-ui-preview .markdown-body a.gf-btn.pri:hover { background: var(--ink-soft); color: var(--paper); }
+
+/* The drawer: right side on wide screens, the whole screen on phones. */
+.garden-ui-preview .gf-layer { position: fixed; inset: 0; z-index: 95; }
+.garden-ui-preview .gf-scrim { position: absolute; inset: 0; background: rgb(20 20 19 / 22%); animation: gf-fade .16s ease-out; }
+.garden-ui-preview html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
+.garden-ui-preview .gf-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(600px, 46vw); border-left: 1px solid var(--rule); background: var(--paper); box-shadow: -12px 0 32px rgb(0 0 0 / 8%); font-family: var(--sans); animation: gf-slide .2s ease-out; }
+.garden-ui-preview .gf-dh { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--rule); }
+.garden-ui-preview .gf-dh .gf-act { gap: 2px; }
+.garden-ui-preview .gf-db { flex: 1; min-height: 0; overflow: auto; padding: 28px 32px 40px; font-size: 15px; line-height: 1.75; overscroll-behavior: contain; }
+.garden-ui-preview .gf-db-frame { padding: 0; overflow: hidden; background: transparent; }
+.garden-ui-preview .gf-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
+.garden-ui-preview .gf-drawer[data-preview="pdf"] .gf-frame { background: var(--paper-deep); }
+/* Focus catchers around the iframe: reachable by Tab, never seen. */
+.garden-ui-preview .gf-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+/* A quiet reminder; Esc pressed inside an iframe cannot reach the page. Phones have no Esc. */
+.garden-ui-preview .gf-hint { flex: none; margin: 0; padding: 6px 20px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
+@media (hover: none) and (pointer: coarse) { .garden-ui-preview .gf-hint { display: none; } }
+.garden-ui-preview .gf-db .gf-doc { max-width: none; margin: 0; font-size: 15px; line-height: 1.75; }
+.garden-ui-preview .gf-db .gf-doc > :first-child { margin-top: 0; }
+@keyframes gf-fade { from { opacity: 0; } }
+@keyframes gf-slide { from { transform: translateX(24px); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .garden-ui-preview .gf-scrim, .garden-ui-preview .gf-drawer { animation: none; }
+  .garden-ui-preview .gf-btn { transition: none; }
+}
+
+@media (max-width: 600px) {
+  .garden-ui-preview .gf-row { flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px; }
+  .garden-ui-preview .gf-main { flex: 1 1 calc(100% - 50px); }
+  .garden-ui-preview .gf-act { width: 100%; padding-left: 48px; }
+  .garden-ui-preview .gf-btn { height: 44px; padding: 0 14px; }
+  .garden-ui-preview .gf-btn.icon { width: 44px; padding: 0; }
+  .garden-ui-preview .gf.group .gf-row { flex-wrap: nowrap; align-items: center; }
+  .garden-ui-preview .gf.group .gf-main { flex: 1 1 auto; }
+  .garden-ui-preview .gf.group .gf-act { width: auto; gap: 0; padding: 0; }
+  .garden-ui-preview .gf.group .gf-btn { width: 44px; padding: 0; }
+  .garden-ui-preview .gf.group .gf-lb { display: none; }
+  .garden-ui-preview .gf-drawer { width: 100%; border: 0; box-shadow: none; }
+  .garden-ui-preview .gf-dh { min-height: 56px; padding: 6px 6px 6px 16px; }
+  .garden-ui-preview .gf-dh .gf-act { width: auto; padding: 0; gap: 0; }
+  .garden-ui-preview .gf-db { padding: 20px 20px 40px; }
+  .garden-ui-preview .gf-db-frame { padding: 0; }
+}
+
+/* While the prerendered Markdown loads, or when it cannot. (Without scripts 预览 is a plain link to it.) */
+.garden-ui-preview .gf-state { display: grid; justify-items: start; gap: 12px; padding: 8px 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
+.garden-ui-preview .gf-state p { margin: 0; color: var(--soft); }
+.garden-ui-preview .gf-state-act { display: flex; flex-wrap: wrap; gap: 8px; }
+.garden-ui-preview .gf-state-act .gf-btn { border: 1px solid var(--rule); }
+/* A previewed Markdown file reads as a document: its own title, a smaller scale than the post. */
+.garden-ui-preview .gf-db .gf-doc h1 { margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--ink); }
+.garden-ui-preview .gf-db .gf-doc h2 { margin: 28px 0 10px; font-size: 19px; line-height: 1.4; }
+.garden-ui-preview .gf-db .gf-doc h3 { margin: 24px 0 8px; font-size: 17px; line-height: 1.4; }
+.garden-ui-preview .gf-db .gf-doc h4 { margin: 20px 0 6px; font-size: 15px; line-height: 1.5; }
+.garden-ui-preview .gf-db .gf-doc p, .garden-ui-preview .gf-db .gf-doc li { font-size: 15px; line-height: 1.75; }
+.garden-ui-preview .gf-db .gf-doc p { margin: 0 0 14px; }
+.garden-ui-preview .gf-db .gf-doc ul, .garden-ui-preview .gf-db .gf-doc ol { margin: 0 0 14px; }
+
+/* ===== Garden Handbook (/garden & /garden/[...slug]) ===== */
+
+.garden-ui-preview .garden-doc-page {
+  width: min(1380px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 44px 0 112px;
+  display: grid;
+  grid-template-columns: 224px minmax(0, var(--col)) 188px;
+  gap: 0 24px;
+  align-items: start;
+  justify-content: space-between;
+  font-family: var(--sans);
+}
+
+.garden-ui-preview .garden-doc-page > .toc {
+  margin-top: 8px;
+  position: sticky;
+  top: calc(var(--hdr) + 28px);
+  max-height: calc(100vh - var(--hdr) - 48px);
+  overflow-y: auto;
+  border-left: 0;
+  padding: 4px 0 24px;
+}
+
+/* Mobile chapter bar & backdrop (hidden on desktop) */
+.garden-ui-preview .gdoc-mobile-bar,
+.garden-ui-preview .gdoc-backdrop,
+.garden-ui-preview .gdoc-mobile-close,
+.garden-ui-preview .gdoc-nojs-trigger,
+.garden-ui-preview .gdoc-nojs-close {
+  display: none;
+}
+
+/* Left Handbook Sidebar */
+.garden-ui-preview .gdoc-sidebar {
+  position: sticky;
+  top: calc(var(--hdr) + 24px);
+  max-height: calc(100vh - var(--hdr) - 40px);
+  overflow-y: auto;
+  padding-right: 16px;
+  border-right: 1px solid var(--rule);
+  scrollbar-width: thin;
+}
+
+.garden-ui-preview .gdoc-sidebar-head {
+  padding-bottom: 14px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.garden-ui-preview .gdoc-overview-link {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  color: var(--ink);
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+}
+
+.garden-ui-preview .gdoc-overview-link:hover {
+  background: var(--tint);
+}
+
+.garden-ui-preview .gdoc-overview-link[aria-current="page"] {
+  background: var(--well);
+}
+
+.garden-ui-preview .gdoc-overview-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font: 600 15px/1.3 var(--serif);
+  color: var(--ink);
+}
+
+.garden-ui-preview .gdoc-overview-link small {
+  padding-left: 23px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--muted);
+}
+
+.garden-ui-preview .gdoc-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.garden-ui-preview .gdoc-nav-group-head {
+  margin: 0 0 6px;
+  padding: 0 10px;
+  font: 600 15px/1.45 var(--sans);
+  color: var(--ink);
+}
+
+.garden-ui-preview .gdoc-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.garden-ui-preview .gdoc-nav-list li {
+  margin: 0;
+  padding: 0;
+}
+
+.garden-ui-preview .gdoc-nav-list a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--soft);
+  text-decoration: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.garden-ui-preview .gdoc-nav-list a:hover {
+  background: var(--tint);
+  color: var(--ink);
+}
+
+.garden-ui-preview .gdoc-nav-list li.is-active a,
+.garden-ui-preview .gdoc-nav-list a[aria-current="page"] {
+  background: var(--well);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.garden-ui-preview .gdoc-comp-pill {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 5px;
+  border: 1px solid var(--rule-strong);
+  background: var(--card);
+  font: 500 12px/1.4 var(--mono);
+  color: var(--ink);
+}
+
+.garden-ui-preview .gdoc-nav-list li.is-active .gdoc-comp-pill {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--paper);
+}
+
+.garden-ui-preview .gdoc-comp-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Chapter Article Column */
+.garden-ui-preview .garden-doc-article {
+  min-width: 0;
+  max-width: var(--col);
+  width: 100%;
+}
+
+.garden-ui-preview .gdoc-article-head {
+  padding: 4px 0 28px;
+  margin-bottom: 32px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.garden-ui-preview .gdoc-eyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+.garden-ui-preview .gdoc-eyebrow-root {
+  color: var(--soft);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.garden-ui-preview .gdoc-eyebrow-root:hover {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.garden-ui-preview .gdoc-eyebrow-fence {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--well);
+  border: 1px solid var(--rule);
+  font: 500 12px/1.4 var(--mono);
+  color: var(--ink);
+}
+
+.garden-ui-preview .gdoc-article-head h1 {
+  margin: 0;
+  font: 700 clamp(28px, 3.4vw, 38px) / 1.24 var(--sans);
+  color: var(--ink);
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.garden-ui-preview .gdoc-article-head h1.h1-br {
+  white-space: normal;
+  max-width: none;
+}
+
+@media (min-width: 768px) {
+  .garden-ui-preview .gdoc-article-head h1.h1-br {
+    font-size: min(clamp(28px, 3.4vw, 38px), calc(min(100vw - 80px, 740px) / var(--l)));
+  }
+}
+
+.garden-ui-preview .gdoc-article-deck {
+  margin: 14px 0 0;
+  font-size: 18px;
+  line-height: 1.65;
+  color: var(--soft);
+}
+
+.garden-ui-preview .garden-doc-article .markdown-body h2:first-child {
+  margin-top: 8px;
+}
+
+/* Prev / Next Pager */
+.garden-ui-preview .gdoc-pager {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 64px;
+  padding-top: 28px;
+  border-top: 1px solid var(--rule);
+}
+
+.garden-ui-preview .gdoc-pager-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+  background: transparent;
+  text-decoration: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.garden-ui-preview .gdoc-pager-card:hover {
+  border-color: var(--rule-strong);
+  background: var(--card-hover);
+}
+
+.garden-ui-preview .gdoc-pager-card.is-next {
+  grid-column: 2;
+  text-align: right;
+  align-items: flex-end;
+}
+
+.garden-ui-preview .gdoc-pager-dir {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.garden-ui-preview .gdoc-pager-card strong {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--ink);
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 1260px) {
+  .garden-ui-preview .garden-doc-page {
+    grid-template-columns: 220px minmax(0, var(--col));
+    justify-content: center;
+    gap: 0 44px;
+  }
+
+  .garden-ui-preview .garden-doc-page > .toc {
+    display: none;
+  }
+}
+
+@media (max-width: 1080px) {
+  .garden-ui-preview .garden-doc-page {
+    display: block;
+    width: min(var(--col), calc(100% - 40px));
+    padding: 20px 0 88px;
+  }
+
+  .garden-ui-preview .gdoc-mobile-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    margin-bottom: 24px;
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+    background: var(--card);
+  }
+
+  .garden-ui-preview .gdoc-mobile-trigger,
+  .garden-ui-preview .gdoc-nojs-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 34px;
+    padding: 0 12px;
+    border: 1px solid var(--rule-strong);
+    border-radius: 8px;
+    background: var(--well);
+    font: 600 13px/1 var(--sans);
+    color: var(--ink);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .garden-ui-preview .gdoc-nojs-trigger {
+    display: none;
+    text-decoration: none;
+  }
+
+  .garden-ui-preview .gdoc-mobile-crumb {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 13px;
+    color: var(--muted);
+  }
+
+  .garden-ui-preview .gdoc-mobile-crumb > span,
+  .garden-ui-preview .gdoc-mobile-crumb > svg {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .garden-ui-preview .gdoc-mobile-crumb strong {
+    min-width: 0;
+    color: var(--ink);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .garden-ui-preview .gdoc-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 82;
+    border: 0;
+    padding: 0;
+    background: rgb(20 20 19 / 34%);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
+  }
+
+  .garden-ui-preview .gdoc-backdrop[data-open="true"] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 0.18s ease, visibility 0s;
+  }
+
+  .garden-ui-preview .gdoc-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 84;
+    width: min(320px, 86vw);
+    max-height: none;
+    padding: 20px 18px 36px;
+    border-right: 1px solid var(--rule);
+    background: var(--paper);
+    box-shadow: 12px 0 36px rgb(0 0 0 / 14%);
+    transform: translateX(-104%);
+    visibility: hidden;
+    pointer-events: none;
+    transition: transform 0.2s ease, visibility 0s linear 0.2s;
+  }
+
+  .garden-ui-preview .gdoc-sidebar[data-open="true"] {
+    transform: translateX(0);
+    visibility: visible;
+    pointer-events: auto;
+    transition: transform 0.2s ease, visibility 0s;
+  }
+
+  .garden-ui-preview .gdoc-sidebar-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .garden-ui-preview .gdoc-mobile-close {
+    display: inline-grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--rule);
+    border-radius: 50%;
+    background: var(--well);
+    color: var(--ink);
+  }
+}
+
+@media (max-width: 1080px) and (scripting: none) {
+  .garden-ui-preview .gdoc-mobile-trigger,
+  .garden-ui-preview .gdoc-mobile-close {
+    display: none;
+  }
+
+  .garden-ui-preview .gdoc-nojs-trigger {
+    display: inline-flex;
+  }
+
+  .garden-ui-preview .gdoc-nojs-close {
+    display: inline-grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--rule);
+    border-radius: 50%;
+    background: var(--well);
+    color: var(--ink);
+    text-decoration: none;
+  }
+
+  .garden-ui-preview .gdoc-sidebar:target {
+    transform: translateX(0);
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+@media (max-width: 900px) {
+  .garden-ui-preview .garden-doc-page > .toc {
+    display: flex;
+  }
+}
+
+@media (max-width: 720px) {
+  .garden-ui-preview .gdoc-pager {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .garden-ui-preview .gdoc-pager-card.is-next {
+    grid-column: 1;
+    text-align: left;
+    align-items: flex-start;
+  }
+}
+
+
+/* English handbook pages: same 740px column, tighter leading than Chinese. */
+.garden-ui-preview .garden-doc-page:lang(en) .markdown-body,
+.garden-ui-preview .garden-doc-page:lang(en) .gdoc-article-deck {
+  line-height: 1.6;
+}
+
+/* Article pager: no rule above (the Webmention block ends the section); the comments keep theirs. */
+.garden-ui-preview .gdoc-pager.article-pager {
+  border-top: 0;
+  padding-top: 0;
+}
+
+/* 随想 feed: the 下一页 link doubles as the loading trigger. */
+.garden-ui-preview .feed-more {
+  display: flex;
+  justify-content: center;
+  margin: 32px 0 8px;
+}
+
+.garden-ui-preview .feed-more a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid var(--rule);
+  border-radius: 999px;
+  color: var(--soft);
+  font: 400 14px/1 var(--sans);
+  text-decoration: none;
+}
+
+.garden-ui-preview .feed-more a:hover {
+  border-color: var(--rule-strong);
+  color: var(--ink);
+}
+
+.garden-ui-preview .feed-end {
+  color: var(--muted);
+  font: 400 13px/1 var(--sans);
+}
+
+.garden-ui-preview .feed-prev {
+  display: flex;
+  justify-content: space-between;
+  margin: 24px 0 0;
+  color: var(--muted);
+  font: 400 13px/1.4 var(--sans);
+}
+
+/* ----- Intelligent UI patterns: cycle, list, choice, verdicts, card rows, source chips ----- */
+
+.garden-ui-preview .g-ic { flex: none; color: var(--soft); }
+
+/* Source chip: a small pill with the site's icon (or its first letter) and host. */
+.garden-ui-preview .g-srcs { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; white-space: nowrap; }
+.garden-ui-preview .markdown-body a.ext.g-src,
+.garden-ui-preview .markdown-body a.ext.g-src-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px 1px 5px;
+  border-radius: 999px;
+  background: var(--well);
+  color: var(--soft);
+  font: 400 12px / 1.7 var(--sans);
+  text-decoration: none;
+  white-space: nowrap;
+  max-width: 14em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.garden-ui-preview .markdown-body a.ext.g-src,
+.garden-ui-preview .markdown-body a.ext.g-src-chip { background-image: none; padding-right: 8px; vertical-align: 1px; }
+.garden-ui-preview .markdown-body a.ext.g-src-chip img.fav { margin: 0; vertical-align: 0; }
+.garden-ui-preview .markdown-body a.ext.g-src:hover,
+.garden-ui-preview .markdown-body a.ext.g-src-chip:hover { background: var(--rule); color: var(--ink); text-decoration: none; }
+.garden-ui-preview .g-src-ic {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--paper);
+  color: var(--ink);
+  font: 600 9px / 1 var(--sans);
+  text-transform: uppercase;
+}
+.garden-ui-preview .g-src-fav { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
+.garden-ui-preview .g-src-more { font: 400 12px / 1.7 var(--sans); color: var(--muted); }
+
+/* relations: key elements on a circle; narrow screens list each node's links as text */
+.garden-ui-preview .g-rel {
+  margin: 28px 0;
+  padding: 28px 24px 16px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-lg);
+  container-type: inline-size;
+}
+.garden-ui-preview .markdown-body .g-rel-h { margin: 0 0 16px; font: 600 var(--fs-small) / 1.5 var(--sans); color: var(--ink); }
+.garden-ui-preview .g-rel-ring { position: relative; height: 440px; }
+.garden-ui-preview .g-rel-ring[data-n="3"] { height: 360px; }
+.garden-ui-preview .g-rel-ring[data-n="4"] { height: 420px; }
+.garden-ui-preview .g-rel-ring[data-n="6"] { height: 480px; }
+.garden-ui-preview .g-rel-node {
+  position: absolute;
+  left: var(--x);
+  top: var(--y);
+  width: var(--w);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  box-sizing: border-box;
+  padding: 12px 14px;
+  border: 1.5px solid var(--rule-strong);
+  border-radius: 16px;
+  background: var(--card-hover);
+  text-align: center;
+}
+.garden-ui-preview .markdown-body .g-rel-t { margin: 0; font: 700 var(--fs-lead) / 1.35 var(--sans); color: var(--ink); }
+.garden-ui-preview .markdown-body .g-rel-x { margin: 4px 0 0; font: 400 15px / 1.5 var(--sans); color: var(--soft); }
+/* On the circle the arrows say it; the text lines stay for screen readers. */
+.garden-ui-preview .markdown-body .g-rel-out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
+.garden-ui-preview .g-rel-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
+.garden-ui-preview .g-rel-svg path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
+.garden-ui-preview .g-rel-svg path.dash { stroke-dasharray: 5 6; stroke-width: 1.75; }
+.garden-ui-preview .g-rel-svg marker path { fill: var(--muted); stroke: none; }
+/* A label sits on its line with a page-coloured pad that hides the line under it. */
+.garden-ui-preview .g-rel-label {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--paper);
+  color: var(--soft);
+  font: 500 12.5px / 1.4 var(--sans);
+  white-space: nowrap;
+  pointer-events: none;
+}
+.garden-ui-preview .g-rel figcaption { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }
+/* Same graph at every width. Below 560px the nodes take a larger share of the width,
+   show their title on at most two lines (>= 13px), and open the full text on tap. */
+.garden-ui-preview .g-rel-node { font: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
+.garden-ui-preview .g-rel-node > span { display: block; }
+/* Every width: titles stop at two lines, descriptions at three, both with an ellipsis; tap opens the full text. */
+.garden-ui-preview .g-rel-node { cursor: pointer; }
+.garden-ui-preview .g-rel-node:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.garden-ui-preview .g-rel-node[aria-expanded="true"] { border-color: var(--ink); }
+.garden-ui-preview .markdown-body .g-rel-t, .garden-ui-preview .markdown-body .g-rel-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; hyphens: manual; text-align: center; }
+.garden-ui-preview .markdown-body .g-rel-x { -webkit-line-clamp: 3; }
+.garden-ui-preview .g-rel[data-compact] .g-rel-node { padding: 8px 8px; border-radius: 12px; }
+.garden-ui-preview .markdown-body .g-rel[data-compact] .g-rel-t {
+  font-size: 13.5px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: normal;
+}
+/* The middle node of a narrow hub shows its title only; tap for the description. */
+.garden-ui-preview .g-rel[data-compact] .g-rel-node[data-center] .g-rel-x { display: none; }
+.garden-ui-preview .g-rel[data-compact] .g-rel-node[data-center] { padding-left: 3px; padding-right: 3px; }
+.garden-ui-preview .markdown-body .g-rel[data-compact] .g-rel-node[data-center] .g-rel-t { font-size: 13px; }
+/* A wide hub has five or six nodes on one ring: titles at 16px keep two lines without crowding the spokes. */
+.garden-ui-preview .markdown-body .g-rel:not([data-compact]) .g-rel-ring[data-center] .g-rel-t { font-size: 16px; }
+.garden-ui-preview .markdown-body .g-rel[data-compact] .g-rel-x { margin-top: 2px; font-size: 13px; line-height: 1.35; -webkit-line-clamp: 2; }
+.garden-ui-preview .g-rel-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--rule-strong);
+  color: var(--ink);
+  font: 600 13px / 1 var(--sans);
+}
+.garden-ui-preview .g-rel-legend { list-style: none; margin: 12px 4px 0; padding: 0; font: 400 13px / 1.6 var(--sans); color: var(--soft); }
+.garden-ui-preview .markdown-body .g-rel-legend { list-style: none; padding-left: 0; }
+.garden-ui-preview .markdown-body .g-rel-legend li { margin: 0; padding-left: 0; }
+.garden-ui-preview .g-rel-detail { margin: 12px 4px 0; padding: 10px 12px; border-radius: 12px; background: var(--well); font: 400 14px / 1.55 var(--sans); color: var(--text); }
+.garden-ui-preview .g-rel-detail-t { display: block; font-weight: 700; color: var(--ink); }
+.garden-ui-preview .g-rel-detail-x { display: block; color: var(--soft); }
+@media (max-width: 600px) {
+  .garden-ui-preview .g-rel { padding: 16px 12px 10px; }
+}
+
+/* list: compact icon rows, or titled icon steps */
+.garden-ui-preview .g-list { margin: 24px 0; }
+.garden-ui-preview .g-list ul { list-style: none; margin: 0; padding: 0; }
+.garden-ui-preview .markdown-body .g-list-h { margin: 0 0 10px; font: 600 var(--fs-small) / 1.5 var(--sans); color: var(--ink); }
+.garden-ui-preview .g-list-rows ul { padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--r); }
+.garden-ui-preview .markdown-body .g-list li { margin: 0; }
+.garden-ui-preview .g-list-rows li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
+.garden-ui-preview .g-list-rows .g-list-ic { display: flex; height: 1.7em; align-items: center; }
+.garden-ui-preview .markdown-body .g-list-rows .g-list-x { margin: 0; line-height: 1.7; }
+.garden-ui-preview .g-list-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
+.garden-ui-preview .g-list-steps li:first-child { border-top: 0; padding-top: 6px; }
+.garden-ui-preview .g-list-steps .g-list-ic { padding-top: 3px; }
+.garden-ui-preview .markdown-body .g-list-t { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
+.garden-ui-preview .markdown-body .g-list-steps .g-list-x { margin: 0 0 4px; color: var(--text); }
+.garden-ui-preview .g-list figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
+
+/* choice */
+.garden-ui-preview .g-choice { margin: 28px 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); }
+.garden-ui-preview .markdown-body .g-choice-h { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
+.garden-ui-preview .g-choice-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+.garden-ui-preview .g-choice-opt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 16px 18px;
+  border: 1px solid var(--rule);
+  border-radius: 16px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  transition: background .15s ease, border-color .15s ease;
+}
+.garden-ui-preview .g-choice-opt:hover { background: var(--card-hover); }
+.garden-ui-preview .g-choice-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.garden-ui-preview .g-choice-opt[aria-checked="true"] { border-color: var(--ink); background: var(--well); }
+.garden-ui-preview .g-choice-ic .g-ic { color: var(--ink); }
+.garden-ui-preview .g-choice-v { font: 700 22px / 1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
+.garden-ui-preview .g-choice-x { font-size: 14px; line-height: 1.6; color: var(--muted); }
+.garden-ui-preview .g-choice-l { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
+.garden-ui-preview .g-choice-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; }
+.garden-ui-preview .g-choice-opt[aria-checked="true"] .g-choice-dot { border: 5px solid var(--ink); }
+.garden-ui-preview .markdown-body .g-choice-reply { margin: 14px 4px 0; font-size: 15px; color: var(--text); }
+.garden-ui-preview .g-choice figcaption { margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
+@media (max-width: 600px) {
+  .garden-ui-preview .g-choice { padding: 12px; }
+  .garden-ui-preview .g-choice-opts { grid-template-columns: 1fr; }
+  .garden-ui-preview .g-choice-opt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic v" "ic x" "ic l"; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
+  .garden-ui-preview .g-choice-ic { grid-area: ic; align-self: center; }
+  .garden-ui-preview .g-choice-v { grid-area: v; font-size: 20px; }
+  .garden-ui-preview .g-choice-x { grid-area: x; }
+  .garden-ui-preview .g-choice-l { grid-area: l; }
+}
+
+/* compare with verdicts: stacked bad / good blocks */
+.garden-ui-preview .g-verdicts { margin: 20px 0; }
+.garden-ui-preview .g-verdict { padding: 14px 0; border-top: 1px solid var(--rule); }
+.garden-ui-preview .g-verdict:first-child { border-top: 0; padding-top: 4px; }
+.garden-ui-preview .markdown-body .g-verdict h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 var(--fs-body) / 1.5 var(--sans); color: var(--ink); }
+.garden-ui-preview .markdown-body .g-verdict p { margin: 0 0 0 30px; color: var(--text); }
+.garden-ui-preview .g-verdict-ic.bad { color: #b4473a; }
+.garden-ui-preview .g-verdict-ic.good { color: #2d6a3e; }
+.garden-ui-preview html[data-theme="dark"] .g-verdict-ic.bad { color: #e48a7c; }
+.garden-ui-preview html[data-theme="dark"] .g-verdict-ic.good { color: #7fbf8e; }
+
+/* card rows: thumbnail left, text right, dividers between */
+.garden-ui-preview .g-entities { margin: 24px 0; }
+.garden-ui-preview .g-entity-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule); }
+.garden-ui-preview .g-entity-row:first-child { border-top: 0; padding-top: 4px; }
+.garden-ui-preview .g-entity-row:not(:has(.g-entity-img)) { grid-template-columns: minmax(0, 1fr); }
+.garden-ui-preview .g-entity-row .g-entity-img img { display: block; width: 132px; height: 132px; object-fit: cover; border-radius: 14px; border: 1px solid var(--rule); margin: 0; }
+.garden-ui-preview .markdown-body .g-entity-row .g-entity-t { margin: 0 0 6px; font: 600 var(--fs-body) / 1.5 var(--sans); }
+.garden-ui-preview .markdown-body .g-entity-row p { margin: 0 0 6px; }
+.garden-ui-preview .markdown-body .g-entity-k { color: var(--text); }
+@media (max-width: 600px) {
+  .garden-ui-preview .g-entity-row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
+  .garden-ui-preview .g-entity-row .g-entity-img img { width: 76px; height: 76px; border-radius: 10px; }
+}
+
+/* review fixes: chip gap, truncated hosts, the "none of these" choice */
+.garden-ui-preview .markdown-body a.ext.g-src-chip > span,
+.garden-ui-preview .markdown-body a.ext.g-src > span { overflow: hidden; text-overflow: ellipsis; }
+/* A single source shows its whole domain; a tag with "+N" cuts only hosts past ~14 characters. */
+.garden-ui-preview .markdown-body .g-srcs.is-multi a.ext.g-src > span { max-width: 14ch; }
+.garden-ui-preview .markdown-body .g-srcs:not(.is-multi) a.ext.g-src { max-width: none; }
+.garden-ui-preview .markdown-body a.ext.g-src-chip,
+.garden-ui-preview .markdown-body a.ext.g-src { gap: 6px; }
+.garden-ui-preview .g-choice-group { display: grid; gap: 0; }
+.garden-ui-preview .g-choice-none {
+  justify-self: center;
+  margin: 12px 0 0;
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--muted);
+  font: 500 14px / 1.6 var(--sans);
+  text-decoration: underline;
+  text-decoration-color: var(--rule);
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.garden-ui-preview .g-choice-none:hover { color: var(--ink); }
+.garden-ui-preview .g-choice-none:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.garden-ui-preview .g-choice-none[aria-checked="true"] { color: var(--ink); background: var(--well); text-decoration: none; }
+.garden-ui-preview .markdown-body img.g-src-fav { display: block; flex: none; width: 14px; height: 14px; max-width: none; margin: 0; border-radius: 3px; object-fit: contain; box-shadow: none; }
+
+/* Handbook field tables: Required never wraps; narrow screens show each row as a card. */
+/* Short values (必填, Optional) stay on one line; long conditions wrap instead of widening the column. */
+.garden-ui-preview .table-wrap .field-table th.ft-req,
+.garden-ui-preview .table-wrap .field-table td.ft-req { white-space: normal; min-width: 4em; max-width: 9em; width: 9em; }
+@media (max-width: 640px) {
+  .garden-ui-preview .table-wrap.field-wrap { border: 0; border-radius: 0; overflow: visible; }
+  .garden-ui-preview .field-wrap .field-table,
+  .garden-ui-preview .field-wrap .field-table tbody,
+  .garden-ui-preview .field-wrap .field-table tr,
+  .garden-ui-preview .field-wrap .field-table td { display: block; width: auto; }
+  .garden-ui-preview .field-wrap .field-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .garden-ui-preview .field-wrap .field-table tr { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r); background: var(--well); }
+  .garden-ui-preview .field-wrap .field-table td { padding: 4px 0; border: 0; white-space: normal; min-width: 0; }
+  .garden-ui-preview .field-wrap .field-table td:first-child { padding: 0 0 6px; font-weight: 600; color: var(--ink); }
+  .garden-ui-preview .field-wrap .field-table td:not(:first-child)::before {
+    content: attr(data-label);
+    display: block;
+    font: 600 12px / 1.5 var(--sans);
+    color: var(--muted);
+  }
+}
+
+/* ===== Component reference (/garden/reference/*): code beside the real block ===== */
+
+@media (min-width: 1280px) {
+  .garden-ui-preview .garden-doc-page.is-reference { grid-template-columns: 224px minmax(0, 980px) 188px; }
+  .garden-ui-preview .garden-doc-page.is-reference .article-column { max-width: 980px; width: 100%; }
+}
+.garden-ui-preview .garden-doc-page.is-reference .markdown-body > p:first-child { margin: 0 0 8px; }
+.garden-ui-preview .garden-doc-page.is-reference .markdown-body > p:first-child + h2 { margin-top: 0; padding-top: 0; }
+.garden-ui-preview .markdown-body .ref-pane[data-p="c"] pre[data-language]::before { display: none; }
+.garden-ui-preview .ref-demo {
+  --rd-s: #f0eee6; --rd-p: #faf9f5; --rd-i: #30302e; --rd-m: #6b6a65; --rd-r: #e3e0d5;
+  border: 1px solid var(--rd-r);
+  border-radius: 14px;
+  margin: 1.2em 0 1.6em;
+  overflow: hidden;
+  background: var(--rd-p);
+}
+.garden-ui-preview html[data-theme="dark"] .ref-demo { --rd-s: #262624; --rd-p: #1f1e1d; --rd-i: #eceae3; --rd-m: #a9a69c; --rd-r: #3a3936; }
+.garden-ui-preview .ref-tabs { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--rd-r); background: var(--rd-s); }
+.garden-ui-preview .ref-tabs button {
+  font: inherit; font-size: 14px; min-height: 38px; min-width: 72px; border: 0; border-radius: 9px;
+  padding: 0 16px; background: transparent; color: var(--rd-m); cursor: pointer;
+}
+.garden-ui-preview .ref-tabs button[aria-selected="true"] { background: var(--rd-p); color: var(--rd-i); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
+.garden-ui-preview .ref-pane { padding: 16px; min-width: 0; }
+.garden-ui-preview .ref-pane[data-off] { display: none; }
+.garden-ui-preview .ref-pane-h { display: none; }
+.garden-ui-preview .ref-pane > :last-child { margin-bottom: 0; }
+.garden-ui-preview .ref-pane[data-p="c"] .ux-cb { display: block; margin: 0; padding: 0; min-height: 0; }
+.garden-ui-preview .ref-pane[data-p="c"] pre {
+  margin: 0; max-height: 560px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.garden-ui-preview .ref-pane[data-p="c"] pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
+@media (min-width: 1024px) {
+  .garden-ui-preview .ref-demo {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+    background: linear-gradient(90deg, var(--rd-s) calc(50% - 0.5px), var(--rd-r) calc(50% - 0.5px) calc(50% + 0.5px), var(--rd-p) calc(50% + 0.5px));
+  }
+  .garden-ui-preview .ref-tabs { display: none; }
+  /* Flex columns: no margin collapsing, so both panes start their content on the same line. */
+  .garden-ui-preview .ref-demo .ref-pane, .garden-ui-preview .ref-demo .ref-pane[data-off] { display: flex; flex-direction: column; }
+  .garden-ui-preview .ref-demo .ref-pane > * { margin-top: 0 !important; }
+  /* interactive: its own top spacing (g-play margin and padding, the figure's
+     margin) would push the preview 67px below the code. Reference only. */
+  .garden-ui-preview .ref-demo .ref-pane[data-p="v"] .ux-fs > .g-play { margin-top: 0; padding-top: 0; }
+  .garden-ui-preview .ref-demo .ref-pane[data-p="v"] .g-play > .garden-ui:first-child { margin-top: 0; }
+  .garden-ui-preview .ref-pane[data-p="c"] { grid-column: 1; grid-row: 1; }
+  .garden-ui-preview .ref-pane[data-p="v"] { grid-column: 2; grid-row: 1; }
+  .garden-ui-preview .ref-pane-h { display: block; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: var(--rd-m); margin: 0 0 10px !important; }
+  /* Code starts on the same line as the preview: no pre padding or frame on top. */
+  .garden-ui-preview .ref-pane[data-p="c"] pre { padding: 0 4px 4px 0; background: transparent; border: 0; }
+  .garden-ui-preview .ref-pane[data-p="c"] .ux-cb > :not(pre) { display: none; }
+}
+@media (max-width: 1023px) {
+  .garden-ui-preview .ref-pane[data-p="c"] pre { padding-right: 56px; }
+  .garden-ui-preview .ref-demo-in .toc-mobile-trigger { opacity: 0; visibility: hidden; pointer-events: none; }
+}
+
+/* ===== v0.10.1 tip keep (after git checkout of a2.css from 9a80f7e5) ===== */
+
+/* List pages: PageIntro rides on .sh-head; keep eyebrow in the same vertical rhythm. */
+.garden-ui-preview .page-intro.sh-head {
+  padding: 72px 0 36px;
+  max-width: var(--list);
+  width: 100%;
+}
+
+.garden-ui-preview .page-intro.sh-head .eyebrow {
+  margin: 0 0 14px;
+  color: var(--muted);
+  font: 600 11px / 1.4 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.garden-ui-preview .page-intro.sh-head h1 {
+  margin: 0;
+  font: 700 var(--fs-display) / 1.2 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.garden-ui-preview .page-intro.sh-head .sh-deck {
+  margin: 14px 0 0;
+}
+
+.garden-ui-preview .page-intro.sh-head .page-intro-actions {
+  margin-top: 22px;
+}
+
+.garden-ui-preview .thoughts-page,
+.garden-ui-preview .about-page {
+  width: auto;
+  max-width: none;
+}
+
+.garden-ui-preview .about-page {
+  padding-bottom: 120px;
+}
+
+/* Keep PageIntro at --list; focus card sticks to the right edge. */
+.garden-ui-preview .about-page .about-grid {
+  width: 100%;
+  max-width: none;
+  display: grid;
+  grid-template-columns: minmax(0, var(--list)) minmax(12rem, 17rem);
+  column-gap: 48px;
+  row-gap: 36px;
+  justify-content: space-between;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .garden-ui-preview .about-page .about-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* SeriesEdgeNav: fixed to viewport left on column posts that share PostReadingView.
+   post-reading-page already lays out article + TOC; ticks are position:fixed so
+   they do not need a grid track. */
+.garden-ui-preview .post-reading-page > .series-edge {
+  --edge-window-inset: 12px;
+  position: fixed;
+  top: calc(var(--hdr) + 12px);
+  bottom: 16px;
+  left: max(var(--edge-window-inset), env(safe-area-inset-left, 0px));
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  transform: none;
+  margin: 0;
+  padding: 0;
+}
+
+.garden-ui-preview .series-edge-ticks {
+  pointer-events: auto;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 6px;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  border-radius: 0;
+}
+
+.garden-ui-preview .series-edge-ticks i {
+  display: block;
+  width: 11px;
+  height: 1.5px;
+  border-radius: 1px;
+  background: color-mix(in srgb, var(--ink) 32%, transparent);
+  transition: background 0.15s ease, width 0.15s ease;
+}
+
+.garden-ui-preview .series-edge-ticks i.hot {
+  width: 15px;
+  background: color-mix(in srgb, var(--ink) 70%, transparent);
+}
+
+.garden-ui-preview .series-edge[data-open="true"] .series-edge-ticks i,
+.garden-ui-preview .series-edge:focus-within .series-edge-ticks i {
+  background: color-mix(in srgb, var(--ink) 52%, transparent);
+}
+
+.garden-ui-preview .series-edge[data-open="true"] .series-edge-ticks i.hot,
+.garden-ui-preview .series-edge:focus-within .series-edge-ticks i.hot {
+  background: var(--ink);
+}
+
+.garden-ui-preview .series-edge-bridge {
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 100%;
+  width: 28px;
+}
+
+.garden-ui-preview .series-edge-fly {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 4px);
+  transform: translate(0, -50%);
+  width: 16rem;
+  max-height: min(72vh, calc(100vh - var(--hdr) - 40px));
+  margin: 0;
+  padding: 0.7rem 0.85rem 0.75rem;
+  border: 0;
+  border-radius: 10px;
+  background: var(--paper);
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
+    0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent);
+  opacity: 0;
+  visibility: hidden;
+  overflow: auto;
+  transition: opacity 0.16s ease, visibility 0.16s ease;
+}
+
+.garden-ui-preview .series-edge[data-open="true"],
+.garden-ui-preview .series-edge:focus-within {
+  z-index: 28;
+}
+
+.garden-ui-preview .series-edge[data-open="true"] .series-edge-fly,
+.garden-ui-preview .series-edge:focus-within .series-edge-fly {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+
+.garden-ui-preview .series-edge-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.garden-ui-preview .series-edge-list a {
+  display: block;
+  padding: 0.4rem 0.35rem;
+  margin: 0 -0.35rem;
+  border-radius: 7px;
+  color: var(--soft);
+  font-size: 13px;
+  line-height: 1.35;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.garden-ui-preview .series-edge-list a:hover {
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+  color: var(--ink);
+}
+
+.garden-ui-preview .series-edge-list li.cur a {
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+@media (max-width: 900px) {
+  /* The desktop rule is `.post-reading-page > .series-edge { display: flex }`.
+     Match that specificity so the rail stays off small screens. */
+  .garden-ui-preview .post-reading-page > .series-edge {
+    display: none;
+  }
+}
+
+.garden-ui-preview {font:inherit}.garden-ui-preview .markdown-body {font:inherit}
 .garden-ui-typora { margin: 0.25em 0; text-align: left; white-space: normal; }
 .garden-suggest { display: flex; align-items: center; gap: 8px; }
 .garden-suggest-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; background: #f6f3ec; flex: none; }