:root {
  /* Colors */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: oklch(57% 0.19 260);
  --lexxy-color-accent-medium: oklch(66% 0.196 258);
  --lexxy-color-accent-lightest: oklch(92% 0.026 254);

  --lexxy-color-red: oklch(60% 0.15 27);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: oklch(66% 0.196 258);
  --lexxy-color-purple: oklch(60% 0.15 305);

  --lexxy-color-code-token-att: #d73a49;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #6f42c1;
  --lexxy-color-code-token-operator: #d73a49;
  --lexxy-color-code-token-property: #005cc5;
  --lexxy-color-code-token-punctuation: #24292e;
  --lexxy-color-code-token-selector: #22863a;
  --lexxy-color-code-token-variable: #e36209;

  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-dark: var(--lexxy-color-blue-medium);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  --lexxy-text-small: 0.875rem;
  /* --lexxy-content-margin: 1rem; */
  --lexxy-content-margin: 0.75rem;
  --lexxy-title-margin: 0.75rem;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: 2px;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-radius: 0.5ch;
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --lexxy-z-popup: 1000;
}

/* Text styles
/* -------------------------------------------------------------------------- */

:where(.lexxy-content), :where(.lexxy-editor__content) {
  color: var(--lexxy-color-ink);
}

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h1,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h2,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h3,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h4,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h5,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h6 {
    display: block;
    font-weight: bold;
    hyphens: auto;
    margin-block: 0 var(--lexxy-title-margin);
    overflow-wrap: break-word;
    text-wrap: balance;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h1 { font-size: 2rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h2 { font-size: 1.5rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h3 { font-size: 1.25rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h4 { font-size: 1rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h5 { font-size: 0.875rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) h6 { font-size: 0.75rem; }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) p,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ul,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ol,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) dl,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) blockquote,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) figure,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .attachment {
    margin-block: 0 var(--lexxy-content-margin);
  }

:is(:is(:where(.lexxy-content),:where(.lexxy-editor__content)) p,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ul,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ol,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) dl,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) blockquote,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) figure,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .attachment):not(lexxy-editor :is(:is(:where(.lexxy-content),:where(.lexxy-editor__content)) p,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ul,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) ol,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) dl,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) blockquote,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) figure,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .attachment)) {
      overflow-wrap: break-word;
      text-wrap: pretty;
    }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .lexxy-content__italic {
    font-style: italic;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .lexxy-content__bold {
    font-weight: bold;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .lexxy-content__underline {
    text-decoration: underline;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) blockquote {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    margin: var(--lexxy-content-margin) 0;
    padding: 0.5lh 2ch;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) p:empty {
    display: none;
  }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) img,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) video,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) embed,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) object {
    inline-size: auto;
    margin-inline: auto;
    max-block-size: 32rem;
    object-fit: contain;
  }

a:has(:is(:is(:where(.lexxy-content),:where(.lexxy-editor__content)) img,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) video,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) embed,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) object)) {
      display: inline-block;
    }

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) code,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) pre {
    background-color: var(--lexxy-color-ink-lightest);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-mono);
    font-size: 0.9em;
    padding: 0.25ch 0.5ch;
  }

:is(:is(:where(.lexxy-content),:where(.lexxy-editor__content)) code,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) pre):is(pre),[data-language]:is(:is(:where(.lexxy-content),:where(.lexxy-editor__content)) code,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) pre) {
      border-radius: var(--lexxy-radius);
      display: block;
      hyphens: none;
      margin-block: 0 var(--lexxy-content-margin);
      overflow-x: auto;
      padding: 1ch;
      tab-size: 2;
      text-wrap: nowrap;
      white-space: pre;
      word-break: break-word;
    }

:is(:where(.lexxy-content),:where(.lexxy-editor__content))  > :last-child {
    margin-block-end: 0;
  }

/* Keywords and attributes */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__attr,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.atrule,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.attr,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.keyword {
    color: var(--lexxy-color-code-token-att);
  }

/* Constants, booleans, numbers, properties, tags */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__property,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.boolean,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.constant,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.deleted,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.number,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.property,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.symbol,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.tag {
    color: var(--lexxy-color-code-token-property);
  }

