/* Every stylesheet loads here, after the SDK's: several rules override the SDK at its own
   specificity, so this file's order decides them. Inter is bundled because the offline app must not
   fetch its own chrome font. */
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(./inter-cyrillic-ext-400-normal-DQukG94-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-cyrillic-400-normal-obahsSVq.woff2) format('woff2'), url(./inter-cyrillic-400-normal-HOLc17fK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-greek-ext-400-normal-DGGRlc-M.woff2) format('woff2'), url(./inter-greek-ext-400-normal-KugGGMne.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-greek-400-normal-B4URO6DV.woff2) format('woff2'), url(./inter-greek-400-normal-q2sYcFCs.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(./inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(./inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(./inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format('woff2'), url(./inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-cyrillic-500-normal-BasfLYem.woff2) format('woff2'), url(./inter-cyrillic-500-normal-CxZf_p3X.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-greek-ext-500-normal-C4iEst2y.woff2) format('woff2'), url(./inter-greek-ext-500-normal-2j5mBUwD.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-greek-500-normal-BIZE56-Y.woff2) format('woff2'), url(./inter-greek-500-normal-Xzm54t5V.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(./inter-vietnamese-500-normal-mJboJaSs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(./inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(./inter-latin-500-normal-BL9OpVg8.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(./inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-cyrillic-600-normal-CWCymEST.woff2) format('woff2'), url(./inter-cyrillic-600-normal-4D_pXhcN.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-greek-ext-600-normal-DRtmH8MT.woff2) format('woff2'), url(./inter-greek-ext-600-normal-B8X0CLgF.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-greek-600-normal-plRanbMR.woff2) format('woff2'), url(./inter-greek-600-normal-BZpKdvQh.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(./inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(./inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(./inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-cyrillic-ext-700-normal-BjwYoWNd.woff2) format('woff2'), url(./inter-cyrillic-ext-700-normal-LO58E6JB.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-cyrillic-700-normal-CjBOestx.woff2) format('woff2'), url(./inter-cyrillic-700-normal-DrXBdSj3.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-greek-ext-700-normal-qfdV9bQt.woff2) format('woff2'), url(./inter-greek-ext-700-normal-BoQ6DsYi.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-greek-700-normal-C3JjAnD8.woff2) format('woff2'), url(./inter-greek-700-normal-BUv2fZ6O.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-vietnamese-700-normal-DlLaEgI2.woff2) format('woff2'), url(./inter-vietnamese-700-normal-BZaoP0fm.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-latin-ext-700-normal-Ca8adRJv.woff2) format('woff2'), url(./inter-latin-ext-700-normal-TidjK2hL.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-latin-700-normal-Yt3aPRUw.woff2) format('woff2'), url(./inter-latin-700-normal-BLAVimhd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* @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-canvas has `contain: strict` which creates its own stacking context.
	 * background, grid, shapes, overlays, and blocker are all children of .tl-canvas,
	 * so their z-indices are relative to the canvas, not the container.
	 *
	 * collaborators, watermark, and canvas-in-front are siblings of .tl-canvas
	 * (outside it), so they compete with the UI layer (.tlui-layout at z-index 300).
	 * canvas-in-front must be below the UI layer (300) to sit between
	 * the canvas and the UI; collaborator cursors sit above canvas content
	 * (and layers that anchor to it, like comment pins) but below the
	 * in-front content and the UI panels. The watermark (a licensing element)
	 * sits above that content so it can't be occluded, but still below the
	 * in-front content and the UI.
	 */
	--tl-layer-canvas-hidden: -999999;
	--tl-layer-canvas-background: 100;
	--tl-layer-canvas-grid: 150;
	--tl-layer-collaborators: 245;
	--tl-layer-watermark: 248;
	--tl-layer-canvas-in-front: 250;
	--tl-layer-canvas-shapes: 300;
	--tl-layer-canvas-overlays: 500;
	--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-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;
	--tl-tab-size: 2;

	/* Cursor SVGs */
	--tl-cursor-none: none;
	/* Hotspot sits between the white outline tip and the black tip: on either tip alone, hit-testing feels offset from one direction (#10855) */
	--tl-cursor-default:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>")
			12 10,
		default;
	--tl-cursor-pointer:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>")
			14 10,
		pointer;
	--tl-cursor-cross:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
			16 16,
		crosshair;
	--tl-cursor-comment:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g filter='url(%23shadow)'><path d='M5 19.5 L5 11 A8 8 0 0 1 13 3 A8 8 0 0 1 21 11 A8 8 0 0 1 13 19 Z' fill='white' stroke='black' stroke-width='1' stroke-linejoin='round'/></g></svg>")
			5 19,
		crosshair;
	--tl-cursor-move:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
			16 16,
		move;
	--tl-cursor-grab:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>")
			16 16,
		grab;
	--tl-cursor-grabbing:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>")
			16 16,
		grabbing;
	--tl-cursor-text:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>")
			4 10,
		text;
	--tl-cursor-zoom-in:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
			16 16,
		zoom-in;
	--tl-cursor-zoom-out:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
			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-selection-fill: hsl(210, 100%, 56%, 24%);
	--tl-color-selection-stroke: hsl(214, 84%, 56%);
	--tl-color-background: hsl(210, 20%, 98%);
	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css
	they're there to make sure the background color matches the user's preference before the actual app loads*/
	--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-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-disabled: hsl(204, 4%, 55%);
	--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%);

	/* 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-selection-fill: hsl(209, 100%, 57%, 20%);
	--tl-color-selection-stroke: hsl(214, 84%, 56%);
	--tl-color-background: hsl(240, 5%, 6.5%);
	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css
	they're there to make sure the background color matches the user's preference before the actual app loads*/
	--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-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-disabled: hsl(204, 4%, 50%);
	--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%);

	/* 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);
}

/* The host for <EditorPortal>, last among the container's children. It's a position in the DOM
   rather than a box: `display: contents` keeps what it holds positioned against the container. */
.tl-portal-host {
	display: contents;
}

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-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;
}

/* The collaborator cursor layer: a sibling of .tl-canvas, above all canvas content, below the
   in-front layer (250) and the UI panels (300). Display-only — pointer events pass through. */
.tl-collaborators {
	position: absolute;
	inset: 0px;
	z-index: var(--tl-layer-collaborators);
	pointer-events: none;
	overflow: clip;
	contain: layout style size;
}

.tl-collaborators__item {
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: visible;
	pointer-events: none;
	transform-origin: top left;
}

.tl-cursor {
	overflow: visible;
}

/* --------------- Overlay Stack --------------- */

/* -------------- Selection foreground -------------- */

.tl-selection__bg {
	position: absolute;
	top: 0px;
	left: 0px;
	transform-origin: top left;
	background-color: transparent;
	pointer-events: all;
}

.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;
	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;
	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;
	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;
	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;
}

.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: layout 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/<textarea> editors.
	 */
	overflow: hidden;
}

/**
 * Only when there's actually a highlight to style. ProseMirror hides the native selection whenever
 * it holds a NodeSelection — triple-clicking a list's bullet selects the whole list, for one — by
 * zeroing the ::selection background and nothing else. Painting the selected-contrast color with
 * no highlight behind it leaves the text invisible against the shape, and `inherit` can't undo it:
 * highlight pseudo-elements inherit from the ancestor's ::selection, so it just picks the same
 * color back up.
 */
.tl-text-input:not(:has(.ProseMirror-hideselection))::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);
	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 {
	tab-size: var(--tl-tab-size, 2);
}

.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: 1.625ch;
	/* Some resets, like Tailwind, nix the list styling. */
	list-style: revert;
}

.tl-rich-text ol:has(> li:nth-child(10)) {
	padding-left: 2.625ch;
}

.tl-rich-text ol:has(> li:nth-child(100)) {
	padding-left: 3.625ch;
}

.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;
	/**
	 * Headings render at a larger font-size than the body text (via the browser's
	 * default h1–h6 sizing), so they can't inherit the container's resolved
	 * whole-pixel line-height — that value is derived from the base font size and
	 * would cram the taller lines together. Instead, scale line-height with each
	 * heading's own font-size using tldraw's unitless line-height multiplier, which
	 * the rich-text render/measure paths expose here. The 1.35 fallback mirrors the
	 * default theme line-height (see defaultThemes.ts).
	 */
	line-height: var(--tl-rich-text-heading-line-height, 1.35);
}

.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;
	text-shadow: none;
}

@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;
}

.tl-text__outline {
	text-shadow: var(--tl-text-outline);
}

.tl-text__no-outline {
	text-shadow: none;
}

/* --------------------- 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);
	}
}

/* ---------------- 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;
}

/* ----------------- Shape indicator ---------------- */

.tl-shape-indicator {
	transform-origin: top left;
	fill: none;
	stroke-width: calc(1.5px * var(--tl-scale));
	contain: size layout;
}

.tl-canvas-overlays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--tl-layer-canvas-overlays);
}

/* ---------------------- 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;
	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);
}

.tl-content-slot {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
	transform-origin: top left;
}

/* -------------------- 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);
}

.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;
}

/* ------------------- 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 {
	color: currentColor;
}

.tl-note__attribution {
	position: absolute;
	bottom: calc(4px * var(--note-attribution-scale, 1));
	right: calc(8px * var(--note-attribution-scale, 1));
	font-family: var(--tl-font-sans);
	pointer-events: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
	z-index: 1;
}

/* ------------------- 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);
}

/* ------------------- 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 {
	/*
	 * UI z-index layers
	 *
	 * menu-click-capture and panels (.tlui-layout) participate in the
	 * container-level stacking context alongside the canvas layers:
	 *   watermark (200) < canvas-in-front (250) < menu-click-capture (250) < panels (300)
	 *
	 * menus, toasts, header-footer, etc. are children of .tlui-layout
	 * (which creates its own stacking context at z-index 300), so their
	 * z-indices are relative to the layout, not the container.
	 *
	 * cursor is rendered inside canvas-in-front (stacking context at
	 * z-index 250), so their z-indices are relative to that context.
	 */
	--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;
}

