/**
 * CH-SPECIAL — motore Stage v3 (bordi realistici: alluminio + tubo neon)
 * Mockup isolato. Avatar sempre overflow visible.
 */

@property --osk-ch-stage-spin {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
@property --osk-ch-stage-sweep {
	syntax: '<percentage>';
	inherits: false;
	initial-value: -30%;
}

/* ---- Accent tokens (override per tema in stage-theme-tokens.css) ---- */
:root {
	--osk-ch-neon-a: #00fff7;
	--osk-ch-neon-b: #ff2d78;
	--osk-stage-accent-c: #7c5cff;
	--osk-ch-amb-bg: #030108;
	--osk-ch-glow: rgba(124, 92, 255, 0.5);
	--osk-stage-neon-a-soft: color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent);
	--osk-stage-neon-a-core: color-mix(in srgb, var(--osk-ch-neon-a) 80%, #ffffff);
	--osk-stage-neon-b-soft: color-mix(in srgb, var(--osk-ch-neon-b) 45%, transparent);
	--osk-stage-neon-b-core: color-mix(in srgb, var(--osk-ch-neon-b) 80%, #ffffff);
	--osk-stage-tube-a: linear-gradient(
		180deg,
		#0a0c10 0%,
		#1a2228 12%,
		var(--osk-stage-neon-a-soft) 30%,
		var(--osk-stage-neon-a-core) 46%,
		var(--osk-ch-neon-a) 50%,
		var(--osk-stage-neon-a-core) 54%,
		var(--osk-stage-neon-a-soft) 70%,
		#141a20 88%,
		#06080a 100%
	);
	--osk-stage-tube-b: linear-gradient(
		180deg,
		#10080c 0%,
		#281018 12%,
		var(--osk-stage-neon-b-soft) 30%,
		var(--osk-stage-neon-b-core) 46%,
		var(--osk-ch-neon-b) 50%,
		var(--osk-stage-neon-b-core) 54%,
		var(--osk-stage-neon-b-soft) 70%,
		#1a0c10 88%,
		#080406 100%
	);
	--osk-stage-tube-a-v: linear-gradient(
		90deg,
		#0a0c10 0%,
		#1a2228 12%,
		var(--osk-stage-neon-a-soft) 30%,
		var(--osk-stage-neon-a-core) 46%,
		var(--osk-ch-neon-a) 50%,
		var(--osk-stage-neon-a-core) 54%,
		var(--osk-stage-neon-a-soft) 70%,
		#141a20 88%,
		#06080a 100%
	);
	--osk-stage-tube-b-v: linear-gradient(
		90deg,
		#10080c 0%,
		#281018 12%,
		var(--osk-stage-neon-b-soft) 30%,
		var(--osk-stage-neon-b-core) 46%,
		var(--osk-ch-neon-b) 50%,
		var(--osk-stage-neon-b-core) 54%,
		var(--osk-stage-neon-b-soft) 70%,
		#1a0c10 88%,
		#080406 100%
	);
	--osk-stage-metal: linear-gradient(
		145deg,
		rgba(72, 78, 88, 0.95) 0%,
		rgba(28, 32, 38, 0.98) 45%,
		rgba(18, 20, 24, 1) 100%
	);
	--osk-stage-fill-base: #07050e;
	--osk-stage-fill-mid: #100c18;
	--osk-stage-fill-deep: #0a0712;
	--osk-stage-text: #f8f8fa;
	--osk-stage-text-muted: rgba(255, 255, 255, 0.82);
	--osk-stage-text-soft: rgba(255, 255, 255, 0.62);
	--osk-stage-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
	--osk-stage-card-fill:
		linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 18%, transparent 72%, rgba(0, 0, 0, 0.28) 100%),
		radial-gradient(ellipse 110% 70% at 50% -15%, color-mix(in srgb, var(--osk-stage-accent-c) 20%, transparent), transparent 52%),
		radial-gradient(ellipse 75% 55% at 96% 42%, color-mix(in srgb, var(--osk-ch-neon-b) 14%, transparent), transparent 58%),
		radial-gradient(ellipse 70% 50% at 4% 78%, color-mix(in srgb, var(--osk-ch-neon-a) 12%, transparent), transparent 55%),
		radial-gradient(ellipse 90% 45% at 50% 108%, color-mix(in srgb, var(--osk-stage-accent-c) 16%, transparent), transparent 58%),
		conic-gradient(from 225deg at 52% 48%, var(--osk-stage-fill-base) 0deg, var(--osk-stage-fill-mid) 85deg, var(--osk-stage-fill-deep) 170deg, color-mix(in srgb, var(--osk-stage-accent-c) 18%, var(--osk-stage-fill-deep)) 255deg, var(--osk-stage-fill-base) 360deg),
		var(--osk-stage-fill-deep);
	--osk-stage-card-fill-identity:
		linear-gradient(180deg, color-mix(in srgb, var(--osk-stage-accent-c) 28%, rgba(0, 0, 0, 0.55)) 0%, rgba(10, 8, 16, 0.92) 32%, rgba(12, 10, 20, 0.97) 100%),
		radial-gradient(ellipse 80% 50% at 8% 95%, color-mix(in srgb, var(--osk-ch-neon-b) 16%, transparent), transparent 58%),
		radial-gradient(ellipse 65% 45% at 95% 12%, color-mix(in srgb, var(--osk-ch-neon-a) 12%, transparent), transparent 52%),
		var(--osk-stage-card-fill);
}

/* ========== Backdrop pagina (più profondo) ========== */
.osk-ch-theme-backdrop.osk-ch-theme-neon-stage {
	background-color: var(--osk-ch-amb-bg, #030108);
}
.osk-ch-theme-backdrop.osk-ch-theme-neon-stage .osk-ch-theme-amb::before {
	inset: -20% -30% -8% -30%;
	background:
		radial-gradient(ellipse 55% 40% at 15% 8%, color-mix(in srgb, var(--osk-ch-neon-b) 16%, transparent), transparent 62%),
		radial-gradient(ellipse 50% 38% at 88% 12%, color-mix(in srgb, var(--osk-ch-neon-a) 12%, transparent), transparent 58%),
		radial-gradient(ellipse 100% 60% at 50% 108%, color-mix(in srgb, var(--osk-stage-accent-c) 28%, transparent), transparent 62%),
		linear-gradient(180deg, #06040c 0%, #0a0614 45%, #040208 100%),
		var(--osk-ch-amb-a, transparent);
	filter: blur(0);
	animation: osk-ch-stage-amb 11s ease-in-out infinite;
}
.osk-ch-theme-backdrop.osk-ch-theme-neon-stage .osk-ch-theme-amb::after {
	inset: 0;
	background:
		var(--osk-stage-noise),
		linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--osk-ch-neon-a) 4%, transparent) 100%),
		repeating-linear-gradient(90deg, transparent 0, transparent 79px, color-mix(in srgb, var(--osk-ch-neon-a) 2.8%, transparent) 79px, color-mix(in srgb, var(--osk-ch-neon-a) 2.8%, transparent) 80px),
		repeating-linear-gradient(0deg, transparent 0, transparent 79px, color-mix(in srgb, var(--osk-stage-accent-c) 2%, transparent) 79px, color-mix(in srgb, var(--osk-stage-accent-c) 2%, transparent) 80px),
		var(--osk-ch-amb-b, transparent);
	background-size: 180px 180px, auto, auto, auto, auto;
	opacity: 0.82;
}
@keyframes osk-ch-stage-amb {
	0%, 100% { opacity: 0.82; }
	50% { opacity: 1; }
}

