:root {
  --tisty-bg: #ffffff;
  --tisty-rail: #f6f6f8;
  --tisty-panel: #fbfbfd;
  --tisty-desk: #eceef1;
  --tisty-sheet: #ffffff;
  --tisty-cast: rgb(0 0 0 / 0.1);
  --tisty-ink: #1d1d1f;
  --tisty-soft: #57575c;
  --tisty-faint: #67676b;
  --tisty-line: rgb(0 0 0 / 0.16);
  --tisty-hair: rgb(0 0 0 / 0.09);
  --tisty-hover: rgb(0 0 0 / 0.035);
  --tisty-active: rgb(0 0 0 / 0.06);
  --tisty-accent: #0060e3;
  --tisty-accent-soft: rgb(0 96 227 / 0.08);
  --tisty-hue-red: #c62f45;
  --tisty-hue-orange: #b35c00;
  --tisty-hue-amber: #8a6a00;
  --tisty-hue-green: #3f8a24;
  --tisty-hue-teal: #0f7a68;
  --tisty-hue-blue: #1f6fb2;
  --tisty-hue-indigo: #4a58c4;
  --tisty-hue-purple: #7a44b8;
  --tisty-hue-pink: #b4408c;
  --tisty-hue-brown: #6e5a4a;
  --tisty-hue-gray: #6a6a70;
  --tisty-urgent: #c6292e;
  --tisty-high: #902800;
  --tisty-mark-date: rgb(10 124 255 / 0.15);
  --tisty-mark-deadline: rgb(214 118 40 / 0.18);
  --tisty-mark-list: rgb(22 163 124 / 0.17);
  --tisty-mark-tag: rgb(124 92 222 / 0.15);
  --tisty-mark-priority: rgb(229 72 77 / 0.14);
  --tisty-mark-repeat: rgb(214 51 160 / 0.15);
  --tisty-mark-step: rgb(0 150 190 / 0.16);
  --tisty-pen-yellow: rgb(250 204 21 / 0.32);
  --tisty-pen-green: rgb(34 197 94 / 0.26);
  --tisty-pen-blue: rgb(59 130 246 / 0.26);
  --tisty-pen-pink: rgb(236 72 153 / 0.24);
  --tisty-mark-doc: rgb(88 88 100 / 0.12);
  --tisty-mark-doc-lit: rgb(88 88 100 / 0.2);
  --tisty-veil: rgb(0 0 0 / 0.28);
  --tisty-docs-head: 30px;
  --tisty-lift: 0 4px 14px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.06);
  --tisty-lift-tall: 0 16px 44px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);
}
html.dark{
  --tisty-bg: #1c1c1e;
  --tisty-rail: #191919;
  --tisty-panel: #202022;
  --tisty-desk: #151516;
  --tisty-sheet: #232326;
  --tisty-cast: rgb(0 0 0 / 0.45);
  --tisty-ink: #f2f2f7;
  --tisty-soft: #adadb4;
  --tisty-faint: #9a9aa1;
  --tisty-line: rgb(255 255 255 / 0.2);
  --tisty-hair: rgb(255 255 255 / 0.12);
  --tisty-hover: rgb(255 255 255 / 0.045);
  --tisty-active: rgb(255 255 255 / 0.08);
  --tisty-accent: #439bff;
  --tisty-accent-soft: rgb(67 155 255 / 0.11);
  --tisty-hue-red: #ff7a8a;
  --tisty-hue-orange: #ff9d4d;
  --tisty-hue-amber: #d9b02e;
  --tisty-hue-green: #6fc44a;
  --tisty-hue-teal: #3fbfa6;
  --tisty-hue-blue: #58aef0;
  --tisty-hue-indigo: #8b95ff;
  --tisty-hue-purple: #b98cf0;
  --tisty-hue-pink: #f07ac0;
  --tisty-hue-brown: #b39c86;
  --tisty-hue-gray: #a0a0a8;
  --tisty-urgent: #ff6860;
  --tisty-high: #ffaa54;
  --tisty-mark-date: rgb(61 149 255 / 0.2);
  --tisty-mark-deadline: rgb(245 160 74 / 0.2);
  --tisty-mark-list: rgb(45 200 155 / 0.18);
  --tisty-mark-tag: rgb(160 130 255 / 0.2);
  --tisty-mark-priority: rgb(255 95 87 / 0.18);
  --tisty-mark-repeat: rgb(240 110 205 / 0.2);
  --tisty-mark-step: rgb(70 205 240 / 0.2);
  --tisty-pen-yellow: rgb(250 204 21 / 0.34);
  --tisty-pen-green: rgb(45 200 155 / 0.3);
  --tisty-pen-blue: rgb(67 155 255 / 0.32);
  --tisty-pen-pink: rgb(240 110 205 / 0.3);
  --tisty-mark-doc: rgb(205 205 220 / 0.13);
  --tisty-mark-doc-lit: rgb(205 205 220 / 0.22);
  --tisty-veil: rgb(0 0 0 / 0.55);
  --tisty-lift: 0 4px 14px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  --tisty-lift-tall: 0 16px 44px rgb(0 0 0 / 0.62), 0 2px 8px rgb(0 0 0 / 0.45);
}
html {
  color-scheme: light;
  background: var(--tisty-sheet);
  color: var(--tisty-ink);
  -webkit-text-size-adjust: 100%;
}
html.dark {
  color-scheme: dark;
}
body {
  margin: 0;
  font:
    16px / 1.7 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI Variable Text",
    "Segoe UI",
    system-ui,
    sans-serif;
  overflow-wrap: break-word;
}
.page {
  box-sizing: border-box;
  max-width: var(--wide, 820px);
  margin: 0 auto;
  padding: 36px 40px 40vh;
}
.page > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 3lh;
}
html:not(.tall) {
  background: var(--tisty-desk);
}
html:not(.tall) body {
  padding: 24px 16px 40vh;
}
html:not(.tall) .page {
  padding-bottom: 36px;
  border-radius: 10px;
  background: var(--tisty-sheet);
  box-shadow: 0 1px 3px var(--tisty-cast);
}
html.tall {
  overflow: hidden;
}
html.tall .page {
  padding-bottom: 36px;
}
html.tall .page > * {
  content-visibility: visible;
}
.editing {
  position: relative;
}
.editing::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -12px;
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--tisty-accent) 35%, transparent);
  pointer-events: none;
  animation: editing-in 160ms ease-out;
}
@keyframes editing-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .editing::before {
    animation: none;
  }
}
.editing.titled .cm-line:first-child {
  font-size: 1.65em;
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.editing.titled {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tisty-hair);
}
.page > [data-at] {
  cursor: text;
}
html.tall .page:has(> .editing) {
  padding-bottom: 300px;
}
.page[data-empty] > h1[data-title] {
  cursor: text;
}
.page[data-empty] > h1[data-title]::before {
  content: attr(data-title);
  color: var(--tisty-faint);
}
.page[data-empty]:has(> h1[data-title]:only-child) {
  min-height: 240px;
  cursor: text;
}
.page[data-empty]:has(> h1[data-title]:only-child)::after {
  content: attr(data-empty);
  color: var(--tisty-faint);
}
.page > :is(h1, h2, h3, p):first-child,
.page > :is(.front, .fronted):first-child + :is(h1, h2, h3, p) {
  font-size: 1.65em;
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tisty-hair);
}
.page > :is(h1, h2, h3, p):first-child:only-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
h1 {
  font-size: 1.65em;
  font-weight: 640;
  line-height: 1.25;
  margin: 26px 0 8px;
}
h2 {
  font-size: 1.3em;
  font-weight: 640;
  margin: 22px 0 6px;
}
h3 {
  font-size: 1.13em;
  font-weight: 640;
  margin: 18px 0 4px;
}
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: 640;
  margin: 16px 0 4px;
}
p {
  margin: 10px 0;
}
strong {
  font-weight: 640;
}
ul,
ol {
  margin: 10px 0;
  padding-left: 22px;
}
li::marker {
  color: var(--tisty-faint);
}
li > p {
  margin: 2px 0;
}
li.task {
  list-style: none;
  position: relative;
}
.check {
  position: absolute;
  left: -23px;
  top: 0.32em;
}
.check,
.cm-check {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--tisty-faint);
  border-radius: 5px;
  box-sizing: border-box;
  background: transparent center / 12px 12px no-repeat;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.ticking .check {
  cursor: pointer;
}
.ticking .check:hover,
.cm-check:hover {
  border-color: var(--tisty-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tisty-accent) 18%, transparent);
}
.check[data-done="true"],
.cm-check[data-done="true"] {
  background-color: var(--tisty-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3.5 8.4l2.9 2.9 6.1-6.3%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  border-color: var(--tisty-accent);
}
li.task:has(> .check[data-done="true"]) {
  color: var(--tisty-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tisty-soft) 60%, transparent);
}
blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 2px solid var(--tisty-line);
  color: var(--tisty-soft);
}
blockquote.callout {
  --said: var(--tisty-hue-blue);
  border-left: 3px solid var(--said);
  background: color-mix(in srgb, var(--said) 7%, transparent);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  color: var(--tisty-ink);
}
blockquote.callout::before {
  content: attr(data-said);
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--said);
}
blockquote.callout > :first-child {
  margin-top: 0;
}
blockquote.callout > :last-child {
  margin-bottom: 0;
}
blockquote[data-callout="tip"] {
  --said: var(--tisty-hue-green);
}
blockquote[data-callout="important"] {
  --said: var(--tisty-hue-indigo);
}
blockquote[data-callout="warning"] {
  --said: var(--tisty-hue-amber);
}
blockquote[data-callout="caution"] {
  --said: var(--tisty-hue-red);
}
mark,
.cm-pen {
  background: var(--tisty-pen-yellow);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
.cm-under {
  text-decoration: underline;
}
.cm-ico {
  color: var(--tisty-soft);
}
mark[data-pen="red"],
.cm-pen-red {
  background: color-mix(in srgb, var(--tisty-hue-red) 28%, transparent);
}
mark[data-pen="orange"],
.cm-pen-orange {
  background: color-mix(in srgb, var(--tisty-hue-orange) 28%, transparent);
}
mark[data-pen="amber"],
.cm-pen-amber {
  background: color-mix(in srgb, var(--tisty-hue-amber) 28%, transparent);
}
mark[data-pen="green"],
.cm-pen-green {
  background: var(--tisty-pen-green);
}
mark[data-pen="teal"],
.cm-pen-teal {
  background: color-mix(in srgb, var(--tisty-hue-teal) 28%, transparent);
}
mark[data-pen="blue"],
.cm-pen-blue {
  background: var(--tisty-pen-blue);
}
mark[data-pen="indigo"],
.cm-pen-indigo {
  background: color-mix(in srgb, var(--tisty-hue-indigo) 28%, transparent);
}
mark[data-pen="purple"],
.cm-pen-purple {
  background: color-mix(in srgb, var(--tisty-hue-purple) 28%, transparent);
}
mark[data-pen="pink"],
.cm-pen-pink {
  background: var(--tisty-pen-pink);
}
mark[data-pen="brown"],
.cm-pen-brown {
  background: color-mix(in srgb, var(--tisty-hue-brown) 28%, transparent);
}
mark[data-pen="gray"],
.cm-pen-gray {
  background: color-mix(in srgb, var(--tisty-hue-gray) 28%, transparent);
}
code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--tisty-hover);
}
figure {
  margin: 12px 0;
}
figure.code {
  border: 1px solid var(--tisty-hair);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tisty-hover);
}
figure.code figcaption {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--tisty-soft);
  border-bottom: 1px solid var(--tisty-hair);
}
pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.55;
}
pre code {
  padding: 0;
  background: none;
  font-size: 1em;
}
figure.diagram,
figure.widget {
  text-align: center;
}
figure.diagram img {
  max-width: 100%;
  max-height: none;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
}
html:not(.dark) figure.diagram img.dark,
html.dark figure.diagram img.light {
  display: none;
}
figure.widget iframe {
  display: block;
  width: 100%;
  border: 0;
}
.widget-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  font-size: 11.5px;
  color: var(--tisty-faint);
  text-align: left;
}
.widget-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-bar button {
  border: 0;
  border-radius: 6px;
  padding: 2px 8px;
  background: transparent;
  color: var(--tisty-soft);
  font: inherit;
  cursor: pointer;
}
.widget-bar button:hover {
  background: var(--tisty-hover);
  color: var(--tisty-ink);
}
div.math {
  margin: 12px 0;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}
