.apsps {
	--apsps-accent: #2f6fa3;
	--apsps-accent-deep: #24577f;
	--apsps-accent-soft: #edf5fb;
	--apsps-ink: #26323b;
	--apsps-muted: #66727c;
	--apsps-line: #d9e0e5;
	--apsps-line-strong: #c7d1d8;
	--apsps-surface: #ffffff;
	--apsps-surface-soft: #f6f8f9;
	--apsps-success: #287653;
	--apsps-success-soft: #eaf6ef;
	--apsps-warning: #a35f0d;
	--apsps-warning-soft: #fff5e7;
	--apsps-danger: #a43d3d;
	--apsps-danger-soft: #fff0f0;
	--apsps-radius: 22px;
	--apsps-radius-small: 14px;
	--apsps-shadow: 0 24px 70px rgba(30, 51, 68, 0.11);
	max-width: 980px;
	margin: 2rem auto;
	color: var(--apsps-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

.apsps,
.apsps * {
	box-sizing: border-box;
}

.apsps [hidden] {
	display: none !important;
}

.apsps button,
.apsps input,
.apsps output {
	font: inherit;
}

.apsps button {
	margin: 0;
	border: 0;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
}


.apsps :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, button, input, output, label, figcaption) {
	font-family: inherit;
	letter-spacing: normal;
	text-shadow: none;
}

.apsps :where(h1, h2, h3, h4, h5, h6, p) {
	margin-block-start: 0;
	margin-block-end: 0;
}

.apsps__shell {
	position: relative;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 2.6rem);
	border: 1px solid var(--apsps-line);
	border-radius: var(--apsps-radius);
	background:
		radial-gradient(circle at 100% 0, rgba(47, 111, 163, 0.09), transparent 28rem),
		var(--apsps-surface);
	box-shadow: var(--apsps-shadow);
}

.apsps__header {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.apsps__eyebrow,
.apsps__step {
	display: inline-block;
	margin: 0 0 0.45rem;
	color: var(--apsps-accent-deep);
	font-size: 0.76rem;
	font-weight: 750;
	letter-spacing: 0.105em;
	line-height: 1.2;
	text-transform: uppercase;
}

.apsps__header h2,
.apsps__section-heading h3,
.apsps__status h3 {
	color: var(--apsps-ink);
	font-family: inherit;
	text-transform: none;
}

.apsps__header h2 {
	margin: 0;
	font-size: clamp(1.72rem, 4vw, 2.55rem);
	font-weight: 730;
	letter-spacing: -0.035em;
	line-height: 1.12;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.apsps__header p {
	max-width: 650px;
	margin: 0.85rem auto 0;
	color: var(--apsps-muted);
	font-size: 1.02rem;
}

.apsps__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: fit-content;
	max-width: 100%;
	margin: 1.2rem auto 0;
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	background: rgba(237, 245, 251, 0.78);
	color: #4f6474;
	font-size: 0.82rem;
	line-height: 1.35;
}

.apsps__privacy svg {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	fill: var(--apsps-accent);
}

.apsps__dropzone {
	display: flex;
	min-height: 260px;
	margin-top: 1.8rem;
	padding: 2rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 2px dashed var(--apsps-line-strong);
	border-radius: 18px;
	background: rgba(246, 248, 249, 0.78);
	text-align: center;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.apsps__dropzone:hover,
.apsps__dropzone:focus-visible,
.apsps__dropzone.is-dragging {
	border-color: var(--apsps-accent);
	background: var(--apsps-accent-soft);
	outline: none;
	transform: translateY(-1px);
}

.apsps__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.apsps__upload-icon {
	display: grid;
	width: 3.7rem;
	height: 3.7rem;
	margin-bottom: 0.9rem;
	place-items: center;
	border-radius: 50%;
	background: var(--apsps-accent-soft);
}

.apsps__upload-icon svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: var(--apsps-accent);
}

.apsps__dropzone strong {
	color: var(--apsps-ink);
	font-size: 1.1rem;
	font-weight: 720;
}

.apsps__dropzone > span {
	margin-top: 0.12rem;
	color: var(--apsps-muted);
}

.apsps__dropzone small {
	margin-top: 0.65rem;
	color: #7a858d;
	font-size: 0.79rem;
}

.apsps__work {
	margin-top: 1.75rem;
}

.apsps__filebar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.8rem;
	align-items: center;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--apsps-line);
	border-radius: var(--apsps-radius-small);
	background: var(--apsps-surface-soft);
}

