* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }
  *:focus {
    outline: none; }

*::before,
*::after {
  box-sizing: border-box; }

html {
  font-family: 'Inter';
  font-size: 18px;
  color: #000000;
  line-height: 1.5; }

body {
  margin: 0; }

a {
  color: inherit; }

h1,
h2,
h3,
p,
ul,
ol,
pre,
blockquote {
  margin: 1rem 0; }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  p:first-child,
  ul:first-child,
  ol:first-child,
  pre:first-child,
  blockquote:first-child {
    margin-top: 0; }
  h1:last-child,
  h2:last-child,
  h3:last-child,
  p:last-child,
  ul:last-child,
  ol:last-child,
  pre:last-child,
  blockquote:last-child {
    margin-bottom: 0; }

h1,
h2,
h3 {
  line-height: 1.3; }

.button {
  font-weight: bold;
  display: inline-flex;
  background: transparent;
  border: 0;
  color: #000000;
  padding: 0.2rem 0.5rem;
  margin-right: 0.2rem;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1); }
  .button:hover {
    background-color: rgba(0, 0, 0, 0.15); }

.message {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-style: italic; }

.editor {
  position: relative;
  max-width: 30rem;
  margin: 0 auto 5rem auto; }
  .editor__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }
    .editor__content * {
      caret-color: currentColor; }
    .editor__content pre {
      padding: 0.7rem 1rem;
      border-radius: 5px;
      background: #000000;
      color: #ffffff;
      font-size: 0.8rem;
      overflow-x: auto; }
      .editor__content pre code {
        display: block; }
    .editor__content p code {
      padding: 0.2rem 0.4rem;
      border-radius: 5px;
      font-size: 0.8rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8); }
    .editor__content ul,
    .editor__content ol {
      padding-left: 1rem; }
    .editor__content li > p,
    .editor__content li > ol,
    .editor__content li > ul {
      margin: 0; }
    .editor__content a {
      color: inherit; }
    .editor__content blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8);
      padding-left: 0.8rem;
      font-style: italic; }
      .editor__content blockquote p {
        margin: 0; }
    .editor__content img {
      max-width: 100%;
      border-radius: 3px; }
    .editor__content table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      overflow: hidden; }
      .editor__content table td, .editor__content table th {
        min-width: 1em;
        border: 2px solid #dddddd;
        padding: 3px 5px;
        vertical-align: top;
        box-sizing: border-box;
        position: relative; }
        .editor__content table td > *, .editor__content table th > * {
          margin-bottom: 0; }
      .editor__content table th {
        font-weight: bold;
        text-align: left; }
      .editor__content table .selectedCell:after {
        z-index: 2;
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(200, 200, 255, 0.4);
        pointer-events: none; }
      .editor__content table .column-resize-handle {
        position: absolute;
        right: -2px;
        top: 0;
        bottom: 0;
        width: 4px;
        z-index: 20;
        background-color: #adf;
        pointer-events: none; }
    .editor__content .tableWrapper {
      margin: 1em 0;
      overflow-x: auto; }
    .editor__content .resize-cursor {
      cursor: ew-resize;
      cursor: col-resize; }
  .editor pre::before {
    content: attr(data-language);
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem; }
  .editor pre code .hljs-comment,
  .editor pre code .hljs-quote {
    color: #999999; }
  .editor pre code .hljs-variable,
  .editor pre code .hljs-template-variable,
  .editor pre code .hljs-attribute,
  .editor pre code .hljs-tag,
  .editor pre code .hljs-name,
  .editor pre code .hljs-regexp,
  .editor pre code .hljs-link,
  .editor pre code .hljs-name,
  .editor pre code .hljs-selector-id,
  .editor pre code .hljs-selector-class {
    color: #f2777a; }
  .editor pre code .hljs-number,
  .editor pre code .hljs-meta,
  .editor pre code .hljs-built_in,
  .editor pre code .hljs-builtin-name,
  .editor pre code .hljs-literal,
  .editor pre code .hljs-type,
  .editor pre code .hljs-params {
    color: #f99157; }
  .editor pre code .hljs-string,
  .editor pre code .hljs-symbol,
  .editor pre code .hljs-bullet {
    color: #99cc99; }
  .editor pre code .hljs-title,
  .editor pre code .hljs-section {
    color: #ffcc66; }
  .editor pre code .hljs-keyword,
  .editor pre code .hljs-selector-tag {
    color: #6699cc; }
  .editor pre code .hljs-emphasis {
    font-style: italic; }
  .editor pre code .hljs-strong {
    font-weight: 700; }

.menubar {
  margin-bottom: 1rem;
  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s; }
  .menubar.is-hidden {
    visibility: hidden;
    opacity: 0; }
  .menubar.is-focused {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.2s, opacity 0.2s; }
  .menubar__button {
    font-weight: bold;
    display: inline-flex;
    background: transparent;
    border: 0;
    color: #000000;
    padding: 0.2rem 0.5rem;
    margin-right: 0.2rem;
    border-radius: 3px;
    cursor: pointer; }
    .menubar__button:hover {
      background-color: rgba(0, 0, 0, 0.05); }
    .menubar__button.is-active {
      background-color: rgba(0, 0, 0, 0.1); }
  .menubar span.menubar__button {
    font-size: 13.3333px; }

.menububble {
  position: absolute;
  display: flex;
  z-index: 20;
  background: #000000;
  border-radius: 5px;
  padding: 0.3rem;
  margin-bottom: 0.5rem;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s; }
  .menububble.is-active {
    opacity: 1;
    visibility: visible; }
  .menububble__button {
    display: inline-flex;
    background: transparent;
    border: 0;
    color: #ffffff;
    padding: 0.2rem 0.5rem;
    margin-right: 0.2rem;
    border-radius: 3px;
    cursor: pointer; }
    .menububble__button:last-child {
      margin-right: 0; }
    .menububble__button:hover {
      background-color: rgba(255, 255, 255, 0.1); }
    .menububble__button.is-active {
      background-color: rgba(255, 255, 255, 0.2); }
  .menububble__form {
    display: flex;
    align-items: center; }
  .menububble__input {
    font: inherit;
    border: none;
    background: transparent;
    color: #ffffff; }
.editor {
  position: relative;
  max-width: 30rem;
  margin: 0 auto 5rem auto; }
  .editor__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }
    .editor__content * {
      caret-color: currentColor; }
    .editor__content pre {
      padding: 0.7rem 1rem;
      border-radius: 5px;
      background: #000000;
      color: #ffffff;
      font-size: 0.8rem;
      overflow-x: auto; }
      .editor__content pre code {
        display: block; }
    .editor__content p code {
      padding: 0.2rem 0.4rem;
      border-radius: 5px;
      font-size: 0.8rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8); }
    .editor__content ul,
    .editor__content ol {
      padding-left: 1rem; }
    .editor__content li > p,
    .editor__content li > ol,
    .editor__content li > ul {
      margin: 0; }
    .editor__content a {
      color: inherit; }
    .editor__content blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8);
      padding-left: 0.8rem;
      font-style: italic; }
      .editor__content blockquote p {
        margin: 0; }
    .editor__content img {
      max-width: 100%;
      border-radius: 3px; }
    .editor__content table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      overflow: hidden; }
      .editor__content table td, .editor__content table th {
        min-width: 1em;
        border: 2px solid #dddddd;
        padding: 3px 5px;
        vertical-align: top;
        box-sizing: border-box;
        position: relative; }
        .editor__content table td > *, .editor__content table th > * {
          margin-bottom: 0; }
      .editor__content table th {
        font-weight: bold;
        text-align: left; }
      .editor__content table .selectedCell:after {
        z-index: 2;
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(200, 200, 255, 0.4);
        pointer-events: none; }
      .editor__content table .column-resize-handle {
        position: absolute;
        right: -2px;
        top: 0;
        bottom: 0;
        width: 4px;
        z-index: 20;
        background-color: #adf;
        pointer-events: none; }
    .editor__content .tableWrapper {
      margin: 1em 0;
      overflow-x: auto; }
    .editor__content .resize-cursor {
      cursor: ew-resize;
      cursor: col-resize; }
  .editor pre::before {
    content: attr(data-language);
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem; }
  .editor pre code .hljs-comment,
  .editor pre code .hljs-quote {
    color: #999999; }
  .editor pre code .hljs-variable,
  .editor pre code .hljs-template-variable,
  .editor pre code .hljs-attribute,
  .editor pre code .hljs-tag,
  .editor pre code .hljs-name,
  .editor pre code .hljs-regexp,
  .editor pre code .hljs-link,
  .editor pre code .hljs-name,
  .editor pre code .hljs-selector-id,
  .editor pre code .hljs-selector-class {
    color: #f2777a; }
  .editor pre code .hljs-number,
  .editor pre code .hljs-meta,
  .editor pre code .hljs-built_in,
  .editor pre code .hljs-builtin-name,
  .editor pre code .hljs-literal,
  .editor pre code .hljs-type,
  .editor pre code .hljs-params {
    color: #f99157; }
  .editor pre code .hljs-string,
  .editor pre code .hljs-symbol,
  .editor pre code .hljs-bullet {
    color: #99cc99; }
  .editor pre code .hljs-title,
  .editor pre code .hljs-section {
    color: #ffcc66; }
  .editor pre code .hljs-keyword,
  .editor pre code .hljs-selector-tag {
    color: #6699cc; }
  .editor pre code .hljs-emphasis {
    font-style: italic; }
  .editor pre code .hljs-strong {
    font-weight: 700; }
.editor {
  position: relative;
  max-width: 30rem;
  margin: 0 auto 5rem auto; }
  .editor__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }
    .editor__content * {
      caret-color: currentColor; }
    .editor__content pre {
      padding: 0.7rem 1rem;
      border-radius: 5px;
      background: #000000;
      color: #ffffff;
      font-size: 0.8rem;
      overflow-x: auto; }
      .editor__content pre code {
        display: block; }
    .editor__content p code {
      padding: 0.2rem 0.4rem;
      border-radius: 5px;
      font-size: 0.8rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8); }
    .editor__content ul,
    .editor__content ol {
      padding-left: 1rem; }
    .editor__content li > p,
    .editor__content li > ol,
    .editor__content li > ul {
      margin: 0; }
    .editor__content a {
      color: inherit; }
    .editor__content blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8);
      padding-left: 0.8rem;
      font-style: italic; }
      .editor__content blockquote p {
        margin: 0; }
    .editor__content img {
      max-width: 100%;
      border-radius: 3px; }
    .editor__content table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      overflow: hidden; }
      .editor__content table td, .editor__content table th {
        min-width: 1em;
        border: 2px solid #dddddd;
        padding: 3px 5px;
        vertical-align: top;
        box-sizing: border-box;
        position: relative; }
        .editor__content table td > *, .editor__content table th > * {
          margin-bottom: 0; }
      .editor__content table th {
        font-weight: bold;
        text-align: left; }
      .editor__content table .selectedCell:after {
        z-index: 2;
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(200, 200, 255, 0.4);
        pointer-events: none; }
      .editor__content table .column-resize-handle {
        position: absolute;
        right: -2px;
        top: 0;
        bottom: 0;
        width: 4px;
        z-index: 20;
        background-color: #adf;
        pointer-events: none; }
    .editor__content .tableWrapper {
      margin: 1em 0;
      overflow-x: auto; }
    .editor__content .resize-cursor {
      cursor: ew-resize;
      cursor: col-resize; }
  .editor pre::before {
    content: attr(data-language);
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem; }
  .editor pre code .hljs-comment,
  .editor pre code .hljs-quote {
    color: #999999; }
  .editor pre code .hljs-variable,
  .editor pre code .hljs-template-variable,
  .editor pre code .hljs-attribute,
  .editor pre code .hljs-tag,
  .editor pre code .hljs-name,
  .editor pre code .hljs-regexp,
  .editor pre code .hljs-link,
  .editor pre code .hljs-name,
  .editor pre code .hljs-selector-id,
  .editor pre code .hljs-selector-class {
    color: #f2777a; }
  .editor pre code .hljs-number,
  .editor pre code .hljs-meta,
  .editor pre code .hljs-built_in,
  .editor pre code .hljs-builtin-name,
  .editor pre code .hljs-literal,
  .editor pre code .hljs-type,
  .editor pre code .hljs-params {
    color: #f99157; }
  .editor pre code .hljs-string,
  .editor pre code .hljs-symbol,
  .editor pre code .hljs-bullet {
    color: #99cc99; }
  .editor pre code .hljs-title,
  .editor pre code .hljs-section {
    color: #ffcc66; }
  .editor pre code .hljs-keyword,
  .editor pre code .hljs-selector-tag {
    color: #6699cc; }
  .editor pre code .hljs-emphasis {
    font-style: italic; }
  .editor pre code .hljs-strong {
    font-weight: 700; }

ul[data-type="todo_list"] {
  padding-left: 0; }

li[data-type="todo_item"] {
  display: flex;
  flex-direction: row; }

.todo-checkbox {
  border: 2px solid #000000;
  height: 0.9em;
  width: 0.9em;
  box-sizing: border-box;
  margin-right: 10px;
  margin-top: 0.3rem;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  border-radius: 0.2em;
  background-color: transparent;
  transition: 0.4s background; }

.todo-content {
  flex: 1; }
  .todo-content > p:last-of-type {
    margin-bottom: 0; }
  .todo-content > ul[data-type="todo_list"] {
    margin: .5rem 0; }

li[data-done="true"] > .todo-content > p {
  text-decoration: line-through; }

li[data-done="true"] > .todo-checkbox {
  background-color: #000000; }

li[data-done="false"] {
  text-decoration: none; }
