modulos_internal/contracts/style.css

body {
font-family: 'Montserrat', sans-serif;
}
@layer from-quill-editor {
	.ql-editor blockquote,
	.ql-editor h1,
	.ql-editor h2,
	.ql-editor h3,
	.ql-editor h4,
	.ql-editor h5,
	.ql-editor h6,
	.ql-editor ol,
	.ql-editor p,
	.ql-editor pre,
	.ql-editor ul {
		counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol,
	.ql-editor ul {
		padding-left: 1.5em
	}

	.ql-editor ol>li,
	.ql-editor ul>li {
		list-style-type: none
	}

	.ql-editor ul>li:before {
		content: "\2022"
	}

	.ql-editor li:before {
		display: inline-block;
		white-space: nowrap;
		width: 1.2em
	}

	.ql-editor li:not(.ql-direction-rtl):before {
		margin-left: -1.5em;
		margin-right: .3em;
		text-align: right
	}

	.ql-editor li.ql-direction-rtl:before {
		margin-left: .3em;
		margin-right: -1.5em
	}

	.ql-editor ol li:not(.ql-direction-rtl),
	.ql-editor ul li:not(.ql-direction-rtl) {
		padding-left: 1.5em
	}

	.ql-editor ol li.ql-direction-rtl,
	.ql-editor ul li.ql-direction-rtl {
		padding-right: 1.5em
	}

	.ql-editor ol li {
		counter-increment: list-0;
		counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol li:before {
		content: counter(list-0, decimal) ". "
	}

	.ql-editor ol li.ql-indent-1 {
		counter-increment: list-1
	}

	.ql-editor ol li.ql-indent-1:before {
		content: counter(list-1, lower-alpha) ". "
	}

	.ql-editor ol li.ql-indent-1 {
		counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-2 {
		counter-increment: list-2
	}

	.ql-editor ol li.ql-indent-2:before {
		content: counter(list-2, lower-roman) ". "
	}

	.ql-editor ol li.ql-indent-2 {
		counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-3 {
		counter-increment: list-3
	}

	.ql-editor ol li.ql-indent-3:before {
		content: counter(list-3, decimal) ". "
	}

	.ql-editor ol li.ql-indent-3 {
		counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-4 {
		counter-increment: list-4
	}

	.ql-editor ol li.ql-indent-4:before {
		content: counter(list-4, lower-alpha) ". "
	}

	.ql-editor ol li.ql-indent-4 {
		counter-reset: list-5 list-6 list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-5 {
		counter-increment: list-5
	}

	.ql-editor ol li.ql-indent-5:before {
		content: counter(list-5, lower-roman) ". "
	}

	.ql-editor ol li.ql-indent-5 {
		counter-reset: list-6 list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-6 {
		counter-increment: list-6
	}

	.ql-editor ol li.ql-indent-6:before {
		content: counter(list-6, decimal) ". "
	}

	.ql-editor ol li.ql-indent-6 {
		counter-reset: list-7 list-8 list-9
	}

	.ql-editor ol li.ql-indent-7 {
		counter-increment: list-7
	}

	.ql-editor ol li.ql-indent-7:before {
		content: counter(list-7, lower-alpha) ". "
	}

	.ql-editor ol li.ql-indent-7 {
		counter-reset: list-8 list-9
	}

	.ql-editor ol li.ql-indent-8 {
		counter-increment: list-8
	}

	.ql-editor ol li.ql-indent-8:before {
		content: counter(list-8, lower-roman) ". "
	}

	.ql-editor ol li.ql-indent-8 {
		counter-reset: list-9
	}

	.ql-editor ol li.ql-indent-9 {
		counter-increment: list-9
	}

	.ql-editor ol li.ql-indent-9:before {
		content: counter(list-9, decimal) ". "
	}

	.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
		padding-left: 3em
	}

	.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
		padding-left: 4.5em
	}

	.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
		padding-right: 3em
	}

	.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
		padding-right: 4.5em
	}

	.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
		padding-left: 6em
	}

	.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
		padding-left: 7.5em
	}

	.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
		padding-right: 6em
	}

	.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
		padding-right: 7.5em
	}

	.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
		padding-left: 9em
	}

	.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
		padding-left: 10.5em
	}

	.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
		padding-right: 9em
	}

	.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
		padding-right: 10.5em
	}

	.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
		padding-left: 12em
	}

	.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
		padding-left: 13.5em
	}

	.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
		padding-right: 12em
	}

	.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
		padding-right: 13.5em
	}

	.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
		padding-left: 15em
	}

	.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
		padding-left: 16.5em
	}

	.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
		padding-right: 15em
	}

	.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
		padding-right: 16.5em
	}

	.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
		padding-left: 18em
	}

	.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
		padding-left: 19.5em
	}

	.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
		padding-right: 18em
	}

	.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
		padding-right: 19.5em
	}

	.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
		padding-left: 21em
	}

	.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
		padding-left: 22.5em
	}

	.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
		padding-right: 21em
	}

	.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
		padding-right: 22.5em
	}

	.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
		padding-left: 24em
	}

	.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
		padding-left: 25.5em
	}

	.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
		padding-right: 24em
	}

	.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
		padding-right: 25.5em
	}

	.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
		padding-left: 27em
	}

	.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
		padding-left: 28.5em
	}

	.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
		padding-right: 27em
	}

	.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
		padding-right: 28.5em
	}

	.ql-editor .ql-align-center {
		text-align: center
	}

	.ql-editor .ql-align-justify {
		text-align: justify
	}

	.ql-editor .ql-align-right {
		text-align: right
	}
}