a {
  color: var(--tisty-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
a.card,
.ref {
  background: var(--tisty-mark-doc);
  color: var(--tisty-ink);
  border-radius: 4px;
  padding: 0 5px 0 3px;
  text-decoration: none;
}
a.card::before,
.ref::before {
  content: "▤";
  margin-right: 4px;
  font-size: 0.86em;
  color: var(--tisty-faint);
}
a.card:hover,
.ref:hover {
  background: var(--tisty-mark-doc-lit);
}
.doc-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding: 12px 14px;
  border: 1px solid var(--tisty-hair);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.doc-card:hover {
  background: var(--tisty-hover);
  border-color: var(--tisty-line);
}
.doc-card:focus-visible {
  outline: 2px solid var(--tisty-accent);
  outline-offset: 2px;
}
.card-tile {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--tisty-mark-doc);
  color: var(--tisty-soft);
}
.card-tile .glyph {
  width: 18px;
  height: 18px;
}
.card-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 620;
}
.card-blurb {
  grid-column: 2;
  min-height: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.86em;
  color: var(--tisty-faint);
}
.card-meta {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76em;
  color: var(--tisty-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.card-edit {
  border: 0;
  border-radius: 6px;
  padding: 2px 8px;
  background: transparent;
  color: var(--tisty-faint);
  font: inherit;
  cursor: pointer;
  opacity: 0;
}
.doc-card:hover .card-edit,
.card-edit:focus-visible {
  opacity: 1;
}
.card-edit:hover {
  background: var(--tisty-hover);
  color: var(--tisty-ink);
}
.card-go {
  font-size: 1.4em;
  line-height: 1;
}
.doc-card .chip {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tisty-accent-soft);
  color: var(--tisty-accent);
  font-weight: 550;
}
.doc-card .chip.here,
.doc-card .chip.away,
.doc-card .chip.gone {
  background: var(--tisty-hover);
}
.doc-card .chip.here {
  color: var(--tisty-soft);
}
.doc-card .chip.away {
  color: var(--tisty-hue-amber);
}
.doc-card .chip.gone {
  color: var(--tisty-hue-red);
}
.doc-card.is-web {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "tile name"
    "tile blurb"
    "tile meta";
  align-items: start;
  gap: 2px 12px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.doc-card.is-web .card-tile {
  grid-area: tile;
  grid-row: auto;
}
.doc-card.is-web .card-name {
  grid-area: name;
}
.doc-card.is-web .card-blurb {
  grid-area: blurb;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}
.doc-card.is-web .card-meta {
  grid-area: meta;
  justify-content: flex-start;
  margin-top: 2px;
}
.doc-card .card-blurb:empty {
  display: none;
}
.doc-card.is-web .card-tile {
  width: 32px;
  height: 32px;
}
.doc-card.is-web .card-go {
  margin-left: auto;
}
.doc-card.is-web .card-tile.is-letter {
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  color: var(--hue);
  font-weight: 650;
}
.doc-card.is-web.is-bare {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tile name meta";
  align-items: center;
  padding: 8px 12px;
}
.doc-card.is-web.is-bare .card-tile {
  width: 28px;
  height: 28px;
}
.doc-card.is-web.is-bare .card-meta {
  margin-top: 0;
}
.doc-card.is-web.is-bare .kind {
  display: none;
}
.doc-card.is-web.has-shot .card-blurb {
  -webkit-line-clamp: 1;
}
.doc-card.is-web.has-shot {
  grid-template-columns: minmax(0, 1fr) 152px;
  grid-template-areas:
    "name thumb"
    "blurb thumb"
    "meta thumb";
  padding: 0 0 0 14px;
  overflow: hidden;
}
.doc-card.is-web.has-shot .card-name {
  padding-top: 10px;
}
.doc-card.is-web.has-shot .card-meta {
  padding-bottom: 10px;
}
.card-thumb {
  grid-area: thumb;
  width: 152px;
  height: auto;
  min-height: 72px;
  align-self: stretch;
  contain: size;
  object-fit: cover;
  border-left: 1px solid var(--tisty-hair);
}
.doc-card.is-page .card-tile {
  background: var(--tisty-accent-soft);
  color: var(--tisty-accent);
}
.doc-card.is-away {
  opacity: 0.72;
}
.doc-card.is-self,
.doc-card.is-gone {
  border-style: dashed;
  cursor: default;
}
.doc-card.is-self:hover,
.doc-card.is-gone:hover {
  background: none;
  border-color: var(--tisty-hair);
}
.doc-card.is-gone .card-name {
  text-decoration: line-through;
  color: var(--tisty-faint);
}
.tag {
  background: var(--tisty-mark-tag);
  border-radius: 4px;
  padding: 0 2px;
}
/* The properties live in the panel beside the page; the block stays here only to be opened. */
.front {
  display: none;
}
.refdef {
  margin: 2px 0;
  font-size: 0.82em;
  color: var(--tisty-faint);
  overflow-wrap: anywhere;
}
.refdef-label {
  color: var(--tisty-soft);
  font-weight: 550;
}
.cm-front {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--tisty-soft);
}
.ico {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.18em;
  color: var(--tisty-soft);
}
.ico svg {
  width: 1.05em;
  height: 1.05em;
}
.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph .solid {
  fill: currentColor;
  stroke: none;
}
.ico-red {
  color: var(--tisty-hue-red);
}
.ico-orange {
  color: var(--tisty-hue-orange);
}
.ico-amber {
  color: var(--tisty-hue-amber);
}
.ico-green {
  color: var(--tisty-hue-green);
}
.ico-teal {
  color: var(--tisty-hue-teal);
}
.ico-blue {
  color: var(--tisty-hue-blue);
}
.ico-indigo {
  color: var(--tisty-hue-indigo);
}
.ico-purple {
  color: var(--tisty-hue-purple);
}
.ico-pink {
  color: var(--tisty-hue-pink);
}
.ico-brown {
  color: var(--tisty-hue-brown);
}
.ico-gray {
  color: var(--tisty-hue-gray);
}
img {
  display: block;
  margin: 16px auto;
  padding: 8px;
  max-width: 100%;
  max-height: 28rem;
  object-fit: contain;
  background: var(--tisty-rail);
  border: 1px solid var(--tisty-hair);
  border-radius: 12px;
  box-sizing: border-box;
}
table {
  margin: 14px 0;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
}
th,
td {
  border: 1px solid var(--tisty-line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
th {
  background: var(--tisty-hover);
  font-weight: 600;
}
hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--tisty-line);
}
.page > hr {
  position: relative;
  margin: 0 -40px;
  border: 0;
  height: 50px;
  background: var(--tisty-desk);
}
.page > hr::before,
.page > hr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--tisty-sheet);
}
.page > hr::before {
  top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 7px 7px -7px var(--tisty-cast);
}
.page > hr::after {
  bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -7px 7px -7px var(--tisty-cast);
}
.hljs-comment,
.hljs-quote {
  color: var(--tisty-faint);
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-name {
  color: var(--tisty-hue-purple);
}
.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: var(--tisty-hue-green);
}
.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: var(--tisty-hue-orange);
}
.hljs-title,
.hljs-section {
  color: var(--tisty-hue-blue);
}
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property {
  color: var(--tisty-hue-teal);
}
.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title {
  color: var(--tisty-hue-amber);
}
.hljs-deletion {
  color: var(--tisty-hue-red);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 600;
}
details {
  margin: 14px 0;
  border: 1px solid var(--tisty-hair);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tisty-hover) 45%, transparent);
  transition: background 0.15s;
}
details[open] {
  background: transparent;
}
summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.75px solid var(--tisty-soft);
  border-bottom: 1.75px solid var(--tisty-soft);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
