.ps-modal-overlay{position:fixed;z-index:var(--z-modal);top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center}.ps-modal-box{background:#fff;padding:2rem;border-radius:8px;min-width:20vw;max-width:480px}.ps-modal-header{display:flex;align-items:center}.ps-modal-title{font-size:1.5rem;font-weight:500}.ps-modal-close{display:flex;margin-left:auto;align-items:center;justify-content:center;padding:.1rem;background-color:#f0e6e6;transition:border-color .1s,background-color .1s,color .1s}.ps-modal-close:hover{border-color:red;color:red}.ps-modal-divider{margin-top:16px;margin-bottom:16px}.ps-modal-items div{padding-top:8px;padding-bottom:8px}.ps-modal-items div>*{padding-top:8px;padding-bottom:8px}.ps-modal-items div span{font-weight:500}.ps-modal-items div :is(select,input){padding:8px;width:100%;font-size:1rem}.ps-modal-items .margin-inputs{display:flex;gap:16px;width:100%;padding:0}.margin-inputs div{display:flex;flex-direction:column;padding:0}.margin-inputs div span{color:#bcb6ae}.toolbar-overlay{position:absolute;height:100%;width:100%;background-color:#e0e0e0;display:flex;align-items:center;padding:0 8px;gap:8px;opacity:0;pointer-events:none;transition:opacity .1s}.toolbar-overlay.visible{opacity:1;pointer-events:auto}.chord-toolbar{padding:0 16px;display:flex;gap:4px}.toolbar{width:100%;position:sticky;top:0;background-color:#f6f6f6;z-index:var(--z-toolbar);display:flex}.toolbar *{font-size:.9rem}.toolbar button{height:100%;padding:.2em .4em;background:none}.toolbar button:hover{background-color:#e6e6e6}.toolbar input,.toolbar select{padding:0 .4em;height:2.4em;background:none;border-radius:8px;border:1px solid #d0d0d0}.toolbar input:hover,.toolbar select:hover{background-color:#e6e6e6}.toolbar select{cursor:pointer}.toolbar-contents{padding:.5em 0;display:flex;align-items:center;gap:.2em}.toolbar-contents>div{height:100%;display:flex;align-items:center;padding:0 .5em;gap:.6em}.toolbar-divider{height:2.5em;margin:0}.toolbar-settings-button{display:flex;align-items:center;gap:.3em}.toolbar-chords{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.line-wrapper{width:100%;position:relative}.line-wrapper.selectable{cursor:pointer}.chord-layer{position:sticky}.chord{position:absolute;white-space:nowrap;font-weight:700;cursor:pointer}.text-layer{width:100%;white-space:pre;margin-top:1.2em}.text-layer .placeholder{color:gray}.letter.selectable:hover{background-color:#ffff05;cursor:pointer}.line-group{width:100%}.line-container{position:relative;display:flex;border-radius:8px}.line-container.hoverable:hover{background:#e0e0e0}.line-container.selected{border-radius:6px}.section-wrapper{width:100%;display:grid}.section-wrapper.selectable{outline:1px solid #c7c7c7;cursor:pointer}.section-wrapper.selectable:hover{background-color:#e0e0e0}.section-divider{position:relative;height:100%;display:flex;align-items:center}.section-divider-line{width:2px;border-radius:4px;background:#e0e0e0;height:90%;transition:background .15s}.section-divider:hover .section-divider-line{position:absolute;height:100%;background:#a6a6a6;inset:0 -1px;width:4px}.section-divider-detect{position:absolute;inset:0 -6px;width:14px;cursor:col-resize;touch-action:none}.section-divider button{position:absolute;margin:auto;inset:0 -16px;height:32px;padding:0;transition:opacity .15s;opacity:0;pointer-events:none;z-index:var(--z-linegroup-divider)}.section-divider:hover button{opacity:1;pointer-events:auto}.page{width:210mm;height:297mm;outline:1px solid #c7c7c7;margin:auto;break-after:page}.section-add-line-pos{position:relative;height:0;display:flex;justify-content:center}.section-add-line-offset{position:absolute;height:2em;width:100%;transform:translateY(-50%);border:2px dashed black;opacity:0;background:#ffffff80;transition:opacity .15s,background .15s;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:none;z-index:var(--z-section-divider)}.section-add-line-offset.visible{opacity:1;background:#ffffff80;pointer-events:auto}.section-add-line-offset.visible:hover{background:#ffffffe6}.section-add-line-overlay{position:fixed;z-index:calc(var(--z-section-divider) - 1);top:0;left:0;width:100vw;height:100vh;pointer-events:none;background:#0000;transition:background .15s}.section-add-line-overlay.visible{pointer-events:auto;background:#0000004d}.editor{display:flex;flex-direction:column}.pages{width:100vw;margin:16px auto;overflow-x:auto}.lines{width:100%;float:left}@media print{@page{margin:0}.section-wrapper{outline:none}.navbar,.toolbar,.placeholder{display:none}.page{margin:0;outline:none;display:block!important;overflow:visible!important;height:auto!important;position:static!important}}:root{--z-base: 1;--z-toolbar: 10;--z-linegroup-divider: 15;--z-section-divider: 20;--z-toolbar: 50;--z-modal: 100}.line-toolbar-container{display:flex;justify-content:center;position:absolute;transform:translateY(-100%);z-index:var(--z-toolbar);opacity:0;pointer-events:none;transition:opacity .1s}.line-toolbar-container.visible{opacity:1}.line-toolbar-wrapper{display:flex;width:fit-content;gap:4px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 2px 6px #00000026;padding:2px;pointer-events:auto}.line-toolbar-wrapper button{height:28px;width:28px;padding:4px;justify-content:center;align-items:center}.navbar{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#f6f6f6}.navbar-link{color:#000;display:block;text-align:center;padding:16px;text-decoration:none}.navbar-login{float:right}.navbar li{transition:background-color .1s}.navbar li:hover{background-color:#e0e0e0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}select,input{padding:8px;width:100%;font-size:1rem}span{color:#000}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}