/* 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,
.tlui-button[data-disabled] {
	color: var(--tl-color-text-disabled);
	text-shadow: none;
	cursor: default;
}

.tlui-button:disabled .tlui-kbd,
.tlui-button[data-disabled] .tlui-kbd {
	color: var(--tl-color-text-disabled);
}

.tlui-button > * {
	position: relative;
	z-index: var(--tl-layer-above);
}

.tlui-button__label {
	font-size: 12px;
	flex-grow: 2;
	text-align: start;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 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, [data-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, [data-disabled]):hover {
		z-index: 1;
	}

	.tlui-button:not(:disabled, [data-disabled]):hover::after {
		opacity: 1;
	}
}

.tlui-button__icon + .tlui-button__label {
	margin-inline-start: 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, [data-disabled], :focus-visible):hover {
		color: var(--tl-color-primary);
	}

	.tlui-button__danger:not(:disabled, [data-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-inline-start: 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, [data-disabled], :focus-visible):active {
	color: var(--tl-color-selected-contrast);
}

.tlui-button__tool[aria-pressed='true']:not(:disabled, [data-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;
}

.tlui-zoom-menu__button[data-state='open']::after {
	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

/* --------------------- 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;
}

.tlui-icon__tiny {
	width: 12px;
	height: 12px;
}

/* --------------------- 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;
}

/* The label is a fixed bit of chrome next to the input; it should never be squeezed. Without this,
   an inherited `overflow-wrap: anywhere` (e.g. from .tlui-dialog__body) drops its min-content width
   to a single character and short labels wrap mid-word, e.g. "URL" breaking after "UR". */
.tlui-input__wrapper > label {
	flex-shrink: 0;
	overflow-wrap: normal;
}

/* 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/ */
@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	.tlui-input {
		font-size: 16px;
	}
}

/* --------------------- Select --------------------- */

/* Trigger extends .tlui-button with space-between layout */
.tlui-select__trigger {
	justify-content: space-between;
	gap: var(--tl-space-3);
}

.tlui-select__trigger[data-state='open']::after {
	opacity: 1;
}

.tlui-select__value {
	display: flex;
	align-items: center;
	gap: var(--tl-space-2);
}

.tlui-select__chevron {
	flex-shrink: 0;
	color: var(--tl-color-text-2);
}

/* Content extends .tlui-menu with Radix-aware sizing */
.tlui-select__content {
	min-width: var(--radix-select-trigger-width);
	max-height: var(--radix-select-content-available-height);
}

.tlui-select__viewport {
	padding: 4px 0;
}

/* Item extends .tlui-button__checkbox with left-aligned text */
.tlui-select__item {
	justify-content: flex-start;
}

.tlui-select__item-indicator {
	visibility: hidden;
}

.tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
	visibility: visible;
}

/* ----------------------- 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-inline-start: 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-inline-end: 0;
}

.tlui-kbd:not(:last-child) {
	margin-inline-end: 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 {
	--gradient-angle: 90deg;
}

.tlui-menu__submenu__trigger[data-direction='left'] {
	--gradient-angle: 270deg;
}

.tlui-menu__submenu__trigger[data-state='open']::after {
	opacity: 1;
	background: linear-gradient(
		var(--gradient-angle),
		rgba(144, 144, 144, 0) 0%,
		var(--tl-color-muted-2) 100%
	);
}

@media (hover: hover) {
	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
		opacity: 1;
		background: linear-gradient(
			var(--gradient-angle),
			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;
}

.tlui-hover-card__content {
	position: relative;
	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);
}

/* -------------------- 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 {
	display: flex;
	flex-direction: column;
	width: 220px;
}

.tlui-page-menu__trigger {
	width: auto;
}

.tlui-page-menu__trigger[data-state='open']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

.tlui-page-menu__list {
	flex: 0 0 auto;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tlui-page-menu__list::-webkit-scrollbar {
	display: none;
}

.tlui-page-menu__list__content {
	position: relative;
	overflow: hidden;
}

.tlui-page-menu__resize-handle {
	flex: 0 0 auto;
	position: relative;
	height: 1px;
	cursor: ns-resize;
	touch-action: none;
	background: var(--tl-color-divider);
	transition: background-color ease-in-out 150ms 80ms;
	z-index: 999;
}

/* Hit test area */
.tlui-page-menu__resize-handle::after {
	content: '';
	position: absolute;
	inset: -4px 0;
	background: none;
	z-index: 2000;
	pointer-events: all;
}

/* Thick blue indicator */
.tlui-page-menu__resize-handle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.5px;
	background: transparent;
	pointer-events: none;
	z-index: 2001;
}

.tlui-page-menu__resize-handle[data-resizing='true']::before {
	background: var(--tl-color-selected);
	transition: none;
}

.tlui-page-menu__create-button {
	flex: 0 0 auto;
	margin: 0;
}

.tlui-page-menu__item__button {
	flex: 1 1 auto;
	min-width: 0px;
}

.tlui-page-menu__item__button::after,
.tlui-page-menu__item__drag-handle::after {
	content: none;
}

.tlui-page-menu__item__button > .tlui-button__label {
	padding-inline-end: calc(40px - 12px);
}

.tlui-page-menu__item {
	position: absolute;
	top: 0px;
	inset-inline-start: 0px;
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	transition: transform 0.08s ease-out;
}

.tlui-page-menu__item::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	background: var(--tl-color-muted-2);
	opacity: 0;
	pointer-events: none;
}

.tlui-page-menu__item > * {
	position: relative;
	z-index: var(--tl-layer-above);
}

.tlui-page-menu__item[data-iscurrent='true']:not([data-editing='true'])::before {
	background: var(--tl-color-hint);
	opacity: 1;
}

.tlui-page-menu__item__title {
	flex: 1;
	height: 40px;
	position: relative;
}

.tlui-page-menu__item__title::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	border: 1px solid var(--tl-color-primary);
	pointer-events: none;
}

.tlui-page-menu__item__title > .tlui-input__wrapper {
	height: 100%;
}

.tlui-page-menu__item[data-dragging='true'],
.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__button,
.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__drag-handle {
	cursor: grabbing;
	transition: none;
}

.tlui-page-menu__item[data-dragging='true'] {
	background: var(--tl-color-panel);
	opacity: 1;
}

.tlui-page-menu__item__drag-handle {
	flex: 0 0 32px;
	min-width: 32px;
	padding: 0px;
	color: var(--tl-color-text-3);
	cursor: grab;
	touch-action: none;
}

.tlui-page-menu__item__drag-handle > .tlui-icon {
	position: relative;
	inset-inline-start: 1px;
}

.tlui-page-menu__item__drag-handle + .tlui-page-menu__item__button {
	padding-inline-start: 0px;
}

.tlui-page-menu__item__input {
	margin-inline-start: 12px;
}

.tlui-page-menu__item__submenu {
	position: absolute;
	inset-inline-end: 0px;
	top: 0px;
	height: 100%;
	z-index: 10;
}

.tlui-page-menu__item__submenu > .tlui-button {
	opacity: 0;
	color: var(--tl-color-text-3);
}

.tlui-page-menu__item__submenu > .tlui-button::after {
	content: none;
}

.tlui-page-menu__item:has(.tlui-button:focus-visible)
	> .tlui-page-menu__item__submenu
	> .tlui-button,
.tlui-page-menu__item__submenu > .tlui-button[data-state='open'],
.tlui-page-menu__item__submenu > .tlui-button:focus-visible {
	opacity: 1;
}

/* Hide the kebab while any row is being dragged: :hover sticks during pointer */
/* capture, which would otherwise leave the kebab visible mid-drag. */
.tlui-page-menu__list__content[data-dragging='true']
	.tlui-page-menu__item
	> .tlui-page-menu__item__submenu
	> .tlui-button {
	opacity: 0;
}

.tl-container[data-coarse='true'] .tlui-page-menu__item__submenu > .tlui-button {
	opacity: 1;
}

.tl-container[data-coarse='true'] .tlui-page-menu__item__button > .tlui-button__label {
	padding-inline-end: calc(40px - 12px);
}

@media (hover: hover) {
	.tlui-page-menu__resize-handle:hover::before {
		background: var(--tl-color-selected);
		height: 2px;
		transition: background-color 150ms 80ms;
	}

	.tlui-page-menu__item:not([data-editing='true']):hover::before {
		opacity: 1;
	}

	.tlui-page-menu__item:hover > .tlui-page-menu__item__submenu > .tlui-button {
		opacity: 1;
	}

	.tlui-page-menu__item__button > .tlui-button__label {
		padding-inline-end: 0px;
	}

	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > .tlui-button__label {
		padding-inline-end: calc(40px - 12px);
	}

	.tlui-page-menu__item__submenu > .tlui-button:hover {
		color: var(--tl-color-text);
	}
}
/* -------------- 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;
}

/*
 * focusing skip-to-main-content hide top ui buttons to make sure we avoid
 * z-index clashes on hover (see issue #8328)
 */
.tl-skip-to-main-content:focus + .tlui-layout__top .tlui-helper-buttons {
	display: none;
}

/* ---------------- Offline indicator --------------- */

.tlui-offline-indicator {
	display: flex;
	color: var(--tl-color-background);
	background-color: var(--tl-color-text);
	border: none;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	cursor: default;
	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-toolbar-toggle-group-item,
.tlui-style-panel__dropdown-picker > .tlui-button__icon {
	width: 40px;
	padding: 0;
}

.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%;
	min-width: 0px;
}

.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;
}

.tl-container[dir='rtl'] .tlui-navigation-panel {
	left: auto;
	right: 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);
}

