.hw-field {
	position: relative;
	max-width: 68rem;
	margin-inline: auto;
	padding-block: clamp(3rem, 8vh, 6rem);
	min-height: 44rem;          
	overflow: hidden;
}

.hw-note {
	position: absolute;
	margin: 0;
	line-height: 1.34;
	text-wrap: balance;
	opacity: 0;
	will-change: transform, opacity;
	animation: hw-round 19s linear infinite both;
	animation-play-state: paused;
}

.hw-field.is-live .hw-note { animation-play-state: running; }

@keyframes hw-round {
	0%   { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
	4%   { opacity: 1; }
	72%  { opacity: 1; }
	82%  { opacity: 0; transform: translate3d(0, -3.5vh, 0) rotate(var(--tilt, 0deg)); }
	100% { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
}

.hw-note--1 { left:  2%; top:  3%; width: min(20ch, 40vw); font-family: var(--hand-1); font-size: clamp(1.5rem, 3.1vw, 2.3rem);  --tilt: -2.4deg; animation-delay: -13s; }
.hw-note--2 { right: 3%; top: 13%; width: min(17ch, 36vw); font-family: var(--hand-2); font-size: clamp(1.25rem, 2.4vw, 1.7rem); --tilt:  1.8deg; animation-delay: -11s; }
.hw-note--3 { left: 28%; top: 27%; width: min(19ch, 38vw); font-family: var(--hand-3); font-size: clamp(1.35rem, 2.7vw, 1.95rem);--tilt: -1.2deg; animation-delay: -10s; }
.hw-note--4 { left:  4%; top: 41%; width: min(21ch, 42vw); font-family: var(--hand-4); font-size: clamp(1.2rem, 2.3vw, 1.6rem);  --tilt:  2.9deg; animation-delay:  -8s; }
.hw-note--5 { right: 5%; top: 54%; width: min(16ch, 34vw); font-family: var(--hand-5); font-size: clamp(1.6rem, 3.3vw, 2.5rem);  --tilt: -3.1deg; animation-delay:  -6s; }
.hw-note--6 { left: 24%; top: 68%; width: min(18ch, 38vw); font-family: var(--hand-1); font-size: clamp(1.4rem, 2.8vw, 2rem);    --tilt:  1.4deg; animation-delay:  -4s; }
.hw-note--7 { left:  3%; top: 82%; width: min(20ch, 40vw); font-family: var(--hand-2); font-size: clamp(1.35rem, 2.7vw, 1.9rem); --tilt: -1.8deg; animation-delay:  -2s; }
.hw-note--8 { right: 4%; top: 34%; width: min(18ch, 36vw); font-family: var(--hand-3); font-size: clamp(1.05rem, 1.9vw, 1.35rem);--tilt:  2.2deg; animation-delay:   0s; }
.hw-note--9 { right: 6%; top: 74%; width: min(19ch, 38vw); font-family: var(--hand-4); font-size: clamp(1rem, 1.8vw, 1.3rem);    --tilt: -2.6deg; animation-delay:   2s; }
.hw-note--10{ left: 30%; top: 10%; width: min(18ch, 36vw); font-family: var(--hand-5); font-size: clamp(1.3rem, 2.6vw, 1.8rem);  --tilt:  1.1deg; animation-delay:   4s; }

@media (max-width: 40rem) {
	.hw-field { min-height: 40rem; padding-inline: 1.1rem; }
	.hw-note  { width: auto !important; max-width: 21ch; font-size: 1.5rem !important; }

	@keyframes hw-round {
		0%   { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
		5%   { opacity: 1; }
		42%  { opacity: 1; }
		52%  { opacity: 0; transform: translate3d(0, -3.5vh, 0) rotate(var(--tilt, 0deg)); }
		100% { opacity: 0; transform: translate3d(0, 3vh, 0)    rotate(var(--tilt, 0deg)); }
	}

	.hw-note--1 { left: 0;   right: auto; top:  4%; }
	.hw-note--2 { right: 0;  left: auto;  top: 22%; text-align: right; }
	.hw-note--3 { left: 8%;  right: auto; top: 40%; }
	.hw-note--4 { left: 0;   right: auto; top: 58%; }
	.hw-note--5 { right: 0;  left: auto;  top: 76%; text-align: right; }
	.hw-note--6 { left: 6%;  right: auto; top: 12%; }
	.hw-note--7 { left: 0;   right: auto; top: 30%; }
	.hw-note--8 { right: 0;  left: auto;  top: 48%; text-align: right; }
	.hw-note--9 { right: 2%; left: auto;  top: 66%; text-align: right; }
	.hw-note--10{ left: 4%;  right: auto; top: 84%; }

	.hw-note { --tilt: -1deg; }
	.hw-note--2, .hw-note--4, .hw-note--6, .hw-note--8, .hw-note--10 { --tilt: 1deg; }
}

@media (min-width: 900px) {
	.hw-field { min-height: 46rem; max-width: 100%; padding-inline: clamp(30px, 4vw, 70px); }
	.hw-note  { font-size: clamp(2rem, 2.6vw, 3.1rem) !important; }
}