/* ========== Avatar — mai tagliato ========== */
.osk-ch-theme-stage .ch-hub-stack,
.osk-ch-theme-stage .ch-hub-identity,
.osk-ch-theme-stage .ch-hub-identity.ch-hub-surface,
.osk-ch-theme-stage .ch-hub-surface {
	overflow: visible !important;
	clip-path: none !important;
}
.osk-ch-theme-stage .ch-hub-identity__inner {
	overflow: visible !important;
}

.osk-ch-theme-stage .ch-hub-identity__avatar-wrap {
	position: relative;
	z-index: 24;
	overflow: visible !important;
	margin-top: -48px;
	padding: 5px;
	border: none !important;
	border-radius: 50%;
	background: var(--osk-stage-metal) !important;
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.55),
		0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 2px 3px rgba(255, 255, 255, 0.14),
		inset 0 -3px 6px rgba(0, 0, 0, 0.55) !important;
}
.osk-ch-theme-stage .ch-hub-identity__avatar {
	position: relative;
	z-index: 2;
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.35),
		0 6px 18px rgba(0, 0, 0, 0.45);
}

.osk-ch-theme-stage .ch-hub-identity__avatar-wrap::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(
		from var(--osk-ch-stage-spin),
		var(--osk-ch-neon-b) 0deg,
		var(--osk-stage-accent-c) 100deg,
		var(--osk-ch-neon-a) 200deg,
		color-mix(in srgb, var(--osk-ch-neon-a) 55%, #ffffff) 300deg,
		var(--osk-ch-neon-b) 360deg
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: osk-ch-stage-ring 5s linear infinite;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--osk-ch-neon-b) 30%, transparent));
	z-index: 1;
	pointer-events: none;
}
.osk-ch-theme-stage .ch-hub-identity__avatar-wrap::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 20px color-mix(in srgb, var(--osk-ch-neon-a) 12%, transparent);
	z-index: -1;
	pointer-events: none;
	animation: osk-ch-stage-pulse 4s ease-in-out infinite;
}
@keyframes osk-ch-stage-ring { to { --osk-ch-stage-spin: 360deg; } }
@keyframes osk-ch-stage-pulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 0.85; transform: scale(1.03); }
}