.tl-container[dir='rtl'] .tlui-navigation-panel::before {
	inset: -2px 0px 0px -2px;
	border-right: 0;
	border-left: 2px solid var(--tl-color-background);
	border-top-right-radius: 0;
	border-top-left-radius: var(--tl-radius-4);
}

.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);
	contain: layout style paint;
}

.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(--tl-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(--tl-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(--tl-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-inline-start: 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);
}

.tl-container[dir='rtl'] .tlui-toast__viewport {
	padding: 0px 0px 64px var(--tl-space-3);
}

.tlui-toast__viewport > * {
	pointer-events: all;
}

.tlui-toast__icon {
	padding-top: 11px;
	padding-inline-start: 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;
	min-width: 0;
}

.tlui-toast__content {
	padding: var(--tl-space-4);
	display: flex;
	line-height: 1.4;
	flex-direction: column;
	gap: var(--tl-space-3);
	min-width: 0;
}

.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;
	overflow-wrap: anywhere;
}

.tlui-toast__description {
	color: var(--tl-color-text-1);
	padding: var(--tl-space-3);
	margin: 0px;
	padding: 0px;
	overflow-wrap: anywhere;
}

.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;
	}

	.tl-container[dir='rtl'] .tlui-toast__container[data-state='open'] {
		animation: tlui-slide-in-rtl 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	}

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

	.tl-container[dir='rtl'] .tlui-toast__container[data-swipe='end'] {
		animation: tlui-slide-out-rtl 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);
	animation: tl-fade-in 0.12s ease-out;
}

.tlui-dialog__positioner {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: var(--tl-layer-canvas-overlays);
	pointer-events: all;
	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-inline-start: 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;
	overflow-wrap: anywhere;
}
.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__disabled-notice {
	flex: 0 0 auto;
	padding: var(--tl-space-3) var(--tl-space-4);
	border-bottom: 1px solid var(--tl-color-divider);
	background-color: var(--tl-color-muted-2);
	color: var(--tl-color-text-1);
}

.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;

	scrollbar-width: none;
}

.tlui-shortcuts-dialog__body::-webkit-scrollbar {
	display: none;
}

.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-inline-start: -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,
.tlui-people-menu__user__edit {
	flex-shrink: 0;
}

.tlui-people-menu__user__name {
	text-align: start;
	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: start;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--tl-color-text-3);
	flex-grow: 100;
	flex-shrink: 0;
	margin-inline-start: 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 {
	display: flex;
	align-items: center;
}

.tlui-people-menu__item:last-of-type .tlui-button__menu {
	margin-bottom: 0;
}

.tlui-people-menu__item__button {
	padding-inline-start: 12px;
	padding-inline-end: 0px;
	overflow: hidden;
}

.tlui-people-menu__item > .tlui-button__menu {
	width: auto;
	display: flex;
	align-items: auto;
	justify-content: flex-start;
	flex-grow: 2;
	gap: 12px;
}

.tlui-people-menu__name {
	text-align: start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlui-people-menu__item__follow {
	flex-shrink: 0;
}

.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 .tlui-people-menu__item__follow {
		opacity: 1;
	}
}

/* --------------- Following indicator -------------- */

.tlui-following-indicator {
	display: block;
	position: absolute;
	inset: 0px;
	border-width: 2px;
	border-style: solid;
	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)));
	}
}

@keyframes tlui-slide-in-rtl {
	from {
		transform: translateX(calc(-100% - var(--tl-space-3)));
	}
	to {
		transform: translateX(0px);
	}
}

@keyframes tlui-slide-out-rtl {
	from {
		transform: translateX(var(--radix-toast-swipe-end-x));
	}
	to {
		transform: translateX(calc(-100% - var(--tl-space-3)));
	}
}

:root {
	--tla-radius-1: 2px;
	--tla-radius-2: 4px;
	--tla-font-ui:
		'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	color: var(--text-color-0);
	line-height: 1.6;
	touch-action: none;
	font-family: var(--tla-font-ui);
	font-weight: 500;
}

.tla {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	font-family: var(--tla-font-ui);
	background-color: var(--tla-color-panel);
	color: var(--tla-color-text-1);
}

.tla-theme__light {
	--tla-color-sidebar: hsl(0, 0%, 99%);
	--tla-color-tooltip: hsla(200, 14%, 4%, 0.838);
	--tla-color-canvas: hsl(210, 20%, 98%);
	--tla-color-panel: hsl(0, 0%, 100%);
	--tla-color-text-1: hsl(204, 8%, 5%);
	--tla-color-text-2: hsl(204, 2%, 20%);
	--tla-color-text-3: hsl(204, 4%, 45%);
	--tla-color-contrast: hsl(0, 0%, 100%);
	--tla-color-low: hsl(204, 16%, 94%);
	--tla-color-border: hsl(204, 16%, 85%);
	--tla-color-hover-1: hsl(204, 16%, 4%, 3%);
	--tla-color-hover-2: hsl(204, 16%, 4%, 4.5%);
	--tla-color-hover-3: hsla(0, 0%, 100%, 32.5%);
	--tla-color-overlay: hsla(240, 16%, 2%, 30%);
	--tla-color-primary: hsl(214, 84%, 56%);
	--tla-color-primary-hover: hsl(214, 84%, 58%);
	--tla-color-cta: hsl(214, 92%, 50%);
	--tla-color-secondary: hsl(0, 0%, 92%);
	--tla-color-secondary-hover: hsl(0, 0%, 93.5%);
	--tla-color-secondary-border: hsl(0, 0%, 80%);
	--tla-color-accent-1: hsl(50, 91%, 70%);
	--tla-color-accent-2: hsl(28, 88%, 57%);
	--tla-color-accent-3: hsl(135, 59%, 49%);
	--tla-color-warning: hsl(0, 88%, 57%);
	--tla-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
	--tla-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(--tla-color-contrast);
	--tla-shadow-3:
		0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
		inset 0px 0px 0px 1px var(--tla-color-contrast);
	--tla-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(--tla-color-contrast);
}

.tla-theme__dark {
	--tla-color-sidebar: hsl(0, 0%, 5%);
	--tla-color-tooltip: hsla(0, 0%, 100%, 1);
	--tla-color-canvas: hsl(240, 5%, 6.5%);
	--tla-color-panel: hsl(240, 6%, 13%);
	--tla-color-text-1: hsl(204, 8%, 98%);
	--tla-color-text-2: hsl(204, 5%, 85%);
	--tla-color-text-3: hsl(204, 4%, 75%);
	--tla-color-contrast: hsl(0, 0%, 100%);
	--tla-color-low: hsl(240, 4%, 11%);
	--tla-color-border: hsl(240, 12%, 20%);
	--tla-color-hover-1: hsl(240, 8%, 100%, 3%);
	--tla-color-hover-2: hsl(240, 8%, 100%, 5%);
	--tla-color-hover-3: hsl(204, 16%, 4%, 3%);
	--tla-color-overlay: hsla(240, 0%, 0%, 81%);
	--tla-color-cta: hsl(214, 100%, 50%);
	--tla-color-primary: hsl(214, 84%, 46%);
	--tla-color-primary-hover: hsl(214, 84%, 50%);
	--tla-color-secondary: hsl(0, 0%, 20%);
	--tla-color-secondary-hover: hsl(0, 0%, 22%);
	--tla-color-secondary-border: hsl(0, 0%, 25%);
	--tla-color-accent-1: hsl(50, 91%, 60%);
	--tla-color-accent-2: hsl(28, 88%, 47%);
	--tla-color-accent-3: hsl(135, 59%, 39%);
	--tla-color-warning: hsl(0, 95%, 65%);
	--tla-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(--tla-color-panel);
	--tla-shadow-2:
		0px 1px 3px hsla(0, 44%, 27%, 0.666), 0px 2px 6px hsl(0, 0%, 0%, 33%),
		inset 0px 0px 0px 1px var(--tla-color-panel);
	--tla-shadow-3:
		0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
		inset 0px 0px 0px 1px var(--tla-color-panel);
}

.tla .tl-container {
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
}

