body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{--main-bg: #fff;--text: #000;--cell-bg: #eee;--cell-bg-oct-odd: #e0e0e0;--cell-bg-oct-even: #efefef;--cell-border-top: 1px solid var(--cell-bg);--cell-border-right: 1px solid #aaa;--cell-border-left: 1px solid var(--cell-bg);--cell-border-bottom: 1px solid #aaa;--cell-inner-shadow: inset 0 0 20px #fff;--cell-hover-bg: #000;--cell-hover-text: #ddd;--cell-played-bg: orange;--cell-played-hover-bg: #ff44af;--cell-played-text: #333;--cell-played-hover-text: #333;--piano-white-key-hover-bg: var(--cell-hover-bg);--piano-black-key-hover-bg: var(--cell-hover-bg);--piano-white-key-hover-text: var(--cell-hover-text);--piano-black-key-hover-text: var(--cell-hover-text);--diatonic-chord-selected-bg: #0071fb;--diatonic-chord-selected-text: #fff;--music-scale-chord-hover-bg: lightblue;--music-scale-chord-border-color: #777;--music-scale-chord-on-border-color: #777;--music-group-bg: #eef4ff;--music-chord-voicing-name-border: 1px solid #777;--voicings-bg: lightblue;--voicing-name-border: 1px solid #777;--minishape-cell-default-bg: #f0f0f0;--minishape-cell-default-color: #fff;--minishape-hover-bg: #eef4ff;--minishape-cell-border-color: #777;--minishape-cell-on-bg: #909090;--minishape-cell-root-bg: #f0f0f0;--minishape-cell-root-on-bg: #afafaf;--minishape-cell-selected-border: #000;--COLOR_OFF: inherit;--COLOR_RED: red;--COLOR_YELLOW: yellow;--COLOR_GREEN: green;--COLOR_CYAN: cyan;--COLOR_BLUE: blue;--COLOR_MAGENTA: magenta;--COLOR_BLACK: black;--COLOR_WHITE: white;--COLOR_ORANGE: orange;--COLOR_LIME: lime;--COLOR_PINK: pink;--interval-0-bg: blue;--interval-1-bg: #f8d568;--interval-2-bg: orange;--interval-3-bg: #ff4500;--interval-4-bg: red;--interval-5-bg: #8a2be2;--interval-6-bg: violet;--interval-7-bg: #c71585;--interval-8-bg: #9acd32;--interval-9-bg: #0d98ba;--interval-10-bg: green;--interval-11-bg: lightgreen;--interval-0-text: #fff;--interval-1-text: #000;--interval-2-text: #000;--interval-3-text: #000;--interval-4-text: #000;--interval-5-text: #fff;--interval-6-text: #000;--interval-7-text: #fff;--interval-8-text: #000;--interval-9-text: #fff;--interval-10-text: #fff;--interval-11-text: #000}@media screen{html[data-theme=night]{--main-bg: #111;--text: #fff;--cell-bg: #333333;--cell-border-top: 1px solid var(--cell-bg);--cell-border-right: 1px solid var(--cell-bg);--cell-border-left: 1px solid var(--cell-bg);--cell-border-bottom: 1px solid var(--cell-bg);--cell-inner-shadow: inset 0 0 20px #000;--cell-hover-bg: lightyellow;--cell-played-bg: orange;--cell-played-hover-bg: yellow;--cell-hover-text: #333;--cell-played-text: #333;--cell-played-hover-text: #333;--music-scale-chord-hover-bg: lightyellow;--music-scale-chord-border-color: #777;--music-scale-chord-on-border-color: #777;--music-group-bg: #2a0079;--music-chord-voicing-name-border: 1px solid #777;--voicings-bg: #2a0079;--voicing-name-border: 1px solid #777;--minishape-hover-bg: #eef4ff;--minishape-cell-border-color: #777;--minishape-cell-on-bg: #afafaf;--minishape-cell-root-bg: #f0f0f0;--minishape-cell-root-on-bg: #afafaf;--COLOR_OFF: inherit;--COLOR_RED: red;--COLOR_YELLOW: yellow;--COLOR_GREEN: green;--COLOR_CYAN: cyan;--COLOR_BLUE: blue;--COLOR_MAGENTA: magenta;--COLOR_BLACK: black;--COLOR_WHITE: white;--COLOR_ORANGE: orange;--COLOR_LIME: lime;--COLOR_PINK: pink}}.intv-0.on{background-color:var(--interval-0-bg);color:var(--interval-0-text)}.intv-1.on{background-color:var(--interval-1-bg);color:var(--interval-1-text)}.intv-2.on{background-color:var(--interval-2-bg);color:var(--interval-2-text)}.intv-3.on{background-color:var(--interval-3-bg);color:var(--interval-3-text)}.intv-4.on{background-color:var(--interval-4-bg)!important;color:var(--interval-4-text)}.intv-5.on{background-color:var(--interval-5-bg);color:var(--interval-5-text)}.intv-6.on{background-color:var(--interval-6-bg);color:var(--interval-6-text)}.intv-7.on{background-color:var(--interval-7-bg);color:var(--interval-7-text)}.intv-8.on{background-color:var(--interval-8-bg);color:var(--interval-8-text)}.intv-9.on{background-color:var(--interval-9-bg);color:var(--interval-9-text)}.intv-10.on{background-color:var(--interval-10-bg);color:var(--interval-10-text)}.intv-11.on{background-color:var(--interval-11-bg);color:var(--interval-11-text)}.minishape-cells>div{background-color:var(--minishape-cell-default-bg);color:var(--minishape-cell-default-color)}.grid>.oct-group-0{background-color:#f0f0f0}.grid>.oct-group-1{background-color:#d8d8d8}.grid>.oct-group-2{background-color:silver}.colorized .grid>.oct-group-0{background-color:#fff}.colorized .grid>.oct-group-1{background-color:#fff}.colorized .grid>.oct-group-2{background-color:#fff}.colorized .grid>.in-scale{background-color:#bbb}.colorized .grid>.root.in-scale,.colorized .minishape-cells>div.cell-on.intv-1P,.colorized .minishape-cells>div.cell-on.intv-8P{background-color:green;border-color:green;color:#fff}.colorized .grid>.intv-3m.in-scale,.colorized .grid>.intv-3M.in-scale,.colorized .minishape-cells>div.cell-on.intv-3m,.colorized .minishape-cells>div.cell-on.intv-3M{background-color:red;border-color:red;color:#fff}.colorized .grid>.intv-5d.in-scale,.colorized .grid>.intv-5P.in-scale,.colorized .grid>.intv-5A.in-scale,.colorized .minishape-cells>div.cell-on.intv-5d,.colorized .minishape-cells>div.cell-on.intv-5P,.colorized .minishape-cells>div.cell-on.intv-5A{background-color:#1e90ff;border-color:#1e90ff;color:#fff}.colorized .minishape-cells>div.cell-on.intv-7m,.colorized .minishape-cells>div.cell-on.intv-7M{background-color:#dd4545}.minishape-cells>div.cell-on{background-color:var(--minishape-cell-on-bg)}.minishape-cells>div.root.cell-on{background-color:var(--minishape-cell-root-on-bg)}.minishape:hover{cursor:pointer}.minishape-cells{display:grid;grid-template-columns:repeat(9,auto);justify-content:center;grid-gap:2px;grid-auto-rows:1fr}.minishape-cells:before{content:"";width:0;padding-bottom:100%;grid-row:1 / 1;grid-column:1 / 1}.minishape-cells>*:first-child{grid-row:1 / 1;grid-column:1 / 1}.minishape-cells>div{border:1px solid var(--minishape-cell-border-color);display:flex}.minishape-cells.cells-large>div{font-size:10px}.cell-content{margin:auto}.minishape-cells>div.intv-1P,.minishape-cells>div.intv-8P,.minishape-cells>div.root{border-radius:50%}.minishape.selected .minishape-cells>div,.minishape:hover .minishape-cells>div{border-color:var(--minishape-cell-selected-border)!important;background-color:#fff}.minishape.selected .minishape-cells>div.cell-on,.minishape:hover .minishape-cells>div.cell-on{background-color:var(--minishape-cell-selected-border)}.minishape.selected .minishape-cells>div.root.cell-on,.minishape:hover .minishape-cells>div.root.cell-on{background-color:var(--minishape-cell-selected-border)}.chords{display:flex}.chord-name{border-bottom:1px solid #777;font-weight:700}.chord-inversion{font-size:small;font-weight:700}.chord-intervals{font-size:small}.chord-container{margin:0 10px 0 0}.chord-container>div{background-color:#fff;padding:5px 0 3px;border:1px solid var(--music-scale-chord-border-color);border-radius:5px;text-align:center;font-size:1rem}.chord-container.on>div{margin:0 10px;border:2px solid var(--music-scale-chord-on-border-color)}.chords .chord-container>div:hover{background-color:var(--music-scale-chord-hover-bg)}.chords .chord-container{cursor:pointer}.chords .chord-container.selected>div{background-color:var(--diatonic-chord-selected-bg);color:var(--diatonic-chord-selected-text);border-color:var(--diatonic-chord-selected-bg)}.chord-degree{font-family:serif}.chord-info{margin-top:5px}.chord-info span{margin-right:5px}.voicing-shapes .minishape-wrapper{margin-right:10px;margin-top:10px}.voicing-shapes .minishape-cells{justify-content:start}.intervals-selector{display:grid;grid-template-columns:repeat(12,2.3rem);grid-gap:5px}.interval-selector{background-color:#fff;padding:2px 0;border:1px solid #aaa;border-radius:2px;color:#777;font-size:small;text-align:center;cursor:pointer}.interval-selector.selected{font-weight:700;color:#000;border-color:#000}.interval-selector:hover,.interval-selector.selected:hover{background-color:#ccc}.intervals-grid{display:grid;grid-template-columns:repeat(7,160px);justify-content:start;align-items:start;grid-row-gap:5px}.intervals-grid>div>div{text-align:start}.intervals-grid .minishape-wrapper{margin-bottom:10px}.intervals-grid .minishape-cells{justify-content:start}.interval-name{font-weight:700}.interval-symbol{border-bottom:1px solid #777;display:flex;justify-content:space-between;font-size:small;margin-top:5px}.scale-shapes .minishape-wrapper{margin-right:20px}.scale-shapes .minishape-cells{justify-content:start}.grid{display:grid;grid-template-columns:repeat(9,auto);grid-gap:2px;grid-auto-rows:1fr}.grid:before{content:"";width:0;padding-bottom:100%;grid-row:1 / 1;grid-column:1 / 1}.grid>*:first-child{grid-row:1 / 1;grid-column:1 / 1}.grid>div{border:1px solid var(--minishape-cell-border-color);display:flex}.grid .cell-content{margin:auto;font-size:11px}.grid>.root{border-radius:50%}@font-face{font-family:arcade;src:url(/gridshapes/assets/arcade.7fbeabd0.ttf)}html{--config-column-width: 52px;--bottom-left-column: 180px;--mini-shape-cell: 6px;--voicing-minishape-padding: 5px}#root{background:var(--main-bg);color:var(--text);margin:0;padding:0}.app{margin:0;padding:0;display:grid;height:100vh;grid-template-rows:auto 1fr}.app-top{display:flex}.side-panel{width:var(--config-column-width)}.main-panel{flex-grow:1;padding:0 10px 0 0}.app-bottom{overflow-y:scroll;display:flex;flex-direction:row}header{display:flex;align-items:center;padding:10px 10px 0}header>h1{margin:0;padding:5px 0}header a{text-decoration:none}header .site-header{display:flex;align-content:stretch;align-items:center}header .site-name{font-family:arcade;font-size:60px;margin-left:20px;margin-right:10px;margin-bottom:-5px;color:#2a0079}.theme-selector{display:flex}.header-controls input,.header-controls button{font-size:1.5rem}.grid-buttons,.panels-buttons{display:flex}.header-buttons>div{margin:0 5px;padding:5px;border:1px solid #ddd;border-radius:3px;color:#aaa;cursor:pointer}.header-buttons>div.on{border-color:#333;color:#000}.panel{padding:10px}.panel-two-cols{display:flex}.panel-left{display:none;width:100px;padding:0 10px;margin-right:5px;border-bottom:2px solid #ddd;border-right:2px solid #ddd;text-align:right}.panel-right{margin-left:32px;flex-grow:2;padding:0 20px}.panel-top{background-color:#e2e1eb;border-top:1px solid #b7b6c7;padding:5px 10px}.panel-title{font-size:1.25rem}.panel-closed .panel-content{display:none}.panel-right-space-left{width:var(--bottom-left-column)}.panel-content{padding:10px 0}.scale-name{font-weight:700}.z-1{background-color:#333}.col{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.flex-grow{flex-grow:2}.flex-wrap{flex-wrap:wrap}.space-between{justify-content:space-between}.center-vertical{align-items:center}.align-end{align-items:flex-end}.stretch{align-items:stretch}.text-right{text-align:right}.text-center{text-align:center}.mr-5{margin-right:5px}.ml-5{margin-left:5px}.mt-5{margin-top:5px}.mb-5{margin-bottom:5px}.mt-10{margin-top:10px}.mb-10{margin-bottom:10px}.ml-10{margin-left:10px}.mr-10{margin-right:10px}.ml-20{margin-left:20px}.mb-20{margin-bottom:20px}.mt-20{margin-top:20px}.ml-40{margin-left:40px}.pt-10{padding-top:10px}.pb-10{padding-bottom:10px}.pl-20{padding-left:20px}.text-small{font-size:small}.bold{font-weight:700}.font-normal{font-weight:400}.selector-button{margin-right:5px;padding:2px 5px 1px;border:1px solid #aaa;color:#888;cursor:pointer;text-align:center;text-transform:uppercase;font-size:.75rem}.selector-button.on{background-color:#ff0;border-color:#777;color:#333}.selector-button-as-text{margin:0 5px 0 0;color:#aaa;cursor:pointer}.selector-button-as-text.on{color:#333;text-decoration:underline}pre{margin:0}.chords-options{font-size:small}