/* Face Score: the upload with its mode and age check, the scan, the result (the card to share, the breakdown, the
   eye type, the best side, the photo against the face) and the 1v1.
   The look is the campaign one of the Face Score page: amber gradient, stickers, large numbers. Every class of the
   tool starts with fs- and every rule is scoped to .pst-fs, so nothing leaks into the page or comes in from it.
   The colours are the PicSuit theme's where it has them; the second values keep the tool usable anywhere else.
   ========================================================================== */

.pst-fs {
	--fs-ink: var(--ink, #0F1B33);
	--fs-paper: var(--paper, #FAF7F2);
	--fs-white: var(--white, #FFFFFF);
	--fs-line: var(--line, #E6DFD3);
	--fs-line-strong: var(--line-strong, #CFC7B8);
	--fs-muted: var(--muted, #5B6478);
	--fs-soft: var(--soft, #3A4560);
	--fs-tint: var(--tint, #F1ECE3);
	--fs-accent: var(--accent, #FFB224);
	--fs-font-body: var(--font-body, inherit);
	--fs-font-display: var(--font-display, inherit);
	--fs-orange: #FF9A3D;
	--fs-orange-ink: #B35A00;
	--fs-grad: linear-gradient(135deg, #FFC24A 0%, #FF9A3D 100%);
	--fs-shadow: 0 30px 60px -30px rgba(15, 27, 51, 0.28), 0 6px 18px -8px rgba(15, 27, 51, 0.08);
	--fs-shadow-sm: 0 6px 18px -8px rgba(15, 27, 51, 0.18);
	--fs-glow: 0 14px 30px -12px rgba(255, 140, 40, 0.7);
	position: relative;
	font-family: var(--fs-font-body);
}

.pst-fs :is(h2, h3, p, figure, ul, ol, dl, dd) {
	margin: 0;
}

.pst-fs :is(ul, ol) {
	padding: 0;
	list-style: none;
}

.pst-fs button {
	font: inherit;
	color: inherit;
}

.pst-fs :is(img, svg, canvas) {
	display: block;
	max-width: 100%;
}

.pst-fs a {
	color: var(--fs-ink);
}

/* The card a result can be saved as, drawn off screen. */
.pst-fs [hidden] {
	display: none !important;
}

.pst-fs .fs-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.pst-fs .fs-muted {
	color: var(--fs-muted);
}

.pst-fs .fs-eyebrow {
	margin-bottom: 14px;
	color: var(--fs-muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pst-fs .fs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pst-fs .fs-ic {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pst-fs .fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--fs-accent);
	color: var(--fs-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s, filter .15s;
}

.pst-fs .fs-btn--sm {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.pst-fs .fs-btn:hover {
	filter: brightness(.95);
}

.pst-fs .fs-grad-text {
	background: var(--fs-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pst-fs .fs-sticker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--fs-white);
	color: var(--fs-ink);
	box-shadow: var(--fs-shadow-sm);
	font-family: var(--fs-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.pst-fs .fs-sticker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fs-grad);
}

.pst-fs .fs-sticker--amber {
	background: var(--fs-grad);
}

.pst-fs .fs-sticker--amber::before {
	background: var(--fs-white);
}

.pst-fs .fs-sticker--plain::before {
	display: none;
}

.pst-fs .fs-sticker--tilt-l {
	transform: rotate(-2deg);
}

.pst-fs .fs-sticker--tilt-r {
	transform: rotate(2deg);
}

.pst-fs .fs-card {
	border: 1px solid rgba(15,27,51,.06);
	border-radius: 32px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow);
	padding: clamp(18px, 3vw, 36px);
}

.pst-fs .fs-notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: 26px;
	color: var(--fs-soft);
	font-size: 15px;
}

.pst-fs .fs-notes li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pst-fs .fs-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pst-fs .fs-h2 {
	font-family: var(--fs-font-display);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

.pst-fs .fs-seg {
	display: inline-flex;
	padding: 5px;
	border-radius: 999px;
	background: var(--fs-tint);
	gap: 4px;
}

.pst-fs .fs-seg button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fs-soft);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pst-fs .fs-seg button[aria-pressed="true"] {
	background: var(--fs-white);
	color: var(--fs-ink);
	box-shadow: 0 2px 10px rgba(15,27,51,.12);
}

.pst-fs .fs-slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 20px;
	margin-top: 24px;
}

.pst-fs .fs-slots[data-mode="solo"] {
	grid-template-columns: minmax(0, 1fr);
}

.pst-fs .fs-slot {
	position: relative;
	min-width: 0;
}

.pst-fs .fs-slot__label {
	display: none;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fs-muted);
}

.pst-fs .fs-slots[data-mode="duel"] .fs-slot__label {
	display: block;
}

.pst-fs .fs-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 330px;
	padding: 28px 20px;
	border: 2px dashed #F3CF96;
	border-radius: 28px;
	background: linear-gradient(180deg, #FFFCF6 0%, #FFF4E3 100%);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.pst-fs .fs-drop:hover,
.pst-fs .fs-drop.is-over {
	border-color: var(--fs-orange);
	box-shadow: 0 0 0 6px rgba(255,178,36,.12);
}

.pst-fs .fs-drop__frame {
	position: relative;
	width: 104px;
	height: 126px;
}

.pst-fs .fs-drop__frame svg {
	width: 100%;
	height: 100%;
}

.pst-fs .fs-drop__title {
	font-family: var(--fs-font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.pst-fs .fs-drop__hint {
	color: var(--fs-muted);
	font-size: 15px;
	max-width: 26em;
}

.pst-fs .fs-drop__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--fs-grad);
	color: var(--fs-ink);
	font-size: 16px;
	font-weight: 700;
	box-shadow: var(--fs-glow);
}

.pst-fs .fs-slots[data-mode="duel"] .fs-drop {
	min-height: 300px;
}

.pst-fs .fs-preview {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: var(--fs-tint);
	aspect-ratio: 4 / 5;
	max-height: 460px;
	margin-inline: auto;
	width: 100%;
	box-shadow: var(--fs-shadow);
}

.pst-fs .fs-slots[data-mode="solo"] .fs-preview {
	max-width: 368px;
}

.pst-fs .fs-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pst-fs .fs-preview__change {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.92);
	box-shadow: var(--fs-shadow-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.pst-fs .fs-preview__tag {
	position: absolute;
	left: 12px;
	top: 12px;
}

.pst-fs .fs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	margin-top: 26px;
}

.pst-fs .fs-btn--go {
	min-height: 60px;
	padding: 0 34px;
	border: 0;
	border-radius: 999px;
	background: var(--fs-grad);
	box-shadow: var(--fs-glow);
	font-family: var(--fs-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pst-fs .fs-btn--go:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(255,140,40,.75);
	filter: none;
}

.pst-fs .fs-btn--go:active:not(:disabled) {
	transform: translateY(0);
}

.pst-fs .fs-btn--go:disabled {
	background: var(--fs-tint);
	color: var(--fs-muted);
	box-shadow: none;
	cursor: not-allowed;
}

.pst-fs .fs-textbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 6px;
	border: 0;
	background: none;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.pst-fs .fs-tips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--fs-line);
}

.pst-fs .fs-tip {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--fs-soft);
	line-height: 1.35;
}

.pst-fs .fs-tip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: #FFF1DA;
	color: var(--fs-orange-ink);
}

.pst-fs .fs-age-note {
	margin-top: 18px;
	text-align: center;
	font-size: 14px;
	color: var(--fs-muted);
}

.pst-fs .fs-scan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 48px;
}

.pst-fs .fs-scan__stages {
	display: flex;
	gap: 16px;
	flex: 0 1 auto;
	min-width: 0;
}

.pst-fs .fs-scan__stage {
	position: relative;
	overflow: hidden;
	width: min(330px, 72vw);
	aspect-ratio: 4 / 5;
	border-radius: 28px;
	background: var(--fs-ink);
	box-shadow: var(--fs-shadow);
}

.pst-fs .fs-scan[data-mode="duel"] .fs-scan__stages {
	flex: 1 1 100%;
	justify-content: center;
}

.pst-fs .fs-scan[data-mode="duel"] .fs-scan__stage {
	flex: 1 1 0;
	width: auto;
	max-width: 260px;
	min-width: 0;
}

.pst-fs .fs-scan__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) brightness(.8);
}

.pst-fs .fs-scan__stage canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.pst-fs .fs-scan__line {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--fs-accent);
	box-shadow: 0 0 18px 6px rgba(255,178,36,.55);
	top: 0;
	animation: fs-sweep 1.6s ease-in-out infinite alternate;
}

.pst-fs .fs-scan__chip {
	position: absolute;
	left: 12px;
	top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	color: var(--fs-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pst-fs .fs-scan__chip i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fs-orange);
	animation: fs-blink 1s infinite;
}

.pst-fs .fs-scan__pts {
	position: absolute;
	right: 12px;
	top: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	color: var(--fs-ink);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-scan__info {
	flex: 1 1 300px;
	max-width: 420px;
	min-width: 0;
}

.pst-fs .fs-scan__pct {
	font-family: var(--fs-font-display);
	font-size: clamp(60px, 8vw, 92px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: .95;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-scan__bar {
	height: 10px;
	margin-top: 16px;
	border-radius: 99px;
	background: var(--fs-tint);
	overflow: hidden;
}

.pst-fs .fs-scan__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--fs-grad);
	border-radius: 99px;
	transition: width .2s linear;
}

.pst-fs .fs-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

.pst-fs .fs-steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--fs-muted);
	font-weight: 600;
	transition: color .2s;
}

.pst-fs .fs-steps li .fs-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border: 2px solid var(--fs-line-strong);
	border-radius: 50%;
	background: var(--fs-white);
}

.pst-fs .fs-steps li .fs-dot svg {
	opacity: 0;
}

.pst-fs .fs-steps li.is-now {
	color: var(--fs-ink);
}

.pst-fs .fs-steps li.is-now .fs-dot {
	border-color: var(--fs-line);
	border-top-color: var(--fs-orange);
	animation: fs-spin .8s linear infinite;
}

.pst-fs .fs-steps li.is-done {
	color: var(--fs-ink);
}

.pst-fs .fs-steps li.is-done .fs-dot {
	border: 0;
	background: var(--fs-grad);
	color: var(--fs-ink);
	animation: none;
}

.pst-fs .fs-steps li.is-done .fs-dot svg {
	opacity: 1;
}

.pst-fs .fs-res {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

@container pst (max-width: 860px) {
	.pst-fs .fs-res {
		grid-template-columns: minmax(0, 1fr);
	}
	.pst-fs .fs-res .fs-scorecard {
		max-width: 420px;
		margin-inline: auto;
		width: 100%;
	}
}

.pst-fs .fs-scorecard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	aspect-ratio: 4 / 5.6;
	padding: 22px 22px 18px;
	border-radius: 32px;
	background:
		radial-gradient(80% 50% at 50% 0%, #FFDDA6 0%, rgba(255,221,166,0) 70%),
		radial-gradient(60% 40% at 100% 100%, #FDDDD4 0%, rgba(253,221,212,0) 70%),
		linear-gradient(180deg, #FFF8EC 0%, #FFFFFF 60%, #FFF6F2 100%);
	color: var(--fs-ink);
	box-shadow: var(--fs-shadow), 0 0 0 1px rgba(15,27,51,.05);
}

.pst-fs .fs-scorecard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	gap: 10px;
}

.pst-fs .fs-scorecard__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fs-font-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
}

.pst-fs .fs-scorecard__brand small {
	color: var(--fs-muted);
	font-weight: 600;
	font-family: var(--fs-font-body);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pst-fs .fs-scorecard__photo {
	position: relative;
	width: 50%;
	margin-top: 18px;
	aspect-ratio: 1;
}

.pst-fs .fs-scorecard__photo::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, #FFC24A, #FF9A3D, #FFB8A0, #FFC24A);
}

.pst-fs .fs-scorecard__photo img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--fs-white);
	background: var(--fs-tint);
}

