/*
* LittleLink
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	font-size:16px;
}

/* Grid
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .container {
	position:relative;
	width:100%;
	max-width:42.5rem;     				/* 680px */
    text-align:center;
	margin:0 auto;
	padding:3rem 1.25rem 0 1.25rem;
	box-sizing:border-box;
}
.container-left {
	position:relative;
	width:100%;
	max-width:37.5rem;
	text-align:left;
	margin:0 auto;
	padding:0 1.25rem;
	box-sizing:border-box;
}
.container-left p {
	margin-bottom: 1rem;  				/* 16px space between paragraphs */
  }
.column {
	position:center;
	width:100%;
	float:center;
	box-sizing:border-box;
	padding:3rem 2rem;
	background:rgba(255, 255, 255, 0.8);
	border:1px solid rgba(0, 0, 0, 0.05);
	border-radius:1.5rem;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.08),
		0 4px 16px rgba(0, 0, 0, 0.04),
		0 0 0 1px rgba(255, 255, 255, 0.2);
	backdrop-filter:blur(20px);
	transition:all 0.3s ease;
}

.column:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.12),
		0 6px 20px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.3);
	transform:translateY(-2px);
}


/* For devices larger than 400px */
  @media (min-width:25rem) {            /* 400px */
    .container {
	width:85%;
	padding-left:0;
	padding-right:0;
}
}/* For devices larger than 550px */
  @media (min-width:34.375rem) {        /* 550px */
    .container {
	width:80%;
}
.column,.columns {
	margin-left:0;
}
.column:first-child,.columns:first-child {
	margin-left:0;
}
}

/* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  body {
	margin:0;
	padding:0;
	background-color:#ffffff;
	color:#1a1a1a;
	font-family:"Open Sans",system-ui;
	font-size:1.125rem;     				/* 18px */
    font-weight:400;
	line-height:1.6;
	transition:background-color 0.3s ease, color 0.3s ease;
}

/* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1 {
	margin:0 0 0.5rem 0;
	font-size:3rem;         		/* 48px */
    font-weight:800;
	line-height:1;
	letter-spacing:0;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;           		/* Delete this to remove automatic hyphen on line break */
}
.container p {
	margin:0 0 2rem 0;
}

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Base size - 16px browser default */
:root {
  font-size:16px;           /* Using a 1.25 modular scale for typography */
  --scale-0:1rem;           /* 16px */
  --scale-1:1.25rem;        /* 20px */
  --scale-2:1.563rem;       /* 25px */
  --scale-3:1.953rem;       /* 31px */
  --scale-4:2.441rem;       /* 39px */
  --scale-5:3.052rem;       /* 49px */

  /* Spacing units */
  --spacing-xs:0.5rem;      /* 8px */
  --spacing-s:1rem;         /* 16px */
  --spacing-m:1.5rem;       /* 24px */
  --spacing-l:2rem;         /* 32px */
  --spacing-xl:3rem;        /* 48px */
  --spacing-xxl:4rem;       /* 64px */
}

/* Avatar */
.avatar {
	width: 8rem;             /* 128px */
	height: 8rem;
	border-radius: 50%;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
	margin-left: auto;
	margin-right: auto;
	display: block;
  }

