@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
:root {
	--rp-l0: #ffffff;
	--rp-l1: #f8f9fa;
	--rp-l2: #e4e4e7;
	--rp-l3: #a1a1aa;
	--rp-l4: #52525b;
	--rp-l5: #27272a;
	--rp-l6: #09090b;
	--rp-brand: #fd602c;
	--rp-ok-bg: #e7f1ec;
	--rp-ok-fg: #2e6a4f;
	--rp-ok-dot: #4f9a76;
	--rp-wait-bg: #f8efdd;
	--rp-wait-fg: #855b14;
	--rp-wait-dot: #c08a2e;
	--rp-info-bg: #e6eef6;
	--rp-info-fg: #2f5a84;
	--rp-info-dot: #5b87b3;
	--rp-r-control: 8px;
	--rp-r-card: 12px;
	--rp-r-pill: 999px;
	--rp-fs-xs: 11.5px;
	--rp-fs-sm: 12.5px;
	--rp-fs-base: 13.5px;
	--rp-fs-md: 15px;
	--rp-fs-xl: 20px;
	--rp-dur-2: 200ms;
	--rp-dur-4: 360ms;
	--rp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--rp-pulse-period: 2.4s;
	--rp-shift-2: 8px;
	--rp-font: 'Vazirmatn', Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root {
		--rp-l0: #0a0a0b;
		--rp-l1: #18181b;
		--rp-l2: #27272a;
		--rp-l3: #52525b;
		--rp-l4: #a1a1aa;
		--rp-l5: #e4e4e7;
		--rp-l6: #fafafa;
		--rp-ok-bg: #13241c;
		--rp-ok-fg: #8cc7a8;
		--rp-ok-dot: #5faf86;
		--rp-wait-bg: #2a2112;
		--rp-wait-fg: #e2b66a;
		--rp-wait-dot: #c9953b;
		--rp-info-bg: #121e2a;
		--rp-info-fg: #9dbedf;
		--rp-info-dot: #6e98c2;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root {
		--rp-dur-2: 0ms;
		--rp-dur-4: 0ms;
		--rp-shift-2: 0px;
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	background: var(--rp-l1);
}
body {
	margin: 0;
	background: var(--rp-l1);
	color: var(--rp-l6);
	font: var(--rp-fs-base) / 1.8 var(--rp-font);
}
.rp-page {
	min-block-size: 100vh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}
.admin-bar .rp-page {
	min-block-size: calc(100vh - 32px);
}
.rp-main {
	inline-size: 100%;
	max-inline-size: 560px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: rp-rise var(--rp-dur-4) var(--rp-ease-out) both;
}
.rp-main.rp-wide {
	max-inline-size: 720px;
}
@keyframes rp-rise {
	from {
		opacity: 0;
		translate: 0 var(--rp-shift-2);
	}
}
.rp-card {
	padding: 28px;
	border: 1px solid var(--rp-l2);
	border-radius: var(--rp-r-card);
	background: var(--rp-l0);
}
.rp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.rp-titles {
	flex: 1 1 auto;
	min-inline-size: 0;
}
.rp-logo {
	flex: none;
	inline-size: 52px;
	block-size: 52px;
	display: grid;
	place-items: center;
	border: 1px solid var(--rp-l2);
	border-radius: 14px;
	background: var(--rp-l1);
	color: inherit;
	text-decoration: none;
}
.rp-logo .rp-ring {
	fill: var(--rp-brand);
}
.rp-logo .rp-stitch {
	fill: var(--rp-l5);
}
.rp-title {
	margin: 0;
	font-size: var(--rp-fs-xl);
	font-weight: 700;
	line-height: 1.4;
}
.rp-sub {
	margin: 0;
	color: var(--rp-l4);
	font-size: var(--rp-fs-sm);
}
.rp-state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: var(--rp-r-pill);
	font-size: var(--rp-fs-sm);
	white-space: nowrap;
}
.rp-state.rp-ok {
	background: var(--rp-ok-bg);
	color: var(--rp-ok-fg);
}
.rp-state.rp-wait {
	background: var(--rp-wait-bg);
	color: var(--rp-wait-fg);
}
.rp-dot {
	position: relative;
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--rp-r-pill);
}
.rp-ok .rp-dot {
	background: var(--rp-ok-dot);
}
.rp-wait .rp-dot {
	background: var(--rp-wait-dot);
}
.rp-ok .rp-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--rp-ok-dot);
	animation: rp-pulse var(--rp-pulse-period) ease-out infinite;
}
@keyframes rp-pulse {
	from {
		opacity: 0.6;
		scale: 1;
	}
	to {
		opacity: 0;
		scale: 2.6;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rp-ok .rp-dot::after {
		animation: none;
	}
}
.rp-lead {
	margin: 20px 0 0;
	font-size: var(--rp-fs-md);
	line-height: 2;
}
.rp-lead > :first-child {
	margin-block-start: 0;
}
.rp-lead > :last-child {
	margin-block-end: 0;
}
.rp-facts {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rp-l2);
	border-radius: var(--rp-r-control);
}
.rp-facts li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-block-end: 1px solid var(--rp-l2);
}
.rp-facts li:last-child {
	border-block-end: 0;
}
.rp-facts svg {
	margin-block-start: 3px;
	stroke: var(--rp-l5);
}
.rp-facts strong {
	display: block;
	font-size: var(--rp-fs-base);
}
.rp-facts span {
	color: var(--rp-l4);
	font-size: var(--rp-fs-sm);
}
.rp-en {
	direction: ltr;
	text-align: left;
	margin: 16px 0 0;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--rp-l2);
	color: var(--rp-l4);
	font-size: var(--rp-fs-sm);
	line-height: 1.7;
}
.rp-note {
	margin: 16px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--rp-info-dot);
	border-radius: var(--rp-r-control);
	background: var(--rp-info-bg);
	color: var(--rp-info-fg);
	font-size: var(--rp-fs-sm);
}
.rp-note a {
	color: inherit;
	font-weight: 700;
}
.rp-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding-inline: 4px;
	color: var(--rp-l4);
	font-size: var(--rp-fs-xs);
}
.rp-page a {
	color: var(--rp-l6);
	text-underline-offset: 3px;
	transition: color var(--rp-dur-2) var(--rp-ease-out);
}
.rp-page a:hover {
	color: var(--rp-brand);
}
.rp-page a:focus-visible {
	outline: 2px solid var(--rp-l6);
	outline-offset: 2px;
	border-radius: 4px;
}
.rp-content {
	margin-block-start: 20px;
	font-size: var(--rp-fs-md);
	line-height: 2;
	overflow-wrap: anywhere;
}
.rp-content img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--rp-r-control);
}
.rp-content > :first-child {
	margin-block-start: 0;
}
.rp-content > :last-child {
	margin-block-end: 0;
}
.rp-list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.rp-list li {
	margin: 0;
	padding-block: 10px;
	border-block-end: 1px solid var(--rp-l2);
}
.rp-list li:last-child {
	border-block-end: 0;
}
.rp-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