@layer from-quill-editor-overrides {
	.ql-editor {
		padding-block: 1.5rem;
		padding-inline: 2rem;
		padding-inline: clamp(.5rem, 2.5vw, 3rem);
		padding-inline: clamp(20px, 5vw, 35px)
	}

	.ql-editor>:where(:not(:first-child)) {
		margin-block-start: var(--flow-space, 1.5rem)
	}

	.ql-editor :where(ul, ol)>:where(:not(:first-child)) {
		margin-block-start: .25rem
	}

	.ql-editor :is(ol, ul) {
		padding: 0
	}

	.ql-editor>p+:is(ul, ol) {
		margin-block-start: .25rem
	}
}

@layer accessibility {
	:where(:focus-visible) {
		outline: 3px solid #000;
		outline-offset: 3px
	}

	.sr-only {
		clip: rect(0, 0, 0, 0);
		border: 0;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px
	}

	.skip-to-content {
		background-color: hsl(var(--clr-darker-hsl));
		border-radius: 8px;
		color: hsl(var(--clr-light-hsl));
		display: block;
		left: 0;
		margin-inline: auto;
		margin: 0 auto !important;
		max-width: max-content;
		opacity: 0;
		outline-offset: 1px;
		padding: .5em 1em;
		position: fixed;
		right: 0;
		text-decoration: none;
		top: 1.5rem;
		transform: translateY(calc(-100% - 5rem - 1px));
		transition: transform .25s ease-in;
		z-index: 9999
	}

	.skip-to-content:hover {
		background-color: hsl(var(--clr-light-hsl));
		color: hsl(var(--clr-darker-hsl))
	}

	.skip-to-content:focus {
		opacity: 1;
		transform: translateY(0)
	}
}

@layer accessibility {
	@media (prefers-reduced-motion:reduce) {

		*,
		:after,
		:before {
			animation-duration: .1ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-duration: auto !important
		}

		.animate {
			animation: none !important
		}
	}
}

