:root {
	--ink: #12171f;
	--k700: #3a4350;
	--k600: #4c5563;
	--k500: #5f6875;
	--k200: #e3e5e8;
	--k100: #eff0f2;
	--k50: #f7f7f8;
	--o500: #f0922b;
	--o700: #b45309;
	--o100: #fde6c8;
	--o50: #fff6ea;
	--i600: #4f46e5;
	--i700: #4338ca;
	--i50: #eef0ff;
	--gutter: clamp(16px, 4.2vw, 64px);
	--sans: 'Outfit', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	font-family: var(--sans);
	color: var(--ink);
	background: #fff;
	line-height: 1.5;
}
a {
	color: inherit;
	text-decoration: none;
}
button,
input {
	font: inherit;
	color: inherit;
}
button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
svg {
	flex: none;
	display: block;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: var(--gutter);
}
:focus-visible {
	outline: 2px solid var(--i600);
	outline-offset: 2px;
}

/* top bar */
.topbar {
	background: #fff;
	border-bottom: 1px solid var(--k100);
}
.topbar-in {
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 13px;
	line-height: 20px;
	color: var(--k700);
}
.promo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-width: 0;
}
.promo span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.promo a {
	margin-left: 4px;
	font-weight: 700;
	color: var(--o700);
	white-space: nowrap;
}
.toplinks {
	display: flex;
	align-items: center;
	gap: 20px;
	white-space: nowrap;
}
.lang {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--k700);
}
.sep {
	width: 1px;
	height: 12px;
	background: #d5d9de;
}
.login {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
}
/* main bar */
.mainbar-in {
	height: 84px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.logo {
	width: 273px;
	flex: none;
	font-weight: 600;
	font-size: 30px;
	line-height: 34px;
	letter-spacing: 0.01em;
	color: var(--o500);
}
.search {
	flex: 1 1 460px;
	max-width: 460px;
	min-width: 0;
	height: 50px;
	display: flex;
	align-items: center;
	border: 2px solid var(--o500);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	margin: 0;
}
.search-scope {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px 0 22px;
	background: var(--o50);
	font-size: 14px;
	font-weight: normal;
	white-space: nowrap;
}
.search-div {
	align-self: stretch;
	width: 1px;
	background: #face9b;
}
.search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 12px 0 16px;
	font-size: 14px;
}
.search:focus-within {
	box-shadow: 0 0 0 3px rgba(240, 146, 43, 0.22);
}
.search input:focus-visible {
	outline: 0;
}
.search-go {
	flex: none;
	width: 40px;
	height: 40px;
	margin-right: 3px;
	border-radius: 999px;
	background: var(--o500);
	display: flex;
	align-items: center;
	justify-content: center;
}
.search-go:hover {
	background: #f3a140;
}
.spacer {
	flex: 1 1 0;
}
.hotline {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hotline-ic {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--o50);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hotline-tx {
	display: flex;
	flex-direction: column;
}
.hotline-tx span {
	font-size: 12px;
	line-height: 16px;
	color: var(--k500);
}
.hotline-tx strong {
	white-space: nowrap;
	font-weight: normal;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0.02em;
}
.iconbtns {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 12px;
}
.iconbtns .hd-ic {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--k50);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.iconbtns .hd-ic:hover {
	background: var(--k100);
}
/* 积分余额：登录后显示数字，点了进钱包；没登录显示「积分」，进充值页 */
.hd-credits {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px 0 11px;
	border-radius: 999px;
	background: var(--o50);
	font-size: 14px;
	line-height: 1;
	color: var(--o700);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: background 0.2s;
}
.hd-credits:hover {
	background: var(--o100);
}
.hd-credits svg {
	flex: none;
}
.hd-credits-v {
	max-width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;
}
.badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 2px;
	border-radius: 999px;
	background: var(--o500);
	border: 2px solid #fff;
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	text-align: center;
}
/* nav */
.navbar {
	background: #fff;
	border-top: 1px solid var(--k100);
	border-bottom: 1px solid var(--k200);
	position: relative;
	z-index: 20;
}
.navbar-in {
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.navbar-in > nav {
	align-self: stretch;
}
.nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 40px;
	height: 100%;
}
.nav > li {
	position: relative;
	display: flex;
}
.nav-link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	font-size: 15px;
	line-height: 22px;
	font-weight: normal;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.nav-link:hover,