.osk-ch-theme-stage .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.28) 78%, rgba(4, 2, 10, 0.88) 100%) !important;
}

/* ========== Card: fill pieno + bordi glow (testi leggibili) ========== */
.osk-ch-theme-stage .ch-hub-surface {
	position: relative;
	isolation: isolate;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.52) !important;
}
.osk-ch-theme-stage .ch-hub-surface > * {
	position: relative;
	z-index: 4;
}

/* ::before = fill card premium (mesh + noise + vignetta testo) */
.osk-ch-theme-stage .ch-hub-surface::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	filter: none;
	animation: osk-ch-stage-fill-drift 18s ease-in-out infinite;
	background:
		var(--osk-stage-noise),
		var(--osk-ch-stage-card-fill, var(--osk-stage-card-fill));
	background-size: 200px 200px, auto;
	background-blend-mode: overlay, normal;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		inset 0 -2px 12px rgba(0, 0, 0, 0.35);
}
@keyframes osk-ch-stage-fill-drift {
	0%, 100% { filter: brightness(1) saturate(1); }
	50% { filter: brightness(1.04) saturate(1.06); }
}

/* ::after = soli bordi neon animati (centro trasparente) */
.osk-ch-theme-stage .ch-hub-surface::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(circle at 11px 11px, #b8bcc4 0%, #5a6068 22%, #2a2e34 38%, transparent 42%),
		radial-gradient(circle at 11px 11px, transparent 55%, rgba(0, 0, 0, 0.5) 56%, transparent 58%),
		radial-gradient(circle at calc(100% - 11px) 11px, #b8bcc4 0%, #5a6068 22%, #2a2e34 38%, transparent 42%),
		radial-gradient(circle at calc(100% - 11px) 11px, transparent 55%, rgba(0, 0, 0, 0.5) 56%, transparent 58%),
		radial-gradient(circle at 11px calc(100% - 11px), #9098a0 0%, #4a5058 22%, #22262c 38%, transparent 42%),
		radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #9098a0 0%, #4a5058 22%, #22262c 38%, transparent 42%),
		var(--osk-stage-tube-a) 7px 7px / 42px 6px no-repeat,
		var(--osk-stage-tube-a-v) 7px 7px / 6px 42px no-repeat,
		var(--osk-stage-tube-b) calc(100% - 49px) 7px / 42px 6px no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 13px) 7px / 6px 42px no-repeat,
		var(--osk-stage-tube-b) 7px calc(100% - 13px) / 42px 6px no-repeat,
		var(--osk-stage-tube-b-v) 7px calc(100% - 49px) / 6px 42px no-repeat,
		var(--osk-stage-tube-a) calc(100% - 49px) calc(100% - 13px) / 42px 6px no-repeat,
		var(--osk-stage-tube-a-v) calc(100% - 13px) calc(100% - 49px) / 6px 42px no-repeat,
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent) var(--osk-ch-stage-sweep) calc(100% - 8px) / 18% 1px no-repeat;
	filter:
		drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-a) 55%, transparent))
		drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-a) 28%, transparent))
		drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-b) 45%, transparent))
		drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-b) 22%, transparent));
	animation: osk-ch-stage-sweep 5.5s ease-in-out infinite, osk-ch-stage-flicker 7s ease-in-out infinite;
}
@keyframes osk-ch-stage-sweep {
	0%, 100% { --osk-ch-stage-sweep: -20%; }
	50% { --osk-ch-stage-sweep: 108%; }
}
@keyframes osk-ch-stage-flicker {
	0%, 100% { opacity: 1; }
	49% { opacity: 0.92; }
	50% { opacity: 1; }
	83% { opacity: 0.96; }
}