.apsps__filemark {
	display: grid;
	width: 2.45rem;
	height: 2.45rem;
	place-items: center;
	border-radius: 10px;
	background: var(--apsps-accent-soft);
}

.apsps__filemark svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--apsps-accent);
}

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

.apsps__filecopy strong {
	overflow: hidden;
	color: var(--apsps-ink);
	font-size: 0.92rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apsps__filecopy span {
	color: var(--apsps-muted);
	font-size: 0.76rem;
}

.apsps__text-button {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0.3rem 0.2rem;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--apsps-accent-deep) !important;
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.apsps__text-button:hover,
.apsps__text-button:focus-visible {
	color: var(--apsps-accent);
	text-decoration: underline;
	outline: none;
}


.apsps__batch {
	margin-top: 0.8rem;
	overflow: hidden;
	border: 1px solid var(--apsps-line);
	border-radius: var(--apsps-radius-small);
	background: var(--apsps-surface);
}

.apsps__batch-heading {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.72rem 0.85rem;
	border-bottom: 1px solid var(--apsps-line);
	background: var(--apsps-surface-soft);
}

.apsps__batch-heading > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.apsps__batch-heading strong {
	color: var(--apsps-ink);
	font-size: 0.8rem;
	font-weight: 730;
}

.apsps__batch-heading span {
	color: var(--apsps-muted);
	font-size: 0.71rem;
	line-height: 1.35;
}

.apsps__batch-count {
	flex: 0 0 auto;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--apsps-line);
	border-radius: 999px;
	background: var(--apsps-surface);
	color: var(--apsps-muted) !important;
	font-size: 0.68rem !important;
	font-weight: 720;
	white-space: nowrap;
}

.apsps__batch-list {
	max-height: 330px;
	overflow: auto;
	overscroll-behavior: contain;
}

.apsps__batch-item {
	display: grid;
	width: 100%;
	min-height: 58px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.72rem;
	align-items: center;
	padding: 0.65rem 0.8rem;
	border: 0 !important;
	border-bottom: 1px solid var(--apsps-line) !important;
	border-radius: 0 !important;
	background: var(--apsps-surface) !important;
	box-shadow: none !important;
	color: var(--apsps-ink) !important;
	font: inherit;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
}

.apsps__batch-item:last-child {
	border-bottom: 0 !important;
}

button.apsps__batch-item[data-previewable="true"] {
	cursor: pointer;
}

button.apsps__batch-item[data-previewable="true"]:hover,
button.apsps__batch-item[data-previewable="true"]:focus-visible {
	background: #f4f8fb !important;
	color: var(--apsps-ink) !important;
	outline: none;
}

button.apsps__batch-item[data-previewable="true"]:focus-visible {
	box-shadow: inset 0 0 0 2px var(--apsps-accent) !important;
}

.apsps__batch-item.is-active {
	background: var(--apsps-accent-soft) !important;
	box-shadow: inset 3px 0 0 var(--apsps-accent) !important;
}

.apsps__batch-dot {
	display: block;
	width: 0.62rem;
	height: 0.62rem;
	border-radius: 50%;
	background: #aab4bb;
	box-shadow: 0 0 0 4px #eef1f3;
}

.apsps__batch-item.is-binary .apsps__batch-dot,
.apsps__batch-item.is-mixed .apsps__batch-dot {
	background: var(--apsps-warning);
	box-shadow: 0 0 0 4px #fbecd3;
}

