:root{color:#171717;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--panel:#fff;--panel-border:#0000001f;--panel-strong:#00000024;--text:#171717;--text-muted:#444;--text-soft:#505050;--text-subtle:#5e5e5e;--accent:#111;--accent-strong:#111;--root:#d92d20;--root-glow:#d92d202e;--fret-line:#0000001f;--string-line:#0000002e;--inlay:#0000002e;--base-zone:#f5ecdc;--open-fret:#ededed;--nut-line:#785c3a52;--extension-zone:#3273dc1f;--diagonal-primary:#3273dc24;--diagonal-secondary:#f5ecdc;--added-note-fill:#4f8fe8;--added-note-border:#0000001f;--added-note-text:#fff;--bend-spot-ring:#c97b21b8;--bend-spot-glow:#c97b2129;--bend-spot-popover:#fffaf2;--bend-spot-popover-border:#c97b2152;--bend-spot-text:#6d4917;--shadow:none;background:#f7f7f7;font-family:Avenir Next,Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);text-rendering:optimizelegibility;margin:0;font-weight:500}button,select{font:inherit}.app-shell{min-height:100vh;position:relative;overflow:hidden}.background-glow,.background-glow-left,.background-glow-right{display:none}.page{width:min(1400px,100% - 32px);margin:0 auto;padding:48px 0 56px;position:relative}.page.step-by-step-page{width:min(1680px,100% - 32px)}.eyebrow,.card-kicker,.tip-scope,.field-label,.card-meta{text-transform:uppercase;letter-spacing:.11em;font-size:.74rem;font-weight:650}.eyebrow,.card-kicker,.tip-scope{color:var(--text-muted)}.app-header h1,.card-header h2,.tip-item h3{margin:0;font-family:Georgia,Times New Roman,serif;font-weight:600}.app-header{max-width:720px;margin-bottom:24px}.app-header h1{font-size:clamp(2rem,3vw,3rem);line-height:1.05}.app-header-copy{color:var(--text-muted);margin:10px 0 0;font-size:1rem;font-weight:500;line-height:1.65}.control-panel,.fretboard-card,.tips-card{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);border-radius:24px}.control-panel{grid-template-columns:minmax(220px,1.05fr) minmax(88px,.42fr) minmax(220px,1fr) minmax(220px,.95fr) minmax(220px,1fr);gap:16px;margin-bottom:24px;padding:18px;display:grid}.control-panel-step{grid-template-columns:minmax(220px,1.05fr) minmax(88px,.42fr) minmax(220px,1fr) minmax(220px,.95fr) minmax(220px,1fr)}.field{flex-direction:column;gap:10px;min-width:0;display:flex}.position-field{grid-column:span 1}.field-label,.card-meta{color:var(--text-subtle);overflow-wrap:anywhere}.field select,.segment,.field-readout{border:1px solid var(--panel-strong);min-height:48px;color:var(--text);background:#fff;border-radius:14px;font-weight:500}.field select{width:100%;padding:0 14px}.field-readout{color:var(--text-muted);align-items:center;padding:0 14px;display:flex}.segmented-control{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.control-field-learning .segmented-control,.control-field-labels .segmented-control{width:100%;max-width:320px}.segment{cursor:pointer;white-space:nowrap}.segment:not(.active):not(:disabled):hover{background:#f7f7f7;border-color:#0003}.segment.active{background:#f0f0f0;border-color:#0000003d}.segment:disabled{cursor:not-allowed;opacity:.45}.workspace-grid{grid-template-columns:minmax(0,1fr);gap:24px;min-width:0;display:grid}.workspace-grid-step{grid-template-columns:minmax(260px,300px) minmax(0,1fr);align-items:start}.workspace-content{gap:24px;min-width:0;display:grid}.fretboard-card,.tips-card,.step-nav-card{min-width:0;padding:22px}.step-nav-card{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);border-radius:24px;grid-template-rows:auto auto minmax(0,1fr);gap:18px;max-height:calc(100vh - 48px);display:grid;position:sticky;top:24px;overflow:hidden}.step-nav-header h2{margin-top:6px;font-size:1.35rem}.step-nav-copy{color:var(--text-muted);overflow-wrap:anywhere;margin:10px 0 0;font-weight:500;line-height:1.6}.step-nav-groups{gap:16px;min-height:0;padding-right:4px;display:grid;overflow-y:auto}.step-nav-group{gap:10px;display:grid}.step-nav-group+.step-nav-group{border-top:1px solid #00000014;padding-top:16px}.step-nav-group-title{color:var(--text-subtle);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}.step-nav-list{gap:8px;display:grid}.step-nav-item{text-align:left;border:1px solid var(--panel-strong);width:100%;color:var(--text);cursor:pointer;background:#fff;border-radius:14px;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;display:grid;position:relative}.step-nav-item:not(.active):hover{background:#f7f7f7;border-color:#0003}.step-nav-item:before{content:"";background:0 0;border-radius:999px;width:3px;position:absolute;top:10px;bottom:10px;left:0}.step-nav-item.active{background:#f7f4ee;border-color:#0000004d;box-shadow:inset 0 0 0 1px #0000000a}.step-nav-item.active:before{background:var(--accent)}.step-nav-number{width:28px;height:28px;color:var(--text-subtle);background:#f5f5f5;border-radius:999px;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:inline-flex}.step-nav-item.active .step-nav-number{background:var(--accent);color:#fff}.step-nav-label{overflow-wrap:anywhere;font-weight:500;line-height:1.35}.step-nav-item.active .step-nav-label{font-weight:700}.step-nav-actions{flex-shrink:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.card-header{justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px;display:flex}.card-header h2{overflow-wrap:anywhere;margin-top:6px;font-size:1.6rem}.card-header-side{flex-direction:column;align-items:flex-end;gap:10px;min-width:min(760px,100%);display:flex}.header-mode-groups{flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:14px 16px;width:100%;display:flex}.header-mode-control{flex-direction:column;flex:none;align-items:flex-end;gap:8px;display:flex}.segmented-control.compact{width:240px}.segmented-control.compact.view-mode-control-three{grid-template-columns:repeat(3,1fr);width:390px}.add-notes-control{grid-template-columns:repeat(3,1fr);width:360px}.add-notes-control.add-notes-control-binary{grid-template-columns:repeat(2,1fr);width:240px}.header-inline-note{width:100%;color:var(--bend-spot-text);text-align:right;margin:0;font-size:.88rem;font-weight:500;line-height:1.5}.header-guide-note{max-width:520px;color:var(--bend-spot-text);margin:14px 0 0;font-size:.95rem;font-weight:500;line-height:1.65}.fretboard-scroll{cursor:grab;touch-action:pan-x;-webkit-user-select:none;user-select:none;min-width:0;max-width:100%;padding-bottom:10px;overflow-x:auto}.fretboard-scroll.is-dragging{cursor:grabbing}.fretboard{border:1px solid var(--panel-strong);background:#fafafa;border-radius:18px;gap:0;width:max-content;min-width:100%;display:grid;overflow:visible}.corner-cell,.fret-header,.string-label,.fret-cell{border-right:1px solid var(--fret-line);border-bottom:1px solid var(--fret-line);justify-content:center;align-items:center;min-height:64px;display:flex}.corner-cell,.fret-header,.string-label{background:#f5f5f5}.fret-header,.string-label{color:var(--text-subtle);font-size:.88rem;font-weight:500}.fret-header.open-fret,.fret-cell.open-fret{border-right:4px solid var(--nut-line);background:var(--open-fret)}.string-label{z-index:1;background:#f5f5f5;border-right:1px solid #00000024;position:sticky;left:0}.fret-cell{background:#fff;position:relative}.fret-cell.focus-active{background:var(--base-zone)}.fret-cell.focus-start{border-left:3px solid #0000004d}.fret-cell.focus-end{border-right:3px solid #0000004d}.fret-cell.extension-active{background:var(--extension-zone)}.fret-cell.diagonal-primary{background:var(--diagonal-primary)}.fret-cell.diagonal-secondary{background:var(--diagonal-secondary)}.fret-cell:before{content:"";background:linear-gradient(90deg, transparent, var(--string-line), transparent);height:3px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.note-chip{z-index:1;min-width:32px;min-height:32px;color:var(--text);background:#fff;border:1px solid #0000002e;border-radius:999px;justify-content:center;align-items:center;padding:0 8px;font-size:.86rem;font-weight:700;display:inline-flex;position:relative}.note-chip.root{background:var(--root);color:#fff;box-shadow:0 0 0 3px var(--root-glow);border-color:#0000001f}.note-chip.added-note{background:var(--added-note-fill);border-color:var(--added-note-border);color:var(--added-note-text)}.bend-spot-trigger{appearance:none;cursor:pointer;z-index:2;background:0 0;border:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;position:relative}.bend-spot-chip{box-shadow:0 0 0 3px var(--bend-spot-glow), 0 0 0 5px var(--bend-spot-ring)}.bend-spot-chip-active{box-shadow:0 0 0 3px #c97b2138, 0 0 0 5px var(--bend-spot-ring)}.note-chip.root.bend-spot-chip{box-shadow:0 0 0 1px #ffffff24, 0 0 0 3px var(--bend-spot-glow), 0 0 0 5px var(--bend-spot-ring)}.note-chip.root.bend-spot-chip.bend-spot-chip-active{box-shadow:0 0 0 1px #ffffff24, 0 0 0 3px #c97b2138, 0 0 0 5px var(--bend-spot-ring)}.fret-cell.has-bend-popover{z-index:6}.bend-spot-popover{border:1px solid var(--bend-spot-popover-border);background:var(--bend-spot-popover);z-index:8;border-radius:16px;width:min(360px,100vw - 40px);padding:16px;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 18px 40px #0000001f}.bend-spot-popover:before{content:"";background:var(--bend-spot-popover);border-left:1px solid var(--bend-spot-popover-border);border-top:1px solid var(--bend-spot-popover-border);width:14px;height:14px;position:absolute;top:-7px;left:50%;transform:translate(-50%)rotate(45deg)}.bend-spot-popover-above{top:auto;bottom:calc(100% + 10px)}.bend-spot-popover-above:before{border-top:0;border-left:0;border-right:1px solid var(--bend-spot-popover-border);border-bottom:1px solid var(--bend-spot-popover-border);top:auto;bottom:-7px}.bend-spot-detail{gap:6px;display:grid}.bend-spot-detail+.bend-spot-detail{border-top:1px solid #c97b212e;margin-top:10px;padding-top:10px}.bend-spot-name,.bend-spot-meta,.bend-spot-note{margin:0}.bend-spot-name{color:var(--accent);font-size:1.08rem;font-weight:700}.bend-spot-meta{color:var(--bend-spot-text);gap:4px;font-size:.92rem;line-height:1.5;display:grid}.bend-spot-note{color:var(--text-muted);font-size:.96rem;font-weight:500;line-height:1.6}.fret-cell.inlay-single:after,.fret-cell.inlay-double-top:after,.fret-cell.inlay-double-bottom:after{content:"";background:var(--inlay);border-radius:999px;width:10px;height:10px;position:absolute;box-shadow:0 0 0 1px #fff1db14}.fret-cell.inlay-single:after{top:50%;left:50%;transform:translate(-50%,-50%)}.fret-cell.inlay-double-top:after{top:28%;left:50%;transform:translate(-50%,-50%)}.fret-cell.inlay-double-bottom:after{top:72%;left:50%;transform:translate(-50%,-50%)}.comment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;display:grid}.tip-item{border:1px solid var(--panel-strong);background:#fff;border-radius:18px;min-width:0;padding:18px}.tip-item h3{max-width:54ch;margin-top:8px;margin-bottom:18px;font-size:1.2rem;line-height:1.25}.tip-item p{max-width:68ch;color:var(--text-muted);overflow-wrap:anywhere;margin:0;font-size:1rem;font-weight:500;line-height:1.72}.tip-item p+p{margin-top:10px}.comment-blocks{gap:22px;display:grid}.comment-block{gap:9px;min-width:0;display:grid}.tip-item .comment-block-heading{max-width:64ch;color:var(--text);letter-spacing:0;margin:0 0 5px;font-size:.95rem;font-weight:650;line-height:1.45}.comment-list{max-width:68ch;color:var(--text-muted);overflow-wrap:anywhere;margin:0;padding-left:1.2rem;font-size:1rem;font-weight:500;line-height:1.7}.comment-list li+li{margin-top:6px}@media (width<=1180px){.comment-grid{grid-template-columns:1fr}}@media (width<=1080px){.control-panel,.control-panel-step{grid-template-columns:repeat(12,minmax(0,1fr))}.control-field-learning{grid-area:1/1/auto/7}.control-field-labels{grid-area:1/7/auto/13}.control-field-key{grid-area:2/1/auto/4}.control-field-scale{grid-area:2/4/auto/13}.position-field,.control-field-current{grid-area:3/1/auto/-1}}@media (width<=760px){.control-panel,.control-panel-step{grid-template-columns:1fr}.control-field-learning,.control-field-key,.control-field-scale,.control-field-labels,.position-field,.control-field-current{grid-area:auto/1/auto/-1}.control-field-learning{order:1}.control-field-labels{order:2}.control-field-key{order:3}.control-field-scale{order:4}.position-field,.control-field-current{order:5}.control-field-learning .segmented-control,.control-field-labels .segmented-control{width:100%;max-width:none}}@media (width<=1180px){.card-header{flex-direction:column}.card-header-side{align-items:flex-start;width:100%;min-width:0}.header-mode-groups{justify-content:flex-start}}@media (width<=980px){.workspace-grid-step{grid-template-columns:1fr}.step-nav-card{max-height:none;position:static;overflow:visible}}@media (width<=860px){.card-header-side,.header-mode-control{align-items:flex-start;width:100%}.header-mode-groups{justify-content:flex-start}.segmented-control.compact{width:100%}.add-notes-control{grid-template-columns:repeat(2,1fr)}.segmented-control.compact.view-mode-control-three{grid-template-columns:repeat(3,1fr);width:min(390px,100%)}}@media (width<=760px){.page{width:min(100% - 20px,1400px);padding-top:28px}.app-header h1{font-size:clamp(1.85rem,8vw,2.5rem)}.fretboard-card,.tips-card{padding:16px}.segmented-control.compact.view-mode-control-three{grid-template-columns:repeat(2,1fr);width:100%}}