:root {
			--night: #0B1C2C;
			--brand: #164A78;
			--deep: #0F3354;
			--line: #24516F;
			--paper: #F4F1E9;
			--accent: #4DA3FF;
			--text: #E9EFF6;
			--muted: #9DB2C6;
			--radius: 4px;
			--header-h: 72px;
			--ff-title: "Lalezar", "Vazirmatn", sans-serif;
			--ff-body: "Vazirmatn", sans-serif;
		}

		[data-theme="day"] {
			--night: #E9EEF4;
			--brand: #164A78;
			--deep: #FFFFFF;
			--line: #C6D4E2;
			--text: #10243A;
			--muted: #4E657D;
		}

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html {
			scroll-behavior: smooth;
			scroll-padding-top: calc(var(--header-h) + 18px);
		}

		body {
			font-family: var(--ff-body);
			background: var(--night);
			color: var(--text);
			line-height: 1.9;
			overflow-x: hidden;
			max-width: 100vw;
			-webkit-font-smoothing: antialiased;
			transition: background .35s, color .35s;
			position: relative;
		}

		body::before {
			content: "";
			position: fixed;
			inset: 0;
			z-index: -1;
			background:
				radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
				repeating-linear-gradient(0deg, color-mix(in srgb, var(--line) 14%, transparent) 0 1px, transparent 1px 44px),
				repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 14%, transparent) 0 1px, transparent 1px 44px);
			mask-image: linear-gradient(#000 0 30%, transparent 75%);
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		code,
		pre {
			font-family: "Vazirmatn", monospace;
			direction: ltr;
		}

		h1,
		h2.disp {
			font-family: var(--ff-title);
			font-weight: 400;
		}

		h2 {
			font-size: clamp(1.25rem, 2.6vw, 1.55rem);
			font-weight: 800;
			letter-spacing: -.3px;
		}

		h3 {
			font-size: 1rem;
			font-weight: 800;
		}

		header.top {
			position: sticky;
			top: 0;
			z-index: 50;
			height: var(--header-h);
			background: color-mix(in srgb, var(--night) 86%, transparent);
			backdrop-filter: blur(12px);
			border-bottom: 1px solid var(--line);
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 0 clamp(14px, 4vw, 40px);
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 11px;
			font-weight: 800;
			font-size: 1.12rem;
			min-width: 0;
		}

		.brand img {
			width: 36px;
			height: 36px;
			border-radius: 8px;
			flex: none;
		}

		.brand small {
			display: block;
			font-weight: 500;
			font-size: .68rem;
			color: var(--muted);
			letter-spacing: .4px;
			direction: ltr;
			text-align: right;
		}

		.top .spacer {
			flex: 1;
		}

		.ver {
			font-size: .74rem;
			border: 1px solid var(--line);
			color: var(--muted);
			padding: 4px 10px;
			border-radius: 2px;
			font-weight: 700;
			white-space: nowrap;
		}

		.ver::before {
			content: "\f3cd";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			margin-inline-end: 5px;
			color: var(--brand);
		}

		.tgl {
			border: 1px solid var(--line);
			background: var(--deep);
			color: var(--text);
			width: 38px;
			height: 38px;
			border-radius: 2px;
			cursor: pointer;
			font-size: .95rem;
			display: grid;
			place-items: center;
			transition: .2s;
			flex: none;
		}

		.tgl:hover {
			border-color: var(--brand);
		}

		.menu-btn {
			display: none;
			border: 1px solid var(--line);
			background: var(--deep);
			color: var(--text);
			width: 38px;
			height: 38px;
			border-radius: 2px;
			cursor: pointer;
			place-items: center;
			flex: none;
		}

		.scrim {
			position: fixed;
			inset: 0;
			background: rgba(4, 10, 18, .6);
			z-index: 45;
			opacity: 0;
			visibility: hidden;
			transition: .3s;
		}

		.scrim.show {
			opacity: 1;
			visibility: visible;
		}

		.hero {
			max-width: 1280px;
			margin: 0 auto;
			padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 64px);
			display: grid;
			grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
			gap: clamp(24px, 4vw, 48px);
			align-items: center;
		}

		.kicker {
			display: inline-block;
			font-size: .74rem;
			font-weight: 800;
			letter-spacing: 1px;
			color: var(--muted);
			border: 1px solid var(--line);
			border-inline-start: 3px solid var(--brand);
			padding: 5px 14px;
			border-radius: 2px;
			margin-bottom: 18px;
		}

		.hero h1 {
			font-size: clamp(2rem, 5.4vw, 3.6rem);
			line-height: 1.45;
			letter-spacing: 0;
		}

		.hero h1 .l2 {
			display: block;
			font-size: clamp(1.15rem, 2.6vw, 1.7rem);
			color: var(--muted);
		}

		.hero .lede {
			color: var(--muted);
			margin-top: 18px;
			font-size: clamp(.95rem, 1.6vw, 1.05rem);
			max-width: 46ch;
		}

		.hero .cta {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
			margin-top: 26px;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			padding: 11px 22px;
			border-radius: 2px;
			font-weight: 700;
			font-size: .93rem;
			transition: .2s;
			border: 1px solid var(--line);
			background: transparent;
			color: var(--text);
		}

		.btn:hover {
			border-color: var(--brand);
			background: color-mix(in srgb, var(--brand) 16%, transparent);
		}

		.btn--buy {
			background: #8BD253;
			border-color: #8BD253;
			color: #10290B;
			box-shadow: 4px 4px 0 #00000040;
		}

		.btn--buy:hover {
			background: #9bdf67;
			border-color: #9bdf67;
			transform: translate(-1px, -1px);
		}

		.hero-visual {
			min-width: 0;
		}

		.pv-frame {
			--pv-bg: linear-gradient(150deg, #123C2A, #3E7A52);
			--pv-card: #FFFFFF;
			--pv-card-text: #23303B;
			--pv-btn-bg: #2F6B3F;
			--pv-btn-tx: #fff;
			--pv-radius: 4px;
			--pv-side-tx: #EAF4EC;
			border: 1px solid var(--line);
			border-radius: 10px 10px 4px 4px;
			background: var(--deep);
			overflow: hidden;
			box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
		}

		.pv-frame[data-pv="1"] {
			--pv-bg: linear-gradient(150deg, #0B3D63, #2A9DD6);
			--pv-card: #FFFFFF;
			--pv-card-text: #1D3247;
			--pv-btn-bg: #0B3D63;
			--pv-btn-tx: #fff;
			--pv-radius: 10px;
			--pv-side-tx: #E8F0FA;
		}

		.pv-frame[data-pv="2"] {
			--pv-bg: linear-gradient(150deg, #B3402A, #FFB26B);
			--pv-card: #FFF7EF;
			--pv-card-text: #33231C;
			--pv-btn-bg: #B3402A;
			--pv-btn-tx: #fff;
			--pv-radius: 6px;
			--pv-side-tx: #FDEBD9;
		}

		.pv-frame[data-pv="3"] {
			--pv-bg: linear-gradient(150deg, #0E1230, #3A49C4);
			--pv-card: #10152F;
			--pv-card-text: #DCE2F7;
			--pv-btn-bg: #4A5AE0;
			--pv-btn-tx: #fff;
			--pv-radius: 2px;
			--pv-side-tx: #B9C3E8;
		}

		.pv-frame[data-pv="4"] {
			--pv-bg: linear-gradient(150deg, #EFE9DD, #C9BFA8);
			--pv-card: #FFFDF8;
			--pv-card-text: #3A3529;
			--pv-btn-bg: #8A7A55;
			--pv-btn-tx: #fff;
			--pv-radius: 3px;
			--pv-side-tx: #4A4436;
		}

		.pv-frame[data-pv="5"] {
			--pv-bg: linear-gradient(150deg, #2A1A4A, #8B5CF6);
			--pv-card: #FFFFFF;
			--pv-card-text: #2A2140;
			--pv-btn-bg: #6D3FD4;
			--pv-btn-tx: #fff;
			--pv-radius: 16px;
			--pv-side-tx: #EDE4FC;
		}

		.pv-frame[data-pv="6"] {
			--pv-bg: linear-gradient(150deg, #0D281F, #2F7D5B);
			--pv-card: #F2F7F0;
			--pv-card-text: #22301F;
			--pv-btn-bg: #2F7D5B;
			--pv-btn-tx: #fff;
			--pv-radius: 5px;
			--pv-side-tx: #D8EBDD;
		}

		.pv-frame[data-pv="7"] {
			--pv-bg: linear-gradient(150deg, #1F2937, #025BFC);
			--pv-card: #FFFFFF;
			--pv-card-text: #1F2937;
			--pv-btn-bg: #025BFC;
			--pv-btn-tx: #fff;
			--pv-radius: 2px;
			--pv-side-tx: #DCE3F2;
		}

		.pv-frame[data-pv="8"] {
			--pv-bg: linear-gradient(150deg, #8A2B5B, #F7A8C4);
			--pv-card: #FFF5F9;
			--pv-card-text: #3A2130;
			--pv-btn-bg: #C04A80;
			--pv-btn-tx: #fff;
			--pv-radius: 12px;
			--pv-side-tx: #FBE3EE;
		}

		.pv-frame[data-pv="9"] {
			--pv-bg: linear-gradient(150deg, #5A150F, #FF6B35);
			--pv-card: #FFF2EC;
			--pv-card-text: #38130C;
			--pv-btn-bg: #D84A1F;
			--pv-btn-tx: #fff;
			--pv-radius: 4px;
			--pv-side-tx: #FFE0CF;
		}

		.pv-frame[data-pv="10"] {
			--pv-bg: linear-gradient(150deg, #025BFC, #5B95FD);
			--pv-card: #FFFFFF;
			--pv-card-text: #14224A;
			--pv-btn-bg: #025BFC;
			--pv-btn-tx: #fff;
			--pv-radius: 8px;
			--pv-side-tx: #DDE9FF;
		}

		.pv-bar {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 10px 14px;
			border-bottom: 1px solid var(--line);
			background: color-mix(in srgb, var(--night) 60%, var(--deep));
		}

		.pv-bar .dots {
			display: flex;
			gap: 6px;
		}

		.pv-bar .dots i {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: var(--line);
		}

		.pv-bar .dots i:first-child {
			background: #C75450;
		}

		.pv-url {
			font-size: .72rem;
			color: var(--muted);
			direction: ltr;
			font-family: var(--ff-body);
		}

		.pv-body {
			display: grid;
			grid-template-columns: 1fr 1fr;
			min-height: 320px;
			transition: background .7s;
			background: var(--pv-bg);
		}

		.pv-side {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 6px;
			padding: 26px 30px;
			color: var(--pv-side-tx);
			transition: color .7s;
		}

		.pv-side .pv-logo {
			width: 44px;
			height: 44px;
			border-radius: var(--pv-radius);
			background: #FFFFFF2E;
			display: grid;
			place-items: center;
			font-weight: 800;
			font-size: 1.3rem;
			margin-bottom: 10px;
			transition: border-radius .7s;
		}

		.pv-side b {
			font-size: 1.05rem;
		}

		.pv-side span {
			font-size: .74rem;
			opacity: .75;
		}

		.pv-form {
			background: var(--pv-card);
			color: var(--pv-card-text);
			margin: clamp(18px, 4%, 40px);
			padding: 26px 24px;
			border-radius: var(--pv-radius);
			display: flex;
			flex-direction: column;
			gap: 12px;
			justify-content: center;
			transition: background .7s, color .7s, border-radius .7s;
			box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
		}

		.pv-form .f-title {
			font-size: .8rem;
			font-weight: 800;
			opacity: .65;
		}

		.pv-form .f-field {
			font-size: .78rem;
			opacity: .8;
		}

		.pv-form .f-input {
			height: 34px;
			border: 1px solid #00000022;
			border-radius: calc(var(--pv-radius) * .5);
			background: #00000008;
		}

		.pv-form .f-btn {
			align-self: stretch;
			text-align: center;
			margin-top: 6px;
			padding: 9px 0;
			background: var(--pv-btn-bg);
			color: var(--pv-btn-tx);
			font-weight: 800;
			font-size: .85rem;
			border-radius: calc(var(--pv-radius) * .5);
			transition: background .7s;
		}

		.pv-form .f-lost {
			font-size: .72rem;
			opacity: .6;
			text-align: center;
		}

		@keyframes pvfade {
			from {
				opacity: 0;
				transform: translateY(6px);
			}

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

		.pv-body {
			animation: pvfade .55s ease;
		}

		.pv-admin {
			display: none;
			grid-template-columns: 82px 1fr;
			min-height: 320px;
			background: var(--pv-bg);
			overflow: hidden;
			transition: background .7s;
			animation: pvfade .55s ease;
		}

		.pv-frame.is-admin .pv-body {
			display: none;
		}

		.pv-frame.is-admin .pv-admin {
			display: grid;
		}

		.pa-side {
			background: rgba(3, 7, 14, .5);
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 14px 11px;
		}

		.pa-side .pa-logo {
			width: 32px;
			height: 32px;
			border-radius: calc(var(--pv-radius) * .6);
			background: var(--pv-btn-bg);
			color: var(--pv-btn-tx);
			display: grid;
			place-items: center;
			font-weight: 800;
			font-size: .95rem;
			margin-bottom: 6px;
			transition: background .7s;
		}

		.pa-side i {
			display: block;
			height: 8px;
			border-radius: 2px;
			background: #FFFFFF2E;
		}

		.pa-side i.on {
			background: #FFFFFF6E;
			width: 85%;
		}

		.pa-side i:nth-of-type(3) {
			width: 70%;
		}

		.pa-side i:nth-of-type(5) {
			width: 60%;
		}

		.pa-side i:nth-of-type(7) {
			width: 75%;
		}

		.pa-main {
			display: flex;
			flex-direction: column;
			min-width: 0;
		}

		.pa-bar {
			height: 26px;
			background: #0A0F18;
			display: flex;
			align-items: center;
			gap: 9px;
			padding: 0 12px;
		}

		.pa-bar b {
			width: 30px;
			height: 8px;
			border-radius: 2px;
			background: var(--pv-btn-bg);
			transition: background .7s;
		}

		.pa-bar i {
			display: block;
			height: 6px;
			width: 34px;
			border-radius: 2px;
			background: #FFFFFF2A;
		}

		.pa-bar i:last-child {
			margin-inline-start: auto;
			width: 20px;
			height: 12px;
			background: #FFFFFF3D;
		}

		.pa-content {
			flex: 1;
			padding: 16px;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.pa-welcome {
			background: var(--pv-card);
			color: var(--pv-card-text);
			border-radius: var(--pv-radius);
			padding: 13px 16px;
			transition: background .7s, color .7s, border-radius .7s;
			box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
		}

		.pa-welcome b {
			display: block;
			font-size: .82rem;
		}

		.pa-welcome p {
			font-size: .68rem;
			opacity: .65;
			margin-top: 3px;
		}

		.pa-tiles {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
		}

		.pa-tiles span {
			display: block;
			background: var(--pv-card);
			border-radius: calc(var(--pv-radius) * .7);
			height: 52px;
			box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
			transition: background .7s;
		}

		.pv-tabs {
			display: flex;
			gap: 6px;
			margin-top: 12px;
			flex-wrap: wrap;
		}

		.pv-tab {
			font-family: inherit;
			font-size: .78rem;
			font-weight: 700;
			cursor: pointer;
			border: 1px solid var(--line);
			background: transparent;
			color: var(--muted);
			padding: 6px 14px;
			border-radius: 2px;
			transition: .2s;
		}

		.pv-tab.active {
			border-color: var(--brand);
			background: color-mix(in srgb, var(--brand) 22%, transparent);
			color: var(--text);
		}

		.pv-tab i {
			font-size: .68rem;
			opacity: .65;
			margin-inline-end: 2px;
		}

		.pv-tab.active i {
			opacity: 1;
			color: var(--accent);
		}

		.pv-note {
			font-size: .76rem;
			color: var(--muted);
			margin-top: 10px;
		}

		.pv-note i {
			color: var(--brand);
			margin-inline-end: 5px;
		}

		.wrap {
			max-width: 1280px;
			margin: 0 auto;
			padding: 0 clamp(16px, 4vw, 40px) 90px;
			display: grid;
			grid-template-columns: 230px minmax(0, 1fr);
			gap: clamp(28px, 4vw, 56px);
		}

		nav.side {
			position: sticky;
			top: calc(var(--header-h) + 20px);
			align-self: start;
			height: max-content;
		}

		nav.side .nav-t {
			font-size: .7rem;
			font-weight: 800;
			letter-spacing: 1px;
			color: var(--muted);
			padding: 0 14px 10px;
		}

		nav.side ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		nav.side a {
			display: block;
			padding: 7px 14px;
			color: var(--muted);
			font-weight: 600;
			font-size: .86rem;
			border-inline-start: 2px solid var(--line);
			transition: .18s;
		}

		nav.side a:hover {
			color: var(--text);
		}

		nav.side a.active {
			color: var(--text);
			border-inline-start-color: var(--accent);
			background: color-mix(in srgb, var(--brand) 12%, transparent);
		}

		nav.side a i {
			width: 22px;
			font-size: .78rem;
			color: var(--brand);
		}

		nav.side a.active i {
			color: var(--accent);
		}

		section.blk {
			padding: clamp(30px, 5vw, 52px) 0;
			border-top: 1px solid var(--line);
			scroll-margin-top: calc(var(--header-h) + 20px);
		}

		section.blk:first-child {
			border-top: 0;
			padding-top: 6px;
		}

		.sec-k {
			font-size: .72rem;
			font-weight: 800;
			letter-spacing: 1px;
			color: var(--muted);
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 10px;
		}

		.sec-k i {
			color: var(--brand);
		}

		.sec-k .num {
			color: var(--accent);
			font-family: var(--ff-body);
		}

		section.blk>h2 {
			margin-bottom: 8px;
		}

		section.blk>.lead {
			color: var(--muted);
			max-width: 62ch;
			margin-bottom: 26px;
			font-size: .95rem;
		}

		.about-grid {
			display: grid;
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			gap: clamp(20px, 4vw, 44px);
			align-items: start;
		}

		.about-grid p {
			color: var(--muted);
			font-size: .95rem;
		}

		.about-grid p+p {
			margin-top: 14px;
		}

		.about-grid p b {
			color: var(--text);
			font-weight: 700;
		}

		.pull {
			font-family: var(--ff-title);
			font-size: clamp(1.2rem, 2.4vw, 1.65rem);
			line-height: 1.8;
			border-inline-start: 3px solid var(--accent);
			padding-inline-start: 18px;
			color: var(--text);
		}

		.can-grid {
			display: grid;
			grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
			gap: clamp(20px, 4vw, 44px);
			align-items: start;
		}

		.canlist {
			list-style: none;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 4px 26px;
		}

		.canlist li {
			padding: 9px 0;
			border-bottom: 1px dotted var(--line);
			font-size: .9rem;
			color: var(--text);
			display: flex;
			gap: 10px;
			align-items: baseline;
		}

		.canlist li i {
			color: var(--brand);
			font-size: .82rem;
			flex: none;
		}

		.factbox {
			border: 1px solid var(--line);
			background: color-mix(in srgb, var(--deep) 60%, transparent);
			padding: 18px 20px;
		}

		.factbox h3 {
			font-size: .8rem;
			letter-spacing: .5px;
			color: var(--muted);
			margin-bottom: 12px;
		}

		.factbox dl {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 7px 14px;
			font-size: .85rem;
		}

		.factbox dt {
			color: var(--muted);
			font-weight: 600;
		}

		.factbox dd {
			direction: ltr;
			text-align: right;
			font-weight: 700;
		}

		.steps {
			list-style: none;
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 0;
		}

		.steps::before {
			content: "";
			position: absolute;
			inset-block: 10px;
			inset-inline-start: 17px;
			width: 1px;
			background: linear-gradient(var(--brand), var(--line));
		}

		.steps li {
			position: relative;
			padding: 12px 62px 26px 0;
		}

		.steps li:last-child {
			padding-bottom: 4px;
		}

		.steps .n {
			position: absolute;
			inset-inline-start: 0;
			top: 14px;
			width: 36px;
			height: 36px;
			border: 1px solid var(--brand);
			background: var(--night);
			color: var(--text);
			border-radius: 50%;
			display: grid;
			place-items: center;
			font-weight: 800;
			font-size: .85rem;
			z-index: 1;
		}

		.steps b.st {
			display: block;
			font-size: .98rem;
		}

		.steps p {
			color: var(--muted);
			font-size: .88rem;
			margin-top: 3px;
		}

		.steps code {
			background: color-mix(in srgb, var(--brand) 20%, transparent);
			padding: 1px 7px;
			border-radius: 3px;
			font-size: .78rem;
		}

		.tpl-filter {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 18px;
		}

		.chip {
			border: 1px solid var(--line);
			background: transparent;
			color: var(--muted);
			padding: 6px 15px;
			border-radius: 2px;
			font-size: .8rem;
			font-weight: 700;
			cursor: pointer;
			transition: .18s;
			font-family: inherit;
		}

		.chip:hover {
			color: var(--text);
			border-color: var(--brand);
		}

		.chip.active {
			background: var(--brand);
			color: #fff;
			border-color: var(--brand);
		}

		.tpl-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
			gap: 16px;
		}

		.tpl {
			border: 1px solid var(--line);
			background: color-mix(in srgb, var(--deep) 45%, transparent);
			overflow: hidden;
			cursor: pointer;
			position: relative;
			display: none;
		}

		.tpl.show {
			display: block;
		}

		.tpl:hover {
			border-color: var(--brand);
		}

		.tpl .shots {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1px;
			background: var(--line);
		}

		.tpl .shot {
			position: relative;
			background: var(--night);
			overflow: hidden;
		}

		.tpl .shot img {
			display: block;
			width: 100%;
			height: 138px;
			object-fit: cover;
			object-position: top;
			transition: transform .5s;
		}

		.tpl:hover .shot img {
			transform: scale(1.06);
		}

		.tpl .shot span {
			position: absolute;
			top: 7px;
			inset-inline-start: 7px;
			font-size: .64rem;
			font-weight: 700;
			background: rgba(6, 14, 24, .72);
			color: #fff;
			padding: 2px 8px;
			border-radius: 2px;
		}

		.tpl .body {
			padding: 12px 14px;
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 8px;
		}

		.tpl .body b {
			font-size: .93rem;
		}

		.tpl .body .en {
			font-size: .72rem;
			color: var(--muted);
			direction: ltr;
		}

		.tpl .idx {
			position: absolute;
			top: 7px;
			inset-inline-end: 7px;
			font-size: .66rem;
			font-weight: 800;
			color: var(--muted);
			z-index: 1;
			background: rgba(6, 14, 24, .6);
			padding: 1px 7px;
			border-radius: 2px;
		}

		.demo-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
			gap: 14px;
		}

		.demo-grid figure {
			border: 1px solid var(--line);
			background: var(--deep);
			cursor: zoom-in;
			overflow: hidden;
		}

		.demo-grid img {
			display: block;
			width: 100%;
			height: 230px;
			object-fit: cover;
			object-position: top;
		}

		.demo-grid figcaption {
			padding: 8px 12px;
			font-size: .78rem;
			font-weight: 600;
			color: var(--muted);
			border-top: 1px solid var(--line);
		}

		.buy {
			position: relative;
			margin-top: 46px;
			padding: clamp(38px, 6vw, 66px) clamp(18px, 4vw, 44px);
			text-align: center;
			background: url("map.png") center/cover no-repeat;
			scroll-margin-top: calc(var(--header-h) + 20px);
		}

		.buy>* {
			position: relative;
		}

		.buy h2 {
			font-family: var(--ff-title);
			font-weight: 400;
			font-size: clamp(1.5rem, 3.8vw, 2.3rem);
			color: #fff;
			text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
		}

		.buy p {
			color: #E4EEF7;
			max-width: 52ch;
			margin: 10px auto 26px;
			font-size: .95rem;
			text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
		}

		.why {
			list-style: none;
		}

		.why li {
			display: grid;
			grid-template-columns: 86px minmax(0, 1fr);
			gap: 6px 18px;
			align-items: baseline;
			padding: 20px 0;
			border-top: 1px solid var(--line);
		}

		.why li:last-child {
			border-bottom: 1px solid var(--line);
		}

		.why .wn {
			font-family: var(--ff-title);
			font-size: 2rem;
			line-height: 1;
			color: transparent;
			-webkit-text-stroke: 1px var(--brand);
		}

		.why li:nth-child(even) {
			padding-inline-start: clamp(0px, 5vw, 64px);
		}

		.why h3 {
			font-size: 1rem;
		}

		.why h3 i {
			color: var(--brand);
			margin-inline-end: 8px;
			font-size: .88rem;
		}

		.why p {
			color: var(--muted);
			font-size: .88rem;
			grid-column: 2;
		}

		pre.box {
			background: color-mix(in srgb, var(--deep) 55%, transparent);
			border: 1px solid var(--line);
			border-inline-start: 3px solid var(--brand);
			border-radius: 0 2px 2px 0;
			padding: 16px;
			overflow-x: auto;
			font-size: .84rem;
			margin-top: 14px;
			direction: ltr;
			text-align: left;
			max-width: 100%;
		}

		.table-wrap {
			width: 100%;
			overflow-x: auto;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			font-size: .88rem;
			min-width: 340px;
		}

		th,
		td {
			padding: 12px 14px;
			text-align: start;
			border-bottom: 1px solid var(--line);
		}

		th {
			color: var(--muted);
			font-weight: 700;
			font-size: .76rem;
			letter-spacing: .5px;
		}

		.badge {
			display: inline-block;
			padding: 2px 9px;
			font-size: .72rem;
			font-weight: 700;
			border: 1px solid var(--line);
			border-radius: 2px;
			color: var(--text);
			background: color-mix(in srgb, var(--brand) 14%, transparent);
		}

		.seclist {
			list-style: none;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0 clamp(20px, 4vw, 40px);
		}

		.seclist li {
			border-top: 1px solid var(--line);
			padding: 16px 0;
		}

		.seclist li b {
			display: block;
			font-size: .93rem;
			margin-bottom: 2px;
		}

		.seclist li b i {
			color: var(--brand);
			margin-inline-end: 8px;
		}

		.seclist li p {
			color: var(--muted);
			font-size: .85rem;
		}

		.tst-grid {
			columns: 2;
			column-gap: 20px;
		}

		.tst {
			break-inside: avoid;
			border-top: 2px solid var(--brand);
			padding: 16px 4px 20px;
			margin-bottom: 20px;
			position: relative;
		}

		.tst:nth-child(even) {
			border-top-color: var(--line);
		}

		.tst>.q-ic {
			position: absolute;
			top: 14px;
			inset-inline-end: 2px;
			font-size: 1.5rem;
			color: color-mix(in srgb, var(--brand) 55%, transparent);
		}

		.tst-head {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 8px;
		}

		.tst-avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			border: 1px solid var(--line);
			background: color-mix(in srgb, var(--brand) 24%, transparent);
			color: var(--text);
			font-weight: 800;
			display: grid;
			place-items: center;
			flex: none;
		}

		.tst-head b {
			display: block;
			font-size: .92rem;
		}

		.tst-head .role {
			display: block;
			font-size: .74rem;
			color: var(--muted);
		}

		.tst .stars {
			display: flex;
			gap: 3px;
			margin-bottom: 8px;
			font-size: .74rem;
			color: var(--accent);
		}

		.tst p {
			font-size: .88rem;
			color: var(--muted);
		}

		.faq details {
			border: 1px solid var(--line);
			border-inline-start: 2px solid var(--line);
			margin-bottom: 8px;
			background: color-mix(in srgb, var(--deep) 35%, transparent);
		}

		.faq details[open] {
			border-inline-start-color: var(--accent);
			background: var(--deep);
		}

		.faq summary {
			cursor: pointer;
			font-weight: 700;
			padding: 13px 18px;
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
			font-size: .93rem;
		}

		.faq summary::-webkit-details-marker {
			display: none;
		}

		.faq summary::after {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			font-size: .8rem;
			color: var(--brand);
			transition: .2s;
		}

		.faq details[open] summary::after {
			transform: rotate(45deg);
		}

		.faq .ans {
			padding: 0 18px 15px;
			color: var(--muted);
			font-size: .88rem;
		}

		.rel {
			list-style: none;
		}

		.rel li {
			display: grid;
			grid-template-columns: 84px minmax(0, 1fr);
			gap: 14px;
			padding: 16px 0;
			border-top: 1px solid var(--line);
		}

		.rel .rv {
			direction: ltr;
			text-align: start;
			font-weight: 800;
			font-size: .9rem;
			color: var(--muted);
			padding-top: 3px;
		}

		.rel .rv.now {
			color: var(--accent);
		}

		.rel ul {
			margin: 4px 0 0;
			padding-inline-start: 18px;
			font-size: .86rem;
			color: var(--muted);
		}

		.rel ul li {
			display: list-item;
			border: 0;
			padding: 1px 0;
			grid-template-columns: none;
		}

		footer {
			text-align: center;
			padding: 40px 20px;
			color: var(--muted);
			font-size: .82rem;
			border-top: 1px solid var(--line);
		}

		footer .foot-brand {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-weight: 800;
			color: var(--text);
			margin-bottom: 8px;
		}

		footer .foot-brand img {
			width: 28px;
			height: 28px;
			border-radius: 6px;
		}

		.lb {
			position: fixed;
			inset: 0;
			z-index: 80;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: clamp(12px, 3vw, 32px);
			background: rgba(4, 10, 18, .85);
			backdrop-filter: blur(6px);
			opacity: 0;
			visibility: hidden;
			transition: opacity .25s, visibility .25s;
		}

		.lb.show {
			opacity: 1;
			visibility: visible;
		}

		.lb-panel {
			background: var(--night);
			border: 1px solid var(--line);
			border-radius: 8px 8px 2px 2px;
			box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
			max-width: min(1500px, 96vw);
			width: 100%;
			max-height: 94vh;
			overflow: auto;
			padding: clamp(16px, 3vw, 26px);
			position: relative;
		}

		.lb-title {
			font-size: 1rem;
			font-weight: 800;
			margin-bottom: 14px;
			padding-inline-end: 44px;
		}

		.lb-close {
			position: absolute;
			top: 14px;
			inset-inline-end: 14px;
			width: 34px;
			height: 34px;
			border-radius: 2px;
			border: 1px solid var(--line);
			background: var(--deep);
			color: var(--text);
			font-size: .95rem;
			cursor: pointer;
			display: grid;
			place-items: center;
			transition: .2s;
			z-index: 2;
		}

		.lb-close:hover {
			border-color: var(--brand);
			color: var(--accent);
		}

		.lb-imgs {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
			gap: 16px;
		}

		.lb-imgs.single {
			grid-template-columns: 1fr;
			max-width: 950px;
			margin: 0 auto;
		}

		.lb-imgs figure img {
			display: block;
			width: 100%;
			max-height: 80vh;
			object-fit: contain;
			border: 1px solid var(--line);
		}

		.lb-imgs figcaption {
			margin-top: 8px;
			font-size: .8rem;
			font-weight: 600;
			color: var(--muted);
			text-align: center;
		}

		#toTop {
			position: fixed;
			inset-inline-end: 24px;
			bottom: 24px;
			width: 44px;
			height: 44px;
			border-radius: 2px;
			border: 1px solid var(--line);
			background: var(--deep);
			color: var(--text);
			font-size: 1rem;
			cursor: pointer;
			box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
			opacity: 0;
			pointer-events: none;
			transform: translateY(12px);
			transition: .25s;
			z-index: 60;
			display: grid;
			place-items: center;
		}

		#toTop.show {
			opacity: 1;
			pointer-events: auto;
			transform: none;
		}

		#toTop:hover {
			border-color: var(--accent);
			color: var(--accent);
		}

		@media(max-width:1080px) {
			.hero {
				grid-template-columns: 1fr;
			}

			.hero-visual {
				max-width: 640px;
			}

			.about-grid,
			.can-grid {
				grid-template-columns: 1fr;
			}

			.tst-grid {
				columns: 1;
			}
		}

		@media(max-width:900px) {
			.menu-btn {
				display: grid;
			}

			.wrap {
				grid-template-columns: 1fr;
				gap: 0;
				padding-bottom: 60px;
			}

			nav.side {
				position: fixed;
				top: var(--header-h);
				right: 0;
				bottom: 0;
				z-index: 48;
				width: min(80vw, 300px);
				height: auto;
				max-height: none;
				background: var(--night);
				border-inline-start: 1px solid var(--line);
				padding: 22px 14px;
				box-shadow: -12px 0 40px rgba(0, 0, 0, .5);
				transform: translateX(105%);
				transition: transform .32s ease;
				overflow-y: auto;
			}

			nav.side.open {
				transform: none;
			}

			nav.side a {
				padding: 12px 14px;
				font-size: .98rem;
			}

			.hero {
				padding-top: 34px;
			}
		}

		@media(max-width:640px) {
			:root {
				--header-h: 62px;
			}

			.brand small {
				display: none;
			}

			.canlist,
			.seclist {
				grid-template-columns: 1fr;
			}

			.pv-body {
				grid-template-columns: 1fr;
				min-height: 0;
			}

			.pv-side {
				padding: 18px 22px;
				flex-direction: row;
				align-items: center;
				gap: 12px;
			}

			.pv-side .pv-logo {
				width: 34px;
				height: 34px;
				margin-bottom: 0;
			}

			.why li {
				grid-template-columns: 56px minmax(0, 1fr);
			}

			.why li:nth-child(even) {
				padding-inline-start: 0;
			}

			.why .wn {
				font-size: 1.5rem;
			}

			.rel li {
				grid-template-columns: 1fr;
				gap: 4px;
			}
		}

		@media(max-width:600px) {
			.tpl-grid {
				grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
			}

			.tpl .shot img {
				height: 96px;
			}

			.demo-grid {
				grid-template-columns: 1fr 1fr;
			}

			.demo-grid img {
				height: 130px;
			}

			.hero .cta .btn {
				flex: 1;
				justify-content: center;
			}
		}

		@media(max-width:380px) {
			.demo-grid {
				grid-template-columns: 1fr;
			}

			.ver {
				display: none;
			}
		}

		@media(prefers-reduced-motion:reduce) {
			* {
				transition: none !important;
				scroll-behavior: auto !important;
			}
		}