@layer reset,base,components,custom;@layer routes{.midi-test{background-color:oklch(18% .019 274.6);min-height:100dvh;padding-top:24rem;padding-bottom:4rem}.midi-test__container{width:100%;max-width:100%;padding-inline:0}.midi-dashboard{grid-template-columns:1fr;align-items:stretch;gap:0;display:grid}@media (width>=700px){.midi-dashboard.midi-dashboard--collapsed{grid-template-columns:1fr}}.midi-dashboard__sidebar{flex-direction:column;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.midi-dashboard__sidebar--hidden{display:none}@media (width>=700px){.midi-dashboard__sidebar{width:44rem;min-width:44rem}}.midi-dashboard__main{flex-direction:column;gap:0;min-width:0;display:flex}.midi-dashboard__tab-content{flex-direction:column;flex:1;min-height:0;display:flex}@media (width>=700px){.midi-dashboard{grid-template-columns:44rem 1fr;min-height:calc(100vh - 28rem)}}.midi-sidebar{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);flex-direction:column;gap:1.75rem;width:100%;min-height:100%;padding:2rem 1.5rem;display:flex}.midi-sidebar__group{flex-direction:column;gap:1rem;width:100%;display:flex}.midi-sidebar__group-header{border-bottom:1px solid oklch(38.5% .021 274.3);justify-content:space-between;align-items:center;gap:1rem;width:100%;padding-bottom:.5rem;display:flex}.midi-sidebar__group-header h3{color:oklch(95% .005 250);font-size:var(--text-sm);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:.5rem;font-weight:600;display:flex}.midi-sidebar__actions{white-space:nowrap;gap:.75rem;display:flex}.midi-sidebar__action-link{color:oklch(81.1% .213 130.6);font-size:var(--text-sm);cursor:pointer;background:0 0;border:none;padding:0;font-weight:500;transition:opacity .2s}.midi-sidebar__action-link:hover{opacity:.8}.midi-sidebar__list{flex-direction:column;gap:.75rem;width:100%;max-height:20rem;padding-right:.5rem;display:flex;overflow:hidden auto}.midi-sidebar__device-item{color:oklch(95% .005 250);width:100%;font-size:var(--text-sm);background-color:oklch(18% .019 274.6/.4);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;align-items:center;gap:.75rem;padding:.75rem;display:flex;position:relative}.midi-sidebar__device-item input[type=checkbox]{opacity:0;width:0;height:0;margin:0;padding:0;position:absolute}.midi-sidebar__device-item input[type=checkbox]+label{cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;gap:.25rem;min-width:0;padding-left:2.25rem;display:flex;position:relative}.midi-sidebar__device-item input[type=checkbox]+label:before{content:"";background-color:oklch(18% .019 274.6/.5);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;width:1.4rem;height:1.4rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;top:.2rem;left:0}.midi-sidebar__device-item input[type=checkbox]+label:after{content:"";transform-origin:50%;border:.125rem solid oklch(18% .01 260);border-width:0 .125rem .125rem 0;width:.4rem;height:.7rem;transition:all .2s cubic-bezier(.12,.4,.29,1.46);position:absolute;top:.5rem;left:.5rem;transform:rotate(45deg)scale(0)}.midi-sidebar__device-item input[type=checkbox]+label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.midi-sidebar__device-item input[type=checkbox]:checked+label:before{background-color:oklch(81.1% .213 130.6);border-color:oklch(81.1% .213 130.6);box-shadow:0 0 .5rem oklch(81.1% .213 130.6/.3)}.midi-sidebar__device-item input[type=checkbox]:checked+label:after{transform:rotate(45deg)scale(1)}.midi-sidebar__device-item input[type=checkbox]:hover+label:before{background-color:oklch(18% .019 274.6/.7);border-color:oklch(81.1% .213 130.6/.6)}.midi-sidebar__device-item input[type=checkbox]:focus-visible+label:before{border-color:oklch(81.1% .213 130.6);box-shadow:0 0 0 .125rem oklch(81.1% .213 130.6/.4)}.midi-sidebar__device-info{color:oklch(95% .005 250/.7);font-size:var(--text-sm);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.5rem;display:flex;overflow:hidden}.midi-sidebar__device-io{color:oklch(81.1% .213 130.6);font-size:var(--text-sm);flex-shrink:0}.midi-sidebar__filter-item{color:oklch(95% .005 250);width:100%;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;align-items:center;gap:.75rem;display:flex;position:relative}.midi-sidebar__filter-item input[type=checkbox]{opacity:0;width:0;height:0;margin:0;padding:0;position:absolute}.midi-sidebar__filter-item input[type=checkbox]+span{-webkit-user-select:none;user-select:none;padding-left:2.25rem;line-height:1.5;display:inline-block;position:relative}.midi-sidebar__filter-item input[type=checkbox]+span:before{content:"";background-color:oklch(18% .019 274.6/.5);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;width:1.4rem;height:1.4rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:0;transform:translateY(-50%)}.midi-sidebar__filter-item input[type=checkbox]+span:after{content:"";transform-origin:50%;border:.125rem solid oklch(18% .01 260);border-width:0 .125rem .125rem 0;width:.4rem;height:.7rem;transition:all .2s cubic-bezier(.12,.4,.29,1.46);position:absolute;top:50%;left:.5rem;transform:translateY(-55%)rotate(45deg)scale(0)}.midi-sidebar__filter-item input[type=checkbox]:checked+span:before{background-color:oklch(81.1% .213 130.6);border-color:oklch(81.1% .213 130.6);box-shadow:0 0 .5rem oklch(81.1% .213 130.6/.3)}.midi-sidebar__filter-item input[type=checkbox]:checked+span:after{transform:translateY(-55%)rotate(45deg)scale(1)}.midi-sidebar__filter-item input[type=checkbox]:hover+span:before{background-color:oklch(18% .019 274.6/.7);border-color:oklch(81.1% .213 130.6/.6)}.midi-sidebar__filter-item input[type=checkbox]:focus-visible+span:before{border-color:oklch(81.1% .213 130.6);box-shadow:0 0 0 .125rem oklch(81.1% .213 130.6/.4)}.midi-sidebar__channels-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;display:grid}.midi-sidebar__channel-btn{aspect-ratio:1.2;color:oklch(95% .005 250/.7);font-size:var(--text-sm);cursor:pointer;background-color:oklch(18% .019 274.6/.4);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;justify-content:center;align-items:center;padding-block:.6rem;font-weight:500;transition:all .2s;display:flex}.midi-sidebar__channel-btn:hover{color:oklch(95% .005 250);background-color:oklch(81.1% .213 130.6/.15);border-color:oklch(81.1% .213 130.6/.45);box-shadow:0 0 .5rem oklch(81.1% .213 130.6/.2)}.midi-sidebar__channel-btn--active{color:oklch(18% .019 274.6);background-color:oklch(81.1% .213 130.6);border-color:oklch(81.1% .213 130.6);font-weight:600;box-shadow:0 0 .75rem oklch(81.1% .213 130.6/.35)}.midi-sidebar__channel-btn--active:hover{color:oklch(18% .019 274.6);background-color:oklch(90.55% .213 130.6);box-shadow:0 0 1rem oklch(81.1% .213 130.6/.5)}.midi-sidebar__empty{color:oklch(95% .005 250/.7);width:100%;font-size:var(--text-sm);text-align:center;background-color:oklch(18% .019 274.6/.2);border:1px dashed oklch(38.5% .021 274.3);border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.5rem 1rem;display:flex}.midi-sidebar__empty p{margin:0;line-height:1.4}.midi-status-bar{border-bottom:1px solid oklch(38.5% .021 274.3);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 2rem;display:flex}.midi-status-bar__left{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.midi-status-bar__right{align-items:center;gap:.75rem;display:flex}.midi-status-bar__indicator{font-size:var(--text-sm);background-color:oklch(18% .019 274.6);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;align-items:center;gap:.5rem;padding:.5rem 1rem;font-weight:500;display:flex}.midi-status-bar__dot{background-color:oklch(95% .005 250/.7);border-radius:50%;width:.8rem;height:.8rem}.midi-status-bar__dot--active{background-color:oklch(70% .15 160);box-shadow:0 0 .8rem oklch(70% .15 160)}.midi-status-bar__dot--error{background-color:oklch(60% .2 20);box-shadow:0 0 .8rem oklch(60% .2 20)}.midi-log-view{flex-direction:column;flex:1;gap:1rem;padding:2rem;display:flex}.midi-log-view__header-info{color:oklch(95% .005 250/.7);font-size:var(--text-sm);justify-content:space-between;display:flex}.midi-log-view__table-wrapper{border-top:1px solid oklch(38.5% .021 274.3);flex:1;overflow:auto}.midi-log-view__table{border-collapse:collapse;width:100%;font-family:Montserrat,sans-serif;font-size:var(--text-sm);text-align:left}.midi-log-view__table th,.midi-log-view__table td{border-bottom:1px solid oklch(38.5% .021 274.3);padding:1rem 2rem}.midi-log-view__table th{z-index:10;color:oklch(95% .005 250/.7);background-color:oklch(30% .024 273.4);font-weight:600;position:sticky;top:0}.midi-log-view__table tr:hover{background-color:oklch(30% .024 273.4/.3)}.midi-log-view__row--noteon{color:oklch(81.1% .213 130.6)}.midi-log-view__row--noteoff{color:oklch(95% .005 250/.7)}.midi-log-view__row--controlchange{color:oklch(65% .12 230)}.midi-log-view__row--pitchbend{color:oklch(75% .15 300)}.midi-log-view__type-badge{font-size:var(--text-sm);text-transform:uppercase;background-color:oklch(30% .024 273.4);border:1px solid oklch(38.5% .021 274.3);border-radius:1rem;padding:.2rem .5rem;font-weight:600;display:inline-block}.midi-log-view__type-badge--noteon{color:oklch(81.1% .213 130.6);background-color:oklch(81.1% .213 130.6/.15);border-color:oklch(81.1% .213 130.6/.3)}.midi-log-view__type-badge--noteoff{color:oklch(95% .005 250/.7);background-color:oklch(95% .005 250/.1);border-color:oklch(95% .005 250/.2)}.midi-log-view__type-badge--controlchange{color:oklch(65% .12 230);background-color:oklch(65% .12 230/.15);border-color:oklch(65% .12 230/.3)}.midi-log-view__type-badge--pitchbend{color:oklch(75% .15 300);background-color:oklch(75% .15 300/.15);border-color:oklch(75% .15 300/.3)}.midi-log-view__data-field{align-items:center;gap:1rem;display:flex}.midi-log-view__velocity-visual{background-color:oklch(30% .024 273.4);border-radius:.3rem;align-items:center;width:8rem;height:.6rem;display:flex;position:relative;overflow:hidden}.midi-log-view__velocity-fill{border-radius:.3rem;height:100%}.midi-log-view__empty{color:oklch(95% .005 250/.7);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.5rem;padding:6rem 2rem;display:flex}.midi-log-view__empty p{font-size:var(--text-md)}}@layer overrides;