.fretboard-app{box-sizing:border-box;min-height:calc(100vh - 65px);margin:0;padding:28px;background:var(--page-bg);color:var(--text)}.fretboard-app *,.fretboard-app *:before,.fretboard-app *:after{box-sizing:inherit}.fretboard-app .tool-intro{display:grid;gap:8px;margin-bottom:16px}.fretboard-app .tool-intro h2,.fretboard-app .tool-intro p{margin:0}.fretboard-app .tool-intro h2{color:var(--text);font-size:26px;line-height:1.2;letter-spacing:0}.fretboard-app .tool-intro p{max-width:860px;color:var(--muted);font-size:16px;line-height:1.5}.fretboard-app .app-title{margin:0;text-align:center;font-size:42px;letter-spacing:0;color:var(--muted)}.fretboard-app .subtitle{text-align:center;font-size:22px;color:var(--muted);margin-top:2px;margin-bottom:26px}.fretboard-app .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:26px;box-shadow:0 2px 8px var(--shadow)}.fretboard-app label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0}.fretboard-app fieldset{min-width:0;margin:0;padding:0;border:0}.fretboard-app legend{margin-bottom:5px;padding:0;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0}.fretboard-app .segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;min-height:38px;border:1px solid var(--border);border-radius:8px;background:var(--field-bg)}.fretboard-app .segmented-control label{display:grid;min-width:0;align-items:stretch;justify-content:stretch;color:var(--field-text);font-size:13px;font-weight:700;text-align:center;text-transform:none;cursor:pointer}.fretboard-app .segmented-control label+label{border-left:1px solid var(--border)}.fretboard-app .segmented-control input{position:absolute;opacity:0;pointer-events:none}.fretboard-app .segmented-control span{display:grid;min-width:0;align-items:center;justify-content:center;padding:8px 10px}.fretboard-app .segmented-control input:checked+span{background:var(--text);color:var(--page-bg)}.fretboard-app .pattern-select-control.is-hidden{display:none}.fretboard-app .toggle-control{flex-direction:row;align-items:center;justify-content:flex-start;min-height:55px}.fretboard-app .toggle-control input{width:18px;height:18px;padding:0}.fretboard-app input,.fretboard-app select{width:100%;min-width:0;font:inherit;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--field-bg);color:var(--field-text)}.fretboard-app input[type=color]{padding:2px;height:38px}.fretboard-app .scale-info{text-align:center;margin-bottom:24px}.fretboard-app .scale-notes{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-size:26px;margin-bottom:8px}.fretboard-app .note-chip{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;background:var(--chip-bg);color:var(--text);font-weight:800}.fretboard-app .degree-row{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;color:var(--text);font-size:17px}.fretboard-app .degree-label{font-weight:700;color:var(--muted);margin-right:4px}.fretboard-app .chart-shell{position:relative}.fretboard-app .chart-shell:before,.fretboard-app .chart-shell:after{position:absolute;top:1px;bottom:1px;z-index:2;width:34px;pointer-events:none;opacity:0;transition:opacity .14s ease;content:""}.fretboard-app .chart-shell:before{left:1px;background:linear-gradient(90deg,var(--scroll-shadow),transparent);border-radius:8px 0 0 8px}.fretboard-app .chart-shell:after{right:1px;background:linear-gradient(270deg,var(--scroll-shadow),transparent);border-radius:0 8px 8px 0}.fretboard-app .chart-shell.can-scroll-left:before,.fretboard-app .chart-shell.can-scroll-right:after{opacity:1}.fretboard-app .chart-wrap{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-gutter:stable both-edges;-webkit-overflow-scrolling:touch;background:var(--chart-bg);border-radius:8px;border:1px solid var(--chart-border);padding:20px}.fretboard-app .chart-wrap:focus-visible{outline:2px solid var(--muted);outline-offset:3px}.fretboard-app .chart-wrap::-webkit-scrollbar{height:12px}.fretboard-app .chart-wrap::-webkit-scrollbar-track{background:var(--field-bg)}.fretboard-app .chart-wrap::-webkit-scrollbar-thumb{background:var(--border);border:3px solid var(--field-bg);border-radius:999px}.fretboard-app .chart-wrap{scrollbar-color:var(--border) var(--field-bg);scrollbar-width:thin}.fretboard-app #chart{width:max-content;min-width:max-content;margin-inline:auto}.fretboard-app #chart svg{display:block;max-width:none}.fretboard-app .legend{margin-top:18px;display:grid;gap:4px;font-size:13px;color:var(--muted)}.fretboard-app .error{color:var(--error);font-weight:700;text-align:center;margin:16px 0}@media(max-width:760px){.fretboard-app{padding:18px}.fretboard-app .app-title{font-size:34px}.fretboard-app .tool-intro h2{font-size:23px}.fretboard-app .subtitle{margin-bottom:20px;font-size:18px}.fretboard-app .controls{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:12px;margin-bottom:20px}.fretboard-app .scale-info{margin-bottom:18px}.fretboard-app .scale-notes{gap:8px;font-size:22px}.fretboard-app .degree-row{gap:10px;font-size:15px}.fretboard-app .chart-wrap{padding:14px}}@media(max-width:480px){.fretboard-app{padding:12px}.fretboard-app .app-title{font-size:30px}.fretboard-app .subtitle{font-size:16px}.fretboard-app .tool-intro{margin-bottom:12px}.fretboard-app .controls{grid-template-columns:repeat(2,minmax(0,1fr))}.fretboard-app .wide-control{grid-column:1 / -1}.fretboard-app .segmented-control span{padding:8px 6px}.fretboard-app .toggle-control{min-height:42px}.fretboard-app .note-chip{min-width:34px;height:34px}.fretboard-app .chart-shell:before,.fretboard-app .chart-shell:after{width:24px}.fretboard-app .chart-wrap{padding:10px}.fretboard-app .legend{gap:6px;font-size:12px}}.fretboard-page[data-astro-cid-nsvcbxtz]{max-width:1180px;margin:0 auto;padding:42px 28px 0;color:var(--text)}.fretboard-page__intro[data-astro-cid-nsvcbxtz]{display:grid;gap:14px}.fretboard-page__eyebrow[data-astro-cid-nsvcbxtz]{margin:0;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:0;text-transform:uppercase}.fretboard-page[data-astro-cid-nsvcbxtz] h1[data-astro-cid-nsvcbxtz],.fretboard-page[data-astro-cid-nsvcbxtz] p[data-astro-cid-nsvcbxtz]{margin:0}.fretboard-page[data-astro-cid-nsvcbxtz] h1[data-astro-cid-nsvcbxtz]{max-width:860px;color:var(--text);font-size:44px;line-height:1.08;letter-spacing:0}.fretboard-page__intro[data-astro-cid-nsvcbxtz] p[data-astro-cid-nsvcbxtz]:not(.fretboard-page__eyebrow){max-width:760px;color:var(--muted);font-size:18px;line-height:1.55}@media(max-width:760px){.fretboard-page[data-astro-cid-nsvcbxtz]{padding:28px 18px 0}.fretboard-page[data-astro-cid-nsvcbxtz] h1[data-astro-cid-nsvcbxtz]{font-size:34px}.fretboard-page__intro[data-astro-cid-nsvcbxtz] p[data-astro-cid-nsvcbxtz]:not(.fretboard-page__eyebrow){font-size:16px}}