@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); /* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ /* This file is created by the copy-css-files.mjs script in packages/tldraw. */ /* It combines @tldraw/editor's editor.css and tldraw's ui.css */ /* @tldraw/editor */ .tl-container { width: 100%; height: 100%; font-size: 12px; /* Spacing */ --tl-space-1: 2px; --tl-space-2: 4px; --tl-space-3: 8px; --tl-space-4: 12px; --tl-space-5: 16px; --tl-space-6: 20px; --tl-space-7: 28px; --tl-space-8: 32px; --tl-space-9: 64px; --tl-space-10: 72px; /* Radius */ --tl-radius-0: 2px; --tl-radius-1: 4px; --tl-radius-2: 6px; --tl-radius-3: 9px; --tl-radius-4: 11px; /* Canvas z-index */ --tl-layer-canvas-hidden: -999999; --tl-layer-canvas-background: 100; --tl-layer-canvas-grid: 150; --tl-layer-watermark: 200; --tl-layer-canvas-shapes: 300; --tl-layer-canvas-overlays: 500; --tl-layer-canvas-in-front: 600; --tl-layer-canvas-blocker: 10000; /* Canvas overlays z-index */ --tl-layer-overlays-collaborator-scribble: 10; --tl-layer-overlays-collaborator-brush: 20; --tl-layer-overlays-collaborator-shape-indicator: 30; --tl-layer-overlays-user-scribble: 40; --tl-layer-overlays-user-brush: 50; --tl-layer-overlays-user-snapline: 90; --tl-layer-overlays-selection-fg: 100; /* User handles need to be above selection edges / corners, matters for sticky note clone handles */ --tl-layer-overlays-user-handles: 105; --tl-layer-overlays-user-indicator-hint: 110; --tl-layer-overlays-custom: 115; --tl-layer-overlays-collaborator-cursor-hint: 120; --tl-layer-overlays-collaborator-cursor: 130; /* Text editor z-index */ --tl-layer-text-container: 1; --tl-layer-text-content: 3; --tl-layer-text-editor: 4; /* Error fallback z-index */ --tl-layer-error-overlay: 1; --tl-layer-error-canvas: 2; --tl-layer-error-canvas-after: 3; --tl-layer-error-content: 4; /* Misc */ --tl-zoom: 1; /* Cursor SVGs */ --tl-cursor-none: none; --tl-cursor-default: url("data:image/svg+xml,") 12 8, default; --tl-cursor-pointer: url("data:image/svg+xml,") 14 10, pointer; --tl-cursor-cross: url("data:image/svg+xml,") 16 16, crosshair; --tl-cursor-move: url("data:image/svg+xml,") 16 16, move; --tl-cursor-grab: url("data:image/svg+xml,") 16 16, grab; --tl-cursor-grabbing: url("data:image/svg+xml,") 16 16, grabbing; --tl-cursor-text: url("data:image/svg+xml,") 4 10, text; --tl-cursor-zoom-in: url("data:image/svg+xml,") 16 16, zoom-in; --tl-cursor-zoom-out: url("data:image/svg+xml,") 16 16, zoom-out; /* These cursor values get programmatically overridden */ /* They're just here to help your editor autocomplete */ --tl-cursor: var(--tl-cursor-default); --tl-cursor-resize-edge: ew-resize; --tl-cursor-resize-corner: nesw-resize; --tl-cursor-ew-resize: ew-resize; --tl-cursor-ns-resize: ns-resize; --tl-cursor-nesw-resize: nesw-resize; --tl-cursor-nwse-resize: nwse-resize; --tl-cursor-rotate: pointer; --tl-cursor-nwse-rotate: pointer; --tl-cursor-nesw-rotate: pointer; --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); /* fonts */ --tl-font-draw: 'tldraw_draw', sans-serif; --tl-font-sans: 'tldraw_sans', sans-serif; --tl-font-serif: 'tldraw_serif', serif; --tl-font-mono: 'tldraw_mono', monospace; /* text outline */ --tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline-reference: 0 var(--tl-text-outline-b) 0 var(--tl-color-background), 0 var(--tl-text-outline-a) 0 var(--tl-color-background), var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background), var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background), var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background), var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background); --tl-text-outline: var(--tl-text-outline-reference); /* own properties */ position: relative; inset: 0px; height: 100%; width: 100%; overflow: clip; color: var(--tl-color-text); } .tl-theme__light { /* Canvas */ --tl-color-snap: hsl(0, 76%, 60%); --tl-color-selection-fill: hsl(210, 100%, 56%, 24%); --tl-color-selection-stroke: hsl(214, 84%, 56%); --tl-color-background: hsl(210, 20%, 98%); --tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%); --tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%); --tl-color-grid: hsl(0, 0%, 43%); /* UI */ --tl-color-low: hsl(204, 16%, 94%); --tl-color-low-border: hsl(204, 16%, 92%); --tl-color-culled: hsl(204, 14%, 93%); --tl-color-muted-none: hsl(0, 0%, 0%, 0%); --tl-color-muted-0: hsl(0, 0%, 0%, 2%); --tl-color-muted-1: hsl(0, 0%, 0%, 10%); --tl-color-muted-2: hsl(0, 0%, 0%, 4.3%); --tl-color-hint: hsl(0, 0%, 0%, 5.5%); --tl-color-overlay: hsl(0, 0%, 0%, 20%); --tl-color-divider: hsl(0, 0%, 91%); --tl-color-panel: hsl(0, 0%, 99%); --tl-color-panel-contrast: hsl(0, 0%, 100%); --tl-color-panel-overlay: hsl(0, 0%, 100%, 82%); --tl-color-panel-transparent: hsla(0, 0%, 99%, 0%); --tl-color-selected: hsl(214, 84%, 56%); --tl-color-selected-contrast: hsl(0, 0%, 100%); --tl-color-focus: hsl(219, 65%, 50%); --tl-color-tooltip: hsla(200, 14%, 4%, 1); /* Text */ --tl-color-text: hsl(0, 0%, 0%); --tl-color-text-0: hsl(0, 0%, 11%); --tl-color-text-1: hsl(0, 0%, 18%); --tl-color-text-3: hsl(204, 4%, 45%); --tl-color-text-shadow: hsl(0, 0%, 100%); --tl-color-text-highlight: hsl(52, 100%, 50%); --tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05); /* Named */ --tl-color-primary: hsl(214, 84%, 56%); --tl-color-success: hsl(123, 46%, 34%); --tl-color-info: hsl(201, 98%, 41%); --tl-color-warning: hsl(27, 98%, 47%); --tl-color-danger: hsl(0, 90%, 43%); --tl-color-laser: hsl(0, 100%, 50%); /* Shadows */ --tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%); --tl-shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); --tl-shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); --tl-shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); } .tl-theme__dark { /* Canvas */ --tl-color-snap: hsl(0, 76%, 60%); --tl-color-selection-fill: hsl(209, 100%, 57%, 20%); --tl-color-selection-stroke: hsl(214, 84%, 56%); --tl-color-background: hsl(240, 5%, 6.5%); --tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%); --tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%); --tl-color-grid: hsl(0, 0%, 40%); /* UI */ --tl-color-low: hsl(260, 4.5%, 10.5%); --tl-color-low-border: hsl(207, 10%, 10%); --tl-color-culled: hsl(210, 11%, 19%); --tl-color-muted-none: hsl(0, 0%, 100%, 0%); --tl-color-muted-0: hsl(0, 0%, 100%, 2%); --tl-color-muted-1: hsl(0, 0%, 100%, 10%); --tl-color-muted-2: hsl(0, 0%, 100%, 5%); --tl-color-hint: hsl(0, 0%, 100%, 7%); --tl-color-overlay: hsl(0, 0%, 0%, 50%); --tl-color-divider: hsl(240, 9%, 22%); --tl-color-panel: hsl(235, 6.8%, 13.5%); --tl-color-panel-contrast: hsl(245, 12%, 23%); --tl-color-panel-overlay: hsl(210, 10%, 24%, 82%); --tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%); --tl-color-selected: hsl(217, 89%, 61%); --tl-color-selected-contrast: hsl(0, 0%, 100%); --tl-color-focus: hsl(217, 76%, 80%); --tl-color-tooltip: hsla(0, 0%, 100%, 1); /* Text */ --tl-color-text: hsl(210, 17%, 98%); --tl-color-text-0: hsl(0, 9%, 94%); --tl-color-text-1: hsl(0, 0%, 85%); --tl-color-text-3: hsl(204, 4%, 75%); --tl-color-text-shadow: hsl(210, 13%, 18%); --tl-color-text-highlight: hsl(52, 100%, 41%); --tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312); /* Named */ --tl-color-primary: hsl(214, 84%, 56%); --tl-color-success: hsl(123, 38%, 57%); --tl-color-info: hsl(199, 92%, 56%); --tl-color-warning: hsl(36, 100%, 57%); --tl-color-danger: hsl(0, 82%, 66%); --tl-color-laser: hsl(0, 100%, 50%); /* Shadows */ --tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); --tl-shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); --tl-shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast); } .tl-counter-scaled { transform: scale(var(--tl-scale)); transform-origin: top left; width: calc(100% * var(--tl-zoom)); height: calc(100% * var(--tl-zoom)); } .tl-container, .tl-container * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-highlight-color: transparent; -webkit-user-select: none; user-select: none; box-sizing: border-box; outline: none; } .tl-container a { -webkit-touch-callout: initial; } .tl-container__focused { outline: 1px solid var(--tl-color-low); } input, *[contenteditable], *[contenteditable] * { user-select: text; } /* --------------------- Canvas --------------------- */ .tl-canvas { position: absolute; inset: 0px; height: 100%; width: 100%; color: var(--tl-color-text); cursor: var(--tl-cursor); overflow: clip; content-visibility: auto; touch-action: none; contain: strict; } .tl-canvas__in-front { position: absolute; inset: 0; pointer-events: none; z-index: var(--tl-layer-canvas-in-front); } .tl-shapes { position: relative; z-index: var(--tl-layer-canvas-shapes); } .tl-overlays { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; contain: strict; pointer-events: none; z-index: var(--tl-layer-canvas-overlays); } .tl-overlays__item { position: absolute; top: 0px; left: 0px; overflow: visible; pointer-events: none; transform-origin: top left; } .tl-svg-context { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; } /* ------------------- Background ------------------- */ .tl-background__wrapper { z-index: var(--tl-layer-canvas-background); position: absolute; inset: 0px; height: 100%; width: 100%; } .tl-background { background-color: var(--tl-color-background); width: 100%; height: 100%; } /* --------------------- Grid Layer --------------------- */ .tl-grid { position: absolute; inset: 0px; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: var(--tl-layer-canvas-grid); contain: strict; } .tl-grid-dot { fill: var(--tl-color-grid); } /* --------------------- Layers --------------------- */ .tl-html-layer { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; contain: layout style size; } /* --------------- Overlay Stack --------------- */ /* back of the stack, behind user's stuff */ .tl-collaborator__scribble { z-index: var(--tl-layer-overlays-collaborator-scribble); } .tl-collaborator__brush { z-index: var(--tl-layer-overlays-collaborator-brush); } .tl-collaborator__shape-indicator { z-index: var(--tl-layer-overlays-collaborator-shape-indicator); } .tl-user-scribble { z-index: var(--tl-layer-overlays-user-scribble); } .tl-user-brush { z-index: var(--tl-layer-overlays-user-brush); } .tl-user-handles { z-index: var(--tl-layer-overlays-user-handles); } .tl-user-snapline { z-index: var(--tl-layer-overlays-user-snapline); } .tl-selection__fg { pointer-events: none; z-index: var(--tl-layer-overlays-selection-fg); } .tl-user-indicator__hint { z-index: var(--tl-layer-overlays-user-indicator-hint); stroke-width: calc(2.5px * var(--tl-scale)); } .tl-custom-overlays { z-index: var(--tl-layer-overlays-custom); } /* behind collaborator cursor */ .tl-collaborator__cursor-hint { z-index: var(--tl-layer-overlays-collaborator-cursor-hint); } .tl-collaborator__cursor { z-index: var(--tl-layer-overlays-collaborator-cursor); } .tl-cursor { overflow: visible; } /* -------------- Selection foreground -------------- */ .tl-selection__bg { position: absolute; top: 0px; left: 0px; transform-origin: top left; background-color: transparent; pointer-events: all; } .tl-selection__fg__outline { fill: none; pointer-events: none; stroke: var(--tl-color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-corner-handle { pointer-events: none; stroke: var(--tl-color-selection-stroke); fill: var(--tl-color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-text-handle { pointer-events: none; fill: var(--tl-color-selection-stroke); } .tl-corner-crop-handle { pointer-events: none; fill: none; stroke: var(--tl-color-selection-stroke); } .tl-corner-crop-edge-handle { pointer-events: none; fill: none; stroke: var(--tl-color-selection-stroke); } .tl-mobile-rotate__bg { pointer-events: all; cursor: var(--tl-cursor-grab); } .tl-mobile-rotate__fg { pointer-events: none; stroke: var(--tl-color-selection-stroke); fill: var(--tl-color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-transparent { fill: transparent; stroke: transparent; } .tl-hidden { opacity: 0; pointer-events: none; } /* -------------- Nametag / cursor chat ------------- */ .tl-nametag { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; max-width: 120px; padding: 3px 6px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); border-radius: var(--tl-radius-2); color: var(--tl-color-selected-contrast); } .tl-nametag-title { position: absolute; top: -2px; left: 13px; width: fit-content; height: fit-content; padding: 0px 6px; max-width: 120px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); text-shadow: var(--tl-text-outline); color: var(--tl-color-selected-contrast); } .tl-nametag-chat { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; color: var(--tl-color-selected-contrast); white-space: nowrap; position: absolute; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); opacity: 1; border-radius: var(--tl-radius-2); } .tl-cursor-chat { position: absolute; color: var(--tl-color-selected-contrast); white-space: nowrap; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); pointer-events: none; z-index: var(--tl-layer-cursor); margin-top: 16px; margin-left: 13px; opacity: 1; border: none; user-select: text; border-radius: var(--tl-radius-2); } .tl-cursor-chat .tl-cursor-chat__bubble { padding-right: 12px; } .tl-cursor-chat::selection { background: var(--tl-color-selected); color: var(--tl-color-selected-contrast); text-shadow: none; } .tl-cursor-chat::placeholder { color: var(--tl-color-selected-contrast); opacity: 0.7; } /* ---------------------- Text ---------------------- */ .tl-text-shape-label { position: relative; font-weight: normal; min-width: 1px; padding: 0px; margin: 0px; border: none; width: fit-content; height: fit-content; font-variant: normal; font-style: normal; pointer-events: all; white-space: pre-wrap; overflow-wrap: break-word; text-shadow: var(--tl-text-outline); } .tl-text-wrapper[data-font='draw'] { font-family: var(--tl-font-draw); } .tl-text-wrapper[data-font='sans'] { font-family: var(--tl-font-sans); } .tl-text-wrapper[data-font='serif'] { font-family: var(--tl-font-serif); } .tl-text-wrapper[data-font='mono'] { font-family: var(--tl-font-mono); } .tl-text-wrapper[data-align='start'], .tl-text-wrapper[data-align='start-legacy'] { text-align: left; } .tl-text-wrapper[data-align='middle'], .tl-text-wrapper[data-align='middle-legacy'] { text-align: center; } .tl-text-wrapper[data-align='end'], .tl-text-wrapper[data-align='end-legacy'] { text-align: right; } .tl-plain-text-wrapper[data-isediting='true'] .tl-text-content { opacity: 0; } .tl-rich-text-wrapper[data-isediting='true'] .tl-text-content { display: none; } .tl-text { /* remove overflow from textarea on windows */ margin: 0px; padding: 0px; appearance: auto; background: none; border-image: none; border: 0px; caret-color: var(--tl-color-text); color: inherit; column-count: initial !important; display: inline-block; font-family: inherit; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: inherit; font-stretch: 100%; font-style: inherit; font-variant: inherit; font-variation-settings: normal; font-weight: inherit; letter-spacing: inherit; line-height: inherit; outline: none; overflow-wrap: break-word; text-align: inherit; text-indent: 0px; text-rendering: auto; text-shadow: inherit; text-transform: none; white-space: pre-wrap; line-break: normal; word-spacing: 0px; word-wrap: break-word; writing-mode: horizontal-tb !important; } .tl-text-measure { z-index: var(--tl-layer-canvas-hidden); opacity: 0; visibility: hidden; /* pointer-events: all; */ /* opacity: 1; */ /* z-index: 99999; */ position: absolute; top: 0px; left: 0px; width: max-content; box-sizing: border-box; pointer-events: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; resize: none; border: none; user-select: none; contain: style paint; /* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */ unicode-bidi: plaintext; -webkit-user-select: none; } .tl-text-input, .tl-text-content { position: absolute; inset: 0px; height: 100%; width: 100%; min-width: 1px; min-height: 1px; outline: none; } .tl-text-content__wrapper { position: relative; width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; pointer-events: none; min-height: auto; } .tl-text-content { overflow: visible; pointer-events: none; } .tl-text-input { resize: none; user-select: all; -webkit-user-select: text; cursor: var(--tl-cursor-text); } .tl-text-input:not(.tl-rich-text) { /* * Note: this `overflow: hidden` is key for scrollbars to not show up * plaintext/

editors.
	 */
	overflow: hidden;
}
.tl-text-input::selection {
	background: var(--tl-color-selected);
	color: var(--tl-color-selected-contrast);
	text-shadow: none;
}
/* Text label */
.tl-text-label {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--tl-color-text);
	text-shadow: var(--tl-text-outline);
	line-height: inherit;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
}
.tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {
	width: 40px;
	height: 40px;
}
.tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content {
	pointer-events: all;
}
.tl-text-label__inner > .tl-text-input.tl-rich-text {
	display: none;
	position: static;
}
.tl-text-wrapper[data-isediting='false'] .tl-text-input {
	opacity: 0;
	cursor: var(--tl-cursor-default);
}
.tl-rich-text[data-is-ready-for-editing='true'],
.tl-text-wrapper[data-is-ready-for-editing='true'] .tl-text-input {
	cursor: var(--tl-cursor-text);
}
.tl-text-label[data-textwrap='true'] > .tl-text-label__inner {
	max-width: 100%;
}
.tl-text-label[data-isediting='true'] {
	background-color: transparent;
	min-height: auto;
}
.tl-text-wrapper .tl-text-content {
	pointer-events: all;
	z-index: var(--tl-layer-text-content);
}
.tl-text-label__inner > .tl-text-content {
	position: relative;
	top: 0px;
	left: 0px;
	padding: inherit;
	height: fit-content;
	width: fit-content;
	border-radius: var(--tl-radius-1);
	max-width: 100%;
}
.tl-text-label__inner > .tl-text-input {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	padding: inherit;
}
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
	z-index: var(--tl-layer-text-editor);
	pointer-events: all;
}
/* This part of the rule helps preserve the occlusion rules for the shapes so we
 * don't click on shapes that are behind other shapes.
 * One extra nuance is we don't use this behavior for:
 *  - arrows which have weird geometry and just gets in the way.
 *  - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
 *  - shapes that are not filled
 */