body {
	font-size: 12px;
	overscroll-behavior: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
svg,
input,
button,
textarea,
select {
	color: inherit;
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

html {
	height: 100%;
}

html,
body {
	overscroll-behavior-x: none;
}

body {
	display: flex;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: antialiased;
	text-rendering: optimizeLegibility;
}

div {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

#root {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
}

.editor__layout {
	display: relative;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.editor__tldraw {
	position: relative;
	width: 100%;
	height: 100%;
}

.editor__tldraw .tlui-layout__top__left {
	position: relative;
	/* The SDK gives this zone a zero flex basis; filling the header lets EditorMenuPanel's drag
	   layer reach the style panel. */
	flex: 1 1 auto;
}

.editor__tldraw .tlui-layout__top__right {
	position: absolute;
	right: 0px;
	/* 8px below the title-bar row, whose right side holds the caption buttons on Windows/Linux. */
	top: 36px;
	-webkit-app-region: no-drag;
}

/* macOS keeps the title bar's right side free, and a browser has no title bar, so the style
   toolbar floats up into the top row. */
:root:is([data-platform='darwin'], :not([data-platform])) .editor__tldraw .tlui-layout__top__right {
	top: 0px;
}

.editor__tldraw .tlui-layout__top__center {
	display: none;
}

/* Every window is frameless, so this row is the titlebar: a drag layer spans it under the content
   bar and the window controls. */

.window-chrome {
	/* Ours, not the OS's 46px cluster: full-bar-height targets, so close reaches the screen corner
	   when maximized. */
	--window-caption-button-size: 36px;
	position: relative;
	width: 100%;
	pointer-events: all;
}

.window-chrome__drag {
	position: absolute;
	inset: 0;
	z-index: 1;
	-webkit-app-region: drag;
}

.window-chrome__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
	/* No left inset: the first slot supplies its own. */
}

/* Interactive elements anywhere in the chrome opt out of the drag region. */
.window-chrome button,
.window-chrome [data-state],
.window-chrome input,
.window-chrome select {
	-webkit-app-region: no-drag;
}

/* Frameless Linux windows get no reliable border or shadow (bare Xvfb has no compositor), so
   overlapping windows blend; a fixed, inert overlay draws a hairline. */
:root[data-platform='linux'] .tla::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147483647;
	box-shadow: inset 0 0 0 1px var(--tla-color-border);
}

.window-chrome--titlebar {
	height: 36px;
	z-index: 9999;
	flex-shrink: 0;
}

.editor__menu-panel-container {
	height: 40px;
}

/* Windows/Linux: a long filename ellipsizes instead of running under the caption buttons. */
.editor__menu-panel-container:has(.window-chrome__caption-controls) .editor__menu-panel {
	max-width: calc(100% - 3 * var(--window-caption-button-size));
}

/* macOS and browsers: reserve the share zone's width only for what it holds (the button alone, beside the
   offline glyph, beside a full face pile), so a long filename ellipsizes without capping names that
   fit. */
:root:is([data-platform='darwin'], :not([data-platform]))
	.editor__tldraw:has(.tlui-share-zone > *)
	.editor__menu-panel {
	max-width: calc(100% - 90px);
}

/* The offline glyph replaces the face pile: 90px plus its own 32px. */
:root:is([data-platform='darwin'], :not([data-platform]))
	.editor__tldraw:has(.tlui-offline-indicator)
	.editor__menu-panel {
	max-width: calc(100% - 122px);
}

:root:is([data-platform='darwin'], :not([data-platform]))
	.editor__tldraw:has(.tlui-people-menu__avatars-button)
	.editor__menu-panel {
	max-width: calc(100% - 200px);
}

.editor__menu-panel {
	display: flex;
	align-items: center;
	width: fit-content;
	position: relative;
	z-index: 2;
	background-color: var(--tla-color-canvas);
	border-bottom-right-radius: 12px;
}

/* Single-page boards: hold the title off the rounded corner by the traffic lights' 14px inset (it
   brings 12px itself). */
.editor__menu-panel:has(> .editor__document-title:last-child) {
	padding-right: 2px;
}

/* The SDK's open-menu gradient is scoped to .tlui-menu-zone, which this header replaces. */
.editor__menu-panel .tlui-button[data-state='open']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

/* Room under the native macOS traffic lights (WindowManager's trafficLightPosition). */
.window-chrome__traffic-lights-inset {
	width: 80px;
	flex-shrink: 0;
}

.editor__document-title {
	display: flex;
	align-items: baseline;
	/* 12px like the buttons either side, so the separator sits evenly between the names. */
	padding: 0 12px;
	color: var(--tla-color-text-1);
	font-size: 12px;
	white-space: nowrap;
	/* Shrink and ellipsize when the bar hits its caption-cluster cap. */
	min-width: 0;
	/* Out of the drag region, so a double-click renames instead of maximizing on macOS. */
	-webkit-app-region: no-drag;
}

/* Only a local file invites the rename double-click; a joined board's name is the host's. */
.editor__document-title[data-renameable='true'] {
	cursor: text;
}

.editor__document-title > span:first-of-type {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.editor__title-separator {
	flex-shrink: 0;
	/* No padding: the neighbours' 12px each centre the divider. */
	color: var(--tla-color-text-3);
	font-size: 12px;
	pointer-events: none;
}

/* A breadcrumb label, as on tldraw.com: no caret, and a 320px cap so a long name ellipsizes. */
.editor__menu-panel .tlui-page-menu__trigger {
	max-width: 320px;
}

.editor__menu-panel .tlui-page-menu__trigger .tlui-button__icon {
	display: none;
}

/* Drawn in CSS: `•` reads too small and `●` too large at this size. */
.editor__dirty-indicator {
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-radius: 50%;
	align-self: center;
	transform: translateY(0.5px);
	/* Keeps its size when the title shrinks under caption-cluster pressure. */
	flex-shrink: 0;
	background-color: transparent;
}

.editor__dirty-indicator[data-unsaved='true'] {
	background-color: var(--tla-color-text-1);
}

/* macOS shows unsaved state in the close button. */
:root[data-platform='darwin'] .editor__dirty-indicator {
	display: none;
}

/* Portaled to the theme container and fixed at the pointer, so no chrome overflow or stacking
   context clips it. */
.editor__title-menu {
	position: fixed;
	display: flex;
	flex-direction: column;
	min-width: 160px;
	padding: 4px;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 8px;
	background-color: var(--tla-color-panel);
	box-shadow: 0px 4px 16px hsla(204, 16%, 4%, 12%);
	/* Above the SDK's .tlui-layout (z-index 300), which shares this stacking context. */
	z-index: var(--tl-layer-menus, 400);
}

.editor__title-menu-item {
	all: unset;
	padding: 6px 10px;
	border-radius: 4px;
	color: var(--tl-color-text-0);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

@media (hover: hover) {
	.editor__title-menu-item:hover {
		background-color: var(--tl-color-muted-0);
	}
}

.editor__title-menu-item:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
}

/* Stretch to the host bar's height, flush to the corner, so close reaches the screen edge when
   maximized. */
.window-chrome__caption-controls {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 2;
}

/* Board windows: the chrome row is transparent over the canvas and these 1px glyphs vanish over
   dark ink, so they get the plate the filename has at the other end of the row. */
.editor__menu-panel-container > .window-chrome__caption-controls {
	background-color: var(--tla-color-canvas);
	border-bottom-left-radius: 12px;
}

.window-chrome__caption-controls button {
	width: var(--window-caption-button-size);
	height: 100%;
	-webkit-app-region: no-drag;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--tla-color-text-1);
}

.window-chrome__caption-controls button:hover {
	background: rgba(0, 0, 0, 0.06);
}

.tla-theme__dark .window-chrome__caption-controls button:hover {
	background: rgba(255, 255, 255, 0.08);
}

.window-chrome__caption-controls button.window-chrome__caption-control--close:hover {
	background: #e81123;
	color: #ffffff;
}

/* No z-index: raising this full-width layer above the sibling caption controls
   makes them unclickable on Windows/Linux (window-controls.test.ts). */
.editor__titlebar {
	height: 100%;
	width: 100%;
	background-color: var(--color-panel);
	border-bottom: 1px solid var(--color-muted-1);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	position: relative;
}

.editor__titlebar__title {
	position: absolute;
	left: 0px;
	width: 100%;
	pointer-events: none;
	display: flex;
	align-items: baseline;
	justify-content: center;
	color: var(--tla-color-text-1);
}

.editor__titlebar__title-extension {
	color: var(--tla-color-text-3);
}

.editor__titlebar__dirty-indicator {
	margin-right: 4px;
}

.remote-board__error {
	position: absolute;
	inset: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px;
	background: var(--tla-color-panel);
	color: var(--tla-color-text-1);
	font-family: var(--tla-font-ui);
	text-align: center;
}

.remote-board__error span {
	max-width: 480px;
	color: var(--tla-color-text-3);
}

.remote-board__error .home__button {
	width: auto;
	border: 1px solid var(--tla-color-border);
	border-radius: var(--tla-radius-2);
}

.desktop-button {
	border: 1px solid var(--tla-color-border);
	border-radius: var(--tla-radius-2);
	background-color: var(--tla-color-panel);
	color: var(--tla-color-text-1);
	font: inherit;
	font-size: 12px;
	padding: 6px 12px;
	cursor: pointer;
}

.desktop-button:hover:not(:disabled) {
	background-color: var(--tla-color-low);
}

.desktop-button:focus-visible {
	outline: none;
	border-color: var(--tla-color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--tla-color-primary) 18%, transparent);
}

.desktop-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.desktop-button--primary {
	background-color: var(--tla-color-primary);
	border-color: var(--tla-color-primary);
	color: var(--tla-color-contrast);
}

.desktop-button--primary:hover:not(:disabled) {
	background-color: var(--tla-color-cta);
	border-color: var(--tla-color-cta);
}

.desktop-button--danger {
	background-color: var(--tla-color-warning);
	border-color: var(--tla-color-warning);
	color: var(--tla-color-contrast);
}

.desktop-button--danger:hover:not(:disabled) {
	background-color: var(--tla-color-warning);
	filter: brightness(0.92);
}

.desktop-dialog__overlay {
	position: absolute;
	inset: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tla-color-overlay);
	z-index: 10;
}

.desktop-dialog {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 320px;
	padding: 16px;
	border: 1px solid var(--tla-color-border);
	border-radius: 8px;
	background-color: var(--tla-color-panel);
	box-shadow: 0px 8px 24px hsla(204, 16%, 4%, 16%);
}

.desktop-dialog__title {
	font-size: 13px;
	font-weight: 700;
}

.desktop-dialog__message {
	margin: 0px;
	color: var(--tla-color-text-1);
	font-size: 12px;
	line-height: 1.5;
}

.desktop-dialog__error {
	margin: 0px;
	color: var(--tla-color-warning);
	font-size: 12px;
}

.desktop-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.welcome__layout {
	position: absolute;
	inset: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.welcome__container {
	display: flex;
	flex-shrink: 1;
	overflow: hidden;
	width: 260px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0px;
}

.welcome__container button {
	width: 100%;
}

/* Welcome floats its title bar over the content. */
.welcome__layout .window-chrome--titlebar {
	position: absolute;
	top: 0px;
	left: 0px;
}

.welcome__layout .editor__titlebar {
	border-bottom: none;
}

.welcome__layout .editor__titlebar > .tlui-button {
	height: 36px;
	min-width: 36px;
}

/* The editor header's open-state gradient (see .editor__menu-panel), so the two bars' triggers
   read as one control. */
.welcome__layout .editor__titlebar .tlui-button[data-state='open']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

.welcome__section {
	display: flex;
	width: 100%;
}

.welcome__logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	margin-bottom: 36px;
}

