.RDView{
	--column: 8;
	--row: 4;
	--scale: 1;
}
.event{
	--event-width: 1;
	--event-height: 1;
	--event-beat: 0;
	--event-y: 0;
	--hue: 0;
	--brightness: 100;
	--grayscale: 0;
	--opacity: 100;
	--offset-beat: 0;
	--offset-y: 0;
	--offset-hue: 0;
	--offset-brightness: 100;
	--offset-grayscale: 0;
	--offset-opacity: 100;
	--tick: 1;
	--swing: 1;
	--loop: 0;
	--interval: 2;
	--delay: 0;
	--pulse: 1;
}
.event.group{
	--group-width: 1;
	--group-height: 1;
	--group-beat: 0;
	--group-y: 0;
	--group-hue: 0;
	--group-brightness: 100;
	--group-grayscale: 0;
	--group-opacity: 100;
	--group-offset-hue: 0;
	--group-offset-brightness: 100;
	--group-offset-grayscale: 0;
	--group-offset-opacity: 100;
	--group-outline: red;
	--group-offset-outline: red;
}

.RDRooms {
	width: 352px;
	height: 198px;
	border-color: #7A7A7A;
	border-width: calc(2px / var(--scale));
	border-style: solid;
	background-color: black;
	margin: calc((1 - var(--scale)) * -99px) calc((1 - var(--scale)) * -176px);
	transform: scale(var(--scale));
	background-image: var(--background);
	perspective: 1000px;
	transition: border-color 0.5s, background-color 0.5s;
	z-index: 0;

	&:hover {
		border-color: transparent;

		&>.room {
			border-color: #7A7A7A;
			transform: translateX(calc(var(--index) * 15px)) rotate3d(0, 1, 0, calc(var(--index) * 5deg));
			opacity: 80%;

			&>* {
				border-color: #7A7A7A88;
				background-color: #7A7A7A22;
			}
		}
	}

	&>.room {
		image-rendering: pixelated;
		position: absolute;
		transition: transform 0.5s, border-color 0.5s, opacity 0.5s;
		border-color: transparent;
		border-width: calc(1px / var(--scale));
		border-style: solid;
		width: 352px;
		height: 198px;
		transform-origin: 140%;

		&>* {
			transition: background-color 0.5s;
			border-color: transparent;
			border-width: calc(1px / var(--scale));
			border-style: dotted;
			image-rendering: pixelated;
			position: absolute;
			transform-origin: top left;
			transform: translate(calc(var(--position-x, 0px)), calc(var(--position-y, 0px))) rotate(calc(var(--angle) * 1deg));
			background-image: var(--image);
		}
	}

}

.RDViewContent {
	width: 100%;
	height: calc((var(--row) * var(--scale) * 28 + 8) * 1px);
	margin-bottom: 0;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	justify-self: center;
	justify-content: center;

	&>.RDView {
		transform: translate(0, calc(var(--scale) * 6px)) scale(var(--scale));;
		background: url(./assets/grid.png) repeat;
		background-size: 28px;
		position: relative;

		&>.lines {
			display: grid;
			position: absolute;
			grid-template-columns: repeat(calc(var(--line-count)), calc(var(--cpb) * 28px));
			height: min-content;
			transform: translate(calc(var(--beat) * 28px), -10px);

			&>* {
				position: relative;
				width: max-content;
				height: min-content;
				margin: 0 auto;
				font-size: 12px;
				transform: translate(calc(var(--cpb) * -14px), 0);
				bottom: 50%;
			}
		}

		&>.playhead {
			position: absolute;
			width: 10px;
			height: 4px;
			transform: translate(calc(var(--beat) * 28px - 4px), -6px);
			background-image: url(./assets/playhead.png);
			z-index: 1;

			&::before {
				position: absolute;
				content: '';
				width: 14px;
				height: 10px;
				background-color: #E3E3E3;
				transform: translate(-2px, -10px);
			}

			&::after {
				position: absolute;
				content: '';
				width: 2px;
				height: calc(var(--row) * 28px + 2px);
				background-color: #E3E3E3;
				transform: translate(4px, 4px);
			}
		}

		&::before {
			content: '';
			image-rendering: pixelated;
			position: absolute;
			width: calc(var(--column) * 28px);
			height: 6px;
			background-size: 28px;
			background-image: url(./assets/grid-top.png);
			transform: translate(0, -6px);
		}
	}
}