.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
	.tl-shape:not(
		[data-shape-type='arrow'],
		[data-shape-type='draw'],
		[data-shape-type='line'],
		[data-shape-type='highlight'],
		[data-shape-is-filled='false']
	) {
	pointer-events: all;
}
.tl-rich-text .ProseMirror {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;

/**
	 * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31
	 * However, that was from 8 years ago and the browser caret issue
	 * it mentions seems to be fixed. So, we're re-enabling it.
	 * We'll tell ProseMirror maybe to get rid of this on their end.
	 *
	 */
	-webkit-font-variant-ligatures: inherit;
	font-variant-ligatures: inherit;
	font-feature-settings: inherit;

/**
	 * N.B. This following CSS Rule comes standard with the tiptap editor.
	 * Combined with the above rule that it supersedes, it allows for
	 * the auto-linking to work in text. Say, when typing example.com
	 * this helps it automatically turn that bit of text into a link.
	 *
	 * However, specifically, the break-spaces features seems to cause
	 * rendering differences when going in-and-out of edit mode. For example,
	 * the statically rendered text 'the rain in spain falls mainly on the plain'
	 * in a note shape will render differently when going in-and-out of edit mode.
	 *
	 * So, this is commented out to help make both the autolinking work (which now
	 * relies on the white-space: pre-wrap to work and to make the static/edit-mode
	 * rendering consistent.
	 * In the future, we might consider just making the static rendering just use
	 * white-space: break-spaces to make it consistent with the edit mode if need be.
	 *
	 * Also, the amount of ink I've spilt in my career writing comments explaining
	 * white-space in contenteditable is incredible.
	 *
	/* white-space: break-spaces; */
}
.tl-rich-text p {
	margin: 0;
	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
	min-height: 1lh;
}
.tl-rich-text ul,
.tl-rich-text ol {
	text-align: left;
	margin: 0;
	padding-left: 3.25ch;
	/* Some resets, like Tailwind, nix the list styling. */
	list-style: revert;
}
.tl-rich-text ol:has(> li:nth-child(10)) {
	padding-left: 4.25ch;
}
.tl-rich-text ol:has(> li:nth-child(100)) {
	padding-left: 5.25ch;
}
.tl-rich-text h1,
.tl-rich-text h2,
.tl-rich-text h3,
.tl-rich-text h4,
.tl-rich-text h5,
.tl-rich-text h6 {
	margin-top: 5px;
	margin-bottom: 10px;
}
.tl-rich-text a {
	color: var(--tl-color-primary);
	text-decoration: underline;
}
.tl-rich-text[data-is-select-tool-active='false'] a {
	cursor: inherit;
}
.tl-rich-text code {
	font-family: var(--tl-font-mono);
}
.tl-rich-text mark {
	background-color: #fddd00;
	color: currentColor;
	border-radius: 2px;
}
.tl-theme__light .tl-rich-text mark {
	text-shadow: none;
}
.tl-theme__dark .tl-rich-text mark {
	background-color: var(--tl-color-text-highlight);
	color: currentColor;
}
@supports (color: color(display-p3 1 1 1)) {
	@media (color-gamut: p3) {
		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
			background-color: var(--tl-color-text-highlight-p3);
		}
	}
}
.tl-text-wrapper[data-isediting='true'] .tl-rich-text {
	display: block;
}
/* --------------------- Loading -------------------- */
.tl-loading {
	background-color: var(--tl-color-background);
	color: var(--tl-color-text-1);
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--tl-space-2);
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	animation: tl-fade-in 0.2s ease-in-out forwards;
	animation-delay: 0.2s;
	position: absolute;
	inset: 0px;
	z-index: var(--tl-layer-canvas-blocker);
}
@keyframes tl-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.tl-spinner {
	animation: tl-spin 1s linear infinite;
}
@keyframes tl-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* ---------------------- Brush --------------------- */
.tl-brush {
	stroke-width: calc(var(--tl-scale) * 1px);
	contain: size layout;
}
.tl-brush__default {
	stroke: var(--tl-color-brush-stroke);
	fill: var(--tl-color-brush-fill);
}
/* -------------------- Scribble -------------------- */
.tl-scribble {
	stroke-linejoin: round;
	stroke-linecap: round;
	pointer-events: none;
	contain: size layout;
}
/* ---------------------- Snaps --------------------- */
.tl-snap-indicator {
	stroke: var(--tl-color-snap);
	stroke-width: calc(1px * var(--tl-scale));
	fill: none;
}
.tl-snap-point {
	stroke: var(--tl-color-snap);
	stroke-width: calc(1px * var(--tl-scale));
	fill: none;
}
/* ---------------- Hyperlink Button ---------------- */
.tl-hyperlink-button {
	background: none;
	margin: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 44px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 400;
	color: var(--tl-color-text-1);
	padding: 13px;
	cursor: var(--tl-cursor-pointer);
	border: none;
	outline: none;
	pointer-events: all;
	z-index: 1;
}
.tl-hyperlink-button::after {
	content: '';
	z-index: -1;
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: block;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border-radius: var(--tl-radius-1);
	background-color: var(--tl-color-background);
	pointer-events: none;
}
.tl-hyperlink-button:focus-visible {
	color: var(--tl-color-selected);
}
.tl-hyperlink__icon {
	width: 15px;
	height: 15px;
	background-color: currentColor;
	pointer-events: none;
}
.tl-hyperlink-button__hidden {
	display: none;
}
/* --------------------- Handles -------------------- */
.tl-handle {
	pointer-events: all;
}
.tl-handle__bg {
	fill: transparent;
	stroke: transparent;
	pointer-events: all;
}
.tl-handle__fg {
	fill: var(--tl-color-selected-contrast);
	stroke: var(--tl-color-selection-stroke);
	stroke-width: calc(1.5px * var(--tl-scale));
	pointer-events: none;
}
.tl-handle__create {
	opacity: 0;
}
.tl-handle__clone > .tl-handle__fg {
	fill: var(--tl-color-selection-stroke);
	stroke: none;
}
.tl-handle__bg:active {
	fill: none;
}
@media (pointer: coarse) {
	.tl-handle__bg:active {
		fill: var(--tl-color-selection-fill);
	}

.tl-handle__create {
		opacity: 1;
	}
}
.tl-rotate-corner:not(:hover),
.tl-resize-handle:not(:hover) {
	cursor: none;
}
/* ----------------- Shape indicator ---------------- */
.tl-shape-indicator {
	transform-origin: top left;
	fill: none;
	stroke-width: calc(1.5px * var(--tl-scale));
	contain: size layout;
}
/* ---------------------- Shape --------------------- */
.tl-shape {
	position: absolute;
	pointer-events: none;
	overflow: visible;
	transform-origin: top left;
	contain: size layout;
}
/* ---------------- Shape Containers ---------------- */
.tl-svg-container {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-linejoin: miter;
	transform-origin: top left;
	overflow: visible;
}
.tl-html-container {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* content-visibility: auto; */
	transform-origin: top left;
	color: var(--tl-color-text-1);
}
/* -------------------- Group shape ------------------ */
.tl-group {
	stroke: var(--tl-color-text);
	stroke-width: calc(1px * var(--tl-scale));
	opacity: 0.5;
}
/* --------------------- Arrow shape -------------------- */
.tl-shape[data-shape-type='arrow'] .tl-text-label {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2px;
	height: 2px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--tl-color-text);
	text-shadow: var(--tl-text-outline);
}
.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
	border-radius: var(--tl-radius-1);
	box-sizing: content-box;
	height: max-content;
	width: max-content;
}
.tl-shape[data-shape-type='arrow'] .tl-text {
	height: max-content;
}
.tl-arrow-hint {
	stroke: var(--tl-color-text-1);
	fill: none;
	stroke-linecap: round;
	overflow: visible;
}
.tl-arrow-hint-handle {
	fill: var(--tl-color-selected-contrast);
	stroke: var(--tl-color-selection-stroke);
	stroke-width: calc(1.5px * var(--tl-scale));
	r: calc(4px * var(--tl-scale));
}
.tl-arrow-hint-snap {
	stroke: transparent;
	fill: var(--tl-color-selection-fill);
	r: calc(12px * var(--tl-scale));
}
.tl-arrow-hint-snap__none,
.tl-arrow-hint-snap__center,
.tl-arrow-hint-snap__axis {
	display: none;
}
.tl-arrow-hint-snap__edge {
	r: calc(8px * var(--tl-scale));
}
/* ------------------- Bookmark shape ------------------- */
.tl-bookmark__container {
	width: 100%;
	height: 100%;
	position: relative;
	border: 1px solid var(--tl-color-panel-contrast);
	background-color: var(--tl-color-panel);
	border-radius: var(--tl-radius-2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.tl-bookmark__container--safariExport {
	border: 1px solid var(--tl-color-divider);
}
.tl-bookmark__image_container {
	flex: 1 1 100%;
	overflow: hidden;
	border-top-left-radius: var(--tl-radius-1);
	border-top-right-radius: var(--tl-radius-1);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
}
.tl-bookmark__image_container > .tl-hyperlink-button::after {
	background-color: var(--tl-color-panel);
}
.tl-bookmark__placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--tl-color-muted-2);
	border-bottom: 1px solid var(--tl-color-muted-2);
}
.tl-bookmark__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-bottom: 1px solid var(--tl-color-muted-2);
}
.tl-bookmark__copy_container {
	background-color: var(--tl-color-muted-0);
	padding: var(--tl-space-4);
	pointer-events: all;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}