details[open] > summary::before {
  transform: rotate(45deg) translate(-2px, -1px);
}
summary:hover {
  background: var(--tisty-hover);
}
details[open] > summary {
  border-bottom: 1px solid var(--tisty-hair);
  border-radius: 10px 10px 0 0;
}
details > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}
details > summary + * {
  margin-top: 12px;
}
details > :last-child:not(summary) {
  margin-bottom: 12px;
}
sup.fnref {
  line-height: 0;
}
sup.fnref a {
  padding: 0 1px;
  color: var(--tisty-accent);
  font-size: 0.75em;
  font-weight: 600;
  text-decoration: none;
}
.footnote {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  color: var(--tisty-soft);
  font-size: 0.9em;
}
.footnote > .fn-label {
  flex: none;
  min-width: 1.2em;
  font-weight: 600;
}
.footnote > p {
  margin: 0;
}
kbd {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  padding: 1px 5px;
  border: 1px solid var(--tisty-line);
  border-bottom-width: 2px;
  border-radius: 5px;
}
.lit-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  font-size: 12.5px;
  color: var(--tisty-soft);
}
.lit-locked b {
  color: var(--tisty-ink);
  font-weight: 600;
}
.lit-locked svg {
  width: 14px;
  height: 14px;
}
::selection {
  background: var(--tisty-accent-soft);
}

