:root{--bg:#1a1a1a;--panel:#1b1b1c;--panel-2:#1b1b1c;--border:#2a2f39;--fg:#dadada;--muted:#a5adba;--accent:#7aa2ff;--radius:12px;--shadow:0 2px 10px #32323240;--font:14px/1.5 "DM Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}*{box-sizing:border-box}html,body{scrollbar-gutter:stable;background:var(--bg);color:var(--fg);font:var(--font);margin:0}.wrap{max-width:1100px;margin:24px auto;padding:0 20px}.wrap img{width:300px;max-width:100%;height:auto;margin-left:auto;margin-right:auto;display:block}.ci-layout{justify-content:space-around;align-items:flex-start;gap:32px;display:flex}.ci-piano-col{margin-top:16px}.ci-interval-wrap{flex:1}.ci-controls{flex-direction:column;align-items:center;gap:32px;width:50%;margin-top:86px;display:flex}.ci-toggle-groups{justify-content:center;width:100%;display:flex}.ci-toggle-grid{grid-template-columns:auto auto;justify-content:center;justify-items:center;column-gap:50px;width:100%;display:grid}.ci-toggle-col{gap:8px;width:100%;min-width:60px;max-width:60px;display:grid}.ci-color-groups{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.ci-colors-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.ci-colors-row+.ci-colors-row{gap:12px}@media (max-width:640px){.wrap{margin:14px auto;padding:0 12px}.ci-layout{flex-direction:column;justify-content:flex-start;align-items:center;gap:14px}.ci-piano-col{margin-top:0}.ci-controls{gap:14px;width:100%;margin-top:0}.ci-toggle-grid{column-gap:18px}}h1{margin:0 0 14px;font-size:1.6rem;font-weight:800}
:root{--hitA:#ff4fa2;--hitB:#64c8ff;--hitC:#ccb534;--hitD:#8b5cf6;--hitE:#fb923c;--hitF:#22c55e;--hitG:#f43f5e;--hitRoot:#ff4fa2;--hitThird:#64c8ff;--hitFifth:#ccb534;--hitOther:#fff}.ci-piano{--w:60px;--gap:2px;width:calc(7*var(--w) + 7*var(--gap));-webkit-user-select:none;user-select:none;flex-wrap:nowrap;height:110px;margin:10px 0 14px;font-size:0;display:flex;position:relative}.ci-piano .note{box-sizing:border-box;color:#fff;background:0 0;border:none;border-radius:6px;padding:0;font-weight:700;position:relative}.ci-piano .white,.ci-piano .black{background:var(--panel-2);color:#fff;border:1px solid var(--border);box-shadow:none}.ci-piano .white{flex:0 0 var(--w);vertical-align:top;height:110px;margin-right:var(--gap);z-index:1;justify-content:center;align-items:flex-end;padding-bottom:8px;font-size:.92rem;display:inline-flex}.ci-piano .white:last-of-type{margin-right:0}.ci-piano .black{cursor:pointer;z-index:2;justify-content:center;align-items:flex-end;width:36px;height:66px;padding-bottom:6px;font-size:.8rem;display:flex;position:absolute;top:0}.ci-piano .black[data-note=C\#]{left:calc(1*var(--w) - 18px + 0*var(--gap))}.ci-piano .black[data-note=D\#]{left:calc(2*var(--w) - 18px + 1*var(--gap))}.ci-piano .black[data-note=F\#]{left:calc(4*var(--w) - 18px + 3*var(--gap))}.ci-piano .black[data-note=G\#]{left:calc(5*var(--w) - 18px + 4*var(--gap))}.ci-piano .black[data-note=A\#]{left:calc(6*var(--w) - 18px + 5*var(--gap))}.ci-piano button.note{cursor:pointer}.ci-piano .ci-key-tag{letter-spacing:.01em;color:#fffc;pointer-events:none;-webkit-user-select:none;user-select:none;padding:0;font-size:.72rem;font-weight:800;line-height:1;position:absolute;top:8px;left:50%;transform:translate(-50%)}.ci-piano .black .ci-key-tag{font-size:.62rem;top:6px}.ci-piano .ci-key-main{letter-spacing:.01em;font-weight:900}.ci-piano button.note:active{transform:translateY(1px)}.ci-piano .note.active-root{color:#0b0d12!important;background:#fff!important;border-color:#ffffffd9!important}.ci-piano .note.active-a{background:var(--hitA)!important;border-color:#383843!important}.ci-piano .note.active-b{background:var(--hitB)!important;border-color:#383843!important}.ci-piano .note.active-c{background:var(--hitC)!important;border-color:#383843!important}.ci-piano .note.active-d{background:var(--hitD)!important;border-color:#383843!important}.ci-piano .note.active-e{background:var(--hitE)!important;border-color:#383843!important}.ci-piano .note.active-f{background:var(--hitF)!important;border-color:#383843!important}.ci-piano .note.active-g{background:var(--hitG)!important;border-color:#383843!important}.ci-piano .note.active-root{background:var(--hitRoot)!important;border-color:#383843!important}.ci-piano .note.active-root-note{color:#0b0d12!important;background:#fff!important;border-color:#ffffffd9!important}.ci-piano .note.active-third{background:var(--hitThird)!important;border-color:#383843!important}.ci-piano .note.active-fifth{background:var(--hitFifth)!important;border-color:#383843!important}.ci-piano .note.active-other{background:var(--hitOther)!important;border-color:#383843!important}.ci-piano .note.active-i0{background:var(--hit0)!important;border-color:#383843!important}.ci-piano .note.active-i1{background:var(--hit1)!important;border-color:#383843!important}.ci-piano .note.active-i2{background:var(--hit2)!important;border-color:#383843!important}.ci-piano .note.active-i3{background:var(--hit3)!important;border-color:#383843!important}.ci-piano .note.active-i4{background:var(--hit4)!important;border-color:#383843!important}.ci-piano .note.active-i5{background:var(--hit5)!important;border-color:#383843!important}.ci-piano .note.active-i6{background:var(--hit6)!important;border-color:#383843!important}.ci-piano .note.active-i7{background:var(--hit7)!important;border-color:#383843!important}.ci-piano .note.active-i8{background:var(--hit8)!important;border-color:#383843!important}.ci-piano .note.active-i9{background:var(--hit9)!important;border-color:#383843!important}.ci-piano .note.active-i10{background:var(--hit10)!important;border-color:#383843!important}.ci-piano .note.active-i11{background:var(--hit11)!important;border-color:#383843!important}@media (max-width:640px){.ci-piano{--w:44px;--gap:2px;height:92px;margin:8px 0 10px}.ci-piano .white{height:92px;padding-bottom:6px;font-size:.84rem}.ci-piano .black{width:28px;height:56px;padding-bottom:5px;font-size:.72rem}}
/*# sourceMappingURL=43dfc9b15a6b996b.css.map*/