.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
	justify-content: center;
}
.tl-bookmark__heading,
.tl-bookmark__description,
.tl-bookmark__link {
	margin: 0px;
	width: 100%;
	font-family: inherit;
}
.tl-bookmark__heading {
	font-size: 16px;
	line-height: 1.6;
	font-weight: bold;
	padding-bottom: var(--tl-space-2);
	overflow: hidden;
	max-height: calc((16px * 1.6) * 2);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
}
.tl-bookmark__description {
	font-size: 12px;
	line-height: 1.5;
	overflow: hidden;
	max-height: calc((12px * 1.5) * 3);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	text-overflow: ellipsis;
	display: -webkit-box;
	color: var(--tl-color-text-1);
	margin: var(--tl-space-2) 0px;
}
.tl-bookmark__heading + .tl-bookmark__link,
.tl-bookmark__description + .tl-bookmark__link {
	margin-top: var(--tl-space-3);
}
.tl-bookmark__link {
	font-size: 12px;
	pointer-events: all;
	display: flex;
	color: var(--tl-color-text-1);
	align-items: center;
	cursor: var(--tl-cursor-pointer);
	width: fit-content;
	max-width: 100%;
	text-decoration: none;
}
.tl-bookmark__link > span {
	flex-shrink: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tl-bookmark__link > .tl-hyperlink__icon {
	margin-right: 8px;
	flex-shrink: 0;
}
.tl-bookmark__link > .tl-bookmark__favicon {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
/* -------------- Image and video shape ------------- */
.tl-image,
.tl-video {
	object-fit: cover;
	background-size: cover;
	width: 100%;
	height: 100%;
}
.tl-video-container,
.tl-image-container,
.tl-embed-container {
	width: 100%;
	height: 100%;
	pointer-events: all;
	/* background-color: var(--tl-color-background); */

display: flex;
	justify-content: center;
	align-items: center;
}
.tl-image-container {
	position: relative;
}
.tl-image {
	position: absolute;
	inset: 0;
}
.tl-video.tl-video-is-fullscreen {
	object-fit: contain;
	background-size: contain;
}
/* -------------------- Note shape ------------------- */
.tl-note__container {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: all;
	opacity: 1;
	z-index: var(--tl-layer-text-container);
	border-radius: 1px;
}
.tl-note__container > .tl-text-label {
	text-shadow: none;
	color: currentColor;
}
/* ------------------- Frame shape ------------------- */
.tl-frame__body {
	stroke-width: calc(1px * var(--tl-scale));
}
.tl-frame__creating {
	stroke: var(--tl-color-selected);
	fill: none;
}
.tl-frame-heading {
	--tl-frame-padding-x: 6px;
	--tl-frame-height: 24px;
	--tl-frame-minimum-width: 32px;
	--tl-frame-offset-width: 16px;
	display: flex;
	align-items: center;
	position: absolute;
	transform-origin: 0% 100%;
	overflow: hidden;
	max-width: 100%;
	min-width: var(--tl-frame-minimum-width);
	height: auto;
	font-size: 12px;
	padding-bottom: 4px;
	pointer-events: all;
}
.tl-frame-heading-hit-area {
	pointer-events: all;
	/* scale from bottom left corner so we can pin it to the top left corner of the frame */
	transform-origin: 0% 100%;
	display: flex;
	height: var(--tl-frame-height);
	width: 100%;
	align-items: center;
	border-radius: var(--tl-radius-1);
}
.tl-frame-label {
	pointer-events: all;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px var(--tl-frame-padding-x);
	border-radius: var(--tl-radius-1);
	position: relative;
	font-size: inherit;
	white-space: pre;
}
.tl-frame-label__editing {
	color: transparent;
	white-space: pre;
	width: auto;
	min-width: var(--tl-frame-minimum-width);
	height: 100%;
	overflow: visible;
	background-color: var(--tl-color-panel);
	border-color: var(--tl-color-selected);
	box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
}
.tl-frame-name-input {
	position: absolute;
	border: none;
	background: none;
	outline: none;
	padding: 0px var(--tl-frame-padding-x);
	inset: 0px;
	height: 100%;
	width: 100%;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	width: 100%;
	color: var(--tl-color-text-1);
	border-radius: var(--tl-radius-1);
	user-select: all;
	-webkit-user-select: text;
	white-space: pre;
	cursor: var(--tl-cursor-text);
}
/* If mobile use 16px as font size */
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
@media (max-width: 600px) {
	.tl-frame-heading {
		font-size: 16px;
	}
}
/* ------------------- Embed Shape ------------------ */
.tl-embed {
	border: none;
	border-radius: var(--tl-radius-2);
}
/* -------------- Shape error boundary -------------- */
.tl-shape-error-boundary {
	width: 100%;
	height: 100%;
	background-color: var(--tl-color-muted-1);
	border-width: calc(1px * var(--tl-scale));
	border-color: var(--tl-color-muted-1);
	border-style: solid;
	border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: left;
	position: relative;
	pointer-events: all;
	overflow: hidden;
	padding: var(--tl-space-2);
}
.tl-shape-error-boundary::before {
	transform: scale(var(--tl-scale));
	content: 'Error';
	font-size: 12px;
	font-family: inherit;
	color: var(--tl-color-text-0);
}
/* ----------------- Error boundary ----------------- */
.tl-error-boundary {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tl-space-4);
	background-color: var(--tl-color-background);
	color: var(--tl-color-text-1);
	position: absolute;
}
.tl-error-boundary__overlay {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-overlay);
	background-color: var(--tl-color-overlay);
}
.tl-error-boundary__content * {
	user-select: all;
	-webkit-user-select: text;
	pointer-events: all;
}
.tl-error-boundary__canvas {
	pointer-events: none;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-canvas);
}
/* some browsers seem to have some weird interactions between stacking contexts
and pointer-events. this ::after pseudo element covers the canvas and prevents
it from receiving any pointer events or affecting the cursor. */
.tl-error-boundary__canvas::after {
	content: ' ';
	display: block;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-canvas-after);
	pointer-events: all;
}
.tl-error-boundary__content {
	width: fit-content;
	height: fit-content;
	max-width: 100%;
	width: 400px;
	max-height: 100%;
	background-color: var(--tl-color-panel);
	padding: 16px;
	border-radius: 16px;
	box-shadow: var(--tl-shadow-2);
	font-size: 14px;
	font-weight: 400;
	display: flex;
	flex-direction: column;
	overflow: auto;
	z-index: var(--tl-layer-error-content);
	gap: 12px;
}
.tl-error-boundary__content__expanded {
	width: 600px;
}
.tl-error-boundary__content h2 {
	font-size: 16px;
	margin: 0px;
	font-weight: 500;
}
.tl-error-boundary__content h4 {
	border: 1px solid var(--tl-color-low-border);
	margin: -6px 0 0 0;
	padding: var(--tl-space-5);
	border-radius: var(--tl-radius-2);
	font-weight: normal;
}
.tl-error-boundary__content p {
	line-height: 1.5;
	margin: 0px;
}
.tl-error-boundary__content pre {
	background-color: var(--tl-color-muted-2);
	margin-top: 0;
	padding: var(--tl-space-5);
	border-radius: var(--tl-radius-2);
	overflow: auto;
	font-size: 12px;
	max-height: 320px;
}
.tl-error-boundary__content button {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: var(--tl-space-4);
	border-radius: var(--tl-radius-3);
	cursor: var(--tl-cursor-pointer);
	color: inherit;
	background-color: transparent;
}
.tl-error-boundary__content a {
	color: var(--tl-color-selected);
	font-weight: 500;
	text-decoration: none;
}
.tl-error-boundary__content__error {
	position: relative;
	margin: -6px 0 0 0;
}
.tl-error-boundary__content__error button {
	position: absolute;
	top: var(--tl-space-2);
	right: var(--tl-space-2);
	font-size: 12px;
	padding: var(--tl-space-2) var(--tl-space-3);
	background-color: var(--tl-color-panel);
	border-radius: var(--tl-radius-1);
}
.tl-error-boundary__content__actions {
	display: flex;
	justify-content: space-between;
	gap: var(--tl-space-4);
	margin: 0px;
	margin-left: -4px;
}
.tl-error-boundary__content__actions__group {
	display: flex;
	gap: var(--tl-space-4);
}
.tl-error-boundary__content .tl-error-boundary__reset {
	color: var(--tl-color-danger);
}
.tl-error-boundary__content .tl-error-boundary__refresh {
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
}
.tl-container__focused:not(.tl-container__no-focus-ring)
	.tlui-button.tl-error-boundary__refresh:focus-visible {
	border-radius: 8px;
	outline-offset: 0;
}
/* ---------------- Hit test blocker ---------------- */
.tl-hit-test-blocker {
	position: absolute;
	z-index: var(--tl-layer-canvas-blocker);
	inset: 0px;
	width: 100%;
	height: 100%;
	pointer-events: all;
}
.tl-hit-test-blocker__hidden {
	display: none;
}
/* --------------------- Hovers --------------------- */
@media (hover: hover) {
	.tl-handle__create:hover {
		opacity: 1;
	}

.tl-handle__bg:hover {
		cursor: var(--tl-cursor-grab);
		fill: var(--tl-color-selection-fill);
	}

.tl-bookmark__link:hover {
		color: var(--tl-color-selected);
	}

.tl-hyperlink-button:hover {
		color: var(--tl-color-selected);
	}

.tl-error-boundary__content button:hover {
		background-color: var(--tl-color-low);
	}
	.tl-error-boundary__content a:hover {
		color: var(--tl-color-text-1);
	}
	.tl-error-boundary__content .tl-error-boundary__refresh:hover {
		background-color: var(--tl-color-primary);
		opacity: 0.9;
	}

/* These three rules help preserve clicking into specific points in text areas *while*
 * already in edit mode when jumping from shape to shape. */
	.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
		z-index: var(--tl-layer-text-editor);
		pointer-events: all;
	}
}
/* @tldraw/ui */
.tl-container {
	--tl-layer-above: 1;
	--tl-layer-focused-input: 10;
	--tl-layer-menu-click-capture: 250;
	--tl-layer-panels: 300;
	--tl-layer-menus: 400;
	--tl-layer-toasts: 650;
	--tl-layer-cursor: 700;
	--tl-layer-header-footer: 999;
	--tl-layer-following-indicator: 1000;
}
/* Button */
.tlui-button {
	position: relative;
	height: 40px;
	min-width: 40px;
	padding: 0px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: transparent;
	color: currentColor;
	cursor: pointer;
	pointer-events: all;
	font-weight: inherit;
	font-family: inherit;
	line-height: inherit;
	text-rendering: optimizeLegibility;
	font-size: 12px;
	gap: 0px;
	color: var(--tl-color-text-1);
	z-index: 0;
}
.tlui-button:disabled {
	color: var(--tl-color-text-3);
	text-shadow: none;
	cursor: default;
}
.tlui-button:disabled .tlui-kbd {
	color: var(--tl-color-text-3);
}
.tlui-button > * {
	position: relative;
	z-index: var(--tl-layer-above);
}
.tlui-button__label {
	font-size: 12px;
	flex-grow: 2;
	text-align: left;
}
/*
 * We only want to show the focus ring if:
 * - the container is focused
 * - we're not using the mouse to interact (which is the .tl-container__no-focus-ring)
 */
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
}
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
	border-radius: 12px;
}
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
}
.tlui-button::after {
	display: block;
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	background: var(--tl-color-muted-2);
	opacity: 0;
}
.tlui-button__menu[data-highlighted]::after {
	opacity: 1;
}
.tlui-button[data-isactive='true']::after,
.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
	background: var(--tl-color-hint);
	opacity: 1;
}
.tlui-button[aria-expanded='true'][data-direction='left'] {
	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
@media (hover: hover) {
	.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}

.tlui-button:not(:disabled):hover {
		z-index: 1;
	}

.tlui-button:not(:disabled):hover::after {
		opacity: 1;
	}
}
.tlui-button__icon + .tlui-button__label {
	margin-left: var(--tl-space-2);
}
/* Low button  */
.tlui-button__low {
	border-radius: var(--tl-radius-3);
	background-color: var(--tl-color-low);
}
.tlui-button__low::after {
	background-color: var(--tl-color-muted-2);
	opacity: 0;
}
@media (hover: hover) {
	.tlui-button__low:hover::after {
		opacity: 1;
	}
}
/* Primary / danger buttons */
.tlui-button__primary {
	color: var(--tl-color-primary);
}
.tlui-button__danger {
	color: var(--tl-color-danger);
	text-shadow: none;
}
@media (hover: hover) {
	.tlui-button__primary:not(:disabled, :focus-visible):hover {
		color: var(--tl-color-primary);
	}

.tlui-button__danger:not(:disabled, :focus-visible):hover {
		color: var(--tl-color-danger);
		text-shadow: none;
	}
}
/* Menu button */
.tlui-button__menu {
	height: 40px;
	min-height: 40px;
	width: 100%;
	gap: 8px;
	margin-top: -4px;
}
.tlui-button__menu::after {
	inset: 4px;
	border-radius: var(--tl-radius-2);
}
.tlui-button__menu > .tlui-icon + .tlui-button__label {
	margin-left: 0px;
}
.tlui-button__menu:nth-child(1) {
	margin-top: 0px;
}
.tlui-button__menu:nth-last-child(1) {
	margin-bottom: 0px;
}
/* Menu checkbox button */
.tlui-button__checkbox {
	padding-left: 8px;
}
.tlui-button__checkbox__indicator {
	width: 15px;
	height: 15px;
}
/* Tool lock button */
.tlui-main-toolbar__lock-button {
	position: absolute;
	pointer-events: all;
	height: 40px;
	width: 40px;
	border-radius: var(--tl-radius-2);
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
	top: 4px;
	right: 0px;
	min-width: 0px;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
	bottom: 0px;
	min-height: 0px;
}
.tlui-main-toolbar__lock-button::after {
	top: 4px;
	left: 8px;
	inset: 4px;
}
/* Tool button  */
.tlui-button__tool {
	position: relative;
	height: 48px;
	width: 48px;
}
.tlui-button__tool::after {
	inset: 4px;
	border-radius: 8px;
}
.tlui-button__tool[aria-pressed='true'] {
	color: var(--tl-color-selected-contrast);
}
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
	color: var(--tl-color-selected-contrast);
}
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
	background: var(--tl-color-selected);
	opacity: 1;
}
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
	height: 48px;
	width: 43px;
}
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
	height: 16px;
	width: 16px;
}
/* Row layout */
.tlui-row {
	display: flex;
	flex-direction: row;
	padding: 0 2px;
}
.tlui-row > * {
	margin-left: -2px;
	margin-right: -2px;
}
/* Column layout */
.tlui-column {
	display: flex;
	flex-direction: column;
	padding: 2px 0;
}
.tlui-column > * {
	margin-top: -2px;
	margin-bottom: -2px;
}
/* Grid layout */
.tlui-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: row;
	overflow: hidden;
	padding: 2px;
}
.tlui-grid > * {
	margin: -2px;
}
/* Zoom button */
.tlui-zoom-menu__button {
	width: 60px;
	min-width: 60px;
	text-align: center;
}
/* --------------------- Layout --------------------- */
.tlui-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(0px, 1fr) auto;
	grid-auto-rows: auto;
	height: 100%;
	max-height: 100%;
	overflow: clip;
	pointer-events: none;
	user-select: none;
	contain: strict;
	z-index: var(--tl-layer-panels);
	transform: translate3d(0, 0, 0);
	--tl-sab: env(safe-area-inset-bottom);
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: antialiased;
	text-rendering: optimizeLegibility;
}
.tlui-layout__top {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	min-width: 0px;
	justify-content: space-between;
}
.tlui-layout__top__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	flex: 0 1 0;
}
.tlui-layout__top__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	height: 100%;
	flex: 0 0 auto;
	min-width: 0px;
}
.tlui-scrollable,
.tlui-scrollable * {
	pointer-events: all;
	touch-action: auto;
	overscroll-behavior: none;
}
/* ----------------- Helper Buttons ---------------- */
.tlui-helper-buttons {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: min-content;
	gap: var(--tl-space-3);
	margin: var(--tl-space-2) var(--tl-space-3);
	white-space: nowrap;
	pointer-events: none;
	z-index: var(--tl-layer-panels);
}
/* ---------------------- Icon ---------------------- */
.tlui-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
}
.tlui-icon__placeholder {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: transparent;
}
.tlui-icon__small {
	width: 15px;
	height: 15px;
}
/* --------------------- Slider --------------------- */
.tlui-slider__container {
	width: 100%;
	padding: 0px var(--tl-space-4);
}
.tlui-slider {
	position: relative;
	display: flex;
	align-items: center;
	user-select: none;
	touch-action: none;
	width: 100%;
}
.tlui-slider__track {
	position: relative;
	flex-grow: 1;
	height: 44px;
	cursor: pointer;
}
.tlui-slider__track::after {
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	content: '';
	height: 3px;
	width: 100%;
	background-color: var(--tl-color-muted-1);
	border-radius: 14px;
}
.tlui-slider__range {
	position: absolute;
	top: calc(50% - 2px);
	left: 0px;
	height: 3px;
	background-color: var(--tl-color-selected);
	border-radius: 14px;
}
.tlui-slider__thumb {
	all: unset;
	cursor: grab;
	display: block;
	width: 18px;
	height: 18px;
	position: relative;
	top: -1px;
	background-color: var(--tl-color-panel);
	border-radius: 999px;
	box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
}
.tlui-slider__thumb:active {
	cursor: grabbing;
	box-shadow:
		inset 0px 0px 0px 2px var(--tl-color-text-1),
		var(--tl-shadow-1);
}
/* ---------------------- Input --------------------- */
.tlui-input {
	background: none;
	margin: 0px;
	position: relative;
	z-index: var(--tl-layer-above);
	height: 40px;
	max-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 12px;
	font-weight: inherit;
	color: var(--tl-color-text-1);
	padding: var(--tl-space-4);
	padding-left: 0px;
	border: none;
	outline: none;
	text-overflow: ellipsis;
	width: 100%;
	user-select: all;
	text-rendering: optimizeLegibility;
	-webkit-user-select: auto !important;
}
.tlui-input::placeholder {
	color: var(--tl-color-text-3);
}
.tlui-input__wrapper {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	gap: var(--tl-space-4);
	color: var(--tl-color-text);
}
.tlui-input__wrapper > .tlui-icon {
	flex-shrink: 0;
}
/* If mobile use 16px as font size */
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
@media (max-width: 600px) {
	@supports (-webkit-touch-callout: none) {
		/* CSS specific to iOS devices */
		.tlui-input {
			font-size: 16px;
		}
	}
}
/* ----------------------- Kbd ---------------------- */
.tlui-kbd {
	font-family: inherit;
	font-size: 11px;
	line-height: 11px;
	display: grid;
	justify-items: center;
	grid-auto-flow: column;
	grid-template-columns: auto;
	grid-auto-columns: minmax(1em, auto);
	align-self: bottom;
	color: currentColor;
	margin-left: var(--tl-space-4);
}
.tlui-kbd > span {
	width: 100%;
	text-align: center;
	display: inline;
	margin: 0px;
	padding: 2px;
	border-radius: 2px;
}
.tlui-kbd > span:last-child {
	padding-right: 0;
}
.tlui-kbd:not(:last-child) {
	margin-right: var(--tl-space-2);
}
/* Focus Mode Button */
.tlui-focus-button {
	z-index: var(--tl-layer-panels);
	pointer-events: all;
}
/* ---------------------- Menu ---------------------- */
.tlui-menu:empty {
	display: none;
}
.tlui-menu {
	z-index: var(--tl-layer-menus);
	height: fit-content;
	width: fit-content;
	border-radius: var(--tl-radius-3);
	pointer-events: all;
	touch-action: auto;
	overflow-y: auto;
	overscroll-behavior: none;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
}
@media (max-height: 600px) {
	.tlui-menu {
		max-height: 70vh;
	}
}
.tlui-menu::-webkit-scrollbar {
	display: none;
}
/* Menu groups */
.tlui-menu__group {
	width: 100%;
}
.tlui-menu__group:empty {
	display: none;
}
.tlui-menu__group {
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-menu__group:nth-last-of-type(1) {
	border-bottom: none;
}
/* Submenu triggers */
.tlui-menu__submenu__trigger[data-state='open']::after {
	opacity: 1;
	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
}
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
	opacity: 1;
	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
}
@media (hover: hover) {
	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
		opacity: 1;
		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	}

