: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(75% 0.196 258);
  --lexxy-color-accent-light: oklch(88% 0.026 254);
  --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-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3); 
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3); 
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3); 
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);

  /* 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;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: 0;
  --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;
}

/* Editor Container */
:where(lexxy-editor) {
  background: var(--color-black);
  border-bottom: 2px solid var(--color-grey-3);
  border-radius: 0;
  color: var(--color-white);
  display: block;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  letter-spacing: -0.01em;
  min-height: 8em;
  outline: none;
  position: relative;
  transition: border-color var(--transition), background var(--transition)
}

:where(lexxy-editor) input,
:where(lexxy-editor) button {
  outline: none
}

:where(lexxy-editor) input:focus-visible,
:where(lexxy-editor) button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px
}

:where(lexxy-editor) button {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-grey-2);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: inherit;
  transition: color var(--transition), background var(--transition)
}

:where(lexxy-editor) button:hover {
  background: transparent;
  color: var(--color-white)
}

:where(lexxy-editor) .node--selected:has(img) img,
:where(lexxy-editor) .node--selected:not(:has(img)) {
  outline: 2px solid var(--color-white);
  outline-offset: 2px
}

/* Placeholder */
:where(.lexxy-editor--empty) .lexxy-editor__content:not(:has(ul, ol))::before {
  color: var(--color-grey-2);
  content: attr(placeholder);
  cursor: text;
  font-weight: 400;
  pointer-events: none;
  position: absolute;
  white-space: pre-line
}

/* Content Area */
:where(.lexxy-editor__content) {
  color: var(--color-grey-1);
  line-height: 1.4;
  min-height: 8em;
  outline: 0;
  padding: 1em 0
}

:where(.lexxy-editor--drag-over) {
  background: hsla(var(--hsl-white), 0.05);
  outline: 2px dashed var(--color-white)
}

/* Toolbar */
:where(lexxy-toolbar) {
  background: var(--color-grey-3);
  border: none;
  border-bottom: 2px solid var(--color-black);
  color: var(--color-grey-2);
  display: flex;
  font-size: inherit;
  gap: 2px;
  padding: 2px;
  position: sticky;
  top: 7.4em;
  z-index: 10
}

@media(min-width: 64em) and (hover: hover) and (pointer: fine) {
  :where(lexxy-toolbar) {
    /* top: max(22.2vh, 5.4em) */
    top: 0;
    z-index: 1000
  }
}

:where(lexxy-toolbar[data-attachments="false"]) button[name="upload"] {
  display: none
}

:where(.lexxy-editor__toolbar-button) {
  aspect-ratio: 1;
  background: transparent;
  border-radius: 0;
  color: var(--color-grey-2);
  display: grid;
  height: 2.5em;
  place-items: center;
  width: 2.5em
}

:where(.lexxy-editor__toolbar-button:hover),
:where(.lexxy-editor__toolbar-button[aria-pressed="true"]) {
  background: hsla(var(--hsl-white), 0.05);
  color: var(--color-white)
}

:where(.lexxy-editor__toolbar-button[aria-disabled="true"]) {
  cursor: default;
  opacity: 0.3
}

:where(.lexxy-editor__toolbar-button) svg {
  fill: currentColor;
  height: 1em;
  user-select: none;
  width: 1em
}

:where(.lexxy-editor__toolbar-spacer) {
  flex: 1
}

* + :where(.lexxy-editor__toolbar-spacer) {
  min-width: 2.5em
}

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

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

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

:where(.lexxy-editor__toolbar-overflow[open]) summary {
  background: hsla(var(--hsl-white), 0.05)
}

:where(.lexxy-editor__toolbar-overflow-menu) {
  background: var(--color-grey-3);
  border: 2px solid var(--color-white);
  border-radius: 0;
  box-shadow: 0 4px 16px hsla(var(--hsl-black), 0.5);
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  padding: 2px;
  position: absolute;
  right: 0
}

:where(.lexxy-editor__toolbar-overflow-menu) .lexxy-editor__toolbar-spacer {
  display: none
}

/* Dropdowns */
:where(.lexxy-editor__toolbar-dropdown) {
  position: relative;
  user-select: none
}

