@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600&family=JetBrains+Mono:wght@400;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Caveat:wght@400;700&family=Caveat+Brush&display=swap");:root{--bg:#0d0b08;--surf:#161310;--surf2:#1e1a15;--surf3:#26211a;--bdr:#352d22;--bdr2:#4a3f30;--acc:#d4943a;--acc2:#b05a28;--accgl:rgba(212,148,58,.13);--txt:#ede0c8;--txt2:#a08060;--muted:#5a4e3c;--green:#5a9e5a;--mono:"JetBrains Mono",monospace;--disp:"Bebas Neue",sans-serif;--serif:"Crimson Pro",serif;--editor-stave-color:#4a3f30;--editor-stave-color-selected:#d4943a;--editor-note-bg:#d4943a;--editor-note-selected-bg:#f0b84e;--editor-note-text:#0d0b08;--editor-bracket:#a08060;--editor-label:#a08060;--cur-bg:rgba(212,148,58,.08);--col-hl:rgba(212,148,58,.06);--draw-paper:#17120d;--draw-grid-h:rgba(212,148,58,0.10);--draw-grid-v:rgba(212,148,58,0.06);--draw-note-bg:#241c14;--draw-ink:#ede0c8;--draw-ink-muted:#b8a184}:root[data-theme=light]{--bg:#faf8f4;--surf:#ffffff;--surf2:#f2ede4;--surf3:#e8e0d0;--bdr:#d8cdb8;--bdr2:#c0a878;--acc:#b06820;--acc2:#8a4010;--accgl:rgba(176,104,32,.10);--txt:#1a1208;--txt2:#6b4c1e;--muted:#a08050;--green:#2e7a2e;--editor-stave-color:#c0a878;--editor-stave-color-selected:#b06820;--editor-note-bg:#b06820;--editor-note-selected-bg:#d4820a;--editor-note-text:#faf8f4;--editor-bracket:#8a6030;--editor-label:#8a6030;--cur-bg:rgba(176,104,32,.08);--col-hl:rgba(176,104,32,.07);--draw-paper:#faf6ee;--draw-grid-h:rgba(180,160,120,0.09);--draw-grid-v:rgba(180,160,120,0.05);--draw-note-bg:#faf6ee;--draw-ink:#1a1a2e;--draw-ink-muted:#444444}*{box-sizing:border-box;margin:0;padding:0}*,:after,:before{transition:background-color .2s,border-color .2s,color .15s}body,html{height:100%;overflow:hidden}body{background:var(--bg);color:var(--txt);font-family:var(--serif);flex-direction:column}body,header{display:flex}header{align-items:center;gap:.4rem;padding:.25rem .6rem;min-height:36px;flex-shrink:0;flex-wrap:wrap;align-content:center;background:var(--surf);border-bottom:1px solid var(--bdr);z-index:100;overflow:visible}.logo{font-family:Oswald,sans-serif;font-size:1.1rem;letter-spacing:.03em;color:var(--acc);text-shadow:0 0 16px rgba(212,148,58,.3);white-space:nowrap;font-feature-settings:normal;font-variant-caps:normal}.logo em{color:var(--acc2);font-style:normal}.meta{display:flex;gap:.5rem;flex:1 1;align-items:center}.meta input{background:transparent;border:none;border-bottom:1px solid var(--bdr2);color:var(--txt);font-family:var(--serif);outline:none;padding:.2rem .35rem;transition:border-color .2s}.meta input::placeholder{color:var(--muted)}.meta input:focus{border-color:var(--acc)}#iTitle{font-size:.85rem;font-weight:600;width:160px}#iArtist{font-size:.8rem;width:120px}.sp{flex:1 1}.btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.38rem .85rem;border:1px solid var(--bdr2);background:var(--surf2);color:var(--txt2);cursor:pointer;transition:all .18s;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:hover{color:var(--acc);background:var(--accgl)}.btn-p,.btn:hover{border-color:var(--acc)}.btn-p{background:var(--acc);color:var(--bg);font-weight:700}.btn-p:hover{background:#e0a040;color:var(--bg)}.btn-i{padding:.38rem .6rem;font-size:.8rem}.bgrp{display:flex;gap:.22rem}.vsep{width:1px;height:22px;background:var(--bdr2);margin:0 .15rem}#noteToolbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1.5rem;background:var(--surf);border-top:1px solid var(--bdr2);box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:500;opacity:0;pointer-events:none;transform:translateY(100%);transition:opacity .18s,transform .18s;white-space:nowrap}#noteToolbar.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.tbtn{font-family:var(--mono);font-size:.68rem;padding:.28rem .55rem;border:1px solid var(--bdr2);background:var(--surf2);color:var(--txt2);cursor:pointer;transition:all .14s;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:2px}.tbtn.active-mark,.tbtn:hover{border-color:var(--acc);color:var(--acc);background:var(--accgl)}.tb-sep{width:1px;height:16px;background:var(--bdr2);margin:0 .1rem;flex-shrink:0}.main{display:flex;flex:1 1;overflow:hidden}.canvas{flex:1 1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0 8rem;outline:none;position:relative}.canvas::-webkit-scrollbar{width:5px;height:5px}.canvas::-webkit-scrollbar-thumb{background:var(--bdr2)}.song-hd{margin-bottom:.8rem;padding:.4rem .8rem .6rem;border-bottom:1px solid var(--bdr)}.song-hd h1{font-family:Oswald,sans-serif;font-size:2rem;letter-spacing:.07em;color:var(--txt);line-height:1}.song-hd p{font-size:.95rem;color:var(--txt2);margin-top:.25rem;font-style:italic}.stave-wrap{margin-bottom:.4rem;cursor:crosshair;display:block;padding-left:.5rem}.stave-wrap svg{display:block;overflow:visible}.add-row{display:flex;align-items:center;justify-content:center;gap:.4rem;border:1px dashed var(--bdr2);padding:.4rem;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;transition:all .18s;margin:.2rem .5rem}.add-row:hover{border-color:var(--acc);color:var(--acc)}.sbar{height:24px;display:flex;align-items:center;gap:1.4rem;padding:0 1.2rem;background:var(--surf);border-top:1px solid var(--bdr);font-family:var(--mono);font-size:.62rem;color:var(--muted);flex-shrink:0;z-index:100}.sbar span{white-space:nowrap}.dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:.35rem}.toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(16px);background:var(--surf3);border:1px solid var(--acc);color:var(--txt);font-family:var(--mono);font-size:.72rem;padding:.55rem 1.3rem;opacity:0;transition:opacity .28s,transform .28s;z-index:9999;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.export-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:2000}.export-modal{min-width:280px;max-width:90vw;background:var(--surf);border:1px solid var(--bdr2);box-shadow:0 14px 40px rgba(0,0,0,.45);padding:1rem}.export-modal-title{font-family:var(--mono);font-size:.8rem;color:var(--txt);margin-bottom:.8rem;letter-spacing:.06em;text-transform:uppercase}.export-modal-actions{display:flex;gap:.45rem;justify-content:flex-end}body.view-mode #noteToolbar,body.view-mode .add-row,body.view-mode .edit-only,body.view-mode .sbar{display:none!important}body.view-mode .canvas{cursor:default;padding-bottom:1rem}body.view-mode .stave-wrap svg{cursor:default}#viewModeBtn.active{background:var(--acc);color:var(--bg);border-color:var(--acc);font-weight:700}body.draw-mode .canvas{background:var(--draw-paper);background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,var(--draw-grid-h) 28px),repeating-linear-gradient(90deg,transparent,transparent 27px,var(--draw-grid-v) 28px)}body.draw-mode .stave-wrap{background:transparent}#drawModeBtn.active{background:var(--acc);color:var(--bg);border-color:var(--acc);font-weight:700}.meta-select{background:var(--surf2);border:none;border-bottom:1px solid var(--bdr2);color:var(--txt2);font-family:var(--mono);font-size:.68rem;padding:.2rem .3rem;outline:none}.meta-select-tuning{font-weight:700;max-width:180px}@media (max-width:1100px){.meta{flex:1 1 100%;order:2}.sp{display:none}}@media (max-width:760px){header{gap:.25rem;padding:.3rem .45rem}#iTitle{width:130px}#iArtist{width:100px}.btn{padding:.3rem .6rem;font-size:.62rem}.btn-i{padding:.3rem .45rem;font-size:.72rem}.meta-select{font-size:.62rem}}