@layer buttons {
	.button,
	.ql-html-buttonCancel,
	.ql-html-buttonOk {
		align-items: center;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: var(--clr-500);
		border: none;
		border-radius: 8px;
		color: #fff;
		cursor: pointer;
		display: flex;
		font-family: Montserrat', sans-serif;
		font-size: 16px;
		font-weight: 400;
		gap: 0;
		justify-content: center;
		letter-spacing: .025em;
		line-height: 26px;
		margin: 0;
		max-width: max-content;
		overflow: hidden;
		padding: 10px 35px;
		padding-inline: clamp(20px, 5vw, 35px);
		padding-inline: clamp(20px, 2vw, 35px);
		text-decoration: none;
		transition: outline .4s cubic-bezier(.22, 1, .36, 1);
		-webkit-user-select: none;
		user-select: none
	}

	.button:hover:not([disabled]),
	.ql-html-buttonCancel:hover:not([disabled]),
	.ql-html-buttonOk:hover:not([disabled]) {
		background: var(--clr-600)
	}

	.button:active:not([disabled]),
	.ql-html-buttonCancel:active:not([disabled]),
	.ql-html-buttonOk:active:not([disabled]) {
		background: var(--clr-700);
		transform: translate(2px 3px);
		transform: scale(.975);
		transition: transform .3s cubic-bezier(.22, 1, .36, 1), outline .4s cubic-bezier(.22, 1, .36, 1), background-color .2s linear
	}

	.button[disabled],
	.ql-html-buttonCancel[disabled],
	.ql-html-buttonOk[disabled] {
		cursor: default;
		filter: grayscale(.75) contrast(.75) brightness(.96);
		transition: all .4s cubic-bezier(.22, 1, .36, 1)
	}

	.button.icon-button {
		gap: 0;
		padding: 0;
		place-self: center
	}

	.button.icon-button>* {
		align-items: center;
		align-items: space-evenly;
		display: inline-flex;
		display: flex;
		gap: .5ex;
		height: 100%;
		justify-content: center;
		padding: 10px 35px;
		padding-inline: clamp(20px, 2.5vw, 35px);
		padding-inline: clamp(20px, min(2.5vw, 1.5em), 35px)
	}

	.button.icon-button .icon {
		background-color: transparent;
		background-color: rgba(0, 0, 0, .16);
		font-size: 1.5em;
		padding-inline: clamp(20px, min(2.5vw, 1.5em), 24px)
	}

	.button.icon-button .icon.small-padding {
		padding-inline: 10px
	}

	.button,
	.ql-html-buttonCancel,
	.ql-html-buttonOk {
		--clr-500: var(--clr-blue-desaturated-500);
		--clr-600: var(--clr-blue-desaturated-600);
		--clr-700: var(--clr-blue-desaturated-700)
	}

	.button.primary,
	.ql-html-buttonOk {
		--clr-500: var(--clr-blue-500);
		--clr-600: var(--clr-blue-600);
		--clr-700: var(--clr-blue-700)
	}

	.button.danger {
		--clr-500: var(--clr-red-500);
		--clr-600: var(--clr-red-600);
		--clr-700: var(--clr-red-700)
	}

	.button.success {
		--clr-500: var(--clr-green-desaturated-500);
		--clr-600: var(--clr-green-desaturated-600);
		--clr-700: var(--clr-green-desaturated-700)
	}

	.button.warning,
	.ql-html-buttonCancel {
		--clr-500: var(--clr-red-desaturated-500);
		--clr-600: var(--clr-red-desaturated-600);
		--clr-700: var(--clr-red-desaturated-700)
	}

	.invert-colors .button {
		background: var(--clr-600);
		border: 1px solid hsla(0, 0%, 100%, .1);
		filter: invert(1) hue-rotate(180deg);
		outline-color: #fff
	}

	.invert-colors .button:hover:not([disabled]) {
		background: var(--clr-700)
	}

	.invert-colors .button:active:not([disabled]) {
		background: var(--clr-500)
	}

	.invert-colors .button[disabled] {
		cursor: default;
		filter: grayscale(.75) contrast(.75) brightness(.96) invert(1) hue-rotate(180deg)
	}

	.invert-colors .button>* {
		background-color: rgba(0, 0, 0, .16)
	}

	.invert-colors .button .icon {
		background-color: transparent;
		border-inline-start: 1px solid hsla(0, 0%, 100%, .05)
	}
}