/* Strings, selectors, and built-in constructs */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__selector,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.builtin,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.char,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.inserted,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.selector,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.string {
    color: var(--lexxy-color-code-token-selector);
  }

/* Comments and meta information */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__comment,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.cdata,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.comment,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.doctype,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.prolog {
    color: var(--lexxy-color-code-token-comment);
    font-style: italic;
  }

/* Operators and symbolic entities */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__operator,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.entity,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.operator,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.url {
    color: var(--lexxy-color-code-token-operator);
  }

/* Functions and class names */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__function,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.class,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.class-name,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.function {
    color: var(--lexxy-color-code-token-function);
  }

/* Variables, regex, namespaces, important */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__variable,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.important,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.namespace,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.regex,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.variable {
    color: var(--lexxy-color-code-token-variable);
  }

/* Punctuation */

:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .code-token__punctuation,:is(:where(.lexxy-content),:where(.lexxy-editor__content)) .token.punctuation {
    color: var(--lexxy-color-code-token-punctuation);
  }

:where([data-lexical-cursor]) {
  animation: blink 1s step-end infinite;
  block-size: 1lh;
  border-inline-start: 1px solid currentColor;
  line-height: inherit;
  margin-block: 1em;
}

/* Attachments
/* ------------------------------------------------------------------------ */

:where(.attachment) {
  block-size: auto;
  display: block;
  inline-size: fit-content;
  position: relative;
  margin-inline: auto;
  max-inline-size: 100%;
  text-align: center;
}

:where(.attachment) :where(progress) {
    inline-size: 100%;
    margin: auto;
  }

:where(.attachment__caption) {
  color: var(--lexxy-color-text-subtle);
  font-size: var(--lexxy-text-small);
}

:where(.attachment__caption) input {
    color: inherit;
    border: none;
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: center;
  }

:is(:where(.attachment__caption) input):focus {
      outline: none;
    }

@supports (field-sizing: content) {

:where(.attachment__caption) input {
      field-sizing: content;
      inline-size: auto;
      min-inline-size: 20ch;
  }
    }

:where(.attachment__icon) {
  aspect-ratio: 4/5;
  background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
  block-size: 3lh;
  border: 2px solid var(--lexxy-attachment-icon-color);
  border-block-start-width: 1ch;
  border-radius: var(--lexxy-radius);
  box-sizing: border-box;
  color: var(--lexxy-attachment-icon-color);
  display: grid;
  font-size: var(--lexxy-text-small);
  font-weight: bold;
  inline-size: auto;
  place-content: center;
  text-transform: uppercase;
}

:where(.attachment--preview) {
  border-radius: var(--lexxy-radius);
}

:where(.attachment--preview) img,:where(.attachment--preview) video {
    block-size: auto;
    display: block;
    margin-inline: auto;
    max-inline-size: 100%;
    user-select: none;
  }

:where(.attachment--preview)  > a {
    display: block;
  }

:where(.attachment--preview) .attachment__caption {
    margin-block-start: 1ch;
  }

:where(.attachment--file) {
  --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  inline-size: auto;
}

:where(.attachment--file) .attachment__caption {
    display: grid;
    flex: 1;
    text-align: start;
  }

:where(.attachment--file) .attachment__name {
    color: var(--lexxy-color-ink);
    font-weight: bold;
  }

:where(
  .attachment--psd,
  .attachment--key,
  .attachment--sketch,
  .attachment--ai,
  .attachment--eps,
  .attachment--indd,
  .attachment--svg,
  .attachment--ppt,
  .attachment--pptx
) {
  --lexxy-attachment-icon-color: var(--lexxy-color-red);
}

:where(
  .attachment--css,
  .attachment--php,
  .attachment--json,
  .attachment--htm,
  .attachment--html,
  .attachment--rb,
  .attachment--erb,
  .attachment--ts,
  .attachment--js
) {
  --lexxy-attachment-icon-color: var(--lexxy-color-purple);
}

:where(
  .attachment--txt,
  .attachment--pages,
  .attachment--rtf,
  .attachment--md,
  .attachment--doc,
  .attachment--docx
) {
  --lexxy-attachment-icon-color: var(--lexxy-color-blue);
}

