아래의 [주제 및 데이터]와 [기능 요구사항]을 바탕으로, 메모장에 복사해서 바로 실행할 수 있는 완벽한 '단일 HTML 파일(Tailwind CSS, Vanilla JS 사용)' 코드를 작성해 줘.

### 1. [주제 및 데이터] (이 부분을 내 맘대로 수정하세요!)

* 게임 테마: 과일 (예: 상큼하고 통통 튀는 과일 리듬게임)

* 메인 컬러: 노란색과 주황색 (배경, 버튼 등에 어울리게 적용)

* 사용할 폰트: 구글 '주아체(Jua)' (전체 텍스트에 적용)

* 아이템 8개 ( 아이들과 의견나눠서 적기)

(※ 주의: 이모지가 깨질 우려가 있는 최신 이모지라면, 텍스트가 아닌 SVG 코드로 아이콘을 직접 그려서 넣어줘.)

### 2. [기능 요구사항]

* 화면 구성:

1. 첫 진입 시, 테마에 맞는 화려한 색감과 이모지가 둥둥 떠다니는 '인트로 화면' 배치 (터치 시 게임 시작, 이 때 Web Audio API 초기화 필수).

2. 본 화면 상단에 1단계~5단계까지 바로 이동할 수 있는 동그란 버튼 배치.

3. 4x2(총 8칸)의 카드 그리드 레이아웃. 카드는 굵은 테두리와 큰 폰트로 뚜렷하게 표시.

* 컨트롤 패널:

- [게임 시작/정지] 버튼

- [소리 켜기/끄기] 버튼

- [✏️ 직접 리듬패턴 만들기] 버튼 (클릭 시 카드를 눌러 아이템 변경 가능한 편집 모드, 누른 후엔 '💾 편집 완료하기'로 글자 변경)

- [🎉 성공!] 버튼 (누르면 게임 멈추고 빰빠라밤~ 팡파르 소리와 함께 canvas-confetti 라이브러리로 폭죽 터짐)

- 속도 조절 슬라이더 (60 BPM ~ 최대 200 BPM)

* 리듬 및 오디오 (Web Audio API 사용 필수):

- 재생 시 메트로놈 소리가 기본으로 깔림 (1박: 킥드럼처럼 묵직한 쿵, 2~4박: 하이햇처럼 칫).

- 테두리(하이라이트)가 박자에 맞춰 순서대로 이동함.

- 테두리가 이동할 때마다 해당 칸에 있는 아이템의 고유한 합성음이 재생되어야 함 (Oscillator, Gain 활용).

* 단계별 구성 (배열 로직):

- 1단계: 아이템 A 4번, 아이템 B 4번 (매우 단순한 구조)

- 2~4단계: 점진적으로 아이템 종류가 추가되고 섞임.

- 5단계: 최소 5~6가지 아이템이 복잡하게 섞인 최고 난이도.

* **디바이스에 따라 화면이 최적화 될 수 있는 반응형 레이아웃을 구성해줘 위 요구사항을 모두 충족하는 깔끔하고 완벽한 HTML 코드를 한 번에 출력해 줘.

• 테마 분위기: 전체적인 화면 배경과 색감은 <파스텔톤 / 공룡테마 / 우주테마 / 숲속테마> 느낌으로 예쁘게 꾸며줘.

• 시각적 직관성: 숫자를 매우 크게 보여주고, 아직 글자를 읽지 못하는 아이들도 그림이 변하는 모습만으로 남은 시간을 직관적으로 이해하고 행동을 조절할 수 있게 해줘.

[사용 환경]

• 디바이스: 교실에 있는 <전자칠판 / 태블릿 / 스마트TV>에 띄워놓고 사용할 거야.

• 레이아웃: 16:9 비율의 전체 화면으로 구성해 줘.

• 반응형: 교실 맨 뒤에 있는 아이들도 잘 볼 수 있도록 모든 요소를 큼직하게 배치하고, 어떤 디바이스에서도 화면이 깨지지 않는 반응형 레이아웃을 적용해 줘.