@layer utility {
	.flexi {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: clamp(20px, 5vw, 35px);
		justify-content: flex-start
	}

	.flow>:where(:not(:first-child)) {
		margin-block-start: var(--flow-space, 1em)
	}

	.hidden {
		display: none !important
	}

	@media (max-width:30em) {
		.hide-small {
			display: none !important
		}
	}

	@media (max-width:50em) {
		.hide-medium {
			display: none !important
		}
	}

	.sr-only {
		clip: rect(0, 0, 0, 0);
		border: 0;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px
	}

	.border-top {
		border-top: 1px solid hsl(var(--clr-primary-hsl)/.25);
		margin-block-start: 2rem;
		padding-block-start: 2.5rem
	}

	.margin-top {
		margin-block-start: 3rem
	}

	.d-block {
		display: blok
	}
}

@layer forms {
	:where(input:is([type=text], [type=email], [type=password]), textarea) {
		appearance: none;
		background-color: hsl(var(--clr-light-hsl)/.6);
		border: 1.5px solid hsl(var(--clr-dark-hsl)/.5);
		border-radius: .25rem;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
		color: hsl(var(--clr-dark-hsl)/1);
		font-size: 1rem;
		mix-blend-mode: luminosity;
		outline-offset: 0;
		outline-width: 1.5px;
		padding-block: .35rem;
		padding-inline: .75rem;
		position: relative;
		transition: all .3s cubic-bezier(.22, 1, .36, 1)
	}

	:where(input:is([type=text], [type=email], [type=password]), textarea):focus {
		background-color: hsl(var(--clr-light-hsl)/1);
		border: 1.5px solid hsl(var(--clr-darker-hsl)/.8);
		color: hsl(var(--clr-darker-hsl)/1)
	}

	:where(input:is([type=text], [type=email], [type=password]), textarea)::placeholder {
		color: hsl(var(--clr-dark-hsl)/.75)
	}

	:where(input:is([type=text], [type=email], [type=password]), textarea):focus::placeholder {
		color: hsl(var(--clr-dark-hsl)/.75)
	}

	label {
		color: var(--clr-blue-desaturated-700);
		font-weight: 600;
		letter-spacing: -.0175em
	}

	label:has(svg) {
		align-items: center;
		column-gap: .25em;
		display: flex;
		justify-content: center
	}

	label:has(svg) svg {
		color: var(--clr-blue-700);
		height: 1.5rem;
		width: 1.5rem
	}
}

@layer contract-typography {
	:root {
		--step--2: clamp(0.56rem, calc(0.8rem - 0.51vw), 0.69rem);
		--step--1: clamp(0.75rem, calc(0.9rem - 0.32vw), 0.83rem);
		--step-0: clamp(1.00rem, 1rem, 1.00rem);
		--step-1: clamp(1.20rem, calc(1.1rem + 0.51vw), 1.33rem);
		--step-2: clamp(1.44rem, calc(1.18rem + 1.3vw), 1.78rem);
		--step-3: clamp(1.73rem, calc(1.23rem + 2.47vw), 2.37rem);
		--step-4: clamp(2.07rem, calc(1.24rem + 4.18vw), 3.16rem);
		--step-5: clamp(2.49rem, calc(1.16rem + 6.63vw), 4.21rem)
	}

	#content {
		background: #fff;
		margin: 2rem 2rem 6rem;
		margin-inline: 0;
		margin-inline: auto;
		max-width: calc(100% - 2rem);
		max-width: 100%;
		padding: 0 2em;
		padding-inline: 2rem;
		width: clamp(10rem, 60rem, 80rem);
		width: 52em;
		width: 210mm
	}

	#content,
	#main {
		font-family: Montserrat', sans-serif;
		font-size: var(--step-0);
		line-height: 1.5;
		line-height: 1.75
	}

	ul, li {
    	font-family: 'Montserrat', sans-serif;
	}
	p {
		font-family: 'Montserrat', sans-serif;
		margin-bottom: .25rem !important;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-block-start: 1.25em;
		margin-bottom: .1rem !important;
	}

	h1, h2 {
		border-style: solid;
		border-width: 3px 0 1px;
		font-family: 'Montserrat', sans-serif;
		font-size: var(--step-2);
		font-weight: 400;
		letter-spacing: .1em;
		;;margin-block-end: 2rem;;;
		;;;;margin-block-start: 0.5rem;;;;;
		;;;padding: .25em 0;;;;
		position: relative;
		text-align: center
	}

	h1,
	h2 {
		line-height: 1.2em;
		text-transform: uppercase
	}

	h2 {
		font-family: Montserrat', sans-serif;
		font-family: Open Sans, sans-serif;
		font-size: var(--step-1);
		font-variation-settings: "wdth" 75;
		font-weight: 600;
		letter-spacing: .025em
	}

	h3,
	h4,
	h5,
	h6 {
		font-weight: 700
	}
}