.welcome__logo {
	width: 220px;
	height: 35px;
}

.welcome__layout .welcome__logo {
	display: block;
	width: 220px;
	height: 35px;
	object-fit: contain;
}

.tla-theme__dark .welcome__layout .welcome__logo {
	filter: invert(1);
}

.welcome__main-buttons {
	flex-direction: column;
	width: 260px;
}

.welcome__layout .tlui-kbd {
	display: flex;
	align-items: center;
	gap: 4px;
	height: auto;
	min-width: 0px;
	padding: 0px;
	border: none;
	border-radius: 0px;
	background: none;
	box-shadow: none;
	color: var(--tla-color-text-1);
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 19.2px;
}

.welcome__layout .tlui-kbd span {
	display: inline;
	min-width: 0px;
	margin: 0px;
	padding: 0px;
	color: inherit;
	font: inherit;
	line-height: inherit;
}

.welcome__divider {
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
}

.welcome__divider hr {
	width: calc(100% - 24px);
	height: 1px;
	background: #edf0f2;
	border: none;
	margin: 0px 12px;
}

.tla-theme__dark .welcome__divider hr {
	background: var(--tla-color-border);
}

.welcome__button {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	height: 40px;
	padding: 0px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
	gap: 8px;
	color: var(--tla-color-text-1);
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 19.2px;
}

.welcome__button-label {
	flex: 1 1 auto;
	min-width: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.welcome__button svg {
	flex-shrink: 0;
}

@media (hover: hover) {
	.welcome__button:after {
		content: '';
		position: absolute;
		inset: 2px 0px;
		border-radius: 4px;
		background-color: var(--tla-color-hover-1);
		opacity: 0;
		pointer-events: none;
	}

	.welcome__button:hover:after {
		opacity: 1;
	}
}

/* Label centre 20px from the window edge, level with the traffic lights. */
.welcome__agent-skills {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	justify-content: center;
}

.welcome__agent-skills::after {
	content: none;
}

.welcome__agent-skills-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #0a70f5;
}

/* Glyph centre 20px from each edge, level with the agent-skills label. */
.welcome__help {
	position: absolute;
	bottom: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	color: var(--tla-color-text-1);
}

.welcome__recent {
	display: flex;
	flex-direction: column;
	width: 260px;
	text-align: left;
}

@media (max-width: 500px) {
	.welcome__container {
		width: min(260px, calc(100vw - 32px));
	}

	.welcome__recent {
		width: 100%;
	}
}

.welcome__recent-title {
	display: flex;
	align-items: center;
	width: 100%;
	height: 28px;
	padding: 0px 12px;
	color: #6e7477;
	font-size: 12px;
	font-weight: 500;
	line-height: 19.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tla-theme__dark .welcome__recent-title {
	color: var(--tla-color-text-3);
}

/* Tighter than the main buttons, so files and servers fit without the window growing. */
.welcome__recent .welcome__button {
	height: 32px;
}

.welcome__button__file + .welcome__recent-title {
	margin-top: 10px;
}

.welcome__button__file {
	justify-content: flex-start;
}

.welcome__button__file[data-status='offline'] .welcome__file-name {
	text-decoration: line-through;
}

.welcome__recent-row {
	position: relative;
	width: 100%;
}

.welcome__container .welcome__recent-remove {
	position: absolute;
	top: calc(50% - 10px);
	right: 4px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: none;
	color: var(--tla-color-text-3);
	cursor: pointer;
	opacity: 0;
}

.welcome__recent-row:hover .welcome__recent-remove,
.welcome__recent-remove:focus-visible {
	opacity: 1;
}

.welcome__recent-row:hover .welcome__button__file > svg,
.welcome__recent-row:has(.welcome__recent-remove:focus-visible) .welcome__button__file > svg {
	visibility: hidden;
}

.welcome__recent-remove:hover {
	color: var(--tla-color-text-1);
	background-color: var(--tla-color-hover-1);
}

.welcome__button__file svg {
	color: #777777;
}

.tla-theme__dark .welcome__button__file svg {
	color: var(--tla-color-text-3);
}

.welcome__file-path-container {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	flex-grow: 1;
}

.welcome__file-path-container::after {
	position: absolute;
	display: block;
	inset: 2px 0px;
	background-color: var(--tla-color-hover-1);
	visibility: hidden;
}

.welcome__file-path-container[data-paths='true'] {
	grid-template-columns: minmax(0, auto) 1fr;
}

.welcome__file-path-container[data-paths='true'] .welcome__file-path {
	opacity: 1;
}

.welcome__file-path-container[data-paths='false'] {
	grid-template-columns: 0fr 1fr;
}

.welcome__file-path-container[data-paths='false'] .welcome__file-path {
	opacity: 0;
}

.welcome__file-path {
	display: inline-block;
	color: var(--tla-color-text-3);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.welcome__file-name {
	display: inline-block;
	color: var(--tla-color-text-1);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.about__layout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

.about__layout .editor__titlebar {
	border-bottom: none;
}

.about__content {
	overflow-y: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-bottom: 24px;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}

.about__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.about__logo {
	display: block;
	width: 220px;
	height: 35px;
	object-fit: contain;
	color: var(--tla-color-text-1);
}

.tla-theme__dark .about__layout .about__logo {
	filter: invert(1);
}

.about__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.about__description {
	margin-top: 16px;
	color: var(--tla-color-text-2);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

.about__description a {
	color: var(--tla-color-primary);
	text-decoration: underline;
}

.about__description a:hover {
	color: var(--tla-color-cta);
}

.about__links {
	margin: 0;
	padding-left: 20px;
	color: var(--tla-color-text-2);
}

.about__links li {
	margin-bottom: 8px;
}

.about__links a {
	color: var(--tla-color-primary);
	text-decoration: underline;
}

.about__links a:hover {
	color: var(--tla-color-cta);
}

.about__footer {
	padding: 8px 0px;
	font-size: 12px;
	flex-shrink: 0;
	color: var(--tla-color-text-3);
	text-align: center;
	background-color: var(--tla-color-panel);
}

.feedback__layout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

.feedback__layout .editor__titlebar {
	border-bottom: none;
}

.feedback__content {
	font-size: 12px;
	min-height: 0;
	padding: 12px 24px 24px 24px;
	display: flex;
	flex-direction: column;
	/* The window fits this content; the overflow covers pre-fit paints and a clamped fit. */
	overflow-y: auto;
}

.feedback__content * {
	user-select: text;
}

.feedback__section {
	display: flex;
	/* Never `flex: 1`: the window measures the form's natural height, and a flex-basis-0 stretch
	   reports ~zero. */
	flex-direction: column;
	gap: 12px;
}

.feedback__section h1 {
	font-weight: 700;
	color: var(--tla-color-text-1);
	margin: 0;
	font-size: inherit;
}

.feedback__intro {
	color: var(--tla-color-text-2);
	line-height: 1.6;
	margin: 0;
}

.feedback__intro a {
	text-decoration: underline;
}

.feedback__intro a:hover {
	color: var(--tla-color-cta);
}

.feedback__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--tla-color-text-2);
}

.feedback__input {
	border: 1px solid var(--tla-color-border);
	border-radius: var(--tla-radius-2);
	background-color: var(--tla-color-panel);
	color: var(--tla-color-text-1);
	padding: 8px 10px;
	width: 100%;
	font: inherit;
	line-height: 1.4;
}

.feedback__input::placeholder {
	color: var(--tla-color-text-3);
}

.feedback__input:focus {
	outline: none;
	border-color: var(--tla-color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--tla-color-primary) 18%, transparent);
}

.feedback__input:disabled {
	opacity: 0.6;
}

.feedback__textarea {
	/* A fixed height: the message box gives the measured form its height. */
	height: 120px;
	border: 1px solid var(--tla-color-border);
	border-radius: var(--tla-radius-2);
	background-color: var(--tla-color-panel);
	color: var(--tla-color-text-1);
	padding: 10px 12px;
	resize: none;
	width: 100%;
	font: inherit;
	line-height: 1.55;
}

.feedback__textarea::placeholder {
	color: var(--tla-color-text-3);
}

.feedback__textarea:focus {
	outline: none;
	border-color: var(--tla-color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--tla-color-primary) 18%, transparent);
}

.feedback__textarea:disabled {
	opacity: 0.6;
}

.feedback__error {
	color: var(--tla-color-warning);
	margin: 0;
	line-height: 1.5;
}

/* Waiting on the macOS permission is not a failure, so it takes no warning colour. */
.join__waiting {
	color: var(--tla-color-text-3);
}

.feedback__support-id {
	margin: 0;
	font-size: 11px;
	color: var(--tla-color-text-3);
	line-height: 1.5;
	user-select: text;
}

.feedback__support-id code {
	font-family:
		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

.feedback__footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0px 24px 24px 24px;
	background-color: var(--tla-color-panel);
}

.feedback__actions {
	display: flex;
	gap: 8px;
}

.feedback__copyright {
	padding: 8px 0px;
	font-size: 12px;
	flex-shrink: 0;
	color: var(--tla-color-text-3);
	text-align: center;
	background-color: var(--tla-color-panel);
}

.feedback__copyright a {
	color: inherit;
	text-decoration: underline;
}

.join__layout {
	position: absolute;
	top: 0px;
	left: 0px;
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

.join__layout .editor__titlebar {
	border-bottom: none;
}

.join__content {
	display: flex;
	min-height: 0;
	flex-direction: column;
	padding: 12px 24px 18px;
	font-size: 12px;
	/* The window fits this content; the overflow covers pre-fit paints and a clamped fit. */
	overflow-y: auto;
}

.join__section {
	display: flex;
	/* Never `flex: 1`: the window measures the form's natural height, and a flex-basis-0 stretch
	   reports ~zero. */
	flex-direction: column;
	gap: 12px;
}

.join__section h1 {
	margin: 0;
	color: var(--tla-color-text-1);
	font-size: inherit;
	font-weight: 700;
}

.join__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0px 24px 20px;
	background-color: var(--tla-color-panel);
}

