:root{--sf-primary:var(--main-primary);--sf-primary-rgb:99, 102, 241;--sf-secondary:#14b8a6;--sf-secondary-rgb:20, 184, 166;--sf-text:#1e293b;--sf-text-muted:#64748b;--sf-bg:#fff;--sf-bg-secondary:#f8fafc;--sf-border:#e2e8f0;--sf-radius:var(--main-radius);--sf-radius-lg:var(--main-radius-lg);--sf-shadow:var(--main-shadow-sm);--sf-piano-white:#fff;--sf-piano-white-hover:#f1f5f9;--sf-piano-black:#1e293b;--sf-piano-black-hover:#334155;--sf-piano-active:rgba(var(--sf-primary-rgb), .2);--sf-piano-root:rgba(var(--sf-primary-rgb), .35);--sf-piano-border:#cbd5e1;--sf-fret-bg:#f5e6d3;--sf-fret-line:#d4a574;--sf-string-color:#94a3b8;--sf-dot-active:var(--sf-primary);--sf-dot-root:var(--sf-secondary);--sf-note-active:rgba(var(--sf-primary-rgb), .12);--sf-note-root-bg:rgba(var(--sf-primary-rgb), .15);--sf-chord-bg:#f8fafc;--sf-chord-hover:#f1f5f9;--sf-compare-common:rgba(var(--sf-secondary-rgb), .15);--sf-compare-diff-a:rgba(var(--sf-primary-rgb), .15);--sf-compare-diff-b:#ef444426}._sf-container{max-width:960px;margin:0 auto}._sf-tabs{margin-bottom:var(--main-space-5);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--sf-border);gap:.25rem;padding-bottom:0;display:flex}._sf-tab{color:var(--sf-text-muted);cursor:pointer;background:0 0;border-style:none none solid;border-width:0 0 2px;border-bottom-color:#0000;align-items:center;gap:.375rem;margin-bottom:-1px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:color .15s,border-color .15s;display:inline-flex}._sf-tab:hover{color:var(--sf-text)}._sf-tab--active{color:var(--sf-primary);border-bottom-color:var(--sf-primary)}._sf-tab svg{width:16px;height:16px}._sf-tab-content{display:none}._sf-tab-content--active{display:block}._sf-card{background:var(--sf-bg);border-radius:var(--sf-radius-lg);border-style:solid;border-width:1px;border-color:var(--sf-border);box-shadow:var(--sf-shadow);margin-bottom:var(--main-space-4);overflow:hidden}._sf-card-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--sf-border);background:var(--sf-bg-secondary);justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}._sf-card-title{color:var(--sf-text);align-items:center;gap:.5rem;margin:0;font-size:.8125rem;font-weight:600;display:flex}._sf-card-title svg{color:var(--sf-primary);width:16px;height:16px}._sf-label{color:var(--sf-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.75rem;font-weight:600;display:block}._sf-select{border-style:solid;border-width:1.5px;border-color:var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg);color:var(--sf-text);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;padding:.5rem 2rem .5rem .75rem;font-size:.875rem}._sf-select:focus{border-color:var(--sf-primary);box-shadow:0 0 0 3px rgba(var(--sf-primary-rgb), .1);outline:none}@media (max-width:768px){._sf-container{padding-left:1rem;padding-right:1rem}}._sf-controls{background:var(--sf-bg);border-radius:var(--sf-radius-lg);border-style:solid;border-width:1px;border-color:var(--sf-border);box-shadow:var(--sf-shadow);margin-bottom:var(--main-space-4);padding:1.25rem}._sf-controls-row{align-items:flex-start;gap:1.5rem;display:flex}._sf-control-group{flex-shrink:0}._sf-control-group--scale{flex:1;min-width:0}._sf-control-group--scale ._sf-select{width:100%}._sf-note-grid{grid-template-columns:repeat(12,1fr);gap:.25rem;display:grid}._sf-note-btn{border-style:solid;border-width:1.5px;border-color:var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg);color:var(--sf-text);cursor:pointer;text-align:center;white-space:nowrap;min-width:2.25rem;padding:.5rem .25rem;font-size:.8125rem;font-weight:500;transition:background-color .15s,border-color .15s,color .15s}._sf-note-btn:hover{border-color:var(--sf-primary);color:var(--sf-primary)}._sf-note-btn--active{background:var(--sf-primary);border-color:var(--sf-primary);color:#fff}._sf-note-btn--active:hover{opacity:.9;color:#fff}._sf-controls-actions{border-top-style:solid;border-top-width:1px;border-top-color:var(--sf-border);justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;display:flex}._sf-notation-toggle{border-radius:var(--sf-radius);border-style:solid;border-width:1.5px;border-color:var(--sf-border);display:flex;overflow:hidden}._sf-toggle-btn{background:var(--sf-bg);color:var(--sf-text-muted);cursor:pointer;border-style:none;border-width:0;padding:.375rem .75rem;font-size:.875rem;font-weight:600;transition:background-color .15s,color .15s}._sf-toggle-btn:first-child{border-right-style:solid;border-right-width:1px;border-right-color:var(--sf-border)}._sf-toggle-btn--active{background:var(--sf-primary);color:#fff}._sf-play-controls{align-items:center;gap:.5rem;display:flex}._sf-play-btn{background:var(--sf-primary);color:#fff;cursor:pointer;width:2.5rem;height:2.5rem;box-shadow:0 2px 8px rgba(var(--sf-primary-rgb), .3);border-style:none;border-width:0;border-radius:50%;justify-content:center;align-items:center;transition:opacity .15s,box-shadow .15s;display:inline-flex}._sf-play-btn:hover{opacity:.9}._sf-play-btn--playing{background:var(--main-error);box-shadow:0 2px 8px #ef44444d}._sf-play-btn svg{width:16px;height:16px}._sf-speed-select{border-style:solid;border-width:1.5px;border-color:var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg);color:var(--sf-text);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-position:right .375rem center;background-repeat:no-repeat;padding:.375rem 1.75rem .375rem .625rem;font-size:.8125rem}@media (max-width:640px){._sf-controls-row{flex-direction:column;gap:1rem}._sf-note-grid{grid-template-columns:repeat(6,1fr)}._sf-control-group--scale ._sf-select{width:100%}}._sf-piano-wrapper{min-height:160px;padding:1.25rem;overflow-x:auto}._sf-piano{width:-moz-fit-content;width:fit-content;max-width:100%;height:140px;margin:0 auto;display:flex;position:relative}._sf-piano-key{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s;position:relative}._sf-piano-key--white{background:var(--sf-piano-white);border-style:solid;border-width:1px;border-color:var(--sf-piano-border);border-radius:0 0 var(--sf-radius) var(--sf-radius);z-index:1;width:2.5rem;height:140px}._sf-piano-key--white:hover{background:var(--sf-piano-white-hover)}._sf-piano-key--black{background:var(--sf-piano-black);z-index:2;border-radius:0 0 4px 4px;width:1.625rem;height:90px;position:absolute;box-shadow:0 2px 4px #0000004d}._sf-piano-key--black:hover{background:var(--sf-piano-black-hover)}._sf-piano-key--active._sf-piano-key--white{background:var(--sf-piano-active);border-color:rgba(var(--sf-primary-rgb), .4)}._sf-piano-key--root._sf-piano-key--white{background:var(--sf-piano-root);border-color:rgba(var(--sf-primary-rgb), .5)}._sf-piano-key--active._sf-piano-key--black{background:rgba(var(--sf-primary-rgb), .7)}._sf-piano-key--root._sf-piano-key--black{background:var(--sf-primary)}._sf-piano-key--playing{box-shadow:0 0 12px rgba(var(--sf-primary-rgb), .5)}._sf-piano-label{color:var(--sf-text-muted);pointer-events:none;white-space:nowrap;font-size:.625rem;font-weight:600;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%)}._sf-piano-key--black ._sf-piano-label{color:#fffc;font-size:.5625rem;bottom:.375rem}._sf-piano-key--root ._sf-piano-label{color:var(--sf-primary);font-weight:700}._sf-piano-key--root._sf-piano-key--black ._sf-piano-label{color:#fff}@media (max-width:640px){._sf-piano-key--white{width:2rem;height:120px}._sf-piano-key--black{width:1.375rem;height:75px;margin-left:-.6875rem}._sf-piano{height:120px}._sf-piano-label{font-size:.5625rem}}._sf-fretboard-wrapper{min-height:200px;padding:1.25rem;overflow-x:auto}._sf-fretboard{min-width:700px;position:relative}._sf-fretboard-options{align-items:center;gap:.5rem;display:flex}._sf-fretboard-label-select{border-style:solid;border-width:1.5px;border-color:var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg);color:var(--sf-text);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-position:right .375rem center;background-repeat:no-repeat;padding:.3125rem 1.5rem .3125rem .5rem;font-size:.75rem}._sf-fb-container{position:relative}._sf-fb-string{pointer-events:none;height:2px;position:absolute;left:0;right:0}._sf-fb-string--1,._sf-fb-string--2{background:var(--sf-string-color);height:1px}._sf-fb-string--3{background:var(--sf-string-color);height:1.5px}._sf-fb-string--4{background:var(--sf-string-color);height:2px}._sf-fb-string--5{background:var(--sf-string-color);height:2.5px}._sf-fb-string--6{background:var(--sf-string-color);height:3px}._sf-fb-fret-line{background:var(--sf-fret-line);width:2px;position:absolute;top:0;bottom:0}._sf-fb-nut{background:var(--sf-text);width:4px}._sf-fb-fret-number{color:var(--sf-text-muted);text-align:center;font-size:.625rem;position:absolute;bottom:-1.25rem}._sf-fb-dot-marker{background:#0000001f;border-radius:50%;width:6px;height:6px;position:absolute}._sf-fb-note{cursor:pointer;z-index:3;border-radius:50%;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.625rem;font-weight:600;transition:opacity .15s,box-shadow .15s;display:flex;position:absolute}._sf-fb-note:hover{box-shadow:0 0 8px rgba(var(--sf-primary-rgb), .4)}._sf-fb-note--active{background:var(--sf-dot-active);color:#fff}._sf-fb-note--root{background:var(--sf-dot-root);color:#fff}._sf-fb-note--playing{box-shadow:0 0 12px rgba(var(--sf-primary-rgb), .6)}._sf-fb-tuning{color:var(--sf-text-muted);text-align:right;width:1.5rem;font-size:.6875rem;font-weight:600;position:absolute;left:-1.75rem}._sf-info{min-height:80px;padding:1.25rem}._sf-info-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}._sf-info-item{background:var(--sf-bg-secondary);border-radius:var(--sf-radius);border-style:dashed;border-width:1px;border-color:var(--sf-border);padding:.75rem}._sf-info-label{color:var(--sf-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.375rem;font-size:.6875rem;font-weight:600}._sf-info-value{color:var(--sf-text);font-size:.9375rem;font-weight:600;font-family:var(--main-font-mono);word-break:break-word}._sf-info-notes{border-top-style:solid;border-top-width:1px;border-top-color:var(--sf-border);flex-wrap:wrap;gap:.375rem;margin-top:1rem;padding-top:1rem;display:flex}._sf-info-note{border-radius:var(--sf-radius);background:var(--sf-note-active);min-width:2.5rem;color:var(--sf-primary);cursor:pointer;border-style:none;border-width:0;flex-direction:column;justify-content:center;align-items:center;padding:.5rem .75rem;font-size:.875rem;font-weight:600;transition:opacity .15s,box-shadow .15s;display:inline-flex}._sf-info-note:hover{box-shadow:0 2px 8px rgba(var(--sf-primary-rgb), .25)}._sf-info-note--root{background:var(--sf-primary);color:#fff}._sf-info-note--playing{box-shadow:0 0 12px rgba(var(--sf-primary-rgb), .5)}._sf-info-note-degree{color:var(--sf-text-muted);text-align:center;margin-top:.125rem;font-size:.5625rem;font-weight:500;display:block}._sf-info-note--root ._sf-info-note-degree{color:#ffffffbf}@media (max-width:640px){._sf-info-grid{grid-template-columns:1fr}}._sf-chords{min-height:60px;padding:1.25rem}._sf-chords-empty{color:var(--sf-text-muted);padding:1rem;font-size:.875rem}._sf-chords-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;display:grid}._sf-chord-card{background:var(--sf-chord-bg);border-radius:var(--sf-radius);border-style:solid;border-width:1px;border-color:var(--sf-border);cursor:pointer;flex-direction:column;align-items:center;padding:.75rem .5rem;transition:border-color .15s,box-shadow .15s;display:flex}._sf-chord-card:hover{border-color:var(--sf-primary);box-shadow:0 2px 8px rgba(var(--sf-primary-rgb), .15)}._sf-chord-card--playing{border-color:var(--sf-primary);box-shadow:0 0 12px rgba(var(--sf-primary-rgb), .25)}._sf-chord-degree{color:var(--sf-text-muted);text-transform:uppercase;margin-bottom:.25rem;font-size:.625rem;font-weight:600}._sf-chord-name{color:var(--sf-text);margin-bottom:.25rem;font-size:1rem;font-weight:700}._sf-chord-quality{border-radius:var(--main-radius-full);padding:.125rem .5rem;font-size:.625rem;font-weight:500;display:inline-flex}._sf-chord-quality--major{background:rgba(var(--sf-primary-rgb), .1);color:var(--sf-primary)}._sf-chord-quality--minor{background:rgba(var(--sf-secondary-rgb), .1);color:var(--sf-secondary)}._sf-chord-quality--diminished{color:#dc2626;background:#ef44441a}._sf-chord-quality--augmented{color:#d97706;background:#f59e0b1a}._sf-chord-notes{color:var(--sf-text-muted);font-size:.6875rem;font-family:var(--main-font-mono);margin-top:.375rem}@media (max-width:640px){._sf-chords-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}._sf-compare{min-height:300px}._sf-compare-columns{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}._sf-compare-col{background:var(--sf-bg);border-radius:var(--sf-radius-lg);border-style:solid;border-width:1px;border-color:var(--sf-border);box-shadow:var(--sf-shadow);overflow:hidden}._sf-compare-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--sf-border);background:var(--sf-bg-secondary);align-items:center;gap:.5rem;padding:.75rem 1rem;display:flex}._sf-compare-label{background:var(--sf-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.6875rem;font-weight:700;display:inline-flex}._sf-compare-col:last-child ._sf-compare-label{background:#ef4444}._sf-compare-note,._sf-compare-scale{border-style:solid;border-width:1.5px;border-color:var(--sf-border);border-radius:var(--sf-radius);background:var(--sf-bg);color:var(--sf-text);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-position:right .375rem center;background-repeat:no-repeat;padding:.3125rem 1.5rem .3125rem .5rem;font-size:.8125rem}._sf-compare-scale{flex:1;min-width:0}._sf-compare-piano{padding:1rem;overflow-x:auto}._sf-compare-piano ._sf-piano{height:100px}._sf-compare-piano ._sf-piano-key--white{width:1.75rem;height:100px}._sf-compare-piano ._sf-piano-key--black{width:1.125rem;height:62px}._sf-compare-piano ._sf-piano-label{font-size:.5rem}._sf-compare-notes{border-top-style:solid;border-top-width:1px;border-top-color:var(--sf-border);flex-wrap:wrap;gap:.25rem;padding:.75rem 1rem;display:flex}._sf-compare-note-tag{border-radius:var(--sf-radius);padding:.25rem .5rem;font-size:.75rem;font-weight:600;display:inline-flex}._sf-compare-note-tag--common{background:var(--sf-compare-common);color:var(--sf-secondary)}._sf-compare-note-tag--only-a{background:var(--sf-compare-diff-a);color:var(--sf-primary)}._sf-compare-note-tag--only-b{background:var(--sf-compare-diff-b);color:#ef4444}._sf-compare-result{background:var(--sf-bg);border-radius:var(--sf-radius-lg);border-style:solid;border-width:1px;border-color:var(--sf-border);box-shadow:var(--sf-shadow);padding:1rem 1.25rem}._sf-compare-summary{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}._sf-compare-stat{align-items:center;gap:.375rem;font-size:.8125rem;display:flex}._sf-compare-stat-dot{border-radius:50%;width:.5rem;height:.5rem}._sf-compare-stat-dot--common{background:var(--sf-secondary)}._sf-compare-stat-dot--a{background:var(--sf-primary)}._sf-compare-stat-dot--b{background:#ef4444}._sf-compare-stat-count{color:var(--sf-text);font-weight:700}._sf-compare-stat-label{color:var(--sf-text-muted)}@media (max-width:768px){._sf-compare-columns{grid-template-columns:1fr}}