@charset "UTF-8";
/* Breakpoints */
@keyframes flip-r {
  50% {
    transform: translateX(100%);
    opacity: 0;
  }
  51% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes flip-l {
  50% {
    transform: translateX(-100%);
    opacity: 0;
  }
  51% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes flip-d {
  50% {
    transform: translateY(100%);
    opacity: 0;
  }
  51% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes flip-u {
  50% {
    transform: translateY(-100%);
    opacity: 0;
  }
  51% {
    transform: translateY(100%);
    opacity: 0;
  }
}
:root {
  --black: #181818;
  --white: #D5D5D5;
  --grey-100: #747474;
  --green: #87FF5B;
  --blue: #5B92FF;
}

:root .theme-light {
  --theme-bg: #D5D5D5;
  --theme-fg: #181818;
  --theme-accent: #87FF5B;
  --theme-link: #5B92FF;
}
:root .theme-dark {
  --theme-bg: #181818;
  --theme-fg: #D5D5D5;
  --theme-accent: #87FF5B;
  --theme-link: #5B92FF;
}

:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985);
}

/***
    The new CSS reset - version 1.9 (last updated 19.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

/* Reapply the pointer cursor for anchor tags */
a,
button {
  cursor: revert;
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input,
textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* remove default dot (•) sign */
::marker {
  content: initial;
}

/* fix the feature of 'hidden' attribute.
 display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
 - fix for the content editable attribute will work properly.
 - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
}

.menu {
  z-index: 10;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.overflow-hidden {
  overflow: hidden;
}

.relative {
  position: relative;
}

@media (min-width: 800px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 799px) {
  .desktop-only {
    display: none !important;
  }
}

html:not(.has-scroll-smooth) .hide-on-native-scroll {
  display: none;
}

html.has-scroll-smooth .hide-on-smooth-scroll {
  display: none;
}

/*
    Font Weights:
        100 - Thin
        200 - Extra Light (Ultra Light)
        300 - Light
        400 - Normal
        500 - Medium
        600 - Semi Bold (Demi Bold)
        700 - Bold
        800 - Extra Bold (Ultra Bold)
        900 - Black (Heavy)
*/
/* Leibniz Fraktur */
@font-face {
  font-family: "Leibniz Fraktur";
  font-style: normal;
  font-weight: 400;
  src: url("./leibniz-fraktur-BqdMSuEI.woff2") format("woff2"), url("./leibniz-fraktur-CvnkUeBX.woff") format("woff");
}
/* Geist Mono */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 700;
  src: url("./geist-mono-bold-CTLtpKvJ.woff2") format("woff2"), url("./geist-mono-bold-Bz_UliG4.woff") format("woff");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  src: url("./geist-mono-BzrJhchg.woff2") format("woff2"), url("./geist-mono-OFKGen7b.woff") format("woff");
}
:root {
  --font-display: 'Leibniz Fraktur', serif;
  --font-mono: 'Geist Mono', monospace;
}

:root {
  --layout-column-count: 5;
  --layout-column-gap: 5.6497175141vw;
  --layout-margin: 8.4745762712vw;
  --layout-width: calc(100vw - (2 * var(--layout-margin)));
  --layout-column-width: calc(
      (
              var(--layout-width) -
                  (
                      (var(--layout-column-count) - 1) *
                          var(--layout-column-gap)
                  )
          ) /
          var(--layout-column-count)
  );
}

.layout-block, .layout-grid {
  max-width: var(--layout-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.layout-block-inner, .layout-grid-inner {
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
  width: 100%;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
  grid-gap: var(--layout-column-gap);
}

.layout-grid-inner {
  display: grid;
  grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
  grid-gap: var(--layout-column-gap);
}

html,
html * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
html *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 400ms;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.quick-fade-enter-active,
.quick-fade-leave-active {
  transition: opacity 100ms;
}

.quick-fade-enter-from,
.quick-fade-leave-to {
  opacity: 0;
}

.slow-fade-enter-active,
.slow-fade-leave-active {
  transition: opacity 600ms;
}

.slow-fade-enter-from,
.slow-fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 400ms var(--ease-out-quad);
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 400ms var(--ease-out-quad);
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  background: var(--black);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
}

.h1,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-size: 8.4745762712vw;
}
.h1.mono,
h1.mono,
h2.mono,
h3.mono,
h4.mono,
h5.mono,
h6.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 6.2146892655vw;
}

.p,
p,
a,
button,
input,
pre {
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}

.bold {
  font-weight: 700;
}

#app {
  min-height: 100vh;
}

