*{box-sizing:border-box}body{margin:0;background-color:var(--bg);color:var(--text)}:root{color-scheme:light dark;--text: light-dark(black, hsl(200, 12%, 80%));--text-muted: light-dark(hsl(0, 0%, 70%), hsl(200, 9%, 52%));--accent: light-dark(hsl(0, 0%, 22%), hsl(200, 16%, 74%));--on-accent: light-dark(white, hsl(200, 18%, 15%));--bg: light-dark(hsl(0, 0%, 95%), hsl(200, 16%, 16%));--surface: light-dark(white, hsl(200, 14%, 20%));--hover: light-dark(hsl(0, 0%, 86%), hsl(200, 13%, 28%));--border: light-dark(hsl(0, 0%, 86%), hsl(200, 12%, 30%));--code-bg: light-dark(hsl(0, 0%, 95%), hsl(200, 16%, 16%))}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}html,body,#root,.app{height:100%;overscroll-behavior-y:none}.app{display:flex;background-color:var(--bg)}.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,.theme-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}.theme-toggle{bottom:56px}.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(--text-muted);cursor:pointer}.nav__sort div.nav__sort-item--active{color:var(--accent)}.nav__notes{padding:8px 8px 104px;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(--hover);color:var(--accent)}button{background-color:var(--surface);color:var(--text);border:2px solid var(--accent);border-radius:6px;padding:4px 8px;font-weight:700;cursor:pointer}button:hover,button:focus{background-color:var(--accent);color:var(--on-accent)}.nav__note--active{background-color:var(--accent);color:var(--on-accent);font-weight:700}main{flex-grow:1;min-width:0;display:flex;padding:8px 8px 8px 0}.active-note{display:flex;flex-direction:column;border-radius:10px;flex-grow:1;min-width:0}.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:auto;background-color:var(--surface);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;overflow-wrap:anywhere}.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(--border)}.editor .tiptap *{font-family:inherit}.editor .tiptap code,.editor .tiptap pre{font-size:inherit}.editor .tiptap code{background-color:var(--code-bg);border-radius:4px;padding:1px 4px}.editor .tiptap pre{background-color:var(--code-bg);border-radius:6px;padding:8px;white-space:pre;overflow-wrap:normal;overflow-x:auto}.editor .tiptap pre code{background:none;padding:0}.editor .tiptap .hljs-comment,.editor .tiptap .hljs-quote{color:light-dark(hsl(0,0%,50%),hsl(0,0%,58%));font-style:italic}.editor .tiptap .hljs-keyword,.editor .tiptap .hljs-selector-tag,.editor .tiptap .hljs-doctag,.editor .tiptap .hljs-meta .hljs-keyword{color:light-dark(hsl(300,50%,38%),hsl(300,45%,72%))}.editor .tiptap .hljs-string,.editor .tiptap .hljs-regexp,.editor .tiptap .hljs-addition{color:light-dark(hsl(140,55%,30%),hsl(140,40%,64%))}.editor .tiptap .hljs-number,.editor .tiptap .hljs-literal,.editor .tiptap .hljs-symbol,.editor .tiptap .hljs-bullet{color:light-dark(hsl(25,80%,40%),hsl(25,80%,66%))}.editor .tiptap .hljs-title,.editor .tiptap .hljs-section,.editor .tiptap .hljs-function .hljs-title{color:light-dark(hsl(215,70%,42%),hsl(215,80%,74%))}.editor .tiptap .hljs-built_in,.editor .tiptap .hljs-type,.editor .tiptap .hljs-class .hljs-title{color:light-dark(hsl(185,70%,32%),hsl(185,50%,60%))}.editor .tiptap .hljs-attr,.editor .tiptap .hljs-attribute,.editor .tiptap .hljs-variable,.editor .tiptap .hljs-template-variable,.editor .tiptap .hljs-property{color:light-dark(hsl(15,65%,42%),hsl(15,70%,70%))}.editor .tiptap .hljs-deletion{color:light-dark(hsl(0,65%,45%),hsl(0,70%,70%))}.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}}