* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  --color-pink: oklch(87.26% 0.1603 338.1);
  --half-leading: calc(0.5lh - 0.5em);
  scrollbar-gutter: stable;
}

body {
  margin-block: 2lh;
  margin-inline: auto;
  max-width: 48em;
  padding-inline: 0.5em;
  line-height: 1.5;
  font-family: "IBM Plex Mono", "IBM Plex Sans JP", sans-serif;
  font-weight: 300;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  accent-color: var(--color-pink);
}

h2,
h3,
h4 {
  margin-block-start: 2lh;
}

hr {
  margin-block: 2lh calc(2lh - 1px);
  width: 4em;
  border: 0;
  border-top: 1px solid;
  color: inherit;
}

p {
  text-align: justify;
  text-spacing-trim: trim-start;
}

pre {
  overflow-x: auto;
  padding-left: 2em;
}

ul {
  list-style-type: "";
}
:is(ul, ol) ul {
  list-style-type: "- ";
}
:is(ol, ul) :is(ol, ul) {
  padding-left: 2em;
}

a:where(:any-link) {
  margin-inline: -0.2em;
  background-color: var(--color-pink);
  mix-blend-mode: overlay;
  box-shadow: 0.0625em 0.0625em 0 currentcolor;
  padding-block: 0.1em;
  padding-inline: 0.2em;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:where(:has(img:only-child, svg:only-child)) {
  display: inline-block;
  vertical-align: bottom;
}
a:where(:active) {
  position: relative;
  left: 0.0625em;
  top: 0.0625em;
  box-shadow: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
  margin-block: var(--half-leading);
  vertical-align: bottom;
}
:where(a) > img,
:where(a) > svg {
  margin-block: 0;
}

::selection {
  background-color: var(--color-pink);
}

:where(.stack > * + *) {
  margin-block-start: var(--stack-gap, 1lh);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 1em);
}

.indent {
  text-indent: var(--indent-size, 2em);
}
.indent--reverse {
  padding-inline-start: var(--indent-size, 2em);
  text-indent: var(--indent-size, -2em);
}

.tsmd__link {
  margin-block: var(--half-leading);
  margin-inline: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  -webkit-tap-highlight-color: revert;
}
.tsmd__link:hover {
  position: static;
  background-color: var(--color-pink);
}
.tsmd__link:active {
  position: static;
}
.tsmd__logo {
  width: auto;
  height: calc(3lh - var(--half-leading) * 2);
}