/* Typography Scale */
h1 {
	margin:0 0 var(--spacing-m) 0;
	font-size:var(--scale-5);           /* ~49px */
  	font-weight:800;
	line-height:1.1;
	letter-spacing:-0.02em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
body {
	font-size:var(--scale-1);           /* 20px */
  	line-height:1.6;
}
.container p {
	margin:0 0 var(--spacing-xl) 0;
	font-size:var(--scale-1);
	line-height:1.6;
	font-size: 14px;
}

/* Container spacing */
.container {
	padding:var(--spacing-xl) var(--spacing-m) var(--spacing-xl) var(--spacing-m);
	text-align:center;
}

/* Footer */
footer {
	margin:var(--spacing-xxl) 0;            /* 4rem (64px) top and bottom */
    font-size:var(--scale-0);
}

/* Responsive adjustments */
@media (max-width:34.375rem) {              /* 550px */
  h1 {
	font-size:var(--scale-4);
}
body {
	font-size:var(--scale-0);
}
.container p {
	font-size:var(--scale-0);
}
.avatar {
	margin-bottom:var(--spacing-m);
}
footer {
	margin:var(--spacing-xl) 0;         	/* 3rem (48px) top and bottom */
}
.column {
	padding:2rem 1.5rem;
	border-radius:1rem;
}
}

/* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a {
	color:#2457F5;
	text-decoration:underline;
}
a:hover {
	color:#083BDA;
}

/* Canvas Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.canvas-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	width: 100%;
	margin-bottom: 2rem;
}

.canvas {
	position: relative;
	display: block;
	width: 100%;
	height: 133px;
	padding: 15px;
	color: inherit;
	text-decoration: none;
	box-sizing: border-box;
}

.canvas_border {
	position: absolute;
	top: 15px;
	left: -15px;
	height: 100%;
	width: 100%;
	z-index: 0;
}

.canvas_border svg {
	height: 100%;
	width: 100%;
}

.rect-gradient {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: erase-line 1s ease-in-out forwards;
}

.canvas_img-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: rotate(-10deg) skew(-10deg);
	overflow: hidden;
	background: white;
	transition: all 0.25s ease-in-out 0s;
}

.canvas_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.9) contrast(1.2);
	transition: all 0.25s ease-in-out 0s;
}

.canvas_copy {
	position: absolute;
	bottom: 0;
	left: 85%;
	text-transform: uppercase;
	color: #ffffff;
	z-index: 100;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.canvas_copy_title {
	font-size: 22px;
	display: block;
	transform: translateX(-60px);
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
	color: white;
	font-weight: 900;
	opacity: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.canvas_copy_title:nth-child(2) {
	transition-delay: 0.1s;
}

.canvas_copy_title:nth-child(3) {
	transition-delay: 0.2s;
}

.canvas_copy_subtitle {
	display: block;
	transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - 60px));
	transform-origin: top left;
	position: absolute;
	left: 0;
	top: 6px;
	font-size: 12px;
	font-weight: 900;
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s;
	opacity: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.canvas_copy_details {
	display: block;
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.14s;
	transform: translateX(-60px);
	opacity: 0;
	font-size: 12px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.canvas_border,
.canvas_img-wrapper {
	transform: rotate(-10deg) skew(-10deg);
}

.canvas:hover .canvas_copy_title,
.canvas:hover .canvas_copy_subtitle,
.canvas:hover .canvas_copy_details,
.canvas:hover .canvas_img {
	opacity: 1;
}

.canvas:hover .canvas_border,
.canvas:hover .canvas_img-wrapper {
	transform: rotate(-14deg) skew(-14deg) scale(0.96);
}

.canvas:hover .canvas_img {
	filter: brightness(1) contrast(1);
}

.canvas:hover .canvas_copy_title,
.canvas:hover .canvas_copy_details {
	transform: translateX(0);
}

.canvas:hover .canvas_copy_subtitle {
	transform: rotate(270deg) translateY(-100%) translateX(-100%);
}

.canvas:hover .rect-gradient {
	animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Canvas Animations */
@keyframes draw-line {
	from {
		stroke-dashoffset: 2000;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes erase-line {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 2000;
	}
}

/* Mobile Responsive */
@media (max-width: 34.375rem) {
	.canvas-wrapper {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.canvas {
		height: 100px;
		padding: 10px;
	}
	
	.canvas_border {
		top: 10px;
		left: -10px;
	}
	
	.canvas_copy_title {
		font-size: 16px;
	}
	
	.canvas_copy_subtitle {
		font-size: 10px;
		top: 4px;
	}
	
	.canvas_copy_details {
		font-size: 10px;
	}
	
	.canvas_copy {
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	}
}

/* Dark Theme Support */
:root.theme-dark .canvas_img-wrapper {
	background: #2a2a2a;
}

:root.theme-dark .canvas_copy_title {
	color: white;
}

:root.theme-dark .canvas_copy_subtitle {
	color: white;
}

:root.theme-dark .canvas_copy_details {
	color: white;
}

/* 移除旧的按钮样式 */
.button::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(110deg, 
		transparent 0%, 
		transparent 45%, 
		rgba(255,255,255,0.3) 48%, 
		rgba(255,255,255,0.5) 50%, 
		rgba(255,255,255,0.3) 52%, 
		transparent 55%, 
		transparent 100%);
	background-size:200% 200%;
	background-position:-200% -200%;
	z-index:0;
	border-radius:0.5rem;
	overflow:hidden;
	will-change:background-position;
	opacity:0;
	transition:opacity 0.1s ease;
}

/* 鼠标悬停时触发流光 */
.button:hover::before {
	opacity:1;
	animation:shine 2s ease-out;
}

@keyframes shine {
	0% {
		background-position:200% 200%;
	}
	100% {
		background-position:-200% -200%;
	}
}

/* 边框浮出动画 */
@keyframes borderFloat {
	0% {
		outline: 0px solid transparent;
		outline-offset: 0px;
	}
	30% {
		outline: 1px solid var(--glow-color);
		outline-offset: 4px;
	}
	60% {
		outline: 1.5px solid var(--glow-color);
		outline-offset: 8px;
	}
	80% {
		outline: 1px solid var(--glow-color);
		outline-offset: 10px;
	}
	100% {
		outline: 0px solid transparent;
		outline-offset: 12px;
	}
}



/* 按钮内容层级 */
.button .icon,
.button span {
	position:relative;
	z-index:3;
}









/* 3D光照效果 - 使用一个额外的div而不是伪元素 */
.button-lighting-overlay {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:radial-gradient(
		circle at var(--light-x, 50%) var(--light-y, 50%),
		rgba(255,255,255,0.4) 0%,
		rgba(255,255,255,0.2) 30%,
		rgba(255,255,255,0.1) 50%,
		transparent 70%
	);
	border-radius:0.5rem;
	opacity:0;
	transition:opacity 0.15s ease;
	pointer-events:none;
	z-index:2;
}

/* 激活光照时的效果 */
.button.lit .button-lighting-overlay {
	opacity:calc(var(--light-intensity, 0) * 0.8);
}

/* 光照时的阴影增强 */
.button.lit {
	box-shadow:
		inset 0 0 20px rgba(0,0,0,0),
		0 0 20px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.3)),
		0 4px 15px rgba(0,0,0,0.1);
	transform:translateY(-1px);
}