@layer signatures {
	.compiled-signatures {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: space-around
	}

	.compiled-signature {
		align-items: start;
		display: grid;
		font-size: .75em;
		max-width: min(50%, 330px);
		max-width: clamp(calc(50% - 2rem), 348px, 100%);
		min-width: 300px;
		min-width: 200px
	}

	.compiled-signature img {
		background: #fff;
		border: 1px solid rgba(3, 33, 48, .25);
		margin-block: .15rem
	}

	#dev_signature,
	#hk {
		display: block;
		max-width: min(333px, 100%);
		max-width: min(370px, 100%)
	}

	#dev_signature[src=null] {
		display: none
	}

	.date-ip {
		font-family: Montserrat', sans-serif;
		font-size: 1.2em;
		font-variation-settings: "wdth" 75;
		font-weight: 400;
		letter-spacing: .025em;
		line-height: 1.2em
	}

	#ui-unsigned {
		margin: 0
	}

	#ui-signed {
		clear: both
	}

	#content>:not(#ui-unsigned, #dev_signature) {
		transition: opacity .3s ease-out
	}

	#signature-container {
		display: grid;
		gap: 1.5rem;
		place-items: start
	}

	@media (min-width:40rem) {
		#signature-container {
			place-items: end
		}
	}

	#canvas-container {
		aspect-ratio: 188/58.66;
		background: #fff;
		isolation: isolate;
		max-width: 100%;
		position: relative;
		transition: max-width .4s cubic-bezier(.22, 1, .36, 1), margin .6s ease-in-out;
		-webkit-user-select: none;
		user-select: none;
		width: 100%
	}

	#canvas-container:before {
		border-bottom: 2px solid #61594f;
		content: "";
		display: block;
		height: 0;
		inset: 70% 7.5% 0 7.5%;
		opacity: .95;
		pointer-events: none;
		position: absolute;
		z-index: -1
	}
}

@layer signatures {
	@media (max-width:40em) {
		#canvas-container {
			aspect-ratio: 200/80
		}
	}
}

@layer signatures {

	#generator-signature-pad,
	#signature-pad {
		border: 2px dashed rgba(3, 33, 48, .75);
		box-shadow: inset 0 0 5px 1px #ddd;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}

	#signature-controls {
		align-items: flex-start;
		display: flex;
		flex-direction: row;
		gap: 1.5rem;
		justify-content: center;
		width: 100%
	}

	.loading-signed {
		align-items: center;
		justify-content: center
	}

	@media (min-width:40rem) {
		.loading-signed {
			justify-content: center
		}
	}

	.loading-signed:not(.hidden) {
		display: flex
	}

	.to-go {
		opacity: 1;
		transform: none;
		transition: all .2s cubic-bezier(.26, .53, .74, 1.48), scale 1s ease-out
	}

	.to-go.gone {
		opacity: 0;
		transform: translateY(-20px)
	}

	#canvas-container.just-signed {
		max-width: 333px
	}

	@media (min-width:40rem) {
		#canvas-container.just-signed {
			margin-top: calc(-330px - 2rem)
		}
	}

	#canvas-container.just-signed #signature-pad {
		border: 1px dashed rgba(3, 33, 48, .25);
		box-shadow: inset 0 0 2px 1px hsla(0, 0%, 87%, .25)
	}

	#canvas-container.just-signed:before {
		opacity: 0
	}
}

