figure {
  margin: 0;
  padding: 0;
}

.hyperbook-markdown {
  background: var(--color-background);
  color: var(--color-text);
  font-family: hyperbook-body, sans-serif;
}

.hyperbook-markdown a {
  color: var(--color-brand);
}

.hyperbook-markdown hr {
  clear: both;
  border: none;
}

/**
 * IE 8–11 and Prince don’t recognize the `wbr` element,
 * but a pseudo-element can achieve the same effect with IE 9+ and Prince.
 */
.hyperbook-markdown wbr:before {
  /* Unicode zero width space */
  content: "\200B";
  white-space: normal;
}

.hyperbook-markdown img {
  max-width: 100%;
}

img.emoji {
  height: 1em;
  width: 1em;
  min-width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
  max-width: none;
}

.hyperbook-markdown figure.align-left {
  display: table;
  float: left;
  margin-right: 1.75rem;
}

.hyperbook-markdown figure.align-right {
  display: table;
  float: right;
  margin-left: 1.75rem;
}

.hyperbook-markdown figure.align-rightplus {
  display: table;
  float: right;
  margin-left: 1.75rem;
  margin-right: -1.5rem;
}

.hyperbook-markdown figure.align-leftplus {
  display: table;
  float: left;
  margin-right: 1.75rem;
  margin-left: -1.5rem;
}

.hyperbook-markdown figure.align-centerplus {
  display: grid;
  justify-items: center;
  clear: both;
  margin-left: -1.5rem;
  margin-right: -1.5rem;

  img {
    width: 100%;
  }
}

/* The book's prose styling stops at the edge of an embedded bitflow flow.

   bitflow renders into the light DOM, so a bare-element book rule —
   `.hyperbook-markdown table`, `p`, `ul`/`ol`, `li`, `h1`–`h6`, `blockquote`,
   `pre`, `details` — reaches every truth table, heading, list and paragraph
   bitflow draws with the same elements, and at higher specificity than
   bitflow's own class selectors it wins: `.hyperbook-markdown table` at
   (0,1,1) outranks `.bitflow-truth-table` at (0,1,0), turning a table into
   `display: block; width: max-content`; `.hyperbook-markdown h1` does the
   same to `.bitflow-heading`, adding a `margin-bottom` and `display: flex`
   bitflow never asked for. Excluding the subtree hands each of those back to
   the stylesheet that knows what it is, rather than trying to restate
   bitflow's values here, where they would drift.

   The table exclusion below predates the rest and is left as a plain
   `:not(.directive-bitflow *)`, which adds the excluded class's own
   specificity — (0,1,0) — to every rule that carries it. Every exclusion
   added after it is wrapped in `:where()` instead: `:where()` always
   contributes zero specificity, so `p:where(:not(.directive-bitflow *))`
   still competes at exactly the unmodified `p` rule's own specificity. That
   matters because another directive may already be overriding one of these
   book rules for its own elements — a `blockquote` inside `.directive-alert`,
   say — by out-specifying it modestly; raising the book rule's specificity
   here, as the plain form does, could flip which one wins there. `:where()`
   keeps that contest exactly as it was for every element outside bitflow,
   changing only what happens inside it. */
.hyperbook-markdown table:not(.directive-bitflow *) {
  border-color: var(--color-spacer);
}

.hyperbook-markdown table:not(.directive-bitflow *) tr {
  background-color: var(--color-nav);
  border-color: var(--color-spacer);
}

.hyperbook-markdown h2:where(:not(.directive-bitflow *)) {
  border-bottom-color: var(--color-spacer);
}

.hyperbook-markdown ul.bookmarks li {
  border-color: var(--color-spacer);
}

.hyperbook-markdown ul.bookmarks li:hover {
  background: var(--color-nav);
}

.hyperbook-markdown ul.bookmarks li:last-of-type {
  border-color: var(--color-spacer);
}

.hyperbook-markdown figure.normal {
  display: grid;
  clear: both;
  justify-items: center;
  align-content: center;
  margin-top: 0;
  margin-bottom: var(--element-gap);
}