.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
		opacity: 1;
		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	}
}
/* Menu Sizes */
.tlui-menu[data-size='large'] > .tlui-menu__group {
	min-width: initial;
}
.tlui-menu[data-size='medium'] > .tlui-menu__group {
	min-width: 144px;
}
.tlui-menu[data-size='small'] > .tlui-menu__group {
	min-width: 96px;
}
.tlui-menu[data-size='tiny'] > .tlui-menu__group {
	min-width: 0px;
}
.tlui-menu-click-capture {
	position: fixed;
	inset: 0;
	z-index: var(--tl-layer-menu-click-capture);
}
/* --------------------- Popover -------------------- */
.tlui-popover {
	position: relative;
	display: flex;
	align-content: stretch;
}
.tlui-popover__content {
	position: relative;
	max-height: calc(var(--radix-popover-content-available-height) - 8px);
	margin: 0px;
	border: none;
	border-radius: var(--tl-radius-3);
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
	z-index: var(--tl-layer-menus);
	overflow: hidden;
	overflow-y: auto;
	touch-action: auto;
	overscroll-behavior: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
/* -------------------- Menu Zone ------------------- */
.tlui-menu-zone {
	position: relative;
	z-index: var(--tl-layer-panels);
	width: fit-content;
	border-right: 2px solid var(--tl-color-background);
	border-bottom: 2px solid var(--tl-color-background);
	border-bottom-right-radius: var(--tl-radius-4);
	background-color: var(--tl-color-low);
}
.tlui-menu-zone *[data-state='open']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
@media (hover: hover) {
	.tlui-menu-zone *[data-state='open']:not(:hover)::after {
		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}
/* ------------------- Page Select ------------------ */
.tlui-page-menu__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 260px;
	height: fit-content;
	max-height: 50vh;
}
.tlui-page-menu__trigger {
	width: auto;
}
.tlui-page-menu__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 40px;
	padding-left: var(--tl-space-4);
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
	margin-right: -4px;
}
.tlui-page-menu__header__title {
	color: var(--tl-color-text);
	font-size: 12px;
	flex-grow: 2;
}
.tlui-page-menu__name {
	flex-grow: 2;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tlui-page-menu__list {
	position: relative;
	touch-action: auto;
	flex-direction: column;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	touch-action: auto;
}
.tlui-page-menu__item {
	position: relative;
}
.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button[data-state='open'] {
	opacity: 1;
}
@media (hover: hover) {
	.tlui-page-menu__item:hover > .tlui-page_menu__item__submenu > .tlui-button {
		opacity: 1;
	}
}
.tlui-page-menu__item:nth-of-type(n + 2) {
	margin-top: -4px;
}
.tlui-page-menu__item__button {
	width: 100%;
}
.tlui-page-menu__item__button:not(:only-child) {
	flex-grow: 2;
	margin-right: -2px;
}
.tlui-page-menu__item__button > span {
	display: block;
	flex-grow: 2;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tlui-page-menu__item__button > span {
	padding-right: calc(40px - 12px);
}
@media (hover: hover) {
	.tlui-page-menu__item__button > span {
		padding-right: 0px;
	}

.tlui-page-menu__item:hover > .tlui-page-menu__item__button > span {
		padding-right: calc(40px - 12px);
	}
}
.tlui-page-menu__item__button__checkbox {
	padding-left: 35px;
}
.tlui-page-menu__item__button__check {
	position: absolute;
	left: 0px;
	width: 24px;
	padding-left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tl-color-text);
}
.tlui-page_menu__item__sortable {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	z-index: var(--tl-layer-above);
}
.tlui-page_menu__item__sortable__title {
	flex: 1;
}
.tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
	height: 100%;
}
.tlui-page_menu__item__sortable:focus-visible {
	z-index: var(--tl-layer-focused-input);
}
.tlui-page_menu__item__sortable__handle {
	touch-action: none;
	width: 32px;
	min-width: 0px;
	height: 40px;
	cursor: grab;
	color: var(--tl-color-text-3);
	flex-shrink: 0;
	margin-right: -9px;
}
.tlui-page_menu__item__sortable__handle:active {
	cursor: grabbing;
}
.tlui-page-menu__item__input {
	margin-left: 12px;
	height: 100%;
}
/* The more menu has complex CSS here: */
/* If the user can hover, then visible but opacity zero until hover */
/* If the user cannot hover, then not displayed unless editing, and then opacity 1 */
.tlui-page_menu__item__submenu {
	pointer-events: all;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	cursor: pointer;
	margin: 0px;
	margin-left: -2px;
	z-index: 10;
}
.tlui-page_menu__item__submenu > .tlui-button {
	opacity: 0;
}
.tlui-page_menu__item__sortable:focus-visible > .tlui-page_menu__item__submenu > .tlui-button,
.tlui-page_menu__item__submenu[data-isediting='true'],
.tlui-page_menu__item__submenu > .tlui-button[data-state='open'],
.tlui-page_menu__item__submenu > .tlui-button:focus-visible {
	opacity: 1;
}
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
@media (hover: hover) {
	.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}
