main { display:flex; justify-content:center; padding:100px 0; min-height:100vh; }
main > .container { width:100%; max-width:1280px; }

main h1 { margin-top:60px; display:flex; align-items:center; }
main h1 span { position:relative; font-size:40px; font-weight:500; }
main h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }

.jw-app-nav { display:flex; align-items:center; gap:10px; }
.jw-app-nav a { background:#fff; height:25px; font-size:12px; border: 1px solid #ccc; border-radius:5px; padding:0 10px; display:flex; justify-content:center; align-items:center; }
.jw-app-nav a.on { background:#FE8130; color:#fff; border: 1px solid #FE8130; }

	

.audio-link { display: block; margin-top: 50px; font-size: 12px; color: #555; }
#sub020501 { display: flex; justify-content: center; align-items: center; height: 100%; }
#sub020501 .player-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; position: relative; }
#sub020501 .fireworks { position: absolute; inset: -140px; width: calc(100% + 280px); height: calc(100% + 280px); pointer-events: none; max-width: none; max-height: none; }
#sub020501 .monster-wrap { position: absolute; inset: -140px; pointer-events: none; }
#sub020501 .monster { position: absolute; width: 170px; height: 150px; transform-origin: 50% 92%; --by: 0; --beat: 0; --sx: 0; --rz: 0deg; transform: translateX(calc(var(--sx) * 1px)) translateY(calc(var(--by) * -1px)) rotate(calc(var(--rot, 0deg) + var(--rz))) scaleX(calc(1 + (var(--beat) * 0.14))) scaleY(calc(1 - (var(--beat) * 0.16))); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)); border: 5px solid #111; box-shadow: 0 18px 0 rgba(0, 0, 0, 0.08); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.10)); }
#sub020501 .monster::before { content: ""; position: absolute; left: 14px; top: 12px; width: 42%; height: 46%; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0.0) 100%); transform: rotate(-12deg); opacity: 0.95; }
#sub020501 .monster::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: radial-gradient(120px 90px at 50% 84%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.0) 70%); opacity: 0.75; pointer-events: none; }
#sub020501 .monster .face { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 70%; height: 50%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#sub020501 .monster .eye { width: 12px; height: 12px; background: #111; border-radius: 999px; display: inline-block; position: relative; animation: blink 3.8s infinite; }
#sub020501 .monster .eye::after { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
#sub020501 .monster .mouth { position: absolute; left: 50%; top: 72%; transform: translateX(-50%); width: 18px; height: 10px; border: 3px solid #111; border-top: 0; border-left: 0; border-right: 0; border-radius: 0 0 999px 999px; opacity: 0.88; animation: talk 1.7s ease-in-out infinite; }
#sub020501 .monster .cheek { position: absolute; top: 64%; width: 14px; height: 10px; border-radius: 999px; background: rgba(255, 120, 160, 0.25); }
#sub020501 .monster .cheek.l { left: 14%; }
#sub020501 .monster .cheek.r { right: 14%; }
#sub020501 .monster.m1 { left: -160px; top: -10px; width: 150px; height: 150px; border-radius: 28px; --rot: -14deg; background: linear-gradient(180deg, rgba(255, 230, 240, 0.95), rgba(255, 230, 240, 0.55)); }
#sub020501 .monster.m2 { right: -160px; top: -10px; width: 150px; height: 150px; border-radius: 18px; --rot: 6deg; background: linear-gradient(180deg, rgba(220, 245, 255, 0.95), rgba(220, 245, 255, 0.55)); }
#sub020501 .monster.m3 { left: -170px; top: 220px; width: 170px; height: 150px; border-radius: 95px 95px 34px 34px; --rot: 0deg; background: linear-gradient(180deg, rgba(255, 240, 210, 0.95), rgba(255, 240, 210, 0.55)); }
#sub020501 .monster.m4 { right: -170px; top: 220px; width: 170px; height: 150px; border-radius: 95px 95px 34px 34px; --rot: 0deg; background: linear-gradient(180deg, rgba(230, 255, 235, 0.95), rgba(230, 255, 235, 0.55)); }
#sub020501 .monster.m5 { left: 50%; top: -140px; width: 190px; height: 190px; --rot: 0deg; clip-path: polygon(50% 4%, 62% 30%, 92% 34%, 70% 52%, 78% 82%, 50% 66%, 22% 82%, 30% 52%, 8% 34%, 38% 30%); background: linear-gradient(180deg, rgba(245, 245, 245, 0.95), rgba(245, 245, 245, 0.55)); transform: translateX(-50%) translateX(calc(var(--sx) * 1px)) translateY(calc(var(--by) * -1px)) rotate(calc(var(--rot, 0deg) + var(--rz))) scaleX(calc(1 + (var(--beat) * 0.14))) scaleY(calc(1 - (var(--beat) * 0.16))); }

@keyframes blink {
	0%, 92%, 100% { transform: scaleY(1); }
	94% { transform: scaleY(.1); }
	96% { transform: scaleY(1); }
}

@keyframes talk {
	0%, 100% { transform: translateX(-50%) scaleY(1); }
	50% { transform: translateX(-50%) scaleY(.6); }
}

#sub020501 .play-btn { width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.18); font-size: 16px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
#sub020501 .play-btn.is-playing { background: rgba(255, 255, 255, 0.35); }
#sub020501 .eq { display: flex; align-items: flex-end; gap: 6px; height: 30px; }
#sub020501 .eq span { display: inline-block; width: 6px; height: 8px; background: #111; border-radius: 3px; transform-origin: bottom; }
#sub020501 .eq.is-idle span { animation: eq-bounce 1s ease-in-out infinite; }
#sub020501 .eq.is-idle span:nth-child(2) { animation-delay: .1s; height: 12px; }
#sub020501 .eq.is-idle span:nth-child(3) { animation-delay: .2s; height: 16px; }
#sub020501 .eq.is-idle span:nth-child(4) { animation-delay: .3s; height: 10px; }
#sub020501 .eq.is-idle span:nth-child(5) { animation-delay: .4s; height: 14px; }
#sub020501 .eq.is-idle span:nth-child(6) { animation-delay: .5s; height: 12px; }
#sub020501 .eq.is-idle span:nth-child(7) { animation-delay: .6s; height: 16px; }
#sub020501 .eq.is-idle span:nth-child(8) { animation-delay: .7s; height: 10px; }
#sub020501 .eq.is-idle span:nth-child(9) { animation-delay: .8s; height: 14px; }
#sub020501 .eq.is-idle span:nth-child(10) { animation-delay: .9s; height: 12px; }

@keyframes eq-bounce {
	0%, 100% { transform: scaleY(0.5); }
	50% { transform: scaleY(1.2); }
}

@media (max-width: 768px) {
	#sub020501 .monster.m1, #sub020501 .monster.m2, #sub020501 .monster.m3, #sub020501 .monster.m4 {
		width: 85px;
		height: 75px;
		border: 1px solid #111; box-shadow: 0 18px 0 rgba(0, 0, 0, 0.08);
	}
	#sub020501 .monster.m1 {
		left: 80px;
		top: 50px;
	}
	#sub020501 .monster.m2 {
		right: 80px;
		top: 50px;
	}
	#sub020501 .monster.m3 {
		left: 80px;
		top: 200px;
	}
	#sub020501 .monster.m4 {
		right: 80px;
		top: 200px;
	}
}

.vol-wrap { position:relative; width: 220px; height: 28px; display: flex; align-items: center; transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: transform .10s linear; will-change: transform; }
.vol { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; --p: 100%; background: linear-gradient(to right, #ff7a2f 0 var(--p), rgba(0,0,0,.12) var(--p) 100%); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; background:#d05300; box-shadow: 0 10px 24px rgba(0,0,0,.18); cursor: pointer; }
.vol::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background:#d05300; border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.18); cursor: pointer; }


@media (max-width: 768px) {
	main > .container { padding-left: 10px; padding-right: 10px; }
}