html,body{margin:0;background-color:#212529;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}#app-viewport{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}.gc-wrap{width:100%;max-width:420px;margin:0 auto;padding:0 8px;box-sizing:border-box;display:flex;flex-direction:column;flex:1}.gc-top{flex:0 0 auto;padding:32px 0 18px;display:flex;flex-direction:column;align-items:center;user-select:none}.gc-chord-name{height:64px;display:flex;align-items:center;justify-content:center;font-size:2.7rem;font-weight:800;text-align:center;white-space:nowrap;cursor:pointer;transition:transform .12s ease,color .12s ease}.gc-chord-name:hover{color:#ff8790}.gc-chord-name.playing{color:#e63946;transform:scale(0.95)}.gc-position-label{height:22px;line-height:22px;font-size:.85rem;color:rgba(255,255,255,.55);text-align:center}.gc-diagram-stage{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;margin-top:6px;touch-action:pan-y}.gc-diagram-svg-wrap{width:100%;max-width:372px;aspect-ratio:284/175;flex:1 1 auto;min-width:0}.gc-str-hit{cursor:pointer}.gc-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:#fff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}.gc-arrow:hover{background:rgba(255,255,255,.14)}.gc-arrow.inactive{visibility:hidden;pointer-events:none}.gc-dots{height:20px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}.gc-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer}.gc-dot.active{background:#e63946}.gc-bottom{flex:1 1 auto;display:flex;flex-direction:column;padding:0 0 8px}.gc-section-label{font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.45);margin:0 2px 6px;text-transform:uppercase}.gc-root-keys{display:grid;grid-template-columns:repeat(14, 1fr);gap:6px}.gc-root-keys .gc-root-btn{grid-row:1;grid-column:span 2}.gc-root-keys .gc-root-btn.black{grid-row:2}.gc-root-keys .k-cs{grid-column:2/span 2}.gc-root-keys .k-ds{grid-column:4/span 2}.gc-root-keys .k-fs{grid-column:8/span 2}.gc-root-keys .k-gs{grid-column:10/span 2}.gc-root-keys .k-as{grid-column:12/span 2}.gc-root-btn{height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 1px;text-align:center;line-height:1.1;white-space:nowrap}.gc-root-btn.active{background:#e63946;border-color:#e63946}.gc-modebox{display:grid;margin:22px 0 16px}.gc-modebox>*{grid-area:1/1;align-self:start}.gc-quality-head{margin-top:0}.gc-quality-grid{margin:0;display:grid;grid-template-columns:repeat(5, 1fr);gap:5px}.gc-quality-grid .group-start{grid-column-start:1}.gc-chip{width:100%;min-width:0;height:36px;padding:0 4px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:.78rem;white-space:nowrap;text-align:center}.gc-chip.active{background:#e63946;border-color:#e63946}.gc-share-btn{width:fit-content;height:50px;flex-shrink:0;align-self:center;margin:auto 0;padding:0 30px;border-radius:8px;border:1px solid #e63946;background:#e63946;color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.gc-share-btn:hover{background:#d12836;border-color:#d12836}.gc-share-btn.copied{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}.gc-share-btn i{font-size:1.25rem}.gc-wrap:not(.mode-key) .gc-key-only{visibility:hidden}.gc-wrap.mode-key .gc-single-only{visibility:hidden}.gc-toggle-row{display:flex;align-items:stretch;gap:8px;margin:24px 0;min-height:34px}.gc-mode-toggle,.gc-scale-toggle{flex:1 1 auto;display:flex;gap:3px;padding:3px;border-radius:8px;background:rgba(255,255,255,.06);box-sizing:border-box}.gc-mode-toggle{max-width:100%;transition:max-width .28s ease}.gc-wrap.mode-key .gc-mode-toggle{max-width:calc(50% - 4px)}.gc-scale-toggle{max-width:0;padding-left:0;padding-right:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-width .28s ease,padding .28s ease,opacity .2s ease,visibility 0s linear .28s}.gc-wrap.mode-key .gc-scale-toggle{max-width:calc(50% - 4px);padding-left:3px;padding-right:3px;opacity:1;visibility:visible;transition:max-width .28s ease,padding .28s ease,opacity .2s ease .06s,visibility 0s}@media(prefers-reduced-motion: reduce){.gc-mode-toggle,.gc-scale-toggle,.gc-wrap.mode-key .gc-scale-toggle{transition-duration:0s;transition-delay:0s}}.gc-mode-toggle button,.gc-scale-toggle button{flex:1;min-width:0;border:none;background:rgba(0,0,0,0);color:rgba(255,255,255,.5);border-radius:5px;cursor:pointer;font-size:.72rem;font-weight:700;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 2px}.gc-mode-toggle button i,.gc-scale-toggle button i{font-size:.9rem;line-height:1;flex:0 0 auto}.gc-mode-toggle button span,.gc-scale-toggle button span{min-width:0;overflow:hidden;text-overflow:ellipsis}.gc-mode-toggle button.active,.gc-scale-toggle button.active{background:#e63946;color:#fff}.gc-diatonic{margin:0}.gc-dia-romans,.gc-dia-row{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px}.gc-dia-romans{margin-bottom:3px;line-height:1}.gc-dia-romans span{text-align:center;font-size:.56rem;color:rgba(255,255,255,.4)}.gc-dia-row{margin-bottom:4px}.gc-deg{min-width:0;height:32px;padding:0 1px;border-radius:7px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;cursor:pointer}.gc-deg.active{background:#e63946;border-color:#e63946}@media(max-height: 860px){.gc-top{padding:12px 0 8px}.gc-chord-name{height:50px;font-size:2.3rem}.gc-diagram-stage{margin-top:2px}.gc-dots{margin-top:4px}.gc-bottom{padding:0 0 10px}.gc-modebox{margin:14px 0 12px}.gc-root-btn{height:38px}.gc-chip{height:32px}.gc-share-btn{height:46px;margin:auto 0}.gc-toggle-row{margin:16px 0;min-height:32px}.gc-mode-toggle button,.gc-scale-toggle button{padding:5px 2px}.gc-deg{height:29px}}@media(max-height: 740px){#app-viewport{padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}.gc-top{padding:6px 0 4px}.gc-chord-name{height:40px;font-size:1.95rem}.gc-position-label{height:16px;line-height:16px;font-size:.8rem}.gc-diagram-stage{margin-top:0}.gc-diagram-svg-wrap{max-width:266px}.gc-dots{height:14px;margin-top:2px}.gc-bottom{padding:0 0 8px}.gc-section-label{margin-bottom:3px}.gc-root-keys{gap:4px}.gc-root-btn{height:34px}.gc-modebox{margin:10px 0 10px}.gc-quality-grid{gap:4px}.gc-chip{height:29px}.gc-share-btn{height:40px;margin:auto 0}.gc-toggle-row{margin:12px 0;min-height:30px;gap:6px}.gc-mode-toggle button,.gc-scale-toggle button{padding:4px 2px;font-size:.66rem;gap:3px}.gc-mode-toggle button i,.gc-scale-toggle button i{font-size:.82rem}.gc-dia-romans,.gc-dia-row{gap:3px}.gc-dia-row{margin-bottom:3px}.gc-deg{height:26px;font-size:.58rem}}@media(max-width: 360px){.gc-deg{font-size:.58rem}}