:where(
  .attachment--csv,
  .attachment--numbers,
  .attachment--xls,
  .attachment--xlsx
) {
  --lexxy-attachment-icon-color: var(--lexxy-color-green);
}

/* Custom attachments such as mentions, etc. */

:where(action-text-attachment[content-type^="application/vnd.actiontext"]) {
  --lexxy-attachment-bg-color: transparent;
  --lexxy-attachment-image-size: 1em;
  --lexxy-attachment-text-color: currentColor;

  align-items: center;
  background: var(--lexxy-attachment-bg-color);
  border-radius: var(--lexxy-radius);
  box-shadow: -0.25ch 0 0 var(--lexxy-attachment-bg-color), 0.5ch 0 0 var(--lexxy-attachment-bg-color);
  color: var(--lexxy-attachment-text-color);
  display: inline-flex;
  gap: 0.25ch;
  margin: 0;
  padding: 0;
  position: relative;
  white-space: normal;
}

:where(action-text-attachment[content-type^="application/vnd.actiontext"]) img {
    block-size: var(--lexxy-attachment-image-size);
    border-radius: 50%;
    inline-size: var(--lexxy-attachment-image-size);
  }

.node--selected:where(action-text-attachment[content-type^="application/vnd.actiontext"]) {
    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
  }

:where(lexxy-editor) {
  --lexxy-editor-padding: 1ch;
  --lexxy-editor-rows: 8lh;
}

@supports (min-block-size: attr(rows lh)) {

:where(lexxy-editor) {
    --lexxy-editor-rows: attr(rows lh, 8lh);
}
  }

:where(lexxy-editor) {

  --lexxy-toolbar-gap: 2px;

  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  display: block;
  overflow: visible;
  position: relative;
  transition: opacity 150ms;
}

:where(lexxy-editor) input,:where(lexxy-editor) button {
    outline-color: var(--lexxy-focus-ring-color);
  }

:is(:where(lexxy-editor) input,:where(lexxy-editor) button):focus-visible {
      outline-color: var(--lexxy-focus-ring-color);
    }

:where(lexxy-editor) button,:where(lexxy-editor) summary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lexxy-color-canvas);
    border: none;
    border-radius: var(--lexxy-radius);
    cursor: pointer;
    font-size: inherit;
    inline-size: auto;
  }

@media(any-hover: hover) {
      :is(:where(lexxy-editor) button,:where(lexxy-editor) summary):hover {
        filter: brightness(0.9);
      }
    }

:is(:where(lexxy-editor) .node--selected):has(img) img,:is(:where(lexxy-editor) .node--selected):not(:has(img)) {
      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
      outline-offset: var(--lexxy-focus-ring-offset);
    }

:where(lexxy-editor) action-text-attachment {
    cursor: pointer;
  }

/* Placeholder */

:where(.lexxy-editor--empty) .lexxy-editor__content:not(:has(ul,ol))::before {
    content: attr(placeholder);
    color: currentColor;
    cursor: text;
    opacity: 0.66;
    pointer-events: none;
    position: absolute;
    white-space: pre-line;
  }

:where(.lexxy-editor__content) {
  min-block-size: var(--lexxy-editor-rows);
  outline: 0;
  padding: var(--lexxy-editor-padding);
}

:where(.lexxy-editor--drag-over) {
  background-color: var(--lexxy-color-selected);
  border-radius: var(--lexxy-radius);
  outline: 2px dashed var(--lexxy-color-selected-dark);
}

/* Toolbar
/* -------------------------------------------------------------------------- */

:where(lexxy-toolbar) {
  --lexxy-toolbar-icon-size: 1em;

  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
  color: currentColor;
  display: flex;
  font-size: inherit;
  gap: var(--lexxy-toolbar-gap);
  max-inline-size: 100%;
  padding: 2px;
  position: relative;
}

:where(.lexxy-editor__toolbar-button) {
  aspect-ratio: 1;
  block-size: 2lh;
  color: currentColor;
  display: grid;
  place-items: center;
}

