:root{--bg: #f2e5bc;--bg1: #ebdbb2;--bg2: #d5c4a1;--bg3: #bdae93;--bg4: #a89984;--bg5: #928374;--fg: #3c3836;--fg1: #504945;--fg2: #665c54;--fg3: #7c6f64;--red: #cc241d;--red-dim: #9d0006;--green: #98971a;--green-dim: #79740e;--yellow: #d79921;--yellow-dim: #b57614;--blue: #458588;--blue-dim: #076678;--purple: #b16286;--purple-dim: #8f3f71;--aqua: #689d6a;--aqua-dim: #427b58;--orange: #d65d0e;--orange-dim: #af3a03;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--border-radius: 8px}.navbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-md);border-bottom:1px solid var(--bg3);background:var(--bg1)}.navbar-title{font-size:1.2rem;font-weight:700;color:var(--fg);font-family:var(--font-sans)}.navbar-buttons{display:flex;gap:var(--spacing-md)}.nav-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg1);border:1px solid var(--bg3);border-radius:var(--border-radius);color:var(--fg);cursor:pointer;font-family:var(--font-sans);font-size:.9rem;transition:all .2s ease}.nav-button:hover{background:var(--bg2)}.nav-button.active{background:var(--blue);color:var(--bg);border-color:var(--blue-dim)}@media(max-width:768px){.navbar{flex-direction:column;gap:var(--spacing-md);align-items:flex-start}.navbar-buttons{align-self:stretch;justify-content:flex-start}}.song-list{padding:var(--spacing-lg)}.song-list h2{color:var(--fg);margin-bottom:var(--spacing-lg);font-family:var(--font-sans)}.songs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg)}.song-card{background:var(--bg1);border:1px solid var(--bg3);border-radius:var(--border-radius);padding:var(--spacing-lg);cursor:pointer;transition:all .2s ease}.song-card:hover{background:var(--bg2);border-color:var(--blue);transform:translateY(-2px)}.song-card h3{color:var(--fg);margin:0 0 var(--spacing-sm) 0;font-family:var(--font-sans);font-size:1.1rem}.song-card p{color:var(--fg2);margin:0;font-size:.9rem}.song-page{padding:var(--spacing-lg)}.song-header{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.back-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg1);border:1px solid var(--bg3);border-radius:var(--border-radius);color:var(--fg);cursor:pointer;font-family:var(--font-sans);font-size:.9rem;transition:all .2s ease}.back-button:hover{background:var(--bg2)}.song-header h2{color:var(--fg);margin:0;font-family:var(--font-sans)}.song-content{margin-top:var(--spacing-lg)}.output-display.centered{text-align:center}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--fg);line-height:1.6;min-height:100vh}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh;gap:var(--spacing-md)}.app-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg1);border-radius:var(--border-radius-lg);border:2px solid var(--bg3)}.app-title{font-size:1.75rem;font-weight:700;color:var(--fg);letter-spacing:-.025em}.app-subtitle{font-size:.9rem;color:var(--fg2)}.split-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);flex:1;min-height:400px}.panel{display:flex;flex-direction:column;background:var(--bg1);border-radius:var(--border-radius-lg);border:2px solid var(--bg3);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg2);border-bottom:1px solid var(--bg3);font-weight:600;font-size:.9rem;color:var(--fg1)}.panel-content{flex:1;padding:var(--spacing-sm)}.input-textarea{width:100%;height:100%;min-height:300px;padding:var(--spacing-md);background:var(--bg);color:var(--fg);border:1px solid var(--bg3);border-radius:var(--border-radius);font-family:var(--font-mono);font-size:.95rem;line-height:1.8;resize:none}.input-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #45858833}.input-textarea::placeholder{color:var(--bg4)}.output-display{width:100%;height:100%;min-height:300px;padding:var(--spacing-md);background:var(--bg);border:1px solid var(--bg3);border-radius:var(--border-radius);font-family:var(--font-mono);font-size:.95rem;line-height:1.8;overflow-y:auto;white-space:pre-wrap}.output-line{margin-bottom:var(--spacing-xs)}.output-line.notation{color:var(--blue-dim);font-weight:500}.output-line.lyrics{color:var(--fg2)}.output-line.error{color:var(--red-dim);background:#cc241d1a;padding:var(--spacing-xs) var(--spacing-sm);border-radius:4px}.controls-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg1);border-radius:var(--border-radius-lg);border:2px solid var(--bg3)}.transpose-controls{display:flex;align-items:center;gap:var(--spacing-md)}.transpose-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg2);color:var(--fg);border:2px solid var(--bg3);border-radius:var(--border-radius);font-size:1.5rem;font-weight:600;cursor:pointer;transition:all .15s ease}.transpose-btn:hover{background:var(--bg3);border-color:var(--fg3)}.transpose-btn:active{transform:scale(.95)}.transpose-value{display:flex;flex-direction:column;align-items:center;min-width:80px}.transpose-number{font-size:1.75rem;font-weight:700;color:var(--blue-dim);font-family:var(--font-mono)}.transpose-number.positive{color:var(--green-dim)}.transpose-number.negative{color:var(--orange-dim)}.transpose-label{font-size:.75rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em}.std-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg2);color:var(--fg2);border:1px solid var(--bg3);border-radius:var(--border-radius);font-size:.85rem;cursor:pointer;transition:all .15s ease}.std-btn:hover{background:var(--bg3);color:var(--fg)}.errors-container{margin-top:var(--spacing-md);padding:var(--spacing-md);background:#cc241d14;border:1px solid var(--red);border-radius:var(--border-radius)}.errors-title{font-weight:600;color:var(--red-dim);margin-bottom:var(--spacing-sm);font-size:.9rem}.error-item{font-family:var(--font-mono);font-size:.85rem;color:var(--red-dim);padding:var(--spacing-xs) 0}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--bg4);font-style:italic}@media(max-width:768px){.split-container{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:var(--bg1);border:2px solid var(--bg3);border-radius:var(--border-radius-lg);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 25px #0003;display:flex;flex-direction:column}.modal-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:2px solid var(--bg3);background:var(--bg2);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.25rem;color:var(--fg)}.close-btn{background:none;border:none;font-size:1.5rem;color:var(--fg3);cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:var(--red)}.modal-body{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg)}.notation-section h3{font-size:1rem;color:var(--purple-dim);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--bg3);padding-bottom:var(--spacing-xs)}.notation-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.notation-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm);background:var(--bg2);border-radius:var(--border-radius);border:1px solid var(--bg3)}.sample{font-weight:600;color:var(--fg1)}.swar code,.swar-display code,.swar-list code,.swar-group code{background:var(--bg);padding:4px 8px;border-radius:4px;border:1px solid var(--bg3);color:var(--blue-dim);font-size:1.1rem;font-weight:600;font-family:var(--font-mono)}.swar-display,.swar-group{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.swar-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.description{font-size:.8rem;color:var(--fg3)}.hint{font-size:.8rem;color:var(--fg2);font-style:italic;width:100%}.modal-footer-hint{font-size:.9rem;color:var(--fg2);background:var(--bg);padding:var(--spacing-md);border:1px dashed var(--bg3);border-radius:var(--border-radius);margin-top:var(--spacing-sm)}.show-notation-btn{font-weight:600;color:var(--blue-dim);background:var(--bg2);border:1px solid var(--bg3);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);cursor:pointer;font-size:.85rem;transition:all .15s ease;display:inline-flex;align-items:center;gap:var(--spacing-xs)}.show-notation-btn:hover{background:var(--bg3);color:var(--blue-dim);transform:translateY(-1px)}.show-notation-btn:active{transform:translateY(0)}.transpose-page{padding:var(--spacing-lg)}