.chord{display:inline-block;display:flex;flex-direction:column;align-items:center;--line-color:var(--color-text);--finger-color:var(--primary)}.chord h1{padding:0;margin:0;font-size:1em;font-weight:400;text-align:center}.chord svg{width:120px;height:120px;overflow:visible}.chord .fret,.chord .nut,.chord .string{fill:var(--line-color)}.chord .finger,.chord .fret-num{fill:var(--finger-color)}.chord .fret-num{font-size:.9em;font-weight:700;color:var(--finger-color)}.chord text.finger{font-size:3em}.chord path.mute{stroke-width:2;stroke:var(--finger-color)}.chord-input.chord-input{padding:20px 0 10px;--font-size:0.9rem}.floating-input{position:relative;width:100%;box-shadow:0 0 0 1px var(--neutral);border-radius:var(--radius)}.floating-input:focus-within{box-shadow:0 0 0 2px var(--primary)}.floating-input label{position:absolute;top:0;bottom:0;left:8px;height:1rem;margin:auto 0;padding:0 5px;font-size:var(--font-size);line-height:var(--font-size);color:var(--color-text);opacity:.6;transition:transform .3s;pointer-events:none}.floating-input input,.floating-input input:focus{position:relative;width:100%;padding:12px;font-size:var(--font-size);background:none;border:none;outline:none;line-height:1.5;color:var(--color-text)}.floating-input input:not(:placeholder-shown)+label{background:var(--color-background);bottom:auto;margin:0;opacity:1;color:var(--neutral);font-size:calc(var(--font-size) - .2rem);transform:translateY(-50%)}.floating-input:focus-within input:not(:placeholder-shown)+label{font-weight:700;color:var(--primary)}.icon{display:block;margin:0 auto}.toggle-group{display:inline-flex;align-content:center;justify-content:center}.toggle-group label{align-items:center;display:inline-flex;padding:6px 12px;border:1px solid var(--primary);text-transform:uppercase;font-size:.9rem}.toggle-group label:first-child{border-radius:var(--radius) 0 0 var(--radius)}.toggle-group label:last-child{border-radius:0 var(--radius) var(--radius) 0}.instrument-input{padding:15px 0 0;justify-content:center}.app-body{position:relative;display:flex;flex-direction:column;margin:0 auto;max-width:1000px;width:calc(100% - 20px);min-height:100%}.app-header-wrap{flex-grow:0;background-color:var(--color-background)}.app-body-wrap{--gap:10px;flex-grow:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-template-rows:repeat(auto-fill,calc(120px + 1em + var(--gap)));grid-gap:var(--gap);column-gap:var(--gap);row-gap:var(--gap)}.app-body-wrap.empty{display:flex;justify-content:center;align-content:center;flex-direction:column;flex-grow:1}footer{flex-grow:0;padding:16px 0 4px;text-align:center;font-size:.9em;background-color:var(--color-background)}:root{--color-off-white:#efefef;--color-off-black:#121212;--color-gray:grey;--color-purple:#360936;--color-purple-2:#864886;--color-background:var(--color-off-white);--color-text:var(--color-off-black);--color-link:var(--color-text);--primary:var(--color-purple-2);--secondary:var(--color-gray);--neutral:var(--color-gray);--font-family:"Noto Sans",sans-serif;--radius:4px;--icon-opacity:0.7}@media (prefers-color-scheme:dark){:root{--color-background:var(--color-off-black);--color-text:var(--color-off-white);--primary:#be94be;--icon-opacity:0.9}}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:swap;src:local("Noto Sans"),local("NotoSans"),url(https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:swap;src:local("Noto Sans"),local("NotoSans"),url(https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}*{box-sizing:border-box}.clear{clear:both}img{height:auto}embed,iframe,img,object,svg,video{max-width:100%}body,html{position:relative;height:100%;background:var(--color-background);color:var(--color-text);font-size:16px;line-height:1.5;padding:0;margin:0}body,html,input{font-family:var(--font-family)}#root{position:relative;height:100%}a{border-bottom:1px solid;color:var(--color-link);outline:none;text-decoration:none;transition:background .15s,border-color .25s,color .25s,opacity .25s}p:first-child{margin-top:0}p:last-child{margin-bottom:0}svg{fill:currentColor}