1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[75149],{75149:(e,r,t)=>{t.r(r),t.d(r,{PolychordistExercise:()=>w,default:()=>C});var s=t(95155),a=t(12115),d=t(25683),o=t(2178),l=t(11536),n=t(86835),i=t(85047),m=t(98867),b=t(16972),c=t(87364),x=t(43226),g=t(31523),u=t(51569),h=t(86877),k=t(21567),p=t(85216),j=t(69934);let y=[{id:"Maj/Maj",top:"major",bottom:"major",label:"Maj/Maj"},{id:"Maj/min",top:"major",bottom:"minor",label:"Maj/min"},{id:"min/Maj",top:"minor",bottom:"major",label:"min/Maj"},{id:"min/min",top:"minor",bottom:"minor",label:"min/min"}],f=["b2","2","b3","3","4","b5","5","b6","6","b7","7"],v={b2:{default:"border-rose-300 dark:border-rose-700 bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300",hover:"hover:border-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},7:{default:"border-rose-300 dark:border-rose-700 bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300",hover:"hover:border-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},2:{default:"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300",hover:"hover:border-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b7:{default:"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300",hover:"hover:border-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b3:{default:"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300",hover:"hover:border-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},6:{default:"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300",hover:"hover:border-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},3:{default:"border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300",hover:"hover:border-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b6:{default:"border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300",hover:"hover:border-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},4:{default:"border-violet-300 dark:border-violet-700 bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300",hover:"hover:border-violet-400 hover:bg-violet-100 dar
1k:hover:bg-violet-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},5:{default:"border-violet-300 dark:border-violet-700 bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300",hover:"hover:border-violet-400 hover:bg-violet-100 dark:hover:bg-violet-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"},b5:{default:"border-fuchsia-300 dark:border-fuchsia-700 bg-fuchsia-50 dark:bg-fuchsia-950/40 text-fuchsia-700 dark:text-fuchsia-300",hover:"hover:border-fuchsia-400 hover:bg-fuchsia-100 dark:hover:bg-fuchsia-900/50",correct:"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200 ring-2 ring-green-500/40",incorrect:"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200 ring-2 ring-red-500/40"}},N=e=>{let{topChord:r,bottomChord:t,topQuality:a,bottomQuality:d,className:o}=e;return(0,s.jsxs)("div",{className:(0,k.cn)("inline-flex flex-col items-center leading-none",o),children:[(0,s.jsx)("span",{className:(0,k.cn)("text-lg font-bold","major"===a?"text-amber-600 dark:text-amber-400":"text-sky-600 dark:text-sky-400"),children:r}),(0,s.jsx)("div",{className:"w-full h-[2px] bg-current my-0.5"}),(0,s.jsx)("span",{className:(0,k.cn)("text-lg font-bold",d?"major"===d?"text-amber-600 dark:text-amber-400":"text-sky-600 dark:text-sky-400":""),children:t})]})},w=e=>{let{onBack:r,levelId:t,levelName:w,levelDescription:C,onComplete:M,onAnswer:Q,attemptsAllowed:S=20,requiredCorrect:D=15,levelDegrees:T,levelTopQualities:z,levelBottomQualities:A,levelExerciseMode:P,isGameOver:q,hideKeyboardHints:I=!1}=e,{soundManager:E,isInitialized:F}=(0,g.q)(),B=a.useCallback(e=>{if(Array.isArray(e))return e;if("string"==typeof e)try{let r=JSON.parse(e);if(Array.isArray(r))return r}catch(e){}},[]),$=a.useMemo(()=>B(T),[T,B]),H=a.useMemo(()=>B(z),[z,B]),L=a.useMemo(()=>B(A),[A,B]),R=void 0!==t;(0,a.useEffect)(()=>(window.innerWidth<640&&(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"),()=>{document.body.style.overflow="",document.documentElement.style.overflow=""}),[]);let[W,V]=(0,a.useState)(null),[Y,_]=(0,a.useState)(null),[G,O]=(0,a.useState)({}),[J,K]=(0,a.useState)(!1),[U,X]=(0,a.useState)(null),[Z,ee]=(0,a.useState)(!1),[er,et]=(0,a.useState)(!1),[es,ea]=(0,a.useState)(!1),[ed,eo]=(0,a.useState)(()=>!R),[el,en]=(0,a.useState)(R&&P?P:"interval"),[ei,em]=(0,a.useState)("challenge"),[eb,ec]=(0,a.useState)(3),[ex,eg]=(0,a.useState)(4),[eu,eh]=(0,a.useState)(()=>{if(H&&H.length>0&&L&&L.length>0){let e=new Set;for(let r of H)for(let t of L){let s="major"===r?"Maj":"min",a="major"===t?"Maj":"min",d="".concat(s,"/").concat(a);y.some(e=>e.id===d)&&e.add(d)}return e.size>0?e:new Set(["Maj/Maj","Maj/min","min/Maj","min/min"])}return new Set(["Maj/Maj","Maj/min"])}),[ek,ep]=(0,a.useState)(()=>new Set(f)),[ej,ey]=(0,a.useState)(0),[ef,ev]=(0,a.useState)(0),[eN,ew]=(0,a.useState)(0),[eC,eM]=(0,a.useState)(0),[eQ,eS]=(0,a.useState)([]),eD=(0,a.useCallback)((e,r)=>{let t=j.t$.indexOf(e);return -1===t?e:j.t$[(t+r+12)%12]},[]),eT=(0,a.useCallback)(e=>{eh(r=>{let t=new Set(r);return t.has(e)?t.size>1&&t.delete(e):t.add(e),t}),V(null)},[]),ez=(0,a.useCallback)(e=>{ep(r=>{let t=new Set(r);if(t.has(e)){if(t.size<=1)return r;t.delete(e)}else t.add(e);return t}),V(null)},[]),eA=(0,a.useCallback)(e=>{let r,t,s=y.filter(e=>eu.has(e.id));H&&H.length>0&&(s=s.filter(e=>H.includes(e.top))),L&&L.length>0&&(s=s.filter(e=>L.includes(e.bottom))),0===s.length&&(s=[y[0]]);let a=s[Math.floor(Math.random()*s.length)],d=j.t$[Math.floor(Math.random()*j.t$.length)],o=R?$&&$.length>0?f.filter(e=>$.includes(e)):f:f.filter(e=>ek.has(e)),l=o.length>0?o:f,n=0;do r=l[Math.floor(Math.random()*l.length)],t="".concat(d,"-").concat(r,"-").concat(a.id),n++;while(t===e&&n<20);let i=eD(d,j.dN[r]),m=(0,p.NQ)(d,a.bottom,eb),b=(0,p.NQ)(i,a.top,ex);return{bottomRoot:d,bottomQuality:a.bottom,topRoot:i,topQuality:a.top,degree:r,bottomNotes:m,topNotes:b,allNotes:[...m,...b]}},[eD,eb,ex,eu,R,ek,$,H,L]);(0,a.useEffect)(()=>{F&&!W&&V(eA())},[F,W,eA]);let eP=(0,a.useCallback)(async()=>
1{if(W&&E&&!Z){ee(!0);try{if(er){let e=(0,p.Vx)((0,p.Qg)(W.bottomNotes)),r=(0,p.Vx)((0,p.Qg)(W.topNotes));E.playExerciseSequence(e,!1,200);let t=200*e.length+400;setTimeout(()=>{E.playExerciseSequence(r,!1,200)},t);let s=t+200*r.length+300;setTimeout(()=>ee(!1),s)}else{let e=(0,p.Qg)(W.allNotes);E.playExerciseSequence(e,!0),setTimeout(()=>ee(!1),500)}}catch(e){console.error("Error playing chord:",e),ee(!1)}}},[W,E,Z,er]);(0,a.useEffect)(()=>{if(W&&F&&!J&&!q){let e=setTimeout(()=>eP(),500);return()=>clearTimeout(e)}},[null==W?void 0:W.bottomRoot,null==W?void 0:W.degree,F,q]);let eq=(0,a.useCallback)(e=>{if(J||!W||q)return;_(e);let r=e===W.degree;X(r),K(!0);let s=ej+1,a=r?ef+1:ef;ey(s),eS(t=>[...t.slice(-19),{id:"".concat(Date.now()),label:j.xz[e],correctLabel:j.xz[W.degree],result:r?"correct":"wrong"}]),r?(ev(a),ew(e=>{let r=e+1;return r>eC&&eM(r),r})):ew(0),null==Q||Q(r,s,a,String(j.xz[W.degree])),t&&(a>=D?setTimeout(()=>null==M?void 0:M({correct:a,total:s}),1500):s>=S&&setTimeout(()=>null==M?void 0:M({correct:a,total:s}),1500))},[J,W,eC,ej,ef,t,Q,M,D,S]),eI=(0,a.useCallback)((e,r)=>{if(J||!W||q)return;let t={...G,[e]:r};if(O(t),t.top&&t.bottom){let e=t.top===W.topQuality,r=t.bottom===W.bottomQuality,s=e&&r;X(s),K(!0),ey(e=>e+1);let a="".concat("major"===t.top?"M":"m","/").concat("major"===t.bottom?"M":"m"),d="".concat("major"===W.topQuality?"M":"m","/").concat("major"===W.bottomQuality?"M":"m");eS(e=>[...e.slice(-19),{id:"".concat(Date.now()),label:a,correctLabel:d,result:s?"correct":"wrong"}]),s?(ev(e=>e+1),ew(e=>{let r=e+1;return r>eC&&eM(r),r})):ew(0)}},[J,W,G,eC]),eE=(0,a.useCallback)(()=>{if(J||!W||q||!Y||!G.top||!G.bottom)return;let e=Y===W.degree,r=G.top===W.topQuality,t=G.bottom===W.bottomQuality,s=e&&r&&t;X(s),K(!0),ey(e=>e+1);let a="".concat(j.xz[Y]," ").concat("major"===G.top?"M":"m","/").concat("major"===G.bottom?"M":"m"),d="".concat(j.xz[W.degree]," ").concat("major"===W.topQuality?"M":"m","/").concat("major"===W.bottomQuality?"M":"m");eS(e=>[...e.slice(-19),{id:"".concat(Date.now()),label:a,correctLabel:d,result:s?"correct":"wrong"}]),s?(ev(e=>e+1),ew(e=>{let r=e+1;return r>eC&&eM(r),r})):ew(0)},[J,W,Y,G,eC]),eF=(0,a.useCallback)(()=>{let e=W?"".concat(W.bottomRoot,"-").concat(W.degree,"-").concat(W.topQuality,"/").concat(W.bottomQuality):void 0;_(null),O({}),K(!1),X(null),V(eA(e))},[eA,W]);(0,u.B)({onSpacebar:J?eF:eP,disabled:Z||!!q});let eB=(e,r)=>"".concat(e).concat("minor"===r?"m":"");return F?(0,s.jsxs)("div",{className:"w-full max-w-4xl mx-auto px-3 sm:px-6 pt-2 sm:pt-0 pb-[calc(60px+env(safe-area-inset-bottom))] sm:pb-6",children:[R?(0,s.jsx)("div",{className:"flex justify-end mb-2 md:hidden",children:(0,s.jsx)("button",{onClick:()=>ea(!es),className:"p-1.5 rounded-full hover:bg-muted/50 transition-colors","aria-label":"Help",children:(0,s.jsx)(n.A,{className:"w-5 h-5 text-muted-foreground"})})}):(0,s.jsxs)("div",{className:"text-center mb-4 sm:mb-6",children:[(0,s.jsxs)("div",{className:"flex items-center justify-center gap-2",children:[(0,s.jsx)("h1",{className:"text-xl sm:text-2xl font-bold ear-title",children:"Polychordist"}),(0,s.jsx)("button",{onClick:()=>ea(!es),className:"p-1.5 rounded-full hover:bg-muted/50 transition-colors md:hidden","aria-label":"Help",children:(0,s.jsx)(n.A,{className:"w-5 h-5 text-muted-foreground"})}),(0,s.jsx)("button",{onClick:()=>eo(!ed),className:"p-1.5 rounded-full hover:bg-muted/50 transition-colors","aria-label":"Settings",children:(0,s.jsx)(i.A,{className:"w-5 h-5 text-muted-foreground transition-transform ".concat(ed?"rotate-90":"")})})]}),(0,s.jsx)("p",{className:"text-xs sm:text-sm text-muted-foreground mt-0.5 sm:mt-1",children:"Stacked Triads (Polychords)"}),!ed&&(0,s.jsxs)("p",{className:"hidden sm:flex text-xs text-violet-600 dark:text-violet-400 mt-1 animate-pulse items-center justify-center gap-1",children:["Click ",(0,s.jsx)(i.A,{className:"w-3.5 h-3.5 inline"})," to customize exercise modes"]})]}),(0,s.jsxs)("details",{className:"hidden md:block rounded-2xl border border-slate-200 dark:border-border bg-slate-50 dark:bg-card group mb-6",children:[(0,s.jsxs)("summary",{className:"p-4 cursor-pointer text-sm font-medium text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100 transition-colors list-none flex items-center justify-between",children:[(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"text-lg",children:"\uD83D\uDCD6"}),"How Polychordist Works"]}),(0,s.jsx)("span",{className:"text-xs text-slate-500 group-open:hidden",children:"Click to expand"}),(0,s.jsx)("span",{className:"text-xs text-slate-500 hidden group-open:inline",children:"Click to collapse"})]}),(0,s.jsxs)("div",{className:"px-4 pb-4 space-y-4 text-sm text-slate-600 dar
1k:text-slate-400",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83C\uDFAF What You'll Learn"}),(0,s.jsxs)("p",{children:["Train your ear to recognize ",(0,s.jsx)("strong",{children:"polychords"})," - two triads stacked on top of each other. This creates complex, rich harmonies used in jazz, film scoring, and contemporary music."]})]}),!R&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83C\uDFB9 Exercise Modes"}),(0,s.jsxs)("ul",{className:"list-disc list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Quality"})," - Identify if each triad is Major or Minor"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Interval"})," - Identify the interval between the two triad roots"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Both"})," - Identify both qualities and the interval"]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83D\uDCDA Study Modes"}),(0,s.jsxs)("ul",{className:"list-disc list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Studying"})," - Chord names shown while playing (learning mode)"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Challenge"})," - Chord names hidden until you answer (ear training)"]})]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83D\uDD0A How to Listen"}),(0,s.jsxs)("ol",{className:"list-decimal list-inside space-y-1 ml-1",children:[(0,s.jsxs)("li",{children:["Focus on the ",(0,s.jsx)("strong",{children:"bottom triad"})," first - it's your reference"]}),(0,s.jsxs)("li",{children:["Then identify the ",(0,s.jsx)("strong",{children:"top triad"})," and its relationship to the bottom"]}),(0,s.jsxs)("li",{children:["Major triads sound ",(0,s.jsx)("strong",{children:"bright"}),", minor triads sound ",(0,s.jsx)("strong",{children:"darker"})]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-slate-800 dark:text-slate-200 mb-1",children:"\uD83D\uDCA1 Tips"}),(0,s.jsx)("ul",{className:"list-disc list-inside space-y-1 ml-1",children:R?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("li",{children:"Listen carefully and identify what the level requires"}),(0,s.jsxs)("li",{children:["Color-coded buttons group intervals by ",(0,s.jsx)("strong",{children:"consonance/dissonance"})]}),(0,s.jsxs)("li",{children:["You need ",(0,s.jsx)("strong",{children:D})," correct answers out of ",(0,s.jsx)("strong",{children:S})," to pass"]})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("li",{children:["Start with ",(0,s.jsx)("strong",{children:"Quality mode"})," to train Major/Minor recognition"]}),(0,s.jsxs)("li",{children:["Color-coded buttons group intervals by ",(0,s.jsx)("strong",{children:"consonance/dissonance"})]}),(0,s.jsxs)("li",{children:["Use ",(0,s.jsx)("strong",{children:"Studying mode"})," first, then switch to Challenge for testing"]})]})})]})]})]}),(0,s.jsx)(d.N,{children:ed&&!R&&(0,s.jsx)(o.P.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"overflow-hidden mb-3 sm:mb-6",children:(0,s.jsxs)("div",{className:"sm:rounded-xl p-1 sm:p-4 sm:border sm:border-border/60 sm:bg-muted/30 space-y-2 sm:space-y-4",children:[(0,s.jsx)("p",{className:"text-xs text-muted-foreground border-l-2 border-violet-400 pl-3",children:"Pick 1â2 quality combinations to compare. Add more once you can reliably tell them apart."}),!R&&(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground mb-1 sm:mb-2 text-sm sm:text-base",children:"Study Mode"}),(0,s.jsxs)("div",{className:"flex gap-1.5 sm:gap-2",children:[(0,s.jsx)("button",{onClick:()=>em("studying"),className:(0,k.cn)("flex-1 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all","studying"===ei?"border-amber-500 bg-amber-100 dar
1k:bg-amber-900/50 text-amber-700 dark:text-amber-300":"border-border bg-background hover:bg-muted"),children:"\uD83D\uDCD6 Studying"}),(0,s.jsx)("button",{onClick:()=>em("challenge"),className:(0,k.cn)("flex-1 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all","challenge"===ei?"border-emerald-500 bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300":"border-border bg-background hover:bg-muted"),children:"\uD83C\uDFC6 Challenge"})]}),(0,s.jsx)("p",{className:"hidden sm:block text-xs text-muted-foreground mt-1",children:"studying"===ei?"Chords shown while playing (learning mode)":"Chords hidden until you answer (ear training)"})]}),!R&&(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground mb-1 sm:mb-2 text-sm sm:text-base",children:"Exercise Mode"}),(0,s.jsxs)("div",{className:"flex gap-1.5 sm:gap-2",children:[(0,s.jsx)("button",{onClick:()=>{en("quality"),_(null),O({}),K(!1)},className:(0,k.cn)("flex-1 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all","quality"===el?"border-violet-500 bg-violet-100 dark:bg-violet-900/50 text-violet-700 dark:text-violet-300":"border-border bg-background hover:bg-muted"),children:"\uD83C\uDFB9 Quality"}),(0,s.jsx)("button",{onClick:()=>{en("interval"),_(null),O({}),K(!1)},className:(0,k.cn)("flex-1 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all","interval"===el?"border-violet-500 bg-violet-100 dark:bg-violet-900/50 text-violet-700 dark:text-violet-300":"border-border bg-background hover:bg-muted"),children:"\uD83C\uDFAF Interval"}),(0,s.jsx)("button",{onClick:()=>{en("both"),_(null),O({}),K(!1)},className:(0,k.cn)("flex-1 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all","both"===el?"border-violet-500 bg-violet-100 dark:bg-violet-900/50 text-violet-700 dark:text-violet-300":"border-border bg-background hover:bg-muted"),children:"Both"})]}),(0,s.jsx)("p",{className:"hidden sm:block text-xs text-muted-foreground mt-1",children:"quality"===el?"Identify if each triad is Major or Minor":"interval"===el?"Identify the interval between triad roots":"Identify both interval and chord qualities"})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground mb-1 sm:mb-2 text-sm sm:text-base",children:"Quality Combinations"}),(0,s.jsx)("div",{className:"flex flex-wrap gap-1.5 sm:gap-2",children:y.map(e=>(0,s.jsx)("button",{onClick:()=>eT(e.id),className:(0,k.cn)("px-2 sm:px-3 py-1 sm:py-2 rounded-md sm:rounded-lg border text-xs sm:text-sm font-medium transition-all",eu.has(e.id)?"border-violet-500 bg-violet-100 dark:bg-violet-900/50 text-violet-700 dark:text-violet-300":"border-border bg-background hover:bg-muted text-muted-foreground"),children:e.label},e.id))})]}),(0,s.jsxs)("div",{children:[(0,s.jsxs)("div",{className:"flex items-center justify-between mb-1 sm:mb-2",children:[(0,s.jsxs)("h4",{className:"font-semibold text-foreground text-sm sm:text-base",children:["Degrees (",ek.size,"/",f.length,")"]}),(0,s.jsx)("button",{onClick:()=>ep(new Set(f)),className:"text-xs text-violet-500 hover:text-violet-400 transition-colors",children:"All"})]}),(0,s.jsx)("div",{className:"flex flex-wrap gap-1.5 sm:gap-2",children:f.map(e=>{let r=ek.has(e),t=v[e];return(0,s.jsxs)("button",{onClick:()=>ez(e),className:(0,k.cn)("px-2.5 py-1.5 rounded-md sm:rounded-lg border text-xs sm:text-sm font-semibold transition-all flex items-center gap-1",r?t.default:"border-border bg-background text-muted-foreground/50 hover:bg-muted"),children:[r&&(0,s.jsx)(m.A,{className:"w-3 h-3"}),j.xz[e]]},e)})})]})]})})}),(0,s.jsx)(d.N,{children:es&&(0,s.jsx)(o.P.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"overflow-hidden mb-6 md:hidden",children:(0,s.jsxs)("div",{className:"sm:rounded-xl p-2 sm:p-4 sm:border sm:border-border/60 sm:bg-muted/30",children:[(0,s.jsx)("h4",{className:"font-semibold text-foreground mb-2",children:"What are Polychords?"}),(0,s.jsxs)("p",{className:"text-sm text-muted-foreground mb-3",children:["Polychords are two triads stacked on top of each other, creating complex harmonie
1s. Your task is to identify the ",(0,s.jsx)("strong",{children:"interval between the two roots"}),"."]}),(0,s.jsx)("p",{className:"text-sm text-muted-foreground mb-4",children:"You'll hear two triads played together. Listen for the relationship between the bottom and top triad roots, then select the correct interval."}),(0,s.jsxs)("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm",children:[(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)(N,{topChord:"E",bottomChord:"C",topQuality:"major",className:"justify-center"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground mt-1",children:"= III (Major 3rd)"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)(N,{topChord:"Gm",bottomChord:"C",topQuality:"minor",className:"justify-center"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground mt-1",children:"= V (Perfect 5th)"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)(N,{topChord:"Db",bottomChord:"C",topQuality:"major",className:"justify-center"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground mt-1",children:"= âII (Minor 2nd)"})]}),(0,s.jsxs)("div",{className:"rounded-lg p-2 bg-background/60 border border-border/40 text-center",children:[(0,s.jsx)(N,{topChord:"Gbm",bottomChord:"C",topQuality:"minor",className:"justify-center"}),(0,s.jsx)("div",{className:"text-xs text-muted-foreground mt-1",children:"= âV (Tritone)"})]})]})]})})}),(0,s.jsx)("div",{className:"flex flex-wrap items-center justify-center gap-2 sm:gap-4 mb-2 sm:mb-6",children:(0,s.jsxs)("div",{className:"flex items-center gap-2 sm:gap-4 text-xs sm:text-sm",children:[(0,s.jsxs)("div",{className:"text-center px-1.5 sm:px-3 py-0.5 sm:py-1.5 rounded-md sm:rounded-xl bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-700",children:[(0,s.jsx)("span",{className:"font-bold text-green-700 dark:text-green-300 tabular-nums",children:ef}),(0,s.jsx)("span",{className:"text-green-600/60 dark:text-green-400/60 mx-0.5 sm:mx-1",children:"/"}),(0,s.jsx)("span",{className:"text-green-600 dark:text-green-400 tabular-nums",children:ej})]}),(0,s.jsxs)("div",{className:"flex items-center gap-1 px-1.5 sm:px-3 py-0.5 sm:py-1.5 rounded-md sm:rounded-xl bg-amber-100 dark:bg-amber-950/50 border border-amber-300 dark:border-amber-700",title:"Correct answers in a row",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm",children:"\uD83D\uDD25"}),(0,s.jsx)("span",{className:"font-bold text-amber-700 dark:text-amber-300 tabular-nums",children:eN}),(0,s.jsx)("span",{className:"hidden sm:inline text-amber-600/70 dark:text-amber-400/70 text-xs ml-0.5",children:"streak"})]})]})}),(0,s.jsxs)("div",{className:"sm:rounded-2xl sm:border sm:border-border/60 sm:bg-background/80 sm:shadow-sm sm:p-6",children:[(0,s.jsx)("div",{className:(0,k.cn)("flex justify-center mb-1 sm:mb-4","both"===el?"min-h-[40px] sm:min-h-[80px]":"min-h-[50px] sm:min-h-[80px]","studying"===ei&&"quality"!==el&&"both"!==el||J?"visible":"invisible"),children:W&&(0,s.jsx)("div",{className:(0,k.cn)("rounded-lg sm:rounded-xl bg-slate-100 dark:bg-card border border-slate-300 dark:border-border","both"===el?"px-3 py-1 sm:px-6 sm:py-4":"px-4 py-2 sm:px-6 sm:py-4"),children:(0,s.jsx)(N,{topChord:eB(W.topRoot,W.topQuality),bottomChord:eB(W.bottomRoot,W.bottomQuality),topQuality:W.topQuality,bottomQuality:W.bottomQuality,className:"both"===el?"text-base sm:text-2xl":"text-xl sm:text-2xl"})})}),("studying"===ei||"interval"===el)&&(0,s.jsxs)("div",{className:"flex justify-center gap-1 sm:gap-2 mb-1 sm:mb-4 min-h-[24px] sm:min-h-[36px]",children:[(0,s.jsxs)("span",{className:(0,k.cn)("inline-block px-2 sm:px-3 py-1 sm:py-1.5 rounded-md sm:rounded-lg border text-xs sm:text-sm","studying"===ei||J?(null==W?void 0:W.topQuality)==="major"?"bg-amber-100 dark:bg-amber-900/50 border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300":"bg-sky-100 dark:bg-sky-900/50 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300":"bg-slate-100 dar
1k:bg-card border-slate-300 dark:border-border text-slate-600 dark:text-slate-400"),children:["Top: ","studying"===ei||J?(null==W?void 0:W.topQuality)==="major"?"Maj":"min":"?"]}),(0,s.jsxs)("span",{className:(0,k.cn)("inline-block px-2 sm:px-3 py-1 sm:py-1.5 rounded-md sm:rounded-lg border text-xs sm:text-sm","studying"===ei||J?(null==W?void 0:W.bottomQuality)==="major"?"bg-amber-100 dark:bg-amber-900/50 border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300":"bg-sky-100 dark:bg-sky-900/50 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300":"bg-slate-100 dark:bg-card border-slate-300 dark:border-border text-slate-600 dark:text-slate-400"),children:["Bottom: ","studying"===ei||J?(null==W?void 0:W.bottomQuality)==="major"?"Maj":"min":"?"]})]}),(0,s.jsxs)("div",{className:(0,k.cn)("flex justify-center gap-2 sm:gap-3","both"===el?"mb-1 sm:mb-6":"mb-2 sm:mb-6"),children:[(0,s.jsxs)(x.$,{onClick:eP,disabled:Z,size:"default",className:"gap-1.5 sm:gap-2 h-9 sm:h-11 w-[72px] sm:w-[88px]",children:[Z?(0,s.jsx)("span",{className:"animate-pulse text-sm",children:"âª"}):(0,s.jsx)(l.gSK,{size:10}),(0,s.jsx)("span",{className:"text-xs sm:text-sm",children:"Play"})]}),(0,s.jsxs)(x.$,{onClick:()=>et(e=>!e),variant:er?"default":"outline",size:"default",className:(0,k.cn)("gap-1 sm:gap-1.5 h-9 sm:h-11 w-[90px] sm:w-[110px]",er&&"bg-violet-600 hover:bg-violet-700"),title:er?"Melodic mode (notes one by one)":"Harmonic mode (all notes at once)",children:[(0,s.jsx)(b.A,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),(0,s.jsx)("span",{className:"text-[10px] sm:text-xs",children:er?"Melodic":"Harmonic"})]}),(0,s.jsxs)(x.$,{onClick:eF,disabled:!J,size:"default",variant:"default",className:"gap-1.5 sm:gap-2 h-9 sm:h-11 bg-violet-600 hover:bg-violet-700 disabled:opacity-40",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm",children:"Next"}),(0,s.jsx)("span",{className:"text-[10px] sm:text-xs opacity-70",children:"â"})]})]}),(0,s.jsx)("div",{className:(0,k.cn)("text-center","both"===el?"mb-1
1sm:mb-6":"mb-2 sm:mb-6"),children:(0,s.jsxs)("p",{className:"text-neutral-500 text-xs sm:text-sm",children:["interval"===el?"What interval is between the roots?":"quality"===el?"Is each triad Major or Minor?":"Identify interval AND qualities!",!I&&(0,s.jsxs)("span",{className:"hidden sm:inline",children:[" ","Press ",(0,s.jsx)("kbd",{className:"px-1.5 py-0.5 bg-muted rounded text-xs",children:"Space"})," to ",J?"continue":"replay","."]})]})}),(0,s.jsxs)("div",{className:"min-h-[100px] sm:min-h-[120px]",children:["interval"===el&&(0,s.jsx)("div",{className:"flex flex-wrap justify-center gap-1 sm:gap-2 mb-2 sm:mb-4",children:(R?$&&$.length>0?f.filter(e=>$.includes(e)):f:f.filter(e=>ek.has(e))).map(e=>{let r=v[e],t=Y===e,a=(null==W?void 0:W.degree)===e,d=r.default;return J?a?d=r.correct:t&&!a&&(d=r.incorrect):d=t?"".concat(r.default," ring-2 ring-offset-1"):"".concat(r.default," ").concat(r.hover),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>eq(e),disabled:J,className:(0,k.cn)("relative px-2 sm:px-4 py-1.5 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all","font-semibold text-sm sm:text-base min-w-[44px] sm:min-w-[60px]",d,J&&"cursor-default"),children:(0,s.jsx)("div",{className:"text-sm sm:text-lg font-bold",children:j.xz[e]})},e)})}),"quality"===el&&(0,s.jsxs)("div",{className:"space-y-2 sm:space-y-4 mb-2 sm:mb-4",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center gap-1 sm:gap-2",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm text-muted-foreground",children:"Top Triad:"}),(0,s.jsxs)("div",{className:"flex gap-1.5 sm:gap-2",children:[(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>eI("top","major"),disabled:J,className:(0,k.cn)("px-4 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all font-semibold text-sm sm:text-base",J?(null==W?void 0:W.topQuality)==="major"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"major"===G.top?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"major"===G.top?"border-amber-500 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 ring-2 ring-amber-300":"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/50",J&&"cursor-default"),children:"Major"}),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>eI("top","minor"),disabled:J,className:(0,k.cn)("px-4 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all font-semibold text-sm sm:text-base",J?(null==W?void 0:W.topQuality)==="minor"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"minor"===G.top?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"minor"===G.top?"border-sky-500 bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-300 ring-2 ring-sky-300":"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/50",J&&"cursor-default"),children:"Minor"})]})]}),(0,s.jsxs)("div",{className:"flex flex-col items-center gap-1 sm:gap-2",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm text-muted-foreground",children:"Bottom Triad:"}),(0,s.jsxs)("div",{className:"flex gap-1.5 sm:gap-2",children:[(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>eI("bottom","major"),disabled:J,className:(0,k.cn)("px-4 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all font-semibold text-sm sm:text-base",J?(null==W?void 0:W.bottomQuality)==="major"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"major"===G.bottom?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"major"===G.bottom?"border-amber-500 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 ring-2 ring-amber-300":"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dar
1k:hover:bg-amber-900/50",J&&"cursor-default"),children:"Major"}),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>eI("bottom","minor"),disabled:J,className:(0,k.cn)("px-4 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 transition-all font-semibold text-sm sm:text-base",J?(null==W?void 0:W.bottomQuality)==="minor"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"minor"===G.bottom?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"minor"===G.bottom?"border-sky-500 bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-300 ring-2 ring-sky-300":"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/50",J&&"cursor-default"),children:"Minor"})]})]})]}),"both"===el&&(0,s.jsxs)("div",{className:"space-y-2 sm:space-y-4 mb-2 sm:mb-4",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h5",{className:"text-xs sm:text-sm text-muted-foreground text-center mb-1 sm:mb-2",children:"1. Interval:"}),(0,s.jsx)("div",{className:"flex flex-wrap justify-center gap-1 sm:gap-2",children:(R?$&&$.length>0?f.filter(e=>$.includes(e)):f:f.filter(e=>ek.has(e))).map(e=>{let r=v[e],t=Y===e,a=(null==W?void 0:W.degree)===e,d=r.default;return J?a?d=r.correct:t&&!a&&(d=r.incorrect):d=t?"".concat(r.default," ring-2 ring-offset-1"):"".concat(r.default," ").concat(r.hover),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>_(e),disabled:J,className:(0,k.cn)("relative px-2 sm:px-3 py-1 sm:py-2 rounded-md sm:rounded-lg border-2 transition-all","font-semibold text-xs sm:text-sm min-w-[38px] sm:min-w-[50px]",d,J&&"cursor-default"),children:(0,s.jsx)("div",{className:"font-bold",children:j.xz[e]})},e)})})]}),(0,s.jsxs)("div",{className:"flex justify-center gap-4 sm:gap-6",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center gap-1 sm:gap-2",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm text-muted-foreground",children:"2. Top:"}),(0,s.jsxs)("div",{className:"flex gap-1",children:[(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>O(e=>({...e,top:"major"})),disabled:J,className:(0,k.cn)("px-3 sm:px-4 py-1.5 sm:py-2 rounded-md sm:rounded-lg border-2 transition-all font-semibold text-xs sm:text-sm",J?(null==W?void 0:W.topQuality)==="major"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"major"===G.top?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"major"===G.top?"border-amber-500 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 ring-2 ring-amber-300":"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/50",J&&"cursor-default"),children:"Maj"}),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>O(e=>({...e,top:"minor"})),disabled:J,className:(0,k.cn)("px-3 sm:px-4 py-1.5 sm:py-2 rounded-md sm:rounded-lg border-2 transition-all font-semibold text-xs sm:text-sm",J?(null==W?void 0:W.topQuality)==="minor"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"minor"===G.top?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"minor"===G.top?"border-sky-500 bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-300 ring-2 ring-sky-300":"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/50",J&&"cursor-default"),children:"min"})]})]}),(0,s.jsxs)("div",{className:"flex flex-col items-center gap-1 sm:gap-2",children:[(0,s.jsx)("span",{className:"text-xs sm:text-sm text-muted-foreground",children:"3. Bottom:"}),(0,s.jsxs)("div",{className:"flex gap-1",children:[(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>O(e=>({...e,bottom:"major"})),disabled:J,className:(0,k.cn)("px-3 sm:px-4 py-1.5 sm:py-2 rounded-md sm:rounded-lg border-2 transition-all font-semibold text-xs sm:text-sm",J?(null==W?void 0:W.bottomQuality)==="major"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"major"===G.bottom?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dar
1k:bg-card":"major"===G.bottom?"border-amber-500 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 ring-2 ring-amber-300":"border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/50",J&&"cursor-default"),children:"Maj"}),(0,s.jsx)(o.P.button,{whileTap:{scale:.98},onClick:()=>O(e=>({...e,bottom:"minor"})),disabled:J,className:(0,k.cn)("px-3 sm:px-4 py-1.5 sm:py-2 rounded-md sm:rounded-lg border-2 transition-all font-semibold text-xs sm:text-sm",J?(null==W?void 0:W.bottomQuality)==="minor"?"border-green-500 bg-green-200 dark:bg-green-900/70 text-green-800 dark:text-green-200":"minor"===G.bottom?"border-red-500 bg-red-200 dark:bg-red-900/70 text-red-800 dark:text-red-200":"border-slate-300 bg-slate-100 dark:bg-card":"minor"===G.bottom?"border-sky-500 bg-sky-100 dark:bg-sky-900/50 text-sky-700 dark:text-sky-300 ring-2 ring-sky-300":"border-sky-300 dark:border-sky-700 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/50",J&&"cursor-default"),children:"min"})]})]})]}),(0,s.jsx)("div",{className:(0,k.cn)("flex justify-center mt-2 sm:mt-4",J&&"invisible"),children:(0,s.jsxs)(x.$,{onClick:eE,disabled:!Y||!G.top||!G.bottom,size:"sm",className:"px-6 sm:px-8 py-2 sm:py-3 h-8 sm:h-10",children:[(0,s.jsx)(l.CMH,{className:"mr-1.5 sm:mr-2",size:12}),"Check"]})})]})]}),(0,s.jsx)("div",{className:(0,k.cn)("flex items-start justify-center pt-1 sm:pt-2","both"===el?"min-h-[32px] sm:min-h-[140px]":"min-h-[40px] sm:min-h-[140px]"),children:J&&W&&(0,s.jsxs)("div",{className:"text-center animate-in fade-in duration-200",children:[(0,s.jsx)("div",{className:"flex items-center justify-center gap-1.5 sm:gap-3 mb-1 sm:mb-3",children:U?(0,s.jsxs)("div",{className:"flex items-center gap-1 sm:gap-2 px-2 sm:px-4 py-1 sm:py-2 rounded-md sm:rounded-xl bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-700",children:[(0,s.jsx)(l.CMH,{className:"text-green-600 dark:text-green-400",size:"both"===el?10:14}),(0,s.jsx)("span",{className:"font-medium text-xs sm:text-base text-green-700 dark:text-green-300",children:"Correct!"})]}):(0,s.jsxs)("div",{className:"flex items-center gap-1 sm:gap-2 px-2 sm:px-4 py-1 sm:py-2 rounded-md sm:rounded-xl bg-red-100 dark:bg-red-950/50 border border-red-300 dark:border-red-700",children:[(0,s.jsx)(l.QCr,{className:"text-red-600 dark:text-red-400",size:"both"===el?10:14}),(0,s.jsx)("span",{className:"font-medium text-xs sm:text-base text-red-700 dark:text-red-300",children:"interval"===el?(0,s.jsxs)(s.Fragment,{children:["Answer: ",(0,s.jsx)("span",{className:"font-bold",children:j.xz[W.degree]})]}):"quality"===el?(0,s.jsxs)(s.Fragment,{children:["Answer: ",(0,s.jsxs)("span",{className:"font-bold",children:["major"===W.topQuality?"Maj":"min","/","major"===W.bottomQuality?"Maj":"min"]})]}):(0,s.jsxs)(s.Fragment,{children:["Answer: ",(0,s.jsxs)("span",{className:"font-bold",children:[j.xz[W.degree]," ","major"===W.topQuality?"Maj":"min","/","major"===W.bottomQuality?"Maj":"min"]})]})})]})}),("interval"===el||"studying"===ei)&&(0,s.jsxs)("div",{className:"hidden sm:inline-flex text-sm px-4 py-2 rounded-xl bg-slate-100 dark:bg-card border border-slate-300 dark:border-border items-center gap-3",children:[(0,s.jsx)(N,{topChord:eB(W.topRoot,W.topQuality),bottomChord:eB(W.bottomRoot,W.bottomQuality),topQuality:W.topQuality,bottomQuality:W.bottomQuality}),(0,s.jsx)("span",{className:"text-slate-500",children:"="}),(0,s.jsx)("span",{className:"font-bold text-slate-800 dark:text-slate-200",children:j.xz[W.degree]}),(0,s.jsxs)("span",{className:"text-slate-500 dark:text-slate-400",children:["(",j.dN[W.degree]," semitones)"]})]})]})})]}),(0,s.jsx)("div",{className:(0,k.cn)("sm:mt-6","both"===el?"mt-1":"mt-2"),children:(0,s.jsx)(h.A,{items:eQ,placeholder:"Answer history will appear here"})}),r&&(0,s.jsx)("div",{className:"hidden sm:flex justify-center gap-4 mt-8",children:(0,s.jsxs)(x.$,{onClick:r,variant:"secondary",className:"flex items-center gap-2",children:[(0,s.jsx)(c.A,{className:"h-4 w-4"})," ",t?"Back to Map":"Back to Practice"]})})]}):(0,s.jsx)("div",{className:"flex items-center justify-center min-h-[400px]",children:(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("div",{className:"animate-spin h-8 w-8 border-2 border-violet-400 border-t-transparent roun
1ded-full mx-auto mb-4"}),(0,s.jsx)("p",{className:"text-muted-foreground text-sm",children:"Loading audio..."})]})})},C=w}}]);
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.