:where(.lexxy-editor__toolbar-dropdown) .lexxy-editor__toolbar-dropdown-content {
  background: var(--color-grey-3);
  border: 2px solid var(--color-white);
  border-radius: 0;
  border-top-left-radius: 0;
  box-shadow: 0 4px 16px hsla(var(--hsl-black), 0.5);
  box-sizing: border-box;
  color: var(--color-white);
  display: flex;
  gap: 0.5em;
  left: 0;
  padding: 1em;
  position: absolute;
  top: 2.5em;
  z-index: 3
}

:where(.lexxy-editor__toolbar-dropdown[open]) .lexxy-editor__toolbar-button {
  background: hsla(var(--hsl-white), 0.05);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--color-white)
}

/* Link Dropdown */
:where(lexxy-link-dropdown) > * {
  flex: 1
}

:where(lexxy-link-dropdown) .lexxy-editor__toolbar-dropdown-actions {
  display: flex;
  flex: 1 1 0%;
  font-size: var(--font-size-small);
  gap: 1em;
  margin-top: 1em
}

:where(lexxy-link-dropdown) input[type="url"],
:where(lexxy-link-dropdown) button {
  line-height: 1.5;
  padding: 0.5em 1em
}

:where(lexxy-link-dropdown) input[type="url"] {
  background: var(--color-black);
  border: 2px solid var(--color-grey-2);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  min-width: 40ch;
  width: 100%
}

:where(lexxy-link-dropdown) input[type="url"]:focus {
  border-color: var(--color-white)
}

:where(lexxy-link-dropdown) button {
  background: var(--color-grey-2);
  color: var(--color-white);
  justify-content: center;
  width: 100%
}

:where(lexxy-link-dropdown) button:hover {
  background: var(--color-white);
  color: var(--color-black)
}

:where(lexxy-link-dropdown) button[type="submit"] {
  background: var(--color-white);
  color: var(--color-black)
}

:where(lexxy-link-dropdown) button[type="submit"]:hover {
  background: var(--color-grey-1)
}

/* Highlight/Color Dropdown */
:where(lexxy-highlight-dropdown) {
  display: flex;
  flex-direction: column
}

:where(lexxy-highlight-dropdown) [data-button-group] {
  display: flex;
  flex-direction: row;
  gap: 0.5em
}

:where(lexxy-highlight-dropdown) button:not(.lexxy-editor__toolbar-dropdown-reset) {
  aspect-ratio: 1 / 1;
  height: 2.5em;
  min-height: 2.5em;
  min-width: 2.5em;
  position: relative;
  width: 2.5em
}

:where(lexxy-highlight-dropdown) [data-button-group] button:after {
  align-self: center;
  content: "Aa";
  display: inline-block;
  font-family: var(--font-family);
  inset: 0;
  position: absolute
}

:where(lexxy-highlight-dropdown) button:hover {
  opacity: 0.8
}

:where(lexxy-highlight-dropdown) button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px currentColor inset
}

:where(lexxy-highlight-dropdown) button[aria-pressed="true"]:after {
  content: "✓"
}

:where(lexxy-highlight-dropdown) .lexxy-editor__toolbar-dropdown-reset[disabled] {
  display: none
}

/* Code Language Picker */
:where(.lexxy-code-language-picker) {
  appearance: none;
  background: var(--color-grey-3);
  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");
  background-position: center right 1em;
  background-repeat: no-repeat;
  background-size: 1em;
  border: 2px solid var(--color-grey-2);
  border-radius: 0;
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 500;
  height: 1.5em;
  margin: 0;
  padding: 0 2em 0 1em;
  text-align: left
}

/* Prompt Menu */
:where(.lexxy-prompt-menu) {
  background: var(--color-grey-3);
  border: 2px solid var(--color-white);
  border-radius: 0;
  box-shadow: 0 4px 16px hsla(var(--hsl-black), 0.5);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  list-style: none;
  margin: 0;
  max-height: 200px;
  min-width: 20ch;
  overflow: auto;
  padding: 0.5em;
  visibility: hidden;
  z-index: 1000
}

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

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

:where(.lexxy-prompt-menu__item:hover) {
  background: hsla(var(--hsl-white), 0.05)
}

:where(.lexxy-prompt-menu__item[aria-selected]) {
  background: hsla(var(--hsl-white), 0.1);
  color: var(--color-white)
}

:where(.lexxy-prompt-menu__item) img {
  border-radius: 50%;
  flex-shrink: 0;
  height: 24px;
  margin: 0;
  width: 24px
}

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

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--color-grey-2);
  padding: 0.5em
}