/* 光照和悬停同时激活时的效果 */
.button.lit:hover {
	box-shadow:
		inset 0 0 20px rgba(0,0,0,0.1),
		0 0 20px var(--glow-color),
		0 0 15px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.2)),
		0 4px 8px rgba(0,0,0,0.2);
}

/* 深色主题的光照效果 */
:root.theme-dark .button-lighting-overlay {
	background:radial-gradient(
		circle at var(--light-x, 50%) var(--light-y, 50%),
		rgba(255,255,255,0.3) 0%,
		rgba(255,255,255,0.15) 30%,
		rgba(255,255,255,0.08) 50%,
		transparent 70%
	);
}

:root.theme-dark .button.lit {
	box-shadow:
		inset 0 0 20px rgba(0,0,0,0),
		0 0 25px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.4)),
		0 4px 20px rgba(0,0,0,0.3);
}

/* 深色主题的outline悬停效果 */
:root.theme-dark .button:hover {
	box-shadow: 
		inset 0 0 20px rgba(255,255,255,0.05),
		0 0 25px var(--glow-color),
		0 4px 12px rgba(0,0,0,0.4);
}

:root.theme-dark .button.lit:hover {
	box-shadow:
		inset 0 0 20px rgba(255,255,255,0.05),
		0 0 25px var(--glow-color),
		0 0 15px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.3)),
		0 4px 12px rgba(0,0,0,0.4);
}

/* 自动主题的深色模式光照效果 */
@media (prefers-color-scheme:dark) {
	:root.theme-auto .button-lighting-overlay {
		background:radial-gradient(
			circle at var(--light-x, 50%) var(--light-y, 50%),
			rgba(255,255,255,0.3) 0%,
			rgba(255,255,255,0.15) 30%,
			rgba(255,255,255,0.08) 50%,
			transparent 70%
		);
	}
	
	:root.theme-auto .button.lit {
		box-shadow:
			inset 0 0 20px rgba(0,0,0,0),
			0 0 25px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.4)),
			0 4px 20px rgba(0,0,0,0.3);
	}
	
	/* 自动主题深色模式的outline悬停效果 */
	:root.theme-auto .button:hover {
		box-shadow: 
			inset 0 0 20px rgba(255,255,255,0.05),
			0 0 25px var(--glow-color),
			0 4px 12px rgba(0,0,0,0.4);
	}
	
	:root.theme-auto .button.lit:hover {
		box-shadow:
			inset 0 0 20px rgba(255,255,255,0.05),
			0 0 25px var(--glow-color),
			0 0 15px rgba(255,255,255,calc(var(--light-intensity, 0) * 0.3)),
			0 4px 12px rgba(0,0,0,0.4);
	}
}

/* 按钮容器 - 确保星星不被裁剪 */
.button-stack {
	overflow:visible;
}



/* 悬停效果 */
.button:hover {
	transform:translateY(2px);
	filter:brightness(1.1);
	
	/* 边框浮出动画 */
	animation: borderFloat 0.5s ease-in-out infinite;
	
	/* 其他悬停效果 */
	box-shadow: 
		inset 0 0 20px rgba(0,0,0,0.1),
		0 0 20px var(--glow-color),
		0 4px 8px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 为不同按钮设置悬停颜色 - 与outline效果结合 */
.button-twitter:hover {
	background-color:#0d8bd9;
	--glow-color:#0d8bd9;
}

.button-telegram:hover {
	background-color:#2fa5e8;
	--glow-color:#2fa5e8;
}

.button-website:hover {
	background-color:#555555;
	--glow-color:#888888;
}

.button-docs:hover {
	background-color:#555555;
	--glow-color:#888888;
}

.button-mail:hover {
	background-color:#555555;
	--glow-color:#888888;
}

/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	width:1.25rem;
	height:1.25rem;
	margin-right:0.5rem;
	flex-shrink:0;
	position:relative;
	z-index:3;
}

