#piano-container{box-sizing:border-box;width:100%;max-height:none;padding:18px;margin:0;background:#fff;border-radius:12px;overflow:visible}.piano-heading{width:100%;color:#243e4c}.piano-heading h2{font-size:16px;margin:0 0 5px}.piano-heading p{font-size:13px;color:#60717c;margin:0 0 14px}#piano-container .piano-wrapper{width:100%;overflow-x:auto;padding:0 0 6px}#piano-keyboard{position:relative;width:100%;min-width:700px;height:144px;margin:0;box-sizing:border-box;border:1px solid #344957;border-top:5px solid #344957;border-radius:0 0 5px 5px}#piano-keyboard .piano-key{position:absolute;top:0;box-sizing:border-box;cursor:default;transform:none;transition:background-color .12s}#piano-keyboard .white-key{width:calc(100% / var(--white-keys));height:100%;background:linear-gradient(#f6f8f8,#fff 70%);border-right:1px solid #8999a2;border-bottom:3px solid #bdc8ce;border-radius:0 0 4px 4px}#piano-keyboard .black-key{width:calc(62% / var(--white-keys));height:62%;z-index:2;background:linear-gradient(#344550,#172630);border:1px solid #15232b;border-bottom:4px solid #0c171d;border-radius:0 0 3px 3px}#piano-keyboard .piano-key.active{background:#087e8b!important;color:#fff}#piano-keyboard .piano-key.bass{box-shadow:inset 0 -6px #d2a441}#piano-keyboard .piano-key-label{position:absolute;bottom:11px;left:50%;transform:translate(-50%);font-size:10px;color:#667983;white-space:nowrap}#piano-keyboard .active .piano-key-label{color:#fff;font-weight:650}main>.app-header{display:flex!important;flex-wrap:wrap;align-items:center!important;gap:.6rem 1rem!important;margin:0 0 1rem}main>.app-header .eyebrow,main>.app-header .lede{display:none}body main>.app-header h1{font-size:1.5rem!important;line-height:1.15!important;margin:0;white-space:nowrap}main>.app-header .transport{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start!important;gap:.4rem}.app-header .transport button,.app-header .transport label{font-size:.78rem}.app-header .transport button{min-height:38px;padding:.45rem .65rem}.app-header .transport label{display:flex;align-items:center;gap:.35rem}.app-header #key{font:inherit;min-height:38px}#play.play-toggle{width:40px;padding:8px;display:grid;place-items:center;background:var(--blue);color:#fff;border-color:var(--blue)}.play-toggle svg{width:21px;height:21px;fill:currentColor}#starter-name{font-size:.72rem;color:var(--muted)}.chart-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;align-items:start}.chart-column{min-width:0}.chart-column>.paper{margin:0}.chart-column>.actions{margin:.65rem 0 0}#inspector{min-width:0;margin:0;padding:0;border:0;background:transparent}.fretboard-framework-host{display:block;position:relative;width:100%;height:min(240px,calc(100dvh - var(--blues-host-height,0px) - 20px));overflow:clip}#instrument-view #fretboard-display{position:absolute!important;left:50%;top:0;transform-origin:top center}#instrument-view.exact-piano{display:block;height:auto;width:100%;max-width:none}#instrument-view .piano-wrapper{width:100%;overflow-x:auto;padding-bottom:6px}#instrument-view #piano-keyboard{min-width:max(700px,calc(var(--white-keys) * 22px))}body.vertical-guitar-mode{--guitar-panel-width:clamp(100px,19vw,245px);--guitar-panel-gap:clamp(8px,1.5vw,24px)}body.vertical-guitar-mode main{max-width:none;padding:1rem calc(var(--guitar-panel-width) + 2 * var(--guitar-panel-gap)) 1rem 1.25rem}.vertical-guitar #inspector{position:fixed;top:calc(var(--blues-host-height,0px) + 8px);bottom:8px;right:var(--guitar-panel-gap);width:var(--guitar-panel-width)}.vertical-guitar #instrument-view{height:100%}body.editor-open .vertical-guitar #inspector{display:none}body.editor-open.vertical-guitar-mode main{padding-right:1.25rem}#app-settings{width:min(420px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:1.25rem;border:1px solid #c6d5dc;border-radius:12px;color:var(--ink)}#app-settings::backdrop{background:#17253465}#app-settings>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}#app-settings h2{margin:0;font-size:1.25rem}.instrument-tabs{margin:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#orientation-control{display:flex;align-items:center;gap:.5rem;font-size:.85rem;margin-top:.5rem;flex-basis:100%}#orientation-control[hidden]{display:none}#guitar-orientation{font:inherit;padding:.5rem;border:1px solid #b8c8d0;border-radius:.35rem;background:#fff;color:var(--ink)}#inspector-label{font-size:.8rem;line-height:1.5;color:var(--muted)}.inspector-steps{display:flex;flex-wrap:wrap;gap:.3rem}.inspector-steps button{font-size:.75rem;padding:.45rem .6rem}@media (min-width:1200px){body.editor-open.vertical-guitar-mode main{padding-right:650px}}@media (max-width:760px){body.vertical-guitar-mode main{padding-left:.65rem}.vertical-guitar .paper{padding:.7rem .5rem}.vertical-guitar .chord{font-size:1rem}.vertical-guitar .chart-heading{flex-wrap:wrap;gap:.25rem}.vertical-guitar .chart-heading strong{font-size:1rem}.vertical-guitar .bar{padding-left:.4rem;padding-right:.4rem}body main>.app-header h1{font-size:1.25rem!important}}#choices>header{flex-wrap:wrap;gap:.5rem 1rem}.editor-header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}.editor-history{display:flex;gap:.35rem}#choices .editor-history button{min-height:36px;padding:.45rem .6rem;font-size:.78rem}.chart-column>.actions:not(:has(button:not([hidden]))):not(:has(#change-note:not(:empty))){display:none}.alpha-badge{display:inline-block;margin-top:.3rem;padding:.18rem .45rem;border:1px solid #c68b3c;border-radius:999px;background:#fff5df;color:#75470f;font-size:.65rem;font-weight:700;line-height:1.2}.alpha-access{margin:-.4rem 0 .7rem;font-size:.78rem;color:var(--muted)}.alpha-access[hidden]{display:none}
