:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-primary: hsl(161, 49%, 58%);--color-primary-hs: 161, 49%;--color-light-hs: 52, 50%;--color-light: #f4f1de;--color-dark: #180a15;--arrow-down-c: #f08acf;--arrow-up-c: #9bffe6;--font-body: "Gabarito", sans-serif;--trs-smooth: cubic-bezier(.62, .16, .13, 1.01);--trs-inertia: cubic-bezier(.5, -.53, .14, 1.23)}body{font-family:var(--font-body);font-optical-sizing:auto;color:var(--color-light);background-color:var(--color-dark)}#root{inline-size:100%;block-size:100%}.app{inline-size:max-content;max-inline-size:100%;margin-inline:auto;padding-inline:1rem;transition:margin-inline-end .4s var(--trs-inertia);display:flex;flex-direction:column;align-items:center;gap:10dvh}.app-heading{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.app-heading:before{content:"";inline-size:120px;block-size:40px;margin-block-end:1.5rem;background-color:hsla(var(--color-light-hs),95%,.4);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='96' fill='none'%3E%3Cpath fill='%23000' d='M14.193 42.362v41.162c-1.033-1.413-5.376-2.333-9.124.087C1.322 86.03-.929 90.077.37 92.469c1.482 2.73 6.41 4.19 10.328 1.354 2.835-2.05 4.197-4.687 4.63-5.47v-24.82c10.511 6.48 16.213 8.332 10.915 22.961 10.122-15.605-2.5-17.656-10.914-32.965v-1.164c14.249 7.292 11.39 14.113 12.67 17.855 3.544-14.984-9.178-16.5-12.67-27.129v-.642l-1.136-.088ZM72.766.001v74.062c-1.875-2.543-9.76-4.198-16.563.156-6.804 4.354-10.889 11.635-8.53 15.938 2.69 4.912 11.634 7.54 18.75 2.437 5.144-3.69 7.617-8.433 8.405-9.844V38.094c19.08 11.658 29.431 14.992 19.813 41.313 18.376-28.078-4.538-31.768-19.813-59.313V18c25.867 13.119 20.677 25.392 23 32.126 6.435-26.961-16.66-29.687-23-48.813V.157L72.765 0l.001.001ZM132.655 42.362v41.162c-1.033-1.413-5.376-2.333-9.124.087-3.748 2.42-5.998 6.466-4.699 8.858 1.482 2.73 6.409 4.19 10.328 1.354 2.835-2.05 4.197-4.687 4.631-5.47v-24.82c10.51 6.48 16.212 8.332 10.914 22.961 10.122-15.605-2.5-17.656-10.914-32.965v-1.164c14.249 7.292 11.39 14.113 12.669 17.855 3.545-14.984-9.177-16.5-12.669-27.129v-.642l-1.137-.088h.001Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='96' fill='none'%3E%3Cpath fill='%23000' d='M14.193 42.362v41.162c-1.033-1.413-5.376-2.333-9.124.087C1.322 86.03-.929 90.077.37 92.469c1.482 2.73 6.41 4.19 10.328 1.354 2.835-2.05 4.197-4.687 4.63-5.47v-24.82c10.511 6.48 16.213 8.332 10.915 22.961 10.122-15.605-2.5-17.656-10.914-32.965v-1.164c14.249 7.292 11.39 14.113 12.67 17.855 3.544-14.984-9.178-16.5-12.67-27.129v-.642l-1.136-.088ZM72.766.001v74.062c-1.875-2.543-9.76-4.198-16.563.156-6.804 4.354-10.889 11.635-8.53 15.938 2.69 4.912 11.634 7.54 18.75 2.437 5.144-3.69 7.617-8.433 8.405-9.844V38.094c19.08 11.658 29.431 14.992 19.813 41.313 18.376-28.078-4.538-31.768-19.813-59.313V18c25.867 13.119 20.677 25.392 23 32.126 6.435-26.961-16.66-29.687-23-48.813V.157L72.765 0l.001.001ZM132.655 42.362v41.162c-1.033-1.413-5.376-2.333-9.124.087-3.748 2.42-5.998 6.466-4.699 8.858 1.482 2.73 6.409 4.19 10.328 1.354 2.835-2.05 4.197-4.687 4.631-5.47v-24.82c10.51 6.48 16.212 8.332 10.914 22.961 10.122-15.605-2.5-17.656-10.914-32.965v-1.164c14.249 7.292 11.39 14.113 12.669 17.855 3.545-14.984-9.177-16.5-12.669-27.129v-.642l-1.137-.088h.001Z'/%3E%3C/svg%3E")}.app-heading h1,.app-heading h2{margin:unset}.app-heading h2{font-weight:450}.app-heading .mode-switch,.app-heading .subdivision-switch{margin-block-start:0}.app-heading__switches{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;margin-block-start:1rem}.mode-switch,.subdivision-switch{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:1rem;background-color:#ffffff0d}.subdivision-switch button{display:flex;align-items:center;justify-content:center;padding:.5rem .75rem}.subdivision-switch button svg{block-size:1.25rem;inline-size:auto}.pattern-grid-wrap{display:flex;align-items:center;justify-content:center;gap:1rem;inline-size:100%}@media (max-width: 1024px){.pattern-grid-wrap{flex-direction:column}}.pattern-grid-wrap__measures{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1rem}.pattern-grid-wrap__controls{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.pattern-grid-measure-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:3rem;block-size:3rem;padding:0;border:1px solid hsla(255,100%,100%,.15);border-radius:1rem;background-color:#ffffff0d;color:hsla(var(--color-light-hs),95%,.6);cursor:pointer;transition:all .4s var(--trs-inertia)}@supports (corner-shape: squircle){.pattern-grid-measure-btn{border-radius:2rem;corner-shape:superellipse(1.9)}}.pattern-grid-measure-btn svg{inline-size:1.25rem;block-size:1.25rem}.pattern-grid-measure-btn:hover:not(:disabled){color:var(--color-light);background-color:#ffffff1a;border-color:#ffffff40}.pattern-grid-measure-btn:disabled{opacity:.25;cursor:not-allowed}.pattern-grid{display:flex;align-items:center;justify-content:center;gap:1rem;inline-size:auto;flex:0 1 auto}@media (max-width: 1024px){.pattern-grid{flex-direction:column;align-items:stretch;justify-content:stretch}}.pattern-row{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background-color:#ffffff08;border-radius:1rem;transition:background-color .2s ease-in-out}@supports (corner-shape: squircle){.pattern-row{border-radius:4rem;corner-shape:superellipse(1.6)}}.pattern-row:has(.is-playing){background-color:#ffffff1a}.pattern-grid__bar{display:flex;color:hsla(var(--color-light-hs),95%,.4)}.pattern-row__boxes{display:flex}.pattern-grid__bar-label{inline-size:4dvw;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.pattern-grid__bar-label strong{font-size:1.75rem;color:#fff}.pattern-box{display:flex;position:relative;inline-size:4dvw;aspect-ratio:1;cursor:pointer;transition:box-shadow .2s var(--trs-inertia)}.pattern-box:not(.is-active){scale:.85;transition:scale .2s var(--trs-inertia)}.pattern-box:before{content:"";position:absolute;top:-.75rem;right:-.25rem;bottom:-.75rem;left:-.25rem;border-radius:1rem;border:4px solid hsla(0,0%,100%,.2);opacity:0}.pattern-box .strum{position:relative;inset:unset;margin:auto;block-size:4dvw;aspect-ratio:1;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:opacity .2s;opacity:.1}.pattern-box--up .strum{background-color:var(--arrow-up-c);-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E")}.pattern-box--down .strum{background-color:var(--arrow-down-c);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5 2a.5.5 0 0 1 .5.5v8.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7 11.293V2.5a.5.5 0 0 1 .5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5 2a.5.5 0 0 1 .5.5v8.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7 11.293V2.5a.5.5 0 0 1 .5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E")}.pattern-box.is-active .strum{opacity:.8;scale:1}.pattern-box.is-playing{position:relative}.pattern-box.is-playing:before{opacity:1}.pattern-box.is-playing .strum.is-active{opacity:1;scale:1}.pattern-box--readonly{cursor:default}.controls{position:sticky;bottom:1rem;z-index:10;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;inline-size:100%;padding:1rem;-webkit-backdrop-filter:blur(1rem) saturate(1.2);backdrop-filter:blur(1rem) saturate(1.2)}@supports (corner-shape: squircle){.controls{border-radius:2rem;corner-shape:superellipse(1.4)}}.controls__settings{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:2rem}.controls__btns{display:flex;align-items:center;gap:1rem}.controls__btns button{--_c: var(--color-light);display:inline-flex;align-items:center;justify-content:center;block-size:3rem;padding:0;aspect-ratio:1;color:var(--_c);border:1px solid transparent;border-radius:1rem;background-color:#ffffff0d;transition:all .4s;cursor:pointer}@supports (corner-shape: squircle){.controls__btns button{border-radius:4rem;corner-shape:superellipse(1.6)}}.controls__btns button span{display:flex;align-items:center;justify-content:center}.controls__btns button:focus-visible,.controls__btns button:focus,.controls__btns button:active{outline:0;border-color:var(--color-primary);color:var(--color-primary);scale:.95}.controls__btns button:hover,.controls__btns button:is(.is-active){border-color:var(--_c);background-color:var(--color-light);color:var(--color-dark)}.stepper-control{display:flex;flex-direction:column;align-items:center;gap:.5rem}.stepper-control label{font-size:.85em;color:hsla(var(--color-light-hs),95%,.6)}.stepper-control__stepper{display:flex;align-items:center;padding:.5rem;border-radius:1rem;background-color:#ffffff0d}.stepper-control__stepper button{all:unset;display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;cursor:pointer;transition:all .4s var(--trs-inertia)}.stepper-control__stepper input[type=number]{all:unset;text-align:center;width:4em;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.stepper-control__stepper input[type=number]::-webkit-inner-spin-button,.stepper-control__stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper-control__stepper input[type=number]:focus{outline:0;border-color:var(--color-primary)}@supports (corner-shape: squircle){.stepper-control__stepper{border-radius:4rem;corner-shape:superellipse(1.6)}}button:is([role=tab]){padding:.5rem 1rem;background-color:transparent;color:hsla(var(--color-light-hs),95%,.6);border:1px solid transparent;outline:0;transition:all .4s var(--trs-inertia)}@supports (corner-shape: squircle){button:is([role=tab]){border-radius:2rem;corner-shape:superellipse(1.9)}}button:is([role=tab]):hover{color:var(--color-light);background-color:#ffffff0d}button:is([role=tab]).is-active{color:var(--color-dark);background-color:var(--color-light)}@keyframes bounce_up{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@keyframes beatFlashPattern{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}.pattern-bank{position:fixed;inset-block:0;inset-inline-end:0;z-index:20;inline-size:30vw;translate:100% 0;transition:translate .4s var(--trs-inertia)}.pattern-bank.is-open{translate:0 0}.pattern-bank__toggle{position:absolute;inset-block-start:2.5rem;inset-inline-start:-3.5rem;inline-size:3rem;aspect-ratio:1;padding:0;border:0;cursor:pointer;translate:0 -50%;background-color:#ffffff14}@supports (corner-shape: squircle){.pattern-bank__toggle{border-radius:2rem;corner-shape:superellipse(1.9)}}.pattern-bank__toggle:before{content:"";display:block;inline-size:100%;block-size:100%;background-color:hsla(var(--color-light-hs),95%,.7);-webkit-mask-size:45%;mask-size:45%;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M3.309 1a1 1 0 0 0-.894.553L1.053 4.276A.5.5 0 0 0 1 4.5V13a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.053-.224l-1.362-2.723A1 1 0 0 0 11.691 1H3.309m0 1H7v2H2.309zM8 4V2h3.691l1 2zm-.5 1H13v8H2V5zm-2 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M3.309 1a1 1 0 0 0-.894.553L1.053 4.276A.5.5 0 0 0 1 4.5V13a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.053-.224l-1.362-2.723A1 1 0 0 0 11.691 1H3.309m0 1H7v2H2.309zM8 4V2h3.691l1 2zm-.5 1H13v8H2V5zm-2 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1z' clip-rule='evenodd'/%3E%3C/svg%3E")}.pattern-bank__panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1rem;block-size:100%;padding:2rem;overflow-y:auto;background-color:#ffffff0f;-webkit-backdrop-filter:blur(1rem) saturate(1.2);backdrop-filter:blur(1rem) saturate(1.2)}@supports (corner-shape: squircle){.pattern-bank__panel{border-radius:2rem 0 0 2rem;corner-shape:superellipse(1.9) 0 0 superellipse(1.9)}}.pattern-bank__title{margin:0;font-size:.9rem;font-weight:500;color:hsla(var(--color-light-hs),95%,.6);text-transform:uppercase;letter-spacing:.05em}.pattern-bank__name{inline-size:100%;padding:.5rem .75rem;border:1px solid hsla(255,100%,100%,.15);border-radius:.5rem;background-color:#ffffff0d;color:var(--color-light);font:inherit;outline:0}.pattern-bank__name:focus{border-color:var(--color-primary)}.pattern-bank__list-title{margin:1.5rem 0 0;font-size:.8rem;font-weight:500;color:hsla(var(--color-light-hs),95%,.5);text-transform:uppercase;letter-spacing:.05em}.pattern-bank__empty{margin:0;font-size:.9rem;color:hsla(var(--color-light-hs),95%,.45)}.pattern-bank__list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:.5rem;margin:0;padding:0;list-style:none}.pattern-bank__list li{display:flex;align-items:center;gap:.15rem;line-height:1;padding:.5rem .35rem .35rem .85rem;border-radius:.75rem;background-color:hsla(var(--color-primary-hs),90%,.2)}.pattern-bank__load{all:unset;cursor:pointer;font-size:.9rem;color:var(--color-light);padding-inline-end:.25rem}.pattern-bank__load:hover{color:var(--color-primary)}.pattern-bank__delete{all:unset;display:flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;cursor:pointer;color:hsla(var(--color-light-hs),95%,.5);transition:all .2s}.pattern-bank__delete:hover{color:var(--color-light);background-color:#ffffff1a}.countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:6rem;color:var(--color-light);background-color:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out}.countdown.show{opacity:1}.countdown-number{animation:pulse .5s ease forwards}@keyframes pulse{0%{transform:scale(.7);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}@keyframes ping{0%{transform:scale(1);opacity:0}50%{transform:scale(1.4);opacity:1}to{transform:scale(1);opacity:0}}