.cm-h1 {
  font-size: 1.65em;
  font-weight: 640;
  line-height: 1.25;
}
.cm-h2 {
  font-size: 1.3em;
  font-weight: 640;
}
.cm-h3 {
  font-size: 1.13em;
  font-weight: 640;
}
.cm-h4,
.cm-h5,
.cm-h6 {
  font-weight: 640;
}
.cm-quote {
  padding-left: 14px !important;
  border-left: 2px solid var(--tisty-line);
  color: var(--tisty-soft);
}
.cm-callout {
  --said: var(--tisty-hue-blue);
  padding-left: 14px !important;
  border-left: 3px solid var(--said);
  background: color-mix(in srgb, var(--said) 7%, transparent);
}
.cm-callout-tip {
  --said: var(--tisty-hue-green);
}
.cm-callout-important {
  --said: var(--tisty-hue-indigo);
}
.cm-callout-warning {
  --said: var(--tisty-hue-amber);
}
.cm-callout-caution {
  --said: var(--tisty-hue-red);
}
.cm-callout-said {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--said);
}
.cm-bullet {
  display: inline-block;
  width: 22px;
  color: var(--tisty-faint);
}
.cm-check {
  display: inline-block;
  margin: 0 9px 0 0;
  vertical-align: -2px;
  cursor: pointer;
}
.cm-done {
  color: var(--tisty-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tisty-soft) 60%, transparent);
}
.cm-link {
  color: var(--tisty-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cm-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.18em;
  color: var(--tisty-soft);
}
.cm-glyph svg,
.cm-bar-glyph svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cm-glyph svg .solid,
.cm-bar-glyph svg .solid {
  fill: currentColor;
  stroke: none;
}
.cm-bar {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 8px);
  left: -6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--tisty-hair);
  background: var(--tisty-rail);
  box-shadow: 0 10px 28px var(--tisty-cast);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.cm-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tisty-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cm-bar button:hover {
  background: var(--tisty-hover);
}
.cm-pending-strong {
  font-weight: 640;
}
.cm-pending-em {
  font-style: italic;
}
.cm-pending-struck {
  text-decoration: line-through;
}
.cm-pending-code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
}
.cm-fold-head,
.cm-fold-body,
.cm-fold-end {
  border-left: 1px solid var(--tisty-hair);
  border-right: 1px solid var(--tisty-hair);
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.cm-fold-head {
  border-top: 1px solid var(--tisty-hair);
  border-bottom: 1px solid var(--tisty-hair);
  border-radius: 10px 10px 0 0;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-weight: 600;
}
.cm-fold-end {
  border-bottom: 1px solid var(--tisty-hair);
  border-radius: 0 0 10px 10px;
  padding-bottom: 4px !important;
}
.cm-fold-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 12px 0 1px;
  vertical-align: 0.18em;
  border-right: 1.75px solid var(--tisty-soft);
  border-bottom: 1.75px solid var(--tisty-soft);
  transform: rotate(45deg);
}
.cm-fold-close {
  display: inline-block;
  height: 0.6em;
}
.cm-tag {
  background: var(--tisty-mark-tag);
  border-radius: 4px;
  padding: 0 2px;
}
.cm-bar-more {
  padding: 0 8px 0 4px;
}
.cm-bar-more kbd {
  padding: 0 5px;
  border: 1px solid var(--tisty-hair);
  border-radius: 4px;
  font:
    600 11.5px ui-monospace,
    "Cascadia Mono",
    "SF Mono",
    Menlo,
    monospace;
  color: var(--tisty-soft);
}
.cm-bar-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--tisty-hair);
}
.cm-bar-kinds {
  position: relative;
}
.cm-bar-caret {
  color: var(--tisty-faint);
  font-size: 10px;
}
.cm-bar-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--tisty-hair);
  background: var(--tisty-rail);
  box-shadow: 0 10px 28px var(--tisty-cast);
}
.cm-bar-menu[hidden] {
  display: none;
}
.cm-bar-menu .cm-bar-item {
  justify-content: flex-start;
  font-weight: 500;
}
.cm-bar-pen {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tisty-hue-amber);
}
.cm-bar-pen.cm-pen-green {
  background: var(--tisty-hue-green);
}
.cm-bar-pen.cm-pen-blue {
  background: var(--tisty-hue-blue);
}
.cm-bar-pen.cm-pen-pink {
  background: var(--tisty-hue-pink);
}
.cm-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--tisty-hair);
  font-size: 12px;
  line-height: 1.4;
  color: var(--tisty-faint);
}
.cm-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--tisty-hair);
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--tisty-soft);
}
.cm-hint-kept {
  margin-left: auto;
}
.cm-hint-kept.on {
  color: var(--tisty-hue-green);
}
.editing.titled .cm-bar {
  bottom: auto;
  top: calc(100% + 8px);
}
.cm-content img.cm-widgetBuffer {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 0;
  height: 1em;
}