@media (any-pointer: coarse) {
	.tlui-page_menu__item__submenu > .tlui-button {
		opacity: 1;
	}
}
.tlui-button__icon {
	padding: 0px;
}
.tlui-page-menu__item__button .tlui-button__icon {
	margin-right: 4px;
}
@media (hover: hover) {
	.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button {
		opacity: 0;
	}

.tlui-page_menu__item__submenu:hover > .tlui-button {
		opacity: 1;
	}
}
/* -------------- Skip to main content -------------- */
.tl-skip-to-main-content {
	position: fixed;
	top: 48px;
	left: -9999px;
	padding: 8px 16px;
	z-index: var(--tl-layer-toasts);
}
.tl-skip-to-main-content:focus {
	left: 8px;
}
/* ---------------- Offline indicator --------------- */
.tlui-offline-indicator {
	display: flex;
	flex-direction: row;
	gap: var(--tl-space-3);
	color: var(--tl-color-text);
	background-color: var(--tl-color-low);
	border: 3px solid var(--tl-color-background);
	padding: 0px var(--tl-space-5);
	height: 42px;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	opacity: 0;
	animation: tl-fade-in;
	animation-duration: 0.12s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
/* ------------------- Style panel ------------------ */
.tlui-style-panel__wrapper {
	box-shadow: var(--tl-shadow-2);
	border-radius: var(--tl-radius-3);
	pointer-events: all;
	background-color: var(--tl-color-panel);
	height: fit-content;
	max-height: 100%;
	margin: 8px;
	margin-top: 4px;
	touch-action: auto;
	overscroll-behavior: none;
	overflow-y: auto;
	overflow-x: hidden;
	color: var(--tl-color-text);
}
/* if the style panel is the only child (ie no share menu), increase the margin */
.tlui-style-panel__wrapper:only-child {
	margin-top: 8px;
}
.tlui-style-panel {
	position: relative;
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	width: 148px;
	max-width: 148px;
}
.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-text);
	outline-offset: -5px;
}
.tlui-style-panel::-webkit-scrollbar {
	display: none;
}
.tlui-style-panel .tlui-button.select {
	width: 100%;
}
.tlui-style-panel__section {
	display: flex;
	position: relative;
	flex-direction: column;
}
/*
add a border to the bottom of all but the last section. we have to handle empty sections too, which
are hidden and shouldn't be counted
*/
.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
	border-bottom: 1px solid var(--tl-color-divider);
}
/*
if a section ends with a slider and we're adding a border, we need some extra space for visual
balance. we need to handle empty sections as above. is this the most complex css selector in all of
tldraw? probably.
*/
.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
	) {
	margin-bottom: 7px;
}
.tlui-style-panel__section:empty {
	display: none;
}
/*
 * This is used in a couple places, like Align and Vertical Align.
 * It's because we have a toolbar with a Toggle Group but then an adjacent button
 * next to it that opens a popup.
 */
