#dtc-demo-audio { display: none; }
/* One row stays within the invitation frame, with music at its right edge. */
body .iv-demobar:has(> .dtc-demo-music) {
	top: auto;
	bottom: calc(20px + env(safe-area-inset-bottom));
	width: 100%;
	max-width: var(--dtc-demo-frame-width, 500px);
	box-sizing: border-box;
	padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
	align-items: center;
	justify-content: flex-start;
	pointer-events: none;
}
body .iv-demobar:has(> .dtc-demo-music) a {
	pointer-events: auto;
	flex-shrink: 0;
	white-space: nowrap;
}
body .iv-demobar .iv-demobar__use {
	background: var(--dtc-demo-brand, #e8405a);
	color: var(--dtc-demo-brand-text, #fff);
}
body .iv-demobar .iv-demobar__use:hover {
	background: color-mix(in srgb, var(--dtc-demo-brand, #e8405a) 84%, #000);
}
/* This design has its own footer navigation below the demo row. */
body.skin-ch-10 .iv-demobar:has(> .dtc-demo-music) { bottom: calc(68px + env(safe-area-inset-bottom)); }
html.iv-locked body.skin-ch-10 .iv-demobar:has(> .dtc-demo-music) { bottom: calc(18px + env(safe-area-inset-bottom)); }
.dtc-demo-music {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin-left: auto;
	padding: 0;
	pointer-events: auto;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 999px;
	background: var(--c1, #963850);
	color: #fff;
	box-shadow: 0 3px 14px rgba(0,0,0,.2);
	font: 600 12px/1.2 system-ui, sans-serif;
	cursor: pointer;
}
.dtc-demo-music:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dtc-demo-music__bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.dtc-demo-music__bars i { width: 3px; height: 7px; background: currentColor; border-radius: 2px; }
.dtc-demo-music.is-playing .dtc-demo-music__bars i { animation: dtc-demo-bars .8s ease-in-out infinite alternate; }
.dtc-demo-music.is-playing .dtc-demo-music__bars i:nth-child(2) { animation-delay: -.3s; }
.dtc-demo-music.is-playing .dtc-demo-music__bars i:nth-child(3) { animation-delay: -.6s; }
.dtc-demo-music.is-playing .dtc-demo-music__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes dtc-demo-bars { to { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .dtc-demo-music.is-playing .dtc-demo-music__bars i { animation: none; height: 12px; } }