:where(.lexxy-editor__toolbar-button):is(:active) {
    background-color: var(--lexxy-color-selected);
  }

[aria-pressed="true"]:where(.lexxy-editor__toolbar-button) {
    background-color: var(--lexxy-color-selected);
  }

:where(.lexxy-editor__toolbar-button) svg {
    -webkit-touch-callout: none;
    block-size: var(--lexxy-toolbar-icon-size);
    fill: currentColor;
    grid-area: 1/1;
    inline-size: var(--lexxy-toolbar-icon-size);
    user-select: none;
  }

:where(.lexxy-editor__toolbar-overflow) {
  display: none;
  position: relative;
  z-index: 1;
}

:where(.lexxy-editor__toolbar-overflow) summary {
    list-style: none;
  }

:is(:where(.lexxy-editor__toolbar-overflow) summary)::-webkit-details-marker {
      display: none;
    }

[open] :is(:where(.lexxy-editor__toolbar-overflow) summary) {
      filter: brightness(0.9);
    }

:where(.lexxy-editor__toolbar-overflow-menu) {
  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
  box-shadow: var(--lexxy-shadow);
  display: flex;
  inset-inline-end: 0;
  padding: var(--lexxy-toolbar-gap);
  position: absolute;
}

/* Link dialog
/* -------------------------------------------------------------------------- */

:where(.lexxy-link-dialog) {
  display: contents;
}

:where(.lexxy-link-dialog) dialog {
    background-color: var(--lexxy-color-canvas);
    border: 1px solid var(--lexxy-color-ink-lighter);
    border-radius: var(--lexxy-radius);
    box-shadow: var(--lexxy-shadow);
    color: var(--lexxy-color-ink);
    padding: 1ch;
    position: absolute;
    z-index: 1;
  }

:where(.lexxy-link-dialog) .lexxy-dialog-actions {
    display: flex;
    font-size: var(--lexxy-text-small);
    flex: 1 1 0%;
    gap: 1ch;
    margin-block-start: 1ch;
  }

:where(.lexxy-link-dialog) input[type="url"],:where(.lexxy-link-dialog) button {
    line-height: 1.5lh;
    padding-inline: 1ch;
  }

:where(.lexxy-link-dialog) input[type="url"] {
    border: 1px solid var(--lexxy-color-ink-lighter);
    border-radius: var(--lexxy-radius);
    min-inline-size: 30ch;
  }

:where(.lexxy-link-dialog) button {
    background-color: var(--lexxy-color-ink-lightest);
    inline-size: 100%;
    justify-content: center;
  }

:where(.lexxy-link-dialog) button[type="submit"] {
    background-color: var(--lexxy-color-accent-dark);
    color: var(--lexxy-color-ink-inverted);
  }

/* Language picker
/* -------------------------------------------------------------------------- */

:where(.lexxy-code-language-picker) {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--lexxy-color-canvas);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
  background-position: center right 1ch;
  background-repeat: no-repeat;
  background-size: 1ch;
  block-size: 1.5lh;
  border: 1px solid var(--lexxy-color-ink-lighter);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  font-weight: normal;
  inset-inline-end: var(--lexxy-editor-padding);
  margin: 0.5ch 0.5ch 0 -0.5ch;
  padding: 0 2ch 0 1ch;
  text-align: start;
}

@media (prefers-color-scheme: dark) {

:where(.lexxy-code-language-picker) {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
  }

/* Prompt
/* ------------------------------------------------------------------------ */

:where(.lexxy-prompt-menu) {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-min-width: 20ch;
  --lexxy-prompt-padding: 0.5ch;

  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-prompt-padding) * 2);
  box-shadow: var(--lexxy-shadow);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  list-style: none;
  margin: 0;
  max-block-size: 200px;
  min-inline-size: var(--lexxy-prompt-min-width);
  overflow: auto;
  padding: var(--lexxy-prompt-padding);
  visibility: hidden;
  z-index: var(--lexxy-z-popup);
}

:where(.lexxy-prompt-menu--visible) {
  visibility: initial;
}

