:root {
  color-scheme: light;
  --garden-paper: #ffffff;
  --garden-surface: #ffffff;
  --garden-surface-muted: #f7f7f7;
  --garden-ink: #292721;
  --garden-ink-soft: #3f3b34;
  --garden-muted: #777168;
  --garden-faint: #aaa39a;
  --garden-line: #e5e5e5;
  --garden-link: #2f70b7;
  --garden-link-hover: #1f568e;
  --garden-link-soft: rgba(47, 112, 183, 0.11);
  --garden-accent: #d9782d;
  --garden-accent-soft: rgba(217, 120, 45, 0.13);
  --garden-highlight: rgba(246, 211, 91, 0.62);
  --garden-shadow:
    -14px 0 36px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  --garden-shadow-active:
    -18px 0 44px rgba(0, 0, 0, 0.11),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  --garden-radius: 14px;
  --garden-font-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --garden-font-reading:
    "Iowan Old Style", "Palatino Linotype", "Noto Serif CJK SC",
    "Source Han Serif SC", "Songti SC", STSong, Georgia, serif;
}

* {
  scrollbar-color: #c9c1b6 transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  background: #c9c1b6;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #a9a095;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

::selection {
  color: var(--garden-ink);
  background: rgba(246, 211, 91, 0.48);
}

html,
body {
  background: var(--garden-paper) !important;
}

body {
  color: var(--garden-ink);
  font-family: var(--garden-font-ui) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body .NotePageRoot > header {
  height: 52px !important;
  min-height: 52px !important;
  padding: 12px 30px !important;
  z-index: 100;
  align-items: center;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--garden-line) !important;
  box-shadow: 0 1px 8px rgba(73, 62, 46, 0.035);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body .NotePageRoot > header h1 {
  position: relative;
  margin-right: 24px !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -0.018em;
}

body .NotePageRoot > header h1::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--garden-accent);
  box-shadow: 0 0 0 4px var(--garden-accent-soft);
  vertical-align: 1px;
}