.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
	flex-wrap: wrap;
}
.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
	margin-left: -2px;
}
.tlui-style-panel__section__common:not(:only-child) {
	margin-bottom: 7px;
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-style-panel__dropdown-picker:only-child {
	flex: 1;
}
.tlui-style-panel__double-select-picker {
	display: flex;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text-1);
	font-size: 12px;
}
.tlui-style-panel__double-select-picker-label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	flex-grow: 2;
	max-width: 100%;
}
.tlui-style-panel .tlui-button[data-state='open']::after {
	opacity: 1;
	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
}
@media (hover: hover) {
	.tlui-style-panel .tlui-button[aria-expanded='true'] {
		background: none;
	}
	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
		opacity: 1;
		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	}
}
/* Accessibility subheadings */
.tlui-style-panel__section .tlui-style-panel__subheading,
.tlui-style-panel__section__common .tlui-style-panel__subheading,
.tlui-style-panel__subheading + .tlui-slider__container {
	margin: 0;
	padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
	font-size: 12px;
	font-weight: inherit;
	line-height: inherit;
}
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
	padding-top: var(--tl-space-3);
}
.tlui-style-panel__subheading + .tlui-slider__container {
	padding-top: 0px;
}
/* --------------------- Bottom --------------------- */
.tlui-layout__bottom {
	grid-row: 2;
	width: 100%;
}
.tlui-layout__bottom__main {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* ------------------- Navigation ------------------- */
.tlui-navigation-panel {
	display: flex;
	width: min-content;
	flex-direction: column;
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	position: absolute;
	left: 0px;
}
.tlui-navigation-panel::before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	inset: -2px -2px 0px 0px;
	border-radius: 0;
	border-top: 2px solid var(--tl-color-background);
	border-right: 2px solid var(--tl-color-background);
	border-top-right-radius: var(--tl-radius-4);
	background-color: var(--tl-color-low);
}
.tlui-navigation-panel[data-a11y='true']::before {
	display: none;
}
/* Minimap */
.tlui-minimap {
	width: 100%;
	height: 96px;
	min-height: 96px;
	overflow: hidden;
	padding: var(--tl-space-3);
	padding-top: 0px;
}
.tlui-minimap__canvas {
	position: relative;
	width: 100%;
	height: 100%;
}
/* --------------------- Toolbar -------------------- */
/* Wide container */
.tlui-main-toolbar {
	grid-column: 1 / span 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 2;
}
.tlui-main-toolbar--horizontal {
	padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
	max-width: 100%;
}
.tlui-main-toolbar--vertical {
	position: absolute;
	left: 0;
	top: 90px; /* height of page menu + 'back to content' button */
	bottom: 140px; /* height of expanded mini-map */
	padding-left: calc(var(--tl-space-3) + var(--tl-sab));
}
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
	bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
}
/* Centered Content */
.tlui-main-toolbar__inner {
	position: relative;
	width: fit-content;
	display: flex;
	gap: var(--tl-space-3);
	align-items: flex-start;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
	flex-direction: column;
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
	width: fit-content;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
	display: flex;
	height: fit-content;
}
/* Row of controls + lock button */
.tlui-main-toolbar__extras {
	position: relative;
	z-index: var(--tl-layer-above);
	pointer-events: none;
	align-self: stretch;
}
.tlui-main-toolbar__extras:empty {
	display: none;
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
	height: 48px;
	top: 6px;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
	width: 48px;
	order: 1;
}
.tlui-main-toolbar__extras__controls {
	position: relative;
	z-index: var(--tl-layer-above);
	background-color: var(--tl-color-low);
	border: 2px solid var(--tl-color-background);
	pointer-events: all;
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
	border-top-left-radius: var(--tl-radius-4);
	border-top-right-radius: var(--tl-radius-4);
	margin-left: 8px;
	margin-right: 0px;
	width: fit-content;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
	border-top-right-radius: var(--tl-radius-4);
	border-bottom-right-radius: var(--tl-radius-4);
	margin-top: 8px;
	margin-left: -2px;
	margin-bottom: 0px;
	width: fit-content;
}
.tlui-main-toolbar__tools {
	border-radius: var(--tl-radius-4);
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	position: relative;
	background: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-2);
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
	align-self: flex-end;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
	align-self: flex-start;
}
.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
	width: 40px;
	margin-left: 2px;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
	height: 40px;
	margin-top: 2px;
}
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
	width: 32px;
	padding: 0px;
}
.tlui-main-toolbar--horizontal *[data-state='open']::after {
	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
.tlui-main-toolbar--vertical *[data-state='open']::after {
	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
.tlui-main-toolbar__overflow-content {
	touch-action: none;
}
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
	display: none;
}
.tlui-main-toolbar__group:empty {
	display: none;
}
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
	border-right: 1px solid var(--color-divider);
	margin-right: 2px;
}
.tlui-column.tlui-main-toolbar__group:not(
		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
	) {
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 2px;
}
.tlui-grid.tlui-main-toolbar__group {
	grid-column: 1 / span 4;
}
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 2px;
}
@media (hover: hover) {
	.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
	.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}