/* Avatar
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 推特风格的个人介绍区域 */
.profile-header {
	position:relative;
	width:100%;
	margin-bottom:2rem;
	background:rgba(255, 255, 255, 0.95);
	border-radius:1.5rem;
	overflow:hidden;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		0 4px 16px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	backdrop-filter:blur(20px);
	border:1px solid rgba(255, 255, 255, 0.2);
	transition:all 0.3s ease;
	opacity:0;
	transform:translateY(30px);
	animation:slideInUp 0.8s ease-out forwards;
}

.profile-header:hover {
	transform:translateY(-2px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.15),
		0 6px 20px rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* 背景图 */
.profile-banner {
	position:relative;
	width:100%;
	height:180px;
	background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	overflow:hidden;
}

.banner-image {
	width:100%;
	height:100%;
	background:linear-gradient(135deg, 
		#667eea 0%, 
		#764ba2 25%, 
		#f093fb 50%, 
		#f5576c 75%, 
		#4facfe 100%);
	background-size:300% 300%;
	animation:gradientShift 10s ease infinite;
	position:relative;
	overflow:hidden;
}

/* Banner图片样式 */
.banner-img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.banner-image::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:2;
}

@keyframes gradientShift {
	0% { background-position:0% 50%; }
	50% { background-position:100% 50%; }
	100% { background-position:0% 50%; }
}

/* 入场动画 */
@keyframes slideInUp {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}

/* 头像 */
.profile-avatar {
	position:absolute;
	top:140px;
	left:24px;
	z-index:10;
}

.profile-avatar .avatar {
	width:80px;
	height:80px;
	border-radius:50%;
	border:4px solid #ffffff;
	object-fit:cover;
	background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow:
		0 8px 25px rgba(0, 0, 0, 0.15),
		0 4px 10px rgba(0, 0, 0, 0.1);
	transition:all 0.3s ease;
	opacity:0;
	transform:translateY(-30px) scale(0.8);
	animation:avatarBounceIn 0.8s ease-out 0.4s forwards;
}

@keyframes avatarBounceIn {
	0% {
		opacity:0;
		transform:translateY(-30px) scale(0.8);
	}
	60% {
		opacity:1;
		transform:translateY(5px) scale(1.05);
	}
	100% {
		opacity:1;
		transform:translateY(0) scale(1);
	}
}

.profile-avatar .avatar:hover {
	transform:scale(1.05);
	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.2),
		0 6px 15px rgba(0, 0, 0, 0.15);
}

/* 个人信息 */
.profile-info {
	padding:60px 2rem 2rem 2rem;
	text-align:left;
}

.profile-name {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:0.5rem;
	margin-bottom:0.5rem;
}

/* 推特关注按钮 */
.twitter-follow-button {
	margin-top:0.5rem;
	text-align:left;
}

.profile-name h1 {
	margin:0;
	font-size:2rem;
	font-weight:800;
	color:#1a1a1a;
	line-height:1.2;
	position:relative;
	overflow:hidden;
	background:linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 100%);
	background-clip:text;
	-webkit-background-clip:text;
	text-shadow:0 0 10px rgba(26, 26, 26, 0.1);
	transition:all 0.3s ease;
}

.profile-name h1:hover {
	text-shadow:0 0 20px rgba(26, 26, 26, 0.3);
	transform:scale(1.02);
}

.profile-name h1::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(110deg, 
		transparent 0%, 
		transparent 40%, 
		rgba(255,255,255,0.8) 50%, 
		transparent 60%, 
		transparent 100%);
	background-size:200% 200%;
	background-position:-200% -200%;
	animation:nameShine 3s linear infinite 2s;
	z-index:1;
	border-radius:4px;
	will-change:background-position;
}

@keyframes nameShine {
	0% {
		background-position:-200% -200%;
	}
	100% {
		background-position:200% 200%;
	}
}

/* 推特认证徽章样式 */
.profile-name svg[data-testid="icon-verified"] {
	width:20px;
	height:20px;
	flex-shrink:0;
	filter:drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
	animation:badgeGlow 3s ease-in-out infinite;
	transform:translateY(1px);
}

@keyframes badgeGlow {
	0%, 100% {
		transform:scale(1);
		filter:drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
	}
	50% {
		transform:scale(1.1);
		filter:drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5));
	}
}

.profile-bio {
	margin:0;
	font-size:3px;
	color:#666;
	line-height:1.5;
	max-width:500px;
}

