PageSourceSearch

https://webharmonium.com/tutorial/

html webharmonium.com collected 2026-10-08 12:06:48 UTC 79,566 bytes, 247 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="light"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Harmonium Songs &amp; Tutorial | Practice Harmonium on Keyboard</title><meta name="description" content="Play web harmonium songs using moving score lanes. Explore harmonium song keys, guided practice, and learn to play the harmonium directly on your keyboard."><meta name="generator" content="Astro v5.18.1"><link rel="canonical" href="https://webharmonium.com/tutorial/"><meta property="og:type" content="website"><meta property="og:site_name" content="Web Harmonium"><meta property="og:title" content="Web Harmonium Songs &#38; Tutorial | Practice Harmonium on Keyboard"><meta property="og:description" content="Play web harmonium songs using moving score lanes. Explore harmonium song keys, guided practice, and learn to play the harmonium directly on your keyboard."><meta property="og:url" content="https://webharmonium.com/tutorial/"><meta property="og:image" content="https://webharmonium.com/og-image.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Web Harmonium Songs &#38; Tutorial | Practice Harmonium on Keyboard"><meta name="twitter:description" content="Play web harmonium songs using moving score lanes. Explore harmonium song keys, guided practice, and learn to play the harmonium directly on your keyboard."><meta name="twitter:image" content="https://webharmonium.com/og-image.png"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/logo.svg" type="image/svg+xml"><link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"><link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#7c3aed"><link rel="manifest" href="/manifest.webmanifest">
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Web Harmonium","applicationCategory":"MusicApplication","operatingSystem":"Any","url":"https://webharmonium.com","description":"Play web harmonium songs using moving score lanes. Explore harmonium song keys, guided practice, and learn to play the harmonium directly on your keyboard.","browserRequirements":"Requires JavaScript and a modern browser with Web Audio API support.","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"featureList":["Online harmonium playable in the browser","Keyboard support","MIDI support","Transpose control","Octave control","Reverb control"]}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"ItemList","itemListElement":[{"@type":"ListItem","position":1,"name":"Two Tigers","description":"A familiar beginner melody for steady step-by-step note matching on the Web Harmonium."},{"@type":"ListItem","position":2,"name":"Mo Li Hua (Jasmine Flower)","description":"A standard Jiangsu folk-song teaching score in 1=E, 2/4 meter."},{"@type":"ListItem","position":3,"name":"Twinkle, Twinkle, Little Star","description":"A globally familiar beginner melody with clear repetition and stable phrase shapes."},{"@type":"ListItem","position":4,"name":"Ode to Joy","description":"A public-domain classical melody with slightly longer phrases and clean stepwise motion."}]}</script>
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-SSK8K71N67
vendor: 11 bytes, line 1
1"></script>
1<script>
2          
vendor: 158 bytes, lines 2-6
2window.dataLayer = window.dataLayer || [];
3          function gtag(){dataLayer.push(arguments);}
4          gtag('js', new Date());
5
6          gtag('config', '
6G-SSK8K71N67
vendor: 12 bytes, lines 6-7
6');
7        
7</script>
7<script async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7231086451430163"></script>
7<link rel="stylesheet" href="/_astro/about.BQVDhIq3.css"></head> <body> <div class="fixed inset-0 pointer-events-none overflow-hidden z-0" aria-hidden="true"> <div class="absolute select-none animate-float" style="left:7%;top:12%;animation-delay:0s;animation-duration:14s;color:rgba(180,83,9,0.45);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ♪ </div><div class="absolute select-none animate-float" style="left:88%;top:22%;animation-delay:2.5s;animation-duration:16s;color:rgba(180,83,9,0.3);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ♫ </div><div class="absolute select-none animate-float" style="left:5%;top:68%;animation-delay:1.2s;animation-duration:12s;color:rgba(120,100,60,0.3);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ♬ </div><div class="absolute select-none animate-float" style="left:92%;top:72%;animation-delay:3.8s;animation-duration:18s;color:rgba(180,83,9,0.2);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> 𝄞 </div> </div>  <div class="min-h-screen bg-white dark:bg-[#0d1117]"> <header class="relative z-30 py-3"> <div class="px-4 sm:px-6"> <div class="mx-auto max-w-7xl"> <div class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-white/90 px-4 py-2.5 shadow-[0_2px_16px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80"> <!-- Logo mark --> <a href="/" class="flex items-center gap-3 group"> <div class="flex h-11 w-11 items-center justify-center rounded-2xl border border-amber-200/70 bg-white shadow-[0_6px_18px_rgba(180,83,9,0.12)] transition-transform group-hover:scale-[1.03] dark:border-white/10 dark:bg-white/5"> <img src="/logo.svg" alt="Web Harmonium" class="h-7 w-7"> </div> <div> <div class="text-sm font-bold text-slate-950 dark:text-white leading-tight">Web Harmonium</div> <div class="text-[10px] text-slate-400 dark:text-slate-500 leading-tight tracking-wide">Free Online Harmonium</div> </div> </a> <!-- Actions --> <div class="flex items-center gap-5"> <nav class="hidden md:flex items-center gap-6"> <a href="/web-harmonium-notes/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-slate-600 dark:text-slate-300">
8Notes
9</a> <a href="/tutorial/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-amber-600 dark:text-amber-400">
10Tutorial
11</a> <a href="/blog/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-slate-600 dark:text-slate-300">
12Blog
13</a> </nav> <div class="flex items-center gap-2"> <a href="/#tool" class="hidden h-9 items-center justify-center rounded-xl bg-amber-600 px-4 text-[13px] font-semibold text-white shadow-[0_2px_8px_rgba(180,83,9,0.3)] hover:bg-amber-700 transition-colors lg:inline-flex">
14Play Now
15</a> <button type="button" data-theme-toggle aria-label="Toggle theme" class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 hover:text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:text-white transition-colors"> <svg class="h-4 w-4 block dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg> <svg class="h-4 w-4 hidden dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg> </button> </div> </div> </div> </div> </div></header> <main class="px-4 py-12 sm:px-6 lg:py-16"> <div class="mx-auto max-w-7xl"> <div class="mb-10 grid gap-6 lg:grid-cols-[0.92fr_1.08fr] lg:items-end"> <div> <div class="inline-flex items-center gap-2 rounded-full border border-amber-500/25 bg-amber-500/10 px-3.5 py-1.5 text-[12px] font-semibold uppercase tracking-[0.18em] text-amber-400"> <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
16Practice Mode
17</div> <h1 class="mt-5 font-serif text-4xl font-bold text-slate-950 dar
17k:text-white sm:text-5xl">
18Web Harmonium Songs: Guided Practice and Harmonium Song Keys.
19</h1> </div> <div class="space-y-4"> <p class="text-sm leading-7 text-slate-600 dark:text-slate-300">
20This page is for practice, not note reference. Use auto-play to hear the phrase, switch to guided practice to follow the moving score, or play manually and advance note by note.
21</p> <a href="/web-harmonium-notes/" class="inline-flex h-10 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
22Need the note chart? Open Web Harmonium Notes
23</a> </div> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
23<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
23<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
23<astro-island uid="ZDTrLh" prefix="r1" component-url="/_astro/TutorialStudio.D-Mpa525.js" component-export="default" renderer-url="/_astro/client.Dc9Vh3na.js" props="{}" ssr client="load" opts="{&quot;name&quot;:&quot;TutorialStudio&quot;,&quot;value&quot;:true}" await-children><div class="space-y-5"><style>
24        .score-ui-label::before {
25          display: inline-block;
26        }
27
28        .score-line::before {
29          display: block;
30        }
31
32        .score-label-lesson-details::before {
33          content: "Lesson Details";
34        }
35
36        .score-label-current-state::before {
37          content: "Current lesson state";
38        }
39
40        .score-label-full-score::before {
41          content: "Full score";
42        }
43
44        .score-label-numbered-notation::before {
45          content: "Numbered notation";
46        }
47
48        .score-label-sargam::before {
49          content: "Sargam";
50        }
51
52        .score-label-lyrics::before {
53          content: "Lyrics";
54        }
55
56        .score-line[data-song="two-tigers"][data-kind="numbered"][data-index="0"]::before { content: "1. 1 2 3 1"; }
57.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="1"]::before { content: "2. 1 2 3 1"; }
58.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="2"]::before { content: "3. 3 4 5 -"; }
59.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="3"]::before { content: "4. 3 4 5 -"; }
60.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="4"]::before { content: "5. 5 6 5 4"; }
61.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="5"]::before { content: "6. 3 1"; }
62.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="6"]::before { content: "7. 5 6 5 4"; }
63.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="7"]::before { content: "8. 3 1"; }
64.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="8"]::before { content: "9. 1 5 1 -"; }
65.score-line[data-song="two-tigers"][data-kind="numbered"][data-index="9"]::before { content: "10. 1 5 1 -"; }
66.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="0"]::before { content: "1. S R G S"; }
67.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="1"]::before { content: "2. S R G S"; }
68.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="2"]::before { content: "3. G M P -"; }
69.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="3"]::before { content: "4. G M P -"; }
70.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="4"]::before { content: "5. P D P M"; }
71.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="5"]::before { content: "6. G S"; }
72.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="6"]::before { content: "7. P D P M"; }
73.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="7"]::before { content: "8. G S"; }
74.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="8"]::before { content: "9. S P S -"; }
75.score-line[data-song="two-tigers"][data-kind="sargam"][data-index="9"]::before { content: "10. S P S -"; }
76.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="0"]::before { content: "1. 两只老虎"; }
77.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="1"]::before { content: "2. 两只老虎"; }
78.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="2"]::before { content: "3. 跑得快"; }
79.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="3"]::before { content: "4. 跑得快"; }
80.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="4"]::before { content: "5. 一只没有耳朵"; }
81.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="5"]::before { content: "6. 一只没有尾巴"; }
82.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="6"]::before { content: "7. 真奇怪"; }
83.score-line[data-song="two-tigers"][data-kind="lyrics"][data-index="7"]::before { content: "8. 真奇怪"; }
84.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="0"]::before { content: "1. 3 35 | 6 1' 1'6 | 5 56 | 5 0"; }
85.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="1"]::before { content: "2. 3 35 | 6 1' 1'6 | 5 56 | 5 0"; }
86.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="2"]::before { content: "3. 5 5 | 5 35 | 6 6 | 5 0"; }
87.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="3"]::before { content: "4. 3 23 | 5 32 | 1 12 | 1 0"; }
88.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="4"]::before { content: "5. 3 2 13 | 2. 3 | 5 61' | 5 -"; }
89.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="5"]::before { content: "6. 2 35 | 2 3 16 | 5 - | 6 1"; }
90.score-line[data-song="jasmine-flower"][data-kind="numbered"][data-index="6"]::before { content: "7. 2. 3 | 1 2 | 1 6 | 5 - | 5 -"; }
91.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="0"]::before { content: "1. G GP | D á¹  á¹ D | P PD | P 0"; }
92.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="1"]::before { content: "2. G GP | D á¹  á¹ D | P PD | P 0"; }
93.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="2"]::before { content: "3. P P | P GP | D D | P 0"; }
94.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="3"]::before { content: "4. G RG | P PG | S SR | S 0"; }
95.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="4"]::before { content: "5. G R SG | R. G | P D á¹  | P -"; }
96.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="5"]::before { content: "6. R GP | R G S Ḍ | P - | D S"; }
97.score-line[data-song="jasmine-flower"][data-kind="sargam"][data-index="6"]::before { content: "7. R. G | S R | S Ḍ | P - | P -"; }
98.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="0"]::before { content: "1. 好一朵美丽的茉莉花"; }
99.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="1"]::before { content: "2. 好一朵美丽的茉莉花"; }
100.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="2"]::before { content: "3. 芬芳美丽满枝桠"; }
101.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="3"]::before { content: "4. 又香又白人人夸"; }
102.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="4"]::before { content: "5. 让我来将你摘下"; }
103.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="5"]::before { content: "6. 送给别人家"; }
104.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="6"]::before { content: "7. 茉莉花"; }
105.score-line[data-song="jasmine-flower"][data-kind="lyrics"][data-index="7"]::before { content: "8. 茉莉花"; }
106.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="0"]::before { content: "1. 1 1 5 5 | 6 6 5 -"; }
107.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="1"]::before { content: "2. 4 4 3 3 | 2 2 1 -"; }
108.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="2"]::before { content: "3. 5 5 4 4 | 3 3 2 -"; }
109.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="3"]::before { content: "4. 5 5 4 4 | 3 3 2 -"; }
110.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="4"]::before { content: "5. 1 1 5 5 | 6 6 5 -"; }
111.score-line[data-song="twinkle-twinkle"][data-kind="numbered"][data-index="5"]::before { content: "6. 4 4 3 3 | 2 2 1 -"; }
112.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="0"]::before { content: "1. S S P P | D D P -"; }
113.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="1"]::before { content: "2. M M G G | R R S -"; }
114.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="2"]::before { content: "3. P P M M | G G R -"; }
115.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="3"]::before { content: "4. P P M M | G G R -"; }
116.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="4"]::before { content: "5. S S P P | D D P -"; }
117.score-line[data-song="twinkle-twinkle"][data-kind="sargam"][data-index="5"]::before { content: "6. M M G G | R R S -"; }
118.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="0"]::before { content: "1. Twinkle, twinkle, little star"; }
119.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="1"]::before { content: "2. How I wonder what you are"; }
120.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="2"]::before { content: "3. Up above the world so high"; }
121.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="3"]::before { content: "4. Like a diamond in the sky"; }
122.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="4"]::before { content: "5. Twinkle, twinkle, little star"; }
123.score-line[data-song="twinkle-twinkle"][data-kind="lyrics"][data-index="5"]::before { content: "6. How I wonder what you are"; }
124.score-line[data-song="ode-to-joy"][data-kind="numbered"][data-index="0"]::before { content: "1. 3 3 4 5 | 5 4 3 2"; }
125.score-line[data-song="ode-to-joy"][data-kind="numbered"][data-index="1"]::before { content: "2. 1 1 2 3 | 3 2 2 -"; }
126.score-line[data-song="ode-to-joy"][data-kind="numbered"][data-index="2"]::before { content: "3. 3 3 4 5 | 5 4 3 2"; }
127.score-line[data-song="ode-to-joy"][data-kind="numbered"][data-index="3"]::before { content: "4. 1 1 2 3 | 2 1 1 -"; }
128.score-line[data-song="ode-to-joy"][data-kind="sargam"][data-index="0"]::before { content: "1. G G M P | P M G R"; }
129.score-line[data-song="ode-to-joy"][data-kind="sargam"][data-index="1"]::before { content: "2. S S R G | G R R -"; }
130.score-line[data-song="ode-to-joy"][data-kind="sargam"][data-index="2"]::before { content: "3. G G M P | P M G R"; }
131.score-line[data-song="ode-to-joy"][data-kind="sargam"][data-index="3"]::before { content: "4. S S R G | R S S -"; }
132        .lane-key-label::before, .lane-note-label::before, .lane-western-label::before { display: inline-block; }
133.lane-key-label[data-midi="rest"]::before { content: "•"; }
134.lane-note-label[data-midi="rest"]::before { content: "REST"; }
135.lane-western-label[data-midi="rest"]::before { content: ""; }
136.lane-key-label[data-midi="53"]::before { content: "S"; }
137.lane-note-label[data-midi="53"]::before { content: "Ä "; }
138.lane-western-label[data-midi="53"]::before { content: ""; }
139.lane-key-label[data-midi="54"]::before { content: "A"; }
140.lane-note-label[data-midi="54"]::before { content: "Ä "; }
141.lane-western-label[data-midi="54"]::before { content: "B"; }
142.lane-key-label[data-midi="55"]::before { content: "`"; }
143.lane-note-label[data-midi="55"]::before { content: "Ṁ"; }
144.lane-western-label[data-midi="55"]::before { content: "C"; }
145.lane-key-label[data-midi="56"]::before { content: "1"; }
146.lane-note-label[data-midi="56"]::before { content: "Ṗ"; }
147.lane-western-label[data-midi="56"]::before { content: ""; }
148.lane-key-label[data-midi="57"]::before { content: "Q"; }
149.lane-note-label[data-midi="57"]::before { content: "Ḍ"; }
150.lane-western-label[data-midi="57"]::before { content: "D"; }
151.lane-key-label[data-midi="58"]::before { content: "2"; }
152.lane-note-label[data-midi="58"]::before { content: "Ḍ"; }
153.lane-western-label[data-midi="58"]::before { content: ""; }
154.lane-key-label[data-midi="59"]::before { content: "W"; }
155.lane-note-label[data-midi="59"]::before { content: "Ṇ"; }
156.lane-western-label[data-midi="59"]::before { content: "E"; }
157.lane-key-label[data-midi="60"]::before { content: "E"; }
158.lane-note-label[data-midi="60"]::before { content: "Ṇ"; }
159.lane-western-label[data-midi="60"]::before { content: "F"; }
160.lane-key-label[data-midi="61"]::before { content: "4"; }
161.lane-note-label[data-midi="61"]::before { content: "S"; }
162.lane-western-label[data-midi="61"]::before { content: ""; }
163.lane-key-label[data-midi="62"]::before { content: "R"; }
164.lane-note-label[data-midi="62"]::before { content: "R"; }
165.lane-western-label[data-midi="62"]::before { content: "G"; }
166.lane-key-label[data-midi="63"]::before { content: "5"; }
167.lane-note-label[data-midi="63"]::before { content: "R"; }
168.lane-western-label[data-midi="63"]::before { content: ""; }
169.lane-key-label[data-midi="64"]::before { content: "T"; }
170.lane-note-label[data-midi="64"]::before { content: "G"; }
171.lane-western-label[data-midi="64"]::before { content: "A"; }
172.lane-key-label[data-midi="65"]::before { content: "Y"; }
173.lane-note-label[data-midi="65"]::before { content: "G"; }
174.lane-western-label[data-midi="65"]::before { content: "B"; }
175.lane-key-label[data-midi="66"]::before { content: "7"; }
176.lane-note-label[data-midi="66"]::before { content: "M"; }
177.lane-western-label[data-midi="66"]::before { content: ""; }
178.lane-key-label[data-midi="67"]::before { content: "U"; }
179.lane-note-label[data-midi="67"]::before { content: "M"; }
180.lane-western-label[data-midi="67"]::before { content: "C"; }
181.lane-key-label[data-midi="68"]::before { content: "8"; }
182.lane-note-label[data-midi="68"]::before { content: "P"; }
183.lane-western-label[data-midi="68"]::before { content: ""; }
184.lane-key-label[data-midi="69"]::before { content: "I"; }
185.lane-note-label[data-midi="69"]::before { content: "D"; }
186.lane-western-label[data-midi="69"]::before { content: "D"; }
187.lane-key-label[data-midi="70"]::before { content: "9"; }
188.lane-note-label[data-midi="70"]::before { content: "D"; }
189.lane-western-label[data-midi="70"]::before { content: ""; }
190.lane-key-label[data-midi="71"]::before { content: "O"; }
191.lane-note-label[data-midi="71"]::before { content: "N"; }
192.lane-western-label[data-midi="71"]::before { content: "E"; }
193.lane-key-label[data-midi="72"]::before { content: "P"; }
194.lane-note-label[data-midi="72"]::before { content: "N"; }
195.lane-western-label[data-midi="72"]::before { content: "F"; }
196.lane-key-label[data-midi="73"]::before { content: "-"; }
197.lane-note-label[data-midi="73"]::before { content: "á¹ "; }
198.lane-western-label[data-midi="73"]::before { content: ""; }
199.lane-key-label[data-midi="74"]::before { content: "["; }
200.lane-note-label[data-midi="74"]::before { content: "Ṙ"; }
201.lane-western-label[data-midi="74"]::before { content: "G"; }
202.lane-key-label[data-midi="75"]::before { content: "="; }
203.lane-note-label[data-midi="75"]::before { content: "Ṙ"; }
204.lane-western-label[data-midi="75"]::before { content: ""; }
205.lane-key-label[data-midi="76"]::before { content: "]"; }
206.lane-note-label[data-midi="76"]::before { content: "Ä "; }
207.lane-western-label[data-midi="76"]::before { content: "A"; }
208.lane-key-label[data-midi="77"]::before { content: "\\"; }
209.lane-note-label[data-midi="77"]::before { content: "Ä "; }
210.lane-western-label[data-midi="77"]::before { content: "B"; }
211.lane-key-label[data-midi="78"]::before { content: "'"; }
212.lane-note-label[data-midi="78"]::before { content: "Ṁ"; }
213.lane-western-label[data-midi="78"]::before { content: "C"; }
214.lane-key-label[data-midi="79"]::before { content: ";"; }
215.lane-note-label[data-midi="79"]::before { content: "Ṁ"; }
216.lane-western-label[data-midi="79"]::before { content: ""; }
217      </style><section class="rounded-[2rem] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.06)] dark:border-white/10 dark:bg-slate-900/70 sm:p-6"><div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"><div class="max-w-2xl"><div class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500 dark:text-slate-400">Tutorial Mode</div><h2 class="mt-2 font-serif text-3xl font-bold text-slate-950 dar
217k:text-white sm:text-4xl">Two Tigers</h2><p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">A familiar beginner melody for steady step-by-step note matching.</p></div><div class="grid gap-2 sm:grid-cols-3 lg:min-w-[420px]"><div class="rounded-[1.2rem] border border-slate-200 bg-slate-50 px-3 py-3 dark:border-white/10 dark:bg-white/5 sm:col-span-3"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Songs</div><div class="mt-2 grid gap-2 sm:grid-cols-2"><button type="button" class="rounded-xl border px-3 py-3 text-left transition-all border-amber-300 bg-amber-50 shadow-[0_10px_24px_rgba(180,83,9,0.12)] dark:border-amber-400/40 dark:bg-amber-500/10"><div class="text-sm font-semibold text-slate-950 dark:text-white">Two Tigers</div><div class="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">A familiar beginner melody for steady step-by-step note matching.</div></button><button type="button" class="rounded-xl border px-3 py-3 text-left transition-all border-slate-200 bg-white hover:border-amber-200 hover:bg-amber-50/50 dark:border-white/10 dark:bg-slate-950/60 dark:hover:border-amber-400/30 dark:hover:bg-white/10"><div class="text-sm font-semibold text-slate-950 dark:text-white">Mo Li Hua (Jasmine Flower)</div><div class="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">A standard Jiangsu folk-song teaching score in 1=E, 2/4 meter.</div></button><button type="button" class="rounded-xl border px-3 py-3 text-left transition-all border-slate-200 bg-white hover:border-amber-200 hover:bg-amber-50/50 dark:border-white/10 dark:bg-slate-950/60 dark:hover:border-amber-400/30 dark:hover:bg-white/10"><div class="text-sm font-semibold text-slate-950 dark:text-white">Twinkle, Twinkle, Little Star</div><div class="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">A globally familiar beginner melody with clear repetition and stable phrase shapes.</div></button><button type="button" class="rounded-xl border px-3 py-3 text-left transition-all border-slate-200 bg-white hover:border-amber-200 hover:bg-amber-50/50 dark:border-white/10 dark:bg-slate-950/60 dark:hover:border-amber-400/30 dark:hover:bg-white/10"><div class="text-sm font-semibold text-slate-950 dark:text-white">Ode to Joy</div><div class="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">A public-domain classical melody with slightly longer phrases and clean stepwise motion.</div></button></div></div><div class="rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-white/5"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Tempo</div><div class="mt-1 text-xl font-bold text-slate-950 dark:text-white">86<!-- --> BPM</div></div><div class="rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-white/5"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Progress</div><div class="mt-1 text-xl font-bold text-slate-950 dark:text-white">0<!-- -->%</div></div><div class="rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-white/5"><div class="text-[11px] uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Mode</div><div class="mt-1 text-xl font-bold text-slate-950 dark:text-white">Ready</div></div></div></div><div class="mt-5 space-y-4"><div class="rounded-[1.85rem] border border-slate-200 bg-[#fffdf8] p-4 dark:border-white/10 dark:bg-[#0b1020] sm:p-5"><div class="flex flex-col gap-3"><div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between"><div><div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">Moving score</div><div class="mt-1 text-sm text-slate-600 dark:text-slate-300">Follow the judgement line, then press the matching key right below it.</div></div><div class="rounded-full bg-amber-100 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-700 dark:bg-amber-500/10 dark:text-amber-200">Phrase 1</div></div><div class="flex flex-col gap-3 rounded-[1.3rem] border border-slate-200 bg-slate-50 p-3 dark:border-white/10 dark:bg-white/5"><div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between"><div class="flex flex-wrap items-center gap-2"><button type="button" class="inline-flex h-10 items-center justify-center rounded-xl bg-amber-600 px-4 text-sm font-semibold text-white shadow-[0_4px_20px_rgba(180,83,9,0.3)] hover:bg-amber-500">Play with sound</button><button type="button" class="inline-flex h-10 items-center justify-center rounded-xl px-4 text-sm font-semibold transition-colors border border-slate-200 bg-white text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white">Guided practice</button><button type="button" class="inline-flex h-10 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white">Reset</button><button type="button" class="inline-flex h-10 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white">Step back</button><button type="button" class="inline-flex h-10 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white">Step forward</button></div><label class="flex items-center gap-3 text-sm font-medium text-slate-600 dar
217k:text-slate-300">Tempo<input type="range" min="60" max="120" step="2" class="w-44 accent-amber-500" value="86"/></label></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-white/10"><div class="h-full rounded-full bg-gradient-to-r from-amber-500 via-orange-500 to-fuchsia-500" style="width:0%"></div></div></div></div><div class="relative mt-5 overflow-hidden rounded-[1.6rem] border border-slate-200 bg-[radial-gradient(circle_at_top,rgba(251,191,36,0.12),transparent_34%),linear-gradient(180deg,#1c130b_0%,#120d08_50%,#090909_100%)] px-4 py-5 dark:border-white/10 sm:px-5"><div class="pointer-events-none absolute inset-x-12 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div><div class="pointer-events-none absolute right-4 top-4 z-20 flex items-start gap-2 sm:right-5 sm:top-5"><div class="rounded-[1rem] border px-3 py-2 text-right backdrop-blur-sm transition-all duration-200 scale-95 border-white/10 bg-white/5 text-white/45 opacity-60 translate-y-0.5"><div class="text-[10px] font-semibold uppercase tracking-[0.18em]">Streak</div><div class="mt-1 text-2xl font-black leading-none transition-transform duration-200 ">0</div></div><div class="rounded-[1rem] border px-3 py-2 text-right backdrop-blur-sm transition-all duration-200 scale-95 border-white/10 bg-white/5 text-white/35 opacity-50"><div class="text-[10px] font-semibold uppercase tracking-[0.18em]">Best</div><div class="mt-1 text-2xl font-black leading-none transition-transform duration-200 ">0</div></div></div><div class="relative h-[11rem] overflow-hidden rounded-[1.4rem] border border-white/10 bg-[linear-gradient(180deg,rgba(255,248,235,0.08),rgba(255,255,255,0.02))] md:h-[12rem]"><div class="pointer-events-none absolute inset-x-0 top-1/2 z-0 h-px -translate-y-1/2 bg-white/10"></div><div class="absolute inset-0"><div class="absolute" style="left:320px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-gradient-to-r from-amber-200 via-amber-300 to-orange-300 shadow-[0_0_22px_rgba(251,191,36,0.42)]" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-gradient-to-r from-amber-200 via-amber-300 to-orange-300 shadow-[0_0_22px_rgba(251,191,36,0.42)]"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-amber-300 bg-gradient-to-b from-amber-500 via-amber-700 to-amber-950 shadow-[0_0_0_1px_rgba(251,191,36,0.32),0_18px_42px_rgba(245,158,11,0.26)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-50 scale-[1.1] [text-shadow:0_0_20px_rgba(251,191,36,0.45)]"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:408px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="63" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="63" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="63" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:496px;top:50%;width:88px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:584px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:672px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:760px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="63" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="63" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="63" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:848px;top:50%;width:88px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:936px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1024px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:1112px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="66" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="66" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="66" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1200px;top:50%;width:176px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:112px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1376px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:1464px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="66" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="66" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="66" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1552px;top:50%;width:176px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:112px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1728px;top:50%;width:64px;
217height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1772px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="70" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="70" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="70" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1816px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1860px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="66" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="66" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="66" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:1904px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:1992px;top:50%;width:88px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2080px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2124px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="70" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="70" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="70" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2168px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="68" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="68" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="68" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2212px;top:50%;width:64px;height:64px;transform:translateY(-50%)"><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="66" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="66" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="66" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2256px;top:50%;width:88px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-white/20 bg-gradient-to-b from-[#fff8ec] via-[#fffdf9] to-[#f3e5c8] shadow-[0_10px_26px_rgba(15,23,42,0.12)]"><span data-midi="65" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-slate-900 text-white"></span><div data-midi="65" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-amber-900 opacity-95"></div><span data-midi="65" class="lane-western-label text-[10px] font-bold leading-none text-slate-500"></span></div></div></div><div class="absolute" style="left:2344px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2432px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="63" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="63" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="63" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2520px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="56" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="56" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="56" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2608px;top:50%;width:176px;height:64px;transform:translateY(-50%)">
217<div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:112px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2784px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="63" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="63" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="63" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2872px;top:50%;width:88px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:24px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="56" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="56" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="56" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div><div class="absolute" style="left:2960px;top:50%;width:176px;height:64px;transform:translateY(-50%)"><div class="absolute left-10 top-1/2 -translate-y-1/2 rounded-full transition-all duration-200 h-3 bg-white/15 shadow-none" style="width:112px"></div><div class="absolute right-0 top-1/2 h-5 w-1.5 -translate-y-1/2 rounded-full transition-all duration-200 bg-white/15 shadow-none"></div><div class="relative z-10 flex h-16 w-16 items-center justify-center text-center"><div class="relative z-10 flex h-14 w-14 flex-col items-center justify-between rounded-[1rem] px-2 py-1.5 transition-all duration-200 border border-slate-700 bg-gradient-to-b from-[#3f2b1b] via-[#1b130d] to-black shadow-[0_12px_24px_rgba(0,0,0,0.28)]"><span data-midi="61" class="lane-key-label rounded-md px-1.5 py-0.5 text-[10px] font-black leading-none tracking-[0.18em] bg-white/15 text-white/90"></span><div data-midi="61" class="lane-note-label text-xl font-black uppercase tracking-[0.04em] text-stone-100 opacity-95"></div><span data-midi="61" class="lane-western-label text-[10px] font-bold leading-none text-stone-300"></span></div></div></div></div></div></div></div><div class="glass-card rounded-[2rem] border-2 px-6 py-12 text-center shadow-2xl sm:px-10"><div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border-4 border-purple-300/40 text-3xl text-purple-600 animate-spin">♫</div><h2 class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-3xl font-black text-transparent">Loading Harmonium</h2>
217<p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">Preparing the browser audio engine, harmonium sample, and MIDI detection.</p></div><section class="rounded-[1.5rem] border border-slate-200 bg-slate-50 p-5 dark:border-white/10 dark:bg-white/5"><div class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-lesson-details inline-block align-top"></span></div><div class="mt-4 grid gap-4 lg:grid-cols-[0.72fr_1.28fr]"><div class="rounded-[1.5rem] border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-950/50"><div class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-current-state inline-block align-top"></span></div><div class="mt-4 space-y-3 text-sm text-slate-600 dark:text-slate-300"><p>Current note:<span class="ml-2 font-semibold text-slate-950 dark:text-white">S (4)</span></p><p>Manual input:<span class="ml-2 font-semibold text-slate-950 dark:text-white">Waiting</span></p><p>Status:<span class="ml-2 font-semibold text-slate-950 dark:text-white">Manual practice</span></p><p>Next target:<span class="ml-2 font-semibold text-slate-950 dark:text-white">4 · S</span></p></div></div><div class="rounded-[1.5rem] border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-950/50"><div class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-full-score inline-block align-top"></span></div><div class="mt-4 space-y-4"><div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-slate-950/60"><div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-numbered-notation inline-block align-top"></span></div><div class="mt-3 space-y-1 font-mono text-sm leading-7 text-slate-700 dark:text-slate-200"><div data-song="two-tigers" data-kind="numbered" data-index="0" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="1" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="2" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="3" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="4" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="5" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="6" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="7" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="8" class="score-line"></div><div data-song="two-tigers" data-kind="numbered" data-index="9" class="score-line"></div></div></div><div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-slate-950/60"><div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-sargam inline-block align-top"></span></div><div class="mt-3 space-y-1 font-mono text-sm leading-7 text-slate-700 dark:text-slate-200"><div data-song="two-tigers" data-kind="sargam" data-index="0" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="1" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="2" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="3" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="4" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="5" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="6" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="7" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="8" class="score-line"></div><div data-song="two-tigers" data-kind="sargam" data-index="9" class="score-line"></div></div></div><div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-slate-950/60"><div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400"><span class="score-ui-label score-label-lyrics inline-block align-top"></span></div><div class="mt-3 space-y-1 text-sm leading-7 text-slate-700 dark:text-slate-200"><div data-song="two-tigers" data-kind="lyrics" data-index="0" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="1" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="2" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="3" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="4" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="5" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="6" class="score-line"></div><div data-song="two-tigers" data-kind="lyrics" data-index="7" class="score-line"></div></div></div></div></div></div></section></div></section></div><!--astro:end--></astro-island> </div> </main> <footer class="border-t border-slate-100 bg-white dark:border-white/6 dark:bg-[#0d1117]"> <div class="px-4 py-12 sm:px-6"> <div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.6fr_0.8fr_0.8fr]"> <!-- Brand --> <div> <div class="flex items-center gap-3"> <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-amber-200/70 bg-white shadow-[0_6px_18px_rgba(180,83,9,0.12)] dark:border-white/10 dark:bg-white/5"> <img src="/logo.svg" alt="Web Harmonium logo" class="h-6 w-6"> </div> <div>
217 <div class="text-sm font-bold text-slate-950 dark:text-white">Web Harmonium</div> <div class="text-[10px] uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">Browser instrument</div> </div> </div> <p class="mt-4 max-w-xs text-[13px] leading-relaxed text-slate-500 dark:text-slate-400">
218A free online harmonium for Indian classical practice, tonic finding, melody sketching, and MIDI-based sessions.
219</p> <p class="mt-4 text-[12px] text-slate-400 dark:text-slate-600">
220© 2026 Web Harmonium. All rights reserved.
221</p> </div> <!-- Product --> <div> <div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Product</div> <ul class="mt-4 space-y-2.5"> <li> <a href="/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Play Online </a> </li><li> <a href="/web-harmonium-notes/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Web Harmonium Notes </a> </li><li> <a href="/tutorial/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Tutorial Mode </a> </li><li> <a href="/about/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> About </a> </li> </ul> </div> <!-- Legal --> <div> <div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Legal</div> <ul class="mt-4 space-y-2.5"> <li> <a href="/privacy/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Privacy Policy </a> </li><li> <a href="/terms/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Terms of Service </a> </li> </ul> </div> </div> </div> </footer> </div>  <aside class="site-ad-shell" aria-label="Advertisement" data-site-ad> <div class="site-ad-frame"> <button type="button" class="site-ad-close" aria-label="Close advertisement" data-site-ad-close>Close</button> <iframe class="site-ad-iframe" src="/ads/native_banner_1.html" title="Advertisement" loading="lazy"></iframe> </div> </aside> 
221<script>
222      const storageKey = "webharmonium-theme";
223      const root = document.documentElement;
224      const applyTheme = (theme) => {
225        root.classList.remove("light", "dark");
226        root.classList.add(theme);
227        localStorage.setItem(storageKey, theme);
228      };
229      const savedTheme = localStorage.getItem(storageKey);
230      const initialTheme = savedTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
231      applyTheme(initialTheme);
232      document.addEventListener("click", (event) => {
233        const target = event.target;
234        if (!(target instanceof Element)) return;
235        if (!target.closest("[data-theme-toggle]")) return;
236        applyTheme(root.classList.contains("dark") ? "light" : "dark");
237      });
238
239      const adRoot = document.querySelector("[data-site-ad]");
240      const adClose = document.querySelector("[data-site-ad-close]");
241      if (adClose instanceof HTMLButtonElement && adRoot instanceof HTMLElement) {
242        adClose.addEventListener("click", () => {
243          adRoot.hidden = true;
244        });
245      }
246    </script>
246 
246<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"a0c0398882024a39a73346bbaa728d17","r":1,"spa":2}' crossorigin="anonymous"></script>
246
247</body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.