/* The guide around the examples wears www.tisty.app's colours; the examples keep the app's own. */
:root {
  --tisty-bg: #faf8f4;
  --tisty-sheet: #ffffff;
  --tisty-panel: #ffffff;
  --tisty-rail: #f3f0ea;
  --tisty-desk: #f3f0ea;
  --tisty-ink: #141210;
  --tisty-soft: #423e38;
  --tisty-faint: #6e6860;
  --tisty-line: #e5e0d7;
  --tisty-hair: #ece7df;
  --tisty-hover: rgb(20 18 16 / 0.045);
  --tisty-accent: #a8460b;
  --tisty-accent-soft: #fdf0e6;
  --guide-flame: #f97c3d;
}
html.dark {
  color-scheme: dark;
  --tisty-bg: #0e0d0b;
  --tisty-sheet: #181614;
  --tisty-panel: #181614;
  --tisty-rail: #211f1c;
  --tisty-desk: #211f1c;
  --tisty-ink: #f6f3ee;
  --tisty-soft: #d0cac1;
  --tisty-faint: #988f87;
  --tisty-line: #302d29;
  --tisty-hair: #26231f;
  --tisty-hover: rgb(246 243 238 / 0.05);
  --tisty-accent: #fb9662;
  --tisty-accent-soft: #2e1c12;
}
html:not(.tall),
html:not(.tall) body {
  background: var(--tisty-bg);
  padding: 0;
}
html:not(.tall) .page {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.page > * {
  content-visibility: visible;
}
body {
  -webkit-font-smoothing: antialiased;
}

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 max(20px, calc((100% - 1200px) / 2 + 20px));
  border-bottom: 1px solid var(--tisty-hair);
  background: color-mix(in srgb, var(--tisty-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
}
.top a {
  text-decoration: none;
}
.top .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--tisty-ink);
}
.top .brand img {
  display: block;
  width: 34px;
  height: 32px;
  margin: 0;
  padding: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: none;
}
.top .out {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--guide-flame);
  font-size: 13.5px;
  font-weight: 600;
  color: #141210;
}
.top .out:hover {
  filter: brightness(1.08);
}
.top .lang {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--tisty-soft);
}
.top .lang:hover,
.top .theme:hover {
  background: var(--tisty-hover);
  color: var(--tisty-ink);
}
.top .theme {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tisty-soft);
  cursor: pointer;
}
html.js .top .theme {
  display: inline-grid;
  place-items: center;
}
.top .theme svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top .theme .sun,
html.dark .top .theme .moon {
  display: none;
}
html.dark .top .theme .sun {
  display: block;
}

.wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.topics {
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 28px 4px 40px 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.topics:hover {
  scrollbar-color: var(--tisty-line) transparent;
}
.topics ol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topics a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tisty-soft);
  text-decoration: none;
}
.topics a:hover {
  background: var(--tisty-hover);
  color: var(--tisty-ink);
}
.topics .subs {
  margin: 2px 0 6px 10px;
  padding-left: 8px;
  border-left: 1px solid var(--tisty-hair);
}
.topics .subs a {
  padding: 4px 8px;
  font-size: 12.5px;
  color: var(--tisty-faint);
}
.topics a[aria-current="page"] {
  background: var(--tisty-accent-soft);
  color: var(--tisty-accent);
  font-weight: 600;
}
main {
  min-width: 0;
  max-width: 780px;
  padding: 36px 0 96px;
}
main .page > h1:first-child,
main .page > h2:first-child {
  margin-top: 0;
}
.near {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
}
.near a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 48%;
  padding: 9px 16px;
  border: 1px solid var(--tisty-line);
  border-radius: 999px;
  background: var(--tisty-sheet);
  font-size: 14px;
  font-weight: 550;
  color: var(--tisty-ink);
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.near a span {
  color: var(--tisty-faint);
  transition: transform 0.15s;
}
.near a:hover {
  border-color: var(--guide-flame);
  color: var(--tisty-accent);
}
.near a[rel="prev"]:hover span {
  transform: translateX(-3px);
}
.near a[rel="next"]:hover span {
  transform: translateX(3px);
}
.near a[rel="next"] {
  margin-left: auto;
}

