.jin-width-normalizer,
.jin-width-normalizer * { box-sizing: border-box; }

.jin-width-normalizer {
	--jin-width-accent: #1769aa;
	--jin-width-accent-dark: #0c477a;
	--jin-width-border: #c9d2dc;
	--jin-width-muted: #f5f7f9;
	--jin-width-text: #1f2933;
	--jin-width-success: #126e45;
	width: min(100%, 72rem);
	margin: 0.5rem auto;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--jin-width-text);
	background: #fff;
	border: 1px solid var(--jin-width-border);
	border-radius: 0.5rem;
	box-shadow: 0 0.35rem 1rem rgb(15 43 69 / 7%);
}

.jin-width-normalizer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jin-width-normalizer__header {
	display: grid;
	grid-template-columns: minmax(4.5rem, 7.5rem) 1fr;
	min-height: 4.25rem;
	border-bottom: 1px solid var(--jin-width-border);
}

.jin-width-normalizer__logo,
.jin-width-normalizer__title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.5rem 0.75rem;
}

.jin-width-normalizer__logo {
	background: var(--jin-width-muted);
	border-right: 1px solid var(--jin-width-border);
}

.jin-width-normalizer__logo-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 3rem;
	object-fit: contain;
}

.jin-width-normalizer__logo-mark {
	display: inline-grid;
	place-items: center;
	width: 3.25rem;
	min-height: 2.1rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--jin-width-accent-dark);
	border-radius: 0.35rem;
}

.jin-width-normalizer__title {
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	line-height: 1.25;
	text-align: center;
}

.jin-width-normalizer__account {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.75rem;
	border-bottom: 1px solid var(--jin-width-border);
}

.jin-width-normalizer__account p { margin: 0; }

.jin-width-normalizer__account-summary {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 650;
	white-space: nowrap;
}

.jin-width-normalizer__badge {
	display: inline-block;
	padding: 0.1rem 0.42rem;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 999px;
}