.has-menu:hover > .nav-link,
.has-menu:focus-within > .nav-link {
	border-bottom-color: var(--o500);
}
.is-active > .nav-link {
	border-bottom-color: var(--o500);
}
.pills {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: normal;
}
.pill {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--o50);
	font-size: 14px;
	font-weight: normal;
	color: var(--o700);
	white-space: nowrap;
}
.pill:hover {
	background: var(--o100);
}
.menu {
	position: absolute;
	top: 100%;
	left: -12px;
	width: min(300px, 92vw);
	display: none;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--k200);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(18, 23, 31, 0.12);
	z-index: 30;
}
.has-menu:hover > .menu,
.has-menu:focus-within > .menu {
	display: flex;
}
.menu-h {
	padding: 4px 12px 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--k500);
}
.mi {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 64px;
	padding: 0 12px;
	border-radius: 12px;
}
.mi:hover {
	background: var(--k50);
}
.mi-ic {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mi-ic.o {
	background: var(--o50);
}
.mi-ic.i {
	background: var(--i50);
}
.mi-tx {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mi-tx strong {
	font-size: 15px;
	line-height: 22px;
	font-weight: normal;
}
.mi-tx span {
	font-size: 13px;
	line-height: 18px;
	color: var(--k500);
}
.menu-f {
	margin-top: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
}
.menu-f.o {
	background: var(--o50);
	color: var(--o700);
}
.menu-f.i {
	background: var(--i50);
	color: var(--i700);
}

/* base helpers */
h1,
h2 {
	text-wrap: balance;
}
.copy,
.stage,
.ai,
.navbar-in > nav {
	min-width: 0;
}
/* hero */
.hero {
	position: relative;
	background: #fff;
	overflow: hidden;
	/* clip 只裁切、不形成滚动容器：hidden 时点「体验 AI 设计」（#ai 在 hero 里）会把 hero 自己滚上去，页面再也滚不回顶部 */
	overflow: clip;
}
.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
	grid-template-areas: 'copy stage' 'ai ai';
	padding-top: 40px;
	padding-bottom: 72px;
}
.copy {
	grid-area: copy;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	position: relative;
	z-index: 3;
	padding-bottom: 56px;
}
h1 {
	margin: 0;
	font-size: clamp(40px, 5.4vw, 58px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.03em;
}
h1 em {
	font-style: normal;
	background: linear-gradient(transparent 64%, var(--o100) 64%) no-repeat left bottom/0% 100%;
	padding: 0 4px;
	animation: hlgrow 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) 1s forwards;
}
.sub {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.6;
	color: var(--k500);
}
.cta {
	position: relative;
	overflow: hidden;
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 208px;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--o500);
	color: var(--ink);
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(240, 146, 43, 0.34);
	transition:
		transform 0.15s,
		background 0.15s;
}
.cta:hover {
	background: #f3a140;
	transform: translateY(-1px);
}
.copy .sub {
	max-width: 500px;
}
.cta-ai {
	background: #4f46e5;
	color: #fff;
	box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3);
}
.cta-ai:hover {
	background: #4338ca;
}
.copy h1 em {
	background-image: linear-gradient(transparent 64%, #e4e7ff 64%);
}
.qcard {
	grid-area: stage;
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 7%;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s backwards;
}
.qcard .cta {
	margin-top: 0;
	min-width: 0;
	height: 54px;
	padding: 0 26px;
	font-size: 17px;
	animation: qpulse 2.8s ease-out 2.4s infinite;
}
@keyframes qpulse {
	0% {
		box-shadow:
			0 10px 24px rgba(240, 146, 43, 0.34),
			0 0 0 0 rgba(240, 146, 43, 0.5);
	}
	70%,
	100% {
		box-shadow:
			0 10px 24px rgba(240, 146, 43, 0.34),
			0 0 0 16px rgba(240, 146, 43, 0);
	}
}
.cta-sm {
	min-width: 0;
	height: 48px;
	padding: 0 22px;
	font-size: 16px;
	margin-top: 0;
}
.cta-dark {
	margin-top: 0;
	background: var(--ink);
	color: #fff;
	box-shadow: 0 16px 34px rgba(18, 23, 31, 0.28);
}
.cta-dark:hover {
	background: #252c37;
}
.stage {
	grid-area: stage;
	position: relative;
	isolation: isolate;
	align-self: start;
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	margin-top: -40px;
}
.orb-wrap {
	position: absolute;
	z-index: -1;
	right: -24%;
	top: 54%;
	width: 136%;
	aspect-ratio: 1;
	transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
	pointer-events: none;
}
.orb {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid #f6b45e;
	animation: orbIn 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.orb::before {
	content: '';
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	border: 1.5px dashed rgba(240, 146, 43, 0.6);
	animation: spin360 120s linear infinite;
}
.orb::after {
	content: '';
	position: absolute;
	inset: -15%;
	border-radius: 50%;
	border: 1.5px solid rgba(240, 146, 43, 0.22);
}
.render {
	width: 100%;
	height: auto;
	display: block;
}
.gcode {
	position: absolute;
	left: 0;
	bottom: 7%;
	width: 250px;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--k200);
	box-shadow: 0 16px 40px rgba(18, 23, 31, 0.16);
}
.gcode-h {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.chip {
	height: 22px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--ink);
	color: #fff;
	font:
		700 12px/22px ui-monospace,
		'SF Mono',
		Menlo,
		Consolas,
		'Liberation Mono',
		monospace;
}
.file {
	font:
		12px/20px ui-monospace,
		'SF Mono',
		Menlo,
		Consolas,
		'Liberation Mono',
		monospace;
	color: var(--k500);
}
.code {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font:
		12px/18px ui-monospace,
		'SF Mono',
		Menlo,
		Consolas,
		'Liberation Mono',
		monospace;
	color: var(--k700);
}
.code div {
	padding: 2px 8px;
	border-radius: 6px;
	white-space: nowrap;
}
.code b {
	color: var(--o700);
}
.code .hl {
	background: linear-gradient(var(--o100), var(--o100)) no-repeat left/0% 100%;
	animation: hlgrow 0.7s ease 2.2s forwards;
}
.ai {
	grid-area: ai;
	position: relative;
	z-index: 4;
	margin-top: 8px;
	/* 锚点跳转时停在吸顶页头下方 */
	scroll-margin-top: calc(var(--hdr-offset, 88px) + 20px);
}
.ai-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 196px));
	gap: 16px;
}
.ai-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 8px 12px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--k200);
	box-shadow: 0 14px 32px rgba(18, 23, 31, 0.12);
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}
.ai-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(18, 23, 31, 0.16);
}
.ai-art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8f9fa, #f0f1f3);
	overflow: hidden;
}
.ai-art svg {
	width: 156px;
	height: 72px;
	max-width: 100%;
}
.ai-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px;
}
.ai-tx {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ai-tx strong {
	font-size: 14px;
	line-height: 22px;
	white-space: nowrap;
	font-weight: 500;
}
.ai-tx span {
	font-size: 12px;
	line-height: 16px;
	color: var(--k500);
	white-space: nowrap;
}
.ai-go {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--o50);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ticker */
.ticker {
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.ticker-track {
	display: flex;
	width: max-content;
	animation: marquee 36s linear infinite;
}
.ticker:hover .ticker-track {
	animation-play-state: paused;
}
.ticker-set {
	display: flex;
	align-items: center;
	flex: none;
}
.ticker-set span {
	font:
		600 clamp(28px, 3.4vw, 48px)/1 'Outfit',
		'Noto Sans SC',
		sans-serif;
	letter-spacing: -0.01em;
	white-space: nowrap;
	padding: clamp(22px, 2.6vw, 36px) 0;
}
.ticker-set span.t-ai {
	color: #c7ceff;
}
.ticker-set i {
	display: flex;
	padding: 0 clamp(22px, 2.6vw, 44px);
}

/* section heads */
.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 28px 48px;
	flex-wrap: wrap;
}
h2 {
	margin: 0;
	font-size: clamp(36px, 5.4vw, 50px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-align: left;
}
h2 em {
	font-style: normal;
	background: linear-gradient(transparent 64%, var(--o100) 64%);
	padding: 0 4px;
}
.sec-side {
	max-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 8px;
}
.sec-side p {
	margin: 0;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.6;
	color: var(--k500);
}

/* flow */
.flow {
	position: relative;
	background: #f4f1ec;
	padding: clamp(72px, 9vw, 136px) 0 clamp(64px, 7vw, 110px);
	overflow: hidden;
}
.steps-wrap {
	position: relative;
	margin-top: clamp(28px, 4vw, 64px);
}
.wave {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 36px);
}
.step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.step:nth-child(even) {
	margin-top: clamp(40px, 5vw, 84px);
}
.big {
	position: absolute;
	left: 0.57em;
	top: -0.2em;
	font:
		600 clamp(140px, 17vw, 120px)/1 'Outfit',
		sans-serif;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(18, 23, 31, 0.2);
	pointer-events: none;
	user-select: none;
	transform: translate3d(0, var(--py, 0px), 0);
}
.step:last-child .big {
	-webkit-text-stroke-color: var(--o500);
}
.step-art {
	position: relative;
	z-index: 1;
	margin-top: clamp(48px, 6.4vw, 100px);
	width: 100%;
}
.step-art svg {
	width: 100%;
	max-width: 260px;
	height: auto;
}
.step h3 {
	position: relative;
	z-index: 1;
	margin: 18px 0 0;
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.2;
	font-weight: 600;
}
.step p {
	position: relative;
	z-index: 1;
	margin: 8px 0 0;
	max-width: 240px;
	font-size: 16px;
	line-height: 26px;
	color: var(--k500);
}

/* why */
.why {
	background: #fff;
	padding-top: clamp(72px, 9vw, 136px);
	padding-bottom: clamp(56px, 7vw, 110px);
}
.why-row {
	display: flex;
	margin-top: clamp(36px, 5vw, 72px);
}
.why-panel {
	position: relative;
	flex: 1 1 0;
	min-height: clamp(480px, 42vw, 620px);
	padding: clamp(28px, 3vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	overflow: hidden;
	transition: flex 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.p1 {
	background: #f3f2ff;
	color: var(--ink);
}
.p2 {
	background: var(--ink);
	color: #fff;
}
.p3 {
	background: #f4f1ec;
	color: var(--ink);
}
.p4 {
	background: var(--o100);
	color: var(--ink);
}
.why-n {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: clamp(72px, 7vw, 104px);
	line-height: 0.95;
	letter-spacing: -0.05em;
	white-space: nowrap;
}
.p3 .why-n {
	font-size: clamp(58px, 5.7vw, 86px);
}
.why-n small {
	margin-left: 8px;
	font-size: clamp(20px, 1.8vw, 26px);
	letter-spacing: 0;
	font-weight: 600;
}
.p1 .why-n small {
	color: var(--ink);
}
.p2 .why-n small {
	color: var(--o300, #f6b45e);
}
.p3 .why-n small,
.p4 .why-n small {
	color: var(--o700);
}
.why-mid {
	flex: 1;
	display: flex;
	align-items: center;
}
.why-art {
	width: min(220px, 72%);
	height: auto;
}
.why-tx h3 {
	margin: 0;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.2;
	font-weight: 600;
}
.why-tx p {
	text-wrap: balance;
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 26px;
	max-width: 300px;
}
.p1 .why-tx p {
	color: rgba(18, 23, 31, 0.82);
}
.p2 .why-tx p {
	color: #b7bdc7;
}
.p3 .why-tx p {
	color: var(--k600);
}
.p4 .why-tx p {
	color: var(--k600);
}
.why-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chip-p,
.chip-m {
	height: 34px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.chip-p {
	background: #fff;
	color: var(--o700);
	border: 1px solid var(--o200, #face9b);
}
.chip-m {
	background: rgba(255, 255, 255, 0.62);
	color: var(--k700);
	font-weight: 500;
}

/* final */
.final {
	position: relative;
	background: var(--o500);
	color: var(--ink);
	overflow: hidden;
	padding: clamp(72px, 9vw, 140px) 0;
	min-height: clamp(520px, 44vw, 680px);
	display: flex;
	align-items: center;
}
.final-in {
	position: relative;
	z-index: 2;
}
.final h2 {
	font-size: clamp(40px, 6.4vw, 104px);
	line-height: 1.02;
	max-width: 9em;
}
.final h2 em {
	background: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.5) 62%);
	padding: 0 6px;
}
.final-act {
	margin-top: clamp(28px, 3.4vw, 52px);
	display: flex;
	align-items: center;
	gap: 16px 28px;
	flex-wrap: wrap;
}
.final-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: rgba(18, 23, 31, 0.85);
}
.final-note svg {
	stroke: #12171f;
}
.final-art {
	position: absolute;
	z-index: 1;
	right: -5vw;
	bottom: -12%;
	width: min(58vw, 860px);
	pointer-events: none;
}
.final-svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 34px 40px rgba(92, 42, 6, 0.38));
}
.final-svg .co {
	display: none;
}

/* responsive */
@media (min-width: 1101px) {
	.why-row:hover .why-panel {
		flex: 0.88;
	}
	.why-row .why-panel:hover {
		flex: 1.4;
	}
}
@media (max-width: 1200px) {
	.hotline,
	.pills {
		display: none;
	}
}
@media (max-width: 1100px) {
	/* nav row must scroll (rather than visually overflow) at this width once the compact header's
     mini-login/mini-cta are competing for the same row; mega-dropdowns are disabled to match,
     since they'd otherwise get clipped by the nav's own overflow */
	.navbar-in > nav {
		flex: 1;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.navbar-in > nav::-webkit-scrollbar {
		display: none;
	}
	.nav {
		gap: 28px;
		width: max-content;
	}
	.menu {
		display: none !important;
	}
	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'copy' 'stage' 'quote' 'ai';
		padding-top: 48px;
		padding-bottom: 56px;
	}
	.copy {
		padding-bottom: 0;
	}
	.stage {
		margin: 12px auto 0;
		max-width: 600px;
	}
	.orb-wrap {
		right: 8%;
		width: 84%;
		top: 48%;
	}
	.rwrap {
		overflow: hidden;
		margin-top: 8px;
	}
	.render {
		width: 120%;
		max-width: none;
		margin: -12% 0 0 -10%;
		aspect-ratio: 680/385;
		height: auto;
	}
	.gcode {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		align-self: flex-start;
		margin: 10px 0 0 8px;
		width: min(270px, 90%);
	}
	.qcard {
		grid-area: quote;
		position: static;
		justify-self: end;
		margin: 12px 8px 0 0;
	}
	.stage {
		display: flex;
		flex-direction: column;
	}
	.ai {
		margin-top: 28px;
	}
	.ai-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.wave {
		display: none;
	}
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
	.why-row {
		flex-wrap: wrap;
	}
	.why-panel {
		flex: 1 1 50%;
		min-height: 440px;
	}
	.final-art {
		right: -14vw;
		width: 72vw;
		bottom: -6%;
	}
}
@media (max-width: 860px) {
	.logo {
		width: auto;
	}
	.ai-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.mainbar-in {
		height: auto;
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 12px;
	}
	.logo {
		order: 1;
		flex: 1 1 auto;
		font-size: 26px;
	}
	.iconbtns {
		order: 2;
		margin-left: 0;
		gap: 8px;
	}
	.search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		height: 46px;
	}
	.spacer {
		display: none;
	}
	.promo span {
		display: none;
	}
	.promo a {
		margin-left: 0;
	}
	.hero-grid {
		grid-template-areas: 'stage' 'copy' 'quote' 'ai';
		padding-top: 16px;
		padding-bottom: 44px;
	}
	.stage {
		margin: 0 auto;
	}
	.rwrap {
		margin-top: 0;
	}
	.copy {
		margin-top: 24px;
		gap: 14px;
	}
	h1 {
		font-size: clamp(34px, 10vw, 48px);
	}
	.sub {
		font-size: 16px;
		line-height: 26px;
	}
	.copy .cta {
		width: 100%;
	}
	.gcode {
		display: none;
	}
	.qcard {
		justify-self: stretch;
		margin: 20px 0 0;
	}
	.qcard .cta {
		width: 100%;
	}
	.ai {
		margin-top: 36px;
	}
	.why-panel {
		flex: 1 1 100%;
		min-height: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 116px;
		grid-template-areas: 'n art' 'tx tx';
		align-items: start;
		gap: 14px 12px;
		padding: 28px 22px;
	}
	.why-n {
		grid-area: n;
	}
	.why-mid {
		grid-area: art;
		padding: 0;
		justify-content: flex-end;
	}
	.why-art {
		width: 116px;
	}
	.why-tx {
		grid-area: tx;
	}
	.p4 .why-mid {
		grid-area: auto;
		grid-column: 1/-1;
		order: 3;
	}
	.p4 {
		grid-template-areas: 'n n' 'tx tx' 'mid mid';
	}
	.p4 .why-mid {
		grid-area: mid;
	}
	.final {
		min-height: 0;
		padding-bottom: 0;
		flex-direction: column;
		align-items: stretch;
	}
	.final-art {
		position: relative;
		right: auto;
		bottom: auto;
		width: 118%;
		margin: 24px -9% 0 auto;
		left: auto;
	}
	.final .cta-dark {
		width: 100%;
	}
}
@media (max-width: 640px) {
	.flow {
		padding: 56px 0;
	}
	.steps {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.step:nth-child(even) {
		margin-top: 0;
	}
	.step {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 92px;
		grid-template-areas: 'num art' 'title art' 'desc art';
		align-items: center;
		column-gap: 16px;
		padding: 18px 0;
		border-top: 1px solid rgba(18, 23, 31, 0.12);
	}
	.step:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.big {
		position: static;
		grid-area: num;
		font-size: 40px;
		-webkit-text-stroke: 1.2px var(--ink);
		transform: none;
	}
	.step:last-child .big {
		-webkit-text-stroke-color: var(--o700);
	}
	.step-art {
		grid-area: art;
		margin: 0;
	}
	.step h3 {
		grid-area: title;
		margin: 2px 0 0;
		font-size: 20px;
	}
	.step p {
		grid-area: desc;
		margin: 4px 0 0;
		max-width: none;
		font-size: 14px;
		line-height: 22px;
	}
	.sec-side {
		padding-bottom: 0;
	}
}
@media (max-width: 560px) {
	.co {
		display: none;
	}
	.render {
		width: 124%;
		margin: -13% 0 0 -23%;
		aspect-ratio: 680/350;
	}
	.rwrap {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, #000 78%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, #000 78%, transparent);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
}
@media (max-width: 420px) {
	.toplinks a:not(.login),
	.toplinks .sep {
		display: none;
	}
	.ai-row {
		gap: 10px;
	}
	.ai-card {
		padding: 6px 6px 10px;
	}
	.ai-tx span {
		white-space: normal;
	}
	.ai-go {
		display: none;
	}
	.ai-meta {
		padding: 0 4px;
	}
}

/* motion */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes lineUp {
	from {
		transform: translateY(112%);
	}
	to {
		transform: none;
	}
}
@keyframes hlgrow {
	to {
		background-size: 100% 100%;
	}
}
@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(34px) scale(0.94);
		filter: blur(10px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}
@keyframes orbIn {
	from {
		opacity: 0;
		transform: scale(0.55);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes spin360 {
	to {
		transform: rotate(360deg);
	}
}
@keyframes floatA {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}
@keyframes floatB {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(7px);
	}
}
@keyframes sheen {
	0%,
	55% {
		transform: translateX(-130%);
	}
	100% {
		transform: translateX(130%);
	}
}
@keyframes typeIn {
	from {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes draw {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes spin {
	from {
		transform: rotate(-720deg);
	}
	to {
		transform: rotate(0);
	}
}
@keyframes ping {
	0% {
		opacity: 0.75;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(3.6);
	}
}
@keyframes rvIn {
	from {
		opacity: 0;
		transform: translateY(34px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes wipe {
	from {
		clip-path: inset(100% 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes wavein {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}
@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}
.ln {
	display: block;
	overflow: hidden;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}
.ln > span {
	display: block;
	animation: lineUp 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ln:nth-child(2) > span {
	animation-delay: 0.14s;
}
.sub {
	animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s backwards;
}
.copy .cta-ai {
	animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s backwards;
}
.cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
	transform: translateX(-130%);
	animation: sheen 4.6s ease-in-out 2.2s infinite;
	pointer-events: none;
}
.cta svg {
	transition: transform 0.2s;
}
.cta:hover svg {
	transform: translateX(4px);
}
.render {
	animation:
		heroIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s backwards,
		floatA 7s ease-in-out 1.5s infinite;
}
.co {
	animation: fadeIn 0.7s ease 1.1s backwards;
}
.gcode {
	animation:
		rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s backwards,
		floatB 8s ease-in-out 2s infinite;
}
.code div {
	animation: typeIn 0.55s ease-out calc(1.35s + var(--i, 0) * 0.22s) backwards;
}
.ai-card {
	animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.75s + var(--i, 0) * 0.1s) backwards;
}
.ai-art svg {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-card:hover .ai-art svg {
	transform: scale(1.08);
}
.ai-go {
	transition:
		transform 0.2s,
		background 0.2s;
}
.ai-card:hover .ai-go {
	transform: translateX(3px);
	background: var(--o100);
}
.js .rv:not(.in) {
	opacity: 0;
}
.js .rv.in {
	animation: rvIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) backwards;
}
.js .why-row:not(.in) .why-panel {
	clip-path: inset(100% 0 0 0);
}
.js .why-row.in .why-panel {
	animation: wipe 1s cubic-bezier(0.7, 0, 0.2, 1) var(--d, 0s) backwards;
}
.js .rvs:not(.in) .step > * {
	opacity: 0;
}
.js .rvs:not(.in) .wave {
	clip-path: inset(0 100% 0 0);
}
.js .rvs.in .wave {
	animation: wavein 1.8s cubic-bezier(0.4, 0.2, 0.2, 1) 0.2s backwards;
}
.js .rvs.in .step-art,
.js .rvs.in .step h3,
.js .rvs.in .step p {
	animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.2s + var(--i) * 0.28s) backwards;
}
.js .rvs.in .big {
	animation: fadeIn 1s ease calc(0.1s + var(--i) * 0.28s) backwards;
}
.step-art svg {
	animation: bob 6s ease-in-out infinite;
}
.step:nth-child(2) .step-art svg {
	animation-delay: -1.5s;
}
.step:nth-child(3) .step-art svg {
	animation-delay: -3s;
}
.step:nth-child(4) .step-art svg {
	animation-delay: -4.5s;
}
.why-art {
	animation: bob 6.5s ease-in-out infinite;
}
.p2 .why-art {
	animation-delay: -2s;
}
.p3 .why-art {
	animation-delay: -4s;
}
.arc,
.chk {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.js .why-row:not(.in) .arc,
.js .why-row:not(.in) .chk {
	stroke-dashoffset: 1;
}
.js .why-row:not(.in) .pop {
	opacity: 0;
}
.hand {
	transform-box: view-box;
	transform-origin: 100px 86px;
}
.pop,
.ping {
	transform-box: fill-box;
	transform-origin: center;
}
.ping {
	opacity: 0;
}
.why-row.in .arc {
	animation: draw 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) 0.8s backwards;
}
.why-row.in .hand {
	animation: spin 1.6s cubic-bezier(0.25, 0.7, 0.2, 1) 0.8s backwards;
}
.why-row.in .chk {
	animation: draw 0.55s ease-out 1.4s backwards;
}
.why-row.in .pop {
	animation: pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 1.25s backwards;
}
.why-row.in .ping {
	animation: ping 2.8s ease-out 1.5s infinite;
}
.why-row.in .ping.p2 {
	animation-delay: 2.9s;
}
.js .why-row:not(.in) .why-chips li {
	opacity: 0;
}
.why-row.in .why-chips li {
	animation: pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) calc(0.9s + var(--i) * 0.07s) backwards;
}

/* AI features */
.cta-white {
	background: #fff;
	color: #4f46e5;
	box-shadow: 0 14px 30px rgba(20, 16, 90, 0.32);
}
.cta-white:hover {
	background: #f3f2ff;
}
.aiz {
	position: relative;
	overflow: hidden;
	background: #4f46e5;
	color: #fff;
	padding: clamp(72px, 9vw, 140px) 0;
	min-height: clamp(480px, 40vw, 620px);
	display: flex;
	align-items: center;
}
.aiz-in {
	position: relative;
	z-index: 2;
}
.aiz h2 {
	font-size: clamp(40px, 6vw, 52px);
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.aiz h2 em {
	font-style: normal;
	background: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.22) 62%);
	padding: 0 6px;
}
.aiz-p {
	margin: clamp(18px, 2vw, 28px) 0 0;
	max-width: 28em;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.6;
	color: #dad7ff;
}
.aiz-act {
	margin-top: clamp(28px, 3.4vw, 48px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.aiz-act .cta {
	margin-top: 0;
}
.aiz-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.aiz-pill {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	transition:
		background 0.2s,
		color 0.2s;
}
.aiz-pill:hover {
	background: #fff;
	color: #4f46e5;
}
.aiz-deco {
	position: absolute;
	z-index: 1;
	right: 4vw;
	top: 50%;
	width: min(36vw, 520px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
}
.aiz-deco svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.aiz-deco .st1 {
	stroke-width: 0.1;
	opacity: 0.45;
	animation: spin360 90s linear infinite;
	transform-origin: 50% 50%;
}
.aiz-deco .st2 {
	inset: auto;
	left: 6%;
	bottom: 6%;
	width: 18%;
	height: 18%;
	opacity: 0.22;
	animation: floatB 7s ease-in-out infinite;
}
.aifx-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.aifx-tags li {
	height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #3730a3;
	background: #fff;
	border: 1px solid rgba(79, 70, 229, 0.2);
}
.aifx-link {
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: #4f46e5;
}
.aifx-link svg {
	transition: transform 0.2s;
}
.aifx-link:hover svg {
	transform: translateX(4px);
}
.aitab {
	background: #f3f2ff;
	padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 120px);
}
.aitab-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 32px);
	border-bottom: 1px solid rgba(79, 70, 229, 0.16);
}
.aitab-t {
	position: relative;
	text-align: left;
	padding: 8px 0 22px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--k500);
	display: grid;
	gap: 4px;
	transition: color 0.2s;
}
.aitab-t:hover {
	color: var(--ink);
}
.aitab-t:focus-visible {
	outline: 2px solid #4f46e5;
	outline-offset: 4px;
	border-radius: 6px;
}
.aitab-n {
	font:
		600 15px/1 'Outfit',
		sans-serif;
	letter-spacing: 0.04em;
	color: rgba(79, 70, 229, 0.6);
}
.aitab-name {
	font-size: clamp(18px, 2.2vw, 30px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.aitab-sub {
	font-size: 14px;
	color: var(--k500);
}
.aitab-t.on {
	color: var(--ink);
}
.aitab-t.on .aitab-n {
	color: #4f46e5;
}
.aitab-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: #4f46e5;
	transform: scaleX(0);
	transform-origin: left;
}
.aitab-t.on .aitab-bar {
	animation: tabfill 7s linear forwards;
}
.aitab.paused .aitab-t.on .aitab-bar,
.aitab.offscreen .aitab-t.on .aitab-bar {
	animation-play-state: paused;
}
@keyframes tabfill {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.aitab-panels {
	display: grid;
	margin-top: clamp(32px, 4vw, 64px);
}
.aitab-p {
	grid-area: 1/1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: center;
}
.aitab-p[hidden] {
	display: none;
}
.aitab-p.on .aitab-tx {
	animation: tabin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.aitab-p.on .aitab-art {
	animation: tabart 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s backwards;
}
@keyframes tabin {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes tabart {
	from {
		opacity: 0;
		transform: translateX(32px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.aitab-tx h3 {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.aitab-lead {
	margin: 14px 0 0;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 600;
	color: #4f46e5;
}
.aitab-tx p:not(.aitab-lead) {
	margin: 14px 0 0;
	max-width: 30em;
	font-size: 17px;
	line-height: 1.7;
	color: var(--k600);
}
.aitab-art {
	border-radius: 20px;
	padding: clamp(20px, 3vw, 48px);
	display: grid;
	place-items: center;
	min-height: clamp(240px, 28vw, 400px);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 50px rgba(79, 70, 229, 0.12);
}
.aitab-art svg {
	width: 130%;
	height: auto;
	max-width: none;
	flex: none;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aitab-art:hover svg {
	transform: scale(1.04) translateY(-4px);
}
@media (max-width: 860px) {
	.aiz {
		min-height: 0;
	}
	.aiz-deco {
		right: -24vw;
		width: 80vw;
		opacity: 0.6;
	}
	.aiz-act .cta {
		width: 100%;
	}
	.aitab-p {
		grid-template-columns: minmax(0, 1fr);
	}
	.aitab-art {
		min-height: 0;
	}
}
@media (max-width: 700px) {
	.aitab-list {
		display: flex;
		overflow-x: auto;
		gap: 22px;
		scrollbar-width: none;
		margin: 0 calc(var(--gutter) * -1);
		padding: 0 var(--gutter);
	}
	.aitab-list::-webkit-scrollbar {
		display: none;
	}
	.aitab-t {
		flex: 0 0 auto;
		padding-bottom: 16px;
	}
	.aitab-sub {
		display: none;
	}
	.aitab-name {
		font-size: 18px;
		white-space: nowrap;
	}
}

/* news */
.news {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: clamp(72px, 9vw, 136px) 0;
}
.news > .container {
	position: relative;
	z-index: 1;
}
.news-mark {
	position: absolute;
	right: 3vw;
	top: clamp(16px, 2.6vw, 40px);
	font:
		600 clamp(72px, 10vw, 148px)/0.9 'Outfit',
		sans-serif;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(18, 23, 31, 0.1);
	pointer-events: none;
	user-select: none;
}
.news-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.news h2 {
	font-size: clamp(36px, 5.4vw, 50px);
}
.news-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1.5px solid var(--ink);
	font-size: 16px;
	font-weight: 700;
	transition:
		background 0.2s,
		color 0.2s;
}
.news-all:hover {
	background: var(--ink);
	color: #fff;
}
.news-all:hover svg {
	stroke: #fff;
}
.nh-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.nh-hero {
	position: sticky;
	top: clamp(88px, 9vw, 120px);
}
.nh-hero {
	display: block;
	border-radius: 20px;
	background: var(--stage, #f4f1ec);
	overflow: hidden;
	transition:
		box-shadow 0.3s,
		transform 0.3s;
}
.nh-hero:hover {
	box-shadow: 0 24px 48px rgba(18, 23, 31, 0.14);
	transform: translateY(-4px);
}
.nh-cover {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	background: var(--o100);
	overflow: hidden;
}
.nh-cover svg {
	position: absolute;
	left: 6%;
	bottom: -16%;
	width: 100%;
	height: auto;
}
.nh-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(22px, 2.2vw, 30px);
}
.nh-top {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--k500);
}
.nh-hero h3 {
	margin: 0;
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.4;
	letter-spacing: -0.005em;
	font-weight: 600;
	transition: color 0.2s;
}
.nh-hero:hover h3 {
	color: var(--o700);
}
.nh-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nh-list li:last-child .nh-it {
	border-bottom: none;
}
.nh-it {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(14px, 1.8vw, 26px);
	margin: 0 calc(-1 * clamp(14px, 1.8vw, 20px));
	padding: clamp(18px, 2.1vw, 25px) clamp(14px, 1.8vw, 20px);
	border-bottom: 1px solid var(--k200);
	border-radius: 14px;
	transition:
		padding 0.25s,
		background 0.25s;
}
.nh-it:hover {
	padding-left: calc(clamp(14px, 1.8vw, 20px) + 8px);
	background: var(--stage, #f4f1ec);
}
.nh-it strong {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	font-weight: 600;
	min-width: 0;
	transition: color 0.2s;
}
.nh-it:hover strong {
	color: var(--o700);
}
.nh-it time {
	font-size: 14px;
	color: var(--k500);
	white-space: nowrap;
}
.nh-go {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #f1f2f4;
	transition:
		background 0.25s,
		transform 0.25s;
}
.nh-it:hover .nh-go {
	background: var(--o500);
	transform: translateX(4px);
}
.news-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}
.tag-o {
	background: #fff;
	color: var(--o700);
}
.tag-ai {
	background: #eef0ff;
	color: #4338ca;
}
.tag-k {
	background: #f1f2f4;
	color: var(--k700);
}
.nh-it .tag-o {
	background: var(--o100);
}
@media (max-width: 900px) {
	.nh-wrap {
		grid-template-columns: minmax(0, 1fr);
	}
	.nh-hero {
		position: static;
	}
}
@media (max-width: 560px) {
	.news-head {
		align-items: center;
	}
	.news-all {
		height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}
	.nh-it {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 10px;
	}
	.nh-it strong {
		flex: 1 1 100%;
		order: 1;
		font-size: 16px;
	}
	.nh-it .news-tag {
		order: 2;
	}
	.nh-it time {
		order: 3;
	}
	.nh-go {
		display: none;
	}
}
/* plan */
.plan {
	position: relative;
	background: var(--k50);
	padding: clamp(72px, 9vw, 136px) 0;
}
.plan-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(28px, 3vw, 40px);
}
.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2vw, 30px) clamp(22px, 1.8vw, 26px) 30px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--k200);
	box-shadow: 0 10px 26px rgba(18, 23, 31, 0.06);
}
.plan-card.on {
	border-color: var(--o500);
	box-shadow: 0 18px 40px rgba(240, 146, 43, 0.18);
}
.plan-badge {
	position: absolute;
	top: -13px;
	left: 24px;
	height: 26px;
	padding: 0 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	background: var(--o500);
	color: var(--ink);
}
.plan-card.best .plan-badge {
	background: var(--k100);
	color: var(--k700);
}
.plan-name {
	font-family: 'Outfit', sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.plan-tag {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--k500);
}
.plan-price {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin-top: 18px;
	font-family: 'Outfit', sans-serif;
}
.plan-cur {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	align-self: flex-start;
	margin-top: 5px;
}
.plan-num {
	font-size: clamp(32px, 2.8vw, 40px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
}
.plan-suf {
	font-size: 13px;
	color: var(--k500);
	margin-left: 4px;
}
.plan-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--k500);
}
.plan-cta {
	margin-top: 18px;
	width: 100%;
	height: 46px;
	font-size: 15px;
}
.plan-card:not(.on) .plan-cta {
	background: #fff;
	color: var(--ink);
	box-shadow: none;
	border: 1.5px solid var(--k200);
}
.plan-card:not(.on) .plan-cta:hover {
	background: var(--k50);
	border-color: var(--k500);
	transform: none;
}
.plan-div {
	border: 0;
	border-top: 1px solid var(--k200);
	margin: 22px 0;
}
.plan-head-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.plan-head-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink);
}
.plan-head-list svg {
	flex: none;
	margin-top: 2px;
}
.plan-head-list li.plan-perk {
	color: var(--o700);
	font-size: 13px;
}
.plan-nest {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0 24px;
	font-size: 12px;
	line-height: 18px;
	color: var(--k500);
}
.plan-hint {
	display: none;
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--k500);
	text-align: center;
}
@media (max-width: 1000px) {
	.plan-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.plan-row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 14px;
		margin: 24px calc(var(--gutter) * -1) 0;
		padding: 2px var(--gutter) 4px;
	}
	.plan-row::-webkit-scrollbar {
		display: none;
	}
	.plan-card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	.plan-hint {
		display: block;
	}
}
/* footer */
.fcta {
	position: relative;
	overflow: hidden;
	background: var(--o500);
	color: var(--ink);
	padding: clamp(44px, 5.6vw, 72px) 0;
}
.fcta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(18, 23, 31, 0.08) 1.6px, transparent 1.6px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(115deg, #000 0%, #000 45%, transparent 82%);
	mask-image: linear-gradient(115deg, #000 0%, #000 45%, transparent 82%);
	pointer-events: none;
}
.fcta-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	flex-wrap: wrap;
}
.fcta h2 {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.15;
	max-width: 18em;
}
.fcta-copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
.fcta-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}
.fcta-points li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: rgba(18, 23, 31, 0.82);
	white-space: nowrap;
}
.fcta-points svg {
	flex: none;
}
.fcta-act {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex: none;
}
.fcta-act .cta {
	margin-top: 0;
}
.fcta-note {
	font-size: 13px;
	font-weight: 600;
	color: rgba(18, 23, 31, 0.62);
}
.br-m {
	display: none;
}
.foot {
	position: relative;
	overflow: hidden;
	background: var(--k50);
	color: #222;
	padding-top: clamp(56px, 6vw, 96px);
}
.foot-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(32px, 6vw, 96px);
	margin-bottom: 32px;
}
.foot-logo {
	display: inline-block;
	font:
		600 30px/34px 'Outfit',
		sans-serif;
	letter-spacing: 0.01em;
	color: var(--o500);
}
.foot-brand p {
	margin: 16px 0 0;
	max-width: 22em;
	font-size: 15px;
	line-height: 1.7;
}
.foot-tel {
	margin-top: 24px;
	display: grid;
	gap: 4px;
}
.foot-tel span {
	font-size: 13px;
	color: #222;
}
.foot-tel strong {
	font:
		600 clamp(24px, 2.4vw, 32px)/1.2 'Outfit',
		sans-serif;
	color: #121212;
	letter-spacing: 0.02em;
}
.foot-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.foot-col h4 {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 600;
	color: #121212;
}
.foot-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.foot-col a {
	font-size: 15px;
	color: #343434;
	transition: color 0.2s;
}
.foot-col a:hover {
	color: var(--o400, #f6b45e);
}
.foot-bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	padding: 32px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: #656565;
}
.foot-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.foot-legal a:hover {
	color: var(--o500);
}
@media (max-width: 900px) {
	.foot-top {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 560px) {
	.fcta-in {
		flex-direction: column;
		align-items: stretch;
	}
	.fcta-act {
		align-items: stretch;
	}
	.fcta .cta {
		width: 100%;
	}
	.fcta-note {
		text-align: center;
	}
	.br-m {
		display: inline;
	}
	.foot-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
	.foot-bottom {
		flex-direction: column;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	h1 em,
	.code .hl {
		background-size: 100% 100%;
	}
	.arc,
	.chk {
		stroke-dashoffset: 0 !important;
	}
	.ping {
		display: none;
	}
	.ticker-track {
		width: auto;
		flex-wrap: wrap;
	}
}

/* sticky header morph — collapses to a single row: mini logo + nav + CTA */
html {
	overflow-anchor: none;
}
#hdr-top {
	display: block;
	height: 0;
}
header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	transition: box-shadow 0.3s;
}
header.compact {
	box-shadow: 0 8px 20px rgba(18, 23, 31, 0.1);
}
.topbar {
	max-height: 36px;
	overflow: hidden;
	transition:
		max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.25s,
		border-color 0.25s;
}
header.compact .topbar {
	max-height: 0;
	opacity: 0;
	border-bottom-color: transparent;
}
.mainbar-in {
	overflow: hidden;
	transition:
		height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		padding 0.3s;
}
header.compact .mainbar-in {
	height: 0;
	padding-block: 0;
}

.logo-mini {
	display: flex;
	align-items: center;
	flex: none;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--o500);
	white-space: nowrap;
	transition:
		max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
		opacity 0.25s 0.05s,
		margin 0.3s 0.05s;
}
header.compact .logo-mini {
	max-width: 220px;
	opacity: 1;
	margin-right: 24px;
}
.pills {
	transition:
		opacity 0.2s,
		max-width 0.25s,
		margin 0.25s;
}
header.compact .pills {
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	margin: 0;
	pointer-events: none;
}
/* compact row: a lightweight login link keeps account access once the full topbar collapses away,
   and fills the space that made the row feel bare with just the CTA at the far right */
