@import"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap";:root{font-family:system-ui,Arial,sans-serif;color:#19202b;background:#f6f7fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{max-width:1480px;margin:auto;padding:28px 24px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}h1{margin:0;font-size:28px;letter-spacing:-.7px}h1 span{color:#e60}header p{color:#6d7480;margin:6px 0 0}.offline{font-size:12px;color:#297d4c;background:#e9f6ed;border-radius:99px;padding:9px 13px}.toolbar,.actions{display:flex;align-items:end;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e5e8ed;border-radius:12px;padding:16px;margin-bottom:18px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:700;color:#68707c}select,button{font:inherit;border-radius:8px;padding:10px 14px}select{min-width:110px;border:1px solid #d9dee5;background:#fff}.arrow{font-size:24px;color:#e60;padding-bottom:7px}.hint{font-size:12px;color:#777f8a;margin-left:auto;max-width:320px}.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:#fff;border:1px solid #e5e8ed;border-radius:12px;overflow:hidden;min-width:0}.panelhead{min-height:62px;padding:12px 16px;border-bottom:1px solid #e5e8ed;display:flex;align-items:center;justify-content:space-between;gap:8px}.panelhead h2{font-size:15px;margin:0}.panelhead>div{display:flex;gap:7px}.status{font-size:12px;color:#e60;font-weight:700}.panel textarea,.preview,.source-editor{width:100%;height:min(61vh,680px);min-height:390px;border:0;padding:20px;outline:none;resize:vertical;overflow:auto;font:10px/1.5 Fira Mono,monospace;letter-spacing:0;-moz-tab-size:4;tab-size:4;white-space:pre;overflow-wrap:normal}.preview{line-height:1}.source-editor{white-space:pre-wrap;overflow-wrap:anywhere}.source-editor:empty:before{content:attr(data-placeholder);color:#9aa1ab;pointer-events:none}.preview .line{white-space:pre;min-height:0}.preview .chords,.preview .solonotes{color:#e60;font-weight:700}.preview .heading,.preview .soloheading{font-weight:700}.preview .instruction{color:#00b050;font-size:10px;font-weight:700}.preview .inline-instruction{color:#00b050}.actions{margin-top:18px;align-items:center}.toggle{font-size:13px;display:flex;align-items:center;gap:8px;white-space:nowrap}.toggle input{accent-color:#ee6600}.grow{flex:1}button{border:0;cursor:pointer;font-weight:650}button:hover{filter:brightness(.96)}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #ee6600;outline-offset:2px}.primary{background:#e60;color:#fff}.secondary{background:#f1f3f6;color:#3e4754}.small{font-size:12px;padding:7px 9px}.message{padding:12px 16px;border-radius:8px;background:#eaf7ef;color:#21663b}footer{color:#68707c;font-size:12px;line-height:1.6}footer .credit{text-align:center;margin:18px 0 0}footer .credit a{color:inherit}footer code{background:#e9ebef;padding:2px 4px;border-radius:3px}@media (max-width:800px){.app{padding:16px}.panels{grid-template-columns:1fr}.panel textarea,.preview,.source-editor{height:330px;min-height:250px}header{align-items:flex-start;flex-direction:column}.hint{margin-left:0}.actions .grow{flex-basis:100%}}