.hyperbook-markdown figure.normal img {
  display: inline-block;
  cursor: zoom-in;
}

.hyperbook-markdown figure.normal figcaption {
  font-style: italic;
  font-size: 0.875rem;
  max-width: 400px;
  margin: 0 auto;
}

.hyperbook-markdown a.heading {
  position: relative;
  text-decoration: none;
  padding-left: 16px;
  margin-left: -16px;
}

.hyperbook-markdown a.heading:hover::before {
  position: absolute;
  content: "📎";
  font-size: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

.hyperbook-markdown .inline {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  border-width: 1px;
  border-style: solid;
  background: var(--color-nav) !important;
  border-color: var(--color-spacer);
  font-family: hyperbook-code, monospace;
  padding: 0em 0.4em 0em 0em;
  border-radius: 6px;
}

.hyperbook-markdown ul:where(:not(.directive-bitflow *)),
.hyperbook-markdown ol:where(:not(.directive-bitflow *)) {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

.hyperbook-markdown ol:where(:not(.directive-bitflow *)) ol,
.hyperbook-markdown ul:where(:not(.directive-bitflow *)) ol {
  list-style-type: lower-roman;
}

.hyperbook-markdown ul:where(:not(.directive-bitflow *)) ul ol,
.hyperbook-markdown ul:where(:not(.directive-bitflow *)) ol ol,
.hyperbook-markdown ol:where(:not(.directive-bitflow *)) ul ol,
.hyperbook-markdown ol:where(:not(.directive-bitflow *)) ol ol {
  list-style-type: lower-alpha;
}

.hyperbook-markdown ul:where(:not(.directive-bitflow *)) ul,
.hyperbook-markdown ul:where(:not(.directive-bitflow *)) ol,
.hyperbook-markdown ol:where(:not(.directive-bitflow *)) ol,
.hyperbook-markdown ol:where(:not(.directive-bitflow *)) ul {
  margin-top: 0;
  margin-bottom: 0;
}

.hyperbook-markdown li:where(:not(.directive-bitflow *))+li {
  margin-top: 0.25em;
}

.hyperbook-markdown li:where(:not(.directive-bitflow *))>p {
  margin: 0;
}

.hyperbook-markdown .contains-task-list {
  list-style: none;
}

.hyperbook-markdown .task-list-item {
  list-style: none;
}

.hyperbook-markdown .task-list-item > input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  margin: 0 0.5em 0 -1.6em;
  vertical-align: -0.12em;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.hyperbook-markdown .task-list-item.completed {
  color: var(--color-text-deactivated);
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
}

.hyperbook-markdown p:where(:not(.directive-bitflow *)),
.hyperbook-markdown blockquote:where(:not(.directive-bitflow *)),
.hyperbook-markdown ol:where(:not(.directive-bitflow *)),
.hyperbook-markdown ul:where(:not(.directive-bitflow *)),
.hyperbook-markdown table:not(.directive-bitflow *),
.hyperbook-markdown pre:where(:not(.directive-bitflow *)),
.hyperbook-markdown details:where(:not(.directive-bitflow *)) {
  margin-top: 0;
  margin-bottom: var(--element-gap);
}

.hyperbook-markdown figure[data-rehype-pretty-code-figure] {
  margin-top: 0;
  margin-bottom: var(--element-gap);
}

.hyperbook-markdown [class^="directive-"],
.hyperbook-markdown [class*=" directive-"] {
  margin-top: 0;
  margin-bottom: var(--element-gap);
}

.hyperbook-markdown blockquote:where(:not(.directive-bitflow *)) {
  width: 90%;
  margin: 0 auto var(--element-gap) auto;
  font-style: italic;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid var(--color-brand);
  line-height: 1.5;
  position: relative;
  background: var(--color-nav);
}

.hyperbook-markdown blockquote:where(:not(.directive-bitflow *))::before {
  content: "\201C";
  color: var(--color-brand);
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

.hyperbook-markdown blockquote:where(:not(.directive-bitflow *))::after {
  content: "";
}

.hyperbook-markdown blockquote:where(:not(.directive-bitflow *)) p:last-child {
  margin-bottom: 0;
}

.hyperbook-markdown table:not(.directive-bitflow *) {
  display: block;
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}

.hyperbook-markdown table:not(.directive-bitflow *) caption {
  font-size: 1.5em;
  margin: 0.5em 0 0.75em;
}

.hyperbook-markdown table:not(.directive-bitflow *) tr {
  border-width: 1px;
  border-style: solid;
  padding: 0.35em;
}

.hyperbook-markdown table:not(.directive-bitflow *) th,
.hyperbook-markdown table:not(.directive-bitflow *) td {
  padding: 0.625em;
}

.hyperbook-markdown table:not(.directive-bitflow *) th {
  font-size: 0.85em;
  letter-spacing: 0.1em;
}

.hyperbook-markdown h1:where(:not(.directive-bitflow *)),
.hyperbook-markdown h2:where(:not(.directive-bitflow *)),
.hyperbook-markdown h3:where(:not(.directive-bitflow *)),
.hyperbook-markdown h4:where(:not(.directive-bitflow *)),
.hyperbook-markdown h5:where(:not(.directive-bitflow *)),
.hyperbook-markdown h6:where(:not(.directive-bitflow *)) {
  clear: both;
  font-family: hyperbook-heading, sans-serif;
  margin-top: 0;
  margin-bottom: var(--element-gap);
  font-weight: 600;
  line-height: 1.25;
}

.hyperbook-markdown h1:where(:not(.directive-bitflow *)) {
  font-size: 1.75em;
  font-weight: 700;
}

.hyperbook-markdown h2:where(:not(.directive-bitflow *)) {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.hyperbook-markdown h3:where(:not(.directive-bitflow *)) {
  font-weight: 600;
  font-size: 1.25em;
}

.hyperbook-markdown h4:where(:not(.directive-bitflow *)) {
  font-weight: 600;
  font-size: 1em;
}

.hyperbook-markdown h5:where(:not(.directive-bitflow *)) {
  font-weight: 600;
  font-size: 0.875em;
}

.hyperbook-markdown h6:where(:not(.directive-bitflow *)) {
  font-weight: 600;
  font-size: 0.85em;
}

.hyperbook-markdown p:where(:not(.directive-bitflow *)) {
  margin-top: 0;
  margin-bottom: var(--element-gap);
}

/* Bitflow draws its own heading and label elements as flex rows to align an
   icon beside the text; this rule would impose the same on
   `.bitflow-heading`/`.bitflow-label`, which centre their text differently
   and do not expect flex layout at all. */
.hyperbook-markdown h1:where(:not(.directive-bitflow *)),
.hyperbook-markdown h2:where(:not(.directive-bitflow *)),
.hyperbook-markdown h3:where(:not(.directive-bitflow *)),
.hyperbook-markdown h4:where(:not(.directive-bitflow *)),
.hyperbook-markdown h5:where(:not(.directive-bitflow *)),
.hyperbook-markdown h6:where(:not(.directive-bitflow *)) {
  display: flex;
  align-items: center;
}

/* The bookmark icon is drawn from the stylesheet, so it looks the same on
   every platform and takes the color of its heading. */
:root {
  --bookmark-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>');
  --bookmark-icon-active: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>');
}

.hyperbook-markdown .bookmark {
  margin-left: 10px;
  border: none;
  padding: 0;
  /* The heading text is a link, and the button is its sibling, so inheriting
     would pick up the color of the h1 rather than the color the heading
     appears in. Take the same color the heading link takes. */
  color: var(--color-brand);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: 1rem;
  opacity: 0.5;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--bookmark-icon);
}

.hyperbook-markdown .bookmark:hover {
  opacity: 1;
}

.hyperbook-markdown .bookmark.active {
  opacity: 1;
  mask-image: var(--bookmark-icon-active);
}

.hyperbook-markdown ul.bookmarks {
  padding-left: 0;
}

.hyperbook-markdown ul.bookmarks li {
  list-style-type: none;
}

.hyperbook-markdown #toc-toggle>.bar1,
.hyperbook-markdown #toc-toggle>.bar2,
.hyperbook-markdown #toc-toggle>.bar3,
.hyperbook-markdown #toc-toggle>.bar4 {
  background-color: var(--color-text);
}

.hyperbook-markdown #toc-toggle,
.hyperbook-markdown #qrcode-open {
  background: var(--color-background);
  border-color: var(--color-nav-border);
  cursor: pointer;
}

#search-toggle {
  background-color: var(--color-brand-text);
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-right: 16px;
  mask-repeat: no-repeat;
  cursor: pointer;
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==");
}