:where(.lexxy-prompt-menu__item) {
  align-items: center;
  border-radius: var(--lexxy-radius);
  cursor: pointer;
  display: flex;
  gap: var(--lexxy-prompt-padding);
  padding: var(--lexxy-prompt-padding);
  white-space: nowrap;
}

:where(.lexxy-prompt-menu__item):hover {
    background-color: var(--lexxy-color-ink-lightest);
  }

[aria-selected]:where(.lexxy-prompt-menu__item) {
    background-color: var(--lexxy-color-selected);
  }

:where(.lexxy-prompt-menu__item) img {
    block-size: var(--lexxy-prompt-avatar-size);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--lexxy-prompt-avatar-size);
    margin: 0;
  }

:where(.lexxy-prompt-menu__item) + :where(.lexxy-prompt-menu__item) {
    margin-top: 2px;
  }

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--lexxy-color-ink-medium);
  padding: var(--lexxy-prompt-padding);
}

/* Customizations */

:is(.lexxy-editor__content,.lexxy-content) a {
    color: #007bff;
    text-decoration: underline;
  }

:is(:is(.lexxy-editor__content,.lexxy-content) a):hover {
      color: #0056b3;
    }

:is(.lexxy-editor__content,.lexxy-content) h2 { 
    font-size: 2rem;
    font-weight: bold;
  }

:is(.lexxy-editor__content,.lexxy-content) ul,:is(.lexxy-editor__content,.lexxy-content) ol {
    padding-left: 1.5rem;
  }

:is(.lexxy-editor__content,.lexxy-content) ul {
    list-style-type: disc;
  }

:is(.lexxy-editor__content,.lexxy-content) ol {
    list-style-type: decimal;
  }

:is(.lexxy-editor__content,.lexxy-content) :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 2.25rem;
  }

:is(.lexxy-content, .lexxy-editor__content) > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.bay-cms {
  min-height: 90vh;
}

.bay-cms h1.title {
    font-size: 2.5rem;
    text-align: center;
  }

.bay-cms .blank-space {
    height: 2rem;
  }

.bay-cms .mt-4 {
    margin-top: 1rem;
  }

.bay-cms .mt-2 {
    margin-top: 0.5rem;
  }

.bay-cms .right-2 {
    right: 0.5rem;
  }

.bay-cms .text-center {
    text-align: center;
  }

.bay-cms .text-unfocussed {
    opacity: 0.5;
  }

.bay-cms .text-sm {
    font-size: 0.875rem;
  }

.bay-cms .font-light {
    font-weight: 300;
  }

.bay-cms .text-body {
    color: #212529;
  }

.bay-cms .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

.bay-cms .post {
    font-size: 1.25rem;
    /* to be deleted: 2025-09-23 */
    /* .trix-content > :not(:last-child) {
      margin-bottom: 1rem;
    } */
  }

.bay-cms .card {
    position: relative;
    min-height: 8rem;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.1);
  }

:is(.bay-cms .card):hover {
      /* a darker version of #e2e8f0 */
      border-color: #cfd8e3;
      box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
    }

.bay-cms .card__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

.bay-cms-pub {
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.bay-cms-pub .attachment {
    display: block;
    text-align: center;
  }

:is(.bay-cms-pub .attachment) img {
      margin-left: auto;
      margin-right: auto;
    }

.bay-cms-pub a {
    text-decoration: underline;
    color: #007bff;
  }

:is(.bay-cms-pub a):hover {
      color: #0056b3;
    }

.bay-cms-pub ul,.bay-cms-pub ol {
    padding-left: 1.5rem;
  }

.bay-cms-pub ul {
    list-style-type: disc;
  }

.bay-cms-pub ol {
    list-style-type: decimal;
  }

.bay-cms-pub__notice {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 0.25rem;
}

@media (min-width: 40rem) {
  .bay-cms-pub {
    max-width: 54rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 40rem) {
  .bay-cms-pub {
    padding: 1rem;
  }

    .bay-cms-pub h1.title {
      font-size: 1.8rem;
    }

    .bay-cms-pub .post {
      font-size: 1rem;
    }
    :is(.bay-cms,.bay-cms-pub) .card {
      padding: 1rem;
    }
}