/* ------------------- Tooltip -------------------- */
.tlui-tooltip {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 4px;
	background-color: var(--tl-color-tooltip);
	box-shadow: none;
	color: var(--tl-color-text-shadow);
	max-width: 400px;
	width: fit-content;
	text-align: center;
	will-change: transform, opacity;
	z-index: 2;
}
.tlui-tooltip__arrow {
	fill: var(--tl-color-tooltip);
	will-change: opacity;
}
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
	z-index: var(--tl-layer-toasts) !important;
	pointer-events: none;
}
/* ------------------- Debug panel ------------------ */
.tlui-debug-panel {
	background-color: var(--tl-color-low);
	width: 100%;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto auto auto;
	justify-content: space-between;
	padding-left: var(--tl-space-4);
	border-top: 1px solid var(--tl-color-background);
	font-size: 12px;
	color: var(--tl-color-text-1);
	z-index: var(--tl-layer-panels);
	pointer-events: all;
}
.tlui-debug-panel__current-state {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tlui-debug-panel__fps {
	margin-right: 8px;
}
.tlui-debug-panel__fps__slow {
	font-weight: bold;
	color: var(--tl-color-danger);
}
.tlui-a11y-audit {
	border-collapse: collapse;
}
.tlui-a11y-audit th,
.tlui-a11y-audit td {
	padding: 8px;
	border: 1px solid var(--tl-color-low-border);
}
/* --------------------- Toasts --------------------- */
.tlui-toast__viewport {
	position: absolute;
	inset: 0px;
	margin: 0px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex-direction: column;
	gap: var(--tl-space-3);
	pointer-events: none;
	padding: 0px var(--tl-space-3) 64px 0px;
	z-index: var(--tl-layer-toasts);
}
.tlui-toast__viewport > * {
	pointer-events: all;
}
.tlui-toast__icon {
	padding-top: 11px;
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text-1);
}
.tlui-toast__container {
	min-width: 200px;
	display: flex;
	flex-direction: row;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-2);
	border-radius: var(--tl-radius-3);
	font-size: 12px;
}
.tlui-toast__container[data-severity='success'] .tlui-icon {
	color: var(--tl-color-success);
}
.tlui-toast__container[data-severity='info'] .tlui-icon {
	color: var(--tl-color-info);
}
.tlui-toast__container[data-severity='warning'] .tlui-icon {
	color: var(--tl-color-warning);
}
.tlui-toast__container[data-severity='error'] .tlui-icon {
	color: var(--tl-color-danger);
}
.tlui-toast__main {
	flex-grow: 2;
	max-width: 280px;
}
.tlui-toast__content {
	padding: var(--tl-space-4);
	display: flex;
	line-height: 1.4;
	flex-direction: column;
	gap: var(--tl-space-3);
}
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
	padding-bottom: var(--tl-space-2);
}
.tlui-toast__title {
	font-weight: bold;
	color: var(--tl-color-text-1);
	/* this makes the default toast look better */
	line-height: 16px;
}
.tlui-toast__description {
	color: var(--tl-color-text-1);
	padding: var(--tl-space-3);
	margin: 0px;
	padding: 0px;
}
.tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
	padding-left: 0px;
}
.tlui-toast__actions {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 0;
}
.tlui-toast__close {
	align-self: flex-end;
	flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.tlui-toast__container[data-state='open'] {
		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	}

.tlui-toast__container[data-state='closed'] {
		animation: tlui-fade-out 100ms ease-in;
	}

.tlui-toast__container[data-swipe='move'] {
		transform: translateX(var(--radix-toast-swipe-move-x));
	}

.tlui-toast__container[data-swipe='cancel'] {
		transform: translateX(0);
		transition: transform 200ms ease-out;
	}

.tlui-toast__container[data-swipe='end'] {
		animation: tlui-slide-out 100ms ease-out;
	}
}
/* ---------------- Dialog ---------------- */
.tlui-dialog__overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: var(--tl-layer-canvas-overlays);
	background-color: var(--tl-color-overlay);
	pointer-events: all;
	animation: tl-fade-in 0.12s ease-out;
	display: grid;
	place-items: center;
	overflow-y: auto;
	padding: 0px var(--tl-space-3);
}
.tlui-dialog__content {
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: default;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
	border-radius: var(--tl-radius-3);
	font-size: 12px;
	overflow: hidden;
	min-width: 300px;
	max-width: 100%;
	max-height: 80%;
}
.tlui-dialog__header {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0;
	z-index: var(--tl-layer-header-footer);
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text);
	height: 40px;
}
.tlui-dialog__header__title {
	flex: 1;
	font-weight: inherit;
	font-size: 12px;
	margin: 0px;
	color: var(--tl-color-text-1);
}
.tlui-dialog__header__close {
	justify-self: flex-end;
}
.tlui-dialog__body {
	padding: var(--tl-space-4) var(--tl-space-4);
	flex: 0 1;
	overflow-y: auto;
	overflow-x: hidden;
	color: var(--tl-color-text-1);
	user-select: all;
	-webkit-user-select: text;
}
.tlui-dialog__body a {
	color: var(--tl-color-selected);
}
.tlui-dialog__body ul,
.tlui-dialog__body ol {
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-2);
}
.tlui-dialog__footer {
	position: relative;
	min-height: 12px;
	z-index: var(--tl-layer-header-footer);
}
.tlui-dialog__footer__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {
	margin-right: -4px;
}
/* --------------------- Dialogs -------------------- */
/* Edit Link Dialog */
.tlui-edit-link-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-4);
	color: var(--tl-color-text);
}
.tlui-edit-link-dialog__input {
	background-color: var(--tl-color-muted-2);
	flex-grow: 2;
	border-radius: var(--tl-radius-2);
	padding: 0px var(--tl-space-4);
}
/* Embed Dialog */
.tlui-embed__spacer {
	flex-grow: 2;
	min-height: 0px;
	margin-left: calc(-1 * var(--tl-space-4));
	margin-top: calc(-1 * var(--tl-space-4));
	pointer-events: none;
}
.tlui-embed-dialog__list {
	display: flex;
	flex-direction: column;
	padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
}
.tlui-embed-dialog__item__image {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--tl-color-selected-contrast);
	border-radius: var(--tl-radius-1);
}
.tlui-embed-dialog__enter {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-4);
	color: var(--tl-color-text-1);
}
.tlui-embed-dialog__input {
	background-color: var(--tl-color-muted-2);
	flex-grow: 2;
	border-radius: var(--tl-radius-2);
	padding: 0px var(--tl-space-4);
}
.tlui-embed-dialog__warning {
	color: var(--tl-color-danger);
	text-shadow: none;
}
.tlui-embed-dialog__instruction__link {
	display: flex;
	gap: var(--tl-space-1);
	margin-top: var(--tl-space-4);
}
.tlui-embed-dialog__enter a {
	color: var(--tl-color-text-1);
}
/* --------------- Keyboard shortcuts --------------- */
.tlui-shortcuts-dialog__header {
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-shortcuts-dialog__body {
	position: relative;
	columns: 3;
	column-gap: var(--tl-space-9);
	pointer-events: all;
	touch-action: auto;

/* Terrible fix to allow firefox users to scroll the dialog */
	overflow-x: auto;
}
.tlui-shortcuts-dialog__body__tablet {
	columns: 2;
}
.tlui-shortcuts-dialog__body__mobile {
	columns: 1;
}
.tlui-shortcuts-dialog__group {
	break-inside: avoid-column;
	padding-bottom: var(--tl-space-6);
}
.tlui-shortcuts-dialog__group__title {
	font-size: inherit;
	font-weight: inherit;
	margin: 0px;
	color: var(--tl-color-text-3);
	height: 32px;
	display: flex;
	align-items: center;
}
.tlui-shortcuts-dialog__group__content {
	display: flex;
	flex-direction: column;
	color: var(--tl-color-text-1);
}
.tlui-shortcuts-dialog__key-pair {
	display: flex;
	gap: var(--tl-space-4);
	align-items: center;
	justify-content: space-between;
	height: 32px;
}
.tlui-shortcuts-dialog__key-pair__key {
	flex: 1;
	font-size: 12px;
}
/* ------------------ Language menu ----------------- */
.tlui-language-menu {
	max-height: 500px;
}
.tlui-language-menu::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 24px;
	background: linear-gradient(
		to bottom,
		var(--tl-color-panel-transparent) 0%,
		var(--tl-color-panel) 90%,
		var(--tl-color-panel) 100%
	);
	border-bottom-left-radius: var(--tl-radius-3);
	border-bottom-right-radius: var(--tl-radius-3);
	pointer-events: none;
}
/* ------------------ Actions menu ------------------ */
.tlui-actions-menu {
	max-height: calc(100vh - 150px);
}
/* -------------------- Help menu ------------------- */
.tlui-help-menu {
	pointer-events: all;
	position: absolute;
	bottom: var(--tl-space-2);
	right: var(--tl-space-2);
	z-index: var(--tl-layer-panels);
	border: 2px solid var(--tl-color-background);
	border-radius: 100%;
}
/* ------------------- Da share zone ------------------ */
.tlui-share-zone {
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	z-index: var(--tl-layer-panels);
	align-items: center;
	padding-top: 2px;
	padding-right: 4px;
}
/* ------------------- People Menu ------------------- */
.tlui-people-menu__avatars-button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: none;
	border: none;
	cursor: pointer;
	pointer-events: all;
	border-radius: var(--tl-radius-1);
	padding-right: 1px;
	height: 100%;
}
.tlui-people-menu__avatars {
	display: flex;
	flex-direction: row;
}
.tlui-people-menu__avatar {
	height: 24px;
	width: 24px;
	border: 2px solid var(--tl-color-background);
	background-color: var(--tl-color-low);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	color: var(--tl-color-selected-contrast);
	z-index: 2;
}
.tlui-people-menu__avatar:nth-of-type(n + 2) {
	margin-left: -12px;
}
.tlui-people-menu__avatars-button[data-state='open'] {
	opacity: 1;
}
@media (hover: hover) {
	.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
		border-color: var(--tl-color-low);
	}
}
.tlui-people-menu__more {
	min-width: 0px;
	font-size: 11px;
	font-weight: 600;
	color: var(--tl-color-text-1);
	font-family: inherit;
	padding: 0px 4px;
}
.tlui-people-menu__more::after {
	border-radius: var(--tl-radius-2);
	inset: 0px;
}
.tlui-people-menu__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 220px;
	height: fit-content;
	max-height: 50vh;
}
.tlui-people-menu__section {
	position: relative;
	touch-action: auto;
	flex-direction: column;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	touch-action: auto;
}
.tlui-people-menu__section:first-child,
.tlui-people-menu__section:last-child {
	flex-shrink: 0;
}
.tlui-people-menu__section:not(:last-child) {
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-people-menu__user {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.tlui-people-menu__user__color {
	flex-shrink: 0;
}
.tlui-people-menu__user__name {
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--tl-color-text-1);
	max-width: 100%;
	flex-grow: 1;
	flex-shrink: 100;
}
.tlui-people-menu__user__label {
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--tl-color-text-3);
	flex-grow: 100;
	flex-shrink: 0;
	margin-left: 4px;
}
.tlui-people-menu__user__input {
	flex-grow: 2;
	height: 100%;
	padding: 0px;
	margin: 0px;
}
.tlui-people-menu__user > .tlui-input__wrapper {
	width: auto;
	display: flex;
	align-items: auto;
	flex-grow: 2;
	gap: 8px;
	height: 100%;
	padding: 0px;
}
.tlui-people-menu__item {
	position: relative;
}
.tlui-people-menu__item:last-of-type .tlui-button__menu {
	margin-bottom: 0;
}
.tlui-people-menu__item__button {
	padding: 0 11px;
	overflow: hidden;
}
.tlui-people-menu__item > .tlui-button__menu {
	width: auto;
	display: flex;
	align-items: auto;
	justify-content: flex-start;
	flex-grow: 2;
	gap: 11px;
}
.tlui-people-menu__name {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tlui-people-menu__item__follow {
	position: absolute;
	top: 0px;
	right: 0px;
	max-width: 40px;
	flex-shrink: 0;
}
.tlui-people-menu__item[data-follow='true'],
.tlui-people-menu__item:has(.tlui-button:focus-visible) {
	padding-right: 36px;
}
.tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
.tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
	opacity: 1;
}
@media (hover: hover) {
	.tlui-people-menu__item__follow {
		opacity: 0;
	}

.tlui-people-menu__item:hover {
		padding-right: 36px;
	}
	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {
		opacity: 1;
	}
}
/* --------------- Following indicator -------------- */
.tlui-following-indicator {
	display: block;
	position: absolute;
	inset: 0px;
	border-width: 2px;
	border-style: solid;
	z-index: var(--tl-layer-following-indicator);
	pointer-events: none;
}
/* --------------- Contextual toolbar --------------- */
.tlui-contextual-toolbar {
	position: absolute;
}
/**
 * N.B. We hide the toolbar while mousing down, so no need to turn these off.
 */