figure.example {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 26px;
  border: 1px solid var(--tisty-hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tisty-sheet);
}
figure.example > [data-said]::before {
  content: attr(data-said);
  display: block;
  margin: 0 0 10px;
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tisty-faint);
}
figure.example > .written {
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--tisty-hair);
  border-radius: 0;
  background: var(--tisty-rail);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
figure.example > .drawn {
  min-width: 0;
  padding: 16px 18px;
}
figure.example > .drawn > :first-child {
  margin-top: 0;
}
figure.example > .drawn > :last-child {
  margin-bottom: 0;
}
figure.example .drawn img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
figure.example .drawn .front {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--tisty-hair);
  border-radius: 10px;
  background: var(--tisty-panel);
  font-size: 0.9em;
}
figure.example .drawn .front > div {
  display: contents;
}
figure.example .drawn .front dt {
  color: var(--tisty-faint);
}
figure.example .drawn .front dd {
  margin: 0;
}
figure.example .drawn > hr {
  position: relative;
  margin: 0 -18px;
  border: 0;
  height: 50px;
  background: var(--tisty-desk);
}
figure.example .drawn > hr::before,
figure.example .drawn > hr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--tisty-sheet);
}
figure.example .drawn > hr::before {
  top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 7px 7px -7px var(--tisty-cast);
}
figure.example .drawn > hr::after {
  bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -7px 7px -7px var(--tisty-cast);
}
iframe.widget {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
}

@media (max-width: 860px) {
  .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .topics {
    position: static;
    max-height: none;
    padding: 16px 0 0;
  }
  .topics ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .topics a {
    padding: 5px 10px;
    border: 1px solid var(--tisty-hair);
    border-radius: 999px;
  }
  figure.example {
    grid-template-columns: minmax(0, 1fr);
  }
  figure.example > .written {
    border-right: 0;
    border-bottom: 1px solid var(--tisty-hair);
  }
  .top .lang {
    display: none;
  }
}