#search-drawer {
  overflow-y: auto;
  background: var(--color-nav);
}

#search-drawer .search-input {
  display: flex;
  margin-top: 16px;
  margin-bottom: 16px;
  gap: 8px;
  border: 1px solid var(--color-nav-border);
  background-color: var(--color-nav);
  padding: 8px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}

#search-drawer .search-input .search-icon {
  background-color: var(--color-text);
  width: 24px;
  height: 24px;
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==");
  mask-repeat: no-repeat;
}

#search-drawer .search-input input {
  flex: 1;
  background: none;
  color: var(--color-text);
  border: none;
  width: 100%;
}

#search-drawer .search-input .search-button {
  background-color: var(--color-text);
  width: 24px;
  height: 24px;
  cursor: pointer;
  mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCIgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iNSIgeDI9IjE5IiB5MT0iMTIiIHkyPSIxMiIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDUgMTkgMTIgMTIgMTkiLz48L3N2Zz4=");
}

#search-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#search-results .search-result {
  display: flex;
  gap: 4px;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  font-size: 1rem;
  border-radius: 8px;
  border-color: var(--color-nav-border);
  border-style: solid;
  border-width: 1px;
  padding: 8px;
}

#search-results .search-result-heading {
  font-size: 1.2rem;
  font-weight: 500;
}

