.builder-controls{border-block:1px solid var(--line);grid-template-columns:1.4fr 1fr;align-items:stretch;gap:1.125rem;padding:1.375rem 0;display:grid}.field{flex-direction:column;min-width:0;display:flex}.field .control{margin:0}.tuning-grid{grid-template-rows:repeat(2,2rem);grid-template-columns:minmax(0,1.2fr) minmax(5rem,.6fr) minmax(0,1fr);gap:.5rem;display:grid}.tuning-grid .control{min-width:0}.tuning-grid .preset-field{grid-column:2/4}.select-field select{min-width:0;height:100%;color:var(--ink);font:inherit;letter-spacing:0;text-transform:none;cursor:pointer;background:0 0;border:0;outline:none;flex:1;padding:0;font-size:.9375rem;font-weight:400}.select-field select:disabled{cursor:not-allowed}.inline-field:has(select:disabled){background:color-mix(in srgb, var(--surface) 92%, var(--ink))}.select-field select option{color:var(--ink);background:var(--surface)}.tuning-grid .tuning-field{grid-column:1;gap:.25rem;padding-right:.375rem}.tuning-grid .tuning-field>span{margin-right:.25rem}.octave-editor{border:1px solid var(--line);background:var(--paper);width:min(35rem,100vw - 2rem);max-height:calc(100dvh - 2rem);color:var(--ink);border-radius:.625rem;margin:auto;padding:1.375rem 1.5rem 1.125rem;overflow-y:auto;box-shadow:0 1.5rem 3.75rem #0000004d}.octave-editor::backdrop{background:#0b120e8c}.octave-editor-head{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.octave-editor-head h2{margin:0;font-size:1.375rem}.octave-editor-help{color:var(--muted);margin:.5rem 0 1rem;font-size:.875rem;line-height:1.45}.octave-board{--stop:1.875rem;touch-action:none;user-select:none;justify-content:center;gap:0;padding-bottom:.25rem;display:flex;overflow-x:auto}.octave-column{flex-direction:column;flex:0 4.25rem;align-items:center;gap:.375rem;min-width:2.75rem;display:flex}.octave-axis{flex:0 0 2.5rem;min-width:2.5rem}.octave-note{height:1.25rem;font-size:1rem;font-weight:700}.octave-track{width:100%;height:calc(var(--stops) * var(--stop));cursor:ns-resize;background:linear-gradient(to bottom, transparent calc(3 * var(--stop)), color-mix(in srgb, var(--green) 10%, transparent) calc(3 * var(--stop)) calc(4 * var(--stop)), transparent calc(4 * var(--stop))), repeating-linear-gradient(to bottom, transparent 0 calc(var(--stop) - 1px), color-mix(in srgb, var(--line) 70%, transparent) calc(var(--stop) - 1px) var(--stop));position:relative}.octave-column:not(.octave-axis) .octave-track:before{content:"";top:calc(var(--stop) / 2);bottom:calc(var(--stop) / 2);background:var(--muted);border-radius:1px;width:2px;position:absolute;left:50%;transform:translate(-50%)}.octave-axis .octave-track{cursor:default}.octave-axis-label{top:calc(var(--row) * var(--stop));height:var(--stop);color:var(--muted);font-variant-numeric:tabular-nums;place-items:center end;padding-right:.625rem;font-size:.75rem;display:grid;position:absolute;right:0}.octave-axis-label.center{color:var(--green);font-weight:800}.octave-home{left:50%;top:calc((var(--row) + .5) * var(--stop));background:var(--muted);width:1.125rem;height:2px;position:absolute;transform:translate(-50%,-50%)}.octave-ball{left:50%;top:calc((var(--row) + .5) * var(--stop));background:var(--green-dark);border:2px solid var(--paper);cursor:grab;border-radius:50%;width:1.375rem;height:1.375rem;transition:top 80ms ease-out;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px .25rem #00000040}.octave-ball.moved{background:var(--green);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--green) 30%, transparent)}.octave-ball:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (prefers-reduced-motion:reduce){.octave-ball{transition:none}}.octave-pitch{font-variant-numeric:tabular-nums;flex-direction:column;align-items:center;min-height:2.125rem;font-size:.875rem;font-weight:700;display:flex}.octave-pitch small{color:var(--muted);font-size:.6875rem;font-weight:400}.octave-editor-foot .text-button:disabled{opacity:.4;cursor:not-allowed}.octave-editor-foot{justify-content:space-between;align-items:center;gap:.75rem;margin-top:.875rem;display:flex}.octave-done{border:1px solid var(--green-dark);background:var(--green-dark);min-height:1.75rem;color:var(--on-green);cursor:pointer;border-radius:.25rem;padding:0 1.125rem;font-size:.875rem;font-weight:700}.octave-done:hover{background:var(--green);border-color:var(--green)}@container page (width<=26.25rem){.octave-editor{padding:1.125rem .875rem .875rem}.octave-board{--stop:1.625rem}.octave-column{min-width:2.25rem}.octave-axis{flex-basis:2.125rem;min-width:2.125rem}.octave-axis-label{padding-right:.5rem}}.field-icon{width:1.75rem;height:1.75rem;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:.25rem;flex-shrink:0;place-items:center;padding:0;display:inline-grid}.field-icon:hover:not(:disabled),.field-icon:focus-visible{background:color-mix(in srgb, var(--surface) 85%, var(--ink));color:var(--ink)}.field-icon:disabled{opacity:.35;cursor:not-allowed}.field-icon[hidden]{display:none}.capo-input{flex:1;align-items:center;min-width:0;display:flex;position:relative}.capo-input .field-icon{width:1.5rem;height:1.5rem;position:absolute;top:50%;right:1.25rem;transform:translateY(-50%)}.capo-stepper{display:none}.capo-stepper button{width:1.375rem;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:.1875rem;flex:1;place-items:center;padding:0;display:grid}.capo-stepper button:hover:not(:disabled){background:color-mix(in srgb, var(--surface) 85%, var(--ink));color:var(--ink)}.capo-stepper button:disabled{opacity:.35;cursor:not-allowed}.inline-field{border:1px solid var(--line);background:var(--surface);min-height:2rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;border-radius:.25rem;align-items:center;gap:.5rem;min-width:0;padding:0 .625rem;font-size:.6875rem;font-weight:800;display:flex}.inline-field input{width:100%;min-width:0;color:var(--ink);font:inherit;letter-spacing:0;text-transform:none;background:0 0;border:0;outline:none;flex:1;padding:0;font-size:.9375rem;font-weight:400}.inline-field{overflow:hidden}.select-field select{text-overflow:ellipsis}.inline-field:focus-within{border-color:var(--green);box-shadow:0 0 0 2px #28664e22}.inline-field:has(input:disabled),.inline-field:has(input[readonly]){background:color-mix(in srgb, var(--surface) 92%, var(--ink))}.inline-field input:disabled,.inline-field input[readonly]{color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1}.chords-field textarea{resize:none;overflow-wrap:anywhere;height:7.25rem;min-height:7.25rem;padding-right:2.5rem;line-height:1.5}.song-input{position:relative}.song-title-row{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.song-title-row .song-title-field{flex:1}.song-store{display:flex;position:relative}.song-store-save{border:1px solid var(--green-dark);background:var(--green-dark);min-height:1.75rem;color:var(--on-green);border-radius:.25rem 0 0 .25rem;align-items:center;gap:.4375rem;padding:0 .875rem;font-size:.8125rem;font-weight:700;display:inline-flex}.song-store-save:hover:not(:disabled){background:var(--green);border-color:var(--green)}.song-store-save:disabled{opacity:.5;cursor:not-allowed}.song-store-save.unsaved:not(:disabled) svg{color:var(--unsaved-icon);transform-origin:50%;animation:3.5s ease-in-out infinite save-shake}@keyframes save-shake{0%,84%,to{transform:none}86%{transform:rotate(-14deg)}89%{transform:rotate(12deg)}92%{transform:rotate(-9deg)}95%{transform:rotate(6deg)}98%{transform:rotate(-2deg)}}@media (prefers-reduced-motion:reduce){.song-store-save.unsaved svg{animation:none}}.song-store-more>summary{border:1px solid var(--green-dark);border-left-color:color-mix(in srgb, var(--on-green) 35%, var(--green-dark));background:var(--green-dark);width:2.125rem;height:1.75rem;color:var(--on-green);cursor:pointer;border-radius:0 .25rem .25rem 0;place-items:center;list-style:none;display:grid}.song-store-more>summary::-webkit-details-marker{display:none}.song-store-more>summary:hover{background:var(--green)}.song-store-menu{z-index:30;border-radius:.25rem;position:absolute;top:calc(100% + .25rem);right:0;box-shadow:0 .625rem 1.5rem #0000002e}.song-store-menu button{border:1px solid var(--green-dark);background:var(--green-dark);min-height:1.75rem;color:var(--on-green);white-space:nowrap;border-radius:.25rem;align-items:center;gap:.4375rem;padding:0 .875rem;font-size:.8125rem;font-weight:700;display:inline-flex}.song-store-menu button:hover,.song-store-menu button:focus-visible{background:var(--green);border-color:var(--green);outline:none}.song-store-status{min-height:1.125rem;color:var(--muted);margin:-2px 0 .375rem;font-size:.75rem}.song-store-status[data-tone=dirty]{color:var(--coral)}.song-store-status[data-tone=saved]{color:var(--green)}.song-store-status:empty{min-height:0;margin:0}.shared-song{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.375rem .625rem;margin:0 0 .5rem;font-size:.8125rem;display:flex}.shared-song[hidden]{display:none}.shared-song>svg{color:var(--green);flex-shrink:0}.shared-song-copy{border:1px solid var(--green-dark);background:var(--green-dark);min-height:1.5625rem;color:var(--on-green);border-radius:.25rem;align-items:center;gap:.375rem;padding:0 .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.shared-song-copy:hover:not(:disabled){background:var(--green);border-color:var(--green)}main[data-read-only] .suggest-tools,main[data-read-only] .song-store,main[data-read-only] .song-revert,main[data-read-only] .song-visibility{display:none}main[data-read-only] .chords-field textarea:disabled,main[data-read-only] .song-title-field input:disabled{background:color-mix(in srgb, var(--surface) 92%, var(--ink));color:var(--ink);cursor:default}main[data-read-only] .voicing-choice:disabled{cursor:default}.song-visibility[aria-pressed=true] .when-private,.song-visibility:not([aria-pressed=true]) .when-public,main[data-signed-out] .song-visibility{display:none}.songs-link{color:var(--green);background:0 0;border:0;order:1;align-items:center;gap:.3125rem;margin-left:auto;padding:0;font-size:.75rem;font-weight:800;display:inline-flex}.songs-link:hover{text-decoration:underline}main[data-signed-out] .song-store,main[data-signed-out] .songs-link:not(.song-example),main:not([data-signed-out]) .song-example{display:none}.song-example:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}.song-revert{border-radius:.25rem;padding:2px}.song-revert+.songs-link{margin-left:.75rem}.songs-link.song-new{border-radius:.25rem;margin-left:.375rem;padding:2px}.songs-link.song-new:hover{background:color-mix(in srgb, var(--surface) 85%, var(--ink));text-decoration:none}.song-revert:disabled{color:var(--muted);opacity:.4;cursor:not-allowed}.song-revert:hover:not(:disabled){background:color-mix(in srgb, var(--surface) 85%, var(--ink));text-decoration:none}.intro-aside{justify-items:start;gap:.5rem;display:grid}main[data-mode=chord] .chords-field,main[data-mode=chord] .chart-toolbar,main[data-mode=chord] .song-chart:not(:has(.empty-builder)){display:none}main[data-mode=chord] .song-chart{padding-bottom:1.5rem}.chord-heading h1{align-items:center;height:calc(1em + 2px);display:flex}.chord-name,.chord-name-input{box-sizing:border-box;height:100%;line-height:1}.chord-name{color:inherit;font:inherit;letter-spacing:inherit;cursor:text;background:0 0;border:1px dashed #0000;border-radius:.375rem;align-items:center;gap:.625rem;margin-left:-.375rem;padding:0 .375rem;display:inline-flex}.chord-name svg{color:var(--muted);opacity:.6;transition:opacity .12s}.chord-name:hover,.chord-name:focus-visible{border-color:var(--line);outline:none}.chord-name:hover svg,.chord-name:focus-visible svg{opacity:1;color:var(--green)}.chord-name-input{border:1px solid var(--green);background:var(--surface);width:7.5ch;max-width:100%;color:var(--ink);font:inherit;letter-spacing:inherit;border-radius:.375rem;outline:none;margin-left:-.375rem;padding:0 .375rem;box-shadow:0 0 0 2px #28664e22}.chord-name[hidden],.chord-name-input[hidden]{display:none}.library-link{color:var(--green);margin-bottom:.25rem;font-size:.8125rem;font-weight:700;display:inline-block}.library-link:before{content:"← "}.library-link:hover{text-decoration:underline}.chord-name-help{color:var(--muted);margin:.375rem 0 0;font-size:.8125rem}.chord-heading .field-error{margin-top:.25rem}.make-song{border:1px solid var(--line);background:var(--surface);border-radius:.375rem;justify-content:center;align-self:end;gap:.5rem;height:4.5rem;padding:0 1rem}@container page (width<=45rem){.make-song{align-self:stretch;height:auto;padding:.75rem .875rem}}.make-song p{color:var(--muted);margin:0;font-size:.875rem;line-height:1.5}.make-song-link{background:var(--green-dark);min-height:1.75rem;color:var(--on-green);border-radius:.25rem;align-self:flex-start;align-items:center;gap:.5rem;margin-top:2px;padding:0 .875rem;font-size:.8125rem;font-weight:700;text-decoration:none;display:inline-flex}.make-song-link:hover,.make-song-link:focus-visible{background:var(--green)}.chords-field textarea.invalid,.chords-field textarea.invalid:focus{border-color:var(--coral);box-shadow:0 0 0 2px color-mix(in srgb, var(--coral) 25%, transparent)}.field-error{color:var(--coral);margin:.375rem 0 0;font-size:.7812rem;font-weight:600}.field-error:before{content:"⚠ "}.song-input>.field-icon{position:absolute;top:.5rem;right:.5rem}.transpose-chords{flex-direction:column;gap:2px;display:flex;position:absolute;bottom:.5rem;right:.5rem}.transpose-chords .field-icon{font-size:1.125rem;line-height:1}.chart-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 0 .75rem;display:flex}.toolbar-left{flex-wrap:wrap;align-items:center;gap:.875rem 1.125rem;display:flex}.play-tools{align-items:center;gap:.75rem;display:flex;position:relative}.diagram-tools+.play-tools{margin-left:1.375rem}.play-button{border:1px solid var(--green-dark);background:var(--green-dark);min-height:1.75rem;color:var(--on-green);border-radius:.25rem;align-items:center;gap:.5rem;padding:0 1rem;font-size:.8125rem;font-weight:700;display:inline-flex}.play-button:disabled{opacity:.45;cursor:not-allowed}.play-icon{display:inline-flex}.play-settings summary{border:1px solid var(--line);background:var(--surface);width:1.75rem;height:1.75rem;color:var(--ink);cursor:pointer;border-radius:.25rem;place-items:center;list-style:none;display:inline-grid}.play-settings summary:hover,.play-settings[open] summary{border-color:var(--ink)}.play-settings summary::-webkit-details-marker{display:none}.play-panel{z-index:70;border:1px solid var(--line);background:var(--surface);border-radius:.5rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:min(24rem,100vw - 1.75rem);padding:2.125rem .875rem .875rem;display:grid;position:absolute;top:calc(100% + .375rem);left:0;box-shadow:0 .875rem 2.5rem #0005}.panel-close{width:1.625rem;height:1.625rem;position:absolute;top:.25rem;right:.25rem}.panel-backdrop{z-index:65;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;position:fixed;inset:0}.panel-backdrop[hidden],details:not([open])>.play-panel{display:none}.play-panel label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;gap:.3125rem;font-size:.6875rem;font-weight:800;display:grid}.play-panel .volume-field{grid-column:1/-1}.unit-field{display:block;position:relative}.unit-field .control{padding-right:3rem}.unit{color:var(--muted);letter-spacing:0;text-transform:none;pointer-events:none;font-size:.8125rem;font-weight:700;position:absolute;top:50%;right:1.75rem;transform:translateY(-50%)}.field-stepper{flex-direction:column;width:1.375rem;display:flex;position:absolute;top:2px;bottom:2px;right:2px}.field-stepper button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:.1875rem;flex:1;place-items:center;padding:0;display:grid}.field-stepper button:hover{background:color-mix(in srgb, var(--surface) 85%, var(--ink));color:var(--ink)}.diagram-tools,.display-tools{align-items:center;gap:.5rem;display:flex}.display-settings{position:relative}.display-panel{grid-template-columns:max-content;gap:.625rem;width:max-content;left:0}.display-panel .display-size-toggle{justify-self:start;margin-bottom:.25rem}.display-panel-head{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:800;display:flex}.display-panel-head output{color:var(--ink);letter-spacing:0;font-size:.8125rem}.display-panel-head>span{align-items:center;gap:.5rem;display:inline-flex}.display-panel .info-pop{width:15rem}.columns-picker{gap:.25rem;display:flex}.column-box{border:1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);cursor:pointer;background:0 0;border-radius:.1875rem;width:1.375rem;height:1.875rem;padding:0;transition:background 80ms,border-color 80ms}.column-box.filled{background:var(--green-dark);border-color:var(--green-dark)}.column-box:focus-visible{outline:2px solid var(--green);outline-offset:2px}.diagram-settings{position:relative}.diagram-panel{grid-template-columns:minmax(0,1fr);width:16.25rem;max-width:calc(100vw - 2rem);left:0}.diagram-panel .check-option{display:inline-flex}.diagram-frets-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.diagram-frets-row .label-row{margin-bottom:0}.diagram-frets-row .control{flex-shrink:0;width:4.5rem;padding-inline:.5rem}.diagram-panel .display-numbers-row{margin-bottom:0}.root-mark-row{align-items:center;gap:.625rem;display:flex}.root-mark-row .label-row{margin-bottom:0}.root-mark-label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;font-weight:800}.root-mark-toggle{border:1px solid var(--line);background:var(--surface);border-radius:.25rem;padding:2px;display:inline-flex}.root-mark-toggle label{min-width:2.125rem;height:1.625rem;color:var(--muted);cursor:pointer;border-radius:.1875rem;place-items:center;font-size:.8125rem;font-weight:800;display:grid;position:relative}.root-mark-toggle input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.root-mark-toggle label:has(input:checked){background:var(--green-dark);color:var(--on-green)}.root-mark-toggle label:has(input:focus-visible){outline:2px solid var(--green);outline-offset:1px}.diagram-panel .info-pop{width:14.375rem;left:auto;right:-.375rem}.volume-field span{justify-content:space-between;display:flex}.volume-field input{width:100%;min-height:1.75rem;accent-color:var(--green);margin:0}.suggest-tools{align-items:center;gap:.5rem;display:flex;position:relative}.suggest-settings{position:relative}.suggest-panel{grid-template-columns:minmax(0,1fr);gap:.625rem;width:16.875rem;max-width:calc(100vw - 2rem);left:0}.suggest-panel .label-row{justify-content:space-between;margin-bottom:0}.suggest-panel .check-option{display:inline-flex}.suggest-panel .info-pop{width:14.375rem;left:auto;right:-.375rem}.suggest-nav{align-items:center;gap:.375rem;display:flex}.suggest-nav[hidden]{display:none}.suggest-nav .icon-action{width:1.75rem;height:1.75rem}.suggest-nav .suggest-accept{--accept:#4ade80;--accept-ink:#0b1a12;background:var(--accept);border-color:var(--accept);color:var(--accept-ink)}.suggest-nav .suggest-accept:hover:not(:disabled){border-color:var(--accept-ink)}.suggest-nav .suggest-cancel{--cancel:#fde4e1;--cancel-line:#f1b3a9;--cancel-ink:#b3261e;background:var(--cancel);border-color:var(--cancel-line);color:var(--cancel-ink)}.suggest-nav .suggest-cancel:hover:not(:disabled){border-color:var(--cancel-ink)}:root[data-theme=dark] .suggest-nav .suggest-cancel{--cancel:#3b1f1b;--cancel-line:#6e3229;--cancel-ink:#ff9d8c}.suggest-info{color:var(--muted);white-space:nowrap;font-size:.75rem;font-weight:700}.suggest-button.busy,.suggest-button.busy:disabled,.suggest-nav .icon-action.busy:disabled{opacity:1;cursor:progress}.icon-action.busy svg{animation:.9s linear infinite suggest-spin}@keyframes suggest-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.icon-action.busy svg{animation-duration:3s}}.chords-field textarea:disabled{background:color-mix(in srgb, var(--surface) 92%, var(--ink));color:var(--ink);cursor:not-allowed}.voicing-choice:disabled{cursor:not-allowed}.chord-card.suggested .chord-title{outline:2px dashed var(--green);outline-offset:2px}.export-tools{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.875rem;margin-left:auto;display:flex}.export-menu{display:inline-flex;position:relative}.export-pop{z-index:60;opacity:0;visibility:hidden;padding-top:.375rem;transition:opacity .12s,visibility .12s;position:absolute;top:100%;right:0}.export-menu:hover .export-pop,.export-menu:focus-within .export-pop,.export-menu.open .export-pop{opacity:1;visibility:visible}.export-menu.dismissed .export-pop{opacity:0;visibility:hidden;transition:none}.export-menu:has(>.icon-action:disabled) .export-pop{display:none}.export-list{border:1px solid var(--line);background:var(--surface);border-radius:.375rem;flex-direction:column;gap:2px;padding:.25rem;display:flex;box-shadow:0 .625rem 1.5rem #0000002e}.export-option{min-width:5.25rem;color:var(--ink);letter-spacing:.02em;cursor:pointer;background:0 0;border:0;border-radius:.25rem;align-items:center;gap:.5rem;padding:.4375rem .625rem;font-size:.75rem;font-weight:800;display:flex}.export-option:hover,.export-option:focus-visible{background:color-mix(in srgb, var(--surface) 85%, var(--ink))}html[data-export-format=svg] .export-option[data-format=svg],html[data-export-format=png] .export-option[data-format=png],html[data-export-format=jpg] .export-option[data-format=jpg],html[data-export-format=txt] .export-option[data-format=txt]{background:var(--green-dark);color:var(--on-green)}.link-option{white-space:nowrap}.link-option.active{background:var(--green-dark);color:var(--on-green)}.link-option:disabled{opacity:.45;cursor:not-allowed;color:var(--ink);background:0 0}.copy-pop .export-option,.voicing-actions .export-option,.shape-actions .export-option{justify-content:center;min-width:3.25rem;padding:.3125rem .5rem;font-size:.6875rem}.copy-pop:has(.export-menu:hover,.export-menu:focus-within,.export-menu.open){z-index:55}.voicing-item:has(.export-menu:hover,.export-menu:focus-within,.export-menu.open){z-index:2}.number-field{color:var(--ink);align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;display:inline-flex}.number-field .control,.display-tools .control{width:3.4rem;min-height:1.75rem;padding:.125rem .375rem .125rem .625rem}.toggle-button{border:1px solid var(--line);background:var(--surface);min-height:1.75rem;color:var(--ink);border-radius:.25rem;align-items:center;gap:.4375rem;padding:0 .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.toggle-button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.check-option{color:var(--ink);cursor:pointer;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;display:inline-flex}.check-option input{width:1rem;height:1rem;accent-color:var(--green)}.song-chart{--chart-gap:.5rem;grid-template-columns:repeat(var(--diagram-columns,6), minmax(0, 1fr));gap:var(--chart-gap);border-top:1px solid var(--line);padding-top:1rem;padding-bottom:9.375rem;display:grid}.song-section{color:var(--ink);overflow-wrap:anywhere;margin:0;padding:1.25rem .5rem .5rem;font-size:1.125rem;font-weight:700;line-height:1.4}.chord-card{text-align:center;min-width:0;padding:.25rem .1875rem .3125rem;position:relative;container-type:inline-size}.chord-card:hover,.chord-card:focus-within,.chord-card.open{z-index:40}.chart-backdrop{z-index:30;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;position:fixed;inset:0}.chord-card.playing .chord-title{outline:.1875rem solid var(--green);outline-offset:2px}.chord-card-head{justify-content:center;margin-bottom:.3125rem;display:flex}.chord-title-wrap{display:inline-flex;position:relative}.icon-action.pin-chord{width:1.625rem;height:1.625rem;color:var(--muted);position:absolute;top:50%;left:calc(100% + .75rem);transform:translateY(-50%)}.icon-action.pin-chord:hover{color:var(--ink)}.icon-action.pin-chord{--pin-on:#4ade80;--pin-on-ink:#0b1a12}.icon-action.pin-chord svg{transition:transform .12s}.icon-action.pin-chord[aria-pressed=true]{background:var(--pin-on);border-color:var(--pin-on);color:var(--pin-on-ink)}.icon-action.pin-chord[aria-pressed=true]:hover{color:var(--pin-on-ink)}.icon-action.pin-chord[aria-pressed=true] svg{transform:rotate(45deg)}.chord-card.pinned .chord-title{outline:2px solid var(--green-dark);outline-offset:2px}.chord-title{--s:var(--display-scale,1);min-width:calc(3.25rem * var(--s));min-height:calc(2.125rem * var(--s));padding:calc(.25rem * var(--s)) calc(.4375rem * var(--s));background:var(--ink);color:var(--paper);font:600 calc(1.25rem * var(--s))/1 var(--font-body);border-radius:.25rem;justify-content:center;align-items:center;display:inline-flex}.diagram-hover{--diagram-radius:.375rem;border-radius:var(--diagram-radius);outline:none;position:relative}.diagram-hover:focus-visible{outline:2px solid var(--green);outline-offset:2px}.main-diagram-wrap{border-radius:var(--diagram-radius);width:100%;line-height:0;overflow:hidden}.main-diagram{aspect-ratio:2/3;width:100%;height:auto;display:block}.copy-pop,.voicing-pop{opacity:0;visibility:hidden;z-index:50;transition:opacity .12s;position:absolute}.voicing-pop{display:none}.diagram-hover.open .copy-pop,.diagram-hover:focus-within .copy-pop{opacity:1;visibility:visible}.diagram-hover.open.options .voicing-pop,.diagram-hover:focus-within .voicing-pop{opacity:1;visibility:visible;display:block}@media (hover:hover){.diagram-hover:hover .copy-pop{opacity:1;visibility:visible}.diagram-hover:hover .voicing-pop{opacity:1;visibility:visible;display:block}}.diagram-hover.hover-off .voicing-pop{display:none}@starting-style{.diagram-hover.open.options .voicing-pop,.diagram-hover:hover .voicing-pop,.diagram-hover:focus-within .voicing-pop{opacity:0}}.copy-pop{border:1px solid var(--line);background:var(--surface);border-radius:.375rem;padding:.25rem;top:.375rem;right:.375rem;box-shadow:0 .375rem 1.125rem #0004}.icon-action{border:1px solid var(--line);background:var(--surface);width:2rem;height:1.5625rem;color:var(--ink);border-radius:.25rem;place-items:center;display:inline-grid}.icon-action:hover:not(:disabled){border-color:var(--ink)}.icon-action:disabled{opacity:.4;cursor:not-allowed}.icon-action[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.copy-pop{gap:2px;display:flex}.copy-pop .icon-action{border:0;width:1.75rem;height:1.625rem}.voicing-pop{min-width:100%;padding-top:.5625rem;top:calc(100% - 1px);left:0}.voicing-grid{--voicing-gap:1rem;grid-template-columns:repeat(var(--voicing-columns,1), var(--voicing-width,100cqw));gap:var(--voicing-gap);border:1px solid color-mix(in srgb, var(--paper) 40%, var(--green));background:color-mix(in srgb, var(--paper) 65%, var(--green));border-radius:.5rem;justify-content:start;padding:.75rem;display:grid;box-shadow:0 .875rem 2.5rem #0005}.voicing-item{width:var(--voicing-width,100cqw);position:relative}.voicing-actions{border:1px solid var(--line);background:var(--surface);opacity:0;visibility:hidden;border-radius:.375rem;gap:2px;padding:.25rem;transition:opacity .12s;display:flex;position:absolute;top:.375rem;right:.375rem;box-shadow:0 .375rem 1.125rem #0004}.voicing-actions .icon-action{border:0;width:1.75rem;height:1.625rem}.voicing-item:hover .voicing-actions,.voicing-item:focus-within .voicing-actions{opacity:1;visibility:visible}.voicing-item.playing .voicing-choice{outline:2px solid var(--green);outline-offset:1px}.voicing-choice{width:var(--voicing-width,100cqw);border-radius:var(--diagram-radius);box-shadow:0 0 0 1px var(--line);cursor:pointer;background:0 0;border:0;padding:0;line-height:0;overflow:hidden}.voicing-choice:hover,.voicing-choice:focus-visible{outline:2px solid var(--green);outline-offset:1px}.voicing-item.current .voicing-choice{box-shadow:0 0 0 .5625rem #fc0}.voicing-choice svg{aspect-ratio:2/3;width:100%;height:auto;display:block}.song-chart:has(>.empty-builder){grid-template-columns:minmax(0,1fr)}.empty-builder{text-align:center;min-height:16.875rem;color:var(--muted);grid-column:1/-1;place-content:center;justify-items:center;display:grid}.empty-builder span{color:var(--green);font-size:4rem}.empty-builder p{max-width:23.75rem;margin:.25rem 0;font-size:.8125rem}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visually-hidden.error{clip:auto;width:auto;height:auto;color:var(--coral);margin:.5rem 0;position:static}@container page (width<=45rem){.tuning-grid .select-field>span,.tuning-grid .tuning-field>span,.tuning-grid .nut-field>span{display:none}.tuning-grid{grid-template-columns:minmax(0,1.1fr) 6.75rem minmax(0,1fr)}.capo-input{align-self:stretch}.capo-input input{-moz-appearance:textfield;appearance:textfield}.capo-input input::-webkit-inner-spin-button,.capo-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.capo-input .field-icon{display:none}.capo-stepper{flex-direction:column;flex-shrink:0;margin-right:-.25rem;padding-block:2px;display:flex}}@container page (width<=23.75rem){.tuning-grid .tuning-field{gap:0;padding-right:2px}.tuning-grid .tuning-field .field-icon{width:1.5rem}}@container page (width<=45rem){.song-chart{--chart-gap:.5rem}.chord-card{padding-inline:0}.builder-controls{grid-template-columns:1fr}.page-intro{gap:.375rem;padding:.875rem 0 .625rem}.intro-aside p,.chord-name-help{display:none}.page-intro h1{margin-top:0;font-size:2rem}.intro-aside{gap:0}.builder-controls{gap:.625rem;padding:.75rem 0}.label-row{margin-bottom:.25rem}.tuning-grid{grid-template-rows:repeat(2,1.6875rem);gap:.375rem}.inline-field{min-height:1.6875rem}.inline-field input,.select-field select{font-size:.875rem}.song-title-row{margin-bottom:.375rem}.song-store-save,.song-store-more>summary{height:1.6875rem;min-height:1.6875rem}.chords-field textarea{height:5.125rem;min-height:5.125rem;padding-block:.1875rem;line-height:1.4}.song-input>.field-icon{top:.25rem}.transpose-chords{bottom:.25rem}.song-store-status:not(:empty){margin-bottom:2px}.chart-toolbar{padding:.625rem 0 .5rem}.play-button,.toggle-button{min-height:1.625rem}.play-settings summary,.suggest-nav .icon-action{width:1.625rem;height:1.625rem}.number-field .control,.display-tools .control{min-height:1.625rem}.export-option{padding-block:.5625rem}.export-tools .export-pop{left:0;right:auto}.song-chart{padding-top:.625rem}.chart-toolbar{justify-content:flex-start;align-items:center;gap:.5rem;position:relative}.play-button{padding:0 .75rem}.play-tools{gap:.5rem}.suggest-tools{gap:.375rem}.chart-toolbar .icon-action{width:1.75rem}.toolbar-left,.export-tools{display:contents}.play-tools,.suggest-tools,.display-settings{position:static}.display-panel{max-width:calc(100vw - 1.75rem)}.columns-picker{gap:.1875rem}.column-box{width:1.25rem}.diagram-tools+.play-tools{margin-left:0}}@container page (width<=26.25rem){.song-chart{--chart-gap:.5rem}.tuning-grid{grid-template-columns:minmax(0,1.1fr) 6.25rem minmax(0,1fr);gap:.5rem .3125rem}.tuning-grid .control{padding-inline:.3125rem}.inline-field{gap:.25rem;padding-inline:.3125rem}}