.jin-width-normalizer__badge--guest { color: #374151; background: #e5e7eb; }
.jin-width-normalizer__badge--registered { color: #064e3b; background: #d1fae5; }
.jin-width-normalizer__badge--pro { color: #5d3500; background: #ffdf8a; }

.jin-width-normalizer__limits {
	font-size: 0.75rem;
	color: #43515d;
}

.jin-width-normalizer__privacy {
	display: flex;
	gap: 0.4rem;
	align-items: flex-start;
	padding: 0.45rem 0.75rem;
	font-size: 0.76rem;
	color: #493800;
	background: #fff9df;
	border-bottom: 1px solid #e3cb79;
}

.jin-width-normalizer__privacy p,
.jin-width-normalizer__intro p { margin: 0; }

.jin-width-normalizer__intro {
	padding: 0.5rem 0.75rem;
	background: var(--jin-width-muted);
	border-bottom: 1px solid var(--jin-width-border);
}

.jin-width-normalizer__intro h2,
.jin-width-normalizer__intro h3 {
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
	line-height: 1.3;
}

.jin-width-normalizer__intro p,
.jin-width-normalizer__intro li {
	font-size: 0.78rem;
	line-height: 1.45;
}

.jin-width-normalizer__main { padding: clamp(0.65rem, 2vw, 1rem); }

.jin-width-workspace {
	width: min(100%, 58rem);
	margin: 0 auto;
}

.jin-width-tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 0.55rem;
	border-bottom: 2px solid var(--jin-width-border);
}

.jin-width-tabs button {
	min-height: 2.25rem;
	padding: 0.35rem 0.75rem;
	font: inherit;
	font-weight: 700;
	color: #36414b;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	cursor: pointer;
}

.jin-width-tabs button[aria-selected="true"] {
	color: var(--jin-width-accent-dark);
	border-bottom-color: var(--jin-width-accent);
}

.jin-width-workspace label,
.jin-width-settings-panel label { font-weight: 650; }

.jin-width-workspace textarea,
.jin-width-workspace select,
.jin-width-settings-panel select {
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #788795;
	border-radius: 0.3rem;
}

.jin-width-workspace textarea {
	display: block;
	width: 100%;
	min-height: 8rem;
	padding: 0.55rem;
	margin-top: 0.25rem;
	line-height: 1.55;
	resize: vertical;
}

.jin-width-workspace__count,
.jin-width-workspace__file-summary {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: #4b5966;
}

.jin-width-workspace__count {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.jin-width-workspace__count[data-over-limit="true"] { font-weight: 700; color: #b42318; }

.jin-width-dropzone {
	padding: 0.75rem;
	text-align: center;
	background: #f8fafc;
	border: 2px dashed #8091a1;
	border-radius: 0.4rem;
}

.jin-width-dropzone[data-drag-active="true"] { background: #eaf4fc; border-color: var(--jin-width-accent); }

.jin-width-dropzone label,
.jin-width-dropzone input { display: block; margin: 0 auto 0.35rem; }

.jin-width-dropzone p { margin: 0; font-size: 0.75rem; }

.jin-width-workspace__encoding {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
	margin-top: 0.5rem;
}

.jin-width-workspace__encoding select,
.jin-width-settings-panel select {
	min-height: 2.15rem;
	padding: 0.2rem 1.6rem 0.2rem 0.45rem;
}

.jin-width-settings-panel {
	display: grid;
	grid-template-columns: repeat(3, minmax(8rem, 1fr));
	gap: 0.5rem 0.75rem;
	padding: 0.55rem 0.7rem 0.7rem;
	margin: 0.65rem 0 0;
	border: 1px solid var(--jin-width-border);
	border-radius: 0.35rem;
}

.jin-width-settings-panel legend { padding: 0 0.25rem; font-size: 0.82rem; font-weight: 700; }

.jin-width-settings-panel > div {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem;
	align-items: center;
}

.jin-width-settings-panel__protect { grid-column: 1 / -1; font-size: 0.78rem; }

.jin-width-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
}

.jin-width-button,
.jin-width-workspace .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.75rem;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--jin-width-accent-dark);
	background: #fff;
	border: 1px solid var(--jin-width-accent-dark);
	border-radius: 0.3rem;
	cursor: pointer;
}

.jin-width-button--primary { color: #fff; background: var(--jin-width-accent-dark); }
.jin-width-button:disabled { cursor: wait; opacity: 0.6; }

.jin-width-status {
	min-height: 1.35rem;
	margin: 0.35rem 0 0;
	font-size: 0.76rem;
}

.jin-width-status[data-status-type="error"] { font-weight: 700; color: #b42318; }
.jin-width-status[data-status-type="success"] { color: var(--jin-width-success); }
.jin-width-status[data-status-type="warning"] { color: #805600; }

.jin-width-result {
	padding: 0.65rem;
	margin-top: 0.5rem;
	background: #f6fbf8;
	border: 1px solid #a8d5ba;
	border-radius: 0.35rem;
}

.jin-width-result h3,
.jin-width-result p { margin: 0 0 0.35rem; }
.jin-width-result h3 { font-size: 0.9rem; }
.jin-width-result p { font-size: 0.76rem; }

.jin-width-normalizer :where(button, a, input, select, textarea):focus-visible {
	outline: 3px solid #f4bf47;
	outline-offset: 2px;
}

@media (max-width: 40rem) {
	.jin-width-normalizer { margin-block: 0.35rem; font-size: 0.84rem; border-radius: 0.3rem; }
	.jin-width-normalizer__header { grid-template-columns: 4.5rem 1fr; min-height: 3.75rem; }
	.jin-width-normalizer__logo,
	.jin-width-normalizer__title { padding: 0.4rem; }
	.jin-width-normalizer__title { font-size: 1rem; }
	.jin-width-normalizer__account { gap: 0.15rem 0.5rem; padding: 0.3rem 0.45rem; }
	.jin-width-normalizer__privacy,
	.jin-width-normalizer__intro,
	.jin-width-normalizer__main { padding: 0.45rem; }
	.jin-width-settings-panel { grid-template-columns: 1fr; }
	.jin-width-settings-panel__protect { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.jin-width-normalizer *,
	.jin-width-normalizer *::before,
	.jin-width-normalizer *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}