#search-results .search-result-content {
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

#search-results .search-result-href {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  font-size: 0.8rem;
  font-weight: 500;
}

.search-drawer-content {
  display: flex;
  flex-direction: column;
  padding: 8px;
  height: 100%;
  overflow-y: auto;
  gap: 8px;
}

#toc-drawer {
  overflow-y: auto;
  background: var(--color-nav);
}

.toc-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.toc-drawer-content>nav {
  padding: 20px;
  flex: 1;
}

.toc-drawer-content>nav li a {
  display: block;
}

.toc-drawer-content>nav li a:hover {
  text-decoration: underline;
}

#qrcode-dialog {
  background: var(--color-background);
  border: 1px solid var(--color-brand);
  width: 100%;
  height: 100%;
}

#qrcode-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#qrcode-dialog .container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#qrcode-dialog .name {
  color: var(--color-text);
  text-align: center;
  font-size: 2rem;
}

#qrcode-dialog .url {
  color: var(--color-text);
  text-align: center;
  font-size: 1.25rem;
}

#qrcode-dialog .close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-text);
  cursor: pointer;
  position: absolute;
  font: monospace;
  top: 0px;
  right: 0px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#qrcode-dialog .close:hover .close-icon {
  background-color: var(--color-brand);
}

#qrcode-dialog .make-qrcode {
  width: 100%;
  max-width: 512px;
  margin: 0 auto;
}

#qrcode-dialog svg {
  width: 100%;
}

#qrcode-dialog .close .close-icon {
  background-color: var(--color-text);
  width: 32px;
  height: 32px;
  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"/></svg>');
}

