@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--h:345;--s:46%;--l:22%;--fg:#fff;--fg-2:#ffffffb8;--fg-3:#ffffff80;--line:#ffffff1a;--glass:#ffffff12;--glass-2:#ffffff1f;--accent:#ffb3d9;--accent-strong:#ff8cc6;--danger:#ff8a8a;--panel-bg:hsl(var(--h) calc(var(--s) * .5) calc(var(--l) * .45));--radius:28px;--font:"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;color:var(--fg);font-family:var(--font);font-feature-settings:"cv11", "ss01";-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#07040a;margin:0;overflow:hidden}button{font:inherit;color:inherit}#backdrop{background:radial-gradient(55% 60% at 50% 45%, hsl(var(--h) var(--s) calc(var(--l) * .75)) 0%, transparent 75%), #06040a;transition:background .6s;position:fixed;inset:0}#shell{justify-content:center;align-items:center;gap:24px;height:100dvh;display:flex;position:relative}.stage{isolation:isolate;background:radial-gradient(120% 62% at 50% 38%, hsl(var(--h) var(--s) calc(var(--l) + 8%)) 0%, hsl(var(--h) var(--s) var(--l)) 46%, hsl(var(--h) calc(var(--s) - 6%) calc(var(--l) - 9%)) 100%);width:100vw;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:relative;overflow:hidden;container-type:inline-size}.stage:after{content:"";pointer-events:none;z-index:5;background:radial-gradient(130% 100% at 50% 40%,#0000 55%,#00000059 100%);position:absolute;inset:0}@media (min-width:560px) and (min-height:560px){.stage{border-radius:var(--radius);width:calc(min(100dvh - 40px,1100px)/1.77778);height:min(100dvh - 40px,1100px);box-shadow:0 40px 120px #000000a6, 0 0 0 1px #ffffff12, 0 0 120px hsl(var(--h) var(--s) calc(var(--l) * .8) / .5)}}.topbar{z-index:6;flex:none;justify-content:space-between;align-items:center;padding:12px 14px 0;display:flex;position:relative}.transport{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000002e;border-radius:999px;align-items:center;gap:6px;padding:4px;display:flex;box-shadow:inset 0 0 0 1px #ffffff12}.icon-btn{width:42px;height:42px;color:var(--fg);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;transition:background .2s,transform .15s,color .2s;display:grid}.icon-btn:hover{background:var(--glass)}.icon-btn:active{transform:scale(.92)}.icon-btn.active{background:var(--glass-2);color:var(--accent)}.play-btn{cursor:pointer;width:50px;height:50px;color:hsl(var(--h) 50% 18%);background:#fff;border:0;border-radius:999px;place-items:center;transition:transform .15s,box-shadow .3s;display:grid;box-shadow:0 0 24px #ffffff59}.play-btn:hover{box-shadow:0 0 34px #ffffff8c}.play-btn:active{transform:scale(.92)}.play-btn svg{margin-left:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.title{z-index:4;text-align:center;flex:none;padding:1.5cqw 16px 0;position:relative}.chord-name{height:25cqw;max-height:150px;position:relative}.cn{--fit:1;white-space:nowrap;letter-spacing:-.035em;text-shadow:0 0 40px #ffffff40;justify-content:center;align-items:baseline;padding-top:2cqw;font-weight:700;line-height:1;transition:opacity .38s,transform .5s cubic-bezier(.2,.8,.2,1),filter .38s;display:flex;position:absolute;inset:0}.cn.enter{opacity:0;filter:blur(8px);transform:translateY(10px)scale(.96)}.cn.leave{opacity:0;filter:blur(8px);transform:translateY(-10px)scale(1.03)}.cn .root{font-size:calc(21cqw * var(--fit))}.cn .acc{font-size:calc(9cqw * var(--fit));margin:calc(1.8cqw * var(--fit)) 0 0 .4cqw;align-self:flex-start;font-weight:600}.cn .qual{font-size:calc(10.5cqw * var(--fit));letter-spacing:-.02em;margin-left:.8cqw;font-weight:600}.cn .bass{font-size:calc(7.5cqw * var(--fit));opacity:.75;margin-left:.5cqw;font-weight:500}@media (min-width:560px) and (min-height:560px){.chord-name{max-height:none}}.sub{color:var(--fg-2);letter-spacing:.01em;margin-top:.5cqw;font-size:clamp(12px,3.5cqw,17px);font-weight:500}.viz-wrap{z-index:3;flex:auto;min-height:180px;position:relative}#viz{touch-action:pan-y;cursor:pointer;width:100%;height:100%;display:block;position:absolute;inset:0}.start{cursor:pointer;z-index:2;background:0 0;border:0;flex-direction:column;align-items:center;gap:14px;transition:opacity .5s,transform .5s;display:flex;position:absolute;top:50%;left:70%;transform:translate(-50%,-50%)}.start-orb{background:radial-gradient(circle,#fff 0 18%,#ffc8e68c 34%,#ff96d226 60%,#0000 72%);border-radius:999px;width:84px;height:84px;animation:2.4s ease-in-out infinite pulse;position:relative}.start-orb:after{content:"";background:hsl(var(--h) 50% 20%);clip-path:polygon(0 0,100% 50%,0 100%);position:absolute;inset:31px 28px 31px 36px}.start-text{letter-spacing:.04em;color:var(--fg-2);text-shadow:0 0 20px #00000080;font-size:15px;font-weight:600}.start.gone{opacity:0;pointer-events:none;transform:translate(-50%,-50%)scale(1.3)}@keyframes pulse{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2);transform:scale(1.08)}}.instruments{z-index:4;flex:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end;gap:4cqw;padding:2cqw 5cqw max(4cqw,14px);display:grid;position:relative}.inst{flex-direction:column;align-items:center;gap:1.6cqw;min-width:0;display:flex}.inst-label{letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);font-variant-numeric:tabular-nums;background:0 0;border:0;padding:0;font-size:clamp(10px,2.6cqw,13px);font-weight:600}button.inst-label{cursor:pointer}.guitar{cursor:pointer;border-radius:10px;width:100%;max-width:190px}.guitar-svg{width:100%;height:auto;display:block;overflow:visible}.g-grid line{stroke:#ffffff9e;stroke-width:1px}.g-nut{stroke:#fff;stroke-width:4px;stroke-linecap:round}.g-pos{fill:var(--fg);font-size:12px;font-weight:600}.g-mark{fill:var(--fg-2);font-size:13px;font-weight:500}.g-open{fill:none;stroke:var(--fg);stroke-width:1.4px}.g-dots rect,.g-dots circle{fill:#fff;filter:drop-shadow(0 0 4px #ffffff73)}.g-name{fill:var(--fg-2);font-size:10.5px;font-weight:600}.g-name.g-root{fill:#fff}.g-name.g-muted{fill:var(--fg-3);font-size:9px}.g-none{fill:var(--fg-3);font-size:11px}.piano{width:100%}.piano-svg{width:100%;height:auto;display:block;overflow:visible}.p-white rect{fill:#ffffffe0;stroke:#00000040;stroke-width:.6px;transition:fill .35s}.p-black rect{fill:hsl(var(--h) 30% 9%);stroke:#00000080;stroke-width:.6px;transition:fill .35s}.p-labels text{font-size:9.5px;font-weight:600}.panel{--pad:16px;color:var(--fg);background:color-mix(in srgb, var(--panel-bg) 96%, transparent);-webkit-backdrop-filter:blur(24px)saturate(1.3);z-index:20;flex-direction:column;display:flex;box-shadow:0 0 0 1px #ffffff14,0 30px 80px #00000080}#shell.docked .panel{border-radius:var(--radius);opacity:0;width:0;height:min(100dvh - 40px,1100px);margin-left:-24px;transition:width .45s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .45s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}#shell.docked .panel.open{opacity:1;width:400px;margin-left:0}#shell.docked .panel>*{min-width:400px}#shell.docked .panel-grip{display:none}.panel.sheet-mode{max-width:560px;height:min(74dvh,760px);padding-bottom:env(safe-area-inset-bottom);border-radius:24px 24px 0 0;margin:0 auto;transition:transform .45s cubic-bezier(.2,.8,.2,1);position:fixed;bottom:0;left:0;right:0;transform:translateY(105%)}.panel.sheet-mode.open{transform:translateY(0)}.panel-grip{background:#ffffff47;border-radius:99px;flex:none;width:44px;height:5px;margin:8px auto 0}.panel-head{padding:10px 10px 10px var(--pad);border-bottom:1px solid var(--line);touch-action:none;flex:none;align-items:center;gap:8px;display:flex}.tabs{scrollbar-width:none;flex:1;gap:4px;display:flex;overflow-x:auto}.tab{color:var(--fg-3);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:8px 12px;font-size:14px;font-weight:600;transition:background .2s,color .2s}.tab:hover{color:var(--fg)}.tab.on{color:var(--fg);background:var(--glass-2)}.panel-close{flex:none;width:38px;height:38px}.panel-body{overscroll-behavior:contain;padding:12px var(--pad) 28px;scrollbar-width:thin;scrollbar-color:#fff3 transparent;-webkit-user-select:none;user-select:none;flex:1;overflow-y:auto}.page{flex-direction:column;gap:12px;display:flex}.page[hidden]{display:none}.card{background:#0000002e;border:1px solid #ffffff0f;border-radius:18px;flex-direction:column;gap:12px;padding:14px;display:flex}.card-title{letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:0;font-size:12px;font-weight:700}.muted{color:var(--fg-3)}.small{margin:0;font-size:12px;line-height:1.45}.row{align-items:center;gap:10px;display:flex}.row-split{align-items:flex-end}.row-split>*{flex:1;min-width:0}.row-split>.ctl-toggle{min-height:36px}.ctl{flex-direction:column;gap:7px;min-width:0;display:flex}.ctl-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.ctl-label{color:var(--fg-2);font-size:13px;font-weight:500}.ctl-label small{color:var(--fg-3);margin-top:2px;font-size:11.5px;font-weight:400;display:block}.ctl-value{font-variant-numeric:tabular-nums;color:var(--fg);font-size:12.5px;font-weight:600}.range{--a:0%;--b:50%;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:24px;margin:0}.range::-webkit-slider-runnable-track{background:linear-gradient(90deg, #ffffff24 var(--a), var(--accent) var(--a), var(--accent) var(--b), #ffffff24 var(--b));border-radius:99px;height:4px}.range::-moz-range-track{background:linear-gradient(90deg, #ffffff24 var(--a), var(--accent) var(--a), var(--accent) var(--b), #ffffff24 var(--b));border-radius:99px;height:4px}.range::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:0;border-radius:50%;width:18px;height:18px;margin-top:-7px;transition:transform .15s;box-shadow:0 0 0 4px #ffb3d92e,0 0 14px #ffb3d9a6}.range::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 4px #ffb3d92e,0 0 14px #ffb3d9a6}.range:active::-webkit-slider-thumb{transform:scale(1.15)}.seg{background:#ffffff0f;border-radius:12px;gap:3px;padding:3px;display:flex}.seg-btn{min-width:0;color:var(--fg-3);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:9px;flex:1 1 0;place-items:center;padding:7px 4px;font-size:12.5px;font-weight:600;transition:background .2s,color .2s;display:grid}.seg-btn:hover{color:var(--fg)}.seg-btn.on{color:#fff;background:#ffffff29;box-shadow:0 1px 8px #0003}.seg-waves .seg{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));display:grid}.seg-waves .seg-btn{padding:5px 2px}.seg-waves .seg-btn.on{color:var(--accent)}.seg-themes .seg{background:0 0;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;padding:0;display:grid}.seg-themes .seg-btn{background:#ffffff0d;border-radius:12px;justify-items:start;padding:8px 10px}.swatch-wrap{align-items:center;gap:8px;display:flex}.swatch{border-radius:50%;width:16px;height:16px;box-shadow:inset 0 0 0 1px #ffffff4d}.swatch-auto{background:conic-gradient(#297aa3,#7a29a3,#a32952,#a35229,#297aa3)}.ctl-toggle{flex-direction:row;justify-content:space-between;align-items:center}.switch{cursor:pointer;flex:none;position:relative}.switch-input{opacity:0;width:1px;height:1px;position:absolute}.switch-track{background:#ffffff29;border-radius:99px;width:44px;height:26px;transition:background .25s;display:block;position:relative}.switch-track:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .25s cubic-bezier(.2,.8,.2,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #0000004d}.switch-input:checked+.switch-track{background:var(--accent-strong)}.switch-input:checked+.switch-track:after{transform:translate(18px)}.switch-input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}.ctl-stepper{gap:6px}.stepper{background:#ffffff0f;border-radius:12px;justify-content:space-between;align-items:center;padding:3px;display:flex}.stepper-val{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.icon-sm{width:30px;height:30px;color:var(--fg-2);cursor:pointer;background:0 0;border:0;border-radius:9px;flex:none;place-items:center;transition:background .2s,color .2s;display:grid}.icon-sm:hover:not(:disabled){background:var(--glass-2);color:#fff}.icon-sm:disabled{opacity:.25;cursor:default}.icon-sm.danger:hover:not(:disabled){color:var(--danger)}.select{appearance:none;width:100%;font:inherit;color:#fff;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 12px center no-repeat,#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;padding:11px 36px 11px 12px;font-size:14px;font-weight:600}.select option{color:#111}.btn{color:#fff;cursor:pointer;white-space:nowrap;background:#ffffff1a;border:0;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:10px 14px;font-size:13.5px;font-weight:600;transition:background .2s,transform .15s;display:inline-flex}.btn:hover{background:#ffffff29}.btn:active{transform:scale(.97)}.btn-primary{color:hsl(var(--h) 45% 20%);background:#fff}.btn-primary:hover{background:#ffe6f2}.btn.danger{color:var(--danger)}.btn-row{flex-wrap:wrap;gap:8px;display:flex}.chord-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.chord-row{background:#ffffff0d;border-radius:12px;align-items:center;gap:6px;padding:4px 4px 4px 8px;display:flex}.chord-idx{width:18px;color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums;flex:none;font-size:11px;font-weight:600}.chord-input{min-width:0;font:inherit;color:#fff;-webkit-user-select:text;user-select:text;background:0 0;border:1px solid #0000;border-radius:8px;flex:1;padding:6px 8px;font-size:15px;font-weight:600}.chord-input:focus{background:#00000026;border-color:#ffffff40;outline:none}.chord-input.invalid{color:#ffc4c4;border-color:#ff7878b3}.beats{flex:none;align-items:center;display:flex}.beats .icon-sm{width:24px;height:28px}.beats-val{text-align:center;font-variant-numeric:tabular-nums;min-width:24px;font-size:13px;font-weight:600}.row-tools{flex:none;display:flex}.row-tools .icon-sm{width:26px;height:28px}.chord-actions{justify-content:space-between;align-items:center;gap:8px;display:flex}.transpose{color:var(--fg-2);background:#ffffff0f;border-radius:12px;align-items:center;gap:4px;padding:3px;font-size:13px;font-weight:600;display:flex}.chord-text{resize:vertical;min-width:0;font:inherit;color:#fff;-webkit-user-select:text;user-select:text;background:#0003;border:1px solid #ffffff1a;border-radius:12px;flex:1;padding:9px 10px;font-size:14px}.chord-text:focus{border-color:#ffffff4d;outline:none}.scope,.graph{aspect-ratio:4;background:#00000040;border-radius:12px;width:100%;height:auto;display:block}.graph{aspect-ratio:4}.shortcuts{color:var(--fg-2);grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13px;display:grid}.shortcuts dt,.shortcuts dd{margin:0}kbd{font:inherit;color:#fff;background:#ffffff1a;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:600;box-shadow:inset 0 -1px #ffffff1f}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));opacity:0;pointer-events:none;z-index:50;color:hsl(var(--h) 40% 18%);background:#fffffff2;border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:600;transition:opacity .3s,transform .3s;position:fixed;transform:translate(-50%,20px);box-shadow:0 10px 30px #0006}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.cn,.panel,.start-orb{transition:none!important;animation:none!important}}