/* Portalled into the editor by the SDK, so it uses the SDK's --tl-* tokens, not --tla-*. */

/* The filled controls match tldraw.com's fills; their ~3.4:1 label contrast is that deliberate
   match. */

/* tldraw.com's .topRightPanel, scaled to this 40px header (dotcom's is 44px). */
.editor__tldraw .tlui-share-zone {
	height: 40px;
	align-items: center;
	padding-top: 4px;
	padding-right: 6px;
}

/* Presence stays at the SDK's 24px, as on tldraw.com. */

/* The SDK's offline glyph, left as tldraw.com shows it, but hoverable so its tooltip shows: the SDK
   UI layer is pointer-events: none. */
.tlui-offline-indicator {
	pointer-events: all;
}

/* tldraw.com's .commentsSidebarButton; the plate keeps it legible over ink. */
.desktop-comments__sidebar-button.tlui-button {
	background-color: var(--tl-color-background);
	border-radius: 8px;
	height: 36px;
	width: 36px;
	min-width: 36px;
}

/* Match the hover wash to the share pill's inset and radius (the base ::after sits at 4px). */
.desktop-comments__sidebar-button.tlui-button::after {
	inset: 2px;
}

.desktop-comments__sidebar-button.tlui-button[aria-pressed='true']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

/* tldraw.com's canvas CTA; the ::after plate keeps it legible over a drawing. */
.desktop-share__trigger.tlui-button {
	position: relative;
	height: 36px;
	min-width: 0;
	padding: 0 16px;
	gap: 8px;
	margin-left: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tl-color-selected-contrast);
}

.desktop-share__trigger.tlui-button::before {
	content: '';
	position: absolute;
	inset: 2px;
	z-index: 2;
	border-radius: 6px;
}

.desktop-share__trigger.tlui-button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 8px;
	background-color: var(--tl-color-background);
	/* Overrides the SDK's open-menu gradient, which on a filled pill only muddies it. */
	background-image: none;
	opacity: 1;
}

.desktop-share__trigger.tlui-button::before {
	background-color: var(--tl-color-primary);
}

/* Above both layers and centred, not the SDK's menu-row alignment. */
.desktop-share__trigger.tlui-button .tlui-button__label {
	position: relative;
	z-index: 3;
	flex-grow: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-align: center;
}

@media (hover: hover) {
	.desktop-share__trigger.tlui-button:not(:disabled, [data-disabled]):hover::before {
		background-color: var(--tla-color-primary-hover);
	}
}

.desktop-share__trigger.tlui-button[data-state='open']::before {
	background-color: var(--tla-color-primary-hover);
}

/* tldraw.com's share-menu primitives (tla-menu/menu.module.css), values unchanged so the two menus
   are one design. */

.desktop-menu__section {
	display: flex;
	padding: var(--tl-space-4);
	flex-direction: column;
	gap: var(--tl-space-4);
}

.desktop-menu__section:nth-of-type(n + 2) {
	border-top: 1px solid var(--tl-color-divider);
}

.desktop-menu__control-group {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-2);
}

.desktop-menu__control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32px;
}

.desktop-menu__label {
	color: var(--tl-color-text-0);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

/* A real checkbox over a drawn track keeps native semantics and keyboard behaviour. */
.desktop-menu__switch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.desktop-menu__switch input[type='checkbox'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	pointer-events: all;
}

.desktop-menu__switch-track {
	--switch-h: 20px;
	--switch-w: calc(var(--switch-h) * 1.618);
	position: relative;
	width: var(--switch-w);
	height: var(--switch-h);
	border-radius: 99px;
	/* dotcom's --tla-color-inactive, which this app does not define. */
	background-color: hsl(204, 4%, 55%);
	transition:
		background-color 0.12s,
		left 0.12s;
}

.desktop-menu__switch-track::after {
	content: '';
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	right: initial;
	width: calc(var(--switch-h) - 4px);
	height: calc(var(--switch-h) - 4px);
	border-radius: 100%;
	background-color: var(--tl-color-panel);
	pointer-events: none;
	transition:
		background-color 0.12s,
		left 0.12s;
}

/* State shows in colour AND knob position; the track meets the 3:1 bar. */
.desktop-menu__switch-track[data-checked='true'] {
	background-color: var(--tl-color-primary);
}

.desktop-menu__switch-track[data-checked='true']::after {
	left: calc(var(--switch-w) - (var(--switch-h) - 4px) - 2px);
	background-color: var(--tl-color-selected-contrast);
}

.desktop-menu__switch--disabled .desktop-menu__switch-track {
	opacity: 0.35;
}

.desktop-menu__switch input[type='checkbox']:disabled {
	cursor: default;
}

.desktop-menu__switch input[type='checkbox']:focus-visible + .desktop-menu__switch-track,
.desktop-menu__switch:has(input:focus-visible) .desktop-menu__switch-track {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.desktop-menu__switch-track,
	.desktop-menu__switch-track::after {
		transition: none;
	}
}

/* Scoped to OFF: the checked rule has equal specificity and comes earlier, so an unscoped rule
   would grey a switched-on track. */
.tl-theme__dark .desktop-menu__switch-track:not([data-checked='true']) {
	background-color: hsl(204, 4%, 45%);
}

.desktop-menu__select {
	position: relative;
}

.desktop-menu__select-trigger {
	all: unset;
	position: relative;
	display: flex;
	align-items: center;
	height: 24px;
	gap: var(--tl-space-2);
	justify-content: flex-end;
	cursor: pointer;
	padding-left: 2px;
	color: var(--tl-color-text-0);
}

.desktop-menu__select-trigger::after {
	content: '';
	display: block;
	position: absolute;
	background-color: var(--tl-color-muted-2);
	inset: 0px -4px;
	border-radius: 6px;
	opacity: 0;
}

.desktop-menu__select-trigger:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.desktop-menu__select-trigger[data-state='open']::after {
	opacity: 1;
}

@media (hover: hover) {
	.desktop-menu__select-trigger:not(:disabled):hover::after {
		opacity: 1;
	}
}

.desktop-menu__select-trigger:disabled {
	/* default, not not-allowed, as on the SDK's disabled buttons. */
	cursor: default;
	color: var(--tl-color-text-3);
}

.desktop-menu__select-trigger:disabled .desktop-menu__select-chevron {
	display: none;
}

.desktop-menu__select-option.tlui-button {
	width: 100%;
	justify-content: flex-start;
	gap: var(--tl-space-2);
}

/* The checkmark slot is always there, so labels share one left edge. */
.desktop-menu__select-check {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 15px;
}

.desktop-menu__tabs {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	overflow-x: auto;
	flex: 1;
	--tab-padding: var(--tl-space-4);
	--line-height: 2px;
}

.desktop-menu__tab {
	background: none;
	border: none;
	position: relative;
	cursor: pointer;
	height: 40px;
	display: flex;
	align-items: center;
	padding: var(--tab-padding);
	color: var(--tl-color-text-0);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.desktop-menu__tab::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	left: var(--tab-padding);
	right: var(--tab-padding);
	height: var(--line-height);
	z-index: 3;
	background-color: var(--tl-color-text-0);
	visibility: hidden;
}

.desktop-menu__tab:disabled {
	cursor: default;
}

.desktop-menu__tab[data-active='true'] {
	color: var(--tl-color-text-0);
	z-index: 2;
}

.desktop-menu__tab[data-active='true']::after {
	visibility: visible;
}

.desktop-menu__tab:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
	border-radius: 10px;
}

@media (hover: hover) {
	.desktop-menu__tab:not(:disabled):hover {
		color: var(--tl-color-text-0);
	}
}

.desktop-menu__tab:nth-of-type(n + 2) {
	/* Tabs after the first overlap their neighbour by half the padding. */
	margin-left: calc(var(--tab-padding) * -0.5);
}

.desktop-menu__tabs-line {
	position: absolute;
	bottom: 0px;
	left: var(--tab-padding);
	right: var(--tab-padding);
	height: var(--line-height);
	background-color: var(--tl-color-low);
}

/* An <img>, so the preview can be right-clicked, dragged, copied or saved. */
.desktop-menu__preview {
	position: relative;
	width: 216px;
	height: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--tl-color-divider);
	background-color: var(--tl-color-panel);
}

.desktop-menu__preview-image {
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	pointer-events: all;
	outline: 1px solid var(--tl-color-divider);
	box-sizing: content-box;
}

.desktop-menu__preview-size {
	position: absolute;
	bottom: 0px;
	right: 0px;
	background-color: var(--tl-color-panel);
	padding: 1px 4px;
	text-align: right;
	border-top-left-radius: 4px;
	color: var(--tl-color-text-3);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
}

.desktop-menu__button.tlui-button {
	position: relative;
	height: 32px;
	min-width: 0;
	padding: 0 12px;
	border-radius: var(--tl-radius-1);
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.desktop-menu__button .tlui-button__label {
	flex-grow: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.desktop-menu__button .tlui-button__icon {
	position: absolute;
	right: 8px;
}

@media (hover: hover) {
	.desktop-menu__button.tlui-button:not(:disabled, [data-disabled]):hover {
		background-color: var(--tla-color-primary-hover);
		color: var(--tl-color-selected-contrast);
	}
}

/* Focus plumbing, not a ring: its controls keep their own. */
.desktop-share:focus {
	outline: none;
}

.desktop-share {
	width: 240px;
	min-width: 240px;
	max-width: 240px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.5;
}

/* The SDK caps tooltips at 400px; this 240px panel's cap keeps help text attached to it. */
.tlui-tooltip {
	max-width: 240px;
}

/* The same type treatment as the label in tldraw.com's share menu. */
.desktop-share__title {
	color: var(--tl-color-text-0);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.desktop-share__help {
	display: flex;
	align-items: center;
	flex-grow: 2;
}

.desktop-share__help-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--tl-color-text-3);
	cursor: pointer;
}

.desktop-share__help-link::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 100%;
	background: var(--tl-color-muted-2);
	opacity: 0;
	z-index: 0;
}

