:root{--bg:#0d1117;--bg-alt:#161b22;--border:#30363d;--text:#e6edf3;--text-dim:#8b949e;--accent:#58a6ff;--accent-2:#3fb950;--code-bg:#010409;--warn:#d29922;--danger:#f85149}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);max-width:900px;min-height:100vh;margin:0 auto;padding:2.5rem 1.5rem 5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.6}h1{border-bottom:1px solid var(--border);margin-bottom:.25rem;padding-bottom:.75rem;font-size:1.8rem}.subtitle{color:var(--text-dim);margin-bottom:2rem;font-size:1.05rem}h2{background:var(--bg-alt);border-left:4px solid var(--accent);border-radius:4px;margin-top:0;padding:.5rem .9rem;font-size:1.4rem}h2 .step-num{background:var(--accent);color:#04121f;border-radius:999px;margin-right:.6rem;padding:.15rem .55rem;font-size:.85rem;font-weight:700;display:inline-block}h3{color:var(--accent);margin-top:1.5rem;font-size:1.05rem}p{margin:.75rem 0}code{background:var(--code-bg);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:.88em}pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;margin:.9rem 0;padding:1rem 1.2rem;overflow-x:auto}pre code{background:0 0;border:none;padding:0;font-size:.85rem}pre code.hljs{background:0 0;padding:0}.code-path{color:var(--text-dim);text-align:right;justify-content:flex-end;align-items:center;gap:.35rem;margin:-.6rem 0 1rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:.78rem;display:flex}.code-path-copy{width:1.5rem;height:1.5rem;color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.code-path-copy:hover{color:var(--text);border-color:var(--border);background:var(--bg-alt)}.code-path-copy.copied{color:var(--accent-2)}.callout{border:1px solid var(--border);border-radius:8px;margin:1rem 0;padding:.9rem 1.1rem}.callout.info{border-left:4px solid var(--accent);background:#58a6ff14}.callout.warn{border-left:4px solid var(--warn);background:#d2992214}.callout.done{border-left:4px solid var(--accent-2);background:#3fb95014}.callout.bug{border-left:4px solid var(--danger);background:#f8514914}.callout strong{color:var(--text)}ul,ol{padding-left:1.4rem}li{margin:.3rem 0}table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.92rem}th,td{border:1px solid var(--border);text-align:left;vertical-align:top;padding:.5rem .75rem}th{background:var(--bg-alt)}.toc{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;margin:1.5rem 0 2.5rem;padding:1.2rem 1.5rem}.toc a{color:var(--accent);text-decoration:none}.toc a:hover{text-decoration:underline}.toc ol{margin:.4rem 0 0}.tree-view{margin:1.5rem 0 2.5rem}.tree-section{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;margin-bottom:.75rem;padding:.9rem 1.2rem}.tree-section summary{cursor:pointer;font-size:1rem}.tree-section summary:hover{color:var(--accent)}.tree-section .tree-count{color:var(--text-dim);margin-left:.5rem;font-size:.75rem}.tree-section ol{margin:.8rem 0 .2rem;padding-left:1.5rem}.tree-section li{margin:.35rem 0}.tree-section a{color:var(--accent);text-decoration:none}.tree-section a:hover{text-decoration:underline}a{color:var(--accent)}hr{border:none;border-top:1px solid var(--border);margin:3rem 0}.mermaid{background:var(--code-bg);border:1px solid var(--border);text-align:center;border-radius:8px;margin:1rem 0;padding:1.2rem;overflow-x:auto}.arch-ascii summary{cursor:pointer;color:var(--text-dim);margin:.5rem 0;font-size:.85rem}.arch-ascii summary:hover{color:var(--accent)}.arch-ascii pre{background:var(--code-bg);border:1px solid var(--border);white-space:pre;color:var(--text-dim);border-radius:8px;margin:.5rem 0 1rem;padding:1.2rem;font-family:ui-monospace,monospace;font-size:.8rem;overflow-x:auto}.badge{color:var(--accent-2);background:#3fb95026;border:1px solid #3fb95066;border-radius:4px;margin-left:.5rem;padding:.1rem .5rem;font-size:.75rem;display:inline-block}.docs-header{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.docs-header .docs-nav{margin:0}.lang-picker{gap:.4rem;margin-left:auto;font-size:.85rem;display:flex}.lang-picker a,.lang-picker .lang-active,.lang-picker button{color:var(--text-dim);cursor:pointer;font:inherit;background:0 0;border:none;border-radius:4px;padding:.15rem .5rem;text-decoration:none}.lang-picker a:hover,.lang-picker button:hover{color:var(--accent);background:#58a6ff14}.lang-picker .lang-active{color:var(--accent);background:#58a6ff1f;font-weight:600}.docs-nav{margin-bottom:1rem}.docs-nav a{color:var(--text-dim);font-size:.85rem;text-decoration:none}.docs-nav a:hover{color:var(--accent);text-decoration:underline}.section-nav{border-top:1px solid var(--border);justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;font-size:.9rem;display:flex}.section-nav a{color:var(--accent);text-decoration:none}.section-nav a:hover{text-decoration:underline}.section-nav .spacer{flex:1}a.doc-link{background:var(--bg-alt);border:1px solid var(--border);color:var(--text);border-radius:8px;margin:1rem 0;padding:1rem 1.2rem;text-decoration:none;display:block}a.doc-link:hover{border-color:var(--accent)}a.doc-link strong{color:var(--accent);font-size:1.05rem}a.doc-link span{color:var(--text-dim);margin-top:.3rem;font-size:.88rem;display:block}.notes-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;margin:2rem 0 1rem;padding:1.2rem 1.5rem}.notes-box h3{margin-top:0}.notes-box .note-saved{color:var(--accent-2);margin-left:.75rem;font-size:.85rem}.forbidden{color:var(--text-dim);text-align:center;padding:3rem 1.5rem}form{flex-direction:column;align-items:flex-start;gap:1rem;margin:1.5rem 0;display:flex}label{color:var(--text-dim);flex-direction:column;gap:.35rem;width:100%;max-width:320px;font-size:.9rem;display:flex}input,textarea,select{background:var(--code-bg);width:100%;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.55rem .7rem;font-family:inherit;font-size:.95rem}input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}textarea{resize:vertical;min-height:6rem}.auth-divider{color:var(--text-dim);margin:.5rem 0;font-size:.85rem}.google-signin-button{margin-bottom:1rem}.apple-signin-button{width:210px;height:40px;margin-bottom:1rem}button{background:var(--accent);color:#04121f;cursor:pointer;border:none;border-radius:6px;padding:.55rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600}button:hover{opacity:.9}button:disabled{opacity:.5;cursor:not-allowed}.password-field{gap:.5rem;width:100%;display:flex}.password-field input{flex:1;min-width:0}.password-toggle{background:var(--code-bg);color:var(--text-dim);border:1px solid var(--border);white-space:nowrap;padding:.55rem .7rem;font-size:.85rem;font-weight:400}.password-toggle:hover{opacity:1;background:var(--border);color:var(--text)}[role=alert]{color:var(--danger);font-size:.9rem}@media (max-width:640px){body{padding:1.25rem 1rem 3rem}h1{font-size:1.4rem}h1 .badge{width:fit-content;margin:.5rem 0 0;display:block}.subtitle{font-size:.92rem}h2{padding:.5rem .65rem;font-size:1.05rem}h2 .step-num{margin-right:.4rem;padding:.1rem .4rem;font-size:.72rem}h3{font-size:.98rem}p,li{font-size:.94rem}code{word-break:break-word;font-size:.8em}pre{padding:.7rem .8rem}pre code{font-size:.72rem}table{-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}table,th,td{font-size:.8rem}th,td{padding:.4rem .55rem}.mermaid{padding:.8rem}.arch-ascii pre{padding:.8rem;font-size:.65rem}.toc{padding:1rem 1.1rem}.callout{padding:.75rem .9rem}.lang-picker{font-size:.8rem}}.collection-cards{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.collection-card{background:var(--bg-alt);border:1px solid var(--border);min-width:160px;color:var(--text);border-radius:8px;padding:1.2rem;font-weight:600;text-decoration:none;display:block}.collection-card.add-card{cursor:pointer;color:var(--accent);background:0 0;border-style:dashed}.collection-detail-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin:1rem 0;display:flex}.collection-name-field{gap:.5rem;display:flex}.collection-name-field input{background:var(--code-bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.4rem .6rem}.key-signature-picker{position:relative}.circle-of-fifths-popover{z-index:10;background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;margin-top:.5rem;padding:.5rem;position:absolute;top:100%;right:0}.collection-detail-main{align-items:flex-start;gap:1.5rem;margin:1.5rem 0;display:flex}.chord-list{flex-direction:column;flex:2;gap:.5rem;display:flex}.chord-preview{flex:1}.chord-list-item{background:var(--bg-alt);border:1px solid var(--border);cursor:grab;border-radius:6px;justify-content:space-between;align-items:center;padding:.6rem .9rem;display:flex}.chord-list-item.dragging{opacity:.5}.chord-list-item-name{cursor:pointer;flex:1}.chord-play-button,.add-chord-button{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:6px;padding:.25rem .6rem}.add-chord-button{border-style:dashed;align-self:flex-start;margin-top:.25rem}.all-chords-notation{gap:1rem;padding:1rem 0;display:flex;overflow-x:auto}.all-chords-notation-item{flex-direction:column;flex-shrink:0;align-items:center;gap:.3rem;display:flex}.all-chords-notation-item span{color:var(--text-dim);font-size:.85rem}.staff-notation{background:#fff;border-radius:6px;margin:0 auto}.piano-keyboard{margin:1rem 0;position:relative}.piano-key{cursor:pointer;background:#fff;border:1px solid #444;border-radius:0 0 4px 4px;padding:0;position:absolute;top:0}.piano-key.black{background:#1a1a1a;border-color:#000}.piano-key.pressed{background:var(--accent)}.piano-key.black.pressed{background:var(--accent-2)}.piano-key:disabled{cursor:default}.circle-of-fifths{display:block}.circle-of-fifths-wedge-group{cursor:pointer}.circle-of-fifths-wedge{fill:var(--bg-alt);stroke:var(--border);stroke-width:1px}.circle-of-fifths-wedge.selected{fill:var(--accent)}.circle-of-fifths-wedge-group text{fill:var(--text);pointer-events:none;font-size:.8rem}.link-button{color:var(--accent);cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0}.chord-editor-top-row{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.chord-editor-top-row-right{align-items:center;gap:.5rem;display:flex;position:relative}.menu-backdrop{z-index:15;position:fixed;inset:0}.kebab-button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .7rem;font-size:1.1rem;line-height:1}.context-menu{background:var(--bg-alt);border:1px solid var(--border);z-index:20;border-radius:6px;min-width:130px;margin-top:.3rem;position:absolute;top:100%;right:0;overflow:hidden}.context-menu button{text-align:left;width:100%;color:var(--danger);cursor:pointer;background:0 0;border:none;padding:.55rem .9rem;font-size:.9rem;display:block}.context-menu button:hover{background:#f851491f}.chord-editor-name-row{flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem;display:flex}.chord-editor-name-row input{background:var(--code-bg);border:1px solid var(--border);color:var(--text);border-radius:6px;flex:1;max-width:300px;padding:.4rem .6rem}.recognized-chord-box{background:var(--bg-alt);border:1px solid var(--border);color:var(--text-dim);border-radius:6px;flex:1;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;display:flex}.recognized-chord-box button{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:6px;padding:.25rem .6rem}.chord-editor-piano-controls{gap:.5rem;margin:1.5rem 0 .75rem;display:flex}.piano-keyboard-fullbleed{width:100vw;position:relative;left:50%;transform:translate(-50%)}.modal-overlay{z-index:100;background:#010409b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;width:100%;max-width:400px;padding:1.5rem}.modal-box p{margin:0}.modal-buttons{justify-content:flex-end;gap:.5rem;margin-top:1.25rem;display:flex}.modal-button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:6px;padding:.4rem .9rem}.modal-button.primary{border-color:var(--accent);color:var(--accent)}.modal-button.danger{border-color:var(--danger);color:var(--danger)}.live-doc-list-page h1{margin-bottom:.5rem}.live-doc-list{flex-wrap:wrap;gap:1rem;margin:1.5rem 0;display:flex}.live-doc-card{background:var(--bg-alt);border:1px solid var(--border);min-width:160px;color:var(--text);cursor:pointer;text-align:left;font-family:inherit;font-weight:600;font-size:inherit;border-radius:8px;padding:1.2rem;text-decoration:none;display:block}.new-item-control{align-items:center;gap:.5rem;margin-top:1rem;display:flex}.new-item-control input{background:var(--code-bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.4rem .6rem}.new-item-error{color:var(--danger);font-size:.85rem}.document-editor-top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.document-editor-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.document-editor-tabs{border-bottom:1px solid var(--border);gap:.5rem;margin-bottom:1.5rem;display:flex}.document-editor-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.5rem 1rem;font-weight:600}.document-editor-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.section-list{flex-direction:column;gap:.75rem;display:flex}.section-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:.9rem 1.1rem}.section-card-header{align-items:center;gap:.6rem;display:flex}.section-chevron{color:var(--text-dim);cursor:pointer;background:0 0;border:none;width:1.2rem;padding:0;font-size:1rem}.section-title{flex:1;font-weight:600}.section-title-input{background:var(--code-bg);border:1px solid var(--border);color:var(--text);border-radius:6px;flex:1;padding:.35rem .6rem}.section-edit-buttons{gap:.4rem;display:flex}.section-edit-buttons button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:6px;padding:.25rem .55rem}.section-body{margin-top:.75rem}.section-body-editor{background:var(--code-bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;margin-top:.75rem;padding:.6rem;font-family:monospace}.add-section-button{border:1px dashed var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:6px;align-self:flex-start;padding:.5rem .9rem}.document-editor-hint{color:var(--text-dim);margin-top:.5rem;font-size:.9rem}.history-panel{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem}.history-panel-toggle{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:6px;padding:.35rem .7rem}.history-panel-content{margin-top:.75rem}.history-panel-empty{color:var(--text-dim)}