.vwf.vwf,
.vwf-modal.vwf-modal {
	--vwf-gutter: var(--space-20, 20px);
	--vwf-deck: #100f18;
	--vwf-gold: var(--color-primary, #d2a840);
	--vwf-gold-hi: var(--color-primary-hover, #e2bc5f);
	--vwf-ink: var(--color-primary-foreground, #17120a);
	--vwf-indigo: var(--color-sub, #7c86c4);
	--vwf-track: rgba(219, 216, 233, 0.1);
}

.vwf.vwf {
	position: relative;
	scroll-margin-top: 88px;
	background:
		radial-gradient(70% 150px at 0 0, rgba(124, 134, 196, 0.16), rgba(124, 134, 196, 0)),
		radial-gradient(45% 120px at 100% 0, rgba(210, 168, 64, 0.08), rgba(210, 168, 64, 0)),
		var(--color-surface-2, #232234);
	border-radius: 0;
	padding: 1.6em 0 1.4em;
	margin: 32px calc(-1 * var(--vwf-gutter));
	font-size: 15px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.vwf.vwf {
		--vwf-gutter: var(--space-32, 32px);
	}
}

.vwf__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 0;
	margin: 0 0 12px;
	padding-inline: var(--vwf-gutter);
}

.vwf__badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	background: rgba(210, 168, 64, 0.16);
	color: var(--vwf-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	padding: 0 11px;
	border-radius: 999px;
}

.vwf__tabs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(219, 216, 233, 0.06);
}

.vwf__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 0 12px 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-muted-foreground, #938ea7);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.vwf__tab-icon {
	width: 14px;
	height: 14px;
	flex: none;
}

.vwf__tab:hover {
	color: var(--color-foreground, #dbd8e9);
}

.vwf__tab[aria-selected="true"] {
	background: rgba(210, 168, 64, 0.16);
	color: var(--vwf-gold);
}

.vwf__tab:focus-visible,
.vwf__still-open:focus-visible {
	outline: 2px solid var(--vwf-gold);
	outline-offset: 2px;
}

.vwf__still {
	position: relative;
	background: var(--vwf-deck);
	line-height: 0;
}

.vwf__still-img.vwf__still-img.vwf__still-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	animation: vwf-say 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vwf__still-open.vwf__still-open {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--color-surface, #1c1b29);
	color: var(--color-muted-foreground, #938ea7);
	transition: background 0.15s ease, color 0.15s ease;
}

.vwf__still-open.vwf__still-open:hover {
	background: var(--color-surface-3, #2e2c43);
	color: var(--color-foreground, #dbd8e9);
}

.vwf.is-still .vwf__tools,
.vwf.is-still .vwf__frame,
.vwf.is-still .vwf__deck,
.vwf.is-still .vwf__tail,
.vwf.is-still .vwf__cue {
	display: none;
}

.vwf__cue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 12px 0 10px;
	border: 1px solid #7C86C480;
	border-radius: 999px;
	background: none;
	color: var(--color-sub-hover, #949dd3);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.vwf__cue svg {
	width: 12px;
	height: 12px;
}

.vwf__cue:hover {
	border-color: #7C86C4;
	color: var(--color-foreground, #dbd8e9);
}

.vwf__title.vwf__title.vwf__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-foreground, #dbd8e9);
	margin: 0 0 6px;
	padding-inline: var(--vwf-gutter);
}

.vwf__lead.vwf__lead.vwf__lead {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-muted-foreground, #938ea7);
	margin: 0 0 18px;
	padding-inline: var(--vwf-gutter);
}

.vwf__frame {
	position: relative;
	background: var(--vwf-deck);
}

.vwf__tail {
	height: 12px;
	border-top: 1px solid var(--color-card, #1c1b29);
	background: var(--vwf-deck);
}

.vwf__view {
	position: relative;
	overflow: hidden;
}

.vwf__view.is-active {
	touch-action: pan-y;
	cursor: grab;
}

.vwf__view.is-active.is-zoomed {
	touch-action: none;
}

.vwf__view.is-dragging {
	cursor: grabbing;
}

.vwf__stage {
	transform-origin: 0 0;
}

.vwf__stage.is-gliding {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vwf__deck {
	box-sizing: border-box;
	min-height: 115px;
	border-top: 1px solid var(--color-card, #1c1b29);
	background: linear-gradient(180deg, var(--vwf-deck) 0%, #161522 100%);
	padding: 10px var(--vwf-gutter) 12px;
}

.vwf__track {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 2px 0 4px;
}

.vwf__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--color-surface, #1c1b29);
	color: var(--color-foreground, #dbd8e9);
	line-height: 0;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.vwf__home svg {
	width: 14px;
	height: 14px;
}

.vwf__home:hover {
	background: var(--color-surface-3, #2e2c43);
}

.vwf__home:active {
	transform: scale(0.92);
}

.vwf__home:disabled {
	opacity: 0.3;
	background: transparent;
	cursor: default;
	transform: none;
}

.vwf__chapters {
	display: flex;
	flex: 1 1 auto;
	gap: 4px;
	min-width: 0;
}

.vwf__chapter {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.vwf__chapter-num {
	color: var(--vwf-chapter-ink, #5f5b78);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: start;
	transition: color 0.25s ease;
}

.vwf__chapter-bar {
	position: relative;
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--vwf-track);
	transition: height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.vwf__chapter-fill {
	position: absolute;
	inset: 0;
	background: var(--vwf-chapter-tone, var(--vwf-indigo));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.vwf__chapter.is-done {
	--vwf-chapter-ink: var(--color-sub-hover, #949dd3);
}

.vwf__chapter.is-done .vwf__chapter-fill,
.vwf__chapter.is-current .vwf__chapter-fill {
	transform: none;
}

.vwf__chapter.is-current {
	--vwf-chapter-ink: var(--vwf-gold);
	--vwf-chapter-tone: var(--vwf-gold);
}

.vwf__chapter.is-current .vwf__chapter-bar {
	height: 7px;
}

.vwf__track.is-playing .vwf__chapter.is-current .vwf__chapter-fill,
.vwf__track.is-held .vwf__chapter.is-current .vwf__chapter-fill {
	animation: vwf-chapter var(--vwf-delay, 3500ms) linear both;
}

.vwf__track.is-held .vwf__chapter.is-current .vwf__chapter-fill {
	animation-play-state: paused;
}

@keyframes vwf-chapter {
	from {
		transform: scaleX(0);
	}

	to {
		transform: none;
	}
}

@media (hover: hover) {
	.vwf__chapter:hover {
		--vwf-chapter-ink: var(--color-foreground, #dbd8e9);
	}

	.vwf__chapter.is-current:hover {
		--vwf-chapter-ink: var(--vwf-gold-hi);
	}

	.vwf__chapter:hover .vwf__chapter-bar {
		height: 7px;
	}
}

.vwf__chapter:focus-visible {
	outline: 2px solid var(--vwf-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

.vwf__home:focus-visible {
	outline: 2px solid var(--vwf-gold);
	outline-offset: 3px;
}

.vwf__row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
}

.vwf__transport {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	line-height: 0;
}

.vwf__say {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-foreground, #dbd8e9);
}

.vwf__say.is-in {
	animation: vwf-say 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vwf-say {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.vwf__say-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--vwf-indigo);
	color: var(--color-on-sub, #14131e);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vwf__say-text {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.vwf__say-flow {
	display: inline-block;
	will-change: transform;
}

.vwf__say-text.is-flowing {
	margin-inline-start: -10px;
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 24px), transparent 100%);
	mask: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 24px), transparent 100%);
}

.vwf__say-text.is-flowing .vwf__say-flow {
	padding-inline-start: 10px;
	animation: vwf-flow var(--vwf-run, 8s) linear var(--vwf-wait, 0.6s) infinite;
}

@keyframes vwf-flow {
	0%,
	14% {
		transform: none;
		opacity: 1;
	}

	82%,
	90% {
		transform: translateX(var(--vwf-shift, 0));
		opacity: 1;
	}

	95% {
		transform: translateX(var(--vwf-shift, 0));
		opacity: 0;
	}

	96% {
		transform: none;
		opacity: 0;
	}

	100% {
		transform: none;
		opacity: 1;
	}
}

.vwf__say.is-idle {
	color: var(--color-muted-foreground, #938ea7);
	font-weight: 400;
}

.vwf__say.is-idle .vwf__say-num {
	display: none;
}

.vwf__tool--voice {
	flex: none;
}

.vwf__tool--voice[hidden] {
	display: none;
}

.vwf__speed {
	position: relative;
	flex: none;
	line-height: 0;
}

.vwf__speed-btn {
	min-width: 44px;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: var(--color-surface, #1c1b29);
	color: var(--color-muted-foreground, #938ea7);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.vwf__speed-btn:hover,
.vwf__speed-btn[aria-expanded="true"] {
	background: var(--color-surface-3, #2e2c43);
	color: var(--color-foreground, #dbd8e9);
}

.vwf__speed-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 112px;
	padding: 6px;
	border-radius: 12px;
	background: var(--color-popover, #2e2c43);
	box-shadow: 0 12px 32px rgba(8, 7, 14, 0.55);
	animation: vwf-say 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vwf__speed-menu[hidden] {
	display: none;
}

.vwf__speed-item {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--color-foreground, #dbd8e9);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-align: start;
	cursor: pointer;
}

.vwf__speed-item:hover,
.vwf__speed-item:focus-visible {
	background: rgba(219, 216, 233, 0.08);
	outline: none;
}

.vwf__speed-mark {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--vwf-gold);
	visibility: hidden;
}

.vwf__speed-item[aria-checked="true"] {
	color: var(--vwf-gold);
}

.vwf__speed-item[aria-checked="true"] .vwf__speed-mark {
	visibility: visible;
}

.vwf__speed-btn:focus-visible {
	outline: 2px solid var(--vwf-gold);
	outline-offset: 2px;
}

.vwf__tools {
	--vwf-tool: 30px;
	box-sizing: border-box;
	min-height: 51px;
	border-bottom: 1px solid var(--color-card, #1c1b29);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px var(--vwf-gutter);
	background: var(--vwf-deck);
	line-height: 0;
}

.vwf__group {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: var(--color-surface, #1c1b29);
}

.vwf__tools > .vwf__group:nth-child(2) {
	margin-inline-start: auto;
}

.vwf__tools > .vwf__group:first-child:nth-last-child(2) {
	margin-inline-start: auto;
}

.vwf__zoom-read {
	min-width: 44px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--color-muted-foreground, #938ea7);
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease;
}

.vwf__zoom-read.is-on {
	color: var(--vwf-gold);
}

.vwf__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vwf-tool, 34px);
	height: var(--vwf-tool, 34px);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-muted-foreground, #938ea7);
	cursor: pointer;
	line-height: 0;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vwf__tool svg {
	width: var(--vwf-icon, 18px);
	height: var(--vwf-icon, 18px);
}

.vwf__tool:hover {
	background: rgba(219, 216, 233, 0.08);
	color: var(--color-foreground, #dbd8e9);
}

.vwf__tool:active {
	transform: scale(0.92);
}

.vwf__tool:disabled {
	opacity: 0.3;
	cursor: default;
	background: transparent;
	transform: none;
}

.vwf__tool.is-on {
	background: rgba(210, 168, 64, 0.16);
	color: var(--vwf-gold);
}

.vwf__tool:focus-visible,
.vwf__cue:focus-visible {
	outline: 2px solid var(--vwf-gold);
	outline-offset: 2px;
}

.vwf__tool--play {
	width: 38px;
	height: 38px;
	margin-inline-end: 4px;
	background: var(--vwf-gold);
	color: var(--vwf-ink);
	transition: background 0.15s ease, transform 0.15s ease;
}

.vwf__tool--play:hover {
	background: var(--vwf-gold-hi);
	color: var(--vwf-ink);
}

.vwf__tool--play.vwf__tool--play[aria-pressed="true"] {
	background: var(--vwf-gold);
	color: var(--vwf-ink);
}

.vwf__tool--play svg {
	width: 17px;
	height: 17px;
}

.vwf__legend.vwf__legend.vwf__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 16px 0 0;
	padding: 0 var(--vwf-gutter);
	list-style: none;
}

.vwf__legend-item.vwf__legend-item.vwf__legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-muted-foreground, #938ea7);
	margin: 0;
}

.vwf__key {
	width: 14px;
	height: 4px;
	border-radius: 999px;
	flex: none;
}

.vwf__cap.vwf__cap.vwf__cap {
	font-size: 14px;
	line-height: 1.85;
	color: var(--color-muted-foreground, #938ea7);
	margin: 14px 0 0;
	padding-inline: var(--vwf-gutter);
	text-align: start;
}

.vwf__sample.vwf__sample.vwf__sample {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-muted-foreground, #938ea7);
	margin: 14px 0 0;
	padding-inline: var(--vwf-gutter);
}

.vwf__stamp.vwf__stamp.vwf__stamp {
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: rgba(147, 142, 167, 0.5);
	margin: 14px 0 0;
	padding-inline: var(--vwf-gutter);
	text-align: end;
}

@media (max-width: 599px) {
	.vwf.vwf {
		padding: 16px 0 14px;
	}

	.vwf__head {
		margin-bottom: 10px;
	}

	.vwf__badge {
		min-height: 24px;
		padding: 0 10px;
		font-size: 11px;
	}

	.vwf__tab {
		min-height: 20px;
		padding: 0 10px 0 8px;
		font-size: 11px;
	}

	.vwf__cue {
		min-height: 24px;
		padding: 0 10px 0 8px;
		font-size: 11px;
	}

	.vwf__title.vwf__title.vwf__title {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.vwf__lead.vwf__lead.vwf__lead {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.vwf__tools {
		--vwf-tool: 28px;
		--vwf-icon: 16px;
	}

	.vwf__tools {
		min-height: 45px;
		gap: 4px;
		padding-block: 6px;
	}

	.vwf__zoom-read {
		min-width: 34px;
		font-size: 11px;
	}

	.vwf__deck {
		min-height: 116px;
		padding: 6px var(--vwf-gutter) 10px;
	}

	.vwf__track {
		gap: 10px;
		margin: 0 0 2px;
	}

	.vwf__home {
		width: 26px;
		height: 26px;
	}

	.vwf__home svg {
		width: 12px;
		height: 12px;
	}

	.vwf__chapters {
		gap: 3px;
	}

	.vwf__chapter {
		gap: 6px;
		height: 34px;
	}

	.vwf__row {
		--vwf-tool: 28px;
		--vwf-icon: 16px;
		flex-wrap: wrap;
		gap: 8px;
		min-height: 36px;
	}

	.vwf__transport {
		margin-inline-end: auto;
	}

	.vwf__tool--play {
		width: 34px;
		height: 34px;
	}

	.vwf__tool--play svg {
		width: 15px;
		height: 15px;
	}

	.vwf__speed-btn {
		min-width: 40px;
		height: 28px;
		padding: 0 9px;
		font-size: 11px;
	}

	.vwf__say {
		order: 5;
		flex-basis: 100%;
		font-size: 13px;
		gap: 8px;
	}

	.vwf__say-num {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}
}

@media (max-width: 359px) {
	.vwf__cue {
		justify-content: center;
		width: 24px;
		padding: 0;
	}

	.vwf__cue-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.vwf__tools {
		gap: 2px;
		padding-inline: 12px;
	}
}

.vwf__tip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	z-index: 2;
	width: max-content;
	max-width: 240px;
	padding: 7px 11px;
	border-radius: 10px;
	background: var(--color-popover, #2e2c43);
	color: var(--color-foreground, #dbd8e9);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-align: start;
	white-space: normal;
	box-shadow: 0 10px 28px rgba(8, 7, 14, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	pointer-events: none;
}

.vwf__chapter:last-child .vwf__tip {
	left: auto;
	right: -4px;
	transform: translateY(4px);
}

@media (hover: hover) {
	.vwf__chapter:hover .vwf__tip {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.16s ease 0.12s, transform 0.2s ease 0.12s, visibility 0s;
	}

	.vwf__chapter:last-child:hover .vwf__tip {
		transform: none;
	}
}

.vwf__mini {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 4px;
	background: var(--color-surface, #1c1b29);
	box-shadow: 0 10px 28px rgba(8, 7, 14, 0.55);
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
}

.vwf__mini.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.vwf__mini-map {
	position: relative;
	overflow: hidden;
	background: var(--vwf-deck);
	cursor: pointer;
	touch-action: none;
}

.vwf__mini-inner {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	pointer-events: none;
}

.vwf__mini-lens {
	position: absolute;
	border-radius: 2px;
	box-shadow: inset 0 0 0 0.5px var(--color-sub-hover, #949dd3), 0 0 0 999px rgba(8, 7, 14, 0.6);
	pointer-events: none;
}

.vwf__deckin {
	display: flex;
	align-items: center;
}

.vwf__deckmain {
	flex: 1 1 auto;
	min-width: 0;
}

.vwf__deckmap {
	flex: none;
	width: 0;
	margin-left: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.vwf__deckmap.is-shown {
	width: var(--vwf-map-w, 168px);
	margin-left: 14px;
	opacity: 1;
}

.vwf__deckmap-box {
	display: inline-block;
	padding: 4px;
	background: var(--color-surface, #1c1b29);
	line-height: 0;
}

.vwf__toast {
	position: absolute;
	top: 12px;
	left: 50%;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--color-surface, #1c1b29);
	color: var(--color-foreground, #dbd8e9);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 10px 28px rgba(8, 7, 14, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	pointer-events: none;
}

.vwf__toast.is-shown {
	animation: vwf-toast 2.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vwf-toast {
	0% {
		opacity: 0;
		visibility: visible;
		transform: translate(-50%, -6px);
	}

	12%,
	80% {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	100% {
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vwf__say.is-in,
	.vwf__speed-menu,
	.vwf__still-img.vwf__still-img.vwf__still-img,
	.vwf__toast.is-shown,
	.vwf-modal {
		animation-duration: 0.01ms;
	}

	.vwf__say-text.is-flowing .vwf__say-flow {
		animation: none;
	}

	.vwf__chapter-bar,
	.vwf__chapter-fill,
	.vwf__chapter-num,
	.vwf__home,
	.vwf__mini,
	.vwf__deckmap,
	.vwf__tip {
		transition-duration: 0.01ms;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vwf-intro-wait .vwf:not(.is-intro-done) .vwf__svg > :not(.vwf__plot, .vwf__grid, .vwf__panedge, .vwf__pane, .vwf__axisbg, .vwf__axis, .vwf__zero) {
		opacity: 0;
		animation: vwf-intro-late 0.5s ease-out 5s both;
	}

	.vwf-intro-wait .vwf.is-intro-armed:not(.is-intro-done) .vwf__svg > :not(.vwf__plot, .vwf__grid, .vwf__panedge, .vwf__pane, .vwf__axisbg, .vwf__axis, .vwf__zero) {
		animation: none;
	}

	.vwf.is-intro-rise .vwf__stage > .vwf__svg > :not(.vwf__plot, .vwf__grid, .vwf__panedge, .vwf__pane, .vwf__axisbg, .vwf__axis, .vwf__zero, .vwf__body, .vwf__wick),
	.vwf.is-intro-fade .vwf__stage > .vwf__svg > :not(.vwf__plot, .vwf__grid, .vwf__panedge, .vwf__pane, .vwf__axisbg, .vwf__axis, .vwf__zero) {
		opacity: 0;
	}
}

.vwf__intro {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.vwf__intro-veil {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vwf-intro-soft, 24px));
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--vwf-intro-soft, 24px));
	will-change: transform;
}

.vwf__intro-copy {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

.vwf__intro-full {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity;
}

@keyframes vwf-intro-late {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.vwf-step-hide {
	display: none;
}

.vwf-replaying .vwf__ann {
	opacity: 0;
	pointer-events: none;
}

.vwf-replay-reveal .vwf__ann {
	transition: opacity 0.5s ease;
}

.vwf-replay-head {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.vwf-replay-head.is-in {
	opacity: 1;
}

.vwf-replay-glow {
	stroke: var(--color-primary, #d2a840);
	stroke-width: 10;
	stroke-opacity: 0.12;
}

.vwf-replay-line {
	stroke: var(--color-primary, #d2a840);
	stroke-width: 1.5;
	stroke-opacity: 0.9;
}

.vwf-replay-band {
	pointer-events: none;
}

.vwf-step-hit {
	cursor: pointer;
	transition: filter 0.15s ease;
}

.vwf-step-hot {
	filter: brightness(1.35);
}

@media (prefers-reduced-motion: no-preference) {
	.vwf-step-pulse:not(.vwf-step-hot) {
		animation: vwf-pulse 1.8s ease-in-out infinite;
	}
}

@keyframes vwf-pulse {
	0%,
	100% {
		filter: none;
	}

	50% {
		filter: brightness(1.35);
	}
}

.vwf-step-dim {
	opacity: 0.26;
}

.vwf-locked {
	overflow: hidden;
}

.vwf-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(60% 40% at 50% 0, rgba(124, 134, 196, 0.12), rgba(124, 134, 196, 0)),
		var(--vwf-deck, #100f18);
	animation: vwf-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vwf-in {
	from {
		opacity: 0;
		transform: scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.vwf-modal__top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 12px 12px 20px;
}

.vwf-modal__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-foreground, #dbd8e9);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vwf-modal__tools {
	--vwf-tool: 30px;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 0;
}

.vwf-modal__frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.vwf-modal__view {
	position: relative;
	flex: 1;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}

.vwf-modal__view.is-dragging {
	cursor: grabbing;
}

.vwf-modal__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	font-size: 15px;
	line-height: 1.6;
}

.vwf-modal__svg {
	display: block;
	width: 100%;
	max-height: 100%;
	height: auto;
}

.vwf-modal__deck {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 10px var(--vwf-gutter) 16px;
}

@media (max-width: 599px) {
	.vwf-modal__top {
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 12px 8px 20px;
	}

	.vwf-modal__tools {
		--vwf-tool: 28px;
		--vwf-icon: 16px;
		margin-inline-start: auto;
	}

	.vwf-modal__deck {
		padding: 6px var(--vwf-gutter) 12px;
	}

	.vwf-modal__title {
		order: 1;
		flex-basis: 100%;
		font-size: 13px;
		white-space: normal;
	}
}

.vw-figlink.vw-figlink {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0 0.1em;
	padding: 0 0.6em 0 0.5em;
	border-radius: 999px;
	background: rgba(124, 134, 196, 0.16);
	color: var(--color-sub-hover, #949dd3);
	font-size: 0.88em;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
	vertical-align: -0.07em;
	transition: background 0.2s ease, color 0.2s ease;
}

.vw-figlink.vw-figlink::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-13.66,5.66L200,99.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,188.69,88,162.34,61.66A8,8,0,0,1,168,48h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-13.66,5.66L200,99.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,188.69,88,162.34,61.66A8,8,0,0,1,168,48h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vw-figlink.vw-figlink:hover {
	background: rgba(124, 134, 196, 0.28);
	color: var(--color-foreground, #dbd8e9);
}

.vw-figlink.vw-figlink:focus-visible {
	outline: 2px solid var(--color-primary, #d2a840);
	outline-offset: 2px;
}

.vwf__svg {
	display: block;
	width: 100%;
	max-width: var(--vwf-w, none);
	height: auto;
	margin-inline: auto;
}

.vwf .vwf__svg {
	aspect-ratio: var(--vwf-ar, auto);
	content-visibility: auto;
}

.vwf__plot {
	fill: var(--vwf-plot, #100f18);
}

.vwf__panedge {
	stroke: var(--vwf-card, #232234);
	stroke-width: 1;
}

.vwf__grid {
	stroke: var(--vwf-grid, rgba(202, 197, 229, 0.055));
	stroke-width: 1;
}

.vwf__wick {
	stroke-width: 1.1;
	stroke-opacity: 0.92;
}

.vwf__body,
.vwf__bar {
	shape-rendering: crispEdges;
}

.vwf__bar {
	fill-opacity: 0.42;
}

.vwf__line {
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.vwf__glow {
	fill: none;
	stroke-width: 7;
	stroke-opacity: 0.16;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.vwf__band {
	stroke: none;
}

.vwf__dot {
	fill: var(--vwf-fg, #dbd8e9);
}

.vwf__note {
	fill: var(--vwf-fg, #dbd8e9);
	font-size: 14.5px;
	font-weight: 700;
}

.vwf__notenum {
	fill: var(--vwf-sub, #7c86c4);
}

.vwf__axisbg {
	fill: var(--vwf-plot, #100f18);
	fill-opacity: 0.82;
}

.vwf__axis,
.vwf__pane {
	fill: var(--vwf-muted, #938ea7);
	font-size: 13px;
}

.vwf-error {
	background: rgba(228, 112, 127, 0.12);
	color: #e4707f;
	font-size: 13px;
	line-height: 1.7;
	padding: 14px 16px;
	border-radius: 10px;
	margin: 32px 0;
}

.vwf-editor__field textarea {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.6;
	min-height: 320px;
}

.vwf__box {
	shape-rendering: crispEdges;
}

.vwf__segment {
	fill: none;
	stroke-linecap: round;
}

.vwf__boxlabel,
.vwf__levellabel {
	font-size: 12.5px;
	font-weight: 700;
}

.vwf__tag {
	font-size: 13px;
	font-weight: 700;
}

.vwf__hist {
	shape-rendering: crispEdges;
}

.vwf__vband,
.vwf__indbg,
.vwf__indcol {
	shape-rendering: crispEdges;
}

.vwf__zero {
	stroke: var(--vwf-muted, #938ea7);
	stroke-width: 1;
	stroke-opacity: 0.4;
}

.vwf__cell {
	shape-rendering: crispEdges;
	letter-spacing: 0;
}

.vwf__shape {
	shape-rendering: crispEdges;
}

.vwf__shapeline,
.vwf__shapepath {
	stroke-linejoin: round;
	stroke-linecap: round;
}

.vwf__shapetext {
	font-weight: 700;
}

.vwf__indtext {
	font-weight: 700;
	letter-spacing: 0;
}

.vwf-notes-off .vwf__ann {
	display: none;
}

.vwf__leader {
	stroke: var(--vwf-muted, #938ea7);
	stroke-width: 1;
	stroke-dasharray: 2 3;
	stroke-opacity: 0.7;
}