.vo-bubble-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin: -4px 0 -4px 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--color-muted-foreground);
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.vo-bubble-btn--inline:lang(ja) {
	translate: 0 -0.125em;
}
.vo-bubble-btn:hover,
.vo-bubble-btn[aria-expanded="true"] {
	background-color: var(--color-surface-3);
	color: var(--color-sub);
}
.vo-bubble-btn:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 1px;
}
.vo-bubble-btn__icon {
	display: block;
	width: 14px;
	height: 14px;
}
.vo-bubble-src {
	display: none;
}
.vo-bubble {
	--vo-bubble-bg: #34324C;
	--vo-bubble-x: 50%;
	--vo-bubble-shift: 6px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: max-content;
	max-width: min(320px, calc(100vw - 24px));
	padding: var(--space-12) var(--space-16);
	border-radius: 12px;
	background-color: var(--vo-bubble-bg);
	box-shadow: 0 20px 40px -16px rgba(5, 4, 12, 0.75);
	color: var(--color-foreground);
	font-size: var(--font-size-2xs);
	line-height: 1.75;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transform: translateY(var(--vo-bubble-shift)) scale(0.96);
	transform-origin: var(--vo-bubble-x) calc(100% + 8px);
	transition: opacity 160ms var(--ease-out), transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.vo-bubble[hidden] {
	display: none;
}
.vo-bubble[data-side="bottom"] {
	--vo-bubble-shift: -6px;
	transform-origin: var(--vo-bubble-x) -8px;
}
.vo-bubble.is-on {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.vo-bubble__caret {
	position: absolute;
	top: 100%;
	left: var(--vo-bubble-x);
	width: 16px;
	height: 8px;
	margin-left: -8px;
	background-color: var(--vo-bubble-bg);
	clip-path: path("M0 0 H16 L9.4 7.2 Q8 8.6 6.6 7.2 Z");
}
.vo-bubble[data-side="bottom"] .vo-bubble__caret {
	top: auto;
	bottom: 100%;
	clip-path: path("M0 8 H16 L9.4 0.8 Q8 -0.6 6.6 0.8 Z");
}
.vo-bubble__title {
	display: block;
	margin-bottom: var(--space-6);
	color: var(--color-foreground);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.vo-bubble__text {
	display: block;
	color: #C3BFD2;
}
.vo-bubble__text + .vo-bubble__text {
	margin-top: var(--space-8);
}
.vo-bubble__lead {
	display: block;
	margin-top: var(--space-10);
	color: var(--color-foreground);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
}
.vo-bubble__list {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding: var(--space-8) var(--space-10);
	border-radius: 8px;
	background-color: rgba(10, 9, 18, 0.28);
}
.vo-bubble__item {
	position: relative;
	display: block;
	padding-left: 14px;
	color: #C3BFD2;
	line-height: 1.6;
}
.vo-bubble__item::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0;
	width: 6px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--color-sub);
}
.vo-bubble__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-10);
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}
.vo-bubble__link:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
	border-radius: 4px;
}
.vo-bubble__link-icon {
	display: block;
	flex: none;
	transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
	.vo-bubble__link:hover .vo-bubble__link-icon {
		transform: translateX(3px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.vo-bubble {
		transform: none;
		transition: opacity 120ms linear;
	}
}