/* 暗色主题适配 */
:root.theme-dark .profile-header {
	background:rgba(26, 26, 26, 0.95);
	border:1px solid rgba(255, 255, 255, 0.1);
}

:root.theme-dark .profile-header:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.3),
		0 6px 20px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.1);
}

:root.theme-dark .profile-name h1 {
	color:#ffffff;
	background:linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
	background-clip:text;
	-webkit-background-clip:text;
	text-shadow:0 0 10px rgba(255, 255, 255, 0.2);
}

:root.theme-dark .profile-name h1:hover {
	text-shadow:0 0 20px rgba(255, 255, 255, 0.4);
}

:root.theme-dark .profile-name h1::before {
	background:linear-gradient(110deg, 
		transparent 0%, 
		transparent 40%, 
		rgba(255,255,255,0.6) 50%, 
		transparent 60%, 
		transparent 100%);
	background-size:200% 200%;
	background-position:-200% -200%;
	animation:nameShine 3s linear infinite 2s;
	will-change:background-position;
}

:root.theme-dark .profile-bio {
	color:#ccc;
}

:root.theme-dark .profile-avatar .avatar {
	border-color:#333;
}

/* 响应式设计 */
@media (max-width:34.375rem) {
	.profile-banner {
		height:140px;
	}
	
	.profile-avatar {
		top:110px;
		left:20px;
	}
	
	.profile-avatar .avatar {
		width:70px;
		height:70px;
		border-width:3px;
	}
	
	.profile-info {
		padding:60px 1.5rem 1.5rem 1.5rem;
	}
	
	.profile-name h1 {
		font-size:1.5rem;
	}
	
	.profile-name h1::before {
		animation:nameShine 2.5s linear infinite;
		background-size:200% 200%;
		background-position:-200% -200%;
	}
	
	.profile-name svg[data-testid="icon-verified"] {
		width:16px;
		height:16px;
		transform:translateY(1px);
	}
	
	.profile-bio {
		font-size:13px;
		max-width:450px;
	}
}

/* 旧avatar样式保留作为备用 */
.avatar {
	width: 8rem;             /* 128px */
	height: 8rem;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
  }

   /* Modifier for no avatar rounding */
   .avatar--none {
	border-radius: 0%;
  }

  /* Modifier for rounded avatar */
  .avatar--rounded {
	border-radius: 50%;
  }

  /* Modifier for slightly rounded corners */
  .avatar--soft {
	border-radius: 0.5rem;   /* 8px rounded corners */
  }

/* Theme System
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Light theme is default above */

/* Dark theme */
:root.theme-dark {
	color-scheme:dark;
}
:root.theme-dark :focus-visible {
	outline: 2px solid #4899F7;
	outline-offset: 2px;
  }
:root.theme-dark body {
	background-color:#121212;
	color:#ffffff;
}
:root.theme-dark a:not(.button) {
	color:#4899F7;
}
:root.theme-dark a:not(.button):hover {
	color:#7AB8FF;
}
:root.theme-dark .column {
	background:rgba(18, 18, 18, 0.95);
	border:1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		0 4px 16px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.05);
}
:root.theme-dark .column:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.4),
		0 6px 20px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Auto theme */
:root.theme-auto {
	color-scheme:light dark;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto body {
	background-color:#121212;
	color:#ffffff;
}
:root.theme-auto :focus-visible {
    outline: 2px solid #4899F7;
    outline-offset: 2px;
  }
:root.theme-auto a:not(.button) {
	color:#4899F7;
}
:root.theme-auto a:not(.button):hover {
	color:#7AB8FF;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto .column {
		background:rgba(18, 18, 18, 0.95);
		border:1px solid rgba(255, 255, 255, 0.1);
		box-shadow:
			0 8px 32px rgba(0, 0, 0, 0.3),
			0 4px 16px rgba(0, 0, 0, 0.2),
			0 0 0 1px rgba(255, 255, 255, 0.05);
	}
	:root.theme-auto .column:hover {
		box-shadow:
			0 12px 40px rgba(0, 0, 0, 0.4),
			0 6px 20px rgba(0, 0, 0, 0.3),
			0 0 0 1px rgba(255, 255, 255, 0.1);
	}
}
}

/* Button Text Color Override
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .button:hover,button:hover {
	color:var(--button-text);
}

/* Responsive Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  @media (max-width:34.375rem) {            /* 550px */
    h1 {
	font-size:2rem;                         /* 32px */
	}
	body {
	font-size:1rem;                    		/* 16px */
	}
}

