:root {
	interpolate-size: allow-keywords;
}

*,
*::before,
*::after {
	margin: 0;
	box-sizing: border-box;
}

body,
html {
	min-height: 100%;
}

body {
	font-size: 1.05rem;
	line-height: 1.5;
	letter-spacing: 0.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	object-fit: cover;
}

input,
button,
textarea,
select {
	font: inherit;
	font-size: inherit;
}

span,
p,
h1,
h2,
h3,
h4 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p,
li,
figcaption {
	text-wrap: pretty;
	max-width: 65ch;
}

h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

ul,
ol {
	list-style: none;
}

:target {
	scroll-margin-block: 5ex;
}

a {
	color: currentColor;
}

/********************* dialog *********************/
body:has(dialog[open]) {
	overflow: hidden;
}

dialog {
	margin: auto;
	border: 2px solid var(--color-muted);
	border-radius: 4px;
	width: 50vw;
	height: 50vh;
	opacity: 0;
	translate: 0 100vh;
	transition: all 400ms ease-in-out allow-discrete;

	&[open] {
		opacity: 1;
		translate: 0 0;

		@starting-style {
			opacity: 0;
			translate: 0 100vh;
		}

		&::backdrop {
			opacity: 1;
		}
	}

	&::backdrop {
		opacity: 0;
		backdrop-filter: blur(16px);
		transition: all 300ms ease-in-out allow-discrete;
	}
}

@starting-style {
	dialog[open]::backdrop {
		opacity: 0;
	}
}

/********************* popover *********************/
[popover] {
	font-size: 1.2rem;
	padding: 10px;
}

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1);
}

[popover] {
	opacity: 0;
	transform: scaleX(0);
	transition: all 0.7s allow-discrete;
}

@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scaleX(0);
	}
}