@import "https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.split-button{align-items:center;height:100%;display:inline-flex;position:relative}.split-button-main{font-family:var(--font-primary);font-size:var(--font-size);color:var(--color-foreground);border-radius:var(--border-radius) 0 0 var(--border-radius);cursor:pointer;background-color:#0000;border:none;align-items:center;gap:.375rem;padding:.625rem .1875rem .625rem .75rem;font-weight:600;transition:background-color .2s ease-in-out;display:flex}.split-button-main svg{color:var(--color-secondary);transition:color .2s ease-in-out}.split-button:hover .split-button-main{background-color:var(--color-secondary-7)}.split-button:hover .split-button-main svg{color:var(--color-primary)}.split-button-toggle{height:100%;font-family:var(--font-primary);font-size:var(--font-size);color:var(--color-foreground);border-radius:0 var(--border-radius) var(--border-radius) 0;cursor:pointer;background-color:#0000;border:none;justify-content:center;align-items:center;padding:.625rem .75rem .625rem .1875rem;transition:background-color .2s ease-in-out;display:flex}.split-button-toggle svg{color:var(--color-secondary);transition:color .2s ease-in-out,transform .2s ease-in-out}.split-button:hover .split-button-toggle{background-color:var(--color-secondary-7)}.split-button-toggle:hover svg{color:var(--color-primary)}.split-button-chevron.open{transform:rotate(180deg)}.split-button-dropdown{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius);z-index:100;white-space:nowrap;min-width:100%;margin-top:.25rem;padding:.25rem 0;position:absolute;top:100%;left:0;box-shadow:0 4px 12px #0000001a}.split-button-option{width:100%;font-family:var(--font-primary);font-size:var(--font-size);color:var(--color-foreground);cursor:pointer;text-align:left;background-color:#0000;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;font-weight:500;transition:background-color .15s ease-in-out;display:flex}.split-button-option svg{color:var(--color-secondary);flex-shrink:0}.split-button-option:hover{background-color:var(--color-secondary-7)}.split-button-option:hover svg{color:var(--color-primary)}.split-button-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.button{font-family:var(--font-primary);font-size:var(--font-size);color:var(--color-foreground);border-radius:var(--border-radius);cursor:pointer;background-color:#0000;border:none;align-items:center;gap:.375rem;padding:.625rem .75rem;font-weight:600;transition:background-color .2s ease-in-out;display:flex}.button svg{color:var(--color-secondary);transition:color .2s ease-in-out}.button:hover{background-color:var(--color-secondary-7)}.button:hover svg{color:var(--color-primary)}.separator{padding:0 .625rem}.separator:before{content:"";background-color:var(--color-border);width:1px;height:1rem;display:block}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-container{background:var(--color-background);border:1px solid var(--color-border);border-radius:.5rem;flex-direction:column;width:min(520px,90vw);max-height:80vh;animation:.15s ease-out modal-in;display:flex;overflow:hidden;box-shadow:0 1rem 2rem #00000040}@keyframes modal-in{0%{opacity:0;transform:scale(.96)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.modal-title{align-items:center;gap:.5rem;margin:0;font-size:1rem;font-weight:600;display:flex}.modal-close{width:2rem;height:2rem;color:var(--color-secondary-50);cursor:pointer;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s;display:flex}.modal-close:hover{background:var(--color-secondary-7);color:var(--color-foreground)}.modal-body{flex:1;padding:1.25rem;line-height:1.6;overflow-y:auto}.modal-body p{margin:.5rem 0}.modal-body code{background:var(--color-secondary-10);font-size:.9em;font-family:var(--font-mono);border-radius:3px;padding:.1em .35em}.modal-body pre{background:var(--color-secondary-7);font-size:.85rem;line-height:1.5;font-family:var(--font-mono);border-radius:6px;margin:.5rem 0;padding:.75rem 1rem;overflow-x:auto}.modal-body ul{margin:.5rem 0;padding-left:1.25rem}.modal-body li{margin:.25rem 0}.modal-footer{border-top:1px solid var(--color-border-light);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.settings-body{flex-direction:column;gap:1.5rem;display:flex}.settings-section{border:1px solid var(--color-border-light);border-radius:.375rem;margin:0;padding:1rem}.settings-section legend{color:var(--color-secondary-75);padding:0 .375rem;font-size:.8125rem;font-weight:600}.settings-field{flex-direction:column;gap:.25rem;display:flex}.settings-field label{color:var(--color-secondary-75);font-size:.75rem;font-weight:500}.settings-field input,.settings-field select{border:1px solid var(--color-border);height:2rem;font-family:var(--font-primary);color:var(--color-foreground);background:var(--color-background);border-radius:.25rem;outline:none;padding:0 .5rem;font-size:.8125rem;transition:border-color .15s}.settings-field input:focus,.settings-field select:focus{border-color:var(--color-primary)}.settings-field input[type=number]{-moz-appearance:textfield;width:100%}.settings-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.settings-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.settings-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.settings-unit-input{gap:0;display:flex}.settings-unit-input input{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;flex:1}.settings-unit-input select{border-left:1px solid var(--color-border);border-top-left-radius:0;border-bottom-left-radius:0;width:4rem;padding:0 .25rem;font-size:.75rem}.settings-margins{grid-template:"top right""bottom left"/1fr 1fr;gap:.5rem;margin-top:.375rem;display:grid}.settings-margin-top{grid-area:top}.settings-margin-right{grid-area:right}.settings-margin-bottom{grid-area:bottom}.settings-margin-left{grid-area:left}.settings-margins>div{flex-direction:column;gap:.125rem;display:flex}.settings-margins label{color:var(--color-secondary-50);text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem;font-weight:500}.settings-margins input{border:1px solid var(--color-border);height:2rem;font-family:var(--font-primary);color:var(--color-foreground);background:var(--color-background);-moz-appearance:textfield;border-radius:.25rem;outline:none;padding:0 .5rem;font-size:.8125rem}.settings-margins input:focus{border-color:var(--color-primary)}.settings-margins input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.settings-margins input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.settings-save-btn{height:2rem;font-family:var(--font-primary);color:#fff;background:var(--color-primary);cursor:pointer;border:none;border-radius:.25rem;padding:0 1rem;font-size:.8125rem;font-weight:500;transition:background .15s}.settings-save-btn:hover{background:var(--color-primary-75)}#menu-file{padding:.5rem var(--padding);align-items:center;display:flex}.radio-switch{height:100%;color:var(--color-secondary);border-radius:var(--border-radius);background-color:var(--color-secondary-10);border:none;justify-content:center;align-items:center;padding:.125rem;display:flex;position:relative}.radio-switch-option{z-index:1;aspect-ratio:1;border-radius:var(--border-radius);cursor:pointer;height:100%;color:inherit;transition:color .2s ease-in-out;position:relative}.radio-switch-label{cursor:pointer;justify-content:center;align-items:center;width:100%;height:100%;padding:.25rem .5rem;display:flex;position:absolute;top:0;left:0}.radio-switch-option.selected{color:var(--color-primary)}.radio-switch-slider{aspect-ratio:1;border-radius:var(--border-radius);background-color:var(--color-background);height:calc(100% - .25rem);box-shadow:1px 1px 0 0 var(--color-secondary-25);z-index:0;transition:transform .2s ease-in-out;position:absolute;top:.125rem;left:.125rem}.radio-switch input{opacity:0;cursor:pointer;width:100%;height:100%}.help-tabs{border-bottom:1px solid var(--color-border-light);gap:0;margin:-1.25rem -1.25rem 1.25rem;padding:0 1.25rem;display:flex}.help-tab{color:var(--color-secondary-50);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:.6rem 1rem;font-family:inherit;font-size:.85rem;transition:color .15s,border-color .15s}.help-tab:hover{color:var(--color-foreground)}.help-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.help-tab-content h3{margin:1rem 0 .4rem;font-size:.95rem}.help-tab-content h3:first-child{margin-top:0}.help-footer{text-align:center;border-top:1px solid var(--color-border-light);margin-top:1rem;padding-top:.75rem}#menu-view{padding:.5rem var(--padding);align-items:center;display:flex}.radio-switch{margin-left:var(--padding)}#app-header{grid-template-columns:var(--sidebar-width) 1fr;height:var(--header-height);border-bottom:1px solid var(--color-border);align-items:center;display:grid}#app-header>*{height:100%}#app-logo{border-right:1px solid var(--color-border-light);align-items:center;padding-left:1rem;display:flex}#app-logo img{width:7rem;height:1.5rem}#app-menu{grid-template-columns:1fr auto auto;display:grid}#app-menu .app-menu{align-items:center;display:flex}.app-panel{flex-direction:column;height:100%;max-height:100%;display:flex;overflow:hidden}.app-panel:not(:last-child){border-right:1px solid var(--color-border)}.panel-header{border-bottom:1px solid var(--color-border-light);max-height:2rem;font-size:var(--font-size-small);color:var(--color-secondary);justify-content:space-between;align-items:center;padding:.5rem .5rem .5rem 1rem;font-weight:500;display:flex}.panel-header h2{font-size:var(--font-size-small);align-items:center;display:flex}.panel-header h2 svg{color:var(--color-secondary);margin-right:.375rem}.panel-content{flex:1;min-height:0;max-height:100%;overflow:auto}.panel-footer{border-top:1px solid var(--color-border);max-height:2rem;font-size:var(--font-size-small);color:var(--color-secondary);justify-content:space-between;align-items:center;padding:.5rem;display:flex}.project-new-song-btn{cursor:pointer;color:var(--color-secondary);border-radius:var(--border-radius);background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.project-new-song-btn:hover{background-color:var(--color-secondary-10);color:var(--color-primary)}.project-list{margin:0;padding:1rem .5rem}.project-item{padding:.25rem var(--padding);cursor:pointer;border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding-left:0;transition:background-color .15s ease-in-out,opacity .15s ease-in-out;display:flex}.project-item:hover{background-color:var(--color-secondary-7)}.project-item.active{color:var(--color-primary);background-color:var(--color-secondary-7);font-weight:600}.project-item.dragging{opacity:.4}.project-item.drop-target{position:relative}.project-item.drop-target:before{content:"";background-color:var(--color-primary);z-index:1;border-radius:2px;height:3px;position:absolute;top:-2px;left:0;right:0}.project-drop-indicator{background-color:var(--color-primary);border-radius:2px;height:3px;margin:1px 0;list-style:none}.project-item-grip{color:var(--color-secondary);cursor:grab;opacity:.2;flex-shrink:0;justify-content:center;align-items:center;margin-right:.25rem;transition:opacity .15s ease-in-out;display:flex}.project-item:hover .project-item-grip{opacity:1}.project-item-grip:active{cursor:grabbing}.project-item-index{color:var(--color-secondary);font-size:var(--font-size-small);margin-right:.5rem}.project-item-title{font-size:var(--font-size);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.project-item-delete{opacity:0;cursor:pointer;color:var(--color-secondary);border-radius:var(--border-radius);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:.25rem;transition:opacity .15s ease-in-out,background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.project-item:hover .project-item-delete{opacity:1}.project-item-delete:hover{background-color:var(--color-secondary-10);color:#e74c3c}.project-title-field{padding:.5rem}.project-title-input{width:100%;font-size:var(--font-size);font-family:var(--font-family);color:var(--color-foreground);background-color:var(--color-background);border:1px solid var(--color-secondary-25);border-radius:var(--border-radius);box-sizing:border-box;outline:none;padding:.375rem .5rem;transition:border-color .15s ease-in-out}.project-title-input:focus{border-color:var(--color-primary)}.project-title-input::placeholder{color:var(--color-secondary)}.previewOnly #editor{display:none}.editor-container{height:100%;display:flex;overflow:hidden}.editor-line-numbers{border-right:1px solid var(--color-secondary-7);min-width:2.5rem;color:var(--color-editor-line-number);font-family:var(--font-mono);font-size:var(--font-size);-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;align-items:flex-end;padding:.75rem 0;font-weight:500;line-height:1.5;display:flex;overflow:hidden}.editor-line-number{min-height:1.3125rem;padding:0 .5rem;line-height:1.5}.editor-line-number.active-line{color:var(--color-editor-current-line-number)}.editor-content{flex:1;position:relative;overflow:hidden}.editor-overlay,.editor-textarea{width:100%;height:100%;font-family:var(--font-mono);font-size:var(--font-size);white-space:pre;resize:none;box-sizing:border-box;tab-size:4;border:none;margin:0;padding:.75rem;line-height:1.5;position:absolute;top:0;left:0;overflow:auto}.editor-overlay{z-index:1;pointer-events:none;color:var(--color-foreground);background-color:#0000}.editor-overlay-inner{min-height:calc(100% - 1px)}.editor-overlay-line{white-space:pre;min-height:1.3125rem}.editor-textarea{z-index:2;color:#0000;caret-color:var(--color-foreground);background:0 0;outline:none}.editor-textarea::selection{color:var(--color-background);background:var(--color-primary)}.editor-textarea::placeholder{color:var(--color-secondary-50)}.editor-overlay-line.active-line{background-color:var(--color-editor-current-line);border-radius:2px}.editor-overlay-line .title{color:var(--color-syntax-title)}.editor-overlay-line .meta{color:var(--color-syntax-meta)}.editor-overlay-line .section{color:var(--color-syntax-section)}.editor-overlay-line .chord{color:var(--color-syntax-chord)}.editor-overlay-line .blockquote{color:var(--color-syntax-blockquote)}.editor-overlay-line .comment{color:var(--color-syntax-comment)}.editor-overlay-line:has(.syntax-error){background-color:var(--color-editor-error-background)}.editor-overlay-line .syntax-error{width:100%;color:var(--color-editor-error);border-radius:2px}.status-syntax-errors{color:var(--color-secondary)}.status-syntax-errors.has-errors{color:var(--color-editor-error)}.editorOnly #preview{display:none}#preview .panel-content{background-color:var(--color-secondary-7);position:relative;overflow:hidden}.preview-wrapper{width:100%;height:100%;padding:2rem;overflow:auto}.preview-measure{visibility:hidden;pointer-events:none;z-index:-1;width:100%;position:absolute;top:0;left:0}.preview-measure-inner{box-sizing:border-box}.preview-page-stack{flex-direction:column;align-items:center;display:flex}.preview-container{background:#fff;flex-shrink:0;justify-content:center;width:100%;max-width:100%;display:flex;overflow:hidden;box-shadow:.25rem .25rem 1rem #00000026}.preview-page{transform-origin:top;box-sizing:border-box;flex-shrink:0}.preview-page-viewport{overflow:hidden}.preview-empty{height:100%;color:var(--color-secondary-50);font-size:var(--font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}.chordmd{font-family:var(--font-preview,var(--font-primary));font-size:var(--font-size-preview,var(--font-size));color:var(--color-foreground-light);line-height:var(--line-height-preview,1.4);box-sizing:border-box}.chordmd header{margin-bottom:2rem}.chordmd h1{margin:0 0 .25rem;font-size:1.25rem}.chordmd .meta{flex-flow:wrap;gap:.5em;margin:.25rem 0;padding:0;font-size:.875rem;list-style:none;display:flex}.chordmd .meta li{background:var(--color-preview-meta-background);border-radius:.25rem;padding:.125rem .375rem;display:flex}.chordmd .meta-key{font-weight:600}.chordmd .meta-key:after{content:":";margin-right:.25rem}.chordmd main{flex-direction:column;display:flex}.chordmd section{flex-direction:column;gap:.375rem;display:flex}.chordmd h3{margin:0;font-size:.875rem}.chordmd .line{white-space:pre-wrap;align-items:flex-end;margin:0;display:flex}.chordmd .token{grid-template-rows:auto auto;place-items:end left;min-width:.6ch;display:inline-grid}.chordmd .chord{color:var(--color-preview-accent);align-self:flex-start;padding-right:1ch;font-size:.75rem;font-weight:600;line-height:1}.chordmd .text:empty:after{content:" "}.chordmd .spacer{height:1.5rem}.chordmd .comment{color:var(--color-secondary-light);opacity:.75;font-size:.9em;font-style:italic}.chordmd blockquote{border-left:.125rem solid var(--color-preview-accent);flex-direction:column;gap:.25rem;margin:.375rem 0;padding-left:.75rem;display:flex}@media print{@page{margin:0}html,body{margin:0;padding:0}#app-header,#app-main>:not(#preview){display:none!important}#preview{width:100vw!important;height:auto!important;max-height:none!important;position:static!important;overflow:visible!important}#preview .panel-header,#preview .panel-footer{display:none!important}#preview .panel-content{background:#fff!important;max-height:none!important;padding:0!important;overflow:visible!important}.preview-wrapper{padding:0!important;overflow:visible!important}.preview-page-stack{gap:0!important;padding:0!important}.preview-container{page-break-after:always;break-inside:avoid;box-shadow:none!important;width:100%!important;max-width:100%!important;display:block!important;overflow:hidden!important}.preview-container:last-child{page-break-after:avoid}.preview-container.song-start{page-break-before:always}.preview-container.song-end{page-break-after:avoid}.preview-page{transform:none!important}.preview-measure{display:none!important}}#app-main{grid-template-columns:var(--sidebar-width) 1fr;height:calc(100vh - var(--header-height));display:grid}.sideToSide #app-main{grid-template-columns:var(--sidebar-width) 1fr 1fr}*,:before,:after{box-sizing:border-box}:root{--color-background-light:#fff;--color-foreground-light:#000;--color-primary-light:#195edc;--color-secondary-light:#55565c;--color-accent-light:#55ee5d;--color-syntax-title-light:#ba437a;--color-syntax-meta-light:#7c3aed;--color-syntax-section-light:#059669;--color-editor-error-light:#f44336;--color-editor-error-background-light:#f4433615;--color-background-dark:#1a1b1e;--color-foreground-dark:#e4e4e7;--color-primary-dark:#6ba3f5;--color-secondary-dark:#a1a1aa;--color-accent-dark:#4ade80;--color-syntax-title-dark:#e06c9f;--color-syntax-meta-dark:#a78bfa;--color-syntax-section-dark:#34d399;--color-editor-error-dark:#ef5350;--color-editor-error-background-dark:#ef535025;--color-background:var(--color-background-light);--color-foreground:var(--color-foreground-light);--color-foreground-75:color-mix(in srgb, var(--color-foreground) 75%, var(--color-background));--color-foreground-50:color-mix(in srgb, var(--color-foreground) 50%, var(--color-background));--color-foreground-25:color-mix(in srgb, var(--color-foreground) 25%, var(--color-background));--color-primary:var(--color-primary-light);--color-primary-75:color-mix(in srgb, var(--color-primary) 75%, var(--color-background));--color-primary-50:color-mix(in srgb, var(--color-primary) 50%, var(--color-background));--color-primary-25:color-mix(in srgb, var(--color-primary) 25%, var(--color-background));--color-secondary:var(--color-secondary-light);--color-secondary-75:color-mix(in srgb, var(--color-secondary) 75%, var(--color-background));--color-secondary-50:color-mix(in srgb, var(--color-secondary) 50%, var(--color-background));--color-secondary-25:color-mix(in srgb, var(--color-secondary) 25%, var(--color-background));--color-secondary-10:color-mix(in srgb, var(--color-secondary) 10%, var(--color-background));--color-secondary-7:color-mix(in srgb, var(--color-secondary) 7%, var(--color-background));--color-accent:var(--color-accent-light);--color-accent-75:color-mix(in srgb, var(--color-accent) 75%, var(--color-background));--color-accent-50:color-mix(in srgb, var(--color-accent) 50%, var(--color-background));--color-accent-25:color-mix(in srgb, var(--color-accent) 25%, var(--color-background));--color-border:var(--color-secondary-25);--color-border-light:var(--color-secondary-10);--color-syntax-title:var(--color-syntax-title-light);--color-syntax-meta:var(--color-syntax-meta-light);--color-syntax-section:var(--color-syntax-section-light);--color-syntax-text:var(--color-foreground);--color-syntax-chord:var(--color-primary);--color-syntax-blockquote:var(--color-accent);--color-syntax-comment:var(--color-secondary);--color-editor-current-line:color-mix(in srgb, var(--color-primary) 5%, transparent);--color-editor-line-number:var(--color-secondary-25);--color-editor-current-line-number:var(--color-secondary-50);--color-editor-error:var(--color-editor-error-light);--color-editor-error-background:var(--color-editor-error-background-light);--color-preview-meta-background:color-mix(in srgb, var(--color-secondary-light) 7%, var(--color-background-light));--color-preview-accent:var(--color-primary-light);--font-primary:"Inter", sans-serif;--font-mono:"DM Mono", monospace;--font-size:.875rem;--font-size-small:.75rem;--padding:.625rem;--border-radius:.25rem;--header-height:3.25rem;--sidebar-width:15rem}html.dark{--color-background:var(--color-background-dark);--color-foreground:var(--color-foreground-dark);--color-primary:var(--color-primary-dark);--color-secondary:var(--color-secondary-dark);--color-accent:var(--color-accent-dark);--color-syntax-title:var(--color-syntax-title-dark);--color-syntax-meta:var(--color-syntax-meta-dark);--color-syntax-section:var(--color-syntax-section-dark);--color-editor-error:var(--color-editor-error-dark);--color-editor-error-background:var(--color-editor-error-background-dark)}body{font-family:var(--font-primary);font-size:var(--font-size);background-color:var(--color-background);color:var(--color-foreground);margin:0}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}#app{grid-template-rows:var(--header-height) 1fr;width:100%;height:100vh;display:grid}