/* Privacy Page Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
	margin:var(--spacing-l) 0;
	text-align:left;
}
section {
	margin:var(--spacing-xl) 0;
	text-align:left;
}
h2 {
	font-size:var(--scale-3);
	font-weight:700;
	margin-bottom:var(--spacing-m);
}
h3 {
	font-size:var(--scale-2);
	font-weight:600;
	margin:var(--spacing-l) 0 var(--spacing-s) 0;
}
ul {
	list-style:none;
	padding:0;
	margin:0 0 var(--spacing-m) 0;
}
ul li {
	margin-bottom:var(--spacing-xs);
}

/* Privacy page specific responsive adjustments */
  @media (max-width:34.375rem) {
	h2 {
	font-size:var(--scale-2);
	}
	h3 {
	font-size:var(--scale-1);
	}
	section {
	margin:var(--spacing-l) 0;
	}
}

/* 按钮区域卡片 */
.buttons-card {
	background:rgba(255, 255, 255, 0.95);
	border-radius:1.5rem;
	padding:2rem;
	margin-top:2rem;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		0 4px 16px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	backdrop-filter:blur(20px);
	border:1px solid rgba(255, 255, 255, 0.2);
	transition:all 0.3s ease;
	opacity:0;
	transform:translateY(30px);
	animation:slideInUp 0.8s ease-out 0.3s forwards;
}

.buttons-card:hover {
	transform:translateY(-2px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.15),
		0 6px 20px rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* 暗色主题下的按钮卡片 */
:root.theme-dark .buttons-card {
	background:rgba(26, 26, 26, 0.95);
	border:1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		0 4px 16px rgba(0, 0, 0, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.05);
}

:root.theme-dark .buttons-card:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.3),
		0 6px 20px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* 主题切换开关样式 */
.theme-switch-container {
	margin-top:2rem;
	display:flex;
	justify-content:center;
	align-items:center;
}

.theme-switch {
	position:relative;
	cursor:pointer;
	user-select:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.5rem;
	transition:transform 0.2s ease, filter 0.2s ease;
	opacity:0;
}

.theme-switch:hover {
	transform:translateY(-2px);
	animation:none;
	filter:drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

.theme-switch:hover .switch-track {
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.15),
		0 4px 12px rgba(0,0,0,0.2),
		0 0 0 2px rgba(255,255,255,0.5);
}

.theme-switch:hover .led-indicator {
	box-shadow:0 0 15px currentColor;
	transform:scale(1.2);
}

.theme-switch:active {
	transform:translateY(0);
}

.theme-switch:focus-visible {
	outline:2px solid #007bff;
	outline-offset:4px;
	border-radius:8px;
}

.theme-switch:focus-visible::after {
	content:'Press Enter or Space to toggle';
	position:absolute;
	top:-40px;
	left:50%;
	transform:translateX(-50%);
	background-color:#333;
	color:#fff;
	padding:4px 8px;
	border-radius:4px;
	font-size:0.7rem;
	white-space:nowrap;
	opacity:0;
	animation:tooltipFadeIn 0.3s ease-in-out forwards;
}

@keyframes tooltipFadeIn {
	from { opacity:0; transform:translateX(-50%) translateY(-5px); }
	to { opacity:1; transform:translateX(-50%) translateY(0); }
}

.switch-track {
	position:relative;
	width:60px;
	height:30px;
	background-color:#e0e0e0;
	border-radius:15px;
	border:2px solid #ccc;
	transition:all 0.3s ease;
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.1),
		0 2px 6px rgba(0,0,0,0.1);
	overflow:hidden;
}

.switch-track::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(90deg, 
		transparent 0%, 
		rgba(255,255,255,0.3) 50%, 
		transparent 100%);
	transform:translateX(-100%);
	transition:transform 0.6s ease;
}

.theme-switch.switching .switch-track::before,
.theme-switch.switching-back .switch-track::before {
	transform:translateX(100%);
}



/* 开关整体的呼吸灯效果 */
.theme-switch {
	animation:switchGlow 4s ease-in-out infinite;
}

/* 欢迎动画 */
.theme-switch.welcome-animation {
	animation:welcomeAnimation 1s ease-in-out forwards;
}

@keyframes welcomeAnimation {
	0% { 
		opacity:0;
		transform:translateY(20px) scale(0.8);
	}
	30% { 
		opacity:1;
		transform:translateY(-5px) scale(1.1);
	}
	60% { 
		transform:translateY(2px) scale(0.95);
	}
	100% { 
		opacity:1;
		transform:translateY(0) scale(1);
	}
}

@keyframes switchGlow {
	0%, 100% {
		filter:drop-shadow(0 0 5px rgba(255,255,255,0.1));
	}
	50% {
		filter:drop-shadow(0 0 10px rgba(255,255,255,0.2));
	}
}

/* 暗色主题下的呼吸灯调整 */
:root.theme-dark .theme-switch {
	animation:switchGlowDark 4s ease-in-out infinite;
}

