#hdrum-vidget {
	max-width: 1000px;
	margin: auto;
	position: relative;
	text-align: center;
}
#hdrum-vidget.hd-loading *{
	pointer-events: none;
}
#hdrum-vidget svg{
	display: block;
}

dl.hd-notes {
	display: flex;
	justify-content: space-between;
	position: relative;
	padding-bottom: 30px;
	margin: 1em 0;
	flex-grow: 0.5;
}
.hd-notes div {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: 1.9em;
	height: 3.7em;
	border-radius: 3em;
	padding: 0.56em 0 .34em;
	transition: 0.9s box-shadow;
	cursor: pointer;
	color: #1D1D1D;
	font-weight: 600;
}
.hd-notes>div:first-child {
	/* margin-left: -0.3em; */
}
.hd-notes>div:last-child {
	margin-right: 0em;
}
.hd-notes div.hover, .hd-notes div.active {
	box-shadow: 0 0 0 2px var(--color);
}
.hd-notes div.active {
	transition: .1s;
}
.hd-notes dd {
	/* font-weight: bold; */
	margin: 0;
	height: 1.2em;
}
.hd-notes [data-petal="0"] dd {
	font-weight: normal;
	/* font-variant: small-caps; */
	height: 1.4em;
}
.hd-notes dt {
	/* font-variant: all-small-caps; */
	font-size: 0.8em;
	opacity: .5;
	/* line-height: 1.6; */
}
@media screen and (min-width: 1000px) {

	.hd-notes>div {
		font-size: 115%;
		margin: -0.1em 0 -0.2em;
		height: 3.4em;
	}
}
@media screen and (max-width: 850px) {

	.hd-notes [data-petal="0"] {
		display: none;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 1;
		border: 1px solid;
	}
	.hd-notes [data-petal="0"] dd {
		color: inherit;
		font-size: .95em;
	}
	.hd-notes [data-petal="1"] {
		margin-left: -0.4em;
	}
}

.hd-controls, .hd-player, .hd-controls button, .hd-timeline {
	display: flex;
	--color: #70A8A9;
	--color2: #70A8A997;
	color: var(--color);
	justify-content: center;
	border-radius: 50px;
	align-items: center;
	user-select: none;
}

.hd-main {
	display: flex;
	margin: auto;
	margin-bottom: 2.7rem;
	align-items: center;
	max-width: 630px;
}
.hd-drum {
	font-size: min(1.1vh, .96vw, 4.3px);
	position: relative;
	max-width: 100em;
	/* height: 100em; */
	margin: auto;
	box-shadow: 4.2em 3em 9em -2em #0006, #fff 4px 1px 0 -2.6px inset, #000a inset -0.4px -0.2px 1px -0.2px, 0 0 3em #0001 inset;
	background: currentcolor url(images/pantam-400.webp) 100% 85%/100.25% 100.5%;
	background-image: image-set(
		url(images/pantam-400.avif) 1x type("image/avif"),
		url(images/pantam-400.webp) 1x,
		url(images/pantam-800.avif) 2x type("image/avif"),
		url(images/pantam-800.webp) 2x
	);
	border-radius:50%;
	/* overflow: hidden; */
	pointer-events: none;
	perspective: 250em;
}
@media screen and (max-width: 600px) {
	.hd-main {
		justify-content: space-evenly;
		align-items: flex-start;
		flex-grow: 0.35;
		width: 100%;
	}
	.hd-drum {
		margin: 0 -53px 0;
	}
	.hd-main>button {
		margin-top: -15px;
	}
	#hdrum-vidget {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    /* min-height: 83vh; */
	    width: 100%;
	    flex-grow: 1.4;
	}
}

.hd-drum svg{
	height: 100%;
	width: 100%;
	/* mix-blend-mode: luminosity; */
	/* clip-path: circle(46%); */
}
.hd-drum span svg{
	position: absolute;
	left: 0;
	top:0;
	mix-blend-mode: normal;
	/* filter: contrast(0.5); */
}