@layer modal {
	.modal {
		--shadow-color: 200 3% 15%;
		--shadow-strength: 5%;
		--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
		border: 3px solid hsl(var(--shadow-color));
		border-radius: 1.5rem;
		box-shadow: var(--shadow-6);
		margin-block-start: auto;
		max-width: calc(100% - 1rem);
		padding: 0;
		position: fixed;
		z-index: 999
	}

	.modal::backdrop {
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		background-image: linear-gradient(132deg, rgba(31, 39, 41, .6), rgba(35, 41, 47, .6));
		cursor: pointer
	}

	.close-button {
		border-radius: 50%;
		height: 32px;
		margin: 1rem 0 0;
		max-width: 32px;
		padding: 0;
		position: relative;
		vertical-align: top;
		width: 32px
	}

	.close-button:active {
		background-color: #000;
		transition: none
	}

	.close-button:before {
		height: 2px;
		width: 50%
	}

	.close-button:after {
		height: 50%;
		width: 2px
	}

	.close-button:after,
	.close-button:before {
		background-color: currentColor;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
		transform-origin: center center
	}

	.qr-code-container {
		display: grid;
		gap: 1rem;
		justify-items: end;
		margin-block-end: 3.5rem;
		margin-inline: 1rem
	}

	#generator-qr-code,
	#qr-code {
		display: block;
		image-rendering: pixelated;
		margin: auto;
		max-width: 90%;
		width: min(500px, 90vw)
	}
}

@layer animated-entrances {
	@media (prefers-reduced-motion:reduce) {
		.animate {
			animation: none !important
		}
	}
}

@layer animated-entrances {
	.delay-1 {
		animation-delay: .6s
	}

	.delay-2 {
		animation-delay: .7s
	}

	.delay-3 {
		animation-delay: .8s
	}

	.delay-4 {
		animation-delay: .9s
	}

	.delay-5 {
		animation-delay: 1s
	}

	.delay-6 {
		animation-delay: 1.1s
	}

	.delay-7 {
		animation-delay: 1.2s
	}

	.delay-8 {
		animation-delay: 1.3s
	}

	.delay-9 {
		animation-delay: 1.4s
	}

	.delay-10 {
		animation-delay: 1.5s
	}

	.delay-11 {
		animation-delay: 1.6s
	}

	.delay-12 {
		animation-delay: 1.7s
	}

	.delay-13 {
		animation-delay: 1.8s
	}

	.delay-14 {
		animation-delay: 1.9s
	}

	.delay-15 {
		animation-delay: 2s
	}

	.delay-16 {
		animation-delay: 2.1s
	}

	:where(.animate) {
		animation-delay: .5s;
		animation-duration: .75s;
		animation-fill-mode: backwards;
		animation-name: animate-fade;
		animation-timing-function: cubic-bezier(.26, .53, .74, 1.48)
	}

	:where(.animate).fade {
		animation-name: animate-fade;
		animation-timing-function: ease
	}

	:where(.animate).pop {
		animation-name: animate-pop
	}

	:where(.animate).blur {
		animation-name: animate-blur;
		animation-timing-function: ease
	}

	:where(.animate).glow {
		animation-name: animate-glow;
		animation-timing-function: ease
	}

	:where(.animate).grow {
		animation-name: animate-grow
	}

	:where(.animate).splat {
		animation-name: animate-splat
	}

	:where(.animate).roll {
		animation-name: animate-roll
	}

	:where(.animate).flip {
		animation-name: animate-flip;
		perspective: 1000px;
		transform-style: preserve-3d
	}

	:where(.animate).spin {
		animation-name: animate-spin;
		perspective: 1000px;
		transform-style: preserve-3d
	}

	:where(.animate).slide {
		animation-name: animate-slide
	}

	:where(.animate).drop {
		animation-name: animate-drop;
		animation-timing-function: cubic-bezier(.77, .14, .91, 1.25)
	}

	:where(.animate).drop-up {
		animation-name: animate-drop-up;
		animation-timing-function: cubic-bezier(.77, .14, .91, 1.25)
	}
}