.pst-fs .fs-scorecard__photo .fs-ring {
	position: absolute;
	inset: -16px;
	border: 2px dashed rgba(255,154,61,.45);
	border-radius: 50%;
	animation: fs-turn 18s linear infinite;
}

.pst-fs .fs-scorecard__top-pct {
	position: absolute;
	right: -22%;
	top: 6%;
	transform: rotate(6deg);
}

.pst-fs .fs-scorecard__score {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--fs-font-display);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: .9;
}

.pst-fs .fs-scorecard__score b {
	font-size: clamp(76px, 10vw, 100px);
	font-variant-numeric: tabular-nums;
	background: var(--fs-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pst-fs .fs-scorecard__score span {
	font-size: 28px;
	color: var(--fs-muted);
	letter-spacing: -0.02em;
}

.pst-fs .fs-scorecard__vibe {
	margin-top: 6px;
	text-align: center;
}

.pst-fs .fs-scorecard__vibe small {
	display: block;
	color: var(--fs-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pst-fs .fs-scorecard__vibe strong {
	display: block;
	margin-top: 2px;
	font-family: var(--fs-font-display);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fs-ink);
	line-height: 1.05;
}

.pst-fs .fs-scorecard__mini {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-self: stretch;
	margin-top: auto;
	padding-top: 16px;
}

.pst-fs .fs-scorecard__mini div {
	padding: 9px 6px;
	border-radius: 16px;
	background: rgba(255,255,255,.85);
	box-shadow: 0 4px 14px -6px rgba(15,27,51,.14);
	text-align: center;
}

.pst-fs .fs-scorecard__mini b {
	display: block;
	font-family: var(--fs-font-display);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-scorecard__mini span {
	display: block;
	color: var(--fs-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pst-fs .fs-scorecard__foot {
	align-self: stretch;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	color: var(--fs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pst-fs .fs-scorecard__foot b {
	color: var(--fs-ink);
}

.pst-fs .fs-confetti {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.pst-fs .fs-res__side {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.pst-fs .fs-res__head small {
	display: block;
	color: var(--fs-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pst-fs .fs-res__head h2 {
	font-family: var(--fs-font-display);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: balance;
}

.pst-fs .fs-res__head h2 mark {
	background: var(--fs-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pst-fs .fs-res__head p {
	margin-top: 12px;
	color: var(--fs-soft);
	max-width: 34em;
}

.pst-fs .fs-wins {
	display: grid;
	gap: 10px;
}

.pst-fs .fs-win {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 20px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow-sm), 0 0 0 1px rgba(15,27,51,.05);
}

.pst-fs .fs-win__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--fs-grad);
	font-family: var(--fs-font-display);
	font-size: 17px;
	font-weight: 800;
}

.pst-fs .fs-win__t {
	font-weight: 700;
	line-height: 1.25;
}

.pst-fs .fs-win__s {
	color: var(--fs-muted);
	font-size: 14px;
}

.pst-fs .fs-win__v {
	margin-left: auto;
	font-family: var(--fs-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-share {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 26px;
	background: linear-gradient(135deg, #FFF5E2 0%, #FDEDE8 100%);
}

.pst-fs .fs-share__title {
	font-family: var(--fs-font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pst-fs .fs-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pst-fs .fs-chipbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow-sm);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}

.pst-fs .fs-chipbtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px rgba(15,27,51,.3);
}

.pst-fs .fs-chipbtn--ink {
	background: var(--fs-ink);
	color: var(--fs-paper);
}

.pst-fs .fs-chipbtn--grad {
	background: var(--fs-grad);
	color: var(--fs-ink);
	box-shadow: var(--fs-glow);
}

.pst-fs .fs-share__note {
	color: var(--fs-muted);
	font-size: 14px;
}

.pst-fs .fs-block {
	margin-top: clamp(32px, 4vw, 48px);
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid var(--fs-line);
}

.pst-fs .fs-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 22px;
}

.pst-fs .fs-block__head p {
	color: var(--fs-soft);
	max-width: 36em;
	margin-top: 6px;
}

.pst-fs .fs-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pst-fs .fs-fact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #FFF1DA;
	font-size: 15px;
}

.pst-fs .fs-fact b {
	font-weight: 700;
}

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

.pst-fs .fs-metric {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: 24px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow-sm), 0 0 0 1px rgba(15,27,51,.05);
	min-width: 0;
}

.pst-fs .fs-metric__top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pst-fs .fs-metric__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: #FFF1DA;
	color: var(--fs-orange-ink);
}

.pst-fs .fs-metric__name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
}

.pst-fs .fs-metric__badge {
	margin-left: auto;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.pst-fs .fs-metric__badge--top {
	background: var(--fs-grad);
	color: var(--fs-ink);
}

.pst-fs .fs-metric__badge--ok {
	background: #E9EDF5;
	color: var(--fs-ink);
}

.pst-fs .fs-metric__badge--low {
	background: var(--fs-tint);
	color: var(--fs-soft);
}

.pst-fs .fs-metric__val {
	font-family: var(--fs-font-display);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-metric__val small {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--fs-muted);
	margin-left: 6px;
	font-family: var(--fs-font-body);
}

.pst-fs .fs-gauge {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: var(--fs-tint);
}

.pst-fs .fs-gauge__ideal {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 99px;
	background: var(--fs-grad);
	opacity: .45;
}

.pst-fs .fs-gauge__dot {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	margin-top: -8px;
	border: 3px solid var(--fs-white);
	border-radius: 50%;
	background: var(--fs-ink);
	box-shadow: 0 2px 6px rgba(15,27,51,.3);
}

.pst-fs .fs-metric__ideal {
	color: var(--fs-muted);
	font-size: 13px;
}

.pst-fs .fs-photo-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 0;
	overflow: hidden;
	border-radius: 30px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow), 0 0 0 1px rgba(15,27,51,.05);
}

@container pst (max-width: 760px) {
	.pst-fs .fs-photo-panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pst-fs .fs-photo-panel__vs {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: clamp(20px, 3vw, 32px);
	background: linear-gradient(160deg, #FFF5E2 0%, #FDEDE8 100%);
}

.pst-fs .fs-pv-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pst-fs .fs-pv-row__lab {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	line-height: 1.25;
}

.pst-fs .fs-pv-row__lab small {
	display: block;
	color: var(--fs-muted);
	font-weight: 500;
	font-size: 14px;
}

.pst-fs .fs-pv-row__num {
	font-family: var(--fs-font-display);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-pv-row--photo .fs-pv-row__num {
	color: var(--fs-muted);
}

.pst-fs .fs-pv-bar {
	height: 12px;
	border-radius: 99px;
	background: rgba(255,255,255,.9);
	overflow: hidden;
}

.pst-fs .fs-pv-bar span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--fs-grad);
}

.pst-fs .fs-pv-bar--photo span {
	background: var(--fs-line-strong);
}

.pst-fs .fs-photo-panel__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 3vw, 32px);
}

.pst-fs .fs-photo-panel__body h3 {
	font-family: var(--fs-font-display);
	font-size: clamp(23px, 2.5vw, 29px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-wrap: balance;
}

.pst-fs .fs-losses {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pst-fs .fs-loss {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--fs-line);
}

.pst-fs .fs-loss:last-child {
	border-bottom: 0;
}

.pst-fs .fs-loss__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: #FFF1DA;
	color: var(--fs-orange-ink);
}

.pst-fs .fs-loss__t {
	font-weight: 700;
	line-height: 1.3;
}

.pst-fs .fs-loss__s {
	color: var(--fs-muted);
	font-size: 14px;
	line-height: 1.4;
}

.pst-fs .fs-loss__v {
	margin-left: auto;
	padding-left: 8px;
	font-family: var(--fs-font-display);
	font-size: 20px;
	font-weight: 800;
	color: var(--fs-orange-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.pst-fs .fs-cta-row .fs-note {
	color: var(--fs-muted);
	font-size: 14px;
}

.pst-fs .fs-fine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 28px;
	padding: 16px 20px;
	border-radius: 20px;
	background: var(--fs-paper);
	color: var(--fs-soft);
	font-size: 15px;
}

.pst-fs .fs-fine p {
	max-width: 46em;
}

.pst-fs .fs-ftype {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

@container pst (max-width: 760px) {
	.pst-fs .fs-ftype {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pst-fs .fs-ftype__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 3vw, 30px);
	border-radius: 28px;
	background: linear-gradient(150deg, #FFF3DE 0%, #FDE8E2 100%);
	min-width: 0;
}

.pst-fs .fs-ftype__eye {
	width: min(240px, 80%);
}

.pst-fs .fs-ftype__eye svg {
	width: 100%;
	height: auto;
}

.pst-fs .fs-ftype__name {
	font-family: var(--fs-font-display);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.pst-fs .fs-ftype__desc {
	color: var(--fs-soft);
	max-width: 30em;
}

.pst-fs .fs-ftype__traits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pst-fs .fs-ftype__traits span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	font-size: 14px;
	font-weight: 600;
}

.pst-fs .fs-ftype__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.pst-fs .fs-ftype__row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 20px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow-sm), 0 0 0 1px rgba(15,27,51,.05);
}

.pst-fs .fs-ftype__row svg {
	width: 72px;
	height: auto;
}

.pst-fs .fs-ftype__row b {
	display: block;
	font-weight: 700;
}

.pst-fs .fs-ftype__row small {
	display: block;
	color: var(--fs-muted);
	font-size: 13px;
	line-height: 1.3;
}

.pst-fs .fs-ftype__bar {
	height: 6px;
	margin-top: 6px;
	border-radius: 99px;
	background: var(--fs-tint);
	overflow: hidden;
}

.pst-fs .fs-ftype__bar span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--fs-line-strong);
}

.pst-fs .fs-ftype__row.is-you .fs-ftype__bar span {
	background: var(--fs-grad);
}

.pst-fs .fs-ftype__row.is-you {
	box-shadow: 0 0 0 2px var(--fs-accent), var(--fs-glow);
}

.pst-fs .fs-ftype__pct {
	font-family: var(--fs-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-bs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 2vw, 20px);
}

.pst-fs .fs-bs__fig {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.pst-fs .fs-bs__img {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--fs-tint);
	box-shadow: var(--fs-shadow-sm);
}

.pst-fs .fs-bs__img canvas,
.pst-fs .fs-bs__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pst-fs .fs-bs__fig.is-win .fs-bs__img {
	box-shadow: 0 0 0 4px var(--fs-accent), var(--fs-glow);
}

.pst-fs .fs-bs__fig .fs-sticker {
	position: absolute;
	left: 50%;
	top: -12px;
	transform: translateX(-50%) rotate(-3deg);
	visibility: hidden;
	z-index: 1;
}

.pst-fs .fs-bs__fig.is-win .fs-sticker {
	visibility: visible;
}

.pst-fs .fs-bs__cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.pst-fs .fs-bs__cap b {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.pst-fs .fs-bs__cap span {
	font-family: var(--fs-font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-bs__fig.is-win .fs-bs__cap span {
	color: var(--fs-orange-ink);
}

.pst-fs .fs-bs__fig--orig .fs-bs__cap span {
	color: var(--fs-muted);
}

.pst-fs .fs-bs__verdict {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 22px;
	background: linear-gradient(135deg, #FFF5E2 0%, #FDEDE8 100%);
}

.pst-fs .fs-bs__verdict .fs-loss__icon {
	background: var(--fs-white);
}

.pst-fs .fs-bs__verdict p {
	flex: 1 1 280px;
	min-width: 0;
}

.pst-fs .fs-bs__verdict strong {
	font-family: var(--fs-font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pst-fs .fs-duel-card {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 3vw, 32px);
	border-radius: 32px;
	background:
		radial-gradient(60% 70% at 0% 0%, #FFDDA6 0%, rgba(255,221,166,0) 70%),
		radial-gradient(60% 70% at 100% 100%, #FDDDD4 0%, rgba(253,221,212,0) 70%),
		linear-gradient(180deg, #FFF8EC 0%, #FFFFFF 100%);
	color: var(--fs-ink);
	box-shadow: var(--fs-shadow), 0 0 0 1px rgba(15,27,51,.05);
}

.pst-fs .fs-duel-card .fs-scorecard__top {
	margin-bottom: 14px;
}

.pst-fs .fs-duel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(10px, 3vw, 40px);
}

.pst-fs .fs-fighter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	min-width: 0;
}

.pst-fs .fs-fighter__photo {
	position: relative;
	width: min(180px, 100%);
	aspect-ratio: 1;
}

.pst-fs .fs-fighter__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--fs-white);
	box-shadow: 0 0 0 3px var(--fs-line);
}

.pst-fs .fs-fighter.is-winner .fs-fighter__photo img {
	box-shadow: 0 0 0 5px var(--fs-accent), 0 14px 30px -10px rgba(255,154,61,.7);
}

.pst-fs .fs-fighter__crown {
	position: absolute;
	left: 50%;
	top: -30px;
	width: 54px;
	height: 40px;
	margin-left: -27px;
	color: var(--fs-accent);
	visibility: hidden;
}

.pst-fs .fs-fighter.is-winner .fs-fighter__crown {
	visibility: visible;
}

.pst-fs .fs-fighter__name {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fs-muted);
}

.pst-fs .fs-fighter__score {
	font-family: var(--fs-font-display);
	font-size: clamp(52px, 7vw, 76px);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: .9;
	font-variant-numeric: tabular-nums;
	color: var(--fs-soft);
}

.pst-fs .fs-fighter.is-winner .fs-fighter__score {
	background: var(--fs-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pst-fs .fs-fighter__vibe {
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.1;
}

.pst-fs .fs-vs {
	padding: 12px 16px;
	font-family: var(--fs-font-display);
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 800;
	transform: rotate(-6deg);
}

.pst-fs .fs-vs::before {
	display: none;
}

.pst-fs .fs-duel__verdict {
	margin-top: 22px;
	text-align: center;
	font-family: var(--fs-font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.pst-fs .fs-duel__verdict span {
	color: var(--fs-orange-ink);
}

.pst-fs .fs-duel-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.pst-fs .fs-duel-table th,
.pst-fs .fs-duel-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--fs-line);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pst-fs .fs-duel-table tr:last-child td {
	border-bottom: 0;
}

.pst-fs .fs-duel-table th:first-child,
.pst-fs .fs-duel-table td:first-child {
	text-align: left;
}

.pst-fs .fs-duel-table thead th {
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fs-muted);
}

.pst-fs .fs-duel-table td.w {
	font-weight: 800;
}

.pst-fs .fs-duel-table td.w span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--fs-grad);
}

.pst-fs .fs-table-wrap {
	overflow-x: auto;
	border-radius: 24px;
	background: var(--fs-white);
	box-shadow: var(--fs-shadow-sm), 0 0 0 1px rgba(15,27,51,.05);
}

.pst-fs .fs-toast {
	position: fixed;
	left: 50%;
	bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	z-index: 41;
	transform: translate(-50%, 20px);
	max-width: min(480px, calc(100% - 32px));
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--fs-ink);
	color: var(--fs-paper);
	font-size: 15px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}

.pst-fs .fs-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

@keyframes fs-blink { 50% { opacity: .2; } }

@keyframes fs-spin { to { transform: rotate(360deg); } }

@keyframes fs-sweep { from { top: 6%; } to { top: 92%; } }

@keyframes fs-turn { to { transform: rotate(360deg); } }

/* The age check and the gender of the ranges, above the main button. */
.pst-fs .fs-gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 28px;
	margin-top: 24px;
}

.pst-fs .fs-gate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.pst-fs .fs-gate__label {
	color: var(--fs-soft);
	font-size: 15px;
	font-weight: 600;
}

.pst-fs .fs-seg--sm button {
	min-height: 38px;
	padding: 0 14px;
	font-size: 14px;
}

.pst-fs .fs-gate__age {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.pst-fs .fs-gate__age input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--fs-ink);
}

.pst-fs .fs-gate.is-asked .fs-gate__age {
	outline: 3px solid var(--fs-orange);
	outline-offset: 6px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.pst-fs *,
	.pst-fs *::before,
	.pst-fs *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}