/* Content Styles (for rendered content and editor) */
:where(.lexxy-content) {
  color: var(--color-grey-1);
  font-size: var(--font-size-small)
}

:where(.lexxy-content) h1,
:where(.lexxy-content) h2,
:where(.lexxy-content) h3,
:where(.lexxy-content) h4,
:where(.lexxy-content) h5,
:where(.lexxy-content) h6 {
  color: var(--color-white);
  display: block;
  font-weight: 700;
  overflow-wrap: break-word
}

:where(.lexxy-content) h1 {
  font-size: var(--font-size-xxx-large) !important
}

:where(.lexxy-content) h2 {
  font-size: var(--font-size-xxxx-large) !important
}

:where(.lexxy-content) h3 {
  font-size: var(--font-size-xxx-large) !important
}

:where(.lexxy-content) h4 {
  font-size: var(--font-size-x-large) !important
}

:where(.lexxy-content) h5,
:where(.lexxy-content) h6 {
  font-size: var(--font-size-large) !important
}

:where(.lexxy-content) > *+* {
  margin: var(--spacing) 0 0 0;
}

:where(.lexxy-editor__content) > *+* {
  margin: var(--spacing) 0 0 0;
}

:where(.lexxy-content) hr {
  padding: 1.5em 0 0.5em;
  border: none
}

:where(.lexxy-content) .lexxy-content__italic {
  font-style: italic
}

:where(.lexxy-content) .lexxy-content__bold {
  font-weight: 700
}

:where(.lexxy-content) .lexxy-content__strikethrough {
  text-decoration: line-through
}

:where(.lexxy-content) .lexxy-content__underline {
  text-decoration: underline
}

:where(.lexxy-content) mark,
:where(.lexxy-content) .lexxy-content__highlight {
  background-color: transparent;
  color: inherit
}

:where(.lexxy-content) blockquote {
  border-left: 0.25em solid var(--color-grey-3);
  font-style: italic;
  padding: 0.5em 2em
}

:where(.lexxy-content) p:empty {
  display: none
}

:where(.lexxy-content) a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.0875em
}

:where(.lexxy-content) img,
:where(.lexxy-content) video,
:where(.lexxy-content) audio,
:where(.lexxy-content) embed,
:where(.lexxy-content) object {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-height: 32rem;
  max-width: 100%;
  object-fit: contain;
  width: auto
}

:where(.lexxy-content) audio {
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  max-height: none;
  min-height: 54px;
  width: 100%
}

:where(.lexxy-content) audio:focus {
  outline: none
}

:where(.lexxy-content) a:has(img) {
  display: inline-block
}

:where(.lexxy-content) code,
:where(.lexxy-content) pre {
  background: var(--color-grey-3);
  border-radius: 0;
  color: var(--color-white);
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: 0.25em 0.5em
}

:where(.lexxy-content) code:is(pre),
:where(.lexxy-content) code[data-language],
:where(.lexxy-content) pre {
  border-radius: 0;
  display: block;
  overflow-x: auto;
  padding: 1em;
  tab-size: 2;
  white-space: pre;
  word-break: break-word
}

:where(.lexxy-content) li.lexxy-nested-listitem {
  list-style-type: none
}

:where(.lexxy-content) li.lexxy-nested-listitem ol,
:where(.lexxy-content) li.lexxy-nested-listitem ul {
  margin: 0
}

:where(.lexxy-content) > :last-child {
  margin-bottom: 0
}

/* Code Syntax Highlighting */
:where(.lexxy-content) .code-token__attr,
:where(.lexxy-content) .token.atrule,
:where(.lexxy-content) .token.attr,
:where(.lexxy-content) .token.keyword {
  color: #d73a49
}

:where(.lexxy-content) .code-token__property,
:where(.lexxy-content) .token.boolean,
:where(.lexxy-content) .token.constant,
:where(.lexxy-content) .token.number,
:where(.lexxy-content) .token.property,
:where(.lexxy-content) .token.symbol,
:where(.lexxy-content) .token.tag {
  color: #005cc5
}

:where(.lexxy-content) .code-token__selector,
:where(.lexxy-content) .token.builtin,
:where(.lexxy-content) .token.char,
:where(.lexxy-content) .token.inserted,
:where(.lexxy-content) .token.selector,
:where(.lexxy-content) .token.string {
  color: #22863a
}

