:root{--ink: #ebe3d1;--ink-2: rgba(235, 227, 209, .62);--ink-3: rgba(235, 227, 209, .32);--line: rgba(235, 227, 209, .09);--glass: rgba(24, 22, 19, .74);--ivory: #efe6d2;--jade: #7fe3c6;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--tray-h: 214px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(120% 80% at 50% 30%,#2b2723,#1b1916 55%,#11100e) fixed;color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}button:focus-visible{outline:1.5px solid var(--ivory);outline-offset:2px}.app{height:100%;height:100dvh;display:flex;flex-direction:column;position:relative}.board{flex:1;min-height:150px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}.board:active{cursor:grabbing}.board-svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.markers{animation:fadeIn .35s ease-out}.mk{transition:opacity .25s}.mk-scale{opacity:.66}.pinned{animation:fadeIn .2s}.pin-rail{fill:#161412e6;stroke:#ebe3d11f;stroke-width:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}.mk.dim{opacity:.32}.mk.on{animation:pop .28s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}@keyframes fadeIn{0%{opacity:0}}@keyframes pop{0%{transform:scale(.6)}}.topbar{position:absolute;z-index:5;top:calc(12px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none}.topbar>*{pointer-events:auto}.inst{position:relative}.inst-btn,.icon-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:20px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s}.icon-btn{width:40px;padding:0;justify-content:center}.inst-btn:hover,.icon-btn:hover,.inst-btn.on{border-color:var(--ink-3)}.caret{width:10px;height:10px;fill:none;stroke:var(--ink-2);stroke-width:1.4}.gear-icon{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round}.inst-menu{position:absolute;top:48px;left:0;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:14px;border:1px solid var(--line);background:#181613f0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 50px #00000080;animation:fadeIn .15s}.inst-item{display:flex;align-items:center;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:transparent}.inst-item:hover{background:#ffffff0d}.inst-item.on{background:#efe6d21a}.inst-item.gear{justify-content:center;border-top:1px solid var(--line);border-radius:0 0 10px 10px}.mini-neck{display:block}.tray{flex:0 0 auto;height:calc(var(--tray-h) + env(safe-area-inset-bottom));display:flex;gap:26px;align-items:stretch;padding:16px calc(20px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));background:linear-gradient(to bottom,#161412d1,#100f0deb);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.tray-key{display:flex;gap:14px;align-items:center;flex:0 0 auto}.wheel{width:128px;height:128px;flex:0 0 auto;touch-action:manipulation}.wheel-seg{fill:#ebe3d112;cursor:pointer;transition:fill .2s}.wheel-seg.top{fill:#ebe3d121}.wheel-seg:hover{fill:#ebe3d133}.wheel-seg.on{fill:var(--ivory)}.wheel-name{font-family:var(--serif);font-size:22px;fill:var(--ink);pointer-events:none}.scales{display:flex;flex-direction:column;gap:3px}.scale{display:flex;gap:2px;padding:3px 5px;border:1px solid transparent;border-radius:6px;background:transparent;transition:border-color .2s,background .2s}.scale.gap{margin-top:5px}.scale i{width:6px;height:7px;border-radius:1.5px;background:#ebe3d112}.scale i.in{opacity:.38;transition:opacity .2s}.scale:hover i.in{opacity:.7}.scale.on{border-color:var(--ink-3);background:#ffffff08}.scale.on i.in{opacity:1}.chords{display:flex;flex-direction:column;justify-content:center;gap:12px;flex:0 0 auto}.chord-row{display:grid;grid-template-columns:repeat(7,56px);gap:8px}.chord{position:relative;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--line);background:#ffffff09;font-family:var(--serif);font-size:21px;letter-spacing:.01em;touch-action:manipulation;transition:background .2s,color .2s,transform .12s,border-color .2s;animation:fadeIn .3s}.chord:after{content:"";position:absolute;left:30%;right:30%;bottom:7px;height:2px;border-radius:1px;background:var(--deg);opacity:.55}.chord .sym{white-space:nowrap}.chord small{font-size:.62em;margin-left:1px;vertical-align:.42em}.chord:hover{border-color:var(--ink-3)}.chord:active{transform:scale(.95)}.chord.on{background:var(--ivory);color:#1b1815;border-color:var(--ivory);box-shadow:0 6px 24px #efe6d229}.chord.ghost{border-style:dashed;background:transparent;animation:none}.chord.ghost:after{opacity:.15}.chords.off .chord-row{opacity:.6}.seven{align-self:flex-end;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;transition:all .25s;touch-action:manipulation}.seven svg{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}.seven:hover svg{stroke:var(--ink-2)}.seven.on{border-color:#efe6d299;box-shadow:0 0 18px #efe6d24d,inset 0 0 10px #efe6d226}.seven.on svg{stroke:var(--ivory)}.tray-fing{flex:1 1 0;min-width:0;min-height:0;display:flex}.tray-fing.empty{border-left:1px solid var(--line);opacity:.5}.ftable{flex:1;min-width:0;display:flex;gap:10px;min-height:0;border-left:1px solid var(--line);padding-left:14px;animation:fadeIn .3s}.frail{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;padding-top:2px}.frail button{width:32px;height:22px;border-radius:6px;border:1px solid transparent;background:transparent;display:grid;place-items:center;opacity:.4;transition:all .2s;touch-action:manipulation}.frail button svg{width:24px;height:12px}.frail button.on{opacity:1;border-color:var(--line);background:#ffffff0a}.frail .pencil{height:32px;margin-top:8px;opacity:.55;border-color:var(--line)}.frail .pencil svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.frail .pencil:hover{opacity:.9}.frail .pencil.on{opacity:1;background:var(--ivory);border-color:var(--ivory);box-shadow:0 0 16px #efe6d247}.frail .pencil.on svg{stroke:#1b1815}.fmain{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.fhead{padding-bottom:8px}.fcols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}.fcol-head{display:flex;justify-content:center;align-items:center;height:16px}.role-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}.region-icon{width:64px;height:8px}.ri-track{fill:#ebe3d124}.ri-on{fill:var(--ink-2)}.fbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(235,227,209,.15) transparent}.fcol{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0}.fcell{position:relative;width:100%;display:flex;justify-content:center;padding:6px 4px 4px;border-radius:9px;border:1px solid transparent;background:#ffffff05;transition:background .15s,border-color .15s;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.fcell:focus-visible{outline:1.5px solid var(--ivory);outline-offset:1px}.fcell.custom:before{content:"";position:absolute;top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:var(--ivory)}.fcell.draft{border-style:dashed;border-color:#efe6d28c}.fcell.bad,.fcell.bad.on{border-color:#ff5a4ab3;background:#ff5a4a0f}.quality{position:absolute;right:5px;top:8px;bottom:8px;width:3px;border-radius:2px;background:#ebe3d11a;overflow:hidden}.quality:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--q) * 100%);background:var(--ivory);border-radius:2px;transition:height .25s}.fcell.bad .quality:after{background:#ff5a4a}.fdel{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#2a2622;display:grid;place-items:center;padding:0;z-index:1}.fdel svg{width:10px;height:10px;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}.fdel:hover{background:#ff5a4a}.fcell:hover{background:#ffffff0f}.fcell.on{background:#efe6d214;border-color:#efe6d299}.mini-fing{display:block;overflow:visible}.mf-fret{stroke:#ebe3d138;stroke-width:.8}.mf-nut{stroke:var(--ivory);stroke-width:2}.mf-string{stroke:#ebe3d152;stroke-width:.7}.mf-inlay{fill:#ebe3d124}.mf-track{stroke:#ebe3d11a;stroke-width:2;stroke-linecap:round}.mf-where{stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;background:#08070699;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .2s}.modal{width:min(820px,100%);max-height:min(680px,calc(100dvh - 32px));display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);background:#1d1b18;box-shadow:0 30px 80px #0009;overflow:hidden}.modal header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px 22px;border-bottom:1px solid var(--line)}.modal h2{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.01em}.x{width:36px;height:36px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center}.x:hover{background:#ffffff0f}.x svg{width:18px;height:18px;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}.m-body{display:grid;grid-template-columns:240px 1fr;min-height:0;flex:1;overflow:hidden}.m-list{border-right:1px solid var(--line);padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.m-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;text-align:left;font-size:13px;color:var(--ink-2)}.m-item:hover{background:#ffffff0a}.m-item.on{background:#efe6d214;border-color:var(--line);color:var(--ink)}.m-cur{position:absolute;top:12px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--jade)}.m-list-actions{display:flex;gap:4px;margin-top:8px}.m-list-actions button,.m-link,.stepper button,.primary{border-radius:8px;border:1px solid var(--line);background:#ffffff0a;padding:7px 10px;font-size:12.5px;color:var(--ink-2)}.m-list-actions button{flex:1}.m-list-actions button:hover,.m-link:hover,.stepper button:hover{color:var(--ink);border-color:var(--ink-3)}.m-list-actions button:disabled{opacity:.35;pointer-events:none}.m-link{border:0;background:none;text-align:left;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px}.m-form{padding:18px 22px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}.field>span small{text-transform:none;letter-spacing:0}.row{display:flex;gap:18px;flex-wrap:wrap}.m-form input,.m-form select{height:38px;border-radius:8px;border:1px solid var(--line);background:#00000038;color:var(--ink);padding:0 10px;font:14px var(--sans);outline:none}.m-form input:focus,.m-form select:focus{border-color:var(--ink-3)}.m-form select{color-scheme:dark;cursor:pointer}.m-form select option{background:#1d1b18;color:var(--ink)}.m-form select option:checked{background:#3a352e;color:#fff}.stepper{display:flex;gap:4px}.stepper input{width:60px;text-align:center;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}.stepper button{width:38px;font-size:16px;padding:0}.scale-len{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.scale-len .stepper input{width:72px}.scale-len .unit{color:var(--ink-3);font-size:13px;margin-right:6px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{border-radius:16px;border:1px solid var(--line);background:#ffffff08;padding:6px 11px;font-size:12px;color:var(--ink-2)}.chips button:hover{border-color:var(--ink-3);color:var(--ink)}.chips button.on{border-color:var(--ivory);color:var(--ink)}.tuning{display:flex;gap:6px;flex-wrap:wrap}.tuning select{width:72px}.woods{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.wood{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:12px;color:var(--ink-2);text-align:left}.wood i{height:30px;border-radius:6px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #0000004d}.wood.on{border-color:var(--ivory);color:var(--ink)}.finishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}.finish{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 6px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:11.5px;color:var(--ink-2);text-align:center;cursor:pointer}.finish i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000059}.finish i.none{border:1.5px dashed var(--ink-3);box-shadow:none}.finish.on{border-color:var(--ivory);color:var(--ink)}.finish:hover{border-color:var(--ink-3)}.finish input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.primary{align-self:flex-start;background:var(--ivory);color:#1b1815;border-color:var(--ivory);padding:9px 16px;font-size:13.5px}.hint{color:var(--ink-3);font-size:12px;line-height:1.4}hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}@media (max-width: 1180px){.chord-row{grid-template-columns:repeat(7,48px);gap:6px}.chord{height:50px;font-size:18px;border-radius:12px}.tray{gap:18px}}@media (max-width: 900px) and (orientation: portrait){.board{min-height:200px}.tray{height:auto;flex-direction:column;gap:10px;padding-top:12px}.tray-key{justify-content:center;gap:14px}.wheel{width:108px;height:108px}.scale i{height:6px}.chords{flex-direction:row;align-items:center;gap:8px}.chord-row{flex:1;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.chord{height:48px;font-size:16px;border-radius:11px}.chord small{font-size:.58em}.seven{align-self:center;flex:0 0 auto}.tray-fing{flex:0 0 auto;height:31dvh;min-height:140px}.tray-fing.empty{display:none}.ftable{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:8px}.fcols{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px}.mini-fing{width:100%;max-width:96px;height:auto}}@media (max-width: 520px) and (orientation: portrait){.tray{padding-left:10px;padding-right:10px}.chord{height:46px;font-size:14.5px}.chord:after{bottom:5px}}@media (max-width: 560px){.m-body{grid-template-columns:1fr;overflow-y:auto}.m-list{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;overflow:visible}.m-item{flex:1 1 140px}.m-list-actions{flex-basis:100%}.m-form{overflow:visible}}@media (max-height: 560px) and (orientation: landscape){:root{--tray-h: 148px}.tray{gap:14px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.tray-key{gap:8px}.wheel{width:92px;height:92px}.scales{gap:1px}.scale{padding:2px 4px}.scale i{width:5px;height:5px}.scale.gap{margin-top:3px}.chords{flex-direction:row;align-items:center;gap:8px}.chord-row{grid-template-columns:repeat(4,46px);gap:5px}.chord{height:40px;font-size:15px;border-radius:10px}.chord:after{bottom:4px}.fhead{padding-bottom:4px}.fcols{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px}.mini-fing{width:100%;max-width:90px;height:auto}}.edit-veil{fill:#0c0b0a;opacity:.28;pointer-events:none}.board.editing{cursor:crosshair}.board.editing .mk-note:not(.on)>circle:last-child{stroke:#fffaf0;stroke-opacity:.85;stroke-dasharray:3 2.4;stroke-width:1.4}.board.editing .mk.dim{opacity:.6}.hand-box{fill:#efe6d20d;stroke:#efe6d280;stroke-width:1.4;stroke-dasharray:6 4;pointer-events:none;transition:stroke .2s,fill .2s}.hand-box.bad{fill:#ff5a4a1a;stroke:#ff5a4a}.custom-mark{fill:#fffaf0;stroke:#0a080699;stroke-width:1}