#device-canvas:not(.hidden),#computer-canvas:not(.hidden),#piano-canvas:not(.hidden),#push-canvas:not(.hidden){display:block;max-width:100%;height:auto;margin:0 auto}#status-chord-type,#status-pattern,#status-velocity,#status-octave{transition:all .2s ease-in-out}.key-active{box-shadow:0 0 10px currentColor;transform:scale(1.05);transition:all .1s ease}.keyboard-key{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .1s ease}.keyboard-key:hover{opacity:.8}.keyboard-key-modifier{opacity:.7}.keyboard-key-trigger{font-weight:600}.piano-key-white{fill:#fff;stroke:#000;stroke-width:1px;cursor:pointer;transition:fill .05s ease}.piano-key-black{fill:#000;stroke:#333;stroke-width:1px;cursor:pointer;transition:fill .05s ease}.piano-key-white.active{fill:oklch(var(--p))}.piano-key-black.active{fill:oklch(var(--s))}.push-pad{cursor:pointer;transition:all .1s ease;border-radius:8px}.push-pad:hover{transform:scale(1.05)}.push-pad-modifier{border:2px solid oklch(var(--a))}.loading-ring{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#midi-status{font-size:.75rem;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.midi-connected{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}#settings-modal .modal-box{max-height:80vh;overflow-y:auto}@media (max-width: 768px){#device-canvas,#computer-canvas,#piano-canvas,#push-canvas{max-height:400px}.navbar{flex-wrap:wrap}#device-tabs{justify-content:center}}.card-body ul{font-size:.875rem}@media (max-width: 640px){#status-text{display:none}}#key-mappings-table tr{transition:background-color .2s ease}#key-mappings-table tr:hover{background-color:oklch(var(--b3))}.range::-webkit-slider-thumb{cursor:pointer}.range::-moz-range-thumb{cursor:pointer}.tooltip{font-size:.75rem}.visual-feedback-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:oklch(var(--b1) / .9);padding:2rem;border-radius:1rem;box-shadow:0 10px 40px #0000004d;z-index:1000;animation:scaleIn .2s ease-out;pointer-events:none}@keyframes scaleIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.note-label{font-family:monospace;font-size:.75rem;text-align:center;-webkit-user-select:none;user-select:none}.modifier-zone-highlight{background:oklch(var(--a) / .2);border:2px dashed oklch(var(--a));border-radius:.5rem}.pattern-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background:oklch(var(--s));margin-right:.5rem;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.velocity-meter{display:inline-block;width:100px;height:8px;background:oklch(var(--b3));border-radius:4px;overflow:hidden;position:relative}.velocity-meter-fill{position:absolute;left:0;top:0;height:100%;background:oklch(var(--p));transition:width .1s ease}@media (prefers-contrast: high){.keyboard-key,.piano-key-white,.piano-key-black,.push-pad{border-width:2px}#status-chord-type,#status-pattern,#status-velocity,#status-octave{border:2px solid currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{#settings-modal,.navbar,#device-tabs{display:none}#device-canvas,#computer-canvas,#piano-canvas,#push-canvas{max-width:100%}}#settings-modal .modal-box::-webkit-scrollbar{width:8px}#settings-modal .modal-box::-webkit-scrollbar-track{background:oklch(var(--b2));border-radius:4px}#settings-modal .modal-box::-webkit-scrollbar-thumb{background:oklch(var(--b3));border-radius:4px}#settings-modal .modal-box::-webkit-scrollbar-thumb:hover{background:oklch(var(--bc) / .3)}*:focus-visible{outline:2px solid oklch(var(--p));outline-offset:2px}#device-container{transition:opacity .2s ease}#device-container.switching{opacity:.5}#info-bar{position:fixed;bottom:0;left:0;right:0;background:oklch(var(--b3));color:oklch(var(--bc));padding:.75rem 1rem;font-size:.875rem;transition:opacity .3s ease-in-out;z-index:100;box-shadow:0 -2px 8px #0003}