@keyframes switchGlowDark {
	0%, 100% {
		filter:drop-shadow(0 0 5px rgba(0,255,136,0.1));
	}
	50% {
		filter:drop-shadow(0 0 10px rgba(0,255,136,0.2));
	}
}

.switch-handle {
	position:absolute;
	top:2px;
	left:2px;
	width:24px;
	height:24px;
	background-color:#fff;
	border-radius:50%;
	transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 2px 4px rgba(0,0,0,0.2),
		0 4px 8px rgba(0,0,0,0.1);
	display:flex;
	align-items:center;
	justify-content:center;
}

.led-indicator {
	width:8px;
	height:8px;
	border-radius:50%;
	background-color:#ff4444;
	transition:all 0.3s ease;
	animation:ledPulse 1.5s infinite ease-in-out;
}

@keyframes ledPulse {
	0%, 100% {
		opacity:1;
		transform:scale(1);
		box-shadow:0 0 6px #ff4444;
	}
	50% {
		opacity:0.6;
		transform:scale(0.8);
		box-shadow:0 0 12px #ff4444;
	}
}

.switch-labels {
	display:flex;
	justify-content:space-between;
	width:100px;
	font-size:0.8rem;
	color:#666;
	transition:all 0.3s ease;
}

.label-light {
	opacity:1;
	transform:scale(1);
	transition:all 0.3s ease;
}

.label-dark {
	opacity:0.5;
	transform:scale(0.9);
	transition:all 0.3s ease;
}

/* 夜间模式激活状态 */
.theme-switch.dark .switch-track {
	background-color:#2c2c2c;
	border-color:#444;
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.3),
		0 2px 6px rgba(0,0,0,0.2);
}

.theme-switch.dark .switch-handle {
	transform:translateX(30px);
	background-color:#1a1a1a;
	box-shadow:
		0 2px 4px rgba(0,0,0,0.3),
		0 4px 8px rgba(0,0,0,0.2);
}

.theme-switch.dark .led-indicator {
	background-color:#00ff88;
	animation:ledPulseDark 1.5s infinite ease-in-out;
}

@keyframes ledPulseDark {
	0%, 100% {
		opacity:1;
		transform:scale(1);
		box-shadow:0 0 6px #00ff88;
	}
	50% {
		opacity:0.6;
		transform:scale(0.8);
		box-shadow:0 0 12px #00ff88;
	}
}

.theme-switch.dark .label-light {
	opacity:0.5;
	transform:scale(0.9);
}

.theme-switch.dark .label-dark {
	opacity:1;
	transform:scale(1);
}

/* 过渡动画增强 */
.theme-switch.switching .switch-handle {
	animation:switchBounce 0.6s ease-in-out;
}

.theme-switch.switching .led-indicator {
	animation:ledTransition 0.6s ease-in-out;
}

.theme-switch.switching {
	animation:switchVibrate 0.6s ease-in-out;
}

@keyframes switchBounce {
	0% { transform:translateX(0) scale(1); }
	20% { transform:translateX(8px) scale(1.1); }
	40% { transform:translateX(22px) scale(0.9); }
	60% { transform:translateX(32px) scale(1.1); }
	80% { transform:translateX(28px) scale(0.95); }
	100% { transform:translateX(30px) scale(1); }
}

.theme-switch.switching-back .switch-handle {
	animation:switchBounceBack 0.6s ease-in-out;
}

.theme-switch.switching-back .led-indicator {
	animation:ledTransitionBack 0.6s ease-in-out;
}

.theme-switch.switching-back {
	animation:switchVibrateBack 0.6s ease-in-out;
}

@keyframes switchBounceBack {
	0% { transform:translateX(30px) scale(1); }
	20% { transform:translateX(22px) scale(1.1); }
	40% { transform:translateX(8px) scale(0.9); }
	60% { transform:translateX(-2px) scale(1.1); }
	80% { transform:translateX(2px) scale(0.95); }
	100% { transform:translateX(0) scale(1); }
}

@keyframes ledTransition {
	0% { 
		background-color:#ff4444;
		box-shadow:0 0 6px #ff4444;
	}
	50% { 
		background-color:#ffaa00;
		box-shadow:0 0 15px #ffaa00;
		transform:scale(1.5);
	}
	100% { 
		background-color:#00ff88;
		box-shadow:0 0 6px #00ff88;
		transform:scale(1);
	}
}

@keyframes ledTransitionBack {
	0% { 
		background-color:#00ff88;
		box-shadow:0 0 6px #00ff88;
	}
	50% { 
		background-color:#ffaa00;
		box-shadow:0 0 15px #ffaa00;
		transform:scale(1.5);
	}
	100% { 
		background-color:#ff4444;
		box-shadow:0 0 6px #ff4444;
		transform:scale(1);
	}
}