body .NotePageRoot > header a {
  color: var(--garden-muted) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 14px !important;
  font-weight: 580;
  text-decoration: none !important;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

body .NotePageRoot > header a:hover {
  color: var(--garden-link-hover) !important;
}

.GardenControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.GardenBackButton {
  display: none;
  min-height: 32px;
  padding: 5px 10px;
  color: var(--garden-muted);
  font: 600 13px/1 var(--garden-font-ui);
  background: var(--garden-surface-muted);
  border: 1px solid var(--garden-line);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.GardenBackButton:hover {
  color: var(--garden-link-hover);
  background: #fff;
}

.ReadingProgress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #e69a4f, var(--garden-accent));
  box-shadow: 0 0 8px rgba(217, 120, 45, 0.32);
  transition: width 80ms linear;
}

body .NoteColumnsScrollingContainer {
  background: var(--garden-paper);
}

body .NoteColumnsContainer {
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body .NoteColumnsContainer .NoteContainer {
  color: var(--garden-ink);
  background: var(--garden-surface) !important;
  box-shadow: var(--garden-shadow) !important;
  transition:
    box-shadow 240ms ease,
    opacity 160ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body .NoteColumnsContainer .NoteContainer:hover {
  box-shadow: var(--garden-shadow-active) !important;
}

body .NoteContainer .PrimaryNote {
  padding: 42px 44px 54px !important;
}

body .PrimaryNote .MarkdownContainer {
  color: var(--garden-ink-soft) !important;
  font-family: var(--garden-font-reading) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  letter-spacing: 0.006em;
  hanging-punctuation: first allow-end last;
}

body .PrimaryNote .MarkdownContainer > h1:first-child {
  margin: 0 0 25px !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 30px !important;
  font-weight: 730 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

body .PrimaryNote .MarkdownContainer h2 {
  margin: 2em 0 0.72em !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

body .PrimaryNote .MarkdownContainer h3 {
  margin: 1.7em 0 0.62em !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 19px !important;
  font-weight: 680 !important;
  line-height: 1.4 !important;
}

body .PrimaryNote .MarkdownContainer p {
  margin: 0 0 1.08em !important;
  line-height: inherit !important;
}

body .PrimaryNote .MarkdownContainer strong {
  color: var(--garden-ink);
  font-weight: 700;
}

body .PrimaryNote .MarkdownContainer a.NoteLink {
  color: inherit !important;
  border-radius: 0.2em;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(41, 39, 33, 0.45) !important;
  text-decoration-thickness: 0.07em !important;
  text-underline-offset: 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    color 150ms ease,
    text-decoration-color 150ms ease;
}

body .PrimaryNote .MarkdownContainer a.NoteLink:hover,
body .PrimaryNote .MarkdownContainer a.NoteLink.Active {
  color: var(--garden-ink) !important;
  background: transparent !important;
  text-decoration-color: var(--garden-ink) !important;
}

body .PrimaryNote .MarkdownContainer a:not(.NoteLink) {
  color: var(--garden-link) !important;
  border-radius: 0.2em;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(47, 112, 183, 0.28) !important;
  text-decoration-thickness: 0.08em !important;
  text-underline-offset: 0.17em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    text-decoration-color 150ms ease;
}

body .PrimaryNote .MarkdownContainer a:not(.NoteLink):hover {
  color: var(--garden-link-hover) !important;
  background: transparent !important;
  text-decoration-color: var(--garden-link-hover) !important;
}

body .PrimaryNote .MarkdownContainer ul,
body .PrimaryNote .MarkdownContainer ol {
  margin: 0.25em 0 1.15em !important;
  padding-left: 1.45em !important;
}

body .PrimaryNote .MarkdownContainer li {
  margin: 0.34em 0;
  padding-left: 0.14em;
}

body .PrimaryNote .MarkdownContainer li::marker {
  color: var(--garden-accent);
}

body .PrimaryNote .MarkdownContainer blockquote {
  margin: 1.55em 0 !important;
  padding: 0.15em 0 0.15em 1.15em !important;
  color: #514d46 !important;
  background: transparent !important;
  border-left: 2px solid #cfcfcf !important;
  border-radius: 0;
}

body .PrimaryNote .MarkdownContainer blockquote > :last-child {
  margin-bottom: 0 !important;
}

body .PrimaryNote .MarkdownContainer hr {
  height: 1px !important;
  margin: 2.2em 0 !important;
  background: linear-gradient(
    90deg,
    var(--garden-line),
    rgba(230, 223, 212, 0.15)
  ) !important;
  border: 0 !important;
}

body .PrimaryNote .MarkdownContainer code {
  padding: 0.12em 0.35em;
  color: #7a3f1e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
  background: #f2ece3;
  border: 1px solid #e8dfd1;
  border-radius: 5px;
}

body .PrimaryNote .MarkdownContainer pre {
  max-width: 100%;
  margin: 1.5em 0;
  padding: 18px 20px;
  overflow: auto;
  color: #f3eee6;
  background: #2e2b26;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body .PrimaryNote .MarkdownContainer pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

body .PrimaryNote .MarkdownContainer img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(54, 45, 32, 0.11);
}

body .PrimaryNote .MarkdownContainer table {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
  font-family: var(--garden-font-ui);
  font-size: 0.88em;
  border-collapse: collapse;
  border: 1px solid var(--garden-line);
  border-radius: 10px;
}

body .PrimaryNote .MarkdownContainer th,
body .PrimaryNote .MarkdownContainer td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--garden-line);
  text-align: left;
  vertical-align: top;
}

body .PrimaryNote .MarkdownContainer th {
  color: var(--garden-ink);
  font-weight: 680;
  background: var(--garden-surface-muted);
}

body .PrimaryNote mark {
  color: inherit !important;
  background: linear-gradient(
    180deg,
    transparent 8%,
    var(--garden-highlight) 8%,
    var(--garden-highlight) 92%,
    transparent 92%
  ) !important;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.02em 0.12em;
}

body .PrimaryNote .FooterMeta {
  margin-top: 2.2em !important;
  color: var(--garden-faint) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 12px !important;
  letter-spacing: 0.015em;
}

body .NoteColumnRoot > .Footer {
  margin: 22px 16px 34px !important;
  padding: 20px !important;
  color: var(--garden-ink-soft);
  background: var(--garden-surface-muted) !important;
  border: 1px solid var(--garden-line) !important;
  border-radius: var(--garden-radius) !important;
  box-shadow: 0 10px 30px rgba(65, 54, 39, 0.045);
}

body .Footer .BacklinksHeading {
  margin-bottom: 10px !important;
  color: var(--garden-muted) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
}

body .Footer .BacklinksContainer {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch;
}

body .Footer .BacklinksContainer > a.NoteLink {
  width: calc(50% - 5px) !important;
  color: inherit !important;
  text-decoration: none !important;
}

body .Footer .LinkedNote.Backlink {
  box-sizing: border-box;
  width: 100% !important;
  height: 108px !important;
  margin: 0 !important;
  padding: 12px 13px !important;
  background: rgba(255, 253, 248, 0.72) !important;
  border: 1px solid rgba(230, 223, 212, 0.88);
  border-radius: 10px !important;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease !important;
}

body .Footer .LinkedNote.Backlink:hover,
body .Footer .LinkedNote.Backlink.Hovered {
  background: #fff !important;
  border-color: rgba(47, 112, 183, 0.24);
  box-shadow: 0 8px 20px rgba(52, 46, 37, 0.07);
  transform: translateY(-2px);
}

body .Footer .LinkedNote .Title {
  margin: 0 0 6px !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.32 !important;
}

body .Footer .LinkedNote .Preview {
  margin: 0 !important;
  color: var(--garden-muted) !important;
  font-family: var(--garden-font-reading) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

body .ObscuredLabel {
  margin-top: 36px !important;
  color: var(--garden-muted) !important;
  font-family: var(--garden-font-ui) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  border-left: 1px solid rgba(230, 223, 212, 0.78);
  background: linear-gradient(
    90deg,
    rgba(247, 244, 237, 0.46),
    rgba(255, 253, 248, 0.02)
  );
  transition:
    color 160ms ease,
    background-color 160ms ease !important;
}

body .ObscuredLabel:hover,
body .ObscuredLabel.HoveredDestination {
  color: var(--garden-link-hover) !important;
  background: linear-gradient(
    90deg,
    rgba(47, 112, 183, 0.11),
    rgba(255, 253, 248, 0.02)
  );
}

body :focus-visible {
  outline: 2px solid rgba(217, 120, 45, 0.78) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 800px) {
  body .NotePageRoot > header {
    height: 53px !important;
    min-height: 53px !important;
    padding: 10px 14px !important;
  }

  body .NotePageRoot > header h1 {
    max-width: 58vw;
    margin-right: 14px !important;
    overflow: hidden;
    font-size: 15px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .NotePageRoot > header h1::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    box-shadow: 0 0 0 3px var(--garden-accent-soft);
  }

  body .NotePageRoot > header > a {
    display: none;
  }

  .GardenBackButton[data-visible="true"] {
    display: inline-flex;
    align-items: center;
  }

  body .NoteColumnsScrollingContainer {
    background: var(--garden-surface);
  }

  body .NoteColumnsContainer .NoteContainer {
    box-shadow: none !important;
  }

  body .NoteContainer .PrimaryNote {
    padding: 28px 21px 42px !important;
  }

  body .PrimaryNote .MarkdownContainer {
    font-size: 17px !important;
    line-height: 1.76 !important;
  }

  body .PrimaryNote .MarkdownContainer > h1:first-child {
    margin-bottom: 22px !important;
    font-size: 28px !important;
    line-height: 1.22 !important;
  }

  body .PrimaryNote .MarkdownContainer h2 {
    font-size: 22px !important;
  }

  body .PrimaryNote .MarkdownContainer blockquote {
    margin: 1.35em 0 !important;
    padding: 0.8em 0.88em 0.82em 1em !important;
  }

  body .NoteColumnRoot > .Footer {
    margin: 16px 12px 28px !important;
    padding: 17px !important;
    border-radius: 12px !important;
  }

  body .Footer .BacklinksContainer {
    gap: 9px !important;
  }

  body .Footer .BacklinksContainer > a.NoteLink {
    width: 100% !important;
  }

  body .Footer .LinkedNote.Backlink {
    height: auto !important;
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .ReadingProgress {
    transition: none;
  }
}