/* Above the hover plate — the glyph is a flex item, so z-index applies without position. */
.desktop-share__help-link .tlui-icon {
	z-index: 1;
}

.desktop-share__help-link:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
	border-radius: 100%;
}

@media (hover: hover) {
	.desktop-share__help-link:hover {
		color: var(--tl-color-text-0);
	}

	.desktop-share__help-link:hover::after {
		opacity: 1;
	}
}

.desktop-share__blurb {
	margin: 0;
	color: var(--tl-color-text-3);
}

.desktop-share__blurb-link {
	color: var(--tl-color-text-1);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.desktop-share__blurb-link:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (hover: hover) {
	.desktop-share__blurb-link:hover {
		color: var(--tl-color-text-0);
	}
}

.desktop-share__error {
	margin: 0;
	color: var(--tl-color-danger);
}

/* Only networks that read the same show their address, the part someone recognises. */
.desktop-share__network.tlui-button {
	width: 100%;
	height: auto;
	min-height: 32px;
	/* .tlui-button centres its content; menu rows align left. */
	justify-content: flex-start;
	align-items: center;
	padding: 6px 8px;
	gap: 8px;
}

.desktop-share__network-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.35;
}

.desktop-share__network-name {
	color: var(--tl-color-text-1);
	font-size: 12px;
}

.desktop-share__network-address {
	color: var(--tl-color-text-3);
	font-family:
		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 11px;
}

.desktop-share__copy {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	height: 32px;
	border-radius: var(--tl-radius-1);
	background-color: var(--tl-color-primary);
}

.desktop-share__copy .tlui-button {
	height: 100%;
	min-width: 0;
	color: var(--tl-color-selected-contrast);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.desktop-share__copy-main.tlui-button {
	position: relative;
	flex: 1 1 auto;
	padding: 0 12px;
}

/* Ellipsized: Windows lets an adapter have any name, and the control never grows. */
.desktop-share__copy-main .tlui-button__label {
	flex-grow: 0;
	overflow: hidden;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.desktop-share__copy-main .tlui-button__icon {
	position: absolute;
	right: 8px;
}

.desktop-share__copy-pick.tlui-button {
	flex: 0 0 auto;
	padding: 0 6px;
	box-shadow: inset 1px 0 0 rgba(248, 248, 248, 0.28);
}

@media (hover: hover) {
	.desktop-share__copy .tlui-button:not(:disabled, [data-disabled]):hover {
		background-color: var(--tla-color-primary-hover);
		color: var(--tl-color-selected-contrast);
	}
}

.desktop-share__copy .tlui-button[data-state='open'] {
	background-color: var(--tla-color-primary-hover);
}

/* The SDK's open-menu gradient would sit over the fill; the darkened fill says it. */
.desktop-share__copy .tlui-button[data-state='open']::after {
	display: none;
}

.update__layout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

.update__layout .editor__titlebar {
	border-bottom: none;
}

.update__content {
	overflow-y: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	padding: 0 32px;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	font-size: 12px;
	text-align: center;
}

.update__headline {
	font-weight: 700;
	color: var(--tla-color-text-1);
	margin: 0;
	font-size: inherit;
	text-wrap: balance;
}

.update__detail {
	color: var(--tla-color-text-2);
	line-height: 1.6;
	margin: 0;
	text-wrap: balance;
	user-select: text;
}

.update__footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0px 24px 24px 24px;
	min-height: 53px;
	background-color: var(--tla-color-panel);
}

.error__layout {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}

.error__layout .editor__titlebar {
	border-bottom: none;
}

.error__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
}

.error__heading {
	font-size: 12px;
	color: var(--tla-color-text-1);
	margin: 0;
}

.error__message {
	font-size: 12px;
	color: var(--tla-color-text-2);
	margin: 0;
	text-align: center;
	user-select: all;
}

.error__stack {
	font-family:
		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 11px;
	line-height: 1.5;
	color: var(--tla-color-text-2);
	background-color: var(--tla-color-low);
	border: 1px solid var(--tla-color-border);
	border-radius: var(--tla-radius-2);
	padding: 16px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	margin: 0;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	user-select: all;
}

.error__actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.server__layout {
	position: absolute;
	inset: 0px;
	display: flex;
	background-color: var(--tla-color-panel);
	color: var(--tl-color-text-0);
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.server__layout .window-chrome--titlebar {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 40px;
}

.server__layout .editor__titlebar {
	border-bottom: none;
	background: none;
}

.server__main {
	flex: 1;
	overflow-y: auto;
}

/* A flex column, so the empty state centres with auto margins. */
.server__content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100%;
	max-width: 1152px;
	margin: 0px auto;
	padding: 52px 40px 64px;
}

.server__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.server__title {
	margin: 0px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	text-rendering: optimizeLegibility;
}

.server__new-board {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0px 12px;
	border-radius: 6px;
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

@media (hover: hover) {
	.server__new-board:not(:disabled):hover {
		background-color: var(--tla-color-primary-hover);
	}
}

.server__new-board:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.server__new-board:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
}

.open-in-app {
	display: flex;
	align-items: center;
	gap: 4px;
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 1;
	padding: 4px 6px;
	border-radius: 4px;
	color: var(--tla-color-text-3);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

@media (hover: hover) {
	.open-in-app:hover {
		color: var(--tl-color-text-1);
		text-decoration: underline;
	}
}

/* The desktop app runs on no phone or tablet, and their toolbar fills this corner. */
@media (pointer: coarse) {
	.open-in-app {
		display: none;
	}
}

.open-in-app__download {
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 8;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 2px 2px 10px;
	border-radius: var(--tl-radius-3);
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-2);
	font-size: 12px;
	font-weight: 500;
}

.open-in-app__download a {
	color: var(--tl-color-primary);
	text-decoration: none;
}

.open-in-app__download button {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: var(--tla-color-text-3);
	cursor: pointer;
}

@media (hover: hover) {
	.open-in-app__download a:hover {
		text-decoration: underline;
	}

	.open-in-app__download button:hover {
		color: var(--tl-color-text-1);
	}
}

.open-in-app__download :focus-visible,
.open-in-app:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
}

.server__header-title {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0px;
}

.server__header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.server__icon-button {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	color: var(--tl-color-text-1);
	cursor: pointer;
}

@media (hover: hover) {
	.server__icon-button:hover,
	.server__icon-button[aria-expanded='true'] {
		background-color: var(--tl-color-muted-0);
		color: var(--tl-color-text-0);
	}
}

.server__icon-button:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
}

.server__menu-anchor {
	position: relative;
	display: inline-flex;
}

/* Compounded to outrank the later context-menu rule's position: fixed. */
.server__context-menu.server__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	min-width: 180px;
}

.server__context-menu.server__dropdown[data-align='left'] {
	left: 0px;
}

.server__context-menu.server__dropdown[data-align='right'] {
	right: 0px;
}

.server__split-button {
	display: inline-flex;
	align-items: stretch;
}

.server__split-button .server__new-board {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.server__split-toggle {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	border-left: 1px solid var(--tla-color-primary-hover);
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
	cursor: pointer;
}

@media (hover: hover) {
	.server__split-toggle:not(:disabled):hover {
		background-color: var(--tla-color-primary-hover);
	}
}

.server__split-toggle:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.server__split-toggle:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
}

.server__split-chevron {
	transition: transform 0.12s ease;
}

.server__split-chevron[data-open='true'] {
	transform: rotate(180deg);
}

.server__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px 0px 24px;
}

.server__tabs {
	display: flex;
	gap: 16px;
}

.server__tab {
	all: unset;
	padding: 8px 0px 6px;
	border-bottom: 2px solid transparent;
	color: var(--tl-color-text-3);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

.server__tab--active {
	border-bottom-color: var(--tl-color-text-0);
	color: var(--tl-color-text-0);
}

.server__toolbar-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.server__search-field {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 200px;
	height: 30px;
	box-sizing: border-box;
	padding: 0px 6px 0px 8px;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 6px;
	color: var(--tl-color-text-3);
}

.server__search-field:focus-within {
	border-color: var(--tl-color-primary);
}

.server__search-field svg {
	flex-shrink: 0;
}

.server__search-input {
	flex: 1 1 auto;
	min-width: 0px;
	background: none;
	border: none;
	padding: 0px;
	color: var(--tl-color-text-0);
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
	outline: none;
}

.server__search-input::placeholder {
	color: var(--tl-color-text-3);
}

.server__search-clear {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	color: var(--tl-color-text-0);
	cursor: pointer;
}

.server__search-clear:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
}

.server__view-toggle {
	display: flex;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 6px;
	overflow: hidden;
}

.server__view-button {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	color: var(--tl-color-text-3);
	cursor: pointer;
}

.server__view-button[data-active='true'] {
	background-color: var(--tl-color-muted-2);
	color: var(--tl-color-text-0);
}

.server__notice {
	margin: 0px 0px 16px;
	padding: 8px 12px;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 6px;
	background-color: var(--tl-color-muted-0);
	color: var(--tl-color-text-1);
	font-size: 12px;
}

.server__empty {
	margin: auto;
	padding: 24px 0px;
	color: var(--tl-color-text-3);
	font-size: 12px;
	text-align: center;
}

.server__error {
	margin: auto;
	color: var(--tl-color-text-3);
}