:where(.lexxy-content) .code-token__comment,
:where(.lexxy-content) .token.cdata,
:where(.lexxy-content) .token.comment,
:where(.lexxy-content) .token.doctype,
:where(.lexxy-content) .token.prolog {
  color: #6a737d;
  font-style: italic
}

:where(.lexxy-content) .code-token__operator,
:where(.lexxy-content) .token.deleted,
:where(.lexxy-content) .token.entity,
:where(.lexxy-content) .token.operator,
:where(.lexxy-content) .token.url {
  color: #d73a49
}

:where(.lexxy-content) .code-token__function,
:where(.lexxy-content) .token.class,
:where(.lexxy-content) .token.class-name,
:where(.lexxy-content) .token.function {
  color: #6f42c1
}

:where(.lexxy-content) .code-token__variable,
:where(.lexxy-content) .token.important,
:where(.lexxy-content) .token.namespace,
:where(.lexxy-content) .token.regex,
:where(.lexxy-content) .token.variable {
  color: #e36209
}

:where(.lexxy-content) .code-token__punctuation,
:where(.lexxy-content) .token.punctuation {
  color: var(--color-grey-1)
}

/* Cursor Animation */
:where([data-lexical-cursor]) {
  animation: blink 1s step-end infinite;
  border-left: 1px solid currentColor;
  height: 1em;
  line-height: inherit;
  margin: 1em 0
}

@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: 0
  }
}

/* Attachments */
:where(.attachment) {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  text-align: center;
  width: fit-content
}

:where(.attachment) progress {
  margin: auto;
  width: 100%
}

:where(.attachment__caption) {
  color: var(--color-grey-2);
  font-size: var(--font-size-small)
}

:where(.attachment__caption) textarea {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  max-width: 100%;
  resize: none;
  text-align: center;
  width: 100%
}

:where(.attachment__caption) textarea:focus {
  outline: none
}

:where(.attachment__icon) {
  aspect-ratio: 4/5;
  background: hsla(var(--hsl-grey-2), 0.1);
  border: 2px solid var(--color-grey-2);
  border-radius: 0;
  border-top-width: 1em;
  box-sizing: border-box;
  color: var(--color-grey-2);
  display: grid;
  font-size: var(--font-size-small);
  font-weight: 700;
  height: auto;
  place-content: center;
  text-transform: uppercase;
  width: auto
}

:where(.attachment--preview) {
  border-radius: 0
}

:where(.attachment--preview.attachment--mp4),
:where(.attachment--preview.attachment--mp3) {
  max-width: 100%;
  width: 100%
}

:where(.attachment--preview) img,
:where(.attachment--preview) video,
:where(.attachment--preview) audio {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  user-select: none
}

:where(.attachment__video) {
  border-radius: 0;
  max-height: 32rem;
  width: 100% !important
}

:where(.attachment__audio) {
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  min-height: 54px;
  width: 100%
}

:where(.attachment__audio):focus {
  outline: none
}

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

:where(.attachment--preview) .attachment__caption {
  margin-top: 1em
}

:where(.attachment--file) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: auto
}

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

:where(.attachment--file) .attachment__name {
  color: var(--color-white);
  font-weight: 700
}

/* Horizontal Divider */
:where(.horizontal-divider) {
  margin: 0;
  padding: 1.5em 0 0.5em
}

:where(.horizontal-divider) hr {
  border: 0;
  margin: 0;
  width: 20%
}

:where(action-text-attachment[content-type^="application/vnd.actiontext"]) {
  align-items: center;
  background: transparent;
  border-radius: 0;
  box-shadow: -0.25em 0 0 transparent, 0.5em 0 0 transparent;
  color: currentColor;
  display: inline-flex;
  gap: 0.25em;
  padding: 0;
  position: relative;
  white-space: normal
}

:where(action-text-attachment[content-type^="application/vnd.actiontext"]) img {
  border-radius: 50%;
  height: 1em;
  width: 1em
}

:where(action-text-attachment[content-type^="application/vnd.actiontext"].node--selected) {
  background: var(--color-white);
  box-shadow: -0.25em 0 0 var(--color-white), 0.5em 0 0 var(--color-white);
  color: var(--color-black)
}