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 & 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 & 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 & 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="{"name":"TutorialStudio","value":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.