@layer animated-entrances {
	@media screen {
		@keyframes animate-fade {
			0% {
				opacity: 0
			}

			to {
				opacity: 1
			}
		}

		@keyframes animate-pop {
			0% {
				opacity: 0;
				transform: scale(.5)
			}

			to {
				opacity: 1;
				transform: scale(1)
			}
		}

		@keyframes animate-blur {
			0% {
				filter: blur(15px);
				opacity: 0
			}

			to {
				filter: blur(0);
				opacity: 1
			}
		}

		@keyframes animate-glow {
			0% {
				filter: brightness(3) saturate(3);
				opacity: 0;
				transform: scale(.8)
			}

			to {
				filter: brightness(1) saturate(1);
				opacity: 1;
				transform: scale(1)
			}
		}

		@keyframes animate-grow {
			0% {
				opacity: 0;
				transform: scaleY(0);
				visibility: hidden
			}

			to {
				opacity: 1;
				transform: scale(1)
			}
		}

		@keyframes animate-splat {
			0% {
				opacity: 0;
				transform: scale(0) rotate(20deg) translateY(-30px)
			}

			70% {
				opacity: 1;
				transform: scale(1.1) rotate(15deg)
			}

			85% {
				opacity: 1;
				transform: scale(1.1) rotate(15deg) translateY(-10px)
			}

			to {
				opacity: 1;
				transform: scale(1) rotate(0) translate(0)
			}
		}

		@keyframes animate-roll {
			0% {
				opacity: 0;
				transform: scale(0) rotate(1turn)
			}

			to {
				opacity: 1;
				transform: scale(1) rotate(0deg)
			}
		}

		@keyframes animate-flip {
			0% {
				opacity: 0;
				transform: rotateX(-120deg) scale(.9)
			}

			to {
				opacity: 1;
				transform: rotateX(0deg) scale(1)
			}
		}

		@keyframes animate-spin {
			0% {
				opacity: 0;
				transform: rotateY(-120deg) scale(.9)
			}

			to {
				opacity: 1;
				transform: rotateY(0deg) scale(1)
			}
		}

		@keyframes animate-slide {
			0% {
				opacity: 0;
				transform: translateY(20px)
			}

			to {
				opacity: 1;
				transform: translate(0)
			}
		}

		@keyframes animate-drop {
			0% {
				opacity: 0;
				transform: translateY(-300px) scale(.9, 1.1)
			}

			95% {
				opacity: 1;
				transform: translate(0) scale(.9, 1.1)
			}

			96% {
				opacity: 1;
				transform: translate(10px) scale(1.2, .9)
			}

			97% {
				opacity: 1;
				transform: translate(-10px) scale(1.2, .9)
			}

			98% {
				opacity: 1;
				transform: translate(5px) scale(1.1, .9)
			}

			99% {
				opacity: 1;
				transform: translate(-5px) scale(1.1, .9)
			}

			to {
				opacity: 1;
				transform: translate(0) scale(1)
			}
		}

		@keyframes animate-drop-up {
			0% {
				opacity: 0;
				transform: translateY(300px) scale(.9, 1.1)
			}

			95% {
				opacity: 1;
				transform: translate(0) scale(.9, 1.1)
			}

			96% {
				opacity: 1;
				transform: translate(-10px) scale(1.2, .9)
			}

			97% {
				opacity: 1;
				transform: translate(10px) scale(1.2, .9)
			}

			98% {
				opacity: 1;
				transform: translate(-5px) scale(1.1, .9)
			}

			99% {
				opacity: 1;
				transform: translate(5px) scale(1.1, .9)
			}

			to {
				opacity: 1;
				transform: translate(0) scale(1)
			}
		}
	}
}