.apsps__batch-item.is-continuous .apsps__batch-dot {
	background: var(--apsps-success);
	box-shadow: 0 0 0 4px #dff1e7;
}

.apsps__batch-item.is-error .apsps__batch-dot {
	background: var(--apsps-danger);
	box-shadow: 0 0 0 4px #f7dddd;
}

.apsps__batch-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.apsps__batch-copy strong {
	overflow: hidden;
	color: var(--apsps-ink) !important;
	font-size: 0.8rem;
	font-weight: 710;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apsps__batch-copy span {
	overflow: hidden;
	color: var(--apsps-muted) !important;
	font-size: 0.68rem;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apsps__batch-badge {
	justify-self: end;
	padding: 0.24rem 0.5rem;
	border: 1px solid var(--apsps-line);
	border-radius: 999px;
	background: var(--apsps-surface-soft);
	color: var(--apsps-muted) !important;
	font-size: 0.65rem !important;
	font-weight: 720;
	line-height: 1.2;
	white-space: nowrap;
}

.apsps__batch-item.is-binary .apsps__batch-badge,
.apsps__batch-item.is-mixed .apsps__batch-badge {
	border-color: #ead6b6;
	background: var(--apsps-warning-soft);
	color: #8b510b !important;
}

.apsps__batch-item.is-continuous .apsps__batch-badge {
	border-color: #c9e4d5;
	background: var(--apsps-success-soft);
	color: var(--apsps-success) !important;
}

.apsps__batch-item.is-error .apsps__batch-badge {
	border-color: #eccaca;
	background: var(--apsps-danger-soft);
	color: var(--apsps-danger) !important;
}

.apsps__status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
	margin-top: 1rem;
	padding: 1.05rem 1.1rem;
	border: 1px solid var(--apsps-line);
	border-radius: var(--apsps-radius-small);
	background: var(--apsps-surface-soft);
}

.apsps__status.is-binary,
.apsps__status.is-mixed {
	border-color: #ead6b6;
	background: var(--apsps-warning-soft);
}

.apsps__status.is-continuous {
	border-color: #c9e4d5;
	background: var(--apsps-success-soft);
}

.apsps__status.is-none,
.apsps__status.is-static {
	border-color: var(--apsps-line);
	background: var(--apsps-surface-soft);
}

.apsps__status.is-error {
	border-color: #eccaca;
	background: var(--apsps-danger-soft);
}

.apsps__status-icon {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 50%;
	background: #e8eef2;
	color: var(--apsps-muted);
}

.apsps__status.is-binary .apsps__status-icon,
.apsps__status.is-mixed .apsps__status-icon {
	background: #f7e4c4;
	color: var(--apsps-warning);
}

.apsps__status.is-continuous .apsps__status-icon {
	background: #d7eee1;
	color: var(--apsps-success);
}

.apsps__status.is-error .apsps__status-icon {
	background: #f4d7d7;
	color: var(--apsps-danger);
}

.apsps__status-icon svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

.apsps__status h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 740;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.apsps__status p {
	margin: 0.22rem 0 0;
	color: var(--apsps-muted);
	font-size: 0.87rem;
}

.apsps__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.65rem;
	margin-top: 0.85rem;
}

.apsps__fact {
	min-width: 0;
	padding: 0.8rem 0.85rem;
	border: 1px solid var(--apsps-line);
	border-radius: 12px;
	background: var(--apsps-surface);
}

.apsps__fact span {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--apsps-muted);
	font-size: 0.7rem;
	font-weight: 690;
	letter-spacing: 0.055em;
	line-height: 1.3;
	text-transform: uppercase;
}

.apsps__fact strong {
	display: block;
	overflow: hidden;
	color: var(--apsps-ink);
	font-size: 0.92rem;
	font-weight: 710;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apsps__editor {
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--apsps-line);
}

.apsps__section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
	gap: 2rem;
	align-items: end;
}