/* 主题切换开关的暗色主题适配 */
:root.theme-dark .theme-switch .switch-labels {
	color:#ccc;
}

:root.theme-dark .theme-switch:not(.dark) .switch-track {
	background-color:#444;
	border-color:#666;
}

:root.theme-dark .theme-switch:not(.dark) .switch-handle {
	background-color:#666;
}

:root.theme-dark .theme-switch:hover {
	filter:drop-shadow(0 0 15px rgba(0,255,136,0.3));
}

:root.theme-dark .theme-switch:focus-visible::after {
	background-color:#fff;
	color:#333;
}

/* 主题切换成功通知 */
.theme-notification {
	position:fixed;
	top:20px;
	right:20px;
	background-color:rgba(0,0,0,0.8);
	color:#fff;
	padding:12px 20px;
	border-radius:25px;
	font-size:0.9rem;
	font-weight:600;
	z-index:10000;
	opacity:0;
	transform:translateX(100px);
	transition:all 0.3s ease;
	backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,0.1);
}

.theme-notification.show {
	opacity:1;
	transform:translateX(0);
}

:root.theme-dark .theme-notification {
	background-color:rgba(255,255,255,0.9);
	color:#333;
	border:1px solid rgba(0,0,0,0.1);
}

/* 主题切换开关的响应式设计 */
@media (max-width:34.375rem) {
	.buttons-card {
		padding:1.5rem;
		margin-top:1.5rem;
	}
	
	.canvas-wrapper {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.canvas {
		height: 100px;
		padding: 10px;
	}
	
	.canvas_border {
		top: 10px;
		left: -10px;
	}
	
	.canvas_copy_title {
		font-size: 16px;
	}
	
	.canvas_copy_subtitle {
		font-size: 10px;
		top: 4px;
	}
	
	.canvas_copy_details {
		font-size: 10px;
	}
	
	.canvas_copy {
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	}
	
	.theme-switch-container {
		margin-top:1.5rem;
	}
	
	.switch-track {
		width:50px;
		height:26px;
	}
	
	.switch-handle {
		width:20px;
		height:20px;
		top:1px;
		left:1px;
	}
	
	.theme-switch.dark .switch-handle {
		transform:translateX(24px);
	}
	
	.switch-labels {
		width:90px;
		font-size:0.75rem;
	}
	
	.theme-notification {
		top:10px;
		right:10px;
		padding:8px 16px;
		font-size:0.8rem;
	}
	
	/* 小屏幕上的开关动画调整 */
	@keyframes switchBounce {
		0% { transform:translateX(0) scale(1); }
		20% { transform:translateX(6px) scale(1.05); }
		40% { transform:translateX(18px) scale(0.95); }
		60% { transform:translateX(26px) scale(1.05); }
		80% { transform:translateX(22px) scale(0.98); }
		100% { transform:translateX(24px) scale(1); }
	}
	
	@keyframes switchBounceBack {
		0% { transform:translateX(24px) scale(1); }
		20% { transform:translateX(18px) scale(1.05); }
		40% { transform:translateX(6px) scale(0.95); }
		60% { transform:translateX(-1px) scale(1.05); }
		80% { transform:translateX(1px) scale(0.98); }
		100% { transform:translateX(0) scale(1); }
	}
}

/* 全局主题切换过渡效果 */
body.theme-switching {
	position:relative;
	overflow:hidden;
}

/* 确保流光动画在主题切换时保持运行 */
body.theme-switching .profile-name h1::before {
	animation-play-state:running;
}

/* 动画重启辅助类 */

.profile-name h1.restart-animation::before {
	animation:none !important;
}

/* 强制重启名字流光动画 */
.profile-name h1.force-restart::before {
	animation:nameShine 3s linear infinite !important;
	animation-delay:0s !important;
	background-size:200% 200% !important;
	background-position:-200% -200% !important;
}

body.theme-switching::before {
	content:'';
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
	z-index:9999;
	animation:themeTransition 0.5s ease-in-out;
	pointer-events:none;
}

/* 主题切换器准备就绪状态 */
body.theme-switch-ready .theme-switch-container {
	animation:readyPulse 2s ease-in-out;
}

@keyframes readyPulse {
	0% { transform:scale(1); }
	50% { transform:scale(1.02); }
	100% { transform:scale(1); }
}

/* 主题切换开关的完成状态 */
.theme-switch.ready {
	filter:drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

@keyframes themeTransition {
	0% {
		opacity:0;
		transform:scale(0.8);
	}
	50% {
		opacity:1;
		transform:scale(1.2);
	}
	100% {
		opacity:0;
		transform:scale(1);
	}
}

/* Font Face Definitions
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:600;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:800;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg');
}