.navbar-in .mini-login {
	align-self: center;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 14px;
	color: var(--ink);
	white-space: nowrap;
	pointer-events: none;
	transition:
		max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
		opacity 0.25s 0.05s,
		margin 0.3s 0.05s;
}
header.compact .navbar-in .mini-login {
	max-width: 120px;
	opacity: 1;
	margin-right: 20px;
	pointer-events: auto;
}
.navbar-in .mini-cta {
	align-self: center;
	margin-top: 0;
	flex: none;
	min-width: 0;
	height: 36px;
	max-width: 0;
	padding: 0;
	font-size: 14px;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	transition:
		max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
		opacity 0.25s 0.05s,
		padding 0.3s 0.05s;
}
header.compact .navbar-in .mini-cta {
	max-width: 180px;
	padding: 0 20px;
	opacity: 1;
	pointer-events: auto;
}

.mnav-toggle {
	display: none;
}
.mnav-panel {
	display: none;
}

/* language switcher dropdown — shared by the desktop topbar and the mobile menu panel.
   position:fixed (with top/right set by JS on open) so it can escape .topbar's overflow:hidden
   (needed for the sticky-header collapse animation) and the mobile panel's overflow-y:auto. */
.lang-wrap {
	position: relative;
}
.lang-chev svg {
	transition: transform 0.2s;
}
.lang-wrap.open .lang-chev svg {
	transform: rotate(180deg);
}
.lang-menu {
	position: fixed;
	top: 0;
	right: 16px;
	left: auto;
	min-width: 164px;
	display: none;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--k200);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(18, 23, 31, 0.14);
	z-index: 80;
}
.lang-wrap.open .lang-menu {
	display: flex;
}
/* small pointer connecting the menu back to the button that opened it; JS sets its `right`
   offset on open so it lines up under that button's horizontal center */