.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
	pointer-events: all;
}
.tlui-contextual-toolbar [data-isactive='true']::after {
	background-color: var(--tl-color-muted-2);
	opacity: 1;
}
.tlui-contextual-toolbar {
	opacity: 0;
	transition: opacity 0.08s ease-in-out;
}
.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
	pointer-events: none;
}
.tlui-contextual-toolbar[data-visible='true'] {
	opacity: 1;
	z-index: var(--tl-layer-menus);
}
.tlui-contextual-toolbar[data-interactive='true'],
.tlui-contextual-toolbar[data-interactive='true'] * {
	pointer-events: all;
}
.tlui-rich-text__toolbar-link-input {
	margin-left: 12px;
	/*
	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
	 * This is so the toolbar size stays stable going in and out of the link editor.
	 */
	width: 148px;
}
.tlui-media__toolbar-alt-text-input {
	margin-left: 12px;
	/*
	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
	 * This is so the toolbar size stays stable going in and out of the alt text editor.
	 */
	min-width: 200px;
}
.tlui-contextual-toolbar .tlui-input__wrapper {
	height: 40px;
}
.tlui-image__toolbar .tlui-slider__container {
	width: 125px;
}
.tlui-image__toolbar .tlui-slider {
	height: 100%;
}
.tlui-image__toolbar .tlui-slider__track {
	height: 32px;
}
.tlui-image__toolbar .tlui-slider__thumb {
	width: 14px;
	height: 14px;
}
/* ------------------- Animations ------------------- */
@keyframes tlui-fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes tlui-slide-in {
	from {
		transform: translateX(calc(100% + var(--tl-space-3)));
	}
	to {
		transform: translateX(0px);
	}
}
@keyframes tlui-slide-out {
	from {
		transform: translateX(var(--radix-toast-swipe-end-x));
	}
	to {
		transform: translateX(calc(100% + var(--tl-space-3)));
	}
}
:root {
	touch-action: none;
}
body {
	font-family: 'Inter', sans-serif;
	overscroll-behavior: none;
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size3-Regular-gV2CO0n9.woff2) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.28"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
/* Layout when sidebar can collapse (like dotcom) */
._appLayout_1trun_2 {
	position: fixed;
	inset: 0;
	display: flex;
}

._sidebarWrapper_1trun_8 {
	--sidebar-width: 260px;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100%;
	z-index: 100;
	transform: translateX(-100%);
	transition: transform 0.22s ease-out;
}

._sidebarWrapper_1trun_8[data-visible='true'] {
	transform: translateX(0);
}

._main_1trun_24 {
	position: relative;
	flex: 1;
	min-width: 0;
	transition: margin-left 0.22s ease-out;
}

._sidebar_1trun_8 {
	width: 100%;
	height: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--color-panel, #f8f9fa);
	border-right: 1px solid var(--color-border, #e5e7eb);
}

._header_1trun_41 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

._title_1trun_49 {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #111);
}

._createBtn_1trun_55 {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--color-text, #111);
	background: transparent;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 6px;
	cursor: pointer;
}

._createBtn_1trun_55:hover {
	background: var(--color-hover, #eee);
}

._nav_1trun_74 {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

._boardLink_1trun_80 {
	display: block;
	width: 100%;
	padding: 8px 14px;
	text-align: left;
	font-size: 13px;
	color: var(--color-text, #333);
	background: transparent;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._boardLink_1trun_80:hover {
	background: var(--color-hover, #eee);
}

._boardLink_1trun_80._active_1trun_99 {
	background: var(--color-selected, #e0e7ff);
	color: var(--color-selected-text, #3730a3);
	font-weight: 500;
}

._loading_1trun_105 {
	padding: 12px 14px;
	font-size: 13px;
	color: var(--color-text-muted, #666);
}

._footer_1trun_111 {
	padding: 12px 14px;
	border-top: 1px solid var(--color-border, #e5e7eb);
}

._logoutBtn_1trun_116 {
	width: 100%;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--color-text, #333);
	background: transparent;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 6px;
	cursor: pointer;
}

._logoutBtn_1trun_116:hover {
	background: var(--color-hover, #eee);
}

/* Sections (dotcom-style) */
._section_1trun_132 {
	margin-top: 12px;
}

._section_1trun_132:first-child {
	margin-top: 4px;
}

._sectionTitle_1trun_140 {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 4px 14px 4px 14px;
}

._sectionList_1trun_149 {
	display: flex;
	flex-direction: column;
}

/* File list item (dotcom-style) */
._fileListItem_1trun_155 {
	position: relative;
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 8px;
	border-radius: 4px;
}

._fileListItem_1trun_155[data-active='true'] {
	background: var(--color-selected, #e0e7ff);
	color: var(--color-selected-text, #3730a3);
}

._fileListItem_1trun_155:hover {
	background: var(--color-hover, #f3f4f6);
}

._fileListItem_1trun_155[data-active='true']:hover {
	background: var(--color-selected-hover, #c7d2fe);
}

._fileListItemButton_1trun_177 {
	position: absolute;
	inset: 0;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1;
}

._fileListItemContent_1trun_188 {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	pointer-events: none;
	z-index: 2;
}

._fileListItemLabel_1trun_198 {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
}

._pinIcon_1trun_206 {
	flex-shrink: 0;
	font-size: 12px;
}

._fileListItemMenuTrigger_1trun_211 {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	color: var(--color-text-muted, #6b7280);
	z-index: 3;
}

._fileListItemMenuTrigger_1trun_211:hover {
	color: var(--color-text, #111);
	background: var(--color-hover, #eee);
}

._fileListItemActive_1trun_232 ._fileListItemMenuTrigger_1trun_211 {
	color: var(--color-selected-text, #3730a3);
}

/* Inline rename */
._itemRenameWrap_1trun_237 {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 8px;
	margin: 0 4px;
	border-radius: 4px;
	outline: 1px solid var(--color-focus, #3b82f6);
	outline-offset: -1px;
	background: var(--color-panel, #fff);
}

._itemRenameInput_1trun_250 {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-size: 13px;
	outline: none;
}

/* Context menu */
._contextMenuContent_1trun_260 {
	min-width: 160px;
	padding: 4px;
	background: var(--color-panel, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 10000;
}

._contextMenuItem_1trun_270 {
	padding: 8px 12px;
	font-size: 13px;
	border-radius: 4px;
	cursor: pointer;
	outline: none;
}

._contextMenuItem_1trun_270:hover,
._contextMenuItem_1trun_270:focus {
	background: var(--color-hover, #f3f4f6);
}
._container_1fjvi_1 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

._card_1fjvi_9 {
  width: 100%;
  max-width: 400px;
  padding: 32px 40px;
  background: var(--color-background, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

._title_1fjvi_19 {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text, #111);
  margin: 0 0 8px;
}

._description_1fjvi_27 {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 24px;
  line-height: 1.5;
}

._form_1fjvi_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._field_1fjvi_41 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._label_1fjvi_47 {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #111);
}

._input_1fjvi_53 {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text, #111);
  background: var(--color-input-bg, #f9fafb);
  border: 1px solid var(--color-input-border, #d1d5db);
  border-radius: 8px;
  box-sizing: border-box;
}

._input_1fjvi_53:focus {
  outline: none;
  border-color: var(--color-focus, #3b82f6);
  background: var(--color-background, #fff);
}

._input_1fjvi_53::placeholder {
  color: var(--color-text-muted, #9ca3af);
}

._error_1fjvi_75 {
  font-size: 13px;
  color: var(--color-danger, #dc2626);
  margin: 0;
}

._submit_1fjvi_81 {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary, #3b82f6);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
}

._submit_1fjvi_81:hover:not(:disabled) {
  background: var(--color-primary-hover, #2563eb);
}

._submit_1fjvi_81:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}