button {
  cursor: pointer;
}

::selection {
  color: var(--theme-bg);
  background: var(--theme-accent);
}

::-moz-selection {
  color: var(--theme-bg);
  background: var(--theme-accent);
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.nav {
  padding-top: 2.5423728814vw;
  color: var(--grey-100);
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--theme-bg);
  border-bottom: 1px solid var(--grey-100);
}
.menu .menu-wrap {
  display: flex;
  flex-direction: column;
  padding-top: 0.8474576271vw;
  padding-bottom: 2.8248587571vw;
}
.menu .menu-wrap .menu-item {
  display: block;
  padding: 4.5197740113vw 0;
  text-align: center;
}
.menu .menu-wrap .menu-item:not(:last-child) {
  border-bottom: 1px dashed currentColor;
}
.menu .menu-wrap .menu-item:hover {
  color: var(--theme-accent);
}
.menu.menu-enter-active, .menu.menu-leave-active {
  transition: transform 300ms var(--ease-out-expo);
}
.menu.menu-enter-from, .menu.menu-leave-to {
  transform: translateY(-100%);
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.scroll-bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.2598870056vw;
  will-change: transform;
  border-left: 1px solid var(--grey-100);
}
.scroll-bar .inner {
  height: 100%;
  position: relative;
}
.scroll-bar .inner .handle {
  width: 100%;
  height: 109.604519774vw;
  background: var(--grey-100);
  border-radius: 20px;
  position: absolute;
  right: 0;
  will-change: transform;
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.container {
  min-height: calc(100 * var(--vh));
  max-width: 100vw;
  overflow-x: clip;
  background: var(--theme-bg);
  color: var(--theme-fg);
  transition: opacity 1000ms;
}
.container:not(.fonts-ready) {
  opacity: 0;
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.category-row {
  display: grid;
  grid-template-columns: 7.3446327684vw 1fr auto;
  align-items: flex-start;
  width: 100%;
  position: relative;
  padding: 1.4124293785vw 0 4.2372881356vw;
  cursor: pointer;
}
.category-row .index {
  margin-top: 5.3672316384vw;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
.category-row .title {
  display: block;
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 799px) {
.category-row .title {
    -webkit-line-clamp: 2;
}
}
.category-row .category-input {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-size: 8.4745762712vw;
}
.category-row .category-input:focus {
  outline: none;
}
.category-row .edit-button,
.category-row .save-button {
  color: var(--grey-100);
  cursor: pointer;
  padding-right: 0.5em;
  padding-left: 0.5em;
  margin-top: 1.5em;
}
.category-row .edit-button {
  opacity: 0;
  pointer-events: none;
}
.category-row.editable:hover .edit-button {
  opacity: 1;
  pointer-events: auto;
}
.category-row::after {
  content: "----------------------------------------";
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
.category-row.router-link-exact-active, .category-row.editable {
  cursor: default;
}
.category-row:hover:not(.router-link-exact-active):not(.editable) {
  color: var(--theme-accent);
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
.note-row {
  grid-template-columns: auto 1fr;
  display: grid;
  gap: 5.6497175141vw;
  cursor: pointer;
}
.note-row .title {
  width: 44.9152542373vw;
  position: relative;
}
.note-row .title::after {
  content: "(open)";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
  font-weight: 700;
  opacity: 0;
}
.note-row:hover {
  color: var(--theme-accent);
}
.note-row:hover .title::after {
  opacity: 1;
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
main.directory {
  padding-top: 5.0847457627vw;
}
main.directory .label {
  text-transform: uppercase;
  margin: 4.802259887vw 0 6.7796610169vw;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
main.directory .notes {
  display: flex;
  flex-direction: column;
  gap: 3.9548022599vw;
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
main.editor {
  padding-top: 2.2598870056vw;
  padding-bottom: 5.6497175141vw;
}
main.editor h1 {
  font-weight: 700 !important;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
main.editor h1:first-child {
  font-family: var(--font-mono);
  font-size: 3.3898305085vw;
  font-weight: 400 !important;
}
main.editor h1:first-child:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 11.8644067797vw;
}
main.editor h1.is-editor-empty:first-child::before {
  color: var(--grey-100);
  content: attr(data-placeholder);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 3.3898305085vw;
  font-weight: 400 !important;
}
main.editor h1.is-editor-empty:first-child::before:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 11.8644067797vw;
}
main.editor p strong {
  font-weight: 700;
}
main.editor p em {
  font-style: italic;
}
main.editor hr::before {
  content: "----------------------------------------";
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
main.editor ul {
  list-style-type: disc;
}
main.editor ul li {
  display: list-item;
  margin-left: 1em;
}
main.editor ol {
  list-style-type: decimal;
}
main.editor ol li {
  display: list-item;
  margin-left: 1.5em;
}
main.editor ol li::marker {
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  font-size: 3.3898305085vw;
}
main.editor a {
  color: var(--theme-link);
  cursor: pointer;
}
main.editor code {
  border: 1px solid var(--grey-100);
  color: var(--theme-accent);
  padding: 0.2em;
  border-radius: 0.2em;
}
main.editor pre code {
  display: block;
  color: inherit;
  padding: 1em;
  /* Code styling */
}
main.editor pre code .hljs-comment,
main.editor pre code .hljs-quote {
  color: #616161;
}
main.editor pre code .hljs-variable,
main.editor pre code .hljs-template-variable,
main.editor pre code .hljs-attribute,
main.editor pre code .hljs-tag,
main.editor pre code .hljs-name,
main.editor pre code .hljs-regexp,
main.editor pre code .hljs-link,
main.editor pre code .hljs-name,
main.editor pre code .hljs-selector-id,
main.editor pre code .hljs-selector-class {
  color: #f98181;
}
main.editor pre code .hljs-number,
main.editor pre code .hljs-meta,
main.editor pre code .hljs-built_in,
main.editor pre code .hljs-builtin-name,
main.editor pre code .hljs-literal,
main.editor pre code .hljs-type,
main.editor pre code .hljs-params {
  color: #fbbc88;
}
main.editor pre code .hljs-string,
main.editor pre code .hljs-symbol,
main.editor pre code .hljs-bullet {
  color: #b9f18d;
}
main.editor pre code .hljs-title,
main.editor pre code .hljs-section {
  color: #faf594;
}
main.editor pre code .hljs-keyword,
main.editor pre code .hljs-selector-tag {
  color: #70cff8;
}
main.editor pre code .hljs-emphasis {
  font-style: italic;
}
main.editor pre code .hljs-strong {
  font-weight: 700;
}
main.editor blockquote {
  border-left: 4px solid var(--grey-100);
  padding-left: 0.5em;
}
main.editor s {
  position: relative;
}
main.editor s::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.2824858757vw;
  background: currentColor;
}
main.editor mark {
  background: var(--theme-accent);
  color: var(--theme-bg);
  padding: 0.2em;
  border-radius: 0.2em;
}
main.editor .editor-wrap > div {
  display: flex;
  flex-direction: column;
  gap: 5.6497175141vw;
}
main.editor .editor-wrap > div:focus {
  outline: none;
}
main.editor .bubble-menu {
  display: flex;
  gap: 1.4124293785vw;
  border: 1px solid var(--grey-100);
  color: var(--grey-100);
  border-radius: 0.2em;
  background: var(--theme-bg);
}
main.editor .bubble-menu button {
  cursor: pointer;
  padding: 0.2em;
  border-radius: 0.2em;
}
main.editor .bubble-menu button:hover {
  background: var(--grey-100);
  color: var(--theme-bg);
}
main.editor .bubble-menu button.active {
  background: var(--theme-fg);
  color: var(--theme-bg);
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
main.category .back {
  display: block;
  opacity: 0.25;
  margin-top: 2.5423728814vw;
}
main.category .category-row {
  margin-top: 1.1299435028vw;
}
main.category .notes {
  display: flex;
  flex-direction: column;
  gap: 3.9548022599vw;
  margin-top: 2.5423728814vw;
}
main.category .new-note {
  display: block;
  margin: 14.1242937853vw auto 0;
}/* Breakpoints */
@keyframes flip-r {
50% {
    transform: translateX(100%);
    opacity: 0;
}
51% {
    transform: translateX(-100%);
    opacity: 0;
}
}
@keyframes flip-l {
50% {
    transform: translateX(-100%);
    opacity: 0;
}
51% {
    transform: translateX(100%);
    opacity: 0;
}
}
@keyframes flip-d {
50% {
    transform: translateY(100%);
    opacity: 0;
}
51% {
    transform: translateY(-100%);
    opacity: 0;
}
}
@keyframes flip-u {
50% {
    transform: translateY(-100%);
    opacity: 0;
}
51% {
    transform: translateY(100%);
    opacity: 0;
}
}
main.instructions .back-link {
  opacity: 0.25;
  display: block;
  margin-top: 2.5423728814vw;
  margin-bottom: 3.9548022599vw;
}