/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


/* Default standalone editor fonts */
.product-ui .monaco-editor {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
	--monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}

.product-ui .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.product-ui .monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.product-ui .monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.product-ui .monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.product-ui .monaco-hover p {
	margin: 0;
}

/* See https://github.com/microsoft/monaco-editor/issues/2168#issuecomment-780078600 */
.product-ui .monaco-aria-container {
	position: absolute !important;
	top: 0; /* avoid being placed underneath a sibling element */
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.product-ui .monaco-editor .synthetic-focus, .product-ui .monaco-diff-editor .synthetic-focus, .product-ui .monaco-editor [tabindex="0"]:focus, .product-ui .monaco-diff-editor [tabindex="0"]:focus, .product-ui .monaco-editor [tabindex="-1"]:focus, .product-ui .monaco-diff-editor [tabindex="-1"]:focus, .product-ui .monaco-editor button:focus, .product-ui .monaco-diff-editor button:focus, .product-ui .monaco-editor input[type=button]:focus, .product-ui .monaco-diff-editor input[type=button]:focus, .product-ui .monaco-editor input[type=checkbox]:focus, .product-ui .monaco-diff-editor input[type=checkbox]:focus, .product-ui .monaco-editor input[type=search]:focus, .product-ui .monaco-diff-editor input[type=search]:focus, .product-ui .monaco-editor input[type=text]:focus, .product-ui .monaco-diff-editor input[type=text]:focus, .product-ui .monaco-editor select:focus, .product-ui .monaco-diff-editor select:focus, .product-ui .monaco-editor textarea:focus, .product-ui .monaco-diff-editor textarea:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
	opacity: 1
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-aria-container {
	position: absolute; /* try to hide from window but not from screen readers */
	left:-999em;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -------------------- IE10 remove auto clear button -------------------- */

.product-ui ::-ms-clear {
	display: none;
}

/* All widgets */
/* I am not a big fan of this rule */
.product-ui .monaco-editor .editor-widget input {
	color: inherit;
}

/* -------------------- Editor -------------------- */

.product-ui .monaco-editor {
	position: relative;
	overflow: visible;
	-webkit-text-size-adjust: 100%;
	color: var(--vscode-editor-foreground);
	background-color: var(--vscode-editor-background);
	overflow-wrap: initial;
}
.product-ui .monaco-editor-background {
	background-color: var(--vscode-editor-background);
}
.product-ui .monaco-editor .rangeHighlight {
	background-color: var(--vscode-editor-rangeHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-rangeHighlightBorder);
}
.product-ui .monaco-editor.hc-black .rangeHighlight, .product-ui .monaco-editor.hc-light .rangeHighlight {
	border-style: dotted;
}
.product-ui .monaco-editor .symbolHighlight {
	background-color: var(--vscode-editor-symbolHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-symbolHighlightBorder);
}
.product-ui .monaco-editor.hc-black .symbolHighlight, .product-ui .monaco-editor.hc-light .symbolHighlight {
	border-style: dotted;
}

.product-ui .monaco-editor .editorCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* -------------------- Misc -------------------- */

.product-ui .monaco-editor .overflow-guard {
	position: relative;
	overflow: hidden;
}

.product-ui .monaco-editor .view-overlays {
	position: absolute;
	top: 0;
}

.product-ui .monaco-editor .view-overlays > div, .product-ui .monaco-editor .margin-view-overlays > div {
	position: absolute;
	width: 100%;
}

/*
.monaco-editor .auto-closed-character {
	opacity: 0.3;
}
*/


.product-ui .monaco-editor .squiggly-error {
	border-bottom: 4px double var(--vscode-editorError-border);
}
.product-ui .monaco-editor .squiggly-error::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorError-background);
}
.product-ui .monaco-editor .squiggly-warning {
	border-bottom: 4px double var(--vscode-editorWarning-border);
}
.product-ui .monaco-editor .squiggly-warning::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorWarning-background);
}
.product-ui .monaco-editor .squiggly-info {
	border-bottom: 4px double var(--vscode-editorInfo-border);
}
.product-ui .monaco-editor .squiggly-info::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorInfo-background);
}
.product-ui .monaco-editor .squiggly-hint {
	border-bottom: 2px dotted var(--vscode-editorHint-border);
}
.product-ui .monaco-editor.showUnused .squiggly-unnecessary {
	border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border);
}
.product-ui .monaco-editor.showDeprecated .squiggly-inline-deprecated {
	text-decoration: line-through;
	text-decoration-color: var(--vscode-editor-foreground, inherit);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Arrows */
.product-ui .monaco-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.product-ui .monaco-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.product-ui .monaco-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.product-ui .monaco-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.product-ui .monaco-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.product-ui .monaco-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
.product-ui .monaco-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}
.product-ui .monaco-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.product-ui .monaco-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}

.product-ui .monaco-scrollable-element > .scrollbar {
	background: var(--vscode-scrollbar-background);
}

.product-ui .monaco-scrollable-element > .scrollbar > .slider {
	background: var(--vscode-scrollbarSlider-background);
}

.product-ui .monaco-scrollable-element > .scrollbar > .slider:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.product-ui .monaco-scrollable-element > .scrollbar > .slider.active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .blockDecorations-container {
	position: absolute;
	top: 0;
	pointer-events: none;
}

.product-ui .monaco-editor .blockDecorations-block {
	position: absolute;
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.product-ui .monaco-editor .margin-view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.product-ui .monaco-editor
	.margin-view-overlays
	.current-line.current-line-margin.current-line-margin-both {
	border-right: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cdr = core decorations rendering (div)
*/
.product-ui .monaco-editor .lines-content .cdr {
	position: absolute;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .glyph-margin {
	position: absolute;
	top: 0;
}

/*
	Keeping name short for faster parsing.
	cgmr = core glyph margin rendering (div)
*/
.product-ui .monaco-editor .glyph-margin-widgets .cgmr {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
	Ensure spinning icons are pixel-perfectly centered and avoid wobble.
	This is only applied to icons that spin to avoid unnecessary
	GPU layers and blurry subpixel AA.
*/
.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-modifier-spin::before  {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .lines-content .core-guide {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .margin-view-overlays .line-numbers {
	bottom: 0;
	font-variant-numeric: tabular-nums;
	position: absolute;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: default;
}

.product-ui .monaco-editor .relative-current-line-number {
	text-align: left;
	display: inline-block;
	width: 100%;
}

.product-ui .monaco-editor .margin-view-overlays .line-numbers.lh-odd {
	margin-top: 1px;
}

.product-ui .monaco-editor .line-numbers {
	color: var(--vscode-editorLineNumber-foreground);
}

.product-ui .monaco-editor .line-numbers.active-line-number {
	color: var(--vscode-editorLineNumber-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-mouse-cursor-text {
	cursor: text;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Uncomment to see lines flashing when they're painted */
/*.monaco-editor .view-lines > .view-line {
	background-color: none;
	animation-name: flash-background;
	animation-duration: 800ms;
}
@keyframes flash-background {
	0%   { background-color: lightgreen; }
	100% { background-color: none }
}*/

.product-ui .mtkcontrol {
	color: rgb(255, 255, 255) !important;
	background: rgb(150, 0, 0) !important;
}

.product-ui .mtkoverflow {
	background-color: var(--vscode-button-background, var(--vscode-editor-background));
	color: var(--vscode-button-foreground, var(--vscode-editor-foreground));
	border-width: 1px;
	border-style: solid;
	border-color: var(--vscode-contrastBorder);
	border-radius: 2px;
	padding: 4px;
	cursor: pointer;
}
.product-ui .mtkoverflow:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.product-ui .monaco-editor.no-user-select .lines-content,
.product-ui .monaco-editor.no-user-select .view-line,
.product-ui .monaco-editor.no-user-select .view-lines {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}
/* Use user-select: text for lookup feature on macOS */
/* https://github.com/microsoft/vscode/issues/85632 */
.product-ui .monaco-editor.mac .lines-content:hover,
.product-ui .monaco-editor.mac .view-line:hover,
.product-ui .monaco-editor.mac .view-lines:hover {
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}

.product-ui .monaco-editor.enable-user-select {
	-moz-user-select: initial;
	     user-select: initial;
	-webkit-user-select: initial;
}

.product-ui .monaco-editor .view-lines {
	white-space: nowrap;
}

.product-ui .monaco-editor .view-line {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
}

/* There are view-lines in view-zones. We have to make sure this rule does not apply to them, as they don't set a line height */
.product-ui .monaco-editor .lines-content > .view-lines > .view-line > span {
	top: 0;
	bottom: 0;
	position: absolute;
}

.product-ui .monaco-editor .mtkw {
	color: var(--vscode-editorWhitespace-foreground) !important;
}

.product-ui .monaco-editor .mtkz {
	display: inline-block;
	color: var(--vscode-editorWhitespace-foreground) !important;
}

/* TODO@tokenization bootstrap fix */
/*.monaco-editor .view-line > span > span {
	float: none;
	min-height: inherit;
	margin-left: inherit;
}*/
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .lines-decorations {
	position: absolute;
	top: 0;
	background: white;
}

/*
	Keeping name short for faster parsing.
	cldr = core lines decorations rendering (div)
*/
.product-ui .monaco-editor .margin-view-overlays .cldr {
	position: absolute;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .margin {
	background-color: var(--vscode-editorGutter-background);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cmdr = core margin decorations rendering (div)
*/
.product-ui .monaco-editor .margin-view-overlays .cmdr {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* START cover the case that slider is visible on mouseover */
.product-ui .monaco-editor .minimap.slider-mouseover .minimap-slider {
	opacity: 0;
	transition: opacity 100ms linear;
}
.product-ui .monaco-editor .minimap.slider-mouseover:hover .minimap-slider {
	opacity: 1;
}
.product-ui .monaco-editor .minimap.slider-mouseover .minimap-slider.active {
	opacity: 1;
}
/* END cover the case that slider is visible on mouseover */
.product-ui .monaco-editor .minimap-slider .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-background);
}
.product-ui .monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-hoverBackground);
}
.product-ui .monaco-editor .minimap-slider.active .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-activeBackground);
}
.product-ui .monaco-editor .minimap-shadow-visible {
	box-shadow: var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset;
}
.product-ui .monaco-editor .minimap-shadow-hidden {
	position: absolute;
	width: 0;
}
.product-ui .monaco-editor .minimap-shadow-visible {
	position: absolute;
	left: -6px;
	width: 6px;
	pointer-events: none;
}
.product-ui .monaco-editor.no-minimap-shadow .minimap-shadow-visible {
	position: absolute;
	left: -1px;
	width: 1px;
}

/* 0.5s fade in/out for the minimap */
.product-ui .minimap.minimap-autohide-mouseover,
.product-ui .minimap.minimap-autohide-scroll {
	opacity: 0;
	transition: opacity 0.5s;
}
.product-ui .minimap.minimap-autohide-scroll{
	pointer-events: none;
}
.product-ui .minimap.minimap-autohide-mouseover:hover,
.product-ui .minimap.minimap-autohide-scroll.active {
	opacity: 1;
	pointer-events: auto;
}

.product-ui .monaco-editor .minimap {
	z-index: 5;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .overlayWidgets {
	position: absolute;
	top: 0;
	left:0;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .view-ruler {
	position: absolute;
	top: 0;
	box-shadow: 1px 0 0 0 var(--vscode-editorRuler-foreground) inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .scroll-decoration {
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cslr = core selections layer rendering (div)
*/
.product-ui .monaco-editor .lines-content .cslr {
	position: absolute;
}

.product-ui .monaco-editor .focused .selected-text {
	background-color: var(--vscode-editor-selectionBackground);
}

.product-ui .monaco-editor .selected-text {
	background-color: var(--vscode-editor-inactiveSelectionBackground);
}

.product-ui .monaco-editor			.top-left-radius		{ border-top-left-radius: 3px; }
.product-ui .monaco-editor			.bottom-left-radius		{ border-bottom-left-radius: 3px; }
.product-ui .monaco-editor			.top-right-radius		{ border-top-right-radius: 3px; }
.product-ui .monaco-editor			.bottom-right-radius	{ border-bottom-right-radius: 3px; }

.product-ui .monaco-editor.hc-black .top-left-radius		{ border-top-left-radius: 0; }
.product-ui .monaco-editor.hc-black .bottom-left-radius		{ border-bottom-left-radius: 0; }
.product-ui .monaco-editor.hc-black .top-right-radius		{ border-top-right-radius: 0; }
.product-ui .monaco-editor.hc-black .bottom-right-radius	{ border-bottom-right-radius: 0; }

.product-ui .monaco-editor.hc-light .top-left-radius		{ border-top-left-radius: 0; }
.product-ui .monaco-editor.hc-light .bottom-left-radius		{ border-bottom-left-radius: 0; }
.product-ui .monaco-editor.hc-light .top-right-radius		{ border-top-right-radius: 0; }
.product-ui .monaco-editor.hc-light .bottom-right-radius	{ border-bottom-right-radius: 0; }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .cursors-layer {
	position: absolute;
	top: 0;
}

.product-ui .monaco-editor .cursors-layer > .cursor {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}

/* -- smooth-caret-animation -- */
.product-ui .monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor {
	transition: all 80ms;
}

/* -- block-outline-style -- */
.product-ui .monaco-editor .cursors-layer.cursor-block-outline-style > .cursor {
	background: transparent !important;
	border-style: solid;
	border-width: 1px;
}

/* -- underline-style -- */
.product-ui .monaco-editor .cursors-layer.cursor-underline-style > .cursor {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	background: transparent !important;
}

/* -- underline-thin-style -- */
.product-ui .monaco-editor .cursors-layer.cursor-underline-thin-style > .cursor {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	background: transparent !important;
}

@keyframes monaco-cursor-smooth {
	0%,
	20% {
		opacity: 1;
	}
	60%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-phase {
	0%,
	20% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-expand {
	0%,
	20% {
		transform: scaleY(1);
	}
	80%,
	100% {
		transform: scaleY(0);
	}
}

.product-ui .cursor-smooth {
	animation: monaco-cursor-smooth 0.5s ease-in-out 0s 20 alternate;
}

.product-ui .cursor-phase {
	animation: monaco-cursor-phase 0.5s ease-in-out 0s 20 alternate;
}

.product-ui .cursor-expand > .cursor {
	animation: monaco-cursor-expand 0.5s ease-in-out 0s 20 alternate;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .mwh {
	position: absolute;
	color: var(--vscode-editorWhitespace-foreground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .monaco-decoration-css-rule-extractor {
	visibility: hidden;
	pointer-events: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .inputarea {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}
/*.monaco-editor .inputarea {
	position: fixed !important;
	width: 800px !important;
	height: 500px !important;
	top: initial !important;
	left: initial !important;
	bottom: 0 !important;
	right: 0 !important;
	color: black !important;
	background: white !important;
	line-height: 15px !important;
	font-size: 14px !important;
	z-index: 10 !important;
}*/
.product-ui .monaco-editor .inputarea.ime-input {
	z-index: 10;
	caret-color: var(--vscode-editorCursor-foreground);
	color: var(--vscode-editor-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .native-edit-context {
	margin: 0;
	padding: 0;
	position: absolute;
	overflow-y: scroll;
	scrollbar-width: none;
	z-index: -10;
	white-space: pre-wrap;
}

.product-ui .monaco-editor .ime-text-area {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}

.product-ui .monaco-editor .edit-context-composition-none {
	background-color: transparent;
	border-bottom: none;
}

.product-ui .monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-secondary {
	border-bottom: 1px solid var(--vscode-editor-compositionBorder);
}

.product-ui .monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-primary {
	border-bottom: 2px solid var(--vscode-editor-compositionBorder);
}

.product-ui .monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-secondary {
	border: 1px solid var(--vscode-editor-compositionBorder);
}

.product-ui .monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-primary {
	border: 2px solid var(--vscode-editor-compositionBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .margin-view-overlays .gpu-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	display: inline-block;
	border-left: solid 2px var(--vscode-editorWarning-foreground);
	opacity: 0.2;
	transition: background-color 0.1s linear;
}

.product-ui .monaco-editor .margin-view-overlays .gpu-mark:hover {
	background-color: var(--vscode-editorWarning-foreground)
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.product-ui .monaco-hover.workbench-hover {
	position: relative;
	font-size: 13px;
	line-height: 19px;
	/* Must be higher than sash's z-index and terminal canvases */
	z-index: 40;
	overflow: hidden;
	max-width: 700px;
	background: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 5px;
	color: var(--vscode-editorHoverWidget-foreground);
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.product-ui .monaco-hover.workbench-hover .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 13px;
	height: 13px;
}

.product-ui .monaco-hover.workbench-hover hr {
	border-bottom: none;
}

.product-ui .monaco-hover.workbench-hover.compact {
	font-size: 12px;
}

.product-ui .monaco-hover.workbench-hover.compact .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 12px;
	height: 12px;
}

.product-ui .monaco-hover.workbench-hover.compact .hover-contents {
	padding: 2px 8px;
}

.product-ui .workbench-hover-container.locked .monaco-hover.workbench-hover {
	outline: 1px solid var(--vscode-editorHoverWidget-border);
}
.product-ui .workbench-hover-container:focus-within.locked .monaco-hover.workbench-hover {
	outline-color: var(--vscode-focusBorder);
}

.product-ui .workbench-hover-pointer {
	position: absolute;
	/* Must be higher than workbench hover z-index */
	z-index: 41;
	pointer-events: none;
}

.product-ui .workbench-hover-pointer:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--vscode-editorHoverWidget-background);
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}
.product-ui .workbench-hover-container:not(:focus-within).locked .workbench-hover-pointer:after {
	width: 4px;
	height: 4px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}
.product-ui .workbench-hover-container:focus-within .workbench-hover-pointer:after {
	border-right: 1px solid var(--vscode-focusBorder);
	border-bottom: 1px solid var(--vscode-focusBorder);
}

.product-ui .workbench-hover-pointer.left   { left: -3px; }
.product-ui .workbench-hover-pointer.right  { right: 3px; }
.product-ui .workbench-hover-pointer.top    { top: -3px; }
.product-ui .workbench-hover-pointer.bottom { bottom: 3px; }

.product-ui .workbench-hover-pointer.left:after {
	transform: rotate(135deg);
}

.product-ui .workbench-hover-pointer.right:after {
	transform: rotate(315deg);
}

.product-ui .workbench-hover-pointer.top:after {
	transform: rotate(225deg);
}

.product-ui .workbench-hover-pointer.bottom:after {
	transform: rotate(45deg);
}

.product-ui .monaco-hover.workbench-hover a {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-hover.workbench-hover a:focus {
	outline: 1px solid;
	outline-offset: -1px;
	text-decoration: underline;
	outline-color: var(--vscode-focusBorder);
}

.product-ui .monaco-hover.workbench-hover a.codicon:focus,
.product-ui .monaco-hover.workbench-hover a.monaco-button:focus {
	text-decoration: none;
}

.product-ui .monaco-hover.workbench-hover a:hover,
.product-ui .monaco-hover.workbench-hover a:active {
	color: var(--vscode-textLink-activeForeground);
}

.product-ui .monaco-hover.workbench-hover code {
	background: var(--vscode-textCodeBlock-background);
}

.product-ui .monaco-hover.workbench-hover .hover-row .actions {
	background: var(--vscode-editorHoverWidget-statusBarBackground);
}

.product-ui .monaco-hover.workbench-hover.right-aligned {
	/* The context view service wraps strangely when it's right up against the edge without this */
	left: 1px;
}

.product-ui .monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions {
	flex-direction: row-reverse;
}

.product-ui .monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions .action-container {
	margin-right: 0;
	margin-left: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-hover {
	cursor: default;
	position: absolute;
	overflow: hidden;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	box-sizing: border-box;
	line-height: 1.5em;
	white-space: var(--vscode-hover-whiteSpace, normal);
}

.product-ui .monaco-hover.fade-in {
	animation: fadein 100ms linear;
}

.product-ui .monaco-hover.hidden {
	display: none;
}

.product-ui .monaco-hover a:hover:not(.disabled) {
	cursor: pointer;
}

.product-ui .monaco-hover .hover-contents:not(.html-hover-contents) {
	padding: 4px 8px;
}

.product-ui .monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
	max-width: var(--vscode-hover-maxWidth, 500px);
	word-wrap: break-word;
}

.product-ui .monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr {
	min-width: 100%;
}

.product-ui .monaco-hover p,
.product-ui .monaco-hover .code,
.product-ui .monaco-hover ul,
.product-ui .monaco-hover h1,
.product-ui .monaco-hover h2,
.product-ui .monaco-hover h3,
.product-ui .monaco-hover h4,
.product-ui .monaco-hover h5,
.product-ui .monaco-hover h6 {
	margin: 8px 0;
}

.product-ui .monaco-hover h1,
.product-ui .monaco-hover h2,
.product-ui .monaco-hover h3,
.product-ui .monaco-hover h4,
.product-ui .monaco-hover h5,
.product-ui .monaco-hover h6 {
	line-height: 1.1;
}

.product-ui .monaco-hover code {
	font-family: var(--monaco-monospace-font);
}

.product-ui .monaco-hover hr {
	box-sizing: border-box;
	border-left: 0px;
	border-right: 0px;
	margin-top: 4px;
	margin-bottom: -4px;
	margin-left: -8px;
	margin-right: -8px;
	height: 1px;
}

.product-ui .monaco-hover p:first-child,
.product-ui .monaco-hover .code:first-child,
.product-ui .monaco-hover ul:first-child {
	margin-top: 0;
}

.product-ui .monaco-hover p:last-child,
.product-ui .monaco-hover .code:last-child,
.product-ui .monaco-hover ul:last-child {
	margin-bottom: 0;
}

/* MarkupContent Layout */
.product-ui .monaco-hover ul {
	padding-left: 20px;
}
.product-ui .monaco-hover ol {
	padding-left: 20px;
}

.product-ui .monaco-hover li > p {
	margin-bottom: 0;
}

.product-ui .monaco-hover li > ul {
	margin-top: 0;
}

.product-ui .monaco-hover code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.product-ui .monaco-hover .monaco-tokenized-source {
	white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
}

.product-ui .monaco-hover .hover-row.status-bar {
	font-size: 12px;
	line-height: 22px;
}

.product-ui .monaco-hover .hover-row.status-bar .info {
	font-style: italic;
	padding: 0px 8px;
}

.product-ui .monaco-hover .hover-row.status-bar .actions {
	display: flex;
	padding: 0px 8px;
	width: 100%;
}

.product-ui .monaco-hover .hover-row.status-bar .actions .action-container {
	margin-right: 16px;
	cursor: pointer;
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.product-ui .monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
	padding-right: 4px;
	vertical-align: middle;
}

.product-ui .monaco-hover .hover-row.status-bar .actions .action-container a {
	color: var(--vscode-textLink-foreground);
	-webkit-text-decoration: var(--text-link-decoration);
	        text-decoration: var(--text-link-decoration);
}

.product-ui .monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-hover .markdown-hover .hover-contents .codicon {
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
}

.product-ui .monaco-hover .hover-contents a.code-link:hover,
.product-ui .monaco-hover .hover-contents a.code-link {
	color: inherit;
}

.product-ui .monaco-hover .hover-contents a.code-link:before {
	content: '(';
}

.product-ui .monaco-hover .hover-contents a.code-link:after {
	content: ')';
}

.product-ui .monaco-hover .hover-contents a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-hover .hover-contents a.code-link > span:hover {
	color: var(--vscode-textLink-activeForeground);
}

/**
 * Spans in markdown hovers need a margin-bottom to avoid looking cramped:
 * https://github.com/microsoft/vscode/issues/101496

 * This was later refined to only apply when the last child of a rendered markdown block (before the
 * border or a `hr`) uses background color:
 * https://github.com/microsoft/vscode/issues/228136
 */
.product-ui .monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) p:last-child [style*="background-color"] {
	margin-bottom: 4px;
	display: inline-block;
}

/**
 * Add a slight margin to try vertically align codicons with any text
 * https://github.com/microsoft/vscode/issues/221359
 */
.product-ui .monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span.codicon {
	margin-bottom: 2px;
}

.product-ui .monaco-hover-content .action-container a {
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
}

.product-ui .monaco-hover-content .action-container.disabled {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

/* Prevent text selection in all button-like elements within hovers */
.product-ui .monaco-hover .action-container,
.product-ui .monaco-hover .action,
.product-ui .monaco-hover button,
.product-ui .monaco-hover .monaco-button,
.product-ui .monaco-hover .monaco-text-button,
.product-ui .monaco-hover [role="button"] {
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .context-view {
	position: absolute;
}

.product-ui .context-view.fixed {
	all: initial;
	font-family: inherit;
	font-size: 13px;
	position: fixed;
	color: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-select-box {
	width: 100%;
	cursor: pointer;
	border-radius: 2px;
}

.product-ui .monaco-select-box-dropdown-container {
	font-size: 13px;
	font-weight: normal;
	text-transform: none;
}

/** Actions */

.product-ui .monaco-action-bar .action-item.select-container {
	cursor: default;
}

.product-ui .monaco-action-bar .action-item .monaco-select-box {
	cursor: pointer;
	min-width: 100px;
	min-height: 18px;
	padding: 2px 23px 2px 8px;
}

.product-ui .mac .monaco-action-bar .action-item .monaco-select-box {
	font-size: 11px;
	border-radius: 3px;
	min-height: 24px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-list {
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
}

.product-ui .monaco-list.mouse-support {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

.product-ui .monaco-list > .monaco-scrollable-element {
	height: 100%;
}

.product-ui .monaco-list-rows {
	position: relative;
	width: 100%;
	height: 100%;
}

.product-ui .monaco-list.horizontal-scrolling .monaco-list-rows {
	width: auto;
	min-width: 100%;
}

.product-ui .monaco-list-row {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.product-ui .monaco-list.mouse-support .monaco-list-row {
	cursor: pointer;
	touch-action: none;
}

/* Make sure the scrollbar renders above overlays (sticky scroll) */
.product-ui .monaco-list .monaco-scrollable-element > .scrollbar.vertical,
.product-ui .monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
	z-index: 14;
}

/* for OS X ballistic scrolling */
.product-ui .monaco-list-row.scrolling {
	display: none !important;
}

/* Focus */
.product-ui .monaco-list.element-focused,
.product-ui .monaco-list.selection-single,
.product-ui .monaco-list.selection-multiple {
	outline: 0 !important;
}

/* Filter */

.product-ui .monaco-list-type-filter-message {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 40px 1em 1em 1em;
	text-align: center;
	white-space: normal;
	opacity: 0.7;
	pointer-events: none;
}

.product-ui .monaco-list-type-filter-message:empty {
	display: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-drag-image {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 12px;
	position: absolute;
	z-index: 1000;

	/* Default styles */
	background-color: var(--vscode-list-activeSelectionBackground);
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-list-focusOutline);
	outline-offset: -1px;

	/*
	 * Browsers apply an effect to the drag image when the div becomes too
	 * large which makes them unreadable. Use max width so it does not happen
	 */
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Use custom CSS vars to expose padding into parent select for padding calculation */
.product-ui .monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 1px;
	--dropdown-padding-bottom: 1px;
}

.product-ui .hc-black .monaco-select-box-dropdown-padding,
.product-ui .hc-light .monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 3px;
	--dropdown-padding-bottom: 4px;
}

.product-ui .monaco-select-box-dropdown-container {
	display: none;
	box-sizing:	border-box;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown * {
	margin: 0;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
	line-height: 15px; /** For some reason, this is needed, otherwise <code> will take up 20px height */
	font-family: var(--monaco-monospace-font);
}


.product-ui .monaco-select-box-dropdown-container.visible {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 1px;
	overflow: hidden;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	flex: 0 0 auto;
	align-self: flex-start;
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
	padding-left: 1px;
	padding-right: 1px;
	width: 100%;
	overflow: hidden;
	box-sizing:	border-box;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-details-pane {
	padding: 5px;
}

.product-ui .hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row {
	cursor: pointer;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-detail {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
	opacity: 0.7;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
	white-space: nowrap;
	float: right;
}


/* Accepted CSS hiding technique for accessibility reader text  */
/* https://webaim.org/techniques/css/invisiblecontent/ */

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
	flex: 1 1 auto;
	align-self: flex-start;
	opacity: 0;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
	overflow: hidden;
	max-height: 0px;
}

.product-ui .monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
	padding-left: 4px;
	padding-right: 8px;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-action-bar {
	white-space: nowrap;
	height: 100%;
}

.product-ui .monaco-action-bar .actions-container {
	display: flex;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	align-items: center;
}

.product-ui .monaco-action-bar.vertical .actions-container {
	display: inline-block;
}

.product-ui .monaco-action-bar .action-item {
	display: block;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
}

.product-ui .monaco-action-bar .action-item.disabled {
	cursor: default;
}

.product-ui .monaco-action-bar .action-item .icon,
.product-ui .monaco-action-bar .action-item .codicon {
	display: block;
}

.product-ui .monaco-action-bar .action-item .codicon {
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
}

.product-ui .monaco-action-bar .action-label {
	display: flex;
	font-size: 11px;
	padding: 3px;
	border-radius: 5px;
}

.product-ui .monaco-action-bar .action-item.disabled .action-label:not(.icon),
.product-ui .monaco-action-bar .action-item.disabled .action-label:not(.icon)::before,
.product-ui .monaco-action-bar .action-item.disabled .action-label:not(.icon):hover {
	color: var(--vscode-disabledForeground);
}

/* Unable to change color of SVGs, hence opacity is used */
.product-ui .monaco-action-bar .action-item.disabled .action-label.icon,
.product-ui .monaco-action-bar .action-item.disabled .action-label.icon::before,
.product-ui .monaco-action-bar .action-item.disabled .action-label.icon:hover {
	opacity: 0.6;
}

/* Vertical actions */

.product-ui .monaco-action-bar.vertical {
	text-align: left;
}

.product-ui .monaco-action-bar.vertical .action-item {
	display: block;
}

.product-ui .monaco-action-bar.vertical .action-label.separator {
	display: block;
	border-bottom: 1px solid var(--vscode-disabledForeground);
	padding-top: 1px;
	margin-left: .8em;
	margin-right: .8em;
}

.product-ui .monaco-action-bar .action-item .action-label.separator {
	width: 1px;
	height: 16px;
	margin: 5px 4px !important;
	cursor: default;
	min-width: 1px;
	padding: 0;
	background-color: var(--vscode-disabledForeground);
}

.product-ui .secondary-actions .monaco-action-bar .action-label {
	margin-left: 6px;
}

/* Action Items */
.product-ui .monaco-action-bar .action-item.select-container {
	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
	flex: 1;
	max-width: 170px;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.product-ui .monaco-action-bar .action-item.action-dropdown-item {
	display: flex;
}

.product-ui .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
	display: flex;
	align-items: center;
	cursor: default;
}

.product-ui .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
	width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-dropdown {
	height: 100%;
	padding: 0;
}

.product-ui .monaco-dropdown > .dropdown-label {
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-ui .monaco-dropdown > .dropdown-label > .action-label.disabled {
	cursor: default;
}

.product-ui .monaco-dropdown-with-primary {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.product-ui .monaco-dropdown-with-primary > .action-container > .action-label {
	margin-right: 0;
}

.product-ui .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.product-ui .monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-action-bar .action-item.menu-entry .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.product-ui .monaco-action-bar .action-item.menu-entry.text-only .action-label {
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	border-radius: 2px;
}

.product-ui .monaco-action-bar .action-item.menu-entry.text-only.use-comma:not(:last-of-type) .action-label::after {
	content: ', ';
}

.product-ui .monaco-action-bar .action-item.menu-entry.text-only + .action-item:not(.text-only) > .monaco-dropdown .action-label {
	color: var(--vscode-descriptionForeground);
}

.product-ui .monaco-dropdown-with-default {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.product-ui .monaco-dropdown-with-default > .action-container > .action-label {
	margin-right: 0;
}

.product-ui .monaco-dropdown-with-default > .action-container.menu-entry > .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.product-ui .monaco-dropdown-with-default:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.product-ui .monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.product-ui .monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .quick-input-widget {
	font-size: 13px;
}

.product-ui .quick-input-widget .monaco-highlighted-label .highlight,
.product-ui .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0066BF;
}

.product-ui .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight,
.product-ui .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: #9DDDFF;
}

.product-ui .vs-dark .quick-input-widget .monaco-highlighted-label .highlight,
.product-ui .vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0097fb;
}

.product-ui .hc-black .quick-input-widget .monaco-highlighted-label .highlight,
.product-ui .hc-black .quick-input-widget .monaco-highlighted-label .highlight {
	color: #F38518;
}

.product-ui .hc-light .quick-input-widget .monaco-highlighted-label .highlight,
.product-ui .hc-light .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0F4A85;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(221, 221, 221, 0.4);
	border: solid 1px rgba(204, 204, 204, 0.4);
	border-bottom-color: rgba(187, 187, 187, 0.4);
	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
	color: #555;
}

.product-ui .hc-black .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px rgb(111, 195, 223);
	box-shadow: none;
	color: #fff;
}

.product-ui .hc-light .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px #0F4A85;
	box-shadow: none;
	color: #292929;
}

.product-ui .vs-dark .monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(128, 128, 128, 0.17);
	border: solid 1px rgba(51, 51, 51, 0.6);
	border-bottom-color: rgba(68, 68, 68, 0.6);
	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
	color: #ccc;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-custom-toggle {
	margin-left: 2px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 1px;
	box-sizing:	border-box;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

.product-ui .monaco-custom-toggle:hover {
	background-color: var(--vscode-inputOption-hoverBackground);
}

.product-ui .hc-black .monaco-custom-toggle:hover,
.product-ui .hc-light .monaco-custom-toggle:hover {
	border: 1px dashed var(--vscode-focusBorder);
}

.product-ui .hc-black .monaco-custom-toggle,
.product-ui .hc-light .monaco-custom-toggle {
	background: none;
}

.product-ui .hc-black .monaco-custom-toggle:hover,
.product-ui .hc-light .monaco-custom-toggle:hover {
	background: none;
}

.product-ui .monaco-custom-toggle.monaco-checkbox {
	height: 18px;
	width: 18px;
	border: 1px solid transparent;
	border-radius: 3px;
	margin-right: 9px;
	margin-left: 0px;
	padding: 0px;
	opacity: 1;
	background-size: 16px !important;
}

.product-ui .monaco-action-bar .checkbox-action-item {
	display: flex;
	align-items: center;
	border-radius: 2px;
	padding-right: 2px;
}

.product-ui .monaco-action-bar .checkbox-action-item:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.product-ui .monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox {
	margin-right: 4px;
}

.product-ui .monaco-action-bar .checkbox-action-item > .checkbox-label {
	font-size: 12px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .quick-input-widget {
	position: absolute;
	width: 600px;
	z-index: 2550;
	left: 50%;
	-webkit-app-region: no-drag;
	border-radius: 6px;
}

.product-ui .quick-input-titlebar {
	cursor: grab;
	display: flex;
	align-items: center;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.product-ui .quick-input-left-action-bar {
	display: flex;
	margin-left: 4px;
	flex: 1;
}

/* give some space between input and action bar */
.product-ui .quick-input-inline-action-bar > .actions-container > .action-item:first-child {
	margin-left: 5px;
}

/* center horizontally */
.product-ui .quick-input-inline-action-bar > .actions-container > .action-item {
	margin-top: 2px;
}

.product-ui .quick-input-title {
	cursor: grab;
	padding: 3px 0px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
}

.product-ui .quick-input-right-action-bar {
	display: flex;
	margin-right: 4px;
	flex: 1;
}

.product-ui .quick-input-right-action-bar > .actions-container {
	justify-content: flex-end;
}

.product-ui .quick-input-right-action-bar > .actions-container > .action-item {
	margin-left: 4px;
}

.product-ui .quick-input-titlebar .monaco-action-bar .action-label.codicon {
	background-position: center;
	background-repeat: no-repeat;
	padding: 2px;
}

.product-ui .quick-input-description {
	margin: 6px 6px 6px 11px;
}

.product-ui .quick-input-header .quick-input-description {
	margin: 4px 2px;
	flex: 1;
}

.product-ui .quick-input-header {
	cursor: grab;
	display: flex;
	padding: 6px 6px 2px 6px;
}

.product-ui .quick-input-widget.hidden-input .quick-input-header {
	/* reduce margins and paddings when input box hidden */
	padding: 0;
	margin-bottom: 0;
}

.product-ui .quick-input-and-message {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	position: relative;
}

.product-ui .quick-input-check-all {
	align-self: center;
	margin: 0;
}

.product-ui .quick-input-widget .quick-input-header .monaco-checkbox {
	margin-top: 6px;
}

.product-ui .quick-input-filter {
	flex-grow: 1;
	display: flex;
	position: relative;
}

.product-ui .quick-input-box {
	flex-grow: 1;
}

.product-ui .quick-input-widget.show-checkboxes .quick-input-box,
.product-ui .quick-input-widget.show-checkboxes .quick-input-message {
	margin-left: 5px;
}

.product-ui .quick-input-visible-count {
	position: absolute;
	left: -10000px;
}

.product-ui .quick-input-count {
	align-self: center;
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
}

.product-ui .quick-input-count .monaco-count-badge {
	vertical-align: middle;
	padding: 2px 4px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}

.product-ui .quick-input-action {
	margin-left: 6px;
}

.product-ui .quick-input-action .monaco-text-button {
	font-size: 11px;
	padding: 0 6px;
	display: flex;
	height: 25px;
	align-items: center;
}

.product-ui .quick-input-message {
	margin-top: -1px;
	padding: 5px;
	overflow-wrap: break-word;
}

.product-ui .quick-input-message > .codicon {
	margin: 0 0.2em;
	vertical-align: text-bottom;
}

/* Links in descriptions & validations */
.product-ui .quick-input-message a {
	color: inherit;
}

.product-ui .quick-input-progress.monaco-progress-container {
	position: relative;
}

.product-ui .quick-input-list {
	line-height: 22px;
}

.product-ui .quick-input-widget.hidden-input .quick-input-list {
	margin-top: 4px;
	/* reduce margins when input box hidden */
	padding-bottom: 4px;
}

.product-ui .quick-input-list .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.product-ui .quick-input-list .monaco-scrollable-element {
	padding: 0px 6px;
}

.product-ui .quick-input-list .quick-input-list-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.product-ui .quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
	border-top-width: 1px;
	border-top-style: solid;
}

.product-ui .quick-input-list .monaco-list-row {
	border-radius: 3px;
}

.product-ui .quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border {
	border-top-style: none;
}

.product-ui .quick-input-list .quick-input-list-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.product-ui .quick-input-widget .monaco-checkbox {
	margin-right: 0;
}

.product-ui .quick-input-widget .quick-input-list .monaco-checkbox,
.product-ui .quick-input-widget .quick-input-tree .monaco-checkbox {
	margin-top: 4px;
}

.product-ui .quick-input-list .quick-input-list-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-ui .quick-input-list .quick-input-list-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.product-ui .quick-input-list .quick-input-list-rows > .quick-input-list-row {
	display: flex;
	align-items: center;
}

.product-ui .quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label,
.product-ui .quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.product-ui .quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.product-ui .quick-input-list .quick-input-list-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.product-ui .quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
	margin-right: 8px;
	/* separate from the separator label or scrollbar if any */
}

.product-ui .quick-input-list .quick-input-list-label-meta {
	opacity: 0.7;
	line-height: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* preserve list-like styling instead of tree-like styling */
.product-ui .quick-input-list .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
	font-weight: bold;
	background-color: unset;
	color: var(--vscode-list-highlightForeground) !important;
}

/* preserve list-like styling instead of tree-like styling */
.product-ui .quick-input-list .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: var(--vscode-list-focusHighlightForeground) !important;
}

.product-ui .quick-input-list .quick-input-list-entry .quick-input-list-separator {
	margin-right: 4px;
	/* separate from keybindings or actions */
}

.product-ui .quick-input-list .quick-input-list-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.product-ui .quick-input-list .quick-input-list-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.product-ui .quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.product-ui .quick-input-list .quick-input-list-entry-action-bar {
	margin-top: 1px;
	margin-right: 4px;
	/* separate from scrollbar */
}

.product-ui .quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,
.product-ui .quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label,
.product-ui .quick-input-list .quick-input-list-entry.focus-inside .quick-input-list-entry-action-bar .action-label,
.product-ui .quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label,
.product-ui .quick-input-list .monaco-list-row.passive-focused .quick-input-list-entry-action-bar .action-label {
	display: flex;
}

.product-ui .quick-input-list > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}

.product-ui .quick-input-list > .monaco-list:focus .monaco-list-row.focused .quick-input-list-entry.quick-input-list-separator-border {
	border-color: transparent;
}

/* focused items in quick pick */
.product-ui .quick-input-list .monaco-list-row.focused .monaco-keybinding-key,
.product-ui .quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
	color: inherit
}

.product-ui .quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
	background: none;
}

.product-ui .quick-input-list .quick-input-list-separator-as-item {
	padding: 4px 6px;
	font-size: 12px;
}

/* Quick input separators as full-row item */
.product-ui .quick-input-list .quick-input-list-separator-as-item .label-name {
	font-weight: 600;
}

.product-ui .quick-input-list .quick-input-list-separator-as-item .label-description {
	/* Override default description opacity so we don't have a contrast ratio issue. */
	opacity: 1 !important;
}

/* Hide border when the item becomes the sticky one */
.product-ui .quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border {
	border-top-style: none;
}

/* Give sticky row the same padding as the scrollable list */
.product-ui .quick-input-list .monaco-tree-sticky-row {
	padding: 0 5px;
}

/* Hide the twistie containers so that there isn't blank indent */
.product-ui .quick-input-list .monaco-tl-twistie {
	display: none !important;
}

/* Tree */

.product-ui .quick-input-tree .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.product-ui .quick-input-tree .quick-input-tree-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.product-ui .quick-input-tree .quick-input-tree-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.product-ui .quick-input-tree .quick-input-tree-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-ui .quick-input-tree .quick-input-tree-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.product-ui .quick-input-tree .quick-input-tree-rows > .quick-input-tree-row {
	display: flex;
	align-items: center;
}

.product-ui .quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label,
.product-ui .quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.product-ui .quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.product-ui .quick-input-tree .quick-input-tree-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.product-ui .quick-input-tree .quick-input-tree-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.product-ui .quick-input-tree .quick-input-tree-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.product-ui .quick-input-tree .quick-input-tree-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.product-ui .quick-input-tree .quick-input-tree-entry-action-bar {
	margin-top: 1px;
	margin-right: 4px;
	/* separate from scrollbar */
}

.product-ui .quick-input-tree .quick-input-tree-entry .quick-input-tree-entry-action-bar .action-label.always-visible,
.product-ui .quick-input-tree .quick-input-tree-entry:hover .quick-input-tree-entry-action-bar .action-label,
.product-ui .quick-input-tree .quick-input-tree-entry.focus-inside .quick-input-tree-entry-action-bar .action-label,
.product-ui .quick-input-tree .monaco-list-row.focused .quick-input-tree-entry-action-bar .action-label,
.product-ui .quick-input-tree .monaco-list-row.passive-focused .quick-input-tree-entry-action-bar .action-label {
	display: flex;
}

.product-ui .quick-input-tree > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-text-button {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	padding: 4px;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--vscode-button-border, transparent);
	line-height: 18px;
}

.product-ui .monaco-text-button:focus {
	outline-offset: 2px !important;
}

.product-ui .monaco-text-button:hover {
	text-decoration: none !important;
}

.product-ui .monaco-button.disabled:focus,
.product-ui .monaco-button.disabled {
	opacity: 0.4 !important;
	cursor: default;
}

.product-ui .monaco-text-button .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

.product-ui .monaco-text-button.monaco-text-button-with-short-label {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 4px;
	overflow: hidden;
	height: 28px;
}

.product-ui .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
	flex-basis: 100%;
}

.product-ui .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	flex-grow: 1;
	width: 0;
	overflow: hidden;
}

.product-ui .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
.product-ui .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: normal;
	font-style: inherit;
	padding: 4px 0;
}

.product-ui .monaco-button-dropdown {
	display: flex;
	cursor: pointer;
}

.product-ui .monaco-button-dropdown.disabled {
	cursor: default;
}

.product-ui .monaco-button-dropdown > .monaco-button:focus {
	outline-offset: -1px !important;
}

.product-ui .monaco-button-dropdown.disabled > .monaco-button.disabled,
.product-ui .monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
.product-ui .monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
	opacity: 0.4 !important;
}

.product-ui .monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-right-width: 0 !important;
}

.product-ui .monaco-button-dropdown .monaco-button-dropdown-separator {
	padding: 4px 0;
	cursor: default;
}

.product-ui .monaco-button-dropdown .monaco-button-dropdown-separator > div {
	height: 100%;
	width: 1px;
}

.product-ui .monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
	border: 1px solid var(--vscode-button-border, transparent);
	border-left-width: 0 !important;
	border-radius: 0 2px 2px 0;
	display: flex;
	align-items: center;
}

.product-ui .monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-radius: 2px 0 0 2px;
}

.product-ui .monaco-description-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 5px; /* allows button focus outline to be visible */
}

.product-ui .monaco-description-button .monaco-button-description {
	font-style: italic;
	font-size: 11px;
	padding: 4px 20px;
}

.product-ui .monaco-description-button .monaco-button-label,
.product-ui .monaco-description-button .monaco-button-description {
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-ui .monaco-description-button .monaco-button-label > .codicon,
.product-ui .monaco-description-button .monaco-button-description > .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

/* default color styles - based on CSS variables */

.product-ui .monaco-button.default-colors,
.product-ui .monaco-button-dropdown.default-colors > .monaco-button{
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
}

.product-ui .monaco-button.default-colors:hover,
.product-ui .monaco-button-dropdown.default-colors > .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.product-ui .monaco-button.default-colors.secondary,
.product-ui .monaco-button-dropdown.default-colors > .monaco-button.secondary {
	color: var(--vscode-button-secondaryForeground);
	background-color: var(--vscode-button-secondaryBackground);
}

.product-ui .monaco-button.default-colors.secondary:hover,
.product-ui .monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
	background-color: var(--vscode-button-secondaryHoverBackground);
}

.product-ui .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-background);
	border-top: 1px solid var(--vscode-button-border);
	border-bottom: 1px solid var(--vscode-button-border);
}

.product-ui .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-secondaryBackground);
}

.product-ui .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
	background-color: var(--vscode-button-separator);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-count-badge {
	padding: 3px 5px;
	border-radius: 11px;
	font-size: 11px;
	min-width: 18px;
	min-height: 18px;
	line-height: 11px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
}

.product-ui .monaco-count-badge.long {
	padding: 2px 3px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-progress-container {
	width: 100%;
	height: 2px;
	overflow: hidden; /* keep progress bit in bounds */
}

.product-ui .monaco-progress-container .progress-bit {
	width: 2%;
	height: 2px;
	position: absolute;
	left: 0;
	display: none;
}

.product-ui .monaco-progress-container.active .progress-bit {
	display: inherit;
}

.product-ui .monaco-progress-container.discrete .progress-bit {
	left: 0;
	transition: width 100ms linear;
}

.product-ui .monaco-progress-container.discrete.done .progress-bit {
	width: 100%;
}

.product-ui .monaco-progress-container.infinite .progress-bit {
	animation-name: progress;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
}

.product-ui .monaco-progress-container.infinite.infinite-long-running .progress-bit {
	/*
		The more smooth `linear` timing function can cause
		higher GPU consumption as indicated in
		https://github.com/microsoft/vscode/issues/97900 &
		https://github.com/microsoft/vscode/issues/138396
	*/
	animation-timing-function: steps(100);
}

/**
 * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
 * that container. Since translateX is relative to the progress bit size, we have to multiple it with
 * its relative size to the parent container:
 * parent width: 5000%
 *    bit width: 100%
 * translateX should be as follow:
 *  50%: 5000% * 50% - 50% (set to center) = 2450%
 * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
 */
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-inputbox {
	position: relative;
	display: block;
	padding: 0;
	box-sizing:	border-box;
	border-radius: 2px;

	/* Customizable */
	font-size: inherit;
}

.product-ui .monaco-inputbox > .ibwrapper > .input,
.product-ui .monaco-inputbox > .ibwrapper > .mirror {

	/* Customizable */
	padding: 4px 6px;
}

.product-ui .monaco-inputbox > .ibwrapper {
	position: relative;
	width: 100%;
}

.product-ui .monaco-inputbox > .ibwrapper > .input {
	display: inline-block;
	box-sizing:	border-box;
	width: 100%;
	height: 100%;
	line-height: inherit;
	border: none;
	font-family: inherit;
	font-size: inherit;
	resize: none;
	color: inherit;
}

.product-ui .monaco-inputbox > .ibwrapper > input {
	text-overflow: ellipsis;
}

.product-ui .monaco-inputbox > .ibwrapper > textarea.input {
	display: block;
	scrollbar-width: none; /* Firefox: hide scrollbars */
	outline: none;
}

.product-ui .monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
	display: none; /* Chrome + Safari: hide scrollbar */
}

.product-ui .monaco-inputbox > .ibwrapper > textarea.input.empty {
	white-space: nowrap;
}

.product-ui .monaco-inputbox > .ibwrapper > .mirror {
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	white-space: pre-wrap;
	visibility: hidden;
	word-wrap: break-word;
}

/* Context view */

.product-ui .monaco-inputbox-container {
	text-align: right;
}

.product-ui .monaco-inputbox-container .monaco-inputbox-message {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	width: 100%;
	box-sizing:	border-box;
	padding: 0.4em;
	font-size: 12px;
	line-height: 17px;
	margin-top: -1px;
	word-wrap: break-word;
}

/* Action bar support */
.product-ui .monaco-inputbox .monaco-action-bar {
	position: absolute;
	right: 2px;
	top: 4px;
}

.product-ui .monaco-inputbox .monaco-action-bar .action-item {
	margin-left: 2px;
}

.product-ui .monaco-inputbox .monaco-action-bar .action-item .codicon {
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
/* ---------- Find input ---------- */

.product-ui .monaco-findInput {
	position: relative;
}

.product-ui .monaco-findInput .monaco-inputbox {
	font-size: 13px;
	width: 100%;
}

.product-ui .monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

.product-ui .vs .monaco-findInput.disabled {
	background-color: #E1E1E1;
}

/* Theming */
.product-ui .vs-dark .monaco-findInput.disabled {
	background-color: #333;
}

/* Highlighting */
.product-ui .monaco-findInput.highlight-0 .controls,
.product-ui .hc-light .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-0 100ms linear 0s;
}

.product-ui .monaco-findInput.highlight-1 .controls,
.product-ui .hc-light .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-1 100ms linear 0s;
}

.product-ui .hc-black .monaco-findInput.highlight-0 .controls,
.product-ui .vs-dark  .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
}

.product-ui .hc-black .monaco-findInput.highlight-1 .controls,
.product-ui .vs-dark  .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
}

@keyframes monaco-findInput-highlight-0 {
	0% { background: rgba(253, 255, 0, 0.8); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-1 {
	0% { background: rgba(253, 255, 0, 0.8); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}

@keyframes monaco-findInput-highlight-dark-0 {
	0% { background: rgba(255, 255, 255, 0.44); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-dark-1 {
	0% { background: rgba(255, 255, 255, 0.44); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* ---------- Icon label ---------- */

.product-ui .monaco-icon-label {
	display: flex; /* required for icons support :before rule */
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-ui .monaco-icon-label::before {

	/* svg icons rendered as background image */
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	line-height: inherit !important;
	display: inline-block;

	/* fonts icons */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: top;

	flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
}

.product-ui .monaco-icon-label-iconpath {
	width: 16px;
	height: 22px;
	margin-right: 6px;
	display: flex;
}

.product-ui .monaco-icon-label-container.disabled {
	color: var(--vscode-disabledForeground);
}
.product-ui .monaco-icon-label > .monaco-icon-label-container {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.product-ui .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
	color: inherit;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.product-ui .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
	margin: 0 2px;
	opacity: 0.5;
}

.product-ui .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
	opacity: .7;
	white-space: pre;
}

.product-ui .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .7;
	margin-left: 0.5em;
	font-size: 0.9em;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.product-ui .monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
	white-space: nowrap
}

.product-ui .vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .95;
}

.product-ui .monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.product-ui .monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-weight: bold;
}

.product-ui .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.product-ui .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-style: italic;
}

.product-ui .monaco-icon-label.deprecated {
	text-decoration: line-through;
	opacity: 0.66;
}

.product-ui .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.product-ui .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	text-decoration: line-through;
}

.product-ui .monaco-icon-label::after {
	opacity: 0.75;
	font-size: 90%;
	font-weight: 600;
	margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
	text-align: center;
}

/* make sure selection color wins when a label is being selected */
.product-ui .monaco-list:focus .selected .monaco-icon-label, 
.product-ui .monaco-list:focus .selected .monaco-icon-label::after
{
	color: inherit !important;
}

.product-ui .monaco-list-row.focused.selected .label-description,
.product-ui .monaco-list-row.selected .label-description {
	opacity: .8;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-keybinding {
	display: flex;
	align-items: center;
	line-height: 10px;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key {
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 11px;
	padding: 3px 5px;
	margin: 0 2px;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key:first-child {
	margin-left: 0;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key:last-child {
	margin-right: 0;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key-separator {
	display: inline-block;
}

.product-ui .monaco-keybinding > .monaco-keybinding-key-chord-separator {
	width: 6px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-tl-row {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

.product-ui .monaco-tl-row.disabled {
	cursor: default;
}
.product-ui .monaco-tl-indent {
	height: 100%;
	position: absolute;
	top: 0;
	left: 16px;
	pointer-events: none;
}

.product-ui .hide-arrows .monaco-tl-indent {
	left: 12px;
}

.product-ui .monaco-tl-indent > .indent-guide {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	border-left: 1px solid transparent;
	opacity: 0;
}

.product-ui .monaco-enable-motion .monaco-tl-indent > .indent-guide {
	transition: opacity 0.1s linear;
}

.product-ui .monaco-tl-twistie,
.product-ui .monaco-tl-contents {
	height: 100%;
}

.product-ui .monaco-tl-twistie {
	font-size: 10px;
	text-align: right;
	padding-right: 6px;
	flex-shrink: 0;
	width: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transform: translateX(3px);
}

.product-ui .monaco-tl-contents {
	flex: 1;
	overflow: hidden;
}

.product-ui .monaco-tl-twistie::before {
	border-radius: 20px;
}

.product-ui .monaco-tl-twistie.collapsed::before {
	transform: rotate(-90deg);
}

.product-ui .monaco-tl-twistie.codicon-tree-item-loading::before {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.25s steps(30) infinite;
}

.product-ui .monaco-tree-type-filter {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	padding: 3px;
	max-width: 200px;
	z-index: 100;
	margin: 0 10px 0 6px;
	border: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.product-ui .monaco-enable-motion .monaco-tree-type-filter {
	transition: top 0.3s;
}

.product-ui .monaco-tree-type-filter.disabled {
	top: -40px !important;
}

.product-ui .monaco-tree-type-filter-input {
	flex: 1;
}

.product-ui .monaco-tree-type-filter-input .monaco-inputbox {
	height: 23px;
}

.product-ui .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
.product-ui .monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
	padding: 2px 4px;
}

.product-ui .monaco-tree-type-filter-input .monaco-findInput > .controls {
	top: 2px;
}

.product-ui .monaco-tree-type-filter-actionbar {
	margin-left: 4px;
}

.product-ui .monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
	padding: 2px;
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 13; /* Settings editor uses z-index: 12 */

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
	position: absolute;
	width: 100%;
	opacity: 1 !important; /* Settings editor uses opacity < 1 */
	overflow: hidden;

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
	background-color: var(--vscode-list-hoverBackground) !important;
	cursor: pointer;
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
	display: none;
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow {
	position: absolute;
	bottom: -3px;
	left: 0px;
	height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */
	width: 100%;
}

.product-ui .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
	outline: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui {
	--vscode-sash-size: 4px;
	--vscode-sash-hover-size: 4px;
}

.product-ui .monaco-sash {
	position: absolute;
	z-index: 35;
	touch-action: none;
}

.product-ui .monaco-sash.disabled {
	pointer-events: none;
}

.product-ui .monaco-sash.mac.vertical {
	cursor: col-resize;
}

.product-ui .monaco-sash.vertical.minimum {
	cursor: e-resize;
}

.product-ui .monaco-sash.vertical.maximum {
	cursor: w-resize;
}

.product-ui .monaco-sash.mac.horizontal {
	cursor: row-resize;
}

.product-ui .monaco-sash.horizontal.minimum {
	cursor: s-resize;
}

.product-ui .monaco-sash.horizontal.maximum {
	cursor: n-resize;
}

.product-ui .monaco-sash.disabled {
	cursor: default !important;
	pointer-events: none !important;
}

.product-ui .monaco-sash.vertical {
	cursor: ew-resize;
	top: 0;
	width: var(--vscode-sash-size);
	height: 100%;
}

.product-ui .monaco-sash.horizontal {
	cursor: ns-resize;
	left: 0;
	width: 100%;
	height: var(--vscode-sash-size);
}

.product-ui .monaco-sash:not(.disabled) > .orthogonal-drag-handle {
	content: " ";
	height: calc(var(--vscode-sash-size) * 2);
	width: calc(var(--vscode-sash-size) * 2);
	z-index: 100;
	display: block;
	cursor: all-scroll;
	position: absolute;
}

.product-ui .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.start,
.product-ui .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.end {
	cursor: nwse-resize;
}

.product-ui .monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.end,
.product-ui .monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.start {
	cursor: nesw-resize;
}

.product-ui .monaco-sash.vertical > .orthogonal-drag-handle.start {
	left: calc(var(--vscode-sash-size) * -0.5);
	top: calc(var(--vscode-sash-size) * -1);
}
.product-ui .monaco-sash.vertical > .orthogonal-drag-handle.end {
	left: calc(var(--vscode-sash-size) * -0.5);
	bottom: calc(var(--vscode-sash-size) * -1);
}
.product-ui .monaco-sash.horizontal > .orthogonal-drag-handle.start {
	top: calc(var(--vscode-sash-size) * -0.5);
	left: calc(var(--vscode-sash-size) * -1);
}
.product-ui .monaco-sash.horizontal > .orthogonal-drag-handle.end {
	top: calc(var(--vscode-sash-size) * -0.5);
	right: calc(var(--vscode-sash-size) * -1);
}

.product-ui .monaco-sash:before {
	content: '';
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

.product-ui .monaco-enable-motion .monaco-sash:before {
	transition: background-color 0.1s ease-out;
}

.product-ui .monaco-sash.hover:before,
.product-ui .monaco-sash.active:before {
	background: var(--vscode-sash-hoverBorder);
}

.product-ui .monaco-sash.vertical:before {
	width: var(--vscode-sash-hover-size);
	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.product-ui .monaco-sash.horizontal:before {
	height: var(--vscode-sash-hover-size);
	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.product-ui .pointer-events-disabled {
	pointer-events: none !important;
}

/** Debug **/

.product-ui .monaco-sash.debug {
	background: cyan;
}

.product-ui .monaco-sash.debug.disabled {
	background: rgba(0, 255, 255, 0.2);
}

.product-ui .monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
	background: red;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-split-view2 {
	position: relative;
	width: 100%;
	height: 100%;
}

.product-ui .monaco-split-view2 > .sash-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.product-ui .monaco-split-view2 > .sash-container > .monaco-sash {
	pointer-events: initial;
}

.product-ui .monaco-split-view2 > .monaco-scrollable-element {
	width: 100%;
	height: 100%;
}

.product-ui .monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
	width: 100%;
	height: 100%;
	white-space: nowrap;
	position: relative;
}

.product-ui .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
	white-space: initial;
	position: absolute;
}

.product-ui .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
	display: none;
}

.product-ui .monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
	width: 100%;
}

.product-ui .monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
	height: 100%;
}

.product-ui .monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	pointer-events: none;
	background-color: var(--separator-border);
}

.product-ui .monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 100%;
	width: 1px;
}

.product-ui .monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 1px;
	width: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-table {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.product-ui .monaco-table > .monaco-split-view2 {
	border-bottom: 1px solid transparent;
}

.product-ui .monaco-table > .monaco-list {
	flex: 1;
}

.product-ui .monaco-table-tr {
	display: flex;
	height: 100%;
}

.product-ui .monaco-table-th {
	width: 100%;
	height: 100%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-ui .monaco-table-th,
.product-ui .monaco-table-td {
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.product-ui .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	content: "";
	position: absolute;
	left: calc(var(--vscode-sash-size) / 2);
	width: 0;
	border-left: 1px solid transparent;
}

.product-ui .monaco-enable-motion .monaco-table > .monaco-split-view2,
.product-ui .monaco-enable-motion .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	transition: border-color 0.2s ease-out;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-diff-editor .diff-review {
	position: absolute;

}

.product-ui .monaco-component.diff-review {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	z-index: 99;


	.product-ui .diff-review-line-number {
		text-align: right;
		display: inline-block;
		color: var(--vscode-editorLineNumber-foreground);
	}

	.product-ui .diff-review-summary {
		padding-left: 10px;
	}

	.product-ui .diff-review-shadow {
		position: absolute;
		box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;
	}

	.product-ui .diff-review-row {
		white-space: pre;
	}

	.product-ui .diff-review-table {
		display: table;
		min-width: 100%;
	}

	.product-ui .diff-review-row {
		display: table-row;
		width: 100%;
	}

	.product-ui .diff-review-spacer {
		display: inline-block;
		width: 10px;
		vertical-align: middle;
	}

	.product-ui .diff-review-spacer > .codicon {
		font-size: 9px !important;
	}

	.product-ui .diff-review-actions {
		display: inline-block;
		position: absolute;
		right: 10px;
		top: 2px;
		z-index: 100;
	}

	.product-ui .diff-review-actions .action-label {
		width: 16px;
		height: 16px;
		margin: 2px 0;
	}

	.product-ui .revertButton {
		cursor: pointer;
	}

	.product-ui .action-label {
		background: var(--vscode-editorActionList-background);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-toolbar {
	height: 100%;
}

.product-ui .monaco-toolbar .toolbar-toggle-more {
	display: inline-block;
	padding: 0;
}

.product-ui .monaco-toolbar.responsive {
	.product-ui .monaco-action-bar > .actions-container > .action-item {
		flex-shrink: 1;
		min-width: 20px;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .diff-hidden-lines-widget {
	width: 100%;
}

.product-ui .monaco-editor .diff-hidden-lines {
	height: 0px; /* The children each have a fixed height, the transform confuses the browser */
	transform: translate(0px, -10px);
	font-size: 13px;
	line-height: 14px;
}

.product-ui .monaco-editor .diff-hidden-lines:not(.dragging) .top:hover,
.product-ui .monaco-editor .diff-hidden-lines:not(.dragging) .bottom:hover,
.product-ui .monaco-editor .diff-hidden-lines .top.dragging,
.product-ui .monaco-editor .diff-hidden-lines .bottom.dragging {
	background-color: var(--vscode-focusBorder);
}

.product-ui .monaco-editor .diff-hidden-lines .top,
.product-ui .monaco-editor .diff-hidden-lines .bottom {
	transition: background-color 0.1s ease-out;
	height: 4px;
	background-color: transparent;
	background-clip: padding-box;
	border-bottom: 2px solid transparent;
	border-top: 4px solid transparent;
	/*cursor: n-resize;*/
}

.product-ui .monaco-editor.draggingUnchangedRegion.canMoveTop:not(.canMoveBottom) *,
.product-ui .monaco-editor .diff-hidden-lines .top.canMoveTop:not(.canMoveBottom),
.product-ui .monaco-editor .diff-hidden-lines .bottom.canMoveTop:not(.canMoveBottom) {
	cursor: n-resize !important;
}

.product-ui .monaco-editor.draggingUnchangedRegion:not(.canMoveTop).canMoveBottom *,
.product-ui .monaco-editor .diff-hidden-lines .top:not(.canMoveTop).canMoveBottom,
.product-ui .monaco-editor .diff-hidden-lines .bottom:not(.canMoveTop).canMoveBottom {
	cursor: s-resize !important;
}

.product-ui .monaco-editor.draggingUnchangedRegion.canMoveTop.canMoveBottom *,
.product-ui .monaco-editor .diff-hidden-lines .top.canMoveTop.canMoveBottom,
.product-ui .monaco-editor .diff-hidden-lines .bottom.canMoveTop.canMoveBottom {
	cursor: ns-resize !important;
}

.product-ui .monaco-editor .diff-hidden-lines .top {
	transform: translate(0px, 4px);
}

.product-ui .monaco-editor .diff-hidden-lines .bottom {
	transform: translate(0px, -6px);
}

.product-ui .monaco-editor .diff-unchanged-lines {
	background: var(--vscode-diffEditor-unchangedCodeBackground);
}

.product-ui .monaco-editor .noModificationsOverlay {
	z-index: 1;
	background: var(--vscode-editor-background);

	display: flex;
	justify-content: center;
	align-items: center;
}


.product-ui .monaco-editor .diff-hidden-lines .center {
	background: var(--vscode-diffEditor-unchangedRegionBackground);
	color: var(--vscode-diffEditor-unchangedRegionForeground);
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;

	height: 24px;
	box-shadow: inset 0 -5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow), inset 0 5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow);
}

.product-ui .monaco-editor .diff-hidden-lines .center span.codicon {
	vertical-align: middle;
}

.product-ui .monaco-editor .diff-hidden-lines .center a:hover .codicon {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.product-ui .monaco-editor .diff-hidden-lines div.breadcrumb-item {
	cursor: pointer;
}

.product-ui .monaco-editor .diff-hidden-lines div.breadcrumb-item:hover {
	color: var(--vscode-editorLink-activeForeground);
}

.product-ui .monaco-editor .movedOriginal {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.product-ui .monaco-editor .movedModified {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.product-ui .monaco-editor .movedOriginal.currentMove, .product-ui .monaco-editor .movedModified.currentMove {
	border: 2px solid var(--vscode-diffEditor-moveActive-border);
}

.product-ui .monaco-diff-editor .moved-blocks-lines path.currentMove {
	stroke: var(--vscode-diffEditor-moveActive-border);
}

.product-ui .monaco-diff-editor .moved-blocks-lines path {
	pointer-events: visiblestroke;
}

.product-ui .monaco-diff-editor .moved-blocks-lines .arrow {
	fill: var(--vscode-diffEditor-move-border);
}

.product-ui .monaco-diff-editor .moved-blocks-lines .arrow.currentMove {
	fill: var(--vscode-diffEditor-moveActive-border);
}

.product-ui .monaco-diff-editor .moved-blocks-lines .arrow-rectangle {
	fill: var(--vscode-editor-background);
}

.product-ui .monaco-diff-editor .moved-blocks-lines {
	position: absolute;
	pointer-events: none;
}

.product-ui .monaco-diff-editor .moved-blocks-lines path {
	fill: none;
	stroke: var(--vscode-diffEditor-move-border);
	stroke-width: 2;
}

.product-ui .monaco-editor .char-delete.diff-range-empty {
	margin-left: -1px;
	border-left: solid var(--vscode-diffEditor-removedTextBackground) 3px;
}

.product-ui .monaco-editor .char-insert.diff-range-empty {
	border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px;
}

.product-ui .monaco-editor .fold-unchanged {
	cursor: pointer;
}

.product-ui .monaco-diff-editor .diff-moved-code-block {
	display: flex;
	justify-content: flex-end;
	margin-top: -4px;
}

.product-ui .monaco-diff-editor .diff-moved-code-block .action-bar .action-label.codicon {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

/* ---------- DiffEditor ---------- */

.product-ui .monaco-diff-editor .diffOverview {
	z-index: 9;
}

.product-ui .monaco-diff-editor .diffOverview .diffViewport {
	z-index: 10;
}

/* colors not externalized: using transparancy on background */
.product-ui .monaco-diff-editor.vs			.diffOverview { background: rgba(0, 0, 0, 0.03); }
.product-ui .monaco-diff-editor.vs-dark		.diffOverview { background: rgba(255, 255, 255, 0.01); }

.product-ui .monaco-scrollable-element.modified-in-monaco-diff-editor.vs		.scrollbar { background: rgba(0,0,0,0); }
.product-ui .monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark	.scrollbar { background: rgba(0,0,0,0); }
.product-ui .monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black	.scrollbar { background: none; }
.product-ui .monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light	.scrollbar { background: none; }

.product-ui .monaco-scrollable-element.modified-in-monaco-diff-editor .slider {
	z-index: 10;
}
.product-ui .modified-in-monaco-diff-editor				.slider.active { background: rgba(171, 171, 171, .4); }
.product-ui .modified-in-monaco-diff-editor.hc-black	.slider.active { background: none; }
.product-ui .modified-in-monaco-diff-editor.hc-light	.slider.active { background: none; }

/* ---------- Diff ---------- */

.product-ui .monaco-editor .insert-sign,
.product-ui .monaco-diff-editor .insert-sign,
.product-ui .monaco-editor .delete-sign,
.product-ui .monaco-diff-editor .delete-sign {
	font-size: 11px !important;
	opacity: 0.7 !important;
	display: flex !important;
	align-items: center;
}
.product-ui .monaco-editor.hc-black .insert-sign,
.product-ui .monaco-diff-editor.hc-black .insert-sign,
.product-ui .monaco-editor.hc-black .delete-sign,
.product-ui .monaco-diff-editor.hc-black .delete-sign,
.product-ui .monaco-editor.hc-light .insert-sign,
.product-ui .monaco-diff-editor.hc-light .insert-sign,
.product-ui .monaco-editor.hc-light .delete-sign,
.product-ui .monaco-diff-editor.hc-light .delete-sign {
	opacity: 1;
}

.product-ui .monaco-editor .inline-deleted-margin-view-zone {
	text-align: right;
}
.product-ui .monaco-editor .inline-added-margin-view-zone {
	text-align: right;
}

.product-ui .monaco-editor .arrow-revert-change {
	z-index: 10;
	position: absolute;
}

.product-ui .monaco-editor .arrow-revert-change:hover {
	cursor: pointer;
}

/* ---------- Inline Diff ---------- */

.product-ui .monaco-editor .view-zones .view-lines .view-line span {
	display: inline-block;
}

.product-ui .monaco-editor .margin-view-zones .lightbulb-glyph:hover {
	cursor: pointer;
}

.product-ui .monaco-editor .char-insert, .product-ui .monaco-diff-editor .char-insert {
	background-color: var(--vscode-diffEditor-insertedTextBackground);
}

.product-ui .monaco-editor .line-insert, .product-ui .monaco-diff-editor .line-insert {
	background-color: var(--vscode-diffEditor-insertedLineBackground, var(--vscode-diffEditor-insertedTextBackground));
}

.product-ui .monaco-editor .line-insert,
.product-ui .monaco-editor .char-insert {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-insertedTextBorder);
}
.product-ui .monaco-editor.hc-black .line-insert, .product-ui .monaco-editor.hc-light .line-insert, .product-ui .monaco-editor.hc-black .char-insert, .product-ui .monaco-editor.hc-light .char-insert {
	border-style: dashed;
}

.product-ui .monaco-editor .line-delete,
.product-ui .monaco-editor .char-delete {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-removedTextBorder);
}
.product-ui .monaco-editor.hc-black .line-delete, .product-ui .monaco-editor.hc-light .line-delete, .product-ui .monaco-editor.hc-black .char-delete, .product-ui .monaco-editor.hc-light .char-delete {
	border-style: dashed;
}

.product-ui .monaco-editor .inline-added-margin-view-zone,
.product-ui .monaco-editor .gutter-insert,
.product-ui .monaco-diff-editor .gutter-insert {
	background-color: var(--vscode-diffEditorGutter-insertedLineBackground, var(--vscode-diffEditor-insertedLineBackground), var(--vscode-diffEditor-insertedTextBackground));
}

.product-ui .monaco-editor .char-delete, .product-ui .monaco-diff-editor .char-delete, .product-ui .monaco-editor .inline-deleted-text {
	background-color: var(--vscode-diffEditor-removedTextBackground);
}

.product-ui .monaco-editor .inline-deleted-text {
	text-decoration: line-through;
}

.product-ui .monaco-editor .line-delete, .product-ui .monaco-diff-editor .line-delete {
	background-color: var(--vscode-diffEditor-removedLineBackground, var(--vscode-diffEditor-removedTextBackground));
}

.product-ui .monaco-editor .inline-deleted-margin-view-zone,
.product-ui .monaco-editor .gutter-delete,
.product-ui .monaco-diff-editor .gutter-delete {
	background-color: var(--vscode-diffEditorGutter-removedLineBackground, var(--vscode-diffEditor-removedLineBackground), var(--vscode-diffEditor-removedTextBackground));
}

.product-ui .monaco-diff-editor.side-by-side .editor.modified {
	box-shadow: -6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-left: 1px solid var(--vscode-diffEditor-border);
}

.product-ui .monaco-diff-editor.side-by-side .editor.original {
	box-shadow: 6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-right: 1px solid var(--vscode-diffEditor-border);
}

.product-ui .monaco-diff-editor .diffViewport {
	background: var(--vscode-scrollbarSlider-background);
}

.product-ui .monaco-diff-editor .diffViewport:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.product-ui .monaco-diff-editor .diffViewport:active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}

.product-ui .monaco-editor .diagonal-fill {
	background-image: linear-gradient(
		-45deg,
		var(--vscode-diffEditor-diagonalFill) 12.5%,
		#0000 12.5%, #0000 50%,
		var(--vscode-diffEditor-diagonalFill) 50%, var(--vscode-diffEditor-diagonalFill) 62.5%,
		#0000 62.5%, #0000 100%
	);
	background-size: 8px 8px;
}

.product-ui .monaco-diff-editor .gutter {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;

	.product-ui & > div {
		position: absolute;
	}

	.product-ui .gutterItem {
		opacity: 0;
		transition: opacity 0.7s;

		.product-ui &.showAlways {
			opacity: 1;
			transition: none;
		}

		.product-ui &.noTransition {
			transition: none;
		}
	}

	.product-ui &:hover .gutterItem {
		opacity: 1;
		transition: opacity 0.1s ease-in-out;
	}

	.product-ui .gutterItem {
		.product-ui .background {
			position: absolute;
			height: 100%;
			left: 50%;
			width: 1px;

			border-left: 2px var(--vscode-menu-separatorBackground) solid;
		}

		.product-ui .buttons {
			position: absolute;
			/*height: 100%;*/
			width: 100%;

			display: flex;
			justify-content: center;
			align-items: center;

			.product-ui .monaco-toolbar {
				height: -moz-fit-content;
				height: fit-content;
				.product-ui .monaco-action-bar  {
					line-height: 1;

					.product-ui .actions-container {
						width: -moz-fit-content;
						width: fit-content;
						border-radius: 4px;
						background: var(--vscode-editorGutter-itemBackground);

						.product-ui .action-item {
							.product-ui &:hover {
								background: var(--vscode-toolbar-hoverBackground);
							}

							.product-ui .action-label {
								color: var(--vscode-editorGutter-itemGlyphForeground);
								padding: 1px 2px;
							}
						}
					}
				}
			}
		}
	}
}


.product-ui .monaco-diff-editor .diff-hidden-lines-compact {
	display: flex;
	height: 11px;
	.product-ui .line-left, .product-ui .line-right {
		height: 1px;
		border-top: 1px solid;
		border-color: var(--vscode-editorCodeLens-foreground);
		opacity: 0.5;
		margin: auto;
		width: 100%;
	}

	.product-ui .line-left {
		width: 20px;
	}

	.product-ui .text {
		color: var(--vscode-editorCodeLens-foreground);
		text-wrap: nowrap;
		font-size: 11px;
		line-height: 11px;
		margin: 0 4px;
	}
}

.product-ui .monaco-editor .line-delete-selectable {
	-moz-user-select: text !important;
	     user-select: text !important;
	-webkit-user-select: text !important;
	z-index: 1 !important;
}

.product-ui .line-delete-selectable .view-line {
	-moz-user-select: text !important;
	     user-select: text !important;
	-webkit-user-select: text !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .rendered-markdown kbd {
	background-color: var(--vscode-keybindingLabel-background);
	color: var(--vscode-keybindingLabel-foreground);
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: var(--vscode-keybindingLabel-border);
	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
	vertical-align: middle;
	padding: 1px 3px;
}

.product-ui .rendered-markdown li:has(input[type=checkbox]) {
	list-style-type: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-component.multiDiffEditor {
	background: var(--vscode-multiDiffEditor-background);

	position: relative;

	height: 100%;
	width: 100%;

	overflow-y: hidden;

	.product-ui > div {
		position: absolute;
		top: 0px;
		left: 0px;

		height: 100%;
		width: 100%;

		.product-ui &.placeholder {
			visibility: hidden;

			.product-ui &.visible {
				visibility: visible;
			}

			display: grid;
			place-items: center;
			place-content: center;
		}
	}

	.product-ui .active {
		--vscode-multiDiffEditor-border: var(--vscode-focusBorder);
	}

	.product-ui .multiDiffEntry {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;


		.product-ui .collapse-button {
			margin: 0 5px;
			cursor: pointer;

			.product-ui a {
				display: block;
			}
		}

		.product-ui .header {
			z-index: 1000;
			background: var(--vscode-editor-background);

			.product-ui &:not(.collapsed) .header-content {
				border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
			}

			.product-ui .header-content {
				margin: 8px 0px 0px 0px;
				padding: 4px 5px;

				border-top: 1px solid var(--vscode-multiDiffEditor-border);

				display: flex;
				align-items: center;

				color: var(--vscode-foreground);
				background: var(--vscode-multiDiffEditor-headerBackground);

				.product-ui &.shadow {
					box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
				}

				.product-ui .file-path {
					display: flex;
					flex: 1;
					min-width: 0;

					.product-ui .title {
						font-size: 14px;
						line-height: 22px;

						.product-ui &.original {
							flex: 1;
							min-width: 0;
							text-overflow: ellipsis;
						}
					}

					.product-ui .status {
						font-weight: 600;
						opacity: 0.75;
						margin: 0px 10px;
						line-height: 22px;

						/*
							TODO@hediet: move colors from git extension to core!
						&.renamed {
							color: v ar(--vscode-gitDecoration-renamedResourceForeground);
						}

						&.deleted {
							color: v ar(--vscode-gitDecoration-deletedResourceForeground);
						}

						&.added {
							color: v ar(--vscode-gitDecoration-addedResourceForeground);
						}
						*/
					}
				}

				.product-ui .actions {
					padding: 0 8px;
				}
			}


		}

		.product-ui .editorParent {
			flex: 1;
			display: flex;
			flex-direction: column;

			border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
			overflow: hidden;
		}

		.product-ui .editorContainer {
			flex: 1;
		}
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .selection-anchor {
	background-color: #007ACC;
	width: 2px !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .bracket-match {
	box-sizing: border-box;
	background-color: var(--vscode-editorBracketMatch-background);
	border: 1px solid var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .inline-editor-progress-decoration {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.product-ui .inline-progress-widget  {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.product-ui .inline-progress-widget .icon {
	font-size: 80% !important;
}

.product-ui .inline-progress-widget:hover .icon {
	font-size: 90% !important;
	animation: none;
}

.product-ui .inline-progress-widget:hover .icon::before {
	content: var(--vscode-icon-x-content);
	font-family: var(--vscode-icon-x-font-family);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .monaco-editor-overlaymessage {
	padding-bottom: 8px;
	z-index: 10000;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage.below {
	padding-bottom: 0;
	padding-top: 8px;
	z-index: 10000;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.product-ui .monaco-editor .monaco-editor-overlaymessage.fadeIn {
	animation: fadeIn 150ms ease-out;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.product-ui .monaco-editor .monaco-editor-overlaymessage.fadeOut {
	animation: fadeOut 100ms ease-out;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .message {
	padding: 2px 4px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-inputValidation-infoBorder);
	border-radius: 3px;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .message p {
	margin-block: 0px;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .message a {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .message a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.product-ui .monaco-editor.hc-black .monaco-editor-overlaymessage .message,
.product-ui .monaco-editor.hc-light .monaco-editor-overlaymessage .message {
	border-width: 2px;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .anchor {
	width: 0 !important;
	height: 0 !important;
	border-color: transparent;
	border-style: solid;
	z-index: 1000;
	border-width: 8px;
	position: absolute;
	left: 2px;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .anchor.top {
	border-bottom-color: var(--vscode-inputValidation-infoBorder);
}

.product-ui .monaco-editor .monaco-editor-overlaymessage .anchor.below {
	border-top-color: var(--vscode-inputValidation-infoBorder);
}

.product-ui .monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top,
.product-ui .monaco-editor .monaco-editor-overlaymessage.below .anchor.below {
	display: none;
}

.product-ui .monaco-editor .monaco-editor-overlaymessage.below .anchor.top {
	display: inherit;
	top: -8px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .action-widget {
	font-size: 13px;
	border-radius: 0;
	min-width: 100px;
	max-width: 80vw;
	z-index: 40;
	display: block;
	width: 100%;
	border: 1px solid var(--vscode-menu-border) !important;
	border-radius: 5px;
	background-color: var(--vscode-menu-background);
	color: var(--vscode-menu-foreground);
	padding: 4px;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.product-ui .context-view-block {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.product-ui .context-view-pointerBlock {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.product-ui .action-widget .monaco-list {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	border: none !important;
	border-width: 0 !important;
}

.product-ui .action-widget .monaco-list:focus:before {
	outline: 0 !important;
}

.product-ui .action-widget .monaco-list .monaco-scrollable-element {
	overflow: visible;
}

/** Styles for each row in the list element **/
.product-ui .action-widget .monaco-list .monaco-list-row {
	padding: 0 4px 0 4px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
	width: 100%;
	border-radius: 3px;
}

.product-ui .action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) {
	background-color: var(--vscode-list-activeSelectionBackground) !important;
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
	outline-offset: -1px;
}

.product-ui .action-widget .monaco-list-row.group-header {
	color: var(--vscode-descriptionForeground) !important;
	font-weight: 600;
	font-size: 13px;
}

.product-ui .action-widget .monaco-list-row.group-header:not(:first-of-type) {
	margin-top: 2px;
}

.product-ui .action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
	padding: 0;
	margin: 4px 0 0 0;
	cursor: default;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	border-radius: 0;
}

.product-ui .action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator.focused {
	outline: 0 solid;
	background-color: transparent;
	border-radius: 0;
}

.product-ui .action-widget .monaco-list-row.separator:first-of-type {
	border-top: none;
	margin-top: 0;
}

.product-ui .action-widget .monaco-list .group-header,
.product-ui .action-widget .monaco-list .option-disabled,
.product-ui .action-widget .monaco-list .option-disabled:before,
.product-ui .action-widget .monaco-list .option-disabled .focused,
.product-ui .action-widget .monaco-list .option-disabled .focused:before {
	cursor: default !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
	background-color: transparent !important;
	outline: 0 solid !important;
}

.product-ui .action-widget .monaco-list-row.action {
	display: flex;
	gap: 4px;
	align-items: center;
}

.product-ui .action-widget .monaco-list-row.action.option-disabled,
.product-ui .action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
.product-ui .action-widget .monaco-list-row.action.option-disabled .codicon,
.product-ui .action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled {
	color: var(--vscode-disabledForeground);
}


.product-ui .action-widget .monaco-list-row.action:not(.option-disabled) .codicon {
	color: inherit;
}

.product-ui .action-widget .monaco-list-row.action .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-ui .action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key {
		background-color: var(--vscode-keybindingLabel-background);
		color: var(--vscode-keybindingLabel-foreground);
		border-style: solid;
		border-width: 1px;
		border-radius: 3px;
		border-color: var(--vscode-keybindingLabel-border);
		border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
		box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
}

/* Action bar */

.product-ui .action-widget .action-widget-action-bar {
	background-color: var(--vscode-menu-background);
	border-top: 1px solid var(--vscode-menu-border);
	margin-top: 2px;
}

.product-ui .action-widget .action-widget-action-bar::before {
	display: block;
	content: "";
	width: 100%;
}

.product-ui .action-widget .action-widget-action-bar .actions-container {
	padding: 4px 8px 2px 24px;
}

.product-ui .action-widget-action-bar .action-label {
	color: var(--vscode-textLink-activeForeground);
	font-size: 13px;
	line-height: 22px;
	padding: 0;
	pointer-events: all;
}

.product-ui .action-widget-action-bar .action-item {
	margin-right: 16px;
	pointer-events: none;
}

.product-ui .action-widget-action-bar .action-label:hover {
	background-color: transparent !important;
}

.product-ui .monaco-action-bar .actions-container.highlight-toggled .action-label.checked {
	/* The important gives this rule precedence over the hover rule. */
	background: var(--vscode-actionBar-toggledBackground) !important;
}

.product-ui .action-widget .monaco-list .monaco-list-row .description {
	opacity: 0.7;
	margin-left: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .post-edit-widget {
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 1px solid var(--vscode-widget-border, transparent);
	border-radius: 4px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	overflow: hidden;
}

.product-ui .post-edit-widget .monaco-button {
	padding: 2px;
	border: none;
	border-radius: 0;
}

.product-ui .post-edit-widget .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground) !important;
}

.product-ui .post-edit-widget .monaco-button .codicon {
	margin: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
	font-family: "codicon";
	font-display: block;
	src: url(./codicon-ngg6Pgfi.ttf) format("truetype");
}

.product-ui .codicon[class*='codicon-'] {
	font: normal normal normal 16px/1 codicon;
	display: inline-block;
	text-decoration: none;
	text-rendering: auto;
	text-align: center;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .codicon-wrench-subaction {
	opacity: 0.5;
}

@keyframes codicon-spin {
	100% {
		transform:rotate(360deg);
	}
}

.product-ui .codicon-sync.codicon-modifier-spin,
.product-ui .codicon-loading.codicon-modifier-spin,
.product-ui .codicon-gear.codicon-modifier-spin,
.product-ui .codicon-notebook-state-executing.codicon-modifier-spin {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.5s steps(30) infinite;
}

.product-ui .codicon-modifier-disabled {
	opacity: 0.4;
}

/* custom speed & easing for loading icon */
.product-ui .codicon-loading,
.product-ui .codicon-tree-item-loading::before {
	animation-duration: 1s !important;
	animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.product-ui .monaco-editor .codicon.codicon-symbol-array,
.product-ui .monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-boolean,
.product-ui .monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-class,
.product-ui .monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-method,
.product-ui .monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-color,
.product-ui .monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-constant,
.product-ui .monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-constructor,
.product-ui .monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-value,
.product-ui .monaco-workbench .codicon.codicon-symbol-value,
.product-ui .monaco-editor .codicon.codicon-symbol-enum,
.product-ui .monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-enum-member,
.product-ui .monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-event,
.product-ui .monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-field,
.product-ui .monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-file,
.product-ui .monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-folder,
.product-ui .monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-function,
.product-ui .monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-interface,
.product-ui .monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-key,
.product-ui .monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-keyword,
.product-ui .monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-module,
.product-ui .monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-namespace,
.product-ui .monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-null,
.product-ui .monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-number,
.product-ui .monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-object,
.product-ui .monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-operator,
.product-ui .monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-package,
.product-ui .monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-property,
.product-ui .monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-reference,
.product-ui .monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-snippet,
.product-ui .monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-string,
.product-ui .monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-struct,
.product-ui .monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-text,
.product-ui .monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-type-parameter,
.product-ui .monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-symbolIcon-typeParameterForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-unit,
.product-ui .monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
.product-ui .monaco-editor .codicon.codicon-symbol-variable,
.product-ui .monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .lightBulbWidget {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-ui .monaco-editor .lightBulbWidget:hover{
	cursor: pointer;
}

.product-ui .monaco-editor .lightBulbWidget.codicon-light-bulb,
.product-ui .monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.product-ui .monaco-editor .lightBulbWidget.codicon-lightbulb-autofix,
.product-ui .monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle-autofix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.product-ui .monaco-editor .lightBulbWidget.codicon-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}

.product-ui .monaco-editor .lightBulbWidget:before {
	position: relative;
	z-index: 2;
}

.product-ui .monaco-editor .lightBulbWidget:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 1;
}

/* gutter decoration */
.product-ui .monaco-editor .glyph-margin-widgets .cgmr[class*="codicon-gutter-lightbulb"] {
	display: block;
	cursor: pointer;
}

.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb,
.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-auto-fix,
.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-aifix-auto-fix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.product-ui .monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .codelens-decoration {
	overflow: hidden;
	display: inline-flex !important; /* !important to override inline display:block style */
	align-items: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
	padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5);
	font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings);
	font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault);
}

.product-ui .monaco-editor .codelens-decoration > span,
.product-ui .monaco-editor .codelens-decoration > a {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	vertical-align: sub;
	display: inline-flex;
	align-items: center;
}

.product-ui .monaco-editor .codelens-decoration > a {
	text-decoration: none;
}

.product-ui .monaco-editor .codelens-decoration > a:hover {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.product-ui .monaco-editor .codelens-decoration > a:hover .codicon {
	color: var(--vscode-editorLink-activeForeground) !important;
}

.product-ui .monaco-editor .codelens-decoration .codicon[class*='codicon-'] {
	vertical-align: middle;
	color: currentColor !important;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
}


.product-ui .monaco-editor .codelens-decoration > a:hover .codicon::before {
	cursor: pointer;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.product-ui .monaco-editor .codelens-decoration.fadein {
	animation: fadein 0.1s linear;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .inlineSuggestionsHints {
	padding: 4px;

	.product-ui .warningMessage p {
		margin: 0;
	}
}

.product-ui .monaco-editor .inlineSuggestionsHints.withBorder {
	z-index: 39;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .monaco-editor .inlineSuggestionsHints a {
	color: var(--vscode-foreground) !important;
}

.product-ui .monaco-editor .inlineSuggestionsHints a:hover {
	color: var(--vscode-foreground) !important;
}

.product-ui .monaco-editor .inlineSuggestionsHints .keybinding {
	display: flex;
	margin-left: 4px;
	opacity: 0.6;
}

.product-ui .monaco-editor .inlineSuggestionsHints .keybinding .monaco-keybinding-key {
	font-size: 8px;
	padding: 2px 3px;
}

.product-ui .monaco-editor .inlineSuggestionsHints .availableSuggestionCount a {
	display: flex;
	min-width: 19px;
	justify-content: center;
}

.product-ui .monaco-editor .inlineSuggestionStatusBarItemLabel {
	margin-right: 2px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Find widget */
.product-ui .monaco-editor .find-widget {
	position: absolute;
	z-index: 35;
	height: 33px;
	overflow: hidden;
	line-height: 19px;
	transition: transform 200ms linear;
	padding: 0 4px;
	box-sizing: border-box;
	transform: translateY(calc(-100% - 10px)); /* shadow (10px) */
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	color: var(--vscode-editorWidget-foreground);
	border-left: 1px solid var(--vscode-widget-border);
	border-right: 1px solid var(--vscode-widget-border);
	border-bottom: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: var(--vscode-editorWidget-background);
}

.product-ui .monaco-reduce-motion .monaco-editor .find-widget {
	transition: transform 0ms linear;
}

.product-ui .monaco-editor .find-widget textarea {
	margin: 0px;
}

.product-ui .monaco-editor .find-widget.hiddenEditor {
	display: none;
}

/* Find widget when replace is toggled on */
.product-ui .monaco-editor .find-widget.replaceToggled > .replace-part {
	display: flex;
}

.product-ui .monaco-editor .find-widget.visible {
	transform: translateY(0);
}

/* This outline-color rule is used to override the outline color for synthetic-focus find input. */
.product-ui .monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
}

.product-ui .monaco-editor .find-widget .monaco-inputbox .input {
	background-color: transparent;
	min-height: 0;
}

.product-ui .monaco-editor .find-widget .monaco-findInput .input {
	font-size: 13px;
}

.product-ui .monaco-editor .find-widget > .find-part,
.product-ui .monaco-editor .find-widget > .replace-part {
	margin: 3px 25px 0 17px;
	font-size: 12px;
	display: flex;
}

.product-ui .monaco-editor .find-widget > .find-part .monaco-inputbox,
.product-ui .monaco-editor .find-widget > .replace-part .monaco-inputbox {
	min-height: 25px;
}


.product-ui .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-right: 22px;
}

.product-ui .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input,
.product-ui .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror,
.product-ui .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input,
.product-ui .monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-top: 2px;
	padding-bottom: 2px;
}

.product-ui .monaco-editor .find-widget > .find-part .find-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.product-ui .monaco-editor .find-widget > .replace-part .replace-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.product-ui .monaco-editor .find-widget .monaco-findInput {
	vertical-align: middle;
	display: flex;
	flex: 1;
}

.product-ui .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
	/* Make sure textarea inherits the width correctly */
	width: 100%;
}

.product-ui .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical {
	/* Hide vertical scrollbar */
	opacity: 0;
}

.product-ui .monaco-editor .find-widget .matchesCount {
	display: flex;
	flex: initial;
	margin: 0 0 0 3px;
	padding: 2px 0 0 2px;
	height: 25px;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
	line-height: 23px;
}

.product-ui .monaco-editor .find-widget .button {
	width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 5px;
	flex: initial;
	margin-left: 3px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* find in selection button */
.product-ui .monaco-editor .find-widget .codicon-find-selection {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 5px;
}

.product-ui .monaco-editor .find-widget .button.left {
	margin-left: 0;
	margin-right: 3px;
}

.product-ui .monaco-editor .find-widget .button.wide {
	width: auto;
	padding: 1px 6px;
	top: -1px;
}

.product-ui .monaco-editor .find-widget .button.toggle {
	position: absolute;
	top: 0;
	left: 3px;
	width: 18px;
	height: 100%;
	border-radius: 0;
	box-sizing: border-box;
}

.product-ui .monaco-editor .find-widget .button.toggle.disabled {
	display: none;
}

.product-ui .monaco-editor .find-widget .disabled {
	color: var(--vscode-disabledForeground);
	cursor: default;
}

.product-ui .monaco-editor .find-widget > .replace-part {
	display: none;
}

.product-ui .monaco-editor .find-widget > .replace-part > .monaco-findInput {
	position: relative;
	display: flex;
	vertical-align: middle;
	flex: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.product-ui .monaco-editor .find-widget > .replace-part > .monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

/* REDUCED */
.product-ui .monaco-editor .find-widget.reduced-find-widget .matchesCount {
	display: none;
}

/* NARROW (SMALLER THAN REDUCED) */
.product-ui .monaco-editor .find-widget.narrow-find-widget {
	max-width: 257px !important;
}

/* COLLAPSED (SMALLER THAN NARROW) */
.product-ui .monaco-editor .find-widget.collapsed-find-widget {
	max-width: 170px !important;
}

.product-ui .monaco-editor .find-widget.collapsed-find-widget .button.previous,
.product-ui .monaco-editor .find-widget.collapsed-find-widget .button.next,
.product-ui .monaco-editor .find-widget.collapsed-find-widget .button.replace,
.product-ui .monaco-editor .find-widget.collapsed-find-widget .button.replace-all,
.product-ui .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
	display: none;
}

.product-ui .monaco-editor .find-widget.no-results .matchesCount {
	color: var(--vscode-errorForeground);
}

.product-ui .monaco-editor .findMatch {
	animation-duration: 0;
	animation-name: inherit !important;
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.product-ui .monaco-editor .currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
	border: 2px solid var(--vscode-editor-findMatchBorder);
	padding: 1px;
	box-sizing: border-box;
}

.product-ui .monaco-editor .findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.product-ui .monaco-editor .find-widget .monaco-sash {
	left: 0 !important;
	background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border));
}

.product-ui .monaco-editor.hc-black .find-widget .button:before {
	position: relative;
	top: 1px;
	left: 2px;
}

/* Action bars */
.product-ui .monaco-editor .find-widget .button:not(.disabled):hover,
.product-ui .monaco-editor .find-widget .codicon-find-selection:hover {
	background-color: var(--vscode-toolbar-hoverBackground) !important;
}

.product-ui .monaco-editor.findMatch {
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.product-ui .monaco-editor.currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
}

.product-ui .monaco-editor.findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.product-ui .monaco-editor.findMatch {
	background-color: var(--vscode-editorWidget-background);
}

/* Close button position. */
.product-ui .monaco-editor .find-widget > .button.codicon-widget-close {
	position: absolute;
	top: 5px;
	right: 4px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .colorpicker-widget {
	height: 190px;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/* Decoration */

.product-ui .colorpicker-color-decoration,
.product-ui .hc-light .colorpicker-color-decoration {
	border: solid 0.1em #000;
	box-sizing: border-box;
	margin: 0.1em 0.2em 0 0.2em;
	width: 0.8em;
	height: 0.8em;
	line-height: 0.8em;
	display: inline-block;
	cursor: pointer;
}

.product-ui .hc-black .colorpicker-color-decoration,
.product-ui .vs-dark .colorpicker-color-decoration {
	border: solid 0.1em #eee;
}

/* Header */

.product-ui .colorpicker-header {
	display: flex;
	height: 24px;
	position: relative;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.product-ui .colorpicker-header .picked-color {
	width: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24px;
	cursor: pointer;
	color: white;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
}

.product-ui .colorpicker-header .picked-color .picked-color-presentation {
	white-space: nowrap;
	margin-left: 5px;
	margin-right: 5px;
}

.product-ui .colorpicker-header .picked-color .codicon {
	color: inherit;
	font-size: 14px;
}

.product-ui .colorpicker-header .picked-color.light {
	color: black;
}

.product-ui .colorpicker-header .original-color {
	width: 74px;
	z-index: inherit;
	cursor: pointer;
}

.product-ui .standalone-colorpicker {
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .colorpicker-header.standalone-colorpicker {
	border-bottom: none;
}

.product-ui .colorpicker-header .close-button {
	cursor: pointer;
	background-color: var(--vscode-editorHoverWidget-background);
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .colorpicker-header .close-button-inner-div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.product-ui .colorpicker-header .close-button-inner-div:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.product-ui .colorpicker-header .close-icon {
	padding: 3px;
}

/* Body */

.product-ui .colorpicker-body {
	display: flex;
	padding: 8px;
	position: relative;
}

.product-ui .colorpicker-body .saturation-wrap {
	overflow: hidden;
	height: 150px;
	position: relative;
	min-width: 220px;
	flex: 1;
}

.product-ui .colorpicker-body .saturation-box {
	height: 150px;
	position: absolute;
}

.product-ui .colorpicker-body .saturation-selection {
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -5px;
	border: 1px solid rgb(255, 255, 255);
	border-radius: 100%;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
	position: absolute;
}

.product-ui .colorpicker-body .strip {
	width: 25px;
	height: 150px;
}

.product-ui .colorpicker-body .standalone-strip {
	width: 25px;
	height: 122px;
}

.product-ui .colorpicker-body .hue-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.product-ui .colorpicker-body .opacity-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.product-ui .colorpicker-body .strip.grabbing {
	cursor: grabbing;
}

.product-ui .colorpicker-body .slider {
	position: absolute;
	top: 0;
	left: -2px;
	width: calc(100% + 4px);
	height: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.71);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
}

.product-ui .colorpicker-body .strip .overlay {
	height: 150px;
	pointer-events: none;
}

.product-ui .colorpicker-body .standalone-strip .standalone-overlay {
	height: 122px;
	pointer-events: none;
}

.product-ui .standalone-colorpicker-body {
	display: block;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
	overflow: hidden;
}

.product-ui .colorpicker-body .insert-button {
	position: absolute;
	height: 20px;
	width: 58px;
	padding: 0px;
	right: 8px;
	bottom: 8px;
	background: var(--vscode-button-background);
	color: var(--vscode-button-foreground);
	border-radius: 2px;
	border: none;
	cursor: pointer;
}

.product-ui .colorpicker-body .insert-button:hover{
	background: var(--vscode-button-hoverBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .peekview-widget .head {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title {
	display: flex;
	align-items: baseline;
	font-size: 13px;
	margin-left: 20px;
	min-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title.clickable {
	cursor: pointer;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
	font-size: 0.9em;
	margin-left: 0.5em;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .dirname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty)::before {
	content: '-';
	padding: 0 0.3em;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-actions {
	flex: 1;
	text-align: right;
	padding-right: 2px;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar {
	display: inline-block;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar,
.product-ui .monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar > .actions-container {
	height: 100%;
}

.product-ui .monaco-editor .peekview-widget > .body {
	border-top: 1px solid;
	position: relative;
}

.product-ui .monaco-editor .peekview-widget .head .peekview-title .codicon {
	margin-right: 4px;
	align-self: center;
}

.product-ui .monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon {
	color: inherit !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .zone-widget {
	position: absolute;
	z-index: 10;
}


.product-ui .monaco-editor .zone-widget .zone-widget-container {
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
	position: relative;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -- zone widget */
.product-ui .monaco-editor .zone-widget .zone-widget-container.reference-zone-widget {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.product-ui .monaco-editor .reference-zone-widget .inline {
	display: inline-block;
	vertical-align: top;
}

.product-ui .monaco-editor .reference-zone-widget .messages {
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 3em 0;
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree {
	line-height: 23px;
	background-color: var(--vscode-peekViewResult-background);
	color: var(--vscode-peekViewResult-lineForeground);
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .reference {
	text-overflow: ellipsis;
	overflow: hidden;
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .reference-file {
	display: inline-flex;
	width: 100%;
	height: 100%;
	color: var(--vscode-peekViewResult-fileForeground);
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
	color: inherit !important;
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) {
	background-color: var(--vscode-peekViewResult-selectionBackground);
	color: var(--vscode-peekViewResult-selectionForeground) !important;
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
	margin-right: 12px;
	margin-left: auto;
}

.product-ui .monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
	color: var(--vscode-peekViewResult-fileForeground) !important;
	background-color: var(--vscode-peekViewResult-matchHighlightBackground) !important;
}

.product-ui .monaco-editor .reference-zone-widget .preview .reference-decoration {
	background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
	border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
	box-sizing: border-box;
}

.product-ui .monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,
.product-ui .monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
	background-color: var(--vscode-peekViewEditor-background);
}

.product-ui .monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
	background-color: var(--vscode-peekViewEditorGutter-background);
}

/* High Contrast Theming */

.product-ui .monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file,
.product-ui .monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file {
	font-weight: bold;
}

.product-ui .monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight,
.product-ui .monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight {
	border: 1px dotted var(--vscode-contrastActiveBorder, transparent);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* marker zone */

.product-ui .monaco-editor .peekview-widget .head .peekview-title .severity-icon {
	display: inline-block;
	vertical-align: text-top;
	margin-right: 4px;
}

.product-ui .monaco-editor .marker-widget {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-ui .monaco-editor .marker-widget > .stale {
	opacity: 0.6;
	font-style: italic;
}

.product-ui .monaco-editor .marker-widget .title {
	display: inline-block;
	padding-right: 5px;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer {
	position: absolute;
	white-space: pre;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	padding: 8px 12px 0 20px;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message {
	display: flex;
	flex-direction: column;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message .details {
	padding-left: 6px;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message .source,
.product-ui .monaco-editor .marker-widget .descriptioncontainer .message span.code {
	opacity: 0.6;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message a.code-link {
	opacity: 0.6;
	color: inherit;
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before {
	content: '(';
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after {
	content: ')';
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .message a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-activeForeground);
}

.product-ui .monaco-editor .marker-widget .descriptioncontainer .filename {
	cursor: pointer;
	color: var(--vscode-textLink-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .zone-widget .codicon.codicon-error,
.product-ui .markers-panel .marker-icon.error,
.product-ui .markers-panel .marker-icon .codicon.codicon-error,
.product-ui .text-search-provider-messages .providerMessage .codicon.codicon-error,
.product-ui .extensions-viewlet > .extensions .codicon.codicon-error,
.product-ui .extension-editor .codicon.codicon-error,
.product-ui .chat-attached-context-attachment .codicon.codicon-error {
	color: var(--vscode-problemsErrorIcon-foreground);
}

.product-ui .monaco-editor .zone-widget .codicon.codicon-warning,
.product-ui .markers-panel .marker-icon.warning,
.product-ui .markers-panel .marker-icon .codicon.codicon-warning,
.product-ui .text-search-provider-messages .providerMessage .codicon.codicon-warning,
.product-ui .extensions-viewlet > .extensions .codicon.codicon-warning,
.product-ui .extension-editor .codicon.codicon-warning,
.product-ui .preferences-editor .codicon.codicon-warning {
	color: var(--vscode-problemsWarningIcon-foreground);
}

.product-ui .monaco-editor .zone-widget .codicon.codicon-info,
.product-ui .markers-panel .marker-icon.info,
.product-ui .markers-panel .marker-icon .codicon.codicon-info,
.product-ui .text-search-provider-messages .providerMessage .codicon.codicon-info,
.product-ui .extensions-viewlet > .extensions .codicon.codicon-info,
.product-ui .extension-editor .codicon.codicon-info {
	color: var(--vscode-problemsInfoIcon-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .hoverHighlight {
	background-color: var(--vscode-editor-hoverHighlightBackground);
}

.product-ui .monaco-editor .monaco-resizable-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	box-sizing: content-box;
}

.product-ui .monaco-editor .monaco-resizable-hover > .monaco-hover {
	border: none;
	border-radius: none;
}

.product-ui .monaco-editor .monaco-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
}

.product-ui .monaco-editor .monaco-hover a {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-editor .monaco-hover a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.product-ui .monaco-editor .monaco-hover .hover-row {
	display: flex;
}

.product-ui .monaco-editor .monaco-hover .hover-row.hover-row-with-copy {
	position: relative;
	padding-right: 20px;
}

.product-ui .monaco-editor .monaco-hover .hover-row .hover-row-contents {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.product-ui .monaco-editor .monaco-hover .hover-row .verbosity-actions {
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	width: 22px;
	overflow-y: clip;
}

.product-ui .monaco-editor .monaco-hover .hover-row .verbosity-actions-inner {
	display: flex;
	flex-direction: column;
	padding-left: 5px;
	padding-right: 5px;
	justify-content: flex-end;
	position: relative;
}

.product-ui .monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon {
	cursor: pointer;
	font-size: 11px;
}

.product-ui .monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.enabled {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.disabled {
	opacity: 0.6;
}

.product-ui .monaco-editor .monaco-hover .hover-row .actions {
	background-color: var(--vscode-editorHoverWidget-statusBarBackground);
}

.product-ui .monaco-editor .monaco-hover code {
	background-color: var(--vscode-textCodeBlock-background);
}

.product-ui .monaco-editor .monaco-hover .hover-copy-button {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 2px 4px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.product-ui .monaco-editor .monaco-hover .hover-row-with-copy:hover .hover-copy-button,
.product-ui .monaco-editor .monaco-hover .hover-row-with-copy:focus-within .hover-copy-button {
	opacity: 1;
}

.product-ui .monaco-editor .monaco-hover .hover-copy-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
	cursor: pointer;
}

.product-ui .monaco-editor .monaco-hover .hover-copy-button:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.product-ui .monaco-editor .monaco-hover .hover-copy-button .codicon {
	font-size: 16px;
	color: var(--vscode-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor.vs .dnd-target,
.product-ui .monaco-editor.hc-light .dnd-target {
	border-right: 2px dotted black;
	color: white; /* opposite of black */
}
.product-ui .monaco-editor.vs-dark .dnd-target {
	border-right: 2px dotted #AEAFAD;
	color: #51504f; /* opposite of #AEAFAD */
}
.product-ui .monaco-editor.hc-black .dnd-target {
	border-right: 2px dotted #fff;
	color: #000; /* opposite of #fff */
}

.product-ui .monaco-editor.mouse-default .view-lines,
.product-ui .monaco-editor.vs-dark.mac.mouse-default .view-lines,
.product-ui .monaco-editor.hc-black.mac.mouse-default .view-lines,
.product-ui .monaco-editor.hc-light.mac.mouse-default .view-lines {
	cursor: default;
}
.product-ui .monaco-editor.mouse-copy .view-lines,
.product-ui .monaco-editor.vs-dark.mac.mouse-copy .view-lines,
.product-ui .monaco-editor.hc-black.mac.mouse-copy .view-lines,
.product-ui .monaco-editor.hc-light.mac.mouse-copy .view-lines {
	cursor: copy;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .findOptionsWidget {
	background-color: var(--vscode-editorWidget-background);
	color: var(--vscode-editorWidget-foreground);
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 2px solid var(--vscode-contrastBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.product-ui .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.product-ui .monaco-editor .margin-view-overlays .codicon-folding-expanded,
.product-ui .monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 140%;
	margin-left: 2px;
}

.product-ui .monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.product-ui .monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.product-ui .monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-expanded,
.product-ui .monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	transition: initial;
}

.product-ui .monaco-editor .margin-view-overlays:hover .codicon,
.product-ui .monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,
.product-ui .monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,
.product-ui .monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
	opacity: 1;
}

.product-ui .monaco-editor .inline-folded:after {
	color: var(--vscode-editor-foldPlaceholderForeground);
	margin: 0.1em 0.2em 0 0.2em;
	content: "\22EF"; /* ellipses unicode character */
	display: inline;
	line-height: 1em;
	cursor: pointer;
}

.product-ui .monaco-editor .folded-background {
	background-color: var(--vscode-editor-foldBackground);
}

.product-ui .monaco-editor .cldr.codicon.codicon-folding-expanded,
.product-ui .monaco-editor .cldr.codicon.codicon-folding-collapsed,
.product-ui .monaco-editor .cldr.codicon.codicon-folding-manual-expanded,
.product-ui .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed {
	color: var(--vscode-editorGutter-foldingControlForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .snippet-placeholder {
	min-width: 2px;
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent);
}

.product-ui .monaco-editor .finish-snippet-placeholder {
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Suggest widget*/

.product-ui .monaco-editor .suggest-widget {
	width: 430px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	border-radius: 3px;
}

.product-ui .monaco-editor .suggest-widget.message {
	flex-direction: row;
	align-items: center;
}

.product-ui .monaco-editor .suggest-widget,
.product-ui .monaco-editor .suggest-details {
	flex: 0 1 auto;
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: var(--vscode-editorSuggestWidget-border);
	background-color: var(--vscode-editorSuggestWidget-background);
}

.product-ui .monaco-editor.hc-black .suggest-widget,
.product-ui .monaco-editor.hc-black .suggest-details,
.product-ui .monaco-editor.hc-light .suggest-widget,
.product-ui .monaco-editor.hc-light .suggest-details {
	border-width: 2px;
}

/* Styles for status bar part */


.product-ui .monaco-editor .suggest-widget .suggest-status-bar {
	box-sizing: border-box;
	display: none;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	font-size: 80%;
	padding: 0 4px 0 4px;
	border-top: 1px solid var(--vscode-editorSuggestWidget-border);
	overflow: hidden;
}

.product-ui .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
	display: flex;
}

.product-ui .monaco-editor .suggest-widget .suggest-status-bar .left {
	padding-right: 8px;
}

.product-ui .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
	color: var(--vscode-editorSuggestWidgetStatus-foreground);
}

.product-ui .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label {
	margin-right: 0;
}

.product-ui .monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label::after {
	content: ', ';
	margin-right: 0.3em;
}

.product-ui .monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
.product-ui .monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: none;
}

.product-ui .monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: 100%;
}

/* Styles for Message element for when widget is loading or is empty */

.product-ui .monaco-editor .suggest-widget > .message {
	padding-left: 22px;
}

/** Styles for the list element **/

.product-ui .monaco-editor .suggest-widget > .tree {
	height: 100%;
	width: 100%;
}

.product-ui .monaco-editor .suggest-widget .monaco-list {
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

/** Styles for each row in the list element **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row {
	display: flex;
	-mox-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
	color: var(--vscode-editorSuggestWidget-selectedForeground);
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon {
	color: var(--vscode-editorSuggestWidget-selectedIconForeground);
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents {
	flex: 1;
	height: 100%;
	overflow: hidden;
	padding-left: 2px;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	justify-content: space-between;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left,
.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	display: flex;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main .monaco-icon-label {
	color: var(--vscode-editorSuggestWidget-foreground);
}

.product-ui .monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
	font-weight: bold;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-highlightForeground);
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-focusHighlightForeground);
}

/** ReadMore Icon styles **/

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close,
.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before {
	color: inherit;
	opacity: 1;
	font-size: 14px;
	cursor: pointer;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close {
	position: absolute;
	top: 6px;
	right: 2px;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close:hover,
.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover {
	opacity: 1;
}

/** signature, qualifier, type/details opacity **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	opacity: 0.7;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.6;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .qualifier-label {
	margin-left: 12px;
	opacity: 0.4;
	font-size: 85%;
	line-height: initial;
	text-overflow: ellipsis;
	overflow: hidden;
	align-self: center;
}

/** Type Info and icon next to the label in the focused completion item **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	font-size: 85%;
	margin-left: 1.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source {
	display: inline;
}

/** Details: if using CompletionItem#details, show on focus **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	display: none;
}

.product-ui .monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
	display: inline;
}

/** Details: if using CompletionItemLabel#details, always show **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .right > .details-label,
.product-ui .monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label) > .contents > .main > .right > .details-label {
	display: inline;
}

/** Ellipsis on hover **/

.product-ui .monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: calc(100% - 26px);
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 0;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .left > .monaco-icon-label {
	max-width: 100%;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 1;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	overflow: hidden;
	flex-shrink: 4;
	max-width: 70%;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: inline-block;
	position: absolute;
	right: 10px;
	width: 18px;
	height: 18px;
	visibility: hidden;
}

/** Do NOT display ReadMore when docs is side/below **/

.product-ui .monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: none !important;
}

/** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .right > .readMore {
	display: none;
}

/** Focused item can show ReadMore, but can't when docs is side/below **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: inline-block;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right > .readMore {
	visibility: visible;
}

/** Styles for each row in the list **/

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {
	opacity: 0.66;
	text-decoration: unset;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated > .monaco-icon-label-container > .monaco-icon-name-container {
	text-decoration: line-through;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label::before {
	height: 100%;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
	display: block;
	height: 16px;
	width: 16px;
	margin-left: 2px;
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide {
	display: none;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
	display: flex;
	align-items: center;
	margin-right: 4px;
}

.product-ui .monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,
.product-ui .monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon::before {
	display: none;
}

.product-ui .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan {
	margin: 0 0 0 0.3em;
	border: 0.1em solid #000;
	width: 0.7em;
	height: 0.7em;
	display: inline-block;
}

/** Styles for the docs of the completion item in focus **/

.product-ui .monaco-editor .suggest-details-container {
	z-index: 41;
}

.product-ui .monaco-editor .suggest-details {
	display: flex;
	flex-direction: column;
	cursor: default;
	color: var(--vscode-editorSuggestWidget-foreground);
}

.product-ui .monaco-editor .suggest-details:focus {
	border-color: var(--vscode-focusBorder);
}

.product-ui .monaco-editor .suggest-details a {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-editor .suggest-details a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.product-ui .monaco-editor .suggest-details code {
	background-color: var(--vscode-textCodeBlock-background);
}

.product-ui .monaco-editor .suggest-details.no-docs {
	display: none;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element {
	flex: 1;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type {
	flex: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.7;
	white-space: pre;
	margin: 0 24px 0 0;
	padding: 4px 0 4px 5px;
}

.product-ui .monaco-editor .suggest-details.detail-and-doc > .monaco-scrollable-element > .body > .header > .type {
	padding-bottom: 12px;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type.auto-wrap {
	white-space: normal;
	word-break: break-all;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs {
	margin: 0;
	padding: 4px 5px;
	white-space: pre-wrap;
}

.product-ui .monaco-editor .suggest-details.no-type > .monaco-scrollable-element > .body > .docs {
	margin-right: 24px;
	overflow: hidden;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs {
	padding: 0;
	white-space: initial;
	min-height: calc(1rem + 8px);
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div,
.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > span:not(:empty) {
	padding: 4px 5px;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:first-child {
	margin-top: 0;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:last-child {
	margin-bottom: 0;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .monaco-tokenized-source {
	white-space: pre;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs .code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .codicon {
	vertical-align: sub;
}

.product-ui .monaco-editor .suggest-details > .monaco-scrollable-element > .body > p:empty {
	display: none;
}

.product-ui .monaco-editor .suggest-details code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.product-ui .monaco-editor .suggest-details ul {
	padding-left: 20px;
}

.product-ui .monaco-editor .suggest-details ol {
	padding-left: 20px;
}

.product-ui .monaco-editor .suggest-details p code {
	font-family: var(--monaco-monospace-font);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.product-ui .monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.product-ui .monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.product-ui .monaco-editor .ghost-text-hidden {
	opacity: 0;
	font-size: 0;
}

.product-ui .monaco-editor .ghost-text-decoration,
.product-ui .monaco-editor .suggest-preview-text .ghost-text {
	font-style: italic;
}

.product-ui .monaco-editor .suggest-preview-text.clickable .view-line {
	z-index: 1;
}

.product-ui .monaco-editor .ghost-text-decoration.clickable,
.product-ui .monaco-editor .ghost-text-decoration-preview.clickable,
.product-ui .monaco-editor .suggest-preview-text.clickable .ghost-text {
	cursor: pointer;
}

.product-ui .monaco-editor .inline-completion-text-to-replace {
	text-decoration: underline;
	text-underline-position: under;
}

.product-ui .monaco-editor .ghost-text-decoration,
.product-ui .monaco-editor .ghost-text-decoration-preview,
.product-ui .monaco-editor .suggest-preview-text .ghost-text {
	.product-ui &.syntax-highlighted {
		opacity: 0.7;
	}
	.product-ui &:not(.syntax-highlighted) {
		color: var(--vscode-editorGhostText-foreground);
	}
	background-color: var(--vscode-editorGhostText-background);
	border: 1px solid var(--vscode-editorGhostText-border);
}

.product-ui .monaco-editor .ghost-text-decoration.warning,
.product-ui .monaco-editor .ghost-text-decoration-preview.warning,
.product-ui .monaco-editor .suggest-preview-text .ghost-text.warning {
	background: var(--monaco-editor-warning-decoration) repeat-x bottom left;
	border-bottom: 4px double var(--vscode-editorWarning-border);
}

.product-ui .ghost-text-view-warning-widget-icon {
	.product-ui .codicon {
		color: var(--vscode-editorWarning-foreground) !important;
	}
}

.product-ui .monaco-editor {
	.product-ui .edits-fadeout-decoration {
		opacity: var(--animation-opacity, 1);
		background-color: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .sticky-widget {
	overflow: hidden;
	border-bottom: 1px solid var(--vscode-editorStickyScroll-border);
	width: 100%;
	box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px;
	z-index: 4;
	right: initial !important;
	margin-left: '0px';
}

.product-ui .monaco-editor .sticky-widget .sticky-widget-line-numbers {
	float: left;
	background-color: var(--vscode-editorStickyScrollGutter-background);
}

.product-ui .monaco-editor .sticky-widget.peek .sticky-widget-line-numbers {
	background-color: var(--vscode-peekViewEditorStickyScrollGutter-background);
}

.product-ui .monaco-editor .sticky-widget .sticky-widget-lines-scrollable {
	display: inline-block;
	position: absolute;
	overflow: hidden;
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: var(--vscode-editorStickyScroll-background);
}

.product-ui .monaco-editor .sticky-widget.peek .sticky-widget-lines-scrollable {
	background-color: var(--vscode-peekViewEditorStickyScroll-background);
}

.product-ui .monaco-editor .sticky-widget .sticky-widget-lines {
	position: absolute;
	background-color: inherit;
}

.product-ui .monaco-editor .sticky-widget .sticky-line-number,
.product-ui .monaco-editor .sticky-widget .sticky-line-content {
	color: var(--vscode-editorLineNumber-foreground);
	white-space: nowrap;
	display: inline-block;
	position: absolute;
	background-color: inherit;
}

.product-ui .monaco-editor .sticky-widget .sticky-line-number .codicon-folding-expanded,
.product-ui .monaco-editor .sticky-widget .sticky-line-number .codicon-folding-collapsed {
	float: right;
	transition: var(--vscode-editorStickyScroll-foldingOpacityTransition);
	position: absolute;
	margin-left: 2px;
}

.product-ui .monaco-editor .sticky-widget .sticky-line-content {
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: inherit;
	white-space: nowrap;
}

.product-ui .monaco-editor .sticky-widget .sticky-line-number-inner {
	display: inline-block;
	text-align: right;
}

.product-ui .monaco-editor .sticky-widget .sticky-line-content:hover {
	background-color: var(--vscode-editorStickyScrollHover-background);
	cursor: pointer;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	@keyframes blink { 50% { border-color: orange; }  }
*/

.product-ui .monaco-editor {
	.product-ui .inline-edits-view-indicator {
		display: flex;

		z-index: 34; /* Below the find widget */
		height: 20px;

		color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
		background-color: var(--vscode-inlineEdit-gutterIndicator-background);
		border: 1px solid var(--vscode-inlineEdit-gutterIndicator-primaryBorder);
		border-radius: 3px;

		align-items: center;
		padding: 2px;
		padding-right: 10px;
		margin: 0 4px;

		/*
		animation: blink 1s;
		animation-iteration-count: 3;
		*/

		opacity: 0;

		.product-ui &.contained {
			transition: opacity 0.2s ease-in-out;
			transition-delay: 0.4s;
		}

		.product-ui &.visible {
			opacity: 1;
		}

		.product-ui &.top {
			opacity: 1;

			.product-ui .icon {
				transform: rotate(90deg);
			}
		}

		.product-ui &.bottom {
			opacity: 1;

			.product-ui .icon {
				transform: rotate(-90deg);
			}
		}

		.product-ui .icon {
			display: flex;
			align-items: center;
			margin: 0 2px;
			transform: none;
			transition: transform 0.2s ease-in-out;
			.product-ui .codicon {
				color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
			}
		}

		.product-ui .label {
			margin: 0 2px;

			display: flex;
			justify-content: center;
			width: 100%;
		}
	}

	.product-ui .inline-edits-view .editorContainer {
		.product-ui .preview .monaco-editor {
			.product-ui .view-overlays .current-line-exact {
				border: none;
			}

			.product-ui .current-line-margin {
				border: none;
			}
		}

		.product-ui .inline-edits-view-zone.diagonal-fill {
			opacity: 0.5;
		}
	}

	.product-ui .strike-through {
		text-decoration: line-through;
	}

	.product-ui .inlineCompletions-line-insert {
		background: var(--vscode-inlineEdit-modifiedChangedLineBackground);
	}

	.product-ui .inlineCompletions-line-delete {
		background: var(--vscode-inlineEdit-originalChangedLineBackground);
	}

	.product-ui .inlineCompletions-char-insert {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
		cursor: pointer;
	}

	.product-ui .inlineCompletions-char-delete {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.product-ui .inlineCompletions-char-delete.diff-range-empty {
		margin-left: -1px;
		border-left: solid var(--vscode-inlineEdit-originalChangedTextBackground) 3px;
	}

	.product-ui .inlineCompletions-char-insert.diff-range-empty {
		border-left: solid var(--vscode-inlineEdit-modifiedChangedTextBackground) 3px;
	}

	.product-ui .inlineCompletions-char-delete.single-line-inline { /* Editor Decoration */
		border: 1px solid var(--vscode-editorHoverWidget-border);
		margin: -2px 0 0 -2px;
	}

	.product-ui .inlineCompletions-char-insert.single-line-inline { /* Inline Decoration */
		border-top: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
		border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.product-ui .inlineCompletions-char-insert.single-line-inline.start {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.product-ui .inlineCompletions-char-insert.single-line-inline.end {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}

	.product-ui .inlineCompletions-char-delete.single-line-inline.empty,
	.product-ui .inlineCompletions-char-insert.single-line-inline.empty {
		display: none;
	}

	.product-ui .inlineCompletions.strike-through {
		text-decoration-thickness: 1px;
	}

	/* line replacement bubbles */

	.product-ui .inlineCompletions-modified-bubble {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}

	.product-ui .inlineCompletions-original-bubble {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.product-ui .inlineCompletions-modified-bubble,
	.product-ui .inlineCompletions-original-bubble {
		pointer-events: none;
		display: inline-block;
	}

	.product-ui .inline-edit.ghost-text,
	.product-ui .inline-edit.ghost-text-decoration,
	.product-ui .inline-edit.ghost-text-decoration-preview,
	.product-ui .inline-edit.suggest-preview-text .ghost-text {
		.product-ui &.syntax-highlighted {
			opacity: 1 !important;
		}
		font-style: normal !important;
	}

	.product-ui .inline-edit.modified-background.ghost-text,
	.product-ui .inline-edit.modified-background.ghost-text-decoration,
	.product-ui .inline-edit.modified-background.ghost-text-decoration-preview,
	.product-ui .inline-edit.modified-background.suggest-preview-text .ghost-text {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground) !important;
		display: inline-block !important;
	}

	.product-ui .inlineCompletions-original-lines {
		background: var(--vscode-editor-background);
	}
}

.product-ui .monaco-menu-option {
	color: var(--vscode-editorActionList-foreground);
	font-size: 13px;
	padding: 0 4px;
	line-height: 28px;
	display: flex;
	gap: 4px;
	align-items: center;
	border-radius: 3px;
	cursor: pointer;

	.product-ui .monaco-keybinding-key {
		font-size: 13px;
		opacity: 0.7;
	}

	.product-ui &.active {
		background: var(--vscode-editorActionList-focusBackground);
		color: var(--vscode-editorActionList-focusForeground);
		outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
		outline-offset: -1px;

		.product-ui .monaco-keybinding-key {
			color: var(--vscode-editorActionList-focusForeground);
		}
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .goto-definition-link {
	text-decoration: underline;
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


.product-ui .monaco-editor.vs .valueSetReplacement {
	outline: solid 2px var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .linked-editing-decoration {
	background-color: var(--vscode-editor-linkedEditingBackground);

	/* Ensure decoration is visible even if range is empty */
	min-width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.product-ui .monaco-editor .detected-link,
.product-ui .monaco-editor .detected-link-active {
	text-decoration: underline;
	text-underline-position: under;
}

.product-ui .monaco-editor .detected-link-active {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor {
	.product-ui .scroll-editor-on-middle-click-dot {
		cursor: all-scroll;
		position: absolute;
		z-index: 1;
		background-color: var(--vscode-editor-foreground, white);
		border: 1px solid var(--vscode-editor-background, black);
		opacity: 0.5;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		transform: translate(-50%, -50%);

		.product-ui &.hidden {
			display: none;
		}
	}

	.product-ui &.scroll-editor-on-middle-click-editor * {
		cursor: all-scroll;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .focused .selectionHighlight {
	background-color: var(--vscode-editor-selectionHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-selectionHighlightBorder);
}
.product-ui .monaco-editor.hc-black .focused .selectionHighlight, .product-ui .monaco-editor.hc-light .focused .selectionHighlight {
	border-style: dotted;
}

.product-ui .monaco-editor .wordHighlight {
	background-color: var(--vscode-editor-wordHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightBorder);
}
.product-ui .monaco-editor.hc-black .wordHighlight, .product-ui .monaco-editor.hc-light .wordHighlight {
	border-style: dotted;
}

.product-ui .monaco-editor .wordHighlightStrong {
	background-color: var(--vscode-editor-wordHighlightStrongBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightStrongBorder);
}
.product-ui .monaco-editor.hc-black .wordHighlightStrong, .product-ui .monaco-editor.hc-light .wordHighlightStrong {
	border-style: dotted;
}

.product-ui .monaco-editor .wordHighlightText {
	background-color: var(--vscode-editor-wordHighlightTextBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightTextBorder);
}
.product-ui .monaco-editor.hc-black .wordHighlightText, .product-ui .monaco-editor.hc-light .wordHighlightText {
	border-style: dotted;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .parameter-hints-widget {
	/* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */
	z-index: 39;
	display: flex;
	flex-direction: column;
	line-height: 1.5em;
	cursor: default;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .hc-black .monaco-editor .parameter-hints-widget,
.product-ui .hc-light .monaco-editor .parameter-hints-widget {
	border-width: 2px;
}

.product-ui .monaco-editor .parameter-hints-widget > .phwrapper {
	max-width: 440px;
	display: flex;
	flex-direction: row;
}

.product-ui .monaco-editor .parameter-hints-widget.multiple {
	min-height: 3.3em;
	padding: 0;
}

.product-ui .monaco-editor .parameter-hints-widget.multiple .body::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	opacity: 0.5;
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .monaco-editor .parameter-hints-widget p,
.product-ui .monaco-editor .parameter-hints-widget ul {
	margin: 8px 0;
}

.product-ui .monaco-editor .parameter-hints-widget .monaco-scrollable-element,
.product-ui .monaco-editor .parameter-hints-widget .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 100%;
}

.product-ui .monaco-editor .parameter-hints-widget .signature {
	padding: 4px 5px;
	position: relative;
}

.product-ui .monaco-editor .parameter-hints-widget .signature.has-docs::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding-top: 4px;
	opacity: 0.5;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}

.product-ui .monaco-editor .parameter-hints-widget .code {
	font-family: var(--vscode-parameterHintsWidget-editorFontFamily), var(--vscode-parameterHintsWidget-editorFontFamilyDefault);
}

.product-ui .monaco-editor .parameter-hints-widget .docs {
	padding: 0 10px 0 5px;
	white-space: pre-wrap;
}

.product-ui .monaco-editor .parameter-hints-widget .docs.empty {
	display: none;
}

.product-ui .monaco-editor .parameter-hints-widget .docs a {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-editor .parameter-hints-widget .docs a:hover {
	color: var(--vscode-textLink-activeForeground);
	cursor: pointer;
}

.product-ui .monaco-editor .parameter-hints-widget .docs .markdown-docs {
	white-space: initial;
}

.product-ui .monaco-editor .parameter-hints-widget .docs code {
	font-family: var(--monaco-monospace-font);
	border-radius: 3px;
	padding: 0 0.4em;
	background-color: var(--vscode-textCodeBlock-background);
}

.product-ui .monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source,
.product-ui .monaco-editor .parameter-hints-widget .docs .code {
	white-space: pre-wrap;
}

.product-ui .monaco-editor .parameter-hints-widget .controls {
	display: none;
	flex-direction: column;
	align-items: center;
	min-width: 22px;
	justify-content: flex-end;
}

.product-ui .monaco-editor .parameter-hints-widget.multiple .controls {
	display: flex;
	padding: 0 2px;
}

.product-ui .monaco-editor .parameter-hints-widget.multiple .button {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.product-ui .monaco-editor .parameter-hints-widget .button.previous {
	bottom: 24px;
}

.product-ui .monaco-editor .parameter-hints-widget .overloads {
	text-align: center;
	height: 12px;
	line-height: 12px;
	font-family: var(--monaco-monospace-font);
}

.product-ui .monaco-editor .parameter-hints-widget .signature .parameter.active {
	color: var(--vscode-editorHoverWidget-highlightForeground);
	font-weight: bold;
}

.product-ui .monaco-editor .parameter-hints-widget .documentation-parameter > .parameter {
	font-weight: bold;
	margin-right: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor {
	.product-ui .editorPlaceholder {
		top: 0px;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
		pointer-events: none;

		color: var(--vscode-editor-placeholder-foreground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .rename-box {
	z-index: 100;
	color: inherit;
	border-radius: 4px;
}

.product-ui .monaco-editor .rename-box.preview {
	padding: 4px 4px 0 4px;
}

.product-ui .monaco-editor .rename-box .rename-input-with-button {
	padding: 3px;
	border-radius: 2px;
	width: calc(100% - 8px); /* 4px padding on each side */
}

.product-ui .monaco-editor .rename-box .rename-input {
	width: calc(100% - 8px); /* 4px padding on each side */
	padding: 0;
}

.product-ui .monaco-editor .rename-box .rename-input:focus {
	outline: none;
}

.product-ui .monaco-editor .rename-box .rename-suggestions-button {
	display: flex;
	align-items: center;
	padding: 3px;
	background-color: transparent;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.product-ui .monaco-editor .rename-box .rename-suggestions-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground)
}

.product-ui .monaco-editor .rename-box .rename-candidate-list-container .monaco-list-row {
	border-radius: 2px;
}

.product-ui .monaco-editor .rename-box .rename-label {
	display: none;
	opacity: .8;
}

.product-ui .monaco-editor .rename-box.preview .rename-label {
	display: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .unicode-highlight {
	border: 1px solid var(--vscode-editorUnicodeHighlight-border);
	background-color: var(--vscode-editorUnicodeHighlight-background);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .editor-banner {
	box-sizing: border-box;
	cursor: default;
	width: 100%;
	font-size: 12px;
	display: flex;
	overflow: visible;

	height: 26px;

	background: var(--vscode-banner-background);
}


.product-ui .editor-banner .icon-container {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 6px 0 10px;
}

.product-ui .editor-banner .icon-container.custom-icon {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
	width: 16px;
	padding: 0;
	margin: 0 6px 0 10px;
}

.product-ui .editor-banner .message-container {
	display: flex;
	align-items: center;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.product-ui .editor-banner .message-container p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.product-ui .editor-banner .message-actions-container {
	flex-grow: 1;
	flex-shrink: 0;
	line-height: 26px;
	margin: 0 4px;
}

.product-ui .editor-banner .message-actions-container a.monaco-button {
	width: inherit;
	margin: 2px 8px;
	padding: 0px 12px;
}

.product-ui .editor-banner .message-actions-container a {
	padding: 3px;
	margin-left: 12px;
	text-decoration: underline;
}

.product-ui .editor-banner .action-container {
	padding: 0 10px 0 6px;
}

.product-ui .editor-banner {
	background-color: var(--vscode-banner-background);
}

.product-ui .editor-banner,
.product-ui .editor-banner .action-container .codicon,
.product-ui .editor-banner .message-actions-container .monaco-link {
	color: var(--vscode-banner-foreground);
}

.product-ui .editor-banner .icon-container .codicon {
	color: var(--vscode-banner-iconForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-link {
	color: var(--vscode-textLink-foreground);
}

.product-ui .monaco-link:hover {
	color: var(--vscode-textLink-activeForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .floating-menu-overlay-widget {
	padding: 0px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	border-radius: 2px;
	border: 1px solid var(--vscode-contrastBorder);
	display: flex;
	align-items: center;
	z-index: 10;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
	overflow: hidden;

	.product-ui .action-item > .action-label {
		padding: 5px;
		font-size: 12px;
		border-radius: 2px;
	}

	.product-ui .action-item > .action-label.codicon {
		color: var(--vscode-button-foreground);
	}

	.product-ui .action-item > .action-label.codicon:not(.separator) {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.product-ui .action-item:first-child > .action-label {
		padding-left: 7px;
	}

	.product-ui .action-item:last-child > .action-label {
		padding-right: 7px;
	}

	.product-ui .action-item .action-label.separator {
		background-color: var(--vscode-menu-separatorBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .iPadShowKeyboard {
	width: 58px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	resize: none;
	overflow: hidden;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjNDI0MjQyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #F6F6F6;
	border-radius: 4px;
}

.product-ui .monaco-editor.vs-dark .iPadShowKeyboard {
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjQzVDNUM1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #252526;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.product-ui .monaco-editor .tokens-inspect-widget {
	z-index: 50;
	-moz-user-select: text;
	     user-select: text;
	-webkit-user-select: text;
	padding: 10px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}
.product-ui .monaco-editor.hc-black .tokens-inspect-widget, .product-ui .monaco-editor.hc-light .tokens-inspect-widget {
	border-width: 2px;
}

.product-ui .monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
	height: 1px;
	border: 0;
	background-color: var(--vscode-editorHoverWidget-border);
}

.product-ui .monaco-editor .tokens-inspect-widget .tm-token {
	font-family: var(--monaco-monospace-font);
}

.product-ui .monaco-editor .tokens-inspect-widget .tm-token-length {
	font-weight: normal;
	font-size: 60%;
	float: right;
}

.product-ui .monaco-editor .tokens-inspect-widget .tm-metadata-table {
	width: 100%;
}

.product-ui .monaco-editor .tokens-inspect-widget .tm-metadata-value {
	font-family: var(--monaco-monospace-font);
	text-align: right;
}

.product-ui .monaco-editor .tokens-inspect-widget .tm-token-type {
	font-family: var(--monaco-monospace-font);
}
.product-ui, .product-ui :host {
  --fa-font-solid: normal 900 1em/1 'Font Awesome 7 Free';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 7 Free';
  --fa-font-light: normal 300 1em/1 'Font Awesome 7 Pro';
  --fa-font-thin: normal 100 1em/1 'Font Awesome 7 Pro';
  --fa-font-duotone: normal 900 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-regular: normal 400 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-light: normal 300 1em/1 'Font Awesome 7 Duotone';
  --fa-font-duotone-thin: normal 100 1em/1 'Font Awesome 7 Duotone';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 7 Brands';
  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-light: normal 300 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 7 Sharp';
  --fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 7 Sharp Duotone';
  --fa-font-slab-regular: normal 400 1em/1 'Font Awesome 7 Slab';
  --fa-font-slab-press-regular: normal 400 1em/1 'Font Awesome 7 Slab Press';
  --fa-font-whiteboard-semibold: normal 600 1em/1 'Font Awesome 7 Whiteboard';
  --fa-font-thumbprint-light: normal 300 1em/1 'Font Awesome 7 Thumbprint';
  --fa-font-notdog-solid: normal 900 1em/1 'Font Awesome 7 Notdog';
  --fa-font-notdog-duo-solid: normal 900 1em/1 'Font Awesome 7 Notdog Duo';
  --fa-font-etch-solid: normal 900 1em/1 'Font Awesome 7 Etch';
  --fa-font-graphite-thin: normal 100 1em/1 'Font Awesome 7 Graphite';
  --fa-font-jelly-regular: normal 400 1em/1 'Font Awesome 7 Jelly';
  --fa-font-jelly-fill-regular: normal 400 1em/1 'Font Awesome 7 Jelly Fill';
  --fa-font-jelly-duo-regular: normal 400 1em/1 'Font Awesome 7 Jelly Duo';
  --fa-font-chisel-regular: normal 400 1em/1 'Font Awesome 7 Chisel';
  --fa-font-utility-semibold: normal 600 1em/1 'Font Awesome 7 Utility';
  --fa-font-utility-duo-semibold: normal 600 1em/1 'Font Awesome 7 Utility Duo';
  --fa-font-utility-fill-semibold: normal 600 1em/1 'Font Awesome 7 Utility Fill';
}

.product-ui .svg-inline--fa {
  box-sizing: content-box;
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.product-ui .svg-inline--fa.fa-2xs {
  vertical-align: 0.1em;
}
.product-ui .svg-inline--fa.fa-xs {
  vertical-align: 0em;
}
.product-ui .svg-inline--fa.fa-sm {
  vertical-align: -0.0714285714em;
}
.product-ui .svg-inline--fa.fa-lg {
  vertical-align: -0.2em;
}
.product-ui .svg-inline--fa.fa-xl {
  vertical-align: -0.25em;
}
.product-ui .svg-inline--fa.fa-2xl {
  vertical-align: -0.3125em;
}
.product-ui .svg-inline--fa.fa-pull-left,
.product-ui .svg-inline--fa .fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}
.product-ui .svg-inline--fa.fa-pull-right,
.product-ui .svg-inline--fa .fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}
.product-ui .svg-inline--fa.fa-li {
  width: var(--fa-li-width, 2em);
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */
}

.product-ui .fa-layers-counter, .product-ui .fa-layers-text {
  display: inline-block;
  position: absolute;
  text-align: center;
}

.product-ui .fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.product-ui .fa-layers .svg-inline--fa {
  inset: 0;
  margin: auto;
  position: absolute;
  transform-origin: center center;
}

.product-ui .fa-layers-text {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.product-ui .fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-counter-scale, 0.25));
  transform-origin: top right;
}

.product-ui .fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom right;
}

.product-ui .fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom left;
}

.product-ui .fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top right;
}

.product-ui .fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top left;
}

.product-ui .fa-1x {
  font-size: 1em;
}

.product-ui .fa-2x {
  font-size: 2em;
}

.product-ui .fa-3x {
  font-size: 3em;
}

.product-ui .fa-4x {
  font-size: 4em;
}

.product-ui .fa-5x {
  font-size: 5em;
}

.product-ui .fa-6x {
  font-size: 6em;
}

.product-ui .fa-7x {
  font-size: 7em;
}

.product-ui .fa-8x {
  font-size: 8em;
}

.product-ui .fa-9x {
  font-size: 9em;
}

.product-ui .fa-10x {
  font-size: 10em;
}

.product-ui .fa-2xs {
  font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-xs {
  font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-sm {
  font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-lg {
  font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-xl {
  font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-2xl {
  font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.product-ui .fa-width-auto {
  --fa-width: auto;
}

.product-ui .fa-fw,
.product-ui .fa-width-fixed {
  --fa-width: 1.25em;
}

.product-ui .fa-ul {
  list-style-type: none;
  margin-inline-start: var(--fa-li-margin, 2.5em);
  padding-inline-start: 0;
}
.product-ui .fa-ul > li {
  position: relative;
}

.product-ui .fa-li {
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

/* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
/* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
.product-ui .fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.0625em);
  box-sizing: var(--fa-border-box-sizing, content-box);
  padding: var(--fa-border-padding, 0.1875em 0.25em);
}

.product-ui .fa-pull-left,
.product-ui .fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.product-ui .fa-pull-right,
.product-ui .fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.product-ui .fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.product-ui .fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.product-ui .fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.product-ui .fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.product-ui .fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.product-ui .fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.product-ui .fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.product-ui .fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.product-ui .fa-pulse,
.product-ui .fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .fa-beat,
  .product-ui .fa-bounce,
  .product-ui .fa-fade,
  .product-ui .fa-beat-fade,
  .product-ui .fa-flip,
  .product-ui .fa-pulse,
  .product-ui .fa-shake,
  .product-ui .fa-spin,
  .product-ui .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.product-ui .fa-rotate-90 {
  transform: rotate(90deg);
}

.product-ui .fa-rotate-180 {
  transform: rotate(180deg);
}

.product-ui .fa-rotate-270 {
  transform: rotate(270deg);
}

.product-ui .fa-flip-horizontal {
  transform: scale(-1, 1);
}

.product-ui .fa-flip-vertical {
  transform: scale(1, -1);
}

.product-ui .fa-flip-both,
.product-ui .fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.product-ui .fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.product-ui .svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1);
}

.product-ui .svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4);
}

.product-ui .svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4);
}

.product-ui .svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1);
}

.product-ui .svg-inline--fa mask .fa-primary,
.product-ui .svg-inline--fa mask .fa-secondary {
  fill: black;
}

.product-ui .svg-inline--fa.fa-inverse {
  fill: var(--fa-inverse, #fff);
}

.product-ui .fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.product-ui .fa-inverse {
  color: var(--fa-inverse, #fff);
}

.product-ui .svg-inline--fa.fa-stack-1x {
  --fa-width: 1.25em;
  height: 1em;
  width: var(--fa-width);
}
.product-ui .svg-inline--fa.fa-stack-2x {
  --fa-width: 2.5em;
  height: 2em;
  width: var(--fa-width);
}

.product-ui .fa-stack-1x,
.product-ui .fa-stack-2x {
  inset: 0;
  margin: auto;
  position: absolute;
  z-index: var(--fa-stack-z-index, auto);
}.product-ui *, .product-ui ::before, .product-ui ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.product-ui ::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

.product-ui *,
.product-ui ::before,
.product-ui ::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

.product-ui ::before,
.product-ui ::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

.product-ui,
.product-ui :host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

.product-ui .product-body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

.product-ui hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

.product-ui abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

.product-ui h1,
.product-ui h2,
.product-ui h3,
.product-ui h4,
.product-ui h5,
.product-ui h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

.product-ui a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

.product-ui b,
.product-ui strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

.product-ui code,
.product-ui kbd,
.product-ui samp,
.product-ui pre {
  font-family: SF Mono, Menlo, Monaco, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

.product-ui small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

.product-ui sub,
.product-ui sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.product-ui sub {
  bottom: -0.25em;
}

.product-ui sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

.product-ui table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

.product-ui button,
.product-ui input,
.product-ui optgroup,
.product-ui select,
.product-ui textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

.product-ui button,
.product-ui select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

.product-ui button,
.product-ui input:where([type='button']),
.product-ui input:where([type='reset']),
.product-ui input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

.product-ui :-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

.product-ui :-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

.product-ui progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

.product-ui ::-webkit-inner-spin-button,
.product-ui ::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

.product-ui [type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

.product-ui ::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

.product-ui ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

.product-ui summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

.product-ui blockquote,
.product-ui dl,
.product-ui dd,
.product-ui h1,
.product-ui h2,
.product-ui h3,
.product-ui h4,
.product-ui h5,
.product-ui h6,
.product-ui hr,
.product-ui figure,
.product-ui p,
.product-ui pre {
  margin: 0;
}

.product-ui fieldset {
  margin: 0;
  padding: 0;
}

.product-ui legend {
  padding: 0;
}

.product-ui ol,
.product-ui ul,
.product-ui menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
.product-ui dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

.product-ui textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

.product-ui input::-moz-placeholder, .product-ui textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

.product-ui input::placeholder,
.product-ui textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

.product-ui button,
.product-ui [role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
.product-ui :disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

.product-ui img,
.product-ui svg,
.product-ui video,
.product-ui canvas,
.product-ui audio,
.product-ui iframe,
.product-ui embed,
.product-ui object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

.product-ui img,
.product-ui video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
.product-ui [hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.product-ui {
  --color-surface-canvas: 20, 19, 18;
  --color-surface-sheet: 26, 25, 23;
  --color-surface-raised: 36, 35, 33;
  --color-surface-sunken: 39, 38, 36;
  --color-state-hover: rgba(255, 255, 255, 0.05);
  --color-state-selected: rgba(255, 255, 255, 0.08);
  --color-text-primary: 242, 240, 236;
  --color-text-secondary: 184, 180, 173;
  --color-text-tertiary: 160, 156, 149;
  --color-text-inverse: 26, 25, 23;
  --color-line-control: 51, 49, 46;
  --color-line-focus: 160, 156, 149;
  --color-action-primary: 242, 240, 236;
  --color-status-success: 95, 181, 126;
  --color-status-warning: 245, 166, 35;
  --color-status-danger: 239, 98, 82;
  --color-status-attention: 244, 122, 63;
  --color-data-1: 124, 156, 203;
}

.product-ui.light {
  --color-surface-canvas: 245, 244, 242;
  --color-surface-sheet: 252, 251, 249;
  --color-surface-raised: 255, 255, 254;
  --color-surface-sunken: 238, 236, 232;
  --color-state-hover: rgba(28, 26, 23, 0.04);
  --color-state-selected: rgba(28, 26, 23, 0.07);
  --color-text-primary: 28, 26, 23;
  --color-text-secondary: 92, 88, 82;
  --color-text-tertiary: 105, 100, 93;
  --color-text-inverse: 252, 251, 249;
  --color-line-control: 226, 223, 218;
  --color-line-focus: 105, 100, 93;
  --color-action-primary: 28, 26, 23;
  --color-status-success: 43, 115, 70;
  --color-status-warning: 160, 70, 6;
  --color-status-danger: 185, 28, 28;
  --color-status-attention: 184, 58, 10;
  --color-data-1: 47, 79, 127;
}
  .product-ui {
    /* Legacy status names, aliases of the semantic status tokens (#1632). */
    --color-success: var(--color-status-success);
    --color-error: var(--color-status-danger);
    --color-warning: var(--color-status-warning);
    /* Slack badge text — the brand's light aubergine reads on the dark canvas. */
    --color-slack-text: 215, 154, 221;
    /* Composer mention chip. Brand violet keeps the accent text above 4.5:1 here. */
    /* The workspace sheet: inset from the desk, its corner, and its lift. */
    --sheet-inset: 8px;
    --sheet-radius: 14px;
    --sheet-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2),
      0 3px 8px -3px rgba(0, 0, 0, 0.5);
    --mention-chip-bg: rgba(var(--color-text-primary), 0.18);

    /* transitions-dev: Text states swap */
    --text-swap-dur: 150ms;
    --text-swap-translate-y: 4px;
    --text-swap-blur: 2px;
    --text-swap-ease: ease-in-out;

    /* transitions-dev: Menu dropdowns */
    --dropdown-open-dur: 180ms;
    --dropdown-close-dur: 140ms;
    --dropdown-pre-scale: 0.98;
    --dropdown-closing-scale: 0.985;
    --dropdown-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* transitions-dev: Tabs sliding */
    --tabs-dur: 120ms;
    --tabs-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --tabs-text-muted: rgb(var(--color-text-tertiary));
    --tabs-text-active: rgb(var(--color-text-base));
    --tabs-bar-bg: transparent;
    --tabs-pill-bg: rgba(var(--color-line-control), 0.48);
  }

  .product-ui {
    color-scheme: dark;
    /* Legacy names, now aliases of the semantic tokens in packages/design-tokens
       (#1632). Text secondary/tertiary are defined there under the same names. */
    --color-text-base: var(--color-text-primary);
    --color-border: var(--color-line-control);
    --color-background-base: var(--color-surface-sheet);
    --color-background-surface: var(--color-surface-sheet);
    --color-background-elevated: var(--color-surface-raised);
    /* App canvas background / sidebar — night mode #0E0F11, deeper than the
       content surface (#1C1D1F). */
    --color-appBg: var(--color-surface-canvas);
    /*
     * The agent page shares the workspace content canvas in both themes. Keep
     * the semantic token so agent-specific overlays can track that surface
     * without introducing a second page background.
     */
    --color-agent-canvas: var(--color-background-base);
    --color-composer-surface: var(--color-surface-raised);
    /*
     * Team Activity heatmap: empty, then four steps of the data color mixed
     * into the sheet, so busier cells read as stronger without a second hue.
     */
    --color-heatmap-0: 39, 38, 36;
    --color-heatmap-1: 48, 54, 63;
    --color-heatmap-2: 67, 80, 99;
    --color-heatmap-3: 91, 111, 142;
    --color-heatmap-4: 124, 156, 203;
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
    /*
     * Primary-button interaction shades. On dark surfaces hover lightens the
     * fill and press darkens it. These flip in light mode (see html.light).
     */
    /* Sidebar item interaction overlays use the shared state tints. */
    --sidebar-overlay-hover: var(--color-state-hover);
    --sidebar-overlay-active: var(--color-state-selected);
    --sidebar-overlay-focus: var(--color-state-hover);
    /*
     * Raised-surface edge. Alpha rather than a fixed color so the same value
     * works over any backdrop, and so depth comes from the shadow instead of
     * from a high-contrast line.
     */
    --surface-hairline: rgba(255, 255, 255, 0.09);
    --surface-hairline-strong: rgba(255, 255, 255, 0.16);
    --surface-inner-highlight: rgba(255, 255, 255, 0.045);
    --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 28px -14px rgba(0, 0, 0, 0.65);
    --surface-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.32), 0 16px 40px -16px rgba(0, 0, 0, 0.75);
    /* Cast leftwards onto whatever is sliding under a pinned column — the only
       cue that columns are hiding under there. A gradient rather than a drop
       shadow: a shadow blurs away at each cell's top and bottom, and a pinned
       column is one cell per row, so it would scallop down the table instead
       of reading as one edge. */
    --table-sticky-shade: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.012) 40%,
      rgba(0, 0, 0, 0.045) 66%,
      rgba(0, 0, 0, 0.105) 86%,
      rgba(0, 0, 0, 0.2) 100%
    );
    --composer-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 36px -20px rgba(0, 0, 0, 0.5);
    --composer-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.22), 0 18px 44px -22px rgba(0, 0, 0, 0.6);
  }

  /*
   * Accessible fallback for interactive elements that have not opted into a
   * component-specific focus treatment. Without this, Chromium falls back to
   * the host OS accent color, so otherwise-identical controls can show a
   * different ring depending on both the element type and the user's macOS
   * settings. Tailwind utilities are emitted after the base layer and can
   * still intentionally replace this with a component-specific ring.
   */
  .product-ui :where(
    button,
    a[href],
    input:is([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file']),
    select,
    summary,
    [role='button'],
    [tabindex]:not([tabindex='-1'], input, textarea)
  ):focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgb(var(--color-line-focus));
  }

  /* Text-entry controls show focus themselves (a bordered field's focus: border,
     or an InputGroup wrapper's focus-within ring); an inset ring here would
     draw a hard rectangle inside every rounded wrapper. */
  .product-ui :where(input, textarea):focus-visible {
    outline: none;
  }

  /* Give otherwise-unstyled semantic controls a consistent shape as well as
     a consistent color. Component utilities emitted later still win (for
     example rounded-full icon buttons and bespoke segmented controls). */
  .product-ui :where(button, a[href], summary, [role='button'], [role='link']):focus-visible {
    border-radius: 0.375rem;
  }

  /*
   * Light theme. Semantic colors switch in packages/design-tokens; this block
   * keeps only the light values still local to Desktop.
   */
  .product-ui.light {
    color-scheme: light;
    /* Heatmap: the same data steps over the light sheet. */
    --color-heatmap-0: 238, 236, 232;
    --color-heatmap-1: 207, 213, 222;
    --color-heatmap-2: 166, 179, 198;
    --color-heatmap-3: 117, 137, 168;
    --color-heatmap-4: 47, 79, 127;
    --scrollbar-thumb: rgba(36, 35, 38, 0.16);
    --scrollbar-thumb-hover: rgba(36, 35, 38, 0.26);
    /*
     * On a light canvas a lighter hover would wash the button out, so both
     * hover and press darken the fill (press goes one rung deeper).
     */

    /* The dark-mode Slack pink is 1.7:1 on its own light tint; use the brand
       aubergine instead. */
    --color-slack-text: 97, 31, 105;
    --sheet-shadow:
      0 0 0 1px rgba(28, 26, 23, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04),
      0 3px 8px -3px rgba(0, 0, 0, 0.1);
    /* A light ink tint, matching the @member chip. */
    --mention-chip-bg: rgba(var(--color-text-primary), 0.1);

    /* Black alpha on the light canvas; shadows tinted cool rather than neutral. */
    --surface-hairline: rgba(0, 0, 0, 0.07);
    --surface-hairline-strong: rgba(0, 0, 0, 0.14);
    --surface-inner-highlight: rgba(255, 255, 255, 0.9);
    --surface-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px -12px rgba(16, 24, 40, 0.14);
    --table-sticky-shade: linear-gradient(
      to right,
      rgba(16, 24, 40, 0) 0%,
      rgba(16, 24, 40, 0.004) 40%,
      rgba(16, 24, 40, 0.015) 66%,
      rgba(16, 24, 40, 0.035) 86%,
      rgba(16, 24, 40, 0.065) 100%
    );
    --surface-shadow-raised:
      0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 40px -14px rgba(16, 24, 40, 0.2);
    --composer-shadow: 0 1px 2px rgba(16, 24, 40, 0.035), 0 14px 36px -20px rgba(16, 24, 40, 0.1);
    --composer-shadow-raised:
      0 1px 2px rgba(16, 24, 40, 0.045), 0 18px 44px -22px rgba(16, 24, 40, 0.14);
  }

  .product-ui,
  .product-ui .product-body,
  .product-ui .product-root {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .product-ui .product-body {
    background-color: rgb(var(--color-background-base));
    color: rgb(var(--color-text-base));
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    /* Keep the lighter greyscale rendering across themes. Combined with the
       light theme's near-black token, this avoids the dense pure-black texture
       that made Pangea typography look heavier than Codex at the same weight. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    cursor: default;
  }

  .product-ui .cloud-logo-aws,
  .product-ui .cloud-logo-github,
  .product-ui .cloud-logo-tailscale,
  .product-ui .cloud-logo-zeabur {
    display: inline-flex;
  }

  .product-ui .cloud-logo-zeabur {
    box-sizing: border-box;
    padding: 2px;
  }

  .product-ui .cloud-logo-aws-light,
  .product-ui .cloud-logo-github-light,
  .product-ui .cloud-logo-tailscale-light,
  .product-ui .cloud-logo-zeabur-light {
    display: none;
  }

  .product-ui.light .cloud-logo-aws-dark,
  .product-ui.light .cloud-logo-github-dark,
  .product-ui.light .cloud-logo-tailscale-dark,
  .product-ui.light .cloud-logo-zeabur-dark {
    display: none;
  }

  .product-ui.light .cloud-logo-aws-light,
  .product-ui.light .cloud-logo-github-light,
  .product-ui.light .cloud-logo-tailscale-light,
  .product-ui.light .cloud-logo-zeabur-light {
    display: block;
  }

  /*
   * On macOS we set `vibrancy: 'sidebar'` on the BrowserWindow so the sidebar
   * can show the native blur. The vibrancy only shows through where the page
   * is transparent, so kill the body fill and let individual surfaces
   * (sidebar, toolbar, main content) opt into their own backgrounds.
   */
  .product-ui.platform-darwin,
  .product-ui.platform-darwin .product-body,
  .product-ui.platform-windows,
  .product-ui.platform-windows .product-body {
    background-color: transparent;
  }

  .product-ui input,
  .product-ui textarea,
  .product-ui [contenteditable],
  .product-ui pre,
  .product-ui code,
  .product-ui .selectable,
  .product-ui .selectable * {
    -moz-user-select: text;
         user-select: text;
    -webkit-user-select: text;
  }

  
  .product-ui .\!selectable,
  .product-ui .\!selectable * {
    -moz-user-select: text !important;
         user-select: text !important;
    -webkit-user-select: text !important;
  }

  .product-ui input,
  .product-ui textarea,
  .product-ui [contenteditable],
  .product-ui pre,
  .product-ui code {
    cursor: text;
  }

  .product-ui .\!selectable {
    cursor: default !important;
  }

  .product-ui .selectable {
    cursor: default;
  }

  .product-ui button:not(:disabled),
  .product-ui a,
  .product-ui [role='button']:not([aria-disabled='true']),
  .product-ui button:not(:disabled) *,
  .product-ui a *,
  .product-ui [role='button']:not([aria-disabled='true']) * {
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    /* Every enabled control shows the pointer, on the control and on its nested
       icons and text alike, so the cursor never splits between hand and arrow
       inside one button. Disabled controls fall back to their own cursor. */
    cursor: pointer !important;
  }
.product-ui .\!container {
  width: 100% !important;
}
.product-ui .container {
  width: 100%;
}
@container native-demo (min-width: 640px) {

  .product-ui .\!container {
    max-width: 640px !important;
  }

  .product-ui .container {
    max-width: 640px;
  }
}
@container native-demo (min-width: 768px) {

  .product-ui .\!container {
    max-width: 768px !important;
  }

  .product-ui .container {
    max-width: 768px;
  }
}
@container native-demo (min-width: 1024px) {

  .product-ui .\!container {
    max-width: 1024px !important;
  }

  .product-ui .container {
    max-width: 1024px;
  }
}
@container native-demo (min-width: 1280px) {

  .product-ui .\!container {
    max-width: 1280px !important;
  }

  .product-ui .container {
    max-width: 1280px;
  }
}
@container native-demo (min-width: 1536px) {

  .product-ui .\!container {
    max-width: 1536px !important;
  }

  .product-ui .container {
    max-width: 1536px;
  }
}
  /*
   * Raised surface (composer, attachment chips). The edge is a hairline plus a
   * two-layer shadow — contact and depth — so the box reads as lifted instead
   * of outlined, and an inner top highlight gives it a light direction.
   */
  .product-ui .surface-raised {
    border: 1px solid var(--surface-hairline);
    /* Continuous curvature; the corner flows out of the edge with no joint. */
    corner-shape: squircle;
    box-shadow:
      inset 0 1px 0 var(--surface-inner-highlight),
      var(--surface-shadow);
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease;
  }

  /* Session find (SessionFindBar): every match, then the one stepped to. */
  .product-ui ::highlight(session-find) {
    background-color: rgb(250 204 21 / 0.35);
  }

  .product-ui ::highlight(session-find-current) {
    background-color: rgb(249 115 22 / 0.85);
    color: #000;
  }

  .product-ui .composer-attached-strip {
    background-color: rgb(var(--color-composer-surface) / 0.5);
  }

  .product-ui.light .composer-attached-strip {
    background-color: rgb(244, 244, 246);
  }

  .product-ui .composer-surface {
    box-shadow:
      inset 0 1px 0 var(--surface-inner-highlight),
      var(--composer-shadow);
  }

  /* On 2x displays 1px is two device pixels; .5px is a true hairline. */
  @media (min-resolution: 2dppx) {
    .product-ui .surface-raised {
      border-width: 0.5px;
    }
  }

  /* Hovering the composer promises the same thing focusing it delivers, so it
     lights the same edge. Scoped to `.composer-surface` — a raised surface is
     not a control in general, and menus and cards have no business reacting to
     a pointer passing over them. */
  .product-ui .composer-surface:hover {
    border-color: var(--surface-hairline-strong);
  }

  .product-ui .surface-raised:focus-within {
    border-color: var(--surface-hairline-strong);
    box-shadow:
      inset 0 1px 0 var(--surface-inner-highlight),
      var(--surface-shadow-raised);
  }
  .product-ui .composer-surface:focus-within {
    box-shadow:
      inset 0 1px 0 var(--surface-inner-highlight),
      var(--composer-shadow-raised);
  }

  .product-ui .user-message-bubble {
    /* Both bubble fills are dark, even when the surrounding app is light, so
       the text tokens are pinned to light values: links and chips inside use
       text-primary, which is ink in the light theme and vanishes on the fill. */
    --color-text-base: 255, 255, 255;
    --color-text-primary: 255, 255, 255;
    --color-text-secondary: 184, 180, 173;
    --color-text-tertiary: 160, 156, 149;
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* A link is the same white as the text around it; the underline marks it. */
  .product-ui .user-message-bubble a:not(.atlas-mention) {
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 2px;
  }

  .product-ui .user-message-bubble a:not(.atlas-mention):hover {
    text-decoration-color: currentColor;
  }

  .product-ui.light .user-message-bubble {
    background-color: #000000;
  }

  .product-ui .resource-meter {
    --resource-meter-fill: rgb(var(--color-data-1));
    --resource-meter-warning: rgb(var(--color-warning));
  }

  .product-ui .resource-meter-track {
    background: rgba(var(--color-text-base), 0.06);
  }

  .product-ui .resource-meter-reserved {
    background: rgba(var(--color-text-primary), 0.13);
  }

  .product-ui .resource-meter-request {
    background: rgb(var(--color-text-secondary));
    box-shadow: 0 0 0 1px rgb(var(--color-background-base));
  }

  /* Composer (contenteditable) placeholder. */
  .product-ui .atlas-composer:empty::before {
    content: attr(data-placeholder);
    color: rgba(var(--color-text-tertiary), 1);
    pointer-events: none;
  }
  .product-ui .atlas-composer {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Inline mention chip rendered inside the composer for Pangea row links. */
  .product-ui .atlas-mention {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.55rem 0.05rem 0.4rem;
    margin: 0 1px;
    border-radius: 0.375rem;
    background-color: var(--mention-chip-bg);
    color: rgba(var(--color-text-primary), 1);
    font-size: 12.5px;
    line-height: 1.35;
    /* A flex chip's baseline is its icon's bottom edge, so baseline alignment
       lifts it above the text. Middle centers it on the text's x-height. */
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;
    white-space: nowrap;
  }
  .product-ui .atlas-mention-icon {
    flex-shrink: 0;
    opacity: 0.95;
  }
  .product-ui .atlas-mention-avatar {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 1;
  }
  .product-ui .atlas-mention-label {
    display: inline-block;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .product-ui .atlas-mention:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgb(var(--color-line-focus));
  }
  /* A long paste: click it to read it, × takes it out. */
  .product-ui .atlas-mention[data-pasted-text],
  .product-ui button.atlas-mention {
    cursor: pointer;
  }
  .product-ui .atlas-mention[data-pasted-text] .atlas-mention-label,
  .product-ui button.atlas-mention .atlas-mention-label {
    max-width: none;
  }
  .product-ui .atlas-mention-remove {
    display: inline-flex;
    margin-right: -0.25rem;
    padding: 1px;
    border-radius: 0.25rem;
    opacity: 0.7;
  }
  .product-ui .atlas-mention-remove:hover {
    opacity: 1;
    background-color: rgba(var(--color-text-primary), 0.15);
  }

  .product-ui .user-message-bubble .atlas-mention {
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    margin: 0 0.15rem;
    border-radius: 0.5rem;
    background-color: rgba(var(--color-text-primary), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--color-text-primary), 0.18);
    font-size: 0.9em;
    line-height: 1.4;
    transition:
      background-color 150ms,
      box-shadow 150ms;
  }

  /* A chip on a row of its own (a pasted text) is a block, not a line of text. */
  .product-ui .user-message-bubble > .atlas-mention {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0;
  }

  .product-ui .user-message-bubble .atlas-mention-icon {
    width: 0.95em;
    height: 0.95em;
    opacity: 0.8;
  }

  .product-ui .user-message-bubble .atlas-mention[role='link']:hover {
    background-color: rgba(var(--color-text-primary), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--color-text-primary), 0.3);
  }

  .product-ui .user-message-bubble .atlas-mention:focus-visible {
    outline: 2px solid rgb(var(--color-text-primary));
    outline-offset: 2px;
  }

  @keyframes cell-flash {
    0% {
      background-color: rgba(var(--color-text-primary), 0.22);
    }
    100% {
      background-color: transparent;
    }
  }
  .product-ui .cell-flash {
    animation: cell-flash 700ms ease-out;
  }

  /*
   * Row background for `components/Table`. The tint lives in a custom property
   * rather than a `bg-*` class so the pinned actions cell can re-apply the
   * exact same value (see `.table-sticky-end`) — a sticky cell paints its own
   * backdrop and cannot show the row's through. Checked/selected rows set the
   * property inline, which outranks the hover rule below exactly the way the
   * old class ternary did.
   */
  .product-ui tr.table-row-tint {
    background-color: var(--row-tint, transparent);
  }
  .product-ui tr.table-row-tint:hover {
    --row-tint: rgb(var(--color-surface-sunken));
  }

  /*
   * A column pinned to an edge of the scroll pane, so it stays put while the
   * rest of the table scrolls sideways underneath it. Which edge and how far
   * from it are inline (columns stack), everything else is here.
   * Element-qualified so it outranks the `relative` utility the header cell
   * carries — utilities are emitted after this layer.
   *
   * A pinned cell brings its own backdrop: it has to hide the cells sliding
   * under it, and `background` on the <tr> stops at the row's own layer, so the
   * row's tint is repainted on top of that backdrop.
   */
  .product-ui td.table-sticky-end,
  .product-ui th.table-sticky-end {
    position: sticky;
    /*
     * Every header cell is `relative` (its resize handle needs a containing
     * block), so they all paint as positioned siblings in DOM order — and a
     * pinned column, being early in that order, would be painted over by the
     * very columns scrolling under it. Body cells are static and never had the
     * problem; the trailing run only escaped it by being last.
     */
    z-index: 1;
    background-color: rgb(var(--color-background-base));
  }
  /*
   * The row's tint, repainted over that backdrop. It rides a pseudo rather
   * than a second background layer so it animates: the row fades its own
   * `background-color` in and out (`transition-colors`), and a background
   * image cannot transition — the pinned cell would snap while the rest of
   * the row faded, and each would look like the other was lagging.
   *
   * `z-index: -1` puts it above the cell's backdrop and below its content;
   * `position: sticky` is what keeps that -1 contained. `inset: 0` covers the
   * padding box exactly — the row rule is the cell's own bottom border, which
   * sits outside that box, so nothing has to be left clear for it. Insetting
   * anyway left the tint 1px short, and a hovered row showed a pale seam along
   * the bottom of this cell alone.
   */
  .product-ui td.table-sticky-end::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--row-tint, transparent);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /*
   * The shade hangs off the innermost cell of a pinned run, over the columns
   * sliding past it — the ones stacked outside it would only shade their own
   * neighbours. Each edge shows its own only while something is actually
   * hidden under that side: a permanent edge on a table that draws no vertical
   * rules reads as a stray divider, and scrolled hard right the right-hand run
   * covers nothing at all.
   *
   * Square-ended and exactly cell-height (plus the row rule it has to cross),
   * so each row's picks up where the last left off and the run reads as one
   * unbroken edge. Its host cell therefore cannot clip — see the `pin` note
   * on `Column`.
   */
  .product-ui [data-scrolled-x-end] .table-sticky-end[data-sticky-edge='right']::before,
  .product-ui [data-scrolled-x-start] .table-sticky-end[data-sticky-edge='left']::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -1px;
    width: 28px;
    pointer-events: none;
    background-image: var(--table-sticky-shade);
  }
  .product-ui [data-scrolled-x-end] .table-sticky-end[data-sticky-edge='right']::before {
    right: 100%;
  }
  /* The same gradient, mirrored, on the other side: it falls away from the
     pinned run in both cases, so the left-hand one runs dark-to-light. */
  .product-ui [data-scrolled-x-start] .table-sticky-end[data-sticky-edge='left']::before {
    left: 100%;
    transform: scaleX(-1);
  }
  /* A left-pinned header cell's own column divider lands exactly where its
     shade begins — two lines drawn for one edge. While the shade is up the
     divider stands down, and comes back on hover, where it stops being
     decoration and becomes the resize affordance. */
  .product-ui [data-scrolled-x-start]
    th.table-sticky-end[data-sticky-edge='left']
    .group:not(:hover)
    > .table-col-divider {
    background-color: transparent;
  }
  .product-ui [data-scrolled-x-start]
    th.table-sticky-end[data-sticky-edge='left']
    .\!group:not(:hover)
    > .table-col-divider {
    background-color: transparent !important;
  }

  /*
   * Table row/header checkboxes — custom-drawn instead of native so the
   * border and fill track the theme palette: the native rendering is too
   * dark in light mode and too bright in dark mode. Semantic tokens switch
   * with the theme, so one rule reads right in both.
   */
  .product-ui .table-checkbox {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    /* appearance: none leaves the UA's I-beam cursor on inputs. */
    cursor: default;
    /* The control line reads as a dim gray on dark and a light gray on light;
       hovering steps one notch toward the text color in both themes. */
    border: 1px solid rgb(var(--color-line-control));
    border-radius: 3px;
    background-color: transparent;
  }
  /* The whole cell is the hit target, so hovering anywhere in it (margin
     included) shows the checkbox's hover state. */
  .product-ui .table-checkbox:hover,
  .product-ui .table-checkbox-cell:hover .table-checkbox {
    border-color: rgb(var(--color-text-tertiary));
  }
  /* appearance: none also drops the native focus ring — restore one for
     keyboard users (and force visibility past the hover-only opacity). */
  .product-ui .table-checkbox:focus-visible {
    outline: 2px solid rgb(var(--color-text-primary));
    outline-offset: 2px;
    opacity: 1;
  }
  .product-ui .table-checkbox:checked,
  .product-ui .table-checkbox:indeterminate {
    border-color: rgb(var(--color-text-primary));
    background-color: rgb(var(--color-text-primary));
    background-repeat: no-repeat;
    background-position: center;
  }
  .product-ui .table-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  }
  .product-ui .table-checkbox:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' d='M3 6h6'/%3E%3C/svg%3E");
  }

  @keyframes codex-shimmer {
    0% {
      background-position: 160% 0;
    }
    100% {
      background-position: -160% 0;
    }
  }

  .product-ui .codex-shimmer-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: transparent;
    background-image: linear-gradient(
      90deg,
      rgb(var(--color-text-tertiary)) 0%,
      rgb(var(--color-text-tertiary)) 35%,
      rgb(var(--color-text-primary)) 50%,
      rgb(var(--color-text-tertiary)) 65%,
      rgb(var(--color-text-tertiary)) 100%
    );
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: codex-shimmer 1.45s linear infinite;
  }

  .product-ui .t-text-swap {
    display: inline-block;
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
    transition:
      transform var(--text-swap-dur) var(--text-swap-ease),
      filter var(--text-swap-dur) var(--text-swap-ease),
      opacity var(--text-swap-dur) var(--text-swap-ease);
    will-change: transform, filter, opacity;
  }
  .product-ui .t-text-swap.is-exit {
    transform: translateY(calc(var(--text-swap-translate-y) * -1));
    filter: blur(var(--text-swap-blur));
    opacity: 0;
  }
  .product-ui .t-text-swap.is-enter-start {
    transform: translateY(var(--text-swap-translate-y));
    filter: blur(var(--text-swap-blur));
    opacity: 0;
    transition: none;
  }

  @keyframes sd-atlas-stream-in {
    from {
      opacity: 0.08;
      filter: blur(2px);
      transform: translateY(2px);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }

  @keyframes atlas-stream-caret {
    0%,
    45% {
      opacity: 0.85;
    }
    46%,
    100% {
      opacity: 0.25;
    }
  }

  .product-ui .agent-streaming-response::after {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 1.05em;
    margin-left: 0.12em;
    border-radius: 999px;
    background: rgb(var(--color-text-secondary));
    vertical-align: -0.16em;
    animation: atlas-stream-caret 1s steps(2, end) infinite;
  }

  /* Streamdown's fenced code block (card > header, copy action, highlighted body),
     restyled to match the message surface. */
  .product-ui .message-response [data-streamdown='code-block'] {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  gap: 0px;
  border-radius: 0.375rem;
  border-width: 0px;
  background-color: rgba(var(--color-surface-sunken), 0.5);
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(var(--color-line-control), 0.5);
}

  .product-ui .message-response [data-streamdown='code-block-header'] {
  height: 1.75rem;
  border-bottom-width: 1px;
  border-color: rgba(var(--color-line-control), 0.4);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-family: SF Mono, Menlo, Monaco, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

  .product-ui .message-response [data-streamdown='code-block-header'] > span {
  margin-left: 0px;
  text-transform: uppercase;
}

  .product-ui .message-response [data-streamdown='code-block-actions'] {
  margin-right: 0.375rem;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
  --tw-backdrop-blur:  ;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

  .product-ui .message-response [data-streamdown='code-block-actions'] svg {
  height: 0.875rem;
  width: 0.875rem;
}

  .product-ui .message-response
    [data-streamdown='code-block']
    > div:has(> [data-streamdown='code-block-actions']) {
  margin-top: -1.75rem;
  height: 1.75rem;
}

  .product-ui .message-response [data-streamdown='code-block-body'] {
  border-radius: 0px;
  border-width: 0px;
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: SF Mono, Menlo, Monaco, monospace;
  font-size: 13.5px;
  line-height: 1.55;
}

  .product-ui .message-response [data-streamdown='code-block-body'] pre {
  margin: 0px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

  /* Without line numbers Streamdown leaves each line an inline span. */
  .product-ui .message-response [data-streamdown='code-block-body'] code > span {
  display: block;
}

  /* Streamdown switches tokens to the dark theme with `dark:`, but the app themes
     with `html.light`, so apply the dark colors here. */
  .product-ui:not(.light) .message-response [data-streamdown='code-block-body'] code > span > span {
    color: var(--shiki-dark, var(--sdm-c, inherit));
  }

  .product-ui .agent-streaming-response:has(pre:last-child)::after,
  .product-ui .agent-streaming-response:has(table:last-child)::after {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-ui .codex-shimmer-text {
      color: rgb(var(--color-text-secondary));
      background-image: none;
      animation: none;
    }

    .product-ui .t-text-swap {
      transition: none !important;
    }

    .product-ui .agent-streaming-response::after {
      animation: none;
    }
  }

  .product-ui .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
  .product-ui .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .product-ui .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .product-ui .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    /* Floating pill: a full-radius thumb inset from the track by a transparent
       border (clipped to the padding box) so it reads like macOS. */
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
  }
  .product-ui .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  /* Overlay scrollbar (used by the sidebar nav): thumb hidden by default,
     revealed on hover or while actively scrolling (JS sets `data-scrolling`).
     Placed after `.scrollbar-thin` so the equal-specificity thumb rules below
     win by source order. */
  .product-ui .scrollbar-overlay {
    /* Always reserve the scrollbar gutter so element widths never shift when the
       scrollbar appears/disappears. On macOS (native overlay scrollbars) this is
       a no-op, so nothing regresses there. */
    scrollbar-gutter: stable;
    /* `.scrollbar-thin` sets a non-auto `scrollbar-color`; when that standard
       property is present Chromium may render the standard scrollbar and ignore
       the `::-webkit-scrollbar` thumb, keeping it visible. Hide it here too and
       restore the color on hover / while scrolling so both rendering paths agree. */
    scrollbar-color: transparent transparent;
  }
  .product-ui .scrollbar-overlay:hover,
  .product-ui .scrollbar-overlay[data-scrolling='true'] {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
  .product-ui .scrollbar-overlay::-webkit-scrollbar-thumb {
    background-color: transparent;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
  }
  .product-ui .scrollbar-overlay:hover::-webkit-scrollbar-thumb,
  .product-ui .scrollbar-overlay[data-scrolling='true']::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
  }
  .product-ui .scrollbar-overlay:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  /* Scrollable but with no visible scrollbar (used by the tab strip). */
  .product-ui .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .product-ui .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  /* Default scrollbars everywhere: the sidebar's look — a thin floating pill
     over a transparent track, hidden until the pointer is over the scroll
     container. Both rendering paths are styled the same way: Chromium prefers
     the standard `scrollbar-*` properties once they are set, and the -webkit
     rules keep the identical look wherever the engine takes that path instead
     (the same dual-path note as `.scrollbar-overlay` above). `:where()` keeps
     everything at zero specificity, so the `.scrollbar-thin` /
     `.scrollbar-overlay` / `.scrollbar-none` utilities still win on the
     elements that opt into them. Note this styles macOS too — styled
     scrollbars render as classic (space-taking) there, which is exactly the
     stable-gutter behavior the sidebar opted into. */
  .product-ui :where(*) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .product-ui :where(:hover) {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
  .product-ui :where(*)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .product-ui :where(*)::-webkit-scrollbar-track {
    background: transparent;
  }
  .product-ui :where(*)::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* Floating pill: full-radius thumb inset from the track by a transparent
       border (clipped to the padding box), like `.scrollbar-thin`. */
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
  }
  .product-ui :where(:hover)::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
  }
  .product-ui :where(:hover)::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }
  .product-ui :where(*)::-webkit-scrollbar-corner {
    background: transparent;
  }

  .product-ui .titlebar-drag {
    -webkit-app-region: drag;
  }
  .product-ui .titlebar-no-drag {
    -webkit-app-region: no-drag;
  }

  /* A collapsed dock retains its content for the width animation. Ancestor
     scrolling (e.g. scrollIntoView) can move that clipped content over the
     session header; Electron's drag regions do not respect overflow clipping. */
  .product-ui [data-dock-open='false'] .titlebar-drag {
    -webkit-app-region: no-drag;
  }

  /* Electron derives draggable regions geometrically from the layout, so an
     overlay's `no-drag` never cancels a `drag` region sitting underneath it —
     the same reason the settings overlay has to hide the whole app shell (see
     App.tsx). A titlebar strip that stays draggable while a popup is open
     therefore swallows the mouse press as a window drag, and the popup never
     sees the outside-press that should dismiss it (e.g. right-click a tab,
     then click the breadcrumb bar). Popups suspend every drag region for as
     long as they are mounted. */
  .product-ui.titlebar-drag-suspended .titlebar-drag {
    -webkit-app-region: no-drag;
  }

  /* Reserve room for the macOS traffic lights on the leading edge of the custom
     titlebar. Off macOS there are no traffic lights, so leading icons sit flush
     left (fixes them being pushed right on Windows). The insets are divided by
     --zoom-factor so they stay a fixed physical size under cmd +/- page zoom —
     the buttons are a constant OS size, so a scaling inset would drift away from
     them. (Their vertical position is tracked in electron/main.ts.) */
  .product-ui .titlebar-lead-pad {
    padding-left: 0;
  }
  /* Room for the macOS traffic lights, in two parts because they behave
     differently under zoom: the buttons' leading offset scales with the layout
     (14 CSS px, see trafficLightPositionFor in electron/main.ts), while the
     fixed-device portion includes the buttons plus breathing room beside them.
     Counter-scaling only that second part keeps the gap even without pushing
     the sidebar toggle too far away when zoomed in. Both resolve to their
     intended flat values at 100%. */
  .product-ui.platform-darwin:not(.window-fullscreen) .titlebar-lead-pad {
    padding-left: calc(14px + 54px / var(--zoom-factor, 1));
  }
  /* The same clearance as `.titlebar-lead-pad`, for the toggle that reappears
     in the tab strip once the sidebar is collapsed. It has to resolve to the
     sidebar header's own leading edge — that header's `px-3.5` plus its
     lead-pad — or the button jumps sideways on collapse and lands hard against
     the last traffic light. Split the same way, so both track zoom alike. */
  .product-ui .titlebar-lead-ml {
    margin-left: 0;
  }
  .product-ui.platform-darwin:not(.window-fullscreen) .titlebar-lead-ml {
    margin-left: calc(28px + 54px / var(--zoom-factor, 1));
  }

  /* Reserve room on the trailing edge of the tab strip for the Windows and
     Linux caption buttons (minimize/maximize/close) that the native title-bar
     overlay draws over the top-right of the window. macOS keeps the normal
     inset because its traffic lights sit on the leading edge. */
  .product-ui .titlebar-caption-pad {
    padding-right: 0.75rem;
  }
  .product-ui.platform-windows .titlebar-caption-pad,
  .product-ui.platform-linux .titlebar-caption-pad {
    padding-right: calc(138px / var(--zoom-factor, 1));
  }

  /* The workspace-dock toggle is viewport-anchored so opening the dock never
     pushes it left. The tab strip stops 4px short of it, so the dock's own
     trailing controls sit beside it. */
  .product-ui .workspace-dock-toggle {
    position: fixed;
    z-index: 40;
    top: calc(8px + var(--sheet-inset));
    right: calc(0.75rem + var(--sheet-inset));
  }
  .product-ui .workspace-dock-toggle-pad {
    padding-right: calc(2.5rem + 4px);
  }
  .product-ui.platform-windows .workspace-dock-toggle,
  .product-ui.platform-linux .workspace-dock-toggle {
    right: calc(138px / var(--zoom-factor, 1) + 0.75rem + var(--sheet-inset));
  }
  .product-ui.platform-windows .workspace-dock-toggle-pad,
  .product-ui.platform-linux .workspace-dock-toggle-pad {
    padding-right: calc(138px / var(--zoom-factor, 1) + 2.5rem + 4px);
  }

  .product-ui [data-base-ui-inert] {
    z-index: 999;
    -webkit-app-region: no-drag;
  }

  .product-ui .t-dropdown {
    transform-origin: top left;
    transform: scale(var(--dropdown-pre-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-open-dur) var(--dropdown-ease),
      opacity var(--dropdown-open-dur) var(--dropdown-ease);
    will-change: transform, opacity;
  }
  /* Dropdowns carry a strong dark shadow (tuned for dark mode). In light mode
     that reads far too heavy, so soften it to a light, diffuse drop shadow.
     More specific than the Tailwind `shadow-[...]` utility, so it wins. */
  .product-ui.light .t-dropdown {
    box-shadow:
      0 8px 24px -12px rgba(0, 0, 0, 0.16),
      0 2px 6px -3px rgba(0, 0, 0, 0.08);
  }
  .product-ui .t-dropdown[data-origin='top-right'] {
    transform-origin: top right;
  }
  .product-ui .t-dropdown[data-origin='top-center'] {
    transform-origin: top center;
  }
  .product-ui .t-dropdown[data-origin='bottom-left'] {
    transform-origin: bottom left;
  }
  .product-ui .t-dropdown[data-origin='bottom-center'] {
    transform-origin: bottom center;
  }
  .product-ui .t-dropdown[data-origin='bottom-right'] {
    transform-origin: bottom right;
  }
  .product-ui .t-dropdown.is-open,
  .product-ui .t-dropdown[data-state='open'],
  .product-ui .t-dropdown[data-open] {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  @starting-style {
    .product-ui .t-dropdown.is-open,
    .product-ui .t-dropdown[data-state='open'] {
      transform: scale(var(--dropdown-pre-scale));
      opacity: 0;
    }
  }
  /*
   * Base UI popups (Menu/Select/Combobox) tag the entering frame with
   * `data-starting-style` and the leaving frame with `data-ending-style`.
   * These rules sit after `.is-open` so they win on those frames, giving the
   * popup a collapsed "from"/"to" state to transition against.
   */
  .product-ui .t-dropdown[data-starting-style] {
    transform: scale(var(--dropdown-pre-scale));
    opacity: 0;
  }
  .product-ui .t-dropdown[data-ending-style] {
    transform: scale(var(--dropdown-closing-scale));
    opacity: 0;
    transition:
      transform var(--dropdown-close-dur) var(--dropdown-ease),
      opacity var(--dropdown-close-dur) var(--dropdown-ease);
  }
  .product-ui .t-dropdown.is-closing,
  .product-ui .t-dropdown[data-state='closed'] {
    transform: scale(var(--dropdown-closing-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-close-dur) var(--dropdown-ease),
      opacity var(--dropdown-close-dur) var(--dropdown-ease);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-ui .t-dropdown {
      transition: none !important;
    }
  }

  /* transitions.dev toast: the running-shells chip rising into the composer toolbar. */
  .product-ui .t-toast {
    opacity: 0;
    transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
    filter: blur(var(--toast-blur));
    will-change: transform, opacity, filter;
    transition:
      opacity var(--toast-close) var(--toast-ease),
      transform var(--toast-close) var(--toast-ease),
      filter var(--toast-close) var(--toast-ease);
  }
  .product-ui .t-toast.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
      opacity var(--toast-open) var(--toast-ease),
      transform var(--toast-open) var(--toast-ease),
      filter var(--toast-open) var(--toast-ease);
  }
  /* Mounted already open, the chip still rises in from the toast's resting offset. */
  @starting-style {
    .product-ui .t-toast.is-open {
      opacity: 0;
      transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
      filter: blur(var(--toast-blur));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-ui .t-toast {
      transition: none !important;
    }
  }

  /* transitions.dev shimmer text, in the theme's own grays. */
  @keyframes t-shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0% 0;
    }
  }

  /*
   * App "canvas" surfaces — the login page, the sidebar, and the area behind
   * the floating content card all share one solid background (`appBg`) so they
   * read as the same surface. No macOS vibrancy bleed-through; the content card
   * (`bg-main`) is the only distinct surface floating on top.
   */
  .product-ui .login-surface,
  .product-ui .content-canvas {
    background-color: rgb(var(--color-appBg));
  }

  /* Dark mode stays opaque: the window's vibrancy blurs whatever sits behind
     it, so a light window there (a browser, say) bled through the 25% gap as a
     white glow that came and went with window order. */
  .product-ui .sidebar-surface {
    background-color: rgb(var(--color-appBg));
  }
  .product-ui.light .sidebar-surface {
    background-color: rgba(var(--color-appBg), 0.65);
  }
  /* Docked in light mode, the partial alpha lets the window's vibrancy through.
     Floating over the content while collapsed there is no vibrancy behind it —
     only the page, which then ghosts through the panel. Keep that state opaque. */
  .product-ui .sidebar-surface.is-floating,
  .product-ui.light .sidebar-surface.is-floating {
    background-color: rgb(var(--color-appBg));
  }

  /*
   * "Sketch" style dotted lines — a soft, evenly-spaced dot pattern used for
   * the composer's extending guide lines and as separators in the agent home
   * page list. Built as a radial-gradient background so we control dot size
   * and spacing explicitly (CSS `border-style: dotted` on a 1px border renders
   * too dense to read as dotted on most displays).
   */
  .product-ui .sketch-line-h {
    background-image: radial-gradient(
      circle,
      rgba(var(--color-text-tertiary), 0.35) 0.85px,
      transparent 1.3px
    );
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: top left;
  }
  .product-ui .sketch-divider-bottom {
    background-image: radial-gradient(
      circle,
      rgba(var(--color-text-tertiary), 0.35) 0.85px,
      transparent 1.3px
    );
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: bottom left;
  }
.product-ui .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.product-ui .pointer-events-none {
  pointer-events: none;
}
.product-ui .pointer-events-auto {
  pointer-events: auto;
}
.product-ui .\!visible {
  visibility: visible !important;
}
.product-ui .visible {
  visibility: visible;
}
.product-ui .invisible {
  visibility: hidden;
}
.product-ui .collapse {
  visibility: collapse;
}
.product-ui .static {
  position: static;
}
.product-ui .fixed {
  position: fixed;
}
.product-ui .absolute {
  position: absolute;
}
.product-ui .\!relative {
  position: relative !important;
}
.product-ui .relative {
  position: relative;
}
.product-ui .sticky {
  position: sticky;
}
.product-ui .inset-0 {
  inset: 0px;
}
.product-ui .inset-x-0 {
  left: 0px;
  right: 0px;
}
.product-ui .inset-x-12 {
  left: 3rem;
  right: 3rem;
}
.product-ui .inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.product-ui .inset-x-6 {
  left: 1.5rem;
  right: 1.5rem;
}
.product-ui .inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.product-ui .-bottom-0\.5 {
  bottom: -0.125rem;
}
.product-ui .-bottom-1 {
  bottom: -0.25rem;
}
.product-ui .-bottom-\[13px\] {
  bottom: -13px;
}
.product-ui .-left-0\.5 {
  left: -0.125rem;
}
.product-ui .-left-24 {
  left: -6rem;
}
.product-ui .-left-\[18px\] {
  left: -18px;
}
.product-ui .-left-\[999px\] {
  left: -999px;
}
.product-ui .-left-px {
  left: -1px;
}
.product-ui .-right-0\.5 {
  right: -0.125rem;
}
.product-ui .-right-1 {
  right: -0.25rem;
}
.product-ui .-right-1\.5 {
  right: -0.375rem;
}
.product-ui .-top-0\.5 {
  top: -0.125rem;
}
.product-ui .-top-1 {
  top: -0.25rem;
}
.product-ui .-top-1\.5 {
  top: -0.375rem;
}
.product-ui .-top-3 {
  top: -0.75rem;
}
.product-ui .-top-32 {
  top: -8rem;
}
.product-ui .-top-\[13px\] {
  top: -13px;
}
.product-ui .-top-\[3px\] {
  top: -3px;
}
.product-ui .bottom-0 {
  bottom: 0px;
}
.product-ui .bottom-0\.5 {
  bottom: 0.125rem;
}
.product-ui .bottom-1 {
  bottom: 0.25rem;
}
.product-ui .bottom-2 {
  bottom: 0.5rem;
}
.product-ui .bottom-3 {
  bottom: 0.75rem;
}
.product-ui .bottom-4 {
  bottom: 1rem;
}
.product-ui .bottom-6 {
  bottom: 1.5rem;
}
.product-ui .bottom-full {
  bottom: 100%;
}
.product-ui .left-0 {
  left: 0px;
}
.product-ui .left-0\.5 {
  left: 0.125rem;
}
.product-ui .left-1 {
  left: 0.25rem;
}
.product-ui .left-1\.5 {
  left: 0.375rem;
}
.product-ui .left-1\/2 {
  left: 50%;
}
.product-ui .left-14 {
  left: 3.5rem;
}
.product-ui .left-2 {
  left: 0.5rem;
}
.product-ui .left-2\.5 {
  left: 0.625rem;
}
.product-ui .left-3 {
  left: 0.75rem;
}
.product-ui .left-4 {
  left: 1rem;
}
.product-ui .left-\[11px\] {
  left: 11px;
}
.product-ui .left-\[17\.5px\] {
  left: 17.5px;
}
.product-ui .right-0 {
  right: 0px;
}
.product-ui .right-0\.5 {
  right: 0.125rem;
}
.product-ui .right-1 {
  right: 0.25rem;
}
.product-ui .right-1\.5 {
  right: 0.375rem;
}
.product-ui .right-2 {
  right: 0.5rem;
}
.product-ui .right-2\.5 {
  right: 0.625rem;
}
.product-ui .right-3 {
  right: 0.75rem;
}
.product-ui .right-3\.5 {
  right: 0.875rem;
}
.product-ui .right-4 {
  right: 1rem;
}
.product-ui .right-6 {
  right: 1.5rem;
}
.product-ui .right-full {
  right: 100%;
}
.product-ui .top-0 {
  top: 0px;
}
.product-ui .top-0\.5 {
  top: 0.125rem;
}
.product-ui .top-1 {
  top: 0.25rem;
}
.product-ui .top-1\.5 {
  top: 0.375rem;
}
.product-ui .top-1\/2 {
  top: 50%;
}
.product-ui .top-12 {
  top: 3rem;
}
.product-ui .top-2 {
  top: 0.5rem;
}
.product-ui .top-2\.5 {
  top: 0.625rem;
}
.product-ui .top-3 {
  top: 0.75rem;
}
.product-ui .top-3\.5 {
  top: 0.875rem;
}
.product-ui .top-4 {
  top: 1rem;
}
.product-ui .top-5 {
  top: 1.25rem;
}
.product-ui .top-6 {
  top: 1.5rem;
}
.product-ui .top-\[19px\] {
  top: 19px;
}
.product-ui .top-\[52px\] {
  top: 52px;
}
.product-ui .top-\[55px\] {
  top: 55px;
}
.product-ui .top-full {
  top: 100%;
}
.product-ui .isolate {
  isolation: isolate;
}
.product-ui .\!z-\[1100\] {
  z-index: 1100 !important;
}
.product-ui .-z-10 {
  z-index: -10;
}
.product-ui .z-0 {
  z-index: 0;
}
.product-ui .z-10 {
  z-index: 10;
}
.product-ui .z-20 {
  z-index: 20;
}
.product-ui .z-30 {
  z-index: 30;
}
.product-ui .z-40 {
  z-index: 40;
}
.product-ui .z-50 {
  z-index: 50;
}
.product-ui .z-\[1000\] {
  z-index: 1000;
}
.product-ui .z-\[1001\] {
  z-index: 1001;
}
.product-ui .z-\[100\] {
  z-index: 100;
}
.product-ui .z-\[1\] {
  z-index: 1;
}
.product-ui .z-\[2000\] {
  z-index: 2000;
}
.product-ui .z-\[2001\] {
  z-index: 2001;
}
.product-ui .z-\[2\] {
  z-index: 2;
}
.product-ui .z-\[5\] {
  z-index: 5;
}
.product-ui .z-\[900\] {
  z-index: 900;
}
.product-ui .col-span-2 {
  grid-column: span 2 / span 2;
}
.product-ui .col-span-5 {
  grid-column: span 5 / span 5;
}
.product-ui .col-start-1 {
  grid-column-start: 1;
}
.product-ui .row-start-1 {
  grid-row-start: 1;
}
.product-ui .row-start-2 {
  grid-row-start: 2;
}
.product-ui .float-right {
  float: right;
}
.product-ui .m-0 {
  margin: 0px;
}
.product-ui .m-1\.5 {
  margin: 0.375rem;
}
.product-ui .m-2 {
  margin: 0.5rem;
}
.product-ui .m-3 {
  margin: 0.75rem;
}
.product-ui .m-4 {
  margin: 1rem;
}
.product-ui .m-auto {
  margin: auto;
}
.product-ui .-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.product-ui .-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.product-ui .-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.product-ui .-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.product-ui .-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.product-ui .-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
.product-ui .-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.product-ui .-my-5 {
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}
.product-ui .mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.product-ui .mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.product-ui .mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.product-ui .mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.product-ui .mx-2\.5 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.product-ui .mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.product-ui .mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.product-ui .mx-\[10px\] {
  margin-left: 10px;
  margin-right: 10px;
}
.product-ui .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.product-ui .my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.product-ui .my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.product-ui .my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.product-ui .my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.product-ui .my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.product-ui .my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.product-ui .my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.product-ui .my-\[3px\] {
  margin-top: 3px;
  margin-bottom: 3px;
}
.product-ui .my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.product-ui .\!mt-0 {
  margin-top: 0px !important;
}
.product-ui .-mb-px {
  margin-bottom: -1px;
}
.product-ui .-ml-1 {
  margin-left: -0.25rem;
}
.product-ui .-ml-1\.5 {
  margin-left: -0.375rem;
}
.product-ui .-ml-2 {
  margin-left: -0.5rem;
}
.product-ui .-ml-2\.5 {
  margin-left: -0.625rem;
}
.product-ui .-mr-1 {
  margin-right: -0.25rem;
}
.product-ui .-mr-1\.5 {
  margin-right: -0.375rem;
}
.product-ui .-mt-1 {
  margin-top: -0.25rem;
}
.product-ui .-mt-10 {
  margin-top: -2.5rem;
}
.product-ui .-mt-3 {
  margin-top: -0.75rem;
}
.product-ui .mb-0\.5 {
  margin-bottom: 0.125rem;
}
.product-ui .mb-1 {
  margin-bottom: 0.25rem;
}
.product-ui .mb-1\.5 {
  margin-bottom: 0.375rem;
}
.product-ui .mb-2 {
  margin-bottom: 0.5rem;
}
.product-ui .mb-2\.5 {
  margin-bottom: 0.625rem;
}
.product-ui .mb-3 {
  margin-bottom: 0.75rem;
}
.product-ui .mb-4 {
  margin-bottom: 1rem;
}
.product-ui .mb-5 {
  margin-bottom: 1.25rem;
}
.product-ui .mb-6 {
  margin-bottom: 1.5rem;
}
.product-ui .mb-8 {
  margin-bottom: 2rem;
}
.product-ui .mb-\[42px\] {
  margin-bottom: 42px;
}
.product-ui .ml-0\.5 {
  margin-left: 0.125rem;
}
.product-ui .ml-1 {
  margin-left: 0.25rem;
}
.product-ui .ml-1\.5 {
  margin-left: 0.375rem;
}
.product-ui .ml-10 {
  margin-left: 2.5rem;
}
.product-ui .ml-2 {
  margin-left: 0.5rem;
}
.product-ui .ml-2\.5 {
  margin-left: 0.625rem;
}
.product-ui .ml-3 {
  margin-left: 0.75rem;
}
.product-ui .ml-4 {
  margin-left: 1rem;
}
.product-ui .ml-5 {
  margin-left: 1.25rem;
}
.product-ui .ml-auto {
  margin-left: auto;
}
.product-ui .mr-0\.5 {
  margin-right: 0.125rem;
}
.product-ui .mr-1 {
  margin-right: 0.25rem;
}
.product-ui .mr-1\.5 {
  margin-right: 0.375rem;
}
.product-ui .mr-2 {
  margin-right: 0.5rem;
}
.product-ui .mr-2\.5 {
  margin-right: 0.625rem;
}
.product-ui .mr-3 {
  margin-right: 0.75rem;
}
.product-ui .mr-auto {
  margin-right: auto;
}
.product-ui .mt-0\.5 {
  margin-top: 0.125rem;
}
.product-ui .mt-1 {
  margin-top: 0.25rem;
}
.product-ui .mt-1\.5 {
  margin-top: 0.375rem;
}
.product-ui .mt-10 {
  margin-top: 2.5rem;
}
.product-ui .mt-2 {
  margin-top: 0.5rem;
}
.product-ui .mt-2\.5 {
  margin-top: 0.625rem;
}
.product-ui .mt-3 {
  margin-top: 0.75rem;
}
.product-ui .mt-4 {
  margin-top: 1rem;
}
.product-ui .mt-5 {
  margin-top: 1.25rem;
}
.product-ui .mt-6 {
  margin-top: 1.5rem;
}
.product-ui .mt-8 {
  margin-top: 2rem;
}
.product-ui .mt-\[2px\] {
  margin-top: 2px;
}
.product-ui .mt-\[44px\] {
  margin-top: 44px;
}
.product-ui .mt-auto {
  margin-top: auto;
}
.product-ui .mt-px {
  margin-top: 1px;
}
.product-ui .box-border {
  box-sizing: border-box;
}
.product-ui .line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-ui .line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.product-ui .line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.product-ui .\!block {
  display: block !important;
}
.product-ui .block {
  display: block;
}
.product-ui .inline-block {
  display: inline-block;
}
.product-ui .\!inline {
  display: inline !important;
}
.product-ui .inline {
  display: inline;
}
.product-ui .flex {
  display: flex;
}
.product-ui .inline-flex {
  display: inline-flex;
}
.product-ui .table {
  display: table;
}
.product-ui .table-cell {
  display: table-cell;
}
.product-ui .table-row {
  display: table-row;
}
.product-ui .grid {
  display: grid;
}
.product-ui .contents {
  display: contents;
}
.product-ui .list-item {
  display: list-item;
}
.product-ui .hidden {
  display: none;
}
.product-ui .aspect-\[16\/7\] {
  aspect-ratio: 16/7;
}
.product-ui .aspect-square {
  aspect-ratio: 1 / 1;
}
.product-ui .size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.product-ui .size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.product-ui .size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.product-ui .size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.product-ui .size-4 {
  width: 1rem;
  height: 1rem;
}
.product-ui .size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.product-ui .size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.product-ui .size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.product-ui .size-8 {
  width: 2rem;
  height: 2rem;
}
.product-ui .size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.product-ui .size-full {
  width: 100%;
  height: 100%;
}
.product-ui .\!h-7 {
  height: 1.75rem !important;
}
.product-ui .\!h-\[60px\] {
  height: 60px !important;
}
.product-ui .h-0\.5 {
  height: 0.125rem;
}
.product-ui .h-1 {
  height: 0.25rem;
}
.product-ui .h-1\.5 {
  height: 0.375rem;
}
.product-ui .h-10 {
  height: 2.5rem;
}
.product-ui .h-11 {
  height: 2.75rem;
}
.product-ui .h-12 {
  height: 3rem;
}
.product-ui .h-14 {
  height: 3.5rem;
}
.product-ui .h-16 {
  height: 4rem;
}
.product-ui .h-2 {
  height: 0.5rem;
}
.product-ui .h-2\.5 {
  height: 0.625rem;
}
.product-ui .h-20 {
  height: 5rem;
}
.product-ui .h-24 {
  height: 6rem;
}
.product-ui .h-28 {
  height: 7rem;
}
.product-ui .h-3 {
  height: 0.75rem;
}
.product-ui .h-3\.5 {
  height: 0.875rem;
}
.product-ui .h-32 {
  height: 8rem;
}
.product-ui .h-4 {
  height: 1rem;
}
.product-ui .h-40 {
  height: 10rem;
}
.product-ui .h-44 {
  height: 11rem;
}
.product-ui .h-48 {
  height: 12rem;
}
.product-ui .h-5 {
  height: 1.25rem;
}
.product-ui .h-52 {
  height: 13rem;
}
.product-ui .h-56 {
  height: 14rem;
}
.product-ui .h-6 {
  height: 1.5rem;
}
.product-ui .h-7 {
  height: 1.75rem;
}
.product-ui .h-72 {
  height: 18rem;
}
.product-ui .h-8 {
  height: 2rem;
}
.product-ui .h-80 {
  height: 20rem;
}
.product-ui .h-9 {
  height: 2.25rem;
}
.product-ui .h-\[132px\] {
  height: 132px;
}
.product-ui .h-\[156px\] {
  height: 156px;
}
.product-ui .h-\[15px\] {
  height: 15px;
}
.product-ui .h-\[160px\] {
  height: 160px;
}
.product-ui .h-\[176px\] {
  height: 176px;
}
.product-ui .h-\[184px\] {
  height: 184px;
}
.product-ui .h-\[18px\] {
  height: 18px;
}
.product-ui .h-\[22px\] {
  height: 22px;
}
.product-ui .h-\[240px\] {
  height: 240px;
}
.product-ui .h-\[26px\] {
  height: 26px;
}
.product-ui .h-\[30px\] {
  height: 30px;
}
.product-ui .h-\[390px\] {
  height: 390px;
}
.product-ui .h-\[3px\] {
  height: 3px;
}
.product-ui .h-\[42px\] {
  height: 42px;
}
.product-ui .h-\[44px\] {
  height: 44px;
}
.product-ui .h-\[468px\] {
  height: 468px;
}
.product-ui .h-\[46px\] {
  height: 46px;
}
.product-ui .h-\[500px\] {
  height: 500px;
}
.product-ui .h-\[508px\] {
  height: 508px;
}
.product-ui .h-\[560px\] {
  height: 560px;
}
.product-ui .h-\[60px\] {
  height: 60px;
}
.product-ui .h-\[620px\] {
  height: 620px;
}
.product-ui .h-\[68px\] {
  height: 68px;
}
.product-ui .h-\[70px\] {
  height: 70px;
}
.product-ui .h-\[72px\] {
  height: 72px;
}
.product-ui .h-\[7px\] {
  height: 7px;
}
.product-ui .h-\[80vh\] {
  height: 80vh;
}
.product-ui .h-\[88px\] {
  height: 88px;
}
.product-ui .h-\[92px\] {
  height: 92px;
}
.product-ui .h-\[96px\] {
  height: 96px;
}
.product-ui .h-\[min\(640px\2c calc\(100vh-120px\)\)\] {
  height: min(640px, calc(100vh - 120px));
}
.product-ui .h-auto {
  height: auto;
}
.product-ui .h-full {
  height: 100%;
}
.product-ui .h-px {
  height: 1px;
}
.product-ui .max-h-0 {
  max-height: 0px;
}
.product-ui .max-h-12 {
  max-height: 3rem;
}
.product-ui .max-h-20 {
  max-height: 5rem;
}
.product-ui .max-h-24 {
  max-height: 6rem;
}
.product-ui .max-h-28 {
  max-height: 7rem;
}
.product-ui .max-h-32 {
  max-height: 8rem;
}
.product-ui .max-h-36 {
  max-height: 9rem;
}
.product-ui .max-h-40 {
  max-height: 10rem;
}
.product-ui .max-h-48 {
  max-height: 12rem;
}
.product-ui .max-h-52 {
  max-height: 13rem;
}
.product-ui .max-h-56 {
  max-height: 14rem;
}
.product-ui .max-h-60 {
  max-height: 15rem;
}
.product-ui .max-h-64 {
  max-height: 16rem;
}
.product-ui .max-h-72 {
  max-height: 18rem;
}
.product-ui .max-h-80 {
  max-height: 20rem;
}
.product-ui .max-h-96 {
  max-height: 24rem;
}
.product-ui .max-h-\[220px\] {
  max-height: 220px;
}
.product-ui .max-h-\[240px\] {
  max-height: 240px;
}
.product-ui .max-h-\[300px\] {
  max-height: 300px;
}
.product-ui .max-h-\[320px\] {
  max-height: 320px;
}
.product-ui .max-h-\[340px\] {
  max-height: 340px;
}
.product-ui .max-h-\[360px\] {
  max-height: 360px;
}
.product-ui .max-h-\[400px\] {
  max-height: 400px;
}
.product-ui .max-h-\[40vh\] {
  max-height: 40vh;
}
.product-ui .max-h-\[420px\] {
  max-height: 420px;
}
.product-ui .max-h-\[45\%\] {
  max-height: 45%;
}
.product-ui .max-h-\[480px\] {
  max-height: 480px;
}
.product-ui .max-h-\[508px\] {
  max-height: 508px;
}
.product-ui .max-h-\[50vh\] {
  max-height: 50vh;
}
.product-ui .max-h-\[52vh\] {
  max-height: 52vh;
}
.product-ui .max-h-\[60vh\] {
  max-height: 60vh;
}
.product-ui .max-h-\[70vh\] {
  max-height: 70vh;
}
.product-ui .max-h-\[80vh\] {
  max-height: 80vh;
}
.product-ui .max-h-\[var\(--available-height\)\] {
  max-height: var(--available-height);
}
.product-ui .max-h-full {
  max-height: 100%;
}
.product-ui .\!min-h-0 {
  min-height: 0px !important;
}
.product-ui .min-h-0 {
  min-height: 0px;
}
.product-ui .min-h-10 {
  min-height: 2.5rem;
}
.product-ui .min-h-24 {
  min-height: 6rem;
}
.product-ui .min-h-28 {
  min-height: 7rem;
}
.product-ui .min-h-4 {
  min-height: 1rem;
}
.product-ui .min-h-40 {
  min-height: 10rem;
}
.product-ui .min-h-44 {
  min-height: 11rem;
}
.product-ui .min-h-48 {
  min-height: 12rem;
}
.product-ui .min-h-64 {
  min-height: 16rem;
}
.product-ui .min-h-7 {
  min-height: 1.75rem;
}
.product-ui .min-h-8 {
  min-height: 2rem;
}
.product-ui .min-h-9 {
  min-height: 2.25rem;
}
.product-ui .min-h-\[120px\] {
  min-height: 120px;
}
.product-ui .min-h-\[160px\] {
  min-height: 160px;
}
.product-ui .min-h-\[180px\] {
  min-height: 180px;
}
.product-ui .min-h-\[18px\] {
  min-height: 18px;
}
.product-ui .min-h-\[200px\] {
  min-height: 200px;
}
.product-ui .min-h-\[220px\] {
  min-height: 220px;
}
.product-ui .min-h-\[280px\] {
  min-height: 280px;
}
.product-ui .min-h-\[30vh\] {
  min-height: 30vh;
}
.product-ui .min-h-\[360px\] {
  min-height: 360px;
}
.product-ui .min-h-\[36px\] {
  min-height: 36px;
}
.product-ui .min-h-\[44px\] {
  min-height: 44px;
}
.product-ui .min-h-\[50cqh\] {
  min-height: 50cqh;
}
.product-ui .min-h-\[520px\] {
  min-height: 520px;
}
.product-ui .min-h-\[52px\] {
  min-height: 52px;
}
.product-ui .min-h-\[76px\] {
  min-height: 76px;
}
.product-ui .min-h-full {
  min-height: 100%;
}
.product-ui .w-0\.5 {
  width: 0.125rem;
}
.product-ui .w-1 {
  width: 0.25rem;
}
.product-ui .w-1\.5 {
  width: 0.375rem;
}
.product-ui .w-10 {
  width: 2.5rem;
}
.product-ui .w-11 {
  width: 2.75rem;
}
.product-ui .w-12 {
  width: 3rem;
}
.product-ui .w-14 {
  width: 3.5rem;
}
.product-ui .w-16 {
  width: 4rem;
}
.product-ui .w-2 {
  width: 0.5rem;
}
.product-ui .w-2\.5 {
  width: 0.625rem;
}
.product-ui .w-2\/3 {
  width: 66.666667%;
}
.product-ui .w-20 {
  width: 5rem;
}
.product-ui .w-24 {
  width: 6rem;
}
.product-ui .w-28 {
  width: 7rem;
}
.product-ui .w-3 {
  width: 0.75rem;
}
.product-ui .w-3\.5 {
  width: 0.875rem;
}
.product-ui .w-32 {
  width: 8rem;
}
.product-ui .w-36 {
  width: 9rem;
}
.product-ui .w-4 {
  width: 1rem;
}
.product-ui .w-40 {
  width: 10rem;
}
.product-ui .w-44 {
  width: 11rem;
}
.product-ui .w-48 {
  width: 12rem;
}
.product-ui .w-5 {
  width: 1.25rem;
}
.product-ui .w-5\/6 {
  width: 83.333333%;
}
.product-ui .w-52 {
  width: 13rem;
}
.product-ui .w-56 {
  width: 14rem;
}
.product-ui .w-6 {
  width: 1.5rem;
}
.product-ui .w-64 {
  width: 16rem;
}
.product-ui .w-7 {
  width: 1.75rem;
}
.product-ui .w-72 {
  width: 18rem;
}
.product-ui .w-8 {
  width: 2rem;
}
.product-ui .w-80 {
  width: 20rem;
}
.product-ui .w-9 {
  width: 2.25rem;
}
.product-ui .w-\[100px\] {
  width: 100px;
}
.product-ui .w-\[104px\] {
  width: 104px;
}
.product-ui .w-\[110px\] {
  width: 110px;
}
.product-ui .w-\[140px\] {
  width: 140px;
}
.product-ui .w-\[150px\] {
  width: 150px;
}
.product-ui .w-\[15px\] {
  width: 15px;
}
.product-ui .w-\[170px\] {
  width: 170px;
}
.product-ui .w-\[180px\] {
  width: 180px;
}
.product-ui .w-\[18px\] {
  width: 18px;
}
.product-ui .w-\[200px\] {
  width: 200px;
}
.product-ui .w-\[220px\] {
  width: 220px;
}
.product-ui .w-\[22px\] {
  width: 22px;
}
.product-ui .w-\[230px\] {
  width: 230px;
}
.product-ui .w-\[240px\] {
  width: 240px;
}
.product-ui .w-\[260px\] {
  width: 260px;
}
.product-ui .w-\[264px\] {
  width: 264px;
}
.product-ui .w-\[268px\] {
  width: 268px;
}
.product-ui .w-\[26px\] {
  width: 26px;
}
.product-ui .w-\[28\%\] {
  width: 28%;
}
.product-ui .w-\[280px\] {
  width: 280px;
}
.product-ui .w-\[30\%\] {
  width: 30%;
}
.product-ui .w-\[300px\] {
  width: 300px;
}
.product-ui .w-\[304px\] {
  width: 304px;
}
.product-ui .w-\[30px\] {
  width: 30px;
}
.product-ui .w-\[320px\] {
  width: 320px;
}
.product-ui .w-\[340px\] {
  width: 340px;
}
.product-ui .w-\[360px\] {
  width: 360px;
}
.product-ui .w-\[40\%\] {
  width: 40%;
}
.product-ui .w-\[42\%\] {
  width: 42%;
}
.product-ui .w-\[420px\] {
  width: 420px;
}
.product-ui .w-\[430px\] {
  width: 430px;
}
.product-ui .w-\[44\%\] {
  width: 44%;
}
.product-ui .w-\[440px\] {
  width: 440px;
}
.product-ui .w-\[460px\] {
  width: 460px;
}
.product-ui .w-\[52px\] {
  width: 52px;
}
.product-ui .w-\[560px\] {
  width: 560px;
}
.product-ui .w-\[64px\] {
  width: 64px;
}
.product-ui .w-\[68px\] {
  width: 68px;
}
.product-ui .w-\[6ch\] {
  width: 6ch;
}
.product-ui .w-\[6px\] {
  width: 6px;
}
.product-ui .w-\[72px\] {
  width: 72px;
}
.product-ui .w-\[76px\] {
  width: 76px;
}
.product-ui .w-\[7px\] {
  width: 7px;
}
.product-ui .w-\[var\(--anchor-width\)\] {
  width: var(--anchor-width);
}
.product-ui .w-full {
  width: 100%;
}
.product-ui .w-max {
  width: -moz-max-content;
  width: max-content;
}
.product-ui .w-px {
  width: 1px;
}
.product-ui .min-w-0 {
  min-width: 0px;
}
.product-ui .min-w-3 {
  min-width: 0.75rem;
}
.product-ui .min-w-3\.5 {
  min-width: 0.875rem;
}
.product-ui .min-w-4 {
  min-width: 1rem;
}
.product-ui .min-w-5 {
  min-width: 1.25rem;
}
.product-ui .min-w-52 {
  min-width: 13rem;
}
.product-ui .min-w-56 {
  min-width: 14rem;
}
.product-ui .min-w-\[1120px\] {
  min-width: 1120px;
}
.product-ui .min-w-\[120px\] {
  min-width: 120px;
}
.product-ui .min-w-\[130px\] {
  min-width: 130px;
}
.product-ui .min-w-\[140px\] {
  min-width: 140px;
}
.product-ui .min-w-\[160px\] {
  min-width: 160px;
}
.product-ui .min-w-\[180px\] {
  min-width: 180px;
}
.product-ui .min-w-\[200px\] {
  min-width: 200px;
}
.product-ui .min-w-\[220px\] {
  min-width: 220px;
}
.product-ui .min-w-\[22px\] {
  min-width: 22px;
}
.product-ui .min-w-\[240px\] {
  min-width: 240px;
}
.product-ui .min-w-\[260px\] {
  min-width: 260px;
}
.product-ui .min-w-\[300px\] {
  min-width: 300px;
}
.product-ui .min-w-\[360px\] {
  min-width: 360px;
}
.product-ui .min-w-\[380px\] {
  min-width: 380px;
}
.product-ui .min-w-\[3rem\] {
  min-width: 3rem;
}
.product-ui .min-w-\[4\.5rem\] {
  min-width: 4.5rem;
}
.product-ui .min-w-\[40px\] {
  min-width: 40px;
}
.product-ui .min-w-\[72px\] {
  min-width: 72px;
}
.product-ui .min-w-\[84px\] {
  min-width: 84px;
}
.product-ui .min-w-\[96px\] {
  min-width: 96px;
}
.product-ui .min-w-\[var\(--anchor-width\)\] {
  min-width: var(--anchor-width);
}
.product-ui .min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}
.product-ui .max-w-24 {
  max-width: 6rem;
}
.product-ui .max-w-2xl {
  max-width: 42rem;
}
.product-ui .max-w-36 {
  max-width: 9rem;
}
.product-ui .max-w-3xl {
  max-width: 48rem;
}
.product-ui .max-w-40 {
  max-width: 10rem;
}
.product-ui .max-w-4xl {
  max-width: 56rem;
}
.product-ui .max-w-5xl {
  max-width: 64rem;
}
.product-ui .max-w-64 {
  max-width: 16rem;
}
.product-ui .max-w-6xl {
  max-width: 72rem;
}
.product-ui .max-w-72 {
  max-width: 18rem;
}
.product-ui .max-w-80 {
  max-width: 20rem;
}
.product-ui .max-w-\[10rem\] {
  max-width: 10rem;
}
.product-ui .max-w-\[110px\] {
  max-width: 110px;
}
.product-ui .max-w-\[1120px\] {
  max-width: 1120px;
}
.product-ui .max-w-\[120px\] {
  max-width: 120px;
}
.product-ui .max-w-\[12rem\] {
  max-width: 12rem;
}
.product-ui .max-w-\[1600px\] {
  max-width: 1600px;
}
.product-ui .max-w-\[160px\] {
  max-width: 160px;
}
.product-ui .max-w-\[16rem\] {
  max-width: 16rem;
}
.product-ui .max-w-\[170px\] {
  max-width: 170px;
}
.product-ui .max-w-\[180px\] {
  max-width: 180px;
}
.product-ui .max-w-\[18ch\] {
  max-width: 18ch;
}
.product-ui .max-w-\[200px\] {
  max-width: 200px;
}
.product-ui .max-w-\[210px\] {
  max-width: 210px;
}
.product-ui .max-w-\[220px\] {
  max-width: 220px;
}
.product-ui .max-w-\[240px\] {
  max-width: 240px;
}
.product-ui .max-w-\[260px\] {
  max-width: 260px;
}
.product-ui .max-w-\[280px\] {
  max-width: 280px;
}
.product-ui .max-w-\[300px\] {
  max-width: 300px;
}
.product-ui .max-w-\[32ch\] {
  max-width: 32ch;
}
.product-ui .max-w-\[340px\] {
  max-width: 340px;
}
.product-ui .max-w-\[380px\] {
  max-width: 380px;
}
.product-ui .max-w-\[390px\] {
  max-width: 390px;
}
.product-ui .max-w-\[40\%\] {
  max-width: 40%;
}
.product-ui .max-w-\[400px\] {
  max-width: 400px;
}
.product-ui .max-w-\[420px\] {
  max-width: 420px;
}
.product-ui .max-w-\[440px\] {
  max-width: 440px;
}
.product-ui .max-w-\[44ch\] {
  max-width: 44ch;
}
.product-ui .max-w-\[45\%\] {
  max-width: 45%;
}
.product-ui .max-w-\[480px\] {
  max-width: 480px;
}
.product-ui .max-w-\[50vw\] {
  max-width: 50vw;
}
.product-ui .max-w-\[520px\] {
  max-width: 520px;
}
.product-ui .max-w-\[560px\] {
  max-width: 560px;
}
.product-ui .max-w-\[60\%\] {
  max-width: 60%;
}
.product-ui .max-w-\[600px\] {
  max-width: 600px;
}
.product-ui .max-w-\[640px\] {
  max-width: 640px;
}
.product-ui .max-w-\[680px\] {
  max-width: 680px;
}
.product-ui .max-w-\[72ch\] {
  max-width: 72ch;
}
.product-ui .max-w-\[760px\] {
  max-width: 760px;
}
.product-ui .max-w-\[820px\] {
  max-width: 820px;
}
.product-ui .max-w-\[85\%\] {
  max-width: 85%;
}
.product-ui .max-w-\[860px\] {
  max-width: 860px;
}
.product-ui .max-w-\[880px\] {
  max-width: 880px;
}
.product-ui .max-w-\[96px\] {
  max-width: 96px;
}
.product-ui .max-w-\[calc\(100vw-24px\)\] {
  max-width: calc(100vw - 24px);
}
.product-ui .max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.product-ui .max-w-\[calc\(100vw-32px\)\] {
  max-width: calc(100vw - 32px);
}
.product-ui .max-w-\[min\(420px\2c calc\(100vw-32px\)\)\] {
  max-width: min(420px, calc(100vw - 32px));
}
.product-ui .max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.product-ui .max-w-full {
  max-width: 100%;
}
.product-ui .max-w-lg {
  max-width: 32rem;
}
.product-ui .max-w-md {
  max-width: 28rem;
}
.product-ui .max-w-none {
  max-width: none;
}
.product-ui .max-w-xl {
  max-width: 36rem;
}
.product-ui .flex-1 {
  flex: 1 1 0%;
}
.product-ui .flex-\[2\] {
  flex: 2;
}
.product-ui .flex-none {
  flex: none;
}
.product-ui .flex-shrink {
  flex-shrink: 1;
}
.product-ui .flex-shrink-0 {
  flex-shrink: 0;
}
.product-ui .shrink {
  flex-shrink: 1;
}
.product-ui .shrink-0 {
  flex-shrink: 0;
}
.product-ui .grow {
  flex-grow: 1;
}
.product-ui .basis-0 {
  flex-basis: 0px;
}
.product-ui .basis-16 {
  flex-basis: 4rem;
}
.product-ui .basis-52 {
  flex-basis: 13rem;
}
.product-ui .basis-full {
  flex-basis: 100%;
}
.product-ui .border-collapse {
  border-collapse: collapse;
}
.product-ui .border-separate {
  border-collapse: separate;
}
.product-ui .border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.product-ui .origin-bottom-left {
  transform-origin: bottom left;
}
.product-ui .origin-center {
  transform-origin: center;
}
.product-ui .origin-left {
  transform-origin: left;
}
.product-ui .origin-right {
  transform-origin: right;
}
.product-ui .origin-top-left {
  transform-origin: top left;
}
.product-ui .-translate-x-0\.5 {
  --tw-translate-x: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .translate-x-\[18px\] {
  --tw-translate-x: 18px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .translate-y-1\.5 {
  --tw-translate-y: 0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .translate-y-\[-1px\] {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .scale-\[0\.7\] {
  --tw-scale-x: 0.7;
  --tw-scale-y: 0.7;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.product-ui .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.product-ui .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.product-ui .animate-spin {
  animation: spin 1s linear infinite;
}
.product-ui .cursor-col-resize {
  cursor: col-resize;
}
.product-ui .cursor-default {
  cursor: default;
}
.product-ui .cursor-grab {
  cursor: grab;
}
.product-ui .cursor-move {
  cursor: move;
}
.product-ui .cursor-not-allowed {
  cursor: not-allowed;
}
.product-ui .cursor-pointer {
  cursor: pointer;
}
.product-ui .cursor-text {
  cursor: text;
}
.product-ui .cursor-wait {
  cursor: wait;
}
.product-ui .cursor-zoom-in {
  cursor: zoom-in;
}
.product-ui .cursor-zoom-out {
  cursor: zoom-out;
}
.product-ui .touch-none {
  touch-action: none;
}
.product-ui .select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.product-ui .select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.product-ui .select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.product-ui .resize-none {
  resize: none;
}
.product-ui .resize-y {
  resize: vertical;
}
.product-ui .resize {
  resize: both;
}
.product-ui .scroll-mt-3 {
  scroll-margin-top: 0.75rem;
}
.product-ui .list-inside {
  list-style-position: inside;
}
.product-ui .list-outside {
  list-style-position: outside;
}
.product-ui .list-decimal {
  list-style-type: decimal;
}
.product-ui .list-disc {
  list-style-type: disc;
}
.product-ui .appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.product-ui .columns-1 {
  -moz-columns: 1;
       columns: 1;
}
.product-ui .break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.product-ui .auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}
.product-ui .auto-rows-min {
  grid-auto-rows: min-content;
}
.product-ui .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.product-ui .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-ui .grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-ui .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-ui .grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.product-ui .grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.product-ui .grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.product-ui .grid-cols-\[112px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 112px minmax(0,1fr);
}
.product-ui .grid-cols-\[132px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 132px minmax(0,1fr);
}
.product-ui .grid-cols-\[140px\2c 1fr\] {
  grid-template-columns: 140px 1fr;
}
.product-ui .grid-cols-\[18px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 18px minmax(0,1fr);
}
.product-ui .grid-cols-\[280px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 280px minmax(0,1fr);
}
.product-ui .grid-cols-\[7rem_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 7rem minmax(0,1fr);
}
.product-ui .grid-cols-\[88px\2c 1fr\] {
  grid-template-columns: 88px 1fr;
}
.product-ui .grid-cols-\[92px_1fr\] {
  grid-template-columns: 92px 1fr;
}
.product-ui .grid-cols-\[92px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 92px minmax(0,1fr);
}
.product-ui .grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.product-ui .grid-cols-\[minmax\(0\2c 1fr\)_120px_90px\] {
  grid-template-columns: minmax(0,1fr) 120px 90px;
}
.product-ui .grid-cols-\[minmax\(0\2c 1fr\)_224px\] {
  grid-template-columns: minmax(0,1fr) 224px;
}
.product-ui .grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_16px\] {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 16px;
}
.product-ui .grid-cols-\[minmax\(120px\2c max-content\)\2c 1fr\] {
  grid-template-columns: minmax(120px,max-content) 1fr;
}
.product-ui .grid-cols-\[minmax\(150px\2c 1\.1fr\)_110px_90px_minmax\(180px\2c 2fr\)_132px\] {
  grid-template-columns: minmax(150px,1.1fr) 110px 90px minmax(180px,2fr) 132px;
}
.product-ui .grid-cols-\[minmax\(220px\2c 2fr\)_110px_110px_90px_110px_90px\] {
  grid-template-columns: minmax(220px,2fr) 110px 110px 90px 110px 90px;
}
.product-ui .grid-cols-\[repeat\(auto-fill\2c minmax\(180px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
}
.product-ui .grid-rows-\[0_auto\] {
  grid-template-rows: 0 auto;
}
.product-ui .grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.product-ui .grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.product-ui .grid-rows-\[1fr_auto\] {
  grid-template-rows: 1fr auto;
}
.product-ui .flex-row {
  flex-direction: row;
}
.product-ui .flex-col {
  flex-direction: column;
}
.product-ui .flex-wrap {
  flex-wrap: wrap;
}
.product-ui .place-items-center {
  place-items: center;
}
.product-ui .content-start {
  align-content: flex-start;
}
.product-ui .items-start {
  align-items: flex-start;
}
.product-ui .items-end {
  align-items: flex-end;
}
.product-ui .items-center {
  align-items: center;
}
.product-ui .items-baseline {
  align-items: baseline;
}
.product-ui .items-stretch {
  align-items: stretch;
}
.product-ui .justify-start {
  justify-content: flex-start;
}
.product-ui .justify-end {
  justify-content: flex-end;
}
.product-ui .justify-center {
  justify-content: center;
}
.product-ui .justify-between {
  justify-content: space-between;
}
.product-ui .justify-around {
  justify-content: space-around;
}
.product-ui .\!gap-1 {
  gap: 0.25rem !important;
}
.product-ui .\!gap-3 {
  gap: 0.75rem !important;
}
.product-ui .gap-0\.5 {
  gap: 0.125rem;
}
.product-ui .gap-1 {
  gap: 0.25rem;
}
.product-ui .gap-1\.5 {
  gap: 0.375rem;
}
.product-ui .gap-2 {
  gap: 0.5rem;
}
.product-ui .gap-2\.5 {
  gap: 0.625rem;
}
.product-ui .gap-3 {
  gap: 0.75rem;
}
.product-ui .gap-3\.5 {
  gap: 0.875rem;
}
.product-ui .gap-4 {
  gap: 1rem;
}
.product-ui .gap-5 {
  gap: 1.25rem;
}
.product-ui .gap-6 {
  gap: 1.5rem;
}
.product-ui .gap-7 {
  gap: 1.75rem;
}
.product-ui .gap-\[2px\] {
  gap: 2px;
}
.product-ui .gap-\[3px\] {
  gap: 3px;
}
.product-ui .gap-px {
  gap: 1px;
}
.product-ui .gap-x-0\.5 {
  -moz-column-gap: 0.125rem;
       column-gap: 0.125rem;
}
.product-ui .gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.product-ui .gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.product-ui .gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.product-ui .gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.product-ui .gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.product-ui .gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.product-ui .gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.product-ui .gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.product-ui .gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.product-ui .gap-y-0\.5 {
  row-gap: 0.125rem;
}
.product-ui .gap-y-1 {
  row-gap: 0.25rem;
}
.product-ui .gap-y-1\.5 {
  row-gap: 0.375rem;
}
.product-ui .gap-y-2 {
  row-gap: 0.5rem;
}
.product-ui .gap-y-2\.5 {
  row-gap: 0.625rem;
}
.product-ui .gap-y-3 {
  row-gap: 0.75rem;
}
.product-ui .gap-y-4 {
  row-gap: 1rem;
}
.product-ui .gap-y-6 {
  row-gap: 1.5rem;
}
.product-ui .-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.product-ui .-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.product-ui .space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.product-ui .space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.product-ui .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.product-ui .space-y-\[3px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3px * var(--tw-space-y-reverse));
}
.product-ui .space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}
.product-ui .divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.product-ui .divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.product-ui .divide-line-control > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-divide-opacity, 1));
}
.product-ui .divide-line-control\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(var(--color-line-control), 0.5);
}
.product-ui .divide-line-control\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(var(--color-line-control), 0.6);
}
.product-ui .divide-line-control\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(var(--color-line-control), 0.7);
}
.product-ui .divide-line-control\/80 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(var(--color-line-control), 0.8);
}
.product-ui .divide-white\/\[0\.09\] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.09);
}
.product-ui .self-start {
  align-self: flex-start;
}
.product-ui .self-end {
  align-self: flex-end;
}
.product-ui .self-center {
  align-self: center;
}
.product-ui .self-stretch {
  align-self: stretch;
}
.product-ui .self-baseline {
  align-self: baseline;
}
.product-ui .overflow-auto {
  overflow: auto;
}
.product-ui .overflow-hidden {
  overflow: hidden;
}
.product-ui .overflow-visible {
  overflow: visible;
}
.product-ui .overflow-x-auto {
  overflow-x: auto;
}
.product-ui .overflow-y-auto {
  overflow-y: auto;
}
.product-ui .overflow-x-hidden {
  overflow-x: hidden;
}
.product-ui .overflow-y-hidden {
  overflow-y: hidden;
}
.product-ui .overscroll-contain {
  overscroll-behavior: contain;
}
.product-ui .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-ui .text-ellipsis {
  text-overflow: ellipsis;
}
.product-ui .whitespace-normal {
  white-space: normal;
}
.product-ui .whitespace-nowrap {
  white-space: nowrap;
}
.product-ui .whitespace-pre {
  white-space: pre;
}
.product-ui .whitespace-pre-wrap {
  white-space: pre-wrap;
}
.product-ui .break-words {
  overflow-wrap: break-word;
}
.product-ui .break-all {
  word-break: break-all;
}
.product-ui .\!rounded-full {
  border-radius: 9999px !important;
}
.product-ui .\!rounded-lg {
  border-radius: 0.5rem !important;
}
.product-ui .\!rounded-xl {
  border-radius: 0.75rem !important;
}
.product-ui .rounded {
  border-radius: 0.25rem;
}
.product-ui .rounded-2xl {
  border-radius: 1rem;
}
.product-ui .rounded-\[10px\] {
  border-radius: 10px;
}
.product-ui .rounded-\[14px\] {
  border-radius: 14px;
}
.product-ui .rounded-\[18px\] {
  border-radius: 18px;
}
.product-ui .rounded-\[20px\] {
  border-radius: 20px;
}
.product-ui .rounded-\[24px\] {
  border-radius: 24px;
}
.product-ui .rounded-\[2px\] {
  border-radius: 2px;
}
.product-ui .rounded-\[3px\] {
  border-radius: 3px;
}
.product-ui .rounded-\[4px\] {
  border-radius: 4px;
}
.product-ui .rounded-\[5px\] {
  border-radius: 5px;
}
.product-ui .rounded-\[6px\] {
  border-radius: 6px;
}
.product-ui .rounded-\[9px\] {
  border-radius: 9px;
}
.product-ui .rounded-\[inherit\] {
  border-radius: inherit;
}
.product-ui .rounded-full {
  border-radius: 9999px;
}
.product-ui .rounded-lg {
  border-radius: 0.5rem;
}
.product-ui .rounded-md {
  border-radius: 0.375rem;
}
.product-ui .rounded-sm {
  border-radius: 0.125rem;
}
.product-ui .rounded-xl {
  border-radius: 0.75rem;
}
.product-ui .rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.product-ui .rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.product-ui .rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.product-ui .rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.product-ui .rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.product-ui .rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.product-ui .rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.product-ui .rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.product-ui .rounded-bl-\[3px\] {
  border-bottom-left-radius: 3px;
}
.product-ui .rounded-bl-\[6px\] {
  border-bottom-left-radius: 6px;
}
.product-ui .rounded-bl-md {
  border-bottom-left-radius: 0.375rem;
}
.product-ui .rounded-tl-md {
  border-top-left-radius: 0.375rem;
}
.product-ui .rounded-tr-md {
  border-top-right-radius: 0.375rem;
}
.product-ui .border {
  border-width: 1px;
}
.product-ui .border-0 {
  border-width: 0px;
}
.product-ui .border-2 {
  border-width: 2px;
}
.product-ui .border-\[4px\] {
  border-width: 4px;
}
.product-ui .border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.product-ui .border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.product-ui .border-b {
  border-bottom-width: 1px;
}
.product-ui .border-b-0 {
  border-bottom-width: 0px;
}
.product-ui .border-b-2 {
  border-bottom-width: 2px;
}
.product-ui .border-l {
  border-left-width: 1px;
}
.product-ui .border-l-2 {
  border-left-width: 2px;
}
.product-ui .border-l-4 {
  border-left-width: 4px;
}
.product-ui .border-r {
  border-right-width: 1px;
}
.product-ui .border-t {
  border-top-width: 1px;
}
.product-ui .border-dashed {
  border-style: dashed;
}
.product-ui .\!border-transparent {
  border-color: transparent !important;
}
.product-ui .border-\[\#b36ab9\]\/35 {
  border-color: rgb(179 106 185 / 0.35);
}
.product-ui .border-\[rgb\(208\2c 206\2c 212\)\] {
  --tw-border-opacity: 1;
  border-color: rgb(208 206 212 / var(--tw-border-opacity, 1));
}
.product-ui .border-\[rgb\(var\(--color-background-base\)\)\] {
  border-color: rgb(var(--color-background-base));
}
.product-ui .border-action-primary {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-action-primary), var(--tw-border-opacity, 1));
}
.product-ui .border-action-primary\/20 {
  border-color: rgba(var(--color-action-primary), 0.2);
}
.product-ui .border-action-primary\/30 {
  border-color: rgba(var(--color-action-primary), 0.3);
}
.product-ui .border-action-primary\/35 {
  border-color: rgba(var(--color-action-primary), 0.35);
}
.product-ui .border-action-primary\/40 {
  border-color: rgba(var(--color-action-primary), 0.4);
}
.product-ui .border-action-primary\/45 {
  border-color: rgba(var(--color-action-primary), 0.45);
}
.product-ui .border-action-primary\/50 {
  border-color: rgba(var(--color-action-primary), 0.5);
}
.product-ui .border-action-primary\/60 {
  border-color: rgba(var(--color-action-primary), 0.6);
}
.product-ui .border-action-primary\/70 {
  border-color: rgba(var(--color-action-primary), 0.7);
}
.product-ui .border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.product-ui .border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.product-ui .border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.product-ui .border-amber-900\/60 {
  border-color: rgb(120 53 15 / 0.6);
}
.product-ui .border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.product-ui .border-black\/15 {
  border-color: rgb(0 0 0 / 0.15);
}
.product-ui .border-current {
  border-color: currentColor;
}
.product-ui .border-cyan-400 {
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.product-ui .border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.product-ui .border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.product-ui .border-emerald-500\/35 {
  border-color: rgb(16 185 129 / 0.35);
}
.product-ui .border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.product-ui .border-emerald-900\/60 {
  border-color: rgb(6 78 59 / 0.6);
}
.product-ui .border-error\/20 {
  border-color: rgba(var(--color-error), 0.2);
}
.product-ui .border-error\/25 {
  border-color: rgba(var(--color-error), 0.25);
}
.product-ui .border-error\/30 {
  border-color: rgba(var(--color-error), 0.3);
}
.product-ui .border-error\/35 {
  border-color: rgba(var(--color-error), 0.35);
}
.product-ui .border-error\/40 {
  border-color: rgba(var(--color-error), 0.4);
}
.product-ui .border-error\/50 {
  border-color: rgba(var(--color-error), 0.5);
}
.product-ui .border-error\/70 {
  border-color: rgba(var(--color-error), 0.7);
}
.product-ui .border-line-control {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}
.product-ui .border-line-control\/35 {
  border-color: rgba(var(--color-line-control), 0.35);
}
.product-ui .border-line-control\/40 {
  border-color: rgba(var(--color-line-control), 0.4);
}
.product-ui .border-line-control\/50 {
  border-color: rgba(var(--color-line-control), 0.5);
}
.product-ui .border-line-control\/55 {
  border-color: rgba(var(--color-line-control), 0.55);
}
.product-ui .border-line-control\/60 {
  border-color: rgba(var(--color-line-control), 0.6);
}
.product-ui .border-line-control\/70 {
  border-color: rgba(var(--color-line-control), 0.7);
}
.product-ui .border-line-control\/80 {
  border-color: rgba(var(--color-line-control), 0.8);
}
.product-ui .border-main {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-border), var(--tw-border-opacity, 1));
}
.product-ui .border-main\/50 {
  border-color: rgba(var(--color-border), 0.5);
}
.product-ui .border-main\/60 {
  border-color: rgba(var(--color-border), 0.6);
}
.product-ui .border-orange-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.product-ui .border-red-500\/25 {
  border-color: rgb(239 68 68 / 0.25);
}
.product-ui .border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.product-ui .border-rose-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.product-ui .border-sky-400 {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}
.product-ui .border-sky-500\/20 {
  border-color: rgb(14 165 233 / 0.2);
}
.product-ui .border-sky-500\/30 {
  border-color: rgb(14 165 233 / 0.3);
}
.product-ui .border-status-attention\/45 {
  border-color: rgba(var(--color-status-attention), 0.45);
}
.product-ui .border-success\/25 {
  border-color: rgba(var(--color-success), 0.25);
}
.product-ui .border-success\/30 {
  border-color: rgba(var(--color-success), 0.3);
}
.product-ui .border-success\/35 {
  border-color: rgba(var(--color-success), 0.35);
}
.product-ui .border-success\/40 {
  border-color: rgba(var(--color-success), 0.4);
}
.product-ui .border-success\/50 {
  border-color: rgba(var(--color-success), 0.5);
}
.product-ui .border-surface {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-background-surface), var(--tw-border-opacity, 1));
}
.product-ui .border-teal-400 {
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}
.product-ui .border-transparent {
  border-color: transparent;
}
.product-ui .border-violet-400 {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.product-ui .border-violet-500\/30 {
  border-color: rgb(139 92 246 / 0.3);
}
.product-ui .border-warning\/20 {
  border-color: rgba(var(--color-warning), 0.2);
}
.product-ui .border-warning\/25 {
  border-color: rgba(var(--color-warning), 0.25);
}
.product-ui .border-warning\/30 {
  border-color: rgba(var(--color-warning), 0.3);
}
.product-ui .border-warning\/35 {
  border-color: rgba(var(--color-warning), 0.35);
}
.product-ui .border-warning\/40 {
  border-color: rgba(var(--color-warning), 0.4);
}
.product-ui .border-warning\/60 {
  border-color: rgba(var(--color-warning), 0.6);
}
.product-ui .border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.product-ui .border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.product-ui .border-white\/\[0\.09\] {
  border-color: rgb(255 255 255 / 0.09);
}
.product-ui .border-t-action-primary {
  --tw-border-opacity: 1;
  border-top-color: rgba(var(--color-action-primary), var(--tw-border-opacity, 1));
}
.product-ui .\!bg-elevated {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(var(--color-background-elevated), var(--tw-bg-opacity, 1)) !important;
}
.product-ui .\!bg-state-selected {
  background-color: var(--color-state-selected) !important;
}
.product-ui .\!bg-surface-sunken {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(var(--color-surface-sunken), var(--tw-bg-opacity, 1)) !important;
}
.product-ui .\!bg-transparent {
  background-color: transparent !important;
}
.product-ui .bg-\[\#011627\] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 22 39 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-\[\#0f0e11\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 14 17 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-\[\#101013\] {
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 19 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-\[\#611f69\]\/15 {
  background-color: rgb(97 31 105 / 0.15);
}
.product-ui .bg-\[\#73bf69\] {
  --tw-bg-opacity: 1;
  background-color: rgb(115 191 105 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-\[\#73bf69\]\/15 {
  background-color: rgb(115 191 105 / 0.15);
}
.product-ui .bg-\[\#f38020\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 128 32 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-\[rgb\(var\(--color-background-base\)\)\] {
  background-color: rgb(var(--color-background-base));
}
.product-ui .bg-\[var\(--sdm-tbg\)\] {
  background-color: var(--sdm-tbg);
}
.product-ui .bg-\[var\(--sidebar-overlay-active\)\] {
  background-color: var(--sidebar-overlay-active);
}
.product-ui .bg-\[var\(--sidebar-overlay-hover\)\] {
  background-color: var(--sidebar-overlay-hover);
}
.product-ui .bg-action-primary {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-action-primary), var(--tw-bg-opacity, 1));
}
.product-ui .bg-action-primary\/30 {
  background-color: rgba(var(--color-action-primary), 0.3);
}
.product-ui .bg-action-primary\/35 {
  background-color: rgba(var(--color-action-primary), 0.35);
}
.product-ui .bg-action-primary\/70 {
  background-color: rgba(var(--color-action-primary), 0.7);
}
.product-ui .bg-action-primary\/90 {
  background-color: rgba(var(--color-action-primary), 0.9);
}
.product-ui .bg-action-primary\/\[0\.05\] {
  background-color: rgba(var(--color-action-primary), 0.05);
}
.product-ui .bg-action-primary\/\[0\.06\] {
  background-color: rgba(var(--color-action-primary), 0.06);
}
.product-ui .bg-action-primary\/\[0\.07\] {
  background-color: rgba(var(--color-action-primary), 0.07);
}
.product-ui .bg-action-primary\/\[0\.08\] {
  background-color: rgba(var(--color-action-primary), 0.08);
}
.product-ui .bg-agentCanvas {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-agent-canvas), var(--tw-bg-opacity, 1));
}
.product-ui .bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.product-ui .bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.product-ui .bg-amber-950\/30 {
  background-color: rgb(69 26 3 / 0.3);
}
.product-ui .bg-appBg\/60 {
  background-color: rgba(var(--color-appBg), 0.6);
}
.product-ui .bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.product-ui .bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.product-ui .bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.product-ui .bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.product-ui .bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.product-ui .bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.product-ui .bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.product-ui .bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.product-ui .bg-composer {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-composer-surface), var(--tw-bg-opacity, 1));
}
.product-ui .bg-current {
  background-color: currentColor;
}
.product-ui .bg-cyan-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15);
}
.product-ui .bg-elevated {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-background-elevated), var(--tw-bg-opacity, 1));
}
.product-ui .bg-elevated\/90 {
  background-color: rgba(var(--color-background-elevated), 0.9);
}
.product-ui .bg-elevated\/95 {
  background-color: rgba(var(--color-background-elevated), 0.95);
}
.product-ui .bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.product-ui .bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.product-ui .bg-emerald-500\/5 {
  background-color: rgb(16 185 129 / 0.05);
}
.product-ui .bg-emerald-500\/\[0\.04\] {
  background-color: rgb(16 185 129 / 0.04);
}
.product-ui .bg-emerald-950\/30 {
  background-color: rgb(2 44 34 / 0.3);
}
.product-ui .bg-error {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-error), var(--tw-bg-opacity, 1));
}
.product-ui .bg-error\/10 {
  background-color: rgba(var(--color-error), 0.1);
}
.product-ui .bg-error\/15 {
  background-color: rgba(var(--color-error), 0.15);
}
.product-ui .bg-error\/30 {
  background-color: rgba(var(--color-error), 0.3);
}
.product-ui .bg-error\/5 {
  background-color: rgba(var(--color-error), 0.05);
}
.product-ui .bg-error\/\[0\.04\] {
  background-color: rgba(var(--color-error), 0.04);
}
.product-ui .bg-error\/\[0\.05\] {
  background-color: rgba(var(--color-error), 0.05);
}
.product-ui .bg-error\/\[0\.07\] {
  background-color: rgba(var(--color-error), 0.07);
}
.product-ui .bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-heatmap-0 {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-heatmap-0), var(--tw-bg-opacity, 1));
}
.product-ui .bg-heatmap-1 {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-heatmap-1), var(--tw-bg-opacity, 1));
}
.product-ui .bg-heatmap-2 {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-heatmap-2), var(--tw-bg-opacity, 1));
}
.product-ui .bg-heatmap-3 {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-heatmap-3), var(--tw-bg-opacity, 1));
}
.product-ui .bg-heatmap-4 {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-heatmap-4), var(--tw-bg-opacity, 1));
}
.product-ui .bg-line-control {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-line-control), var(--tw-bg-opacity, 1));
}
.product-ui .bg-main {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-background-base), var(--tw-bg-opacity, 1));
}
.product-ui .bg-main\/50 {
  background-color: rgba(var(--color-background-base), 0.5);
}
.product-ui .bg-main\/75 {
  background-color: rgba(var(--color-background-base), 0.75);
}
.product-ui .bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-orange-500\/15 {
  background-color: rgb(249 115 22 / 0.15);
}
.product-ui .bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.product-ui .bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.product-ui .bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.product-ui .bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.product-ui .bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.product-ui .bg-sky-500\/\[0\.025\] {
  background-color: rgb(14 165 233 / 0.025);
}
.product-ui .bg-state-selected {
  background-color: var(--color-state-selected);
}
.product-ui .bg-status-attention {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-status-attention), var(--tw-bg-opacity, 1));
}
.product-ui .bg-status-attention\/10 {
  background-color: rgba(var(--color-status-attention), 0.1);
}
.product-ui .bg-status-attention\/15 {
  background-color: rgba(var(--color-status-attention), 0.15);
}
.product-ui .bg-status-danger {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-status-danger), var(--tw-bg-opacity, 1));
}
.product-ui .bg-status-success {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-status-success), var(--tw-bg-opacity, 1));
}
.product-ui .bg-status-warning {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-status-warning), var(--tw-bg-opacity, 1));
}
.product-ui .bg-success {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-success), var(--tw-bg-opacity, 1));
}
.product-ui .bg-success\/10 {
  background-color: rgba(var(--color-success), 0.1);
}
.product-ui .bg-success\/15 {
  background-color: rgba(var(--color-success), 0.15);
}
.product-ui .bg-success\/20 {
  background-color: rgba(var(--color-success), 0.2);
}
.product-ui .bg-success\/5 {
  background-color: rgba(var(--color-success), 0.05);
}
.product-ui .bg-success\/\[0\.07\] {
  background-color: rgba(var(--color-success), 0.07);
}
.product-ui .bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-background-surface), var(--tw-bg-opacity, 1));
}
.product-ui .bg-surface-canvas {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-canvas), var(--tw-bg-opacity, 1));
}
.product-ui .bg-surface-raised {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-raised), var(--tw-bg-opacity, 1));
}
.product-ui .bg-surface-sheet {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sheet), var(--tw-bg-opacity, 1));
}
.product-ui .bg-surface-sunken {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sunken), var(--tw-bg-opacity, 1));
}
.product-ui .bg-surface\/40 {
  background-color: rgba(var(--color-background-surface), 0.4);
}
.product-ui .bg-teal-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-teal-500\/15 {
  background-color: rgb(20 184 166 / 0.15);
}
.product-ui .bg-transparent {
  background-color: transparent;
}
.product-ui .bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-violet-500\/10 {
  background-color: rgb(139 92 246 / 0.1);
}
.product-ui .bg-violet-500\/15 {
  background-color: rgb(139 92 246 / 0.15);
}
.product-ui .bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-warning), var(--tw-bg-opacity, 1));
}
.product-ui .bg-warning\/10 {
  background-color: rgba(var(--color-warning), 0.1);
}
.product-ui .bg-warning\/15 {
  background-color: rgba(var(--color-warning), 0.15);
}
.product-ui .bg-warning\/20 {
  background-color: rgba(var(--color-warning), 0.2);
}
.product-ui .bg-warning\/25 {
  background-color: rgba(var(--color-warning), 0.25);
}
.product-ui .bg-warning\/5 {
  background-color: rgba(var(--color-warning), 0.05);
}
.product-ui .bg-warning\/\[0\.08\] {
  background-color: rgba(var(--color-warning), 0.08);
}
.product-ui .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.product-ui .bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.product-ui .bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.product-ui .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.product-ui .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.product-ui .from-\[\#f9943a\] {
  --tw-gradient-from: #f9943a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 148 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.product-ui .from-state-selected {
  --tw-gradient-from: var(--color-state-selected) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.product-ui .via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.product-ui .to-\[\#f06b15\] {
  --tw-gradient-to: #f06b15 var(--tw-gradient-to-position);
}
.product-ui .to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.product-ui .fill-action-primary {
  fill: rgb(var(--color-action-primary));
}
.product-ui .fill-action-primary\/70 {
  fill: rgba(var(--color-action-primary), 0.7);
}
.product-ui .fill-current {
  fill: currentColor;
}
.product-ui .fill-transparent {
  fill: transparent;
}
.product-ui .stroke-current {
  stroke: currentColor;
}
.product-ui .object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.product-ui .object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.product-ui .object-top {
  -o-object-position: top;
     object-position: top;
}
.product-ui .\!p-1\.5 {
  padding: 0.375rem !important;
}
.product-ui .p-0 {
  padding: 0px;
}
.product-ui .p-0\.5 {
  padding: 0.125rem;
}
.product-ui .p-1 {
  padding: 0.25rem;
}
.product-ui .p-1\.5 {
  padding: 0.375rem;
}
.product-ui .p-10 {
  padding: 2.5rem;
}
.product-ui .p-2 {
  padding: 0.5rem;
}
.product-ui .p-2\.5 {
  padding: 0.625rem;
}
.product-ui .p-3 {
  padding: 0.75rem;
}
.product-ui .p-3\.5 {
  padding: 0.875rem;
}
.product-ui .p-4 {
  padding: 1rem;
}
.product-ui .p-5 {
  padding: 1.25rem;
}
.product-ui .p-6 {
  padding: 1.5rem;
}
.product-ui .p-7 {
  padding: 1.75rem;
}
.product-ui .p-8 {
  padding: 2rem;
}
.product-ui .p-px {
  padding: 1px;
}
.product-ui .\!px-1\.5 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}
.product-ui .\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}
.product-ui .px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.product-ui .px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.product-ui .px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.product-ui .px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.product-ui .px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.product-ui .px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.product-ui .px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.product-ui .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.product-ui .px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.product-ui .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.product-ui .px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.product-ui .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.product-ui .px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.product-ui .px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.product-ui .px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.product-ui .py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.product-ui .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.product-ui .py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.product-ui .py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.product-ui .py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.product-ui .py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.product-ui .py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.product-ui .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.product-ui .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.product-ui .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.product-ui .py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.product-ui .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.product-ui .py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.product-ui .py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.product-ui .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.product-ui .py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.product-ui .py-\[4px\] {
  padding-top: 4px;
  padding-bottom: 4px;
}
.product-ui .py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.product-ui .pb-0\.5 {
  padding-bottom: 0.125rem;
}
.product-ui .pb-1 {
  padding-bottom: 0.25rem;
}
.product-ui .pb-1\.5 {
  padding-bottom: 0.375rem;
}
.product-ui .pb-10 {
  padding-bottom: 2.5rem;
}
.product-ui .pb-12 {
  padding-bottom: 3rem;
}
.product-ui .pb-2 {
  padding-bottom: 0.5rem;
}
.product-ui .pb-2\.5 {
  padding-bottom: 0.625rem;
}
.product-ui .pb-3 {
  padding-bottom: 0.75rem;
}
.product-ui .pb-3\.5 {
  padding-bottom: 0.875rem;
}
.product-ui .pb-4 {
  padding-bottom: 1rem;
}
.product-ui .pb-5 {
  padding-bottom: 1.25rem;
}
.product-ui .pb-6 {
  padding-bottom: 1.5rem;
}
.product-ui .pb-8 {
  padding-bottom: 2rem;
}
.product-ui .pl-0\.5 {
  padding-left: 0.125rem;
}
.product-ui .pl-1\.5 {
  padding-left: 0.375rem;
}
.product-ui .pl-2 {
  padding-left: 0.5rem;
}
.product-ui .pl-2\.5 {
  padding-left: 0.625rem;
}
.product-ui .pl-3 {
  padding-left: 0.75rem;
}
.product-ui .pl-3\.5 {
  padding-left: 0.875rem;
}
.product-ui .pl-4 {
  padding-left: 1rem;
}
.product-ui .pl-5 {
  padding-left: 1.25rem;
}
.product-ui .pl-7 {
  padding-left: 1.75rem;
}
.product-ui .pl-8 {
  padding-left: 2rem;
}
.product-ui .pl-\[40px\] {
  padding-left: 40px;
}
.product-ui .pr-0\.5 {
  padding-right: 0.125rem;
}
.product-ui .pr-1 {
  padding-right: 0.25rem;
}
.product-ui .pr-1\.5 {
  padding-right: 0.375rem;
}
.product-ui .pr-10 {
  padding-right: 2.5rem;
}
.product-ui .pr-12 {
  padding-right: 3rem;
}
.product-ui .pr-14 {
  padding-right: 3.5rem;
}
.product-ui .pr-16 {
  padding-right: 4rem;
}
.product-ui .pr-2 {
  padding-right: 0.5rem;
}
.product-ui .pr-2\.5 {
  padding-right: 0.625rem;
}
.product-ui .pr-3 {
  padding-right: 0.75rem;
}
.product-ui .pr-4 {
  padding-right: 1rem;
}
.product-ui .pr-7 {
  padding-right: 1.75rem;
}
.product-ui .pr-9 {
  padding-right: 2.25rem;
}
.product-ui .pt-0 {
  padding-top: 0px;
}
.product-ui .pt-0\.5 {
  padding-top: 0.125rem;
}
.product-ui .pt-1 {
  padding-top: 0.25rem;
}
.product-ui .pt-1\.5 {
  padding-top: 0.375rem;
}
.product-ui .pt-10 {
  padding-top: 2.5rem;
}
.product-ui .pt-12 {
  padding-top: 3rem;
}
.product-ui .pt-14 {
  padding-top: 3.5rem;
}
.product-ui .pt-16 {
  padding-top: 4rem;
}
.product-ui .pt-2 {
  padding-top: 0.5rem;
}
.product-ui .pt-2\.5 {
  padding-top: 0.625rem;
}
.product-ui .pt-3 {
  padding-top: 0.75rem;
}
.product-ui .pt-3\.5 {
  padding-top: 0.875rem;
}
.product-ui .pt-4 {
  padding-top: 1rem;
}
.product-ui .pt-5 {
  padding-top: 1.25rem;
}
.product-ui .pt-6 {
  padding-top: 1.5rem;
}
.product-ui .pt-\[19px\] {
  padding-top: 19px;
}
.product-ui .pt-\[min\(10vh\2c 96px\)\] {
  padding-top: min(10vh, 96px);
}
.product-ui .pt-\[min\(15vh\2c 138px\)\] {
  padding-top: min(15vh, 138px);
}
.product-ui .pt-px {
  padding-top: 1px;
}
.product-ui .text-left {
  text-align: left;
}
.product-ui .text-center {
  text-align: center;
}
.product-ui .text-right {
  text-align: right;
}
.product-ui .text-start {
  text-align: start;
}
.product-ui .text-end {
  text-align: end;
}
.product-ui .align-baseline {
  vertical-align: baseline;
}
.product-ui .align-middle {
  vertical-align: middle;
}
.product-ui .align-bottom {
  vertical-align: bottom;
}
.product-ui .align-\[-0\.15em\] {
  vertical-align: -0.15em;
}
.product-ui .align-\[-0\.35em\] {
  vertical-align: -0.35em;
}
.product-ui .align-\[-2px\] {
  vertical-align: -2px;
}
.product-ui .font-mono {
  font-family: SF Mono, Menlo, Monaco, monospace;
}
.product-ui .font-sans {
  font-family: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
}
.product-ui .\!text-\[11px\] {
  font-size: 11px !important;
}
.product-ui .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.product-ui .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.product-ui .text-\[10\.5px\] {
  font-size: 10.5px;
}
.product-ui .text-\[10px\] {
  font-size: 10px;
}
.product-ui .text-\[11\.5px\] {
  font-size: 11.5px;
}
.product-ui .text-\[11px\] {
  font-size: 11px;
}
.product-ui .text-\[12\.5px\] {
  font-size: 12.5px;
}
.product-ui .text-\[12px\] {
  font-size: 12px;
}
.product-ui .text-\[13\.5px\] {
  font-size: 13.5px;
}
.product-ui .text-\[13px\] {
  font-size: 13px;
}
.product-ui .text-\[14\.5px\] {
  font-size: 14.5px;
}
.product-ui .text-\[14px\] {
  font-size: 14px;
}
.product-ui .text-\[15\.5px\] {
  font-size: 15.5px;
}
.product-ui .text-\[15px\] {
  font-size: 15px;
}
.product-ui .text-\[16px\] {
  font-size: 16px;
}
.product-ui .text-\[17px\] {
  font-size: 17px;
}
.product-ui .text-\[18px\] {
  font-size: 18px;
}
.product-ui .text-\[20px\] {
  font-size: 20px;
}
.product-ui .text-\[21px\] {
  font-size: 21px;
}
.product-ui .text-\[22px\] {
  font-size: 22px;
}
.product-ui .text-\[24px\] {
  font-size: 24px;
}
.product-ui .text-\[26px\] {
  font-size: 26px;
}
.product-ui .text-\[8px\] {
  font-size: 8px;
}
.product-ui .text-\[9\.5px\] {
  font-size: 9.5px;
}
.product-ui .text-\[9px\] {
  font-size: 9px;
}
.product-ui .text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.product-ui .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.product-ui .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.product-ui .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.product-ui .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.product-ui .font-\[450\] {
  font-weight: 450;
}
.product-ui .font-bold {
  font-weight: 700;
}
.product-ui .font-medium {
  font-weight: 500;
}
.product-ui .font-normal {
  font-weight: 400;
}
.product-ui .font-semibold {
  font-weight: 600;
}
.product-ui .uppercase {
  text-transform: uppercase;
}
.product-ui .lowercase {
  text-transform: lowercase;
}
.product-ui .capitalize {
  text-transform: capitalize;
}
.product-ui .normal-case {
  text-transform: none;
}
.product-ui .italic {
  font-style: italic;
}
.product-ui .tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.product-ui .leading-3 {
  line-height: .75rem;
}
.product-ui .leading-4 {
  line-height: 1rem;
}
.product-ui .leading-5 {
  line-height: 1.25rem;
}
.product-ui .leading-6 {
  line-height: 1.5rem;
}
.product-ui .leading-7 {
  line-height: 1.75rem;
}
.product-ui .leading-\[1\.25\] {
  line-height: 1.25;
}
.product-ui .leading-\[1\.45\] {
  line-height: 1.45;
}
.product-ui .leading-\[1\.55\] {
  line-height: 1.55;
}
.product-ui .leading-\[1\.6\] {
  line-height: 1.6;
}
.product-ui .leading-\[1\.75\] {
  line-height: 1.75;
}
.product-ui .leading-\[17px\] {
  line-height: 17px;
}
.product-ui .leading-\[18px\] {
  line-height: 18px;
}
.product-ui .leading-\[19px\] {
  line-height: 19px;
}
.product-ui .leading-none {
  line-height: 1;
}
.product-ui .leading-relaxed {
  line-height: 1.625;
}
.product-ui .leading-snug {
  line-height: 1.375;
}
.product-ui .leading-tight {
  line-height: 1.25;
}
.product-ui .tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.product-ui .tracking-\[-0\.025em\] {
  letter-spacing: -0.025em;
}
.product-ui .tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.product-ui .tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.product-ui .tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.product-ui .tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.product-ui .tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.product-ui .tracking-normal {
  letter-spacing: 0em;
}
.product-ui .tracking-tight {
  letter-spacing: -0.025em;
}
.product-ui .tracking-wide {
  letter-spacing: 0.025em;
}
.product-ui .tracking-wider {
  letter-spacing: 0.05em;
}
.product-ui .tracking-widest {
  letter-spacing: 0.1em;
}
.product-ui .\!text-primary {
  --tw-text-opacity: 1 !important;
  color: rgba(var(--color-text-primary), var(--tw-text-opacity, 1)) !important;
}
.product-ui .\!text-tertiary {
  --tw-text-opacity: 1 !important;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1)) !important;
}
.product-ui .text-\[\#4169E1\] {
  --tw-text-opacity: 1;
  color: rgb(65 105 225 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#47A248\] {
  --tw-text-opacity: 1;
  color: rgb(71 162 72 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#5865f2\] {
  --tw-text-opacity: 1;
  color: rgb(88 101 242 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#73bf69\] {
  --tw-text-opacity: 1;
  color: rgb(115 191 105 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#F38020\] {
  --tw-text-opacity: 1;
  color: rgb(243 128 32 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#f38020\] {
  --tw-text-opacity: 1;
  color: rgb(243 128 32 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[\#fc6d26\] {
  --tw-text-opacity: 1;
  color: rgb(252 109 38 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[rgb\(101\2c 97\2c 107\)\] {
  --tw-text-opacity: 1;
  color: rgb(101 97 107 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[rgb\(126\2c 122\2c 133\)\] {
  --tw-text-opacity: 1;
  color: rgb(126 122 133 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[rgb\(15\2c 14\2c 17\)\] {
  --tw-text-opacity: 1;
  color: rgb(15 14 17 / var(--tw-text-opacity, 1));
}
.product-ui .text-\[var\(--sdm-c\2c inherit\)\] {
  color: var(--sdm-c,inherit);
}
.product-ui .text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.product-ui .text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.product-ui .text-amber-300\/90 {
  color: rgb(252 211 77 / 0.9);
}
.product-ui .text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.product-ui .text-amber-400\/90 {
  color: rgb(251 191 36 / 0.9);
}
.product-ui .text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.product-ui .text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.product-ui .text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.product-ui .text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.product-ui .text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.product-ui .text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.product-ui .text-emerald-400\/90 {
  color: rgb(52 211 153 / 0.9);
}
.product-ui .text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.product-ui .text-emerald-500\/80 {
  color: rgb(16 185 129 / 0.8);
}
.product-ui .text-emerald-500\/90 {
  color: rgb(16 185 129 / 0.9);
}
.product-ui .text-error {
  --tw-text-opacity: 1;
  color: rgba(var(--color-error), var(--tw-text-opacity, 1));
}
.product-ui .text-error\/90 {
  color: rgba(var(--color-error), 0.9);
}
.product-ui .text-inverse {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-inverse), var(--tw-text-opacity, 1));
}
.product-ui .text-main {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}
.product-ui .text-main\/60 {
  color: rgba(var(--color-text-base), 0.6);
}
.product-ui .text-main\/70 {
  color: rgba(var(--color-text-base), 0.7);
}
.product-ui .text-main\/85 {
  color: rgba(var(--color-text-base), 0.85);
}
.product-ui .text-main\/95 {
  color: rgba(var(--color-text-base), 0.95);
}
.product-ui .text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.product-ui .text-primary {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-primary), var(--tw-text-opacity, 1));
}
.product-ui .text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.product-ui .text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.product-ui .text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.product-ui .text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.product-ui .text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.product-ui .text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.product-ui .text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.product-ui .text-secondary {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}
.product-ui .text-sky-100 {
  --tw-text-opacity: 1;
  color: rgb(224 242 254 / var(--tw-text-opacity, 1));
}
.product-ui .text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.product-ui .text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.product-ui .text-slack {
  --tw-text-opacity: 1;
  color: rgba(var(--color-slack-text), var(--tw-text-opacity, 1));
}
.product-ui .text-status-attention {
  --tw-text-opacity: 1;
  color: rgba(var(--color-status-attention), var(--tw-text-opacity, 1));
}
.product-ui .text-status-attention\/90 {
  color: rgba(var(--color-status-attention), 0.9);
}
.product-ui .text-success {
  --tw-text-opacity: 1;
  color: rgba(var(--color-success), var(--tw-text-opacity, 1));
}
.product-ui .text-teal-400 {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}
.product-ui .text-tertiary {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}
.product-ui .text-tertiary\/40 {
  color: rgba(var(--color-text-tertiary), 0.4);
}
.product-ui .text-tertiary\/45 {
  color: rgba(var(--color-text-tertiary), 0.45);
}
.product-ui .text-tertiary\/60 {
  color: rgba(var(--color-text-tertiary), 0.6);
}
.product-ui .text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.product-ui .text-violet-300\/90 {
  color: rgb(196 181 253 / 0.9);
}
.product-ui .text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.product-ui .text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.product-ui .text-warning {
  --tw-text-opacity: 1;
  color: rgba(var(--color-warning), var(--tw-text-opacity, 1));
}
.product-ui .text-warning\/80 {
  color: rgba(var(--color-warning), 0.8);
}
.product-ui .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.product-ui .text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.product-ui .text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.product-ui .text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.product-ui .underline {
  text-decoration-line: underline;
}
.product-ui .line-through {
  text-decoration-line: line-through;
}
.product-ui .no-underline {
  text-decoration-line: none;
}
.product-ui .underline-offset-2 {
  text-underline-offset: 2px;
}
.product-ui .accent-action-primary {
  accent-color: rgb(var(--color-action-primary));
}
.product-ui .\!opacity-100 {
  opacity: 1 !important;
}
.product-ui .opacity-0 {
  opacity: 0;
}
.product-ui .opacity-10 {
  opacity: 0.1;
}
.product-ui .opacity-100 {
  opacity: 1;
}
.product-ui .opacity-40 {
  opacity: 0.4;
}
.product-ui .opacity-45 {
  opacity: 0.45;
}
.product-ui .opacity-50 {
  opacity: 0.5;
}
.product-ui .opacity-55 {
  opacity: 0.55;
}
.product-ui .opacity-60 {
  opacity: 0.6;
}
.product-ui .opacity-70 {
  opacity: 0.7;
}
.product-ui .opacity-75 {
  opacity: 0.75;
}
.product-ui .\!shadow-none {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.product-ui .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_-10px_30px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-shadow: 0 -10px 30px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 -10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_0_0_1px_rgb\(var\(--color-line-control\)\)\2c 0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0 0 0 1px rgb(var(--color-line-control)),0 1px 2px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_0_0_999px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 0 0 999px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 0 0 999px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_10px_24px_-8px_rgba\(243\2c 128\2c 32\2c 0\.7\)\] {
  --tw-shadow: 0 10px 24px -8px rgba(243,128,32,0.7);
  --tw-shadow-colored: 0 10px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_10px_28px_-6px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 10px 28px -6px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 10px 28px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_10px_28px_-8px_rgba\(243\2c 128\2c 32\2c 0\.6\)\] {
  --tw-shadow: 0 10px 28px -8px rgba(243,128,32,0.6);
  --tw-shadow-colored: 0 10px 28px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_12px_48px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 12px 48px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 12px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_16px_40px_-12px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 16px 40px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_18px_50px_\#00000066\] {
  --tw-shadow: 0 18px 50px #00000066;
  --tw-shadow-colored: 0 18px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_1px_2px_rgb\(0_0_0_\/_0\.05\)\2c 0_6px_18px_-6px_rgb\(0_0_0_\/_0\.08\)\] {
  --tw-shadow: 0 1px 2px rgb(0 0 0 / 0.05),0 6px 18px -6px rgb(0 0 0 / 0.08);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 6px 18px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 1px 2px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-shadow: 0 1px 3px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 4px 16px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_4px_6px_-5px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
  --tw-shadow: 0 4px 6px -5px rgba(0,0,0,0.2);
  --tw-shadow-colored: 0 4px 6px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_8px_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
  --tw-shadow: 0 8px 24px -8px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_8px_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c 0\.28\)\] {
  --tw-shadow: 0 8px 24px rgba(0,0,0,0.28);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-\[2px_3px_8px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 2px 3px 8px rgba(0,0,0,0.18);
  --tw-shadow-colored: 2px 3px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.product-ui .shadow-black\/20 {
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.product-ui .shadow-black\/25 {
  --tw-shadow-color: rgb(0 0 0 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}
.product-ui .shadow-black\/40 {
  --tw-shadow-color: rgb(0 0 0 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.product-ui .shadow-black\/50 {
  --tw-shadow-color: rgb(0 0 0 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.product-ui .outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.product-ui .outline {
  outline-style: solid;
}
.product-ui .outline-1 {
  outline-width: 1px;
}
.product-ui .-outline-offset-1 {
  outline-offset: -1px;
}
.product-ui .outline-line-control\/60 {
  outline-color: rgba(var(--color-line-control), 0.6);
}
.product-ui .outline-line-focus {
  outline-color: rgb(var(--color-line-focus));
}
.product-ui .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.product-ui .ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.product-ui .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.product-ui .ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.product-ui .ring-inset {
  --tw-ring-inset: inset;
}
.product-ui .ring-\[\#f38020\]\/25 {
  --tw-ring-color: rgb(243 128 32 / 0.25);
}
.product-ui .ring-amber-500\/40 {
  --tw-ring-color: rgb(245 158 11 / 0.4);
}
.product-ui .ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.product-ui .ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}
.product-ui .ring-current {
  --tw-ring-color: currentColor;
}
.product-ui .ring-emerald-500\/20 {
  --tw-ring-color: rgb(16 185 129 / 0.2);
}
.product-ui .ring-error\/15 {
  --tw-ring-color: rgba(var(--color-error), 0.15);
}
.product-ui .ring-error\/20 {
  --tw-ring-color: rgba(var(--color-error), 0.2);
}
.product-ui .ring-error\/30 {
  --tw-ring-color: rgba(var(--color-error), 0.3);
}
.product-ui .ring-line-control {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-control), var(--tw-ring-opacity, 1));
}
.product-ui .ring-line-control\/50 {
  --tw-ring-color: rgba(var(--color-line-control), 0.5);
}
.product-ui .ring-line-control\/60 {
  --tw-ring-color: rgba(var(--color-line-control), 0.6);
}
.product-ui .ring-line-focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-focus), var(--tw-ring-opacity, 1));
}
.product-ui .ring-success\/15 {
  --tw-ring-color: rgba(var(--color-success), 0.15);
}
.product-ui .ring-success\/20 {
  --tw-ring-color: rgba(var(--color-success), 0.2);
}
.product-ui .ring-surface {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-background-surface), var(--tw-ring-opacity, 1));
}
.product-ui .ring-transparent {
  --tw-ring-color: transparent;
}
.product-ui .ring-violet-400\/70 {
  --tw-ring-color: rgb(167 139 250 / 0.7);
}
.product-ui .ring-warning\/15 {
  --tw-ring-color: rgba(var(--color-warning), 0.15);
}
.product-ui .ring-warning\/20 {
  --tw-ring-color: rgba(var(--color-warning), 0.2);
}
.product-ui .ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.product-ui .ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.product-ui .ring-offset-\[rgb\(var\(--color-background-base\)\)\] {
  --tw-ring-offset-color: rgb(var(--color-background-base));
}
.product-ui .ring-offset-surface-sheet {
  --tw-ring-offset-color: rgb(var(--color-surface-sheet));
}
.product-ui .blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .blur-\[1\.5px\] {
  --tw-blur: blur(1.5px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.product-ui .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.product-ui .backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .backdrop-blur-\[3px\] {
  --tw-backdrop-blur: blur(3px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.product-ui .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[background-color\2c color\2c opacity\2c transform\2c box-shadow\] {
  transition-property: background-color,color,opacity,transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[background-color\2c color\2c transform\] {
  transition-property: background-color,color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[background-color\] {
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[grid-template-rows\2c opacity\] {
  transition-property: grid-template-rows,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[left\2c top\2c width\2c height\] {
  transition-property: left,top,width,height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[margin-bottom\] {
  transition-property: margin-bottom;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[opacity\2c color\] {
  transition-property: opacity,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[transform\2c color\2c border-color\2c background-color\] {
  transition-property: transform,color,border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[transform\2c opacity\2c background-color\] {
  transition-property: transform,opacity,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[transform\2c opacity\2c color\] {
  transition-property: transform,opacity,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[width\2c background-color\] {
  transition-property: width,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.product-ui .duration-150 {
  transition-duration: 150ms;
}
.product-ui .duration-200 {
  transition-duration: 200ms;
}
.product-ui .duration-300 {
  transition-duration: 300ms;
}
.product-ui .duration-500 {
  transition-duration: 500ms;
}
.product-ui .duration-700 {
  transition-duration: 700ms;
}
.product-ui .duration-\[280ms\] {
  transition-duration: 280ms;
}
.product-ui .duration-\[var\(--modal-close-dur\)\] {
  transition-duration: var(--modal-close-dur);
}
.product-ui .duration-\[var\(--modal-open-dur\)\] {
  transition-duration: var(--modal-open-dur);
}
.product-ui .ease-\[cubic-bezier\(0\.2\2c 0\.8\2c 0\.2\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.2,0.8,0.2,1);
}
.product-ui .ease-\[cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.22,1,0.36,1);
}
.product-ui .ease-\[cubic-bezier\(0\.32\2c 0\.72\2c 0\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.32,0.72,0,1);
}
.product-ui .ease-\[var\(--modal-ease\)\] {
  transition-timing-function: var(--modal-ease);
}
.product-ui .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.product-ui .will-change-\[left\2c top\2c width\2c height\] {
  will-change: left,top,width,height;
}
.product-ui .\@container {
  container-type: inline-size;
}
.product-ui .\[--panel-translate-y\:8px\] {
  --panel-translate-y: 8px;
}
.product-ui .\[--summary-width\:304px\] {
  --summary-width: 304px;
}
.product-ui .\[--summary-width\:440px\] {
  --summary-width: 440px;
}
.product-ui .\[color-scheme\:light\] {
  color-scheme: light;
}
.product-ui .\[container-type\:size\] {
  container-type: size;
}
.product-ui .\[corner-shape\:round\] {
  corner-shape: round;
}
.product-ui .\[corner-shape\:squircle\] {
  corner-shape: squircle;
}
.product-ui .\[counter-increment\:line_0\] {
  counter-increment: line 0;
}
.product-ui .\[counter-reset\:line\] {
  counter-reset: line;
}
.product-ui .\[field-sizing\:content\] {
  field-sizing: content;
}
.product-ui .\[mask-image\:linear-gradient\(to_bottom\2c black_55\%\2c transparent\)\] {
  -webkit-mask-image: linear-gradient(to bottom,black 55%,transparent);
          mask-image: linear-gradient(to bottom,black 55%,transparent);
}
.product-ui .\[padding-block\:0\] {
  padding-block: 0;
}
.product-ui .\[scrollbar-width\:none\] {
  scrollbar-width: none;
}
.product-ui .\[tab-size\:4\] {
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}
.product-ui .\[text-box\:trim-both_cap_alphabetic\] {
  text-box: trim-both cap alphabetic;
}
.product-ui .\[width\:142\.857\%\] {
  width: 142.857%;
}

/* transitions-dev — semantic tokens + the t-* transitions used by the app.
   (card resize / skeleton reveal / icon swap / panel reveal / page side-by-side). */
.product-ui {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-dur: 600ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Modal open / close — scale-up from center, softer scale-down on close. */
.product-ui .t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.product-ui .t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.product-ui .t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-modal {
    transition: none !important;
  }
}

/* Skeleton loader and reveal — pulse placeholder, then cross-fade + cross-blur to content. */
.product-ui .t-skel {
  position: relative;
}
.product-ui .t-skel-skeleton,
.product-ui .t-skel-content {
  position: absolute;
  inset: 0;
}
.product-ui .t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel-content {
  z-index: 2;
  opacity: 0;
  transition: opacity var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
}
.product-ui .t-skel.is-revealed .t-skel-content {
  opacity: 1;
}
.product-ui .t-skel.is-resetting .t-skel-skeleton,
.product-ui .t-skel.is-resetting .t-skel-content {
  transition: none !important;
}
.product-ui .t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--pulse-min);
  }
}
.product-ui .t-memory-detail-reveal {
  --pulse-dur: 900ms;
  --reveal-dur: 260ms;
  min-height: 440px;
}
.product-ui .t-memory-detail-reveal.is-revealed {
  min-height: 0;
}
.product-ui .t-memory-detail-reveal.is-revealed .t-skel-content {
  position: static;
}
.product-ui .t-sidebar-section-reveal {
  --pulse-dur: 900ms;
  --reveal-dur: 240ms;
  --reveal-blur: 2px;
  min-height: 104px;
}
.product-ui .t-sidebar-section-reveal.is-revealed {
  min-height: 0;
}
.product-ui .t-sidebar-section-reveal.is-revealed .t-skel-content {
  position: static;
}
.product-ui .t-sidebar-section-reveal:not(.is-revealed) .t-skel-content {
  pointer-events: none;
}
.product-ui .t-sidebar-segment-reveal {
  --pulse-dur: 850ms;
  --reveal-dur: 180ms;
  --reveal-blur: 2px;
  display: inline-flex;
  flex-shrink: 0;
}
.product-ui .t-sidebar-segment-reveal.is-revealed .t-skel-content {
  position: static;
}
.product-ui .t-sidebar-segment-reveal:not(.is-revealed) .t-skel-content {
  pointer-events: none;
}
.product-ui .t-access-avatar-reveal {
  --pulse-dur: 800ms;
  --reveal-dur: 180ms;
  --reveal-blur: 1px;
  min-height: 24px;
}
.product-ui .t-access-avatar-reveal.is-revealed .t-skel-content {
  position: static;
}
.product-ui .t-access-avatar-reveal:not(.is-revealed) .t-skel-content {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-skel-skeleton,
  .product-ui .t-skel-content {
    transition: none !important;
  }
  .product-ui .t-skel-skeleton.is-pulsing > * {
    animation: none !important;
  }
}

/* Texts reveal — staged content rises into place with a small blur. */
.product-ui .t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity;
}
.product-ui .t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}

.product-ui .t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
}
.product-ui .t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity 200ms ease,
    transform 0s linear;
  transition-delay: 0s;
}
.product-ui .t-plan-reveal {
  --stagger-dur: 360ms;
  --stagger-distance: 6px;
  --stagger-stagger: 24ms;
  --stagger-blur: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-stagger-line {
    transition: none !important;
  }
}

/* Card resize — collapse to/from auto height via the grid-rows 1fr↔0fr trick
   (the snippet's width/height tween can't animate an auto height). */
.product-ui .t-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--resize-dur) var(--resize-ease);
}
.product-ui .t-collapse[data-open='false'] {
  grid-template-rows: 0fr;
}
.product-ui .t-collapse > .t-collapse-inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-collapse {
    transition: none !important;
  }
}

/* Scroll-edge fade — soften the hard clip at the top/bottom of a scroll
   container with a mask that reacts to scroll position: no fade at the edge
   you are already at, no fade at all when the content fits. Pure CSS via
   scroll-driven animations (self timeline); when the element does not
   scroll, the timeline is inactive and both fades stay at their 0px
   initial values. */
@property --t-scroll-fade-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --t-scroll-fade-bottom {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.product-ui .t-scroll-fade {
  --t-scroll-fade-size: 1.5rem;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--t-scroll-fade-top),
    #000 calc(100% - var(--t-scroll-fade-bottom)),
    transparent 100%
  );

          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--t-scroll-fade-top),
    #000 calc(100% - var(--t-scroll-fade-bottom)),
    transparent 100%
  );
  animation:
    t-scroll-fade-in-top linear both,
    t-scroll-fade-out-bottom linear both;
  animation-timeline: scroll(self), scroll(self);
  animation-range:
    0 var(--t-scroll-fade-size),
    calc(100% - var(--t-scroll-fade-size)) 100%;
}
@keyframes t-scroll-fade-in-top {
  from {
    --t-scroll-fade-top: 0px;
  }
  to {
    --t-scroll-fade-top: var(--t-scroll-fade-size, 1.5rem);
  }
}
@keyframes t-scroll-fade-out-bottom {
  from {
    --t-scroll-fade-bottom: var(--t-scroll-fade-size, 1.5rem);
  }
  to {
    --t-scroll-fade-bottom: 0px;
  }
}

/* Hover marquee — a single-line label that fades out at the inline edge it is
   clipped on instead of ending in an ellipsis. Same scroll-driven technique as
   .t-scroll-fade on the inline axis: no fade when the label fits, and as
   useHoverMarquee scrolls it in place the fade moves from the end to the start.
   The fade widens a little while the row is hovered or focused; it stays short
   so a title runs nearly to the row's edge unless something needs the space. */
@property --t-marquee-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --t-marquee-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.product-ui .t-marquee {
  --t-marquee-fade-size: 0.75rem;

  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--t-marquee-fade-start),
    #000 calc(100% - var(--t-marquee-fade-end)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--t-marquee-fade-start),
    #000 calc(100% - var(--t-marquee-fade-end)),
    transparent 100%
  );
  animation:
    t-marquee-fade-in-start linear both,
    t-marquee-fade-out-end linear both;
  animation-timeline: scroll(self inline), scroll(self inline);
  animation-range:
    0 var(--t-marquee-fade-size),
    calc(100% - var(--t-marquee-fade-size)) 100%;
}
.product-ui .group:hover .t-marquee,
.product-ui .group:focus-visible .t-marquee {
  --t-marquee-fade-size: 1rem;
}
@keyframes t-marquee-fade-in-start {
  from {
    --t-marquee-fade-start: 0px;
  }
  to {
    --t-marquee-fade-start: var(--t-marquee-fade-size, 0.75rem);
  }
}
@keyframes t-marquee-fade-out-end {
  from {
    --t-marquee-fade-end: var(--t-marquee-fade-size, 0.75rem);
  }
  to {
    --t-marquee-fade-end: 0px;
  }
}

/* Card resize — tween an element's width/height when its layout state changes
   (used to collapse/expand the sidebar to/from zero width). */
.product-ui .t-resize {
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-resize {
    transition: none !important;
  }
}

/* Icon swap — both icons stacked in one grid cell; data-state picks the winner. */
.product-ui .t-icon-swap {
  position: relative;
  display: inline-grid;
}
.product-ui .t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.product-ui .t-icon-swap[data-state='a'] .t-icon[data-icon='a'],
.product-ui .t-icon-swap[data-state='b'] .t-icon[data-icon='b'] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.product-ui .t-icon-swap[data-state='a'] .t-icon[data-icon='b'],
.product-ui .t-icon-swap[data-state='b'] .t-icon[data-icon='a'] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-icon-swap .t-icon {
    transition: none !important;
  }
}

/* Panel reveal — slide + fade + cross-blur into a region. */
.product-ui .t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity;
}
.product-ui .t-panel-slide[data-open='true'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease);
}
/* A sent message and its sender enter together. Reuse the panel reveal with
   a smaller travel; the class is removed when the one-shot entrance finishes. */
.product-ui .t-message-send {
  --panel-translate-y: 6px;
  --panel-open-dur: 250ms;
}
/* Establish the entrance pose immediately before animating to data-open=true.
   Transitioning into this pose would reverse at zero progress in the same frame. */
.product-ui .t-message-send[data-open='false'] {
  transition: none;
}
.product-ui .t-agent-memory-event {
  --panel-translate-y: 6px;
  --panel-open-dur: 220ms;
  --panel-close-dur: 150ms;
}
.product-ui .t-agent-composer-reveal {
  --panel-translate-y: 14px;
  --panel-open-dur: 360ms;
  --panel-close-dur: 160ms;
  --panel-blur: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-panel-slide {
    transition: none !important;
  }
}

/* Turn fold (Worked for Xs) — grid-rows collapse with the panel-reveal fade +
   cross-blur. Content stays mounted; the inner row clips via overflow. */
.product-ui .t-turn-fold {
  --panel-open-dur: 320ms;
  --panel-close-dur: 200ms;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition:
    grid-template-rows var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
}
.product-ui .t-turn-fold.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  filter: blur(0);
  transition-duration: var(--panel-open-dur);
}
.product-ui .t-turn-fold > div {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-turn-fold {
    transition: none !important;
  }
}

/* Tool run — a new call replaces the previous one in the same slot: the
   incoming line rises in from just below as the old one is dropped. The
   earlier calls unfold above it with the same grid-rows fold as a turn. */
@keyframes t-tool-run-in {
  from {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(var(--panel-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.product-ui .t-tool-run-latest {
  animation: t-tool-run-in 220ms var(--panel-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-tool-run-latest {
    animation: none !important;
  }
}

/* An action chip or card the transcript adds under an answer settles in the
   same way. */
.product-ui .t-chat-card-in {
  animation: t-tool-run-in 220ms var(--panel-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-chat-card-in {
    animation: none !important;
  }
}

/* Channel bubble — a new post springs up from its tail, like iMessage. */
@keyframes t-bubble-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.product-ui .t-bubble-in {
  animation: t-bubble-in 340ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  transform-origin: bottom left;
}
.product-ui .t-bubble-in-mine {
  animation: t-bubble-in 340ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  transform-origin: bottom right;
}
/* Typing dots — each rises in turn. */
@keyframes t-typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.product-ui .t-typing-dot {
  animation: t-typing-dot 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-bubble-in,
  .product-ui .t-bubble-in-mine,
  .product-ui .t-typing-dot {
    animation: none !important;
  }
}

/* Share card — a view, chip or receipt settles in; a check pops on. */
@keyframes t-share-in {
  from {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(var(--panel-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes t-share-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.product-ui .t-share-in {
  animation: t-share-in 220ms var(--panel-ease) both;
}
.product-ui .t-share-pop {
  animation: t-share-pop 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-share-in,
  .product-ui .t-share-pop {
    animation: none;
  }
}

/* Update notification — slides up into the sidebar's bottom-left corner. */
@keyframes update-notif-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.product-ui .update-notif-enter {
  animation: update-notif-in 280ms var(--panel-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .update-notif-enter {
    animation: none;
  }
}

/* Page side-by-side — list/detail transitions for agent history. */
.product-ui .t-page-slide {
  position: relative;
}
.product-ui .t-page-slide .t-page[data-page-id='1'] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.product-ui .t-page-slide .t-page[data-page-id='2'] {
  --t-page-from-x: var(--page-slide-distance);
}
/* History (page 3) sits spatially between home (1) and conversation (2): it
   enters from the right of home, but exits left when a conversation opens on
   top of it. */
.product-ui .t-page-slide .t-page[data-page-id='3'] {
  --t-page-from-x: var(--page-slide-distance);
}
.product-ui .t-page-slide[data-page='2'] .t-page[data-page-id='3'] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.product-ui .t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  transition:
    opacity var(--page-fade-dur) var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform;
}
.product-ui .t-page-slide[data-page='1'] .t-page[data-page-id='1'],
.product-ui .t-page-slide[data-page='2'] .t-page[data-page-id='2'],
.product-ui .t-page-slide[data-page='3'] .t-page[data-page-id='3'] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
  transition-delay: var(--page-stagger);
}

/* Multi-step bind wizard (AWS: 5 steps, Volcengine: 3) — variant of the page
   slide. Pages stack in one grid cell (instead of absolute + inset) so the
   dialog keeps the height of the tallest step. Direction is relative to the
   active step: earlier steps exit left, later steps wait on the right — the
   per-page --t-page-from-x is set inline from React, replacing the fixed
   page-1/page-2 rules above. */
.product-ui .t-wizard-slide {
  display: grid;
}
.product-ui .t-wizard-slide .t-page {
  position: static;
  grid-area: 1 / 1;
  min-width: 0;
}
.product-ui .t-wizard-slide[data-page='3'] .t-page[data-page-id='3'],
.product-ui .t-wizard-slide[data-page='4'] .t-page[data-page-id='4'],
.product-ui .t-wizard-slide[data-page='5'] .t-page[data-page-id='5'] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
  transition-delay: var(--page-stagger);
}
.product-ui .t-detail-sidebar-frame {
  overflow: hidden;
  transition:
    width 200ms ease-out,
    min-width 200ms ease-out,
    border-color 200ms ease-out;
}
.product-ui .t-detail-sidebar-frame[data-open='false'] {
  border-left-color: transparent;
}
.product-ui .t-detail-sidebar-content {
  --panel-translate-y: 10px;
  --panel-open-dur: 220ms;
  --panel-close-dur: 150ms;
  --panel-blur: 2px;
}
.product-ui .t-detail-loaded-content {
  --panel-translate-y: 14px;
  --panel-open-dur: 280ms;
  --panel-close-dur: 160ms;
  --panel-blur: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-page-slide .t-page {
    transition: none !important;
  }
}

/* Sidebar navigation hierarchy slide — directional, key-based.
   Drilling deeper (--nav-dir: 1) slides the new section list in from the
   right while the old one exits left; going back (--nav-dir: -1) reverses.
   Same-level switches (--nav-dir: 0) cross-fade with a soft blur. Both layers
   use keyframe animations (not transitions) so the entering list — which
   re-mounts on every navigation — always replays from its start offset. */
.product-ui .t-nav-stack {
  position: relative;
}
.product-ui .t-nav-stack__layer[data-role='out'] {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
}
.product-ui .t-nav-stack__layer[data-anim='enter'] {
  /* No persistent will-change: the entering layer outlives its animation for
     the whole view, so a standing compositing-layer hint would leak GPU memory.
     Browsers already promote a running keyframe animation on their own. */
  animation: t-nav-enter var(--page-slide-dur) var(--page-slide-ease) both;
}
.product-ui .t-nav-stack__layer[data-anim='exit'] {
  animation: t-nav-exit var(--page-slide-dur) var(--page-slide-ease) both;
  /* Safe here — the outgoing layer unmounts when the transition ends. */
  will-change: transform, opacity;
}
@keyframes t-nav-enter {
  from {
    opacity: 0;
    transform: translateX(calc(var(--page-slide-distance) * var(--nav-dir, 0)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes t-nav-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--page-slide-distance) * var(--nav-dir, 0) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-nav-stack__layer {
    animation: none !important;
  }
  .product-ui .t-nav-stack__layer[data-role='out'] {
    display: none !important;
  }
}

/* Workspace tabs — quiet inactive labels around one compact active pill. */
.product-ui .t-tab {
  display: flex;
  flex: 0 1 200px;
  min-width: 76px;
  max-width: 200px;
  overflow: hidden;
  position: relative;
  transform-origin: left center;
  transition:
    opacity var(--tabs-dur) var(--tabs-ease),
    transform var(--tabs-dur) var(--tabs-ease);
  will-change: opacity, transform;
}
.product-ui .t-tab[data-active='true'] {
  min-width: 128px;
}
.product-ui .t-tab:not([data-active]) + .t-tab:not([data-active])::before,

.product-ui .t-tab:not([data-active]) + .t-tab-closing + .t-tab:not([data-active])::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(var(--color-line-control), 0.85);
}
.product-ui .t-tab[data-dragging='true'] {
  opacity: 0.95;
  overflow: visible;
  position: relative;
  z-index: 20;
}
.product-ui .t-tab[data-dragging='true'] .t-tab-content {
  pointer-events: none;
  transform: translateX(var(--tab-drag-x, 0px));
  transition: none !important;
}
.product-ui .t-tab[data-preview-shift] {
  transform: translateX(var(--tab-preview-x, 0px));
}
.product-ui .t-tab-strip[data-drop-settling='true'] .t-tab,
.product-ui .t-tab-strip[data-drop-settling='true'] .t-tab-content {
  transition: none !important;
}
.product-ui .t-tab-content {
  width: 100%;
  min-width: 0;
  transition:
    opacity var(--tabs-dur) var(--tabs-ease),
    transform 140ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* A just-closed tab, kept only while it collapses so its neighbours slide over. */
.product-ui .t-tab-closing {
  display: flex;
  flex: none;
  overflow: hidden;
  animation: t-tab-close var(--tabs-dur) var(--tabs-ease) forwards;
}
.product-ui .t-tab-closing > .t-tab {
  flex: 0 0 var(--tab-closing-w);
  min-width: 0;
}
@keyframes t-tab-close {
  from {
    width: var(--tab-closing-w);
    opacity: 1;
  }
  to {
    width: 0;
    opacity: 0;
    /* Absorb the strip's gap too, so nothing snaps when the copy unmounts. */
    margin-right: -0.125rem;
  }
}
/* Hover-revealed trailing controls inside a tab (favorite star, close). */
.product-ui .t-workspace-tab-action {
  transition:
    color var(--tabs-dur) var(--tabs-ease),
    opacity var(--tabs-dur) var(--tabs-ease);
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-tab,
  .product-ui .t-workspace-tab-action,
  .product-ui .t-tab-content {
    transition: none !important;
  }
}

/* Journal timeline code blocks: shiki emits inline token colors;
   strip its own chrome so the block inherits the journal card. */
.product-ui .journal-shiki pre {
  margin: 0;
  padding: 0;
  background: transparent !important;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.45;
}
.product-ui .journal-shiki code {
  white-space: inherit;
  word-break: inherit;
}

/* Mongo document results use Shiki token colours while the surrounding card
   owns spacing, borders, and background. Keep JSON lines intact horizontally. */
.product-ui .mongo-json-shiki pre {
  margin: 0;
  padding: 0;
  background: transparent !important;
  font-size: 10.5px;
  line-height: 17px;
}
.product-ui .mongo-json-shiki code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  white-space: pre;
}

/* Split PoC: anchor dock controls to each pane, not the app viewport. */
.product-ui [data-workspace-split-pane] .workspace-dock-toggle {
  position: absolute;
  right: calc(0.75rem + var(--sheet-inset));
}

/* Inactive headers receive clicks to select their pane. The active pane keeps
   native window dragging; tab buttons retain their existing no-drag regions. */
.product-ui [data-split-multiple='true'][data-pane-active='false'] .titlebar-drag {
  -webkit-app-region: no-drag;
}

/* With the sidebar hidden, the header in the top-left corner sits under macOS's
   native traffic lights; its toggle lands where the sidebar's own did. Keep the
   clearance stable at every app zoom. */
.product-ui.platform-darwin:not(.window-fullscreen) .workspace-corner-titlebar {
  padding-left: calc(28px + 54px / var(--zoom-factor, 1));
}

/* Home cards grid (react-grid-layout): the dragged card follows the pointer,
   lifted and translucent, the others make room, and an accent outline marks
   where it lands. The extra .home-grid outranks the library's stylesheet,
   which loads after this one. */
.product-ui .home-grid .react-grid-item.react-grid-placeholder {
  border: 1.5px dashed rgba(var(--color-text-primary), 0.7);
  border-radius: 0.5rem;
  background: rgba(var(--color-text-primary), 0.08);
  opacity: 1;
}

.product-ui .home-grid .react-grid-item.react-draggable-dragging {
  border-radius: 0.5rem;
  background-color: rgb(var(--color-background-base));
  opacity: 0.92;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .home-grid .react-grid-item,
  .product-ui .home-grid .react-grid-item.react-grid-placeholder {
    transition: none;
  }
}

.product-ui .react-grid-item > .react-resizable-handle::after {
  border-color: rgb(128 128 128 / 0.6);
}

/* The home page is text-selectable, so pressing a card's header to drag it
   would start a selection. The header is the drag handle, never text to copy,
   and nothing on the page selects while a card is moving. Unlayered, so these
   win over the base layer's .selectable rule. */
.product-ui .home-card-drag,
.product-ui .home-card-drag * {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.product-ui .selectable:has(.react-draggable-dragging, .resizing), .product-ui .selectable:has(.react-draggable-dragging, .resizing) * {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

/* Sidebar sessions share the existing resize and stagger motion tokens. */
.product-ui .t-sidebar-session {
  --stagger-dur: var(--resize-dur);
  --stagger-distance: 4px;
  --stagger-stagger: 0ms;
}
@starting-style {
  .product-ui .t-sidebar-session[data-open='true'] {
    grid-template-rows: 0fr;
  }
  .product-ui .t-sidebar-session.is-shown > .t-stagger-line {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-sidebar-session > .t-stagger-line {
    transform: none !important;
  }
}

/* Chat summary panel: eases in from the right edge. */
@keyframes t-summary-in {
  from {
    opacity: 0;
    transform: translateX(8px);
    filter: blur(var(--panel-blur));
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.product-ui .t-summary-in {
  animation: t-summary-in 220ms var(--panel-ease) both;
}
.product-ui .t-summary-out {
  animation: t-summary-in 200ms var(--panel-ease) reverse both;
}
/* The slot beside the transcript opens and closes with the dock's timing, so
   the transcript narrows and widens with it instead of jumping. */
@keyframes t-summary-slot-in {
  from {
    width: 0;
  }
}
@keyframes t-summary-slot-out {
  to {
    width: 0;
  }
}
.product-ui .t-summary-slot-in {
  animation: t-summary-slot-in 300ms var(--panel-ease) both;
}
.product-ui .t-summary-slot-out {
  animation: t-summary-slot-out 300ms var(--panel-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-summary-in,
  .product-ui .t-summary-out,
  .product-ui .t-summary-slot-in,
  .product-ui .t-summary-slot-out {
    animation: none;
  }
}

/* Session heading changes use the text-swap motion tokens without delaying navigation. */
.product-ui .t-session-heading {
  animation: t-session-heading-enter var(--text-swap-dur) var(--text-swap-ease) both;
}
@keyframes t-session-heading-enter {
  from {
    opacity: 0;
    transform: translateY(var(--text-swap-translate-y));
    filter: blur(var(--text-swap-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .t-session-heading {
    animation: none;
  }
}

/* Small resource labels need theme-specific contrast, including hover fills. */
.product-ui {
  --resource-linear: rgb(var(--color-text-secondary));
  --resource-started: #f2c94c;
  --resource-triage: #fc7840;
  --resource-open: #66d98c;
  --resource-merged: rgb(var(--color-text-tertiary));
  --resource-closed: #ff9aa3;
  --resource-failing: #ff9aa3;
  --resource-pending: #f2c94c;
}
.product-ui.light {
  --resource-linear: rgb(var(--color-text-secondary));
  --resource-started: #9a6700;
  --resource-triage: #c2410c;
  --resource-open: #16713a;
  --resource-merged: rgb(var(--color-text-tertiary));
  --resource-closed: #b42332;
  --resource-failing: #b42332;
  --resource-pending: #9a6700;
}
.product-ui .session-resource-linear {
  color: var(--resource-linear);
}
.product-ui .session-resource-triage {
  color: var(--resource-triage);
}
.product-ui .session-resource-started {
  color: var(--resource-started);
}
.product-ui .session-resource-open {
  color: var(--resource-open);
}
.product-ui .session-resource-merged {
  color: var(--resource-merged);
}
.product-ui .session-resource-closed {
  color: var(--resource-closed);
}
.product-ui .session-resource-failing {
  color: var(--resource-failing);
}
.product-ui .session-resource-pending {
  color: var(--resource-pending);
}
/* A sidebar row lifts its title for the detail line only when that line has
   something to show; rows without one just change their background on hover. */
.product-ui [data-sidebar-row]:has([data-row-detail]:not(:empty)):is(:hover, :focus-within) [data-row-title] {
  transform: translateY(-7px);
}

/* Under a fixed header, scrolled content fades out over 12px (see HeaderEdge). */
@property --header-edge-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.product-ui .header-edge {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--header-edge-fade));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--header-edge-fade));
  transition: --header-edge-fade 200ms ease-out;
}
.product-ui .header-edge[data-scrolled] {
  --header-edge-fade: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .header-edge {
    transition: none;
  }
}

/* A row's resting state and its hover actions trade places with a short slide. */
@keyframes sidebar-swap-in {
  from {
    opacity: 0;
    transform: translateX(4px);
  }
}
.product-ui .sidebar-swap-in {
  animation: sidebar-swap-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .product-ui .sidebar-swap-in {
    animation: none;
  }
}

/*
 * The workspace is a sheet on a desk: the sidebar and window chrome sit on the
 * canvas, and each working area is one raised sheet, separated by its edge and
 * elevation instead of dividers. A sheet inside a sheet (a dock tab's page
 * inside the dock) stays flat.
 */
.product-ui .workspace-content-surface {
  margin: var(--sheet-inset);
  border-radius: var(--sheet-radius);
  background-color: rgb(var(--color-surface-sheet));
  box-shadow: var(--sheet-shadow);
}
/*
 * The 44px title-bar row starts one sheet inset below the window edge, so the
 * traffic lights (trafficLightPositionFor, TITLEBAR_TOP_INSET), a sheet's top
 * row and the sidebar's header share one centre line, and a 28px control in
 * either row keeps space above and below it. All are CSS px, so they stay
 * aligned at every zoom level.
 */
.product-ui .sheet-titlebar-row {
  height: 44px;
}
.product-ui .desk-titlebar-row {
  height: calc(44px + var(--sheet-inset));
  padding-top: var(--sheet-inset);
}
/* Two sheets side by side share one desk gap instead of doubling it. */
.product-ui .workspace-content-surface--leading {
  margin-right: calc(var(--sheet-inset) / 2);
}
/* Beside the dock the session keeps its width as the dock slides over it, less
   the sheet's own margins, or its title bar would run past the sheet's edge. */
.product-ui .workspace-content-surface--leading > .workspace-session-body {
  min-width: calc(100cqw - var(--workspace-dock-width) - 1.5 * var(--sheet-inset));
}
.product-ui .workspace-content-surface--trailing {
  margin-left: calc(var(--sheet-inset) / 2);
}
/* A sheet squeezed to nothing while the dock is expanded leaves no margin or
   edge behind, so the expanded dock gets the whole desk. */
.product-ui .workspace-content-surface--collapsed {
  margin: 0;
  box-shadow: none;
}
.product-ui .workspace-content-surface .workspace-content-surface {
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
/* The desk behind the sheets matches the sidebar it continues. */
.product-ui .workspace-desk {
  background-color: rgb(var(--color-surface-canvas));
}
.product-ui.light .workspace-desk {
  background-color: rgba(var(--color-surface-canvas), 0.65);
}
.product-ui .workspace-content-surface .agent-page-layout,
.product-ui .workspace-content-surface .workspace-page-toolbar {
  background-color: transparent;
}

/* The Connectors list and a connector's detail page use a quiet neutral focus outline instead of
   the app's inset focus ring, so it keeps contrast in both themes. */
.product-ui .connector-quiet-focus
  :where(button, a[href], summary, [role='button'], [tabindex]:not([tabindex='-1'])):focus-visible {
  box-shadow: none;
  outline: 1px solid rgb(var(--color-text-tertiary));
  outline-offset: -1px;
}

/* Connector rows: an overflowing description slides to its end on hover or keyboard focus, then
   back (see OverflowMarquee). Reduced motion wraps it to two lines instead of moving it. */
@keyframes connector-marquee {
  0%,
  15% {
    text-indent: 0;
  }
  50%,
  65% {
    text-indent: var(--marquee-shift);
  }
  100% {
    text-indent: 0;
  }
}

.product-ui .group:hover .connector-marquee,
.product-ui .group:has(:focus-visible) .connector-marquee {
  animation: connector-marquee var(--marquee-duration) ease-in-out 200ms 1;
  text-overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .group:hover .connector-marquee,
  .product-ui .group:has(:focus-visible) .connector-marquee {
    animation: none;
  }
}

.product-ui .marker\:text-tertiary *::marker {
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .marker\:text-tertiary::marker {
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .placeholder\:text-secondary::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .placeholder\:text-secondary::placeholder {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .placeholder\:text-tertiary::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .placeholder\:text-tertiary::placeholder {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.product-ui .before\:-inset-x-1\.5::before {
  content: var(--tw-content);
  left: -0.375rem;
  right: -0.375rem;
}

.product-ui .before\:-inset-y-0\.5::before {
  content: var(--tw-content);
  top: -0.125rem;
  bottom: -0.125rem;
}

.product-ui .before\:-left-1\.5::before {
  content: var(--tw-content);
  left: -0.375rem;
}

.product-ui .before\:top-1\.5::before {
  content: var(--tw-content);
  top: 0.375rem;
}

.product-ui .before\:mr-4::before {
  content: var(--tw-content);
  margin-right: 1rem;
}

.product-ui .before\:inline-block::before {
  content: var(--tw-content);
  display: inline-block;
}

.product-ui .before\:h-4::before {
  content: var(--tw-content);
  height: 1rem;
}

.product-ui .before\:w-6::before {
  content: var(--tw-content);
  width: 1.5rem;
}

.product-ui .before\:w-px::before {
  content: var(--tw-content);
  width: 1px;
}

.product-ui .before\:select-none::before {
  content: var(--tw-content);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.product-ui .before\:bg-surface-sunken::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sunken), var(--tw-bg-opacity, 1));
}

.product-ui .before\:text-right::before {
  content: var(--tw-content);
  text-align: right;
}

.product-ui .before\:font-mono::before {
  content: var(--tw-content);
  font-family: SF Mono, Menlo, Monaco, monospace;
}

.product-ui .before\:text-\[13px\]::before {
  content: var(--tw-content);
  font-size: 13px;
}

.product-ui .before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.product-ui .before\:content-\[counter\(line\)\]::before {
  --tw-content: counter(line);
  content: var(--tw-content);
}

.product-ui .before\:\[counter-increment\:line\]::before {
  content: var(--tw-content);
  counter-increment: line;
}

.product-ui .after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.product-ui .after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.product-ui .after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.product-ui .first\:ml-0:first-child {
  margin-left: 0px;
}

.product-ui .first\:mt-0:first-child {
  margin-top: 0px;
}

.product-ui .first\:border-t-0:first-child {
  border-top-width: 0px;
}

.product-ui .first\:pt-0:first-child {
  padding-top: 0px;
}

.product-ui .last\:mb-0:last-child {
  margin-bottom: 0px;
}

.product-ui .last\:border-0:last-child {
  border-width: 0px;
}

.product-ui .last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.product-ui .last\:border-r-0:last-child {
  border-right-width: 0px;
}

.product-ui .last\:pb-0:last-child {
  padding-bottom: 0px;
}

.product-ui .empty\:hidden:empty {
  display: none;
}

.product-ui .focus-within\:border-line-control:focus-within {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .focus-within\:border-line-focus:focus-within {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-focus), var(--tw-border-opacity, 1));
}

.product-ui .focus-within\:bg-\[var\(--sidebar-overlay-focus\)\]:focus-within {
  background-color: var(--sidebar-overlay-focus);
}

.product-ui .focus-within\:bg-main:focus-within {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-background-base), var(--tw-bg-opacity, 1));
}

.product-ui .focus-within\:bg-state-hover:focus-within {
  background-color: var(--color-state-hover);
}

.product-ui .focus-within\:ring-1:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus-within\:ring-line-control:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-control), var(--tw-ring-opacity, 1));
}

.product-ui .focus-within\:ring-line-focus:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-focus), var(--tw-ring-opacity, 1));
}

.product-ui .hover\:-translate-x-1\/2:hover {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .hover\:border-action-primary\/50:hover {
  border-color: rgba(var(--color-action-primary), 0.5);
}

.product-ui .hover\:border-action-primary\/60:hover {
  border-color: rgba(var(--color-action-primary), 0.6);
}

.product-ui .hover\:border-amber-500\/60:hover {
  border-color: rgb(245 158 11 / 0.6);
}

.product-ui .hover\:border-error\/50:hover {
  border-color: rgba(var(--color-error), 0.5);
}

.product-ui .hover\:border-line-control:hover {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .hover\:border-line-control\/55:hover {
  border-color: rgba(var(--color-line-control), 0.55);
}

.product-ui .hover\:border-line-control\/60:hover {
  border-color: rgba(var(--color-line-control), 0.6);
}

.product-ui .hover\:border-red-500\/40:hover {
  border-color: rgb(239 68 68 / 0.4);
}

.product-ui .hover\:\!bg-state-hover:hover {
  background-color: var(--color-state-hover) !important;
}

.product-ui .hover\:\!bg-state-selected:hover {
  background-color: var(--color-state-selected) !important;
}

.product-ui .hover\:bg-\[rgb\(245\2c 244\2c 245\)\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 244 245 / var(--tw-bg-opacity, 1));
}

.product-ui .hover\:bg-\[var\(--sidebar-overlay-hover\)\]:hover {
  background-color: var(--sidebar-overlay-hover);
}

.product-ui .hover\:bg-action-primary\/90:hover {
  background-color: rgba(var(--color-action-primary), 0.9);
}

.product-ui .hover\:bg-error\/10:hover {
  background-color: rgba(var(--color-error), 0.1);
}

.product-ui .hover\:bg-error\/15:hover {
  background-color: rgba(var(--color-error), 0.15);
}

.product-ui .hover\:bg-error\/20:hover {
  background-color: rgba(var(--color-error), 0.2);
}

.product-ui .hover\:bg-error\/5:hover {
  background-color: rgba(var(--color-error), 0.05);
}

.product-ui .hover\:bg-main\/70:hover {
  background-color: rgba(var(--color-background-base), 0.7);
}

.product-ui .hover\:bg-orange-400\/10:hover {
  background-color: rgb(251 146 60 / 0.1);
}

.product-ui .hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}

.product-ui .hover\:bg-state-hover:hover {
  background-color: var(--color-state-hover);
}

.product-ui .hover\:bg-state-selected:hover {
  background-color: var(--color-state-selected);
}

.product-ui .hover\:bg-surface\/80:hover {
  background-color: rgba(var(--color-background-surface), 0.8);
}

.product-ui .hover\:bg-warning\/20:hover {
  background-color: rgba(var(--color-warning), 0.2);
}

.product-ui .hover\:bg-warning\/25:hover {
  background-color: rgba(var(--color-warning), 0.25);
}

.product-ui .hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.product-ui .hover\:from-\[\#fa9f4c\]:hover {
  --tw-gradient-from: #fa9f4c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 159 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.product-ui .hover\:to-\[\#f3781f\]:hover {
  --tw-gradient-to: #f3781f var(--tw-gradient-to-position);
}

.product-ui .hover\:text-\[rgb\(15\2c 14\2c 17\)\]:hover {
  --tw-text-opacity: 1;
  color: rgb(15 14 17 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-error:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-error), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-inverse:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-inverse), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-main:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-main\/80:hover {
  color: rgba(var(--color-text-base), 0.8);
}

.product-ui .hover\:text-orange-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-primary), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-secondary:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-status-danger:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-status-danger), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-violet-200:hover {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-warning:hover {
  --tw-text-opacity: 1;
  color: rgba(var(--color-warning), var(--tw-text-opacity, 1));
}

.product-ui .hover\:text-warning\/70:hover {
  color: rgba(var(--color-warning), 0.7);
}

.product-ui .hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.product-ui .hover\:underline:hover {
  text-decoration-line: underline;
}

.product-ui .hover\:decoration-current:hover {
  text-decoration-color: currentColor;
}

.product-ui .hover\:opacity-80:hover {
  opacity: 0.8;
}

.product-ui .hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.product-ui .focus\:border-error:focus {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-error), var(--tw-border-opacity, 1));
}

.product-ui .focus\:border-line-control:focus {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .focus\:border-line-focus:focus {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-focus), var(--tw-border-opacity, 1));
}

.product-ui .focus\:bg-action-primary\/90:focus {
  background-color: rgba(var(--color-action-primary), 0.9);
}

.product-ui .focus\:bg-state-hover:focus {
  background-color: var(--color-state-hover);
}

.product-ui .focus\:text-main:focus {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .focus\:opacity-100:focus {
  opacity: 1;
}

.product-ui .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.product-ui .focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus\:ring-line-control:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-control), var(--tw-ring-opacity, 1));
}

.product-ui .focus\:ring-line-focus:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-focus), var(--tw-ring-opacity, 1));
}

.product-ui .focus-visible\:inline-flex:focus-visible {
  display: inline-flex;
}

.product-ui .focus-visible\:rounded-sm:focus-visible {
  border-radius: 0.125rem;
}

.product-ui .focus-visible\:bg-\[var\(--sidebar-overlay-focus\)\]:focus-visible {
  background-color: var(--sidebar-overlay-focus);
}

.product-ui .focus-visible\:bg-\[var\(--sidebar-overlay-hover\)\]:focus-visible {
  background-color: var(--sidebar-overlay-hover);
}

.product-ui .focus-visible\:bg-state-hover:focus-visible {
  background-color: var(--color-state-hover);
}

.product-ui .focus-visible\:bg-state-selected:focus-visible {
  background-color: var(--color-state-selected);
}

.product-ui .focus-visible\:bg-transparent:focus-visible {
  background-color: transparent;
}

.product-ui .focus-visible\:text-main:focus-visible {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .focus-visible\:underline:focus-visible {
  text-decoration-line: underline;
}

.product-ui .focus-visible\:decoration-current:focus-visible {
  text-decoration-color: currentColor;
}

.product-ui .focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.product-ui .focus-visible\:shadow-none:focus-visible {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.product-ui .focus-visible\:\!outline-none:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.product-ui .focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.product-ui .focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.product-ui .focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}

.product-ui .focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.product-ui .focus-visible\:outline-offset-1:focus-visible {
  outline-offset: 1px;
}

.product-ui .focus-visible\:outline-current:focus-visible {
  outline-color: currentColor;
}

.product-ui .focus-visible\:outline-line-control:focus-visible {
  outline-color: rgb(var(--color-line-control));
}

.product-ui .focus-visible\:outline-line-focus:focus-visible {
  outline-color: rgb(var(--color-line-focus));
}

.product-ui .focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.product-ui .focus-visible\:ring-amber-500\/60:focus-visible {
  --tw-ring-color: rgb(245 158 11 / 0.6);
}

.product-ui .focus-visible\:ring-line-control:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-control), var(--tw-ring-opacity, 1));
}

.product-ui .focus-visible\:ring-line-focus:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-focus), var(--tw-ring-opacity, 1));
}

.product-ui .focus-visible\:ring-orange-400\/50:focus-visible {
  --tw-ring-color: rgb(251 146 60 / 0.5);
}

.product-ui .focus-visible\:ring-status-attention\/60:focus-visible {
  --tw-ring-color: rgba(var(--color-status-attention), 0.6);
}

.product-ui .focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}

.product-ui .focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.product-ui .focus-visible\:ring-offset-surface-sheet:focus-visible {
  --tw-ring-offset-color: rgb(var(--color-surface-sheet));
}

.product-ui .active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .active\:cursor-grabbing:active {
  cursor: grabbing;
}

.product-ui .active\:bg-state-hover:active {
  background-color: var(--color-state-hover);
}

.product-ui .active\:bg-state-selected:active {
  background-color: var(--color-state-selected);
}

.product-ui .enabled\:hover\:bg-state-hover:hover:enabled {
  background-color: var(--color-state-hover);
}

.product-ui .enabled\:hover\:bg-surface-sheet:hover:enabled {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sheet), var(--tw-bg-opacity, 1));
}

.product-ui .enabled\:hover\:text-main:hover:enabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .enabled\:hover\:text-primary:hover:enabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-primary), var(--tw-text-opacity, 1));
}

.product-ui .enabled\:hover\:opacity-90:hover:enabled {
  opacity: 0.9;
}

.product-ui .enabled\:active\:scale-\[0\.94\]:active:enabled {
  --tw-scale-x: 0.94;
  --tw-scale-y: 0.94;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .enabled\:active\:scale-\[0\.97\]:active:enabled {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.product-ui .disabled\:cursor-default:disabled {
  cursor: default;
}

.product-ui .disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.product-ui .disabled\:cursor-wait:disabled {
  cursor: wait;
}

.product-ui .disabled\:bg-surface-sunken:disabled {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sunken), var(--tw-bg-opacity, 1));
}

.product-ui .disabled\:text-secondary:disabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .disabled\:text-tertiary:disabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .disabled\:no-underline:disabled {
  text-decoration-line: none;
}

.product-ui .disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.product-ui .disabled\:opacity-35:disabled {
  opacity: 0.35;
}

.product-ui .disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.product-ui .disabled\:opacity-45:disabled {
  opacity: 0.45;
}

.product-ui .disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.product-ui .disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.product-ui .disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.product-ui .disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.product-ui .disabled\:hover\:bg-state-hover:hover:disabled {
  background-color: var(--color-state-hover);
}

.product-ui .disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.product-ui .disabled\:hover\:text-secondary:hover:disabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .disabled\:hover\:text-tertiary:hover:disabled {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .group\/session:focus-within .group-focus-within\/session\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group\/session:focus-within .group-focus-within\/session\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group\/message:focus-within .group-focus-within\/message\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/session:focus-within .group-focus-within\/session\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/session:hover .group-hover\/session\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group:hover .group-hover\:visible {
  visibility: visible;
}

.product-ui .group:hover .group-hover\:invisible {
  visibility: hidden;
}

.product-ui .group:hover .group-hover\:static {
  position: static;
}

.product-ui .group:hover .group-hover\:block {
  display: block;
}

.product-ui .group:hover .group-hover\:inline-flex {
  display: inline-flex;
}

.product-ui .group:hover .group-hover\:hidden {
  display: none;
}

.product-ui .group\/grip:hover .group-hover\/grip\:w-11 {
  width: 2.75rem;
}

.product-ui .group:hover .group-hover\:w-0\.5 {
  width: 0.125rem;
}

.product-ui .group\/session:hover .group-hover\/session\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group:hover .group-hover\:-translate-x-1 {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group\/tile:hover .group-hover\/tile\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group:hover .group-hover\:animate-\[sidebar-swap-in_200ms_cubic-bezier\(0\.2\2c 0\.8\2c 0\.2\2c 1\)\] {
  animation: sidebar-swap-in 200ms cubic-bezier(0.2,0.8,0.2,1);
}

.product-ui .group:hover .group-hover\:border-line-control {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .group\/artifact:hover .group-hover\/artifact\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .group\/grip:hover .group-hover\/grip\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .group\/local:hover .group-hover\/local\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .group\/local:hover .group-hover\/local\:bg-state-selected {
  background-color: var(--color-state-selected);
}

.product-ui .group:hover .group-hover\:bg-action-primary {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-action-primary), var(--tw-bg-opacity, 1));
}

.product-ui .group:hover .group-hover\:bg-action-primary\/60 {
  background-color: rgba(var(--color-action-primary), 0.6);
}

.product-ui .group:hover .group-hover\:bg-amber-500\/25 {
  background-color: rgb(245 158 11 / 0.25);
}

.product-ui .group:hover .group-hover\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .group\/artifact:hover .group-hover\/artifact\:text-main {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .group\/local:hover .group-hover\/local\:text-main {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .group:hover .group-hover\:text-main {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-primary), var(--tw-text-opacity, 1));
}

.product-ui .group\/chip:hover .group-hover\/chip\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/message:hover .group-hover\/message\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/section:hover .group-hover\/section\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/session:hover .group-hover\/session\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/thread:hover .group-hover\/thread\:opacity-100 {
  opacity: 1;
}

.product-ui .group:hover .group-hover\:opacity-0 {
  opacity: 0;
}

.product-ui .group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.product-ui .group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}

.product-ui .group:focus-visible .group-focus-visible\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group:focus-visible .group-focus-visible\:invisible {
  visibility: hidden;
}

.product-ui .group:focus-visible .group-focus-visible\:static {
  position: static;
}

.product-ui .group:focus-visible .group-focus-visible\:hidden {
  display: none;
}

.product-ui .group\/thread:focus-visible .group-focus-visible\/thread\:opacity-100 {
  opacity: 1;
}

.product-ui .group:focus-visible .group-focus-visible\:opacity-0 {
  opacity: 0;
}

.product-ui .group:focus-visible .group-focus-visible\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/artifact:active .group-active\/artifact\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .group\/grip:active .group-active\/grip\:bg-action-primary\/90 {
  background-color: rgba(var(--color-action-primary), 0.9);
}

.product-ui .group\/local:active .group-active\/local\:bg-state-hover {
  background-color: var(--color-state-hover);
}

.product-ui .has-\[\>\:not\(\:empty\)\]\:flex:has(>:not(:empty)) {
  display: flex;
}

.product-ui .has-\[\:focus-visible\]\:bg-state-hover:has(:focus-visible) {
  background-color: var(--color-state-hover);
}

.product-ui .has-\[\:focus-visible\]\:outline:has(:focus-visible) {
  outline-style: solid;
}

.product-ui .has-\[\:focus-visible\]\:outline-1:has(:focus-visible) {
  outline-width: 1px;
}

.product-ui .has-\[\:focus-visible\]\:outline-line-control:has(:focus-visible) {
  outline-color: rgb(var(--color-line-control));
}

.product-ui .has-\[button\:focus-visible\]\:ring-2:has(button:focus-visible) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.product-ui .has-\[button\:focus-visible\]\:ring-line-focus:has(button:focus-visible) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(var(--color-line-focus), var(--tw-ring-opacity, 1));
}

.product-ui .has-\[button\:disabled\]\:hover\:border-line-control:hover:has(button:disabled) {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .group\/row:has(:focus-visible) .group-has-\[\:focus-visible\]\/row\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group\/row:has([aria-expanded=true]) .group-has-\[\[aria-expanded\=true\]\]\/row\:pointer-events-auto {
  pointer-events: auto;
}

.product-ui .group\/row:has(:focus-visible) .group-has-\[\:focus-visible\]\/row\:invisible {
  visibility: hidden;
}

.product-ui .group\/row:has([aria-expanded=true]) .group-has-\[\[aria-expanded\=true\]\]\/row\:invisible {
  visibility: hidden;
}

.product-ui .group\/row:has(:focus-visible) .group-has-\[\:focus-visible\]\/row\:static {
  position: static;
}

.product-ui .group\/row:has([aria-expanded=true]) .group-has-\[\[aria-expanded\=true\]\]\/row\:static {
  position: static;
}

.product-ui .group\/row:has(:focus-visible) .group-has-\[\:focus-visible\]\/row\:hidden {
  display: none;
}

.product-ui .group\/row:has([aria-expanded=true]) .group-has-\[\[aria-expanded\=true\]\]\/row\:hidden {
  display: none;
}

.product-ui .group\/row:has(:focus-visible) .group-has-\[\:focus-visible\]\/row\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/row:has([aria-expanded=true]) .group-has-\[\[aria-expanded\=true\]\]\/row\:opacity-100 {
  opacity: 1;
}

.product-ui .group\/artifact:has(button:disabled) .group-has-\[button\:disabled\]\/artifact\:opacity-50 {
  opacity: 0.5;
}

.product-ui .aria-pressed\:bg-state-selected[aria-pressed="true"] {
  background-color: var(--color-state-selected);
}

.product-ui .aria-pressed\:text-main[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .data-\[ending-style\]\:-translate-y-\[48\%\][data-ending-style] {
  --tw-translate-y: -48%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[starting-style\]\:-translate-y-\[48\%\][data-starting-style] {
  --tw-translate-y: -48%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[ending-style\]\:scale-95[data-ending-style] {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[ending-style\]\:scale-\[var\(--modal-scale-close\)\][data-ending-style] {
  --tw-scale-x: var(--modal-scale-close);
  --tw-scale-y: var(--modal-scale-close);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[starting-style\]\:scale-95[data-starting-style] {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[starting-style\]\:scale-\[var\(--modal-scale\)\][data-starting-style] {
  --tw-scale-x: var(--modal-scale);
  --tw-scale-y: var(--modal-scale);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .data-\[disabled\]\:cursor-default[data-disabled] {
  cursor: default;
}

.product-ui .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
  cursor: not-allowed;
}

.product-ui .data-\[checked\]\:border-\[\#fc6d26\][data-checked] {
  --tw-border-opacity: 1;
  border-color: rgb(252 109 38 / var(--tw-border-opacity, 1));
}

.product-ui .data-\[checked\]\:border-action-primary[data-checked] {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-action-primary), var(--tw-border-opacity, 1));
}

.product-ui .data-\[scrolled\]\:border-line-control\/60[data-scrolled] {
  border-color: rgba(var(--color-line-control), 0.6);
}

.product-ui .data-\[checked\]\:bg-\[\#fc6d26\][data-checked] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 109 38 / var(--tw-bg-opacity, 1));
}

.product-ui .data-\[checked\]\:bg-action-primary[data-checked] {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-action-primary), var(--tw-bg-opacity, 1));
}

.product-ui .data-\[disabled\]\:bg-surface-sunken[data-disabled] {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-surface-sunken), var(--tw-bg-opacity, 1));
}

.product-ui .data-\[highlighted\]\:\!bg-error\/10[data-highlighted] {
  background-color: rgba(var(--color-error), 0.1) !important;
}

.product-ui .data-\[popup-open\]\:bg-\[var\(--sidebar-overlay-active\)\][data-popup-open] {
  background-color: var(--sidebar-overlay-active);
}

.product-ui .data-\[popup-open\]\:bg-action-primary\/90[data-popup-open] {
  background-color: rgba(var(--color-action-primary), 0.9);
}

.product-ui .data-\[popup-open\]\:bg-main\/70[data-popup-open] {
  background-color: rgba(var(--color-background-base), 0.7);
}

.product-ui .data-\[popup-open\]\:bg-state-selected[data-popup-open] {
  background-color: var(--color-state-selected);
}

.product-ui .data-\[pressed\]\:bg-action-primary[data-pressed] {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--color-action-primary), var(--tw-bg-opacity, 1));
}

.product-ui .data-\[pressed\]\:bg-state-selected[data-pressed] {
  background-color: var(--color-state-selected);
}

.product-ui .data-\[disabled\]\:text-tertiary[data-disabled] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-tertiary), var(--tw-text-opacity, 1));
}

.product-ui .data-\[highlighted\]\:\!text-error[data-highlighted] {
  --tw-text-opacity: 1 !important;
  color: rgba(var(--color-error), var(--tw-text-opacity, 1)) !important;
}

.product-ui .data-\[highlighted\]\:\!text-main[data-highlighted] {
  --tw-text-opacity: 1 !important;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1)) !important;
}

.product-ui .data-\[popup-open\]\:text-main[data-popup-open] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .data-\[popup-open\]\:text-secondary[data-popup-open] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-secondary), var(--tw-text-opacity, 1));
}

.product-ui .data-\[pressed\]\:text-inverse[data-pressed] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-inverse), var(--tw-text-opacity, 1));
}

.product-ui .data-\[pressed\]\:text-main[data-pressed] {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .data-\[disabled\]\:opacity-40[data-disabled] {
  opacity: 0.4;
}

.product-ui .data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.product-ui .data-\[disabled\]\:opacity-60[data-disabled] {
  opacity: 0.6;
}

.product-ui .data-\[ending-style\]\:opacity-0[data-ending-style] {
  opacity: 0;
}

.product-ui .data-\[popup-open\]\:opacity-100[data-popup-open] {
  opacity: 1;
}

.product-ui .data-\[starting-style\]\:opacity-0[data-starting-style] {
  opacity: 0;
}

.product-ui .data-\[disabled\]\:shadow-none[data-disabled] {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.product-ui .data-\[ending-style\]\:duration-\[var\(--modal-close-dur\)\][data-ending-style] {
  transition-duration: var(--modal-close-dur);
}

.product-ui .group[data-panel-open] .group-data-\[panel-open\]\:inline {
  display: inline;
}

.product-ui .group\/pane[data-split-multiple="true"] .group-data-\[split-multiple\=true\]\/pane\:flex {
  display: flex;
}

.product-ui .group[data-panel-open] .group-data-\[panel-open\]\:hidden {
  display: none;
}

.product-ui .group[data-panel-open] .group-data-\[panel-open\]\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-ui .group[data-active] .group-data-\[active\]\:text-main {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

@container (min-width: 20rem) {

  .product-ui .\@xs\:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .product-ui .\@xs\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@container (min-width: 24rem) {

  .product-ui .\@sm\:inline {
    display: inline;
  }

  .product-ui .\@sm\:inline-flex {
    display: inline-flex;
  }

  .product-ui .\@sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-ui .\@sm\:flex-row {
    flex-direction: row;
  }

  .product-ui .\@sm\:items-start {
    align-items: flex-start;
  }

  .product-ui .\@sm\:gap-3 {
    gap: 0.75rem;
  }

  .product-ui .\@sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .product-ui .\@sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@container (min-width: 28rem) {

  .product-ui .\@md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .\@md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container (min-width: 32rem) {

  .product-ui .\@lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .product-ui .\@lg\:inline {
    display: inline;
  }

  .product-ui .\@lg\:flex {
    display: flex;
  }

  .product-ui .\@lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .\@lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 36rem) {

  .product-ui .\@xl\:inline {
    display: inline;
  }

  .product-ui .\@xl\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .product-ui .\@xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .product-ui .\@xl\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .product-ui .\@xl\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .product-ui .\@xl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .product-ui .\@xl\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .product-ui .\@xl\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .product-ui .\@xl\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .product-ui .\@xl\:pt-4 {
    padding-top: 1rem;
  }

  .product-ui .\@xl\:text-\[17px\] {
    font-size: 17px;
  }

  .product-ui .\@xl\:leading-6 {
    line-height: 1.5rem;
  }
}

@container (min-width: 42rem) {

  .product-ui .\@2xl\:w-\[196px\] {
    width: 196px;
  }

  .product-ui .\@2xl\:columns-2 {
    -moz-columns: 2;
         columns: 2;
  }

  .product-ui .\@2xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .\@2xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-ui .\@2xl\:grid-cols-\[180px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 180px minmax(0,1fr);
  }

  .product-ui .\@2xl\:flex-row {
    flex-direction: row;
  }

  .product-ui .\@2xl\:flex-col {
    flex-direction: column;
  }

  .product-ui .\@2xl\:gap-4 {
    gap: 1rem;
  }

  .product-ui .\@2xl\:border-b-0 {
    border-bottom-width: 0px;
  }

  .product-ui .\@2xl\:border-r {
    border-right-width: 1px;
  }

  .product-ui .\@2xl\:p-4 {
    padding: 1rem;
  }

  .product-ui .\@2xl\:p-5 {
    padding: 1.25rem;
  }

  .product-ui .\@2xl\:p-6 {
    padding: 1.5rem;
  }

  .product-ui .\@2xl\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .product-ui .\@2xl\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@container (min-width: 48rem) {

  .product-ui .\@3xl\:block {
    display: block;
  }

  .product-ui .\@3xl\:inline {
    display: inline;
  }

  .product-ui .\@3xl\:flex {
    display: flex;
  }

  .product-ui .\@3xl\:hidden {
    display: none;
  }

  .product-ui .\@3xl\:w-40 {
    width: 10rem;
  }

  .product-ui .\@3xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .\@3xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-ui .\@3xl\:grid-cols-\[minmax\(0\2c 1\.4fr\)_160px_minmax\(0\2c 1fr\)_16px\] {
    grid-template-columns: minmax(0,1.4fr) 160px minmax(0,1fr) 16px;
  }
}

@container (min-width: 64rem) {

  .product-ui .\@5xl\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .product-ui .\@5xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .product-ui .\@5xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .product-ui .\@5xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .product-ui .\@5xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .product-ui .\@5xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .product-ui .\@5xl\:grid-cols-\[minmax\(300px\2c 0\.8fr\)_minmax\(0\2c 1\.45fr\)\] {
    grid-template-columns: minmax(300px,0.8fr) minmax(0,1.45fr);
  }

  .product-ui .\@5xl\:border-b-0 {
    border-bottom-width: 0px;
  }

  .product-ui .\@5xl\:border-r {
    border-right-width: 1px;
  }

  .product-ui .\@5xl\:p-5 {
    padding: 1.25rem;
  }
}

@container (min-width: 210px) {

  .product-ui .\@\[210px\]\:flex {
    display: flex;
  }
}

@container (min-width: 230px) {

  .product-ui .\@\[230px\]\:flex {
    display: flex;
  }
}

@container (min-width: 320px) {

  .product-ui .\@\[320px\]\:block {
    display: block;
  }

  .product-ui .\@\[320px\]\:grid {
    display: grid;
  }

  .product-ui .\@\[320px\]\:hidden {
    display: none;
  }

  .product-ui .\@\[320px\]\:gap-2 {
    gap: 0.5rem;
  }

  .product-ui .\@\[320px\]\:gap-x-1 {
    -moz-column-gap: 0.25rem;
         column-gap: 0.25rem;
  }
}

@container (min-width: 400px) {

  .product-ui .\@\[400px\]\:block {
    display: block;
  }

  .product-ui .\@\[400px\]\:inline {
    display: inline;
  }

  .product-ui .\@\[400px\]\:hidden {
    display: none;
  }

  .product-ui .\@\[400px\]\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .product-ui .\@\[400px\]\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@container (min-width: 440px) {

  .product-ui .\@\[440px\]\:inline {
    display: inline;
  }
}

@container (min-width: 480px) {

  .product-ui .\@\[480px\]\:p-8 {
    padding: 2rem;
  }

  .product-ui .\@\[480px\]\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .product-ui .\@\[480px\]\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .product-ui .\@\[480px\]\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .product-ui .\@\[480px\]\:pb-16 {
    padding-bottom: 4rem;
  }

  .product-ui .\@\[480px\]\:pt-10 {
    padding-top: 2.5rem;
  }
}

@container (min-width: 520px) {

  .product-ui .\@\[520px\]\:inline {
    display: inline;
  }

  .product-ui .\@\[520px\]\:hidden {
    display: none;
  }
}

@container (min-width: 760px) {

  .product-ui .\@\[760px\]\:static {
    position: static;
  }

  .product-ui .\@\[760px\]\:flex {
    display: flex;
  }

  .product-ui .\@\[760px\]\:w-\[var\(--summary-width\)\] {
    width: var(--summary-width);
  }

  .product-ui .\@\[760px\]\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .product-ui .\@\[760px\]\:justify-end {
    justify-content: flex-end;
  }

  .product-ui .\@\[760px\]\:overflow-hidden {
    overflow: hidden;
  }

  .product-ui .\@\[760px\]\:border-l-0 {
    border-left-width: 0px;
  }

  .product-ui .\@\[760px\]\:bg-transparent {
    background-color: transparent;
  }
}

@container (min-width: 1000px) {

  .product-ui .\@\[1000px\]\:static {
    position: static;
  }

  .product-ui .\@\[1000px\]\:flex {
    display: flex;
  }

  .product-ui .\@\[1000px\]\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@supports (backdrop-filter: var(--tw)) {

  .product-ui .supports-\[backdrop-filter\]\:backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .product-ui .supports-\[backdrop-filter\]\:backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

@media (prefers-reduced-motion: no-preference) {

  .product-ui .motion-safe\:transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .product-ui .motion-safe\:duration-150 {
    transition-duration: 150ms;
  }

  .product-ui .motion-safe\:\[transition-timing-function\:var\(--ease-smooth-out\)\] {
    transition-timing-function: var(--ease-smooth-out);
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-ui .motion-reduce\:line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-ui .motion-reduce\:animate-none {
    animation: none;
  }

  .product-ui .motion-reduce\:whitespace-normal {
    white-space: normal;
  }

  .product-ui .motion-reduce\:transition-none {
    transition-property: none;
  }

  .product-ui .group\/tile:hover .motion-reduce\:group-hover\/tile\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@container native-demo (min-width: 640px) {

  .product-ui .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .product-ui .sm\:inline {
    display: inline;
  }

  .product-ui .sm\:inline-flex {
    display: inline-flex;
  }

  .product-ui .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container native-demo (min-width: 768px) {

  .product-ui .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container native-demo (min-width: 1024px) {

  .product-ui .lg\:-left-7 {
    left: -1.75rem;
  }

  .product-ui .lg\:w-5 {
    width: 1.25rem;
  }

  .product-ui .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-ui .lg\:p-8 {
    padding: 2rem;
  }
}

@container native-demo (min-width: 1280px) {

  .product-ui .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-ui .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-ui .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.product-ui .dark\:bg-\[var\(--shiki-dark-bg\2c var\(--sdm-tbg\)\)\]:where(.dark, .dark *) {
  background-color: var(--shiki-dark-bg,var(--sdm-tbg));
}

.product-ui .dark\:text-\[var\(--shiki-dark\2c var\(--sdm-c\2c inherit\)\)\]:where(.dark, .dark *) {
  color: var(--shiki-dark,var(--sdm-c,inherit));
}

.product-ui .dark\:ring-white\/10:where(.dark, .dark *) {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.product-ui .\[\&\+\&\]\:border-t+.\[\&\+\&\]\:border-t {
  border-top-width: 1px;
}

.product-ui .\[\&\+\&\]\:border-line-control+.\[\&\+\&\]\:border-line-control {
  --tw-border-opacity: 1;
  border-color: rgba(var(--color-line-control), var(--tw-border-opacity, 1));
}

.product-ui .\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
  display: none;
}

.product-ui .\[\&\:not\(\:empty\)\]\:pl-2\.5:not(:empty) {
  padding-left: 0.625rem;
}

.product-ui .\[\&\>\*\:first-child\]\:mt-0>*:first-child {
  margin-top: 0px;
}

.product-ui .\[\&\>\*\:last-child\]\:mb-0>*:last-child {
  margin-bottom: 0px;
}

.product-ui .\[\&\>\*\:last-child\]\:after\:inline>*:last-child::after {
  content: var(--tw-content);
  display: inline;
}

.product-ui .\[\&\>\*\:last-child\]\:after\:align-baseline>*:last-child::after {
  content: var(--tw-content);
  vertical-align: baseline;
}

.product-ui .\[\&\>\*\:last-child\]\:after\:content-\[var\(--streamdown-caret\)\]>*:last-child::after {
  --tw-content: var(--streamdown-caret);
  content: var(--tw-content);
}

.product-ui .\[\&\>\*\:not\(\:first-child\)\]\:hidden>*:not(:first-child) {
  display: none;
}

.product-ui .\[\&\>\*\]\:\!h-4>* {
  height: 1rem !important;
}

.product-ui .\[\&\>\*\]\:\!h-5>* {
  height: 1.25rem !important;
}

.product-ui .\[\&\>\*\]\:\!h-\[18px\]>* {
  height: 18px !important;
}

.product-ui .\[\&\>\*\]\:h-full>* {
  height: 100%;
}

.product-ui .\[\&\>\*\]\:\!w-4>* {
  width: 1rem !important;
}

.product-ui .\[\&\>\*\]\:\!w-5>* {
  width: 1.25rem !important;
}

.product-ui .\[\&\>\*\]\:\!w-\[18px\]>* {
  width: 18px !important;
}

.product-ui .\[\&\>\*\]\:pb-0>* {
  padding-bottom: 0px;
}

.product-ui .\[\&\>\.t-text-swap\]\:max-w-full>.t-text-swap {
  max-width: 100%;
}

.product-ui .\[\&\>\.t-text-swap\]\:truncate>.t-text-swap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-ui .\[\&\>\.t-text-swap\]\:align-top>.t-text-swap {
  vertical-align: top;
}

.product-ui .\[\&\>p\]\:inline>p {
  display: inline;
}

.product-ui .\[\&\>section\]\:border-t-0>section {
  border-top-width: 0px;
}

.product-ui .\[\&\>span\:first-child\]\:\!h-3>span:first-child {
  height: 0.75rem !important;
}

.product-ui .\[\&\>span\:first-child\]\:\!w-3>span:first-child {
  width: 0.75rem !important;
}

.product-ui .\[\&\>span\:first-child\]\:\!text-current>span:first-child {
  color: currentColor !important;
}

.product-ui .\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.product-ui .\[\&\>svg\]\:\!h-4>svg {
  height: 1rem !important;
}

.product-ui .\[\&\>svg\]\:\!h-5>svg {
  height: 1.25rem !important;
}

.product-ui .\[\&\>svg\]\:\!h-\[18px\]>svg {
  height: 18px !important;
}

.product-ui .\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}

.product-ui .\[\&\>svg\]\:\!w-4>svg {
  width: 1rem !important;
}

.product-ui .\[\&\>svg\]\:\!w-5>svg {
  width: 1.25rem !important;
}

.product-ui .\[\&\>svg\]\:\!w-\[18px\]>svg {
  width: 18px !important;
}

.product-ui .\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}

.product-ui .\[\&_\*\]\:\!text-inherit * {
  color: inherit !important;
}

.product-ui .\[\&_\:not\(pre\)\:not\(a\)\>code\]\:text-main :not(pre):not(a)>code {
  --tw-text-opacity: 1;
  color: rgba(var(--color-text-base), var(--tw-text-opacity, 1));
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:rounded :not(pre)>code {
  border-radius: 0.25rem;
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:bg-state-selected :not(pre)>code {
  background-color: var(--color-state-selected);
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:px-1\.5 :not(pre)>code {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:py-0\.5 :not(pre)>code {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:font-mono :not(pre)>code {
  font-family: SF Mono, Menlo, Monaco, monospace;
}

.product-ui .\[\&_\:not\(pre\)\>code\]\:text-\[13\.5px\] :not(pre)>code {
  font-size: 13.5px;
}

.product-ui .\[\&_button\]\:text-white\/80 button {
  color: rgb(255 255 255 / 0.8);
}

.product-ui .\[\&_button\]\:hover\:bg-white\/10:hover button {
  background-color: rgb(255 255 255 / 0.1);
}

.product-ui .\[\&_button\]\:hover\:text-white:hover button {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.product-ui .\[\&_h1\]\:mb-5 h1 {
  margin-bottom: 1.25rem;
}

.product-ui .\[\&_h1\]\:mt-0 h1 {
  margin-top: 0px;
}

.product-ui .\[\&_h1\]\:text-\[26px\] h1 {
  font-size: 26px;
}

.product-ui .\[\&_h1\]\:leading-\[1\.2\] h1 {
  line-height: 1.2;
}

.product-ui .\[\&_h1\]\:tracking-\[-0\.015em\] h1 {
  letter-spacing: -0.015em;
}

.product-ui .\[\&_h2\]\:mb-3 h2 {
  margin-bottom: 0.75rem;
}

.product-ui .\[\&_h2\]\:mt-10 h2 {
  margin-top: 2.5rem;
}

.product-ui .\[\&_h2\]\:text-\[19px\] h2 {
  font-size: 19px;
}

.product-ui .\[\&_h2\]\:leading-snug h2 {
  line-height: 1.375;
}

.product-ui .\[\&_h3\]\:mb-2 h3 {
  margin-bottom: 0.5rem;
}

.product-ui .\[\&_h3\]\:mt-7 h3 {
  margin-top: 1.75rem;
}

.product-ui .\[\&_h3\]\:text-\[16px\] h3 {
  font-size: 16px;
}

.product-ui .\[\&_input\]\:text-\[13px\] input {
  font-size: 13px;
}

.product-ui .\[\&_li\]\:whitespace-pre-wrap li {
  white-space: pre-wrap;
}

.product-ui .\[\&_p\]\:whitespace-pre-wrap p {
  white-space: pre-wrap;
}

.product-ui .\[\&_select\]\:text-\[13px\] select {
  font-size: 13px;
}

.product-ui .\[\&_svg\]\:size-3\.5 svg {
  width: 0.875rem;
  height: 0.875rem;
}

.product-ui .\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.product-ui .\[\&_svg\]\:size-\[18px\] svg {
  width: 18px;
  height: 18px;
}

.product-ui .\[\&_svg\]\:h-auto svg {
  height: auto;
}

.product-ui .\[\&_svg\]\:w-auto svg {
  width: auto;
}

.product-ui .\[\&_thead\]\:sticky thead {
  position: sticky;
}

.product-ui .\[\&_thead\]\:top-0 thead {
  top: 0px;
}

.product-ui .\[\&_thead\]\:z-10 thead {
  z-index: 10;
}

.product-ui .light .\[\.light_\&\]\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.product-ui .light .\[\.light_\&\]\:hover\:bg-neutral-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.product-ui li .\[li_\&\]\:pl-6 {
  padding-left: 1.5rem;
}

.product-ui tr:last-child .last\:\[tr\:last-child_\&\]\:border-b-0:last-child {
  border-bottom-width: 0px;
}
/* transitions-dev — copy this :root block into your project once.
   Every transition snippet reads from these semantic names. */
.product-ui {
  /* ── Motion tokens — shared scale ──────────────────────────────
     Reference these with var(--…) anywhere in your project. The
     transitions below ship literal values so each snippet works on
     its own; `transitions refine` maps hardcoded values back to
     these tokens. */
  /* Durations */
  --duration-stagger: 40ms; /* per-item stagger offset */
  --duration-micro: 80ms; /* tooltip/path delay, shake segment, large stagger */
  --duration-quick: 150ms; /* modal/dropdown close, text swap, tooltip appear */
  --duration-fast: 250ms; /* icon swap, dropdown/modal open, tabs sliding, page slide */
  --duration-medium: 350ms; /* panel close, toast close */
  --duration-slow: 400ms; /* panel open, skeleton content reveal, input clear */
  --duration-very-slow: 500ms; /* emphasis moments, badge appear, text reveal, success check */
  /* Easings */
  --ease-smooth-out: cubic-bezier(
    0.22,
    1,
    0.36,
    1
  ); /* modal/dropdown/panel open + close, page slide, resize, position change */
  --ease-in-out: ease-in-out; /* icon swap, text swap, text reveal, skeleton reveal */
  --ease-out: ease-out; /* tooltip open / close */
  --ease-linear: linear; /* shimmer, skeleton pulse, spinner */
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1); /* badge pop open */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1); /* bouncy hover-out (avatar return) */
  /* Distances */
  --distance-micro: 4px; /* text swap */
  --distance-small: 6px; /* error shake (small segment) */
  --distance-base: 8px; /* badge diagonal reveal, page slide, error shake (large segment) */
  --distance-medium: 12px; /* text reveal */
  --distance-large: 30px; /* check badge appear */
  /* Scales */
  --scale-large: 0.96; /* modal open / close */
  --scale-medium: 0.97; /* dropdown open */
  --scale-small: 0.98; /* tooltip open */
  --scale-tiny: 0.99; /* dropdown close */
  /* Blur */
  --blur-small: 2px; /* panel reveal, icon swap, text swap, skeleton reveal, number pop-in */
  --blur-medium: 3px; /* page slide, text reveal */
  --blur-large: 8px; /* success check open */

  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* Input clear with dissolve */
  --clear-dur: 1000ms;
  --clear-out-dur: 400ms;
  --clear-in-dur: 400ms;
  --clear-out-fly: 12px;
  --clear-in-fly: 12px;
  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-blur: 2px;
  --glow-delay: 50ms;
  --glow-peak-at: 0.15;
  --glow-opacity: 0.42;
  --glow-spread: 1.5;
  /* Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  /* Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.8);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
  /* Tooltip open/close */
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-move-dur: 160ms;
  --tt-move-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tt-bg: #ffffff;
  --tt-fg: #2f2f2f;
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Card hover tilt */
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Plus to menu morph */
  --morph-open-dur: 350ms;
  --morph-close-dur: 250ms;
  --morph-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --morph-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-r-closed: 40px;
  --morph-r-open: 20px;
  --morph-fade-dur: 200ms;
  --morph-slide: 40px;
  --morph-rotate: 45deg;
  --morph-scale: 0.97;
  --morph-blur: 2px;
  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toast open / close */
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Like button */
  --like-color: #f40051;
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 20px;
  --like-particle-size: 2.5px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Checkbox check */
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Spinning counter */
  --reel-dur: 1400ms;
  --reel-cell: 30px;
  --reel-spin-blur: 3px;
  --reel-stagger: 90ms;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Toggle */
  --toggle-dur: 350ms;
  --toggle-travel: 14.66px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* Thinking states */
  --think-hold: 2000ms;
  --think-swap: 150ms;
  --think-gap: 50ms;
  --think-distance: 8px;
  --think-blur: 2px;
  --think-shimmer: 2000ms;
  --think-base: #7c7c7c;
  --think-highlight: #0d0d0d;
  --think-ease: ease-in-out;
  /* Reasoning stream */
  --reason-hold: 840ms;
  --reason-step: 500ms;
  --reason-lines: 2;
  --reason-fade: 28px;
  --reason-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Streaming text */
  --stream-gap: 60ms;
  --stream-fade: 350ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Matrix dot loader */
  --matrix-cycle: 1200ms;
  --matrix-base: #d9d9d9;
  --matrix-active: #85858f;
  --matrix-ease: ease-in-out;
  /* Banner stacking */
  --stack-open: 350ms;
  --stack-close: 250ms;
  --stack-rise: 60px;
  --stack-blur: 2px;
  --stack-scale: 0.97;
  --stack-peek: 12px;
  --stack-spread-gap: 8px;
  --stack-depth-scale: 0.06;
  --stack-depth-fade: 0.4;
  --stack-depth1-blur: 1px;
  --stack-depth2-blur: 2px;
  --stack-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* The wrap stacks two layers on the same coordinates. The
   skeleton owns the cold pulse + the fade-out side of the
   reveal; the content owns the fade-in side. They share the
   same duration / ease so the swap reads as one motion. */
.product-ui .t-skel {
  position: relative;
}
.product-ui .t-skel-skeleton,
.product-ui .t-skel-content {
  position: absolute;
  inset: 0;
}

.product-ui .t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.product-ui .t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
/* Snap-back when replaying: kill transitions so the reverse
   (revealed → skeleton) is instant. Drop `.is-resetting`
   after a forced reflow and the next reveal animates again. */
.product-ui .t-skel.is-resetting .t-skel-skeleton,
.product-ui .t-skel.is-resetting .t-skel-content {
  transition: none !important;
}

/* Pulse: place the animation on the bar/avatar children, not
   on the skeleton itself, so the skeleton's opacity / filter
   stay free for the cross-fade transition above. */
.product-ui .t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--pulse-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-skel-skeleton,
  .product-ui .t-skel-content {
    transition: none !important;
  }
  .product-ui .t-skel-skeleton.is-pulsing > * {
    animation: none !important;
  }
}

/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.product-ui .t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.product-ui .t-acc[data-open='true'] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.product-ui .t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.product-ui .t-acc[data-open='true'] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.product-ui .t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.product-ui .t-acc-chevron path {
  vector-effect: non-scaling-stroke;
}
.product-ui .t-acc[data-open='true'] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-acc-panel,
  .product-ui .t-acc-panel-inner,
  .product-ui .t-acc-chevron {
    transition: none !important;
  }
}

/* Toast open / close (transitions.dev 22) — the composer's agent-status banner. */
.product-ui .t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.product-ui .t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-toast {
    transition: none !important;
  }
}

/* Accordion expand for a Base UI Collapsible.Panel. Base UI measures the
   panel into --collapsible-panel-height and keeps it mounted until the
   closing transition ends, so closed content still unmounts. */
.product-ui .t-acc-collapsible {
  height: var(--collapsible-panel-height);
  overflow: hidden;
  opacity: 1;
  filter: blur(0);
  transition:
    height var(--acc-expand) var(--acc-ease),
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
.product-ui .t-acc-collapsible[data-starting-style],
.product-ui .t-acc-collapsible[data-ending-style] {
  height: 0;
  opacity: 0;
  filter: blur(2px);
}
.product-ui .t-acc-collapsible[data-ending-style] {
  transition-duration: var(--acc-collapse);
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-acc-collapsible {
    transition: none !important;
  }
}

/* Error state shake — the field's own classes own its default / focus
   border; this only tweens the colour and replays the shake. No inline
   message: errors are announced through the toast. */
.product-ui .t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.product-ui .t-input.is-error,
.product-ui .t-input.is-error:focus {
  border-color: rgb(var(--color-error));
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.product-ui .t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-input {
    animation: none !important;
    transform: none !important;
  }
}

/* The app toasts (Base UI Toast.Root) carry `.t-toast.is-open`; Base UI's
   starting / ending style attributes hold them in the closed state for the
   enter and exit, with the exit on the close timing. */
.product-ui .t-toast[data-starting-style],
.product-ui .t-toast[data-ending-style] {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
}
.product-ui .t-toast[data-ending-style] {
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.product-ui .react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.product-ui .react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.product-ui .react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.product-ui .react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.product-ui .react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.product-ui .react-flow__pane.draggable {
    cursor: grab;
  }
.product-ui .react-flow__pane.dragging {
    cursor: grabbing;
  }
.product-ui .react-flow__pane.selection {
    cursor: pointer;
  }
.product-ui .react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.product-ui .react-flow__renderer {
  z-index: 4;
}
.product-ui .react-flow__selection {
  z-index: 6;
}
.product-ui .react-flow__nodesselection-rect:focus,
.product-ui .react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.product-ui .react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.product-ui .react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.product-ui .react-flow .react-flow__edges {
  position: absolute;
}
.product-ui .react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.product-ui .react-flow__edge {
  pointer-events: visibleStroke;
}
.product-ui .react-flow__edge.selectable {
    cursor: pointer;
  }
.product-ui .react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.product-ui .react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.product-ui .react-flow__edge.inactive {
    pointer-events: none;
  }
.product-ui .react-flow__edge.selected,
  .product-ui .react-flow__edge:focus,
  .product-ui .react-flow__edge:focus-visible {
    outline: none;
  }
.product-ui .react-flow__edge.selected .react-flow__edge-path,
  .product-ui .react-flow__edge.selectable:focus .react-flow__edge-path,
  .product-ui .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.product-ui .react-flow__edge-textwrapper {
    pointer-events: all;
  }
.product-ui .react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.product-ui .react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.product-ui .react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.product-ui .react-flow__connection {
  pointer-events: none;
}
.product-ui .react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.product-ui svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.product-ui .react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.product-ui .react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.product-ui .react-flow__node.selectable {
    cursor: pointer;
  }
.product-ui .react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.product-ui .react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.product-ui .react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.product-ui .react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.product-ui .react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.product-ui .react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.product-ui .react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.product-ui .react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.product-ui .react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.product-ui .react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.product-ui .react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.product-ui .react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.product-ui .react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.product-ui .react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.product-ui .react-flow__panel.top {
    top: 0;
  }
.product-ui .react-flow__panel.bottom {
    bottom: 0;
  }
.product-ui .react-flow__panel.top.center, .product-ui .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.product-ui .react-flow__panel.left {
    left: 0;
  }
.product-ui .react-flow__panel.right {
    right: 0;
  }
.product-ui .react-flow__panel.left.center, .product-ui .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.product-ui .react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.product-ui .react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.product-ui .react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.product-ui .react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.product-ui .react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.product-ui .react-flow__minimap-svg {
    display: block;
  }
.product-ui .react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.product-ui .react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.product-ui .react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.product-ui .react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.product-ui .react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.product-ui .react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.product-ui .react-flow__controls.horizontal {
    flex-direction: row;
  }
.product-ui .react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.product-ui .react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.product-ui .react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.product-ui .react-flow__edge-text {
    font-size: 10px;
  }
.product-ui .react-flow__node.selectable:focus,
  .product-ui .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.product-ui .react-flow__node-input,
.product-ui .react-flow__node-default,
.product-ui .react-flow__node-output,
.product-ui .react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.product-ui .react-flow__node-input.selectable:hover, .product-ui .react-flow__node-default.selectable:hover, .product-ui .react-flow__node-output.selectable:hover, .product-ui .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.product-ui .react-flow__node-input.selectable.selected,
    .product-ui .react-flow__node-input.selectable:focus,
    .product-ui .react-flow__node-input.selectable:focus-visible,
    .product-ui .react-flow__node-default.selectable.selected,
    .product-ui .react-flow__node-default.selectable:focus,
    .product-ui .react-flow__node-default.selectable:focus-visible,
    .product-ui .react-flow__node-output.selectable.selected,
    .product-ui .react-flow__node-output.selectable:focus,
    .product-ui .react-flow__node-output.selectable:focus-visible,
    .product-ui .react-flow__node-group.selectable.selected,
    .product-ui .react-flow__node-group.selectable:focus,
    .product-ui .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.product-ui .react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.product-ui .react-flow__nodesselection-rect,
.product-ui .react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.product-ui .react-flow__nodesselection-rect:focus,
  .product-ui .react-flow__nodesselection-rect:focus-visible,
  .product-ui .react-flow__selection:focus,
  .product-ui .react-flow__selection:focus-visible {
    outline: none;
  }
.product-ui .react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.product-ui .react-flow__controls-button:disabled {
      pointer-events: none;
    }
.product-ui .react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.product-ui .react-flow__controls-button:last-child {
    border-bottom: none;
  }
.product-ui .react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.product-ui .react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.product-ui .react-flow__resize-control {
  position: absolute;
}
.product-ui .react-flow__resize-control.left,
.product-ui .react-flow__resize-control.right {
  cursor: ew-resize;
}
.product-ui .react-flow__resize-control.top,
.product-ui .react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.product-ui .react-flow__resize-control.top.left,
.product-ui .react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.product-ui .react-flow__resize-control.bottom.left,
.product-ui .react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.product-ui .react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.product-ui .react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.product-ui .react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.product-ui .react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.product-ui .react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.product-ui .react-flow__resize-control.handle.top.left {
  left: 0;
}
.product-ui .react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.product-ui .react-flow__resize-control.handle.top.right {
  left: 100%;
}
.product-ui .react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.product-ui .react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.product-ui .react-flow__resize-control.line.left,
.product-ui .react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.product-ui .react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.product-ui .react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.product-ui .react-flow__resize-control.line.top,
.product-ui .react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.product-ui .react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.product-ui .react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.product-ui .react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.product-ui .react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
@keyframes sd-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sd-blurIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes sd-slideUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-ui [data-sd-animate] {
  animation: var(--sd-animation, sd-fadeIn) var(--sd-duration, 150ms)
    var(--sd-easing, ease) var(--sd-delay, 0ms) both;
}
.product-ui .react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.product-ui .react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.product-ui .react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.product-ui .react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.product-ui .react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.product-ui .react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.product-ui .react-grid-item.dropping {
  visibility: hidden;
}

.product-ui .react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.product-ui .react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.product-ui .react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.product-ui .react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.product-ui .react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.product-ui .react-resizable-hide > .react-resizable-handle {
  display: none;
}

.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.product-ui .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.product-ui .xterm {
    cursor: text;
    position: relative;
    -moz-user-select: none;
         user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.product-ui .xterm.focus,
.product-ui .xterm:focus {
    outline: none;
}

.product-ui .xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.product-ui .xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.product-ui .xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.product-ui .xterm .composition-view.active {
    display: block;
}

.product-ui .xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.product-ui .xterm .xterm-screen {
    position: relative;
}

.product-ui .xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.product-ui .xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.product-ui .xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.product-ui .xterm.xterm-cursor-pointer,
.product-ui .xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.product-ui .xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.product-ui .xterm .xterm-accessibility:not(.debug),
.product-ui .xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.product-ui .xterm .xterm-accessibility-tree:not(.debug) *::-moz-selection {
  color: transparent;
}

.product-ui .xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.product-ui .xterm .xterm-accessibility-tree {
  font-family: monospace;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: pre;
}

.product-ui .xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: -moz-fit-content;
  width: fit-content;
}

.product-ui .xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.product-ui .xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.product-ui .xterm-underline-1 { text-decoration: underline; }
.product-ui .xterm-underline-2 { -webkit-text-decoration: double underline; text-decoration: double underline; }
.product-ui .xterm-underline-3 { -webkit-text-decoration: wavy underline; text-decoration: wavy underline; }
.product-ui .xterm-underline-4 { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; }
.product-ui .xterm-underline-5 { -webkit-text-decoration: dashed underline; text-decoration: dashed underline; }

.product-ui .xterm-overline {
    text-decoration: overline;
}

.product-ui .xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.product-ui .xterm-overline.xterm-underline-2 { -webkit-text-decoration: overline double underline; text-decoration: overline double underline; }
.product-ui .xterm-overline.xterm-underline-3 { -webkit-text-decoration: overline wavy underline; text-decoration: overline wavy underline; }
.product-ui .xterm-overline.xterm-underline-4 { -webkit-text-decoration: overline dotted underline; text-decoration: overline dotted underline; }
.product-ui .xterm-overline.xterm-underline-5 { -webkit-text-decoration: overline dashed underline; text-decoration: overline dashed underline; }

.product-ui .xterm-strikethrough {
    text-decoration: line-through;
}

.product-ui .xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.product-ui .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.product-ui .xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.product-ui .xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.product-ui .xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.product-ui .xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.product-ui .xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.product-ui .xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.product-ui .xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.product-ui .xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.product-ui .xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.product-ui .xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.product-ui .xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.product-ui .xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.product-ui .t-agents-row {
  transition:
    background-color var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    color var(--duration-quick) var(--ease-smooth-out),
    box-shadow var(--duration-quick) var(--ease-smooth-out);
}

.product-ui .t-agents-page [role='progressbar'] > * {
  transition: width var(--duration-fast) var(--ease-smooth-out);
}

/* The agent panel opens like the dock: its width eases while the content inside
   keeps its final width. Switching agents fades the body; the overview fades in. */
.product-ui .t-agent-panel {
  width: var(--agent-panel-w);
  transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-ui .t-agent-panel-body,
.product-ui .t-agents-reveal {
  transition: opacity var(--duration-fast) var(--ease-smooth-out);
}

@starting-style {
  .product-ui .t-agent-panel {
    width: 0;
  }

  .product-ui .t-agent-panel-body,
  .product-ui .t-agents-reveal {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-agent-panel,
  .product-ui .t-agent-panel-body,
  .product-ui .t-agents-reveal,
  .product-ui .t-agents-row,
  .product-ui .t-agents-page [role='progressbar'] > * {
    transition: none !important;
  }
}

/* Detail content reads as settings sections rather than a stack of status cards. */
.product-ui .t-agents-page h4 {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
/* The Computers desk's one sideways row. Its padding gives the overlapping box cards, shadows and
   round corners room inside the scroll box, which would otherwise clip them; the negative margin
   puts the first and last machines back on the section's content edges. */
.product-ui .desk-shelf {
  position: relative;
  margin: -12px -16px;
}

.product-ui .desk-shelf-row {
  display: flex;
  gap: 40px;
  padding: 12px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  outline: none;
}

.product-ui .desk-shelf-row::-webkit-scrollbar {
  display: none;
}

.product-ui .desk-shelf-row > * {
  scroll-snap-align: start;
}

.product-ui .desk-shelf-row:focus-visible {
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(var(--color-text-primary), 0.6);
}

/* More to see on a side: that edge fades out. */
.product-ui .desk-shelf.has-left .desk-shelf-row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
  mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.product-ui .desk-shelf.has-right .desk-shelf-row {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 48px);
  mask-image: linear-gradient(270deg, transparent, #000 48px);
}

.product-ui .desk-shelf.has-left.has-right .desk-shelf-row {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 48px,
    #000 calc(100% - 48px),
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* ‹ and ›, centred on the machines, shown while the pointer is over the row. */
.product-ui .desk-shelf-step {
  position: absolute;
  top: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 999px;
  background: rgb(var(--color-background-surface));
  color: rgb(var(--color-text-secondary));
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.15s;
}

.product-ui .desk-shelf-step.is-left {
  left: 8px;
}

.product-ui .desk-shelf-step.is-right {
  right: 8px;
}

.product-ui .desk-shelf:hover .desk-shelf-step {
  opacity: 1;
}

.product-ui .desk-shelf-step:hover {
  color: rgb(var(--color-text-main));
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .desk-shelf-step {
    transition: none;
  }
}
/* The Computers desk. Every machine starts seen from straight above; once shown, the view tips
   back until it faces the viewer. A laptop's lid swings up as it turns; a box (a Mac mini, a Box)
   shows its front. Every machine stands in the same 248px space on one baseline, 8px above its
   foot, so a row of them lines up. A laptop's readings are on its screen; a box slides left and
   its readings card comes in over its right quarter, clear of its ports and power light. */
.product-ui .desk-art {
  position: relative;
  height: 248px;
  flex-shrink: 0;
  /* A long lens keeps the desk from splaying into a trapezoid. */
  perspective: 2400px;
  perspective-origin: 50% 20%;
}

/* The desk area: a 14-inch MacBook Pro's footprint (312.6 x 221.2 mm) at 280px wide. */
.product-ui .desk-rig {
  position: absolute;
  left: 10px;
  top: 25px;
  width: 280px;
  height: 198px;
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(0deg);
  transition: transform 0.92s cubic-bezier(0.65, 0, 0.35, 1) 0.18s;
}

.product-ui .desk-laptop.is-open .desk-rig {
  transform: translateY(93px) rotateX(86deg);
  transition-delay: 0s;
}

.product-ui .desk-box.is-open .desk-rig {
  transition-delay: 0s;
}

.product-ui .desk-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.product-ui .desk-glass {
  position: relative;
  border-radius: 10.5px 10.5px 3px 3px;
  background: #050506;
}

/* The screen wakes once it faces the viewer: a calm wallpaper under the machine's readings. */
.product-ui .desk-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 7.5px 7.5px 1px 1px;
  background: #060607;
}

.product-ui .desk-screen > * {
  transition: opacity 0.12s;
}

.product-ui .desk-art:not(.is-open) .desk-screen > * {
  opacity: 0;
}

.product-ui .desk-art.is-open .desk-screen > * {
  transition: opacity 0.37s ease-out 0.61s;
}

/* One smooth diagonal wash in the page's own palette: it reads as "on" without muddy edges or
   pulling the eye from the readings. */
.product-ui .desk-wallpaper {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(var(--color-text-primary), 0.2),
      rgba(var(--color-text-primary), 0.06) 55%,
      rgba(var(--color-data-1), 0.16)
    ),
    rgb(var(--color-background-surface));
}

/* ---------- Laptop ---------- */

/* One light from above throughout: a thin even bezel, a crisp notch, quiet keys a shade off the
   deck, a slim front edge and short soft shadows. */

.product-ui .desk-deck {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #3b3b3f, #2e2e32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  transition: border-radius 0.49s ease 0.31s;
}

/* Tight near corners once open, so the front edge meets the deck as one slab. */
.product-ui .desk-laptop.is-open .desk-deck {
  border-radius: 12px 12px 4px 4px;
  transition-delay: 0s;
}

.product-ui .desk-keys {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.4px;
  padding: 2px;
  border-radius: 4px;
  background: #242427;
}

.product-ui .desk-keyrow {
  display: flex;
  flex: 13 1 0;
  gap: 1.6px;
}

.product-ui .desk-keyrow:first-child {
  flex-grow: 7;
}

.product-ui .desk-key {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1.5px;
  background: #2c2c30;
  box-shadow: none;
}

/* The inverted T: half-height left and right keys around a stacked up and down. */
.product-ui .desk-arrows {
  display: grid;
  flex: 3 1 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.8px 1.4px;
}

.product-ui .desk-arrows .desk-key:nth-child(1) {
  grid-area: 2 / 1;
}

.product-ui .desk-arrows .desk-key:nth-child(2) {
  grid-area: 1 / 2;
}

.product-ui .desk-arrows .desk-key:nth-child(3) {
  grid-area: 2 / 2;
}

.product-ui .desk-arrows .desk-key:nth-child(4) {
  grid-area: 2 / 3;
}

.product-ui .desk-pad {
  position: absolute;
  left: 50%;
  top: 112px;
  width: 134px;
  height: 80px;
  margin-left: -67px;
  border-radius: 6px;
  background: linear-gradient(180deg, #34343a, #37373c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* The front edge hangs below the deck, so it only shows once the laptop tips toward the viewer.
   It overlaps the deck by a pixel so no seam shows; edge-on from above it would draw a hairline
   under the closed lid, so it fades in as the laptop turns. */
.product-ui .desk-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 7px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#404045, #232326);
  box-shadow: 0 6px 8px -5px rgba(0, 0, 0, 0.32);
  transform-origin: top;
  transform: rotateX(-90deg);
  opacity: 0;
  transition: opacity 0.25s ease 0.18s;
}

.product-ui .desk-laptop.is-open .desk-edge {
  opacity: 1;
  transition-delay: 0.25s;
}

/* The thumb scoop for lifting the lid. */
.product-ui .desk-edge::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 2px;
  margin-left: -20px;
  border-radius: 0 0 6px 6px;
  background: #1a1a1c;
}

/* Hinged at the deck's far edge; with the rig's 86deg the lid's 94deg makes a flat 180deg to the
   viewer. Closed it floats 3px over the deck so the two never fight; open it drops onto the hinge. */
.product-ui .desk-lid {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: translateZ(3px) rotateX(0deg);
  transition: transform 0.92s cubic-bezier(0.45, 0.05, 0.25, 1) 0.06s;
}

.product-ui .desk-laptop.is-open .desk-lid {
  transform: translateZ(0) rotateX(94deg);
  transition-delay: 0.06s;
}

.product-ui .desk-outer {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #46454b, #303034 55%, #27272b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 20px -14px rgba(0, 0, 0, 0.42);
}

/* Flipped once here and once by the open lid, so the screen reads upright. A thin rim holds
   edge-to-edge black glass. */
.product-ui .desk-inner {
  transform: rotateX(180deg);
  border-radius: 11px 11px 4px 4px;
  background: linear-gradient(#4b4b50, #2d2d31);
  padding: 1px 1px 0;
}

.product-ui .desk-laptop:not(.is-open) .desk-inner,
.product-ui .desk-laptop.is-open .desk-outer {
  pointer-events: none;
}

.product-ui .desk-laptop .desk-glass {
  height: calc(100% - 3px);
  padding: 2.5px 2.5px 4px;
  border-radius: 10px 10px 3px 3px;
  background: #0a0a0b;
}

/* The camera housing, centred in the menu bar like macOS draws it. */
.product-ui .desk-notch {
  position: absolute;
  left: 50%;
  top: 2.5px;
  width: 26px;
  height: 6px;
  margin-left: -13px;
  border-radius: 0 0 3.5px 3.5px;
  background: #0a0a0b;
}

.product-ui .desk-notch::after,
.product-ui .desk-cam {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.5px;
  width: 2px;
  height: 2px;
  margin-left: -1px;
  border-radius: 50%;
  background: #262b3d;
}

/* Without a notch the camera sits in a slightly deeper top bezel. */
.product-ui .desk-laptop:not(.is-apple) .desk-glass {
  padding-top: 6px;
}

/* The hinge cover between the display and the deck. */
.product-ui .desk-hinge {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(#2a2a2e, #141416);
}

/* A Windows laptop in platinum: light keys on a light deck, as Surface ships them. */
.product-ui .desk-laptop.is-windows .desk-outer {
  background: linear-gradient(180deg, #ebecee, #d6d7da 55%, #c6c7cb);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 14px 20px -14px rgba(0, 0, 0, 0.3);
}

.product-ui .desk-laptop.is-windows .desk-deck {
  background: linear-gradient(180deg, #e3e4e7, #d4d5d9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.product-ui .desk-laptop.is-windows .desk-keys {
  background: #c4c5c9;
}

.product-ui .desk-laptop.is-windows .desk-key {
  background: #dadbdf;
}

.product-ui .desk-laptop.is-windows .desk-pad {
  background: #dddee1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.product-ui .desk-laptop.is-windows .desk-edge {
  background: linear-gradient(#e5e6e9, #b4b5b9);
}

.product-ui .desk-laptop.is-windows .desk-edge::after {
  background: #a3a4a8;
}

.product-ui .desk-laptop.is-windows .desk-inner {
  background: linear-gradient(#d8d9dc, #b5b6ba);
}

.product-ui .desk-laptop.is-windows .desk-hinge {
  background: linear-gradient(#acadb1, #8e8f93);
}

/* Any other laptop, maker unknown, in matte graphite. */
.product-ui .desk-laptop.is-other .desk-outer {
  background: linear-gradient(180deg, #38393d, #2b2c2f 55%, #232427);
}

.product-ui .desk-laptop.is-other .desk-deck {
  background: linear-gradient(180deg, #333437, #28292c);
}

.product-ui .desk-laptop.is-other .desk-key {
  background: #2a2b2e;
}

.product-ui .desk-laptop.is-other .desk-inner {
  background: #2a2b2e;
}

/* ---------- Box: a Mac mini, or a Box ---------- */

/* Centred in a laptop's 300px from above; turning to show its front, it slides left to make room
   for its readings card. Not to the cell's edge: in perspective its front is a little wider than
   its top, and the row's scroll box would cut off the near corner. */
.product-ui .desk-box .desk-rig {
  left: 66px;
  top: 40px;
  width: 168px;
  height: 168px;
  transform: translate(0, 0) rotateX(0deg);
}

.product-ui .desk-box.is-open .desk-rig {
  /* 68deg, not flatter: enough of the lid shows for its mark to read, with the front still in view. */
  transform: translate(-36px, 78px) rotateX(68deg);
}

/* A contact shadow on the desk, under the box. */
.product-ui .desk-mini-shadow {
  position: absolute;
  inset: 16px 12px 2px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.26);
  filter: blur(9px);
}

/* The 2024 Mac mini: 12.7 cm square and 5 cm tall, round-cornered, floating on a recessed foot,
   its top edge lit by the same light from above. */
.product-ui .desk-mini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 26px;
  transform-style: preserve-3d;
  transform: translateZ(64px);
  background: linear-gradient(165deg, #f2f2f4, #dedee2 60%, #d1d1d6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transition: border-radius 0.49s ease 0.31s;
}

/* Square near corners once facing it, so the top meets the front along one clean edge. */
.product-ui .desk-box.is-open .desk-mini {
  border-radius: 26px 26px 2px 2px;
  transition-delay: 0s;
}

.product-ui .desk-mini .desk-mark.is-pangea {
  width: 46px;
  height: 40px;
  fill: rgba(255, 255, 255, 0.95);
  shape-rendering: geometricPrecision;
}

/* The face: its round corners turn away from the light at both ends; ports on the left, the power
   light on the right. Edge-on from above it would draw a hairline, so it fades in as the view
   turns. */
.product-ui .desk-mini-front {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding-left: 30px;
  border-radius: 0 0 5px 5px;
  transform-origin: top;
  transform: rotateX(-90deg);
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1),
      transparent 10%,
      transparent 90%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(#e7e7ea, #d4d4d8 80%, #c6c6cb);
  opacity: 0;
  transition: opacity 0.25s ease 0.18s;
  --desk-led: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.product-ui .desk-box.is-open .desk-mini-front {
  opacity: 1;
  transition-delay: 0.25s;
}

/* The recessed black foot the body floats on. */
.product-ui .desk-mini-front::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100%;
  height: 6px;
  border-radius: 0 0 4px 4px;
  background: #1c1c1f;
}

.product-ui .desk-mini-port {
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: #6c6c72;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}

.product-ui .desk-mini-jack {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #6c6c72;
}

.product-ui .desk-mini-front::after {
  content: '';
  position: absolute;
  /* Left of centre, so the readings card never hides it. */
  left: 92px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--desk-led);
  box-shadow: 0 0 3px var(--desk-led);
}

.product-ui .desk-art.is-off .desk-mini-front::after {
  background: #6b6b70;
  box-shadow: none;
}

/* A Box: the same footprint in black, Pangea's mark on top. */
.product-ui .desk-box.is-pangea .desk-mini {
  background: linear-gradient(165deg, #3c3c41, #2a2a2e 60%, #222225);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.product-ui .desk-box.is-pangea .desk-mini-front {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.3),
      transparent 10%,
      transparent 90%,
      rgba(0, 0, 0, 0.3)
    ),
    linear-gradient(#2e2e32, #222225 80%, #1b1b1e);
  --desk-led: rgb(var(--color-data-1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.product-ui .desk-box.is-pangea .desk-mini-front::before {
  background: #09090a;
}

.product-ui .desk-box.is-pangea .desk-mini-port,
.product-ui .desk-box.is-pangea .desk-mini-jack {
  background: #0e0e10;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .desk-art,
  .product-ui .desk-art * {
    transition: none !important;
  }
}
/* Each machine's readings, then its agents: on a laptop's screen, over its wallpaper, or in a card
   beside a box. The app's colour tokens are comma lists, so translucent colours use
   rgba(var(--token), alpha). */
.product-ui .desk-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-ui .desk-panel.is-screen {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: 14px 18px;
}

/* The box's card, over the box's right quarter in the same 248px space, on the same baseline. */
.product-ui .desk-side {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 8px;
  width: 140px;
  padding: 10px 10px 11px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 12px;
  background: rgb(var(--color-background-surface));
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.12s;
}

.product-ui .desk-art.is-open .desk-side {
  opacity: 1;
  transition: opacity 0.37s ease-out 0.61s;
}

.product-ui .desk-side .desk-gauges {
  grid-template-columns: 1fr;
  gap: 9px;
}

.product-ui .desk-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.product-ui .desk-gauge {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 5px;
  min-width: 0;
}

/* "11.2 of 16 GB": under its meter in a box's card, beside its label on a laptop's screen. */
.product-ui .desk-gauge-detail {
  display: none;
  grid-column: 1 / -1;
  margin-top: -1px;
  font-size: 10.5px;
  line-height: 13px;
  color: rgb(var(--color-text-tertiary));
  font-variant-numeric: tabular-nums;
}

.product-ui .desk-side .desk-gauge-detail {
  display: block;
}

/* A laptop's screen has the width for one gauge per line, so each reads as one line of text. */
.product-ui .desk-panel.is-screen .desk-gauges {
  grid-template-columns: 1fr;
  gap: 10px;
}

.product-ui .desk-panel.is-screen .desk-gauge {
  grid-template-columns: auto 1fr auto;
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.product-ui .desk-panel.is-screen .desk-gauge-detail {
  display: block;
  grid-row: 1;
  grid-column: 2;
  margin-top: 0;
}

.product-ui .desk-panel.is-screen .desk-gauge-value {
  grid-row: 1;
  grid-column: 3;
}

.product-ui .desk-gauge-label {
  font-size: 11px;
  line-height: 14px;
  color: rgb(var(--color-text-tertiary));
}

.product-ui .desk-gauge-value {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 14px;
  color: rgb(var(--color-text-secondary));
  font-variant-numeric: tabular-nums;
}

.product-ui .desk-meter {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--color-line-control), 0.9);
}

.product-ui .desk-meter > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: rgb(var(--color-text-primary));
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-ui .desk-meter > i.is-high {
  background: rgb(var(--color-warning));
}

/* A stale reading keeps its numbers but greys them and says how old they are. */
.product-ui .desk-readings.is-stale .desk-gauge-value {
  color: rgb(var(--color-text-tertiary));
}

.product-ui .desk-readings.is-stale .desk-meter > i {
  background: rgb(var(--color-text-tertiary));
}

.product-ui .desk-stale {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 14px;
  color: rgb(var(--color-warning));
}

.product-ui .desk-note {
  font-size: 11.5px;
  line-height: 16px;
  color: rgb(var(--color-text-tertiary));
}

.product-ui .desk-link {
  color: rgb(var(--color-text-primary));
  font-weight: 500;
}

.product-ui .desk-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-ui .desk-agents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.product-ui .desk-side .desk-agents {
  gap: 4px;
}

/* A touch smaller than elsewhere, so a row of agents stays light on the machine. */
.product-ui .desk-agents button {
  width: 28px;
  height: 28px;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .desk-meter > i {
    transition: none;
  }
}
.product-ui .box-loading {
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}

/* The wrap stacks two layers on the same coordinates. The
   skeleton owns the cold pulse + the fade-out side of the
   reveal; the content owns the fade-in side. They share the
   same duration / ease so the swap reads as one motion. */
.product-ui .t-skel {
  position: relative;
}
.product-ui .t-skel-skeleton,
.product-ui .t-skel-content {
  position: absolute;
  inset: 0;
}

.product-ui .t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.product-ui .t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.product-ui .t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
/* Snap-back when replaying: kill transitions so the reverse
   (revealed → skeleton) is instant. Drop `.is-resetting`
   after a forced reflow and the next reveal animates again. */
.product-ui .t-skel.is-resetting .t-skel-skeleton,
.product-ui .t-skel.is-resetting .t-skel-content {
  transition: none !important;
}

/* Pulse: place the animation on the bar/avatar children, not
   on the skeleton itself, so the skeleton's opacity / filter
   stay free for the cross-fade transition above. */
.product-ui .t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--pulse-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .t-skel-skeleton,
  .product-ui .t-skel-content {
    transition: none !important;
  }
  .product-ui .t-skel-skeleton.is-pulsing > * {
    animation: none !important;
  }
}

.product-ui .box-loading:not(.is-revealed) {
  min-height: 220px;
}
.product-ui .box-loading .t-skel-content {
  position: relative;
  inset: auto;
}
.product-ui .box-loading .t-skel-skeleton {
  pointer-events: none;
}
.product-ui .first-launch-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2147483647;
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-in-out);
}

.product-ui .first-launch-intro.is-leaving {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .product-ui .first-launch-intro {
    transition: none;
  }
}
/*$vite$:1*/
.product-ui{position:relative;width:1248px;height:760px;container:native-demo / size;transform:translateZ(0);color-scheme:dark;contain:layout style}.product-body,.product-root{width:1248px;height:760px}

/* Native Tailwind 3 already applies translateY; neutralize host Tailwind 4 individual translate. */
.product-ui .t-workspace-tab-action { translate: none; }

.product-ui .demo-session-event { animation: demo-session-event-in 250ms ease-out both; }
@keyframes demo-session-event-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .product-ui .demo-session-event { animation:none; } }

/* Tour hover cue: shows hover-only row controls while the tour points at a row. */
.product-ui .group[data-tour-hover] .group-hover\:visible {
  visibility: visible;
}