figure.example,figure.widget{
  --tisty-bg: #ffffff;
  --tisty-rail: #f6f6f8;
  --tisty-panel: #fbfbfd;
  --tisty-desk: #eceef1;
  --tisty-sheet: #ffffff;
  --tisty-cast: rgb(0 0 0 / 0.1);
  --tisty-ink: #1d1d1f;
  --tisty-soft: #57575c;
  --tisty-faint: #67676b;
  --tisty-line: rgb(0 0 0 / 0.16);
  --tisty-hair: rgb(0 0 0 / 0.09);
  --tisty-hover: rgb(0 0 0 / 0.035);
  --tisty-active: rgb(0 0 0 / 0.06);
  --tisty-accent: #0060e3;
  --tisty-accent-soft: rgb(0 96 227 / 0.08);
  --tisty-hue-red: #c62f45;
  --tisty-hue-orange: #b35c00;
  --tisty-hue-amber: #8a6a00;
  --tisty-hue-green: #3f8a24;
  --tisty-hue-teal: #0f7a68;
  --tisty-hue-blue: #1f6fb2;
  --tisty-hue-indigo: #4a58c4;
  --tisty-hue-purple: #7a44b8;
  --tisty-hue-pink: #b4408c;
  --tisty-hue-brown: #6e5a4a;
  --tisty-hue-gray: #6a6a70;
  --tisty-urgent: #c6292e;
  --tisty-high: #902800;
  --tisty-mark-date: rgb(10 124 255 / 0.15);
  --tisty-mark-deadline: rgb(214 118 40 / 0.18);
  --tisty-mark-list: rgb(22 163 124 / 0.17);
  --tisty-mark-tag: rgb(124 92 222 / 0.15);
  --tisty-mark-priority: rgb(229 72 77 / 0.14);
  --tisty-mark-repeat: rgb(214 51 160 / 0.15);
  --tisty-mark-step: rgb(0 150 190 / 0.16);
  --tisty-pen-yellow: rgb(250 204 21 / 0.32);
  --tisty-pen-green: rgb(34 197 94 / 0.26);
  --tisty-pen-blue: rgb(59 130 246 / 0.26);
  --tisty-pen-pink: rgb(236 72 153 / 0.24);
  --tisty-mark-doc: rgb(88 88 100 / 0.12);
  --tisty-mark-doc-lit: rgb(88 88 100 / 0.2);
  --tisty-veil: rgb(0 0 0 / 0.28);
  --tisty-docs-head: 30px;
  --tisty-lift: 0 4px 14px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.06);
  --tisty-lift-tall: 0 16px 44px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);
}
html.dark figure.example,html.dark figure.widget{
  --tisty-bg: #1c1c1e;
  --tisty-rail: #191919;
  --tisty-panel: #202022;
  --tisty-desk: #151516;
  --tisty-sheet: #232326;
  --tisty-cast: rgb(0 0 0 / 0.45);
  --tisty-ink: #f2f2f7;
  --tisty-soft: #adadb4;
  --tisty-faint: #9a9aa1;
  --tisty-line: rgb(255 255 255 / 0.2);
  --tisty-hair: rgb(255 255 255 / 0.12);
  --tisty-hover: rgb(255 255 255 / 0.045);
  --tisty-active: rgb(255 255 255 / 0.08);
  --tisty-accent: #439bff;
  --tisty-accent-soft: rgb(67 155 255 / 0.11);
  --tisty-hue-red: #ff7a8a;
  --tisty-hue-orange: #ff9d4d;
  --tisty-hue-amber: #d9b02e;
  --tisty-hue-green: #6fc44a;
  --tisty-hue-teal: #3fbfa6;
  --tisty-hue-blue: #58aef0;
  --tisty-hue-indigo: #8b95ff;
  --tisty-hue-purple: #b98cf0;
  --tisty-hue-pink: #f07ac0;
  --tisty-hue-brown: #b39c86;
  --tisty-hue-gray: #a0a0a8;
  --tisty-urgent: #ff6860;
  --tisty-high: #ffaa54;
  --tisty-mark-date: rgb(61 149 255 / 0.2);
  --tisty-mark-deadline: rgb(245 160 74 / 0.2);
  --tisty-mark-list: rgb(45 200 155 / 0.18);
  --tisty-mark-tag: rgb(160 130 255 / 0.2);
  --tisty-mark-priority: rgb(255 95 87 / 0.18);
  --tisty-mark-repeat: rgb(240 110 205 / 0.2);
  --tisty-mark-step: rgb(70 205 240 / 0.2);
  --tisty-pen-yellow: rgb(250 204 21 / 0.34);
  --tisty-pen-green: rgb(45 200 155 / 0.3);
  --tisty-pen-blue: rgb(67 155 255 / 0.32);
  --tisty-pen-pink: rgb(240 110 205 / 0.3);
  --tisty-mark-doc: rgb(205 205 220 / 0.13);
  --tisty-mark-doc-lit: rgb(205 205 220 / 0.22);
  --tisty-veil: rgb(0 0 0 / 0.55);
  --tisty-lift: 0 4px 14px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  --tisty-lift-tall: 0 16px 44px rgb(0 0 0 / 0.62), 0 2px 8px rgb(0 0 0 / 0.45);
}