.osk-ch-theme-stage .ch-hub-identity.ch-hub-surface {
	padding-top: 8px;
	margin-top: -64px;
}
.osk-ch-theme-stage .ch-hub-identity.ch-hub-surface::before {
	inset: 0;
	top: 0;
	border-radius: 12px;
	background:
		var(--osk-stage-noise),
		var(--osk-ch-stage-card-fill-identity, var(--osk-stage-card-fill-identity));
	background-size: 200px 200px, auto;
	background-blend-mode: overlay, normal;
}
.osk-ch-theme-stage .ch-hub-identity.ch-hub-surface::after {
	background:
		radial-gradient(circle at 11px calc(100% - 11px), #9098a0 0%, #4a5058 22%, #22262c 38%, transparent 42%),
		radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #9098a0 0%, #4a5058 22%, #22262c 38%, transparent 42%),
		var(--osk-stage-tube-a-v) 7px 58px / 6px calc(100% - 66px) no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 13px) 58px / 6px calc(100% - 66px) no-repeat,
		var(--osk-stage-tube-a) 7px calc(100% - 13px) / calc(100% - 14px) 6px no-repeat,
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) var(--osk-ch-stage-sweep) calc(100% - 8px) / 16% 1px no-repeat;
	border-radius: 0 0 12px 12px;
}

