*{box-sizing:border-box}body{margin:0}:root{--black: hsl(0, 0%, 22%);--dark-grey: hsl(0, 0%, 70%);--grey: hsl(0, 0%, 86%);--light-grey: hsl(0, 0%, 95%)}html,body,#root,.app{height:100%;overscroll-behavior-y:none}.app{display:flex;background-color:var(--light-grey)}.nav{height:100%;width:240px;display:flex;flex-direction:column;gap:8px;transition:width .15s ease}.nav--collapsed{width:56px}.nav__actions{padding:8px}.nav button{width:100%}.nav--collapsed .nav__actions button{display:inline-flex;align-items:center;justify-content:center;padding:6px}.nav-toggle{position:fixed;bottom:12px;left:12px;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;z-index:10}.nav__sort{display:flex;justify-content:space-between;align-items:center}.nav__sort div{font-weight:700;font-size:12px;text-align:left;margin-bottom:8px;padding-left:4px;color:var(--dark-grey);cursor:pointer}.nav__sort div.nav__sort-item--active{color:var(--black)}.nav__notes{padding:8px 8px 60px;display:flex;flex-direction:column;overflow-y:auto}.nav__notes>div>*+*{margin-top:4px}div,p,span,small,button,ul,li{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.nav__note{padding:4px;width:100%;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px}.nav__note:hover,.nav__note:focus{background-color:var(--grey);color:var(--black)}button{background-color:#fff;border:2px solid var(--black);border-radius:6px;padding:4px 8px;font-weight:700;cursor:pointer}button:hover,button:focus{background-color:var(--black);color:#fff}.nav__note--active{background-color:var(--black);color:#fff;font-weight:700}main{flex-grow:1;display:flex;padding:8px 8px 8px 0}.active-note{display:flex;flex-direction:column;border-radius:10px;flex-grow:1}.active-note__header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.active-note__title{grid-column:2;font-weight:700;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.active-note__actions{grid-column:1;justify-self:start}.editor{flex:1;min-height:0;margin-top:8px;overflow-y:auto;background-color:#fff;border-radius:6px}.editor .tiptap{min-height:100%;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;outline:none}.editor .tiptap>*+*{margin-top:.75em}.editor .tiptap p,.editor .tiptap h1,.editor .tiptap h2,.editor .tiptap h3,.editor .tiptap h4,.editor .tiptap h5,.editor .tiptap h6{margin-top:0;margin-bottom:0}.editor .tiptap h1{font-size:1.6em}.editor .tiptap h2{font-size:1.35em}.editor .tiptap h3{font-size:1.15em}.editor .tiptap ul,.editor .tiptap ol{padding-left:4ch;margin:0}.editor .tiptap li>p{margin:0}.editor .tiptap blockquote{margin:0;padding-left:12px;border-left:3px solid var(--grey)}.editor .tiptap *{font-family:inherit}.editor .tiptap code,.editor .tiptap pre{font-size:inherit}.editor .tiptap code{background-color:var(--light-grey);border-radius:4px;padding:1px 4px}.editor .tiptap pre{background-color:var(--light-grey);border-radius:6px;padding:8px;overflow-x:auto}.editor .tiptap pre code{background:none;padding:0}.editor .tiptap .hljs-comment,.editor .tiptap .hljs-quote{color:gray;font-style:italic}.editor .tiptap .hljs-keyword,.editor .tiptap .hljs-selector-tag,.editor .tiptap .hljs-doctag,.editor .tiptap .hljs-meta .hljs-keyword{color:#913091}.editor .tiptap .hljs-string,.editor .tiptap .hljs-regexp,.editor .tiptap .hljs-addition{color:#22773e}.editor .tiptap .hljs-number,.editor .tiptap .hljs-literal,.editor .tiptap .hljs-symbol,.editor .tiptap .hljs-bullet{color:#b85814}.editor .tiptap .hljs-title,.editor .tiptap .hljs-section,.editor .tiptap .hljs-function .hljs-title{color:#205fb6}.editor .tiptap .hljs-built_in,.editor .tiptap .hljs-type,.editor .tiptap .hljs-class .hljs-title{color:#18818b}.editor .tiptap .hljs-attr,.editor .tiptap .hljs-attribute,.editor .tiptap .hljs-variable,.editor .tiptap .hljs-template-variable,.editor .tiptap .hljs-property{color:#b14825}.editor .tiptap .hljs-deletion{color:#bd2828}.editor .tiptap .hljs-emphasis{font-style:italic}.editor .tiptap .hljs-strong{font-weight:700}.editor .tiptap a{color:inherit;text-decoration:underline}@media screen and (min-width:728px){.app{padding:8px}main{margin-left:8px}.active-note__header{margin-bottom:8px}}