Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
CSS
at perf/paste
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983@import "tailwindcss";
@theme inline { --breakpoint-*: initial; --breakpoint-sm: 640px; --breakpoint-md: 960px; --breakpoint-lg: 1280px;
--radius-*: initial; --radius-none: 0; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-full: 9999px;
--color-*: initial; --color-inherit: inherit; --color-transparent: transparent; --color-current: currentColor; --color-primary: rgb(var(--primary)); --color-secondary: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 25% ); --color-tertiary: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 55% ); --color-border: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 75% ); --color-border-light: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 85% ); --color-bg-light: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 95% ); --color-white: #ffffff; --color-accent-1: rgb(var(--accent-1)); --color-accent-2: rgb(var(--accent-2)); --color-accent-contrast: rgb(var(--accent-contrast)); --color-bg-leaflet: rgb(var(--bg-leaflet)); --color-bg-page: rgb(var(--bg-page)); --color-highlight-1: var(--highlight-1); --color-highlight-2: rgb(var(--highlight-2)); --color-highlight-3: rgb(var(--highlight-3)); --color-test: #e18181; --color-test-blue: #48d1ef;
--text-*: initial; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.625rem; --text-2xl: 2rem;
--shadow-sm: 0.9px 1.5px 1.7px -1.8px rgba(var(--primary), 0.2), 4.2px 6.9px 7.8px -3.5px rgba(var(--primary), 0.15); --shadow-md: 1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1), 5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15);
--font-sans: var(--font-quattro); --font-serif: Garamond;}
@utility w-fill { width: -webkit-fill-available; width: -moz-available; width: stretch; width: 100%;}
/* The default border color has changed to `currentcolor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border color utility to any element that depends on these defaults.*/@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentcolor); }}
@layer base { :root { --bg-leaflet: 240, 247, 250; --bg-page: 255, 255, 255; --bg-page-alpha: 1;
--primary: 39, 39, 39;
--accent-1: 87, 130, 43; --accent-2: 255, 255, 255; --accent-contrast: 87, 130, 43; --accent-1-is-contrast: "true"; --accent-contrast-similar-to-text: 0; --link-underline: none; --accent-light: color-mix( in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85% );
--highlight-1: 255, 177, 177; --highlight-2: 253, 245, 203; --highlight-3: 255, 205, 195;
--list-marker-width: 36px; --page-width-unitless: min( var(--page-width-setting), calc(var(--leaflet-width-unitless) - 12) ); --page-width-units: min( calc(var(--page-width-unitless) * 1px), calc(100vw - 12px) );
--gripperSVG: url("/gripperPattern.svg"); --gripperSVGVertical: url("/gripperPatternVertical.svg"); --gripperSVG2: url("/gripperPattern2.svg"); --hatchSVG: url("/hatchPattern.svg"); --wavySVG: (url("/RSVPBackground/wavy.svg"));
--safe-padding-bottom: calc(env(safe-area-inset-bottom) - 8px); } @media (max-width: 640px) { :root { --list-marker-width: 20px; } }
@media (min-width: 640px) { :root { /*picks between max width and screen width with 64px of padding*/ --page-width-unitless: min( var(--page-width-setting), calc(var(--leaflet-width-unitless) - 128) ); --page-width-units: min( calc(var(--page-width-unitless) * 1px), calc(100vw - 128px) ); } }
html, body { @apply h-full; @apply p-0; @apply overscroll-y-none; min-height: -webkit-fill-available; min-height: stretch; min-height: -moz-available; @apply font-sans; font-synthesis: none; }
#__next { height: 100%; }
/* START FONT STYLING */ h1 { @apply text-2xl; @apply font-bold; }
h2 { @apply text-xl; @apply font-bold; }
h3 { @apply text-lg; @apply font-bold; }
h4 { @apply text-base; @apply font-bold; }
p { @apply text-base; }
small { @apply text-sm; }
a { @apply text-accent-contrast; @apply hover:cursor-pointer; @apply hover:underline; }
.postPageContent a { text-decoration-line: var(--link-underline, none); }
p { font-size: inherit; }
::placeholder { @apply text-tertiary; @apply italic; }
/* Scope custom fonts to document content only (not sidebar/UI chrome) */ .pageScrollWrapper, .footnote-side-column, .footnote-popover, #interaction-drawer { font-family: var(--theme-font, var(--font-quattro)); font-size: var(--theme-font-base-size, 16px); }
.pageScrollWrapper h1, .pageScrollWrapper h2, .pageScrollWrapper h3, .pageScrollWrapper h4 { font-family: var( --theme-heading-font, var(--theme-font, var(--font-quattro)) ); }
/* Scale heading sizes relative to the custom base font size */ .pageScrollWrapper h1 { font-size: 2em; } .pageScrollWrapper h2 { font-size: 1.625em; } .pageScrollWrapper h3 { font-size: 1.125em; } .pageScrollWrapper h4 { font-size: 1em; }
/* Scale text size classes relative to the custom base font size. Tailwind's text-sm/text-base/text-lg compile to fixed rem values which ignore the custom base size set on .pageScrollWrapper. */ .pageScrollWrapper .textSizeSmall { font-size: 0.875em; } .pageScrollWrapper .textSizeLarge { font-size: 1.125em; }
.pageScrollWrapper pre { font-family: var(--theme-font, var(--font-quattro)); }
/* Apply custom fonts to publication homepage */ .pubWrapper { font-family: var(--theme-font, var(--font-quattro)); }
.pubWrapper h1, .pubWrapper h2, .pubWrapper h3, .pubWrapper h4 { font-family: var( --theme-heading-font, var(--theme-font, var(--font-quattro)) ); } /*END FONT STYLING*/
/* START GLOBAL STYLING */
/* END GLOBAL STYLING */}
img { font-size: 0;}
button:hover { cursor: pointer;}
blockquote { margin: 0;}
/* Hide scrollbar for Chrome, Safari and Opera */.no-scrollbar::-webkit-scrollbar { display: none;}.no-scrollbar { scrollbar-width: none;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}input[type="number"] { -moz-appearance: textfield;}
::-webkit-calendar-picker-indicator { mask-image: url(/timeInputIcon.svg); mask-size: 100% 100%; background-image: url(/gripperPattern1.svg); background-color: color-mix( in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 55% );}
.inline-code { display: inline; font-size: 1em; @apply bg-border-light; @apply font-mono; @apply px-px; @apply py-px; @apply -mx-px; @apply -my-px; @apply rounded-[4px]; @apply box-decoration-clone;}
pre.shiki code { display: block;}
pre.shiki { @apply sm:p-3; @apply p-2; @apply rounded-md; @apply overflow-auto; @apply sm:min-h-12; @apply min-h-10;
@media (min-width: 640px) { @apply p-3; }}
.highlight:has(+ .highlight) { @apply rounded-r-none;}.highlight + .highlight { @apply rounded-l-none;}
.highlight { @apply px-px; @apply py-px; @apply -mx-px; @apply -my-px; @apply rounded-[4px]; @apply box-decoration-clone;}
.selection-highlight { background-color: transparent; @apply py-[1.5px];}
.block-focused .selection-highlight { background-color: Highlight;}
.block-focused:focus-within .selection-highlight { background-color: transparent;}
.ProseMirror .atMention.ProseMirror-selectednode,.ProseMirror .didMention.ProseMirror-selectednode { @apply text-accent-contrast; @apply px-0.5; @apply rounded-[4px]; @apply box-decoration-clone; background-color: rgba(var(--accent-contrast), 0.2); border: 1px solid rgba(var(--accent-contrast), 1);}
/* While cmd/ctrl is held, links in the editor act as clickable links */body.cmd-held .ProseMirror a { cursor: pointer !important;}
.mention { @apply cursor-pointer; @apply text-accent-contrast; @apply px-0.5; @apply rounded-[4px]; @apply box-decoration-clone; background-color: rgba(var(--accent-contrast), 0.2); border: 1px solid transparent; display: inline; white-space: normal;}
.multiselected .block-focused:focus-within .selection-highlight { background-color: transparent;}
.transparent-outline { @apply outline-solid; @apply outline-transparent;}
.selected-outline { @apply border; @apply focus:outline-solid; @apply focus:outline-2; @apply focus:outline-offset-1; @apply focus-within:outline-solid; @apply focus-within:outline-2; @apply focus-within:outline-offset-1; @apply hover:outline-solid; @apply hover:outline-2; @apply hover:outline-offset-1;}
.input-with-border { @apply border; @apply border-border; @apply bg-bg-page; @apply rounded-md; @apply px-1; @apply py-0.5; @apply text-primary; @apply hover:border-tertiary;
@apply focus:border-tertiary; @apply focus:outline-solid; @apply focus:outline-tertiary; @apply focus:outline-2; @apply focus:outline-offset-1;
@apply focus-within:border-tertiary; @apply focus-within:outline-solid; @apply focus-within:outline-tertiary; @apply focus-within:outline-2; @apply focus-within:outline-offset-1;
@apply disabled:border-border-light; @apply disabled:hover:border-border-light; @apply disabled:bg-border-light; @apply disabled:text-tertiary;}
.block-border { @apply border; @apply border-border-light; @apply rounded-lg; @apply outline-solid; @apply outline-offset-1; @apply outline-2; @apply outline-transparent; @apply hover:border-border;}
.block-border-selected { @apply border; @apply border-border; @apply rounded-lg; @apply outline-solid; @apply outline-offset-1; @apply outline-2; @apply outline-border;}
.blockquote { @apply border-l-2; @apply border-border; @apply pl-3; @apply ml-2;}
.container { @apply border; @apply border-border-light; @apply rounded-md; background: rgba(var(--bg-page), var(--bg-page-alpha));}
.transparent-container { @apply border; @apply border-border-light; @apply rounded-md;}
.light-container { background: var(--color-bg-light); @apply border; @apply border-border-light; @apply rounded-md;}
.frosted-container { background: rgba(var(--bg-page), 0.75); @apply border; @apply border-bg-page; @apply rounded-md;}
.opaque-container { @apply bg-bg-page; @apply border; @apply border-border-light; @apply rounded-md;}
.accent-container { background: color-mix( in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85% ); @apply rounded-md;}
.menuItem { @apply text-secondary; @apply hover:text-secondary; @apply data-highlighted:bg-[var(--accent-light)]; @apply data-highlighted:outline-none; @apply hover:bg-[var(--accent-light)]; @apply border; @apply border-transparent; text-align: left; font-weight: 800; padding: 0.25rem 0.5rem; border-radius: 0.25rem; outline: none !important; cursor: pointer; background-color: transparent; display: flex; gap: 0.5rem;
:hover { text-decoration: none !important; background-color: rgb(var(--accent-light)); }}
.pwa-padding { padding-top: calc(env(safe-area-inset-top) - 8px) !important;}.pwa-padding-bottom { padding-bottom: var(--safe-padding-bottom) !important;}
.pwa-padding-x { @media (display-mode: standalone) { padding-left: 1rem; padding-right: 1rem; }}
/* animation for atmosphere logo carousel */@keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}
.logo-scroll-track { animation: logo-scroll 50s linear infinite; will-change: transform;}
/* animation for new star in publish success illustration */@keyframes new-star-animation { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(0.1); opacity: 0; } 80% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }}
.new-star { animation-name: new-star-animation; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in;}
.footnote-scope { counter-reset: footnote;}.footnote-ref { counter-increment: footnote; cursor: pointer; color: rgb(var(--color-tertiary)); opacity: 0.7;}.footnote-ref::after { content: counter(footnote); vertical-align: super; padding: 4px; margin: -4px -4px -4px -2px; font-size: 75%; line-height: 0rem;}/* -ml-0.5 -mr-1 -my-1 p-1 */.footnote-ref ~ br.ProseMirror-trailingBreak { display: inline; width: 4px;}.footnote-ref ~ img.ProseMirror-separator { display: none;}
.footnote-side-enter { animation: footnote-fade-in 200ms ease-out;}@keyframes footnote-fade-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); }}
@keyframes mobile-sidebar-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); }}@keyframes mobile-sidebar-slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); }}.mobile-sidebar-content[data-state="open"] { animation: mobile-sidebar-slide-in 80ms ease-out;}.mobile-sidebar-content[data-state="closed"] { animation: mobile-sidebar-slide-out 80ms ease-in;}
.footnote-side-item { overflow: hidden; transition: max-height 200ms ease, opacity 200ms ease; background: rgba(var(--bg-page), var(--bg-page-alpha)); border-radius: 4px; padding: 4px 6px;}
.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) { max-height: calc(4.5em + 8px); opacity: calc(var(--bg-page-alpha) * 0.7);}.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) .footnote-item > div:last-of-type { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.footnote-side-item:hover,.footnote-side-item:focus-within,.footnote-side-item.footnote-side-focused { max-height: none; overflow: visible; opacity: var(--bg-page-alpha); z-index: 1; background: rgba(var(--bg-page), 1);}
/* Commented ranges in the text */.comment-anchor { cursor: pointer; background: color-mix(in oklab, rgb(var(--accent-contrast)), transparent 88%); border-bottom: 2px solid color-mix(in oklab, rgb(var(--accent-contrast)), transparent 60%);}.comment-draft-anchor { background: color-mix(in oklab, rgb(var(--accent-contrast)), transparent 75%);}
/* Two-way hover pairing: hovering a comment anchor borders its thread in the side column and vice versa. The inline anchor highlight is injected as a <style> tag by CommentAnchorHover (ProseMirror owns those spans); this is the side-column thread half. */.comment-side-item.comment-side-hovered { border-color: rgb(var(--accent-contrast));}
/* Comment threads in the side column render in a box matching the page background, truncated unless hovered/focused */.comment-side-item { overflow: hidden; transition: max-height 200ms ease, opacity 200ms ease; background: rgb(var(--bg-page)); border: 1px solid var(--color-border-light); border-radius: 8px; padding: 6px 8px;}
.comment-side-item:not(:hover):not(:focus-within):not(.comment-side-focused) { max-height: calc(6em + 16px); opacity: calc(var(--bg-page-alpha) * 0.85);}.comment-side-item:not(:hover):not(:focus-within):not(.comment-side-focused) .comment-message-content { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.comment-side-item:not(:hover):not(:focus-within):not(.comment-side-focused) .comment-thread-replies,.comment-side-item:not(:hover):not(:focus-within):not(.comment-side-focused) .comment-thread-actions { display: none;}
/* Expanded: the whole thread shows, scrolling within a page-height cap */.comment-side-item:hover,.comment-side-item:focus-within,.comment-side-item.comment-side-focused { max-height: none; z-index: 2; opacity: 1;}.comment-side-item:hover .comment-thread,.comment-side-item:focus-within .comment-thread,.comment-side-item.comment-side-focused .comment-thread { max-height: calc(100dvh - 7rem); overflow-y: auto;}.comment-side-item:hover .comment-thread-reply-count,.comment-side-item:focus-within .comment-thread-reply-count,.comment-side-item.comment-side-focused .comment-thread-reply-count { display: none;}
.toastError a { color: var(--color-white);}
/* Collaborative cursors (yCursorPlugin + collabCursorBuilder): a caret line with a dot on its tip. Hover contracts the caret in anticipation, then springs it open into a name pill, the shapes melting together via the #yjs-cursor-goo SVG filter. Three layers: a goo-filtered layer (line stub + pill blob with transparent sizing text), the crisp caret line outside the filter, and a transparent twin pill carrying the visible text with identical bounds in every state. --cursor-color and the spring easing variables are set inline per cursor by the builder. *//* 0×0 positioned anchor next to the editor; carets are positioned inside it from viewport-rect deltas, so surrounding layout doesn't matter */.yjs-cursor-layer { position: absolute; width: 0; height: 0; overflow: visible; pointer-events: none;}.ProseMirror-yjs-cursor { --caret-w: 2.3px; /* how much the caret stretches upward when open, lifting the pill clear of the text */ --cursor-lift: 10px; /* the goo layer needs real dimensions or the SVG filter region clips */ --goo-pad-x: 130px; --goo-pad-top: 26px; /* left/top/height are set inline per cursor from view.coordsAtPos */ position: absolute; width: 0; pointer-events: none;}.yjs-cursor-goo,.yjs-cursor-overlay { position: absolute; left: calc(-1 * var(--goo-pad-x)); top: calc(-1 * var(--goo-pad-top)); width: calc(var(--goo-pad-x) * 2); height: calc(100% + var(--goo-pad-top)); pointer-events: none;}.yjs-cursor-goo { filter: url(#yjs-cursor-goo);}.yjs-cursor-line,.yjs-cursor-stub { position: absolute; width: var(--caret-w); border-radius: 999px; background-color: var(--cursor-color, orange); transform: translateX(-50%); transition: transform 154ms ease, width 154ms ease, top 154ms ease, height 154ms ease;}.yjs-cursor-line { left: 0; top: 0; height: 100%; transform-origin: 50% 100%; pointer-events: auto;}.yjs-cursor-stub { left: var(--goo-pad-x); top: var(--goo-pad-top); height: 12px;}.yjs-cursor-pill { position: absolute; left: var(--goo-pad-x); top: var(--goo-pad-top); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: max-content; max-width: 7px; height: 7px; border-radius: 999px; overflow: hidden; background-color: var(--cursor-color, orange); transition: transform 154ms ease, max-width 154ms ease, height 154ms ease, top 154ms ease;}.yjs-cursor-label { background-color: transparent; pointer-events: auto;}/* invisible enlarged hover target around the 7px dot */.yjs-cursor-hit { position: absolute; left: var(--goo-pad-x); top: var(--goo-pad-top); width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 999px; outline: none; pointer-events: auto;}.yjs-cursor-text { padding: 1px 10px 0; font-family: inherit; font-size: 11px; font-weight: 500; font-style: normal; line-height: 1; white-space: nowrap; color: var(--cursor-text-color, white); user-select: none;}.yjs-cursor-sizer { color: transparent;}.yjs-cursor-label .yjs-cursor-text { opacity: 0; transition: opacity 154ms ease;}
/* contract: anticipation squash — the caret shrinks toward its base while the dot (and the text twin) ride down to stay on the tip. --cursor-contract-shift is 22% of the caret height, set inline. */.yjs-cursor-contract .yjs-cursor-line { transform: translateX(-50%) scaleY(0.78); transition: transform 112ms cubic-bezier(0.4, 0, 0.6, 1);}.yjs-cursor-contract .yjs-cursor-stub { transform: translateX(-50%) translateY(var(--cursor-contract-shift, 0.3em)); transition: transform 112ms cubic-bezier(0.4, 0, 0.6, 1);}.yjs-cursor-contract .yjs-cursor-pill { transform: translate(-50%, -50%) translateY(var(--cursor-contract-shift, 0.3em)) scale(0.7); transition: transform 112ms cubic-bezier(0.4, 0, 0.6, 1);}
/* open: transforms spring back to identity while the caret thickens and stretches upward on the spring, the stub and pill riding the lifted tip so the pill sits clear of the text. Never spring the clamped max-width — the clipped overshoot flickers — ease it out instead. */.yjs-cursor-open .yjs-cursor-line,.yjs-cursor-open .yjs-cursor-stub { width: 3.45px;}.yjs-cursor-open .yjs-cursor-line { top: calc(-1 * var(--cursor-lift)); height: calc(100% + var(--cursor-lift)); transition: transform var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), width var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), top var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), height var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1));}.yjs-cursor-open .yjs-cursor-stub { top: calc(var(--goo-pad-top) - var(--cursor-lift)); transition: transform var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), width var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), top var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1));}.yjs-cursor-open .yjs-cursor-pill { top: calc(var(--goo-pad-top) - var(--cursor-lift)); max-width: 240px; height: 20px; transition: transform var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), top var(--yjs-spring-dur, 400ms) var(--yjs-spring-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), max-width 210ms cubic-bezier(0.25, 0.8, 0.35, 1), height 210ms cubic-bezier(0.25, 0.8, 0.35, 1);}.yjs-cursor-open .yjs-cursor-label .yjs-cursor-text { opacity: 1; transition: opacity 182ms ease 84ms;}
@media (prefers-reduced-motion: reduce) { .ProseMirror-yjs-cursor, .ProseMirror-yjs-cursor * { transition: none !important; }}