/* The SDK's toast, copied rule for rule: the workspace sits outside the editor and cannot mount it. */
.server__toast-stack {
	position: fixed;
	right: 8px;
	bottom: 8px;
	/* Under the page's menus (9): a right-click near the corner must land on the menu, not the
	   toast. */
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
}
.server__update-toast {
	pointer-events: auto;
	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;
	animation: server__toast-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@media (prefers-reduced-motion: reduce) {
	.server__update-toast {
		animation: none;
	}
}
@keyframes server__toast-slide-in {
	from {
		transform: translateX(calc(100% + 8px));
	}
	to {
		transform: translateX(0px);
	}
}
.server__update-toast-main {
	flex-grow: 2;
	max-width: 280px;
	min-width: 0;
}
.server__update-toast-content {
	padding: 12px 12px 4px;
	display: flex;
	line-height: 1.4;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.server__update-toast-title {
	color: var(--tl-color-text-0);
	font-weight: 600;
}
.server__update-toast-description {
	color: var(--tl-color-text-1);
	overflow-wrap: anywhere;
}
.server__update-toast-actions {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.server__update-toast-close {
	margin-left: auto;
	flex-shrink: 0;
}
.server__update-toast-button {
	all: unset;
	position: relative;
	height: 40px;
	min-width: 40px;
	padding: 0px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tl-color-text-1);
	cursor: pointer;
	font-size: 12px;
	z-index: 0;
}
.server__update-toast-button--primary {
	color: var(--tl-color-primary);
}
.server__update-toast-button-label {
	font-size: 12px;
	flex-grow: 2;
	text-align: start;
	min-width: 0;
}
.server__update-toast-button::after {
	display: block;
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	background: var(--tl-color-muted-2);
	opacity: 0;
}
@media (hover: hover) {
	.server__update-toast-button:hover::after {
		opacity: 1;
	}
}
.server__update-toast-button:focus-visible::after {
	opacity: 1;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
}

/* The SDK input and its wrapper carry 40/44px heights; both are pinned or the box outgrows the row. */
.server__inline-rename {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0px;
	height: 100%;
}

.server__inline-rename::before {
	content: '';
	position: absolute;
	inset: 2px -4px;
	border-radius: 4px;
	border: 1px solid var(--tl-color-primary);
	pointer-events: none;
}

.server__inline-rename .tlui-input__wrapper {
	height: 100%;
}

.server__inline-rename input {
	position: relative;
	z-index: 1;
	height: auto;
	max-height: none;
	width: 100%;
	padding: 0px;
	color: var(--tl-color-text-0);
	font-size: 12px;
	font-weight: 500;
}

/* The h1's line box is pinned, so the header doesn't shift entering rename. */
.server__title-rename {
	height: 31px;
}

.server__title-rename::before {
	inset: -2px -6px;
}

.server__title-rename input {
	font-size: 24px;
	font-weight: 700;
}

/* The card's meta column has no fixed row height — pin the name line's own (12px on 1.6). */
.server__card-meta .server__inline-rename {
	height: 19px;
}

.server__card-meta .server__inline-rename::before {
	inset: -1px -5px;
}

.server__card-meta .server__inline-rename input {
	font-weight: 700;
}

.tlui-button.server__home-crumb {
	gap: 6px;
}

.server__home-crumb-label {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: inherit;
	color: var(--tla-color-text-1);
}

/* The field sits absolutely over an invisible width-setter; the span stays unclipped because the
   field draws outside it. */
.editor__document-title > span.server__title-editor {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 100%;
	min-width: 64px;
	overflow: visible;
}

/* The border lands inside the name's 12px padding, so the row doesn't shift entering rename. */
.server__title-editor::before {
	content: '';
	position: absolute;
	inset: -6px -8px;
	border-radius: var(--tl-radius-2);
	border: 1px solid var(--tl-color-primary);
	pointer-events: none;
}

.server__title-editor > div:nth-of-type(1) {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.server__title-editor input {
	position: relative;
	height: 100%;
	max-height: none;
	padding: 0px;
	color: var(--tla-color-text-1);
	font-size: 12px;
}

.server__title-width-setter {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	pointer-events: none;
}

/* auto-fill, not auto-fit: empty tracks stay, so one card can't balloon. */
.server__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.server__card {
	all: unset;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 8px;
	background-color: var(--tla-color-panel);
	cursor: pointer;
}

@media (hover: hover) {
	.server__card:hover {
		border-color: var(--tl-color-muted-2);
	}
}

/* The overlay button is the card's click target, so its focus ring wraps the card. */
.server__card-open {
	all: unset;
	position: absolute;
	inset: 0px;
	z-index: 1;
	cursor: pointer;
}

.server__card-open:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Portaled to the theme container and fixed at the pointer, so no card overflow clips it. */
.server__context-menu {
	position: fixed;
	display: flex;
	flex-direction: column;
	min-width: 160px;
	padding: 4px;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 8px;
	background-color: var(--tla-color-panel);
	/* The SDK's own menu elevation (.tlui-menu). */
	box-shadow: var(--tl-shadow-3);
	z-index: 9;
}

.server__context-menu-item {
	all: unset;
	padding: 6px 10px;
	border-radius: 4px;
	color: var(--tl-color-text-0);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

@media (hover: hover) {
	.server__context-menu-item:hover {
		background-color: var(--tl-color-muted-0);
	}
}

.server__context-menu-item:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
}

.server__context-menu-item:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.server__context-menu-item--danger {
	color: var(--tla-color-warning);
}

.server__context-menu-separator {
	height: 1px;
	margin: 4px 6px;
	background-color: var(--tl-color-low);
}

.server__card-thumbnail {
	aspect-ratio: 3 / 2;
	background-color: var(--tl-color-muted-0);
}

/* contain, not cover: the capture is content-framed, so cropping cuts shapes. */
img.server__card-thumbnail,
img.server__row-thumbnail {
	object-fit: contain;
	background-color: var(--tl-color-background);
}

.server__card-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-top: 1px solid var(--tl-color-low);
}

.server__card-meta-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0px;
	gap: 3px;
	padding: 12px 14px 14px;
}

/* Above the card's overlay so it takes the click; shown on hover, focus, or while its menu is open. */
.server__card-menu {
	all: unset;
	position: relative;
	z-index: 2;
	isolation: isolate;
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	color: var(--tl-color-text-1);
	cursor: pointer;
	opacity: 0;
}

.server__card-menu::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 6px;
	background-color: transparent;
	z-index: -1;
}

.server__card:hover .server__card-menu,
.server__card-menu:focus-visible,
.server__card-menu[aria-expanded='true'] {
	opacity: 1;
}

/* No hover on touch: the kebab must simply be there. */
@media (hover: none) {
	.server__card-menu {
		opacity: 1;
	}
}

@media (hover: hover) {
	.server__card-menu:hover::after {
		background-color: var(--tl-color-muted-0);
	}

	.server__card-menu:hover {
		color: var(--tl-color-text-0);
	}
}

.server__card-menu[aria-expanded='true']::after {
	background: linear-gradient(to right, rgb(0 0 0 / 0%), rgb(0 0 0 / 4%));
}

.server__card-menu[aria-expanded='true'] {
	color: var(--tl-color-text-0);
}

.server__card-menu:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -4px;
}

.server__card-name {
	/* Lets a long name ellipsize instead of pushing the menu out of the card. */
	flex: 1 1 auto;
	min-width: 0px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--tl-color-text-0);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Light theme uses the card mock's #A4A5A8, lighter than --tl-color-text-3; dark keeps the token. */
.server__card-time {
	color: #a4a5a8;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
}

.tla-theme__dark .server__card-time {
	color: var(--tl-color-text-3);
}

.server__card--new {
	align-items: center;
	justify-content: center;
	min-height: 268px;
}

.server__card--new:disabled {
	cursor: default;
	opacity: 0.5;
}

.server__card-plus {
	display: flex;
	color: var(--tl-color-text-3);
}

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

.server__row {
	all: unset;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 0px 8px;
	cursor: pointer;
}

.server__row::after {
	display: block;
	content: '';
	position: absolute;
	inset: 2px 0px;
	border-radius: 4px;
	background-color: var(--tl-color-muted-0);
	z-index: 0;
	pointer-events: none;
	visibility: hidden;
}

.server__row > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.server__row:hover::after {
		visibility: visible;
	}
}

.server__row:focus-visible {
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -2px;
	border-radius: 4px;
}

.server__row-thumbnail {
	width: 40px;
	height: 30px;
	flex-shrink: 0;
	border: 1px solid var(--tl-color-muted-1);
	border-radius: 4px;
	background-color: var(--tl-color-muted-0);
}

.server__row-name {
	flex: 1;
	overflow: hidden;
	font-size: 12px;
	font-weight: 500;
	color: var(--tl-color-text-0);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.server__row-meta {
	color: var(--tl-color-text-3);
	font-size: 11px;
}

.server__board-error {
	position: absolute;
	inset: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px;
	background: var(--tla-color-panel);
	color: var(--tl-color-text-0);
	font-family: var(--tla-font-ui);
	text-align: center;
}

.server__board-error span {
	max-width: 480px;
	color: var(--tl-color-text-3);
}

.server__error-back {
	all: unset;
	height: 32px;
	padding: 0px 12px;
	display: flex;
	align-items: center;
	border: 1px solid var(--tla-color-secondary-border);
	border-radius: 6px;
	background-color: var(--tla-color-secondary);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

@media (hover: hover) {
	.server__error-back:hover {
		background-color: var(--tla-color-secondary-hover);
	}
}

/* Paints its own background: for most of a load there is nothing under it. */
.board-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--tl-color-background);
}

.board-loading__spinner {
	color: var(--tl-color-text-1);
}

/* The countdown goes red near the deadline so nobody misses it. */
.server__update-toast-title[data-urgent='true'] {
	color: var(--tl-color-danger);
}

.server__board-error-actions {
	display: flex;
	gap: 8px;
}
.server__board-error-detail {
	color: var(--tl-color-danger) !important;
}
.server__error-back--primary {
	border-color: transparent;
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
}