.sinc-kin-entry {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.sinc-kin-entry__legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--20);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.sinc-kin-entry__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--30);
}

.sinc-kin-entry__mode {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	cursor: pointer;
}

.sinc-kin-entry__mode input {
	margin: 0;
	accent-color: var(--wp--preset--color--purple);
}

.sinc-kin-entry__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sinc-kin-entry__control {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sinc-kin-entry__label {
	padding: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--muted);
}

.sinc-kin-entry__input {
	box-sizing: border-box;
	inline-size: 12rem;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.5rem 0.7rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--sinc-rule);
	border-radius: 4px;
}

.sinc-kin-entry__input--number {
	inline-size: 6rem;
	appearance: textfield;
}

.sinc-kin-entry__input--number::-webkit-outer-spin-button,
.sinc-kin-entry__input--number::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.sinc-kin-entry__input:focus-visible,
.sinc-kin-entry__mode input:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple);
	outline-offset: 1px;
}

.sinc-kin-entry__noon {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.sinc-kin-entry__noon > legend {
	margin-block-end: 0.35rem;
}

.sinc-kin-entry__hint,
.sinc-kin-entry__future {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.sinc-kin-entry__future {
	color: var(--wp--preset--color--contrast);
}

.sinc-kin-entry [hidden] {
	display: none;
}

.sinc-kin-entry__preview:empty {
	display: none;
}

.sinc-kin-entry__preview {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.sinc-kin-entry__preview-error {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--red);
}

.sinc-kin-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	vertical-align: middle;
}

.sinc-kin-mark__glyphs {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.sinc-kin-mark__tone,
.sinc-kin-mark__seal {
	display: block;
	inline-size: 1.5rem;
	background: center / contain no-repeat;
}

.sinc-kin-mark__seal {
	aspect-ratio: 1;
}

.sinc-kin-mark__tone { aspect-ratio: 400 / 47; }
.sinc-kin-mark__tone--6,
.sinc-kin-mark__tone--7,
.sinc-kin-mark__tone--8,
.sinc-kin-mark__tone--9,
.sinc-kin-mark__tone--10 { aspect-ratio: 400 / 79; }
.sinc-kin-mark__tone--11,
.sinc-kin-mark__tone--12,
.sinc-kin-mark__tone--13 { aspect-ratio: 400 / 112; }

.sinc-kin-mark__tone--1 { background-image: url(../img/calcula-kin/calc_tom1.png); }
.sinc-kin-mark__tone--2 { background-image: url(../img/calcula-kin/calc_tom2.png); }
.sinc-kin-mark__tone--3 { background-image: url(../img/calcula-kin/calc_tom3.png); }
.sinc-kin-mark__tone--4 { background-image: url(../img/calcula-kin/calc_tom4.png); }
.sinc-kin-mark__tone--5 { background-image: url(../img/calcula-kin/calc_tom5.png); }
.sinc-kin-mark__tone--6 { background-image: url(../img/calcula-kin/calc_tom6.png); }
.sinc-kin-mark__tone--7 { background-image: url(../img/calcula-kin/calc_tom7.png); }
.sinc-kin-mark__tone--8 { background-image: url(../img/calcula-kin/calc_tom8.png); }
.sinc-kin-mark__tone--9 { background-image: url(../img/calcula-kin/calc_tom9.png); }
.sinc-kin-mark__tone--10 { background-image: url(../img/calcula-kin/calc_tom10.png); }
.sinc-kin-mark__tone--11 { background-image: url(../img/calcula-kin/calc_tom11.png); }
.sinc-kin-mark__tone--12 { background-image: url(../img/calcula-kin/calc_tom12.png); }
.sinc-kin-mark__tone--13 { background-image: url(../img/calcula-kin/calc_tom13.png); }

.sinc-kin-mark__seal--1 { background-image: url(../img/calcula-kin/seal1.webp); }
.sinc-kin-mark__seal--2 { background-image: url(../img/calcula-kin/seal2.webp); }
.sinc-kin-mark__seal--3 { background-image: url(../img/calcula-kin/seal3.webp); }
.sinc-kin-mark__seal--4 { background-image: url(../img/calcula-kin/seal4.webp); }
.sinc-kin-mark__seal--5 { background-image: url(../img/calcula-kin/seal5.webp); }
.sinc-kin-mark__seal--6 { background-image: url(../img/calcula-kin/seal6.webp); }
.sinc-kin-mark__seal--7 { background-image: url(../img/calcula-kin/seal7.webp); }
.sinc-kin-mark__seal--8 { background-image: url(../img/calcula-kin/seal8.webp); }
.sinc-kin-mark__seal--9 { background-image: url(../img/calcula-kin/seal9.webp); }
.sinc-kin-mark__seal--10 { background-image: url(../img/calcula-kin/seal10.webp); }
.sinc-kin-mark__seal--11 { background-image: url(../img/calcula-kin/seal11.webp); }
.sinc-kin-mark__seal--12 { background-image: url(../img/calcula-kin/seal12.webp); }
.sinc-kin-mark__seal--13 { background-image: url(../img/calcula-kin/seal13.webp); }
.sinc-kin-mark__seal--14 { background-image: url(../img/calcula-kin/seal14.webp); }
.sinc-kin-mark__seal--15 { background-image: url(../img/calcula-kin/seal15.webp); }
.sinc-kin-mark__seal--16 { background-image: url(../img/calcula-kin/seal16.webp); }
.sinc-kin-mark__seal--17 { background-image: url(../img/calcula-kin/seal17.webp); }
.sinc-kin-mark__seal--18 { background-image: url(../img/calcula-kin/seal18.webp); }
.sinc-kin-mark__seal--19 { background-image: url(../img/calcula-kin/seal19.webp); }
.sinc-kin-mark__seal--20 { background-image: url(../img/calcula-kin/seal20.webp); }