.drumstep-face{color:#f5f5f4;background:linear-gradient(155deg,#2c3032 0%,#1c2022 48%,#111416 100%);border:1px solid #ffffff1a;border-radius:.75rem;padding:.625rem;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,0 18px 50px -28px #000000b8}.drumstep-face__brand{color:#f5f5f4;letter-spacing:.24em;font-size:15px;font-weight:600}.drumstep-face__preset{--preset-accent:#34d399;--preset-border:#ffffff1f;--preset-menu-surface:#171a1c;--preset-menu-text:#f2f4f4;--preset-surface:#171a1c}.drumstep-face__navbar{background:0 0;border-color:#ffffff14;min-height:0;margin-bottom:.5rem;padding:0 0 .5rem}.drumstep-face__subtitle{letter-spacing:.11em;text-transform:uppercase}.drumstep-face__toolbar{background:#00000040;border:1px solid #ffffff14;border-radius:.5rem;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem;display:flex}.drumstep-face__toolbar-controls{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.drumstep-face__preview{color:#e7e5e4;letter-spacing:.1em;text-transform:uppercase;background:#ffffff0d;border:1px solid #ffffff26;border-radius:.375rem;justify-content:center;align-items:center;gap:.375rem;min-width:5rem;padding:.375rem .625rem;font-size:10px;font-weight:600;transition:background .12s,transform 80ms;display:inline-flex}.drumstep-face__preview:hover{background:#ffffff17}.drumstep-face__preview:active{transform:translateY(1px)}.drumstep-face__preview--active{color:#022c22;background:#34d399;border-color:#6ee7b759}.drumstep-face__preview--host{cursor:not-allowed;color:#a7f3d099;background:#6ee7b714;border-color:#6ee7b733}.drumstep-face__compact-control{background:#00000040;border:1px solid #ffffff1a;border-radius:.375rem;align-items:center;height:2rem;padding:0 .375rem;display:flex}.drumstep-face__compact-control--wide{padding-inline:.5rem}.drumstep-face__accent{color:#34d399}.drumstep-face__lane-count{letter-spacing:.08em;text-transform:uppercase;background:#00000040;border:1px solid #ffffff1a;border-radius:.375rem;font-size:9px;font-weight:600;display:inline-flex;overflow:hidden}.drumstep-face__lane-count-button{color:#a8a29e;background:0 0;border:0;padding:.375rem .5rem;transition:color .12s,background .12s}.drumstep-face__lane-count-button:hover{color:#f5f5f4;background:#ffffff12}.drumstep-face__lane-count-button:active{transform:translateY(1px)}.drumstep-face__lane-count-button--active{color:#022c22;background:#34d399}.drumstep-face__toolbar-status,.drumstep-face__randomize{align-items:center;gap:.5rem;display:flex}.drumstep-face__clock-source{color:#d6d3d1;letter-spacing:.08em;text-transform:uppercase;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:.375rem;padding:.25rem .5rem;font:10px ui-monospace,monospace}.drumstep-face__clear{color:#a8a29e;letter-spacing:.08em;text-transform:uppercase;background:0 0;border:0;border-radius:.375rem;padding:.375rem .5rem;font-size:10px;font-weight:600}.drumstep-face__clear:hover{color:#f5f5f4;background:#ffffff12}.drumstep-face__lanes{background:#0003;border:1px solid #ffffff14;border-radius:.5rem;width:100%;padding:.25rem;overflow:hidden}.drumstep-face__lane-list>*+*{margin-top:1px}.drumstep-face__lane-ruler,.drumstep-face__lane{grid-template-columns:7.25rem minmax(0,1fr);gap:.25rem;display:grid}.drumstep-face__lane-ruler{align-items:end;padding:0 .125rem 1px}.drumstep-face__lane-ruler-label{color:#78716c;letter-spacing:.1em;text-transform:uppercase;font-size:8px;font-weight:600}.drumstep-face__beat-ruler{color:#78716c;height:.75rem;font:9px ui-monospace,monospace;position:relative}.drumstep-face__beat-number{text-align:center;position:absolute;transform:translate(-50%)}.drumstep-face__lane{border-radius:.125rem;align-items:center;padding:0 .125rem;transition:opacity .12s,background .12s}.drumstep-face__lane:hover{background:#ffffff09}.drumstep-face__lane--dimmed{opacity:.35}.drumstep-face__lane--solo{background:#6ee7b712}.drumstep-face__lane-meta{align-items:center;gap:.25rem;min-width:0;display:flex}.drumstep-face__audition,.drumstep-face__lane-toggle{background:#0003;border:1px solid #ffffff1a;border-radius:.125rem;flex:0 0 1.25rem;place-items:center;width:1.25rem;height:1.25rem;display:grid}.drumstep-face__audition:active{transform:translateY(1px)}.drumstep-face__lane-name{flex:1;min-width:0}.drumstep-face__lane-short{color:#e7e5e4;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:600;display:block;overflow:hidden}.drumstep-face__route-trigger{color:#78716c;border-radius:.125rem;align-items:center;gap:.125rem;max-width:100%;font:7px ui-monospace,monospace;display:flex}.drumstep-face__route-trigger:hover{color:#6ee7b7}.drumstep-face__route-trigger:focus-visible{outline:1px solid #6ee7b780}.drumstep-face__lane-toggle{color:#78716c;transition:color .12s,background .12s,border-color .12s}.drumstep-face__lane-toggle:hover{color:#f5f5f4}.drumstep-face__lane-toggle--solo{color:#a7f3d0;background:#6ee7b726;border-color:#6ee7b759}.drumstep-face__lane-toggle--muted{color:#fecdd3;background:#fda4af1a;border-color:#fda4af40}.drumstep-face__utilities{border-top:1px solid #ffffff14;margin-top:.75rem;padding-top:.5rem}.drumstep-face__tabs{gap:.5rem}.drumstep-face__tabs-header{justify-content:space-between;align-items:center;gap:.75rem;padding:0 .25rem;display:flex}.drumstep-face__tabs-list{font-size:10px}.drumstep-face__standard{color:#57534e;font:9px ui-monospace,monospace}.drumstep-face__utility-panel{min-height:4rem}.drumstep-face__generator{background:#0003;border:1px solid #ffffff14;border-radius:.5rem;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:.5rem .75rem;display:flex}.drumstep-face__generator-style{min-width:7rem}.drumstep-face__field-label{color:#78716c;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem;font-size:9px;font-weight:600;display:block}.drumstep-face__generator-select{color:#f5f5f4;background:#00000040;border-color:#ffffff1f;width:7rem;font-size:11px}.drumstep-face__select-menu{color:#f5f5f4;background:#171a1c}.drumstep-face__generator-knobs{flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:.75rem;min-width:0;display:flex}.drumstep-face__seed{color:#78716c;font:9px ui-monospace,monospace}.drumstep-face__randomize-button{color:#022c22;letter-spacing:.06em;text-transform:uppercase;background:#34d399;font-size:10px;font-weight:600}.drumstep-face__randomize-button:hover{background:#6ee7b7}.drumstep-face__pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem;display:grid}.drumstep-face__pad{text-align:center;border:1px solid;border-radius:.375rem;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-height:3.5rem;padding:.5rem .375rem;transition:border-color .12s,background .12s,transform 80ms;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d}.drumstep-face__pad:active{transform:translateY(1px)}.drumstep-face__pad-icon{transition:transform 80ms}.drumstep-face__pad:active .drumstep-face__pad-icon{transform:scale(.9)}.drumstep-face__pad-label{color:#f5f5f4;letter-spacing:.03em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;font-weight:600;overflow:hidden}.drumstep-face__help{color:#a8a29e;margin:.625rem 0 0;font-size:10px;line-height:1.625}@media (width>=640px){.drumstep-face__lane-ruler,.drumstep-face__lane{grid-template-columns:9rem minmax(0,1fr)}.drumstep-face__pads{grid-template-columns:repeat(8,minmax(0,1fr))}}