.RDView{
	width: calc(var(--column) * 28px);
	height: calc(var(--row) * 28px);
	margin: calc(var(--row) * (1 - var(--scale)) * -14px) calc(var(--column) * (1 - var(--scale)) * -14px);
	image-rendering: pixelated;
	transform: scale(var(--scale));


	&.center {
		display: table;
		margin: 0 auto;
	}

	&.transparent {
		background-image: none;

		&::before {
			background-image: none;
		}
	}

	&.inline {
		display: inline-block;
		vertical-align: -2px;
	}


	&>.event,
	>.beat {
		position: absolute;
		image-rendering: pixelated;
		cursor: pointer;
		filter: 
			hue-rotate(calc(var(--hue) * 1deg)) 
			brightness(calc(var(--brightness) * 1%)) 
			grayscale(calc(var(--grayscale) * 1%))
			opacity(calc(var(--opacity) * 1%));
		transition: transform 0.3s, opacity 0.3s, visibility 0.3s, filter 0.3s;

		&:hover {
			z-index: 1;

			&>.description {
				visibility: visible;
				opacity: 100%;
				transform: translate(-4px, -4px);
			}
		}

		&:active {
			filter: hue-rotate(calc(var(--offset-hue) * 1deg)) brightness(calc(var(--offset-brightness) * 1%)) grayscale(calc(var(--offset-grayscale) * 1%));
		}

		&>.description {
			width: max-content;
			height: min-content;
			visibility: hidden;
			background-color: #2B2B2BEE;
			border-radius: 4px;
			border-color: #1B1B1B;
			border-width: 4px;
			border-style: solid;
			opacity: 0%;
			position: absolute;
			overflow: none;
			transition: width, height, opacity, 0.15s;
			z-index: 999;
			margin-top: calc(var(--event-height) * 28px);

			&>.line {
				height: 28px;
				margin: 7px 5px;
				font-size: 16px;
				min-width: 200px;
				font-weight: bold;
				display: grid;
				align-items: baseline;
				grid-template-columns: repeat(var(--box-count), 1fr);
				width: calc(var(--width) * 28px);

				&:has(.icon:last-child) {
					grid-template-columns: repeat(var(--box-count), 1fr) repeat(var(--icon-count), 32px);
				}

				&:has(.text:first-child) {
					grid-template-columns: 40% repeat(var(--box-count), 1fr);

					&:has(.icon:last-child) {
						grid-template-columns: 40% repeat(var(--box-count), 1fr) repeat(var(--icon-count), 32px);
					}
				}

				&.disable-grid {
					grid-template: none;
				}

				&>.text {
					color: white;
					transition: color, 0.15s;
					display: inline-block;
					line-height: 14px;
					font-weight: 800;
					text-shadow:
						2px 0 0 var(--stroke-color, black),
						2px 1px 0 var(--stroke-color, black),
						2px 2px 0 var(--stroke-color, black),
						1px 2px 0 var(--stroke-color, black),
						0 2px 0 var(--stroke-color, black),
						-1px 2px 0 var(--stroke-color, black),
						-2px 2px 0 var(--stroke-color, black),
						-2px 1px 0 var(--stroke-color, black),
						-2px 0 0 var(--stroke-color, black),
						-2px -1px 0 var(--stroke-color, black),
						-2px -2px 0 var(--stroke-color, black),
						-1px -2px 0 var(--stroke-color, black),
						0 -2px 0 var(--stroke-color, black),
						1px -2px 0 var(--stroke-color, black),
						2px -2px 0 var(--stroke-color, black),
						2px -1px 0 var(--stroke-color, black);

					&.f-gray {
						color: #808080;
					}
				}

				&>.icon {
					&.file {
						width: 24px;
						height: 22px;
						background-image: url(./assets/contents/file.png);
					}

					&.wrench {
						width: 26px;
						height: 26px;
						background-image: url(./assets/contents/wrench.png);
					}
				}

				&>.scroll {
					width: 100%;
					height: 7px;
					background-color: #B2B2B2;
					border-radius: 4px;
					padding-right: 0%;

					&>.point {
						content: '';
						position: relative;
						width: 16px;
						height: 16px;
						border-radius: 40%;
						background-color: #D2D2D2;
						box-shadow: 2px 2px 0 var(--stroke-color, #0008);
						transform: translate(calc(var(--scroll) / 100 * -16px), -4px);
						left: calc(var(--scroll) * 1%);
					}
				}

				&>.box {
					display: inline-block;
					background-color: #FFFFFF;
					border-radius: 4px;
					text-align: right;
					margin: 5px;
					padding: 0 5px;
					transition: background-color 0.2s;

					&::before {
						content: var(--tips);
						display: block;
						text-align: left;
						height: 0;
						color: #B2B2B2;
					}

					&.middle {
						text-align: center;
					}

					&.button {
						color: white;
						background-color: #C9C9C9;
						font-weight: 800;
						text-shadow:
							2px 0 0 var(--stroke-color, black),
							2px 1px 0 var(--stroke-color, black),
							2px 2px 0 var(--stroke-color, black),
							1px 2px 0 var(--stroke-color, black),
							0 2px 0 var(--stroke-color, black),
							-1px 2px 0 var(--stroke-color, black),
							-2px 2px 0 var(--stroke-color, black),
							-2px 1px 0 var(--stroke-color, black),
							-2px 0 0 var(--stroke-color, black),
							-2px -1px 0 var(--stroke-color, black),
							-2px -2px 0 var(--stroke-color, black),
							-1px -2px 0 var(--stroke-color, black),
							0 -2px 0 var(--stroke-color, black),
							1px -2px 0 var(--stroke-color, black),
							2px -2px 0 var(--stroke-color, black),
							2px -1px 0 var(--stroke-color, black);

						&:not(.active):hover {
							background-color: #F5F5F5;
						}

						&.b-gray {
							background-color: #636363;
						}
					}

					&.input {
						box-shadow: inset 3px 2px #D1D1D1;
						color: #323232;
						overflow: hidden;

						&.foreground-gray {
							color: #9C9C9C;
						}

						&.b-black {
							box-shadow: inset 3px 2px #191919;
							background-color: #1F1F1F;
							color: white;
						}

						&.f-gray {
							color: #808080;
						}
					}

					&.select {
						text-align: left;
						background-color: #EEEEEE;
						color: #323232;
						overflow: hidden;

						&::after {
							content: '';
							display: block;
							background-image: url(./assets/contents/list.png);
							float: right;
							margin-top: 9px;
							width: 14px;
							height: 10px;
						}

						&>.list {
							width: 250px;
							height: 140px;
							max-height: 200px;
							overflow: scroll;
							visibility: hidden;
							padding: 0px 4px;
							background-color: #EEEEEE;
							border-radius: 4px;
							opacity: 0%;
							position: absolute;
							overflow: scroll;
							display: grid;
							grid-template-rows: repeat(5, 20%);
							transition: opacity 0.3s, visibility 0.3s;
							z-index: 999;

							&>p {
								margin: 2px 0px;
								padding: 0px 20px;
								border-radius: 4px;

								&.selected::before {
									content: '';
									position: absolute;
									background-image: url(./assets/contents/selected.png);
									width: 14px;
									height: 14px;
									transform: translate(-20px, 6px);
								}
							}
						}

						&:hover {
							background-color: #BBBBBB;

							&>.list {
								visibility: visible;
								opacity: 100%;

								&>p {
									&:hover {
										background-color: #82EAF3;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	&>.event {
		width: calc(var(--event-width) * 28px);
		height: calc(var(--event-height) * 28px);
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-size: auto calc(28px * 8);
		background-position: calc(var(--event-x) * -28px) calc((var(--event-y) + 4) * -28px);
		transition: transform 0.3s, opacity 0.3s, visibility 0.3s, filter 0.3s, outline-color 0.3s;

		&:active {
			transform: translate(calc((var(--beat) + var(--offset-beat)) * 28px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-position: calc(var(--event-x) * -28px) calc(var(--event-y) * -28px);
		}

		&.sounds {
			background-image: var(--img, url(./assets/events/sounds.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #D12433;
				}

				&>.box.button.active {
					background-color: #D92433;
				}
			}
		}

		&.rooms {
			background-image: var(--img, url(./assets/events/rooms.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #D0B110;
				}

				&>.box.button.active {
					background-color: #D8B811;
				}
			}
		}

		&.decorations {
			background-image: var(--img, url(./assets/events/decorations.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #00BC56;
				}

				&>.box.button.active {
					background-color: #00C459;
				}
			}
		}

		&.actions {
			background-image: var(--img, url(./assets/events/actions.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #BA40A9;
				}

				&>.box.button.active {
					background-color: #C544B3;
				}
			}
		}

		&.rows {
			background-image: var(--img, url(./assets/events/rows.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #2C4EDB;
				}

				>.box.button {
					text-shadow:
						2px 0 0 var(--stroke-color, #2D2D2D),
						2px 1px 0 var(--stroke-color, #2D2D2D),
						2px 2px 0 var(--stroke-color, #2D2D2D),
						1px 2px 0 var(--stroke-color, #2D2D2D),
						0 2px 0 var(--stroke-color, #2D2D2D),
						-1px 2px 0 var(--stroke-color, #2D2D2D),
						-2px 2px 0 var(--stroke-color, #2D2D2D),
						-2px 1px 0 var(--stroke-color, #2D2D2D),
						-2px 0 0 var(--stroke-color, #2D2D2D),
						-2px -1px 0 var(--stroke-color, #2D2D2D),
						-2px -2px 0 var(--stroke-color, #2D2D2D),
						-1px -2px 0 var(--stroke-color, #2D2D2D),
						0 -2px 0 var(--stroke-color, #2D2D2D),
						1px -2px 0 var(--stroke-color, #2D2D2D),
						2px -2px 0 var(--stroke-color, #2D2D2D),
						2px -1px 0 var(--stroke-color, #2D2D2D);

					&.active {
						background-color: #1C53D4;
					}
				}
			}
		}

		&.custom {
			background-image: var(--img, url(./assets/events/custom.png));
		}

		&.group {
			width: calc(var(--group-width) * 28px);
			height: calc(var(--group-height) * 28px);
			transform: translate(calc((var(--group-beat) - (var(--scale) - 1) * var(--column) / 2) * 28px),
					calc((var(--group-y) - (var(--scale) - 1) * var(--row) / 2) * 28px));
			outline-style: solid;
			outline-color: var(--group-outline, red);
			outline-width: 2px;

			&>.description {
				margin-top: calc(var(--group-height) * 28px);
			}

			&>* {
				filter: 
					hue-rotate(calc(var(--group-hue) * 1deg)) 
					brightness(calc(var(--group-brightness) * 1%)) 
					grayscale(calc(var(--group-grayscale) * 1%))
					opacity(calc(var(--group-opacity) * 1%));
			}

			&:active {
				transform: translate(calc((var(--group-beat) + var(--group-offset-beat) - (var(--scale) - 1) * var(--column) / 2) * 28px),
						calc((var(--group-y) + var(--group-offset-y) - (var(--scale) - 1) * var(--row) / 2) * 28px));
				outline-color: var(--group-offset-outline, red);
				&>* {
					filter: 
						hue-rotate(calc(var(--group-offset-hue) * 1deg)) 
						brightness(calc(var(--group-offset-brightness) * 1%)) 
						grayscale(calc(var(--group-offset-grayscale) * 1%))
						opacity(calc(var(--group-offset-opacity) * 1%));
				}
			}
		}

		&>*.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-true.png);
		}

		&>*.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-false.png);
		}

		&>*.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-both.png);
		}

		&>*.tag {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(0, calc(var(--event-height) *28px - 12px));
			background-image: url(./assets/tag.png);
		}
	}

	&>.beat {
		position: absolute;
		&>.description>.line {

			&>.text.hoverable:hover,
			>*>.highlight {
				color: #2C4EDB;
			}

			>.box.button {
				text-shadow:
					2px 0 0 var(--stroke-color, #2D2D2D),
					2px 1px 0 var(--stroke-color, #2D2D2D),
					2px 2px 0 var(--stroke-color, #2D2D2D),
					1px 2px 0 var(--stroke-color, #2D2D2D),
					0 2px 0 var(--stroke-color, #2D2D2D),
					-1px 2px 0 var(--stroke-color, #2D2D2D),
					-2px 2px 0 var(--stroke-color, #2D2D2D),
					-2px 1px 0 var(--stroke-color, #2D2D2D),
					-2px 0 0 var(--stroke-color, #2D2D2D),
					-2px -1px 0 var(--stroke-color, #2D2D2D),
					-2px -2px 0 var(--stroke-color, #2D2D2D),
					-1px -2px 0 var(--stroke-color, #2D2D2D),
					0 -2px 0 var(--stroke-color, #2D2D2D),
					1px -2px 0 var(--stroke-color, #2D2D2D),
					2px -2px 0 var(--stroke-color, #2D2D2D),
					2px -1px 0 var(--stroke-color, #2D2D2D);

				&.active {
					background-color: #1C53D4;
				}
			}
		}
	}

	&>.beat:has(.pulse.freetime) {
		width: 14px;
		height: 24px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/rows.png);
		background-position: calc((var(--pulse) - 1) * -14px) calc(2 * 28px);

		&:active>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 16) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-narrow-hover-area.png);
			transform: translate(14px, 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 24px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 16) * 1px), 0);
				background-image: url(./assets/beats/hold-narrow-hover-right.png);
			}
		}

		&>.pulse::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 24px;
			background-image: url(./assets/beats/hit-narrow.png);
			transform: translate(-4px, 0);
			opacity: calc(clamp(0, var(--pulse) - 6, 1) * clamp(0, 8 - var(--pulse), 1) * 100%);
		}

		&:active {
			transform: translate(calc((var(--beat) + var(--offset-beat)) * 28px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-position: calc((var(--pulse) - 1) * -14px) calc(6 * 28px);
		}
	}

	&>.beat:has(.add.freetime) {
		width: 14px;
		height: 28px;
		background-image: url(./assets/beats/rows.png);
		background-position: calc((var(--pulse) - 1) * -14px) calc(3 * 28px);

		&:active>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 16) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-hover-area.png);
			transform: translate(14px, 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 16) * 1px), 0);
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}

		&>.add::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 28px;
			background-image: url(./assets/beats/hit.png);
			transform: translate(-4px, 0);
			opacity: calc(clamp(0, var(--pulse) - 6, 1) * clamp(0, 8 - var(--pulse), 1) * 100%);
		}

		&:active {
			background-position: calc((var(--pulse) - 1) * -14px) calc(7 * 28px);
		}

		&>.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-true.png);
			z-index: 1;
		}

		&>.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-false.png);
			z-index: 1;
		}

		&>.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-both.png);
			z-index: 1;
		}
	}

	&>.beat:has(.wave) {
		width: 28px;
		height: 28px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/events/rows.png);
		background-position: calc(1 * -28px) calc(4 * 28px);

		&:active {
			position: absolute;
			background-position: calc(1 * -28px) 0;
			transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px + 2px));
			z-index: -2;
		}
	}

	&>.beat:not(:has(.freetime)):not(:has(.row-xs)):not(:has(.wave)) {
		width: calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 4) * 1px);
		height: 28px;
		transform: translate(calc((var(--beat) * 28 + 4) * 1px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/beat-middle.png);
		background-size: auto 28px;

		&::before {
			content: '';
			position: absolute;
			background-image: url(./assets/beats/beat-left.png);
			background-size: auto 28px;
			transform: translate(-4px, 0);
			width: 4px;
			height: inherit;
		}

		&::after {
			content: '';
			position: absolute;
			background-image: url(./assets/beats/beat-right.png);
			background-size: auto 28px;
			transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 8) * 1px), 0);
			width: 10px;
			height: inherit;
		}

		&>.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-true.png);
			z-index: 1;
		}

		&>.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-false.png);
			z-index: 1;
		}

		&>.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-both.png);
			z-index: 1;
		}

		&>.tag {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, calc((var(--event-height)* 28 - 12) * 1px));
			background-image: url(./assets/tag.png);
			z-index: 1;
		}

		&>.loop{
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop)), auto);
			width: calc(var(--loop) * var(--interval) * 28px);
			height: inherit;
			transform: translate(calc(var(--tick) * 28px - 8px), 0);
			&>div{
				width: 10px;
				height: inherit;
				background-image: url(./assets/beats/hit.png);
				&::after{
					content: '';
					position: absolute;
					width: 6px;
					height: 28px;
					background-size: auto 100%;
					transform: translate(calc((var(--interval) - var(--tick)) * 28px + 2px), 0);
					background-image: url(./assets/beats/pulse.png);
					opacity: 0%;
				}
			}
		}

		&:hover {
			&::before {
				transform: translate(-6px, 0);
				width: 6px;
				background-image: url(./assets/beats/beat-pulse-start.png);
			}

			&>.loop{
				&>div::after{
					opacity: 100%;
				}
			}

			&>div.subdivisions>div.subdivision>div::before {
				opacity: 100%;
			}

			&>div.burnshot {
				transform: translate(calc((var(--tick) * 28 - 13) * 1px), -8px);
				width: 18px;
				height: 36px;
				background-image: url(./assets/beats/burnshot-hover-right.png);

				&::before {
					transform: translate(calc(((var(--tick) + var(--interval)) * -28 + 7) * 1px), 19px);
				}

				&::after {
					transform: translate(calc(((var(--interval)) * -28 + 7) * 1px), 19px);
				}
			}

			&>div.classicbeat>div {
				opacity: 100%;
			}

			&:not(:has(.classicbeat)) {
				&::after {
					transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 13) * 1px), -8px);
					width: 18px;
					height: 36px;
					background-size: auto 100%;
					z-index: 1;
					background-image: url(./assets/beats/oneshot-hover-right.png);
				}
			}
		}

		&:active {
			transform: translate(calc(((var(--beat) + var(--offset-beat)) * 28 + 4) * 1px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-image: url(./assets/beats/beat-hover-middle.png);

			&::before {
				background-image: url(./assets/beats/beat-hover-pulse-start.png);
			}
		}

		&>div.burnshots {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div {
				background-image: url(./assets/beats/burnshot-right.png);
				transform: translate(calc((var(--tick) * 28 - 6) * 1px), 0);
				width: 14px;
				height: inherit;

				&::before {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--tick) + var(--interval)) * -28 + 4) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 2;
				}

				&::after {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval)) * -28 + 4) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 2;
				}
			}
		}

		&>div.freezeshots {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div{					
				background-image: url(./assets/beats/freeze-hit.png);
				transform: translate(calc((var(--tick) * 28 - 4) * 1px), 0);
				width: 10px;
				background-size: 100%;
				height: inherit;

				&::before {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval)) * -28 + 2) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 4;
				}

				&::after {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval) - var(--delay)) * -28 + 2) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 4;
				}
			}
		}

		&>div.skipshot {
			position: absolute;
			width: calc(((var(--interval, var(--tick) * 2) - var(--delay) - (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/skip-area.png);
			transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay) + (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 10px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc(((var(--interval, var(--tick) * 2) - var(--delay) - (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28 - 6) * 1px), 0);
				background-image: url(./assets/beats/skip-right.png);
			}
		}

		&>div.subdivisions {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div.subdivision{
				display: grid;
				grid-template-columns: repeat(calc(var(--subdivision)), calc(var(--interval) / var(--subdivision) / 2 * 28px));
				width: calc(((var(--tick)) * 28 + 1) * 1px);
				height: inherit;
				background-size: auto 100%;
				transform: translate(calc(((var(--tick) + var(--delay)) * 28) * 1px), 0);
				&>div {
					background-image: url(./assets/beats/hit.png);
					width: 10px;
					background-size: auto 100%;
					transform: translate(calc((0 * 28 - 4) * 1px), 0);
					z-index: 1;
					&::before {
						content: '';
						position: absolute;
						width: 6px;
						height: 28px;
						background-size: auto 100%;
						opacity: 0%;
						transform: translate(calc(((var(--tick) + var(--delay)) * -28 + 2) * 1px), 0);
						background-image: url(./assets/beats/pulse.png);
						z-index: 0;
					}
				}
			}
			&::after{
				content: '';
				position: absolute;
				width: calc(((var(--interval) / 2) * (var(--subdivision) - 1) / var(--subdivision) * 28 + 1) * 1px);
				height: inherit;
				background-image: url(./assets/beats/subdivision-area.png);
				transform: translate(calc(((var(--interval) * var(--loop) + var(--tick) + var(--delay)) * 28) * 1px), 0);
				z-index: -1;				
			}
		}

		&>div.classicbeat {
			display: grid;
			grid-template-columns: repeat(3,
				calc((var(--tick) / 3 - var(--swing)) * 28px)
				calc((var(--swing) * 28px)));
			position: absolute;
			width: calc(var(--tick) * 28px);
			height: inherit;

			&>div {
				width: 6px;
				height: inherit;
				transform: translate(-6px, 0);
				background-size: auto 100%;
				opacity: 0%;
				background-image: url(./assets/beats/pulse.png);
				z-index: 1;
			}
		}

	}

	&>.beat:has(.classicbeat) {
		&>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 2) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-area.png);
			transform: translate(calc(((var(--tick) + var(--delay)) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 2) * 1px), 0);
				background-image: url(./assets/beats/hold-right.png);
			}
		}

		&:active>div.holdbeat {
			background-image: url(./assets/beats/hold-hover-area.png);

			&::after {
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}
	}

	&>.beat:not(:has(.classicbeat)) {
		&>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 2) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-area.png);
			transform: translate(calc(((var(--tick) + var(--delay) + var(--loop) * var(--interval)) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 2) * 1px), 0);
				background-image: url(./assets/beats/hold-right.png);
			}
		}

		&:active>div.holdbeat {
			background-image: url(./assets/beats/hold-hover-area.png);

			&::after {
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}
	}

	&>.beat:has(.row-xs) {
		width: 56px;
		height: 28px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/events/rows.png);
		background-position: -56px calc(4 * -28px);

		&:active {
			background-position: -56px 0;
			transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px + 2px));
		}

		&>.row-xs {
			display: grid;
			grid-template-columns: repeat(6, 9px);
			transform: translate(2px, 11px);
			width: inherit;
			height: inherit;

			&>.x {
				width: 7px;
				height: 7px;
				background-image: url(./assets/beats/row-x.png);
			}
		}
	}

	&>.pulse {
		width: 6px;
		height: 28px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 2px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/pulse.png);
		z-index: 1;
	}

	&>.hit {
		width: 10px;
		height: 28px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 4px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/hit.png);
		z-index: 1;
	}

	&>.cross {
		width: 6px;
		height: 6px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 2px), calc(var(--y) * 28px + 11px));
		background-image: url(./assets/beats/cross.png);
		z-index: 1;
	}
}

