@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:var(--font-geist-sans),ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-semibold:600;--font-weight-bold:700;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.hidden{display:none}.table{display:table}.min-h-screen{min-height:100vh}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-center{justify-content:center}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing)*4)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-2\.5{padding-bottom:calc(var(--spacing)*2.5)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}:root{--primary:#4d5bd9;--primary-light:#7b86e2;--secondary:#16c172;--accent:#ff7c43;--warning:#ff3a20;--background:#f5f7ff;--card-bg:#fff;--text-primary:#212b36;--text-secondary:#637381;--border:#e0e3eb;--staff-line:#9da4ae;--staff-height:140px;--staff-spacing:12px;--transition-fast:.2s ease;--transition-medium:.3s ease;--transition-slow:.5s ease}[data-theme=dark]{--primary:#6c72cb;--primary-light:#8a91e5;--secondary:#16b3ac;--accent:#ff9f5a;--warning:#ff5252;--background:#121721;--card-bg:#1e2430;--text-primary:#f8f9fa;--text-secondary:#adb5bd;--border:#343a40;--staff-line:#505a6b}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{background-color:var(--background);color:var(--text-primary);min-height:100vh;transition:background-color var(--transition-medium);padding:0 1rem}.container{max-width:600px;margin:0 auto;padding:.75rem 0}@media (max-width:480px){.container{padding:0}}header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}h1{color:var(--primary);margin:0;font-size:1.5rem;font-weight:700}.subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.95rem}.btn{background-color:var(--primary);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;display:inline-flex}.btn:hover{background-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.btn-secondary{background-color:var(--secondary)}.btn-secondary:hover{background-color:#14a563}.btn-outline{color:var(--primary);border:2px solid var(--primary);background-color:#0000}.btn-outline:hover{background-color:var(--primary);color:#fff}.btn-premium-cta{color:#f59e0b;border-color:#f59e0b}.btn-premium-cta:hover{color:#fff;background-color:#f59e0b}.btn-next{background-color:var(--secondary);letter-spacing:.02em;font-size:1rem;font-weight:600;animation:1.5s ease-in-out infinite btn-next-pulse}.btn-next:hover{background-color:var(--secondary);filter:brightness(1.15)}.btn-next-wrong{background-color:var(--text-secondary);letter-spacing:.02em;font-size:1rem;font-weight:600}.btn-next-wrong:hover{background-color:var(--text-secondary);filter:brightness(1.15)}@keyframes btn-next-pulse{0%,to{box-shadow:0 0 #16c17266}50%{box-shadow:0 0 0 8px #16c17200}}.kbd-hint{text-transform:uppercase;letter-spacing:.04em;color:inherit;vertical-align:middle;background:#ffffff26;border:1px solid #ffffff40;border-radius:4px;margin-left:.4rem;padding:.1rem .4rem;font-family:inherit;font-size:.65rem;font-weight:600;line-height:1.4;display:inline-block}.btn-icon{border-radius:50%;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:0;display:flex}.btn-sm{padding:.4rem .8rem;font-size:.8rem}.theme-toggle{background-color:var(--card-bg);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;width:2.5rem;height:2.5rem;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background-color:var(--primary-light);color:#fff}[data-theme=dark] .cl-branded,[data-theme=dark] .cl-branded *{color:#adb5bd!important}[data-theme=dark] .cl-modalCloseButton{color:#f8f9fa!important}[data-theme=dark] .cl-identityPreview,[data-theme=dark] .cl-identityPreview__identifier{color:#adb5bd!important}#general-settings-modal{z-index:100;opacity:0;visibility:hidden;width:100%;height:100%;transition:all var(--transition-medium);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}#general-settings-modal.show{opacity:1;visibility:visible}#general-settings-modal.show .modal-content{transform:translateY(0)}.general-settings-list{flex-direction:column;display:flex}.general-settings-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.75rem 0;display:flex}.general-settings-row:last-child{border-bottom:none}.general-settings-label{color:var(--text-primary);align-items:center;gap:.6rem;font-size:.9rem;font-weight:500;display:flex}.toggle-switch{background-color:var(--border);cursor:pointer;width:44px;height:24px;transition:background-color var(--transition-fast);border:none;border-radius:12px;flex-shrink:0;padding:0;position:relative}.toggle-switch.active{background-color:var(--primary)}.toggle-knob{width:20px;height:20px;transition:transform var(--transition-fast);background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000026}.toggle-switch.active .toggle-knob{transform:translate(20px)}.card{background-color:var(--card-bg);transition:background-color var(--transition-medium),box-shadow var(--transition-medium);border-radius:12px;margin-bottom:.75rem;padding:1rem;box-shadow:0 4px 24px #0000000f}.card-title{align-items:center;gap:.4rem;margin-bottom:.35rem;font-size:.95rem;font-weight:600;display:flex}.stats-grid{grid-template-columns:repeat(4,1fr);gap:.35rem;margin-bottom:.35rem;display:grid}.stat-card{background-color:rgba(var(--primary-rgb),.05);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:.35rem .3rem;display:flex}.stat-value{color:var(--primary);word-break:break-word;text-overflow:ellipsis;max-width:100%;margin-bottom:.15rem;font-size:1rem;font-weight:700;overflow:hidden}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.6rem}.stat-card--locked{opacity:.55;cursor:pointer}.stat-lock{font-size:1rem}@media (max-width:480px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.stat-card{padding:.6rem .4rem}}.badge{background-color:rgba(var(--primary-rgb),.1);color:var(--primary);border-radius:100px;align-items:center;gap:.25rem;padding:.25rem .75rem;font-size:.7rem;font-weight:500;display:inline-flex}.badge-success{color:var(--secondary);background-color:#16c1721a}.badge-warning{color:var(--accent);background-color:#ff7c431a}.badge-danger{color:var(--warning);background-color:#ff3a201a}.staff-container{height:var(--staff-height,140px);transition:all var(--transition-medium,.3s ease);margin-bottom:.75rem;position:relative;overflow:visible}.staff-svg{width:100%;height:100%;transition:all var(--transition-medium,.3s ease);overflow:visible}.staff-line{stroke:var(--staff-line);stroke-width:1.5px;transition:stroke var(--transition-medium)}.staff-clef{fill:var(--text-primary);text-anchor:middle;dominant-baseline:middle;transition:fill var(--transition-medium);font-family:Noto Music,serif;font-size:50px}.staff-clef--bass{font-size:40px}.staff-brace{stroke:var(--text-primary);transition:stroke var(--transition-medium)}.staff-container--grand{height:260px}.note-circle{fill:var(--primary);transition:all var(--transition-fast)}.accidental-symbol{fill:var(--primary);pointer-events:none;transition:opacity var(--transition-fast);font-size:24px;font-weight:700}.note-label{fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:.8rem;font-weight:600}.clef-selector{justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.options-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.75rem;display:grid}.option-btn{background-color:var(--card-bg);border:2px solid var(--border);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);text-align:center;border-radius:8px;padding:.4rem .25rem;font-size:.9rem;font-weight:500}.option-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 2px 8px #0000000d}.option-btn.correct{background-color:var(--secondary);border-color:var(--secondary);color:#fff}.option-btn.wrong{background-color:var(--warning);border-color:var(--warning);color:#fff}.option-btn.option-correct{background-color:var(--secondary);border-color:var(--secondary);color:#fff;font-weight:700;box-shadow:0 0 12px #16c17259}.option-btn.option-wrong{opacity:.35;border-color:var(--warning);cursor:not-allowed;text-decoration:line-through;transform:none}.option-btn.option-wrong:hover{box-shadow:none;transform:none}.feedback-container{transition:all var(--transition-medium);opacity:0;max-height:0;margin-top:.75rem;overflow:hidden}.feedback-container.show{opacity:1;max-height:500px;margin-bottom:1rem}.feedback-box{background-color:var(--card-bg);border-left:4px solid var(--primary);border-radius:8px;flex-direction:column;gap:.5rem;padding:.75rem;display:flex}.feedback-box.correct{border-left-color:var(--secondary)}.feedback-box.wrong{border-left-color:var(--warning)}.feedback-title{align-items:center;gap:.5rem;font-weight:600;display:flex}.feedback-title.correct{color:var(--secondary)}.feedback-title.wrong{color:var(--warning)}.feedback-tip{color:var(--text-secondary);font-size:.8rem;line-height:1.4}.feedback-highlight{color:var(--primary);font-weight:500}.progress-bar-container{background-color:rgba(var(--primary-rgb),.1);border-radius:100px;width:100%;height:.4rem;margin-bottom:.3rem;overflow:hidden}.progress-bar{background-color:var(--primary);height:100%;transition:width var(--transition-slow);border-radius:100px}.progress-text{color:var(--text-secondary);justify-content:space-between;font-size:.7rem;display:flex}.challenge-info{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.timer{color:var(--text-secondary);align-items:center;gap:.25rem;font-size:.9rem;display:flex}.mode-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.mode-btn{background-color:var(--card-bg);border:2px solid var(--border);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);border-radius:8px;padding:.6rem 1rem;font-size:.9rem;font-weight:500}.mode-btn:hover,.mode-btn.active{background-color:var(--primary);border-color:var(--primary);color:#fff}.btn--locked{opacity:.55;cursor:pointer;position:relative}.mode-btn--disabled,.settings-option--disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.mode-btn--locked{opacity:.55;cursor:pointer;position:relative}.mode-btn--locked:hover{border-color:var(--text-secondary);background-color:var(--card-bg);color:var(--text-primary)}.settings-option--locked{opacity:.55;cursor:pointer;position:relative}.settings-option--locked:hover,.settings-option--locked.active{background-color:var(--card-bg);border-color:var(--border);color:var(--text-primary)}.lock-icon{margin-left:.3rem;font-size:.7rem}.btn-group{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.5rem;display:flex}.note-animation{animation:.5s ease-in-out pulse}.streak-pulse{animation:.8s ease-in-out streakPulse}@keyframes pulse{50%{opacity:.5}}@keyframes streakPulse{0%{color:var(--primary);transform:scale(1)}30%{color:var(--accent);transform:scale(1.2)}to{color:var(--primary);transform:scale(1)}}.chart-container{width:100%;height:150px;margin-top:1rem;margin-bottom:2rem;position:relative}.chart-bar{background-color:var(--primary);border-radius:4px 4px 0 0;width:7%;transition:height .5s;position:absolute;bottom:0}.chart-label{color:var(--text-secondary);text-align:center;white-space:nowrap;width:100%;font-size:.7rem;position:absolute;bottom:-24px}.chart-value{color:var(--primary);text-align:center;width:100%;font-size:.7rem;font-weight:600;position:absolute;top:-24px}.stats-modal-content{padding-bottom:1.25rem}.stats-tabs{background-color:rgba(var(--primary-rgb),.06);border-radius:10px;gap:.25rem;margin-bottom:1.25rem;padding:.2rem;display:flex}.stats-tab{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .75rem;font-size:.8rem;font-weight:600;display:flex}.stats-tab:hover{color:var(--text-primary)}.stats-tab-active{background-color:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(var(--primary-rgb),.3)}.stats-tab-badge{background-color:#ffffff40;border-radius:100px;padding:.05rem .4rem;font-size:.6rem;font-weight:700;line-height:1.4}.stats-tab:not(.stats-tab-active) .stats-tab-badge{background-color:rgba(var(--primary-rgb),.15);color:var(--primary)}.stats-tab-content{animation:.2s fadeInTab}@keyframes fadeInTab{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.stats-section-header{color:var(--text-primary);align-items:center;gap:.4rem;margin-bottom:.6rem;font-size:.85rem;font-weight:600;display:flex}.stats-section-icon{font-size:1rem}.stats-counter-pill{color:var(--primary);background-color:rgba(var(--primary-rgb),.1);letter-spacing:.02em;border-radius:100px;margin-left:auto;padding:.1rem .45rem;font-size:.65rem;font-weight:700}.daily-challenges{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.dc-card{background-color:rgba(var(--primary-rgb),.04);border:1px solid var(--border);transition:all var(--transition-fast);border-radius:10px;align-items:center;gap:.6rem;padding:.55rem .65rem;display:flex}.dc-card--done{background-color:#16c1720f;border-color:#16c17266}.dc-icon{background-color:rgba(var(--primary-rgb),.1);border-radius:8px;justify-content:center;align-items:center;width:2.2rem;min-width:2.2rem;height:2.2rem;font-size:1rem;display:flex}.dc-card--done .dc-icon{background-color:#16c17226}.dc-body{flex:1;min-width:0}.dc-row{justify-content:space-between;align-items:center;display:flex}.dc-title{font-size:.78rem;font-weight:600;line-height:1.2}.dc-fraction{color:var(--text-secondary);white-space:nowrap;font-size:.65rem;font-weight:600}.dc-check{color:#16c172;font-size:.75rem;font-weight:700}.dc-desc{color:var(--text-secondary);margin:.1rem 0 .3rem;font-size:.65rem;line-height:1.3}.dc-bar-track{background-color:rgba(var(--primary-rgb),.1);border-radius:4px;width:100%;height:4px;overflow:hidden}[data-theme=dark] .dc-bar-track{background-color:#ffffff14}.dc-bar-fill{background-color:var(--primary);border-radius:4px;height:100%;transition:width .5s}.dc-card--done .dc-bar-fill{background-color:#16c172}.challenge-toast{background:var(--card-bg);z-index:9999;cursor:pointer;border:1.5px solid #16c17280;border-radius:14px;align-items:center;gap:.75rem;width:calc(100% - 2rem);max-width:400px;padding:.85rem 1.25rem;animation:.4s toast-in,.4s 3.6s forwards toast-out;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000040}.challenge-toast-icon{flex-shrink:0;font-size:1.6rem}.challenge-toast-body{flex-direction:column;gap:.15rem;min-width:0;display:flex}.challenge-toast-title{color:#16c172;font-size:.9rem;font-weight:700}.challenge-toast-desc{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.challenge-toast--achievement{border-color:#ffc10780}.challenge-toast--achievement .challenge-toast-title{color:#ffc107}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(1.5rem)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(1.5rem)}}.ach-summary{background-color:rgba(var(--primary-rgb),.05);border-radius:12px;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:.75rem;display:flex}.ach-summary-ring{width:3.5rem;min-width:3.5rem;height:3.5rem;position:relative}.ach-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}.ach-ring-bg{fill:none;stroke:rgba(var(--primary-rgb),.12);stroke-width:3px}.ach-ring-fill{fill:none;stroke:var(--primary);stroke-width:3px;stroke-linecap:round;transition:stroke-dasharray .6s}.ach-ring-label{color:var(--primary);justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;position:absolute;inset:0}.ach-summary-title{font-size:.85rem;font-weight:600}.ach-summary-sub{color:var(--text-secondary);margin-top:.15rem;font-size:.7rem}.ach-category{margin-bottom:1rem}.ach-category:last-child{margin-bottom:0}.ach-category-header{border-bottom:1px solid var(--border);align-items:center;gap:.35rem;margin-bottom:.45rem;padding-bottom:.3rem;display:flex}.ach-category-icon{font-size:.9rem}.ach-category-name{letter-spacing:.02em;font-size:.78rem;font-weight:700}.ach-category-count{color:var(--text-secondary);background:rgba(var(--primary-rgb),.08);border-radius:8px;margin-left:auto;padding:.1rem .4rem;font-size:.65rem;font-weight:600}.ach-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.ach-card-tier{gap:3px;margin-bottom:.3rem;display:flex}.ach-tier-dot{background:rgba(var(--primary-rgb),.15);border-radius:50%;width:6px;height:6px}.ach-tier-dot--done{background:var(--primary)}.ach-card--done[data-tier="3"]{background-color:#8b5cf60d;border-color:#8b5cf64d}.ach-card--done[data-tier="4"]{background-color:#f59e0b0d;border-color:#f59e0b59}.ach-card--done[data-tier="5"]{background-color:#ef44440d;border-color:#ef444459}.ach-card--done[data-tier="3"] .ach-card-bar-fill{background:linear-gradient(90deg,var(--primary),#8b5cf6)}.ach-card--done[data-tier="4"] .ach-card-bar-fill{background:linear-gradient(90deg,#f59e0b,#f97316)}.ach-card--done[data-tier="5"] .ach-card-bar-fill{background:linear-gradient(90deg,#ef4444,#dc2626)}.ach-card--done[data-tier="3"] .ach-tier-dot--done{background:#8b5cf6}.ach-card--done[data-tier="4"] .ach-tier-dot--done{background:#f59e0b}.ach-card--done[data-tier="5"] .ach-tier-dot--done{background:#ef4444}.ach-card{text-align:center;background-color:rgba(var(--primary-rgb),.03);border:1px solid var(--border);opacity:.55;transition:all var(--transition-fast);border-radius:12px;flex-direction:column;align-items:center;padding:.85rem .5rem .65rem;display:flex}.ach-card--done{opacity:1;border-color:rgba(var(--primary-rgb),.25);background-color:rgba(var(--primary-rgb),.06)}.ach-card-icon{background-color:rgba(var(--primary-rgb),.1);border-radius:50%;justify-content:center;align-items:center;width:2.6rem;height:2.6rem;margin-bottom:.35rem;font-size:1.5rem;display:flex}.ach-card--done .ach-card-icon{background-color:rgba(var(--primary-rgb),.15)}.ach-card-name{margin-bottom:.15rem;font-size:.78rem;font-weight:700;line-height:1.2}.ach-card-desc{color:var(--text-secondary);margin-bottom:.5rem;font-size:.6rem;line-height:1.3}.ach-card-bar-track{background-color:rgba(var(--primary-rgb),.1);border-radius:4px;width:100%;height:4px;overflow:hidden}[data-theme=dark] .ach-card-bar-track{background-color:#ffffff14}.ach-card-bar-fill{background-color:var(--primary);border-radius:4px;height:100%;transition:width .5s}.ach-card--done .ach-card-bar-fill{background-color:#16c172}.ach-card-status{margin-top:.3rem;font-size:.6rem;font-weight:600}.ach-card-pct{color:var(--text-secondary)}.ach-card-unlocked{color:#16c172}.ach-card--premium{opacity:.5;cursor:pointer;position:relative}.ach-premium-badge{letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,var(--primary),#8b5cf6);border-radius:4px;padding:.1rem .35rem;font-size:.55rem;font-weight:700;position:absolute;top:.4rem;right:.4rem}.chart-locked{cursor:pointer;background:rgba(var(--primary-rgb),.04);border:1px dashed var(--border);text-align:center;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.5rem 1rem;display:flex}.chart-locked-icon{font-size:1.4rem}.chart-locked-text{color:var(--text-secondary);max-width:240px;font-size:.78rem;line-height:1.4}.stats-pro-badge{letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,var(--primary),#8b5cf6);border-radius:4px;margin-left:.4rem;padding:.1rem .35rem;font-size:.55rem;font-weight:700}@media (max-width:360px){.ach-grid{grid-template-columns:1fr}}#bug-report-modal{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .2s;display:none;position:fixed;top:0;left:0}#bug-report-modal.show{opacity:1;display:flex}.bug-report-content{width:90%;max-width:460px}.bug-report-form{flex-direction:column;gap:.6rem;padding:0 .25rem;display:flex}.bug-report-label{color:var(--text-primary);justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:600;display:flex}.bug-report-char-count{color:var(--text-secondary);font-size:.65rem;font-weight:400}.bug-report-categories{flex-wrap:wrap;gap:.4rem;display:flex}.bug-report-cat{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:16px;padding:.3rem .65rem;font-size:.72rem;font-weight:500}.bug-report-cat:hover{border-color:var(--primary);color:var(--text-primary)}.bug-report-cat--active{background:var(--primary);border-color:var(--primary);color:#fff}.bug-report-textarea{border:1px solid var(--border);background:var(--card-bg);width:100%;color:var(--text-primary);resize:vertical;min-height:80px;transition:border-color var(--transition-fast);border-radius:8px;padding:.6rem .75rem;font-family:inherit;font-size:.8rem}.bug-report-textarea:focus{border-color:var(--primary);outline:none}.bug-report-textarea::placeholder{color:var(--text-secondary);opacity:.6}.bug-report-input{border:1px solid var(--border);background:var(--card-bg);width:100%;color:var(--text-primary);transition:border-color var(--transition-fast);border-radius:8px;padding:.5rem .75rem;font-family:inherit;font-size:.8rem}.bug-report-input:focus{border-color:var(--primary);outline:none}.bug-report-input::placeholder{color:var(--text-secondary);opacity:.6}.bug-report-submit{width:100%;margin-top:.4rem}.bug-report-submit:disabled{opacity:.5;cursor:not-allowed}.bug-report-error{color:#ef4444;text-align:center;font-size:.75rem}.bug-report-success{flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;display:flex}.bug-report-success-icon{color:#16c172;background:#16c17226;border-radius:50%;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.4rem;font-weight:700;display:flex}.bug-report-success-text{color:var(--text-primary);font-size:1rem;font-weight:700}.bug-report-success-sub{color:var(--text-secondary);font-size:.8rem}#settings-modal,#stats-modal,#hint-modal,#paywall-modal{z-index:100;opacity:0;visibility:hidden;width:100%;height:100%;transition:all var(--transition-medium);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}#settings-modal.show,#stats-modal.show,#hint-modal.show,#paywall-modal.show{opacity:1;visibility:visible}.modal-content{background-color:var(--card-bg);width:90%;max-width:500px;max-height:90vh;transition:transform var(--transition-medium);border-radius:12px;padding:1.5rem;position:relative;overflow-y:auto;transform:translateY(20px)}#settings-modal.show .modal-content,#stats-modal.show .modal-content,#hint-modal.show .modal-content,#paywall-modal.show .modal-content{transform:translateY(0)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-title{align-items:center;gap:.4rem;margin:0;font-size:1.2rem;font-weight:600;display:flex}.modal-close{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;font-size:1.5rem}.modal-close:hover{color:var(--warning)}.settings-section{margin-bottom:1.5rem}.settings-label{color:var(--primary);margin-bottom:.75rem;font-size:1rem;font-weight:500}.settings-options{flex-wrap:wrap;gap:.5rem;display:flex}.settings-option{background-color:var(--card-bg);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);border-radius:6px;padding:.5rem .75rem;font-size:.9rem}.settings-option:hover,.settings-option.active{background-color:var(--primary);border-color:var(--primary);color:#fff}.paywall-content{text-align:center;max-width:440px;padding:2rem 1.5rem 1.5rem;position:relative}.paywall-close{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.25rem;display:flex;position:absolute;top:.75rem;right:.75rem}.paywall-close:hover{color:var(--text-primary);background:#0000000d}[data-theme=dark] .paywall-close:hover{background:#ffffff14}.paywall-header{margin-bottom:1.25rem}.paywall-badge{letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--primary),#8b5cf6);border-radius:100px;margin-bottom:.75rem;padding:.2rem .6rem;font-size:.65rem;font-weight:700;display:inline-block}.paywall-title{margin:0 0 .35rem;font-size:1.3rem;font-weight:700;line-height:1.2}.paywall-subtitle{color:var(--text-secondary);margin:0;font-size:.82rem;line-height:1.5}.paywall-price-card{background:linear-gradient(135deg,#4d5bd914,#8b5cf614);border:1px solid #4d5bd926;border-radius:12px;margin-bottom:1.25rem;padding:1rem}[data-theme=dark] .paywall-price-card{background:linear-gradient(135deg,#6c72cb1f,#8b5cf61f);border-color:#6c72cb33}.paywall-price-row{justify-content:center;align-items:baseline;gap:.35rem;display:flex}.paywall-price{letter-spacing:-.02em;background:linear-gradient(135deg,var(--primary),#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.25rem;font-weight:800;line-height:1}.paywall-price-period{color:var(--text-secondary);font-size:.85rem;font-weight:500}.paywall-price-note{color:var(--text-secondary);margin-top:.35rem;font-size:.7rem;display:block}.paywall-features{text-align:left;flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.paywall-feature{background-color:var(--card-bg);border:1px solid var(--border);transition:border-color var(--transition-fast);border-radius:10px;align-items:center;gap:.7rem;padding:.6rem .7rem;display:flex}.paywall-feature:hover{border-color:var(--primary-light)}.paywall-feature-icon{width:2.25rem;min-width:2.25rem;height:2.25rem;color:var(--primary);background:linear-gradient(135deg,#4d5bd91a,#8b5cf61a);border-radius:8px;justify-content:center;align-items:center;display:flex}[data-theme=dark] .paywall-feature-icon{color:var(--primary-light);background:linear-gradient(135deg,#6c72cb26,#8b5cf626)}.paywall-feature-title{margin-bottom:.1rem;font-size:.8rem;font-weight:600;line-height:1.2}.paywall-feature-desc{color:var(--text-secondary);font-size:.68rem;line-height:1.3}.paywall-meter{margin-bottom:1rem}.paywall-meter-bar{background-color:var(--border);border-radius:6px;width:100%;height:6px;overflow:hidden}.paywall-meter-fill{background:linear-gradient(90deg,var(--primary),var(--accent,#ff7c43));border-radius:6px;height:100%;transition:width .5s}.paywall-meter-label{color:var(--text-secondary);margin-top:.35rem;font-size:.65rem}.paywall-cta{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;cursor:pointer;width:100%;transition:all var(--transition-fast);border:none;border-radius:10px;padding:.8rem 1.25rem;font-size:.95rem;font-weight:700;box-shadow:0 4px 14px #4d5bd94d}.paywall-cta:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4d5bd966}.paywall-cta:disabled{opacity:.7;cursor:not-allowed}.paywall-dismiss{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;margin:.75rem auto 0;padding:.25rem;font-size:.72rem;display:block}.paywall-dismiss:hover{color:var(--text-primary)}.plays-counter{color:var(--text-secondary);background-color:rgba(var(--primary-rgb),.06);border-radius:100px;justify-content:center;align-items:center;gap:.4rem;margin-left:auto;padding:.3rem .7rem;font-size:.7rem;font-weight:600;display:flex}.plays-counter-bar{background-color:rgba(var(--primary-rgb),.12);border-radius:4px;width:3rem;height:4px;overflow:hidden}.plays-counter-fill{background-color:var(--primary);border-radius:4px;height:100%;transition:width .3s}.plays-counter-fill--low{background-color:var(--accent,#ff7c43)}.plays-counter-fill--empty{background-color:var(--warning,#ff3a20)}.plays-counter--premium{color:var(--primary)}.memory-aid{align-items:flex-start;gap:.5rem;margin-top:1rem;display:flex}.memory-aid-icon{color:var(--accent);margin-top:.2rem;font-size:1.2rem}.memory-aid-text{flex:1;font-size:.9rem;line-height:1.5}.level-indicator{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.level-badge{background-color:var(--primary);color:#fff;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;font-weight:600}.level-text{color:var(--text-secondary);font-size:.9rem}.game-back-btn{flex-shrink:0;justify-content:center;align-items:center;padding:.3rem .45rem;display:flex}.game-settings-btn{margin-left:auto}.hint-content{margin-bottom:1.5rem;font-size:.95rem;line-height:1.6}.mnemonic{background-color:rgba(var(--primary-rgb),.05);border-radius:8px;margin:1rem 0;padding:1rem}.mnemonic-title{color:var(--primary);margin-bottom:.5rem;font-weight:600}.mnemonic-text{font-size:.9rem;line-height:1.5}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:.3s forwards slideIn}.audio-loading{z-index:1000;color:#fff;background-color:#000000b3;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.audio-loading p{margin-top:1rem;font-size:1.2rem}.spinner{border:5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.intro-screen{background-color:var(--primary);z-index:1000;color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}.intro-title{margin-bottom:1rem;font-size:2.5rem;font-weight:700}.intro-subtitle{opacity:.9;margin-bottom:2rem;font-size:1.2rem}.intro-btn{color:var(--primary);cursor:pointer;transition:all var(--transition-fast);background-color:#fff;border:none;border-radius:8px;padding:.8rem 2rem;font-size:1.1rem;font-weight:600}.intro-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #0000001a}@media (max-width:480px){.kbd-hint{display:none}body{padding:0 .5rem}.card{border-radius:10px;margin-bottom:.5rem;padding:.75rem}.btn-next,.btn-next-wrong,#game-container>.card:first-of-type>.btn{width:100%;padding:.7rem 1rem;font-size:.95rem}.options-grid{grid-template-columns:repeat(2,1fr);gap:.4rem}.option-btn{padding:.55rem .25rem;font-size:.95rem}.staff-container{height:120px;margin-bottom:.5rem}.staff-container--grand{height:220px}.level-indicator{flex-wrap:wrap;gap:.35rem;margin-bottom:.4rem}.level-badge{padding:.2rem .4rem;font-size:.7rem}.level-text{font-size:.78rem}.card-title{margin-bottom:.25rem;font-size:.85rem}.stats-grid{gap:.35rem}.stat-card{min-height:38px;padding:.4rem .3rem}.stat-value{font-size:.85rem}.stat-label{font-size:.55rem}.progress-bar-container{margin-bottom:.2rem}.btn-group{gap:.3rem;margin-top:.35rem}.btn-group .btn{padding:.4rem .7rem;font-size:.78rem}.feedback-box{gap:.35rem;padding:.6rem}.feedback-tip{font-size:.75rem}.challenge-info{margin-bottom:.35rem}.game-settings-btn{padding:.25rem .5rem;font-size:.72rem}.plays-counter{padding:.2rem .5rem;font-size:.6rem}}@media (max-width:380px){.level-text{font-size:.7rem}.option-btn{padding:.45rem .2rem;font-size:.85rem}.btn-group .btn{padding:.35rem .55rem;font-size:.72rem}}:root{--primary-rgb:77,91,217}[data-theme=dark]{--primary-rgb:108,114,203}.lp{flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:2rem 1rem;display:flex;position:relative;overflow:hidden}.lp-bg{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.lp-staff-ghost{background:repeating-linear-gradient(to bottom,transparent 0px,transparent 11px,var(--staff-line)11px,var(--staff-line)12px);opacity:.04;width:120%;height:180px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lp-float-note{color:var(--primary);opacity:0;font-size:1.6rem;animation:16s linear infinite floatNote;position:absolute}.lp-float-note--0{font-size:1.4rem;animation-delay:0s;left:5%}.lp-float-note--1{font-size:1.8rem;animation-delay:1.3s;left:12%}.lp-float-note--2{font-size:1.2rem;animation-delay:2.8s;left:22%}.lp-float-note--3{font-size:1.6rem;animation-delay:4.1s;left:33%}.lp-float-note--4{font-size:1.3rem;animation-delay:5.5s;left:44%}.lp-float-note--5{font-size:1.7rem;animation-delay:7s;left:55%}.lp-float-note--6{font-size:1.1rem;animation-delay:8.2s;left:65%}.lp-float-note--7{font-size:1.5rem;animation-delay:9.6s;left:74%}.lp-float-note--8{font-size:1.9rem;animation-delay:11s;left:82%}.lp-float-note--9{font-size:1.3rem;animation-delay:12.4s;left:90%}.lp-float-note--10{font-size:1.6rem;animation-delay:13.5s;left:18%}.lp-float-note--11{font-size:1.2rem;animation-delay:14.8s;left:70%}@keyframes floatNote{0%{opacity:0;transform:translateY(110vh)rotate(0)}5%{opacity:.12}50%{opacity:.08}95%{opacity:.12}to{opacity:0;transform:translateY(-10vh)rotate(30deg)}}.lp-hero{z-index:1;align-items:center;gap:3rem;width:100%;max-width:920px;display:flex;position:relative}.lp-copy{flex:1;min-width:0}.lp-logo{color:var(--primary);margin:0 0 .5rem;font-size:2.2rem;font-weight:700}.lp-headline{color:var(--text-primary);margin:0 0 .75rem;font-size:1.6rem;font-weight:700;line-height:1.3}.lp-sub{color:var(--text-secondary);max-width:400px;margin:0 0 1.75rem;font-size:1rem;line-height:1.55}.lp-buttons{flex-direction:column;gap:.6rem;max-width:280px;display:flex}.lp-btn{cursor:pointer;width:100%;transition:all var(--transition-fast);text-align:center;border:2px solid #0000;border-radius:10px;padding:.7rem 1.5rem;font-size:.95rem;font-weight:600}.lp-btn--primary{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;box-shadow:0 4px 14px rgba(var(--primary-rgb),.3)}.lp-btn--primary:hover{box-shadow:0 6px 20px rgba(var(--primary-rgb),.4);transform:translateY(-1px)}.lp-btn--outline{border-color:var(--border);color:var(--text-primary);background:0 0}.lp-btn--outline:hover{border-color:var(--primary);color:var(--primary)}.lp-btn--link{color:var(--text-secondary);text-align:left;background:0 0;border:none;width:auto;padding:.3rem 0;font-size:.85rem}.lp-btn--link:hover{color:var(--primary);text-decoration:underline}.lp-btn--ghost{color:var(--text-secondary);background:0 0;border:none;font-size:.85rem}.lp-btn--ghost:hover{color:var(--primary)}.lp-proof{flex-wrap:wrap;gap:.5rem 1.2rem;margin:1.5rem 0 0;padding:0;list-style:none;display:flex}.lp-proof li{color:var(--text-secondary);align-items:center;gap:.35rem;font-size:.78rem;display:flex}.lp-proof li:before{content:"✓";color:var(--secondary);font-size:.8rem;font-weight:700}.lp-preview-wrap{flex:none;width:300px}.lp-features{z-index:1;background:var(--card-bg);border:1px solid var(--border);border-radius:999px;align-items:center;gap:.8rem;margin-top:2.5rem;padding:.6rem 1.4rem;display:flex;position:relative}.lp-feature{color:var(--text-secondary);letter-spacing:.03em;text-transform:uppercase;font-size:.78rem;font-weight:600}.lp-feature-dot{background:var(--text-secondary);opacity:.4;border-radius:50%;width:4px;height:4px}.hero-preview{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;box-shadow:0 8px 30px #00000014}.hero-preview-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.hero-preview-badge{text-transform:uppercase;letter-spacing:.06em;color:var(--primary);background:rgba(var(--primary-rgb),.1);border-radius:6px;padding:.2rem .55rem;font-size:.65rem;font-weight:700}.hero-preview-streak{color:var(--secondary);font-size:.72rem;font-weight:600}.hero-preview-staff{width:100%;height:auto;margin-bottom:.5rem;display:block}.hero-note{transition:fill .3s}.hero-note--correct{fill:var(--secondary);stroke:var(--secondary)}.hero-preview-options{grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.4rem;display:grid}.hero-preview-opt{background:var(--background);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;padding:.35rem;font-size:.82rem;font-weight:600;transition:all .3s;display:flex}.hero-preview-opt--correct{background:var(--secondary);color:#fff;border-color:var(--secondary)}.hero-preview-opt--pulse{animation:2s ease-in-out infinite subtlePulse}@keyframes subtlePulse{0%,to{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)}50%{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15)}}.hero-preview-feedback{text-align:center;color:var(--secondary);padding:.2rem 0;font-size:.75rem;font-weight:600}@media (max-width:700px){.lp-hero{text-align:center;flex-direction:column}.lp-copy{flex-direction:column;align-items:center;display:flex}.lp-sub{max-width:360px}.lp-buttons{align-items:center}.lp-btn--link{text-align:center}.lp-proof{justify-content:center}.lp-preview-wrap{width:100%;max-width:320px}}.demo-page{max-width:520px;margin:2rem auto;padding:0 1rem}.demo-page-cta{text-align:center;margin-top:1.25rem}.demo-container{background-color:var(--card-bg);border:1px solid var(--border);border-radius:14px;max-width:480px;margin:0 auto;padding:1.5rem}.demo-header{align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.demo-badge{color:var(--primary);background-color:rgba(var(--primary-rgb),.1);border-radius:100px;padding:.2rem .6rem;font-size:.65rem;font-weight:600}.demo-streak{color:var(--primary);font-size:.75rem;font-weight:700}.demo-header .plays-counter{margin-left:auto}.demo-toggle-row{gap:.5rem;margin-bottom:.75rem;display:flex}.demo-toggle-btn{border:2px solid var(--border);background-color:var(--card-bg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .25rem;font-size:.8rem;font-weight:600;display:flex}.demo-toggle-btn:hover{border-color:var(--primary);color:var(--text-primary)}.demo-toggle-btn--active{border-color:var(--primary);background-color:rgba(var(--primary-rgb),.1);color:var(--primary)}.demo-toggle-count{opacity:.6;font-size:.6rem;font-weight:700}.demo-settings-row{gap:1rem;margin-bottom:1rem;display:flex}.demo-setting-group{flex-direction:column;flex:1;gap:.3rem;display:flex}.demo-setting-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:600}.demo-pill-group{gap:.25rem;display:flex}.demo-pill{border:1.5px solid var(--border);background-color:var(--card-bg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);text-align:center;border-radius:6px;flex:1;padding:.3rem .15rem;font-size:.65rem;font-weight:600}.demo-pill:hover{border-color:var(--primary);color:var(--text-primary)}.demo-pill--active{border-color:var(--primary);background-color:rgba(var(--primary-rgb),.1);color:var(--primary)}.demo-container .staff-container{margin-bottom:1rem}.demo-play-btn{width:100%;margin-bottom:.75rem;display:block}.demo-feedback{text-align:center;border-radius:8px;margin-bottom:.75rem;padding:.35rem;font-size:.8rem;font-weight:600}.demo-feedback--correct{color:#16c172;background-color:#16c17214}.demo-feedback--wrong{color:var(--accent,#ff7c43);background-color:#ff7c4314}.demo-limit-reached{text-align:center;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem .5rem;display:flex}.demo-limit-text{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:600}.demo-try-other{width:100%;max-width:280px}.led-line{stroke:var(--staff-line,#9da4ae);stroke-width:1.5px;transition:stroke var(--transition-medium,.3s ease)}[data-theme=dark] .led-line{stroke:var(--staff-line,#505a6b)}.footer{border-top:1px solid var(--border);width:100%;margin-top:auto;padding:.5rem 0}.footer-container{padding-left:1rem;padding-right:1rem}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.footer-copyright{color:var(--text-secondary);font-size:.85rem}.footer-links{gap:1.5rem;display:flex}.footer-link{color:var(--text-secondary);transition:color var(--transition-fast);font-size:.85rem;text-decoration:none;position:relative}.footer-link:hover{color:var(--primary)}.footer-link:after{content:"";background-color:var(--primary);width:0;height:1px;transition:width var(--transition-fast);position:absolute;bottom:-2px;left:0}.footer-link:hover:after{width:100%}body{flex-direction:column;min-height:100vh;display:flex}main.container{flex:1}@media (max-width:480px){.footer-content{text-align:center;flex-direction:column;gap:.75rem}.footer{padding-top:1rem;padding-bottom:1rem}}[data-theme=dark] .cl-footer,[data-theme=dark] .cl-footerAction,[data-theme=dark] .cl-footerPages,[data-theme=dark] .cl-footerPagesLink{color:#6b7280}[data-theme=dark] .cl-internal-b3fm6y,[data-theme=dark] [class*=cl-internal] a[href*=clerk],[data-theme=dark] .cl-footer a,[data-theme=dark] .cl-footer span,[data-theme=dark] .cl-footer div{color:#6b7280!important}[data-theme=dark] .cl-footer svg,[data-theme=dark] .cl-footer path{fill:#6b7280!important}[data-theme=dark] .cl-footerAction__signIn a,[data-theme=dark] .cl-footerAction__signUp a,[data-theme=dark] .cl-footerAction a,[data-theme=dark] .cl-footer a[href*=sign]{font-weight:600;color:#8a91e5!important}[data-theme=dark] .cl-userProfile-root,[data-theme=dark] .cl-userProfile-root *{color:inherit}[data-theme=dark] .cl-userProfile-root{color:#f8f9fa}[data-theme=dark] .cl-userProfile-root .cl-headerSubtitle{color:#adb5bd}[data-theme=dark] .cl-userProfile-root .cl-profileSectionContent,[data-theme=dark] .cl-userProfile-root .cl-profileSectionItem,[data-theme=dark] .cl-userProfile-root p,[data-theme=dark] .cl-userProfile-root span{color:#f8f9fa}[data-theme=dark] .cl-userProfile-root .cl-profileSectionPrimaryButton,[data-theme=dark] .cl-userProfile-root .cl-formButtonPrimary{color:#fff}.subscription-page{padding:.5rem 0}.subscription-status{align-items:center;margin-bottom:1rem;display:flex}.subscription-badge{background-color:rgba(var(--primary-rgb),.1);color:var(--text-secondary);border-radius:100px;align-items:center;padding:.35rem .85rem;font-size:.8rem;font-weight:600;display:inline-flex}.subscription-badge[data-active=true]{color:var(--secondary);background-color:#16c17226}.subscription-details{margin-top:.5rem}.subscription-info-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.6rem 0;display:flex}.subscription-label{color:var(--text-secondary);font-size:.85rem}.subscription-value{color:var(--text-primary);font-size:.85rem;font-weight:500}.subscription-active{color:var(--secondary)}.subscription-perks-title{color:var(--text-primary);margin-top:1rem;margin-bottom:.5rem;font-size:.85rem;font-weight:600}.subscription-perks{margin:0;padding:0;list-style:none}.subscription-perks li{color:var(--text-secondary);padding:.3rem 0 .3rem 1.2rem;font-size:.8rem;position:relative}.subscription-perks li:before{content:"";background-color:var(--secondary);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../media/7e832ad540183e91-s.0pw-43bjt5~5_.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../media/2094fb60fd9c8287-s.13c6n_dh74ayc.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../media/c875c6f5d3e977ac-s.p.0g_ng0t~d_b9n.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../media/41e95f694c5c4549-s.0r1jrq7neqdsq.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../media/6c55a692938ebbbc-s.0g6rbszwfgn9y.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../media/a218039a3287bcfd-s.p.17-1enzs_j91b.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../media/bdc7e24a509eb931-s.0apt5mko2.qn3.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../media/0da9c7f357bd9d4d-s.0ek5sshv8wk3m.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../media/8e6fa89aa22d24ec-s.p.0uvzar8hswo3p.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../media/0a7740363b4d4863-s.1110aazvokzp..woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../media/5f9d24ebef5d5292-s.0esuu2f5si~v8.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../media/e2334d715941921e-s.p.12skym0rqknxy.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../media/b53057dbf91a7acf-s.0carvq6u72s58.woff2)format("woff2");unicode-range:U+900-97F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../media/798ea22d9983e047-s.106do9xzbuago.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../media/47fe1b7cd6e6ed85-s.p.0~mcdl10zdfb3.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins Fallback;src:local(Arial);ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%;size-adjust:112.16%}.poppins_5fcde04c-module__47xmmG__className{font-family:Poppins,Poppins Fallback;font-style:normal}.poppins_5fcde04c-module__47xmmG__variable{--font-poppins:"Poppins", "Poppins Fallback"}