Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041@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: 253, 252, 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's default is a calculated tint of the accent, matching BaseThemeProvider's fallback when no explicit highlight-1 is set. */ --highlight-1: color-mix( in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75% ); --highlight-2: 237, 210, 128; --highlight-3: 255, 205, 195;
--list-marker-width: 38px; --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 (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% );}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* only gets used in codeblock for now */}
.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 { /*need this max-w-none because this classname conflicts with one that tailwind uses that has a max-w-930px on it*/ @apply max-w-none; @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;}/* A page link renders the linked page's own text (its first lines and the thumbnail), footnote refs included. Those belong to the other page, so give them a counter of their own rather than letting them advance this page's. */.pageLinkBlockWrapper { 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. */.editor-comment-side-item.editor-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 */.editor-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;}
.editor-comment-side-item:not(:hover):not(:focus-within):not( .editor-comment-side-focused ) { max-height: calc(6em + 16px); opacity: calc(var(--bg-page-alpha) * 0.85);}.editor-comment-side-item:not(:hover):not(:focus-within):not( .editor-comment-side-focused ) .editor-comment-message-content { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.editor-comment-side-item:not(:hover):not(:focus-within):not( .editor-comment-side-focused ) .editor-comment-thread-replies,.editor-comment-side-item:not(:hover):not(:focus-within):not( .editor-comment-side-focused ) .editor-comment-thread-actions { display: none;}
/* Expanded: the whole thread shows, scrolling within a page-height cap */.editor-comment-side-item:hover,.editor-comment-side-item:focus-within,.editor-comment-side-item.editor-comment-side-focused { max-height: none; z-index: 2; opacity: 1;}.editor-comment-side-item:hover .editor-comment-thread,.editor-comment-side-item:focus-within .editor-comment-thread,.editor-comment-side-item.editor-comment-side-focused .editor-comment-thread { max-height: calc(100dvh - 7rem); overflow-y: auto;}.editor-comment-side-item:hover .editor-comment-thread-reply-count,.editor-comment-side-item:focus-within .editor-comment-thread-reply-count,.editor-comment-side-item.editor-comment-side-focused .editor-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 line melting into the base of the pill via the #yjs-cursor-goo SVG filter. Three layers: a goo-filtered layer (the line stub + a small blob that the line melts into at the pill's base), the crisp caret line outside the filter, and the crisp name pill carrying the visible text. --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; /* horizontal half-extent of the goo/overlay boxes — spans only the junction near the caret where the line melts into the pill's base; the full-width name pill is painted crisply by .yjs-cursor-label */ --goo-pad-x: 16px; --goo-pad-top: 26px; /* half the rest-state 7px dot; the edge-flipped pill pins an end cap here so every growth direction coincides at the dot */ --cursor-dot-r: 3.5px; /* 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;}/* edge-adjacent cursors (class set by RemoteCursor at reveal time): a centered pill would cross the block's clip edge, so pin the end cap nearest the edge on the caret and grow toward the room instead. At dot size all anchorings coincide, so the class switch never moves pixels. */.yjs-cursor-expand-right .yjs-cursor-pill { transform: translate(calc(-1 * var(--cursor-dot-r)), -50%); transform-origin: var(--cursor-dot-r) 50%;}.yjs-cursor-expand-left .yjs-cursor-pill { transform: translate(calc(-100% + var(--cursor-dot-r)), -50%); transform-origin: calc(100% - var(--cursor-dot-r)) 50%;}/* the crisp, full-width name pill — the visible pill body (the goo layer renders only the junction blob) */.yjs-cursor-label { background-color: var(--cursor-color, orange); 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);}.yjs-cursor-expand-right.yjs-cursor-contract .yjs-cursor-pill { transform: translate(calc(-1 * var(--cursor-dot-r)), -50%) translateY(var(--cursor-contract-shift, 0.3em)) scale(0.7);}.yjs-cursor-expand-left.yjs-cursor-contract .yjs-cursor-pill { transform: translate(calc(-100% + var(--cursor-dot-r)), -50%) translateY(var(--cursor-contract-shift, 0.3em)) scale(0.7);}
/* 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. *//* the goo pill stays a small blob — just the junction the caret line melts into at the pill's base; the visible full-width pill is the crisp .yjs-cursor-label drawn on top */.yjs-cursor-open .yjs-cursor-goo .yjs-cursor-pill { max-width: 26px;}.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; }}