notra-editor 0.7.0 → 0.8.0

package/dist/themes/default/reader.css

@@ -1,16 +1,971 @@
-@import './shared.css';
+@charset "UTF-8";
+:root {
+  /****************** 
+   Basics
+   ******************/
+  overflow-wrap: break-word;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /****************** 
+   Colors variables
+   ******************/
+  /* Gray alpha (light mode) */
+  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
+  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
+  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
+  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
+  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
+  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
+  /* Gray (light mode) */
+  --tt-gray-light-50: rgba(250, 250, 250, 1);
+  --tt-gray-light-100: rgba(244, 244, 245, 1);
+  --tt-gray-light-200: rgba(234, 234, 235, 1);
+  --tt-gray-light-300: rgba(213, 214, 215, 1);
+  --tt-gray-light-400: rgba(166, 167, 171, 1);
+  --tt-gray-light-500: rgba(125, 127, 130, 1);
+  --tt-gray-light-600: rgba(83, 86, 90, 1);
+  --tt-gray-light-700: rgba(64, 65, 69, 1);
+  --tt-gray-light-800: rgba(44, 45, 48, 1);
+  --tt-gray-light-900: rgba(34, 35, 37, 1);
+  /* Gray alpha (dark mode) */
+  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
+  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
+  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
+  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
+  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
+  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
+  /* Gray (dark mode) */
+  --tt-gray-dark-50: rgba(25, 25, 26, 1);
+  --tt-gray-dark-100: rgba(32, 32, 34, 1);
+  --tt-gray-dark-200: rgba(45, 45, 47, 1);
+  --tt-gray-dark-300: rgba(70, 70, 73, 1);
+  --tt-gray-dark-400: rgba(99, 99, 105, 1);
+  --tt-gray-dark-500: rgba(124, 124, 131, 1);
+  --tt-gray-dark-600: rgba(163, 163, 168, 1);
+  --tt-gray-dark-700: rgba(192, 192, 195, 1);
+  --tt-gray-dark-800: rgba(224, 224, 225, 1);
+  --tt-gray-dark-900: rgba(245, 245, 245, 1);
+  /* Brand colors */
+  --tt-brand-color-50: rgba(239, 238, 255, 1);
+  --tt-brand-color-100: rgba(222, 219, 255, 1);
+  --tt-brand-color-200: rgba(195, 189, 255, 1);
+  --tt-brand-color-300: rgba(157, 138, 255, 1);
+  --tt-brand-color-400: rgba(122, 82, 255, 1);
+  --tt-brand-color-500: rgba(98, 41, 255, 1);
+  --tt-brand-color-600: rgba(84, 0, 229, 1);
+  --tt-brand-color-700: rgba(75, 0, 204, 1);
+  --tt-brand-color-800: rgba(56, 0, 153, 1);
+  --tt-brand-color-900: rgba(43, 25, 102, 1);
+  --tt-brand-color-950: hsla(257, 100%, 9%, 1);
+  /* Green */
+  --tt-color-green-inc-5: hsla(129, 100%, 97%, 1);
+  --tt-color-green-inc-4: hsla(129, 100%, 92%, 1);
+  --tt-color-green-inc-3: hsla(131, 100%, 86%, 1);
+  --tt-color-green-inc-2: hsla(133, 98%, 78%, 1);
+  --tt-color-green-inc-1: hsla(137, 99%, 70%, 1);
+  --tt-color-green-base: hsla(147, 99%, 50%, 1);
+  --tt-color-green-dec-1: hsla(147, 97%, 41%, 1);
+  --tt-color-green-dec-2: hsla(146, 98%, 32%, 1);
+  --tt-color-green-dec-3: hsla(146, 100%, 24%, 1);
+  --tt-color-green-dec-4: hsla(144, 100%, 16%, 1);
+  --tt-color-green-dec-5: hsla(140, 100%, 9%, 1);
+  /* Yellow */
+  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
+  --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
+  --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
+  --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
+  --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
+  --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
+  --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
+  --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
+  --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
+  --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
+  --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
+  /* Red */
+  --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
+  --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
+  --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
+  --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
+  --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
+  --tt-color-red-base: hsla(7, 100%, 54%, 1);
+  --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
+  --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
+  --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
+  --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
+  --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
+  /* Basic colors */
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(14, 14, 17, 1);
+  --transparent: rgba(255, 255, 255, 0);
+  /****************** 
+   Shadow variables
+   ******************/
+  /* Shadows Light */
+  --tt-shadow-elevated-md:
+  	0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+  	0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+  	0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+  	0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+  /************************************************** 
+        Radius variables 
+     **************************************************/
+  --tt-radius-xxs: 0.125rem; /* 2px */
+  --tt-radius-xs: 0.25rem; /* 4px */
+  --tt-radius-sm: 0.375rem; /* 6px */
+  --tt-radius-md: 0.5rem; /* 8px */
+  --tt-radius-lg: 0.75rem; /* 12px */
+  --tt-radius-xl: 1rem; /* 16px */
+  /************************************************** 
+        Transition variables 
+     **************************************************/
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  /****************** 
+   Contrast variables
+   ******************/
+  --tt-accent-contrast: 8%;
+  --tt-destructive-contrast: 8%;
+  --tt-foreground-contrast: 8%;
+}
+:root,
+:root *,
+:root ::before,
+:root ::after {
+  box-sizing: border-box;
+  transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
+}
+
+:root {
+  /************************************************** 
+       Global colors 
+   **************************************************/
+  /* Global colors - Light mode */
+  --tt-bg-color: var(--white);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-light-100);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-cursor-color: var(--tt-brand-color-500);
+  --tt-selection-color: rgba(157, 138, 255, 0.2);
+  --tt-card-bg-color: var(--white);
+  --tt-card-border-color: var(--tt-gray-light-a-100);
+}
+
+/* Global colors - Dark mode */
+.dark {
+  --tt-bg-color: var(--black);
+  --tt-border-color: var(--tt-gray-dark-a-200);
+  --tt-border-color-tint: var(--tt-gray-dark-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
+  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
+  --tt-cursor-color: var(--tt-brand-color-400);
+  --tt-selection-color: rgba(122, 82, 255, 0.2);
+  --tt-card-bg-color: var(--tt-gray-dark-50);
+  --tt-card-border-color: var(--tt-gray-dark-a-50);
+  --tt-shadow-elevated-md:
+  	0px 16px 48px 0px rgba(0, 0, 0, 0.5), 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
+  	0px 6px 8px 0px rgba(0, 0, 0, 0.22), 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Text colors */
+:root {
+  --tt-color-text-gray: hsl(45, 2%, 46%);
+  --tt-color-text-brown: hsl(19, 31%, 47%);
+  --tt-color-text-orange: hsl(30, 89%, 45%);
+  --tt-color-text-yellow: hsl(38, 62%, 49%);
+  --tt-color-text-green: hsl(148, 32%, 39%);
+  --tt-color-text-blue: hsl(202, 54%, 43%);
+  --tt-color-text-purple: hsl(274, 32%, 54%);
+  --tt-color-text-pink: hsl(328, 49%, 53%);
+  --tt-color-text-red: hsl(2, 62%, 55%);
+  --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
+  --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
+  --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
+  --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
+  --tt-color-text-green-contrast: hsla(126, 29%, 60%, 0.27);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 59%, 0.27);
+  --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
+  --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
+  --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
+}
+
+.dark {
+  --tt-color-text-gray: hsl(0, 0%, 61%);
+  --tt-color-text-brown: hsl(18, 35%, 58%);
+  --tt-color-text-orange: hsl(25, 53%, 53%);
+  --tt-color-text-yellow: hsl(36, 54%, 55%);
+  --tt-color-text-green: hsl(145, 32%, 47%);
+  --tt-color-text-blue: hsl(202, 64%, 52%);
+  --tt-color-text-purple: hsl(270, 55%, 62%);
+  --tt-color-text-pink: hsl(329, 57%, 58%);
+  --tt-color-text-red: hsl(1, 69%, 60%);
+  --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
+  --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
+  --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
+  --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
+  --tt-color-text-green-contrast: hsla(151, 55%, 39%, 0.2);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 43%, 0.2);
+  --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
+  --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
+  --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
+}
+
+/* Highlight colors */
+:root {
+  --tt-color-highlight-yellow: #fef9c3;
+  --tt-color-highlight-green: #dcfce7;
+  --tt-color-highlight-blue: #e0f2fe;
+  --tt-color-highlight-purple: #f3e8ff;
+  --tt-color-highlight-red: #ffe4e6;
+  --tt-color-highlight-gray: rgb(248, 248, 247);
+  --tt-color-highlight-brown: rgb(244, 238, 238);
+  --tt-color-highlight-orange: rgb(251, 236, 221);
+  --tt-color-highlight-pink: rgb(252, 241, 246);
+  --tt-color-highlight-yellow-contrast: #fbe604;
+  --tt-color-highlight-green-contrast: #c7fad8;
+  --tt-color-highlight-blue-contrast: #ceeafd;
+  --tt-color-highlight-purple-contrast: #e4ccff;
+  --tt-color-highlight-red-contrast: #ffccd0;
+  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
+  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
+  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
+  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
+}
+
+.dark {
+  --tt-color-highlight-yellow: #6b6524;
+  --tt-color-highlight-green: #509568;
+  --tt-color-highlight-blue: #6e92aa;
+  --tt-color-highlight-purple: #583e74;
+  --tt-color-highlight-red: #743e42;
+  --tt-color-highlight-gray: rgb(47, 47, 47);
+  --tt-color-highlight-brown: rgb(74, 50, 40);
+  --tt-color-highlight-orange: rgb(92, 59, 35);
+  --tt-color-highlight-pink: rgb(78, 44, 60);
+  --tt-color-highlight-yellow-contrast: #58531e;
+  --tt-color-highlight-green-contrast: #47855d;
+  --tt-color-highlight-blue-contrast: #5e86a1;
+  --tt-color-highlight-purple-contrast: #4c3564;
+  --tt-color-highlight-red-contrast: #643539;
+  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
+  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
+  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
+  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
+}
+
+.notra-prose {
+  --tt-collaboration-carets-label: var(--tt-gray-light-900);
+  --link-text-color: var(--tt-brand-color-500);
+  --thread-text: var(--tt-gray-light-900);
+  --placeholder-color: var(--tt-gray-light-a-400);
+  --thread-bg-color: var(--tt-color-yellow-inc-2);
+  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
+}
+.dark .notra-prose {
+  --tt-collaboration-carets-label: var(--tt-gray-dark-100);
+  --link-text-color: var(--tt-brand-color-400);
+  --thread-text: var(--tt-gray-dark-900);
+  --placeholder-color: var(--tt-gray-dark-a-400);
+  --thread-bg-color: var(--tt-color-yellow-dec-2);
+  --tiptap-ai-insertion-color: var(--tt-brand-color-400);
+}
+
+/* Ensure each top-level node has relative positioning
+   so absolutely positioned placeholders work correctly */
+.notra-prose > * {
+  position: relative;
+}
+
+/* =====================
+     CORE EDITOR STYLES
+     ===================== */
+.notra-prose {
+  white-space: pre-wrap;
+  outline: none;
+  caret-color: var(--tt-cursor-color);
+}
+.notra-prose p:not(:first-child):not(td p):not(th p) {
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: normal;
+  margin-top: 20px;
+}
+.notra-prose:not(.readonly):not(.ProseMirror-hideselection) ::selection {
+  background-color: var(--tt-selection-color);
+}
+.notra-prose:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
+  background: transparent;
+}
+.notra-prose .selection {
+  display: inline;
+  background-color: var(--tt-selection-color);
+}
+.notra-prose .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+  border-radius: var(--tt-radius-md);
+  background-color: var(--tt-selection-color);
+}
+.notra-prose .ProseMirror-hideselection {
+  caret-color: transparent;
+}
+.notra-prose.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+/* =====================
+     TEXT DECORATION
+     ===================== */
+.notra-prose a span {
+  text-decoration: underline;
+}
+.notra-prose s span {
+  text-decoration: line-through;
+}
+.notra-prose u span {
+  text-decoration: underline;
+}
+.notra-prose .tiptap-ai-insertion {
+  color: var(--tiptap-ai-insertion-color);
+}
+
+/* =====================
+     COLLABORATION
+     ===================== */
+.notra-prose .collaboration-carets__caret {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  pointer-events: none;
+  margin-left: -1px;
+  margin-right: -1px;
+  position: relative;
+  word-break: normal;
+}
+.notra-prose .collaboration-carets__label {
+  color: var(--tt-collaboration-carets-label);
+  border-radius: 0.25rem;
+  border-bottom-left-radius: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  left: -1px;
+  line-height: 1;
+  padding: 0.125rem 0.375rem;
+  position: absolute;
+  top: -1.3em;
+  user-select: none;
+  white-space: nowrap;
+}
+
+/* =====================
+     EMOJI
+     ===================== */
+.notra-prose [data-type=emoji] img {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  cursor: text;
+}
+
+/* =====================
+     LINKS
+     ===================== */
+.notra-prose a {
+  color: var(--link-text-color);
+  text-decoration: underline;
+}
+
+/* =====================
+     MENTION
+     ===================== */
+.notra-prose [data-type=mention] {
+  display: inline-block;
+  color: var(--tt-brand-color-500);
+}
+
+/* =====================
+     THREADS
+     ===================== */
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
+  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  color: var(--thread-text);
+  border-bottom: 2px dashed var(--tt-color-yellow-base);
+  font-weight: 600;
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected, .notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
+  background-color: var(--thread-bg-color);
+  border-bottom-color: transparent;
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
+  outline: 0.125rem solid var(--tt-color-yellow-base);
+  border-radius: var(--tt-radius-xs, 0.25rem);
+  overflow: hidden;
+  width: fit-content;
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
+  outline-width: 0.25rem;
+  outline-color: var(--tt-color-yellow-base);
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
+  outline-width: 0.25rem;
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
+  border-radius: 0.25rem;
+  border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
+  border-top: 0.125rem dashed var(--tt-color-yellow-base);
+  outline: 0.25rem solid transparent;
+}
+.notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered, .notra-prose .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
+  background-color: var(--tt-color-yellow-base);
+  outline-color: var(--tt-color-yellow-base);
+}
+.notra-prose .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
+  background-color: var(--tt-color-yellow-base);
+  border-color: transparent;
+  opacity: 0.5;
+}
+.notra-prose .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+/* =====================
+     PLACEHOLDER
+     ===================== */
+.is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: attr(data-placeholder);
+}
+
+.is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: "Write, type '/' for commands…";
+  font-style: italic;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+  width: 100%;
+  text-align: inherit;
+  left: 0;
+  right: 0;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
+  color: var(--placeholder-color);
+}
+
+/* =====================
+     DROPCURSOR
+     ===================== */
+.prosemirror-dropcursor-block,
+.prosemirror-dropcursor-inline {
+  background: var(--tt-brand-color-400) !important;
+  border-radius: 0.25rem;
+  margin-left: -1px;
+  margin-right: -1px;
+  width: 100%;
+  height: 0.188rem;
+  cursor: grabbing;
+}
+
+/* =====================
+     INDENT
+     ===================== */
+.notra-prose {
+  --tt-indent-unit: 24px;
+}
+.notra-prose [data-indent] {
+  transition: margin-left 0.2s ease-in-out;
+  margin-left: calc(var(--tt-indent-unit) * var(--tt-indent-level, 0));
+}
+
+.notra-prose h1,
+.notra-prose h2,
+.notra-prose h3,
+.notra-prose h4 {
+  position: relative;
+  color: inherit;
+  font-style: inherit;
+}
+.notra-prose > h1:first-child,
+.notra-prose > h2:first-child,
+.notra-prose > h3:first-child,
+.notra-prose > h4:first-child,
+.notra-prose > .ProseMirror-widget + h1,
+.notra-prose > .ProseMirror-widget + h2,
+.notra-prose > .ProseMirror-widget + h3,
+.notra-prose > .ProseMirror-widget + h4 {
+  margin-top: 0;
+}
+.notra-prose h1 {
+  font-size: 1.5em;
+  font-weight: 700;
+  margin-top: 3em;
+}
+.notra-prose h2 {
+  font-size: 1.25em;
+  font-weight: 700;
+  margin-top: 2.5em;
+}
+.notra-prose h3 {
+  font-size: 1.125em;
+  font-weight: 600;
+  margin-top: 2em;
+}
+.notra-prose h4 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 2em;
+}
+
+.notra-prose {
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+}
+.dark .notra-prose {
+  --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+  --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+  --tt-checklist-check-icon-color: var(--black);
+  --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+}
+
+/* =====================
+     LISTS
+     ===================== */
+.notra-prose ol,
+.notra-prose ul {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  padding-left: 1.5em;
+}
+.notra-prose ol:first-child,
+.notra-prose ul:first-child {
+  margin-top: 0;
+}
+.notra-prose ol:last-child,
+.notra-prose ul:last-child {
+  margin-bottom: 0;
+}
+.notra-prose ol ol,
+.notra-prose ol ul,
+.notra-prose ul ol,
+.notra-prose ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.notra-prose li p {
+  margin-top: 0;
+  line-height: 1.6;
+}
+.notra-prose ol {
+  list-style: decimal;
+}
+.notra-prose ol ol {
+  list-style: lower-alpha;
+}
+.notra-prose ol ol ol {
+  list-style: lower-roman;
+}
+.notra-prose ol ol ol ol {
+  list-style: decimal;
+}
+.notra-prose ol ol ol ol ol {
+  list-style: lower-alpha;
+}
+.notra-prose ol ol ol ol ol ol {
+  list-style: lower-roman;
+}
+.notra-prose ol ol ol ol ol ol ol {
+  list-style: decimal;
+}
+.notra-prose ol ol ol ol ol ol ol ol {
+  list-style: lower-alpha;
+}
+.notra-prose ol ol ol ol ol ol ol ol ol {
+  list-style: lower-roman;
+}
+.notra-prose ul:not([data-type=taskList]) {
+  list-style: disc;
+}
+.notra-prose ul:not([data-type=taskList]) ul {
+  list-style: circle;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul {
+  list-style: square;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul {
+  list-style: disc;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul ul {
+  list-style: circle;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul ul ul {
+  list-style: square;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul ul ul ul {
+  list-style: disc;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul ul ul ul ul {
+  list-style: circle;
+}
+.notra-prose ul:not([data-type=taskList]) ul ul ul ul ul ul ul ul {
+  list-style: square;
+}
+.notra-prose ul[data-type=taskList] {
+  padding-left: 0.25em;
+}
+.notra-prose ul[data-type=taskList] li {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.notra-prose ul[data-type=taskList] li:not(:has(> p:first-child)) {
+  list-style-type: none;
+}
+.notra-prose ul[data-type=taskList] li[data-checked=true] > div > p {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+.notra-prose ul[data-type=taskList] li[data-checked=true] > div > p span {
+  text-decoration: line-through;
+}
+.notra-prose ul[data-type=taskList] li label {
+  position: relative;
+  padding-top: 0.375rem;
+  padding-right: 0.5rem;
+}
+.notra-prose ul[data-type=taskList] li label input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.notra-prose ul[data-type=taskList] li label span {
+  display: block;
+  width: 1em;
+  height: 1em;
+  border: 1px solid var(--tt-checklist-border-color);
+  border-radius: var(--tt-radius-xs, 0.25rem);
+  position: relative;
+  cursor: pointer;
+  background-color: var(--tt-checklist-bg-color);
+  transition: background-color 80ms ease-out, border-color 80ms ease-out;
+}
+.notra-prose ul[data-type=taskList] li label span::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75em;
+  height: 0.75em;
+  background-color: var(--tt-checklist-check-icon-color);
+  opacity: 0;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+}
+.notra-prose ul[data-type=taskList] li label input[type=checkbox]:checked + span {
+  background: var(--tt-checklist-bg-active-color);
+  border-color: var(--tt-checklist-border-active-color);
+}
+.notra-prose ul[data-type=taskList] li label input[type=checkbox]:checked + span::before {
+  opacity: 1;
+}
+.notra-prose ul[data-type=taskList] li div {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+.notra-prose {
+  --blockquote-bg-color: var(--tt-gray-light-900);
+}
+.dark .notra-prose {
+  --blockquote-bg-color: var(--tt-gray-dark-900);
+}
+
+/* =====================
+     BLOCKQUOTE
+     ===================== */
+.notra-prose blockquote {
+  position: relative;
+  padding-left: 1em;
+  padding-top: 0.375em;
+  padding-bottom: 0.375em;
+  margin: 1.5rem 0;
+}
+.notra-prose blockquote p {
+  margin-top: 0;
+}
+.notra-prose blockquote::before, .notra-prose blockquote.is-empty::before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 0.25em;
+  background-color: var(--blockquote-bg-color);
+  content: "";
+  border-radius: 0;
+}
+
+.notra-prose {
+  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
+  --tt-codeblock-bg: var(--tt-gray-light-a-50);
+  --tt-codeblock-text: var(--tt-gray-light-a-800);
+  --tt-codeblock-border: var(--tt-gray-light-a-200);
+}
+.dark .notra-prose {
+  --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
+  --tt-codeblock-bg: var(--tt-gray-dark-a-50);
+  --tt-codeblock-text: var(--tt-gray-dark-a-800);
+  --tt-codeblock-border: var(--tt-gray-dark-a-200);
+}
+
+/* =====================
+   CODE FORMATTING
+   ===================== */
+.notra-prose code {
+  background-color: var(--tt-inline-code-bg-color);
+  color: var(--tt-inline-code-text-color);
+  border: 1px solid var(--tt-inline-code-border-color);
+  font-family: "JetBrains Mono NL", monospace;
+  font-size: 0.875em;
+  line-height: 1.4;
+  border-radius: 6px/0.375rem;
+  padding: 0.1em 0.2em;
+}
+.notra-prose pre {
+  background-color: var(--tt-codeblock-bg);
+  color: var(--tt-codeblock-text);
+  border: 1px solid var(--tt-codeblock-border);
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  padding: 1em;
+  font-size: 1rem;
+  border-radius: 6px/0.375rem;
+}
+.notra-prose pre code {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  -webkit-text-fill-color: inherit;
+  color: inherit;
+}
 
 /* =====================
-   Reader-specific Styles
+   Atom One Light (default)
    ===================== */
-.notra-reader {
-	font-family: var(--notra-font-body);
-	font-size: var(--notra-font-size);
-	line-height: var(--notra-line-height);
-	color: var(--notra-color-text);
+.notra-prose .hljs {
+  color: #383a42;
+  background: #fafafa;
+}
+
+.notra-prose .hljs-comment,
+.notra-prose .hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+.notra-prose .hljs-doctag,
+.notra-prose .hljs-formula,
+.notra-prose .hljs-keyword {
+  color: #a626a4;
 }
 
-/* Ensure native selection in reader mode */
-.notra-reader *::selection {
-	background-color: highlight;
+.notra-prose .hljs-deletion,
+.notra-prose .hljs-name,
+.notra-prose .hljs-section,
+.notra-prose .hljs-selector-tag,
+.notra-prose .hljs-subst {
+  color: #e45649;
+}
+
+.notra-prose .hljs-literal {
+  color: #0184bb;
+}
+
+.notra-prose .hljs-addition,
+.notra-prose .hljs-attribute,
+.notra-prose .hljs-meta .hljs-string,
+.notra-prose .hljs-regexp,
+.notra-prose .hljs-string {
+  color: #50a14f;
+}
+
+.notra-prose .hljs-built_in,
+.notra-prose .hljs-class .hljs-title,
+.notra-prose .hljs-title.class_ {
+  color: #c18401;
+}
+
+.notra-prose .hljs-attr,
+.notra-prose .hljs-number,
+.notra-prose .hljs-selector-attr,
+.notra-prose .hljs-selector-class,
+.notra-prose .hljs-selector-pseudo,
+.notra-prose .hljs-template-variable,
+.notra-prose .hljs-type,
+.notra-prose .hljs-variable {
+  color: #986801;
+}
+
+.notra-prose .hljs-bullet,
+.notra-prose .hljs-link,
+.notra-prose .hljs-meta,
+.notra-prose .hljs-selector-id,
+.notra-prose .hljs-symbol,
+.notra-prose .hljs-title {
+  color: #4078f2;
+}
+
+.notra-prose .hljs-emphasis {
+  font-style: italic;
+}
+
+.notra-prose .hljs-strong {
+  font-weight: bold;
+}
+
+.notra-prose .hljs-link {
+  text-decoration: underline;
+}
+
+/* =====================
+   Atom One Dark (.dark override)
+   ===================== */
+.dark .notra-prose .hljs {
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.dark .notra-prose .hljs-comment,
+.dark .notra-prose .hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.dark .notra-prose .hljs-doctag,
+.dark .notra-prose .hljs-formula,
+.dark .notra-prose .hljs-keyword {
+  color: #c678dd;
+}
+
+.dark .notra-prose .hljs-deletion,
+.dark .notra-prose .hljs-name,
+.dark .notra-prose .hljs-section,
+.dark .notra-prose .hljs-selector-tag,
+.dark .notra-prose .hljs-subst {
+  color: #e06c75;
+}
+
+.dark .notra-prose .hljs-literal {
+  color: #56b6c2;
+}
+
+.dark .notra-prose .hljs-addition,
+.dark .notra-prose .hljs-attribute,
+.dark .notra-prose .hljs-meta .hljs-string,
+.dark .notra-prose .hljs-regexp,
+.dark .notra-prose .hljs-string {
+  color: #98c379;
+}
+
+.dark .notra-prose .hljs-built_in,
+.dark .notra-prose .hljs-class .hljs-title,
+.dark .notra-prose .hljs-title.class_ {
+  color: #e6c07b;
+}
+
+.dark .notra-prose .hljs-attr,
+.dark .notra-prose .hljs-number,
+.dark .notra-prose .hljs-selector-attr,
+.dark .notra-prose .hljs-selector-class,
+.dark .notra-prose .hljs-selector-pseudo,
+.dark .notra-prose .hljs-template-variable,
+.dark .notra-prose .hljs-type,
+.dark .notra-prose .hljs-variable {
+  color: #d19a66;
+}
+
+.dark .notra-prose .hljs-bullet,
+.dark .notra-prose .hljs-link,
+.dark .notra-prose .hljs-meta,
+.dark .notra-prose .hljs-selector-id,
+.dark .notra-prose .hljs-symbol,
+.dark .notra-prose .hljs-title {
+  color: #61aeee;
+}
+
+.notra-prose {
+  --horizontal-rule-color: var(--tt-gray-light-a-200);
+}
+.dark .notra-prose {
+  --horizontal-rule-color: var(--tt-gray-dark-a-200);
+}
+
+/* =====================
+     HORIZONTAL RULE
+     ===================== */
+.notra-prose hr {
+  border: none;
+  height: 1px;
+  background-color: var(--horizontal-rule-color);
+}
+.notra-prose [data-type=horizontalRule] {
+  margin-top: 2.25em;
+  margin-bottom: 2.25em;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.notra-prose img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.notra-prose p > img {
+  display: inline-block;
+}
+.notra-prose > img:not([data-type=emoji] img) {
+  margin: 2rem 0;
+  outline: 0.125rem solid transparent;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+}
+.notra-prose img:not([data-type=emoji] img).ProseMirror-selectednode {
+  outline-color: var(--tt-brand-color-500);
+}
+.notra-prose .tiptap-thread:has(> img) {
+  margin: 2rem 0;
+}
+.notra-prose .tiptap-thread:has(> img) img {
+  outline: 0.125rem solid transparent;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+}
+.notra-prose .tiptap-thread img {
+  margin: 0;
 }