.event.group {
	width: calc(var(--column) * 28px);
	height: calc(var(--row) * 28px);
	margin: calc(var(--row) * (1 - var(--scale)) * -14px) calc(var(--column) * (1 - var(--scale)) * -14px);
	image-rendering: pixelated;
	transform: scale(var(--scale));

	&.center {
		display: table;
		margin: 0 auto;
	}

	&.transparent {
		background-image: none;

		&::before {
			background-image: none;
		}
	}

	&.inline {
		display: inline-block;
		vertical-align: -2px;
	}


	&>.event,
	>.beat {
		position: absolute;
		image-rendering: pixelated;
		cursor: pointer;
		filter: 
			hue-rotate(calc(var(--hue) * 1deg)) 
			brightness(calc(var(--brightness) * 1%)) 
			grayscale(calc(var(--grayscale) * 1%))
			opacity(calc(var(--opacity) * 1%));
		transition: transform 0.3s, opacity 0.3s, visibility 0.3s, filter 0.3s;

		&:hover {
			z-index: 1;

			&>.description {
				visibility: visible;
				opacity: 100%;
				transform: translate(-4px, -4px);
			}
		}

		&:active {
			filter: 
				hue-rotate(calc(var(--offset-hue) * 1deg)) 
				brightness(calc(var(--offset-brightness) * 1%)) 
				grayscale(calc(var(--offset-grayscale) * 1%))
				opacity(calc(var(--offset-opacity) * 1%));
		}

		&>.description {
			width: max-content;
			height: min-content;
			visibility: hidden;
			background-color: #2B2B2BEE;
			border-radius: 4px;
			border-color: #1B1B1B;
			border-width: 4px;
			border-style: solid;
			opacity: 0%;
			position: absolute;
			overflow: none;
			transition: width, height, opacity, 0.15s;
			z-index: 999;
			margin-top: calc(var(--event-height) * 28px);

			&>.line {
				height: 28px;
				margin: 7px 5px;
				font-size: 16px;
				min-width: 200px;
				font-weight: bold;
				display: grid;
				align-items: baseline;
				grid-template-columns: repeat(var(--box-count), 1fr);
				width: calc(var(--width) * 28px);

				&:has(.icon:last-child) {
					grid-template-columns: repeat(var(--box-count), 1fr) repeat(var(--icon-count), 32px);
				}

				&:has(.text:first-child) {
					grid-template-columns: 40% repeat(var(--box-count), 1fr);

					&:has(.icon:last-child) {
						grid-template-columns: 40% repeat(var(--box-count), 1fr) repeat(var(--icon-count), 32px);
					}
				}

				&.disable-grid {
					grid-template: none;
				}

				&>.text {
					color: white;
					transition: color, 0.15s;
					display: inline-block;
					line-height: 14px;
					font-weight: 800;
					text-shadow:
						2px 0 0 var(--stroke-color, black),
						2px 1px 0 var(--stroke-color, black),
						2px 2px 0 var(--stroke-color, black),
						1px 2px 0 var(--stroke-color, black),
						0 2px 0 var(--stroke-color, black),
						-1px 2px 0 var(--stroke-color, black),
						-2px 2px 0 var(--stroke-color, black),
						-2px 1px 0 var(--stroke-color, black),
						-2px 0 0 var(--stroke-color, black),
						-2px -1px 0 var(--stroke-color, black),
						-2px -2px 0 var(--stroke-color, black),
						-1px -2px 0 var(--stroke-color, black),
						0 -2px 0 var(--stroke-color, black),
						1px -2px 0 var(--stroke-color, black),
						2px -2px 0 var(--stroke-color, black),
						2px -1px 0 var(--stroke-color, black);

					&.f-gray {
						color: #808080;
					}
				}

				&>.icon {
					&.file {
						width: 24px;
						height: 22px;
						background-image: url(./assets/contents/file.png);
					}

					&.wrench {
						width: 26px;
						height: 26px;
						background-image: url(./assets/contents/wrench.png);
					}
				}

				&>.scroll {
					width: 100%;
					height: 7px;
					background-color: #B2B2B2;
					border-radius: 4px;
					padding-right: 0%;

					&>.point {
						content: '';
						position: relative;
						width: 16px;
						height: 16px;
						border-radius: 40%;
						background-color: #D2D2D2;
						box-shadow: 2px 2px 0 var(--stroke-color, #0008);
						transform: translate(calc(var(--scroll) / 100 * -16px), -4px);
						left: calc(var(--scroll) * 1%);
					}
				}

				&>.box {
					display: inline-block;
					background-color: #FFFFFF;
					border-radius: 4px;
					text-align: right;
					margin: 5px;
					padding: 0 5px;
					transition: background-color 0.2s;

					&::before {
						content: var(--tips);
						display: block;
						text-align: left;
						height: 0;
						color: #B2B2B2;
					}

					&.middle {
						text-align: center;
					}

					&.button {
						color: white;
						background-color: #C9C9C9;
						font-weight: 800;
						text-shadow:
							2px 0 0 var(--stroke-color, black),
							2px 1px 0 var(--stroke-color, black),
							2px 2px 0 var(--stroke-color, black),
							1px 2px 0 var(--stroke-color, black),
							0 2px 0 var(--stroke-color, black),
							-1px 2px 0 var(--stroke-color, black),
							-2px 2px 0 var(--stroke-color, black),
							-2px 1px 0 var(--stroke-color, black),
							-2px 0 0 var(--stroke-color, black),
							-2px -1px 0 var(--stroke-color, black),
							-2px -2px 0 var(--stroke-color, black),
							-1px -2px 0 var(--stroke-color, black),
							0 -2px 0 var(--stroke-color, black),
							1px -2px 0 var(--stroke-color, black),
							2px -2px 0 var(--stroke-color, black),
							2px -1px 0 var(--stroke-color, black);

						&:not(.active):hover {
							background-color: #F5F5F5;
						}

						&.b-gray {
							background-color: #636363;
						}
					}

					&.input {
						box-shadow: inset 3px 2px #D1D1D1;
						color: #323232;
						overflow: hidden;

						&.foreground-gray {
							color: #9C9C9C;
						}

						&.b-black {
							box-shadow: inset 3px 2px #191919;
							background-color: #1F1F1F;
							color: white;
						}

						&.f-gray {
							color: #808080;
						}
					}

					&.select {
						text-align: left;
						background-color: #EEEEEE;
						color: #323232;
						overflow: hidden;

						&::after {
							content: '';
							display: block;
							background-image: url(./assets/contents/list.png);
							float: right;
							margin-top: 9px;
							width: 14px;
							height: 10px;
						}

						&>.list {
							width: 250px;
							height: 140px;
							max-height: 200px;
							overflow: scroll;
							visibility: hidden;
							padding: 0px 4px;
							background-color: #EEEEEE;
							border-radius: 4px;
							opacity: 0%;
							position: absolute;
							overflow: scroll;
							display: grid;
							grid-template-rows: repeat(5, 20%);
							transition: opacity 0.3s, visibility 0.3s;
							z-index: 999;

							&>p {
								margin: 2px 0px;
								padding: 0px 20px;
								border-radius: 4px;

								&.selected::before {
									content: '';
									position: absolute;
									background-image: url(./assets/contents/selected.png);
									width: 14px;
									height: 14px;
									transform: translate(-20px, 6px);
								}
							}
						}

						&:hover {
							background-color: #BBBBBB;

							&>.list {
								visibility: visible;
								opacity: 100%;

								&>p {
									&:hover {
										background-color: #82EAF3;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	&>.event {
		width: calc(var(--event-width) * 28px);
		height: calc(var(--event-height) * 28px);
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-size: auto calc(28px * 8);
		background-position: calc(var(--event-x) * -28px) calc((var(--event-y) + 4) * -28px);
		transition: transform 0.3s, opacity 0.3s, visibility 0.3s, filter 0.3s, outline-color 0.3s;

		&:active {
			transform: translate(calc((var(--beat) + var(--offset-beat)) * 28px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-position: calc(var(--event-x) * -28px) calc(var(--event-y) * -28px);
		}

		&.sounds {
			background-image: var(--img, url(./assets/events/sounds.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #D12433;
				}

				&>.box.button.active {
					background-color: #D92433;
				}
			}
		}

		&.rooms {
			background-image: var(--img, url(./assets/events/rooms.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #D0B110;
				}

				&>.box.button.active {
					background-color: #D8B811;
				}
			}
		}

		&.decorations {
			background-image: var(--img, url(./assets/events/decorations.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #00BC56;
				}

				&>.box.button.active {
					background-color: #00C459;
				}
			}
		}

		&.actions {
			background-image: var(--img, url(./assets/events/actions.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #BA40A9;
				}

				&>.box.button.active {
					background-color: #C544B3;
				}
			}
		}

		&.rows {
			background-image: var(--img, url(./assets/events/rows.png));

			&>.description>.line {

				&>.text.hoverable:hover,
				>*>.highlight {
					color: #2C4EDB;
				}

				>.box.button {
					text-shadow:
						2px 0 0 var(--stroke-color, #2D2D2D),
						2px 1px 0 var(--stroke-color, #2D2D2D),
						2px 2px 0 var(--stroke-color, #2D2D2D),
						1px 2px 0 var(--stroke-color, #2D2D2D),
						0 2px 0 var(--stroke-color, #2D2D2D),
						-1px 2px 0 var(--stroke-color, #2D2D2D),
						-2px 2px 0 var(--stroke-color, #2D2D2D),
						-2px 1px 0 var(--stroke-color, #2D2D2D),
						-2px 0 0 var(--stroke-color, #2D2D2D),
						-2px -1px 0 var(--stroke-color, #2D2D2D),
						-2px -2px 0 var(--stroke-color, #2D2D2D),
						-1px -2px 0 var(--stroke-color, #2D2D2D),
						0 -2px 0 var(--stroke-color, #2D2D2D),
						1px -2px 0 var(--stroke-color, #2D2D2D),
						2px -2px 0 var(--stroke-color, #2D2D2D),
						2px -1px 0 var(--stroke-color, #2D2D2D);

					&.active {
						background-color: #1C53D4;
					}
				}
			}
		}

		&.custom {
			background-image: var(--img, url(./assets/events/custom.png));
		}

		&:not(.group){			
			pointer-events: auto;
		}

		&.group {
			width: calc(var(--group-width) * 28px);
			height: calc(var(--group-height) * 28px);
			transform: translate(calc((var(--group-beat) - (var(--scale) - 1) * var(--column) / 2) * 28px),
					calc((var(--group-y) - (var(--scale) - 1) * var(--row) / 2) * 28px));
			outline-style: solid;
			outline-color: var(--group-outline, red);
			outline-width: 2px;
			filter: 
				hue-rotate(calc(var(--group-hue) * 1deg)) 
				brightness(calc(var(--group-brightness) * 1%)) 
				grayscale(calc(var(--group-grayscale) * 1%))
				opacity(calc(var(--group-opacity) * 1%));

			&>.description {
				margin-top: calc(var(--group-height) * 28px);
			}


			&:active {
				transform: translate(calc((var(--group-beat) + var(--group-offset-beat) - (var(--scale) - 1) * var(--column) / 2) * 28px),
						calc((var(--group-y) + var(--group-offset-y) - (var(--scale) - 1) * var(--row) / 2) * 28px));
				outline-color: var(--group-offset-outline, red);
				filter: 
					hue-rotate(calc(var(--group-offset-hue) * 1deg)) 
					brightness(calc(var(--group-offset-brightness) * 1%)) 
					grayscale(calc(var(--group-offset-grayscale) * 1%))
					opacity(calc(var(--group-offset-opacity) * 1%));
				
			}
		}

		&>*.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-true.png);
		}

		&>*.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-false.png);
		}

		&>*.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-both.png);
		}

		&>*.tag {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(0, calc(var(--event-height) *28px - 12px));
			background-image: url(./assets/tag.png);
		}
	}

	&>.beat {
		position: absolute;
		&>.description>.line {

			&>.text.hoverable:hover,
			>*>.highlight {
				color: #2C4EDB;
			}

			>.box.button {
				text-shadow:
					2px 0 0 var(--stroke-color, #2D2D2D),
					2px 1px 0 var(--stroke-color, #2D2D2D),
					2px 2px 0 var(--stroke-color, #2D2D2D),
					1px 2px 0 var(--stroke-color, #2D2D2D),
					0 2px 0 var(--stroke-color, #2D2D2D),
					-1px 2px 0 var(--stroke-color, #2D2D2D),
					-2px 2px 0 var(--stroke-color, #2D2D2D),
					-2px 1px 0 var(--stroke-color, #2D2D2D),
					-2px 0 0 var(--stroke-color, #2D2D2D),
					-2px -1px 0 var(--stroke-color, #2D2D2D),
					-2px -2px 0 var(--stroke-color, #2D2D2D),
					-1px -2px 0 var(--stroke-color, #2D2D2D),
					0 -2px 0 var(--stroke-color, #2D2D2D),
					1px -2px 0 var(--stroke-color, #2D2D2D),
					2px -2px 0 var(--stroke-color, #2D2D2D),
					2px -1px 0 var(--stroke-color, #2D2D2D);

				&.active {
					background-color: #1C53D4;
				}
			}
		}
	}

	&>.beat:has(.pulse.freetime) {
		width: 14px;
		height: 24px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/rows.png);
		background-position: calc((var(--pulse) - 1) * -14px) calc(2 * 28px);

		&:active>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 16) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-narrow-hover-area.png);
			transform: translate(14px, 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 24px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 16) * 1px), 0);
				background-image: url(./assets/beats/hold-narrow-hover-right.png);
			}
		}

		&>.pulse::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 24px;
			background-image: url(./assets/beats/hit-narrow.png);
			transform: translate(-4px, 0);
			opacity: calc(clamp(0, var(--pulse) - 6, 1) * clamp(0, 8 - var(--pulse), 1) * 100%);
		}

		&:active {
			transform: translate(calc((var(--beat) + var(--offset-beat)) * 28px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-position: calc((var(--pulse) - 1) * -14px) calc(6 * 28px);
		}
	}

	&>.beat:has(.add.freetime) {
		width: 14px;
		height: 28px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/rows.png);
		background-position: calc((var(--pulse) - 1) * -14px) calc(3 * 28px);

		&:active>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 16) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-hover-area.png);
			transform: translate(14px, 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 16) * 1px), 0);
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}

		&>.add::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 28px;
			background-image: url(./assets/beats/hit.png);
			transform: translate(-4px, 0);
			opacity: calc(clamp(0, var(--pulse) - 6, 1) * clamp(0, 8 - var(--pulse), 1) * 100%);
		}

		&:active {
			transform: translate(calc(var(--beat) * 28px), calc((var(--y) * 28 + 2) * 1px));
			background-position: calc((var(--pulse) - 1) * -14px) calc(7 * 28px);
		}

		&>.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-true.png);
			z-index: 1;
		}

		&>.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-false.png);
			z-index: 1;
		}

		&>.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			background-image: url(./assets/condition-both.png);
			z-index: 1;
		}
	}

	&>.beat:has(.wave) {
		width: 28px;
		height: 28px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/events/rows.png);
		background-position: calc(1 * -28px) calc(4 * 28px);

		&:active {
			position: absolute;
			background-position: calc(1 * -28px) 0;
			transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px + 2px));
			z-index: -2;
		}
	}

	&>.beat:not(:has(.freetime)):not(:has(.row-xs)):not(:has(.wave)) {
		width: calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 4) * 1px);
		height: 28px;
		transform: translate(calc((var(--beat) * 28 + 4) * 1px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/beat-middle.png);
		background-size: auto 28px;

		&::before {
			content: '';
			position: absolute;
			background-image: url(./assets/beats/beat-left.png);
			background-size: auto 28px;
			transform: translate(-4px, 0);
			width: 4px;
			height: inherit;
		}

		&::after {
			content: '';
			position: absolute;
			background-image: url(./assets/beats/beat-right.png);
			background-size: auto 28px;
			transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 8) * 1px), 0);
			width: 10px;
			height: inherit;
		}

		&>.condition-true {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-true.png);
			z-index: 1;
		}

		&>.condition-false {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-false.png);
			z-index: 1;
		}

		&>.condition-both {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, 0);
			background-image: url(./assets/condition-both.png);
			z-index: 1;
		}

		&>.tag {
			position: absolute;
			width: 12px;
			height: 12px;
			transform: translate(-4px, calc((var(--event-height)* 28 - 12) * 1px));
			background-image: url(./assets/tag.png);
			z-index: 1;
		}

		&>.loop{
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop)), auto);
			width: calc(var(--loop) * var(--interval) * 28px);
			height: inherit;
			transform: translate(calc(var(--tick) * 28px - 8px), 0);
			&>div{
				width: 10px;
				height: inherit;
				background-image: url(./assets/beats/hit.png);
				&::after{
					content: '';
					position: absolute;
					width: 6px;
					height: 28px;
					background-size: auto 100%;
					transform: translate(calc((var(--interval) - var(--tick)) * 28px + 2px), 0);
					background-image: url(./assets/beats/pulse.png);
					opacity: 0%;
				}
			}
		}

		&:hover {
			&::before {
				transform: translate(-6px, 0);
				width: 6px;
				background-image: url(./assets/beats/beat-pulse-start.png);
			}

			&>.loop{
				&>div::after{
					opacity: 100%;
				}
			}

			&>div.subdivisions>div.subdivision>div::before {
				opacity: 100%;
			}

			&>div.burnshot {
				transform: translate(calc((var(--tick) * 28 - 13) * 1px), -8px);
				width: 18px;
				height: 36px;
				background-image: url(./assets/beats/burnshot-hover-right.png);

				&::before {
					transform: translate(calc(((var(--tick) + var(--interval)) * -28 + 7) * 1px), 19px);
				}

				&::after {
					transform: translate(calc(((var(--interval)) * -28 + 7) * 1px), 19px);
				}
			}

			&>div.classicbeat>div {
				opacity: 100%;
			}

			&:not(:has(.classicbeat)) {
				&::after {
					transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay)) * 28 - 13) * 1px), -8px);
					width: 18px;
					height: 36px;
					background-size: auto 100%;
					z-index: 1;
					background-image: url(./assets/beats/oneshot-hover-right.png);
				}
			}
		}

		&:active {
			transform: translate(calc(((var(--beat) + var(--offset-beat)) * 28 + 4) * 1px), calc(((var(--y) + var(--offset-y)) * 28 + 2) * 1px));
			background-image: url(./assets/beats/beat-hover-middle.png);

			&::before {
				background-image: url(./assets/beats/beat-hover-pulse-start.png);
			}
		}

		&>div.burnshots {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div {
				background-image: url(./assets/beats/burnshot-right.png);
				transform: translate(calc((var(--tick) * 28 - 6) * 1px), 0);
				width: 14px;
				height: inherit;

				&::before {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--tick) + var(--interval)) * -28 + 4) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 2;
				}

				&::after {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval)) * -28 + 4) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 2;
				}
			}
		}

		&>div.freezeshots {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div{					
				background-image: url(./assets/beats/freeze-hit.png);
				transform: translate(calc((var(--tick) * 28 - 4) * 1px), 0);
				width: 10px;
				background-size: 100%;
				height: inherit;

				&::before {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval)) * -28 + 2) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 4;
				}

				&::after {
					content: '';
					position: absolute;
					width: 6px;
					height: 6px;
					background-size: auto 100%;
					transform: translate(calc(((var(--interval) - var(--delay)) * -28 + 2) * 1px), 11px);
					background-image: url(./assets/beats/cross.png);
					z-index: 4;
				}
			}
		}

		&>div.skipshot {
			position: absolute;
			width: calc(((var(--interval, var(--tick) * 2) - var(--delay) - (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/skip-area.png);
			transform: translate(calc(((var(--tick) + var(--loop) * var(--interval) + var(--delay) + (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 10px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc(((var(--interval, var(--tick) * 2) - var(--delay) - (var(--tick) * ((var(--subdivision) - 1) / var(--subdivision)))) * 28 - 6) * 1px), 0);
				background-image: url(./assets/beats/skip-right.png);
			}
		}

		&>div.subdivisions {
			position: absolute;
			display: grid;
			grid-template-columns: repeat(calc(var(--loop) + 1), auto);
			transform: translate(-4px, 0);
			width: calc((((var(--loop) + 1) * var(--interval)) * 28) * 1px);
			height: 28px;
			&>div.subdivision{
				display: grid;
				grid-template-columns: repeat(calc(var(--subdivision)), calc(var(--interval) / var(--subdivision) / 2 * 28px));
				width: calc(((var(--tick)) * 28 + 1) * 1px);
				height: inherit;
				background-size: auto 100%;
				transform: translate(calc(((var(--tick) + var(--delay)) * 28) * 1px), 0);
				&>div {
					background-image: url(./assets/beats/hit.png);
					width: 10px;
					background-size: auto 100%;
					transform: translate(calc((0 * 28 - 4) * 1px), 0);
					z-index: 1;
					&::before {
						content: '';
						position: absolute;
						width: 6px;
						height: 28px;
						background-size: auto 100%;
						opacity: 0%;
						transform: translate(calc(((var(--tick) + var(--delay)) * -28 + 2) * 1px), 0);
						background-image: url(./assets/beats/pulse.png);
						z-index: 0;
					}
				}
			}
			&::after{
				content: '';
				position: absolute;
				width: calc(((var(--interval) / 2) * (var(--subdivision) - 1) / var(--subdivision) * 28 + 1) * 1px);
				height: inherit;
				background-image: url(./assets/beats/subdivision-area.png);
				transform: translate(calc(((var(--interval) * var(--loop) + var(--tick) + var(--delay)) * 28) * 1px), 0);
				z-index: -1;				
			}
		}

		&>div.classicbeat {
			display: grid;
			grid-template-columns: repeat(6, calc((var(--tick) / 3 - var(--swing, var(--tick) / 6)) * 28px) calc((var(--swing, var(--tick) / 6)) * 28px));
			position: absolute;
			width: calc(var(--tick) * 28px);
			height: inherit;

			&>div {
				width: 6px;
				height: inherit;
				transform: translate(-6px, 0);
				background-size: auto 100%;
				opacity: 0%;
				background-image: url(./assets/beats/pulse.png);
				z-index: 1;
			}
		}

	}

	&>.beat:has(.classicbeat) {
		&>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 2) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-area.png);
			transform: translate(calc(((var(--tick) + var(--delay)) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 2) * 1px), 0);
				background-image: url(./assets/beats/hold-right.png);
			}
		}

		&:active>div.holdbeat {
			background-image: url(./assets/beats/hold-hover-area.png);

			&::after {
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}
	}

	&>.beat:not(:has(.classicbeat)) {
		&>div.holdbeat {
			position: absolute;
			width: calc((var(--hold) * 28 - 2) * 1px);
			height: inherit;
			background-size: auto 100%;
			background-image: url(./assets/beats/hold-area.png);
			transform: translate(calc(((var(--tick) + var(--delay) + var(--loop) * var(--interval)) * 28 - 4) * 1px), 0);
			z-index: -2;

			&::after {
				content: '';
				position: absolute;
				width: 2px;
				height: 28px;
				background-size: auto 100%;
				transform: translate(calc((var(--hold) * 28 - 2) * 1px), 0);
				background-image: url(./assets/beats/hold-right.png);
			}
		}

		&:active>div.holdbeat {
			background-image: url(./assets/beats/hold-hover-area.png);

			&::after {
				background-image: url(./assets/beats/hold-hover-right.png);
			}
		}
	}

	&>.beat:has(.row-xs) {
		width: 56px;
		height: 28px;
		transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px));
		background-image: url(./assets/events/rows.png);
		background-position: -56px calc(4 * -28px);

		&:active {
			background-position: -56px 0;
			transform: translate(calc(var(--beat) * 28px), calc(var(--y) * 28px + 2px));
		}

		&>.row-xs {
			display: grid;
			grid-template-columns: repeat(6, 9px);
			transform: translate(2px, 11px);
			width: inherit;
			height: inherit;

			&>.x {
				width: 7px;
				height: 7px;
				background-image: url(./assets/beats/row-x.png);
			}
		}
	}

	&>.pulse {
		width: 6px;
		height: 28px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 2px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/pulse.png);
		z-index: 1;
	}

	&>.hit {
		width: 10px;
		height: 28px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 4px), calc(var(--y) * 28px));
		background-image: url(./assets/beats/hit.png);
		z-index: 1;
	}

	&>.cross {
		width: 6px;
		height: 6px;
		position: absolute;
		transform: translate(calc(var(--beat) * 28px - 2px), calc(var(--y) * 28px + 11px));
		background-image: url(./assets/beats/cross.png);
		z-index: 1;
	}
}