.lang-menu-arrow {
	position: absolute;
	top: -6px;
	right: 20px;
	width: 11px;
	height: 11px;
	background: #fff;
	border-left: 1px solid var(--k200);
	border-top: 1px solid var(--k200);
	border-radius: 2px 0 0 0;
	transform: rotate(45deg);
}
/* section labels split the menu into 语言 (in-page, JS-driven) and 货币 (real links — picking one navigates) */
.lang-menu-h {
	padding: 8px 10px 4px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.06em;
	color: var(--k500);
}
.lang-menu-h:first-child {
	padding-top: 4px;
}
.lang-menu-h:not(:first-child) {
	margin-top: 4px;
}
.lang-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--k700);
	text-align: left;
	white-space: nowrap;
}
.lang-opt:hover {
	background: var(--k100);
}
.lang-opt.on {
	color: var(--ink);
}
.lang-check {
	display: flex;
	flex: none;
	opacity: 0;
}
.lang-opt.on .lang-check {
	opacity: 1;
}
/* currency: shown as current-value + a "修改" link to a dedicated settings page, not an inline picklist */
.lang-cur-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 36px;
	padding: 0 10px;
}
.lang-cur-tx {
	font-size: 13px;
	color: var(--ink);
	white-space: nowrap;
}
.lang-cur-edit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--o700);
	white-space: nowrap;
}
.lang-cur-edit:hover {
	text-decoration: underline;
}
@media (max-width: 700px) {
	/* mobile: header is always the simplified logo + hamburger row, scrolled or not */
	header .topbar {
		max-height: 0;
		opacity: 0;
		border-bottom-color: transparent;
	}
	header .mainbar-in {
		height: 0;
		padding-block: 0;
	}
	header .logo-mini {
		max-width: 220px;
		opacity: 1;
		margin-right: auto;
		font-size: 19px;
	}
	header .navbar-in > nav {
		display: none;
	}
	header .navbar-in .mini-cta {
		display: none;
	}
	header .navbar-in .mini-login {
		display: none;
	}
	header .mnav-toggle {
		display: flex;
		position: relative;
		flex: none;
		width: 38px;
		height: 38px;
		border-radius: 999px;
		background: var(--stage, #f4f1ec);
		align-items: center;
		justify-content: center;
	}
	.mnav-ic {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition:
			opacity 0.2s,
			transform 0.2s;
	}
	.mnav-ic-close {
		opacity: 0;
		transform: rotate(-90deg) scale(0.6);
	}
	header.mnav-open .mnav-ic-open {
		opacity: 0;
		transform: rotate(90deg) scale(0.6);
	}
	header.mnav-open .mnav-ic-close {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
	header .mnav-panel {
		display: flex;
		position: absolute;
		z-index: 25;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		padding: 6px 20px 20px;
		margin: 0;
		background: #fff;
		border-bottom: 1px solid var(--k200);
		box-shadow: 0 20px 40px rgba(18, 23, 31, 0.14);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transition:
			max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
			opacity 0.25s;
	}
	header.mnav-open .mnav-panel {
		max-height: min(78vh, 640px);
		opacity: 1;
		pointer-events: auto;
		overflow-y: auto;
	}
	.mnav-link {
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: 600;
		color: var(--ink);
		border-bottom: 1px solid var(--k100);
	}
	.mnav-cta {
		margin: 16px 0 0;
		width: 100%;
		flex: none;
	}
	/* account row: login/register + language, so mobile doesn't lose the old topbar's access */
	.mnav-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: 52px;
		border-bottom: 1px solid var(--k100);
		margin-bottom: 2px;
	}
	.mnav-login {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		color: var(--ink);
	}
	.mnav-lang {
		display: flex;
		align-items: center;
		gap: 4px;
		background: none;
		border: none;
		padding: 0;
		font: inherit;
		font-size: 13px;
		color: var(--k500);
	}
	/* accordion for items that have a desktop mega-menu (在线报价 / AI 设计) */
	.mnav-acc {
		border-bottom: 1px solid var(--k100);
	}
	.mnav-acc-t {
		width: 100%;
		background: none;
		border: none;
		padding: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		justify-content: space-between;
		border-bottom: none;
	}
	.mnav-acc-l {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.mnav-acc-t svg {
		flex: none;
		transition: transform 0.25s;
	}
	.mnav-acc.open .mnav-acc-t svg {
		transform: rotate(180deg);
	}
	.mnav-sub-wrap {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.mnav-acc.open .mnav-sub-wrap {
		max-height: 320px;
	}
	.mnav-sub {
		display: flex;
		align-items: center;
		height: 42px;
		padding-left: 4px;
		font-size: 14px;
		font-weight: 500;
		color: var(--k600);
	}
	.mnav-sub:not(:last-child) {
		border-bottom: 1px dashed var(--k100);
	}
}
@media (prefers-reduced-motion: reduce) {
	header,
	.topbar,
	.mainbar-in,
	.logo-mini,
	.pills,
	.navbar-in .mini-cta,
	.mnav-ic,
	.mnav-panel {
		transition: none;
	}
}

/* ---- 页头搜索浮层（assets/js/search.js）：挂在 body 上、fixed 定位，避开 .mainbar-in 的 overflow:hidden ---- */
.search-scope-t {
	max-width: 7em;
	overflow: hidden;
	text-overflow: ellipsis;
}
.search-scope[aria-expanded='true'] svg {
	transform: rotate(180deg);
}
.search-scope svg {
	transition: transform 0.2s;
}
.sx-panel,
.sx-menu {
	position: fixed;
	z-index: 70;
	background: #fff;
	border: 1px solid var(--k200);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(18, 23, 31, 0.12);
}
.sx-panel {
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
}
.sx-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	min-width: 160px;
}
.sx-panel[hidden],
.sx-menu[hidden] {
	display: none;
}
.sx-opt {
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 14px;
	text-align: left;
	color: var(--k700);
}
.sx-opt:hover,
.sx-opt:focus-visible {
	background: var(--k50);
	outline: 0;
}
.sx-opt[aria-selected='true'] {
	background: var(--o50);
	color: var(--o700);
}
.sx-group + .sx-group {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--k100);
}
.sx-group-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px 4px;
	font-size: 12px;
	color: var(--k500);
}
.sx-count {
	color: #8a929e;
}
.sx-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--ink);
	text-decoration: none;
}
.sx-item.on {
	background: var(--o50);
}
.sx-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.sx-title {
	font-size: 14px;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sx-title mark {
	background: none;
	color: var(--o700);
	font-weight: 500;
}
.sx-desc {
	font-size: 12px;
	line-height: 1.5;
	color: #8a929e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sx-badge {
	flex: none;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--k100);
	font-size: 11px;
	color: var(--k500);
}
.sx-note {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 12px;
	font-size: 13px;
	color: var(--k500);
}
.sx-spin {
	width: 12px;
	height: 12px;
	border: 2px solid var(--o500);
	border-right-color: transparent;
	border-radius: 50%;
	animation: sx-spin 0.8s linear infinite;
}
@keyframes sx-spin {
	to {
		transform: rotate(360deg);
	}
}
.sx-empty {
	padding: 20px 12px 16px;
	text-align: center;
}
.sx-empty-t {
	margin: 0;
	font-size: 14px;
	color: var(--ink);
	word-break: break-all;
}
.sx-empty-d {
	margin: 6px 0 14px;
	font-size: 12px;
	color: #8a929e;
}
.sx-cta {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--o500);
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}
.sx-cta:hover {
	background: #f3a140;
}
.sx-keys {
	margin-top: 4px;
	padding: 8px 12px 4px;
	border-top: 1px solid var(--k100);
	font-size: 11px;
	color: #a3aab5;
}
@media (prefers-reduced-motion: reduce) {
	.sx-spin {
		animation: none;
	}
}