.hd-drum rect {
	fill: transparent;
	touch-action: none;
	/* cursor: pointer; */
	stroke: #0000;
	stroke-width: 30px;
	pointer-events: fill;
}
.hd-drum path {
	stroke: #000;
	stroke-width: 1.6px;
	fill: none;
}
path.hd-white {
	stroke: #fff;
	opacity: 0.5;
	transform: translate(0.5px, 0.2px);
	/* display: none; */
	stroke-width: 3.1px;
}
.hd-drum2 path {
	filter: url(./#hd-glow);
	stroke: #fffffd;
	stroke-width: 0.8px;
}
.hd-drum [data-petal] {
	transition: 1.4s opacity cubic-bezier(0.11, 0.01, 0.12, 0.88);
	will-change: opacity;
}
.hd-loading .hd-drum .hd-drum1 [data-petal] {
	opacity: 0.3;
}
.hd-drum [data-petal].hover {
	transition-duration: .7s
}
.hd-drum [data-petal].active {
	transition-duration: .1s
}
.hd-drum2 [data-petal] {
	opacity: 0.005;
}
[data-petal].hd-anim {
	pointer-events: none;
	--dur: 1.5s;
	animation: var(--dur) loading linear infinite;
	animation-delay: calc(var(--dur)*var(--delay));
}
@keyframes loading {
	0% {animation-timing-function: cubic-bezier(0.5, 0.1, 0.4, 1);}
	20% {opacity: 1;animation-timing-function: cubic-bezier(0.3, 0, 0, 0.7);}
	50% {opacity: 0.5;animation-timing-function: cubic-bezier(0, 0, 0.5, 1);}
}

.hd-drum1 span.hover, .hd-drum1 span.active {
	opacity: 0;
}
.hd-drum2 [data-petal].hover {
	opacity: 0.8;
}
.hd-drum2 [data-petal].active {
	opacity: 1;
}

.hd-controls button {
	padding: 0;
	font: inherit;
	background: transparent;
	cursor: pointer;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	border: 1px solid;
}
.hd-controls button svg {
	margin: -1px;
}
.hd-player, .hd-list, .hd-controls>button {
	border: 1px solid;
	transition: .5s;
	/* display: initial; */
}
.hd-gamma, .hd-play {
	border: none !important;
}
.hd-controls>button:not(.hd-tuk):not(.clicked):hover,
.-hd-player:hover,
.hd-rec.hd-active, 
.hd-list:hover, 
.hd-tuk.hover,
.hd-gamma.active {
	box-shadow: 3px 2px 18px 1px;
}
.hd-controls>button:not(.hd-tuk):active,
.-hd-player:active, 
.hd-list:active, 
.hd-tuk.active {

	box-shadow: 0 0 0 1px, 3px 2px 16px -1px;
	transition: .2s cubic-bezier(0.35, 0.71, 0.11, 1);
}
.hd-player {
	overflow: hidden;
	white-space: nowrap;
	transition: .4s;
	width: 400px;
	margin: 0 1em;
	/* padding-right: 16px; */
}
.hd-bottom>*:not(.hd-visible) {
	width: 0;
	opacity: 0;
	margin: 0;
}
.hd-player .hd-timeline {
	width: 100%;
	margin: 0 17px 0 -2px;
	position: relative;
	--progress: 0%;
	--thumb: 12px;
	align-items: center;
	/* background: radial-gradient(closest-side, currentColor, currentColor calc(100% - 0.5px), transparent) var(--progress) center / var(--thumb) var(--thumb) no-repeat; */
}
.hd-timeline::before, .hd-timeline::after{
	content: '';
	position: absolute;
	pointer-events: none;
	border-radius: 10px;
}
.hd-timeline::before {
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, currentColor, currentColor var(--progress), var(--color2) var(--progress), var(--color2));
}
.hd-timeline::after {
	width: var(--thumb);
	height: var(--thumb);
	left: var(--progress);
	background: currentColor;
	transform: scale(-1) translateX(var(--progress));
}
.hd-player [type="range"] {
	width: 100%;
	margin: 0;
	opacity: 0;
}
button.hd-tuk {
	width: 49px;
	height: 49px;
	align-items: center;
	padding-bottom: 6px;
	font-size: 21px;
}

.hd-rec-play svg>* {
	transition: .3s;
}
.hd-rec-play:not(.hd-active) svg>rect {
	opacity: 0;
}
.hd-rec-play.hd-active svg>g {
	opacity: 0;
}
.hd-rec.hd-active {
	/* animation: recording .9s alternate infinite ease-in-out; */
	color: #F37B7B;
}
@keyframes recording {
	100% {color: #F37B7B}
}

.hd-tag {
	position: absolute;
	left: 48.7%;
	top: 43.1%;
	font-size: 308%;
	color: #000c;
	/* opacity: 0.9; */
	font-weight: 300;
	transform: rotate(var(--rot)) translateY(7.6em) rotateX(-15deg) rotate(calc(-1*var(--rot)));
	/* filter: url(./#dilate); */
	text-shadow: 0 0;
}
.g {
	top: 36.7%;
	left: 48.3%;
}
.hd-tag-n {
	position: absolute;
	left: 49%;
	top: 48.2%;
	font-size: 273%;
	color: #fff;
	font-weight: 300;
	transform: rotate(var(--rot)) scaleY(1.1) translateY(13.9em) rotateX(-20deg) rotate(calc(-1*var(--rot)));
	/* mix-blend-mode: screen; */
}
.hd-n1 {
    top: 15em;
}
.hd-n2 {--rot: 0deg;}
.hd-n3 {--rot: 30.8deg;}
.hd-n4 {--rot: 60.8deg;}
.hd-n5 {--rot: 89.9deg;}
.hd-n6 {--rot: 117.7deg;}
.hd-n7 {--rot: 143deg;}
.hd-n8 {--rot: 167deg;}
.hd-n9 {--rot: 192deg;}
.hd-n10 {--rot: 216deg;}
.hd-n11 {--rot: 242deg;}
.hd-n12 {--rot: 271deg;}
.hd-n13 {--rot: 299deg;}
.hd-n14 {--rot: 329deg;}
.hd-n15 {top: 11.9em;left: 17.6em;}