:root{--font-geist:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-geist-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--font-inter:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--page-bg:#fff;--text-strong:#111;--muted:#7e7e7e;--separator:#cacaca;--title:#00000080;--hint-default:#00000080;--hint-active:#2563eb;--subtle:#00000012;--toggle-track:#0000000d;--panel-bg:#ffffff73;--fretboard-bg:#00000005;--fretboard-border:#0000000d;--fret-line:#0000000d;--marker-dot:#0000000d;--string-color:#0000000d;--dot-inactive:#0000000d;--dot-text-inactive:#959595;--dot-text-active:#000;--fret-num-default:#959595;--control-shadow:inset 0 0 0 1px #0000000a;--panel-shadow:0 0 0 1px #00000008, 0 1px 2px #00000008, 0 2px 8px #00000008;--toggle-shadow:0 0 0 1px #0000000a, 0 1px 2px #0000000f, 0 2px 4px #0000000a;--easecurve:ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--page-bg);color:var(--text-strong);font-family:var(--font-inter);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;min-height:100vh}.app-shell{background:var(--page-bg);flex-direction:column;min-height:100vh;display:flex;position:relative}.page-gradient{pointer-events:none;z-index:0;transition:background .6s;position:fixed;inset:0}.instrument-toggle{background:var(--toggle-track);z-index:10;border-radius:20px;gap:2px;padding:3px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.instrument-toggle-button{color:#888;cursor:pointer;font-family:var(--font-inter), system-ui, sans-serif;background:0 0;border:0;border-radius:16px;padding:4px 14px;font-size:13px;font-weight:400;transition:background .15s,color .15s}.instrument-toggle-button.is-active{box-shadow:var(--toggle-shadow);color:var(--text-strong);background:#fff}.fretboard-area{z-index:1;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.fretboard-scroll{width:100%;overflow-x:auto}.controls{z-index:1;flex-direction:column;gap:16px;padding:0 5% 100px;display:flex;position:relative}.controls button:not(.more-btn),.controls input{transition:background .15s,max-width .25s,padding .25s,opacity .2s}.controls button:not(.more-btn):hover,.controls input:hover{background:#0000001c!important}.title-row{justify-content:space-between;align-items:center;display:flex}.app-title{color:var(--title);font-family:var(--font-inter), system-ui, sans-serif;font-size:16px;font-weight:500;line-height:24px}.shortcut-hint{color:var(--hint-default);font-family:var(--font-inter), system-ui, sans-serif;white-space:nowrap;border-radius:4px;padding:3px 8px;font-size:12px;transition:background .1s,color .1s}.shortcut-hint.is-active{background:var(--hint-active);color:#fff}.panels-row{align-items:stretch;gap:16px;display:flex}.panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--panel-bg);box-shadow:var(--panel-shadow);border-radius:12px;flex-direction:column;gap:24px;padding:17px;display:flex}.panel-left{flex:0 0 426px}.panel-key{flex:none}.panel-chords{flex:1;justify-content:space-between;overflow:hidden}.control-section,.relative-controls{flex-direction:column;gap:8px;display:flex}.relative-controls{gap:4px}.control-label{color:var(--muted);font-family:var(--font-inter), system-ui, sans-serif;font-size:12px;font-weight:400;line-height:16px}.button-row,.view-as-row{align-items:center;gap:4px;display:flex}.button-row.wrap{flex-wrap:wrap}.button-separator{color:var(--separator);font-family:var(--font-inter), system-ui, sans-serif;padding:0 2px;font-size:12px}.pill{background:var(--subtle);box-shadow:var(--control-shadow);color:var(--muted);cursor:pointer;font-family:var(--font-inter), system-ui, sans-serif;letter-spacing:-.02em;opacity:.4;white-space:nowrap;border:0;border-radius:4px;padding:4px 8px;font-size:14px;font-weight:400;line-height:18px}.pill.is-active{opacity:1}.expandable-pill{transition:max-width .2s ease-out,padding .2s ease-out,opacity .2s ease-out,background .15s;overflow:hidden}.degree-grid{flex-wrap:wrap;gap:5px;display:flex}.degree-toggle{background:var(--subtle);box-shadow:var(--control-shadow);cursor:pointer;opacity:.4;border:0;border-radius:4px;align-items:center;gap:7px;padding:6px 8px;transition:opacity .15s;display:flex}.degree-toggle.is-active{opacity:1}.degree-swatch{border-radius:50%;flex-shrink:0;width:16px;height:16px}.degree-label{color:var(--muted);font-family:var(--font-inter), system-ui, sans-serif;white-space:nowrap;font-size:12px;line-height:16px}.more-btn{color:var(--muted);cursor:pointer;font-family:var(--font-inter), system-ui, sans-serif;text-align:left;background:0 0;border:0;margin-top:auto;padding:0;font-size:12px;text-decoration:underline;text-decoration-thickness:1px;transition:opacity .15s}.more-btn:hover{opacity:.5!important}.chord-input{background:var(--subtle);box-shadow:var(--control-shadow);color:var(--muted);font-family:var(--font-inter), system-ui, sans-serif;letter-spacing:-.02em;border:0;border-radius:4px;outline:none;width:100%;padding:4px 8px;font-size:14px;line-height:18px}.chord-input[data-filled=false]{opacity:.4}.chord-stage{min-height:55px;position:relative}.chord-scroll{scrollbar-width:none;flex-wrap:nowrap;gap:16px;display:flex;overflow-x:auto}.chord-scroll::-webkit-scrollbar{display:none}.chord-item{flex-direction:column;align-items:center;gap:5px;display:flex}.chord-roman{color:var(--muted);font-family:var(--font-inter), system-ui, sans-serif;letter-spacing:-.02em;font-size:14px;line-height:18px}.chord-fade{pointer-events:none;background:linear-gradient(90deg,#0000,#ffffffe6);width:48px;position:absolute;top:0;bottom:0;right:0}.relative-block{min-height:48px}.fretboard{margin:0 auto;display:block;position:relative;overflow:visible}.fretboard-board{background:var(--fretboard-bg);border:1px solid;border-color:var(--fretboard-border);border-radius:8px;position:absolute}.marker-dot{background:var(--marker-dot);border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.fret-line{background:var(--fret-line);width:1.5px;position:absolute;transform:translate(-50%)}.instrument-string{background:var(--string-color);height:1.5px;position:absolute;transform:translateY(-50%)}.fret-range-pill{background:var(--hint-active);pointer-events:none;border-radius:12px;height:24px;position:absolute}.fret-range-pill.is-active.is-ltr{animation:.2s ease-out both range-select-ltr}.fret-range-pill.is-active.is-rtl{animation:.2s ease-out both range-select-rtl}@keyframes range-select-ltr{0%{clip-path:inset(0 100% 0 0 round 12px)}to{clip-path:inset(0 round 12px)}}@keyframes range-select-rtl{0%{clip-path:inset(0 0 0 100% round 12px)}to{clip-path:inset(0 round 12px)}}.fret-dot{cursor:pointer;font-family:var(--font-inter);-webkit-user-select:none;user-select:none;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-weight:400;line-height:1;transition:background .18s,box-shadow .18s,color .18s,transform .15s;display:flex;position:absolute;overflow:visible;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #00000014}.fret-dot.is-inactive{background:var(--dot-inactive);color:var(--dot-text-inactive);-webkit-backdrop-filter:blur(1.5px)saturate(150%);backdrop-filter:blur(1.5px)saturate(150%);box-shadow:inset 0 0 0 1px #00000008}.modifier-held .fret-dot{box-shadow:0 1px 2px #0000000d,0 2px 7px #0000000f,inset 0 0 0 1px #00000014}.modifier-held .fret-dot.is-inactive{box-shadow:0 1px 2px #00000005,0 2px 7px #00000008,inset 0 0 0 1px #00000008}.fret-dot:after{border-radius:inherit;content:"";pointer-events:none;z-index:1;transition:background .15s;position:absolute;inset:0}.fret-dot:hover:after{background:#0000000d}.fret-dot:active:after{background:#0000001a}.modifier-held .fret-dot{transform:translate(-50%,calc(-50% - 2px))}.fret-dot:active{transition-duration:50ms;transform:translate(-50%,-50%)!important}.dot-label,.dot-label-swap{pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dot-label{will-change:transform, opacity;transform:translateZ(0)}.dot-label-swap{overflow:hidden}.dot-label-swap.to-degrees .outgoing{animation:dot-label-out-down .26s var(--easecurve) both}.dot-label-swap.to-degrees .incoming{animation:dot-label-in-from-top .26s var(--easecurve) both}.dot-label-swap.to-notes .outgoing{animation:dot-label-out-up .26s var(--easecurve) both}.dot-label-swap.to-notes .incoming{animation:dot-label-in-from-bottom .26s var(--easecurve) both}@keyframes dot-label-out-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(80%)}}@keyframes dot-label-in-from-top{0%{opacity:0;transform:translateY(-80%)}to{opacity:1;transform:translateY(0)}}@keyframes dot-label-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-80%)}}@keyframes dot-label-in-from-bottom{0%{opacity:0;transform:translateY(80%)}to{opacity:1;transform:translateY(0)}}.fret-num-group{cursor:pointer;font-family:var(--font-inter), system-ui, sans-serif;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:13px;font-weight:400;line-height:1;display:flex;position:absolute;transform:translate(-50%,-50%)}.fret-num-group.fret-num-anchor{background:var(--hint-active)}.fret-num-group:hover:not(.fret-num-selected){color:#000!important;background:#ffffff80!important}.fret-dot:focus-visible,.fret-num-group:focus-visible{outline:2px solid var(--hint-active);outline-offset:3px}@media (max-width:768px){.controls{gap:16px;padding:24px 16px 48px}.panels-row{flex-direction:column}.panel-left,.panel-key,.panel-chords{flex:auto;width:100%}.fretboard-area{min-height:180px;padding:60px 0 16px}.view-as-row{flex-wrap:wrap}}