details {
	--clr-500: var(--clr-blue-500);
	--clr-600: var(--clr-blue-600);
	--clr-700: var(--clr-blue-700);
	--clr-500-desaturated: var(--clr-blue-desaturated-500);
	--clr-600-desaturated: var(--clr-blue-desaturated-600);
	--clr-700-desaturated: var(--clr-blue-desaturated-700);
	max-height: 1.5em;
	overflow: hidden;
	transition: all .4s ease-in-out
}

details[open] {
	max-height: 90vh
}

details[open] summary {
	padding-block-end: .5em
}

details.danger {
	--clr-primary-hsl: var(--clr-danger-hsl);
	--clr-500: var(--clr-red-500);
	--clr-600: var(--clr-red-600);
	--clr-700: var(--clr-red-700);
	--clr-500-desaturated: var(--clr-red-desaturated-500);
	--clr-600-desaturated: var(--clr-red-desaturated-600);
	--clr-700-desaturated: var(--clr-red-desaturated-700)
}

details.success {
	--clr-primary-hsl: var(--clr-success-hsl);
	--clr-500: var(--clr-green-500);
	--clr-600: var(--clr-green-600);
	--clr-700: var(--clr-green-700);
	--clr-500-desaturated: var(--clr-green-desaturated-500);
	--clr-600-desaturated: var(--clr-green-desaturated-600);
	--clr-700-desaturated: var(--clr-green-desaturated-700)
}

details.warning {
	--clr-primary-hsl: var(--clr-warning-hsl);
	--clr-500: var(--clr-brown-500);
	--clr-600: var(--clr-brown-600);
	--clr-700: var(--clr-brown-700);
	--clr-500-desaturated: var(--clr-brown-desaturated-500);
	--clr-600-desaturated: var(--clr-brown-desaturated-600);
	--clr-700-desaturated: var(--clr-brown-desaturated-700)
}

details>summary {
	color: var(--clr-500);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 26px;
	max-width: min-content;
	transition: outline .4s cubic-bezier(.22, 1, .36, 1);
	-webkit-user-select: auto;
	user-select: auto;
	white-space: nowrap
}

details>summary:hover {
	background: none;
	color: var(--clr-700)
}

details>summary:focus-visible {
	border-radius: 8px;
	color: #000;
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: 2;
	text-underline-position: under
}

details>summary:focus-visible::marker {
	color: inherit
}

details>summary::marker {
	color: var(--clr-600-desaturated);
	color: hsl(var(--clr-primary-hsl)/.8)
}

details>summary:hover::marker {
	color: inherit
}

details>summary:active {
	transform: scale(.975);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), outline .4s cubic-bezier(.22, 1, .36, 1), background-color .2s linear
}

details>:nth-child(2):last-child {
	background: hsl(var(--clr-primary-hsl)/.1);
	border: 1.5px solid hsl(var(--clr-primary-hsl)/.075);
	border-radius: 8px;
	gap: 1rem;
	justify-content: flex-start;
	padding: .75rem 1rem 1rem;
	position: relative
}

details>:nth-child(2):last-child label {
	color: var(--clr-700-desaturated);
	font-weight: 600;
	letter-spacing: -.0175em
}

details>:nth-child(2):last-child>p:last-child:not([class]) {
	color: var(--clr-500-desaturated)
}

table {border-collapse: collapse;width: 100%;margin: 3px 0;font-size: 13px;}
th, td {border: 1px solid #ddd;padding: 2px 5px;vertical-align: top;font-weight:normal;}
th { background: #f6f6f6; text-align: left; }

/* force first column to 30% across all rows */
table { table-layout: fixed; }                 /* makes width rules respected */
th:first-child, td:first-child { width: 30%; white-space: nowrap; }
th:nth-child(2), td:nth-child(2) { width: 70%; word-break: break-word; }