#sheet.form-chart{width:min(1180px,calc(100vw - 20px));padding:35px 18px 18px;background:rgba(255,254,250,.95)}
.chart-blocks{display:flex;flex-direction:column;gap:30px}
.chart-scroll{overflow-x:auto;padding:10px 8px 16px;background:#fffefa;border-radius:10px}
.chart-node{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:150px;flex:1}
.chart-name{align-self:center;border:0;background:transparent;padding:7px 10px;margin:0 0 15px;white-space:nowrap;font:20px Georgia,"Microsoft YaHei",serif;color:#416846}
.chart-name small{font-size:.72em}.chart-name[data-level="1"]{font-size:26px;color:#75501f}.chart-name[data-level="2"]{font-size:23px;color:#285d78}.chart-name[data-level="4"]{font-size:18px;color:#765981}.chart-name[data-level="5"]{font-size:16px;color:#786059}.chart-name:hover{background:#edf4e9;border-radius:7px}
.chart-children{display:flex;gap:14px;border-top:1px solid #526f7e;padding:22px 8px 0;position:relative;flex:1;min-width:max-content}
.chart-children:before,.chart-children:after{content:"";position:absolute;top:0;height:12px;border-left:1px solid #526f7e}.chart-children:before{left:0}.chart-children:after{right:0}
.chart-scroll>.chart-node{min-width:max-content}
.chart-facts{display:flex;flex-direction:column;gap:18px;margin-top:auto;padding:0 10px;min-height:130px;justify-content:flex-end}
.chart-count{font:24px Georgia,serif}.chart-keys,.chart-chords{font:21px Georgia,serif;min-height:28px;white-space:nowrap}
.chart-chords .chord-symbol{display:inline-flex}
@media(max-width:580px){#sheet.form-chart{padding:35px 10px 12px}.chart-name[data-level="1"]{font-size:23px}.chart-name[data-level="2"]{font-size:20px}.chart-name{font-size:18px}.chart-node{min-width:130px}}

.chart-node{flex:1 0 auto}.chart-node:has(>.chart-children){min-width:max-content}.chart-children{flex:1 0 auto}

#sheet.form-chart{width:calc(100vw - 24px);max-width:none;overflow-x:hidden}.chart-scroll{overflow:hidden;position:relative;flex-shrink:0}.chart-scroll>.chart-node{width:max-content}

/* Keep each key at its first position and show its continuation across structures. */
.chart-scroll>.chart-node{position:relative}
.chart-keys{color:inherit}
.chart-key-slot{visibility:hidden}
.chart-jump{border:0;background:transparent;color:inherit;font:inherit;padding:0 3px;cursor:pointer;border-radius:4px}
.chart-jump:hover,.chart-jump:focus-visible{background:#e9eee4;outline:1px solid #a6b6a2}
.chart-key-run{position:absolute;transform:translateX(-50%);font:21px Georgia,serif;color:#334d3e;white-space:nowrap}

.chart-key-extension{position:absolute;height:0;border-top:1px solid #627a69;pointer-events:none}