.hyperbook-markdown .qrcode-icon {
  background-color: var(--color-text);
  width: 32px;
  height: 32px;
  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 9h6V3H3zm1-5h4v4H4zm1 1h2v2H5zm10 4h6V3h-6zm1-5h4v4h-4zm1 1h2v2h-2zM3 21h6v-6H3zm1-5h4v4H4zm1 1h2v2H5zm15 2h1v2h-2v-3h1zm0-3h1v1h-1zm0-1v1h-1v-1zm-10 2h1v4h-1v-4zm-4-7v2H4v-1H3v-1h3zm4-3h1v1h-1zm3-3v2h-1V3h2v1zm-3 0h1v1h-1zm10 8h1v2h-2v-1h1zm-1-2v1h-2v2h-2v-1h1v-2h3zm-7 4h-1v-1h-1v-1h2v2zm6 2h1v1h-1zm2-5v1h-1v-1zm-9 3v1h-1v-1zm6 5h1v2h-2v-2zm-3 0h1v1h-1v1h-2v-1h1v-1zm0-1v-1h2v1zm0-5h1v3h-1v1h-1v1h-1v-2h-1v-1h3v-1h-1v-1zm-9 0v1H4v-1zm12 4h-1v-1h1zm1-2h-2v-1h2zM8 10h1v1H8v1h1v2H8v-1H7v1H6v-2h1v-2zm3 0V8h3v3h-2v-1h1V9h-1v1zm0-4h1v1h-1zm-1 4h1v1h-1zm3-3V6h1v1z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
}

.floating-buttons-container {
  position: fixed;
  top: 90px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

#toc-toggle,
#qrcode-open {
  padding: 4px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  border-style: solid;
  border-width: 1px;
  opacity: 0.7;
}

.hyperbook-markdown #toc-toggle:hover,
.hyperbook-markdown #qrcode-open:hover {
  opacity: 1;
}

.hyperbook-markdown #toc-toggle>.bar1,
.hyperbook-markdown #toc-toggle>.bar3 {
  width: 20px;
  height: 2px;
  margin: 2px 3px;
  transition: 0.4s;
}

.hyperbook-markdown #toc-toggle>.bar2,
.hyperbook-markdown #toc-toggle>.bar4 {
  width: 25px;
  height: 2px;
  margin: 2px 3px;
  transition: 0.4s;
}

/* Share button and dialog styles */
#share-button {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 16px;
  padding: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#share-button:hover {
  opacity: 0.8;
}

.share-icon {
  background-color: var(--color-brand-text);
  width: 24px;
  height: 24px;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

header.inverted .share-icon {
  background-color: var(--color-brand);
}

#share-dialog {
  background: var(--color-background);
  border: 1px solid var(--color-brand);
  max-width: 600px;
  max-height: 80vh;
  padding: 0;
  color: var(--color-text);
}

#share-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#share-dialog .container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(80vh - 48px);
  overflow-y: auto;
}

#share-dialog .title {
  color: var(--color-text);
  font-size: 1.5rem;
  margin: 0;
}

#share-dialog .standalone-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 8px;
  background: var(--color-nav);
  border-radius: 4px;
}

#share-dialog .sections-title {
  color: var(--color-text);
  font-size: 1.1rem;
  margin: 8px 0 4px 0;
}

#share-dialog .sections-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-spacer);
  border-radius: 4px;
  padding: 8px;
}

#share-dialog .heading-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

#share-dialog .heading-item:hover {
  background: var(--color-nav);
}

#share-dialog .heading-item.level-1 {
  font-weight: bold;
  padding-left: 8px;
}

#share-dialog .heading-item.level-2 {
  padding-left: 24px;
}

#share-dialog .heading-item.level-3 {
  padding-left: 40px;
  font-size: 0.95rem;
}

#share-dialog .heading-item.level-4 {
  padding-left: 56px;
  font-size: 0.9rem;
}

#share-dialog .heading-item.level-5 {
  padding-left: 72px;
  font-size: 0.85rem;
}

#share-dialog .heading-item.level-6 {
  padding-left: 88px;
  font-size: 0.8rem;
}

#share-dialog .url-preview {
  background: var(--color-nav);
  color: var(--color-text);
  padding: 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  word-break: break-all;
  min-height: 40px;
}

#share-dialog .copy-button {
  background: var(--color-brand);
  color: var(--color-brand-text);
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: opacity 0.2s;
}

#share-dialog .copy-button:hover {
  opacity: 0.9;
}

#share-dialog .close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-text);
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#share-dialog .close:hover .close-icon {
  background-color: var(--color-brand);
}

#share-dialog .close .close-icon {
  background-color: var(--color-text);
  width: 32px;
  height: 32px;
  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"/></svg>');
}