.midi-status{position:fixed;top:20px;right:72px;background:var(--color-dark-base);border-radius:8px;padding:16px;min-width:250px;color:var(--color-white);font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);opacity:.95}@media (max-width: 768px){.midi-status{top:15px;right:62px}}.midi-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;border-bottom:1px solid var(--color-panel-separator);padding-bottom:8px}.midi-status-header h3{margin:0;font-size:14px;font-weight:300;color:var(--color-text-on-darkbase)}.keyboard-toggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--color-text-on-darkbase);padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s ease;font-family:inherit;font-weight:300}.keyboard-toggle:hover{background:rgba(255,255,255,.2);border-color:#ffffff4d}.device-list{max-height:260px;overflow-y:auto}.device-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}.status-light{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-light.connected{background:#4ade80;box-shadow:0 0 4px #4ade8080}.status-light.disconnected{background:#ef4444;box-shadow:0 0 4px #ef444480}.device-name{color:var(--color-text-on-darkbase);flex:1;font-weight:300}.device-type{color:var(--color-text-subtle);font-size:10px;font-weight:300}.no-devices{color:var(--color-text-subtle);font-size:11px;text-align:center;padding:12px 0;font-style:italic}.browser-info{margin-top:8px;padding:4px 8px;background:var(--color-warning-bg);border-left:2px solid var(--color-warning-border);border-radius:2px}.browser-info small{color:var(--color-warning-text);font-size:10px;font-weight:300}.piano-keyboard{width:100%;height:140px;position:fixed;bottom:0;left:0;background:var(--color-dark-base);padding:10px;box-sizing:border-box}.keyboard-container{position:relative;width:100%;height:100%;background:var(--color-dark-base)}.key{position:absolute;cursor:pointer;transition:all .1s ease;border:1px solid #333;box-sizing:border-box}.white-key{width:calc(100% / 52);height:100%;background:var(--color-white);border-right:1px solid #ccc}.white-key.active{background:#e0e0ff;transform:scaleY(.95)}.white-key.active:after{content:"";position:absolute;bottom:25px;left:50%;width:8px;height:8px;background:var(--color-accent);border-radius:50%;transform:translate(-50%);z-index:3}.black-key{width:calc(100% / 52 * .85);height:65%;background:var(--color-dark-base);z-index:2;border:1px solid #111;transform:translate(-50%)}.black-key.active{background:var(--color-accent);transform:translate(-50%)}.black-key.active:after{content:"";position:absolute;bottom:10px;left:50%;width:6px;height:6px;background:#ffffff;border-radius:50%;transform:translate(-50%);z-index:3}.octave-indicator{position:absolute;top:-25px;transform:translate(-50%);z-index:4}.octave-arrow{color:var(--color-accent);font-size:18px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}.key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-family:Helvetica Neue,Arial,sans-serif;font-size:11px;font-weight:300;color:#666;pointer-events:none;z-index:1}.note-label-above{position:absolute;top:-45px;transform:translate(-50%);font-family:Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:300;color:var(--color-text-accent);background:var(--color-white);padding:4px 8px;border-radius:4px;box-shadow:0 2px 6px #0003;pointer-events:none;z-index:5}.grand-staff{position:absolute;left:50px;top:58%;transform:translateY(-50%);background:var(--color-white);padding:20px;border-radius:8px;box-shadow:0 4px 12px #0000001a;border:1px solid #e0e0e0}.grand-staff svg{display:block}.treble-staff,.bass-staff{font-family:Times New Roman,serif}.grand-staff text{-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}.sound-toggle{position:absolute;bottom:-55px;left:50%;transform:translate(-50%);background:var(--color-white);border:1px solid #d0d0d0;border-radius:20px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:14px;font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;color:var(--color-text-on-white);transition:all .2s ease;box-shadow:0 2px 6px #0000001a;opacity:.95;white-space:nowrap}.sound-toggle.enabled{background:var(--color-white);border-color:var(--color-accent);box-shadow:0 2px 8px #0000001f}.sound-toggle.disabled{background:#f8f8f8;border:2px dashed #999;opacity:1;color:#666;box-shadow:0 1px 3px #00000014}.sound-toggle:hover{transform:translate(-50%) translateY(-1px);box-shadow:0 3px 10px #00000026}.sound-toggle.disabled:hover{background:#f0f0f0;border-color:#777;box-shadow:0 2px 6px #0000001f}.sound-toggle:active{transform:translate(-50%) scale(.95)}.sound-toggle-icon{font-size:16px}.sound-toggle-text{font-size:12px;font-weight:300}.grand-staff .browser-info{position:absolute;left:50%;transform:translate(-50%);top:400px;margin-top:8px;padding:4px 8px;background:var(--color-warning-bg);border-left:2px solid var(--color-warning-border);border-radius:2px;white-space:nowrap;pointer-events:none}.grand-staff .browser-info small{color:#333;font-size:10px;font-weight:300}.chord-display{position:absolute;left:50%;top:120px;transform:translate(-50%);background:var(--color-white);padding:32px 48px;border-radius:20px;box-shadow:0 12px 32px #00000026;border:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;min-width:500px;max-width:800px;z-index:10;opacity:.95}.chord-main-section{display:flex;align-items:flex-start;justify-content:center;gap:24px;flex-wrap:nowrap}.chord-name{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:200;font-size:5.5rem;color:var(--color-text-on-white);margin-bottom:16px;white-space:nowrap;overflow:visible;line-height:1.1;transition:all .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.1)}.chord-name.empty{font-size:2.2rem;color:var(--color-text-subtle);font-style:italic;opacity:.7}.chord-subtitle{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;font-size:.85rem;color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:1px;margin-top:12px;border-top:1px solid rgba(127,140,141,.2);padding-top:12px}.chord-alternatives{display:flex;flex-direction:column;align-items:flex-start;margin-top:12px;min-width:180px}.alternatives-label{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;font-size:.7rem;color:var(--color-text-subtle);font-style:italic;margin-bottom:4px;opacity:.8}.alternatives-list{display:flex;flex-direction:column;gap:2px}.alternative-chord{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;font-size:1.1rem;color:var(--color-text-subtle);opacity:.85;text-align:left;line-height:1.2}@media (max-width: 1200px){.chord-display{min-width:400px;padding:24px 36px}.chord-main-section{gap:16px}.chord-name{font-size:4rem}.chord-name.empty{font-size:1.8rem}.alternative-chord{font-size:.9rem}}@media (max-width: 768px){.chord-display{position:relative;left:auto;top:20px;transform:none;margin:20px auto;width:90%;max-width:400px;padding:20px 24px}.chord-main-section{flex-direction:column;align-items:center;gap:12px}.chord-alternatives{align-items:center;text-align:center;min-width:auto}.alternative-chord{text-align:center;font-size:.8rem}.chord-name{font-size:2.5rem}.chord-name.empty{font-size:1.4rem}}@font-face{font-family:RealBookFont;src:url(./realbook-webfont-d0bd8aad.woff) format("woff"),url(./realbook-webfont-45ba226d.ttf) format("truetype");font-weight:400;font-display:swap}.chord-name.jazz-font{font-family:RealBookFont,RealScore,Petaluma,Finale Jazz,EB Garamond,Times New Roman,serif;font-weight:400!important;letter-spacing:-.05em;font-size:3.2em!important;line-height:1.1}.chord-name.jazz-font{letter-spacing:-.05em}.chord-alternatives.jazz-font{font-family:RealBookFont,RealScore,Petaluma,Finale Jazz,EB Garamond,Times New Roman,serif;font-weight:400;letter-spacing:0;font-size:1.1em}.chord-alternatives.jazz-font .alternatives-label,.chord-alternatives.jazz-font .alternative-chord{font-family:RealBookFont,RealScore,Petaluma,Finale Jazz,EB Garamond,Times New Roman,serif;font-weight:400}.chord-subtitle.jazz-font{font-family:RealBookFont,RealScore,Petaluma,Finale Jazz,EB Garamond,Times New Roman,serif;font-weight:400;letter-spacing:0}.james-bond-easter-egg{position:absolute;top:-80px;right:-80px;z-index:30;animation:bondAppear 3s ease-out forwards;will-change:transform,opacity;transform-style:preserve-3d}.bond-badge{width:120px;height:120px;background:linear-gradient(135deg,#C9B037 0%,#F4E4A6 50%,#C9B037 100%);border:4px solid #000000;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 0 20px #c9b03799,inset 0 2px 4px #fff3}.bond-badge:before{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid rgba(0,0,0,.2);border-radius:50%}.bond-image{width:70px;height:70px;object-fit:cover;object-position:center top;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));border-radius:50%}.bond-number{font-family:Times New Roman,serif;font-size:22px;font-weight:700;color:#000;text-shadow:0 2px 4px rgba(255,255,255,.8),1px 1px 0 rgba(255,255,255,.6),-1px -1px 0 rgba(255,255,255,.6),1px -1px 0 rgba(255,255,255,.6),-1px 1px 0 rgba(255,255,255,.6);letter-spacing:2px;position:relative;z-index:2}.bond-text{position:absolute;top:130px;left:50%;transform:translate(-50%);font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,1),0 0 8px rgba(0,0,0,.8),1px 1px 0 #C9B037,-1px -1px 0 #C9B037,1px -1px 0 #C9B037,-1px 1px 0 #C9B037;white-space:nowrap;letter-spacing:1px;opacity:0;animation:bondTextAppear 3s ease-out forwards}@keyframes bondAppear{0%{opacity:0;transform:scale(0) rotate(-180deg)}20%{opacity:1;transform:scale(1.1) rotate(-5deg)}30%{transform:scale(1) rotate(0)}90%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(.9) rotate(5deg)}}@keyframes bondTextAppear{0%{opacity:0;transform:translate(-50%) translateY(10px)}30%{opacity:1;transform:translate(-50%) translateY(0)}90%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-5px)}}.configuration-panel{position:fixed;top:20px;right:342px;background:var(--color-dark-base);border-radius:8px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;z-index:999;opacity:.95}.configuration-panel:has(.config-content){z-index:1500}.configuration-panel.expanded{z-index:1500}@media (max-width: 1200px){.configuration-panel.expanded{z-index:1600}}.config-toggle{background:transparent;border:none;color:var(--color-text-on-darkbase);padding:12px 16px;font-size:13px;font-weight:300;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;font-family:inherit;white-space:nowrap}.config-toggle:hover{background:rgba(255,255,255,.1);border-radius:8px}.config-content{border-top:1px solid var(--color-panel-separator);padding:16px;min-width:280px;animation:slideDown .2s ease-out;position:relative;z-index:999}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.config-section{margin-bottom:20px}.config-section:last-child{margin-bottom:0}.config-section h4{color:var(--color-text-on-darkbase);font-size:12px;font-weight:400;margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--color-panel-separator);padding-bottom:6px}.config-item{margin-bottom:10px}.config-item:last-child{margin-bottom:0}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:12px;color:var(--color-text-on-darkbase)}.toggle-label input[type=checkbox]{display:none}.toggle-slider{width:36px;height:20px;background:var(--color-toggle-off-bg);border:1px solid var(--color-toggle-off-border);border-radius:10px;position:relative;transition:all .2s ease;flex-shrink:0}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;border-radius:50%;transition:all .2s ease}.toggle-label input[type=checkbox]:checked+.toggle-slider{background:var(--color-accent);border-color:var(--color-accent)}.toggle-label input[type=checkbox]:checked+.toggle-slider:before{transform:translate(16px)}.toggle-text{font-weight:300;-webkit-user-select:none;user-select:none}.dropdown-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--color-text-on-darkbase)}.dropdown-text{font-weight:300}.theme-dropdown{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;color:var(--color-text-on-darkbase);padding:6px 8px;font-size:11px;font-weight:300;font-family:inherit;cursor:pointer;transition:all .2s ease;min-width:120px}.theme-dropdown:hover{background:rgba(255,255,255,.2);border-color:#ffffff4d}.theme-dropdown:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.theme-dropdown option{background:var(--color-dark-base);color:var(--color-text-on-darkbase)}@media (max-width: 768px){.configuration-panel{left:20px;top:180px;right:20px;width:auto}.config-content{min-width:auto}}.about-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.about-dialog{background-color:#1c1c1e;border-radius:12px;box-shadow:0 10px 30px #00000080;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;font-family:Arial Nova Light,Helvetica Neue Light,Arial,sans-serif;font-weight:300;border:2px solid var(--color-accent);opacity:1}.about-header{display:flex;justify-content:flex-end;align-items:center;padding:16px 24px 0;margin-bottom:8px}.about-header h2{margin:0;color:#fff;font-size:24px;font-weight:300}.about-close-button{background:none;border:none;font-size:28px;color:#fff;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.about-close-button:hover{background-color:var(--color-accent);color:#fff}.about-content{padding:0 24px 24px}.about-logo-section{text-align:center;margin-bottom:24px;padding-top:8px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:16px}.about-title{font-size:32px;font-weight:300;color:var(--color-accent);margin-bottom:8px;letter-spacing:-1px}.about-subtitle{font-size:16px;color:#fff;font-weight:300;opacity:.8}.about-version-section,.version-group{margin-bottom:24px}.version-group h3{font-size:18px;font-weight:300;color:var(--color-accent);margin:0 0 12px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:4px}.version-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px}.version-label{color:#fff;font-weight:300;opacity:.8}.version-value{color:#fff;font-weight:400;text-align:right}.error-text{color:#dc3545;display:flex;align-items:center;gap:8px}.retry-button{background-color:var(--color-accent);color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer;font-weight:300;transition:background-color .2s ease}.retry-button:hover{background-color:#2c2c2e}.about-description{margin-bottom:24px}.about-description p{color:#fff;line-height:1.6;font-size:14px;margin:0;text-align:center;opacity:.9}.about-contact{text-align:center;margin:20px 0 24px;padding:12px 20px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.1)}.about-contact p{color:#fff;font-size:14px;margin:0;opacity:.9}.about-contact a{color:var(--color-accent);text-decoration:none;font-weight:400;transition:color .2s ease}.about-contact a:hover{color:#fff;text-decoration:underline}.about-footer{text-align:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}.about-footer p{color:#fff;font-size:12px;margin:0;opacity:.7}@media (max-width: 600px){.about-dialog{width:95%;margin:20px}.about-header{padding:20px 20px 0}.about-content{padding:0 20px 20px}.about-title{font-size:28px}.version-item{flex-direction:column;align-items:flex-start;gap:4px}.version-value{text-align:left}}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--color-background)}#root{width:100%;height:100%;background:var(--color-background)}:root{--color-dark-base: #000000;--color-accent: #4040ff;--color-white: #ffffff;--color-background: #f0f0f0;--color-highlight: #4040ff20;--color-accent-light: #4040ff40;--color-accent-dark: #4040ffCC;--color-text-on-white: #000000;--color-text-on-dark: #ffffff;--color-text-on-background: #333333;--color-text-subtle: #666666;--color-text-accent: #4040ff;--color-text-on-darkbase: #ffffff;--color-content-bg: #ffffff;--color-content-text: #000000}.logo-horizontal{position:fixed;top:20px;left:20px;z-index:1000;pointer-events:none}@media (max-width: 768px){.logo-horizontal{transform:scale(.5);transform-origin:top left;top:15px;left:15px}}.app,.piano-keyboard,.keyboard-container,.white-key,.black-key,.grand-staff,.chord-display,.key-signature-selector,.key-dropdown,.configuration-panel,.midi-status,.note-label-above,.instructions,.octave-arrow,svg line,svg text,svg ellipse,svg path,.white-key.active:after,.black-key.active:after{transition:background-color .6s cubic-bezier(.4,0,.2,1),background .6s cubic-bezier(.4,0,.2,1),color .6s cubic-bezier(.4,0,.2,1),border-color .6s cubic-bezier(.4,0,.2,1),fill .6s cubic-bezier(.4,0,.2,1),stroke .6s cubic-bezier(.4,0,.2,1)}.app{width:100vw;height:100vh;min-width:100vw;min-height:100vh;background:var(--color-background);position:relative;overflow:hidden;font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif}.app.jazz-theme-default{background:radial-gradient(circle at 20% 80%,rgba(255,215,0,.15) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(218,165,32,.15) 0%,transparent 60%),radial-gradient(circle at 60% 40%,rgba(255,223,0,.08) 0%,transparent 70%),radial-gradient(circle 60px at 15% 30%,rgba(255,105,180,.6) 70%,transparent 71%),radial-gradient(circle 80px at 85% 70%,rgba(64,224,208,.5) 70%,transparent 71%),radial-gradient(circle 70px at 25% 85%,rgba(255,69,0,.7) 70%,transparent 71%),radial-gradient(circle 90px at 75% 15%,rgba(138,43,226,.5) 70%,transparent 71%),radial-gradient(circle 75px at 50% 25%,rgba(50,205,50,.6) 70%,transparent 71%),linear-gradient(45deg,rgba(255,20,147,.6) 30%,transparent 30%,transparent 70%,rgba(255,20,147,.6) 70%) 10% 60% / 65px 65px no-repeat,linear-gradient(45deg,rgba(0,191,255,.5) 30%,transparent 30%,transparent 70%,rgba(0,191,255,.5) 70%) 90% 40% / 80px 80px no-repeat,linear-gradient(45deg,rgba(255,215,0,.7) 30%,transparent 30%,transparent 70%,rgba(255,215,0,.7) 70%) 40% 75% / 70px 70px no-repeat,conic-gradient(from 0deg at 65% 20%,rgba(255,69,0,.6) 0deg 120deg,transparent 120deg 240deg,rgba(255,69,0,.6) 240deg) 65% 20% / 75px 75px no-repeat,conic-gradient(from 0deg at 20% 75%,rgba(147,0,211,.5) 0deg 120deg,transparent 120deg 240deg,rgba(147,0,211,.5) 240deg) 20% 75% / 85px 85px no-repeat,repeating-linear-gradient(45deg,var(--color-background),var(--color-background) 15px,rgba(218,165,32,.12) 15px,rgba(218,165,32,.12) 18px),var(--color-background);animation:jazzShimmer 8s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-tech-cyan{background:radial-gradient(circle at 25% 75%,rgba(0,255,255,.2) 0%,transparent 50%),radial-gradient(circle at 75% 25%,rgba(0,206,209,.2) 0%,transparent 50%),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(0,255,255,.1) 30px,rgba(0,255,255,.1) 32px),repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(0,255,255,.08) 30px,rgba(0,255,255,.08) 32px),repeating-linear-gradient(-45deg,var(--color-background),var(--color-background) 8px,rgba(0,255,255,.12) 8px,rgba(0,255,255,.12) 12px),conic-gradient(from 0deg at 20% 20%,rgba(0,255,255,.08) 0deg 60deg,transparent 60deg 120deg,rgba(64,224,208,.08) 120deg 180deg,transparent 180deg),conic-gradient(from 0deg at 80% 80%,rgba(0,206,209,.08) 0deg 90deg,transparent 90deg 180deg,rgba(0,255,255,.06) 180deg 270deg,transparent 270deg),radial-gradient(circle 30px at 10% 25%,rgba(255,20,147,.8) 70%,transparent 71%),radial-gradient(circle 26px at 90% 80%,rgba(255,215,0,.7) 70%,transparent 71%),radial-gradient(circle 35px at 30% 90%,rgba(50,205,50,.6) 70%,transparent 71%),linear-gradient(45deg,rgba(255,69,0,.7) 30%,transparent 30%,transparent 70%,rgba(255,69,0,.7) 70%) 75% 30% / 28px 28px no-repeat,conic-gradient(from 0deg at 25% 65%,rgba(255,0,128,.6) 0deg 120deg,transparent 120deg 240deg,rgba(255,0,128,.6) 240deg) 25% 65% / 32px 32px no-repeat,var(--color-background);animation:cyberPulse 6s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-neon-ember{background:radial-gradient(ellipse at 30% 70%,rgba(255,69,0,.25) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(255,140,0,.25) 0%,transparent 60%),radial-gradient(circle at 50% 20%,rgba(255,215,0,.15) 0%,transparent 70%),radial-gradient(circle 60px at 20% 40%,rgba(255,69,0,.8) 70%,transparent 71%),radial-gradient(circle 85px at 80% 25%,rgba(255,140,0,.6) 70%,transparent 71%),radial-gradient(circle 70px at 15% 80%,rgba(255,215,0,.9) 70%,transparent 71%),radial-gradient(circle 75px at 85% 75%,rgba(255,69,0,.7) 70%,transparent 71%),radial-gradient(circle 90px at 45% 60%,rgba(255,140,0,.8) 70%,transparent 71%),linear-gradient(45deg,rgba(255,69,0,.7) 30%,transparent 30%,transparent 70%,rgba(255,69,0,.7) 70%) 25% 25% / 65px 65px no-repeat,linear-gradient(45deg,rgba(255,215,0,.6) 30%,transparent 30%,transparent 70%,rgba(255,215,0,.6) 70%) 75% 55% / 80px 80px no-repeat,linear-gradient(45deg,rgba(255,140,0,.8) 30%,transparent 30%,transparent 70%,rgba(255,140,0,.8) 70%) 60% 85% / 70px 70px no-repeat,conic-gradient(from 0deg at 35% 15%,rgba(255,215,0,.7) 0deg 120deg,transparent 120deg 240deg,rgba(255,215,0,.7) 240deg) 35% 15% / 75px 75px no-repeat,conic-gradient(from 0deg at 90% 90%,rgba(255,69,0,.6) 0deg 120deg,transparent 120deg 240deg,rgba(255,69,0,.6) 240deg) 90% 90% / 85px 85px no-repeat,repeating-linear-gradient(60deg,var(--color-background),var(--color-background) 20px,rgba(255,69,0,.1) 20px,rgba(255,69,0,.1) 25px),repeating-linear-gradient(-30deg,transparent,transparent 30px,rgba(255,140,0,.08) 30px,rgba(255,140,0,.08) 35px),var(--color-background);animation:emberFlicker 4s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-electric-forest{background:radial-gradient(ellipse at 15% 85%,rgba(34,139,34,.2) 0%,transparent 70%),radial-gradient(ellipse at 85% 15%,rgba(0,255,127,.18) 0%,transparent 60%),radial-gradient(circle at 60% 60%,rgba(50,205,50,.12) 0%,transparent 80%),radial-gradient(circle 28px at 20% 30%,rgba(255,69,0,.7) 70%,transparent 71%),radial-gradient(circle 32px at 80% 70%,rgba(255,20,147,.6) 70%,transparent 71%),radial-gradient(circle 25px at 30% 80%,rgba(138,43,226,.8) 70%,transparent 71%),radial-gradient(circle 35px at 70% 20%,rgba(255,215,0,.7) 70%,transparent 71%),linear-gradient(45deg,rgba(0,255,255,.7) 30%,transparent 30%,transparent 70%,rgba(0,255,255,.7) 70%) 15% 55% / 26px 26px no-repeat,linear-gradient(45deg,rgba(255,105,180,.6) 30%,transparent 30%,transparent 70%,rgba(255,105,180,.6) 70%) 85% 45% / 30px 30px no-repeat,conic-gradient(from 0deg at 45% 25%,rgba(255,0,128,.6) 0deg 120deg,transparent 120deg 240deg,rgba(255,0,128,.6) 240deg) 45% 25% / 28px 28px no-repeat,conic-gradient(from 0deg at 75% 85%,rgba(147,0,211,.7) 0deg 120deg,transparent 120deg 240deg,rgba(147,0,211,.7) 240deg) 75% 85% / 24px 24px no-repeat,repeating-linear-gradient(30deg,var(--color-background),var(--color-background) 25px,rgba(34,139,34,.1) 25px,rgba(34,139,34,.1) 30px),repeating-radial-gradient(circle at 40% 40%,transparent,transparent 40px,rgba(0,255,127,.06) 40px,rgba(0,255,127,.06) 50px),var(--color-background);animation:forestBreeze 10s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-cyber-violet{background:radial-gradient(circle at 20% 80%,rgba(138,43,226,.22) 0%,transparent 55%),radial-gradient(circle at 80% 20%,rgba(147,0,211,.22) 0%,transparent 55%),radial-gradient(circle at 50% 50%,rgba(75,0,130,.15) 0%,transparent 75%),repeating-linear-gradient(60deg,transparent,transparent 18px,rgba(138,43,226,.15) 18px,rgba(138,43,226,.15) 20px),repeating-linear-gradient(-60deg,transparent,transparent 18px,rgba(147,0,211,.12) 18px,rgba(147,0,211,.12) 20px),repeating-linear-gradient(135deg,var(--color-background),var(--color-background) 12px,rgba(138,43,226,.12) 12px,rgba(138,43,226,.12) 16px),repeating-conic-gradient(from 0deg at 25% 25%,transparent,rgba(147,0,211,.12) 30deg,transparent 60deg,rgba(75,0,130,.08) 90deg,transparent 120deg),conic-gradient(from 180deg at 75% 75%,rgba(138,43,226,.08) 0deg 45deg,transparent 45deg 90deg,rgba(147,0,211,.06) 90deg 135deg,transparent 135deg),var(--color-background);animation:violetPulse 7s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-solar-flare{background:radial-gradient(ellipse at 40% 60%,rgba(255,215,0,.5) 0%,rgba(255,69,0,.35) 40%,transparent 70%),radial-gradient(ellipse at 60% 40%,rgba(255,140,0,.45) 0%,rgba(255,215,0,.2) 50%,transparent 80%),radial-gradient(circle at 80% 80%,rgba(255,255,0,.4) 0%,transparent 60%),repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(255,215,0,.25) 20px,rgba(255,215,0,.25) 22px),repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(255,69,0,.2) 20px,rgba(255,69,0,.2) 22px),repeating-linear-gradient(75deg,var(--color-background),var(--color-background) 15px,rgba(255,215,0,.3) 15px,rgba(255,215,0,.3) 18px),conic-gradient(from 45deg at 70% 30%,rgba(255,69,0,.2) 0deg 30deg,transparent 30deg 60deg,rgba(255,215,0,.25) 60deg 90deg,transparent 90deg),var(--color-background);animation:solarFlare 5s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-abyssal-wave{background:radial-gradient(ellipse at 30% 70%,rgba(0,105,148,.45) 0%,rgba(25,25,112,.3) 50%,transparent 80%),radial-gradient(ellipse at 70% 30%,rgba(0,191,255,.4) 0%,rgba(0,105,148,.25) 50%,transparent 80%),radial-gradient(circle at 50% 90%,rgba(25,25,112,.35) 0%,transparent 70%),repeating-linear-gradient(30deg,transparent,transparent 25px,rgba(0,191,255,.2) 25px,rgba(0,191,255,.2) 27px),repeating-linear-gradient(-30deg,transparent,transparent 30px,rgba(0,105,148,.18) 30px,rgba(0,105,148,.18) 32px),repeating-linear-gradient(150deg,var(--color-background),var(--color-background) 20px,rgba(25,25,112,.25) 20px,rgba(25,25,112,.25) 24px),repeating-radial-gradient(ellipse at 40% 60%,transparent,transparent 40px,rgba(0,191,255,.15) 40px,rgba(0,191,255,.15) 50px),var(--color-background);animation:oceanWave 12s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-quantum-mirage{background:radial-gradient(circle at 25% 25%,rgba(255,0,255,.2) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(0,255,255,.2) 0%,transparent 50%),radial-gradient(circle at 75% 25%,rgba(255,255,0,.15) 0%,transparent 60%),radial-gradient(circle at 25% 75%,rgba(255,0,128,.15) 0%,transparent 60%),radial-gradient(circle 9px at 10% 30%,rgba(255,0,255,.7) 70%,transparent 71%),radial-gradient(circle 6px at 90% 80%,rgba(0,255,255,.8) 70%,transparent 71%),radial-gradient(circle 11px at 30% 90%,rgba(255,255,0,.6) 70%,transparent 71%),radial-gradient(circle 7px at 70% 10%,rgba(255,0,128,.7) 70%,transparent 71%),linear-gradient(45deg,rgba(255,0,255,.6) 30%,transparent 30%,transparent 70%,rgba(255,0,255,.6) 70%) 20% 60% / 14px 14px no-repeat,linear-gradient(45deg,rgba(0,255,255,.5) 30%,transparent 30%,transparent 70%,rgba(0,255,255,.5) 70%) 80% 40% / 16px 16px no-repeat,linear-gradient(45deg,rgba(255,255,0,.7) 30%,transparent 30%,transparent 70%,rgba(255,255,0,.7) 70%) 50% 20% / 12px 12px no-repeat,conic-gradient(from 0deg at 60% 80%,rgba(255,0,255,.6) 0deg 120deg,transparent 120deg 240deg,rgba(255,0,255,.6) 240deg) 60% 80% / 15px 15px no-repeat,conic-gradient(from 0deg at 15% 70%,rgba(0,255,255,.5) 0deg 120deg,transparent 120deg 240deg,rgba(0,255,255,.5) 240deg) 15% 70% / 13px 13px no-repeat,repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,0,255,.08) 0deg 30deg,transparent 30deg 60deg,rgba(0,255,255,.08) 60deg 90deg,transparent 90deg),var(--color-background);animation:quantumShift 8s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-prism-abyss{background:radial-gradient(circle at 10% 10%,rgba(255,0,128,.25) 0%,transparent 40%),radial-gradient(circle at 90% 90%,rgba(0,255,128,.25) 0%,transparent 40%),radial-gradient(circle at 90% 10%,rgba(128,0,255,.25) 0%,transparent 40%),radial-gradient(circle at 10% 90%,rgba(255,128,0,.25) 0%,transparent 40%),repeating-linear-gradient(30deg,transparent,transparent 25px,rgba(255,0,128,.08) 25px,rgba(255,0,128,.08) 27px),repeating-linear-gradient(150deg,transparent,transparent 25px,rgba(128,0,255,.08) 25px,rgba(128,0,255,.08) 27px),repeating-linear-gradient(-30deg,transparent,transparent 28px,rgba(0,255,128,.06) 28px,rgba(0,255,128,.06) 30px),repeating-linear-gradient(45deg,var(--color-background),var(--color-background) 20px,rgba(255,255,255,.03) 20px,rgba(255,255,255,.03) 22px),var(--color-background);animation:prismRotate 15s linear infinite,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-emberglow-mirage{background:radial-gradient(ellipse at 40% 80%,rgba(255,69,0,.25) 0%,rgba(255,140,0,.15) 50%,transparent 80%),radial-gradient(ellipse at 60% 20%,rgba(255,215,0,.2) 0%,rgba(255,165,0,.1) 50%,transparent 80%),radial-gradient(circle at 20% 40%,rgba(220,20,60,.18) 0%,transparent 60%),repeating-linear-gradient(120deg,var(--color-background),var(--color-background) 25px,rgba(255,69,0,.08) 25px,rgba(255,69,0,.08) 30px),var(--color-background);animation:emberGlow 9s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-solar-tide{background:radial-gradient(ellipse at 30% 60%,rgba(255,215,0,.45) 0%,rgba(255,140,0,.25) 50%,transparent 80%),radial-gradient(ellipse at 70% 40%,rgba(0,191,255,.4) 0%,rgba(0,206,209,.2) 50%,transparent 80%),radial-gradient(circle at 50% 80%,rgba(255,140,0,.35) 0%,transparent 70%),radial-gradient(circle 85px at 15% 20%,rgba(255,20,147,.7) 70%,transparent 71%),radial-gradient(circle 75px at 85% 15%,rgba(138,43,226,.6) 70%,transparent 71%),radial-gradient(circle 95px at 25% 85%,rgba(50,205,50,.8) 70%,transparent 71%),radial-gradient(circle 65px at 75% 90%,rgba(255,69,0,.7) 70%,transparent 71%),radial-gradient(circle 80px at 60% 25%,rgba(0,255,255,.6) 70%,transparent 71%),linear-gradient(45deg,rgba(255,0,128,.7) 30%,transparent 30%,transparent 70%,rgba(255,0,128,.7) 70%) 5% 35% / 75px 75px no-repeat,linear-gradient(45deg,rgba(75,0,130,.6) 30%,transparent 30%,transparent 70%,rgba(75,0,130,.6) 70%) 90% 70% / 70px 70px no-repeat,linear-gradient(45deg,rgba(255,105,180,.8) 30%,transparent 30%,transparent 70%,rgba(255,105,180,.8) 70%) 35% 75% / 85px 85px no-repeat,conic-gradient(from 0deg at 40% 30%,rgba(147,0,211,.6) 0deg 120deg,transparent 120deg 240deg,rgba(147,0,211,.6) 240deg) 40% 30% / 70px 70px no-repeat,conic-gradient(from 0deg at 80% 60%,rgba(255,215,0,.7) 0deg 120deg,transparent 120deg 240deg,rgba(255,215,0,.7) 240deg) 80% 60% / 80px 80px no-repeat,var(--color-background);animation:solarTide 11s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-ion-mirage{background:radial-gradient(circle at 30% 30%,rgba(138,43,226,.5) 0%,rgba(75,0,130,.3) 40%,transparent 70%),radial-gradient(circle at 70% 70%,rgba(0,255,255,.45) 0%,rgba(0,191,255,.25) 40%,transparent 70%),radial-gradient(circle at 70% 30%,rgba(255,20,147,.4) 0%,rgba(255,105,180,.2) 50%,transparent 80%),radial-gradient(circle at 30% 70%,rgba(50,205,50,.35) 0%,rgba(0,255,127,.18) 50%,transparent 80%),repeating-linear-gradient(75deg,transparent,transparent 15px,rgba(138,43,226,.25) 15px,rgba(138,43,226,.25) 17px),repeating-linear-gradient(-75deg,transparent,transparent 18px,rgba(0,255,255,.22) 18px,rgba(0,255,255,.22) 20px),repeating-linear-gradient(30deg,var(--color-background),var(--color-background) 12px,rgba(255,20,147,.2) 12px,rgba(255,20,147,.2) 16px),conic-gradient(from 90deg at 50% 50%,rgba(0,255,255,.15) 0deg 30deg,transparent 30deg 60deg,rgba(255,20,147,.15) 60deg 90deg,transparent 90deg 120deg,rgba(138,43,226,.12) 120deg 150deg,transparent 150deg),var(--color-background);animation:ionStorm 6s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}.app.jazz-theme-obsidian-bloom{background:radial-gradient(ellipse at 25% 75%,rgba(255,20,147,.2) 0%,transparent 65%),radial-gradient(ellipse at 75% 25%,rgba(138,43,226,.2) 0%,transparent 65%),radial-gradient(circle at 50% 50%,rgba(75,0,130,.12) 0%,transparent 80%),repeating-radial-gradient(ellipse at 30% 70%,transparent,transparent 40px,rgba(255,20,147,.06) 40px,rgba(255,20,147,.06) 50px),repeating-radial-gradient(ellipse at 70% 30%,transparent,transparent 35px,rgba(138,43,226,.06) 35px,rgba(138,43,226,.06) 45px),var(--color-background);animation:obsidianBloom 13s ease-in-out infinite alternate,shapeFloat 6s ease-in-out infinite}@keyframes jazzShimmer{0%{background-position:0% 0%,100% 100%,50% 50%,0 0}to{background-position:10% 10%,90% 90%,40% 60%,5px 5px}}@keyframes cyberPulse{0%{background-position:0% 0%,100% 100%,50% 50%,0 0,0deg}to{background-position:20% 20%,80% 80%,60% 40%,10px 10px,360deg}}@keyframes emberFlicker{0%{background-position:0% 0%,100% 100%,50% 20%,0 0,0 0}50%{background-position:10% 10%,90% 90%,60% 30%,8px 8px,15px 15px}to{background-position:5% 5%,95% 95%,40% 10%,3px 3px,8px 8px}}@keyframes forestBreeze{0%{background-position:0% 0%,100% 100%,60% 60%,0 0,0% 0%}to{background-position:15% 15%,85% 85%,50% 70%,12px 12px,100% 100%}}@keyframes violetPulse{0%{background-position:0% 0%,100% 100%,50% 50%,0 0,0deg}to{background-position:25% 25%,75% 75%,40% 60%,15px 15px,360deg}}@keyframes solarFlare{0%{background-position:40% 60%,60% 40%,80% 80%,0 0,0deg}to{background-position:50% 50%,70% 30%,90% 70%,8px 8px,180deg}}@keyframes oceanWave{0%{background-position:0% 0%,100% 100%,50% 90%,0 0,0% 0%}to{background-position:20% 20%,80% 80%,60% 70%,20px 20px,100% 100%}}@keyframes quantumShift{0%{background-position:25% 25%,75% 75%,75% 25%,25% 75%,0deg}to{background-position:35% 35%,65% 65%,85% 15%,15% 85%,360deg}}@keyframes prismRotate{0%{background-position:10% 10%,90% 90%,90% 10%,10% 90%,0 0}to{background-position:20% 20%,80% 80%,80% 20%,20% 80%,5px 5px}}@keyframes emberGlow{0%{background-position:40% 80%,60% 20%,20% 40%,0 0}to{background-position:50% 70%,70% 30%,30% 50%,10px 10px}}@keyframes solarTide{0%{background-position:30% 60%,70% 40%,50% 80%,0 0,0 0}to{background-position:40% 50%,80% 30%,60% 70%,12px 12px,15px 15px}}@keyframes ionStorm{0%{background-position:30% 30%,70% 70%,70% 30%,30% 70%,0 0,0deg}to{background-position:40% 40%,60% 60%,80% 20%,20% 80%,8px 8px,180deg}}@keyframes obsidianBloom{0%{background-position:25% 75%,75% 25%,50% 50%,30% 70%,70% 30%}to{background-position:35% 65%,85% 15%,60% 40%,40% 60%,80% 20%}}@keyframes shapeFloat{0%{background-position:20% 80%,80% 20%,60% 40%,15% 30%,85% 70%,25% 85%,75% 15%,50% 25%,10% 60%,90% 40%,40% 75%,65% 20%,20% 75%,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}25%{background-position:22% 78%,78% 22%,58% 42%,18% 33%,83% 67%,28% 82%,73% 17%,53% 28%,13% 57%,88% 42%,43% 72%,68% 18%,23% 77%,5px 5px,3px 3px,7px 7px,2px 2px,6px 6px,4px 4px,8px 8px,1px 1px,9px 9px,10px 10px}50%{background-position:25% 75%,75% 25%,55% 45%,22% 37%,80% 63%,32% 78%,70% 20%,57% 32%,17% 52%,85% 45%,47% 68%,72% 14%,27% 82%,10px 10px,6px 6px,14px 14px,4px 4px,12px 12px,8px 8px,16px 16px,2px 2px,18px 18px,20px 20px}75%{background-position:23% 77%,77% 23%,57% 43%,19% 34%,82% 66%,29% 81%,72% 18%,54% 29%,14% 56%,87% 43%,44% 71%,69% 16%,24% 79%,7px 7px,4px 4px,11px 11px,3px 3px,9px 9px,6px 6px,13px 13px,1px 1px,15px 15px,16px 16px}to{background-position:20% 80%,80% 20%,60% 40%,15% 30%,85% 70%,25% 85%,75% 15%,50% 25%,10% 60%,90% 40%,40% 75%,65% 20%,20% 75%,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}}.app-content{width:100%;height:100%;position:relative}.instructions-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.instructions{background:#1C1C1E;color:#fff;padding:40px;border-radius:12px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:550px;margin:20px;position:relative}.instructions.error-message{background:#fff5f5;border:2px solid #e53e3e}.device-count{font-weight:600;color:#e53e3e;font-size:1.1em;margin-top:15px}.excess-devices{background:#ffeaea;border:1px solid #ffb3b3;border-radius:8px;padding:15px;margin:15px 0;text-align:left}.excess-devices p{margin:0 0 10px;color:#c53030}.excess-devices ul{margin:0;padding-left:20px;color:#c53030}.excess-devices li{margin-bottom:5px}.dialog-close-btn{position:absolute;top:15px;right:20px;background:#f0f0f0;border:1px solid #ccc;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#666;cursor:pointer;transition:all .2s ease}.dialog-close-btn:hover{background:#e0e0e0;color:#333;transform:scale(1.1)}.instructions h2{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:200;font-size:2rem;color:#2c3e50;margin-bottom:20px}.instructions p{font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;font-size:1rem;color:#e0e0e0;line-height:1.6;margin-bottom:15px}.instructions p:last-child{margin-bottom:20px;font-size:.9rem;color:silver}.instructions-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.enable-keyboard-btn,.dismiss-btn{padding:12px 24px;border:none;border-radius:6px;font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;font-weight:300;font-size:14px;cursor:pointer;transition:all .2s ease}.enable-keyboard-btn{background:#4a90e2;color:#fff}.enable-keyboard-btn:hover{background:#357abd;transform:translateY(-1px)}.dismiss-btn{background:#3DE1FF;color:#1c1c1e;border:1px solid #3DE1FF}.dismiss-btn:hover{background:#2BC7E0;border-color:#2bc7e0}.instructions-content{text-align:left;margin:20px 0}.keyboard-mapping{background:rgba(255,255,255,.05);padding:16px;border-radius:8px;margin:16px 0;border-left:3px solid #3DE1FF}.keyboard-mapping h4{margin:0 0 12px;color:#fff;font-size:1rem;font-weight:500}.keyboard-mapping ul{margin:0;padding-left:20px;list-style-type:none}.keyboard-mapping li{margin:8px 0;position:relative}.keyboard-mapping li:before{content:"•";color:#3de1ff;font-weight:700;position:absolute;left:-15px}.keyboard-mapping strong{color:#fff}.browser-note{text-align:center;margin-top:16px;opacity:.8}.instructions h2{margin-bottom:16px}.mobile-warning{max-width:600px;line-height:1.6}.mobile-warning h3{text-align:center;margin-bottom:20px;font-size:1.5rem}.mobile-warning .limitation-box{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);padding:15px;border-radius:8px;margin:20px 0}.mobile-warning .solution-box{background:rgba(61,225,255,.1);border:1px solid rgba(61,225,255,.3);padding:15px;border-radius:8px;margin:20px 0}.mobile-warning ul{text-align:left;margin:10px 0;padding-left:20px}.mobile-warning li{margin:8px 0}@media (max-width: 1200px){.app{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}}@media (max-width: 768px){.instructions{padding:30px 20px;margin:10px}.instructions h2{font-size:1.5rem}.instructions p{font-size:.9rem}}.app-content>*{z-index:1}.app{scrollbar-width:none;-ms-overflow-style:none}.app::-webkit-scrollbar{width:0;height:0}.about-button{position:fixed;top:20px;right:20px;width:32px;height:32px;border-radius:6px;border:1px solid var(--color-medium);background-color:var(--color-dark);color:var(--color-light);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;z-index:1001}.about-button:hover{background-color:var(--color-accent);color:var(--color-light);border-color:var(--color-medium);box-shadow:0 2px 8px #0003}.about-button:active{background-color:var(--color-accent-dark);transform:scale(.95)}.about-button[data-theme*=dark],.about-button[data-theme=tech-cyan],.about-button[data-theme=neon-ember],.about-button[data-theme=cyber-violet],.about-button[data-theme=quantum-mirage],.about-button[data-theme=emberglow-mirage],.about-button[data-theme=obsidian-bloom]{background-color:var(--color-dark);color:var(--color-accent)}.about-button[data-theme*=dark]:hover,.about-button[data-theme=tech-cyan]:hover,.about-button[data-theme=neon-ember]:hover,.about-button[data-theme=cyber-violet]:hover,.about-button[data-theme=quantum-mirage]:hover,.about-button[data-theme=emberglow-mirage]:hover,.about-button[data-theme=obsidian-bloom]:hover{background-color:var(--color-accent);color:var(--color-light)}@media (max-width: 768px){.about-button{top:15px;right:15px;width:30px;height:30px;font-size:14px}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:Helvetica Neue Light,Arial Nova Light,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa}body{margin:0;overflow:hidden}#root{height:100%;width:100%}@font-face{font-family:System Light;src:local("Helvetica Neue Light"),local("HelveticaNeue-Light"),local("Arial Nova Light"),local("Segoe UI Light"),local("system-ui");font-weight:300;font-display:swap}*{transition:opacity .2s ease,transform .2s ease}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:3px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5)}button:focus,select:focus,input:focus{outline:2px solid #4a90e2;outline-offset:2px}.chord-display .chord-name{-webkit-user-select:text;user-select:text}button,.status-light,.key{-webkit-user-select:none;user-select:none}@media (prefers-contrast: high){.app{background:#ffffff}.chord-display{background:#ffffff;border:2px solid #000000}.midi-status{background:#000000;border:2px solid #ffffff}}