.apsps__section-heading h3 {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.65rem);
	font-weight: 730;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.apsps__section-heading p {
	margin: 0;
	color: var(--apsps-muted);
	font-size: 0.84rem;
}

.apsps__presets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.65rem;
	margin-top: 1.15rem;
}

.apsps__preset {
	display: flex;
	min-height: 92px;
	padding: 0.85rem;
	cursor: pointer;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	border: 1px solid var(--apsps-line);
	border-radius: 13px;
	background: var(--apsps-surface);
	box-shadow: none;
	color: var(--apsps-ink);
	text-align: left;
	text-shadow: none;
	transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.apsps__preset:hover,
.apsps__preset:focus-visible {
	border-color: #98b8cf !important;
	background: #f4f8fb !important;
	box-shadow: 0 0 0 1px rgba(47, 111, 163, 0.12) !important;
	color: var(--apsps-ink) !important;
	outline: none;
	transform: translateY(-1px);
}

.apsps__preset:hover strong,
.apsps__preset:hover span,
.apsps__preset:focus-visible strong,
.apsps__preset:focus-visible span {
	color: var(--apsps-ink) !important;
}

.apsps__preset.is-selected {
	border-color: var(--apsps-accent) !important;
	background: var(--apsps-accent-soft) !important;
	box-shadow: 0 0 0 1px var(--apsps-accent) !important;
	color: var(--apsps-ink) !important;
}

.apsps__preset.is-selected strong,
.apsps__preset.is-selected span {
	color: var(--apsps-ink) !important;
}

.apsps__preset strong {
	font-size: 0.92rem;
	font-weight: 730;
}

.apsps__preset span {
	margin-top: 0.17rem;
	color: var(--apsps-muted);
	font-size: 0.75rem;
	line-height: 1.35;
}

.apsps__custom {
	display: grid;
	gap: 0.85rem;
	margin-top: 0.9rem;
	padding: 1rem;
	border: 1px solid var(--apsps-line);
	border-radius: var(--apsps-radius-small);
	background: var(--apsps-surface-soft);
}

.apsps__range-row {
	display: grid;
	grid-template-columns: minmax(170px, 0.65fr) minmax(180px, 1fr) 68px;
	gap: 1rem;
	align-items: center;
	margin: 0;
}

.apsps__range-row > span {
	display: flex;
	flex-direction: column;
}

.apsps__range-row strong {
	color: var(--apsps-ink);
	font-size: 0.86rem;
	font-weight: 700;
}

.apsps__range-row small {
	color: var(--apsps-muted);
	font-size: 0.72rem;
}

.apsps__range-row input[type="range"] {
	width: 100%;
	margin: 0;
	accent-color: var(--apsps-accent);
}

.apsps__range-row output {
	color: var(--apsps-accent-deep);
	font-size: 0.82rem;
	font-weight: 720;
	text-align: right;
}

.apsps__preview {
	margin: 1.05rem 0 0;
	padding: 0;
	border: 1px solid var(--apsps-line);
	border-radius: 16px;
	background: var(--apsps-surface);
}

.apsps__preview figcaption {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem 0.75rem;
	border-bottom: 1px solid var(--apsps-line);
}

.apsps__preview figcaption > div:first-child {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.apsps__preview figcaption strong {
	color: var(--apsps-ink);
	font-size: 0.87rem;
	font-weight: 710;
}

.apsps__preview figcaption > div:first-child span {
	color: var(--apsps-muted);
	font-size: 0.72rem;
}

.apsps__legend {
	display: flex;
	flex: 0 0 auto;
	gap: 0.9rem;
	align-items: center;
	color: var(--apsps-muted);
	font-size: 0.71rem;
}

.apsps__legend span {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.apsps__legend-line {
	display: inline-block;
	width: 1.25rem;
	height: 0;
	border-top: 2px solid;
}

.apsps__legend-line--original {
	border-color: #929da5;
	border-top-style: dashed;
}

.apsps__legend-line--softened {
	border-color: var(--apsps-accent);
}

.apsps__canvas-wrap {
	position: relative;
	min-height: 250px;
	padding: 0.5rem 0.55rem 0.4rem;
	overflow: hidden;
	border-radius: 0 0 16px 16px;
	background: linear-gradient(180deg, #fff, #fbfcfd);
}

.apsps__canvas-wrap canvas {
	display: block;
	width: 100%;
	height: 250px;
	max-width: none;
}

.apsps__action-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.2rem;
	align-items: center;
	margin-top: 1rem;
}

.apsps__compatibility {
	display: flex;
	max-width: 610px;
	flex-direction: column;
}

.apsps__compatibility strong {
	color: var(--apsps-ink);
	font-size: 0.77rem;
	font-weight: 710;
}

.apsps__compatibility span {
	color: var(--apsps-muted);
	font-size: 0.73rem;
}

.apsps__download {
	display: inline-flex;
	min-height: 48px;
	padding: 0.75rem 1.05rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid var(--apsps-accent-deep) !important;
	border-radius: 12px;
	background: var(--apsps-accent) !important;
	box-shadow: 0 8px 20px rgba(47, 111, 163, 0.2);
	color: #fff !important;
	font-weight: 720;
	line-height: 1.2;
	text-decoration: none;
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.apsps__download:hover,
.apsps__download:focus-visible {
	background: var(--apsps-accent-deep) !important;
	box-shadow: 0 10px 24px rgba(47, 111, 163, 0.25);
	color: #fff !important;
	outline: none;
	transform: translateY(-1px);
}

.apsps__download:disabled {
	cursor: progress;
	opacity: 0.68;
	transform: none;
}

.apsps__download span {
	color: #fff !important;
}

.apsps__download svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.apsps__error {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid #eccaca;
	border-radius: 12px;
	background: var(--apsps-danger-soft);
	color: var(--apsps-danger);
	font-size: 0.86rem;
}

.apsps__footnote {
	margin: 1.2rem 0 0;
	color: #7b858d;
	font-size: 0.72rem;
	text-align: center;
}

@media (max-width: 760px) {
	.apsps__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.apsps__section-heading {
		grid-template-columns: 1fr;
		gap: 0.55rem;
		align-items: start;
	}

	.apsps__presets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.apsps__range-row {
		grid-template-columns: minmax(130px, 0.7fr) minmax(140px, 1fr) 62px;
		gap: 0.65rem;
	}

	.apsps__action-row {
		grid-template-columns: 1fr;
	}

	.apsps__download {
		width: 100%;
	}
}

@media (max-width: 540px) {
	.apsps {
		margin: 1rem auto;
	}

	.apsps__shell {
		padding: 1.15rem;
		border-radius: 17px;
	}

	.apsps__privacy {
		align-items: flex-start;
		border-radius: 12px;
		text-align: left;
	}

	.apsps__dropzone {
		min-height: 220px;
		padding: 1.25rem;
	}

	.apsps__filebar {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.apsps__text-button {
		grid-column: 2;
		justify-self: start;
	}


	.apsps__batch-heading {
		align-items: flex-start;
	}

	.apsps__batch-item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.apsps__batch-badge {
		grid-column: 2;
		justify-self: start;
	}

	.apsps__facts,
	.apsps__presets {
		grid-template-columns: 1fr;
	}

	.apsps__preset {
		min-height: 72px;
	}

	.apsps__range-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.45rem 0.8rem;
	}

	.apsps__range-row input[type="range"] {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.apsps__range-row output {
		grid-column: 2;
		grid-row: 1;
	}

	.apsps__preview figcaption {
		align-items: flex-start;
		flex-direction: column;
	}

	.apsps__canvas-wrap,
	.apsps__canvas-wrap canvas {
		height: 220px;
		min-height: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apsps *,
	.apsps *::before,
	.apsps *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


.apsps__preset strong {
	color: var(--apsps-ink) !important;
}

.apsps__preset span {
	color: var(--apsps-muted) !important;
}
