hd-garden 0.3.0

package/app/globals.css

@@ -0,0 +1,4454 @@
+@import "tailwindcss";
+
+:root {
+  --paper: #f8f8f6;
+  --paper-deep: #eeeeeb;
+  --card: #ffffff;
+  --ink: #202124;
+  --ink-soft: #34383d;
+  --muted: #65707d;
+  --faint: #a1a6ad;
+  --line: #deded9;
+  --line-strong: #c9c9c2;
+  --accent: #d82d48;
+  --accent-soft: #f9e8eb;
+  --selection: #f3c9d1;
+  --font-mono: var(--font-geist-mono), "SFMono-Regular", Consolas,
+    "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
+  --content: 700px;
+  --wide: 1040px;
+}
+
+:root[data-theme="dark"] {
+  --paper: #171819;
+  --paper-deep: #202224;
+  --card: #1e2022;
+  --ink: #ededeb;
+  --ink-soft: #d8d8d4;
+  --muted: #a6adb6;
+  --faint: #747b84;
+  --line: #35383b;
+  --line-strong: #4b4f54;
+  --accent: #ff5d76;
+  --accent-soft: #3b242a;
+  --selection: #68333e;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: auto;
+  scroll-padding-top: 110px;
+}
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 15px;
+  line-height: 1.72;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body::selection,
+body *::selection {
+  background: var(--selection);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.skip-link {
+  position: fixed;
+  left: 16px;
+  top: -48px;
+  z-index: 100;
+  background: var(--ink);
+  color: var(--paper);
+  padding: 8px 12px;
+}
+
+.skip-link:focus {
+  top: 12px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.site-header {
+  position: relative;
+  z-index: 40;
+  border-bottom: 1px solid transparent;
+}
+
+.header-inner {
+  width: min(var(--wide), calc(100% - 48px));
+  min-height: 116px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 34px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 13px;
+  width: max-content;
+}
+
+.brand-mark {
+  width: 43px;
+  height: 50px;
+  display: grid;
+  place-items: center;
+  color: var(--faint);
+  border-right: 1px solid var(--line-strong);
+}
+
+.brand strong {
+  display: block;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+}
+
+.brand small {
+  display: block;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 10px;
+  letter-spacing: 0.07em;
+}
+
+.main-nav {
+  display: flex;
+  align-items: center;
+}
+
+.main-nav a {
+  position: relative;
+  padding: 7px 13px;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.main-nav a + a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 1px;
+  height: 16px;
+  background: var(--line-strong);
+}
+
+.main-nav a:hover,
+.main-nav a:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.icon-button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 4px;
+}
+
+.icon-button:hover,
+.icon-button:focus-visible {
+  background: var(--paper-deep);
+}
+
+.search-trigger {
+  width: auto;
+  display: flex;
+  padding: 0 8px;
+  gap: 7px;
+}
+
+.key-hint {
+  color: var(--muted);
+  font-size: 10px;
+  border: 1px solid var(--line-strong);
+  padding: 0 4px;
+  border-radius: 3px;
+}
+
+.page-shell {
+  width: min(var(--wide), calc(100% - 48px));
+  margin: 0 auto;
+}
+
+.home-page {
+  padding: 74px 0 96px;
+}
+
+.eyebrow {
+  margin: 0 0 22px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+
+.inline-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--ink);
+}
+
+.inline-cta:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.home-section {
+  margin-top: 72px;
+}
+
+.section-heading {
+  min-height: 40px;
+  margin-bottom: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.section-heading > div {
+  display: flex;
+  align-items: baseline;
+  gap: 13px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.2;
+  letter-spacing: -0.035em;
+}
+
+.section-heading > a {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.section-heading > a:hover {
+  color: var(--accent);
+}
+
+.accent-heading h2 {
+  color: var(--accent);
+}
+
+.accent-heading > svg {
+  color: var(--accent);
+}
+
+.post-list {
+  border-top: 1px solid var(--line);
+}
+
+.post-row {
+  min-height: 67px;
+  display: grid;
+  grid-template-columns: 112px 1fr 20px;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--line);
+  transition:
+    padding 160ms ease,
+    background 160ms ease;
+}
+
+.post-row:hover {
+  padding: 0 8px;
+  background: var(--card);
+}
+
+.post-row time {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.post-row span {
+  min-width: 0;
+}
+
+.post-row strong {
+  display: block;
+  font-size: 14px;
+  line-height: 1.4;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 4px;
+}
+
+.post-row:hover strong {
+  text-decoration-color: currentColor;
+}
+
+.post-row small {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-card {
+  min-height: 205px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 30px 34px;
+  background: var(--ink);
+  color: var(--paper);
+  border: 1px solid var(--ink);
+}
+
+.column-card:hover {
+  background: var(--card);
+  color: var(--ink);
+}
+
+.column-card span {
+  color: var(--faint);
+  font-size: 11px;
+}
+
+.column-card h3 {
+  margin: 14px 0 10px;
+  font-size: 26px;
+  letter-spacing: -0.04em;
+}
+
+.column-card p {
+  max-width: 470px;
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.column-card .column-number {
+  color: inherit;
+  font-size: 34px;
+  font-weight: 700;
+}
+
+.page-intro {
+  width: 100%;
+  padding: 74px 0 54px;
+}
+
+.page-intro h1 {
+  margin: 0 0 24px;
+  font-size: clamp(31px, 4.2vw, 48px);
+  line-height: 1.28;
+  letter-spacing: -0.05em;
+}
+
+.page-intro > p:not(.eyebrow) {
+  max-width: 650px;
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.9;
+}
+
+.page-intro-actions {
+  margin-top: 26px;
+}
+
+.garden-page {
+  position: relative;
+  padding-bottom: 120px;
+}
+
+.garden-page-toc {
+  position: fixed;
+  top: 150px;
+  right: max(18px, calc((100vw - var(--wide)) / 2 - 165px));
+  z-index: 20;
+  width: 145px;
+  max-height: calc(100vh - 190px);
+  overflow: hidden;
+}
+
+.garden-page-toc .toc {
+  position: static;
+  max-height: calc(100vh - 190px);
+  margin: 0;
+}
+
+.garden-page-toc .toc-header > p {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+
+.garden-page-toc .toc li {
+  margin: 10px 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.garden-page .page-intro {
+  padding-bottom: 64px;
+}
+
+.garden-lede {
+  max-width: 650px;
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 16px;
+  line-height: 1.85;
+}
+
+.garden-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 22px;
+  margin-top: 26px;
+}
+
+.garden-proof-list {
+  margin: 44px 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  list-style: none;
+}
+
+.garden-proof-list li {
+  min-height: 64px;
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  border-left: 1px solid var(--line);
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.garden-proof-list li:first-child {
+  border-left: 0;
+}
+
+.garden-proof-list strong {
+  color: var(--accent);
+  font-size: 10px;
+}
+
+.garden-primary-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--ink);
+  color: var(--paper);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.garden-primary-link:hover,
+.garden-primary-link:focus-visible {
+  background: var(--accent);
+}
+
+.garden-section-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
+  gap: 72px;
+  align-items: end;
+  margin-bottom: 38px;
+}
+
+.garden-section-heading .eyebrow {
+  margin-bottom: 14px;
+}
+
+.garden-section-heading h2 {
+  margin: 0;
+  font-size: clamp(28px, 3.2vw, 39px);
+  line-height: 1.3;
+  letter-spacing: -0.055em;
+}
+
+.garden-section-heading > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.garden-responsibilities {
+  padding: 48px 0 0;
+  border-top: 1px solid var(--line-strong);
+  scroll-margin-top: 24px;
+}
+
+.garden-responsibility-flow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px 24px;
+  background: var(--ink);
+  color: var(--paper);
+}
+
+.garden-responsibility-flow strong {
+  font-size: 14px;
+}
+
+.garden-responsibility-flow svg {
+  flex: none;
+  color: var(--accent);
+}
+
+.garden-responsibility-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.garden-responsibility-grid article {
+  min-height: 168px;
+  padding: 30px 24px;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  align-content: start;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.garden-responsibility-grid article:first-child {
+  border-left: 0;
+}
+
+.garden-responsibility-grid article > span {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.garden-responsibility-grid h3 {
+  margin: 0 0 11px;
+  font-size: 20px;
+  letter-spacing: -0.035em;
+}
+
+.garden-responsibility-grid p {
+  grid-column: 2;
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.garden-admin {
+  margin-top: 104px;
+  padding-top: 48px;
+  border-top: 1px solid var(--line-strong);
+}
+
+.garden-admin-preview {
+  margin: 0 0 42px;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.garden-admin-preview img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-bottom: 1px solid var(--line);
+}
+
+.garden-admin-preview figcaption {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 32px;
+  padding: 18px 22px;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.75;
+}
+
+.garden-admin-preview figcaption strong {
+  color: var(--accent);
+}
+
+.garden-admin-capabilities {
+  display: grid;
+  grid-template-columns: 1fr;
+  border-top: 1px solid var(--line-strong);
+}
+
+.garden-admin-capabilities article {
+  min-height: 112px;
+  padding: 22px 0;
+  display: grid;
+  grid-template-columns: 48px minmax(190px, 0.6fr) minmax(0, 1.4fr);
+  gap: 18px;
+  align-items: start;
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.garden-admin-capabilities article > span,
+.garden-setup-grid article > span,
+.garden-admin-flow li > span {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.garden-admin-capabilities h3 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: -0.035em;
+}
+
+.garden-admin-capabilities p,
+.garden-setup-grid article > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.garden-media {
+  margin: 104px -48px 0;
+  padding: 64px 48px;
+  scroll-margin-top: 24px;
+  background: #202124;
+  color: #f8f8f6;
+}
+
+.garden-media > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
+  gap: 72px;
+  align-items: end;
+}
+
+.garden-media > header .eyebrow {
+  grid-column: 1;
+  margin-bottom: 13px;
+  color: #ff667d;
+}
+
+.garden-media > header h2 {
+  grid-column: 1;
+  margin: 0;
+  font-size: clamp(32px, 4vw, 48px);
+  line-height: 1.2;
+  letter-spacing: -0.06em;
+}
+
+.garden-media > header > p {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  margin: 0;
+  color: #b8bdc5;
+  font-size: 14px;
+  line-height: 1.85;
+}
+
+.garden-media code {
+  color: #fff;
+  font-family: inherit;
+}
+
+.garden-media-layout {
+  margin-top: 44px;
+  display: grid;
+  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
+  gap: 42px;
+  align-items: stretch;
+}
+
+.garden-media-providers {
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid #45484d;
+  list-style: none;
+}
+
+.garden-media-providers li {
+  min-height: 92px;
+  padding: 17px 0;
+  display: grid;
+  grid-template-columns: 30px 32px minmax(0, 1fr);
+  gap: 12px;
+  border-bottom: 1px solid #45484d;
+}
+
+.garden-media-providers li > span {
+  color: #ff667d;
+  font-size: 10px;
+}
+
+.garden-media-providers li > svg {
+  color: #f8f8f6;
+}
+
+.garden-media-providers strong {
+  display: block;
+  font-size: 14px;
+}
+
+.garden-media-providers p {
+  margin: 5px 0 0;
+  color: #aeb3bb;
+  font-size: 11px;
+  line-height: 1.65;
+}
+
+.garden-media-source {
+  min-width: 0;
+  border: 1px solid #4c5055;
+  background: #151617;
+}
+
+.garden-media-source > div {
+  min-height: 43px;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  border-bottom: 1px solid #3a3d41;
+  color: #aeb3bb;
+  font-size: 10px;
+}
+
+.garden-media-source pre {
+  min-height: 320px;
+  margin: 0;
+  padding: 28px;
+  overflow: auto;
+  color: #e7e7e4;
+  font-size: 12px;
+  line-height: 1.85;
+}
+
+.garden-media-boundary {
+  margin-top: 38px;
+  padding-top: 22px;
+  display: grid;
+  grid-template-columns: 210px minmax(0, 1fr);
+  gap: 30px;
+  border-top: 1px solid #45484d;
+}
+
+.garden-media-boundary strong {
+  color: #ff667d;
+  font-size: 12px;
+}
+
+.garden-media-boundary p {
+  margin: 0;
+  color: #aeb3bb;
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.garden-admin-boundary {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 32px;
+  align-items: center;
+  margin-top: 28px;
+  padding: 20px 23px;
+  border-left: 2px solid var(--accent);
+  background: var(--paper-deep);
+}
+
+.garden-admin-boundary strong {
+  color: var(--accent);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.garden-admin-boundary p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.garden-admin-boundary code,
+.garden-setup code {
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 0.94em;
+}
+
+.garden-admin-flow {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 42px 0 0;
+  padding: 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  list-style: none;
+}
+
+.garden-admin-flow li {
+  min-height: 168px;
+  padding: 24px 22px;
+  border-left: 1px solid var(--line);
+}
+
+.garden-admin-flow li:first-child {
+  border-left: 0;
+}
+
+.garden-admin-flow strong {
+  display: block;
+  margin-top: 24px;
+  font-size: 15px;
+}
+
+.garden-admin-flow p {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.72;
+}
+
+.garden-admin-enable {
+  display: grid;
+  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
+  gap: 54px;
+  align-items: center;
+  margin-top: 42px;
+  padding: 38px;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.garden-admin-enable .eyebrow {
+  margin-bottom: 12px;
+}
+
+.garden-admin-enable h3 {
+  margin: 0;
+  font-size: 22px;
+  letter-spacing: -0.045em;
+}
+
+.garden-admin-enable ol {
+  margin: 22px 0 0;
+  padding-left: 17px;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.garden-admin-enable li + li {
+  margin-top: 7px;
+}
+
+.garden-admin-enable li::marker {
+  color: var(--accent);
+}
+
+.garden-admin-enable pre,
+.garden-setup-grid pre {
+  margin: 0;
+  padding: 23px;
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink-soft);
+  font-size: 12px;
+  line-height: 1.85;
+}
+
+.garden-admin-enable pre code,
+.garden-setup-grid pre code {
+  font-family: inherit;
+}
+
+.garden-guide {
+  border-top: 1px solid var(--line-strong);
+}
+
+.garden-guide-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
+  gap: 72px;
+  align-items: end;
+  padding: 48px 0 42px;
+}
+
+.garden-guide-heading .eyebrow {
+  margin-bottom: 15px;
+}
+
+.garden-guide-heading h2 {
+  max-width: 640px;
+  margin: 0;
+  font-size: clamp(29px, 3.4vw, 42px);
+  line-height: 1.25;
+  letter-spacing: -0.055em;
+}
+
+.garden-guide-heading > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.garden-guide-index {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.garden-guide-index a {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  min-height: 78px;
+  padding: 16px 20px;
+  border-left: 1px solid var(--line);
+  color: var(--ink-soft);
+  transition: background 160ms ease, color 160ms ease;
+}
+
+.garden-guide-index a:first-child {
+  border-left: 0;
+}
+
+.garden-guide-index a:hover,
+.garden-guide-index a:focus-visible {
+  background: var(--paper-deep);
+  color: var(--ink);
+}
+
+.garden-guide-index span,
+.garden-guide-index small {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.garden-guide-index strong {
+  font-size: 15px;
+}
+
+.garden-guide-index small {
+  color: var(--muted);
+  font-weight: 400;
+}
+
+.garden-content-guide {
+  display: grid;
+  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
+  gap: 76px;
+  align-items: start;
+  padding: 96px 0;
+  border-bottom: 1px solid var(--line-strong);
+  scroll-margin-top: 24px;
+}
+
+.garden-content-guide:nth-child(even) {
+  grid-template-columns: minmax(0, 1.07fr) minmax(0, 0.93fr);
+}
+
+.garden-content-guide:nth-child(even) .garden-source-panel {
+  order: -1;
+}
+
+.garden-content-copy .eyebrow {
+  margin-bottom: 14px;
+}
+
+.garden-content-copy h2 {
+  margin: 0 0 18px;
+  font-size: clamp(28px, 3.1vw, 39px);
+  letter-spacing: -0.055em;
+}
+
+.garden-content-introduction {
+  margin: 0;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.85;
+}
+
+.garden-content-introduction code,
+.garden-content-steps code,
+.garden-setup code {
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 0.94em;
+}
+
+.garden-content-steps {
+  display: grid;
+  gap: 0;
+  margin: 31px 0 0;
+  padding: 0;
+  border-top: 1px solid var(--line);
+  list-style: none;
+}
+
+.garden-content-steps li {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 12px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1.72;
+}
+
+.garden-content-steps li > strong {
+  color: var(--accent);
+  font-size: 12px;
+}
+
+.garden-content-features {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px 22px;
+  margin: 27px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.garden-content-features li {
+  position: relative;
+  padding-left: 13px;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.garden-content-features li::before {
+  content: "";
+  position: absolute;
+  top: 0.65em;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  background: var(--accent);
+}
+
+.garden-content-result {
+  margin-top: 29px;
+  padding: 17px 18px;
+  border-left: 2px solid var(--accent);
+  background: var(--paper-deep);
+}
+
+.garden-content-result strong {
+  color: var(--accent);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+
+.garden-content-result p {
+  margin: 7px 0 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+.garden-source-panel {
+  min-width: 0;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.garden-source-bar {
+  display: flex;
+  align-items: center;
+  min-height: 42px;
+  padding: 0 15px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+}
+
+.garden-source-bar > span {
+  display: flex;
+  gap: 5px;
+  margin-right: 10px;
+}
+
+.garden-source-bar i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--line-strong);
+}
+
+.garden-source-bar code {
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.garden-source-panel pre {
+  min-height: 420px;
+  margin: 0;
+  padding: 28px;
+  overflow: auto;
+  color: var(--ink-soft);
+  font-size: 13px;
+  line-height: 1.78;
+  tab-size: 2;
+}
+
+.garden-source-panel pre code {
+  font-family: inherit;
+}
+
+.garden-system {
+  margin-top: 104px;
+}
+
+.garden-system > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
+  gap: 72px;
+  align-items: end;
+  margin-bottom: 37px;
+}
+
+.garden-system > header .eyebrow {
+  grid-column: 1;
+  margin-bottom: 13px;
+}
+
+.garden-system > header h2 {
+  grid-column: 1;
+  margin: 0;
+  font-size: clamp(28px, 3.2vw, 39px);
+  line-height: 1.3;
+  letter-spacing: -0.055em;
+}
+
+.garden-system > header > p:last-child {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: end;
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.garden-system-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  border-top: 1px solid var(--line-strong);
+}
+
+.garden-system-grid article {
+  min-height: 112px;
+  padding: 23px 0;
+  display: grid;
+  grid-template-columns: 62px minmax(210px, 0.7fr) minmax(0, 1.3fr);
+  gap: 20px;
+  align-items: start;
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.garden-system-grid article > span {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.garden-system-grid h3 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: -0.035em;
+}
+
+.garden-system-grid p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.garden-setup {
+  margin-top: 104px;
+  padding-top: 48px;
+  border-top: 1px solid var(--line-strong);
+  scroll-margin-top: 24px;
+}
+
+.garden-setup-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border-top: 1px solid var(--line-strong);
+  border-left: 1px solid var(--line-strong);
+}
+
+.garden-setup-grid article {
+  min-height: 265px;
+  padding: 28px 30px;
+  border-right: 1px solid var(--line-strong);
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.garden-setup-grid h3 {
+  margin: 24px 0 14px;
+  font-size: 21px;
+  letter-spacing: -0.035em;
+}
+
+.garden-setup-grid article > pre {
+  margin-bottom: 15px;
+  padding: 17px 19px;
+}
+
+.garden-setup-grid dl {
+  margin: 0;
+  border-top: 1px solid var(--line);
+}
+
+.garden-setup-grid dl > div {
+  display: grid;
+  grid-template-columns: minmax(125px, 0.8fr) minmax(0, 1.2fr);
+  gap: 18px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.garden-setup-grid dt {
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.garden-setup-grid dd {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.garden-setup-notes {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 38px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.garden-setup-notes > div {
+  min-height: 132px;
+  padding: 22px;
+  border-left: 1px solid var(--line);
+}
+
+.garden-setup-notes > div:first-child {
+  border-left: 0;
+}
+
+.garden-setup-notes strong {
+  color: var(--accent);
+  font-size: 12px;
+}
+
+.garden-setup-notes p {
+  margin: 12px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.72;
+}
+
+.garden-setup-finish {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  margin-top: 38px;
+  padding: 28px 30px;
+  background: var(--paper-deep);
+}
+
+.garden-setup-finish .eyebrow {
+  margin-bottom: 9px;
+}
+
+.garden-setup-finish h3 {
+  margin: 0;
+  font-size: 21px;
+  letter-spacing: -0.035em;
+}
+
+.garden-setup-finish .garden-primary-link {
+  flex: none;
+}
+
+.index-page {
+  padding-bottom: 110px;
+}
+
+.content-empty-state {
+  min-height: 280px;
+  padding: 42px;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) auto;
+  gap: 28px;
+  align-items: center;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.content-empty-mark {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--accent);
+}
+
+.content-empty-state .eyebrow {
+  margin-bottom: 11px;
+  font-size: 10px;
+}
+
+.content-empty-state h2 {
+  margin: 0;
+  font-size: clamp(23px, 3vw, 32px);
+  letter-spacing: -0.045em;
+}
+
+.content-empty-state div > p:last-child {
+  max-width: 590px;
+  margin: 13px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.8;
+}
+
+.content-empty-state > a {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--ink);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.content-empty-state > a:hover,
+.content-empty-state > a:focus-visible {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.topic-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 38px;
+}
+
+.topic-strip a {
+  padding: 6px 10px;
+  background: var(--paper-deep);
+  color: var(--muted);
+  font-size: 11px;
+  border: 1px solid transparent;
+}
+
+.topic-strip a:hover,
+.topic-strip a:focus-visible {
+  color: var(--ink);
+  border-color: var(--line-strong);
+}
+
+.topic-strip a.active {
+  background: var(--ink);
+  color: var(--paper);
+}
+
+.archive-list {
+  border-top: 1px solid var(--line-strong);
+}
+
+.archive-row {
+  min-height: 112px;
+  padding: 14px 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20px;
+  gap: 16px;
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+}
+
+.archive-row.with-cover {
+  grid-template-columns: 128px minmax(0, 1fr) 20px;
+}
+
+.archive-row:hover {
+  padding-left: 8px;
+  padding-right: 8px;
+  background: var(--card);
+}
+
+.archive-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 14px;
+}
+
+.archive-meta time {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.archive-row > svg {
+  align-self: center;
+}
+
+.archive-cover {
+  width: 128px;
+  height: 84px;
+  display: block;
+  object-fit: cover;
+  border: 1px solid var(--line);
+}
+
+.archive-topic {
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.pinned-badge {
+  margin-left: 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--muted);
+}
+
+.archive-row h2 {
+  margin: 7px 0 6px;
+  font-size: 18px;
+  letter-spacing: -0.035em;
+}
+
+.archive-row p {
+  margin: 0;
+  color: var(--muted);
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 1.6;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.archive-pagination {
+  margin-top: 28px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.archive-pagination > :last-child {
+  justify-self: end;
+}
+
+.archive-pagination a {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--ink);
+}
+
+.archive-pagination a:hover,
+.archive-pagination a:focus-visible {
+  color: var(--accent);
+}
+
+.thoughts-page {
+  padding-bottom: 110px;
+}
+
+.thought-stream {
+  display: grid;
+  gap: 24px;
+}
+
+.thought-card {
+  padding: 24px 26px 26px;
+  background: var(--card);
+  border: 1px solid var(--line);
+  scroll-margin-top: 120px;
+}
+
+.thought-card > header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.thought-kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.thought-card > h2 {
+  margin: 18px 0 3px;
+  font-size: 18px;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.thought-card .markdown-body {
+  font-size: 13px;
+  line-height: 1.75;
+}
+
+.thought-card .markdown-body p {
+  margin: 12px 0 20px;
+}
+
+.thought-permalink {
+  width: max-content;
+  margin-top: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 10px;
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.thought-permalink:hover,
+.thought-permalink:focus-visible {
+  color: var(--accent);
+}
+
+.thought-detail-page {
+  max-width: 760px;
+  padding-top: 58px;
+  padding-bottom: 120px;
+}
+
+.thought-detail-page > .thought-card {
+  margin-top: 30px;
+}
+
+.thought-image,
+.thought-video {
+  width: 100%;
+  max-height: 460px;
+  display: block;
+  object-fit: cover;
+  border: 0;
+}
+
+.thought-media-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.thought-gallery {
+  display: grid;
+  gap: 8px;
+}
+
+.thought-gallery-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.thought-gallery-3 {
+  grid-template-columns: 1.35fr 0.65fr;
+  grid-template-rows: repeat(2, minmax(0, 155px));
+}
+
+.thought-gallery-3 .thought-image {
+  height: 100%;
+}
+
+.thought-gallery-3 .thought-image:first-child {
+  grid-row: 1 / 3;
+}
+
+.audio-embed {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 12px;
+  align-items: center;
+  padding: 18px;
+  background: var(--paper-deep);
+  border-left: 3px solid var(--accent);
+}
+
+.audio-embed > svg {
+  color: var(--accent);
+}
+
+.audio-embed strong {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 11px;
+}
+
+.audio-embed audio {
+  width: 100%;
+  height: 36px;
+}
+
+.link-embed {
+  min-height: 132px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 22px;
+  background: var(--paper-deep);
+  border: 1px solid var(--line);
+}
+
+.link-embed:hover {
+  border-color: var(--accent);
+}
+
+.link-embed small {
+  color: var(--accent);
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.link-embed strong {
+  display: block;
+  margin: 7px 0;
+  font-size: 14px;
+}
+
+.link-embed p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.column-feature-list {
+  display: grid;
+  gap: 24px;
+}
+
+.column-feature {
+  min-height: 390px;
+  display: grid;
+  grid-template-columns: 1.4fr 0.6fr;
+  background: var(--card);
+  border: 1px solid var(--line-strong);
+}
+
+.column-feature:hover,
+.column-feature:focus-visible {
+  border-color: var(--accent);
+}
+
+.column-feature-copy {
+  padding: 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.column-feature-copy > span {
+  color: var(--accent);
+  font-size: 10px;
+}
+
+.column-feature-copy h2 {
+  margin: 18px 0 14px;
+  font-size: 34px;
+  letter-spacing: -0.05em;
+}
+
+.column-feature-copy p {
+  max-width: 550px;
+  margin: 0;
+  color: var(--muted);
+}
+
+.column-feature-copy > strong {
+  margin-top: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.column-feature-index {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--ink);
+  color: var(--paper);
+}
+
+.column-feature-index span,
+.column-feature-index small {
+  color: var(--faint);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+}
+
+.column-feature-index strong {
+  align-self: center;
+  font-size: 82px;
+  line-height: 1;
+}
+
+.reading-page {
+  width: min(1000px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 72px 0 120px;
+  display: grid;
+  grid-template-columns: minmax(0, 650px) 180px;
+  gap: 48px;
+  justify-content: center;
+}
+
+.article-column {
+  min-width: 0;
+}
+
+.post-reading-page {
+  --toc-width: 250px;
+  --reading-gap: 64px;
+  width: min(1380px, calc(100% - 128px));
+  display: block;
+  padding-top: 38px;
+}
+
+.post-reading-page .post-article {
+  min-width: 0;
+}
+
+.post-reading-page .article-hero {
+  margin: 0;
+}
+
+.article-hero img {
+  width: 100%;
+  aspect-ratio: 16 / 8.5;
+  display: block;
+  object-fit: cover;
+  border: 1px solid var(--line);
+}
+
+.post-reading-page .article-summary-row {
+  width: calc(100% - var(--toc-width) - var(--reading-gap));
+  padding: 64px 0 42px;
+  margin: 0 0 42px;
+}
+
+.article-reading-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--toc-width);
+  gap: var(--reading-gap);
+  align-items: start;
+}
+
+.article-reading-column {
+  min-width: 0;
+}
+
+.post-reading-page .article-reading-layout .toc {
+  margin-top: 0;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.back-link:hover {
+  color: var(--accent);
+}
+
+.article-header {
+  padding: 54px 0 42px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 42px;
+}
+
+.article-cover {
+  margin: 28px 0 34px;
+}
+
+.article-cover img {
+  width: 100%;
+  aspect-ratio: 16 / 8.5;
+  display: block;
+  object-fit: cover;
+  border: 1px solid var(--line);
+}
+
+.article-header h1 {
+  margin: 0;
+  font-size: clamp(32px, 4.2vw, 48px);
+  line-height: 1.28;
+  letter-spacing: -0.055em;
+}
+
+.article-deck {
+  margin: 24px 0;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 20px;
+  color: var(--faint);
+  font-size: 10px;
+}
+
+.toc {
+  position: sticky;
+  top: 38px;
+  align-self: start;
+  max-height: calc(100vh - 76px);
+  margin-top: 144px;
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--line);
+  overflow: hidden;
+}
+
+.toc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.toc-header > p {
+  margin: 0;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.toc-list {
+  min-height: 0;
+  margin: 0;
+  padding: 0 5px 0 0;
+  flex: 1 1 auto;
+  list-style: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line-strong) transparent;
+}
+
+.toc .toc-sublist {
+  margin: 0;
+  padding: 0 0 0 12px;
+  list-style: none;
+}
+
+.toc-item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.toc-item-row > a {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-wrap: anywhere;
+}
+
+.toc-section-toggle {
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+  padding: 0;
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--faint);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.toc-section-toggle:hover,
+.toc-section-toggle:focus-visible {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.toc-section-toggle:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  outline-offset: 1px;
+}
+
+.toc li {
+  margin: 11px 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.toc li.toc-depth-4,
+.toc li.toc-depth-5 {
+  font-size: 11px;
+}
+
+.toc a:hover {
+  color: var(--ink);
+}
+
+.toc li.active > .toc-item-row > a {
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.toc-mobile-trigger,
+.toc-mobile-backdrop,
+.toc-mobile-close {
+  display: none;
+}
+
+.markdown-body {
+  color: var(--ink-soft);
+  font-size: 15px;
+  line-height: 1.95;
+  overflow-wrap: anywhere;
+}
+
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5 {
+  color: var(--ink);
+  letter-spacing: -0.035em;
+  line-height: 1.45;
+  scroll-margin-top: 0;
+}
+
+.markdown-body h2 {
+  margin: 66px 0 22px;
+  padding-top: 6px;
+  font-size: 25px;
+}
+
+.markdown-body h2::before {
+  content: "#";
+  margin-right: 10px;
+  color: var(--accent);
+  font-weight: 400;
+}
+
+.markdown-body h3 {
+  margin: 42px 0 16px;
+  font-size: clamp(20px, 2.1vw, 22px);
+}
+
+.markdown-body h4 {
+  margin: 34px 0 14px;
+  font-size: clamp(19px, 1.9vw, 21px);
+}
+
+.markdown-body h5 {
+  margin: 28px 0 12px;
+  font-size: clamp(17px, 1.7vw, 19px);
+}
+
+.markdown-body p {
+  margin: 22px 0;
+}
+
+.markdown-body a {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-underline-offset: 4px;
+}
+
+.markdown-body a:hover {
+  color: var(--accent);
+}
+
+/* A per-line border stays continuous across inline code and descenders. */
+.markdown-body u {
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+  padding-bottom: 0.1em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.markdown-body strong {
+  color: var(--ink);
+}
+
+.markdown-body blockquote {
+  margin: 34px 0;
+  padding: 3px 0 3px 22px;
+  border-left: 3px solid var(--accent);
+  color: var(--muted);
+  font-size: 16px;
+}
+
+.markdown-body blockquote p {
+  margin: 8px 0;
+}
+
+.markdown-body .garden-callout-marker { display: none; }
+
+.markdown-body blockquote:has(.garden-callout-marker) {
+  --callout-tone: #347f89;
+  --callout-surface: #fbfefe;
+  margin: 32px 0;
+  padding: 17px 20px 18px;
+  border: 1.5px solid var(--callout-tone);
+  border-radius: 15px;
+  background: var(--callout-surface);
+  color: var(--ink);
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+.markdown-body blockquote:has(.garden-callout-marker--success) { --callout-tone: #24845d; --callout-surface: #fbfefc; }
+.markdown-body blockquote:has(.garden-callout-marker--warning) { --callout-tone: #ad6900; --callout-surface: #fffdf9; }
+.markdown-body blockquote:has(.garden-callout-marker--danger) { --callout-tone: #ba4051; --callout-surface: #fffafb; }
+.markdown-body blockquote:has(.garden-callout-marker) > p:has(.garden-callout-marker) { display: none; }
+.markdown-body blockquote:has(.garden-callout-marker) > p:has(.garden-callout-marker) + p { margin-top: 0; }
+.markdown-body blockquote:has(.garden-callout-marker) > p:last-child { margin-bottom: 0; }
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 25px;
+}
+
+.markdown-body li {
+  margin: 7px 0;
+}
+
+.markdown-body li::marker {
+  color: var(--accent);
+}
+
+.markdown-body table {
+  width: 100%;
+  margin: 34px 0;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.markdown-body th,
+.markdown-body td {
+  padding: 11px 13px;
+  border: 1px solid var(--line);
+  text-align: left;
+}
+
+.markdown-body th {
+  background: var(--paper-deep);
+  color: var(--ink);
+}
+
+.markdown-body pre {
+  position: relative;
+  margin: 32px 0;
+  padding: 34px 20px 20px;
+  overflow-x: auto;
+  background: #202225;
+  color: #e6e6e2;
+  border: 1px solid #303337;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+/* Code blocks stay dark in both site themes; select with a matching palette. */
+.markdown-body pre::selection,
+.markdown-body pre *::selection {
+  background: #46556b;
+  color: #ffffff;
+}
+
+.markdown-body pre[data-language]::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  color: #8b929c;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.markdown-body .external-embed {
+  margin: 36px 0;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.external-embed-frame {
+  aspect-ratio: 16 / 9;
+  background: #111;
+}
+
+.external-embed-frame iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0;
+}
+
+.markdown-body .external-embed figcaption {
+  min-height: 45px;
+  padding: 9px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.external-embed figcaption span,
+.external-embed figcaption a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.markdown-body .external-embed figcaption a {
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.markdown-body .external-embed-card {
+  min-height: 154px;
+  margin: 36px 0;
+  padding: 22px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 24px;
+  gap: 24px;
+  align-items: center;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.markdown-body .external-embed-card:has(> img) {
+  grid-template-columns: 170px minmax(0, 1fr) 24px;
+}
+
+.external-embed-card > img {
+  width: 170px;
+  height: 108px;
+  object-fit: cover;
+}
+
+.external-embed-copy {
+  min-width: 0;
+}
+
+.external-embed-copy small {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--accent);
+  font-size: 10px;
+  text-transform: none;
+}
+
+.external-embed-copy strong {
+  display: block;
+  margin-top: 10px;
+  font-size: 16px;
+}
+
+.external-embed-copy p {
+  margin: 8px 0 0;
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.65;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.external-embed-error {
+  margin: 32px 0;
+  padding: 18px;
+  border-left: 3px solid var(--accent);
+  background: var(--accent-soft);
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.markdown-body .garden-chart {
+  margin: 36px 0;
+  border: 1px solid var(--line-strong);
+  background: var(--card);
+}
+
+.garden-chart-frame {
+  width: 100%;
+  min-height: 160px;
+  background: var(--paper);
+}
+
+.garden-chart-frame iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0;
+  background: transparent;
+}
+
+.markdown-body .garden-doc {
+  overflow: hidden;
+}
+
+.garden-doc-launch {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+}
+
+.garden-doc-toggle {
+  appearance: none;
+  min-width: 0;
+  margin: 0;
+  padding: 14px 4px 14px 16px;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.garden-doc-toggle:hover {
+  background: var(--paper-deep);
+}
+
+.garden-doc-toggle:active {
+  transform: scale(0.995);
+}
+
+.garden-doc-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.garden-doc-thumb {
+  position: relative;
+  width: 44px;
+  height: 58px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 12px 7px 8px;
+  border: 1px solid var(--line-strong);
+  background: var(--paper);
+  box-shadow: 2px 2px 0 var(--line);
+}
+
+.garden-doc-thumb-bar {
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  width: 46%;
+  height: 3px;
+  background: var(--accent);
+}
+
+.garden-doc-thumb-html .garden-doc-thumb-bar {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  background: var(--paper-deep);
+  border-bottom: 1px solid var(--line);
+}
+
+.garden-doc-thumb-pdf::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  border-style: solid;
+  border-width: 0 11px 11px 0;
+  border-color: transparent var(--card) var(--line-strong) transparent;
+}
+
+.garden-doc-thumb-line {
+  display: block;
+  height: 2px;
+  background: var(--line-strong);
+}
+
+.garden-doc-thumb-line-short {
+  width: 64%;
+}
+
+.garden-doc-copy {
+  min-width: 0;
+}
+
+.garden-doc-copy small {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--accent);
+  font-size: 10px;
+}
+
+.garden-doc-copy strong {
+  display: block;
+  margin-top: 6px;
+  color: var(--ink);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.garden-doc-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ink);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.garden-doc-caret {
+  transition: transform 180ms ease-out;
+}
+
+.garden-doc[data-expanded="true"] .garden-doc-caret {
+  transform: rotate(180deg);
+}
+
+.garden-doc-open {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 4px;
+  padding: 0 16px 0 8px;
+  color: var(--ink);
+  font-size: 12px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.garden-doc-pane {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+
+.garden-doc[data-expanded="true"] .garden-doc-pane {
+  grid-template-rows: auto;
+}
+
+.garden-doc-pane-inner {
+  overflow: hidden;
+  border-top: 0 solid var(--line);
+}
+
+.garden-doc[data-expanded="false"] .garden-doc-pane-inner {
+  min-height: 0;
+}
+
+.garden-doc[data-expanded="true"] .garden-doc-pane-inner {
+  min-height: min-content;
+  border-top-width: 1px;
+}
+
+.garden-doc .garden-chart-frame {
+  min-height: 0;
+  height: 64vh;
+}
+
+.garden-doc-pdf .garden-chart-frame {
+  height: 72vh;
+}
+
+.markdown-body .garden-chart figcaption {
+  min-height: 45px;
+  padding: 9px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.garden-chart figcaption span,
+.garden-chart figcaption a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.markdown-body .garden-chart figcaption a {
+  color: var(--ink);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.markdown-body :not(pre) > code {
+  padding: 2px 5px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 0.9em;
+}
+
+/* Keep inline-code backgrounds above the continuous underline. */
+.markdown-body u code {
+  padding-block: 0;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+  margin: 34px auto;
+  display: block;
+}
+
+.markdown-body details {
+  margin: 34px 0;
+  padding: 16px 18px;
+  background: var(--paper-deep);
+  border: 1px solid var(--line);
+}
+
+.markdown-body summary {
+  cursor: pointer;
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.markdown-body .mermaid-block {
+  margin: 34px 0;
+  background: var(--card);
+  border: 1px solid var(--line);
+}
+
+.mermaid-toolbar {
+  min-height: 46px;
+  padding: 8px 12px 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.mermaid-view-switcher {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mermaid-view-switcher button {
+  padding: 4px 7px;
+  background: transparent;
+  color: var(--muted);
+  border: 1px solid transparent;
+  font-size: 9px;
+}
+
+.mermaid-view-switcher button:hover {
+  color: var(--ink);
+  border-color: var(--line-strong);
+}
+
+.mermaid-view-switcher button[aria-selected="true"] {
+  background: var(--ink);
+  color: var(--paper);
+  border-color: var(--ink);
+}
+
+.mermaid-canvas {
+  min-height: 210px;
+  padding: 22px;
+  display: grid;
+  place-items: center;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.markdown-body .mermaid-canvas svg {
+  width: 100% !important;
+  max-width: 100%;
+  max-height: 360px;
+  height: auto;
+}
+
+.mermaid-svg {
+  width: 100%;
+}
+
+.markdown-body .mermaid-code {
+  min-height: 210px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  white-space: pre;
+}
+
+.mermaid-loading,
+.mermaid-error {
+  color: var(--faint);
+  font-size: 10px;
+}
+
+.mermaid-error {
+  color: var(--accent);
+}
+
+.markdown-body hr {
+  margin: 54px 0;
+  border: 0;
+  border-top: 1px solid var(--line);
+}
+
+.markdown-body input[type="checkbox"] {
+  accent-color: var(--accent);
+}
+
+/* KaTeX glyphs can extend beyond their line boxes (sum limits, accents). */
+.markdown-body .katex-display {
+  margin: 34px 0;
+  padding: 0.75em 0.25em;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown-body .katex {
+  overflow-wrap: normal;
+}
+
+.markdown-body .footnotes {
+  margin-top: 64px;
+  padding-top: 22px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #ff7690;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section {
+  color: #b7d985;
+}
+
+.hljs-number,
+.hljs-type {
+  color: #e9b96e;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #8b929c;
+  font-style: italic;
+}
+
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-attribute,
+.hljs-selector-attr {
+  color: #7cc7d9;
+}
+
+.hljs-function,
+.hljs-title.function_,
+.hljs-property {
+  color: #a9c7ff;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-params {
+  color: #e6e6e2;
+}
+
+.hljs-meta,
+.hljs-symbol,
+.hljs-bullet {
+  color: #c7a0e8;
+}
+
+.hljs-operator,
+.hljs-punctuation {
+  color: #b7bdc5;
+}
+
+.hljs-comment {
+  color: #7f8790;
+}
+
+.article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 68px 0 24px;
+}
+
+.article-tags span {
+  padding: 4px 8px;
+  background: var(--paper-deep);
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.webmentions,
+.comments {
+  margin-top: 78px;
+  padding-top: 30px;
+  border-top: 1px solid var(--line-strong);
+}
+
+.webmention-title,
+.comments-heading {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.webmention-title > svg,
+.comments-heading > svg {
+  margin-top: 4px;
+  color: var(--accent);
+}
+
+.webmention-title h2,
+.comments-heading h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.webmention-title p,
+.comments-heading p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.integration-notice {
+  margin-top: 22px;
+  padding: 20px;
+  display: flex;
+  gap: 13px;
+  background: var(--paper-deep);
+  color: var(--muted);
+}
+
+.integration-notice svg {
+  flex: 0 0 auto;
+  color: var(--faint);
+}
+
+.integration-notice p {
+  margin: 0;
+  font-size: 11px;
+}
+
+.integration-status {
+  margin: 22px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.webmention-reactions {
+  margin-top: 24px;
+  display: grid;
+  gap: 12px;
+}
+
+.webmention-reactions > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.webmention-reactions > span svg {
+  color: var(--accent);
+}
+
+.webmention-facepile {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.webmention-facepile a,
+.webmention-facepile img,
+.webmention-facepile a > span {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.webmention-facepile a {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: var(--paper-deep);
+  border: 1px solid var(--line);
+}
+
+.webmention-facepile img {
+  display: block;
+  object-fit: cover;
+}
+
+.webmention-facepile a > span {
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.webmention-list {
+  margin-top: 26px;
+  border-top: 1px solid var(--line);
+}
+
+.webmention-list article {
+  padding: 18px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.webmention-list header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.webmention-list strong {
+  font-size: 12px;
+}
+
+.webmention-list time {
+  color: var(--faint);
+  font-size: 9px;
+}
+
+.webmention-list p {
+  margin: 9px 0;
+  color: var(--ink-soft);
+  font-size: 12px;
+}
+
+.webmention-list article > a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--muted);
+  font-size: 9px;
+}
+
+.giscus-container {
+  min-height: 180px;
+  margin-top: 24px;
+}
+
+.giscus-container iframe {
+  width: 100%;
+  color-scheme: light dark;
+}
+
+.comments .integration-notice {
+  margin-bottom: 0;
+}
+
+.column-reading-page {
+  --column-sidebar-width: 220px;
+  width: min(1280px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 58px 0 120px;
+  display: grid;
+  grid-template-columns: var(--column-sidebar-width) minmax(0, 700px) var(--column-sidebar-width);
+  gap: 54px;
+  justify-content: center;
+}
+
+.series-nav {
+  position: sticky;
+  top: 32px;
+  align-self: start;
+  padding-right: 18px;
+  border-right: 1px solid var(--line);
+}
+
+.series-nav > p {
+  margin: 35px 0 7px;
+  color: var(--accent);
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.series-nav h2 {
+  margin: 0 0 22px;
+  font-size: 18px;
+  letter-spacing: -0.04em;
+}
+
+.series-nav ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.series-nav li {
+  position: relative;
+  margin: 0;
+  border-top: 1px solid var(--line);
+}
+
+.series-nav li:last-child {
+  border-bottom: 1px solid var(--line);
+}
+
+.series-nav li a {
+  display: block;
+  padding: 12px 5px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+.series-nav li.active a {
+  padding-left: 11px;
+  color: var(--ink);
+  font-weight: 700;
+  border-left: 2px solid var(--accent);
+}
+
+.series-nav > small {
+  display: block;
+  margin-top: 18px;
+  color: var(--faint);
+  font-size: 9px;
+}
+
+.series-article .article-header {
+  padding-top: 40px;
+}
+
+.column-reading-page > .toc {
+  margin-top: 96px;
+}
+
+.next-entry {
+  margin-top: 78px;
+  padding: 22px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  background: var(--paper-deep);
+  border: 1px solid var(--line);
+}
+
+.next-entry span {
+  grid-column: 1;
+  color: var(--accent);
+  font-size: 9px;
+}
+
+.next-entry strong {
+  grid-column: 1;
+  margin-top: 5px;
+  font-size: 13px;
+}
+
+.next-entry svg {
+  grid-column: 2;
+  grid-row: 1 / 3;
+}
+
+.about-page {
+  padding-bottom: 120px;
+}
+
+.about-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 0.75fr;
+  gap: 64px;
+}
+
+.about-copy h2 {
+  margin: 0 0 24px;
+  font-size: 23px;
+}
+
+.about-copy p {
+  color: var(--ink-soft);
+  line-height: 1.95;
+}
+
+.about-copy blockquote {
+  margin: 34px 0 0;
+  padding-left: 18px;
+  border-left: 3px solid var(--accent);
+  color: var(--muted);
+}
+
+.about-facts {
+  padding: 24px;
+  background: var(--paper-deep);
+}
+
+.about-facts > span {
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.about-facts ul {
+  margin: 17px 0 28px;
+  padding-left: 18px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.about-facts li {
+  margin: 9px 0;
+}
+
+.about-facts li::marker {
+  color: var(--accent);
+}
+
+.about-facts a {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.github-profile {
+  margin-top: 84px;
+  border-top: 1px solid var(--line-strong);
+}
+
+.github-overview {
+  min-height: 184px;
+  padding: 32px 0;
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  gap: 28px;
+  align-items: center;
+}
+
+.github-overview > img {
+  width: 112px;
+  height: 112px;
+  object-fit: cover;
+  border: 1px solid var(--line-strong);
+}
+
+.github-identity .eyebrow {
+  margin-bottom: 7px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 10px;
+}
+
+.github-identity h2 {
+  margin: 0;
+  font-size: 29px;
+  letter-spacing: -0.045em;
+}
+
+.github-identity > p {
+  max-width: 620px;
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.github-location {
+  margin-top: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--faint);
+  font-size: 10px;
+}
+
+.github-overview > a {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--ink);
+  font-size: 11px;
+}
+
+.github-overview > a:hover,
+.github-overview > a:focus-visible {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.github-metrics {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--line-strong);
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.github-metrics > div {
+  min-height: 142px;
+  padding: 24px;
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  align-content: center;
+  border-left: 1px solid var(--line-strong);
+}
+
+.github-metrics > div:first-child {
+  border-left: 0;
+}
+
+.github-metrics svg {
+  grid-row: 1 / 3;
+  color: var(--accent);
+}
+
+.github-metrics dt {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.github-metrics dd {
+  margin: 5px 0 0;
+  font-size: 29px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.05em;
+}
+
+.github-pinned,
+.github-contributions,
+.github-activity {
+  padding: 58px 0;
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.github-pinned > header,
+.github-contributions > header {
+  margin-bottom: 25px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.github-pinned .eyebrow,
+.github-contributions .eyebrow,
+.github-activity .eyebrow {
+  margin-bottom: 8px;
+  font-size: 10px;
+}
+
+.github-pinned h3,
+.github-contributions h3,
+.github-activity h3 {
+  margin: 0;
+  font-size: clamp(22px, 2.7vw, 30px);
+  letter-spacing: -0.045em;
+}
+
+.github-pinned > header > svg {
+  color: var(--accent);
+}
+
+.github-repository-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.github-repository-grid > a {
+  min-height: 178px;
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.github-repository-grid > a:hover,
+.github-repository-grid > a:focus-visible {
+  background: var(--card);
+}
+
+.github-repository-grid strong {
+  font-size: 15px;
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-underline-offset: 4px;
+}
+
+.github-repository-grid p {
+  margin: 13px 0 22px;
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.65;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.github-repository-grid > a > span {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.github-repository-grid i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--line-strong);
+}
+
+.github-repository-grid small {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+}
+
+.github-contributions > header > strong {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.github-calendar {
+  min-width: 720px;
+  width: max-content;
+  padding: 21px;
+  display: grid;
+  grid-template-rows: repeat(7, 10px);
+  grid-auto-flow: column;
+  grid-auto-columns: 10px;
+  gap: 3px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  background: var(--card);
+}
+
+.github-contributions:has(.github-calendar) {
+  overflow-x: auto;
+}
+
+.github-contribution-day {
+  width: 10px;
+  height: 10px;
+  background: var(--paper-deep);
+}
+
+.github-contribution-day.level-first-quartile {
+  background: color-mix(in srgb, var(--accent) 28%, var(--paper));
+}
+
+.github-contribution-day.level-second-quartile {
+  background: color-mix(in srgb, var(--accent) 48%, var(--paper));
+}
+
+.github-contribution-day.level-third-quartile {
+  background: color-mix(in srgb, var(--accent) 70%, var(--paper));
+}
+
+.github-contribution-day.level-fourth-quartile {
+  background: var(--accent);
+}
+
+.github-activity {
+  display: grid;
+  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
+  gap: 64px;
+}
+
+.github-activity ol {
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--line);
+  list-style: none;
+}
+
+.github-activity li {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr);
+  border-bottom: 1px solid var(--line);
+}
+
+.github-activity time {
+  padding: 15px 0;
+  color: var(--faint);
+  font-size: 10px;
+}
+
+.github-activity li > a {
+  padding: 13px 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 18px;
+}
+
+.github-activity li > a:hover,
+.github-activity li > a:focus-visible {
+  color: var(--accent);
+}
+
+.github-activity li span {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.github-activity li strong {
+  grid-column: 1;
+  margin-top: 3px;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.github-activity li svg {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+}
+
+.github-data-note {
+  margin: 0;
+  padding: 24px;
+  border: 1px dashed var(--line-strong);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.search-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  padding: 10vh 20px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: rgb(20 21 22 / 72%);
+  backdrop-filter: blur(4px);
+}
+
+.search-panel {
+  width: min(640px, 100%);
+  max-height: 78vh;
+  overflow: hidden;
+  background: var(--card);
+  border: 1px solid var(--line-strong);
+  box-shadow: 0 24px 80px rgb(0 0 0 / 25%);
+}
+
+.search-input-wrap {
+  min-height: 58px;
+  padding: 0 16px;
+  display: grid;
+  grid-template-columns: 24px 1fr 30px;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--line);
+}
+
+.search-input-wrap input {
+  width: 100%;
+  height: 57px;
+  border: 0;
+  background: transparent;
+  outline: 0;
+  font-size: 13px;
+}
+
+.search-input-wrap button {
+  padding: 5px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  border: 0;
+}
+
+.search-results {
+  max-height: 58vh;
+  padding: 12px;
+  overflow-y: auto;
+}
+
+.search-label {
+  margin: 5px 8px 9px;
+  color: var(--faint);
+  font-size: 9px;
+}
+
+.search-result {
+  padding: 12px;
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: 2px 10px;
+  border-top: 1px solid var(--line);
+}
+
+.search-result:hover,
+.search-result:focus-visible,
+.search-result.active {
+  background: var(--paper-deep);
+}
+
+.search-result > span {
+  grid-row: 1 / 3;
+  color: var(--accent);
+  font-size: 9px;
+}
+
+.search-result strong {
+  font-size: 12px;
+}
+
+.search-result small {
+  color: var(--muted);
+  overflow: hidden;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-match {
+  padding: 0 1px;
+  background: var(--selection);
+  color: var(--ink);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.empty-state {
+  padding: 30px 12px;
+  color: var(--muted);
+  font-size: 11px;
+  text-align: center;
+}
+
+.search-footer {
+  padding: 9px 16px;
+  display: flex;
+  justify-content: space-between;
+  background: var(--paper-deep);
+  color: var(--faint);
+  font-size: 9px;
+}
+
+.site-footer {
+  border-top: 1px solid var(--line);
+}
+
+.footer-inner {
+  width: min(var(--wide), calc(100% - 48px));
+  min-height: 110px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.footer-inner div {
+  display: flex;
+  gap: 18px;
+}
+
+.footer-inner a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.footer-inner a:hover {
+  color: var(--accent);
+}
+
+.footer-framework a {
+  text-decoration: underline;
+  text-decoration-color: var(--line-strong);
+  text-underline-offset: 3px;
+}
+
+@media (max-width: 1080px) {
+  .post-reading-page {
+    --toc-width: 210px;
+    --reading-gap: 42px;
+    width: min(1180px, calc(100% - 80px));
+  }
+
+  .column-reading-page {
+    --column-sidebar-width: 165px;
+    grid-template-columns: var(--column-sidebar-width) minmax(0, 1fr) var(--column-sidebar-width);
+    gap: 26px;
+  }
+}
+
+@media (max-width: 1319px) {
+  .garden-page-toc {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-inner {
+    grid-template-columns: 1fr auto;
+    min-height: 96px;
+  }
+
+  .main-nav {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    margin-top: -20px;
+    padding-bottom: 14px;
+    overflow-x: auto;
+  }
+
+  .main-nav a:first-child {
+    padding-left: 0;
+  }
+
+  .header-actions {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .reading-page {
+    grid-template-columns: minmax(0, var(--content));
+  }
+
+  .garden-page-toc {
+    position: static;
+    display: block;
+    width: auto;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .toc-mobile-trigger {
+    position: fixed;
+    right: calc(16px + env(safe-area-inset-right));
+    bottom: calc(14px + env(safe-area-inset-bottom));
+    z-index: 70;
+    min-height: 42px;
+    padding: 0 15px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ink) 94%, transparent);
+    box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
+    color: var(--paper);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    touch-action: manipulation;
+    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
+  }
+
+  .toc-mobile-trigger:hover,
+  .toc-mobile-trigger:focus-visible {
+    transform: translateY(-2px);
+  }
+
+  .toc-mobile-trigger:focus-visible,
+  .toc-mobile-close:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+  }
+
+  .toc-mobile-trigger[data-mobile-open="true"] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(8px);
+  }
+
+  .toc-mobile-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 78;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: block;
+    border: 0;
+    background: rgb(0 0 0 / 38%);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 180ms ease, visibility 0s linear 180ms;
+  }
+
+  .toc-mobile-backdrop[data-mobile-open="true"] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 180ms ease, visibility 0s;
+  }
+
+  .reading-page > .toc,
+  .post-reading-page .article-reading-layout .toc,
+  .column-reading-page > .toc,
+  .garden-page-toc .toc {
+    position: fixed;
+    inset: auto 0 0;
+    z-index: 80;
+    width: 100%;
+    max-height: min(72vh, 560px);
+    max-height: min(72dvh, 560px);
+    margin: 0;
+    padding: 0 24px calc(18px + env(safe-area-inset-bottom));
+    display: flex;
+    border: 0;
+    border-top: 1px solid var(--line);
+    border-radius: 22px 22px 0 0;
+    background: var(--paper);
+    box-shadow: 0 -18px 60px rgb(0 0 0 / 20%);
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(calc(100% + 24px));
+    transition: transform 220ms ease, visibility 0s linear 220ms;
+  }
+
+  .reading-page > .toc[data-mobile-open="true"],
+  .post-reading-page .article-reading-layout .toc[data-mobile-open="true"],
+  .column-reading-page > .toc[data-mobile-open="true"],
+  .garden-page-toc .toc[data-mobile-open="true"] {
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+    transition: transform 220ms ease, visibility 0s;
+  }
+
+  .toc .toc-header {
+    min-height: 58px;
+    margin: 0;
+    padding: 14px 0 10px;
+    flex: 0 0 auto;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .toc .toc-header > p {
+    font-size: 13px;
+    letter-spacing: 0.04em;
+  }
+
+  .toc-mobile-close {
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--line);
+    border-radius: 50%;
+    background: var(--paper-deep);
+    color: var(--muted);
+    touch-action: manipulation;
+  }
+
+  .toc-mobile-close:hover {
+    color: var(--ink);
+  }
+
+  .toc .toc-list {
+    padding: 7px 4px 4px 0;
+  }
+
+  .toc li {
+    margin: 10px 0;
+    font-size: 13px;
+  }
+
+  .post-reading-page {
+    width: min(var(--content), calc(100% - 48px));
+    padding-top: 32px;
+  }
+
+  .post-reading-page .article-summary-row {
+    width: 100%;
+    padding-top: 46px;
+  }
+
+  .article-reading-layout {
+    display: block;
+  }
+
+  .column-reading-page {
+    grid-template-columns: minmax(0, 700px);
+  }
+
+  .series-nav {
+    position: relative;
+    top: 0;
+    padding: 0 0 24px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .series-nav ol {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .series-nav li {
+    border: 0;
+    border-right: 1px solid var(--line);
+  }
+
+  .series-nav li:last-child {
+    border-bottom: 0;
+    border-right: 0;
+  }
+
+  .series-nav li.active a {
+    border-left: 0;
+    border-bottom: 2px solid var(--accent);
+  }
+}
+
+/* Admin studio intentionally uses a separate shell: it is not part of the public blog navigation. */
+.admin-shell,
+.admin-access-page {
+  width: min(1360px, calc(100% - 80px));
+  margin: 0 auto;
+  min-height: 100vh;
+  padding: 26px 0 80px;
+}
+
+.admin-topbar,
+.admin-topbar > div,
+.admin-brand,
+.admin-actions,
+.admin-panel-heading,
+.admin-field-heading,
+.admin-distribution-note,
+.admin-item-actions,
+.admin-distribution-actions {
+  display: flex;
+  align-items: center;
+}
+
+.admin-topbar {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 20px;
+}
+
+.admin-brand {
+  color: var(--ink);
+  font-size: 16px;
+  font-weight: 780;
+  letter-spacing: 0.13em;
+  text-decoration: none;
+}
+
+.admin-brand span { color: var(--accent); }
+
+.admin-topbar > div { gap: 18px; color: var(--muted); font-size: 13px; }
+
+.admin-signout { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 4px; }
+
+.admin-topbar a:not(.admin-brand),
+.admin-access-card a {
+  align-items: center;
+  color: var(--ink);
+  display: inline-flex;
+  gap: 6px;
+  text-underline-offset: 4px;
+}
+
+.admin-hero {
+  align-items: end;
+  border-bottom: 1px solid var(--line);
+  display: grid;
+  gap: 40px;
+  grid-template-columns: minmax(0, 1.35fr) minmax(410px, 0.65fr);
+  padding: 78px 0 50px;
+}
+
+.admin-hero h1,
+.admin-panel h2,
+.admin-access-card h1 { letter-spacing: -0.055em; }
+
+.admin-hero h1 {
+  font-size: clamp(36px, 4vw, 64px);
+  line-height: 1.05;
+  margin: 12px 0 20px;
+  max-width: 760px;
+}
+
+.admin-hero > div > p:last-child { color: var(--muted); font-size: 15px; max-width: 650px; }
+
+.admin-metrics { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 0; }
+.admin-metrics div { border-left: 1px solid var(--line); padding-left: 15px; }
+.admin-metrics dt { color: var(--muted); font-size: 12px; }
+.admin-metrics dd { font-size: 30px; font-weight: 700; letter-spacing: -0.06em; margin: 7px 0 0; }
+
+.admin-notice { align-items: center; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); color: var(--ink); display: flex; font-size: 13px; gap: 8px; margin: 28px 0 0; padding: 12px 14px; }
+.admin-notice svg { color: var(--accent); flex: none; }
+
+.admin-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(390px, 0.75fr); margin-top: 28px; }
+.admin-panel { background: color-mix(in srgb, var(--paper) 96%, var(--ink)); border: 1px solid var(--line); padding: 28px; }
+.admin-panel-heading { justify-content: space-between; margin-bottom: 24px; }
+.admin-panel-heading > svg { color: var(--accent); }
+.admin-panel-heading span, .admin-field-heading span { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
+.admin-panel h2 { font-size: 25px; line-height: 1.15; margin: 6px 0 0; }
+
+.admin-compose-panel label { color: var(--ink); display: grid; font-size: 13px; font-weight: 650; gap: 8px; margin-top: 17px; }
+.admin-compose-panel input,
+.admin-compose-panel textarea,
+.admin-attachment-row input,
+.admin-attachment-row select { background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: inherit; min-width: 0; outline-color: var(--accent); padding: 11px 12px; width: 100%; }
+.admin-compose-panel textarea { line-height: 1.7; resize: vertical; }
+
+.admin-attachments { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; }
+.admin-field-heading { justify-content: space-between; margin-bottom: 12px; }
+.admin-field-heading > div { display: grid; gap: 3px; }
+.admin-field-heading small { color: var(--muted); font-size: 12px; }
+.admin-attachment-row { display: grid; gap: 8px; grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 0.9fr) 32px; margin-top: 8px; }
+.admin-attachment-row input, .admin-attachment-row select { font-size: 12px; padding: 9px; }
+
+.admin-actions { gap: 10px; justify-content: flex-end; margin-top: 24px; }
+.admin-primary-button, .admin-secondary-button, .admin-quiet-button, .admin-icon-button, .admin-item-actions button, .admin-distribution-actions button { align-items: center; border: 1px solid var(--line); border-radius: 0; cursor: pointer; display: inline-flex; font: inherit; gap: 6px; justify-content: center; }
+.admin-primary-button { background: var(--ink); border-color: var(--ink); color: var(--paper); padding: 11px 15px; }
+.admin-secondary-button { background: transparent; color: var(--ink); padding: 11px 15px; }
+.admin-quiet-button { background: transparent; color: var(--accent); font-size: 12px; padding: 7px 9px; }
+.admin-icon-button { background: transparent; color: var(--muted); padding: 8px; }
+.admin-primary-button:disabled, .admin-secondary-button:disabled { cursor: wait; opacity: 0.58; }
+
+.admin-thought-list { border-top: 1px solid var(--line); }
+.admin-thought-list article { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 18px 0; }
+.admin-thought-list h3, .admin-catalog h3 { font-size: 15px; line-height: 1.35; margin: 8px 0 5px; }
+.admin-thought-list p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; }
+.admin-status { border: 1px solid var(--line); color: var(--muted); font-size: 10px; padding: 3px 5px; }
+.admin-status.published { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
+.admin-item-actions { flex: none; gap: 7px; }
+.admin-item-actions a, .admin-item-actions button { background: transparent; color: var(--muted); font-size: 12px; padding: 6px; text-decoration: none; }
+.admin-empty { color: var(--muted); font-size: 13px; padding: 22px 0; }
+
+.admin-distribution-panel { margin-top: 24px; }
+.admin-distribution-note { color: var(--muted); font-size: 12px; gap: 8px; line-height: 1.6; margin: -5px 0 20px; }
+.admin-distribution-note svg { color: var(--accent); flex: none; }
+.admin-catalog { border-top: 1px solid var(--line); }
+.admin-catalog article { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 20px; justify-content: space-between; padding: 17px 0; }
+.admin-catalog article > div:first-child > span { color: var(--muted); font-size: 12px; }
+.admin-distribution-actions { flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
+.admin-distribution-actions button { background: transparent; color: var(--ink); font-size: 12px; min-height: 31px; padding: 7px 9px; }
+.admin-distribution-actions button:first-child { color: var(--accent); }
+.admin-distribution-actions small { border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; margin-left: 3px; max-width: 120px; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; }
+
+.admin-access-page { align-items: center; display: flex; justify-content: center; }
+.admin-access-card { border: 1px solid var(--line); max-width: 530px; padding: 42px; }
+.admin-access-card > svg { color: var(--accent); }
+.admin-access-card h1 { font-size: 35px; line-height: 1.12; margin: 18px 0; }
+.admin-access-card p { color: var(--muted); line-height: 1.75; }
+.admin-access-card code { color: var(--accent); }
+.admin-access-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 25px; }
+.admin-github-login { align-items: center; background: var(--ink); color: var(--paper) !important; display: inline-flex; gap: 8px; padding: 11px 15px; text-decoration: none; }
+
+@media (max-width: 900px) {
+  .admin-shell, .admin-access-page { width: min(100% - 36px, 720px); padding-top: 18px; }
+  .admin-hero, .admin-grid { grid-template-columns: 1fr; }
+  .admin-hero { gap: 28px; padding: 55px 0 35px; }
+  .admin-metrics { max-width: 440px; }
+  .admin-panel { padding: 20px; }
+  .admin-attachment-row { grid-template-columns: 82px minmax(0, 1fr) 32px; }
+  .admin-attachment-row input:nth-of-type(2) { grid-column: 2; }
+  .admin-catalog article { align-items: start; flex-direction: column; }
+  .admin-distribution-actions { justify-content: flex-start; }
+}
+
+@media (max-width: 540px) {
+  .admin-topbar > div > span { display: none; }
+  .admin-topbar > div { gap: 0; }
+  .admin-hero h1 { font-size: 38px; }
+  .admin-metrics dd { font-size: 25px; }
+  .admin-field-heading { align-items: start; gap: 12px; }
+  .admin-attachment-row { grid-template-columns: 1fr 36px; }
+  .admin-attachment-row select, .admin-attachment-row input { grid-column: 1; }
+  .admin-attachment-row button { grid-column: 2; grid-row: 1; }
+  .admin-thought-list article { flex-direction: column; }
+}
+
+@media (max-width: 680px) {
+  body {
+    font-size: 14px;
+  }
+
+  .header-inner,
+  .page-shell,
+  .footer-inner,
+  .reading-page,
+  .column-reading-page {
+    width: min(100% - 28px, var(--wide));
+  }
+
+  .post-reading-page {
+    padding-top: 40px;
+  }
+
+  .brand small,
+  .key-hint {
+    display: none;
+  }
+
+  .brand-mark {
+    width: 36px;
+    height: 44px;
+  }
+
+  .brand strong {
+    font-size: 17px;
+  }
+
+  .main-nav a {
+    padding: 6px 10px;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .home-page {
+    padding-top: 48px;
+  }
+
+  .home-section {
+    margin-top: 58px;
+  }
+
+  .post-row {
+    min-height: 76px;
+    grid-template-columns: 86px 1fr 16px;
+    gap: 8px;
+  }
+
+  .post-row small {
+    max-width: 180px;
+  }
+
+  .column-card {
+    min-height: 220px;
+    padding: 24px;
+  }
+
+  .column-card .column-number {
+    display: none;
+  }
+
+  .page-intro {
+    padding-top: 52px;
+  }
+
+  .archive-row {
+    min-height: 92px;
+    padding: 11px 0;
+    grid-template-columns: minmax(0, 1fr) 16px;
+    gap: 10px;
+  }
+
+  .archive-row.with-cover {
+    grid-template-columns: 96px minmax(0, 1fr) 16px;
+  }
+
+  .archive-cover {
+    width: 96px;
+    height: 68px;
+  }
+
+  .archive-meta {
+    gap: 4px 9px;
+  }
+
+  .archive-meta time,
+  .archive-topic {
+    font-size: 9px;
+  }
+
+  .archive-row h2 {
+    margin: 5px 0 4px;
+    font-size: 15px;
+    line-height: 1.35;
+  }
+
+  .archive-row p {
+    font-size: 10px;
+  }
+
+  .archive-row > svg {
+    margin: 0;
+  }
+
+  .thought-card {
+    padding: 19px;
+  }
+
+  .thought-card > header {
+    align-items: flex-start;
+  }
+
+  .column-feature {
+    grid-template-columns: 1fr;
+  }
+
+  .column-feature-copy {
+    padding: 32px 25px;
+  }
+
+  .column-feature-index {
+    min-height: 130px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+
+  .column-feature-index strong {
+    grid-column: 2;
+    grid-row: 1 / 3;
+    font-size: 58px;
+  }
+
+  .article-header {
+    padding-top: 40px;
+  }
+
+  .markdown-body {
+    font-size: 14px;
+  }
+
+  .markdown-body h2 {
+    margin-top: 52px;
+  }
+
+  .markdown-body h3 {
+    font-size: 19px;
+  }
+
+  .markdown-body h4 {
+    font-size: 18px;
+  }
+
+  .markdown-body h5 {
+    font-size: 17px;
+  }
+
+  .markdown-body table {
+    display: block;
+    overflow-x: auto;
+  }
+
+  .markdown-body .external-embed-card,
+  .markdown-body .external-embed-card:has(> img) {
+    grid-template-columns: 1fr 22px;
+  }
+
+  .external-embed-card > img {
+    grid-column: 1 / 3;
+    width: 100%;
+    height: auto;
+    max-height: 220px;
+  }
+
+  .garden-doc-launch {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-doc-toggle {
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+    padding-right: 16px;
+  }
+
+  .garden-doc-open {
+    justify-content: flex-end;
+    padding: 0 16px 14px;
+  }
+
+  .thought-gallery-2,
+  .thought-gallery-3 {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+  }
+
+  .thought-gallery-3 .thought-image,
+  .thought-gallery-3 .thought-image:first-child {
+    grid-row: auto;
+    height: auto;
+    max-height: 360px;
+  }
+
+  .series-nav ol {
+    grid-template-columns: 1fr;
+  }
+
+  .series-nav li {
+    border-right: 0;
+    border-top: 1px solid var(--line);
+  }
+
+  .about-grid {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+
+  .content-empty-state {
+    min-height: 0;
+    padding: 28px 24px;
+    grid-template-columns: 52px minmax(0, 1fr);
+    gap: 20px;
+  }
+
+  .content-empty-mark {
+    width: 52px;
+    height: 52px;
+  }
+
+  .content-empty-state > a {
+    grid-column: 2;
+    width: max-content;
+  }
+
+  .github-overview {
+    grid-template-columns: 74px minmax(0, 1fr);
+    gap: 18px;
+  }
+
+  .github-overview > img {
+    width: 74px;
+    height: 74px;
+    align-self: start;
+  }
+
+  .github-overview > a {
+    grid-column: 2;
+    width: max-content;
+  }
+
+  .github-metrics,
+  .github-repository-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .github-metrics > div {
+    min-height: 104px;
+    border-top: 1px solid var(--line-strong);
+    border-left: 0;
+  }
+
+  .github-metrics > div:first-child {
+    border-top: 0;
+  }
+
+  .github-repository-grid > a {
+    min-height: 150px;
+  }
+
+  .github-activity {
+    grid-template-columns: 1fr;
+    gap: 26px;
+  }
+
+  .footer-inner {
+    min-height: 96px;
+    align-items: flex-start;
+    padding: 25px 0;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 900px) {
+  .garden-guide-heading,
+  .garden-system > header,
+  .garden-media > header,
+  .garden-section-heading {
+    grid-template-columns: 1fr;
+    gap: 22px;
+  }
+
+  .garden-system > header > p:last-child {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .garden-media > header > p {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .garden-media-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-responsibility-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .garden-responsibility-grid article:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .garden-responsibility-grid article:nth-child(n + 3) {
+    border-top: 1px solid var(--line-strong);
+  }
+
+  .garden-content-guide,
+  .garden-content-guide:nth-child(even) {
+    grid-template-columns: 1fr;
+    gap: 42px;
+  }
+
+  .garden-content-guide:nth-child(even) .garden-source-panel {
+    order: initial;
+  }
+
+  .garden-source-panel pre {
+    min-height: 0;
+  }
+
+  .garden-admin-flow {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .garden-admin-flow li:nth-child(3) {
+    border-left: 0;
+  }
+
+  .garden-admin-flow li:nth-child(n + 3) {
+    border-top: 1px solid var(--line);
+  }
+
+  .garden-admin-enable {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .garden-admin-capabilities article,
+  .garden-system-grid article {
+    grid-template-columns: 44px minmax(170px, 0.7fr) minmax(0, 1.3fr);
+  }
+}
+
+@media (max-width: 680px) {
+  .garden-page .page-intro {
+    padding-bottom: 50px;
+  }
+
+  .garden-guide-heading {
+    padding: 38px 0 32px;
+  }
+
+  .garden-proof-list {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-proof-list li {
+    min-height: 52px;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .garden-proof-list li:first-child {
+    border-top: 0;
+  }
+
+  .garden-responsibility-flow {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+  }
+
+  .garden-responsibility-flow svg {
+    margin-left: 3px;
+    transform: rotate(90deg);
+  }
+
+  .garden-responsibility-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-responsibility-grid article,
+  .garden-responsibility-grid article:nth-child(odd) {
+    min-height: 0;
+    border-top: 1px solid var(--line-strong);
+    border-left: 0;
+  }
+
+  .garden-responsibility-grid article:first-child {
+    border-top: 0;
+  }
+
+  .garden-guide-index {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-guide-index a,
+  .garden-guide-index a:first-child {
+    min-height: 67px;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .garden-guide-index a:first-child {
+    border-top: 0;
+  }
+
+  .garden-content-guide {
+    padding: 68px 0;
+  }
+
+  .garden-content-features {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-source-panel pre {
+    padding: 20px;
+    font-size: 12px;
+  }
+
+  .garden-system {
+    margin-top: 76px;
+  }
+
+  .garden-media {
+    margin: 76px -24px 0;
+    padding: 48px 24px;
+  }
+
+  .garden-media-source pre {
+    min-height: 0;
+    padding: 20px;
+  }
+
+  .garden-media-boundary {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .garden-system-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-system-grid article {
+    min-height: 0;
+  }
+
+  .garden-admin,
+  .garden-setup {
+    margin-top: 76px;
+    padding-top: 38px;
+  }
+
+  .garden-admin-capabilities,
+  .garden-setup-grid,
+  .garden-setup-notes {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-admin-capabilities article,
+  .garden-setup-grid article {
+    min-height: 0;
+  }
+
+  .garden-admin-capabilities article,
+  .garden-system-grid article {
+    grid-template-columns: 36px minmax(0, 1fr);
+  }
+
+  .garden-admin-capabilities article p,
+  .garden-system-grid article p {
+    grid-column: 2;
+  }
+
+  .garden-admin-boundary {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .garden-admin-preview figcaption {
+    grid-template-columns: 1fr;
+    gap: 5px;
+    padding: 16px 18px;
+  }
+
+  .garden-admin-flow {
+    grid-template-columns: 1fr;
+  }
+
+  .garden-admin-flow li,
+  .garden-admin-flow li:nth-child(3) {
+    min-height: 0;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .garden-admin-flow li:first-child {
+    border-top: 0;
+  }
+
+  .garden-admin-enable {
+    padding: 25px 20px;
+  }
+
+  .garden-setup-grid dl > div {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .garden-setup-notes > div,
+  .garden-setup-notes > div:first-child {
+    min-height: 0;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .garden-setup-notes > div:first-child {
+    border-top: 0;
+  }
+
+  .garden-setup-finish {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 24px 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}