:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#171717;background:#f2f0eb}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;min-width:320px}body.bh-tool-livefrets-display{display:grid;grid-template-rows:auto minmax(0,1fr)}body.bh-tool-livefrets-display>.public-shell{height:100%;min-height:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.public-shell{width:min(1600px,100%);height:100dvh;margin:0 auto;padding:clamp(12px,2vw,28px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(12px,1.5vw,22px);overflow:hidden}.visual-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,360px);gap:clamp(14px,2vw,28px);align-items:start;contain:layout paint}.instrument-stack{min-width:0;height:305px;display:grid;grid-template-rows:201px 90px;gap:14px;contain:layout paint}.fretboard-window{width:100%;height:201px;position:relative;overflow:hidden;border-radius:12px;background:#f9f8f5;box-shadow:0 2px 14px #0000001f}#fretboard-container{position:absolute;left:0;top:0;width:165px;height:818px;transform-origin:top left}#fretboard-img{display:block;width:165px;height:818px}#dot-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.dot{position:absolute;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#111;color:#fff;font-size:12px;font-weight:750;line-height:1;transform:translate(-50%,-50%) rotate(90deg);pointer-events:auto;cursor:pointer}.dot.fading{pointer-events:none;z-index:1}.dot.previous-chord{z-index:5}.dot.borrowed-ghost{z-index:2;background:#ffffffc7;border:2px dashed rgb(0 0 0 / 65%);color:#111;pointer-events:none}.piano-display{height:90px;contain:strict}.piano-keys{position:relative;width:100%;height:90px;overflow:hidden;border:1px solid #cbc8c1;border-radius:10px;background:#fff;box-shadow:0 2px 12px #00000014}.piano-key{position:absolute;top:0;box-sizing:border-box;border:1px solid #cbc8c1}.piano-key.white{z-index:1;height:90px;background:#fff}.piano-key.black{z-index:2;height:55px;background:#171717;border-color:#171717}.piano-key.active{background:#e2662e;border-color:#a83f15}.piano-key.black.active{background:#f38a57}.piano-key.faded{background:#d8b49f}.voicing-card,.settings-panel{border:1px solid #d5d1c8;border-radius:14px;background:#fbfaf7;box-shadow:0 2px 14px #00000014}.voicing-card{height:305px;padding:18px;display:flex;flex-direction:column;overflow:hidden;contain:layout paint;border:0;border-radius:0;background:#b0e0e6;box-shadow:none}.voicing-display{flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:0;overflow:hidden}.voicing-chord{font-size:72px;font-weight:850;line-height:.95;white-space:nowrap}.voicing-info{margin-top:18px;font-size:28px;font-weight:750;line-height:1.12;white-space:nowrap}.voicing-ambiguity{margin-top:6px;color:#6d675f;font-size:12px;white-space:nowrap}.midi-status{color:#665f56;font-size:13px}.midi-status[data-status=ready]{color:#23613a}.midi-status[data-status=error],.midi-status[data-status=unsupported]{color:#9e382c}.settings-panel{min-height:0;margin:0;padding:13px 14px 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.settings-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-actions{display:flex;align-items:center;gap:12px}.settings-heading-row h2{margin:0;font-size:18px}.reset-button{border:1px solid #bcb7ae;border-radius:999px;padding:5px 11px;background:#fff;color:#272522;cursor:pointer}.settings-button{border:1px solid #bcb7ae;border-radius:7px;padding:7px 10px;background:#fff;color:#272522;cursor:pointer;font-weight:650}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 11px;margin-top:10px}.settings-group{min-width:0;margin:0;padding:9px 10px 10px;border:1px solid #dedbd4;border-radius:10px;display:flex;flex-direction:column;gap:7px}.settings-group legend{padding:0 6px;font-size:14px;font-weight:750}.settings-group label{position:relative;display:grid;gap:3px;color:#37332f;font-size:12px}.settings-group label.check{display:flex;align-items:center;gap:8px}.settings-group output{position:absolute;top:0;right:0;color:#716a61;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#bd5124}input[type=checkbox],input[type=radio]{accent-color:#bd5124}select{width:100%;padding:6px 8px;border:1px solid #bdb8af;border-radius:7px;background:#fff}.choice-row,.check-grid{display:flex;flex-wrap:wrap;gap:6px 10px}.choice-row label{display:flex;align-items:center;gap:4px}.color-setting{grid-template-columns:1fr auto;align-items:center}.modal{display:none;position:fixed;z-index:1000;inset:0;padding:24px;overflow:auto;background:#0000009e}.modal.is-open{display:grid;place-items:start center}.modal-content{position:relative;width:min(560px,100%);margin:max(20px,5vh) auto;padding:22px;border-radius:14px;background:#fbfaf7;box-shadow:0 18px 60px #0000004d}.modal-content h2{margin:0 38px 18px 0;font-size:20px}.close-button{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#777169;font-size:30px;line-height:1;cursor:pointer}.soc-key-filter-group{margin-bottom:10px;padding:10px;border:1px solid #d8d4cc;border-radius:8px;background:#fff}.soc-key-filter-group.is-disabled{opacity:.52}.soc-key-filter-group-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-weight:750}.soc-key-filter-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px 10px}.soc-key-filter-item{display:flex;align-items:center;gap:4px;min-width:0;font-size:12px}.soc-key-filter-item label{line-height:1.05}.modal-hint{margin:12px 0 0;color:#716a61;font-size:12px;font-style:italic;text-align:center}@media(max-width:860px){.visual-grid{grid-template-columns:1fr}.visual-grid{contain:none}.instrument-stack{height:auto;grid-template-rows:auto 90px}.voicing-card{height:220px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.public-shell{padding:9px}.public-shell{gap:9px}.settings-grid{grid-template-columns:1fr}.fretboard-window{border-radius:8px}.modal{padding:10px}.modal-content{padding:18px 12px}.soc-key-filter-keys{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}