/* ========== Tipografia leggibile ========== */
.osk-ch-theme-stage .ch-hub-identity__name {
	color: var(--osk-stage-text) !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.85),
		0 2px 14px rgba(0, 0, 0, 0.45);
}
.osk-ch-theme-stage .ch-hub-identity__handle {
	color: var(--osk-stage-text-muted) !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.osk-ch-theme-stage .ch-hub-identity__stats {
	color: var(--osk-stage-text-muted) !important;
}
.osk-ch-theme-stage .ch-hub-identity__stats strong {
	color: var(--osk-stage-text) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.osk-ch-theme-stage .ch-hub-identity__stats span:not(:last-child)::after {
	opacity: 0.55;
}

.osk-ch-theme-stage .ch-hub-tabs__link {
	color: var(--osk-stage-text-soft) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	font-weight: 600;
}
.osk-ch-theme-stage .ch-hub-tabs__link:hover {
	color: rgba(255, 255, 255, 0.88) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}
.osk-ch-theme-stage .ch-hub-tabs__link.is-active {
	color: var(--osk-stage-text) !important;
	background: rgba(255, 255, 255, 0.07) !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.8),
		0 0 10px color-mix(in srgb, var(--osk-ch-neon-a) 25%, transparent);
}

.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock,
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface {
	color: rgba(255, 255, 255, 0.88) !important;
}
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock strong,
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface strong {
	color: var(--osk-stage-text) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock p,
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	line-height: 1.55;
}

.osk-ch-theme-stage .ch-hub-identity__head::before {
	content: "STAGE PASS";
	display: inline-block;
	margin-bottom: 6px;
	font-size: 0.58rem;
	font-weight: 900;
	letter-spacing: 0.24em;
	padding: 5px 11px;
	border-radius: 3px;
	color: #fff;
	background: linear-gradient(180deg, #3a3040 0%, #1a1420 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 0 14px color-mix(in srgb, var(--osk-ch-neon-b) 25%, transparent);
	text-shadow: 0 0 8px color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent);
}

.osk-ch-theme-stage .ch-hub-tabs {
	padding-bottom: 6px;
}
.osk-ch-theme-stage .ch-hub-tabs__link.is-active {
	position: relative;
}
.osk-ch-theme-stage .ch-hub-tabs__link.is-active::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -5px;
	height: 5px;
	border-radius: 2px;
	background: var(--osk-stage-tube-a);
	box-shadow:
		0 0 6px color-mix(in srgb, var(--osk-ch-neon-a) 65%, transparent),
		0 0 14px color-mix(in srgb, var(--osk-ch-neon-a) 35%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock {
	position: relative;
}
.osk-ch-theme-stage .ch-hub-panel .ch-hub-surface--mock > * {
	position: relative;
	z-index: 5;
}

/* ========== Shop preview ========== */
.osk-ch-special-preview--stage {
	position: relative;
	width: 100%;
	height: 118px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--osk-ch-amb-bg, #04020a);
}
.osk-ch-special-preview--stage .osk-ch-special-preview__amb {
	position: absolute;
	inset: 0;
	background: var(--osk-ch-amb-a);
}
.osk-ch-special-preview--stage .osk-ch-special-preview__cover {
	height: 52px;
	background: url("https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&q=80") center/cover;
	position: relative;
	z-index: 1;
}
.osk-ch-special-preview--stage .osk-ch-special-preview__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(4, 2, 10, 0.9) 100%);
}
.osk-ch-special-preview--stage .osk-ch-special-preview__body {
	position: relative;
	z-index: 2;
	padding: 6px 8px 8px;
}
.osk-ch-special-preview--stage .osk-ch-special-preview__hud {
	height: 28px;
	position: relative;
	border-radius: 5px;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
}
.osk-ch-special-preview--stage .osk-ch-special-preview__hud::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
	background:
		var(--osk-stage-noise),
		var(--osk-stage-card-fill);
	background-size: 120px 120px, auto;
	background-blend-mode: overlay, normal;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.osk-ch-special-preview--stage .osk-ch-special-preview__hud::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
	box-shadow: inset 0 0 0 1px rgba(80, 88, 98, 0.25);
	background:
		radial-gradient(circle at 5px 5px, #a0a8b0 0%, #505860 30%, transparent 36%),
		radial-gradient(circle at calc(100% - 5px) 5px, #a0a8b0 0%, #505860 30%, transparent 36%),
		var(--osk-stage-tube-a) 4px 4px / 16px 3px no-repeat,
		var(--osk-stage-tube-a-v) 4px 4px / 3px 16px no-repeat,
		var(--osk-stage-tube-b) calc(100% - 20px) 4px / 16px 3px no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 7px) 4px / 3px 16px no-repeat;
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent));
	pointer-events: none;
}
.osk-ch-special-preview--stage .osk-ch-special-preview__dot {
	position: absolute;
	top: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	padding: 2px;
	background: var(--osk-stage-metal);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.osk-ch-special-preview--stage .osk-ch-special-preview__dot::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--osk-ch-neon-b), var(--osk-stage-accent-c), var(--osk-ch-neon-a), var(--osk-ch-neon-b));
}