.cs-overlay{z-index:10000000;background:#101012;width:100%;height:100dvh;animation:.2s ease-out cs-fade-in;display:flex;position:fixed;inset:0;overflow:hidden}@keyframes cs-fade-in{0%{opacity:0}to{opacity:1}}.cs-container{background:#17171a;flex-direction:column;width:100%;height:100dvh;display:flex;overflow:hidden}.cs-header{background:#0003;border-bottom:1px solid #ffffff0f;flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;min-height:44px;padding:.5rem 1.25rem;display:grid}.cs-header-left{color:#fff;justify-self:start;align-items:center;gap:.75rem;min-width:0;display:flex}.cs-header-left h2{letter-spacing:-.3px;white-space:nowrap;text-overflow:ellipsis;max-width:150px;margin:0;font-size:1rem;font-weight:500;overflow:hidden}.cs-header-title-group{align-items:center;gap:.75rem;min-width:0;display:flex}.cs-header-center{text-align:center;pointer-events:none;justify-self:center}.cs-header-center h1{color:#fff;letter-spacing:-.5px;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 20px #00000059;max-width:320px;margin:0;font-size:1.15rem;font-weight:500;overflow:hidden}.cs-key-badge{color:#f7f4ef;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;background:#f7f4ef14;border:1px solid #f7f4ef2e;border-radius:20px;padding:3px 10px;font-size:.7rem;font-weight:500}.cs-header-actions{flex-shrink:0;justify-self:end;align-items:center;gap:.4rem;display:flex}.cs-btn{color:#a8a8a6;cursor:pointer;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:.35rem;padding:.4rem .85rem;font-family:inherit;font-size:.78rem;font-weight:500;transition:all .15s;display:inline-flex}.cs-btn:hover{color:#fff;background:#ffffff1a}.cs-btn-active{color:#f7f4ef!important;background:#f7f4ef14!important;border-color:#f7f4ef2e!important}.cs-btn-icon{justify-content:center;min-width:32px;padding:.4rem}.cs-btn-sm{border-radius:6px;justify-content:center;min-width:26px;padding:.3rem}.cs-btn-close{color:#7d7d7c;background:0 0;border:none;padding:.4rem}.cs-btn-close:hover{color:#ef4444;background:#ef44441a}.cs-btn-danger{color:#f87171}.cs-btn-danger:hover{color:#ef4444!important;background:#ef444426!important}.cs-btn-save{color:#f7f4ef;background:#f7f4ef12;border-color:#f7f4ef2e}.cs-btn-save:hover{background:#f7f4ef1c}.cs-saved{color:#4ade80!important;background:#22c55e1f!important;border-color:#22c55e40!important}.cs-mode-toggle{background:#0000004d;border:1px solid #ffffff0f;border-radius:12px;gap:2px;padding:3px;display:flex}.cs-autoscroll{background:#0000004d;border:1px solid #ffffff0f;border-radius:12px;align-items:center;gap:3px;padding:3px;display:flex}.cs-speed-picker{gap:2px;display:flex}.cs-btn-playing{animation:1.5s ease-in-out infinite cs-play-pulse;color:#4ade80!important;background:#22c55e33!important;border-color:#22c55e4d!important}@keyframes cs-play-pulse{0%,to{box-shadow:0 0 #22c55e4d}50%{box-shadow:0 0 8px 2px #22c55e26}}.cs-speed-btn{color:#5f5f5e;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:3px 6px;font-family:inherit;font-size:.65rem;font-weight:500;transition:all .15s}.cs-speed-btn:hover{color:#a8a8a6}.cs-speed-btn.active{color:#f7f4ef;background:#a78bfa26}.cs-transpose{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;align-items:center;gap:.25rem;padding:.25rem .5rem;display:flex}.cs-transpose-value{color:#f7f4ef;text-align:center;font-variant-numeric:tabular-nums;min-width:24px;font-size:.8rem;font-weight:500}.cs-color-picker{gap:.2rem;display:flex}.cs-color-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;width:18px;height:18px;padding:0;transition:all .15s}.cs-color-dot:hover{transform:scale(1.2)}.cs-color-active{box-shadow:0 0 6px #ffffff4d;border-color:#fff!important}.cs-body{flex:1 1 0;height:calc(100dvh - 44px);min-height:0;display:flex;overflow:hidden}.cs-editor-pane{border-right:1px solid #ffffff0f;flex-direction:column;flex-shrink:0;width:50%;min-height:0;display:flex;overflow:hidden}.cs-chord-palette{border-bottom:1px solid #ffffff0a;flex-shrink:0;padding:.75rem 1rem;overflow-x:auto}.cs-palette-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.cs-palette-title{color:#5f5f5e;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;font-size:.68rem;font-weight:500}.cs-suffix-picker{flex-wrap:wrap;gap:2px;display:flex}.cs-suffix-btn{color:#7d7d7c;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;padding:2px 8px;font-family:inherit;font-size:.65rem;font-weight:500;transition:all .15s}.cs-suffix-btn:hover{color:#a8a8a6;background:#ffffff14}.cs-suffix-btn.active{color:#f7f4ef;background:#a78bfa26;border-color:#a78bfa4d}.cs-chord-row{align-items:center;gap:.5rem;margin-bottom:.35rem;display:flex}.cs-row-label{color:#2a2a2f;text-transform:uppercase;letter-spacing:.8px;text-align:right;flex-shrink:0;width:50px;font-size:.6rem;font-weight:500}.cs-chord-buttons{flex-wrap:wrap;gap:3px;display:flex}.cs-chord-btn{color:#c4b5fd;cursor:pointer;text-align:center;background:#a78bfa14;border:1px solid #a78bfa26;border-radius:6px;min-width:32px;padding:4px 8px;font-family:inherit;font-size:.72rem;font-weight:500;transition:all .12s}.cs-chord-btn:hover{color:#e9d5ff;background:#a78bfa33;transform:translateY(-1px)}.cs-chord-btn:active{background:#a78bfa4d;transform:translateY(0)}.cs-chord-btn-minor{color:#a5b4fc;background:#f7f4ef0a;border-color:#f7f4ef2e}.cs-chord-btn-minor:hover{color:#c7d2fe;background:#f7f4ef1c}.cs-section-btn{color:#fbbf24;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background:#facc1514;border:1px solid #facc1526;border-radius:6px;padding:4px 10px;font-family:inherit;font-size:.68rem;font-weight:500;transition:all .12s}.cs-section-btn:hover{color:#fcd34d;background:#facc1526;transform:translateY(-1px)}.cs-textarea{resize:none;color:#e8e5df;tab-size:2;background:#0000004d;border:none;outline:none;flex:1;padding:1.25rem 1.5rem;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,monospace;font-size:.9rem;line-height:1.8;overflow-y:auto}.cs-textarea::placeholder{color:#5f5f5e;font-family:inherit;line-height:1.8}.cs-textarea::selection{background:#f7f4ef1f}.cs-preview-pane{background:#1c1c20;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;display:flex;overflow:hidden}.cs-preview-full{width:100%;height:100%!important}.cs-draw-banner{color:#fbbf24;text-align:center;background:#facc151a;border-bottom:1px solid #facc1526;padding:.4rem;font-size:.72rem;font-weight:500;animation:1.5s ease-in-out infinite cs-pulse}@keyframes cs-pulse{0%,to{opacity:1}50%{opacity:.6}}.cs-rendered-chart{color:#f7f4ef;background:#101012;border-radius:0;flex:1 1 0;min-height:0;margin:0;padding:3rem 4rem;position:relative;overflow:auto;box-shadow:inset 0 0 100px #00000080}.cs-chart-html{color:#c2c2c1;z-index:1;white-space:pre;max-width:900px;margin:0 auto;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,monospace;font-size:1.05rem;line-height:2;position:relative;overflow-x:auto}.cs-chart-html h1{color:#fff;letter-spacing:-1px;text-shadow:0 2px 10px #00000080;margin:0 0 .5rem;font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:2.5rem;font-weight:500}.cs-chart-html h2{color:#f7f4ef;text-transform:uppercase;letter-spacing:.5px;margin:.8rem 0 .25rem;font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:1.1rem;font-weight:500}.cs-chart-html .chord:not(.lyrics),.cs-chart-html .chord{color:#f7f4ef;letter-spacing:.5px;text-shadow:0 0 12px #00000059;font-family:DM Mono,monospace;font-size:1.05em;font-weight:500}.cs-chart-html .lyrics{color:#f7f4ef;white-space:pre-wrap;font-weight:500}.cs-chart-html .comment{color:#f7f4ef;text-transform:uppercase;letter-spacing:.5px;background:#f7f4ef0f;border-left:3px solid #f7f4ef4d;border-radius:0 8px 8px 0;margin-top:2.5rem;margin-bottom:.5rem;padding:.5rem 1rem;font-family:Plus Jakarta Sans,sans-serif;font-size:.8rem;font-weight:500;display:inline-block}.cs-chord{color:#f7f4ef;text-shadow:0 0 12px #00000059;font-family:inherit;font-size:1em;font-weight:500}.cs-comment{color:#fbbf24;background:#fbbf241a;border-left:3px solid #fbbf24;border-radius:0 8px 8px 0;margin:.5em 0;padding:.3em .9em;font-size:.92em;font-style:italic;font-weight:500;display:inline-block}.cs-bars{flex-wrap:wrap;gap:0;margin:.45em 0;display:flex}.cs-bar{border-left:2px solid #ffffff4d;align-items:center;gap:.55em;min-width:4.5em;padding:.32em .9em;line-height:1.5;display:inline-flex}.cs-bars .cs-bar:last-child{border-right:2px solid #ffffff4d}.cs-chord-inline{font-size:.95em}.cs-hit{color:#ffffff80;font-weight:400}.cs-push{color:#f472b6;font-weight:500}.cs-hold{color:#34d399;font-weight:500}.cs-line{white-space:pre-wrap;min-height:1.4em}.cs-empty-state{text-align:center;padding:4rem 2rem}.cs-empty-state h3{color:#a0aec0;margin-bottom:.5rem;font-family:Inter,sans-serif;font-size:1.3rem;font-weight:500}.cs-empty-state p{color:#cbd5e0;max-width:400px;margin:0 auto;font-family:Inter,sans-serif;font-size:.95rem;line-height:1.6}.cs-chart-html .row{flex-wrap:wrap;align-items:flex-end;display:flex}.cs-chart-html .paragraph{margin-bottom:1.25rem}.cs-chart-html .column{flex-direction:column;min-width:max-content;padding-right:1.2rem;display:inline-flex}.cs-canvas{z-index:5;pointer-events:none;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.cs-canvas-active{pointer-events:auto;cursor:crosshair}@media (width<=768px){.cs-body{flex-direction:column}.cs-editor-pane{-webkit-overflow-scrolling:touch;border-bottom:1px solid #ffffff0f;border-right:none;width:100%;height:50%;overflow-y:auto}.cs-preview-pane{-webkit-overflow-scrolling:touch;height:50%;overflow-y:auto}.cs-header{scrollbar-width:none;flex-wrap:nowrap;justify-content:space-between;padding:.5rem .75rem;display:flex;overflow-x:auto}.cs-header-center{display:none}.cs-header::-webkit-scrollbar{display:none}.cs-header-left h2{max-width:100px;font-size:.85rem}.cs-chord-palette{padding:.5rem .75rem}.cs-chord-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;margin-bottom:2px;padding-bottom:8px;overflow-x:auto}.cs-chord-row::-webkit-scrollbar{display:none}.cs-chord-buttons{flex-wrap:nowrap;flex-shrink:0;min-width:max-content}.cs-row-label{width:40px;font-size:.55rem}.cs-chord-btn{flex-shrink:0;min-width:26px;padding:3px 5px;font-size:.65rem}.cs-section-btn{flex-shrink:0;padding:3px 6px;font-size:.6rem}.cs-rendered-chart{margin:0;padding:1.5rem}.cs-chart-html{font-size:.95rem;line-height:2}.cs-textarea{padding:.75rem;font-size:.8rem}.cs-mode-toggle,.hide-mobile-small,.hide-tablet{display:none}}@media (width<=480px){.cs-header-left h2{max-width:80px}.cs-transpose{display:none}}.cs-textarea::-webkit-scrollbar{width:6px}.cs-rendered-chart::-webkit-scrollbar{width:6px}.cs-textarea::-webkit-scrollbar-track{background:0 0}.cs-rendered-chart::-webkit-scrollbar-track{background:#00000008}.cs-textarea::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:6px}.cs-rendered-chart::-webkit-scrollbar-thumb{background:#0000001a;border-radius:6px}.cs-rendered-chart::-webkit-scrollbar-thumb:hover{background:#0003}